@fatcore/gantt-lite 1.0.0 → 1.0.2

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

@@ -1,774 +0,0 @@
-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