@worktile/gantt 11.0.3 → 12.0.2

package/fesm2015/worktile-gantt.js

@@ -1,11 +1,14 @@
-import { EventEmitter, Directive, ElementRef, ChangeDetectorRef, NgZone, Input, Output, ContentChild, HostBinding, InjectionToken, Component, Inject, ChangeDetectionStrategy, ContentChildren, ViewChild, Injectable, Optional, Pipe, NgModule } from '@angular/core';
+import * as i0 from '@angular/core';
+import { EventEmitter, Directive, Input, Output, ContentChild, HostBinding, InjectionToken, Component, Inject, Pipe, ViewChild, Injectable, Optional, forwardRef, ChangeDetectionStrategy, ContentChildren, NgModule } from '@angular/core';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { take, skip, takeUntil, startWith, finalize, map, pairwise, auditTime } from 'rxjs/operators';
+import { take, skip, takeUntil, startWith, map, pairwise, auditTime, finalize } from 'rxjs/operators';
 import { BehaviorSubject, Subject, merge, fromEvent } 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 { coerceCssPixelValue } from '@angular/cdk/coercion';
-import { DragDrop, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i1 from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import html2canvas from 'html2canvas';
 
 class GanttDatePoint {
@@ -292,14 +295,14 @@ class GanttGroupInternal {
 
 const primaryDatePointTop = 18;
 const secondaryDatePointTop = 36;
-const viewOptions = {
+const viewOptions$5 = {
     min: new GanttDate().addYears(-1).startOfYear(),
     max: new GanttDate().addYears(1).endOfYear()
 };
 class GanttView {
     constructor(start, end, options) {
         this.showTimeline = true;
-        this.options = Object.assign({}, viewOptions, options);
+        this.options = Object.assign({}, viewOptions$5, options);
         const startDate = start.isCustom
             ? this.startOf(start.date)
             : this.startOf(start.date.value < this.options.start.value ? start.date : this.options.start);
@@ -409,7 +412,7 @@ class GanttView {
     }
 }
 
-const viewOptions$1 = {
+const viewOptions$4 = {
     start: new GanttDate().startOfQuarter().addQuarters(-1),
     end: new GanttDate().endOfQuarter().addQuarters(2),
     cellWidth: 280,
@@ -418,7 +421,7 @@ const viewOptions$1 = {
 };
 class GanttViewMonth extends GanttView {
     constructor(start, end, options) {
-        super(start, end, Object.assign({}, viewOptions$1, options));
+        super(start, end, Object.assign({}, viewOptions$4, options));
     }
     startOf(date) {
         return date.startOfQuarter();
@@ -454,7 +457,7 @@ class GanttViewMonth extends GanttView {
     }
 }
 
-const viewOptions$2 = {
+const viewOptions$3 = {
     start: new GanttDate().addYears(-1).startOfYear(),
     end: new GanttDate().addYears(1).endOfYear(),
     min: new GanttDate().addYears(-2).startOfYear(),
@@ -465,7 +468,7 @@ const viewOptions$2 = {
 };
 class GanttViewQuarter extends GanttView {
     constructor(start, end, options) {
-        super(start, end, Object.assign({}, viewOptions$2, options));
+        super(start, end, Object.assign({}, viewOptions$3, options));
     }
     startOf(date) {
         return date.startOfYear();
@@ -501,7 +504,7 @@ class GanttViewQuarter extends GanttView {
     }
 }
 
-const viewOptions$3 = {
+const viewOptions$2 = {
     cellWidth: 35,
     start: new GanttDate().startOfYear().startOfWeek({ weekStartsOn: 1 }),
     end: new GanttDate().endOfYear().endOfWeek({ weekStartsOn: 1 }),
@@ -510,7 +513,7 @@ const viewOptions$3 = {
 };
 class GanttViewDay extends GanttView {
     constructor(start, end, options) {
-        super(start, end, Object.assign({}, viewOptions$3, options));
+        super(start, end, Object.assign({}, viewOptions$2, options));
         this.showWeekBackdrop = true;
         this.showTimeline = false;
     }
@@ -552,7 +555,7 @@ class GanttViewDay extends GanttView {
     }
 }
 
-const viewOptions$4 = {
+const viewOptions$1 = {
     cellWidth: 280,
     start: new GanttDate().startOfYear().startOfWeek({ weekStartsOn: 1 }),
     end: new GanttDate().endOfYear().endOfWeek({ weekStartsOn: 1 }),
@@ -561,7 +564,7 @@ const viewOptions$4 = {
 };
 class GanttViewWeek extends GanttView {
     constructor(start, end, options) {
-        super(start, end, Object.assign({}, viewOptions$4, options));
+        super(start, end, Object.assign({}, viewOptions$1, options));
     }
     startOf(date) {
         return date.startOfWeek({ weekStartsOn: 1 });
@@ -598,16 +601,16 @@ class GanttViewWeek extends GanttView {
     }
 }
 
-const viewOptions$5 = {
+const viewOptions = {
     cellWidth: 480,
-    start: new GanttDate().addYears(-1).startOfYear(),
-    end: new GanttDate().addYears(1).endOfYear(),
+    start: new GanttDate().addYears(-2).startOfYear(),
+    end: new GanttDate().addYears(2).endOfYear(),
     addAmount: 1,
     addUnit: 'year'
 };
 class GanttViewYear extends GanttView {
     constructor(start, end, options) {
-        super(start, end, Object.assign({}, viewOptions$5, options));
+        super(start, end, Object.assign({}, viewOptions, options));
     }
     startOf(date) {
         return date.startOfYear();
@@ -720,6 +723,16 @@ function recursiveItems(items) {
     });
     return result;
 }
+function getFlatItems(items) {
+    const result = [];
+    (items || []).forEach((item) => {
+        result.push(item);
+        if (item.children) {
+            result.push(...getFlatItems(item.children));
+        }
+    });
+    return result;
+}
 
 class GanttUpper {
     constructor(elementRef, cdr, ngZone) {
@@ -741,7 +754,6 @@ class GanttUpper {
         this.expandChange = new EventEmitter();
         this.firstChange = true;
         this.unsubscribe$ = new Subject();
-        this.expandedItemIds = [];
         this.ganttClass = true;
     }
     get element() {
@@ -764,21 +776,6 @@ class GanttUpper {
     }
     setupItems() {
         this.originItems = uniqBy(this.originItems, 'id');
-        // 根据上一次数据展开状态同步新的数据展开状态
-        this.originItems.forEach((originItem) => {
-            var _a, _b;
-            const oldItem = this.items.find((item) => {
-                return item.id === originItem.id;
-            });
-            if (!this.firstChange) {
-                if (oldItem && !((_a = oldItem.children) === null || _a === void 0 ? void 0 : _a.length) && ((_b = originItem.children) === null || _b === void 0 ? void 0 : _b.length)) {
-                    originItem.expanded = originItem.expanded || this.expandedItemIds.includes(originItem.id);
-                }
-                else {
-                    originItem.expanded = this.expandedItemIds.includes(originItem.id);
-                }
-            }
-        });
         this.items = [];
         if (this.groups.length > 0) {
             this.originItems.forEach((origin) => {
@@ -797,17 +794,23 @@ class GanttUpper {
         }
     }
     setupExpandedState() {
+        this.originItems = uniqBy(this.originItems, 'id');
         let items = [];
+        const flatOriginItems = getFlatItems(this.originItems);
         if (this.items.length > 0) {
             items = recursiveItems(this.items);
         }
         else {
             items = flatten(this.groups.map((group) => recursiveItems(group.items)));
         }
-        this.expandedItemIds = [];
         items.forEach((item) => {
             if (item.origin.expanded) {
-                this.expandedItemIds.push(item.id);
+                const newItem = flatOriginItems.find((originItem) => originItem.id === item.id);
+                if (newItem) {
+                    if (newItem.expanded === undefined) {
+                        newItem.expanded = true;
+                    }
+                }
             }
         });
     }
@@ -921,36 +924,59 @@ class GanttUpper {
         this.expandGroups(false);
     }
 }
-GanttUpper.decorators = [
-    { type: Directive }
-];
-GanttUpper.ctorParameters = () => [
-    { type: ElementRef },
-    { type: ChangeDetectorRef },
-    { type: NgZone }
-];
-GanttUpper.propDecorators = {
-    originItems: [{ type: Input, args: ['items',] }],
-    originGroups: [{ type: Input, args: ['groups',] }],
-    viewType: [{ type: Input }],
-    start: [{ type: Input }],
-    end: [{ type: Input }],
-    showTodayLine: [{ type: Input }],
-    draggable: [{ type: Input }],
-    styles: [{ type: Input }],
-    viewOptions: [{ type: Input }],
-    disabledLoadOnScroll: [{ type: Input }],
-    loadOnScroll: [{ type: Output }],
-    dragStarted: [{ type: Output }],
-    dragEnded: [{ type: Output }],
-    barClick: [{ type: Output }],
-    barTemplate: [{ type: ContentChild, args: ['bar', { static: true },] }],
-    rangeTemplate: [{ type: ContentChild, args: ['range', { static: true },] }],
-    itemTemplate: [{ type: ContentChild, args: ['item', { static: true },] }],
-    groupTemplate: [{ type: ContentChild, args: ['group', { static: true },] }],
-    groupHeaderTemplate: [{ type: ContentChild, args: ['groupHeader', { static: true },] }],
-    ganttClass: [{ type: HostBinding, args: ['class.gantt',] }]
-};
+GanttUpper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttUpper, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+GanttUpper.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.2", type: GanttUpper, inputs: { originItems: ["items", "originItems"], originGroups: ["groups", "originGroups"], viewType: "viewType", start: "start", end: "end", showTodayLine: "showTodayLine", draggable: "draggable", styles: "styles", viewOptions: "viewOptions", disabledLoadOnScroll: "disabledLoadOnScroll" }, outputs: { loadOnScroll: "loadOnScroll", dragStarted: "dragStarted", dragEnded: "dragEnded", barClick: "barClick" }, host: { properties: { "class.gantt": "this.ganttClass" } }, queries: [{ propertyName: "barTemplate", first: true, predicate: ["bar"], descendants: true, static: true }, { propertyName: "rangeTemplate", first: true, predicate: ["range"], descendants: true, static: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], descendants: true, static: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ["groupHeader"], descendants: true, static: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttUpper, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { originItems: [{
+                type: Input,
+                args: ['items']
+            }], originGroups: [{
+                type: Input,
+                args: ['groups']
+            }], viewType: [{
+                type: Input
+            }], start: [{
+                type: Input
+            }], end: [{
+                type: Input
+            }], showTodayLine: [{
+                type: Input
+            }], draggable: [{
+                type: Input
+            }], styles: [{
+                type: Input
+            }], viewOptions: [{
+                type: Input
+            }], disabledLoadOnScroll: [{
+                type: Input
+            }], loadOnScroll: [{
+                type: Output
+            }], dragStarted: [{
+                type: Output
+            }], dragEnded: [{
+                type: Output
+            }], barClick: [{
+                type: Output
+            }], barTemplate: [{
+                type: ContentChild,
+                args: ['bar', { static: true }]
+            }], rangeTemplate: [{
+                type: ContentChild,
+                args: ['range', { static: true }]
+            }], itemTemplate: [{
+                type: ContentChild,
+                args: ['item', { static: true }]
+            }], groupTemplate: [{
+                type: ContentChild,
+                args: ['group', { static: true }]
+            }], groupHeaderTemplate: [{
+                type: ContentChild,
+                args: ['groupHeader', { static: true }]
+            }], ganttClass: [{
+                type: HostBinding,
+                args: ['class.gantt']
+            }] } });
 const GANTT_UPPER_TOKEN = new InjectionToken('GANTT_UPPER_TOKEN');
 
 class NgxGanttTableColumnComponent {
@@ -962,21 +988,28 @@ class NgxGanttTableColumnComponent {
     }
     ngOnInit() { }
 }
-NgxGanttTableColumnComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ngx-gantt-column',
-                template: ''
-            },] }
-];
-NgxGanttTableColumnComponent.ctorParameters = () => [
-    { type: GanttUpper, decorators: [{ type: Inject, args: [GANTT_UPPER_TOKEN,] }] }
-];
-NgxGanttTableColumnComponent.propDecorators = {
-    width: [{ type: Input }],
-    name: [{ type: Input }],
-    templateRef: [{ type: ContentChild, args: ['cell', { static: true },] }],
-    headerTemplateRef: [{ type: ContentChild, args: ['header', { static: true },] }]
-};
+NgxGanttTableColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: NgxGanttTableColumnComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
+NgxGanttTableColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: NgxGanttTableColumnComponent, selector: "ngx-gantt-column", inputs: { width: "width", name: "name" }, queries: [{ propertyName: "templateRef", first: true, predicate: ["cell"], descendants: true, static: true }, { propertyName: "headerTemplateRef", first: true, predicate: ["header"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: NgxGanttTableColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-gantt-column',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: GanttUpper, decorators: [{
+                    type: Inject,
+                    args: [GANTT_UPPER_TOKEN]
+                }] }]; }, propDecorators: { width: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], templateRef: [{
+                type: ContentChild,
+                args: ['cell', { static: true }]
+            }], headerTemplateRef: [{
+                type: ContentChild,
+                args: ['header', { static: true }]
+            }] } });
 
 class NgxGanttTableComponent {
     constructor() {
@@ -984,199 +1017,195 @@ class NgxGanttTableComponent {
     }
     ngOnInit() { }
 }
-NgxGanttTableComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ngx-gantt-table',
-                template: ''
-            },] }
-];
-NgxGanttTableComponent.ctorParameters = () => [];
-NgxGanttTableComponent.propDecorators = {
-    columnChanges: [{ type: Output }]
+NgxGanttTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: NgxGanttTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NgxGanttTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: NgxGanttTableComponent, selector: "ngx-gantt-table", outputs: { columnChanges: "columnChanges" }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: NgxGanttTableComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-gantt-table',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { columnChanges: [{
+                type: Output
+            }] } });
+
+const GANTT_ABSTRACT_TOKEN = new InjectionToken('gantt-abstract-token');
+
+const angleRight = `<svg xmlns="http://www.w3.org/2000/svg" fit=""  preserveAspectRatio="xMidYMid meet" focusable="false"><g id="amnavigation/angle-right" stroke-width="1" fill-rule="evenodd"><path d="M7.978 11.498l-.005.005L2.3 5.831 3.13 5l4.848 4.848L12.826 5l.83.831-5.673 5.672-.005-.005z"   transform="rotate(-90 7.978 8.252)"></path></g></svg>`;
+const angleDown = `<svg xmlns="http://www.w3.org/2000/svg" fit=""  preserveAspectRatio="xMidYMid meet" focusable="false"><g id="aknavigation/angle-down" stroke-width="1" fill-rule="evenodd"><path d="M7.978 11.997l-.005.006L2.3 6.33l.83-.831 4.848 4.848L12.826 5.5l.83.83-5.673 5.673-.005-.006z" ></path></g></svg>`;
+const plusSquare = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fit=""   preserveAspectRatio="xMidYMid meet" focusable="false"><g id="kxaction/plus-square" stroke-width="1" fill-rule="evenodd"><path d="M2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1.2a.8.8 0 0 0-.8.8v12a.8.8 0 0 0 .8.8h12a.8.8 0 0 0 .8-.8V2a.8.8 0 0 0-.8-.8H2zm5.45 6.2V4.75h1.2V7.4h2.65v1.2H8.65v2.65h-1.2V8.6H4.8V7.4h2.65z"></path></g></svg>`;
+const minusSquare = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fit="" preserveAspectRatio="xMidYMid meet" focusable="false"><g id="jnaction/minus-square" stroke-width="1" fill-rule="evenodd"><path d="M2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1.2a.8.8 0 0 0-.8.8v12a.8.8 0 0 0 .8.8h12a.8.8 0 0 0 .8-.8V2a.8.8 0 0 0-.8-.8H2zm2.8 6.2h6.5v1.2H4.8V7.4z"></path></g></svg>`;
+const loadingIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve">
+<path fill="#aaa" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)">
+    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>
+</path>
+</svg>`;
+const emptyIcon = `<svg
+width="148px"
+height="134px"
+viewBox="0 0 148 134"
+version="1.1"
+xmlns="http://www.w3.org/2000/svg"
+xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+<defs>
+  <filter x="0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-1">
+    <feGaussianBlur stdDeviation="0" in="SourceGraphic"></feGaussianBlur>
+  </filter>
+</defs>
+<g id="148x134" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+  <g id="编组-6" transform="translate(1.000000, 1.000000)">
+    <ellipse
+      id="椭圆形"
+      fill="#EDEEF2"
+      opacity="0.3"
+      filter="url(#filter-1)"
+      cx="73.0800017"
+      cy="115.920003"
+      rx="73.0800017"
+      ry="16.8000004"
+    ></ellipse>
+    <g id="编组-5" transform="translate(15.120000, 0.000000)">
+      <polygon
+        id="矩形"
+        fill="#E2E4E9"
+        points="19.2789848 49.5600011 99.1200023 48.7200011 117.600003 75.9297673 117.600003 92.313049 0 92.313049 0 75.0356267"
+      ></polygon>
+      <path
+        d="M23.5200005,0 L94.0800002,0 C97.7913538,2.06413823e-16 100.8,3.00864655 100.8,6.72000015 L100.8,99.1200023 L100.8,99.1200023 L16.8000004,99.1200023 L16.8000004,6.72000015 C16.8000004,3.00864655 19.8086469,1.56994302e-15 23.5200005,0 Z"
+        id="矩形"
+        fill="#F9FAFB"
+      ></path>
+      <path
+        d="M30.9200007,12.4400003 L86.6800019,12.4400003 C88.5356787,12.4400003 90.040002,13.9443236 90.040002,15.8000004 L90.040002,42.000001 C90.040002,43.8556778 88.5356787,45.360001 86.6800019,45.360001 L30.9200007,45.360001 C29.0643239,45.360001 27.5600006,43.8556778 27.5600006,42.000001 L27.5600006,15.8000004 C27.5600006,13.9443236 29.0643239,12.4400003 30.9200007,12.4400003 Z"
+        id="矩形"
+        fill="#E8EAEE"
+      ></path>
+      <text
+        id="&lt;/null&gt;"
+        font-family="PingFangSC-Medium, PingFang SC"
+        font-size="15.1200003"
+        font-weight="400"
+        fill="#BCBECD"
+      >
+        <tspan x="33.6000008" y="32.8000004">&lt;/null&gt;</tspan>
+      </text>
+      <rect id="矩形" fill="#E8EAEE" x="27.5600006" y="52.0800012" width="61.4800014" height="5.04000011" rx="2.52000006"></rect>
+      <rect
+        id="矩形备份"
+        fill="#E8EAEE"
+        x="27.5600006"
+        y="63.8400014"
+        width="61.4800014"
+        height="5.04000011"
+        rx="2.52000006"
+      ></rect>
+      <path
+        d="M0,75.6000017 L29.280235,75.6000017 C32.0637502,75.6000017 34.3202352,77.8564866 34.3202352,80.6400018 L34.3202352,86.2591426 C34.3202352,89.0426578 36.5767201,91.2991427 39.3602353,91.2991427 L78.4136737,91.2991427 C81.1971889,91.2991427 83.4536738,89.0426578 83.4536738,86.2591426 L83.4536738,80.6400018 C83.4536738,77.8564866 85.7101587,75.6000017 88.4936739,75.6000017 L117.600003,75.6000017 L117.600003,75.6000017 L117.600003,110.880003 C117.600003,115.519195 113.839194,119.280003 109.200002,119.280003 L8.40000019,119.280003 C3.76080819,119.280003 -6.53729019e-15,115.519195 0,110.880003 L0,75.6000017 L0,75.6000017 Z"
+        id="矩形"
+        fill="#EDEFF2"
+      ></path>
+    </g>
+  </g>
+</g>
+</svg>`;
+const icons = {
+    'angle-right': angleRight,
+    'angle-down': angleDown,
+    'plus-square': plusSquare,
+    'minus-square': minusSquare,
+    loading: loadingIcon,
+    empty: emptyIcon
 };
 
-const defaultColumnWidth = 100;
-const minColumnWidth = 80;
-class NgxGanttComponent extends GanttUpper {
-    constructor(elementRef, cdr, ngZone) {
-        super(elementRef, cdr, ngZone);
-        this.maxLevel = 2;
-        this.linkDragStarted = new EventEmitter();
-        this.linkDragEnded = new EventEmitter();
-        this.lineClick = new EventEmitter();
-        this.ngUnsubscribe$ = new Subject();
-        this.sideTableWidth = sideWidth;
-    }
-    ngOnInit() {
-        super.onInit();
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            this.dragContainer.linkDragStarted.pipe(takeUntil(this.ngUnsubscribe$)).subscribe((event) => {
-                this.linkDragStarted.emit(event);
-            });
-            this.dragContainer.linkDragEnded.pipe(takeUntil(this.ngUnsubscribe$)).subscribe((event) => {
-                this.linkDragEnded.emit(event);
-            });
-        });
-    }
-    ngAfterViewInit() {
-        this.columns.changes.pipe(startWith(true), takeUntil(this.ngUnsubscribe$)).subscribe(() => {
-            this.columns.forEach((column) => {
-                if (!column.columnWidth) {
-                    column.columnWidth = coerceCssPixelValue(defaultColumnWidth);
-                }
-            });
-            this.cdr.detectChanges();
-        });
+class GanttIconComponent {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.isIcon = true;
     }
-    ngOnChanges(changes) {
-        super.onChanges(changes);
+    set iconName(name) {
+        this.setSvg(name);
     }
-    expandChildren(item) {
-        if (!item.expanded) {
-            item.setExpand(true);
-            if (this.async && this.childrenResolve && item.children.length === 0) {
-                item.loading = true;
-                this.childrenResolve(item.origin)
-                    .pipe(take(1), finalize(() => {
-                    item.loading = false;
-                    this.expandChange.emit();
-                    this.cdr.detectChanges();
-                }))
-                    .subscribe((items) => {
-                    item.addChildren(items);
-                    this.computeItemsRefs(...item.children);
-                });
-            }
-            else {
-                this.computeItemsRefs(...item.children);
-                this.expandChange.emit();
-            }
+    ngOnInit() { }
+    ngAfterViewInit() { }
+    setSvg(name) {
+        const iconSvg = icons[name];
+        if (iconSvg) {
+            this.elementRef.nativeElement.innerHTML = iconSvg;
         }
         else {
-            item.setExpand(false);
-            this.expandChange.emit();
+            this.elementRef.nativeElement.innerHTML = '';
         }
     }
-    ngOnDestroy() {
-        super.onDestroy();
+}
+GanttIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttIconComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+GanttIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: GanttIconComponent, selector: "gantt-icon", inputs: { iconName: "iconName" }, host: { properties: { "class.gantt-icon": "this.isIcon" } }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'gantt-icon',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { isIcon: [{
+                type: HostBinding,
+                args: ['class.gantt-icon']
+            }], iconName: [{
+                type: Input
+            }] } });
+
+class IsGanttRangeItemPipe {
+    transform(value) {
+        return value === GanttItemType.range;
     }
 }
-NgxGanttComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ngx-gantt',
-                template: "<ngx-gantt-root>\n  <ng-template #sideTemplate>\n    <gantt-table [groups]=\"groups\" [items]=\"items\" [columns]=\"columns\" [groupTemplate]=\"groupTemplate\" [emptyTemplate]=\"tableEmptyTemplate\"></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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                providers: [
-                    {
-                        provide: GANTT_UPPER_TOKEN,
-                        useExisting: NgxGanttComponent
-                    }
-                ]
-            },] }
-];
-NgxGanttComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: ChangeDetectorRef },
-    { type: NgZone }
-];
-NgxGanttComponent.propDecorators = {
-    maxLevel: [{ type: Input }],
-    async: [{ type: Input }],
-    childrenResolve: [{ type: Input }],
-    linkable: [{ type: Input }],
-    linkDragStarted: [{ type: Output }],
-    linkDragEnded: [{ type: Output }],
-    lineClick: [{ type: Output }],
-    table: [{ type: ContentChild, args: [NgxGanttTableComponent,] }],
-    columns: [{ type: ContentChildren, args: [NgxGanttTableColumnComponent, { descendants: true },] }],
-    tableEmptyTemplate: [{ type: ContentChild, args: ['tableEmpty', { static: true },] }]
-};
+IsGanttRangeItemPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: IsGanttRangeItemPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+IsGanttRangeItemPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: IsGanttRangeItemPipe, name: "isGanttRangeItem" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: IsGanttRangeItemPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'isGanttRangeItem'
+                }]
+        }] });
+class IsGanttBarItemPipe {
+    transform(value) {
+        return value === GanttItemType.bar;
+    }
+}
+IsGanttBarItemPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: IsGanttBarItemPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+IsGanttBarItemPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: IsGanttBarItemPipe, name: "isGanttBarItem" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: IsGanttBarItemPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'isGanttBarItem'
+                }]
+        }] });
+class IsGanttCustomItemPipe {
+    transform(value) {
+        return value === GanttItemType.custom;
+    }
+}
+IsGanttCustomItemPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: IsGanttCustomItemPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+IsGanttCustomItemPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: IsGanttCustomItemPipe, name: "isGanttCustomItem" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: IsGanttCustomItemPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'isGanttCustomItem'
+                }]
+        }] });
 
-const mainHeight = 5000;
-class GanttCalendarComponent {
-    constructor(ganttUpper, ngZone, elementRef) {
-        this.ganttUpper = ganttUpper;
-        this.ngZone = ngZone;
+const defaultColumnWidth = 100;
+const minColumnWidth = 80;
+class GanttTableComponent {
+    constructor(gantt, elementRef) {
+        this.gantt = gantt;
         this.elementRef = elementRef;
-        this.unsubscribe$ = new Subject();
-        this.headerHeight = headerHeight;
-        this.mainHeight = mainHeight;
-        this.todayHeight = todayHeight;
-        this.todayWidth = todayWidth;
-        this.todayBorderRadius = todayBorderRadius;
-        this.viewTypes = GanttViewType;
-        this.className = true;
-    }
-    get view() {
-        return this.ganttUpper.view;
+        this.ganttTableClass = true;
+        this.ganttTableEmptyClass = false;
     }
-    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 {
-            todayEle.style.display = 'none';
-        }
-    }
-    ngOnInit() {
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            merge(this.ganttUpper.viewChange, this.ganttUpper.view.start$)
-                .pipe(takeUntil(this.unsubscribe$))
-                .subscribe(() => {
-                this.setTodayPoint();
-            });
-        });
-    }
-    ngAfterViewInit() { }
-    ngOnChanges(changes) { }
-    trackBy(point, index) {
-        return point.text || index;
-    }
-    ngOnDestroy() {
-        this.unsubscribe$.next();
-        this.unsubscribe$.complete();
-    }
-}
-GanttCalendarComponent.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"
-            },] }
-];
-GanttCalendarComponent.ctorParameters = () => [
-    { type: GanttUpper, decorators: [{ type: Inject, args: [GANTT_UPPER_TOKEN,] }] },
-    { type: NgZone },
-    { type: ElementRef }
-];
-GanttCalendarComponent.propDecorators = {
-    className: [{ type: HostBinding, args: ['class.gantt-calendar-overlay',] }]
-};
-
-class GanttTableComponent {
-    constructor(gantt, elementRef) {
-        this.gantt = gantt;
-        this.elementRef = elementRef;
-        this.ganttTableClass = true;
-        this.ganttTableEmptyClass = false;
-    }
-    set columns(columns) {
-        columns.forEach((column) => {
-            if (!column.columnWidth) {
-                column.columnWidth = coerceCssPixelValue(defaultColumnWidth);
+    set columns(columns) {
+        columns.forEach((column) => {
+            if (!column.columnWidth) {
+                column.columnWidth = coerceCssPixelValue(defaultColumnWidth);
             }
         });
         this.columnList = columns;
@@ -1270,26 +1299,37 @@ class GanttTableComponent {
         this.draglineElementRef.nativeElement.style.display = 'none';
     }
 }
-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\">\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\">\n    <div\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      [style.height.px]=\"gantt.styles.lineHeight\"\n      [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n    >\n      <div class=\"gantt-table-column\" *ngFor=\"let column of columnList; let first = first\" [style.width]=\"column.columnWidth\">\n        <div *ngIf=\"first\" class=\"gantt-expand-icon\" [style.marginLeft.px]=\"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(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    </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"
-            },] }
-];
-GanttTableComponent.ctorParameters = () => [
-    { type: NgxGanttComponent },
-    { type: ElementRef }
-];
-GanttTableComponent.propDecorators = {
-    groups: [{ type: Input }],
-    items: [{ type: Input }],
-    columns: [{ type: Input }],
-    groupTemplate: [{ type: Input }],
-    emptyTemplate: [{ type: Input }],
-    draglineElementRef: [{ type: ViewChild, args: ['dragLine', { static: true },] }],
-    ganttTableClass: [{ type: HostBinding, args: ['class.gantt-table',] }],
-    ganttTableEmptyClass: [{ type: HostBinding, args: ['class.gantt-table-empty',] }]
-};
+GanttTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttTableComponent, deps: [{ token: GANTT_ABSTRACT_TOKEN }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+GanttTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: GanttTableComponent, selector: "gantt-table", inputs: { groups: "groups", items: "items", columns: "columns", groupTemplate: "groupTemplate", emptyTemplate: "emptyTemplate" }, 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\">\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\">\n    <div\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      [style.height.px]=\"gantt.styles.lineHeight\"\n      [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n    >\n      <div class=\"gantt-table-column\" *ngFor=\"let column of columnList; let first = first\" [style.width]=\"column.columnWidth\">\n        <div *ngIf=\"first\" class=\"gantt-expand-icon\" [style.marginLeft.px]=\"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(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    </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: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragData", "cdkDragFreeDragPosition"], 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: "12.1.2", ngImport: i0, type: GanttTableComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'gantt-table',
+                    templateUrl: './gantt-table.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [GANTT_ABSTRACT_TOKEN]
+                }] }, { type: i0.ElementRef }]; }, propDecorators: { groups: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], groupTemplate: [{
+                type: Input
+            }], emptyTemplate: [{
+                type: Input
+            }], draglineElementRef: [{
+                type: ViewChild,
+                args: ['dragLine', { static: true }]
+            }], ganttTableClass: [{
+                type: HostBinding,
+                args: ['class.gantt-table']
+            }], ganttTableEmptyClass: [{
+                type: HostBinding,
+                args: ['class.gantt-table-empty']
+            }] } });
 
 const scrollThreshold = 50;
 var ScrollDirection;
@@ -1383,10 +1423,11 @@ class GanttDomService {
         this.unsubscribe$.complete();
     }
 }
-GanttDomService.decorators = [
-    { type: Injectable }
-];
-GanttDomService.ctorParameters = () => [];
+GanttDomService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttDomService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+GanttDomService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttDomService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttDomService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
 
 class GanttDragContainer {
     constructor() {
@@ -1439,286 +1480,526 @@ class GanttDragContainer {
         this.linkDragTarget = null;
     }
 }
-GanttDragContainer.decorators = [
-    { type: Injectable }
-];
-GanttDragContainer.ctorParameters = () => [];
+GanttDragContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttDragContainer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+GanttDragContainer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttDragContainer });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttDragContainer, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
 
-const dragMinWidth = 10;
-const activeClass = 'gantt-bar-active';
-const linkDropClass = 'gantt-bar-link-drop';
-function createSvgElement(qualifiedName, className) {
-    const element = document.createElementNS('http://www.w3.org/2000/svg', qualifiedName);
-    element.classList.add(className);
-    return element;
-}
-class GanttBarDrag {
-    constructor(dragDrop, dom, dragContainer) {
-        this.dragDrop = dragDrop;
-        this.dom = dom;
-        this.dragContainer = dragContainer;
-        this.dragRefs = [];
-        this.destroy$ = new Subject();
+class GanttPrintService {
+    constructor() { }
+    setInlineStyles(targetElem) {
+        const svgElements = Array.from(targetElem.getElementsByTagName('svg'));
+        for (const svgElement of svgElements) {
+            this.recursElementChildren(svgElement);
+        }
     }
-    get dragDisabled() {
-        return !this.item.draggable || !this.ganttUpper.draggable;
+    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);
+        }
     }
-    get linkDragDisabled() {
-        return !this.item.linkable || !this.ganttUpper.linkable;
+    register(root) {
+        this.root = root.nativeElement;
+        this.mainContainer = this.root.getElementsByClassName('gantt-main-container')[0];
     }
-    createMouseEvents() {
-        fromEvent(this.barElement, 'mouseenter')
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-            if (this.dragContainer.linkDraggingId && this.dragContainer.linkDraggingId !== this.item.id) {
-                if (this.item.linkable) {
-                    this.barElement.classList.add(linkDropClass);
-                    this.dragContainer.emitLinkDragEntered(this.item);
+    print(name = 'download', ignoreElementClass) {
+        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;
+        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);
             }
-            else {
-                this.barElement.classList.add(activeClass);
-            }
+        }).then((canvas) => {
+            const link = document.createElement('a');
+            const dataUrl = canvas.toDataURL('image/png');
+            link.download = `${name}.png`;
+            link.href = dataUrl;
+            link.click();
         });
-        fromEvent(this.barElement, 'mouseleave')
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-            if (!this.dragContainer.linkDraggingId) {
-                this.barElement.classList.remove(activeClass);
+    }
+}
+GanttPrintService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttPrintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+GanttPrintService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttPrintService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttPrintService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+const mainHeight = 5000;
+class GanttCalendarComponent {
+    constructor(ganttUpper, ngZone, elementRef) {
+        this.ganttUpper = ganttUpper;
+        this.ngZone = ngZone;
+        this.elementRef = elementRef;
+        this.unsubscribe$ = new Subject();
+        this.headerHeight = headerHeight;
+        this.mainHeight = mainHeight;
+        this.todayHeight = todayHeight;
+        this.todayWidth = todayWidth;
+        this.todayBorderRadius = todayBorderRadius;
+        this.viewTypes = GanttViewType;
+        this.className = true;
+    }
+    get view() {
+        return this.ganttUpper.view;
+    }
+    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();
             }
-            else {
-                this.dragContainer.emitLinkDragLeaved();
+            if (line) {
+                line.style.left = `${x}px`;
+                line.style.top = `${headerHeight}px`;
+                line.style.bottom = `${-mainHeight}px`;
             }
-            this.barElement.classList.remove(linkDropClass);
-        });
+        }
+        else {
+            todayEle.style.display = 'none';
+        }
     }
-    createBarDrag() {
-        const dragRef = this.dragDrop.createDrag(this.barElement);
-        dragRef.lockAxis = 'x';
-        dragRef.started.subscribe(() => {
-            this.setDraggingStyles();
-            this.dragContainer.dragStarted.emit({ item: this.item.origin });
-        });
-        dragRef.moved.subscribe((event) => {
-            const x = this.item.refs.x + event.distance.x;
-            const days = differenceInCalendarDays(this.item.end.value, this.item.start.value);
-            const start = this.ganttUpper.view.getDateByXPoint(x);
-            const end = start.addDays(days);
-            this.openDragBackdrop(this.barElement, this.ganttUpper.view.getDateByXPoint(x), end);
-        });
-        dragRef.ended.subscribe((event) => {
-            const days = differenceInCalendarDays(this.item.end.value, this.item.start.value);
-            const start = this.ganttUpper.view.getDateByXPoint(this.item.refs.x + event.distance.x);
-            const end = start.addDays(days);
-            this.item.updateDate(start, end);
-            this.clearDraggingStyles();
-            this.closeDragBackdrop();
-            event.source.reset();
-            this.dragContainer.dragEnded.emit({ item: this.item.origin });
+    ngOnInit() {
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            merge(this.ganttUpper.viewChange, this.ganttUpper.view.start$)
+                .pipe(takeUntil(this.unsubscribe$))
+                .subscribe(() => {
+                this.setTodayPoint();
+            });
         });
-        this.barDragRef = dragRef;
-        return dragRef;
     }
-    createBarHandleDrags() {
-        const dragRefs = [];
-        const handles = this.barElement.querySelectorAll('.drag-handles .handle');
-        handles.forEach((handle, index) => {
-            const isBefore = index === 0;
-            const dragRef = this.dragDrop.createDrag(handle);
-            dragRef.lockAxis = 'x';
-            dragRef.withBoundaryElement(this.dom.root);
-            dragRef.started.subscribe(() => {
-                this.setDraggingStyles();
-                this.dragContainer.dragStarted.emit({ item: this.item.origin });
-            });
-            dragRef.moved.subscribe((event) => {
-                if (isBefore) {
-                    const x = this.item.refs.x + event.distance.x;
-                    const width = this.item.refs.width + event.distance.x * -1;
-                    if (width > dragMinWidth) {
-                        this.barElement.style.width = width + 'px';
-                        this.barElement.style.left = x + 'px';
-                        this.openDragBackdrop(this.barElement, this.ganttUpper.view.getDateByXPoint(x), this.ganttUpper.view.getDateByXPoint(x + width));
-                    }
-                }
-                else {
-                    const width = this.item.refs.width + event.distance.x;
-                    if (width > dragMinWidth) {
-                        this.barElement.style.width = width + 'px';
-                        this.openDragBackdrop(this.barElement, this.ganttUpper.view.getDateByXPoint(this.item.refs.x), this.ganttUpper.view.getDateByXPoint(this.item.refs.x + width));
-                    }
-                }
-                event.source.reset();
-            });
-            dragRef.ended.subscribe((event) => {
-                if (isBefore) {
-                    const width = this.item.refs.width + event.distance.x * -1;
-                    if (width > dragMinWidth) {
-                        this.item.updateDate(this.ganttUpper.view.getDateByXPoint(this.item.refs.x + event.distance.x), this.item.end);
-                    }
-                    else {
-                        this.item.updateDate(this.item.end.startOfDay(), this.item.end);
-                    }
-                }
-                else {
-                    const width = this.item.refs.width + event.distance.x;
-                    if (width > dragMinWidth) {
-                        this.item.updateDate(this.item.start, this.ganttUpper.view.getDateByXPoint(this.item.refs.x + this.item.refs.width + event.distance.x));
-                    }
-                    else {
-                        this.item.updateDate(this.item.start, this.item.start.endOfDay());
-                    }
-                }
-                this.clearDraggingStyles();
-                this.closeDragBackdrop();
-                this.dragContainer.dragEnded.emit({ item: this.item.origin });
-            });
-            dragRefs.push(dragRef);
-        });
-        return dragRefs;
-    }
-    createLinkHandleDrags() {
-        const dragRefs = [];
-        const handles = this.barElement.querySelectorAll('.link-handles .handle');
-        handles.forEach((handle, index) => {
-            const isBefore = index === 0;
-            const dragRef = this.dragDrop.createDrag(handle);
-            dragRef.withBoundaryElement(this.dom.root);
-            dragRef.beforeStarted.subscribe(() => {
-                handle.style.pointerEvents = 'none';
-                if (this.barDragRef) {
-                    this.barDragRef.disabled = true;
-                }
-                this.createLinkDraggingLine();
-                this.dragContainer.emitLinkDragStarted(isBefore ? 'target' : 'source', this.item);
-            });
-            dragRef.moved.subscribe(() => {
-                const positions = this.calcLinkLinePositions(handle, isBefore);
-                this.linkDraggingLine.setAttribute('x1', positions.x1.toString());
-                this.linkDraggingLine.setAttribute('y1', positions.y1.toString());
-                this.linkDraggingLine.setAttribute('x2', positions.x2.toString());
-                this.linkDraggingLine.setAttribute('y2', positions.y2.toString());
-            });
-            dragRef.ended.subscribe((event) => {
-                event.source.reset();
-                handle.style.pointerEvents = '';
-                if (this.barDragRef) {
-                    this.barDragRef.disabled = false;
-                }
-                this.barElement.classList.remove(activeClass);
-                this.destroyLinkDraggingLine();
-                this.dragContainer.emitLinkDragEnded();
-            });
-            dragRefs.push(dragRef);
-        });
-        return dragRefs;
+    ngAfterViewInit() { }
+    ngOnChanges(changes) { }
+    trackBy(point, index) {
+        return point.text || index;
     }
-    openDragBackdrop(dragElement, start, end) {
-        const dragMaskElement = this.dom.root.querySelector('.gantt-drag-mask');
-        const dragBackdropElement = this.dom.root.querySelector('.gantt-drag-backdrop');
-        const rootRect = this.dom.root.getBoundingClientRect();
-        const dragRect = dragElement.getBoundingClientRect();
-        const left = dragRect.left - rootRect.left - this.dom.side.clientWidth;
-        const width = dragRect.right - dragRect.left;
-        dragMaskElement.style.left = left + 'px';
-        dragMaskElement.style.width = width + 'px';
-        dragMaskElement.querySelector('.start').innerHTML = start.format('MM-dd');
-        dragMaskElement.querySelector('.end').innerHTML = end.format('MM-dd');
-        dragMaskElement.style.display = 'block';
-        dragBackdropElement.style.display = 'block';
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
     }
-    closeDragBackdrop() {
-        const dragMaskElement = this.dom.root.querySelector('.gantt-drag-mask');
-        const dragBackdropElement = this.dom.root.querySelector('.gantt-drag-backdrop');
-        dragMaskElement.style.display = 'none';
-        dragBackdropElement.style.display = 'none';
+}
+GanttCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", 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: "12.1.2", type: GanttCalendarComponent, selector: "gantt-calendar-overlay", host: { properties: { "class.gantt-calendar-overlay": "this.className" } }, usesOnChanges: true, 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: "12.1.2", ngImport: i0, type: GanttCalendarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'gantt-calendar-overlay',
+                    templateUrl: './calendar.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: GanttUpper, decorators: [{
+                    type: Inject,
+                    args: [GANTT_UPPER_TOKEN]
+                }] }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class.gantt-calendar-overlay']
+            }] } });
+
+class GanttDragBackdropComponent {
+    constructor() {
+        this.backdropClass = true;
     }
-    setDraggingStyles() {
-        this.barElement.style.pointerEvents = 'none';
-        this.barElement.classList.add('gantt-bar-draggable-drag');
+    ngOnInit() { }
+}
+GanttDragBackdropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttDragBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GanttDragBackdropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop", host: { properties: { "class.gantt-drag-backdrop": "this.backdropClass" } }, ngImport: i0, 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: "12.1.2", ngImport: i0, type: GanttDragBackdropComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'gantt-drag-backdrop',
+                    templateUrl: `./drag-backdrop.component.html`
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { backdropClass: [{
+                type: HostBinding,
+                args: ['class.gantt-drag-backdrop']
+            }] } });
+
+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.printService = printService;
+        this.ganttClass = true;
+        this.unsubscribe$ = new Subject();
+        this.ganttUpper.dragContainer = dragContainer;
     }
-    clearDraggingStyles() {
-        this.barElement.style.pointerEvents = '';
-        this.barElement.classList.remove('gantt-bar-draggable-drag');
+    get view() {
+        return this.ganttUpper.view;
     }
-    calcLinkLinePositions(target, isBefore) {
-        const rootRect = this.dom.root.getBoundingClientRect();
-        const targetRect = target.getBoundingClientRect();
-        const layerRect = target.parentElement.parentElement.getBoundingClientRect();
-        return {
-            x1: layerRect.left + (isBefore ? 0 : layerRect.width) - rootRect.left,
-            y1: layerRect.top + layerRect.height / 2 - rootRect.top,
-            x2: targetRect.left - rootRect.left + targetRect.width / 2,
-            y2: targetRect.top - rootRect.top + targetRect.height / 2
-        };
+    ngOnInit() {
+        this.ngZone.onStable.pipe(take(1)).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)).subscribe(() => {
+                this.scrollToToday();
+            });
+        });
     }
-    createLinkDraggingLine() {
-        if (!this.linkDraggingLine) {
-            const svgElement = createSvgElement('svg', 'gantt-link-drag-container');
-            const linElement = createSvgElement('line', 'link-dragging-line');
-            svgElement.appendChild(linElement);
-            this.dom.root.appendChild(svgElement);
-            this.linkDraggingLine = linElement;
+    setupViewScroll() {
+        if (this.ganttUpper.disabledLoadOnScroll) {
+            return;
         }
+        this.dom
+            .getViewerScroll()
+            .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);
+                    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.ngZone.run(() => {
+                        this.ganttUpper.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() });
+                    });
+                }
+            }
+        });
     }
-    destroyLinkDraggingLine() {
-        if (this.linkDraggingLine) {
-            this.linkDraggingLine.parentElement.remove();
-            this.linkDraggingLine = null;
-        }
+    setupResize() {
+        this.dom
+            .getResize()
+            .pipe(takeUntil(this.unsubscribe$))
+            .subscribe(() => {
+            this.setupScrollClass();
+        });
     }
-    createDrags(elementRef, item, ganttUpper) {
-        this.item = item;
-        this.barElement = elementRef.nativeElement;
-        this.ganttUpper = ganttUpper;
-        if (!item.draggable || (this.dragDisabled && this.linkDragDisabled)) {
-            return;
+    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.createMouseEvents();
-            if (!this.dragDisabled) {
-                const dragRef = this.createBarDrag();
-                const dragHandlesRefs = this.createBarHandleDrags();
-                this.dragRefs.push(dragRef, ...dragHandlesRefs);
-            }
-            if (!this.linkDragDisabled) {
-                const linkDragRefs = this.createLinkHandleDrags();
-                this.dragRefs.push(...linkDragRefs);
-            }
+            this.elementRef.nativeElement.className = 'gantt';
         }
     }
-    ngOnDestroy() {
-        this.closeDragBackdrop();
-        this.dragRefs.forEach((dragRef) => dragRef.dispose());
-        this.destroy$.next();
-        this.destroy$.complete();
+    scrollToToday() {
+        const x = this.view.getTodayXPoint();
+        this.dom.scrollMainContainer(x);
     }
 }
-GanttBarDrag.decorators = [
-    { type: Injectable }
-];
-GanttBarDrag.ctorParameters = () => [
-    { type: DragDrop },
-    { type: GanttDomService },
-    { type: GanttDragContainer }
-];
+NgxGanttRootComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", 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: "12.1.2", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: { sideWidth: "sideWidth" }, host: { properties: { "class.gantt": "this.ganttClass" } }, providers: [GanttDomService, GanttDragContainer], queries: [{ propertyName: "sideTemplate", first: true, predicate: ["sideTemplate"], descendants: true, static: true }, { propertyName: "mainTemplate", first: true, predicate: ["mainTemplate"], descendants: true, static: true }], ngImport: i0, 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: "12.1.2", ngImport: i0, type: NgxGanttRootComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-gantt-root',
+                    templateUrl: './root.component.html',
+                    providers: [GanttDomService, GanttDragContainer]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: GanttDomService }, { type: GanttDragContainer }, { type: GanttUpper, decorators: [{
+                    type: Inject,
+                    args: [GANTT_UPPER_TOKEN]
+                }] }, { type: GanttPrintService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { sideWidth: [{
+                type: Input
+            }], ganttClass: [{
+                type: HostBinding,
+                args: ['class.gantt']
+            }], sideTemplate: [{
+                type: ContentChild,
+                args: ['sideTemplate', { static: true }]
+            }], mainTemplate: [{
+                type: ContentChild,
+                args: ['mainTemplate', { static: true }]
+            }] } });
 
-class GanttItemUpper {
-    constructor(elementRef, ganttUpper) {
-        this.elementRef = elementRef;
+var LinkColors;
+(function (LinkColors) {
+    LinkColors["default"] = "#cacaca";
+    LinkColors["blocked"] = "#FF7575";
+    LinkColors["active"] = "#348FE4";
+})(LinkColors || (LinkColors = {}));
+class GanttLinksComponent {
+    constructor(ganttUpper, cdr, elementRef, ganttDragContainer) {
         this.ganttUpper = ganttUpper;
+        this.cdr = cdr;
+        this.elementRef = elementRef;
+        this.ganttDragContainer = ganttDragContainer;
+        this.groups = [];
+        this.items = [];
+        this.lineClick = new EventEmitter();
+        this.links = [];
+        this.linkItems = [];
+        this.bezierWeight = -0.5;
         this.firstChange = true;
         this.unsubscribe$ = new Subject();
+        this.ganttLinksOverlay = true;
     }
-    onInit() {
+    ngOnInit() {
+        this.buildLinks();
         this.firstChange = false;
-        this.item.refs$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
-            this.setPositions();
+        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(takeUntil(this.unsubscribe$), skip(1))
+            .subscribe(() => {
+            this.elementRef.nativeElement.style.visibility = 'visible';
+            this.buildLinks();
+            this.cdr.detectChanges();
         });
     }
-    onChanges() {
+    ngOnChanges() {
         if (!this.firstChange) {
-            this.setPositions();
+            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 {
+            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
+                    } }));
+            });
+        }
+    }
+    generatePath(source, target) {
+        if (source.before && source.after && target.before && target.after) {
+            const x1 = source.after.x;
+            const y1 = source.after.y;
+            const x4 = target.before.x;
+            const y4 = target.before.y;
+            const dx = Math.abs(x4 - x1) * this.bezierWeight;
+            const x2 = x1 - dx;
+            const 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 (y4 > y1) {
+                    if (Math.abs(y4 - y1) <= this.ganttUpper.styles.lineHeight) {
+                        return `M ${x1} ${y1}
+                        C ${x1 + controlX} ${y1} ${x1 + controlX} ${y1 + controlX} ${x1} ${y1 + controlY}
+                        L ${x1} ${y1 + controlY} ${centerX} ${centerY}
+
+                        M ${x4} ${y4}
+                        C ${x4 - controlX} ${y4} ${x4 - controlX} ${y4 - controlX} ${x4} ${y4 - controlY}
+                        L ${x4} ${y4 - controlY} ${centerX} ${centerY}`;
+                    }
+                    else {
+                        controlX = this.ganttUpper.styles.lineHeight;
+                        return `M ${x1} ${y1}
+                        C ${x1 + controlX} ${y1} ${x1 + controlX} ${y1 + controlX} ${centerX} ${centerY}
+
+
+                        M ${x4} ${y4}
+                        C ${x4 - controlX} ${y4} ${x4 - controlX} ${y4 - controlX} ${centerX} ${centerY}`;
+                    }
+                }
+                else {
+                    if (Math.abs(y4 - y1) <= this.ganttUpper.styles.lineHeight) {
+                        return `M ${x1} ${y1}
+                        C ${x1 + controlX} ${y1} ${x1 + controlX} ${y1 - controlX} ${x1} ${y1 - controlY}
+                        L ${x1} ${y1 - controlY} ${centerX} ${centerY}
+
+                        M ${x4} ${y4}
+                        C ${x4 - controlX} ${y4} ${x4 - controlX} ${y4 + controlX} ${x4} ${y4 + controlY}
+                        L ${x4} ${y4 + controlY} ${centerX} ${centerY}
+                        `;
+                    }
+                    else {
+                        controlX = this.ganttUpper.styles.lineHeight;
+                        return `M ${x1} ${y1}
+                        C ${x1 + controlX} ${y1} ${x1 + controlX} ${y1 - controlX} ${centerX} ${centerY}
+
+                        M ${x4} ${y4}
+                        C ${x4 - controlX} ${y4} ${x4 - controlX} ${y4 + controlX} ${centerX} ${centerY}`;
+                    }
+                }
+            }
+            return `M ${x1} ${y1} C ${x2} ${y1} ${x3} ${y4} ${x4} ${y4}`;
+        }
+    }
+    buildLinks() {
+        this.computeItemPosition();
+        this.links = [];
+        this.linkItems.forEach((source) => {
+            if (source.origin.start || source.origin.end) {
+                source.links.forEach((linkId) => {
+                    const target = this.linkItems.find((item) => item.id === linkId);
+                    if (target && (target.origin.start || target.origin.end)) {
+                        this.links.push({
+                            path: this.generatePath(source, target),
+                            source: source.origin,
+                            target: target.origin,
+                            color: source.end.getTime() > target.start.getTime() ? LinkColors.blocked : LinkColors.default
+                        });
+                    }
+                });
+            }
+        });
+    }
+    trackBy(index) {
+        return index;
+    }
+    onLineClick(event, link) {
+        this.lineClick.emit({
+            event,
+            source: link.source,
+            target: link.target
+        });
+    }
+    mouseEnterPath(link) {
+        if (link.color === LinkColors.default) {
+            link.color = LinkColors.active;
+        }
+    }
+    mouseLeavePath(link) {
+        if (link.color === LinkColors.active) {
+            link.color = LinkColors.default;
+        }
+    }
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+    }
+}
+GanttLinksComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", 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: "12.1.2", type: GanttLinksComponent, selector: "gantt-links-overlay", inputs: { groups: "groups", items: "items" }, outputs: { lineClick: "lineClick" }, host: { properties: { "class.gantt-links-overlay": "this.ganttLinksOverlay" } }, usesOnChanges: true, ngImport: i0, template: "<svg [attr.width]=\"ganttUpper.view.width\" class=\"gantt-links-overlay-main\">\n  <ng-container *ngFor=\"let link of links; let i = index; trackBy: trackBy\">\n    <path [attr.d]=\"link.path\" fill=\"transparent\" stroke-width=\"2\" [attr.stroke]=\"link.color\" pointer-events=\"none\"></path>\n    <g>\n      <path\n        class=\"link-line\"\n        (click)=\"onLineClick($event, link)\"\n        (mouseenter)=\"mouseEnterPath(link)\"\n        (mouseleave)=\"mouseLeavePath(link)\"\n        [attr.d]=\"link.path\"\n        stroke=\"transparent\"\n        stroke-width=\"9\"\n        fill=\"none\"\n        cursor=\"pointer\"\n      ></path>\n    </g>\n  </ng-container>\n  <line class=\"link-dragging-line\"></line>\n</svg>\n", directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttLinksComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'gantt-links-overlay',
+                    templateUrl: './links.component.html'
+                }]
+        }], 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: HostBinding,
+                args: ['class.gantt-links-overlay']
+            }] } });
+
+class GanttItemUpper {
+    constructor(elementRef, ganttUpper) {
+        this.elementRef = elementRef;
+        this.ganttUpper = ganttUpper;
+        this.firstChange = true;
+        this.unsubscribe$ = new Subject();
+    }
+    onInit() {
+        this.firstChange = false;
+        this.item.refs$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+            this.setPositions();
+        });
+    }
+    onChanges() {
+        if (!this.firstChange) {
+            this.setPositions();
         }
     }
     setPositions() {
@@ -1740,753 +2021,609 @@ class GanttItemUpper {
         this.unsubscribe$.complete();
     }
 }
-GanttItemUpper.decorators = [
-    { type: Directive }
-];
-GanttItemUpper.ctorParameters = () => [
-    { type: ElementRef },
-    { type: GanttUpper, decorators: [{ type: Inject, args: [GANTT_UPPER_TOKEN,] }] }
-];
-GanttItemUpper.propDecorators = {
-    template: [{ type: Input }],
-    item: [{ type: Input }]
-};
+GanttItemUpper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", 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: "12.1.2", type: GanttItemUpper, inputs: { template: "template", item: "item" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", 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%)`;
-}
-class NgxGanttBarComponent extends GanttItemUpper {
-    constructor(dragContainer, drag, elementRef, ganttUpper) {
+class NgxGanttRangeComponent extends GanttItemUpper {
+    constructor(elementRef, ganttUpper) {
         super(elementRef, ganttUpper);
-        this.dragContainer = dragContainer;
-        this.drag = drag;
-        this.ganttUpper = ganttUpper;
-        this.barClick = new EventEmitter();
-        this.ganttItemClass = true;
-        this.color = 'red';
+        this.ganttRangeClass = true;
     }
     ngOnInit() {
         super.onInit();
-        this.dragContainer.dragEnded.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
-            this.setContentBackground();
-        });
-    }
-    ngAfterViewInit() {
-        this.drag.createDrags(this.elementRef, this.item, this.ganttUpper);
-        this.setContentBackground();
     }
     ngOnChanges() {
         super.onChanges();
     }
-    onBarClick(event) {
-        this.barClick.emit({ event, item: this.item.origin });
-    }
-    setContentBackground() {
-        const contentElement = this.contentElementRef.nativeElement;
-        const color = this.item.color || barBackground;
-        const style = this.item.barStyle || {};
-        if (this.item.origin.start && this.item.origin.end) {
-            style.background = color;
-            style.borderRadius = '';
-        }
-        if (this.item.origin.start && !this.item.origin.end) {
-            style.background = linearGradient('to left', hexToRgb(color, 0.55), hexToRgb(color, 1));
-            style.borderRadius = '4px 12.5px 12.5px 4px';
-        }
-        if (!this.item.origin.start && this.item.origin.end) {
-            style.background = linearGradient('to right', hexToRgb(color, 0.55), hexToRgb(color, 1));
-            style.borderRadius = '12.5px 4px 4px 12.5px';
-        }
-        if (this.item.progress >= 0) {
-            const contentProgressElement = contentElement.querySelector('.gantt-bar-content-progress');
-            style.background = hexToRgb(color, 0.3);
-            style.borderRadius = '';
-            contentProgressElement.style.background = color;
-        }
-        for (const key in style) {
-            if (style.hasOwnProperty(key)) {
-                contentElement.style[key] = style[key];
-            }
-        }
-    }
-    stopPropagation(event) {
-        event.stopPropagation();
-    }
     ngOnDestroy() {
         super.onDestroy();
     }
 }
-NgxGanttBarComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ngx-gantt-bar,gantt-bar',
-                template: "<div class=\"gantt-bar-layer\">\n  <div *ngIf=\"item.draggable && ganttUpper.draggable\" class=\"drag-handles\">\n    <ng-container>\n      <span class=\"handle\" (mousedown)=\"stopPropagation($event)\"></span>\n      <span class=\"handle\" (mousedown)=\"stopPropagation($event)\"></span>\n    </ng-container>\n  </div>\n  <div *ngIf=\"item.linkable && ganttUpper.linkable\" class=\"link-handles\">\n    <span class=\"handle\"><span class=\"point\"></span></span>\n    <span class=\"handle\"> <span class=\"point\"></span></span>\n  </div>\n</div>\n<div class=\"gantt-bar-border\"></div>\n<div #content class=\"gantt-bar-content\" (click)=\"onBarClick($event)\">\n  <div class=\"gantt-bar-content-progress\" *ngIf=\"item.progress >= 0\" [style.width.%]=\"item.progress * 100\"></div>\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"></ng-template>\n</div>\n",
-                providers: [GanttBarDrag]
-            },] }
-];
-NgxGanttBarComponent.ctorParameters = () => [
-    { type: GanttDragContainer },
-    { type: GanttBarDrag },
-    { type: ElementRef },
-    { type: GanttUpper, decorators: [{ type: Inject, args: [GANTT_UPPER_TOKEN,] }] }
-];
-NgxGanttBarComponent.propDecorators = {
-    barClick: [{ type: Output }],
-    contentElementRef: [{ type: ViewChild, args: ['content',] }],
-    ganttItemClass: [{ type: HostBinding, args: ['class.gantt-bar',] }]
-};
+NgxGanttRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", 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: "12.1.2", type: NgxGanttRangeComponent, selector: "ngx-gantt-range,gantt-range", host: { properties: { "class.gantt-range": "this.ganttRangeClass" } }, usesInheritance: true, usesOnChanges: 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: "12.1.2", ngImport: i0, type: NgxGanttRangeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-gantt-range,gantt-range',
+                    templateUrl: './range.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: GanttUpper, decorators: [{
+                    type: Inject,
+                    args: [GANTT_UPPER_TOKEN]
+                }] }]; }, propDecorators: { ganttRangeClass: [{
+                type: HostBinding,
+                args: ['class.gantt-range']
+            }] } });
 
