@sme.up/ketchup 9.6.4 → 9.6.5

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

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-958d0399.js');
 const kupDates = require('./kup-dates-e22ee32c.js');
-const kupPlannerTimeFormatter = require('./kup-planner-time-formatter-a74e70f0.js');
-const kupPlannerRendererHelper = require('./kup-planner-renderer-helper-9f776d6e.js');
-const bar_helpers = require('./bar.helpers-f46a5a83.js');
+const bar_helpers = require('./bar.helpers-c481a535.js');
+const kupPlannerTimeFormatter = require('./kup-planner-time-formatter-b7dca3ea.js');
+const kupPlannerDeclarations = require('./kup-planner-declarations-cb33663d.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;
@@ -30,7 +30,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 {
@@ -42,15 +42,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$1 = new kupDates.KupDates();
-        return (index.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 (index.h("div", { class: `container ${this.scrollableTaskList ? 'scrollable' : ''}`, style: scrollableStyle }, index.h("div", { class: "project-wrapper", ref: (el) => (this.projectWrapperRef = el) }, this.tasks.map((task) => {
+            var _a, _b, _c, _d;
             return (index.h(index.Fragment, null, task.type === 'project' ? (index.h("div", { class: "project", style: {
                     height: `${this.rowHeight}px`,
                     width: this.rowWidth,
@@ -67,11 +89,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$1) => (index.h("span", { class: index$1 === 0 ? 'main' : undefined, title: v.length > 10 ? v : undefined, key: `task_${task.id}_valuesToShow_${index$1}` }, v === '#START#'
-                ? kupDates$1.formatToLocaleSimple(task.start)
-                : v === '#END#'
-                    ? kupDates$1.formatToLocaleSimple(task.end)
-                    : v))))) : task.type === 'task' ? (index.h("div", { class: "subrow", style: {
+                } }, (_a = task.valuesToShow) === null || _a === void 0 ? void 0 :
+                _a.map((v, index$1) => (index.h("span", { class: index$1 === 0 ? 'main' : undefined, title: v.length > 10 ? v : undefined, key: `task_${task.id}_valuesToShow_${index$1}` }, v === '#START#'
+                    ? kupDates$1.formatToLocaleSimple(task.start)
+                    : v === '#END#'
+                        ? kupDates$1.formatToLocaleSimple(task.end)
+                        : v))), this.scrollableTaskList && spansToShow > task.valuesToShow.length && ((() => {
+                const spansToIterate = bar_helpers.createArrayFromNum(spansToShow - task.valuesToShow.length);
+                return (spansToIterate.map((element) => (index.h("span", { key: element }))));
+            })()))) : task.type === 'task' ? (index.h("div", { class: "subrow", style: {
                     height: `${this.rowHeight}px`,
                     width: this.rowWidth,
                     fontFamily: this.fontFamily,
@@ -87,16 +113,26 @@ const KupCustomTaskListTable = class {
                     e.preventDefault();
                     this.setSelectedTask(task.id);
                     this.oncontextmenuTaskList(e, task.id);
+                } }, this.scrollableTaskList ? (index.h("div", { style: {
+                    textAlign: 'end',
                 } }, index.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$1) => (index.h("span", { class: index$1 === 0 ? 'main' : undefined, title: v.length > 10 ? v : undefined, key: `phase_${task.id}_valuesToShow_${index$1}` }, v === '#START#'
+                } }))) : (index.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$1) => (index.h("span", { class: index$1 === 0 ? 'main' : undefined, title: v.length > 10 ? v : undefined, key: `phase_${task.id}_valuesToShow_${index$1}` }, v === '#START#'
                     ? kupDates$1.formatToLocaleSimple(task.start)
                     : v === '#END#'
                         ? kupDates$1.formatToLocaleSimple(task.end)
-                        : v))))) : ((() => {
+                        : v))), this.scrollableTaskList && spansToShow > task.valuesToShow.length && ((() => {
+                const spansToIterate = bar_helpers.createArrayFromNum(spansToShow - task.valuesToShow.length - 1);
+                return (spansToIterate.map((element) => (index.h("span", { key: element }))));
+            })()))) : ((() => {
                 var _a;
                 let str = '';
                 for (let i = 0; i < task.valuesToShow.length; i++) {
@@ -118,8 +154,11 @@ const KupCustomTaskListTable = class {
                         ? v
                         : undefined, key: `detail_${task.id}_valuesToShow_${index$1}` }, v)))));
             })())));
-        })));
+        }))));
     }
+    static get watchers() { return {
+        "taskListScrollX": ["updateTaskListScroll"]
+    }; }
 };
 KupCustomTaskListTable.style = KupCustomTaskListTableStyle0;
 
