@opengeoweb/core 4.20.0 → 4.21.0

package/index.umd.js

@@ -15278,59 +15278,6 @@
       }, {});
     };
 
-    /* *
-     * Licensed under the Apache License, Version 2.0 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     *
-     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2022 - Finnish Meteorological Institute (FMI)
-     * */
-    var highlightStyle = {
-      background: '#ffeecc'
-    };
-
-    var SearchHighlight = function SearchHighlight(_a) {
-      var text = _a.text,
-          search = _a.search;
-
-      if (search === '') {
-        return /*#__PURE__*/React__default["default"].createElement("span", null, text);
-      }
-
-      var searchWords = search.split(' ').reduce(function (words, word) {
-        return word ? __spreadArray(__spreadArray([], __read(words)), [word.toLocaleLowerCase()]) : words;
-      }, []);
-      var searchRegex = searchWords.map(function (word) {
-        return _.escapeRegExp(word);
-      }).join('|');
-      var textParts = text.split(new RegExp("(" + searchRegex + ")", 'gi'));
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, textParts.map(function (part, index) {
-        var key = part + "-" + index;
-
-        if (searchWords.some(function (search) {
-          return part.toLocaleLowerCase().includes(search);
-        })) {
-          return /*#__PURE__*/React__default["default"].createElement("mark", {
-            key: key,
-            style: highlightStyle
-          }, part);
-        }
-
-        return /*#__PURE__*/React__default["default"].createElement("span", {
-          key: key
-        }, part);
-      }));
-    };
-
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -15399,7 +15346,7 @@
           textOverflow: 'ellipsis',
           overflow: 'hidden'
         }
