@worktile/gantt 19.0.8-next.5 → 20.0.0-next.1

package/fesm2022/worktile-gantt.mjs

@@ -1,18 +1,16 @@
-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, setDefaultOptions, differenceInHours, differenceInMinutes, differenceInDays, eachWeekOfInterval, eachDayOfInterval, eachHourOfInterval, differenceInCalendarQuarters, eachMonthOfInterval, eachYearOfInterval, differenceInCalendarYears } from 'date-fns';
+import { DragDrop, CdkDrag, CdkDropList, CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
+import { CdkScrollable, ViewportRuler, CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf, ScrollingModule } from '@angular/cdk/scrolling';
+import { isPlatformServer, NgTemplateOutlet, NgStyle, NgClass, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, NgZone, PLATFORM_ID, signal, Injectable, InjectionToken, ElementRef, ChangeDetectorRef, EventEmitter, HostBinding, ContentChild, Output, Input, Directive, effect, ViewChildren, ViewChild, Component, Inject, Pipe, input, DOCUMENT, HostListener, forwardRef, ContentChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { BehaviorSubject, Subject, fromEvent, Observable, merge, EMPTY, from, interval, animationFrameScheduler, take as take$1, takeUntil as takeUntil$1, combineLatest, startWith as startWith$1, auditTime as auditTime$1, filter } from 'rxjs';
+import { takeUntil, map, pairwise, auditTime, take, skip, startWith, switchMap, debounceTime, finalize } from 'rxjs/operators';
+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 { TZDate } from '@date-fns/tz';
-import { BehaviorSubject, Subject, from, fromEvent, Observable, merge, EMPTY, interval, animationFrameScheduler, takeUntil as takeUntil$1, take as take$1, combineLatest, startWith as startWith$1, auditTime as auditTime$1, filter } from 'rxjs';
-import { isPlatformServer, NgTemplateOutlet, NgStyle, NgClass, DOCUMENT, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { InjectionToken, inject, Inject, Injectable, EventEmitter, HostBinding, ContentChild, Output, Input, Directive, signal, PLATFORM_ID, effect, ViewChildren, ViewChild, Component, NgZone, input, ElementRef, Pipe, HostListener, Optional, forwardRef, ContentChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import { take, takeUntil, skip, map, pairwise, auditTime, startWith, switchMap, debounceTime, finalize } from 'rxjs/operators';
-import { coerceBooleanProperty, coerceCssPixelValue } from '@angular/cdk/coercion';
-import { SelectionModel } from '@angular/cdk/collections';
 import { de, ru } from 'date-fns/locale';
-import * as i1 from '@angular/cdk/drag-drop';
-import { CdkDrag, CdkDropList, CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i1$1 from '@angular/cdk/scrolling';
-import { CdkScrollable, CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf, ScrollingModule } from '@angular/cdk/scrolling';
+import { SelectionModel } from '@angular/cdk/collections';
+import { coerceBooleanProperty, coerceCssPixelValue } from '@angular/cdk/coercion';
 import { __decorate, __param } from 'tslib';
 
 class GanttDatePoint {
@@ -378,186 +376,6 @@ class GanttBaselineItemInternal {
     }
 }
 
-const sideWidth = 400;
-const sideMiddleWidth = 500;
-const sideMaxWidth = 600;
-const sideMinWidth = 400;
-const barBackground = '#6698ff';
-const rangeHeight = 17;
-const todayHeight = 24;
-const todayWidth = 35;
-const todayBorderRadius = 4;
-
-var GanttI18nLocale;
-(function (GanttI18nLocale) {
-    GanttI18nLocale["zhHans"] = "zh-hans";
-    GanttI18nLocale["zhHant"] = "zh-hant";
-    GanttI18nLocale["enUs"] = "en-us";
-    GanttI18nLocale["deDe"] = "de-de";
-    GanttI18nLocale["jaJp"] = "ja-jp";
-    GanttI18nLocale["ruRu"] = "ru-ru";
-})(GanttI18nLocale || (GanttI18nLocale = {}));
-const GANTT_I18N_LOCALE_TOKEN = new InjectionToken('gantt-i18n-locale');
-
-var zhHansLocale = {
-    id: GanttI18nLocale.zhHans,
-    views: {
-        [GanttViewType.hour]: {
-            label: '小时',
-            dateFormats: {
-                primary: 'M月d日',
-                secondary: 'HH:mm'
-            }
-        },
-        [GanttViewType.day]: {
-            label: '天',
-            dateFormats: {
-                primary: 'yyyy年MM月',
-                secondary: 'd'
-            }
-        },
-        [GanttViewType.week]: {
-            label: '周',
-            dateFormats: {
-                primary: 'yyyy年',
-                secondary: '第w周'
-            }
-        },
-        [GanttViewType.month]: {
-            label: '月',
-            dateFormats: {
-                primary: `yyyy年'Q'Q`,
-                secondary: 'M月'
-            }
-        },
-        [GanttViewType.quarter]: {
-            label: '季',
-            dateFormats: {
-                primary: 'yyyy年',
-                secondary: `yyyy年'Q'Q`
-            }
-        },
-        [GanttViewType.year]: {
-            label: '年',
-            dateFormats: {
-                secondary: 'yyyy年'
-            }
-        }
-    }
-};
-
-var zhHantLocale = {
-    id: GanttI18nLocale.zhHant,
-    views: {
-        [GanttViewType.hour]: {
-            label: '小時',
-            dateFormats: {
-                primary: 'M月d日',
-                secondary: 'HH:mm'
-            }
-        },
-        [GanttViewType.day]: {
-            label: '天',
-            dateFormats: {
-                primary: 'yyyy年MM月',
-                secondary: 'd'
-            }
-        },
-        [GanttViewType.week]: {
-            label: '週',
-            dateFormats: {
-                primary: 'yyyy年',
-                secondary: '第w週'
-            }
-        },
-        [GanttViewType.month]: {
-            label: '月',
-            dateFormats: {
-                primary: `yyyy年'Q'Q`,
-                secondary: 'M月'
-            }
-        },
-        [GanttViewType.quarter]: {
-            label: '季',
-            dateFormats: {
-                primary: 'yyyy年',
-                secondary: `yyyy年'Q'Q`
-            }
-        },
-        [GanttViewType.year]: {
-            label: '年',
-            dateFormats: {
-                secondary: 'yyyy年'
-            }
-        }
-    }
-};
-
-const defaultConfig = {
-    locale: GanttI18nLocale.zhHans,
-    linkOptions: {
-        dependencyTypes: [GanttLinkType.fs],
-        showArrow: false,
-        lineType: GanttLinkLineType.curve
-    },
-    styleOptions: {
-        headerHeight: 44,
-        lineHeight: 44,
-        barHeight: 22
-    },
-    dateOptions: {
-        weekStartsOn: 1
-    }
-};
-const GANTT_GLOBAL_CONFIG = new InjectionToken('GANTT_GLOBAL_CONFIG');
-class GanttConfigService {
-    constructor(globalConfig) {
-        const localeId = globalConfig.locale || defaultConfig.locale;
-        this.config = {
-            locale: localeId,
-            dateFormat: Object.assign({}, defaultConfig.dateFormat, globalConfig.dateFormat),
-            styleOptions: Object.assign({}, defaultConfig.styleOptions, globalConfig.styleOptions),
-            linkOptions: Object.assign({}, defaultConfig.linkOptions, globalConfig.linkOptions),
-            dateOptions: Object.assign({}, defaultConfig.dateOptions, globalConfig.dateOptions)
-        };
-        this.i18nLocales = inject(GANTT_I18N_LOCALE_TOKEN).reduce((result, localeConfig) => {
-            result[localeConfig.id] = localeConfig; // 这里使用 `id` 作为 key
-            return result;
-        }, {
-            ['zh-cn']: zhHansLocale,
-            ['zh-tw']: zhHantLocale
-        });
-        if (this.config.dateOptions?.timeZone) {
-            setDefaultTimeZone(this.config.dateOptions.timeZone);
-        }
-        setDefaultOptions({
-            locale: this.getDateLocale(),
-            weekStartsOn: this.config?.dateOptions?.weekStartsOn
-        });
-    }
-    setLocale(locale) {
-        this.config.locale = locale;
-    }
-    getLocaleConfig() {
-        return this.i18nLocales[this.config.locale] ?? this.i18nLocales[this.config.locale.toLowerCase()] ?? zhHansLocale;
-    }
-    getViewsLocale() {
-        return this.getLocaleConfig().views;
-    }
-    getDateLocale() {
-        return this.config.dateOptions?.locale ?? this.getLocaleConfig().dateLocale;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttConfigService, deps: [{ token: GANTT_GLOBAL_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttConfigService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttConfigService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [GANTT_GLOBAL_CONFIG]
-                }] }] });
-
 function isNumber(value) {
     return typeof value === 'number';
 }
@@ -631,204 +449,118 @@ function keyBy(array, key) {
     return result;
 }
 
-var enUsLocale = {
-    id: GanttI18nLocale.enUs,
-    views: {
-        [GanttViewType.hour]: {
-            label: 'Hourly',
-            dateFormats: {
-                primary: 'MMM d',
-                secondary: 'HH:mm'
-            }
-        },
-        [GanttViewType.day]: {
-            label: 'Daily',
-            dateFormats: {
-                primary: 'MMM yyyy',
-                secondary: 'd'
-            }
-        },
-        [GanttViewType.week]: {
-            label: 'Weekly',
-            dateFormats: {
-                primary: 'yyyy',
-                secondary: 'wo'
-            }
-        },
-        [GanttViewType.month]: {
-            label: 'Monthly',
-            dateFormats: {
-                primary: "yyyy 'Q'Q",
-                secondary: 'MMM'
-            }
-        },
-        [GanttViewType.quarter]: {
-            label: 'Quarterly',
-            dateFormats: {
-                primary: 'yyyy',
-                secondary: "yyyy 'Q'Q"
-            }
-        },
-        [GanttViewType.year]: {
-            label: 'Yearly',
-            dateFormats: {
-                secondary: 'yyyy'
-            }
-        }
+const scrollThreshold = 50;
+var ScrollDirection;
+(function (ScrollDirection) {
+    ScrollDirection[ScrollDirection["NONE"] = 0] = "NONE";
+    ScrollDirection[ScrollDirection["LEFT"] = 1] = "LEFT";
+    ScrollDirection[ScrollDirection["RIGHT"] = 2] = "RIGHT";
+})(ScrollDirection || (ScrollDirection = {}));
+class GanttDomService {
+    constructor() {
+        this.ngZone = inject(NgZone);
+        this.platformId = inject(PLATFORM_ID);
+        this.visibleRangeX = signal({ min: 0, max: 0 }, ...(ngDevMode ? [{ debugName: "visibleRangeX" }] : []));
+        this.unsubscribe$ = new Subject();
     }
-};
-
-var jaJpLocale = {
-    id: GanttI18nLocale.jaJp,
-    views: {
-        [GanttViewType.hour]: {
-            label: '毎時',
-            dateFormats: {
-                primary: 'M月d日',
-                secondary: 'HH:mm'
+    disableBrowserWheelEvent() {
+        const container = this.mainContainer;
+        this.ngZone.runOutsideAngular(() => fromEvent(container, 'wheel')
+            .pipe(takeUntil(this.unsubscribe$))
+            .subscribe((event) => {
+            const delta = event.deltaX;
+            if (!delta) {
+                return;
             }
-        },
-        [GanttViewType.day]: {
-            label: '日',
-            dateFormats: {
-                primary: 'yyyy年M月d日',
-                secondary: 'd'
+            if ((container.scrollLeft + container.offsetWidth === container.scrollWidth && delta > 0) ||
+                (container.scrollLeft === 0 && delta < 0)) {
+                event.preventDefault();
             }
-        },
-        [GanttViewType.week]: {
-            label: '週',
-            dateFormats: {
-                primary: 'yyyy年',
-                secondary: '第w週'
-            }
-        },
-        [GanttViewType.month]: {
-            label: '月',
-            dateFormats: {
-                primary: `yyyy年M月`,
-                secondary: 'M月'
-            }
-        },
-        [GanttViewType.quarter]: {
-            label: '四半期',
-            dateFormats: {
-                primary: 'yyyy年',
-                secondary: `yyyy年第Q四半期`
-            }
-        },
-        [GanttViewType.year]: {
-            label: '年',
-            dateFormats: {
-                secondary: 'yyyy年'
-            }
-        }
+        }));
     }
-};
-
-var deDeLocale = {
-    id: GanttI18nLocale.deDe,
-    dateLocale: de,
-    views: {
-        [GanttViewType.hour]: {
-            label: 'Stündlich',
-            dateFormats: {
-                primary: 'dd. MMM',
-                secondary: 'HH:mm'
-            }
-        },
-        [GanttViewType.day]: {
-            label: 'Täglich',
-            dateFormats: {
-                primary: 'MMM yyyy',
-                secondary: 'd'
-            }
-        },
-        [GanttViewType.week]: {
-            label: 'Wöchentlich',
-            dateFormats: {
-                primary: 'yyyy',
-                secondary: `w. 'Woche'`
-            }
-        },
-        [GanttViewType.month]: {
-            label: 'Monatlich',
-            dateFormats: {
-                primary: 'MMM yyyy',
-                secondary: 'MMM'
-            }
-        },
-        [GanttViewType.quarter]: {
-            label: 'Vierteljährlich',
-            dateFormats: {
-                primary: 'yyyy',
-                secondary: `Q. 'Quartal' yyyy`
-            }
-        },
-        [GanttViewType.year]: {
-            label: 'Jährlich',
-            dateFormats: {
-                secondary: 'yyyy'
-            }
-        }
+    initialize(root) {
+        this.root = root.nativeElement;
+        this.side = this.root.getElementsByClassName('gantt-side')[0];
+        this.container = this.root.getElementsByClassName('gantt-container')[0];
+        this.sideContainer = this.root.getElementsByClassName('gantt-side-container')[0];
+        this.mainContainer = this.root.getElementsByClassName('gantt-main-container')[0];
+        this.mainScrollbar = this.root.getElementsByClassName('gantt-main-scrollbar')[0];
+        this.mainFooter = this.root.getElementsByClassName('gantt-container-footer')[0];
+        this.verticalScrollContainer = this.root.getElementsByClassName('gantt-scroll-container')[0];
+        const mainItems = this.mainContainer.getElementsByClassName('gantt-main-items')[0];
+        const mainGroups = this.mainContainer.getElementsByClassName('gantt-main-groups')[0];
+        this.mainItems = mainItems || mainGroups;
+        this.calendarHeader = this.root.getElementsByClassName('gantt-calendar-header')[0];
+        this.calendarOverlay = this.root.getElementsByClassName('gantt-calendar-grid')[0];
+        this.disableBrowserWheelEvent();
     }
-};
-
-var ruRuLocale = {
-    id: GanttI18nLocale.ruRu,
-    dateLocale: ru,
-    views: {
-        [GanttViewType.hour]: {
-            label: 'Ежечасно',
-            dateFormats: {
-                primary: 'd MMM',
-                secondary: 'HH:mm'
-            }
-        },
-        [GanttViewType.day]: {
-            label: 'Ежедневно',
-            dateFormats: {
-                primary: 'MMMM yyyy',
-                secondary: 'd'
-            }
-        },
-        [GanttViewType.week]: {
-            label: 'Еженедельно',
-            dateFormats: {
-                primary: 'yyyy',
-                secondary: 'Неделя w'
-            }
-        },
-        [GanttViewType.month]: {
-            label: 'Ежемесячно',
-            dateFormats: {
-                primary: 'MMMM yyyy',
-                secondary: 'MMM'
-            }
-        },
-        [GanttViewType.quarter]: {
-            label: 'Ежеквартально',
-            dateFormats: {
-                primary: 'yyyy',
-                secondary: 'Квартал Q yyyy'
+    /**
+     * @returns An observable that will emit outside the Angular zone. Note, consumers should re-enter the Angular zone
+     * to run the change detection if needed.
+     */
+    getViewerScroll(options) {
+        const scrollObservers = [fromEvent(this.mainContainer, 'scroll', options)];
+        this.mainFooter && scrollObservers.push(fromEvent(this.mainFooter, 'scroll', options));
+        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
+            };
+            if (current - previous < 0) {
+                if (this.mainContainer.scrollLeft < scrollThreshold && this.mainContainer.scrollLeft > 0) {
+                    event.direction = ScrollDirection.LEFT;
+                }
             }
-        },
-        [GanttViewType.year]: {
-            label: 'Ежегодно',
-            dateFormats: {
-                secondary: 'yyyy'
+            if (current - previous > 0) {
+                if (this.mainContainer.scrollWidth - this.mainContainer.clientWidth - this.mainContainer.scrollLeft <
+                    scrollThreshold) {
+                    event.direction = ScrollDirection.RIGHT;
+                }
             }
+            return event;
+        }))
+            .subscribe(subscriber)));
+    }
+    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;
+            this.mainContainer.scrollLeft = scrollLeft > scrollThreshold ? scrollLeft : 0;
+            this.calendarHeader.scrollLeft = this.mainContainer.scrollLeft;
+            this.calendarOverlay.scrollLeft = this.mainContainer.scrollLeft;
+            this.mainScrollbar && (this.mainScrollbar.scrollLeft = this.mainContainer.scrollLeft);
+            this.mainFooter && (this.mainFooter.scrollLeft = this.mainContainer.scrollLeft);
         }
     }
-};
-
-const i18nLocaleProvides = [
-    { provide: GANTT_I18N_LOCALE_TOKEN, useValue: zhHansLocale, multi: true },
-    { provide: GANTT_I18N_LOCALE_TOKEN, useValue: zhHantLocale, multi: true },
-    { provide: GANTT_I18N_LOCALE_TOKEN, useValue: enUsLocale, multi: true },
-    { provide: GANTT_I18N_LOCALE_TOKEN, useValue: jaJpLocale, multi: true },
-    { provide: GANTT_I18N_LOCALE_TOKEN, useValue: deDeLocale, multi: true },
-    { provide: GANTT_I18N_LOCALE_TOKEN, useValue: ruRuLocale, multi: true }
-];
+    setVisibleRangeX() {
+        this.visibleRangeX.set({
+            min: this.mainContainer.scrollLeft,
+            max: this.mainContainer.scrollLeft + this.mainContainer.clientWidth
+        });
+    }
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttDomService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttDomService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttDomService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
 
 const primaryDatePointTop = '40%';
 const secondaryDatePointTop = '80%';
@@ -873,9 +605,6 @@ class GanttView {
     endOf(date) {
         return this.viewEndOf(date);
     }
-    hideHoliday(date) {
-        return this.options.hoilday?.hideHoliday && this.options.hoilday?.isHoliday?.(date);
-    }
     startOfPrecision(date) {
         switch (this.options.datePrecisionUnit) {
             case 'minute':
@@ -916,10 +645,10 @@ class GanttView {
         return Number(result.toFixed(3));
     }
     initialize() {
-        this.cellWidth = this.getCellWidth();
         this.primaryDatePoints = this.getPrimaryDatePoints();
         this.secondaryDatePoints = this.getSecondaryDatePoints();
         this.width = this.getWidth();
+        this.cellWidth = this.getCellWidth();
         this.primaryWidth = this.getPrimaryWidth();
     }
     addStartDate() {
@@ -1005,198 +734,323 @@ class GanttView {
                 return this.getDayOccupancyWidth(date);
         }
     }
-    /**
-     * 根据起始日期和宽度计算结束日期
-     * @param start 起始日期
-     * @param width 视觉宽度
-     * @returns 结束日期
-     */
-    getEndDateByWidth(start, width) {
-        const startX = this.getXPointByDate(start);
-        // 减去偏移量避免因为 getDateRangeWidth 加了 1 秒而多算一天
-        const endX = startX + width - 0.1;
-        return this.getDateByXPoint(endX);
-    }
 }
 
-const viewOptions$5 = {
-    cellWidth: 35,
-    start: new GanttDate().startOfYear().startOfWeek(),
-    end: new GanttDate().endOfYear().endOfWeek(),
-    addAmount: 1,
-    addUnit: 'month',
-    dateDisplayFormats: zhHantLocale.views.day.dateFormats
-};
-class GanttViewDay extends GanttView {
-    constructor(start, end, options) {
-        super(start, end, Object.assign({}, viewOptions$5, options));
-        this.showTimeline = false;
-        this.viewType = GanttViewType.day;
-    }
-    viewStartOf(date) {
-        return date.startOfWeek();
-    }
-    viewEndOf(date) {
-        return date.endOfWeek();
-    }
-    getPrimaryWidth() {
-        return this.getCellWidth() * 7;
-    }
-    getDayOccupancyWidth(date) {
-        if (this.hideHoliday(date)) {
-            return 0;
-        }
-        return this.cellWidth;
-    }
-    getPrimaryDatePoints() {
-        const weeks = eachWeekOfInterval({ start: this.start.value, end: this.end.addSeconds(1).value });
-        const points = [];
-        for (let i = 0; i < weeks.length; i++) {
-            const weekStart = new GanttDate(weeks[i]);
-            const weekEnd = weekStart.addWeeks(1);
-            const increaseWeek = weekStart.getDaysInMonth() - weekStart.getDate() >= 3 ? 0 : 1;
-            const pointWidth = this.getDateIntervalWidth(weekStart, weekEnd);
-            const lastPoint = points[points.length - 1];
-            const point = new GanttDatePoint(weekStart, weekStart.addWeeks(increaseWeek).format(this.options.dateFormat?.yearMonth || this.options.dateDisplayFormats.primary), pointWidth / 2 + (lastPoint?.rightX || 0), primaryDatePointTop);
-            point.leftX = lastPoint?.rightX || 0;
-            point.rightX = point.leftX + pointWidth;
-            points.push(point);
-        }
-        return points;
-    }
-    getSecondaryDatePoints() {
-        const days = eachDayOfInterval({ start: this.start.value, end: this.end.value }).filter((day) => !this.hideHoliday(new GanttDate(day)));
-        const points = [];
-        for (let i = 0; i < days.length; i++) {
-            const start = new GanttDate(days[i]);
-            const point = new GanttDatePoint(start, start.format(this.options.dateDisplayFormats.secondary) || start.getDate().toString(), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop, {
-                isWeekend: start.isWeekend(),
-                isToday: start.isToday()
-            });
-            points.push(point);
-        }
-        return points;
-    }
-    getEndDateByWidth(start, width) {
-        if (!this.options.hoilday?.hideHoliday) {
-            return super.getEndDateByWidth(start, width);
-        }
-        // 通过宽度计算包含多少个工作日（每个工作日的宽度是 cellWidth）
-        const workingDaysCount = Math.round(width / this.getCellWidth());
-        let end = start;
-        let addedWorkingDays = 0;
-        let attempts = 0;
-        const maxAttempts = 365;
-        while (addedWorkingDays < workingDaysCount && attempts < maxAttempts) {
-            if (this.getDayOccupancyWidth(end) > 0) {
-                addedWorkingDays++;
-                if (addedWorkingDays < workingDaysCount) {
-                    end = end.addDays(1);
-                }
+var GanttI18nLocale;
+(function (GanttI18nLocale) {
+    GanttI18nLocale["zhHans"] = "zh-hans";
+    GanttI18nLocale["zhHant"] = "zh-hant";
+    GanttI18nLocale["enUs"] = "en-us";
+    GanttI18nLocale["deDe"] = "de-de";
+    GanttI18nLocale["jaJp"] = "ja-jp";
+    GanttI18nLocale["ruRu"] = "ru-ru";
+})(GanttI18nLocale || (GanttI18nLocale = {}));
+const GANTT_I18N_LOCALE_TOKEN = new InjectionToken('gantt-i18n-locale');
+
+var zhHans = {
+    id: GanttI18nLocale.zhHans,
+    views: {
+        [GanttViewType.hour]: {
+            label: '小时',
+            dateFormats: {
+                primary: 'M月d日',
+                secondary: 'HH:mm'
             }
-            else {
-                end = end.addDays(1);
+        },
+        [GanttViewType.day]: {
+            label: '天',
+            dateFormats: {
+                primary: 'yyyy年MM月',
+                secondary: 'd'
+            }
+        },
+        [GanttViewType.week]: {
+            label: '周',
+            dateFormats: {
+                primary: 'yyyy年',
+                secondary: '第w周'
+            }
+        },
+        [GanttViewType.month]: {
+            label: '月',
+            dateFormats: {
+                primary: `yyyy年'Q'Q`,
+                secondary: 'M月'
+            }
+        },
+        [GanttViewType.quarter]: {
+            label: '季',
+            dateFormats: {
+                primary: 'yyyy年',
+                secondary: `yyyy年'Q'Q`
+            }
+        },
+        [GanttViewType.year]: {
+            label: '年',
+            dateFormats: {
+                secondary: 'yyyy年'
             }
-            attempts++;
         }
-        return end;
     }
-}
-
-const viewOptions$4 = {
-    cellWidth: 80,
-    start: new GanttDate().startOfMonth(),
-    end: new GanttDate().endOfMonth(),
-    datePrecisionUnit: 'minute',
-    addAmount: 1,
-    addUnit: 'week',
-    dateDisplayFormats: zhHantLocale.views.hour.dateFormats,
-    dragPreviewDateFormat: 'HH:mm'
 };
-class GanttViewHour extends GanttView {
-    constructor(start, end, options) {
-        super(start, end, Object.assign({}, viewOptions$4, options));
-        this.showTimeline = true;
-        this.viewType = GanttViewType.hour;
-    }
-    viewStartOf(date) {
-        return date.startOfWeek();
-    }
-    viewEndOf(date) {
-        return date.endOfWeek();
-    }
-    getPrimaryWidth() {
-        return this.getCellWidth() * 24;
-    }
-    getDayOccupancyWidth() {
-        return this.cellWidth * 60;
-    }
-    getHourOccupancyWidth() {
-        return this.getDayOccupancyWidth() / 60;
-    }
-    getPrimaryDatePoints() {
-        const days = eachDayOfInterval({ start: this.start.value, end: this.end.value });
-        const points = [];
-        for (let i = 0; i < days.length; i++) {
-            const start = this.start.addDays(i);
-            const point = new GanttDatePoint(start, start.format(this.options.dateFormat?.day || this.options.dateDisplayFormats.primary), (this.getCellWidth() * 24) / 2 + i * (this.getCellWidth() * 24), primaryDatePointTop);
-            points.push(point);
+
+var zhHant = {
+    id: GanttI18nLocale.zhHant,
+    views: {
+        [GanttViewType.hour]: {
+            label: '小時',
+            dateFormats: {
+                primary: 'M月d日',
+                secondary: 'HH:mm'
+            }
+        },
+        [GanttViewType.day]: {
+            label: '天',
+            dateFormats: {
+                primary: 'yyyy年MM月',
+                secondary: 'd'
+            }
+        },
+        [GanttViewType.week]: {
+            label: '週',
+            dateFormats: {
+                primary: 'yyyy年',
+                secondary: '第w週'
+            }
+        },
+        [GanttViewType.month]: {
+            label: '月',
+            dateFormats: {
+                primary: `yyyy年'Q'Q`,
+                secondary: 'M月'
+            }
+        },
+        [GanttViewType.quarter]: {
+            label: '季',
+            dateFormats: {
+                primary: 'yyyy年',
+                secondary: `yyyy年'Q'Q`
+            }
+        },
+        [GanttViewType.year]: {
+            label: '年',
+            dateFormats: {
+                secondary: 'yyyy年'
+            }
         }
-        return points;
     }
-    getSecondaryDatePoints() {
-        const hours = eachHourOfInterval({ start: this.start.value, end: this.end.value });
-        const points = [];
-        for (let i = 0; i < hours.length; i++) {
-            const start = new GanttDate(hours[i]);
-            const point = new GanttDatePoint(start, start.format(this.options.dateFormat?.hour || this.options.dateDisplayFormats.secondary), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop, {
-                isWeekend: start.isWeekend(),
-                isToday: start.isToday()
-            });
-            points.push(point);
+};
+
+var enUsLocale = {
+    id: GanttI18nLocale.enUs,
+    views: {
+        [GanttViewType.hour]: {
+            label: 'Hourly',
+            dateFormats: {
+                primary: 'MMM d',
+                secondary: 'HH:mm'
+            }
+        },
+        [GanttViewType.day]: {
+            label: 'Daily',
+            dateFormats: {
+                primary: 'MMM yyyy',
+                secondary: 'd'
+            }
+        },
+        [GanttViewType.week]: {
+            label: 'Weekly',
+            dateFormats: {
+                primary: 'yyyy',
+                secondary: 'wo'
+            }
+        },
+        [GanttViewType.month]: {
+            label: 'Monthly',
+            dateFormats: {
+                primary: "yyyy 'Q'Q",
+                secondary: 'MMM'
+            }
+        },
+        [GanttViewType.quarter]: {
+            label: 'Quarterly',
+            dateFormats: {
+                primary: 'yyyy',
+                secondary: "yyyy 'Q'Q"
+            }
+        },
+        [GanttViewType.year]: {
+            label: 'Yearly',
+            dateFormats: {
+                secondary: 'yyyy'
+            }
         }
-        return points;
     }
-    getTodayXPoint() {
-        const toady = new GanttDate().startOfMinute();
-        if (toady.value > this.start.value && toady.value < this.end.value) {
-            const x = this.getXPointByDate(toady);
-            return x;
+};
+
+var jaJpLocale = {
+    id: GanttI18nLocale.jaJp,
+    views: {
+        [GanttViewType.hour]: {
+            label: '毎時',
+            dateFormats: {
+                primary: 'M月d日',
+                secondary: 'HH:mm'
+            }
+        },
+        [GanttViewType.day]: {
+            label: '日',
+            dateFormats: {
+                primary: 'yyyy年M月d日',
+                secondary: 'd'
+            }
+        },
+        [GanttViewType.week]: {
+            label: '週',
+            dateFormats: {
+                primary: 'yyyy年',
+                secondary: '第w週'
+            }
+        },
+        [GanttViewType.month]: {
+            label: '月',
+            dateFormats: {
+                primary: `yyyy年M月`,
+                secondary: 'M月'
+            }
+        },
+        [GanttViewType.quarter]: {
+            label: '四半期',
+            dateFormats: {
+                primary: 'yyyy年',
+                secondary: `yyyy年第Q四半期`
+            }
+        },
+        [GanttViewType.year]: {
+            label: '年',
+            dateFormats: {
+                secondary: 'yyyy年'
+            }
         }
-        else {
-            return null;
+    }
+};
+
+var deDeLocale = {
+    id: GanttI18nLocale.deDe,
+    dateLocale: de,
+    views: {
+        [GanttViewType.hour]: {
+            label: 'Stündlich',
+            dateFormats: {
+                primary: 'dd. MMM',
+                secondary: 'HH:mm'
+            }
+        },
+        [GanttViewType.day]: {
+            label: 'Täglich',
+            dateFormats: {
+                primary: 'MMM yyyy',
+                secondary: 'd'
+            }
+        },
+        [GanttViewType.week]: {
+            label: 'Wöchentlich',
+            dateFormats: {
+                primary: 'yyyy',
+                secondary: `w. 'Woche'`
+            }
+        },
+        [GanttViewType.month]: {
+            label: 'Monatlich',
+            dateFormats: {
+                primary: 'MMM yyyy',
+                secondary: 'MMM'
+            }
+        },
+        [GanttViewType.quarter]: {
+            label: 'Vierteljährlich',
+            dateFormats: {
+                primary: 'yyyy',
+                secondary: `Q. 'Quartal' yyyy`
+            }
+        },
+        [GanttViewType.year]: {
+            label: 'Jährlich',
+            dateFormats: {
+                secondary: 'yyyy'
+            }
         }
     }
-    getDateIntervalWidth(start, end) {
-        let result = 0;
-        const minutes = differenceInMinutes(end.value, start.value);
-        for (let i = 0; i < minutes; i++) {
-            result += this.getHourOccupancyWidth() / 60;
+};
+
+var ruRuLocale = {
+    id: GanttI18nLocale.ruRu,
+    dateLocale: ru,
+    views: {
+        [GanttViewType.hour]: {
+            label: 'Ежечасно',
+            dateFormats: {
+                primary: 'd MMM',
+                secondary: 'HH:mm'
+            }
+        },
+        [GanttViewType.day]: {
+            label: 'Ежедневно',
+            dateFormats: {
+                primary: 'MMMM yyyy',
+                secondary: 'd'
+            }
+        },
+        [GanttViewType.week]: {
+            label: 'Еженедельно',
+            dateFormats: {
+                primary: 'yyyy',
+                secondary: 'Неделя w'
+            }
+        },
+        [GanttViewType.month]: {
+            label: 'Ежемесячно',
+            dateFormats: {
+                primary: 'MMMM yyyy',
+                secondary: 'MMM'
+            }
+        },
+        [GanttViewType.quarter]: {
+            label: 'Ежеквартально',
+            dateFormats: {
+                primary: 'yyyy',
+                secondary: 'Квартал Q yyyy'
+            }
+        },
+        [GanttViewType.year]: {
+            label: 'Ежегодно',
+            dateFormats: {
+                secondary: 'yyyy'
+            }
         }
-        result = minutes >= 0 ? result : -result;
-        return Number(result.toFixed(3));
-    }
-    getDateByXPoint(x) {
-        const hourWidth = this.getHourOccupancyWidth();
-        const indexOfSecondaryDate = Math.max(Math.floor(x / hourWidth), 0);
-        const matchDate = this.secondaryDatePoints[Math.min(this.secondaryDatePoints.length - 1, indexOfSecondaryDate)];
-        const minuteWidth = hourWidth / 60;
-        const underOneHourMinutes = Math.floor((x % hourWidth) / minuteWidth);
-        return matchDate?.start.addMinutes(underOneHourMinutes);
     }
-}
+};
 
-const viewOptions$3 = {
+const i18nLocaleProvides = [
+    { provide: GANTT_I18N_LOCALE_TOKEN, useValue: zhHans, multi: true },
+    { provide: GANTT_I18N_LOCALE_TOKEN, useValue: zhHant, multi: true },
+    { provide: GANTT_I18N_LOCALE_TOKEN, useValue: enUsLocale, multi: true },
+    { provide: GANTT_I18N_LOCALE_TOKEN, useValue: jaJpLocale, multi: true },
+    { provide: GANTT_I18N_LOCALE_TOKEN, useValue: deDeLocale, multi: true },
+    { provide: GANTT_I18N_LOCALE_TOKEN, useValue: ruRuLocale, multi: true }
+];
+
+const viewOptions$5 = {
     start: new GanttDate().startOfQuarter().addQuarters(-1),
     end: new GanttDate().endOfQuarter().addQuarters(2),
     cellWidth: 280,
     addAmount: 1,
     addUnit: 'quarter',
-    dateDisplayFormats: zhHantLocale.views.month.dateFormats
+    dateDisplayFormats: zhHant.views.month.dateFormats
 };
 class GanttViewMonth extends GanttView {
     constructor(start, end, options) {
-        super(start, end, Object.assign({}, viewOptions$3, options));
+        super(start, end, Object.assign({}, viewOptions$5, options));
         this.viewType = GanttViewType.month;
     }
     viewStartOf(date) {
@@ -1233,7 +1087,7 @@ class GanttViewMonth extends GanttView {
     }
 }
 
-const viewOptions$2 = {
+const viewOptions$4 = {
     start: new GanttDate().addYears(-1).startOfYear(),
     end: new GanttDate().addYears(1).endOfYear(),
     min: new GanttDate().addYears(-2).startOfYear(),
@@ -1241,11 +1095,11 @@ const viewOptions$2 = {
     cellWidth: 500,
     addAmount: 1,
     addUnit: 'year',
-    dateDisplayFormats: zhHantLocale.views.quarter.dateFormats
+    dateDisplayFormats: zhHant.views.quarter.dateFormats
 };
 class GanttViewQuarter extends GanttView {
     constructor(start, end, options) {
-        super(start, end, Object.assign({}, viewOptions$2, options));
+        super(start, end, Object.assign({}, viewOptions$4, options));
         this.viewType = GanttViewType.quarter;
     }
     viewStartOf(date) {
@@ -1282,17 +1136,69 @@ class GanttViewQuarter extends GanttView {
     }
 }
 
-const viewOptions$1 = {
+const viewOptions$3 = {
+    cellWidth: 35,
+    start: new GanttDate().startOfYear().startOfWeek(),
+    end: new GanttDate().endOfYear().endOfWeek(),
+    addAmount: 1,
+    addUnit: 'month',
+    dateDisplayFormats: zhHant.views.day.dateFormats
+};
+class GanttViewDay extends GanttView {
+    constructor(start, end, options) {
+        super(start, end, Object.assign({}, viewOptions$3, options));
+        this.showTimeline = false;
+        this.viewType = GanttViewType.day;
+    }
+    viewStartOf(date) {
+        return date.startOfWeek();
+    }
+    viewEndOf(date) {
+        return date.endOfWeek();
+    }
+    getPrimaryWidth() {
+        return this.getCellWidth() * 7;
+    }
+    getDayOccupancyWidth() {
+        return this.cellWidth;
+    }
+    getPrimaryDatePoints() {
+        const weeks = eachWeekOfInterval({ start: this.start.value, end: this.end.addSeconds(1).value });
+        const points = [];
+        for (let i = 0; i < weeks.length; i++) {
+            const weekStart = new GanttDate(weeks[i]);
+            const increaseWeek = weekStart.getDaysInMonth() - weekStart.getDate() >= 3 ? 0 : 1;
+            const point = new GanttDatePoint(weekStart, weekStart.addWeeks(increaseWeek).format(this.options.dateFormat?.yearMonth || this.options.dateDisplayFormats.primary), (this.getCellWidth() * 7) / 2 + i * (this.getCellWidth() * 7), primaryDatePointTop);
+            points.push(point);
+        }
+        return points;
+    }
+    getSecondaryDatePoints() {
+        const days = eachDayOfInterval({ start: this.start.value, end: this.end.value });
+        const points = [];
+        for (let i = 0; i < days.length; i++) {
+            const start = new GanttDate(days[i]);
+            const point = new GanttDatePoint(start, start.format(this.options.dateDisplayFormats.secondary) || start.getDate().toString(), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop, {
+                isWeekend: start.isWeekend(),
+                isToday: start.isToday()
+            });
+            points.push(point);
+        }
+        return points;
+    }
+}
+
+const viewOptions$2 = {
     cellWidth: 280,
     start: new GanttDate().startOfYear().startOfWeek(),
     end: new GanttDate().endOfYear().endOfWeek(),
     addAmount: 1,
     addUnit: 'month',
-    dateDisplayFormats: zhHantLocale.views.week.dateFormats
+    dateDisplayFormats: zhHant.views.week.dateFormats
 };
 class GanttViewWeek extends GanttView {
     constructor(start, end, options) {
-        super(start, end, Object.assign({}, viewOptions$1, options));
+        super(start, end, Object.assign({}, viewOptions$2, options));
         this.viewType = GanttViewType.week;
     }
     viewStartOf(date) {
@@ -1330,17 +1236,17 @@ class GanttViewWeek extends GanttView {
     }
 }
 
-const viewOptions = {
+const viewOptions$1 = {
     cellWidth: 480,
     start: new GanttDate().addYears(-2).startOfYear(),
     end: new GanttDate().addYears(2).endOfYear(),
     addAmount: 1,
     addUnit: 'year',
-    dateDisplayFormats: zhHantLocale.views.year.dateFormats
+    dateDisplayFormats: zhHant.views.year.dateFormats
 };
 class GanttViewYear extends GanttView {
     constructor(start, end, options) {
-        super(start, end, Object.assign({}, viewOptions, options));
+        super(start, end, Object.assign({}, viewOptions$1, options));
         this.viewType = GanttViewType.year;
     }
     viewStartOf(date) {
@@ -1363,35 +1269,181 @@ class GanttViewYear extends GanttView {
             const point = new GanttDatePoint(start, ``, this.getCellWidth() / 2 + i * this.getCellWidth(), primaryDatePointTop);
             points.push(point);
         }
-        return points;
+        return points;
+    }
+    getSecondaryDatePoints() {
+        const years = differenceInCalendarYears(this.end.value, this.start.value);
+        const points = [];
+        const pointTop = '60%';
+        for (let i = 0; i <= years; i++) {
+            const start = this.start.addYears(i);
+            const point = new GanttDatePoint(start, `${start.format(this.options.dateFormat?.year || this.options.dateDisplayFormats.secondary || this.options.dateDisplayFormats.primary)}`, i * this.getCellWidth() + this.getCellWidth() / 2, pointTop);
+            points.push(point);
+        }
+        return points;
+    }
+}
+
+const viewOptions = {
+    cellWidth: 80,
+    start: new GanttDate().startOfMonth(),
+    end: new GanttDate().endOfMonth(),
+    datePrecisionUnit: 'minute',
+    addAmount: 1,
+    addUnit: 'week',
+    dateDisplayFormats: zhHant.views.hour.dateFormats,
+    dragPreviewDateFormat: 'HH:mm'
+};
+class GanttViewHour extends GanttView {
+    constructor(start, end, options) {
+        super(start, end, Object.assign({}, viewOptions, options));
+        this.showTimeline = true;
+        this.viewType = GanttViewType.hour;
+    }
+    viewStartOf(date) {
+        return date.startOfWeek();
+    }
+    viewEndOf(date) {
+        return date.endOfWeek();
+    }
+    getPrimaryWidth() {
+        return this.getCellWidth() * 24;
+    }
+    getDayOccupancyWidth() {
+        return this.cellWidth * 60;
+    }
+    getHourOccupancyWidth() {
+        return this.getDayOccupancyWidth() / 60;
+    }
+    getPrimaryDatePoints() {
+        const days = eachDayOfInterval({ start: this.start.value, end: this.end.value });
+        const points = [];
+        for (let i = 0; i < days.length; i++) {
+            const start = this.start.addDays(i);
+            const point = new GanttDatePoint(start, start.format(this.options.dateFormat?.day || this.options.dateDisplayFormats.primary), (this.getCellWidth() * 24) / 2 + i * (this.getCellWidth() * 24), primaryDatePointTop);
+            points.push(point);
+        }
+        return points;
+    }
+    getSecondaryDatePoints() {
+        const hours = eachHourOfInterval({ start: this.start.value, end: this.end.value });
+        const points = [];
+        for (let i = 0; i < hours.length; i++) {
+            const start = new GanttDate(hours[i]);
+            const point = new GanttDatePoint(start, start.format(this.options.dateFormat?.hour || this.options.dateDisplayFormats.secondary), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop, {
+                isWeekend: start.isWeekend(),
+                isToday: start.isToday()
+            });
+            points.push(point);
+        }
+        return points;
+    }
+    getTodayXPoint() {
+        const toady = new GanttDate().startOfMinute();
+        if (toady.value > this.start.value && toady.value < this.end.value) {
+            const x = this.getXPointByDate(toady);
+            return x;
+        }
+        else {
+            return null;
+        }
+    }
+    getDateIntervalWidth(start, end) {
+        let result = 0;
+        const minutes = differenceInMinutes(end.value, start.value);
+        for (let i = 0; i < minutes; i++) {
+            result += this.getHourOccupancyWidth() / 60;
+        }
+        result = minutes >= 0 ? result : -result;
+        return Number(result.toFixed(3));
+    }
+    getDateByXPoint(x) {
+        const hourWidth = this.getHourOccupancyWidth();
+        const indexOfSecondaryDate = Math.max(Math.floor(x / hourWidth), 0);
+        const matchDate = this.secondaryDatePoints[Math.min(this.secondaryDatePoints.length - 1, indexOfSecondaryDate)];
+        const minuteWidth = hourWidth / 60;
+        const underOneHourMinutes = Math.floor((x % hourWidth) / minuteWidth);
+        return matchDate?.start.addMinutes(underOneHourMinutes);
+    }
+}
+
+const ganttViewsMap = {
+    [GanttViewType.hour]: GanttViewHour,
+    [GanttViewType.day]: GanttViewDay,
+    [GanttViewType.week]: GanttViewWeek,
+    [GanttViewType.month]: GanttViewMonth,
+    [GanttViewType.quarter]: GanttViewQuarter,
+    [GanttViewType.year]: GanttViewYear
+};
+function registerView(type, view) {
+    ganttViewsMap[type] = view;
+}
+function createViewFactory(type, start, end, options) {
+    return new ganttViewsMap[type](start, end, options);
+}
+
+const defaultConfig = {
+    locale: GanttI18nLocale.zhHans,
+    linkOptions: {
+        dependencyTypes: [GanttLinkType.fs],
+        showArrow: false,
+        lineType: GanttLinkLineType.curve
+    },
+    styleOptions: {
+        headerHeight: 44,
+        lineHeight: 44,
+        barHeight: 22
+    },
+    dateOptions: {
+        weekStartsOn: 1
+    }
+};
+const GANTT_GLOBAL_CONFIG = new InjectionToken('GANTT_GLOBAL_CONFIG');
+class GanttConfigService {
+    constructor() {
+        const globalConfig = inject(GANTT_GLOBAL_CONFIG);
+        const localeId = globalConfig.locale || defaultConfig.locale;
+        this.config = {
+            locale: localeId,
+            dateFormat: Object.assign({}, defaultConfig.dateFormat, globalConfig.dateFormat),
+            styleOptions: Object.assign({}, defaultConfig.styleOptions, globalConfig.styleOptions),
+            linkOptions: Object.assign({}, defaultConfig.linkOptions, globalConfig.linkOptions),
+            dateOptions: Object.assign({}, defaultConfig.dateOptions, globalConfig.dateOptions)
+        };
+        this.i18nLocales = inject(GANTT_I18N_LOCALE_TOKEN).reduce((result, localeConfig) => {
+            result[localeConfig.id] = localeConfig; // 这里使用 `id` 作为 key
+            return result;
+        }, {
+            ['zh-cn']: zhHans,
+            ['zh-tw']: zhHant
+        });
+        if (this.config.dateOptions?.timeZone) {
+            setDefaultTimeZone(this.config.dateOptions.timeZone);
+        }
+        setDefaultOptions({
+            locale: this.getDateLocale(),
+            weekStartsOn: this.config?.dateOptions?.weekStartsOn
+        });
     }
-    getSecondaryDatePoints() {
-        const years = differenceInCalendarYears(this.end.value, this.start.value);
-        const points = [];
-        const pointTop = '60%';
-        for (let i = 0; i <= years; i++) {
-            const start = this.start.addYears(i);
-            const point = new GanttDatePoint(start, `${start.format(this.options.dateFormat?.year || this.options.dateDisplayFormats.secondary || this.options.dateDisplayFormats.primary)}`, i * this.getCellWidth() + this.getCellWidth() / 2, pointTop);
-            points.push(point);
-        }
-        return points;
+    setLocale(locale) {
+        this.config.locale = locale;
     }
+    getLocaleConfig() {
+        return this.i18nLocales[this.config.locale] ?? this.i18nLocales[this.config.locale.toLowerCase()] ?? zhHans;
+    }
+    getViewsLocale() {
+        return this.getLocaleConfig().views;
+    }
+    getDateLocale() {
+        return this.config.dateOptions?.locale ?? this.getLocaleConfig().dateLocale;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttConfigService, providedIn: 'root' }); }
 }
-
-const ganttViewsMap = {
-    [GanttViewType.hour]: GanttViewHour,
-    [GanttViewType.day]: GanttViewDay,
-    [GanttViewType.week]: GanttViewWeek,
-    [GanttViewType.month]: GanttViewMonth,
-    [GanttViewType.quarter]: GanttViewQuarter,
-    [GanttViewType.year]: GanttViewYear
-};
-function registerView(type, view) {
-    ganttViewsMap[type] = view;
-}
-function createViewFactory(type, start, end, options) {
-    return new ganttViewsMap[type](start, end, options);
-}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttConfigService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
 
 class GanttUpper {
     set linkOptions(options) {
@@ -1425,12 +1477,11 @@ class GanttUpper {
     get element() {
         return this.elementRef.nativeElement;
     }
-    constructor(elementRef, cdr, ngZone, // @Inject(GANTT_GLOBAL_CONFIG) public config: GanttGlobalConfig
-    config) {
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this.ngZone = ngZone;
-        this.config = config;
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.cdr = inject(ChangeDetectorRef);
+        this.ngZone = inject(NgZone);
+        this.config = inject(GANTT_GLOBAL_CONFIG);
         // eslint-disable-next-line @angular-eslint/no-input-rename
         this.originItems = [];
         // eslint-disable-next-line @angular-eslint/no-input-rename
@@ -1703,12 +1754,12 @@ class GanttUpper {
     rerenderView() {
         this.changeView(this.viewType);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttUpper, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.3", type: GanttUpper, isStandalone: true, 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttUpper, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: GanttUpper, isStandalone: true, 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: "19.2.3", ngImport: i0, type: GanttUpper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttUpper, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined }], propDecorators: { originItems: [{
+        }], ctorParameters: () => [], propDecorators: { originItems: [{
                 type: Input,
                 args: ['items']
             }], originGroups: [{
@@ -1786,65 +1837,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
             }] } });
 const GANTT_UPPER_TOKEN = new InjectionToken('GANTT_UPPER_TOKEN');
 
-class GanttItemUpper {
-    constructor(elementRef, ganttUpper) {
-        this.elementRef = elementRef;
-        this.ganttUpper = ganttUpper;
-        this.firstChange = true;
-        this.unsubscribe$ = new Subject();
-        this.refsUnsubscribe$ = new Subject();
-    }
-    ngOnInit() {
-        this.firstChange = false;
-        this.item.refs$.pipe(takeUntil(this.refsUnsubscribe$)).subscribe(() => {
-            this.setPositions();
-        });
-    }
-    ngOnChanges(changes) {
-        if (!this.firstChange) {
-            this.itemChange(changes.item.currentValue);
-        }
-    }
-    itemChange(item) {
-        this.refsUnsubscribe$.next();
-        this.refsUnsubscribe$.complete();
-        this.item = item;
-        this.item.refs$.pipe(takeUntil(this.refsUnsubscribe$)).subscribe(() => {
-            this.setPositions();
-        });
-    }
-    setPositions() {
-        const itemElement = this.elementRef.nativeElement;
-        itemElement.style.left = this.item.refs?.x + 'px';
-        itemElement.style.top = this.item.refs?.y + 'px';
-        itemElement.style.width = this.item.refs?.width + 'px';
-        if (this.item.type === GanttItemType.bar) {
-            itemElement.style.height = this.ganttUpper.styles.barHeight + 'px';
-        }
-        else if (this.item.type === GanttItemType.range) {
-            itemElement.style.height = rangeHeight + 'px';
-        }
-    }
-    ngOnDestroy() {
-        this.unsubscribe$.next();
-        this.unsubscribe$.complete();
-        this.refsUnsubscribe$.next();
-        this.refsUnsubscribe$.complete();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttItemUpper, deps: [{ token: i0.ElementRef }, { token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.3", type: GanttItemUpper, isStandalone: true, inputs: { template: "template", item: "item" }, usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttItemUpper, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: GanttUpper, decorators: [{
-                    type: Inject,
-                    args: [GANTT_UPPER_TOKEN]
-                }] }], propDecorators: { template: [{
-                type: Input
-            }], item: [{
-                type: Input
-            }] } });
-
 function getDependencyType(path, dependencyTypes) {
     if (dependencyTypes.includes(GanttLinkType.ss) && path.from.pos === InBarPosition.start && path.to.pos === InBarPosition.start) {
         return GanttLinkType.ss;
@@ -1863,8 +1855,8 @@ var InBarPosition;
     InBarPosition["finish"] = "finish";
 })(InBarPosition || (InBarPosition = {}));
 class GanttDragContainer {
-    constructor(ganttUpper) {
-        this.ganttUpper = ganttUpper;
+    constructor() {
+        this.ganttUpper = inject(GANTT_UPPER_TOKEN);
         this.dragStarted = new EventEmitter();
         this.dragMoved = new EventEmitter();
         this.dragEnded = new EventEmitter();
@@ -1908,15 +1900,12 @@ class GanttDragContainer {
         this.linkDraggingId = null;
         this.linkDragPath = { from: null, to: null };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttDragContainer, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttDragContainer }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttDragContainer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttDragContainer }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttDragContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttDragContainer, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: GanttUpper, decorators: [{
-                    type: Inject,
-                    args: [GANTT_UPPER_TOKEN]
-                }] }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Proximity, as a ratio to width/height at which to start auto-scrolling the drop list or the
@@ -2002,122 +1991,6 @@ function normalizePassiveListenerOptions(options) {
 /** Options used to bind passive event listeners. */
 const passiveListenerOptions = normalizePassiveListenerOptions({ passive: true });
 
-const scrollThreshold = 50;
-var ScrollDirection;
-(function (ScrollDirection) {
-    ScrollDirection[ScrollDirection["NONE"] = 0] = "NONE";
-    ScrollDirection[ScrollDirection["LEFT"] = 1] = "LEFT";
-    ScrollDirection[ScrollDirection["RIGHT"] = 2] = "RIGHT";
-})(ScrollDirection || (ScrollDirection = {}));
-class GanttDomService {
-    constructor(ngZone, platformId) {
-        this.ngZone = ngZone;
-        this.platformId = platformId;
-        this.visibleRangeX = signal({ min: 0, max: 0 });
-        this.unsubscribe$ = new Subject();
-    }
-    disableBrowserWheelEvent() {
-        const container = this.mainContainer;
-        this.ngZone.runOutsideAngular(() => fromEvent(container, 'wheel')
-            .pipe(takeUntil(this.unsubscribe$))
-            .subscribe((event) => {
-            const delta = event.deltaX;
-            if (!delta) {
-                return;
-            }
-            if ((container.scrollLeft + container.offsetWidth === container.scrollWidth && delta > 0) ||
-                (container.scrollLeft === 0 && delta < 0)) {
-                event.preventDefault();
-            }
-        }));
-    }
-    initialize(root) {
-        this.root = root.nativeElement;
-        this.side = this.root.getElementsByClassName('gantt-side')[0];
-        this.container = this.root.getElementsByClassName('gantt-container')[0];
-        this.sideContainer = this.root.getElementsByClassName('gantt-side-container')[0];
-        this.mainContainer = this.root.getElementsByClassName('gantt-main-container')[0];
-        this.mainScrollbar = this.root.getElementsByClassName('gantt-main-scrollbar')[0];
-        this.mainFooter = this.root.getElementsByClassName('gantt-container-footer')[0];
-        this.verticalScrollContainer = this.root.getElementsByClassName('gantt-scroll-container')[0];
-        const mainItems = this.mainContainer.getElementsByClassName('gantt-main-items')[0];
-        const mainGroups = this.mainContainer.getElementsByClassName('gantt-main-groups')[0];
-        this.mainItems = mainItems || mainGroups;
-        this.calendarHeader = this.root.getElementsByClassName('gantt-calendar-header')[0];
-        this.calendarOverlay = this.root.getElementsByClassName('gantt-calendar-grid')[0];
-        this.disableBrowserWheelEvent();
-    }
-    /**
-     * @returns An observable that will emit outside the Angular zone. Note, consumers should re-enter the Angular zone
-     * to run the change detection if needed.
-     */
-    getViewerScroll(options) {
-        const scrollObservers = [fromEvent(this.mainContainer, 'scroll', options)];
-        this.mainFooter && scrollObservers.push(fromEvent(this.mainFooter, 'scroll', options));
-        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
-            };
-            if (current - previous < 0) {
-                if (this.mainContainer.scrollLeft < scrollThreshold && this.mainContainer.scrollLeft > 0) {
-                    event.direction = ScrollDirection.LEFT;
-                }
-            }
-            if (current - previous > 0) {
-                if (this.mainContainer.scrollWidth - this.mainContainer.clientWidth - this.mainContainer.scrollLeft <
-                    scrollThreshold) {
-                    event.direction = ScrollDirection.RIGHT;
-                }
-            }
-            return event;
-        }))
-            .subscribe(subscriber)));
-    }
-    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;
-            this.mainContainer.scrollLeft = scrollLeft > scrollThreshold ? scrollLeft : 0;
-            this.calendarHeader.scrollLeft = this.mainContainer.scrollLeft;
-            this.calendarOverlay.scrollLeft = this.mainContainer.scrollLeft;
-            this.mainScrollbar && (this.mainScrollbar.scrollLeft = this.mainContainer.scrollLeft);
-            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();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttDomService, deps: [{ token: i0.NgZone }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttDomService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttDomService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }] });
-
 /**
  * Proximity, as a ratio to width/height, at which a
  * dragged item will affect the drop container.
@@ -2146,12 +2019,12 @@ class GanttBarDrag {
     get autoScrollStep() {
         return Math.pow(autoScrollBaseStep, this.autoScrollSpeedRates);
     }
-    constructor(dragDrop, dom, dragContainer, _ngZone) {
-        this.dragDrop = dragDrop;
-        this.dom = dom;
-        this.dragContainer = dragContainer;
-        this._ngZone = _ngZone;
-        this.item = signal(null);
+    constructor() {
+        this.dragDrop = inject(DragDrop);
+        this.dom = inject(GanttDomService);
+        this.dragContainer = inject(GanttDragContainer);
+        this._ngZone = inject(NgZone);
+        this.item = signal(null, ...(ngDevMode ? [{ debugName: "item" }] : []));
         this.linkDragRefs = [];
         this.barHandleDragRefs = [];
         this.destroy$ = new Subject();
@@ -2434,13 +2307,24 @@ class GanttBarDrag {
     }
     barDragMove() {
         const currentX = this.item().refs.x + this.barDragMoveDistance + this.dragScrollDistance;
-        const start = this.ganttUpper.view.getDateByXPoint(currentX);
-        const end = this.ganttUpper.view.getEndDateByWidth(start, this.item().refs.width);
+        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);
+        let start = currentDate;
+        let end = currentDate.add(diffs, this.ganttUpper.view?.options?.datePrecisionUnit);
+        // 日视图特殊逻辑处理
+        if (this.ganttUpper.view.viewType === GanttViewType.day) {
+            const dayWidth = this.ganttUpper.view.getDayOccupancyWidth(currentDate);
+            if (currentX > currentStartX + dayWidth / 2) {
+                start = start.addDays(1);
+                end = end.addDays(1);
+            }
+        }
         if (this.dragScrolling) {
             const left = currentX - this.barDragMoveDistance;
             this.barElement.style.left = left + 'px';
         }
-        this.openDragBackdrop(this.barElement, start, end);
+        this.openDragBackdrop(this.barElement, this.ganttUpper.view.getDateByXPoint(currentX), this.ganttUpper.view.getDateByXPoint(currentX + this.item().refs.width));
         if (!this.isStartOrEndInsideView(start, end)) {
             return;
         }
@@ -2629,42 +2513,108 @@ class GanttBarDrag {
             this.linkDragRefs = this.createLinkHandleDrags();
         }
     }
-    createDrags() {
-        this.createMouseEvents();
-        this.createBarDragRef();
-        this.createBarHandleDragRefs();
-        this.createLinkDragRefs();
+    createDrags() {
+        this.createMouseEvents();
+        this.createBarDragRef();
+        this.createBarHandleDragRefs();
+        this.createLinkDragRefs();
+    }
+    updateItem(item) {
+        this.item.set(item);
+    }
+    ngOnDestroy() {
+        this.closeDragBackdrop();
+        this.barDragRef?.dispose();
+        this.linkDragRefs?.forEach((dragRef) => dragRef.dispose());
+        this.barHandleDragRefs?.forEach((dragRef) => dragRef.dispose());
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.stopScrolling();
+        this.stopScrollTimers$.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttBarDrag, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttBarDrag }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttBarDrag, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+const sideWidth = 400;
+const sideMiddleWidth = 500;
+const sideMaxWidth = 600;
+const sideMinWidth = 400;
+const barBackground = '#6698ff';
+const rangeHeight = 17;
+const todayHeight = 24;
+const todayWidth = 35;
+const todayBorderRadius = 4;
+
+class GanttItemUpper {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.ganttUpper = inject(GANTT_UPPER_TOKEN);
+        this.firstChange = true;
+        this.unsubscribe$ = new Subject();
+        this.refsUnsubscribe$ = new Subject();
+    }
+    ngOnInit() {
+        this.firstChange = false;
+        this.item.refs$.pipe(takeUntil(this.refsUnsubscribe$)).subscribe(() => {
+            this.setPositions();
+        });
+    }
+    ngOnChanges(changes) {
+        if (!this.firstChange) {
+            this.itemChange(changes.item.currentValue);
+        }
+    }
+    itemChange(item) {
+        this.refsUnsubscribe$.next();
+        this.refsUnsubscribe$.complete();
+        this.item = item;
+        this.item.refs$.pipe(takeUntil(this.refsUnsubscribe$)).subscribe(() => {
+            this.setPositions();
+        });
     }
-    updateItem(item) {
-        this.item.set(item);
+    setPositions() {
+        const itemElement = this.elementRef.nativeElement;
+        itemElement.style.left = this.item.refs?.x + 'px';
+        itemElement.style.top = this.item.refs?.y + 'px';
+        itemElement.style.width = this.item.refs?.width + 'px';
+        if (this.item.type === GanttItemType.bar) {
+            itemElement.style.height = this.ganttUpper.styles.barHeight + 'px';
+        }
+        else if (this.item.type === GanttItemType.range) {
+            itemElement.style.height = rangeHeight + 'px';
+        }
     }
     ngOnDestroy() {
-        this.closeDragBackdrop();
-        this.barDragRef?.dispose();
-        this.linkDragRefs?.forEach((dragRef) => dragRef.dispose());
-        this.barHandleDragRefs?.forEach((dragRef) => dragRef.dispose());
-        this.destroy$.next();
-        this.destroy$.complete();
-        this.stopScrolling();
-        this.stopScrollTimers$.complete();
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+        this.refsUnsubscribe$.next();
+        this.refsUnsubscribe$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttBarDrag, deps: [{ token: i1.DragDrop }, { token: GanttDomService }, { token: GanttDragContainer }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttBarDrag }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttItemUpper, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: GanttItemUpper, isStandalone: true, inputs: { template: "template", item: "item" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttBarDrag, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1.DragDrop }, { type: GanttDomService }, { type: GanttDragContainer }, { type: i0.NgZone }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttItemUpper, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { template: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }] } });
 
 function linearGradient(sideOrCorner, color, stop) {
     return `linear-gradient(${sideOrCorner},${color} 0%,${stop} 40%)`;
 }
 class NgxGanttBarComponent extends GanttItemUpper {
-    constructor(dragContainer, drag, elementRef, ganttUpper, ngZone) {
-        super(elementRef, ganttUpper);
-        this.dragContainer = dragContainer;
-        this.drag = drag;
-        this.ganttUpper = ganttUpper;
-        this.ngZone = ngZone;
+    constructor() {
+        super();
+        this.dragContainer = inject(GanttDragContainer);
+        this.drag = inject(GanttBarDrag);
+        this.ganttUpper = inject(GANTT_UPPER_TOKEN);
+        this.ngZone = inject(NgZone);
         this.barClick = new EventEmitter();
         this.ganttItemClass = true;
     }
@@ -2715,11 +2665,11 @@ class NgxGanttBarComponent extends GanttItemUpper {
         this.barClick.emit({ event, item: this.item.origin });
     }
     setContentBackground() {
-        let style = { ...(this.item.barStyle || {}) };
-        const contentElement = this.contentElementRef.nativeElement;
-        const barElement = this.elementRef.nativeElement;
         if (this.item.refs?.width) {
+            const contentElement = this.contentElementRef.nativeElement;
             const color = this.item.color || barBackground;
+            const style = this.item.barStyle || {};
+            const barElement = this.elementRef.nativeElement;
             if (this.item.origin.start && this.item.origin.end) {
                 style.background = color;
                 style.borderRadius = '';
@@ -2739,29 +2689,26 @@ class NgxGanttBarComponent extends GanttItemUpper {
             if (this.item.progress >= 0) {
                 const contentProgressElement = contentElement.querySelector('.gantt-bar-content-progress');
                 style.background = hexToRgb(color, 0.3);
+                style.borderRadius = '';
                 contentProgressElement.style.background = color;
             }
-        }
-        style = Object.assign({}, style, this.item.barStyle || {});
-        for (const key in style) {
-            if (style.hasOwnProperty(key)) {
-                contentElement.style[key] = style[key];
+            for (const key in style) {
+                if (style.hasOwnProperty(key)) {
+                    contentElement.style[key] = style[key];
+                }
             }
         }
     }
     stopPropagation(event) {
         event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttBarComponent, deps: [{ token: GanttDragContainer }, { token: GanttBarDrag }, { token: i0.ElementRef }, { token: GANTT_UPPER_TOKEN }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: NgxGanttBarComponent, isStandalone: true, selector: "ngx-gantt-bar,gantt-bar", outputs: { barClick: "barClick" }, host: { properties: { "class.gantt-bar": "this.ganttItemClass" } }, providers: [GanttBarDrag], viewQueries: [{ propertyName: "contentElementRef", first: true, predicate: ["content"], descendants: true }, { propertyName: "handles", predicate: ["handle"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"gantt-bar-layer\">\n  <div class=\"drag-handles\">\n    @if (item.draggable && ganttUpper.draggable) {\n      <span class=\"handle\" #handle></span>\n      <span class=\"handle\" #handle></span>\n    }\n  </div>\n  @if (item.linkable && ganttUpper.linkable) {\n    <div class=\"link-handles\">\n      <span class=\"handle\"><span class=\"point\"></span></span>\n      <span class=\"handle\"> <span class=\"point\"></span></span>\n    </div>\n  }\n</div>\n<div class=\"gantt-bar-border\"></div>\n<div #content class=\"gantt-bar-content\" (click)=\"onBarClick($event)\">\n  @if (item.progress >= 0) {\n    <div class=\"gantt-bar-content-progress\" [style.width.%]=\"item.progress * 100\"></div>\n  }\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"> </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NgxGanttBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: NgxGanttBarComponent, isStandalone: true, selector: "ngx-gantt-bar,gantt-bar", outputs: { barClick: "barClick" }, host: { properties: { "class.gantt-bar": "this.ganttItemClass" } }, providers: [GanttBarDrag], viewQueries: [{ propertyName: "contentElementRef", first: true, predicate: ["content"], descendants: true }, { propertyName: "handles", predicate: ["handle"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"gantt-bar-layer\">\n  <div class=\"drag-handles\">\n    @if (item.draggable && ganttUpper.draggable) {\n      <span class=\"handle\" #handle></span>\n      <span class=\"handle\" #handle></span>\n    }\n  </div>\n  @if (item.linkable && ganttUpper.linkable) {\n    <div class=\"link-handles\">\n      <span class=\"handle\"><span class=\"point\"></span></span>\n      <span class=\"handle\"> <span class=\"point\"></span></span>\n    </div>\n  }\n</div>\n<div class=\"gantt-bar-border\"></div>\n<div #content class=\"gantt-bar-content\" (click)=\"onBarClick($event)\">\n  @if (item.progress >= 0) {\n    <div class=\"gantt-bar-content-progress\" [style.width.%]=\"item.progress * 100\"></div>\n  }\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"> </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NgxGanttBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-gantt-bar,gantt-bar', providers: [GanttBarDrag], imports: [NgTemplateOutlet], template: "<div class=\"gantt-bar-layer\">\n  <div class=\"drag-handles\">\n    @if (item.draggable && ganttUpper.draggable) {\n      <span class=\"handle\" #handle></span>\n      <span class=\"handle\" #handle></span>\n    }\n  </div>\n  @if (item.linkable && ganttUpper.linkable) {\n    <div class=\"link-handles\">\n      <span class=\"handle\"><span class=\"point\"></span></span>\n      <span class=\"handle\"> <span class=\"point\"></span></span>\n    </div>\n  }\n</div>\n<div class=\"gantt-bar-border\"></div>\n<div #content class=\"gantt-bar-content\" (click)=\"onBarClick($event)\">\n  @if (item.progress >= 0) {\n    <div class=\"gantt-bar-content-progress\" [style.width.%]=\"item.progress * 100\"></div>\n  }\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"> </ng-template>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: GanttDragContainer }, { type: GanttBarDrag }, { type: i0.ElementRef }, { type: GanttUpper, decorators: [{
-                    type: Inject,
-                    args: [GANTT_UPPER_TOKEN]
-                }] }, { type: i0.NgZone }], propDecorators: { barClick: [{
+        }], ctorParameters: () => [], propDecorators: { barClick: [{
                 type: Output
             }], contentElementRef: [{
                 type: ViewChild,
@@ -2775,9 +2722,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
             }] } });
 
 class NgxGanttBaselineComponent {
-    constructor(elementRef, ganttUpper) {
-        this.elementRef = elementRef;
-        this.ganttUpper = ganttUpper;
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.ganttUpper = inject(GANTT_UPPER_TOKEN);
         this.unsubscribe$ = new Subject();
         this.ganttBaselineClass = true;
     }
@@ -2792,501 +2739,271 @@ class NgxGanttBaselineComponent {
         itemElement.style.bottom = '2px';
         itemElement.style.width = this.baselineItem.refs.width + 'px';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttBaselineComponent, deps: [{ token: i0.ElementRef }, { token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: NgxGanttBaselineComponent, isStandalone: true, selector: "ngx-gantt-baseline,gantt-baseline", inputs: { baselineItem: "baselineItem", template: "template" }, host: { properties: { "class.gantt-baseline": "this.ganttBaselineClass" } }, ngImport: i0, template: "@if (baselineItem) {\n  <div #content class=\"baseline-content\">\n    <ng-template\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"{ item: baselineItem.origin, refs: baselineItem.refs }\"\n    ></ng-template>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NgxGanttBaselineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: NgxGanttBaselineComponent, isStandalone: true, selector: "ngx-gantt-baseline,gantt-baseline", inputs: { baselineItem: "baselineItem", template: "template" }, host: { properties: { "class.gantt-baseline": "this.ganttBaselineClass" } }, ngImport: i0, template: "@if (baselineItem) {\n  <div #content class=\"baseline-content\">\n    <ng-template\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"{ item: baselineItem.origin, refs: baselineItem.refs }\"\n    ></ng-template>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttBaselineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NgxGanttBaselineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-gantt-baseline,gantt-baseline', imports: [NgTemplateOutlet], template: "@if (baselineItem) {\n  <div #content class=\"baseline-content\">\n    <ng-template\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"{ item: baselineItem.origin, refs: baselineItem.refs }\"\n    ></ng-template>\n  </div>\n}\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: GanttUpper, decorators: [{
-                    type: Inject,
-                    args: [GANTT_UPPER_TOKEN]
-                }] }], propDecorators: { baselineItem: [{
+        }], ctorParameters: () => [], propDecorators: { baselineItem: [{
                 type: Input
             }], template: [{
                 type: Input
-            }], ganttBaselineClass: [{
-                type: HostBinding,
-                args: ['class.gantt-baseline']
-            }] } });
-
-const mainHeight = 5000;
-class GanttCalendarGridComponent {
-    get view() {
-        return this.ganttUpper.view;
-    }
-    constructor(ganttUpper, ngZone, elementRef) {
-        this.ganttUpper = ganttUpper;
-        this.ngZone = ngZone;
-        this.elementRef = elementRef;
-        this.unsubscribe$ = new Subject();
-        this.mainHeight = mainHeight;
-        this.todayBorderRadius = todayBorderRadius;
-        this.viewTypes = GanttViewType;
-        this.className = `gantt-calendar gantt-calendar-grid`;
-    }
-    setTodayPoint() {
-        const x = this.view.getTodayXPoint();
-        const todayEle = this.elementRef.nativeElement.getElementsByClassName('gantt-calendar-today-overlay')[0];
-        const line = this.elementRef.nativeElement.getElementsByClassName('today-line')[0];
-        if (isNumber(x)) {
-            if (line) {
-                line.style.left = `${x}px`;
-                line.style.top = `0px`;
-                line.style.bottom = `${-mainHeight}px`;
-            }
-        }
-        else {
-            todayEle.style.display = 'none';
-        }
-    }
-    ngOnInit() {
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            merge(this.ganttUpper.viewChange, this.ganttUpper.view.start$)
-                .pipe(takeUntil(this.unsubscribe$))
-                .subscribe(() => {
-                this.setTodayPoint();
-            });
-        });
-    }
-    ngOnDestroy() {
-        this.unsubscribe$.next();
-        this.unsubscribe$.complete();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttCalendarGridComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: GanttCalendarGridComponent, isStandalone: true, selector: "gantt-calendar-grid", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  @if (ganttUpper.showTodayLine) {\n    <span class=\"today-line\"> </span>\n  }\n</div>\n<svg class=\"gantt-calendar-grid-fill\" [attr.width]=\"view.width\" [attr.height]=\"1\">\n  <g>\n    @for (point of view.secondaryDatePoints; track point.x) {\n      @if (point.fill) {\n        <rect [attr.x]=\"$index * view.cellWidth\" y=\"0\" [attr.width]=\"view.cellWidth\" [attr.height]=\"mainHeight\" [attr.fill]=\"point.fill\" />\n      }\n    }\n  </g>\n</svg>\n\n<svg class=\"gantt-calendar-grid-main\" [attr.width]=\"view.width\" [attr.height]=\"ganttUpper.styles.headerHeight - 1\">\n  <g>\n    @if (view.showTimeline) {\n      <g>\n        @for (point of view.secondaryDatePoints; track point.x) {\n          <line\n            [attr.x1]=\"($index + 1) * view.cellWidth\"\n            [attr.x2]=\"($index + 1) * view.cellWidth\"\n            [attr.y1]=\"0\"\n            [attr.y2]=\"mainHeight\"\n            class=\"secondary-line\"\n          ></line>\n        }\n      </g>\n    }\n    <g>\n      @for (point of view.primaryDatePoints; track point?.x) {\n        @let rightX = point?.rightX ?? ($index + 1) * view.primaryWidth;\n        <line [attr.x1]=\"rightX\" [attr.x2]=\"rightX\" [attr.y1]=\"0\" [attr.y2]=\"mainHeight\" class=\"primary-line\"></line>\n      }\n    </g>\n  </g>\n</svg>\n" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttCalendarGridComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gantt-calendar-grid', standalone: true, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  @if (ganttUpper.showTodayLine) {\n    <span class=\"today-line\"> </span>\n  }\n</div>\n<svg class=\"gantt-calendar-grid-fill\" [attr.width]=\"view.width\" [attr.height]=\"1\">\n  <g>\n    @for (point of view.secondaryDatePoints; track point.x) {\n      @if (point.fill) {\n        <rect [attr.x]=\"$index * view.cellWidth\" y=\"0\" [attr.width]=\"view.cellWidth\" [attr.height]=\"mainHeight\" [attr.fill]=\"point.fill\" />\n      }\n    }\n  </g>\n</svg>\n\n<svg class=\"gantt-calendar-grid-main\" [attr.width]=\"view.width\" [attr.height]=\"ganttUpper.styles.headerHeight - 1\">\n  <g>\n    @if (view.showTimeline) {\n      <g>\n        @for (point of view.secondaryDatePoints; track point.x) {\n          <line\n            [attr.x1]=\"($index + 1) * view.cellWidth\"\n            [attr.x2]=\"($index + 1) * view.cellWidth\"\n            [attr.y1]=\"0\"\n            [attr.y2]=\"mainHeight\"\n            class=\"secondary-line\"\n          ></line>\n        }\n      </g>\n    }\n    <g>\n      @for (point of view.primaryDatePoints; track point?.x) {\n        @let rightX = point?.rightX ?? ($index + 1) * view.primaryWidth;\n        <line [attr.x1]=\"rightX\" [attr.x2]=\"rightX\" [attr.y1]=\"0\" [attr.y2]=\"mainHeight\" class=\"primary-line\"></line>\n      }\n    </g>\n  </g>\n</svg>\n" }]
-        }], ctorParameters: () => [{ type: GanttUpper, decorators: [{
-                    type: Inject,
-                    args: [GANTT_UPPER_TOKEN]
-                }] }, { type: i0.NgZone }, { type: i0.ElementRef }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class GanttCalendarHeaderComponent {
-    get view() {
-        return this.ganttUpper.view;
-    }
-    get height() {
-        return this.ganttUpper.styles.headerHeight + 'px';
-    }
-    constructor(ganttUpper, ngZone, elementRef) {
-        this.ganttUpper = ganttUpper;
-        this.ngZone = ngZone;
-        this.elementRef = elementRef;
-        this.unsubscribe$ = new Subject();
-        this.viewTypes = GanttViewType;
-        this.className = `gantt-calendar gantt-calendar-header`;
-    }
-    ngOnInit() {
-        // 头部日期定位
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            merge(this.ganttUpper.viewChange, this.ganttUpper.view.start$)
-                .pipe(takeUntil(this.unsubscribe$))
-                .subscribe(() => {
-                if (this.ganttUpper.viewType === GanttViewType.day)
-                    this.setTodayPoint();
-            });
-        });
-    }
-    setTodayPoint() {
-        const x = this.view.getTodayXPoint();
-        const today = new GanttDate().getDate();
-        const todayEle = this.elementRef.nativeElement.getElementsByClassName('gantt-calendar-today-overlay')[0];
-        const rect = this.elementRef.nativeElement.getElementsByClassName('today-rect')[0];
-        if (isNumber(x)) {
-            if (rect) {
-                rect.style.left = `${x - todayWidth / 2}px`;
-                rect.style.top = `${this.ganttUpper.styles.headerHeight - todayHeight}px`;
-                rect.innerHTML = today.toString();
-            }
-        }
-        else {
-            todayEle.style.display = 'none';
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttCalendarHeaderComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: GanttCalendarHeaderComponent, isStandalone: true, selector: "gantt-calendar-header", host: { properties: { "class": "this.className", "style.height": "this.height" } }, ngImport: i0, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n</div>\n<svg [attr.width]=\"view.width\" [attr.height]=\"ganttUpper.styles.headerHeight\">\n  <g>\n    @for (point of view.secondaryDatePoints; track point.x) {\n      @if (point.fill) {\n        <rect\n          [attr.x]=\"$index * view.cellWidth\"\n          y=\"0\"\n          [attr.width]=\"view.cellWidth\"\n          [attr.height]=\"ganttUpper.styles.headerHeight\"\n          [attr.fill]=\"point.fill\"\n        />\n      }\n      <text\n        class=\"secondary-text\"\n        [ngStyle]=\"point.style\"\n        [class.today]=\"point.additions?.isToday\"\n        [class.weekend]=\"point.additions?.isWeekend\"\n        [attr.x]=\"point.x\"\n        [attr.y]=\"point.y\"\n      >\n        {{ point.text }}\n      </text>\n    }\n\n    @for (point of view.primaryDatePoints; track point.x) {\n      <text\n        class=\"primary-text\"\n        [ngStyle]=\"point.style\"\n        [class.today]=\"point.additions?.isToday\"\n        [class.weekend]=\"point.additions?.isWeekend\"\n        [attr.x]=\"point.x\"\n        [attr.y]=\"point.y\"\n      >\n        {{ point.text }}\n      </text>\n    }\n\n    <g>\n      @for (point of view.primaryDatePoints; track point?.x) {\n        @let rightX = point?.rightX ?? ($index + 1) * view.primaryWidth;\n        <line [attr.x1]=\"rightX\" [attr.x2]=\"rightX\" [attr.y1]=\"0\" [attr.y2]=\"ganttUpper.styles.headerHeight\" class=\"primary-line\"></line>\n      }\n    </g>\n\n    <g>\n      <line\n        [attr.x1]=\"0\"\n        [attr.x2]=\"view.width\"\n        [attr.y1]=\"ganttUpper.styles.headerHeight\"\n        [attr.y2]=\"ganttUpper.styles.headerHeight\"\n        class=\"header-line\"\n      ></line>\n    </g>\n  </g>\n</svg>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttCalendarHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gantt-calendar-header', imports: [NgStyle], template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n</div>\n<svg [attr.width]=\"view.width\" [attr.height]=\"ganttUpper.styles.headerHeight\">\n  <g>\n    @for (point of view.secondaryDatePoints; track point.x) {\n      @if (point.fill) {\n        <rect\n          [attr.x]=\"$index * view.cellWidth\"\n          y=\"0\"\n          [attr.width]=\"view.cellWidth\"\n          [attr.height]=\"ganttUpper.styles.headerHeight\"\n          [attr.fill]=\"point.fill\"\n        />\n      }\n      <text\n        class=\"secondary-text\"\n        [ngStyle]=\"point.style\"\n        [class.today]=\"point.additions?.isToday\"\n        [class.weekend]=\"point.additions?.isWeekend\"\n        [attr.x]=\"point.x\"\n        [attr.y]=\"point.y\"\n      >\n        {{ point.text }}\n      </text>\n    }\n\n    @for (point of view.primaryDatePoints; track point.x) {\n      <text\n        class=\"primary-text\"\n        [ngStyle]=\"point.style\"\n        [class.today]=\"point.additions?.isToday\"\n        [class.weekend]=\"point.additions?.isWeekend\"\n        [attr.x]=\"point.x\"\n        [attr.y]=\"point.y\"\n      >\n        {{ point.text }}\n      </text>\n    }\n\n    <g>\n      @for (point of view.primaryDatePoints; track point?.x) {\n        @let rightX = point?.rightX ?? ($index + 1) * view.primaryWidth;\n        <line [attr.x1]=\"rightX\" [attr.x2]=\"rightX\" [attr.y1]=\"0\" [attr.y2]=\"ganttUpper.styles.headerHeight\" class=\"primary-line\"></line>\n      }\n    </g>\n\n    <g>\n      <line\n        [attr.x1]=\"0\"\n        [attr.x2]=\"view.width\"\n        [attr.y1]=\"ganttUpper.styles.headerHeight\"\n        [attr.y2]=\"ganttUpper.styles.headerHeight\"\n        class=\"header-line\"\n      ></line>\n    </g>\n  </g>\n</svg>\n" }]
-        }], ctorParameters: () => [{ type: GanttUpper, decorators: [{
-                    type: Inject,
-                    args: [GANTT_UPPER_TOKEN]
-                }] }, { type: i0.NgZone }, { type: i0.ElementRef }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }], height: [{
-                type: HostBinding,
-                args: ['style.height']
-            }] } });
-
-class GanttDragBackdropComponent {
-    constructor(ganttUpper) {
-        this.ganttUpper = ganttUpper;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttDragBackdropComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: GanttDragBackdropComponent, isStandalone: true, selector: "gantt-drag-backdrop", host: { classAttribute: "gantt-drag-backdrop" }, ngImport: i0, template: "<div class=\"gantt-drag-mask\" [style.top.px]=\"ganttUpper.styles.headerHeight\">\n  <div class=\"date-range\">\n    <span class=\"start\"></span>\n    <span class=\"end\"></span>\n  </div>\n</div>\n" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttDragBackdropComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gantt-drag-backdrop', host: {
-                        class: 'gantt-drag-backdrop'
-                    }, standalone: true, template: "<div class=\"gantt-drag-mask\" [style.top.px]=\"ganttUpper.styles.headerHeight\">\n  <div class=\"date-range\">\n    <span class=\"start\"></span>\n    <span class=\"end\"></span>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: GanttUpper, decorators: [{
-                    type: Inject,
-                    args: [GANTT_UPPER_TOKEN]
-                }] }] });
-
-class GanttLoaderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: GanttLoaderComponent, isStandalone: true, selector: "gantt-loader", host: { classAttribute: "gantt-loader gantt-loader-overlay" }, ngImport: i0, template: `
-        <div class="gantt-loader-wrapper">
-            <div class="gantt-loader-loading">
-                <span class="gantt-loader-loading-spot"></span>
-            </div>
-        </div>
-    `, isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttLoaderComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'gantt-loader',
-                    template: `
-        <div class="gantt-loader-wrapper">
-            <div class="gantt-loader-loading">
-                <span class="gantt-loader-loading-spot"></span>
-            </div>
-        </div>
-    `,
-                    host: {
-                        class: 'gantt-loader gantt-loader-overlay'
-                    },
-                    standalone: true
-                }]
-        }] });
-
-class NgxGanttRangeComponent extends GanttItemUpper {
-    constructor(elementRef, ganttUpper) {
-        super(elementRef, ganttUpper);
-        this.ganttRangeClass = true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttRangeComponent, deps: [{ token: i0.ElementRef }, { token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: NgxGanttRangeComponent, isStandalone: true, selector: "ngx-gantt-range,gantt-range", host: { properties: { "class.gantt-range": "this.ganttRangeClass" } }, usesInheritance: true, ngImport: i0, template: "@if (item.start && item.end) {\n  <div class=\"gantt-range-main\">\n    @if (item.progress >= 0) {\n      <div class=\"gantt-range-main-progress\" [style.width.%]=\"item.progress * 100\"></div>\n    }\n  </div>\n  <div class=\"gantt-range-triangle left\"></div>\n  <div class=\"gantt-range-triangle right\"></div>\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"></ng-template>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttRangeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-gantt-range,gantt-range', imports: [NgTemplateOutlet], template: "@if (item.start && item.end) {\n  <div class=\"gantt-range-main\">\n    @if (item.progress >= 0) {\n      <div class=\"gantt-range-main-progress\" [style.width.%]=\"item.progress * 100\"></div>\n    }\n  </div>\n  <div class=\"gantt-range-triangle left\"></div>\n  <div class=\"gantt-range-triangle right\"></div>\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"></ng-template>\n}\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: GanttUpper, decorators: [{
-                    type: Inject,
-                    args: [GANTT_UPPER_TOKEN]
-                }] }], propDecorators: { ganttRangeClass: [{
-                type: HostBinding,
-                args: ['class.gantt-range']
-            }] } });
-
-class GanttSyncScrollService {
-    constructor() {
-        this.ngZone = inject(NgZone);
-        this.scrollGroupsMap = new Map();
-    }
-    registerScrollEvent(groupName, element, direction) {
-        const group = this.scrollGroupsMap.get(groupName) || { elements: [], destroy$: new Subject(), direction };
-        group.elements.push(element);
-        this.scrollGroupsMap.set(groupName, group);
-        this.monitorScrollChange(group);
-    }
-    unregisterScrollEvent(groupName, element) {
-        const group = this.scrollGroupsMap.get(groupName);
-        if (group) {
-            group.elements = group.elements.filter((el) => el !== element);
-            if (!group.elements.length) {
-                this.scrollGroupsMap.delete(groupName);
-            }
-            else {
-                this.scrollGroupsMap.set(groupName, group);
-            }
-            this.monitorScrollChange(group);
-        }
-    }
-    monitorScrollChange(group) {
-        const { elements, destroy$, direction } = group;
-        destroy$.next();
-        destroy$.complete();
-        if (elements.length) {
-            const scrollObservers = elements.map((el) => fromEvent(el, 'scroll', passiveListenerOptions));
-            this.ngZone.runOutsideAngular(() => merge(...scrollObservers)
-                .pipe(takeUntil$1(destroy$))
-                .subscribe((event) => {
-                elements.forEach((el) => {
-                    if (direction === 'x') {
-                        el.scrollLeft = event.currentTarget.scrollLeft;
-                    }
-                    else {
-                        el.scrollTop = event.currentTarget.scrollTop;
-                    }
-                });
-            }));
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttSyncScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttSyncScrollService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttSyncScrollService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
-class GanttSyncScrollXDirective {
-    constructor() {
-        this.syncScrollX = input();
-        this.elementRef = inject((ElementRef));
-        this.syncScrollService = inject(GanttSyncScrollService);
-    }
-    ngOnInit() {
-        this.syncScrollService.registerScrollEvent(this.syncScrollX(), this.elementRef.nativeElement, 'x');
-    }
-    ngOnDestroy() {
-        this.syncScrollService.unregisterScrollEvent(this.syncScrollX(), this.elementRef.nativeElement);
+            }], ganttBaselineClass: [{
+                type: HostBinding,
+                args: ['class.gantt-baseline']
+            }] } });
+
+const mainHeight = 5000;
+class GanttCalendarGridComponent {
+    get view() {
+        return this.ganttUpper.view;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttSyncScrollXDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.3", type: GanttSyncScrollXDirective, isStandalone: true, selector: "[syncScrollX]", inputs: { syncScrollX: { classPropertyName: "syncScrollX", publicName: "syncScrollX", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttSyncScrollXDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[syncScrollX]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [] });
-class GanttSyncScrollYDirective {
     constructor() {
-        this.syncScrollY = input();
-        this.syncScrollService = inject(GanttSyncScrollService);
-        this.elementRef = inject((ElementRef));
+        this.ganttUpper = inject(GANTT_UPPER_TOKEN);
+        this.ngZone = inject(NgZone);
+        this.elementRef = inject(ElementRef);
+        this.unsubscribe$ = new Subject();
+        this.mainHeight = mainHeight;
+        this.todayBorderRadius = todayBorderRadius;
+        this.viewTypes = GanttViewType;
+        this.className = `gantt-calendar gantt-calendar-grid`;
+    }
+    setTodayPoint() {
+        const x = this.view.getTodayXPoint();
+        const todayEle = this.elementRef.nativeElement.getElementsByClassName('gantt-calendar-today-overlay')[0];
+        const line = this.elementRef.nativeElement.getElementsByClassName('today-line')[0];
+        if (isNumber(x)) {
+            if (line) {
+                line.style.left = `${x}px`;
+                line.style.top = `0px`;
+                line.style.bottom = `${-mainHeight}px`;
+            }
+        }
+        else {
+            todayEle.style.display = 'none';
+        }
     }
     ngOnInit() {
-        this.syncScrollService.registerScrollEvent(this.syncScrollY(), this.elementRef.nativeElement, 'y');
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            merge(this.ganttUpper.viewChange, this.ganttUpper.view.start$)
+                .pipe(takeUntil(this.unsubscribe$))
+                .subscribe(() => {
+                this.setTodayPoint();
+            });
+        });
     }
     ngOnDestroy() {
-        this.syncScrollService.unregisterScrollEvent(this.syncScrollY(), this.elementRef.nativeElement);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttSyncScrollYDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.3", type: GanttSyncScrollYDirective, isStandalone: true, selector: "[syncScrollY]", inputs: { syncScrollY: { classPropertyName: "syncScrollY", publicName: "syncScrollY", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttSyncScrollYDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[syncScrollY]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [] });
-
-class GanttScrollbarComponent {
-    constructor(ganttUpper) {
-        this.ganttUpper = ganttUpper;
-        this.hasFooter = input(false);
-        this.tableWidth = input();
-        this.ganttRoot = input();
-        this.tableScrollWidth = input(0);
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttScrollbarComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.3", type: GanttScrollbarComponent, isStandalone: true, selector: "gantt-scrollbar", inputs: { hasFooter: { classPropertyName: "hasFooter", publicName: "hasFooter", isSignal: true, isRequired: false, transformFunction: null }, tableWidth: { classPropertyName: "tableWidth", publicName: "tableWidth", isSignal: true, isRequired: false, transformFunction: null }, ganttRoot: { classPropertyName: "ganttRoot", publicName: "ganttRoot", isSignal: true, isRequired: false, transformFunction: null }, tableScrollWidth: { classPropertyName: "tableScrollWidth", publicName: "tableScrollWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"gantt-scrollbar\"\n  [ngClass]=\"{ 'gantt-scrollbar-bg': hasFooter() }\"\n  [style.height.px]=\"ganttRoot()?.horizontalScrollbarHeight + 1\"\n  [style.right.px]=\"ganttRoot()?.verticalScrollbarWidth\"\n>\n  <div\n    class=\"gantt-table-scrollbar\"\n    syncScrollX=\"ganttTableXScroll\"\n    [class.with-scrollbar]=\"ganttRoot()?.horizontalScrollbarHeight\"\n    [style.width.px]=\"tableWidth()\"\n  >\n    <div class=\"h-100\" [style.width.px]=\"tableScrollWidth() - 1\"></div>\n  </div>\n  <div class=\"gantt-main-scrollbar\" syncScrollX=\"ganttMainXScroll\">\n    <div class=\"h-100\" [style.width.px]=\"ganttRoot()['view']?.width\"></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: GanttSyncScrollXDirective, selector: "[syncScrollX]", inputs: ["syncScrollX"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttCalendarGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: GanttCalendarGridComponent, isStandalone: true, selector: "gantt-calendar-grid", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  @if (ganttUpper.showTodayLine) {\n    <span class=\"today-line\"> </span>\n  }\n</div>\n<svg class=\"gantt-calendar-grid-fill\" [attr.width]=\"view.width\" [attr.height]=\"1\">\n  <g>\n    @for (point of view.secondaryDatePoints; track point.x) {\n      @if (point.fill) {\n        <rect [attr.x]=\"$index * view.cellWidth\" y=\"0\" [attr.width]=\"view.cellWidth\" [attr.height]=\"mainHeight\" [attr.fill]=\"point.fill\" />\n      }\n    }\n  </g>\n</svg>\n\n<svg class=\"gantt-calendar-grid-main\" [attr.width]=\"view.width\" [attr.height]=\"ganttUpper.styles.headerHeight - 1\">\n  <g>\n    @if (view.showTimeline) {\n      <g>\n        @for (point of view.secondaryDatePoints; track point.x) {\n          <line\n            [attr.x1]=\"($index + 1) * view.cellWidth\"\n            [attr.x2]=\"($index + 1) * view.cellWidth\"\n            [attr.y1]=\"0\"\n            [attr.y2]=\"mainHeight\"\n            class=\"secondary-line\"\n          ></line>\n        }\n      </g>\n    }\n    <g>\n      @for (point of view.primaryDatePoints; track point.x) {\n        <line\n          [attr.x1]=\"($index + 1) * view.primaryWidth\"\n          [attr.x2]=\"($index + 1) * view.primaryWidth\"\n          [attr.y1]=\"0\"\n          [attr.y2]=\"mainHeight\"\n          class=\"primary-line\"\n        ></line>\n      }\n    </g>\n  </g>\n</svg>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttScrollbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttCalendarGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gantt-scrollbar', imports: [NgClass, GanttSyncScrollXDirective], template: "<div\n  class=\"gantt-scrollbar\"\n  [ngClass]=\"{ 'gantt-scrollbar-bg': hasFooter() }\"\n  [style.height.px]=\"ganttRoot()?.horizontalScrollbarHeight + 1\"\n  [style.right.px]=\"ganttRoot()?.verticalScrollbarWidth\"\n>\n  <div\n    class=\"gantt-table-scrollbar\"\n    syncScrollX=\"ganttTableXScroll\"\n    [class.with-scrollbar]=\"ganttRoot()?.horizontalScrollbarHeight\"\n    [style.width.px]=\"tableWidth()\"\n  >\n    <div class=\"h-100\" [style.width.px]=\"tableScrollWidth() - 1\"></div>\n  </div>\n  <div class=\"gantt-main-scrollbar\" syncScrollX=\"ganttMainXScroll\">\n    <div class=\"h-100\" [style.width.px]=\"ganttRoot()['view']?.width\"></div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: GanttUpper, decorators: [{
-                    type: Inject,
-                    args: [GANTT_UPPER_TOKEN]
-                }] }] });
+            args: [{ selector: 'gantt-calendar-grid', standalone: true, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  @if (ganttUpper.showTodayLine) {\n    <span class=\"today-line\"> </span>\n  }\n</div>\n<svg class=\"gantt-calendar-grid-fill\" [attr.width]=\"view.width\" [attr.height]=\"1\">\n  <g>\n    @for (point of view.secondaryDatePoints; track point.x) {\n      @if (point.fill) {\n        <rect [attr.x]=\"$index * view.cellWidth\" y=\"0\" [attr.width]=\"view.cellWidth\" [attr.height]=\"mainHeight\" [attr.fill]=\"point.fill\" />\n      }\n    }\n  </g>\n</svg>\n\n<svg class=\"gantt-calendar-grid-main\" [attr.width]=\"view.width\" [attr.height]=\"ganttUpper.styles.headerHeight - 1\">\n  <g>\n    @if (view.showTimeline) {\n      <g>\n        @for (point of view.secondaryDatePoints; track point.x) {\n          <line\n            [attr.x1]=\"($index + 1) * view.cellWidth\"\n            [attr.x2]=\"($index + 1) * view.cellWidth\"\n            [attr.y1]=\"0\"\n            [attr.y2]=\"mainHeight\"\n            class=\"secondary-line\"\n          ></line>\n        }\n      </g>\n    }\n    <g>\n      @for (point of view.primaryDatePoints; track point.x) {\n        <line\n          [attr.x1]=\"($index + 1) * view.primaryWidth\"\n          [attr.x2]=\"($index + 1) * view.primaryWidth\"\n          [attr.y1]=\"0\"\n          [attr.y2]=\"mainHeight\"\n          class=\"primary-line\"\n        ></line>\n      }\n    </g>\n  </g>\n</svg>\n" }]
+        }], ctorParameters: () => [], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
-class NgxGanttToolbarComponent {
-    get top() {
-        return this.ganttUpper.styles.headerHeight + 16 + 'px';
+class GanttCalendarHeaderComponent {
+    get view() {
+        return this.ganttUpper.view;
     }
-    constructor(ganttUpper) {
-        this.ganttUpper = ganttUpper;
-        this.ganttItemClass = true;
-        this.views = inject(GanttConfigService).getViewsLocale();
+    get height() {
+        return this.ganttUpper.styles.headerHeight + 'px';
     }
-    selectView(view) {
-        this.ganttUpper.changeView(view);
+    constructor() {
+        this.ganttUpper = inject(GANTT_UPPER_TOKEN);
+        this.ngZone = inject(NgZone);
+        this.elementRef = inject(ElementRef);
+        this.unsubscribe$ = new Subject();
+        this.viewTypes = GanttViewType;
+        this.className = `gantt-calendar gantt-calendar-header`;
+    }
+    ngOnInit() {
+        // 头部日期定位
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            merge(this.ganttUpper.viewChange, this.ganttUpper.view.start$)
+                .pipe(takeUntil(this.unsubscribe$))
+                .subscribe(() => {
+                if (this.ganttUpper.viewType === GanttViewType.day)
+                    this.setTodayPoint();
+            });
+        });
+    }
+    setTodayPoint() {
+        const x = this.view.getTodayXPoint();
+        const today = new GanttDate().getDate();
+        const todayEle = this.elementRef.nativeElement.getElementsByClassName('gantt-calendar-today-overlay')[0];
+        const rect = this.elementRef.nativeElement.getElementsByClassName('today-rect')[0];
+        if (isNumber(x)) {
+            if (rect) {
+                rect.style.left = `${x - todayWidth / 2}px`;
+                rect.style.top = `${this.ganttUpper.styles.headerHeight - todayHeight}px`;
+                rect.innerHTML = today.toString();
+            }
+        }
+        else {
+            todayEle.style.display = 'none';
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttToolbarComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: NgxGanttToolbarComponent, isStandalone: true, selector: "ngx-gantt-toolbar,gantt-toolbar", inputs: { template: "template" }, host: { properties: { "class.gantt-toolbar": "this.ganttItemClass", "style.top": "this.top" } }, ngImport: i0, template: "<div class=\"toolbar-container\">\n  @if (!template) {\n    @if (this.ganttUpper.toolbarOptions?.viewTypes?.length) {\n      <div class=\"toolbar-views\">\n        @for (viewType of this.ganttUpper.toolbarOptions?.viewTypes; track viewType) {\n          @if (views[viewType]) {\n            <div class=\"toolbar-view\" [class.active]=\"viewType === this.ganttUpper.viewType\" (click)=\"selectView(viewType)\">\n              {{ views[viewType].label }}\n            </div>\n          }\n        }\n      </div>\n    }\n  }\n  <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttCalendarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: GanttCalendarHeaderComponent, isStandalone: true, selector: "gantt-calendar-header", host: { properties: { "class": "this.className", "style.height": "this.height" } }, ngImport: i0, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n</div>\n<svg [attr.width]=\"view.width\" [attr.height]=\"ganttUpper.styles.headerHeight\">\n  <g>\n    @for (point of view.secondaryDatePoints; track point.x) {\n      @if (point.fill) {\n        <rect\n          [attr.x]=\"$index * view.cellWidth\"\n          y=\"0\"\n          [attr.width]=\"view.cellWidth\"\n          [attr.height]=\"ganttUpper.styles.headerHeight\"\n          [attr.fill]=\"point.fill\"\n        />\n      }\n      <text\n        class=\"secondary-text\"\n        [ngStyle]=\"point.style\"\n        [class.today]=\"point.additions?.isToday\"\n        [class.weekend]=\"point.additions?.isWeekend\"\n        [attr.x]=\"point.x\"\n        [attr.y]=\"point.y\"\n      >\n        {{ point.text }}\n      </text>\n    }\n\n    @for (point of view.primaryDatePoints; track point.x) {\n      <text\n        class=\"primary-text\"\n        [ngStyle]=\"point.style\"\n        [class.today]=\"point.additions?.isToday\"\n        [class.weekend]=\"point.additions?.isWeekend\"\n        [attr.x]=\"point.x\"\n        [attr.y]=\"point.y\"\n      >\n        {{ point.text }}\n      </text>\n    }\n\n    <g>\n      @for (point of view.primaryDatePoints; track point.x) {\n        <line\n          [attr.x1]=\"($index + 1) * view.primaryWidth\"\n          [attr.x2]=\"($index + 1) * view.primaryWidth\"\n          [attr.y1]=\"0\"\n          [attr.y2]=\"ganttUpper.styles.headerHeight\"\n          class=\"primary-line\"\n        ></line>\n      }\n    </g>\n\n    <g>\n      <line\n        [attr.x1]=\"0\"\n        [attr.x2]=\"view.width\"\n        [attr.y1]=\"ganttUpper.styles.headerHeight\"\n        [attr.y2]=\"ganttUpper.styles.headerHeight\"\n        class=\"header-line\"\n      ></line>\n    </g>\n  </g>\n</svg>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttCalendarHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-gantt-toolbar,gantt-toolbar', imports: [NgTemplateOutlet], template: "<div class=\"toolbar-container\">\n  @if (!template) {\n    @if (this.ganttUpper.toolbarOptions?.viewTypes?.length) {\n      <div class=\"toolbar-views\">\n        @for (viewType of this.ganttUpper.toolbarOptions?.viewTypes; track viewType) {\n          @if (views[viewType]) {\n            <div class=\"toolbar-view\" [class.active]=\"viewType === this.ganttUpper.viewType\" (click)=\"selectView(viewType)\">\n              {{ views[viewType].label }}\n            </div>\n          }\n        }\n      </div>\n    }\n  }\n  <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: GanttUpper, decorators: [{
-                    type: Inject,
-                    args: [GANTT_UPPER_TOKEN]
-                }] }], propDecorators: { template: [{
-                type: Input
-            }], ganttItemClass: [{
+            args: [{ selector: 'gantt-calendar-header', imports: [NgStyle], template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n</div>\n<svg [attr.width]=\"view.width\" [attr.height]=\"ganttUpper.styles.headerHeight\">\n  <g>\n    @for (point of view.secondaryDatePoints; track point.x) {\n      @if (point.fill) {\n        <rect\n          [attr.x]=\"$index * view.cellWidth\"\n          y=\"0\"\n          [attr.width]=\"view.cellWidth\"\n          [attr.height]=\"ganttUpper.styles.headerHeight\"\n          [attr.fill]=\"point.fill\"\n        />\n      }\n      <text\n        class=\"secondary-text\"\n        [ngStyle]=\"point.style\"\n        [class.today]=\"point.additions?.isToday\"\n        [class.weekend]=\"point.additions?.isWeekend\"\n        [attr.x]=\"point.x\"\n        [attr.y]=\"point.y\"\n      >\n        {{ point.text }}\n      </text>\n    }\n\n    @for (point of view.primaryDatePoints; track point.x) {\n      <text\n        class=\"primary-text\"\n        [ngStyle]=\"point.style\"\n        [class.today]=\"point.additions?.isToday\"\n        [class.weekend]=\"point.additions?.isWeekend\"\n        [attr.x]=\"point.x\"\n        [attr.y]=\"point.y\"\n      >\n        {{ point.text }}\n      </text>\n    }\n\n    <g>\n      @for (point of view.primaryDatePoints; track point.x) {\n        <line\n          [attr.x1]=\"($index + 1) * view.primaryWidth\"\n          [attr.x2]=\"($index + 1) * view.primaryWidth\"\n          [attr.y1]=\"0\"\n          [attr.y2]=\"ganttUpper.styles.headerHeight\"\n          class=\"primary-line\"\n        ></line>\n      }\n    </g>\n\n    <g>\n      <line\n        [attr.x1]=\"0\"\n        [attr.x2]=\"view.width\"\n        [attr.y1]=\"ganttUpper.styles.headerHeight\"\n        [attr.y2]=\"ganttUpper.styles.headerHeight\"\n        class=\"header-line\"\n      ></line>\n    </g>\n  </g>\n</svg>\n" }]
+        }], ctorParameters: () => [], propDecorators: { className: [{
                 type: HostBinding,
-                args: ['class.gantt-toolbar']
-            }], top: [{
+                args: ['class']
+            }], height: [{
                 type: HostBinding,
-                args: ['style.top']
+                args: ['style.height']
             }] } });
 
-class GanttPrintService {
-    constructor() { }
-    setInlineStyles(targetElem) {
-        const svgElements = Array.from(targetElem.getElementsByTagName('svg'));
-        for (const svgElement of svgElements) {
-            this.recursElementChildren(svgElement);
-        }
-    }
-    recursElementChildren(node) {
-        const transformProperties = [
-            'fill',
-            'color',
-            'font-size',
-            'stroke',
-            'font',
-            'text-anchor',
-            'stroke-dasharray',
-            'shape-rendering',
-            'stroke-width'
-        ];
-        if (!node.style) {
-            return;
-        }
-        const styles = getComputedStyle(node);
-        for (const transformProperty of transformProperties) {
-            node.style[transformProperty] = styles[transformProperty];
-        }
-        for (const child of Array.from(node.childNodes)) {
-            this.recursElementChildren(child);
-        }
-    }
-    register(root) {
-        this.root = root.nativeElement;
-        this.mainContainer = this.root.getElementsByClassName('gantt-main-container')[0];
-    }
-    async html2canvas(ignoreElementClass) {
-        const root = this.root;
-        const mainContainer = this.mainContainer;
-        // set print width
-        const printWidth = root.offsetWidth;
-        // set print height
-        const printHeight = root.offsetHeight - mainContainer.offsetHeight + mainContainer.scrollHeight;
-        const html2canvas = (await import(/* webpackChunkName: 'html2canvas' */ 'html2canvas')).default;
-        return html2canvas(root, {
-            logging: false,
-            allowTaint: true,
-            useCORS: true,
-            width: printWidth,
-            height: printHeight,
-            ignoreElements: (element) => {
-                if (ignoreElementClass && element.classList.contains(ignoreElementClass)) {
-                    return true;
-                }
-                if (element.classList.contains('gantt-calendar-today-overlay')) {
-                    return true;
-                }
-            },
-            onclone: (cloneDocument) => {
-                const ganttClass = root.className;
-                const cloneGanttDom = cloneDocument.querySelector(`.${ganttClass.replace(/\s+/g, '.')}`);
-                const cloneGanttContainerDom = cloneDocument.querySelector('.gantt-container');
-                const cloneCalendarOverlay = cloneDocument.querySelector('.gantt-calendar-grid-main');
-                const cloneLinksOverlay = cloneDocument.querySelector('.gantt-links-overlay-main');
-                // change targetDom width
-                cloneGanttDom.style.width = `${printWidth}px`;
-                cloneGanttDom.style.height = `${printHeight}px`;
-                cloneGanttDom.style.overflow = `unset`;
-                cloneGanttContainerDom.style.backgroundColor = '#fff';
-                cloneCalendarOverlay.setAttribute('height', `${printHeight}`);
-                cloneCalendarOverlay.setAttribute('style', `background: transparent`);
-                if (cloneLinksOverlay) {
-                    cloneLinksOverlay.setAttribute('height', `${printHeight}`);
-                    cloneLinksOverlay.setAttribute('style', `height: ${printHeight}px`);
-                }
-                // setInlineStyles for svg
-                this.setInlineStyles(cloneGanttDom);
-            }
-        });
-    }
-    async print(name = 'download', ignoreElementClass) {
-        this.html2canvas(ignoreElementClass).then((canvas) => {
-            const link = document.createElement('a');
-            const dataUrl = canvas.toDataURL('image/png');
-            link.download = `${name}.png`;
-            link.href = dataUrl;
-            link.click();
-        });
+class GanttDragBackdropComponent {
+    constructor() {
+        this.ganttUpper = inject(GANTT_UPPER_TOKEN);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttPrintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttPrintService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttDragBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: GanttDragBackdropComponent, isStandalone: true, selector: "gantt-drag-backdrop", host: { classAttribute: "gantt-drag-backdrop" }, ngImport: i0, template: "<div class=\"gantt-drag-mask\" [style.top.px]=\"ganttUpper.styles.headerHeight\">\n  <div class=\"date-range\">\n    <span class=\"start\"></span>\n    <span class=\"end\"></span>\n  </div>\n</div>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttPrintService, decorators: [{
-            type: Injectable
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttDragBackdropComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gantt-drag-backdrop', host: {
+                        class: 'gantt-drag-backdrop'
+                    }, standalone: true, template: "<div class=\"gantt-drag-mask\" [style.top.px]=\"ganttUpper.styles.headerHeight\">\n  <div class=\"date-range\">\n    <span class=\"start\"></span>\n    <span class=\"end\"></span>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [] });
 
-class IsGanttRangeItemPipe {
-    transform(value) {
-        return value === GanttItemType.range;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: IsGanttRangeItemPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.3", ngImport: i0, type: IsGanttRangeItemPipe, isStandalone: true, name: "isGanttRangeItem" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: IsGanttRangeItemPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'isGanttRangeItem',
-                    standalone: true
-                }]
-        }] });
-class IsGanttBarItemPipe {
-    transform(value) {
-        return value === GanttItemType.bar;
+const angleRight = `<svg xmlns="http://www.w3.org/2000/svg" fit=""  preserveAspectRatio="xMidYMid meet" focusable="false"><g id="amnavigation/angle-right" stroke-width="1" fill-rule="evenodd"><path d="M7.978 11.498l-.005.005L2.3 5.831 3.13 5l4.848 4.848L12.826 5l.83.831-5.673 5.672-.005-.005z"   transform="rotate(-90 7.978 8.252)"></path></g></svg>`;
+const angleDown = `<svg xmlns="http://www.w3.org/2000/svg" fit=""  preserveAspectRatio="xMidYMid meet" focusable="false"><g id="aknavigation/angle-down" stroke-width="1" fill-rule="evenodd"><path d="M7.978 11.997l-.005.006L2.3 6.33l.83-.831 4.848 4.848L12.826 5.5l.83.83-5.673 5.673-.005-.006z" ></path></g></svg>`;
+const plusSquare = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fit=""   preserveAspectRatio="xMidYMid meet" focusable="false"><g id="kxaction/plus-square" stroke-width="1" fill-rule="evenodd"><path d="M2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1.2a.8.8 0 0 0-.8.8v12a.8.8 0 0 0 .8.8h12a.8.8 0 0 0 .8-.8V2a.8.8 0 0 0-.8-.8H2zm5.45 6.2V4.75h1.2V7.4h2.65v1.2H8.65v2.65h-1.2V8.6H4.8V7.4h2.65z"></path></g></svg>`;
+const minusSquare = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fit="" preserveAspectRatio="xMidYMid meet" focusable="false"><g id="jnaction/minus-square" stroke-width="1" fill-rule="evenodd"><path d="M2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1.2a.8.8 0 0 0-.8.8v12a.8.8 0 0 0 .8.8h12a.8.8 0 0 0 .8-.8V2a.8.8 0 0 0-.8-.8H2zm2.8 6.2h6.5v1.2H4.8V7.4z"></path></g></svg>`;
+const loadingIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve">
+<path fill="#aaa" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)">
+    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>
+</path>
+</svg>`;
+const emptyIcon = `<svg
+width="148px"
+height="134px"
+viewBox="0 0 148 134"
+version="1.1"
+xmlns="http://www.w3.org/2000/svg"
+xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+<defs>
+  <filter x="0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-1">
+    <feGaussianBlur stdDeviation="0" in="SourceGraphic"></feGaussianBlur>
+  </filter>
+</defs>
+<g id="148x134" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+  <g id="编组-6" transform="translate(1.000000, 1.000000)">
+    <ellipse
+      id="椭圆形"
+      fill="#EDEEF2"
+      opacity="0.3"
+      filter="url(#filter-1)"
+      cx="73.0800017"
+      cy="115.920003"
+      rx="73.0800017"
+      ry="16.8000004"
+    ></ellipse>
+    <g id="编组-5" transform="translate(15.120000, 0.000000)">
+      <polygon
+        id="矩形"
+        fill="#E2E4E9"
+        points="19.2789848 49.5600011 99.1200023 48.7200011 117.600003 75.9297673 117.600003 92.313049 0 92.313049 0 75.0356267"
+      ></polygon>
+      <path
+        d="M23.5200005,0 L94.0800002,0 C97.7913538,2.06413823e-16 100.8,3.00864655 100.8,6.72000015 L100.8,99.1200023 L100.8,99.1200023 L16.8000004,99.1200023 L16.8000004,6.72000015 C16.8000004,3.00864655 19.8086469,1.56994302e-15 23.5200005,0 Z"
+        id="矩形"
+        fill="#F9FAFB"
+      ></path>
+      <path
+        d="M30.9200007,12.4400003 L86.6800019,12.4400003 C88.5356787,12.4400003 90.040002,13.9443236 90.040002,15.8000004 L90.040002,42.000001 C90.040002,43.8556778 88.5356787,45.360001 86.6800019,45.360001 L30.9200007,45.360001 C29.0643239,45.360001 27.5600006,43.8556778 27.5600006,42.000001 L27.5600006,15.8000004 C27.5600006,13.9443236 29.0643239,12.4400003 30.9200007,12.4400003 Z"
+        id="矩形"
+        fill="#E8EAEE"
+      ></path>
+      <text
+        id="&lt;/null&gt;"
+        font-family="PingFangSC-Medium, PingFang SC"
+        font-size="15.1200003"
+        font-weight="400"
+        fill="#BCBECD"
+      >
+        <tspan x="33.6000008" y="32.8000004">&lt;/null&gt;</tspan>
+      </text>
+      <rect id="矩形" fill="#E8EAEE" x="27.5600006" y="52.0800012" width="61.4800014" height="5.04000011" rx="2.52000006"></rect>
+      <rect
+        id="矩形备份"
+        fill="#E8EAEE"
+        x="27.5600006"
+        y="63.8400014"
+        width="61.4800014"
+        height="5.04000011"
+        rx="2.52000006"
+      ></rect>
+      <path
+        d="M0,75.6000017 L29.280235,75.6000017 C32.0637502,75.6000017 34.3202352,77.8564866 34.3202352,80.6400018 L34.3202352,86.2591426 C34.3202352,89.0426578 36.5767201,91.2991427 39.3602353,91.2991427 L78.4136737,91.2991427 C81.1971889,91.2991427 83.4536738,89.0426578 83.4536738,86.2591426 L83.4536738,80.6400018 C83.4536738,77.8564866 85.7101587,75.6000017 88.4936739,75.6000017 L117.600003,75.6000017 L117.600003,75.6000017 L117.600003,110.880003 C117.600003,115.519195 113.839194,119.280003 109.200002,119.280003 L8.40000019,119.280003 C3.76080819,119.280003 -6.53729019e-15,115.519195 0,110.880003 L0,75.6000017 L0,75.6000017 Z"
+        id="矩形"
+        fill="#EDEFF2"
+      ></path>
+    </g>
+  </g>
+</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,
+    'plus-square': plusSquare,
+    'minus-square': minusSquare,
+    loading: loadingIcon,
+    empty: emptyIcon,
+    drag: dragIcon,
+    'arrow-left': arrowLeftIcon,
+    'arrow-right': arrowRightIcon
+};
+
+class GanttIconComponent {
+    set iconName(name) {
+        this.setSvg(name);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: IsGanttBarItemPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.3", ngImport: i0, type: IsGanttBarItemPipe, isStandalone: true, name: "isGanttBarItem" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: IsGanttBarItemPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'isGanttBarItem',
-                    standalone: true
-                }]
-        }] });
-class IsGanttCustomItemPipe {
-    transform(value) {
-        return value === GanttItemType.custom;
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.isIcon = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: IsGanttCustomItemPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.3", ngImport: i0, type: IsGanttCustomItemPipe, isStandalone: true, name: "isGanttCustomItem" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: IsGanttCustomItemPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'isGanttCustomItem',
-                    standalone: true
-                }]
-        }] });
-class IsGanttGroupPipe {
-    transform(data) {
-        return !!data.items;
+    setSvg(name) {
+        const iconSvg = icons[name];
+        if (iconSvg) {
+            this.elementRef.nativeElement.innerHTML = iconSvg;
+        }
+        else {
+            this.elementRef.nativeElement.innerHTML = '';
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: IsGanttGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.3", ngImport: i0, type: IsGanttGroupPipe, isStandalone: true, name: "isGanttGroup" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: GanttIconComponent, isStandalone: true, selector: "gantt-icon", inputs: { iconName: "iconName" }, host: { properties: { "class.gantt-icon": "this.isIcon" } }, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: IsGanttGroupPipe, decorators: [{
-            type: Pipe,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttIconComponent, decorators: [{
+            type: Component,
             args: [{
-                    name: 'isGanttGroup',
+                    selector: 'gantt-icon',
+                    template: '',
                     standalone: true
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { isIcon: [{
+                type: HostBinding,
+                args: ['class.gantt-icon']
+            }], iconName: [{
+                type: Input
+            }] } });
 
 class GanttLinkLine {
     constructor() { }
@@ -3468,12 +3185,12 @@ function createLineGenerator(type, ganttUpper) {
 }
 
 class GanttLinksComponent {
-    constructor(ganttUpper, cdr, elementRef, ganttDragContainer, ngZone) {
-        this.ganttUpper = ganttUpper;
-        this.cdr = cdr;
-        this.elementRef = elementRef;
-        this.ganttDragContainer = ganttDragContainer;
-        this.ngZone = ngZone;
+    constructor() {
+        this.ganttUpper = inject(GANTT_UPPER_TOKEN);
+        this.cdr = inject(ChangeDetectorRef);
+        this.elementRef = inject(ElementRef);
+        this.ganttDragContainer = inject(GanttDragContainer);
+        this.ngZone = inject(NgZone);
         // @Input() groups: GanttGroupInternal[] = [];
         // @Input() items: GanttItemInternal[] = [];
         this.flatItems = [];
@@ -3647,16 +3364,13 @@ class GanttLinksComponent {
         this.unsubscribe$.next();
         this.unsubscribe$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttLinksComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: GanttDragContainer }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: GanttLinksComponent, isStandalone: true, selector: "gantt-links-overlay", inputs: { flatItems: "flatItems" }, outputs: { lineClick: "lineClick" }, host: { properties: { "class.gantt-links-overlay": "this.ganttLinksOverlay" } }, usesOnChanges: true, ngImport: i0, template: "<svg [attr.width]=\"ganttUpper.view.width\" class=\"gantt-links-overlay-main\">\n  @for (link of links; track trackBy(i); let i = $index) {\n    <ng-container>\n      <path\n        [attr.d]=\"link.path\"\n        fill=\"transparent\"\n        stroke-width=\"2\"\n        [attr.stroke]=\"link.color\"\n        pointer-events=\"none\"\n        [attr.style]=\"link.type === ganttLinkTypes.sf ? 'marker-start: url(#triangle' + i + ')' : 'marker-end: url(#triangle' + i + ')'\"\n      ></path>\n      <g>\n        <path\n          class=\"link-line\"\n          (click)=\"onLineClick($event, link)\"\n          [attr.d]=\"link.path\"\n          (mouseenter)=\"mouseEnterPath(link, i)\"\n          (mouseleave)=\"mouseLeavePath(link)\"\n          stroke=\"transparent\"\n          stroke-width=\"9\"\n          fill=\"none\"\n          cursor=\"pointer\"\n        ></path>\n      </g>\n      @if (showArrow) {\n        <defs>\n          @if (link.type === ganttLinkTypes.sf) {\n            <marker [id]=\"'triangle' + i\" markerUnits=\"strokeWidth\" markerWidth=\"5\" markerHeight=\"4\" refX=\"5\" refY=\"2\" orient=\"180\">\n              <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n            </marker>\n          } @else {\n            <marker [id]=\"'triangle' + i\" markerUnits=\"strokeWidth\" markerWidth=\"5\" markerHeight=\"4\" refX=\"5\" refY=\"2\" orient=\"auto\">\n              <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n            </marker>\n          }\n        </defs>\n      }\n    </ng-container>\n  }\n  <line class=\"link-dragging-line\"></line>\n</svg>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttLinksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: GanttLinksComponent, isStandalone: true, selector: "gantt-links-overlay", inputs: { flatItems: "flatItems" }, outputs: { lineClick: "lineClick" }, host: { properties: { "class.gantt-links-overlay": "this.ganttLinksOverlay" } }, usesOnChanges: true, ngImport: i0, template: "<svg [attr.width]=\"ganttUpper.view.width\" class=\"gantt-links-overlay-main\">\n  @for (link of links; track trackBy(i); let i = $index) {\n    <ng-container>\n      <path\n        [attr.d]=\"link.path\"\n        fill=\"transparent\"\n        stroke-width=\"2\"\n        [attr.stroke]=\"link.color\"\n        pointer-events=\"none\"\n        [attr.style]=\"link.type === ganttLinkTypes.sf ? 'marker-start: url(#triangle' + i + ')' : 'marker-end: url(#triangle' + i + ')'\"\n      ></path>\n      <g>\n        <path\n          class=\"link-line\"\n          (click)=\"onLineClick($event, link)\"\n          [attr.d]=\"link.path\"\n          (mouseenter)=\"mouseEnterPath(link, i)\"\n          (mouseleave)=\"mouseLeavePath(link)\"\n          stroke=\"transparent\"\n          stroke-width=\"9\"\n          fill=\"none\"\n          cursor=\"pointer\"\n        ></path>\n      </g>\n      @if (showArrow) {\n        <defs>\n          @if (link.type === ganttLinkTypes.sf) {\n            <marker [id]=\"'triangle' + i\" markerUnits=\"strokeWidth\" markerWidth=\"5\" markerHeight=\"4\" refX=\"5\" refY=\"2\" orient=\"180\">\n              <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n            </marker>\n          } @else {\n            <marker [id]=\"'triangle' + i\" markerUnits=\"strokeWidth\" markerWidth=\"5\" markerHeight=\"4\" refX=\"5\" refY=\"2\" orient=\"auto\">\n              <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n            </marker>\n          }\n        </defs>\n      }\n    </ng-container>\n  }\n  <line class=\"link-dragging-line\"></line>\n</svg>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttLinksComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttLinksComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gantt-links-overlay', imports: [], template: "<svg [attr.width]=\"ganttUpper.view.width\" class=\"gantt-links-overlay-main\">\n  @for (link of links; track trackBy(i); let i = $index) {\n    <ng-container>\n      <path\n        [attr.d]=\"link.path\"\n        fill=\"transparent\"\n        stroke-width=\"2\"\n        [attr.stroke]=\"link.color\"\n        pointer-events=\"none\"\n        [attr.style]=\"link.type === ganttLinkTypes.sf ? 'marker-start: url(#triangle' + i + ')' : 'marker-end: url(#triangle' + i + ')'\"\n      ></path>\n      <g>\n        <path\n          class=\"link-line\"\n          (click)=\"onLineClick($event, link)\"\n          [attr.d]=\"link.path\"\n          (mouseenter)=\"mouseEnterPath(link, i)\"\n          (mouseleave)=\"mouseLeavePath(link)\"\n          stroke=\"transparent\"\n          stroke-width=\"9\"\n          fill=\"none\"\n          cursor=\"pointer\"\n        ></path>\n      </g>\n      @if (showArrow) {\n        <defs>\n          @if (link.type === ganttLinkTypes.sf) {\n            <marker [id]=\"'triangle' + i\" markerUnits=\"strokeWidth\" markerWidth=\"5\" markerHeight=\"4\" refX=\"5\" refY=\"2\" orient=\"180\">\n              <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n            </marker>\n          } @else {\n            <marker [id]=\"'triangle' + i\" markerUnits=\"strokeWidth\" markerWidth=\"5\" markerHeight=\"4\" refX=\"5\" refY=\"2\" orient=\"auto\">\n              <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n            </marker>\n          }\n        </defs>\n      }\n    </ng-container>\n  }\n  <line class=\"link-dragging-line\"></line>\n</svg>\n" }]
-        }], ctorParameters: () => [{ type: GanttUpper, decorators: [{
-                    type: Inject,
-                    args: [GANTT_UPPER_TOKEN]
-                }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: GanttDragContainer }, { type: i0.NgZone }], propDecorators: { flatItems: [{
+        }], ctorParameters: () => [], propDecorators: { flatItems: [{
                 type: Input
             }], lineClick: [{
                 type: Output
@@ -3665,138 +3379,112 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
                 args: ['class.gantt-links-overlay']
             }] } });
 
-const angleRight = `<svg xmlns="http://www.w3.org/2000/svg" fit=""  preserveAspectRatio="xMidYMid meet" focusable="false"><g id="amnavigation/angle-right" stroke-width="1" fill-rule="evenodd"><path d="M7.978 11.498l-.005.005L2.3 5.831 3.13 5l4.848 4.848L12.826 5l.83.831-5.673 5.672-.005-.005z"   transform="rotate(-90 7.978 8.252)"></path></g></svg>`;
-const angleDown = `<svg xmlns="http://www.w3.org/2000/svg" fit=""  preserveAspectRatio="xMidYMid meet" focusable="false"><g id="aknavigation/angle-down" stroke-width="1" fill-rule="evenodd"><path d="M7.978 11.997l-.005.006L2.3 6.33l.83-.831 4.848 4.848L12.826 5.5l.83.83-5.673 5.673-.005-.006z" ></path></g></svg>`;
-const plusSquare = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fit=""   preserveAspectRatio="xMidYMid meet" focusable="false"><g id="kxaction/plus-square" stroke-width="1" fill-rule="evenodd"><path d="M2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1.2a.8.8 0 0 0-.8.8v12a.8.8 0 0 0 .8.8h12a.8.8 0 0 0 .8-.8V2a.8.8 0 0 0-.8-.8H2zm5.45 6.2V4.75h1.2V7.4h2.65v1.2H8.65v2.65h-1.2V8.6H4.8V7.4h2.65z"></path></g></svg>`;
-const minusSquare = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fit="" preserveAspectRatio="xMidYMid meet" focusable="false"><g id="jnaction/minus-square" stroke-width="1" fill-rule="evenodd"><path d="M2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1.2a.8.8 0 0 0-.8.8v12a.8.8 0 0 0 .8.8h12a.8.8 0 0 0 .8-.8V2a.8.8 0 0 0-.8-.8H2zm2.8 6.2h6.5v1.2H4.8V7.4z"></path></g></svg>`;
-const loadingIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve">
-<path fill="#aaa" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)">
-    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>
-</path>
-</svg>`;
-const emptyIcon = `<svg
-width="148px"
-height="134px"
-viewBox="0 0 148 134"
-version="1.1"
-xmlns="http://www.w3.org/2000/svg"
-xmlns:xlink="http://www.w3.org/1999/xlink"
->
-<defs>
-  <filter x="0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-1">
-    <feGaussianBlur stdDeviation="0" in="SourceGraphic"></feGaussianBlur>
-  </filter>
-</defs>
-<g id="148x134" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-  <g id="编组-6" transform="translate(1.000000, 1.000000)">
-    <ellipse
-      id="椭圆形"
-      fill="#EDEEF2"
-      opacity="0.3"
-      filter="url(#filter-1)"
-      cx="73.0800017"
-      cy="115.920003"
-      rx="73.0800017"
-      ry="16.8000004"
-    ></ellipse>
-    <g id="编组-5" transform="translate(15.120000, 0.000000)">
-      <polygon
-        id="矩形"
-        fill="#E2E4E9"
-        points="19.2789848 49.5600011 99.1200023 48.7200011 117.600003 75.9297673 117.600003 92.313049 0 92.313049 0 75.0356267"
-      ></polygon>
-      <path
-        d="M23.5200005,0 L94.0800002,0 C97.7913538,2.06413823e-16 100.8,3.00864655 100.8,6.72000015 L100.8,99.1200023 L100.8,99.1200023 L16.8000004,99.1200023 L16.8000004,6.72000015 C16.8000004,3.00864655 19.8086469,1.56994302e-15 23.5200005,0 Z"
-        id="矩形"
-        fill="#F9FAFB"
-      ></path>
-      <path
-        d="M30.9200007,12.4400003 L86.6800019,12.4400003 C88.5356787,12.4400003 90.040002,13.9443236 90.040002,15.8000004 L90.040002,42.000001 C90.040002,43.8556778 88.5356787,45.360001 86.6800019,45.360001 L30.9200007,45.360001 C29.0643239,45.360001 27.5600006,43.8556778 27.5600006,42.000001 L27.5600006,15.8000004 C27.5600006,13.9443236 29.0643239,12.4400003 30.9200007,12.4400003 Z"
-        id="矩形"
-        fill="#E8EAEE"
-      ></path>
-      <text
-        id="&lt;/null&gt;"
-        font-family="PingFangSC-Medium, PingFang SC"
-        font-size="15.1200003"
-        font-weight="400"
-        fill="#BCBECD"
-      >
-        <tspan x="33.6000008" y="32.8000004">&lt;/null&gt;</tspan>
-      </text>
-      <rect id="矩形" fill="#E8EAEE" x="27.5600006" y="52.0800012" width="61.4800014" height="5.04000011" rx="2.52000006"></rect>
-      <rect
-        id="矩形备份"
-        fill="#E8EAEE"
-        x="27.5600006"
-        y="63.8400014"
-        width="61.4800014"
-        height="5.04000011"
-        rx="2.52000006"
-      ></rect>
-      <path
-        d="M0,75.6000017 L29.280235,75.6000017 C32.0637502,75.6000017 34.3202352,77.8564866 34.3202352,80.6400018 L34.3202352,86.2591426 C34.3202352,89.0426578 36.5767201,91.2991427 39.3602353,91.2991427 L78.4136737,91.2991427 C81.1971889,91.2991427 83.4536738,89.0426578 83.4536738,86.2591426 L83.4536738,80.6400018 C83.4536738,77.8564866 85.7101587,75.6000017 88.4936739,75.6000017 L117.600003,75.6000017 L117.600003,75.6000017 L117.600003,110.880003 C117.600003,115.519195 113.839194,119.280003 109.200002,119.280003 L8.40000019,119.280003 C3.76080819,119.280003 -6.53729019e-15,115.519195 0,110.880003 L0,75.6000017 L0,75.6000017 Z"
-        id="矩形"
-        fill="#EDEFF2"
-      ></path>
-    </g>
-  </g>
-</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,
-    'plus-square': plusSquare,
-    'minus-square': minusSquare,
-    loading: loadingIcon,
-    empty: emptyIcon,
-    drag: dragIcon,
-    'arrow-left': arrowLeftIcon,
-    'arrow-right': arrowRightIcon
-};
+class GanttLoaderComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: GanttLoaderComponent, isStandalone: true, selector: "gantt-loader", host: { classAttribute: "gantt-loader gantt-loader-overlay" }, ngImport: i0, template: `
+        <div class="gantt-loader-wrapper">
+            <div class="gantt-loader-loading">
+                <span class="gantt-loader-loading-spot"></span>
+            </div>
+        </div>
+    `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttLoaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'gantt-loader',
+                    template: `
+        <div class="gantt-loader-wrapper">
+            <div class="gantt-loader-loading">
+                <span class="gantt-loader-loading-spot"></span>
+            </div>
+        </div>
+    `,
+                    host: {
+                        class: 'gantt-loader gantt-loader-overlay'
+                    },
+                    standalone: true
+                }]
+        }] });
 
-class GanttIconComponent {
-    set iconName(name) {
-        this.setSvg(name);
+class IsGanttRangeItemPipe {
+    transform(value) {
+        return value === GanttItemType.range;
     }
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.isIcon = true;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IsGanttRangeItemPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: IsGanttRangeItemPipe, isStandalone: true, name: "isGanttRangeItem" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IsGanttRangeItemPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'isGanttRangeItem',
+                    standalone: true
+                }]
+        }] });
+class IsGanttBarItemPipe {
+    transform(value) {
+        return value === GanttItemType.bar;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IsGanttBarItemPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: IsGanttBarItemPipe, isStandalone: true, name: "isGanttBarItem" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IsGanttBarItemPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'isGanttBarItem',
+                    standalone: true
+                }]
+        }] });
+class IsGanttCustomItemPipe {
+    transform(value) {
+        return value === GanttItemType.custom;
     }
-    setSvg(name) {
-        const iconSvg = icons[name];
-        if (iconSvg) {
-            this.elementRef.nativeElement.innerHTML = iconSvg;
-        }
-        else {
-            this.elementRef.nativeElement.innerHTML = '';
-        }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IsGanttCustomItemPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: IsGanttCustomItemPipe, isStandalone: true, name: "isGanttCustomItem" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IsGanttCustomItemPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'isGanttCustomItem',
+                    standalone: true
+                }]
+        }] });
+class IsGanttGroupPipe {
+    transform(data) {
+        return !!data.items;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttIconComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: GanttIconComponent, isStandalone: true, selector: "gantt-icon", inputs: { iconName: "iconName" }, host: { properties: { "class.gantt-icon": "this.isIcon" } }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IsGanttGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: IsGanttGroupPipe, isStandalone: true, name: "isGanttGroup" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttIconComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IsGanttGroupPipe, decorators: [{
+            type: Pipe,
             args: [{
-                    selector: 'gantt-icon',
-                    template: '',
+                    name: 'isGanttGroup',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { isIcon: [{
+        }] });
+
+class NgxGanttRangeComponent extends GanttItemUpper {
+    constructor() {
+        super();
+        this.ganttRangeClass = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NgxGanttRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: NgxGanttRangeComponent, isStandalone: true, selector: "ngx-gantt-range,gantt-range", host: { properties: { "class.gantt-range": "this.ganttRangeClass" } }, usesInheritance: true, ngImport: i0, template: "@if (item.start && item.end) {\n  <div class=\"gantt-range-main\">\n    @if (item.progress >= 0) {\n      <div class=\"gantt-range-main-progress\" [style.width.%]=\"item.progress * 100\"></div>\n    }\n  </div>\n  <div class=\"gantt-range-triangle left\"></div>\n  <div class=\"gantt-range-triangle right\"></div>\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"></ng-template>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NgxGanttRangeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-gantt-range,gantt-range', imports: [NgTemplateOutlet], template: "@if (item.start && item.end) {\n  <div class=\"gantt-range-main\">\n    @if (item.progress >= 0) {\n      <div class=\"gantt-range-main-progress\" [style.width.%]=\"item.progress * 100\"></div>\n    }\n  </div>\n  <div class=\"gantt-range-triangle left\"></div>\n  <div class=\"gantt-range-triangle right\"></div>\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"></ng-template>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { ganttRangeClass: [{
                 type: HostBinding,
-                args: ['class.gantt-icon']
-            }], iconName: [{
-                type: Input
+                args: ['class.gantt-range']
             }] } });
 
 class GanttMainComponent {
-    constructor(ganttUpper, dom, ngZone) {
-        this.ganttUpper = ganttUpper;
-        this.dom = dom;
-        this.ngZone = ngZone;
+    constructor() {
+        this.ganttUpper = inject(GANTT_UPPER_TOKEN);
+        this.dom = inject(GanttDomService);
+        this.ngZone = inject(NgZone);
         this.barClick = new EventEmitter();
         this.lineClick = new EventEmitter();
         this.ganttMainClass = true;
@@ -3827,10 +3515,10 @@ class GanttMainComponent {
         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: "19.2.3", 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: "19.2.3", 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  @for (data of viewportItems; track trackBy($index, data)) {\n    @if (data | isGanttGroup) {\n      <div class=\"gantt-group\" [style.height.px]=\"ganttUpper.styles.lineHeight\" [ngClass]=\"data.class\">\n        <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: data }\"></ng-template>\n      </div>\n    }\n    @if (!(data | isGanttGroup)) {\n      <div\n        class=\"gantt-item\"\n        [style.height.px]=\"ganttUpper.styles.lineHeight\"\n        [style]=\"data.laneStyle\"\n        [class.gantt-main-item-active]=\"ganttUpper.isSelected(data.id)\"\n      >\n        @if (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        }\n        @if ((data.type | isGanttRangeItem) || (data.type | isGanttBarItem)) {\n          @if (data.type | isGanttRangeItem) {\n            <gantt-range [template]=\"rangeTemplate\" [item]=\"data\"></gantt-range>\n          }\n          @if (data.type | isGanttBarItem) {\n            <gantt-bar [item]=\"data\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n          }\n          @if (ganttUpper.baselineItemsMap[data.id]) {\n            <gantt-baseline [baselineItem]=\"ganttUpper.baselineItemsMap[data.id]\" [template]=\"baselineTemplate\"></gantt-baseline>\n          }\n        }\n      </div>\n    }\n  }\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      @for (data of viewportItems; track trackBy(i, data); let i = $index) {\n        @let item = toItemType(data);\n        <div\n          class=\"gantt-quick-time-focus-item\"\n          [ngClass]=\"{ 'gantt-quick-time-focus-item-hide': !item?.refs?.width }\"\n          [style.height.px]=\"ganttUpper.styles.lineHeight\"\n        >\n          <span class=\"ml-2\">\n            @if (item.refs?.x < dom.visibleRangeX().min && item.refs?.width) {\n              <a class=\"gantt-quick-time-focus-item-arrow link-secondary\" href=\"javascript:;\" (click)=\"quickTime(item.origin, 'left')\">\n                <gantt-icon iconName=\"arrow-left\"></gantt-icon>\n              </a>\n            }\n          </span>\n          <span class=\"mr-2\">\n            @if (item.refs?.x + item.refs?.width > dom.visibleRangeX().max && item.refs?.width) {\n              <a class=\"gantt-quick-time-focus-item-arrow link-secondary\" href=\"javascript:;\" (click)=\"quickTime(item.origin, 'right')\">\n                <gantt-icon iconName=\"arrow-right\"></gantt-icon>\n              </a>\n            }\n          </span>\n        </div>\n      }\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: GanttLinksComponent, selector: "gantt-links-overlay", inputs: ["flatItems"], outputs: ["lineClick"] }, { 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: "pipe", type: IsGanttGroupPipe, name: "isGanttGroup" }, { kind: "component", type: GanttIconComponent, selector: "gantt-icon", inputs: ["iconName"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttMainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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  @for (data of viewportItems; track trackBy($index, data)) {\n    @if (data | isGanttGroup) {\n      <div class=\"gantt-group\" [style.height.px]=\"ganttUpper.styles.lineHeight\" [ngClass]=\"data.class\">\n        <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: data }\"></ng-template>\n      </div>\n    }\n    @if (!(data | isGanttGroup)) {\n      <div\n        class=\"gantt-item\"\n        [style.height.px]=\"ganttUpper.styles.lineHeight\"\n        [style]=\"data.laneStyle\"\n        [class.gantt-main-item-active]=\"ganttUpper.isSelected(data.id)\"\n      >\n        @if (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        }\n        @if ((data.type | isGanttRangeItem) || (data.type | isGanttBarItem)) {\n          @if (data.type | isGanttRangeItem) {\n            <gantt-range [template]=\"rangeTemplate\" [item]=\"data\"></gantt-range>\n          }\n          @if (data.type | isGanttBarItem) {\n            <gantt-bar [item]=\"data\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n          }\n          @if (ganttUpper.baselineItemsMap[data.id]) {\n            <gantt-baseline [baselineItem]=\"ganttUpper.baselineItemsMap[data.id]\" [template]=\"baselineTemplate\"></gantt-baseline>\n          }\n        }\n      </div>\n    }\n  }\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      @for (data of viewportItems; track trackBy(i, data); let i = $index) {\n        @let item = toItemType(data);\n        <div class=\"gantt-quick-time-focus-item\" [style.height.px]=\"ganttUpper.styles.lineHeight\">\n          <span class=\"ml-2\">\n            @if (item.refs?.x < dom.visibleRangeX().min && item.refs?.width) {\n              <a class=\"gantt-quick-time-focus-item-arrow link-secondary\" href=\"javascript:;\" (click)=\"quickTime(item.origin, 'left')\">\n                <gantt-icon iconName=\"arrow-left\"></gantt-icon>\n              </a>\n            }\n          </span>\n          <span class=\"mr-2\">\n            @if (item.refs?.x + item.refs?.width > dom.visibleRangeX().max && item.refs?.width) {\n              <a class=\"gantt-quick-time-focus-item-arrow link-secondary\" href=\"javascript:;\" (click)=\"quickTime(item.origin, 'right')\">\n                <gantt-icon iconName=\"arrow-right\"></gantt-icon>\n              </a>\n            }\n          </span>\n        </div>\n      }\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: GanttLinksComponent, selector: "gantt-links-overlay", inputs: ["flatItems"], outputs: ["lineClick"] }, { 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: "component", type: GanttIconComponent, selector: "gantt-icon", inputs: ["iconName"] }, { kind: "pipe", type: IsGanttRangeItemPipe, name: "isGanttRangeItem" }, { kind: "pipe", type: IsGanttBarItemPipe, name: "isGanttBarItem" }, { kind: "pipe", type: IsGanttCustomItemPipe, name: "isGanttCustomItem" }, { kind: "pipe", type: IsGanttGroupPipe, name: "isGanttGroup" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttMainComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttMainComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gantt-main', imports: [
                         GanttLinksComponent,
@@ -3844,11 +3532,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
                         IsGanttCustomItemPipe,
                         IsGanttGroupPipe,
                         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  @for (data of viewportItems; track trackBy($index, data)) {\n    @if (data | isGanttGroup) {\n      <div class=\"gantt-group\" [style.height.px]=\"ganttUpper.styles.lineHeight\" [ngClass]=\"data.class\">\n        <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: data }\"></ng-template>\n      </div>\n    }\n    @if (!(data | isGanttGroup)) {\n      <div\n        class=\"gantt-item\"\n        [style.height.px]=\"ganttUpper.styles.lineHeight\"\n        [style]=\"data.laneStyle\"\n        [class.gantt-main-item-active]=\"ganttUpper.isSelected(data.id)\"\n      >\n        @if (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        }\n        @if ((data.type | isGanttRangeItem) || (data.type | isGanttBarItem)) {\n          @if (data.type | isGanttRangeItem) {\n            <gantt-range [template]=\"rangeTemplate\" [item]=\"data\"></gantt-range>\n          }\n          @if (data.type | isGanttBarItem) {\n            <gantt-bar [item]=\"data\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n          }\n          @if (ganttUpper.baselineItemsMap[data.id]) {\n            <gantt-baseline [baselineItem]=\"ganttUpper.baselineItemsMap[data.id]\" [template]=\"baselineTemplate\"></gantt-baseline>\n          }\n        }\n      </div>\n    }\n  }\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      @for (data of viewportItems; track trackBy(i, data); let i = $index) {\n        @let item = toItemType(data);\n        <div\n          class=\"gantt-quick-time-focus-item\"\n          [ngClass]=\"{ 'gantt-quick-time-focus-item-hide': !item?.refs?.width }\"\n          [style.height.px]=\"ganttUpper.styles.lineHeight\"\n        >\n          <span class=\"ml-2\">\n            @if (item.refs?.x < dom.visibleRangeX().min && item.refs?.width) {\n              <a class=\"gantt-quick-time-focus-item-arrow link-secondary\" href=\"javascript:;\" (click)=\"quickTime(item.origin, 'left')\">\n                <gantt-icon iconName=\"arrow-left\"></gantt-icon>\n              </a>\n            }\n          </span>\n          <span class=\"mr-2\">\n            @if (item.refs?.x + item.refs?.width > dom.visibleRangeX().max && item.refs?.width) {\n              <a class=\"gantt-quick-time-focus-item-arrow link-secondary\" href=\"javascript:;\" (click)=\"quickTime(item.origin, 'right')\">\n                <gantt-icon iconName=\"arrow-right\"></gantt-icon>\n              </a>\n            }\n          </span>\n        </div>\n      }\n    </div>\n  </div>\n}\n" }]
-        }], ctorParameters: () => [{ type: GanttUpper, decorators: [{
-                    type: Inject,
-                    args: [GANTT_UPPER_TOKEN]
-                }] }, { type: GanttDomService }, { type: i0.NgZone }], propDecorators: { viewportItems: [{
+                    ], 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  @for (data of viewportItems; track trackBy($index, data)) {\n    @if (data | isGanttGroup) {\n      <div class=\"gantt-group\" [style.height.px]=\"ganttUpper.styles.lineHeight\" [ngClass]=\"data.class\">\n        <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: data }\"></ng-template>\n      </div>\n    }\n    @if (!(data | isGanttGroup)) {\n      <div\n        class=\"gantt-item\"\n        [style.height.px]=\"ganttUpper.styles.lineHeight\"\n        [style]=\"data.laneStyle\"\n        [class.gantt-main-item-active]=\"ganttUpper.isSelected(data.id)\"\n      >\n        @if (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        }\n        @if ((data.type | isGanttRangeItem) || (data.type | isGanttBarItem)) {\n          @if (data.type | isGanttRangeItem) {\n            <gantt-range [template]=\"rangeTemplate\" [item]=\"data\"></gantt-range>\n          }\n          @if (data.type | isGanttBarItem) {\n            <gantt-bar [item]=\"data\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n          }\n          @if (ganttUpper.baselineItemsMap[data.id]) {\n            <gantt-baseline [baselineItem]=\"ganttUpper.baselineItemsMap[data.id]\" [template]=\"baselineTemplate\"></gantt-baseline>\n          }\n        }\n      </div>\n    }\n  }\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      @for (data of viewportItems; track trackBy(i, data); let i = $index) {\n        @let item = toItemType(data);\n        <div class=\"gantt-quick-time-focus-item\" [style.height.px]=\"ganttUpper.styles.lineHeight\">\n          <span class=\"ml-2\">\n            @if (item.refs?.x < dom.visibleRangeX().min && item.refs?.width) {\n              <a class=\"gantt-quick-time-focus-item-arrow link-secondary\" href=\"javascript:;\" (click)=\"quickTime(item.origin, 'left')\">\n                <gantt-icon iconName=\"arrow-left\"></gantt-icon>\n              </a>\n            }\n          </span>\n          <span class=\"mr-2\">\n            @if (item.refs?.x + item.refs?.width > dom.visibleRangeX().max && item.refs?.width) {\n              <a class=\"gantt-quick-time-focus-item-arrow link-secondary\" href=\"javascript:;\" (click)=\"quickTime(item.origin, 'right')\">\n                <gantt-icon iconName=\"arrow-right\"></gantt-icon>\n              </a>\n            }\n          </span>\n        </div>\n      }\n    </div>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { viewportItems: [{
                 type: Input
             }], flatItems: [{
                 type: Input
@@ -3892,6 +3577,102 @@ function setStyleWithVendorPrefix({ element, style, value }) {
     }
 }
 
+class GanttSyncScrollService {
+    constructor() {
+        this.ngZone = inject(NgZone);
+        this.scrollGroupsMap = new Map();
+    }
+    registerScrollEvent(groupName, element, direction) {
+        const group = this.scrollGroupsMap.get(groupName) || { elements: [], destroy$: new Subject(), direction };
+        group.elements.push(element);
+        this.scrollGroupsMap.set(groupName, group);
+        this.monitorScrollChange(group);
+    }
+    unregisterScrollEvent(groupName, element) {
+        const group = this.scrollGroupsMap.get(groupName);
+        if (group) {
+            group.elements = group.elements.filter((el) => el !== element);
+            if (!group.elements.length) {
+                this.scrollGroupsMap.delete(groupName);
+            }
+            else {
+                this.scrollGroupsMap.set(groupName, group);
+            }
+            this.monitorScrollChange(group);
+        }
+    }
+    monitorScrollChange(group) {
+        const { elements, destroy$, direction } = group;
+        destroy$.next();
+        destroy$.complete();
+        if (elements.length) {
+            const scrollObservers = elements.map((el) => fromEvent(el, 'scroll', passiveListenerOptions));
+            this.ngZone.runOutsideAngular(() => merge(...scrollObservers)
+                .pipe(takeUntil$1(destroy$))
+                .subscribe((event) => {
+                elements.forEach((el) => {
+                    if (direction === 'x') {
+                        el.scrollLeft = event.currentTarget.scrollLeft;
+                    }
+                    else {
+                        el.scrollTop = event.currentTarget.scrollTop;
+                    }
+                });
+            }));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttSyncScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttSyncScrollService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttSyncScrollService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class GanttSyncScrollXDirective {
+    constructor() {
+        this.syncScrollX = input(...(ngDevMode ? [undefined, { debugName: "syncScrollX" }] : []));
+        this.elementRef = inject((ElementRef));
+        this.syncScrollService = inject(GanttSyncScrollService);
+    }
+    ngOnInit() {
+        this.syncScrollService.registerScrollEvent(this.syncScrollX(), this.elementRef.nativeElement, 'x');
+    }
+    ngOnDestroy() {
+        this.syncScrollService.unregisterScrollEvent(this.syncScrollX(), this.elementRef.nativeElement);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttSyncScrollXDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.10", type: GanttSyncScrollXDirective, isStandalone: true, selector: "[syncScrollX]", inputs: { syncScrollX: { classPropertyName: "syncScrollX", publicName: "syncScrollX", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttSyncScrollXDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[syncScrollX]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { syncScrollX: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncScrollX", required: false }] }] } });
+class GanttSyncScrollYDirective {
+    constructor() {
+        this.syncScrollY = input(...(ngDevMode ? [undefined, { debugName: "syncScrollY" }] : []));
+        this.syncScrollService = inject(GanttSyncScrollService);
+        this.elementRef = inject((ElementRef));
+    }
+    ngOnInit() {
+        this.syncScrollService.registerScrollEvent(this.syncScrollY(), this.elementRef.nativeElement, 'y');
+    }
+    ngOnDestroy() {
+        this.syncScrollService.unregisterScrollEvent(this.syncScrollY(), this.elementRef.nativeElement);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttSyncScrollYDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.10", type: GanttSyncScrollYDirective, isStandalone: true, selector: "[syncScrollY]", inputs: { syncScrollY: { classPropertyName: "syncScrollY", publicName: "syncScrollY", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttSyncScrollYDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[syncScrollY]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { syncScrollY: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncScrollY", required: false }] }] } });
+
 const defaultColumnWidth = 100;
 const minColumnWidth = 80;
 class GanttTableHeaderComponent {
@@ -3901,10 +3682,10 @@ class GanttTableHeaderComponent {
     get lineHeight() {
         return this.gantt.styles.headerHeight + 'px';
     }
-    constructor(elementRef, gantt, cdr) {
-        this.elementRef = elementRef;
-        this.gantt = gantt;
-        this.cdr = cdr;
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.gantt = inject(GANTT_ABSTRACT_TOKEN);
+        this.cdr = inject(ChangeDetectorRef);
         this.tableWidth = 0;
         this.unsubscribe$ = new Subject();
         this.className = `gantt-table-header `;
@@ -4009,16 +3790,13 @@ class GanttTableHeaderComponent {
         this.unsubscribe$.next();
         this.unsubscribe$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttTableHeaderComponent, deps: [{ token: i0.ElementRef }, { token: GANTT_ABSTRACT_TOKEN }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: GanttTableHeaderComponent, isStandalone: true, selector: "gantt-table-header", inputs: { columns: "columns" }, host: { properties: { "class": "this.className", "style.height": "this.height", "style.line-height": "this.lineHeight" } }, viewQueries: [{ propertyName: "resizeLineElementRef", first: true, predicate: ["resizeLine"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"gantt-table-header-container\" syncScrollX=\"ganttTableXScroll\" [style.width.px]=\"tableWidth\" cdkScrollable>\n  @for (column of columns; track $index) {\n    <div class=\"gantt-table-column\" [style.width]=\"column.columnWidth\">\n      @if (column.headerTemplateRef) {\n        <ng-container [ngTemplateOutlet]=\"column.headerTemplateRef\"> </ng-container>\n      } @else {\n        {{ column.name }}\n      }\n      <div\n        class=\"column-resize-handle\"\n        cdkDrag\n        cdkDragLockAxis=\"x\"\n        cdkDragBoundary=\".gantt\"\n        (cdkDragMoved)=\"onResizeMoved($event, column)\"\n        (cdkDragStarted)=\"onResizeStarted($event)\"\n        (cdkDragEnded)=\"onResizeEnded($event, column)\"\n      ></div>\n    </div>\n  }\n  <div class=\"gantt-table-column gantt-table-column-placeholder\"></div>\n</div>\n\n@if (gantt?.table?.settingsSlot) {\n  <ng-template [ngTemplateOutlet]=\"gantt?.table?.settingsSlot\"></ng-template>\n}\n\n<div\n  class=\"table-resize-handle\"\n  cdkDrag\n  cdkDragLockAxis=\"x\"\n  cdkDragBoundary=\".gantt\"\n  (cdkDragMoved)=\"onResizeMoved($event)\"\n  (cdkDragStarted)=\"onResizeStarted($event)\"\n  (cdkDragEnded)=\"onOverallResizeEnded($event)\"\n></div>\n\n<div #resizeLine class=\"table-resize-auxiliary-line\"></div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: GanttSyncScrollXDirective, selector: "[syncScrollX]", inputs: ["syncScrollX"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttTableHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: GanttTableHeaderComponent, isStandalone: true, selector: "gantt-table-header", inputs: { columns: "columns" }, host: { properties: { "class": "this.className", "style.height": "this.height", "style.line-height": "this.lineHeight" } }, viewQueries: [{ propertyName: "resizeLineElementRef", first: true, predicate: ["resizeLine"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"gantt-table-header-container\" syncScrollX=\"ganttTableXScroll\" [style.width.px]=\"tableWidth\" cdkScrollable>\n  @for (column of columns; track $index) {\n    <div class=\"gantt-table-column\" [style.width]=\"column.columnWidth\">\n      @if (column.headerTemplateRef) {\n        <ng-container [ngTemplateOutlet]=\"column.headerTemplateRef\"> </ng-container>\n      } @else {\n        {{ column.name }}\n      }\n      <div\n        class=\"column-resize-handle\"\n        cdkDrag\n        cdkDragLockAxis=\"x\"\n        cdkDragBoundary=\".gantt\"\n        (cdkDragMoved)=\"onResizeMoved($event, column)\"\n        (cdkDragStarted)=\"onResizeStarted($event)\"\n        (cdkDragEnded)=\"onResizeEnded($event, column)\"\n      ></div>\n    </div>\n  }\n  <div class=\"gantt-table-column gantt-table-column-placeholder\"></div>\n</div>\n\n@if (gantt?.table?.settingsSlot) {\n  <ng-template [ngTemplateOutlet]=\"gantt?.table?.settingsSlot\"></ng-template>\n}\n\n<div\n  class=\"table-resize-handle\"\n  cdkDrag\n  cdkDragLockAxis=\"x\"\n  cdkDragBoundary=\".gantt\"\n  (cdkDragMoved)=\"onResizeMoved($event)\"\n  (cdkDragStarted)=\"onResizeStarted($event)\"\n  (cdkDragEnded)=\"onOverallResizeEnded($event)\"\n></div>\n\n<div #resizeLine class=\"table-resize-auxiliary-line\"></div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: GanttSyncScrollXDirective, selector: "[syncScrollX]", inputs: ["syncScrollX"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttTableHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttTableHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gantt-table-header', imports: [NgTemplateOutlet, CdkDrag, GanttSyncScrollXDirective], template: "<div class=\"gantt-table-header-container\" syncScrollX=\"ganttTableXScroll\" [style.width.px]=\"tableWidth\" cdkScrollable>\n  @for (column of columns; track $index) {\n    <div class=\"gantt-table-column\" [style.width]=\"column.columnWidth\">\n      @if (column.headerTemplateRef) {\n        <ng-container [ngTemplateOutlet]=\"column.headerTemplateRef\"> </ng-container>\n      } @else {\n        {{ column.name }}\n      }\n      <div\n        class=\"column-resize-handle\"\n        cdkDrag\n        cdkDragLockAxis=\"x\"\n        cdkDragBoundary=\".gantt\"\n        (cdkDragMoved)=\"onResizeMoved($event, column)\"\n        (cdkDragStarted)=\"onResizeStarted($event)\"\n        (cdkDragEnded)=\"onResizeEnded($event, column)\"\n      ></div>\n    </div>\n  }\n  <div class=\"gantt-table-column gantt-table-column-placeholder\"></div>\n</div>\n\n@if (gantt?.table?.settingsSlot) {\n  <ng-template [ngTemplateOutlet]=\"gantt?.table?.settingsSlot\"></ng-template>\n}\n\n<div\n  class=\"table-resize-handle\"\n  cdkDrag\n  cdkDragLockAxis=\"x\"\n  cdkDragBoundary=\".gantt\"\n  (cdkDragMoved)=\"onResizeMoved($event)\"\n  (cdkDragStarted)=\"onResizeStarted($event)\"\n  (cdkDragEnded)=\"onOverallResizeEnded($event)\"\n></div>\n\n<div #resizeLine class=\"table-resize-auxiliary-line\"></div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [GANTT_ABSTRACT_TOKEN]
-                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { columns: [{
+        }], ctorParameters: () => [], propDecorators: { columns: [{
                 type: Input
             }], resizeLineElementRef: [{
                 type: ViewChild,
@@ -4046,12 +3824,12 @@ class GanttTableBodyComponent {
     get viewportItems() {
         return this._viewportItems;
     }
-    constructor(gantt, ganttUpper, cdr, document, elementRef) {
-        this.gantt = gantt;
-        this.ganttUpper = ganttUpper;
-        this.cdr = cdr;
-        this.document = document;
-        this.elementRef = elementRef;
+    constructor() {
+        this.gantt = inject(GANTT_ABSTRACT_TOKEN);
+        this.ganttUpper = inject(GANTT_UPPER_TOKEN);
+        this.cdr = inject(ChangeDetectorRef);
+        this.document = inject(DOCUMENT);
+        this.elementRef = inject(ElementRef);
         this.draggable = false;
         this.dragDropped = new EventEmitter();
         this.dragStarted = new EventEmitter();
@@ -4294,22 +4072,13 @@ class GanttTableBodyComponent {
         this.document.querySelectorAll('.drop-position-after').forEach((element) => element.classList.remove('drop-position-after'));
         this.document.querySelectorAll('.drop-position-inside').forEach((element) => element.classList.remove('drop-position-inside'));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttTableBodyComponent, deps: [{ token: GANTT_ABSTRACT_TOKEN }, { token: GANTT_UPPER_TOKEN }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", 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  @if (!viewportItems?.length) {\n    @if (!emptyTemplate) {\n      <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n      <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n    }\n    <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n  }\n\n  @if (viewportItems && viewportItems.length > 0) {\n    @for (item of viewportItems; track trackBy($index, item)) {\n      @if (item | isGanttGroup) {\n        <div class=\"gantt-table-group\" [style.height.px]=\"gantt.styles.lineHeight\" [ngClass]=\"item.class\">\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            @if (groupTemplate) {\n              <ng-template\n                [ngTemplateOutlet]=\"groupTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n              ></ng-template>\n            } @else {\n              <span class=\"group-title\">{{ item.title }}</span>\n            }\n          </div>\n        </div>\n      }\n      @if (!(item | isGanttGroup)) {\n        <div\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          @for (column of columns; track $index; let first = $first) {\n            <div [classList]=\"column.classList\" [style.width]=\"column.columnWidth\">\n              <!-- drag icon -->\n              @if (first && draggable) {\n                <gantt-icon\n                  class=\"gantt-drag-handle\"\n                  iconName=\"drag\"\n                  cdkDragHandle\n                  [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n                ></gantt-icon>\n              }\n              <!-- expand icon -->\n              @if (column?.showExpandIcon || (!hasExpandIcon && first)) {\n                <div class=\"gantt-expand-icon\" [style.marginLeft.px]=\"item.level * 20\">\n                  @if (item.level < gantt.maxLevel - 1 && ((gantt.async && item.expandable) || item.children?.length > 0)) {\n                    @if (!item.loading) {\n                      <gantt-icon\n                        class=\"expand-icon\"\n                        [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n                        (click)=\"expandChildren($event, item)\"\n                      >\n                      </gantt-icon>\n                    }\n                    @if (item.loading) {\n                      <gantt-icon [iconName]=\"'loading'\"></gantt-icon>\n                    }\n                  }\n                </div>\n              }\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          }\n          <div class=\"gantt-table-column gantt-table-column-placeholder\"></div>\n          <ng-template\n            [ngTemplateOutlet]=\"rowAfterTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n          ></ng-template>\n        </div>\n      }\n    }\n  }\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: "component", type: GanttIconComponent, selector: "gantt-icon", inputs: ["iconName"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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" }, { kind: "pipe", type: IsGanttGroupPipe, name: "isGanttGroup" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttTableBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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  @if (!viewportItems?.length) {\n    @if (!emptyTemplate) {\n      <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n      <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n    }\n    <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n  }\n\n  @if (viewportItems && viewportItems.length > 0) {\n    @for (item of viewportItems; track trackBy($index, item)) {\n      @if (item | isGanttGroup) {\n        <div class=\"gantt-table-group\" [style.height.px]=\"gantt.styles.lineHeight\" [ngClass]=\"item.class\">\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            @if (groupTemplate) {\n              <ng-template\n                [ngTemplateOutlet]=\"groupTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n              ></ng-template>\n            } @else {\n              <span class=\"group-title\">{{ item.title }}</span>\n            }\n          </div>\n        </div>\n      }\n      @if (!(item | isGanttGroup)) {\n        <div\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          @for (column of columns; track $index; let first = $first) {\n            <div [classList]=\"column.classList\" [style.width]=\"column.columnWidth\">\n              <!-- drag icon -->\n              @if (first && draggable) {\n                <gantt-icon\n                  class=\"gantt-drag-handle\"\n                  iconName=\"drag\"\n                  cdkDragHandle\n                  [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n                ></gantt-icon>\n              }\n              <!-- expand icon -->\n              @if (column?.showExpandIcon || (!hasExpandIcon && first)) {\n                <div class=\"gantt-expand-icon\" [style.marginLeft.px]=\"item.level * 20\">\n                  @if (item.level < gantt.maxLevel - 1 && ((gantt.async && item.expandable) || item.children?.length > 0)) {\n                    @if (!item.loading) {\n                      <gantt-icon\n                        class=\"expand-icon\"\n                        [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n                        (click)=\"expandChildren($event, item)\"\n                      >\n                      </gantt-icon>\n                    }\n                    @if (item.loading) {\n                      <gantt-icon [iconName]=\"'loading'\"></gantt-icon>\n                    }\n                  }\n                </div>\n              }\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          }\n          <div class=\"gantt-table-column gantt-table-column-placeholder\"></div>\n          <ng-template\n            [ngTemplateOutlet]=\"rowAfterTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n          ></ng-template>\n        </div>\n      }\n    }\n  }\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", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: GanttIconComponent, selector: "gantt-icon", inputs: ["iconName"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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" }, { kind: "pipe", type: IsGanttGroupPipe, name: "isGanttGroup" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttTableBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttTableBodyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gantt-table-body', imports: [CdkDropList, GanttIconComponent, NgTemplateOutlet, NgClass, CdkDrag, CdkDragHandle, IsGanttRangeItemPipe, IsGanttGroupPipe], 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  @if (!viewportItems?.length) {\n    @if (!emptyTemplate) {\n      <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n      <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n    }\n    <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n  }\n\n  @if (viewportItems && viewportItems.length > 0) {\n    @for (item of viewportItems; track trackBy($index, item)) {\n      @if (item | isGanttGroup) {\n        <div class=\"gantt-table-group\" [style.height.px]=\"gantt.styles.lineHeight\" [ngClass]=\"item.class\">\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            @if (groupTemplate) {\n              <ng-template\n                [ngTemplateOutlet]=\"groupTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n              ></ng-template>\n            } @else {\n              <span class=\"group-title\">{{ item.title }}</span>\n            }\n          </div>\n        </div>\n      }\n      @if (!(item | isGanttGroup)) {\n        <div\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          @for (column of columns; track $index; let first = $first) {\n            <div [classList]=\"column.classList\" [style.width]=\"column.columnWidth\">\n              <!-- drag icon -->\n              @if (first && draggable) {\n                <gantt-icon\n                  class=\"gantt-drag-handle\"\n                  iconName=\"drag\"\n                  cdkDragHandle\n                  [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n                ></gantt-icon>\n              }\n              <!-- expand icon -->\n              @if (column?.showExpandIcon || (!hasExpandIcon && first)) {\n                <div class=\"gantt-expand-icon\" [style.marginLeft.px]=\"item.level * 20\">\n                  @if (item.level < gantt.maxLevel - 1 && ((gantt.async && item.expandable) || item.children?.length > 0)) {\n                    @if (!item.loading) {\n                      <gantt-icon\n                        class=\"expand-icon\"\n                        [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n                        (click)=\"expandChildren($event, item)\"\n                      >\n                      </gantt-icon>\n                    }\n                    @if (item.loading) {\n                      <gantt-icon [iconName]=\"'loading'\"></gantt-icon>\n                    }\n                  }\n                </div>\n              }\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          }\n          <div class=\"gantt-table-column gantt-table-column-placeholder\"></div>\n          <ng-template\n            [ngTemplateOutlet]=\"rowAfterTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n          ></ng-template>\n        </div>\n      }\n    }\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [GANTT_ABSTRACT_TOKEN]
-                }] }, { type: GanttUpper, decorators: [{
-                    type: Inject,
-                    args: [GANTT_UPPER_TOKEN]
-                }] }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.ElementRef }], propDecorators: { viewportItems: [{
+        }], ctorParameters: () => [], propDecorators: { viewportItems: [{
                 type: Input
             }], flatItems: [{
                 type: Input
@@ -4352,6 +4121,145 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
                 args: [(CdkDrag)]
             }] } });
 
+class NgxGanttToolbarComponent {
+    get top() {
+        return this.ganttUpper.styles.headerHeight + 16 + 'px';
+    }
+    constructor() {
+        this.ganttUpper = inject(GANTT_UPPER_TOKEN);
+        this.ganttItemClass = true;
+        this.views = inject(GanttConfigService).getViewsLocale();
+    }
+    selectView(view) {
+        this.ganttUpper.changeView(view);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NgxGanttToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: NgxGanttToolbarComponent, isStandalone: true, selector: "ngx-gantt-toolbar,gantt-toolbar", inputs: { template: "template" }, host: { properties: { "class.gantt-toolbar": "this.ganttItemClass", "style.top": "this.top" } }, ngImport: i0, template: "<div class=\"toolbar-container\">\n  @if (!template) {\n    @if (this.ganttUpper.toolbarOptions?.viewTypes?.length) {\n      <div class=\"toolbar-views\">\n        @for (viewType of this.ganttUpper.toolbarOptions?.viewTypes; track viewType) {\n          @if (views[viewType]) {\n            <div class=\"toolbar-view\" [class.active]=\"viewType === this.ganttUpper.viewType\" (click)=\"selectView(viewType)\">\n              {{ views[viewType].label }}\n            </div>\n          }\n        }\n      </div>\n    }\n  }\n  <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NgxGanttToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-gantt-toolbar,gantt-toolbar', imports: [NgTemplateOutlet], template: "<div class=\"toolbar-container\">\n  @if (!template) {\n    @if (this.ganttUpper.toolbarOptions?.viewTypes?.length) {\n      <div class=\"toolbar-views\">\n        @for (viewType of this.ganttUpper.toolbarOptions?.viewTypes; track viewType) {\n          @if (views[viewType]) {\n            <div class=\"toolbar-view\" [class.active]=\"viewType === this.ganttUpper.viewType\" (click)=\"selectView(viewType)\">\n              {{ views[viewType].label }}\n            </div>\n          }\n        }\n      </div>\n    }\n  }\n  <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { template: [{
+                type: Input
+            }], ganttItemClass: [{
+                type: HostBinding,
+                args: ['class.gantt-toolbar']
+            }], top: [{
+                type: HostBinding,
+                args: ['style.top']
+            }] } });
+
+class GanttScrollbarComponent {
+    constructor() {
+        this.ganttUpper = inject(GANTT_UPPER_TOKEN);
+        this.hasFooter = input(false, ...(ngDevMode ? [{ debugName: "hasFooter" }] : []));
+        this.tableWidth = input(...(ngDevMode ? [undefined, { debugName: "tableWidth" }] : []));
+        this.ganttRoot = input(...(ngDevMode ? [undefined, { debugName: "ganttRoot" }] : []));
+        this.tableScrollWidth = input(0, ...(ngDevMode ? [{ debugName: "tableScrollWidth" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttScrollbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.10", type: GanttScrollbarComponent, isStandalone: true, selector: "gantt-scrollbar", inputs: { hasFooter: { classPropertyName: "hasFooter", publicName: "hasFooter", isSignal: true, isRequired: false, transformFunction: null }, tableWidth: { classPropertyName: "tableWidth", publicName: "tableWidth", isSignal: true, isRequired: false, transformFunction: null }, ganttRoot: { classPropertyName: "ganttRoot", publicName: "ganttRoot", isSignal: true, isRequired: false, transformFunction: null }, tableScrollWidth: { classPropertyName: "tableScrollWidth", publicName: "tableScrollWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"gantt-scrollbar\"\n  [ngClass]=\"{ 'gantt-scrollbar-bg': hasFooter() }\"\n  [style.height.px]=\"ganttRoot()?.horizontalScrollbarHeight + 1\"\n  [style.right.px]=\"ganttRoot()?.verticalScrollbarWidth\"\n>\n  <div\n    class=\"gantt-table-scrollbar\"\n    syncScrollX=\"ganttTableXScroll\"\n    [class.with-scrollbar]=\"ganttRoot()?.horizontalScrollbarHeight\"\n    [style.width.px]=\"tableWidth()\"\n  >\n    <div class=\"h-100\" [style.width.px]=\"tableScrollWidth() - 1\"></div>\n  </div>\n  <div class=\"gantt-main-scrollbar\" syncScrollX=\"ganttMainXScroll\">\n    <div class=\"h-100\" [style.width.px]=\"ganttRoot()['view']?.width\"></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: GanttSyncScrollXDirective, selector: "[syncScrollX]", inputs: ["syncScrollX"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttScrollbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gantt-scrollbar', imports: [NgClass, GanttSyncScrollXDirective], template: "<div\n  class=\"gantt-scrollbar\"\n  [ngClass]=\"{ 'gantt-scrollbar-bg': hasFooter() }\"\n  [style.height.px]=\"ganttRoot()?.horizontalScrollbarHeight + 1\"\n  [style.right.px]=\"ganttRoot()?.verticalScrollbarWidth\"\n>\n  <div\n    class=\"gantt-table-scrollbar\"\n    syncScrollX=\"ganttTableXScroll\"\n    [class.with-scrollbar]=\"ganttRoot()?.horizontalScrollbarHeight\"\n    [style.width.px]=\"tableWidth()\"\n  >\n    <div class=\"h-100\" [style.width.px]=\"tableScrollWidth() - 1\"></div>\n  </div>\n  <div class=\"gantt-main-scrollbar\" syncScrollX=\"ganttMainXScroll\">\n    <div class=\"h-100\" [style.width.px]=\"ganttRoot()['view']?.width\"></div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { hasFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasFooter", required: false }] }], tableWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableWidth", required: false }] }], ganttRoot: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttRoot", required: false }] }], tableScrollWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableScrollWidth", required: false }] }] } });
+
+class GanttPrintService {
+    constructor() { }
+    setInlineStyles(targetElem) {
+        const svgElements = Array.from(targetElem.getElementsByTagName('svg'));
+        for (const svgElement of svgElements) {
+            this.recursElementChildren(svgElement);
+        }
+    }
+    recursElementChildren(node) {
+        const transformProperties = [
+            'fill',
+            'color',
+            'font-size',
+            'stroke',
+            'font',
+            'text-anchor',
+            'stroke-dasharray',
+            'shape-rendering',
+            'stroke-width'
+        ];
+        if (!node.style) {
+            return;
+        }
+        const styles = getComputedStyle(node);
+        for (const transformProperty of transformProperties) {
+            node.style[transformProperty] = styles[transformProperty];
+        }
+        for (const child of Array.from(node.childNodes)) {
+            this.recursElementChildren(child);
+        }
+    }
+    register(root) {
+        this.root = root.nativeElement;
+        this.mainContainer = this.root.getElementsByClassName('gantt-main-container')[0];
+    }
+    async html2canvas(ignoreElementClass) {
+        const root = this.root;
+        const mainContainer = this.mainContainer;
+        // set print width
+        const printWidth = root.offsetWidth;
+        // set print height
+        const printHeight = root.offsetHeight - mainContainer.offsetHeight + mainContainer.scrollHeight;
+        const html2canvas = (await import(/* webpackChunkName: 'html2canvas' */ 'html2canvas')).default;
+        return html2canvas(root, {
+            logging: false,
+            allowTaint: true,
+            useCORS: true,
+            width: printWidth,
+            height: printHeight,
+            ignoreElements: (element) => {
+                if (ignoreElementClass && element.classList.contains(ignoreElementClass)) {
+                    return true;
+                }
+                if (element.classList.contains('gantt-calendar-today-overlay')) {
+                    return true;
+                }
+            },
+            onclone: (cloneDocument) => {
+                const ganttClass = root.className;
+                const cloneGanttDom = cloneDocument.querySelector(`.${ganttClass.replace(/\s+/g, '.')}`);
+                const cloneGanttContainerDom = cloneDocument.querySelector('.gantt-container');
+                const cloneCalendarOverlay = cloneDocument.querySelector('.gantt-calendar-grid-main');
+                const cloneLinksOverlay = cloneDocument.querySelector('.gantt-links-overlay-main');
+                // change targetDom width
+                cloneGanttDom.style.width = `${printWidth}px`;
+                cloneGanttDom.style.height = `${printHeight}px`;
+                cloneGanttDom.style.overflow = `unset`;
+                cloneGanttContainerDom.style.backgroundColor = '#fff';
+                cloneCalendarOverlay.setAttribute('height', `${printHeight}`);
+                cloneCalendarOverlay.setAttribute('style', `background: transparent`);
+                if (cloneLinksOverlay) {
+                    cloneLinksOverlay.setAttribute('height', `${printHeight}`);
+                    cloneLinksOverlay.setAttribute('style', `height: ${printHeight}px`);
+                }
+                // setInlineStyles for svg
+                this.setInlineStyles(cloneGanttDom);
+            }
+        });
+    }
+    async print(name = 'download', ignoreElementClass) {
+        this.html2canvas(ignoreElementClass).then((canvas) => {
+            const link = document.createElement('a');
+            const dataUrl = canvas.toDataURL('image/png');
+            link.download = `${name}.png`;
+            link.href = dataUrl;
+            link.click();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttPrintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttPrintService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GanttPrintService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
 class NgxGanttRootComponent {
     get view() {
         return this.ganttUpper.view;
@@ -4359,16 +4267,17 @@ class NgxGanttRootComponent {
     onWindowResize() {
         this.computeScrollBarOffset();
     }
-    constructor(elementRef, ngZone, dom, dragContainer, ganttUpper, printService) {
-        this.elementRef = elementRef;
-        this.ngZone = ngZone;
-        this.dom = dom;
-        this.dragContainer = dragContainer;
-        this.ganttUpper = ganttUpper;
-        this.printService = printService;
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.ngZone = inject(NgZone);
+        this.dom = inject(GanttDomService);
+        this.dragContainer = inject(GanttDragContainer);
+        this.ganttUpper = inject(GANTT_UPPER_TOKEN);
+        this.printService = inject(GanttPrintService, { optional: true });
         this.verticalScrollbarWidth = 0;
         this.horizontalScrollbarHeight = 0;
         this.unsubscribe$ = new Subject();
+        const dragContainer = this.dragContainer;
         this.ganttUpper.dragContainer = dragContainer;
     }
     ngOnInit() {
@@ -4470,10 +4379,10 @@ class NgxGanttRootComponent {
         }
         this.dom.scrollMainContainer(x);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttRootComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: GanttDomService }, { token: GanttDragContainer }, { token: GANTT_UPPER_TOKEN }, { token: GanttPrintService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: NgxGanttRootComponent, isStandalone: true, selector: "ngx-gantt-root", inputs: { sideWidth: "sideWidth" }, host: { listeners: { "window:resize": "onWindowResize()" }, classAttribute: "gantt" }, providers: [GanttDomService, GanttDragContainer, GanttSyncScrollService], queries: [{ propertyName: "sideTemplate", first: true, predicate: ["sideTemplate"], descendants: true, static: true }, { propertyName: "mainTemplate", first: true, predicate: ["mainTemplate"], descendants: true, static: true }], viewQueries: [{ propertyName: "backdrop", first: true, predicate: GanttDragBackdropComponent, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "@if (sideTemplate) {\n  <div class=\"gantt-side\" [style.width.px]=\"sideWidth\" [style.padding-bottom.px]=\"horizontalScrollbarHeight\">\n    <div class=\"gantt-side-container\" syncScrollX=\"ganttTableXScroll\" syncScrollY=\"ganttMainYScroll\" cdkScrollable>\n      <ng-template [ngTemplateOutlet]=\"sideTemplate\"></ng-template>\n    </div>\n  </div>\n}\n@if (mainTemplate) {\n  <div class=\"gantt-container\">\n    <gantt-calendar-header syncScrollX=\"ganttMainXScroll\" [style.padding-right.px]=\"verticalScrollbarWidth\"></gantt-calendar-header>\n    <gantt-calendar-grid\n      syncScrollX=\"ganttMainXScroll\"\n      [style.padding-right.px]=\"verticalScrollbarWidth\"\n      [style.padding-bottom.px]=\"horizontalScrollbarHeight\"\n    ></gantt-calendar-grid>\n    <gantt-drag-backdrop></gantt-drag-backdrop>\n    <div class=\"gantt-main\">\n      <div class=\"gantt-main-container\" syncScrollX=\"ganttMainXScroll\" syncScrollY=\"ganttMainYScroll\">\n        <ng-template [ngTemplateOutlet]=\"mainTemplate\"></ng-template>\n      </div>\n    </div>\n  </div>\n}\n<ng-content></ng-content>\n@if (ganttUpper.showToolbar || ganttUpper.toolbarTemplate) {\n  <gantt-toolbar [template]=\"ganttUpper.toolbarTemplate\"> </gantt-toolbar>\n}\n", dependencies: [{ kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GanttCalendarHeaderComponent, selector: "gantt-calendar-header" }, { kind: "component", type: GanttCalendarGridComponent, selector: "gantt-calendar-grid" }, { kind: "component", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }, { kind: "component", type: NgxGanttToolbarComponent, selector: "ngx-gantt-toolbar,gantt-toolbar", inputs: ["template"] }, { kind: "directive", type: GanttSyncScrollXDirective, selector: "[syncScrollX]", inputs: ["syncScrollX"] }, { kind: "directive", type: GanttSyncScrollYDirective, selector: "[syncScrollY]", inputs: ["syncScrollY"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NgxGanttRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: NgxGanttRootComponent, isStandalone: true, selector: "ngx-gantt-root", inputs: { sideWidth: "sideWidth" }, host: { listeners: { "window:resize": "onWindowResize()" }, classAttribute: "gantt" }, providers: [GanttDomService, GanttDragContainer, GanttSyncScrollService], queries: [{ propertyName: "sideTemplate", first: true, predicate: ["sideTemplate"], descendants: true, static: true }, { propertyName: "mainTemplate", first: true, predicate: ["mainTemplate"], descendants: true, static: true }], viewQueries: [{ propertyName: "backdrop", first: true, predicate: GanttDragBackdropComponent, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "@if (sideTemplate) {\n  <div class=\"gantt-side\" [style.width.px]=\"sideWidth\" [style.padding-bottom.px]=\"horizontalScrollbarHeight\">\n    <div class=\"gantt-side-container\" syncScrollX=\"ganttTableXScroll\" syncScrollY=\"ganttMainYScroll\" cdkScrollable>\n      <ng-template [ngTemplateOutlet]=\"sideTemplate\"></ng-template>\n    </div>\n  </div>\n}\n@if (mainTemplate) {\n  <div class=\"gantt-container\">\n    <gantt-calendar-header syncScrollX=\"ganttMainXScroll\" [style.padding-right.px]=\"verticalScrollbarWidth\"></gantt-calendar-header>\n    <gantt-calendar-grid\n      syncScrollX=\"ganttMainXScroll\"\n      [style.padding-right.px]=\"verticalScrollbarWidth\"\n      [style.padding-bottom.px]=\"horizontalScrollbarHeight\"\n    ></gantt-calendar-grid>\n    <gantt-drag-backdrop></gantt-drag-backdrop>\n    <div class=\"gantt-main\">\n      <div class=\"gantt-main-container\" syncScrollX=\"ganttMainXScroll\" syncScrollY=\"ganttMainYScroll\">\n        <ng-template [ngTemplateOutlet]=\"mainTemplate\"></ng-template>\n      </div>\n    </div>\n  </div>\n}\n<ng-content></ng-content>\n@if (ganttUpper.showToolbar || ganttUpper.toolbarTemplate) {\n  <gantt-toolbar [template]=\"ganttUpper.toolbarTemplate\"> </gantt-toolbar>\n}\n", dependencies: [{ kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GanttCalendarHeaderComponent, selector: "gantt-calendar-header" }, { kind: "component", type: GanttCalendarGridComponent, selector: "gantt-calendar-grid" }, { kind: "component", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }, { kind: "component", type: NgxGanttToolbarComponent, selector: "ngx-gantt-toolbar,gantt-toolbar", inputs: ["template"] }, { kind: "directive", type: GanttSyncScrollXDirective, selector: "[syncScrollX]", inputs: ["syncScrollX"] }, { kind: "directive", type: GanttSyncScrollYDirective, selector: "[syncScrollY]", inputs: ["syncScrollY"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttRootComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NgxGanttRootComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-gantt-root', providers: [GanttDomService, GanttDragContainer, GanttSyncScrollService], host: {
                         class: 'gantt'
@@ -4487,12 +4396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
                         GanttSyncScrollXDirective,
                         GanttSyncScrollYDirective
                     ], template: "@if (sideTemplate) {\n  <div class=\"gantt-side\" [style.width.px]=\"sideWidth\" [style.padding-bottom.px]=\"horizontalScrollbarHeight\">\n    <div class=\"gantt-side-container\" syncScrollX=\"ganttTableXScroll\" syncScrollY=\"ganttMainYScroll\" cdkScrollable>\n      <ng-template [ngTemplateOutlet]=\"sideTemplate\"></ng-template>\n    </div>\n  </div>\n}\n@if (mainTemplate) {\n  <div class=\"gantt-container\">\n    <gantt-calendar-header syncScrollX=\"ganttMainXScroll\" [style.padding-right.px]=\"verticalScrollbarWidth\"></gantt-calendar-header>\n    <gantt-calendar-grid\n      syncScrollX=\"ganttMainXScroll\"\n      [style.padding-right.px]=\"verticalScrollbarWidth\"\n      [style.padding-bottom.px]=\"horizontalScrollbarHeight\"\n    ></gantt-calendar-grid>\n    <gantt-drag-backdrop></gantt-drag-backdrop>\n    <div class=\"gantt-main\">\n      <div class=\"gantt-main-container\" syncScrollX=\"ganttMainXScroll\" syncScrollY=\"ganttMainYScroll\">\n        <ng-template [ngTemplateOutlet]=\"mainTemplate\"></ng-template>\n      </div>\n    </div>\n  </div>\n}\n<ng-content></ng-content>\n@if (ganttUpper.showToolbar || ganttUpper.toolbarTemplate) {\n  <gantt-toolbar [template]=\"ganttUpper.toolbarTemplate\"> </gantt-toolbar>\n}\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: GanttDomService }, { type: GanttDragContainer }, { type: GanttUpper, decorators: [{
-                    type: Inject,
-                    args: [GANTT_UPPER_TOKEN]
-                }] }, { type: GanttPrintService, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { sideWidth: [{
+        }], ctorParameters: () => [], propDecorators: { sideWidth: [{
                 type: Input
             }], sideTemplate: [{
                 type: ContentChild,
@@ -4512,17 +4416,17 @@ class NgxGanttTableColumnComponent {
     set width(width) {
         this.columnWidth = coerceCssPixelValue(width);
     }
-    constructor(ganttUpper, elementRef) {
-        this.ganttUpper = ganttUpper;
-        this.elementRef = elementRef;
+    constructor() {
+        this.ganttUpper = inject(GANTT_UPPER_TOKEN);
+        this.elementRef = inject(ElementRef);
     }
     get classList() {
         return this.elementRef.nativeElement.classList;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttTableColumnComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: NgxGanttTableColumnComponent, isStandalone: true, selector: "ngx-gantt-column", inputs: { width: "width", name: "name", showExpandIcon: "showExpandIcon" }, host: { classAttribute: "gantt-table-column" }, queries: [{ propertyName: "templateRef", first: true, predicate: ["cell"], descendants: true, static: true }, { propertyName: "headerTemplateRef", first: true, predicate: ["header"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NgxGanttTableColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: NgxGanttTableColumnComponent, isStandalone: true, selector: "ngx-gantt-column", inputs: { width: "width", name: "name", showExpandIcon: "showExpandIcon" }, host: { classAttribute: "gantt-table-column" }, queries: [{ propertyName: "templateRef", first: true, predicate: ["cell"], descendants: true, static: true }, { propertyName: "headerTemplateRef", first: true, predicate: ["header"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttTableColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NgxGanttTableColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngx-gantt-column',
@@ -4532,10 +4436,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
                     },
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: GanttUpper, decorators: [{
-                    type: Inject,
-                    args: [GANTT_UPPER_TOKEN]
-                }] }, { type: i0.ElementRef }], propDecorators: { width: [{
+        }], ctorParameters: () => [], propDecorators: { width: [{
                 type: Input
             }], name: [{
                 type: Input
@@ -4559,10 +4460,10 @@ class NgxGanttTableComponent {
         this.resizeChange = new EventEmitter();
         this.itemClick = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: NgxGanttTableComponent, isStandalone: true, selector: "ngx-gantt-table", inputs: { draggable: "draggable", maxWidth: "maxWidth", width: "width", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", dragStarted: "dragStarted", dragEnded: "dragEnded", columnChanges: "columnChanges", resizeChange: "resizeChange", 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 }, { propertyName: "settingsSlot", first: true, predicate: ["settingsSlot"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NgxGanttTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: NgxGanttTableComponent, isStandalone: true, selector: "ngx-gantt-table", inputs: { draggable: "draggable", maxWidth: "maxWidth", width: "width", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", dragStarted: "dragStarted", dragEnded: "dragEnded", columnChanges: "columnChanges", resizeChange: "resizeChange", 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 }, { propertyName: "settingsSlot", first: true, predicate: ["settingsSlot"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NgxGanttTableComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngx-gantt-table',
@@ -4627,9 +4528,9 @@ class NgxGanttComponent extends GanttUpper {
     get loading() {
         return this._loading;
     }
-    constructor(elementRef, cdr, ngZone, viewportRuler, config) {
-        super(elementRef, cdr, ngZone, config);
-        this.viewportRuler = viewportRuler;
+    constructor() {
+        super();
+        this.viewportRuler = inject(ViewportRuler);
         this.maxLevel = 2;
         this.virtualScrollEnabled = true;
         this.loadingDelay = 0;
@@ -4638,7 +4539,7 @@ class NgxGanttComponent extends GanttUpper {
         this.lineClick = new EventEmitter();
         this.selectedChange = new EventEmitter();
         this.virtualScrolledIndexChange = new EventEmitter();
-        this.tableScrollWidth = signal(0);
+        this.tableScrollWidth = signal(0, ...(ngDevMode ? [{ debugName: "tableScrollWidth" }] : []));
         this.flatItems = [];
         this.viewportItems = [];
         this._loading = false;
@@ -4867,8 +4768,8 @@ class NgxGanttComponent extends GanttUpper {
             this.resizeObserver.disconnect();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$1.ViewportRuler }, { token: GANTT_GLOBAL_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: NgxGanttComponent, isStandalone: true, selector: "ngx-gantt", inputs: { maxLevel: "maxLevel", async: "async", childrenResolve: "childrenResolve", linkable: "linkable", loading: "loading", virtualScrollEnabled: "virtualScrollEnabled", loadingDelay: "loadingDelay" }, outputs: { linkDragStarted: "linkDragStarted", linkDragEnded: "linkDragEnded", lineClick: "lineClick", selectedChange: "selectedChange", virtualScrolledIndexChange: "virtualScrolledIndexChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NgxGanttComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: NgxGanttComponent, isStandalone: true, selector: "ngx-gantt", inputs: { maxLevel: "maxLevel", async: "async", childrenResolve: "childrenResolve", linkable: "linkable", loading: "loading", virtualScrollEnabled: "virtualScrollEnabled", loadingDelay: "loadingDelay" }, outputs: { linkDragStarted: "linkDragStarted", linkDragEnded: "linkDragEnded", lineClick: "lineClick", selectedChange: "selectedChange", virtualScrolledIndexChange: "virtualScrolledIndexChange" }, providers: [
             {
                 provide: GANTT_UPPER_TOKEN,
                 useExisting: NgxGanttComponent
@@ -4879,7 +4780,7 @@ class NgxGanttComponent extends GanttUpper {
             }
         ], 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 }, { propertyName: "ganttTableBody", first: true, predicate: ["ganttTableBody"], descendants: true, static: true }], usesInheritance: 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\n        syncScrollX=\"ganttMainXScroll\"\n        [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"\n      ></gantt-calendar-header>\n    </div>\n  </div>\n  @if (loading) {\n    <gantt-loader></gantt-loader>\n  }\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\" syncScrollX=\"ganttTableXScroll\" syncScrollY=\"ganttMainYScroll\">\n        <div class=\"gantt-table\">\n          <gantt-table-body\n            #ganttTableBody\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        syncScrollX=\"ganttMainXScroll\"\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          syncScrollX=\"ganttMainXScroll\"\n          syncScrollY=\"ganttMainYScroll\"\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    [tableScrollWidth]=\"tableScrollWidth()\"\n  ></gantt-scrollbar>\n\n  @if (table?.tableFooterTemplate || footerTemplate) {\n    <div\n      class=\"gantt-footer\"\n      cdkScrollable\n      [style.right.px]=\"ganttRoot.verticalScrollbarWidth\"\n      [style.bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n    >\n      @if (table?.tableFooterTemplate) {\n        <div class=\"gantt-table-footer\" syncScrollX=\"ganttTableXScroll\" [style.width.px]=\"tableHeader.tableWidth + 1\">\n          <ng-template [ngTemplateOutlet]=\"table?.tableFooterTemplate\" [ngTemplateOutletContext]=\"{ columns: columns }\"> </ng-template>\n        </div>\n      }\n      @if (footerTemplate) {\n        <div class=\"gantt-container-footer\" syncScrollX=\"ganttMainXScroll\">\n          <ng-template [ngTemplateOutlet]=\"footerTemplate\"> </ng-template>\n        </div>\n      }\n    </div>\n  }\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: "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", "tableScrollWidth"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: GanttSyncScrollXDirective, selector: "[syncScrollX]", inputs: ["syncScrollX"] }, { kind: "directive", type: GanttSyncScrollYDirective, selector: "[syncScrollY]", inputs: ["syncScrollY"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NgxGanttComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-gantt', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -4908,10 +4809,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
                         GanttSyncScrollXDirective,
                         GanttSyncScrollYDirective
                     ], 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\n        syncScrollX=\"ganttMainXScroll\"\n        [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"\n      ></gantt-calendar-header>\n    </div>\n  </div>\n  @if (loading) {\n    <gantt-loader></gantt-loader>\n  }\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\" syncScrollX=\"ganttTableXScroll\" syncScrollY=\"ganttMainYScroll\">\n        <div class=\"gantt-table\">\n          <gantt-table-body\n            #ganttTableBody\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        syncScrollX=\"ganttMainXScroll\"\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          syncScrollX=\"ganttMainXScroll\"\n          syncScrollY=\"ganttMainYScroll\"\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    [tableScrollWidth]=\"tableScrollWidth()\"\n  ></gantt-scrollbar>\n\n  @if (table?.tableFooterTemplate || footerTemplate) {\n    <div\n      class=\"gantt-footer\"\n      cdkScrollable\n      [style.right.px]=\"ganttRoot.verticalScrollbarWidth\"\n      [style.bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n    >\n      @if (table?.tableFooterTemplate) {\n        <div class=\"gantt-table-footer\" syncScrollX=\"ganttTableXScroll\" [style.width.px]=\"tableHeader.tableWidth + 1\">\n          <ng-template [ngTemplateOutlet]=\"table?.tableFooterTemplate\" [ngTemplateOutletContext]=\"{ columns: columns }\"> </ng-template>\n        </div>\n      }\n      @if (footerTemplate) {\n        <div class=\"gantt-container-footer\" syncScrollX=\"ganttMainXScroll\">\n          <ng-template [ngTemplateOutlet]=\"footerTemplate\"> </ng-template>\n        </div>\n      }\n    </div>\n  }\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]
-                }] }], propDecorators: { maxLevel: [{
+        }], ctorParameters: () => [], propDecorators: { maxLevel: [{
                 type: Input
             }], async: [{
                 type: Input
@@ -4960,8 +4858,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
 
 class NgxGanttModule {
     constructor() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NgxGanttModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: NgxGanttModule, imports: [CommonModule,
             DragDropModule,
             ScrollingModule,
             NgxGanttComponent,
@@ -4997,7 +4895,7 @@ class NgxGanttModule {
             GanttCalendarGridComponent,
             GanttDragBackdropComponent,
             GanttScrollbarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NgxGanttModule, providers: [
             CdkVirtualScrollViewport,
             {
                 provide: GANTT_GLOBAL_CONFIG,
@@ -5009,7 +4907,7 @@ class NgxGanttModule {
             ScrollingModule,
             NgxGanttComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NgxGanttModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -5072,5 +4970,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { GANTT_GLOBAL_CONFIG, GANTT_I18N_LOCALE_TOKEN, GANTT_UPPER_TOKEN, GanttBarClickEvent, GanttBaselineItemInternal, GanttCalendarGridComponent, GanttCalendarHeaderComponent, GanttConfigService, GanttDate, GanttDatePoint, GanttDragBackdropComponent, GanttDragEvent, GanttGroupInternal, GanttI18nLocale, GanttItemInternal, GanttItemType, GanttItemUpper, GanttLineClickEvent, GanttLinkDragEvent, GanttLinkLineType, GanttLinkType, GanttLoadOnScrollEvent, GanttLoaderComponent, GanttPrintService, GanttScrollbarComponent, GanttSelectedEvent, GanttSyncScrollService, GanttSyncScrollXDirective, GanttSyncScrollYDirective, GanttTableDragDroppedEvent, GanttTableDragEndedEvent, GanttTableDragEnterPredicateContext, GanttTableDragStartedEvent, GanttTableEvent, GanttTableItemClickEvent, GanttUpper, GanttView, GanttViewType, GanttVirtualScrolledIndexChangeEvent, IsGanttBarItemPipe, IsGanttCustomItemPipe, IsGanttGroupPipe, IsGanttRangeItemPipe, LinkColors, NgxGanttBarComponent, NgxGanttBaselineComponent, NgxGanttComponent, NgxGanttModule, NgxGanttRangeComponent, NgxGanttRootComponent, NgxGanttTableColumnComponent, NgxGanttTableComponent, NgxGanttToolbarComponent, deDeLocale, defaultConfig, enUsLocale, getDefaultTimeZone, jaJpLocale, primaryDatePointTop, registerView, ruRuLocale, secondaryDatePointTop, setDefaultTimeZone, zhHansLocale, zhHantLocale };
+export { GANTT_GLOBAL_CONFIG, GANTT_I18N_LOCALE_TOKEN, GANTT_UPPER_TOKEN, GanttBarClickEvent, GanttBaselineItemInternal, GanttCalendarGridComponent, GanttCalendarHeaderComponent, GanttConfigService, GanttDate, GanttDatePoint, GanttDragBackdropComponent, GanttDragEvent, GanttGroupInternal, GanttI18nLocale, GanttItemInternal, GanttItemType, GanttItemUpper, GanttLineClickEvent, GanttLinkDragEvent, GanttLinkLineType, GanttLinkType, GanttLoadOnScrollEvent, GanttLoaderComponent, GanttPrintService, GanttScrollbarComponent, GanttSelectedEvent, GanttTableDragDroppedEvent, GanttTableDragEndedEvent, GanttTableDragEnterPredicateContext, GanttTableDragStartedEvent, GanttTableEvent, GanttTableItemClickEvent, GanttUpper, GanttView, GanttViewType, GanttVirtualScrolledIndexChangeEvent, IsGanttBarItemPipe, IsGanttCustomItemPipe, IsGanttGroupPipe, IsGanttRangeItemPipe, LinkColors, NgxGanttBarComponent, NgxGanttBaselineComponent, NgxGanttComponent, NgxGanttModule, NgxGanttRangeComponent, NgxGanttRootComponent, NgxGanttTableColumnComponent, NgxGanttTableComponent, NgxGanttToolbarComponent, deDeLocale, defaultConfig, enUsLocale, getDefaultTimeZone, jaJpLocale, primaryDatePointTop, registerView, ruRuLocale, secondaryDatePointTop, setDefaultTimeZone, zhHans as zhHansLocale, zhHant as zhHantLocale };
 //# sourceMappingURL=worktile-gantt.mjs.map