@sme.up/ketchup 7.4.2 → 7.5.0-SNAPSHOT

package/dist/components/kup-planner.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { a8 as createCommonjsModule, k as kupManagerInstance, aE as KupDatesFormats, ak as getCellValueForDisplay, g as getProps, s as setProps, c as componentWrapperId, d as defineCustomElement$2, b as defineCustomElement$3, e as defineCustomElement$4, f as defineCustomElement$5, h as defineCustomElement$6, i as defineCustomElement$7, j as defineCustomElement$8, l as defineCustomElement$9, m as defineCustomElement$a, n as defineCustomElement$b, o as defineCustomElement$c, p as defineCustomElement$d, q as defineCustomElement$e, r as defineCustomElement$f, t as defineCustomElement$g, u as defineCustomElement$h, v as defineCustomElement$i, w as defineCustomElement$j, x as defineCustomElement$k, y as defineCustomElement$l, z as defineCustomElement$m, A as defineCustomElement$n, B as defineCustomElement$o, C as defineCustomElement$p, D as defineCustomElement$q, E as defineCustomElement$r, G as defineCustomElement$s } from './kup-autocomplete2.js';
+import { a8 as createCommonjsModule, k as kupManagerInstance, aE as KupDatesFormats, ak as getCellValueForDisplay, g as getProps, s as setProps, Y as FTextFieldMDC, c as componentWrapperId, an as FTextField, a as KupThemeIconValues, Z as KupLanguageSearch, d as defineCustomElement$2, b as defineCustomElement$3, e as defineCustomElement$4, f as defineCustomElement$5, h as defineCustomElement$6, i as defineCustomElement$7, j as defineCustomElement$8, l as defineCustomElement$9, m as defineCustomElement$a, n as defineCustomElement$b, o as defineCustomElement$c, p as defineCustomElement$d, q as defineCustomElement$e, r as defineCustomElement$f, t as defineCustomElement$g, u as defineCustomElement$h, v as defineCustomElement$i, w as defineCustomElement$j, x as defineCustomElement$k, y as defineCustomElement$l, z as defineCustomElement$m, A as defineCustomElement$n, B as defineCustomElement$o, C as defineCustomElement$p, D as defineCustomElement$q, E as defineCustomElement$r, G as defineCustomElement$s } from './kup-autocomplete2.js';
 
 /**
  * Props of the kup-gantt component.
@@ -37,8 +37,10 @@ var KupPlannerProps;
 })(KupPlannerProps || (KupPlannerProps = {}));
 var KupPlannerTaskAction;
 (function (KupPlannerTaskAction) {
-  KupPlannerTaskAction["onOpening"] = "onOpening";
-  KupPlannerTaskAction["onClosing"] = "onClosing";
+  KupPlannerTaskAction["onTaskOpening"] = "onTaskOpening";
+  KupPlannerTaskAction["onTaskClosing"] = "onTaskClosing";
+  KupPlannerTaskAction["onClick"] = "onClick";
+  KupPlannerTaskAction["onResize"] = "onResize";
 })(KupPlannerTaskAction || (KupPlannerTaskAction = {}));
 var KupPlannerGanttRowType;
 (function (KupPlannerGanttRowType) {
@@ -8435,7 +8437,8 @@ var parseToDayEnd = function parseToDayEnd(endDate) {
   }).toJSDate();
 };
 var formatToIsoDate = function formatToIsoDate(date) {
-  return luxon.DateTime.fromJSDate(date).toISODate();
+  var _DateTime$fromJSDate$;
+  return (_DateTime$fromJSDate$ = luxon.DateTime.fromJSDate(date).toISODate()) != null ? _DateTime$fromJSDate$ : undefined;
 };
 var formatToLocaleSimple = function formatToLocaleSimple(date) {
   return luxon.DateTime.fromJSDate(date).toFormat("dd/MM/yyyy");
@@ -8453,6 +8456,8 @@ function validDates(startDate, endDate, _name) {
   };
 }
 
+var MAIN_GANTT_ID = "main";
+var SECONDARY_GANTT_ID = "secondary";
 var toViewMode = function toViewMode(timeUnit) {
   switch (timeUnit) {
     case TimeUnit.DAY:
@@ -8744,8 +8749,8 @@ var ganttDateRangeFromDetail = function ganttDateRangeFromDetail(details, viewMo
   return ganttDateRangeGeneric(dates, viewMode, preStepsCount, showSecondaryDates, true);
 };
 var ganttDateRangeGeneric = function ganttDateRangeGeneric(dates, viewMode, preStepsCount, showSecondaryDates, realDates) {
-  var newStartDate = dates[0].start;
-  var newEndDate = dates[0].end;
+  var newStartDate = dates.length > 0 ? dates[0].start : new Date();
+  var newEndDate = dates.length > 0 ? dates[0].end : new Date();
   for (var _iterator = _createForOfIteratorHelperLoose(dates), _step; !(_step = _iterator()).done;) {
     var d = _step.value;
     if (d.start < newStartDate) {
@@ -9179,7 +9184,8 @@ var TaskList = function TaskList(_ref) {
     taskListRef = _ref.taskListRef,
     horizontalContainerClass = _ref.horizontalContainerClass,
     TaskListHeader = _ref.TaskListHeader,
-    TaskListTable = _ref.TaskListTable;
+    TaskListTable = _ref.TaskListTable,
+    filter = _ref.filter;
   var horizontalContainerRef = react.useRef(null);
   react.useEffect(function () {
     if (horizontalContainerRef.current) {
@@ -9204,6 +9210,10 @@ var TaskList = function TaskList(_ref) {
     setSelectedTask: setSelectedTask,
     onExpanderClick: onExpanderClick
   };
+  react.useEffect(function () {
+    var _taskListRef$current;
+    (_taskListRef$current = taskListRef.current) === null || _taskListRef$current === void 0 ? void 0 : _taskListRef$current.prepend(filter);
+  }, [taskListRef, filter]);
   return react.createElement("div", {
     ref: taskListRef,
     className: classes.tasks
@@ -10641,6 +10651,7 @@ var TaskGantt = function TaskGantt(_ref) {
     calendarProps = _ref.calendarProps,
     barProps = _ref.barProps,
     ganttHeight = _ref.ganttHeight,
+    taskGanttRef = _ref.taskGanttRef,
     scrollY = _ref.scrollY,
     scrollX = _ref.scrollX;
   var ganttSVGRef = react.useRef(null);
@@ -10660,7 +10671,8 @@ var TaskGantt = function TaskGantt(_ref) {
     }
   }, [scrollX]);
   return react.createElement("div", {
-    className: styles$7.ganttContainer
+    className: styles$7.ganttContainer,
+    ref: taskGanttRef
   }, react.createElement("div", {
     className: styles$7.ganttVerticalContainer,
     ref: verticalGanttContainerRef,
@@ -10691,9 +10703,10 @@ var TaskGantt = function TaskGantt(_ref) {
 var styles$8 = {"scrollWrapper":"_2k9Ys","scroll":"_19jgW"};
 
 var HorizontalScroll = function HorizontalScroll(_ref) {
+  var _taskGanttRef$current;
   var scroll = _ref.scroll,
     svgWidth = _ref.svgWidth,
-    taskListWidth = _ref.taskListWidth,
+    taskGanttRef = _ref.taskGanttRef,
     rtl = _ref.rtl,
     onScroll = _ref.onScroll;
   var scrollRef = react.useRef(null);
@@ -10702,12 +10715,12 @@ var HorizontalScroll = function HorizontalScroll(_ref) {
       scrollRef.current.scrollLeft = scroll;
     }
   }, [scroll]);
-  console.log("HORIZONTAL-SCROLL svgWidth: " + svgWidth);
+  var rect = (_taskGanttRef$current = taskGanttRef.current) === null || _taskGanttRef$current === void 0 ? void 0 : _taskGanttRef$current.getBoundingClientRect();
   return react.createElement("div", {
     dir: "ltr",
-    style: {
-      margin: rtl ? "0px " + taskListWidth + "px 0px 0px" : "0px 0px 0px " + taskListWidth + "px"
-    },
+    style: rect ? {
+      margin: rtl ? "0px " + rect.x + "px 0px 0px" : "0px 0px 0px " + rect.x + "px"
+    } : undefined,
     className: styles$8.scrollWrapper,
     onScroll: onScroll,
     ref: scrollRef
@@ -10723,13 +10736,14 @@ var Gantt = function Gantt(_ref) {
   var id = _ref.id,
     tasks = _ref.tasks,
     _ref$headerHeight = _ref.headerHeight,
-    headerHeight = _ref$headerHeight === void 0 ? 50 : _ref$headerHeight,
+    headerHeight = _ref$headerHeight === void 0 ? 114 : _ref$headerHeight,
     _ref$columnWidth = _ref.columnWidth,
     columnWidth = _ref$columnWidth === void 0 ? 60 : _ref$columnWidth,
     _ref$listCellWidth = _ref.listCellWidth,
     listCellWidth = _ref$listCellWidth === void 0 ? "297px" : _ref$listCellWidth,
     _ref$rowHeight = _ref.rowHeight,
     rowHeight = _ref$rowHeight === void 0 ? 50 : _ref$rowHeight,
+    filter = _ref.filter,
     _ref$ganttHeight = _ref.ganttHeight,
     ganttHeight = _ref$ganttHeight === void 0 ? 0 : _ref$ganttHeight,
     _ref$viewMode = _ref.viewMode,
@@ -10805,6 +10819,7 @@ var Gantt = function Gantt(_ref) {
     onSelect = _ref.onSelect,
     onExpanderClick = _ref.onExpanderClick;
   var wrapperRef = react.useRef(null);
+  var taskGanttRef = react.useRef(null);
   var taskListRef = react.useRef(null);
   var _useState = react.useState(function () {
       var _ganttDateRangeFromTa = ganttDateRangeFromTask(tasks, viewMode, preStepsCount, showSecondaryDates, displayedStartDate, displayedEndDate),
@@ -11180,6 +11195,7 @@ var Gantt = function Gantt(_ref) {
     headerHeight: headerHeight,
     scrollY: scrollY,
     ganttHeight: ganttHeight,
+    filter: filter,
     horizontalContainerClass: styles$7.horizontalContainer,
     selectedTask: selectedTask,
     taskListRef: taskListRef,
@@ -11198,6 +11214,7 @@ var Gantt = function Gantt(_ref) {
     calendarProps: calendarProps,
     barProps: barProps,
     ganttHeight: ganttHeight,
+    taskGanttRef: taskGanttRef,
     scrollY: scrollY,
     scrollX: scrollX
   }), ganttEvent.changedTask && react.createElement(Tooltip, {
@@ -11224,6 +11241,7 @@ var Gantt = function Gantt(_ref) {
     rtl: rtl
   })), react.createElement(HorizontalScroll, {
     svgWidth: svgWidth,
+    taskGanttRef: taskGanttRef,
     taskListWidth: taskListWidth,
     scroll: scrollX,
     rtl: rtl,
@@ -11269,16 +11287,15 @@ var ganttDateTimeFormatters = {
 
 var classes$1 = {"wrapper":"_37E9D","title":"_WrYI6","toggler":"_c53zr","switch":"_2eBO5","input":"_hiyro","slider":"_2HI58","label":"_2gSdA","filter":"_2cfRI"};
 
-var CustomTaskListHeaderHOC = function CustomTaskListHeaderHOC(label, doubleView, setDoubleView, onFilterInput) {
+var CustomTaskListHeaderHOC = function CustomTaskListHeaderHOC(label, doubleView, setDoubleView) {
   var CustomTaskListHeader = function CustomTaskListHeader(_ref) {
-    var headerHeight = _ref.headerHeight,
-      fontFamily = _ref.fontFamily,
+    var fontFamily = _ref.fontFamily,
       fontSize = _ref.fontSize;
     return react.createElement("div", {
       style: {
         fontFamily: fontFamily,
         fontSize: fontSize,
-        height: headerHeight
+        height: "50px"
       },
       className: classes$1.wrapper
     }, react.createElement("div", {
@@ -11300,16 +11317,7 @@ var CustomTaskListHeaderHOC = function CustomTaskListHeaderHOC(label, doubleView
       className: classes$1.slider
     })), react.createElement("span", {
       className: classes$1.label
-    }, "Mostra previsioni")), react.createElement("div", {
-      className: classes$1.filter
-    }, react.createElement("input", {
-      type: "text",
-      name: "filter",
-      size: 30,
-      onInput: function onInput(e) {
-        return onFilterInput === null || onFilterInput === void 0 ? void 0 : onFilterInput(e);
-      }
-    })));
+    }, "Previsioni")));
   };
   return CustomTaskListHeader;
 };
@@ -11555,9 +11563,6 @@ var Planner = function Planner(props) {
     projection = _useState7[0],
     setProjection = _useState7[1];
   var locale = "it-IT";
-  var onFilterInput = function onFilterInput(e) {
-    console.log("PLANNER onFilterInput", e);
-  };
   var handleClick = function handleClick(row, onClick) {
     if (!row) {
       return;
@@ -11648,6 +11653,7 @@ var Planner = function Planner(props) {
       details.push.apply(details, convertProjectToTasks(currentDetails[_i], formatToIsoDate(displayedDates.displayedStartDate), formatToIsoDate(displayedDates.displayedEndDate)));
     }
   }
+  console.log("PLANNER render");
   return react.createElement("div", null, react.createElement(Switcher, {
     onTimeUnitChange: function onTimeUnitChange(timeUnit) {
       return setTimeUnit(timeUnit);
@@ -11658,8 +11664,9 @@ var Planner = function Planner(props) {
       flexDirection: "column"
     }
   }, react.createElement(Gantt, Object.assign({
-    id: "main",
-    key: "main",
+    id: MAIN_GANTT_ID,
+    key: MAIN_GANTT_ID,
+    filter: props.mainGantt.filter,
     hideLabel: props.mainGantt.hideLabel,
     showSecondaryDates: mainGanttDoubleView,
     hideDependencies: props.mainGantt.hideDependencies,
@@ -11670,7 +11677,7 @@ var Planner = function Planner(props) {
     tasks: tasks,
     viewMode: toViewMode(timeUnit)
   }, props.mainGantt.stylingOptions, {
-    TaskListHeader: (_props$mainGantt$task = props.mainGantt.taskListHeaderProject) != null ? _props$mainGantt$task : CustomTaskListHeaderHOC(props.mainGantt.title, mainGanttDoubleView != null ? mainGanttDoubleView : false, setMainGanttDoubleView, onFilterInput),
+    TaskListHeader: (_props$mainGantt$task = props.mainGantt.taskListHeaderProject) != null ? _props$mainGantt$task : CustomTaskListHeaderHOC(props.mainGantt.title, mainGanttDoubleView != null ? mainGanttDoubleView : false, setMainGanttDoubleView),
     TaskListTable: (_props$mainGantt$task2 = props.mainGantt.taskListTableProject) != null ? _props$mainGantt$task2 : CustomTaskListTableHOC(function (id) {
       var row = getProjectById(id, currentTasks);
       if (!row) {
@@ -11679,7 +11686,7 @@ var Planner = function Planner(props) {
       if (row) {
         handleClick(row, props.mainGantt.onClick);
       }
-    }, "main"),
+    }, MAIN_GANTT_ID),
     TooltipContent: (_props$mainGantt$tool = props.mainGantt.tooltipContent) != null ? _props$mainGantt$tool : CustomTooltipHOC(),
     onClick: function onClick(e) {
       var row = getProjectById(e.id, currentTasks);
@@ -11696,9 +11703,10 @@ var Planner = function Planner(props) {
     locale: locale,
     dateTimeFormatters: ganttDateTimeFormatters
   })), props.secondaryGantt && react.createElement(Gantt, Object.assign({
-    id: "secondary",
-    key: "secondary",
+    id: SECONDARY_GANTT_ID,
+    key: SECONDARY_GANTT_ID,
     hideLabel: props.secondaryGantt.hideLabel,
+    filter: props.secondaryGantt.filter,
     showSecondaryDates: mainGanttDoubleView,
     hideDependencies: props.secondaryGantt.hideDependencies,
     ganttHeight: props.secondaryGantt.ganttHeight,
@@ -11708,10 +11716,10 @@ var Planner = function Planner(props) {
     tasks: details,
     viewMode: toViewMode(timeUnit)
   }, props.mainGantt.stylingOptions, {
-    TaskListHeader: (_props$secondaryGantt3 = props.secondaryGantt.taskListHeaderProject) != null ? _props$secondaryGantt3 : CustomTaskListHeaderHOC(props.secondaryGantt.title, undefined, undefined, onFilterInput),
+    TaskListHeader: (_props$secondaryGantt3 = props.secondaryGantt.taskListHeaderProject) != null ? _props$secondaryGantt3 : CustomTaskListHeaderHOC(props.secondaryGantt.title),
     TaskListTable: (_props$secondaryGantt4 = (_props$secondaryGantt5 = props.secondaryGantt) === null || _props$secondaryGantt5 === void 0 ? void 0 : _props$secondaryGantt5.taskListTableProject) != null ? _props$secondaryGantt4 : CustomTaskListTableHOC(function (id) {
       console.log("planner.tsx secondaryGantt Clicked on " + id);
-    }, "secondary"),
+    }, SECONDARY_GANTT_ID),
     TooltipContent: (_props$secondaryGantt6 = props.secondaryGantt.tooltipContent) != null ? _props$secondaryGantt6 : CustomTooltipHOC(),
     projection: projection,
     onClick: function onClick(e) {
@@ -11783,7 +11791,7 @@ function getValuesToShow(row, idCol, nameCol, dataColumns, columns, customToValu
   return valuesToShow;
 }
 
-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;dominant-baseline:central;-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}";
+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;dominant-baseline:central;-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}";
 
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
   if (kind === "a" && !f)
@@ -11801,7 +11809,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 _KupPlanner_instances, _KupPlanner_kupManager, _KupPlanner_rootPlanner, _KupPlanner_lastOnChangeReceived, _KupPlanner_renderReactPlannerElement, _KupPlanner_toTasks, _KupPlanner_toDetails, _KupPlanner_getTask, _KupPlanner_removePhases, _KupPlanner_handleOnClickOnTask, _KupPlanner_handleOnClickOnPhase, _KupPlanner_handleOnClickOnDetail, _KupPlanner_emitOnChangeEventsReceived;
+var _KupPlanner_instances, _KupPlanner_kupManager, _KupPlanner_rootPlanner, _KupPlanner_lastOnChangeReceived, _KupPlanner_renderReactPlannerElement, _KupPlanner_toTasks, _KupPlanner_toDetails, _KupPlanner_getTask, _KupPlanner_removePhases, _KupPlanner_handleOnClickOnTask, _KupPlanner_handleOnClickOnPhase, _KupPlanner_handleOnClickOnDetail, _KupPlanner_emitOnChangeEventsReceived, _KupPlanner_onFilter;
 const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -11854,11 +11862,12 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       taskAction: taskAction,
     });
   }
-  onKupDateChange(event) {
+  onKupDateChange(event, taskAction) {
     this.kupDateChange.emit({
       comp: this,
       id: this.rootElement.id,
       value: event,
+      taskAction: taskAction,
     });
   }
   /*-------------------------------------------------*/
