@fatcore/gantt-lite 1.0.0

package/dist18/gantt-lite/fesm2022/gantt-lite.mjs

@@ -0,0 +1,774 @@
+import * as i0 from '@angular/core';
+import { Directive, Input, Component, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class SlotIndexToDateLabelConverter {
+    constructor(dateMode, originDate, slotSeconds, hasNegativeDependencySpace) {
+        this.dateMode = dateMode;
+        this.originDate = originDate;
+        this.slotSeconds = slotSeconds;
+        this.hasNegativeDependencySpace = hasNegativeDependencySpace;
+        this.initFormatters();
+    }
+    initFormatters() {
+        this.timeFormatter = new Intl.DateTimeFormat([], {
+            timeZone: this.dateMode === 'utc' ? 'UTC' : undefined,
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: false
+        });
+        this.dayFormatter = new Intl.DateTimeFormat([], {
+            timeZone: this.dateMode === 'utc' ? 'UTC' : undefined,
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+        });
+    }
+    get slotMs() {
+        return this.slotSeconds * 1000;
+    }
+    indexToDate(index) {
+        const realIndex = this.hasNegativeDependencySpace && index > 0 ? index - 1 : index;
+        return new Date(this.originDate + realIndex * this.slotMs);
+    }
+    getLabelCalendar(index, scale) {
+        if (this.hasNegativeDependencySpace && index === 0) {
+            return 'N/A';
+        }
+        const date = this.indexToDate(index);
+        switch (scale) {
+            case '1m':
+            case '10m':
+            case '30m':
+            case 'hour':
+            case '6 hours':
+            case '12 hours':
+                return this.formatTime(date);
+            case 'day':
+                return this.formatDay(date);
+            case 'week':
+                return this.formatRange(date, 7);
+            case 'month':
+                return this.formatMonthRange(date);
+            case 'year':
+                return this.formatYearRange(date);
+            default:
+                return '';
+        }
+    }
+    getLabelDuration(index, scale) {
+        if (index === -1) {
+            return 'N/A';
+        }
+        switch (scale) {
+            case '1m':
+                return `${index * 1}m`;
+            case '10m':
+                return `${index * 10}m`;
+            case '30m':
+                return `${index * 30}m`;
+            case 'hour':
+                return `${index}h`;
+            case '6 hours':
+                return `${index * 6}h`;
+            case '12 hours':
+                return `${index * 12}h`;
+            case 'day':
+                return `${index}D`;
+            case 'week':
+                return `${index * 7}D - ${index * 7 + 7}D`;
+            case 'month':
+                return `${index * 30}D - ${index * 30 + 30}D`;
+            case 'year':
+                return `${index * 365}D - ${index * 365 + 365}D`;
+            default:
+                return '';
+        }
+    }
+    formatTime(date) {
+        return this.timeFormatter.format(date);
+    }
+    formatDay(date) {
+        return this.dayFormatter.format(date);
+    }
+    formatRange(start, days) {
+        const end = new Date(start);
+        end.setDate(end.getDate() + days);
+        return `${start.toLocaleDateString()} - ${end.toLocaleDateString()}`;
+    }
+    formatMonthRange(start) {
+        const date = new Date(start);
+        date.setDate(1);
+        return date.toLocaleDateString();
+    }
+    formatYearRange(start) {
+        return `${start.toLocaleDateString()}`;
+    }
+}
+
+class GanttLiteBase {
+    constructor() {
+        this.rowHeight = 40;
+        this.defaultScale = 'day';
+        this.dataType = 'duration';
+        this.dateMode = 'local';
+        this.extraColumns = [];
+        this.slots = [];
+        this.tasks = [];
+        this.dependencyPaths = [];
+        this.scaleSelected = this.getScaleConfig(this.defaultScale);
+        this.headerHeight = 32;
+        this.ganttHeight = 0;
+        this.ganttWidth = 0;
+        this.leftPanelWidth = 320;
+        this.visibleGridColumns = [];
+        this.visibleTooltipColumns = [];
+        this.layout = { rootMaxHeight: 0, bodyHeight: 0, scrollHeight: 0, resizerHeight: 0 };
+        this.scales = ['1m', '10m', '30m', 'hour', '6 hours', '12 hours', 'day', 'week', 'month', 'year'];
+        this.scalesDate = ['1m', '10m', '30m', 'hour', 'day', 'week', 'month', 'year'];
+        this.negativeSlotWidth = 50;
+        this.hasNegativeDependencySpace = false;
+        // minimum columns to show gantt
+        this.coreColumns = [
+            {
+                id: 'label',
+                title: 'Name',
+                valueGetter: t => t.label,
+                showInGrid: true,
+                showInTooltip: true
+            },
+            {
+                id: 'start',
+                title: 'Start',
+                valueGetter: t => this.getDateString(t.start),
+                showInGrid: true,
+                showInTooltip: true,
+                hidden: () => this.dataType !== 'calendar'
+            },
+            {
+                id: 'end',
+                title: 'End',
+                valueGetter: t => this.getDateString(t.end),
+                showInGrid: true,
+                showInTooltip: true,
+                hidden: () => this.dataType !== 'calendar'
+            },
+            {
+                id: 'duration',
+                title: 'Duration',
+                valueGetter: t => this.getDuration(t),
+                showInGrid: true,
+                showInTooltip: true,
+                hidden: () => this.dataType !== 'duration'
+            }
+        ];
+    }
+    // recompute all sizes
+    recomputeLayout() {
+        this.layout.rootMaxHeight = this.ganttHeight - this.headerHeight + this.rowHeight - 3;
+        this.layout.bodyHeight = this.ganttHeight - this.rowHeight / 3;
+        this.layout.scrollHeight = this.ganttHeight - this.rowHeight;
+        this.layout.resizerHeight = this.ganttHeight + this.headerHeight - this.rowHeight;
+    }
+    get columns() {
+        return [
+            ...this.coreColumns,
+            ...this.extraColumns
+        ];
+    }
+    ganttWidthCalcul() {
+        this.ganttWidth = this.slots.length * this.scaleSelected.px;
+    }
+    ganttHeightCalcul() {
+        const max = Math.max(...this.tasks.map((t) => t.row));
+        this.ganttHeight = (max + 2) * this.rowHeight;
+    }
+    refreshVisibleColumns() {
+        this.visibleGridColumns = this.columns.filter(c => c.showInGrid &&
+            (!c.hidden || !c.hidden()));
+        this.visibleTooltipColumns = this.columns.filter(c => c.showInTooltip &&
+            (!c.hidden || !c.hidden()));
+    }
+    getRawTaskX(task) {
+        return (task.startSlot ?? 0) * this.scaleSelected.px;
+    }
+    getDateString(date) {
+        if (!date)
+            return '';
+        if (this.dateMode === 'utc') {
+            return date
+                .toLocaleString([], {
+                timeZone: 'UTC',
+                day: '2-digit',
+                month: '2-digit',
+                year: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+                hour12: false,
+            })
+                .replace(',', '');
+        }
+        return date
+            .toLocaleString([], {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: false,
+        })
+            .replace(',', '');
+    }
+    getDuration(task) {
+        if (!task)
+            return '';
+        if (typeof task.start !== 'number' || typeof task.end !== 'number') {
+            throw new Error(`Task ${task.id} is not in duration mode`);
+        }
+        let total = task.end - task.start;
+        const days = Math.floor(total / 86400);
+        total %= 86400;
+        const hours = Math.floor(total / 3600);
+        total %= 3600;
+        const minutes = Math.floor(total / 60);
+        const seconds = total % 60;
+        let result = '';
+        if (days > 0)
+            result += `${days}d `;
+        if (hours > 0 || days > 0)
+            result += `${hours}h `;
+        if (minutes > 0 || hours > 0 || days > 0)
+            result += `${minutes}m `;
+        result += `${seconds}s`;
+        return result.trim();
+    }
+    getTaskWidth(task) {
+        return ((task.endSlot ?? 0) - (task.startSlot ?? 0)) * this.scaleSelected.px;
+    }
+    getGridTop(i) {
+        return i * this.rowHeight;
+    }
+    getTaskX(task) {
+        const base = (task.startSlot ?? 0) * this.scaleSelected.px;
+        return this.hasNegativeDependencySpace ? this.negativeSlotWidth + base : base;
+    }
+    getTaskY(task) {
+        return task.row * this.rowHeight + this.rowHeight / 10;
+    }
+    trackByIndex(index) {
+        return index;
+    }
+    // get per arrow the path
+    getDependencyPath(fromId, toId) {
+        const from = this.tasks.find((t) => t.id === fromId);
+        const to = this.tasks.find((t) => t.id === toId);
+        if (!from || !to)
+            return '';
+        const fromRight = this.getTaskX(from) + this.getTaskWidth(from);
+        const toLeft = this.getTaskX(to);
+        const fromY = this.getTaskY(from) + this.rowHeight / 2 - this.rowHeight / 12;
+        const toY = this.getTaskY(to) + this.rowHeight / 2 - this.rowHeight / 12;
+        if (from.row === to.row) {
+            return `
+            M ${fromRight} ${fromY}
+            H ${fromRight + 20}
+            V ${toY}
+            H ${toLeft}`;
+        }
+        // consistent U-turn style (even if not strictly needed)
+        const escapeY = toY - this.rowHeight * 0.54;
+        const midX1 = fromRight + 25;
+        const midX2 = toLeft - 25;
+        return `
+            M ${fromRight} ${fromY}
+            H ${midX1}
+            V ${escapeY}
+            H ${midX2}
+            V ${toY}
+            H ${toLeft}`;
+    }
+    // size of columns per minutes
+    getScaleConfig(scale) {
+        switch (scale) {
+            case '1m':
+                return { secondes: 60, px: 120 };
+            case '10m':
+                return { secondes: 600, px: 120 };
+            case '30m':
+                return { secondes: 1800, px: 120 };
+            case 'hour':
+                return { secondes: 3600, px: 120 };
+            case '6 hours':
+                return { secondes: 21600, px: 120 };
+            case '12 hours':
+                return { secondes: 43200, px: 120 };
+            case 'day':
+                return { secondes: 86400, px: 150 };
+            case 'week':
+                return { secondes: 604800, px: 200 };
+            case 'month':
+                return { secondes: 2592000, px: 350 };
+            case 'year':
+                return { secondes: 31536000, px: 500 };
+            default:
+                return { secondes: 1800, px: 120 };
+        }
+    }
+    alignOriginByScale(date, defaultScale) {
+        const d = new Date(date);
+        switch (defaultScale) {
+            case 'week': {
+                // align monday
+                const d = new Date(date);
+                const day = d.getDay(); // 0 = Sunday, 1 = Monday, ...
+                const diff = day === 0 ? -6 : 1 - day; // move back to Monday
+                d.setDate(d.getDate() + diff);
+                d.setHours(0, 0, 0, 0);
+                return d;
+            }
+            case 'month': {
+                d.setDate(1);
+                d.setHours(0, 0, 0, 0);
+                return d;
+            }
+            case 'year': {
+                d.setMonth(0, 1); // Jan 1
+                d.setHours(0, 0, 0, 0);
+                return d;
+            }
+            case 'day': {
+                // shift back by 1 day (buffer slot)
+                d.setDate(d.getDate() - 1);
+                d.setHours(0, 0, 0, 0);
+                return d;
+            }
+            case 'hour': {
+                // shift back by 1 hour
+                d.setHours(d.getHours() - 1);
+                d.setMinutes(0, 0, 0);
+                return d;
+            }
+            case '6 hours': {
+                d.setHours(d.getHours() - 6);
+                d.setMinutes(0, 0, 0);
+                return d;
+            }
+            case '12 hours': {
+                d.setHours(d.getHours() - 12);
+                d.setMinutes(0, 0, 0);
+                return d;
+            }
+            case '30m': {
+                d.setMinutes(d.getMinutes() - 30);
+                d.setSeconds(0, 0);
+                return d;
+            }
+            case '10m': {
+                d.setMinutes(d.getMinutes() - 10);
+                d.setSeconds(0, 0);
+                return d;
+            }
+            case '1m': {
+                d.setMinutes(d.getMinutes() - 1);
+                d.setSeconds(0, 0);
+                return d;
+            }
+            default:
+                return d;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GanttLiteBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: GanttLiteBase, inputs: { rowHeight: "rowHeight", defaultScale: "defaultScale", dataType: "dataType", dateMode: "dateMode", extraColumns: "extraColumns" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GanttLiteBase, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { rowHeight: [{
+                type: Input
+            }], defaultScale: [{
+                type: Input
+            }], dataType: [{
+                type: Input
+            }], dateMode: [{
+                type: Input
+            }], extraColumns: [{
+                type: Input
+            }] } });
+
+class GanttLiteComponent extends GanttLiteBase {
+    set rawTasks(value) {
+        this._rawTasks = value ?? [];
+        this.recalculteAll();
+    }
+    get rawTasks() {
+        return this._rawTasks;
+    }
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.toolbarHeight = 27;
+        this.hoveredDependencyIds = new Set();
+        this.selectedTaskId = null;
+        this.tooltipTask = null;
+        this.tooltipX = 0;
+        this.tooltipY = 0;
+        this.maxSlotsAlert = false;
+        this.loading = false;
+        this.showLeftBtn = false;
+        this.showRightBtn = true;
+        this.buttonsHeight = 20;
+        this.viewTasks = [];
+        this._rawTasks = [];
+        this.originDate = 0;
+        this.resizing = false;
+        this.labelConverter = null;
+    }
+    // recalculate all Gantt
+    recalculteAll() {
+        this.loading = true;
+        this.cdr.markForCheck();
+        setTimeout(() => {
+            const start = performance.now();
+            this.refreshVisibleColumns();
+            this.scaleSelected = this.getScaleConfig(this.defaultScale);
+            if (this.dataType !== 'duration') {
+                const base = new Date(Math.min(...this.rawTasks.map((t) => t.start.getTime())));
+                this.originDate = this.alignOriginByScale(base, this.defaultScale).getTime();
+                this.labelConverter = new SlotIndexToDateLabelConverter(this.dateMode, this.originDate, this.scaleSelected.secondes, this.hasNegativeDependencySpace);
+                this.buildTaskSlotsFromDates();
+            }
+            else {
+                this.labelConverter = new SlotIndexToDateLabelConverter(this.dateMode, this.originDate, this.scaleSelected.secondes, this.hasNegativeDependencySpace);
+                this.buildTaskSlotsFromDuration();
+            }
+            this.detectNegativeDependencySpace();
+            this.calculateTimelineSlots();
+            this.getAllDependencyPaths();
+            this.ganttHeightCalcul();
+            this.ganttWidthCalcul();
+            this.recomputeLayout();
+            this.ganttScroll.nativeElement.style.height = this.layout.scrollHeight + 'px';
+            this.ganttBodyScroll.nativeElement.style.height = this.layout.bodyHeight + 'px';
+            this.timelineHeader.nativeElement.style.height = this.headerHeight + 'px';
+            this.ganttContent.nativeElement.style.height = this.ganttHeight - this.rowHeight + 'px';
+            this.ganttContent.nativeElement.style.width = this.ganttWidth + 'px';
+            this.leftPanel.nativeElement.style.width = this.leftPanelWidth + 'px';
+            this.buildViewTasks();
+            setTimeout(() => {
+                this.recenterSelectedTask();
+            }, 0);
+            this.loading = false;
+            this.cdr.markForCheck();
+            requestAnimationFrame(() => {
+                const end = performance.now();
+                console.log('frame time including render:', end - start, 'ms');
+            });
+        }, 0);
+    }
+    buildViewTasks() {
+        const h = this.rowHeight / 1.25;
+        this.viewTasks = this.tasks.map((t) => {
+            return {
+                ...t,
+                x: this.getTaskX(t),
+                y: this.getTaskY(t),
+                width: this.getTaskWidth(t),
+                height: h,
+            };
+        });
+    }
+    // click on button 10m, hour, months
+    setScale(scale) {
+        this.defaultScale = scale;
+        this.recalculteAll();
+    }
+    // if task was selected scroll back to it
+    recenterSelectedTask() {
+        if (!this.selectedTaskId) {
+            if (!this.ganttScroll)
+                return;
+            this.ganttScroll.nativeElement.scrollLeft = 0;
+            // force header sync
+            if (this.timelineHeader?.nativeElement) {
+                this.timelineHeader.nativeElement.scrollLeft = 0;
+            }
+            this.onScrolled();
+        }
+        const task = this.tasks.find((t) => t.id === this.selectedTaskId);
+        if (!task || !this.ganttScroll)
+            return;
+        // scroll X
+        const viewportWidth = this.ganttScroll.nativeElement.clientWidth;
+        const targetScrollLeft = this.getTaskX(task) - viewportWidth / 2;
+        this.ganttScroll.nativeElement.scrollTo({ left: Math.max(targetScrollLeft, 0), behavior: 'auto' });
+        // scroll Y
+        const viewportHeight = this.ganttBodyScroll.nativeElement.clientHeight;
+        const targetTop = task.row * this.rowHeight;
+        const scrollTop = targetTop - viewportHeight / 2 + this.rowHeight / 2;
+        this.ganttBodyScroll.nativeElement.scrollTo({ top: Math.max(scrollTop, 0), behavior: 'auto' });
+        this.onScrolled();
+    }
+    // detect if there is a need to add the N/A slot in order to be able to show dependency arrow before 0.
+    detectNegativeDependencySpace() {
+        const originTasks = this.tasks.filter((t) => (t.startSlot ?? 0) === 0);
+        this.hasNegativeDependencySpace = originTasks.some((task) => {
+            const fromRight = this.getRawTaskX(task) + this.getTaskWidth(task);
+            return (task.dependencies ?? []).some((depId) => {
+                const target = this.tasks.find((t) => t.id === depId);
+                if (!target)
+                    return false;
+                const toLeft = this.getRawTaskX(target);
+                // true if dependency goes "backwards"
+                return toLeft < fromRight;
+            });
+        });
+    }
+    // scroll buttons left/right => click small go, stay clicked scroll a lot
+    startScroll(direction) {
+        // instant first move           
+        this.scrollInterval = setInterval(() => {
+            this.ganttScroll.nativeElement.scrollLeft += direction === 'left' ? -100 : 100;
+            this.onScrolled();
+        }, 50);
+    }
+    // update buttons left/right after a scroll.
+    onScrolled() {
+        const el = this.ganttScroll.nativeElement;
+        const maxScrollLeft = el.scrollWidth - el.clientWidth;
+        // left button
+        this.showLeftBtn = el.scrollLeft > 0;
+        if (this.leftBtn?.nativeElement) {
+            if (this.showLeftBtn) {
+                this.leftBtn.nativeElement.style.display = 'block';
+                this.leftBtn.nativeElement.style.left = this.leftPanel.nativeElement.style.width;
+            }
+            else {
+                this.leftBtn.nativeElement.style.display = 'none';
+                this.leftBtn.nativeElement.style.left = this.leftPanel.nativeElement.style.width;
+            }
+        }
+        // right button
+        this.showRightBtn = el.scrollLeft < maxScrollLeft - 1 || el.scrollLeft === 0; // small tolerance
+        if (this.rightBtn?.nativeElement) {
+            if (this.showRightBtn) {
+                this.rightBtn.nativeElement.style.display = 'block';
+            }
+            else {
+                this.rightBtn.nativeElement.style.display = 'none';
+            }
+        }
+        if (!this.showLeftBtn || !this.showRightBtn) {
+            this.stopScroll();
+        }
+    }
+    stopScroll() {
+        clearInterval(this.scrollInterval);
+    }
+    // to sync header and grid
+    onHorizontalScroll(event) {
+        this.timelineHeader.nativeElement.scrollLeft = event.target.scrollLeft;
+    }
+    // highlight dependencies (arrows)
+    updateHoveredDependencies(task) {
+        this.hoveredDependencyIds.clear();
+        if (!task) {
+            return;
+        }
+        // outgoing dependencies
+        for (const dep of task.dependencies ?? []) {
+            this.hoveredDependencyIds.add(`${dep}->${task.id}`);
+        }
+        // incoming dependencies
+        for (const t of this.tasks) {
+            if ((t.dependencies ?? []).includes(task.id)) {
+                this.hoveredDependencyIds.add(`${task.id}->${t.id}`);
+            }
+        }
+    }
+    // select task left and right panel
+    selectTask(task, scroll) {
+        if (this.selectedTaskId === task.id) {
+            this.selectedTaskId = null;
+            this.hoveredDependencyIds.clear();
+            this.hideTooltip();
+            this.onScrolled();
+            return;
+        }
+        this.selectedTaskId = task.id;
+        this.updateHoveredDependencies(task);
+        this.onScrolled();
+        if (!scroll || !this.ganttScroll)
+            return;
+        const container = this.ganttScroll.nativeElement;
+        const viewportWidth = container.clientWidth;
+        const targetScrollLeft = this.getTaskX(task) - viewportWidth / 2;
+        container.scrollTo({
+            left: Math.max(targetScrollLeft, 0),
+            behavior: 'smooth',
+        });
+        this.onScrolled();
+    }
+    // resize between panel left and right
+    startResize(event) {
+        event.preventDefault();
+        this.resizing = true;
+        const containerRect = this.ganttBodyScroll.nativeElement.getBoundingClientRect();
+        const left = containerRect.left;
+        const min = 50;
+        const max = containerRect.width - 75;
+        const moveHandler = (e) => {
+            if (!this.resizing)
+                return;
+            const x = e.clientX - left;
+            const width = x < min ? min : x > max ? max : x;
+            // direct DOM update (no Angular)
+            this.leftPanel.nativeElement.style.width = width + 'px';
+            if (this.leftBtn?.nativeElement) {
+                this.leftBtn.nativeElement.style.left = `${width}px`;
+            }
+        };
+        const upHandler = () => {
+            this.resizing = false;
+            window.removeEventListener('mousemove', moveHandler);
+            window.removeEventListener('mouseup', upHandler);
+        };
+        window.addEventListener('mousemove', moveHandler);
+        window.addEventListener('mouseup', upHandler);
+    }
+    showTooltip(event, task) {
+        this.tooltipTask = task;
+        const tooltip = document.querySelector('.global-tooltip');
+        if (!tooltip)
+            return;
+        tooltip.style.left = `${event.clientX + 10}px`;
+        tooltip.style.top = `${event.clientY - 50}px`;
+        tooltip.style.display = 'block';
+    }
+    hideTooltip() {
+        this.tooltipTask = null;
+        const tooltip = document.querySelector('.global-tooltip');
+        if (!tooltip)
+            return;
+        tooltip.style.display = 'none';
+    }
+    buildTaskSlotsFromDates() {
+        const slotMs = this.scaleSelected.secondes * 1000;
+        this.tasks = this.rawTasks.map((t) => {
+            if (!(t.start instanceof Date) || !(t.end instanceof Date)) {
+                throw new Error(`Task "${t.id}" must have Date start/end values.`);
+            }
+            const startSlot = (t.start.getTime() - this.originDate) / slotMs;
+            const endSlot = (t.end.getTime() - this.originDate) / slotMs;
+            return { ...t, startSlot, endSlot };
+        });
+    }
+    buildTaskSlotsFromDuration() {
+        this.tasks = this.rawTasks.map((t) => {
+            if (typeof t.start !== 'number' || typeof t.end !== 'number') {
+                throw new Error(`Task "${t.id}" must have numeric start/end values expressed in minutes.`);
+            }
+            const startSlot = t.start / this.scaleSelected.secondes;
+            const endSlot = t.end / this.scaleSelected.secondes;
+            return { ...t, startSlot, endSlot };
+        });
+    }
+    // get all slots (timeline)
+    calculateTimelineSlots() {
+        const maxSlot = Math.max(...this.tasks.map(t => t.endSlot ?? 0));
+        if (maxSlot > 53000) {
+            this.maxSlotsAlert = true;
+            this.slots = [];
+            return;
+        }
+        this.maxSlotsAlert = false;
+        const buffer = [];
+        let offsetX = 0;
+        if (this.hasNegativeDependencySpace) {
+            buffer.push({
+                index: -1,
+                x: 0,
+                width: this.negativeSlotWidth,
+                label: 'N/A'
+            });
+            offsetX = this.negativeSlotWidth;
+        }
+        for (let i = 0; i <= maxSlot + 2; i++) {
+            buffer.push({
+                index: i,
+                x: offsetX + i * this.scaleSelected.px,
+                width: this.scaleSelected.px,
+                label: this.getSlotLabel(i) ?? 'Error',
+            });
+        }
+        this.slots = buffer;
+    }
+    // get all paths of arrows
+    getAllDependencyPaths() {
+        this.dependencyPaths = this.tasks.flatMap((task) => (task.dependencies ?? []).map((dep) => ({
+            from: dep,
+            to: task.id,
+            id: `${dep}->${task.id}`,
+            path: this.getDependencyPath(dep, task.id),
+        })));
+    }
+    // get label for date header
+    getSlotLabel(index) {
+        if (this.dataType === 'calendar') {
+            return this.labelConverter?.getLabelCalendar(index, this.defaultScale) ?? 'Error';
+        }
+        return this.labelConverter?.getLabelDuration(index, this.defaultScale) ?? 'Error';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GanttLiteComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: GanttLiteComponent, selector: "gantt-lite", inputs: { rawTasks: "rawTasks" }, viewQueries: [{ propertyName: "ganttBodyScroll", first: true, predicate: ["ganttBodyScroll"], descendants: true }, { propertyName: "ganttContent", first: true, predicate: ["ganttContent"], descendants: true }, { propertyName: "ganttScroll", first: true, predicate: ["ganttScroll"], descendants: true }, { propertyName: "leftPanel", first: true, predicate: ["leftPanel"], descendants: true }, { propertyName: "timelineHeader", first: true, predicate: ["timelineHeader"], descendants: true }, { propertyName: "leftBtn", first: true, predicate: ["leftBtn"], descendants: true }, { propertyName: "rightBtn", first: true, predicate: ["rightBtn"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"gantt-root\" [style.max-height.px]=\"layout.rootMaxHeight\" [style.min-height.px]=\"100\">\n    <!-- TOOLBAR -->\n    <div class=\"toolbar\" [style.height.px]=\"buttonsHeight\">\n        <div *ngIf=\"dateMode === 'utc' || dataType === 'duration'\">\n            <button class=\"gantt-button\" *ngFor=\"let s of scales\" (click)=\"setScale(s)\" [class.active]=\"defaultScale === s\">\n                {{ s }}\n            </button>\n        </div>\n        <div *ngIf=\"dateMode !== 'utc' && dataType === 'calendar'\">\n            <button class=\"gantt-button\" *ngFor=\"let s of scalesDate\" (click)=\"setScale(s)\"\n                [class.active]=\"defaultScale === s\">\n                {{ s }}\n            </button>\n        </div>\n        <label *ngIf=\"maxSlotsAlert\" style=\"color: red;\">\n            Data is too massive to show Gantt smoothly, try changing the scale\n        </label>\n    </div>\n    <!-- TOOLTIP -->\n    <div class=\"global-tooltip\" [style.display]=\"tooltipTask ? 'block' : 'none'\">\n        <ng-container *ngIf=\"tooltipTask as task\">\n            <div *ngFor=\"let column of visibleTooltipColumns\">\n                <strong>{{ column?.title }}:</strong>\n                {{ column?.valueGetter(task) }}\n            </div>\n        </ng-container>\n    </div>\n    <!-- BUTTONS FOR SCROLL GANTT -->\n    <div *ngIf=\"!maxSlotsAlert && loading === false\" class=\"floating-nav\">\n        <button class=\"nav-btn left\" (mousedown)=\"startScroll('left')\"\n            (mouseup)=\"stopScroll()\" (mouseleave)=\"stopScroll()\" #leftBtn >\n            \u2039\n        </button>\n        <button class=\"nav-btn right\" (mousedown)=\"startScroll('right')\"\n            (mouseup)=\"stopScroll()\" (mouseleave)=\"stopScroll()\" #rightBtn>\n            \u203A\n        </button>\n    </div>\n    <!-- LOADING -->\n    <div class=\"loading-overlay\" *ngIf=\"loading\" [style.top]=\"'50%'\">\n        <div class=\"spinner\"></div>\n    </div>\n    <!-- SINGLE VERTICAL SCROLL -->\n    <div class=\"gantt-body\" #ganttBodyScroll>\n        <!-- LEFT PANEL -->\n        <div class=\"left-panel\" #leftPanel>\n            <div class=\"task-row header\" [style.height.px]=\"headerHeight\">\n                <div class=\"cell\" *ngFor=\"let column of visibleGridColumns\" [style.width.px]=\"column.width || 120\">\n                    {{ column?.title }}\n                </div>\n            </div>\n            <div class=\"task-row\" *ngFor=\"let task of tasks\" [style.height.px]=\"rowHeight\"\n                (click)=\"selectTask(task, true); $event.stopPropagation()\"\n                [class.highlighted-row]=\"selectedTaskId === task.id\">\n                <div class=\"cell\" *ngFor=\"let column of visibleGridColumns\" [style.width.px]=\"column.width || 120\">\n                    {{ column?.valueGetter(task) }}\n                </div>\n            </div>\n        </div>\n        <!-- RESIZER -->\n        <div class=\"resizer\" [style.height.px]=\"layout.resizerHeight\" (mousedown)=\"startResize($event)\">\n        </div>\n        <!-- RIGHT PANEL -->\n        <div class=\"right-panel\" *ngIf=\"!maxSlotsAlert\">\n            <!-- TIMELINE -->\n            <div class=\"timeline-header\" #timelineHeader>\n                <div class=\"timeline-slot\" *ngFor=\"let slot of slots\" [style.width.px]=\"slot.width\">\n                    {{ slot.label }}\n                </div>\n            </div>\n            <!-- HORIZONTAL SCROLL ONLY -->\n            <div class=\"horizontal-scroll\" (scroll)=\"onHorizontalScroll($event)\" #ganttScroll>\n                <div class=\"gantt-content\" #ganttContent>\n                    <!-- GRID -->\n                    <div class=\"grid-layer\">\n                        <div *ngFor=\"let slot of slots; let i = index; trackBy: trackByIndex\" class=\"grid-line\"\n                            [style.left.px]=\"slot.x - 1\">\n                        </div>\n                        <!-- final vertical line -->\n                        <div class=\"grid-line\" [style.left.px]=\"ganttWidth - 1\">\n                        </div>\n                        <!-- horizontal lines -->\n                        <div class=\"horizontal-grid-layer\">\n                            <div *ngFor=\"let task of tasks; let i = index; trackBy: trackByIndex\"\n                                class=\"horizontal-line\" [style.top.px]=\"getGridTop(i)\">\n                            </div>\n                            <!-- final horizontal line -->\n                            <div class=\"horizontal-line\" [style.top.px]=\"ganttHeight\">\n                            </div>\n                        </div>\n                    </div>\n                    <!-- TASKS -->\n                    <div class=\"tasks-layer\">\n                        <div *ngFor=\"let task of viewTasks; let i = index; trackBy: trackByIndex\" class=\"task\"\n                            (mouseenter)=\"showTooltip($event, task)\" (mouseleave)=\"hideTooltip()\"\n                            (click)=\"selectTask(task, false); $event.stopPropagation()\"\n                            [class.highlighted-task]=\"selectedTaskId === task.id\" [style.left.px]=\"task.x\"\n                            [style.top.px]=\"task.y\" [style.width.px]=\"task.width\" [style.height.px]=\"task.height\">\n                            <div class=\"task-label\">\n                                {{ task.label }}\n                            </div>\n                        </div>\n                    </div>\n                    <!-- DEPENDENCIES -->\n                    <svg class=\"dependencies-svg\">\n                        <defs>\n                            <marker id=\"arrow\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\"\n                                orient=\"auto\">\n                                <path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#868d97\" />\n                            </marker>\n                        </defs>\n                        <g class=\"dependencies-normal\">\n                            <path *ngFor=\"let dep of dependencyPaths\" [attr.d]=\"dep.path\" class=\"dependency\"\n                                [class.hidden]=\"hoveredDependencyIds.has(dep.id)\" marker-end=\"url(#arrow)\">\n                            </path>\n                        </g>\n                        <g class=\"dependencies-highlighted\">\n                            <path *ngFor=\"let dep of dependencyPaths\" [attr.d]=\"dep.path\" class=\"highlighted-dependency\"\n                                [class.hidden]=\"!hoveredDependencyIds.has(dep.id)\" marker-end=\"url(#arrow)\">\n                            </path>\n                        </g>\n                    </svg>\n                </div>\n            </div>\n        </div>\n        <div class=\"right-panel-dead\" *ngIf=\"maxSlotsAlert\"></div>\n    </div>\n</div>", styles: [":host{display:block;width:100%;height:100%}.gantt-root{height:100%;width:100%;display:flex;flex-direction:column;overflow:hidden}.gantt-body{flex:1;display:flex;overflow-y:auto;overflow-x:hidden;border-width:1px;border-style:solid;border-color:#aaac}.toolbar{flex-shrink:0;display:flex;gap:8px;background:#fff;position:sticky;top:0;z-index:50}.toolbar button.active{font-weight:700}.loading-overlay{position:sticky;inset:0;display:flex;align-items:center;justify-content:center;z-index:1000}.global-tooltip{position:fixed;background:#585858e6;color:#fff;padding:8px;border-radius:6px;font-size:12px;z-index:1000;pointer-events:none}.left-panel{flex-shrink:0;background:#fff;border-right:1px solid #dcdcdc}.task-row{display:grid;grid-auto-flow:column;grid-auto-columns:120px;gap:0 10px;font-size:small;align-items:center;border-bottom:1px solid #eee;white-space:nowrap;overflow:hidden}.cell{padding:0 8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.task-row.header{font-size:small;font-weight:600;position:sticky;top:0;background:#fff!important;z-index:1}.task-row:hover{background:#ff00001a}.highlighted-row{background:#ff00004d!important}.resizer{min-width:7px;cursor:col-resize;background:#b4b4b4}.resizer:hover{background:#696969}.right-panel{flex:1;min-width:100px!important;position:relative}.right-panel-dead{flex:1;height:10000px;min-width:100px!important;position:relative;background-color:#696969}.horizontal-scroll{overflow-x:hidden;overflow-y:hidden;position:relative}.gantt-content{position:relative}.timeline-header{display:flex;position:sticky;top:0;overflow:hidden;white-space:nowrap;z-index:20;background:#fff;border-bottom:1px solid #ccc}.timeline-slot{flex:0 0 auto;border-right:1px solid #e0e0e0;padding:8px;box-sizing:border-box;text-align:center;font-size:12px}.highlighted-task{background:#f006!important;border-color:#b71c1c!important;z-index:10}.grid-layer{position:absolute;inset:0;pointer-events:none}.grid-line{position:absolute;top:0;bottom:0;width:1px;background:#c8c8c859}.horizontal-grid-layer{position:absolute;inset:0;pointer-events:none}.horizontal-line{position:absolute;left:0;right:0;height:1px;background:#c8c8c840}.dependencies-svg{overflow:visible}.dependencies-normal,.dependencies-highlighted{pointer-events:none}.dependency{stroke:#9ba2ad;stroke-width:1.6;fill:none;opacity:.35}.highlighted-dependency{stroke:#52555a;stroke-width:2.7;fill:none;opacity:1}.dependencies-svg.hovering .dependency{opacity:.035}.tasks-layer{position:relative;z-index:2}.task{position:absolute;background:#9b94f7bf;opacity:.85;color:#505050;padding-top:4px;border-radius:4px;font-size:11px;white-space:nowrap;min-width:2px}.task:hover{background:#ff000026}.spinner{width:40px;height:40px;border:4px solid #ddd;border-top-color:#3f51b5;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}*{box-sizing:border-box}.floating-nav{position:sticky;top:50%;transform:translateY(-50%);z-index:100;pointer-events:none}.nav-btn{position:absolute;width:45px;height:45px;display:flex;align-items:center;justify-content:center;pointer-events:auto;background:#5c9af866;border:none;color:#535353;font-size:26px;cursor:pointer;backdrop-filter:blur(1px);border-radius:2px;line-height:1;text-align:center}.nav-btn:hover{background:#5c9af8b3}.nav-btn.left{margin-left:13px}.nav-btn.right{right:23px}.task-label{padding-left:6px}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GanttLiteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gantt-lite', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"gantt-root\" [style.max-height.px]=\"layout.rootMaxHeight\" [style.min-height.px]=\"100\">\n    <!-- TOOLBAR -->\n    <div class=\"toolbar\" [style.height.px]=\"buttonsHeight\">\n        <div *ngIf=\"dateMode === 'utc' || dataType === 'duration'\">\n            <button class=\"gantt-button\" *ngFor=\"let s of scales\" (click)=\"setScale(s)\" [class.active]=\"defaultScale === s\">\n                {{ s }}\n            </button>\n        </div>\n        <div *ngIf=\"dateMode !== 'utc' && dataType === 'calendar'\">\n            <button class=\"gantt-button\" *ngFor=\"let s of scalesDate\" (click)=\"setScale(s)\"\n                [class.active]=\"defaultScale === s\">\n                {{ s }}\n            </button>\n        </div>\n        <label *ngIf=\"maxSlotsAlert\" style=\"color: red;\">\n            Data is too massive to show Gantt smoothly, try changing the scale\n        </label>\n    </div>\n    <!-- TOOLTIP -->\n    <div class=\"global-tooltip\" [style.display]=\"tooltipTask ? 'block' : 'none'\">\n        <ng-container *ngIf=\"tooltipTask as task\">\n            <div *ngFor=\"let column of visibleTooltipColumns\">\n                <strong>{{ column?.title }}:</strong>\n                {{ column?.valueGetter(task) }}\n            </div>\n        </ng-container>\n    </div>\n    <!-- BUTTONS FOR SCROLL GANTT -->\n    <div *ngIf=\"!maxSlotsAlert && loading === false\" class=\"floating-nav\">\n        <button class=\"nav-btn left\" (mousedown)=\"startScroll('left')\"\n            (mouseup)=\"stopScroll()\" (mouseleave)=\"stopScroll()\" #leftBtn >\n            \u2039\n        </button>\n        <button class=\"nav-btn right\" (mousedown)=\"startScroll('right')\"\n            (mouseup)=\"stopScroll()\" (mouseleave)=\"stopScroll()\" #rightBtn>\n            \u203A\n        </button>\n    </div>\n    <!-- LOADING -->\n    <div class=\"loading-overlay\" *ngIf=\"loading\" [style.top]=\"'50%'\">\n        <div class=\"spinner\"></div>\n    </div>\n    <!-- SINGLE VERTICAL SCROLL -->\n    <div class=\"gantt-body\" #ganttBodyScroll>\n        <!-- LEFT PANEL -->\n        <div class=\"left-panel\" #leftPanel>\n            <div class=\"task-row header\" [style.height.px]=\"headerHeight\">\n                <div class=\"cell\" *ngFor=\"let column of visibleGridColumns\" [style.width.px]=\"column.width || 120\">\n                    {{ column?.title }}\n                </div>\n            </div>\n            <div class=\"task-row\" *ngFor=\"let task of tasks\" [style.height.px]=\"rowHeight\"\n                (click)=\"selectTask(task, true); $event.stopPropagation()\"\n                [class.highlighted-row]=\"selectedTaskId === task.id\">\n                <div class=\"cell\" *ngFor=\"let column of visibleGridColumns\" [style.width.px]=\"column.width || 120\">\n                    {{ column?.valueGetter(task) }}\n                </div>\n            </div>\n        </div>\n        <!-- RESIZER -->\n        <div class=\"resizer\" [style.height.px]=\"layout.resizerHeight\" (mousedown)=\"startResize($event)\">\n        </div>\n        <!-- RIGHT PANEL -->\n        <div class=\"right-panel\" *ngIf=\"!maxSlotsAlert\">\n            <!-- TIMELINE -->\n            <div class=\"timeline-header\" #timelineHeader>\n                <div class=\"timeline-slot\" *ngFor=\"let slot of slots\" [style.width.px]=\"slot.width\">\n                    {{ slot.label }}\n                </div>\n            </div>\n            <!-- HORIZONTAL SCROLL ONLY -->\n            <div class=\"horizontal-scroll\" (scroll)=\"onHorizontalScroll($event)\" #ganttScroll>\n                <div class=\"gantt-content\" #ganttContent>\n                    <!-- GRID -->\n                    <div class=\"grid-layer\">\n                        <div *ngFor=\"let slot of slots; let i = index; trackBy: trackByIndex\" class=\"grid-line\"\n                            [style.left.px]=\"slot.x - 1\">\n                        </div>\n                        <!-- final vertical line -->\n                        <div class=\"grid-line\" [style.left.px]=\"ganttWidth - 1\">\n                        </div>\n                        <!-- horizontal lines -->\n                        <div class=\"horizontal-grid-layer\">\n                            <div *ngFor=\"let task of tasks; let i = index; trackBy: trackByIndex\"\n                                class=\"horizontal-line\" [style.top.px]=\"getGridTop(i)\">\n                            </div>\n                            <!-- final horizontal line -->\n                            <div class=\"horizontal-line\" [style.top.px]=\"ganttHeight\">\n                            </div>\n                        </div>\n                    </div>\n                    <!-- TASKS -->\n                    <div class=\"tasks-layer\">\n                        <div *ngFor=\"let task of viewTasks; let i = index; trackBy: trackByIndex\" class=\"task\"\n                            (mouseenter)=\"showTooltip($event, task)\" (mouseleave)=\"hideTooltip()\"\n                            (click)=\"selectTask(task, false); $event.stopPropagation()\"\n                            [class.highlighted-task]=\"selectedTaskId === task.id\" [style.left.px]=\"task.x\"\n                            [style.top.px]=\"task.y\" [style.width.px]=\"task.width\" [style.height.px]=\"task.height\">\n                            <div class=\"task-label\">\n                                {{ task.label }}\n                            </div>\n                        </div>\n                    </div>\n                    <!-- DEPENDENCIES -->\n                    <svg class=\"dependencies-svg\">\n                        <defs>\n                            <marker id=\"arrow\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\"\n                                orient=\"auto\">\n                                <path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#868d97\" />\n                            </marker>\n                        </defs>\n                        <g class=\"dependencies-normal\">\n                            <path *ngFor=\"let dep of dependencyPaths\" [attr.d]=\"dep.path\" class=\"dependency\"\n                                [class.hidden]=\"hoveredDependencyIds.has(dep.id)\" marker-end=\"url(#arrow)\">\n                            </path>\n                        </g>\n                        <g class=\"dependencies-highlighted\">\n                            <path *ngFor=\"let dep of dependencyPaths\" [attr.d]=\"dep.path\" class=\"highlighted-dependency\"\n                                [class.hidden]=\"!hoveredDependencyIds.has(dep.id)\" marker-end=\"url(#arrow)\">\n                            </path>\n                        </g>\n                    </svg>\n                </div>\n            </div>\n        </div>\n        <div class=\"right-panel-dead\" *ngIf=\"maxSlotsAlert\"></div>\n    </div>\n</div>", styles: [":host{display:block;width:100%;height:100%}.gantt-root{height:100%;width:100%;display:flex;flex-direction:column;overflow:hidden}.gantt-body{flex:1;display:flex;overflow-y:auto;overflow-x:hidden;border-width:1px;border-style:solid;border-color:#aaac}.toolbar{flex-shrink:0;display:flex;gap:8px;background:#fff;position:sticky;top:0;z-index:50}.toolbar button.active{font-weight:700}.loading-overlay{position:sticky;inset:0;display:flex;align-items:center;justify-content:center;z-index:1000}.global-tooltip{position:fixed;background:#585858e6;color:#fff;padding:8px;border-radius:6px;font-size:12px;z-index:1000;pointer-events:none}.left-panel{flex-shrink:0;background:#fff;border-right:1px solid #dcdcdc}.task-row{display:grid;grid-auto-flow:column;grid-auto-columns:120px;gap:0 10px;font-size:small;align-items:center;border-bottom:1px solid #eee;white-space:nowrap;overflow:hidden}.cell{padding:0 8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.task-row.header{font-size:small;font-weight:600;position:sticky;top:0;background:#fff!important;z-index:1}.task-row:hover{background:#ff00001a}.highlighted-row{background:#ff00004d!important}.resizer{min-width:7px;cursor:col-resize;background:#b4b4b4}.resizer:hover{background:#696969}.right-panel{flex:1;min-width:100px!important;position:relative}.right-panel-dead{flex:1;height:10000px;min-width:100px!important;position:relative;background-color:#696969}.horizontal-scroll{overflow-x:hidden;overflow-y:hidden;position:relative}.gantt-content{position:relative}.timeline-header{display:flex;position:sticky;top:0;overflow:hidden;white-space:nowrap;z-index:20;background:#fff;border-bottom:1px solid #ccc}.timeline-slot{flex:0 0 auto;border-right:1px solid #e0e0e0;padding:8px;box-sizing:border-box;text-align:center;font-size:12px}.highlighted-task{background:#f006!important;border-color:#b71c1c!important;z-index:10}.grid-layer{position:absolute;inset:0;pointer-events:none}.grid-line{position:absolute;top:0;bottom:0;width:1px;background:#c8c8c859}.horizontal-grid-layer{position:absolute;inset:0;pointer-events:none}.horizontal-line{position:absolute;left:0;right:0;height:1px;background:#c8c8c840}.dependencies-svg{overflow:visible}.dependencies-normal,.dependencies-highlighted{pointer-events:none}.dependency{stroke:#9ba2ad;stroke-width:1.6;fill:none;opacity:.35}.highlighted-dependency{stroke:#52555a;stroke-width:2.7;fill:none;opacity:1}.dependencies-svg.hovering .dependency{opacity:.035}.tasks-layer{position:relative;z-index:2}.task{position:absolute;background:#9b94f7bf;opacity:.85;color:#505050;padding-top:4px;border-radius:4px;font-size:11px;white-space:nowrap;min-width:2px}.task:hover{background:#ff000026}.spinner{width:40px;height:40px;border:4px solid #ddd;border-top-color:#3f51b5;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}*{box-sizing:border-box}.floating-nav{position:sticky;top:50%;transform:translateY(-50%);z-index:100;pointer-events:none}.nav-btn{position:absolute;width:45px;height:45px;display:flex;align-items:center;justify-content:center;pointer-events:auto;background:#5c9af866;border:none;color:#535353;font-size:26px;cursor:pointer;backdrop-filter:blur(1px);border-radius:2px;line-height:1;text-align:center}.nav-btn:hover{background:#5c9af8b3}.nav-btn.left{margin-left:13px}.nav-btn.right{right:23px}.task-label{padding-left:6px}.hidden{display:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { rawTasks: [{
+                type: Input
+            }], ganttBodyScroll: [{
+                type: ViewChild,
+                args: ['ganttBodyScroll']
+            }], ganttContent: [{
+                type: ViewChild,
+                args: ['ganttContent']
+            }], ganttScroll: [{
+                type: ViewChild,
+                args: ['ganttScroll']
+            }], leftPanel: [{
+                type: ViewChild,
+                args: ['leftPanel']
+            }], timelineHeader: [{
+                type: ViewChild,
+                args: ['timelineHeader']
+            }], leftBtn: [{
+                type: ViewChild,
+                args: ['leftBtn']
+            }], rightBtn: [{
+                type: ViewChild,
+                args: ['rightBtn']
+            }] } });
+
+class GanttLiteModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GanttLiteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: GanttLiteModule, declarations: [GanttLiteComponent], imports: [CommonModule], exports: [GanttLiteComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GanttLiteModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GanttLiteModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [GanttLiteComponent],
+                    imports: [CommonModule],
+                    exports: [GanttLiteComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GanttLiteComponent, GanttLiteModule };
+//# sourceMappingURL=gantt-lite.mjs.map