-      }, /*#__PURE__*/React__default["default"].createElement(SearchHighlight, {
+      }, /*#__PURE__*/React__default["default"].createElement(shared.SearchHighlight, {
         text: layer.title,
         search: searchFilter
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -15415,7 +15362,7 @@
           textOverflow: 'ellipsis',
           overflow: 'hidden'
         }
-      }, /*#__PURE__*/React__default["default"].createElement(SearchHighlight, {
+      }, /*#__PURE__*/React__default["default"].createElement(shared.SearchHighlight, {
         text: service.name,
         search: searchFilter
       })), /*#__PURE__*/React__default["default"].createElement(LayerInfoButtonConnect, {
@@ -15431,7 +15378,7 @@
       }, layer["abstract"] && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         "data-testid": "layerAbstract",
         sx: layerInfoStyle
-      }, /*#__PURE__*/React__default["default"].createElement(SearchHighlight, {
+      }, /*#__PURE__*/React__default["default"].createElement(shared.SearchHighlight, {
         text: layer["abstract"],
         search: searchFilter
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -15448,12 +15395,12 @@
         sx: columns.column6
       }, layer.path.length > 0 && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         sx: layerInfoStyle
-      }, "Groups:", ' ', /*#__PURE__*/React__default["default"].createElement(SearchHighlight, {
+      }, "Groups:", ' ', /*#__PURE__*/React__default["default"].createElement(shared.SearchHighlight, {
         text: layer.path.join(' / '),
         search: searchFilter
       })), ((_b = layer.keywords) === null || _b === void 0 ? void 0 : _b.length) > 0 && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         sx: layerInfoStyle
-      }, "Keywords:", ' ', /*#__PURE__*/React__default["default"].createElement(SearchHighlight, {
+      }, "Keywords:", ' ', /*#__PURE__*/React__default["default"].createElement(shared.SearchHighlight, {
         text: layer.keywords.slice().sort(function (a, b) {
           return a.localeCompare(b);
         }).join(', '),
@@ -27963,6 +27910,143 @@
       });
     };
 
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
+     * */
+    var DAY_TO_MILLISECOND = 24 * 60 * 60 * 1000;
+    var DAY_TO_SECOND = 86400;
+    var MILLISECOND_TO_DAY = 1 / 86400000;
+    var MILLISECOND_TO_SECOND = 1 / 1000;
+    var MINUTE_TO_SECOND = 60;
+    var SECOND_TO_MILLISECOND = 1000;
+    var ONE_DAY_IN_SECONDS = DAY_TO_SECOND;
+    /**
+     * Reformats a date that has capitalized first letter and colon separator for time
+     * @param dateString Date string from Date.toLocaleDateString
+     * @returns Reformatted date string
+     */
+
+    var reformatFinnishDateString = function reformatFinnishDateString(dateString) {
+      var charPositionOfTimestamp = -4;
+      return dateString.charAt(0).toUpperCase() + dateString.slice(1, charPositionOfTimestamp) + dateString.slice(charPositionOfTimestamp).replace('.', ':');
+    };
+    var getMonthChanges = function getMonthChanges(startDate, endDate) {
+      var result = [];
+      var currentDate = new Date(startDate.getTime());
+      var lastDate = new Date(endDate.getTime());
+      currentDate.setDate(1);
+      currentDate.setHours(0, 0, 0, 0);
+
+      while (currentDate <= lastDate) {
+        result.push(currentDate.getTime() * MILLISECOND_TO_SECOND);
+        currentDate.setMonth(currentDate.getMonth() + 1);
+      }
+
+      return result;
+    };
+    var getSelectedTimePx = function getSelectedTimePx(startTime, endTime, selectedTime, width) {
+      var startDate = new Date(startTime * SECOND_TO_MILLISECOND);
+      var startDateX = startDate.getTime() * MILLISECOND_TO_SECOND;
+      var selectedTimeX = selectedTime - startDateX;
+      var needleX = Math.floor(selectedTimeX / (endTime - startTime) * width);
+      return needleX;
+    };
+    var boundedValue = function boundedValue(value, bounds) {
+      var _a = __read(bounds, 2),
+          min = _a[0],
+          max = _a[1];
+
+      return Math.max(min, Math.min(max, value));
+    };
+    var getSelectedTimeFromPx = function getSelectedTimeFromPx(startTime, endTime, selectedTimePx, width) {
+      var startDate = new Date(startTime * SECOND_TO_MILLISECOND);
+      var startDateX = startDate.getTime() * MILLISECOND_TO_SECOND;
+      var selectedTimeX = Math.floor(selectedTimePx / width * (endTime - startTime));
+      var selectedTime = selectedTimeX + startDateX;
+      return selectedTime;
+    };
+    var TickMode;
+
+    (function (TickMode) {
+      TickMode[TickMode["DAY"] = 1] = "DAY";
+      TickMode[TickMode["HALF_A_DAY"] = 2] = "HALF_A_DAY";
+      TickMode[TickMode["SIX_HOURS"] = 4] = "SIX_HOURS";
+      TickMode[TickMode["THREE_HOURS"] = 8] = "THREE_HOURS";
+      TickMode[TickMode["ONE_HOUR"] = 24] = "ONE_HOUR";
+      TickMode[TickMode["HALF_AN_HOUR"] = 48] = "HALF_AN_HOUR";
+      TickMode[TickMode["FIFTEEN_MINUTES"] = 96] = "FIFTEEN_MINUTES";
+    })(TickMode || (TickMode = {}));
+
+    var subTicksPerDay = function subTicksPerDay(dayWidthInPixels) {
+      if (dayWidthInPixels < 40) {
+        return TickMode.DAY;
+      }
+
+      if (dayWidthInPixels < 75) {
+        return TickMode.HALF_A_DAY;
+      }
+
+      if (dayWidthInPixels < 400) {
+        return TickMode.SIX_HOURS;
+      }
+
+      if (dayWidthInPixels < 800) {
+        return TickMode.THREE_HOURS;
+      }
+
+      if (dayWidthInPixels < 1600) {
+        return TickMode.ONE_HOUR;
+      }
+
+      if (dayWidthInPixels < 3200) {
+        return TickMode.HALF_AN_HOUR;
+      }
+
+      return TickMode.FIFTEEN_MINUTES;
+    };
+    var maxSubTicksPerDay = function maxSubTicksPerDay(dayWidthInPixels, timeStep) {
+      return Math.min(subTicksPerDay(dayWidthInPixels), Math.floor(ONE_DAY_IN_SECONDS / timeStep));
+    };
+
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var Submenu;
+
+    (function (Submenu) {
+      Submenu["TIME_RANGE"] = "Time range";
+      Submenu["TIME_STEP"] = "Time step";
+      Submenu["SPEED"] = "Speed";
+      Submenu["UPDATE_INTERVAL"] = "Update interval";
+    })(Submenu || (Submenu = {}));
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -28045,11 +28129,14 @@
     var ControlButtonGroup = function ControlButtonGroup(_a) {
       var children = _a.children,
           right = _a.right,
-          left = _a.left;
-      return /*#__PURE__*/React__default["default"].createElement(material.ButtonGroup, {
+          left = _a.left,
+          props = __rest(_a, ["children", "right", "left"]);
+
+      return /*#__PURE__*/React__default["default"].createElement(material.ButtonGroup, __assign({
         orientation: "horizontal",
-        fullWidth: true,
-        sx: __assign(__assign(__assign({}, right && {
+        fullWidth: true
+      }, props, {
+        sx: __assign(__assign(__assign(__assign({}, right && {
           borderTopLeftRadius: 0,
           borderBottomLeftRadius: 0
         }), left && {
@@ -28062,27 +28149,15 @@
           justifyContent: 'center',
           padding: '4px',
           gap: '2px'
-        })
-      }, children);
+        }), props.sx)
+      }), children);
     };
 
-    /* *
-     * Licensed under the Apache License, Version 2.0 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     *
-     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2023 - Finnish Meteorological Institute (FMI)
-     * */
-    var TICK_HEIGHT = 8;
+    var TICK_HEIGHT = 6;
+    var HOUR_LABEL_OFFSET = 1.5;
+    var MONTH_LABEL_BREAKPOINT = 65;
+    var HOUR_LABEL_BREAKPOINT = 800;
+    var HOUR_LABEL_EVERY_THIRD_HOUR_BREAKPOINT = 1600;
     var TIME_SLIDER_LITE_PADDING_RIGHT = 1;
 
     var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_a) {
@@ -28090,6 +28165,7 @@
           height = _a.height,
           startTime = _a.startTime,
           endTime = _a.endTime,
+          timeStep = _a.timeStep,
           style = _a.style,
           locale = _a.locale;
       var timeSliderLite = material.useTheme().palette.geowebColors.timeSliderLite;
@@ -28102,15 +28178,23 @@
       } // Convert start and end time from Unix timestamp to JavaScript Date object
 
 
-      var startDate = new Date(startTime * 1000);
-      var endDate = new Date(endTime * 1000);
-      var totalDays = (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24);
+      var startDate = new Date(startTime * SECOND_TO_MILLISECOND);
+      var endDate = new Date(endTime * SECOND_TO_MILLISECOND);
+      var totalDays = (endDate.getTime() - startDate.getTime()) * MILLISECOND_TO_DAY;
       var tickSpacing = width / totalDays;
-      var tickOffset = (startDate.getHours() + startDate.getMinutes() / 60) / 24 * tickSpacing; // Set up variables for date labels and background colors
+
+      if (tickSpacing === Infinity || tickSpacing === -Infinity || isNaN(tickSpacing)) {
+        return null;
+      }
+
+      var tickOffset = (startDate.getHours() + startDate.getMinutes() / 60) / 24 * tickSpacing;
+      var showMonthLabel = tickSpacing < MONTH_LABEL_BREAKPOINT;
+      var showHourLabel = tickSpacing > HOUR_LABEL_BREAKPOINT;
+      var showHourLabelEveryThirdHour = tickSpacing < HOUR_LABEL_EVERY_THIRD_HOUR_BREAKPOINT; // Set up variables for date labels and background colors
 
       var dayLabels = [];
       var currentDate = startDate;
-      var lastDayLabelDate = new Date(endDate.getTime() + 2 * 24 * 60 * 60 * 1000); // Append two more days
+      var lastDayLabelDate = new Date(endDate.getTime() + 2 * DAY_TO_MILLISECOND); // Append two more days
 
       while (currentDate < lastDayLabelDate) {
         var dateString = currentDate.toLocaleDateString(locale, {
@@ -28123,17 +28207,38 @@
         currentDate.setDate(currentDate.getDate() + 1);
       }
 
+      var monthChanges = getMonthChanges(startDate, endDate);
+      var monthLabels = showMonthLabel ? monthChanges.map(function (monthChange) {
+        var x = getSelectedTimePx(startTime, endTime, monthChange, width) + 4;
+        var dateString = new Date(monthChange * 1000).toLocaleDateString(locale, {
+          weekday: 'short',
+          month: 'numeric',
+          day: 'numeric'
+        });
+        var label = dateString.charAt(0).toUpperCase() + dateString.slice(1);
+        return /*#__PURE__*/React__default["default"].createElement("text", {
+          x: x,
+          y: 14,
+          fill: timeSliderLite.timeline.fill,
+          textAnchor: "left",
+          fontSize: "12px",
+          key: monthChange + "-month-change-text",
+          style: {
+            userSelect: 'none'
+          }
+        }, label);
+      }) : null;
       var backgroundRectangles = dayLabels.map(function (label, index) {
         return /*#__PURE__*/React__default["default"].createElement("rect", {
-          x: index * tickSpacing - tickOffset,
+          x: Math.floor(index * tickSpacing - tickOffset),
           y: 0,
-          width: tickSpacing,
+          width: Math.ceil(tickSpacing),
           height: height,
           fill: index % 2 === 0 ? timeSliderLite.timelineBackground.fill : timeSliderLite.timelineBackgroundAlternative.fill,
           key: label + "-color"
         });
       });
-      var labels = dayLabels.map(function (label, index) {
+      var dailyLabels = !showMonthLabel ? dayLabels.map(function (label, index) {
         return /*#__PURE__*/React__default["default"].createElement("text", {
           x: index * tickSpacing + 8 - tickOffset,
           y: 14,
@@ -28145,8 +28250,35 @@
             userSelect: 'none'
           }
         }, dayLabels[index]);
-      });
-      var ticksPerDay = 4;
+      }) : null;
+      var hourLabelsPerDay = 24;
+      var hourLabels = showHourLabel ? dayLabels.map(function (label, index) {
+        return Array.from({
+          length: hourLabelsPerDay
+        }, function (_, value) {
+          var defaultProps = {
+            x: index * tickSpacing + value * (tickSpacing / hourLabelsPerDay) - tickOffset - HOUR_LABEL_OFFSET,
+            y: height - 10,
+            visibility: showHourLabelEveryThirdHour && value % 3 !== 0 ? 'hidden' : 'visible',
+            fill: timeSliderLite.timeline.fill,
+            fontSize: '12px'
+          };
+          return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("text", __assign({}, defaultProps, {
+            textAnchor: "end",
+            key: label + "-" + value + "-hour-label",
+            style: {
+              userSelect: 'none'
+            }
+          }), value), /*#__PURE__*/React__default["default"].createElement("text", __assign({}, defaultProps, {
+            textAnchor: "start",
+            key: label + "-" + value + "-00-label",
+            style: {
+              userSelect: 'none'
+            }
+          }), ":00"));
+        });
+      }).flat() : null;
+      var ticksPerDay = timeStep ? maxSubTicksPerDay(tickSpacing, timeStep) : subTicksPerDay(tickSpacing);
       var tickMarks = dayLabels.map(function (label, index) {
         return Array.from({
           length: ticksPerDay + 1
@@ -28165,56 +28297,7 @@
         style: style,
         width: width + TIME_SLIDER_LITE_PADDING_RIGHT,
         height: height
-      }, backgroundRectangles, tickMarks, labels);
-    };
-
-    /* *
-     * Licensed under the Apache License, Version 2.0 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     *
-     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2023 - Finnish Meteorological Institute (FMI)
-     * */
-    var MILLISECOND_TO_SECOND = 1 / 1000;
-    /**
-     * Reformats a date that has capitalized first letter and colon separator for time
-     * @param dateString Date string from Date.toLocaleDateString
-     * @returns Reformatted date string
-     */
-
-    var reformatFinnishDateString = function reformatFinnishDateString(dateString) {
-      var charPositionOfTimestamp = -4;
-      return dateString.charAt(0).toUpperCase() + dateString.slice(1, charPositionOfTimestamp) + dateString.slice(charPositionOfTimestamp).replace('.', ':');
-    };
-    var getSelectedTimePx = function getSelectedTimePx(startTime, endTime, selectedTime, width) {
-      var startDate = new Date(startTime * 1000);
-      var startDateX = startDate.getTime() * MILLISECOND_TO_SECOND;
-      var selectedTimeX = selectedTime - startDateX;
-      var needleX = Math.floor(selectedTimeX / (endTime - startTime) * width);
-      return needleX;
-    };
-    var boundedValue = function boundedValue(value, bounds) {
-      var _a = __read(bounds, 2),
-          min = _a[0],
-          max = _a[1];
-
-      return Math.max(min, Math.min(max, value));
-    };
-    var getSelectedTimeFromPx = function getSelectedTimeFromPx(startTime, endTime, selectedTimePx, width) {
-      var startDate = new Date(startTime * 1000);
-      var startDateX = startDate.getTime() * MILLISECOND_TO_SECOND;
-      var selectedTimeX = Math.floor(selectedTimePx / width * (endTime - startTime));
-      var selectedTime = selectedTimeX + startDateX;
-      return selectedTime;
+      }, backgroundRectangles, tickMarks, monthLabels, dailyLabels, hourLabels);
     };
 
     /* *
@@ -28417,7 +28500,7 @@
           areaWidth = _b[0],
           setAreaWidth = _b[1];
 
-      var drawNeedle = selectedTime && areaWidth;
+      var drawNeedle = selectedTime && areaWidth && startTime < endTime;
       React.useLayoutEffect(function () {
         var sliderArea = sliderAreaRef.current;
         setAreaWidth(sliderArea.clientWidth - TIME_SLIDER_LITE_PADDING_RIGHT);
@@ -28443,6 +28526,7 @@
           position: 'absolute',
           top: 0
         },
+        timeStep: timeStep,
         width: areaWidth,
         height: height,
         startTime: startTime,
@@ -28493,7 +28577,8 @@
           isDisabled = _a.isDisabled,
           _k = _a.onClick,
           onClick = _k === void 0 ? function () {} : _k,
-          settings = _a.settings;
+          settings = _a.settings,
+          tooltipDelay = _a.tooltipDelay;
       var forwardTitle = (_c = (_b = settings === null || settings === void 0 ? void 0 : settings.label) === null || _b === void 0 ? void 0 : _b.forward) !== null && _c !== void 0 ? _c : 'Forward';
       var backwardTitle = (_e = (_d = settings === null || settings === void 0 ? void 0 : settings.label) === null || _d === void 0 ? void 0 : _d.backward) !== null && _e !== void 0 ? _e : 'Backward';
       var forwardIcon = (_g = (_f = settings === null || settings === void 0 ? void 0 : settings.icon) === null || _f === void 0 ? void 0 : _f.forward) !== null && _g !== void 0 ? _g : /*#__PURE__*/React__namespace.createElement(theme.StepForward, {
@@ -28503,7 +28588,9 @@
         "data-testid": "step-backward-svg-path"
       });
       return /*#__PURE__*/React__namespace.createElement(material.Tooltip, __assign({}, timeSliderLiteTooltipDefaultProps, {
-        title: forward ? forwardTitle : backwardTitle
+        title: forward ? forwardTitle : backwardTitle,
+        enterDelay: tooltipDelay,
+        enterNextDelay: tooltipDelay
       }), /*#__PURE__*/React__namespace.createElement(material.IconButton, __assign({}, timeSliderLiteButtonDefaultProps, {
         disabled: isDisabled,
         "aria-label": forward ? forwardTitle : backwardTitle,
@@ -28535,13 +28622,17 @@
       var isAnimating = _a.isAnimating,
           isDisabled = _a.isDisabled,
           onTogglePlayButton = _a.onTogglePlayButton,
-          settings = _a.settings;
+          settings = _a.settings,
+          tooltipDelay = _a.tooltipDelay;
       var pauseTitle = (_c = (_b = settings === null || settings === void 0 ? void 0 : settings.label) === null || _b === void 0 ? void 0 : _b.pause) !== null && _c !== void 0 ? _c : 'Pause';
       var playTitle = (_e = (_d = settings === null || settings === void 0 ? void 0 : settings.label) === null || _d === void 0 ? void 0 : _d.play) !== null && _e !== void 0 ? _e : 'Play';
       var pauseIcon = (_g = (_f = settings === null || settings === void 0 ? void 0 : settings.icon) === null || _f === void 0 ? void 0 : _f.pause) !== null && _g !== void 0 ? _g : /*#__PURE__*/React__default["default"].createElement(theme.Pause, null);
       var playIcon = (_j = (_h = settings === null || settings === void 0 ? void 0 : settings.icon) === null || _h === void 0 ? void 0 : _h.play) !== null && _j !== void 0 ? _j : /*#__PURE__*/React__default["default"].createElement(theme.Play, null);
       return /*#__PURE__*/React__default["default"].createElement(material.Tooltip, __assign({}, timeSliderLiteTooltipDefaultProps, {
-        title: isAnimating ? pauseTitle : playTitle
+        title: isAnimating ? pauseTitle : playTitle,
+        placement: "top",
+        enterDelay: tooltipDelay,
+        enterNextDelay: tooltipDelay
       }), /*#__PURE__*/React__default["default"].createElement(material.IconButton, __assign({}, timeSliderLiteButtonDefaultProps, {
         sx: __assign(__assign({}, isAnimating && {
           backgroundColor: 'geowebColors.timeSliderLite.selected.backgroundColor'
@@ -28579,16 +28670,22 @@
           settings = _a.settings;
       var title = (_b = settings === null || settings === void 0 ? void 0 : settings.label) !== null && _b !== void 0 ? _b : 'Animation options';
       var icon = (_c = settings === null || settings === void 0 ? void 0 : settings.icon) !== null && _c !== void 0 ? _c : /*#__PURE__*/React__default["default"].createElement(theme.Options, null);
-      return /*#__PURE__*/React__default["default"].createElement(material.Tooltip, __assign({}, timeSliderLiteTooltipDefaultProps, {
-        title: title
-      }), /*#__PURE__*/React__default["default"].createElement(material.IconButton, __assign({}, timeSliderLiteButtonDefaultProps, {
+      var Button = /*#__PURE__*/React__default["default"].createElement(material.IconButton, __assign({}, timeSliderLiteButtonDefaultProps, {
         sx: __assign(__assign({}, menuOpen && {
           backgroundColor: 'geowebColors.timeSliderLite.selected.backgroundColor'
         }), timeSliderLiteButtonDefaultProps.sx),
         "aria-selected": menuOpen,
         onClick: onClick,
         "data-testid": "TimeSliderLite-MenuButton"
-      }), icon));
+      }), icon);
+
+      if (menuOpen) {
+        return Button;
+      }
+
+      return /*#__PURE__*/React__default["default"].createElement(material.Tooltip, __assign({}, timeSliderLiteTooltipDefaultProps, {
+        title: title
+      }), Button);
     };
 
     /* *
@@ -28610,6 +28707,7 @@
     var TIME_SLIDER_LITE_DEFAULT_HEIGHT = 40;
     var TIME_SLIDER_LITE_DEFAULT_LOCALE = 'en';
     var TIME_SLIDER_LITE_DEFAULT_TIME_STEP = 5;
+    var TIME_SLIDER_LITE_TOOLTIP_DELAY = 3000;
     var styles$1 = {
       container: {
         display: 'grid',
@@ -28620,15 +28718,17 @@
     };
 
     var TimeSliderLite = function TimeSliderLite(_a) {
+      var _b, _c;
+
       var controlButtons = _a.controlButtons,
           endTime = _a.endTime,
-          _b = _a.height,
-          height = _b === void 0 ? TIME_SLIDER_LITE_DEFAULT_HEIGHT : _b,
+          _d = _a.height,
+          height = _d === void 0 ? TIME_SLIDER_LITE_DEFAULT_HEIGHT : _d,
           hideButton = _a.hideButton,
           isAnimating = _a.isAnimating,
           isVisible = _a.isVisible,
-          _c = _a.locale,
-          locale = _c === void 0 ? TIME_SLIDER_LITE_DEFAULT_LOCALE : _c,
+          _e = _a.locale,
+          locale = _e === void 0 ? TIME_SLIDER_LITE_DEFAULT_LOCALE : _e,
           mapId = _a.mapId,
           menuOpen = _a.menuOpen,
           overrideAnimation = _a.overrideAnimation,
@@ -28645,14 +28745,14 @@
           settings = _a.settings,
           startTime = _a.startTime,
           sx = _a.sx,
-          _d = _a.timeStep,
-          timeStep = _d === void 0 ? TIME_SLIDER_LITE_DEFAULT_TIME_STEP : _d;
+          _f = _a.timeStep,
+          timeStep = _f === void 0 ? TIME_SLIDER_LITE_DEFAULT_TIME_STEP : _f;
 
-      var _e = __read(React.useState(selectedTime), 2),
-          rawSelectedTime = _e[0],
-          setRawSelectedTime = _e[1];
+      var _g = __read(React.useState(selectedTime), 2),
+          rawSelectedTime = _g[0],
+          setRawSelectedTime = _g[1];
 
-      var timeStepSeconds = timeStep * 60;
+      var timeStepSeconds = timeStep * MINUTE_TO_SECOND;
       var roundedStartTime = Math.floor(startTime / timeStepSeconds) * timeStepSeconds;
       var roundedEndTime = Math.floor(endTime / timeStepSeconds) * timeStepSeconds;
       var runningExternalAnimation = overrideAnimation && isAnimating;
@@ -28701,12 +28801,19 @@
         if (isAnimating && onToggleAnimation) {
           onToggleAnimation();
         }
-      };
+      }; // Handle time range selection
+
 
+      React.useEffect(function () {
+        setRawSelectedTime(boundedValue(selectedTime, [roundedStartTime, roundedEndTime])); // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [startTime, endTime]);
+      var tooltipDelay = menuOpen ? TIME_SLIDER_LITE_TOOLTIP_DELAY : undefined;
       return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         sx: __assign(__assign(__assign({}, styles$1.container), sx), {
-          gridTemplateColumns: isVisible ? 'auto 1fr auto' : "1fr auto"
+          gridTemplateColumns: isVisible ? 'auto 1fr auto' : "1fr auto",
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          boxShadow: isVisible ? (_b = sx) === null || _b === void 0 ? void 0 : _b.boxShadow : undefined
         }),
         "data-testid": "timeSliderLite-" + mapId
       }, isVisible ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -28729,18 +28836,21 @@
       }), /*#__PURE__*/React__default["default"].createElement(PlayButton, {
         settings: settings === null || settings === void 0 ? void 0 : settings.playButton,
         isAnimating: isAnimating,
-        onTogglePlayButton: onToggleAnimation
+        onTogglePlayButton: onToggleAnimation,
+        tooltipDelay: tooltipDelay
       }), /*#__PURE__*/React__default["default"].createElement(StepButton, {
         settings: settings === null || settings === void 0 ? void 0 : settings.stepButton,
         onClick: function onClick() {
           return handleTimeStep(-timeStepSeconds);
-        }
+        },
+        tooltipDelay: tooltipDelay
       }), /*#__PURE__*/React__default["default"].createElement(StepButton, {
         forward: true,
         settings: settings === null || settings === void 0 ? void 0 : settings.stepButton,
         onClick: function onClick() {
           return handleTimeStep(timeStepSeconds);
-        }
+        },
+        tooltipDelay: tooltipDelay
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
       }, /*#__PURE__*/React__default["default"].createElement(TimeSliderLiteBackground, {
@@ -28761,9 +28871,13 @@
       }), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         sx: {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          boxShadow: isVisible ? 'none' : (_c = sx) === null || _c === void 0 ? void 0 : _c.boxShadow,
+          borderRadius: isVisible ? 'none' : '4px',
           height: height + "px"
         }
       }, hideButton || /*#__PURE__*/React__default["default"].createElement(ControlButtonGroup, {
+        className: "timeSliderLite-hideButtonGroup-" + (isVisible ? 'hide' : 'show'),
         right: isVisible
       }, /*#__PURE__*/React__default["default"].createElement(HideButton, {
         settings: settings === null || settings === void 0 ? void 0 : settings.hideButton,

package/lib/components/TimeSliderLite/TimeSliderLite.d.ts

@@ -31,5 +31,6 @@ export interface TimeSliderLiteProps {
 export declare const TIME_SLIDER_LITE_DEFAULT_HEIGHT = 40;
 export declare const TIME_SLIDER_LITE_DEFAULT_LOCALE = "en";
 export declare const TIME_SLIDER_LITE_DEFAULT_TIME_STEP = 5;
+export declare const TIME_SLIDER_LITE_TOOLTIP_DELAY = 3000;
 declare const TimeSliderLite: React.FC<TimeSliderLiteProps>;
 export default TimeSliderLite;