@@ -11924,32 +11933,34 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.plannerProps = Object.assign({}, this.plannerProps);
   }
   handleOnClick(nativeEvent) {
-    console.log('handleOnClick', nativeEvent);
+    console.log('kup-planner.handleOnClick', nativeEvent);
     switch (nativeEvent.rowType) {
       case KupPlannerGanttRowType.TASK:
         const taskAction = nativeEvent.phases
-          ? KupPlannerTaskAction.onClosing
-          : KupPlannerTaskAction.onOpening;
+          ? KupPlannerTaskAction.onTaskClosing
+          : KupPlannerTaskAction.onTaskOpening;
         if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnTask).call(this, nativeEvent)) {
           this.onKupClick(nativeEvent, taskAction);
         }
         break;
       case KupPlannerGanttRowType.PHASE:
         if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnPhase).call(this)) {
-          this.onKupClick(nativeEvent);
+          this.onKupClick(nativeEvent, KupPlannerTaskAction.onClick);
         }
         break;
       case KupPlannerGanttRowType.DETAIL:
         if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnDetail).call(this)) {
-          this.onKupClick(nativeEvent);
+          this.onKupClick(nativeEvent, KupPlannerTaskAction.onClick);
         }
         break;
     }
   }
   handleOnDateChange(nativeEvent) {
     if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_emitOnChangeEventsReceived).call(this, nativeEvent)) {
-      console.log('handleOnDateChange', nativeEvent);
-      this.onKupDateChange(nativeEvent);
+      if (nativeEvent.rowType != KupPlannerGanttRowType.DETAIL) {
+        console.log('kup-planner.handleOnDateChange', nativeEvent);
+        this.onKupDateChange(nativeEvent, KupPlannerTaskAction.onResize);
+      }
     }
   }
   componentWillLoad() {
@@ -11961,11 +11972,18 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     if (details && details.length == 0) {
       details = undefined;
     }
+    const mainFilter = this.rootElement.shadowRoot.querySelector('#main-filter');
+    FTextFieldMDC(mainFilter);
+    const secondaryFilter = this.rootElement.shadowRoot.querySelector('#secondary-filter');
+    if (details) {
+      FTextFieldMDC(secondaryFilter);
+    }
     this.plannerProps = {
       mainGantt: {
         title: this.titleMess,
         items: __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toTasks).call(this, this.data),
         stylingOptions: Object.assign(Object.assign({}, defaultStylingOptions), { listCellWidth: this.listCellWidth }),
+        filter: mainFilter,
         hideLabel: true,
         ganttHeight: this.taskHeight,
         showSecondaryDates: this.showSecondaryDates,
@@ -11977,6 +11995,7 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
           title: '',
           items: details,
           stylingOptions: Object.assign(Object.assign({}, defaultStylingOptions), { listCellWidth: this.listCellWidth }),
+          filter: secondaryFilter,
           hideLabel: true,
           ganttHeight: this.detailHeight,
           onClick: (nativeEvent) => this.handleOnClick(nativeEvent),
@@ -11984,7 +12003,6 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         }
         : undefined,
     };
