@opengeoweb/shared 11.0.0 → 12.0.0

package/index.esm.js

@@ -1,13 +1,13 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Box, Typography, Tooltip, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, useTheme, Drawer, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, Grid2, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Switch, Slider, ToggleButton, Menu, ListSubheader, ListItemText, ListItemIcon, styled, Select, Accordion, AccordionSummary, AccordionDetails, FormLabel, TextField, InputAdornment, Chip, Stack, debounce as debounce$1, ListItemButton, Checkbox } from '@mui/material';
-import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Resize, Admin, useThemeContext, ThemeTypes, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, ChevronDown, Search, Clear, Cached } from '@opengeoweb/theme';
+import { Box, Typography, Tooltip, IconButton, useTheme, Dialog, DialogTitle, DialogContent, DialogActions, Paper, Button, CircularProgress, Alert, AlertTitle, Drawer, Link, Avatar as Avatar$1, ClickAwayListener, MenuList, MenuItem, Grid2, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Switch, Slider, ToggleButton, Menu, ListSubheader, ListItemText, ListItemIcon, styled, Select, Accordion, AccordionSummary, AccordionDetails, FormLabel, TextField, InputAdornment, Chip, Stack, debounce as debounce$1, ListItemButton, Checkbox } from '@mui/material';
 import * as React from 'react';
 import React__default, { useRef, Component, useState } from 'react';
+import { Resize, Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Admin, useThemeContext, ThemeTypes, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, ChevronDown, Search, Clear, Cached } from '@opengeoweb/theme';
+import Draggable from 'react-draggable';
+import { Resizable } from 're-resizable';
 import 'i18next';
 import { useTranslation } from 'react-i18next';
 import { throttle, escapeRegExp, debounce } from 'lodash';
-import Draggable from 'react-draggable';
-import { Resizable } from 're-resizable';
 import * as Sentry from '@sentry/react';
 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, roundToNearestMinutes as roundToNearestMinutes$1, isBefore as isBefore$1, isAfter as isAfter$1, isValid as isValid$1, getUnixTime, fromUnixTime, set as set$1, getHours as getHours$1, startOfDay, addMinutes, addHours, setSeconds as setSeconds$1, getDay, getDayOfYear, getMonth, getWeek, getYear, isWithinInterval } from 'date-fns';
 import { configureStore } from '@reduxjs/toolkit';