-class GanttMainComponent {
-    constructor(ganttUpper) {
-        this.ganttUpper = ganttUpper;
-        this.barClick = new EventEmitter();
-        this.lineClick = new EventEmitter();
-        this.ganttMainClass = true;
+const dragMinWidth = 10;
+const activeClass = 'gantt-bar-active';
+const linkDropClass = 'gantt-bar-link-drop';
+function createSvgElement(qualifiedName, className) {
+    const element = document.createElementNS('http://www.w3.org/2000/svg', qualifiedName);
+    element.classList.add(className);
+    return element;
+}
+class GanttBarDrag {
+    constructor(dragDrop, dom, dragContainer) {
+        this.dragDrop = dragDrop;
+        this.dom = dom;
+        this.dragContainer = dragContainer;
+        this.dragRefs = [];
+        this.destroy$ = new Subject();
     }
-    ngOnInit() { }
-    trackBy(item, index) {
-        return item.id || index;
+    get dragDisabled() {
+        return !this.item.draggable || !this.ganttUpper.draggable;
     }
-}
-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; trackBy: trackBy\">\n    <div class=\"gantt-item\" [style.height.px]=\"ganttUpper.styles.lineHeight\">\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"
-            },] }
-];
-GanttMainComponent.ctorParameters = () => [
-    { type: GanttUpper, decorators: [{ type: Inject, args: [GANTT_UPPER_TOKEN,] }] }
-];
-GanttMainComponent.propDecorators = {
-    groups: [{ type: Input }],
-    items: [{ type: Input }],
-    groupHeaderTemplate: [{ type: Input }],
-    itemTemplate: [{ type: Input }],
-    barTemplate: [{ type: Input }],
-    rangeTemplate: [{ type: Input }],
-    barClick: [{ type: Output }],
-    lineClick: [{ type: Output }],
-    ganttMainClass: [{ type: HostBinding, args: ['class.gantt-main-container',] }]
-};
-
-const angleRight = `<svg xmlns="http://www.w3.org/2000/svg" fit=""  preserveAspectRatio="xMidYMid meet" focusable="false"><g id="amnavigation/angle-right" stroke-width="1" fill-rule="evenodd"><path d="M7.978 11.498l-.005.005L2.3 5.831 3.13 5l4.848 4.848L12.826 5l.83.831-5.673 5.672-.005-.005z"   transform="rotate(-90 7.978 8.252)"></path></g></svg>`;
-const angleDown = `<svg xmlns="http://www.w3.org/2000/svg" fit=""  preserveAspectRatio="xMidYMid meet" focusable="false"><g id="aknavigation/angle-down" stroke-width="1" fill-rule="evenodd"><path d="M7.978 11.997l-.005.006L2.3 6.33l.83-.831 4.848 4.848L12.826 5.5l.83.83-5.673 5.673-.005-.006z" ></path></g></svg>`;
-const plusSquare = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fit=""   preserveAspectRatio="xMidYMid meet" focusable="false"><g id="kxaction/plus-square" stroke-width="1" fill-rule="evenodd"><path d="M2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1.2a.8.8 0 0 0-.8.8v12a.8.8 0 0 0 .8.8h12a.8.8 0 0 0 .8-.8V2a.8.8 0 0 0-.8-.8H2zm5.45 6.2V4.75h1.2V7.4h2.65v1.2H8.65v2.65h-1.2V8.6H4.8V7.4h2.65z"></path></g></svg>`;
-const minusSquare = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fit="" preserveAspectRatio="xMidYMid meet" focusable="false"><g id="jnaction/minus-square" stroke-width="1" fill-rule="evenodd"><path d="M2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1.2a.8.8 0 0 0-.8.8v12a.8.8 0 0 0 .8.8h12a.8.8 0 0 0 .8-.8V2a.8.8 0 0 0-.8-.8H2zm2.8 6.2h6.5v1.2H4.8V7.4z"></path></g></svg>`;
-const loadingIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve">
-<path fill="#aaa" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)">
-    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>
-</path>
-</svg>`;
-const emptyIcon = `<svg
-width="148px"
-height="134px"
-viewBox="0 0 148 134"
-version="1.1"
-xmlns="http://www.w3.org/2000/svg"
-xmlns:xlink="http://www.w3.org/1999/xlink"
->
-<defs>
-  <filter x="0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-1">
-    <feGaussianBlur stdDeviation="0" in="SourceGraphic"></feGaussianBlur>
-  </filter>
-</defs>
-<g id="148x134" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-  <g id="编组-6" transform="translate(1.000000, 1.000000)">
-    <ellipse
-      id="椭圆形"
-      fill="#EDEEF2"
-      opacity="0.3"
-      filter="url(#filter-1)"
-      cx="73.0800017"
-      cy="115.920003"
-      rx="73.0800017"
-      ry="16.8000004"
-    ></ellipse>
-    <g id="编组-5" transform="translate(15.120000, 0.000000)">
-      <polygon
-        id="矩形"
-        fill="#E2E4E9"
-        points="19.2789848 49.5600011 99.1200023 48.7200011 117.600003 75.9297673 117.600003 92.313049 0 92.313049 0 75.0356267"
-      ></polygon>
-      <path
-        d="M23.5200005,0 L94.0800002,0 C97.7913538,2.06413823e-16 100.8,3.00864655 100.8,6.72000015 L100.8,99.1200023 L100.8,99.1200023 L16.8000004,99.1200023 L16.8000004,6.72000015 C16.8000004,3.00864655 19.8086469,1.56994302e-15 23.5200005,0 Z"
-        id="矩形"
-        fill="#F9FAFB"
-      ></path>
-      <path
-        d="M30.9200007,12.4400003 L86.6800019,12.4400003 C88.5356787,12.4400003 90.040002,13.9443236 90.040002,15.8000004 L90.040002,42.000001 C90.040002,43.8556778 88.5356787,45.360001 86.6800019,45.360001 L30.9200007,45.360001 C29.0643239,45.360001 27.5600006,43.8556778 27.5600006,42.000001 L27.5600006,15.8000004 C27.5600006,13.9443236 29.0643239,12.4400003 30.9200007,12.4400003 Z"
-        id="矩形"
-        fill="#E8EAEE"
-      ></path>
-      <text
-        id="&lt;/null&gt;"
-        font-family="PingFangSC-Medium, PingFang SC"
-        font-size="15.1200003"
-        font-weight="400"
-        fill="#BCBECD"
-      >
-        <tspan x="33.6000008" y="32.8000004">&lt;/null&gt;</tspan>
-      </text>
-      <rect id="矩形" fill="#E8EAEE" x="27.5600006" y="52.0800012" width="61.4800014" height="5.04000011" rx="2.52000006"></rect>
-      <rect
-        id="矩形备份"
-        fill="#E8EAEE"
-        x="27.5600006"
-        y="63.8400014"
-        width="61.4800014"
-        height="5.04000011"
-        rx="2.52000006"
-      ></rect>
-      <path
-        d="M0,75.6000017 L29.280235,75.6000017 C32.0637502,75.6000017 34.3202352,77.8564866 34.3202352,80.6400018 L34.3202352,86.2591426 C34.3202352,89.0426578 36.5767201,91.2991427 39.3602353,91.2991427 L78.4136737,91.2991427 C81.1971889,91.2991427 83.4536738,89.0426578 83.4536738,86.2591426 L83.4536738,80.6400018 C83.4536738,77.8564866 85.7101587,75.6000017 88.4936739,75.6000017 L117.600003,75.6000017 L117.600003,75.6000017 L117.600003,110.880003 C117.600003,115.519195 113.839194,119.280003 109.200002,119.280003 L8.40000019,119.280003 C3.76080819,119.280003 -6.53729019e-15,115.519195 0,110.880003 L0,75.6000017 L0,75.6000017 Z"
-        id="矩形"
-        fill="#EDEFF2"
-      ></path>
-    </g>
-  </g>
-</g>
-</svg>`;
-const icons = {
-    'angle-right': angleRight,
-    'angle-down': angleDown,
-    'plus-square': plusSquare,
-    'minus-square': minusSquare,
-    loading: loadingIcon,
-    empty: emptyIcon
-};
-
-class GanttIconComponent {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.isIcon = true;
-    }
-    set iconName(name) {
-        this.setSvg(name);
-    }
-    ngOnInit() { }
-    ngAfterViewInit() { }
-    setSvg(name) {
-        const iconSvg = icons[name];
-        if (iconSvg) {
-            this.elementRef.nativeElement.innerHTML = iconSvg;
-        }
-        else {
-            this.elementRef.nativeElement.innerHTML = '';
-        }
-    }
-}
-GanttIconComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'gantt-icon',
-                template: ''
-            },] }
-];
-GanttIconComponent.ctorParameters = () => [
-    { type: ElementRef }
-];
-GanttIconComponent.propDecorators = {
-    isIcon: [{ type: HostBinding, args: ['class.gantt-icon',] }],
-    iconName: [{ type: Input }]
-};
-
-class GanttDragBackdropComponent {
-    constructor() {
-        this.backdropClass = true;
-    }
-    ngOnInit() { }
-}
-GanttDragBackdropComponent.decorators = [
-    { type: Component, args: [{
-                selector: '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"
-            },] }
-];
-GanttDragBackdropComponent.ctorParameters = () => [];
-GanttDragBackdropComponent.propDecorators = {
-    backdropClass: [{ type: HostBinding, args: ['class.gantt-drag-backdrop',] }]
-};
-
-var LinkColors;
-(function (LinkColors) {
-    LinkColors["default"] = "#cacaca";
-    LinkColors["blocked"] = "#FF7575";
-    LinkColors["active"] = "#348FE4";
-})(LinkColors || (LinkColors = {}));
-class GanttLinksComponent {
-    constructor(ganttUpper, cdr, elementRef, ganttDragContainer) {
-        this.ganttUpper = ganttUpper;
-        this.cdr = cdr;
-        this.elementRef = elementRef;
-        this.ganttDragContainer = ganttDragContainer;
-        this.groups = [];
-        this.items = [];
-        this.lineClick = new EventEmitter();
-        this.links = [];
-        this.linkItems = [];
-        this.bezierWeight = -0.5;
-        this.firstChange = true;
-        this.unsubscribe$ = new Subject();
-        this.ganttLinksOverlay = true;
+    get linkDragDisabled() {
+        return !this.item.linkable || !this.ganttUpper.linkable;
     }
-    ngOnInit() {
-        this.buildLinks();
-        this.firstChange = false;
-        this.ganttDragContainer.dragStarted.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
-            this.elementRef.nativeElement.style.visibility = 'hidden';
+    createMouseEvents() {
+        fromEvent(this.barElement, 'mouseenter')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            if (this.dragContainer.linkDraggingId && this.dragContainer.linkDraggingId !== this.item.id) {
+                if (this.item.linkable) {
+                    this.barElement.classList.add(linkDropClass);
+                    this.dragContainer.emitLinkDragEntered(this.item);
+                }
+            }
+            else {
+                this.barElement.classList.add(activeClass);
+            }
         });
-        merge(this.ganttUpper.viewChange, this.ganttUpper.expandChange, this.ganttUpper.view.start$, this.ganttUpper.dragEnded, this.ganttUpper.linkDragEnded)
-            .pipe(takeUntil(this.unsubscribe$), skip(1))
+        fromEvent(this.barElement, 'mouseleave')
+            .pipe(takeUntil(this.destroy$))
             .subscribe(() => {
-            this.elementRef.nativeElement.style.visibility = 'visible';
-            this.buildLinks();
-            this.cdr.detectChanges();
+            if (!this.dragContainer.linkDraggingId) {
+                this.barElement.classList.remove(activeClass);
+            }
+            else {
+                this.dragContainer.emitLinkDragLeaved();
+            }
+            this.barElement.classList.remove(linkDropClass);
         });
     }
-    ngOnChanges() {
-        if (!this.firstChange) {
-            this.buildLinks();
-        }
+    createBarDrag() {
+        const dragRef = this.dragDrop.createDrag(this.barElement);
+        dragRef.lockAxis = 'x';
+        dragRef.started.subscribe(() => {
+            this.setDraggingStyles();
+            this.dragContainer.dragStarted.emit({ item: this.item.origin });
+        });
+        dragRef.moved.subscribe((event) => {
+            const x = this.item.refs.x + event.distance.x;
+            const days = differenceInCalendarDays(this.item.end.value, this.item.start.value);
+            const start = this.ganttUpper.view.getDateByXPoint(x);
+            const end = start.addDays(days);
+            this.openDragBackdrop(this.barElement, this.ganttUpper.view.getDateByXPoint(x), end);
+        });
+        dragRef.ended.subscribe((event) => {
+            const days = differenceInCalendarDays(this.item.end.value, this.item.start.value);
+            const start = this.ganttUpper.view.getDateByXPoint(this.item.refs.x + event.distance.x);
+            const end = start.addDays(days);
+            this.item.updateDate(start, end);
+            this.clearDraggingStyles();
+            this.closeDragBackdrop();
+            event.source.reset();
+            this.dragContainer.dragEnded.emit({ item: this.item.origin });
+        });
+        this.barDragRef = dragRef;
+        return dragRef;
     }
-    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;
-                }
+    createBarHandleDrags() {
+        const dragRefs = [];
+        const handles = this.barElement.querySelectorAll('.drag-handles .handle');
+        handles.forEach((handle, index) => {
+            const isBefore = index === 0;
+            const dragRef = this.dragDrop.createDrag(handle);
+            dragRef.lockAxis = 'x';
+            dragRef.withBoundaryElement(this.dom.root);
+            dragRef.started.subscribe(() => {
+                this.setDraggingStyles();
+                this.dragContainer.dragStarted.emit({ item: this.item.origin });
             });
-        }
-        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
-                    } }));
+            dragRef.moved.subscribe((event) => {
+                if (isBefore) {
+                    const x = this.item.refs.x + event.distance.x;
+                    const width = this.item.refs.width + event.distance.x * -1;
+                    if (width > dragMinWidth) {
+                        this.barElement.style.width = width + 'px';
+                        this.barElement.style.left = x + 'px';
+                        this.openDragBackdrop(this.barElement, this.ganttUpper.view.getDateByXPoint(x), this.ganttUpper.view.getDateByXPoint(x + width));
+                    }
+                }
+                else {
+                    const width = this.item.refs.width + event.distance.x;
+                    if (width > dragMinWidth) {
+                        this.barElement.style.width = width + 'px';
+                        this.openDragBackdrop(this.barElement, this.ganttUpper.view.getDateByXPoint(this.item.refs.x), this.ganttUpper.view.getDateByXPoint(this.item.refs.x + width));
+                    }
+                }
+                event.source.reset();
             });
-        }
-    }
-    generatePath(source, target) {
-        if (source.before && source.after && target.before && target.after) {
-            const x1 = source.after.x;
-            const y1 = source.after.y;
-            const x4 = target.before.x;
-            const y4 = target.before.y;
-            const dx = Math.abs(x4 - x1) * this.bezierWeight;
-            const x2 = x1 - dx;
-            const 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 (y4 > y1) {
-                    if (Math.abs(y4 - y1) <= this.ganttUpper.styles.lineHeight) {
-                        return `M ${x1} ${y1}
-                        C ${x1 + controlX} ${y1} ${x1 + controlX} ${y1 + controlX} ${x1} ${y1 + controlY}
-                        L ${x1} ${y1 + controlY} ${centerX} ${centerY}
-
-                        M ${x4} ${y4}
-                        C ${x4 - controlX} ${y4} ${x4 - controlX} ${y4 - controlX} ${x4} ${y4 - controlY}
-                        L ${x4} ${y4 - controlY} ${centerX} ${centerY}`;
+            dragRef.ended.subscribe((event) => {
+                if (isBefore) {
+                    const width = this.item.refs.width + event.distance.x * -1;
+                    if (width > dragMinWidth) {
+                        this.item.updateDate(this.ganttUpper.view.getDateByXPoint(this.item.refs.x + event.distance.x), this.item.end);
                     }
                     else {
-                        controlX = this.ganttUpper.styles.lineHeight;
-                        return `M ${x1} ${y1}
-                        C ${x1 + controlX} ${y1} ${x1 + controlX} ${y1 + controlX} ${centerX} ${centerY}
-
-
-                        M ${x4} ${y4}
-                        C ${x4 - controlX} ${y4} ${x4 - controlX} ${y4 - controlX} ${centerX} ${centerY}`;
+                        this.item.updateDate(this.item.end.startOfDay(), this.item.end);
                     }
                 }
                 else {
-                    if (Math.abs(y4 - y1) <= this.ganttUpper.styles.lineHeight) {
-                        return `M ${x1} ${y1}
-                        C ${x1 + controlX} ${y1} ${x1 + controlX} ${y1 - controlX} ${x1} ${y1 - controlY}
-                        L ${x1} ${y1 - controlY} ${centerX} ${centerY}
-
-                        M ${x4} ${y4}
-                        C ${x4 - controlX} ${y4} ${x4 - controlX} ${y4 + controlX} ${x4} ${y4 + controlY}
-                        L ${x4} ${y4 + controlY} ${centerX} ${centerY}
-                        `;
+                    const width = this.item.refs.width + event.distance.x;
+                    if (width > dragMinWidth) {
+                        this.item.updateDate(this.item.start, this.ganttUpper.view.getDateByXPoint(this.item.refs.x + this.item.refs.width + event.distance.x));
                     }
                     else {
-                        controlX = this.ganttUpper.styles.lineHeight;
-                        return `M ${x1} ${y1}
-                        C ${x1 + controlX} ${y1} ${x1 + controlX} ${y1 - controlX} ${centerX} ${centerY}
-
-                        M ${x4} ${y4}
-                        C ${x4 - controlX} ${y4} ${x4 - controlX} ${y4 + controlX} ${centerX} ${centerY}`;
+                        this.item.updateDate(this.item.start, this.item.start.endOfDay());
                     }
                 }
-            }
-            return `M ${x1} ${y1} C ${x2} ${y1} ${x3} ${y4} ${x4} ${y4}`;
-        }
-    }
-    buildLinks() {
-        this.computeItemPosition();
-        this.links = [];
-        this.linkItems.forEach((source) => {
-            if (source.origin.start || source.origin.end) {
-                source.links.forEach((linkId) => {
-                    const target = this.linkItems.find((item) => item.id === linkId);
-                    if (target && (target.origin.start || target.origin.end)) {
-                        this.links.push({
-                            path: this.generatePath(source, target),
-                            source: source.origin,
-                            target: target.origin,
-                            color: source.end.getTime() > target.start.getTime() ? LinkColors.blocked : LinkColors.default
-                        });
-                    }
-                });
-            }
-        });
-    }
-    trackBy(index) {
-        return index;
-    }
-    onLineClick(event, link) {
-        this.lineClick.emit({
-            event,
-            source: link.source,
-            target: link.target
+                this.clearDraggingStyles();
+                this.closeDragBackdrop();
+                this.dragContainer.dragEnded.emit({ item: this.item.origin });
+            });
+            dragRefs.push(dragRef);
         });
+        return dragRefs;
     }
-    mouseEnterPath(link) {
-        if (link.color === LinkColors.default) {
-            link.color = LinkColors.active;
-        }
-    }
-    mouseLeavePath(link) {
-        if (link.color === LinkColors.active) {
-            link.color = LinkColors.default;
-        }
-    }
-    ngOnDestroy() {
-        this.unsubscribe$.next();
-        this.unsubscribe$.complete();
-    }
-}
-GanttLinksComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'gantt-links-overlay',
-                template: "<svg [attr.width]=\"ganttUpper.view.width\" class=\"gantt-links-overlay-main\">\n  <ng-container *ngFor=\"let link of links; let i = index; trackBy: trackBy\">\n    <path [attr.d]=\"link.path\" fill=\"transparent\" stroke-width=\"2\" [attr.stroke]=\"link.color\" pointer-events=\"none\"></path>\n    <g>\n      <path\n        class=\"link-line\"\n        (click)=\"onLineClick($event, link)\"\n        (mouseenter)=\"mouseEnterPath(link)\"\n        (mouseleave)=\"mouseLeavePath(link)\"\n        [attr.d]=\"link.path\"\n        stroke=\"transparent\"\n        stroke-width=\"9\"\n        fill=\"none\"\n        cursor=\"pointer\"\n      ></path>\n    </g>\n  </ng-container>\n  <line class=\"link-dragging-line\"></line>\n</svg>\n"
-            },] }
-];
-GanttLinksComponent.ctorParameters = () => [
-    { type: GanttUpper, decorators: [{ type: Inject, args: [GANTT_UPPER_TOKEN,] }] },
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: GanttDragContainer }
-];
-GanttLinksComponent.propDecorators = {
-    groups: [{ type: Input }],
-    items: [{ type: Input }],
-    lineClick: [{ type: Output }],
-    ganttLinksOverlay: [{ type: HostBinding, args: ['class.gantt-links-overlay',] }]
-};
-
-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) {
-        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;
-        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;
+    createLinkHandleDrags() {
+        const dragRefs = [];
+        const handles = this.barElement.querySelectorAll('.link-handles .handle');
+        handles.forEach((handle, index) => {
+            const isBefore = index === 0;
+            const dragRef = this.dragDrop.createDrag(handle);
+            dragRef.withBoundaryElement(this.dom.root);
+            dragRef.beforeStarted.subscribe(() => {
+                handle.style.pointerEvents = 'none';
+                if (this.barDragRef) {
+                    this.barDragRef.disabled = 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`);
+                this.createLinkDraggingLine();
+                this.dragContainer.emitLinkDragStarted(isBefore ? 'target' : 'source', this.item);
+            });
+            dragRef.moved.subscribe(() => {
+                const positions = this.calcLinkLinePositions(handle, isBefore);
+                this.linkDraggingLine.setAttribute('x1', positions.x1.toString());
+                this.linkDraggingLine.setAttribute('y1', positions.y1.toString());
+                this.linkDraggingLine.setAttribute('x2', positions.x2.toString());
+                this.linkDraggingLine.setAttribute('y2', positions.y2.toString());
+            });
+            dragRef.ended.subscribe((event) => {
+                event.source.reset();
+                handle.style.pointerEvents = '';
+                if (this.barDragRef) {
+                    this.barDragRef.disabled = false;
                 }
-                // 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.decorators = [
-    { type: Injectable }
-];
-GanttPrintService.ctorParameters = () => [];
-
-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.printService = printService;
-        this.ganttClass = true;
-        this.unsubscribe$ = new Subject();
-        this.ganttUpper.dragContainer = dragContainer;
-    }
-    get view() {
-        return this.ganttUpper.view;
-    }
-    ngOnInit() {
-        this.ngZone.onStable.pipe(take(1)).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)).subscribe(() => {
-                this.scrollToToday();
+                this.barElement.classList.remove(activeClass);
+                this.destroyLinkDraggingLine();
+                this.dragContainer.emitLinkDragEnded();
             });