-    console.log('kup-planner.tsx componentDidLoad plannerProps', this.plannerProps);
     __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_renderReactPlannerElement).call(this);
     this.kupReady.emit({
       comp: this,
@@ -12000,8 +12018,17 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").debug.logRender(this, true);
   }
   render() {
+    var _a;
     //console.log('kup-planner.tsx render');
-    return (h(Host, null, h("div", { id: componentWrapperId, style: { maxWidth: this.maxWidth } })));
+    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);
@@ -12079,6 +12106,7 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
   data.rows
     .filter((row) => isAtLeastOneDateValid(row.cells[this.detailDates[0]], row.cells[this.detailDates[1]]))
     .forEach((row) => {
+    var _a, _b;
     const detailId = row.cells[this.detailIdCol].value;
     const detailNameId = row.cells[this.detailNameCol].value;
     const datesSanitized = sanitizeAllDates(row.cells[this.detailDates[0]], row.cells[this.detailDates[1]]);
@@ -12099,10 +12127,10 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
       startDate: datesSanitized.dateValues[0],
       endDate: datesSanitized.dateValues[1],
       color: this.detailColorCol
-        ? row.cells[this.detailColorCol].value
+        ? (_a = row.cells[this.detailColorCol].value) !== null && _a !== void 0 ? _a : '#D9D9D8'
         : '#D9D9D8',
       selectedColor: this.detailColorCol
-        ? row.cells[this.detailColorCol].value
+        ? (_b = row.cells[this.detailColorCol].value) !== null && _b !== void 0 ? _b : '#D9D9D8'
         : '#D9D9D8',
     });
   });
