@worktile/gantt 18.0.4 → 18.1.0-next.0

package/fesm2022/worktile-gantt.mjs

@@ -4,14 +4,17 @@ import * as i1$1 from '@angular/cdk/scrolling';
 import { CdkScrollable, CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf, ScrollingModule } from '@angular/cdk/scrolling';
 import { isPlatformServer, NgIf, NgTemplateOutlet, NgFor, NgStyle, NgClass, DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, Directive, Inject, Input, Output, ContentChild, HostBinding, Injectable, PLATFORM_ID, signal, effect, Component, ViewChild, ViewChildren, Pipe, ElementRef, Optional, HostListener, forwardRef, ChangeDetectionStrategy, ContentChildren, NgModule } from '@angular/core';
+import { InjectionToken, inject, Injectable, Inject, EventEmitter, Directive, Input, Output, ContentChild, HostBinding, signal, PLATFORM_ID, effect, Component, ViewChild, ViewChildren, Pipe, ElementRef, Optional, HostListener, forwardRef, ChangeDetectionStrategy, ContentChildren, NgModule } from '@angular/core';
 import { fromUnixTime, getWeek, getDaysInMonth, differenceInCalendarDays, setDate, addSeconds, addMinutes, addHours, addDays, addWeeks, addMonths, addQuarters, addYears, startOfMinute, startOfHour, startOfDay, startOfWeek, startOfMonth, startOfQuarter, startOfYear, endOfMinute, endOfHour, endOfDay, endOfWeek, endOfMonth, endOfQuarter, endOfYear, getUnixTime, format, isWeekend, isToday, differenceInHours, differenceInMinutes, differenceInDays, differenceInCalendarQuarters, eachMonthOfInterval, eachYearOfInterval, eachWeekOfInterval, eachDayOfInterval, differenceInCalendarYears, eachHourOfInterval, setDefaultOptions } from 'date-fns';
 export { addDays, addHours, addMinutes, addMonths, addQuarters, addSeconds, addWeeks, addYears, differenceInCalendarDays, differenceInCalendarQuarters, differenceInDays, differenceInMinutes, eachDayOfInterval, eachHourOfInterval, eachMonthOfInterval, eachWeekOfInterval, endOfDay, endOfHour, endOfMinute, endOfMonth, endOfQuarter, endOfWeek, endOfYear, format, fromUnixTime, getDaysInMonth, getUnixTime, getWeek, isToday, isWeekend, setDate, startOfDay, startOfHour, startOfMinute, startOfMonth, startOfQuarter, startOfWeek, startOfYear } from 'date-fns';
-import { BehaviorSubject, Subject, from, fromEvent, merge, Observable, EMPTY, interval, animationFrameScheduler, takeUntil as takeUntil$1, startWith as startWith$1, auditTime as auditTime$1, filter } from 'rxjs';
+import { BehaviorSubject, Subject, from, fromEvent, merge, Observable, EMPTY, interval, animationFrameScheduler, take as take$1, takeUntil as takeUntil$1, combineLatest, startWith as startWith$1, auditTime as auditTime$1, filter } from 'rxjs';
 import { take, takeUntil, skip, map, pairwise, auditTime, startWith, switchMap, debounceTime, finalize } from 'rxjs/operators';
+import { TZDate } from '@date-fns/tz';
+import { de, ru } from 'date-fns/locale';
 import { SelectionModel } from '@angular/cdk/collections';
 import { coerceBooleanProperty, coerceCssPixelValue } from '@angular/cdk/coercion';
 import { __decorate, __param } from 'tslib';
