@worktile/gantt 12.0.2 → 12.1.2

package/bundles/worktile-gantt.umd.js

@@ -659,11 +659,24 @@
         return GanttGroupInternal;
     }());
 
+    var defaultConfig = {
+        dateFormat: {
+            week: '第w周',
+            month: 'M月',
+            quarter: 'QQQ',
+            year: 'yyyy年',
+            yearMonth: 'yyyy年MM月',
+            yearQuarter: 'yyyy年QQQ',
+        }
+    };
+    var GANTT_GLOBAL_CONFIG = new i0.InjectionToken('GANTT_GLOBAL_CONFIG');
+
     var primaryDatePointTop = 18;
     var secondaryDatePointTop = 36;
     var viewOptions$5 = {
         min: new GanttDate().addYears(-1).startOfYear(),
-        max: new GanttDate().addYears(1).endOfYear()
+        max: new GanttDate().addYears(1).endOfYear(),
+        dateFormat: defaultConfig.dateFormat
     };
     var GanttView = /** @class */ (function () {
         function GanttView(start, end, options) {
@@ -816,7 +829,7 @@
             var points = [];
             for (var i = 0; i < quarters; i++) {
                 var start = this.start.addQuarters(i);
-                var point = new GanttDatePoint(start, start.format('yyyy年QQQ'), (this.getCellWidth() * 3) / 2 + i * (this.getCellWidth() * 3), primaryDatePointTop);
+                var point = new GanttDatePoint(start, start.format(this.options.dateFormat.yearQuarter), (this.getCellWidth() * 3) / 2 + i * (this.getCellWidth() * 3), primaryDatePointTop);
                 points.push(point);
             }
             return points;
@@ -826,7 +839,7 @@
             var points = [];
             for (var i = 0; i < months.length; i++) {
                 var start = new GanttDate(months[i]);
-                var point = new GanttDatePoint(start, start.getMonth() + 1 + "\u6708", i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
+                var point = new GanttDatePoint(start, start.format(this.options.dateFormat.month), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
                 points.push(point);
             }
             return points;
@@ -865,7 +878,7 @@
             var points = [];
             for (var i = 0; i < years.length; i++) {
                 var start = new GanttDate(years[i]);
-                var point = new GanttDatePoint(start, start.format('yyyy') + "\u5E74", (this.getCellWidth() * 4) / 2 + i * (this.getCellWidth() * 4), primaryDatePointTop);
+                var point = new GanttDatePoint(start, "" + start.format(this.options.dateFormat.year), (this.getCellWidth() * 4) / 2 + i * (this.getCellWidth() * 4), primaryDatePointTop);
                 points.push(point);
             }
             return points;
@@ -875,7 +888,7 @@
             var points = [];
             for (var i = 0; i <= quarters; i++) {
                 var start = this.start.addQuarters(i);
-                var point = new GanttDatePoint(start, start.format('QQQ'), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
+                var point = new GanttDatePoint(start, start.format(this.options.dateFormat.quarter), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
                 points.push(point);
             }
             return points;
@@ -916,7 +929,7 @@
             for (var i = 0; i < weeks.length; i++) {
                 var weekStart = new GanttDate(weeks[i]);
                 var increaseWeek = weekStart.getDaysInMonth() - weekStart.getDate() >= 3 ? 0 : 1;
-                var point = new GanttDatePoint(weekStart, weekStart.addWeeks(increaseWeek).format('yyyy年MM月'), (this.getCellWidth() * 7) / 2 + i * (this.getCellWidth() * 7), primaryDatePointTop);
+                var point = new GanttDatePoint(weekStart, weekStart.addWeeks(increaseWeek).format(this.options.dateFormat.yearMonth), (this.getCellWidth() * 7) / 2 + i * (this.getCellWidth() * 7), primaryDatePointTop);
                 points.push(point);
             }
             return points;
@@ -967,7 +980,7 @@
             for (var i = 0; i < weeks.length; i++) {
                 var weekStart = new GanttDate(weeks[i]);
                 var increaseWeek = weekStart.getDaysInMonth() - weekStart.getDate() >= 3 ? 0 : 1;
-                var point = new GanttDatePoint(weekStart, weekStart.addWeeks(increaseWeek).format('yyyy年'), this.getCellWidth() / 2 + i * this.getCellWidth(), primaryDatePointTop);
+                var point = new GanttDatePoint(weekStart, weekStart.addWeeks(increaseWeek).format(this.options.dateFormat.year), this.getCellWidth() / 2 + i * this.getCellWidth(), primaryDatePointTop);
                 points.push(point);
             }
             return points;
@@ -977,7 +990,7 @@
             var points = [];
             for (var i = 0; i < weeks.length; i++) {
                 var start = new GanttDate(weeks[i]);
-                var point = new GanttDatePoint(start, "\u7B2C" + start.format('w') + "\u5468", i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
+                var point = new GanttDatePoint(start, "" + start.format(this.options.dateFormat.week), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
                 points.push(point);
             }
             return points;
@@ -1025,7 +1038,7 @@
             var pointTop = 27;
             for (var i = 0; i <= years; i++) {
                 var start = this.start.addYears(i);
-                var point = new GanttDatePoint(start, start.format('yyyy') + "\u5E74", i * this.getCellWidth() + this.getCellWidth() / 2, pointTop);
+                var point = new GanttDatePoint(start, "" + start.format(this.options.dateFormat.year), i * this.getCellWidth() + this.getCellWidth() / 2, pointTop);
                 points.push(point);
             }
             return points;
@@ -1122,16 +1135,19 @@
     }
 
     var GanttUpper = /** @class */ (function () {
-        function GanttUpper(elementRef, cdr, ngZone) {
+        function GanttUpper(elementRef, cdr, ngZone, config) {
             this.elementRef = elementRef;
             this.cdr = cdr;
             this.ngZone = ngZone;
+            this.config = config;
             this.originItems = [];
             this.originGroups = [];
             this.viewType = exports.GanttViewType.month;
             this.showTodayLine = true;
+            this.viewOptions = {};
             this.loadOnScroll = new i0.EventEmitter();
             this.dragStarted = new i0.EventEmitter();
+            this.dragMoved = new i0.EventEmitter();
             this.dragEnded = new i0.EventEmitter();
             this.barClick = new i0.EventEmitter();
             this.linkDragEnded = new i0.EventEmitter();
@@ -1251,6 +1267,7 @@
         GanttUpper.prototype.onInit = function () {
             var _this = this;
             this.styles = Object.assign({}, defaultStyles, this.styles);
+            this.viewOptions.dateFormat = Object.assign({}, defaultConfig.dateFormat, this.config.dateFormat, this.viewOptions.dateFormat);
             this.createView();
             this.setupGroups();
             this.setupItems();
@@ -1261,6 +1278,9 @@
                 _this.dragContainer.dragStarted.subscribe(function (event) {
                     _this.dragStarted.emit(event);
                 });
+                _this.dragContainer.dragMoved.subscribe(function (event) {
+                    _this.dragMoved.emit(event);
+                });
                 _this.dragContainer.dragEnded.subscribe(function (event) {
                     _this.dragEnded.emit(event);
                     _this.computeRefs();
@@ -1306,7 +1326,7 @@
                 });
             });
         };
-        GanttUpper.prototype.trackBy = function (item, index) {
+        GanttUpper.prototype.trackBy = function (index, item) {
             return item.id || index;
         };
         GanttUpper.prototype.detectChanges = function () {
@@ -1324,13 +1344,31 @@
         GanttUpper.prototype.collapseAll = function () {
             this.expandGroups(false);
         };
+        GanttUpper.prototype.getGanttItem = function (id) {
+            return this.getGanttItems([id])[0] || null;
+        };
+        GanttUpper.prototype.getGanttItems = function (ids) {
+            var items = [];
+            if (this.items.length > 0) {
+                items = recursiveItems(this.items);
+            }
+            else {
+                items = flatten(this.groups.map(function (group) { return recursiveItems(group.items); }));
+            }
+            return items.filter(function (item) { return ids.includes(item.id); });
+        };
         return GanttUpper;
     }());
-    GanttUpper.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttUpper, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    GanttUpper.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.2", type: GanttUpper, inputs: { originItems: ["items", "originItems"], originGroups: ["groups", "originGroups"], viewType: "viewType", start: "start", end: "end", showTodayLine: "showTodayLine", draggable: "draggable", styles: "styles", viewOptions: "viewOptions", disabledLoadOnScroll: "disabledLoadOnScroll" }, outputs: { loadOnScroll: "loadOnScroll", dragStarted: "dragStarted", dragEnded: "dragEnded", barClick: "barClick" }, host: { properties: { "class.gantt": "this.ganttClass" } }, queries: [{ propertyName: "barTemplate", first: true, predicate: ["bar"], descendants: true, static: true }, { propertyName: "rangeTemplate", first: true, predicate: ["range"], descendants: true, static: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], descendants: true, static: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ["groupHeader"], descendants: true, static: true }], ngImport: i0__namespace });
+    GanttUpper.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttUpper, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }, { token: GANTT_GLOBAL_CONFIG }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    GanttUpper.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.2", type: GanttUpper, inputs: { originItems: ["items", "originItems"], originGroups: ["groups", "originGroups"], viewType: "viewType", start: "start", end: "end", showTodayLine: "showTodayLine", draggable: "draggable", styles: "styles", viewOptions: "viewOptions", disabledLoadOnScroll: "disabledLoadOnScroll" }, outputs: { loadOnScroll: "loadOnScroll", dragStarted: "dragStarted", dragMoved: "dragMoved", dragEnded: "dragEnded", barClick: "barClick" }, host: { properties: { "class.gantt": "this.ganttClass" } }, queries: [{ propertyName: "barTemplate", first: true, predicate: ["bar"], descendants: true, static: true }, { propertyName: "rangeTemplate", first: true, predicate: ["range"], descendants: true, static: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], descendants: true, static: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ["groupHeader"], descendants: true, static: true }], ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttUpper, decorators: [{
                 type: i0.Directive
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.NgZone }]; }, propDecorators: { originItems: [{
+            }], ctorParameters: function () {
+            return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.NgZone }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [GANTT_GLOBAL_CONFIG]
+                        }] }];
+        }, propDecorators: { originItems: [{
                     type: i0.Input,
                     args: ['items']
                 }], originGroups: [{
@@ -1356,6 +1394,8 @@
                     type: i0.Output
                 }], dragStarted: [{
                     type: i0.Output
+                }], dragMoved: [{
+                    type: i0.Output
                 }], dragEnded: [{
                     type: i0.Output
                 }], barClick: [{
@@ -1428,7 +1468,7 @@
         return NgxGanttTableComponent;
     }());
     NgxGanttTableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttTableComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NgxGanttTableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: NgxGanttTableComponent, selector: "ngx-gantt-table", outputs: { columnChanges: "columnChanges" }, ngImport: i0__namespace, template: '', isInline: true });
+    NgxGanttTableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: NgxGanttTableComponent, selector: "ngx-gantt-table", outputs: { columnChanges: "columnChanges" }, queries: [{ propertyName: "rowBeforeTemplate", first: true, predicate: ["rowBeforeSlot"], descendants: true, static: true }, { propertyName: "rowAfterTemplate", first: true, predicate: ["rowAfterSlot"], descendants: true, static: true }], ngImport: i0__namespace, template: '', isInline: true });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttTableComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1437,6 +1477,12 @@
                     }]
             }], ctorParameters: function () { return []; }, propDecorators: { columnChanges: [{
                     type: i0.Output
+                }], rowBeforeTemplate: [{
+                    type: i0.ContentChild,
+                    args: ['rowBeforeSlot', { static: true }]
+                }], rowAfterTemplate: [{
+                    type: i0.ContentChild,
+                    args: ['rowAfterSlot', { static: true }]
                 }] } });
 
     var GANTT_ABSTRACT_TOKEN = new i0.InjectionToken('gantt-abstract-token');
