@sme.up/ketchup 8.0.2 → 8.2.0

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

@@ -1,1352 +1,1732 @@
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-  if (kind === "m")
-    throw new TypeError("Private method is not writable");
-  if (kind === "a" && !f)
-    throw new TypeError("Private accessor was defined without a setter");
-  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-    throw new TypeError("Cannot write private member to an object whose class did not declare it");
-  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var __classPrivateFieldGet = (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';
-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);
-    /*-------------------------------------------------*/
-    /*       I n t e r n a l   V a r i a b l e s       */
-    /*-------------------------------------------------*/
-    _KupPlanner_kupManager.set(this, kupManagerInstance());
-    _KupPlanner_lastOnChangeReceived.set(this, void 0);
-    _KupPlanner_rootPlanner.set(this, void 0);
-    _KupPlanner_phases.set(this, {});
-    // no re-render
-    _KupPlanner_showSecondaryDatesLocal.set(this, false);
-    this.customStyle = '';
-    this.data = undefined;
-    this.detailData = undefined;
-    this.detailColorCol = undefined;
-    this.detailColumns = undefined;
-    this.detailDates = undefined;
-    this.detailHeight = undefined;
-    this.detailIconCol = undefined;
-    this.detailIdCol = undefined;
-    this.detailNameCol = undefined;
-    this.detailPrevDates = undefined;
-    this.listCellWidth = '300px';
-    this.maxWidth = '90vw';
-    this.phaseColorCol = undefined;
-    this.phaseColumns = undefined;
-    this.phaseColParDep = undefined;
-    this.phaseDates = undefined;
-    this.phaseIconCol = undefined;
-    this.phaseIdCol = undefined;
-    this.phaseNameCol = undefined;
-    this.phasePrevDates = undefined;
-    this.showSecondaryDates = false;
-    this.taskColumns = undefined;
-    this.taskDates = undefined;
-    this.taskHeight = undefined;
-    this.taskIconCol = undefined;
-    this.taskIdCol = undefined;
-    this.taskNameCol = undefined;
-    this.taskPrevDates = undefined;
-    this.titleMess = undefined;
-    this.plannerProps = undefined;
-  }
-  dataChanged() {
-    __classPrivateFieldSet(this, _KupPlanner_phases, {}, "f");
-  }
-  showSecondaryDatesChanged() {
-    var _a;
-    __classPrivateFieldSet(this, _KupPlanner_showSecondaryDatesLocal, this.showSecondaryDates, "f");
-    if ((_a = this.plannerProps) === null || _a === void 0 ? void 0 : _a.mainGantt) {
-      this.plannerProps.mainGantt.showSecondaryDates =
-        this.showSecondaryDates;
-    }
-  }
-  /*-------------------------------------------------*/
-  /*           P u b l i c   M e t h o d s           */
-  /*-------------------------------------------------*/
-  /**
-   * Used to retrieve component's props values.
-   * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
-   * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
-   */
-  async getProps(descriptions) {
-    return getProps(this, KupPlannerProps, descriptions);
-  }
-  /**
-   * This method is used to trigger a new render of the component.
-   */
-  async refresh() {
-    forceUpdate(this);
-  }
-  /**
-   * Sets the props to the component.
-   * @param {GenericObject} props - Object containing props that will be set to the component.
-   */
-  async setProps(props) {
-    setProps(this, KupPlannerProps, props);
-  }
-  /**
-   * Add a list of phases to the project
-   * @param taskId
-   * @param data - Matrix which contains project phases
-   */
-  async addPhases(taskId, data) {
-    var _a;
-    const task = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getTask).call(this, taskId);
-    if (task) {
-      __classPrivateFieldGet(this, _KupPlanner_phases, "f")[taskId] = data;
-      task.phases = (_a = data.rows) === null || _a === void 0 ? void 0 : _a.filter((row) => isAtLeastOneDateValid(row.cells[this.phaseDates[0]], row.cells[this.phaseDates[1]])).map((row) => {
-        const datesSanitized = sanitizeAllDates(row.cells[this.phaseDates[0]], row.cells[this.phaseDates[1]], row.cells[this.phasePrevDates[0]], row.cells[this.phasePrevDates[1]]);
-        const valuesToShow = getValuesToShow(row, this.phaseIdCol, this.phaseNameCol, data.columns, this.phaseColumns, () => this.phaseColumns.map((col) => col == this.phaseDates[0]
-          ? '#START#'
-          : col == this.phaseDates[1]
-            ? '#END#'
-            : getCellValueForDisplay(data.columns.find((kCol) => kCol.name == col), row.cells[col])));
-        let iconUrl = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconUrl).call(this, row, this.phaseIconCol);
-        let iconColor = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconColor).call(this, row, this.phaseIconCol);
-        let phase = {
-          taskRow: task.taskRow,
-          phaseRow: row,
-          id: task.id + '_' + row.cells[this.phaseIdCol].value,
-          phaseRowId: row.id,
-          taskRowId: task.taskRowId,
-          name: row.cells[this.phaseNameCol].value,
-          startDate: datesSanitized.dateValues[0],
-          endDate: datesSanitized.dateValues[1],
-          secondaryStartDate: datesSanitized.secDateValues[0],
-          secondaryEndDate: datesSanitized.secDateValues[1],
-          type: 'task',
-          color: row.cells[this.phaseColorCol].value,
-          selectedColor: row.cells[this.phaseColorCol].value,
-          valuesToShow: valuesToShow,
-          rowType: KupPlannerGanttRowType.PHASE,
-          icon: iconUrl
-            ? { url: iconUrl, color: iconColor !== null && iconColor !== void 0 ? iconColor : '#595959' }
-            : undefined,
-        };
-        return phase;
-      });
-    }
-    this.plannerProps = Object.assign({}, this.plannerProps);
-  }
-  //---- Lifecycle hooks ----
-  componentWillLoad() {
-    __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").debug.logLoad(this, false);
-    __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.register(this);
-  }
-  componentDidLoad() {
-    __classPrivateFieldSet(this, _KupPlanner_showSecondaryDatesLocal, this.showSecondaryDates, "f");
-    let details = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toDetails).call(this, this.detailData);
-    if (details && details.length == 0) {
-      details = undefined;
-    }
-    const mainFilter = this.rootElement.shadowRoot.querySelector('#main-filter');
-    FTextFieldMDC(mainFilter);
-    const secondaryFilter = this.rootElement.shadowRoot.querySelector('#secondary-filter');
-    if (details) {
-      FTextFieldMDC(secondaryFilter);
-    }
-    this.plannerProps = {
-      mainGantt: {
-        title: this.titleMess,
-        items: __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toTasks).call(this, this.data),
-        stylingOptions: Object.assign(Object.assign({}, defaultStylingOptions), { listCellWidth: this.listCellWidth }),
-        filter: mainFilter,
-        hideLabel: true,
-        ganttHeight: this.taskHeight,
-        showSecondaryDates: __classPrivateFieldGet(this, _KupPlanner_showSecondaryDatesLocal, "f"),
-        onClick: (nativeEvent) => this.handleOnClick(nativeEvent),
-        onContextMenu: (event, row) => this.handleOnContextMenu(event, row),
-        onDateChange: (nativeEvent) => this.handleOnDateChange(nativeEvent),
-      },
-      secondaryGantt: details
-        ? {
-          title: '',
-          items: details,
-          stylingOptions: Object.assign(Object.assign({}, defaultStylingOptions), { listCellWidth: this.listCellWidth }),
-          filter: secondaryFilter,
-          hideLabel: true,
-          ganttHeight: this.detailHeight,
-          onClick: (nativeEvent) => this.handleOnClick(nativeEvent),
-          onContextMenu: (event, row) => this.handleOnContextMenu(event, row),
-          onDateChange: (nativeEvent) => this.handleOnDateChange(nativeEvent),
-        }
-        : undefined,
-      onSetDoubleView: (checked) => this.handleOnSetDoubleView(checked),
-    };
-    __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_renderReactPlannerElement).call(this);
-    this.kupReady.emit({
-      comp: this,
-      id: this.rootElement.id,
-      value: undefined,
-    });
-    __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").debug.logLoad(this, true);
-  }
-  componentWillRender() {
-    __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_renderReactPlannerElement).call(this);
-  }
-  componentDidRender() {
-    __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").debug.logRender(this, true);
-  }
-  onKupClick(event, taskAction) {
-    this.kupClick.emit({
-      comp: this,
-      id: this.rootElement.id,
-      value: event,
-      taskAction: taskAction,
-    });
-  }
-  onKupContextMenu(event, ganttRow, taskAction) {
-    let row;
-    let cell;
-    let column;
-    switch (ganttRow.type) {
-      case 'project': {
-        row = ganttRow.taskRow;
-        cell = row.cells[this.taskIdCol];
-        column = this.data.columns[this.taskIdCol];
-        break;
-      }
-      case 'task': {
-        row = ganttRow.phaseRow;
-        cell = row.cells[this.phaseIdCol];
-        //column = this.data.columns[this.taskIdCol];
-        break;
-      }
-      case 'timeline': {
-        row = ganttRow.detailRow;
-        cell = row.cells[this.detailIdCol];
-        column = this.data.columns[this.detailIdCol];
-        break;
-      }
-    }
-    this.kupContextMenu.emit({
-      comp: this,
-      id: this.rootElement.id,
-      value: ganttRow,
-      taskAction: taskAction,
-      details: {
-        cell: cell,
-        column: column,
-        originalEvent: event,
-        row: row,
-      },
-    });
-  }
-  onKupDateChange(event, taskAction) {
-    this.kupDateChange.emit({
-      comp: this,
-      id: this.rootElement.id,
-      value: event,
-      taskAction: taskAction,
-    });
-  }
-  handleOnClick(nativeEvent) {
-    switch (nativeEvent.rowType) {
-      case KupPlannerGanttRowType.TASK:
-        const taskAction = nativeEvent.phases
-          ? KupPlannerTaskAction.onTaskClosing
-          : KupPlannerTaskAction.onTaskOpening;
-        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnTask).call(this, nativeEvent)) {
-          this.onKupClick(nativeEvent, taskAction);
-        }
-        break;
-      case KupPlannerGanttRowType.PHASE:
-        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnPhase).call(this)) {
-          this.onKupClick(nativeEvent, KupPlannerTaskAction.onClick);
-        }
-        break;
-      case KupPlannerGanttRowType.DETAIL:
-        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnDetail).call(this)) {
-          this.onKupClick(nativeEvent, KupPlannerTaskAction.onClick);
-        }
-        break;
-    }
-  }
-  handleOnContextMenu(event, row) {
-    switch (row.rowType) {
-      case KupPlannerGanttRowType.TASK:
-        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnContextMenuOnTask).call(this)) {
-          this.onKupContextMenu(event, row, KupPlannerTaskAction.onRightClick);
-        }
-        break;
-      case KupPlannerGanttRowType.PHASE:
-        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnContextMenuOnPhase).call(this)) {
-          this.onKupContextMenu(event, row, KupPlannerTaskAction.onRightClick);
-        }
-        break;
-      case KupPlannerGanttRowType.DETAIL:
-        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnContextMenuOnDetail).call(this)) {
-          this.onKupContextMenu(event, row, KupPlannerTaskAction.onRightClick);
-        }
-        break;
-    }
-  }
-  handleOnSetDoubleView(checked) {
-    var _a;
-    __classPrivateFieldSet(this, _KupPlanner_showSecondaryDatesLocal, checked, "f");
-    if ((_a = this.plannerProps) === null || _a === void 0 ? void 0 : _a.mainGantt) {
-      this.plannerProps.mainGantt.showSecondaryDates = checked;
-    }
-  }
-  handleOnDateChange(nativeEvent) {
-    if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_emitOnChangeEventsReceived).call(this, nativeEvent)) {
-      if (nativeEvent.rowType != KupPlannerGanttRowType.DETAIL) {
-        this.onKupDateChange(nativeEvent, KupPlannerTaskAction.onResize);
-      }
-    }
-  }
-  render() {
-    var _a;
-    return (h(Host, null, h("style", null, __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, style: { maxWidth: this.maxWidth } }), h(FTextField, { icon: KupThemeIconValues.SEARCH, id: "main-filter", label: __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), onKeyDown: (e) => {
-        if (e.key === 'Enter') {
-          __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_onFilter).call(this, e);
-        }
-      }, wrapperClass: "filter" }), ((_a = this.detailData) === null || _a === void 0 ? void 0 : _a.rows) && this.detailData.rows.length > 0 ? (h(FTextField, { icon: KupThemeIconValues.SEARCH, id: "secondary-filter", label: __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), onKeyDown: (e) => {
-        if (e.key === 'Enter') {
-          __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_onFilter).call(this, e, true);
-        }
-      }, wrapperClass: "filter" })) : null));
-  }
-  disconnectedCallback() {
-    __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.unregister(this);
-  }
-  static get is() { return "kup-planner"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["kup-planner.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["kup-planner.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "customStyle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "\"\""
-            }, {
-              "name": "see",
-              "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
-            }],
-          "text": "Custom style of the component."
-        },
-        "attribute": "custom-style",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "data": {
-        "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 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"
-        }
-      },
-      "detailColorCol": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "null"
-            }],
-          "text": "Column containing the detail color, in hex format"
-        },
-        "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
-      },
-      "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,
-        "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 forecast 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,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "null"
-            }],
-          "text": "Column containing the phase color in hex format"
-        },
-        "attribute": "phase-color-col",
-        "reflect": false
-      },
-      "phaseColumns": {
-        "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 phases"
-        }
-      },
-      "phaseColParDep": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "null"
-            }],
-          "text": "Column containing the name of the parent phases"
-        },
-        "attribute": "phase-col-par-dep",
-        "reflect": false
-      },
-      "phaseDates": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "null"
-            }],
-          "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,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "null"
-            }],
-          "text": "Column containing unique phase identifier"
-        },
-        "attribute": "phase-id-col",
-        "reflect": false
-      },
-      "phaseNameCol": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "null"
-            }],
-          "text": "Column containing phase name displayed"
-        },
-        "attribute": "phase-name-col",
-        "reflect": false
-      },
-      "phasePrevDates": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "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,
-        "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"
-        }
-      },
-      "taskDates": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "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
-      },
-      "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,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "null"
-            }],
-          "text": "Column containing unique task identifier"
-        },
-        "attribute": "task-id-col",
-        "reflect": false
-      },
-      "taskNameCol": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "null"
-            }],
-          "text": "Column containing task name displayed"
-        },
-        "attribute": "task-name-col",
-        "reflect": false
-      },
-      "taskPrevDates": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "null"
-            }],
-          "text": "Columns containing forecast task duration, from (firstDate) to (secondDate)"
-        }
-      },
-      "titleMess": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "null"
-            }],
-          "text": "Message displayed on top"
-        },
-        "attribute": "title-mess",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "plannerProps": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "kupClick",
-        "name": "kup-planner-click",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "KupPlannerEventPayload",
-          "resolved": "KupPlannerEventPayload",
-          "references": {
-            "KupPlannerEventPayload": {
-              "location": "import",
-              "path": "./kup-planner-declarations"
-            }
-          }
-        }
-      }, {
-        "method": "kupDateChange",
-        "name": "kup-planner-datechange",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "KupPlannerEventPayload",
-          "resolved": "KupPlannerEventPayload",
-          "references": {
-            "KupPlannerEventPayload": {
-              "location": "import",
-              "path": "./kup-planner-declarations"
-            }
-          }
-        }
-      }, {
-        "method": "kupReady",
-        "name": "kup-planner-ready",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "KupPlannerEventPayload",
-          "resolved": "KupPlannerEventPayload",
-          "references": {
-            "KupPlannerEventPayload": {
-              "location": "import",
-              "path": "./kup-planner-declarations"
-            }
-          }
-        }
-      }, {
-        "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() {
-    return {
-      "getProps": {
-        "complexType": {
-          "signature": "(descriptions?: boolean) => Promise<GenericObject>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "descriptions - When provided and true, the result will be the list of props with their description."
-                }],
-              "text": "- When provided and true, the result will be the list of props with their description."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes"
-            }
-          },
-          "return": "Promise<GenericObject>"
-        },
-        "docs": {
-          "text": "Used to retrieve component's props values.",
-          "tags": [{
-              "name": "param",
-              "text": "descriptions - When provided and true, the result will be the list of props with their description."
-            }, {
-              "name": "returns",
-              "text": "List of props as object, each key will be a prop."
-            }]
-        }
-      },
-      "refresh": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "This method is used to trigger a new render of the component.",
-          "tags": []
-        }
-      },
-      "setProps": {
-        "complexType": {
-          "signature": "(props: GenericObject) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "props - Object containing props that will be set to the component."
-                }],
-              "text": "- Object containing props that will be set to the component."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets the props to the component.",
-          "tags": [{
-              "name": "param",
-              "text": "props - Object containing props that will be set to the component."
-            }]
-        }
-      },
-      "addPhases": {
-        "complexType": {
-          "signature": "(taskId: string, data: KupDataDataset) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "taskId"
-                }],
-              "text": ""
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "data - Matrix which contains project phases"
-                }],
-              "text": "- Matrix which contains project phases"
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "KupDataDataset": {
-              "location": "import",
-              "path": "../../managers/kup-data/kup-data-declarations"
-            },
-            "KupPlannerPhase": {
-              "location": "import",
-              "path": "./kup-planner-declarations"
-            },
-            "TaskType": {
-              "location": "import",
-              "path": "@sme.up/gantt-component/dist/types/public-types"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Add a list of phases to the project",
-          "tags": [{
-              "name": "param",
-              "text": "taskId"
-            }, {
-              "name": "param",
-              "text": "data - Matrix which contains project phases"
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "rootElement"; }
-  static get watchers() {
-    return [{
-        "propName": "data",
-        "methodName": "dataChanged"
-      }, {
-        "propName": "showSecondaryDates",
-        "methodName": "showSecondaryDatesChanged"
-      }];
-  }
-}
-_KupPlanner_kupManager = new WeakMap(), _KupPlanner_lastOnChangeReceived = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(), _KupPlanner_phases = new WeakMap(), _KupPlanner_showSecondaryDatesLocal = new WeakMap(), _KupPlanner_instances = new WeakSet(), _KupPlanner_renderReactPlannerElement = function _KupPlanner_renderReactPlannerElement() {
-  var _a;
-  (_a = __classPrivateFieldGet(this, _KupPlanner_rootPlanner, "f")) === null || _a === void 0 ? void 0 : _a.unmount();
-  const componentWrapperElement = this.rootElement.shadowRoot.getElementById(componentWrapperId);
-  if (componentWrapperElement) {
-    __classPrivateFieldSet(this, _KupPlanner_rootPlanner, createRoot(componentWrapperElement), "f");
-    __classPrivateFieldGet(this, _KupPlanner_rootPlanner, "f").render(React.createElement(Planner, this.plannerProps));
-  }
-}, _KupPlanner_toTasks = function _KupPlanner_toTasks(data) {
-  var _a;
-  let tasks = (_a = data.rows) === null || _a === void 0 ? void 0 : _a.filter((row) => isAtLeastOneDateValid(row.cells[this.taskDates[0]], row.cells[this.taskDates[1]])).map((row) => {
-    const datesSanitized = sanitizeAllDates(row.cells[this.taskDates[0]], row.cells[this.taskDates[1]], row.cells[this.taskPrevDates[0]], row.cells[this.taskPrevDates[1]]);
-    const valuesToShow = getValuesToShow(row, this.taskIdCol, this.taskNameCol, data.columns, this.taskColumns, () => this.taskColumns.map((col) => col == this.taskDates[0]
-      ? '#START#'
-      : col == this.taskDates[1]
-        ? '#END#'
-        : getCellValueForDisplay(data.columns.find((kCol) => kCol.name == col), row.cells[col])));
-    let iconUrl = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconUrl).call(this, row, this.taskIconCol);
-    let iconColor = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconColor).call(this, row, this.taskIconCol);
-    let task = {
-      taskRow: row,
-      taskRowId: row.id,
-      id: row.cells[this.taskIdCol].value,
-      name: row.cells[this.taskNameCol].value,
-      startDate: datesSanitized.dateValues[0],
-      endDate: datesSanitized.dateValues[1],
-      secondaryStartDate: datesSanitized.secDateValues[0],
-      secondaryEndDate: datesSanitized.secDateValues[1],
-      type: 'project',
-      valuesToShow: valuesToShow,
-      rowType: KupPlannerGanttRowType.TASK,
-      icon: iconUrl
-        ? { url: iconUrl, color: iconColor !== null && iconColor !== void 0 ? iconColor : '#595959' }
-        : undefined,
-    };
-    return task;
-  });
-  return tasks;
-}, _KupPlanner_toDetails = function _KupPlanner_toDetails(data) {
-  let details = [];
-  if (!data || !data.rows) {
-    return details;
-  }
-  data.rows
-    .filter((row) => isAtLeastOneDateValid(row.cells[this.detailDates[0]], row.cells[this.detailDates[1]]))
-    .forEach((row) => {
-    var _a, _b;
-    const detailId = row.cells[this.detailIdCol].value;
-    const detailNameId = row.cells[this.detailNameCol].value;
-    const datesSanitized = sanitizeAllDates(row.cells[this.detailDates[0]], row.cells[this.detailDates[1]]);
-    const valuesToShow = getValuesToShow(row, this.detailIdCol, this.detailNameCol, data.columns, this.detailColumns);
-    let detail = details.find((det) => det.id == detailId);
-    if (!detail) {
-      detail = {
-        id: detailId,
-        name: detailNameId,
-        detailRow: row,
-        type: 'timeline',
-        valuesToShow: valuesToShow,
-        rowType: KupPlannerGanttRowType.DETAIL,
-        schedule: [],
-      };
-      details.push(detail);
-    }
-    let iconUrl = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconUrl).call(this, row, this.detailIconCol);
-    let iconColor = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconColor).call(this, row, this.detailIconCol);
-    detail.schedule.push({
-      startDate: datesSanitized.dateValues[0],
-      endDate: datesSanitized.dateValues[1],
-      color: this.detailColorCol
-        ? (_a = row.cells[this.detailColorCol].value) !== null && _a !== void 0 ? _a : '#D9D9D8'
-        : '#D9D9D8',
-      selectedColor: this.detailColorCol
-        ? (_b = row.cells[this.detailColorCol].value) !== null && _b !== void 0 ? _b : '#D9D9D8'
-        : '#D9D9D8',
-      icon: iconUrl
-        ? { url: iconUrl, color: iconColor !== null && iconColor !== void 0 ? iconColor : '#595959' }
-        : undefined,
-    });
-  });
-  return details;
-}, _KupPlanner_getTask = function _KupPlanner_getTask(taskId) {
-  return this.plannerProps.mainGantt.items.find((task) => task.id == taskId);
-}, _KupPlanner_removePhases = function _KupPlanner_removePhases(taskId) {
-  const task = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getTask).call(this, taskId);
-  if (task)
-    task.phases = undefined;
-  this.plannerProps = Object.assign({}, this.plannerProps);
-}, _KupPlanner_handleOnClickOnTask = function _KupPlanner_handleOnClickOnTask(nativeEvent) {
-  const task = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getTask).call(this, nativeEvent.id);
-  if (task === null || task === void 0 ? void 0 : task.phases) {
-    __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_removePhases).call(this, task.id);
-  }
-  return true;
-}, _KupPlanner_handleOnClickOnPhase = function _KupPlanner_handleOnClickOnPhase() {
-  return true;
-}, _KupPlanner_handleOnClickOnDetail = function _KupPlanner_handleOnClickOnDetail() {
-  return true;
-}, _KupPlanner_handleOnContextMenuOnTask = function _KupPlanner_handleOnContextMenuOnTask() {
-  return true;
-}, _KupPlanner_handleOnContextMenuOnPhase = function _KupPlanner_handleOnContextMenuOnPhase() {
-  return true;
-}, _KupPlanner_handleOnContextMenuOnDetail = function _KupPlanner_handleOnContextMenuOnDetail() {
-  return true;
-}, _KupPlanner_emitOnChangeEventsReceived = function _KupPlanner_emitOnChangeEventsReceived(nativeEvent) {
-  let emitEvent = false;
-  if (!__classPrivateFieldGet(this, _KupPlanner_lastOnChangeReceived, "f")) {
-    emitEvent = true;
-    __classPrivateFieldSet(this, _KupPlanner_lastOnChangeReceived, new KupPlannerLastOnChangeReceived(nativeEvent), "f");
-  }
-  else if (!__classPrivateFieldGet(this, _KupPlanner_lastOnChangeReceived, "f").isEquivalent(nativeEvent)) {
-    __classPrivateFieldSet(this, _KupPlanner_lastOnChangeReceived, new KupPlannerLastOnChangeReceived(nativeEvent), "f");
-    emitEvent = true;
-  }
-  return emitEvent;
-}, _KupPlanner_onFilter = function _KupPlanner_onFilter(e, isDetail) {
-  const tempData = {
-    columns: this.data.columns,
-    rows: [],
-  };
-  const value = e.target.value;
-  const data = isDetail ? this.detailData : this.data;
-  const tempRows = [];
-  for (let index = 0; index < data.rows.length; index++) {
-    const row = data.rows[index];
-    const cells = row.cells;
-    for (let index = 0; index < data.columns.length; index++) {
-      const column = data.columns[index];
-      const cell = cells[column.name];
-      if (cell) {
-        const dValue = getCellValueForDisplay(data.columns[index], cell);
-        const found = !!(dValue.toLowerCase().indexOf(value.toLowerCase()) > -1);
-        if (found) {
-          tempRows.push({ row, weight: index });
-          break;
-        }
-      }
-    }
-  }
-  tempRows
-    .sort((a, b) => a.weight - b.weight)
-    .forEach((tempRow) => {
-    tempData.rows.push(tempRow.row);
-  });
-  const newGantt = isDetail
-    ? {
-      secondaryGantt: Object.assign(Object.assign({}, this.plannerProps.secondaryGantt), { items: __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toDetails).call(this, tempData) }),
-    }
-    : {
-      mainGantt: Object.assign(Object.assign({}, this.plannerProps.mainGantt), { items: __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toTasks).call(this, tempData) }),
-    };
-  this.plannerProps = Object.assign(Object.assign({}, this.plannerProps), newGantt);
-}, _KupPlanner_getIconUrl = function _KupPlanner_getIconUrl(row, columnName) {
-  var _a;
-  let iconUrl = undefined;
-  if (columnName) {
-    const iconCell = row.cells[columnName];
-    let icon = (_a = iconCell === null || iconCell === void 0 ? void 0 : iconCell.data) === null || _a === void 0 ? void 0 : _a.resource;
-    if (!icon) {
-      icon = iconCell.value;
-    }
-    if (icon) {
-      iconUrl = getAssetPath('./assets/svg/' + icon + '.svg');
-    }
-  }
-  return iconUrl;
-}, _KupPlanner_getIconColor = function _KupPlanner_getIconColor(row, columnName) {
-  var _a;
-  let iconColor = undefined;
-  if (columnName) {
-    const iconCell = row.cells[columnName];
-    iconColor = (_a = iconCell === null || iconCell === void 0 ? void 0 : iconCell.data) === null || _a === void 0 ? void 0 : _a.color;
-    if (iconColor) {
-      iconColor =
-        __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.colorCheck(iconColor).hexColor;
-    }
-  }
-  return iconColor;
-};
+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");
+  if (kind === "a" && !f)
+    throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+    throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _KupPlanner_instances, _KupPlanner_kupManager, _KupPlanner_lastOnChangeReceived, _KupPlanner_rootPlanner, _KupPlanner_phases, _KupPlanner_storedSettings, _KupPlanner_renderReactPlannerElement, _KupPlanner_toTasks, _KupPlanner_toDetails, _KupPlanner_getTask, _KupPlanner_removePhases, _KupPlanner_handleOnClickOnTask, _KupPlanner_handleOnClickOnPhase, _KupPlanner_handleOnClickOnDetail, _KupPlanner_handleOnContextMenuOnTask, _KupPlanner_handleOnContextMenuOnPhase, _KupPlanner_handleOnContextMenuOnDetail, _KupPlanner_emitOnChangeEventsReceived, _KupPlanner_onFilter, _KupPlanner_getFilteredRows, _KupPlanner_getIconUrl, _KupPlanner_getIconColor;
+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';
+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';
+import { KupPlannerState } from './kup-planner-state';
+export class KupPlanner {
+  constructor() {
+    _KupPlanner_instances.add(this);
+    this.state = new KupPlannerState();
+    /*-------------------------------------------------*/
+    /*       I n t e r n a l   V a r i a b l e s       */
+    /*-------------------------------------------------*/
+    _KupPlanner_kupManager.set(this, kupManagerInstance());
+    _KupPlanner_lastOnChangeReceived.set(this, void 0);
+    _KupPlanner_rootPlanner.set(this, void 0);
+    _KupPlanner_phases.set(this, {});
+    // no re-render
+    _KupPlanner_storedSettings.set(this, void 0);
+    this.stateId = '';
+    this.store = undefined;
+    this.customStyle = '';
+    this.data = undefined;
+    this.detailData = undefined;
+    this.detailColorCol = undefined;
+    this.detailColumns = undefined;
+    this.detailDates = undefined;
+    this.detailFilter = undefined;
+    this.detailHeight = undefined;
+    this.detailIconCol = undefined;
+    this.detailIdCol = undefined;
+    this.detailNameCol = undefined;
+    this.detailPrevDates = undefined;
+    this.detailInitialScrollX = undefined;
+    this.detailInitialScrollY = undefined;
+    this.listCellWidth = '300px';
+    this.maxWidth = '90vw';
+    this.phaseColorCol = undefined;
+    this.phaseColumns = undefined;
+    this.phaseColParDep = undefined;
+    this.phaseDates = undefined;
+    this.phaseIconCol = undefined;
+    this.phaseIdCol = undefined;
+    this.phaseNameCol = undefined;
+    this.phasePrevDates = undefined;
+    this.readOnly = false;
+    this.showSecondaryDates = false;
+    this.taskColumns = undefined;
+    this.taskDates = undefined;
+    this.taskFilter = undefined;
+    this.taskHeight = undefined;
+    this.taskIconCol = undefined;
+    this.taskIdCol = undefined;
+    this.taskInitialScrollX = undefined;
+    this.taskInitialScrollY = undefined;
+    this.taskNameCol = undefined;
+    this.taskPrevDates = undefined;
+    this.titleMess = undefined;
+    this.viewMode = 'month';
+    this.plannerProps = undefined;
+  }
+  initWithPersistedState() {
+    if (this.store && this.stateId) {
+      const state = this.store.getState(this.stateId);
+      if (state != null) {
+        __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").debug.logMessage(this, 'Initializing stateId ' + this.stateId);
+        // *** PROPS ***
+        this.detailFilter = state.detailFilter;
+        this.showSecondaryDates = state.showSecondaryDates;
+        this.detailInitialScrollX = state.detailInitialScrollX;
+        this.detailInitialScrollY = state.detailInitialScrollY;
+        this.taskFilter = state.taskFilter;
+        this.taskInitialScrollX = state.taskInitialScrollX;
+        this.taskInitialScrollY = state.taskInitialScrollY;
+        this.viewMode = state.viewMode;
+      }
+    }
+  }
+  persistState() {
+    if (this.store && this.stateId) {
+      let somethingChanged = false;
+      if (!__classPrivateFieldGet(this, _KupPlanner_kupManager, "f").objects.deepEqual(this.state.detailFilter, __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").detailFilter)) {
+        this.state.detailFilter = __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").detailFilter;
+        somethingChanged = true;
+      }
+      if (!__classPrivateFieldGet(this, _KupPlanner_kupManager, "f").objects.deepEqual(this.state.showSecondaryDates, __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").showSecondaryDates)) {
+        this.state.showSecondaryDates =
+          __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").showSecondaryDates;
+        somethingChanged = true;
+      }
+      if (!__classPrivateFieldGet(this, _KupPlanner_kupManager, "f").objects.deepEqual(this.state.detailInitialScrollX, __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").detailInitialScrollX)) {
+        this.state.detailInitialScrollX =
+          __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").detailInitialScrollX;
+        somethingChanged = true;
+      }
+      if (!__classPrivateFieldGet(this, _KupPlanner_kupManager, "f").objects.deepEqual(this.state.detailInitialScrollY, __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").detailInitialScrollY)) {
+        this.state.detailInitialScrollY =
+          __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").detailInitialScrollY;
+        somethingChanged = true;
+      }
+      if (!__classPrivateFieldGet(this, _KupPlanner_kupManager, "f").objects.deepEqual(this.state.taskFilter, __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").taskFilter)) {
+        this.state.taskFilter = __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").taskFilter;
+        somethingChanged = true;
+      }
+      if (!__classPrivateFieldGet(this, _KupPlanner_kupManager, "f").objects.deepEqual(this.state.taskInitialScrollX, __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").taskInitialScrollX)) {
+        this.state.taskInitialScrollX =
+          __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").taskInitialScrollX;
+        somethingChanged = true;
+      }
+      if (!__classPrivateFieldGet(this, _KupPlanner_kupManager, "f").objects.deepEqual(this.state.taskInitialScrollY, __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").taskInitialScrollY)) {
+        this.state.taskInitialScrollY =
+          __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").taskInitialScrollY;
+        somethingChanged = true;
+      }
+      if (!__classPrivateFieldGet(this, _KupPlanner_kupManager, "f").objects.deepEqual(this.state.viewMode, __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").viewMode)) {
+        this.state.viewMode = __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").viewMode;
+        somethingChanged = true;
+      }
+      if (somethingChanged) {
+        __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").debug.logMessage(this, 'Persisting stateId ' + this.stateId);
+        this.store.persistState(this.stateId, this.state);
+      }
+    }
+  }
+  dataChanged() {
+    __classPrivateFieldSet(this, _KupPlanner_phases, {}, "f");
+  }
+  /*-------------------------------------------------*/
+  /*           P u b l i c   M e t h o d s           */
+  /*-------------------------------------------------*/
+  /**
+   * Used to retrieve component's props values.
+   * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
+   * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
+   */
+  async getProps(descriptions) {
+    return getProps(this, KupPlannerProps, descriptions);
+  }
+  /**
+   * This method is used to trigger a new render of the component.
+   */
+  async refresh() {
+    forceUpdate(this);
+  }
+  /**
+   * Sets the props to the component.
+   * @param {GenericObject} props - Object containing props that will be set to the component.
+   */
+  async setProps(props) {
+    setProps(this, KupPlannerProps, props);
+  }
+  /**
+   * Add a list of phases to the project
+   * @param taskId
+   * @param data - Matrix which contains project phases
+   */
+  async addPhases(taskId, data) {
+    var _a;
+    const task = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getTask).call(this, taskId);
+    if (task) {
+      __classPrivateFieldGet(this, _KupPlanner_phases, "f")[taskId] = data;
+      task.phases = (_a = data.rows) === null || _a === void 0 ? void 0 : _a.filter((row) => isAtLeastOneDateValid(row.cells[this.phaseDates[0]], row.cells[this.phaseDates[1]])).map((row) => {
+        const datesSanitized = sanitizeAllDates(row.cells[this.phaseDates[0]], row.cells[this.phaseDates[1]], row.cells[this.phasePrevDates[0]], row.cells[this.phasePrevDates[1]]);
+        const valuesToShow = getValuesToShow(row, this.phaseIdCol, this.phaseNameCol, data.columns, this.phaseColumns, () => this.phaseColumns.map((col) => col == this.phaseDates[0]
+          ? '#START#'
+          : col == this.phaseDates[1]
+            ? '#END#'
+            : getCellValueForDisplay(data.columns.find((kCol) => kCol.name == col), row.cells[col])));
+        let iconUrl = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconUrl).call(this, row, this.phaseIconCol);
+        let iconColor = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconColor).call(this, row, this.phaseIconCol);
+        let phase = {
+          taskRow: task.taskRow,
+          phaseRow: row,
+          id: task.id + '_' + row.cells[this.phaseIdCol].value,
+          phaseRowId: row.id,
+          taskRowId: task.taskRowId,
+          name: row.cells[this.phaseNameCol].value,
+          startDate: datesSanitized.dateValues[0],
+          endDate: datesSanitized.dateValues[1],
+          secondaryStartDate: datesSanitized.secDateValues[0],
+          secondaryEndDate: datesSanitized.secDateValues[1],
+          type: 'task',
+          color: row.cells[this.phaseColorCol].value,
+          selectedColor: row.cells[this.phaseColorCol].value,
+          valuesToShow: valuesToShow,
+          rowType: KupPlannerGanttRowType.PHASE,
+          icon: iconUrl
+            ? { url: iconUrl, color: iconColor !== null && iconColor !== void 0 ? iconColor : '#595959' }
+            : undefined,
+        };
+        return phase;
+      });
+    }
+    this.plannerProps.mainGantt.initialScrollX =
+      __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").taskInitialScrollX;
+    this.plannerProps.mainGantt.initialScrollY =
+      __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").taskInitialScrollY;
+    if (this.plannerProps.secondaryGantt) {
+      this.plannerProps.secondaryGantt.initialScrollX =
+        __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").detailInitialScrollX;
+      this.plannerProps.secondaryGantt.initialScrollX =
+        __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").detailInitialScrollY;
+    }
+    this.plannerProps = Object.assign({}, this.plannerProps);
+  }
+  //---- Lifecycle hooks ----
+  componentWillLoad() {
+    __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").debug.logLoad(this, false);
+    __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.register(this);
+    // *** Store
+    this.initWithPersistedState();
+    __classPrivateFieldSet(this, _KupPlanner_storedSettings, {
+      detailFilter: this.detailFilter,
+      detailInitialScrollX: this.detailInitialScrollX,
+      detailInitialScrollY: this.detailInitialScrollY,
+      showSecondaryDates: this.showSecondaryDates,
+      taskFilter: this.taskFilter,
+      taskInitialScrollX: this.taskInitialScrollX,
+      taskInitialScrollY: this.taskInitialScrollY,
+      viewMode: this.viewMode,
+    }, "f");
+  }
+  componentDidLoad() {
+    let details = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toDetails).call(this, __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getFilteredRows).call(this, __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").detailFilter, true));
+    const mainFilter = this.rootElement.shadowRoot.querySelector('#main-filter');
+    FTextFieldMDC(mainFilter);
+    const secondaryFilter = this.rootElement.shadowRoot.querySelector('#secondary-filter');
+    if (details) {
+      FTextFieldMDC(secondaryFilter);
+    }
+    // timeout for scroll events
+    let scrollXTimeout;
+    let taskScrollYTimeout;
+    let detailScrollYTimeout;
+    const scrollDelay = 500;
+    this.plannerProps = {
+      mainGantt: {
+        title: this.titleMess,
+        items: __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toTasks).call(this, __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getFilteredRows).call(this, __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").taskFilter, false)),
+        stylingOptions: Object.assign(Object.assign({}, defaultStylingOptions), { listCellWidth: this.listCellWidth }),
+        filter: mainFilter,
+        hideLabel: true,
+        ganttHeight: this.taskHeight,
+        showSecondaryDates: __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").showSecondaryDates,
+        onClick: (nativeEvent) => this.handleOnClick(nativeEvent),
+        onContextMenu: (event, row) => this.handleOnContextMenu(event, row),
+        onDateChange: (nativeEvent) => this.handleOnDateChange(nativeEvent),
+        initialScrollX: this.taskInitialScrollX,
+        initialScrollY: this.taskInitialScrollY,
+        readOnly: this.readOnly,
+        onScrollY: (y) => {
+          window.clearTimeout(taskScrollYTimeout);
+          taskScrollYTimeout = window.setTimeout(() => this.handleTaskGanttScrollY(y), scrollDelay);
+        },
+      },
+      secondaryGantt: details
+        ? {
+          title: '',
+          items: details,
+          stylingOptions: Object.assign(Object.assign({}, defaultStylingOptions), { listCellWidth: this.listCellWidth }),
+          filter: secondaryFilter,
+          hideLabel: true,
+          ganttHeight: this.detailHeight,
+          onClick: (nativeEvent) => this.handleOnClick(nativeEvent),
+          onContextMenu: (event, row) => this.handleOnContextMenu(event, row),
+          onDateChange: (nativeEvent) => this.handleOnDateChange(nativeEvent),
+          initialScrollX: this.detailInitialScrollX,
+          initialScrollY: this.detailInitialScrollY,
+          readOnly: this.readOnly,
+          onScrollY: (y) => {
+            window.clearTimeout(detailScrollYTimeout);
+            detailScrollYTimeout = window.setTimeout(() => this.handleDetailGanttScrollY(y), scrollDelay);
+          },
+        }
+        : undefined,
+      onSetDoubleView: (checked) => this.handleOnSetDoubleView(checked),
+      onSetViewMode: (value) => this.handleOnSetViewMode(value),
+      viewMode: this.viewMode,
+      onScrollX: (x) => {
+        window.clearTimeout(scrollXTimeout);
+        scrollXTimeout = window.setTimeout(() => this.handleOnScrollX(x), scrollDelay);
+      },
+    };
+    __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_renderReactPlannerElement).call(this);
+    this.kupReady.emit({
+      comp: this,
+      id: this.rootElement.id,
+      value: undefined,
+    });
+    if (this.taskFilter) {
+      __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_onFilter).call(this, this.taskFilter);
+    }
+    if (this.detailFilter) {
+      __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_onFilter).call(this, this.detailFilter, true);
+    }
+    __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").debug.logLoad(this, true);
+  }
+  componentWillRender() {
+    __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_renderReactPlannerElement).call(this);
+  }
+  componentDidRender() {
+    this.persistState();
+    __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").debug.logRender(this, true);
+  }
+  onKupClick(event, taskAction) {
+    this.kupClick.emit({
+      comp: this,
+      id: this.rootElement.id,
+      value: event,
+      taskAction: taskAction,
+    });
+  }
+  onKupContextMenu(event, ganttRow, taskAction) {
+    let row;
+    let cell;
+    let column;
+    switch (ganttRow.type) {
+      case 'project': {
+        row = ganttRow.taskRow;
+        cell = row.cells[this.taskIdCol];
+        column = this.data.columns[this.taskIdCol];
+        break;
+      }
+      case 'task': {
+        row = ganttRow.phaseRow;
+        cell = row.cells[this.phaseIdCol];
+        //column = this.data.columns[this.taskIdCol];
+        break;
+      }
+      case 'timeline': {
+        row = ganttRow.detailRow;
+        cell = row.cells[this.detailIdCol];
+        column = this.data.columns[this.detailIdCol];
+        break;
+      }
+    }
+    this.kupContextMenu.emit({
+      comp: this,
+      id: this.rootElement.id,
+      value: ganttRow,
+      taskAction: taskAction,
+      details: {
+        cell: cell,
+        column: column,
+        originalEvent: event,
+        row: row,
+      },
+    });
+  }
+  onKupDateChange(event, taskAction) {
+    this.kupDateChange.emit({
+      comp: this,
+      id: this.rootElement.id,
+      value: event,
+      taskAction: taskAction,
+    });
+  }
+  handleOnClick(nativeEvent) {
+    switch (nativeEvent.rowType) {
+      case KupPlannerGanttRowType.TASK:
+        const taskAction = nativeEvent.phases
+          ? KupPlannerTaskAction.onTaskClosing
+          : KupPlannerTaskAction.onTaskOpening;
+        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnTask).call(this, nativeEvent)) {
+          this.onKupClick(nativeEvent, taskAction);
+        }
+        break;
+      case KupPlannerGanttRowType.PHASE:
+        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnPhase).call(this)) {
+          this.onKupClick(nativeEvent, KupPlannerTaskAction.onClick);
+        }
+        break;
+      case KupPlannerGanttRowType.DETAIL:
+        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnDetail).call(this)) {
+          this.onKupClick(nativeEvent, KupPlannerTaskAction.onClick);
+        }
+        break;
+    }
+  }
+  handleOnContextMenu(event, row) {
+    switch (row.rowType) {
+      case KupPlannerGanttRowType.TASK:
+        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnContextMenuOnTask).call(this)) {
+          this.onKupContextMenu(event, row, KupPlannerTaskAction.onRightClick);
+        }
+        break;
+      case KupPlannerGanttRowType.PHASE:
+        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnContextMenuOnPhase).call(this)) {
+          this.onKupContextMenu(event, row, KupPlannerTaskAction.onRightClick);
+        }
+        break;
+      case KupPlannerGanttRowType.DETAIL:
+        if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnContextMenuOnDetail).call(this)) {
+          this.onKupContextMenu(event, row, KupPlannerTaskAction.onRightClick);
+        }
+        break;
+    }
+  }
+  handleOnSetDoubleView(checked) {
+    var _a;
+    __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").showSecondaryDates = checked;
+    if ((_a = this.plannerProps) === null || _a === void 0 ? void 0 : _a.mainGantt) {
+      this.plannerProps.mainGantt.showSecondaryDates = checked;
+    }
+    this.persistState();
+  }
+  handleOnSetViewMode(value) {
+    __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").viewMode = value;
+    this.plannerProps.viewMode = value;
+    this.persistState();
+  }
+  handleOnScrollX(x) {
+    __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").taskInitialScrollX = x;
+    __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").detailInitialScrollX = x;
+    this.persistState();
+  }
+  handleTaskGanttScrollY(y) {
+    __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").taskInitialScrollY = y;
+    this.persistState();
+  }
+  handleDetailGanttScrollY(y) {
+    __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").detailInitialScrollY = y;
+    this.persistState();
+  }
+  handleOnDateChange(nativeEvent) {
+    if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_emitOnChangeEventsReceived).call(this, nativeEvent)) {
+      if (nativeEvent.rowType != KupPlannerGanttRowType.DETAIL) {
+        this.onKupDateChange(nativeEvent, KupPlannerTaskAction.onResize);
+      }
+    }
+  }
+  render() {
+    var _a;
+    return (h(Host, null, h("style", null, __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, style: { maxWidth: this.maxWidth } }), h(FTextField, { icon: KupThemeIconValues.SEARCH, id: "main-filter", label: __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), onKeyDown: (e) => {
+        if (e.key === 'Enter') {
+          __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_onFilter).call(this, e.target.value);
+        }
+      }, value: this.taskFilter, wrapperClass: "filter" }), ((_a = this.detailData) === null || _a === void 0 ? void 0 : _a.rows) && this.detailData.rows.length > 0 ? (h(FTextField, { icon: KupThemeIconValues.SEARCH, id: "secondary-filter", label: __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), onKeyDown: (e) => {
+        if (e.key === 'Enter') {
+          __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_onFilter).call(this, e.target.value, true);
+        }
+      }, value: this.detailFilter, wrapperClass: "filter" })) : null));
+  }
+  disconnectedCallback() {
+    __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.unregister(this);
+    this.kupDidUnload.emit({
+      comp: this,
+      id: this.rootElement.id,
+      storedSettings: __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f"),
+    });
+  }
+  static get is() { return "kup-planner"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["kup-planner.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["kup-planner.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "stateId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "state-id",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "store": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "KupStore",
+          "resolved": "KupStore",
+          "references": {
+            "KupStore": {
+              "location": "import",
+              "path": "../kup-state/kup-store"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "customStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"\""
+            }, {
+              "name": "see",
+              "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
+            }],
+          "text": "Custom style of the component."
+        },
+        "attribute": "custom-style",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "data": {
+        "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 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"
+        }
+      },
+      "detailColorCol": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Column containing the detail color, in hex format"
+        },
+        "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)"
+        }
+      },
+      "detailFilter": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "undefined"
+            }],
+          "text": "Sets the detail's filter."
+        },
+        "attribute": "detail-filter",
+        "reflect": false
+      },
+      "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
+      },
+      "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,
+        "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 forecast detail duration, from (firstDate) to (secondDate)"
+        }
+      },
+      "detailInitialScrollX": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "undefined"
+            }],
+          "text": "Sets the initial scroll X for the detail."
+        },
+        "attribute": "detail-initial-scroll-x",
+        "reflect": false
+      },
+      "detailInitialScrollY": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "undefined"
+            }],
+          "text": "Sets the initial scroll Y for the detail."
+        },
+        "attribute": "detail-initial-scroll-y",
+        "reflect": false
+      },
+      "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,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Column containing the phase color in hex format"
+        },
+        "attribute": "phase-color-col",
+        "reflect": false
+      },
+      "phaseColumns": {
+        "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 phases"
+        }
+      },
+      "phaseColParDep": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Column containing the name of the parent phases"
+        },
+        "attribute": "phase-col-par-dep",
+        "reflect": false
+      },
+      "phaseDates": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "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,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Column containing unique phase identifier"
+        },
+        "attribute": "phase-id-col",
+        "reflect": false
+      },
+      "phaseNameCol": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Column containing phase name displayed"
+        },
+        "attribute": "phase-name-col",
+        "reflect": false
+      },
+      "phasePrevDates": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Columns containing forecast phase duration, from (firstDate) to (secondDate)"
+        }
+      },
+      "readOnly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "When true, the two gantts are not interactable."
+        },
+        "attribute": "read-only",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "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,
+        "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"
+        }
+      },
+      "taskDates": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Columns containing task duration, from (firstDate) to (secondDate)"
+        }
+      },
+      "taskFilter": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "undefined"
+            }],
+          "text": "Sets the task's filter."
+        },
+        "attribute": "task-filter",
+        "reflect": false
+      },
+      "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
+      },
+      "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,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Column containing unique task identifier"
+        },
+        "attribute": "task-id-col",
+        "reflect": false
+      },
+      "taskInitialScrollX": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "undefined"
+            }],
+          "text": "Sets the initial scroll X for the task."
+        },
+        "attribute": "task-initial-scroll-x",
+        "reflect": false
+      },
+      "taskInitialScrollY": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "undefined"
+            }],
+          "text": "Sets the initial scroll Y for the task."
+        },
+        "attribute": "task-initial-scroll-y",
+        "reflect": false
+      },
+      "taskNameCol": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Column containing task name displayed"
+        },
+        "attribute": "task-name-col",
+        "reflect": false
+      },
+      "taskPrevDates": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Columns containing forecast task duration, from (firstDate) to (secondDate)"
+        }
+      },
+      "titleMess": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Message displayed on top"
+        },
+        "attribute": "title-mess",
+        "reflect": false
+      },
+      "viewMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "KupPlannerViewMode",
+          "resolved": "\"day\" | \"month\" | \"week\" | \"year\"",
+          "references": {
+            "KupPlannerViewMode": {
+              "location": "import",
+              "path": "./kup-planner-declarations"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "'month'"
+            }],
+          "text": "Sets the view mode."
+        },
+        "attribute": "view-mode",
+        "reflect": false,
+        "defaultValue": "'month'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "plannerProps": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "kupClick",
+        "name": "kup-planner-click",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "KupPlannerEventPayload",
+          "resolved": "KupPlannerEventPayload",
+          "references": {
+            "KupPlannerEventPayload": {
+              "location": "import",
+              "path": "./kup-planner-declarations"
+            }
+          }
+        }
+      }, {
+        "method": "kupDateChange",
+        "name": "kup-planner-datechange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "KupPlannerEventPayload",
+          "resolved": "KupPlannerEventPayload",
+          "references": {
+            "KupPlannerEventPayload": {
+              "location": "import",
+              "path": "./kup-planner-declarations"
+            }
+          }
+        }
+      }, {
+        "method": "kupReady",
+        "name": "kup-planner-ready",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "KupPlannerEventPayload",
+          "resolved": "KupPlannerEventPayload",
+          "references": {
+            "KupPlannerEventPayload": {
+              "location": "import",
+              "path": "./kup-planner-declarations"
+            }
+          }
+        }
+      }, {
+        "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"
+            }
+          }
+        }
+      }, {
+        "method": "kupDidUnload",
+        "name": "kup-planner-didunload",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "When component unload is complete"
+        },
+        "complexType": {
+          "original": "KupPlannerUnloadEventPayload",
+          "resolved": "KupPlannerUnloadEventPayload",
+          "references": {
+            "KupPlannerUnloadEventPayload": {
+              "location": "import",
+              "path": "./kup-planner-declarations"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "getProps": {
+        "complexType": {
+          "signature": "(descriptions?: boolean) => Promise<GenericObject>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "descriptions - When provided and true, the result will be the list of props with their description."
+                }],
+              "text": "- When provided and true, the result will be the list of props with their description."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "GenericObject": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
+          },
+          "return": "Promise<GenericObject>"
+        },
+        "docs": {
+          "text": "Used to retrieve component's props values.",
+          "tags": [{
+              "name": "param",
+              "text": "descriptions - When provided and true, the result will be the list of props with their description."
+            }, {
+              "name": "returns",
+              "text": "List of props as object, each key will be a prop."
+            }]
+        }
+      },
+      "refresh": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "This method is used to trigger a new render of the component.",
+          "tags": []
+        }
+      },
+      "setProps": {
+        "complexType": {
+          "signature": "(props: GenericObject) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "props - Object containing props that will be set to the component."
+                }],
+              "text": "- Object containing props that will be set to the component."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "GenericObject": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets the props to the component.",
+          "tags": [{
+              "name": "param",
+              "text": "props - Object containing props that will be set to the component."
+            }]
+        }
+      },
+      "addPhases": {
+        "complexType": {
+          "signature": "(taskId: string, data: KupDataDataset) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "taskId"
+                }],
+              "text": ""
+            }, {
+              "tags": [{
+                  "name": "param",
+                  "text": "data - Matrix which contains project phases"
+                }],
+              "text": "- Matrix which contains project phases"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "KupDataDataset": {
+              "location": "import",
+              "path": "../../managers/kup-data/kup-data-declarations"
+            },
+            "KupPlannerPhase": {
+              "location": "import",
+              "path": "./kup-planner-declarations"
+            },
+            "TaskType": {
+              "location": "import",
+              "path": "@sme.up/gantt-component/dist/types/public-types"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Add a list of phases to the project",
+          "tags": [{
+              "name": "param",
+              "text": "taskId"
+            }, {
+              "name": "param",
+              "text": "data - Matrix which contains project phases"
+            }]
+        }
+      }
+    };
+  }
+  static get elementRef() { return "rootElement"; }
+  static get watchers() {
+    return [{
+        "propName": "data",
+        "methodName": "dataChanged"
+      }];
+  }
+}
+_KupPlanner_kupManager = new WeakMap(), _KupPlanner_lastOnChangeReceived = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(), _KupPlanner_phases = new WeakMap(), _KupPlanner_storedSettings = new WeakMap(), _KupPlanner_instances = new WeakSet(), _KupPlanner_renderReactPlannerElement = function _KupPlanner_renderReactPlannerElement() {
+  var _a;
+  (_a = __classPrivateFieldGet(this, _KupPlanner_rootPlanner, "f")) === null || _a === void 0 ? void 0 : _a.unmount();
+  const componentWrapperElement = this.rootElement.shadowRoot.getElementById(componentWrapperId);
+  if (componentWrapperElement) {
+    __classPrivateFieldSet(this, _KupPlanner_rootPlanner, createRoot(componentWrapperElement), "f");
+    __classPrivateFieldGet(this, _KupPlanner_rootPlanner, "f").render(React.createElement(Planner, this.plannerProps));
+  }
+}, _KupPlanner_toTasks = function _KupPlanner_toTasks(data) {
+  var _a;
+  if (!data || !data.rows) {
+    return [];
+  }
+  let tasks = (_a = data.rows) === null || _a === void 0 ? void 0 : _a.filter((row) => isAtLeastOneDateValid(row.cells[this.taskDates[0]], row.cells[this.taskDates[1]])).map((row) => {
+    const datesSanitized = sanitizeAllDates(row.cells[this.taskDates[0]], row.cells[this.taskDates[1]], row.cells[this.taskPrevDates[0]], row.cells[this.taskPrevDates[1]]);
+    const valuesToShow = getValuesToShow(row, this.taskIdCol, this.taskNameCol, data.columns, this.taskColumns, () => this.taskColumns.map((col) => col == this.taskDates[0]
+      ? '#START#'
+      : col == this.taskDates[1]
+        ? '#END#'
+        : getCellValueForDisplay(data.columns.find((kCol) => kCol.name == col), row.cells[col])));
+    let iconUrl = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconUrl).call(this, row, this.taskIconCol);
+    let iconColor = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconColor).call(this, row, this.taskIconCol);
+    let task = {
+      taskRow: row,
+      taskRowId: row.id,
+      id: row.cells[this.taskIdCol].value,
+      name: row.cells[this.taskNameCol].value,
+      startDate: datesSanitized.dateValues[0],
+      endDate: datesSanitized.dateValues[1],
+      secondaryStartDate: datesSanitized.secDateValues[0],
+      secondaryEndDate: datesSanitized.secDateValues[1],
+      type: 'project',
+      valuesToShow: valuesToShow,
+      rowType: KupPlannerGanttRowType.TASK,
+      icon: iconUrl
+        ? { url: iconUrl, color: iconColor !== null && iconColor !== void 0 ? iconColor : '#595959' }
+        : undefined,
+    };
+    return task;
+  });
+  return tasks;
+}, _KupPlanner_toDetails = function _KupPlanner_toDetails(data) {
+  if (!data || !data.rows) {
+    return undefined;
+  }
+  let details = [];
+  data.rows
+    .filter((row) => isAtLeastOneDateValid(row.cells[this.detailDates[0]], row.cells[this.detailDates[1]]))
+    .forEach((row) => {
+    var _a, _b;
+    const detailId = row.cells[this.detailIdCol].value;
+    const detailNameId = row.cells[this.detailNameCol].value;
+    const datesSanitized = sanitizeAllDates(row.cells[this.detailDates[0]], row.cells[this.detailDates[1]]);
+    const valuesToShow = getValuesToShow(row, this.detailIdCol, this.detailNameCol, data.columns, this.detailColumns);
+    let detail = details.find((det) => det.id == detailId);
+    if (!detail) {
+      detail = {
+        id: detailId,
+        name: detailNameId,
+        detailRow: row,
+        type: 'timeline',
+        valuesToShow: valuesToShow,
+        rowType: KupPlannerGanttRowType.DETAIL,
+        schedule: [],
+      };
+      details.push(detail);
+    }
+    let iconUrl = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconUrl).call(this, row, this.detailIconCol);
+    let iconColor = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconColor).call(this, row, this.detailIconCol);
+    detail.schedule.push({
+      startDate: datesSanitized.dateValues[0],
+      endDate: datesSanitized.dateValues[1],
+      color: this.detailColorCol
+        ? (_a = row.cells[this.detailColorCol].value) !== null && _a !== void 0 ? _a : '#D9D9D8'
+        : '#D9D9D8',
+      selectedColor: this.detailColorCol
+        ? (_b = row.cells[this.detailColorCol].value) !== null && _b !== void 0 ? _b : '#D9D9D8'
+        : '#D9D9D8',
+      icon: iconUrl
+        ? { url: iconUrl, color: iconColor !== null && iconColor !== void 0 ? iconColor : '#595959' }
+        : undefined,
+    });
+  });
+  return details;
+}, _KupPlanner_getTask = function _KupPlanner_getTask(taskId) {
+  return this.plannerProps.mainGantt.items.find((task) => task.id == taskId);
+}, _KupPlanner_removePhases = function _KupPlanner_removePhases(taskId) {
+  const task = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getTask).call(this, taskId);
+  if (task)
+    task.phases = undefined;
+  this.plannerProps = Object.assign({}, this.plannerProps);
+}, _KupPlanner_handleOnClickOnTask = function _KupPlanner_handleOnClickOnTask(nativeEvent) {
+  const task = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getTask).call(this, nativeEvent.id);
+  if (task === null || task === void 0 ? void 0 : task.phases) {
+    __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_removePhases).call(this, task.id);
+  }
+  return true;
+}, _KupPlanner_handleOnClickOnPhase = function _KupPlanner_handleOnClickOnPhase() {
+  return true;
+}, _KupPlanner_handleOnClickOnDetail = function _KupPlanner_handleOnClickOnDetail() {
+  return true;
+}, _KupPlanner_handleOnContextMenuOnTask = function _KupPlanner_handleOnContextMenuOnTask() {
+  return true;
+}, _KupPlanner_handleOnContextMenuOnPhase = function _KupPlanner_handleOnContextMenuOnPhase() {
+  return true;
+}, _KupPlanner_handleOnContextMenuOnDetail = function _KupPlanner_handleOnContextMenuOnDetail() {
+  return true;
+}, _KupPlanner_emitOnChangeEventsReceived = function _KupPlanner_emitOnChangeEventsReceived(nativeEvent) {
+  let emitEvent = false;
+  if (!__classPrivateFieldGet(this, _KupPlanner_lastOnChangeReceived, "f")) {
+    emitEvent = true;
+    __classPrivateFieldSet(this, _KupPlanner_lastOnChangeReceived, new KupPlannerLastOnChangeReceived(nativeEvent), "f");
+  }
+  else if (!__classPrivateFieldGet(this, _KupPlanner_lastOnChangeReceived, "f").isEquivalent(nativeEvent)) {
+    __classPrivateFieldSet(this, _KupPlanner_lastOnChangeReceived, new KupPlannerLastOnChangeReceived(nativeEvent), "f");
+    emitEvent = true;
+  }
+  return emitEvent;
+}, _KupPlanner_onFilter = function _KupPlanner_onFilter(value, isDetail) {
+  if (isDetail) {
+    __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").detailFilter = value;
+  }
+  else {
+    __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").taskFilter = value;
+  }
+  const newGantt = isDetail
+    ? {
+      secondaryGantt: Object.assign(Object.assign({}, this.plannerProps.secondaryGantt), { items: __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toDetails).call(this, __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getFilteredRows).call(this, value, isDetail)) }),
+    }
+    : {
+      mainGantt: Object.assign(Object.assign({}, this.plannerProps.mainGantt), { items: __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toTasks).call(this, __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getFilteredRows).call(this, value, isDetail)) }),
+    };
+  this.plannerProps = Object.assign(Object.assign({}, this.plannerProps), newGantt);
+  this.persistState();
+}, _KupPlanner_getFilteredRows = function _KupPlanner_getFilteredRows(value, isDetail) {
+  const data = isDetail ? this.detailData : this.data;
+  if (!data || !data.rows || data.rows.length == 0) {
+    return undefined;
+  }
+  if (!value) {
+    return data;
+  }
+  const tempData = {
+    columns: this.data.columns,
+    rows: [],
+  };
+  const tempRows = [];
+  for (let index = 0; index < data.rows.length; index++) {
+    const row = data.rows[index];
+    const cells = row.cells;
+    for (let index = 0; index < data.columns.length; index++) {
+      const column = data.columns[index];
+      const cell = cells[column.name];
+      if (cell) {
+        const dValue = getCellValueForDisplay(data.columns[index], cell);
+        const found = !!(dValue.toLowerCase().indexOf(value.toLowerCase()) > -1);
+        if (found) {
+          tempRows.push({ row, weight: index });
+          break;
+        }
+      }
+    }
+  }
+  tempRows
+    .sort((a, b) => a.weight - b.weight)
+    .forEach((tempRow) => {
+    tempData.rows.push(tempRow.row);
+  });
+  return tempData;
+}, _KupPlanner_getIconUrl = function _KupPlanner_getIconUrl(row, columnName) {
+  var _a;
+  let iconUrl = undefined;
+  if (columnName) {
+    const iconCell = row.cells[columnName];
+    let icon = (_a = iconCell === null || iconCell === void 0 ? void 0 : iconCell.data) === null || _a === void 0 ? void 0 : _a.resource;
+    if (!icon) {
+      icon = iconCell.value;
+    }
+    if (icon) {
+      iconUrl = getAssetPath('./assets/svg/' + icon + '.svg');
+    }
+  }
+  return iconUrl;
+}, _KupPlanner_getIconColor = function _KupPlanner_getIconColor(row, columnName) {
+  var _a;
+  let iconColor = undefined;
+  if (columnName) {
+    const iconCell = row.cells[columnName];
+    iconColor = (_a = iconCell === null || iconCell === void 0 ? void 0 : iconCell.data) === null || _a === void 0 ? void 0 : _a.color;
+    if (iconColor) {
+      iconColor =
+        __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.colorCheck(iconColor).hexColor;
+    }
+  }
+  return iconColor;
+};