@sme.up/ketchup 9.6.4 → 9.6.5

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

@@ -54,9 +54,11 @@ export class KupPlanner {
         this.detailDates = undefined;
         this.detailFilter = undefined;
         this.detailHeight = undefined;
+        this.detailHours = [];
         this.detailIconCol = undefined;
         this.detailIdCol = undefined;
         this.detailNameCol = undefined;
+        this.detailPrevHours = [];
         this.detailPrevDates = undefined;
         this.detailInitialScrollX = undefined;
         this.detailInitialScrollY = undefined;
@@ -66,9 +68,11 @@ export class KupPlanner {
         this.phaseColumns = undefined;
         this.phaseColParDep = undefined;
         this.phaseDates = undefined;
+        this.phaseHours = [];
         this.phaseIconCol = undefined;
         this.phaseIdCol = undefined;
         this.phaseNameCol = undefined;
+        this.phasePrevHours = [];
         this.phasePrevDates = undefined;
         this.readOnly = false;
         this.showSecondaryDates = false;
@@ -76,16 +80,19 @@ export class KupPlanner {
         this.taskDates = undefined;
         this.taskFilter = undefined;
         this.taskHeight = undefined;
+        this.taskHours = [];
         this.taskIconCol = undefined;
         this.taskIdCol = undefined;
         this.taskInitialScrollX = undefined;
         this.taskInitialScrollY = undefined;
         this.taskNameCol = undefined;
+        this.taskPrevHours = [];
         this.taskPrevDates = undefined;
         this.titleMess = undefined;
         this.viewMode = 'month';
         this.mainFilter = undefined;
         this.secondaryFilter = undefined;
+        this.scrollableTaskList = false;
         this.plannerProps = undefined;
     }
     initWithPersistedState() {
@@ -190,7 +197,7 @@ export class KupPlanner {
         if (task) {
             __classPrivateFieldGet(this, _KupPlanner_phases, "f")[taskId] = data;
             task.phases = (_a = data.rows) === null || _a === void 0 ? void 0 : _a.filter((row) => isAtLeastOneDateValid(row.cells[this.phaseDates[0]], row.cells[this.phaseDates[1]])).map((row) => {
-                const datesSanitized = sanitizeAllDates(row.cells[this.phaseDates[0]], row.cells[this.phaseDates[1]], row.cells[this.phasePrevDates[0]], row.cells[this.phasePrevDates[1]]);
+                const datesSanitized = sanitizeAllDates(row.cells[this.phaseDates[0]], row.cells[this.phaseDates[1]], row.cells[this.phasePrevDates[0]], row.cells[this.phasePrevDates[1]], row.cells[this.phaseHours[0]], row.cells[this.phaseHours[1]], row.cells[this.phasePrevHours[0]], row.cells[this.phasePrevHours[1]]);
                 const valuesToShow = getValuesToShow(row, this.phaseIdCol, this.phaseNameCol, data.columns, this.phaseColumns, () => this.phaseColumns.map((col) => col == this.phaseDates[0]
                     ? '#START#'
                     : col == this.phaseDates[1]
@@ -217,6 +224,10 @@ export class KupPlanner {
                     icon: iconUrl
                         ? { url: iconUrl, color: iconColor !== null && iconColor !== void 0 ? iconColor : '#595959' }
                         : undefined,
+                    startHour: datesSanitized.hourValues[0],
+                    endHour: datesSanitized.hourValues[1],
+                    secondaryStartHour: datesSanitized.secHourValues[0],
+                    secondaryEndHour: datesSanitized.secHourValues[1],
                 };
                 return phase;
             });
@@ -284,6 +295,7 @@ export class KupPlanner {
                     window.clearTimeout(taskScrollYTimeout);
                     taskScrollYTimeout = window.setTimeout(() => this.handleTaskGanttScrollY(y), scrollDelay);
                 },
+                onPhaseDrop: (nativeEvent) => this.handleOnPhaseDrop(nativeEvent),
             },
             secondaryGantt: details
                 ? {
@@ -308,6 +320,7 @@ export class KupPlanner {
             onSetDoubleView: (checked) => this.handleOnSetDoubleView(checked),
             onSetViewMode: (value) => this.handleOnSetViewMode(value),
             viewMode: this.viewMode,
+            scrollableTaskList: this.scrollableTaskList,
             onScrollX: (x) => {
                 window.clearTimeout(scrollXTimeout);
                 scrollXTimeout = window.setTimeout(() => this.handleOnScrollX(x), scrollDelay);
@@ -391,6 +404,14 @@ export class KupPlanner {
             taskAction: taskAction,
         });
     }
+    onKupPhaseDrop(event, taskAction) {
+        this.kupPhaseDrop.emit({
+            comp: this,
+            id: this.rootElement.id,
+            value: event,
+            taskAction: taskAction,
+        });
+    }
     handleOnDblClick(nativeEvent) {
         switch (nativeEvent.rowType) {
             case KupPlannerGanttRowType.TASK:
@@ -492,6 +513,9 @@ export class KupPlanner {
             }
         }
     }
+    handleOnPhaseDrop(nativeEvent) {
+        this.onKupPhaseDrop(nativeEvent, KupPlannerTaskAction.onTask);
+    }
     render() {
         var _a, _b, _c;
         const plannerProps = this.plannerProps
@@ -499,7 +523,7 @@ export class KupPlanner {
         if ((_b = this.plannerProps) === null || _b === void 0 ? void 0 : _b.secondaryGantt) {
             plannerProps.secondaryGantt = Object.assign(Object.assign({}, this.plannerProps.secondaryGantt), { onScrollY: this.handleDetailGanttScrollY.bind(this) });
         }
-        return (h(Host, { key: '48097981722a6754c764f640323df8db967a8965' }, h("style", { key: '4e707ee5c473822a3d8f57c54d49e79df72094ba' }, __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'ed811811c76bd8e36487018607af8d72125bce3a', id: componentWrapperId, style: { maxWidth: this.maxWidth } }, this.plannerProps && (h("kup-planner-renderer", { props: plannerProps, ref: (el) => (this.plannerRenderer = el) }))), h("div", { key: 'd337aadbee5d6e101c2ed0084b85fddb51602c93', style: { display: this.plannerProps ? 'none' : '' } }, h(FTextField, { key: 'c1ae374b1041d4e273a5e6eac20b72d2a4011374', icon: KupThemeIconValues.SEARCH, id: "main-filter", label: __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), onKeyDown: (e) => {
+        return (h(Host, { key: 'cce744fe8b14527039c6a39116da3ebbb79b5593' }, h("style", { key: '3ac43e5c414360d07ba8a745c000bbc7e545545f' }, __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '3a9fb6211d0fc2b554bf4265350c567fc1108adb', id: componentWrapperId, style: { maxWidth: this.maxWidth } }, this.plannerProps && (h("kup-planner-renderer", { props: plannerProps, ref: (el) => (this.plannerRenderer = el) }))), h("div", { key: '9dda490b90dc263b1e42496c7c602ee0c09d081f', style: { display: this.plannerProps ? 'none' : '' } }, h(FTextField, { key: 'b569efffbce491b845d813d913545bbb1efc3d08', icon: KupThemeIconValues.SEARCH, id: "main-filter", label: __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), onKeyDown: (e) => {
                 if (e.key === 'Enter') {
                     __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_onFilter).call(this, e.target.value);
                 }
@@ -739,6 +763,25 @@ export class KupPlanner {
                 "attribute": "detail-height",
                 "reflect": false
             },
+            "detailHours": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Columns containing detail hour duration, from (firstDate) to (secondDate)"
+                },
+                "defaultValue": "[]"
+            },
             "detailIconCol": {
                 "type": "string",
                 "mutable": false,
@@ -799,6 +842,25 @@ export class KupPlanner {
                 "attribute": "detail-name-col",
                 "reflect": false
             },
+            "detailPrevHours": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Columns containing forecast detail duration, from (firstHour) to (secondHour)"
+                },
+                "defaultValue": "[]"
+            },
             "detailPrevDates": {
                 "type": "unknown",
                 "mutable": false,
@@ -975,6 +1037,25 @@ export class KupPlanner {
                     "text": "Columns containing phase duration, from (firstDate) to (secondDate)"
                 }
             },
+            "phaseHours": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Columns containing phase hour duration, from (firstDate) to (secondDate)"
+                },
+                "defaultValue": "[]"
+            },
             "phaseIconCol": {
                 "type": "string",
                 "mutable": false,
@@ -1035,6 +1116,25 @@ export class KupPlanner {
                 "attribute": "phase-name-col",
                 "reflect": false
             },
+            "phasePrevHours": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Columns containing forecast phase duration, from (firstHour) to (secondHour)"
+                },
+                "defaultValue": "[]"
+            },
             "phasePrevDates": {
                 "type": "unknown",
                 "mutable": false,
@@ -1171,6 +1271,25 @@ export class KupPlanner {
                 "attribute": "task-height",
                 "reflect": false
             },
+            "taskHours": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Columns containing task hours duration, from (firstDate) to (secondDate)"
+                },
+                "defaultValue": "[]"
+            },
             "taskIconCol": {
                 "type": "string",
                 "mutable": false,
@@ -1271,6 +1390,25 @@ export class KupPlanner {
                 "attribute": "task-name-col",
                 "reflect": false
             },
+            "taskPrevHours": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Columns containing forecast task duration, from (firstHour) to (secondHour)"
+                },
+                "defaultValue": "[]"
+            },
             "taskPrevDates": {
                 "type": "unknown",
                 "mutable": false,
@@ -1314,7 +1452,7 @@ export class KupPlanner {
                 "mutable": false,
                 "complexType": {
                     "original": "KupPlannerViewMode",
-                    "resolved": "\"day\" | \"month\" | \"week\" | \"year\"",
+                    "resolved": "\"day\" | \"hour\" | \"month\" | \"week\" | \"year\"",
                     "references": {
                         "KupPlannerViewMode": {
                             "location": "import",
@@ -1381,6 +1519,27 @@ export class KupPlanner {
                         }],
                     "text": "Sets the filter for secondary gantt."
                 }
+            },
+            "scrollableTaskList": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Sets the scroll bar for task list."
+                },
+                "attribute": "scrollable-task-list",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -1453,6 +1612,27 @@ export class KupPlanner {
                         }
                     }
                 }
+            }, {
+                "method": "kupPhaseDrop",
+                "name": "kup-planner-phasedrop",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "KupPlannerEventPayload",
+                    "resolved": "KupPlannerEventPayload",
+                    "references": {
+                        "KupPlannerEventPayload": {
+                            "location": "import",
+                            "path": "./kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerEventPayload"
+                        }
+                    }
+                }
             }, {
                 "method": "kupReady",
                 "name": "kup-planner-ready",
@@ -1660,7 +1840,7 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_lastOnChangeReceived = new W
         return [];
     }
     let tasks = (_a = data.rows) === null || _a === void 0 ? void 0 : _a.filter((row) => isAtLeastOneDateValid(row.cells[this.taskDates[0]], row.cells[this.taskDates[1]])).map((row) => {
-        const datesSanitized = sanitizeAllDates(row.cells[this.taskDates[0]], row.cells[this.taskDates[1]], row.cells[this.taskPrevDates[0]], row.cells[this.taskPrevDates[1]]);
+        const datesSanitized = sanitizeAllDates(row.cells[this.taskDates[0]], row.cells[this.taskDates[1]], row.cells[this.taskPrevDates[0]], row.cells[this.taskPrevDates[1]], row.cells[this.taskHours[0]], row.cells[this.taskHours[1]], row.cells[this.taskPrevHours[0]], row.cells[this.taskPrevHours[1]]);
         const valuesToShow = getValuesToShow(row, this.taskIdCol, this.taskNameCol, data.columns, this.taskColumns, () => this.taskColumns.map((col) => col == this.taskDates[0]
             ? '#START#'
             : col == this.taskDates[1]
@@ -1683,6 +1863,10 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_lastOnChangeReceived = new W
             icon: iconUrl
                 ? { url: iconUrl, color: iconColor !== null && iconColor !== void 0 ? iconColor : '#595959' }
                 : undefined,
+            startHour: datesSanitized.hourValues[0],
+            endHour: datesSanitized.hourValues[1],
+            secondaryStartHour: datesSanitized.secHourValues[0],
+            secondaryEndHour: datesSanitized.secHourValues[1]
         };
         return task;
     });
@@ -1698,7 +1882,7 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_lastOnChangeReceived = new W
         var _a, _b;
         const detailId = row.cells[this.detailIdCol].value;
         const detailNameId = row.cells[this.detailNameCol].value;
-        const datesSanitized = sanitizeAllDates(row.cells[this.detailDates[0]], row.cells[this.detailDates[1]]);
+        const datesSanitized = sanitizeAllDates(row.cells[this.detailDates[0]], row.cells[this.detailDates[1]], undefined, undefined, row.cells[this.detailHours[0]], row.cells[this.detailHours[1]]);
         const valuesToShow = getValuesToShow(row, this.detailIdCol, this.detailNameCol, data.columns, this.detailColumns);
         let detail = details.find((det) => det.id == detailId);
         if (!detail) {
@@ -1727,6 +1911,8 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_lastOnChangeReceived = new W
             icon: iconUrl
                 ? { url: iconUrl, color: iconColor !== null && iconColor !== void 0 ? iconColor : '#595959' }
                 : undefined,
+            startHour: datesSanitized.hourValues[0],
+            endHour: datesSanitized.hourValues[1]
         });
     });
     return details;

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

@@ -1,5 +1,6 @@
 import { Fragment, h } from "@stencil/core";
 import { KupDates } from "../../../managers/kup-dates/kup-dates";
+import { createArrayFromNum } from "./helpers/other.helpers";
 export class KupCustomTaskListTable {
     constructor() {
         this.ganttId = undefined;
@@ -8,15 +9,37 @@ export class KupCustomTaskListTable {
         this.rowWidth = '';
         this.fontFamily = '';
         this.fontSize = '';
+        this.scrollableTaskList = undefined;
+        this.taskListScrollX = undefined;
         this.setSelectedTask = undefined;
         this.onclickTaskList = undefined;
         this.ondblclickTaskList = undefined;
         this.oncontextmenuTaskList = undefined;
+        this.ontaskListScrollWidth = undefined;
+    }
+    componentDidLoad() {
+        var _a;
+        this.ontaskListScrollWidth((_a = this.projectWrapperRef) === null || _a === void 0 ? void 0 : _a.clientWidth);
+    }
+    componentDidUpdate() {
+        var _a;
+        this.ontaskListScrollWidth((_a = this.projectWrapperRef) === null || _a === void 0 ? void 0 : _a.clientWidth);
+    }
+    updateTaskListScroll() {
+        this.projectWrapperRef &&
+            (this.projectWrapperRef.parentElement.scrollLeft = this.taskListScrollX);
     }
     render() {
         const kupDates = new KupDates();
-        return (h("div", { key: '6f208e493d948891975d12cfa398634ead8f7631', class: "container" }, this.tasks.map((task) => {
-            var _a, _b, _c;
+        const scrollableStyle = {};
+        if (this.scrollableTaskList) {
+            scrollableStyle['width'] = this.rowWidth;
+        }
+        const spansToShow = this.tasks.reduce((prev, curr) => {
+            return prev.valuesToShow.length > curr.valuesToShow.length ? prev : curr;
+        }).valuesToShow.length + 1;
+        return (h("div", { class: `container ${this.scrollableTaskList ? 'scrollable' : ''}`, style: scrollableStyle }, h("div", { class: "project-wrapper", ref: (el) => (this.projectWrapperRef = el) }, this.tasks.map((task) => {
+            var _a, _b, _c, _d;
             return (h(Fragment, null, task.type === 'project' ? (h("div", { class: "project", style: {
                     height: `${this.rowHeight}px`,
                     width: this.rowWidth,
@@ -33,11 +56,15 @@ export class KupCustomTaskListTable {
                     e.preventDefault();
                     this.setSelectedTask(task.id);
                     this.oncontextmenuTaskList(e, task.id);
-                } }, (_a = task.valuesToShow) === null || _a === void 0 ? void 0 : _a.map((v, index) => (h("span", { class: index === 0 ? 'main' : undefined, title: v.length > 10 ? v : undefined, key: `task_${task.id}_valuesToShow_${index}` }, v === '#START#'
-                ? kupDates.formatToLocaleSimple(task.start)
-                : v === '#END#'
-                    ? kupDates.formatToLocaleSimple(task.end)
-                    : v))))) : task.type === 'task' ? (h("div", { class: "subrow", style: {
+                } }, (_a = task.valuesToShow) === null || _a === void 0 ? void 0 :
+                _a.map((v, index) => (h("span", { class: index === 0 ? 'main' : undefined, title: v.length > 10 ? v : undefined, key: `task_${task.id}_valuesToShow_${index}` }, v === '#START#'
+                    ? kupDates.formatToLocaleSimple(task.start)
+                    : v === '#END#'
+                        ? kupDates.formatToLocaleSimple(task.end)
+                        : v))), this.scrollableTaskList && spansToShow > task.valuesToShow.length && ((() => {
+                const spansToIterate = createArrayFromNum(spansToShow - task.valuesToShow.length);
+                return (spansToIterate.map((element) => (h("span", { key: element }))));
+            })()))) : task.type === 'task' ? (h("div", { class: "subrow", style: {
                     height: `${this.rowHeight}px`,
                     width: this.rowWidth,
                     fontFamily: this.fontFamily,
@@ -53,16 +80,26 @@ export class KupCustomTaskListTable {
                     e.preventDefault();
                     this.setSelectedTask(task.id);
                     this.oncontextmenuTaskList(e, task.id);
+                } }, this.scrollableTaskList ? (h("div", { style: {
+                    textAlign: 'end',
                 } }, h("span", { key: `phase_${task.id}_valuesToShow_color`, style: {
                     height: '16px',
                     width: '16px',
+                    display: 'inline-block',
                     backgroundColor: (_b = task.styles) === null || _b === void 0 ? void 0 : _b.backgroundColor,
-                } }), (_c = task.valuesToShow) === null || _c === void 0 ? void 0 :
-                _c.map((v, index) => (h("span", { class: index === 0 ? 'main' : undefined, title: v.length > 10 ? v : undefined, key: `phase_${task.id}_valuesToShow_${index}` }, v === '#START#'
+                } }))) : (h("span", { key: `phase_${task.id}_valuesToShow_color`, style: {
+                    height: '16px',
+                    width: '16px',
+                    backgroundColor: (_c = task.styles) === null || _c === void 0 ? void 0 : _c.backgroundColor,
+                } })), (_d = task.valuesToShow) === null || _d === void 0 ? void 0 :
+                _d.map((v, index) => (h("span", { class: index === 0 ? 'main' : undefined, title: v.length > 10 ? v : undefined, key: `phase_${task.id}_valuesToShow_${index}` }, v === '#START#'
                     ? kupDates.formatToLocaleSimple(task.start)
                     : v === '#END#'
                         ? kupDates.formatToLocaleSimple(task.end)
-                        : v))))) : ((() => {
+                        : v))), this.scrollableTaskList && spansToShow > task.valuesToShow.length && ((() => {
+                const spansToIterate = createArrayFromNum(spansToShow - task.valuesToShow.length - 1);
+                return (spansToIterate.map((element) => (h("span", { key: element }))));
+            })()))) : ((() => {
                 var _a;
                 let str = '';
                 for (let i = 0; i < task.valuesToShow.length; i++) {
@@ -84,7 +121,7 @@ export class KupCustomTaskListTable {
                         ? v
                         : undefined, key: `detail_${task.id}_valuesToShow_${index}` }, v)))));
             })())));
-        })));
+        }))));
     }
     static get is() { return "kup-custom-task-list-table"; }
     static get originalStyleUrls() {
@@ -210,6 +247,40 @@ export class KupCustomTaskListTable {
                 "reflect": false,
                 "defaultValue": "''"
             },
+            "scrollableTaskList": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "scrollable-task-list",
+                "reflect": 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
+            },
             "setSelectedTask": {
                 "type": "unknown",
                 "mutable": false,
@@ -274,7 +345,28 @@ export class KupCustomTaskListTable {
                     "tags": [],
                     "text": ""
                 }
+            },
+            "ontaskListScrollWidth": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(width: number) => void",
+                    "resolved": "(width: number) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
             }
         };
     }
