@sme.up/ketchup 10.1.2 → 10.1.6

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

@@ -65,6 +65,7 @@ export class KupPlanner {
         this.listCellWidth = '300px';
         this.maxWidth = '90vw';
         this.phaseColorCol = undefined;
+        this.dependencyCol = undefined;
         this.phaseColumns = undefined;
         this.phaseColParDep = undefined;
         this.phaseDates = undefined;
@@ -74,6 +75,7 @@ export class KupPlanner {
         this.phaseNameCol = undefined;
         this.phasePrevHours = [];
         this.phasePrevDates = undefined;
+        this.dependencies = [];
         this.readOnly = false;
         this.showSecondaryDates = false;
         this.taskColumns = undefined;
@@ -192,11 +194,12 @@ export class KupPlanner {
      * @param data - Matrix which contains project phases
      */
     async addPhases(taskId, data) {
-        var _a;
+        var _a, _b, _c, _d, _e, _f, _g;
         const task = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getTask).call(this, taskId);
         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) => {
+                var _a, _b;
                 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#'
@@ -205,10 +208,12 @@ export class KupPlanner {
                         : getCellValueForDisplay(data.columns.find((kCol) => kCol.name == col), row.cells[col])));
                 let iconUrl = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconUrl).call(this, row, this.phaseIconCol);
                 let iconColor = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconColor).call(this, row, this.phaseIconCol);