+import { setDefaultTimeZone as setDefaultTimeZone$1 } from 'ngx-gantt';
 
 class GanttDatePoint {
     constructor(start, text, x, y, additions, style) {
@@ -36,7 +39,9 @@ class GanttLineClickEvent {
 }
 class GanttBarClickEvent {
 }
-class GanttSelectedEvent {
+class GanttTableItemClickEvent {
+}
+class GanttSelectedEvent extends GanttTableItemClickEvent {
 }
 class GanttTableDragDroppedEvent {
 }
@@ -49,6 +54,10 @@ class GanttTableDragEnterPredicateContext {
 class GanttVirtualScrolledIndexChangeEvent {
 }
 
+let timeZone;
+function setDefaultTimeZone(zone) {
+    timeZone = zone ?? undefined;
+}
 class GanttDate {
     constructor(date) {
         if (date) {
@@ -57,10 +66,10 @@ class GanttDate {
             }
             else if (typeof date === 'string' || typeof date === 'number') {
                 if (date.toString().length < 13) {
-                    this.value = fromUnixTime(+date);
+                    this.value = new TZDate(fromUnixTime(+date), timeZone);
                 }
                 else {
-                    this.value = new Date(date);
+                    this.value = new TZDate(date, timeZone);
                 }
             }
             else {
@@ -69,7 +78,7 @@ class GanttDate {
             }
         }
         else {
-            this.value = new Date();
+            this.value = new TZDate(new Date(), timeZone);
         }
     }
     getYear() {
@@ -346,28 +355,6 @@ var GanttViewType;
     GanttViewType["week"] = "week";
     GanttViewType["hour"] = "hour";
 })(GanttViewType || (GanttViewType = {}));
-const ganttViews = [
-    {
-        name: '日',
-        value: GanttViewType.day
-    },
-    {
-        name: '周',
-        value: GanttViewType.week
-    },
-    {
-        name: '月',
-        value: GanttViewType.month
-    },
-    {
-        name: '季',
-        value: GanttViewType.quarter
-    },
-    {
-        name: '年',
-        value: GanttViewType.year
-    }
-];
 
 class GanttBaselineItemInternal {
     get refs() {
@@ -385,36 +372,11 @@ class GanttBaselineItemInternal {
     }
 }
 
-const defaultConfig = {
-    dateFormat: {
-        hour: 'HH:mm',
-        day: 'M月d日',
-        week: '第w周',
-        month: 'M月',
-        quarter: 'QQQ',
-        year: 'yyyy年',
-        yearMonth: 'yyyy年MM月',
-        yearQuarter: 'yyyy年QQQ'
-    },
-    linkOptions: {
-        dependencyTypes: [GanttLinkType.fs],
-        showArrow: false,
-        lineType: GanttLinkLineType.curve
-    },
-    styleOptions: {
-        headerHeight: 44,
-        lineHeight: 44,
-        barHeight: 22
-    }
-};
-const GANTT_GLOBAL_CONFIG = new InjectionToken('GANTT_GLOBAL_CONFIG');
-
 const primaryDatePointTop = '40%';
 const secondaryDatePointTop = '80%';
 const viewOptions$6 = {
     min: new GanttDate().addYears(-1).startOfYear(),
     max: new GanttDate().addYears(1).endOfYear(),
-    dateFormat: defaultConfig.dateFormat,
     datePrecisionUnit: 'day',
     dragPreviewDateFormat: 'MM-dd'
 };
@@ -427,6 +389,7 @@ class GanttView {
     }
     constructor(start, end, options) {
         this.showTimeline = true;
+        this.dateFormats = {};
         this.options = Object.assign({}, viewOptions$6, options);
         const startDate = start.isCustom
             ? this.viewStartOf(start.date)
@@ -583,12 +546,317 @@ class GanttView {
     }
 }
 
+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'
+            }
+        },
+        [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 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年'
+            }
+        }
+    }
+};
+
+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'
+            }
+        }
+    }
+};
+
+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年'
+            }
+        }
+    }
+};
+
+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'
+            }
+        }
+    }
+};
+
+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'
+            }
+        }
+    }
+};
+
+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'
+    addUnit: 'quarter',
+    dateDisplayFormats: zhHant.views.month.dateFormats
 };
 class GanttViewMonth extends GanttView {
     constructor(start, end, options) {
@@ -612,7 +880,7 @@ class GanttViewMonth extends GanttView {
         const points = [];
         for (let i = 0; i < quarters; i++) {
             const start = this.start.addQuarters(i);
-            const point = new GanttDatePoint(start, start.format(this.options.dateFormat.yearQuarter), (this.getCellWidth() * 3) / 2 + i * (this.getCellWidth() * 3), primaryDatePointTop);
+            const point = new GanttDatePoint(start, start.format(this.options.dateFormat?.yearQuarter || this.options.dateDisplayFormats.primary), (this.getCellWidth() * 3) / 2 + i * (this.getCellWidth() * 3), primaryDatePointTop);
             points.push(point);
         }
         return points;
@@ -622,7 +890,7 @@ class GanttViewMonth extends GanttView {
         const points = [];
         for (let i = 0; i < months.length; i++) {
             const start = new GanttDate(months[i]);
-            const point = new GanttDatePoint(start, start.format(this.options.dateFormat.month), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
+            const point = new GanttDatePoint(start, start.format(this.options.dateFormat?.month || this.options.dateDisplayFormats.secondary), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
             points.push(point);
         }
         return points;
@@ -636,7 +904,8 @@ const viewOptions$4 = {
     max: new GanttDate().addYears(2).endOfYear(),
     cellWidth: 500,
     addAmount: 1,
-    addUnit: 'year'
+    addUnit: 'year',
+    dateDisplayFormats: zhHant.views.quarter.dateFormats
 };
 class GanttViewQuarter extends GanttView {
     constructor(start, end, options) {
@@ -660,7 +929,7 @@ class GanttViewQuarter extends GanttView {
         const points = [];
         for (let i = 0; i < years.length; i++) {
             const start = new GanttDate(years[i]);
-            const point = new GanttDatePoint(start, `${start.format(this.options.dateFormat.year)}`, (this.getCellWidth() * 4) / 2 + i * (this.getCellWidth() * 4), primaryDatePointTop);
+            const point = new GanttDatePoint(start, `${start.format(this.options.dateFormat?.year || this.options.dateDisplayFormats.primary)}`, (this.getCellWidth() * 4) / 2 + i * (this.getCellWidth() * 4), primaryDatePointTop);
             points.push(point);
         }
         return points;
@@ -670,7 +939,7 @@ class GanttViewQuarter extends GanttView {
         const points = [];
         for (let i = 0; i <= quarters; i++) {
             const start = this.start.addQuarters(i);
-            const point = new GanttDatePoint(start, start.format(this.options.dateFormat.quarter), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
+            const point = new GanttDatePoint(start, start.format(this.options.dateFormat?.quarter || this.options.dateDisplayFormats.secondary), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
             points.push(point);
         }
         return points;
@@ -682,7 +951,8 @@ const viewOptions$3 = {
     start: new GanttDate().startOfYear().startOfWeek(),
     end: new GanttDate().endOfYear().endOfWeek(),
     addAmount: 1,
-    addUnit: 'month'
+    addUnit: 'month',
+    dateDisplayFormats: zhHant.views.day.dateFormats
 };
 class GanttViewDay extends GanttView {
     constructor(start, end, options) {
@@ -709,7 +979,7 @@ class GanttViewDay extends GanttView {
         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.getCellWidth() * 7) / 2 + i * (this.getCellWidth() * 7), primaryDatePointTop);
+            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;
@@ -719,7 +989,7 @@ class GanttViewDay extends GanttView {
         const points = [];
         for (let i = 0; i < days.length; i++) {
             const start = new GanttDate(days[i]);
-            const point = new GanttDatePoint(start, start.getDate().toString(), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop, {
+            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()
             });
@@ -734,7 +1004,8 @@ const viewOptions$2 = {
     start: new GanttDate().startOfYear().startOfWeek(),
     end: new GanttDate().endOfYear().endOfWeek(),
     addAmount: 1,
-    addUnit: 'month'
+    addUnit: 'month',
+    dateDisplayFormats: zhHant.views.week.dateFormats
 };
 class GanttViewWeek extends GanttView {
     constructor(start, end, options) {
@@ -759,7 +1030,7 @@ class GanttViewWeek extends GanttView {
         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.year), this.getCellWidth() / 2 + i * this.getCellWidth(), primaryDatePointTop);
+            const point = new GanttDatePoint(weekStart, weekStart.addWeeks(increaseWeek).format(this.options.dateFormat?.year || this.options.dateDisplayFormats.primary), this.getCellWidth() / 2 + i * this.getCellWidth(), primaryDatePointTop);
             points.push(point);
         }
         return points;
@@ -769,7 +1040,7 @@ class GanttViewWeek extends GanttView {
         const points = [];
         for (let i = 0; i < weeks.length; i++) {
             const start = new GanttDate(weeks[i]);
-            const point = new GanttDatePoint(start, `${start.format(this.options.dateFormat.week)}`, i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
+            const point = new GanttDatePoint(start, `${start.format(this.options.dateFormat?.week || this.options.dateDisplayFormats.secondary)}`, i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
             points.push(point);
         }
         return points;
@@ -781,7 +1052,8 @@ const viewOptions$1 = {
     start: new GanttDate().addYears(-2).startOfYear(),
     end: new GanttDate().addYears(2).endOfYear(),
     addAmount: 1,
-    addUnit: 'year'
+    addUnit: 'year',
+    dateDisplayFormats: zhHant.views.year.dateFormats
 };
 class GanttViewYear extends GanttView {
     constructor(start, end, options) {
@@ -816,7 +1088,7 @@ class GanttViewYear extends GanttView {
         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)}`, i * this.getCellWidth() + this.getCellWidth() / 2, pointTop);
+            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;
@@ -830,6 +1102,7 @@ const viewOptions = {
     datePrecisionUnit: 'minute',
     addAmount: 1,
     addUnit: 'week',
+    dateDisplayFormats: zhHant.views.hour.dateFormats,
     dragPreviewDateFormat: 'HH:mm'
 };
 class GanttViewHour extends GanttView {
@@ -859,7 +1132,7 @@ class GanttViewHour extends GanttView {
         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.getCellWidth() * 24) / 2 + i * (this.getCellWidth() * 24), primaryDatePointTop);
+            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;
@@ -869,7 +1142,7 @@ class GanttViewHour extends GanttView {
         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), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop, {
+            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()
             });
@@ -994,12 +1267,67 @@ function keyBy(array, key) {
     return result;
 }
 
+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']: zhHans,
+            ['zh-tw']: zhHant
+        });
+    }
+    getLocaleConfig() {
+        return this.i18nLocales[this.config.locale] ?? this.i18nLocales[this.config.locale.toLowerCase()] ?? zhHans;
+    }
+    getViewsLocale() {
+        return this.getLocaleConfig().views;
+    }
+    getDateLocal() {
+        return this.config.dateOptions?.locale ?? this.getLocaleConfig().dateLocale;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttConfigService, deps: [{ token: GANTT_GLOBAL_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttConfigService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttConfigService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [GANTT_GLOBAL_CONFIG]
+                }] }] });
+
 class GanttUpper {
     set linkOptions(options) {
         this._linkOptions = options;
     }
     get linkOptions() {
-        return Object.assign({}, defaultConfig.linkOptions, this.config.linkOptions, this._linkOptions);
+        return Object.assign({}, this.configService.config.linkOptions, this._linkOptions);
     }
     set selectable(value) {
         this._selectable = coerceBooleanProperty(value);
@@ -1026,7 +1354,8 @@ class GanttUpper {
     get element() {
         return this.elementRef.nativeElement;
     }
-    constructor(elementRef, cdr, ngZone, config) {
+    constructor(elementRef, cdr, ngZone, // @Inject(GANTT_GLOBAL_CONFIG) public config: GanttGlobalConfig
+    config) {
         this.elementRef = elementRef;
         this.cdr = cdr;
         this.ngZone = ngZone;
@@ -1044,6 +1373,7 @@ class GanttUpper {
             viewTypes: [GanttViewType.day, GanttViewType.month, GanttViewType.year]
         };
         this.viewOptions = {};
+        this.quickTimeFocus = false;
         this.loadOnScroll = new EventEmitter();
         this.dragStarted = new EventEmitter();
         this.dragMoved = new EventEmitter();
@@ -1051,6 +1381,7 @@ class GanttUpper {
         this.barClick = new EventEmitter();
         this.viewChange = new EventEmitter();
         this.expandChange = new EventEmitter();
+        this.configService = inject(GanttConfigService);
         this.computeAllRefs = true;
         this.linkDragEnded = new EventEmitter();
         this.items = [];
@@ -1065,8 +1396,10 @@ class GanttUpper {
     }
     createView() {
         const viewDate = this.getViewDate();
-        this.viewOptions.dateFormat = Object.assign({}, defaultConfig.dateFormat, this.config.dateFormat, this.viewOptions.dateFormat);
-        this.viewOptions.styleOptions = Object.assign({}, defaultConfig.styleOptions, this.config.styleOptions, this.viewOptions.styleOptions);
+        this.styles = Object.assign({}, this.configService.config.styleOptions, this.styles);
+        this.viewOptions.dateFormat = Object.assign({}, this.configService.config.dateFormat, this.viewOptions.dateFormat);
+        this.viewOptions.styleOptions = Object.assign({}, this.configService.config.styleOptions, this.viewOptions.styleOptions);
+        this.viewOptions.dateDisplayFormats = this.configService.getViewsLocale()[this.viewType]?.dateFormats;
         this.view = createViewFactory(this.viewType, viewDate.start, viewDate.end, this.viewOptions);
     }
     setupGroups() {
@@ -1135,10 +1468,12 @@ class GanttUpper {
         if (!this.start || !this.end) {
             this.originItems.forEach((item) => {
                 if (item.start && !this.start) {
-                    start = start ? Math.min(start, item.start) : item.start;
+                    const itemStart = item.start instanceof Date ? item.start.getTime() / 1000 : item.start;
+                    start = start ? Math.min(start, itemStart) : itemStart;
                 }
                 if (item.end && !this.end) {
-                    end = end ? Math.max(end, item.end) : item.end;
+                    const itemEnd = item.start instanceof Date ? item.start.getTime() / 1000 : item.start;
+                    end = end ? Math.max(end, itemEnd) : itemEnd;
                 }
             });
         }
@@ -1174,7 +1509,6 @@ class GanttUpper {
         this.cdr.detectChanges();
     }
     ngOnInit() {
-        this.styles = Object.assign({}, defaultConfig.styleOptions, this.config.styleOptions, this.styles);
         this.createView();
         this.setupGroups();
         this.setupItems();
@@ -1295,15 +1629,12 @@ class GanttUpper {
     rerenderView() {
         this.changeView(this.viewType);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttUpper, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: GANTT_GLOBAL_CONFIG }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: GanttUpper, inputs: { originItems: ["items", "originItems"], originGroups: ["groups", "originGroups"], originBaselineItems: ["baselineItems", "originBaselineItems"], viewType: "viewType", start: "start", end: "end", showTodayLine: "showTodayLine", draggable: "draggable", styles: "styles", showToolbar: "showToolbar", toolbarOptions: "toolbarOptions", viewOptions: "viewOptions", linkOptions: "linkOptions", disabledLoadOnScroll: "disabledLoadOnScroll", selectable: "selectable", multiple: "multiple" }, outputs: { loadOnScroll: "loadOnScroll", dragStarted: "dragStarted", dragMoved: "dragMoved", dragEnded: "dragEnded", barClick: "barClick", viewChange: "viewChange", expandChange: "expandChange" }, host: { properties: { "class.gantt": "this.ganttClass" } }, queries: [{ propertyName: "barTemplate", first: true, predicate: ["bar"], descendants: true, static: true }, { propertyName: "rangeTemplate", first: true, predicate: ["range"], descendants: true, static: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }, { propertyName: "baselineTemplate", first: true, predicate: ["baseline"], descendants: true, static: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], descendants: true, static: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ["groupHeader"], descendants: true, static: true }, { propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttUpper, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: GanttUpper, inputs: { originItems: ["items", "originItems"], originGroups: ["groups", "originGroups"], originBaselineItems: ["baselineItems", "originBaselineItems"], viewType: "viewType", start: "start", end: "end", showTodayLine: "showTodayLine", draggable: "draggable", styles: "styles", showToolbar: "showToolbar", toolbarOptions: "toolbarOptions", viewOptions: "viewOptions", linkOptions: "linkOptions", disabledLoadOnScroll: "disabledLoadOnScroll", selectable: "selectable", multiple: "multiple", quickTimeFocus: "quickTimeFocus" }, outputs: { loadOnScroll: "loadOnScroll", dragStarted: "dragStarted", dragMoved: "dragMoved", dragEnded: "dragEnded", barClick: "barClick", viewChange: "viewChange", expandChange: "expandChange" }, host: { properties: { "class.gantt": "this.ganttClass" } }, queries: [{ propertyName: "barTemplate", first: true, predicate: ["bar"], descendants: true, static: true }, { propertyName: "rangeTemplate", first: true, predicate: ["range"], descendants: true, static: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }, { propertyName: "baselineTemplate", first: true, predicate: ["baseline"], descendants: true, static: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], descendants: true, static: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ["groupHeader"], descendants: true, static: true }, { propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttUpper, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [GANTT_GLOBAL_CONFIG]
-                }] }], propDecorators: { originItems: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined }], propDecorators: { originItems: [{
                 type: Input,
                 args: ['items']
             }], originGroups: [{
@@ -1338,6 +1669,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 type: Input
             }], multiple: [{
                 type: Input
+            }], quickTimeFocus: [{
+                type: Input
             }], loadOnScroll: [{
                 type: Output
             }], dragStarted: [{
@@ -1547,6 +1880,7 @@ class GanttDomService {
     constructor(ngZone, platformId) {
         this.ngZone = ngZone;
         this.platformId = platformId;
+        this.visibleRangeX = signal({ min: 0, max: 0 });
         this.unsubscribe$ = new Subject();
     }
     monitorScrollChange() {
@@ -1623,6 +1957,7 @@ class GanttDomService {
         this.mainScrollbar && scrollObservers.push(fromEvent(this.mainScrollbar, 'scroll', options));
         return new Observable((subscriber) => this.ngZone.runOutsideAngular(() => merge(...scrollObservers)
             .pipe(map(() => this.mainContainer.scrollLeft), pairwise(), map(([previous, current]) => {
+            this.setVisibleRangeX();
             const event = {
                 target: this.mainContainer,
                 direction: ScrollDirection.NONE
@@ -1645,6 +1980,14 @@ class GanttDomService {
     getResize() {
         return isPlatformServer(this.platformId) ? EMPTY : fromEvent(window, 'resize').pipe(auditTime(150));
     }
+    getResizeByElement(element) {
+        return new Observable((observer) => {
+            const resizeObserver = new ResizeObserver(() => {
+                observer.next();
+            });
+            resizeObserver.observe(element);
+        });
+    }
     scrollMainContainer(left) {
         if (isNumber(left)) {
             const scrollLeft = left - this.mainContainer.clientWidth / 2;
@@ -1655,6 +1998,12 @@ class GanttDomService {
             this.mainFooter && (this.mainFooter.scrollLeft = this.mainContainer.scrollLeft);
         }
     }
+    setVisibleRangeX() {
+        this.visibleRangeX.set({
+            min: this.mainContainer.scrollLeft,
+            max: this.mainContainer.scrollLeft + this.mainContainer.clientWidth
+        });
+    }
     ngOnDestroy() {
         this.unsubscribe$.next();
         this.unsubscribe$.complete();
@@ -1752,8 +2101,8 @@ class GanttBarDrag {
     createMouseEvents() {
         if (!this.hasMonitorMouseEvent && (!this.dragDisabled || !this.linkDragDisabled)) {
             this.hasMonitorMouseEvent = true;
-            const dropClass = this.ganttUpper.config.linkOptions?.dependencyTypes?.length === 1 &&
-                this.ganttUpper.config.linkOptions?.dependencyTypes[0] === GanttLinkType.fs
+            const dropClass = this.ganttUpper.linkOptions?.dependencyTypes?.length === 1 &&
+                this.ganttUpper.linkOptions?.dependencyTypes[0] === GanttLinkType.fs
                 ? singleDropActiveClass
                 : dropActiveClass;
             fromEvent(this.barElement, 'mouseenter', passiveListenerOptions)
@@ -2659,6 +3008,8 @@ xmlns:xlink="http://www.w3.org/1999/xlink"
 </g>
 </svg>`;
 const dragIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fit="" preserveAspectRatio="xMidYMid meet" focusable="false"><g id="aijaction/drag--" stroke-width="1" fill-rule="evenodd"><g id="aij拖动" transform="translate(5 1)" fill-rule="nonzero"><path d="M1 2a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM1 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" id="aij形状结合"></path></g></g></svg>`;
+const arrowLeftIcon = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fit="" height="1em" width="1em" preserveAspectRatio="xMidYMid meet" focusable="false"><g id="adinavigation/arrow-left" stroke-width="1" fill-rule="evenodd"><path d="M7.4 4.15L4.438 7.315a.6.6 0 0 1-.876-.82l3.97-4.243a.598.598 0 0 1 .93-.057l3.97 4.323a.6.6 0 1 1-.885.812L8.6 4.118v9.149c0 .404-.269.733-.6.733-.332 0-.6-.329-.6-.733V4.15z" id="adi形状结合" transform="rotate(-90 7.995 8)"></path></g></svg>`;
+const arrowRightIcon = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fit="" height="1em" width="1em" preserveAspectRatio="xMidYMid meet" focusable="false"><g id="adlnavigation/arrow-right" stroke-width="1" fill-rule="evenodd"><path d="M7.4 4.15L4.438 7.315a.6.6 0 0 1-.876-.82l3.97-4.243a.598.598 0 0 1 .93-.057l3.97 4.323a.6.6 0 1 1-.885.812L8.6 4.118v9.149c0 .404-.269.733-.6.733-.332 0-.6-.329-.6-.733V4.15z" id="adl形状结合" transform="rotate(90 7.995 8)"></path></g></svg>`;
 const icons = {
     'angle-right': angleRight,
     'angle-down': angleDown,
@@ -2666,7 +3017,9 @@ const icons = {
     'minus-square': minusSquare,
     loading: loadingIcon,
     empty: emptyIcon,
-    drag: dragIcon
+    drag: dragIcon,
+    'arrow-left': arrowLeftIcon,
+    'arrow-right': arrowRightIcon
 };
 
 class GanttIconComponent {
@@ -3138,6 +3491,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     standalone: true
                 }]
         }] });
+class GanttDateFormatPipe {
+    transform(value, format) {
+        return new GanttDate(value).format(format);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttDateFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: GanttDateFormatPipe, isStandalone: true, name: "dateFormat" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttDateFormatPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'dateFormat',
+                    standalone: true
+                }]
+        }] });
 
 class NgxGanttRangeComponent extends GanttItemUpper {
     constructor(elementRef, ganttUpper) {
@@ -3159,17 +3526,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             }] } });
 
 class GanttMainComponent {
-    constructor(ganttUpper) {
+    constructor(ganttUpper, dom, ngZone) {
         this.ganttUpper = ganttUpper;
+        this.dom = dom;
+        this.ngZone = ngZone;
         this.barClick = new EventEmitter();
         this.lineClick = new EventEmitter();
         this.ganttMainClass = true;
+        this.unsubscribe$ = new Subject();
+    }
+    ngOnInit() {
+        const onStable$ = this.ngZone.isStable ? from(Promise.resolve()) : this.ngZone.onStable.pipe(take$1(1));
+        this.ngZone.runOutsideAngular(() => {
+            onStable$.pipe(takeUntil$1(this.unsubscribe$)).subscribe(() => {
+                this.setupResize();
+            });
+        });
     }
     trackBy(index, item) {
         return item.id || index;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttMainComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: GanttMainComponent, isStandalone: true, selector: "gantt-main", inputs: { viewportItems: "viewportItems", flatItems: "flatItems", groupHeaderTemplate: "groupHeaderTemplate", itemTemplate: "itemTemplate", barTemplate: "barTemplate", rangeTemplate: "rangeTemplate", baselineTemplate: "baselineTemplate" }, outputs: { barClick: "barClick", lineClick: "lineClick" }, host: { properties: { "class.gantt-main-container": "this.ganttMainClass" } }, ngImport: i0, template: "<gantt-links-overlay [flatItems]=\"flatItems\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay>\n<div class=\"gantt-main-groups\" [style.width.px]=\"ganttUpper.view.width\">\n  <ng-container *ngFor=\"let data of viewportItems; trackBy: trackBy\">\n    <div class=\"gantt-group\" [style.height.px]=\"ganttUpper.styles.lineHeight\" [ngClass]=\"data.class\" *ngIf=\"data.items\">\n      <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: data }\"></ng-template>\n    </div>\n    <div\n      *ngIf=\"!data.items\"\n      class=\"gantt-item\"\n      [style.height.px]=\"ganttUpper.styles.lineHeight\"\n      [class.gantt-main-item-active]=\"ganttUpper.isSelected(data.id)\"\n    >\n      <ng-container *ngIf=\"data.type | isGanttCustomItem\">\n        <ng-template\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{\n            item: data.origin,\n            refs: data.refs,\n            baseline: ganttUpper.baselineItemsMap[data.id]?.origin,\n            baselineRefs: ganttUpper.baselineItemsMap[data.id]?.refs\n          }\"\n        >\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngIf=\"(data.type | isGanttRangeItem) || (data.type | isGanttBarItem)\">\n        <gantt-range *ngIf=\"data.type | isGanttRangeItem\" [template]=\"rangeTemplate\" [item]=\"data\"></gantt-range>\n        <gantt-bar *ngIf=\"data.type | isGanttBarItem\" [item]=\"data\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n        <gantt-baseline\n          *ngIf=\"ganttUpper.baselineItemsMap[data.id]\"\n          [baselineItem]=\"ganttUpper.baselineItemsMap[data.id]\"\n          [template]=\"baselineTemplate\"\n        ></gantt-baseline>\n      </ng-container>\n    </div>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "component", type: GanttLinksComponent, selector: "gantt-links-overlay", inputs: ["flatItems"], outputs: ["lineClick"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgxGanttRangeComponent, selector: "ngx-gantt-range,gantt-range" }, { kind: "component", type: NgxGanttBarComponent, selector: "ngx-gantt-bar,gantt-bar", outputs: ["barClick"] }, { kind: "component", type: NgxGanttBaselineComponent, selector: "ngx-gantt-baseline,gantt-baseline", inputs: ["baselineItem", "template"] }, { kind: "pipe", type: IsGanttRangeItemPipe, name: "isGanttRangeItem" }, { kind: "pipe", type: IsGanttBarItemPipe, name: "isGanttBarItem" }, { kind: "pipe", type: IsGanttCustomItemPipe, name: "isGanttCustomItem" }] }); }
+    setupResize() {
+        combineLatest([this.dom.getResize(), this.dom.getResizeByElement(this.dom.mainContainer)])
+            .pipe(takeUntil$1(this.unsubscribe$))
+            .subscribe(() => {
+            this.dom.setVisibleRangeX();
+        });
+    }
+    quickTime(item, type) {
+        const date = type === 'left' ? item.start || item.end : item.end || item.start;
+        this.ganttRoot.scrollToDate(date);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttMainComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: GanttDomService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GanttMainComponent, isStandalone: true, selector: "gantt-main", inputs: { viewportItems: "viewportItems", flatItems: "flatItems", groupHeaderTemplate: "groupHeaderTemplate", itemTemplate: "itemTemplate", barTemplate: "barTemplate", rangeTemplate: "rangeTemplate", baselineTemplate: "baselineTemplate", ganttRoot: "ganttRoot", quickTimeFocus: "quickTimeFocus" }, outputs: { barClick: "barClick", lineClick: "lineClick" }, host: { properties: { "class.gantt-main-container": "this.ganttMainClass" } }, ngImport: i0, template: "<gantt-links-overlay [flatItems]=\"flatItems\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay>\n<div class=\"gantt-main-groups\" [style.width.px]=\"ganttUpper.view.width\">\n  <ng-container *ngFor=\"let data of viewportItems; trackBy: trackBy\">\n    <div class=\"gantt-group\" [style.height.px]=\"ganttUpper.styles.lineHeight\" [ngClass]=\"data.class\" *ngIf=\"data.items\">\n      <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: data }\"></ng-template>\n    </div>\n    <div\n      *ngIf=\"!data.items\"\n      class=\"gantt-item\"\n      [style.height.px]=\"ganttUpper.styles.lineHeight\"\n      [class.gantt-main-item-active]=\"ganttUpper.isSelected(data.id)\"\n    >\n      <ng-container *ngIf=\"data.type | isGanttCustomItem\">\n        <ng-template\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{\n            item: data.origin,\n            refs: data.refs,\n            baseline: ganttUpper.baselineItemsMap[data.id]?.origin,\n            baselineRefs: ganttUpper.baselineItemsMap[data.id]?.refs\n          }\"\n        >\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngIf=\"(data.type | isGanttRangeItem) || (data.type | isGanttBarItem)\">\n        <gantt-range *ngIf=\"data.type | isGanttRangeItem\" [template]=\"rangeTemplate\" [item]=\"data\"></gantt-range>\n        <gantt-bar *ngIf=\"data.type | isGanttBarItem\" [item]=\"data\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n        <gantt-baseline\n          *ngIf=\"ganttUpper.baselineItemsMap[data.id]\"\n          [baselineItem]=\"ganttUpper.baselineItemsMap[data.id]\"\n          [template]=\"baselineTemplate\"\n        ></gantt-baseline>\n      </ng-container>\n    </div>\n  </ng-container>\n</div>\n\n@if (quickTimeFocus) {\n<div class=\"gantt-quick-time-focus-container\" [style.width.px]=\"ganttUpper.view.width\">\n  <div class=\"gantt-quick-time-focus\" [style.width.px]=\"dom.visibleRangeX().max - dom.visibleRangeX().min\">\n    <ng-container *ngFor=\"let data of viewportItems; let i = index; trackBy: trackBy\">\n      <div class=\"gantt-quick-time-focus-item\" [style.height.px]=\"ganttUpper.styles.lineHeight\">\n        <span class=\"ml-2\">\n          @if ((data.refs.x < dom.visibleRangeX().min ) && data.refs.width ) {\n          <a class=\"gantt-quick-time-focus-item-arrow link-secondary\" href=\"javascript:;\" (click)=\"quickTime(data.origin, 'left')\">\n            <gantt-icon iconName=\"arrow-left\"></gantt-icon>\n          </a>\n          }\n        </span>\n\n        <span class=\"mr-2\">\n          @if((data.refs.x + data.refs.width > dom.visibleRangeX().max) && data.refs.width) {\n          <a class=\"gantt-quick-time-focus-item-arrow link-secondary\" href=\"javascript:;\" (click)=\"quickTime(data.origin, 'right')\">\n            <gantt-icon iconName=\"arrow-right\"></gantt-icon>\n          </a>\n          }\n        </span>\n      </div>\n    </ng-container>\n  </div>\n</div>\n}\n", dependencies: [{ kind: "component", type: GanttLinksComponent, selector: "gantt-links-overlay", inputs: ["flatItems"], outputs: ["lineClick"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgxGanttRangeComponent, selector: "ngx-gantt-range,gantt-range" }, { kind: "component", type: NgxGanttBarComponent, selector: "ngx-gantt-bar,gantt-bar", outputs: ["barClick"] }, { kind: "component", type: NgxGanttBaselineComponent, selector: "ngx-gantt-baseline,gantt-baseline", inputs: ["baselineItem", "template"] }, { kind: "pipe", type: IsGanttRangeItemPipe, name: "isGanttRangeItem" }, { kind: "pipe", type: IsGanttBarItemPipe, name: "isGanttBarItem" }, { kind: "pipe", type: IsGanttCustomItemPipe, name: "isGanttCustomItem" }, { kind: "component", type: GanttIconComponent, selector: "gantt-icon", inputs: ["iconName"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttMainComponent, decorators: [{
             type: Component,
@@ -3184,12 +3573,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         NgxGanttBaselineComponent,
                         IsGanttRangeItemPipe,
                         IsGanttBarItemPipe,
-                        IsGanttCustomItemPipe
-                    ], template: "<gantt-links-overlay [flatItems]=\"flatItems\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay>\n<div class=\"gantt-main-groups\" [style.width.px]=\"ganttUpper.view.width\">\n  <ng-container *ngFor=\"let data of viewportItems; trackBy: trackBy\">\n    <div class=\"gantt-group\" [style.height.px]=\"ganttUpper.styles.lineHeight\" [ngClass]=\"data.class\" *ngIf=\"data.items\">\n      <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: data }\"></ng-template>\n    </div>\n    <div\n      *ngIf=\"!data.items\"\n      class=\"gantt-item\"\n      [style.height.px]=\"ganttUpper.styles.lineHeight\"\n      [class.gantt-main-item-active]=\"ganttUpper.isSelected(data.id)\"\n    >\n      <ng-container *ngIf=\"data.type | isGanttCustomItem\">\n        <ng-template\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{\n            item: data.origin,\n            refs: data.refs,\n            baseline: ganttUpper.baselineItemsMap[data.id]?.origin,\n            baselineRefs: ganttUpper.baselineItemsMap[data.id]?.refs\n          }\"\n        >\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngIf=\"(data.type | isGanttRangeItem) || (data.type | isGanttBarItem)\">\n        <gantt-range *ngIf=\"data.type | isGanttRangeItem\" [template]=\"rangeTemplate\" [item]=\"data\"></gantt-range>\n        <gantt-bar *ngIf=\"data.type | isGanttBarItem\" [item]=\"data\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n        <gantt-baseline\n          *ngIf=\"ganttUpper.baselineItemsMap[data.id]\"\n          [baselineItem]=\"ganttUpper.baselineItemsMap[data.id]\"\n          [template]=\"baselineTemplate\"\n        ></gantt-baseline>\n      </ng-container>\n    </div>\n  </ng-container>\n</div>\n" }]
+                        IsGanttCustomItemPipe,
+                        GanttIconComponent
+                    ], template: "<gantt-links-overlay [flatItems]=\"flatItems\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay>\n<div class=\"gantt-main-groups\" [style.width.px]=\"ganttUpper.view.width\">\n  <ng-container *ngFor=\"let data of viewportItems; trackBy: trackBy\">\n    <div class=\"gantt-group\" [style.height.px]=\"ganttUpper.styles.lineHeight\" [ngClass]=\"data.class\" *ngIf=\"data.items\">\n      <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: data }\"></ng-template>\n    </div>\n    <div\n      *ngIf=\"!data.items\"\n      class=\"gantt-item\"\n      [style.height.px]=\"ganttUpper.styles.lineHeight\"\n      [class.gantt-main-item-active]=\"ganttUpper.isSelected(data.id)\"\n    >\n      <ng-container *ngIf=\"data.type | isGanttCustomItem\">\n        <ng-template\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{\n            item: data.origin,\n            refs: data.refs,\n            baseline: ganttUpper.baselineItemsMap[data.id]?.origin,\n            baselineRefs: ganttUpper.baselineItemsMap[data.id]?.refs\n          }\"\n        >\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngIf=\"(data.type | isGanttRangeItem) || (data.type | isGanttBarItem)\">\n        <gantt-range *ngIf=\"data.type | isGanttRangeItem\" [template]=\"rangeTemplate\" [item]=\"data\"></gantt-range>\n        <gantt-bar *ngIf=\"data.type | isGanttBarItem\" [item]=\"data\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n        <gantt-baseline\n          *ngIf=\"ganttUpper.baselineItemsMap[data.id]\"\n          [baselineItem]=\"ganttUpper.baselineItemsMap[data.id]\"\n          [template]=\"baselineTemplate\"\n        ></gantt-baseline>\n      </ng-container>\n    </div>\n  </ng-container>\n</div>\n\n@if (quickTimeFocus) {\n<div class=\"gantt-quick-time-focus-container\" [style.width.px]=\"ganttUpper.view.width\">\n  <div class=\"gantt-quick-time-focus\" [style.width.px]=\"dom.visibleRangeX().max - dom.visibleRangeX().min\">\n    <ng-container *ngFor=\"let data of viewportItems; let i = index; trackBy: trackBy\">\n      <div class=\"gantt-quick-time-focus-item\" [style.height.px]=\"ganttUpper.styles.lineHeight\">\n        <span class=\"ml-2\">\n          @if ((data.refs.x < dom.visibleRangeX().min ) && data.refs.width ) {\n          <a class=\"gantt-quick-time-focus-item-arrow link-secondary\" href=\"javascript:;\" (click)=\"quickTime(data.origin, 'left')\">\n            <gantt-icon iconName=\"arrow-left\"></gantt-icon>\n          </a>\n          }\n        </span>\n\n        <span class=\"mr-2\">\n          @if((data.refs.x + data.refs.width > dom.visibleRangeX().max) && data.refs.width) {\n          <a class=\"gantt-quick-time-focus-item-arrow link-secondary\" href=\"javascript:;\" (click)=\"quickTime(data.origin, 'right')\">\n            <gantt-icon iconName=\"arrow-right\"></gantt-icon>\n          </a>\n          }\n        </span>\n      </div>\n    </ng-container>\n  </div>\n</div>\n}\n" }]
         }], ctorParameters: () => [{ type: GanttUpper, decorators: [{
                     type: Inject,
                     args: [GANTT_UPPER_TOKEN]
-                }] }], propDecorators: { viewportItems: [{
+                }] }, { type: GanttDomService }, { type: i0.NgZone }], propDecorators: { viewportItems: [{
                 type: Input
             }], flatItems: [{
                 type: Input
@@ -3203,6 +3593,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 type: Input
             }], baselineTemplate: [{
                 type: Input
+            }], ganttRoot: [{
+                type: Input
+            }], quickTimeFocus: [{
+                type: Input
             }], barClick: [{
                 type: Output
             }], lineClick: [{
@@ -3633,11 +4027,11 @@ class GanttTableBodyComponent {
         this.document.querySelectorAll('.drop-position-inside').forEach((element) => element.classList.remove('drop-position-inside'));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttTableBodyComponent, deps: [{ token: GANTT_ABSTRACT_TOKEN }, { token: GANTT_UPPER_TOKEN }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: GanttTableBodyComponent, isStandalone: true, selector: "gantt-table-body", inputs: { viewportItems: "viewportItems", flatItems: "flatItems", columns: "columns", groupTemplate: "groupTemplate", emptyTemplate: "emptyTemplate", rowBeforeTemplate: "rowBeforeTemplate", rowAfterTemplate: "rowAfterTemplate", draggable: "draggable", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", dragStarted: "dragStarted", dragEnded: "dragEnded", itemClick: "itemClick" }, host: { properties: { "class.gantt-table-draggable": "this.draggable", "class.gantt-table-body": "this.ganttTableClass", "class.gantt-table-empty": "this.ganttTableEmptyClass", "class.gantt-table-dragging": "this.ganttTableDragging" } }, viewQueries: [{ propertyName: "cdkDrags", predicate: (CdkDrag), descendants: true }], ngImport: i0, template: "<div\n  class=\"gantt-table-body-container\"\n  cdkDropList\n  [cdkDropListAutoScrollStep]=\"6\"\n  [cdkDropListData]=\"viewportItems\"\n  [cdkDropListSortingDisabled]=\"true\"\n  (cdkDropListDropped)=\"onListDropped($event)\"\n>\n  <ng-container *ngIf=\"!viewportItems?.length\">\n    <ng-container *ngIf=\"!emptyTemplate\">\n      <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n      <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n    </ng-container>\n    <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewportItems && viewportItems.length > 0\">\n    <ng-container *ngFor=\"let item of viewportItems; trackBy: trackBy\">\n      <div class=\"gantt-table-group\" [style.height.px]=\"gantt.styles.lineHeight\" [ngClass]=\"item.class\" *ngIf=\"item.items\">\n        <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n          <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n          <ng-container *ngIf=\"groupTemplate; else default\">\n            <ng-template\n              [ngTemplateOutlet]=\"groupTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n            ></ng-template>\n          </ng-container>\n          <ng-template #default>\n            <span class=\"group-title\">{{ item.title }}</span>\n          </ng-template>\n        </div>\n      </div>\n\n      <div\n        *ngIf=\"!item.items\"\n        (click)=\"itemClick.emit({ event: $event, selectedValue: item.origin })\"\n        cdkDrag\n        [cdkDragData]=\"item\"\n        [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n        (cdkDragStarted)=\"onItemDragStarted($event)\"\n        (cdkDragEnded)=\"onItemDragEnded($event)\"\n        (cdkDragMoved)=\"emitItemDragMoved($event)\"\n        class=\"gantt-table-item\"\n        [class.gantt-table-item-with-group]=\"hasGroup\"\n        [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n        [style.height.px]=\"gantt.styles.lineHeight\"\n        [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n        [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"rowBeforeTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n\n        <div [classList]=\"column.classList\" *ngFor=\"let column of columns; let first = first\" [style.width]=\"column.columnWidth\">\n          <!-- drag icon -->\n          <gantt-icon\n            *ngIf=\"first && draggable\"\n            class=\"gantt-drag-handle\"\n            iconName=\"drag\"\n            cdkDragHandle\n            [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n          ></gantt-icon>\n          <!-- expand icon -->\n          <div\n            *ngIf=\"column?.showExpandIcon || (!hasExpandIcon && first)\"\n            class=\"gantt-expand-icon\"\n            [style.marginLeft.px]=\"item.level * 20\"\n          >\n            <ng-container *ngIf=\"item.level < gantt.maxLevel - 1 && ((gantt.async && item.expandable) || item.children?.length > 0)\">\n              <gantt-icon\n                *ngIf=\"!item.loading\"\n                class=\"expand-icon\"\n                [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n                (click)=\"expandChildren($event, item)\"\n              >\n              </gantt-icon>\n              <gantt-icon *ngIf=\"item.loading\" [iconName]=\"'loading'\"></gantt-icon>\n            </ng-container>\n          </div>\n          <!-- column content -->\n          <div class=\"gantt-table-column-content\">\n            <ng-template\n              [ngTemplateOutlet]=\"column.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n            ></ng-template>\n          </div>\n        </div>\n        <ng-template\n          [ngTemplateOutlet]=\"rowAfterTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GanttIconComponent, selector: "gantt-icon", inputs: ["iconName"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: IsGanttRangeItemPipe, name: "isGanttRangeItem" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: GanttTableBodyComponent, isStandalone: true, selector: "gantt-table-body", inputs: { viewportItems: "viewportItems", flatItems: "flatItems", columns: "columns", groupTemplate: "groupTemplate", emptyTemplate: "emptyTemplate", rowBeforeTemplate: "rowBeforeTemplate", rowAfterTemplate: "rowAfterTemplate", draggable: "draggable", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", dragStarted: "dragStarted", dragEnded: "dragEnded", itemClick: "itemClick" }, host: { properties: { "class.gantt-table-draggable": "this.draggable", "class.gantt-table-body": "this.ganttTableClass", "class.gantt-table-empty": "this.ganttTableEmptyClass", "class.gantt-table-dragging": "this.ganttTableDragging" } }, viewQueries: [{ propertyName: "cdkDrags", predicate: (CdkDrag), descendants: true }], ngImport: i0, template: "<div\n  class=\"gantt-table-body-container\"\n  cdkDropList\n  [cdkDropListAutoScrollStep]=\"6\"\n  [cdkDropListData]=\"viewportItems\"\n  [cdkDropListSortingDisabled]=\"true\"\n  (cdkDropListDropped)=\"onListDropped($event)\"\n>\n  <ng-container *ngIf=\"!viewportItems?.length\">\n    <ng-container *ngIf=\"!emptyTemplate\">\n      <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n      <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n    </ng-container>\n    <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewportItems && viewportItems.length > 0\">\n    <ng-container *ngFor=\"let item of viewportItems; trackBy: trackBy\">\n      <div class=\"gantt-table-group\" [style.height.px]=\"gantt.styles.lineHeight\" [ngClass]=\"item.class\" *ngIf=\"item.items\">\n        <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n          <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n          <ng-container *ngIf=\"groupTemplate; else default\">\n            <ng-template\n              [ngTemplateOutlet]=\"groupTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n            ></ng-template>\n          </ng-container>\n          <ng-template #default>\n            <span class=\"group-title\">{{ item.title }}</span>\n          </ng-template>\n        </div>\n      </div>\n\n      <div\n        *ngIf=\"!item.items\"\n        (click)=\"itemClick.emit({ event: $event, current: item.origin, selectedValue: item.origin })\"\n        cdkDrag\n        [cdkDragData]=\"item\"\n        [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n        (cdkDragStarted)=\"onItemDragStarted($event)\"\n        (cdkDragEnded)=\"onItemDragEnded($event)\"\n        (cdkDragMoved)=\"emitItemDragMoved($event)\"\n        class=\"gantt-table-item\"\n        [class.gantt-table-item-with-group]=\"hasGroup\"\n        [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n        [style.height.px]=\"gantt.styles.lineHeight\"\n        [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n        [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"rowBeforeTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n\n        <div [classList]=\"column.classList\" *ngFor=\"let column of columns; let first = first\" [style.width]=\"column.columnWidth\">\n          <!-- drag icon -->\n          <gantt-icon\n            *ngIf=\"first && draggable\"\n            class=\"gantt-drag-handle\"\n            iconName=\"drag\"\n            cdkDragHandle\n            [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n          ></gantt-icon>\n          <!-- expand icon -->\n          <div\n            *ngIf=\"column?.showExpandIcon || (!hasExpandIcon && first)\"\n            class=\"gantt-expand-icon\"\n            [style.marginLeft.px]=\"item.level * 20\"\n          >\n            <ng-container *ngIf=\"item.level < gantt.maxLevel - 1 && ((gantt.async && item.expandable) || item.children?.length > 0)\">\n              <gantt-icon\n                *ngIf=\"!item.loading\"\n                class=\"expand-icon\"\n                [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n                (click)=\"expandChildren($event, item)\"\n              >\n              </gantt-icon>\n              <gantt-icon *ngIf=\"item.loading\" [iconName]=\"'loading'\"></gantt-icon>\n            </ng-container>\n          </div>\n          <!-- column content -->\n          <div class=\"gantt-table-column-content\">\n            <ng-template\n              [ngTemplateOutlet]=\"column.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n            ></ng-template>\n          </div>\n        </div>\n        <ng-template\n          [ngTemplateOutlet]=\"rowAfterTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GanttIconComponent, selector: "gantt-icon", inputs: ["iconName"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: IsGanttRangeItemPipe, name: "isGanttRangeItem" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttTableBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gantt-table-body', standalone: true, imports: [CdkDropList, NgIf, GanttIconComponent, NgTemplateOutlet, NgFor, NgClass, CdkDrag, CdkDragHandle, IsGanttRangeItemPipe], template: "<div\n  class=\"gantt-table-body-container\"\n  cdkDropList\n  [cdkDropListAutoScrollStep]=\"6\"\n  [cdkDropListData]=\"viewportItems\"\n  [cdkDropListSortingDisabled]=\"true\"\n  (cdkDropListDropped)=\"onListDropped($event)\"\n>\n  <ng-container *ngIf=\"!viewportItems?.length\">\n    <ng-container *ngIf=\"!emptyTemplate\">\n      <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n      <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n    </ng-container>\n    <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewportItems && viewportItems.length > 0\">\n    <ng-container *ngFor=\"let item of viewportItems; trackBy: trackBy\">\n      <div class=\"gantt-table-group\" [style.height.px]=\"gantt.styles.lineHeight\" [ngClass]=\"item.class\" *ngIf=\"item.items\">\n        <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n          <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n          <ng-container *ngIf=\"groupTemplate; else default\">\n            <ng-template\n              [ngTemplateOutlet]=\"groupTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n            ></ng-template>\n          </ng-container>\n          <ng-template #default>\n            <span class=\"group-title\">{{ item.title }}</span>\n          </ng-template>\n        </div>\n      </div>\n\n      <div\n        *ngIf=\"!item.items\"\n        (click)=\"itemClick.emit({ event: $event, selectedValue: item.origin })\"\n        cdkDrag\n        [cdkDragData]=\"item\"\n        [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n        (cdkDragStarted)=\"onItemDragStarted($event)\"\n        (cdkDragEnded)=\"onItemDragEnded($event)\"\n        (cdkDragMoved)=\"emitItemDragMoved($event)\"\n        class=\"gantt-table-item\"\n        [class.gantt-table-item-with-group]=\"hasGroup\"\n        [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n        [style.height.px]=\"gantt.styles.lineHeight\"\n        [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n        [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"rowBeforeTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n\n        <div [classList]=\"column.classList\" *ngFor=\"let column of columns; let first = first\" [style.width]=\"column.columnWidth\">\n          <!-- drag icon -->\n          <gantt-icon\n            *ngIf=\"first && draggable\"\n            class=\"gantt-drag-handle\"\n            iconName=\"drag\"\n            cdkDragHandle\n            [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n          ></gantt-icon>\n          <!-- expand icon -->\n          <div\n            *ngIf=\"column?.showExpandIcon || (!hasExpandIcon && first)\"\n            class=\"gantt-expand-icon\"\n            [style.marginLeft.px]=\"item.level * 20\"\n          >\n            <ng-container *ngIf=\"item.level < gantt.maxLevel - 1 && ((gantt.async && item.expandable) || item.children?.length > 0)\">\n              <gantt-icon\n                *ngIf=\"!item.loading\"\n                class=\"expand-icon\"\n                [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n                (click)=\"expandChildren($event, item)\"\n              >\n              </gantt-icon>\n              <gantt-icon *ngIf=\"item.loading\" [iconName]=\"'loading'\"></gantt-icon>\n            </ng-container>\n          </div>\n          <!-- column content -->\n          <div class=\"gantt-table-column-content\">\n            <ng-template\n              [ngTemplateOutlet]=\"column.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n            ></ng-template>\n          </div>\n        </div>\n        <ng-template\n          [ngTemplateOutlet]=\"rowAfterTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n" }]
+            args: [{ selector: 'gantt-table-body', standalone: true, imports: [CdkDropList, NgIf, GanttIconComponent, NgTemplateOutlet, NgFor, NgClass, CdkDrag, CdkDragHandle, IsGanttRangeItemPipe], template: "<div\n  class=\"gantt-table-body-container\"\n  cdkDropList\n  [cdkDropListAutoScrollStep]=\"6\"\n  [cdkDropListData]=\"viewportItems\"\n  [cdkDropListSortingDisabled]=\"true\"\n  (cdkDropListDropped)=\"onListDropped($event)\"\n>\n  <ng-container *ngIf=\"!viewportItems?.length\">\n    <ng-container *ngIf=\"!emptyTemplate\">\n      <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n      <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n    </ng-container>\n    <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewportItems && viewportItems.length > 0\">\n    <ng-container *ngFor=\"let item of viewportItems; trackBy: trackBy\">\n      <div class=\"gantt-table-group\" [style.height.px]=\"gantt.styles.lineHeight\" [ngClass]=\"item.class\" *ngIf=\"item.items\">\n        <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n          <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n          <ng-container *ngIf=\"groupTemplate; else default\">\n            <ng-template\n              [ngTemplateOutlet]=\"groupTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n            ></ng-template>\n          </ng-container>\n          <ng-template #default>\n            <span class=\"group-title\">{{ item.title }}</span>\n          </ng-template>\n        </div>\n      </div>\n\n      <div\n        *ngIf=\"!item.items\"\n        (click)=\"itemClick.emit({ event: $event, current: item.origin, selectedValue: item.origin })\"\n        cdkDrag\n        [cdkDragData]=\"item\"\n        [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n        (cdkDragStarted)=\"onItemDragStarted($event)\"\n        (cdkDragEnded)=\"onItemDragEnded($event)\"\n        (cdkDragMoved)=\"emitItemDragMoved($event)\"\n        class=\"gantt-table-item\"\n        [class.gantt-table-item-with-group]=\"hasGroup\"\n        [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n        [style.height.px]=\"gantt.styles.lineHeight\"\n        [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n        [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"rowBeforeTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n\n        <div [classList]=\"column.classList\" *ngFor=\"let column of columns; let first = first\" [style.width]=\"column.columnWidth\">\n          <!-- drag icon -->\n          <gantt-icon\n            *ngIf=\"first && draggable\"\n            class=\"gantt-drag-handle\"\n            iconName=\"drag\"\n            cdkDragHandle\n            [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n          ></gantt-icon>\n          <!-- expand icon -->\n          <div\n            *ngIf=\"column?.showExpandIcon || (!hasExpandIcon && first)\"\n            class=\"gantt-expand-icon\"\n            [style.marginLeft.px]=\"item.level * 20\"\n          >\n            <ng-container *ngIf=\"item.level < gantt.maxLevel - 1 && ((gantt.async && item.expandable) || item.children?.length > 0)\">\n              <gantt-icon\n                *ngIf=\"!item.loading\"\n                class=\"expand-icon\"\n                [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n                (click)=\"expandChildren($event, item)\"\n              >\n              </gantt-icon>\n              <gantt-icon *ngIf=\"item.loading\" [iconName]=\"'loading'\"></gantt-icon>\n            </ng-container>\n          </div>\n          <!-- column content -->\n          <div class=\"gantt-table-column-content\">\n            <ng-template\n              [ngTemplateOutlet]=\"column.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n            ></ng-template>\n          </div>\n        </div>\n        <ng-template\n          [ngTemplateOutlet]=\"rowAfterTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [GANTT_ABSTRACT_TOKEN]
@@ -3697,17 +4091,17 @@ class NgxGanttToolbarComponent {
     constructor(ganttUpper) {
         this.ganttUpper = ganttUpper;
         this.ganttItemClass = true;
-        this.ganttViewsMap = keyBy(ganttViews, 'value');
+        this.views = inject(GanttConfigService).getViewsLocale();
     }
     selectView(view) {
         this.ganttUpper.changeView(view);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgxGanttToolbarComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", 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  <ng-container *ngIf=\"!template\">\n    <div class=\"toolbar-views\" *ngIf=\"this.ganttUpper.toolbarOptions?.viewTypes?.length\">\n      <ng-container *ngFor=\"let view of this.ganttUpper.toolbarOptions?.viewTypes\">\n        <div class=\"toolbar-view\" *ngIf=\"ganttViewsMap[view]\" [class.active]=\"view === this.ganttUpper.viewType\" (click)=\"selectView(view)\">\n          {{ ganttViewsMap[view].name }}\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", 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  <ng-container *ngIf=\"!template\">\n    <div class=\"toolbar-views\" *ngIf=\"this.ganttUpper.toolbarOptions?.viewTypes?.length\">\n      <ng-container *ngFor=\"let viewType of this.ganttUpper.toolbarOptions?.viewTypes\">\n        <div\n          class=\"toolbar-view\"\n          *ngIf=\"views[viewType]\"\n          [class.active]=\"viewType === this.ganttUpper.viewType\"\n          (click)=\"selectView(viewType)\"\n        >\n          {{ views[viewType].label }}\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgxGanttToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-gantt-toolbar,gantt-toolbar', standalone: true, imports: [NgIf, NgFor, NgTemplateOutlet], template: "<div class=\"toolbar-container\">\n  <ng-container *ngIf=\"!template\">\n    <div class=\"toolbar-views\" *ngIf=\"this.ganttUpper.toolbarOptions?.viewTypes?.length\">\n      <ng-container *ngFor=\"let view of this.ganttUpper.toolbarOptions?.viewTypes\">\n        <div class=\"toolbar-view\" *ngIf=\"ganttViewsMap[view]\" [class.active]=\"view === this.ganttUpper.viewType\" (click)=\"selectView(view)\">\n          {{ ganttViewsMap[view].name }}\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n</div>\n" }]
+            args: [{ selector: 'ngx-gantt-toolbar,gantt-toolbar', standalone: true, imports: [NgIf, NgFor, NgTemplateOutlet], template: "<div class=\"toolbar-container\">\n  <ng-container *ngIf=\"!template\">\n    <div class=\"toolbar-views\" *ngIf=\"this.ganttUpper.toolbarOptions?.viewTypes?.length\">\n      <ng-container *ngFor=\"let viewType of this.ganttUpper.toolbarOptions?.viewTypes\">\n        <div\n          class=\"toolbar-view\"\n          *ngIf=\"views[viewType]\"\n          [class.active]=\"viewType === this.ganttUpper.viewType\"\n          (click)=\"selectView(viewType)\"\n        >\n          {{ views[viewType].label }}\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n</div>\n" }]
         }], ctorParameters: () => [{ type: GanttUpper, decorators: [{
                     type: Inject,
                     args: [GANTT_UPPER_TOKEN]
@@ -3874,7 +4268,7 @@ class NgxGanttRootComponent {
         this.unsubscribe$.next();
     }
     setupViewScroll() {
-        if (this.ganttUpper.disabledLoadOnScroll) {
+        if (this.ganttUpper.disabledLoadOnScroll && !this.ganttUpper.quickTimeFocus) {
             return;
         }
         this.dom
@@ -3923,7 +4317,7 @@ class NgxGanttRootComponent {
     }
     scrollToDate(date) {
         let x;
-        if (typeof date === 'number') {
+        if (typeof date === 'number' || date instanceof Date) {
             x = this.view.getXPointByDate(new GanttDate(date));
         }
         else {
@@ -4016,9 +4410,10 @@ class NgxGanttTableComponent {
         this.dragStarted = new EventEmitter();
         this.dragEnded = new EventEmitter();
         this.columnChanges = new EventEmitter();
+        this.itemClick = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgxGanttTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: NgxGanttTableComponent, isStandalone: true, selector: "ngx-gantt-table", inputs: { draggable: "draggable", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", dragStarted: "dragStarted", dragEnded: "dragEnded", columnChanges: "columnChanges" }, queries: [{ propertyName: "rowBeforeTemplate", first: true, predicate: ["rowBeforeSlot"], descendants: true, static: true }, { propertyName: "rowAfterTemplate", first: true, predicate: ["rowAfterSlot"], descendants: true, static: true }, { propertyName: "tableEmptyTemplate", first: true, predicate: ["tableEmpty"], descendants: true, static: true }, { propertyName: "tableFooterTemplate", first: true, predicate: ["tableFooter"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: NgxGanttTableComponent, isStandalone: true, selector: "ngx-gantt-table", inputs: { draggable: "draggable", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", dragStarted: "dragStarted", dragEnded: "dragEnded", columnChanges: "columnChanges", itemClick: "itemClick" }, queries: [{ propertyName: "rowBeforeTemplate", first: true, predicate: ["rowBeforeSlot"], descendants: true, static: true }, { propertyName: "rowAfterTemplate", first: true, predicate: ["rowAfterSlot"], descendants: true, static: true }, { propertyName: "tableEmptyTemplate", first: true, predicate: ["tableEmpty"], descendants: true, static: true }, { propertyName: "tableFooterTemplate", first: true, predicate: ["tableFooter"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgxGanttTableComponent, decorators: [{
             type: Component,
@@ -4039,6 +4434,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 type: Output
             }], columnChanges: [{
                 type: Output
+            }], itemClick: [{
+                type: Output
             }], rowBeforeTemplate: [{
                 type: ContentChild,
                 args: ['rowBeforeSlot', { static: true }]
@@ -4269,6 +4666,10 @@ class NgxGanttComponent extends GanttUpper {
         }
     }
     selectItem(selectEvent) {
+        this.table.itemClick.emit({
+            event: selectEvent.event,
+            current: selectEvent.current
+        });
         if (!this.selectable) {
             return;
         }
@@ -4332,7 +4733,7 @@ class NgxGanttComponent extends GanttUpper {
                 provide: GANTT_ABSTRACT_TOKEN,
                 useExisting: forwardRef(() => NgxGanttComponent)
             }
-        ], queries: [{ propertyName: "table", first: true, predicate: NgxGanttTableComponent, descendants: true }, { propertyName: "tableEmptyTemplate", first: true, predicate: ["tableEmpty"], descendants: true, static: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true, static: true }, { propertyName: "columns", predicate: NgxGanttTableColumnComponent, descendants: true }], viewQueries: [{ propertyName: "ganttRoot", first: true, predicate: ["ganttRoot"], descendants: true }, { propertyName: "virtualScroll", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ngx-gantt-root #ganttRoot>\n  <div class=\"gantt-header\">\n    <gantt-table-header #tableHeader [columns]=\"columns\"></gantt-table-header>\n    <div class=\"gantt-container-header\">\n      <gantt-calendar-header [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"></gantt-calendar-header>\n    </div>\n  </div>\n  <gantt-loader *ngIf=\"loading\"></gantt-loader>\n\n  <cdk-virtual-scroll-viewport\n    class=\"gantt-virtual-scroll-viewport\"\n    [ngClass]=\"{\n      'gantt-normal-viewport': !virtualScrollEnabled,\n      'gantt-scroll-container': virtualScrollEnabled,\n      'with-footer': table?.tableFooterTemplate || footerTemplate\n    }\"\n    [style.top.px]=\"styles.headerHeight\"\n    [itemSize]=\"styles.lineHeight\"\n    [minBufferPx]=\"styles.lineHeight * 10\"\n    [maxBufferPx]=\"styles.lineHeight * 20\"\n    (scrolledIndexChange)=\"scrolledIndexChange($event)\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of flatItems; trackBy: trackBy\"></ng-container>\n    <div class=\"gantt-side\" [style.width.px]=\"tableHeader.tableWidth + 1\" [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\">\n      <div class=\"gantt-side-container\">\n        <div class=\"gantt-table\">\n          <gantt-table-body\n            [flatItems]=\"flatItems\"\n            [viewportItems]=\"viewportItems\"\n            [columns]=\"columns\"\n            [groupTemplate]=\"groupTemplate\"\n            [emptyTemplate]=\"table.tableEmptyTemplate || tableEmptyTemplate\"\n            [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n            [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n            [draggable]=\"table.draggable\"\n            [dropEnterPredicate]=\"table.dropEnterPredicate\"\n            (dragDropped)=\"table.dragDropped.emit($event)\"\n            (dragStarted)=\"itemDragStarted($event)\"\n            (dragEnded)=\"itemDragEnded($event)\"\n            (itemClick)=\"selectItem($event)\"\n          >\n          </gantt-table-body>\n        </div>\n      </div>\n    </div>\n    <div class=\"gantt-container\">\n      <gantt-calendar-grid\n        [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"\n        [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n      ></gantt-calendar-grid>\n      <div class=\"gantt-main\">\n        <gantt-main\n          [flatItems]=\"flatItems\"\n          [viewportItems]=\"viewportItems\"\n          [groupHeaderTemplate]=\"groupHeaderTemplate\"\n          [itemTemplate]=\"itemTemplate\"\n          [barTemplate]=\"barTemplate\"\n          [rangeTemplate]=\"rangeTemplate\"\n          [baselineTemplate]=\"baselineTemplate\"\n          (barClick)=\"barClick.emit($event)\"\n          (lineClick)=\"lineClick.emit($event)\"\n        >\n        </gantt-main>\n      </div>\n    </div>\n  </cdk-virtual-scroll-viewport>\n\n  <gantt-drag-backdrop [style.left.px]=\"tableHeader.tableWidth + 1\"></gantt-drag-backdrop>\n\n  <gantt-scrollbar\n    [ganttRoot]=\"ganttRoot\"\n    [hasFooter]=\"!!table?.tableFooterTemplate\"\n    [tableWidth]=\"tableHeader.tableWidth\"\n  ></gantt-scrollbar>\n\n  <div\n    class=\"gantt-footer\"\n    *ngIf=\"table?.tableFooterTemplate || footerTemplate\"\n    [style.right.px]=\"ganttRoot.verticalScrollbarWidth\"\n    [style.bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n  >\n    <div class=\"gantt-table-footer\" [style.width.px]=\"tableHeader.tableWidth + 1\" *ngIf=\"table?.tableFooterTemplate\">\n      <ng-template [ngTemplateOutlet]=\"table?.tableFooterTemplate\" [ngTemplateOutletContext]=\"{ columns: columns }\"> </ng-template>\n    </div>\n    <div class=\"gantt-container-footer\" *ngIf=\"footerTemplate\">\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\"> </ng-template>\n    </div>\n  </div>\n</ngx-gantt-root>\n", dependencies: [{ kind: "component", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: ["sideWidth"] }, { kind: "component", type: GanttTableHeaderComponent, selector: "gantt-table-header", inputs: ["columns"] }, { kind: "component", type: GanttCalendarHeaderComponent, selector: "gantt-calendar-header" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GanttLoaderComponent, selector: "gantt-loader" }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: GanttTableBodyComponent, selector: "gantt-table-body", inputs: ["viewportItems", "flatItems", "columns", "groupTemplate", "emptyTemplate", "rowBeforeTemplate", "rowAfterTemplate", "draggable", "dropEnterPredicate"], outputs: ["dragDropped", "dragStarted", "dragEnded", "itemClick"] }, { kind: "component", type: GanttCalendarGridComponent, selector: "gantt-calendar-grid" }, { kind: "component", type: GanttMainComponent, selector: "gantt-main", inputs: ["viewportItems", "flatItems", "groupHeaderTemplate", "itemTemplate", "barTemplate", "rangeTemplate", "baselineTemplate"], outputs: ["barClick", "lineClick"] }, { kind: "component", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }, { kind: "component", type: GanttScrollbarComponent, selector: "gantt-scrollbar", inputs: ["hasFooter", "tableWidth", "ganttRoot"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "table", first: true, predicate: NgxGanttTableComponent, descendants: true }, { propertyName: "tableEmptyTemplate", first: true, predicate: ["tableEmpty"], descendants: true, static: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true, static: true }, { propertyName: "columns", predicate: NgxGanttTableColumnComponent, descendants: true }], viewQueries: [{ propertyName: "ganttRoot", first: true, predicate: ["ganttRoot"], descendants: true }, { propertyName: "virtualScroll", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ngx-gantt-root #ganttRoot>\n  <div class=\"gantt-header\">\n    <gantt-table-header #tableHeader [columns]=\"columns\"></gantt-table-header>\n    <div class=\"gantt-container-header\">\n      <gantt-calendar-header [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"></gantt-calendar-header>\n    </div>\n  </div>\n  <gantt-loader *ngIf=\"loading\"></gantt-loader>\n\n  <cdk-virtual-scroll-viewport\n    class=\"gantt-virtual-scroll-viewport\"\n    [ngClass]=\"{\n      'gantt-normal-viewport': !virtualScrollEnabled,\n      'gantt-scroll-container': virtualScrollEnabled,\n      'with-footer': table?.tableFooterTemplate || footerTemplate\n    }\"\n    [style.top.px]=\"styles.headerHeight\"\n    [itemSize]=\"styles.lineHeight\"\n    [minBufferPx]=\"styles.lineHeight * 10\"\n    [maxBufferPx]=\"styles.lineHeight * 20\"\n    (scrolledIndexChange)=\"scrolledIndexChange($event)\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of flatItems; trackBy: trackBy\"></ng-container>\n    <div class=\"gantt-side\" [style.width.px]=\"tableHeader.tableWidth + 1\" [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\">\n      <div class=\"gantt-side-container\">\n        <div class=\"gantt-table\">\n          <gantt-table-body\n            [flatItems]=\"flatItems\"\n            [viewportItems]=\"viewportItems\"\n            [columns]=\"columns\"\n            [groupTemplate]=\"groupTemplate\"\n            [emptyTemplate]=\"table.tableEmptyTemplate || tableEmptyTemplate\"\n            [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n            [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n            [draggable]=\"table.draggable\"\n            [dropEnterPredicate]=\"table.dropEnterPredicate\"\n            (dragDropped)=\"table.dragDropped.emit($event)\"\n            (dragStarted)=\"itemDragStarted($event)\"\n            (dragEnded)=\"itemDragEnded($event)\"\n            (itemClick)=\"selectItem($event)\"\n          >\n          </gantt-table-body>\n        </div>\n      </div>\n    </div>\n    <div class=\"gantt-container\">\n      <gantt-calendar-grid\n        [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"\n        [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n      ></gantt-calendar-grid>\n      <div class=\"gantt-main\">\n        <gantt-main\n          [ganttRoot]=\"ganttRoot\"\n          [flatItems]=\"flatItems\"\n          [viewportItems]=\"viewportItems\"\n          [groupHeaderTemplate]=\"groupHeaderTemplate\"\n          [itemTemplate]=\"itemTemplate\"\n          [barTemplate]=\"barTemplate\"\n          [rangeTemplate]=\"rangeTemplate\"\n          [baselineTemplate]=\"baselineTemplate\"\n          [quickTimeFocus]=\"quickTimeFocus\"\n          (barClick)=\"barClick.emit($event)\"\n          (lineClick)=\"lineClick.emit($event)\"\n        >\n        </gantt-main>\n      </div>\n    </div>\n  </cdk-virtual-scroll-viewport>\n\n  <gantt-drag-backdrop [style.left.px]=\"tableHeader.tableWidth + 1\"></gantt-drag-backdrop>\n\n  <gantt-scrollbar\n    [ganttRoot]=\"ganttRoot\"\n    [hasFooter]=\"!!table?.tableFooterTemplate\"\n    [tableWidth]=\"tableHeader.tableWidth\"\n  ></gantt-scrollbar>\n\n  <div\n    class=\"gantt-footer\"\n    *ngIf=\"table?.tableFooterTemplate || footerTemplate\"\n    [style.right.px]=\"ganttRoot.verticalScrollbarWidth\"\n    [style.bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n  >\n    <div class=\"gantt-table-footer\" [style.width.px]=\"tableHeader.tableWidth + 1\" *ngIf=\"table?.tableFooterTemplate\">\n      <ng-template [ngTemplateOutlet]=\"table?.tableFooterTemplate\" [ngTemplateOutletContext]=\"{ columns: columns }\"> </ng-template>\n    </div>\n    <div class=\"gantt-container-footer\" *ngIf=\"footerTemplate\">\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\"> </ng-template>\n    </div>\n  </div>\n</ngx-gantt-root>\n", dependencies: [{ kind: "component", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: ["sideWidth"] }, { kind: "component", type: GanttTableHeaderComponent, selector: "gantt-table-header", inputs: ["columns"] }, { kind: "component", type: GanttCalendarHeaderComponent, selector: "gantt-calendar-header" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GanttLoaderComponent, selector: "gantt-loader" }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: GanttTableBodyComponent, selector: "gantt-table-body", inputs: ["viewportItems", "flatItems", "columns", "groupTemplate", "emptyTemplate", "rowBeforeTemplate", "rowAfterTemplate", "draggable", "dropEnterPredicate"], outputs: ["dragDropped", "dragStarted", "dragEnded", "itemClick"] }, { kind: "component", type: GanttCalendarGridComponent, selector: "gantt-calendar-grid" }, { kind: "component", type: GanttMainComponent, selector: "gantt-main", inputs: ["viewportItems", "flatItems", "groupHeaderTemplate", "itemTemplate", "barTemplate", "rangeTemplate", "baselineTemplate", "ganttRoot", "quickTimeFocus"], outputs: ["barClick", "lineClick"] }, { kind: "component", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }, { kind: "component", type: GanttScrollbarComponent, selector: "gantt-scrollbar", inputs: ["hasFooter", "tableWidth", "ganttRoot"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgxGanttComponent, decorators: [{
             type: Component,
@@ -4360,8 +4761,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         GanttMainComponent,
                         GanttDragBackdropComponent,
                         GanttScrollbarComponent,
-                        NgTemplateOutlet
-                    ], template: "<ngx-gantt-root #ganttRoot>\n  <div class=\"gantt-header\">\n    <gantt-table-header #tableHeader [columns]=\"columns\"></gantt-table-header>\n    <div class=\"gantt-container-header\">\n      <gantt-calendar-header [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"></gantt-calendar-header>\n    </div>\n  </div>\n  <gantt-loader *ngIf=\"loading\"></gantt-loader>\n\n  <cdk-virtual-scroll-viewport\n    class=\"gantt-virtual-scroll-viewport\"\n    [ngClass]=\"{\n      'gantt-normal-viewport': !virtualScrollEnabled,\n      'gantt-scroll-container': virtualScrollEnabled,\n      'with-footer': table?.tableFooterTemplate || footerTemplate\n    }\"\n    [style.top.px]=\"styles.headerHeight\"\n    [itemSize]=\"styles.lineHeight\"\n    [minBufferPx]=\"styles.lineHeight * 10\"\n    [maxBufferPx]=\"styles.lineHeight * 20\"\n    (scrolledIndexChange)=\"scrolledIndexChange($event)\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of flatItems; trackBy: trackBy\"></ng-container>\n    <div class=\"gantt-side\" [style.width.px]=\"tableHeader.tableWidth + 1\" [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\">\n      <div class=\"gantt-side-container\">\n        <div class=\"gantt-table\">\n          <gantt-table-body\n            [flatItems]=\"flatItems\"\n            [viewportItems]=\"viewportItems\"\n            [columns]=\"columns\"\n            [groupTemplate]=\"groupTemplate\"\n            [emptyTemplate]=\"table.tableEmptyTemplate || tableEmptyTemplate\"\n            [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n            [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n            [draggable]=\"table.draggable\"\n            [dropEnterPredicate]=\"table.dropEnterPredicate\"\n            (dragDropped)=\"table.dragDropped.emit($event)\"\n            (dragStarted)=\"itemDragStarted($event)\"\n            (dragEnded)=\"itemDragEnded($event)\"\n            (itemClick)=\"selectItem($event)\"\n          >\n          </gantt-table-body>\n        </div>\n      </div>\n    </div>\n    <div class=\"gantt-container\">\n      <gantt-calendar-grid\n        [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"\n        [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n      ></gantt-calendar-grid>\n      <div class=\"gantt-main\">\n        <gantt-main\n          [flatItems]=\"flatItems\"\n          [viewportItems]=\"viewportItems\"\n          [groupHeaderTemplate]=\"groupHeaderTemplate\"\n          [itemTemplate]=\"itemTemplate\"\n          [barTemplate]=\"barTemplate\"\n          [rangeTemplate]=\"rangeTemplate\"\n          [baselineTemplate]=\"baselineTemplate\"\n          (barClick)=\"barClick.emit($event)\"\n          (lineClick)=\"lineClick.emit($event)\"\n        >\n        </gantt-main>\n      </div>\n    </div>\n  </cdk-virtual-scroll-viewport>\n\n  <gantt-drag-backdrop [style.left.px]=\"tableHeader.tableWidth + 1\"></gantt-drag-backdrop>\n\n  <gantt-scrollbar\n    [ganttRoot]=\"ganttRoot\"\n    [hasFooter]=\"!!table?.tableFooterTemplate\"\n    [tableWidth]=\"tableHeader.tableWidth\"\n  ></gantt-scrollbar>\n\n  <div\n    class=\"gantt-footer\"\n    *ngIf=\"table?.tableFooterTemplate || footerTemplate\"\n    [style.right.px]=\"ganttRoot.verticalScrollbarWidth\"\n    [style.bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n  >\n    <div class=\"gantt-table-footer\" [style.width.px]=\"tableHeader.tableWidth + 1\" *ngIf=\"table?.tableFooterTemplate\">\n      <ng-template [ngTemplateOutlet]=\"table?.tableFooterTemplate\" [ngTemplateOutletContext]=\"{ columns: columns }\"> </ng-template>\n    </div>\n    <div class=\"gantt-container-footer\" *ngIf=\"footerTemplate\">\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\"> </ng-template>\n    </div>\n  </div>\n</ngx-gantt-root>\n" }]
+                        NgTemplateOutlet,
+                        NgFor
+                    ], template: "<ngx-gantt-root #ganttRoot>\n  <div class=\"gantt-header\">\n    <gantt-table-header #tableHeader [columns]=\"columns\"></gantt-table-header>\n    <div class=\"gantt-container-header\">\n      <gantt-calendar-header [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"></gantt-calendar-header>\n    </div>\n  </div>\n  <gantt-loader *ngIf=\"loading\"></gantt-loader>\n\n  <cdk-virtual-scroll-viewport\n    class=\"gantt-virtual-scroll-viewport\"\n    [ngClass]=\"{\n      'gantt-normal-viewport': !virtualScrollEnabled,\n      'gantt-scroll-container': virtualScrollEnabled,\n      'with-footer': table?.tableFooterTemplate || footerTemplate\n    }\"\n    [style.top.px]=\"styles.headerHeight\"\n    [itemSize]=\"styles.lineHeight\"\n    [minBufferPx]=\"styles.lineHeight * 10\"\n    [maxBufferPx]=\"styles.lineHeight * 20\"\n    (scrolledIndexChange)=\"scrolledIndexChange($event)\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of flatItems; trackBy: trackBy\"></ng-container>\n    <div class=\"gantt-side\" [style.width.px]=\"tableHeader.tableWidth + 1\" [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\">\n      <div class=\"gantt-side-container\">\n        <div class=\"gantt-table\">\n          <gantt-table-body\n            [flatItems]=\"flatItems\"\n            [viewportItems]=\"viewportItems\"\n            [columns]=\"columns\"\n            [groupTemplate]=\"groupTemplate\"\n            [emptyTemplate]=\"table.tableEmptyTemplate || tableEmptyTemplate\"\n            [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n            [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n            [draggable]=\"table.draggable\"\n            [dropEnterPredicate]=\"table.dropEnterPredicate\"\n            (dragDropped)=\"table.dragDropped.emit($event)\"\n            (dragStarted)=\"itemDragStarted($event)\"\n            (dragEnded)=\"itemDragEnded($event)\"\n            (itemClick)=\"selectItem($event)\"\n          >\n          </gantt-table-body>\n        </div>\n      </div>\n    </div>\n    <div class=\"gantt-container\">\n      <gantt-calendar-grid\n        [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"\n        [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n      ></gantt-calendar-grid>\n      <div class=\"gantt-main\">\n        <gantt-main\n          [ganttRoot]=\"ganttRoot\"\n          [flatItems]=\"flatItems\"\n          [viewportItems]=\"viewportItems\"\n          [groupHeaderTemplate]=\"groupHeaderTemplate\"\n          [itemTemplate]=\"itemTemplate\"\n          [barTemplate]=\"barTemplate\"\n          [rangeTemplate]=\"rangeTemplate\"\n          [baselineTemplate]=\"baselineTemplate\"\n          [quickTimeFocus]=\"quickTimeFocus\"\n          (barClick)=\"barClick.emit($event)\"\n          (lineClick)=\"lineClick.emit($event)\"\n        >\n        </gantt-main>\n      </div>\n    </div>\n  </cdk-virtual-scroll-viewport>\n\n  <gantt-drag-backdrop [style.left.px]=\"tableHeader.tableWidth + 1\"></gantt-drag-backdrop>\n\n  <gantt-scrollbar\n    [ganttRoot]=\"ganttRoot\"\n    [hasFooter]=\"!!table?.tableFooterTemplate\"\n    [tableWidth]=\"tableHeader.tableWidth\"\n  ></gantt-scrollbar>\n\n  <div\n    class=\"gantt-footer\"\n    *ngIf=\"table?.tableFooterTemplate || footerTemplate\"\n    [style.right.px]=\"ganttRoot.verticalScrollbarWidth\"\n    [style.bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n  >\n    <div class=\"gantt-table-footer\" [style.width.px]=\"tableHeader.tableWidth + 1\" *ngIf=\"table?.tableFooterTemplate\">\n      <ng-template [ngTemplateOutlet]=\"table?.tableFooterTemplate\" [ngTemplateOutletContext]=\"{ columns: columns }\"> </ng-template>\n    </div>\n    <div class=\"gantt-container-footer\" *ngIf=\"footerTemplate\">\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\"> </ng-template>\n    </div>\n  </div>\n</ngx-gantt-root>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$1.ViewportRuler }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [GANTT_GLOBAL_CONFIG]
@@ -4410,13 +4812,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             }] } });
 
 class NgxGanttModule {
-    constructor(ganttGlobalConfig) {
+    constructor() {
+        const configService = inject(GanttConfigService);
         setDefaultOptions({
-            locale: ganttGlobalConfig?.dateOptions?.locale,
-            weekStartsOn: ganttGlobalConfig?.dateOptions?.weekStartsOn || 1
+            locale: configService.getDateLocal(),
+            weekStartsOn: configService.config?.dateOptions?.weekStartsOn
         });
+        if (configService.config.dateOptions?.timeZone) {
+            setDefaultTimeZone$1(configService.config.dateOptions.timeZone);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgxGanttModule, deps: [{ token: GANTT_GLOBAL_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgxGanttModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: NgxGanttModule, imports: [CommonModule,
             DragDropModule,
             ScrollingModule,
@@ -4440,7 +4846,8 @@ class NgxGanttModule {
             GanttScrollbarComponent,
             IsGanttRangeItemPipe,
             IsGanttBarItemPipe,
-            IsGanttCustomItemPipe], exports: [NgxGanttComponent,
+            IsGanttCustomItemPipe,
+            GanttDateFormatPipe], exports: [NgxGanttComponent,
             NgxGanttTableComponent,
             NgxGanttTableColumnComponent,
             NgxGanttRootComponent,
@@ -4451,13 +4858,15 @@ class NgxGanttModule {
             GanttCalendarHeaderComponent,
             GanttCalendarGridComponent,
             GanttDragBackdropComponent,
-            GanttScrollbarComponent] }); }
+            GanttScrollbarComponent,
+            GanttDateFormatPipe] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgxGanttModule, providers: [
             CdkVirtualScrollViewport,
             {
                 provide: GANTT_GLOBAL_CONFIG,
                 useValue: defaultConfig
-            }
+            },
+            ...i18nLocaleProvides
         ], imports: [CommonModule,
             DragDropModule,
             ScrollingModule,
@@ -4490,7 +4899,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         GanttScrollbarComponent,
                         IsGanttRangeItemPipe,
                         IsGanttBarItemPipe,
-                        IsGanttCustomItemPipe
+                        IsGanttCustomItemPipe,
+                        GanttDateFormatPipe
                     ],
                     exports: [
                         NgxGanttComponent,
@@ -4504,22 +4914,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         GanttCalendarHeaderComponent,
                         GanttCalendarGridComponent,
                         GanttDragBackdropComponent,
-                        GanttScrollbarComponent
+                        GanttScrollbarComponent,
+                        GanttDateFormatPipe
                     ],
                     providers: [
                         CdkVirtualScrollViewport,
                         {
                             provide: GANTT_GLOBAL_CONFIG,
                             useValue: defaultConfig
-                        }
+                        },
+                        ...i18nLocaleProvides
                     ]
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [GANTT_GLOBAL_CONFIG]
-                }] }] });
+        }], ctorParameters: () => [] });
 
 /*
  * Public API Surface of gantt
@@ -4529,5 +4936,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { GANTT_GLOBAL_CONFIG, GANTT_UPPER_TOKEN, GanttBarClickEvent, GanttBaselineItemInternal, GanttCalendarGridComponent, GanttCalendarHeaderComponent, GanttDate, GanttDatePoint, GanttDragBackdropComponent, GanttDragEvent, GanttGroupInternal, GanttItemInternal, GanttItemType, GanttItemUpper, GanttLineClickEvent, GanttLinkDragEvent, GanttLinkLineType, GanttLinkType, GanttLoadOnScrollEvent, GanttLoaderComponent, GanttPrintService, GanttScrollbarComponent, GanttSelectedEvent, GanttTableDragDroppedEvent, GanttTableDragEndedEvent, GanttTableDragEnterPredicateContext, GanttTableDragStartedEvent, GanttTableEvent, GanttUpper, GanttView, GanttViewType, GanttVirtualScrolledIndexChangeEvent, IsGanttBarItemPipe, IsGanttCustomItemPipe, IsGanttRangeItemPipe, LinkColors, NgxGanttBarComponent, NgxGanttBaselineComponent, NgxGanttComponent, NgxGanttModule, NgxGanttRangeComponent, NgxGanttRootComponent, NgxGanttTableColumnComponent, NgxGanttTableComponent, NgxGanttToolbarComponent, defaultConfig, ganttViews, primaryDatePointTop, registerView, secondaryDatePointTop };
+export { GANTT_GLOBAL_CONFIG, GANTT_I18N_LOCALE_TOKEN, GANTT_UPPER_TOKEN, GanttBarClickEvent, GanttBaselineItemInternal, GanttCalendarGridComponent, GanttCalendarHeaderComponent, GanttConfigService, GanttDate, GanttDateFormatPipe, 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, IsGanttRangeItemPipe, LinkColors, NgxGanttBarComponent, NgxGanttBaselineComponent, NgxGanttComponent, NgxGanttModule, NgxGanttRangeComponent, NgxGanttRootComponent, NgxGanttTableColumnComponent, NgxGanttTableComponent, NgxGanttToolbarComponent, deDeLocale, defaultConfig, enUsLocale, jaJpLocale, primaryDatePointTop, registerView, ruRuLocale, secondaryDatePointTop, setDefaultTimeZone, zhHans as zhHansLocale, zhHant as zhHantLocale };
 //# sourceMappingURL=worktile-gantt.mjs.map