@sme.up/ketchup 9.6.4 → 9.6.5

package/dist/collection/components/kup-planner/utils/kup-planner-renderer-helper.js

@@ -36,10 +36,10 @@ export const isDetail = (row) => {
         row.schedule &&
         row.schedule.length !== 0);
 };
-export const mergeTaskIntoProjects = (projects, { id, start, end }) => projects.map((project) => project.id === id ? withNewDates(project, start, end) : project);
-export const mergeTaskIntoPhases = (phases, { id, start, end }) => {
+export const mergeTaskIntoProjects = (projects, { id, start, end, startHour, endHour }) => projects.map((project) => project.id === id ? withNewDates(project, start, end, startHour, endHour) : project);
+export const mergeTaskIntoPhases = (phases, { id, start, end, startHour, endHour }) => {
     if (phases) {
-        return phases.map((phase) => phase.id === id ? withNewDates(phase, start, end) : phase);
+        return phases.map((phase) => phase.id === id ? withNewDates(phase, start, end, startHour, endHour) : phase);
     }
     return undefined;
 };
@@ -77,6 +77,10 @@ export const convertProjectToTasks = (item, mainGanttStartDate, mainGanttEndDate
             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];
@@ -89,7 +93,7 @@ export const convertProjectToTasks = (item, mainGanttStartDate, mainGanttEndDate
     }
 };
 export const convertPhaseToTask = (item) => {
-    const mapPhase = ({ startDate: phaseStart, endDate: phaseEnd, secondaryStartDate, secondaryEndDate, name: phaseName, id: phaseId, color, selectedColor, dependencies, icon, }) => {
+    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);
@@ -116,6 +120,10 @@ export const convertPhaseToTask = (item) => {
                 }
                 : {},
             icon,
+            startHour,
+            endHour,
+            secondaryStartHour,
+            secondaryEndHour,
         };
     };
     return mapPhase(item);
@@ -169,11 +177,11 @@ const convertDetailToTimeline = (item, mainGanttStartDate, mainGanttEndDate) =>
     };
 };
 /** Return a shallow copy, with the dates updated */
