@sme.up/ketchup 8.1.0 → 8.2.1

package/dist/components/kup-echart2.js

@@ -93853,6 +93853,8 @@ var KupEchartTypes;
   KupEchartTypes["SCATTER"] = "Scatter";
   KupEchartTypes["FUNNEL"] = "Funnel";
   KupEchartTypes["RADAR"] = "Radar";
+  KupEchartTypes["BUBBLE"] = "Bubble";
+  KupEchartTypes["SANKEY"] = "Sankey";
 })(KupEchartTypes || (KupEchartTypes = {}));
 
 const kupEchartCss = ":host{display:block;height:var(--kup_echart_height, 100%);min-height:var(--kup_echart_height, 100%);min-width:var(--kup_echart_width, 100%);width:var(--kup_echart_width, 100%)}#kup-component{width:100%;height:100%;position:relative}";
@@ -93873,7 +93875,7 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
     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 _KupEchart_instances, _KupEchart_chartContainer, _KupEchart_chartEl, _KupEchart_gaussianDatasets, _KupEchart_kupManager, _KupEchart_mapObj, _KupEchart_resizeTimeout, _KupEchart_sortedDataset, _KupEchart_themeBorder, _KupEchart_themeBackground, _KupEchart_minColorHeatMap, _KupEchart_maxColorHeatMap, _KupEchart_themeFont, _KupEchart_themeText, _KupEchart_initChart, _KupEchart_createChart, _KupEchart_funnelChart, _KupEchart_radarChart, _KupEchart_createX, _KupEchart_createY, _KupEchart_setAxisColors, _KupEchart_setLegend, _KupEchart_setTitle, _KupEchart_setTooltip, _KupEchart_setVisualMap, _KupEchart_setMapOptions, _KupEchart_setPieOptions, _KupEchart_setGaussianOptions, _KupEchart_addSeries, _KupEchart_setOptions, _KupEchart_setColors, _KupEchart_checks;
+var _KupEchart_instances, _KupEchart_chartContainer, _KupEchart_chartEl, _KupEchart_gaussianDatasets, _KupEchart_kupManager, _KupEchart_mapObj, _KupEchart_resizeTimeout, _KupEchart_sortedDataset, _KupEchart_themeBorder, _KupEchart_themeBackground, _KupEchart_minColorHeatMap, _KupEchart_maxColorHeatMap, _KupEchart_themeFont, _KupEchart_themeText, _KupEchart_initChart, _KupEchart_createChart, _KupEchart_funnelChart, _KupEchart_radarChart, _KupEchart_bubbleChart, _KupEchart_sankeyChart, _KupEchart_createX, _KupEchart_createY, _KupEchart_setAxisColors, _KupEchart_setLegend, _KupEchart_setTitle, _KupEchart_setTooltip, _KupEchart_setVisualMap, _KupEchart_setMapOptions, _KupEchart_setPieOptions, _KupEchart_setGaussianOptions, _KupEchart_addSeries, _KupEchart_setOptions, _KupEchart_setColors, _KupEchart_checks;
 const KupEchart = /*@__PURE__*/ proxyCustomElement(class KupEchart extends HTMLElement {
   constructor() {
     super();
@@ -94067,6 +94069,12 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
     case KupEchartTypes.RADAR:
       options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_radarChart).call(this);
       break;
+    case KupEchartTypes.BUBBLE:
+      options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_bubbleChart).call(this);
+      break;
+    case KupEchartTypes.SANKEY:
+      options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_sankeyChart).call(this);
+      break;
     default:
       options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setOptions).call(this);
       break;
@@ -94201,6 +94209,121 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
       },
     ],
   };
