@sme.up/ketchup 9.6.3 → 9.6.5

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

@@ -1,5 +1,5 @@
 import { h, Fragment } from "@stencil/core";
-import { addToDate } from "../kup-planner-renderer-helper";
+import { defaultStylingOptions, } from "../../kup-planner-declarations";
 import { handleTaskBySVGMouseEvent, getProgressPoint, } from "../helpers/bar.helpers";
 import { isKeyboardEvent } from "../helpers/other.helpers";
 import { hexToCSSFilter } from "hex-to-css-filter";
@@ -35,13 +35,18 @@ export class KupGridRenderer {
         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() {
@@ -73,14 +78,22 @@ export class KupGridRenderer {
                 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 ||
@@ -90,18 +103,33 @@ export class KupGridRenderer {
             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 {
@@ -147,6 +175,110 @@ export class KupGridRenderer {
         }
         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) {
@@ -202,7 +334,14 @@ export class KupGridRenderer {
                 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,
@@ -224,7 +363,7 @@ export class KupGridRenderer {
     }
     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 &&
@@ -239,11 +378,11 @@ export class KupGridRenderer {
                     (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);
@@ -346,31 +485,37 @@ export class KupGridRenderer {
             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())) {
-                // Add custom logic here if needed
-            }
+            // 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) {
@@ -430,7 +575,7 @@ export class KupGridRenderer {
                         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 is() { return "kup-grid-renderer"; }
     static get originalStyleUrls() {
@@ -1111,6 +1256,27 @@ export class KupGridRenderer {
                     "text": ""
                 }
             },
+            "phaseDrop": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerEventOption['phaseDrop']",
+                    "resolved": "(originalPhaseData: KupPlannerTask, originalTaskData: KupPlannerTask, finalPhaseData: KupPlannerTask, destinationData: KupPlannerTask) => boolean | void | Promise<boolean> | Promise<void>",
+                    "references": {
+                        "KupPlannerEventOption": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerEventOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
             "setGanttEvent": {
                 "type": "unknown",
                 "mutable": true,
@@ -1131,6 +1297,21 @@ export class KupGridRenderer {
                     "tags": [],
                     "text": ""
                 }
+            },
+            "phaseDragScroll": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(scrollY: number) => void",
+                    "resolved": "(scrollY: number) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
             }
         };
     }
@@ -1141,7 +1322,10 @@ export class KupGridRenderer {
             "initEventXClick": {},
             "isMoving": {},
             "point": {},
-            "svg": {}
+            "svg": {},
+            "currentTarget": {},
+            "dragScrollInterval": {},
+            "dropZoneTask": {}
         };
     }
     static get watchers() {

package/dist/collection/components/kup-planner/utils/kup-horizontal-scroll/kup-horizontal-scroll.css

@@ -159,4 +159,8 @@
 
 .scroll {
   height: 1px;
+}
+
+.scroll-container {
+  display: flex;
 }

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Fragment, } from "@stencil/core";
 export class HorizontalScroll {
     constructor() {
         this.scrollNumber = undefined;
@@ -6,7 +6,12 @@ export 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 ----
@@ -22,20 +27,46 @@ export 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" })))));
     }
     static get is() { return "kup-horizontal-scroll"; }
     static get encapsulation() { return "shadow"; }
@@ -139,6 +170,76 @@ export class HorizontalScroll {
                 "attribute": "task-list-width",
                 "reflect": false
             },
+            "scrollableTaskList": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "scrollable-task-list",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "listCellWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "list-cell-width",
+                "reflect": false,
+                "defaultValue": "'300px'"
+            },
+            "taskListScrollWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "task-list-scroll-width",
+                "reflect": false
+            },
+            "taskListScrollNumber": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "task-list-scroll-number",
+                "reflect": false
+            },
             "horizontalScroll": {
                 "type": "unknown",
                 "mutable": false,
@@ -158,6 +259,26 @@ export class HorizontalScroll {
                     "tags": [],
                     "text": ""
                 }
+            },
+            "horizontalTaskListScroll": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(event: UIEvent) => void",
+                    "resolved": "(event: UIEvent) => void",
+                    "references": {
+                        "UIEvent": {
+                            "location": "global",
+                            "id": "global::UIEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
             }
         };
     }
@@ -171,6 +292,9 @@ export class HorizontalScroll {
         return [{
                 "propName": "scrollNumber",
                 "methodName": "scrollLeft"
+            }, {
+                "propName": "taskListScrollNumber",
+                "methodName": "listScrollLeft"
             }];
     }
 }