@sme.up/ketchup 8.0.2 → 8.1.0

package/dist/components/kup-planner.js

@@ -1,81 +1,88 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host, getAssetPath } from '@stencil/core/internal/client';
-import { a8 as createCommonjsModule, aD as commonjsGlobal, k as kupManagerInstance, aE as KupDatesFormats, ak as getCellValueForDisplay, g as getProps, s as setProps, _ as FTextFieldMDC, c as componentWrapperId, am as FTextField, a as KupThemeIconValues, $ as KupLanguageSearch, 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.
- * Used to export every prop in an object.
- */
-var KupPlannerProps;
-(function (KupPlannerProps) {
-  KupPlannerProps["customStyle"] = "Custom style of the component.";
-  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["onTaskOpening"] = "onTaskOpening";
-  KupPlannerTaskAction["onTaskClosing"] = "onTaskClosing";
-  KupPlannerTaskAction["onClick"] = "onClick";
-  KupPlannerTaskAction["onResize"] = "onResize";
-  KupPlannerTaskAction["onRightClick"] = "onRightClick";
-})(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();
-    this.event = event;
-    this.threshold = threshold;
-  }
-  isEquivalent(newEvent) {
-    const intervalTime = new Date().valueOf() - this.dateTime.valueOf();
-    const equals = JSON.stringify(this.event) === JSON.stringify(newEvent);
-    return equals && intervalTime < this.threshold;
-  }
-  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',
+import { ay as createCommonjsModule, az as commonjsGlobal, k as kupManagerInstance, aA as KupDatesFormats, af as getCellValueForDisplay, g as getProps, s as setProps, _ as FTextFieldMDC, c as componentWrapperId, ah as FTextField, a as KupThemeIconValues, $ as KupLanguageSearch, 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.
+ * Used to export every prop in an object.
+ */
+var KupPlannerProps;
+(function (KupPlannerProps) {
+  KupPlannerProps["customStyle"] = "Custom style of the component.";
+  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["detailFilter"] = "Sets the detail's filter.";
+  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["detailInitialScrollX"] = "Sets the initial scroll X for the detail.";
+  KupPlannerProps["detailInitialScrollY"] = "Sets the initial scroll Y for the detail.";
+  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["readOnly"] = "When true, the two gantts are not interactable.";
+  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["taskFilter"] = "Sets the task's filter.";
+  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["taskInitialScrollX"] = "Sets the initial scroll X for the task.";
+  KupPlannerProps["taskInitialScrollY"] = "Sets the initial scroll Y for the task.";
+  KupPlannerProps["titleMess"] = "Message displayed on top";
+})(KupPlannerProps || (KupPlannerProps = {}));
+var KupPlannerTaskAction;
+(function (KupPlannerTaskAction) {
+  KupPlannerTaskAction["onTaskOpening"] = "onTaskOpening";
+  KupPlannerTaskAction["onTaskClosing"] = "onTaskClosing";
+  KupPlannerTaskAction["onClick"] = "onClick";
+  KupPlannerTaskAction["onResize"] = "onResize";
+  KupPlannerTaskAction["onRightClick"] = "onRightClick";
+})(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();
+    this.event = event;
+    this.threshold = threshold;
+  }
+  isEquivalent(newEvent) {
+    const intervalTime = new Date().valueOf() - this.dateTime.valueOf();
+    const equals = JSON.stringify(this.event) === JSON.stringify(newEvent);
+    return equals && intervalTime < this.threshold;
+  }
+  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',
 };
 
 /**
@@ -8949,25 +8956,6 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   }
   throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-
-var ViewMode;
-(function (ViewMode) {
-  ViewMode["Hour"] = "Hour";
-  ViewMode["QuarterDay"] = "Quarter Day";
-  ViewMode["HalfDay"] = "Half Day";
-  ViewMode["Day"] = "Day";
-  ViewMode["Week"] = "Week";
-  ViewMode["Month"] = "Month";
-  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();
 };
@@ -8996,211 +8984,6 @@ function validDates(startDate, endDate, _name) {
   };
 }
 
-var MAIN_GANTT_ID = "main";
-var SECONDARY_GANTT_ID = "secondary";
-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 columnWidthForTimeUnit = function columnWidthForTimeUnit(timeUnit) {
-  switch (timeUnit) {
-    case TimeUnit.YEAR:
-      return 60 * 2;
-    default:
-      return 60;
-  }
-};
-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,
-      icon = _ref.icon;
-    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
-      } : {},
-      icon: icon
-    };
-  };
-  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,
-      icon = x.icon;
-    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,
-      icon: icon
-    };
-  };
-  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,
-      icon: row.icon
-    };
-    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) {
@@ -9248,9 +9031,9 @@ var ganttDateRangeFromTask = function ganttDateRangeFromTask(tasks, viewMode, pr
   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);
+  var dates = ganttDateRangeFromGanttTask(mainGanttItems, timeUnit, preStepsCount != null ? preStepsCount : 1, mainGanttDoubleView);
   if (secondaryGanttItems) {
-    var dates2 = ganttDateRangeFromDetail(secondaryGanttItems, toViewMode(timeUnit), preStepsCount != null ? preStepsCount : 1, mainGanttDoubleView);
+    var dates2 = ganttDateRangeFromDetail(secondaryGanttItems, timeUnit, preStepsCount != null ? preStepsCount : 1, mainGanttDoubleView);
     if (dates2[0] < dates[0]) {
       dates[0] = dates2[0];
     }
@@ -9325,48 +9108,30 @@ var ganttDateRangeGeneric = function ganttDateRangeGeneric(dates, viewMode, preS
     return [newStartDate, newEndDate];
   }
   switch (viewMode) {
-    case ViewMode.Year:
+    case "year":
       newStartDate = addToDate(newStartDate, -1, "year");
       newStartDate = startOfDate(newStartDate, "year");
       newEndDate = addToDate(newEndDate, 1, "year");
       newEndDate = startOfDate(newEndDate, "year");
       break;
-    case ViewMode.Month:
+    case "month":
       newStartDate = addToDate(newStartDate, -1 * preStepsCount, "month");
       newStartDate = startOfDate(newStartDate, "month");
       newEndDate = addToDate(newEndDate, 1, "year");
       newEndDate = startOfDate(newEndDate, "year");
       break;
-    case ViewMode.Week:
+    case "week":
       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:
+    case "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");
-      break;
-    case ViewMode.HalfDay:
-      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");
-      break;
   }
   return [newStartDate, newEndDate];
 };
@@ -9375,27 +9140,18 @@ var seedDates = function seedDates(startDate, endDate, viewMode) {
   var dates = [currentDate];
   while (currentDate < endDate) {
     switch (viewMode) {
-      case ViewMode.Year:
+      case "year":
         currentDate = addToDate(currentDate, 1, "year");
         break;
-      case ViewMode.Month:
+      case "month":
         currentDate = addToDate(currentDate, 1, "month");
         break;
-      case ViewMode.Week:
+      case "week":
         currentDate = addToDate(currentDate, 7, "day");
         break;
-      case ViewMode.Day:
+      case "day":
         currentDate = addToDate(currentDate, 1, "day");
         break;
-      case ViewMode.HalfDay:
-        currentDate = addToDate(currentDate, 12, "hour");
-        break;
-      case ViewMode.QuarterDay:
-        currentDate = addToDate(currentDate, 6, "hour");
-        break;
-      case ViewMode.Hour:
-        currentDate = addToDate(currentDate, 1, "hour");
-        break;
     }
     dates.push(currentDate);
   }
@@ -9697,6 +9453,15 @@ var VerticalScroll = function VerticalScroll(_ref) {
     rtl = _ref.rtl,
     onScroll = _ref.onScroll;
   var scrollRef = react.useRef(null);
+  react.useEffect(function () {
+    if (scrollRef.current) {
+      var wrap = scrollRef.current;
+      var setScrollTop = function setScrollTop() {
+        wrap.scrollTop = scroll;
+      };
+      setTimeout(setScrollTop, 250);
+    }
+  }, []);
   react.useEffect(function () {
     if (scrollRef.current) {
       scrollRef.current.scrollTop = scroll;
@@ -9739,12 +9504,12 @@ var TaskList = function TaskList(_ref) {
     TaskListHeader = _ref.TaskListHeader,
     TaskListTable = _ref.TaskListTable,
     filter = _ref.filter;
-  var horizontalContainerRef = react.useRef(null);
+  var horizontalContainerRef = react.createRef();
   react.useEffect(function () {
     if (horizontalContainerRef.current) {
       horizontalContainerRef.current.scrollTop = scrollY;
     }
-  }, [scrollY]);
+  }, [horizontalContainerRef, scrollY]);
   var headerProps = {
     headerHeight: headerHeight,
     fontFamily: fontFamily,
@@ -9900,10 +9665,9 @@ var SinglePartOfCalendar = function SinglePartOfCalendar(_ref) {
 };
 
 var Calendar = function Calendar(_ref) {
-  var _dateTimeFormatters$y, _dateTimeFormatters$m, _dateTimeFormatters$m2, _dateTimeFormatters$w, _dateTimeFormatters$d, _dateTimeFormatters$h, _dateTimeFormatters$d2, _getters;
+  var _dateTimeFormatters$y, _dateTimeFormatters$m, _dateTimeFormatters$m2, _dateTimeFormatters$w, _dateTimeFormatters$d;
   var dateSetup = _ref.dateSetup,
     locale = _ref.locale,
-    viewMode = _ref.viewMode,
     rtl = _ref.rtl,
     headerHeight = _ref.headerHeight,
     columnWidth = _ref.columnWidth,
@@ -9913,15 +9677,13 @@ var Calendar = function Calendar(_ref) {
     _ref$singleLineHeader = _ref.singleLineHeader,
     singleLineHeader = _ref$singleLineHeader === void 0 ? false : _ref$singleLineHeader,
     currentDateIndicator = _ref.currentDateIndicator;
-  var simplifiedHeader = singleLineHeader && dateSetup.viewMode !== ViewMode.Year;
+  var simplifiedHeader = singleLineHeader && dateSetup.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;
   var formatMonth = (_dateTimeFormatters$m = dateTimeFormatters === null || dateTimeFormatters === void 0 ? void 0 : dateTimeFormatters.month) != null ? _dateTimeFormatters$m : defaultDateTimeFormatters.month;
   var formatMonthAndYear = (_dateTimeFormatters$m2 = dateTimeFormatters === null || dateTimeFormatters === void 0 ? void 0 : dateTimeFormatters.monthAndYear) != null ? _dateTimeFormatters$m2 : defaultDateTimeFormatters.monthAndYear;
   var formatWeek = (_dateTimeFormatters$w = dateTimeFormatters === null || dateTimeFormatters === void 0 ? void 0 : dateTimeFormatters.week) != null ? _dateTimeFormatters$w : defaultDateTimeFormatters.week;
   var formatDay = (_dateTimeFormatters$d = dateTimeFormatters === null || dateTimeFormatters === void 0 ? void 0 : dateTimeFormatters.day) != null ? _dateTimeFormatters$d : defaultDateTimeFormatters.day;
-  var formatHour = (_dateTimeFormatters$h = dateTimeFormatters === null || dateTimeFormatters === void 0 ? void 0 : dateTimeFormatters.hour) != null ? _dateTimeFormatters$h : defaultDateTimeFormatters.hour;
-  var formatDayAndMonth = (_dateTimeFormatters$d2 = dateTimeFormatters === null || dateTimeFormatters === void 0 ? void 0 : dateTimeFormatters.dayAndMonth) != null ? _dateTimeFormatters$d2 : defaultDateTimeFormatters.dayAndMonth;
   var getCalendarValuesForYear = function getCalendarValuesForYear() {
     var topValues = [];
     var bottomValues = [];
@@ -10056,70 +9818,12 @@ var Calendar = function Calendar(_ref) {
     }
     return [topValues, bottomValues];
   };
-  var getCalendarValuesForPartOfDay = function getCalendarValuesForPartOfDay() {
-    var topValues = [];
-    var bottomValues = [];
-    var ticks = viewMode === ViewMode.HalfDay ? 2 : 4;
-    var topDefaultHeight = headerHeight * 0.5;
-    var dates = dateSetup.dates;
-    for (var i = 0; i < dates.length; i++) {
-      var date = dates[i];
-      var bottomValue = formatHour(date, locale);
-      bottomValues.push(react.createElement("text", {
-        key: date.getTime(),
-        y: headerHeight * 0.8,
-        x: columnWidth * (i + +rtl),
-        className: styles$5.calendarBottomText,
-        fontFamily: fontFamily
-      }, bottomValue));
-      if (i === 0 || date.getDate() !== dates[i - 1].getDate()) {
-        var topValue = formatDayAndMonth(date, locale);
-        topValues.push(react.createElement(TopCal, {
-          key: date.toISOString(),
-          value: topValue,
-          x1Line: columnWidth * i + ticks * columnWidth,
-          y1Line: 0,
-          y2Line: topDefaultHeight,
-          xText: columnWidth * i + ticks * columnWidth * 0.5,
-          yText: topDefaultHeight * 0.9
-        }));
-      }
-    }
-    return [topValues, bottomValues];
+  var getters = {
+    year: getCalendarValuesForYear,
+    month: getCalendarValuesForMonth,
+    week: getCalendarValuesForWeek,
+    day: getCalendarValuesForDay
   };
-  var getCalendarValuesForHour = function getCalendarValuesForHour() {
-    var topValues = [];
-    var bottomValues = [];
-    var topDefaultHeight = headerHeight * 0.5;
-    var dates = dateSetup.dates;
-    for (var i = 0; i < dates.length; i++) {
-      var date = dates[i];
-      var bottomValue = formatHour(date, locale);
-      bottomValues.push(react.createElement("text", {
-        key: date.getTime(),
-        y: headerHeight * 0.8,
-        x: columnWidth * (i + +rtl),
-        className: styles$5.calendarBottomText,
-        fontFamily: fontFamily
-      }, bottomValue));
-      if (i !== 0 && date.getDate() !== dates[i - 1].getDate()) {
-        var displayDate = dates[i - 1];
-        var topValue = formatDayAndMonth(date, locale);
-        var topPosition = (date.getHours() - 24) / 2;
-        topValues.push(react.createElement(TopCal, {
-          key: topValue + displayDate.getFullYear(),
-          value: topValue,
-          x1Line: columnWidth * i,
-          y1Line: 0,
-          y2Line: topDefaultHeight,
-          xText: columnWidth * (i + topPosition),
-          yText: topDefaultHeight * 0.9
-        }));
-      }
-    }
-    return [topValues, bottomValues];
-  };
-  var getters = (_getters = {}, _getters[ViewMode.Year] = getCalendarValuesForYear, _getters[ViewMode.Month] = getCalendarValuesForMonth, _getters[ViewMode.Week] = getCalendarValuesForWeek, _getters[ViewMode.Day] = getCalendarValuesForDay, _getters[ViewMode.QuarterDay] = getCalendarValuesForPartOfDay, _getters[ViewMode.HalfDay] = getCalendarValuesForPartOfDay, _getters[ViewMode.Hour] = getCalendarValuesForHour, _getters);
   var _getters$dateSetup$vi = getters[dateSetup.viewMode](),
     topValues = _getters$dateSetup$vi[0],
     bottomValues = _getters$dateSetup$vi[1];
@@ -10988,6 +10692,7 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
     showSecondaryDates = _ref$showSecondaryDat === void 0 ? false : _ref$showSecondaryDat,
     currentDateIndicator = _ref.currentDateIndicator,
     projection = _ref.projection,
+    readOnly = _ref.readOnly,
     setGanttEvent = _ref.setGanttEvent,
     setFailedTask = _ref.setFailedTask,
     setSelectedTask = _ref.setSelectedTask,
@@ -11104,6 +10809,9 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
     }
   }, [ganttEvent, xStep, initEventX1Delta, onProgressChange, timeStep, onDateChange, svg, isMoving, point, rtl, setFailedTask, setGanttEvent]);
   var hasMovedHorizontally = function hasMovedHorizontally(event) {
+    if (readOnly) {
+      return false;
+    }
     return initEventXClick !== (event === null || event === void 0 ? void 0 : event.clientX);
   };
   var handleBarEventStart = function handleBarEventStart(action, task, event) {
@@ -11155,8 +10863,8 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
           } else if (action === "dblclick") {
             !!onDoubleClick && onDoubleClick(task);
           } else if (action === "click") {
-            var skipClick = !hasMovedHorizontally(event);
-            skipClick && !!onClick && onClick(task);
+            var skipClick = hasMovedHorizontally(event);
+            !skipClick && !!onClick && onClick(task);
           } else if (action === "contextmenu") {
             event.preventDefault();
             !!onContextMenu && onContextMenu(event, task);
@@ -11226,9 +10934,9 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
       task: task,
       arrowIndent: arrowIndent,
       taskHeight: taskHeight,
-      isProgressChangeable: !!onProgressChange && !task.isDisabled,
-      isDateMovable: !!onDateChange && !task.isDisabled,
-      isDateResizable: !!onDateChange && !task.isDisabled && !forbidResize,
+      isProgressChangeable: !readOnly && !!onProgressChange && !task.isDisabled,
+      isDateMovable: !readOnly && !!onDateChange && !task.isDisabled,
+      isDateResizable: !readOnly && !!onDateChange && !task.isDisabled && !forbidResize,
       isDelete: !task.isDisabled,
       onEventStart: handleBarEventStart,
       key: task.id,
@@ -11251,8 +10959,8 @@ var TaskGantt = function TaskGantt(_ref) {
     scrollY = _ref.scrollY,
     scrollX = _ref.scrollX;
   var ganttSVGRef = react.useRef(null);
-  var horizontalContainerRef = react.useRef(null);
-  var verticalGanttContainerRef = react.useRef(null);
+  var horizontalContainerRef = react.createRef();
+  var verticalGanttContainerRef = react.createRef();
   var newBarProps = _extends({}, barProps, {
     svg: ganttSVGRef
   });
@@ -11260,12 +10968,12 @@ var TaskGantt = function TaskGantt(_ref) {
     if (horizontalContainerRef.current) {
       horizontalContainerRef.current.scrollTop = scrollY;
     }
-  }, [scrollY]);
+  }, [horizontalContainerRef, scrollY]);
   react.useEffect(function () {
     if (verticalGanttContainerRef.current) {
       verticalGanttContainerRef.current.scrollLeft = scrollX;
     }
-  }, [scrollX]);
+  }, [scrollX, verticalGanttContainerRef]);
   return react.createElement("div", {
     className: styles$7.ganttContainer,
     ref: taskGanttRef
@@ -11306,6 +11014,15 @@ var HorizontalScroll = function HorizontalScroll(_ref) {
     rtl = _ref.rtl,
     onScroll = _ref.onScroll;
   var scrollRef = react.useRef(null);
+  react.useEffect(function () {
+    if (scrollRef.current) {
+      var wrap = scrollRef.current;
+      var setScrollLeft = function setScrollLeft() {
+        wrap.scrollLeft = scroll;
+      };
+      setTimeout(setScrollLeft, 250);
+    }
+  }, []);
   react.useEffect(function () {
     if (scrollRef.current) {
       scrollRef.current.scrollLeft = scroll;
@@ -11319,6 +11036,7 @@ var HorizontalScroll = function HorizontalScroll(_ref) {
     } : undefined,
     className: styles$8.scrollWrapper,
     onScroll: onScroll,
+    "data-scrollx": "true",
     ref: scrollRef
   }, react.createElement("div", {
     style: {
@@ -11342,8 +11060,6 @@ var Gantt = function Gantt(_ref) {
     filter = _ref.filter,
     _ref$ganttHeight = _ref.ganttHeight,
     ganttHeight = _ref$ganttHeight === void 0 ? 0 : _ref$ganttHeight,
-    _ref$viewMode = _ref.viewMode,
-    viewMode = _ref$viewMode === void 0 ? ViewMode.Day : _ref$viewMode,
     _ref$preStepsCount = _ref.preStepsCount,
     preStepsCount = _ref$preStepsCount === void 0 ? 1 : _ref$preStepsCount,
     _ref$locale = _ref.locale,
@@ -11407,6 +11123,12 @@ var Gantt = function Gantt(_ref) {
     projection = _ref.projection,
     displayedStartDate = _ref.displayedStartDate,
     displayedEndDate = _ref.displayedEndDate,
+    _ref$initialScrollX = _ref.initialScrollX,
+    initialScrollX = _ref$initialScrollX === void 0 ? -1 : _ref$initialScrollX,
+    _ref$initialScrollY = _ref.initialScrollY,
+    initialScrollY = _ref$initialScrollY === void 0 ? 0 : _ref$initialScrollY,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
     onDateChange = _ref.onDateChange,
     onProgressChange = _ref.onProgressChange,
     onDoubleClick = _ref.onDoubleClick,
@@ -11414,7 +11136,11 @@ var Gantt = function Gantt(_ref) {
     onContextMenu = _ref.onContextMenu,
     onDelete = _ref.onDelete,
     onSelect = _ref.onSelect,
-    onExpanderClick = _ref.onExpanderClick;
+    onExpanderClick = _ref.onExpanderClick,
+    _ref$viewMode = _ref.viewMode,
+    viewMode = _ref$viewMode === void 0 ? "month" : _ref$viewMode,
+    onScrollX = _ref.onScrollX,
+    onScrollY = _ref.onScrollY;
   var wrapperRef = react.useRef(null);
   var taskGanttRef = react.useRef(null);
   var taskListRef = react.useRef(null);
@@ -11466,12 +11192,12 @@ var Gantt = function Gantt(_ref) {
     setFailedTask = _useState5[1];
   var svgWidth = dateSetup.dates.length * columnWidth;
   var ganttFullHeight = barTasks.length * rowHeight;
-  var _useState6 = react.useState(0),
-    scrollY = _useState6[0],
-    setScrollY = _useState6[1];
-  var _useState7 = react.useState(-1),
-    scrollX = _useState7[0],
-    setScrollX = _useState7[1];
+  var _useState6 = react.useState(initialScrollX),
+    scrollX = _useState6[0],
+    setScrollX = _useState6[1];
+  var _useState7 = react.useState(initialScrollY),
+    scrollY = _useState7[0],
+    setScrollY = _useState7[1];
   var ignoreScrollEvent = react.useRef(false);
   var setIgnoreScrollEvent = function setIgnoreScrollEvent(value) {
     ignoreScrollEvent.current = value;
@@ -11486,9 +11212,12 @@ var Gantt = function Gantt(_ref) {
     window.addEventListener("gantt-sync-scroll-event", function (e) {
       if (e.detail.id !== id) {
         setScrollX(e.detail.scrollX);
+        if (onScrollX) {
+          onScrollX(e.detail.scrollX);
+        }
       }
     });
-  }, [id]);
+  }, [id, onScrollX]);
   react.useEffect(function () {
     var filteredTasks;
     if (onExpanderClick) {
@@ -11582,6 +11311,24 @@ var Gantt = function Gantt(_ref) {
       setTaskListWidth(taskListRef.current.offsetWidth);
     }
   }, [taskListRef, listCellWidth]);
+  react.useEffect(function () {
+    if (wrapperRef.current) {
+      if (scrollX !== -1) {
+        var wrap = wrapperRef.current;
+        var setScrollLeft = function setScrollLeft() {
+          wrap.scrollLeft = scrollX;
+        };
+        setTimeout(setScrollLeft, 125);
+      }
+      if (scrollY !== 0) {
+        var _wrap = wrapperRef.current;
+        var setScrollTop = function setScrollTop() {
+          _wrap.scrollTop = scrollY;
+        };
+        setTimeout(setScrollTop, 125);
+      }
+    }
+  }, []);
   react.useEffect(function () {
     if (wrapperRef.current) {
       setSvgContainerWidth(wrapperRef.current.offsetWidth - taskListWidth.current);
@@ -11629,9 +11376,16 @@ var Gantt = function Gantt(_ref) {
     };
   }, [wrapperRef, scrollY, scrollX, ganttHeight, svgWidth, rtl, ganttFullHeight]);
   var handleScrollY = function handleScrollY(event) {
-    if (scrollY !== event.currentTarget.scrollTop && !ignoreScrollEvent.current) {
-      setScrollY(event.currentTarget.scrollTop);
-      setIgnoreScrollEvent(true);
+    if (scrollY !== event.currentTarget.scrollTop) {
+      if (onScrollY) {
+        onScrollY(event.currentTarget.scrollTop);
+      }
+      if (!ignoreScrollEvent.current) {
+        setScrollY(event.currentTarget.scrollTop);
+        setIgnoreScrollEvent(true);
+      } else {
+        setIgnoreScrollEvent(false);
+      }
     } else {
       setIgnoreScrollEvent(false);
     }
@@ -11697,6 +11451,9 @@ var Gantt = function Gantt(_ref) {
       } else if (newScrollY > ganttFullHeight - ganttHeight) {
         newScrollY = ganttFullHeight - ganttHeight;
       }
+      if (onScrollY) {
+        onScrollY(event.currentTarget.scrollTop);
+      }
       setScrollY(newScrollY);
     }
     setIgnoreScrollEvent(true);
@@ -11790,6 +11547,7 @@ var Gantt = function Gantt(_ref) {
     ganttHeight: ganttHeight,
     currentDateIndicator: currentDateIndicatorContent,
     projection: projectionContent,
+    readOnly: readOnly,
     setGanttEvent: setGanttEvent,
     setFailedTask: setFailedTask,
     setSelectedTask: handleSelectedTask,
@@ -11820,7 +11578,7 @@ var Gantt = function Gantt(_ref) {
     TaskListTable: TaskListTable
   };
   return react.createElement("div", null, react.createElement("div", {
-    className: styles$7.wrapper,
+    className: "" + styles$7.wrapper,
     onKeyDown: handleKeyDown,
     tabIndex: 0,
     ref: wrapperRef
@@ -11864,6 +11622,199 @@ var Gantt = function Gantt(_ref) {
   }));
 };
 
+var MAIN_GANTT_ID = "main";
+var SECONDARY_GANTT_ID = "secondary";
+var columnWidthForTimeUnit = function columnWidthForTimeUnit(timeUnit) {
+  switch (timeUnit) {
+    case "year":
+      return 60 * 2;
+    default:
+      return 60;
+  }
+};
+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,
+      icon = _ref.icon;
+    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
+      } : {},
+      icon: icon
+    };
+  };
+  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,
+      icon = x.icon;
+    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,
+      icon: icon
+    };
+  };
+  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,
+      icon: row.icon
+    };
+    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 cachedFormats = {};
 var getOrBuildCachedFormat = function getOrBuildCachedFormat(locale, options) {
   var _cachedFormats$key;
@@ -12137,16 +12088,16 @@ var classes$2 = {"switcher":"_3P0WE","button":"_1oXbe","label":"_1R9mh"};
 var Switcher = function Switcher(_ref) {
   var onTimeUnitChange = _ref.onTimeUnitChange;
   var day = function day() {
-    return onTimeUnitChange(TimeUnit.DAY);
+    return onTimeUnitChange("day");
   };
   var week = function week() {
-    return onTimeUnitChange(TimeUnit.WEEK);
+    return onTimeUnitChange("week");
   };
   var month = function month() {
-    return onTimeUnitChange(TimeUnit.MONTH);
+    return onTimeUnitChange("month");
   };
   var year = function year() {
-    return onTimeUnitChange(TimeUnit.YEAR);
+    return onTimeUnitChange("year");
   };
   return react.createElement("div", {
     className: classes$2.switcher
@@ -12179,7 +12130,7 @@ var Switcher = function Switcher(_ref) {
 
 var Planner = function Planner(props) {
   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),
+  var _useState = react.useState(props.viewMode),
     timeUnit = _useState[0],
     setTimeUnit = _useState[1];
   var currentTasks = react.useRef(props.mainGantt.items);
@@ -12292,6 +12243,17 @@ var Planner = function Planner(props) {
       }
     }
     onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(row);
+    var getScrollX = function getScrollX() {
+      if (wrapperRef.current) {
+        var _wrapperRef$current$q;
+        var x = (_wrapperRef$current$q = wrapperRef.current.querySelector('[data-scrollx="true"]')) === null || _wrapperRef$current$q === void 0 ? void 0 : _wrapperRef$current$q.scrollLeft;
+        if (x !== undefined) {
+          var _props$onScrollX;
+          (_props$onScrollX = props.onScrollX) === null || _props$onScrollX === void 0 ? void 0 : _props$onScrollX.call(props, x);
+        }
+      }
+    };
+    setTimeout(getScrollX, 500);
   };
   react.useEffect(function () {
     var _props$secondaryGantt2;
@@ -12322,8 +12284,13 @@ var Planner = function Planner(props) {
     }
   }
   console.log("PLANNER render");
-  return react.createElement("div", null, react.createElement(Switcher, {
+  var wrapperRef = react.useRef(null);
+  return react.createElement("div", {
+    ref: wrapperRef
+  }, react.createElement(Switcher, {
     onTimeUnitChange: function onTimeUnitChange(timeUnit) {
+      var _props$onSetViewMode;
+      (_props$onSetViewMode = props.onSetViewMode) === null || _props$onSetViewMode === void 0 ? void 0 : _props$onSetViewMode.call(props, timeUnit);
       setTimeUnit(timeUnit);
       setViewDate(undefined);
     }
@@ -12345,7 +12312,7 @@ var Planner = function Planner(props) {
     viewDate: viewDate,
     tasks: tasks,
     columnWidth: columnWidthForTimeUnit(timeUnit),
-    viewMode: toViewMode(timeUnit)
+    viewMode: timeUnit
   }, props.mainGantt.stylingOptions, {
     TaskListHeader: (_props$mainGantt$task = props.mainGantt.taskListHeaderProject) != null ? _props$mainGantt$task : CustomTaskListHeaderHOC(props.mainGantt.title, mainGanttDoubleView != null ? mainGanttDoubleView : false, handleSetDoubleView),
     TaskListTable: (_props$mainGantt$task2 = props.mainGantt.taskListTableProject) != null ? _props$mainGantt$task2 : CustomTaskListTableHOC(function (id) {
@@ -12388,7 +12355,12 @@ var Planner = function Planner(props) {
       return handleDateChange(task, currentTasks.current, props.mainGantt.onDateChange);
     },
     locale: locale,
-    dateTimeFormatters: ganttDateTimeFormatters
+    dateTimeFormatters: ganttDateTimeFormatters,
+    initialScrollX: props.mainGantt.initialScrollX,
+    initialScrollY: props.mainGantt.initialScrollY,
+    readOnly: props.mainGantt.readOnly,
+    onScrollX: props.onScrollX,
+    onScrollY: props.mainGantt.onScrollY
   })), props.secondaryGantt && react.createElement(Gantt, Object.assign({
     id: SECONDARY_GANTT_ID,
     key: SECONDARY_GANTT_ID,
@@ -12402,7 +12374,7 @@ var Planner = function Planner(props) {
     viewDate: viewDate,
     tasks: details,
     columnWidth: columnWidthForTimeUnit(timeUnit),
-    viewMode: toViewMode(timeUnit)
+    viewMode: timeUnit
   }, props.mainGantt.stylingOptions, {
     TaskListHeader: (_props$secondaryGantt3 = props.secondaryGantt.taskListHeaderProject) != null ? _props$secondaryGantt3 : CustomTaskListHeaderHOC(props.secondaryGantt.title),
     TaskListTable: (_props$secondaryGantt4 = (_props$secondaryGantt5 = props.secondaryGantt) === null || _props$secondaryGantt5 === void 0 ? void 0 : _props$secondaryGantt5.taskListTableProject) != null ? _props$secondaryGantt4 : CustomTaskListTableHOC(function (id) {
@@ -12438,762 +12410,943 @@ var Planner = function Planner(props) {
       return handleDateChange(task, currentDetails.current, (_props$secondaryGantt7 = props.secondaryGantt) === null || _props$secondaryGantt7 === void 0 ? void 0 : _props$secondaryGantt7.onDateChange);
     },
     locale: locale,
-    dateTimeFormatters: ganttDateTimeFormatters
+    dateTimeFormatters: ganttDateTimeFormatters,
+    initialScrollX: props.secondaryGantt.initialScrollX,
+    initialScrollY: props.secondaryGantt.initialScrollY,
+    readOnly: props.secondaryGantt.readOnly,
+    onScrollY: props.secondaryGantt.onScrollY
   }))));
 };
 
-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 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;
+}
+
+class KupPlannerState {
+  constructor() {
+    this.showSecondaryDates = false;
+    this.detailFilter = "";
+    this.detailInitialScrollX = 0;
+    this.detailInitialScrollY = 0;
+    this.taskFilter = "";
+    this.taskInitialScrollX = 0;
+    this.taskInitialScrollY = 0;
+    this.viewMode = "day";
+  }
+  toDebugString() {
+    // TODO
+    return 'dt state';
+  }
 }
 
 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;-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}.filter{margin:12px 10px 12px 0;padding:0 10px}";
 
-var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-  if (kind === "m")
-    throw new TypeError("Private method is not writable");
-  if (kind === "a" && !f)
-    throw new TypeError("Private accessor was defined without a setter");
-  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-    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 __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-  if (kind === "a" && !f)
-    throw new TypeError("Private accessor was defined without a getter");
-  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-    throw new TypeError("Cannot read private member from an object whose class did not declare it");
-  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var _KupPlanner_instances, _KupPlanner_kupManager, _KupPlanner_lastOnChangeReceived, _KupPlanner_rootPlanner, _KupPlanner_phases, _KupPlanner_showSecondaryDatesLocal, _KupPlanner_renderReactPlannerElement, _KupPlanner_toTasks, _KupPlanner_toDetails, _KupPlanner_getTask, _KupPlanner_removePhases, _KupPlanner_handleOnClickOnTask, _KupPlanner_handleOnClickOnPhase, _KupPlanner_handleOnClickOnDetail, _KupPlanner_handleOnContextMenuOnTask, _KupPlanner_handleOnContextMenuOnPhase, _KupPlanner_handleOnContextMenuOnDetail, _KupPlanner_emitOnChangeEventsReceived, _KupPlanner_onFilter, _KupPlanner_getIconUrl, _KupPlanner_getIconColor;
-const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.kupClick = createEvent(this, "kup-planner-click", 6);
-    this.kupDateChange = createEvent(this, "kup-planner-datechange", 6);
-    this.kupReady = createEvent(this, "kup-planner-ready", 6);
-    this.kupContextMenu = createEvent(this, "kup-planner-contextmenu", 6);
-    _KupPlanner_instances.add(this);
-    /*-------------------------------------------------*/
-    /*       I n t e r n a l   V a r i a b l e s       */
-    /*-------------------------------------------------*/
-    _KupPlanner_kupManager.set(this, kupManagerInstance());
-    _KupPlanner_lastOnChangeReceived.set(this, void 0);
-    _KupPlanner_rootPlanner.set(this, void 0);
-    _KupPlanner_phases.set(this, {});
-    // no re-render
-    _KupPlanner_showSecondaryDatesLocal.set(this, false);
-    this.customStyle = '';
-    this.data = undefined;
-    this.detailData = undefined;
-    this.detailColorCol = undefined;
-    this.detailColumns = undefined;
-    this.detailDates = undefined;
-    this.detailHeight = undefined;
-    this.detailIconCol = 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;
-    this.phaseDates = undefined;
-    this.phaseIconCol = undefined;
-    this.phaseIdCol = undefined;
-    this.phaseNameCol = undefined;
-    this.phasePrevDates = undefined;
-    this.showSecondaryDates = false;
-    this.taskColumns = undefined;
-    this.taskDates = undefined;
-    this.taskHeight = undefined;
-    this.taskIconCol = undefined;
-    this.taskIdCol = undefined;
-    this.taskNameCol = undefined;
-    this.taskPrevDates = undefined;
-    this.titleMess = undefined;
-    this.plannerProps = undefined;
-  }
-  dataChanged() {
-    __classPrivateFieldSet(this, _KupPlanner_phases, {}, "f");
-  }
-  showSecondaryDatesChanged() {
-    var _a;
-    __classPrivateFieldSet(this, _KupPlanner_showSecondaryDatesLocal, this.showSecondaryDates, "f");
-    if ((_a = this.plannerProps) === null || _a === void 0 ? void 0 : _a.mainGantt) {
-      this.plannerProps.mainGantt.showSecondaryDates =
-        this.showSecondaryDates;
-    }
-  }
-  /*-------------------------------------------------*/
-  /*           P u b l i c   M e t h o d s           */
-  /*-------------------------------------------------*/
-  /**
-   * Used to retrieve component's props values.
-   * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
-   * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
-   */
-  async getProps(descriptions) {
-    return getProps(this, KupPlannerProps, descriptions);
-  }
-  /**
-   * This method is used to trigger a new render of the component.
-   */
-  async refresh() {
-    forceUpdate(this);
-  }
-  /**
-   * Sets the props to the component.
-   * @param {GenericObject} props - Object containing props that will be set to the component.
-   */
-  async setProps(props) {
-    setProps(this, KupPlannerProps, props);
-  }
-  /**
-   * Add a list of phases to the project
-   * @param taskId
-   * @param data - Matrix which contains project phases
-   */
-  async addPhases(taskId, data) {
-    var _a;
-    const task = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getTask).call(this, taskId);
-    if (task) {
-      __classPrivateFieldGet(this, _KupPlanner_phases, "f")[taskId] = data;
-      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 iconUrl = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconUrl).call(this, row, this.phaseIconCol);
-        let iconColor = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconColor).call(this, row, this.phaseIconCol);
-        let phase = {
-          taskRow: task.taskRow,
-          phaseRow: row,
-          id: task.id + '_' + row.cells[this.phaseIdCol].value,
-          phaseRowId: row.id,
-          taskRowId: task.taskRowId,
-          name: row.cells[this.phaseNameCol].value,
-          startDate: datesSanitized.dateValues[0],
-          endDate: datesSanitized.dateValues[1],
-          secondaryStartDate: datesSanitized.secDateValues[0],
-          secondaryEndDate: datesSanitized.secDateValues[1],
-          type: 'task',
-          color: row.cells[this.phaseColorCol].value,
-          selectedColor: row.cells[this.phaseColorCol].value,
-          valuesToShow: valuesToShow,
-          rowType: KupPlannerGanttRowType.PHASE,
-          icon: iconUrl
-            ? { url: iconUrl, color: iconColor !== null && iconColor !== void 0 ? iconColor : '#595959' }
-            : undefined,
-        };
-        return phase;
-      });
-    }
-    this.plannerProps = Object.assign({}, this.plannerProps);
-  }
-  //---- Lifecycle hooks ----
-  componentWillLoad() {
-    __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").debug.logLoad(this, false);
-    __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.register(this);
-  }
-  componentDidLoad() {
-    __classPrivateFieldSet(this, _KupPlanner_showSecondaryDatesLocal, this.showSecondaryDates, "f");
-    let details = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toDetails).call(this, this.detailData);
-    if (details && details.length == 0) {
-      details = undefined;
-    }
-    const mainFilter = this.rootElement.shadowRoot.querySelector('#main-filter');
-    FTextFieldMDC(mainFilter);
-    const secondaryFilter = this.rootElement.shadowRoot.querySelector('#secondary-filter');
-    if (details) {
-      FTextFieldMDC(secondaryFilter);
-    }
-    this.plannerProps = {
-      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 }),
-        filter: mainFilter,
-        hideLabel: true,
-        ganttHeight: this.taskHeight,
-        showSecondaryDates: __classPrivateFieldGet(this, _KupPlanner_showSecondaryDatesLocal, "f"),
-        onClick: (nativeEvent) => this.handleOnClick(nativeEvent),
-        onContextMenu: (event, row) => this.handleOnContextMenu(event, row),
-        onDateChange: (nativeEvent) => this.handleOnDateChange(nativeEvent),
-      },
-      secondaryGantt: details
-        ? {
-          title: '',
-          items: details,
-          stylingOptions: Object.assign(Object.assign({}, defaultStylingOptions), { listCellWidth: this.listCellWidth }),
-          filter: secondaryFilter,
-          hideLabel: true,
-          ganttHeight: this.detailHeight,
-          onClick: (nativeEvent) => this.handleOnClick(nativeEvent),
-          onContextMenu: (event, row) => this.handleOnContextMenu(event, row),
-          onDateChange: (nativeEvent) => this.handleOnDateChange(nativeEvent),
-        }
-        : undefined,
-      onSetDoubleView: (checked) => this.handleOnSetDoubleView(checked),
-    };
-    __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_renderReactPlannerElement).call(this);
-    this.kupReady.emit({
-      comp: this,
-      id: this.rootElement.id,
-      value: undefined,
-    });
-    __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").debug.logLoad(this, true);
-  }
-  componentWillRender() {
-    __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_renderReactPlannerElement).call(this);
-  }
-  componentDidRender() {
-    __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").debug.logRender(this, true);
-  }
-  onKupClick(event, taskAction) {
-    this.kupClick.emit({
-      comp: this,
-      id: this.rootElement.id,
-      value: event,
-      taskAction: taskAction,
-    });
-  }
-  onKupContextMenu(event, ganttRow, taskAction) {
-    let row;
-    let cell;
-    let column;
-    switch (ganttRow.type) {
-      case 'project': {
-        row = ganttRow.taskRow;
-        cell = row.cells[this.taskIdCol];
-        column = this.data.columns[this.taskIdCol];
-        break;
-      }
-      case 'task': {
-        row = ganttRow.phaseRow;
-        cell = row.cells[this.phaseIdCol];
-        //column = this.data.columns[this.taskIdCol];
-        break;
-      }
-      case 'timeline': {
-        row = ganttRow.detailRow;
-        cell = row.cells[this.detailIdCol];
-        column = this.data.columns[this.detailIdCol];
-        break;
-      }
-    }
-    this.kupContextMenu.emit({
-      comp: this,
-      id: this.rootElement.id,
-      value: ganttRow,
-      taskAction: taskAction,
-      details: {
-        cell: cell,
-        column: column,
-        originalEvent: event,
-        row: row,
-      },
-    });
-  }
-  onKupDateChange(event, taskAction) {
-    this.kupDateChange.emit({
-      comp: this,
-      id: this.rootElement.id,
-      value: event,
-      taskAction: taskAction,
-    });
-  }
-  handleOnClick(nativeEvent) {
-    switch (nativeEvent.rowType) {
-      case KupPlannerGanttRowType.TASK:
-        const taskAction = nativeEvent.phases
-          ? KupPlannerTaskAction.onTaskClosing
-          : KupPlannerTaskAction.onTaskOpening;
-        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnTask).call(this, nativeEvent)) {
-          this.onKupClick(nativeEvent, taskAction);
-        }
-        break;
-      case KupPlannerGanttRowType.PHASE:
-        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnPhase).call(this)) {
-          this.onKupClick(nativeEvent, KupPlannerTaskAction.onClick);
-        }
-        break;
-      case KupPlannerGanttRowType.DETAIL:
-        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnDetail).call(this)) {
-          this.onKupClick(nativeEvent, KupPlannerTaskAction.onClick);
-        }
-        break;
-    }
-  }
-  handleOnContextMenu(event, row) {
-    switch (row.rowType) {
-      case KupPlannerGanttRowType.TASK:
-        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnContextMenuOnTask).call(this)) {
-          this.onKupContextMenu(event, row, KupPlannerTaskAction.onRightClick);
-        }
-        break;
-      case KupPlannerGanttRowType.PHASE:
-        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnContextMenuOnPhase).call(this)) {
-          this.onKupContextMenu(event, row, KupPlannerTaskAction.onRightClick);
-        }
-        break;
-      case KupPlannerGanttRowType.DETAIL:
-        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnContextMenuOnDetail).call(this)) {
-          this.onKupContextMenu(event, row, KupPlannerTaskAction.onRightClick);
-        }
-        break;
-    }
-  }
-  handleOnSetDoubleView(checked) {
-    var _a;
-    __classPrivateFieldSet(this, _KupPlanner_showSecondaryDatesLocal, checked, "f");
-    if ((_a = this.plannerProps) === null || _a === void 0 ? void 0 : _a.mainGantt) {
-      this.plannerProps.mainGantt.showSecondaryDates = checked;
-    }
-  }
-  handleOnDateChange(nativeEvent) {
-    if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_emitOnChangeEventsReceived).call(this, nativeEvent)) {
-      if (nativeEvent.rowType != KupPlannerGanttRowType.DETAIL) {
-        this.onKupDateChange(nativeEvent, KupPlannerTaskAction.onResize);
-      }
-    }
-  }
-  render() {
-    var _a;
-    return (h(Host, null, h("style", null, __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, style: { maxWidth: this.maxWidth } }), h(FTextField, { icon: KupThemeIconValues.SEARCH, id: "main-filter", label: __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), onKeyDown: (e) => {
-        if (e.key === 'Enter') {
-          __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_onFilter).call(this, e);
-        }
-      }, wrapperClass: "filter" }), ((_a = this.detailData) === null || _a === void 0 ? void 0 : _a.rows) && this.detailData.rows.length > 0 ? (h(FTextField, { icon: KupThemeIconValues.SEARCH, id: "secondary-filter", label: __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), onKeyDown: (e) => {
-        if (e.key === 'Enter') {
-          __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_onFilter).call(this, e, true);
-        }
-      }, wrapperClass: "filter" })) : null));
-  }
-  disconnectedCallback() {
-    __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.unregister(this);
-  }
-  get rootElement() { return this; }
-  static get watchers() { return {
-    "data": ["dataChanged"],
-    "showSecondaryDates": ["showSecondaryDatesChanged"]
-  }; }
-  static get style() { return kupPlannerCss; }
-}, [1, "kup-planner", {
-    "customStyle": [1, "custom-style"],
-    "data": [16],
-    "detailData": [16],
-    "detailColorCol": [1, "detail-color-col"],
-    "detailColumns": [16],
-    "detailDates": [16],
-    "detailHeight": [2, "detail-height"],
-    "detailIconCol": [1, "detail-icon-col"],
-    "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"],
-    "phaseDates": [16],
-    "phaseIconCol": [1, "phase-icon-col"],
-    "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"],
-    "taskIconCol": [1, "task-icon-col"],
-    "taskIdCol": [1, "task-id-col"],
-    "taskNameCol": [1, "task-name-col"],
-    "taskPrevDates": [16],
-    "titleMess": [1, "title-mess"],
-    "plannerProps": [32],
-    "getProps": [64],
-    "refresh": [64],
-    "setProps": [64],
-    "addPhases": [64]
-  }]);
-_KupPlanner_kupManager = new WeakMap(), _KupPlanner_lastOnChangeReceived = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(), _KupPlanner_phases = new WeakMap(), _KupPlanner_showSecondaryDatesLocal = new WeakMap(), _KupPlanner_instances = new WeakSet(), _KupPlanner_renderReactPlannerElement = function _KupPlanner_renderReactPlannerElement() {
-  var _a;
-  (_a = __classPrivateFieldGet(this, _KupPlanner_rootPlanner, "f")) === null || _a === void 0 ? void 0 : _a.unmount();
-  const componentWrapperElement = this.rootElement.shadowRoot.getElementById(componentWrapperId);
-  if (componentWrapperElement) {
-    __classPrivateFieldSet(this, _KupPlanner_rootPlanner, client.createRoot(componentWrapperElement), "f");
-    __classPrivateFieldGet(this, _KupPlanner_rootPlanner, "f").render(react.createElement(Planner, this.plannerProps));
-  }
-}, _KupPlanner_toTasks = function _KupPlanner_toTasks(data) {
-  var _a;
-  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, () => this.taskColumns.map((col) => col == this.taskDates[0]
-      ? '#START#'
-      : col == this.taskDates[1]
-        ? '#END#'
-        : getCellValueForDisplay(data.columns.find((kCol) => kCol.name == col), row.cells[col])));
-    let iconUrl = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconUrl).call(this, row, this.taskIconCol);
-    let iconColor = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconColor).call(this, row, this.taskIconCol);
-    let task = {
-      taskRow: row,
-      taskRowId: row.id,
-      id: row.cells[this.taskIdCol].value,
-      name: row.cells[this.taskNameCol].value,
-      startDate: datesSanitized.dateValues[0],
-      endDate: datesSanitized.dateValues[1],
-      secondaryStartDate: datesSanitized.secDateValues[0],
-      secondaryEndDate: datesSanitized.secDateValues[1],
-      type: 'project',
-      valuesToShow: valuesToShow,
-      rowType: KupPlannerGanttRowType.TASK,
-      icon: iconUrl
-        ? { url: iconUrl, color: iconColor !== null && iconColor !== void 0 ? iconColor : '#595959' }
-        : undefined,
-    };
-    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) => {
-    var _a, _b;
-    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,
-        detailRow: row,
-        type: 'timeline',
-        valuesToShow: valuesToShow,
-        rowType: KupPlannerGanttRowType.DETAIL,
-        schedule: [],
-      };
-      details.push(detail);
-    }
-    let iconUrl = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconUrl).call(this, row, this.detailIconCol);
-    let iconColor = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconColor).call(this, row, this.detailIconCol);
-    detail.schedule.push({
-      startDate: datesSanitized.dateValues[0],
-      endDate: datesSanitized.dateValues[1],
-      color: this.detailColorCol
-        ? (_a = row.cells[this.detailColorCol].value) !== null && _a !== void 0 ? _a : '#D9D9D8'
-        : '#D9D9D8',
-      selectedColor: this.detailColorCol
-        ? (_b = row.cells[this.detailColorCol].value) !== null && _b !== void 0 ? _b : '#D9D9D8'
-        : '#D9D9D8',
-      icon: iconUrl
-        ? { url: iconUrl, color: iconColor !== null && iconColor !== void 0 ? iconColor : '#595959' }
-        : undefined,
-    });
-  });
-  return details;
-}, _KupPlanner_getTask = function _KupPlanner_getTask(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 = Object.assign({}, this.plannerProps);
-}, _KupPlanner_handleOnClickOnTask = function _KupPlanner_handleOnClickOnTask(nativeEvent) {
-  const task = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getTask).call(this, nativeEvent.id);
-  if (task === null || task === void 0 ? void 0 : task.phases) {
-    __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_removePhases).call(this, task.id);
-  }
-  return true;
-}, _KupPlanner_handleOnClickOnPhase = function _KupPlanner_handleOnClickOnPhase() {
-  return true;
-}, _KupPlanner_handleOnClickOnDetail = function _KupPlanner_handleOnClickOnDetail() {
-  return true;
-}, _KupPlanner_handleOnContextMenuOnTask = function _KupPlanner_handleOnContextMenuOnTask() {
-  return true;
-}, _KupPlanner_handleOnContextMenuOnPhase = function _KupPlanner_handleOnContextMenuOnPhase() {
-  return true;
-}, _KupPlanner_handleOnContextMenuOnDetail = function _KupPlanner_handleOnContextMenuOnDetail() {
-  return true;
-}, _KupPlanner_emitOnChangeEventsReceived = function _KupPlanner_emitOnChangeEventsReceived(nativeEvent) {
-  let emitEvent = false;
-  if (!__classPrivateFieldGet(this, _KupPlanner_lastOnChangeReceived, "f")) {
-    emitEvent = true;
-    __classPrivateFieldSet(this, _KupPlanner_lastOnChangeReceived, new KupPlannerLastOnChangeReceived(nativeEvent), "f");
-  }
-  else if (!__classPrivateFieldGet(this, _KupPlanner_lastOnChangeReceived, "f").isEquivalent(nativeEvent)) {
-    __classPrivateFieldSet(this, _KupPlanner_lastOnChangeReceived, new KupPlannerLastOnChangeReceived(nativeEvent), "f");
-    emitEvent = true;
-  }
-  return emitEvent;
-}, _KupPlanner_onFilter = function _KupPlanner_onFilter(e, isDetail) {
-  const tempData = {
-    columns: this.data.columns,
-    rows: [],
-  };
-  const value = e.target.value;
-  const data = isDetail ? this.detailData : this.data;
-  const tempRows = [];
-  for (let index = 0; index < data.rows.length; index++) {
-    const row = data.rows[index];
-    const cells = row.cells;
-    for (let index = 0; index < data.columns.length; index++) {
-      const column = data.columns[index];
-      const cell = cells[column.name];
-      if (cell) {
-        const dValue = getCellValueForDisplay(data.columns[index], cell);
-        const found = !!(dValue.toLowerCase().indexOf(value.toLowerCase()) > -1);
-        if (found) {
-          tempRows.push({ row, weight: index });
-          break;
-        }
-      }
-    }
-  }
-  tempRows
-    .sort((a, b) => a.weight - b.weight)
-    .forEach((tempRow) => {
-    tempData.rows.push(tempRow.row);
-  });
-  const newGantt = isDetail
-    ? {
-      secondaryGantt: Object.assign(Object.assign({}, this.plannerProps.secondaryGantt), { items: __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toDetails).call(this, tempData) }),
-    }
-    : {
-      mainGantt: Object.assign(Object.assign({}, this.plannerProps.mainGantt), { items: __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toTasks).call(this, tempData) }),
-    };
-  this.plannerProps = Object.assign(Object.assign({}, this.plannerProps), newGantt);
-}, _KupPlanner_getIconUrl = function _KupPlanner_getIconUrl(row, columnName) {
-  var _a;
-  let iconUrl = undefined;
-  if (columnName) {
-    const iconCell = row.cells[columnName];
-    let icon = (_a = iconCell === null || iconCell === void 0 ? void 0 : iconCell.data) === null || _a === void 0 ? void 0 : _a.resource;
-    if (!icon) {
-      icon = iconCell.value;
-    }
-    if (icon) {
-      iconUrl = getAssetPath('./assets/svg/' + icon + '.svg');
-    }
-  }
-  return iconUrl;
-}, _KupPlanner_getIconColor = function _KupPlanner_getIconColor(row, columnName) {
-  var _a;
-  let iconColor = undefined;
-  if (columnName) {
-    const iconCell = row.cells[columnName];
-    iconColor = (_a = iconCell === null || iconCell === void 0 ? void 0 : iconCell.data) === null || _a === void 0 ? void 0 : _a.color;
-    if (iconColor) {
-      iconColor =
-        __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.colorCheck(iconColor).hexColor;
-    }
-  }
-  return iconColor;
-};
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["kup-planner", "kup-autocomplete", "kup-badge", "kup-button", "kup-button-list", "kup-card", "kup-chart", "kup-checkbox", "kup-chip", "kup-color-picker", "kup-combobox", "kup-data-table", "kup-date-picker", "kup-dialog", "kup-dropdown-button", "kup-form", "kup-gauge", "kup-image", "kup-list", "kup-progress-bar", "kup-radio", "kup-rating", "kup-spinner", "kup-switch", "kup-tab-bar", "kup-text-field", "kup-time-picker", "kup-tree"];
-  components.forEach(tagName => { switch (tagName) {
-    case "kup-planner":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, KupPlanner$1);
-      }
-      break;
-    case "kup-autocomplete":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$s();
-      }
-      break;
-    case "kup-badge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$r();
-      }
-      break;
-    case "kup-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$q();
-      }
-      break;
-    case "kup-button-list":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$p();
-      }
-      break;
-    case "kup-card":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$o();
-      }
-      break;
-    case "kup-chart":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$n();
-      }
-      break;
-    case "kup-checkbox":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$m();
-      }
-      break;
-    case "kup-chip":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$l();
-      }
-      break;
-    case "kup-color-picker":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$k();
-      }
-      break;
-    case "kup-combobox":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$j();
-      }
-      break;
-    case "kup-data-table":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$i();
-      }
-      break;
-    case "kup-date-picker":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$h();
-      }
-      break;
-    case "kup-dialog":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$g();
-      }
-      break;
-    case "kup-dropdown-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$f();
-      }
-      break;
-    case "kup-form":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$e();
-      }
-      break;
-    case "kup-gauge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$d();
-      }
-      break;
-    case "kup-image":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$c();
-      }
-      break;
-    case "kup-list":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$b();
-      }
-      break;
-    case "kup-progress-bar":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$a();
-      }
-      break;
-    case "kup-radio":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "kup-rating":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "kup-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "kup-switch":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "kup-tab-bar":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "kup-text-field":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "kup-time-picker":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "kup-tree":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+  if (kind === "a" && !f)
+    throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+    throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+  if (kind === "m")
+    throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f)
+    throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+    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_lastOnChangeReceived, _KupPlanner_rootPlanner, _KupPlanner_phases, _KupPlanner_storedSettings, _KupPlanner_renderReactPlannerElement, _KupPlanner_toTasks, _KupPlanner_toDetails, _KupPlanner_getTask, _KupPlanner_removePhases, _KupPlanner_handleOnClickOnTask, _KupPlanner_handleOnClickOnPhase, _KupPlanner_handleOnClickOnDetail, _KupPlanner_handleOnContextMenuOnTask, _KupPlanner_handleOnContextMenuOnPhase, _KupPlanner_handleOnContextMenuOnDetail, _KupPlanner_emitOnChangeEventsReceived, _KupPlanner_onFilter, _KupPlanner_getFilteredRows, _KupPlanner_getIconUrl, _KupPlanner_getIconColor;
+const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class KupPlanner extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.kupClick = createEvent(this, "kup-planner-click", 6);
+    this.kupDateChange = createEvent(this, "kup-planner-datechange", 6);
+    this.kupReady = createEvent(this, "kup-planner-ready", 6);
+    this.kupContextMenu = createEvent(this, "kup-planner-contextmenu", 6);
+    this.kupDidUnload = createEvent(this, "kup-planner-didunload", 6);
+    _KupPlanner_instances.add(this);
+    this.state = new KupPlannerState();
+    /*-------------------------------------------------*/
+    /*       I n t e r n a l   V a r i a b l e s       */
+    /*-------------------------------------------------*/
+    _KupPlanner_kupManager.set(this, kupManagerInstance());
+    _KupPlanner_lastOnChangeReceived.set(this, void 0);
+    _KupPlanner_rootPlanner.set(this, void 0);
+    _KupPlanner_phases.set(this, {});
+    // no re-render
+    _KupPlanner_storedSettings.set(this, void 0);
+    this.stateId = '';
+    this.store = undefined;
+    this.customStyle = '';
+    this.data = undefined;
+    this.detailData = undefined;
+    this.detailColorCol = undefined;
+    this.detailColumns = undefined;
+    this.detailDates = undefined;
+    this.detailFilter = undefined;
+    this.detailHeight = undefined;
+    this.detailIconCol = undefined;
+    this.detailIdCol = undefined;
+    this.detailNameCol = undefined;
+    this.detailPrevDates = undefined;
+    this.detailInitialScrollX = undefined;
+    this.detailInitialScrollY = undefined;
+    this.listCellWidth = '300px';
+    this.maxWidth = '90vw';
+    this.phaseColorCol = undefined;
+    this.phaseColumns = undefined;
+    this.phaseColParDep = undefined;
+    this.phaseDates = undefined;
+    this.phaseIconCol = undefined;
+    this.phaseIdCol = undefined;
+    this.phaseNameCol = undefined;
+    this.phasePrevDates = undefined;
+    this.readOnly = false;
+    this.showSecondaryDates = false;
+    this.taskColumns = undefined;
+    this.taskDates = undefined;
+    this.taskFilter = undefined;
+    this.taskHeight = undefined;
+    this.taskIconCol = undefined;
+    this.taskIdCol = undefined;
+    this.taskInitialScrollX = undefined;
+    this.taskInitialScrollY = undefined;
+    this.taskNameCol = undefined;
+    this.taskPrevDates = undefined;
+    this.titleMess = undefined;
+    this.viewMode = 'month';
+    this.plannerProps = undefined;
+  }
+  initWithPersistedState() {
+    if (this.store && this.stateId) {
+      const state = this.store.getState(this.stateId);
+      if (state != null) {
+        __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").debug.logMessage(this, 'Initializing stateId ' + this.stateId);
+        // *** PROPS ***
+        this.detailFilter = state.detailFilter;
+        this.showSecondaryDates = state.showSecondaryDates;
+        this.detailInitialScrollX = state.detailInitialScrollX;
+        this.detailInitialScrollY = state.detailInitialScrollY;
+        this.taskFilter = state.taskFilter;
+        this.taskInitialScrollX = state.taskInitialScrollX;
+        this.taskInitialScrollY = state.taskInitialScrollY;
+        this.viewMode = state.viewMode;
+      }
+    }
+  }
+  persistState() {
+    if (this.store && this.stateId) {
+      let somethingChanged = false;
+      if (!__classPrivateFieldGet(this, _KupPlanner_kupManager, "f").objects.deepEqual(this.state.detailFilter, __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").detailFilter)) {
+        this.state.detailFilter = __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").detailFilter;
+        somethingChanged = true;
+      }
+      if (!__classPrivateFieldGet(this, _KupPlanner_kupManager, "f").objects.deepEqual(this.state.showSecondaryDates, __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").showSecondaryDates)) {
+        this.state.showSecondaryDates =
+          __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").showSecondaryDates;
+        somethingChanged = true;
+      }
+      if (!__classPrivateFieldGet(this, _KupPlanner_kupManager, "f").objects.deepEqual(this.state.detailInitialScrollX, __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").detailInitialScrollX)) {
+        this.state.detailInitialScrollX =
+          __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").detailInitialScrollX;
+        somethingChanged = true;
+      }
+      if (!__classPrivateFieldGet(this, _KupPlanner_kupManager, "f").objects.deepEqual(this.state.detailInitialScrollY, __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").detailInitialScrollY)) {
+        this.state.detailInitialScrollY =
+          __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").detailInitialScrollY;
+        somethingChanged = true;
+      }
+      if (!__classPrivateFieldGet(this, _KupPlanner_kupManager, "f").objects.deepEqual(this.state.taskFilter, __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").taskFilter)) {
+        this.state.taskFilter = __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").taskFilter;
+        somethingChanged = true;
+      }
+      if (!__classPrivateFieldGet(this, _KupPlanner_kupManager, "f").objects.deepEqual(this.state.taskInitialScrollX, __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").taskInitialScrollX)) {
+        this.state.taskInitialScrollX =
+          __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").taskInitialScrollX;
+        somethingChanged = true;
+      }
+      if (!__classPrivateFieldGet(this, _KupPlanner_kupManager, "f").objects.deepEqual(this.state.taskInitialScrollY, __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").taskInitialScrollY)) {
+        this.state.taskInitialScrollY =
+          __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").taskInitialScrollY;
+        somethingChanged = true;
+      }
+      if (!__classPrivateFieldGet(this, _KupPlanner_kupManager, "f").objects.deepEqual(this.state.viewMode, __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").viewMode)) {
+        this.state.viewMode = __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").viewMode;
+        somethingChanged = true;
+      }
+      if (somethingChanged) {
+        __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").debug.logMessage(this, 'Persisting stateId ' + this.stateId);
+        this.store.persistState(this.stateId, this.state);
+      }
+    }
+  }
+  dataChanged() {
+    __classPrivateFieldSet(this, _KupPlanner_phases, {}, "f");
+  }
+  /*-------------------------------------------------*/
+  /*           P u b l i c   M e t h o d s           */
+  /*-------------------------------------------------*/
+  /**
+   * Used to retrieve component's props values.
+   * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
+   * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
+   */
+  async getProps(descriptions) {
+    return getProps(this, KupPlannerProps, descriptions);
+  }
+  /**
+   * This method is used to trigger a new render of the component.
+   */
+  async refresh() {
+    forceUpdate(this);
+  }
+  /**
+   * Sets the props to the component.
+   * @param {GenericObject} props - Object containing props that will be set to the component.
+   */
+  async setProps(props) {
+    setProps(this, KupPlannerProps, props);
+  }
+  /**
+   * Add a list of phases to the project
+   * @param taskId
+   * @param data - Matrix which contains project phases
+   */
+  async addPhases(taskId, data) {
+    var _a;
+    const task = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getTask).call(this, taskId);
+    if (task) {
+      __classPrivateFieldGet(this, _KupPlanner_phases, "f")[taskId] = data;
+      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 iconUrl = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconUrl).call(this, row, this.phaseIconCol);
+        let iconColor = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconColor).call(this, row, this.phaseIconCol);
+        let phase = {
+          taskRow: task.taskRow,
+          phaseRow: row,
+          id: task.id + '_' + row.cells[this.phaseIdCol].value,
+          phaseRowId: row.id,
+          taskRowId: task.taskRowId,
+          name: row.cells[this.phaseNameCol].value,
+          startDate: datesSanitized.dateValues[0],
+          endDate: datesSanitized.dateValues[1],
+          secondaryStartDate: datesSanitized.secDateValues[0],
+          secondaryEndDate: datesSanitized.secDateValues[1],
+          type: 'task',
+          color: row.cells[this.phaseColorCol].value,
+          selectedColor: row.cells[this.phaseColorCol].value,
+          valuesToShow: valuesToShow,
+          rowType: KupPlannerGanttRowType.PHASE,
+          icon: iconUrl
+            ? { url: iconUrl, color: iconColor !== null && iconColor !== void 0 ? iconColor : '#595959' }
+            : undefined,
+        };
+        return phase;
+      });
+    }
+    this.plannerProps = Object.assign({}, this.plannerProps);
+  }
+  //---- Lifecycle hooks ----
+  componentWillLoad() {
+    __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").debug.logLoad(this, false);
+    __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.register(this);
+    // *** Store
+    this.initWithPersistedState();
+    __classPrivateFieldSet(this, _KupPlanner_storedSettings, {
+      detailFilter: this.detailFilter,
+      detailInitialScrollX: this.detailInitialScrollX,
+      detailInitialScrollY: this.detailInitialScrollY,
+      showSecondaryDates: this.showSecondaryDates,
+      taskFilter: this.taskFilter,
+      taskInitialScrollX: this.taskInitialScrollX,
+      taskInitialScrollY: this.taskInitialScrollY,
+      viewMode: this.viewMode,
+    }, "f");
+  }
+  componentDidLoad() {
+    let details = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toDetails).call(this, __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getFilteredRows).call(this, __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").detailFilter, true));
+    const mainFilter = this.rootElement.shadowRoot.querySelector('#main-filter');
+    FTextFieldMDC(mainFilter);
+    const secondaryFilter = this.rootElement.shadowRoot.querySelector('#secondary-filter');
+    if (details) {
+      FTextFieldMDC(secondaryFilter);
+    }
+    // timeout for scroll events
+    let scrollXTimeout;
+    let taskScrollYTimeout;
+    let detailScrollYTimeout;
+    const scrollDelay = 1500;
+    this.plannerProps = {
+      mainGantt: {
+        title: this.titleMess,
+        items: __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toTasks).call(this, __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getFilteredRows).call(this, __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").taskFilter, false)),
+        stylingOptions: Object.assign(Object.assign({}, defaultStylingOptions), { listCellWidth: this.listCellWidth }),
+        filter: mainFilter,
+        hideLabel: true,
+        ganttHeight: this.taskHeight,
+        showSecondaryDates: __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").showSecondaryDates,
+        onClick: (nativeEvent) => this.handleOnClick(nativeEvent),
+        onContextMenu: (event, row) => this.handleOnContextMenu(event, row),
+        onDateChange: (nativeEvent) => this.handleOnDateChange(nativeEvent),
+        initialScrollX: this.taskInitialScrollX,
+        initialScrollY: this.taskInitialScrollY,
+        readOnly: this.readOnly,
+        onScrollY: (y) => {
+          window.clearTimeout(taskScrollYTimeout);
+          taskScrollYTimeout = window.setTimeout(() => this.handleTaskGanttScrollY(y), scrollDelay);
+        },
+      },
+      secondaryGantt: details
+        ? {
+          title: '',
+          items: details,
+          stylingOptions: Object.assign(Object.assign({}, defaultStylingOptions), { listCellWidth: this.listCellWidth }),
+          filter: secondaryFilter,
+          hideLabel: true,
+          ganttHeight: this.detailHeight,
+          onClick: (nativeEvent) => this.handleOnClick(nativeEvent),
+          onContextMenu: (event, row) => this.handleOnContextMenu(event, row),
+          onDateChange: (nativeEvent) => this.handleOnDateChange(nativeEvent),
+          initialScrollX: this.detailInitialScrollX,
+          initialScrollY: this.detailInitialScrollY,
+          readOnly: this.readOnly,
+          onScrollY: (y) => {
+            window.clearTimeout(detailScrollYTimeout);
+            detailScrollYTimeout = window.setTimeout(() => this.handleDetailGanttScrollY(y), scrollDelay);
+          },
+        }
+        : undefined,
+      onSetDoubleView: (checked) => this.handleOnSetDoubleView(checked),
+      onSetViewMode: (value) => this.handleOnSetViewMode(value),
+      viewMode: this.viewMode,
+      onScrollX: (x) => {
+        window.clearTimeout(scrollXTimeout);
+        scrollXTimeout = window.setTimeout(() => this.handleOnScrollX(x), scrollDelay);
+      },
+    };
+    __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_renderReactPlannerElement).call(this);
+    this.kupReady.emit({
+      comp: this,
+      id: this.rootElement.id,
+      value: undefined,
+    });
+    if (this.taskFilter) {
+      __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_onFilter).call(this, this.taskFilter);
+    }
+    if (this.detailFilter) {
+      __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_onFilter).call(this, this.detailFilter, true);
+    }
+    __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").debug.logLoad(this, true);
+  }
+  componentWillRender() {
+    __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_renderReactPlannerElement).call(this);
+  }
+  componentDidRender() {
+    this.persistState();
+    __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").debug.logRender(this, true);
+  }
+  onKupClick(event, taskAction) {
+    this.kupClick.emit({
+      comp: this,
+      id: this.rootElement.id,
+      value: event,
+      taskAction: taskAction,
+    });
+  }
+  onKupContextMenu(event, ganttRow, taskAction) {
+    let row;
+    let cell;
+    let column;
+    switch (ganttRow.type) {
+      case 'project': {
+        row = ganttRow.taskRow;
+        cell = row.cells[this.taskIdCol];
+        column = this.data.columns[this.taskIdCol];
+        break;
+      }
+      case 'task': {
+        row = ganttRow.phaseRow;
+        cell = row.cells[this.phaseIdCol];
+        //column = this.data.columns[this.taskIdCol];
+        break;
+      }
+      case 'timeline': {
+        row = ganttRow.detailRow;
+        cell = row.cells[this.detailIdCol];
+        column = this.data.columns[this.detailIdCol];
+        break;
+      }
+    }
+    this.kupContextMenu.emit({
+      comp: this,
+      id: this.rootElement.id,
+      value: ganttRow,
+      taskAction: taskAction,
+      details: {
+        cell: cell,
+        column: column,
+        originalEvent: event,
+        row: row,
+      },
+    });
+  }
+  onKupDateChange(event, taskAction) {
+    this.kupDateChange.emit({
+      comp: this,
+      id: this.rootElement.id,
+      value: event,
+      taskAction: taskAction,
+    });
+  }
+  handleOnClick(nativeEvent) {
+    switch (nativeEvent.rowType) {
+      case KupPlannerGanttRowType.TASK:
+        const taskAction = nativeEvent.phases
+          ? KupPlannerTaskAction.onTaskClosing
+          : KupPlannerTaskAction.onTaskOpening;
+        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnTask).call(this, nativeEvent)) {
+          this.onKupClick(nativeEvent, taskAction);
+        }
+        break;
+      case KupPlannerGanttRowType.PHASE:
+        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnPhase).call(this)) {
+          this.onKupClick(nativeEvent, KupPlannerTaskAction.onClick);
+        }
+        break;
+      case KupPlannerGanttRowType.DETAIL:
+        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnDetail).call(this)) {
+          this.onKupClick(nativeEvent, KupPlannerTaskAction.onClick);
+        }
+        break;
+    }
+  }
+  handleOnContextMenu(event, row) {
+    switch (row.rowType) {
+      case KupPlannerGanttRowType.TASK:
+        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnContextMenuOnTask).call(this)) {
+          this.onKupContextMenu(event, row, KupPlannerTaskAction.onRightClick);
+        }
+        break;
+      case KupPlannerGanttRowType.PHASE:
+        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnContextMenuOnPhase).call(this)) {
+          this.onKupContextMenu(event, row, KupPlannerTaskAction.onRightClick);
+        }
+        break;
+      case KupPlannerGanttRowType.DETAIL:
+        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnContextMenuOnDetail).call(this)) {
+          this.onKupContextMenu(event, row, KupPlannerTaskAction.onRightClick);
+        }
+        break;
+    }
+  }
+  handleOnSetDoubleView(checked) {
+    var _a;
+    __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").showSecondaryDates = checked;
+    if ((_a = this.plannerProps) === null || _a === void 0 ? void 0 : _a.mainGantt) {
+      this.plannerProps.mainGantt.showSecondaryDates = checked;
+    }
+    this.persistState();
+  }
+  handleOnSetViewMode(value) {
+    var _a;
+    __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").viewMode = value;
+    if ((_a = this.plannerProps) === null || _a === void 0 ? void 0 : _a.mainGantt) {
+      this.plannerProps.mainGantt.viewMode = value;
+    }
+    this.persistState();
+  }
+  handleOnScrollX(x) {
+    __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").taskInitialScrollX = x;
+    __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").detailInitialScrollX = x;
+    this.persistState();
+  }
+  handleTaskGanttScrollY(y) {
+    __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").taskInitialScrollY = y;
+    this.persistState();
+  }
+  handleDetailGanttScrollY(y) {
+    __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").detailInitialScrollY = y;
+    this.persistState();
+  }
+  handleOnDateChange(nativeEvent) {
+    if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_emitOnChangeEventsReceived).call(this, nativeEvent)) {
+      if (nativeEvent.rowType != KupPlannerGanttRowType.DETAIL) {
+        this.onKupDateChange(nativeEvent, KupPlannerTaskAction.onResize);
+      }
+    }
+  }
+  render() {
+    var _a;
+    return (h(Host, null, h("style", null, __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, style: { maxWidth: this.maxWidth } }), h(FTextField, { icon: KupThemeIconValues.SEARCH, id: "main-filter", label: __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), onKeyDown: (e) => {
+        if (e.key === 'Enter') {
+          __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_onFilter).call(this, e.target.value);
+        }
+      }, value: this.taskFilter, wrapperClass: "filter" }), ((_a = this.detailData) === null || _a === void 0 ? void 0 : _a.rows) && this.detailData.rows.length > 0 ? (h(FTextField, { icon: KupThemeIconValues.SEARCH, id: "secondary-filter", label: __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), onKeyDown: (e) => {
+        if (e.key === 'Enter') {
+          __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_onFilter).call(this, e.target.value, true);
+        }
+      }, value: this.detailFilter, wrapperClass: "filter" })) : null));
+  }
+  disconnectedCallback() {
+    __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.unregister(this);
+    this.kupDidUnload.emit({
+      comp: this,
+      id: this.rootElement.id,
+      storedSettings: __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f"),
+    });
+  }
+  get rootElement() { return this; }
+  static get watchers() { return {
+    "data": ["dataChanged"]
+  }; }
+  static get style() { return kupPlannerCss; }
+}, [1, "kup-planner", {
+    "stateId": [1, "state-id"],
+    "store": [16],
+    "customStyle": [1, "custom-style"],
+    "data": [16],
+    "detailData": [16],
+    "detailColorCol": [1, "detail-color-col"],
+    "detailColumns": [16],
+    "detailDates": [16],
+    "detailFilter": [1, "detail-filter"],
+    "detailHeight": [2, "detail-height"],
+    "detailIconCol": [1, "detail-icon-col"],
+    "detailIdCol": [1, "detail-id-col"],
+    "detailNameCol": [1, "detail-name-col"],
+    "detailPrevDates": [16],
+    "detailInitialScrollX": [2, "detail-initial-scroll-x"],
+    "detailInitialScrollY": [2, "detail-initial-scroll-y"],
+    "listCellWidth": [1, "list-cell-width"],
+    "maxWidth": [1, "max-width"],
+    "phaseColorCol": [1, "phase-color-col"],
+    "phaseColumns": [16],
+    "phaseColParDep": [1, "phase-col-par-dep"],
+    "phaseDates": [16],
+    "phaseIconCol": [1, "phase-icon-col"],
+    "phaseIdCol": [1, "phase-id-col"],
+    "phaseNameCol": [1, "phase-name-col"],
+    "phasePrevDates": [16],
+    "readOnly": [4, "read-only"],
+    "showSecondaryDates": [4, "show-secondary-dates"],
+    "taskColumns": [16],
+    "taskDates": [16],
+    "taskFilter": [1, "task-filter"],
+    "taskHeight": [2, "task-height"],
+    "taskIconCol": [1, "task-icon-col"],
+    "taskIdCol": [1, "task-id-col"],
+    "taskInitialScrollX": [2, "task-initial-scroll-x"],
+    "taskInitialScrollY": [2, "task-initial-scroll-y"],
+    "taskNameCol": [1, "task-name-col"],
+    "taskPrevDates": [16],
+    "titleMess": [1, "title-mess"],
+    "viewMode": [1, "view-mode"],
+    "plannerProps": [32],
+    "getProps": [64],
+    "refresh": [64],
+    "setProps": [64],
+    "addPhases": [64]
+  }]);
+_KupPlanner_kupManager = new WeakMap(), _KupPlanner_lastOnChangeReceived = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(), _KupPlanner_phases = new WeakMap(), _KupPlanner_storedSettings = new WeakMap(), _KupPlanner_instances = new WeakSet(), _KupPlanner_renderReactPlannerElement = function _KupPlanner_renderReactPlannerElement() {
+  var _a;
+  (_a = __classPrivateFieldGet(this, _KupPlanner_rootPlanner, "f")) === null || _a === void 0 ? void 0 : _a.unmount();
+  const componentWrapperElement = this.rootElement.shadowRoot.getElementById(componentWrapperId);
+  if (componentWrapperElement) {
+    __classPrivateFieldSet(this, _KupPlanner_rootPlanner, client.createRoot(componentWrapperElement), "f");
+    __classPrivateFieldGet(this, _KupPlanner_rootPlanner, "f").render(react.createElement(Planner, this.plannerProps));
+  }
+}, _KupPlanner_toTasks = function _KupPlanner_toTasks(data) {
+  var _a;
+  if (!data || !data.rows) {
+    return [];
+  }
+  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, () => this.taskColumns.map((col) => col == this.taskDates[0]
+      ? '#START#'
+      : col == this.taskDates[1]
+        ? '#END#'
+        : getCellValueForDisplay(data.columns.find((kCol) => kCol.name == col), row.cells[col])));
+    let iconUrl = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconUrl).call(this, row, this.taskIconCol);
+    let iconColor = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconColor).call(this, row, this.taskIconCol);
+    let task = {
+      taskRow: row,
+      taskRowId: row.id,
+      id: row.cells[this.taskIdCol].value,
+      name: row.cells[this.taskNameCol].value,
+      startDate: datesSanitized.dateValues[0],
+      endDate: datesSanitized.dateValues[1],
+      secondaryStartDate: datesSanitized.secDateValues[0],
+      secondaryEndDate: datesSanitized.secDateValues[1],
+      type: 'project',
+      valuesToShow: valuesToShow,
+      rowType: KupPlannerGanttRowType.TASK,
+      icon: iconUrl
+        ? { url: iconUrl, color: iconColor !== null && iconColor !== void 0 ? iconColor : '#595959' }
+        : undefined,
+    };
+    return task;
+  });
+  return tasks;
+}, _KupPlanner_toDetails = function _KupPlanner_toDetails(data) {
+  if (!data || !data.rows) {
+    return undefined;
+  }
+  let details = [];
+  data.rows
+    .filter((row) => isAtLeastOneDateValid(row.cells[this.detailDates[0]], row.cells[this.detailDates[1]]))
+    .forEach((row) => {
+    var _a, _b;
+    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,
+        detailRow: row,
+        type: 'timeline',
+        valuesToShow: valuesToShow,
+        rowType: KupPlannerGanttRowType.DETAIL,
+        schedule: [],
+      };
+      details.push(detail);
+    }
+    let iconUrl = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconUrl).call(this, row, this.detailIconCol);
+    let iconColor = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconColor).call(this, row, this.detailIconCol);
+    detail.schedule.push({
+      startDate: datesSanitized.dateValues[0],
+      endDate: datesSanitized.dateValues[1],
+      color: this.detailColorCol
+        ? (_a = row.cells[this.detailColorCol].value) !== null && _a !== void 0 ? _a : '#D9D9D8'
+        : '#D9D9D8',
+      selectedColor: this.detailColorCol
+        ? (_b = row.cells[this.detailColorCol].value) !== null && _b !== void 0 ? _b : '#D9D9D8'
+        : '#D9D9D8',
+      icon: iconUrl
+        ? { url: iconUrl, color: iconColor !== null && iconColor !== void 0 ? iconColor : '#595959' }
+        : undefined,
+    });
+  });
+  return details;
+}, _KupPlanner_getTask = function _KupPlanner_getTask(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 = Object.assign({}, this.plannerProps);
+}, _KupPlanner_handleOnClickOnTask = function _KupPlanner_handleOnClickOnTask(nativeEvent) {
+  const task = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getTask).call(this, nativeEvent.id);
+  if (task === null || task === void 0 ? void 0 : task.phases) {
+    __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_removePhases).call(this, task.id);
+  }
+  return true;
+}, _KupPlanner_handleOnClickOnPhase = function _KupPlanner_handleOnClickOnPhase() {
+  return true;
+}, _KupPlanner_handleOnClickOnDetail = function _KupPlanner_handleOnClickOnDetail() {
+  return true;
+}, _KupPlanner_handleOnContextMenuOnTask = function _KupPlanner_handleOnContextMenuOnTask() {
+  return true;
+}, _KupPlanner_handleOnContextMenuOnPhase = function _KupPlanner_handleOnContextMenuOnPhase() {
+  return true;
+}, _KupPlanner_handleOnContextMenuOnDetail = function _KupPlanner_handleOnContextMenuOnDetail() {
+  return true;
+}, _KupPlanner_emitOnChangeEventsReceived = function _KupPlanner_emitOnChangeEventsReceived(nativeEvent) {
+  let emitEvent = false;
+  if (!__classPrivateFieldGet(this, _KupPlanner_lastOnChangeReceived, "f")) {
+    emitEvent = true;
+    __classPrivateFieldSet(this, _KupPlanner_lastOnChangeReceived, new KupPlannerLastOnChangeReceived(nativeEvent), "f");
+  }
+  else if (!__classPrivateFieldGet(this, _KupPlanner_lastOnChangeReceived, "f").isEquivalent(nativeEvent)) {
+    __classPrivateFieldSet(this, _KupPlanner_lastOnChangeReceived, new KupPlannerLastOnChangeReceived(nativeEvent), "f");
+    emitEvent = true;
+  }
+  return emitEvent;
+}, _KupPlanner_onFilter = function _KupPlanner_onFilter(value, isDetail) {
+  if (isDetail) {
+    __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").detailFilter = value;
+  }
+  else {
+    __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").taskFilter = value;
+  }
+  const newGantt = isDetail
+    ? {
+      secondaryGantt: Object.assign(Object.assign({}, this.plannerProps.secondaryGantt), { items: __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toDetails).call(this, __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getFilteredRows).call(this, value, isDetail)) }),
+    }
+    : {
+      mainGantt: Object.assign(Object.assign({}, this.plannerProps.mainGantt), { items: __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toTasks).call(this, __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getFilteredRows).call(this, value, isDetail)) }),
+    };
+  this.plannerProps = Object.assign(Object.assign({}, this.plannerProps), newGantt);
+  this.persistState();
+}, _KupPlanner_getFilteredRows = function _KupPlanner_getFilteredRows(value, isDetail) {
+  const data = isDetail ? this.detailData : this.data;
+  if (!data || !data.rows || data.rows.length == 0) {
+    return undefined;
+  }
+  if (!value) {
+    return data;
+  }
+  const tempData = {
+    columns: this.data.columns,
+    rows: [],
+  };
+  const tempRows = [];
+  for (let index = 0; index < data.rows.length; index++) {
+    const row = data.rows[index];
+    const cells = row.cells;
+    for (let index = 0; index < data.columns.length; index++) {
+      const column = data.columns[index];
+      const cell = cells[column.name];
+      if (cell) {
+        const dValue = getCellValueForDisplay(data.columns[index], cell);
+        const found = !!(dValue.toLowerCase().indexOf(value.toLowerCase()) > -1);
+        if (found) {
+          tempRows.push({ row, weight: index });
+          break;
+        }
+      }
+    }
+  }
+  tempRows
+    .sort((a, b) => a.weight - b.weight)
+    .forEach((tempRow) => {
+    tempData.rows.push(tempRow.row);
+  });
+  return tempData;
+}, _KupPlanner_getIconUrl = function _KupPlanner_getIconUrl(row, columnName) {
+  var _a;
+  let iconUrl = undefined;
+  if (columnName) {
+    const iconCell = row.cells[columnName];
+    let icon = (_a = iconCell === null || iconCell === void 0 ? void 0 : iconCell.data) === null || _a === void 0 ? void 0 : _a.resource;
+    if (!icon) {
+      icon = iconCell.value;
+    }
+    if (icon) {
+      iconUrl = getAssetPath('./assets/svg/' + icon + '.svg');
+    }
+  }
+  return iconUrl;
+}, _KupPlanner_getIconColor = function _KupPlanner_getIconColor(row, columnName) {
+  var _a;
+  let iconColor = undefined;
+  if (columnName) {
+    const iconCell = row.cells[columnName];
+    iconColor = (_a = iconCell === null || iconCell === void 0 ? void 0 : iconCell.data) === null || _a === void 0 ? void 0 : _a.color;
+    if (iconColor) {
+      iconColor =
+        __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.colorCheck(iconColor).hexColor;
+    }
+  }
+  return iconColor;
+};
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["kup-planner", "kup-autocomplete", "kup-badge", "kup-button", "kup-button-list", "kup-card", "kup-chart", "kup-checkbox", "kup-chip", "kup-color-picker", "kup-combobox", "kup-data-table", "kup-date-picker", "kup-dialog", "kup-dropdown-button", "kup-form", "kup-gauge", "kup-image", "kup-list", "kup-progress-bar", "kup-radio", "kup-rating", "kup-spinner", "kup-switch", "kup-tab-bar", "kup-text-field", "kup-time-picker", "kup-tree"];
+  components.forEach(tagName => { switch (tagName) {
+    case "kup-planner":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, KupPlanner$1);
+      }
+      break;
+    case "kup-autocomplete":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$s();
+      }
+      break;
+    case "kup-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$r();
+      }
+      break;
+    case "kup-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$q();
+      }
+      break;
+    case "kup-button-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$p();
+      }
+      break;
+    case "kup-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$o();
+      }
+      break;
+    case "kup-chart":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$n();
+      }
+      break;
+    case "kup-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$m();
+      }
+      break;
+    case "kup-chip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$l();
+      }
+      break;
+    case "kup-color-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$k();
+      }
+      break;
+    case "kup-combobox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$j();
+      }
+      break;
+    case "kup-data-table":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$i();
+      }
+      break;
+    case "kup-date-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "kup-dialog":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "kup-dropdown-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "kup-form":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "kup-gauge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "kup-image":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "kup-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "kup-progress-bar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "kup-radio":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "kup-rating":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "kup-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "kup-switch":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "kup-tab-bar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "kup-text-field":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "kup-time-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "kup-tree":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
 }
 
 const KupPlanner = KupPlanner$1;