@sme.up/ketchup 7.4.2 → 8.0.0

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

@@ -1,10 +1,3 @@
-var __classPrivateFieldGet = (this && this.__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 = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
   if (kind === "m")
     throw new TypeError("Private method is not writable");
@@ -14,8 +7,15 @@ 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_toDetails, _KupPlanner_getTask, _KupPlanner_removePhases, _KupPlanner_handleOnClickOnTask, _KupPlanner_handleOnClickOnPhase, _KupPlanner_handleOnClickOnDetail, _KupPlanner_emitOnChangeEventsReceived;
-import { forceUpdate, h, Host, } from '@stencil/core';
+var __classPrivateFieldGet = (this && this.__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;
+import { forceUpdate, getAssetPath, h, Host, } from '@stencil/core';
 import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { defaultStylingOptions, KupPlannerLastOnChangeReceived, KupPlannerProps, KupPlannerTaskAction, KupPlannerGanttRowType, } from './kup-planner-declarations';
 import { getProps, setProps } from '../../utils/utils';
@@ -25,6 +25,10 @@ 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);
@@ -32,9 +36,11 @@ export class KupPlanner {
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
     _KupPlanner_kupManager.set(this, kupManagerInstance());
-    _KupPlanner_rootPlanner.set(this, void 0);
     _KupPlanner_lastOnChangeReceived.set(this, void 0);
-    this.plannerProps = undefined;
+    _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;
@@ -42,6 +48,7 @@ export class KupPlanner {
     this.detailColumns = undefined;
     this.detailDates = undefined;
     this.detailHeight = undefined;
+    this.detailIconCol = undefined;
     this.detailIdCol = undefined;
     this.detailNameCol = undefined;
     this.detailPrevDates = undefined;
@@ -51,6 +58,7 @@ export class KupPlanner {
     this.phaseColumns = undefined;
     this.phaseColParDep = undefined;
     this.phaseDates = undefined;
+    this.phaseIconCol = undefined;
     this.phaseIdCol = undefined;
     this.phaseNameCol = undefined;
     this.phasePrevDates = undefined;
@@ -58,25 +66,23 @@ export class KupPlanner {
     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;
   }
-  onKupClick(event, taskAction) {
-    this.kupClick.emit({
-      comp: this,
-      id: this.rootElement.id,
-      value: event,
-      taskAction: taskAction,
-    });
+  dataChanged() {
+    __classPrivateFieldSet(this, _KupPlanner_phases, {}, "f");
   }
-  onKupDateChange(event) {
-    this.kupDateChange.emit({
-      comp: this,
-      id: this.rootElement.id,
-      value: event,
-    });
+  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           */
@@ -111,6 +117,7 @@ export class KupPlanner {
     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]
@@ -118,6 +125,8 @@ export class KupPlanner {
           : 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,
@@ -134,59 +143,43 @@ export class KupPlanner {
           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);
   }
-  handleOnClick(nativeEvent) {
-    console.log('handleOnClick', nativeEvent);
-    switch (nativeEvent.rowType) {
-      case KupPlannerGanttRowType.TASK:
-        const taskAction = nativeEvent.phases
-          ? KupPlannerTaskAction.onClosing
-          : KupPlannerTaskAction.onOpening;
-        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);
-        }
-        break;
-      case KupPlannerGanttRowType.DETAIL:
-        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnDetail).call(this)) {
-          this.onKupClick(nativeEvent);
-        }
-        break;
-    }
-  }
-  handleOnDateChange(nativeEvent) {
-    if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_emitOnChangeEventsReceived).call(this, nativeEvent)) {
-      console.log('handleOnDateChange', nativeEvent);
-      this.onKupDateChange(nativeEvent);
-    }
-  }
+  //---- 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: this.showSecondaryDates,
+        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
@@ -194,14 +187,16 @@ export class KupPlanner {
           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),
     };
-    console.log('kup-planner.tsx componentDidLoad plannerProps', this.plannerProps);
     __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_renderReactPlannerElement).call(this);
     this.kupReady.emit({
       comp: this,
@@ -216,9 +211,125 @@ export class KupPlanner {
   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() {
-    //console.log('kup-planner.tsx render');
-    return (h(Host, null, h("div", { id: componentWrapperId, style: { maxWidth: this.maxWidth } })));
+    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);
@@ -383,6 +494,26 @@ export class KupPlanner {
         "attribute": "detail-height",
         "reflect": false
       },
+      "detailIconCol": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Column containing icon name to show, for detail"
+        },
+        "attribute": "detail-icon-col",
+        "reflect": false
+      },
       "detailIdCol": {
         "type": "string",
         "mutable": false,
@@ -438,7 +569,7 @@ export class KupPlanner {
               "name": "default",
               "text": "null"
             }],
-          "text": "Columns containing fForecast detail duration, from (firstDate) to (secondDate)"
+          "text": "Columns containing forecast detail duration, from (firstDate) to (secondDate)"
         }
       },
       "listCellWidth": {
@@ -559,6 +690,26 @@ export class KupPlanner {
           "text": "Columns containing phase duration, from (firstDate) to (secondDate)"
         }
       },
