@opengeoweb/shared 9.22.0 → 9.24.0

package/index.esm.js

@@ -1,15 +1,14 @@
 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, Grid, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Switch, Slider, ToggleButton, Menu, ListSubheader, ListItemText, ListItemIcon, Select, Accordion, AccordionSummary, AccordionDetails, FormLabel, TextField, InputAdornment } from '@mui/material';
+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, Switch, Slider, ToggleButton, Menu, ListSubheader, ListItemText, ListItemIcon, styled, Select, Accordion, AccordionSummary, AccordionDetails, FormLabel, TextField, InputAdornment, Chip, Stack, debounce as debounce$1, Checkbox, ListItemSecondaryAction } from '@mui/material';
 import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Resize, Admin, useThemeContext, DragHandle, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, ChevronDown, Search, Clear, Cached } from '@opengeoweb/theme';
 import * as React from 'react';
 import React__default, { useRef, Component } from 'react';
 import i18n from 'i18next';
-import { useTranslation } from 'react-i18next';
+import { initReactI18next, 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 { styled } from '@mui/material/styles';
 import { useStore } from 'react-redux';
 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$3, getHours as getHours$1, startOfDay, addMinutes, addHours, getDay, getDayOfYear, getMonth, getWeek, getYear, isWithinInterval } from 'date-fns';
 import configureStore from 'redux-mock-store';