@@ -1654,10 +1700,13 @@
         GanttTableComponent.prototype.hideAuxiliaryLine = function () {
             this.draglineElementRef.nativeElement.style.display = 'none';
         };
+        GanttTableComponent.prototype.trackBy = function (index, item) {
+            return item.id || index;
+        };
         return GanttTableComponent;
     }());
     GanttTableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttTableComponent, deps: [{ token: GANTT_ABSTRACT_TOKEN }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    GanttTableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: GanttTableComponent, selector: "gantt-table", inputs: { groups: "groups", items: "items", columns: "columns", groupTemplate: "groupTemplate", emptyTemplate: "emptyTemplate" }, host: { properties: { "class.gantt-table": "this.ganttTableClass", "class.gantt-table-empty": "this.ganttTableEmptyClass" } }, viewQueries: [{ propertyName: "draglineElementRef", first: true, predicate: ["dragLine"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"gantt-table-header gantt-table-row\">\n  <div class=\"gantt-table-column\" *ngFor=\"let column of columnList; let i = index\" [style.width]=\"column.columnWidth\">\n    <ng-container *ngIf=\"column.headerTemplateRef; else default\" [ngTemplateOutlet]=\"column.headerTemplateRef\"></ng-container>\n    <ng-template #default>\n      {{ column.name }}\n    </ng-template>\n    <div\n      class=\"gantt-table-drag-trigger\"\n      cdkDrag\n      cdkDragLockAxis=\"x\"\n      cdkDragBoundary=\".gantt\"\n      (cdkDragMoved)=\"dragMoved($event, column)\"\n      (cdkDragStarted)=\"dragStarted($event)\"\n      (cdkDragEnded)=\"columnDragEnded($event, column)\"\n    ></div>\n  </div>\n</div>\n<div class=\"gantt-table-body\">\n  <ng-container *ngIf=\"!groups.length && !items.length\">\n    <ng-container *ngIf=\"!emptyTemplate\">\n      <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n      <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n    </ng-container>\n    <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"groups && groups.length > 0; else itemsTemplate\">\n    <ng-container *ngFor=\"let group of groups\">\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__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "isGanttRangeItem": IsGanttRangeItemPipe } });
+    GanttTableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: GanttTableComponent, selector: "gantt-table", inputs: { groups: "groups", items: "items", columns: "columns", groupTemplate: "groupTemplate", emptyTemplate: "emptyTemplate", rowBeforeTemplate: "rowBeforeTemplate", rowAfterTemplate: "rowAfterTemplate" }, host: { properties: { "class.gantt-table": "this.ganttTableClass", "class.gantt-table-empty": "this.ganttTableEmptyClass" } }, viewQueries: [{ propertyName: "draglineElementRef", first: true, predicate: ["dragLine"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"gantt-table-header gantt-table-row\">\n  <div class=\"gantt-table-column\" *ngFor=\"let column of columnList; let i = index\" [style.width]=\"column.columnWidth\">\n    <ng-container *ngIf=\"column.headerTemplateRef; else default\" [ngTemplateOutlet]=\"column.headerTemplateRef\"></ng-container>\n    <ng-template #default>\n      {{ column.name }}\n    </ng-template>\n    <div\n      class=\"gantt-table-drag-trigger\"\n      cdkDrag\n      cdkDragLockAxis=\"x\"\n      cdkDragBoundary=\".gantt\"\n      (cdkDragMoved)=\"dragMoved($event, column)\"\n      (cdkDragStarted)=\"dragStarted($event)\"\n      (cdkDragEnded)=\"columnDragEnded($event, column)\"\n    ></div>\n  </div>\n</div>\n<div class=\"gantt-table-body\">\n  <ng-container *ngIf=\"!groups.length && !items.length\">\n    <ng-container *ngIf=\"!emptyTemplate\">\n      <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n      <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n    </ng-container>\n    <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"groups && groups.length > 0; else itemsTemplate\">\n    <ng-container *ngFor=\"let group of groups; trackBy: trackBy\">\n      <div class=\"gantt-table-group\" [ngClass]=\"group.class\">\n        <div class=\"gantt-table-group-title\" [class.expanded]=\"group.expanded\" (click)=\"expandGroup(group)\">\n          <gantt-icon class=\"expand-icon\" [iconName]=\"group.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n          <ng-container *ngIf=\"groupTemplate; else default\">\n            <ng-template\n              [ngTemplateOutlet]=\"groupTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: group.origin, group: group.origin }\"\n            ></ng-template>\n          </ng-container>\n          <ng-template #default>\n            <span class=\"group-title\">{{ group.title }}</span>\n          </ng-template>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"group.expanded\">\n        <ng-template\n          [ngTemplateOutlet]=\"ganttItems\"\n          [ngTemplateOutletContext]=\"{ group: group, items: group.items, level: 0 }\"\n        ></ng-template>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div\n  class=\"gantt-table-drag-trigger\"\n  cdkDrag\n  cdkDragLockAxis=\"x\"\n  cdkDragBoundary=\".gantt\"\n  (cdkDragMoved)=\"dragMoved($event)\"\n  (cdkDragStarted)=\"dragStarted($event)\"\n  (cdkDragEnded)=\"tableDragEnded($event)\"\n></div>\n\n<div #dragLine class=\"gantt-table-drag-auxiliary-line\"></div>\n\n<ng-template #itemsTemplate>\n  <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: items, level: 0 }\"></ng-template>\n</ng-template>\n\n<ng-template #ganttItems let-group=\"group\" let-items=\"items\" let-level=\"level\">\n  <ng-container *ngFor=\"let item of items; trackBy: trackBy\">\n    <div\n      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__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "isGanttRangeItem": IsGanttRangeItemPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttTableComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1679,6 +1728,10 @@
                     type: i0.Input
                 }], emptyTemplate: [{
                     type: i0.Input
+                }], rowBeforeTemplate: [{
+                    type: i0.Input
+                }], rowAfterTemplate: [{
+                    type: i0.Input
                 }], draglineElementRef: [{
                     type: i0.ViewChild,
                     args: ['dragLine', { static: true }]
@@ -1795,6 +1848,7 @@
     var GanttDragContainer = /** @class */ (function () {
         function GanttDragContainer() {
             this.dragStarted = new i0.EventEmitter();
+            this.dragMoved = new i0.EventEmitter();
             this.dragEnded = new i0.EventEmitter();
             this.linkDragStarted = new i0.EventEmitter();
             this.linkDragEntered = new i0.EventEmitter();
@@ -2033,7 +2087,7 @@
         };
         GanttCalendarComponent.prototype.ngAfterViewInit = function () { };
         GanttCalendarComponent.prototype.ngOnChanges = function (changes) { };
-        GanttCalendarComponent.prototype.trackBy = function (point, index) {
+        GanttCalendarComponent.prototype.trackBy = function (index, point) {
             return point.text || index;
         };
         GanttCalendarComponent.prototype.ngOnDestroy = function () {
@@ -2548,6 +2602,8 @@
                 var start = _this.ganttUpper.view.getDateByXPoint(x);
                 var end = start.addDays(days);
                 _this.openDragBackdrop(_this.barElement, _this.ganttUpper.view.getDateByXPoint(x), end);
+                _this.item.updateDate(start, end);
+                _this.dragContainer.dragMoved.emit({ item: _this.item.origin });
             });
             dragRef.ended.subscribe(function (event) {
                 var days = dateFns.differenceInCalendarDays(_this.item.end.value, _this.item.start.value);
@@ -2583,6 +2639,7 @@
                             _this.barElement.style.width = width + 'px';
                             _this.barElement.style.left = x + 'px';
                             _this.openDragBackdrop(_this.barElement, _this.ganttUpper.view.getDateByXPoint(x), _this.ganttUpper.view.getDateByXPoint(x + width));
+                            _this.item.updateDate(_this.ganttUpper.view.getDateByXPoint(x), _this.item.end);
                         }
                     }
                     else {
@@ -2591,7 +2648,9 @@
                             _this.barElement.style.width = width + 'px';
                             _this.openDragBackdrop(_this.barElement, _this.ganttUpper.view.getDateByXPoint(_this.item.refs.x), _this.ganttUpper.view.getDateByXPoint(_this.item.refs.x + width));
                         }
+                        _this.item.updateDate(_this.item.start, _this.ganttUpper.view.getDateByXPoint(_this.item.refs.x + width));
                     }
+                    _this.dragContainer.dragMoved.emit({ item: _this.item.origin });
                     event.source.reset();
                 });
                 dragRef.ended.subscribe(function (event) {
@@ -2847,7 +2906,7 @@
             this.ganttMainClass = true;
         }
         GanttMainComponent.prototype.ngOnInit = function () { };
-        GanttMainComponent.prototype.trackBy = function (item, index) {
+        GanttMainComponent.prototype.trackBy = function (index, item) {
             return item.id || index;
         };
         return GanttMainComponent;
@@ -2888,8 +2947,8 @@
 
     var NgxGanttComponent = /** @class */ (function (_super) {
         __extends(NgxGanttComponent, _super);
-        function NgxGanttComponent(elementRef, cdr, ngZone) {
-            var _this = _super.call(this, elementRef, cdr, ngZone) || this;
+        function NgxGanttComponent(elementRef, cdr, ngZone, config) {
+            var _this = _super.call(this, elementRef, cdr, ngZone, config) || this;
             _this.maxLevel = 2;
             _this.linkDragStarted = new i0.EventEmitter();
             _this.linkDragEnded = new i0.EventEmitter();
@@ -2956,7 +3015,7 @@
         };
         return NgxGanttComponent;
     }(GanttUpper));
-    NgxGanttComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    NgxGanttComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }, { token: GANTT_GLOBAL_CONFIG }], target: i0__namespace.ɵɵFactoryTarget.Component });
     NgxGanttComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: NgxGanttComponent, selector: "ngx-gantt", inputs: { maxLevel: "maxLevel", async: "async", childrenResolve: "childrenResolve", linkable: "linkable" }, outputs: { linkDragStarted: "linkDragStarted", linkDragEnded: "linkDragEnded", lineClick: "lineClick" }, providers: [
             {
                 provide: GANTT_UPPER_TOKEN,
@@ -2966,7 +3025,7 @@
                 provide: GANTT_ABSTRACT_TOKEN,
                 useExisting: i0.forwardRef(function () { return NgxGanttComponent; })
             }
-        ], queries: [{ propertyName: "table", first: true, predicate: NgxGanttTableComponent, descendants: true }, { propertyName: "tableEmptyTemplate", first: true, predicate: ["tableEmpty"], descendants: true, static: true }, { propertyName: "columns", predicate: NgxGanttTableColumnComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, 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__namespace.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "table", first: true, predicate: NgxGanttTableComponent, descendants: true }, { propertyName: "tableEmptyTemplate", first: true, predicate: ["tableEmpty"], descendants: true, static: true }, { propertyName: "columns", predicate: NgxGanttTableColumnComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<ngx-gantt-root>\n  <ng-template #sideTemplate>\n    <gantt-table\n      [groups]=\"groups\"\n      [items]=\"items\"\n      [columns]=\"columns\"\n      [groupTemplate]=\"groupTemplate\"\n      [emptyTemplate]=\"tableEmptyTemplate\"\n      [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n      [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n    ></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__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2984,7 +3043,12 @@
                             }
                         ]
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.NgZone }]; }, propDecorators: { maxLevel: [{
+            }], ctorParameters: function () {
+            return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.NgZone }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [GANTT_GLOBAL_CONFIG]
+                        }] }];
+        }, propDecorators: { maxLevel: [{
                     type: i0.Input
                 }], async: [{
                     type: i0.Input
@@ -3035,7 +3099,12 @@
             NgxGanttRootComponent,
             NgxGanttBarComponent,
             NgxGanttRangeComponent] });