-const withNewDates = (p, start, end) => {
+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 };
+    const extra = { startDate, endDate, startHour, endHour };
     return Object.assign(Object.assign({}, p), extra);
 };
 /**
@@ -211,6 +219,10 @@ export const ganttDateRangeFromGanttTask = (tasks, viewMode, preStepsCount, show
             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({
@@ -218,6 +230,10 @@ export const ganttDateRangeFromGanttTask = (tasks, viewMode, preStepsCount, show
                 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
             });
         });
     });
@@ -270,6 +286,32 @@ export const ganttDateRangeGeneric = (dates, viewMode, preStepsCount, showSecond
             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];
 };
@@ -329,6 +371,10 @@ export const ganttDateRangeFromTask = (tasks, viewMode, preStepsCount, showSecon
             end: item.end,
             secondaryStart: item.secondaryStart,
             secondaryEnd: item.secondaryEnd,
+            startHour: item.startHour,
+            endHour: item.endHour,
+            secondaryStartHour: item.secondaryStartHour,
+            secondaryEndHour: item.secondaryEndHour
         });
     });
     if (mainGanttStartDate && mainGanttEndDate) {
@@ -358,6 +404,9 @@ export const seedDates = (startDate, endDate, viewMode) => {
             case 'day':
                 currentDate = addToDate(currentDate, 1, 'day');
                 break;
+            case 'hour':
+                currentDate = addToDate(currentDate, 1, "hour");
+                break;
             /*
             case ViewMode.HalfDay:
               currentDate = addToDate(currentDate, 12, "hour");

package/dist/collection/components/kup-planner/utils/kup-planner-renderer.js

@@ -59,14 +59,14 @@ export class KupPlannerRenderer {
     }
     //---- Lifecycle hooks ----
     componentWillLoad() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         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.scrollX = (_g = (_f = (_e = this.props) === null || _e === void 0 ? void 0 : _e.mainGantt) === null || _f === void 0 ? void 0 : _f.initialScrollX) !== null && _g !== void 0 ? _g : -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);
+            (_k = (_j = (_h = this.props) === null || _h === void 0 ? void 0 : _h.mainGantt) === null || _j === void 0 ? void 0 : _j.showSecondaryDates) !== null && _k !== void 0 ? _k : false;
+        this.displayedDates = calculateDisplayedDateRange(this.currentTasks, this.timeUnit, this.mainGanttDoubleView, this.currentDetails, (_l = this.props) === null || _l === void 0 ? void 0 : _l.preStepsCount);
         this.viewDate = undefined;
         this.projection = undefined;
         this.updateTasks();
@@ -183,6 +183,31 @@ export class KupPlannerRenderer {
         // Use setTimeout to ensure DOM updates
         setTimeout(this.getScrollX, 500);
     }
+    // Handle phase drop
+    handlePhaseDrop(originalPhaseData, 
+    // originalTaskData: KupPlannerGanttTaskN | KupPlannerItemDetail,
+    finalPhaseData, destinationData, onPhaseDrop) {
+        // Invoke callback
+        let row = undefined;
+        const currentProjects = this.currentTasks;
+        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) === finalPhaseData.id); });
+        if (parentOfClickedPhase) {
+            const phases = mergeTaskIntoPhases(parentOfClickedPhase.phases, finalPhaseData);
+            const updatedProjects = currentProjects.map((p) => p.id === parentOfClickedPhase.id ? Object.assign(Object.assign({}, p), { phases }) : p);
+            row = getPhaseById(finalPhaseData.id, updatedProjects);
+        }
+        row === null || row === void 0 ? true : delete row['taskRow'];
+        onPhaseDrop === null || onPhaseDrop === void 0 ? void 0 : onPhaseDrop({
+            originalPhaseData,
+            // originalTaskData,
+            finalPhaseData: row,
+            destinationData,
+        });
+        // to move the phase back to its original position
+        this.currentTasks = JSON.parse(JSON.stringify(this.currentTasks));
+        // Use setTimeout to ensure DOM updates
+        setTimeout(this.getScrollX, 500);
+    }
     // Get scrollX
     getScrollX() {
         var _a, _b, _c;
@@ -195,7 +220,7 @@ export class KupPlannerRenderer {
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: 'e633ff68b8b848cd29b1fb4a44f4561ef9dfc65f', class: "planner-render" }, h("kup-switcher", { key: 'e8982db1704160c67839e156521f8cadbd9d182a', timeUnitChange: (timeUnit) => {
+        return (h("div", { key: 'ca2bc5b1e398639943fc073b92035b83d304dee1', class: "planner-render" }, h("kup-switcher", { key: '02903e6f1d14536cc3e82e535f98f56761004051', timeUnitChange: (timeUnit) => {
                 var _a, _b;
                 (_b = (_a = this.props).onSetViewMode) === null || _b === void 0 ? void 0 : _b.call(_a, timeUnit);
                 this.timeUnit = timeUnit;
@@ -228,7 +253,15 @@ export class KupPlannerRenderer {
                 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({ ref: (el) => (this.secondaryGantt = el), 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
+            }, 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), scrollableTaskList: this.props.scrollableTaskList, phaseDrop: (originalPhaseData, originalTaskData, finalPhaseData, destinationData) => {
+                const originalPhase = getPhaseById(originalPhaseData.id, this.currentTasks);
+                const originalTask = getProjectById(originalTaskData.id, this.currentTasks);
+                const finalPhase = getPhaseById(finalPhaseData.id, this.currentTasks);
+                const destinationTask = getProjectById(destinationData.id, this.currentTasks);
+                this.handlePhaseDrop(originalPhase, 
+                // originalTask,
+                finalPhaseData, destinationTask, this.props.mainGantt.onPhaseDrop);
+            } })), this.props.secondaryGantt && (h("kup-gantt", Object.assign({ ref: (el) => (this.secondaryGantt = el), 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) {
@@ -258,7 +291,7 @@ export class KupPlannerRenderer {
                     }
                 }
             }, 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 })))))));
+                .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, scrollableTaskList: this.props.scrollableTaskList })))))));
     }
     static get is() { return "kup-planner-renderer"; }
     static get properties() {

package/dist/collection/components/kup-planner/utils/kup-switcher/kup-switcher.css

@@ -130,29 +130,36 @@
   display: grid;
   grid-auto-flow: column;
   grid-gap: 8px;
-  margin-left: 12px;
   width: max-content;
+  margin-bottom: var(--kup-space-05);
+  margin-left: var(--kup-space-04);
 }
 
 .button {
-  background: transparent;
-  border-color: var(--kup-primary-color, #003b77);
-  border-radius: 4px;
-  border-width: 1px;
-  box-shadow: 0 3px 1px -2px rgba(var(--kup-text-color-rgb, 51 51 51), 0.2), 0 2px 2px 0 rgba(var(--kup-text-color-rgb, 51 51 51), 0.14), 0 1px 5px 0 rgba(var(--kup-text-color-rgb, 51 51 51), 0.12);
+  background-color: var(--kup-gray-color-70);
+  border: none;
+  text-align: left;
   box-sizing: border-box;
-  color: var(--kup-primary-color, #003b77);
+  color: var(--kup-gray-color-0);
   cursor: pointer;
-  font-size: 11px;
-  height: 32px;
-  min-width: 64px;
+  padding: var(--kup-space-03) var(--kup-space-05);
+}
+.button:hover {
+  background-color: var(--kup-gray-color-90);
+}
+.button:focus {
+  background-color: var(--kup-primary-color-60);
 }
 
 .label {
-  font-family: var(--kup-font-family, inherit);
-  font-size: 11px;
-  letter-spacing: 0.0892857143em;
   text-decoration: none;
-  text-transform: uppercase;
-  padding: 0 6px;
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+  letter-spacing: 0.16px;
+}
+
+.buttonActive {
+  background-color: var(--kup-primary-color-60);
 }

package/dist/collection/components/kup-planner/utils/kup-switcher/kup-switcher.js

@@ -1,14 +1,25 @@
 import { h } from "@stencil/core";
 export class KupSwitcher {
     constructor() {
+        this.buttonLabels = [
+            'hour',
+            'day',
+            'week',
+            'month',
+            'year',
+        ];
         this.timeUnitChange = undefined;
+        this.activeButton = 'day';
     }
     render() {
-        const day = () => this.timeUnitChange('day');
-        const week = () => this.timeUnitChange('week');
-        const month = () => this.timeUnitChange('month');
-        const year = () => this.timeUnitChange('year');
-        return (h("div", { key: '41dda7f6481d54c262a7362440167aa58b44e8e1', class: "switcher" }, h("button", { key: 'e286b6add4c59978c39cef79e8bddd0704b9b3be', type: "button", class: "button", onClick: day }, h("span", { key: '855e19deedcbb55d6d534260e6b2b76580eb8e71', class: "label" }, "Day")), h("button", { key: 'dffc909ef397ddd44957cad2b304343f9a96998c', type: "button", class: "button", onClick: week }, h("span", { key: 'd69ab19671de0f10e60ba584a1036c628d6204b1', class: "label" }, "Week")), h("button", { key: '42c686fc57fdd6bd4a0cc8fd939946048d663771', type: "button", class: "button", onClick: month }, h("span", { key: 'a1508d10ecfdb50527a2be3b9a7bd069f922753e', class: "label" }, "Month")), h("button", { key: 'b478c7c4ed13b4ed3ab72f148995bf4cc96533c8', type: "button", class: "button", onClick: year }, h("span", { key: 'c56ee36dac14420f256d327cfe6119e9792d072f', class: "label" }, "Year"))));
+        const handleButtonClick = (mode) => {
+            this.activeButton = mode;
+            this.timeUnitChange(mode);
+        };
+        return (h("div", { key: '1a1621221e411df713757eae42e028968277e0a5', class: "switcher" }, this.buttonLabels.map((label) => (h("button", { type: "button", class: {
+                button: true,
+                buttonActive: this.activeButton === label,
+            }, onClick: () => handleButtonClick(label) }, h("span", { class: "label" }, label.charAt(0).toUpperCase() + label.slice(1)))))));
     }
     static get is() { return "kup-switcher"; }
     static get originalStyleUrls() {
@@ -46,4 +57,9 @@ export class KupSwitcher {
             }
         };
     }
+    static get states() {
+        return {
+            "activeButton": {}
+        };
+    }
 }

package/dist/collection/components/kup-planner/utils/kup-task-gantt/kup-task-gantt.js

@@ -8,6 +8,7 @@ export class TaskGantt {
         this.ganttHeight = undefined;
         this.scrollY = undefined;
         this.scrollX = undefined;
+        this.phaseDragScroll = undefined;
     }
     /*-------------------------------------------------*/
     /*                   W A T C H E R S               */
@@ -32,13 +33,13 @@ export class TaskGantt {
         }, 75);
     }
     render() {
-        const newBarProps = Object.assign(Object.assign({}, this.barProps), { gridProps: this.gridProps });
-        return (h("div", { key: '905f0400ac4a0103896527ef5197cf1d1377b47b', class: "ganttVerticalContainer", ref: (el) => (this.verticalGanttContainerRef = el), dir: "ltr" }, h("kup-gantt-calendar", { key: '5663eafd88795240ff35fb92eb68af99d6b285d7', dateSetup: this.calendarProps.dateSetup, locale: this.calendarProps.locale, rtl: this.calendarProps.rtl, headerHeight: this.calendarProps.headerHeight, columnWidth: this.calendarProps.columnWidth, fontFamily: this.calendarProps.fontFamily, fontSize: this.calendarProps.fontSize, dateTimeFormatters: this.calendarProps.dateTimeFormatters, singleLineHeader: this.calendarProps.singleLineHeader, currentDateIndicator: this.calendarProps.currentDateIndicator, svgWidth: this.gridProps.svgWidth }), h("div", { key: 'ececb1964b8a3a9e0b0a12889b680f8667e49690', ref: (el) => (this.horizontalContainerRef = el), class: "horizontalContainer", style: this.ganttHeight
+        const newBarProps = Object.assign(Object.assign({}, this.barProps), { gridProps: this.gridProps, phaseDragScroll: this.phaseDragScroll });
+        return (h("div", { key: '70a643ef8eeac75a4860e9f7b267b09fc2e7a44a', class: "ganttVerticalContainer", ref: (el) => (this.verticalGanttContainerRef = el), dir: "ltr" }, h("kup-gantt-calendar", { key: '845ae3e99e6ae05f78af126bf72b6aea0f5c535b', dateSetup: this.calendarProps.dateSetup, locale: this.calendarProps.locale, rtl: this.calendarProps.rtl, headerHeight: this.calendarProps.headerHeight, columnWidth: this.calendarProps.columnWidth, fontFamily: this.calendarProps.fontFamily, fontSize: this.calendarProps.fontSize, dateTimeFormatters: this.calendarProps.dateTimeFormatters, singleLineHeader: this.calendarProps.singleLineHeader, currentDateIndicator: this.calendarProps.currentDateIndicator, svgWidth: this.gridProps.svgWidth }), h("div", { key: '72cb7c8fc59bf4fef2800d5c73af4be641d7a8bf', ref: (el) => (this.horizontalContainerRef = el), class: "horizontalContainer", style: this.ganttHeight
                 ? {
                     height: `${this.ganttHeight}px`,
                     width: `${this.gridProps.svgWidth}px`,
                 }
-                : { width: `${this.gridProps.svgWidth}px` } }, h("kup-grid-renderer", Object.assign({ key: '2117872fcdad4e4a3afe4eb4bfc303fce6ea2db7' }, newBarProps)))));
+                : { width: `${this.gridProps.svgWidth}px` } }, h("kup-grid-renderer", Object.assign({ key: '4e80893d377f70548b5301f5b00eb928ef60ae91' }, newBarProps)))));
     }
     static get is() { return "kup-task-gantt"; }
     static get properties() {
@@ -195,6 +196,21 @@ export class TaskGantt {
                 },
                 "attribute": "scroll-x",
                 "reflect": false
+            },
+            "phaseDragScroll": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(scrollY: number) => void",
+                    "resolved": "(scrollY: number) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
             }
         };
     }

