@worktile/gantt 12.0.2 → 12.1.2

package/fesm2015/worktile-gantt.js

@@ -1,5 +1,5 @@
 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 { InjectionToken, EventEmitter, Directive, Inject, Input, Output, ContentChild, HostBinding, Component, 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, map, pairwise, auditTime, finalize } from 'rxjs/operators';
@@ -293,11 +293,24 @@ class GanttGroupInternal {
     }
 }
 
+const defaultConfig = {
+    dateFormat: {
+        week: '第w周',
+        month: 'M月',
+        quarter: 'QQQ',
+        year: 'yyyy年',
+        yearMonth: 'yyyy年MM月',
+        yearQuarter: 'yyyy年QQQ',
+    }
+};
+const GANTT_GLOBAL_CONFIG = new InjectionToken('GANTT_GLOBAL_CONFIG');
+
 const primaryDatePointTop = 18;
 const secondaryDatePointTop = 36;
 const viewOptions$5 = {
     min: new GanttDate().addYears(-1).startOfYear(),
-    max: new GanttDate().addYears(1).endOfYear()
+    max: new GanttDate().addYears(1).endOfYear(),
+    dateFormat: defaultConfig.dateFormat
 };
 class GanttView {
     constructor(start, end, options) {
@@ -440,7 +453,7 @@ class GanttViewMonth extends GanttView {
         const points = [];
         for (let i = 0; i < quarters; i++) {
             const start = this.start.addQuarters(i);
-            const point = new GanttDatePoint(start, start.format('yyyy年QQQ'), (this.getCellWidth() * 3) / 2 + i * (this.getCellWidth() * 3), primaryDatePointTop);
+            const point = new GanttDatePoint(start, start.format(this.options.dateFormat.yearQuarter), (this.getCellWidth() * 3) / 2 + i * (this.getCellWidth() * 3), primaryDatePointTop);
             points.push(point);
         }
         return points;
@@ -450,7 +463,7 @@ class GanttViewMonth extends GanttView {
         const points = [];
         for (let i = 0; i < months.length; i++) {
             const start = new GanttDate(months[i]);
-            const point = new GanttDatePoint(start, `${start.getMonth() + 1}月`, i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
+            const point = new GanttDatePoint(start, start.format(this.options.dateFormat.month), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
             points.push(point);
         }
         return points;
@@ -487,7 +500,7 @@ class GanttViewQuarter extends GanttView {
         const points = [];
         for (let i = 0; i < years.length; i++) {
             const start = new GanttDate(years[i]);
-            const point = new GanttDatePoint(start, `${start.format('yyyy')}年`, (this.getCellWidth() * 4) / 2 + i * (this.getCellWidth() * 4), primaryDatePointTop);
+            const point = new GanttDatePoint(start, `${start.format(this.options.dateFormat.year)}`, (this.getCellWidth() * 4) / 2 + i * (this.getCellWidth() * 4), primaryDatePointTop);
             points.push(point);
         }
         return points;
@@ -497,7 +510,7 @@ class GanttViewQuarter extends GanttView {
         const points = [];
         for (let i = 0; i <= quarters; i++) {
             const start = this.start.addQuarters(i);
-            const point = new GanttDatePoint(start, start.format('QQQ'), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
+            const point = new GanttDatePoint(start, start.format(this.options.dateFormat.quarter), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
             points.push(point);
         }
         return points;
@@ -535,7 +548,7 @@ class GanttViewDay extends GanttView {
         for (let i = 0; i < weeks.length; i++) {
             const weekStart = new GanttDate(weeks[i]);
             const increaseWeek = weekStart.getDaysInMonth() - weekStart.getDate() >= 3 ? 0 : 1;
-            const point = new GanttDatePoint(weekStart, weekStart.addWeeks(increaseWeek).format('yyyy年MM月'), (this.getCellWidth() * 7) / 2 + i * (this.getCellWidth() * 7), primaryDatePointTop);
+            const point = new GanttDatePoint(weekStart, weekStart.addWeeks(increaseWeek).format(this.options.dateFormat.yearMonth), (this.getCellWidth() * 7) / 2 + i * (this.getCellWidth() * 7), primaryDatePointTop);
             points.push(point);
         }
         return points;
@@ -584,7 +597,7 @@ class GanttViewWeek extends GanttView {
         for (let i = 0; i < weeks.length; i++) {
             const weekStart = new GanttDate(weeks[i]);
             const increaseWeek = weekStart.getDaysInMonth() - weekStart.getDate() >= 3 ? 0 : 1;
-            const point = new GanttDatePoint(weekStart, weekStart.addWeeks(increaseWeek).format('yyyy年'), this.getCellWidth() / 2 + i * this.getCellWidth(), primaryDatePointTop);
+            const point = new GanttDatePoint(weekStart, weekStart.addWeeks(increaseWeek).format(this.options.dateFormat.year), this.getCellWidth() / 2 + i * this.getCellWidth(), primaryDatePointTop);
             points.push(point);
         }
         return points;
@@ -594,7 +607,7 @@ class GanttViewWeek extends GanttView {
         const points = [];
         for (let i = 0; i < weeks.length; i++) {
             const start = new GanttDate(weeks[i]);
-            const point = new GanttDatePoint(start, `第${start.format('w')}周`, i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
+            const point = new GanttDatePoint(start, `${start.format(this.options.dateFormat.week)}`, i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
             points.push(point);
         }
         return points;
@@ -640,7 +653,7 @@ class GanttViewYear extends GanttView {
         const pointTop = 27;
         for (let i = 0; i <= years; i++) {
             const start = this.start.addYears(i);
-            const point = new GanttDatePoint(start, `${start.format('yyyy')}年`, i * this.getCellWidth() + this.getCellWidth() / 2, pointTop);
+            const point = new GanttDatePoint(start, `${start.format(this.options.dateFormat.year)}`, i * this.getCellWidth() + this.getCellWidth() / 2, pointTop);
             points.push(point);
         }
         return points;
@@ -735,16 +748,19 @@ function getFlatItems(items) {
 }
 
 class GanttUpper {
-    constructor(elementRef, cdr, ngZone) {
+    constructor(elementRef, cdr, ngZone, config) {
         this.elementRef = elementRef;
         this.cdr = cdr;
         this.ngZone = ngZone;
+        this.config = config;
         this.originItems = [];
         this.originGroups = [];
         this.viewType = GanttViewType.month;
         this.showTodayLine = true;
+        this.viewOptions = {};
         this.loadOnScroll = new EventEmitter();
         this.dragStarted = new EventEmitter();
+        this.dragMoved = new EventEmitter();
         this.dragEnded = new EventEmitter();
         this.barClick = new EventEmitter();
         this.linkDragEnded = new EventEmitter();
@@ -855,6 +871,7 @@ class GanttUpper {
     }
     onInit() {
         this.styles = Object.assign({}, defaultStyles, this.styles);
+        this.viewOptions.dateFormat = Object.assign({}, defaultConfig.dateFormat, this.config.dateFormat, this.viewOptions.dateFormat);
         this.createView();
         this.setupGroups();
         this.setupItems();
@@ -865,6 +882,9 @@ class GanttUpper {
             this.dragContainer.dragStarted.subscribe((event) => {
                 this.dragStarted.emit(event);
             });
+            this.dragContainer.dragMoved.subscribe((event) => {
+                this.dragMoved.emit(event);
+            });
             this.dragContainer.dragEnded.subscribe((event) => {
                 this.dragEnded.emit(event);
                 this.computeRefs();
@@ -905,7 +925,7 @@ class GanttUpper {
             });
         });
     }
-    trackBy(item, index) {
+    trackBy(index, item) {
         return item.id || index;
     }
     detectChanges() {
@@ -923,12 +943,28 @@ class GanttUpper {
     collapseAll() {
         this.expandGroups(false);
     }
+    getGanttItem(id) {
+        return this.getGanttItems([id])[0] || null;
+    }
+    getGanttItems(ids) {
+        let items = [];
+        if (this.items.length > 0) {
+            items = recursiveItems(this.items);
+        }
+        else {
+            items = flatten(this.groups.map((group) => recursiveItems(group.items)));
+        }
+        return items.filter((item) => ids.includes(item.id));
+    }
 }
-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 });
+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 }, { token: GANTT_GLOBAL_CONFIG }], 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", dragMoved: "dragMoved", dragEnded: "dragEnded", barClick: "barClick" }, host: { properties: { "class.gantt": "this.ganttClass" } }, queries: [{ propertyName: "barTemplate", first: true, predicate: ["bar"], descendants: true, static: true }, { propertyName: "rangeTemplate", first: true, predicate: ["range"], descendants: true, static: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], descendants: true, static: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ["groupHeader"], descendants: true, static: true }], ngImport: i0 });
 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: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [GANTT_GLOBAL_CONFIG]
+                }] }]; }, propDecorators: { originItems: [{
                 type: Input,
                 args: ['items']
             }], originGroups: [{
@@ -954,6 +990,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImpor
                 type: Output
             }], dragStarted: [{
                 type: Output
+            }], dragMoved: [{
+                type: Output
             }], dragEnded: [{
                 type: Output
             }], barClick: [{
@@ -1018,7 +1056,7 @@ class NgxGanttTableComponent {
     ngOnInit() { }
 }
 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 });
+NgxGanttTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: NgxGanttTableComponent, selector: "ngx-gantt-table", outputs: { columnChanges: "columnChanges" }, queries: [{ propertyName: "rowBeforeTemplate", first: true, predicate: ["rowBeforeSlot"], descendants: true, static: true }, { propertyName: "rowAfterTemplate", first: true, predicate: ["rowAfterSlot"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: NgxGanttTableComponent, decorators: [{
             type: Component,
             args: [{
@@ -1027,6 +1065,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImpor
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { columnChanges: [{
                 type: Output
+            }], rowBeforeTemplate: [{
+                type: ContentChild,
+                args: ['rowBeforeSlot', { static: true }]
+            }], rowAfterTemplate: [{
+                type: ContentChild,
+                args: ['rowAfterSlot', { static: true }]
             }] } });
 
 const GANTT_ABSTRACT_TOKEN = new InjectionToken('gantt-abstract-token');
@@ -1298,9 +1342,12 @@ class GanttTableComponent {
     hideAuxiliaryLine() {
         this.draglineElementRef.nativeElement.style.display = 'none';
     }
+    trackBy(index, item) {
+        return item.id || index;
+    }
 }
 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 } });
+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", rowBeforeTemplate: "rowBeforeTemplate", rowAfterTemplate: "rowAfterTemplate" }, host: { properties: { "class.gantt-table": "this.ganttTableClass", "class.gantt-table-empty": "this.ganttTableEmptyClass" } }, viewQueries: [{ propertyName: "draglineElementRef", first: true, predicate: ["dragLine"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"gantt-table-header gantt-table-row\">\n  <div class=\"gantt-table-column\" *ngFor=\"let column of columnList; let i = index\" [style.width]=\"column.columnWidth\">\n    <ng-container *ngIf=\"column.headerTemplateRef; else default\" [ngTemplateOutlet]=\"column.headerTemplateRef\"></ng-container>\n    <ng-template #default>\n      {{ column.name }}\n    </ng-template>\n    <div\n      class=\"gantt-table-drag-trigger\"\n      cdkDrag\n      cdkDragLockAxis=\"x\"\n      cdkDragBoundary=\".gantt\"\n      (cdkDragMoved)=\"dragMoved($event, column)\"\n      (cdkDragStarted)=\"dragStarted($event)\"\n      (cdkDragEnded)=\"columnDragEnded($event, column)\"\n    ></div>\n  </div>\n</div>\n<div class=\"gantt-table-body\">\n  <ng-container *ngIf=\"!groups.length && !items.length\">\n    <ng-container *ngIf=\"!emptyTemplate\">\n      <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n      <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n    </ng-container>\n    <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"groups && groups.length > 0; else itemsTemplate\">\n    <ng-container *ngFor=\"let group of groups; trackBy: trackBy\">\n      <div class=\"gantt-table-group\" [ngClass]=\"group.class\">\n        <div class=\"gantt-table-group-title\" [class.expanded]=\"group.expanded\" (click)=\"expandGroup(group)\">\n          <gantt-icon class=\"expand-icon\" [iconName]=\"group.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n          <ng-container *ngIf=\"groupTemplate; else default\">\n            <ng-template\n              [ngTemplateOutlet]=\"groupTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: group.origin, group: group.origin }\"\n            ></ng-template>\n          </ng-container>\n          <ng-template #default>\n            <span class=\"group-title\">{{ group.title }}</span>\n          </ng-template>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"group.expanded\">\n        <ng-template\n          [ngTemplateOutlet]=\"ganttItems\"\n          [ngTemplateOutletContext]=\"{ group: group, items: group.items, level: 0 }\"\n        ></ng-template>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div\n  class=\"gantt-table-drag-trigger\"\n  cdkDrag\n  cdkDragLockAxis=\"x\"\n  cdkDragBoundary=\".gantt\"\n  (cdkDragMoved)=\"dragMoved($event)\"\n  (cdkDragStarted)=\"dragStarted($event)\"\n  (cdkDragEnded)=\"tableDragEnded($event)\"\n></div>\n\n<div #dragLine class=\"gantt-table-drag-auxiliary-line\"></div>\n\n<ng-template #itemsTemplate>\n  <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: items, level: 0 }\"></ng-template>\n</ng-template>\n\n<ng-template #ganttItems let-group=\"group\" let-items=\"items\" let-level=\"level\">\n  <ng-container *ngFor=\"let item of items; trackBy: trackBy\">\n    <div\n      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      <ng-template\n        [ngTemplateOutlet]=\"rowBeforeTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n      ></ng-template>\n      <div class=\"gantt-table-column\" *ngFor=\"let column of columnList; let first = first\" [style.width]=\"column.columnWidth\">\n        <div *ngIf=\"first\" class=\"gantt-expand-icon\" [style.marginLeft.px]=\"level * 20\">\n          <ng-container *ngIf=\"level < gantt.maxLevel - 1 && item.expandable\">\n            <gantt-icon\n              *ngIf=\"!item.loading\"\n              class=\"expand-icon\"\n              [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n              (click)=\"expandChildren(item)\"\n            ></gantt-icon>\n            <gantt-icon *ngIf=\"item.loading\" [iconName]=\"'loading'\"></gantt-icon>\n          </ng-container>\n        </div>\n        <div class=\"gantt-table-column-content\">\n          <ng-template\n            [ngTemplateOutlet]=\"column.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n          ></ng-template>\n        </div>\n      </div>\n      <ng-template\n      [ngTemplateOutlet]=\"rowAfterTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n    ></ng-template>\n    </div>\n    <ng-template\n      *ngIf=\"item.children && item.expanded\"\n      [ngTemplateOutlet]=\"ganttItems\"\n      [ngTemplateOutletContext]=\"{ items: item.children, level: level + 1, group: group }\"\n    ></ng-template>\n  </ng-container>\n</ng-template>\n", components: [{ type: GanttIconComponent, selector: "gantt-icon", inputs: ["iconName"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.CdkDrag, selector: "[cdkDrag]", inputs: ["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: [{
@@ -1320,6 +1367,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImpor
                 type: Input
             }], emptyTemplate: [{
                 type: Input
+            }], rowBeforeTemplate: [{
+                type: Input
+            }], rowAfterTemplate: [{
+                type: Input
             }], draglineElementRef: [{
                 type: ViewChild,
                 args: ['dragLine', { static: true }]
@@ -1432,6 +1483,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImpor
 class GanttDragContainer {
     constructor() {
         this.dragStarted = new EventEmitter();
+        this.dragMoved = new EventEmitter();
         this.dragEnded = new EventEmitter();
         this.linkDragStarted = new EventEmitter();
         this.linkDragEntered = new EventEmitter();
@@ -1628,7 +1680,7 @@ class GanttCalendarComponent {
     }
     ngAfterViewInit() { }
     ngOnChanges(changes) { }
-    trackBy(point, index) {
+    trackBy(index, point) {
         return point.text || index;
     }
     ngOnDestroy() {
@@ -2126,6 +2178,8 @@ class GanttBarDrag {
             const start = this.ganttUpper.view.getDateByXPoint(x);
             const end = start.addDays(days);
             this.openDragBackdrop(this.barElement, this.ganttUpper.view.getDateByXPoint(x), end);
+            this.item.updateDate(start, end);
+            this.dragContainer.dragMoved.emit({ item: this.item.origin });
         });
         dragRef.ended.subscribe((event) => {
             const days = differenceInCalendarDays(this.item.end.value, this.item.start.value);
@@ -2160,6 +2214,7 @@ class GanttBarDrag {
                         this.barElement.style.width = width + 'px';
                         this.barElement.style.left = x + 'px';
                         this.openDragBackdrop(this.barElement, this.ganttUpper.view.getDateByXPoint(x), this.ganttUpper.view.getDateByXPoint(x + width));
+                        this.item.updateDate(this.ganttUpper.view.getDateByXPoint(x), this.item.end);
                     }
                 }
                 else {
@@ -2168,7 +2223,9 @@ class GanttBarDrag {
                         this.barElement.style.width = width + 'px';
                         this.openDragBackdrop(this.barElement, this.ganttUpper.view.getDateByXPoint(this.item.refs.x), this.ganttUpper.view.getDateByXPoint(this.item.refs.x + width));
                     }
+                    this.item.updateDate(this.item.start, this.ganttUpper.view.getDateByXPoint(this.item.refs.x + width));
                 }
+                this.dragContainer.dragMoved.emit({ item: this.item.origin });
                 event.source.reset();
             });
             dragRef.ended.subscribe((event) => {
@@ -2415,7 +2472,7 @@ class GanttMainComponent {
         this.ganttMainClass = true;
     }
     ngOnInit() { }
-    trackBy(item, index) {
+    trackBy(index, item) {
         return item.id || index;
     }
 }
@@ -2452,8 +2509,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImpor
             }] } });
 
 class NgxGanttComponent extends GanttUpper {
-    constructor(elementRef, cdr, ngZone) {
-        super(elementRef, cdr, ngZone);
+    constructor(elementRef, cdr, ngZone, config) {
+        super(elementRef, cdr, ngZone, config);
         this.maxLevel = 2;
         this.linkDragStarted = new EventEmitter();
         this.linkDragEnded = new EventEmitter();
@@ -2515,7 +2572,7 @@ class NgxGanttComponent extends GanttUpper {
         super.onDestroy();
     }
 }
-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.ɵ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 }, { token: GANTT_GLOBAL_CONFIG }], 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,
@@ -2525,7 +2582,7 @@ NgxGanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             provide: GANTT_ABSTRACT_TOKEN,
             useExisting: forwardRef(() => NgxGanttComponent)
         }
-    ], queries: [{ propertyName: "table", first: true, predicate: NgxGanttTableComponent, descendants: true }, { propertyName: "tableEmptyTemplate", first: true, predicate: ["tableEmpty"], descendants: true, static: true }, { propertyName: "columns", predicate: NgxGanttTableColumnComponent, descendants: true }], 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 });
+    ], 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\n      [groups]=\"groups\"\n      [items]=\"items\"\n      [columns]=\"columns\"\n      [groupTemplate]=\"groupTemplate\"\n      [emptyTemplate]=\"tableEmptyTemplate\"\n      [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n      [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n    ></gantt-table>\n  </ng-template>\n  <ng-template #mainTemplate>\n    <gantt-main\n      [groups]=\"groups\"\n      [items]=\"items\"\n      [groupHeaderTemplate]=\"groupHeaderTemplate\"\n      [itemTemplate]=\"itemTemplate\"\n      [barTemplate]=\"barTemplate\"\n      [rangeTemplate]=\"rangeTemplate\"\n      (barClick)=\"barClick.emit($event)\"\n      (lineClick)=\"lineClick.emit($event)\"\n    >\n    </gantt-main>\n  </ng-template>\n</ngx-gantt-root>\n", components: [{ type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: ["sideWidth"] }, { type: GanttTableComponent, selector: "gantt-table", inputs: ["groups", "items", "columns", "groupTemplate", "emptyTemplate", "rowBeforeTemplate", "rowAfterTemplate"] }, { 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: [{
@@ -2543,7 +2600,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImpor
                         }
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { maxLevel: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [GANTT_GLOBAL_CONFIG]
+                }] }]; }, propDecorators: { maxLevel: [{
                 type: Input
             }], async: [{
                 type: Input
@@ -2591,7 +2651,12 @@ NgxGanttModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         NgxGanttRootComponent,
         NgxGanttBarComponent,
         NgxGanttRangeComponent] });
-NgxGanttModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: NgxGanttModule, providers: [], imports: [[CommonModule, DragDropModule]] });
+NgxGanttModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: NgxGanttModule, providers: [
+        {
+            provide: GANTT_GLOBAL_CONFIG,
+            useValue: defaultConfig
+        }
+    ], imports: [[CommonModule, DragDropModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: NgxGanttModule, decorators: [{
             type: NgModule,
             args: [{
@@ -2621,7 +2686,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImpor
                         IsGanttBarItemPipe,
                         IsGanttCustomItemPipe
                     ],
-                    providers: []
+                    providers: [
+                        {
+                            provide: GANTT_GLOBAL_CONFIG,
+                            useValue: defaultConfig
+                        }
+                    ]
                 }]
         }] });
 
@@ -2633,5 +2703,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImpor
  * 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, NgxGanttBarComponent, NgxGanttComponent, NgxGanttModule, NgxGanttRangeComponent, NgxGanttRootComponent, NgxGanttTableColumnComponent, NgxGanttTableComponent, primaryDatePointTop, secondaryDatePointTop };
+export { GANTT_GLOBAL_CONFIG, 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, defaultConfig, primaryDatePointTop, secondaryDatePointTop };
 //# sourceMappingURL=worktile-gantt.js.map