@@ -12138,6 +12166,34 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
     emitEvent = true;
   }
   return emitEvent;
+}, _KupPlanner_onFilter = function _KupPlanner_onFilter(e, isDetail) {
+  const tempData = {
+    columns: this.data.columns,
+    rows: [],
+  };
+  const value = e.target.value;
+  const data = isDetail ? this.detailData : this.data;
+  for (let index = 0; index < data.rows.length; index++) {
+    const row = data.rows[index];
+    const valuesToShow = isDetail
+      ? getValuesToShow(row, this.detailIdCol, this.detailNameCol, data.columns, this.detailColumns)
+      : getValuesToShow(row, this.taskIdCol, this.taskNameCol, data.columns, this.taskColumns);
+    for (let index = 0; index < valuesToShow.length; index++) {
+      const valueToShow = valuesToShow[index];
+      if (valueToShow.toLowerCase().indexOf(value.toLowerCase()) > -1) {
+        tempData.rows.push(row);
+        break;
+      }
+    }
+  }
+  const newGantt = isDetail
+    ? {
+      secondaryGantt: Object.assign(Object.assign({}, this.plannerProps.secondaryGantt), { items: __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toDetails).call(this, tempData) }),
+    }
+    : {
+      mainGantt: Object.assign(Object.assign({}, this.plannerProps.mainGantt), { items: __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toTasks).call(this, tempData) }),
+    };
+  this.plannerProps = Object.assign(Object.assign({}, this.plannerProps), newGantt);
 };
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/kup-qlik.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { k as kupManagerInstance, d as defineCustomElement$2, b as defineCustomElement$3, e as defineCustomElement$4, f as defineCustomElement$5, h as defineCustomElement$6, i as defineCustomElement$7, j as defineCustomElement$8, l as defineCustomElement$9, m as defineCustomElement$a, n as defineCustomElement$b, o as defineCustomElement$c, p as defineCustomElement$d, q as defineCustomElement$e, r as defineCustomElement$f, t as defineCustomElement$g, u as defineCustomElement$h, v as defineCustomElement$i, w as defineCustomElement$j, x as defineCustomElement$k, y as defineCustomElement$l, z as defineCustomElement$m, A as defineCustomElement$n, B as defineCustomElement$o, C as defineCustomElement$p, D as defineCustomElement$q, E as defineCustomElement$r, G as defineCustomElement$s } from './kup-autocomplete2.js';
 