@@ -304,8 +343,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 = kupPlannerTimeFormatter.getCachedDateTimeFormat(this.locale, {
+                hour: 'numeric',
+            }).format(date);
+            bottomValues.push(index.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 = `${kupPlannerTimeFormatter.getLocalDayOfWeek(displayDate, this.locale, 'long')}, ${displayDate.getDate()} ${kupPlannerTimeFormatter.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':
@@ -320,7 +389,7 @@ const KupGanttCalendar = class {
         this.simplifiedHeader =
             this.singleLineHeader && this.dateSetup.viewMode !== 'year';
         const [topValues, bottomValues] = this.getTopAndBottomValues();
-        return (index.h("svg", { key: 'afbc0f59b413dd491ba4eec43ae3ad275b083617', xmlns: "http://www.w3.org/2000/svg", width: this.svgWidth, height: this.headerHeight }, index.h("g", { key: '52d441353903b6f5b5310c0e1b8b494c6294084a', class: "calendar", "font-size": this.fontSize, "font-family": this.fontFamily }, index.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 (index.h("svg", { key: '7a19cec75e555a4fd92acca667c464df43370468', xmlns: "http://www.w3.org/2000/svg", width: this.svgWidth, height: this.headerHeight }, index.h("g", { key: 'a7e72bfedfefae5813d339b99d78bf7138354ff5', class: "calendar", "font-size": this.fontSize, "font-family": this.fontFamily }, index.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) => (index.h("g", { class: "calendarTop" }, index.h("line", { x1: topValue.x1Line, y1: topValue.y2Line * 2, x2: topValue.x1Line, y2: topValue.y2Line, class: "calendarTopTick", key: topValue.value + 'line' }), index.h("text", { key: topValue.value + 'text', y: topValue.yText, x: topValue.xText, class: "calendarTopText" }, topValue.value))))
             : topValues.map((topValue) => (index.h("g", { class: "calendarTop" }, index.h("line", { x1: topValue.x1Line, y1: topValue.y1Line, x2: topValue.x1Line, y2: topValue.y2Line, class: "calendarTopTick", key: topValue.value + 'line' }), index.h("text", { key: topValue.value + 'text', y: topValue.yText, x: topValue.xText, class: "calendarTopText" }, topValue.value)))), this.currentDateIndicator && (
         // current date indicator
@@ -870,7 +939,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 {
@@ -906,13 +975,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() {
@@ -944,14 +1018,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 } = bar_helpers.handleTaskBySVGMouseEvent(cursor.x, this.ganttEvent.action, this.ganttEvent.changedTask, this.xStep, this.timeStep, this.initEventX1Delta, this.rtl);
+            const { isChanged, changedTask } = bar_helpers.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 ||
@@ -961,18 +1043,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 } = bar_helpers.handleTaskBySVGMouseEvent(cursor.x, action, changedTask, this.xStep, this.timeStep, this.initEventX1Delta, this.rtl);
+            this.currentTarget = null;
+            const { changedTask: newChangedTask } = bar_helpers.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 {
@@ -1018,6 +1115,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', kupPlannerDeclarations.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) {
@@ -1073,7 +1274,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,
@@ -1095,7 +1303,7 @@ const KupGridRenderer = class {
     }
     renderKupBar(task, isSelected, isDateResizable, isProgressChangeable) {
         var _a, _b, _c;
-        return (index.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)), index.h("g", { class: "handleGroup" }, isDateResizable && (index.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 && (index.h("polygon", { class: "barHandle", points: this.calculateProgressPoint(task), onMouseDown: (e) => {
+        return (index.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), index.h("g", { class: "handleGroup" }, isDateResizable && (index.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 && (index.h("polygon", { class: "barHandle", points: this.calculateProgressPoint(task), onMouseDown: (e) => {
                 this.handleBarEventStart('progress', task, e);
             } }))), task.icon &&
             task.icon.url &&
@@ -1110,11 +1318,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 (index.h("g", { onMouseDown: (e) => isDateMovable &&
-                    this.handleBarEventStart('move', task, e) }, index.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' }), index.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' }), index.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) }, index.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' }), index.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' }), index.h("rect", { key: "progress bar", x: progressX, width: progressWidth, y: y + halfHeight, height: halfHeight, ry: barCornerRadius, rx: barCornerRadius, fill: this.getProcessColor(isSelected, styles) })));
         }
         return (index.h("g", { onMouseDown: (e) => {
                 isDateMovable && this.handleBarEventStart('move', task, e);
@@ -1217,29 +1425,37 @@ const KupGridRenderer = class {
             rowLines.push(index.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(index.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() &&
-                    kupPlannerRendererHelper.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 (index.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) }, index.h("g", { key: '2681f573ab6f0c7ae9c9f316b77a05c9a634e100', class: "grid" }, index.h("g", { key: '085ea28cdbb6ee28354cd255c0f1b00a56c5588f', class: "rows" }, gridRows), index.h("g", { key: 'cb02f6b77af725f514f4eaf63624ff4ace5cf9e2', class: "rowLines" }, rowLines), index.h("g", { key: 'bed7254aeb03e0fbd1ab3e9d40c14f84b346bffc', class: "ticks" }, ticks)), index.h("g", { key: 'b22b4e0c75d7cef3336a8e069b243d6296200272', class: "content" }, this.currentDateIndicator && (index.h("rect", { fill: this.currentDateIndicator.color, x: this.currentDateIndicator.x + 1.5, y: "0", width: "2", height: "100%" })), this.projection && (index.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" })), index.h("g", { key: '594dd1e9af2f037f0599019a3082a58115907d3b', class: "arrows", fill: this.arrowColor, stroke: this.arrowColor }, this.tasks.map((task) => {
+        return (index.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) }, index.h("g", { key: 'bd6598993c35c69c6aadca0d41c50b028a283b70', class: "grid" }, index.h("g", { key: 'c52a1de5fa57cc5fdd4b80ff84b3a09b13e3b199', class: "rows" }, gridRows), index.h("g", { key: 'd8747275b307b05c7a5c4ab1ab3efa5956c95f25', class: "rowLines" }, rowLines), index.h("g", { key: '000d0b2ec6253da9d23096a7cfa3564a2a3a173d', class: "ticks" }, ticks)), index.h("g", { key: 'fc0d6cc1b4f60e84b77082b7c47d68eb364fbb7b', class: "content" }, this.currentDateIndicator && (index.h("rect", { fill: this.currentDateIndicator.color, x: this.currentDateIndicator.x + 1.5, y: "0", width: "2", height: "100%" })), this.projection && (index.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" })), index.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);
                 }
             });
-        })), index.h("g", { key: '9d41cb46ff1373cf3a34fcebf7f9bc02ab961a8b', class: "bar", "font-family": this.fontFamily, "font-size": this.fontSize }, this.tasks.map((task) => {
+        })), index.h("g", { key: '4e5888f0a6335480ee0f32df3844982e355f4e39', class: "bar", "font-family": this.fontFamily, "font-size": this.fontSize }, this.tasks.map((task) => {
             const forbidResize = task.type === 'project';
             return (index.h("g", { onKeyDown: (e) => {
                     switch (e.key) {
@@ -1299,7 +1515,7 @@ const KupGridRenderer = class {
                         return this.renderKupBar(task, props.isSelected, isDateResizable, isProgressChangeable);
                 }
             })()));
-        })))));
+        }), this.currentTarget && this.ganttEvent.changedTask && (index.h("g", { class: "task-wrapper" }, this.renderKupBar(this.ganttEvent.changedTask, false, false, false)))))));
     }
     static get watchers() { return {
         "columnWidth": ["updateXStep"],

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

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-958d0399.js');
-const fButton = require('./f-button-89de2403.js');
+const fButton = require('./f-button-23ec3db5.js');
 const fCheckbox = require('./f-checkbox-1fa28e76.js');
-const fTextField = require('./f-text-field-eb207a83.js');
+const fTextField = require('./f-text-field-354b6c78.js');
 const fTextFieldMdc = require('./f-text-field-mdc-08a06162.js');
-const kupManager = require('./kup-manager-abfe4ddd.js');
+const kupManager = require('./kup-manager-e1bfd4f8.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
 require('./f-button-declarations-51ef6d9a.js');
-require('./f-image-a41d7f1e.js');
+require('./f-image-f3944c01.js');
 require('./component-cb3b32f5.js');
 require('./kup-dates-e22ee32c.js');
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-958d0399.js');
-const kupManager = require('./kup-manager-abfe4ddd.js');
+const kupManager = require('./kup-manager-e1bfd4f8.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
 require('./kup-dates-e22ee32c.js');
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-958d0399.js');
-const kupManager = require('./kup-manager-abfe4ddd.js');
+const kupManager = require('./kup-manager-e1bfd4f8.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
 require('./kup-dates-e22ee32c.js');
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-958d0399.js');
-const kupManager = require('./kup-manager-abfe4ddd.js');
+const kupManager = require('./kup-manager-e1bfd4f8.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
 const kupDates = require('./kup-dates-e22ee32c.js');
 

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-958d0399.js');
-const fButton = require('./f-button-89de2403.js');
+const fButton = require('./f-button-23ec3db5.js');
 const fButtonDeclarations = require('./f-button-declarations-51ef6d9a.js');
-const fImage = require('./f-image-a41d7f1e.js');
-const kupManager = require('./kup-manager-abfe4ddd.js');
+const fImage = require('./f-image-f3944c01.js');
+const kupManager = require('./kup-manager-e1bfd4f8.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
 require('./kup-dates-e22ee32c.js');