+}, _KupEchart_bubbleChart = function _KupEchart_bubbleChart() {
+  const y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this), data = [], temp = [], legend = {}, series = [];
+  let year = [];
+  const content = this.data.columns.map((data) => data.title);
+  if (content && content.length) {
+    for (let i = 0; i < y[content[0]].length; i++) {
+      const arr = [];
+      for (let j = 0; j < content.length; j++) {
+        arr.push(y[content[j]][i]);
+        // last value always be a year
+        if (j === content.length - 1) {
+          year.push(y[content[j]][i]);
+        }
+      }
+      temp.push(arr);
+    }
+  }
+  year = [...new Set(year)];
+  year.forEach((e, i) => {
+    let k = [];
+    temp.forEach((data) => {
+      if (data.includes(e))
+        k.push(data);
+    });
+    data.push(k);
+    legend[e] = i;
+  });
+  data.forEach((el, i) => {
+    series.push({
+      name: year[i],
+      data: el,
+      type: 'scatter',
+      symbolSize: function (data) {
+        return Math.sqrt(data[2]) / 5e2;
+      },
+      emphasis: {
+        focus: 'series',
+        label: {
+          show: true,
+          formatter: function (param) {
+            return param.data[3];
+          },
+          position: 'top',
+        },
+      },
+    });
+  });
+  return {
+    title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
+    legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, legend),
+    tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'item', formatter: (value) => {
+        const name = value.data;
+        const data = content.map((e, i) => {
+          return `<li>  ${e}: ${name[i]} </li>`;
+        });
+        let showContent = '';
+        data.forEach((r) => {
+          showContent += r;
+        });
+        return `<ul>${showContent}</ul> `;
+      } }),
+    xAxis: {
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+        },
+      },
+    },
+    yAxis: {
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+        },
+      },
+      scale: true,
+    },
+    color: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, content.length),
+    series: series,
+  };
+}, _KupEchart_sankeyChart = function _KupEchart_sankeyChart() {
+  const links = [], y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this), keys = Object.keys(y);
+  // Assuming all arrays in the question object have the same length
+  const arrayLength = y[keys[0]].length;
+  for (let i = 0; i < arrayLength; i++) {
+    const entry = {};
+    entry['source'] = y[keys[0]][i];
+    entry['target'] = y[keys[1]][i];
+    entry['value'] = parseInt(y[keys[2]][i]);
+    links.push(entry);
+  }
+  const data = Array.from(new Set([
+    ...links.map((link) => link.source),
+    ...links.map((link) => link.target),
+  ])).map((name) => ({ name }));
+  const legend = {};
+  data.forEach((e, i) => {
+    legend[e.name] = i;
+  });
+  return {
+    title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
+    legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, legend),
+    color: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, arrayLength),
+    tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'item' }),
+    series: {
+      type: 'sankey',
+      layout: 'none',
+      emphasis: {
+        focus: 'adjacency',
+      },
+      data,
+      links,
+      right: '10%',
+      left: '10%',
+    },
+  };
 }, _KupEchart_createX = function _KupEchart_createX(dataset = null) {
   const x = [];
   if (!dataset)

package/dist/components/kup-planner.js

@@ -10973,7 +10973,7 @@ var TaskGantt = function TaskGantt(_ref) {
     if (verticalGanttContainerRef.current) {
       verticalGanttContainerRef.current.scrollLeft = scrollX;
     }
-  }, [scrollX, verticalGanttContainerRef]);
+  }, [verticalGanttContainerRef, scrollX]);
   return react.createElement("div", {
     className: styles$7.ganttContainer,
     ref: taskGanttRef
@@ -11013,21 +11013,20 @@ var HorizontalScroll = function HorizontalScroll(_ref) {
     taskGanttRef = _ref.taskGanttRef,
     rtl = _ref.rtl,
     onScroll = _ref.onScroll;
-  var scrollRef = react.useRef(null);
+  var scrollRef = react.createRef();
   react.useEffect(function () {
+    var id;
     if (scrollRef.current) {
       var wrap = scrollRef.current;
       var setScrollLeft = function setScrollLeft() {
         wrap.scrollLeft = scroll;
       };
-      setTimeout(setScrollLeft, 250);
+      id = setTimeout(setScrollLeft, 50);
     }
-  }, []);
-  react.useEffect(function () {
-    if (scrollRef.current) {
-      scrollRef.current.scrollLeft = scroll;
-    }
-  }, [scroll]);
+    return function () {
+      clearTimeout(id);
+    };
+  }, [scroll, scrollRef]);
   var rect = (_taskGanttRef$current = taskGanttRef.current) === null || _taskGanttRef$current === void 0 ? void 0 : _taskGanttRef$current.getBoundingClientRect();
   return react.createElement("div", {
     dir: "ltr",
@@ -11257,9 +11256,9 @@ var Gantt = function Gantt(_ref) {
       });
     }
     setBarTasks(convertToBarTasks(filteredTasks, newDates, columnWidth, rowHeight, taskHeight, projectHeight, timelineHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, showSecondaryDates));
-  }, [tasks, viewMode, preStepsCount, rowHeight, barCornerRadius, columnWidth, taskHeight, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, rtl, scrollX, onExpanderClick, showSecondaryDates, projectHeight, timelineHeight, displayedStartDate, displayedEndDate]);
+  }, [tasks, viewMode, preStepsCount, rowHeight, barCornerRadius, columnWidth, taskHeight, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, rtl, scrollX, onExpanderClick, showSecondaryDates, projectHeight, timelineHeight, displayedStartDate, displayedEndDate, dateSetup]);
   react.useEffect(function () {
-    if (viewMode === dateSetup.viewMode && viewDate) {
+    if (viewMode === dateSetup.viewMode && viewDate && initialScrollX < 1) {
       var dates = dateSetup.dates;
       var index = dates.findIndex(function (d, i) {
         return viewDate.valueOf() >= d.valueOf() && i + 1 !== dates.length && viewDate.valueOf() < dates[i + 1].valueOf();
@@ -11270,7 +11269,7 @@ var Gantt = function Gantt(_ref) {
       setIgnoreScrollEvent(true);
       setScrollX(columnWidth * index);
     }
-  }, [viewDate, columnWidth, dateSetup.dates, dateSetup.viewMode, viewMode]);
+  }, [viewDate, columnWidth, dateSetup.dates, dateSetup.viewMode, viewMode, initialScrollX]);
   react.useEffect(function () {
     var changedTask = ganttEvent.changedTask,
       action = ganttEvent.action;
@@ -11353,6 +11352,12 @@ var Gantt = function Gantt(_ref) {
           newScrollX = svgWidth;
         }
         setScrollX(newScrollX);
+        window.dispatchEvent(new CustomEvent("gantt-sync-scroll-event", {
+          detail: {
+            componentId: id,
+            scrollX: newScrollX
+          }
+        }));
         event.preventDefault();
       } else if (ganttHeight) {
         var newScrollY = scrollY + event.deltaY;
@@ -12141,19 +12146,22 @@ var Planner = function Planner(props) {
   var setCurrentDetails = function setCurrentDetails(details) {
     currentDetails.current = details;
   };
-  var _useState2 = react.useState((_props$mainGantt$show = props.mainGantt.showSecondaryDates) != null ? _props$mainGantt$show : false),
-    mainGanttDoubleView = _useState2[0],
-    setMainGanttDoubleView = _useState2[1];
+  var _useState2 = react.useState(props.mainGantt.initialScrollX ? props.mainGantt.initialScrollX : -1),
+    scrollX = _useState2[0],
+    setScrollX = _useState2[1];
+  var _useState3 = react.useState((_props$mainGantt$show = props.mainGantt.showSecondaryDates) != null ? _props$mainGantt$show : false),
+    mainGanttDoubleView = _useState3[0],
+    setMainGanttDoubleView = _useState3[1];
   var displayedDates = react.useRef(calculateDisplayedDateRange(currentTasks.current, timeUnit, mainGanttDoubleView, currentDetails.current, props.preStepsCount));
   var setDisplayedDates = function setDisplayedDates(dates) {
     displayedDates.current = dates;
   };
-  var _useState3 = react.useState(),
-    viewDate = _useState3[0],
-    setViewDate = _useState3[1];
   var _useState4 = react.useState(),
-    projection = _useState4[0],
-    setProjection = _useState4[1];
+    viewDate = _useState4[0],
+    setViewDate = _useState4[1];
+  var _useState5 = react.useState(),
+    projection = _useState5[0],
+    setProjection = _useState5[1];
   var locale = "it-IT";
   var handleClick = function handleClick(row, onClick) {
     if (!row) {
@@ -12293,6 +12301,7 @@ var Planner = function Planner(props) {
       (_props$onSetViewMode = props.onSetViewMode) === null || _props$onSetViewMode === void 0 ? void 0 : _props$onSetViewMode.call(props, timeUnit);
       setTimeUnit(timeUnit);
       setViewDate(undefined);
+      setScrollX(-1);
     }
   }), react.createElement("div", {
     style: {
@@ -12356,7 +12365,7 @@ var Planner = function Planner(props) {
     },
     locale: locale,
     dateTimeFormatters: ganttDateTimeFormatters,
-    initialScrollX: props.mainGantt.initialScrollX,
+    initialScrollX: scrollX,
     initialScrollY: props.mainGantt.initialScrollY,
     readOnly: props.mainGantt.readOnly,
     onScrollX: props.onScrollX,
@@ -12411,7 +12420,7 @@ var Planner = function Planner(props) {
     },
     locale: locale,
     dateTimeFormatters: ganttDateTimeFormatters,
-    initialScrollX: props.secondaryGantt.initialScrollX,
+    initialScrollX: scrollX,
     initialScrollY: props.secondaryGantt.initialScrollY,
     readOnly: props.secondaryGantt.readOnly,
     onScrollY: props.secondaryGantt.onScrollY
@@ -12487,7 +12496,7 @@ class KupPlannerState {
   }
 }
 
-const kupPlannerCss = "._3_ygE{display:table;border-bottom:#e6e4e4 1px solid;border-top:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}._1nBOt{display:table-row;list-style:none}._2eZzQ{border-right:1px solid rgb(196, 196, 196);opacity:1;margin-left:-2px}._WuQ0f{display:table-cell;vertical-align:-webkit-baseline-middle;vertical-align:middle}._3ZbQT{display:table;border-bottom:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}._34SS0{display:table-row;text-overflow:ellipsis}._34SS0:nth-of-type(even){}._3lLk3{display:table-cell;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._nI1Xw{display:flex}._2QjE6{color:rgb(86 86 86);font-size:0.6rem;padding:0.15rem 0.2rem 0 0.2rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}._2TfEi{font-size:0.6rem;padding-left:1rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}._3T42e{background:#fff;padding:12px;box-shadow:0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)}._29NTg{font-size:12px;margin-bottom:6px;color:#666}._25P-K{position:absolute;display:flex;flex-shrink:0;pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}._3gVAq{visibility:hidden;position:absolute;display:flex;pointer-events:none}._1eT-t{overflow:hidden auto;width:1rem;flex-shrink:0;scrollbar-width:thin}._1eT-t::-webkit-scrollbar{width:1.1rem;height:1.1rem}._1eT-t::-webkit-scrollbar-corner{background:transparent}._1eT-t::-webkit-scrollbar-thumb{border:6px solid transparent;background:rgba(0, 0, 0, 0.2);background:var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));border-radius:10px;background-clip:padding-box}._1eT-t::-webkit-scrollbar-thumb:hover{border:4px solid transparent;background:rgba(0, 0, 0, 0.3);background:var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));background-clip:padding-box}._EvhC1{border-radius:8px;background:#efefef;margin:12px;padding:12px}._2dZTy{fill:#fff}._2dZTy:nth-child(even){}._3rUKi{stroke:transparent}._RuwuK{stroke:#e6e4e4}._9w8d5{text-anchor:middle;fill:#333;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}._1rLuZ{stroke:#e6e4e4}._2q1Kt{text-anchor:middle;fill:#555;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}._35nLX{fill:#ffffff;stroke:#e0e0e0;stroke-width:1.4}._KxSXS{cursor:pointer;outline:none}._KxSXS:hover ._3w_5u{visibility:visible;opacity:1}._3w_5u{fill:#ddd;cursor:ew-resize;opacity:0;visibility:hidden}._31ERP{-webkit-user-select:none;-moz-user-select:none;user-select:none;stroke-width:0}._3zRJQ{fill:#fff;text-anchor:middle;font-weight:lighter;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}._3KcaM{fill:#555;text-anchor:start;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}._11iN9{background:#efefef;border-radius:8px;margin:12px;overflow:hidden;padding:12px}._CZjuD{overflow:hidden;font-size:0;margin:0;padding:0}._2B2zv{margin:0;padding:0;overflow:hidden}._3eULf{display:flex;padding:0;margin:0;list-style:none;outline:none;position:relative}._2k9Ys{overflow:auto;max-width:100%;scrollbar-width:thin;height:1.2rem}._2k9Ys::-webkit-scrollbar{width:1.1rem;height:1.1rem}._2k9Ys::-webkit-scrollbar-corner{background:transparent}._2k9Ys::-webkit-scrollbar-thumb{border:6px solid transparent;background:rgba(0, 0, 0, 0.2);background:var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));border-radius:10px;background-clip:padding-box}._2k9Ys::-webkit-scrollbar-thumb:hover{border:4px solid transparent;background:rgba(0, 0, 0, 0.3);background:var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));background-clip:padding-box}._19jgW{height:1px}._37E9D{display:flex;justify-content:space-around;max-width:330px;place-items:\"center\";text-align:center;align-items:center}._WrYI6{font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._c53zr{max-width:-moz-max-content;max-width:max-content;padding:0 4px;text-align:right}._2eBO5{position:relative;display:inline-block;width:30px;height:17px}._hiyro{opacity:0;width:0;height:0}._hiyro:checked+._2HI58{background-color:#003b77}._hiyro:checked+._2HI58:before{transform:translateX(13px)}._hiyro:focus+._2HI58{box-shadow:0 0 1px #003b77}._2HI58{-webkit-transition:0.4s;cursor:pointer;background-color:#ccc;bottom:0;border-radius:17px;left:0;position:absolute;right:0;top:0;transition:0.4s}._2HI58:before{-webkit-transition:0.1s;background-color:white;border-radius:50%;bottom:2px;content:\"\";height:13px;left:2px;position:absolute;transition:0.1s;width:13px}._2gSdA{font-size:12px;padding:6px}._2cfRI{font-size:12px}._lEI6r{padding:0 10px;margin-right:10px}._RU6Aa{background:var(--kup-background-color, #ffffff);border:1px solid var(--kup-border-color, #acacac);border-radius:4px;box-sizing:border-box;color:var(--kup-text-color, #595959);cursor:pointer;display:grid;font-weight:400;grid-template-columns:var(--grid-project-columns, 1fr 1fr 1fr);place-items:center}._RU6Aa>*{font-size:14px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}._RU6Aa ._30j6y{font-weight:700;width:100%;text-align:center}._T0HQN{cursor:pointer;display:grid;border-width:1px;border-style:solid;border-color:#acacac;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-sizing:border-box;grid-template-columns:var(--grid-fasi-columns, 1fr 1fr 1fr);place-items:center;background:#ffffff;color:#595959;font-weight:400}._T0HQN>*{font-size:12px;line-height:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%}._T0HQN:has(+._T0HQN),._RU6Aa:has(+._T0HQN){border-bottom-left-radius:0;border-bottom-right-radius:0}._yp2DW{cursor:pointer;display:grid;border-width:1px;border-style:solid;border-color:#cbcbcb;border-radius:4px;grid-template-columns:var(--grid-fasi-columns, 1fr 1fr 1fr);place-items:center;background:#fff;color:#595959;font-weight:400;box-sizing:border-box}._yp2DW>*{font-size:14px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}._yp2DW ._30j6y{font-weight:700;width:100%;text-align:center}._3P0WE{display:grid;grid-auto-flow:column;grid-gap:8px;margin-left:12px;width:-moz-max-content;width:max-content}._1oXbe{background:transparent;border-color:var(--kup-primary-color, #003b77);border-radius:4px;border-width:1px;box-shadow:0 3px 1px -2px rgba(var(--kup-text-color-rgb, 51 51 51), 0.2), 0 2px 2px 0 rgba(var(--kup-text-color-rgb, 51 51 51), 0.14), 0 1px 5px 0 rgba(var(--kup-text-color-rgb, 51 51 51), 0.12);box-sizing:border-box;color:var(--kup-primary-color, #003b77);cursor:pointer;font-size:11px;height:32px;min-width:64px}._1R9mh{font-family:var(--kup-font-family, inherit);font-size:11px;letter-spacing:0.0892857143em;text-decoration:none;text-transform:uppercase;padding:0 6px}:host{display:block}.filter{margin:12px 10px 12px 0;padding:0 10px}";
+const kupPlannerCss = "._3_ygE{display:table;border-bottom:#e6e4e4 1px solid;border-top:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}._1nBOt{display:table-row;list-style:none}._2eZzQ{border-right:1px solid rgb(196, 196, 196);opacity:1;margin-left:-2px}._WuQ0f{display:table-cell;vertical-align:-webkit-baseline-middle;vertical-align:middle}._3ZbQT{display:table;border-bottom:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}._34SS0{display:table-row;text-overflow:ellipsis}._34SS0:nth-of-type(even){}._3lLk3{display:table-cell;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._nI1Xw{display:flex}._2QjE6{color:rgb(86 86 86);font-size:0.6rem;padding:0.15rem 0.2rem 0 0.2rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}._2TfEi{font-size:0.6rem;padding-left:1rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}._3T42e{background:#fff;padding:12px;box-shadow:0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)}._29NTg{font-size:12px;margin-bottom:6px;color:#666}._25P-K{position:absolute;display:flex;flex-shrink:0;pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}._3gVAq{visibility:hidden;position:absolute;display:flex;pointer-events:none}._1eT-t{overflow:hidden auto;width:1rem;flex-shrink:0;scrollbar-width:thin}._1eT-t::-webkit-scrollbar{width:1.1rem;height:1.1rem}._1eT-t::-webkit-scrollbar-corner{background:transparent}._1eT-t::-webkit-scrollbar-thumb{border:6px solid transparent;background:rgba(0, 0, 0, 0.2);background:var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));border-radius:10px;background-clip:padding-box}._1eT-t::-webkit-scrollbar-thumb:hover{border:4px solid transparent;background:rgba(0, 0, 0, 0.3);background:var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));background-clip:padding-box}._EvhC1{border-radius:8px;background:#efefef;margin:12px;padding:12px}._2dZTy{fill:#fff}._2dZTy:nth-child(even){}._3rUKi{stroke:transparent}._RuwuK{stroke:#e6e4e4}._9w8d5{text-anchor:middle;fill:#333;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}._1rLuZ{stroke:#e6e4e4}._2q1Kt{text-anchor:middle;fill:#555;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}._35nLX{fill:#ffffff;stroke:#e0e0e0;stroke-width:1.4}._KxSXS{cursor:pointer;outline:none}._KxSXS:hover ._3w_5u{visibility:visible;opacity:1}._3w_5u{fill:#ddd;cursor:ew-resize;opacity:0;visibility:hidden}._31ERP{-webkit-user-select:none;-moz-user-select:none;user-select:none;stroke-width:0}._3zRJQ{fill:#fff;text-anchor:middle;font-weight:lighter;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}._3KcaM{fill:#555;text-anchor:start;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}._11iN9{background:#efefef;border-radius:8px;margin:12px;overflow:hidden;padding:12px}._CZjuD{overflow:hidden;font-size:0;margin:0;padding:0}._2B2zv{margin:0;padding:0;overflow:hidden}._3eULf{display:flex;padding:0;margin:0;list-style:none;outline:none;position:relative}._2k9Ys{overflow:auto;max-width:100%;scrollbar-width:thin;height:1.2rem}._2k9Ys::-webkit-scrollbar{width:1.1rem;height:1.1rem}._2k9Ys::-webkit-scrollbar-corner{background:transparent}._2k9Ys::-webkit-scrollbar-thumb{border:6px solid transparent;background:rgba(0, 0, 0, 0.2);background:var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));border-radius:10px;background-clip:padding-box}._2k9Ys::-webkit-scrollbar-thumb:hover{border:4px solid transparent;background:rgba(0, 0, 0, 0.3);background:var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));background-clip:padding-box}._19jgW{height:1px}._37E9D{display:flex;justify-content:space-around;max-width:330px;place-items:\"center\";text-align:center;align-items:center}._WrYI6{font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._c53zr{max-width:-moz-max-content;max-width:max-content;padding:0 4px;text-align:right}._2eBO5{position:relative;display:inline-block;width:30px;height:17px}._hiyro{opacity:0;width:0;height:0}._hiyro:checked+._2HI58{background-color:#003b77}._hiyro:checked+._2HI58:before{transform:translateX(13px)}._hiyro:focus+._2HI58{box-shadow:0 0 1px #003b77}._2HI58{-webkit-transition:0.4s;cursor:pointer;background-color:#ccc;bottom:0;border-radius:17px;left:0;position:absolute;right:0;top:0;transition:0.4s}._2HI58:before{-webkit-transition:0.1s;background-color:white;border-radius:50%;bottom:2px;content:\"\";height:13px;left:2px;position:absolute;transition:0.1s;width:13px}._2gSdA{font-size:12px;padding:6px}._2cfRI{font-size:12px}._lEI6r{padding:0 10px;margin-right:10px}._RU6Aa{background:var(--kup-background-color, #ffffff);border:1px solid var(--kup-border-color, #acacac);border-radius:4px;box-sizing:border-box;color:var(--kup-text-color, #595959);cursor:pointer;display:grid;font-weight:400;grid-template-columns:var(--grid-project-columns, 1fr 1fr 1fr);place-items:center}._RU6Aa>*{font-size:14px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}._RU6Aa ._30j6y{font-weight:700;width:100%;padding-left:4px}._T0HQN{cursor:pointer;display:grid;border-width:1px;border-style:solid;border-color:#acacac;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-sizing:border-box;grid-template-columns:var(--grid-fasi-columns, 1fr 1fr 1fr);place-items:center;background:#ffffff;color:#595959;font-weight:400}._T0HQN>*{font-size:12px;line-height:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%}._T0HQN:has(+._T0HQN),._RU6Aa:has(+._T0HQN){border-bottom-left-radius:0;border-bottom-right-radius:0}._yp2DW{cursor:pointer;display:grid;border-width:1px;border-style:solid;border-color:#cbcbcb;border-radius:4px;grid-template-columns:var(--grid-fasi-columns, 1fr 1fr 1fr);place-items:center;background:#fff;color:#595959;font-weight:400;box-sizing:border-box}._yp2DW>*{font-size:14px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}._yp2DW ._30j6y{font-weight:700;width:100%;padding-left:4px}._3P0WE{display:grid;grid-auto-flow:column;grid-gap:8px;margin-left:12px;width:-moz-max-content;width:max-content}._1oXbe{background:transparent;border-color:var(--kup-primary-color, #003b77);border-radius:4px;border-width:1px;box-shadow:0 3px 1px -2px rgba(var(--kup-text-color-rgb, 51 51 51), 0.2), 0 2px 2px 0 rgba(var(--kup-text-color-rgb, 51 51 51), 0.14), 0 1px 5px 0 rgba(var(--kup-text-color-rgb, 51 51 51), 0.12);box-sizing:border-box;color:var(--kup-primary-color, #003b77);cursor:pointer;font-size:11px;height:32px;min-width:64px}._1R9mh{font-family:var(--kup-font-family, inherit);font-size:11px;letter-spacing:0.0892857143em;text-decoration:none;text-transform:uppercase;padding:0 6px}:host{display:block}.filter{margin:12px 10px 12px 0;padding:0 10px}";
 
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
   if (kind === "a" && !f)
@@ -12701,6 +12710,16 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class KupPlanner extends H
         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 ----
@@ -12732,7 +12751,7 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class KupPlanner extends H
     let scrollXTimeout;
     let taskScrollYTimeout;
     let detailScrollYTimeout;
-    const scrollDelay = 1500;
+    const scrollDelay = 500;
     this.plannerProps = {
       mainGantt: {
         title: this.titleMess,
@@ -12905,11 +12924,8 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class KupPlanner extends H
     this.persistState();
   }
   handleOnSetViewMode(value) {
-    var _a;
     __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").viewMode = value;
-    if ((_a = this.plannerProps) === null || _a === void 0 ? void 0 : _a.mainGantt) {
-      this.plannerProps.mainGantt.viewMode = value;
-    }
+    this.plannerProps.viewMode = value;
     this.persistState();
   }
   handleOnScrollX(x) {

package/dist/esm/{f-button-c6a69f75.js → f-button-c5b36ae1.js}

@@ -1,6 +1,6 @@
-import { h } from './index-238342f2.js';
+import { h } from './index-b45996ce.js';
 import { F as FButtonStyling } from './f-button-declarations-fd4965d1.js';
-import { F as FImage } from './f-image-f57832fa.js';
+import { F as FImage } from './f-image-c356f4c5.js';
 
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */

package/dist/esm/{f-cell-5822ea68.js → f-cell-d48502f1.js}

@@ -1,9 +1,9 @@
-import { a9 as editableTypes, aa as kupTypes, b as KupThemeColorValues, a6 as FCellTypes, ab as KupTagNames, ac as fullWidthFieldsComps, ad as FCellClasses, ae as autoCenterComps, af as getCellValueForDisplay, ag as FCellEvents } from './kup-manager-89dd9137.js';
-import { h } from './index-238342f2.js';
-import { F as FCheckbox } from './f-checkbox-c15911de.js';
-import { F as FTextField } from './f-text-field-15850e05.js';
-import { F as FImage } from './f-image-f57832fa.js';
-import { F as FChipType, a as FChip } from './f-chip-f46a03f5.js';
+import { a9 as editableTypes, aa as kupTypes, b as KupThemeColorValues, a6 as FCellTypes, ab as KupTagNames, ac as fullWidthFieldsComps, ad as FCellClasses, ae as autoCenterComps, af as getCellValueForDisplay, ag as FCellEvents } from './kup-manager-74e46edc.js';
+import { h } from './index-b45996ce.js';
+import { F as FCheckbox } from './f-checkbox-11b32f83.js';
+import { F as FTextField } from './f-text-field-7e2b397b.js';
+import { F as FImage } from './f-image-c356f4c5.js';
+import { F as FChipType, a as FChip } from './f-chip-038e9404.js';
 
 /**
  * Props of the kup-list component.
@@ -148,7 +148,7 @@ const FCell = (props, children) => {
   }
   return (h("div", { onKeyUp: (e) => cellEvent(e, props, cellType, FCellEvents.KEYUP), class: classObj, "kup-get-cell-props": () => {
       return props;
-    }, style: cell.style },
+    }, ref: (el) => (cell.element = el), style: cell.style },
     h("div", { class: "f-cell__content", style: cell.styleContent, title: cellTitle }, children && children.length > 0
       ? children
       : [props.indents, infoEl, icon, content])));
@@ -278,7 +278,13 @@ function setEditableCell(cellType, classObj, cell, column, props) {
       classObj[FCellClasses.C_RIGHT_ALIGNED] = true;
     case FCellTypes.LINK:
     case FCellTypes.STRING:
-      return (h(FTextField, Object.assign({ inputType: cellType === FCellTypes.NUMBER ? 'number' : null, fullWidth: isFullWidth(props) ? true : false }, cell.data, { icon: cell.icon ? cell.icon : column.icon ? column.icon : null, value: cellType === FCellTypes.NUMBER
+      return (h(FTextField, Object.assign({ inputType: cellType === FCellTypes.NUMBER ? 'number' : null, fullWidth: isFullWidth(props) ? true : false }, cell.data, { icon: cell.data && cell.data.icon
+          ? cell.data.icon
+          : cell.icon
+            ? cell.icon
+            : column.icon
+              ? column.icon
+              : null, value: cellType === FCellTypes.NUMBER
           ? dom.ketchup.math
             .numberifySafe(cell.value)
             .toString()

package/dist/esm/{f-checkbox-c15911de.js → f-checkbox-11b32f83.js}

@@ -1,4 +1,4 @@
-import { h } from './index-238342f2.js';
+import { h } from './index-b45996ce.js';
 
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */

package/dist/esm/{f-chip-f46a03f5.js → f-chip-038e9404.js}

@@ -1,6 +1,6 @@
-import { h } from './index-238342f2.js';
-import { F as FImage } from './f-image-f57832fa.js';
-import { K as KupThemeIconValues, m as KupLanguageGeneric, b as KupThemeColorValues } from './kup-manager-89dd9137.js';
+import { h } from './index-b45996ce.js';
+import { F as FImage } from './f-image-c356f4c5.js';
+import { K as KupThemeIconValues, m as KupLanguageGeneric, b as KupThemeColorValues } from './kup-manager-74e46edc.js';
 
 /**
  * Types of the f-chip component.

package/dist/esm/{f-image-f57832fa.js → f-image-c356f4c5.js}

@@ -1,5 +1,5 @@
-import { h, a as getAssetPath } from './index-238342f2.js';
-import { b as KupThemeColorValues } from './kup-manager-89dd9137.js';
+import { h, a as getAssetPath } from './index-b45996ce.js';
+import { b as KupThemeColorValues } from './kup-manager-74e46edc.js';
 
 /**
  * The type of a CSS step in CSS-drawing mode.

package/dist/esm/{f-paginator-utils-bafc463d.js → f-paginator-utils-58466d55.js}

@@ -1,6 +1,6 @@
-import { E as Filters, J as FilterInterval, H as getValueForDisplay, D as getValueForDisplay2, af as getCellValueForDisplay, v as getColumnByName, z as KupObjects, ah as KupData, ai as compareCell, N as TotalMode, h as KupDatesFormats, a2 as SortMode, aj as KupLanguagePage, r as KupLanguageRow, m as KupLanguageGeneric } from './kup-manager-89dd9137.js';
-import { h } from './index-238342f2.js';
-import { F as FButton } from './f-button-c6a69f75.js';
+import { E as Filters, J as FilterInterval, H as getValueForDisplay, D as getValueForDisplay2, af as getCellValueForDisplay, v as getColumnByName, z as KupObjects, ah as KupData, ai as compareCell, N as TotalMode, h as KupDatesFormats, a2 as SortMode, aj as KupLanguagePage, r as KupLanguageRow, m as KupLanguageGeneric } from './kup-manager-74e46edc.js';
+import { h } from './index-b45996ce.js';
+import { F as FButton } from './f-button-c5b36ae1.js';
 import { F as FButtonStyling } from './f-button-declarations-fd4965d1.js';
 
 /**

package/dist/esm/{f-text-field-15850e05.js → f-text-field-7e2b397b.js}

@@ -1,5 +1,5 @@
-import { h, a as getAssetPath } from './index-238342f2.js';
-import { K as KupThemeIconValues } from './kup-manager-89dd9137.js';
+import { h, a as getAssetPath } from './index-b45996ce.js';
+import { K as KupThemeIconValues } from './kup-manager-74e46edc.js';
 
 const dom = document.documentElement;
 /*-------------------------------------------------*/
@@ -76,7 +76,7 @@ function setContent(props) {
     props.textArea ? (h("span", { class: "mdc-text-field__resizer" },
       h("textarea", { class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, maxlength: props.maxLength, value: value, onBlur: props.onBlur, onClick: props.onClick, onChange: props.onChange, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown }))) : (h("input", { inputmode: props.inputMode ? props.inputMode : undefined, type: inputType, step: props.step, min: props.min, max: props.max, name: props.name, class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, placeholder: props.fullWidth && !props.outlined
         ? props.label
-        : undefined, maxlength: props.maxLength, value: value, onBlur: (e) => {
+        : undefined, maxlength: props.maxLength, size: props.size, value: value, onBlur: (e) => {
         var _a;
         if (persManageForNumberFormat) {
           const options = {

package/dist/esm/{index-238342f2.js → index-b45996ce.js}

@@ -1102,7 +1102,19 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
  * @param fn a function to enqueue
  * @returns either a `Promise` or the return value of the provided function
  */
-const enqueue = (maybePromise, fn) => maybePromise instanceof Promise ? maybePromise.then(fn) : fn();
+const enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.then(fn) : fn();
+/**
+ * Check that a value is a `Promise`. To check, we first see if the value is an
+ * instance of the `Promise` global. In a few circumstances, in particular if
+ * the global has been overwritten, this is could be misleading, so we also do
+ * a little 'duck typing' check to see if the `.then` property of the value is
+ * defined and a function.
+ *
+ * @param maybePromise it might be a promise!
+ * @returns whether it is or not
+ */
+const isPromisey = (maybePromise) => maybePromise instanceof Promise ||
+    (maybePromise && maybePromise.then && typeof maybePromise.then === 'function');
 const updateComponent = async (hostRef, instance, isInitialLoad) => {
     var _a;
     const elm = hostRef.$hostElement$;