+      "phaseIconCol": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Column containing icon name to show, for phase"
+        },
+        "attribute": "phase-icon-col",
+        "reflect": false
+      },
       "phaseIdCol": {
         "type": "string",
         "mutable": false,
@@ -694,6 +845,26 @@ export class KupPlanner {
         "attribute": "task-height",
         "reflect": false
       },
+      "taskIconCol": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Column containing icon name to show, for task"
+        },
+        "attribute": "task-icon-col",
+        "reflect": false
+      },
       "taskIdCol": {
         "type": "string",
         "mutable": false,
@@ -840,6 +1011,26 @@ export class KupPlanner {
             }
           }
         }
+      }, {
+        "method": "kupContextMenu",
+        "name": "kup-planner-contextmenu",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Generic right click event on planner."
+        },
+        "complexType": {
+          "original": "KupPlannerClickEventPayload",
+          "resolved": "KupPlannerClickEventPayload",
+          "references": {
+            "KupPlannerClickEventPayload": {
+              "location": "import",
+              "path": "./kup-planner-declarations"
+            }
+          }
+        }
       }];
   }
   static get methods() {
@@ -970,8 +1161,17 @@ export class KupPlanner {
     };
   }
   static get elementRef() { return "rootElement"; }
+  static get watchers() {
+    return [{
+        "propName": "data",
+        "methodName": "dataChanged"
+      }, {
+        "propName": "showSecondaryDates",
+        "methodName": "showSecondaryDatesChanged"
+      }];
+  }
 }
-_KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(), _KupPlanner_lastOnChangeReceived = new WeakMap(), _KupPlanner_instances = new WeakSet(), _KupPlanner_renderReactPlannerElement = function _KupPlanner_renderReactPlannerElement() {
+_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);
@@ -983,7 +1183,13 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
   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);
+    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,
@@ -996,6 +1202,9 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
       type: 'project',
       valuesToShow: valuesToShow,
       rowType: KupPlannerGanttRowType.TASK,
+      icon: iconUrl
+        ? { url: iconUrl, color: iconColor !== null && iconColor !== void 0 ? iconColor : '#595959' }
+        : undefined,
     };
     return task;
   });
@@ -1008,6 +1217,7 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
   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]]);
@@ -1017,6 +1227,7 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
       detail = {
         id: detailId,
         name: detailNameId,
+        detailRow: row,
         type: 'timeline',
         valuesToShow: valuesToShow,
         rowType: KupPlannerGanttRowType.DETAIL,
@@ -1024,15 +1235,20 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
       };
       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
-        ? row.cells[this.detailColorCol].value
+        ? (_a = row.cells[this.detailColorCol].value) !== null && _a !== void 0 ? _a : '#D9D9D8'
         : '#D9D9D8',
       selectedColor: this.detailColorCol
-        ? row.cells[this.detailColorCol].value
+        ? (_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;
@@ -1042,9 +1258,6 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
   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);
@@ -1056,6 +1269,12 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
   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")) {
@@ -1067,4 +1286,67 @@ _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;
+  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;
 };

package/dist/collection/components/kup-qlik/kup-qlik.css

@@ -10,7 +10,6 @@
   .kup-qlik-container {
     width: 576px;
   }
-
   .kup-qlik-row > .qvobject {
     flex: 0 0 auto;
     min-width: 100px;
@@ -21,7 +20,6 @@
   .kup-qlik-container {
     width: 768px;
   }
-
   .kup-qlik-row > .qvobject {
     flex: 0 0 auto;
     min-width: 100px;
@@ -32,7 +30,6 @@
   .kup-qlik-container {
     width: 992px;
   }
-
   .kup-qlik-row > .qvobject {
     flex: 0 0 auto;
     min-width: 100px;
@@ -43,7 +40,6 @@
   .kup-qlik-container {
     width: 1200px;
   }
-
   .kup-qlik-row > .qvobject {
     flex: 0 0 auto;
     min-width: 100px;
@@ -61,16 +57,16 @@
   height: var(--lyo_obj-height);
 }
 .kup-qlik-row .size-S {
-  height: calc(var(--lyo_obj-height)/2);
+  height: calc(var(--lyo_obj-height) / 2);
 }
 .kup-qlik-row .size-XS {
-  height: calc(var(--lyo_obj-height)/3);
+  height: calc(var(--lyo_obj-height) / 3);
 }
 .kup-qlik-row .size-L {
-  height: calc(var(--lyo_obj-height)*2);
+  height: calc(var(--lyo_obj-height) * 2);
 }
 .kup-qlik-row .size-XL {
-  height: calc(var(--lyo_obj-height)*3);
+  height: calc(var(--lyo_obj-height) * 3);
 }
 .kup-qlik-row .bordered {
   border: 1px solid var(--kup-border-color, #969696);