@sme.up/ketchup 9.6.3 → 9.6.5

package/dist/components/kup-task-list2.js

@@ -1,94 +1,433 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { b as getPhaseById, c as getProjectById } from './kup-planner-renderer-helper.js';
+import { K as KUP_PLANNER_MAIN_GANTT_ID } from './kup-planner-declarations.js';
+import { b as KupDates } from './kup-dates.js';
 import { d as defineCustomElement$2 } from './custom-task-list-header.js';
 import { d as defineCustomElement$1 } from './custom-task-list-table.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, startHour, endHour }) => projects.map((project) => project.id === id ? withNewDates(project, start, end, startHour, endHour) : project);
+const mergeTaskIntoPhases = (phases, { id, start, end, startHour, endHour }) => {
+    if (phases) {
+        return phases.map((phase) => phase.id === id ? withNewDates(phase, start, end, startHour, endHour) : 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,
+            startHour: item.startHour,
+            endHour: item.endHour,
+            secondaryStartHour: item.secondaryStartHour,
+            secondaryEndHour: item.secondaryEndHour
+        };
+        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, startHour, endHour, secondaryStartHour, secondaryEndHour, }) => {
+        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,
+            startHour,
+            endHour,
+            secondaryStartHour,
+            secondaryEndHour,
+        };
+    };
+    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, startHour, endHour) => {
+    const kupDates = new KupDates();
+    const startDate = kupDates.formatToIsoDate(start);
+    const endDate = kupDates.formatToIsoDate(end);
+    const extra = { startDate, endDate, startHour, endHour };
+    return Object.assign(Object.assign({}, p), extra);
+};
 /**
- * Props of the kup-gantt component.
- * Used to export every prop in an object.
+ * Calculate date range valid for each Gantt
+ * @param mainGanttItems
+ * @param timeUnit
+ * @param mainGanttDoubleView
+ * @param secondaryGanttItems
+ * @param preStepsCount
+ * @returns
  */