+    static get watchers() {
+        return [{
+                "propName": "taskListScrollX",
+                "methodName": "updateTaskListScroll"
+            }];
+    }
 }

package/dist/collection/components/kup-planner/utils/gantt-table.module.css

@@ -131,6 +131,84 @@
   margin-right: 10px;
 }
 
+.scrollable {
+  overflow-x: auto;
+  scrollbar-width: 0;
+}
+.scrollable .project-wrapper {
+  display: table;
+}
+.scrollable .project {
+  width: 100% !important;
+  display: table-row;
+}
+.scrollable .project > * {
+  overflow: unset;
+  padding-right: 10px;
+  display: table-cell;
+  vertical-align: middle;
+  border-bottom: 1px solid var(--kup-border-color, #acacac);
+  border-top: 1px solid var(--kup-border-color, #acacac);
+  padding-left: 12px;
+}
+.scrollable .project > *:first-child {
+  border-left: 1px solid var(--kup-border-color, #acacac);
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.scrollable .project > *:last-child {
+  border-right: 1px solid var(--kup-border-color, #acacac);
+  border-bottom-right-radius: 4px;
+  border-top-right-radius: 4px;
+}
+.scrollable .subrow {
+  width: 100% !important;
+  display: table-row;
+}
+.scrollable .subrow > * {
+  overflow: unset;
+  padding-right: 10px;
+  display: table-cell;
+  vertical-align: middle;
+  border-bottom: 1px solid #acacac;
+  border-top: 1px solid #acacac;
+  padding-left: 12px;
+}
+.scrollable .subrow > *:first-child {
+  border-left: 1px solid #acacac;
+}
+.scrollable .subrow > *:last-child {
+  border-right: 1px solid #acacac;
+}
+.scrollable .timeline {
+  width: 100% !important;
+  display: table-row;
+}
+.scrollable .timeline > * {
+  overflow: unset;
+  padding-right: 10px;
+  display: table-cell;
+  vertical-align: middle;
+  border-bottom: 1px solid #acacac;
+  border-top: 1px solid #acacac;
+  padding-left: 12px;
+}
+.scrollable .timeline > *:first-child {
+  border-left: 1px solid #acacac;
+}
+.scrollable .timeline > *:last-child {
+  border-right: 1px solid #acacac;
+}
+.scrollable .project:has(+ .subrow) > * {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.scrollable::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
 .project {
   background: var(--kup-background-color, #ffffff);
   border: 1px solid var(--kup-border-color, #acacac);
@@ -183,8 +261,8 @@
 
 .subrow:has(+ .subrow),
 .project:has(+ .subrow) {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
 }
 
 .timeline {