@worktile/gantt 18.0.3 → 18.0.5

package/fesm2022/worktile-gantt.mjs

@@ -4,10 +4,10 @@ import * as i1$1 from '@angular/cdk/scrolling';
 import { CdkScrollable, CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf, ScrollingModule } from '@angular/cdk/scrolling';
 import { isPlatformServer, NgIf, NgTemplateOutlet, NgFor, NgStyle, NgClass, DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, Directive, Inject, Input, Output, ContentChild, HostBinding, Injectable, PLATFORM_ID, Component, ViewChild, ViewChildren, Pipe, ElementRef, Optional, HostListener, forwardRef, ChangeDetectionStrategy, ContentChildren, NgModule } from '@angular/core';
+import { InjectionToken, EventEmitter, Directive, Inject, Input, Output, ContentChild, HostBinding, Injectable, signal, PLATFORM_ID, effect, Component, ViewChild, ViewChildren, Pipe, ElementRef, Optional, HostListener, forwardRef, ChangeDetectionStrategy, ContentChildren, NgModule } from '@angular/core';
 import { fromUnixTime, getWeek, getDaysInMonth, differenceInCalendarDays, setDate, addSeconds, addMinutes, addHours, addDays, addWeeks, addMonths, addQuarters, addYears, startOfMinute, startOfHour, startOfDay, startOfWeek, startOfMonth, startOfQuarter, startOfYear, endOfMinute, endOfHour, endOfDay, endOfWeek, endOfMonth, endOfQuarter, endOfYear, getUnixTime, format, isWeekend, isToday, differenceInHours, differenceInMinutes, differenceInDays, differenceInCalendarQuarters, eachMonthOfInterval, eachYearOfInterval, eachWeekOfInterval, eachDayOfInterval, differenceInCalendarYears, eachHourOfInterval, setDefaultOptions } from 'date-fns';
 export { addDays, addHours, addMinutes, addMonths, addQuarters, addSeconds, addWeeks, addYears, differenceInCalendarDays, differenceInCalendarQuarters, differenceInDays, differenceInMinutes, eachDayOfInterval, eachHourOfInterval, eachMonthOfInterval, eachWeekOfInterval, endOfDay, endOfHour, endOfMinute, endOfMonth, endOfQuarter, endOfWeek, endOfYear, format, fromUnixTime, getDaysInMonth, getUnixTime, getWeek, isToday, isWeekend, setDate, startOfDay, startOfHour, startOfMinute, startOfMonth, startOfQuarter, startOfWeek, startOfYear } from 'date-fns';
-import { BehaviorSubject, Subject, from, fromEvent, merge, Observable, EMPTY, interval, animationFrameScheduler, takeUntil as takeUntil$1, startWith as startWith$1, auditTime as auditTime$1, filter } from 'rxjs';
+import { BehaviorSubject, Subject, from, fromEvent, merge, Observable, EMPTY, interval, animationFrameScheduler, take as take$1, takeUntil as takeUntil$1, combineLatest, startWith as startWith$1, auditTime as auditTime$1, filter } from 'rxjs';
 import { take, takeUntil, skip, map, pairwise, auditTime, startWith, switchMap, debounceTime, finalize } from 'rxjs/operators';
 import { SelectionModel } from '@angular/cdk/collections';
 import { coerceBooleanProperty, coerceCssPixelValue } from '@angular/cdk/coercion';
@@ -36,7 +36,9 @@ class GanttLineClickEvent {
 }
 class GanttBarClickEvent {
 }