-var KupPlannerProps;
-(function (KupPlannerProps) {
-    KupPlannerProps["customStyle"] = "Custom style of the component.";
-    KupPlannerProps["data"] = "Dataset containg the tasks list";
-    KupPlannerProps["detailData"] = "Dataset containg the details list";
-    KupPlannerProps["detailColorCol"] = "Column containing the detail color, in hex format";
-    KupPlannerProps["detailColumns"] = "Columns containing informations displayed in the left box, near the gantt of details";
-    KupPlannerProps["detailDates"] = "Columns containing detail duration, from (firstDate) to (secondDate)";
-    KupPlannerProps["detailFilter"] = "Sets the detail's filter.";
-    KupPlannerProps["detailHeight"] = "Height for detail gantt";
-    KupPlannerProps["detailIdCol"] = "Column containing unique detail identifier";
-    KupPlannerProps["detailNameCol"] = "Column containing detail name displayed";
-    KupPlannerProps["detailPrevDates"] = "Columns containing forecast detail duration, from (firstDate) to (secondDate)";
-    KupPlannerProps["detailInitialScrollX"] = "Sets the initial scroll X for the detail.";
-    KupPlannerProps["detailInitialScrollY"] = "Sets the initial scroll Y for the detail.";
-    KupPlannerProps["listCellWidth"] = "Total size of the cells inside to the left box, near the gantt";
-    KupPlannerProps["maxWidth"] = "Max width for component";
-    KupPlannerProps["phaseColorCol"] = "Column containing the phase color in hex format";
-    KupPlannerProps["phaseColumns"] = "Columns containing informations displayed in the left box ,near the gantt of phases";
-    KupPlannerProps["phaseColParDep"] = "Column containing the name of the parent phases";
-    KupPlannerProps["phaseDates"] = "Columns containing phase duration, from (firstDate) to (secondDate)";
-    KupPlannerProps["phaseIdCol"] = "Column containing unique phase identifier";
-    KupPlannerProps["phaseNameCol"] = "Column containing phase name displayed";
-    KupPlannerProps["phasePrevDates"] = "Columns containing forecast phase duration, from (firstDate) to (secondDate)";
-    KupPlannerProps["readOnly"] = "When true, the two gantts are not interactable.";
-    KupPlannerProps["showSecondaryDates"] = "Enable/disable display of secondary dates";
-    KupPlannerProps["taskColumns"] = "Columns containing informations displayed in the left box, near the gantt";
-    KupPlannerProps["taskDates"] = "Columns containing task duration, from (firstDate) to (secondDate)";
-    KupPlannerProps["taskFilter"] = "Sets the task's filter.";
-    KupPlannerProps["taskHeight"] = "Height for main gantt";
-    KupPlannerProps["taskIdCol"] = "Column containing unique task identifier";
-    KupPlannerProps["taskNameCol"] = "Column containing task name displayed";
-    KupPlannerProps["taskPrevDates"] = "Columns containing forecast task duration, from (firstDate) to (secondDate)";
-    KupPlannerProps["taskInitialScrollX"] = "Sets the initial scroll X for the task.";
-    KupPlannerProps["taskInitialScrollY"] = "Sets the initial scroll Y for the task.";
-    KupPlannerProps["titleMess"] = "Message displayed on top";
-})(KupPlannerProps || (KupPlannerProps = {}));
-var KupPlannerTaskAction;
-(function (KupPlannerTaskAction) {
-    KupPlannerTaskAction["onTaskOpening"] = "onTaskOpening";
-    KupPlannerTaskAction["onTaskClosing"] = "onTaskClosing";
-    KupPlannerTaskAction["onClick"] = "onClick";
-    KupPlannerTaskAction["onDblClick"] = "onDblClick";
-    KupPlannerTaskAction["onResize"] = "onResize";
-    KupPlannerTaskAction["onRightClick"] = "onRightClick";
-})(KupPlannerTaskAction || (KupPlannerTaskAction = {}));
-var KupPlannerGanttRowType;
-(function (KupPlannerGanttRowType) {
-    KupPlannerGanttRowType["TASK"] = "task";
-    KupPlannerGanttRowType["PHASE"] = "phase";
-    KupPlannerGanttRowType["DETAIL"] = "detail";
-})(KupPlannerGanttRowType || (KupPlannerGanttRowType = {}));
-class KupPlannerLastOnChangeReceived {
-    constructor(event, threshold = 100) {
-        this.dateTime = new Date();
-        this.event = event;
-        this.threshold = threshold;
+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];
+        }
     }
-    isEquivalent(newEvent) {
-        const intervalTime = new Date().valueOf() - this.dateTime.valueOf();
-        const equals = JSON.stringify(this.event) === JSON.stringify(newEvent);
-        return equals && intervalTime < this.threshold;
+    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),
+            startHour: item.startHour,
+            endHour: item.endHour,
+            secondaryStartHour: item.secondaryStartHour,
+            secondaryEndHour: item.secondaryEndHour
+        });
+        (_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),
+                startHour: item.startHour,
+                endHour: item.endHour,
+                secondaryStartHour: item.secondaryStartHour,
+                secondaryEndHour: item.secondaryEndHour
+            });
+        });
+    });
+    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;
+            }
+        }
     }
