@sme.up/ketchup 7.4.1 → 7.5.0-SNAPSHOT

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

@@ -14,15 +14,21 @@ 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_lastOnChangeReceived, _KupPlanner_renderReactPlannerElement, _KupPlanner_toTasks, _KupPlanner_getTask, _KupPlanner_removePhases, _KupPlanner_handleOnClickOnTask, _KupPlanner_handleOnClickOnPhase, _KupPlanner_emitOnChangeEventsReceived;
+var _KupPlanner_instances, _KupPlanner_kupManager, _KupPlanner_rootPlanner, _KupPlanner_lastOnChangeReceived, _KupPlanner_renderReactPlannerElement, _KupPlanner_toTasks, _KupPlanner_toDetails, _KupPlanner_getTask, _KupPlanner_removePhases, _KupPlanner_handleOnClickOnTask, _KupPlanner_handleOnClickOnPhase, _KupPlanner_handleOnClickOnDetail, _KupPlanner_emitOnChangeEventsReceived, _KupPlanner_onFilter;
 import { forceUpdate, h, Host, } from '@stencil/core';
 import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
-import { KupPlannerLastOnChangeReceived, 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';
+import { FTextField } from '../../f-components/f-text-field/f-text-field';
+import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc';
+import { KupThemeIconValues } from '../../managers/kup-theme/kup-theme-declarations';
+import { KupLanguageSearch } from '../../managers/kup-language/kup-language-declarations';
 export class KupPlanner {
   constructor() {
     _KupPlanner_instances.add(this);
@@ -35,7 +41,16 @@ export class KupPlanner {
     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;
@@ -43,8 +58,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;
@@ -58,11 +75,12 @@ export class KupPlanner {
       taskAction: taskAction,
     });
   }
-  onKupDateChange(event) {
+  onKupDateChange(event, taskAction) {
     this.kupDateChange.emit({
       comp: this,
       id: this.rootElement.id,
       value: event,
+      taskAction: taskAction,
     });
   }
   /*-------------------------------------------------*/
@@ -98,21 +116,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 = {
           taskRow: task.taskRow,
           phaseRow: row,
-          id: row.cells[this.phaseIdCol].value,
+          id: task.id + '_' + row.cells[this.phaseIdCol].value,
           phaseRowId: row.id,
           taskRowId: task.taskRowId,
           name: row.cells[this.phaseNameCol].value,
-          startDate: row.cells[this.phaseDates[0]].value,
-          endDate: row.cells[this.phaseDates[1]].value,
-          secondaryStartDate: row.cells[this.phasePrevDates[0]].value,
-          secondaryEndDate: row.cells[this.phasePrevDates[1]].value,
-          type: 'phase',
+          startDate: datesSanitized.dateValues[0],
+          endDate: datesSanitized.dateValues[1],
+          secondaryStartDate: datesSanitized.secDateValues[0],
+          secondaryEndDate: datesSanitized.secDateValues[1],
+          type: 'task',
           color: row.cells[this.phaseColorCol].value,
-          valuesToShow: this.phaseColumns.map((col) => row.cells[col].value),
+          selectedColor: row.cells[this.phaseColorCol].value,
+          valuesToShow: valuesToShow,
+          rowType: KupPlannerGanttRowType.PHASE,
         };
         return phase;
       });
@@ -120,27 +146,34 @@ export class KupPlanner {
     this.plannerProps = Object.assign({}, this.plannerProps);
   }
   handleOnClick(nativeEvent) {
-    console.log('handleOnClick', nativeEvent);
-    switch (nativeEvent.type) {
-      case 'task':
+    console.log('kup-planner.handleOnClick', nativeEvent);
+    switch (nativeEvent.rowType) {
+      case KupPlannerGanttRowType.TASK:
         const taskAction = nativeEvent.phases
-          ? KupPlannerTaskAction.onClosing
-          : KupPlannerTaskAction.onOpening;
+          ? KupPlannerTaskAction.onTaskClosing
+          : KupPlannerTaskAction.onTaskOpening;
         if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnTask).call(this, nativeEvent)) {
           this.onKupClick(nativeEvent, taskAction);
         }
         break;
-      case 'phase':
+      case KupPlannerGanttRowType.PHASE:
         if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnPhase).call(this)) {
-          this.onKupClick(nativeEvent);
+          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;
     }
   }
   handleOnDateChange(nativeEvent) {
     if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_emitOnChangeEventsReceived).call(this, nativeEvent)) {
-      console.log('handleOnDateChange', nativeEvent);
-      this.onKupDateChange(nativeEvent);
+      if (nativeEvent.rowType != KupPlannerGanttRowType.DETAIL) {
+        console.log('kup-planner.handleOnDateChange', nativeEvent);
+        this.onKupDateChange(nativeEvent, KupPlannerTaskAction.onResize);
+      }
     }
   }
   componentWillLoad() {
@@ -148,11 +181,40 @@ export class KupPlanner {
     __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;
+    }
+    const mainFilter = this.rootElement.shadowRoot.querySelector('#main-filter');
+    FTextFieldMDC(mainFilter);
+    const secondaryFilter = this.rootElement.shadowRoot.querySelector('#secondary-filter');
+    if (details) {
+      FTextFieldMDC(secondaryFilter);
+    }
     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 }),
