@sme.up/ketchup 9.2.0 → 9.3.0

package/dist/esm/kup-planner-renderer-helper-2143d119.js

@@ -0,0 +1,399 @@
+import { d as KupDates } from './kup-dates-15f89ea2.js';
+
+const columnWidthForTimeUnit = (timeUnit) => {
+    switch (timeUnit) {
+        case 'year':
+            return 60 * 2;
+        default:
+            return 60;
+    }
+};
+const getProjectById = (id, items) => {
+    for (let i = 0; i < items.length; i++) {
+        if (items[i].id === id) {
+            return items[i];
+        }
+    }
+    return undefined;
+};
+const getPhaseById = (id, items) => {
+    for (let i = 0; i < items.length; i++) {
+        if (isDetail(items[i])) {
+            continue;
+        }
+        const item = items[i];
+        if (!item.phases) {
+            continue;
+        }
+        for (let j = 0; j < item.phases.length; j++)
+            if (item.phases[j].id === id) {
+                return item.phases[j];
+            }
+    }
+    return undefined;
+};
+const isDetail = (row) => {
+    return (row &&
+        row.schedule &&
+        row.schedule.length !== 0);
+};
+const mergeTaskIntoProjects = (projects, { id, start, end }) => projects.map((project) => project.id === id ? withNewDates(project, start, end) : project);
+const mergeTaskIntoPhases = (phases, { id, start, end }) => {
+    if (phases) {
+        return phases.map((phase) => phase.id === id ? withNewDates(phase, start, end) : phase);
+    }
+    return undefined;
+};
+const convertProjectToTasks = (item, mainGanttStartDate, mainGanttEndDate) => {
+    var _a;
+    if (!isDetail(item)) {
+        const kupDates = new KupDates();
+        const row = item;
+        const { start, end } = kupDates.validDates(row.startDate, row.endDate, row.name);
+        const { start: start2, end: end2 } = kupDates.validDates(row.secondaryStartDate, row.secondaryEndDate, row.name);
+        const mainTask = {
+            /**
+             * La libreria lo intende come le ore 00:00, che non è coerente
+             *  con come vorremmo ragionare noi. Es.: se un task finisce il 9 luglio,
+             *  la libreria colora le celle fino all'8 luglio compreso, ma non il 9;
+             *  noi invece vorremmo colorare anche il 9.
+             * Possibili workaround: gestirsi ovunque il giorno di differenza (😱);
+             *  impostare le conversioni dell'intervallo di fine come orario 23:59.
+             * In ogni caso va a cozzare con il calcolo delle durate
+             *  (es.: dall'1 al 5 luglio => risulta 4 giorni ma dovrebbe
+             *  essere 5 perché includiamo gli estremi; se sommiamo 23:59 ore
+             *  risulta ancora 4 per la libreria, e 4.99.. se calcolato a mano, e
+             *  ci vuole un Math.round come minimo)
+             */
+            start: start,
+            end: end,
+            id: row.id,
+            name: row.name,
+            type: row.type,
+            valuesToShow: row.valuesToShow,
+            secondaryStart: start2,
+            secondaryEnd: end2,
+            progress: 100,
+            /** Non disabilita clic nè select, ma solo il resize/move */
+            isDisabled: false,
+            hideChildren: false,
+            icon: row.icon,
+        };
+        const children1 = ((_a = row.phases) !== null && _a !== void 0 ? _a : []).map(convertPhaseToTask);
+        return [mainTask, ...children1];
+    }
+    else {
+        const row = item;
+        return [
+            Object.assign({}, convertDetailToTimeline(row, mainGanttStartDate, mainGanttEndDate)),
+        ];
+    }
+};
+const convertPhaseToTask = (item) => {
+    const mapPhase = ({ startDate: phaseStart, endDate: phaseEnd, secondaryStartDate, secondaryEndDate, name: phaseName, id: phaseId, color, selectedColor, dependencies, icon, }) => {
+        const kupDates = new KupDates();
+        const { start, end } = kupDates.validDates(phaseStart, phaseEnd, phaseName);
+        const { start: phaseStart2, end: phaseEnd2 } = kupDates.validDates(secondaryStartDate, secondaryEndDate, phaseName);
+        return {
+            start,
+            end,
+            secondaryStart: phaseStart2,
+            secondaryEnd: phaseEnd2,
+            name: phaseName,
+            valuesToShow: item.valuesToShow,
+            id: phaseId,
+            type: 'task',
+            progress: 100,
+            dependencies,
+            /**
+             * Colori custom per specifico task - ci serve per distinguere le fasi
+             */
+            styles: color
+                ? {
+                    backgroundColor: color,
+                    progressColor: color,
+                    backgroundSelectedColor: selectedColor,
+                    progressSelectedColor: selectedColor,
+                }
+                : {},
+            icon,
+        };
+    };
+    return mapPhase(item);
+};
+const convertDetailToTimeline = (item, mainGanttStartDate, mainGanttEndDate) => {
+    const kupDates = new KupDates();
+    const { id, name, schedule } = item;
+    const getDatesForTask = (item) => {
+        let start = mainGanttStartDate !== null && mainGanttStartDate !== void 0 ? mainGanttStartDate : '';
+        let end = mainGanttEndDate !== null && mainGanttEndDate !== void 0 ? mainGanttEndDate : '';
+        for (let i = 0; i < item.schedule.length; i++) {
+            const lstart = item.schedule[i].startDate;
+            const lend = item.schedule[i].endDate;
+            if (!start || lstart.localeCompare(start) < 0) {
+                start = lstart;
+            }
+            if (!end || lend.localeCompare(end) > 0) {
+                end = lend;
+            }
+        }
+        return kupDates.validDates(start, end, 'detail item');
+    };
+    const { start, end } = getDatesForTask(item);
+    const convertToFrame = (x) => {
+        const { startDate, endDate, color, selectedColor, icon } = x;
+        const { start, end } = kupDates.validDates(startDate, endDate, 'time frame');
+        return {
+            start,
+            end,
+            backgroundColor: color !== null && color !== void 0 ? color : '0xffffff',
+            backgroundSelectedColor: selectedColor !== null && selectedColor !== void 0 ? selectedColor : color,
+            icon,
+        };
+    };
+    const defaultColor = '#595959';
+    return {
+        id,
+        type: 'timeline',
+        timeline: schedule.map(convertToFrame),
+        name,
+        valuesToShow: item.valuesToShow,
+        start: start,
+        end: end,
+        progress: 100,
+        styles: {
+            backgroundColor: defaultColor,
+            progressColor: defaultColor,
+            backgroundSelectedColor: defaultColor,
+            progressSelectedColor: defaultColor,
+        },
+    };
+};
+/** Return a shallow copy, with the dates updated */
+const withNewDates = (p, start, end) => {
+    const kupDates = new KupDates();
+    const startDate = kupDates.formatToIsoDate(start);
+    const endDate = kupDates.formatToIsoDate(end);
+    const extra = { startDate, endDate };
+    return Object.assign(Object.assign({}, p), extra);
+};
+/**
+ * Calculate date range valid for each Gantt
+ * @param mainGanttItems
+ * @param timeUnit
+ * @param mainGanttDoubleView
+ * @param secondaryGanttItems
+ * @param preStepsCount
+ * @returns
+ */
+const calculateDisplayedDateRange = (mainGanttItems, timeUnit, mainGanttDoubleView, secondaryGanttItems, preStepsCount) => {
+    const dates = ganttDateRangeFromGanttTask(mainGanttItems, timeUnit, preStepsCount !== null && preStepsCount !== void 0 ? preStepsCount : 1, mainGanttDoubleView);
+    if (secondaryGanttItems) {
+        const dates2 = ganttDateRangeFromDetail(secondaryGanttItems, timeUnit, preStepsCount !== null && preStepsCount !== void 0 ? preStepsCount : 1, mainGanttDoubleView);
+        if (dates2[0] < dates[0]) {
+            dates[0] = dates2[0];
+        }
+        if (dates2[1] > dates[1]) {
+            dates[1] = dates2[1];
+        }
+    }
+    return {
+        displayedStartDate: dates[0],
+        displayedEndDate: dates[1],
+    };
+};
+const ganttDateRangeFromGanttTask = (tasks, viewMode, preStepsCount, showSecondaryDates) => {
+    const dates = [];
+    const kupDates = new KupDates();
+    tasks.forEach((item) => {
+        var _a;
+        dates.push({
+            start: kupDates.parseToDayStart(item.startDate),
+            end: kupDates.parseToDayEnd(item.endDate),
+            secondaryStart: kupDates.parseToDayStart(item.secondaryStartDate),
+            secondaryEnd: kupDates.parseToDayEnd(item.secondaryEndDate),
+        });
+        (_a = item.phases) === null || _a === void 0 ? void 0 : _a.forEach((phase) => {
+            dates.push({
+                start: kupDates.parseToDayStart(phase.startDate),
+                end: kupDates.parseToDayEnd(phase.endDate),
+                secondaryStart: kupDates.parseToDayStart(phase.secondaryStartDate),
+                secondaryEnd: kupDates.parseToDayEnd(phase.secondaryEndDate),
+            });
+        });
+    });
+    return ganttDateRangeGeneric(dates, viewMode, preStepsCount, showSecondaryDates, true);
+};
+const ganttDateRangeGeneric = (dates, viewMode, preStepsCount, showSecondaryDates, realDates) => {
+    let newStartDate = dates.length > 0 ? dates[0].start : new Date();
+    let newEndDate = dates.length > 0 ? dates[0].end : new Date();
+    for (const d of dates) {
+        if (d.start < newStartDate) {
+            newStartDate = d.start;
+        }
+        if (d.end > newEndDate) {
+            newEndDate = d.end;
+        }
+        if (showSecondaryDates) {
+            if (d.secondaryStart && d.secondaryStart < newStartDate) {
+                newStartDate = d.secondaryStart;
+            }
+            if (d.secondaryEnd && d.secondaryEnd > newEndDate) {
+                newEndDate = d.secondaryEnd;
+            }
+        }
+    }
+    if (realDates) {
+        return [newStartDate, newEndDate];
+    }
+    switch (viewMode) {
+        case 'year':
+            newStartDate = addToDate(newStartDate, -1, 'year');
+            newStartDate = startOfDate(newStartDate, 'year');
+            newEndDate = addToDate(newEndDate, 1, 'year');
+            newEndDate = startOfDate(newEndDate, 'year');
+            break;
+        case 'month':
+            newStartDate = addToDate(newStartDate, -1 * preStepsCount, 'month');
+            newStartDate = startOfDate(newStartDate, 'month');
+            newEndDate = addToDate(newEndDate, 1, 'year');
+            newEndDate = startOfDate(newEndDate, 'year');
+            break;
+        case 'week':
+            newStartDate = startOfDate(newStartDate, 'day');
+            newStartDate = addToDate(getMonday(newStartDate), -7 * preStepsCount, 'day');
+            newEndDate = startOfDate(newEndDate, 'day');
+            newEndDate = addToDate(newEndDate, 1.5, 'month');
+            break;
+        case 'day':
+            newStartDate = startOfDate(newStartDate, 'day');
+            newStartDate = addToDate(newStartDate, -1 * preStepsCount, 'day');
+            newEndDate = startOfDate(newEndDate, 'day');
+            newEndDate = addToDate(newEndDate, 19, 'day');
+            break;
+        /*
+        case ViewMode.QuarterDay:
+          newStartDate = startOfDate(newStartDate, "day");
+          newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
+          newEndDate = startOfDate(newEndDate, "day");
+          newEndDate = addToDate(newEndDate, 66, "hour"); // 24(1 day)*3 - 6
+          break;
+        case ViewMode.HalfDay:
+          newStartDate = startOfDate(newStartDate, "day");
+          newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
+          newEndDate = startOfDate(newEndDate, "day");
+          newEndDate = addToDate(newEndDate, 108, "hour"); // 24(1 day)*5 - 12
+          break;
+        case ViewMode.Hour:
+          newStartDate = startOfDate(newStartDate, "hour");
+          newStartDate = addToDate(newStartDate, -1 * preStepsCount, "hour");
+          newEndDate = startOfDate(newEndDate, "day");
+          newEndDate = addToDate(newEndDate, 1, "day");
+          break;
+          */
+    }
+    return [newStartDate, newEndDate];
+};
+const ganttDateRangeFromDetail = (details, viewMode, preStepsCount, showSecondaryDates) => {
+    const dates = [];
+    const kupDates = new KupDates();
+    details.forEach((item) => {
+        const scheduleItems = item.schedule;
+        if (scheduleItems) {
+            scheduleItems.forEach((item) => {
+                dates.push({
+                    start: kupDates.parseToDayStart(item.startDate),
+                    end: kupDates.parseToDayEnd(item.endDate),
+                    secondaryStart: undefined,
+                    secondaryEnd: undefined,
+                });
+            });
+        }
+    });
+    return ganttDateRangeGeneric(dates, viewMode, preStepsCount, showSecondaryDates, true);
+};
+const addToDate = (date, quantity, scale) => {
+    const newDate = new Date(date.getFullYear() + (scale === 'year' ? quantity : 0), date.getMonth() + (scale === 'month' ? quantity : 0), date.getDate() + (scale === 'day' ? quantity : 0), date.getHours() + (scale === 'hour' ? quantity : 0), date.getMinutes() + (scale === 'minute' ? quantity : 0), date.getSeconds() + (scale === 'second' ? quantity : 0), date.getMilliseconds() + (scale === 'millisecond' ? quantity : 0));
+    return newDate;
+};
+const startOfDate = (date, scale) => {
+    const scores = [
+        'millisecond',
+        'second',
+        'minute',
+        'hour',
+        'day',
+        'month',
+        'year',
+    ];
+    const shouldReset = (_scale) => {
+        const maxScore = scores.indexOf(scale);
+        return scores.indexOf(_scale) <= maxScore;
+    };
+    const newDate = new Date(date.getFullYear(), shouldReset('year') ? 0 : date.getMonth(), shouldReset('month') ? 1 : date.getDate(), shouldReset('day') ? 0 : date.getHours(), shouldReset('hour') ? 0 : date.getMinutes(), shouldReset('minute') ? 0 : date.getSeconds(), shouldReset('second') ? 0 : date.getMilliseconds());
+    return newDate;
+};
+/**
+ * Returns monday of current week
+ * @param date date for modify
+ */
+const getMonday = (date) => {
+    const day = date.getDay();
+    const diff = date.getDate() - day + (day === 0 ? -6 : 1); // adjust when day is sunday
+    return new Date(date.setDate(diff));
+};
+const ganttDateRangeFromTask = (tasks, viewMode, preStepsCount, showSecondaryDates, mainGanttStartDate, mainGanttEndDate) => {
+    const dates = [];
+    tasks.forEach((item) => {
+        dates.push({
+            start: item.start,
+            end: item.end,
+            secondaryStart: item.secondaryStart,
+            secondaryEnd: item.secondaryEnd,
+        });
+    });
+    if (mainGanttStartDate && mainGanttEndDate) {
+        dates.push({
+            start: mainGanttStartDate,
+            end: mainGanttEndDate,
+            secondaryStart: undefined,
+            secondaryEnd: undefined,
+        });
+    }
+    return ganttDateRangeGeneric(dates, viewMode, preStepsCount, showSecondaryDates);
+};
+const seedDates = (startDate, endDate, viewMode) => {
+    let currentDate = new Date(startDate);
+    const dates = [currentDate];
+    while (currentDate < endDate) {
+        switch (viewMode) {
+            case 'year':
+                currentDate = addToDate(currentDate, 1, 'year');
+                break;
+            case 'month':
+                currentDate = addToDate(currentDate, 1, 'month');
+                break;
+            case 'week':
+                currentDate = addToDate(currentDate, 7, 'day');
+                break;
+            case 'day':
+                currentDate = addToDate(currentDate, 1, 'day');
+                break;
+            /*
+            case ViewMode.HalfDay:
+              currentDate = addToDate(currentDate, 12, "hour");
+              break;
+            case ViewMode.QuarterDay:
+              currentDate = addToDate(currentDate, 6, "hour");
+              break;
+            case ViewMode.Hour:
+              currentDate = addToDate(currentDate, 1, "hour");
+              break;
+              */
+        }
+        dates.push(currentDate);
+    }
+    return dates;
+};
+
+export { convertProjectToTasks as a, mergeTaskIntoPhases as b, calculateDisplayedDateRange as c, getPhaseById as d, columnWidthForTimeUnit as e, ganttDateRangeFromTask as f, getProjectById as g, addToDate as h, mergeTaskIntoProjects as m, seedDates as s };

