@opengeoweb/shared 9.8.0 → 9.10.0

package/index.esm.js

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import React__default, { useRef } from 'react';
+import React__default, { useRef, Component } from 'react';
 import { Box, Typography, Tooltip, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, useTheme, Drawer, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, Grid, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Menu, ListSubheader, ListItemText, ListItemIcon, Select, Accordion, AccordionSummary, AccordionDetails, FormLabel, Switch, TextField, InputAdornment } from '@mui/material';
 import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Resize, useThemeContext, DragHandle, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, ChevronDown, Search, Clear, Cached } from '@opengeoweb/theme';
 import { throttle, escapeRegExp, debounce } from 'lodash';
 import Draggable from 'react-draggable';
 import { Resizable } from 're-resizable';
 import { useStore } from 'react-redux';
-import { parseISO, parse, format, isEqual, add as add$1, sub as sub$1, differenceInMinutes as differenceInMinutes$1, differenceInHours as differenceInHours$1, isBefore as isBefore$1, isAfter as isAfter$1, isValid as isValid$1, getUnixTime, fromUnixTime, set as set$1, startOfDay } from 'date-fns';
+import { parseISO, parse, format, isEqual, add as add$1, sub as sub$1, differenceInYears as differenceInYears$1, differenceInMonths as differenceInMonths$1, differenceInDays as differenceInDays$1, differenceInMinutes as differenceInMinutes$1, differenceInHours as differenceInHours$1, differenceInSeconds as differenceInSeconds$1, isBefore as isBefore$1, isAfter as isAfter$1, isValid as isValid$1, getUnixTime, fromUnixTime, set as set$1, startOfDay, isWithinInterval } from 'date-fns';
 import configureStore from 'redux-mock-store';
 import { configureStore as configureStore$1 } from '@reduxjs/toolkit';
 
@@ -259,6 +259,57 @@ function _nonIterableSpread() {
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _createForOfIteratorHelper(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (!it) {
+    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+      if (it) o = it;
+      var i = 0;
+      var F = function () {};
+      return {
+        s: F,
+        n: function () {
+          if (i >= o.length) return {
+            done: true
+          };
+          return {
+            done: false,
+            value: o[i++]
+          };
+        },
+        e: function (e) {
+          throw e;
+        },
+        f: F
+      };
+    }
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+  var normalCompletion = true,
+    didErr = false,
+    err;
+  return {
+    s: function () {
+      it = it.call(o);
+    },
+    n: function () {
+      var step = it.next();
+      normalCompletion = step.done;
+      return step;
+    },
+    e: function (e) {
+      didErr = true;
+      err = e;
+    },
+    f: function () {
+      try {
+        if (!normalCompletion && it.return != null) it.return();
+      } finally {
+        if (didErr) throw err;
+      }
+    }
+  };
+}
 
 var defaultDelay = 1000;
 var useControlledTooltip = function useControlledTooltip() {
@@ -1113,9 +1164,16 @@ var DraggableComponent$1 = function DraggableComponent(_a) {
     bounds = _a$bounds === void 0 ? 'body' : _a$bounds,
     children = _a.children,
     props = __rest(_a, ["bounds", "children"]);
+  var onDragStart = function onDragStart(e) {
+    // This makes sure that nothing is selected during drag
+    e.preventDefault();
+  };
   return /*#__PURE__*/React__default.createElement(Draggable, Object.assign({
     bounds: bounds
-  }, props), children);
+  }, props, {
+    enableUserSelectHack: false,
+    onStart: onDragStart
+  }), children);
 };
 
 /* *
@@ -2879,7 +2937,9 @@ var TooltipSelect = function TooltipSelect(_a) {
     isEnabled = _a.isEnabled,
     noStyling = _a.noStyling,
     hasBackgroundColor = _a.hasBackgroundColor,
-    props = __rest(_a, ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "requiresCtrlToChange", "isEnabled", "noStyling", "hasBackgroundColor"]);
+    _a$variant = _a.variant,
+    variant = _a$variant === void 0 ? 'standard' : _a$variant,
+    props = __rest(_a, ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "requiresCtrlToChange", "isEnabled", "noStyling", "hasBackgroundColor", "variant"]);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     selectOpen = _React$useState2[0],
@@ -2929,7 +2989,7 @@ var TooltipSelect = function TooltipSelect(_a) {
     placement: "top",
     open: tooltipOpen
   }, /*#__PURE__*/React.createElement(Select, Object.assign({
-    variant: "standard",
+    variant: variant,
     disableUnderline: true,
     onOpen: onOpen,
     onClose: onClose,
@@ -3316,6 +3376,366 @@ var LastUpdateTime = function LastUpdateTime(_ref) {
   }, /*#__PURE__*/React__default.createElement(Cached, null)));
 };
 