+            dragRefs.push(dragRef);
         });
+        return dragRefs;
     }
-    setupViewScroll() {
-        if (this.ganttUpper.disabledLoadOnScroll) {
-            return;
+    openDragBackdrop(dragElement, start, end) {
+        const dragMaskElement = this.dom.root.querySelector('.gantt-drag-mask');
+        const dragBackdropElement = this.dom.root.querySelector('.gantt-drag-backdrop');
+        const rootRect = this.dom.root.getBoundingClientRect();
+        const dragRect = dragElement.getBoundingClientRect();
+        const left = dragRect.left - rootRect.left - this.dom.side.clientWidth;
+        const width = dragRect.right - dragRect.left;
+        dragMaskElement.style.left = left + 'px';
+        dragMaskElement.style.width = width + 'px';
+        dragMaskElement.querySelector('.start').innerHTML = start.format('MM-dd');
+        dragMaskElement.querySelector('.end').innerHTML = end.format('MM-dd');
+        dragMaskElement.style.display = 'block';
+        dragBackdropElement.style.display = 'block';
+    }
+    closeDragBackdrop() {
+        const dragMaskElement = this.dom.root.querySelector('.gantt-drag-mask');
+        const dragBackdropElement = this.dom.root.querySelector('.gantt-drag-backdrop');
+        dragMaskElement.style.display = 'none';
+        dragBackdropElement.style.display = 'none';
+    }
+    setDraggingStyles() {
+        this.barElement.style.pointerEvents = 'none';
+        this.barElement.classList.add('gantt-bar-draggable-drag');
+    }
+    clearDraggingStyles() {
+        this.barElement.style.pointerEvents = '';
+        this.barElement.classList.remove('gantt-bar-draggable-drag');
+    }
+    calcLinkLinePositions(target, isBefore) {
+        const rootRect = this.dom.root.getBoundingClientRect();
+        const targetRect = target.getBoundingClientRect();
+        const layerRect = target.parentElement.parentElement.getBoundingClientRect();
+        return {
+            x1: layerRect.left + (isBefore ? 0 : layerRect.width) - rootRect.left,
+            y1: layerRect.top + layerRect.height / 2 - rootRect.top,
+            x2: targetRect.left - rootRect.left + targetRect.width / 2,
+            y2: targetRect.top - rootRect.top + targetRect.height / 2
+        };
+    }
+    createLinkDraggingLine() {
+        if (!this.linkDraggingLine) {
+            const svgElement = createSvgElement('svg', 'gantt-link-drag-container');
+            const linElement = createSvgElement('line', 'link-dragging-line');
+            svgElement.appendChild(linElement);
+            this.dom.root.appendChild(svgElement);
+            this.linkDraggingLine = linElement;
         }
-        this.dom
-            .getViewerScroll()
-            .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);
-                    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.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();
-        });
+    destroyLinkDraggingLine() {
+        if (this.linkDraggingLine) {
+            this.linkDraggingLine.parentElement.remove();
+            this.linkDraggingLine = null;
+        }
     }