@@ -64,58 +63,72 @@ var en = {
 	"shared-sentry-disable-both": "Enable HTML + Canvas recording",
 	"shared-sentry-cors-wait": "Disabled untill with and without CORS headers fetching mechanism has been implemented",
 	"shared-sentry-disclaimer": "I understand that while using canvas recording, adding a layer without correct CORS headers will cause error and make the recording to fail. A new recording without the canvas or the layer can be made after reloading the application.",
-	"shared-clear": "Clear"
+	"shared-clear": "Clear",
+	"shared-light": "Light",
+	"shared-dark": "Dark",
+	"shared-filter-all": "All",
+	"shared-filter-my-presets": "My presets",
+	"shared-filter-system-presets": "System presets",
+	"shared-filter-search": "Search",
+	"shared-only": "ONLY"
 };
 var fi = {
-	"shared-choose-app-mode": "ei käännetty",
-	"shared-cheat-sheet": "ei käännetty",
-	"shared-save": "ei käännetty",
-	"shared-viewer": "ei käännetty",
-	"shared-editor": "ei käännetty",
-	"shared-reload-page": "ei käännetty",
-	"shared-search-label": "ei käännetty",
-	"shared-last-updated": "ei käännetty",
-	"shared-click-to-refresh": "ei käännetty",
-	"shared-error-occurred": "ei käännetty",
-	"shared-confirmation-description": "ei käännetty",
-	"shared-confirmation-cancel": "ei käännetty",
-	"shared-confirmation-submit": "ei käännetty",
-	"shared-close-caps": "ei käännetty",
-	"shared-close": "ei käännetty",
-	"shared-search": "ei käännetty",
-	"shared-choose-selected-time": "ei käännetty",
-	"shared-move-selected-time": "ei käännetty",
-	"shared-move-one-step": "ei käännetty",
-	"shared-toggle-timeslider": "ei käännetty",
-	"shared-timeslider-scale": "ei käännetty",
-	"shared-expand-timeslider-scale": "ei käännetty",
-	"shared-mouseover-selected-time": "ei käännetty",
-	"shared-mouseover-on-off": "ei käännetty",
-	"shared-change-timestep-or-speed": "ei käännetty",
-	"shared-return-to-current-time": "ei käännettye",
-	"shared-change-layer-values-scrolling": "ei käännetty",
-	"shared-change-layermanager-small": "ei käännetty",
-	"shared-change-layermanager-medium": "ei käännetty",
-	"shared-change-layermanager-large": "ei käännetty",
-	"shared-shortcut-left-click": "ei käännetty",
-	"shared-shortcut-mouse-scroll-timeslider": "ei käännetty",
-	"shared-shortcut-hold-click": "ei käännetty",
-	"shared-shortcut-scroll": "ei käännetty",
-	"shared-shortcut-hover": "ei käännetty",
-	"shared-shortcut-when-active": "ei käännetty",
-	"shared-shortcut-home": "ei käännetty",
-	"shared-shortcut-mouse-scroll": "ei käännetty",
-	"shared-shortcut-or": "ei käännetty",
-	"shared-sentry-recording": "ei käännetty",
-	"shared-sentry-information": "ei käännetty",
-	"shared-sentry-enable-message": "ei käännetty",
-	"shared-sentry-disable": "ei käännetty",
-	"shared-sentry-enable": "ei käännetty",
-	"shared-sentry-enable-both": "ei käännetty",
-	"shared-sentry-disable-both": "ei käännetty",
-	"shared-sentry-cors-wait": "ei käännetty",
-	"shared-sentry-disclaimer": "ei käännetty",
-	"shared-clear": "ei käännetty"
+	"shared-choose-app-mode": "Sovelluksen väriteema",
+	"shared-cheat-sheet": "Lunttilappu",
+	"shared-save": "Tallenna",
+	"shared-viewer": "Katselu",
+	"shared-editor": "Muokkain",
+	"shared-reload-page": "Lataa sivu uudelleen",
+	"shared-search-label": "Etsi palveluista tai lisää palvelun URL-osoite",
+	"shared-last-updated": "Päivitetty viimeksi {{time}}",
+	"shared-click-to-refresh": "Napsauta päivittääksesi",
+	"shared-error-occurred": "Hups, virhe havaittu. Ilmoita ongelmasta eteenpäin ja lataa sivu uudelleen tarvittaessa",
+	"shared-confirmation-description": "Oletko varma?",
+	"shared-confirmation-cancel": "Palaa takaisin",
+	"shared-confirmation-submit": "Lähetä",
+	"shared-close-caps": "SULJE",
+	"shared-close": "Sulje",
+	"shared-search": "Etsi",
+	"shared-choose-selected-time": "Valitse valittu aika",
+	"shared-move-selected-time": "Liiku ajassa taaksepäin/eteenpäin",
+	"shared-move-one-step": "Liiku 1 askel ajassa taaksepäin/eteenpäin",
+	"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-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",
+	"shared-return-to-current-time": "Palaa nykyhetkeen",
+	"shared-change-layer-values-scrolling": "Muuta Layer Managerin arvoja vierittämällä hiirtä",
+	"shared-change-layermanager-small": "Muuta Layer Managerin kokoa pieneksi",
+	"shared-change-layermanager-medium": "Muuta Layer Managerin kokoa keskikokoiseksi",
+	"shared-change-layermanager-large": "Muuta Layer Managerin kokoa suureksi",
+	"shared-shortcut-left-click": "Napsauta TimeSlider aikajanaa hiiren vasemmalla painikkeella",
+	"shared-shortcut-mouse-scroll-timeslider": "Vieritä hiiren rullaa TimeSlider aikajanana päällä",
+	"shared-shortcut-hold-click": "Napsauta aikajanaa hiiren vasemmalla painikkeella ja raahaa vasemmalle tai oikealle",
+	"shared-shortcut-scroll": "+ vieritä hiiren rullaa TimeSlider aikajanan päällä",
+	"shared-shortcut-hover": "Vie hiiri TimeSlider aikajanan tai ajan esittäjän päälle",
+	"shared-shortcut-when-active": "kun aikajana on aktiivinen",
+	"shared-shortcut-home": "Koti",
+	"shared-shortcut-mouse-scroll": "+ hiiren rulla",
+	"shared-shortcut-or": "tai",
+	"shared-sentry-recording": "Sentry Tallennus",
+	"shared-sentry-information": "Geoweb tallentaa tietoja sovelluksen käytöstä monitoroidakseen suorituskykyä, sekä virhetilanteita. Arkaluonteista dataa ei kerätä tai lähetetä.",
+	"shared-sentry-enable-message": "Ymmärrän, että laittamalla tallennuksen päälle tallennukseen liittyvää dataa lähetetään Sentryn palvelimille.",
+	"shared-sentry-disable": "Laita HTML tallennus pois päältä",
+	"shared-sentry-enable": "Laita HTML tallennus päälle",
+	"shared-sentry-enable-both": "Laita HTML + Canvas tallennus päälle",
+	"shared-sentry-disable-both": "Laita HTML + Canvas tallennus pois päältä",
+	"shared-sentry-cors-wait": "Ominaisuus kytketty pois päältä, kunnes sovelluksen latausprosessit tukevat CORS headerien puuttumista.",
+	"shared-sentry-disclaimer": "Ymmärrän, että käyttäessäni Canvas-tallennusta ja lisätessäni karttatason, jonka CORS headerit eivät ola kunnosa, sovelluksessa tapahtuu virhe, joka johtaa tallennnuksen epäonnistumiseen. Uuden tallennuksen voi tehdä ilman Canvaksen tallentamista sen jälkeen, kun sovellus on ladattu uudelleen.",
+	"shared-clear": "Tyhjennä",
+	"shared-light": "Vaalea",
+	"shared-dark": "Tumma",
+	"shared-filter-all": "Kaikki",
+	"shared-filter-my-presets": "Omat presetit",
+	"shared-filter-system-presets": "Järestelmä presetit",
+	"shared-filter-search": "Etsi",
+	"shared-only": "Pelkästään"
 };
 var no = {
 	"shared-choose-app-mode": "Velg din standardmodus",
@@ -166,7 +179,14 @@ var no = {
 	"shared-sentry-disable-both": "Skru på HTML + lerret-opptak",
 	"shared-sentry-cors-wait": "Avskrudd inntil CORS-relaterte headere er implementert",
 	"shared-sentry-disclaimer": "Jeg forstår at ved å bruke lerretopptak vil opptaket feile dersom jeg legger til et lag uten riktig CORS-headere. Ved å laste inn applikasjonen på nytt kan man starte nytt opptak uten lerret eller lag.",
-	"shared-clear": "ikke oversatt"
+	"shared-clear": "Tøm",
+	"shared-light": "Lys",
+	"shared-dark": "Mørk",
+	"shared-filter-all": "Alle",
+	"shared-filter-my-presets": "Mine presets",
+	"shared-filter-system-presets": "System presets",
+	"shared-filter-search": "Søk",
+	"shared-only": "BARE"
 };
 var nl = {
 	"shared-choose-app-mode": "Kies je standaard app-modus",
@@ -217,7 +237,14 @@ var nl = {
 	"shared-sentry-disable-both": "HTML + Canvas opname starten",
 	"shared-sentry-cors-wait": "Uitgeschakeld totdat het fetching mechanisme met en zonder CORS-headers is geïmplementeerd",
 	"shared-sentry-disclaimer": "Ik begrijp dat bij het gebruik van canvasopnamen het toevoegen van een laag zonder de juiste CORS-headers fouten zal veroorzaken en ervoor zal zorgen dat de opname mislukt. Een nieuwe opname zonder het canvas of de laag kan worden gemaakt na het opnieuw laden van de applicatie.",
-	"shared-clear": "Wissen"
+	"shared-clear": "Wissen",
+	"shared-light": "Licht",
+	"shared-dark": "Donker",
+	"shared-filter-all": "Alle",
+	"shared-filter-my-presets": "Mijn presets",
+	"shared-filter-system-presets": "Systeem presets",
+	"shared-filter-search": "Zoeken",
+	"shared-only": "ALLEEN"
 };
 var sharedTranslations = {
 	en: en,
@@ -2223,9 +2250,35 @@ const CustomDialog = _a => {
 };
 
 const SHARED_NAMESPACE = 'shared';
+const initSharedI18n = () => {
+  i18n.use(initReactI18next).init({
+    lng: 'en',
+    fallbackLng: 'en',
+    ns: SHARED_NAMESPACE,
+    interpolation: {
+      escapeValue: false
+    },
+    resources: {
+      en: {
+        [SHARED_NAMESPACE]: sharedTranslations.en
+      },
+      fi: {
+        [SHARED_NAMESPACE]: sharedTranslations.fi
+      },
+      no: {
+        [SHARED_NAMESPACE]: sharedTranslations.no
+      },
+      nl: {
+        [SHARED_NAMESPACE]: sharedTranslations.nl
+      }
+    }
+  });
+};
+initSharedI18n();
 const translateKeyOutsideComponents = (key, params = undefined) => i18n.t(key, Object.assign({
   ns: SHARED_NAMESPACE
 }, params));
+const useSharedTranslation = () => useTranslation([SHARED_NAMESPACE]);
 
 const confirmStyle = {
   width: {
@@ -4796,13 +4849,13 @@ const MenuItemTheme = () => {
             control: jsx(Radio, {
               checked: !isDark
             }),
-            label: "Light"
+            label: t('shared-light')
           }), jsx(FormControlLabel, {
             value: false,
             control: jsx(Radio, {
               checked: isDark
             }),
-            label: "Dark"
+            label: t('shared-dark')
           })]
         }))
       }))]
