@opengeoweb/core 4.20.0 → 4.21.0

package/index.esm.js

@@ -1,12 +1,12 @@
 import { createSlice, createSelector, createAction, createEntityAdapter } from '@reduxjs/toolkit';
-import _, { isEqual, debounce, compact, escapeRegExp, groupBy, throttle, range } from 'lodash';
+import _, { isEqual, debounce, compact, groupBy, throttle, range } from 'lodash';
 import produce$1, { current, produce } from 'immer';
 import moment from 'moment';
 import * as React from 'react';
 import React__default, { Component, useRef, useState, useEffect, useCallback, useLayoutEffect } from 'react';
 import { takeLatest, put, select, call, takeEvery, all, delay } from 'redux-saga/effects';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
-import { CustomIconButton, CustomTooltip, ToolContainerDraggable, TooltipSelect, AlertIcon, useControlledTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, CustomAccordion, AlertBanner, calculateDialogSizeAndPosition, CustomToggleButton, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
+import { CustomIconButton, CustomTooltip, ToolContainerDraggable, TooltipSelect, AlertIcon, useControlledTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, CustomAccordion, AlertBanner, calculateDialogSizeAndPosition, CustomToggleButton, SearchHighlight, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
 import { Pause, Play, CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, Add, Copy, None, FastForward, AutoUpdateActive, Both, Visibility, VisibilityOff, Delete, DragHandle as DragHandle$1, Cached, Filter, Search, Clear, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Close, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateInActive, Speed, Clock, Now, Animation, Options, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, List as List$1, ChevronRight, ChevronLeft, Resize, ExitDomain, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
 import { Paper, Box, Typography, Grid, MenuItem, useTheme, Button, Popper, ListItemText, ListItemIcon, FormControl, InputLabel, List, ListItemButton, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, InputAdornment, DialogActions, LinearProgress, Backdrop, ListItem, ListItemSecondaryAction, Checkbox, Switch, styled, Slider, Menu, Tooltip, IconButton, ButtonGroup, Divider, Snackbar } from '@mui/material';
 import { legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WMGetServiceFromStore, LayerType as LayerType$1, clearImageCache, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer } from '@opengeoweb/webmap';
@@ -14664,43 +14664,6 @@ var sortByService = function sortByService(serviceObj) {
   }, {});
 };
 
-var highlightStyle = {
-  background: '#ffeecc'
-};
-
-var SearchHighlight = function SearchHighlight(_ref) {
-  var text = _ref.text,
-      search = _ref.search;
-
-  if (search === '') {
-    return /*#__PURE__*/React__default.createElement("span", null, text);
-  }
-
-  var searchWords = search.split(' ').reduce(function (words, word) {
-    return word ? [].concat(_toConsumableArray(words), [word.toLocaleLowerCase()]) : words;
-  }, []);
-  var searchRegex = searchWords.map(function (word) {
-    return escapeRegExp(word);
-  }).join('|');
-  var textParts = text.split(new RegExp("(".concat(searchRegex, ")"), 'gi'));
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, textParts.map(function (part, index) {
-    var key = "".concat(part, "-").concat(index);
-
-    if (searchWords.some(function (search) {
-      return part.toLocaleLowerCase().includes(search);
-    })) {
-      return /*#__PURE__*/React__default.createElement("mark", {
-        key: key,
-        style: highlightStyle
-      }, part);
-    }
-
-    return /*#__PURE__*/React__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.
@@ -26961,6 +26924,110 @@ var HarmonieTempAndPrecipPreset = function HarmonieTempAndPrecipPreset(_ref) {
   });
 };
 
+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 _bounds = _slicedToArray(bounds, 2),
+      min = _bounds[0],
+      max = _bounds[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));
+};
+
+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.
@@ -27041,14 +27108,17 @@ var HideButton = function HideButton(_ref) {
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 
-var ControlButtonGroup = function ControlButtonGroup(_ref) {
-  var children = _ref.children,
-      right = _ref.right,
-      left = _ref.left;
-  return /*#__PURE__*/React__default.createElement(ButtonGroup, {
+var ControlButtonGroup = function ControlButtonGroup(_a) {
+  var children = _a.children,
+      right = _a.right,
+      left = _a.left,
+      props = __rest(_a, ["children", "right", "left"]);
+
+  return /*#__PURE__*/React__default.createElement(ButtonGroup, Object.assign({
     orientation: "horizontal",
-    fullWidth: true,
-    sx: Object.assign(Object.assign(Object.assign({}, right && {
+    fullWidth: true
+  }, props, {
+    sx: Object.assign(Object.assign(Object.assign(Object.assign({}, right && {
       borderTopLeftRadius: 0,
       borderBottomLeftRadius: 0
     }), left && {
@@ -27061,8 +27131,8 @@ var ControlButtonGroup = function ControlButtonGroup(_ref) {
       justifyContent: 'center',
       padding: '4px',
       gap: '2px'
-    })
-  }, children);
+    }), props.sx)
+  }), children);
 };
 
 /* *
@@ -27081,7 +27151,11 @@ var ControlButtonGroup = function ControlButtonGroup(_ref) {
  * 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(_ref) {
@@ -27089,6 +27163,7 @@ var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
       height = _ref.height,
       startTime = _ref.startTime,
       endTime = _ref.endTime,
+      timeStep = _ref.timeStep,
       style = _ref.style,
       locale = _ref.locale;
 
@@ -27103,15 +27178,23 @@ var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
   } // 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, {
@@ -27124,17 +27207,38 @@ var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
     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.createElement("text", {
+      x: x,
+      y: 14,
+      fill: timeSliderLite.timeline.fill,
+      textAnchor: "left",
+      fontSize: "12px",
+      key: "".concat(monthChange, "-month-change-text"),
+      style: {
+        userSelect: 'none'
+      }
+    }, label);
+  }) : null;
   var backgroundRectangles = dayLabels.map(function (label, index) {
     return /*#__PURE__*/React__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: "".concat(label, "-color")
     });
   });
-  var labels = dayLabels.map(function (label, index) {
+  var dailyLabels = !showMonthLabel ? dayLabels.map(function (label, index) {
     return /*#__PURE__*/React__default.createElement("text", {
       x: index * tickSpacing + 8 - tickOffset,
       y: 14,
@@ -27146,8 +27250,35 @@ var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
         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.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("text", Object.assign({}, defaultProps, {
+        textAnchor: "end",
+        key: "".concat(label, "-").concat(value, "-hour-label"),
+        style: {
+          userSelect: 'none'
+        }
+      }), value), /*#__PURE__*/React__default.createElement("text", Object.assign({}, defaultProps, {
+        textAnchor: "start",
+        key: "".concat(label, "-").concat(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
@@ -27166,56 +27297,7 @@ var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
     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 _bounds = _slicedToArray(bounds, 2),
-      min = _bounds[0],
-      max = _bounds[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);
 };
 
 /* *
@@ -27405,7 +27487,7 @@ var TimeSliderLiteBackground = function TimeSliderLiteBackground(_ref) {
       areaWidth = _React$useState2[0],
       setAreaWidth = _React$useState2[1];
 
-  var drawNeedle = selectedTime && areaWidth;
+  var drawNeedle = selectedTime && areaWidth && startTime < endTime;
   useLayoutEffect(function () {
     var sliderArea = sliderAreaRef.current;
     setAreaWidth(sliderArea.clientWidth - TIME_SLIDER_LITE_PADDING_RIGHT);
@@ -27431,6 +27513,7 @@ var TimeSliderLiteBackground = function TimeSliderLiteBackground(_ref) {
       position: 'absolute',
       top: 0
     },
+    timeStep: timeStep,
     width: areaWidth,
     height: height,
     startTime: startTime,
@@ -27479,7 +27562,8 @@ var StepButton = function StepButton(_ref) {
       isDisabled = _ref.isDisabled,
       _ref$onClick = _ref.onClick,
       onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
-      settings = _ref.settings;
+      settings = _ref.settings,
+      tooltipDelay = _ref.tooltipDelay;
 
   var _a, _b, _c, _d, _e, _f, _g, _h;
 
@@ -27492,7 +27576,9 @@ var StepButton = function StepButton(_ref) {
     "data-testid": "step-backward-svg-path"
   });
   return /*#__PURE__*/React.createElement(Tooltip, Object.assign({}, timeSliderLiteTooltipDefaultProps, {
-    title: forward ? forwardTitle : backwardTitle
+    title: forward ? forwardTitle : backwardTitle,
+    enterDelay: tooltipDelay,
+    enterNextDelay: tooltipDelay
   }), /*#__PURE__*/React.createElement(IconButton, Object.assign({}, timeSliderLiteButtonDefaultProps, {
     disabled: isDisabled,
     "aria-label": forward ? forwardTitle : backwardTitle,
@@ -27522,7 +27608,8 @@ var PlayButton = function PlayButton(_ref) {
   var isAnimating = _ref.isAnimating,
       isDisabled = _ref.isDisabled,
       onTogglePlayButton = _ref.onTogglePlayButton,
-      settings = _ref.settings;
+      settings = _ref.settings,
+      tooltipDelay = _ref.tooltipDelay;
 
   var _a, _b, _c, _d, _e, _f, _g, _h;
 
@@ -27531,7 +27618,10 @@ var PlayButton = function PlayButton(_ref) {
   var pauseIcon = (_f = (_e = settings === null || settings === void 0 ? void 0 : settings.icon) === null || _e === void 0 ? void 0 : _e.pause) !== null && _f !== void 0 ? _f : /*#__PURE__*/React__default.createElement(Pause, null);
   var playIcon = (_h = (_g = settings === null || settings === void 0 ? void 0 : settings.icon) === null || _g === void 0 ? void 0 : _g.play) !== null && _h !== void 0 ? _h : /*#__PURE__*/React__default.createElement(Play, null);
   return /*#__PURE__*/React__default.createElement(Tooltip, Object.assign({}, timeSliderLiteTooltipDefaultProps, {
-    title: isAnimating ? pauseTitle : playTitle
+    title: isAnimating ? pauseTitle : playTitle,
+    placement: "top",
+    enterDelay: tooltipDelay,
+    enterNextDelay: tooltipDelay
   }), /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, timeSliderLiteButtonDefaultProps, {
     sx: Object.assign(Object.assign({}, isAnimating && {
       backgroundColor: 'geowebColors.timeSliderLite.selected.backgroundColor'
@@ -27570,21 +27660,28 @@ var MenuButton = function MenuButton(_ref) {
 
   var title = (_a = settings === null || settings === void 0 ? void 0 : settings.label) !== null && _a !== void 0 ? _a : 'Animation options';
   var icon = (_b = settings === null || settings === void 0 ? void 0 : settings.icon) !== null && _b !== void 0 ? _b : /*#__PURE__*/React__default.createElement(Options, null);
-  return /*#__PURE__*/React__default.createElement(Tooltip, Object.assign({}, timeSliderLiteTooltipDefaultProps, {
-    title: title
-  }), /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, timeSliderLiteButtonDefaultProps, {
+  var Button = /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, timeSliderLiteButtonDefaultProps, {
     sx: Object.assign(Object.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.createElement(Tooltip, Object.assign({}, timeSliderLiteTooltipDefaultProps, {
+    title: title
+  }), Button);
 };
 
 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',
@@ -27623,12 +27720,14 @@ var TimeSliderLite = function TimeSliderLite(_ref) {
       _ref$timeStep = _ref.timeStep,
       timeStep = _ref$timeStep === void 0 ? TIME_SLIDER_LITE_DEFAULT_TIME_STEP : _ref$timeStep;
 
+  var _a, _b;
+
   var _useState = useState(selectedTime),
       _useState2 = _slicedToArray(_useState, 2),
       rawSelectedTime = _useState2[0],
       setRawSelectedTime = _useState2[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;
@@ -27677,12 +27776,19 @@ var TimeSliderLite = function TimeSliderLite(_ref) {
     if (isAnimating && onToggleAnimation) {
       onToggleAnimation();
     }
-  };
+  }; // Handle time range selection
+
 
+  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.createElement(Grid, {
     container: true,
     sx: Object.assign(Object.assign(Object.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 ? (_a = sx) === null || _a === void 0 ? void 0 : _a.boxShadow : undefined
     }),
     "data-testid": "timeSliderLite-".concat(mapId)
   }, isVisible ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
@@ -27705,18 +27811,21 @@ var TimeSliderLite = function TimeSliderLite(_ref) {
   }), /*#__PURE__*/React__default.createElement(PlayButton, {
     settings: settings === null || settings === void 0 ? void 0 : settings.playButton,
     isAnimating: isAnimating,
-    onTogglePlayButton: onToggleAnimation
+    onTogglePlayButton: onToggleAnimation,
+    tooltipDelay: tooltipDelay
   }), /*#__PURE__*/React__default.createElement(StepButton, {
     settings: settings === null || settings === void 0 ? void 0 : settings.stepButton,
     onClick: function onClick() {
       return handleTimeStep(-timeStepSeconds);
-    }
+    },
+    tooltipDelay: tooltipDelay
   }), /*#__PURE__*/React__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.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React__default.createElement(TimeSliderLiteBackground, {
@@ -27737,9 +27846,13 @@ var TimeSliderLite = function TimeSliderLite(_ref) {
   }), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     sx: {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      boxShadow: isVisible ? 'none' : (_b = sx) === null || _b === void 0 ? void 0 : _b.boxShadow,
+      borderRadius: isVisible ? 'none' : '4px',
       height: "".concat(height, "px")
     }
   }, hideButton || /*#__PURE__*/React__default.createElement(ControlButtonGroup, {
+    className: "timeSliderLite-hideButtonGroup-".concat(isVisible ? 'hide' : 'show'),
     right: isVisible
   }, /*#__PURE__*/React__default.createElement(HideButton, {
     settings: settings === null || settings === void 0 ? void 0 : settings.hideButton,