-    setupScrollClass() {
-        const mainContainer = this.dom.mainContainer;
-        const height = mainContainer.offsetHeight;
-        const scrollHeight = mainContainer.scrollHeight;
-        if (scrollHeight > height) {
-            this.elementRef.nativeElement.className = 'gantt gantt-scroll';
+    createDrags(elementRef, item, ganttUpper) {
+        this.item = item;
+        this.barElement = elementRef.nativeElement;
+        this.ganttUpper = ganttUpper;
+        if (!item.draggable || (this.dragDisabled && this.linkDragDisabled)) {
+            return;
         }
         else {
-            this.elementRef.nativeElement.className = 'gantt';
+            this.createMouseEvents();
+            if (!this.dragDisabled) {
+                const dragRef = this.createBarDrag();
+                const dragHandlesRefs = this.createBarHandleDrags();
+                this.dragRefs.push(dragRef, ...dragHandlesRefs);
+            }
+            if (!this.linkDragDisabled) {
+                const linkDragRefs = this.createLinkHandleDrags();
+                this.dragRefs.push(...linkDragRefs);
+            }
         }
     }
-    scrollToToday() {
-        const x = this.view.getTodayXPoint();
-        this.dom.scrollMainContainer(x);
+    ngOnDestroy() {
+        this.closeDragBackdrop();
+        this.dragRefs.forEach((dragRef) => dragRef.dispose());
+        this.destroy$.next();
+        this.destroy$.complete();
     }
 }
-NgxGanttRootComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ngx-gantt-root',
-                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",
-                providers: [GanttDomService, GanttDragContainer]
-            },] }
-];
-NgxGanttRootComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: NgZone },
-    { type: GanttDomService },
-    { type: GanttDragContainer },
-    { type: GanttUpper, decorators: [{ type: Inject, args: [GANTT_UPPER_TOKEN,] }] },
-    { type: GanttPrintService, decorators: [{ type: Optional }] }
-];
-NgxGanttRootComponent.propDecorators = {
-    sideWidth: [{ type: Input }],
-    ganttClass: [{ type: HostBinding, args: ['class.gantt',] }],
-    sideTemplate: [{ type: ContentChild, args: ['sideTemplate', { static: true },] }],
-    mainTemplate: [{ type: ContentChild, args: ['mainTemplate', { static: true },] }]
-};
+GanttBarDrag.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttBarDrag, deps: [{ token: i1.DragDrop }, { token: GanttDomService }, { token: GanttDragContainer }], target: i0.ɵɵFactoryTarget.Injectable });
+GanttBarDrag.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttBarDrag });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttBarDrag, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.DragDrop }, { type: GanttDomService }, { type: GanttDragContainer }]; } });
 
