@worktile/gantt 19.0.6-0 → 19.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/class/date-point.d.ts +2 -1
- package/components/calendar/calendar.scss +8 -3
- package/components/table/body/gantt-table-body.component.d.ts +2 -9
- package/directives/sync-scroll.directive.d.ts +22 -0
- package/fesm2022/worktile-gantt.mjs +131 -90
- package/fesm2022/worktile-gantt.mjs.map +1 -1
- package/gantt-dom.service.d.ts +0 -2
- package/gantt-sync-scroll.service.d.ts +11 -0
- package/gantt.component.scss +0 -1
- package/package.json +1 -1
- package/views/day.d.ts +0 -1
- package/views/hour.d.ts +0 -1
- package/views/view.d.ts +0 -1
|
@@ -4,11 +4,11 @@ import * as i1$1 from '@angular/cdk/scrolling';
|
|
|
4
4
|
import { CdkScrollable, CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf, ScrollingModule } from '@angular/cdk/scrolling';
|
|
5
5
|
import { isPlatformServer, NgTemplateOutlet, NgStyle, NgClass, DOCUMENT, CommonModule } from '@angular/common';
|
|
6
6
|
import * as i0 from '@angular/core';
|
|
7
|
-
import { InjectionToken, inject, Inject, Injectable, EventEmitter, HostBinding, ContentChild, Output, Input, Directive, signal, PLATFORM_ID, effect, ViewChildren, ViewChild, Component, Pipe, input, ElementRef, HostListener, Optional, forwardRef, ContentChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
|
|
7
|
+
import { InjectionToken, inject, Inject, Injectable, EventEmitter, HostBinding, ContentChild, Output, Input, Directive, signal, PLATFORM_ID, effect, ViewChildren, ViewChild, Component, Pipe, NgZone, input, ElementRef, HostListener, Optional, forwardRef, ContentChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
|
|
8
|
+
import { BehaviorSubject, Subject, from, fromEvent, Observable, merge, EMPTY, interval, animationFrameScheduler, take as take$1, takeUntil as takeUntil$1, combineLatest, startWith as startWith$1, auditTime as auditTime$1, filter } from 'rxjs';
|
|
9
|
+
import { take, takeUntil, skip, map, pairwise, auditTime, startWith, switchMap, debounceTime, finalize } from 'rxjs/operators';
|
|
8
10
|
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';
|
|
9
11
|
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';
|
|
10
|
-
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';
|
|
11
|
-
import { take, takeUntil, skip, map, pairwise, auditTime, startWith, switchMap, debounceTime, finalize } from 'rxjs/operators';
|
|
12
12
|
import { TZDate } from '@date-fns/tz';
|
|
13
13
|
import { de, ru } from 'date-fns/locale';
|
|
14
14
|
import { SelectionModel } from '@angular/cdk/collections';
|
|
@@ -16,13 +16,16 @@ import { coerceBooleanProperty, coerceCssPixelValue } from '@angular/cdk/coercio
|
|
|
16
16
|
import { __decorate, __param } from 'tslib';
|
|
17
17
|
|
|
18
18
|
class GanttDatePoint {
|
|
19
|
-
constructor(start, text, x, y, additions, style
|
|
19
|
+
constructor(start, text, x, y, additions, style,
|
|
20
|
+
// set fill color
|
|
21
|
+
fill) {
|
|
20
22
|
this.start = start;
|
|
21
23
|
this.text = text;
|
|
22
24
|
this.x = x;
|
|
23
25
|
this.y = y;
|
|
24
26
|
this.additions = additions;
|
|
25
27
|
this.style = style;
|
|
28
|
+
this.fill = fill;
|
|
26
29
|
}
|
|
27
30
|
}
|
|
28
31
|
|
|
@@ -960,7 +963,6 @@ const viewOptions$3 = {
|
|
|
960
963
|
class GanttViewDay extends GanttView {
|
|
961
964
|
constructor(start, end, options) {
|
|
962
965
|
super(start, end, Object.assign({}, viewOptions$3, options));
|
|
963
|
-
this.showWeekBackdrop = true;
|
|
964
966
|
this.showTimeline = false;
|
|
965
967
|
this.viewType = GanttViewType.day;
|
|
966
968
|
}
|
|
@@ -1111,7 +1113,6 @@ const viewOptions = {
|
|
|
1111
1113
|
class GanttViewHour extends GanttView {
|
|
1112
1114
|
constructor(start, end, options) {
|
|
1113
1115
|
super(start, end, Object.assign({}, viewOptions, options));
|
|
1114
|
-
this.showWeekBackdrop = true;
|
|
1115
1116
|
this.showTimeline = true;
|
|
1116
1117
|
this.viewType = GanttViewType.hour;
|
|
1117
1118
|
}
|
|
@@ -1307,6 +1308,10 @@ class GanttConfigService {
|
|
|
1307
1308
|
if (this.config.dateOptions?.timeZone) {
|
|
1308
1309
|
setDefaultTimeZone(this.config.dateOptions.timeZone);
|
|
1309
1310
|
}
|
|
1311
|
+
setDefaultOptions({
|
|
1312
|
+
locale: this.getDateLocale(),
|
|
1313
|
+
weekStartsOn: this.config?.dateOptions?.weekStartsOn
|
|
1314
|
+
});
|
|
1310
1315
|
}
|
|
1311
1316
|
setLocale(locale) {
|
|
1312
1317
|
this.config.locale = locale;
|
|
@@ -1412,7 +1417,7 @@ class GanttUpper {
|
|
|
1412
1417
|
this.view = createViewFactory(this.viewType, viewDate.start, viewDate.end, this.viewOptions);
|
|
1413
1418
|
}
|
|
1414
1419
|
setupGroups() {
|
|
1415
|
-
const collapsedIds = this.
|
|
1420
|
+
const collapsedIds = this.originGroups.filter((group) => group.expanded === false).map((group) => group.id);
|
|
1416
1421
|
this.groupsMap = {};
|
|
1417
1422
|
this.groups = [];
|
|
1418
1423
|
this.originGroups.forEach((origin) => {
|
|
@@ -1898,38 +1903,6 @@ class GanttDomService {
|
|
|
1898
1903
|
this.visibleRangeX = signal({ min: 0, max: 0 });
|
|
1899
1904
|
this.unsubscribe$ = new Subject();
|
|
1900
1905
|
}
|
|
1901
|
-
monitorScrollChange() {
|
|
1902
|
-
const scrollObservers = [
|
|
1903
|
-
fromEvent(this.mainContainer, 'scroll', passiveListenerOptions),
|
|
1904
|
-
fromEvent(this.sideContainer, 'scroll', passiveListenerOptions)
|
|
1905
|
-
];
|
|
1906
|
-
this.mainFooter && scrollObservers.push(fromEvent(this.mainFooter, 'scroll', passiveListenerOptions));
|
|
1907
|
-
this.mainScrollbar && scrollObservers.push(fromEvent(this.mainScrollbar, 'scroll', passiveListenerOptions));
|
|
1908
|
-
this.ngZone.runOutsideAngular(() => merge(...scrollObservers)
|
|
1909
|
-
.pipe(takeUntil(this.unsubscribe$))
|
|
1910
|
-
.subscribe((event) => {
|
|
1911
|
-
this.syncScroll(event);
|
|
1912
|
-
}));
|
|
1913
|
-
}
|
|
1914
|
-
syncScroll(event) {
|
|
1915
|
-
const target = event.currentTarget;
|
|
1916
|
-
const classList = target.classList;
|
|
1917
|
-
if (!classList.contains('gantt-side-container')) {
|
|
1918
|
-
this.mainContainer.scrollLeft = target.scrollLeft;
|
|
1919
|
-
this.calendarHeader.scrollLeft = target.scrollLeft;
|
|
1920
|
-
this.calendarOverlay.scrollLeft = target.scrollLeft;
|
|
1921
|
-
this.mainScrollbar && (this.mainScrollbar.scrollLeft = target.scrollLeft);
|
|
1922
|
-
this.mainFooter && (this.mainFooter.scrollLeft = target.scrollLeft);
|
|
1923
|
-
if (classList.contains('gantt-main-container')) {
|
|
1924
|
-
this.sideContainer.scrollTop = target.scrollTop;
|
|
1925
|
-
this.mainContainer.scrollTop = target.scrollTop;
|
|
1926
|
-
}
|
|
1927
|
-
}
|
|
1928
|
-
else {
|
|
1929
|
-
this.sideContainer.scrollTop = target.scrollTop;
|
|
1930
|
-
this.mainContainer.scrollTop = target.scrollTop;
|
|
1931
|
-
}
|
|
1932
|
-
}
|
|
1933
1906
|
disableBrowserWheelEvent() {
|
|
1934
1907
|
const container = this.mainContainer;
|
|
1935
1908
|
this.ngZone.runOutsideAngular(() => fromEvent(container, 'wheel')
|
|
@@ -1959,7 +1932,6 @@ class GanttDomService {
|
|
|
1959
1932
|
this.mainItems = mainItems || mainGroups;
|
|
1960
1933
|
this.calendarHeader = this.root.getElementsByClassName('gantt-calendar-header')[0];
|
|
1961
1934
|
this.calendarOverlay = this.root.getElementsByClassName('gantt-calendar-grid')[0];
|
|
1962
|
-
this.monitorScrollChange();
|
|
1963
1935
|
this.disableBrowserWheelEvent();
|
|
1964
1936
|
}
|
|
1965
1937
|
/**
|
|
@@ -2849,11 +2821,11 @@ class GanttCalendarGridComponent {
|
|
|
2849
2821
|
this.unsubscribe$.complete();
|
|
2850
2822
|
}
|
|
2851
2823
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttCalendarGridComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2852
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: GanttCalendarGridComponent, isStandalone: true, selector: "gantt-calendar-grid", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n @if (ganttUpper.showTodayLine) {\n
|
|
2824
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: GanttCalendarGridComponent, isStandalone: true, selector: "gantt-calendar-grid", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n @if (ganttUpper.showTodayLine) {\n <span class=\"today-line\"> </span>\n }\n</div>\n<svg class=\"gantt-calendar-grid-fill\" [attr.width]=\"view.width\" [attr.height]=\"1\">\n <g>\n @for (point of view.secondaryDatePoints; track point.x) {\n @if (point.fill) {\n <rect [attr.x]=\"$index * view.cellWidth\" y=\"0\" [attr.width]=\"view.cellWidth\" [attr.height]=\"mainHeight\" [attr.fill]=\"point.fill\" />\n }\n }\n </g>\n</svg>\n\n<svg class=\"gantt-calendar-grid-main\" [attr.width]=\"view.width\" [attr.height]=\"ganttUpper.styles.headerHeight - 1\">\n <g>\n @if (view.showTimeline) {\n <g>\n @for (point of view.secondaryDatePoints; track point.x) {\n <line\n [attr.x1]=\"($index + 1) * view.cellWidth\"\n [attr.x2]=\"($index + 1) * view.cellWidth\"\n [attr.y1]=\"0\"\n [attr.y2]=\"mainHeight\"\n class=\"secondary-line\"\n ></line>\n }\n </g>\n }\n <g>\n @for (point of view.primaryDatePoints; track point.x) {\n <line\n [attr.x1]=\"($index + 1) * view.primaryWidth\"\n [attr.x2]=\"($index + 1) * view.primaryWidth\"\n [attr.y1]=\"0\"\n [attr.y2]=\"mainHeight\"\n class=\"primary-line\"\n ></line>\n }\n </g>\n </g>\n</svg>\n" }); }
|
|
2853
2825
|
}
|
|
2854
2826
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttCalendarGridComponent, decorators: [{
|
|
2855
2827
|
type: Component,
|
|
2856
|
-
args: [{ selector: 'gantt-calendar-grid', standalone: true, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n @if (ganttUpper.showTodayLine) {\n
|
|
2828
|
+
args: [{ selector: 'gantt-calendar-grid', standalone: true, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n @if (ganttUpper.showTodayLine) {\n <span class=\"today-line\"> </span>\n }\n</div>\n<svg class=\"gantt-calendar-grid-fill\" [attr.width]=\"view.width\" [attr.height]=\"1\">\n <g>\n @for (point of view.secondaryDatePoints; track point.x) {\n @if (point.fill) {\n <rect [attr.x]=\"$index * view.cellWidth\" y=\"0\" [attr.width]=\"view.cellWidth\" [attr.height]=\"mainHeight\" [attr.fill]=\"point.fill\" />\n }\n }\n </g>\n</svg>\n\n<svg class=\"gantt-calendar-grid-main\" [attr.width]=\"view.width\" [attr.height]=\"ganttUpper.styles.headerHeight - 1\">\n <g>\n @if (view.showTimeline) {\n <g>\n @for (point of view.secondaryDatePoints; track point.x) {\n <line\n [attr.x1]=\"($index + 1) * view.cellWidth\"\n [attr.x2]=\"($index + 1) * view.cellWidth\"\n [attr.y1]=\"0\"\n [attr.y2]=\"mainHeight\"\n class=\"secondary-line\"\n ></line>\n }\n </g>\n }\n <g>\n @for (point of view.primaryDatePoints; track point.x) {\n <line\n [attr.x1]=\"($index + 1) * view.primaryWidth\"\n [attr.x2]=\"($index + 1) * view.primaryWidth\"\n [attr.y1]=\"0\"\n [attr.y2]=\"mainHeight\"\n class=\"primary-line\"\n ></line>\n }\n </g>\n </g>\n</svg>\n" }]
|
|
2857
2829
|
}], ctorParameters: () => [{ type: GanttUpper, decorators: [{
|
|
2858
2830
|
type: Inject,
|
|
2859
2831
|
args: [GANTT_UPPER_TOKEN]
|
|
@@ -2905,11 +2877,11 @@ class GanttCalendarHeaderComponent {
|
|
|
2905
2877
|
}
|
|
2906
2878
|
}
|
|
2907
2879
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttCalendarHeaderComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2908
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: GanttCalendarHeaderComponent, isStandalone: true, selector: "gantt-calendar-header", host: { properties: { "class": "this.className", "style.height": "this.height" } }, ngImport: i0, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n</div>\n<svg [attr.width]=\"view.width\" [attr.height]=\"ganttUpper.styles.headerHeight\">\n <g>\n @for (point of view.
|
|
2880
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: GanttCalendarHeaderComponent, isStandalone: true, selector: "gantt-calendar-header", host: { properties: { "class": "this.className", "style.height": "this.height" } }, ngImport: i0, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n</div>\n<svg [attr.width]=\"view.width\" [attr.height]=\"ganttUpper.styles.headerHeight\">\n <g>\n @for (point of view.secondaryDatePoints; track point.x) {\n @if (point.fill) {\n <rect\n [attr.x]=\"$index * view.cellWidth\"\n y=\"0\"\n [attr.width]=\"view.cellWidth\"\n [attr.height]=\"ganttUpper.styles.headerHeight\"\n [attr.fill]=\"point.fill\"\n />\n }\n <text\n class=\"secondary-text\"\n [ngStyle]=\"point.style\"\n [class.today]=\"point.additions?.isToday\"\n [class.weekend]=\"point.additions?.isWeekend\"\n [attr.x]=\"point.x\"\n [attr.y]=\"point.y\"\n >\n {{ point.text }}\n </text>\n }\n\n @for (point of view.primaryDatePoints; track point.x) {\n <text\n class=\"primary-text\"\n [ngStyle]=\"point.style\"\n [class.today]=\"point.additions?.isToday\"\n [class.weekend]=\"point.additions?.isWeekend\"\n [attr.x]=\"point.x\"\n [attr.y]=\"point.y\"\n >\n {{ point.text }}\n </text>\n }\n\n <g>\n @for (point of view.primaryDatePoints; track point.x) {\n <line\n [attr.x1]=\"($index + 1) * view.primaryWidth\"\n [attr.x2]=\"($index + 1) * view.primaryWidth\"\n [attr.y1]=\"0\"\n [attr.y2]=\"ganttUpper.styles.headerHeight\"\n class=\"primary-line\"\n ></line>\n }\n </g>\n\n <g>\n <line\n [attr.x1]=\"0\"\n [attr.x2]=\"view.width\"\n [attr.y1]=\"ganttUpper.styles.headerHeight\"\n [attr.y2]=\"ganttUpper.styles.headerHeight\"\n class=\"header-line\"\n ></line>\n </g>\n </g>\n</svg>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
2909
2881
|
}
|
|
2910
2882
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttCalendarHeaderComponent, decorators: [{
|
|
2911
2883
|
type: Component,
|
|
2912
|
-
args: [{ selector: 'gantt-calendar-header', imports: [NgStyle], template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n</div>\n<svg [attr.width]=\"view.width\" [attr.height]=\"ganttUpper.styles.headerHeight\">\n <g>\n @for (point of view.
|
|
2884
|
+
args: [{ selector: 'gantt-calendar-header', imports: [NgStyle], template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n</div>\n<svg [attr.width]=\"view.width\" [attr.height]=\"ganttUpper.styles.headerHeight\">\n <g>\n @for (point of view.secondaryDatePoints; track point.x) {\n @if (point.fill) {\n <rect\n [attr.x]=\"$index * view.cellWidth\"\n y=\"0\"\n [attr.width]=\"view.cellWidth\"\n [attr.height]=\"ganttUpper.styles.headerHeight\"\n [attr.fill]=\"point.fill\"\n />\n }\n <text\n class=\"secondary-text\"\n [ngStyle]=\"point.style\"\n [class.today]=\"point.additions?.isToday\"\n [class.weekend]=\"point.additions?.isWeekend\"\n [attr.x]=\"point.x\"\n [attr.y]=\"point.y\"\n >\n {{ point.text }}\n </text>\n }\n\n @for (point of view.primaryDatePoints; track point.x) {\n <text\n class=\"primary-text\"\n [ngStyle]=\"point.style\"\n [class.today]=\"point.additions?.isToday\"\n [class.weekend]=\"point.additions?.isWeekend\"\n [attr.x]=\"point.x\"\n [attr.y]=\"point.y\"\n >\n {{ point.text }}\n </text>\n }\n\n <g>\n @for (point of view.primaryDatePoints; track point.x) {\n <line\n [attr.x1]=\"($index + 1) * view.primaryWidth\"\n [attr.x2]=\"($index + 1) * view.primaryWidth\"\n [attr.y1]=\"0\"\n [attr.y2]=\"ganttUpper.styles.headerHeight\"\n class=\"primary-line\"\n ></line>\n }\n </g>\n\n <g>\n <line\n [attr.x1]=\"0\"\n [attr.x2]=\"view.width\"\n [attr.y1]=\"ganttUpper.styles.headerHeight\"\n [attr.y2]=\"ganttUpper.styles.headerHeight\"\n class=\"header-line\"\n ></line>\n </g>\n </g>\n</svg>\n" }]
|
|
2913
2885
|
}], ctorParameters: () => [{ type: GanttUpper, decorators: [{
|
|
2914
2886
|
type: Inject,
|
|
2915
2887
|
args: [GANTT_UPPER_TOKEN]
|
|
@@ -3634,6 +3606,102 @@ function setStyleWithVendorPrefix({ element, style, value }) {
|
|
|
3634
3606
|
}
|
|
3635
3607
|
}
|
|
3636
3608
|
|
|
3609
|
+
class GanttSyncScrollService {
|
|
3610
|
+
constructor() {
|
|
3611
|
+
this.ngZone = inject(NgZone);
|
|
3612
|
+
this.scrollGroupsMap = new Map();
|
|
3613
|
+
}
|
|
3614
|
+
registerScrollEvent(groupName, element, direction) {
|
|
3615
|
+
const group = this.scrollGroupsMap.get(groupName) || { elements: [], destroy$: new Subject(), direction };
|
|
3616
|
+
group.elements.push(element);
|
|
3617
|
+
this.scrollGroupsMap.set(groupName, group);
|
|
3618
|
+
this.monitorScrollChange(group);
|
|
3619
|
+
}
|
|
3620
|
+
unregisterScrollEvent(groupName, element) {
|
|
3621
|
+
const group = this.scrollGroupsMap.get(groupName);
|
|
3622
|
+
if (group) {
|
|
3623
|
+
group.elements = group.elements.filter((el) => el !== element);
|
|
3624
|
+
if (!group.elements.length) {
|
|
3625
|
+
this.scrollGroupsMap.delete(groupName);
|
|
3626
|
+
}
|
|
3627
|
+
else {
|
|
3628
|
+
this.scrollGroupsMap.set(groupName, group);
|
|
3629
|
+
}
|
|
3630
|
+
this.monitorScrollChange(group);
|
|
3631
|
+
}
|
|
3632
|
+
}
|
|
3633
|
+
monitorScrollChange(group) {
|
|
3634
|
+
const { elements, destroy$, direction } = group;
|
|
3635
|
+
destroy$.next();
|
|
3636
|
+
destroy$.complete();
|
|
3637
|
+
if (elements.length) {
|
|
3638
|
+
const scrollObservers = elements.map((el) => fromEvent(el, 'scroll', passiveListenerOptions));
|
|
3639
|
+
this.ngZone.runOutsideAngular(() => merge(...scrollObservers)
|
|
3640
|
+
.pipe(takeUntil$1(destroy$))
|
|
3641
|
+
.subscribe((event) => {
|
|
3642
|
+
elements.forEach((el) => {
|
|
3643
|
+
if (direction === 'x') {
|
|
3644
|
+
el.scrollLeft = event.currentTarget.scrollLeft;
|
|
3645
|
+
}
|
|
3646
|
+
else {
|
|
3647
|
+
el.scrollTop = event.currentTarget.scrollTop;
|
|
3648
|
+
}
|
|
3649
|
+
});
|
|
3650
|
+
}));
|
|
3651
|
+
}
|
|
3652
|
+
}
|
|
3653
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttSyncScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3654
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttSyncScrollService }); }
|
|
3655
|
+
}
|
|
3656
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttSyncScrollService, decorators: [{
|
|
3657
|
+
type: Injectable
|
|
3658
|
+
}], ctorParameters: () => [] });
|
|
3659
|
+
|
|
3660
|
+
class GanttSyncScrollXDirective {
|
|
3661
|
+
constructor() {
|
|
3662
|
+
this.syncScrollX = input();
|
|
3663
|
+
this.elementRef = inject((ElementRef));
|
|
3664
|
+
this.syncScrollService = inject(GanttSyncScrollService);
|
|
3665
|
+
}
|
|
3666
|
+
ngOnInit() {
|
|
3667
|
+
this.syncScrollService.registerScrollEvent(this.syncScrollX(), this.elementRef.nativeElement, 'x');
|
|
3668
|
+
}
|
|
3669
|
+
ngOnDestroy() {
|
|
3670
|
+
this.syncScrollService.unregisterScrollEvent(this.syncScrollX(), this.elementRef.nativeElement);
|
|
3671
|
+
}
|
|
3672
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttSyncScrollXDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3673
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.3", type: GanttSyncScrollXDirective, isStandalone: true, selector: "[syncScrollX]", inputs: { syncScrollX: { classPropertyName: "syncScrollX", publicName: "syncScrollX", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
3674
|
+
}
|
|
3675
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttSyncScrollXDirective, decorators: [{
|
|
3676
|
+
type: Directive,
|
|
3677
|
+
args: [{
|
|
3678
|
+
selector: '[syncScrollX]',
|
|
3679
|
+
standalone: true
|
|
3680
|
+
}]
|
|
3681
|
+
}], ctorParameters: () => [] });
|
|
3682
|
+
class GanttSyncScrollYDirective {
|
|
3683
|
+
constructor() {
|
|
3684
|
+
this.syncScrollY = input();
|
|
3685
|
+
this.syncScrollService = inject(GanttSyncScrollService);
|
|
3686
|
+
this.elementRef = inject((ElementRef));
|
|
3687
|
+
}
|
|
3688
|
+
ngOnInit() {
|
|
3689
|
+
this.syncScrollService.registerScrollEvent(this.syncScrollY(), this.elementRef.nativeElement, 'y');
|
|
3690
|
+
}
|
|
3691
|
+
ngOnDestroy() {
|
|
3692
|
+
this.syncScrollService.unregisterScrollEvent(this.syncScrollY(), this.elementRef.nativeElement);
|
|
3693
|
+
}
|
|
3694
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttSyncScrollYDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3695
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.3", type: GanttSyncScrollYDirective, isStandalone: true, selector: "[syncScrollY]", inputs: { syncScrollY: { classPropertyName: "syncScrollY", publicName: "syncScrollY", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
3696
|
+
}
|
|
3697
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttSyncScrollYDirective, decorators: [{
|
|
3698
|
+
type: Directive,
|
|
3699
|
+
args: [{
|
|
3700
|
+
selector: '[syncScrollY]',
|
|
3701
|
+
standalone: true
|
|
3702
|
+
}]
|
|
3703
|
+
}], ctorParameters: () => [] });
|
|
3704
|
+
|
|
3637
3705
|
const defaultColumnWidth = 100;
|
|
3638
3706
|
const minColumnWidth = 80;
|
|
3639
3707
|
class GanttTableHeaderComponent {
|
|
@@ -3752,11 +3820,11 @@ class GanttTableHeaderComponent {
|
|
|
3752
3820
|
this.unsubscribe$.complete();
|
|
3753
3821
|
}
|
|
3754
3822
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttTableHeaderComponent, deps: [{ token: i0.ElementRef }, { token: GANTT_ABSTRACT_TOKEN }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3755
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: GanttTableHeaderComponent, isStandalone: true, selector: "gantt-table-header", inputs: { columns: "columns" }, host: { properties: { "class": "this.className", "style.height": "this.height", "style.line-height": "this.lineHeight" } }, viewQueries: [{ propertyName: "resizeLineElementRef", first: true, predicate: ["resizeLine"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"gantt-table-header-container\" [style.width.px]=\"tableWidth\" cdkScrollable>\n @for (column of columns; track $index) {\n <div class=\"gantt-table-column\" [style.width]=\"column.columnWidth\">\n @if (column.headerTemplateRef) {\n <ng-container [ngTemplateOutlet]=\"column.headerTemplateRef\"> </ng-container>\n } @else {\n {{ column.name }}\n }\n <div\n class=\"column-resize-handle\"\n cdkDrag\n cdkDragLockAxis=\"x\"\n cdkDragBoundary=\".gantt\"\n (cdkDragMoved)=\"onResizeMoved($event, column)\"\n (cdkDragStarted)=\"onResizeStarted($event)\"\n (cdkDragEnded)=\"onResizeEnded($event, column)\"\n ></div>\n </div>\n }\n <div class=\"gantt-table-column gantt-table-column-placeholder\"></div>\n</div>\n\n@if (gantt?.table?.settingsSlot) {\n <ng-template [ngTemplateOutlet]=\"gantt?.table?.settingsSlot\"></ng-template>\n}\n\n<div\n class=\"table-resize-handle\"\n cdkDrag\n cdkDragLockAxis=\"x\"\n cdkDragBoundary=\".gantt\"\n (cdkDragMoved)=\"onResizeMoved($event)\"\n (cdkDragStarted)=\"onResizeStarted($event)\"\n (cdkDragEnded)=\"onOverallResizeEnded($event)\"\n></div>\n\n<div #resizeLine class=\"table-resize-auxiliary-line\"></div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] }); }
|
|
3823
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: GanttTableHeaderComponent, isStandalone: true, selector: "gantt-table-header", inputs: { columns: "columns" }, host: { properties: { "class": "this.className", "style.height": "this.height", "style.line-height": "this.lineHeight" } }, viewQueries: [{ propertyName: "resizeLineElementRef", first: true, predicate: ["resizeLine"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"gantt-table-header-container\" syncScrollX=\"ganttTableXScroll\" [style.width.px]=\"tableWidth\" cdkScrollable>\n @for (column of columns; track $index) {\n <div class=\"gantt-table-column\" [style.width]=\"column.columnWidth\">\n @if (column.headerTemplateRef) {\n <ng-container [ngTemplateOutlet]=\"column.headerTemplateRef\"> </ng-container>\n } @else {\n {{ column.name }}\n }\n <div\n class=\"column-resize-handle\"\n cdkDrag\n cdkDragLockAxis=\"x\"\n cdkDragBoundary=\".gantt\"\n (cdkDragMoved)=\"onResizeMoved($event, column)\"\n (cdkDragStarted)=\"onResizeStarted($event)\"\n (cdkDragEnded)=\"onResizeEnded($event, column)\"\n ></div>\n </div>\n }\n <div class=\"gantt-table-column gantt-table-column-placeholder\"></div>\n</div>\n\n@if (gantt?.table?.settingsSlot) {\n <ng-template [ngTemplateOutlet]=\"gantt?.table?.settingsSlot\"></ng-template>\n}\n\n<div\n class=\"table-resize-handle\"\n cdkDrag\n cdkDragLockAxis=\"x\"\n cdkDragBoundary=\".gantt\"\n (cdkDragMoved)=\"onResizeMoved($event)\"\n (cdkDragStarted)=\"onResizeStarted($event)\"\n (cdkDragEnded)=\"onOverallResizeEnded($event)\"\n></div>\n\n<div #resizeLine class=\"table-resize-auxiliary-line\"></div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: GanttSyncScrollXDirective, selector: "[syncScrollX]", inputs: ["syncScrollX"] }] }); }
|
|
3756
3824
|
}
|
|
3757
3825
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttTableHeaderComponent, decorators: [{
|
|
3758
3826
|
type: Component,
|
|
3759
|
-
args: [{ selector: 'gantt-table-header', imports: [NgTemplateOutlet, CdkDrag], template: "<div class=\"gantt-table-header-container\" [style.width.px]=\"tableWidth\" cdkScrollable>\n @for (column of columns; track $index) {\n <div class=\"gantt-table-column\" [style.width]=\"column.columnWidth\">\n @if (column.headerTemplateRef) {\n <ng-container [ngTemplateOutlet]=\"column.headerTemplateRef\"> </ng-container>\n } @else {\n {{ column.name }}\n }\n <div\n class=\"column-resize-handle\"\n cdkDrag\n cdkDragLockAxis=\"x\"\n cdkDragBoundary=\".gantt\"\n (cdkDragMoved)=\"onResizeMoved($event, column)\"\n (cdkDragStarted)=\"onResizeStarted($event)\"\n (cdkDragEnded)=\"onResizeEnded($event, column)\"\n ></div>\n </div>\n }\n <div class=\"gantt-table-column gantt-table-column-placeholder\"></div>\n</div>\n\n@if (gantt?.table?.settingsSlot) {\n <ng-template [ngTemplateOutlet]=\"gantt?.table?.settingsSlot\"></ng-template>\n}\n\n<div\n class=\"table-resize-handle\"\n cdkDrag\n cdkDragLockAxis=\"x\"\n cdkDragBoundary=\".gantt\"\n (cdkDragMoved)=\"onResizeMoved($event)\"\n (cdkDragStarted)=\"onResizeStarted($event)\"\n (cdkDragEnded)=\"onOverallResizeEnded($event)\"\n></div>\n\n<div #resizeLine class=\"table-resize-auxiliary-line\"></div>\n" }]
|
|
3827
|
+
args: [{ selector: 'gantt-table-header', imports: [NgTemplateOutlet, CdkDrag, GanttSyncScrollXDirective], template: "<div class=\"gantt-table-header-container\" syncScrollX=\"ganttTableXScroll\" [style.width.px]=\"tableWidth\" cdkScrollable>\n @for (column of columns; track $index) {\n <div class=\"gantt-table-column\" [style.width]=\"column.columnWidth\">\n @if (column.headerTemplateRef) {\n <ng-container [ngTemplateOutlet]=\"column.headerTemplateRef\"> </ng-container>\n } @else {\n {{ column.name }}\n }\n <div\n class=\"column-resize-handle\"\n cdkDrag\n cdkDragLockAxis=\"x\"\n cdkDragBoundary=\".gantt\"\n (cdkDragMoved)=\"onResizeMoved($event, column)\"\n (cdkDragStarted)=\"onResizeStarted($event)\"\n (cdkDragEnded)=\"onResizeEnded($event, column)\"\n ></div>\n </div>\n }\n <div class=\"gantt-table-column gantt-table-column-placeholder\"></div>\n</div>\n\n@if (gantt?.table?.settingsSlot) {\n <ng-template [ngTemplateOutlet]=\"gantt?.table?.settingsSlot\"></ng-template>\n}\n\n<div\n class=\"table-resize-handle\"\n cdkDrag\n cdkDragLockAxis=\"x\"\n cdkDragBoundary=\".gantt\"\n (cdkDragMoved)=\"onResizeMoved($event)\"\n (cdkDragStarted)=\"onResizeStarted($event)\"\n (cdkDragEnded)=\"onOverallResizeEnded($event)\"\n></div>\n\n<div #resizeLine class=\"table-resize-auxiliary-line\"></div>\n" }]
|
|
3760
3828
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
3761
3829
|
type: Inject,
|
|
3762
3830
|
args: [GANTT_ABSTRACT_TOKEN]
|
|
@@ -3788,13 +3856,12 @@ class GanttTableBodyComponent {
|
|
|
3788
3856
|
get viewportItems() {
|
|
3789
3857
|
return this._viewportItems;
|
|
3790
3858
|
}
|
|
3791
|
-
constructor(gantt, ganttUpper, cdr, document, elementRef
|
|
3859
|
+
constructor(gantt, ganttUpper, cdr, document, elementRef) {
|
|
3792
3860
|
this.gantt = gantt;
|
|
3793
3861
|
this.ganttUpper = ganttUpper;
|
|
3794
3862
|
this.cdr = cdr;
|
|
3795
3863
|
this.document = document;
|
|
3796
3864
|
this.elementRef = elementRef;
|
|
3797
|
-
this.ngZone = ngZone;
|
|
3798
3865
|
this.draggable = false;
|
|
3799
3866
|
this.dragDropped = new EventEmitter();
|
|
3800
3867
|
this.dragStarted = new EventEmitter();
|
|
@@ -3824,7 +3891,6 @@ class GanttTableBodyComponent {
|
|
|
3824
3891
|
});
|
|
3825
3892
|
}
|
|
3826
3893
|
ngAfterViewInit() {
|
|
3827
|
-
this.initialize();
|
|
3828
3894
|
this.cdkDrags.changes
|
|
3829
3895
|
.pipe(startWith$1(this.cdkDrags), takeUntil$1(this.destroy$))
|
|
3830
3896
|
.subscribe((drags) => {
|
|
@@ -3844,29 +3910,6 @@ class GanttTableBodyComponent {
|
|
|
3844
3910
|
this.onItemDragMoved(event);
|
|
3845
3911
|
});
|
|
3846
3912
|
}
|
|
3847
|
-
initialize() {
|
|
3848
|
-
this.sideContainer = this.document.getElementsByClassName('gantt-side-container')[0];
|
|
3849
|
-
this.headerContainer = this.document.getElementsByClassName('gantt-table-header-container')[0];
|
|
3850
|
-
this.footerContainer = this.document.getElementsByClassName('gantt-table-footer')[0];
|
|
3851
|
-
this.tableScrollbarContainer = this.document.getElementsByClassName('gantt-table-scrollbar')[0];
|
|
3852
|
-
this.monitorScrollChange();
|
|
3853
|
-
}
|
|
3854
|
-
monitorScrollChange() {
|
|
3855
|
-
const scrollObservers = [
|
|
3856
|
-
fromEvent(this.sideContainer, 'scroll', passiveListenerOptions),
|
|
3857
|
-
fromEvent(this.headerContainer, 'scroll', passiveListenerOptions),
|
|
3858
|
-
fromEvent(this.tableScrollbarContainer, 'scroll', passiveListenerOptions)
|
|
3859
|
-
];
|
|
3860
|
-
this.ngZone.runOutsideAngular(() => merge(...scrollObservers)
|
|
3861
|
-
.pipe(takeUntil$1(this.destroy$))
|
|
3862
|
-
.subscribe((event) => {
|
|
3863
|
-
const target = event.currentTarget;
|
|
3864
|
-
this.headerContainer && (this.headerContainer.scrollLeft = target.scrollLeft);
|
|
3865
|
-
this.sideContainer && (this.sideContainer.scrollLeft = target.scrollLeft);
|
|
3866
|
-
this.tableScrollbarContainer && (this.tableScrollbarContainer.scrollLeft = target.scrollLeft);
|
|
3867
|
-
this.footerContainer && (this.footerContainer.scrollLeft = target.scrollLeft);
|
|
3868
|
-
}));
|
|
3869
|
-
}
|
|
3870
3913
|
expandGroup(group) {
|
|
3871
3914
|
this.gantt.expandGroup(group);
|
|
3872
3915
|
}
|
|
@@ -4061,7 +4104,7 @@ class GanttTableBodyComponent {
|
|
|
4061
4104
|
this.document.querySelectorAll('.drop-position-after').forEach((element) => element.classList.remove('drop-position-after'));
|
|
4062
4105
|
this.document.querySelectorAll('.drop-position-inside').forEach((element) => element.classList.remove('drop-position-inside'));
|
|
4063
4106
|
}
|
|
4064
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttTableBodyComponent, deps: [{ token: GANTT_ABSTRACT_TOKEN }, { token: GANTT_UPPER_TOKEN }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }, { token: i0.ElementRef }
|
|
4107
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttTableBodyComponent, deps: [{ token: GANTT_ABSTRACT_TOKEN }, { token: GANTT_UPPER_TOKEN }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4065
4108
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: GanttTableBodyComponent, isStandalone: true, selector: "gantt-table-body", inputs: { viewportItems: "viewportItems", flatItems: "flatItems", columns: "columns", groupTemplate: "groupTemplate", emptyTemplate: "emptyTemplate", rowBeforeTemplate: "rowBeforeTemplate", rowAfterTemplate: "rowAfterTemplate", draggable: "draggable", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", dragStarted: "dragStarted", dragEnded: "dragEnded", itemClick: "itemClick" }, host: { properties: { "class.gantt-table-draggable": "this.draggable", "class.gantt-table-body": "this.ganttTableClass", "class.gantt-table-empty": "this.ganttTableEmptyClass", "class.gantt-table-dragging": "this.ganttTableDragging" } }, viewQueries: [{ propertyName: "cdkDrags", predicate: (CdkDrag), descendants: true }], ngImport: i0, template: "<div\n class=\"gantt-table-body-container\"\n cdkDropList\n [cdkDropListAutoScrollStep]=\"6\"\n [cdkDropListData]=\"viewportItems\"\n [cdkDropListSortingDisabled]=\"true\"\n (cdkDropListDropped)=\"onListDropped($event)\"\n>\n @if (!viewportItems?.length) {\n @if (!emptyTemplate) {\n <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n }\n <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n }\n\n @if (viewportItems && viewportItems.length > 0) {\n @for (item of viewportItems; track trackBy($index, item)) {\n @if (item | isGanttGroup) {\n <div class=\"gantt-table-group\" [style.height.px]=\"gantt.styles.lineHeight\" [ngClass]=\"item.class\">\n <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n @if (groupTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n ></ng-template>\n } @else {\n <span class=\"group-title\">{{ item.title }}</span>\n }\n </div>\n </div>\n }\n @if (!(item | isGanttGroup)) {\n <div\n (click)=\"itemClick.emit({ event: $event, current: item.origin, selectedValue: item.origin })\"\n cdkDrag\n [cdkDragData]=\"item\"\n [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n (cdkDragStarted)=\"onItemDragStarted($event)\"\n (cdkDragEnded)=\"onItemDragEnded($event)\"\n (cdkDragMoved)=\"emitItemDragMoved($event)\"\n class=\"gantt-table-item\"\n [class.gantt-table-item-with-group]=\"hasGroup\"\n [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n [style.height.px]=\"gantt.styles.lineHeight\"\n [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n >\n <ng-template\n [ngTemplateOutlet]=\"rowBeforeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n ></ng-template>\n @for (column of columns; track $index; let first = $first) {\n <div [classList]=\"column.classList\" [style.width]=\"column.columnWidth\">\n <!-- drag icon -->\n @if (first && draggable) {\n <gantt-icon\n class=\"gantt-drag-handle\"\n iconName=\"drag\"\n cdkDragHandle\n [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n ></gantt-icon>\n }\n <!-- expand icon -->\n @if (column?.showExpandIcon || (!hasExpandIcon && first)) {\n <div class=\"gantt-expand-icon\" [style.marginLeft.px]=\"item.level * 20\">\n @if (item.level < gantt.maxLevel - 1 && ((gantt.async && item.expandable) || item.children?.length > 0)) {\n @if (!item.loading) {\n <gantt-icon\n class=\"expand-icon\"\n [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n (click)=\"expandChildren($event, item)\"\n >\n </gantt-icon>\n }\n @if (item.loading) {\n <gantt-icon [iconName]=\"'loading'\"></gantt-icon>\n }\n }\n </div>\n }\n <!-- column content -->\n <div class=\"gantt-table-column-content\">\n <ng-template\n [ngTemplateOutlet]=\"column.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n ></ng-template>\n </div>\n </div>\n }\n <div class=\"gantt-table-column gantt-table-column-placeholder\"></div>\n <ng-template\n [ngTemplateOutlet]=\"rowAfterTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n ></ng-template>\n </div>\n }\n }\n }\n</div>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: GanttIconComponent, selector: "gantt-icon", inputs: ["iconName"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: IsGanttRangeItemPipe, name: "isGanttRangeItem" }, { kind: "pipe", type: IsGanttGroupPipe, name: "isGanttGroup" }] }); }
|
|
4066
4109
|
}
|
|
4067
4110
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttTableBodyComponent, decorators: [{
|
|
@@ -4076,7 +4119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
|
|
|
4076
4119
|
}] }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
|
|
4077
4120
|
type: Inject,
|
|
4078
4121
|
args: [DOCUMENT]
|
|
4079
|
-
}] }, { type: i0.ElementRef }
|
|
4122
|
+
}] }, { type: i0.ElementRef }], propDecorators: { viewportItems: [{
|
|
4080
4123
|
type: Input
|
|
4081
4124
|
}], flatItems: [{
|
|
4082
4125
|
type: Input
|
|
@@ -4159,11 +4202,11 @@ class GanttScrollbarComponent {
|
|
|
4159
4202
|
this.tableScrollWidth = input(0);
|
|
4160
4203
|
}
|
|
4161
4204
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttScrollbarComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4162
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.3", type: GanttScrollbarComponent, isStandalone: true, selector: "gantt-scrollbar", inputs: { hasFooter: { classPropertyName: "hasFooter", publicName: "hasFooter", isSignal: true, isRequired: false, transformFunction: null }, tableWidth: { classPropertyName: "tableWidth", publicName: "tableWidth", isSignal: true, isRequired: false, transformFunction: null }, ganttRoot: { classPropertyName: "ganttRoot", publicName: "ganttRoot", isSignal: true, isRequired: false, transformFunction: null }, tableScrollWidth: { classPropertyName: "tableScrollWidth", publicName: "tableScrollWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"gantt-scrollbar\"\n [ngClass]=\"{ 'gantt-scrollbar-bg': hasFooter() }\"\n [style.height.px]=\"ganttRoot()?.horizontalScrollbarHeight + 1\"\n [style.right.px]=\"ganttRoot()?.verticalScrollbarWidth\"\n>\n <div
|
|
4205
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.3", type: GanttScrollbarComponent, isStandalone: true, selector: "gantt-scrollbar", inputs: { hasFooter: { classPropertyName: "hasFooter", publicName: "hasFooter", isSignal: true, isRequired: false, transformFunction: null }, tableWidth: { classPropertyName: "tableWidth", publicName: "tableWidth", isSignal: true, isRequired: false, transformFunction: null }, ganttRoot: { classPropertyName: "ganttRoot", publicName: "ganttRoot", isSignal: true, isRequired: false, transformFunction: null }, tableScrollWidth: { classPropertyName: "tableScrollWidth", publicName: "tableScrollWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"gantt-scrollbar\"\n [ngClass]=\"{ 'gantt-scrollbar-bg': hasFooter() }\"\n [style.height.px]=\"ganttRoot()?.horizontalScrollbarHeight + 1\"\n [style.right.px]=\"ganttRoot()?.verticalScrollbarWidth\"\n>\n <div\n class=\"gantt-table-scrollbar\"\n syncScrollX=\"ganttTableXScroll\"\n [class.with-scrollbar]=\"ganttRoot()?.horizontalScrollbarHeight\"\n [style.width.px]=\"tableWidth()\"\n >\n <div class=\"h-100\" [style.width.px]=\"tableScrollWidth() - 1\"></div>\n </div>\n <div class=\"gantt-main-scrollbar\" syncScrollX=\"ganttMainXScroll\">\n <div class=\"h-100\" [style.width.px]=\"ganttRoot()['view']?.width\"></div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: GanttSyncScrollXDirective, selector: "[syncScrollX]", inputs: ["syncScrollX"] }] }); }
|
|
4163
4206
|
}
|
|
4164
4207
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttScrollbarComponent, decorators: [{
|
|
4165
4208
|
type: Component,
|
|
4166
|
-
args: [{ selector: 'gantt-scrollbar', imports: [NgClass], template: "<div\n class=\"gantt-scrollbar\"\n [ngClass]=\"{ 'gantt-scrollbar-bg': hasFooter() }\"\n [style.height.px]=\"ganttRoot()?.horizontalScrollbarHeight + 1\"\n [style.right.px]=\"ganttRoot()?.verticalScrollbarWidth\"\n>\n <div
|
|
4209
|
+
args: [{ selector: 'gantt-scrollbar', imports: [NgClass, GanttSyncScrollXDirective], template: "<div\n class=\"gantt-scrollbar\"\n [ngClass]=\"{ 'gantt-scrollbar-bg': hasFooter() }\"\n [style.height.px]=\"ganttRoot()?.horizontalScrollbarHeight + 1\"\n [style.right.px]=\"ganttRoot()?.verticalScrollbarWidth\"\n>\n <div\n class=\"gantt-table-scrollbar\"\n syncScrollX=\"ganttTableXScroll\"\n [class.with-scrollbar]=\"ganttRoot()?.horizontalScrollbarHeight\"\n [style.width.px]=\"tableWidth()\"\n >\n <div class=\"h-100\" [style.width.px]=\"tableScrollWidth() - 1\"></div>\n </div>\n <div class=\"gantt-main-scrollbar\" syncScrollX=\"ganttMainXScroll\">\n <div class=\"h-100\" [style.width.px]=\"ganttRoot()['view']?.width\"></div>\n </div>\n</div>\n" }]
|
|
4167
4210
|
}], ctorParameters: () => [{ type: GanttUpper, decorators: [{
|
|
4168
4211
|
type: Inject,
|
|
4169
4212
|
args: [GANTT_UPPER_TOKEN]
|
|
@@ -4380,11 +4423,11 @@ class NgxGanttRootComponent {
|
|
|
4380
4423
|
this.dom.scrollMainContainer(x);
|
|
4381
4424
|
}
|
|
4382
4425
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttRootComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: GanttDomService }, { token: GanttDragContainer }, { token: GANTT_UPPER_TOKEN }, { token: GanttPrintService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4383
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: NgxGanttRootComponent, isStandalone: true, selector: "ngx-gantt-root", inputs: { sideWidth: "sideWidth" }, host: { listeners: { "window:resize": "onWindowResize()" }, classAttribute: "gantt" }, providers: [GanttDomService, GanttDragContainer], queries: [{ propertyName: "sideTemplate", first: true, predicate: ["sideTemplate"], descendants: true, static: true }, { propertyName: "mainTemplate", first: true, predicate: ["mainTemplate"], descendants: true, static: true }], viewQueries: [{ propertyName: "backdrop", first: true, predicate: GanttDragBackdropComponent, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "@if (sideTemplate) {\n <div class=\"gantt-side\" [style.width.px]=\"sideWidth\" [style.padding-bottom.px]=\"horizontalScrollbarHeight\">\n <div class=\"gantt-side-container\" cdkScrollable>\n <ng-template [ngTemplateOutlet]=\"sideTemplate\"></ng-template>\n </div>\n </div>\n}\n@if (mainTemplate) {\n <div class=\"gantt-container\">\n <gantt-calendar-header [style.padding-right.px]=\"verticalScrollbarWidth\"></gantt-calendar-header>\n <gantt-calendar-grid\n [style.padding-right.px]=\"verticalScrollbarWidth\"\n [style.padding-bottom.px]=\"horizontalScrollbarHeight\"\n ></gantt-calendar-grid>\n <gantt-drag-backdrop></gantt-drag-backdrop>\n <div class=\"gantt-main\">\n <ng-template [ngTemplateOutlet]=\"mainTemplate\"></ng-template>\n </div>\n </div>\n}\n<ng-content></ng-content>\n@if (ganttUpper.showToolbar || ganttUpper.toolbarTemplate) {\n <gantt-toolbar [template]=\"ganttUpper.toolbarTemplate\"> </gantt-toolbar>\n}\n", dependencies: [{ kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GanttCalendarHeaderComponent, selector: "gantt-calendar-header" }, { kind: "component", type: GanttCalendarGridComponent, selector: "gantt-calendar-grid" }, { kind: "component", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }, { kind: "component", type: NgxGanttToolbarComponent, selector: "ngx-gantt-toolbar,gantt-toolbar", inputs: ["template"] }] }); }
|
|
4426
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: NgxGanttRootComponent, isStandalone: true, selector: "ngx-gantt-root", inputs: { sideWidth: "sideWidth" }, host: { listeners: { "window:resize": "onWindowResize()" }, classAttribute: "gantt" }, providers: [GanttDomService, GanttDragContainer, GanttSyncScrollService], queries: [{ propertyName: "sideTemplate", first: true, predicate: ["sideTemplate"], descendants: true, static: true }, { propertyName: "mainTemplate", first: true, predicate: ["mainTemplate"], descendants: true, static: true }], viewQueries: [{ propertyName: "backdrop", first: true, predicate: GanttDragBackdropComponent, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "@if (sideTemplate) {\n <div class=\"gantt-side\" [style.width.px]=\"sideWidth\" [style.padding-bottom.px]=\"horizontalScrollbarHeight\">\n <div class=\"gantt-side-container\" syncScrollX=\"ganttTableXScroll\" syncScrollY=\"ganttMainYScroll\" cdkScrollable>\n <ng-template [ngTemplateOutlet]=\"sideTemplate\"></ng-template>\n </div>\n </div>\n}\n@if (mainTemplate) {\n <div class=\"gantt-container\">\n <gantt-calendar-header syncScrollX=\"ganttMainXScroll\" [style.padding-right.px]=\"verticalScrollbarWidth\"></gantt-calendar-header>\n <gantt-calendar-grid\n syncScrollX=\"ganttMainXScroll\"\n [style.padding-right.px]=\"verticalScrollbarWidth\"\n [style.padding-bottom.px]=\"horizontalScrollbarHeight\"\n ></gantt-calendar-grid>\n <gantt-drag-backdrop></gantt-drag-backdrop>\n <div class=\"gantt-main\">\n <div class=\"gantt-main-container\" syncScrollX=\"ganttMainXScroll\" syncScrollY=\"ganttMainYScroll\">\n <ng-template [ngTemplateOutlet]=\"mainTemplate\"></ng-template>\n </div>\n </div>\n </div>\n}\n<ng-content></ng-content>\n@if (ganttUpper.showToolbar || ganttUpper.toolbarTemplate) {\n <gantt-toolbar [template]=\"ganttUpper.toolbarTemplate\"> </gantt-toolbar>\n}\n", dependencies: [{ kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GanttCalendarHeaderComponent, selector: "gantt-calendar-header" }, { kind: "component", type: GanttCalendarGridComponent, selector: "gantt-calendar-grid" }, { kind: "component", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }, { kind: "component", type: NgxGanttToolbarComponent, selector: "ngx-gantt-toolbar,gantt-toolbar", inputs: ["template"] }, { kind: "directive", type: GanttSyncScrollXDirective, selector: "[syncScrollX]", inputs: ["syncScrollX"] }, { kind: "directive", type: GanttSyncScrollYDirective, selector: "[syncScrollY]", inputs: ["syncScrollY"] }] }); }
|
|
4384
4427
|
}
|
|
4385
4428
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttRootComponent, decorators: [{
|
|
4386
4429
|
type: Component,
|
|
4387
|
-
args: [{ selector: 'ngx-gantt-root', providers: [GanttDomService, GanttDragContainer], host: {
|
|
4430
|
+
args: [{ selector: 'ngx-gantt-root', providers: [GanttDomService, GanttDragContainer, GanttSyncScrollService], host: {
|
|
4388
4431
|
class: 'gantt'
|
|
4389
4432
|
}, imports: [
|
|
4390
4433
|
CdkScrollable,
|
|
@@ -4392,8 +4435,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
|
|
|
4392
4435
|
GanttCalendarHeaderComponent,
|
|
4393
4436
|
GanttCalendarGridComponent,
|
|
4394
4437
|
GanttDragBackdropComponent,
|
|
4395
|
-
NgxGanttToolbarComponent
|
|
4396
|
-
|
|
4438
|
+
NgxGanttToolbarComponent,
|
|
4439
|
+
GanttSyncScrollXDirective,
|
|
4440
|
+
GanttSyncScrollYDirective
|
|
4441
|
+
], template: "@if (sideTemplate) {\n <div class=\"gantt-side\" [style.width.px]=\"sideWidth\" [style.padding-bottom.px]=\"horizontalScrollbarHeight\">\n <div class=\"gantt-side-container\" syncScrollX=\"ganttTableXScroll\" syncScrollY=\"ganttMainYScroll\" cdkScrollable>\n <ng-template [ngTemplateOutlet]=\"sideTemplate\"></ng-template>\n </div>\n </div>\n}\n@if (mainTemplate) {\n <div class=\"gantt-container\">\n <gantt-calendar-header syncScrollX=\"ganttMainXScroll\" [style.padding-right.px]=\"verticalScrollbarWidth\"></gantt-calendar-header>\n <gantt-calendar-grid\n syncScrollX=\"ganttMainXScroll\"\n [style.padding-right.px]=\"verticalScrollbarWidth\"\n [style.padding-bottom.px]=\"horizontalScrollbarHeight\"\n ></gantt-calendar-grid>\n <gantt-drag-backdrop></gantt-drag-backdrop>\n <div class=\"gantt-main\">\n <div class=\"gantt-main-container\" syncScrollX=\"ganttMainXScroll\" syncScrollY=\"ganttMainYScroll\">\n <ng-template [ngTemplateOutlet]=\"mainTemplate\"></ng-template>\n </div>\n </div>\n </div>\n}\n<ng-content></ng-content>\n@if (ganttUpper.showToolbar || ganttUpper.toolbarTemplate) {\n <gantt-toolbar [template]=\"ganttUpper.toolbarTemplate\"> </gantt-toolbar>\n}\n" }]
|
|
4397
4442
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: GanttDomService }, { type: GanttDragContainer }, { type: GanttUpper, decorators: [{
|
|
4398
4443
|
type: Inject,
|
|
4399
4444
|
args: [GANTT_UPPER_TOKEN]
|
|
@@ -4802,7 +4847,7 @@ class NgxGanttComponent extends GanttUpper {
|
|
|
4802
4847
|
provide: GANTT_ABSTRACT_TOKEN,
|
|
4803
4848
|
useExisting: forwardRef(() => NgxGanttComponent)
|
|
4804
4849
|
}
|
|
4805
|
-
], queries: [{ propertyName: "table", first: true, predicate: NgxGanttTableComponent, descendants: true }, { propertyName: "tableEmptyTemplate", first: true, predicate: ["tableEmpty"], descendants: true, static: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true, static: true }, { propertyName: "columns", predicate: NgxGanttTableColumnComponent, descendants: true }], viewQueries: [{ propertyName: "ganttRoot", first: true, predicate: ["ganttRoot"], descendants: true }, { propertyName: "virtualScroll", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "ganttTableBody", first: true, predicate: ["ganttTableBody"], descendants: true, static: true }], usesInheritance: true, 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
|
|
4850
|
+
], queries: [{ propertyName: "table", first: true, predicate: NgxGanttTableComponent, descendants: true }, { propertyName: "tableEmptyTemplate", first: true, predicate: ["tableEmpty"], descendants: true, static: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true, static: true }, { propertyName: "columns", predicate: NgxGanttTableColumnComponent, descendants: true }], viewQueries: [{ propertyName: "ganttRoot", first: true, predicate: ["ganttRoot"], descendants: true }, { propertyName: "virtualScroll", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "ganttTableBody", first: true, predicate: ["ganttTableBody"], descendants: true, static: true }], usesInheritance: true, 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\n syncScrollX=\"ganttMainXScroll\"\n [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"\n ></gantt-calendar-header>\n </div>\n </div>\n @if (loading) {\n <gantt-loader></gantt-loader>\n }\n\n <cdk-virtual-scroll-viewport\n class=\"gantt-virtual-scroll-viewport\"\n [ngClass]=\"{\n 'gantt-normal-viewport': !virtualScrollEnabled,\n 'gantt-scroll-container': virtualScrollEnabled,\n 'with-footer': table?.tableFooterTemplate || footerTemplate\n }\"\n [style.top.px]=\"styles.headerHeight\"\n [itemSize]=\"styles.lineHeight\"\n [minBufferPx]=\"styles.lineHeight * 10\"\n [maxBufferPx]=\"styles.lineHeight * 20\"\n (scrolledIndexChange)=\"scrolledIndexChange($event)\"\n >\n <ng-container *cdkVirtualFor=\"let item of flatItems; trackBy: trackBy\"></ng-container>\n <div class=\"gantt-side\" [style.width.px]=\"tableHeader.tableWidth + 1\" [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\">\n <div class=\"gantt-side-container\" syncScrollX=\"ganttTableXScroll\" syncScrollY=\"ganttMainYScroll\">\n <div class=\"gantt-table\">\n <gantt-table-body\n #ganttTableBody\n [flatItems]=\"flatItems\"\n [viewportItems]=\"viewportItems\"\n [columns]=\"columns\"\n [groupTemplate]=\"groupTemplate\"\n [emptyTemplate]=\"table.tableEmptyTemplate || tableEmptyTemplate\"\n [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n [draggable]=\"table.draggable\"\n [dropEnterPredicate]=\"table.dropEnterPredicate\"\n (dragDropped)=\"table.dragDropped.emit($event)\"\n (dragStarted)=\"itemDragStarted($event)\"\n (dragEnded)=\"itemDragEnded($event)\"\n (itemClick)=\"selectItem($event)\"\n >\n </gantt-table-body>\n </div>\n </div>\n </div>\n <div class=\"gantt-container\">\n <gantt-calendar-grid\n syncScrollX=\"ganttMainXScroll\"\n [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"\n [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n ></gantt-calendar-grid>\n <div class=\"gantt-main\">\n <gantt-main\n syncScrollX=\"ganttMainXScroll\"\n syncScrollY=\"ganttMainYScroll\"\n [ganttRoot]=\"ganttRoot\"\n [flatItems]=\"flatItems\"\n [viewportItems]=\"viewportItems\"\n [groupHeaderTemplate]=\"groupHeaderTemplate\"\n [itemTemplate]=\"itemTemplate\"\n [barTemplate]=\"barTemplate\"\n [rangeTemplate]=\"rangeTemplate\"\n [baselineTemplate]=\"baselineTemplate\"\n [quickTimeFocus]=\"quickTimeFocus\"\n (barClick)=\"barClick.emit($event)\"\n (lineClick)=\"lineClick.emit($event)\"\n >\n </gantt-main>\n </div>\n </div>\n </cdk-virtual-scroll-viewport>\n\n <gantt-drag-backdrop [style.left.px]=\"tableHeader.tableWidth + 1\"></gantt-drag-backdrop>\n\n <gantt-scrollbar\n [ganttRoot]=\"ganttRoot\"\n [hasFooter]=\"!!table?.tableFooterTemplate\"\n [tableWidth]=\"tableHeader.tableWidth\"\n [tableScrollWidth]=\"tableScrollWidth()\"\n ></gantt-scrollbar>\n\n @if (table?.tableFooterTemplate || footerTemplate) {\n <div\n class=\"gantt-footer\"\n cdkScrollable\n [style.right.px]=\"ganttRoot.verticalScrollbarWidth\"\n [style.bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n >\n @if (table?.tableFooterTemplate) {\n <div class=\"gantt-table-footer\" syncScrollX=\"ganttTableXScroll\" [style.width.px]=\"tableHeader.tableWidth + 1\">\n <ng-template [ngTemplateOutlet]=\"table?.tableFooterTemplate\" [ngTemplateOutletContext]=\"{ columns: columns }\"> </ng-template>\n </div>\n }\n @if (footerTemplate) {\n <div class=\"gantt-container-footer\" syncScrollX=\"ganttMainXScroll\">\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"> </ng-template>\n </div>\n }\n </div>\n }\n</ngx-gantt-root>\n", dependencies: [{ kind: "component", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: ["sideWidth"] }, { kind: "component", type: GanttTableHeaderComponent, selector: "gantt-table-header", inputs: ["columns"] }, { kind: "component", type: GanttCalendarHeaderComponent, selector: "gantt-calendar-header" }, { kind: "component", type: GanttLoaderComponent, selector: "gantt-loader" }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: GanttTableBodyComponent, selector: "gantt-table-body", inputs: ["viewportItems", "flatItems", "columns", "groupTemplate", "emptyTemplate", "rowBeforeTemplate", "rowAfterTemplate", "draggable", "dropEnterPredicate"], outputs: ["dragDropped", "dragStarted", "dragEnded", "itemClick"] }, { kind: "component", type: GanttCalendarGridComponent, selector: "gantt-calendar-grid" }, { kind: "component", type: GanttMainComponent, selector: "gantt-main", inputs: ["viewportItems", "flatItems", "groupHeaderTemplate", "itemTemplate", "barTemplate", "rangeTemplate", "baselineTemplate", "ganttRoot", "quickTimeFocus"], outputs: ["barClick", "lineClick"] }, { kind: "component", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }, { kind: "component", type: GanttScrollbarComponent, selector: "gantt-scrollbar", inputs: ["hasFooter", "tableWidth", "ganttRoot", "tableScrollWidth"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: GanttSyncScrollXDirective, selector: "[syncScrollX]", inputs: ["syncScrollX"] }, { kind: "directive", type: GanttSyncScrollYDirective, selector: "[syncScrollY]", inputs: ["syncScrollY"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4806
4851
|
}
|
|
4807
4852
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttComponent, decorators: [{
|
|
4808
4853
|
type: Component,
|
|
@@ -4829,8 +4874,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
|
|
|
4829
4874
|
GanttMainComponent,
|
|
4830
4875
|
GanttDragBackdropComponent,
|
|
4831
4876
|
GanttScrollbarComponent,
|
|
4832
|
-
NgTemplateOutlet
|
|
4833
|
-
|
|
4877
|
+
NgTemplateOutlet,
|
|
4878
|
+
GanttSyncScrollXDirective,
|
|
4879
|
+
GanttSyncScrollYDirective
|
|
4880
|
+
], template: "<ngx-gantt-root #ganttRoot>\n <div class=\"gantt-header\">\n <gantt-table-header #tableHeader [columns]=\"columns\"></gantt-table-header>\n <div class=\"gantt-container-header\">\n <gantt-calendar-header\n syncScrollX=\"ganttMainXScroll\"\n [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"\n ></gantt-calendar-header>\n </div>\n </div>\n @if (loading) {\n <gantt-loader></gantt-loader>\n }\n\n <cdk-virtual-scroll-viewport\n class=\"gantt-virtual-scroll-viewport\"\n [ngClass]=\"{\n 'gantt-normal-viewport': !virtualScrollEnabled,\n 'gantt-scroll-container': virtualScrollEnabled,\n 'with-footer': table?.tableFooterTemplate || footerTemplate\n }\"\n [style.top.px]=\"styles.headerHeight\"\n [itemSize]=\"styles.lineHeight\"\n [minBufferPx]=\"styles.lineHeight * 10\"\n [maxBufferPx]=\"styles.lineHeight * 20\"\n (scrolledIndexChange)=\"scrolledIndexChange($event)\"\n >\n <ng-container *cdkVirtualFor=\"let item of flatItems; trackBy: trackBy\"></ng-container>\n <div class=\"gantt-side\" [style.width.px]=\"tableHeader.tableWidth + 1\" [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\">\n <div class=\"gantt-side-container\" syncScrollX=\"ganttTableXScroll\" syncScrollY=\"ganttMainYScroll\">\n <div class=\"gantt-table\">\n <gantt-table-body\n #ganttTableBody\n [flatItems]=\"flatItems\"\n [viewportItems]=\"viewportItems\"\n [columns]=\"columns\"\n [groupTemplate]=\"groupTemplate\"\n [emptyTemplate]=\"table.tableEmptyTemplate || tableEmptyTemplate\"\n [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n [draggable]=\"table.draggable\"\n [dropEnterPredicate]=\"table.dropEnterPredicate\"\n (dragDropped)=\"table.dragDropped.emit($event)\"\n (dragStarted)=\"itemDragStarted($event)\"\n (dragEnded)=\"itemDragEnded($event)\"\n (itemClick)=\"selectItem($event)\"\n >\n </gantt-table-body>\n </div>\n </div>\n </div>\n <div class=\"gantt-container\">\n <gantt-calendar-grid\n syncScrollX=\"ganttMainXScroll\"\n [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"\n [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n ></gantt-calendar-grid>\n <div class=\"gantt-main\">\n <gantt-main\n syncScrollX=\"ganttMainXScroll\"\n syncScrollY=\"ganttMainYScroll\"\n [ganttRoot]=\"ganttRoot\"\n [flatItems]=\"flatItems\"\n [viewportItems]=\"viewportItems\"\n [groupHeaderTemplate]=\"groupHeaderTemplate\"\n [itemTemplate]=\"itemTemplate\"\n [barTemplate]=\"barTemplate\"\n [rangeTemplate]=\"rangeTemplate\"\n [baselineTemplate]=\"baselineTemplate\"\n [quickTimeFocus]=\"quickTimeFocus\"\n (barClick)=\"barClick.emit($event)\"\n (lineClick)=\"lineClick.emit($event)\"\n >\n </gantt-main>\n </div>\n </div>\n </cdk-virtual-scroll-viewport>\n\n <gantt-drag-backdrop [style.left.px]=\"tableHeader.tableWidth + 1\"></gantt-drag-backdrop>\n\n <gantt-scrollbar\n [ganttRoot]=\"ganttRoot\"\n [hasFooter]=\"!!table?.tableFooterTemplate\"\n [tableWidth]=\"tableHeader.tableWidth\"\n [tableScrollWidth]=\"tableScrollWidth()\"\n ></gantt-scrollbar>\n\n @if (table?.tableFooterTemplate || footerTemplate) {\n <div\n class=\"gantt-footer\"\n cdkScrollable\n [style.right.px]=\"ganttRoot.verticalScrollbarWidth\"\n [style.bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n >\n @if (table?.tableFooterTemplate) {\n <div class=\"gantt-table-footer\" syncScrollX=\"ganttTableXScroll\" [style.width.px]=\"tableHeader.tableWidth + 1\">\n <ng-template [ngTemplateOutlet]=\"table?.tableFooterTemplate\" [ngTemplateOutletContext]=\"{ columns: columns }\"> </ng-template>\n </div>\n }\n @if (footerTemplate) {\n <div class=\"gantt-container-footer\" syncScrollX=\"ganttMainXScroll\">\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"> </ng-template>\n </div>\n }\n </div>\n }\n</ngx-gantt-root>\n" }]
|
|
4834
4881
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$1.ViewportRuler }, { type: undefined, decorators: [{
|
|
4835
4882
|
type: Inject,
|
|
4836
4883
|
args: [GANTT_GLOBAL_CONFIG]
|
|
@@ -4882,13 +4929,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
|
|
|
4882
4929
|
}] } });
|
|
4883
4930
|
|
|
4884
4931
|
class NgxGanttModule {
|
|
4885
|
-
constructor() {
|
|
4886
|
-
const configService = inject(GanttConfigService);
|
|
4887
|
-
setDefaultOptions({
|
|
4888
|
-
locale: configService.getDateLocale(),
|
|
4889
|
-
weekStartsOn: configService.config?.dateOptions?.weekStartsOn
|
|
4890
|
-
});
|
|
4891
|
-
}
|
|
4932
|
+
constructor() { }
|
|
4892
4933
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4893
4934
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttModule, imports: [CommonModule,
|
|
4894
4935
|
DragDropModule,
|