@sme.up/ketchup 9.6.4 → 9.6.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-460631fd.js';
 import { b as KupDates, c as commonjsGlobal } from './kup-dates-26a56bf7.js';
-import { d as defaultDateTimeFormatters, a as getDaysInMonth } from './kup-planner-time-formatter-a68e05ba.js';
-import { h as addToDate } from './kup-planner-renderer-helper-b4727e44.js';
-import { i as isKeyboardEvent, g as getProgressPoint, h as handleTaskBySVGMouseEvent } from './bar.helpers-0898efb9.js';
+import { d as createArrayFromNum, i as isKeyboardEvent, g as getProgressPoint, h as handleTaskBySVGMouseEvent } from './bar.helpers-23a51579.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-398babf9.js';
 
 const customTaskListHeaderModuleCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);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;
@@ -26,7 +26,7 @@ const KupCustomTaskListHeader = class {
 };
 KupCustomTaskListHeader.style = KupCustomTaskListHeaderStyle0;
 
-const ganttTableModuleCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);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}.container{padding:0 10px;margin-right:10px}.project{background:var(--kup-background-color, #ffffff);border:1px solid var(--kup-border-color, #acacac);border-radius:4px;box-sizing:border-box;color:var(--kup-text-color, #595959);cursor:pointer;display:grid;font-weight:400;grid-template-columns:var(--grid-project-columns, 1fr 1fr 1fr);place-items:center}.project>*{font-size:14px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.project .main{font-weight:700;width:100%;padding-left:4px}.subrow{cursor:pointer;display:grid;border-width:1px;border-style:solid;border-color:#acacac;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-sizing:border-box;grid-template-columns:var(--grid-fasi-columns, 1fr 1fr 1fr);place-items:center;background:#ffffff;color:#595959;font-weight:400}.subrow>*{font-size:12px;line-height:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%}.subrow:has(+.subrow),.project:has(+.subrow){border-bottom-left-radius:0;border-bottom-right-radius:0}.timeline{cursor:pointer;display:grid;border-width:1px;border-style:solid;border-color:#cbcbcb;border-radius:4px;grid-template-columns:var(--grid-fasi-columns, 1fr 1fr 1fr);place-items:center;background:#fff;color:#595959;font-weight:400;box-sizing:border-box}.timeline>*{font-size:14px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.timeline .main{font-weight:700;width:100%;padding-left:4px}";
+const ganttTableModuleCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);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}.container{padding:0 10px;margin-right:10px}.scrollable{overflow-x:auto;scrollbar-width:0}.scrollable .project-wrapper{display:table}.scrollable .project{width:100% !important;display:table-row}.scrollable .project>*{overflow:unset;padding-right:10px;display:table-cell;vertical-align:middle;border-bottom:1px solid var(--kup-border-color, #acacac);border-top:1px solid var(--kup-border-color, #acacac);padding-left:12px}.scrollable .project>*:first-child{border-left:1px solid var(--kup-border-color, #acacac);border-bottom-left-radius:4px;border-top-left-radius:4px}.scrollable .project>*:last-child{border-right:1px solid var(--kup-border-color, #acacac);border-bottom-right-radius:4px;border-top-right-radius:4px}.scrollable .subrow{width:100% !important;display:table-row}.scrollable .subrow>*{overflow:unset;padding-right:10px;display:table-cell;vertical-align:middle;border-bottom:1px solid #acacac;border-top:1px solid #acacac;padding-left:12px}.scrollable .subrow>*:first-child{border-left:1px solid #acacac}.scrollable .subrow>*:last-child{border-right:1px solid #acacac}.scrollable .timeline{width:100% !important;display:table-row}.scrollable .timeline>*{overflow:unset;padding-right:10px;display:table-cell;vertical-align:middle;border-bottom:1px solid #acacac;border-top:1px solid #acacac;padding-left:12px}.scrollable .timeline>*:first-child{border-left:1px solid #acacac}.scrollable .timeline>*:last-child{border-right:1px solid #acacac}.scrollable .project:has(+.subrow)>*{border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollable::-webkit-scrollbar{width:0;height:0}.project{background:var(--kup-background-color, #ffffff);border:1px solid var(--kup-border-color, #acacac);border-radius:4px;box-sizing:border-box;color:var(--kup-text-color, #595959);cursor:pointer;display:grid;font-weight:400;grid-template-columns:var(--grid-project-columns, 1fr 1fr 1fr);place-items:center}.project>*{font-size:14px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.project .main{font-weight:700;width:100%;padding-left:4px}.subrow{cursor:pointer;display:grid;border-width:1px;border-style:solid;border-color:#acacac;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-sizing:border-box;grid-template-columns:var(--grid-fasi-columns, 1fr 1fr 1fr);place-items:center;background:#ffffff;color:#595959;font-weight:400}.subrow>*{font-size:12px;line-height:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%}.subrow:has(+.subrow),.project:has(+.subrow){border-bottom-left-radius:0 !important;border-bottom-right-radius:0 !important}.timeline{cursor:pointer;display:grid;border-width:1px;border-style:solid;border-color:#cbcbcb;border-radius:4px;grid-template-columns:var(--grid-fasi-columns, 1fr 1fr 1fr);place-items:center;background:#fff;color:#595959;font-weight:400;box-sizing:border-box}.timeline>*{font-size:14px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.timeline .main{font-weight:700;width:100%;padding-left:4px}";
 const KupCustomTaskListTableStyle0 = ganttTableModuleCss;
 
 const KupCustomTaskListTable = class {
@@ -38,15 +38,37 @@ const KupCustomTaskListTable = class {
         this.rowWidth = '';
         this.fontFamily = '';
         this.fontSize = '';
+        this.scrollableTaskList = undefined;
+        this.taskListScrollX = undefined;
         this.setSelectedTask = undefined;
         this.onclickTaskList = undefined;
         this.ondblclickTaskList = undefined;
         this.oncontextmenuTaskList = undefined;
+        this.ontaskListScrollWidth = undefined;
+    }
+    componentDidLoad() {
+        var _a;
+        this.ontaskListScrollWidth((_a = this.projectWrapperRef) === null || _a === void 0 ? void 0 : _a.clientWidth);
+    }
+    componentDidUpdate() {
+        var _a;
+        this.ontaskListScrollWidth((_a = this.projectWrapperRef) === null || _a === void 0 ? void 0 : _a.clientWidth);
+    }
+    updateTaskListScroll() {
+        this.projectWrapperRef &&
+            (this.projectWrapperRef.parentElement.scrollLeft = this.taskListScrollX);
     }
     render() {
         const kupDates = new KupDates();
-        return (h("div", { key: '6f208e493d948891975d12cfa398634ead8f7631', class: "container" }, this.tasks.map((task) => {
-            var _a, _b, _c;
+        const scrollableStyle = {};
+        if (this.scrollableTaskList) {
+            scrollableStyle['width'] = this.rowWidth;
+        }
+        const spansToShow = this.tasks.reduce((prev, curr) => {
+            return prev.valuesToShow.length > curr.valuesToShow.length ? prev : curr;
+        }).valuesToShow.length + 1;
+        return (h("div", { class: `container ${this.scrollableTaskList ? 'scrollable' : ''}`, style: scrollableStyle }, h("div", { class: "project-wrapper", ref: (el) => (this.projectWrapperRef = el) }, this.tasks.map((task) => {
+            var _a, _b, _c, _d;
             return (h(Fragment, null, task.type === 'project' ? (h("div", { class: "project", style: {
                     height: `${this.rowHeight}px`,
                     width: this.rowWidth,
@@ -63,11 +85,15 @@ const KupCustomTaskListTable = class {
                     e.preventDefault();
                     this.setSelectedTask(task.id);
                     this.oncontextmenuTaskList(e, task.id);
-                } }, (_a = task.valuesToShow) === null || _a === void 0 ? void 0 : _a.map((v, index) => (h("span", { class: index === 0 ? 'main' : undefined, title: v.length > 10 ? v : undefined, key: `task_${task.id}_valuesToShow_${index}` }, v === '#START#'
-                ? kupDates.formatToLocaleSimple(task.start)
-                : v === '#END#'
-                    ? kupDates.formatToLocaleSimple(task.end)
-                    : v))))) : task.type === 'task' ? (h("div", { class: "subrow", style: {
+                } }, (_a = task.valuesToShow) === null || _a === void 0 ? void 0 :
+                _a.map((v, index) => (h("span", { class: index === 0 ? 'main' : undefined, title: v.length > 10 ? v : undefined, key: `task_${task.id}_valuesToShow_${index}` }, v === '#START#'
+                    ? kupDates.formatToLocaleSimple(task.start)
+                    : v === '#END#'
+                        ? kupDates.formatToLocaleSimple(task.end)
+                        : v))), this.scrollableTaskList && spansToShow > task.valuesToShow.length && ((() => {
+                const spansToIterate = createArrayFromNum(spansToShow - task.valuesToShow.length);
+                return (spansToIterate.map((element) => (h("span", { key: element }))));
+            })()))) : task.type === 'task' ? (h("div", { class: "subrow", style: {
                     height: `${this.rowHeight}px`,
                     width: this.rowWidth,
                     fontFamily: this.fontFamily,
@@ -83,16 +109,26 @@ const KupCustomTaskListTable = class {
                     e.preventDefault();
                     this.setSelectedTask(task.id);
                     this.oncontextmenuTaskList(e, task.id);
+                } }, this.scrollableTaskList ? (h("div", { style: {
+                    textAlign: 'end',
                 } }, h("span", { key: `phase_${task.id}_valuesToShow_color`, style: {
                     height: '16px',
                     width: '16px',
+                    display: 'inline-block',
                     backgroundColor: (_b = task.styles) === null || _b === void 0 ? void 0 : _b.backgroundColor,
-                } }), (_c = task.valuesToShow) === null || _c === void 0 ? void 0 :
-                _c.map((v, index) => (h("span", { class: index === 0 ? 'main' : undefined, title: v.length > 10 ? v : undefined, key: `phase_${task.id}_valuesToShow_${index}` }, v === '#START#'
+                } }))) : (h("span", { key: `phase_${task.id}_valuesToShow_color`, style: {
+                    height: '16px',
+                    width: '16px',
+                    backgroundColor: (_c = task.styles) === null || _c === void 0 ? void 0 : _c.backgroundColor,
+                } })), (_d = task.valuesToShow) === null || _d === void 0 ? void 0 :
+                _d.map((v, index) => (h("span", { class: index === 0 ? 'main' : undefined, title: v.length > 10 ? v : undefined, key: `phase_${task.id}_valuesToShow_${index}` }, v === '#START#'
                     ? kupDates.formatToLocaleSimple(task.start)
                     : v === '#END#'
                         ? kupDates.formatToLocaleSimple(task.end)
-                        : v))))) : ((() => {
+                        : v))), this.scrollableTaskList && spansToShow > task.valuesToShow.length && ((() => {
+                const spansToIterate = createArrayFromNum(spansToShow - task.valuesToShow.length - 1);
+                return (spansToIterate.map((element) => (h("span", { key: element }))));
+            })()))) : ((() => {
                 var _a;
                 let str = '';
                 for (let i = 0; i < task.valuesToShow.length; i++) {
@@ -114,8 +150,11 @@ const KupCustomTaskListTable = class {
                         ? v
                         : undefined, key: `detail_${task.id}_valuesToShow_${index}` }, v)))));
             })())));
-        })));
+        }))));
     }