-class NgxGanttRangeComponent extends GanttItemUpper {
-    constructor(elementRef, ganttUpper) {
+function linearGradient(sideOrCorner, color, stop) {
+    return `linear-gradient(${sideOrCorner},${color} 0%,${stop} 40%)`;
+}
+class NgxGanttBarComponent extends GanttItemUpper {
+    constructor(dragContainer, drag, elementRef, ganttUpper) {
         super(elementRef, ganttUpper);
-        this.ganttRangeClass = true;
+        this.dragContainer = dragContainer;
+        this.drag = drag;
+        this.ganttUpper = ganttUpper;
+        this.barClick = new EventEmitter();
+        this.ganttItemClass = true;
+        this.color = 'red';
     }
     ngOnInit() {
         super.onInit();
+        this.dragContainer.dragEnded.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+            this.setContentBackground();
+        });
+    }
+    ngAfterViewInit() {
+        this.drag.createDrags(this.elementRef, this.item, this.ganttUpper);
+        this.setContentBackground();
     }
     ngOnChanges() {
         super.onChanges();
     }
+    onBarClick(event) {
+        this.barClick.emit({ event, item: this.item.origin });
+    }
+    setContentBackground() {
+        const contentElement = this.contentElementRef.nativeElement;
+        const color = this.item.color || barBackground;
+        const style = this.item.barStyle || {};
+        if (this.item.origin.start && this.item.origin.end) {
+            style.background = color;
+            style.borderRadius = '';
+        }
+        if (this.item.origin.start && !this.item.origin.end) {
+            style.background = linearGradient('to left', hexToRgb(color, 0.55), hexToRgb(color, 1));
+            style.borderRadius = '4px 12.5px 12.5px 4px';
+        }
+        if (!this.item.origin.start && this.item.origin.end) {
+            style.background = linearGradient('to right', hexToRgb(color, 0.55), hexToRgb(color, 1));
+            style.borderRadius = '12.5px 4px 4px 12.5px';
+        }
+        if (this.item.progress >= 0) {
+            const contentProgressElement = contentElement.querySelector('.gantt-bar-content-progress');
+            style.background = hexToRgb(color, 0.3);
+            style.borderRadius = '';
+            contentProgressElement.style.background = color;
+        }
+        for (const key in style) {
+            if (style.hasOwnProperty(key)) {
+                contentElement.style[key] = style[key];
+            }
+        }
+    }
+    stopPropagation(event) {
+        event.stopPropagation();
+    }
     ngOnDestroy() {
         super.onDestroy();
     }
 }
