@sme.up/ketchup 9.6.3 → 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: '819b9d89b953274cacccee9bf2022575743e0d27', class: "planner-render" }, h("kup-switcher", { key: 'eebcce029f98a9f08cab9c96be0bad01999b7f95', 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: '64c26910f550b5c74b294667e58f396f0642e601', class: "switcher" }, h("button", { key: '1f110cd85b5e837aec6f5c2b69ac14b3a47d9f79', type: "button", class: "button", onClick: day }, h("span", { key: 'be249d7896fcd93905e8865309405d30dfa506bf', class: "label" }, "Day")), h("button", { key: '81dfab2aebed98d32cff106577795a064c03a257', type: "button", class: "button", onClick: week }, h("span", { key: 'e5c41e5dcd9d775c6749c2907e59a7d0400e3712', class: "label" }, "Week")), h("button", { key: 'a598a5ab4f1496bbd267134201b21c45e5198d01', type: "button", class: "button", onClick: month }, h("span", { key: '57769be17ca1de59a919cbb7e7ac11d0546a28fb', class: "label" }, "Month")), h("button", { key: 'b62c7585c44acc19863bc93898851348250ba7fa', type: "button", class: "button", onClick: year }, h("span", { key: '9f4ab800c4eef1666ceabaebe0d35b042753430f', 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: 'd9a4cf68f10e8263f73123022b4e545f6a028580', class: "ganttVerticalContainer", ref: (el) => (this.verticalGanttContainerRef = el), dir: "ltr" }, h("kup-gantt-calendar", { key: '2ad5614e2df01e5f3cc21b9940c14ba7dd5a785d', 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: '8c0e76cb967f172406f352c6568582fdc4008d38', 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: '69040247d6fde1ddb12f3b2ce54e02bc7781e569' }, 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: '85c164a7a4313c8708ce2774338ff123621e7648', class: "ganttTable", style: {
+        return (h("div", { key: 'fb2ebda78c2213e06581f760793f19a5de8fc5f6', class: "ganttTable", style: {
                 fontFamily: this.fontFamily,
                 fontSize: this.fontSize,
-            } }, h("div", { key: '46aad2a15e9f7d6fe8e7b705b5cc4f385ebf2d69', class: "ganttTable_Header", style: {
+            } }, h("div", { key: '7d3be11d08ca2682277d0ee5cd5b062daaf238d4', class: "ganttTable_Header", style: {
                 height: `${this.headerHeight - 2}px`,
-            } }, h("div", { key: 'fafa8c4eb47c740fff23eb204a75b872d39876e2', class: "ganttTable_HeaderItem", style: {
+            } }, h("div", { key: 'f5f4a2a599dd84a0616b699931823760bb0b07ed', class: "ganttTable_HeaderItem", style: {
                 minWidth: this.rowWidth,
-            } }, "\u00A0Name"), h("div", { key: '1ebbcca3ce32701a8af4140fb638173de9795995', 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: 'b08345a4be12e76a9d634508e32e035a3c570dfb', class: "ganttTable_HeaderItem", style: {
+            } }), h("div", { key: '278d663951a0e5c73e1d365f98aefdddc9344d43', class: "ganttTable_HeaderItem", style: {
                 minWidth: this.rowWidth,
-            } }, "\u00A0From"), h("div", { key: '3f035b39c2c66677e78c2786cea4a39c824bb60b', 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: '01effc62e0e2ddf73ab5cf4cbad5873f70d510c6', 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: 'a488bee5b9421a1f1f63911ac1ad6702d2f08d65', 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: '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);
@@ -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: '654584ad4531cbc29fac8f6f1f8862f32127e614', class: "tooltipDefaultContainer", style: { fontSize: this.fontSize, fontFamily: this.fontFamily } }, h("b", { key: 'fc0104c8f5cce036410e84236b73237ca8c32e10', 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: '021b32e66e1ee1254acb60d7a5c1f38f1b59ea42', 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: '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 })));
     }
     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: '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/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: '3d9977be8424b7c7939cf1b4b5aa906407832397' }, customStyle ? h("style", null, customStyle) : null, h("div", { key: 'cfa7570e4e6dda26d6523ccddfe6dfb134a11d49', 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: '1b2425a71715fddcf35e70489b6c8a3a69b2f46b' }, h("style", { key: '99bb7c045653035435bbb392febdb1fa84323f7f' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '09ba97b815a0a175a514504eb360f3dd0e936a6f', id: componentWrapperId }, h(FProgressBar, Object.assign({ key: 'c442aa63b4c117266e1f52abb6167a2b0eb765b2' }, 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: '533e892f582c7ee663b5e41b44617c00edd1d48b', 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: 'd31390528c93c0199b6d0db4b7e1deb01c81f2dd' }, h("style", { key: '78e614396810ee9261e5573633d5cac7e8ecb08f' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '547e1d51db015599d45f6ee822041392f842ed75', id: componentWrapperId }, h(FRating, Object.assign({ key: 'ea9e6df8ab9af9f3cc8845f4fd3e2f00db74aacc' }, 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: 'f75d7ca1de9b0f63c555a5bbe65d18f515b30020', "kup-visible": this.visible }, h("style", { key: 'e457888f9c6355cd2997f136cc542d424cf7d72e' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'ede1431d986952c43cbe5d3b8484b3f27750aec6', id: componentWrapperId }, h("div", { key: 'c76c7533233b5ca057b8f2d49c99a5771b90b3f1', class: snackbarClass }, h("div", { key: '5546bfb280f7ba4bbc462c30b36094fea1276c08', 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);