@worktile/gantt 16.0.0 → 16.1.0-next.0

package/fesm2022/worktile-gantt.mjs

@@ -491,14 +491,29 @@ class GanttView {
     }
     // 根据X坐标获取对应时间
     getDateByXPoint(x) {
-        const indexOfSecondaryDate = Math.max(Math.floor(x / this.getCellWidth()), 0);
-        const matchDate = this.secondaryDatePoints[Math.min(this.secondaryDatePoints.length - 1, indexOfSecondaryDate)];
-        const dayWidth = this.getDayOccupancyWidth(matchDate?.start);
+        let indexOfSecondaryDate;
+        let matchDate;
+        let dayWidth;
+        let day;
+        if (x >= 0) {
+            indexOfSecondaryDate = Math.floor(x / this.getCellWidth());
+            matchDate = this.secondaryDatePoints[Math.min(this.secondaryDatePoints.length - 1, indexOfSecondaryDate)];
+            dayWidth = this.getDayOccupancyWidth(matchDate?.start);
+        }
+        else {
+            const datePointTemp = this.secondaryDatePoints[0];
+            dayWidth = this.getDayOccupancyWidth(datePointTemp?.start);
+            day = Math.floor(x / dayWidth);
+            return datePointTemp?.start.addDays(day);
+        }
         if (dayWidth === this.getCellWidth()) {
             return matchDate?.start;
         }
         else {
-            const day = Math.floor((x % this.getCellWidth()) / dayWidth) + 1;
+            day = Math.floor((x % this.getCellWidth()) / dayWidth) + 1;
+            if (indexOfSecondaryDate > this.secondaryDatePoints.length - 1) {
+                day += (indexOfSecondaryDate - (this.secondaryDatePoints.length - 1)) * 30;
+            }
             if (this.getCellWidth() / dayWidth === 7) {
                 return matchDate?.start.addDays(day);
             }
@@ -905,6 +920,7 @@ class GanttUpper {
         this.viewType = GanttViewType.month;
         this.showTodayLine = true;
         this.showToolbar = false;
+        this.restrictToBounds = true;
         this.toolbarOptions = {
             viewTypes: [GanttViewType.day, GanttViewType.month, GanttViewType.year]
         };
@@ -1160,7 +1176,7 @@ class GanttUpper {
         this.changeView(this.viewType);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: GanttUpper, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: GANTT_GLOBAL_CONFIG }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.0", type: GanttUpper, inputs: { originItems: ["items", "originItems"], originGroups: ["groups", "originGroups"], originBaselineItems: ["baselineItems", "originBaselineItems"], viewType: "viewType", start: "start", end: "end", showTodayLine: "showTodayLine", draggable: "draggable", styles: "styles", showToolbar: "showToolbar", toolbarOptions: "toolbarOptions", viewOptions: "viewOptions", linkOptions: "linkOptions", disabledLoadOnScroll: "disabledLoadOnScroll", selectable: "selectable", multiple: "multiple" }, outputs: { loadOnScroll: "loadOnScroll", dragStarted: "dragStarted", dragMoved: "dragMoved", dragEnded: "dragEnded", barClick: "barClick", viewChange: "viewChange", expandChange: "expandChange" }, 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 }, { propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.0", type: GanttUpper, inputs: { originItems: ["items", "originItems"], originGroups: ["groups", "originGroups"], originBaselineItems: ["baselineItems", "originBaselineItems"], viewType: "viewType", start: "start", end: "end", showTodayLine: "showTodayLine", draggable: "draggable", styles: "styles", showToolbar: "showToolbar", restrictToBounds: "restrictToBounds", toolbarOptions: "toolbarOptions", viewOptions: "viewOptions", linkOptions: "linkOptions", disabledLoadOnScroll: "disabledLoadOnScroll", selectable: "selectable", multiple: "multiple" }, outputs: { loadOnScroll: "loadOnScroll", dragStarted: "dragStarted", dragMoved: "dragMoved", dragEnded: "dragEnded", barClick: "barClick", viewChange: "viewChange", expandChange: "expandChange" }, 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: "baselineTemplate", first: true, predicate: ["baseline"], descendants: true, static: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], descendants: true, static: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ["groupHeader"], descendants: true, static: true }, { propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: GanttUpper, decorators: [{
             type: Directive
@@ -1190,6 +1206,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
                 type: Input
             }], showToolbar: [{
                 type: Input
+            }], restrictToBounds: [{
+                type: Input
             }], toolbarOptions: [{
                 type: Input
             }], viewOptions: [{
@@ -1225,6 +1243,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
             }], itemTemplate: [{
                 type: ContentChild,
                 args: ['item', { static: true }]
+            }], baselineTemplate: [{
+                type: ContentChild,
+                args: ['baseline', { static: true }]
             }], groupTemplate: [{
                 type: ContentChild,
                 args: ['group', { static: true }]
@@ -2714,7 +2735,9 @@ class GanttBarDrag {
     createBarDrag() {
         const dragRef = this.createDragRef(this.barElement);
         dragRef.lockAxis = 'x';
-        dragRef.withBoundaryElement(this.dom.mainItems);
+        if (this.ganttUpper.restrictToBounds) {
+            dragRef.withBoundaryElement(this.dom.mainItems);
+        }
         dragRef.started.subscribe(() => {
             this.setDraggingStyles();
             this.containerScrollLeft = this.dom.mainContainer.scrollLeft;
@@ -3067,6 +3090,9 @@ class GanttBarDrag {
         const itemEnd = end.getUnixTime();
         const viewStart = this.ganttUpper.view.start.getUnixTime();
         const viewEnd = this.ganttUpper.view.end.getUnixTime();
+        if (!this.ganttUpper.restrictToBounds) {
+            return true;
+        }
         if (itemStart < viewStart || itemEnd > viewEnd) {
             return false;
         }
@@ -3328,16 +3354,18 @@ class NgxGanttBaselineComponent {
         itemElement.style.width = this.baselineItem.refs.width + 'px';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgxGanttBaselineComponent, deps: [{ token: i0.ElementRef }, { token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgxGanttBaselineComponent, selector: "ngx-gantt-baseline,gantt-baseline", inputs: { baselineItem: "baselineItem" }, host: { properties: { "class.gantt-baseline": "this.ganttBaselineClass" } }, ngImport: i0, template: "<div #content *ngIf=\"baselineItem\" class=\"baseline-content\"></div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgxGanttBaselineComponent, selector: "ngx-gantt-baseline,gantt-baseline", inputs: { baselineItem: "baselineItem", template: "template" }, host: { properties: { "class.gantt-baseline": "this.ganttBaselineClass" } }, ngImport: i0, template: "<div #content *ngIf=\"baselineItem\" class=\"baseline-content\">\n  <ng-template\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{ item: baselineItem.origin, refs: baselineItem.refs }\"\n  ></ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgxGanttBaselineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-gantt-baseline,gantt-baseline', template: "<div #content *ngIf=\"baselineItem\" class=\"baseline-content\"></div>\n" }]
+            args: [{ selector: 'ngx-gantt-baseline,gantt-baseline', template: "<div #content *ngIf=\"baselineItem\" class=\"baseline-content\">\n  <ng-template\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{ item: baselineItem.origin, refs: baselineItem.refs }\"\n  ></ng-template>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: GanttUpper, decorators: [{
                     type: Inject,
                     args: [GANTT_UPPER_TOKEN]
                 }] }]; }, propDecorators: { baselineItem: [{
                 type: Input
+            }], template: [{
+                type: Input
             }], ganttBaselineClass: [{
                 type: HostBinding,
                 args: ['class.gantt-baseline']
@@ -3354,11 +3382,11 @@ class GanttMainComponent {
         return item.id || index;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: GanttMainComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: GanttMainComponent, selector: "gantt-main", inputs: { viewportItems: "viewportItems", flatItems: "flatItems", 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 [flatItems]=\"flatItems\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay>\n<div class=\"gantt-main-groups\" [style.width.px]=\"ganttUpper.view.width\">\n  <ng-container *ngFor=\"let data of viewportItems; trackBy: trackBy\">\n    <div class=\"gantt-group\" [ngClass]=\"data.class\" *ngIf=\"data.items\">\n      <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: data }\"></ng-template>\n    </div>\n    <div\n      *ngIf=\"!data.items\"\n      class=\"gantt-item\"\n      [style.height.px]=\"ganttUpper.styles.lineHeight\"\n      [class.gantt-main-item-active]=\"ganttUpper.isSelected(data.id)\"\n    >\n      <ng-container *ngIf=\"data.type | isGanttCustomItem\">\n        <ng-template\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{\n            item: data.origin,\n            refs: data.refs,\n            baseline: ganttUpper.baselineItemsMap[data.id]?.origin,\n            baselineRefs: ganttUpper.baselineItemsMap[data.id]?.refs\n          }\"\n        >\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngIf=\"(data.type | isGanttRangeItem) || (data.type | isGanttBarItem)\">\n        <gantt-range *ngIf=\"data.type | isGanttRangeItem\" [template]=\"rangeTemplate\" [item]=\"data\"></gantt-range>\n        <gantt-bar *ngIf=\"data.type | isGanttBarItem\" [item]=\"data\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n        <gantt-baseline *ngIf=\"ganttUpper.baselineItemsMap[data.id]\" [baselineItem]=\"ganttUpper.baselineItemsMap[data.id]\"></gantt-baseline>\n      </ng-container>\n    </div>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GanttLinksComponent, selector: "gantt-links-overlay", inputs: ["flatItems"], outputs: ["lineClick"] }, { kind: "component", type: NgxGanttBarComponent, selector: "ngx-gantt-bar,gantt-bar", outputs: ["barClick"] }, { kind: "component", type: NgxGanttRangeComponent, selector: "ngx-gantt-range,gantt-range" }, { kind: "component", type: NgxGanttBaselineComponent, selector: "ngx-gantt-baseline,gantt-baseline", inputs: ["baselineItem"] }, { kind: "pipe", type: IsGanttRangeItemPipe, name: "isGanttRangeItem" }, { kind: "pipe", type: IsGanttBarItemPipe, name: "isGanttBarItem" }, { kind: "pipe", type: IsGanttCustomItemPipe, name: "isGanttCustomItem" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: GanttMainComponent, selector: "gantt-main", inputs: { viewportItems: "viewportItems", flatItems: "flatItems", groupHeaderTemplate: "groupHeaderTemplate", itemTemplate: "itemTemplate", barTemplate: "barTemplate", rangeTemplate: "rangeTemplate", baselineTemplate: "baselineTemplate" }, outputs: { barClick: "barClick", lineClick: "lineClick" }, host: { properties: { "class.gantt-main-container": "this.ganttMainClass" } }, ngImport: i0, template: "<gantt-links-overlay [flatItems]=\"flatItems\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay>\n<div class=\"gantt-main-groups\" [style.width.px]=\"ganttUpper.view.width\">\n  <ng-container *ngFor=\"let data of viewportItems; trackBy: trackBy\">\n    <div class=\"gantt-group\" [ngClass]=\"data.class\" *ngIf=\"data.items\">\n      <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: data }\"></ng-template>\n    </div>\n    <div\n      *ngIf=\"!data.items\"\n      class=\"gantt-item\"\n      [style.height.px]=\"ganttUpper.styles.lineHeight\"\n      [class.gantt-main-item-active]=\"ganttUpper.isSelected(data.id)\"\n    >\n      <ng-container *ngIf=\"data.type | isGanttCustomItem\">\n        <ng-template\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{\n            item: data.origin,\n            refs: data.refs,\n            baseline: ganttUpper.baselineItemsMap[data.id]?.origin,\n            baselineRefs: ganttUpper.baselineItemsMap[data.id]?.refs\n          }\"\n        >\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngIf=\"(data.type | isGanttRangeItem) || (data.type | isGanttBarItem)\">\n        <gantt-range *ngIf=\"data.type | isGanttRangeItem\" [template]=\"rangeTemplate\" [item]=\"data\"></gantt-range>\n        <gantt-bar *ngIf=\"data.type | isGanttBarItem\" [item]=\"data\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n        <gantt-baseline\n          *ngIf=\"ganttUpper.baselineItemsMap[data.id]\"\n          [baselineItem]=\"ganttUpper.baselineItemsMap[data.id]\"\n          [template]=\"baselineTemplate\"\n        ></gantt-baseline>\n      </ng-container>\n    </div>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GanttLinksComponent, selector: "gantt-links-overlay", inputs: ["flatItems"], outputs: ["lineClick"] }, { kind: "component", type: NgxGanttBarComponent, selector: "ngx-gantt-bar,gantt-bar", outputs: ["barClick"] }, { kind: "component", type: NgxGanttRangeComponent, selector: "ngx-gantt-range,gantt-range" }, { kind: "component", type: NgxGanttBaselineComponent, selector: "ngx-gantt-baseline,gantt-baseline", inputs: ["baselineItem", "template"] }, { kind: "pipe", type: IsGanttRangeItemPipe, name: "isGanttRangeItem" }, { kind: "pipe", type: IsGanttBarItemPipe, name: "isGanttBarItem" }, { kind: "pipe", type: IsGanttCustomItemPipe, name: "isGanttCustomItem" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: GanttMainComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gantt-main', template: "<gantt-links-overlay [flatItems]=\"flatItems\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay>\n<div class=\"gantt-main-groups\" [style.width.px]=\"ganttUpper.view.width\">\n  <ng-container *ngFor=\"let data of viewportItems; trackBy: trackBy\">\n    <div class=\"gantt-group\" [ngClass]=\"data.class\" *ngIf=\"data.items\">\n      <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: data }\"></ng-template>\n    </div>\n    <div\n      *ngIf=\"!data.items\"\n      class=\"gantt-item\"\n      [style.height.px]=\"ganttUpper.styles.lineHeight\"\n      [class.gantt-main-item-active]=\"ganttUpper.isSelected(data.id)\"\n    >\n      <ng-container *ngIf=\"data.type | isGanttCustomItem\">\n        <ng-template\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{\n            item: data.origin,\n            refs: data.refs,\n            baseline: ganttUpper.baselineItemsMap[data.id]?.origin,\n            baselineRefs: ganttUpper.baselineItemsMap[data.id]?.refs\n          }\"\n        >\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngIf=\"(data.type | isGanttRangeItem) || (data.type | isGanttBarItem)\">\n        <gantt-range *ngIf=\"data.type | isGanttRangeItem\" [template]=\"rangeTemplate\" [item]=\"data\"></gantt-range>\n        <gantt-bar *ngIf=\"data.type | isGanttBarItem\" [item]=\"data\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n        <gantt-baseline *ngIf=\"ganttUpper.baselineItemsMap[data.id]\" [baselineItem]=\"ganttUpper.baselineItemsMap[data.id]\"></gantt-baseline>\n      </ng-container>\n    </div>\n  </ng-container>\n</div>\n" }]
+            args: [{ selector: 'gantt-main', template: "<gantt-links-overlay [flatItems]=\"flatItems\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay>\n<div class=\"gantt-main-groups\" [style.width.px]=\"ganttUpper.view.width\">\n  <ng-container *ngFor=\"let data of viewportItems; trackBy: trackBy\">\n    <div class=\"gantt-group\" [ngClass]=\"data.class\" *ngIf=\"data.items\">\n      <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: data }\"></ng-template>\n    </div>\n    <div\n      *ngIf=\"!data.items\"\n      class=\"gantt-item\"\n      [style.height.px]=\"ganttUpper.styles.lineHeight\"\n      [class.gantt-main-item-active]=\"ganttUpper.isSelected(data.id)\"\n    >\n      <ng-container *ngIf=\"data.type | isGanttCustomItem\">\n        <ng-template\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{\n            item: data.origin,\n            refs: data.refs,\n            baseline: ganttUpper.baselineItemsMap[data.id]?.origin,\n            baselineRefs: ganttUpper.baselineItemsMap[data.id]?.refs\n          }\"\n        >\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngIf=\"(data.type | isGanttRangeItem) || (data.type | isGanttBarItem)\">\n        <gantt-range *ngIf=\"data.type | isGanttRangeItem\" [template]=\"rangeTemplate\" [item]=\"data\"></gantt-range>\n        <gantt-bar *ngIf=\"data.type | isGanttBarItem\" [item]=\"data\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n        <gantt-baseline\n          *ngIf=\"ganttUpper.baselineItemsMap[data.id]\"\n          [baselineItem]=\"ganttUpper.baselineItemsMap[data.id]\"\n          [template]=\"baselineTemplate\"\n        ></gantt-baseline>\n      </ng-container>\n    </div>\n  </ng-container>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: GanttUpper, decorators: [{
                     type: Inject,
                     args: [GANTT_UPPER_TOKEN]
@@ -3374,6 +3402,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
                 type: Input
             }], rangeTemplate: [{
                 type: Input
+            }], baselineTemplate: [{
+                type: Input
             }], barClick: [{
                 type: Output
             }], lineClick: [{
@@ -4035,7 +4065,7 @@ class NgxGanttComponent extends GanttUpper {
                 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: "footerTemplate", first: true, predicate: ["footer"], descendants: true, static: true }, { propertyName: "columns", predicate: NgxGanttTableColumnComponent, descendants: true }], viewQueries: [{ propertyName: "ganttRoot", first: true, predicate: ["ganttRoot"], descendants: true }, { propertyName: "virtualScroll", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ngx-gantt-root #ganttRoot>\n  <div class=\"gantt-header\">\n    <gantt-table-header #tableHeader [columns]=\"columns\"></gantt-table-header>\n    <div class=\"gantt-container-header\">\n      <gantt-calendar-header [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"></gantt-calendar-header>\n    </div>\n  </div>\n  <gantt-loader *ngIf=\"loading\"></gantt-loader>\n\n  <cdk-virtual-scroll-viewport\n    class=\"gantt-virtual-scroll-viewport\"\n    [ngClass]=\"{\n      'gantt-normal-viewport': !virtualScrollEnabled,\n      'gantt-scroll-container': virtualScrollEnabled,\n      'with-footer': table?.tableFooterTemplate || footerTemplate\n    }\"\n    [itemSize]=\"styles.lineHeight\"\n    [minBufferPx]=\"styles.lineHeight * 10\"\n    [maxBufferPx]=\"styles.lineHeight * 20\"\n    (scrolledIndexChange)=\"scrolledIndexChange($event)\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of flatItems; trackBy: trackBy\"></ng-container>\n    <div class=\"gantt-side\" [style.width.px]=\"tableHeader.tableWidth + 1\" [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\">\n      <div class=\"gantt-side-container\">\n        <div class=\"gantt-table\">\n          <gantt-table-body\n            [flatItems]=\"flatItems\"\n            [viewportItems]=\"viewportItems\"\n            [columns]=\"columns\"\n            [groupTemplate]=\"groupTemplate\"\n            [emptyTemplate]=\"table.tableEmptyTemplate || tableEmptyTemplate\"\n            [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n            [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n            [draggable]=\"table.draggable\"\n            [dropEnterPredicate]=\"table.dropEnterPredicate\"\n            (dragDropped)=\"table.dragDropped.emit($event)\"\n            (dragStarted)=\"table.dragStarted.emit($event)\"\n            (dragEnded)=\"table.dragEnded.emit($event)\"\n            (itemClick)=\"selectItem($event)\"\n          >\n          </gantt-table-body>\n        </div>\n      </div>\n    </div>\n    <div class=\"gantt-container\">\n      <gantt-calendar-grid\n        [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"\n        [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n      ></gantt-calendar-grid>\n      <div class=\"gantt-main\">\n        <gantt-main\n          [flatItems]=\"flatItems\"\n          [viewportItems]=\"viewportItems\"\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      </div>\n    </div>\n  </cdk-virtual-scroll-viewport>\n\n  <gantt-drag-backdrop [style.left.px]=\"tableHeader.tableWidth + 1\"></gantt-drag-backdrop>\n\n  <div\n    class=\"gantt-scrollbar\"\n    [style.height.px]=\"ganttRoot.horizontalScrollbarHeight + 1\"\n    [style.right.px]=\"ganttRoot.verticalScrollbarWidth\"\n  >\n    <div\n      [style.width.px]=\"tableHeader.tableWidth\"\n      class=\"gantt-table-scrollbar\"\n      [class.with-scrollbar]=\"ganttRoot.horizontalScrollbarHeight\"\n    ></div>\n    <div class=\"gantt-main-scrollbar\">\n      <div class=\"h-100\" [style.width.px]=\"view.width\"></div>\n    </div>\n  </div>\n\n  <div class=\"gantt-footer\" [style.right.px]=\"ganttRoot.verticalScrollbarWidth\" [style.bottom.px]=\"ganttRoot.horizontalScrollbarHeight\">\n    <div class=\"gantt-table-footer\" [style.width.px]=\"tableHeader.tableWidth + 1\" *ngIf=\"table?.tableFooterTemplate\">\n      <ng-template [ngTemplateOutlet]=\"table?.tableFooterTemplate\" [ngTemplateOutletContext]=\"{ columns: columns }\"> </ng-template>\n    </div>\n    <div class=\"gantt-container-footer\" *ngIf=\"footerTemplate\">\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\"> </ng-template>\n    </div>\n  </div>\n</ngx-gantt-root>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: GanttTableHeaderComponent, selector: "gantt-table-header", inputs: ["columns"] }, { kind: "component", type: GanttTableBodyComponent, selector: "gantt-table-body", inputs: ["viewportItems", "flatItems", "columns", "groupTemplate", "emptyTemplate", "rowBeforeTemplate", "rowAfterTemplate", "draggable", "dropEnterPredicate"], outputs: ["dragDropped", "dragStarted", "dragEnded", "itemClick"] }, { kind: "component", type: GanttMainComponent, selector: "gantt-main", inputs: ["viewportItems", "flatItems", "groupHeaderTemplate", "itemTemplate", "barTemplate", "rangeTemplate"], outputs: ["barClick", "lineClick"] }, { kind: "component", type: GanttCalendarHeaderComponent, selector: "gantt-calendar-header" }, { kind: "component", type: GanttCalendarGridComponent, selector: "gantt-calendar-grid" }, { kind: "component", type: GanttLoaderComponent, selector: "gantt-loader" }, { kind: "component", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }, { kind: "component", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: ["sideWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "table", first: true, predicate: NgxGanttTableComponent, descendants: true }, { propertyName: "tableEmptyTemplate", first: true, predicate: ["tableEmpty"], descendants: true, static: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true, static: true }, { propertyName: "columns", predicate: NgxGanttTableColumnComponent, descendants: true }], viewQueries: [{ propertyName: "ganttRoot", first: true, predicate: ["ganttRoot"], descendants: true }, { propertyName: "virtualScroll", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ngx-gantt-root #ganttRoot>\n  <div class=\"gantt-header\">\n    <gantt-table-header #tableHeader [columns]=\"columns\"></gantt-table-header>\n    <div class=\"gantt-container-header\">\n      <gantt-calendar-header [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"></gantt-calendar-header>\n    </div>\n  </div>\n  <gantt-loader *ngIf=\"loading\"></gantt-loader>\n\n  <cdk-virtual-scroll-viewport\n    class=\"gantt-virtual-scroll-viewport\"\n    [ngClass]=\"{\n      'gantt-normal-viewport': !virtualScrollEnabled,\n      'gantt-scroll-container': virtualScrollEnabled,\n      'with-footer': table?.tableFooterTemplate || footerTemplate\n    }\"\n    [itemSize]=\"styles.lineHeight\"\n    [minBufferPx]=\"styles.lineHeight * 10\"\n    [maxBufferPx]=\"styles.lineHeight * 20\"\n    (scrolledIndexChange)=\"scrolledIndexChange($event)\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of flatItems; trackBy: trackBy\"></ng-container>\n    <div class=\"gantt-side\" [style.width.px]=\"tableHeader.tableWidth + 1\" [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\">\n      <div class=\"gantt-side-container\">\n        <div class=\"gantt-table\">\n          <gantt-table-body\n            [flatItems]=\"flatItems\"\n            [viewportItems]=\"viewportItems\"\n            [columns]=\"columns\"\n            [groupTemplate]=\"groupTemplate\"\n            [emptyTemplate]=\"table.tableEmptyTemplate || tableEmptyTemplate\"\n            [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n            [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n            [draggable]=\"table.draggable\"\n            [dropEnterPredicate]=\"table.dropEnterPredicate\"\n            (dragDropped)=\"table.dragDropped.emit($event)\"\n            (dragStarted)=\"table.dragStarted.emit($event)\"\n            (dragEnded)=\"table.dragEnded.emit($event)\"\n            (itemClick)=\"selectItem($event)\"\n          >\n          </gantt-table-body>\n        </div>\n      </div>\n    </div>\n    <div class=\"gantt-container\">\n      <gantt-calendar-grid\n        [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"\n        [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n      ></gantt-calendar-grid>\n      <div class=\"gantt-main\">\n        <gantt-main\n          [flatItems]=\"flatItems\"\n          [viewportItems]=\"viewportItems\"\n          [groupHeaderTemplate]=\"groupHeaderTemplate\"\n          [itemTemplate]=\"itemTemplate\"\n          [barTemplate]=\"barTemplate\"\n          [rangeTemplate]=\"rangeTemplate\"\n          [baselineTemplate]=\"baselineTemplate\"\n          (barClick)=\"barClick.emit($event)\"\n          (lineClick)=\"lineClick.emit($event)\"\n        >\n        </gantt-main>\n      </div>\n    </div>\n  </cdk-virtual-scroll-viewport>\n\n  <gantt-drag-backdrop [style.left.px]=\"tableHeader.tableWidth + 1\"></gantt-drag-backdrop>\n\n  <div\n    class=\"gantt-scrollbar\"\n    [style.height.px]=\"ganttRoot.horizontalScrollbarHeight + 1\"\n    [style.right.px]=\"ganttRoot.verticalScrollbarWidth\"\n  >\n    <div\n      [style.width.px]=\"tableHeader.tableWidth\"\n      class=\"gantt-table-scrollbar\"\n      [class.with-scrollbar]=\"ganttRoot.horizontalScrollbarHeight\"\n    ></div>\n    <div class=\"gantt-main-scrollbar\">\n      <div class=\"h-100\" [style.width.px]=\"view.width\"></div>\n    </div>\n  </div>\n\n  <div class=\"gantt-footer\" [style.right.px]=\"ganttRoot.verticalScrollbarWidth\" [style.bottom.px]=\"ganttRoot.horizontalScrollbarHeight\">\n    <div class=\"gantt-table-footer\" [style.width.px]=\"tableHeader.tableWidth + 1\" *ngIf=\"table?.tableFooterTemplate\">\n      <ng-template [ngTemplateOutlet]=\"table?.tableFooterTemplate\" [ngTemplateOutletContext]=\"{ columns: columns }\"> </ng-template>\n    </div>\n    <div class=\"gantt-container-footer\" *ngIf=\"footerTemplate\">\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\"> </ng-template>\n    </div>\n  </div>\n</ngx-gantt-root>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: GanttTableHeaderComponent, selector: "gantt-table-header", inputs: ["columns"] }, { kind: "component", type: GanttTableBodyComponent, selector: "gantt-table-body", inputs: ["viewportItems", "flatItems", "columns", "groupTemplate", "emptyTemplate", "rowBeforeTemplate", "rowAfterTemplate", "draggable", "dropEnterPredicate"], outputs: ["dragDropped", "dragStarted", "dragEnded", "itemClick"] }, { kind: "component", type: GanttMainComponent, selector: "gantt-main", inputs: ["viewportItems", "flatItems", "groupHeaderTemplate", "itemTemplate", "barTemplate", "rangeTemplate", "baselineTemplate"], outputs: ["barClick", "lineClick"] }, { kind: "component", type: GanttCalendarHeaderComponent, selector: "gantt-calendar-header" }, { kind: "component", type: GanttCalendarGridComponent, selector: "gantt-calendar-grid" }, { kind: "component", type: GanttLoaderComponent, selector: "gantt-loader" }, { kind: "component", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }, { kind: "component", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: ["sideWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgxGanttComponent, decorators: [{
             type: Component,
@@ -4048,7 +4078,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
                             provide: GANTT_ABSTRACT_TOKEN,
                             useExisting: forwardRef(() => NgxGanttComponent)
                         }
-                    ], template: "<ngx-gantt-root #ganttRoot>\n  <div class=\"gantt-header\">\n    <gantt-table-header #tableHeader [columns]=\"columns\"></gantt-table-header>\n    <div class=\"gantt-container-header\">\n      <gantt-calendar-header [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"></gantt-calendar-header>\n    </div>\n  </div>\n  <gantt-loader *ngIf=\"loading\"></gantt-loader>\n\n  <cdk-virtual-scroll-viewport\n    class=\"gantt-virtual-scroll-viewport\"\n    [ngClass]=\"{\n      'gantt-normal-viewport': !virtualScrollEnabled,\n      'gantt-scroll-container': virtualScrollEnabled,\n      'with-footer': table?.tableFooterTemplate || footerTemplate\n    }\"\n    [itemSize]=\"styles.lineHeight\"\n    [minBufferPx]=\"styles.lineHeight * 10\"\n    [maxBufferPx]=\"styles.lineHeight * 20\"\n    (scrolledIndexChange)=\"scrolledIndexChange($event)\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of flatItems; trackBy: trackBy\"></ng-container>\n    <div class=\"gantt-side\" [style.width.px]=\"tableHeader.tableWidth + 1\" [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\">\n      <div class=\"gantt-side-container\">\n        <div class=\"gantt-table\">\n          <gantt-table-body\n            [flatItems]=\"flatItems\"\n            [viewportItems]=\"viewportItems\"\n            [columns]=\"columns\"\n            [groupTemplate]=\"groupTemplate\"\n            [emptyTemplate]=\"table.tableEmptyTemplate || tableEmptyTemplate\"\n            [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n            [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n            [draggable]=\"table.draggable\"\n            [dropEnterPredicate]=\"table.dropEnterPredicate\"\n            (dragDropped)=\"table.dragDropped.emit($event)\"\n            (dragStarted)=\"table.dragStarted.emit($event)\"\n            (dragEnded)=\"table.dragEnded.emit($event)\"\n            (itemClick)=\"selectItem($event)\"\n          >\n          </gantt-table-body>\n        </div>\n      </div>\n    </div>\n    <div class=\"gantt-container\">\n      <gantt-calendar-grid\n        [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"\n        [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n      ></gantt-calendar-grid>\n      <div class=\"gantt-main\">\n        <gantt-main\n          [flatItems]=\"flatItems\"\n          [viewportItems]=\"viewportItems\"\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      </div>\n    </div>\n  </cdk-virtual-scroll-viewport>\n\n  <gantt-drag-backdrop [style.left.px]=\"tableHeader.tableWidth + 1\"></gantt-drag-backdrop>\n\n  <div\n    class=\"gantt-scrollbar\"\n    [style.height.px]=\"ganttRoot.horizontalScrollbarHeight + 1\"\n    [style.right.px]=\"ganttRoot.verticalScrollbarWidth\"\n  >\n    <div\n      [style.width.px]=\"tableHeader.tableWidth\"\n      class=\"gantt-table-scrollbar\"\n      [class.with-scrollbar]=\"ganttRoot.horizontalScrollbarHeight\"\n    ></div>\n    <div class=\"gantt-main-scrollbar\">\n      <div class=\"h-100\" [style.width.px]=\"view.width\"></div>\n    </div>\n  </div>\n\n  <div class=\"gantt-footer\" [style.right.px]=\"ganttRoot.verticalScrollbarWidth\" [style.bottom.px]=\"ganttRoot.horizontalScrollbarHeight\">\n    <div class=\"gantt-table-footer\" [style.width.px]=\"tableHeader.tableWidth + 1\" *ngIf=\"table?.tableFooterTemplate\">\n      <ng-template [ngTemplateOutlet]=\"table?.tableFooterTemplate\" [ngTemplateOutletContext]=\"{ columns: columns }\"> </ng-template>\n    </div>\n    <div class=\"gantt-container-footer\" *ngIf=\"footerTemplate\">\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\"> </ng-template>\n    </div>\n  </div>\n</ngx-gantt-root>\n" }]
+                    ], template: "<ngx-gantt-root #ganttRoot>\n  <div class=\"gantt-header\">\n    <gantt-table-header #tableHeader [columns]=\"columns\"></gantt-table-header>\n    <div class=\"gantt-container-header\">\n      <gantt-calendar-header [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"></gantt-calendar-header>\n    </div>\n  </div>\n  <gantt-loader *ngIf=\"loading\"></gantt-loader>\n\n  <cdk-virtual-scroll-viewport\n    class=\"gantt-virtual-scroll-viewport\"\n    [ngClass]=\"{\n      'gantt-normal-viewport': !virtualScrollEnabled,\n      'gantt-scroll-container': virtualScrollEnabled,\n      'with-footer': table?.tableFooterTemplate || footerTemplate\n    }\"\n    [itemSize]=\"styles.lineHeight\"\n    [minBufferPx]=\"styles.lineHeight * 10\"\n    [maxBufferPx]=\"styles.lineHeight * 20\"\n    (scrolledIndexChange)=\"scrolledIndexChange($event)\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of flatItems; trackBy: trackBy\"></ng-container>\n    <div class=\"gantt-side\" [style.width.px]=\"tableHeader.tableWidth + 1\" [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\">\n      <div class=\"gantt-side-container\">\n        <div class=\"gantt-table\">\n          <gantt-table-body\n            [flatItems]=\"flatItems\"\n            [viewportItems]=\"viewportItems\"\n            [columns]=\"columns\"\n            [groupTemplate]=\"groupTemplate\"\n            [emptyTemplate]=\"table.tableEmptyTemplate || tableEmptyTemplate\"\n            [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n            [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n            [draggable]=\"table.draggable\"\n            [dropEnterPredicate]=\"table.dropEnterPredicate\"\n            (dragDropped)=\"table.dragDropped.emit($event)\"\n            (dragStarted)=\"table.dragStarted.emit($event)\"\n            (dragEnded)=\"table.dragEnded.emit($event)\"\n            (itemClick)=\"selectItem($event)\"\n          >\n          </gantt-table-body>\n        </div>\n      </div>\n    </div>\n    <div class=\"gantt-container\">\n      <gantt-calendar-grid\n        [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"\n        [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n      ></gantt-calendar-grid>\n      <div class=\"gantt-main\">\n        <gantt-main\n          [flatItems]=\"flatItems\"\n          [viewportItems]=\"viewportItems\"\n          [groupHeaderTemplate]=\"groupHeaderTemplate\"\n          [itemTemplate]=\"itemTemplate\"\n          [barTemplate]=\"barTemplate\"\n          [rangeTemplate]=\"rangeTemplate\"\n          [baselineTemplate]=\"baselineTemplate\"\n          (barClick)=\"barClick.emit($event)\"\n          (lineClick)=\"lineClick.emit($event)\"\n        >\n        </gantt-main>\n      </div>\n    </div>\n  </cdk-virtual-scroll-viewport>\n\n  <gantt-drag-backdrop [style.left.px]=\"tableHeader.tableWidth + 1\"></gantt-drag-backdrop>\n\n  <div\n    class=\"gantt-scrollbar\"\n    [style.height.px]=\"ganttRoot.horizontalScrollbarHeight + 1\"\n    [style.right.px]=\"ganttRoot.verticalScrollbarWidth\"\n  >\n    <div\n      [style.width.px]=\"tableHeader.tableWidth\"\n      class=\"gantt-table-scrollbar\"\n      [class.with-scrollbar]=\"ganttRoot.horizontalScrollbarHeight\"\n    ></div>\n    <div class=\"gantt-main-scrollbar\">\n      <div class=\"h-100\" [style.width.px]=\"view.width\"></div>\n    </div>\n  </div>\n\n  <div class=\"gantt-footer\" [style.right.px]=\"ganttRoot.verticalScrollbarWidth\" [style.bottom.px]=\"ganttRoot.horizontalScrollbarHeight\">\n    <div class=\"gantt-table-footer\" [style.width.px]=\"tableHeader.tableWidth + 1\" *ngIf=\"table?.tableFooterTemplate\">\n      <ng-template [ngTemplateOutlet]=\"table?.tableFooterTemplate\" [ngTemplateOutletContext]=\"{ columns: columns }\"> </ng-template>\n    </div>\n    <div class=\"gantt-container-footer\" *ngIf=\"footerTemplate\">\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\"> </ng-template>\n    </div>\n  </div>\n</ngx-gantt-root>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$1.ViewportRuler }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [GANTT_GLOBAL_CONFIG]