+var CanvasComponent = /*#__PURE__*/function (_Component) {
+  _inherits(CanvasComponent, _Component);
+  function CanvasComponent(props) {
+    var _this;
+    _classCallCheck(this, CanvasComponent);
+    _this = _callSuper(this, CanvasComponent, [props]);
+    _this.canvas = null;
+    _this.ctx = null;
+    _this.currentWidth = 1;
+    _this.currentHeight = 1;
+    _this.canvascontaineroutside = null;
+    _this.canvascontainer = null;
+    _this.timer = null;
+    _this.redrawTimer = null;
+    _this.loopHasStarted = false;
+    _this.mounted = false;
+    _this.updateCanvas = _this.updateCanvas.bind(_assertThisInitialized(_this));
+    _this.handleMouseMoveEvent = _this.handleMouseMoveEvent.bind(_assertThisInitialized(_this));
+    _this.handleMouseUpEvent = _this.handleMouseUpEvent.bind(_assertThisInitialized(_this));
+    _this.handleMouseDownEvent = _this.handleMouseDownEvent.bind(_assertThisInitialized(_this));
+    _this.resize = _this.resize.bind(_assertThisInitialized(_this));
+    _this._handleWindowResize = _this._handleWindowResize.bind(_assertThisInitialized(_this));
+    _this.handleClickEvent = _this.handleClickEvent.bind(_assertThisInitialized(_this));
+    _this.handleWheelEvent = _this.handleWheelEvent.bind(_assertThisInitialized(_this));
+    _this.handleTouchStartEvent = _this.handleTouchStartEvent.bind(_assertThisInitialized(_this));
+    _this.handleTouchEndEvent = _this.handleTouchEndEvent.bind(_assertThisInitialized(_this));
+    _this.handleTouchMoveEvent = _this.handleTouchMoveEvent.bind(_assertThisInitialized(_this));
+    _this.onKeyUp = _this.onKeyUp.bind(_assertThisInitialized(_this));
+    _this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
+    _this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this));
+    _this.startLoop = _this.startLoop.bind(_assertThisInitialized(_this));
+    _this._documentKeyDown = _this._documentKeyDown.bind(_assertThisInitialized(_this));
+    _this._isFocussed = false;
+    _this.canvas = null;
+    _this.canvascontaineroutside = /*#__PURE__*/React__default.createRef();
+    _this.canvascontainer = /*#__PURE__*/React__default.createRef();
+    return _this;
+  }
+  _createClass(CanvasComponent, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      this.mounted = true;
+      if (this.canvas) {
+        this.canvas.addEventListener('mousemove', this.handleMouseMoveEvent);
+        this.canvas.addEventListener('mouseup', this.handleMouseUpEvent);
+        this.canvas.addEventListener('mousedown', this.handleMouseDownEvent);
+        this.canvas.addEventListener('touchstart', this.handleTouchStartEvent);
+        this.canvas.addEventListener('touchend', this.handleTouchEndEvent);
+        this.canvas.addEventListener('touchmove', this.handleTouchMoveEvent);
+        this.canvas.addEventListener('wheel', this.handleWheelEvent);
+        this.canvas.addEventListener('click', this.handleClickEvent);
+        document.addEventListener('keydown', this._documentKeyDown, false);
+        this.resize();
+        this.updateCanvas();
+      }
+      var _this$props = this.props,
+        onKeyUp = _this$props.onKeyUp,
+        loopInterval = _this$props.redrawInterval;
+      if (onKeyUp) {
+        window.addEventListener('keyup', this.onKeyUp);
+      }
+      window.addEventListener('resize', this._handleWindowResize);
+      if (this.canvascontaineroutside && this.canvascontaineroutside.current && onKeyUp) {
+        this.canvascontaineroutside.current.focus();
+      }
+      this.timer = setInterval(function () {
+        _this2.resize();
+      }, 1000);
+      if (loopInterval) {
+        this.redrawTimer = setInterval(function () {
+          _this2.updateCanvas();
+        }, loopInterval);
+      }
+    }
+  }, {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate() {
+      var _this3 = this;
+      window.requestAnimationFrame(function () {
+        _this3.updateCanvas();
+      });
+      return false;
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.mounted = false;
+      window.removeEventListener('resize', this._handleWindowResize);
+      var onKeyUp = this.props.onKeyUp;
+      if (onKeyUp) {
+        window.removeEventListener('keyup', this.onKeyUp);
+      }
+      if (this.canvas) {
+        this.canvas.removeEventListener('mousedown', this.handleMouseDownEvent);
+        this.canvas.removeEventListener('mouseup', this.handleMouseUpEvent);
+        this.canvas.removeEventListener('mousemove', this.handleMouseMoveEvent);
+        this.canvas.removeEventListener('touchstart', this.handleTouchStartEvent);
+        this.canvas.removeEventListener('touchend', this.handleTouchEndEvent);
+        this.canvas.removeEventListener('touchmove', this.handleTouchMoveEvent);
+        this.canvas.removeEventListener('wheel', this.handleWheelEvent);
+        this.canvas.removeEventListener('click', this.handleClickEvent);
+        document.removeEventListener('keydown', this._documentKeyDown);
+      }
+      clearInterval(this.timer);
+      clearInterval(this.redrawTimer);
+    }
+  }, {
+    key: "handleMouseMoveEvent",
+    value: function handleMouseMoveEvent(event) {
+      var _this$props2 = this.props,
+        onMouseMove = _this$props2.onMouseMove,
+        onCanvasClick = _this$props2.onCanvasClick;
+      var x = event.offsetX;
+      var y = event.offsetY;
+      if (event.buttons === 1) {
+        onCanvasClick(x, y, this.currentWidth, this.currentHeight);
+      }
+      onMouseMove(x, y, event, this.currentWidth);
+    }
+  }, {
+    key: "handleMouseUpEvent",
+    value: function handleMouseUpEvent(event) {
+      var onMouseUp = this.props.onMouseUp;
+      var x = event.offsetX;
+      onMouseUp(x);
+    }
+  }, {
+    key: "handleMouseDownEvent",
+    value: function handleMouseDownEvent(event) {
+      var onMouseDown = this.props.onMouseDown;
+      var x = event.offsetX;
+      var y = event.offsetY;
+      onMouseDown(x, y, this.currentWidth);
+    }
+  }, {
+    key: "handleTouchStartEvent",
+    value: function handleTouchStartEvent(event) {
+      var onTouchStart = this.props.onTouchStart;
+      onTouchStart(event, this.currentWidth);
+    }
+  }, {
+    key: "handleTouchEndEvent",
+    value: function handleTouchEndEvent() {
+      var onTouchEnd = this.props.onTouchEnd;
+      onTouchEnd();
+    }
+  }, {
+    key: "handleTouchMoveEvent",
+    value: function handleTouchMoveEvent(event) {
+      var _this$props3 = this.props,
+        onTouchMove = _this$props3.onTouchMove,
+        onCanvasClick = _this$props3.onCanvasClick;
+      var touches = event && event.touches && event.touches[0];
+      if (touches && touches.clientX && touches.clientY) {
+        var x2 = event.touches[0].clientX - event.touches[0].target.offsetLeft;
+        var y2 = event.touches[0].clientY;
+        onCanvasClick(x2, y2, this.currentWidth, this.currentHeight);
+      }
+      onTouchMove(event, this.currentWidth);
+    }
+  }, {
+    key: "handleClickEvent",
+    value: function handleClickEvent(event) {
+      var onCanvasClick = this.props.onCanvasClick;
+      var x = event.offsetX;
+      var y = event.offsetY;
+      onCanvasClick(x, y, this.currentWidth, this.currentHeight);
+    }
+  }, {
+    key: "handleWheelEvent",
+    value: function handleWheelEvent(event) {
+      var onWheel = this.props.onWheel;
+      onWheel({
+        event: event,
+        deltaY: event.deltaY,
+        deltaX: event.deltaX,
+        canvasWidth: event.srcElement.width,
+        mouseX: event.offsetX
+      });
+    }
+  }, {
+    key: "onFocus",
+    value: function onFocus() {
+      var isFocussed = this.props.isFocussed;
+      this._isFocussed = true;
+      if (isFocussed) {
+        isFocussed(true);
+      }
+    }
+  }, {
+    key: "onBlur",
+    value: function onBlur() {
+      var isFocussed = this.props.isFocussed;
+      this._isFocussed = false;
+      if (isFocussed) {
+        isFocussed(false);
+      }
+    }
+  }, {
+    key: "onKeyUp",
+    value: function onKeyUp(event) {
+      var onKeyUp = this.props.onKeyUp;
+      if (onKeyUp) {
+        onKeyUp(event);
+      }
+      if (this.canvascontaineroutside && this.canvascontaineroutside.current && onKeyUp) {
+        if (event.code === 'Escape') {
+          this.canvascontaineroutside.current.focus();
+        }
+      }
+    }
+  }, {
+    key: "_documentKeyDown",
+    value: function _documentKeyDown(event) {
+      if (this._isFocussed) {
+        var onKeyDown = this.props.onKeyDown;
+        if (onKeyDown) {
+          onKeyDown(event);
+        }
+      }
+    }
+  }, {
+    key: "_handleWindowResize",
+    value: function _handleWindowResize() {
+      this.resize();
+    }
+  }, {
+    key: "startLoop",
+    value: function startLoop() {
+      var onRenderCanvas = this.props.onRenderCanvas;
+      if (this.mounted === false || this.loopHasStarted === false) {
+        return;
+      }
+      if (this.canvas) {
+        onRenderCanvas(this.ctx, this.currentWidth, this.currentHeight, this.canvas);
+      }
+      requestAnimationFrame(this.startLoop);
+    }
+  }, {
+    key: "updateCanvas",
+    value: function updateCanvas() {
+      if (!this.canvas) {
+        return;
+      }
+      var _this$props4 = this.props,
+        onRenderCanvas = _this$props4.onRenderCanvas,
+        loop = _this$props4.loop;
+      this.ctx = this.canvas.getContext('2d');
+      if (!this.ctx) {
+        return;
+      }
+      if (this.ctx.canvas.height !== this.currentHeight) {
+        this.ctx.canvas.height = this.currentHeight;
+      }
+      if (this.ctx.canvas.width !== this.currentWidth) {
+        this.ctx.canvas.width = this.currentWidth;
+      }
+      if (loop !== true) {
+        this.loopHasStarted = false;
+        onRenderCanvas(this.ctx, this.currentWidth, this.currentHeight, this.canvas);
+      } else if (this.loopHasStarted === false) {
+        this.loopHasStarted = true;
+        this.startLoop();
+      }
+    }
+  }, {
+    key: "resize",
+    value: function resize() {
+      var canvascontainer = this.canvascontainer,
+        resizeCallback = this.props.resizeCallback;
+      if (canvascontainer && canvascontainer.current) {
+        var newWidth = canvascontainer.current.clientWidth;
+        var newHeight = canvascontainer.current.clientHeight;
+        if (newWidth !== undefined && newHeight !== undefined && (this.currentWidth !== newWidth || this.currentHeight !== newHeight)) {
+          this.currentWidth = newWidth;
+          this.currentHeight = newHeight;
+          this.updateCanvas();
+          resizeCallback && resizeCallback(newWidth);
+        }
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+      this.updateCanvas();
+      this._handleWindowResize();
+      return /*#__PURE__*/React__default.createElement("div", {
+        role: "button",
+        ref: this.canvascontaineroutside,
+        tabIndex: 0,
+        onFocus: this.onFocus,
+        onBlur: this.onBlur,
+        style: {
+          height: '100%',
+          width: '100%',
+          border: 'none',
+          display: 'block',
+          overflow: 'hidden'
+        }
+      }, /*#__PURE__*/React__default.createElement("div", {
+        ref: this.canvascontainer,
+        style: {
+          minWidth: 'inherit',
+          minHeight: 'inherit',
+          width: 'inherit',
+          height: 'inherit',
+          overflow: 'hidden',
+          display: 'block',
+          border: 'none'
+        },
+        "data-testid": "canvas-container"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        style: {
+          overflow: 'visible',
+          width: 0,
+          height: 0
+        },
+        role: "presentation",
+        "aria-label": "canvas"
+      }, /*#__PURE__*/React__default.createElement("canvas", {
+        ref: function ref(canvas) {
+          _this4.canvas = canvas;
+        }
+      }))));
+    }
+  }]);
+  return CanvasComponent;
+}(Component);
+CanvasComponent.defaultProps = {
+  onRenderCanvas: function onRenderCanvas() {
+    /* intentionally left blank */
+  },
+  onCanvasClick: function onCanvasClick() {
+    /* intentionally left blank */
+  },
+  onMouseMove: function onMouseMove() {
+    /* intentionally left blank */
+  },
+  onMouseUp: function onMouseUp() {
+    /* intentionally left blank */
+  },
+  onMouseDown: function onMouseDown() {
+    /* intentionally left blank */
+  },
+  onTouchStart: function onTouchStart() {
+    /* intentionally left blank */
+  },
+  onTouchEnd: function onTouchEnd() {
+    /* intentionally left blank */
+  },
+  onTouchMove: function onTouchMove() {
+    /* intentionally left blank */
+  },
+  onWheel: function onWheel() {
+    /* intentionally left blank */
+  }
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3441,7 +3861,13 @@ var getWarningMessage = function getWarningMessage(error) {
  */
 var isoStringToDate = function isoStringToDate(input) {
   var utc = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  if (!input) {
+    return undefined;
+  }
   var parsed = parseISO(input);
+  if (!isValid(parsed)) {
+    return undefined;
+  }
   if (utc) {
     return setUTCDate(parsed);
   }
@@ -3465,12 +3891,24 @@ var isoStringToDate = function isoStringToDate(input) {
 var stringToDate = function stringToDate(input, strFormat) {
   var utc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   var referenceDate = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : new Date();
+  if (!input) {
+    return undefined;
+  }
   var parsed = parse(input, strFormat, referenceDate);
+  if (!isValid(parsed)) {
+    return undefined;
+  }
   if (utc) {
     return setUTCDate(parsed);
   }
   return parsed;
 };
+var dateToIsoString = function dateToIsoString(input) {
+  if (!input || !isValid(input)) {
+    return undefined;
+  }
+  return input.toISOString();
+};
 /**
  * Use this if you initialise a date without a timezone to set it to utc correctly
  * eg.
@@ -3486,6 +3924,9 @@ var stringToDate = function stringToDate(input, strFormat) {
  * ``` setUTCDate(new Date(2022, 10, 12, 15, 30)) ```
  */
 var setUTCDate = function setUTCDate(inDate) {
+  if (!inDate || !isValid(inDate)) {
+    return undefined;
+  }
   var utcDate = new Date(inDate);
   utcDate.setUTCFullYear(inDate.getFullYear(), inDate.getMonth(), inDate.getDate());
   utcDate.setUTCHours(inDate.getHours(), inDate.getMinutes(), inDate.getSeconds(), inDate.getMilliseconds());
@@ -3506,10 +3947,11 @@ var setUTCDate = function setUTCDate(inDate) {
 var dateToString = function dateToString(inDate) {
   var strFormat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "yyyy-MM-dd'T'HH:mm:ss'Z'";
   var utc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  if (utc) {
-    return format(new Date(inDate.getUTCFullYear(), inDate.getUTCMonth(), inDate.getUTCDate(), inDate.getUTCHours(), inDate.getUTCMinutes(), inDate.getUTCSeconds()), strFormat);
+  if (!inDate || !isValid(inDate)) {
+    return undefined;
   }
-  return format(inDate, strFormat);
+  var formattedDate = utc ? format(new Date(inDate.getUTCFullYear(), inDate.getUTCMonth(), inDate.getUTCDate(), inDate.getUTCHours(), inDate.getUTCMinutes(), inDate.getUTCSeconds()), strFormat) : format(inDate, strFormat);
+  return formattedDate;
 };
 /**
  * Find out if a date is between two other dates.
@@ -3585,6 +4027,36 @@ var add = function add(date, duration) {
 var sub = function sub(date, duration) {
   return sub$1(date, duration);
 };
+/**
+ * Finds the number of years between to dates
+ *
+ * @param dateLeft - the later date
+ * @param dateRight - the earlier date
+ * @returns {number} the number of minutes
+ */
+var differenceInYears = function differenceInYears(dateLeft, dateRight) {
+  return differenceInYears$1(dateLeft, dateRight);
+};
+/**
+ * Finds the number of months between to dates
+ *
+ * @param dateLeft - the later date
+ * @param dateRight - the earlier date
+ * @returns {number} the number of minutes
+ */
+var differenceInMonths = function differenceInMonths(dateLeft, dateRight) {
+  return differenceInMonths$1(dateLeft, dateRight);
+};
+/**
+ * Finds the number of days between to dates
+ *
+ * @param dateLeft - the later date
+ * @param dateRight - the earlier date
+ * @returns {number} the number of minutes
+ */
+var differenceInDays = function differenceInDays(dateLeft, dateRight) {
+  return differenceInDays$1(dateLeft, dateRight);
+};
 /**
  * Finds the number of minuts between to dates
  *
@@ -3607,6 +4079,16 @@ var differenceInHours = function differenceInHours(dateLeft, dateRight, rounding
     roundingMethod: roundingMethod
   }) : differenceInHours$1(dateLeft, dateRight);
 };
+/**
+ * Finds the number of seconds between to dates
+ *
+ * @param dateLeft - the later date
+ * @param dateRight - the earlier date
+ * @returns {number} the number of minutes
+ */
+var differenceInSeconds = function differenceInSeconds(dateLeft, dateRight) {
+  return differenceInSeconds$1(dateLeft, dateRight);
+};
 /**
  *
  * @param date - the date that should be before the other one to return true
@@ -3629,14 +4111,29 @@ var isAfter = function isAfter(date, dateToCompare) {
   return isAfter$1(date, dateToCompare);
 };
 /**
- * Parsing string to a date, setting tz to UTC even if it's missing
+ * Gracefully parsing string to a date, setting tz to UTC even if it's missing or input is invalid
+ * Note: use getUtcFromString() to convert a string to a date with stricter returns
  * @param dateStr - string containing date
- * @returns {Date} - Date in UTC
+ * @returns {Date} - Date in UTC, or current date when something invalid is passed.
  */
 var utc = function utc(dateStr) {
-  if (dateStr === undefined) {
+  if (!dateStr) {
     return createDate();
   }
+  if (hasOffset(dateStr)) {
+    return isoStringToDate(dateStr, false) || createDate();
+  }
+  return isoStringToDate(dateStr) || createDate();
+};
+/**
+ * Parsing string to a date. Stricter check, will return undefined when dateString is invalid.
+ * @param dateStr - string containing date
+ * @returns {Date} - Date in UTC, undefined when not valid
+ */
+var getUtcFromString = function getUtcFromString(dateStr) {
+  if (!dateStr) {
+    return undefined;
+  }
   if (hasOffset(dateStr)) {
     return isoStringToDate(dateStr, false);
   }
@@ -3652,7 +4149,7 @@ var getOffsetStr = function getOffsetStr(input) {
 };
 /**
  * Check if a date object is valid
- * @param {Date} date - date to be checked
+ * @param {Date | number} date - date to be checked
  * @returns {boolean} - True if valid
  */
 var isValid = function isValid(date) {
@@ -3695,6 +4192,25 @@ var parseCustomDateString = function parseCustomDateString(dateStr) {
   }
   return new Date(dateStr);
 };
+/**
+ * Returns Date in UTC
+ * @returns {Date} - Date in UTC
+ */
+var getNowUtc = function getNowUtc() {
+  return createDate();
+};
+/**
+ * Returns current time as string
+ * @param {string} strFormat - [default: "yyyy-MM-dd'T'HH:mm:ss'Z'"] format of string
+ * @param {boolean} utc - [default: true] true to return in utc otherwise return in local timezone
+ *
+ * @returns {string} - formatted date string
+ */
+var getCurrentTimeAsString = function getCurrentTimeAsString() {
+  var strFormat = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "yyyy-MM-dd'T'HH:mm:ss'Z'";
+  var utc = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  return dateToString(getNowUtc(), strFormat, utc);
+};
 /**
  * Set date values to a given date (by default it is assumed you are passing the new values in UTC).
  * @param date - the dater to be changed
@@ -3753,25 +4269,34 @@ var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
     isoStringToDate: isoStringToDate,
     stringToDate: stringToDate,
+    dateToIsoString: dateToIsoString,
     setUTCDate: setUTCDate,
     dateToString: dateToString,
     isBetween: isBetween,
     createDate: createDate,
     add: add,
     sub: sub,
+    differenceInYears: differenceInYears,
+    differenceInMonths: differenceInMonths,
+    differenceInDays: differenceInDays,
     differenceInMinutes: differenceInMinutes,
     differenceInHours: differenceInHours,
+    differenceInSeconds: differenceInSeconds,
     isBefore: isBefore,
     isAfter: isAfter,
     utc: utc,
+    getUtcFromString: getUtcFromString,
     isValid: isValid,
     unix: unix,
     fromUnix: fromUnix,
     parseCustomDateString: parseCustomDateString,
+    getNowUtc: getNowUtc,
+    getCurrentTimeAsString: getCurrentTimeAsString,
     set: set,
     isEqual: isEqual,
     startOfDay: startOfDay,
-    parseISO: parseISO
+    parseISO: parseISO,
+    isWithinInterval: isWithinInterval
 });
 
 /* *
@@ -3815,33 +4340,6 @@ var createToolkitMockStoreWithEggs = function createToolkitMockStoreWithEggs(sto
   return store;
 };
 
-/* *
- * 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)
- * */
-// TODO: Move to related component when doing this user story: https://gitlab.com/opengeoweb/geoweb-assets/-/issues/2955
-var getHeight = function getHeight(element) {
-  if (!element) {
-    return null;
-  }
-  var style = getComputedStyle(element);
-  var marginTop = style.marginTop ? parseInt(style.marginTop, 10) : 0;
-  var marginBottom = style.marginTop ? parseInt(style.marginBottom, 10) : 0;
-  return element.offsetHeight + marginTop + marginBottom;
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3900,4 +4398,253 @@ var RenderCounter = /*#__PURE__*/function () {
 }();
 var renderCounter = new RenderCounter();
 
-export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, BUTTON_TITLE, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEFAULT_ERROR_MESSAGE, DraggableComponent$1 as Draggable, ErrorBoundary, LastUpdateTime, ResizeComponent as Resizable, SearchField, SearchFieldButton, SearchHighlight, StatusTag, SwitchButton, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, createMockStoreWithEggs, createMockStoreWithEggsAndMiddleware, createToolkitMockStoreWithEggs, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getHeight, getInitials, getLastUpdateTitle, getPosition, getWarningMessage, isAxiosError, pollingIntervalTimeout, renderCounter, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, withEggs };
+/* *
+ * 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 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * */
+/**
+ * This class should NEVER be initialized with new Metronome(). Use the
+ * exported variable. To reset the metronome use unregisterAllTimers()
+ * to remove all existing timers followed by init() to initialize the
+ * ticks.
+ */
+var Metronome = /*#__PURE__*/function () {
+  function Metronome() {
+    _classCallCheck(this, Metronome);
+    this.tickId = 0;
+    this.step = this.step.bind(this);
+    this.isPaused = this.isPaused.bind(this);
+    this.continueTimer = this.continueTimer.bind(this);
+    this.pauseTimer = this.pauseTimer.bind(this);
+    this.toggleTimer = this.toggleTimer.bind(this);
+    this.init = this.init.bind(this);
+    this.unregisterAllTimers = this.unregisterAllTimers.bind(this);
+    this.setSpeed = this.setSpeed.bind(this);
+    this.interval = null;
+    this.init();
+    this.handleTimerTicks = null;
+    this.timers = [];
+  }
+  _createClass(Metronome, [{
+    key: "init",
+    value: function init() {
+      if (this.interval != null) {
+        clearInterval(this.interval);
+      }
+      this.interval = setInterval(this.step, 10);
+    }
+  }, {
+    key: "unregisterAllTimers",
+    value: function unregisterAllTimers() {
+      this.timers.length = 0;
+    }
+  }, {
+    key: "step",
+    value: function step() {
+      var _this = this;
+      this.tickId += 1;
+      var triggeredTimerIds = [];
+      this.timers.forEach(function (timer) {
+        // Delay in x10 ms
+        var delay = 100 / timer.hertz;
+        // Get nearest multiple of delay
+        var nearestDelay = delay * Math.floor((_this.tickId + delay / 2) / delay);
+        var distanceToDelay = _this.tickId - nearestDelay;
+        if (Math.abs(distanceToDelay) < 0.5 || distanceToDelay === -0.5) {
+          if (!timer.isPaused) {
+            timer.timerFunc && timer.timerFunc(timer.timerId, _this.tickId);
+            triggeredTimerIds.push(timer.timerId);
+          }
+        }
+      });
+      // Trigger the handleTimerTicks function with all collected timerIds
+      if (triggeredTimerIds.length > 0) {
+        this.handleTimerTicks && this.handleTimerTicks(triggeredTimerIds);
+      }
+    }
+    /**
+     * Multiple timers with varying frequencies can be made at the same
+     * time however each timerId must be unique. If you attempt to create
+     * two timers with the same timerId, the second will silently be ignored.
+     *
+     * @param timerFunc The function to be executed at the given hertz frequency
+     * @param hertz Frequency of the timer given in hertz
+     * @param timerId Id of the timer
+     * @returns Timer or nothing if no timer was created
+     */
+  }, {
+    key: "register",
+    value: function register(timerFunc, hertz, timerId) {
+      var existingTimer = this.timers.find(function (timer) {
+        return timer.timerId === timerId;
+      });
+      if (existingTimer) {
+        existingTimer.hertz = hertz;
+        existingTimer.timerFunc = timerFunc;
+        return existingTimer;
+      }
+      this.timers.push({
+        timerFunc: timerFunc,
+        hertz: hertz,
+        timerId: timerId,
+        isPaused: false
+      });
+      return this.timers.at(-1);
+    }
+    /**
+     * Unregistering a timer completely removes it, if you want to pause a
+     * timer, then use pauseTimer()
+     *
+     * @param timerId Id of the timer
+     */
+  }, {
+    key: "unregister",
+    value: function unregister(timerId) {
+      var indexToRemove = this.timers.findIndex(function (timer) {
+        return timer.timerId === timerId;
+      });
+      if (indexToRemove > -1) {
+        this.timers.splice(indexToRemove, 1);
+      }
+    }
+    /**
+     * Checks if a timer is paused
+     *
+     * @param timerId Id of the timer
+     * @returns true if the timer is paused, false if it is running
+     */
+  }, {
+    key: "isPaused",
+    value: function isPaused(timerId) {
+      var _iterator = _createForOfIteratorHelper(this.timers),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var timer = _step.value;
+          if (timer.timerId === timerId && timer.isPaused) {
+            return true;
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      return false;
+    }
+    /**
+     * Continues running a timer
+     *
+     * @param timerId Id of the timer
+     */
+  }, {
+    key: "continueTimer",
+    value: function continueTimer(timerId) {
+      var _iterator2 = _createForOfIteratorHelper(this.timers),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var timer = _step2.value;
+          if (timer.timerId === timerId) {
+            timer.isPaused = false;
+            break;
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    }
+    /**
+     * Pauses a timer
+     *
+     * @param timerId Id of the timer
+     */
+  }, {
+    key: "pauseTimer",
+    value: function pauseTimer(timerId) {
+      var _iterator3 = _createForOfIteratorHelper(this.timers),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var timer = _step3.value;
+          if (timer.timerId === timerId) {
+            timer.isPaused = true;
+            break;
+          }
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+    }
+    /**
+     * Toggles a timer to be paused or running. Be careful when asking redux
+     * to toggle a timer, it might toggle twice and therefore do nothing
+     *
+     * @param timerId Id of the timer
+     */
+  }, {
+    key: "toggleTimer",
+    value: function toggleTimer(timerId) {
+      var _iterator4 = _createForOfIteratorHelper(this.timers),
+        _step4;
+      try {
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          var timer = _step4.value;
+          if (timer.timerId === timerId) {
+            timer.isPaused = !timer.isPaused;
+            break;
+          }
+        }
+      } catch (err) {
+        _iterator4.e(err);
+      } finally {
+        _iterator4.f();
+      }
+    }
+    /**
+     * Sets the speed of a timer to a new frequency given in hertz
+     *
+     * @param timerId Id of the timer
+     * @param hertz Frequency of the timer given in hertz
+     */
+  }, {
+    key: "setSpeed",
+    value: function setSpeed(timerId, hertz) {
+      var _iterator5 = _createForOfIteratorHelper(this.timers),
+        _step5;
+      try {
+        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+          var timer = _step5.value;
+          if (timer.timerId === timerId) {
+            timer.hertz = hertz;
+            break;
+          }
+        }
+      } catch (err) {
+        _iterator5.e(err);
+      } finally {
+        _iterator5.f();
+      }
+    }
+  }]);
+  return Metronome;
+}();
+var metronome = new Metronome();
+
+export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, BUTTON_TITLE, CanvasComponent, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEFAULT_ERROR_MESSAGE, DraggableComponent$1 as Draggable, ErrorBoundary, LastUpdateTime, ResizeComponent as Resizable, SearchField, SearchFieldButton, SearchHighlight, StatusTag, SwitchButton, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, createMockStoreWithEggs, createMockStoreWithEggsAndMiddleware, createToolkitMockStoreWithEggs, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getLastUpdateTitle, getPosition, getWarningMessage, isAxiosError, metronome, pollingIntervalTimeout, renderCounter, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, withEggs };