-    resetDateTime() {
-        this.dateTime = new Date();
+    if (realDates) {
+        return [newStartDate, newEndDate];
     }
-}
-const defaultStylingOptions = {
-    listCellWidth: '300px',
-    rowHeight: 40,
-    barFill: 90,
-    projectProgressColor: '#CBCBCB',
-    projectProgressSelectedColor: '#CBCBCB',
-    projectBackgroundColor: '#CBCBCB',
-    projectBackgroundSelectedColor: '#CBCBCB',
-    barProgressColor: '#A2A415',
-    barProgressSelectedColor: '#A2A415',
-    barBackgroundColor: '#A2A415',
-    barBackgroundSelectedColor: '#A2A415',
+    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, 'month');
+            newEndDate = startOfDate(newEndDate, 'month');
+            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 'hour':
+            newStartDate = startOfDate(newStartDate, "hour");
+            newStartDate = addToDate(newStartDate, -1 * preStepsCount, "hour");
+            newEndDate = startOfDate(newEndDate, "day");
+            newEndDate = addToDate(newEndDate, 1, "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,
+            startHour: item.startHour,
+            endHour: item.endHour,
+            secondaryStartHour: item.secondaryStartHour,
+            secondaryEndHour: item.secondaryEndHour
+        });
+    });
+    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 'hour':
+                currentDate = addToDate(currentDate, 1, "hour");
+                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;
 };