+        filter: mainFilter,
+        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 }),
+          filter: secondaryFilter,
+          hideLabel: true,
+          ganttHeight: this.detailHeight,
+          onClick: (nativeEvent) => this.handleOnClick(nativeEvent),
+          onDateChange: (nativeEvent) => this.handleOnDateChange(nativeEvent),
+        }
+        : undefined,
     };
     __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_renderReactPlannerElement).call(this);
     this.kupReady.emit({
@@ -169,7 +231,17 @@ export class KupPlanner {
     __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").debug.logRender(this, true);
   }
   render() {
-    return (h(Host, null, h("div", { id: componentWrapperId })));
+    var _a;
+    //console.log('kup-planner.tsx render');
+    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);
@@ -228,27 +300,212 @@ export class KupPlanner {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Dataset containg the tasks list"
+        }
+      },
+      "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"
         }
       },
-      "dataRaw": {
-        "type": "any",
+      "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,
@@ -260,8 +517,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
@@ -277,8 +537,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": {
@@ -292,8 +555,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
@@ -309,8 +575,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": {
@@ -324,8 +593,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
@@ -341,8 +613,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
@@ -358,10 +633,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,
@@ -373,8 +672,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": {
@@ -388,10 +690,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,
@@ -403,8 +728,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
@@ -420,8 +748,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
@@ -437,8 +768,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": {
@@ -452,8 +786,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
@@ -634,6 +971,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>"
@@ -663,28 +1004,71 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
   }
 }, _KupPlanner_toTasks = function _KupPlanner_toTasks(data) {
   var _a;
-  let tasks = (_a = data.rows) === null || _a === void 0 ? void 0 : _a.map((row) => {
+  let tasks = (_a = data.rows) === null || _a === void 0 ? void 0 : _a.filter((row) => isAtLeastOneDateValid(row.cells[this.taskDates[0]], row.cells[this.taskDates[1]])).map((row) => {
+    const datesSanitized = sanitizeAllDates(row.cells[this.taskDates[0]], row.cells[this.taskDates[1]], row.cells[this.taskPrevDates[0]], row.cells[this.taskPrevDates[1]]);
+    const valuesToShow = getValuesToShow(row, this.taskIdCol, this.taskNameCol, data.columns, this.taskColumns);
     let task = {
       taskRow: row,
       taskRowId: row.id,
       id: row.cells[this.taskIdCol].value,
       name: row.cells[this.taskNameCol].value,
-      startDate: row.cells[this.taskDates[0]].value,
-      endDate: row.cells[this.taskDates[1]].value,
-      secondaryStartDate: row.cells[this.taskPrevDates[0]].value,
-      secondaryEndDate: row.cells[this.taskPrevDates[1]].value,
-      type: 'task',
-      valuesToShow: this.taskColumns.map((col) => row.cells[col].value),
+      startDate: datesSanitized.dateValues[0],
+      endDate: datesSanitized.dateValues[1],
+      secondaryStartDate: datesSanitized.secDateValues[0],
+      secondaryEndDate: datesSanitized.secDateValues[1],
+      type: 'project',
+      valuesToShow: valuesToShow,
+      rowType: KupPlannerGanttRowType.TASK,
     };
     return task;
   });
   return tasks;
+}, _KupPlanner_toDetails = function _KupPlanner_toDetails(data) {
+  let details = [];
+  if (!data || !data.rows) {
+    return details;
+  }
+  data.rows
+    .filter((row) => isAtLeastOneDateValid(row.cells[this.detailDates[0]], row.cells[this.detailDates[1]]))
+    .forEach((row) => {
+    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,
+        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
+        ? (_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',
+    });
+  });
+  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);
@@ -694,6 +1078,8 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
   return true;
 }, _KupPlanner_handleOnClickOnPhase = function _KupPlanner_handleOnClickOnPhase() {
   return true;
+}, _KupPlanner_handleOnClickOnDetail = function _KupPlanner_handleOnClickOnDetail() {
+  return true;
 }, _KupPlanner_emitOnChangeEventsReceived = function _KupPlanner_emitOnChangeEventsReceived(nativeEvent) {
   let emitEvent = false;
   if (!__classPrivateFieldGet(this, _KupPlanner_lastOnChangeReceived, "f")) {
@@ -705,4 +1091,32 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
     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;
+  for (let index = 0; index < data.rows.length; index++) {
+    const row = data.rows[index];
+    const valuesToShow = isDetail
+      ? getValuesToShow(row, this.detailIdCol, this.detailNameCol, data.columns, this.detailColumns)
+      : getValuesToShow(row, this.taskIdCol, this.taskNameCol, data.columns, this.taskColumns);
+    for (let index = 0; index < valuesToShow.length; index++) {
+      const valueToShow = valuesToShow[index];
+      if (valueToShow.toLowerCase().indexOf(value.toLowerCase()) > -1) {
+        tempData.rows.push(row);
+        break;
+      }
+    }
+  }
+  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);
 };