+    static get watchers() { return {
+        "taskListScrollX": ["updateTaskListScroll"]
+    }; }
 };
 KupCustomTaskListTable.style = KupCustomTaskListTableStyle0;
 
@@ -300,8 +339,38 @@ const KupGanttCalendar = class {
         }
         return [topValues, bottomValues];
     }
+    getCalendarValuesForHour() {
+        const topValues = [];
+        const bottomValues = [];
+        const topDefaultHeight = this.headerHeight * 0.5;
+        const dates = this.dateSetup.dates;
+        for (let i = 0; i < dates.length; i++) {
+            const date = dates[i];
+            const bottomValue = getCachedDateTimeFormat(this.locale, {
+                hour: 'numeric',
+            }).format(date);
+            bottomValues.push(h("text", { key: date.getTime(), y: this.headerHeight * 0.8, x: this.columnWidth * (i + +this.rtl), class: "calendarBottomText" }, bottomValue));
+            if (i !== 0 && date.getDate() !== dates[i - 1].getDate()) {
+                const displayDate = dates[i - 1];
+                const topValue = `${getLocalDayOfWeek(displayDate, this.locale, 'long')}, ${displayDate.getDate()} ${getLocaleMonth(displayDate, this.locale)}`;
+                const topPosition = (date.getHours() - 24) / 2;
+                topValues.push({
+                    key: topValue + date.getFullYear(),
+                    value: topValue,
+                    x1Line: this.columnWidth * i,
+                    y1Line: 0,
+                    y2Line: topDefaultHeight,
+                    xText: this.columnWidth * (i + topPosition),
+                    yText: topDefaultHeight * 0.9,
+                });
+            }
+        }
+        return [topValues, bottomValues];
+    }
     getTopAndBottomValues() {
         switch (this.dateSetup.viewMode) {
+            case 'hour':
+                return this.getCalendarValuesForHour();
             case 'day':
                 return this.getCalendarValuesForDay();
             case 'week':
@@ -316,7 +385,7 @@ const KupGanttCalendar = class {
         this.simplifiedHeader =
             this.singleLineHeader && this.dateSetup.viewMode !== 'year';
         const [topValues, bottomValues] = this.getTopAndBottomValues();
-        return (h("svg", { key: 'afbc0f59b413dd491ba4eec43ae3ad275b083617', xmlns: "http://www.w3.org/2000/svg", width: this.svgWidth, height: this.headerHeight }, h("g", { key: '52d441353903b6f5b5310c0e1b8b494c6294084a', class: "calendar", "font-size": this.fontSize, "font-family": this.fontFamily }, h("rect", { key: '4f5880bcc29c37d1e5f71b65cc752d510a690917', x: 0, y: 0, width: this.columnWidth * this.dateSetup.dates.length, height: this.headerHeight, class: "calendarHeader" }), this.simplifiedHeader ? null : bottomValues, this.simplifiedHeader
+        return (h("svg", { key: '7a19cec75e555a4fd92acca667c464df43370468', xmlns: "http://www.w3.org/2000/svg", width: this.svgWidth, height: this.headerHeight }, h("g", { key: 'a7e72bfedfefae5813d339b99d78bf7138354ff5', class: "calendar", "font-size": this.fontSize, "font-family": this.fontFamily }, h("rect", { key: '34f50e350bd20b69fe0a7bfc4744b27dfeb27a12', x: 0, y: 0, width: this.columnWidth * this.dateSetup.dates.length, height: this.headerHeight, class: "calendarHeader" }), this.simplifiedHeader ? null : bottomValues, this.simplifiedHeader
             ? topValues.map((topValue) => (h("g", { class: "calendarTop" }, h("line", { x1: topValue.x1Line, y1: topValue.y2Line * 2, x2: topValue.x1Line, y2: topValue.y2Line, class: "calendarTopTick", key: topValue.value + 'line' }), h("text", { key: topValue.value + 'text', y: topValue.yText, x: topValue.xText, class: "calendarTopText" }, topValue.value))))
             : topValues.map((topValue) => (h("g", { class: "calendarTop" }, h("line", { x1: topValue.x1Line, y1: topValue.y1Line, x2: topValue.x1Line, y2: topValue.y2Line, class: "calendarTopTick", key: topValue.value + 'line' }), h("text", { key: topValue.value + 'text', y: topValue.yText, x: topValue.xText, class: "calendarTopText" }, topValue.value)))), this.currentDateIndicator && (
         // current date indicator
@@ -866,7 +935,7 @@ var hexToCssFilter = {exports: {}};
 })));
 }(hexToCssFilter, hexToCssFilter.exports));
 
-const kupGridRendererCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);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}.gridRow{fill:#fff}.gridRowLine{stroke:transparent}.gridTick{stroke:#e6e4e4}.barHandle{fill:#ddd;cursor:ew-resize;opacity:0;visibility:hidden}.barBackground{user-select:none;stroke-width:0}.barWrapper{cursor:pointer;outline:none}.task-wrapper{outline:none !important}.barWrapper:hover .barHandle{visibility:visible;opacity:1}.barLabel{fill:#fff;text-anchor:middle;font-weight:lighter;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.barLabelOutside{fill:#555;text-anchor:start;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}";
+const kupGridRendererCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);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}.gridRow{fill:#fff}.gridRowLine{stroke:transparent}.gridTick{stroke:#e6e4e4}.barHandle{fill:#ddd;cursor:ew-resize;opacity:0;visibility:hidden}.barBackground{user-select:none;stroke-width:0}.barWrapper{cursor:pointer;outline:none}.task-wrapper{outline:none !important}.barWrapper:hover .barHandle{visibility:visible;opacity:1}.barLabel{fill:#fff;text-anchor:middle;font-weight:lighter;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.barLabelOutside{fill:#555;text-anchor:start;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.ghost-preview{opacity:0.5}";
 const KupGridRendererStyle0 = kupGridRendererCss;
 
 const KupGridRenderer = class {
@@ -902,13 +971,18 @@ const KupGridRenderer = class {
         this.setSelectedTask = undefined;
         this.eventStart = undefined;
         this.eMouseDown = undefined;
+        this.phaseDrop = undefined;
         this.setGanttEvent = undefined;
+        this.phaseDragScroll = undefined;
         this.xStep = 0;
         this.initEventX1Delta = 0;
         this.initEventXClick = 0;
         this.isMoving = false;
         this.point = undefined;
         this.svg = undefined;
+        this.currentTarget = undefined;
+        this.dragScrollInterval = undefined;
+        this.dropZoneTask = undefined;
     }
     //---- Lifecycle hooks ----
     componentDidLoad() {
@@ -940,14 +1014,22 @@ const KupGridRenderer = class {
                 return;
             event.preventDefault();
             this.point.x = event.clientX;
+            this.point.y = event.clientY;
             const cursor = this.point.matrixTransform((_b = (_a = this.svg) === null || _a === void 0 ? void 0 : _a.getScreenCTM()) === null || _b === void 0 ? void 0 : _b.inverse());
-            const { isChanged, changedTask } = handleTaskBySVGMouseEvent(cursor.x, this.ganttEvent.action, this.ganttEvent.changedTask, this.xStep, this.timeStep, this.initEventX1Delta, this.rtl);
+            const { isChanged, changedTask } = handleTaskBySVGMouseEvent(cursor.x, this.ganttEvent.action, this.ganttEvent.changedTask, this.xStep, this.timeStep, this.initEventX1Delta, this.rtl, cursor.y);
+            if (this.currentTarget) {
+                this.addGhostPreview(event);
+                this.handleAutoScrollForPhaseDrag(event);
+                this.addDropzoneVisualization();
+            }
             if (isChanged) {
                 this.setGanttEvent(Object.assign(Object.assign({}, this.ganttEvent), { action: this.ganttEvent.action, changedTask }));
             }
         };
         const handleMouseUp = async (event) => {
-            var _a, _b;
+            var _a, _b, _c;
+            clearInterval(this.dragScrollInterval);
+            this.resetDropzoneVisualization();
             const { action, originalSelectedTask, changedTask } = this.ganttEvent;
             if (!changedTask ||
                 !this.point ||
@@ -957,18 +1039,33 @@ const KupGridRenderer = class {
             event.preventDefault();
             this.point.x = event.clientX;
             const cursor = this.point.matrixTransform((_b = (_a = this.svg) === null || _a === void 0 ? void 0 : _a.getScreenCTM()) === null || _b === void 0 ? void 0 : _b.inverse());
-            const { changedTask: newChangedTask } = handleTaskBySVGMouseEvent(cursor.x, action, changedTask, this.xStep, this.timeStep, this.initEventX1Delta, this.rtl);
+            this.currentTarget = null;
+            const { changedTask: newChangedTask } = handleTaskBySVGMouseEvent(cursor.x, action, changedTask, this.xStep, this.timeStep, this.initEventX1Delta, this.rtl, cursor.y);
             const isNotLikeOriginal = originalSelectedTask.start !== newChangedTask.start ||
                 originalSelectedTask.end !== newChangedTask.end ||
-                originalSelectedTask.progress !== newChangedTask.progress;
+                originalSelectedTask.progress !== newChangedTask.progress ||
+                originalSelectedTask.y !== newChangedTask.y;
             // remove listeners
             this.svg.removeEventListener('mousemove', handleMouseMove);
             this.svg.removeEventListener('mouseup', handleMouseUp);
+            (_c = this.svg.querySelector('.ghost-preview')) === null || _c === void 0 ? void 0 : _c.remove();
             this.setGanttEvent({ action: '' });
             this.isMoving = false;
             // custom operation start
             let operationSuccess = true;
-            if ((action === 'move' || action === 'end' || action === 'start') &&
+            let droppedOn = undefined;
+            let originalTaskData = undefined;
+            if (action === 'move' &&
+                isNotLikeOriginal &&
+                newChangedTask.type === 'task') {
+                droppedOn = this.tasks.find((task) => this.isPhaseWithinTaskArea(changedTask, task) &&
+                    task.type === 'project');
+                originalTaskData = this.tasks.find((task) => task.id == originalSelectedTask.id.split('_').shift());
+            }
+            if ((droppedOn === null || droppedOn === void 0 ? void 0 : droppedOn.id) && (originalTaskData === null || originalTaskData === void 0 ? void 0 : originalTaskData.id) !== (droppedOn === null || droppedOn === void 0 ? void 0 : droppedOn.id)) {
+                this.phaseDrop(originalSelectedTask, originalTaskData, newChangedTask, droppedOn);
+            }
+            else if ((action === 'move' || action === 'end' || action === 'start') &&
                 this.dateChange &&
                 isNotLikeOriginal) {
                 try {
@@ -1014,6 +1111,110 @@ const KupGridRenderer = class {
         }
         return this.initEventXClick !== event.clientX;
     }
+    addGhostPreview(event) {
+        var _a;
+        (_a = this.svg.querySelector('.ghost-preview')) === null || _a === void 0 ? void 0 : _a.remove();
+        const mockEvent = Object.assign(Object.assign({}, event), { dataTransfer: new DataTransfer() });
+        const dragEle = this.currentTarget;
+        dragEle.classList.add('ghost-preview');
+        this.svg.appendChild(dragEle.cloneNode(true));
+        const nodeRect = dragEle.getBoundingClientRect();
+        mockEvent.dataTransfer.setDragImage(dragEle, mockEvent.clientX - nodeRect.left, mockEvent.clientY - nodeRect.top);
+    }
+    handleAutoScrollForPhaseDrag(event) {
+        var _a, _b;
+        const list = (_b = (_a = this.svg) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement;
+        if (!list)
+            return;
+        clearInterval(this.dragScrollInterval);
+        const isOverFlowing = list.clientHeight < list.scrollHeight;
+        if (isOverFlowing) {
+            // if container is overflowing we need to scroll within the container
+            const containerRect = list.getBoundingClientRect();
+            const offsetY = event.clientY - containerRect.top;
+            const diff = 5;
+            if (offsetY - 20 < diff) {
+                this.dragScrollInterval = setInterval(() => {
+                    this.phaseDragScroll((list.scrollTop -= diff));
+                }, 1);
+            }
+            else if (offsetY + 20 > containerRect.height - diff) {
+                this.dragScrollInterval = setInterval(() => {
+                    this.phaseDragScroll((list.scrollTop += diff));
+                }, 1);
+            }
+        }
+        else {
+            // else we need to scroll the window when viewport exceeds
+            const scrollOffset = 20;
+            const windowHeight = window.innerHeight;
+            const y = event.clientY;
+            if (y < scrollOffset) {
+                window.scrollBy(0, -scrollOffset);
+            }
+            else if (y > windowHeight - scrollOffset) {
+                window.scrollBy(0, scrollOffset);
+            }
+        }
+    }
+    isPhaseWithinTaskArea(phase, task) {
+        return (phase.y + phase.height >= task.ySecondary &&
+            phase.y <= task.ySecondary + task.height &&
+            phase.x2 >= task.x1 &&
+            phase.x1 <= task.x2);
+    }
+    addDropzoneVisualization() {
+        var _a;
+        this.resetDropzoneVisualization();
+        // find the tasks where drop is allowed, includes all projects except parent project also includes current phase
+        const dropAllowedOn = this.tasks.filter((task) => {
+            var _a, _b, _c;
+            return task.type == 'project' &&
+                ((_c = (_b = (_a = this.ganttEvent.originalSelectedTask) === null || _a === void 0 ? void 0 : _a.id) === null || _b === void 0 ? void 0 : _b.split('_')) === null || _c === void 0 ? void 0 : _c.shift()) !=
+                    task.id;
+        });
+        const changedTask = this.ganttEvent.changedTask;
+        // to determine whether the phase is in some another project y and x area
+        this.dropZoneTask = dropAllowedOn.find((task) => this.isPhaseWithinTaskArea(changedTask, task));
+        if ((_a = this.dropZoneTask) === null || _a === void 0 ? void 0 : _a.ySecondary) {
+            const rects = this.getBarRectsForDropzoneVisualization();
+            rects.forEach((rect) => {
+                rect.setAttribute('fill', defaultStylingOptions.barDropZoneColor);
+            });
+        }
+    }
+    resetDropzoneVisualization() {
+        if (!this.dropZoneTask)
+            return;
+        const rects = this.getBarRectsForDropzoneVisualization();
+        const isSelected = !!this.selectedTask &&
+            this.dropZoneTask.id === this.selectedTask.id;
+        rects.forEach((rect) => {
+            rect.setAttribute('fill', this.getBarColor(isSelected, this.dropZoneTask.styles));
+        });
+    }
+    getBarRectsForDropzoneVisualization() {
+        let rects;
+        if (!this.showSecondaryDates) {
+            rects = this.svg.querySelectorAll(`.barWrapper[data-type="${this.dropZoneTask.type}"] rect[y='${this.dropZoneTask.ySecondary}']`);
+        }
+        else {
+            const rect = this.svg.querySelector(`.barWrapper[data-type="${this.dropZoneTask.type}"] rect[y='${this.dropZoneTask.ySecondary}']`);
+            const siblings = [rect];
+            let nextSibling = rect.nextElementSibling;
+            while (nextSibling !== null) {
+                siblings.push(nextSibling);
+                nextSibling = nextSibling.nextElementSibling;
+            }
+            let prevSibling = rect.previousElementSibling;
+            while (prevSibling !== null) {
+                siblings.unshift(prevSibling);
+                prevSibling = prevSibling.previousElementSibling;
+            }
+            rects = siblings;
+        }
+        return rects;
+    }
     handleBarEventStart(action, task, event) {
         var _a;
         if (!event) {
@@ -1069,7 +1270,14 @@ const KupGridRenderer = class {
                 return;
             this.point.x = event.clientX;
             const cursor = this.point.matrixTransform((_a = this.svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
+            if (task.type === 'task') {
+                this.currentTarget = event.currentTarget.cloneNode(true);
+            }
+            else {
+                this.currentTarget = null;
+            }
             this.initEventX1Delta = cursor.x - task.x1;
+            this.point.y = event.clientY;
             this.initEventXClick = event.clientX;
             this.setGanttEvent({
                 action,
@@ -1091,7 +1299,7 @@ const KupGridRenderer = class {
     }
     renderKupBar(task, isSelected, isDateResizable, isProgressChangeable) {
         var _a, _b, _c;
-        return (h("g", { class: "barWrapper", "tab-index": 0 }, this.renderKupBarDisplay(task.x1, task.y, task.x2 - task.x1, task.height, task.progressX, task.progressWidth, task.barCornerRadius, task.styles, isSelected, !this.readOnly && !!this.dateChange && !task.isDisabled, task, task.x1secondary, ((_a = task.x2secondary) !== null && _a !== void 0 ? _a : 0) - ((_b = task.x1secondary) !== null && _b !== void 0 ? _b : 0)), h("g", { class: "handleGroup" }, isDateResizable && (h("g", null, this.renderKupBarDateHandle(task.x1 + 1, task.y + 1, task.handleWidth, task.height - 2, task.barCornerRadius, task, 'start'), this.renderKupBarDateHandle(task.x2 - task.handleWidth - 1, task.y + 1, task.handleWidth, task.height - 2, task.barCornerRadius, task, 'end'))), isProgressChangeable && (h("polygon", { class: "barHandle", points: this.calculateProgressPoint(task), onMouseDown: (e) => {
+        return (h("g", { class: "barWrapper", "tab-index": 0, "data-type": task.type }, this.renderKupBarDisplay(task.x1, task.y, task.x2 - task.x1, task.height, task.progressX, task.progressWidth, task.barCornerRadius, task.styles, isSelected, !this.readOnly && !!this.dateChange && !task.isDisabled, task, task.x1secondary, ((_a = task.x2secondary) !== null && _a !== void 0 ? _a : 0) - ((_b = task.x1secondary) !== null && _b !== void 0 ? _b : 0), task.ySecondary), h("g", { class: "handleGroup" }, isDateResizable && (h("g", null, this.renderKupBarDateHandle(task.x1 + 1, task.y + 1, task.handleWidth, task.height - 2, task.barCornerRadius, task, 'start'), this.renderKupBarDateHandle(task.x2 - task.handleWidth - 1, task.y + 1, task.handleWidth, task.height - 2, task.barCornerRadius, task, 'end'))), isProgressChangeable && (h("polygon", { class: "barHandle", points: this.calculateProgressPoint(task), onMouseDown: (e) => {
                 this.handleBarEventStart('progress', task, e);
             } }))), task.icon &&
             task.icon.url &&
@@ -1106,11 +1314,11 @@ const KupGridRenderer = class {
                     (this.showSecondaryDates ? task.height / 2 : 0),
             })));
     }
-    renderKupBarDisplay(x, y, width, height, progressX, progressWidth, barCornerRadius, styles, isSelected, isDateMovable, task, xSecondary, widthSecondary) {
+    renderKupBarDisplay(x, y, width, height, progressX, progressWidth, barCornerRadius, styles, isSelected, isDateMovable, task, xSecondary, widthSecondary, ySecondary) {
         if (this.showSecondaryDates && typeof xSecondary !== 'undefined') {
             const halfHeight = height / 2;
             return (h("g", { onMouseDown: (e) => isDateMovable &&
-                    this.handleBarEventStart('move', task, e) }, h("rect", { key: "top semi-transparent bar", x: xSecondary, width: widthSecondary, y: y, height: halfHeight, ry: barCornerRadius, rx: barCornerRadius, fill: this.getBarColor(isSelected, styles), opacity: 0.5, class: 'barBackground' }), h("rect", { key: "main bar", x: x, width: width, y: y + halfHeight, height: halfHeight, ry: barCornerRadius, rx: barCornerRadius, fill: this.getBarColor(isSelected, styles), class: 'barBackground' }), h("rect", { key: "progress bar", x: progressX, width: progressWidth, y: y + halfHeight, height: halfHeight, ry: barCornerRadius, rx: barCornerRadius, fill: this.getProcessColor(isSelected, styles) })));
+                    this.handleBarEventStart('move', task, e) }, h("rect", { key: "top semi-transparent bar", x: xSecondary, width: widthSecondary, y: ySecondary !== null && ySecondary !== void 0 ? ySecondary : y, height: halfHeight, ry: barCornerRadius, rx: barCornerRadius, fill: this.getBarColor(isSelected, styles), opacity: 0.5, class: 'barBackground' }), h("rect", { key: "main bar", x: x, width: width, y: y + halfHeight, height: halfHeight, ry: barCornerRadius, rx: barCornerRadius, fill: this.getBarColor(isSelected, styles), class: 'barBackground' }), h("rect", { key: "progress bar", x: progressX, width: progressWidth, y: y + halfHeight, height: halfHeight, ry: barCornerRadius, rx: barCornerRadius, fill: this.getProcessColor(isSelected, styles) })));
         }
         return (h("g", { onMouseDown: (e) => {
                 isDateMovable && this.handleBarEventStart('move', task, e);
@@ -1213,29 +1421,37 @@ const KupGridRenderer = class {
             rowLines.push(h("line", { key: 'RowLine' + task.id, x1: 0, y1: y + this.rowHeight, x2: this.gridProps.svgWidth, y2: y + this.rowHeight, class: "gridRowLine" }));
             y += this.rowHeight;
         }
-        const now = new Date();
+        // const now = new Date();
         let tickX = 0;
         const ticks = [];
         for (let i = 0; i < this.dates.length; i++) {
             const date = this.dates[i];
             ticks.push(h("line", { key: date.getTime(), x1: tickX, y1: 0, x2: tickX, y2: y, class: "gridTick" }));
-            if ((i + 1 !== this.dates.length &&
-                date.getTime() < now.getTime() &&
-                this.dates[i + 1].getTime() >= now.getTime()) ||
-                // if current date is last
-                (i !== 0 &&
-                    i + 1 === this.dates.length &&
-                    date.getTime() < now.getTime() &&
-                    addToDate(date, date.getTime() - this.dates[i - 1].getTime(), 'millisecond').getTime() >= now.getTime())) ;
+            // if (
+            //     (i + 1 !== this.dates.length &&
+            //         date.getTime() < now.getTime() &&
+            //         this.dates[i + 1].getTime() >= now.getTime()) ||
+            //     // if current date is last
+            //     (i !== 0 &&
+            //         i + 1 === this.dates.length &&
+            //         date.getTime() < now.getTime() &&
+            //         addToDate(
+            //             date,
+            //             date.getTime() - this.dates[i - 1].getTime(),
+            //             'millisecond'
+            //         ).getTime() >= now.getTime())
+            // ) {
+            //     // Add custom logic here if needed
+            // }
             tickX += this.columnWidth;
         }
-        return (h("svg", { key: '520a50739aa00f72aeb4e43ba03a3b5f126e289a', 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: '2681f573ab6f0c7ae9c9f316b77a05c9a634e100', class: "grid" }, h("g", { key: '085ea28cdbb6ee28354cd255c0f1b00a56c5588f', class: "rows" }, gridRows), h("g", { key: 'cb02f6b77af725f514f4eaf63624ff4ace5cf9e2', class: "rowLines" }, rowLines), h("g", { key: 'bed7254aeb03e0fbd1ab3e9d40c14f84b346bffc', class: "ticks" }, ticks)), h("g", { key: 'b22b4e0c75d7cef3336a8e069b243d6296200272', class: "content" }, this.currentDateIndicator && (h("rect", { fill: this.currentDateIndicator.color, x: this.currentDateIndicator.x + 1.5, y: "0", width: "2", height: "100%" })), this.projection && (h("rect", { fill: this.projection.color, x: this.projection.x0, y: "0", width: this.projection.xf - this.projection.x0, height: "100%", "fill-opacity": "0.35" })), h("g", { key: '594dd1e9af2f037f0599019a3082a58115907d3b', class: "arrows", fill: this.arrowColor, stroke: this.arrowColor }, this.tasks.map((task) => {
+        return (h("svg", { key: '95b5c0ebccd9d472507328baa068f9d75daa4a6e', xmlns: "http://www.w3.org/2000/svg", width: this.gridProps.svgWidth, height: `${this.rowHeight * this.tasks.length}px`, "font-family": this.fontFamily, ref: (el) => (this.svg = el) }, h("g", { key: 'bd6598993c35c69c6aadca0d41c50b028a283b70', class: "grid" }, h("g", { key: 'c52a1de5fa57cc5fdd4b80ff84b3a09b13e3b199', class: "rows" }, gridRows), h("g", { key: 'd8747275b307b05c7a5c4ab1ab3efa5956c95f25', class: "rowLines" }, rowLines), h("g", { key: '000d0b2ec6253da9d23096a7cfa3564a2a3a173d', class: "ticks" }, ticks)), h("g", { key: 'fc0d6cc1b4f60e84b77082b7c47d68eb364fbb7b', class: "content" }, this.currentDateIndicator && (h("rect", { fill: this.currentDateIndicator.color, x: this.currentDateIndicator.x + 1.5, y: "0", width: "2", height: "100%" })), this.projection && (h("rect", { fill: this.projection.color, x: this.projection.x0, y: "0", width: this.projection.xf - this.projection.x0, height: "100%", "fill-opacity": "0.35" })), h("g", { key: '04162e3432a56f08c1ea29e69503fe97e1fb84d2', class: "arrows", fill: this.arrowColor, stroke: this.arrowColor }, this.tasks.map((task) => {
             return task.barChildren.map((child) => {
                 if (task.type !== 'timeline') {
                     this.renderKupArrow(task, child);
                 }
             });
-        })), h("g", { key: '9d41cb46ff1373cf3a34fcebf7f9bc02ab961a8b', class: "bar", "font-family": this.fontFamily, "font-size": this.fontSize }, this.tasks.map((task) => {
+        })), h("g", { key: '4e5888f0a6335480ee0f32df3844982e355f4e39', class: "bar", "font-family": this.fontFamily, "font-size": this.fontSize }, this.tasks.map((task) => {
             const forbidResize = task.type === 'project';
             return (h("g", { onKeyDown: (e) => {
                     switch (e.key) {
@@ -1295,7 +1511,7 @@ const KupGridRenderer = class {
                         return this.renderKupBar(task, props.isSelected, isDateResizable, isProgressChangeable);
                 }
             })()));
-        })))));
+        }), this.currentTarget && this.ganttEvent.changedTask && (h("g", { class: "task-wrapper" }, this.renderKupBar(this.ganttEvent.changedTask, false, false, false)))))));
     }
     static get watchers() { return {
         "columnWidth": ["updateXStep"],

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

@@ -1,12 +1,12 @@
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, d as getElement } from './index-460631fd.js';
-import { F as FButton } from './f-button-1eebd42e.js';
+import { F as FButton } from './f-button-d6dbcfd6.js';
 import { F as FCheckbox } from './f-checkbox-ddb6234e.js';
-import { F as FTextField } from './f-text-field-802b45fb.js';
+import { F as FTextField } from './f-text-field-d364ffd2.js';
 import { F as FTextFieldMDC } from './f-text-field-mdc-c88bf688.js';
-import { k as kupManagerInstance, g as getProps, s as setProps, ah as KupLanguageDashboard, l as KupLanguageGeneric, Q as KupDragEffect, d as KupDebugCategory } from './kup-manager-dd24fb5a.js';
+import { k as kupManagerInstance, g as getProps, s as setProps, ah as KupLanguageDashboard, l as KupLanguageGeneric, Q as KupDragEffect, d as KupDebugCategory } from './kup-manager-a316a70e.js';
 import { c as componentWrapperId } from './GenericVariables-d8d0541e.js';
 import './f-button-declarations-9bdc6f26.js';
-import './f-image-1e1ed567.js';
+import './f-image-a67229e5.js';
 import './component-879e99bf.js';
 import './kup-dates-26a56bf7.js';
 

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, d as getElement } from './index-460631fd.js';
-import { k as kupManagerInstance, g as getProps, s as setProps } from './kup-manager-dd24fb5a.js';
+import { k as kupManagerInstance, g as getProps, s as setProps } from './kup-manager-a316a70e.js';
 import { c as componentWrapperId } from './GenericVariables-d8d0541e.js';
 import './kup-dates-26a56bf7.js';
 

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, d as getElement, g as getAssetPath } from './index-460631fd.js';
-import { k as kupManagerInstance, g as getProps, s as setProps, c as KupThemeColorValues, d as KupDebugCategory, u as getColumnByName, n as KupDataNewColumnTypes } from './kup-manager-dd24fb5a.js';
+import { k as kupManagerInstance, g as getProps, s as setProps, c as KupThemeColorValues, d as KupDebugCategory, u as getColumnByName, n as KupDataNewColumnTypes } from './kup-manager-a316a70e.js';
 import { c as componentWrapperId } from './GenericVariables-d8d0541e.js';
 import './kup-dates-26a56bf7.js';
 

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, d as getElement } from './index-460631fd.js';
-import { k as kupManagerInstance, g as getProps, s as setProps } from './kup-manager-dd24fb5a.js';
+import { k as kupManagerInstance, g as getProps, s as setProps } from './kup-manager-a316a70e.js';
 import { c as componentWrapperId } from './GenericVariables-d8d0541e.js';
 import { c as commonjsGlobal, g as getDefaultExportFromCjs } from './kup-dates-26a56bf7.js';
 

package/dist/esm/kup-family-tree.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, d as getElement } from './index-460631fd.js';
-import { F as FButton } from './f-button-1eebd42e.js';
+import { F as FButton } from './f-button-d6dbcfd6.js';
 import { F as FButtonStyling } from './f-button-declarations-9bdc6f26.js';
-import { F as FImage } from './f-image-1e1ed567.js';
-import { k as kupManagerInstance, g as getProps, s as setProps, l as KupLanguageGeneric, M as KupPointerEventTypes } from './kup-manager-dd24fb5a.js';
+import { F as FImage } from './f-image-a67229e5.js';
+import { k as kupManagerInstance, g as getProps, s as setProps, l as KupLanguageGeneric, M as KupPointerEventTypes } from './kup-manager-a316a70e.js';
 import { c as componentWrapperId } from './GenericVariables-d8d0541e.js';
 import './kup-dates-26a56bf7.js';