-const KUP_PLANNER_MAIN_GANTT_ID = 'main';
-const KUP_PLANNER_SECONDARY_GANTT_ID = 'secondary';
 
 const kupTaskListCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}.tasks{border-radius:8px;background:#efefef;margin:12px;padding:12px}.taskListWrapper{display:table;border-bottom:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}.taskListTableRow{display:table-row;text-overflow:ellipsis}.taskListCell{display:table-cell;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.taskListNameWrapper{display:flex}.taskListExpander{color:rgb(86, 86, 86);font-size:0.6rem;padding:0.15rem 0.2rem 0 0.2rem;user-select:none;cursor:pointer}.taskListEmptyExpander{font-size:0.6rem;padding-left:1rem;user-select:none}.ganttTable{display:table;border-bottom:#e6e4e4 1px solid;border-top:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}.ganttTable_Header{display:table-row;list-style:none}.ganttTable_HeaderSeparator{border-right:1px solid rgb(196, 196, 196);opacity:1;margin-left:-2px}.ganttTable_HeaderItem{display:table-cell;vertical-align:-webkit-baseline-middle;vertical-align:middle}";
 const KupTaskListStyle0 = kupTaskListCss;
@@ -114,6 +453,9 @@ const TaskList = /*@__PURE__*/ proxyCustomElement(class TaskList extends HTMLEle
         this.currentTasks = undefined;
         this.label = undefined;
         this.doubleView = undefined;
+        this.scrollableTaskList = undefined;
+        this.updateTaskListScrollX = false;
+        this.taskListScrollX = undefined;
         this.setDoubleView = undefined;
         this.handleClick = undefined;
         this.handleDblClick = undefined;
@@ -123,6 +465,7 @@ const TaskList = /*@__PURE__*/ proxyCustomElement(class TaskList extends HTMLEle
         this.ganttonOnContextMenu = undefined;
         this.setSelectedTask = undefined;
         this.expanderClick = undefined;
+        this.ontaskListScrollWidth = undefined;
         this.selectedTaskId = '';
     }
     componentDidLoad() {
@@ -164,6 +507,7 @@ const TaskList = /*@__PURE__*/ proxyCustomElement(class TaskList extends HTMLEle
             tasks: this.tasks,
             locale: this.locale,
             selectedTaskId: this.selectedTaskId,
+            scrollableTaskList: this.scrollableTaskList,
             setSelectedTask: this.setSelectedTask.bind(this),
             onExpanderClick: this.expanderClick,
         };
@@ -175,7 +519,7 @@ const TaskList = /*@__PURE__*/ proxyCustomElement(class TaskList extends HTMLEle
         if (TaskListTable && TaskListTable['$attrs$']) {
             Object.assign(TaskListTable['$attrs$'], Object.assign({}, tableProps));
         }
-        return (h("div", { key: '7dd68dd1a7d21ae60df1565041e4c40c4e809190', ref: (el) => (this.taskListRef = el) }, TaskListHeader && TaskListHeader['$attrs$'] ? (TaskListHeader) : (h("kup-custom-task-list-header", Object.assign({ label: this.label, doubleView: (_a = this.doubleView) !== null && _a !== void 0 ? _a : false, setDoubleView: this.setDoubleView }, headerProps))), h("div", { key: '7a956f23ef07603f31a331d229f1bb1d04e98773', class: this.horizontalContainerClass, style: this.ganttHeight
+        return (h("div", { key: 'cfd1d8efa3a55550e105f5ad084f011dc64e8870', ref: (el) => (this.taskListRef = el) }, TaskListHeader && TaskListHeader['$attrs$'] ? (TaskListHeader) : (h("kup-custom-task-list-header", Object.assign({ label: this.label, doubleView: (_a = this.doubleView) !== null && _a !== void 0 ? _a : false, setDoubleView: this.setDoubleView }, headerProps))), h("div", { key: '1279ffece78a182c6ff1facb46bd493a8c74f363', class: `${this.horizontalContainerClass} ${this.scrollableTaskList ? 'horizontalContainerScrollable' : ''}`, style: this.ganttHeight
                 ? { height: this.ganttHeight + 'px' }
                 : {}, ref: (el) => (this.horizontalContainerRef = el) }, TaskListTable && TaskListTable['$attrs$'] ? (TaskListTable) : (h("kup-custom-task-list-table", Object.assign({}, tableProps, { onclickTaskList: (id) => {
                 let row = getProjectById(id, this.currentTasks);
@@ -201,7 +545,9 @@ const TaskList = /*@__PURE__*/ proxyCustomElement(class TaskList extends HTMLEle
                 if (row) {
                     this.handleContextMenu(event, row, this.ganttonOnContextMenu);
                 }
-            }, ganttId: KUP_PLANNER_MAIN_GANTT_ID }))))));
+            }, ontaskListScrollWidth: (width) => {
+                this.ontaskListScrollWidth(width);
+            }, taskListScrollX: this.taskListScrollX, ganttId: KUP_PLANNER_MAIN_GANTT_ID }))))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -226,6 +572,9 @@ const TaskList = /*@__PURE__*/ proxyCustomElement(class TaskList extends HTMLEle
         "currentTasks": [16],
         "label": [1],
         "doubleView": [4, "double-view"],
+        "scrollableTaskList": [4, "scrollable-task-list"],
+        "updateTaskListScrollX": [4, "update-task-list-scroll-x"],
+        "taskListScrollX": [2, "task-list-scroll-x"],
         "setDoubleView": [16],
         "handleClick": [16],
         "handleDblClick": [16],
@@ -235,6 +584,7 @@ const TaskList = /*@__PURE__*/ proxyCustomElement(class TaskList extends HTMLEle
         "ganttonOnContextMenu": [16],
         "setSelectedTask": [16],
         "expanderClick": [16],
+        "ontaskListScrollWidth": [16],
         "selectedTaskId": [32]
     }, undefined, {
         "scrollY": ["updateScrollY"]
@@ -263,4 +613,4 @@ function defineCustomElement() {
     } });
 }
 
-export { KupPlannerGanttRowType as K, TaskList as T, defaultStylingOptions as a, KupPlannerTaskAction as b, KupPlannerLastOnChangeReceived as c, defineCustomElement as d, KupPlannerProps as e, KUP_PLANNER_MAIN_GANTT_ID as f, KUP_PLANNER_SECONDARY_GANTT_ID as g };
+export { TaskList as T, convertProjectToTasks as a, getPhaseById as b, calculateDisplayedDateRange as c, defineCustomElement as d, getProjectById as e, mergeTaskIntoPhases as f, ganttDateRangeFromTask as g, columnWidthForTimeUnit as h, mergeTaskIntoProjects as m, seedDates as s };

package/dist/components/kup-tooltip2.js

@@ -66,7 +66,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
         }
     }
     render() {
-        return (h("div", { key: '6e6cc9d062e2910930ea039bd62c7d7c6cbfca30', class: this.relatedX ? 'tooltipDetailsContainer' : 'tooltipDetailsContainerHidden', style: { left: `${this.relatedX}px`, top: `${this.relatedY}px` } }, h(this.TooltipContent, { key: '08262258302d58b11d3c832194adfcdecf262bc2', task: this.task, fontSize: this.fontSize, fontFamily: this.fontFamily })));
+        return (h("div", { key: '285d804e882396024becfcfb1bbe83f7b92ef1ba', class: this.relatedX ? 'tooltipDetailsContainer' : 'tooltipDetailsContainerHidden', style: { left: `${this.relatedX}px`, top: `${this.relatedY}px` } }, h(this.TooltipContent, { key: '64a79a8e5c79ef4985e289e2e86c9d4c8ef75175', task: this.task, fontSize: this.fontSize, fontFamily: this.fontFamily })));
     }
     get rootElement() { return this; }
     static get watchers() { return {

package/dist/components/kup-vertical-scroll2.js

@@ -37,11 +37,11 @@ const KupVerticalScroll = /*@__PURE__*/ proxyCustomElement(class KupVerticalScro
         };
     }
     render() {
-        return (h("div", { key: '80335159040a9c60dc8213840c3b2d684636585d', style: {
+        return (h("div", { key: 'fd24a7eab2da0ee2317a1fde6aa2f052394a0d5b', style: {
                 height: `${this.ganttHeight}px`,
                 marginTop: `${this.headerHeight}px`,
                 marginLeft: this.rtl ? '' : '-1rem',
-            }, class: "scroll", onScroll: this.verticalScroll, ref: (el) => (this.scrollRef = el) }, h("div", { key: '2ad01e01bb31d6885cf87bda7e1448f70b182435', style: {
+            }, class: "scroll", onScroll: this.verticalScroll, ref: (el) => (this.scrollRef = el) }, h("div", { key: 'f6d2bacc2f3c5532d33cb148e46394bc9697ece9', style: {
                 height: `${this.ganttFullHeight}px`,
                 width: '1px',
             } })));

package/dist/components/other.helpers.js

@@ -0,0 +1,47 @@
+function isKeyboardEvent(event) {
+    return event.key !== undefined;
+}
+function removeHiddenTasks(tasks) {
+    const groupedTasks = tasks.filter((t) => t.hideChildren && t.type === 'project');
+    if (groupedTasks.length > 0) {
+        for (let i = 0; groupedTasks.length > i; i++) {
+            const groupedTask = groupedTasks[i];
+            const children = getChildren(tasks, groupedTask);
+            tasks = tasks.filter((t) => children.indexOf(t) === -1);
+        }
+    }
+    return tasks;
+}
+function getChildren(taskList, task) {
+    let tasks = [];
+    if (task.type !== 'project') {
+        tasks = taskList.filter((t) => t.dependencies && t.dependencies.indexOf(task.id) !== -1);
+    }
+    else {
+        tasks = taskList.filter((t) => t.project && t.project === task.id);
+    }
+    var taskChildren = [];
+    tasks.forEach((t) => {
+        taskChildren.push(...getChildren(taskList, t));
+    });
+    tasks = tasks.concat(tasks, taskChildren);
+    return tasks;
+}
+const sortTasks = (taskA, taskB) => {
+    const orderA = taskA.displayOrder || Number.MAX_VALUE;
+    const orderB = taskB.displayOrder || Number.MAX_VALUE;
+    if (orderA > orderB) {
+        return 1;
+    }
+    else if (orderA < orderB) {
+        return -1;
+    }
+    else {
+        return 0;
+    }
+};
+const createArrayFromNum = (number) => {
+    return Array.from({ length: number }, (_, index) => index);
+};
+
+export { createArrayFromNum as c, isKeyboardEvent as i, removeHiddenTasks as r, sortTasks as s };