-const kupQlikCss = ".kup-qlik-container-fluid{width:100%}.kup-qlik-container{width:100%}@media (min-width: 576px){.kup-qlik-container{width:576px}.kup-qlik-row>.qvobject{flex:0 0 auto;min-width:100px;margin:0px auto 5px auto}}@media (min-width: 768px){.kup-qlik-container{width:768px}.kup-qlik-row>.qvobject{flex:0 0 auto;min-width:100px;margin:0px auto 5px auto}}@media (min-width: 992px){.kup-qlik-container{width:992px}.kup-qlik-row>.qvobject{flex:0 0 auto;min-width:100px;margin:0px auto 5px auto}}@media (min-width: 1200px){.kup-qlik-container{width:1200px}.kup-qlik-row>.qvobject{flex:0 0 auto;min-width:100px;margin:0px auto 5px auto}}.kup-qlik-row{display:flex;display:ms-flexbox;flex-wrap:wrap;-ms-flex-wrap:wrap;margin-bottom:5px}.kup-qlik-row .size-M{height:var(--lyo_obj-height)}.kup-qlik-row .size-S{height:calc(var(--lyo_obj-height)/2)}.kup-qlik-row .size-XS{height:calc(var(--lyo_obj-height)/3)}.kup-qlik-row .size-L{height:calc(var(--lyo_obj-height)*2)}.kup-qlik-row .size-XL{height:calc(var(--lyo_obj-height)*3)}.kup-qlik-row .bordered{border:1px solid var(--kup-border-color, #969696)}.kup-qlik-row .width-1{width:8.3333%}.kup-qlik-row .width-2{width:16.6666%}.kup-qlik-row .width-3{width:25%}.kup-qlik-row .width-4{width:33.3333%}.kup-qlik-row .width-5{width:41.6666%}.kup-qlik-row .width-6{width:50%}.kup-qlik-row .width-7{width:58.3333%}.kup-qlik-row .width-8{width:66.6666%}.kup-qlik-row .width-9{width:75%}.kup-qlik-row .width-10{width:83.3333%}.kup-qlik-row .width-11{width:91.6666%}.kup-qlik-row .width-12{width:100%}";
+const kupQlikCss = ".kup-qlik-container-fluid{width:100%}.kup-qlik-container{width:100%}@media (min-width: 576px){.kup-qlik-container{width:576px}.kup-qlik-row>.qvobject{flex:0 0 auto;min-width:100px;margin:0px auto 5px auto}}@media (min-width: 768px){.kup-qlik-container{width:768px}.kup-qlik-row>.qvobject{flex:0 0 auto;min-width:100px;margin:0px auto 5px auto}}@media (min-width: 992px){.kup-qlik-container{width:992px}.kup-qlik-row>.qvobject{flex:0 0 auto;min-width:100px;margin:0px auto 5px auto}}@media (min-width: 1200px){.kup-qlik-container{width:1200px}.kup-qlik-row>.qvobject{flex:0 0 auto;min-width:100px;margin:0px auto 5px auto}}.kup-qlik-row{display:flex;display:ms-flexbox;flex-wrap:wrap;-ms-flex-wrap:wrap;margin-bottom:5px}.kup-qlik-row .size-M{height:var(--lyo_obj-height)}.kup-qlik-row .size-S{height:calc(var(--lyo_obj-height) / 2)}.kup-qlik-row .size-XS{height:calc(var(--lyo_obj-height) / 3)}.kup-qlik-row .size-L{height:calc(var(--lyo_obj-height) * 2)}.kup-qlik-row .size-XL{height:calc(var(--lyo_obj-height) * 3)}.kup-qlik-row .bordered{border:1px solid var(--kup-border-color, #969696)}.kup-qlik-row .width-1{width:8.3333%}.kup-qlik-row .width-2{width:16.6666%}.kup-qlik-row .width-3{width:25%}.kup-qlik-row .width-4{width:33.3333%}.kup-qlik-row .width-5{width:41.6666%}.kup-qlik-row .width-6{width:50%}.kup-qlik-row .width-7{width:58.3333%}.kup-qlik-row .width-8{width:66.6666%}.kup-qlik-row .width-9{width:75%}.kup-qlik-row .width-10{width:83.3333%}.kup-qlik-row .width-11{width:91.6666%}.kup-qlik-row .width-12{width:100%}";
 
 const KupQlik$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/esm/{f-button-8d15b5a0.js → f-button-b7f77b26.js}

@@ -1,6 +1,6 @@
-import { h } from './index-b326ffc9.js';
+import { h } from './index-8bd38435.js';
 import { F as FButtonStyling } from './f-button-declarations-b1b4cac4.js';
-import { F as FImage } from './f-image-21451b15.js';
+import { F as FImage } from './f-image-f84dbd7c.js';
 
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */

package/dist/esm/{f-cell-7b706e57.js → f-cell-dc3beffe.js}

@@ -1,9 +1,9 @@
-import { af as editableTypes, ag as kupTypes, b as KupThemeColorValues, a7 as FCellTypes, ah as KupTagNames, ai as fullWidthFieldsComps, aj as stringToNumber, ak as FCellClasses, al as autoCenterComps, am as getCellValueForDisplay, an as FCellEvents } from './kup-manager-6145d980.js';
-import { h } from './index-b326ffc9.js';
-import { F as FCheckbox } from './f-checkbox-ec85b437.js';
-import { F as FTextField } from './f-text-field-0bb2d109.js';
-import { F as FImage } from './f-image-21451b15.js';
-import { F as FChipType, a as FChip } from './f-chip-c671fe90.js';
+import { af as editableTypes, ag as kupTypes, b as KupThemeColorValues, a7 as FCellTypes, ah as KupTagNames, ai as fullWidthFieldsComps, aj as stringToNumber, ak as FCellClasses, al as autoCenterComps, am as getCellValueForDisplay, an as FCellEvents } from './kup-manager-a5ab58a0.js';
+import { h } from './index-8bd38435.js';
+import { F as FCheckbox } from './f-checkbox-9b3f5f5b.js';
+import { F as FTextField } from './f-text-field-7dd143be.js';
+import { F as FImage } from './f-image-f84dbd7c.js';
+import { F as FChipType, a as FChip } from './f-chip-0a678211.js';
 
 /**
  * Props of the kup-list component.

package/dist/esm/{f-checkbox-ec85b437.js → f-checkbox-9b3f5f5b.js}

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

package/dist/esm/{f-chip-c671fe90.js → f-chip-0a678211.js}

@@ -1,6 +1,6 @@
-import { h } from './index-b326ffc9.js';
-import { F as FImage } from './f-image-21451b15.js';
-import { K as KupThemeIconValues, l as KupLanguageGeneric, b as KupThemeColorValues } from './kup-manager-6145d980.js';
+import { h } from './index-8bd38435.js';
+import { F as FImage } from './f-image-f84dbd7c.js';
+import { K as KupThemeIconValues, l as KupLanguageGeneric, b as KupThemeColorValues } from './kup-manager-a5ab58a0.js';
 
 /**
  * Types of the f-chip component.

package/dist/esm/{f-image-21451b15.js → f-image-f84dbd7c.js}

@@ -1,5 +1,5 @@
-import { h, a as getAssetPath } from './index-b326ffc9.js';
-import { b as KupThemeColorValues } from './kup-manager-6145d980.js';
+import { h, a as getAssetPath } from './index-8bd38435.js';
+import { b as KupThemeColorValues } from './kup-manager-a5ab58a0.js';
 
 /**
  * The type of a CSS step in CSS-drawing mode.
@@ -24,7 +24,7 @@ const FImage = (props) => {
         '--kup_image_height': props.sizeY ? props.sizeY : 'auto',
         '--kup_image_width': props.sizeX ? props.sizeX : '100%',
       };
-      el = createImage(props.resource);
+      el = createImage(props);
     }
     else {
       style = {
@@ -75,8 +75,8 @@ function createIcon(props) {
   }
   return h("div", { class: classObj, style: style });
 }
-function createImage(resource) {
-  return h("img", { src: resource });
+function createImage(props) {
+  return h("img", { onLoad: props.onLoad, src: props.resource });
 }
 function createBar(data) {
   const steps = [];

package/dist/esm/{f-paginator-utils-92bbf277.js → f-paginator-utils-52902bd6.js}

@@ -1,6 +1,6 @@
-import { E as Filters, J as FilterInterval, H as getValueForDisplay, C as getValueForDisplay2, am as getCellValueForDisplay, u as getColumnByName, y as KupObjects, ao as KupData, ap as compareCell, N as TotalMode, aj as stringToNumber, f as KupDatesFormats, aq as isNumber, a3 as SortMode, ar as KupLanguagePage, q as KupLanguageRow, l as KupLanguageGeneric } from './kup-manager-6145d980.js';
-import { h } from './index-b326ffc9.js';
-import { F as FButton } from './f-button-8d15b5a0.js';
+import { E as Filters, J as FilterInterval, H as getValueForDisplay, C as getValueForDisplay2, am as getCellValueForDisplay, u as getColumnByName, y as KupObjects, ao as KupData, ap as compareCell, N as TotalMode, aj as stringToNumber, f as KupDatesFormats, aq as isNumber, a3 as SortMode, ar as KupLanguagePage, q as KupLanguageRow, l as KupLanguageGeneric } from './kup-manager-a5ab58a0.js';
+import { h } from './index-8bd38435.js';
+import { F as FButton } from './f-button-b7f77b26.js';
 import { F as FButtonStyling } from './f-button-declarations-b1b4cac4.js';
 
 /**

package/dist/esm/{f-text-field-0bb2d109.js → f-text-field-7dd143be.js}

@@ -1,5 +1,5 @@
-import { h, a as getAssetPath } from './index-b326ffc9.js';
-import { K as KupThemeIconValues } from './kup-manager-6145d980.js';
+import { h, a as getAssetPath } from './index-8bd38435.js';
+import { K as KupThemeIconValues } from './kup-manager-a5ab58a0.js';
 
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */

package/dist/esm/{index-b326ffc9.js → index-8bd38435.js}

@@ -1684,8 +1684,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
 const styles = /*@__PURE__*/ new Map();
 const win = typeof window !== 'undefined' ? window : {};
 const doc = win.document || { head: {} };
-const H = (win.HTMLElement || class {
-});
 const plt = {
     $flags$: 0,
     $resourcesUrl$: '',
@@ -1748,4 +1746,4 @@ const flush = () => {
 const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
-export { Host as H, getAssetPath as a, bootstrapLazy as b, createEvent as c, setAssetPath as d, H as e, forceUpdate as f, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
+export { Host as H, getAssetPath as a, bootstrapLazy as b, createEvent as c, setAssetPath as d, forceUpdate as f, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };

package/dist/esm/ketchup.js

@@ -1,8 +1,8 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-b326ffc9.js';
-export { s as setNonce } from './index-b326ffc9.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-8bd38435.js';
+export { s as setNonce } from './index-8bd38435.js';
 
 /*
- Stencil Client Patch Browser v3.1.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v3.2.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = import.meta.url;

package/dist/esm/kup-accordion.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-b326ffc9.js';
-import { k as kupManagerInstance, g as getProps, s as setProps, b as KupThemeColorValues, K as KupThemeIconValues } from './kup-manager-6145d980.js';
-import { F as FImage } from './f-image-21451b15.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-8bd38435.js';
+import { k as kupManagerInstance, g as getProps, s as setProps, b as KupThemeColorValues, K as KupThemeIconValues } from './kup-manager-a5ab58a0.js';
+import { F as FImage } from './f-image-f84dbd7c.js';
 import { c as componentWrapperId } from './GenericVariables-665de00a.js';
 import { M as MDCRipple } from './component-b1bedf1d.js';
 import './tslib.es6-3eea2234.js';