@sme.up/ketchup 9.6.3 → 9.6.5

package/dist/components/kup-grid-renderer2.js

@@ -1,49 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
-import { a as addToDate } from './kup-planner-renderer-helper.js';
-import { c as commonjsGlobal } from './kup-dates.js';
-
-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;
-    }
-};
+import { d as defaultStylingOptions } from './kup-planner-declarations.js';
+import { i as isKeyboardEvent } from './other.helpers.js';
+import { c as commonjsGlobal } from './_commonjsHelpers.js';
 
 const convertToBarTasks = (tasks, dates, columnWidth, rowHeight, taskHeight, projectHeight, timelineHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, showSecondaryDates) => {
     let barTasks = tasks.map((t, i) => {
@@ -76,16 +34,16 @@ const convertToBarTask = (task, index, dates, columnWidth, rowHeight, taskHeight
     }
     return barTask;
 };
-function computeTypeAndXs(start, end, type, dates, columnWidth, handleWidth, rtl) {
+function computeTypeAndXs(start, end, type, dates, columnWidth, handleWidth, rtl, startHour, endHour) {
     let x1;
     let x2;
     if (rtl) {
-        x2 = taskXCoordinateRTL(start, dates, columnWidth);
-        x1 = taskXCoordinateRTL(end, dates, columnWidth);
+        x2 = taskXCoordinateRTL(start, dates, columnWidth, startHour);
+        x1 = taskXCoordinateRTL(end, dates, columnWidth, endHour);
     }
     else {
-        x1 = taskXCoordinate(start, dates, columnWidth);
-        x2 = taskXCoordinate(end, dates, columnWidth);
+        x1 = taskXCoordinate(start, dates, columnWidth, startHour);
+        x2 = taskXCoordinate(end, dates, columnWidth, endHour);
     }
     let typeInternal = type;
     if (typeInternal === 'task' && x2 - x1 < handleWidth * 2) {
@@ -95,9 +53,9 @@ function computeTypeAndXs(start, end, type, dates, columnWidth, handleWidth, rtl
     return { x1, x2, typeInternal };
 }
 const convertToBar = (task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, showSecondaryDates) => {
-    const { x1, x2, typeInternal } = computeTypeAndXs(task.start, task.end, task.type, dates, columnWidth, handleWidth, rtl);
+    const { x1, x2, typeInternal } = computeTypeAndXs(task.start, task.end, task.type, dates, columnWidth, handleWidth, rtl, task.startHour, task.endHour);
     const { x1: x1secondary, x2: x2secondary } = showSecondaryDates && task.secondaryStart && task.secondaryEnd
-        ? computeTypeAndXs(task.secondaryStart, task.secondaryEnd, task.type, dates, columnWidth, handleWidth, rtl)
+        ? computeTypeAndXs(task.secondaryStart, task.secondaryEnd, task.type, dates, columnWidth, handleWidth, rtl, task.secondaryStartHour, task.secondaryEndHour)
         : { x1: undefined, x2: undefined };
     const [progressWidth, progressX] = progressWithByParams(x1, x2, task.progress, rtl);
     const y = taskYCoordinate(index, rowHeight, taskHeight);
@@ -114,7 +72,7 @@ const convertToBar = (task, index, dates, columnWidth, rowHeight, taskHeight, ba
         progressWidth,
         barCornerRadius,
         handleWidth,
-        hideChildren, height: taskHeight, barChildren: [], styles });
+        hideChildren, height: taskHeight, barChildren: [], styles, ySecondary: y });
 };
 const defaultStyles = (styles) => {
     var _a, _b, _c, _d;
@@ -171,7 +129,13 @@ const convertToTimeline = (task, index, dates, columnWidth, rowHeight, taskHeigh
         index, progressX: 0, progressWidth: 0, barCornerRadius,
         handleWidth, typeInternal: task.type, progress: 0, height: taskHeight, hideChildren: undefined, barChildren: children !== null && children !== void 0 ? children : [], styles: defaultStyles(task.styles) });
 };
-const taskXCoordinate = (xDate, dates, columnWidth) => {
+const taskXCoordinate = (xDate, dates, columnWidth, hourString) => {
+    if (hourString) {
+        const [hours, minutes, seconds] = hourString.split(':').map(Number);
+        xDate.setHours(hours !== null && hours !== void 0 ? hours : 0);
+        xDate.setMinutes(minutes !== null && minutes !== void 0 ? minutes : 0);
+        xDate.setSeconds(seconds !== null && seconds !== void 0 ? seconds : 0);
+    }
     const index = dates.findIndex((d) => d.getTime() >= xDate.getTime()) - 1;
     if (index < 0) {
         return 0;
@@ -181,8 +145,8 @@ const taskXCoordinate = (xDate, dates, columnWidth) => {
     const x = index * columnWidth + percentOfInterval * columnWidth;
     return x;
 };
-const taskXCoordinateRTL = (xDate, dates, columnWidth) => {
-    let x = taskXCoordinate(xDate, dates, columnWidth);
+const taskXCoordinateRTL = (xDate, dates, columnWidth, hourString) => {
+    let x = taskXCoordinate(xDate, dates, columnWidth, hourString);
     x += columnWidth;
     return x;
 };
@@ -265,11 +229,24 @@ const dateByX = (x, taskX, taskDate, xStep, timeStep) => {
         (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 60000);
     return newDate;
 };
+const hourStringFromDate = (date, withSeconds) => {
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    const seconds = date.getSeconds();
+    const formattedHours = hours < 10 ? '0' + hours : hours;
+    const formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
+    const formattedSeconds = seconds < 10 ? '0' + seconds : seconds;
+    const hourString = withSeconds ? `${formattedHours}:${formattedMinutes}:${formattedSeconds}` : `${formattedHours}:${formattedMinutes}`;
+    return hourString;
+};
+const hasSeconds = (hourString) => {
+    return hourString.split(":").length === 3;
+};
 /**
  * Method handles event in real time(mousemove) and on finish(mouseup)
  */
-const handleTaskBySVGMouseEvent = (svgX, action, selectedTask, xStep, timeStep, initEventX1Delta, rtl) => handleTaskBySVGMouseEventForBar(svgX, action, selectedTask, xStep, timeStep, initEventX1Delta, rtl);
-const handleTaskBySVGMouseEventForBar = (svgX, action, selectedTask, xStep, timeStep, initEventX1Delta, rtl) => {
+const handleTaskBySVGMouseEvent = (svgX, action, selectedTask, xStep, timeStep, initEventX1Delta, rtl, svgY) => handleTaskBySVGMouseEventForBar(svgX, action, selectedTask, xStep, timeStep, initEventX1Delta, rtl, svgY);
+const handleTaskBySVGMouseEventForBar = (svgX, action, selectedTask, xStep, timeStep, initEventX1Delta, rtl, svgY) => {
     const changedTask = Object.assign({}, selectedTask);
     let isChanged = false;
     switch (action) {
@@ -294,9 +271,11 @@ const handleTaskBySVGMouseEventForBar = (svgX, action, selectedTask, xStep, time
             if (isChanged) {
                 if (rtl) {
                     changedTask.end = dateByX(newX1, selectedTask.x1, selectedTask.end, xStep, timeStep);
+                    changedTask.endHour && (changedTask.endHour = hourStringFromDate(changedTask.end, hasSeconds(changedTask.endHour)));
                 }
                 else {
                     changedTask.start = dateByX(newX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
+                    changedTask.startHour && (changedTask.startHour = hourStringFromDate(changedTask.start, hasSeconds(changedTask.startHour)));
                 }
                 const [progressWidth, progressX] = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl);
                 changedTask.progressWidth = progressWidth;
@@ -311,9 +290,11 @@ const handleTaskBySVGMouseEventForBar = (svgX, action, selectedTask, xStep, time
             if (isChanged) {
                 if (rtl) {
                     changedTask.start = dateByX(newX2, selectedTask.x2, selectedTask.start, xStep, timeStep);
+                    changedTask.startHour && (changedTask.startHour = hourStringFromDate(changedTask.start, hasSeconds(changedTask.startHour)));
                 }
                 else {
                     changedTask.end = dateByX(newX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
+                    changedTask.endHour && (changedTask.endHour = hourStringFromDate(changedTask.end, hasSeconds(changedTask.endHour)));
                 }
                 const [progressWidth, progressX] = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl);
                 changedTask.progressWidth = progressWidth;
@@ -327,11 +308,16 @@ const handleTaskBySVGMouseEventForBar = (svgX, action, selectedTask, xStep, time
             if (isChanged) {
                 changedTask.start = dateByX(newMoveX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
                 changedTask.end = dateByX(newMoveX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
+                changedTask.startHour && (changedTask.startHour = hourStringFromDate(changedTask.start, hasSeconds(changedTask.startHour)));
+                changedTask.endHour && (changedTask.endHour = hourStringFromDate(changedTask.end, hasSeconds(changedTask.endHour)));
                 changedTask.x1 = newMoveX1;
                 changedTask.x2 = newMoveX2;
                 const [progressWidth, progressX] = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl);
                 changedTask.progressWidth = progressWidth;
                 changedTask.progressX = progressX;
+                if (changedTask.type === 'task') {
+                    changedTask.y = svgY;
+                }
             }
             break;
         }
@@ -905,7 +891,7 @@ var hexToCssFilter = {exports: {}};
 })));
 }(hexToCssFilter, hexToCssFilter.exports));
 
-const kupGridRendererCss = ".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}.gridRow{fill:#fff}.gridRowLine{stroke:transparent}.gridTick{stroke:#e6e4e4}.barHandle{fill:#ddd;cursor:ew-resize;opacity:0;visibility:hidden}.barBackground{user-select:none;stroke-width:0}.barWrapper{cursor:pointer;outline:none}.task-wrapper{outline:none !important}.barWrapper:hover .barHandle{visibility:visible;opacity:1}.barLabel{fill:#fff;text-anchor:middle;font-weight:lighter;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.barLabelOutside{fill:#555;text-anchor:start;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}";
+const kupGridRendererCss = ".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}.gridRow{fill:#fff}.gridRowLine{stroke:transparent}.gridTick{stroke:#e6e4e4}.barHandle{fill:#ddd;cursor:ew-resize;opacity:0;visibility:hidden}.barBackground{user-select:none;stroke-width:0}.barWrapper{cursor:pointer;outline:none}.task-wrapper{outline:none !important}.barWrapper:hover .barHandle{visibility:visible;opacity:1}.barLabel{fill:#fff;text-anchor:middle;font-weight:lighter;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.barLabelOutside{fill:#555;text-anchor:start;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.ghost-preview{opacity:0.5}";
 const KupGridRendererStyle0 = kupGridRendererCss;
 
 const KupGridRenderer = /*@__PURE__*/ proxyCustomElement(class KupGridRenderer extends HTMLElement {
@@ -942,13 +928,18 @@ const KupGridRenderer = /*@__PURE__*/ proxyCustomElement(class KupGridRenderer e
         this.setSelectedTask = undefined;
         this.eventStart = undefined;
         this.eMouseDown = undefined;
+        this.phaseDrop = undefined;
         this.setGanttEvent = undefined;
+        this.phaseDragScroll = undefined;
         this.xStep = 0;
         this.initEventX1Delta = 0;
         this.initEventXClick = 0;
         this.isMoving = false;
         this.point = undefined;
         this.svg = undefined;
+        this.currentTarget = undefined;
+        this.dragScrollInterval = undefined;
+        this.dropZoneTask = undefined;
     }
     //---- Lifecycle hooks ----
     componentDidLoad() {
@@ -980,14 +971,22 @@ const KupGridRenderer = /*@__PURE__*/ proxyCustomElement(class KupGridRenderer e
                 return;
             event.preventDefault();
             this.point.x = event.clientX;
+            this.point.y = event.clientY;
             const cursor = this.point.matrixTransform((_b = (_a = this.svg) === null || _a === void 0 ? void 0 : _a.getScreenCTM()) === null || _b === void 0 ? void 0 : _b.inverse());
-            const { isChanged, changedTask } = handleTaskBySVGMouseEvent(cursor.x, this.ganttEvent.action, this.ganttEvent.changedTask, this.xStep, this.timeStep, this.initEventX1Delta, this.rtl);
+            const { isChanged, changedTask } = handleTaskBySVGMouseEvent(cursor.x, this.ganttEvent.action, this.ganttEvent.changedTask, this.xStep, this.timeStep, this.initEventX1Delta, this.rtl, cursor.y);
+            if (this.currentTarget) {
+                this.addGhostPreview(event);
+                this.handleAutoScrollForPhaseDrag(event);
+                this.addDropzoneVisualization();
+            }
             if (isChanged) {
                 this.setGanttEvent(Object.assign(Object.assign({}, this.ganttEvent), { action: this.ganttEvent.action, changedTask }));
             }
         };
         const handleMouseUp = async (event) => {
-            var _a, _b;
+            var _a, _b, _c;
+            clearInterval(this.dragScrollInterval);
+            this.resetDropzoneVisualization();
             const { action, originalSelectedTask, changedTask } = this.ganttEvent;
             if (!changedTask ||
                 !this.point ||
@@ -997,18 +996,33 @@ const KupGridRenderer = /*@__PURE__*/ proxyCustomElement(class KupGridRenderer e
             event.preventDefault();
             this.point.x = event.clientX;
             const cursor = this.point.matrixTransform((_b = (_a = this.svg) === null || _a === void 0 ? void 0 : _a.getScreenCTM()) === null || _b === void 0 ? void 0 : _b.inverse());
-            const { changedTask: newChangedTask } = handleTaskBySVGMouseEvent(cursor.x, action, changedTask, this.xStep, this.timeStep, this.initEventX1Delta, this.rtl);
+            this.currentTarget = null;
+            const { changedTask: newChangedTask } = handleTaskBySVGMouseEvent(cursor.x, action, changedTask, this.xStep, this.timeStep, this.initEventX1Delta, this.rtl, cursor.y);
             const isNotLikeOriginal = originalSelectedTask.start !== newChangedTask.start ||
                 originalSelectedTask.end !== newChangedTask.end ||
-                originalSelectedTask.progress !== newChangedTask.progress;
+                originalSelectedTask.progress !== newChangedTask.progress ||
+                originalSelectedTask.y !== newChangedTask.y;
             // remove listeners
             this.svg.removeEventListener('mousemove', handleMouseMove);
             this.svg.removeEventListener('mouseup', handleMouseUp);
+            (_c = this.svg.querySelector('.ghost-preview')) === null || _c === void 0 ? void 0 : _c.remove();
             this.setGanttEvent({ action: '' });
             this.isMoving = false;
             // custom operation start
             let operationSuccess = true;
-            if ((action === 'move' || action === 'end' || action === 'start') &&
+            let droppedOn = undefined;
+            let originalTaskData = undefined;
+            if (action === 'move' &&
+                isNotLikeOriginal &&
+                newChangedTask.type === 'task') {
+                droppedOn = this.tasks.find((task) => this.isPhaseWithinTaskArea(changedTask, task) &&
+                    task.type === 'project');
+                originalTaskData = this.tasks.find((task) => task.id == originalSelectedTask.id.split('_').shift());
+            }
+            if ((droppedOn === null || droppedOn === void 0 ? void 0 : droppedOn.id) && (originalTaskData === null || originalTaskData === void 0 ? void 0 : originalTaskData.id) !== (droppedOn === null || droppedOn === void 0 ? void 0 : droppedOn.id)) {
+                this.phaseDrop(originalSelectedTask, originalTaskData, newChangedTask, droppedOn);
+            }
+            else if ((action === 'move' || action === 'end' || action === 'start') &&
                 this.dateChange &&
                 isNotLikeOriginal) {
                 try {
@@ -1054,6 +1068,110 @@ const KupGridRenderer = /*@__PURE__*/ proxyCustomElement(class KupGridRenderer e
         }
         return this.initEventXClick !== event.clientX;
     }
+    addGhostPreview(event) {
+        var _a;
+        (_a = this.svg.querySelector('.ghost-preview')) === null || _a === void 0 ? void 0 : _a.remove();
+        const mockEvent = Object.assign(Object.assign({}, event), { dataTransfer: new DataTransfer() });
+        const dragEle = this.currentTarget;
+        dragEle.classList.add('ghost-preview');
+        this.svg.appendChild(dragEle.cloneNode(true));
+        const nodeRect = dragEle.getBoundingClientRect();
+        mockEvent.dataTransfer.setDragImage(dragEle, mockEvent.clientX - nodeRect.left, mockEvent.clientY - nodeRect.top);
+    }
+    handleAutoScrollForPhaseDrag(event) {
+        var _a, _b;
+        const list = (_b = (_a = this.svg) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement;
+        if (!list)
+            return;
+        clearInterval(this.dragScrollInterval);
+        const isOverFlowing = list.clientHeight < list.scrollHeight;
+        if (isOverFlowing) {
+            // if container is overflowing we need to scroll within the container
+            const containerRect = list.getBoundingClientRect();
+            const offsetY = event.clientY - containerRect.top;
+            const diff = 5;
+            if (offsetY - 20 < diff) {
+                this.dragScrollInterval = setInterval(() => {
+                    this.phaseDragScroll((list.scrollTop -= diff));
+                }, 1);
+            }
+            else if (offsetY + 20 > containerRect.height - diff) {
+                this.dragScrollInterval = setInterval(() => {
+                    this.phaseDragScroll((list.scrollTop += diff));
+                }, 1);
+            }
+        }
+        else {
+            // else we need to scroll the window when viewport exceeds
+            const scrollOffset = 20;
+            const windowHeight = window.innerHeight;
+            const y = event.clientY;
+            if (y < scrollOffset) {
+                window.scrollBy(0, -scrollOffset);
+            }
+            else if (y > windowHeight - scrollOffset) {
+                window.scrollBy(0, scrollOffset);
+            }
+        }
+    }
+    isPhaseWithinTaskArea(phase, task) {
+        return (phase.y + phase.height >= task.ySecondary &&
+            phase.y <= task.ySecondary + task.height &&
+            phase.x2 >= task.x1 &&
+            phase.x1 <= task.x2);
+    }
+    addDropzoneVisualization() {
+        var _a;
+        this.resetDropzoneVisualization();
+        // find the tasks where drop is allowed, includes all projects except parent project also includes current phase
+        const dropAllowedOn = this.tasks.filter((task) => {
+            var _a, _b, _c;
+            return task.type == 'project' &&
+                ((_c = (_b = (_a = this.ganttEvent.originalSelectedTask) === null || _a === void 0 ? void 0 : _a.id) === null || _b === void 0 ? void 0 : _b.split('_')) === null || _c === void 0 ? void 0 : _c.shift()) !=
+                    task.id;
+        });
+        const changedTask = this.ganttEvent.changedTask;
+        // to determine whether the phase is in some another project y and x area
+        this.dropZoneTask = dropAllowedOn.find((task) => this.isPhaseWithinTaskArea(changedTask, task));
+        if ((_a = this.dropZoneTask) === null || _a === void 0 ? void 0 : _a.ySecondary) {
+            const rects = this.getBarRectsForDropzoneVisualization();
+            rects.forEach((rect) => {
+                rect.setAttribute('fill', defaultStylingOptions.barDropZoneColor);
+            });
+        }
+    }
+    resetDropzoneVisualization() {
+        if (!this.dropZoneTask)
+            return;
+        const rects = this.getBarRectsForDropzoneVisualization();
+        const isSelected = !!this.selectedTask &&
+            this.dropZoneTask.id === this.selectedTask.id;
+        rects.forEach((rect) => {
+            rect.setAttribute('fill', this.getBarColor(isSelected, this.dropZoneTask.styles));
+        });
+    }
+    getBarRectsForDropzoneVisualization() {
+        let rects;
+        if (!this.showSecondaryDates) {
+            rects = this.svg.querySelectorAll(`.barWrapper[data-type="${this.dropZoneTask.type}"] rect[y='${this.dropZoneTask.ySecondary}']`);
+        }
+        else {
+            const rect = this.svg.querySelector(`.barWrapper[data-type="${this.dropZoneTask.type}"] rect[y='${this.dropZoneTask.ySecondary}']`);
+            const siblings = [rect];
+            let nextSibling = rect.nextElementSibling;
+            while (nextSibling !== null) {
+                siblings.push(nextSibling);
+                nextSibling = nextSibling.nextElementSibling;
+            }
+            let prevSibling = rect.previousElementSibling;
+            while (prevSibling !== null) {
+                siblings.unshift(prevSibling);
+                prevSibling = prevSibling.previousElementSibling;
+            }
+            rects = siblings;
+        }
+        return rects;
+    }
     handleBarEventStart(action, task, event) {
         var _a;
         if (!event) {
@@ -1109,7 +1227,14 @@ const KupGridRenderer = /*@__PURE__*/ proxyCustomElement(class KupGridRenderer e
                 return;
             this.point.x = event.clientX;
             const cursor = this.point.matrixTransform((_a = this.svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
+            if (task.type === 'task') {
+                this.currentTarget = event.currentTarget.cloneNode(true);
+            }
+            else {
+                this.currentTarget = null;
+            }
             this.initEventX1Delta = cursor.x - task.x1;
+            this.point.y = event.clientY;
             this.initEventXClick = event.clientX;
             this.setGanttEvent({
                 action,
@@ -1131,7 +1256,7 @@ const KupGridRenderer = /*@__PURE__*/ proxyCustomElement(class KupGridRenderer e
     }
     renderKupBar(task, isSelected, isDateResizable, isProgressChangeable) {
         var _a, _b, _c;
-        return (h("g", { class: "barWrapper", "tab-index": 0 }, this.renderKupBarDisplay(task.x1, task.y, task.x2 - task.x1, task.height, task.progressX, task.progressWidth, task.barCornerRadius, task.styles, isSelected, !this.readOnly && !!this.dateChange && !task.isDisabled, task, task.x1secondary, ((_a = task.x2secondary) !== null && _a !== void 0 ? _a : 0) - ((_b = task.x1secondary) !== null && _b !== void 0 ? _b : 0)), h("g", { class: "handleGroup" }, isDateResizable && (h("g", null, this.renderKupBarDateHandle(task.x1 + 1, task.y + 1, task.handleWidth, task.height - 2, task.barCornerRadius, task, 'start'), this.renderKupBarDateHandle(task.x2 - task.handleWidth - 1, task.y + 1, task.handleWidth, task.height - 2, task.barCornerRadius, task, 'end'))), isProgressChangeable && (h("polygon", { class: "barHandle", points: this.calculateProgressPoint(task), onMouseDown: (e) => {
+        return (h("g", { class: "barWrapper", "tab-index": 0, "data-type": task.type }, this.renderKupBarDisplay(task.x1, task.y, task.x2 - task.x1, task.height, task.progressX, task.progressWidth, task.barCornerRadius, task.styles, isSelected, !this.readOnly && !!this.dateChange && !task.isDisabled, task, task.x1secondary, ((_a = task.x2secondary) !== null && _a !== void 0 ? _a : 0) - ((_b = task.x1secondary) !== null && _b !== void 0 ? _b : 0), task.ySecondary), h("g", { class: "handleGroup" }, isDateResizable && (h("g", null, this.renderKupBarDateHandle(task.x1 + 1, task.y + 1, task.handleWidth, task.height - 2, task.barCornerRadius, task, 'start'), this.renderKupBarDateHandle(task.x2 - task.handleWidth - 1, task.y + 1, task.handleWidth, task.height - 2, task.barCornerRadius, task, 'end'))), isProgressChangeable && (h("polygon", { class: "barHandle", points: this.calculateProgressPoint(task), onMouseDown: (e) => {
                 this.handleBarEventStart('progress', task, e);
             } }))), task.icon &&
             task.icon.url &&
@@ -1146,11 +1271,11 @@ const KupGridRenderer = /*@__PURE__*/ proxyCustomElement(class KupGridRenderer e
                     (this.showSecondaryDates ? task.height / 2 : 0),
             })));
     }
-    renderKupBarDisplay(x, y, width, height, progressX, progressWidth, barCornerRadius, styles, isSelected, isDateMovable, task, xSecondary, widthSecondary) {
+    renderKupBarDisplay(x, y, width, height, progressX, progressWidth, barCornerRadius, styles, isSelected, isDateMovable, task, xSecondary, widthSecondary, ySecondary) {
         if (this.showSecondaryDates && typeof xSecondary !== 'undefined') {
             const halfHeight = height / 2;
             return (h("g", { onMouseDown: (e) => isDateMovable &&
-                    this.handleBarEventStart('move', task, e) }, h("rect", { key: "top semi-transparent bar", x: xSecondary, width: widthSecondary, y: y, height: halfHeight, ry: barCornerRadius, rx: barCornerRadius, fill: this.getBarColor(isSelected, styles), opacity: 0.5, class: 'barBackground' }), h("rect", { key: "main bar", x: x, width: width, y: y + halfHeight, height: halfHeight, ry: barCornerRadius, rx: barCornerRadius, fill: this.getBarColor(isSelected, styles), class: 'barBackground' }), h("rect", { key: "progress bar", x: progressX, width: progressWidth, y: y + halfHeight, height: halfHeight, ry: barCornerRadius, rx: barCornerRadius, fill: this.getProcessColor(isSelected, styles) })));
+                    this.handleBarEventStart('move', task, e) }, h("rect", { key: "top semi-transparent bar", x: xSecondary, width: widthSecondary, y: ySecondary !== null && ySecondary !== void 0 ? ySecondary : y, height: halfHeight, ry: barCornerRadius, rx: barCornerRadius, fill: this.getBarColor(isSelected, styles), opacity: 0.5, class: 'barBackground' }), h("rect", { key: "main bar", x: x, width: width, y: y + halfHeight, height: halfHeight, ry: barCornerRadius, rx: barCornerRadius, fill: this.getBarColor(isSelected, styles), class: 'barBackground' }), h("rect", { key: "progress bar", x: progressX, width: progressWidth, y: y + halfHeight, height: halfHeight, ry: barCornerRadius, rx: barCornerRadius, fill: this.getProcessColor(isSelected, styles) })));
         }
         return (h("g", { onMouseDown: (e) => {
                 isDateMovable && this.handleBarEventStart('move', task, e);
@@ -1253,29 +1378,37 @@ const KupGridRenderer = /*@__PURE__*/ proxyCustomElement(class KupGridRenderer e
             rowLines.push(h("line", { key: 'RowLine' + task.id, x1: 0, y1: y + this.rowHeight, x2: this.gridProps.svgWidth, y2: y + this.rowHeight, class: "gridRowLine" }));
             y += this.rowHeight;
         }
-        const now = new Date();
+        // const now = new Date();
         let tickX = 0;
         const ticks = [];
         for (let i = 0; i < this.dates.length; i++) {
             const date = this.dates[i];
             ticks.push(h("line", { key: date.getTime(), x1: tickX, y1: 0, x2: tickX, y2: y, class: "gridTick" }));
-            if ((i + 1 !== this.dates.length &&
-                date.getTime() < now.getTime() &&
-                this.dates[i + 1].getTime() >= now.getTime()) ||
-                // if current date is last
-                (i !== 0 &&
-                    i + 1 === this.dates.length &&
-                    date.getTime() < now.getTime() &&
-                    addToDate(date, date.getTime() - this.dates[i - 1].getTime(), 'millisecond').getTime() >= now.getTime())) ;
+            // if (
+            //     (i + 1 !== this.dates.length &&
+            //         date.getTime() < now.getTime() &&
+            //         this.dates[i + 1].getTime() >= now.getTime()) ||
+            //     // if current date is last
+            //     (i !== 0 &&
+            //         i + 1 === this.dates.length &&
+            //         date.getTime() < now.getTime() &&
+            //         addToDate(
+            //             date,
+            //             date.getTime() - this.dates[i - 1].getTime(),
+            //             'millisecond'
+            //         ).getTime() >= now.getTime())
+            // ) {
+            //     // Add custom logic here if needed
+            // }
             tickX += this.columnWidth;
         }
-        return (h("svg", { key: '453f06f9849218010409d444adb13500f22b6cfa', xmlns: "http://www.w3.org/2000/svg", width: this.gridProps.svgWidth, height: `${this.rowHeight * this.tasks.length}px`, "font-family": this.fontFamily, ref: (el) => (this.svg = el) }, h("g", { key: 'a671a9e0c1c44ef1b3d86d679d68dda934246e59', class: "grid" }, h("g", { key: '3741633c839e757fa4d4cc0999d9e34ad5284173', class: "rows" }, gridRows), h("g", { key: '34bdba123cff205d0769e6492055a72f51b85bd7', class: "rowLines" }, rowLines), h("g", { key: '0d2b321b587e8cc4a65ac356ea1a5903c1fa61f6', class: "ticks" }, ticks)), h("g", { key: '891e706099f2c83dcabf5a0bb62a2c8139c10ac1', class: "content" }, this.currentDateIndicator && (h("rect", { fill: this.currentDateIndicator.color, x: this.currentDateIndicator.x + 1.5, y: "0", width: "2", height: "100%" })), this.projection && (h("rect", { fill: this.projection.color, x: this.projection.x0, y: "0", width: this.projection.xf - this.projection.x0, height: "100%", "fill-opacity": "0.35" })), h("g", { key: '6e36b71942a8619b800210d189629c0856cb57f6', class: "arrows", fill: this.arrowColor, stroke: this.arrowColor }, this.tasks.map((task) => {
+        return (h("svg", { key: '95b5c0ebccd9d472507328baa068f9d75daa4a6e', xmlns: "http://www.w3.org/2000/svg", width: this.gridProps.svgWidth, height: `${this.rowHeight * this.tasks.length}px`, "font-family": this.fontFamily, ref: (el) => (this.svg = el) }, h("g", { key: 'bd6598993c35c69c6aadca0d41c50b028a283b70', class: "grid" }, h("g", { key: 'c52a1de5fa57cc5fdd4b80ff84b3a09b13e3b199', class: "rows" }, gridRows), h("g", { key: 'd8747275b307b05c7a5c4ab1ab3efa5956c95f25', class: "rowLines" }, rowLines), h("g", { key: '000d0b2ec6253da9d23096a7cfa3564a2a3a173d', class: "ticks" }, ticks)), h("g", { key: 'fc0d6cc1b4f60e84b77082b7c47d68eb364fbb7b', class: "content" }, this.currentDateIndicator && (h("rect", { fill: this.currentDateIndicator.color, x: this.currentDateIndicator.x + 1.5, y: "0", width: "2", height: "100%" })), this.projection && (h("rect", { fill: this.projection.color, x: this.projection.x0, y: "0", width: this.projection.xf - this.projection.x0, height: "100%", "fill-opacity": "0.35" })), h("g", { key: '04162e3432a56f08c1ea29e69503fe97e1fb84d2', class: "arrows", fill: this.arrowColor, stroke: this.arrowColor }, this.tasks.map((task) => {
             return task.barChildren.map((child) => {
                 if (task.type !== 'timeline') {
                     this.renderKupArrow(task, child);
                 }
             });
-        })), h("g", { key: '38643adf911e2b0ff25b0ffe4f8c8c645171c55d', class: "bar", "font-family": this.fontFamily, "font-size": this.fontSize }, this.tasks.map((task) => {
+        })), h("g", { key: '4e5888f0a6335480ee0f32df3844982e355f4e39', class: "bar", "font-family": this.fontFamily, "font-size": this.fontSize }, this.tasks.map((task) => {
             const forbidResize = task.type === 'project';
             return (h("g", { onKeyDown: (e) => {
                     switch (e.key) {
@@ -1335,7 +1468,7 @@ const KupGridRenderer = /*@__PURE__*/ proxyCustomElement(class KupGridRenderer e
                         return this.renderKupBar(task, props.isSelected, isDateResizable, isProgressChangeable);
                 }
             })()));
-        })))));
+        }), this.currentTarget && this.ganttEvent.changedTask && (h("g", { class: "task-wrapper" }, this.renderKupBar(this.ganttEvent.changedTask, false, false, false)))))));
     }
     static get watchers() { return {
         "columnWidth": ["updateXStep"],
@@ -1382,13 +1515,18 @@ const KupGridRenderer = /*@__PURE__*/ proxyCustomElement(class KupGridRenderer e
         "setSelectedTask": [16],
         "eventStart": [16],
         "eMouseDown": [16],
+        "phaseDrop": [16],
         "setGanttEvent": [1040],
+        "phaseDragScroll": [16],
         "xStep": [32],
         "initEventX1Delta": [32],
         "initEventXClick": [32],
         "isMoving": [32],
         "point": [32],
-        "svg": [32]
+        "svg": [32],
+        "currentTarget": [32],
+        "dragScrollInterval": [32],
+        "dropZoneTask": [32]
     }, undefined, {
         "columnWidth": ["updateXStep"],
         "dates": ["updateXStep"],
@@ -1416,4 +1554,4 @@ function defineCustomElement() {
     } });
 }
 
-export { KupGridRenderer as K, calculateCurrentDateCalculator as a, calculateProjection as b, convertToBarTasks as c, defineCustomElement as d, removeHiddenTasks as r, sortTasks as s };
+export { KupGridRenderer as K, calculateCurrentDateCalculator as a, calculateProjection as b, convertToBarTasks as c, defineCustomElement as d };

package/dist/components/kup-grid2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { k as kupManagerInstance, g as getProps, s as setProps, P as KupDebugCategory } from './kup-manager.js';
+import { k as kupManagerInstance, g as getProps, s as setProps, o as KupDebugCategory } from './kup-manager.js';
 import { c as componentWrapperId, d as defineCustomElement$1, a as defineCustomElement$2, b as defineCustomElement$3, e as defineCustomElement$4, f as defineCustomElement$5, g as defineCustomElement$6, h as defineCustomElement$7, i as defineCustomElement$8, j as defineCustomElement$9, k as defineCustomElement$a, l as defineCustomElement$b, m as defineCustomElement$c, n as defineCustomElement$d, o as defineCustomElement$e, p as defineCustomElement$f, q as defineCustomElement$g, r as defineCustomElement$h, s as defineCustomElement$i, t as defineCustomElement$j, u as defineCustomElement$k, v as defineCustomElement$l, w as defineCustomElement$m, x as defineCustomElement$n, y as defineCustomElement$o, z as defineCustomElement$p, A as defineCustomElement$q, B as defineCustomElement$r } from './kup-autocomplete2.js';
 
 /**

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

@@ -1,6 +1,6 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 
-const kupHorizontalScrollCss = ".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}.scrollWrapper{overflow:auto;max-width:100%;height:1.2rem}.scrollWrapper::-webkit-scrollbar{width:1.1rem;height:1.1rem}.scrollWrapper::-webkit-scrollbar-corner{background:transparent}.scrollWrapper::-webkit-scrollbar-thumb{border:6px solid transparent;background:rgba(0, 0, 0, 0.2);background:var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));border-radius:10px;background-clip:padding-box}.scrollWrapper::-webkit-scrollbar-thumb:hover{border:4px solid transparent;background:rgba(0, 0, 0, 0.3);background:var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));background-clip:padding-box}.scroll{height:1px}";
+const kupHorizontalScrollCss = ".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}.scrollWrapper{overflow:auto;max-width:100%;height:1.2rem}.scrollWrapper::-webkit-scrollbar{width:1.1rem;height:1.1rem}.scrollWrapper::-webkit-scrollbar-corner{background:transparent}.scrollWrapper::-webkit-scrollbar-thumb{border:6px solid transparent;background:rgba(0, 0, 0, 0.2);background:var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));border-radius:10px;background-clip:padding-box}.scrollWrapper::-webkit-scrollbar-thumb:hover{border:4px solid transparent;background:rgba(0, 0, 0, 0.3);background:var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));background-clip:padding-box}.scroll{height:1px}.scroll-container{display:flex}";
 const KupHorizontalScrollStyle0 = kupHorizontalScrollCss;
 
 const HorizontalScroll = /*@__PURE__*/ proxyCustomElement(class HorizontalScroll extends HTMLElement {
@@ -13,7 +13,12 @@ const HorizontalScroll = /*@__PURE__*/ proxyCustomElement(class HorizontalScroll
         this.taskListTrueRef = undefined;
         this.rtl = undefined;
         this.taskListWidth = undefined;
+        this.scrollableTaskList = false;
+        this.listCellWidth = '300px';
+        this.taskListScrollWidth = undefined;
+        this.taskListScrollNumber = undefined;
         this.horizontalScroll = undefined;
+        this.horizontalTaskListScroll = undefined;
         this.timeoutId = undefined;
     }
     //---- Lifecycle hooks ----
@@ -29,24 +34,51 @@ const HorizontalScroll = /*@__PURE__*/ proxyCustomElement(class HorizontalScroll
             this.setScrollLeft();
         }, 50);
     }
+    listScrollLeft() {
+        clearTimeout(this.timeoutId);
+        this.timeoutId = setTimeout(() => {
+            this.setTaskListScrollLeft();
+        }, 50);
+    }
     setScrollLeft() {
         if (this.rootElement) {
-            this.rootElement.shadowRoot.querySelector('div').scrollLeft =
-                this.scrollNumber;
+            const shadowElement = this.rootElement.shadowRoot.querySelector('div');
+            const element = shadowElement.children.length == 2
+                ? shadowElement.children[1]
+                : shadowElement.children[0];
+            element && (element.scrollLeft = this.scrollNumber);
+        }
+    }
+    setTaskListScrollLeft() {
+        if (this.rootElement) {
+            const shadowElement = this.rootElement.shadowRoot.querySelector('div');
+            const taskListScrollBar = shadowElement.children.length == 2 ? shadowElement.children[0] : null;
+            taskListScrollBar && (taskListScrollBar.scrollLeft = this.taskListScrollNumber);
         }
     }
     render() {
         var _a, _b;
         const w = (_b = ((_a = this.taskListTrueRef) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) + 24 * 1.5) !== null && _b !== void 0 ? _b : 0; // 24 * 2 is the sum of padding and margin for both list and gantt, multiplied by 1.5 cause we need to add the other half to the right
-        return (h("div", { key: '6900ce2b4ff33f7f48403c085861d25d8a55ae51', dir: "ltr", style: {
+        const width = +this.listCellWidth.replace('px', '');
+        return (h(Fragment, { key: '84cd5ee2a862b2e0afaba38f81ad299466c6c90a' }, h("div", { key: '8be4374ca4ae407dd6c538994a4236d24196111b', class: "scroll-container" }, this.scrollableTaskList &&
+            this.taskListScrollWidth > width && (h("div", { dir: "ltr", style: {
+                margin: this.rtl
+                    ? `0px 20px 0px 20px`
+                    : `0px 20px 0px 20px`,
+                maxWidth: `${width + 20}px`,
+                minWidth: `${width + 20}px`,
+            }, class: "scrollWrapper", "data-scrollx": "true", onScroll: this.horizontalTaskListScroll }, h("div", { style: {
+                width: `${this.taskListScrollWidth}px`,
+            }, class: "scroll" }))), h("div", { key: '703cb38b994d2012c5c8718e144b360d6351eafd', dir: "ltr", style: {
                 margin: this.rtl
-                    ? `0px ${w}px 0px 12px`
-                    : `0px 12px 0px ${w}px`,
-            }, class: "scrollWrapper", "data-scrollx": "true", onScroll: this.horizontalScroll }, h("div", { key: 'd5cd1e9ec9d4dc2a1c249eef3c485dc3eb9f82ad', style: { width: `${this.svgWidth}px` }, class: "scroll" })));
+                    ? `0px ${this.scrollableTaskList && this.taskListScrollWidth > width ? 40 : w}px 0px 12px`
+                    : `0px 12px 0px ${this.scrollableTaskList && this.taskListScrollWidth > width ? 40 : w}px`,
+            }, class: "scrollWrapper", "data-scrollx": "true", onScroll: this.horizontalScroll }, h("div", { key: '347758c21c87bd6069526f5079acac13e50220f8', style: { width: `${this.svgWidth}px` }, class: "scroll" })))));
     }
     get rootElement() { return this; }
     static get watchers() { return {
-        "scrollNumber": ["scrollLeft"]
+        "scrollNumber": ["scrollLeft"],
+        "taskListScrollNumber": ["listScrollLeft"]
     }; }
     static get style() { return KupHorizontalScrollStyle0; }
 }, [1, "kup-horizontal-scroll", {
@@ -55,10 +87,16 @@ const HorizontalScroll = /*@__PURE__*/ proxyCustomElement(class HorizontalScroll
         "taskListTrueRef": [16],
         "rtl": [4],
         "taskListWidth": [2, "task-list-width"],
+        "scrollableTaskList": [4, "scrollable-task-list"],
+        "listCellWidth": [1, "list-cell-width"],
+        "taskListScrollWidth": [2, "task-list-scroll-width"],
+        "taskListScrollNumber": [2, "task-list-scroll-number"],
         "horizontalScroll": [16],
+        "horizontalTaskListScroll": [16],
         "timeoutId": [32]
     }, undefined, {
-        "scrollNumber": ["scrollLeft"]
+        "scrollNumber": ["scrollLeft"],
+        "taskListScrollNumber": ["listScrollLeft"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {