@sme.up/ketchup 7.4.0 → 7.4.2

package/dist/collection/components/kup-planner/kup-planner.js

@@ -14,15 +14,17 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     throw new TypeError("Cannot write private member to an object whose class did not declare it");
   return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _KupPlanner_instances, _KupPlanner_kupManager, _KupPlanner_rootPlanner, _KupPlanner_renderReactPlannerElement, _KupPlanner_toTasks, _KupPlanner_getTask, _KupPlanner_removePhases, _KupPlanner_handleOnClickOnTask, _KupPlanner_handleOnClickOnPhase;
+var _KupPlanner_instances, _KupPlanner_kupManager, _KupPlanner_rootPlanner, _KupPlanner_lastOnChangeReceived, _KupPlanner_renderReactPlannerElement, _KupPlanner_toTasks, _KupPlanner_toDetails, _KupPlanner_getTask, _KupPlanner_removePhases, _KupPlanner_handleOnClickOnTask, _KupPlanner_handleOnClickOnPhase, _KupPlanner_handleOnClickOnDetail, _KupPlanner_emitOnChangeEventsReceived;
 import { forceUpdate, h, Host, } from '@stencil/core';
 import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
-import { KupPlannerProps, KupPlannerTaskAction, } from './kup-planner-declarations';
+import { defaultStylingOptions, KupPlannerLastOnChangeReceived, KupPlannerProps, KupPlannerTaskAction, KupPlannerGanttRowType, } from './kup-planner-declarations';
 import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
 import { createRoot } from 'react-dom/client';
 import React from 'react';
 import { Planner, } from '@sme.up/gantt-component';
+import { getCellValueForDisplay } from '../../utils/cell-utils';
+import { getValuesToShow, isAtLeastOneDateValid, sanitizeAllDates, } from './kup-planner-helper';
 export class KupPlanner {
   constructor() {
     _KupPlanner_instances.add(this);
@@ -31,10 +33,20 @@ export class KupPlanner {
     /*-------------------------------------------------*/
     _KupPlanner_kupManager.set(this, kupManagerInstance());
     _KupPlanner_rootPlanner.set(this, void 0);
+    _KupPlanner_lastOnChangeReceived.set(this, void 0);
     this.plannerProps = undefined;
     this.customStyle = '';
     this.data = undefined;
-    this.dataRaw = undefined;
+    this.detailData = undefined;
+    this.detailColorCol = undefined;
+    this.detailColumns = undefined;
+    this.detailDates = undefined;
+    this.detailHeight = undefined;
+    this.detailIdCol = undefined;
+    this.detailNameCol = undefined;
+    this.detailPrevDates = undefined;
+    this.listCellWidth = '300px';
+    this.maxWidth = '90vw';
     this.phaseColorCol = undefined;
     this.phaseColumns = undefined;
     this.phaseColParDep = undefined;
@@ -42,8 +54,10 @@ export class KupPlanner {
     this.phaseIdCol = undefined;
     this.phaseNameCol = undefined;
     this.phasePrevDates = undefined;
+    this.showSecondaryDates = false;
     this.taskColumns = undefined;
     this.taskDates = undefined;
+    this.taskHeight = undefined;
     this.taskIdCol = undefined;
     this.taskNameCol = undefined;
     this.taskPrevDates = undefined;
@@ -97,19 +111,29 @@ export class KupPlanner {
     var _a;
     const task = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getTask).call(this, taskId);
     if (task) {
-      task.phases = (_a = data.rows) === null || _a === void 0 ? void 0 : _a.map((row) => {
+      task.phases = (_a = data.rows) === null || _a === void 0 ? void 0 : _a.filter((row) => isAtLeastOneDateValid(row.cells[this.phaseDates[0]], row.cells[this.phaseDates[1]])).map((row) => {
+        const datesSanitized = sanitizeAllDates(row.cells[this.phaseDates[0]], row.cells[this.phaseDates[1]], row.cells[this.phasePrevDates[0]], row.cells[this.phasePrevDates[1]]);
+        const valuesToShow = getValuesToShow(row, this.phaseIdCol, this.phaseNameCol, data.columns, this.phaseColumns, () => this.phaseColumns.map((col) => col == this.phaseDates[0]
+          ? '#START#'
+          : col == this.phaseDates[1]
+            ? '#END#'
+            : getCellValueForDisplay(data.columns.find((kCol) => kCol.name == col), row.cells[col])));
         let phase = {
-          id: row.cells[this.phaseIdCol].value,
+          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: row.cells[this.phaseDates[0]].value,
-          endDate: row.cells[this.phaseDates[1]].value,
-          secondaryStartDate: row.cells[this.phasePrevDates[0]].value,
-          secondaryEndDate: row.cells[this.phasePrevDates[1]].value,
-          type: 'phase',
+          startDate: datesSanitized.dateValues[0],
+          endDate: datesSanitized.dateValues[1],
+          secondaryStartDate: datesSanitized.secDateValues[0],
+          secondaryEndDate: datesSanitized.secDateValues[1],
+          type: 'task',
           color: row.cells[this.phaseColorCol].value,
-          valuesToShow: this.phaseColumns.map((col) => row.cells[col].value),
+          selectedColor: row.cells[this.phaseColorCol].value,
+          valuesToShow: valuesToShow,
+          rowType: KupPlannerGanttRowType.PHASE,
         };
         return phase;
       });
@@ -118,8 +142,8 @@ export class KupPlanner {
   }
   handleOnClick(nativeEvent) {
     console.log('handleOnClick', nativeEvent);
-    switch (nativeEvent.type) {
-      case 'task':
+    switch (nativeEvent.rowType) {
+      case KupPlannerGanttRowType.TASK:
         const taskAction = nativeEvent.phases
           ? KupPlannerTaskAction.onClosing
           : KupPlannerTaskAction.onOpening;
@@ -127,28 +151,57 @@ export class KupPlanner {
           this.onKupClick(nativeEvent, taskAction);
         }
         break;
-      case 'phase':
+      case KupPlannerGanttRowType.PHASE:
         if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnPhase).call(this)) {
           this.onKupClick(nativeEvent);
         }
         break;
+      case KupPlannerGanttRowType.DETAIL:
+        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnDetail).call(this)) {
+          this.onKupClick(nativeEvent);
+        }
+        break;
     }
   }
   handleOnDateChange(nativeEvent) {
-    console.log('handleOnDateChange', nativeEvent);
-    this.onKupDateChange(nativeEvent);
+    if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_emitOnChangeEventsReceived).call(this, nativeEvent)) {
+      console.log('handleOnDateChange', nativeEvent);
+      this.onKupDateChange(nativeEvent);
+    }
   }
   componentWillLoad() {
     __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").debug.logLoad(this, false);
     __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.register(this);
   }
   componentDidLoad() {
+    let details = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toDetails).call(this, this.detailData);
+    if (details && details.length == 0) {
+      details = undefined;
+    }
     this.plannerProps = {
-      title: this.titleMess,
-      items: __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toTasks).call(this, this.data),
-      onClick: (nativeEvent) => this.handleOnClick(nativeEvent),
-      onDateChange: (nativeEvent) => this.handleOnDateChange(nativeEvent),
+      mainGantt: {
+        title: this.titleMess,
+        items: __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toTasks).call(this, this.data),
+        stylingOptions: Object.assign(Object.assign({}, defaultStylingOptions), { listCellWidth: this.listCellWidth }),
+        hideLabel: true,
+        ganttHeight: this.taskHeight,
+        showSecondaryDates: this.showSecondaryDates,
+        onClick: (nativeEvent) => this.handleOnClick(nativeEvent),
+        onDateChange: (nativeEvent) => this.handleOnDateChange(nativeEvent),
+      },
+      secondaryGantt: details
+        ? {
+          title: '',
+          items: details,
+          stylingOptions: Object.assign(Object.assign({}, defaultStylingOptions), { listCellWidth: this.listCellWidth }),
+          hideLabel: true,
+          ganttHeight: this.detailHeight,
+          onClick: (nativeEvent) => this.handleOnClick(nativeEvent),
+          onDateChange: (nativeEvent) => this.handleOnDateChange(nativeEvent),
+        }
+        : undefined,
     };
+    console.log('kup-planner.tsx componentDidLoad plannerProps', this.plannerProps);
     __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_renderReactPlannerElement).call(this);
     this.kupReady.emit({
       comp: this,
@@ -164,7 +217,8 @@ export class KupPlanner {
     __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").debug.logRender(this, true);
   }
   render() {
-    return (h(Host, null, h("div", { id: componentWrapperId })));
+    //console.log('kup-planner.tsx render');
+    return (h(Host, null, h("div", { id: componentWrapperId, style: { maxWidth: this.maxWidth } })));
   }
   disconnectedCallback() {
     __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.unregister(this);
@@ -223,27 +277,212 @@ export class KupPlanner {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Dataset containg the tasks list"
         }
       },
-      "dataRaw": {
-        "type": "any",
+      "detailData": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "KupDataDataset",
+          "resolved": "KupDataDataset",
+          "references": {
+            "KupDataDataset": {
+              "location": "import",
+              "path": "../../managers/kup-data/kup-data-declarations"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Dataset containg the details list"
+        }
+      },
+      "detailColorCol": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Column containing the detail color, in hex format"
         },
-        "attribute": "data-raw",
+        "attribute": "detail-color-col",
         "reflect": false
       },
+      "detailColumns": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Columns containing informations displayed in the left box, near the gantt of details"
+        }
+      },
+      "detailDates": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Columns containing detail duration, from (firstDate) to (secondDate)"
+        }
+      },
+      "detailHeight": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Height for detail gantt"
+        },
+        "attribute": "detail-height",
+        "reflect": false
+      },
+      "detailIdCol": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Column containing unique detail identifier"
+        },
+        "attribute": "detail-id-col",
+        "reflect": false
+      },
+      "detailNameCol": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Column containing detail name displayed"
+        },
+        "attribute": "detail-name-col",
+        "reflect": false
+      },
+      "detailPrevDates": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Columns containing fForecast detail duration, from (firstDate) to (secondDate)"
+        }
+      },
+      "listCellWidth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "'300px'"
+            }],
+          "text": "Total size of the cells inside to the left box, near the gantt"
+        },
+        "attribute": "list-cell-width",
+        "reflect": false,
+        "defaultValue": "'300px'"
+      },
+      "maxWidth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "'90vw'"
+            }],
+          "text": "Max width for component"
+        },
+        "attribute": "max-width",
+        "reflect": false,
+        "defaultValue": "'90vw'"
+      },
       "phaseColorCol": {
         "type": "string",
         "mutable": false,
@@ -255,8 +494,11 @@ export class KupPlanner {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Column containing the phase color in hex format"
         },
         "attribute": "phase-color-col",
         "reflect": false
@@ -272,8 +514,11 @@ export class KupPlanner {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Columns containing informations displayed in the left box ,near the gantt of phases"
         }
       },
       "phaseColParDep": {
@@ -287,8 +532,11 @@ export class KupPlanner {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Column containing the name of the parent phases"
         },
         "attribute": "phase-col-par-dep",
         "reflect": false
@@ -304,8 +552,11 @@ export class KupPlanner {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Columns containing phase duration, from (firstDate) to (secondDate)"
         }
       },
       "phaseIdCol": {
@@ -319,8 +570,11 @@ export class KupPlanner {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Column containing unique phase identifier"
         },
         "attribute": "phase-id-col",
         "reflect": false
@@ -336,8 +590,11 @@ export class KupPlanner {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Column containing phase name displayed"
         },
         "attribute": "phase-name-col",
         "reflect": false
@@ -353,10 +610,34 @@ export class KupPlanner {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Columns containing forecast phase duration, from (firstDate) to (secondDate)"
         }
       },
+      "showSecondaryDates": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Enable/disable display of secondary dates"
+        },
+        "attribute": "show-secondary-dates",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "taskColumns": {
         "type": "unknown",
         "mutable": false,
@@ -368,8 +649,11 @@ export class KupPlanner {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Columns containing informations displayed in the left box, near the gantt"
         }
       },
       "taskDates": {
@@ -383,10 +667,33 @@ export class KupPlanner {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Columns containing task duration, from (firstDate) to (secondDate)"
         }
       },
+      "taskHeight": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Height for main gantt"
+        },
+        "attribute": "task-height",
+        "reflect": false
+      },
       "taskIdCol": {
         "type": "string",
         "mutable": false,
@@ -398,8 +705,11 @@ export class KupPlanner {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Column containing unique task identifier"
         },
         "attribute": "task-id-col",
         "reflect": false
@@ -415,8 +725,11 @@ export class KupPlanner {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Column containing task name displayed"
         },
         "attribute": "task-name-col",
         "reflect": false
@@ -432,8 +745,11 @@ export class KupPlanner {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Columns containing forecast task duration, from (firstDate) to (secondDate)"
         }
       },
       "titleMess": {
@@ -447,8 +763,11 @@ export class KupPlanner {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Message displayed on top"
         },
         "attribute": "title-mess",
         "reflect": false
@@ -629,6 +948,10 @@ export class KupPlanner {
             "KupPlannerPhase": {
               "location": "import",
               "path": "./kup-planner-declarations"
+            },
+            "TaskType": {
+              "location": "import",
+              "path": "@sme.up/gantt-component/dist/types/public-types"
             }
           },
           "return": "Promise<void>"
@@ -648,7 +971,7 @@ export class KupPlanner {
   }
   static get elementRef() { return "rootElement"; }
 }
