@sme.up/ketchup 7.5.0-SNAPSHOT → 8.0.1

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

@@ -203,7 +203,6 @@
   fill: #fff;
   text-anchor: middle;
   font-weight: lighter;
-  dominant-baseline: central;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -219,8 +218,7 @@
   -moz-user-select: none;
   user-select: none;
   pointer-events: none;
-}
-
+}
 ._11iN9 {
   background: #efefef;
   border-radius: 8px;

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, _KupPlanner_onFilter;
-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';
@@ -36,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;
@@ -46,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;
@@ -55,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;
@@ -62,26 +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, taskAction) {
-    this.kupDateChange.emit({
-      comp: this,
-      id: this.rootElement.id,
-      value: event,
-      taskAction: taskAction,
-    });
+  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           */
@@ -116,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]
@@ -123,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,
@@ -139,48 +143,22 @@ 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('kup-planner.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;
-    }
-  }
-  handleOnDateChange(nativeEvent) {
-    if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_emitOnChangeEventsReceived).call(this, nativeEvent)) {
-      if (nativeEvent.rowType != KupPlannerGanttRowType.DETAIL) {
-        console.log('kup-planner.handleOnDateChange', nativeEvent);
-        this.onKupDateChange(nativeEvent, KupPlannerTaskAction.onResize);
-      }
-    }
-  }
+  //---- 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;
@@ -199,8 +177,9 @@ export class KupPlanner {
         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
@@ -212,9 +191,11 @@ export class KupPlanner {
           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({
@@ -230,9 +211,116 @@ 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() {
     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);
@@ -406,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,
@@ -461,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": {
@@ -582,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,
@@ -717,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,
@@ -863,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() {
@@ -993,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);
@@ -1006,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,
@@ -1019,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;
   });
@@ -1041,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,
@@ -1048,6 +1235,8 @@ _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],
@@ -1057,6 +1246,9 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
       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;
@@ -1066,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);
@@ -1080,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")) {
@@ -1098,19 +1293,28 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
   };
   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 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 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) }),
@@ -1119,4 +1323,30 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
       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-snackbar/kup-snackbar.css

@@ -17,6 +17,7 @@
 }
 
 #kup-component {
+  box-sizing: border-box;
   display: flex;
   justify-content: center;
   height: 100%;
@@ -31,7 +32,7 @@
   box-shadow: var(--kup-box-shadow);
   color: var(--kup-navbar-color);
   display: flex;
-  justify-content: flex-start;
+  justify-content: space-between;
   max-width: 672px;
   min-height: 48px;
   min-width: 344px;
@@ -39,7 +40,7 @@
 .snackbar__text {
   padding: 14px 16px;
   pointer-events: all;
-  white-space: nowrap;
+  word-break: break-word;
 }
 .snackbar__buttons {
   --kup-button-primary-color: var(--kup-navbar-color);
@@ -52,7 +53,7 @@
   justify-content: flex-end;
   margin-right: 8px;
   pointer-events: all;
-  width: 100%;
+  width: max-content;
 }
 .snackbar__close {
   --kup-button-font-size: 11px;

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

@@ -27,6 +27,12 @@ export class KupSnackbar {
       id: this.rootElement.id,
     });
   }
+  onKupTimeoutComplete() {
+    this.kupTimeoutComplete.emit({
+      comp: this,
+      id: this.rootElement.id,
+    });
+  }
   /*-------------------------------------------------*/
   /*           P u b l i c   M e t h o d s           */
   /*-------------------------------------------------*/
@@ -80,6 +86,7 @@ export class KupSnackbar {
     if (this.timeout && this.visible) {
       setTimeout(() => {
         this.hide();
+        this.onKupTimeoutComplete();
       }, this.timeout);
     }
     this.kupManager.debug.logRender(this, true);
@@ -243,6 +250,26 @@ export class KupSnackbar {
             }
           }
         }
+      }, {
+        "method": "kupTimeoutComplete",
+        "name": "kup-snackbar-timeoutcomplete",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Triggered when the snackbar's hidden timeout is complete."
+        },
+        "complexType": {
+          "original": "KupEventPayload",
+          "resolved": "KupEventPayload",
+          "references": {
+            "KupEventPayload": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
+          }
+        }
       }];
   }
   static get methods() {