-    NgxGanttModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttModule, providers: [], imports: [[i2.CommonModule, i1.DragDropModule]] });
+    NgxGanttModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttModule, providers: [
+            {
+                provide: GANTT_GLOBAL_CONFIG,
+                useValue: defaultConfig
+            }
+        ], imports: [[i2.CommonModule, i1.DragDropModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
@@ -3065,7 +3134,12 @@
                             IsGanttBarItemPipe,
                             IsGanttCustomItemPipe
                         ],
-                        providers: []
+                        providers: [
+                            {
+                                provide: GANTT_GLOBAL_CONFIG,
+                                useValue: defaultConfig
+                            }
+                        ]
                     }]
             }] });
 
@@ -3269,6 +3343,7 @@
             return dateFns.startOfYear;
         }
     });
+    exports.GANTT_GLOBAL_CONFIG = GANTT_GLOBAL_CONFIG;
     exports.GANTT_UPPER_TOKEN = GANTT_UPPER_TOKEN;
     exports.GanttBarClickEvent = GanttBarClickEvent;
     exports.GanttDate = GanttDate;
@@ -3294,6 +3369,7 @@
     exports.NgxGanttRootComponent = NgxGanttRootComponent;
     exports.NgxGanttTableColumnComponent = NgxGanttTableColumnComponent;
     exports.NgxGanttTableComponent = NgxGanttTableComponent;
+    exports.defaultConfig = defaultConfig;
     exports.primaryDatePointTop = primaryDatePointTop;
     exports.secondaryDatePointTop = secondaryDatePointTop;