-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"
-            },] }
-];
-NgxGanttRangeComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: GanttUpper, decorators: [{ type: Inject, args: [GANTT_UPPER_TOKEN,] }] }
-];
-NgxGanttRangeComponent.propDecorators = {
-    ganttRangeClass: [{ type: HostBinding, args: ['class.gantt-range',] }]
-};
+NgxGanttBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: NgxGanttBarComponent, deps: [{ token: GanttDragContainer }, { token: GanttBarDrag }, { token: i0.ElementRef }, { token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
+NgxGanttBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: NgxGanttBarComponent, selector: "ngx-gantt-bar,gantt-bar", outputs: { barClick: "barClick" }, host: { properties: { "class.gantt-bar": "this.ganttItemClass" } }, providers: [GanttBarDrag], viewQueries: [{ propertyName: "contentElementRef", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"gantt-bar-layer\">\n  <div *ngIf=\"item.draggable && ganttUpper.draggable\" class=\"drag-handles\">\n    <ng-container>\n      <span class=\"handle\" (mousedown)=\"stopPropagation($event)\"></span>\n      <span class=\"handle\" (mousedown)=\"stopPropagation($event)\"></span>\n    </ng-container>\n  </div>\n  <div *ngIf=\"item.linkable && ganttUpper.linkable\" class=\"link-handles\">\n    <span class=\"handle\"><span class=\"point\"></span></span>\n    <span class=\"handle\"> <span class=\"point\"></span></span>\n  </div>\n</div>\n<div class=\"gantt-bar-border\"></div>\n<div #content class=\"gantt-bar-content\" (click)=\"onBarClick($event)\">\n  <div class=\"gantt-bar-content-progress\" *ngIf=\"item.progress >= 0\" [style.width.%]=\"item.progress * 100\"></div>\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"></ng-template>\n</div>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: NgxGanttBarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-gantt-bar,gantt-bar',
+                    templateUrl: './bar.component.html',
+                    providers: [GanttBarDrag]
+                }]
+        }], ctorParameters: function () { return [{ type: GanttDragContainer }, { type: GanttBarDrag }, { type: i0.ElementRef }, { type: GanttUpper, decorators: [{
+                    type: Inject,
+                    args: [GANTT_UPPER_TOKEN]
+                }] }]; }, propDecorators: { barClick: [{
+                type: Output
+            }], contentElementRef: [{
+                type: ViewChild,
+                args: ['content']
+            }], ganttItemClass: [{
+                type: HostBinding,
+                args: ['class.gantt-bar']
+            }] } });
 