-_KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(), _KupPlanner_instances = new WeakSet(), _KupPlanner_renderReactPlannerElement = function _KupPlanner_renderReactPlannerElement() {
+_KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(), _KupPlanner_lastOnChangeReceived = 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);
@@ -658,27 +981,70 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
   }
 }, _KupPlanner_toTasks = function _KupPlanner_toTasks(data) {
   var _a;
-  let tasks = (_a = data.rows) === null || _a === void 0 ? void 0 : _a.map((value) => {
+  let tasks = (_a = data.rows) === null || _a === void 0 ? void 0 : _a.filter((row) => isAtLeastOneDateValid(row.cells[this.taskDates[0]], row.cells[this.taskDates[1]])).map((row) => {
+    const datesSanitized = sanitizeAllDates(row.cells[this.taskDates[0]], row.cells[this.taskDates[1]], row.cells[this.taskPrevDates[0]], row.cells[this.taskPrevDates[1]]);
+    const valuesToShow = getValuesToShow(row, this.taskIdCol, this.taskNameCol, data.columns, this.taskColumns);
     let task = {
-      taskRowId: value.id,
-      id: value.cells[this.taskIdCol].value,
-      name: value.cells[this.taskNameCol].value,
-      startDate: value.cells[this.taskDates[0]].value,
-      endDate: value.cells[this.taskDates[1]].value,
-      secondaryStartDate: value.cells[this.taskPrevDates[0]].value,
-      secondaryEndDate: value.cells[this.taskPrevDates[1]].value,
-      type: 'task',
-      valuesToShow: this.taskColumns.map((col) => value.cells[col].value),
+      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,
     };
     return task;
   });
   return tasks;
+}, _KupPlanner_toDetails = function _KupPlanner_toDetails(data) {
+  let details = [];
+  if (!data || !data.rows) {
+    return details;
+  }
+  data.rows
+    .filter((row) => isAtLeastOneDateValid(row.cells[this.detailDates[0]], row.cells[this.detailDates[1]]))
+    .forEach((row) => {
+    const detailId = row.cells[this.detailIdCol].value;
+    const detailNameId = row.cells[this.detailNameCol].value;
+    const datesSanitized = sanitizeAllDates(row.cells[this.detailDates[0]], row.cells[this.detailDates[1]]);
+    const valuesToShow = getValuesToShow(row, this.detailIdCol, this.detailNameCol, data.columns, this.detailColumns);
+    let detail = details.find((det) => det.id == detailId);
+    if (!detail) {
+      detail = {
+        id: detailId,
+        name: detailNameId,
+        type: 'timeline',
+        valuesToShow: valuesToShow,
+        rowType: KupPlannerGanttRowType.DETAIL,
+        schedule: [],
+      };
+      details.push(detail);
+    }
+    detail.schedule.push({
+      startDate: datesSanitized.dateValues[0],
+      endDate: datesSanitized.dateValues[1],
+      color: this.detailColorCol
+        ? row.cells[this.detailColorCol].value
+        : '#D9D9D8',
+      selectedColor: this.detailColorCol
+        ? row.cells[this.detailColorCol].value
+        : '#D9D9D8',
+    });
+  });
+  return details;
 }, _KupPlanner_getTask = function _KupPlanner_getTask(taskId) {
-  return this.plannerProps.items.find((task) => task.id == taskId);
+  return this.plannerProps.mainGantt.items.find((task) => task.id == taskId);
 }, _KupPlanner_removePhases = function _KupPlanner_removePhases(taskId) {
   const task = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getTask).call(this, taskId);
   if (task)
     task.phases = undefined;
+  // this.plannerProps.mainGantt = JSON.parse(
+  //     JSON.stringify(this.plannerProps.mainGantt)
+  // );
   this.plannerProps = Object.assign({}, this.plannerProps);
 }, _KupPlanner_handleOnClickOnTask = function _KupPlanner_handleOnClickOnTask(nativeEvent) {
   const task = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getTask).call(this, nativeEvent.id);
@@ -688,4 +1054,17 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
   return true;
 }, _KupPlanner_handleOnClickOnPhase = function _KupPlanner_handleOnClickOnPhase() {
   return true;
+}, _KupPlanner_handleOnClickOnDetail = function _KupPlanner_handleOnClickOnDetail() {
+  return true;
+}, _KupPlanner_emitOnChangeEventsReceived = function _KupPlanner_emitOnChangeEventsReceived(nativeEvent) {
+  let emitEvent = false;
+  if (!__classPrivateFieldGet(this, _KupPlanner_lastOnChangeReceived, "f")) {
+    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;
 };