@@ -35,6 +35,7 @@ var en = {
 	"shared-toggle-timeslider": "Toggle hide/show time slider",
 	"shared-timeslider-scale": "Change time slider scale (visible timespan)",
 	"shared-expand-timeslider-scale": "Expand/shrink time slider scale (visible timespan)",
+	"shared-toggle-layerinformation": "Toggle hide/show layer information",
 	"shared-mouseover-selected-time": "Mouseover to change selected time",
 	"shared-mouseover-on-off": "Mouseover switch on/off",
 	"shared-change-timestep-or-speed": "Change time step or animation speed",
@@ -95,6 +96,7 @@ var fi = {
 	"shared-toggle-timeslider": "Kytke TimeSlider näkyville/pois näkyvistä",
 	"shared-timeslider-scale": "Muuta TimeSliderin näkyvää aikaväliä",
 	"shared-expand-timeslider-scale": "Laajenna/kutista TimeSliderin mittakaavaa (näkyvää aikaväliä)",
+	"shared-toggle-layerinformation": "Kytke karttatasojen pikanäyttö näkyville/pois näkyvistä",
 	"shared-mouseover-selected-time": "Osoita ja liikuta hiirtä muuttaaksesi valittua aikaa",
 	"shared-mouseover-on-off": "Kytke hiiren vaikutus TimeSlideriin päälle/pois päältä",
 	"shared-change-timestep-or-speed": "Muuta aika-askelta tai animaation nopeutta",
@@ -155,6 +157,7 @@ var no = {
 	"shared-toggle-timeslider": "Vis/skjul tidslinje",
 	"shared-timeslider-scale": "Endre tidsseriens skala (synlig tidsperiode)",
 	"shared-expand-timeslider-scale": "Utvid/krymp tidsseriens skala (synlig tidsperiode)",
+	"shared-toggle-layerinformation": "Vis/skjul laginformasjon",
 	"shared-mouseover-selected-time": "Mouseover for å endre valgt tid",
 	"shared-mouseover-on-off": "Mouseover av/på",
 	"shared-change-timestep-or-speed": "Endre tidssteg eller animasjonsfart",
@@ -215,6 +218,7 @@ var nl = {
 	"shared-toggle-timeslider": "Timeslider verbergen/tonen",
 	"shared-timeslider-scale": "Timeslider zichtbare periode wijzigen",
 	"shared-expand-timeslider-scale": "Timeslider zichtbare periode vergroten/verkleinen",
+	"shared-toggle-layerinformation": "Laag informatie verbergen/tonen",
 	"shared-mouseover-selected-time": "Mouseover om de geselecteerde tijd te wijzigen",
 	"shared-mouseover-on-off": "Mouseover aan / uit zetten",
 	"shared-change-timestep-or-speed": "Wijzig tijdsinterval of animatiesnelheid",
@@ -748,18 +752,222 @@ var CustomIconButtonNoMemo = /*#__PURE__*/React.forwardRef(function (_ref, ref)
 });
 var CustomIconButton = /*#__PURE__*/React.memo(CustomIconButtonNoMemo);
 
-var _excluded$c = ["title", "onClose", "description", "actions", "children", "sx"];
-var CustomDialog = function CustomDialog(_ref) {
-  var title = _ref.title,
-    _onClose = _ref.onClose,
-    _ref$description = _ref.description,
-    description = _ref$description === void 0 ? '' : _ref$description,
-    _ref$actions = _ref.actions,
-    actions = _ref$actions === void 0 ? null : _ref$actions,
+var _excluded$c = ["bounds", "setIsDragging", "children", "onStop"];
+var DraggableComponent$1 = function DraggableComponent(_ref) {
+  var _ref$bounds = _ref.bounds,
+    bounds = _ref$bounds === void 0 ? 'body' : _ref$bounds,
+    setIsDragging = _ref.setIsDragging,
     children = _ref.children,
-    sx = _ref.sx,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$c);
-  return jsxs(Dialog, Object.assign({
+    onStop = _ref.onStop,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+  var onDragStart = function onDragStart(e) {
+    // This makes sure that nothing is selected during drag
+    setIsDragging && setIsDragging(true);
+    e.preventDefault();
+  };
+  var onDragStop = function onDragStop(event, pos) {
+    setIsDragging && setIsDragging(false);
+    onStop && onStop(event, pos);
+  };
+  return jsx(Draggable, Object.assign({
+    bounds: bounds
+  }, props, {
+    onStop: function onStop(event, pos) {
+      return onDragStop(event, pos);
+    },
+    enableUserSelectHack: false,
+    onStart: onDragStart,
+    children: children
+  }));
+};
+
+var _excluded$b = ["children", "onResizeStart", "onResizeStop", "size", "setSize", "minHeight", "minWidth", "enable", "nodeRef"];
+var isDraggingClassName = 'is-dragging';
+var useBoundsProps = function useBoundsProps(nodeRef) {
+  var _React$useState = React__default.useState({}),
+    boundsProps = _React$useState[0],
+    setBoundsProps = _React$useState[1];
+  React__default.useEffect(function () {
+    if (nodeRef) {
+      var _nodeRef$current;
+      setBoundsProps({
+        bounds: nodeRef == null || (_nodeRef$current = nodeRef.current) == null ? void 0 : _nodeRef$current.parentNode,
+        boundsByDirection: true
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return boundsProps;
+};
+var ResizeComponent = function ResizeComponent(_ref) {
+  var children = _ref.children,
+    _ref$onResizeStart = _ref.onResizeStart,
+    onResizeStart = _ref$onResizeStart === void 0 ? function () {} : _ref$onResizeStart,
+    _ref$onResizeStop = _ref.onResizeStop,
+    onResizeStop = _ref$onResizeStop === void 0 ? function () {} : _ref$onResizeStop,
+    size = _ref.size,
+    _ref$setSize = _ref.setSize,
+    setSize = _ref$setSize === void 0 ? function () {} : _ref$setSize,
+    _ref$minHeight = _ref.minHeight,
+    minHeight = _ref$minHeight === void 0 ? 50 : _ref$minHeight,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? 50 : _ref$minWidth,
+    _ref$enable = _ref.enable,
+    enable = _ref$enable === void 0 ? {
+      top: false,
+      right: false,
+      bottom: false,
+      left: false,
+      topRight: true,
+      bottomRight: true,
+      bottomLeft: true,
+      topLeft: true
+    } : _ref$enable,
+    nodeRef = _ref.nodeRef,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+  var theme = useTheme();
+  var onStartResize = React__default.useCallback(function (event, _direction, node) {
+    event.stopPropagation();
+    node.classList.add(isDraggingClassName);
+    var _node$getBoundingClie = node.getBoundingClientRect(),
+      width = _node$getBoundingClie.width,
+      height = _node$getBoundingClie.height;
+    setSize({
+      width: width,
+      height: height
+    });
+    // fix for when initial maxHeight gets cleared
+    // eslint-disable-next-line no-param-reassign
+    node.style.height = height + "px";
+    onResizeStart();
+  }, [onResizeStart, setSize]);
+  var onStopResize = React__default.useCallback(function (event, direction, node, delta) {
+    node.classList.remove(isDraggingClassName);
+    if (!size) {
+      return;
+    }
+    var width = parseInt(size.width, 10) + delta.width;
+    var height = parseInt(size.height, 10) + delta.height;
+    setSize({
+      width: width,
+      height: height
+    });
+    onResizeStop(event, direction, node, delta);
+  }, [setSize, onResizeStop, size]);
+  var boundsProps = useBoundsProps(nodeRef);
+  return jsx(Resizable, Object.assign({
+    minHeight: minHeight,
+    minWidth: minWidth,
+    size: size,
+    onResizeStop: onStopResize
+  }, boundsProps, {
+    handleComponent: {
+      bottomRight: jsx(Resize, {
+        style: {
+          fill: "" + theme.palette.geowebColors.buttons.flat["default"].color
+        },
+        sx: {
+          display: 'none'
+        },
+        className: "resizableHandle"
+      }),
+      bottomLeft: jsx(Resize, {
+        isRightAligned: true,
+        style: {
+          fill: "" + theme.palette.geowebColors.buttons.flat["default"].color
+        },
+        sx: {
+          display: 'none'
+        },
+        className: "resizableHandle"
+      })
+    },
+    enable: enable,
+    onResizeStart: onStartResize
+  }, props, {
+    children: children
+  }));
+};
+
+var _excluded$a = ["defaultSize", "onResizeStop", "hasLayout"],
+  _excluded2$2 = ["title", "onClose", "description", "actions", "children", "sx", "resizableDefaultSize", "isResizable", "hasLayout", "shouldRenderInline", "slotProps"];
+var PaperComponent = function PaperComponent(_ref) {
+  var _ref$defaultSize = _ref.defaultSize,
+    defaultSize = _ref$defaultSize === void 0 ? {
+      width: 'auto',
+      height: undefined
+    } : _ref$defaultSize,
+    onResize = _ref.onResizeStop,
+    _ref$hasLayout = _ref.hasLayout,
+    hasLayout = _ref$hasLayout === void 0 ? true : _ref$hasLayout,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+  var maxWidth = '98%';
+  var maxHeight = '98%';
+  return jsx(ResizeComponent, Object.assign({
+    size: defaultSize,
+    maxWidth: maxWidth,
+    maxHeight: maxHeight,
+    minHeight: 120,
+    minWidth: 280,
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, onResize && {
+    onResizeStop: function onResizeStop(_event, _direction, elementRef) {
+      var _elementRef$getBoundi = elementRef.getBoundingClientRect(),
+        width = _elementRef$getBoundi.width,
+        height = _elementRef$getBoundi.height;
+      onResize({
+        width: width,
+        height: height
+      });
+    }
+  }, {
+    enable: {
+      top: true,
+      right: true,
+      bottom: true,
+      left: true,
+      topRight: true,
+      bottomRight: true,
+      bottomLeft: true,
+      topLeft: true
+    },
+    children: hasLayout ? jsx(Paper, Object.assign({}, props, {
+      sx: {
+        margin: '0px!important',
+        width: '100%!important',
+        height: '100%!important',
+        maxHeight: '100%!important',
+        maxWidth: '100%!important'
+      }
+    })) : props.children
+  }));
+};
+var CustomDialog = function CustomDialog(_ref2) {
+  var title = _ref2.title,
+    _onClose = _ref2.onClose,
+    _ref2$description = _ref2.description,
+    description = _ref2$description === void 0 ? '' : _ref2$description,
+    _ref2$actions = _ref2.actions,
+    actions = _ref2$actions === void 0 ? null : _ref2$actions,
+    children = _ref2.children,
+    sx = _ref2.sx,
+    resizableDefaultSize = _ref2.resizableDefaultSize,
+    _ref2$isResizable = _ref2.isResizable,
+    isResizable = _ref2$isResizable === void 0 ? false : _ref2$isResizable,
+    _ref2$hasLayout = _ref2.hasLayout,
+    hasLayout = _ref2$hasLayout === void 0 ? true : _ref2$hasLayout,
+    _ref2$shouldRenderInl = _ref2.shouldRenderInline,
+    shouldRenderInline = _ref2$shouldRenderInl === void 0 ? false : _ref2$shouldRenderInl,
+    slotProps = _ref2.slotProps,
+    other = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
+  var _React$useState = React.useState(resizableDefaultSize),
+    size = _React$useState[0],
+    setSize = _React$useState[1];
+  return jsx(Dialog, Object.assign({
     "data-testid": "customDialog",
     PaperProps: {
       sx: Object.assign({
@@ -772,58 +980,82 @@ var CustomDialog = function CustomDialog(_ref) {
     onClose: function onClose() {
       _onClose('CLOSED');
     },
-    "aria-labelledby": "dialog-title"
-  }, other, {
-    children: [jsxs(DialogTitle, {
-      id: "dialog-title",
-      sx: {
-        zIndex: 1,
-        padding: 2,
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center'
+    "aria-labelledby": "dialog-title",
+    slotProps: Object.assign({}, slotProps, isResizable && {
+      paper: {
+        defaultSize: size,
+        onResizeStop: setSize,
+        hasLayout: hasLayout
+      }
+    }, shouldRenderInline && {
+      root: {
+        style: {
+          position: 'absolute'
+        }
       },
-      children: [jsx(Typography, {
+      backdrop: {
+        style: {
+          position: 'absolute'
+        }
+      }
+    })
+  }, isResizable && {
+    PaperComponent: PaperComponent
+  }, shouldRenderInline && {
+    disablePortal: true
+  }, other, {
+    children: hasLayout ? jsxs(Fragment, {
+      children: [jsxs(DialogTitle, {
+        id: "dialog-title",
         sx: {
-          fontSize: '16px',
-          fontWeight: 500
+          zIndex: 1,
+          padding: 2,
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center'
         },
-        "data-testid": "customDialog-title",
-        component: "span",
-        children: title
-      }), jsx(CustomIconButton, {
-        "data-testid": "customDialog-close",
-        "aria-label": "close",
-        onClick: function onClick() {
-          return _onClose('CLOSED');
+        children: [jsx(Typography, {
+          sx: {
+            fontSize: '16px',
+            fontWeight: 500
+          },
+          "data-testid": "customDialog-title",
+          component: "span",
+          children: title
+        }), jsx(CustomIconButton, {
+          "data-testid": "customDialog-close",
+          "aria-label": "close",
+          onClick: function onClick() {
+            return _onClose('CLOSED');
+          },
+          sx: {
+            '&.MuiIconButton-root': {
+              color: 'geowebColors.greys.accessible'
+            }
+          },
+          children: jsx(Close, {
+            "data-testid": "CloseIcon"
+          })
+        })]
+      }), jsxs(DialogContent, {
+        sx: {
+          padding: '8px 16px'
         },
+        children: [description && jsx(Typography, {
+          variant: "body1",
+          children: description
+        }), children]
+      }), jsx(DialogActions, {
         sx: {
-          '&.MuiIconButton-root': {
-            color: 'geowebColors.greys.accessible'
+          padding: 2,
+          flexDirection: {
+            xs: 'column',
+            sm: 'row'
           }
         },
-        children: jsx(Close, {
-          "data-testid": "CloseIcon"
-        })
+        children: actions
       })]
-    }), jsxs(DialogContent, {
-      sx: {
-        padding: '8px 16px'
-      },
-      children: [description && jsx(Typography, {
-        variant: "body1",
-        children: description
-      }), children]
-    }), jsx(DialogActions, {
-      sx: {
-        padding: 2,
-        flexDirection: {
-          xs: 'column',
-          sm: 'row'
-        }
-      },
-      children: actions
-    })]
+    }) : children
   }));
 };
 
@@ -849,8 +1081,6 @@ var useSharedTranslation = function useSharedTranslation() {
   return useTranslation([SHARED_NAMESPACE]);
 };
 
-var _excluded$b = ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content", "disableAutoFocus", "isLoading"],
-  _excluded2$1 = ["catchOnCancel"];
 var confirmStyle = {
   width: {
     xs: '100%',
@@ -869,6 +1099,67 @@ var confirmStyle = {
     sm: 0
   }
 };
+var ConfirmationButtons = function ConfirmationButtons(_ref) {
+  var onClose = _ref.onClose,
+    cancelLabel = _ref.cancelLabel,
+    isLoading = _ref.isLoading,
+    onSubmit = _ref.onSubmit,
+    disableAutoFocus = _ref.disableAutoFocus,
+    confirmLabel = _ref.confirmLabel;
+  var _useSharedTranslation = useSharedTranslation(),
+    t = _useSharedTranslation.t;
+  return jsxs(Fragment, {
+    children: [jsx(Button, {
+      "data-testid": "confirmationDialog-cancel",
+      variant: "tertiary",
+      sx: function sx(theme) {
+        return {
+          width: {
+            xs: '100%',
+            sm: '150px'
+          },
+          '&:focus': {
+            outline: theme.palette.geowebColors.buttons.primary.focus.outline,
+            borderColor: 'transparent'
+          }
+        };
+      },
+      onClick: function onClick() {
+        return onClose('CANCELLED');
+      },
+      children: cancelLabel != null ? cancelLabel : t('shared-confirmation-cancel')
+    }), isLoading ? jsx(Box, {
+      "data-testid": "confirm-dialog-spinner",
+      sx: Object.assign({}, confirmStyle, {
+        height: '40px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }),
+      children: jsx(CircularProgress, {
+        size: 40,
+        color: "secondary"
+      })
+    }) : jsx(Button, {
+      "data-testid": "confirmationDialog-confirm",
+      variant: "primary",
+      sx: function sx(theme) {
+        return Object.assign({}, confirmStyle, {
+          '&:focus': {
+            outline: theme.palette.geowebColors.buttons.primary.focus.outline,
+            borderColor: 'transparent'
+          }
+        });
+      },
+      onClick: onSubmit,
+      autoFocus: !disableAutoFocus,
+      children: confirmLabel != null ? confirmLabel : t('shared-confirmation-submit')
+    })]
+  });
+};
+
+var _excluded$9 = ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content", "disableAutoFocus", "isLoading"],
+  _excluded2$1 = ["catchOnCancel"];
 var ConfirmationDialog = function ConfirmationDialog(_ref) {
   var open = _ref.open,
     title = _ref.title,
@@ -883,7 +1174,7 @@ var ConfirmationDialog = function ConfirmationDialog(_ref) {
     disableAutoFocus = _ref$disableAutoFocus === void 0 ? false : _ref$disableAutoFocus,
     _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   other.catchOnCancel;
     var rest = _objectWithoutPropertiesLoose(other, _excluded2$1); // remove unwanted props
   var _useSharedTranslation = useSharedTranslation(),
@@ -894,55 +1185,13 @@ var ConfirmationDialog = function ConfirmationDialog(_ref) {
     title: title,
     description: description != null ? description : t('shared-confirmation-description'),
     onClose: onClose,
-    actions: jsxs(Fragment, {
-      children: [jsx(Button, {
-        "data-testid": "confirmationDialog-cancel",
-        variant: "tertiary",
-        // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-        sx: function sx(theme) {
-          return {
-            width: {
-              xs: '100%',
-              sm: '150px'
-            },
-            '&:focus': {
-              outline: theme.palette.geowebColors.buttons.primary.focus.outline,
-              borderColor: 'transparent'
-            }
-          };
-        },
-        onClick: function onClick() {
-          return onClose('CANCELLED');
-        },
-        children: cancelLabel != null ? cancelLabel : t('shared-confirmation-cancel')
-      }), isLoading ? jsx(Box, {
-        "data-testid": "confirm-dialog-spinner",
-        sx: Object.assign({}, confirmStyle, {
-          height: '40px',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center'
-        }),
-        children: jsx(CircularProgress, {
-          size: 40,
-          color: "secondary"
-        })
-      }) : jsx(Button, {
-        "data-testid": "confirmationDialog-confirm",
-        variant: "primary",
-        // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-        sx: function sx(theme) {
-          return Object.assign({}, confirmStyle, {
-            '&:focus': {
-              outline: theme.palette.geowebColors.buttons.primary.focus.outline,
-              borderColor: 'transparent'
-            }
-          });
-        },
-        onClick: onSubmit,
-        autoFocus: !disableAutoFocus,
-        children: confirmLabel != null ? confirmLabel : t('shared-confirmation-submit')
-      })]
+    actions: jsx(ConfirmationButtons, {
+      onClose: onClose,
+      cancelLabel: cancelLabel,
+      isLoading: isLoading,
+      onSubmit: onSubmit,
+      disableAutoFocus: disableAutoFocus,
+      confirmLabel: confirmLabel
     })
   }, rest, {
     children: content
@@ -1625,143 +1874,6 @@ var AppHeader = function AppHeader(_ref) {
   });
 };
 
-var _excluded$a = ["bounds", "setIsDragging", "children", "onStop"];
-var DraggableComponent$1 = function DraggableComponent(_ref) {
-  var _ref$bounds = _ref.bounds,
-    bounds = _ref$bounds === void 0 ? 'body' : _ref$bounds,
-    setIsDragging = _ref.setIsDragging,
-    children = _ref.children,
-    onStop = _ref.onStop,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
-  var onDragStart = function onDragStart(e) {
-    // This makes sure that nothing is selected during drag
-    setIsDragging && setIsDragging(true);
-    e.preventDefault();
-  };
-  var onDragStop = function onDragStop(event, pos) {
-    setIsDragging && setIsDragging(false);
-    onStop && onStop(event, pos);
-  };
-  return jsx(Draggable, Object.assign({
-    bounds: bounds
-  }, props, {
-    onStop: function onStop(event, pos) {
-      return onDragStop(event, pos);
-    },
-    enableUserSelectHack: false,
-    onStart: onDragStart,
-    children: children
-  }));
-};
-
-var _excluded$9 = ["children", "onResizeStart", "onResizeStop", "size", "setSize", "minHeight", "minWidth", "enable", "nodeRef"];
-var isDraggingClassName = 'is-dragging';
-var useBoundsProps = function useBoundsProps(nodeRef) {
-  var _React$useState = React__default.useState({}),
-    boundsProps = _React$useState[0],
-    setBoundsProps = _React$useState[1];
-  React__default.useEffect(function () {
-    if (nodeRef) {
-      var _nodeRef$current;
-      setBoundsProps({
-        bounds: nodeRef == null || (_nodeRef$current = nodeRef.current) == null ? void 0 : _nodeRef$current.parentNode,
-        boundsByDirection: true
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return boundsProps;
-};
-var ResizeComponent = function ResizeComponent(_ref) {
-  var children = _ref.children,
-    _ref$onResizeStart = _ref.onResizeStart,
-    onResizeStart = _ref$onResizeStart === void 0 ? function () {} : _ref$onResizeStart,
-    _ref$onResizeStop = _ref.onResizeStop,
-    onResizeStop = _ref$onResizeStop === void 0 ? function () {} : _ref$onResizeStop,
-    size = _ref.size,
-    _ref$setSize = _ref.setSize,
-    setSize = _ref$setSize === void 0 ? function () {} : _ref$setSize,
-    _ref$minHeight = _ref.minHeight,
-    minHeight = _ref$minHeight === void 0 ? 50 : _ref$minHeight,
-    _ref$minWidth = _ref.minWidth,
-    minWidth = _ref$minWidth === void 0 ? 50 : _ref$minWidth,
-    _ref$enable = _ref.enable,
-    enable = _ref$enable === void 0 ? {
-      top: false,
-      right: false,
-      bottom: false,
-      left: false,
-      topRight: true,
-      bottomRight: true,
-      bottomLeft: true,
-      topLeft: true
-    } : _ref$enable,
-    nodeRef = _ref.nodeRef,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
-  var theme = useTheme();
-  var onStartResize = React__default.useCallback(function (event, _direction, node) {
-    event.stopPropagation();
-    node.classList.add(isDraggingClassName);
-    var _node$getBoundingClie = node.getBoundingClientRect(),
-      width = _node$getBoundingClie.width,
-      height = _node$getBoundingClie.height;
-    setSize({
-      width: width,
-      height: height
-    });
-    // fix for when initial maxHeight gets cleared
-    // eslint-disable-next-line no-param-reassign
-    node.style.height = height + "px";
-    onResizeStart();
-  }, [onResizeStart, setSize]);
-  var onStopResize = React__default.useCallback(function (event, direction, node, delta) {
-    node.classList.remove(isDraggingClassName);
-    if (!size) {
-      return;
-    }
-    var width = parseInt(size.width, 10) + delta.width;
-    var height = parseInt(size.height, 10) + delta.height;
-    setSize({
-      width: width,
-      height: height
-    });
-    onResizeStop(event, direction, node, delta);
-  }, [setSize, onResizeStop, size]);
-  var boundsProps = useBoundsProps(nodeRef);
-  return jsx(Resizable, Object.assign({
-    minHeight: minHeight,
-    minWidth: minWidth,
-    size: size,
-    onResizeStop: onStopResize
-  }, boundsProps, {
-    handleComponent: {
-      bottomRight: jsx(Resize, {
-        style: {
-          fill: "" + theme.palette.geowebColors.buttons.flat["default"].color
-        },
-        sx: {
-          display: 'none'
-        },
-        className: "resizableHandle"
-      }),
-      bottomLeft: jsx(Resize, {
-        isRightAligned: true,
-        style: {
-          fill: "" + theme.palette.geowebColors.buttons.flat["default"].color
-        },
-        sx: {
-          display: 'none'
-        },
-        className: "resizableHandle"
-      })
-    },
-    enable: enable,
-    onResizeStart: onStartResize
-  }, props, {
-    children: children
-  }));
-};
-
 // TODO: (Sander de Snaijer 2020-07-13) this error wrappper should get more (non-breaking?) logic when we have decided how to handle errors.
 /**
  * ErrorBoundary
@@ -2002,12 +2114,20 @@ var MenuItemTheme = function MenuItemTheme(_ref) {
               checked: (namedTheme == null ? void 0 : namedTheme.name) === ThemeTypes.DARK_THEME
             }),
             label: t('shared-dark')
-          }), enableSpecialThemes && jsx(FormControlLabel, {
-            value: ThemeTypes.XMAS2024_THEME,
-            control: jsx(Radio, {
-              checked: (namedTheme == null ? void 0 : namedTheme.name) === ThemeTypes.XMAS2024_THEME
-            }),
-            label: t('shared-xmas') + " 2024"
+          }), enableSpecialThemes && jsxs(Fragment, {
+            children: [jsx(FormControlLabel, {
+              value: ThemeTypes.DEMO_THEME,
+              control: jsx(Radio, {
+                checked: (namedTheme == null ? void 0 : namedTheme.name) === ThemeTypes.DEMO_THEME
+              }),
+              label: "Demo"
+            }), jsx(FormControlLabel, {
+              value: ThemeTypes.XMAS2024_THEME,
+              control: jsx(Radio, {
+                checked: (namedTheme == null ? void 0 : namedTheme.name) === ThemeTypes.XMAS2024_THEME
+              }),
+              label: t('shared-xmas') + " 2024"
+            })]
           })]
         })
       })]
@@ -2858,6 +2978,12 @@ var ShortcutList = function ShortcutList(_ref) {
         children: jsx(ArrowLeft, {})
       })]
     })
+  }, {
+    titleKey: 'shared-toggle-layerinformation',
+    description: jsx(ShortCutSegment, {
+      type: "icon",
+      children: "D"
+    })
   }, {
     titleKey: 'shared-change-layer-values-scrolling',
     description: jsxs(Fragment, {
@@ -5882,4 +6008,4 @@ var PresetScope = Object.assign({}, SystemScope, {
   shared: 'shared'
 });
 
-export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, CanvasComponent, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEBOUNCE_TIMEOUT, DEFAULT_ERROR_MESSAGE, DEFAULT_FILTER_HEIGHT, DraggableComponent$1 as Draggable, ErrorBoundary, Filter, FilterChip, FilterOption, LastUpdateTime, PROJECTION, PresetScope, ResizeComponent as Resizable, SHARED_NAMESPACE, SearchField$1 as SearchField, SearchFieldButton, SearchHighlight, StatusTag, StorybookDocsWrapper, SwitchButton, SystemScope, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, UserMenuItemSentryRecording, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, createToolkitMockStore, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getLastUpdateTitle, getPosition, getWarningMessage, isAxiosAuthError, isAxiosError, pollingIntervalTimeout, renderCounter, sharedTranslations, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDebounce, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, useWheelStopPropagation };
+export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, CanvasComponent, ConfirmationButtons, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEBOUNCE_TIMEOUT, DEFAULT_ERROR_MESSAGE, DEFAULT_FILTER_HEIGHT, DraggableComponent$1 as Draggable, ErrorBoundary, Filter, FilterChip, FilterOption, LastUpdateTime, PROJECTION, PresetScope, ResizeComponent as Resizable, SHARED_NAMESPACE, SearchField$1 as SearchField, SearchFieldButton, SearchHighlight, StatusTag, StorybookDocsWrapper, SwitchButton, SystemScope, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, UserMenuItemSentryRecording, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, createToolkitMockStore, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getLastUpdateTitle, getPosition, getWarningMessage, isAxiosAuthError, isAxiosError, pollingIntervalTimeout, renderCounter, sharedTranslations, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDebounce, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, useWheelStopPropagation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "11.0.0",
+  "version": "12.0.0",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -8,22 +8,25 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/theme": "*",
-    "react-draggable": "^4.4.6",
-    "re-resizable": "^6.9.11",
-    "lodash": "^4.17.21",
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.0",
+    "@mui/material": "^6.1.1",
+    "@mui/system": "6.4.6",
+    "@mui/x-date-pickers": "7.27.1",
+    "@reduxjs/toolkit": "^1.9.7",
+    "@sentry/react": "^8.34.0",
+    "@storybook/react": "8.4.2",
+    "@testing-library/react": "16.0.1",
+    "@testing-library/user-event": "14.5.2",
     "axios": "^1.7.7",
     "date-fns": "^4.1.0",
-    "@reduxjs/toolkit": "^1.9.7",
-    "react-i18next": "^15.1.1",
     "i18next": "^23.11.5",
-    "@sentry/react": "^8.34.0",
-    "@mui/material": "^6.1.1"
-  },
-  "peerDependencies": {
-    "react": "18",
-    "@emotion/react": "*",
-    "@emotion/styled": "*"
+    "jest-date-mock": "1.0.10",
+    "lodash": "^4.17.21",
+    "re-resizable": "^6.9.11",
+    "react": "18.3.1",
+    "react-draggable": "^4.4.6",
+    "react-i18next": "^15.1.1"
   },
   "module": "./index.esm.js",
   "type": "module",

package/src/lib/components/ConfirmationDialog/ConfirmationButtons.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { DialogAction } from '../CustomDialog';
+export type ConfirmationAction = 'CANCELLED' | DialogAction;
+export interface ConfirmationButtonsProps {
+    confirmLabel?: string;
+    cancelLabel?: string;
+    disableAutoFocus?: boolean;
+    onSubmit: () => void;
+    onClose: (reason: ConfirmationAction) => void;
+    isLoading?: boolean;
+}
+export declare const ConfirmationButtons: React.FC<ConfirmationButtonsProps>;

package/src/lib/components/ConfirmationDialog/ConfirmationButtons.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/src/lib/components/ConfirmationDialog/ConfirmationButtons.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ConfirmationButtons } from './ConfirmationButtons';
+declare const meta: Meta<typeof ConfirmationButtons>;
+export default meta;
+type Story = StoryObj<typeof ConfirmationButtons>;
+export declare const Component: Story;
+export declare const ComponentDark: Story;
+export declare const Loading: Story;
+export declare const CustomLabels: Story;

package/src/lib/components/ConfirmationDialog/index.d.ts

@@ -1,2 +1,3 @@
 export * from './ConfirmationDialog';
 export * from './ConfirmationService';
+export { ConfirmationButtons } from './ConfirmationButtons';

package/src/lib/components/CustomDialog/CustomDialog.d.ts

@@ -1,10 +1,15 @@
 import * as React from 'react';
 import { DialogProps } from '@mui/material';
+import { Size } from '../DraggableResizable';
 export type DialogAction = 'CLOSED';
 export interface CustomDialogProps extends DialogProps {
     description?: string;
     actions?: React.ReactNode;
     onClose: (reason: DialogAction) => void;
+    isResizable?: boolean;
+    resizableDefaultSize?: Size;
+    hasLayout?: boolean;
+    shouldRenderInline?: boolean;
 }
 export declare const CustomDialog: React.FC<CustomDialogProps>;
 export default CustomDialog;

package/src/lib/components/CustomDialog/CustomDialog.stories.d.ts

@@ -1,13 +1,16 @@
 import * as React from 'react';
+import type { StoryObj } from '@storybook/react';
+import { CustomDialog } from './CustomDialog';
 declare const _default: {
     title: string;
-};
-export default _default;
-export declare const CustomDialogLight: {
-    (): React.ReactElement;
-    tags: string[];
-};
-export declare const CustomDialogDark: {
-    (): React.ReactElement;
+    component: React.FC<import("./CustomDialog").CustomDialogProps>;
     tags: string[];
 };
+export default _default;
+type Story = StoryObj<typeof CustomDialog>;
+export declare const CustomDialogLight: Story;
+export declare const CustomDialogDark: Story;
+export declare const CustomDialogResizable: Story;
+export declare const CustomDialogResizableWithInitialSize: Story;
+export declare const CustomDialogRenderInline: Story;
+export declare const CustomDialogResizableNoLayout: Story;

package/src/lib/types/types.d.ts

@@ -33,6 +33,7 @@ export interface ConfigType {
     GW_FEATURE_DISPLAY_SEARCH_ON_MAP?: boolean;
     GW_FEATURE_INITIALIZE_SENTRY?: boolean;
     GW_FEATURE_ENABLE_SPECIAL_THEMES?: boolean;
+    GW_FEATURE_TAF_AUTOTAF_ENABLED?: boolean;
     GW_LANGUAGE?: string;
 }
 export interface TimeSeriesService {
@@ -80,6 +81,10 @@ export interface PlotParameter {
     collectionId: string;
     instanceId?: string;
     instances?: EDRInstance[];
+    dimension?: {
+        id: string;
+        value: string;
+    };
 }
 export type PlotType = 'bar' | 'line' | 'scatter';
 export interface EDRInstance {
@@ -115,3 +120,8 @@ export interface EDRInstance {
         };
     };
 }
+export interface TimeSeriesPresetLocation {
+    lat: number;
+    lon: number;
+    name: string;
+}