@worktile/gantt 11.0.2 → 12.0.1

package/fesm2015/worktile-gantt.js

@@ -1,2491 +0,0 @@
-import { EventEmitter, Directive, ElementRef, ChangeDetectorRef, NgZone, Input, Output, ContentChild, HostBinding, InjectionToken, Component, Inject, ChangeDetectionStrategy, ContentChildren, ViewChild, Injectable, Optional, Pipe, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { take, skip, takeUntil, startWith, finalize, map, pairwise, auditTime } from 'rxjs/operators';
-import { BehaviorSubject, Subject, merge, fromEvent } from 'rxjs';
-import { fromUnixTime, getWeek, getDaysInMonth, differenceInCalendarDays, setDate, addSeconds, addMinutes, addHours, addDays, addWeeks, addMonths, addQuarters, addYears, startOfDay, startOfWeek, startOfMonth, startOfQuarter, startOfYear, endOfDay, endOfWeek, endOfMonth, endOfQuarter, endOfYear, getUnixTime, format, isWeekend, isToday, differenceInDays, differenceInCalendarQuarters, eachMonthOfInterval, eachYearOfInterval, eachWeekOfInterval, eachDayOfInterval, differenceInCalendarYears } from 'date-fns';
-export { addDays, addHours, addMinutes, addMonths, addQuarters, addSeconds, addWeeks, addYears, differenceInCalendarDays, differenceInCalendarQuarters, differenceInDays, eachDayOfInterval, eachMonthOfInterval, eachWeekOfInterval, endOfDay, endOfMonth, endOfQuarter, endOfWeek, endOfYear, format, fromUnixTime, getDaysInMonth, getUnixTime, getWeek, isToday, isWeekend, setDate, startOfDay, startOfMonth, startOfQuarter, startOfWeek, startOfYear } from 'date-fns';
-import { coerceCssPixelValue } from '@angular/cdk/coercion';
-import { DragDrop, DragDropModule } from '@angular/cdk/drag-drop';
-import html2canvas from 'html2canvas';
-
-class GanttDatePoint {
-    constructor(start, text, x, y, additions) {
-        this.start = start;
-        this.text = text;
-        this.x = x;
-        this.y = y;
-        this.additions = additions;
-    }
-}
-
-class GanttDragEvent {
-}
-class GanttTableEvent {
-}
-class GanttLinkDragEvent {
-}
-class GanttLoadOnScrollEvent {
-}
-class GanttLineClickEvent {
-}
-class GanttBarClickEvent {
-}
-
-class GanttDate {
-    constructor(date) {
-        if (date) {
-            if (date instanceof Date) {
-                this.value = date;
-            }
-            else if (typeof date === 'string' || typeof date === 'number') {
-                if (date.toString().length < 13) {
-                    this.value = fromUnixTime(+date);
-                }
-                else {
-                    this.value = new Date(date);
-                }
-            }
-            else {
-                throw new Error(`The input date type is not supported expect Date | string
-                     | number | { date: number; with_time: 0 | 1}, actual ${JSON.stringify(date)}`);
-            }
-        }
-        else {
-            this.value = new Date();
-        }
-    }
-    getYear() {
-        return this.value.getFullYear();
-    }
-    getMonth() {
-        return this.value.getMonth();
-    }
-    getDay() {
-        return this.value.getDay();
-    }
-    getTime() {
-        return this.value.getTime();
-    }
-    getDate() {
-        return this.value.getDate();
-    }
-    getHours() {
-        return this.value.getHours();
-    }
-    getMinutes() {
-        return this.value.getMinutes();
-    }
-    getSeconds() {
-        return this.value.getSeconds();
-    }
-    getMilliseconds() {
-        return this.value.getMilliseconds();
-    }
-    getWeek(options = { weekStartsOn: 1 }) {
-        return getWeek(this.value, options);
-    }
-    getDaysInMonth() {
-        return getDaysInMonth(this.value);
-    }
-    getDaysInQuarter() {
-        return differenceInCalendarDays(this.endOfQuarter().addSeconds(1).value, this.startOfQuarter().value);
-    }
-    getDaysInYear() {
-        return differenceInCalendarDays(this.endOfYear().addSeconds(1).value, this.startOfYear().value);
-    }
-    setDate(dayOfMonth) {
-        return new GanttDate(setDate(this.value, dayOfMonth));
-    }
-    clone() {
-        return new GanttDate(new Date(this.value));
-    }
-    add(amount, unit) {
-        switch (unit) {
-            case 'second':
-                return new GanttDate(this.value).addSeconds(amount);
-            case 'minute':
-                return new GanttDate(this.value).addMinutes(amount);
-            case 'hour':
-                return new GanttDate(this.value).addHours(amount);
-            case 'day':
-                return new GanttDate(this.value).addDays(amount);
-            case 'week':
-                return new GanttDate(this.value).addWeeks(amount);
-            case 'month':
-                return new GanttDate(this.value).addMonths(amount);
-            case 'quarter':
-                return new GanttDate(this.value).addQuarters(amount);
-            case 'year':
-                return new GanttDate(this.value).addYears(amount);
-            default:
-                return new GanttDate(this.value).addSeconds(amount);
-        }
-    }
-    addSeconds(amount) {
-        return new GanttDate(addSeconds(this.value, amount));
-    }
-    addMinutes(amount) {
-        return new GanttDate(addMinutes(this.value, amount));
-    }
-    addHours(amount) {
-        return new GanttDate(addHours(this.value, amount));
-    }
-    addDays(amount) {
-        return new GanttDate(addDays(this.value, amount));
-    }
-    addWeeks(amount) {
-        return new GanttDate(addWeeks(this.value, amount));
-    }
-    addMonths(amount) {
-        return new GanttDate(addMonths(this.value, amount));
-    }
-    addQuarters(amount) {
-        return new GanttDate(addQuarters(this.value, amount));
-    }
-    addYears(amount) {
-        return new GanttDate(addYears(this.value, amount));
-    }
-    startOfDay() {
-        return new GanttDate(startOfDay(this.value));
-    }
-    startOfWeek(options) {
-        return new GanttDate(startOfWeek(this.value, options));
-    }
-    startOfMonth() {
-        return new GanttDate(startOfMonth(this.value));
-    }
-    startOfQuarter() {
-        return new GanttDate(startOfQuarter(this.value));
-    }
-    startOfYear() {
-        return new GanttDate(startOfYear(this.value));
-    }
-    endOfDay() {
-        return new GanttDate(endOfDay(this.value));
-    }
-    endOfWeek(options) {
-        return new GanttDate(endOfWeek(this.value, options));
-    }
-    endOfMonth() {
-        return new GanttDate(endOfMonth(this.value));
-    }
-    endOfQuarter() {
-        return new GanttDate(endOfQuarter(this.value));
-    }
-    endOfYear() {
-        return new GanttDate(endOfYear(this.value));
-    }
-    getUnixTime() {
-        return getUnixTime(this.value);
-    }
-    format(mat, options) {
-        return format(this.value, mat, options);
-    }
-    isWeekend() {
-        return isWeekend(this.value);
-    }
-    isToday() {
-        return isToday(this.value);
-    }
-}
-
-var GanttViewType;
-(function (GanttViewType) {
-    GanttViewType["day"] = "day";
-    GanttViewType["quarter"] = "quarter";
-    GanttViewType["month"] = "month";
-    GanttViewType["year"] = "year";
-    GanttViewType["week"] = "week";
-})(GanttViewType || (GanttViewType = {}));
-
-var GanttItemType;
-(function (GanttItemType) {
-    GanttItemType["bar"] = "bar";
-    GanttItemType["range"] = "range";
-    GanttItemType["custom"] = "custom";
-})(GanttItemType || (GanttItemType = {}));
-class GanttItemInternal {
-    constructor(item, options) {
-        this.refs$ = new BehaviorSubject(null);
-        this.origin = item;
-        this.id = this.origin.id;
-        this.links = this.origin.links || [];
-        this.color = this.origin.color;
-        this.barStyle = this.origin.barStyle;
-        this.linkable = this.origin.linkable === undefined ? true : this.origin.linkable;
-        this.draggable = this.origin.draggable === undefined ? true : this.origin.draggable;
-        this.expandable = this.origin.expandable || (this.origin.children || []).length > 0;
-        this.expanded = this.origin.expanded === undefined ? false : this.origin.expanded;
-        this.start = item.start ? new GanttDate(item.start) : null;
-        this.end = item.end ? new GanttDate(item.end) : null;
-        this.viewType = options && options.viewType ? options.viewType : GanttViewType.month;
-        this.children = (item.children || []).map((subItem) => {
-            return new GanttItemInternal(subItem, { viewType: this.viewType });
-        });
-        this.type = this.origin.type || GanttItemType.bar;
-        this.progress = this.origin.progress;
-        // fill one month when start or end is null
-        this.fillItemStartOrEnd(item);
-    }
-    get refs() {
-        return this.refs$.getValue();
-    }
-    fillItemStartOrEnd(item) {
-        let addInterval;
-        switch (this.viewType) {
-            case GanttViewType.day:
-            case GanttViewType.week:
-                addInterval = 0;
-                break;
-            default:
-                addInterval = 30;
-                break;
-        }
-        if (item.start && !item.end) {
-            this.end = new GanttDate(item.start).addDays(addInterval).endOfDay();
-        }
-        if (!item.start && item.end) {
-            this.start = new GanttDate(item.end).addDays(-addInterval).startOfDay();
-        }
-    }
-    updateRefs(refs) {
-        this.refs$.next(refs);
-    }
-    updateDate(start, end) {
-        this.start = start.startOfDay();
-        this.end = end.endOfDay();
-        this.origin.start = this.start.getUnixTime();
-        this.origin.end = this.end.getUnixTime();
-    }
-    addChildren(items) {
-        this.origin.children = items;
-        this.children = (items || []).map((subItem) => {
-            return new GanttItemInternal(subItem, { viewType: this.viewType });
-        });
-    }
-    setExpand(expanded) {
-        this.expanded = expanded;
-        this.origin.expanded = expanded;
-    }
-    addLink(linkId) {
-        this.links = [...this.links, linkId];
-        this.origin.links = this.links;
-    }
-}
-
-class GanttGroupInternal {
-    constructor(group) {
-        this.refs = {};
-        this.id = group.id;
-        this.origin = group;
-        this.title = group.title;
-        this.expanded = group.expanded === undefined ? true : group.expanded;
-        this.items = [];
-        this.mergedItems = [[]];
-        this.class = group.class || '';
-    }
-    setExpand(expanded) {
-        this.expanded = expanded;
-        this.origin.expanded = expanded;
-    }
-}
-
-const primaryDatePointTop = 18;
-const secondaryDatePointTop = 36;
-const viewOptions = {
-    min: new GanttDate().addYears(-1).startOfYear(),
-    max: new GanttDate().addYears(1).endOfYear()
-};
-class GanttView {
-    constructor(start, end, options) {
-        this.showTimeline = true;
-        this.options = Object.assign({}, viewOptions, options);
-        const startDate = start.isCustom
-            ? this.startOf(start.date)
-            : this.startOf(start.date.value < this.options.start.value ? start.date : this.options.start);
-        const endDate = end.isCustom
-            ? this.endOf(end.date)
-            : this.endOf(end.date.value > this.options.end.value ? end.date : this.options.end);
-        this.start$ = new BehaviorSubject(startDate);
-        this.end$ = new BehaviorSubject(endDate);
-        this.initialize();
-    }
-    get start() {
-        return this.start$.getValue();
-    }
-    get end() {
-        return this.end$.getValue();
-    }
-    getDateIntervalWidth(start, end) {
-        let result = 0;
-        const days = differenceInDays(end.value, start.value);
-        for (let i = 0; i < Math.abs(days); i++) {
-            result += this.getDayOccupancyWidth(start.addDays(i));
-        }
-        result = days >= 0 ? result : -result;
-        return Number(result.toFixed(3));
-    }
-    initialize() {
-        this.primaryDatePoints = this.getPrimaryDatePoints();
-        this.secondaryDatePoints = this.getSecondaryDatePoints();
-        this.width = this.getWidth();
-        this.cellWidth = this.getCellWidth();
-        this.primaryWidth = this.getPrimaryWidth();
-    }
-    addStartDate() {
-        const start = this.startOf(this.start.add(this.options.addAmount * -1, this.options.addUnit));
-        if (start.value >= this.options.min.value) {
-            const origin = this.start;
-            this.start$.next(start);
-            this.initialize();
-            return { start: this.start, end: origin };
-        }
-        return null;
-    }
-    addEndDate() {
-        const end = this.endOf(this.end.add(this.options.addAmount, this.options.addUnit));
-        if (end.value <= this.options.max.value) {
-            const origin = this.end;
-            this.end$.next(end);
-            this.initialize();
-            return { start: origin, end: this.end };
-        }
-        return null;
-    }
-    updateDate(start, end) {
-        start = this.startOf(start);
-        end = this.endOf(end);
-        if (start.value < this.start.value) {
-            this.start$.next(start);
-        }
-        if (end.value > this.end.value) {
-            this.end$.next(end);
-        }
-        this.initialize();
-    }
-    // 获取View的宽度
-    getWidth() {
-        return this.getCellWidth() * this.secondaryDatePoints.length;
-    }
-    // 获取单个网格的宽度
-    getCellWidth() {
-        return this.options.cellWidth;
-    }
-    // 获取当前时间的X坐标
-    getTodayXPoint() {
-        const toady = new GanttDate().startOfDay();
-        if (toady.value > this.start.value && toady.value < this.end.value) {
-            const x = this.getXPointByDate(toady) + this.getDayOccupancyWidth(toady) / 2;
-            return x;
-        }
-        else {
-            return null;
-        }
-    }
-    // 获取指定时间的X坐标
-    getXPointByDate(date) {
-        return this.getDateIntervalWidth(this.start, date);
-    }
-    // 根据X坐标获取对应时间
-    getDateByXPoint(x) {
-        const indexOfSecondaryDate = Math.floor(x / this.getCellWidth());
-        const matchDate = this.secondaryDatePoints[indexOfSecondaryDate];
-        const dayWidth = this.getDayOccupancyWidth(matchDate === null || matchDate === void 0 ? void 0 : matchDate.start);
-        if (dayWidth === this.getCellWidth()) {
-            return matchDate === null || matchDate === void 0 ? void 0 : matchDate.start;
-        }
-        else {
-            const day = Math.floor((x % this.getCellWidth()) / dayWidth) + 1;
-            if (this.getCellWidth() / dayWidth === 7) {
-                return matchDate === null || matchDate === void 0 ? void 0 : matchDate.start.addDays(day);
-            }
-            return matchDate === null || matchDate === void 0 ? void 0 : matchDate.start.setDate(day);
-        }
-    }
-    // 获取指定时间范围的宽度
-    getDateRangeWidth(start, end) {
-        // addSeconds(1) 是因为计算相差天会以一个整天来计算 end时间一般是59分59秒不是一个整天，所以需要加1
-        return this.getDateIntervalWidth(start, end.addSeconds(1));
-    }
-}
-
-const viewOptions$1 = {
-    start: new GanttDate().startOfQuarter().addQuarters(-1),
-    end: new GanttDate().endOfQuarter().addQuarters(2),
-    cellWidth: 280,
-    addAmount: 1,
-    addUnit: 'quarter'
-};
-class GanttViewMonth extends GanttView {
-    constructor(start, end, options) {
-        super(start, end, Object.assign({}, viewOptions$1, options));
-    }
-    startOf(date) {
-        return date.startOfQuarter();
-    }
-    endOf(date) {
-        return date.endOfQuarter();
-    }
-    getPrimaryWidth() {
-        return this.getCellWidth() * 3;
-    }
-    getDayOccupancyWidth(date) {
-        return this.cellWidth / date.getDaysInMonth();
-    }
-    getPrimaryDatePoints() {
-        const quarters = differenceInCalendarQuarters(this.end.addSeconds(1).value, this.start.value);
-        const points = [];
-        for (let i = 0; i < quarters; i++) {
-            const start = this.start.addQuarters(i);
-            const point = new GanttDatePoint(start, start.format('yyyy年QQQ'), (this.getCellWidth() * 3) / 2 + i * (this.getCellWidth() * 3), primaryDatePointTop);
-            points.push(point);
-        }
-        return points;
-    }
-    getSecondaryDatePoints() {
-        const months = eachMonthOfInterval({ start: this.start.value, end: this.end.value });
-        const points = [];
-        for (let i = 0; i < months.length; i++) {
-            const start = new GanttDate(months[i]);
-            const point = new GanttDatePoint(start, `${start.getMonth() + 1}月`, i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
-            points.push(point);
-        }
-        return points;
-    }
-}
-
-const viewOptions$2 = {
-    start: new GanttDate().addYears(-1).startOfYear(),
-    end: new GanttDate().addYears(1).endOfYear(),
-    min: new GanttDate().addYears(-2).startOfYear(),
-    max: new GanttDate().addYears(2).endOfYear(),
-    cellWidth: 500,
-    addAmount: 1,
-    addUnit: 'year'
-};
-class GanttViewQuarter extends GanttView {
-    constructor(start, end, options) {
-        super(start, end, Object.assign({}, viewOptions$2, options));
-    }
-    startOf(date) {
-        return date.startOfYear();
-    }
-    endOf(date) {
-        return date.endOfYear();
-    }
-    getPrimaryWidth() {
-        return this.getCellWidth() * 4;
-    }
-    getDayOccupancyWidth(date) {
-        return this.cellWidth / date.getDaysInQuarter();
-    }
-    getPrimaryDatePoints() {
-        const years = eachYearOfInterval({ start: this.start.value, end: this.end.value });
-        const points = [];
-        for (let i = 0; i < years.length; i++) {
-            const start = new GanttDate(years[i]);
-            const point = new GanttDatePoint(start, `${start.format('yyyy')}年`, (this.getCellWidth() * 4) / 2 + i * (this.getCellWidth() * 4), primaryDatePointTop);
-            points.push(point);
-        }
-        return points;
-    }
-    getSecondaryDatePoints() {
-        const quarters = differenceInCalendarQuarters(this.end.value, this.start.value);
-        const points = [];
-        for (let i = 0; i <= quarters; i++) {
-            const start = this.start.addQuarters(i);
-            const point = new GanttDatePoint(start, start.format('QQQ'), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
-            points.push(point);
-        }
-        return points;
-    }
-}
-
-const viewOptions$3 = {
-    cellWidth: 35,
-    start: new GanttDate().startOfYear().startOfWeek({ weekStartsOn: 1 }),
-    end: new GanttDate().endOfYear().endOfWeek({ weekStartsOn: 1 }),
-    addAmount: 1,
-    addUnit: 'month'
-};
-class GanttViewDay extends GanttView {
-    constructor(start, end, options) {
-        super(start, end, Object.assign({}, viewOptions$3, options));
-        this.showWeekBackdrop = true;
-        this.showTimeline = false;
-    }
-    startOf(date) {
-        return date.startOfWeek({ weekStartsOn: 1 });
-    }
-    endOf(date) {
-        return date.endOfWeek({ weekStartsOn: 1 });
-    }
-    getPrimaryWidth() {
-        return this.getCellWidth() * 7;
-    }
-    getDayOccupancyWidth() {
-        return this.cellWidth;
-    }
-    getPrimaryDatePoints() {
-        const weeks = eachWeekOfInterval({ start: this.start.value, end: this.end.addSeconds(1).value }, { weekStartsOn: 1 });
-        const points = [];
-        for (let i = 0; i < weeks.length; i++) {
-            const weekStart = new GanttDate(weeks[i]);
-            const increaseWeek = weekStart.getDaysInMonth() - weekStart.getDate() >= 3 ? 0 : 1;
-            const point = new GanttDatePoint(weekStart, weekStart.addWeeks(increaseWeek).format('yyyy年MM月'), (this.getCellWidth() * 7) / 2 + i * (this.getCellWidth() * 7), primaryDatePointTop);
-            points.push(point);
-        }
-        return points;
-    }
-    getSecondaryDatePoints() {
-        const days = eachDayOfInterval({ start: this.start.value, end: this.end.value });
-        const points = [];
-        for (let i = 0; i < days.length; i++) {
-            const start = new GanttDate(days[i]);
-            const point = new GanttDatePoint(start, start.getDate().toString(), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop, {
-                isWeekend: start.isWeekend(),
-                isToday: start.isToday()
-            });
-            points.push(point);
-        }
-        return points;
-    }
-}
-
-const viewOptions$4 = {
-    cellWidth: 280,
-    start: new GanttDate().startOfYear().startOfWeek({ weekStartsOn: 1 }),
-    end: new GanttDate().endOfYear().endOfWeek({ weekStartsOn: 1 }),
-    addAmount: 1,
-    addUnit: 'month'
-};
-class GanttViewWeek extends GanttView {
-    constructor(start, end, options) {
-        super(start, end, Object.assign({}, viewOptions$4, options));
-    }
-    startOf(date) {
-        return date.startOfWeek({ weekStartsOn: 1 });
-    }
-    endOf(date) {
-        return date.endOfWeek({ weekStartsOn: 1 });
-    }
-    getPrimaryWidth() {
-        return this.getCellWidth();
-    }
-    getDayOccupancyWidth() {
-        return this.cellWidth / 7;
-    }
-    getPrimaryDatePoints() {
-        const weeks = eachWeekOfInterval({ start: this.start.value, end: this.end.addSeconds(1).value }, { weekStartsOn: 1 });
-        const points = [];
-        for (let i = 0; i < weeks.length; i++) {
-            const weekStart = new GanttDate(weeks[i]);
-            const increaseWeek = weekStart.getDaysInMonth() - weekStart.getDate() >= 3 ? 0 : 1;
-            const point = new GanttDatePoint(weekStart, weekStart.addWeeks(increaseWeek).format('yyyy年'), this.getCellWidth() / 2 + i * this.getCellWidth(), primaryDatePointTop);
-            points.push(point);
-        }
-        return points;
-    }
-    getSecondaryDatePoints() {
-        const weeks = eachWeekOfInterval({ start: this.start.value, end: this.end.value });
-        const points = [];
-        for (let i = 0; i < weeks.length; i++) {
-            const start = new GanttDate(weeks[i]);
-            const point = new GanttDatePoint(start, `第${start.format('w')}周`, i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
-            points.push(point);
-        }
-        return points;
-    }
-}
-
-const viewOptions$5 = {
-    cellWidth: 480,
-    start: new GanttDate().addYears(-1).startOfYear(),
-    end: new GanttDate().addYears(1).endOfYear(),
-    addAmount: 1,
-    addUnit: 'year'
-};
-class GanttViewYear extends GanttView {
-    constructor(start, end, options) {
-        super(start, end, Object.assign({}, viewOptions$5, options));
-    }
-    startOf(date) {
-        return date.startOfYear();
-    }
-    endOf(date) {
-        return date.endOfYear();
-    }
-    getPrimaryWidth() {
-        return this.getCellWidth();
-    }
-    getDayOccupancyWidth(date) {
-        return this.cellWidth / date.getDaysInYear();
-    }
-    getPrimaryDatePoints() {
-        const years = eachYearOfInterval({ start: this.start.value, end: this.end.value });
-        const points = [];
-        for (let i = 0; i < years.length; i++) {
-            const start = new GanttDate(years[i]);
-            const point = new GanttDatePoint(start, ``, this.getCellWidth() / 2 + i * this.getCellWidth(), primaryDatePointTop);
-            points.push(point);
-        }
-        return points;
-    }
-    getSecondaryDatePoints() {
-        const years = differenceInCalendarYears(this.end.value, this.start.value);
-        const points = [];
-        const pointTop = 27;
-        for (let i = 0; i <= years; i++) {
-            const start = this.start.addYears(i);
-            const point = new GanttDatePoint(start, `${start.format('yyyy')}年`, i * this.getCellWidth() + this.getCellWidth() / 2, pointTop);
-            points.push(point);
-        }
-        return points;
-    }
-}
-
-function createViewFactory(type, start, end, options) {
-    switch (type) {
-        case GanttViewType.month:
-            return new GanttViewMonth(start, end, options);
-        case GanttViewType.week:
-            return new GanttViewWeek(start, end, options);
-        case GanttViewType.quarter:
-            return new GanttViewQuarter(start, end, options);
-        case GanttViewType.day:
-            return new GanttViewDay(start, end, options);
-        case GanttViewType.year:
-            return new GanttViewYear(start, end, options);
-        default:
-            throw new Error('gantt view type invalid');
-    }
-}
-
-const defaultStyles = {
-    lineHeight: 44,
-    barHeight: 22
-};
-const headerHeight = 44;
-const sideWidth = 400;
-const sideMiddleWidth = 500;
-const sideMaxWidth = 600;
-const sideMinWidth = 400;
-const barBackground = '#348fe4';
-const rangeHeight = 17;
-const todayHeight = 24;
-const todayWidth = 35;
-const todayBorderRadius = 4;
-
-function isNumber(value) {
-    return typeof value === 'number';
-}
-function isString(value) {
-    return typeof value === 'string';
-}
-function isUndefined(value) {
-    return value === undefined;
-}
-function hexToRgb(color, opacity = 1) {
-    if (/^#/g.test(color)) {
-        return `rgba(${parseInt(color.slice(1, 3), 16)},${parseInt(color.slice(3, 5), 16)},${parseInt(color.slice(5, 7), 16)},${opacity})`;
-    }
-    else {
-        return color;
-    }
-}
-function uniqBy(array, key) {
-    const valuesMap = {};
-    const result = [];
-    (array || []).forEach((value) => {
-        const _key = value[key];
-        if (!valuesMap[_key]) {
-            valuesMap[_key] = value;
-            result.push(value);
-        }
-    });
-    return result;
-}
-function flatten(array) {
-    return array.reduce((pre, cur) => {
-        return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
-    }, []);
-}
-function recursiveItems(items) {
-    const result = [];
-    (items || []).forEach((item) => {
-        result.push(item);
-        if (item.expanded && item.children) {
-            result.push(...recursiveItems(item.children));
-        }
-    });
-    return result;
-}
-
-class GanttUpper {
-    constructor(elementRef, cdr, ngZone) {
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this.ngZone = ngZone;
-        this.originItems = [];
-        this.originGroups = [];
-        this.viewType = GanttViewType.month;
-        this.showTodayLine = true;
-        this.loadOnScroll = new EventEmitter();
-        this.dragStarted = new EventEmitter();
-        this.dragEnded = new EventEmitter();
-        this.barClick = new EventEmitter();
-        this.linkDragEnded = new EventEmitter();
-        this.items = [];
-        this.groups = [];
-        this.viewChange = new EventEmitter();
-        this.expandChange = new EventEmitter();
-        this.firstChange = true;
-        this.unsubscribe$ = new Subject();
-        this.expandedItemIds = [];
-        this.ganttClass = true;
-    }
-    get element() {
-        return this.elementRef.nativeElement;
-    }
-    createView() {
-        const viewDate = this.getViewDate();
-        this.view = createViewFactory(this.viewType, viewDate.start, viewDate.end, this.viewOptions);
-    }
-    setupGroups() {
-        const collapsedIds = this.groups.filter((group) => group.expanded === false).map((group) => group.id);
-        this.groupsMap = {};
-        this.groups = [];
-        this.originGroups.forEach((origin) => {
-            const group = new GanttGroupInternal(origin);
-            group.expanded = !collapsedIds.includes(group.id);
-            this.groupsMap[group.id] = group;
-            this.groups.push(group);
-        });
-    }
-    setupItems() {
-        this.items = [];
-        this.originItems = uniqBy(this.originItems, 'id');
-        // 根据上一次数据展开状态同步新的数据展开状态
-        this.originItems.forEach((item) => {
-            if (!this.firstChange) {
-                item.expanded = item.expanded || this.expandedItemIds.includes(item.id);
-            }
-        });
-        if (this.groups.length > 0) {
-            this.originItems.forEach((origin) => {
-                const group = this.groupsMap[origin.group_id];
-                if (group) {
-                    const item = new GanttItemInternal(origin, { viewType: this.viewType });
-                    group.items.push(item);
-                }
-            });
-        }
-        else {
-            this.originItems.forEach((origin) => {
-                const item = new GanttItemInternal(origin, { viewType: this.viewType });
-                this.items.push(item);
-            });
-        }
-    }
-    setupExpandedState() {
-        let items = [];
-        if (this.items.length > 0) {
-            items = recursiveItems(this.items);
-        }
-        else {
-            items = flatten(this.groups.map((group) => recursiveItems(group.items)));
-        }
-        this.expandedItemIds = [];
-        items.forEach((item) => {
-            if (item.origin.expanded) {
-                this.expandedItemIds.push(item.id);
-            }
-        });
-    }
-    getViewDate() {
-        let start = this.start;
-        let end = this.end;
-        if (!this.start || !this.end) {
-            this.originItems.forEach((item) => {
-                if (item.start && !this.start) {
-                    start = start ? Math.min(start, item.start) : item.start;
-                }
-                if (item.end && !this.end) {
-                    end = end ? Math.max(end, item.end) : item.end;
-                }
-            });
-        }
-        return {
-            start: {
-                date: new GanttDate(start),
-                isCustom: this.start ? true : false
-            },
-            end: {
-                date: new GanttDate(end),
-                isCustom: this.end ? true : false
-            }
-        };
-    }
-    computeRefs() {
-        this.groups.forEach((group) => {
-            const groupItems = recursiveItems(group.items);
-            this.computeItemsRefs(...groupItems);
-        });
-        const items = recursiveItems(this.items);
-        this.computeItemsRefs(...items);
-    }
-    expandGroups(expanded) {
-        this.groups.forEach((group) => {
-            group.setExpand(expanded);
-        });
-        this.expandChange.next();
-        this.cdr.detectChanges();
-    }
-    onInit() {
-        this.styles = Object.assign({}, defaultStyles, this.styles);
-        this.createView();
-        this.setupGroups();
-        this.setupItems();
-        this.computeRefs();
-        this.firstChange = false;
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            this.element.style.opacity = '1';
-            this.dragContainer.dragStarted.subscribe((event) => {
-                this.dragStarted.emit(event);
-            });
-            this.dragContainer.dragEnded.subscribe((event) => {
-                this.dragEnded.emit(event);
-                this.computeRefs();
-                this.detectChanges();
-            });
-        });
-        this.view.start$.pipe(skip(1), takeUntil(this.unsubscribe$)).subscribe(() => {
-            this.computeRefs();
-        });
-    }
-    onChanges(changes) {
-        if (!this.firstChange) {
-            if (changes.viewType && changes.viewType.currentValue) {
-                this.createView();
-                this.setupGroups();
-                this.setupItems();
-                this.computeRefs();
-                this.viewChange.emit(this.view);
-            }
-            if (changes.originItems || changes.originGroups) {
-                this.setupExpandedState();
-                this.setupGroups();
-                this.setupItems();
-                this.computeRefs();
-            }
-        }
-    }
-    onDestroy() {
-        this.unsubscribe$.next();
-        this.unsubscribe$.complete();
-    }
-    computeItemsRefs(...items) {
-        items.forEach((item) => {
-            item.updateRefs({
-                width: item.start && item.end ? this.view.getDateRangeWidth(item.start.startOfDay(), item.end.endOfDay()) : 0,
-                x: item.start ? this.view.getXPointByDate(item.start) : 0,
-                y: (this.styles.lineHeight - this.styles.barHeight) / 2 - 1
-            });
-        });
-    }
-    trackBy(item, index) {
-        return item.id || index;
-    }
-    detectChanges() {
-        this.cdr.detectChanges();
-    }
-    expandGroup(group) {
-        group.setExpand(!group.expanded);
-        this.expandChange.emit();
-        this.cdr.detectChanges();
-    }
-    // public functions
-    expandAll() {
-        this.expandGroups(true);
-    }
-    collapseAll() {
-        this.expandGroups(false);
-    }
-}
-GanttUpper.decorators = [
-    { type: Directive }
-];
-GanttUpper.ctorParameters = () => [
-    { type: ElementRef },
-    { type: ChangeDetectorRef },
-    { type: NgZone }
-];
-GanttUpper.propDecorators = {
-    originItems: [{ type: Input, args: ['items',] }],
-    originGroups: [{ type: Input, args: ['groups',] }],
-    viewType: [{ type: Input }],
-    start: [{ type: Input }],
-    end: [{ type: Input }],
-    showTodayLine: [{ type: Input }],
-    draggable: [{ type: Input }],
-    styles: [{ type: Input }],
-    viewOptions: [{ type: Input }],
-    disabledLoadOnScroll: [{ type: Input }],
-    loadOnScroll: [{ type: Output }],
-    dragStarted: [{ type: Output }],
-    dragEnded: [{ type: Output }],
-    barClick: [{ type: Output }],
-    barTemplate: [{ type: ContentChild, args: ['bar', { static: true },] }],
-    rangeTemplate: [{ type: ContentChild, args: ['range', { static: true },] }],
-    itemTemplate: [{ type: ContentChild, args: ['item', { static: true },] }],
-    groupTemplate: [{ type: ContentChild, args: ['group', { static: true },] }],
-    groupHeaderTemplate: [{ type: ContentChild, args: ['groupHeader', { static: true },] }],
-    ganttClass: [{ type: HostBinding, args: ['class.gantt',] }]
-};
-const GANTT_UPPER_TOKEN = new InjectionToken('GANTT_UPPER_TOKEN');
-
-class NgxGanttTableColumnComponent {
-    constructor(ganttUpper) {
-        this.ganttUpper = ganttUpper;
-    }
-    set width(width) {
-        this.columnWidth = coerceCssPixelValue(width);
-    }
-    ngOnInit() { }
-}
-NgxGanttTableColumnComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ngx-gantt-column',
-                template: ''
-            },] }
-];
-NgxGanttTableColumnComponent.ctorParameters = () => [
-    { type: GanttUpper, decorators: [{ type: Inject, args: [GANTT_UPPER_TOKEN,] }] }
-];
-NgxGanttTableColumnComponent.propDecorators = {
-    width: [{ type: Input }],
-    name: [{ type: Input }],
-    templateRef: [{ type: ContentChild, args: ['cell', { static: true },] }],
-    headerTemplateRef: [{ type: ContentChild, args: ['header', { static: true },] }]
-};
-
-class NgxGanttTableComponent {
-    constructor() {
-        this.columnChanges = new EventEmitter();
-    }
-    ngOnInit() { }
-}
-NgxGanttTableComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ngx-gantt-table',
-                template: ''
-            },] }
-];
-NgxGanttTableComponent.ctorParameters = () => [];
-NgxGanttTableComponent.propDecorators = {
-    columnChanges: [{ type: Output }]
-};
-
-const defaultColumnWidth = 100;
-const minColumnWidth = 80;
-class NgxGanttComponent extends GanttUpper {
-    constructor(elementRef, cdr, ngZone) {
-        super(elementRef, cdr, ngZone);
-        this.maxLevel = 2;
-        this.linkDragStarted = new EventEmitter();
-        this.linkDragEnded = new EventEmitter();
-        this.lineClick = new EventEmitter();
-        this.ngUnsubscribe$ = new Subject();
-        this.sideTableWidth = sideWidth;
-    }
-    ngOnInit() {
-        super.onInit();
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            this.dragContainer.linkDragStarted.pipe(takeUntil(this.ngUnsubscribe$)).subscribe((event) => {
-                this.linkDragStarted.emit(event);
-            });
-            this.dragContainer.linkDragEnded.pipe(takeUntil(this.ngUnsubscribe$)).subscribe((event) => {
-                this.linkDragEnded.emit(event);
-            });
-        });
-    }
-    ngAfterViewInit() {
-        this.columns.changes.pipe(startWith(true), takeUntil(this.ngUnsubscribe$)).subscribe(() => {
-            this.columns.forEach((column) => {
-                if (!column.columnWidth) {
-                    column.columnWidth = coerceCssPixelValue(defaultColumnWidth);
-                }
-            });
-            this.cdr.detectChanges();
-        });
-    }
-    ngOnChanges(changes) {
-        super.onChanges(changes);
-    }
-    expandChildren(item) {
-        if (!item.expanded) {
-            item.setExpand(true);
-            if (this.async && this.childrenResolve && item.children.length === 0) {
-                item.loading = true;
-                this.childrenResolve(item.origin)
-                    .pipe(take(1), finalize(() => {
-                    item.loading = false;
-                    this.expandChange.emit();
-                    this.cdr.detectChanges();
-                }))
-                    .subscribe((items) => {
-                    item.addChildren(items);
-                    this.computeItemsRefs(...item.children);
-                });
-            }
-            else {
-                this.computeItemsRefs(...item.children);
-                this.expandChange.emit();
-            }
-        }
-        else {
-            item.setExpand(false);
-            this.expandChange.emit();
-        }
-    }
-    ngOnDestroy() {
-        super.onDestroy();
-    }
-}
-NgxGanttComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ngx-gantt',
-                template: "<ngx-gantt-root>\n  <ng-template #sideTemplate>\n    <gantt-table [groups]=\"groups\" [items]=\"items\" [columns]=\"columns\" [groupTemplate]=\"groupTemplate\" [emptyTemplate]=\"tableEmptyTemplate\"></gantt-table>\n  </ng-template>\n  <ng-template #mainTemplate>\n    <gantt-main\n      [groups]=\"groups\"\n      [items]=\"items\"\n      [groupHeaderTemplate]=\"groupHeaderTemplate\"\n      [itemTemplate]=\"itemTemplate\"\n      [barTemplate]=\"barTemplate\"\n      [rangeTemplate]=\"rangeTemplate\"\n      (barClick)=\"barClick.emit($event)\"\n      (lineClick)=\"lineClick.emit($event)\"\n    >\n    </gantt-main>\n  </ng-template>\n</ngx-gantt-root>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                providers: [
-                    {
-                        provide: GANTT_UPPER_TOKEN,
-                        useExisting: NgxGanttComponent
-                    }
-                ]
-            },] }
-];
-NgxGanttComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: ChangeDetectorRef },
-    { type: NgZone }
-];
-NgxGanttComponent.propDecorators = {
-    maxLevel: [{ type: Input }],
-    async: [{ type: Input }],
-    childrenResolve: [{ type: Input }],
-    linkable: [{ type: Input }],
-    linkDragStarted: [{ type: Output }],
-    linkDragEnded: [{ type: Output }],
-    lineClick: [{ type: Output }],
-    table: [{ type: ContentChild, args: [NgxGanttTableComponent,] }],
-    columns: [{ type: ContentChildren, args: [NgxGanttTableColumnComponent, { descendants: true },] }],
-    tableEmptyTemplate: [{ type: ContentChild, args: ['tableEmpty', { static: true },] }]
-};
-
-const mainHeight = 5000;
-class GanttCalendarComponent {
-    constructor(ganttUpper, ngZone, elementRef) {
-        this.ganttUpper = ganttUpper;
-        this.ngZone = ngZone;
-        this.elementRef = elementRef;
-        this.unsubscribe$ = new Subject();
-        this.headerHeight = headerHeight;
-        this.mainHeight = mainHeight;
-        this.todayHeight = todayHeight;
-        this.todayWidth = todayWidth;
-        this.todayBorderRadius = todayBorderRadius;
-        this.viewTypes = GanttViewType;
-        this.className = true;
-    }
-    get view() {
-        return this.ganttUpper.view;
-    }
-    setTodayPoint() {
-        const x = this.view.getTodayXPoint();
-        const today = new GanttDate().getDate();
-        const todayEle = this.elementRef.nativeElement.getElementsByClassName('gantt-calendar-today-overlay')[0];
-        const rect = this.elementRef.nativeElement.getElementsByClassName('today-rect')[0];
-        const line = this.elementRef.nativeElement.getElementsByClassName('today-line')[0];
-        if (isNumber(x)) {
-            if (rect) {
-                rect.style.left = `${x - todayWidth / 2}px`;
-                rect.style.top = `${headerHeight - todayHeight}px`;
-                rect.innerHTML = today.toString();
-            }
-            if (line) {
-                line.style.left = `${x}px`;
-                line.style.top = `${headerHeight}px`;
-                line.style.bottom = `${-mainHeight}px`;
-            }
-        }
-        else {
-            todayEle.style.display = 'none';
-        }
-    }
-    ngOnInit() {
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            merge(this.ganttUpper.viewChange, this.ganttUpper.view.start$)
-                .pipe(takeUntil(this.unsubscribe$))
-                .subscribe(() => {
-                this.setTodayPoint();
-            });
-        });
-    }
-    ngAfterViewInit() { }
-    ngOnChanges(changes) { }
-    trackBy(point, index) {
-        return point.text || index;
-    }
-    ngOnDestroy() {
-        this.unsubscribe$.next();
-        this.unsubscribe$.complete();
-    }
-}
-GanttCalendarComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'gantt-calendar-overlay',
-                template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n  <span class=\"today-line\" *ngIf=\"ganttUpper.showTodayLine\"> </span>\n</div>\n\n<svg class=\"gantt-calendar-overlay-main\" [attr.width]=\"view.width\" [attr.height]=\"headerHeight\">\n  <g>\n    <text class=\"primary-text\" *ngFor=\"let point of view.primaryDatePoints; trackBy: trackBy\" [attr.x]=\"point.x\" [attr.y]=\"point.y\">\n      {{ point.text }}\n    </text>\n    <ng-container *ngFor=\"let point of view.secondaryDatePoints; trackBy: trackBy\">\n      <text class=\"secondary-text\" [class.secondary-text-weekend]=\"point.additions?.isWeekend\" [attr.x]=\"point.x\" [attr.y]=\"point.y\">\n        {{ point.text }}\n      </text>\n    </ng-container>\n\n    <g>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n\n    <g>\n      <line [attr.x1]=\"0\" [attr.x2]=\"view.width\" [attr.y1]=\"headerHeight\" [attr.y2]=\"headerHeight\" class=\"header-line\"></line>\n    </g>\n  </g>\n  <g>\n    <g *ngIf=\"view.showTimeline\">\n      <line\n        *ngFor=\"let point of view.secondaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.cellWidth\"\n        [attr.x2]=\"(i + 1) * view.cellWidth\"\n        [attr.y1]=\"headerHeight\"\n        [attr.y2]=\"mainHeight\"\n        class=\"secondary-line\"\n      ></line>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n  </g>\n</svg>\n"
-            },] }
-];
-GanttCalendarComponent.ctorParameters = () => [
-    { type: GanttUpper, decorators: [{ type: Inject, args: [GANTT_UPPER_TOKEN,] }] },
-    { type: NgZone },
-    { type: ElementRef }
-];
-GanttCalendarComponent.propDecorators = {
-    className: [{ type: HostBinding, args: ['class.gantt-calendar-overlay',] }]
-};
-
-class GanttTableComponent {
-    constructor(gantt, elementRef) {
-        this.gantt = gantt;
-        this.elementRef = elementRef;
-        this.ganttTableClass = true;
-        this.ganttTableEmptyClass = false;
-    }
-    set columns(columns) {
-        columns.forEach((column) => {
-            if (!column.columnWidth) {
-                column.columnWidth = coerceCssPixelValue(defaultColumnWidth);
-            }
-        });
-        this.columnList = columns;
-    }
-    ngOnInit() { }
-    ngOnChanges(changes) {
-        var _a, _b;
-        if (!((_a = changes.groups.currentValue) === null || _a === void 0 ? void 0 : _a.length) && !((_b = changes.items.currentValue) === null || _b === void 0 ? void 0 : _b.length)) {
-            this.ganttTableEmptyClass = true;
-        }
-        else {
-            this.ganttTableEmptyClass = false;
-        }
-    }
-    dragFixed(config) {
-        if (config.movedWidth < config.minWidth) {
-            config.target.style.transform = `translate3d(${config.minWidth - config.originWidth}px, 0, 0)`;
-        }
-    }
-    expandGroup(group) {
-        this.gantt.expandGroup(group);
-    }
-    expandChildren(item) {
-        this.gantt.expandChildren(item);
-    }
-    dragStarted(event) {
-        const target = event.source.element.nativeElement;
-        this.dragStartLeft = target.getBoundingClientRect().left;
-    }
-    dragMoved(event, column) {
-        const target = event.source.element.nativeElement;
-        const left = target.getBoundingClientRect().left;
-        let originWidth;
-        let movedWidth;
-        let minWidth;
-        if (column) {
-            originWidth = parseInt(column.columnWidth, 10);
-            movedWidth = originWidth + (left - this.dragStartLeft);
-            minWidth = minColumnWidth;
-        }
-        else {
-            originWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
-            movedWidth = originWidth + (left - this.dragStartLeft);
-            minWidth = minColumnWidth * this.columnList.length;
-        }
-        this.dragFixed({
-            target,
-            originWidth,
-            movedWidth,
-            minWidth
-        });
-        this.showAuxiliaryLine(event);
-    }
-    columnDragEnded(event, column) {
-        const target = event.source.element.nativeElement;
-        const left = target.getBoundingClientRect().left;
-        const width = parseInt(column.columnWidth, 10) + (left - this.dragStartLeft);
-        const columnWidth = Math.max(width || 0, minColumnWidth);
-        column.columnWidth = coerceCssPixelValue(columnWidth);
-        if (this.gantt.table) {
-            this.gantt.table.columnChanges.emit({ columns: this.columnList });
-        }
-        this.hideAuxiliaryLine();
-        event.source.reset();
-    }
-    tableDragEnded(event) {
-        const target = event.source.element.nativeElement;
-        const left = target.getBoundingClientRect().left;
-        const tableWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
-        const dragWidth = left - this.dragStartLeft;
-        this.columnList.forEach((column) => {
-            const lastColumnWidth = parseInt(column.columnWidth, 10);
-            const distributeWidth = parseInt(String(dragWidth * (lastColumnWidth / tableWidth)), 10);
-            const columnWidth = Math.max(lastColumnWidth + distributeWidth || 0, minColumnWidth);
-            column.columnWidth = coerceCssPixelValue(columnWidth);
-        });
-        if (this.gantt.table) {
-            this.gantt.table.columnChanges.emit({ columns: this.columnList });
-        }
-        this.hideAuxiliaryLine();
-        event.source.reset();
-    }
-    showAuxiliaryLine(event) {
-        const tableRect = this.elementRef.nativeElement.getBoundingClientRect();
-        const targetRect = event.source.element.nativeElement.getBoundingClientRect();
-        const distance = { x: targetRect.left - tableRect.left, y: targetRect.top - tableRect.top };
-        this.draglineElementRef.nativeElement.style.left = `${distance.x}px`;
-        this.draglineElementRef.nativeElement.style.display = 'block';
-    }
-    hideAuxiliaryLine() {
-        this.draglineElementRef.nativeElement.style.display = 'none';
-    }
-}
-GanttTableComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'gantt-table',
-                template: "<div class=\"gantt-table-header gantt-table-row\">\n  <div class=\"gantt-table-column\" *ngFor=\"let column of columnList; let i = index\" [style.width]=\"column.columnWidth\">\n    <ng-container *ngIf=\"column.headerTemplateRef; else default\" [ngTemplateOutlet]=\"column.headerTemplateRef\"></ng-container>\n    <ng-template #default>\n      {{ column.name }}\n    </ng-template>\n    <div\n      class=\"gantt-table-drag-trigger\"\n      cdkDrag\n      cdkDragLockAxis=\"x\"\n      cdkDragBoundary=\".gantt\"\n      (cdkDragMoved)=\"dragMoved($event, column)\"\n      (cdkDragStarted)=\"dragStarted($event)\"\n      (cdkDragEnded)=\"columnDragEnded($event, column)\"\n    ></div>\n  </div>\n</div>\n<div class=\"gantt-table-body\">\n  <ng-container *ngIf=\"!groups.length && !items.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=\"groups && groups.length > 0; else itemsTemplate\">\n    <ng-container *ngFor=\"let group of groups\">\n      <div class=\"gantt-table-group\" [ngClass]=\"group.class\">\n        <div class=\"gantt-table-group-title\" [class.expanded]=\"group.expanded\" (click)=\"expandGroup(group)\">\n          <gantt-icon class=\"expand-icon\" [iconName]=\"group.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n          <ng-container *ngIf=\"groupTemplate; else default\">\n            <ng-template\n              [ngTemplateOutlet]=\"groupTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: group.origin, group: group.origin }\"\n            ></ng-template>\n          </ng-container>\n          <ng-template #default>\n            <span class=\"group-title\">{{ group.title }}</span>\n          </ng-template>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"group.expanded\">\n        <ng-template\n          [ngTemplateOutlet]=\"ganttItems\"\n          [ngTemplateOutletContext]=\"{ group: group, items: group.items, level: 0 }\"\n        ></ng-template>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div\n  class=\"gantt-table-drag-trigger\"\n  cdkDrag\n  cdkDragLockAxis=\"x\"\n  cdkDragBoundary=\".gantt\"\n  (cdkDragMoved)=\"dragMoved($event)\"\n  (cdkDragStarted)=\"dragStarted($event)\"\n  (cdkDragEnded)=\"tableDragEnded($event)\"\n></div>\n\n<div #dragLine class=\"gantt-table-drag-auxiliary-line\"></div>\n\n<ng-template #itemsTemplate>\n  <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: items, level: 0 }\"></ng-template>\n</ng-template>\n\n<ng-template #ganttItems let-group=\"group\" let-items=\"items\" let-level=\"level\">\n  <ng-container *ngFor=\"let item of items\">\n    <div\n      class=\"gantt-table-item gantt-table-row\"\n      [class.gantt-table-item-first-level-group]=\"level === 0 && (item.type | isGanttRangeItem)\"\n      [class.gantt-table-item-with-group]=\"group\"\n      [style.height.px]=\"gantt.styles.lineHeight\"\n      [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n    >\n      <div class=\"gantt-table-column\" *ngFor=\"let column of columnList; let first = first\" [style.width]=\"column.columnWidth\">\n        <div *ngIf=\"first\" class=\"gantt-expand-icon\" [style.marginLeft.px]=\"level * 20\">\n          <ng-container *ngIf=\"level < gantt.maxLevel - 1 && item.expandable\">\n            <gantt-icon\n              *ngIf=\"!item.loading\"\n              class=\"expand-icon\"\n              [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n              (click)=\"expandChildren(item)\"\n            ></gantt-icon>\n            <gantt-icon *ngIf=\"item.loading\" [iconName]=\"'loading'\"></gantt-icon>\n          </ng-container>\n        </div>\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    </div>\n    <ng-template\n      *ngIf=\"item.children && item.expanded\"\n      [ngTemplateOutlet]=\"ganttItems\"\n      [ngTemplateOutletContext]=\"{ items: item.children, level: level + 1, group: group }\"\n    ></ng-template>\n  </ng-container>\n</ng-template>\n"
-            },] }
-];
-GanttTableComponent.ctorParameters = () => [
-    { type: NgxGanttComponent },
-    { type: ElementRef }
-];
-GanttTableComponent.propDecorators = {
-    groups: [{ type: Input }],
-    items: [{ type: Input }],
-    columns: [{ type: Input }],
-    groupTemplate: [{ type: Input }],
-    emptyTemplate: [{ type: Input }],
-    draglineElementRef: [{ type: ViewChild, args: ['dragLine', { static: true },] }],
-    ganttTableClass: [{ type: HostBinding, args: ['class.gantt-table',] }],
-    ganttTableEmptyClass: [{ type: HostBinding, args: ['class.gantt-table-empty',] }]
-};
-
-const scrollThreshold = 50;
-var ScrollDirection;
-(function (ScrollDirection) {
-    ScrollDirection[ScrollDirection["NONE"] = 0] = "NONE";
-    ScrollDirection[ScrollDirection["LEFT"] = 1] = "LEFT";
-    ScrollDirection[ScrollDirection["RIGHT"] = 2] = "RIGHT";
-})(ScrollDirection || (ScrollDirection = {}));
-class GanttDomService {
-    constructor() {
-        this.unsubscribe$ = new Subject();
-    }
-    monitorScrollChange() {
-        merge(fromEvent(this.mainContainer, 'scroll'), fromEvent(this.sideContainer, 'scroll'))
-            .pipe(takeUntil(this.unsubscribe$))
-            .subscribe((event) => {
-            this.syncScroll(event);
-        });
-        fromEvent(this.mainContainer, 'scroll')
-            .pipe(startWith(), takeUntil(this.unsubscribe$))
-            .subscribe((event) => {
-            // if (this.mainContainer.scrollLeft > 0) {
-            //     this.side.classList.add('gantt-side-has-shadow');
-            // } else {
-            //     this.side.classList.remove('gantt-side-has-shadow');
-            // }
-        });
-    }
-    syncScroll(event) {
-        const target = event.currentTarget;
-        this.calendarOverlay.scrollLeft = this.mainContainer.scrollLeft;
-        this.sideContainer.scrollTop = target.scrollTop;
-        this.mainContainer.scrollTop = target.scrollTop;
-    }
-    disableBrowserWheelEvent() {
-        const container = this.mainContainer;
-        fromEvent(container, 'wheel')
-            .pipe(takeUntil(this.unsubscribe$))
-            .subscribe((event) => {
-            const delta = event.deltaX;
-            if (!delta) {
-                return;
-            }
-            if ((container.scrollLeft + container.offsetWidth === container.scrollWidth && delta > 0) ||
-                (container.scrollLeft === 0 && delta < 0)) {
-                event.preventDefault();
-            }
-        });
-    }
-    initialize(root) {
-        this.root = root.nativeElement;
-        this.side = this.root.getElementsByClassName('gantt-side')[0];
-        this.container = this.root.getElementsByClassName('gantt-container')[0];
-        this.sideContainer = this.root.getElementsByClassName('gantt-side-container')[0];
-        this.mainContainer = this.root.getElementsByClassName('gantt-main-container')[0];
-        this.calendarOverlay = this.root.getElementsByClassName('gantt-calendar-overlay')[0];
-        this.monitorScrollChange();
-        this.disableBrowserWheelEvent();
-    }
-    getViewerScroll() {
-        return fromEvent(this.mainContainer, 'scroll').pipe(map(() => this.mainContainer.scrollLeft), pairwise(), map(([previous, current]) => {
-            const event = {
-                target: this.mainContainer,
-                direction: ScrollDirection.NONE
-            };
-            if (current - previous < 0) {
-                if (this.mainContainer.scrollLeft < scrollThreshold && this.mainContainer.scrollLeft > 0) {
-                    event.direction = ScrollDirection.LEFT;
-                }
-            }
-            if (current - previous > 0) {
-                if (this.mainContainer.scrollWidth - this.mainContainer.clientWidth - this.mainContainer.scrollLeft < scrollThreshold) {
-                    event.direction = ScrollDirection.RIGHT;
-                }
-            }
-            return event;
-        }));
-    }
-    getResize() {
-        return fromEvent(window, 'resize').pipe(auditTime(150));
-    }
-    scrollMainContainer(left) {
-        if (isNumber(left)) {
-            const scrollLeft = left - this.mainContainer.clientWidth / 2;
-            this.mainContainer.scrollLeft = scrollLeft > scrollThreshold ? scrollLeft : 0;
-            this.calendarOverlay.scrollLeft = this.mainContainer.scrollLeft;
-        }
-    }
-    ngOnDestroy() {
-        this.unsubscribe$.next();
-        this.unsubscribe$.complete();
-    }
-}
-GanttDomService.decorators = [
-    { type: Injectable }
-];
-GanttDomService.ctorParameters = () => [];
-
-class GanttDragContainer {
-    constructor() {
-        this.dragStarted = new EventEmitter();
-        this.dragEnded = new EventEmitter();
-        this.linkDragStarted = new EventEmitter();
-        this.linkDragEntered = new EventEmitter();
-        this.linkDragEnded = new EventEmitter();
-    }
-    emitLinkDragStarted(from, item) {
-        this.linkDraggingId = item.id;
-        this.linkDragFrom = from;
-        this.linkDragSource = this.linkDragFrom === 'source' ? item : null;
-        this.linkDragTarget = this.linkDragFrom === 'target' ? item : null;
-        this.linkDragStarted.emit({
-            source: this.linkDragSource && this.linkDragSource.origin,
-            target: this.linkDragTarget && this.linkDragTarget.origin
-        });
-    }
-    emitLinkDragEntered(item) {
-        if (this.linkDragFrom === 'source') {
-            this.linkDragTarget = item;
-        }
-        else {
-            this.linkDragSource = item;
-        }
-        this.linkDragEntered.emit({
-            source: this.linkDragSource.origin,
-            target: this.linkDragTarget.origin
-        });
-    }
-    emitLinkDragLeaved() {
-        if (this.linkDragFrom === 'source') {
-            this.linkDragTarget = null;
-        }
-        else {
-            this.linkDragSource = null;
-        }
-    }
-    emitLinkDragEnded() {
-        this.linkDraggingId = null;
-        if (this.linkDragSource && this.linkDragTarget) {
-            this.linkDragSource.addLink(this.linkDragTarget.id);
-            this.linkDragEnded.emit({
-                source: this.linkDragSource.origin,
-                target: this.linkDragTarget.origin
-            });
-        }
-        this.linkDragSource = null;
-        this.linkDragTarget = null;
-    }
-}
-GanttDragContainer.decorators = [
-    { type: Injectable }
-];
-GanttDragContainer.ctorParameters = () => [];
-
-const dragMinWidth = 10;
-const activeClass = 'gantt-bar-active';
-const linkDropClass = 'gantt-bar-link-drop';
-function createSvgElement(qualifiedName, className) {
-    const element = document.createElementNS('http://www.w3.org/2000/svg', qualifiedName);
-    element.classList.add(className);
-    return element;
-}
-class GanttBarDrag {
-    constructor(dragDrop, dom, dragContainer) {
-        this.dragDrop = dragDrop;
-        this.dom = dom;
-        this.dragContainer = dragContainer;
-        this.dragRefs = [];
-        this.destroy$ = new Subject();
-    }
-    get dragDisabled() {
-        return !this.item.draggable || !this.ganttUpper.draggable;
-    }
-    get linkDragDisabled() {
-        return !this.item.linkable || !this.ganttUpper.linkable;
-    }
-    createMouseEvents() {
-        fromEvent(this.barElement, 'mouseenter')
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-            if (this.dragContainer.linkDraggingId && this.dragContainer.linkDraggingId !== this.item.id) {
-                if (this.item.linkable) {
-                    this.barElement.classList.add(linkDropClass);
-                    this.dragContainer.emitLinkDragEntered(this.item);
-                }
-            }
-            else {
-                this.barElement.classList.add(activeClass);
-            }
-        });
-        fromEvent(this.barElement, 'mouseleave')
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-            if (!this.dragContainer.linkDraggingId) {
-                this.barElement.classList.remove(activeClass);
-            }
-            else {
-                this.dragContainer.emitLinkDragLeaved();
-            }
-            this.barElement.classList.remove(linkDropClass);
-        });
-    }
-    createBarDrag() {
-        const dragRef = this.dragDrop.createDrag(this.barElement);
-        dragRef.lockAxis = 'x';
-        dragRef.started.subscribe(() => {
-            this.setDraggingStyles();
-            this.dragContainer.dragStarted.emit({ item: this.item.origin });
-        });
-        dragRef.moved.subscribe((event) => {
-            const x = this.item.refs.x + event.distance.x;
-            const days = differenceInCalendarDays(this.item.end.value, this.item.start.value);
-            const start = this.ganttUpper.view.getDateByXPoint(x);
-            const end = start.addDays(days);
-            this.openDragBackdrop(this.barElement, this.ganttUpper.view.getDateByXPoint(x), end);
-        });
-        dragRef.ended.subscribe((event) => {
-            const days = differenceInCalendarDays(this.item.end.value, this.item.start.value);
-            const start = this.ganttUpper.view.getDateByXPoint(this.item.refs.x + event.distance.x);
-            const end = start.addDays(days);
-            this.item.updateDate(start, end);
-            this.clearDraggingStyles();
-            this.closeDragBackdrop();
-            event.source.reset();
-            this.dragContainer.dragEnded.emit({ item: this.item.origin });
-        });
-        this.barDragRef = dragRef;
-        return dragRef;
-    }
-    createBarHandleDrags() {
-        const dragRefs = [];
-        const handles = this.barElement.querySelectorAll('.drag-handles .handle');
-        handles.forEach((handle, index) => {
-            const isBefore = index === 0;
-            const dragRef = this.dragDrop.createDrag(handle);
-            dragRef.lockAxis = 'x';
-            dragRef.withBoundaryElement(this.dom.root);
-            dragRef.started.subscribe(() => {
-                this.setDraggingStyles();
-                this.dragContainer.dragStarted.emit({ item: this.item.origin });
-            });
-            dragRef.moved.subscribe((event) => {
-                if (isBefore) {
-                    const x = this.item.refs.x + event.distance.x;
-                    const width = this.item.refs.width + event.distance.x * -1;
-                    if (width > dragMinWidth) {
-                        this.barElement.style.width = width + 'px';
-                        this.barElement.style.left = x + 'px';
-                        this.openDragBackdrop(this.barElement, this.ganttUpper.view.getDateByXPoint(x), this.ganttUpper.view.getDateByXPoint(x + width));
-                    }
-                }
-                else {
-                    const width = this.item.refs.width + event.distance.x;
-                    if (width > dragMinWidth) {
-                        this.barElement.style.width = width + 'px';
-                        this.openDragBackdrop(this.barElement, this.ganttUpper.view.getDateByXPoint(this.item.refs.x), this.ganttUpper.view.getDateByXPoint(this.item.refs.x + width));
-                    }
-                }
-                event.source.reset();
-            });
-            dragRef.ended.subscribe((event) => {
-                if (isBefore) {
-                    const width = this.item.refs.width + event.distance.x * -1;
-                    if (width > dragMinWidth) {
-                        this.item.updateDate(this.ganttUpper.view.getDateByXPoint(this.item.refs.x + event.distance.x), this.item.end);
-                    }
-                    else {
-                        this.item.updateDate(this.item.end.startOfDay(), this.item.end);
-                    }
-                }
-                else {
-                    const width = this.item.refs.width + event.distance.x;
-                    if (width > dragMinWidth) {
-                        this.item.updateDate(this.item.start, this.ganttUpper.view.getDateByXPoint(this.item.refs.x + this.item.refs.width + event.distance.x));
-                    }
-                    else {
-                        this.item.updateDate(this.item.start, this.item.start.endOfDay());
-                    }
-                }
-                this.clearDraggingStyles();
-                this.closeDragBackdrop();
-                this.dragContainer.dragEnded.emit({ item: this.item.origin });
-            });
-            dragRefs.push(dragRef);
-        });
-        return dragRefs;
-    }
-    createLinkHandleDrags() {
-        const dragRefs = [];
-        const handles = this.barElement.querySelectorAll('.link-handles .handle');
-        handles.forEach((handle, index) => {
-            const isBefore = index === 0;
-            const dragRef = this.dragDrop.createDrag(handle);
-            dragRef.withBoundaryElement(this.dom.root);
-            dragRef.beforeStarted.subscribe(() => {
-                handle.style.pointerEvents = 'none';
-                if (this.barDragRef) {
-                    this.barDragRef.disabled = true;
-                }
-                this.createLinkDraggingLine();
-                this.dragContainer.emitLinkDragStarted(isBefore ? 'target' : 'source', this.item);
-            });
-            dragRef.moved.subscribe(() => {
-                const positions = this.calcLinkLinePositions(handle, isBefore);
-                this.linkDraggingLine.setAttribute('x1', positions.x1.toString());
-                this.linkDraggingLine.setAttribute('y1', positions.y1.toString());
-                this.linkDraggingLine.setAttribute('x2', positions.x2.toString());
-                this.linkDraggingLine.setAttribute('y2', positions.y2.toString());
-            });
-            dragRef.ended.subscribe((event) => {
-                event.source.reset();
-                handle.style.pointerEvents = '';
-                if (this.barDragRef) {
-                    this.barDragRef.disabled = false;
-                }
-                this.barElement.classList.remove(activeClass);
-                this.destroyLinkDraggingLine();
-                this.dragContainer.emitLinkDragEnded();
-            });
-            dragRefs.push(dragRef);
-        });
-        return dragRefs;
-    }
-    openDragBackdrop(dragElement, start, end) {
-        const dragMaskElement = this.dom.root.querySelector('.gantt-drag-mask');
-        const dragBackdropElement = this.dom.root.querySelector('.gantt-drag-backdrop');
-        const rootRect = this.dom.root.getBoundingClientRect();
-        const dragRect = dragElement.getBoundingClientRect();
-        const left = dragRect.left - rootRect.left - this.dom.side.clientWidth;
-        const width = dragRect.right - dragRect.left;
-        dragMaskElement.style.left = left + 'px';
-        dragMaskElement.style.width = width + 'px';
-        dragMaskElement.querySelector('.start').innerHTML = start.format('MM-dd');
-        dragMaskElement.querySelector('.end').innerHTML = end.format('MM-dd');
-        dragMaskElement.style.display = 'block';
-        dragBackdropElement.style.display = 'block';
-    }
-    closeDragBackdrop() {
-        const dragMaskElement = this.dom.root.querySelector('.gantt-drag-mask');
-        const dragBackdropElement = this.dom.root.querySelector('.gantt-drag-backdrop');
-        dragMaskElement.style.display = 'none';
-        dragBackdropElement.style.display = 'none';
-    }
-    setDraggingStyles() {
-        this.barElement.style.pointerEvents = 'none';
-        this.barElement.classList.add('gantt-bar-draggable-drag');
-    }
-    clearDraggingStyles() {
-        this.barElement.style.pointerEvents = '';
-        this.barElement.classList.remove('gantt-bar-draggable-drag');
-    }
-    calcLinkLinePositions(target, isBefore) {
-        const rootRect = this.dom.root.getBoundingClientRect();
-        const targetRect = target.getBoundingClientRect();
-        const layerRect = target.parentElement.parentElement.getBoundingClientRect();
-        return {
-            x1: layerRect.left + (isBefore ? 0 : layerRect.width) - rootRect.left,
-            y1: layerRect.top + layerRect.height / 2 - rootRect.top,
-            x2: targetRect.left - rootRect.left + targetRect.width / 2,
-            y2: targetRect.top - rootRect.top + targetRect.height / 2
-        };
-    }
-    createLinkDraggingLine() {
-        if (!this.linkDraggingLine) {
-            const svgElement = createSvgElement('svg', 'gantt-link-drag-container');
-            const linElement = createSvgElement('line', 'link-dragging-line');
-            svgElement.appendChild(linElement);
-            this.dom.root.appendChild(svgElement);
-            this.linkDraggingLine = linElement;
-        }
-    }
-    destroyLinkDraggingLine() {
-        if (this.linkDraggingLine) {
-            this.linkDraggingLine.parentElement.remove();
-            this.linkDraggingLine = null;
-        }
-    }
-    createDrags(elementRef, item, ganttUpper) {
-        this.item = item;
-        this.barElement = elementRef.nativeElement;
-        this.ganttUpper = ganttUpper;
-        if (!item.draggable || (this.dragDisabled && this.linkDragDisabled)) {
-            return;
-        }
-        else {
-            this.createMouseEvents();
-            if (!this.dragDisabled) {
-                const dragRef = this.createBarDrag();
-                const dragHandlesRefs = this.createBarHandleDrags();
-                this.dragRefs.push(dragRef, ...dragHandlesRefs);
-            }
-            if (!this.linkDragDisabled) {
-                const linkDragRefs = this.createLinkHandleDrags();
-                this.dragRefs.push(...linkDragRefs);
-            }
-        }
-    }
-    ngOnDestroy() {
-        this.closeDragBackdrop();
-        this.dragRefs.forEach((dragRef) => dragRef.dispose());
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-}
-GanttBarDrag.decorators = [
-    { type: Injectable }
-];
-GanttBarDrag.ctorParameters = () => [
-    { type: DragDrop },
-    { type: GanttDomService },
-    { type: GanttDragContainer }
-];
-
-class GanttItemUpper {
-    constructor(elementRef, ganttUpper) {
-        this.elementRef = elementRef;
-        this.ganttUpper = ganttUpper;
-        this.firstChange = true;
-        this.unsubscribe$ = new Subject();
-    }
-    onInit() {
-        this.firstChange = false;
-        this.item.refs$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
-            this.setPositions();
-        });
-    }
-    onChanges() {
-        if (!this.firstChange) {
-            this.setPositions();
-        }
-    }
-    setPositions() {
-        const itemElement = this.elementRef.nativeElement;
-        itemElement.style.left = this.item.refs.x + 'px';
-        itemElement.style.top = this.item.refs.y + 'px';
-        itemElement.style.width = this.item.refs.width + 'px';
-        if (this.item.type === GanttItemType.bar) {
-            itemElement.style.height = this.ganttUpper.styles.barHeight + 'px';
-        }
-        else if (this.item.type === GanttItemType.range) {
-            itemElement.style.height = rangeHeight + 'px';
-        }
-        else {
-        }
-    }
-    onDestroy() {
-        this.unsubscribe$.next();
-        this.unsubscribe$.complete();
-    }
-}
-GanttItemUpper.decorators = [
-    { type: Directive }
-];
-GanttItemUpper.ctorParameters = () => [
-    { type: ElementRef },
-    { type: GanttUpper, decorators: [{ type: Inject, args: [GANTT_UPPER_TOKEN,] }] }
-];
-GanttItemUpper.propDecorators = {
-    template: [{ type: Input }],
-    item: [{ type: Input }]
-};
-
-function linearGradient(sideOrCorner, color, stop) {
-    return `linear-gradient(${sideOrCorner},${color} 0%,${stop} 40%)`;
-}
-class NgxGanttBarComponent extends GanttItemUpper {
-    constructor(dragContainer, drag, elementRef, ganttUpper) {
-        super(elementRef, ganttUpper);
-        this.dragContainer = dragContainer;
-        this.drag = drag;
-        this.ganttUpper = ganttUpper;
-        this.barClick = new EventEmitter();
-        this.ganttItemClass = true;
-        this.color = 'red';
-    }
-    ngOnInit() {
-        super.onInit();
-        this.dragContainer.dragEnded.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
-            this.setContentBackground();
-        });
-    }
-    ngAfterViewInit() {
-        this.drag.createDrags(this.elementRef, this.item, this.ganttUpper);
-        this.setContentBackground();
-    }
-    ngOnChanges() {
-        super.onChanges();
-    }
-    onBarClick(event) {
-        this.barClick.emit({ event, item: this.item.origin });
-    }
-    setContentBackground() {
-        const contentElement = this.contentElementRef.nativeElement;
-        const color = this.item.color || barBackground;
-        const style = this.item.barStyle || {};
-        if (this.item.origin.start && this.item.origin.end) {
-            style.background = color;
-            style.borderRadius = '';
-        }
-        if (this.item.origin.start && !this.item.origin.end) {
-            style.background = linearGradient('to left', hexToRgb(color, 0.55), hexToRgb(color, 1));
-            style.borderRadius = '4px 12.5px 12.5px 4px';
-        }
-        if (!this.item.origin.start && this.item.origin.end) {
-            style.background = linearGradient('to right', hexToRgb(color, 0.55), hexToRgb(color, 1));
-            style.borderRadius = '12.5px 4px 4px 12.5px';
-        }
-        if (this.item.progress >= 0) {
-            const contentProgressElement = contentElement.querySelector('.gantt-bar-content-progress');
-            style.background = hexToRgb(color, 0.3);
-            style.borderRadius = '';
-            contentProgressElement.style.background = color;
-        }
-        for (const key in style) {
-            if (style.hasOwnProperty(key)) {
-                contentElement.style[key] = style[key];
-            }
-        }
-    }
-    stopPropagation(event) {
-        event.stopPropagation();
-    }
-    ngOnDestroy() {
-        super.onDestroy();
-    }
-}
-NgxGanttBarComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ngx-gantt-bar,gantt-bar',
-                template: "<div class=\"gantt-bar-layer\">\n  <div *ngIf=\"item.draggable && ganttUpper.draggable\" class=\"drag-handles\">\n    <ng-container>\n      <span class=\"handle\" (mousedown)=\"stopPropagation($event)\"></span>\n      <span class=\"handle\" (mousedown)=\"stopPropagation($event)\"></span>\n    </ng-container>\n  </div>\n  <div *ngIf=\"item.linkable && ganttUpper.linkable\" class=\"link-handles\">\n    <span class=\"handle\"><span class=\"point\"></span></span>\n    <span class=\"handle\"> <span class=\"point\"></span></span>\n  </div>\n</div>\n<div class=\"gantt-bar-border\"></div>\n<div #content class=\"gantt-bar-content\" (click)=\"onBarClick($event)\">\n  <div class=\"gantt-bar-content-progress\" *ngIf=\"item.progress >= 0\" [style.width.%]=\"item.progress * 100\"></div>\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"></ng-template>\n</div>\n",
-                providers: [GanttBarDrag]
-            },] }
-];
-NgxGanttBarComponent.ctorParameters = () => [
-    { type: GanttDragContainer },
-    { type: GanttBarDrag },
-    { type: ElementRef },
-    { type: GanttUpper, decorators: [{ type: Inject, args: [GANTT_UPPER_TOKEN,] }] }
-];
-NgxGanttBarComponent.propDecorators = {
-    barClick: [{ type: Output }],
-    contentElementRef: [{ type: ViewChild, args: ['content',] }],
-    ganttItemClass: [{ type: HostBinding, args: ['class.gantt-bar',] }]
-};
-
-class GanttMainComponent {
-    constructor(ganttUpper) {
-        this.ganttUpper = ganttUpper;
-        this.barClick = new EventEmitter();
-        this.lineClick = new EventEmitter();
-        this.ganttMainClass = true;
-    }
-    ngOnInit() { }
-    trackBy(item, index) {
-        return item.id || index;
-    }
-}
-GanttMainComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'gantt-main',
-                template: "<gantt-links-overlay [groups]=\"groups\" [items]=\"items\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay>\n<!-- groups -->\n<div class=\"gantt-main-groups\" *ngIf=\"groups && groups.length > 0; else itemsTemplate\" [style.width.px]=\"ganttUpper.view.width\">\n  <ng-container *ngFor=\"let group of groups; trackBy: trackBy\">\n    <div class=\"gantt-group\" [ngClass]=\"group.class\">\n      <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: group }\"></ng-template>\n    </div>\n    <div *ngIf=\"group.expanded\" class=\"gantt-items\">\n      <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: group.items }\"></ng-template>\n    </div>\n  </ng-container>\n</div>\n<!-- items -->\n<ng-template #itemsTemplate>\n  <div class=\"gantt-main-items\" [style.width.px]=\"ganttUpper.view.width\">\n    <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: items }\"></ng-template>\n  </div>\n</ng-template>\n\n<ng-template #ganttItems let-items=\"items\">\n  <ng-container *ngFor=\"let item of items; trackBy: trackBy\">\n    <div class=\"gantt-item\" [style.height.px]=\"ganttUpper.styles.lineHeight\">\n      <ng-container *ngIf=\"item.type | isGanttCustomItem\">\n        <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"></ng-template>\n      </ng-container>\n      <gantt-range *ngIf=\"item.type | isGanttRangeItem\" [template]=\"rangeTemplate\" [item]=\"item\"></gantt-range>\n      <gantt-bar *ngIf=\"item.type | isGanttBarItem\" [item]=\"item\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n    </div>\n    <ng-template\n      *ngIf=\"item.children && item.expanded\"\n      [ngTemplateOutlet]=\"ganttItems\"\n      [ngTemplateOutletContext]=\"{ items: item.children }\"\n    ></ng-template>\n  </ng-container>\n</ng-template>\n"
-            },] }
-];
-GanttMainComponent.ctorParameters = () => [
-    { type: GanttUpper, decorators: [{ type: Inject, args: [GANTT_UPPER_TOKEN,] }] }
-];
-GanttMainComponent.propDecorators = {
-    groups: [{ type: Input }],
-    items: [{ type: Input }],
-    groupHeaderTemplate: [{ type: Input }],
-    itemTemplate: [{ type: Input }],
-    barTemplate: [{ type: Input }],
-    rangeTemplate: [{ type: Input }],
-    barClick: [{ type: Output }],
-    lineClick: [{ type: Output }],
-    ganttMainClass: [{ type: HostBinding, args: ['class.gantt-main-container',] }]
-};
-
-const angleRight = `<svg xmlns="http://www.w3.org/2000/svg" fit=""  preserveAspectRatio="xMidYMid meet" focusable="false"><g id="amnavigation/angle-right" stroke-width="1" fill-rule="evenodd"><path d="M7.978 11.498l-.005.005L2.3 5.831 3.13 5l4.848 4.848L12.826 5l.83.831-5.673 5.672-.005-.005z"   transform="rotate(-90 7.978 8.252)"></path></g></svg>`;
-const angleDown = `<svg xmlns="http://www.w3.org/2000/svg" fit=""  preserveAspectRatio="xMidYMid meet" focusable="false"><g id="aknavigation/angle-down" stroke-width="1" fill-rule="evenodd"><path d="M7.978 11.997l-.005.006L2.3 6.33l.83-.831 4.848 4.848L12.826 5.5l.83.83-5.673 5.673-.005-.006z" ></path></g></svg>`;
-const plusSquare = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fit=""   preserveAspectRatio="xMidYMid meet" focusable="false"><g id="kxaction/plus-square" stroke-width="1" fill-rule="evenodd"><path d="M2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1.2a.8.8 0 0 0-.8.8v12a.8.8 0 0 0 .8.8h12a.8.8 0 0 0 .8-.8V2a.8.8 0 0 0-.8-.8H2zm5.45 6.2V4.75h1.2V7.4h2.65v1.2H8.65v2.65h-1.2V8.6H4.8V7.4h2.65z"></path></g></svg>`;
-const minusSquare = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fit="" preserveAspectRatio="xMidYMid meet" focusable="false"><g id="jnaction/minus-square" stroke-width="1" fill-rule="evenodd"><path d="M2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1.2a.8.8 0 0 0-.8.8v12a.8.8 0 0 0 .8.8h12a.8.8 0 0 0 .8-.8V2a.8.8 0 0 0-.8-.8H2zm2.8 6.2h6.5v1.2H4.8V7.4z"></path></g></svg>`;
-const loadingIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve">
-<path fill="#aaa" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)">
-    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>
-</path>
-</svg>`;
-const emptyIcon = `<svg
-width="148px"
-height="134px"
-viewBox="0 0 148 134"
-version="1.1"
-xmlns="http://www.w3.org/2000/svg"
-xmlns:xlink="http://www.w3.org/1999/xlink"
->
-<defs>
-  <filter x="0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-1">
-    <feGaussianBlur stdDeviation="0" in="SourceGraphic"></feGaussianBlur>
-  </filter>
-</defs>
-<g id="148x134" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-  <g id="编组-6" transform="translate(1.000000, 1.000000)">
-    <ellipse
-      id="椭圆形"
-      fill="#EDEEF2"
-      opacity="0.3"
-      filter="url(#filter-1)"
-      cx="73.0800017"
-      cy="115.920003"
-      rx="73.0800017"
-      ry="16.8000004"
-    ></ellipse>
-    <g id="编组-5" transform="translate(15.120000, 0.000000)">
-      <polygon
-        id="矩形"
-        fill="#E2E4E9"
-        points="19.2789848 49.5600011 99.1200023 48.7200011 117.600003 75.9297673 117.600003 92.313049 0 92.313049 0 75.0356267"
-      ></polygon>
-      <path
-        d="M23.5200005,0 L94.0800002,0 C97.7913538,2.06413823e-16 100.8,3.00864655 100.8,6.72000015 L100.8,99.1200023 L100.8,99.1200023 L16.8000004,99.1200023 L16.8000004,6.72000015 C16.8000004,3.00864655 19.8086469,1.56994302e-15 23.5200005,0 Z"
-        id="矩形"
-        fill="#F9FAFB"
-      ></path>
-      <path
-        d="M30.9200007,12.4400003 L86.6800019,12.4400003 C88.5356787,12.4400003 90.040002,13.9443236 90.040002,15.8000004 L90.040002,42.000001 C90.040002,43.8556778 88.5356787,45.360001 86.6800019,45.360001 L30.9200007,45.360001 C29.0643239,45.360001 27.5600006,43.8556778 27.5600006,42.000001 L27.5600006,15.8000004 C27.5600006,13.9443236 29.0643239,12.4400003 30.9200007,12.4400003 Z"
-        id="矩形"
-        fill="#E8EAEE"
-      ></path>
-      <text
-        id="&lt;/null&gt;"
-        font-family="PingFangSC-Medium, PingFang SC"
-        font-size="15.1200003"
-        font-weight="400"
-        fill="#BCBECD"
-      >
-        <tspan x="33.6000008" y="32.8000004">&lt;/null&gt;</tspan>
-      </text>
-      <rect id="矩形" fill="#E8EAEE" x="27.5600006" y="52.0800012" width="61.4800014" height="5.04000011" rx="2.52000006"></rect>
-      <rect
-        id="矩形备份"
-        fill="#E8EAEE"
-        x="27.5600006"
-        y="63.8400014"
-        width="61.4800014"
-        height="5.04000011"
-        rx="2.52000006"
-      ></rect>
-      <path
-        d="M0,75.6000017 L29.280235,75.6000017 C32.0637502,75.6000017 34.3202352,77.8564866 34.3202352,80.6400018 L34.3202352,86.2591426 C34.3202352,89.0426578 36.5767201,91.2991427 39.3602353,91.2991427 L78.4136737,91.2991427 C81.1971889,91.2991427 83.4536738,89.0426578 83.4536738,86.2591426 L83.4536738,80.6400018 C83.4536738,77.8564866 85.7101587,75.6000017 88.4936739,75.6000017 L117.600003,75.6000017 L117.600003,75.6000017 L117.600003,110.880003 C117.600003,115.519195 113.839194,119.280003 109.200002,119.280003 L8.40000019,119.280003 C3.76080819,119.280003 -6.53729019e-15,115.519195 0,110.880003 L0,75.6000017 L0,75.6000017 Z"
-        id="矩形"
-        fill="#EDEFF2"
-      ></path>
-    </g>
-  </g>
-</g>
-</svg>`;
-const icons = {
-    'angle-right': angleRight,
-    'angle-down': angleDown,
-    'plus-square': plusSquare,
-    'minus-square': minusSquare,
-    loading: loadingIcon,
-    empty: emptyIcon
-};
-
-class GanttIconComponent {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.isIcon = true;
-    }
-    set iconName(name) {
-        this.setSvg(name);
-    }
-    ngOnInit() { }
-    ngAfterViewInit() { }
-    setSvg(name) {
-        const iconSvg = icons[name];
-        if (iconSvg) {
-            this.elementRef.nativeElement.innerHTML = iconSvg;
-        }
-        else {
-            this.elementRef.nativeElement.innerHTML = '';
-        }
-    }
-}
-GanttIconComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'gantt-icon',
-                template: ''
-            },] }
-];
-GanttIconComponent.ctorParameters = () => [
-    { type: ElementRef }
-];
-GanttIconComponent.propDecorators = {
-    isIcon: [{ type: HostBinding, args: ['class.gantt-icon',] }],
-    iconName: [{ type: Input }]
-};
-
-class GanttDragBackdropComponent {
-    constructor() {
-        this.backdropClass = true;
-    }
-    ngOnInit() { }
-}
-GanttDragBackdropComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'gantt-drag-backdrop',
-                template: "<div class=\"gantt-drag-mask\">\n  <div class=\"date-range\">\n    <span class=\"start\"></span>\n    <span class=\"end\"></span>\n  </div>\n</div>\n"
-            },] }
-];
-GanttDragBackdropComponent.ctorParameters = () => [];
-GanttDragBackdropComponent.propDecorators = {
-    backdropClass: [{ type: HostBinding, args: ['class.gantt-drag-backdrop',] }]
-};
-
-var LinkColors;
-(function (LinkColors) {
-    LinkColors["default"] = "#cacaca";
-    LinkColors["blocked"] = "#FF7575";
-    LinkColors["active"] = "#348FE4";
-})(LinkColors || (LinkColors = {}));
-class GanttLinksComponent {
-    constructor(ganttUpper, cdr, elementRef, ganttDragContainer) {
-        this.ganttUpper = ganttUpper;
-        this.cdr = cdr;
-        this.elementRef = elementRef;
-        this.ganttDragContainer = ganttDragContainer;
-        this.groups = [];
-        this.items = [];
-        this.lineClick = new EventEmitter();
-        this.links = [];
-        this.linkItems = [];
-        this.bezierWeight = -0.5;
-        this.firstChange = true;
-        this.unsubscribe$ = new Subject();
-        this.ganttLinksOverlay = true;
-    }
-    ngOnInit() {
-        this.buildLinks();
-        this.firstChange = false;
-        this.ganttDragContainer.dragStarted.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
-            this.elementRef.nativeElement.style.visibility = 'hidden';
-        });
-        merge(this.ganttUpper.viewChange, this.ganttUpper.expandChange, this.ganttUpper.view.start$, this.ganttUpper.dragEnded, this.ganttUpper.linkDragEnded)
-            .pipe(takeUntil(this.unsubscribe$), skip(1))
-            .subscribe(() => {
-            this.elementRef.nativeElement.style.visibility = 'visible';
-            this.buildLinks();
-            this.cdr.detectChanges();
-        });
-    }
-    ngOnChanges() {
-        if (!this.firstChange) {
-            this.buildLinks();
-        }
-    }
-    computeItemPosition() {
-        const lineHeight = this.ganttUpper.styles.lineHeight;
-        const barHeight = this.ganttUpper.styles.barHeight;
-        this.linkItems = [];
-        if (this.groups.length > 0) {
-            let itemNum = 0;
-            let groupNum = 0;
-            this.groups.forEach((group) => {
-                groupNum++;
-                if (group.expanded) {
-                    const items = recursiveItems(group.items);
-                    items.forEach((item, itemIndex) => {
-                        const y = (groupNum + itemNum + itemIndex) * lineHeight + item.refs.y + barHeight / 2;
-                        this.linkItems.push(Object.assign(Object.assign({}, item), { before: {
-                                x: item.refs.x,
-                                y
-                            }, after: {
-                                x: item.refs.x + item.refs.width,
-                                y
-                            } }));
-                    });
-                    itemNum += items.length;
-                }
-            });
-        }
-        else {
-            const items = recursiveItems(this.items);
-            items.forEach((item, itemIndex) => {
-                const y = itemIndex * lineHeight + item.refs.y + barHeight / 2;
-                this.linkItems.push(Object.assign(Object.assign({}, item), { before: {
-                        x: item.refs.x,
-                        y
-                    }, after: {
-                        x: item.refs.x + item.refs.width,
-                        y
-                    } }));
-            });
-        }
-    }
-    generatePath(source, target) {
-        if (source.before && source.after && target.before && target.after) {
-            const x1 = source.after.x;
-            const y1 = source.after.y;
-            const x4 = target.before.x;
-            const y4 = target.before.y;
-            const dx = Math.abs(x4 - x1) * this.bezierWeight;
-            const x2 = x1 - dx;
-            const x3 = x4 + dx;
-            const centerX = (x1 + x4) / 2;
-            const centerY = (y1 + y4) / 2;
-            let controlX = this.ganttUpper.styles.lineHeight / 2;
-            const controlY = this.ganttUpper.styles.lineHeight / 2;
-            if (x1 >= x4) {
-                if (y4 > y1) {
-                    if (Math.abs(y4 - y1) <= this.ganttUpper.styles.lineHeight) {
-                        return `M ${x1} ${y1}
-                        C ${x1 + controlX} ${y1} ${x1 + controlX} ${y1 + controlX} ${x1} ${y1 + controlY}
-                        L ${x1} ${y1 + controlY} ${centerX} ${centerY}
-
-                        M ${x4} ${y4}
-                        C ${x4 - controlX} ${y4} ${x4 - controlX} ${y4 - controlX} ${x4} ${y4 - controlY}
-                        L ${x4} ${y4 - controlY} ${centerX} ${centerY}`;
-                    }
-                    else {
-                        controlX = this.ganttUpper.styles.lineHeight;
-                        return `M ${x1} ${y1}
-                        C ${x1 + controlX} ${y1} ${x1 + controlX} ${y1 + controlX} ${centerX} ${centerY}
-
-
-                        M ${x4} ${y4}
-                        C ${x4 - controlX} ${y4} ${x4 - controlX} ${y4 - controlX} ${centerX} ${centerY}`;
-                    }
-                }
-                else {
-                    if (Math.abs(y4 - y1) <= this.ganttUpper.styles.lineHeight) {
-                        return `M ${x1} ${y1}
-                        C ${x1 + controlX} ${y1} ${x1 + controlX} ${y1 - controlX} ${x1} ${y1 - controlY}
-                        L ${x1} ${y1 - controlY} ${centerX} ${centerY}
-
-                        M ${x4} ${y4}
-                        C ${x4 - controlX} ${y4} ${x4 - controlX} ${y4 + controlX} ${x4} ${y4 + controlY}
-                        L ${x4} ${y4 + controlY} ${centerX} ${centerY}
-                        `;
-                    }
-                    else {
-                        controlX = this.ganttUpper.styles.lineHeight;
-                        return `M ${x1} ${y1}
-                        C ${x1 + controlX} ${y1} ${x1 + controlX} ${y1 - controlX} ${centerX} ${centerY}
-
-                        M ${x4} ${y4}
-                        C ${x4 - controlX} ${y4} ${x4 - controlX} ${y4 + controlX} ${centerX} ${centerY}`;
-                    }
-                }
-            }
-            return `M ${x1} ${y1} C ${x2} ${y1} ${x3} ${y4} ${x4} ${y4}`;
-        }
-    }
-    buildLinks() {
-        this.computeItemPosition();
-        this.links = [];
-        this.linkItems.forEach((source) => {
-            if (source.origin.start || source.origin.end) {
-                source.links.forEach((linkId) => {
-                    const target = this.linkItems.find((item) => item.id === linkId);
-                    if (target && (target.origin.start || target.origin.end)) {
-                        this.links.push({
-                            path: this.generatePath(source, target),
-                            source: source.origin,
-                            target: target.origin,
-                            color: source.end.getTime() > target.start.getTime() ? LinkColors.blocked : LinkColors.default
-                        });
-                    }
-                });
-            }
-        });
-    }
-    trackBy(index) {
-        return index;
-    }
-    onLineClick(event, link) {
-        this.lineClick.emit({
-            event,
-            source: link.source,
-            target: link.target
-        });
-    }
-    mouseEnterPath(link) {
-        if (link.color === LinkColors.default) {
-            link.color = LinkColors.active;
-        }
-    }
-    mouseLeavePath(link) {
-        if (link.color === LinkColors.active) {
-            link.color = LinkColors.default;
-        }
-    }
-    ngOnDestroy() {
-        this.unsubscribe$.next();
-        this.unsubscribe$.complete();
-    }
-}
-GanttLinksComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'gantt-links-overlay',
-                template: "<svg [attr.width]=\"ganttUpper.view.width\" class=\"gantt-links-overlay-main\">\n  <ng-container *ngFor=\"let link of links; let i = index; trackBy: trackBy\">\n    <path [attr.d]=\"link.path\" fill=\"transparent\" stroke-width=\"2\" [attr.stroke]=\"link.color\" pointer-events=\"none\"></path>\n    <g>\n      <path\n        class=\"link-line\"\n        (click)=\"onLineClick($event, link)\"\n        (mouseenter)=\"mouseEnterPath(link)\"\n        (mouseleave)=\"mouseLeavePath(link)\"\n        [attr.d]=\"link.path\"\n        stroke=\"transparent\"\n        stroke-width=\"9\"\n        fill=\"none\"\n        cursor=\"pointer\"\n      ></path>\n    </g>\n  </ng-container>\n  <line class=\"link-dragging-line\"></line>\n</svg>\n"
-            },] }
-];
-GanttLinksComponent.ctorParameters = () => [
-    { type: GanttUpper, decorators: [{ type: Inject, args: [GANTT_UPPER_TOKEN,] }] },
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: GanttDragContainer }
-];
-GanttLinksComponent.propDecorators = {
-    groups: [{ type: Input }],
-    items: [{ type: Input }],
-    lineClick: [{ type: Output }],
-    ganttLinksOverlay: [{ type: HostBinding, args: ['class.gantt-links-overlay',] }]
-};
-
-class GanttPrintService {
-    constructor() { }
-    setInlineStyles(targetElem) {
-        const svgElements = Array.from(targetElem.getElementsByTagName('svg'));
-        for (const svgElement of svgElements) {
-            this.recursElementChildren(svgElement);
-        }
-    }
-    recursElementChildren(node) {
-        const transformProperties = [
-            'fill',
-            'color',
-            'font-size',
-            'stroke',
-            'font',
-            'text-anchor',
-            'stroke-dasharray',
-            'shape-rendering',
-            'stroke-width'
-        ];
-        if (!node.style) {
-            return;
-        }
-        const styles = getComputedStyle(node);
-        for (const transformProperty of transformProperties) {
-            node.style[transformProperty] = styles[transformProperty];
-        }
-        for (const child of Array.from(node.childNodes)) {
-            this.recursElementChildren(child);
-        }
-    }
-    register(root) {
-        this.root = root.nativeElement;
-        this.mainContainer = this.root.getElementsByClassName('gantt-main-container')[0];
-    }
-    print(name = 'download', ignoreElementClass) {
-        const root = this.root;
-        const mainContainer = this.mainContainer;
-        // set print width
-        const printWidth = root.offsetWidth;
-        // set print height
-        const printHeight = root.offsetHeight - mainContainer.offsetHeight + mainContainer.scrollHeight;
-        html2canvas(root, {
-            logging: false,
-            allowTaint: true,
-            useCORS: true,
-            width: printWidth,
-            height: printHeight,
-            ignoreElements: (element) => {
-                if (ignoreElementClass && element.classList.contains(ignoreElementClass)) {
-                    return true;
-                }
-                if (element.classList.contains('gantt-calendar-today-overlay')) {
-                    return true;
-                }
-            },
-            onclone: (cloneDocument) => {
-                const ganttClass = root.className;
-                const cloneGanttDom = cloneDocument.querySelector(`.${ganttClass.replace(/\s+/g, '.')}`);
-                const cloneGanttContainerDom = cloneDocument.querySelector('.gantt-container');
-                const cloneCalendarOverlay = cloneDocument.querySelector('.gantt-calendar-overlay-main');
-                const cloneLinksOverlay = cloneDocument.querySelector('.gantt-links-overlay-main');
-                // change targetDom width
-                cloneGanttDom.style.width = `${printWidth}px`;
-                cloneGanttDom.style.height = `${printHeight}px`;
-                cloneGanttDom.style.overflow = `unset`;
-                cloneGanttContainerDom.style.backgroundColor = '#fff';
-                cloneCalendarOverlay.setAttribute('height', `${printHeight}`);
-                cloneCalendarOverlay.setAttribute('style', `background: transparent`);
-                if (cloneLinksOverlay) {
-                    cloneLinksOverlay.setAttribute('height', `${printHeight}`);
-                    cloneLinksOverlay.setAttribute('style', `height: ${printHeight}px`);
-                }
-                // setInlineStyles for svg
-                this.setInlineStyles(cloneGanttDom);
-            }
-        }).then((canvas) => {
-            const link = document.createElement('a');
-            const dataUrl = canvas.toDataURL('image/png');
-            link.download = `${name}.png`;
-            link.href = dataUrl;
-            link.click();
-        });
-    }
-}
-GanttPrintService.decorators = [
-    { type: Injectable }
-];
-GanttPrintService.ctorParameters = () => [];
-
-class NgxGanttRootComponent {
-    constructor(elementRef, ngZone, dom, dragContainer, ganttUpper, printService) {
-        this.elementRef = elementRef;
-        this.ngZone = ngZone;
-        this.dom = dom;
-        this.dragContainer = dragContainer;
-        this.ganttUpper = ganttUpper;
-        this.printService = printService;
-        this.ganttClass = true;
-        this.unsubscribe$ = new Subject();
-        this.ganttUpper.dragContainer = dragContainer;
-    }
-    get view() {
-        return this.ganttUpper.view;
-    }
-    ngOnInit() {
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            this.dom.initialize(this.elementRef);
-            if (this.printService) {
-                this.printService.register(this.elementRef);
-            }
-            this.setupScrollClass();
-            this.setupResize();
-            this.setupViewScroll();
-            // 优化初始化时Scroll滚动体验问题，通过透明度解决，默认透明度为0，滚动结束后恢复
-            this.elementRef.nativeElement.style.opacity = '1';
-            this.ganttUpper.viewChange.pipe(startWith(null)).subscribe(() => {
-                this.scrollToToday();
-            });
-        });
-    }
-    setupViewScroll() {
-        if (this.ganttUpper.disabledLoadOnScroll) {
-            return;
-        }
-        this.dom
-            .getViewerScroll()
-            .pipe(takeUntil(this.unsubscribe$))
-            .subscribe((event) => {
-            if (event.direction === ScrollDirection.LEFT) {
-                const dates = this.view.addStartDate();
-                if (dates) {
-                    event.target.scrollLeft += this.view.getDateRangeWidth(dates.start, dates.end);
-                    this.ngZone.run(() => {
-                        this.ganttUpper.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() });
-                    });
-                }
-            }
-            if (event.direction === ScrollDirection.RIGHT) {
-                const dates = this.view.addEndDate();
-                if (dates) {
-                    this.ngZone.run(() => {
-                        this.ganttUpper.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() });
-                    });
-                }
-            }
-        });
-    }
-    setupResize() {
-        this.dom
-            .getResize()
-            .pipe(takeUntil(this.unsubscribe$))
-            .subscribe(() => {
-            this.setupScrollClass();
-        });
-    }
-    setupScrollClass() {
-        const mainContainer = this.dom.mainContainer;
-        const height = mainContainer.offsetHeight;
-        const scrollHeight = mainContainer.scrollHeight;
-        if (scrollHeight > height) {
-            this.elementRef.nativeElement.className = 'gantt gantt-scroll';
-        }
-        else {
-            this.elementRef.nativeElement.className = 'gantt';
-        }
-    }
-    scrollToToday() {
-        const x = this.view.getTodayXPoint();
-        this.dom.scrollMainContainer(x);
-    }
-}
-NgxGanttRootComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ngx-gantt-root',
-                template: "<div class=\"gantt-side\" [style.width.px]=\"sideWidth\">\n  <div class=\"gantt-side-container\">\n    <ng-template [ngTemplateOutlet]=\"sideTemplate\"></ng-template>\n  </div>\n</div>\n<div class=\"gantt-container\">\n  <gantt-calendar-overlay></gantt-calendar-overlay>\n  <gantt-drag-backdrop></gantt-drag-backdrop>\n  <div class=\"gantt-main\">\n    <ng-template [ngTemplateOutlet]=\"mainTemplate\"></ng-template>\n  </div>\n</div>\n",
-                providers: [GanttDomService, GanttDragContainer]
-            },] }
-];
-NgxGanttRootComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: NgZone },
-    { type: GanttDomService },
-    { type: GanttDragContainer },
-    { type: GanttUpper, decorators: [{ type: Inject, args: [GANTT_UPPER_TOKEN,] }] },
-    { type: GanttPrintService, decorators: [{ type: Optional }] }
-];
-NgxGanttRootComponent.propDecorators = {
-    sideWidth: [{ type: Input }],
-    ganttClass: [{ type: HostBinding, args: ['class.gantt',] }],
-    sideTemplate: [{ type: ContentChild, args: ['sideTemplate', { static: true },] }],
-    mainTemplate: [{ type: ContentChild, args: ['mainTemplate', { static: true },] }]
-};
-
-class NgxGanttRangeComponent extends GanttItemUpper {
-    constructor(elementRef, ganttUpper) {
-        super(elementRef, ganttUpper);
-        this.ganttRangeClass = true;
-    }
-    ngOnInit() {
-        super.onInit();
-    }
-    ngOnChanges() {
-        super.onChanges();
-    }
-    ngOnDestroy() {
-        super.onDestroy();
-    }
-}
-NgxGanttRangeComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ngx-gantt-range,gantt-range',
-                template: "<ng-container *ngIf=\"item.start && item.end\">\n  <div class=\"gantt-range-main\">\n    <div class=\"gantt-range-main-progress\" *ngIf=\"item.progress >= 0\" [style.width.%]=\"item.progress * 100\"></div>\n  </div>\n  <div class=\"gantt-range-triangle left\"></div>\n  <div class=\"gantt-range-triangle right\"></div>\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"></ng-template>\n</ng-container>\n"
-            },] }
-];
-NgxGanttRangeComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: GanttUpper, decorators: [{ type: Inject, args: [GANTT_UPPER_TOKEN,] }] }
-];
-NgxGanttRangeComponent.propDecorators = {
-    ganttRangeClass: [{ type: HostBinding, args: ['class.gantt-range',] }]
-};
-
-class IsGanttRangeItemPipe {
-    transform(value) {
-        return value === GanttItemType.range;
-    }
-}
-IsGanttRangeItemPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'isGanttRangeItem'
-            },] }
-];
-class IsGanttBarItemPipe {
-    transform(value) {
-        return value === GanttItemType.bar;
-    }
-}
-IsGanttBarItemPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'isGanttBarItem'
-            },] }
-];
-class IsGanttCustomItemPipe {
-    transform(value) {
-        return value === GanttItemType.custom;
-    }
-}
-IsGanttCustomItemPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'isGanttCustomItem'
-            },] }
-];
-
-class NgxGanttModule {
-}
-NgxGanttModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, DragDropModule],
-                exports: [NgxGanttComponent, NgxGanttTableComponent, NgxGanttTableColumnComponent, NgxGanttRootComponent, NgxGanttBarComponent],
-                declarations: [
-                    NgxGanttComponent,
-                    NgxGanttTableComponent,
-                    NgxGanttTableColumnComponent,
-                    GanttTableComponent,
-                    GanttMainComponent,
-                    GanttCalendarComponent,
-                    GanttLinksComponent,
-                    NgxGanttBarComponent,
-                    GanttIconComponent,
-                    GanttDragBackdropComponent,
-                    NgxGanttRangeComponent,
-                    NgxGanttRootComponent,
-                    IsGanttRangeItemPipe,
-                    IsGanttBarItemPipe,
-                    IsGanttCustomItemPipe
-                ],
-                providers: []
-            },] }
-];
-
-/*
- * Public API Surface of gantt
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { GANTT_UPPER_TOKEN, GanttBarClickEvent, GanttDate, GanttDatePoint, GanttDragEvent, GanttGroupInternal, GanttItemInternal, GanttItemType, GanttItemUpper, GanttLineClickEvent, GanttLinkDragEvent, GanttLoadOnScrollEvent, GanttPrintService, GanttTableEvent, GanttUpper, GanttView, GanttViewType, IsGanttBarItemPipe, IsGanttCustomItemPipe, IsGanttRangeItemPipe, NgxGanttComponent, NgxGanttModule, NgxGanttRootComponent, NgxGanttTableColumnComponent, NgxGanttTableComponent, defaultColumnWidth, minColumnWidth, primaryDatePointTop, secondaryDatePointTop, GanttDomService as ɵa, GanttDragContainer as ɵb, NgxGanttBarComponent as ɵc, GanttBarDrag as ɵd, GanttTableComponent as ɵe, GanttMainComponent as ɵf, GanttCalendarComponent as ɵg, GanttLinksComponent as ɵh, GanttIconComponent as ɵi, GanttDragBackdropComponent as ɵj, NgxGanttRangeComponent as ɵk };
-//# sourceMappingURL=worktile-gantt.js.map