@sme.up/ketchup 10.1.2 → 10.1.5

package/dist/esm/kup-custom-task-list-header_4.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, h, F as Fragment } from './index-c9246a86.js';
 import { a as KupDates, c as commonjsGlobal } from './kup-dates-da19044e.js';
-import { d as createArrayFromNum, i as isKeyboardEvent, g as getProgressPoint, h as handleTaskBySVGMouseEvent } from './bar.helpers-23a51579.js';
+import { d as createArrayFromNum, i as isKeyboardEvent, g as getProgressPoint, h as handleTaskBySVGMouseEvent } from './other.helpers-83e3225b.js';
 import { d as defaultDateTimeFormatters, a as getDaysInMonth, b as getCachedDateTimeFormat, c as getLocalDayOfWeek, e as getLocaleMonth } from './kup-planner-time-formatter-ddf84f9b.js';
-import { d as defaultStylingOptions } from './kup-planner-declarations-0704bc6c.js';
+import { d as defaultStylingOptions } from './kup-planner-declarations-5981474b.js';
 
 const customTaskListHeaderModuleCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}.custom-task-list-wrapper{display:flex;justify-content:space-around;max-width:330px;place-items:\"center\";text-align:center;align-items:center}.title{font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toggler{max-width:max-content;padding:0 4px;text-align:right}.switch{position:relative;display:inline-block;width:30px;height:17px}.input{opacity:0;width:0;height:0}.input:checked+.slider{background-color:#003b77}.input:checked+.slider:before{-webkit-transform:translateX(13px);-ms-transform:translateX(13px);transform:translateX(13px)}.input:focus+.slider{box-shadow:0 0 1px #003b77}.slider{-webkit-transition:0.4s;cursor:pointer;background-color:#ccc;bottom:0;border-radius:17px;left:0;position:absolute;right:0;top:0;transition:0.4s}.slider:before{-webkit-transition:0.1s;background-color:white;border-radius:50%;bottom:2px;content:\"\";height:13px;left:2px;position:absolute;transition:0.1s;width:13px}.label{font-size:12px;padding:6px}.filter{font-size:12px}";
 const KupCustomTaskListHeaderStyle0 = customTaskListHeaderModuleCss;
@@ -56,17 +56,25 @@ const KupCustomTaskListTable = class {
     }
     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: {
@@ -90,10 +98,14 @@ const KupCustomTaskListTable = class {
                     ? 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,
@@ -125,10 +137,16 @@ const KupCustomTaskListTable = class {
                     ? 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++) {
@@ -959,6 +977,7 @@ const KupGridRenderer = class {
         this.currentDateIndicator = undefined;
         this.projection = undefined;
         this.readOnly = false;
+        this.dependencies = [];
         this.gridProps = undefined;
         this.dateChange = undefined;
         this.progressChange = undefined;
@@ -1355,6 +1374,159 @@ const KupGridRenderer = class {
             : 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;
@@ -1445,13 +1617,14 @@ const KupGridRenderer = class {
             // }
             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) {
@@ -1511,7 +1684,7 @@ const KupGridRenderer = class {
                         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 watchers() { return {
         "columnWidth": ["updateXStep"],

package/dist/esm/kup-gantt_10.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, f as forceUpdate, d as getElement, F as Fragment } from './index-c9246a86.js';
+import { r as removeHiddenTasks, s as sortTasks, c as convertToBarTasks, a as calculateCurrentDateCalculator, b as calculateProjection } from './other.helpers-83e3225b.js';
 import { f as ganttDateRangeFromTask, s as seedDates, g as getPhaseById, b as getProjectById } from './kup-planner-renderer-helper-4952d0a1.js';
-import { r as removeHiddenTasks, s as sortTasks, c as convertToBarTasks, a as calculateCurrentDateCalculator, b as calculateProjection } from './bar.helpers-23a51579.js';
-import { e as KUP_PLANNER_MAIN_GANTT_ID } from './kup-planner-declarations-0704bc6c.js';
+import { e as KUP_PLANNER_MAIN_GANTT_ID } from './kup-planner-declarations-5981474b.js';
 import './kup-dates-da19044e.js';
 
 const kupGanttCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}.wrapper{display:flex;padding:0;margin:0;list-style:none;outline:none;position:relative}.ganttContainer{background:var(--kup-layer-2);border-radius:var(--kup-radius-00);overflow:hidden;padding:var(--kup-space-05)}.ganttVerticalContainer{overflow:hidden;font-size:0;margin:0;padding:0}.horizontalContainer{margin:0;padding:0;overflow:hidden}.horizontalContainerScrollable{overflow:auto !important;scrollbar-width:0}.horizontalContainerScrollable::-webkit-scrollbar{width:0;height:0}.task-gantt{overflow:hidden}";
@@ -51,6 +51,7 @@ const KupGantt = class {
         this.hideLabel = false;
         this.showSecondaryDates = false;
         this.hideDependencies = false;
+        this.dependencies = [];
         this.projection = undefined;
         this.displayedStartDate = undefined;
         this.displayedEndDate = undefined;
@@ -538,6 +539,7 @@ const KupGantt = class {
             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),
@@ -548,7 +550,7 @@ const KupGantt = class {
             barDblClick: this.barDblClick,
             barContextMenu: this.barContextMenu,
             delete: this.delete,
-            phaseDrop: this.phaseDrop
+            phaseDrop: this.phaseDrop,
         };
         const tableProps = {
             rowHeight: this.rowHeight,
@@ -567,11 +569,11 @@ const KupGantt = class {
             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 }))));
     }
     get rootElement() { return getElement(this); }
     static get watchers() { return {
@@ -785,13 +787,13 @@ const TaskGantt = class {
         }, 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)))));
     }
     get rootElement() { return getElement(this); }
     static get watchers() { return {
@@ -802,7 +804,7 @@ const TaskGantt = class {
     }; }
 };
 
-const kupTaskListCss$2 = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}.tasks{background:var(--kup-layer-2);border-radius:var(--kup-radius-00);padding:var(--kup-space-05);margin-right:var(--kup-space-05)}.taskListWrapper{display:table;border-bottom:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}.taskListTableRow{display:table-row;text-overflow:ellipsis}.taskListCell{display:table-cell;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.taskListNameWrapper{display:flex}.taskListExpander{color:rgb(86, 86, 86);font-size:0.6rem;padding:0.15rem 0.2rem 0 0.2rem;user-select:none;cursor:pointer}.taskListEmptyExpander{font-size:0.6rem;padding-left:1rem;user-select:none}.ganttTable{display:table;border-bottom:#e6e4e4 1px solid;border-top:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}.ganttTable_Header{display:table-row;list-style:none}.ganttTable_HeaderSeparator{border-right:1px solid rgb(196, 196, 196);opacity:1;margin-left:-2px}.ganttTable_HeaderItem{display:table-cell;vertical-align:-webkit-baseline-middle;vertical-align:middle}";
+const kupTaskListCss$2 = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}.tasks{background:var(--kup-layer-2);border-radius:var(--kup-radius-00);padding:var(--kup-space-05);margin-right:var(--kup-space-05);min-width:25%}.taskListWrapper{display:table;border-bottom:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}.taskListTableRow{display:table-row;text-overflow:ellipsis}.taskListCell{display:table-cell;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.taskListNameWrapper{display:flex}.taskListExpander{color:rgb(86, 86, 86);font-size:0.6rem;padding:0.15rem 0.2rem 0 0.2rem;user-select:none;cursor:pointer}.taskListEmptyExpander{font-size:0.6rem;padding-left:1rem;user-select:none}.ganttTable{display:table;border-bottom:#e6e4e4 1px solid;border-top:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}.ganttTable_Header{display:table-row;list-style:none}.ganttTable_HeaderSeparator{border-right:1px solid rgb(196, 196, 196);opacity:1;margin-left:-2px}.ganttTable_HeaderItem{display:table-cell;vertical-align:-webkit-baseline-middle;vertical-align:middle}";
 const KupTaskListStyle0 = kupTaskListCss$2;
 
 const TaskList = class {
@@ -928,7 +930,7 @@ const TaskList = class {
 };
 TaskList.style = KupTaskListStyle0;
 
-const kupTaskListCss$1 = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}.tasks{background:var(--kup-layer-2);border-radius:var(--kup-radius-00);padding:var(--kup-space-05);margin-right:var(--kup-space-05)}.taskListWrapper{display:table;border-bottom:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}.taskListTableRow{display:table-row;text-overflow:ellipsis}.taskListCell{display:table-cell;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.taskListNameWrapper{display:flex}.taskListExpander{color:rgb(86, 86, 86);font-size:0.6rem;padding:0.15rem 0.2rem 0 0.2rem;user-select:none;cursor:pointer}.taskListEmptyExpander{font-size:0.6rem;padding-left:1rem;user-select:none}.ganttTable{display:table;border-bottom:#e6e4e4 1px solid;border-top:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}.ganttTable_Header{display:table-row;list-style:none}.ganttTable_HeaderSeparator{border-right:1px solid rgb(196, 196, 196);opacity:1;margin-left:-2px}.ganttTable_HeaderItem{display:table-cell;vertical-align:-webkit-baseline-middle;vertical-align:middle}";
+const kupTaskListCss$1 = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}.tasks{background:var(--kup-layer-2);border-radius:var(--kup-radius-00);padding:var(--kup-space-05);margin-right:var(--kup-space-05);min-width:25%}.taskListWrapper{display:table;border-bottom:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}.taskListTableRow{display:table-row;text-overflow:ellipsis}.taskListCell{display:table-cell;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.taskListNameWrapper{display:flex}.taskListExpander{color:rgb(86, 86, 86);font-size:0.6rem;padding:0.15rem 0.2rem 0 0.2rem;user-select:none;cursor:pointer}.taskListEmptyExpander{font-size:0.6rem;padding-left:1rem;user-select:none}.ganttTable{display:table;border-bottom:#e6e4e4 1px solid;border-top:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}.ganttTable_Header{display:table-row;list-style:none}.ganttTable_HeaderSeparator{border-right:1px solid rgb(196, 196, 196);opacity:1;margin-left:-2px}.ganttTable_HeaderItem{display:table-cell;vertical-align:-webkit-baseline-middle;vertical-align:middle}";
 const KupTaskListHeaderStyle0 = kupTaskListCss$1;
 
 const KupTaskListHeader = class {
@@ -962,7 +964,7 @@ const KupTaskListHeader = class {
 };
 KupTaskListHeader.style = KupTaskListHeaderStyle0;
 
-const kupTaskListCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}.tasks{background:var(--kup-layer-2);border-radius:var(--kup-radius-00);padding:var(--kup-space-05);margin-right:var(--kup-space-05)}.taskListWrapper{display:table;border-bottom:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}.taskListTableRow{display:table-row;text-overflow:ellipsis}.taskListCell{display:table-cell;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.taskListNameWrapper{display:flex}.taskListExpander{color:rgb(86, 86, 86);font-size:0.6rem;padding:0.15rem 0.2rem 0 0.2rem;user-select:none;cursor:pointer}.taskListEmptyExpander{font-size:0.6rem;padding-left:1rem;user-select:none}.ganttTable{display:table;border-bottom:#e6e4e4 1px solid;border-top:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}.ganttTable_Header{display:table-row;list-style:none}.ganttTable_HeaderSeparator{border-right:1px solid rgb(196, 196, 196);opacity:1;margin-left:-2px}.ganttTable_HeaderItem{display:table-cell;vertical-align:-webkit-baseline-middle;vertical-align:middle}";
+const kupTaskListCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}.tasks{background:var(--kup-layer-2);border-radius:var(--kup-radius-00);padding:var(--kup-space-05);margin-right:var(--kup-space-05);min-width:25%}.taskListWrapper{display:table;border-bottom:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}.taskListTableRow{display:table-row;text-overflow:ellipsis}.taskListCell{display:table-cell;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.taskListNameWrapper{display:flex}.taskListExpander{color:rgb(86, 86, 86);font-size:0.6rem;padding:0.15rem 0.2rem 0 0.2rem;user-select:none;cursor:pointer}.taskListEmptyExpander{font-size:0.6rem;padding-left:1rem;user-select:none}.ganttTable{display:table;border-bottom:#e6e4e4 1px solid;border-top:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}.ganttTable_Header{display:table-row;list-style:none}.ganttTable_HeaderSeparator{border-right:1px solid rgb(196, 196, 196);opacity:1;margin-left:-2px}.ganttTable_HeaderItem{display:table-cell;vertical-align:-webkit-baseline-middle;vertical-align:middle}";
 const KupTaskListTableStyle0 = kupTaskListCss;
 
 const TaskListTableDefault = class {

package/dist/esm/{kup-planner-declarations-0704bc6c.js → kup-planner-declarations-5981474b.js}

@@ -83,7 +83,7 @@ const defaultStylingOptions = {
     barProgressSelectedColor: '#A2A415',
     barBackgroundColor: '#A2A415',
     barBackgroundSelectedColor: '#A2A415',
-    barDropZoneColor: '#4d9f0240'
+    barDropZoneColor: '#4d9f0240',
 };
 const KUP_PLANNER_MAIN_GANTT_ID = 'main';
 const KUP_PLANNER_SECONDARY_GANTT_ID = 'secondary';

package/dist/esm/kup-planner-renderer.entry.js

@@ -1,6 +1,6 @@
 import { h, r as registerInstance, d as getElement } from './index-c9246a86.js';
 import { c as calculateDisplayedDateRange, a as convertProjectToTasks, g as getPhaseById, m as mergeTaskIntoProjects, b as getProjectById, d as mergeTaskIntoPhases, e as columnWidthForTimeUnit } from './kup-planner-renderer-helper-4952d0a1.js';
-import { e as KUP_PLANNER_MAIN_GANTT_ID, f as KUP_PLANNER_SECONDARY_GANTT_ID } from './kup-planner-declarations-0704bc6c.js';
+import { e as KUP_PLANNER_MAIN_GANTT_ID, f as KUP_PLANNER_SECONDARY_GANTT_ID } from './kup-planner-declarations-5981474b.js';
 import { a as KupDates } from './kup-dates-da19044e.js';
 import { g as ganttDateTimeFormatters } from './kup-planner-time-formatter-ddf84f9b.js';
 
@@ -235,7 +235,7 @@ const KupPlannerRenderer = class {
             } }), 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);
@@ -267,7 +267,7 @@ const KupPlannerRenderer = class {
                 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) {