package/dist/collection/components/kup-planner/utils/kup-task-list/kup-task-list-header.js

@@ -7,22 +7,22 @@ export class KupTaskListHeader {
         this.rowWidth = undefined;
     }
     render() {
-        return (h("div", { key: '116213bd504a1e48f0484e92db9f7c8fb4dcb602', class: "ganttTable", style: {
+        return (h("div", { key: 'fb2ebda78c2213e06581f760793f19a5de8fc5f6', class: "ganttTable", style: {
                 fontFamily: this.fontFamily,
                 fontSize: this.fontSize,
-            } }, h("div", { key: 'afbe32d59d041d923cd831db83ca0b09087cda23', class: "ganttTable_Header", style: {
+            } }, h("div", { key: '7d3be11d08ca2682277d0ee5cd5b062daaf238d4', class: "ganttTable_Header", style: {
                 height: `${this.headerHeight - 2}px`,
-            } }, h("div", { key: 'ffa34b095e8b1d59516e6892c87f9eeeec8d9160', class: "ganttTable_HeaderItem", style: {
+            } }, h("div", { key: 'f5f4a2a599dd84a0616b699931823760bb0b07ed', class: "ganttTable_HeaderItem", style: {
                 minWidth: this.rowWidth,
-            } }, "\u00A0Name"), h("div", { key: 'fad1584e5c299645e59f988e1fedc6fb1c6b05ff', class: "ganttTable_HeaderSeparator", style: {
+            } }, "\u00A0Name"), h("div", { key: '6c09f131ce232248647bf9f1fc503fdc86cc557b', class: "ganttTable_HeaderSeparator", style: {
                 height: `${this.headerHeight * 0.5}px`,
                 marginTop: `${this.headerHeight * 0.2}px`,
-            } }), h("div", { key: '630992695659d8963415808cb1734e06d9aff914', class: "ganttTable_HeaderItem", style: {
+            } }), h("div", { key: '278d663951a0e5c73e1d365f98aefdddc9344d43', class: "ganttTable_HeaderItem", style: {
                 minWidth: this.rowWidth,
-            } }, "\u00A0From"), h("div", { key: 'e676f60163f722f1fd72f9038157359e61c895d2', class: "ganttTable_HeaderSeparator", style: {
+            } }, "\u00A0From"), h("div", { key: 'a1ccf08fe5072d3f0fc9faa2e743c054aa6fbc19', class: "ganttTable_HeaderSeparator", style: {
                 height: `${this.headerHeight * 0.5}px`,
                 marginTop: `${this.headerHeight * 0.25}px`,
-            } }), h("div", { key: 'ee2699da7a0afbfa6944c47621e07112dca46816', class: "ganttTable_HeaderItem", style: {
+            } }), h("div", { key: '9766eb1cfa74ed6227876d69304b772a9958fdb0', class: "ganttTable_HeaderItem", style: {
                 minWidth: this.rowWidth,
             } }, "\u00A0To"))));
     }

package/dist/collection/components/kup-planner/utils/kup-task-list/kup-task-list-table.js

@@ -22,7 +22,7 @@ export class TaskListTableDefault {
         return date.toLocaleDateString(this.locale, this.dateTimeOptions);
     }
     render() {
-        return (h("div", { key: '00ce97c983f8b2fa306cfde7a15565913bbd08fa', class: "taskListWrapper", style: {
+        return (h("div", { key: '185eb1455b2e46d4ef578eaada2abc891458a763', class: "taskListWrapper", style: {
                 fontFamily: this.fontFamily,
                 fontSize: this.fontSize,
             } }, this.tasks.map((task) => (h("div", { class: {

package/dist/collection/components/kup-planner/utils/kup-task-list/kup-task-list.js

@@ -20,6 +20,9 @@ export class TaskList {
         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;
@@ -29,6 +32,7 @@ export class TaskList {
         this.ganttonOnContextMenu = undefined;
         this.setSelectedTask = undefined;
         this.expanderClick = undefined;
+        this.ontaskListScrollWidth = undefined;
         this.selectedTaskId = '';
     }
     componentDidLoad() {
@@ -70,6 +74,7 @@ export class TaskList {
             tasks: this.tasks,
             locale: this.locale,
             selectedTaskId: this.selectedTaskId,
+            scrollableTaskList: this.scrollableTaskList,
             setSelectedTask: this.setSelectedTask.bind(this),
             onExpanderClick: this.expanderClick,
         };
@@ -81,7 +86,7 @@ export class TaskList {
         if (TaskListTable && TaskListTable['$attrs$']) {
             Object.assign(TaskListTable['$attrs$'], Object.assign({}, tableProps));
         }
-        return (h("div", { key: 'd09682f9ac25c58a917abb739e585d5b0e8eb15b', 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: '5fdeb14c140ae767e0e76ff0cbb7a3cc1a952ac2', 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);
@@ -107,7 +112,9 @@ export class TaskList {
                 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 }))))));
     }
     static get is() { return "kup-task-list"; }
     static get originalStyleUrls() {
@@ -439,6 +446,58 @@ export class TaskList {
                 "attribute": "double-view",
                 "reflect": false
             },
+            "scrollableTaskList": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "scrollable-task-list",
+                "reflect": false
+            },
+            "updateTaskListScrollX": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "update-task-list-scroll-x",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "taskListScrollX": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "task-list-scroll-x",
+                "reflect": false
+            },
             "setDoubleView": {
                 "type": "unknown",
                 "mutable": false,
@@ -625,6 +684,21 @@ export class TaskList {
                     "tags": [],
                     "text": ""
                 }
+            },
+            "ontaskListScrollWidth": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(width: number) => void",
+                    "resolved": "(width: number) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
             }
         };
     }

package/dist/collection/components/kup-planner/utils/kup-tooltip/kup-standard-tooltip.js

@@ -6,7 +6,7 @@ export class StandardTooltipContent {
         this.fontFamily = undefined;
     }
     render() {
-        return (h("div", { key: 'a8cc2a7ee22805a4a0bc4ea5a04eba47635d905d', class: "tooltipDefaultContainer", style: { fontSize: this.fontSize, fontFamily: this.fontFamily } }, h("b", { key: 'b19bb682e89805a662965153baddfe3ecbcc714b', style: { fontSize: `${parseInt(this.fontSize) + 6}px` } }, `${this.task.name}: ${this.task.start.getDate()}-${this.task.start.getMonth() + 1}-${this.task.start.getFullYear()} - ${this.task.end.getDate()}-${this.task.end.getMonth() + 1}-${this.task.end.getFullYear()}`), this.task.end.getTime() - this.task.start.getTime() !== 0 && (h("p", { class: "tooltipDefaultContainerParagraph" }, `Duration: ${~~((this.task.end.getTime() - this.task.start.getTime()) / (1000 * 60 * 60 * 24))} day(s)`)), h("p", { key: '85c595ef756929440fac10ff2a63f19a01bd1e34', class: "tooltipDefaultContainerParagraph" }, !!this.task.progress && `Progress: ${this.task.progress} %`)));
+        return (h("div", { key: 'c9b5188678b4980a396d82ea533c06ab66559061', class: "tooltipDefaultContainer", style: { fontSize: this.fontSize, fontFamily: this.fontFamily } }, h("b", { key: 'f1597026854513f01c5f40c95ac1b5dee2284f1a', style: { fontSize: `${parseInt(this.fontSize) + 6}px` } }, `${this.task.name}: ${this.task.start.getDate()}-${this.task.start.getMonth() + 1}-${this.task.start.getFullYear()} - ${this.task.end.getDate()}-${this.task.end.getMonth() + 1}-${this.task.end.getFullYear()}`), this.task.end.getTime() - this.task.start.getTime() !== 0 && (h("p", { class: "tooltipDefaultContainerParagraph" }, `Duration: ${~~((this.task.end.getTime() - this.task.start.getTime()) / (1000 * 60 * 60 * 24))} day(s)`)), h("p", { key: 'c544fe0f4499f5ef8dbc3cbb0076b9a4addfd5d1', class: "tooltipDefaultContainerParagraph" }, !!this.task.progress && `Progress: ${this.task.progress} %`)));
     }
     static get is() { return "kup-standard-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/kup-planner/utils/kup-tooltip/kup-tooltip.js

@@ -59,7 +59,7 @@ export class Tooltip {
         }
     }
     render() {
-        return (h("div", { key: '3399b85004b93210eb01154c38f03034009cadb4', class: this.relatedX ? 'tooltipDetailsContainer' : 'tooltipDetailsContainerHidden', style: { left: `${this.relatedX}px`, top: `${this.relatedY}px` } }, h(this.TooltipContent, { key: 'ac99f13b366842e83c15fb13d0488c518e9bab90', 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 })));
     }
     static get is() { return "kup-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/kup-planner/utils/kup-vertical-scroll/kup-vertical-scroll.js

@@ -31,11 +31,11 @@ export class KupVerticalScroll {
         };
     }
     render() {
-        return (h("div", { key: '383ad53a1b4494dada5c96330c11c344719308fc', 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: '3dbf51a648d41315f423d58df04abb21d2d3f63e', style: {
+            }, class: "scroll", onScroll: this.verticalScroll, ref: (el) => (this.scrollRef = el) }, h("div", { key: 'f6d2bacc2f3c5532d33cb148e46394bc9697ece9', style: {
                 height: `${this.ganttFullHeight}px`,
                 width: '1px',
             } })));

package/dist/collection/components/kup-probe/kup-probe.js

@@ -251,7 +251,7 @@ export class KupProbe {
         if (this.features.theme) {
             customStyle = this.kupManager.theme.setKupStyle(this.rootElement);
         }
-        return (h(Host, { key: '77b3c9d2e379524e26961d087145fa132f978e8b' }, customStyle ? h("style", null, customStyle) : null, h("div", { key: 'c51b0c555daa8b00fbe2fcdc43e3f6fdd15d85ef', id: componentWrapperId }, this.content)));
+        return (h(Host, { key: '71372dfbcfbf66e3f83eda11eca5fddca3402d1c' }, customStyle ? h("style", null, customStyle) : null, h("div", { key: 'a05d5a30011b2e1ede2f6ca1eca593de48aebd06', id: componentWrapperId }, this.content)));
     }
     disconnectedCallback() {
         if (this.features.language) {

package/dist/collection/components/kup-progress-bar/kup-progress-bar.js

@@ -102,7 +102,7 @@ export class KupProgressBar {
                 ? true
                 : false,
         };
-        return (h(Host, { key: 'e3d69a32dbec693f8422b7e7346b7b804eeb76ca' }, h("style", { key: '262b6848f0829cb32c4101e238bf4436e335246b' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '71de2f445158aec16e207563d8a6dbfbc1935798', id: componentWrapperId }, h(FProgressBar, Object.assign({ key: '4a7d4af7f4f5029c9e0a113258291b3314886ad4' }, props)))));
+        return (h(Host, { key: '57a2cca6ae1cfd6ff6a69288018df10806d0e67c' }, h("style", { key: '7fd614839501fda6bf2d3d89ad66e76e59637297' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'eee4d3901f0552242a11513c990aa4cbecce32bc', id: componentWrapperId }, h(FProgressBar, Object.assign({ key: '3cee61bc06301e0f709610e30cb62fa092982ba0' }, props)))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);

package/dist/collection/components/kup-qlik/kup-qlik.js

@@ -110,7 +110,7 @@ export class KupQlik {
         layoutStyle = {
             ['--lyo_obj-height']: this.defobjsize,
         };
-        return (h("div", { key: '7ac97c760e531f411986565b891fd93819c25eb3', class: classLayout, style: layoutStyle }, this.divlist));
+        return (h("div", { key: 'ad3b840b782c155e43d25d46b4fbf3150d0d5296', class: classLayout, style: layoutStyle }, this.divlist));
     }
     componentDidRender() {
         if (this.debug) {

package/dist/collection/components/kup-rating/kup-rating.js

@@ -91,7 +91,7 @@ export class KupRating {
                 : false,
             onClick: (i) => this.onKupClick(i),
         };
-        return (h(Host, { key: '4e24c6e19d8bdf55cd5af32b56443a16ad4338fd' }, h("style", { key: '134f0d0b306debe1051accef1f8f453d0b31a74a' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '90bf22fb71164827090b8aa5c0e7130f0faa044d', id: componentWrapperId }, h(FRating, Object.assign({ key: 'd7528316b469425004dafadf7c3e23bcfc21d88d' }, props)))));
+        return (h(Host, { key: 'c56d698d5f1b274ee1a318104a3acb41156b78e1' }, h("style", { key: 'b1e57137e0a1461f12d73ec86d4dbdcf023ffe16' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '4e934f072d83d0f6ffe7ffd7ef8edcccf3935d9e', id: componentWrapperId }, h(FRating, Object.assign({ key: '6a5946de139310a68c7e4d5221fc4444a28b80e1' }, props)))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);

package/dist/collection/components/kup-snackbar/kup-snackbar.js

@@ -92,7 +92,7 @@ export class KupSnackbar {
         this.kupManager.debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: 'bab6e44cdbdcbd0174991aa10a9df10b4edce2a8', "kup-visible": this.visible }, h("style", { key: 'e48b96994b94d274c276729b9c4e2abab08f534e' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '57818756dc7dfb6fe3eb28ea48941fe0e7cb22ba', id: componentWrapperId }, h("div", { key: '05aa2207cd12926db3943ac4c25b57021fb62ddf', class: snackbarClass }, h("div", { key: 'f1f1279844e5faf955faab329015103e7b29ba7c', class: `${snackbarClass}__text` }, this.text), this.actionButton || this.closeButton ? (h("div", { class: `${snackbarClass}__buttons` }, this.actionButton ? (h("div", { class: `${snackbarClass}__action` }, h(FButton, Object.assign({}, this.actionButton, { onClick: () => this.onKupActionClick() })))) : null, this.closeButton ? (h("div", { class: `${snackbarClass}__close` }, h(FButton, { icon: "close", onClick: () => this.hide() }))) : null)) : null))));
+        return (h(Host, { key: '3e52e4dd0672594bf385bcd44f3ceac7474ebb54', "kup-visible": this.visible }, h("style", { key: '2b6dcba48e84c7ba0ded38c5a86907a1ddb0aed4' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '6843781af0232d8dd65eb23941a2f33a17ec694f', id: componentWrapperId }, h("div", { key: '178a36a80ff89fa6b31af04c372367e0e4427b89', class: snackbarClass }, h("div", { key: '8383fa478dd8a4f35fb9718a83131d26caadb275', class: `${snackbarClass}__text` }, this.text), this.actionButton || this.closeButton ? (h("div", { class: `${snackbarClass}__buttons` }, this.actionButton ? (h("div", { class: `${snackbarClass}__action` }, h(FButton, Object.assign({}, this.actionButton, { onClick: () => this.onKupActionClick() })))) : null, this.closeButton ? (h("div", { class: `${snackbarClass}__close` }, h(FButton, { icon: "close", onClick: () => this.hide() }))) : null)) : null))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);