+                const _phaseIdRaw = ((_b = (_a = row.cells[this.phaseIdCol]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '') + '';
                 let phase = {
                     taskRow: task.taskRow,
                     phaseRow: row,
-                    id: task.id + '_' + row.cells[this.phaseIdCol].value,
+                    // trim the phase id value to avoid padded/trailing spaces
+                    id: `${task.id}_${_phaseIdRaw.trim()}`,
                     phaseRowId: row.id,
                     taskRowId: task.taskRowId,
                     name: row.cells[this.phaseNameCol].value,
@@ -231,6 +236,92 @@ export class KupPlanner {
                 };
                 return phase;
             });
+            // Diagnostic: log created phase ids for the task
+            try {
+                // eslint-disable-next-line no-console
+                console.log('kup-planner: addPhases created phases for', taskId, task.phases ? task.phases.map((p) => p.id) : []);
+            }
+            catch (e) {
+                /* ignore */
+            }
+            // If the phases dataset includes a dependency column, parse it and
+            // create structured dependencies. The column may contain a single
+            // dependency id or multiple comma-separated ids. The values can be
+            // either phase codes (e.g. 'P410') or full runtime ids
+            // ('G418_P410'). We'll normalize to runtime ids using the current
+            // task id when necessary.
+            try {
+                if (this.dependencyCol &&
+                    data.columns.find((c) => c.name == this.dependencyCol)) {
+                    const parsedDeps = [];
+                    for (const row of data.rows || []) {
+                        const raw = ((_d = (_c = (_b = row.cells) === null || _b === void 0 ? void 0 : _b[this.dependencyCol]) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '') + '';
+                        if (!raw)
+                            continue;
+                        const parts = raw
+                            .split(',')
+                            .map((s) => s.trim())
+                            .filter(Boolean);
+                        // compute current phase runtime id (target of dependencies)
+                        const phaseCode = ((_g = (_f = (_e = row.cells) === null || _e === void 0 ? void 0 : _e[this.phaseIdCol]) === null || _f === void 0 ? void 0 : _f.value) !== null && _g !== void 0 ? _g : '') + '';
+                        const currentPhaseId = `${task.id}_${phaseCode.trim()}`;
+                        for (const part of parts) {
+                            // normalize referenced (source) phase id
+                            let sourcePhaseId = part;
+                            if (!sourcePhaseId.includes('_')) {
+                                // assume phase code in the same task -> make runtime id
+                                sourcePhaseId = `${task.id}_${sourcePhaseId}`;
+                            }
+                            // dependency goes from the referenced phase (source) to the current phase (target)
+                            const depId = `${sourcePhaseId}__${currentPhaseId}`;
+                            parsedDeps.push({
+                                id: depId,
+                                sourceId: sourcePhaseId,
+                                targetId: currentPhaseId,
+                                type: 'FS',
+                            });
+                        }
+                    }
+                    if (parsedDeps.length) {
+                        // ensure plannerProps.mainGantt.dependencies exists
+                        try {
+                            if (!this.plannerProps.mainGantt.dependencies) {
+                                this.plannerProps.mainGantt.dependencies = [];
+                            }
+                        }
+                        catch (e) {
+                            // ensure plannerProps in general exists
+                            if (!this.plannerProps)
+                                this.plannerProps = {};
+                            if (!this.plannerProps.mainGantt)
+                                this.plannerProps.mainGantt = {};
+                            this.plannerProps.mainGantt.dependencies = [];
+                        }
+                        // merge while avoiding duplicates by id
+                        const existing = new Map((this.plannerProps.mainGantt.dependencies || []).map((d) => [d.id, d]));
+                        for (const pd of parsedDeps) {
+                            if (!existing.has(pd.id)) {
+                                existing.set(pd.id, pd);
+                            }
+                        }
+                        this.plannerProps.mainGantt.dependencies = Array.from(existing.values());
+                        // also forward to secondary if present
+                        if (this.plannerProps.secondaryGantt) {
+                            this.plannerProps.secondaryGantt.dependencies =
+                                this.plannerProps.mainGantt.dependencies;
+                        }
+                        // Diagnostic
+                        try {
+                            // eslint-disable-next-line no-console
+                            console.log('kup-planner: addPhases - injected dependencies', parsedDeps);
+                        }
+                        catch (e) { }
+                    }
+                }
+            }
+            catch (e) {
+                // ignore parsing errors
+            }
         }
         this.plannerProps.mainGantt.initialScrollX =
             __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").taskInitialScrollX;
@@ -263,6 +354,7 @@ export class KupPlanner {
         }, "f");
     }
     componentDidLoad() {
+        var _a, _b;
         let details = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toDetails).call(this, __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getFilteredRows).call(this, __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").detailFilter, true));
         const mainFilter = this.rootElement.shadowRoot.querySelector('#main-filter');
         FTextFieldMDC(mainFilter);
@@ -296,6 +388,8 @@ export class KupPlanner {
                     taskScrollYTimeout = window.setTimeout(() => this.handleTaskGanttScrollY(y), scrollDelay);
                 },
                 onPhaseDrop: (nativeEvent) => this.handleOnPhaseDrop(nativeEvent),
+                // forward structured dependencies provided at planner level
+                dependencies: this.dependencies,
             },
             secondaryGantt: details
                 ? {
@@ -311,6 +405,8 @@ export class KupPlanner {
                     initialScrollX: this.detailInitialScrollX,
                     initialScrollY: this.detailInitialScrollY,
                     readOnly: this.readOnly,
+                    // forward structured dependencies to secondary gantt as well
+                    dependencies: this.dependencies,
                     onScrollY: (y) => {
                         window.clearTimeout(detailScrollYTimeout);
                         detailScrollYTimeout = window.setTimeout(() => this.handleDetailGanttScrollY(y), scrollDelay);
@@ -326,6 +422,12 @@ export class KupPlanner {
                 scrollXTimeout = window.setTimeout(() => this.handleOnScrollX(x), scrollDelay);
             },
         };
+        // Diagnostic: log what was forwarded into plannerProps.mainGantt.dependencies
+        try {
+            // eslint-disable-next-line no-console
+            console.log('kup-planner: componentDidLoad - plannerProps.mainGantt.dependencies', (_b = (_a = this.plannerProps) === null || _a === void 0 ? void 0 : _a.mainGantt) === null || _b === void 0 ? void 0 : _b.dependencies);
+        }
+        catch (e) { }
         this.kupReady.emit({
             comp: this,
             id: this.rootElement.id,
@@ -523,7 +625,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: 'b52aea66cafe0bdaaf314087e43f1b7dca63f154' }, h("style", { key: '3ca539838d1025757f092fc0a18e3b7264520f25' }, __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '94527d16797e8f4262cc369cc66b9eed008b4ec6', id: componentWrapperId, style: { maxWidth: this.maxWidth } }, this.plannerProps && (h("kup-planner-renderer", { key: '6845e11fb230fbe0a72c04d5ad1c890820fdb01f', props: plannerProps, ref: (el) => (this.plannerRenderer = el) }))), h("div", { key: '6d911aaab4c3ab12a3022ee890ed449a1404ce44', style: { display: this.plannerProps ? 'none' : '' } }, h(FTextField, { key: 'fa72076cc7117e0f68396625dc4e2ec3f94fd6a6', icon: KupThemeIconValues.SEARCH, id: "main-filter", label: __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), onKeyDown: (e) => {
+        return (h(Host, { key: '2be4622d126df65c075552acb7af8c953cef9712' }, h("style", { key: '6ec8c1df4bd0429bfac86ca5cfba8b8eabf012e3' }, __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '1b242d8489b6f0a95d86fb2e088839557cf9ef0d', id: componentWrapperId, style: { maxWidth: this.maxWidth } }, this.plannerProps && (h("kup-planner-renderer", { key: '31f5594e6f34012eabb69ee578ba6a71c3ac3415', props: plannerProps, ref: (el) => (this.plannerRenderer = el) }))), h("div", { key: '83cc5a397427da1a09a662936f03f14d5f0eecbf', style: { display: this.plannerProps ? 'none' : '' } }, h(FTextField, { key: '39c000f13fb6614f1a4196a57a6bbc36581af4a9', 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);
                 }
@@ -981,6 +1083,26 @@ export class KupPlanner {
                 "attribute": "phase-color-col",
                 "reflect": false
             },
+            "dependencyCol": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Optional column name inside the phases dataset containing a reference\r\nto a dependent phase (for example: 'OPEDIP'). When set, `addPhases`\r\nwill read that column and create structured dependencies (FS) from the\r\nreferenced phase to the current phase (source -> target).\r\nMultiple references can be separated by commas in the cell."
+                },
+                "attribute": "dependency-col",
+                "reflect": false
+            },
             "phaseColumns": {
                 "type": "unknown",
                 "mutable": false,
@@ -1153,6 +1275,28 @@ export class KupPlanner {
                     "text": "Columns containing forecast phase duration, from (firstDate) to (secondDate)"
                 }
             },
+            "dependencies": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerDependency[]",
+                    "resolved": "KupPlannerDependency[]",
+                    "references": {
+                        "KupPlannerDependency": {
+                            "location": "import",
+                            "path": "./kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerDependency"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Structured dependencies to render as arrows"
+                },
+                "defaultValue": "[]"
+            },
             "readOnly": {
                 "type": "boolean",
                 "mutable": false,
@@ -1970,6 +2114,12 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_lastOnChangeReceived = new W
         : {
             mainGantt: Object.assign(Object.assign({}, this.plannerProps.mainGantt), { items: __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toTasks).call(this, __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getFilteredRows).call(this, value, isDetail)) }),
         };
+    // Diagnostic: inspect whether planner-level `dependencies` prop is set
+    try {
+        // eslint-disable-next-line no-console
+        console.log('kup-planner: componentDidLoad - this.dependencies', this.dependencies);
+    }
+    catch (e) { }
     this.plannerProps = Object.assign(Object.assign({}, this.plannerProps), newGantt);
     this.persistState();
 }, _KupPlanner_getFilteredRows = function _KupPlanner_getFilteredRows(value, isDetail) {

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

@@ -27,17 +27,25 @@ export class KupCustomTaskListTable {
     }
     updateTaskListScroll() {
         this.projectWrapperRef &&
-            (this.projectWrapperRef.parentElement.scrollLeft = this.taskListScrollX);
+            (this.projectWrapperRef.parentElement.scrollLeft =
+                this.taskListScrollX);
     }
     render() {
+        var _a;
         const kupDates = new KupDates();
         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;
+        const spansToShow = this.tasks && this.tasks.length > 0
+            ? ((_a = this.tasks.reduce((prev, curr) => {
+                var _a, _b;
+                return ((_a = prev.valuesToShow) === null || _a === void 0 ? void 0 : _a.length) >
+                    ((_b = curr.valuesToShow) === null || _b === void 0 ? void 0 : _b.length)
+                    ? prev
+                    : curr;
+            }).valuesToShow) === null || _a === void 0 ? void 0 : _a.length) + 1 || 1
+            : 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: {
@@ -61,10 +69,14 @@ export class KupCustomTaskListTable {
                     ? 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: {
+                        : 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,
@@ -96,10 +108,16 @@ export class KupCustomTaskListTable {
                     ? kupDates.formatToLocaleSimple(task.start)
                     : v === '#END#'
                         ? kupDates.formatToLocaleSimple(task.end)
-                        : v))), this.scrollableTaskList && spansToShow > task.valuesToShow.length && ((() => {
-                const spansToIterate = createArrayFromNum(spansToShow - task.valuesToShow.length - 1);
-                return (spansToIterate.map((element) => (h("span", { key: element }))));
-            })()))) : ((() => {
+                        : 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++) {

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

@@ -1,7 +1,7 @@
-import { h, forceUpdate, } from "@stencil/core";
-import { ganttDateRangeFromTask, seedDates, } from "../kup-planner-renderer-helper";
-import { removeHiddenTasks, sortTasks } from "../helpers/other.helpers";
+import { forceUpdate, h, } from "@stencil/core";
 import { calculateCurrentDateCalculator, calculateProjection, convertToBarTasks, } from "../helpers/bar.helpers";
+import { removeHiddenTasks, sortTasks } from "../helpers/other.helpers";
+import { ganttDateRangeFromTask, seedDates, } from "../kup-planner-renderer-helper";
 export class KupGantt {
     constructor() {
         this.taskListTrueRef = null;
@@ -45,6 +45,7 @@ export class KupGantt {
         this.hideLabel = false;
         this.showSecondaryDates = false;
         this.hideDependencies = false;
+        this.dependencies = [];
         this.projection = undefined;
         this.displayedStartDate = undefined;
         this.displayedEndDate = undefined;
@@ -532,6 +533,7 @@ export class KupGantt {
             currentDateIndicator: this.currentDateIndicatorContent,
             projection: this.projectionContent,
             readOnly: this.readOnly,
+            dependencies: this.dependencies,
             setGanttEvent: this.setGanttEvent.bind(this),
             setFailedTask: this.setFailedTask.bind(this),
             setSelectedTask: this.handleSelectedTask.bind(this),
@@ -542,7 +544,7 @@ export class KupGantt {
             barDblClick: this.barDblClick,
             barContextMenu: this.barContextMenu,
             delete: this.delete,
-            phaseDrop: this.phaseDrop
+            phaseDrop: this.phaseDrop,
         };
         const tableProps = {
             rowHeight: this.rowHeight,
@@ -561,11 +563,11 @@ export class KupGantt {
             setSelectedTask: this.handleSelectedTask.bind(this),
             expanderClick: this.handleExpanderClick.bind(this),
             TaskListHeader: this.TaskListHeader,
-            TaskListTable: this.TaskListTable
+            TaskListTable: this.TaskListTable,
         };
-        return (h("div", { key: '95eabbafe96bf8f67cfd5ed7d2b0598684cb23f3', class: "gannt-wrapper-main" }, h("div", { key: '55889af9cb5503f797fe68ec210c68af1374acc5', class: "wrapper", onKeyDown: this.handleKeyDown.bind(this), tabIndex: 0, ref: (el) => (this.wrapperRef = el) }, this.listCellWidth && (h("kup-task-list", Object.assign({ key: 'a4edfd9f6363f172bb31509ba37394b20cfdbd3d', currentTasks: this.currentTasks, handleClick: this.handleClick, handleDblClick: this.handleDblClick, handleContextMenu: this.handleContextMenu, ganttOnClick: this.ganttOnClick, ganttOnDblClick: this.ganttOnDblClick, ganttonOnContextMenu: this.ganttonOnContextMenu, label: this.label, doubleView: this.doubleView, setDoubleView: this.setDoubleView }, tableProps, { class: "tasks", scrollableTaskList: this.scrollableTaskList, updateTaskListScrollX: this.ignoreScrollEvent, ontaskListScrollWidth: (width) => {
+        return (h("div", { key: '121b1b2857d26033d74411289b05d0090556801b', class: "gannt-wrapper-main" }, h("div", { key: '7b775dcf04e33e317ff526186c2bc4905fcb4812', class: "wrapper", onKeyDown: this.handleKeyDown.bind(this), tabIndex: 0, ref: (el) => (this.wrapperRef = el) }, this.listCellWidth && (h("kup-task-list", Object.assign({ key: '898db18e0d258874ce7651c2925af28f35b04823', currentTasks: this.currentTasks, handleClick: this.handleClick, handleDblClick: this.handleDblClick, handleContextMenu: this.handleContextMenu, ganttOnClick: this.ganttOnClick, ganttOnDblClick: this.ganttOnDblClick, ganttonOnContextMenu: this.ganttonOnContextMenu, label: this.label, doubleView: this.doubleView, setDoubleView: this.setDoubleView }, tableProps, { class: "tasks", scrollableTaskList: this.scrollableTaskList, updateTaskListScrollX: this.ignoreScrollEvent, ontaskListScrollWidth: (width) => {
                 this.taskListScrollWidth = width;
-            }, taskListScrollX: this.taskListScrollX, ref: (el) => (this.taskListTrueRef = el) }))), h("kup-task-gantt", { key: '600b2af4dd6fd1dda0730f49d954282c898726ff', gridProps: gridProps, calendarProps: calendarProps, barProps: barProps, ganttHeight: this.ganttHeight, taskGanttRef: this.taskGanttRef, scrollY: this.scrollY, scrollX: this.scrollX, phaseDragScroll: this.handlePhaseDragScroll.bind(this), class: "ganttContainer" }), this.ganttEvent.changedTask && (h("kup-tooltip", { key: 'fa9b8855edcd4e95283cb65ec3429d3ec3756c18', arrowIndent: this.arrowIndent, rowHeight: this.rowHeight, svgContainerHeight: this.svgContainerHeight, svgContainerWidth: this.svgContainerWidth, fontFamily: this.fontFamily, fontSize: this.fontSize, scrollX: this.scrollX, scrollY: this.scrollY, task: this.ganttEvent.changedTask, headerHeight: this.headerHeight, taskListWidth: this.taskListWidth, TooltipContent: this.TooltipContent, rtl: this.rtl, svgWidth: this.svgWidth })), h("kup-vertical-scroll", { key: 'a8173cc05e5608dc797f01f314fa2ffdc21407f9', ganttFullHeight: this.ganttFullHeight, ganttHeight: this.ganttHeight, headerHeight: this.headerHeight, scrollNumber: this.scrollY, verticalScroll: this.handleScrollY.bind(this), rtl: this.rtl })), this.taskGanttRef && (h("kup-horizontal-scroll", { key: '0c50510e0abef51e326bc21a84b96520deac88c8', svgWidth: this.svgWidth, taskListTrueRef: this.taskListTrueRef, taskListWidth: this.taskListWidth, scrollNumber: this.scrollX, rtl: this.rtl, horizontalScroll: this.handleScrollX.bind(this), horizontalTaskListScroll: this.handleTaskListScrollX.bind(this), listCellWidth: this.listCellWidth, scrollableTaskList: this.scrollableTaskList, taskListScrollWidth: this.taskListScrollWidth, taskListScrollNumber: this.taskListScrollX }))));
+            }, taskListScrollX: this.taskListScrollX, ref: (el) => (this.taskListTrueRef = el) }))), h("kup-task-gantt", { key: '80670fd1bca1243258feab7fcda294ddb6b9e972', gridProps: gridProps, calendarProps: calendarProps, barProps: barProps, ganttHeight: this.ganttHeight, taskGanttRef: this.taskGanttRef, scrollY: this.scrollY, scrollX: this.scrollX, phaseDragScroll: this.handlePhaseDragScroll.bind(this), class: "ganttContainer" }), this.ganttEvent.changedTask && (h("kup-tooltip", { key: 'b81a3b3c980124ebdd668ead2bb81ba30fd1bedb', arrowIndent: this.arrowIndent, rowHeight: this.rowHeight, svgContainerHeight: this.svgContainerHeight, svgContainerWidth: this.svgContainerWidth, fontFamily: this.fontFamily, fontSize: this.fontSize, scrollX: this.scrollX, scrollY: this.scrollY, task: this.ganttEvent.changedTask, headerHeight: this.headerHeight, taskListWidth: this.taskListWidth, TooltipContent: this.TooltipContent, rtl: this.rtl, svgWidth: this.svgWidth })), h("kup-vertical-scroll", { key: '646408c0efc5eb955686c9ad4b45c12d61eb1db6', ganttFullHeight: this.ganttFullHeight, ganttHeight: this.ganttHeight, headerHeight: this.headerHeight, scrollNumber: this.scrollY, verticalScroll: this.handleScrollY.bind(this), rtl: this.rtl })), this.taskGanttRef && (h("kup-horizontal-scroll", { key: 'd8eb8d2ea2a7d3b9cbfa9c79aa608dfdac4786f7', svgWidth: this.svgWidth, taskListTrueRef: this.taskListTrueRef, taskListWidth: this.taskListWidth, scrollNumber: this.scrollX, rtl: this.rtl, horizontalScroll: this.handleScrollX.bind(this), horizontalTaskListScroll: this.handleTaskListScrollX.bind(this), listCellWidth: this.listCellWidth, scrollableTaskList: this.scrollableTaskList, taskListScrollWidth: this.taskListScrollWidth, taskListScrollNumber: this.taskListScrollX }))));
     }
     static get is() { return "kup-gantt"; }
     static get originalStyleUrls() {
@@ -1521,6 +1523,28 @@ export class KupGantt {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "dependencies": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerDependency[]",
+                    "resolved": "KupPlannerDependency[]",
+                    "references": {
+                        "KupPlannerDependency": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerDependency"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "[]"
+            },
             "projection": {
                 "type": "unknown",
                 "mutable": false,

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

@@ -23,6 +23,7 @@ export class KupGridRenderer {
         this.currentDateIndicator = undefined;
         this.projection = undefined;
         this.readOnly = false;
+        this.dependencies = [];
         this.gridProps = undefined;
         this.dateChange = undefined;
         this.progressChange = undefined;
@@ -419,6 +420,159 @@ export class KupGridRenderer {
             : this.drownPathAndTriangle(task, this.tasks[child.index], this.rowHeight, this.taskHeight, this.arrowIndent);
         return (h("g", { class: "arrow" }, h("path", { "stroke-width": "1.5", d: path, fill: "none" }), h("polygon", { points: trianglePoints })));
     }
+    /**
+     * Render dependencies passed as structured data. Supports multiple dependencies
+     * between the same pair by offsetting paths.
+     */
+    renderDependencies() {
+        var _a, _b, _c;
+        if (!this.dependencies || this.dependencies.length === 0)
+            return null;
+        // Build a map of task id -> KupPlannerBarTask for quick lookup
+        const taskById = new Map();
+        for (const t of this.tasks)
+            taskById.set(t.id, t);
+        // Group dependencies by pair key (source__target)
+        const groups = new Map();
+        for (const dep of this.dependencies) {
+            const key = `${dep.sourceId}__${dep.targetId}`;
+            const arr = (_a = groups.get(key)) !== null && _a !== void 0 ? _a : [];
+            arr.push(dep);
+            groups.set(key, arr);
+        }
+        // Also group by target to handle multiple different sources pointing to the same target.
+        const byTarget = new Map(); // targetId -> array of pair keys
+        for (const key of groups.keys()) {
+            const [, targetId] = key.split('__');
+            const arr = (_b = byTarget.get(targetId)) !== null && _b !== void 0 ? _b : [];
+            arr.push(key);
+            byTarget.set(targetId, arr);
+        }
+        const rendered = [];
+        const OFFSET_STEP = 8; // px
+        // For each target that has multiple source groups, compute a per-group vertical offset
+        // so the groups themselves are arranged and then individual deps inside each group are
+        // offset relative to their group's offset.
+        const groupOffsets = new Map(); // pairKey -> base offset
+        for (const [targetId, pairKeys] of byTarget.entries()) {
+            if (pairKeys.length === 1)
+                continue;
+            // center the groups around 0
+            const totalGroups = pairKeys.length;
+            for (let i = 0; i < pairKeys.length; i++) {
+                const pk = pairKeys[i];
+                const baseOffset = (i - (totalGroups - 1) / 2) * (OFFSET_STEP * 3);
+                groupOffsets.set(pk, baseOffset);
+            }
+        }
+        for (const [key, deps] of groups.entries()) {
+            const [sourceId, targetId] = key.split('__');
+            // tolerate different id formats: exact, trimmed, and taskId_phaseId (with padded phase ids)
+            let sourceTask = taskById.get(sourceId) ||
+                this.tasks.find((t) => t.id && t.id.trim() === (sourceId + '').trim());
+            // try exact match first
+            let targetTask = taskById.get(targetId) ||
+                this.tasks.find((t) => t.id && t.id.trim() === (targetId + '').trim());
+            // if not found, try combined formats like <taskId>_<phaseId> (with possible padding)
+            if (!targetTask && sourceTask) {
+                const candidate1 = `${sourceTask.id}_${targetId}`;
+                const candidate2 = `${sourceTask.id}_${(targetId + '').trim()}`;
+                targetTask =
+                    taskById.get(candidate1) ||
+                        taskById.get(candidate2) ||
+                        this.tasks.find((t) => t.id &&
+                            (t.id === candidate1 ||
+                                t.id === candidate2 ||
+                                t.id.trim() === candidate2.trim()));
+            }
+            // as a last resort try matching by trimming both sides against all tasks
+            if (!sourceTask || !targetTask) {
+                const trimmedSource = (sourceId + '').trim();
+                const trimmedTarget = (targetId + '').trim();
+                if (!sourceTask) {
+                    sourceTask = this.tasks.find((t) => t.id && t.id.trim() === trimmedSource);
+                }
+                if (!targetTask) {
+                    targetTask = this.tasks.find((t) => t.id && t.id.trim() === trimmedTarget);
+                }
+                // Extra fallback: some dependency definitions use the original row id
+                // (taskRowId) or row-based ids like '1_P410'. Try to resolve those to
+                // the runtime task objects using taskRowId / phaseRowId mappings.
+                try {
+                    // If source is still not found, try to match by taskRowId or taskRow.id
+                    if (!sourceTask) {
+                        sourceTask = this.tasks.find((t) => {
+                            var _a;
+                            return t.taskRowId == sourceId ||
+                                ((_a = t.taskRow) === null || _a === void 0 ? void 0 : _a.id) == sourceId ||
+                                t.phaseRowId == sourceId;
+                        });
+                    }
+                    // If target is not found, handle cases like '1_P410' where the left
+                    // part is the taskRowId and the right part is the phase code. We'll
+                    // try to find a phase whose taskRowId matches the left part and
+                    // whose id ends with the phase suffix.
+                    if (!targetTask) {
+                        const parts = trimmedTarget.split('_');
+                        if (parts.length > 1) {
+                            const left = parts[0];
+                            const right = parts.slice(1).join('_');
+                            targetTask = this.tasks.find((t) => {
+                                var _a;
+                                return (t.taskRowId == left &&
+                                    t.id &&
+                                    t.id.endsWith('_' + right)) ||
+                                    (((_a = t.taskRow) === null || _a === void 0 ? void 0 : _a.id) == left &&
+                                        t.id &&
+                                        t.id.endsWith('_' + right));
+                            });
+                        }
+                        // also try matching target by row id directly
+                        if (!targetTask) {
+                            targetTask = this.tasks.find((t) => {
+                                var _a;
+                                return t.taskRowId == targetId ||
+                                    ((_a = t.taskRow) === null || _a === void 0 ? void 0 : _a.id) == targetId ||
+                                    t.phaseRowId == targetId;
+                            });
+                        }
+                    }
+                }
+                catch (e) {
+                    // ignore matching errors
+                }
+            }
+            if (!sourceTask || !targetTask) {
+                continue;
+            }
+            const total = deps.length;
+            // base offset for this pair (if groups were arranged around the target)
+            const base = (_c = groupOffsets.get(key)) !== null && _c !== void 0 ? _c : 0;
+            deps.forEach((dep, idx) => {
+                // compute offset: center the stack around 0 and add group base offset
+                const intraOffset = (idx - (total - 1) / 2) * OFFSET_STEP;
+                const offset = base + intraOffset;
+                // we will re-use drownPathAndTriangle but need temporary synthetic tasks shifted by offset
+                const shiftedFrom = Object.assign({}, sourceTask);
+                const shiftedTo = Object.assign({}, targetTask);
+                // shift vertically
+                shiftedFrom.y = sourceTask.y + offset;
+                shiftedTo.y = targetTask.y + offset;
+                const [path, trianglePoints] = this.rtl
+                    ? this.drownPathAndTriangleRTL(shiftedFrom, shiftedTo, this.rowHeight, this.taskHeight, this.arrowIndent)
+                    : this.drownPathAndTriangle(shiftedFrom, shiftedTo, this.rowHeight, this.taskHeight, this.arrowIndent);
+                // pick a color for the connector: prefer the source task's color,
+                // then component arrowColor prop, and finally a neutral grey
+                const sourceColor = (sourceTask &&
+                    sourceTask.styles &&
+                    sourceTask.styles.backgroundColor) ||
+                    this.arrowColor ||
+                    '#9e9e9e';
+                rendered.push(h("g", { class: "arrow dependency", "data-dep-id": dep.id }, h("path", { stroke: sourceColor, "stroke-width": "2", d: path, fill: "none" }), h("polygon", { points: trianglePoints, fill: sourceColor, stroke: sourceColor })));
+            });
+        }
+        return rendered;
+    }
     drownPathAndTriangle(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent) {
         const indexCompare = taskFrom.index > taskTo.index ? -1 : 1;
         const taskToEndPosition = taskTo.y + taskHeight / 2;
@@ -509,13 +663,14 @@ export class KupGridRenderer {
             // }
             tickX += this.columnWidth;
         }
-        return (h("svg", { key: '55d4eb1097be961c627e667e1024cf47fb8638fa', 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: '8e4e7083c1c4ddfd4fda90b35d9efb30ed8f9821', class: "grid" }, h("g", { key: '09d4491ce14b43c9851052d902feee615131d9e9', class: "rows" }, gridRows), h("g", { key: 'cad7d7a7d2aac967c4baf70af49c2ed5e40e6970', class: "rowLines" }, rowLines), h("g", { key: 'ccc47da84182fce20f54a4abab278388bfc79ab5', class: "ticks" }, ticks)), h("g", { key: '4627b926c7705b2ecf82aac0fb05c1a9f02013ca', class: "content" }, this.currentDateIndicator && (h("rect", { key: '975e35e5c3b7aea83c8e7406ed885ae25d819300', fill: this.currentDateIndicator.color, x: this.currentDateIndicator.x + 1.5, y: "0", width: "2", height: "100%" })), this.projection && (h("rect", { key: 'f971ab7a63ab6e4dd0f7ce50c8335402d08d9162', 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: '547376a8dc4ee5ff9c9f2d1f908f71ac2d229314', class: "arrows", fill: this.arrowColor, stroke: this.arrowColor }, this.tasks.map((task) => {
+        return (h("svg", { key: '22b83f3b4155e51f56ff19c43e1e935e5b17bf46', 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: '0dc7cb819de38e2defa4e676a3bdf0d9272d681e', class: "grid" }, h("g", { key: 'ec2bcc141732416498c70f20ab7f0ddba112ceeb', class: "rows" }, gridRows), h("g", { key: 'b73233f161cb1fe8289a37e5ab3354d7c8b4e1b3', class: "rowLines" }, rowLines), h("g", { key: '03770a3bebf0d3ba72e4a03b78765a2270cb6b00', class: "ticks" }, ticks)), h("g", { key: '49cc1fec67c34cef6c35ffb78b0485d7a28b021d', class: "content" }, this.currentDateIndicator && (h("rect", { key: '7fc33e726bf3e02336148501d70909093f596946', fill: this.currentDateIndicator.color, x: this.currentDateIndicator.x + 1.5, y: "0", width: "2", height: "100%" })), this.projection && (h("rect", { key: 'c4cb014710c018b196829c84963d10f4e1456dde', 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: '5afa927eb4fb8442c95651d0945ae10249ad962e', class: "arrows", fill: this.arrowColor, stroke: this.arrowColor }, this.renderDependencies(), this.tasks.map((task) => {
             return task.barChildren.map((child) => {
                 if (task.type !== 'timeline') {
-                    this.renderKupArrow(task, child);
+                    return this.renderKupArrow(task, child);
                 }
+                return null;
             });
-        })), h("g", { key: '2013b02ae78d1e0eacaea4b17b134e8b03efdf11', class: "bar", "font-family": this.fontFamily, "font-size": this.fontSize }, this.tasks.map((task) => {
+        })), h("g", { key: '44f3505a327201ebd848dad424b36f9f2efabcde', 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) {
@@ -575,7 +730,7 @@ export class KupGridRenderer {
                         return this.renderKupBar(task, props.isSelected, isDateResizable, isProgressChangeable);
                 }
             })()));
-        }), this.currentTarget && this.ganttEvent.changedTask && (h("g", { key: '1b89a87d8bae74bae83018b25ca741bf843f29a3', class: "task-wrapper" }, this.renderKupBar(this.ganttEvent.changedTask, false, false, false)))))));
+        }), this.currentTarget && this.ganttEvent.changedTask && (h("g", { key: '91675894e3ba24a00fa9ef59e8c3af0dc03b3e4c', class: "task-wrapper" }, this.renderKupBar(this.ganttEvent.changedTask, false, false, false)))))));
     }
     static get is() { return "kup-grid-renderer"; }
     static get originalStyleUrls() {
@@ -1004,6 +1159,28 @@ export class KupGridRenderer {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "dependencies": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerDependency[]",
+                    "resolved": "KupPlannerDependency[]",
+                    "references": {
+                        "KupPlannerDependency": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerDependency"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "[]"
+            },
             "gridProps": {
                 "type": "unknown",
                 "mutable": false,