-class IsGanttRangeItemPipe {
-    transform(value) {
-        return value === GanttItemType.range;
+class GanttMainComponent {
+    constructor(ganttUpper) {
+        this.ganttUpper = ganttUpper;
+        this.barClick = new EventEmitter();
+        this.lineClick = new EventEmitter();
+        this.ganttMainClass = true;
     }
-}
-IsGanttRangeItemPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'isGanttRangeItem'
-            },] }
-];
-class IsGanttBarItemPipe {
-    transform(value) {
-        return value === GanttItemType.bar;
+    ngOnInit() { }
+    trackBy(item, index) {
+        return item.id || index;
     }
 }
-IsGanttBarItemPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'isGanttBarItem'
-            },] }
-];
-class IsGanttCustomItemPipe {
-    transform(value) {
-        return value === GanttItemType.custom;
+GanttMainComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttMainComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
+GanttMainComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: GanttMainComponent, selector: "gantt-main", inputs: { groups: "groups", items: "items", groupHeaderTemplate: "groupHeaderTemplate", itemTemplate: "itemTemplate", barTemplate: "barTemplate", rangeTemplate: "rangeTemplate" }, outputs: { barClick: "barClick", lineClick: "lineClick" }, host: { properties: { "class.gantt-main-container": "this.ganttMainClass" } }, ngImport: i0, 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; trackBy: trackBy\">\n    <div class=\"gantt-item\" [style.height.px]=\"ganttUpper.styles.lineHeight\">\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: "12.1.2", ngImport: i0, type: GanttMainComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'gantt-main',
+                    templateUrl: './gantt-main.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: GanttUpper, decorators: [{
+                    type: Inject,
+                    args: [GANTT_UPPER_TOKEN]
+                }] }]; }, propDecorators: { groups: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], groupHeaderTemplate: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], barTemplate: [{
+                type: Input
+            }], rangeTemplate: [{
+                type: Input
+            }], barClick: [{
+                type: Output
+            }], lineClick: [{
+                type: Output
+            }], ganttMainClass: [{
+                type: HostBinding,
+                args: ['class.gantt-main-container']
+            }] } });
+
+class NgxGanttComponent extends GanttUpper {
+    constructor(elementRef, cdr, ngZone) {
+        super(elementRef, cdr, ngZone);
+        this.maxLevel = 2;
+        this.linkDragStarted = new EventEmitter();
+        this.linkDragEnded = new EventEmitter();
+        this.lineClick = new EventEmitter();
+        this.ngUnsubscribe$ = new Subject();
+        this.sideTableWidth = sideWidth;
+    }
+    ngOnInit() {
+        super.onInit();
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            this.dragContainer.linkDragStarted.pipe(takeUntil(this.ngUnsubscribe$)).subscribe((event) => {
+                this.linkDragStarted.emit(event);
+            });
+            this.dragContainer.linkDragEnded.pipe(takeUntil(this.ngUnsubscribe$)).subscribe((event) => {
+                this.linkDragEnded.emit(event);
+            });
+        });
+    }
+    ngAfterViewInit() {
+        this.columns.changes.pipe(startWith(true), takeUntil(this.ngUnsubscribe$)).subscribe(() => {
+            this.columns.forEach((column) => {
+                if (!column.columnWidth) {
+                    column.columnWidth = coerceCssPixelValue(defaultColumnWidth);
+                }
+            });
+            this.cdr.detectChanges();
+        });
+    }
+    ngOnChanges(changes) {
+        super.onChanges(changes);
+    }
+    expandChildren(item) {
+        if (!item.expanded) {
+            item.setExpand(true);
+            if (this.async && this.childrenResolve && item.children.length === 0) {
+                item.loading = true;
+                this.childrenResolve(item.origin)
+                    .pipe(take(1), finalize(() => {
+                    item.loading = false;
+                    this.expandChange.emit();
+                    this.cdr.detectChanges();
+                }))
+                    .subscribe((items) => {
+                    item.addChildren(items);
+                    this.computeItemsRefs(...item.children);
+                });
+            }
+            else {
+                this.computeItemsRefs(...item.children);
+                this.expandChange.emit();
+            }
+        }
+        else {
+            item.setExpand(false);
+            this.expandChange.emit();
+        }
+    }
+    ngOnDestroy() {
+        super.onDestroy();
     }
 }
-IsGanttCustomItemPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'isGanttCustomItem'
-            },] }
-];
+NgxGanttComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: NgxGanttComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+NgxGanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: NgxGanttComponent, selector: "ngx-gantt", inputs: { maxLevel: "maxLevel", async: "async", childrenResolve: "childrenResolve", linkable: "linkable" }, outputs: { linkDragStarted: "linkDragStarted", linkDragEnded: "linkDragEnded", lineClick: "lineClick" }, providers: [
+        {
+            provide: GANTT_UPPER_TOKEN,
+            useExisting: NgxGanttComponent
+        },
+        {
+            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 }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ngx-gantt-root>\n  <ng-template #sideTemplate>\n    <gantt-table [groups]=\"groups\" [items]=\"items\" [columns]=\"columns\" [groupTemplate]=\"groupTemplate\" [emptyTemplate]=\"tableEmptyTemplate\"></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"] }, { 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: "12.1.2", ngImport: i0, type: NgxGanttComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-gantt',
+                    templateUrl: './gantt.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: GANTT_UPPER_TOKEN,
+                            useExisting: NgxGanttComponent
+                        },
+                        {
+                            provide: GANTT_ABSTRACT_TOKEN,
+                            useExisting: forwardRef(() => NgxGanttComponent)
+                        }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { maxLevel: [{
+                type: Input
+            }], async: [{
+                type: Input
+            }], childrenResolve: [{
+                type: Input
+            }], linkable: [{
+                type: Input
+            }], linkDragStarted: [{
+                type: Output
+            }], linkDragEnded: [{
+                type: Output
+            }], lineClick: [{
+                type: Output
+            }], table: [{
+                type: ContentChild,
+                args: [NgxGanttTableComponent]
+            }], columns: [{
+                type: ContentChildren,
+                args: [NgxGanttTableColumnComponent, { descendants: true }]
+            }], tableEmptyTemplate: [{
+                type: ContentChild,
+                args: ['tableEmpty', { static: true }]
+            }] } });
 
 class NgxGanttModule {
 }
-NgxGanttModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, DragDropModule],
-                exports: [NgxGanttComponent, NgxGanttTableComponent, NgxGanttTableColumnComponent, NgxGanttRootComponent, NgxGanttBarComponent],
-                declarations: [
-                    NgxGanttComponent,
-                    NgxGanttTableComponent,
-                    NgxGanttTableColumnComponent,
-                    GanttTableComponent,
-                    GanttMainComponent,
-                    GanttCalendarComponent,
-                    GanttLinksComponent,
-                    NgxGanttBarComponent,
-                    GanttIconComponent,
-                    GanttDragBackdropComponent,
-                    NgxGanttRangeComponent,
-                    NgxGanttRootComponent,
-                    IsGanttRangeItemPipe,
-                    IsGanttBarItemPipe,
-                    IsGanttCustomItemPipe
-                ],
-                providers: []
-            },] }
-];
+NgxGanttModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: NgxGanttModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxGanttModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: NgxGanttModule, declarations: [NgxGanttComponent,
+        NgxGanttTableComponent,
+        NgxGanttTableColumnComponent,
+        GanttTableComponent,
+        GanttMainComponent,
+        GanttCalendarComponent,
+        GanttLinksComponent,
+        NgxGanttBarComponent,
+        GanttIconComponent,
+        GanttDragBackdropComponent,
+        NgxGanttRangeComponent,
+        NgxGanttRootComponent,
+        IsGanttRangeItemPipe,
+        IsGanttBarItemPipe,
+        IsGanttCustomItemPipe], imports: [CommonModule, DragDropModule], exports: [NgxGanttComponent,
+        NgxGanttTableComponent,
+        NgxGanttTableColumnComponent,
+        NgxGanttRootComponent,
+        NgxGanttBarComponent,
+        NgxGanttRangeComponent] });
+NgxGanttModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: NgxGanttModule, providers: [], imports: [[CommonModule, DragDropModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: NgxGanttModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, DragDropModule],
+                    exports: [
+                        NgxGanttComponent,
+                        NgxGanttTableComponent,
+                        NgxGanttTableColumnComponent,
+                        NgxGanttRootComponent,
+                        NgxGanttBarComponent,
+                        NgxGanttRangeComponent
+                    ],
+                    declarations: [
+                        NgxGanttComponent,
+                        NgxGanttTableComponent,
+                        NgxGanttTableColumnComponent,
+                        GanttTableComponent,
+                        GanttMainComponent,
+                        GanttCalendarComponent,
+                        GanttLinksComponent,
+                        NgxGanttBarComponent,
+                        GanttIconComponent,
+                        GanttDragBackdropComponent,
+                        NgxGanttRangeComponent,
+                        NgxGanttRootComponent,
+                        IsGanttRangeItemPipe,
+                        IsGanttBarItemPipe,
+                        IsGanttCustomItemPipe
+                    ],
+                    providers: []
+                }]
+        }] });
 
 /*
  * Public API Surface of gantt
@@ -2496,5 +2633,5 @@ NgxGanttModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { GANTT_UPPER_TOKEN, GanttBarClickEvent, GanttDate, GanttDatePoint, GanttDragEvent, GanttGroupInternal, GanttItemInternal, GanttItemType, GanttItemUpper, GanttLineClickEvent, GanttLinkDragEvent, GanttLoadOnScrollEvent, GanttPrintService, GanttTableEvent, GanttUpper, GanttView, GanttViewType, IsGanttBarItemPipe, IsGanttCustomItemPipe, IsGanttRangeItemPipe, NgxGanttComponent, NgxGanttModule, NgxGanttRootComponent, NgxGanttTableColumnComponent, NgxGanttTableComponent, defaultColumnWidth, minColumnWidth, primaryDatePointTop, secondaryDatePointTop, GanttDomService as ɵa, GanttDragContainer as ɵb, NgxGanttBarComponent as ɵc, GanttBarDrag as ɵd, GanttTableComponent as ɵe, GanttMainComponent as ɵf, GanttCalendarComponent as ɵg, GanttLinksComponent as ɵh, GanttIconComponent as ɵi, GanttDragBackdropComponent as ɵj, NgxGanttRangeComponent as ɵk };
+export { GANTT_UPPER_TOKEN, GanttBarClickEvent, GanttDate, GanttDatePoint, GanttDragEvent, GanttGroupInternal, GanttItemInternal, GanttItemType, GanttItemUpper, GanttLineClickEvent, GanttLinkDragEvent, GanttLoadOnScrollEvent, GanttPrintService, GanttTableEvent, GanttUpper, GanttView, GanttViewType, IsGanttBarItemPipe, IsGanttCustomItemPipe, IsGanttRangeItemPipe, NgxGanttBarComponent, NgxGanttComponent, NgxGanttModule, NgxGanttRangeComponent, NgxGanttRootComponent, NgxGanttTableColumnComponent, NgxGanttTableComponent, primaryDatePointTop, secondaryDatePointTop };
 //# sourceMappingURL=worktile-gantt.js.map