@sme.up/ketchup 10.1.2 → 10.1.5

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,

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

@@ -229,7 +229,7 @@ export class KupPlannerRenderer {
             } }), this.props && (h("div", { key: 'a07185cd6be444510aef8c07eef0a9afe72d9fd6', style: {
                 display: 'flex',
                 flexDirection: 'column',
-            } }, h("kup-gantt", Object.assign({ ref: (el) => (this.mainGantt = el), ganttId: KUP_PLANNER_MAIN_GANTT_ID, key: KUP_PLANNER_MAIN_GANTT_ID, filter: this.props.mainGantt.filter, hideLabel: this.props.mainGantt.hideLabel, showSecondaryDates: this.mainGanttDoubleView, hideDependencies: this.props.mainGantt.hideDependencies, ganttHeight: this.props.mainGantt.ganttHeight, displayedStartDate: this.displayedDates.displayedStartDate, displayedEndDate: this.displayedDates.displayedEndDate, viewDate: this.viewDate, tasks: this.tasks, columnWidth: columnWidthForTimeUnit(this.timeUnit), viewMode: this.timeUnit }, this.props.mainGantt.stylingOptions, { TaskListHeader: this.props.mainGantt.taskListHeaderProject, TaskListTable: this.props.mainGantt.taskListTableProject, TooltipContent: (_a = this.props.mainGantt.tooltipContent) !== null && _a !== void 0 ? _a : CustomTooltipHOC(), barClick: (task) => {
+            } }, h("kup-gantt", Object.assign({ ref: (el) => (this.mainGantt = el), ganttId: KUP_PLANNER_MAIN_GANTT_ID, key: KUP_PLANNER_MAIN_GANTT_ID, filter: this.props.mainGantt.filter, hideLabel: this.props.mainGantt.hideLabel, showSecondaryDates: this.mainGanttDoubleView, hideDependencies: this.props.mainGantt.hideDependencies, ganttHeight: this.props.mainGantt.ganttHeight, displayedStartDate: this.displayedDates.displayedStartDate, displayedEndDate: this.displayedDates.displayedEndDate, viewDate: this.viewDate, tasks: this.tasks, columnWidth: columnWidthForTimeUnit(this.timeUnit), viewMode: this.timeUnit, dependencies: this.props.mainGantt.dependencies }, this.props.mainGantt.stylingOptions, { TaskListHeader: this.props.mainGantt.taskListHeaderProject, TaskListTable: this.props.mainGantt.taskListTableProject, TooltipContent: (_a = this.props.mainGantt.tooltipContent) !== null && _a !== void 0 ? _a : CustomTooltipHOC(), barClick: (task) => {
                 let row = getProjectById(task.id, this.currentTasks);
                 if (!row) {
                     row = getPhaseById(task.id, this.currentTasks);
@@ -261,7 +261,7 @@ export class KupPlannerRenderer {
                 this.handlePhaseDrop(originalPhase, 
                 // originalTask,
                 finalPhaseData, destinationTask, this.props.mainGantt.onPhaseDrop);
-            } })), this.props.secondaryGantt && (h("kup-gantt", Object.assign({ ref: (el) => (this.secondaryGantt = el), ganttId: KUP_PLANNER_SECONDARY_GANTT_ID, key: KUP_PLANNER_SECONDARY_GANTT_ID, filter: this.props.secondaryGantt.filter, hideLabel: this.props.secondaryGantt.hideLabel, showSecondaryDates: this.mainGanttDoubleView, hideDependencies: this.props.secondaryGantt.hideDependencies, ganttHeight: this.props.secondaryGantt.ganttHeight, displayedStartDate: this.displayedDates.displayedStartDate, displayedEndDate: this.displayedDates.displayedEndDate, viewDate: this.viewDate, tasks: this.details, columnWidth: columnWidthForTimeUnit(this.timeUnit), viewMode: this.timeUnit }, this.props.secondaryGantt.stylingOptions, { TaskListHeader: this.props.secondaryGantt
+            } })), this.props.secondaryGantt && (h("kup-gantt", Object.assign({ ref: (el) => (this.secondaryGantt = el), ganttId: KUP_PLANNER_SECONDARY_GANTT_ID, key: KUP_PLANNER_SECONDARY_GANTT_ID, filter: this.props.secondaryGantt.filter, hideLabel: this.props.secondaryGantt.hideLabel, showSecondaryDates: this.mainGanttDoubleView, hideDependencies: this.props.secondaryGantt.hideDependencies, ganttHeight: this.props.secondaryGantt.ganttHeight, displayedStartDate: this.displayedDates.displayedStartDate, displayedEndDate: this.displayedDates.displayedEndDate, viewDate: this.viewDate, tasks: this.details, columnWidth: columnWidthForTimeUnit(this.timeUnit), viewMode: this.timeUnit, dependencies: this.props.secondaryGantt.dependencies }, this.props.secondaryGantt.stylingOptions, { TaskListHeader: this.props.secondaryGantt
                 .taskListHeaderProject, TaskListTable: this.props.secondaryGantt
                 .taskListTableProject, TooltipContent: (_c = this.props.secondaryGantt.tooltipContent) !== null && _c !== void 0 ? _c : CustomTooltipHOC(), projection: this.projection, barClick: (task) => {
                 if (this.props.secondaryGantt) {

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

@@ -33,13 +33,13 @@ export class TaskGantt {
         }, 75);
     }
     render() {
-        const newBarProps = Object.assign(Object.assign({}, this.barProps), { gridProps: this.gridProps, phaseDragScroll: this.phaseDragScroll });
-        return (h("div", { key: 'e9b7f7f147fae5077c4b17232661030262170a76', class: "ganttVerticalContainer", ref: (el) => (this.verticalGanttContainerRef = el), dir: "ltr" }, h("kup-gantt-calendar", { key: '6575335f2a55573ad95089af45dc3dbf4292f37c', dateSetup: this.calendarProps.dateSetup, locale: this.calendarProps.locale, rtl: this.calendarProps.rtl, headerHeight: this.calendarProps.headerHeight, columnWidth: this.calendarProps.columnWidth, fontFamily: this.calendarProps.fontFamily, fontSize: this.calendarProps.fontSize, dateTimeFormatters: this.calendarProps.dateTimeFormatters, singleLineHeader: this.calendarProps.singleLineHeader, currentDateIndicator: this.calendarProps.currentDateIndicator, svgWidth: this.gridProps.svgWidth }), h("div", { key: 'ec7b2e3f28ada7ac48c92686888b2b17898e2252', ref: (el) => (this.horizontalContainerRef = el), class: "horizontalContainer", style: this.ganttHeight
+        const newBarProps = Object.assign(Object.assign({}, this.barProps), { gridProps: this.gridProps, phaseDragScroll: this.phaseDragScroll, dependencies: this.barProps.dependencies || [] });
+        return (h("div", { key: 'f171a1dc93bb1bee342dc2384c5eda5a0a1670a5', class: "ganttVerticalContainer", ref: (el) => (this.verticalGanttContainerRef = el), dir: "ltr" }, h("kup-gantt-calendar", { key: '8df97b74146bc84af4a20d704efeb5d17202bfee', dateSetup: this.calendarProps.dateSetup, locale: this.calendarProps.locale, rtl: this.calendarProps.rtl, headerHeight: this.calendarProps.headerHeight, columnWidth: this.calendarProps.columnWidth, fontFamily: this.calendarProps.fontFamily, fontSize: this.calendarProps.fontSize, dateTimeFormatters: this.calendarProps.dateTimeFormatters, singleLineHeader: this.calendarProps.singleLineHeader, currentDateIndicator: this.calendarProps.currentDateIndicator, svgWidth: this.gridProps.svgWidth }), h("div", { key: '1295b8511846e0de6f45d13f765124ec750ededb', ref: (el) => (this.horizontalContainerRef = el), class: "horizontalContainer", style: this.ganttHeight
                 ? {
                     height: `${this.ganttHeight}px`,
                     width: `${this.gridProps.svgWidth}px`,
                 }
-                : { width: `${this.gridProps.svgWidth}px` } }, h("kup-grid-renderer", Object.assign({ key: '98ed84972a106b35ea7ba6a380d83e025a635ebd' }, newBarProps)))));
+                : { width: `${this.gridProps.svgWidth}px` } }, h("kup-grid-renderer", Object.assign({ key: '7a35e55a9dff2cef220055a55d71eccf6a1e0801' }, newBarProps)))));
     }
     static get is() { return "kup-task-gantt"; }
     static get properties() {
@@ -91,7 +91,7 @@ export class TaskGantt {
                 "mutable": false,
                 "complexType": {
                     "original": "KupPlannerTaskGanttProps['barProps']",
-                    "resolved": "{ tasks: KupPlannerBarTask[]; dates: Date[]; ganttEvent: KupPlannerGanttEvent; selectedTask: KupPlannerBarTask; rowHeight: number; columnWidth: number; timeStep: number; svg?: SVGSVGElement; svgWidth: number; taskHeight: number; arrowColor: string; arrowIndent: number; fontSize: string; fontFamily: string; rtl: boolean; ganttHeight: number; hideLabel?: boolean; showSecondaryDates?: boolean; currentDateIndicator?: KupPlannerCurrentDateIndicator; projection?: { x0: number; xf: number; color: string; }; readOnly: boolean; setGanttEvent: (value: KupPlannerGanttEvent) => void; setFailedTask: (value: KupPlannerBarTask) => void; setSelectedTask: (taskId: string) => void; } & KupPlannerEventOption",
+                    "resolved": "{ dependencies: KupPlannerDependency[]; tasks: KupPlannerBarTask[]; dates: Date[]; ganttEvent: KupPlannerGanttEvent; selectedTask: KupPlannerBarTask; rowHeight: number; columnWidth: number; timeStep: number; svg?: SVGSVGElement; svgWidth: number; taskHeight: number; arrowColor: string; arrowIndent: number; fontSize: string; fontFamily: string; rtl: boolean; ganttHeight: number; hideLabel?: boolean; showSecondaryDates?: boolean; currentDateIndicator?: KupPlannerCurrentDateIndicator; projection?: { x0: number; xf: number; color: string; }; readOnly: boolean; setGanttEvent: (value: KupPlannerGanttEvent) => void; setFailedTask: (value: KupPlannerBarTask) => void; setSelectedTask: (taskId: string) => void; } & KupPlannerEventOption",
                     "references": {
                         "KupPlannerTaskGanttProps": {
                             "location": "import",

package/dist/collection/components/kup-planner/utils/kup-task-list/kup-task-list.css

@@ -131,6 +131,7 @@
   border-radius: var(--kup-radius-00);
   padding: var(--kup-space-05);
   margin-right: var(--kup-space-05);
+  min-width: 25%;
 }
 
 .taskListWrapper {

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

@@ -1,4 +1,4 @@
-import { K as KupCustomTaskListTable$1, d as defineCustomElement$1 } from './p-0e6c0355.js';
+import { K as KupCustomTaskListTable$1, d as defineCustomElement$1 } from './p-9c8c4e2e.js';
 
 const KupCustomTaskListTable = KupCustomTaskListTable$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kup-gantt.js

@@ -1,4 +1,4 @@
-import { K as KupGantt$1, d as defineCustomElement$1 } from './p-9da8cd93.js';
+import { K as KupGantt$1, d as defineCustomElement$1 } from './p-5cbf86c3.js';
 
 const KupGantt = KupGantt$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { K as KupGridRenderer$1, d as defineCustomElement$1 } from './p-c43d08ab.js';
+import { K as KupGridRenderer$1, d as defineCustomElement$1 } from './p-d72814f5.js';
 
 const KupGridRenderer = KupGridRenderer$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { K as KupPlannerRenderer$1, d as defineCustomElement$1 } from './p-2fff7268.js';
+import { K as KupPlannerRenderer$1, d as defineCustomElement$1 } from './p-45cdd2a4.js';
 
 const KupPlannerRenderer = KupPlannerRenderer$1;
 const defineCustomElement = defineCustomElement$1;