@worktile/gantt 12.2.1 → 12.2.2

package/fesm2015/worktile-gantt.js

@@ -1,17 +1,16 @@
 import * as i0 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 { InjectionToken, EventEmitter, Directive, Inject, Input, Output, ContentChild, HostBinding, Component, Pipe, ViewChild, PLATFORM_ID, Injectable, ElementRef, Optional, SkipSelf, ViewChildren, forwardRef, ChangeDetectionStrategy, ContentChildren, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { take, skip, takeUntil, startWith, map, pairwise, auditTime, debounceTime, finalize } from 'rxjs/operators';
-import { BehaviorSubject, Subject, merge, fromEvent } from 'rxjs';
+import { isPlatformServer, CommonModule } from '@angular/common';
+import { take, takeUntil, skip, map, pairwise, auditTime, startWith, debounceTime, switchMap, finalize } from 'rxjs/operators';
+import { BehaviorSubject, Subject, from, merge, fromEvent, Observable, EMPTY } from 'rxjs';
 import { fromUnixTime, getWeek, getDaysInMonth, differenceInCalendarDays, setDate, addSeconds, addMinutes, addHours, addDays, addWeeks, addMonths, addQuarters, addYears, startOfDay, startOfWeek, startOfMonth, startOfQuarter, startOfYear, endOfDay, endOfWeek, endOfMonth, endOfQuarter, endOfYear, getUnixTime, format, isWeekend, isToday, differenceInDays, differenceInCalendarQuarters, eachMonthOfInterval, eachYearOfInterval, eachWeekOfInterval, eachDayOfInterval, differenceInCalendarYears } from 'date-fns';
 export { addDays, addHours, addMinutes, addMonths, addQuarters, addSeconds, addWeeks, addYears, differenceInCalendarDays, differenceInCalendarQuarters, differenceInDays, eachDayOfInterval, eachMonthOfInterval, eachWeekOfInterval, endOfDay, endOfMonth, endOfQuarter, endOfWeek, endOfYear, format, fromUnixTime, getDaysInMonth, getUnixTime, getWeek, isToday, isWeekend, setDate, startOfDay, startOfMonth, startOfQuarter, startOfWeek, startOfYear } from 'date-fns';
 import { SelectionModel } from '@angular/cdk/collections';
 import { coerceBooleanProperty, coerceCssPixelValue } from '@angular/cdk/coercion';
 import * as i1 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import html2canvas from 'html2canvas';
-import { __decorate, __param } from 'tslib';
+import { __awaiter, __decorate, __param } from 'tslib';
 
 class GanttDatePoint {
     constructor(start, text, x, y, additions) {
@@ -792,7 +791,9 @@ class GanttUpper {
         this.cdr = cdr;
         this.ngZone = ngZone;
         this.config = config;
+        // eslint-disable-next-line @angular-eslint/no-input-rename
         this.originItems = [];
+        // eslint-disable-next-line @angular-eslint/no-input-rename
         this.originGroups = [];
         this.viewType = GanttViewType.month;
         this.showTodayLine = true;
@@ -941,7 +942,7 @@ class GanttUpper {
     initSelectionModel() {
         return new SelectionModel(this.multiple, []);
     }
-    onInit() {
+    ngOnInit() {
         this.styles = Object.assign({}, defaultStyles, this.styles);
         this.viewOptions.dateFormat = Object.assign({}, defaultConfig.dateFormat, this.config.dateFormat, this.viewOptions.dateFormat);
         this.createView();
@@ -950,25 +951,32 @@ class GanttUpper {
         this.computeRefs();
         this.initSelectionModel();
         this.firstChange = false;
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            this.element.style.opacity = '1';
-            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();
-                this.detectChanges();
+        // Note: the zone may be nooped through `BootstrapOptions` when bootstrapping the root module. This means
+        // the `onStable` will never emit any value.
+        const onStable$ = this.ngZone.isStable ? from(Promise.resolve()) : this.ngZone.onStable.pipe(take(1));
+        // Normally this isn't in the zone, but it can cause performance regressions for apps
+        // using `zone-patch-rxjs` because it'll trigger a change detection when it unsubscribes.
+        this.ngZone.runOutsideAngular(() => {
+            onStable$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+                this.element.style.opacity = '1';
+                this.dragContainer.dragStarted.pipe(takeUntil(this.unsubscribe$)).subscribe((event) => {
+                    this.dragStarted.emit(event);
+                });
+                this.dragContainer.dragMoved.pipe(takeUntil(this.unsubscribe$)).subscribe((event) => {
+                    this.dragMoved.emit(event);
+                });
+                this.dragContainer.dragEnded.pipe(takeUntil(this.unsubscribe$)).subscribe((event) => {
+                    this.dragEnded.emit(event);
+                    this.computeRefs();
+                    this.detectChanges();
+                });
             });
         });
         this.view.start$.pipe(skip(1), takeUntil(this.unsubscribe$)).subscribe(() => {
             this.computeRefs();
         });
     }
-    onChanges(changes) {
+    ngOnChanges(changes) {
         if (!this.firstChange) {
             if (changes.viewType && changes.viewType.currentValue) {
                 this.createView();
@@ -985,7 +993,7 @@ class GanttUpper {
             }
         }
     }
-    onDestroy() {
+    ngOnDestroy() {
         this.unsubscribe$.next();
         this.unsubscribe$.complete();
     }
@@ -1040,7 +1048,7 @@ class GanttUpper {
     }
 }
 GanttUpper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", 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.5", type: GanttUpper, inputs: { originItems: ["items", "originItems"], originGroups: ["groups", "originGroups"], viewType: "viewType", start: "start", end: "end", showTodayLine: "showTodayLine", draggable: "draggable", styles: "styles", viewOptions: "viewOptions", linkOptions: "linkOptions", disabledLoadOnScroll: "disabledLoadOnScroll", selectable: "selectable", multiple: "multiple" }, outputs: { loadOnScroll: "loadOnScroll", dragStarted: "dragStarted", dragMoved: "dragMoved", dragEnded: "dragEnded", barClick: "barClick" }, host: { properties: { "class.gantt": "this.ganttClass" } }, queries: [{ propertyName: "barTemplate", first: true, predicate: ["bar"], descendants: true, static: true }, { propertyName: "rangeTemplate", first: true, predicate: ["range"], descendants: true, static: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], descendants: true, static: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ["groupHeader"], descendants: true, static: true }], ngImport: i0 });
+GanttUpper.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.5", type: GanttUpper, inputs: { originItems: ["items", "originItems"], originGroups: ["groups", "originGroups"], viewType: "viewType", start: "start", end: "end", showTodayLine: "showTodayLine", draggable: "draggable", styles: "styles", viewOptions: "viewOptions", linkOptions: "linkOptions", disabledLoadOnScroll: "disabledLoadOnScroll", selectable: "selectable", multiple: "multiple" }, outputs: { loadOnScroll: "loadOnScroll", dragStarted: "dragStarted", dragMoved: "dragMoved", dragEnded: "dragEnded", barClick: "barClick" }, host: { properties: { "class.gantt": "this.ganttClass" } }, queries: [{ propertyName: "barTemplate", first: true, predicate: ["bar"], descendants: true, static: true }, { propertyName: "rangeTemplate", first: true, predicate: ["range"], descendants: true, static: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], descendants: true, static: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ["groupHeader"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: GanttUpper, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
@@ -1112,7 +1120,6 @@ class NgxGanttTableColumnComponent {
     set width(width) {
         this.columnWidth = coerceCssPixelValue(width);
     }
-    ngOnInit() { }
 }
 NgxGanttTableColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NgxGanttTableColumnComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
 NgxGanttTableColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: NgxGanttTableColumnComponent, selector: "ngx-gantt-column", inputs: { width: "width", name: "name" }, queries: [{ propertyName: "templateRef", first: true, predicate: ["cell"], descendants: true, static: true }, { propertyName: "headerTemplateRef", first: true, predicate: ["header"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true });
@@ -1141,7 +1148,6 @@ class NgxGanttTableComponent {
     constructor() {
         this.columnChanges = new EventEmitter();
     }
-    ngOnInit() { }
 }
 NgxGanttTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NgxGanttTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 NgxGanttTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", 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 });
@@ -1151,7 +1157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                     selector: 'ngx-gantt-table',
                     template: ''
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { columnChanges: [{
+        }], propDecorators: { columnChanges: [{
                 type: Output
             }], rowBeforeTemplate: [{
                 type: ContentChild,
@@ -1163,6 +1169,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
 
 const GANTT_ABSTRACT_TOKEN = new InjectionToken('gantt-abstract-token');
 
+const supports = (typeof window !== 'undefined' && !!window.CSS && CSS.supports) || (() => false);
+/**
+ * Note: we don't need to add vendor prefixes within `.scss` files since they're added automatically.
+ * This function is necessary when the `element.style` is updated directly through the JavaScript.
+ * This is not required to be used with CSS properties that don't require vendor prefixes (e.g. `opacity`).
+ */
+function setStyleWithVendorPrefix({ element, style, value }) {
+    element.style[style] = value;
+    if (supports(`-webkit-${style}: ${value}`)) {
+        // Note: some browsers still require setting `-webkit` vendor prefix. E.g. Mozilla 49 has implemented
+        // the 3D support for `transform`, but it requires setting `-webkit-` prefix.
+        element.style[`-webkit-${style}`] = value;
+    }
+}
+
 const angleRight = `<svg xmlns="http://www.w3.org/2000/svg" fit=""  preserveAspectRatio="xMidYMid meet" focusable="false"><g id="amnavigation/angle-right" stroke-width="1" fill-rule="evenodd"><path d="M7.978 11.498l-.005.005L2.3 5.831 3.13 5l4.848 4.848L12.826 5l.83.831-5.673 5.672-.005-.005z"   transform="rotate(-90 7.978 8.252)"></path></g></svg>`;
 const angleDown = `<svg xmlns="http://www.w3.org/2000/svg" fit=""  preserveAspectRatio="xMidYMid meet" focusable="false"><g id="aknavigation/angle-down" stroke-width="1" fill-rule="evenodd"><path d="M7.978 11.997l-.005.006L2.3 6.33l.83-.831 4.848 4.848L12.826 5.5l.83.83-5.673 5.673-.005-.006z" ></path></g></svg>`;
 const plusSquare = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fit=""   preserveAspectRatio="xMidYMid meet" focusable="false"><g id="kxaction/plus-square" stroke-width="1" fill-rule="evenodd"><path d="M2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1.2a.8.8 0 0 0-.8.8v12a.8.8 0 0 0 .8.8h12a.8.8 0 0 0 .8-.8V2a.8.8 0 0 0-.8-.8H2zm5.45 6.2V4.75h1.2V7.4h2.65v1.2H8.65v2.65h-1.2V8.6H4.8V7.4h2.65z"></path></g></svg>`;
@@ -1258,8 +1279,6 @@ class GanttIconComponent {
     set iconName(name) {
         this.setSvg(name);
     }
-    ngOnInit() { }
-    ngAfterViewInit() { }
     setSvg(name) {
         const iconSvg = icons[name];
         if (iconSvg) {
@@ -1344,7 +1363,6 @@ class GanttTableComponent {
         });
         this.columnList = columns;
     }
-    ngOnInit() { }
     ngOnChanges(changes) {
         var _a, _b;
         if (!((_a = changes.groups.currentValue) === null || _a === void 0 ? void 0 : _a.length) && !((_b = changes.items.currentValue) === null || _b === void 0 ? void 0 : _b.length)) {
@@ -1356,7 +1374,11 @@ class GanttTableComponent {
     }
     dragFixed(config) {
         if (config.movedWidth < config.minWidth) {
-            config.target.style.transform = `translate3d(${config.minWidth - config.originWidth}px, 0, 0)`;
+            setStyleWithVendorPrefix({
+                element: config.target,
+                style: 'transform',
+                value: `translate3d(${config.minWidth - config.originWidth}px, 0, 0)`
+            });
         }
     }
     expandGroup(group) {
@@ -1478,6 +1500,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                 args: ['class.gantt-table-empty']
             }] } });
 
+/** Cached result of whether the user's browser supports passive event listeners. */
+let supportsPassiveEvents;
+/**
+ * Checks whether the user's browser supports passive event listeners.
+ * See: https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
+ */
+function supportsPassiveEventListeners() {
+    if (supportsPassiveEvents == null && typeof window !== 'undefined') {
+        try {
+            window.addEventListener('test', null, Object.defineProperty({}, 'passive', {
+                get: () => (supportsPassiveEvents = true)
+            }));
+        }
+        finally {
+            supportsPassiveEvents = supportsPassiveEvents || false;
+        }
+    }
+    return supportsPassiveEvents;
+}
+/**
+ * Normalizes an `AddEventListener` object to something that can be passed
+ * to `addEventListener` on any browser, no matter whether it supports the
+ * `options` parameter.
+ */
+function normalizePassiveListenerOptions(options) {
+    return supportsPassiveEventListeners() ? options : !!options.capture;
+}
+/** Options used to bind passive event listeners. */
+const passiveListenerOptions = normalizePassiveListenerOptions({ passive: true });
+
 const scrollThreshold = 50;
 var ScrollDirection;
 (function (ScrollDirection) {
@@ -1486,24 +1538,26 @@ var ScrollDirection;
     ScrollDirection[ScrollDirection["RIGHT"] = 2] = "RIGHT";
 })(ScrollDirection || (ScrollDirection = {}));
 class GanttDomService {
-    constructor() {
+    constructor(ngZone, platformId) {
+        this.ngZone = ngZone;
+        this.platformId = platformId;
         this.unsubscribe$ = new Subject();
     }
     monitorScrollChange() {
-        merge(fromEvent(this.mainContainer, 'scroll'), fromEvent(this.sideContainer, 'scroll'))
+        this.ngZone.runOutsideAngular(() => merge(fromEvent(this.mainContainer, 'scroll', passiveListenerOptions), fromEvent(this.sideContainer, 'scroll', passiveListenerOptions))
             .pipe(takeUntil(this.unsubscribe$))
             .subscribe((event) => {
             this.syncScroll(event);
-        });
-        fromEvent(this.mainContainer, 'scroll')
-            .pipe(startWith(), takeUntil(this.unsubscribe$))
-            .subscribe((event) => {
-            // if (this.mainContainer.scrollLeft > 0) {
-            //     this.side.classList.add('gantt-side-has-shadow');
-            // } else {
-            //     this.side.classList.remove('gantt-side-has-shadow');
-            // }
-        });
+        }));
+        // fromEvent(this.mainContainer, 'scroll')
+        //     .pipe(startWith(), takeUntil(this.unsubscribe$))
+        //     .subscribe((event) => {
+        //         // if (this.mainContainer.scrollLeft > 0) {
+        //         //     this.side.classList.add('gantt-side-has-shadow');
+        //         // } else {
+        //         //     this.side.classList.remove('gantt-side-has-shadow');
+        //         // }
+        //     });
     }
     syncScroll(event) {
         const target = event.currentTarget;
@@ -1513,7 +1567,7 @@ class GanttDomService {
     }
     disableBrowserWheelEvent() {
         const container = this.mainContainer;
-        fromEvent(container, 'wheel')
+        this.ngZone.runOutsideAngular(() => fromEvent(container, 'wheel')
             .pipe(takeUntil(this.unsubscribe$))
             .subscribe((event) => {
             const delta = event.deltaX;
@@ -1524,7 +1578,7 @@ class GanttDomService {
                 (container.scrollLeft === 0 && delta < 0)) {
                 event.preventDefault();
             }
-        });
+        }));
     }
     initialize(root) {
         this.root = root.nativeElement;
@@ -1536,8 +1590,13 @@ class GanttDomService {
         this.monitorScrollChange();
         this.disableBrowserWheelEvent();
     }
-    getViewerScroll() {
-        return fromEvent(this.mainContainer, 'scroll').pipe(map(() => this.mainContainer.scrollLeft), pairwise(), map(([previous, current]) => {
+    /**
+     * @returns An observable that will emit outside the Angular zone. Note, consumers should re-enter the Angular zone
+     * to run the change detection if needed.
+     */
+    getViewerScroll(options) {
+        return new Observable((subscriber) => this.ngZone.runOutsideAngular(() => fromEvent(this.mainContainer, 'scroll', options)
+            .pipe(map(() => this.mainContainer.scrollLeft), pairwise(), map(([previous, current]) => {
             const event = {
                 target: this.mainContainer,
                 direction: ScrollDirection.NONE
@@ -1548,15 +1607,17 @@ class GanttDomService {
                 }
             }
             if (current - previous > 0) {
-                if (this.mainContainer.scrollWidth - this.mainContainer.clientWidth - this.mainContainer.scrollLeft < scrollThreshold) {
+                if (this.mainContainer.scrollWidth - this.mainContainer.clientWidth - this.mainContainer.scrollLeft <
+                    scrollThreshold) {
                     event.direction = ScrollDirection.RIGHT;
                 }
             }
             return event;
-        }));
+        }))
+            .subscribe(subscriber)));
     }
     getResize() {
-        return fromEvent(window, 'resize').pipe(auditTime(150));
+        return isPlatformServer(this.platformId) ? EMPTY : fromEvent(window, 'resize').pipe(auditTime(150));
     }
     scrollMainContainer(left) {
         if (isNumber(left)) {
@@ -1570,11 +1631,14 @@ class GanttDomService {
         this.unsubscribe$.complete();
     }
 }
-GanttDomService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: GanttDomService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+GanttDomService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: GanttDomService, deps: [{ token: i0.NgZone }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
 GanttDomService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: GanttDomService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: GanttDomService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }]; } });
 
 function getDependencyType(path, dependencyTypes) {
     if (dependencyTypes.includes(GanttLinkType.ss) && path.from.pos === InBarPosition.start && path.to.pos === InBarPosition.start) {
@@ -1648,6 +1712,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                     args: [GANTT_UPPER_TOKEN]
                 }] }]; } });
 
+class GanttDragBackdropComponent {
+}
+GanttDragBackdropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: GanttDragBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GanttDragBackdropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop", host: { classAttribute: "gantt-drag-backdrop" }, ngImport: i0, template: "<div class=\"gantt-drag-mask\">\n  <div class=\"date-range\">\n    <span class=\"start\"></span>\n    <span class=\"end\"></span>\n  </div>\n</div>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: GanttDragBackdropComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'gantt-drag-backdrop',
+                    templateUrl: `./drag-backdrop.component.html`,
+                    host: {
+                        class: 'gantt-drag-backdrop'
+                    }
+                }]
+        }] });
+
 class GanttPrintService {
     constructor() { }
     setInlineStyles(targetElem) {
@@ -1684,52 +1763,55 @@ class GanttPrintService {
         this.mainContainer = this.root.getElementsByClassName('gantt-main-container')[0];
     }
     print(name = 'download', ignoreElementClass) {
-        const root = this.root;
-        const mainContainer = this.mainContainer;
-        // set print width
-        const printWidth = root.offsetWidth;
-        // set print height
-        const printHeight = root.offsetHeight - mainContainer.offsetHeight + mainContainer.scrollHeight;
-        html2canvas(root, {
-            logging: false,
-            allowTaint: true,
-            useCORS: true,
-            width: printWidth,
-            height: printHeight,
-            ignoreElements: (element) => {
-                if (ignoreElementClass && element.classList.contains(ignoreElementClass)) {
-                    return true;
-                }
-                if (element.classList.contains('gantt-calendar-today-overlay')) {
-                    return true;
-                }
-            },
-            onclone: (cloneDocument) => {
-                const ganttClass = root.className;
-                const cloneGanttDom = cloneDocument.querySelector(`.${ganttClass.replace(/\s+/g, '.')}`);
-                const cloneGanttContainerDom = cloneDocument.querySelector('.gantt-container');
-                const cloneCalendarOverlay = cloneDocument.querySelector('.gantt-calendar-overlay-main');
-                const cloneLinksOverlay = cloneDocument.querySelector('.gantt-links-overlay-main');
-                // change targetDom width
-                cloneGanttDom.style.width = `${printWidth}px`;
-                cloneGanttDom.style.height = `${printHeight}px`;
-                cloneGanttDom.style.overflow = `unset`;
-                cloneGanttContainerDom.style.backgroundColor = '#fff';
-                cloneCalendarOverlay.setAttribute('height', `${printHeight}`);
-                cloneCalendarOverlay.setAttribute('style', `background: transparent`);
-                if (cloneLinksOverlay) {
-                    cloneLinksOverlay.setAttribute('height', `${printHeight}`);
-                    cloneLinksOverlay.setAttribute('style', `height: ${printHeight}px`);
+        return __awaiter(this, void 0, void 0, function* () {
+            const root = this.root;
+            const mainContainer = this.mainContainer;
+            // set print width
+            const printWidth = root.offsetWidth;
+            // set print height
+            const printHeight = root.offsetHeight - mainContainer.offsetHeight + mainContainer.scrollHeight;
+            const html2canvas = (yield import(/* webpackChunkName: 'html2canvas' */ 'html2canvas')).default;
+            html2canvas(root, {
+                logging: false,
+                allowTaint: true,
+                useCORS: true,
+                width: printWidth,
+                height: printHeight,
+                ignoreElements: (element) => {
+                    if (ignoreElementClass && element.classList.contains(ignoreElementClass)) {
+                        return true;
+                    }
+                    if (element.classList.contains('gantt-calendar-today-overlay')) {
+                        return true;
+                    }
+                },
+                onclone: (cloneDocument) => {
+                    const ganttClass = root.className;
+                    const cloneGanttDom = cloneDocument.querySelector(`.${ganttClass.replace(/\s+/g, '.')}`);
+                    const cloneGanttContainerDom = cloneDocument.querySelector('.gantt-container');
+                    const cloneCalendarOverlay = cloneDocument.querySelector('.gantt-calendar-overlay-main');
+                    const cloneLinksOverlay = cloneDocument.querySelector('.gantt-links-overlay-main');
+                    // change targetDom width
+                    cloneGanttDom.style.width = `${printWidth}px`;
+                    cloneGanttDom.style.height = `${printHeight}px`;
+                    cloneGanttDom.style.overflow = `unset`;
+                    cloneGanttContainerDom.style.backgroundColor = '#fff';
+                    cloneCalendarOverlay.setAttribute('height', `${printHeight}`);
+                    cloneCalendarOverlay.setAttribute('style', `background: transparent`);
+                    if (cloneLinksOverlay) {
+                        cloneLinksOverlay.setAttribute('height', `${printHeight}`);
+                        cloneLinksOverlay.setAttribute('style', `height: ${printHeight}px`);
+                    }
+                    // setInlineStyles for svg
+                    this.setInlineStyles(cloneGanttDom);
                 }
-                // setInlineStyles for svg
-                this.setInlineStyles(cloneGanttDom);
-            }
-        }).then((canvas) => {
-            const link = document.createElement('a');
-            const dataUrl = canvas.toDataURL('image/png');
-            link.download = `${name}.png`;
-            link.href = dataUrl;
-            link.click();
+            }).then((canvas) => {
+                const link = document.createElement('a');
+                const dataUrl = canvas.toDataURL('image/png');
+                link.download = `${name}.png`;
+                link.href = dataUrl;
+                link.click();
+            });
         });
     }
 }
@@ -1745,7 +1827,6 @@ class GanttCalendarComponent {
         this.ganttUpper = ganttUpper;
         this.ngZone = ngZone;
         this.elementRef = elementRef;
-        this.unsubscribe$ = new Subject();
         this.headerHeight = headerHeight;
         this.mainHeight = mainHeight;
         this.todayHeight = todayHeight;
@@ -1753,6 +1834,7 @@ class GanttCalendarComponent {
         this.todayBorderRadius = todayBorderRadius;
         this.viewTypes = GanttViewType;
         this.className = true;
+        this.unsubscribe$ = new Subject();
     }
     get view() {
         return this.ganttUpper.view;
@@ -1780,16 +1862,21 @@ class GanttCalendarComponent {
         }
     }
     ngOnInit() {
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            merge(this.ganttUpper.viewChange, this.ganttUpper.view.start$)
-                .pipe(takeUntil(this.unsubscribe$))
-                .subscribe(() => {
-                this.setTodayPoint();
+        // Note: the zone may be nooped through `BootstrapOptions` when bootstrapping the root module. This means
+        // the `onStable` will never emit any value.
+        const onStable$ = this.ngZone.isStable ? from(Promise.resolve()) : this.ngZone.onStable.pipe(take(1));
+        // Normally this isn't in the zone, but it can cause performance regressions for apps
+        // using `zone-patch-rxjs` because it'll trigger a change detection when it unsubscribes.
+        this.ngZone.runOutsideAngular(() => {
+            onStable$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+                merge(this.ganttUpper.viewChange, this.ganttUpper.view.start$)
+                    .pipe(takeUntil(this.unsubscribe$))
+                    .subscribe(() => {
+                    this.setTodayPoint();
+                });
             });
         });
     }
-    ngAfterViewInit() { }
-    ngOnChanges(changes) { }
     trackBy(index, point) {
         return point.text || index;
     }
@@ -1799,7 +1886,7 @@ class GanttCalendarComponent {
     }
 }
 GanttCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: GanttCalendarComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-GanttCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: GanttCalendarComponent, selector: "gantt-calendar-overlay", host: { properties: { "class.gantt-calendar-overlay": "this.className" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n  <span class=\"today-line\" *ngIf=\"ganttUpper.showTodayLine\"> </span>\n</div>\n\n<svg class=\"gantt-calendar-overlay-main\" [attr.width]=\"view.width\" [attr.height]=\"headerHeight\">\n  <g>\n    <text class=\"primary-text\" *ngFor=\"let point of view.primaryDatePoints; trackBy: trackBy\" [attr.x]=\"point.x\" [attr.y]=\"point.y\">\n      {{ point.text }}\n    </text>\n    <ng-container *ngFor=\"let point of view.secondaryDatePoints; trackBy: trackBy\">\n      <text class=\"secondary-text\" [class.secondary-text-weekend]=\"point.additions?.isWeekend\" [attr.x]=\"point.x\" [attr.y]=\"point.y\">\n        {{ point.text }}\n      </text>\n    </ng-container>\n\n    <g>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n\n    <g>\n      <line [attr.x1]=\"0\" [attr.x2]=\"view.width\" [attr.y1]=\"headerHeight\" [attr.y2]=\"headerHeight\" class=\"header-line\"></line>\n    </g>\n  </g>\n  <g>\n    <g *ngIf=\"view.showTimeline\">\n      <line\n        *ngFor=\"let point of view.secondaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.cellWidth\"\n        [attr.x2]=\"(i + 1) * view.cellWidth\"\n        [attr.y1]=\"headerHeight\"\n        [attr.y2]=\"mainHeight\"\n        class=\"secondary-line\"\n      ></line>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n  </g>\n</svg>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+GanttCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: GanttCalendarComponent, selector: "gantt-calendar-overlay", host: { properties: { "class.gantt-calendar-overlay": "this.className" } }, ngImport: i0, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n  <span class=\"today-line\" *ngIf=\"ganttUpper.showTodayLine\"> </span>\n</div>\n\n<svg class=\"gantt-calendar-overlay-main\" [attr.width]=\"view.width\" [attr.height]=\"headerHeight\">\n  <g>\n    <text class=\"primary-text\" *ngFor=\"let point of view.primaryDatePoints; trackBy: trackBy\" [attr.x]=\"point.x\" [attr.y]=\"point.y\">\n      {{ point.text }}\n    </text>\n    <ng-container *ngFor=\"let point of view.secondaryDatePoints; trackBy: trackBy\">\n      <text class=\"secondary-text\" [class.secondary-text-weekend]=\"point.additions?.isWeekend\" [attr.x]=\"point.x\" [attr.y]=\"point.y\">\n        {{ point.text }}\n      </text>\n    </ng-container>\n\n    <g>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n\n    <g>\n      <line [attr.x1]=\"0\" [attr.x2]=\"view.width\" [attr.y1]=\"headerHeight\" [attr.y2]=\"headerHeight\" class=\"header-line\"></line>\n    </g>\n  </g>\n  <g>\n    <g *ngIf=\"view.showTimeline\">\n      <line\n        *ngFor=\"let point of view.secondaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.cellWidth\"\n        [attr.x2]=\"(i + 1) * view.cellWidth\"\n        [attr.y1]=\"headerHeight\"\n        [attr.y2]=\"mainHeight\"\n        class=\"secondary-line\"\n      ></line>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n  </g>\n</svg>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: GanttCalendarComponent, decorators: [{
             type: Component,
             args: [{
@@ -1814,25 +1901,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                 args: ['class.gantt-calendar-overlay']
             }] } });
 
-class GanttDragBackdropComponent {
-    constructor() {
-        this.backdropClass = true;
-    }
-    ngOnInit() { }
-}
-GanttDragBackdropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: GanttDragBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GanttDragBackdropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop", host: { properties: { "class.gantt-drag-backdrop": "this.backdropClass" } }, ngImport: i0, template: "<div class=\"gantt-drag-mask\">\n  <div class=\"date-range\">\n    <span class=\"start\"></span>\n    <span class=\"end\"></span>\n  </div>\n</div>\n" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: GanttDragBackdropComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'gantt-drag-backdrop',
-                    templateUrl: `./drag-backdrop.component.html`
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { backdropClass: [{
-                type: HostBinding,
-                args: ['class.gantt-drag-backdrop']
-            }] } });
-
 class NgxGanttRootComponent {
     constructor(elementRef, ngZone, dom, dragContainer, ganttUpper, printService) {
         this.elementRef = elementRef;
@@ -1841,7 +1909,6 @@ class NgxGanttRootComponent {
         this.dragContainer = dragContainer;
         this.ganttUpper = ganttUpper;
         this.printService = printService;
-        this.ganttClass = true;
         this.unsubscribe$ = new Subject();
         this.ganttUpper.dragContainer = dragContainer;
     }
@@ -1849,44 +1916,52 @@ class NgxGanttRootComponent {
         return this.ganttUpper.view;
     }
     ngOnInit() {
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            this.dom.initialize(this.elementRef);
-            if (this.printService) {
-                this.printService.register(this.elementRef);
-            }
-            this.setupScrollClass();
-            this.setupResize();
-            this.setupViewScroll();
-            // 优化初始化时Scroll滚动体验问题，通过透明度解决，默认透明度为0，滚动结束后恢复
-            this.elementRef.nativeElement.style.opacity = '1';
-            this.ganttUpper.viewChange.pipe(startWith(null)).subscribe(() => {
-                this.scrollToToday();
+        // Note: the zone may be nooped through `BootstrapOptions` when bootstrapping the root module. This means
+        // the `onStable` will never emit any value.
+        const onStable$ = this.ngZone.isStable ? from(Promise.resolve()) : this.ngZone.onStable.pipe(take(1));
+        // Normally this isn't in the zone, but it can cause performance regressions for apps
+        // using `zone-patch-rxjs` because it'll trigger a change detection when it unsubscribes.
+        this.ngZone.runOutsideAngular(() => {
+            onStable$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+                this.dom.initialize(this.elementRef);
+                if (this.printService) {
+                    this.printService.register(this.elementRef);
+                }
+                this.setupScrollClass();
+                this.setupResize();
+                this.setupViewScroll();
+                // 优化初始化时Scroll滚动体验问题，通过透明度解决，默认透明度为0，滚动结束后恢复
+                this.elementRef.nativeElement.style.opacity = '1';
+                this.ganttUpper.viewChange.pipe(startWith(null), takeUntil(this.unsubscribe$)).subscribe(() => {
+                    this.scrollToToday();
+                });
             });
         });
     }
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+    }
     setupViewScroll() {
         if (this.ganttUpper.disabledLoadOnScroll) {
             return;
         }
         this.dom
-            .getViewerScroll()
+            .getViewerScroll(passiveListenerOptions)
             .pipe(takeUntil(this.unsubscribe$))
             .subscribe((event) => {
             if (event.direction === ScrollDirection.LEFT) {
                 const dates = this.view.addStartDate();
                 if (dates) {
                     event.target.scrollLeft += this.view.getDateRangeWidth(dates.start, dates.end);
-                    this.ngZone.run(() => {
-                        this.ganttUpper.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() });
-                    });
+                    if (this.ganttUpper.loadOnScroll.observers) {
+                        this.ngZone.run(() => this.ganttUpper.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() }));
+                    }
                 }
             }
             if (event.direction === ScrollDirection.RIGHT) {
                 const dates = this.view.addEndDate();
-                if (dates) {
-                    this.ngZone.run(() => {
-                        this.ganttUpper.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() });
-                    });
+                if (dates && this.ganttUpper.loadOnScroll.observers) {
+                    this.ngZone.run(() => this.ganttUpper.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() }));
                 }
             }
         });
@@ -1916,13 +1991,16 @@ class NgxGanttRootComponent {
     }
 }
 NgxGanttRootComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NgxGanttRootComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: GanttDomService }, { token: GanttDragContainer }, { token: GANTT_UPPER_TOKEN }, { token: GanttPrintService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-NgxGanttRootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: { sideWidth: "sideWidth" }, host: { properties: { "class.gantt": "this.ganttClass" } }, providers: [GanttDomService, GanttDragContainer], queries: [{ propertyName: "sideTemplate", first: true, predicate: ["sideTemplate"], descendants: true, static: true }, { propertyName: "mainTemplate", first: true, predicate: ["mainTemplate"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"gantt-side\" [style.width.px]=\"sideWidth\">\n  <div class=\"gantt-side-container\">\n    <ng-template [ngTemplateOutlet]=\"sideTemplate\"></ng-template>\n  </div>\n</div>\n<div class=\"gantt-container\">\n  <gantt-calendar-overlay></gantt-calendar-overlay>\n  <gantt-drag-backdrop></gantt-drag-backdrop>\n  <div class=\"gantt-main\">\n    <ng-template [ngTemplateOutlet]=\"mainTemplate\"></ng-template>\n  </div>\n</div>\n", components: [{ type: GanttCalendarComponent, selector: "gantt-calendar-overlay" }, { type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+NgxGanttRootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: { sideWidth: "sideWidth" }, host: { classAttribute: "gantt" }, providers: [GanttDomService, GanttDragContainer], queries: [{ propertyName: "sideTemplate", first: true, predicate: ["sideTemplate"], descendants: true, static: true }, { propertyName: "mainTemplate", first: true, predicate: ["mainTemplate"], descendants: true, static: true }], viewQueries: [{ propertyName: "backdrop", first: true, predicate: GanttDragBackdropComponent, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"gantt-side\" [style.width.px]=\"sideWidth\">\n  <div class=\"gantt-side-container\">\n    <ng-template [ngTemplateOutlet]=\"sideTemplate\"></ng-template>\n  </div>\n</div>\n<div class=\"gantt-container\">\n  <gantt-calendar-overlay></gantt-calendar-overlay>\n  <gantt-drag-backdrop></gantt-drag-backdrop>\n  <div class=\"gantt-main\">\n    <ng-template [ngTemplateOutlet]=\"mainTemplate\"></ng-template>\n  </div>\n</div>\n", components: [{ type: GanttCalendarComponent, selector: "gantt-calendar-overlay" }, { type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NgxGanttRootComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngx-gantt-root',
                     templateUrl: './root.component.html',
-                    providers: [GanttDomService, GanttDragContainer]
+                    providers: [GanttDomService, GanttDragContainer],
+                    host: {
+                        class: 'gantt'
+                    }
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: GanttDomService }, { type: GanttDragContainer }, { type: GanttUpper, decorators: [{
                     type: Inject,
@@ -1931,15 +2009,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                     type: Optional
                 }] }]; }, propDecorators: { sideWidth: [{
                 type: Input
-            }], ganttClass: [{
-                type: HostBinding,
-                args: ['class.gantt']
             }], sideTemplate: [{
                 type: ContentChild,
                 args: ['sideTemplate', { static: true }]
             }], mainTemplate: [{
                 type: ContentChild,
                 args: ['mainTemplate', { static: true }]
+            }], backdrop: [{
+                type: ViewChild,
+                args: [GanttDragBackdropComponent, { static: true, read: ElementRef }]
             }] } });
 
 class GanttLinkLine {
@@ -2148,7 +2226,7 @@ class GanttLinksComponent {
             this.elementRef.nativeElement.style.visibility = 'hidden';
         });
         merge(this.ganttUpper.viewChange, this.ganttUpper.expandChange, this.ganttUpper.view.start$, this.ganttUpper.dragEnded, this.ganttUpper.linkDragEnded)
-            .pipe(takeUntil(this.unsubscribe$), skip(1), debounceTime(0))
+            .pipe(skip(1), debounceTime(0), takeUntil(this.unsubscribe$))
             .subscribe(() => {
             this.elementRef.nativeElement.style.visibility = 'visible';
             this.buildLinks();
@@ -2291,13 +2369,13 @@ class GanttItemUpper {
         this.firstChange = true;
         this.unsubscribe$ = new Subject();
     }
-    onInit() {
+    ngOnInit() {
         this.firstChange = false;
         this.item.refs$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
             this.setPositions();
         });
     }
-    onChanges() {
+    ngOnChanges() {
         if (!this.firstChange) {
             this.setPositions();
         }
@@ -2316,13 +2394,13 @@ class GanttItemUpper {
         else {
         }
     }
-    onDestroy() {
+    ngOnDestroy() {
         this.unsubscribe$.next();
         this.unsubscribe$.complete();
     }
 }
 GanttItemUpper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: GanttItemUpper, deps: [{ token: i0.ElementRef }, { token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Directive });
-GanttItemUpper.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.5", type: GanttItemUpper, inputs: { template: "template", item: "item" }, ngImport: i0 });
+GanttItemUpper.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.5", type: GanttItemUpper, inputs: { template: "template", item: "item" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: GanttItemUpper, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: GanttUpper, decorators: [{
@@ -2339,18 +2417,9 @@ class NgxGanttRangeComponent extends GanttItemUpper {
         super(elementRef, ganttUpper);
         this.ganttRangeClass = true;
     }
-    ngOnInit() {
-        super.onInit();
-    }
-    ngOnChanges() {
-        super.onChanges();
-    }
-    ngOnDestroy() {
-        super.onDestroy();
-    }
 }
 NgxGanttRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NgxGanttRangeComponent, deps: [{ token: i0.ElementRef }, { token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-NgxGanttRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: NgxGanttRangeComponent, selector: "ngx-gantt-range,gantt-range", host: { properties: { "class.gantt-range": "this.ganttRangeClass" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"item.start && item.end\">\n  <div class=\"gantt-range-main\">\n    <div class=\"gantt-range-main-progress\" *ngIf=\"item.progress >= 0\" [style.width.%]=\"item.progress * 100\"></div>\n  </div>\n  <div class=\"gantt-range-triangle left\"></div>\n  <div class=\"gantt-range-triangle right\"></div>\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"></ng-template>\n</ng-container>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+NgxGanttRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: NgxGanttRangeComponent, selector: "ngx-gantt-range,gantt-range", host: { properties: { "class.gantt-range": "this.ganttRangeClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"item.start && item.end\">\n  <div class=\"gantt-range-main\">\n    <div class=\"gantt-range-main-progress\" *ngIf=\"item.progress >= 0\" [style.width.%]=\"item.progress * 100\"></div>\n  </div>\n  <div class=\"gantt-range-triangle left\"></div>\n  <div class=\"gantt-range-triangle right\"></div>\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"></ng-template>\n</ng-container>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NgxGanttRangeComponent, decorators: [{
             type: Component,
             args: [{
@@ -2375,10 +2444,11 @@ function createSvgElement(qualifiedName, className) {
     return element;
 }
 class GanttBarDrag {
-    constructor(dragDrop, dom, dragContainer) {
+    constructor(dragDrop, dom, dragContainer, root) {
         this.dragDrop = dragDrop;
         this.dom = dom;
         this.dragContainer = dragContainer;
+        this.root = root;
         this.dragRefs = [];
         this.destroy$ = new Subject();
     }
@@ -2394,9 +2464,9 @@ class GanttBarDrag {
             ((_c = this.ganttUpper.config.linkOptions) === null || _c === void 0 ? void 0 : _c.dependencyTypes[0]) === GanttLinkType.fs
             ? singleDropActiveClass
             : dropActiveClass;
-        fromEvent(this.barElement, 'mouseenter')
+        fromEvent(this.barElement, 'mouseenter', passiveListenerOptions)
             .pipe(takeUntil(this.destroy$))
-            .subscribe((event) => {
+            .subscribe(() => {
             if (this.dragContainer.linkDraggingId && this.dragContainer.linkDraggingId !== this.item.id) {
                 if (this.item.linkable) {
                     this.barElement.classList.add(dropClass);
@@ -2410,9 +2480,9 @@ class GanttBarDrag {
                 this.barElement.classList.add(activeClass);
             }
         });
-        fromEvent(this.barElement, 'mouseleave')
+        fromEvent(this.barElement, 'mouseleave', passiveListenerOptions)
             .pipe(takeUntil(this.destroy$))
-            .subscribe((event) => {
+            .subscribe(() => {
             if (!this.dragContainer.linkDraggingId) {
                 this.barElement.classList.remove(activeClass);
             }
@@ -2473,7 +2543,7 @@ class GanttBarDrag {
                     if (width > dragMinWidth) {
                         this.barElement.style.width = width + 'px';
                         this.barElement.style.left = x + 'px';
-                        this.openDragBackdrop(this.barElement, this.ganttUpper.view.getDateByXPoint(x), this.ganttUpper.view.getDateByXPoint(x + width));
+                        this.openDragBackdrop(this.barElement, this.ganttUpper.view.getDateByXPoint(x), this.item.end);
                         this.item.updateDate(this.ganttUpper.view.getDateByXPoint(x), this.item.end);
                     }
                 }
@@ -2481,7 +2551,7 @@ class GanttBarDrag {
                     const width = this.item.refs.width + event.distance.x;
                     if (width > dragMinWidth) {
                         this.barElement.style.width = width + 'px';
-                        this.openDragBackdrop(this.barElement, this.ganttUpper.view.getDateByXPoint(this.item.refs.x), this.ganttUpper.view.getDateByXPoint(this.item.refs.x + width));
+                        this.openDragBackdrop(this.barElement, this.item.start, this.ganttUpper.view.getDateByXPoint(this.item.refs.x + width));
                     }
                     this.item.updateDate(this.item.start, this.ganttUpper.view.getDateByXPoint(this.item.refs.x + width));
                 }
@@ -2563,22 +2633,24 @@ class GanttBarDrag {
         return dragRefs;
     }
     openDragBackdrop(dragElement, start, end) {
-        const dragMaskElement = this.dom.root.querySelector('.gantt-drag-mask');
-        const dragBackdropElement = this.dom.root.querySelector('.gantt-drag-backdrop');
+        const dragBackdropElement = this.root.backdrop.nativeElement;
+        const dragMaskElement = dragBackdropElement.querySelector('.gantt-drag-mask');
         const rootRect = this.dom.root.getBoundingClientRect();
         const dragRect = dragElement.getBoundingClientRect();
         const left = dragRect.left - rootRect.left - this.dom.side.clientWidth;
         const width = dragRect.right - dragRect.left;
+        // Note: updating styles will cause re-layout so we have to place them consistently one by one.
         dragMaskElement.style.left = left + 'px';
         dragMaskElement.style.width = width + 'px';
-        dragMaskElement.querySelector('.start').innerHTML = start.format('MM-dd');
-        dragMaskElement.querySelector('.end').innerHTML = end.format('MM-dd');
         dragMaskElement.style.display = 'block';
         dragBackdropElement.style.display = 'block';
+        // This will invalidate the layout, but we won't need re-layout, because we set styles previously.
+        dragMaskElement.querySelector('.start').innerHTML = start.format('MM-dd');
+        dragMaskElement.querySelector('.end').innerHTML = end.format('MM-dd');
     }
     closeDragBackdrop() {
-        const dragMaskElement = this.dom.root.querySelector('.gantt-drag-mask');
-        const dragBackdropElement = this.dom.root.querySelector('.gantt-drag-backdrop');
+        const dragBackdropElement = this.root.backdrop.nativeElement;
+        const dragMaskElement = dragBackdropElement.querySelector('.gantt-drag-mask');
         dragMaskElement.style.display = 'none';
         dragBackdropElement.style.display = 'none';
     }
@@ -2644,27 +2716,30 @@ class GanttBarDrag {
         this.destroy$.complete();
     }
 }
-GanttBarDrag.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: GanttBarDrag, deps: [{ token: i1.DragDrop }, { token: GanttDomService }, { token: GanttDragContainer }], target: i0.ɵɵFactoryTarget.Injectable });
+GanttBarDrag.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: GanttBarDrag, deps: [{ token: i1.DragDrop }, { token: GanttDomService }, { token: GanttDragContainer }, { token: NgxGanttRootComponent, skipSelf: true }], target: i0.ɵɵFactoryTarget.Injectable });
 GanttBarDrag.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: GanttBarDrag });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: GanttBarDrag, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.DragDrop }, { type: GanttDomService }, { type: GanttDragContainer }]; } });
+        }], ctorParameters: function () { return [{ type: i1.DragDrop }, { type: GanttDomService }, { type: GanttDragContainer }, { type: NgxGanttRootComponent, decorators: [{
+                    type: SkipSelf
+                }] }]; } });
 
 function linearGradient(sideOrCorner, color, stop) {
     return `linear-gradient(${sideOrCorner},${color} 0%,${stop} 40%)`;
 }
 class NgxGanttBarComponent extends GanttItemUpper {
-    constructor(dragContainer, drag, elementRef, ganttUpper) {
+    constructor(dragContainer, drag, elementRef, ganttUpper, ngZone) {
         super(elementRef, ganttUpper);
         this.dragContainer = dragContainer;
         this.drag = drag;
         this.ganttUpper = ganttUpper;
+        this.ngZone = ngZone;
         this.barClick = new EventEmitter();
         this.ganttItemClass = true;
         this.color = 'red';
     }
     ngOnInit() {
-        super.onInit();
+        super.ngOnInit();
         this.dragContainer.dragEnded.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
             this.setContentBackground();
         });
@@ -2672,9 +2747,14 @@ class NgxGanttBarComponent extends GanttItemUpper {
     ngAfterViewInit() {
         this.drag.createDrags(this.elementRef, this.item, this.ganttUpper);
         this.setContentBackground();
-    }
-    ngOnChanges() {
-        super.onChanges();
+        this.handles.changes
+            .pipe(startWith(this.handles), switchMap(() => 
+        // Note: we need to explicitly subscribe outside of the Angular zone since `addEventListener`
+        // is called when the `fromEvent` is subscribed.
+        new Observable((subscriber) => this.ngZone.runOutsideAngular(() => merge(...this.handles.toArray().map((handle) => fromEvent(handle.nativeElement, 'mousedown'))).subscribe(subscriber)))), takeUntil(this.unsubscribe$))
+            .subscribe((event) => {
+            event.stopPropagation();
+        });
     }
     onBarClick(event) {
         this.barClick.emit({ event, item: this.item.origin });
@@ -2710,12 +2790,9 @@ class NgxGanttBarComponent extends GanttItemUpper {
     stopPropagation(event) {
         event.stopPropagation();
     }
-    ngOnDestroy() {
-        super.onDestroy();
-    }
 }
-NgxGanttBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NgxGanttBarComponent, deps: [{ token: GanttDragContainer }, { token: GanttBarDrag }, { token: i0.ElementRef }, { token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-NgxGanttBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: NgxGanttBarComponent, selector: "ngx-gantt-bar,gantt-bar", outputs: { barClick: "barClick" }, host: { properties: { "class.gantt-bar": "this.ganttItemClass" } }, providers: [GanttBarDrag], viewQueries: [{ propertyName: "contentElementRef", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"gantt-bar-layer\">\n  <div *ngIf=\"item.draggable && ganttUpper.draggable\" class=\"drag-handles\">\n    <ng-container>\n      <span class=\"handle\" (mousedown)=\"stopPropagation($event)\"></span>\n      <span class=\"handle\" (mousedown)=\"stopPropagation($event)\"></span>\n    </ng-container>\n  </div>\n  <div *ngIf=\"item.linkable && ganttUpper.linkable\" class=\"link-handles\">\n    <span class=\"handle\"><span class=\"point\"></span></span>\n    <span class=\"handle\"> <span class=\"point\"></span></span>\n  </div>\n</div>\n<div class=\"gantt-bar-border\"></div>\n<div #content class=\"gantt-bar-content\" (click)=\"onBarClick($event)\">\n  <div class=\"gantt-bar-content-progress\" *ngIf=\"item.progress >= 0\" [style.width.%]=\"item.progress * 100\"></div>\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"></ng-template>\n</div>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+NgxGanttBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NgxGanttBarComponent, deps: [{ token: GanttDragContainer }, { token: GanttBarDrag }, { token: i0.ElementRef }, { token: GANTT_UPPER_TOKEN }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+NgxGanttBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: NgxGanttBarComponent, selector: "ngx-gantt-bar,gantt-bar", outputs: { barClick: "barClick" }, host: { properties: { "class.gantt-bar": "this.ganttItemClass" } }, providers: [GanttBarDrag], viewQueries: [{ propertyName: "contentElementRef", first: true, predicate: ["content"], descendants: true }, { propertyName: "handles", predicate: ["handle"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"gantt-bar-layer\">\n  <div *ngIf=\"item.draggable && ganttUpper.draggable\" class=\"drag-handles\">\n    <ng-container>\n      <span class=\"handle\" #handle></span>\n      <span class=\"handle\" #handle></span>\n    </ng-container>\n  </div>\n  <div *ngIf=\"item.linkable && ganttUpper.linkable\" class=\"link-handles\">\n    <span class=\"handle\"><span class=\"point\"></span></span>\n    <span class=\"handle\"> <span class=\"point\"></span></span>\n  </div>\n</div>\n<div class=\"gantt-bar-border\"></div>\n<div #content class=\"gantt-bar-content\" (click)=\"onBarClick($event)\">\n  <div class=\"gantt-bar-content-progress\" *ngIf=\"item.progress >= 0\" [style.width.%]=\"item.progress * 100\"></div>\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"></ng-template>\n</div>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NgxGanttBarComponent, decorators: [{
             type: Component,
             args: [{
@@ -2726,7 +2803,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
         }], ctorParameters: function () { return [{ type: GanttDragContainer }, { type: GanttBarDrag }, { type: i0.ElementRef }, { type: GanttUpper, decorators: [{
                     type: Inject,
                     args: [GANTT_UPPER_TOKEN]
-                }] }]; }, propDecorators: { barClick: [{
+                }] }, { type: i0.NgZone }]; }, propDecorators: { barClick: [{
                 type: Output
             }], contentElementRef: [{
                 type: ViewChild,
@@ -2734,6 +2811,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
             }], ganttItemClass: [{
                 type: HostBinding,
                 args: ['class.gantt-bar']
+            }], handles: [{
+                type: ViewChildren,
+                args: ['handle']
             }] } });
 
 class GanttMainComponent {
@@ -2743,7 +2823,6 @@ class GanttMainComponent {
         this.lineClick = new EventEmitter();
         this.ganttMainClass = true;
     }
-    ngOnInit() { }
     trackBy(index, item) {
         return item.id || index;
     }
@@ -2792,13 +2871,20 @@ class NgxGanttComponent extends GanttUpper {
         this.sideTableWidth = sideWidth;
     }
     ngOnInit() {
-        super.onInit();
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            this.dragContainer.linkDragStarted.pipe(takeUntil(this.ngUnsubscribe$)).subscribe((event) => {
-                this.linkDragStarted.emit(event);
-            });
-            this.dragContainer.linkDragEnded.pipe(takeUntil(this.ngUnsubscribe$)).subscribe((event) => {
-                this.linkDragEnded.emit(event);
+        super.ngOnInit();
+        // Note: the zone may be nooped through `BootstrapOptions` when bootstrapping the root module. This means
+        // the `onStable` will never emit any value.
+        const onStable$ = this.ngZone.isStable ? from(Promise.resolve()) : this.ngZone.onStable.pipe(take(1));
+        // Normally this isn't in the zone, but it can cause performance regressions for apps
+        // using `zone-patch-rxjs` because it'll trigger a change detection when it unsubscribes.
+        this.ngZone.runOutsideAngular(() => {
+            onStable$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+                this.dragContainer.linkDragStarted.pipe(takeUntil(this.ngUnsubscribe$)).subscribe((event) => {
+                    this.linkDragStarted.emit(event);
+                });
+                this.dragContainer.linkDragEnded.pipe(takeUntil(this.ngUnsubscribe$)).subscribe((event) => {
+                    this.linkDragEnded.emit(event);
+                });
             });
         });
     }
@@ -2812,9 +2898,6 @@ class NgxGanttComponent extends GanttUpper {
             this.cdr.detectChanges();
         });
     }
-    ngOnChanges(changes) {
-        super.onChanges(changes);
-    }
     expandChildren(item) {
         if (!item.expanded) {
             item.setExpand(true);
@@ -2858,9 +2941,6 @@ class NgxGanttComponent extends GanttUpper {
             this.selectedChange.emit({ event, selectedValue: _selectedValue });
         }
     }
-    ngOnDestroy() {
-        super.onDestroy();
-    }
 }
 NgxGanttComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", 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.5", type: NgxGanttComponent, selector: "ngx-gantt", inputs: { maxLevel: "maxLevel", async: "async", childrenResolve: "childrenResolve", linkable: "linkable" }, outputs: { linkDragStarted: "linkDragStarted", linkDragEnded: "linkDragEnded", lineClick: "lineClick", selectedChange: "selectedChange" }, providers: [
@@ -2872,7 +2952,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\n      [groups]=\"groups\"\n      [items]=\"items\"\n      [columns]=\"columns\"\n      [groupTemplate]=\"groupTemplate\"\n      [emptyTemplate]=\"tableEmptyTemplate\"\n      [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n      [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n      (itemClick)=\"selectItem($event)\"\n    ></gantt-table>\n  </ng-template>\n  <ng-template #mainTemplate>\n    <gantt-main\n      [groups]=\"groups\"\n      [items]=\"items\"\n      [groupHeaderTemplate]=\"groupHeaderTemplate\"\n      [itemTemplate]=\"itemTemplate\"\n      [barTemplate]=\"barTemplate\"\n      [rangeTemplate]=\"rangeTemplate\"\n      (barClick)=\"barClick.emit($event)\"\n      (lineClick)=\"lineClick.emit($event)\"\n    >\n    </gantt-main>\n  </ng-template>\n</ngx-gantt-root>\n", components: [{ type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: ["sideWidth"] }, { type: GanttTableComponent, selector: "gantt-table", inputs: ["groups", "items", "columns", "groupTemplate", "emptyTemplate", "rowBeforeTemplate", "rowAfterTemplate"], outputs: ["itemClick"] }, { type: GanttMainComponent, selector: "gantt-main", inputs: ["groups", "items", "groupHeaderTemplate", "itemTemplate", "barTemplate", "rangeTemplate"], outputs: ["barClick", "lineClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], 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, 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      (itemClick)=\"selectItem($event)\"\n    ></gantt-table>\n  </ng-template>\n  <ng-template #mainTemplate>\n    <gantt-main\n      [groups]=\"groups\"\n      [items]=\"items\"\n      [groupHeaderTemplate]=\"groupHeaderTemplate\"\n      [itemTemplate]=\"itemTemplate\"\n      [barTemplate]=\"barTemplate\"\n      [rangeTemplate]=\"rangeTemplate\"\n      (barClick)=\"barClick.emit($event)\"\n      (lineClick)=\"lineClick.emit($event)\"\n    >\n    </gantt-main>\n  </ng-template>\n</ngx-gantt-root>\n", components: [{ type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: ["sideWidth"] }, { type: GanttTableComponent, selector: "gantt-table", inputs: ["groups", "items", "columns", "groupTemplate", "emptyTemplate", "rowBeforeTemplate", "rowAfterTemplate"], outputs: ["itemClick"] }, { type: GanttMainComponent, selector: "gantt-main", inputs: ["groups", "items", "groupHeaderTemplate", "itemTemplate", "barTemplate", "rangeTemplate"], outputs: ["barClick", "lineClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NgxGanttComponent, decorators: [{
             type: Component,
             args: [{