@@ -5187,7 +5240,7 @@ const useHandleSizeFromOutsideComponent = ({
   // handle size from outside component
   React__default.useEffect(() => {
     const boundsNode = getBoundsNode();
-    if (boundsNode && lastSize.current.width && lastSize.current.height && (lastSize.current.width !== startSize.width || lastSize.current.height !== startSize.height) && typeof startSize.height === 'number' && typeof startSize.width === 'number') {
+    if (boundsNode && lastSize.current.width && lastSize.current.height && (lastSize.current.width !== startSize.width || lastSize.current.height !== startSize.height) && typeof startSize.height === 'number' && typeof startSize.width === 'number' && nodeRef.current) {
       const {
         position: newPosition,
         size: newSize
@@ -5204,7 +5257,7 @@ const useHandleSizeFromOutsideComponent = ({
     const boundsTarget = entry[0].target;
     const element = nodeRef.current;
     const boundsBbox = boundsTarget.getBoundingClientRect();
-    if (boundsBbox.height === lastSize.current.height && boundsBbox.width === lastSize.current.width || !boundsBbox.height) {
+    if (boundsBbox.height === lastSize.current.height && boundsBbox.width === lastSize.current.width || !boundsBbox.height || !element || !boundsBbox) {
       return;
     }
     const {
@@ -7732,7 +7785,7 @@ $({ target: 'RegExp', proto: true, forced: !DELEGATES_TO_EXEC }, {
 });
 
 const isURL = string => /^https?:\/\//.test(string);
-const ClearButton = ({
+const ClearButton$1 = ({
   onClick
 }) => jsx(CustomIconButton, Object.assign({
   tooltipTitle: translateKeyOutsideComponents('shared-clear'),
@@ -7763,7 +7816,7 @@ const SearchFieldButton = ({
           marginRight: '15px'
         }
       }, {
-        children: jsx(ClearButton, {
+        children: jsx(ClearButton$1, {
           onClick: () => onClickClear()
         })
       })), jsx(Button, Object.assign({
@@ -7775,7 +7828,7 @@ const SearchFieldButton = ({
     });
   }
   if (localSearchString) {
-    return jsx(ClearButton, {
+    return jsx(ClearButton$1, {
       onClick: () => onClickClear()
     });
   }
@@ -7787,7 +7840,7 @@ const SearchFieldButton = ({
   }));
 };
 
-const SearchField = ({
+const SearchField$1 = ({
   searchFilter,
   label,
   setSearchFilter,
@@ -8266,6 +8319,292 @@ CanvasComponent.defaultProps = {
   }
 };
 
+const FilterChip = ({
+  label,
+  id,
+  isSelected: _isSelected = false,
+  isDisabled: _isDisabled = false,
+  handleClick: _handleClick = () => {},
+  onAction,
+  actionIcon
+}) => {
+  const theme = useTheme();
+  const size = actionIcon && onAction ? 'medium' : 'small';
+  return jsx(Chip, {
+    size: size,
+    id: id,
+    label: label,
+    disabled: _isDisabled,
+    variant: _isSelected ? 'filled' : 'outlined',
+    color: _isSelected ? 'secondary' : 'default',
+    sx: {
+      borderColor: `${theme.palette.geowebColors.buttons.tertiary.default.borderColor}`,
+      padding: '0px 4px',
+      '& .MuiSvgIcon-root, .MuiChip-deleteIcon': {
+        fill: _isSelected ? theme.palette.geowebColors.buttons.secondary.active.color : theme.palette.geowebColors.buttons.flat.default.color,
+        color: _isSelected ? theme.palette.geowebColors.buttons.secondary.active.color : theme.palette.geowebColors.buttons.flat.default.color,
+        paddingLeft: _isSelected ? 0 : '2px'
+      },
+      '& .MuiChip-filled': {
+        border: '1px solid transparent'
+      },
+      '& .MuiChip-labelMedium': {
+        overflow: 'visible'
+      }
+    },
+    onClick: () => _handleClick(id),
+    deleteIcon: actionIcon,
+    onDelete: onAction
+  });
+};
+
+const FilterList = ({
+  filters: _filters = [],
+  onChipClick: _onChipClick = () => {},
+  isAllSelected: _isAllSelected = false
+}) => {
+  const {
+    t
+  } = useSharedTranslation();
+  return jsxs(Stack, Object.assign({
+    direction: "row",
+    spacing: 1,
+    "data-testid": "filterList",
+    className: "filter-list"
+  }, {
+    children: [jsx(FilterChip, {
+      id: "all",
+      label: t('shared-filter-all'),
+      isSelected: _isAllSelected,
+      handleClick: key => _onChipClick(key, !_isAllSelected)
+    }), _filters.map(filter => {
+      return jsx(FilterChip, {
+        id: filter.id,
+        label: t(filter.label),
+        isSelected: _isAllSelected ? false : filter.isSelected,
+        isDisabled: filter.isDisabled,
+        handleClick: key => {
+          // If they are all isSelected ensure that if one is clicked that one will be the only one set to selected
+          const selected = _isAllSelected ? true : !filter.isSelected;
+          _onChipClick(key, selected);
+        }
+      }, filter.id);
+    })]
+  }));
+};
+
+const DEBOUNCE_TIMEOUT = 300;
+const SearchButton = ({
+  label
+}) => jsx(CustomIconButton, Object.assign({
+  tooltipTitle: label,
+  edge: "end",
+  size: "large"
+}, {
+  children: jsx(Search, {})
+}));
+const ClearButton = ({
+  onClick
+}) => jsx(CustomIconButton, Object.assign({
+  tooltipTitle: "Clear",
+  edge: "end",
+  onClick: onClick,
+  size: "large"
+}, {
+  children: jsx(Clear, {})
+}));
+const SearchField = ({
+  valueChanged,
+  value: _value = ''
+}) => {
+  const [localValue, setLocalValue] = React.useState(_value);
+  const {
+    t
+  } = useSharedTranslation();
+  const label = t('shared-filter-search');
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const handleValueChangeDebounced = React.useCallback(debounce$1(valueChanged, DEBOUNCE_TIMEOUT), []);
+  return jsx(TextField, {
+    variant: "filled",
+    size: "small",
+    sx: {
+      '& input': {
+        paddingTop: '18px'
+      }
+    },
+    label: label,
+    value: localValue,
+    autoFocus: true,
+    fullWidth: true,
+    onChange: e => {
+      handleValueChangeDebounced(e.target.value);
+      setLocalValue(e.target.value);
+    },
+    InputProps: {
+      endAdornment: jsx(InputAdornment, Object.assign({
+        position: "end"
+      }, {
+        children: localValue ? jsx(ClearButton, {
+          onClick: () => {
+            setLocalValue('');
+            valueChanged('');
+          }
+        }) : jsx(SearchButton, {
+          label: label
+        })
+      }))
+    }
+  });
+};
+
+const DEFAULT_FILTER_HEIGHT = 85;
+const Filter = /*#__PURE__*/React.forwardRef((_a, ref) => {
+  var {
+      filters,
+      onClickFilterChip = () => {},
+      onSearch = () => {},
+      isAllSelected,
+      searchQuery
+    } = _a,
+    props = __rest(_a, ["filters", "onClickFilterChip", "onSearch", "isAllSelected", "searchQuery"]);
+  return jsx(Box, Object.assign({
+    sx: Object.assign({
+      marginBottom: '8px'
+    }, props.sx),
+    ref: ref
+  }, {
+    children: jsxs(Stack, Object.assign({
+      spacing: 1
+    }, {
+      children: [jsx(SearchField, {
+        value: searchQuery,
+        valueChanged: onSearch
+      }), jsx(FilterList, {
+        filters: filters,
+        onChipClick: onClickFilterChip,
+        isAllSelected: isAllSelected
+      })]
+    }))
+  }));
+});
+
+const FilterListItem = ({
+  filter,
+  toggleFilter,
+  enableOnlyOneFilter
+}) => {
+  const {
+    t
+  } = useSharedTranslation();
+  const [isHovering, setIsHovering] = React.useState(false);
+  const handleMouseEnter = React.useCallback(() => {
+    setIsHovering(true);
+  }, []);
+  const handleMouseLeave = React.useCallback(() => {
+    setIsHovering(false);
+  }, []);
+  const selectOnlyOne = filterId => {
+    enableOnlyOneFilter(filterId);
+  };
+  const toggleCheckbox = filterId => {
+    toggleFilter([filterId]);
+  };
+  const mouseMoveRef = React.useRef(null);
+  React.useEffect(() => {
+    window.addEventListener('mousemove', checkHover, true);
+    return () => {
+      window.removeEventListener('mousemove', checkHover, true);
+    };
+  });
+  const checkHover = e => {
+    if (mouseMoveRef.current) {
+      const mouseOver = mouseMoveRef.current.contains(e.target);
+      if (!isHovering && mouseOver) {
+        handleMouseEnter();
+      }
+      if (isHovering && !mouseOver) {
+        handleMouseLeave();
+      }
+    }
+  };
+  const name = filter.amountVisible ? `${filter.name} (${filter.amountVisible})` : filter.name;
+  if (filter.amountVisible !== 0) {
+    return jsx("div", Object.assign({
+      ref: mouseMoveRef,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleMouseEnter,
+      onBlur: handleMouseLeave
+    }, {
+      children: jsxs(ListItem, Object.assign({
+        sx: {
+          width: '100%',
+          minWidth: '300px',
+          padding: '0px',
+          paddingLeft: '0px',
+          paddingRight: '50px',
+          fontSize: '12px'
+        }
+      }, {
+        children: [jsx(ListItemIcon, Object.assign({
+          sx: {
+            minWidth: '42px'
+          }
+        }, {
+          children: jsx(Checkbox, {
+            inputProps: {
+              'aria-label': filter.name
+            },
+            color: "secondary",
+            checked: filter.checked,
+            onChange: () => {
+              toggleCheckbox(filter.id);
+            },
+            sx: {
+              paddingTop: '6px',
+              paddingBottom: '7px',
+              '&&:hover': {
+                backgroundColor: 'transparent'
+              }
+            }
+          })
+        })), jsx(Typography, Object.assign({
+          variant: "body2",
+          sx: {
+            fontSize: '16px',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden'
+          }
+        }, {
+          children: name
+        })), isHovering ? jsx(ListItemSecondaryAction, {
+          children: jsx(CustomIconButton, Object.assign({
+            "aria-label": `Only ${filter.name}`,
+            style: {
+              backgroundColor: 'transparent',
+              width: 'auto'
+            },
+            edge: "end",
+            onClick: () => selectOnlyOne(filter.id)
+          }, {
+            children: jsx(Typography, Object.assign({
+              sx: {
+                color: 'geowebColors.buttons.primary.default.fill',
+                fontSize: '14px',
+                fontWeight: 500
+              }
+            }, {
+              children: t('shared-only')
+            }))
+          }))
+        }) : null]
+      }))
+    }));
+  }
+  return null;
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -8397,6 +8736,7 @@ const DATE_FORMAT_YEAR = 'yyyy-MM-dd';
 const DATE_FORMAT_HOURS = 'HH:mm';
 const DATE_FORMAT_NAME_OF_DAY_MONTH = 'eee dd MMM HH:mm';
 const DATE_FORMAT_NAME_OF_MONTH = 'dd MMM yyyy, HH:mm';
+const DATE_FORMAT_NAME_OF_DAY = 'eee dd/MM/yyyy HH:mm';
 
 /**
  * Parsing date strings with geoweb dateUtils:
@@ -8932,7 +9272,7 @@ const startOfYearUTC = date => {
 const convertNOWFormatToUTC = timeValue => {
   const now = new Date();
   const today = startOfDay(now);
-  const regex = /(NOW|TODAY)([\+\-])PT(\d+)H(\d+)M/;
+  const regex = /(NOW|TODAY)([+-])PT(\d+)H(\d+)M/;
   const matches = timeValue.match(regex);
   if (matches) {
     const base = matches[1] === 'NOW' ? now : today;
@@ -8951,7 +9291,7 @@ const convertNOWFormatToUTC = timeValue => {
 const convertNOWandTODAYFormatsToUTC = timeValue => {
   const now = new Date();
   const today = startOfDayUTC(now);
-  const regex = /(NOW|TODAY)([\+\-])PT(\d+)H(\d+)M/;
+  const regex = /(NOW|TODAY)([+-])PT(\d+)H(\d+)M/;
   const matches = timeValue.match(regex);
   if (matches) {
     const base = matches[1] === 'NOW' ? now : today;
@@ -8984,6 +9324,7 @@ var index = /*#__PURE__*/Object.freeze({
   __proto__: null,
   DATE_FORMAT_DATEPICKER: DATE_FORMAT_DATEPICKER,
   DATE_FORMAT_HOURS: DATE_FORMAT_HOURS,
+  DATE_FORMAT_NAME_OF_DAY: DATE_FORMAT_NAME_OF_DAY,
   DATE_FORMAT_NAME_OF_DAY_MONTH: DATE_FORMAT_NAME_OF_DAY_MONTH,
   DATE_FORMAT_NAME_OF_MONTH: DATE_FORMAT_NAME_OF_MONTH,
   DATE_FORMAT_UTC: DATE_FORMAT_UTC,
@@ -9125,4 +9466,4 @@ class RenderCounter {
 }
 const renderCounter = new RenderCounter();
 
-export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, CanvasComponent, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEFAULT_ERROR_MESSAGE, DraggableComponent$1 as Draggable, ErrorBoundary, LastUpdateTime, ResizeComponent as Resizable, SHARED_NAMESPACE, SearchField, SearchFieldButton, SearchHighlight, StatusTag, SwitchButton, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, UserMenuItemSentryRecording, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, createMockStoreWithEggs, createMockStoreWithEggsAndMiddleware, createToolkitMockStoreWithEggs, 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, withEggs };
+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, FilterListItem, LastUpdateTime, ResizeComponent as Resizable, SHARED_NAMESPACE, SearchField$1 as SearchField, SearchFieldButton, SearchHighlight, StatusTag, SwitchButton, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, UserMenuItemSentryRecording, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, createMockStoreWithEggs, createMockStoreWithEggsAndMiddleware, createToolkitMockStoreWithEggs, 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, withEggs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "9.22.0",
+  "version": "9.24.0",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {

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

@@ -0,0 +1,13 @@
+import { BoxProps } from '@mui/material';
+import * as React from 'react';
+import { ListFilter } from './FilterList';
+export declare const DEFAULT_FILTER_HEIGHT = 85;
+interface FilterProps extends BoxProps {
+    filters: ListFilter[];
+    onClickFilterChip?: (id: string, selected: boolean) => void;
+    onSearch?: (value: string) => void;
+    isAllSelected?: boolean;
+    searchQuery?: string;
+}
+declare const Filter: React.ForwardRefExoticComponent<Omit<FilterProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export default Filter;

package/src/lib/components/Filter/Filter.spec.d.ts

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

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const FilterLight: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+    tags: string[];
+};
+export declare const FilterDark: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+    tags: string[];
+};

package/src/lib/components/Filter/FilterChip.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface FilterChipProps {
+    id: string;
+    label: string;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    handleClick?: (label: string) => void;
+    onAction?: React.MouseEventHandler;
+    actionIcon?: React.ReactElement;
+}
+declare const FilterChip: React.FC<FilterChipProps>;
+export default FilterChip;

package/src/lib/components/Filter/FilterChip.spec.d.ts

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

package/src/lib/components/Filter/FilterList.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export interface ListFilter {
+    label: string;
+    id: string;
+    type?: 'scope' | 'keyword';
+    isSelected?: boolean;
+    isDisabled?: boolean;
+}
+interface FilterListProps {
+    filters?: ListFilter[];
+    onChipClick?: (id: string, selected: boolean) => void;
+    isAllSelected?: boolean;
+}
+declare const FilterList: React.FC<FilterListProps>;
+export default FilterList;

package/src/lib/components/Filter/FilterList.spec.d.ts

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

package/src/lib/components/Filter/FilterListItem.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface Filter {
+    id: string;
+    name: string;
+    checked?: boolean;
+    amountVisible?: number;
+}
+export interface FilterListItemProps {
+    filter: Filter;
+    toggleFilter: (filterIds: string[]) => void;
+    enableOnlyOneFilter: (filterId: string) => void;
+}
+export declare const FilterListItem: React.FC<FilterListItemProps>;

package/src/lib/components/Filter/FilterListItem.spec.d.ts

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

package/src/lib/components/Filter/FilterListItem.stories.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const FilterListItemLight: () => React.ReactElement;
+export declare const FilterListItemDark: () => React.ReactElement;

package/src/lib/components/Filter/SearchField.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export declare const DEBOUNCE_TIMEOUT = 300;
+interface SearchFieldProps {
+    valueChanged: (value: string) => void;
+    value?: string;
+}
+declare const SearchField: React.FC<SearchFieldProps>;
+export default SearchField;

package/src/lib/components/Filter/SearchField.spec.d.ts

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

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

@@ -0,0 +1,8 @@
+export { default as Filter } from './Filter';
+export { DEFAULT_FILTER_HEIGHT } from './Filter';
+export type { ListFilter } from './FilterList';
+export { FilterListItem } from './FilterListItem';
+export type { Filter as FilterListItemFilter, FilterListItemProps, } from './FilterListItem';
+export { default as FilterChip } from './FilterChip';
+export type { FilterChipProps } from './FilterChip';
+export { DEBOUNCE_TIMEOUT } from './SearchField';

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { BaseSelectProps, SelectVariants } from '@mui/material';
-import { SxProps, Theme } from '@mui/material/styles';
+import { BaseSelectProps, SelectVariants, SxProps, Theme } from '@mui/material';
 interface ListElement {
     value: string;
 }

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

@@ -23,3 +23,4 @@ export * from './SwitchButton';
 export * from './SearchField';
 export * from './LastUpdateTime';
 export * from './CanvasComponent';
+export * from './Filter';

package/src/lib/utils/dateUtils/dateFormats.d.ts

@@ -4,3 +4,4 @@ export declare const DATE_FORMAT_YEAR = "yyyy-MM-dd";
 export declare const DATE_FORMAT_HOURS = "HH:mm";
 export declare const DATE_FORMAT_NAME_OF_DAY_MONTH = "eee dd MMM HH:mm";
 export declare const DATE_FORMAT_NAME_OF_MONTH = "dd MMM yyyy, HH:mm";
+export declare const DATE_FORMAT_NAME_OF_DAY = "eee dd/MM/yyyy HH:mm";

package/src/lib/utils/i18n.d.ts

@@ -1,3 +1,7 @@
+import i18n from 'i18next';
+import { UseTranslationResponse } from 'react-i18next';
 export declare const SHARED_NAMESPACE = "shared";
 export declare const initSharedI18n: () => void;
 export declare const translateKeyOutsideComponents: (key: string, params?: Record<string, string | number> | undefined) => string;
+export declare const useSharedTranslation: () => UseTranslationResponse<typeof SHARED_NAMESPACE, typeof i18n>;
+export { i18n };