package/dist/esm/kup-planner-renderer.entry.js

@@ -0,0 +1,274 @@
+import { h, r as registerInstance, d as getElement } from './index-59f83f91.js';
+import { c as calculateDisplayedDateRange, a as convertProjectToTasks, m as mergeTaskIntoProjects, g as getProjectById, b as mergeTaskIntoPhases, d as getPhaseById, e as columnWidthForTimeUnit } from './kup-planner-renderer-helper-2143d119.js';
+import { e as KUP_PLANNER_MAIN_GANTT_ID, f as KUP_PLANNER_SECONDARY_GANTT_ID } from './kup-planner-declarations-b9345758.js';
+import { d as KupDates } from './kup-dates-15f89ea2.js';
+import { g as ganttDateTimeFormatters } from './kup-planner-time-formatter-a68e05ba.js';
+
+const CustomTooltipHOC = () => {
+    const CustomTooltip = () => h("div", null);
+    return CustomTooltip;
+};
+
+const KupPlannerRenderer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.locale = 'it-IT';
+        this.props = undefined;
+        this.timeUnit = undefined;
+        this.currentTasks = [];
+        this.currentDetails = [];
+        this.scrollX = -1;
+        this.mainGanttDoubleView = false;
+        this.displayedDates = {
+            displayedStartDate: new Date(),
+            displayedEndDate: new Date(),
+        };
+        this.viewDate = undefined;
+        this.projection = undefined;
+        this.tasks = [];
+        this.details = [];
+    }
+    /*-------------------------------------------------*/
+    /*                   W A T C H E R S               */
+    /*-------------------------------------------------*/
+    mainGanttChangeHandler() {
+        var _a;
+        this.currentTasks = this.props.mainGantt.items;
+        this.currentDetails = (_a = this.props.secondaryGantt) === null || _a === void 0 ? void 0 : _a.items;
+        this.projection = undefined;
+        this.updateTasks();
+    }
+    updateDisplayedDates() {
+        const dates = calculateDisplayedDateRange(this.currentTasks, this.timeUnit, this.mainGanttDoubleView, this.currentDetails, this.props.preStepsCount);
+        if (!this.viewDate) {
+            const now = new Date();
+            if (dates.displayedStartDate <= now &&
+                dates.displayedEndDate >= now) {
+                this.viewDate = now;
+            }
+            else {
+                this.viewDate = dates.displayedStartDate;
+            }
+        }
+    }
+    updateTasks() {
+        var _a, _b;
+        const kupDates = new KupDates();
+        this.tasks = [];
+        for (let i = 0; i < ((_a = this.currentTasks) === null || _a === void 0 ? void 0 : _a.length); i++) {
+            this.tasks.push(...convertProjectToTasks(this.currentTasks[i], kupDates.formatToIsoDate(this.displayedDates.displayedStartDate), kupDates.formatToIsoDate(this.displayedDates.displayedEndDate)));
+        }
+        this.details = [];
+        for (let i = 0; i < ((_b = this.currentDetails) === null || _b === void 0 ? void 0 : _b.length); i++) {
+            this.details.push(...convertProjectToTasks(this.currentDetails[i], kupDates.formatToIsoDate(this.displayedDates.displayedStartDate), kupDates.formatToIsoDate(this.displayedDates.displayedEndDate)));
+        }
+    }
+    //---- Lifecycle hooks ----
+    componentWillLoad() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        this.timeUnit = (_a = this.props) === null || _a === void 0 ? void 0 : _a.viewMode;
+        this.currentTasks = ((_b = this.props) === null || _b === void 0 ? void 0 : _b.mainGantt.items) || [];
+        this.currentDetails = (_d = (_c = this.props) === null || _c === void 0 ? void 0 : _c.secondaryGantt) === null || _d === void 0 ? void 0 : _d.items;
+        this.scrollX = ((_f = (_e = this.props) === null || _e === void 0 ? void 0 : _e.mainGantt) === null || _f === void 0 ? void 0 : _f.initialScrollX) || -1;
+        this.mainGanttDoubleView =
+            (_j = (_h = (_g = this.props) === null || _g === void 0 ? void 0 : _g.mainGantt) === null || _h === void 0 ? void 0 : _h.showSecondaryDates) !== null && _j !== void 0 ? _j : false;
+        this.displayedDates = calculateDisplayedDateRange(this.currentTasks, this.timeUnit, this.mainGanttDoubleView, this.currentDetails, (_k = this.props) === null || _k === void 0 ? void 0 : _k.preStepsCount);
+        this.viewDate = undefined;
+        this.projection = undefined;
+        this.updateTasks();
+    }
+    /*-------------------------------------------------*/
+    /*           P u b l i c   M e t h o d s           */
+    /*-------------------------------------------------*/
+    // Handle click event
+    handleClick(row, onClick) {
+        if (!row) {
+            return;
+        }
+        if (row.type === 'task' && this.props.secondaryGantt) {
+            const phase = row;
+            // Set projection state
+            this.projection = {
+                start: new Date(phase.startDate),
+                end: new Date(phase.endDate),
+                color: phase.color || '#ED7D31', // Default color if not provided
+            };
+        }
+        else {
+            this.projection = undefined;
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick(row);
+    }
+    // Handle dbl click event
+    handleDblClick(row, onDblClick) {
+        if (!row) {
+            return;
+        }
+        onDblClick === null || onDblClick === void 0 ? void 0 : onDblClick(row);
+    }
+    // Handle context menu event
+    handleContextMenu(event, row, onContextMenu) {
+        if (!row) {
+            return;
+        }
+        // Create projections if a phase is clicked
+        if (row.type === 'task' && this.props.secondaryGantt) {
+            const phase = row;
+            // Set projection state
+            this.projection = {
+                start: new Date(phase.startDate),
+                end: new Date(phase.endDate),
+                color: phase.color || '#ED7D31', // Default color if not provided
+            };
+        }
+        else {
+            this.projection = undefined;
+        }
+        // Emit the 'itemContextMenu' event with the event and clicked row data
+        onContextMenu === null || onContextMenu === void 0 ? void 0 : onContextMenu(event, row);
+    }
+    // Handle setting double view
+    handleSetDoubleView(checked) {
+        var _a, _b;
+        this.mainGanttDoubleView = checked;
+        (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onSetDoubleView) === null || _b === void 0 ? void 0 : _b.call(_a, checked);
+    }
+    // Handle date change
+    handleDateChange(task, currentProjects, onDateChange) {
+        var _a;
+        const id = task === null || task === void 0 ? void 0 : task.id;
+        if (!id) {
+            return;
+        }
+        let row = getProjectById(id, currentProjects);
+        if (!row) {
+            row = getPhaseById(id, currentProjects);
+        }
+        if (!row) {
+            return;
+        }
+        // Handle timeline
+        if (row.type === 'timeline') {
+            console.log('onDateChange for timeline not managed yet', id, row.type);
+            return;
+        }
+        if (row.type === 'project') {
+            const result = mergeTaskIntoProjects(currentProjects, task);
+            row = getProjectById(row.id, result);
+            this.viewDate = task.start;
+            this.currentTasks = result;
+        }
+        else if (row.type === 'task') {
+            const parentOfClickedPhase = currentProjects.find((p) => { var _a; return (_a = p.phases) === null || _a === void 0 ? void 0 : _a.some((ph) => (ph === null || ph === void 0 ? void 0 : ph.id) === id); });
+            if (parentOfClickedPhase) {
+                const phases = mergeTaskIntoPhases(parentOfClickedPhase.phases, task);
+                const updatedProjects = currentProjects.map((p) => p.id === parentOfClickedPhase.id ? Object.assign(Object.assign({}, p), { phases }) : p);
+                row = getPhaseById(row.id, updatedProjects);
+                // Update projections if phase date changed
+                if (this.props.secondaryGantt && row) {
+                    // Update projection state
+                    this.projection = {
+                        start: new Date(row.startDate),
+                        end: new Date(row.endDate),
+                        color: (_a = row.color) !== null && _a !== void 0 ? _a : '#ED7D31',
+                    };
+                }
+                this.viewDate = task.start;
+                this.currentTasks = updatedProjects;
+            }
+        }
+        // Invoke callback
+        onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(row);
+        // Use setTimeout to ensure DOM updates
+        setTimeout(this.getScrollX, 500);
+    }
+    // Get scrollX
+    getScrollX() {
+        var _a, _b, _c;
+        if (this.rootElement) {
+            const x = (_a = this.rootElement.querySelector('[data-scrollx="true"]')) === null || _a === void 0 ? void 0 : _a.scrollLeft;
+            if (x !== undefined) {
+                (_c = (_b = this.props).onScrollX) === null || _c === void 0 ? void 0 : _c.call(_b, x);
+            }
+        }
+    }
+    render() {
+        var _a, _b, _c;
+        return (h("div", { class: "planner-render" }, h("kup-switcher", { timeUnitChange: (timeUnit) => {
+                var _a, _b;
+                (_b = (_a = this.props).onSetViewMode) === null || _b === void 0 ? void 0 : _b.call(_a, timeUnit);
+                this.timeUnit = timeUnit;
+                this.viewDate = undefined;
+                this.scrollX = -1;
+            } }), this.props && (h("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+            } }, h("kup-gantt", Object.assign({ ganttId: KUP_PLANNER_MAIN_GANTT_ID, key: KUP_PLANNER_SECONDARY_GANTT_ID, filter: this.props.mainGantt.filter, hideLabel: this.props.mainGantt.hideLabel, showSecondaryDates: this.mainGanttDoubleView, hideDependencies: this.props.mainGantt.hideDependencies, ganttHeight: this.props.mainGantt.ganttHeight, displayedStartDate: this.displayedDates.displayedStartDate, displayedEndDate: this.displayedDates.displayedEndDate, viewDate: this.viewDate, tasks: this.tasks, columnWidth: columnWidthForTimeUnit(this.timeUnit), viewMode: this.timeUnit }, this.props.mainGantt.stylingOptions, { TaskListHeader: this.props.mainGantt.taskListHeaderProject, TaskListTable: this.props.mainGantt.taskListTableProject, TooltipContent: (_a = this.props.mainGantt.tooltipContent) !== null && _a !== void 0 ? _a : CustomTooltipHOC(), barClick: (task) => {
+                let row = getProjectById(task.id, this.currentTasks);
+                if (!row) {
+                    row = getPhaseById(task.id, this.currentTasks);
+                }
+                if (row) {
+                    this.handleClick(row, this.props.mainGantt.onClick);
+                }
+            }, barDblClick: (task) => {
+                let row = getProjectById(task.id, this.currentTasks);
+                if (!row) {
+                    row = getPhaseById(task.id, this.currentTasks);
+                }
+                if (row) {
+                    this.handleDblClick(row, this.props.mainGantt.onDblClick);
+                }
+            }, barContextMenu: (event, task) => {
+                let row = getProjectById(task.id, this.currentTasks);
+                if (!row) {
+                    row = getPhaseById(task.id, this.currentTasks);
+                }
+                if (row) {
+                    this.handleContextMenu(event, row, this.props.mainGantt.onContextMenu);
+                }
+            }, dateChange: (task) => this.handleDateChange(task, this.currentTasks, this.props.mainGantt.onDateChange), locale: this.locale, dateTimeFormatters: ganttDateTimeFormatters, initialScrollX: this.scrollX, initialScrollY: this.props.mainGantt.initialScrollY, readOnly: this.props.mainGantt.readOnly, scrollXChange: this.props.onScrollX, scrollYChange: this.props.mainGantt.onScrollY, currentTasks: this.currentTasks, handleClick: this.handleClick.bind(this), handleDblClick: this.handleDblClick.bind(this), handleContextMenu: this.handleContextMenu.bind(this), ganttOnClick: this.props.mainGantt.onClick, ganttOnDblClick: this.props.mainGantt.onDblClick, ganttonOnContextMenu: this.props.mainGantt.onContextMenu, label: this.props.mainGantt.title, doubleView: (_b = this.mainGanttDoubleView) !== null && _b !== void 0 ? _b : false, setDoubleView: this.handleSetDoubleView.bind(this) })), this.props.secondaryGantt && (h("kup-gantt", Object.assign({ ganttId: KUP_PLANNER_SECONDARY_GANTT_ID, key: KUP_PLANNER_SECONDARY_GANTT_ID, filter: this.props.secondaryGantt.filter, hideLabel: this.props.secondaryGantt.hideLabel, showSecondaryDates: this.mainGanttDoubleView, hideDependencies: this.props.secondaryGantt.hideDependencies, ganttHeight: this.props.secondaryGantt.ganttHeight, displayedStartDate: this.displayedDates.displayedStartDate, displayedEndDate: this.displayedDates.displayedEndDate, viewDate: this.viewDate, tasks: this.details, columnWidth: columnWidthForTimeUnit(this.timeUnit), viewMode: this.timeUnit }, this.props.secondaryGantt.stylingOptions, { TaskListHeader: this.props.secondaryGantt
+                .taskListHeaderProject, TaskListTable: this.props.secondaryGantt
+                .taskListTableProject, TooltipContent: (_c = this.props.secondaryGantt.tooltipContent) !== null && _c !== void 0 ? _c : CustomTooltipHOC(), projection: this.projection, barClick: (task) => {
+                if (this.props.secondaryGantt) {
+                    let row = getProjectById(task.id, this
+                        .currentDetails);
+                    if (row) {
+                        this.handleClick(row, this.props.secondaryGantt
+                            .onClick);
+                    }
+                }
+            }, barDblClick: (task) => {
+                if (this.props.secondaryGantt) {
+                    let row = getProjectById(task.id, this
+                        .currentDetails);
+                    if (row) {
+                        this.handleDblClick(row, this.props.secondaryGantt
+                            .onDblClick);
+                    }
+                }
+            }, barContextMenu: (event, task) => {
+                if (this.props.secondaryGantt) {
+                    let row = getProjectById(task.id, this
+                        .currentDetails);
+                    if (row) {
+                        this.handleContextMenu(event, row, this.props.secondaryGantt
+                            .onContextMenu);
+                    }
+                }
+            }, dateChange: (task) => this.handleDateChange(task, this
+                .currentTasks, this.props.secondaryGantt.onDateChange), locale: this.locale, dateTimeFormatters: ganttDateTimeFormatters, initialScrollX: this.scrollX, initialScrollY: this.props.secondaryGantt.initialScrollY, readOnly: this.props.secondaryGantt.readOnly, scrollXChange: this.props.onScrollX, scrollYChange: this.props.secondaryGantt.onScrollY, currentTasks: this.currentTasks, handleClick: this.handleClick.bind(this), handleDblClick: this.handleDblClick.bind(this), handleContextMenu: this.handleContextMenu.bind(this), ganttOnClick: this.props.secondaryGantt.onClick, ganttOnDblClick: this.props.secondaryGantt.onDblClick, ganttonOnContextMenu: this.props.secondaryGantt.onContextMenu, label: this.props.secondaryGantt.title })))))));
+    }
+    get rootElement() { return getElement(this); }
+    static get watchers() { return {
+        "props": ["mainGanttChangeHandler"],
+        "timeUnit": ["updateDisplayedDates"],
+        "mainGanttDoubleView": ["updateDisplayedDates"],
+        "props.preStepsCount": ["updateDisplayedDates"],
+        "viewDate": ["updateDisplayedDates"],
+        "currentTasks": ["updateTasks"],
+        "currentDetails": ["updateTasks"]
+    }; }
+};
+
+export { KupPlannerRenderer as kup_planner_renderer };