-class GanttSelectedEvent {
+class GanttTableItemClickEvent {
+}
+class GanttSelectedEvent extends GanttTableItemClickEvent {
 }
 class GanttTableDragDroppedEvent {
 }
@@ -1044,6 +1046,7 @@ class GanttUpper {
             viewTypes: [GanttViewType.day, GanttViewType.month, GanttViewType.year]
         };
         this.viewOptions = {};
+        this.quickTimeFocus = false;
         this.loadOnScroll = new EventEmitter();
         this.dragStarted = new EventEmitter();
         this.dragMoved = new EventEmitter();
@@ -1296,7 +1299,7 @@ class GanttUpper {
         this.changeView(this.viewType);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.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: "18.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: "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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.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", quickTimeFocus: "quickTimeFocus" }, 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: "18.2.0", ngImport: i0, type: GanttUpper, decorators: [{
             type: Directive
@@ -1338,6 +1341,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 type: Input
             }], multiple: [{
                 type: Input
+            }], quickTimeFocus: [{
+                type: Input
             }], loadOnScroll: [{
                 type: Output
             }], dragStarted: [{
@@ -1547,6 +1552,7 @@ class GanttDomService {
     constructor(ngZone, platformId) {
         this.ngZone = ngZone;
         this.platformId = platformId;
+        this.visibleRangeX = signal({ min: 0, max: 0 });
         this.unsubscribe$ = new Subject();
     }
     monitorScrollChange() {
@@ -1623,6 +1629,7 @@ class GanttDomService {
         this.mainScrollbar && scrollObservers.push(fromEvent(this.mainScrollbar, 'scroll', options));
         return new Observable((subscriber) => this.ngZone.runOutsideAngular(() => merge(...scrollObservers)
             .pipe(map(() => this.mainContainer.scrollLeft), pairwise(), map(([previous, current]) => {
+            this.setVisibleRangeX();
             const event = {
                 target: this.mainContainer,
                 direction: ScrollDirection.NONE
@@ -1645,6 +1652,14 @@ class GanttDomService {
     getResize() {
         return isPlatformServer(this.platformId) ? EMPTY : fromEvent(window, 'resize').pipe(auditTime(150));
     }
+    getResizeByElement(element) {
+        return new Observable((observer) => {
+            const resizeObserver = new ResizeObserver(() => {
+                observer.next();
+            });
+            resizeObserver.observe(element);
+        });
+    }
     scrollMainContainer(left) {
         if (isNumber(left)) {
             const scrollLeft = left - this.mainContainer.clientWidth / 2;
@@ -1655,6 +1670,12 @@ class GanttDomService {
             this.mainFooter && (this.mainFooter.scrollLeft = this.mainContainer.scrollLeft);
         }
     }
+    setVisibleRangeX() {
+        this.visibleRangeX.set({
+            min: this.mainContainer.scrollLeft,
+            max: this.mainContainer.scrollLeft + this.mainContainer.clientWidth
+        });
+    }
     ngOnDestroy() {
         this.unsubscribe$.next();
         this.unsubscribe$.complete();
@@ -1686,10 +1707,10 @@ function createSvgElement(qualifiedName, className) {
 }
 class GanttBarDrag {
     get dragDisabled() {
-        return !this.item.draggable || !this.ganttUpper.draggable;
+        return !this.item().draggable || !this.ganttUpper.draggable;
     }
     get linkDragDisabled() {
-        return !this.item.linkable || !this.ganttUpper.linkable;
+        return !this.item().linkable || !this.ganttUpper.linkable;
     }
     get barHandleDragMoveAndScrollDistance() {
         return this.barHandleDragMoveDistance + this.dragScrollDistance;
@@ -1702,7 +1723,9 @@ class GanttBarDrag {
         this.dom = dom;
         this.dragContainer = dragContainer;
         this._ngZone = _ngZone;
-        this.dragRefs = [];
+        this.item = signal(null);
+        this.linkDragRefs = [];
+        this.barHandleDragRefs = [];
         this.destroy$ = new Subject();
         /** Used to signal to the current auto-scroll sequence when to stop. */
         this.stopScrollTimers$ = new Subject();
@@ -1733,6 +1756,12 @@ class GanttBarDrag {
                 }
             });
         };
+        effect(() => {
+            const item = this.item();
+            if (item) {
+                this.createDrags();
+            }
+        });
     }
     createDragRef(element) {
         const dragRef = this.dragDrop.createDrag(element);
@@ -1742,40 +1771,46 @@ class GanttBarDrag {
         return fromEvent(this.dom.mainContainer, 'scroll', passiveListenerOptions).pipe(takeUntil(dragRef.ended));
     }
     createMouseEvents() {
-        const dropClass = this.ganttUpper.config.linkOptions?.dependencyTypes?.length === 1 &&
-            this.ganttUpper.config.linkOptions?.dependencyTypes[0] === GanttLinkType.fs
-            ? singleDropActiveClass
-            : dropActiveClass;
-        fromEvent(this.barElement, 'mouseenter', passiveListenerOptions)
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-            if (this.dragContainer.linkDraggingId && this.dragContainer.linkDraggingId !== this.item.id) {
-                if (this.item.linkable) {
-                    this.barElement.classList.add(dropClass);
-                    this.dragContainer.emitLinkDragEntered({
-                        item: this.item,
-                        element: this.barElement
-                    });
+        if (!this.hasMonitorMouseEvent && (!this.dragDisabled || !this.linkDragDisabled)) {
+            this.hasMonitorMouseEvent = true;
+            const dropClass = this.ganttUpper.config.linkOptions?.dependencyTypes?.length === 1 &&
+                this.ganttUpper.config.linkOptions?.dependencyTypes[0] === GanttLinkType.fs
+                ? singleDropActiveClass
+                : dropActiveClass;
+            fromEvent(this.barElement, 'mouseenter', passiveListenerOptions)
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(() => {
+                if (this.dragContainer.linkDraggingId && this.dragContainer.linkDraggingId !== this.item().id) {
+                    if (!this.linkDragDisabled) {
+                        this.barElement.classList.add(dropClass);
+                        this.dragContainer.emitLinkDragEntered({
+                            item: this.item(),
+                            element: this.barElement
+                        });
+                    }
                 }
-            }
-            else {
-                this.barElement.classList.add(activeClass);
-            }
-        });
-        fromEvent(this.barElement, 'mouseleave', passiveListenerOptions)
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-            if (!this.dragContainer.linkDraggingId) {
-                this.barElement.classList.remove(activeClass);
-            }
-            else {
-                this.dragContainer.emitLinkDragLeaved();
-            }
-            this.barElement.classList.remove(dropClass);
-        });
+                else {
+                    if (!this.dragDisabled || !this.linkDragDisabled) {
+                        this.barElement.classList.add(activeClass);
+                    }
+                }
+            });
+            fromEvent(this.barElement, 'mouseleave', passiveListenerOptions)
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(() => {
+                if (!this.dragContainer.linkDraggingId) {
+                    this.barElement.classList.remove(activeClass);
+                }
+                else {
+                    this.dragContainer.emitLinkDragLeaved();
+                }
+                this.barElement.classList.remove(dropClass);
+            });
+        }
     }
     createBarDrag() {
         const dragRef = this.createDragRef(this.barElement);
+        dragRef.disabled = this.dragDisabled;
         dragRef.lockAxis = 'x';
         dragRef.withBoundaryElement(this.dom.mainItems);
         dragRef.started.subscribe(() => {
@@ -1789,7 +1824,7 @@ class GanttBarDrag {
                     this.barDragMove();
                 }
             });
-            this.dragContainer.dragStarted.emit({ item: this.item.origin });
+            this.dragContainer.dragStarted.emit({ item: this.item().origin });
         });
         dragRef.moved.subscribe((event) => {
             this.startScrollingIfNecessary(event.pointerPosition.x, event.pointerPosition.y);
@@ -1806,14 +1841,13 @@ class GanttBarDrag {
             this.dragScrolling = false;
             this.dragScrollDistance = 0;
             this.barDragMoveDistance = 0;
-            this.item.updateRefs({
-                width: this.ganttUpper.view.getDateRangeWidth(this.item.start, this.item.end),
-                x: this.ganttUpper.view.getXPointByDate(this.item.start),
+            this.item().updateRefs({
+                width: this.ganttUpper.view.getDateRangeWidth(this.item().start, this.item().end),
+                x: this.ganttUpper.view.getXPointByDate(this.item().start),
                 y: (this.ganttUpper.styles.lineHeight - this.ganttUpper.styles.barHeight) / 2 - 1
             });
-            this.dragContainer.dragEnded.emit({ item: this.item.origin });
+            this.dragContainer.dragEnded.emit({ item: this.item().origin });
         });
-        this.barDragRef = dragRef;
         return dragRef;
     }
     createBarHandleDrags() {
@@ -1822,6 +1856,7 @@ class GanttBarDrag {
         handles.forEach((handle, index) => {
             const isBefore = index === 0;
             const dragRef = this.createDragRef(handle);
+            dragRef.disabled = this.dragDisabled;
             dragRef.lockAxis = 'x';
             dragRef.withBoundaryElement(this.dom.mainItems);
             dragRef.started.subscribe(() => {
@@ -1844,7 +1879,7 @@ class GanttBarDrag {
                         }
                     }
                 });
-                this.dragContainer.dragStarted.emit({ item: this.item.origin });
+                this.dragContainer.dragStarted.emit({ item: this.item().origin });
             });
             dragRef.moved.subscribe((event) => {
                 if (this.barHandleDragMoveRecordDiffs && this.barHandleDragMoveRecordDiffs > 0) {
@@ -1868,12 +1903,12 @@ class GanttBarDrag {
                 this.dragScrolling = false;
                 this.dragScrollDistance = 0;
                 this.barHandleDragMoveDistance = 0;
-                this.item.updateRefs({
-                    width: this.ganttUpper.view.getDateRangeWidth(this.item.start, this.item.end),
-                    x: this.ganttUpper.view.getXPointByDate(this.item.start),
+                this.item().updateRefs({
+                    width: this.ganttUpper.view.getDateRangeWidth(this.item().start, this.item().end),
+                    x: this.ganttUpper.view.getXPointByDate(this.item().start),
                     y: (this.ganttUpper.styles.lineHeight - this.ganttUpper.styles.barHeight) / 2 - 1
                 });
-                this.dragContainer.dragEnded.emit({ item: this.item.origin });
+                this.dragContainer.dragEnded.emit({ item: this.item().origin });
             });
             dragRefs.push(dragRef);
         });
@@ -1885,6 +1920,7 @@ class GanttBarDrag {
         handles.forEach((handle, index) => {
             const isBegin = index === 0;
             const dragRef = this.dragDrop.createDrag(handle);
+            dragRef.disabled = this.linkDragDisabled;
             dragRef.withBoundaryElement(this.dom.root);
             dragRef.beforeStarted.subscribe(() => {
                 handle.style.pointerEvents = 'none';
@@ -1894,7 +1930,7 @@ class GanttBarDrag {
                 this.createLinkDraggingLine();
                 this.dragContainer.emitLinkDragStarted({
                     element: this.barElement,
-                    item: this.item,
+                    item: this.item(),
                     pos: isBegin ? InBarPosition.start : InBarPosition.finish
                 });
             });
@@ -1969,10 +2005,10 @@ class GanttBarDrag {
         this.barElement.classList.remove('gantt-bar-draggable-drag');
     }
     barDragMove() {
-        const currentX = this.item.refs.x + this.barDragMoveDistance + this.dragScrollDistance;
+        const currentX = this.item().refs.x + this.barDragMoveDistance + this.dragScrollDistance;
         const currentDate = this.ganttUpper.view.getDateByXPoint(currentX);
         const currentStartX = this.ganttUpper.view.getXPointByDate(currentDate);
-        const diffs = this.ganttUpper.view.differenceByPrecisionUnit(this.item.end, this.item.start);
+        const diffs = this.ganttUpper.view.differenceByPrecisionUnit(this.item().end, this.item().start);
         let start = currentDate;
         let end = currentDate.add(diffs, this.ganttUpper.view?.options?.datePrecisionUnit);
         // 日视图特殊逻辑处理
@@ -1987,59 +2023,59 @@ class GanttBarDrag {
             const left = currentX - this.barDragMoveDistance;
             this.barElement.style.left = left + 'px';
         }
-        this.openDragBackdrop(this.barElement, this.ganttUpper.view.getDateByXPoint(currentX), this.ganttUpper.view.getDateByXPoint(currentX + this.item.refs.width));
+        this.openDragBackdrop(this.barElement, this.ganttUpper.view.getDateByXPoint(currentX), this.ganttUpper.view.getDateByXPoint(currentX + this.item().refs.width));
         if (!this.isStartOrEndInsideView(start, end)) {
             return;
         }
         this.updateItemDate(start, end);
-        this.dragContainer.dragMoved.emit({ item: this.item.origin });
+        this.dragContainer.dragMoved.emit({ item: this.item().origin });
     }
     barBeforeHandleDragMove() {
         const { x, start, minRangeWidthWidth } = this.startOfBarHandle();
-        const width = this.item.refs.width + this.barHandleDragMoveAndScrollDistance * -1;
-        const diffs = this.ganttUpper.view.differenceByPrecisionUnit(this.item.end, start);
+        const width = this.item().refs.width + this.barHandleDragMoveAndScrollDistance * -1;
+        const diffs = this.ganttUpper.view.differenceByPrecisionUnit(this.item().end, start);
         if (width > dragMinWidth && diffs > 0) {
             this.barElement.style.width = width + 'px';
             this.barElement.style.left = x + 'px';
-            this.openDragBackdrop(this.barElement, start, this.item.end);
-            if (!this.isStartOrEndInsideView(start, this.item.end)) {
+            this.openDragBackdrop(this.barElement, start, this.item().end);
+            if (!this.isStartOrEndInsideView(start, this.item().end)) {
                 return;
             }
-            this.updateItemDate(start, this.item.end);
+            this.updateItemDate(start, this.item().end);
         }
         else {
             if (this.barHandleDragMoveRecordDiffs > 0 && diffs <= 0) {
                 this.barElement.style.width = minRangeWidthWidth + 'px';
-                const x = this.ganttUpper.view.getXPointByDate(this.item.end);
+                const x = this.ganttUpper.view.getXPointByDate(this.item().end);
                 this.barElement.style.left = x + 'px';
             }
-            this.openDragBackdrop(this.barElement, this.item.end, this.item.end);
-            this.updateItemDate(this.item.end, this.item.end);
+            this.openDragBackdrop(this.barElement, this.item().end, this.item().end);
+            this.updateItemDate(this.item().end, this.item().end);
         }
         this.barHandleDragMoveRecordDiffs = diffs;
-        this.dragContainer.dragMoved.emit({ item: this.item.origin });
+        this.dragContainer.dragMoved.emit({ item: this.item().origin });
     }
     barAfterHandleDragMove() {
         const { width, end } = this.endOfBarHandle();
-        const diffs = this.ganttUpper.view.differenceByPrecisionUnit(end, this.item.start);
+        const diffs = this.ganttUpper.view.differenceByPrecisionUnit(end, this.item().start);
         if (width > dragMinWidth && diffs > 0) {
             this.barElement.style.width = width + 'px';
-            this.openDragBackdrop(this.barElement, this.item.start, end);
-            if (!this.isStartOrEndInsideView(this.item.start, end)) {
+            this.openDragBackdrop(this.barElement, this.item().start, end);
+            if (!this.isStartOrEndInsideView(this.item().start, end)) {
                 return;
             }
-            this.updateItemDate(this.item.start, end);
+            this.updateItemDate(this.item().start, end);
         }
         else {
             if (this.barHandleDragMoveRecordDiffs > 0 && diffs <= 0) {
-                const minRangeWidth = this.ganttUpper.view.getMinRangeWidthByPrecisionUnit(this.item.start);
+                const minRangeWidth = this.ganttUpper.view.getMinRangeWidthByPrecisionUnit(this.item().start);
                 this.barElement.style.width = minRangeWidth + 'px';
             }
-            this.openDragBackdrop(this.barElement, this.item.start, this.item.start);
-            this.updateItemDate(this.item.start, this.item.start);
+            this.openDragBackdrop(this.barElement, this.item().start, this.item().start);
+            this.updateItemDate(this.item().start, this.item().start);
         }
         this.barHandleDragMoveRecordDiffs = diffs;
-        this.dragContainer.dragMoved.emit({ item: this.item.origin });
+        this.dragContainer.dragMoved.emit({ item: this.item().origin });
     }
     calcLinkLinePositions(target, isBefore) {
         const rootRect = this.dom.root.getBoundingClientRect();
@@ -2096,33 +2132,33 @@ class GanttBarDrag {
         const xThreshold = clientWidth * DROP_PROXIMITY_THRESHOLD;
         if (isBefore) {
             const { start, minRangeWidthWidth } = this.startOfBarHandle();
-            const xPointerByEndDate = this.ganttUpper.view.getXPointByDate(this.item.end);
-            isStartGreaterThanEnd = start.value > this.item.end.value;
+            const xPointerByEndDate = this.ganttUpper.view.getXPointByDate(this.item().end);
+            isStartGreaterThanEnd = start.value > this.item().end.value;
             isBarAppearsInView = xPointerByEndDate + minRangeWidthWidth + xThreshold <= scrollLeft + clientWidth;
         }
         else {
             const { end } = this.endOfBarHandle();
-            const xPointerByStartDate = this.ganttUpper.view.getXPointByDate(this.item.start);
-            isStartGreaterThanEnd = end.value < this.item.start.value;
+            const xPointerByStartDate = this.ganttUpper.view.getXPointByDate(this.item().start);
+            isStartGreaterThanEnd = end.value < this.item().start.value;
             isBarAppearsInView = scrollLeft + xThreshold <= xPointerByStartDate;
         }
         return isStartGreaterThanEnd && isBarAppearsInView ? true : false;
     }
     // Some data information about dragging start until it is equal to or greater than end
     startOfBarHandle() {
-        const x = this.item.refs.x + this.barHandleDragMoveAndScrollDistance;
+        const x = this.item().refs.x + this.barHandleDragMoveAndScrollDistance;
         return {
             x,
             start: this.ganttUpper.view.getDateByXPoint(x),
-            minRangeWidthWidth: this.ganttUpper.view.getMinRangeWidthByPrecisionUnit(this.item.end)
+            minRangeWidthWidth: this.ganttUpper.view.getMinRangeWidthByPrecisionUnit(this.item().end)
         };
     }
     // Some data information about dragging end of bar handle
     endOfBarHandle() {
-        const width = this.item.refs.width + this.barHandleDragMoveAndScrollDistance;
+        const width = this.item().refs.width + this.barHandleDragMoveAndScrollDistance;
         return {
             width,
-            end: this.ganttUpper.view.getDateByXPoint(this.item.refs.x + width)
+            end: this.ganttUpper.view.getDateByXPoint(this.item().refs.x + width)
         };
     }
     stopScrolling() {
@@ -2141,34 +2177,55 @@ class GanttBarDrag {
         }
     }
     updateItemDate(start, end) {
-        this.item.updateDate(this.ganttUpper.view.startOfPrecision(start), this.ganttUpper.view.endOfPrecision(end));
+        this.item().updateDate(this.ganttUpper.view.startOfPrecision(start), this.ganttUpper.view.endOfPrecision(end));
     }
-    createDrags(elementRef, item, ganttUpper) {
-        this.item = item;
+    initialize(elementRef, item, ganttUpper) {
         this.barElement = elementRef.nativeElement;
         this.ganttUpper = ganttUpper;
-        if (this.dragDisabled && this.linkDragDisabled) {
-            return;
+        this.item.set(item);
+    }
+    createBarDragRef() {
+        if (this.barDragRef) {
+            this.barDragRef.disabled = this.dragDisabled;
         }
-        else {
-            this.createMouseEvents();
-            if (!this.dragDisabled) {
-                const dragRef = this.createBarDrag();
-                const dragHandlesRefs = this.createBarHandleDrags();
-                this.dragRefs.push(dragRef, ...dragHandlesRefs);
-            }
-            if (!this.linkDragDisabled) {
-                const linkDragRefs = this.createLinkHandleDrags();
-                this.dragRefs.push(...linkDragRefs);
-            }
+        else if (!this.dragDisabled) {
+            this.barDragRef = this.createBarDrag();
+        }
+    }
+    createBarHandleDragRefs() {
+        if (this.barHandleDragRefs.length > 0) {
+            this.barHandleDragRefs.forEach((dragRef) => {
+                dragRef.disabled = this.dragDisabled;
+            });
+        }
+        else if (!this.dragDisabled) {
+            this.barHandleDragRefs = this.createBarHandleDrags();
+        }
+    }
+    createLinkDragRefs() {
+        if (this.linkDragRefs.length > 0) {
+            this.linkDragRefs.forEach((dragRef) => {
+                dragRef.disabled = this.linkDragDisabled;
+            });
+        }
+        else if (!this.linkDragDisabled) {
+            this.linkDragRefs = this.createLinkHandleDrags();
         }
     }
+    createDrags() {
+        this.createMouseEvents();
+        this.createBarDragRef();
+        this.createBarHandleDragRefs();
+        this.createLinkDragRefs();
+    }
     updateItem(item) {
-        this.item = item;
+        this.item.set(item);
     }
     ngOnDestroy() {
         this.closeDragBackdrop();
-        this.dragRefs.forEach((dragRef) => dragRef.dispose());
+        this.barDragRef?.dispose();
+        this.linkDragRefs?.forEach((dragRef) => dragRef.dispose());
+        this.barHandleDragRefs?.forEach((dragRef) => dragRef.dispose());
         this.destroy$.next();
         this.destroy$.complete();
         this.stopScrolling();
@@ -2293,7 +2350,7 @@ class NgxGanttBarComponent extends GanttItemUpper {
         // using `zone-patch-rxjs` because it'll trigger a change detection when it unsubscribes.
         this.ngZone.runOutsideAngular(() => {
             onStable$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
-                this.drag.createDrags(this.elementRef, this.item, this.ganttUpper);
+                this.drag.initialize(this.elementRef, this.item, this.ganttUpper);
             });
         });
         this.setContentBackground();
@@ -2623,6 +2680,8 @@ xmlns:xlink="http://www.w3.org/1999/xlink"
 </g>
 </svg>`;
 const dragIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fit="" preserveAspectRatio="xMidYMid meet" focusable="false"><g id="aijaction/drag--" stroke-width="1" fill-rule="evenodd"><g id="aij拖动" transform="translate(5 1)" fill-rule="nonzero"><path d="M1 2a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM1 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" id="aij形状结合"></path></g></g></svg>`;
+const arrowLeftIcon = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fit="" height="1em" width="1em" preserveAspectRatio="xMidYMid meet" focusable="false"><g id="adinavigation/arrow-left" stroke-width="1" fill-rule="evenodd"><path d="M7.4 4.15L4.438 7.315a.6.6 0 0 1-.876-.82l3.97-4.243a.598.598 0 0 1 .93-.057l3.97 4.323a.6.6 0 1 1-.885.812L8.6 4.118v9.149c0 .404-.269.733-.6.733-.332 0-.6-.329-.6-.733V4.15z" id="adi形状结合" transform="rotate(-90 7.995 8)"></path></g></svg>`;
+const arrowRightIcon = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fit="" height="1em" width="1em" preserveAspectRatio="xMidYMid meet" focusable="false"><g id="adlnavigation/arrow-right" stroke-width="1" fill-rule="evenodd"><path d="M7.4 4.15L4.438 7.315a.6.6 0 0 1-.876-.82l3.97-4.243a.598.598 0 0 1 .93-.057l3.97 4.323a.6.6 0 1 1-.885.812L8.6 4.118v9.149c0 .404-.269.733-.6.733-.332 0-.6-.329-.6-.733V4.15z" id="adl形状结合" transform="rotate(90 7.995 8)"></path></g></svg>`;
 const icons = {
     'angle-right': angleRight,
     'angle-down': angleDown,
@@ -2630,7 +2689,9 @@ const icons = {
     'minus-square': minusSquare,
     loading: loadingIcon,
     empty: emptyIcon,
-    drag: dragIcon
+    drag: dragIcon,
+    'arrow-left': arrowLeftIcon,
+    'arrow-right': arrowRightIcon
 };
 
 class GanttIconComponent {
@@ -3123,17 +3184,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             }] } });
 
 class GanttMainComponent {
-    constructor(ganttUpper) {
+    constructor(ganttUpper, dom, ngZone) {
         this.ganttUpper = ganttUpper;
+        this.dom = dom;
+        this.ngZone = ngZone;
         this.barClick = new EventEmitter();
         this.lineClick = new EventEmitter();
         this.ganttMainClass = true;
+        this.unsubscribe$ = new Subject();
+    }
+    ngOnInit() {
+        const onStable$ = this.ngZone.isStable ? from(Promise.resolve()) : this.ngZone.onStable.pipe(take$1(1));
+        this.ngZone.runOutsideAngular(() => {
+            onStable$.pipe(takeUntil$1(this.unsubscribe$)).subscribe(() => {
+                this.setupResize();
+            });
+        });
     }
     trackBy(index, item) {
         return item.id || index;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.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: "18.2.0", type: GanttMainComponent, isStandalone: true, 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\" [style.height.px]=\"ganttUpper.styles.lineHeight\" [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: "component", type: GanttLinksComponent, selector: "gantt-links-overlay", inputs: ["flatItems"], outputs: ["lineClick"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgxGanttRangeComponent, selector: "ngx-gantt-range,gantt-range" }, { kind: "component", type: NgxGanttBarComponent, selector: "ngx-gantt-bar,gantt-bar", outputs: ["barClick"] }, { 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" }] }); }
+    setupResize() {
+        combineLatest([this.dom.getResize(), this.dom.getResizeByElement(this.dom.mainContainer)])
+            .pipe(takeUntil$1(this.unsubscribe$))
+            .subscribe(() => {
+            this.dom.setVisibleRangeX();
+        });
+    }
+    quickTime(item, type) {
+        const date = type === 'left' ? item.start || item.end : item.end || item.start;
+        this.ganttRoot.scrollToDate(date);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttMainComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: GanttDomService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GanttMainComponent, isStandalone: true, selector: "gantt-main", inputs: { viewportItems: "viewportItems", flatItems: "flatItems", groupHeaderTemplate: "groupHeaderTemplate", itemTemplate: "itemTemplate", barTemplate: "barTemplate", rangeTemplate: "rangeTemplate", baselineTemplate: "baselineTemplate", ganttRoot: "ganttRoot", quickTimeFocus: "quickTimeFocus" }, 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\" [style.height.px]=\"ganttUpper.styles.lineHeight\" [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\n@if (quickTimeFocus) {\n<div class=\"gantt-quick-time-focus-container\" [style.width.px]=\"ganttUpper.view.width\">\n  <div class=\"gantt-quick-time-focus\" [style.width.px]=\"dom.visibleRangeX().max - dom.visibleRangeX().min\">\n    <ng-container *ngFor=\"let data of viewportItems; let i = index; trackBy: trackBy\">\n      <div class=\"gantt-quick-time-focus-item\" [style.height.px]=\"ganttUpper.styles.lineHeight\">\n        <span class=\"ml-2\">\n          @if ((data.refs.x < dom.visibleRangeX().min ) && data.refs.width ) {\n          <a class=\"gantt-quick-time-focus-item-arrow link-secondary\" href=\"javascript:;\" (click)=\"quickTime(data.origin, 'left')\">\n            <gantt-icon iconName=\"arrow-left\"></gantt-icon>\n          </a>\n          }\n        </span>\n\n        <span class=\"mr-2\">\n          @if((data.refs.x + data.refs.width > dom.visibleRangeX().max) && data.refs.width) {\n          <a class=\"gantt-quick-time-focus-item-arrow link-secondary\" href=\"javascript:;\" (click)=\"quickTime(data.origin, 'right')\">\n            <gantt-icon iconName=\"arrow-right\"></gantt-icon>\n          </a>\n          }\n        </span>\n      </div>\n    </ng-container>\n  </div>\n</div>\n}\n", dependencies: [{ kind: "component", type: GanttLinksComponent, selector: "gantt-links-overlay", inputs: ["flatItems"], outputs: ["lineClick"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgxGanttRangeComponent, selector: "ngx-gantt-range,gantt-range" }, { kind: "component", type: NgxGanttBarComponent, selector: "ngx-gantt-bar,gantt-bar", outputs: ["barClick"] }, { 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" }, { kind: "component", type: GanttIconComponent, selector: "gantt-icon", inputs: ["iconName"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttMainComponent, decorators: [{
             type: Component,
@@ -3148,12 +3231,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         NgxGanttBaselineComponent,
                         IsGanttRangeItemPipe,
                         IsGanttBarItemPipe,
-                        IsGanttCustomItemPipe
-                    ], 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\" [style.height.px]=\"ganttUpper.styles.lineHeight\" [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" }]
+                        IsGanttCustomItemPipe,
+                        GanttIconComponent
+                    ], 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\" [style.height.px]=\"ganttUpper.styles.lineHeight\" [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\n@if (quickTimeFocus) {\n<div class=\"gantt-quick-time-focus-container\" [style.width.px]=\"ganttUpper.view.width\">\n  <div class=\"gantt-quick-time-focus\" [style.width.px]=\"dom.visibleRangeX().max - dom.visibleRangeX().min\">\n    <ng-container *ngFor=\"let data of viewportItems; let i = index; trackBy: trackBy\">\n      <div class=\"gantt-quick-time-focus-item\" [style.height.px]=\"ganttUpper.styles.lineHeight\">\n        <span class=\"ml-2\">\n          @if ((data.refs.x < dom.visibleRangeX().min ) && data.refs.width ) {\n          <a class=\"gantt-quick-time-focus-item-arrow link-secondary\" href=\"javascript:;\" (click)=\"quickTime(data.origin, 'left')\">\n            <gantt-icon iconName=\"arrow-left\"></gantt-icon>\n          </a>\n          }\n        </span>\n\n        <span class=\"mr-2\">\n          @if((data.refs.x + data.refs.width > dom.visibleRangeX().max) && data.refs.width) {\n          <a class=\"gantt-quick-time-focus-item-arrow link-secondary\" href=\"javascript:;\" (click)=\"quickTime(data.origin, 'right')\">\n            <gantt-icon iconName=\"arrow-right\"></gantt-icon>\n          </a>\n          }\n        </span>\n      </div>\n    </ng-container>\n  </div>\n</div>\n}\n" }]
         }], ctorParameters: () => [{ type: GanttUpper, decorators: [{
                     type: Inject,
                     args: [GANTT_UPPER_TOKEN]
-                }] }], propDecorators: { viewportItems: [{
+                }] }, { type: GanttDomService }, { type: i0.NgZone }], propDecorators: { viewportItems: [{
                 type: Input
             }], flatItems: [{
                 type: Input
@@ -3167,6 +3251,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 type: Input
             }], baselineTemplate: [{
                 type: Input
+            }], ganttRoot: [{
+                type: Input
+            }], quickTimeFocus: [{
+                type: Input
             }], barClick: [{
                 type: Output
             }], lineClick: [{
@@ -3597,11 +3685,11 @@ class GanttTableBodyComponent {
         this.document.querySelectorAll('.drop-position-inside').forEach((element) => element.classList.remove('drop-position-inside'));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttTableBodyComponent, deps: [{ token: GANTT_ABSTRACT_TOKEN }, { token: GANTT_UPPER_TOKEN }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: GanttTableBodyComponent, isStandalone: true, selector: "gantt-table-body", inputs: { viewportItems: "viewportItems", flatItems: "flatItems", columns: "columns", groupTemplate: "groupTemplate", emptyTemplate: "emptyTemplate", rowBeforeTemplate: "rowBeforeTemplate", rowAfterTemplate: "rowAfterTemplate", draggable: "draggable", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", dragStarted: "dragStarted", dragEnded: "dragEnded", itemClick: "itemClick" }, host: { properties: { "class.gantt-table-draggable": "this.draggable", "class.gantt-table-body": "this.ganttTableClass", "class.gantt-table-empty": "this.ganttTableEmptyClass", "class.gantt-table-dragging": "this.ganttTableDragging" } }, viewQueries: [{ propertyName: "cdkDrags", predicate: (CdkDrag), descendants: true }], ngImport: i0, template: "<div\n  class=\"gantt-table-body-container\"\n  cdkDropList\n  [cdkDropListAutoScrollStep]=\"6\"\n  [cdkDropListData]=\"viewportItems\"\n  [cdkDropListSortingDisabled]=\"true\"\n  (cdkDropListDropped)=\"onListDropped($event)\"\n>\n  <ng-container *ngIf=\"!viewportItems?.length\">\n    <ng-container *ngIf=\"!emptyTemplate\">\n      <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n      <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n    </ng-container>\n    <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewportItems && viewportItems.length > 0\">\n    <ng-container *ngFor=\"let item of viewportItems; trackBy: trackBy\">\n      <div class=\"gantt-table-group\" [style.height.px]=\"gantt.styles.lineHeight\" [ngClass]=\"item.class\" *ngIf=\"item.items\">\n        <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n          <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n          <ng-container *ngIf=\"groupTemplate; else default\">\n            <ng-template\n              [ngTemplateOutlet]=\"groupTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n            ></ng-template>\n          </ng-container>\n          <ng-template #default>\n            <span class=\"group-title\">{{ item.title }}</span>\n          </ng-template>\n        </div>\n      </div>\n\n      <div\n        *ngIf=\"!item.items\"\n        (click)=\"itemClick.emit({ event: $event, selectedValue: item.origin })\"\n        cdkDrag\n        [cdkDragData]=\"item\"\n        [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n        (cdkDragStarted)=\"onItemDragStarted($event)\"\n        (cdkDragEnded)=\"onItemDragEnded($event)\"\n        (cdkDragMoved)=\"emitItemDragMoved($event)\"\n        class=\"gantt-table-item\"\n        [class.gantt-table-item-with-group]=\"hasGroup\"\n        [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n        [style.height.px]=\"gantt.styles.lineHeight\"\n        [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n        [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"rowBeforeTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n\n        <div [classList]=\"column.classList\" *ngFor=\"let column of columns; let first = first\" [style.width]=\"column.columnWidth\">\n          <!-- drag icon -->\n          <gantt-icon\n            *ngIf=\"first && draggable\"\n            class=\"gantt-drag-handle\"\n            iconName=\"drag\"\n            cdkDragHandle\n            [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n          ></gantt-icon>\n          <!-- expand icon -->\n          <div\n            *ngIf=\"column?.showExpandIcon || (!hasExpandIcon && first)\"\n            class=\"gantt-expand-icon\"\n            [style.marginLeft.px]=\"item.level * 20\"\n          >\n            <ng-container *ngIf=\"item.level < gantt.maxLevel - 1 && ((gantt.async && item.expandable) || item.children?.length > 0)\">\n              <gantt-icon\n                *ngIf=\"!item.loading\"\n                class=\"expand-icon\"\n                [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n                (click)=\"expandChildren($event, item)\"\n              >\n              </gantt-icon>\n              <gantt-icon *ngIf=\"item.loading\" [iconName]=\"'loading'\"></gantt-icon>\n            </ng-container>\n          </div>\n          <!-- column content -->\n          <div class=\"gantt-table-column-content\">\n            <ng-template\n              [ngTemplateOutlet]=\"column.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n            ></ng-template>\n          </div>\n        </div>\n        <ng-template\n          [ngTemplateOutlet]=\"rowAfterTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GanttIconComponent, selector: "gantt-icon", inputs: ["iconName"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: IsGanttRangeItemPipe, name: "isGanttRangeItem" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: GanttTableBodyComponent, isStandalone: true, selector: "gantt-table-body", inputs: { viewportItems: "viewportItems", flatItems: "flatItems", columns: "columns", groupTemplate: "groupTemplate", emptyTemplate: "emptyTemplate", rowBeforeTemplate: "rowBeforeTemplate", rowAfterTemplate: "rowAfterTemplate", draggable: "draggable", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", dragStarted: "dragStarted", dragEnded: "dragEnded", itemClick: "itemClick" }, host: { properties: { "class.gantt-table-draggable": "this.draggable", "class.gantt-table-body": "this.ganttTableClass", "class.gantt-table-empty": "this.ganttTableEmptyClass", "class.gantt-table-dragging": "this.ganttTableDragging" } }, viewQueries: [{ propertyName: "cdkDrags", predicate: (CdkDrag), descendants: true }], ngImport: i0, template: "<div\n  class=\"gantt-table-body-container\"\n  cdkDropList\n  [cdkDropListAutoScrollStep]=\"6\"\n  [cdkDropListData]=\"viewportItems\"\n  [cdkDropListSortingDisabled]=\"true\"\n  (cdkDropListDropped)=\"onListDropped($event)\"\n>\n  <ng-container *ngIf=\"!viewportItems?.length\">\n    <ng-container *ngIf=\"!emptyTemplate\">\n      <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n      <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n    </ng-container>\n    <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewportItems && viewportItems.length > 0\">\n    <ng-container *ngFor=\"let item of viewportItems; trackBy: trackBy\">\n      <div class=\"gantt-table-group\" [style.height.px]=\"gantt.styles.lineHeight\" [ngClass]=\"item.class\" *ngIf=\"item.items\">\n        <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n          <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n          <ng-container *ngIf=\"groupTemplate; else default\">\n            <ng-template\n              [ngTemplateOutlet]=\"groupTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n            ></ng-template>\n          </ng-container>\n          <ng-template #default>\n            <span class=\"group-title\">{{ item.title }}</span>\n          </ng-template>\n        </div>\n      </div>\n\n      <div\n        *ngIf=\"!item.items\"\n        (click)=\"itemClick.emit({ event: $event, current: item.origin, selectedValue: item.origin })\"\n        cdkDrag\n        [cdkDragData]=\"item\"\n        [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n        (cdkDragStarted)=\"onItemDragStarted($event)\"\n        (cdkDragEnded)=\"onItemDragEnded($event)\"\n        (cdkDragMoved)=\"emitItemDragMoved($event)\"\n        class=\"gantt-table-item\"\n        [class.gantt-table-item-with-group]=\"hasGroup\"\n        [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n        [style.height.px]=\"gantt.styles.lineHeight\"\n        [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n        [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"rowBeforeTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n\n        <div [classList]=\"column.classList\" *ngFor=\"let column of columns; let first = first\" [style.width]=\"column.columnWidth\">\n          <!-- drag icon -->\n          <gantt-icon\n            *ngIf=\"first && draggable\"\n            class=\"gantt-drag-handle\"\n            iconName=\"drag\"\n            cdkDragHandle\n            [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n          ></gantt-icon>\n          <!-- expand icon -->\n          <div\n            *ngIf=\"column?.showExpandIcon || (!hasExpandIcon && first)\"\n            class=\"gantt-expand-icon\"\n            [style.marginLeft.px]=\"item.level * 20\"\n          >\n            <ng-container *ngIf=\"item.level < gantt.maxLevel - 1 && ((gantt.async && item.expandable) || item.children?.length > 0)\">\n              <gantt-icon\n                *ngIf=\"!item.loading\"\n                class=\"expand-icon\"\n                [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n                (click)=\"expandChildren($event, item)\"\n              >\n              </gantt-icon>\n              <gantt-icon *ngIf=\"item.loading\" [iconName]=\"'loading'\"></gantt-icon>\n            </ng-container>\n          </div>\n          <!-- column content -->\n          <div class=\"gantt-table-column-content\">\n            <ng-template\n              [ngTemplateOutlet]=\"column.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n            ></ng-template>\n          </div>\n        </div>\n        <ng-template\n          [ngTemplateOutlet]=\"rowAfterTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GanttIconComponent, selector: "gantt-icon", inputs: ["iconName"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: IsGanttRangeItemPipe, name: "isGanttRangeItem" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttTableBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gantt-table-body', standalone: true, imports: [CdkDropList, NgIf, GanttIconComponent, NgTemplateOutlet, NgFor, NgClass, CdkDrag, CdkDragHandle, IsGanttRangeItemPipe], template: "<div\n  class=\"gantt-table-body-container\"\n  cdkDropList\n  [cdkDropListAutoScrollStep]=\"6\"\n  [cdkDropListData]=\"viewportItems\"\n  [cdkDropListSortingDisabled]=\"true\"\n  (cdkDropListDropped)=\"onListDropped($event)\"\n>\n  <ng-container *ngIf=\"!viewportItems?.length\">\n    <ng-container *ngIf=\"!emptyTemplate\">\n      <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n      <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n    </ng-container>\n    <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewportItems && viewportItems.length > 0\">\n    <ng-container *ngFor=\"let item of viewportItems; trackBy: trackBy\">\n      <div class=\"gantt-table-group\" [style.height.px]=\"gantt.styles.lineHeight\" [ngClass]=\"item.class\" *ngIf=\"item.items\">\n        <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n          <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n          <ng-container *ngIf=\"groupTemplate; else default\">\n            <ng-template\n              [ngTemplateOutlet]=\"groupTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n            ></ng-template>\n          </ng-container>\n          <ng-template #default>\n            <span class=\"group-title\">{{ item.title }}</span>\n          </ng-template>\n        </div>\n      </div>\n\n      <div\n        *ngIf=\"!item.items\"\n        (click)=\"itemClick.emit({ event: $event, selectedValue: item.origin })\"\n        cdkDrag\n        [cdkDragData]=\"item\"\n        [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n        (cdkDragStarted)=\"onItemDragStarted($event)\"\n        (cdkDragEnded)=\"onItemDragEnded($event)\"\n        (cdkDragMoved)=\"emitItemDragMoved($event)\"\n        class=\"gantt-table-item\"\n        [class.gantt-table-item-with-group]=\"hasGroup\"\n        [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n        [style.height.px]=\"gantt.styles.lineHeight\"\n        [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n        [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"rowBeforeTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n\n        <div [classList]=\"column.classList\" *ngFor=\"let column of columns; let first = first\" [style.width]=\"column.columnWidth\">\n          <!-- drag icon -->\n          <gantt-icon\n            *ngIf=\"first && draggable\"\n            class=\"gantt-drag-handle\"\n            iconName=\"drag\"\n            cdkDragHandle\n            [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n          ></gantt-icon>\n          <!-- expand icon -->\n          <div\n            *ngIf=\"column?.showExpandIcon || (!hasExpandIcon && first)\"\n            class=\"gantt-expand-icon\"\n            [style.marginLeft.px]=\"item.level * 20\"\n          >\n            <ng-container *ngIf=\"item.level < gantt.maxLevel - 1 && ((gantt.async && item.expandable) || item.children?.length > 0)\">\n              <gantt-icon\n                *ngIf=\"!item.loading\"\n                class=\"expand-icon\"\n                [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n                (click)=\"expandChildren($event, item)\"\n              >\n              </gantt-icon>\n              <gantt-icon *ngIf=\"item.loading\" [iconName]=\"'loading'\"></gantt-icon>\n            </ng-container>\n          </div>\n          <!-- column content -->\n          <div class=\"gantt-table-column-content\">\n            <ng-template\n              [ngTemplateOutlet]=\"column.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n            ></ng-template>\n          </div>\n        </div>\n        <ng-template\n          [ngTemplateOutlet]=\"rowAfterTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n" }]
+            args: [{ selector: 'gantt-table-body', standalone: true, imports: [CdkDropList, NgIf, GanttIconComponent, NgTemplateOutlet, NgFor, NgClass, CdkDrag, CdkDragHandle, IsGanttRangeItemPipe], template: "<div\n  class=\"gantt-table-body-container\"\n  cdkDropList\n  [cdkDropListAutoScrollStep]=\"6\"\n  [cdkDropListData]=\"viewportItems\"\n  [cdkDropListSortingDisabled]=\"true\"\n  (cdkDropListDropped)=\"onListDropped($event)\"\n>\n  <ng-container *ngIf=\"!viewportItems?.length\">\n    <ng-container *ngIf=\"!emptyTemplate\">\n      <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n      <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n    </ng-container>\n    <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewportItems && viewportItems.length > 0\">\n    <ng-container *ngFor=\"let item of viewportItems; trackBy: trackBy\">\n      <div class=\"gantt-table-group\" [style.height.px]=\"gantt.styles.lineHeight\" [ngClass]=\"item.class\" *ngIf=\"item.items\">\n        <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n          <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n          <ng-container *ngIf=\"groupTemplate; else default\">\n            <ng-template\n              [ngTemplateOutlet]=\"groupTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n            ></ng-template>\n          </ng-container>\n          <ng-template #default>\n            <span class=\"group-title\">{{ item.title }}</span>\n          </ng-template>\n        </div>\n      </div>\n\n      <div\n        *ngIf=\"!item.items\"\n        (click)=\"itemClick.emit({ event: $event, current: item.origin, selectedValue: item.origin })\"\n        cdkDrag\n        [cdkDragData]=\"item\"\n        [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n        (cdkDragStarted)=\"onItemDragStarted($event)\"\n        (cdkDragEnded)=\"onItemDragEnded($event)\"\n        (cdkDragMoved)=\"emitItemDragMoved($event)\"\n        class=\"gantt-table-item\"\n        [class.gantt-table-item-with-group]=\"hasGroup\"\n        [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n        [style.height.px]=\"gantt.styles.lineHeight\"\n        [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n        [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"rowBeforeTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n\n        <div [classList]=\"column.classList\" *ngFor=\"let column of columns; let first = first\" [style.width]=\"column.columnWidth\">\n          <!-- drag icon -->\n          <gantt-icon\n            *ngIf=\"first && draggable\"\n            class=\"gantt-drag-handle\"\n            iconName=\"drag\"\n            cdkDragHandle\n            [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n          ></gantt-icon>\n          <!-- expand icon -->\n          <div\n            *ngIf=\"column?.showExpandIcon || (!hasExpandIcon && first)\"\n            class=\"gantt-expand-icon\"\n            [style.marginLeft.px]=\"item.level * 20\"\n          >\n            <ng-container *ngIf=\"item.level < gantt.maxLevel - 1 && ((gantt.async && item.expandable) || item.children?.length > 0)\">\n              <gantt-icon\n                *ngIf=\"!item.loading\"\n                class=\"expand-icon\"\n                [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n                (click)=\"expandChildren($event, item)\"\n              >\n              </gantt-icon>\n              <gantt-icon *ngIf=\"item.loading\" [iconName]=\"'loading'\"></gantt-icon>\n            </ng-container>\n          </div>\n          <!-- column content -->\n          <div class=\"gantt-table-column-content\">\n            <ng-template\n              [ngTemplateOutlet]=\"column.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n            ></ng-template>\n          </div>\n        </div>\n        <ng-template\n          [ngTemplateOutlet]=\"rowAfterTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [GANTT_ABSTRACT_TOKEN]
@@ -3838,7 +3926,7 @@ class NgxGanttRootComponent {
         this.unsubscribe$.next();
     }
     setupViewScroll() {
-        if (this.ganttUpper.disabledLoadOnScroll) {
+        if (this.ganttUpper.disabledLoadOnScroll && !this.ganttUpper.quickTimeFocus) {
             return;
         }
         this.dom
@@ -3980,9 +4068,10 @@ class NgxGanttTableComponent {
         this.dragStarted = new EventEmitter();
         this.dragEnded = new EventEmitter();
         this.columnChanges = new EventEmitter();
+        this.itemClick = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgxGanttTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: NgxGanttTableComponent, isStandalone: true, selector: "ngx-gantt-table", inputs: { draggable: "draggable", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", dragStarted: "dragStarted", dragEnded: "dragEnded", columnChanges: "columnChanges" }, queries: [{ propertyName: "rowBeforeTemplate", first: true, predicate: ["rowBeforeSlot"], descendants: true, static: true }, { propertyName: "rowAfterTemplate", first: true, predicate: ["rowAfterSlot"], descendants: true, static: true }, { propertyName: "tableEmptyTemplate", first: true, predicate: ["tableEmpty"], descendants: true, static: true }, { propertyName: "tableFooterTemplate", first: true, predicate: ["tableFooter"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: NgxGanttTableComponent, isStandalone: true, selector: "ngx-gantt-table", inputs: { draggable: "draggable", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", dragStarted: "dragStarted", dragEnded: "dragEnded", columnChanges: "columnChanges", itemClick: "itemClick" }, queries: [{ propertyName: "rowBeforeTemplate", first: true, predicate: ["rowBeforeSlot"], descendants: true, static: true }, { propertyName: "rowAfterTemplate", first: true, predicate: ["rowAfterSlot"], descendants: true, static: true }, { propertyName: "tableEmptyTemplate", first: true, predicate: ["tableEmpty"], descendants: true, static: true }, { propertyName: "tableFooterTemplate", first: true, predicate: ["tableFooter"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgxGanttTableComponent, decorators: [{
             type: Component,
@@ -4003,6 +4092,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 type: Output
             }], columnChanges: [{
                 type: Output
+            }], itemClick: [{
+                type: Output
             }], rowBeforeTemplate: [{
                 type: ContentChild,
                 args: ['rowBeforeSlot', { static: true }]
@@ -4233,6 +4324,10 @@ class NgxGanttComponent extends GanttUpper {
         }
     }
     selectItem(selectEvent) {
+        this.table.itemClick.emit({
+            event: selectEvent.event,
+            current: selectEvent.current
+        });
         if (!this.selectable) {
             return;
         }
@@ -4296,7 +4391,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    [style.top.px]=\"styles.headerHeight\"\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)=\"itemDragStarted($event)\"\n            (dragEnded)=\"itemDragEnded($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  <gantt-scrollbar\n    [ganttRoot]=\"ganttRoot\"\n    [hasFooter]=\"!!table?.tableFooterTemplate\"\n    [tableWidth]=\"tableHeader.tableWidth\"\n  ></gantt-scrollbar>\n\n  <div\n    class=\"gantt-footer\"\n    *ngIf=\"table?.tableFooterTemplate || footerTemplate\"\n    [style.right.px]=\"ganttRoot.verticalScrollbarWidth\"\n    [style.bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n  >\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: "component", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: ["sideWidth"] }, { kind: "component", type: GanttTableHeaderComponent, selector: "gantt-table-header", inputs: ["columns"] }, { kind: "component", type: GanttCalendarHeaderComponent, selector: "gantt-calendar-header" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GanttLoaderComponent, selector: "gantt-loader" }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { 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: GanttCalendarGridComponent, selector: "gantt-calendar-grid" }, { kind: "component", type: GanttMainComponent, selector: "gantt-main", inputs: ["viewportItems", "flatItems", "groupHeaderTemplate", "itemTemplate", "barTemplate", "rangeTemplate", "baselineTemplate"], outputs: ["barClick", "lineClick"] }, { kind: "component", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }, { kind: "component", type: GanttScrollbarComponent, selector: "gantt-scrollbar", inputs: ["hasFooter", "tableWidth", "ganttRoot"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], 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    [style.top.px]=\"styles.headerHeight\"\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)=\"itemDragStarted($event)\"\n            (dragEnded)=\"itemDragEnded($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          [ganttRoot]=\"ganttRoot\"\n          [flatItems]=\"flatItems\"\n          [viewportItems]=\"viewportItems\"\n          [groupHeaderTemplate]=\"groupHeaderTemplate\"\n          [itemTemplate]=\"itemTemplate\"\n          [barTemplate]=\"barTemplate\"\n          [rangeTemplate]=\"rangeTemplate\"\n          [baselineTemplate]=\"baselineTemplate\"\n          [quickTimeFocus]=\"quickTimeFocus\"\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  <gantt-scrollbar\n    [ganttRoot]=\"ganttRoot\"\n    [hasFooter]=\"!!table?.tableFooterTemplate\"\n    [tableWidth]=\"tableHeader.tableWidth\"\n  ></gantt-scrollbar>\n\n  <div\n    class=\"gantt-footer\"\n    *ngIf=\"table?.tableFooterTemplate || footerTemplate\"\n    [style.right.px]=\"ganttRoot.verticalScrollbarWidth\"\n    [style.bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n  >\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: "component", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: ["sideWidth"] }, { kind: "component", type: GanttTableHeaderComponent, selector: "gantt-table-header", inputs: ["columns"] }, { kind: "component", type: GanttCalendarHeaderComponent, selector: "gantt-calendar-header" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GanttLoaderComponent, selector: "gantt-loader" }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { 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: GanttCalendarGridComponent, selector: "gantt-calendar-grid" }, { kind: "component", type: GanttMainComponent, selector: "gantt-main", inputs: ["viewportItems", "flatItems", "groupHeaderTemplate", "itemTemplate", "barTemplate", "rangeTemplate", "baselineTemplate", "ganttRoot", "quickTimeFocus"], outputs: ["barClick", "lineClick"] }, { kind: "component", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }, { kind: "component", type: GanttScrollbarComponent, selector: "gantt-scrollbar", inputs: ["hasFooter", "tableWidth", "ganttRoot"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgxGanttComponent, decorators: [{
             type: Component,
@@ -4324,8 +4419,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         GanttMainComponent,
                         GanttDragBackdropComponent,
                         GanttScrollbarComponent,
-                        NgTemplateOutlet
-                    ], 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    [style.top.px]=\"styles.headerHeight\"\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)=\"itemDragStarted($event)\"\n            (dragEnded)=\"itemDragEnded($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  <gantt-scrollbar\n    [ganttRoot]=\"ganttRoot\"\n    [hasFooter]=\"!!table?.tableFooterTemplate\"\n    [tableWidth]=\"tableHeader.tableWidth\"\n  ></gantt-scrollbar>\n\n  <div\n    class=\"gantt-footer\"\n    *ngIf=\"table?.tableFooterTemplate || footerTemplate\"\n    [style.right.px]=\"ganttRoot.verticalScrollbarWidth\"\n    [style.bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n  >\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" }]
+                        NgTemplateOutlet,
+                        NgFor
+                    ], 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    [style.top.px]=\"styles.headerHeight\"\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)=\"itemDragStarted($event)\"\n            (dragEnded)=\"itemDragEnded($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          [ganttRoot]=\"ganttRoot\"\n          [flatItems]=\"flatItems\"\n          [viewportItems]=\"viewportItems\"\n          [groupHeaderTemplate]=\"groupHeaderTemplate\"\n          [itemTemplate]=\"itemTemplate\"\n          [barTemplate]=\"barTemplate\"\n          [rangeTemplate]=\"rangeTemplate\"\n          [baselineTemplate]=\"baselineTemplate\"\n          [quickTimeFocus]=\"quickTimeFocus\"\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  <gantt-scrollbar\n    [ganttRoot]=\"ganttRoot\"\n    [hasFooter]=\"!!table?.tableFooterTemplate\"\n    [tableWidth]=\"tableHeader.tableWidth\"\n  ></gantt-scrollbar>\n\n  <div\n    class=\"gantt-footer\"\n    *ngIf=\"table?.tableFooterTemplate || footerTemplate\"\n    [style.right.px]=\"ganttRoot.verticalScrollbarWidth\"\n    [style.bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n  >\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: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$1.ViewportRuler }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [GANTT_GLOBAL_CONFIG]
@@ -4493,5 +4589,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { GANTT_GLOBAL_CONFIG, GANTT_UPPER_TOKEN, GanttBarClickEvent, GanttBaselineItemInternal, GanttCalendarGridComponent, GanttCalendarHeaderComponent, GanttDate, GanttDatePoint, GanttDragBackdropComponent, GanttDragEvent, GanttGroupInternal, GanttItemInternal, GanttItemType, GanttItemUpper, GanttLineClickEvent, GanttLinkDragEvent, GanttLinkLineType, GanttLinkType, GanttLoadOnScrollEvent, GanttLoaderComponent, GanttPrintService, GanttScrollbarComponent, GanttSelectedEvent, GanttTableDragDroppedEvent, GanttTableDragEndedEvent, GanttTableDragEnterPredicateContext, GanttTableDragStartedEvent, GanttTableEvent, GanttUpper, GanttView, GanttViewType, GanttVirtualScrolledIndexChangeEvent, IsGanttBarItemPipe, IsGanttCustomItemPipe, IsGanttRangeItemPipe, LinkColors, NgxGanttBarComponent, NgxGanttBaselineComponent, NgxGanttComponent, NgxGanttModule, NgxGanttRangeComponent, NgxGanttRootComponent, NgxGanttTableColumnComponent, NgxGanttTableComponent, NgxGanttToolbarComponent, defaultConfig, ganttViews, primaryDatePointTop, registerView, secondaryDatePointTop };
+export { GANTT_GLOBAL_CONFIG, GANTT_UPPER_TOKEN, GanttBarClickEvent, GanttBaselineItemInternal, GanttCalendarGridComponent, GanttCalendarHeaderComponent, GanttDate, GanttDatePoint, GanttDragBackdropComponent, GanttDragEvent, GanttGroupInternal, GanttItemInternal, GanttItemType, GanttItemUpper, GanttLineClickEvent, GanttLinkDragEvent, GanttLinkLineType, GanttLinkType, GanttLoadOnScrollEvent, GanttLoaderComponent, GanttPrintService, GanttScrollbarComponent, GanttSelectedEvent, GanttTableDragDroppedEvent, GanttTableDragEndedEvent, GanttTableDragEnterPredicateContext, GanttTableDragStartedEvent, GanttTableEvent, GanttTableItemClickEvent, GanttUpper, GanttView, GanttViewType, GanttVirtualScrolledIndexChangeEvent, IsGanttBarItemPipe, IsGanttCustomItemPipe, IsGanttRangeItemPipe, LinkColors, NgxGanttBarComponent, NgxGanttBaselineComponent, NgxGanttComponent, NgxGanttModule, NgxGanttRangeComponent, NgxGanttRootComponent, NgxGanttTableColumnComponent, NgxGanttTableComponent, NgxGanttToolbarComponent, defaultConfig, ganttViews, primaryDatePointTop, registerView, secondaryDatePointTop };
 //# sourceMappingURL=worktile-gantt.mjs.map