@sme.up/ketchup 7.4.1 → 7.4.2

package/dist/components/kup-planner.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { a8 as createCommonjsModule, k as kupManagerInstance, g as getProps, s as setProps, c as componentWrapperId, d as defineCustomElement$2, b as defineCustomElement$3, e as defineCustomElement$4, f as defineCustomElement$5, h as defineCustomElement$6, i as defineCustomElement$7, j as defineCustomElement$8, l as defineCustomElement$9, m as defineCustomElement$a, n as defineCustomElement$b, o as defineCustomElement$c, p as defineCustomElement$d, q as defineCustomElement$e, r as defineCustomElement$f, t as defineCustomElement$g, u as defineCustomElement$h, v as defineCustomElement$i, w as defineCustomElement$j, x as defineCustomElement$k, y as defineCustomElement$l, z as defineCustomElement$m, A as defineCustomElement$n, B as defineCustomElement$o, C as defineCustomElement$p, D as defineCustomElement$q, E as defineCustomElement$r, G as defineCustomElement$s } from './kup-autocomplete2.js';
+import { a8 as createCommonjsModule, k as kupManagerInstance, aE as KupDatesFormats, ak as getCellValueForDisplay, g as getProps, s as setProps, c as componentWrapperId, d as defineCustomElement$2, b as defineCustomElement$3, e as defineCustomElement$4, f as defineCustomElement$5, h as defineCustomElement$6, i as defineCustomElement$7, j as defineCustomElement$8, l as defineCustomElement$9, m as defineCustomElement$a, n as defineCustomElement$b, o as defineCustomElement$c, p as defineCustomElement$d, q as defineCustomElement$e, r as defineCustomElement$f, t as defineCustomElement$g, u as defineCustomElement$h, v as defineCustomElement$i, w as defineCustomElement$j, x as defineCustomElement$k, y as defineCustomElement$l, z as defineCustomElement$m, A as defineCustomElement$n, B as defineCustomElement$o, C as defineCustomElement$p, D as defineCustomElement$q, E as defineCustomElement$r, G as defineCustomElement$s } from './kup-autocomplete2.js';
 
 /**
  * Props of the kup-gantt component.
@@ -8,26 +8,44 @@ import { a8 as createCommonjsModule, k as kupManagerInstance, g as getProps, s a
 var KupPlannerProps;
 (function (KupPlannerProps) {
   KupPlannerProps["customStyle"] = "Custom style of the component.";
-  KupPlannerProps["taskIdCol"] = "Unique task identifier";
-  KupPlannerProps["taskNameCol"] = "Task name displayed";
-  KupPlannerProps["taskDates"] = "Task duration, from (firstDate) to (secondDate)";
-  KupPlannerProps["taskPrevDates"] = "Forecast task duration, from (firstDate) to (secondDate)";
-  KupPlannerProps["taskColumns"] = "Columns containing informations displayed on the left box near the gantt";
-  KupPlannerProps["phaseIdCol"] = "Unique phase identifier";
-  KupPlannerProps["phaseNameCol"] = "Phase name displayed";
-  KupPlannerProps["phaseDates"] = "Phase duration, from (firstDate) to (secondDate)";
-  KupPlannerProps["phasePrevDates"] = "Forecast phase duration, from (firstDate) to (secondDate)";
-  KupPlannerProps["phaseColumns"] = "Columns containing informations displayed on the left box near the gantt";
-  KupPlannerProps["phaseColorCol"] = "Phase color in hex format";
-  KupPlannerProps["phaseColParDep"] = "Names of the parent phases";
-  KupPlannerProps["titleMess"] = "Message displayed";
-  KupPlannerProps["data"] = "Dataset containg the task list";
+  KupPlannerProps["data"] = "Dataset containg the tasks list";
+  KupPlannerProps["detailData"] = "Dataset containg the details list";
+  KupPlannerProps["detailColorCol"] = "Column containing the detail color, in hex format";
+  KupPlannerProps["detailColumns"] = "Columns containing informations displayed in the left box, near the gantt of details";
+  KupPlannerProps["detailDates"] = "Columns containing detail duration, from (firstDate) to (secondDate)";
+  KupPlannerProps["detailHeight"] = "Height for detail gantt";
+  KupPlannerProps["detailIdCol"] = "Column containing unique detail identifier";
+  KupPlannerProps["detailNameCol"] = "Column containing detail name displayed";
+  KupPlannerProps["detailPrevDates"] = "Columns containing forecast detail duration, from (firstDate) to (secondDate)";
+  KupPlannerProps["listCellWidth"] = "Total size of the cells inside to the left box, near the gantt";
+  KupPlannerProps["maxWidth"] = "Max width for component";
+  KupPlannerProps["phaseColorCol"] = "Column containing the phase color in hex format";
+  KupPlannerProps["phaseColumns"] = "Columns containing informations displayed in the left box ,near the gantt of phases";
+  KupPlannerProps["phaseColParDep"] = "Column containing the name of the parent phases";
+  KupPlannerProps["phaseDates"] = "Columns containing phase duration, from (firstDate) to (secondDate)";
+  KupPlannerProps["phaseIdCol"] = "Column containing unique phase identifier";
+  KupPlannerProps["phaseNameCol"] = "Column containing phase name displayed";
+  KupPlannerProps["phasePrevDates"] = "Columns containing forecast phase duration, from (firstDate) to (secondDate)";
+  KupPlannerProps["showSecondaryDates"] = "Enable/disable display of secondary dates";
+  KupPlannerProps["taskColumns"] = "Columns containing informations displayed in the left box, near the gantt";
+  KupPlannerProps["taskDates"] = "Columns containing task duration, from (firstDate) to (secondDate)";
+  KupPlannerProps["taskHeight"] = "Height for main gantt";
+  KupPlannerProps["taskIdCol"] = "Column containing unique task identifier";
+  KupPlannerProps["taskNameCol"] = "Column containing task name displayed";
+  KupPlannerProps["taskPrevDates"] = "Columns containing forecast task duration, from (firstDate) to (secondDate)";
+  KupPlannerProps["titleMess"] = "Message displayed on top";
 })(KupPlannerProps || (KupPlannerProps = {}));
 var KupPlannerTaskAction;
 (function (KupPlannerTaskAction) {
   KupPlannerTaskAction["onOpening"] = "onOpening";
   KupPlannerTaskAction["onClosing"] = "onClosing";
 })(KupPlannerTaskAction || (KupPlannerTaskAction = {}));
+var KupPlannerGanttRowType;
+(function (KupPlannerGanttRowType) {
+  KupPlannerGanttRowType["TASK"] = "task";
+  KupPlannerGanttRowType["PHASE"] = "phase";
+  KupPlannerGanttRowType["DETAIL"] = "detail";
+})(KupPlannerGanttRowType || (KupPlannerGanttRowType = {}));
 class KupPlannerLastOnChangeReceived {
   constructor(event, threshold = 100) {
     this.dateTime = new Date();
@@ -42,7 +60,20 @@ class KupPlannerLastOnChangeReceived {
   resetDateTime() {
     this.dateTime = new Date();
   }
-}
+}
+const defaultStylingOptions = {
+  listCellWidth: '300px',
+  rowHeight: 40,
+  barFill: 90,
+  projectProgressColor: '#CBCBCB',
+  projectProgressSelectedColor: '#CBCBCB',
+  projectBackgroundColor: '#CBCBCB',
+  projectBackgroundSelectedColor: '#CBCBCB',
+  barProgressColor: '#A2A415',
+  barProgressSelectedColor: '#A2A415',
+  barBackgroundColor: '#A2A415',
+  barBackgroundSelectedColor: '#A2A415',
+};
 
 /**
  * @license React
@@ -8345,18 +8376,6 @@ function _extends() {
   };
   return _extends.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
 function _unsupportedIterableToArray(o, minLen) {
   if (!o) return;
   if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -8400,6 +8419,230 @@ var ViewMode;
   ViewMode["Year"] = "Year";
 })(ViewMode || (ViewMode = {}));
 
+var TimeUnit;
+(function (TimeUnit) {
+  TimeUnit["DAY"] = "days";
+  TimeUnit["WEEK"] = "weeks";
+  TimeUnit["MONTH"] = "months";
+  TimeUnit["YEAR"] = "YEAR";
+})(TimeUnit || (TimeUnit = {}));
+var parseToDayStart = function parseToDayStart(ymd) {
+  return luxon.DateTime.fromISO(ymd).toJSDate();
+};
+var parseToDayEnd = function parseToDayEnd(endDate) {
+  return luxon.DateTime.fromISO(endDate).plus({
+    seconds: 86400 - 1
+  }).toJSDate();
+};
+var formatToIsoDate = function formatToIsoDate(date) {
+  return luxon.DateTime.fromJSDate(date).toISODate();
+};
+var formatToLocaleSimple = function formatToLocaleSimple(date) {
+  return luxon.DateTime.fromJSDate(date).toFormat("dd/MM/yyyy");
+};
+function validDates(startDate, endDate, _name) {
+  var _start;
+  var start = parseToDayStart(startDate);
+  var end = parseToDayEnd(endDate);
+  if (((_start = start) === null || _start === void 0 ? void 0 : _start.getTime()) > (end === null || end === void 0 ? void 0 : end.getTime())) {
+    start = parseToDayStart(endDate);
+  }
+  return {
+    start: start,
+    end: end
+  };
+}
+
+var toViewMode = function toViewMode(timeUnit) {
+  switch (timeUnit) {
+    case TimeUnit.DAY:
+      return ViewMode.Day;
+    case TimeUnit.WEEK:
+      return ViewMode.Week;
+    case TimeUnit.MONTH:
+      return ViewMode.Month;
+    case TimeUnit.YEAR:
+      return ViewMode.Year;
+  }
+};
+var convertPhaseToTask = function convertPhaseToTask(item) {
+  var mapPhase = function mapPhase(_ref) {
+    var phaseStart = _ref.startDate,
+      phaseEnd = _ref.endDate,
+      secondaryStartDate = _ref.secondaryStartDate,
+      secondaryEndDate = _ref.secondaryEndDate,
+      phaseName = _ref.name,
+      phaseId = _ref.id,
+      color = _ref.color,
+      selectedColor = _ref.selectedColor,
+      dependencies = _ref.dependencies;
+    var _validDates = validDates(phaseStart, phaseEnd),
+      start = _validDates.start,
+      end = _validDates.end;
+    var _validDates2 = validDates(secondaryStartDate, secondaryEndDate),
+      phaseStart2 = _validDates2.start,
+      phaseEnd2 = _validDates2.end;
+    return {
+      start: start,
+      end: end,
+      secondaryStart: phaseStart2,
+      secondaryEnd: phaseEnd2,
+      name: phaseName,
+      valuesToShow: item.valuesToShow,
+      id: phaseId,
+      type: "task",
+      progress: 100,
+      dependencies: dependencies,
+      styles: color ? {
+        backgroundColor: color,
+        progressColor: color,
+        backgroundSelectedColor: selectedColor,
+        progressSelectedColor: selectedColor
+      } : {}
+    };
+  };
+  return mapPhase(item);
+};
+var convertDetailToTimeline = function convertDetailToTimeline(item, mainGanttStartDate, mainGanttEndDate) {
+  var id = item.id,
+    name = item.name,
+    schedule = item.schedule;
+  var getDatesForTask = function getDatesForTask(item) {
+    var start = mainGanttStartDate != null ? mainGanttStartDate : "";
+    var end = mainGanttEndDate != null ? mainGanttEndDate : "";
+    for (var i = 0; i < item.schedule.length; i++) {
+      var lstart = item.schedule[i].startDate;
+      var lend = item.schedule[i].endDate;
+      if (!start || lstart.localeCompare(start) < 0) {
+        start = lstart;
+      }
+      if (!end || lend.localeCompare(end) > 0) {
+        end = lend;
+      }
+    }
+    return validDates(start, end);
+  };
+  var _getDatesForTask = getDatesForTask(item),
+    start = _getDatesForTask.start,
+    end = _getDatesForTask.end;
+  var convertToFrame = function convertToFrame(x) {
+    var startDate = x.startDate,
+      endDate = x.endDate,
+      color = x.color,
+      selectedColor = x.selectedColor;
+    var _validDates3 = validDates(startDate, endDate),
+      start = _validDates3.start,
+      end = _validDates3.end;
+    return {
+      start: start,
+      end: end,
+      backgroundColor: color != null ? color : "0xffffff",
+      backgroundSelectedColor: selectedColor != null ? selectedColor : color
+    };
+  };
+  var defaultColor = "#595959";
+  return {
+    id: id,
+    type: "timeline",
+    timeline: schedule.map(convertToFrame),
+    name: name,
+    valuesToShow: item.valuesToShow,
+    start: start,
+    end: end,
+    progress: 100,
+    styles: {
+      backgroundColor: defaultColor,
+      progressColor: defaultColor,
+      backgroundSelectedColor: defaultColor,
+      progressSelectedColor: defaultColor
+    }
+  };
+};
+var isDetail = function isDetail(row) {
+  return row && row.schedule && row.schedule.length !== 0;
+};
+var convertProjectToTasks = function convertProjectToTasks(item, mainGanttStartDate, mainGanttEndDate) {
+  if (!isDetail(item)) {
+    var _row$phases;
+    var row = item;
+    var _validDates4 = validDates(row.startDate, row.endDate),
+      start = _validDates4.start,
+      end = _validDates4.end;
+    var _validDates5 = validDates(row.secondaryStartDate, row.secondaryEndDate),
+      start2 = _validDates5.start,
+      end2 = _validDates5.end;
+    var mainTask = {
+      start: start,
+      end: end,
+      id: row.id,
+      name: row.name,
+      type: row.type,
+      valuesToShow: row.valuesToShow,
+      secondaryStart: start2,
+      secondaryEnd: end2,
+      progress: 100,
+      isDisabled: false,
+      hideChildren: false
+    };
+    var children1 = ((_row$phases = row.phases) != null ? _row$phases : []).map(convertPhaseToTask);
+    return [mainTask].concat(children1);
+  } else {
+    var _row = item;
+    return [_extends({}, convertDetailToTimeline(_row, mainGanttStartDate, mainGanttEndDate))];
+  }
+};
+var mergeTaskIntoProjects = function mergeTaskIntoProjects(projects, _ref2) {
+  var id = _ref2.id,
+    start = _ref2.start,
+    end = _ref2.end;
+  return projects.map(function (project) {
+    return project.id === id ? withNewDates(project, start, end) : project;
+  });
+};
+var mergeTaskIntoPhases = function mergeTaskIntoPhases(phases, _ref3) {
+  var id = _ref3.id,
+    start = _ref3.start,
+    end = _ref3.end;
+  if (phases) {
+    return phases.map(function (phase) {
+      return phase.id === id ? withNewDates(phase, start, end) : phase;
+    });
+  }
+  return undefined;
+};
+var withNewDates = function withNewDates(p, start, end) {
+  var startDate = formatToIsoDate(start);
+  var endDate = formatToIsoDate(end);
+  var extra = {
+    startDate: startDate,
+    endDate: endDate
+  };
+  return _extends({}, p, extra);
+};
+var getProjectById = function getProjectById(id, items) {
+  for (var i = 0; i < items.length; i++) {
+    if (items[i].id === id) {
+      return items[i];
+    }
+  }
+  return undefined;
+};
+var getPhaseById = function getPhaseById(id, items) {
+  for (var i = 0; i < items.length; i++) {
+    if (isDetail(items[i])) {
+      continue;
+    }
+    var item = items[i];
+    if (!item.phases) {
+      continue;
+    }
+    for (var j = 0; j < item.phases.length; j++) if (item.phases[j].id === id) {
+      return item.phases[j];
+    }
+  }
+  return undefined;
+};
+
 var intlDTCache = {};
 var getCachedDateTimeFormat = function getCachedDateTimeFormat(locString, opts) {
   if (opts === void 0) {
@@ -8414,80 +8657,157 @@ var getCachedDateTimeFormat = function getCachedDateTimeFormat(locString, opts)
   return dtf;
 };
 var addToDate = function addToDate(date, quantity, scale) {
-  var newDate = new Date(date.getFullYear() + (scale === 'year' ? quantity : 0), date.getMonth() + (scale === 'month' ? quantity : 0), date.getDate() + (scale === 'day' ? quantity : 0), date.getHours() + (scale === 'hour' ? quantity : 0), date.getMinutes() + (scale === 'minute' ? quantity : 0), date.getSeconds() + (scale === 'second' ? quantity : 0), date.getMilliseconds() + (scale === 'millisecond' ? quantity : 0));
+  var newDate = new Date(date.getFullYear() + (scale === "year" ? quantity : 0), date.getMonth() + (scale === "month" ? quantity : 0), date.getDate() + (scale === "day" ? quantity : 0), date.getHours() + (scale === "hour" ? quantity : 0), date.getMinutes() + (scale === "minute" ? quantity : 0), date.getSeconds() + (scale === "second" ? quantity : 0), date.getMilliseconds() + (scale === "millisecond" ? quantity : 0));
   return newDate;
 };
 var startOfDate = function startOfDate(date, scale) {
-  var scores = ['millisecond', 'second', 'minute', 'hour', 'day', 'month', 'year'];
+  var scores = ["millisecond", "second", "minute", "hour", "day", "month", "year"];
   var shouldReset = function shouldReset(_scale) {
     var maxScore = scores.indexOf(scale);
     return scores.indexOf(_scale) <= maxScore;
   };
-  var newDate = new Date(date.getFullYear(), shouldReset('year') ? 0 : date.getMonth(), shouldReset('month') ? 1 : date.getDate(), shouldReset('day') ? 0 : date.getHours(), shouldReset('hour') ? 0 : date.getMinutes(), shouldReset('minute') ? 0 : date.getSeconds(), shouldReset('second') ? 0 : date.getMilliseconds());
+  var newDate = new Date(date.getFullYear(), shouldReset("year") ? 0 : date.getMonth(), shouldReset("month") ? 1 : date.getDate(), shouldReset("day") ? 0 : date.getHours(), shouldReset("hour") ? 0 : date.getMinutes(), shouldReset("minute") ? 0 : date.getSeconds(), shouldReset("second") ? 0 : date.getMilliseconds());
   return newDate;
 };
-var ganttDateRange = function ganttDateRange(tasks, viewMode, preStepsCount, showSecondaryDates) {
-  var newStartDate = tasks[0].start;
-  var newEndDate = tasks[0].start;
-  for (var _iterator = _createForOfIteratorHelperLoose(tasks), _step; !(_step = _iterator()).done;) {
-    var task = _step.value;
-    if (task.start < newStartDate) {
-      newStartDate = task.start;
+var ganttDateRangeFromTask = function ganttDateRangeFromTask(tasks, viewMode, preStepsCount, showSecondaryDates, mainGanttStartDate, mainGanttEndDate) {
+  var dates = [];
+  tasks.forEach(function (item) {
+    dates.push({
+      start: item.start,
+      end: item.end,
+      secondaryStart: item.secondaryStart,
+      secondaryEnd: item.secondaryEnd
+    });
+  });
+  if (mainGanttStartDate && mainGanttEndDate) {
+    dates.push({
+      start: mainGanttStartDate,
+      end: mainGanttEndDate,
+      secondaryStart: undefined,
+      secondaryEnd: undefined
+    });
+  }
+  return ganttDateRangeGeneric(dates, viewMode, preStepsCount, showSecondaryDates);
+};
+var calculateDisplayedDateRange = function calculateDisplayedDateRange(mainGanttItems, timeUnit, mainGanttDoubleView, secondaryGanttItems, preStepsCount) {
+  var dates = ganttDateRangeFromGanttTask(mainGanttItems, toViewMode(timeUnit), preStepsCount != null ? preStepsCount : 1, mainGanttDoubleView);
+  if (secondaryGanttItems) {
+    var dates2 = ganttDateRangeFromDetail(secondaryGanttItems, toViewMode(timeUnit), preStepsCount != null ? preStepsCount : 1, mainGanttDoubleView);
+    if (dates2[0] < dates[0]) {
+      dates[0] = dates2[0];
+    }
+    if (dates2[1] > dates[1]) {
+      dates[1] = dates2[1];
+    }
+  }
+  return {
+    displayedStartDate: dates[0],
+    displayedEndDate: dates[1]
+  };
+};
+var ganttDateRangeFromGanttTask = function ganttDateRangeFromGanttTask(tasks, viewMode, preStepsCount, showSecondaryDates) {
+  var dates = [];
+  tasks.forEach(function (item) {
+    var _item$phases;
+    dates.push({
+      start: parseToDayStart(item.startDate),
+      end: parseToDayEnd(item.endDate),
+      secondaryStart: parseToDayStart(item.secondaryStartDate),
+      secondaryEnd: parseToDayEnd(item.secondaryEndDate)
+    });
+    (_item$phases = item.phases) === null || _item$phases === void 0 ? void 0 : _item$phases.forEach(function (phase) {
+      dates.push({
+        start: parseToDayStart(phase.startDate),
+        end: parseToDayEnd(phase.endDate),
+        secondaryStart: parseToDayStart(phase.secondaryStartDate),
+        secondaryEnd: parseToDayEnd(phase.secondaryEndDate)
+      });
+    });
+  });
+  return ganttDateRangeGeneric(dates, viewMode, preStepsCount, showSecondaryDates, true);
+};
+var ganttDateRangeFromDetail = function ganttDateRangeFromDetail(details, viewMode, preStepsCount, showSecondaryDates) {
+  var dates = [];
+  details.forEach(function (item) {
+    var scheduleItems = item.schedule;
+    if (scheduleItems) {
+      scheduleItems.forEach(function (item) {
+        dates.push({
+          start: parseToDayStart(item.startDate),
+          end: parseToDayEnd(item.endDate),
+          secondaryStart: undefined,
+          secondaryEnd: undefined
+        });
+      });
+    }
+  });
+  return ganttDateRangeGeneric(dates, viewMode, preStepsCount, showSecondaryDates, true);
+};
+var ganttDateRangeGeneric = function ganttDateRangeGeneric(dates, viewMode, preStepsCount, showSecondaryDates, realDates) {
+  var newStartDate = dates[0].start;
+  var newEndDate = dates[0].end;
+  for (var _iterator = _createForOfIteratorHelperLoose(dates), _step; !(_step = _iterator()).done;) {
+    var d = _step.value;
+    if (d.start < newStartDate) {
+      newStartDate = d.start;
     }
-    if (task.end > newEndDate) {
-      newEndDate = task.end;
+    if (d.end > newEndDate) {
+      newEndDate = d.end;
     }
     if (showSecondaryDates) {
-      if (task.secondaryStart && task.secondaryStart < newStartDate) {
-        newStartDate = task.secondaryStart;
+      if (d.secondaryStart && d.secondaryStart < newStartDate) {
+        newStartDate = d.secondaryStart;
       }
-      if (task.secondaryEnd && task.secondaryEnd > newEndDate) {
-        newEndDate = task.secondaryEnd;
+      if (d.secondaryEnd && d.secondaryEnd > newEndDate) {
+        newEndDate = d.secondaryEnd;
       }
     }
   }
+  if (realDates) {
+    return [newStartDate, newEndDate];
+  }
   switch (viewMode) {
     case ViewMode.Year:
-      newStartDate = addToDate(newStartDate, -1, 'year');
-      newStartDate = startOfDate(newStartDate, 'year');
-      newEndDate = addToDate(newEndDate, 1, 'year');
-      newEndDate = startOfDate(newEndDate, 'year');
+      newStartDate = addToDate(newStartDate, -1, "year");
+      newStartDate = startOfDate(newStartDate, "year");
+      newEndDate = addToDate(newEndDate, 1, "year");
+      newEndDate = startOfDate(newEndDate, "year");
       break;
     case ViewMode.Month:
-      newStartDate = addToDate(newStartDate, -1 * preStepsCount, 'month');
-      newStartDate = startOfDate(newStartDate, 'month');
-      newEndDate = addToDate(newEndDate, 1, 'year');
-      newEndDate = startOfDate(newEndDate, 'year');
+      newStartDate = addToDate(newStartDate, -1 * preStepsCount, "month");
+      newStartDate = startOfDate(newStartDate, "month");
+      newEndDate = addToDate(newEndDate, 1, "year");
+      newEndDate = startOfDate(newEndDate, "year");
       break;
     case ViewMode.Week:
-      newStartDate = startOfDate(newStartDate, 'day');
-      newStartDate = addToDate(getMonday(newStartDate), -7 * preStepsCount, 'day');
-      newEndDate = startOfDate(newEndDate, 'day');
-      newEndDate = addToDate(newEndDate, 1.5, 'month');
+      newStartDate = startOfDate(newStartDate, "day");
+      newStartDate = addToDate(getMonday(newStartDate), -7 * preStepsCount, "day");
+      newEndDate = startOfDate(newEndDate, "day");
+      newEndDate = addToDate(newEndDate, 1.5, "month");
       break;
     case ViewMode.Day:
-      newStartDate = startOfDate(newStartDate, 'day');
-      newStartDate = addToDate(newStartDate, -1 * preStepsCount, 'day');
-      newEndDate = startOfDate(newEndDate, 'day');
-      newEndDate = addToDate(newEndDate, 19, 'day');
+      newStartDate = startOfDate(newStartDate, "day");
+      newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
+      newEndDate = startOfDate(newEndDate, "day");
+      newEndDate = addToDate(newEndDate, 19, "day");
       break;
     case ViewMode.QuarterDay:
-      newStartDate = startOfDate(newStartDate, 'day');
-      newStartDate = addToDate(newStartDate, -1 * preStepsCount, 'day');
-      newEndDate = startOfDate(newEndDate, 'day');
-      newEndDate = addToDate(newEndDate, 66, 'hour');
+      newStartDate = startOfDate(newStartDate, "day");
+      newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
+      newEndDate = startOfDate(newEndDate, "day");
+      newEndDate = addToDate(newEndDate, 66, "hour");
       break;
     case ViewMode.HalfDay:
-      newStartDate = startOfDate(newStartDate, 'day');
-      newStartDate = addToDate(newStartDate, -1 * preStepsCount, 'day');
-      newEndDate = startOfDate(newEndDate, 'day');
-      newEndDate = addToDate(newEndDate, 108, 'hour');
+      newStartDate = startOfDate(newStartDate, "day");
+      newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
+      newEndDate = startOfDate(newEndDate, "day");
+      newEndDate = addToDate(newEndDate, 108, "hour");
       break;
     case ViewMode.Hour:
-      newStartDate = startOfDate(newStartDate, 'hour');
-      newStartDate = addToDate(newStartDate, -1 * preStepsCount, 'hour');
-      newEndDate = startOfDate(newEndDate, 'day');
-      newEndDate = addToDate(newEndDate, 1, 'day');
+      newStartDate = startOfDate(newStartDate, "hour");
+      newStartDate = addToDate(newStartDate, -1 * preStepsCount, "hour");
+      newEndDate = startOfDate(newEndDate, "day");
+      newEndDate = addToDate(newEndDate, 1, "day");
       break;
   }
   return [newStartDate, newEndDate];
@@ -8498,25 +8818,25 @@ var seedDates = function seedDates(startDate, endDate, viewMode) {
   while (currentDate < endDate) {
     switch (viewMode) {
       case ViewMode.Year:
-        currentDate = addToDate(currentDate, 1, 'year');
+        currentDate = addToDate(currentDate, 1, "year");
         break;
       case ViewMode.Month:
-        currentDate = addToDate(currentDate, 1, 'month');
+        currentDate = addToDate(currentDate, 1, "month");
         break;
       case ViewMode.Week:
-        currentDate = addToDate(currentDate, 7, 'day');
+        currentDate = addToDate(currentDate, 7, "day");
         break;
       case ViewMode.Day:
-        currentDate = addToDate(currentDate, 1, 'day');
+        currentDate = addToDate(currentDate, 1, "day");
         break;
       case ViewMode.HalfDay:
-        currentDate = addToDate(currentDate, 12, 'hour');
+        currentDate = addToDate(currentDate, 12, "hour");
         break;
       case ViewMode.QuarterDay:
-        currentDate = addToDate(currentDate, 6, 'hour');
+        currentDate = addToDate(currentDate, 6, "hour");
         break;
       case ViewMode.Hour:
-        currentDate = addToDate(currentDate, 1, 'hour');
+        currentDate = addToDate(currentDate, 1, "hour");
         break;
     }
     dates.push(currentDate);
@@ -8525,7 +8845,7 @@ var seedDates = function seedDates(startDate, endDate, viewMode) {
 };
 var getLocaleMonth = function getLocaleMonth(date, locale) {
   var bottomValue = getCachedDateTimeFormat(locale, {
-    month: 'long'
+    month: "long"
   }).format(date);
   bottomValue = bottomValue.replace(bottomValue[0], bottomValue[0].toLocaleUpperCase());
   return bottomValue;
@@ -8575,15 +8895,15 @@ var defaultDateTimeFormatters = {
     return "W" + getWeekNumberISO8601(date);
   },
   day: function day(date, locale) {
-    return getLocalDayOfWeek(date, locale, 'short') + ", " + date.getDate().toString();
+    return getLocalDayOfWeek(date, locale, "short") + ", " + date.getDate().toString();
   },
   hour: function hour(date, locale) {
     return "" + getCachedDateTimeFormat(locale, {
-      hour: 'numeric'
+      hour: "numeric"
     }).format(date);
   },
   dayAndMonth: function dayAndMonth(date, locale) {
-    return getLocalDayOfWeek(date, locale, 'short') + ", " + date.getDate() + " " + getLocaleMonth(date, locale);
+    return getLocalDayOfWeek(date, locale, "short") + ", " + date.getDate() + " " + getLocaleMonth(date, locale);
   }
 };
 
@@ -8903,9 +9223,7 @@ var GridBody = function GridBody(_ref) {
     dates = _ref.dates,
     rowHeight = _ref.rowHeight,
     svgWidth = _ref.svgWidth,
-    columnWidth = _ref.columnWidth,
-    todayColor = _ref.todayColor,
-    rtl = _ref.rtl;
+    columnWidth = _ref.columnWidth;
   var y = 0;
   var gridRows = [];
   var rowLines = [react.createElement("line", {
@@ -8919,7 +9237,7 @@ var GridBody = function GridBody(_ref) {
   for (var _iterator = _createForOfIteratorHelperLoose(tasks), _step; !(_step = _iterator()).done;) {
     var task = _step.value;
     gridRows.push(react.createElement("rect", {
-      key: 'Row' + task.id,
+      key: "Row" + task.id,
       x: "0",
       y: y,
       width: svgWidth,
@@ -8927,7 +9245,7 @@ var GridBody = function GridBody(_ref) {
       className: styles$4.gridRow
     }));
     rowLines.push(react.createElement("line", {
-      key: 'RowLine' + task.id,
+      key: "RowLine" + task.id,
       x: "0",
       y1: y + rowHeight,
       x2: svgWidth,
@@ -8939,7 +9257,6 @@ var GridBody = function GridBody(_ref) {
   var now = new Date();
   var tickX = 0;
   var ticks = [];
-  var today = react.createElement("rect", null);
   for (var i = 0; i < dates.length; i++) {
     var date = dates[i];
     ticks.push(react.createElement("line", {
@@ -8950,24 +9267,7 @@ var GridBody = function GridBody(_ref) {
       y2: y,
       className: styles$4.gridTick
     }));
-    if (i + 1 !== dates.length && date.getTime() < now.getTime() && dates[i + 1].getTime() >= now.getTime() || i !== 0 && i + 1 === dates.length && date.getTime() < now.getTime() && addToDate(date, date.getTime() - dates[i - 1].getTime(), 'millisecond').getTime() >= now.getTime()) {
-      today = react.createElement("rect", {
-        x: tickX + columnWidth / 2 - 1,
-        y: 0,
-        width: 2,
-        height: y,
-        fill: todayColor
-      });
-    }
-    if (rtl && i + 1 !== dates.length && date.getTime() >= now.getTime() && dates[i + 1].getTime() < now.getTime()) {
-      today = react.createElement("rect", {
-        x: tickX + columnWidth / 2,
-        y: 0,
-        width: 2,
-        height: y,
-        fill: todayColor
-      });
-    }
+    if (i + 1 !== dates.length && date.getTime() < now.getTime() && dates[i + 1].getTime() >= now.getTime() || i !== 0 && i + 1 === dates.length && date.getTime() < now.getTime() && addToDate(date, date.getTime() - dates[i - 1].getTime(), "millisecond").getTime() >= now.getTime()) ;
     tickX += columnWidth;
   }
   return react.createElement("g", {
@@ -8978,9 +9278,7 @@ var GridBody = function GridBody(_ref) {
     className: "rowLines"
   }, rowLines), react.createElement("g", {
     className: "ticks"
-  }, ticks), react.createElement("g", {
-    className: "today"
-  }, today));
+  }, ticks));
 };
 
 var Grid = function Grid(props) {
@@ -9050,7 +9348,8 @@ var Calendar = function Calendar(_ref) {
     fontSize = _ref.fontSize,
     dateTimeFormatters = _ref.dateTimeFormatters,
     _ref$singleLineHeader = _ref.singleLineHeader,
-    singleLineHeader = _ref$singleLineHeader === void 0 ? false : _ref$singleLineHeader;
+    singleLineHeader = _ref$singleLineHeader === void 0 ? false : _ref$singleLineHeader,
+    currentDateIndicator = _ref.currentDateIndicator;
   var simplifiedHeader = singleLineHeader && dateSetup.viewMode !== ViewMode.Year;
   var TopCal = simplifiedHeader ? SinglePartOfCalendar : TopPartOfCalendar;
   var formatYear = (_dateTimeFormatters$y = dateTimeFormatters === null || dateTimeFormatters === void 0 ? void 0 : dateTimeFormatters.year) != null ? _dateTimeFormatters$y : defaultDateTimeFormatters.year;
@@ -9136,7 +9435,7 @@ var Calendar = function Calendar(_ref) {
     var dates = dateSetup.dates;
     for (var i = dates.length - 1; i >= 0; i--) {
       var date = dates[i];
-      var topValue = '';
+      var topValue = "";
       if (i === 0 || date.getMonth() !== dates[i - 1].getMonth()) {
         topValue = formatMonthAndYear(date, locale);
       }
@@ -9271,7 +9570,12 @@ var Calendar = function Calendar(_ref) {
     width: columnWidth * dateSetup.dates.length,
     height: headerHeight,
     className: styles$5.calendarHeader
-  }), simplifiedHeader ? null : bottomValues, " ", topValues);
+  }), simplifiedHeader ? null : bottomValues, " ", topValues, currentDateIndicator && react.createElement("circle", {
+    fill: currentDateIndicator.color,
+    cx: currentDateIndicator.x + 2.5,
+    cy: headerHeight - 8,
+    r: "8"
+  }));
 };
 
 // A type of promise-like that resolves synchronously and supports only one observer
@@ -9510,6 +9814,9 @@ var taskXCoordinate = function taskXCoordinate(xDate, dates, columnWidth) {
   var index = dates.findIndex(function (d) {
     return d.getTime() >= xDate.getTime();
   }) - 1;
+  if (index < 0) {
+    return 0;
+  }
   var remainderMillis = xDate.getTime() - dates[index].getTime();
   var percentOfInterval = remainderMillis / (dates[index + 1].getTime() - dates[index].getTime());
   var x = index * columnWidth + percentOfInterval * columnWidth;
@@ -9667,6 +9974,15 @@ var handleTaskBySVGMouseEventForBar = function handleTaskBySVGMouseEventForBar(s
     changedTask: changedTask
   };
 };
+function calculateCurrentDateCalculator(dates, columnWidth) {
+  return taskXCoordinate(new Date(), dates, columnWidth);
+}
+function calculateProjection(start, end, dates, columnWidth) {
+  return {
+    x0: taskXCoordinate(start, dates, columnWidth),
+    xf: taskXCoordinate(end, dates, columnWidth)
+  };
+}
 
 function isKeyboardEvent(event) {
   return event.key !== undefined;
@@ -9929,11 +10245,15 @@ var style = {"barLabel":"_3zRJQ","barLabelOutside":"_3KcaM"};
 
 var Timeline = function Timeline(_ref) {
   var task = _ref.task,
-    isSelected = _ref.isSelected;
+    isSelected = _ref.isSelected,
+    onEventStart = _ref.onEventStart;
   var styles = task.styles;
   var col = isSelected ? styles.backgroundSelectedColor : styles.backgroundColor;
   return react.createElement("g", {
-    tabIndex: 0
+    tabIndex: 0,
+    onMouseDown: function onMouseDown(e) {
+      return onEventStart("move", task, e);
+    }
   }, react.createElement("rect", {
     fill: col,
     x: "0",
@@ -9944,6 +10264,9 @@ var Timeline = function Timeline(_ref) {
     ry: 0
   }), task.barChildren.map(function (bar) {
     return react.createElement("rect", {
+      style: {
+        cursor: "pointer"
+      },
       key: bar.id,
       fill: bar.styles.backgroundColor,
       x: bar.x1,
@@ -9989,7 +10312,7 @@ var TaskItem = function TaskItem(props) {
         setTaskItem(react.createElement(Bar, Object.assign({}, props)));
         break;
     }
-  }, [task.typeInternal, isSelected, props]);
+  }, [task, isSelected]);
   react.useEffect(function () {
     if (textRef.current) {
       setIsTextInside(textRef.current.getBBox().width < task.x2 - task.x1);
@@ -10057,6 +10380,12 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
     fontFamily = _ref.fontFamily,
     fontSize = _ref.fontSize,
     rtl = _ref.rtl,
+    _ref$hideLabel = _ref.hideLabel,
+    hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
+    _ref$showSecondaryDat = _ref.showSecondaryDates,
+    showSecondaryDates = _ref$showSecondaryDat === void 0 ? false : _ref$showSecondaryDat,
+    currentDateIndicator = _ref.currentDateIndicator,
+    projection = _ref.projection,
     setGanttEvent = _ref.setGanttEvent,
     setFailedTask = _ref.setFailedTask,
     setSelectedTask = _ref.setSelectedTask,
@@ -10064,11 +10393,7 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
     onProgressChange = _ref.onProgressChange,
     onDoubleClick = _ref.onDoubleClick,
     onClick = _ref.onClick,
-    onDelete = _ref.onDelete,
-    _ref$hideLabel = _ref.hideLabel,
-    hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
-    _ref$showSecondaryDat = _ref.showSecondaryDates,
-    showSecondaryDates = _ref$showSecondaryDat === void 0 ? false : _ref$showSecondaryDat;
+    onDelete = _ref.onDelete;
   var point = svg === null || svg === void 0 ? void 0 : (_svg$current = svg.current) === null || _svg$current === void 0 ? void 0 : _svg$current.createSVGPoint();
   var _useState = react.useState(0),
     xStep = _useState[0],
@@ -10256,7 +10581,20 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
   };
   return react.createElement("g", {
     className: "content"
-  }, react.createElement("g", {
+  }, currentDateIndicator && react.createElement("rect", {
+    fill: currentDateIndicator.color,
+    x: currentDateIndicator.x + 1.5,
+    y: "0",
+    width: "2",
+    height: "100%"
+  }), projection && react.createElement("rect", {
+    fill: projection.color,
+    x: projection.x0,
+    y: "0",
+    width: projection.xf - projection.x0,
+    height: "100%",
+    fillOpacity: "35%"
+  }), react.createElement("g", {
     className: "arrows",
     fill: arrowColor,
     stroke: arrowColor
@@ -10364,6 +10702,7 @@ var HorizontalScroll = function HorizontalScroll(_ref) {
       scrollRef.current.scrollLeft = scroll;
     }
   }, [scroll]);
+  console.log("HORIZONTAL-SCROLL svgWidth: " + svgWidth);
   return react.createElement("div", {
     dir: "ltr",
     style: {
@@ -10381,13 +10720,14 @@ var HorizontalScroll = function HorizontalScroll(_ref) {
 };
 
 var Gantt = function Gantt(_ref) {
-  var tasks = _ref.tasks,
+  var id = _ref.id,
+    tasks = _ref.tasks,
     _ref$headerHeight = _ref.headerHeight,
     headerHeight = _ref$headerHeight === void 0 ? 50 : _ref$headerHeight,
     _ref$columnWidth = _ref.columnWidth,
     columnWidth = _ref$columnWidth === void 0 ? 60 : _ref$columnWidth,
     _ref$listCellWidth = _ref.listCellWidth,
-    listCellWidth = _ref$listCellWidth === void 0 ? "155px" : _ref$listCellWidth,
+    listCellWidth = _ref$listCellWidth === void 0 ? "297px" : _ref$listCellWidth,
     _ref$rowHeight = _ref.rowHeight,
     rowHeight = _ref$rowHeight === void 0 ? 50 : _ref$rowHeight,
     _ref$ganttHeight = _ref.ganttHeight,
@@ -10437,7 +10777,7 @@ var Gantt = function Gantt(_ref) {
     _ref$arrowIndent = _ref.arrowIndent,
     arrowIndent = _ref$arrowIndent === void 0 ? 20 : _ref$arrowIndent,
     _ref$todayColor = _ref.todayColor,
-    todayColor = _ref$todayColor === void 0 ? "rgba(252, 248, 227, 0.5)" : _ref$todayColor,
+    todayColor = _ref$todayColor === void 0 ? "#ff0000" : _ref$todayColor,
     viewDate = _ref.viewDate,
     _ref$TooltipContent = _ref.TooltipContent,
     TooltipContent = _ref$TooltipContent === void 0 ? StandardTooltipContent : _ref$TooltipContent,
@@ -10445,13 +10785,6 @@ var Gantt = function Gantt(_ref) {
     TaskListHeader = _ref$TaskListHeader === void 0 ? TaskListHeaderDefault : _ref$TaskListHeader,
     _ref$TaskListTable = _ref.TaskListTable,
     TaskListTable = _ref$TaskListTable === void 0 ? TaskListTableDefault : _ref$TaskListTable,
-    onDateChange = _ref.onDateChange,
-    onProgressChange = _ref.onProgressChange,
-    onDoubleClick = _ref.onDoubleClick,
-    onClick = _ref.onClick,
-    onDelete = _ref.onDelete,
-    onSelect = _ref.onSelect,
-    onExpanderClick = _ref.onExpanderClick,
     dateTimeFormatters = _ref.dateTimeFormatters,
     _ref$singleLineHeader = _ref.singleLineHeader,
     singleLineHeader = _ref$singleLineHeader === void 0 ? false : _ref$singleLineHeader,
@@ -10460,13 +10793,23 @@ var Gantt = function Gantt(_ref) {
     _ref$showSecondaryDat = _ref.showSecondaryDates,
     showSecondaryDates = _ref$showSecondaryDat === void 0 ? false : _ref$showSecondaryDat,
     _ref$hideDependencies = _ref.hideDependencies,
-    hideDependencies = _ref$hideDependencies === void 0 ? false : _ref$hideDependencies;
+    hideDependencies = _ref$hideDependencies === void 0 ? false : _ref$hideDependencies,
+    projection = _ref.projection,
+    displayedStartDate = _ref.displayedStartDate,
+    displayedEndDate = _ref.displayedEndDate,
+    onDateChange = _ref.onDateChange,
+    onProgressChange = _ref.onProgressChange,
+    onDoubleClick = _ref.onDoubleClick,
+    onClick = _ref.onClick,
+    onDelete = _ref.onDelete,
+    onSelect = _ref.onSelect,
+    onExpanderClick = _ref.onExpanderClick;
   var wrapperRef = react.useRef(null);
   var taskListRef = react.useRef(null);
   var _useState = react.useState(function () {
-      var _ganttDateRange = ganttDateRange(tasks, viewMode, preStepsCount, showSecondaryDates),
-        startDate = _ganttDateRange[0],
-        endDate = _ganttDateRange[1];
+      var _ganttDateRangeFromTa = ganttDateRangeFromTask(tasks, viewMode, preStepsCount, showSecondaryDates, displayedStartDate, displayedEndDate),
+        startDate = _ganttDateRangeFromTa[0],
+        endDate = _ganttDateRangeFromTa[1];
       return {
         viewMode: viewMode,
         dates: seedDates(startDate, endDate, viewMode)
@@ -10520,6 +10863,19 @@ var Gantt = function Gantt(_ref) {
   var _useState12 = react.useState(false),
     ignoreScrollEvent = _useState12[0],
     setIgnoreScrollEvent = _useState12[1];
+  var _useState13 = react.useState(),
+    currentDateIndicatorContent = _useState13[0],
+    setCurrentDateIndicatorContent = _useState13[1];
+  var _useState14 = react.useState(),
+    projectionContent = _useState14[0],
+    setProjectionContent = _useState14[1];
+  react.useEffect(function () {
+    window.addEventListener("gantt-sync-scroll-event", function (e) {
+      if (e.detail.id !== id) {
+        setScrollX(e.detail.scrollX);
+      }
+    });
+  }, [id]);
   react.useEffect(function () {
     var filteredTasks;
     if (onExpanderClick) {
@@ -10528,9 +10884,9 @@ var Gantt = function Gantt(_ref) {
       filteredTasks = tasks;
     }
     filteredTasks = filteredTasks.sort(sortTasks);
-    var _ganttDateRange2 = ganttDateRange(filteredTasks, viewMode, preStepsCount, showSecondaryDates),
-      startDate = _ganttDateRange2[0],
-      endDate = _ganttDateRange2[1];
+    var _ganttDateRangeFromTa2 = ganttDateRangeFromTask(filteredTasks, viewMode, preStepsCount, showSecondaryDates, displayedStartDate, displayedEndDate),
+      startDate = _ganttDateRangeFromTa2[0],
+      endDate = _ganttDateRangeFromTa2[1];
     var newDates = seedDates(startDate, endDate, viewMode);
     if (rtl) {
       newDates = newDates.reverse();
@@ -10543,7 +10899,7 @@ var Gantt = function Gantt(_ref) {
       viewMode: viewMode
     });
     setBarTasks(convertToBarTasks(filteredTasks, newDates, columnWidth, rowHeight, taskHeight, projectHeight, timelineHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, showSecondaryDates));
-  }, [tasks, viewMode, preStepsCount, rowHeight, barCornerRadius, columnWidth, taskHeight, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, rtl, scrollX, onExpanderClick]);
+  }, [tasks, viewMode, preStepsCount, rowHeight, barCornerRadius, columnWidth, taskHeight, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, rtl, scrollX, onExpanderClick, showSecondaryDates, projectHeight, timelineHeight, displayedStartDate, displayedEndDate]);
   react.useEffect(function () {
     if (viewMode === dateSetup.viewMode && (viewDate && !currentViewDate || viewDate && (currentViewDate === null || currentViewDate === void 0 ? void 0 : currentViewDate.valueOf()) !== viewDate.valueOf())) {
       var dates = dateSetup.dates;
@@ -10655,11 +11011,20 @@ var Gantt = function Gantt(_ref) {
     if (scrollX !== event.currentTarget.scrollLeft && !ignoreScrollEvent) {
       setScrollX(event.currentTarget.scrollLeft);
       setIgnoreScrollEvent(true);
+      window.dispatchEvent(new CustomEvent("gantt-sync-scroll-event", {
+        detail: {
+          componentId: id,
+          scrollX: event.currentTarget.scrollLeft
+        }
+      }));
     } else {
       setIgnoreScrollEvent(false);
     }
   };
   var handleKeyDown = function handleKeyDown(event) {
+    if (event.target.tagName === "INPUT") {
+      return;
+    }
     event.preventDefault();
     var newScrollY = scrollY;
     var newScrollX = scrollX;
@@ -10691,6 +11056,12 @@ var Gantt = function Gantt(_ref) {
         newScrollX = svgWidth;
       }
       setScrollX(newScrollX);
+      window.dispatchEvent(new CustomEvent("gantt-sync-scroll-event", {
+        detail: {
+          componentId: id,
+          scrollX: newScrollX
+        }
+      }));
     } else {
       if (newScrollY < 0) {
         newScrollY = 0;
@@ -10701,6 +11072,29 @@ var Gantt = function Gantt(_ref) {
     }
     setIgnoreScrollEvent(true);
   };
+  react.useEffect(function () {
+    var x = calculateCurrentDateCalculator(dateSetup.dates, columnWidth);
+    if (x !== 0) {
+      setCurrentDateIndicatorContent({
+        color: todayColor,
+        x: x
+      });
+    }
+  }, [columnWidth, dateSetup.dates, todayColor]);
+  react.useEffect(function () {
+    if (projection) {
+      var _calculateProjection = calculateProjection(projection.start, projection.end, dateSetup.dates, columnWidth),
+        x0 = _calculateProjection.x0,
+        xf = _calculateProjection.xf;
+      setProjectionContent({
+        x0: x0,
+        xf: xf,
+        color: projection.color
+      });
+    } else {
+      setProjectionContent(undefined);
+    }
+  }, [columnWidth, dateSetup.dates, projection]);
   var handleSelectedTask = function handleSelectedTask(taskId) {
     var newSelectedTask = barTasks.find(function (t) {
       return t.id === taskId;
@@ -10744,7 +11138,8 @@ var Gantt = function Gantt(_ref) {
     fontSize: fontSize,
     rtl: rtl,
     dateTimeFormatters: dateTimeFormatters,
-    singleLineHeader: singleLineHeader
+    singleLineHeader: singleLineHeader,
+    currentDateIndicator: currentDateIndicatorContent
   };
   var barProps = {
     tasks: barTasks,
@@ -10761,6 +11156,11 @@ var Gantt = function Gantt(_ref) {
     arrowIndent: arrowIndent,
     svgWidth: svgWidth,
     rtl: rtl,
+    hideLabel: hideLabel,
+    showSecondaryDates: showSecondaryDates,
+    ganttHeight: ganttHeight,
+    currentDateIndicator: currentDateIndicatorContent,
+    projection: projectionContent,
     setGanttEvent: setGanttEvent,
     setFailedTask: setFailedTask,
     setSelectedTask: handleSelectedTask,
@@ -10768,9 +11168,7 @@ var Gantt = function Gantt(_ref) {
     onProgressChange: onProgressChange,
     onDoubleClick: onDoubleClick,
     onClick: onClick,
-    onDelete: onDelete,
-    hideLabel: hideLabel,
-    showSecondaryDates: showSecondaryDates
+    onDelete: onDelete
   };
   var tableProps = {
     rowHeight: rowHeight,
@@ -10833,195 +11231,6 @@ var Gantt = function Gantt(_ref) {
   }));
 };
 
-var TimeUnit;
-(function (TimeUnit) {
-  TimeUnit["DAY"] = "days";
-  TimeUnit["WEEK"] = "weeks";
-  TimeUnit["MONTH"] = "months";
-  TimeUnit["YEAR"] = "YEAR";
-})(TimeUnit || (TimeUnit = {}));
-
-var parseToDayStart = function parseToDayStart(ymd) {
-  return luxon.DateTime.fromISO(ymd).toJSDate();
-};
-var parseToDayEnd = function parseToDayEnd(endDate) {
-  return luxon.DateTime.fromISO(endDate).plus({
-    seconds: 86400 - 1
-  }).toJSDate();
-};
-var formatToIsoDate = function formatToIsoDate(date) {
-  return luxon.DateTime.fromJSDate(date).toISODate();
-};
-var formatToLocaleSimple = function formatToLocaleSimple(date) {
-  return luxon.DateTime.fromJSDate(date).toFormat("dd/MM/yyyy");
-};
-function validDates(startDate, endDate, name) {
-  var _start;
-  var start = parseToDayStart(startDate);
-  var end = parseToDayEnd(endDate);
-  if (((_start = start) === null || _start === void 0 ? void 0 : _start.getTime()) > (end === null || end === void 0 ? void 0 : end.getTime())) {
-    start = parseToDayStart(endDate);
-    console.log("time-converters.ts validDates() Error date", {
-      name: name,
-      start: startDate,
-      end: endDate
-    });
-  }
-  return {
-    start: start,
-    end: end
-  };
-}
-
-var toViewMode = function toViewMode(timeUnit) {
-  switch (timeUnit) {
-    case TimeUnit.DAY:
-      return ViewMode.Day;
-    case TimeUnit.WEEK:
-      return ViewMode.Week;
-    case TimeUnit.MONTH:
-      return ViewMode.Month;
-    case TimeUnit.YEAR:
-      return ViewMode.Year;
-  }
-};
-var convertPhaseToTask = function convertPhaseToTask(item) {
-  var mapPhase = function mapPhase(_ref) {
-    var phaseStart = _ref.startDate,
-      phaseEnd = _ref.endDate,
-      secondaryStartDate = _ref.secondaryStartDate,
-      secondaryEndDate = _ref.secondaryEndDate,
-      phaseName = _ref.name,
-      phaseId = _ref.id,
-      color = _ref.color,
-      selectedColor = _ref.selectedColor,
-      dependencies = _ref.dependencies;
-    var _validDates = validDates(phaseStart, phaseEnd, phaseName),
-      start = _validDates.start,
-      end = _validDates.end;
-    var _validDates2 = validDates(secondaryStartDate, secondaryEndDate, phaseName),
-      phaseStart2 = _validDates2.start,
-      phaseEnd2 = _validDates2.end;
-    return {
-      start: start,
-      end: end,
-      secondaryStart: phaseStart2,
-      secondaryEnd: phaseEnd2,
-      name: phaseName,
-      valuesToShow: item.valuesToShow,
-      id: phaseId,
-      type: "task",
-      progress: 100,
-      dependencies: dependencies,
-      styles: color ? {
-        backgroundColor: color,
-        progressColor: color,
-        backgroundSelectedColor: selectedColor,
-        progressSelectedColor: selectedColor
-      } : {}
-    };
-  };
-  return mapPhase(item);
-};
-var convertDetailToTimeline = function convertDetailToTimeline(item) {
-  var id = item.id,
-    name = item.name,
-    schedule = item.schedule;
-  var convertToFrame = function convertToFrame(x) {
-    var startDate = x.startDate,
-      endDate = x.endDate,
-      color = x.color,
-      selectedColor = x.selectedColor;
-    var _validDates3 = validDates(startDate, endDate, "time frame"),
-      start = _validDates3.start,
-      end = _validDates3.end;
-    return {
-      start: start,
-      end: end,
-      backgroundColor: color != null ? color : "0xffffff",
-      backgroundSelectedColor: selectedColor != null ? selectedColor : color
-    };
-  };
-  var defaultColor = "#595959";
-  return {
-    id: id,
-    type: "timeline",
-    timeline: schedule.map(convertToFrame),
-    name: name,
-    valuesToShow: item.valuesToShow,
-    start: new Date(),
-    end: new Date(),
-    progress: 100,
-    styles: {
-      backgroundColor: defaultColor,
-      progressColor: defaultColor,
-      backgroundSelectedColor: defaultColor,
-      progressSelectedColor: defaultColor
-    }
-  };
-};
-var convertProjectToTasks = function convertProjectToTasks(_ref2) {
-  var id = _ref2.id,
-    name = _ref2.name,
-    valuesToShow = _ref2.valuesToShow,
-    startDate = _ref2.startDate,
-    endDate = _ref2.endDate,
-    phases = _ref2.phases,
-    details = _ref2.details,
-    secondaryStartDate = _ref2.secondaryStartDate,
-    secondaryEndDate = _ref2.secondaryEndDate;
-  var _validDates4 = validDates(startDate, endDate, name),
-    start = _validDates4.start,
-    end = _validDates4.end;
-  var _validDates5 = validDates(secondaryStartDate, secondaryEndDate, name),
-    start2 = _validDates5.start,
-    end2 = _validDates5.end;
-  var mainTask = {
-    start: start,
-    end: end,
-    id: id,
-    name: name,
-    valuesToShow: valuesToShow,
-    secondaryStart: start2,
-    secondaryEnd: end2,
-    type: "project",
-    progress: 100,
-    isDisabled: false,
-    hideChildren: false
-  };
-  var children1 = (phases != null ? phases : []).map(convertPhaseToTask);
-  var children2 = (details != null ? details : []).map(convertDetailToTimeline);
-  return [mainTask].concat(children1, children2);
-};
-var mergeTaskIntoProjects = function mergeTaskIntoProjects(projects, _ref3) {
-  var id = _ref3.id,
-    start = _ref3.start,
-    end = _ref3.end;
-  return projects.map(function (project) {
-    return project.id === id ? withNewDates(project, start, end) : project;
-  });
-};
-var mergeTaskIntoPhases = function mergeTaskIntoPhases(phases, _ref4) {
-  var id = _ref4.id,
-    start = _ref4.start,
-    end = _ref4.end;
-  if (phases) {
-    return phases.map(function (phase) {
-      return phase.id === id ? withNewDates(phase, start, end) : phase;
-    });
-  }
-  return undefined;
-};
-var withNewDates = function withNewDates(p, start, end) {
-  var startDate = formatToIsoDate(start);
-  var endDate = formatToIsoDate(end);
-  var extra = {
-    startDate: startDate,
-    endDate: endDate
-  };
-  return _extends({}, p, extra);
-};
-
 var cachedFormats = {};
 var getOrBuildCachedFormat = function getOrBuildCachedFormat(locale, options) {
   var _cachedFormats$key;
@@ -11034,8 +11243,8 @@ var format = function format(date, locale, options) {
     var format1 = getOrBuildCachedFormat(locale, options).format(date);
     return format1;
   } catch (e) {
-    console.log("time-formatters.ts format", date, locale, options);
-    console.log(e);
+    console.error("time-formatters.ts format", date, locale, options);
+    console.error(e);
   }
 };
 var dayFormatter = function dayFormatter(date, locale) {
@@ -11058,120 +11267,23 @@ var ganttDateTimeFormatters = {
   month: monthFormatter
 };
 
-var _excluded = ["projects", "timeUnit", "TooltipContent", "TaskListHeader", "TaskListTable", "onDateChange", "onClick", "stylingOptions"];
-var locale = "it-IT";
-var GanttByTask = function GanttByTask(_ref) {
-  var _stylingOptions$preSt, _DateTime$now$minus;
-  var _ref$projects = _ref.projects,
-    projects = _ref$projects === void 0 ? [] : _ref$projects,
-    _ref$timeUnit = _ref.timeUnit,
-    timeUnit = _ref$timeUnit === void 0 ? TimeUnit.DAY : _ref$timeUnit,
-    TooltipContent = _ref.TooltipContent,
-    TaskListHeader = _ref.TaskListHeader,
-    TaskListTable = _ref.TaskListTable,
-    onDateChange = _ref.onDateChange,
-    onClick = _ref.onClick,
-    _ref$stylingOptions = _ref.stylingOptions,
-    stylingOptions = _ref$stylingOptions === void 0 ? {} : _ref$stylingOptions,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _useState = react.useState(projects),
-    currentProjects = _useState[0],
-    setCurrentProjects = _useState[1];
-  react.useEffect(function () {
-    if (projects) setCurrentProjects(projects);
-  }, [projects]);
-  var _useState2 = react.useState(1),
-    key = _useState2[0],
-    setKey = _useState2[1];
-  var tasks = react.useMemo(function () {
-    setKey(function (k) {
-      return k + 1;
-    });
-    return currentProjects.flatMap(convertProjectToTasks);
-  }, [currentProjects]);
-  var getProjectById = function getProjectById(id) {
-    return currentProjects.find(function (p) {
-      return p.id === id;
-    });
-  };
-  var handleClick = function handleClick(task) {
-    var id = task === null || task === void 0 ? void 0 : task.id;
-    console.log("gantt-by-task.tsx onClick", id);
-    var project = getProjectById(id);
-    if (project) onClick === null || onClick === void 0 ? void 0 : onClick(project);
-    var phase = currentProjects.flatMap(function (p) {
-      return p.phases;
-    }).find(function (ph) {
-      return (ph === null || ph === void 0 ? void 0 : ph.id) === id;
-    });
-    if (phase) onClick === null || onClick === void 0 ? void 0 : onClick(phase);
-  };
-  var handleDateChange = function handleDateChange(task) {
-    var id = task === null || task === void 0 ? void 0 : task.id;
-    console.log("gantt-by-task.tsx onDateChange", id);
-    var project = getProjectById(id);
-    if (project) {
-      var result = mergeTaskIntoProjects(currentProjects, task);
-      setCurrentProjects(result);
-      var _project = result.find(function (p) {
-        return p.id === id;
-      });
-      if (_project) onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(_project);
-      return;
-    }
-    var parentOfClickedPhase = currentProjects.find(function (p) {
-      var _p$phases;
-      return (_p$phases = p.phases) === null || _p$phases === void 0 ? void 0 : _p$phases.some(function (ph) {
-        return (ph === null || ph === void 0 ? void 0 : ph.id) === id;
-      });
-    });
-    if (parentOfClickedPhase) {
-      var phases = mergeTaskIntoPhases(parentOfClickedPhase.phases, task);
-      var updatedProjects = currentProjects.map(function (p) {
-        return p.id === parentOfClickedPhase.id ? _extends({}, p, {
-          phases: phases
-        }) : p;
-      });
-      setCurrentProjects(updatedProjects);
-      var phase = updatedProjects.flatMap(function (p) {
-        return p.phases;
-      }).find(function (ph) {
-        return (ph === null || ph === void 0 ? void 0 : ph.id) === id;
-      });
-      if (phase) onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(phase);
-    }
-  };
-  var viewDate = luxon.DateTime.now().minus((_DateTime$now$minus = {}, _DateTime$now$minus[timeUnit] = (_stylingOptions$preSt = stylingOptions === null || stylingOptions === void 0 ? void 0 : stylingOptions.preStepsCount) != null ? _stylingOptions$preSt : 2, _DateTime$now$minus)).toJSDate();
-  console.log("gantt-by-task.tsx TASKS", tasks);
-  var returnElement = (tasks === null || tasks === void 0 ? void 0 : tasks.length) > 0 && react.createElement(Gantt, Object.assign({
-    key: key,
-    tasks: tasks,
-    locale: locale,
-    viewMode: toViewMode(timeUnit),
-    viewDate: viewDate,
-    onClick: handleClick,
-    onDateChange: handleDateChange,
-    TooltipContent: TooltipContent,
-    TaskListHeader: TaskListHeader,
-    TaskListTable: TaskListTable,
-    dateTimeFormatters: ganttDateTimeFormatters
-  }, stylingOptions, props));
-  if (returnElement) {
-    return returnElement;
-  } else {
-    return react.createElement("div", null);
-  }
-};
-
-var classes$1 = {"wrapper":"_37E9D","title":"_WrYI6","toggler":"_c53zr","switch":"_2eBO5","input":"_hiyro","slider":"_2HI58","label":"_2gSdA"};
+var classes$1 = {"wrapper":"_37E9D","title":"_WrYI6","toggler":"_c53zr","switch":"_2eBO5","input":"_hiyro","slider":"_2HI58","label":"_2gSdA","filter":"_2cfRI"};
 
-var CustomTaskListHeaderHOC = function CustomTaskListHeaderHOC(label, doubleView, setDoubleView) {
-  var CustomTaskListHeader = function CustomTaskListHeader() {
+var CustomTaskListHeaderHOC = function CustomTaskListHeaderHOC(label, doubleView, setDoubleView, onFilterInput) {
+  var CustomTaskListHeader = function CustomTaskListHeader(_ref) {
+    var headerHeight = _ref.headerHeight,
+      fontFamily = _ref.fontFamily,
+      fontSize = _ref.fontSize;
     return react.createElement("div", {
+      style: {
+        fontFamily: fontFamily,
+        fontSize: fontSize,
+        height: headerHeight
+      },
       className: classes$1.wrapper
     }, react.createElement("div", {
       className: classes$1.title
-    }, react.createElement("span", null, label)), react.createElement("div", {
+    }, react.createElement("span", null, label)), setDoubleView && react.createElement("div", {
       className: classes$1.toggler
     }, react.createElement("label", {
       htmlFor: "ch2",
@@ -11188,12 +11300,21 @@ var CustomTaskListHeaderHOC = function CustomTaskListHeaderHOC(label, doubleView
       className: classes$1.slider
     })), react.createElement("span", {
       className: classes$1.label
-    }, "Mostra previsioni")));
+    }, "Mostra previsioni")), react.createElement("div", {
+      className: classes$1.filter
+    }, react.createElement("input", {
+      type: "text",
+      name: "filter",
+      size: 30,
+      onInput: function onInput(e) {
+        return onFilterInput === null || onFilterInput === void 0 ? void 0 : onFilterInput(e);
+      }
+    })));
   };
   return CustomTaskListHeader;
 };
 
-var styles$9 = {"container":"_lEI6r","project":"_RU6Aa","main":"_30j6y","subrow":"_T0HQN","timeline":"_yp2DW","timelineWrapper":"_1H4ue"};
+var styles$9 = {"container":"_lEI6r","project":"_RU6Aa","main":"_30j6y","subrow":"_T0HQN","timeline":"_yp2DW"};
 
 var ProjectRow = function ProjectRow(_ref) {
   var _ref$task = _ref.task,
@@ -11219,7 +11340,7 @@ var ProjectRow = function ProjectRow(_ref) {
     "--grid-project-columns": str
   };
   return react.createElement("div", {
-    key: id,
+    key: "task_" + id,
     className: styles$9.project,
     style: customStyle,
     onClick: function onClick() {
@@ -11230,7 +11351,7 @@ var ProjectRow = function ProjectRow(_ref) {
     return react.createElement("span", {
       className: index === 0 ? styles$9.main : undefined,
       title: v.length > 10 ? v : undefined,
-      key: id + "_valuesToShow_" + index
+      key: "task_" + id + "_valuesToShow_" + index
     }, v === "#START#" ? formatToLocaleSimple(start) : v === "#END#" ? formatToLocaleSimple(end) : v);
   }));
 };
@@ -11259,7 +11380,7 @@ var SubRow = function SubRow(_ref2) {
     "--grid-fasi-columns": str
   };
   return react.createElement("div", {
-    key: id,
+    key: "phase_" + id,
     className: styles$9.subrow,
     style: customStyle,
     onClick: function onClick() {
@@ -11267,7 +11388,7 @@ var SubRow = function SubRow(_ref2) {
       onclickTaskList(id);
     }
   }, react.createElement("span", {
-    key: id + "_valuesToShow_color",
+    key: "phase_" + id + "_valuesToShow_color",
     style: {
       height: 16,
       width: 16,
@@ -11277,41 +11398,42 @@ var SubRow = function SubRow(_ref2) {
     return react.createElement("span", {
       className: index === 0 ? styles$9.main : undefined,
       title: v.length > 10 ? v : undefined,
-      key: id + "_valuesToShow_" + index
+      key: "phase_" + id + "_valuesToShow_" + index
     }, v === "#START#" ? formatToLocaleSimple(start) : v === "#END#" ? formatToLocaleSimple(end) : v);
   }));
 };
 var TimelineSubRow = function TimelineSubRow(_ref3) {
   var _ref3$task = _ref3.task,
     id = _ref3$task.id,
-    name = _ref3$task.name,
+    valuesToShow = _ref3$task.valuesToShow,
     rowHeight = _ref3.rowHeight,
     rowWidth = _ref3.rowWidth,
     fontFamily = _ref3.fontFamily,
     fontSize = _ref3.fontSize;
+  var str = "";
+  for (var i = 0; i < valuesToShow.length; i++) {
+    str += "1fr ";
+  }
+  var customStyle = {
+    height: rowHeight,
+    width: rowWidth,
+    fontFamily: fontFamily,
+    fontSize: fontSize,
+    "--grid-fasi-columns": str
+  };
   return react.createElement("div", {
-    key: id,
-    className: styles$9.timelineWrapper,
-    style: {
-      height: rowHeight,
-      width: rowWidth,
-      fontFamily: fontFamily,
-      fontSize: fontSize
-    }
-  }, react.createElement("div", {
+    key: "detail_" + id,
     className: styles$9.timeline,
-    style: {
-      height: rowHeight - 5
-    }
-  }, react.createElement("span", {
-    key: id + "_valuesToShow_0"
-  }, name), react.createElement("span", {
-    key: id + "_valuesToShow_1"
-  }, "A"), react.createElement("span", {
-    key: id + "_valuesToShow_2"
-  }, "A")));
+    style: customStyle
+  }, valuesToShow === null || valuesToShow === void 0 ? void 0 : valuesToShow.map(function (v, index) {
+    return react.createElement("span", {
+      className: index === 0 ? styles$9.main : undefined,
+      title: v.length > 10 ? v : undefined,
+      key: "detail_" + id + "_valuesToShow_" + index
+    }, v);
+  }));
 };
-var CustomTaskListTableHOC = function CustomTaskListTableHOC(onclickTaskList) {
+var CustomTaskListTableHOC = function CustomTaskListTableHOC(onclickTaskList, id) {
   var CustomTaskListTable = function CustomTaskListTable(_ref4) {
     var rowHeight = _ref4.rowHeight,
       rowWidth = _ref4.rowWidth,
@@ -11320,9 +11442,12 @@ var CustomTaskListTableHOC = function CustomTaskListTableHOC(onclickTaskList) {
       tasks = _ref4.tasks,
       setSelectedTask = _ref4.setSelectedTask;
     return react.createElement("div", {
-      className: styles$9.container
+      className: styles$9.container,
+      key: "tasks_container_" + id
     }, tasks.map(function (task) {
-      return react.createElement(react.Fragment, null, task.type === "project" && react.createElement(ProjectRow, {
+      return react.createElement(react.Fragment, {
+        key: task.id
+      }, task.type === "project" && react.createElement(ProjectRow, {
         key: task.id + "_" + task.type,
         task: task,
         rowHeight: rowHeight,
@@ -11407,49 +11532,258 @@ var Switcher = function Switcher(_ref) {
 };
 
 var Planner = function Planner(props) {
-  var _props$showSecondaryD, _props$taskListHeader, _props$taskListTableP, _props$tooltipContent;
+  var _props$secondaryGantt, _props$mainGantt$show, _props$mainGantt$task, _props$mainGantt$task2, _props$mainGantt$tool, _props$secondaryGantt3, _props$secondaryGantt4, _props$secondaryGantt5, _props$secondaryGantt6;
   var _useState = react.useState(TimeUnit.MONTH),
     timeUnit = _useState[0],
     setTimeUnit = _useState[1];
-  var _useState2 = react.useState((_props$showSecondaryD = props.showSecondaryDates) != null ? _props$showSecondaryD : false),
-    doubleView = _useState2[0],
-    setDoubleView = _useState2[1];
-  var commonProps = {
-    hideLabel: props.hideLabel,
-    showSecondaryDates: doubleView,
-    ganttHeight: props.ganttHeight,
-    hideDependencies: props.hideDependencies
+  var _useState2 = react.useState(props.mainGantt.items),
+    currentTasks = _useState2[0],
+    setCurrentTasks = _useState2[1];
+  var _useState3 = react.useState((_props$secondaryGantt = props.secondaryGantt) === null || _props$secondaryGantt === void 0 ? void 0 : _props$secondaryGantt.items),
+    currentDetails = _useState3[0],
+    setCurrentDetails = _useState3[1];
+  var _useState4 = react.useState((_props$mainGantt$show = props.mainGantt.showSecondaryDates) != null ? _props$mainGantt$show : false),
+    mainGanttDoubleView = _useState4[0],
+    setMainGanttDoubleView = _useState4[1];
+  var _useState5 = react.useState(calculateDisplayedDateRange(currentTasks, timeUnit, mainGanttDoubleView, currentDetails, props.preStepsCount)),
+    displayedDates = _useState5[0],
+    setDisplayedDates = _useState5[1];
+  var _useState6 = react.useState(),
+    viewDate = _useState6[0],
+    setViewDate = _useState6[1];
+  var _useState7 = react.useState(),
+    projection = _useState7[0],
+    setProjection = _useState7[1];
+  var locale = "it-IT";
+  var onFilterInput = function onFilterInput(e) {
+    console.log("PLANNER onFilterInput", e);
   };
-  console.log("planner.tsx commonProps", commonProps);
-  return react.createElement("div", {
-    style: {
-      maxWidth: "90vw"
+  var handleClick = function handleClick(row, onClick) {
+    if (!row) {
+      return;
+    }
+    if (row.type === "task" && props.secondaryGantt) {
+      var _phase$color;
+      var phase = row;
+      setProjection({
+        start: new Date(phase.startDate),
+        end: new Date(phase.endDate),
+        color: (_phase$color = phase.color) != null ? _phase$color : "#ED7D31"
+      });
+    } else {
+      setProjection(undefined);
     }
-  }, react.createElement(Switcher, {
+    onClick === null || onClick === void 0 ? void 0 : onClick(row);
+  };
+  var handleDateChange = function handleDateChange(task, currentProjects, onDateChange) {
+    var id = task === null || task === void 0 ? void 0 : task.id;
+    if (!id) {
+      return;
+    }
+    var row = getProjectById(id, currentProjects);
+    if (!row) {
+      row = getPhaseById(id, currentProjects);
+    }
+    if (!row) {
+      return;
+    }
+    if (row.type === "timeline") {
+      console.log("planner.tsx onDateChange for timeline not managed yet", id, row.type);
+      return;
+    }
+    if (row.type === "project") {
+      var result = mergeTaskIntoProjects(currentProjects, task);
+      row = getProjectById(row.id, result);
+      setViewDate(task.start);
+      setCurrentTasks(result);
+    } else if (row.type === "task") {
+      var parentOfClickedPhase = currentProjects.find(function (p) {
+        var _p$phases;
+        return (_p$phases = p.phases) === null || _p$phases === void 0 ? void 0 : _p$phases.some(function (ph) {
+          return (ph === null || ph === void 0 ? void 0 : ph.id) === id;
+        });
+      });
+      if (parentOfClickedPhase) {
+        var phases = mergeTaskIntoPhases(parentOfClickedPhase.phases, task);
+        var updatedProjects = currentProjects.map(function (p) {
+          return p.id === parentOfClickedPhase.id ? _extends({}, p, {
+            phases: phases
+          }) : p;
+        });
+        row = getPhaseById(row.id, updatedProjects);
+        if (props.secondaryGantt && row) {
+          var _row$color;
+          setProjection({
+            start: new Date(row.startDate),
+            end: new Date(row.endDate),
+            color: (_row$color = row.color) != null ? _row$color : "#ED7D31"
+          });
+        }
+        setViewDate(task.start);
+        setCurrentTasks(updatedProjects);
+      }
+    }
+    onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(row);
+  };
+  react.useEffect(function () {
+    var _props$secondaryGantt2;
+    setCurrentTasks(props.mainGantt.items);
+    setCurrentDetails((_props$secondaryGantt2 = props.secondaryGantt) === null || _props$secondaryGantt2 === void 0 ? void 0 : _props$secondaryGantt2.items);
+    setProjection(undefined);
+  }, [props]);
+  react.useEffect(function () {
+    var dates = calculateDisplayedDateRange(currentTasks, timeUnit, mainGanttDoubleView, currentDetails, props.preStepsCount);
+    setDisplayedDates(dates);
+    if (!viewDate) {
+      setViewDate(dates.displayedStartDate);
+    }
+  }, [currentTasks, currentDetails]);
+  var tasks = [];
+  for (var i = 0; i < currentTasks.length; i++) {
+    tasks.push.apply(tasks, convertProjectToTasks(currentTasks[i], formatToIsoDate(displayedDates.displayedStartDate), formatToIsoDate(displayedDates.displayedEndDate)));
+  }
+  var details = [];
+  if (currentDetails) {
+    for (var _i = 0; _i < currentDetails.length; _i++) {
+      details.push.apply(details, convertProjectToTasks(currentDetails[_i], formatToIsoDate(displayedDates.displayedStartDate), formatToIsoDate(displayedDates.displayedEndDate)));
+    }
+  }
+  return react.createElement("div", null, react.createElement(Switcher, {
     onTimeUnitChange: function onTimeUnitChange(timeUnit) {
       return setTimeUnit(timeUnit);
     }
-  }), react.createElement(GanttByTask, Object.assign({}, commonProps, {
-    projects: props.items,
-    timeUnit: timeUnit,
-    stylingOptions: props.stylingOptions,
-    onClick: function onClick(row) {
-      var _props$onClick;
-      return (_props$onClick = props.onClick) === null || _props$onClick === void 0 ? void 0 : _props$onClick.call(props, row);
+  }), react.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, react.createElement(Gantt, Object.assign({
+    id: "main",
+    key: "main",
+    hideLabel: props.mainGantt.hideLabel,
+    showSecondaryDates: mainGanttDoubleView,
+    hideDependencies: props.mainGantt.hideDependencies,
+    ganttHeight: props.mainGantt.ganttHeight,
+    displayedStartDate: displayedDates.displayedStartDate,
+    displayedEndDate: displayedDates.displayedEndDate,
+    viewDate: viewDate,
+    tasks: tasks,
+    viewMode: toViewMode(timeUnit)
+  }, props.mainGantt.stylingOptions, {
+    TaskListHeader: (_props$mainGantt$task = props.mainGantt.taskListHeaderProject) != null ? _props$mainGantt$task : CustomTaskListHeaderHOC(props.mainGantt.title, mainGanttDoubleView != null ? mainGanttDoubleView : false, setMainGanttDoubleView, onFilterInput),
+    TaskListTable: (_props$mainGantt$task2 = props.mainGantt.taskListTableProject) != null ? _props$mainGantt$task2 : CustomTaskListTableHOC(function (id) {
+      var row = getProjectById(id, currentTasks);
+      if (!row) {
+        row = getPhaseById(id, currentTasks);
+      }
+      if (row) {
+        handleClick(row, props.mainGantt.onClick);
+      }
+    }, "main"),
+    TooltipContent: (_props$mainGantt$tool = props.mainGantt.tooltipContent) != null ? _props$mainGantt$tool : CustomTooltipHOC(),
+    onClick: function onClick(e) {
+      var row = getProjectById(e.id, currentTasks);
+      if (!row) {
+        row = getPhaseById(e.id, currentTasks);
+      }
+      if (row) {
+        handleClick(row, props.mainGantt.onClick);
+      }
     },
-    onDateChange: function onDateChange(row) {
-      var _props$onDateChange;
-      return (_props$onDateChange = props.onDateChange) === null || _props$onDateChange === void 0 ? void 0 : _props$onDateChange.call(props, row);
+    onDateChange: function onDateChange(e) {
+      return handleDateChange(e, currentTasks, props.mainGantt.onDateChange);
     },
-    TaskListHeader: (_props$taskListHeader = props.taskListHeaderProject) != null ? _props$taskListHeader : CustomTaskListHeaderHOC(props.title, doubleView != null ? doubleView : true, setDoubleView),
-    TaskListTable: (_props$taskListTableP = props.taskListTableProject) != null ? _props$taskListTableP : CustomTaskListTableHOC(function (id) {
-      console.log("planner.tsx Clicked on " + id);
-    }),
-    TooltipContent: (_props$tooltipContent = props.tooltipContent) != null ? _props$tooltipContent : CustomTooltipHOC()
-  })));
+    locale: locale,
+    dateTimeFormatters: ganttDateTimeFormatters
+  })), props.secondaryGantt && react.createElement(Gantt, Object.assign({
+    id: "secondary",
+    key: "secondary",
+    hideLabel: props.secondaryGantt.hideLabel,
+    showSecondaryDates: mainGanttDoubleView,
+    hideDependencies: props.secondaryGantt.hideDependencies,
+    ganttHeight: props.secondaryGantt.ganttHeight,
+    displayedStartDate: displayedDates.displayedStartDate,
+    displayedEndDate: displayedDates.displayedEndDate,
+    viewDate: viewDate,
+    tasks: details,
+    viewMode: toViewMode(timeUnit)
+  }, props.mainGantt.stylingOptions, {
+    TaskListHeader: (_props$secondaryGantt3 = props.secondaryGantt.taskListHeaderProject) != null ? _props$secondaryGantt3 : CustomTaskListHeaderHOC(props.secondaryGantt.title, undefined, undefined, onFilterInput),
+    TaskListTable: (_props$secondaryGantt4 = (_props$secondaryGantt5 = props.secondaryGantt) === null || _props$secondaryGantt5 === void 0 ? void 0 : _props$secondaryGantt5.taskListTableProject) != null ? _props$secondaryGantt4 : CustomTaskListTableHOC(function (id) {
+      console.log("planner.tsx secondaryGantt Clicked on " + id);
+    }, "secondary"),
+    TooltipContent: (_props$secondaryGantt6 = props.secondaryGantt.tooltipContent) != null ? _props$secondaryGantt6 : CustomTooltipHOC(),
+    projection: projection,
+    onClick: function onClick(e) {
+      if (props.secondaryGantt) {
+        var row = getProjectById(e.id, currentDetails);
+        if (row) {
+          handleClick(row, props.secondaryGantt.onClick);
+        }
+      }
+    },
+    onDateChange: function onDateChange(e) {
+      var _props$secondaryGantt7;
+      return handleDateChange(e, currentDetails, (_props$secondaryGantt7 = props.secondaryGantt) === null || _props$secondaryGantt7 === void 0 ? void 0 : _props$secondaryGantt7.onDateChange);
+    },
+    locale: locale,
+    dateTimeFormatters: ganttDateTimeFormatters
+  }))));
 };
 
-const kupPlannerCss = "._3_ygE{display:table;border-bottom:#e6e4e4 1px solid;border-top:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}._1nBOt{display:table-row;list-style:none}._2eZzQ{border-right:1px solid rgb(196, 196, 196);opacity:1;margin-left:-2px}._WuQ0f{display:table-cell;vertical-align:-webkit-baseline-middle;vertical-align:middle}._3ZbQT{display:table;border-bottom:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}._34SS0{display:table-row;text-overflow:ellipsis}._34SS0:nth-of-type(even){}._3lLk3{display:table-cell;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._nI1Xw{display:flex}._2QjE6{color:rgb(86 86 86);font-size:0.6rem;padding:0.15rem 0.2rem 0 0.2rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}._2TfEi{font-size:0.6rem;padding-left:1rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}._3T42e{background:#fff;padding:12px;box-shadow:0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)}._29NTg{font-size:12px;margin-bottom:6px;color:#666}._25P-K{position:absolute;display:flex;flex-shrink:0;pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}._3gVAq{visibility:hidden;position:absolute;display:flex;pointer-events:none}._1eT-t{overflow:hidden auto;width:1rem;flex-shrink:0;scrollbar-width:thin}._1eT-t::-webkit-scrollbar{width:1.1rem;height:1.1rem}._1eT-t::-webkit-scrollbar-corner{background:transparent}._1eT-t::-webkit-scrollbar-thumb{border:6px solid transparent;background:rgba(0, 0, 0, 0.2);background:var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));border-radius:10px;background-clip:padding-box}._1eT-t::-webkit-scrollbar-thumb:hover{border:4px solid transparent;background:rgba(0, 0, 0, 0.3);background:var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));background-clip:padding-box}._EvhC1{border-radius:8px;background:#efefef;margin:12px;padding:12px}._2dZTy{fill:#fff}._2dZTy:nth-child(even){}._3rUKi{stroke:transparent}._RuwuK{stroke:#e6e4e4}._9w8d5{text-anchor:middle;fill:#333;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}._1rLuZ{stroke:#e6e4e4}._2q1Kt{text-anchor:middle;fill:#555;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}._35nLX{fill:#ffffff;stroke:#e0e0e0;stroke-width:1.4}._KxSXS{cursor:pointer;outline:none}._KxSXS:hover ._3w_5u{visibility:visible;opacity:1}._3w_5u{fill:#ddd;cursor:ew-resize;opacity:0;visibility:hidden}._31ERP{-webkit-user-select:none;-moz-user-select:none;user-select:none;stroke-width:0}._3zRJQ{fill:#fff;text-anchor:middle;font-weight:lighter;dominant-baseline:central;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}._3KcaM{fill:#555;text-anchor:start;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}._11iN9{background:#efefef;border-radius:8px;margin:12px;overflow:hidden;padding:12px}._CZjuD{overflow:hidden;font-size:0;margin:0;padding:0}._2B2zv{margin:0;padding:0;overflow:hidden}._3eULf{display:flex;padding:0;margin:0;list-style:none;outline:none;position:relative}._2k9Ys{overflow:auto;max-width:100%;scrollbar-width:thin;height:1.2rem}._2k9Ys::-webkit-scrollbar{width:1.1rem;height:1.1rem}._2k9Ys::-webkit-scrollbar-corner{background:transparent}._2k9Ys::-webkit-scrollbar-thumb{border:6px solid transparent;background:rgba(0, 0, 0, 0.2);background:var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));border-radius:10px;background-clip:padding-box}._2k9Ys::-webkit-scrollbar-thumb:hover{border:4px solid transparent;background:rgba(0, 0, 0, 0.3);background:var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));background-clip:padding-box}._19jgW{height:1px}._37E9D{display:flex;font-family:var(--kup-font-family, inherit);justify-content:space-around;max-width:330px;padding:16px 0;place-items:\"center\";text-align:center}._WrYI6{font-size:14px;font-weight:bold;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}._c53zr{max-width:-moz-max-content;max-width:max-content;padding:0 4px;text-align:right;width:100%}._2eBO5{position:relative;display:inline-block;width:30px;height:17px}._hiyro{opacity:0;width:0;height:0}._hiyro:checked+._2HI58{background-color:#003b77}._hiyro:checked+._2HI58:before{transform:translateX(13px)}._hiyro:focus+._2HI58{box-shadow:0 0 1px #003b77}._2HI58{-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}._2HI58: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}._2gSdA{font-size:12px;padding:6px}._lEI6r{padding:0 10px;margin-right:10px}._RU6Aa{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}._RU6Aa>*{font-size:14px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}._RU6Aa ._30j6y{font-weight:700;width:100%;text-align:center}._T0HQN{cursor:pointer;display:grid;border-width:0 1px 1px 1px;border-style:solid;border-color:#acacac;border-bottom-left-radius:4px;border-bottom-right-radius:4px;grid-template-columns:var(--grid-fasi-columns, 1fr 1fr 1fr);place-items:center;background:#ffffff;color:#595959;font-weight:400}._T0HQN>*{font-size:12px;line-height:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%}._T0HQN:has(+._T0HQN),._RU6Aa:has(+._T0HQN){border-bottom-left-radius:0;border-bottom-right-radius:0}._yp2DW{cursor:pointer;display:grid;border-width:1px;border-style:solid;border-color:#cbcbcb;border-radius:4px;grid-template-columns:34% 33% 33%;place-items:center;background:#fff;color:#595959;font-weight:400}._yp2DW>*{font-size:12px;line-height:14px;overflow:hidden;text-overflow:ellipsis}._yp2DW>*:first-child{width:100%;white-space:nowrap;padding-left:5.5px}._1H4ue{background:#f2f2f2;padding:3px}._3P0WE{display:grid;grid-auto-flow:column;grid-gap:8px;margin-left:12px;width:-moz-max-content;width:max-content}._1oXbe{background:transparent;border-color:var(--kup-primary-color, #003b77);border-radius:4px;border-width:1px;box-shadow:0 3px 1px -2px rgba(var(--kup-text-color-rgb, 51 51 51), 0.2), 0 2px 2px 0 rgba(var(--kup-text-color-rgb, 51 51 51), 0.14), 0 1px 5px 0 rgba(var(--kup-text-color-rgb, 51 51 51), 0.12);box-sizing:border-box;color:var(--kup-primary-color, #003b77);cursor:pointer;font-size:11px;height:32px;min-width:64px}._1R9mh{font-family:var(--kup-font-family, inherit);font-size:11px;letter-spacing:0.0892857143em;text-decoration:none;text-transform:uppercase;padding:0 6px}:host{display:block}";
+const kupManager = kupManagerInstance();
+function sanitizeAllDates(startDateCell, endDateCell, secStartDateCell, secEndDateCell) {
+  const sanitizedDateValues = sanitizeDates(startDateCell, endDateCell);
+  let sanitizedSecDateValues = [];
+  if (secStartDateCell && secEndDateCell) {
+    if (isAtLeastOneDateValid(secStartDateCell, secEndDateCell)) {
+      sanitizedSecDateValues = sanitizeDates(secStartDateCell, secEndDateCell);
+    }
+    else {
+      sanitizedSecDateValues = [...sanitizedDateValues];
+    }
+  }
+  return {
+    dateValues: sanitizedDateValues,
+    secDateValues: sanitizedSecDateValues,
+  };
+}
+function sanitizeDates(startDateCell, endDateCell) {
+  let returnValues = [startDateCell.value, endDateCell.value];
+  if (isDateValid(startDateCell) && isDateValid(endDateCell)) {
+    return returnValues;
+  }
+  else if (isDateValid(startDateCell)) {
+    return [startDateCell.value, startDateCell.value];
+  }
+  else if (isDateValid(endDateCell)) {
+    return [endDateCell.value, endDateCell.value];
+  }
+  else {
+    return returnValues;
+  }
+}
+function isDateValid(dateCell) {
+  return (kupManager.objects.isDate(dateCell.obj) &&
+    kupManager.dates.isValid(dateCell.value, KupDatesFormats.ISO_DATE));
+}
+function isAtLeastOneDateValid(startDateCell, endDateCell) {
+  return isDateValid(startDateCell) || isDateValid(endDateCell);
+}
+function getValuesToShow(row, idCol, nameCol, dataColumns, columns, customToValuesFunction) {
+  let toValuesFunction = () => columns.map((col) => {
+    return getCellValueForDisplay(dataColumns.find((kCol) => kCol.name == col), row.cells[col]);
+  });
+  if (customToValuesFunction) {
+    toValuesFunction = customToValuesFunction;
+  }
+  const valuesToShow = (columns === null || columns === void 0 ? void 0 : columns.length) >= 2
+    ? toValuesFunction()
+    : [row.cells[idCol].value, row.cells[nameCol].value];
+  return valuesToShow;
+}
+
+const kupPlannerCss = "._3_ygE{display:table;border-bottom:#e6e4e4 1px solid;border-top:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}._1nBOt{display:table-row;list-style:none}._2eZzQ{border-right:1px solid rgb(196, 196, 196);opacity:1;margin-left:-2px}._WuQ0f{display:table-cell;vertical-align:-webkit-baseline-middle;vertical-align:middle}._3ZbQT{display:table;border-bottom:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}._34SS0{display:table-row;text-overflow:ellipsis}._34SS0:nth-of-type(even){}._3lLk3{display:table-cell;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._nI1Xw{display:flex}._2QjE6{color:rgb(86 86 86);font-size:0.6rem;padding:0.15rem 0.2rem 0 0.2rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}._2TfEi{font-size:0.6rem;padding-left:1rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}._3T42e{background:#fff;padding:12px;box-shadow:0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)}._29NTg{font-size:12px;margin-bottom:6px;color:#666}._25P-K{position:absolute;display:flex;flex-shrink:0;pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}._3gVAq{visibility:hidden;position:absolute;display:flex;pointer-events:none}._1eT-t{overflow:hidden auto;width:1rem;flex-shrink:0;scrollbar-width:thin}._1eT-t::-webkit-scrollbar{width:1.1rem;height:1.1rem}._1eT-t::-webkit-scrollbar-corner{background:transparent}._1eT-t::-webkit-scrollbar-thumb{border:6px solid transparent;background:rgba(0, 0, 0, 0.2);background:var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));border-radius:10px;background-clip:padding-box}._1eT-t::-webkit-scrollbar-thumb:hover{border:4px solid transparent;background:rgba(0, 0, 0, 0.3);background:var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));background-clip:padding-box}._EvhC1{border-radius:8px;background:#efefef;margin:12px;padding:12px}._2dZTy{fill:#fff}._2dZTy:nth-child(even){}._3rUKi{stroke:transparent}._RuwuK{stroke:#e6e4e4}._9w8d5{text-anchor:middle;fill:#333;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}._1rLuZ{stroke:#e6e4e4}._2q1Kt{text-anchor:middle;fill:#555;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}._35nLX{fill:#ffffff;stroke:#e0e0e0;stroke-width:1.4}._KxSXS{cursor:pointer;outline:none}._KxSXS:hover ._3w_5u{visibility:visible;opacity:1}._3w_5u{fill:#ddd;cursor:ew-resize;opacity:0;visibility:hidden}._31ERP{-webkit-user-select:none;-moz-user-select:none;user-select:none;stroke-width:0}._3zRJQ{fill:#fff;text-anchor:middle;font-weight:lighter;dominant-baseline:central;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}._3KcaM{fill:#555;text-anchor:start;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}._11iN9{background:#efefef;border-radius:8px;margin:12px;overflow:hidden;padding:12px}._CZjuD{overflow:hidden;font-size:0;margin:0;padding:0}._2B2zv{margin:0;padding:0;overflow:hidden}._3eULf{display:flex;padding:0;margin:0;list-style:none;outline:none;position:relative}._2k9Ys{overflow:auto;max-width:100%;scrollbar-width:thin;height:1.2rem}._2k9Ys::-webkit-scrollbar{width:1.1rem;height:1.1rem}._2k9Ys::-webkit-scrollbar-corner{background:transparent}._2k9Ys::-webkit-scrollbar-thumb{border:6px solid transparent;background:rgba(0, 0, 0, 0.2);background:var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));border-radius:10px;background-clip:padding-box}._2k9Ys::-webkit-scrollbar-thumb:hover{border:4px solid transparent;background:rgba(0, 0, 0, 0.3);background:var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));background-clip:padding-box}._19jgW{height:1px}._37E9D{display:flex;justify-content:space-around;max-width:330px;place-items:\"center\";text-align:center;align-items:center}._WrYI6{font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._c53zr{max-width:-moz-max-content;max-width:max-content;padding:0 4px;text-align:right}._2eBO5{position:relative;display:inline-block;width:30px;height:17px}._hiyro{opacity:0;width:0;height:0}._hiyro:checked+._2HI58{background-color:#003b77}._hiyro:checked+._2HI58:before{transform:translateX(13px)}._hiyro:focus+._2HI58{box-shadow:0 0 1px #003b77}._2HI58{-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}._2HI58: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}._2gSdA{font-size:12px;padding:6px}._2cfRI{font-size:12px}._lEI6r{padding:0 10px;margin-right:10px}._RU6Aa{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}._RU6Aa>*{font-size:14px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}._RU6Aa ._30j6y{font-weight:700;width:100%;text-align:center}._T0HQN{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}._T0HQN>*{font-size:12px;line-height:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%}._T0HQN:has(+._T0HQN),._RU6Aa:has(+._T0HQN){border-bottom-left-radius:0;border-bottom-right-radius:0}._yp2DW{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}._yp2DW>*{font-size:14px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}._yp2DW ._30j6y{font-weight:700;width:100%;text-align:center}._3P0WE{display:grid;grid-auto-flow:column;grid-gap:8px;margin-left:12px;width:-moz-max-content;width:max-content}._1oXbe{background:transparent;border-color:var(--kup-primary-color, #003b77);border-radius:4px;border-width:1px;box-shadow:0 3px 1px -2px rgba(var(--kup-text-color-rgb, 51 51 51), 0.2), 0 2px 2px 0 rgba(var(--kup-text-color-rgb, 51 51 51), 0.14), 0 1px 5px 0 rgba(var(--kup-text-color-rgb, 51 51 51), 0.12);box-sizing:border-box;color:var(--kup-primary-color, #003b77);cursor:pointer;font-size:11px;height:32px;min-width:64px}._1R9mh{font-family:var(--kup-font-family, inherit);font-size:11px;letter-spacing:0.0892857143em;text-decoration:none;text-transform:uppercase;padding:0 6px}:host{display:block}";
 
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
   if (kind === "a" && !f)
@@ -11467,7 +11801,7 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
     throw new TypeError("Cannot write private member to an object whose class did not declare it");
   return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _KupPlanner_instances, _KupPlanner_kupManager, _KupPlanner_rootPlanner, _KupPlanner_lastOnChangeReceived, _KupPlanner_renderReactPlannerElement, _KupPlanner_toTasks, _KupPlanner_getTask, _KupPlanner_removePhases, _KupPlanner_handleOnClickOnTask, _KupPlanner_handleOnClickOnPhase, _KupPlanner_emitOnChangeEventsReceived;
+var _KupPlanner_instances, _KupPlanner_kupManager, _KupPlanner_rootPlanner, _KupPlanner_lastOnChangeReceived, _KupPlanner_renderReactPlannerElement, _KupPlanner_toTasks, _KupPlanner_toDetails, _KupPlanner_getTask, _KupPlanner_removePhases, _KupPlanner_handleOnClickOnTask, _KupPlanner_handleOnClickOnPhase, _KupPlanner_handleOnClickOnDetail, _KupPlanner_emitOnChangeEventsReceived;
 const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -11486,7 +11820,16 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.plannerProps = undefined;
     this.customStyle = '';
     this.data = undefined;
-    this.dataRaw = undefined;
+    this.detailData = undefined;
+    this.detailColorCol = undefined;
+    this.detailColumns = undefined;
+    this.detailDates = undefined;
+    this.detailHeight = undefined;
+    this.detailIdCol = undefined;
+    this.detailNameCol = undefined;
+    this.detailPrevDates = undefined;
+    this.listCellWidth = '300px';
+    this.maxWidth = '90vw';
     this.phaseColorCol = undefined;
     this.phaseColumns = undefined;
     this.phaseColParDep = undefined;
@@ -11494,8 +11837,10 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.phaseIdCol = undefined;
     this.phaseNameCol = undefined;
     this.phasePrevDates = undefined;
+    this.showSecondaryDates = false;
     this.taskColumns = undefined;
     this.taskDates = undefined;
+    this.taskHeight = undefined;
     this.taskIdCol = undefined;
     this.taskNameCol = undefined;
     this.taskPrevDates = undefined;
@@ -11549,21 +11894,29 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     var _a;
     const task = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getTask).call(this, taskId);
     if (task) {
-      task.phases = (_a = data.rows) === null || _a === void 0 ? void 0 : _a.map((row) => {
+      task.phases = (_a = data.rows) === null || _a === void 0 ? void 0 : _a.filter((row) => isAtLeastOneDateValid(row.cells[this.phaseDates[0]], row.cells[this.phaseDates[1]])).map((row) => {
+        const datesSanitized = sanitizeAllDates(row.cells[this.phaseDates[0]], row.cells[this.phaseDates[1]], row.cells[this.phasePrevDates[0]], row.cells[this.phasePrevDates[1]]);
+        const valuesToShow = getValuesToShow(row, this.phaseIdCol, this.phaseNameCol, data.columns, this.phaseColumns, () => this.phaseColumns.map((col) => col == this.phaseDates[0]
+          ? '#START#'
+          : col == this.phaseDates[1]
+            ? '#END#'
+            : getCellValueForDisplay(data.columns.find((kCol) => kCol.name == col), row.cells[col])));
         let phase = {
           taskRow: task.taskRow,
           phaseRow: row,
-          id: row.cells[this.phaseIdCol].value,
+          id: task.id + '_' + row.cells[this.phaseIdCol].value,
           phaseRowId: row.id,
           taskRowId: task.taskRowId,
           name: row.cells[this.phaseNameCol].value,
-          startDate: row.cells[this.phaseDates[0]].value,
-          endDate: row.cells[this.phaseDates[1]].value,
-          secondaryStartDate: row.cells[this.phasePrevDates[0]].value,
-          secondaryEndDate: row.cells[this.phasePrevDates[1]].value,
-          type: 'phase',
+          startDate: datesSanitized.dateValues[0],
+          endDate: datesSanitized.dateValues[1],
+          secondaryStartDate: datesSanitized.secDateValues[0],
+          secondaryEndDate: datesSanitized.secDateValues[1],
+          type: 'task',
           color: row.cells[this.phaseColorCol].value,
-          valuesToShow: this.phaseColumns.map((col) => row.cells[col].value),
+          selectedColor: row.cells[this.phaseColorCol].value,
+          valuesToShow: valuesToShow,
+          rowType: KupPlannerGanttRowType.PHASE,
         };
         return phase;
       });
@@ -11572,8 +11925,8 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   handleOnClick(nativeEvent) {
     console.log('handleOnClick', nativeEvent);
-    switch (nativeEvent.type) {
-      case 'task':
+    switch (nativeEvent.rowType) {
+      case KupPlannerGanttRowType.TASK:
         const taskAction = nativeEvent.phases
           ? KupPlannerTaskAction.onClosing
           : KupPlannerTaskAction.onOpening;
@@ -11581,11 +11934,16 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
           this.onKupClick(nativeEvent, taskAction);
         }
         break;
-      case 'phase':
+      case KupPlannerGanttRowType.PHASE:
         if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnPhase).call(this)) {
           this.onKupClick(nativeEvent);
         }
         break;
+      case KupPlannerGanttRowType.DETAIL:
+        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnDetail).call(this)) {
+          this.onKupClick(nativeEvent);
+        }
+        break;
     }
   }
   handleOnDateChange(nativeEvent) {
@@ -11599,12 +11957,34 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.register(this);
   }
   componentDidLoad() {
+    let details = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toDetails).call(this, this.detailData);
+    if (details && details.length == 0) {
+      details = undefined;
+    }
     this.plannerProps = {
-      title: this.titleMess,
-      items: __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toTasks).call(this, this.data),
-      onClick: (nativeEvent) => this.handleOnClick(nativeEvent),
-      onDateChange: (nativeEvent) => this.handleOnDateChange(nativeEvent),
+      mainGantt: {
+        title: this.titleMess,
+        items: __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toTasks).call(this, this.data),
+        stylingOptions: Object.assign(Object.assign({}, defaultStylingOptions), { listCellWidth: this.listCellWidth }),
+        hideLabel: true,
+        ganttHeight: this.taskHeight,
+        showSecondaryDates: this.showSecondaryDates,
+        onClick: (nativeEvent) => this.handleOnClick(nativeEvent),
+        onDateChange: (nativeEvent) => this.handleOnDateChange(nativeEvent),
+      },
+      secondaryGantt: details
+        ? {
+          title: '',
+          items: details,
+          stylingOptions: Object.assign(Object.assign({}, defaultStylingOptions), { listCellWidth: this.listCellWidth }),
+          hideLabel: true,
+          ganttHeight: this.detailHeight,
+          onClick: (nativeEvent) => this.handleOnClick(nativeEvent),
+          onDateChange: (nativeEvent) => this.handleOnDateChange(nativeEvent),
+        }
+        : undefined,
     };
+    console.log('kup-planner.tsx componentDidLoad plannerProps', this.plannerProps);
     __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_renderReactPlannerElement).call(this);
     this.kupReady.emit({
       comp: this,
@@ -11620,7 +12000,8 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").debug.logRender(this, true);
   }
   render() {
-    return (h(Host, null, h("div", { id: componentWrapperId })));
+    //console.log('kup-planner.tsx render');
+    return (h(Host, null, h("div", { id: componentWrapperId, style: { maxWidth: this.maxWidth } })));
   }
   disconnectedCallback() {
     __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.unregister(this);
@@ -11630,7 +12011,16 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
 }, [1, "kup-planner", {
     "customStyle": [1, "custom-style"],
     "data": [16],
-    "dataRaw": [8, "data-raw"],
+    "detailData": [16],
+    "detailColorCol": [1, "detail-color-col"],
+    "detailColumns": [16],
+    "detailDates": [16],
+    "detailHeight": [2, "detail-height"],
+    "detailIdCol": [1, "detail-id-col"],
+    "detailNameCol": [1, "detail-name-col"],
+    "detailPrevDates": [16],
+    "listCellWidth": [1, "list-cell-width"],
+    "maxWidth": [1, "max-width"],
     "phaseColorCol": [1, "phase-color-col"],
     "phaseColumns": [16],
     "phaseColParDep": [1, "phase-col-par-dep"],
@@ -11638,8 +12028,10 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "phaseIdCol": [1, "phase-id-col"],
     "phaseNameCol": [1, "phase-name-col"],
     "phasePrevDates": [16],
+    "showSecondaryDates": [4, "show-secondary-dates"],
     "taskColumns": [16],
     "taskDates": [16],
+    "taskHeight": [2, "task-height"],
     "taskIdCol": [1, "task-id-col"],
     "taskNameCol": [1, "task-name-col"],
     "taskPrevDates": [16],
@@ -11660,28 +12052,70 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
   }
 }, _KupPlanner_toTasks = function _KupPlanner_toTasks(data) {
   var _a;
-  let tasks = (_a = data.rows) === null || _a === void 0 ? void 0 : _a.map((row) => {
+  let tasks = (_a = data.rows) === null || _a === void 0 ? void 0 : _a.filter((row) => isAtLeastOneDateValid(row.cells[this.taskDates[0]], row.cells[this.taskDates[1]])).map((row) => {
+    const datesSanitized = sanitizeAllDates(row.cells[this.taskDates[0]], row.cells[this.taskDates[1]], row.cells[this.taskPrevDates[0]], row.cells[this.taskPrevDates[1]]);
+    const valuesToShow = getValuesToShow(row, this.taskIdCol, this.taskNameCol, data.columns, this.taskColumns);
     let task = {
       taskRow: row,
       taskRowId: row.id,
       id: row.cells[this.taskIdCol].value,
       name: row.cells[this.taskNameCol].value,
-      startDate: row.cells[this.taskDates[0]].value,
-      endDate: row.cells[this.taskDates[1]].value,
-      secondaryStartDate: row.cells[this.taskPrevDates[0]].value,
-      secondaryEndDate: row.cells[this.taskPrevDates[1]].value,
-      type: 'task',
-      valuesToShow: this.taskColumns.map((col) => row.cells[col].value),
+      startDate: datesSanitized.dateValues[0],
+      endDate: datesSanitized.dateValues[1],
+      secondaryStartDate: datesSanitized.secDateValues[0],
+      secondaryEndDate: datesSanitized.secDateValues[1],
+      type: 'project',
+      valuesToShow: valuesToShow,
+      rowType: KupPlannerGanttRowType.TASK,
     };
     return task;
   });
   return tasks;
+}, _KupPlanner_toDetails = function _KupPlanner_toDetails(data) {
+  let details = [];
+  if (!data || !data.rows) {
+    return details;
+  }
+  data.rows
+    .filter((row) => isAtLeastOneDateValid(row.cells[this.detailDates[0]], row.cells[this.detailDates[1]]))
+    .forEach((row) => {
+    const detailId = row.cells[this.detailIdCol].value;
+    const detailNameId = row.cells[this.detailNameCol].value;
+    const datesSanitized = sanitizeAllDates(row.cells[this.detailDates[0]], row.cells[this.detailDates[1]]);
+    const valuesToShow = getValuesToShow(row, this.detailIdCol, this.detailNameCol, data.columns, this.detailColumns);
+    let detail = details.find((det) => det.id == detailId);
+    if (!detail) {
+      detail = {
+        id: detailId,
+        name: detailNameId,
+        type: 'timeline',
+        valuesToShow: valuesToShow,
+        rowType: KupPlannerGanttRowType.DETAIL,
+        schedule: [],
+      };
+      details.push(detail);
+    }
+    detail.schedule.push({
+      startDate: datesSanitized.dateValues[0],
+      endDate: datesSanitized.dateValues[1],
+      color: this.detailColorCol
+        ? row.cells[this.detailColorCol].value
+        : '#D9D9D8',
+      selectedColor: this.detailColorCol
+        ? row.cells[this.detailColorCol].value
+        : '#D9D9D8',
+    });
+  });
+  return details;
 }, _KupPlanner_getTask = function _KupPlanner_getTask(taskId) {
-  return this.plannerProps.items.find((task) => task.id == taskId);
+  return this.plannerProps.mainGantt.items.find((task) => task.id == taskId);
 }, _KupPlanner_removePhases = function _KupPlanner_removePhases(taskId) {
   const task = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getTask).call(this, taskId);
   if (task)
     task.phases = undefined;
+  // this.plannerProps.mainGantt = JSON.parse(
+  //     JSON.stringify(this.plannerProps.mainGantt)
+  // );
   this.plannerProps = Object.assign({}, this.plannerProps);
 }, _KupPlanner_handleOnClickOnTask = function _KupPlanner_handleOnClickOnTask(nativeEvent) {
   const task = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getTask).call(this, nativeEvent.id);
@@ -11691,6 +12125,8 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
   return true;
 }, _KupPlanner_handleOnClickOnPhase = function _KupPlanner_handleOnClickOnPhase() {
   return true;
+}, _KupPlanner_handleOnClickOnDetail = function _KupPlanner_handleOnClickOnDetail() {
+  return true;
 }, _KupPlanner_emitOnChangeEventsReceived = function _KupPlanner_emitOnChangeEventsReceived(nativeEvent) {
   let emitEvent = false;
   if (!__classPrivateFieldGet(this, _KupPlanner_lastOnChangeReceived, "f")) {