@opengeoweb/layer-select 9.4.0 → 9.5.0

package/index.esm.js

@@ -2,21 +2,21 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { uiTypes, serviceActions, selectorMemoizationOptions, serviceSelectors, uiActions, uiSelectors, mapSelectors, layerActions, layerTypes, useSetupDialog } from '@opengeoweb/store';
-import { CustomIconButton, ToolContainerDraggable, SearchField, CustomToggleButton, CustomTooltip, SearchHighlight, ToggleMenu, CustomAccordion } from '@opengeoweb/shared';
-import { Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, LayersAdd, Filter, Add, Cached, Edit, Visibility, Delete, Close, Copy } from '@opengeoweb/theme';
+import { CustomIconButton, ToolContainerDraggable, CustomAccordion, CustomToggleButton, CustomTooltip, SearchHighlight, SearchField, ToggleMenu } from '@opengeoweb/shared';
+import { Filter, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, LayersAdd, Add, Cached, Edit, Visibility, Delete, Close, Copy } from '@opengeoweb/theme';
+import { uiTypes, serviceActions, selectorMemoizationOptions, serviceSelectors, uiActions, uiSelectors, useSetupDialog, mapSelectors, layerActions, layerTypes } from '@opengeoweb/store';
 import { createEntityAdapter, createSlice, createSelector } from '@reduxjs/toolkit';
 import { compact, countBy, partition } from 'lodash';
 import { createStore } from '@redux-eggs/redux-toolkit';
 import { getSagaExtension } from '@redux-eggs/saga-extension';
 import { takeEvery, select, put, all } from 'redux-saga/effects';
+import { ListItem, ListItemIcon, Checkbox, Typography, ListItemSecondaryAction, Switch, Grid, List, Box as Box$1, Backdrop, CircularProgress, Button, ListItemText, Dialog, DialogTitle, LinearProgress, DialogContent, InputAdornment, DialogActions } from '@mui/material';
 import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Grid';
+import Typography$1 from '@mui/material/Typography';
+import Grid$1 from '@mui/material/Grid';
 import { LegendLayout } from '@opengeoweb/webmap-react';
-import { Grid as Grid$1, Box as Box$1, Typography as Typography$1, Backdrop, CircularProgress, Button, List, ListItem, ListItemText, ListItemSecondaryAction, ListItemIcon, Checkbox, Switch, Dialog, DialogTitle, LinearProgress, DialogContent, InputAdornment, DialogActions } from '@mui/material';
-import { webmapUtils, LayerType, getCapabilities, WMGetServiceFromStore, clearImageCache } from '@opengeoweb/webmap';
 import { FixedSizeList } from 'react-window';
+import { webmapUtils, LayerType, getCapabilities, WMGetServiceFromStore, clearImageCache } from '@opengeoweb/webmap';
 import { snackbarActions } from '@opengeoweb/snackbar';
 import { ReactHookFormProvider, defaultFormOptions, ReactHookFormTextField } from '@opengeoweb/form-fields';
 import { useFormContext } from 'react-hook-form';
@@ -1106,68 +1106,6 @@ $$8({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }
   assign: assign
 });
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-const LayerInfoButton = _a => {
-  var {
-      isOpenInStore,
-      isActive,
-      onClick
-    } = _a,
-    props = __rest(_a, ["isOpenInStore", "isActive", "onClick"]);
-  return jsx(CustomIconButton, Object.assign({
-    variant: "flat",
-    isSelected: isActive && isOpenInStore,
-    onClick: onClick,
-    id: "layerInfoButton",
-    "data-testid": "layerInfoButton",
-    "aria-label": "layer info",
-    className: "layerInfoButton"
-  }, props, {
-    children: jsx(Info, {})
-  }));
-};
-
 var aCallable$4 = aCallable$6;
 var toObject$3 = toObject$6;
 var IndexedObject = indexedObject;
@@ -2916,492 +2854,861 @@ const layerSelectConfig = {
   sagas: [rootSaga]
 };
 
-const LayerInfoButtonConnect = ({
-  isLayerMissing,
-  layer,
+const KeywordFilterButtonConnect = ({
   mapId,
-  serviceName,
-  source: _source = 'app'
+  source: _source = 'app',
+  isMultiMap
 }) => {
   const dispatch = useDispatch();
-  const currentActiveMapId = useAppSelector(store => uiSelectors.getDialogMapId(store, uiTypes.DialogTypes.LayerInfo));
-  const isOpenInStore = useAppSelector(store => uiSelectors.getisDialogOpen(store, uiTypes.DialogTypes.LayerInfo));
-  const currentLayerInfo = useAppSelector(store => getActiveLayerInfo(store));
-  const isActive = layer.name === (currentLayerInfo === null || currentLayerInfo === void 0 ? void 0 : currentLayerInfo.name) && serviceName === (currentLayerInfo === null || currentLayerInfo === void 0 ? void 0 : currentLayerInfo.serviceName);
-  const toggleInfoDialog = React__default.useCallback(() => {
+  const dialogType = isMultiMap ? `${uiTypes.DialogTypes.KeywordFilter}-${mapId}` : uiTypes.DialogTypes.KeywordFilter;
+  const currentActiveMapId = useAppSelector(store => uiSelectors.getDialogMapId(store, dialogType));
+  const isOpenInStore = useAppSelector(store => uiSelectors.getisDialogOpen(store, dialogType));
+  const openFilterResultsDialog = React.useCallback(() => {
     dispatch(uiActions.setActiveMapIdForDialog({
-      type: uiTypes.DialogTypes.LayerInfo,
+      type: dialogType,
       mapId,
       setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
       source: _source
     }));
-  }, [currentActiveMapId, dispatch, isOpenInStore, mapId, _source]);
-  const setActiveLayerInfo = React__default.useCallback(() => {
-    dispatch(layerSelectActions.setActiveLayerInfo({
-      layer: Object.assign(Object.assign({}, layer), {
-        serviceName
-      })
-    }));
-    dispatch(uiActions.orderDialog({
-      type: uiTypes.DialogTypes.LayerInfo
-    }));
-  }, [dispatch, layer, serviceName]);
-  const onClick = () => {
-    if (isActive) {
-      toggleInfoDialog();
-    }
-    if (!isActive && isOpenInStore) {
-      setActiveLayerInfo();
-    }
-    if (!isActive && !isOpenInStore) {
-      setActiveLayerInfo();
-      toggleInfoDialog();
-    }
-  };
-  return jsx(LayerInfoButton, {
-    disabled: isLayerMissing,
-    isActive: isActive,
-    isOpenInStore: isOpenInStore,
-    onClick: onClick
-  });
+  }, [currentActiveMapId, dispatch, isOpenInStore, mapId, _source, dialogType]);
+  return jsx(CustomIconButton, Object.assign({
+    variant: "tool",
+    onClick: openFilterResultsDialog,
+    isSelected: isOpenInStore,
+    id: "keywordFilterButton",
+    "data-testid": "keywordFilterButton"
+  }, {
+    children: jsx(Filter, {})
+  }));
 };
 
-const textStyle = {
-  lineHeight: '20px',
-  letterSpacing: '0.25px'
-};
-const textStyleWithMargin = Object.assign(Object.assign({}, textStyle), {
-  marginBottom: 1
-});
-const LayerInfoText = ({
-  label,
-  value
+const FilterListItem = ({
+  filter,
+  toggleFilter,
+  enableOnlyOneFilter
 }) => {
-  return jsxs(Fragment, {
-    children: [jsx(Typography, Object.assign({
-      variant: "subtitle2",
-      sx: textStyle
-    }, {
-      children: label
-    })), jsx(Typography, Object.assign({
-      variant: "body2",
-      sx: textStyleWithMargin
-    }, {
-      children: value
-    }))]
+  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 valueStyle = Object.assign(Object.assign({}, textStyle), {
-  overflowWrap: 'break-word'
-});
-const LayerInfoList = ({
-  label,
-  list
-}) => {
-  return jsxs(Fragment, {
-    children: [jsx(Typography, Object.assign({
-      variant: "subtitle2",
-      sx: textStyle
-    }, {
-      children: label
-    })), list.length === 0 ? jsx(Typography, Object.assign({
-      variant: "body2",
-      sx: textStyleWithMargin
-    }, {
-      children: "-"
-    })) : jsx(Grid, Object.assign({
-      container: true,
-      direction: "column"
+  const checkHover = e => {
+    if (mouseMoveRef.current) {
+      const mouseOver = mouseMoveRef.current.contains(e.target);
+      if (!isHovering && mouseOver) {
+        handleMouseEnter();
+      }
+      if (isHovering && !mouseOver) {
+        handleMouseLeave();
+      }
+    }
+  };
+  if (filter.amountVisible !== 0) {
+    return jsx("div", Object.assign({
+      ref: mouseMoveRef,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleMouseEnter,
+      onBlur: handleMouseLeave
     }, {
-      children: list.map(item => jsxs("div", {
-        children: [jsxs(Grid, Object.assign({
-          item: true,
-          container: true,
-          direction: "row"
+      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: [item.icon, jsx(Grid, Object.assign({
-            item: true,
+          children: jsx(Checkbox, {
+            inputProps: {
+              'aria-label': filter.name
+            },
+            color: "secondary",
+            checked: filter.checked,
+            onChange: () => {
+              toggleCheckbox(filter.id);
+            },
             sx: {
-              marginLeft: '10px'
+              paddingTop: '6px',
+              paddingBottom: '7px',
+              '&&:hover': {
+                backgroundColor: 'transparent'
+              }
             }
-          }, {
-            children: jsxs(Typography, Object.assign({
-              variant: "body2",
-              sx: textStyle
-            }, {
-              children: [item.label, ":"]
-            }))
-          }))]
-        })), jsx(Grid, Object.assign({
-          item: true,
-          container: true,
-          direction: "row",
+          })
+        })), jsxs(Typography, Object.assign({
+          variant: "body2",
           sx: {
-            marginBottom: 1,
-            paddingLeft: '34px'
+            fontSize: '16px',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden'
           }
         }, {
-          children: jsx(Typography, Object.assign({
-            variant: "body2",
-            sx: valueStyle
+          children: [filter.name, " (", filter.amountVisible, ")"]
+        })), 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: item.value
+            children: jsx(Typography, Object.assign({
+              sx: {
+                color: 'geowebColors.buttons.primary.default.fill',
+                fontSize: '14px',
+                fontWeight: 500
+              }
+            }, {
+              children: "ONLY"
+            }))
           }))
-        }))]
-      }, item.label))
-    }))]
-  });
+        }) : null]
+      }))
+    }));
+  }
+  return null;
 };
 
-const LayerInfoLegend = ({
-  title,
-  name,
-  dimensions,
-  legendURL
+const KeywordFilterResultsListItemConnect = ({
+  filter
 }) => {
-  return jsxs(Fragment, {
-    children: [jsx(Typography, Object.assign({
-      variant: "subtitle2",
-      sx: textStyleWithMargin
-    }, {
-      children: "Legend"
-    })), jsx(LegendLayout, Object.assign({
-      title: title,
-      name: name,
-      dimensions: dimensions
-    }, {
-      children: legendURL ? jsx("img", {
-        alt: title,
-        src: legendURL
-      }) : '-'
-    }))]
+  const dispatch = useDispatch();
+  const toggleFilter = React.useCallback(filterIds => {
+    dispatch(layerSelectActions.toggleFilter({
+      filterIds
+    }));
+  }, [dispatch]);
+  const enableOnlyOneFilter = React.useCallback(filterId => {
+    dispatch(layerSelectActions.enableOnlyOneFilter({
+      filterId
+    }));
+  }, [dispatch]);
+  return jsx(FilterListItem, {
+    filter: filter,
+    toggleFilter: toggleFilter,
+    enableOnlyOneFilter: enableOnlyOneFilter
   });
 };
 
-var anObject$3 = anObject$9;
-
-// `RegExp.prototype.flags` getter implementation
-// https://tc39.es/ecma262/#sec-get-regexp.prototype.flags
-var regexpFlags$1 = function () {
-  var that = anObject$3(this);
-  var result = '';
-  if (that.hasIndices) result += 'd';
-  if (that.global) result += 'g';
-  if (that.ignoreCase) result += 'i';
-  if (that.multiline) result += 'm';
-  if (that.dotAll) result += 's';
-  if (that.unicode) result += 'u';
-  if (that.unicodeSets) result += 'v';
-  if (that.sticky) result += 'y';
-  return result;
+const KeywordFilterSelectAllSwitchConnect = () => {
+  const dispatch = useDispatch();
+  const allFiltersActive = useAppSelector(store => isAllFiltersChecked(store));
+  const allFilterIds = useAppSelector(store => getAllFilterIds(store));
+  const checkedFilterIds = useAppSelector(store => getCheckedFilterIds(store));
+  const toggleFilters = React.useCallback(() => {
+    const filterIds = allFiltersActive ? checkedFilterIds : allFilterIds.filter(id => !checkedFilterIds.includes(id));
+    dispatch(layerSelectActions.toggleFilter({
+      filterIds
+    }));
+  }, [allFilterIds, allFiltersActive, checkedFilterIds, dispatch]);
+  return jsx(Switch, {
+    inputProps: {
+      'aria-label': 'All'
+    },
+    checked: allFiltersActive,
+    onChange: toggleFilters,
+    "data-testid": "customSwitch"
+  });
 };
 
-var fails$4 = fails$k;
-var global$3 = global$g;
-
-// babel-minify and Closure Compiler transpiles RegExp('a', 'y') -> /a/y and it causes SyntaxError
-var $RegExp$2 = global$3.RegExp;
-
-var UNSUPPORTED_Y$2 = fails$4(function () {
-  var re = $RegExp$2('a', 'y');
-  re.lastIndex = 2;
-  return re.exec('abcd') !== null;
-});
-
-// UC Browser bug
-// https://github.com/zloirock/core-js/issues/1008
-var MISSED_STICKY = UNSUPPORTED_Y$2 || fails$4(function () {
-  return !$RegExp$2('a', 'y').sticky;
-});
-
-var BROKEN_CARET = UNSUPPORTED_Y$2 || fails$4(function () {
-  // https://bugzilla.mozilla.org/show_bug.cgi?id=773687
-  var re = $RegExp$2('^r', 'gy');
-  re.lastIndex = 2;
-  return re.exec('str') !== null;
-});
-
-var regexpStickyHelpers = {
-  BROKEN_CARET: BROKEN_CARET,
-  MISSED_STICKY: MISSED_STICKY,
-  UNSUPPORTED_Y: UNSUPPORTED_Y$2
+const DIALOG_TITLE = 'Groups & Keywords';
+const listStyle = {
+  padding: '0px'
+};
+const accordionDetailsStyle = {
+  padding: '0px',
+  margin: '0px'
+};
+const KeywordFilterResults = ({
+  filters,
+  bounds,
+  onClose: _onClose = () => {},
+  isOpen,
+  onMouseDown: _onMouseDown = () => {},
+  order: _order = 0,
+  source: _source = 'module'
+}) => {
+  return jsxs(ToolContainerDraggable, Object.assign({
+    title: DIALOG_TITLE,
+    "data-testid": "keywordFilterResults",
+    startSize: {
+      width: 349,
+      height: 600
+    },
+    minWidth: 312,
+    minHeight: 192,
+    isOpen: isOpen,
+    onClose: _onClose,
+    bounds: bounds,
+    onMouseDown: _onMouseDown,
+    order: _order,
+    source: _source
+  }, {
+    children: [jsxs(Grid, Object.assign({
+      container: true,
+      item: true,
+      xs: 12,
+      justifyContent: "space-between",
+      alignItems: "center",
+      sx: {
+        backgroundColor: 'background.paper',
+        position: 'sticky',
+        top: 0,
+        zIndex: 100
+      }
+    }, {
+      children: [jsx(Grid, Object.assign({
+        container: true,
+        item: true,
+        xs: 6,
+        justifyContent: "flex-start",
+        alignItems: "center",
+        sx: {
+          padding: '15px 15px 0 24px'
+        }
+      }, {
+        children: "Select all"
+      })), jsx(Grid, Object.assign({
+        container: true,
+        item: true,
+        xs: 6,
+        justifyContent: "flex-end",
+        alignContent: "center",
+        sx: {
+          padding: '15px 15px 0 15px'
+        }
+      }, {
+        children: jsx(KeywordFilterSelectAllSwitchConnect, {})
+      }))]
+    })), jsx(CustomAccordion, Object.assign({
+      title: "Groups",
+      detailsSx: accordionDetailsStyle
+    }, {
+      children: jsx(List, Object.assign({
+        dense: true,
+        style: listStyle
+      }, {
+        children: filters.groups.map(group => jsx(KeywordFilterResultsListItemConnect, {
+          filter: group
+        }, group.id))
+      }))
+    })), jsx(CustomAccordion, Object.assign({
+      title: "Keywords",
+      detailsSx: accordionDetailsStyle
+    }, {
+      children: jsx(List, Object.assign({
+        dense: true,
+        style: listStyle
+      }, {
+        children: filters.keywords.map(keyword => {
+          return jsx(KeywordFilterResultsListItemConnect, {
+            filter: keyword
+          }, keyword.id);
+        })
+      }))
+    }))]
+  }));
 };
 
-var fails$3 = fails$k;
-var global$2 = global$g;
-
-// babel-minify and Closure Compiler transpiles RegExp('.', 's') -> /./s and it causes SyntaxError
-var $RegExp$1 = global$2.RegExp;
+const KeywordFilterResultsConnect = ({
+  bounds,
+  mapId,
+  isMultiMap
+}) => {
+  const dialogType = isMultiMap ? `${uiTypes.DialogTypes.KeywordFilter}-${mapId}` : uiTypes.DialogTypes.KeywordFilter;
+  const {
+    dialogOrder,
+    onCloseDialog,
+    setDialogOrder,
+    isDialogOpen,
+    uiSource
+  } = useSetupDialog(dialogType);
+  const filters = useAppSelector(getFilters);
+  return jsx(KeywordFilterResults, {
+    bounds: bounds,
+    isOpen: isDialogOpen,
+    onClose: onCloseDialog,
+    onMouseDown: setDialogOrder,
+    order: dialogOrder,
+    source: uiSource,
+    filters: filters
+  });
+};
 
-var regexpUnsupportedDotAll = fails$3(function () {
-  var re = $RegExp$1('.', 's');
-  return !(re.dotAll && re.test('\n') && re.flags === 's');
-});
-
-var fails$2 = fails$k;
-var global$1 = global$g;
-
-// babel-minify and Closure Compiler transpiles RegExp('(?<a>b)', 'g') -> /(?<a>b)/g and it causes SyntaxError
-var $RegExp = global$1.RegExp;
-
-var regexpUnsupportedNcg = fails$2(function () {
-  var re = $RegExp('(?<a>b)', 'g');
-  return re.exec('b').groups.a !== 'b' ||
-    'b'.replace(re, '$<a>c') !== 'bc';
-});
-
-/* eslint-disable regexp/no-empty-capturing-group, regexp/no-empty-group, regexp/no-lazy-ends -- testing */
-/* eslint-disable regexp/no-useless-quantifier -- testing */
-var call$3 = functionCall;
-var uncurryThis$4 = functionUncurryThis;
-var toString$2 = toString$5;
-var regexpFlags = regexpFlags$1;
-var stickyHelpers$1 = regexpStickyHelpers;
-var shared = shared$4.exports;
-var create = objectCreate;
-var getInternalState = internalState.get;
-var UNSUPPORTED_DOT_ALL = regexpUnsupportedDotAll;
-var UNSUPPORTED_NCG = regexpUnsupportedNcg;
-
-var nativeReplace = shared('native-string-replace', String.prototype.replace);
-var nativeExec = RegExp.prototype.exec;
-var patchedExec = nativeExec;
-var charAt$2 = uncurryThis$4(''.charAt);
-var indexOf = uncurryThis$4(''.indexOf);
-var replace = uncurryThis$4(''.replace);
-var stringSlice$2 = uncurryThis$4(''.slice);
-
-var UPDATES_LAST_INDEX_WRONG = (function () {
-  var re1 = /a/;
-  var re2 = /b*/g;
-  call$3(nativeExec, re1, 'a');
-  call$3(nativeExec, re2, 'a');
-  return re1.lastIndex !== 0 || re2.lastIndex !== 0;
-})();
-
-var UNSUPPORTED_Y$1 = stickyHelpers$1.BROKEN_CARET;
-
-// nonparticipating capturing group, copied from es5-shim's String#split patch.
-var NPCG_INCLUDED = /()??/.exec('')[1] !== undefined;
-
-var PATCH = UPDATES_LAST_INDEX_WRONG || NPCG_INCLUDED || UNSUPPORTED_Y$1 || UNSUPPORTED_DOT_ALL || UNSUPPORTED_NCG;
-
-if (PATCH) {
-  patchedExec = function exec(string) {
-    var re = this;
-    var state = getInternalState(re);
-    var str = toString$2(string);
-    var raw = state.raw;
-    var result, reCopy, lastIndex, match, i, object, group;
-
-    if (raw) {
-      raw.lastIndex = re.lastIndex;
-      result = call$3(patchedExec, raw, str);
-      re.lastIndex = raw.lastIndex;
-      return result;
-    }
-
-    var groups = state.groups;
-    var sticky = UNSUPPORTED_Y$1 && re.sticky;
-    var flags = call$3(regexpFlags, re);
-    var source = re.source;
-    var charsAdded = 0;
-    var strCopy = str;
-
-    if (sticky) {
-      flags = replace(flags, 'y', '');
-      if (indexOf(flags, 'g') === -1) {
-        flags += 'g';
-      }
-
-      strCopy = stringSlice$2(str, re.lastIndex);
-      // Support anchored sticky behavior.
-      if (re.lastIndex > 0 && (!re.multiline || re.multiline && charAt$2(str, re.lastIndex - 1) !== '\n')) {
-        source = '(?: ' + source + ')';
-        strCopy = ' ' + strCopy;
-        charsAdded++;
-      }
-      // ^(? + rx + ) is needed, in combination with some str slicing, to
-      // simulate the 'y' flag.
-      reCopy = new RegExp('^(?:' + source + ')', flags);
-    }
-
-    if (NPCG_INCLUDED) {
-      reCopy = new RegExp('^' + source + '$(?!\\s)', flags);
-    }
-    if (UPDATES_LAST_INDEX_WRONG) lastIndex = re.lastIndex;
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
-    match = call$3(nativeExec, sticky ? reCopy : re, strCopy);
+const LayerInfoButton = _a => {
+  var {
+      isOpenInStore,
+      isActive,
+      onClick
+    } = _a,
+    props = __rest(_a, ["isOpenInStore", "isActive", "onClick"]);
+  return jsx(CustomIconButton, Object.assign({
+    variant: "flat",
+    isSelected: isActive && isOpenInStore,
+    onClick: onClick,
+    id: "layerInfoButton",
+    "data-testid": "layerInfoButton",
+    "aria-label": "layer info",
+    className: "layerInfoButton"
+  }, props, {
+    children: jsx(Info, {})
+  }));
+};
 
-    if (sticky) {
-      if (match) {
-        match.input = stringSlice$2(match.input, charsAdded);
-        match[0] = stringSlice$2(match[0], charsAdded);
-        match.index = re.lastIndex;
-        re.lastIndex += match[0].length;
-      } else re.lastIndex = 0;
-    } else if (UPDATES_LAST_INDEX_WRONG && match) {
-      re.lastIndex = re.global ? match.index + match[0].length : lastIndex;
+const LayerInfoButtonConnect = ({
+  isLayerMissing,
+  layer,
+  mapId,
+  serviceName,
+  source: _source = 'app'
+}) => {
+  const dispatch = useDispatch();
+  const currentActiveMapId = useAppSelector(store => uiSelectors.getDialogMapId(store, uiTypes.DialogTypes.LayerInfo));
+  const isOpenInStore = useAppSelector(store => uiSelectors.getisDialogOpen(store, uiTypes.DialogTypes.LayerInfo));
+  const currentLayerInfo = useAppSelector(store => getActiveLayerInfo(store));
+  const isActive = layer.name === (currentLayerInfo === null || currentLayerInfo === void 0 ? void 0 : currentLayerInfo.name) && serviceName === (currentLayerInfo === null || currentLayerInfo === void 0 ? void 0 : currentLayerInfo.serviceName);
+  const toggleInfoDialog = React__default.useCallback(() => {
+    dispatch(uiActions.setActiveMapIdForDialog({
+      type: uiTypes.DialogTypes.LayerInfo,
+      mapId,
+      setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
+      source: _source
+    }));
+  }, [currentActiveMapId, dispatch, isOpenInStore, mapId, _source]);
+  const setActiveLayerInfo = React__default.useCallback(() => {
+    dispatch(layerSelectActions.setActiveLayerInfo({
+      layer: Object.assign(Object.assign({}, layer), {
+        serviceName
+      })
+    }));
+    dispatch(uiActions.orderDialog({
+      type: uiTypes.DialogTypes.LayerInfo
+    }));
+  }, [dispatch, layer, serviceName]);
+  const onClick = () => {
+    if (isActive) {
+      toggleInfoDialog();
     }
-    if (NPCG_INCLUDED && match && match.length > 1) {
-      // Fix browsers whose `exec` methods don't consistently return `undefined`
-      // for NPCG, like IE8. NOTE: This doesn't work for /(.?)?/
-      call$3(nativeReplace, match[0], reCopy, function () {
-        for (i = 1; i < arguments.length - 2; i++) {
-          if (arguments[i] === undefined) match[i] = undefined;
-        }
-      });
+    if (!isActive && isOpenInStore) {
+      setActiveLayerInfo();
     }
-
-    if (match && groups) {
-      match.groups = object = create(null);
-      for (i = 0; i < groups.length; i++) {
-        group = groups[i];
-        object[group[0]] = match[group[1]];
-      }
+    if (!isActive && !isOpenInStore) {
+      setActiveLayerInfo();
+      toggleInfoDialog();
     }
-
-    return match;
   };
-}
-
-var regexpExec$3 = patchedExec;
-
-var $$1 = _export;
-var exec$1 = regexpExec$3;
-
-// `RegExp.prototype.exec` method
-// https://tc39.es/ecma262/#sec-regexp.prototype.exec
-$$1({ target: 'RegExp', proto: true, forced: /./.exec !== exec$1 }, {
-  exec: exec$1
-});
-
-var NATIVE_BIND = functionBindNative;
-
-var FunctionPrototype = Function.prototype;
-var apply$1 = FunctionPrototype.apply;
-var call$2 = FunctionPrototype.call;
+  return jsx(LayerInfoButton, {
+    disabled: isLayerMissing,
+    isActive: isActive,
+    isOpenInStore: isOpenInStore,
+    onClick: onClick
+  });
+};
 
-// eslint-disable-next-line es/no-reflect -- safe
-var functionApply = typeof Reflect == 'object' && Reflect.apply || (NATIVE_BIND ? call$2.bind(apply$1) : function () {
-  return call$2.apply(apply$1, arguments);
+const textStyle = {
+  lineHeight: '20px',
+  letterSpacing: '0.25px'
+};
+const textStyleWithMargin = Object.assign(Object.assign({}, textStyle), {
+  marginBottom: 1
 });
+const LayerInfoText = ({
+  label,
+  value
+}) => {
+  return jsxs(Fragment, {
+    children: [jsx(Typography$1, Object.assign({
+      variant: "subtitle2",
+      sx: textStyle
+    }, {
+      children: label
+    })), jsx(Typography$1, Object.assign({
+      variant: "body2",
+      sx: textStyleWithMargin
+    }, {
+      children: value
+    }))]
+  });
+};
 
-// TODO: Remove from `core-js@4` since it's moved to entry points
-
-var uncurryThis$3 = functionUncurryThisClause;
-var defineBuiltIn = defineBuiltIn$4;
-var regexpExec$2 = regexpExec$3;
-var fails$1 = fails$k;
-var wellKnownSymbol$1 = wellKnownSymbol$d;
-var createNonEnumerableProperty = createNonEnumerableProperty$5;
-
-var SPECIES$1 = wellKnownSymbol$1('species');
-var RegExpPrototype = RegExp.prototype;
-
-var fixRegexpWellKnownSymbolLogic = function (KEY, exec, FORCED, SHAM) {
-  var SYMBOL = wellKnownSymbol$1(KEY);
+const valueStyle = Object.assign(Object.assign({}, textStyle), {
+  overflowWrap: 'break-word'
+});
+const LayerInfoList = ({
+  label,
+  list
+}) => {
+  return jsxs(Fragment, {
+    children: [jsx(Typography$1, Object.assign({
+      variant: "subtitle2",
+      sx: textStyle
+    }, {
+      children: label
+    })), list.length === 0 ? jsx(Typography$1, Object.assign({
+      variant: "body2",
+      sx: textStyleWithMargin
+    }, {
+      children: "-"
+    })) : jsx(Grid$1, Object.assign({
+      container: true,
+      direction: "column"
+    }, {
+      children: list.map(item => jsxs("div", {
+        children: [jsxs(Grid$1, Object.assign({
+          item: true,
+          container: true,
+          direction: "row"
+        }, {
+          children: [item.icon, jsx(Grid$1, Object.assign({
+            item: true,
+            sx: {
+              marginLeft: '10px'
+            }
+          }, {
+            children: jsxs(Typography$1, Object.assign({
+              variant: "body2",
+              sx: textStyle
+            }, {
+              children: [item.label, ":"]
+            }))
+          }))]
+        })), jsx(Grid$1, Object.assign({
+          item: true,
+          container: true,
+          direction: "row",
+          sx: {
+            marginBottom: 1,
+            paddingLeft: '34px'
+          }
+        }, {
+          children: jsx(Typography$1, Object.assign({
+            variant: "body2",
+            sx: valueStyle
+          }, {
+            children: item.value
+          }))
+        }))]
+      }, item.label))
+    }))]
+  });
+};
 
-  var DELEGATES_TO_SYMBOL = !fails$1(function () {
-    // String methods call symbol-named RegEp methods
-    var O = {};
-    O[SYMBOL] = function () { return 7; };
-    return ''[KEY](O) !== 7;
+const LayerInfoLegend = ({
+  title,
+  name,
+  dimensions,
+  legendURL
+}) => {
+  return jsxs(Fragment, {
+    children: [jsx(Typography$1, Object.assign({
+      variant: "subtitle2",
+      sx: textStyleWithMargin
+    }, {
+      children: "Legend"
+    })), jsx(LegendLayout, Object.assign({
+      title: title,
+      name: name,
+      dimensions: dimensions
+    }, {
+      children: legendURL ? jsx("img", {
+        alt: title,
+        src: legendURL
+      }) : '-'
+    }))]
   });
+};
 
-  var DELEGATES_TO_EXEC = DELEGATES_TO_SYMBOL && !fails$1(function () {
-    // Symbol-named RegExp methods call .exec
-    var execCalled = false;
-    var re = /a/;
+var anObject$3 = anObject$9;
 
-    if (KEY === 'split') {
-      // We can't use real regex here since it causes deoptimization
-      // and serious performance degradation in V8
-      // https://github.com/zloirock/core-js/issues/306
-      re = {};
-      // RegExp[@@split] doesn't call the regex's exec method, but first creates
-      // a new one. We need to return the patched regex when creating the new one.
-      re.constructor = {};
-      re.constructor[SPECIES$1] = function () { return re; };
-      re.flags = '';
-      re[SYMBOL] = /./[SYMBOL];
-    }
+// `RegExp.prototype.flags` getter implementation
+// https://tc39.es/ecma262/#sec-get-regexp.prototype.flags
+var regexpFlags$1 = function () {
+  var that = anObject$3(this);
+  var result = '';
+  if (that.hasIndices) result += 'd';
+  if (that.global) result += 'g';
+  if (that.ignoreCase) result += 'i';
+  if (that.multiline) result += 'm';
+  if (that.dotAll) result += 's';
+  if (that.unicode) result += 'u';
+  if (that.unicodeSets) result += 'v';
+  if (that.sticky) result += 'y';
+  return result;
+};
 
-    re.exec = function () {
-      execCalled = true;
-      return null;
-    };
+var fails$4 = fails$k;
+var global$3 = global$g;
 
-    re[SYMBOL]('');
-    return !execCalled;
-  });
+// babel-minify and Closure Compiler transpiles RegExp('a', 'y') -> /a/y and it causes SyntaxError
+var $RegExp$2 = global$3.RegExp;
 
-  if (
-    !DELEGATES_TO_SYMBOL ||
-    !DELEGATES_TO_EXEC ||
-    FORCED
-  ) {
-    var uncurriedNativeRegExpMethod = uncurryThis$3(/./[SYMBOL]);
-    var methods = exec(SYMBOL, ''[KEY], function (nativeMethod, regexp, str, arg2, forceStringMethod) {
-      var uncurriedNativeMethod = uncurryThis$3(nativeMethod);
-      var $exec = regexp.exec;
-      if ($exec === regexpExec$2 || $exec === RegExpPrototype.exec) {
-        if (DELEGATES_TO_SYMBOL && !forceStringMethod) {
-          // The native String method already delegates to @@method (this
-          // polyfilled function), leasing to infinite recursion.
-          // We avoid it by directly calling the native @@method method.
-          return { done: true, value: uncurriedNativeRegExpMethod(regexp, str, arg2) };
-        }
-        return { done: true, value: uncurriedNativeMethod(str, regexp, arg2) };
-      }
-      return { done: false };
-    });
+var UNSUPPORTED_Y$2 = fails$4(function () {
+  var re = $RegExp$2('a', 'y');
+  re.lastIndex = 2;
+  return re.exec('abcd') !== null;
+});
 
-    defineBuiltIn(String.prototype, KEY, methods[0]);
-    defineBuiltIn(RegExpPrototype, SYMBOL, methods[1]);
-  }
+// UC Browser bug
+// https://github.com/zloirock/core-js/issues/1008
+var MISSED_STICKY = UNSUPPORTED_Y$2 || fails$4(function () {
+  return !$RegExp$2('a', 'y').sticky;
+});
 
-  if (SHAM) createNonEnumerableProperty(RegExpPrototype[SYMBOL], 'sham', true);
-};
+var BROKEN_CARET = UNSUPPORTED_Y$2 || fails$4(function () {
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=773687
+  var re = $RegExp$2('^r', 'gy');
+  re.lastIndex = 2;
+  return re.exec('str') !== null;
+});
 
-var isConstructor = isConstructor$2;
-var tryToString = tryToString$3;
+var regexpStickyHelpers = {
+  BROKEN_CARET: BROKEN_CARET,
+  MISSED_STICKY: MISSED_STICKY,
+  UNSUPPORTED_Y: UNSUPPORTED_Y$2
+};
 
-var $TypeError$1 = TypeError;
+var fails$3 = fails$k;
+var global$2 = global$g;
 
-// `Assert: IsConstructor(argument) is true`
-var aConstructor$1 = function (argument) {
-  if (isConstructor(argument)) return argument;
-  throw new $TypeError$1(tryToString(argument) + ' is not a constructor');
-};
+// babel-minify and Closure Compiler transpiles RegExp('.', 's') -> /./s and it causes SyntaxError
+var $RegExp$1 = global$2.RegExp;
 
-var anObject$2 = anObject$9;
-var aConstructor = aConstructor$1;
-var isNullOrUndefined$1 = isNullOrUndefined$4;
-var wellKnownSymbol = wellKnownSymbol$d;
+var regexpUnsupportedDotAll = fails$3(function () {
+  var re = $RegExp$1('.', 's');
+  return !(re.dotAll && re.test('\n') && re.flags === 's');
+});
 
-var SPECIES = wellKnownSymbol('species');
+var fails$2 = fails$k;
+var global$1 = global$g;
 
-// `SpeciesConstructor` abstract operation
-// https://tc39.es/ecma262/#sec-speciesconstructor
-var speciesConstructor$1 = function (O, defaultConstructor) {
-  var C = anObject$2(O).constructor;
-  var S;
-  return C === undefined || isNullOrUndefined$1(S = anObject$2(C)[SPECIES]) ? defaultConstructor : aConstructor(S);
-};
+// babel-minify and Closure Compiler transpiles RegExp('(?<a>b)', 'g') -> /(?<a>b)/g and it causes SyntaxError
+var $RegExp = global$1.RegExp;
 
-var uncurryThis$2 = functionUncurryThis;
-var toIntegerOrInfinity = toIntegerOrInfinity$3;
-var toString$1 = toString$5;
-var requireObjectCoercible$1 = requireObjectCoercible$5;
+var regexpUnsupportedNcg = fails$2(function () {
+  var re = $RegExp('(?<a>b)', 'g');
+  return re.exec('b').groups.a !== 'b' ||
+    'b'.replace(re, '$<a>c') !== 'bc';
+});
 
-var charAt$1 = uncurryThis$2(''.charAt);
-var charCodeAt = uncurryThis$2(''.charCodeAt);
-var stringSlice$1 = uncurryThis$2(''.slice);
+/* eslint-disable regexp/no-empty-capturing-group, regexp/no-empty-group, regexp/no-lazy-ends -- testing */
+/* eslint-disable regexp/no-useless-quantifier -- testing */
+var call$3 = functionCall;
+var uncurryThis$4 = functionUncurryThis;
+var toString$2 = toString$5;
+var regexpFlags = regexpFlags$1;
+var stickyHelpers$1 = regexpStickyHelpers;
+var shared = shared$4.exports;
+var create = objectCreate;
+var getInternalState = internalState.get;
+var UNSUPPORTED_DOT_ALL = regexpUnsupportedDotAll;
+var UNSUPPORTED_NCG = regexpUnsupportedNcg;
 
-var createMethod = function (CONVERT_TO_STRING) {
-  return function ($this, pos) {
+var nativeReplace = shared('native-string-replace', String.prototype.replace);
+var nativeExec = RegExp.prototype.exec;
+var patchedExec = nativeExec;
+var charAt$2 = uncurryThis$4(''.charAt);
+var indexOf = uncurryThis$4(''.indexOf);
+var replace = uncurryThis$4(''.replace);
+var stringSlice$2 = uncurryThis$4(''.slice);
+
+var UPDATES_LAST_INDEX_WRONG = (function () {
+  var re1 = /a/;
+  var re2 = /b*/g;
+  call$3(nativeExec, re1, 'a');
+  call$3(nativeExec, re2, 'a');
+  return re1.lastIndex !== 0 || re2.lastIndex !== 0;
+})();
+
+var UNSUPPORTED_Y$1 = stickyHelpers$1.BROKEN_CARET;
+
+// nonparticipating capturing group, copied from es5-shim's String#split patch.
+var NPCG_INCLUDED = /()??/.exec('')[1] !== undefined;
+
+var PATCH = UPDATES_LAST_INDEX_WRONG || NPCG_INCLUDED || UNSUPPORTED_Y$1 || UNSUPPORTED_DOT_ALL || UNSUPPORTED_NCG;
+
+if (PATCH) {
+  patchedExec = function exec(string) {
+    var re = this;
+    var state = getInternalState(re);
+    var str = toString$2(string);
+    var raw = state.raw;
+    var result, reCopy, lastIndex, match, i, object, group;
+
+    if (raw) {
+      raw.lastIndex = re.lastIndex;
+      result = call$3(patchedExec, raw, str);
+      re.lastIndex = raw.lastIndex;
+      return result;
+    }
+
+    var groups = state.groups;
+    var sticky = UNSUPPORTED_Y$1 && re.sticky;
+    var flags = call$3(regexpFlags, re);
+    var source = re.source;
+    var charsAdded = 0;
+    var strCopy = str;
+
+    if (sticky) {
+      flags = replace(flags, 'y', '');
+      if (indexOf(flags, 'g') === -1) {
+        flags += 'g';
+      }
+
+      strCopy = stringSlice$2(str, re.lastIndex);
+      // Support anchored sticky behavior.
+      if (re.lastIndex > 0 && (!re.multiline || re.multiline && charAt$2(str, re.lastIndex - 1) !== '\n')) {
+        source = '(?: ' + source + ')';
+        strCopy = ' ' + strCopy;
+        charsAdded++;
+      }
+      // ^(? + rx + ) is needed, in combination with some str slicing, to
+      // simulate the 'y' flag.
+      reCopy = new RegExp('^(?:' + source + ')', flags);
+    }
+
+    if (NPCG_INCLUDED) {
+      reCopy = new RegExp('^' + source + '$(?!\\s)', flags);
+    }
+    if (UPDATES_LAST_INDEX_WRONG) lastIndex = re.lastIndex;
+
+    match = call$3(nativeExec, sticky ? reCopy : re, strCopy);
+
+    if (sticky) {
+      if (match) {
+        match.input = stringSlice$2(match.input, charsAdded);
+        match[0] = stringSlice$2(match[0], charsAdded);
+        match.index = re.lastIndex;
+        re.lastIndex += match[0].length;
+      } else re.lastIndex = 0;
+    } else if (UPDATES_LAST_INDEX_WRONG && match) {
+      re.lastIndex = re.global ? match.index + match[0].length : lastIndex;
+    }
+    if (NPCG_INCLUDED && match && match.length > 1) {
+      // Fix browsers whose `exec` methods don't consistently return `undefined`
+      // for NPCG, like IE8. NOTE: This doesn't work for /(.?)?/
+      call$3(nativeReplace, match[0], reCopy, function () {
+        for (i = 1; i < arguments.length - 2; i++) {
+          if (arguments[i] === undefined) match[i] = undefined;
+        }
+      });
+    }
+
+    if (match && groups) {
+      match.groups = object = create(null);
+      for (i = 0; i < groups.length; i++) {
+        group = groups[i];
+        object[group[0]] = match[group[1]];
+      }
+    }
+
+    return match;
+  };
+}
+
+var regexpExec$3 = patchedExec;
+
+var $$1 = _export;
+var exec$1 = regexpExec$3;
+
+// `RegExp.prototype.exec` method
+// https://tc39.es/ecma262/#sec-regexp.prototype.exec
+$$1({ target: 'RegExp', proto: true, forced: /./.exec !== exec$1 }, {
+  exec: exec$1
+});
+
+var NATIVE_BIND = functionBindNative;
+
+var FunctionPrototype = Function.prototype;
+var apply$1 = FunctionPrototype.apply;
+var call$2 = FunctionPrototype.call;
+
+// eslint-disable-next-line es/no-reflect -- safe
+var functionApply = typeof Reflect == 'object' && Reflect.apply || (NATIVE_BIND ? call$2.bind(apply$1) : function () {
+  return call$2.apply(apply$1, arguments);
+});
+
+// TODO: Remove from `core-js@4` since it's moved to entry points
+
+var uncurryThis$3 = functionUncurryThisClause;
+var defineBuiltIn = defineBuiltIn$4;
+var regexpExec$2 = regexpExec$3;
+var fails$1 = fails$k;
+var wellKnownSymbol$1 = wellKnownSymbol$d;
+var createNonEnumerableProperty = createNonEnumerableProperty$5;
+
+var SPECIES$1 = wellKnownSymbol$1('species');
+var RegExpPrototype = RegExp.prototype;
+
+var fixRegexpWellKnownSymbolLogic = function (KEY, exec, FORCED, SHAM) {
+  var SYMBOL = wellKnownSymbol$1(KEY);
+
+  var DELEGATES_TO_SYMBOL = !fails$1(function () {
+    // String methods call symbol-named RegEp methods
+    var O = {};
+    O[SYMBOL] = function () { return 7; };
+    return ''[KEY](O) !== 7;
+  });
+
+  var DELEGATES_TO_EXEC = DELEGATES_TO_SYMBOL && !fails$1(function () {
+    // Symbol-named RegExp methods call .exec
+    var execCalled = false;
+    var re = /a/;
+
+    if (KEY === 'split') {
+      // We can't use real regex here since it causes deoptimization
+      // and serious performance degradation in V8
+      // https://github.com/zloirock/core-js/issues/306
+      re = {};
+      // RegExp[@@split] doesn't call the regex's exec method, but first creates
+      // a new one. We need to return the patched regex when creating the new one.
+      re.constructor = {};
+      re.constructor[SPECIES$1] = function () { return re; };
+      re.flags = '';
+      re[SYMBOL] = /./[SYMBOL];
+    }
+
+    re.exec = function () {
+      execCalled = true;
+      return null;
+    };
+
+    re[SYMBOL]('');
+    return !execCalled;
+  });
+
+  if (
+    !DELEGATES_TO_SYMBOL ||
+    !DELEGATES_TO_EXEC ||
+    FORCED
+  ) {
+    var uncurriedNativeRegExpMethod = uncurryThis$3(/./[SYMBOL]);
+    var methods = exec(SYMBOL, ''[KEY], function (nativeMethod, regexp, str, arg2, forceStringMethod) {
+      var uncurriedNativeMethod = uncurryThis$3(nativeMethod);
+      var $exec = regexp.exec;
+      if ($exec === regexpExec$2 || $exec === RegExpPrototype.exec) {
+        if (DELEGATES_TO_SYMBOL && !forceStringMethod) {
+          // The native String method already delegates to @@method (this
+          // polyfilled function), leasing to infinite recursion.
+          // We avoid it by directly calling the native @@method method.
+          return { done: true, value: uncurriedNativeRegExpMethod(regexp, str, arg2) };
+        }
+        return { done: true, value: uncurriedNativeMethod(str, regexp, arg2) };
+      }
+      return { done: false };
+    });
+
+    defineBuiltIn(String.prototype, KEY, methods[0]);
+    defineBuiltIn(RegExpPrototype, SYMBOL, methods[1]);
+  }
+
+  if (SHAM) createNonEnumerableProperty(RegExpPrototype[SYMBOL], 'sham', true);
+};
+
+var isConstructor = isConstructor$2;
+var tryToString = tryToString$3;
+
+var $TypeError$1 = TypeError;
+
+// `Assert: IsConstructor(argument) is true`
+var aConstructor$1 = function (argument) {
+  if (isConstructor(argument)) return argument;
+  throw new $TypeError$1(tryToString(argument) + ' is not a constructor');
+};
+
+var anObject$2 = anObject$9;
+var aConstructor = aConstructor$1;
+var isNullOrUndefined$1 = isNullOrUndefined$4;
+var wellKnownSymbol = wellKnownSymbol$d;
+
+var SPECIES = wellKnownSymbol('species');
+
+// `SpeciesConstructor` abstract operation
+// https://tc39.es/ecma262/#sec-speciesconstructor
+var speciesConstructor$1 = function (O, defaultConstructor) {
+  var C = anObject$2(O).constructor;
+  var S;
+  return C === undefined || isNullOrUndefined$1(S = anObject$2(C)[SPECIES]) ? defaultConstructor : aConstructor(S);
+};
+
+var uncurryThis$2 = functionUncurryThis;
+var toIntegerOrInfinity = toIntegerOrInfinity$3;
+var toString$1 = toString$5;
+var requireObjectCoercible$1 = requireObjectCoercible$5;
+
+var charAt$1 = uncurryThis$2(''.charAt);
+var charCodeAt = uncurryThis$2(''.charCodeAt);
+var stringSlice$1 = uncurryThis$2(''.slice);
+
+var createMethod = function (CONVERT_TO_STRING) {
+  return function ($this, pos) {
     var S = toString$1(requireObjectCoercible$1($this));
     var position = toIntegerOrInfinity(pos);
     var size = S.length;
@@ -3778,93 +4085,6 @@ const LayerInfoDialog = ({
   }));
 };
 
-const style$2 = {
-  width: 'auto !important',
-  height: 'auto !important',
-  padding: 0
-};
-const LayerSelectButtonConnect = ({
-  mapId,
-  source: _source = 'app',
-  tooltipTitle: _tooltipTitle = 'Open the layer selector',
-  icon: _icon = jsx(LayersAdd, {
-    "data-testid": "layerSelectButtonConnectIcon"
-  }),
-  isMultiMap: _isMultiMap = false
-}) => {
-  const dispatch = useDispatch();
-  const dialogType = _isMultiMap ? `${uiTypes.DialogTypes.LayerSelect}-${mapId}` : uiTypes.DialogTypes.LayerSelect;
-  const currentActiveMapId = useAppSelector(store => uiSelectors.getDialogMapId(store, dialogType));
-  const isOpenInStore = useAppSelector(store => uiSelectors.getisDialogOpen(store, dialogType));
-  const openLayerSelectDialog = React.useCallback(() => {
-    dispatch(uiActions.setActiveMapIdForDialog({
-      type: dialogType,
-      mapId,
-      setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
-      source: _source
-    }));
-  }, [currentActiveMapId, dispatch, isOpenInStore, mapId, _source, dialogType]);
-  return jsx(CustomIconButton, Object.assign({
-    onClick: openLayerSelectDialog,
-    sx: style$2,
-    id: "layerSelectButton",
-    "data-testid": "layerSelectButton",
-    tooltipTitle: _tooltipTitle
-  }, {
-    children: _icon
-  }));
-};
-
-const KeywordFilterButtonConnect = ({
-  mapId,
-  source: _source = 'app',
-  isMultiMap
-}) => {
-  const dispatch = useDispatch();
-  const dialogType = isMultiMap ? `${uiTypes.DialogTypes.KeywordFilter}-${mapId}` : uiTypes.DialogTypes.KeywordFilter;
-  const currentActiveMapId = useAppSelector(store => uiSelectors.getDialogMapId(store, dialogType));
-  const isOpenInStore = useAppSelector(store => uiSelectors.getisDialogOpen(store, dialogType));
-  const openFilterResultsDialog = React.useCallback(() => {
-    dispatch(uiActions.setActiveMapIdForDialog({
-      type: dialogType,
-      mapId,
-      setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
-      source: _source
-    }));
-  }, [currentActiveMapId, dispatch, isOpenInStore, mapId, _source, dialogType]);
-  return jsx(CustomIconButton, Object.assign({
-    variant: "tool",
-    onClick: openFilterResultsDialog,
-    isSelected: isOpenInStore,
-    id: "keywordFilterButton",
-    "data-testid": "keywordFilterButton"
-  }, {
-    children: jsx(Filter, {})
-  }));
-};
-
-const SearchFieldConnect = () => {
-  const dispatch = useDispatch();
-  const searchFilter = useAppSelector(store => getSearchFilter(store));
-  const toggleServicePopup = url => {
-    dispatch(layerSelectActions.toggleServicePopup({
-      isOpen: true,
-      url,
-      variant: 'save'
-    }));
-  };
-  const setSearchFilter = filterText => {
-    dispatch(layerSelectActions.setSearchFilter({
-      filterText
-    }));
-  };
-  return jsx(SearchField, {
-    setSearchFilter: setSearchFilter,
-    searchFilter: searchFilter,
-    onOpenServicePopup: toggleServicePopup
-  });
-};
-
 const LayerAddRemoveButton = ({
   layer,
   layerIndex,
@@ -4049,7 +4269,7 @@ const LayerListRow = ({
   const rowHeight = widthToRowHeight(layerSelectWidth);
   const columns = widthToColumns(layerSelectWidth);
   const dimensions = getDimensionsList(layer.dimensions);
-  return jsxs(Grid$1, Object.assign({
+  return jsxs(Grid, Object.assign({
     "data-testid": "layerListLayerRow",
     container: true,
     justifyContent: "center",
@@ -4063,12 +4283,12 @@ const LayerListRow = ({
       borderColor: 'geowebColors.cards.cardContainerBorder'
     }
   }, {
-    children: [jsxs(Grid$1, Object.assign({
+    children: [jsxs(Grid, Object.assign({
       container: true,
       item: true,
       sx: columns.column8
     }, {
-      children: [jsx(Grid$1, Object.assign({
+      children: [jsx(Grid, Object.assign({
         item: true,
         xs: 12
       }, {
@@ -4087,7 +4307,7 @@ const LayerListRow = ({
             search: searchFilter
           })
         }))
-      })), jsxs(Grid$1, Object.assign({
+      })), jsxs(Grid, Object.assign({
         item: true,
         container: true,
         direction: "column",
@@ -4111,15 +4331,15 @@ const LayerListRow = ({
           mapId: mapId,
           serviceName: service.name
         })]
-      })), jsxs(Grid$1, Object.assign({
+      })), jsxs(Grid, Object.assign({
         item: true,
         sx: columns.column2
       }, {
-        children: [jsx(Grid$1, Object.assign({
+        children: [jsx(Grid, Object.assign({
           item: true,
           sx: columns.column3
         }, {
-          children: layer.abstract && jsx(Typography$1, Object.assign({
+          children: layer.abstract && jsx(Typography, Object.assign({
             "data-testid": "layerAbstract",
             sx: layerInfoStyle
           }, {
@@ -4128,30 +4348,30 @@ const LayerListRow = ({
               search: searchFilter
             })
           }))
-        })), jsxs(Grid$1, Object.assign({
+        })), jsxs(Grid, Object.assign({
           item: true,
           container: true,
           sx: columns.column4
         }, {
-          children: [jsx(Grid$1, Object.assign({
+          children: [jsx(Grid, Object.assign({
             item: true,
             sx: columns.column5
           }, {
             children: jsx(LayerListDimensions, {
               dimensions: dimensions
             })
-          })), jsxs(Grid$1, Object.assign({
+          })), jsxs(Grid, Object.assign({
             item: true,
             sx: columns.column6
           }, {
-            children: [layer.path.length > 0 && jsxs(Typography$1, Object.assign({
+            children: [layer.path.length > 0 && jsxs(Typography, Object.assign({
               sx: layerInfoStyle
             }, {
               children: ["Groups:", ' ', jsx(SearchHighlight, {
                 text: layer.path.join(' / '),
                 search: searchFilter
               })]
-            })), ((_a = layer.keywords) === null || _a === void 0 ? void 0 : _a.length) > 0 && jsxs(Typography$1, Object.assign({
+            })), ((_a = layer.keywords) === null || _a === void 0 ? void 0 : _a.length) > 0 && jsxs(Typography, Object.assign({
               sx: layerInfoStyle
             }, {
               children: ["Keywords:", ' ', jsx(SearchHighlight, {
@@ -4164,7 +4384,7 @@ const LayerListRow = ({
           }))]
         }))]
       }))]
-    })), jsx(Grid$1, Object.assign({
+    })), jsx(Grid, Object.assign({
       container: true,
       item: true,
       sx: columns.column9,
@@ -4305,6 +4525,65 @@ const LayerListConnect = ({
   });
 };
 
+const style$2 = {
+  width: 'auto !important',
+  height: 'auto !important',
+  padding: 0
+};
+const LayerSelectButtonConnect = ({
+  mapId,
+  source: _source = 'app',
+  tooltipTitle: _tooltipTitle = 'Open the layer selector',
+  icon: _icon = jsx(LayersAdd, {
+    "data-testid": "layerSelectButtonConnectIcon"
+  }),
+  isMultiMap: _isMultiMap = false
+}) => {
+  const dispatch = useDispatch();
+  const dialogType = _isMultiMap ? `${uiTypes.DialogTypes.LayerSelect}-${mapId}` : uiTypes.DialogTypes.LayerSelect;
+  const currentActiveMapId = useAppSelector(store => uiSelectors.getDialogMapId(store, dialogType));
+  const isOpenInStore = useAppSelector(store => uiSelectors.getisDialogOpen(store, dialogType));
+  const openLayerSelectDialog = React.useCallback(() => {
+    dispatch(uiActions.setActiveMapIdForDialog({
+      type: dialogType,
+      mapId,
+      setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
+      source: _source
+    }));
+  }, [currentActiveMapId, dispatch, isOpenInStore, mapId, _source, dialogType]);
+  return jsx(CustomIconButton, Object.assign({
+    onClick: openLayerSelectDialog,
+    sx: style$2,
+    id: "layerSelectButton",
+    "data-testid": "layerSelectButton",
+    tooltipTitle: _tooltipTitle
+  }, {
+    children: _icon
+  }));
+};
+
+const SearchFieldConnect = () => {
+  const dispatch = useDispatch();
+  const searchFilter = useAppSelector(store => getSearchFilter(store));
+  const toggleServicePopup = url => {
+    dispatch(layerSelectActions.toggleServicePopup({
+      isOpen: true,
+      url,
+      variant: 'save'
+    }));
+  };
+  const setSearchFilter = filterText => {
+    dispatch(layerSelectActions.setSearchFilter({
+      filterText
+    }));
+  };
+  return jsx(SearchField, {
+    setSearchFilter: setSearchFilter,
+    searchFilter: searchFilter,
+    onOpenServicePopup: toggleServicePopup
+  });
+};
+
 const style$1 = {
   borderRadius: '20px!important',
   marginRight: '4px',
@@ -4331,924 +4610,645 @@ const ServiceChip = ({
         variant: "boxed",
         selected: Boolean(isSelected),
         tabIndex: 0,
-        "data-testid": _all ? 'serviceChipAll' : 'serviceChip',
-        onClick: () => toggleChip(chip),
-        onKeyPress: () => toggleChip(chip),
-        disabled: isDisabled,
-        sx: style$1
-      }, {
-        children: service ? service.serviceName : 'All'
-      }))
-    })
-  }));
-};
-
-const ServiceChipConnect = ({
-  service,
-  isAllSelected
-}) => {
-  const dispatch = useDispatch();
-  const serviceId = service.serviceId;
-  const toggleChip = () => {
-    if (service.enabled) {
-      if (isAllSelected) {
-        dispatch(layerSelectActions.onlyThisServiceEnabled({
-          serviceId
-        }));
-        return;
-      }
-      dispatch(layerSelectActions.disableActiveService({
-        serviceId
-      }));
-      return;
-    }
-    dispatch(layerSelectActions.enableActiveService({
-      serviceId
-    }));
-  };
-  return jsx(ServiceChip, {
-    service: service,
-    toggleChip: toggleChip,
-    isSelected: isAllSelected ? false : service.enabled,
-    isDisabled: service.isLoading
-  });
-};
-const AllChipConnect = ({
-  isAllSelected
-}) => {
-  const dispatch = useDispatch();
-  return jsx(ServiceChip, {
-    toggleChip: () => {
-      if (!isAllSelected) {
-        dispatch(layerSelectActions.enableAllActiveServices());
-      }
-    },
-    isSelected: isAllSelected
-  });
-};
-
-const ServiceList = ({
-  activeServicesById,
-  setHeight
-}) => {
-  const ref = React.useRef(null);
-  const [serviceListHeight, setServiceListHeight] = React.useState(0);
-  const clientHeight = ref && ref.current && ref.current.clientHeight && ref.current.clientHeight;
-  React.useEffect(() => {
-    if (ref && ref.current && ref.current.clientHeight) {
-      setServiceListHeight(ref.current.clientHeight);
-    }
-  }, [activeServicesById, clientHeight]);
-  React.useEffect(() => {
-    setHeight(serviceListHeight);
-  }, [serviceListHeight, setHeight]);
-  const activeServicesIds = Object.keys(activeServicesById);
-  const activeServices = Object.values(activeServicesById);
-  const isAllSelected = activeServices.every(activeService => activeService.enabled);
-  return jsx(Box$1, Object.assign({
-    sx: {
-      marginTop: '8px',
-      width: '100%',
-      overflow: 'hidden'
-    },
-    "data-testid": "serviceList"
-  }, {
-    children: jsxs(Box$1, Object.assign({
-      sx: {
-        width: '100%',
-        display: 'block',
-        alignItems: 'center',
-        float: 'left',
-        paddingLeft: '48px',
-        paddingRight: '40px',
-        marginBottom: '8px',
-        fontSize: '0.875rem'
-      },
-      ref: ref
-    }, {
-      children: [(activeServicesIds === null || activeServicesIds === void 0 ? void 0 : activeServicesIds.length) && jsx(AllChipConnect, {
-        isAllSelected: isAllSelected
-      }), activeServices.map(service => {
-        return jsx(ServiceChipConnect, {
-          service: service,
-          isAllSelected: isAllSelected
-        }, service.serviceUrl);
-      })]
-    }))
-  }));
-};
-
-const ServiceListConnect = ({
-  setHeight
-}) => {
-  const activeServices = useAppSelector(store => getActiveServices(store));
-  return jsx(ServiceList, {
-    setHeight: setHeight,
-    activeServicesById: sortByService(activeServices)
-  });
-};
-
-const styles = {
-  servicesContainer: {
-    width: '360px',
-    maxHeight: '412px',
-    top: '140px',
-    backgroundColor: 'geowebColors.background.surface',
-    boxShadow: 6,
-    overflow: 'auto'
-  },
-  header: {
-    position: 'sticky',
-    top: 0,
-    fontSize: 'default',
-    padding: '12px',
-    backgroundColor: 'geowebColors.background.surface',
-    zIndex: 100
-  },
-  loading: {
-    position: 'absolute',
-    zIndex: 101
-  },
-  footer: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    position: 'sticky',
-    bottom: 0,
-    backgroundColor: 'geowebColors.background.surface',
-    zIndex: 100
-  },
-  button: {
-    margin: '16px',
-    width: '80%',
-    fontSize: '12px',
-    textTransform: 'none'
-  }
-};
-const stopTabPropagation = event => {
-  if (event.key === 'Tab') {
-    event.stopPropagation();
-  }
-};
-const ServiceOptionsDialog = ({
-  services,
-  layerSelectRemoveService,
-  layerSelectReloadService,
-  selectedLayers,
-  setServicePopupInfo,
-  isLoading: _isLoading = false
-}) => {
-  const openAddService = () => {
-    setServicePopupInfo({
-      isOpen: true,
-      variant: 'add'
-    });
-  };
-  const dialogRef = React.useRef(null);
-  React.useEffect(() => {
-    var _a;
-    (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-  }, []);
-  return jsxs(Box$1, Object.assign({
-    sx: styles.servicesContainer,
-    "data-testid": "ServiceDialog",
-    onKeyDown: event => {
-      if (event.key !== 'Escape') {
-        event.stopPropagation();
-      }
-    },
-    tabIndex: -1,
-    ref: dialogRef
-  }, {
-    children: [jsx(Box$1, Object.assign({
-      sx: styles.header
-    }, {
-      children: "Services"
-    })), jsx(Backdrop, Object.assign({
-      sx: styles.loading,
-      open: _isLoading
-    }, {
-      children: jsx(CircularProgress, {})
-    })), jsx(Rows, {
-      services: services,
-      layerSelectRemoveService: layerSelectRemoveService,
-      layerSelectReloadService: layerSelectReloadService,
-      setServicePopupInfo: setServicePopupInfo,
-      selectedLayers: selectedLayers
-    }), jsx(Box$1, Object.assign({
-      sx: styles.footer
-    }, {
-      children: jsx(Button, Object.assign({
-        onClick: openAddService,
-        onKeyDown: stopTabPropagation,
-        "data-testid": "openAddServiceButton",
-        sx: styles.button,
-        variant: "tertiary",
-        startIcon: jsx(Add, {})
-      }, {
-        children: "Add a new service"
-      }))
-    }))]
-  }));
-};
-const updateServiceTitle = 'Update layers from WMS service';
-const editServiceTitle = 'Edit Service';
-const showServiceTitle = 'Show Service';
-const deleteServiceTitle = hasActiveLayers => {
-  return hasActiveLayers ? 'Service has active layers. Cannot remove this service' : 'Delete Service';
-};
-const tooltipPlacement = () => {
-  return 'left';
-};
-const tooltipPopperProps = {
-  disablePortal: true,
-  sx: {
-    '& .MuiTooltip-tooltip': {
-      width: '200px',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center'
-    }
-  }
-};
-const Rows = ({
-  services,
-  layerSelectReloadService,
-  layerSelectRemoveService,
-  setServicePopupInfo,
-  selectedLayers
-}) => {
-  const checkIfServiceHasActiveLayers = serviceUrl => {
-    const foundService = selectedLayers.find(object => object.service === serviceUrl);
-    if (foundService) {
-      return true;
-    }
-    return false;
-  };
-  const sortedServices = sortByService(services);
-  return jsx(List, Object.assign({
-    disablePadding: true
-  }, {
-    children: Object.keys(sortedServices).map(serviceId => {
-      const {
-        serviceUrl,
-        serviceName,
-        scope
-      } = services[serviceId];
-      const serviceHasActiveLayers = checkIfServiceHasActiveLayers(serviceUrl);
-      const userAddedService = isUserAddedService(scope);
-      return jsxs(ListItem, {
-        children: [jsx(ListItemText, Object.assign({
-          style: {
-            fontSize: '16px'
-          }
-        }, {
-          children: jsx(Typography$1, Object.assign({
-            noWrap: true,
-            style: {
-              textOverflow: 'ellipsis',
-              paddingRight: '70px'
-            }
-          }, {
-            children: serviceName
-          }))
-        })), jsx(ListItemSecondaryAction, Object.assign({
-          sx: {
-            marginRight: '0px',
-            width: 96,
-            button: {
-              marginLeft: 1
-            }
-          }
-        }, {
-          children: jsxs(Grid$1, Object.assign({
-            container: true,
-            justifyContent: "left"
-          }, {
-            children: [jsx(CustomTooltip, Object.assign({
-              "data-testid": "updateServiceTooltip",
-              title: updateServiceTitle,
-              placement: tooltipPlacement(),
-              PopperProps: tooltipPopperProps
-            }, {
-              children: jsx(CustomIconButton, Object.assign({
-                "data-testid": "updateServiceButton",
-                "aria-label": "Update layers from WMS service",
-                onKeyDown: stopTabPropagation,
-                onClick: () => {
-                  layerSelectReloadService(serviceUrl);
-                }
-              }, {
-                children: jsx(Cached, {})
-              }))
-            })), userAddedService ? jsx(CustomTooltip, Object.assign({
-              title: editServiceTitle,
-              placement: tooltipPlacement(),
-              PopperProps: tooltipPopperProps
-            }, {
-              children: jsx("span", {
-                children: jsx(CustomIconButton, Object.assign({
-                  "aria-label": "edit service",
-                  "data-testid": "openEditServiceButton",
-                  onKeyDown: stopTabPropagation,
-                  onClick: () => {
-                    setServicePopupInfo({
-                      isOpen: true,
-                      serviceId,
-                      serviceUrl,
-                      variant: 'edit'
-                    });
-                  }
-                }, {
-                  children: jsx(Edit, {})
-                }))
-              })
-            })) : jsx(CustomTooltip, Object.assign({
-              title: showServiceTitle,
-              placement: tooltipPlacement(),
-              PopperProps: tooltipPopperProps
-            }, {
-              children: jsx("span", {
-                children: jsx(CustomIconButton, Object.assign({
-                  "aria-label": "show service",
-                  "data-testid": "openShowServiceButton",
-                  onKeyDown: stopTabPropagation,
-                  onClick: () => {
-                    setServicePopupInfo({
-                      isOpen: true,
-                      serviceId,
-                      serviceUrl,
-                      variant: 'show'
-                    });
-                  }
-                }, {
-                  children: jsx(Visibility, {})
-                }))
-              })
-            })), userAddedService && jsx(Box$1, {
-              children: jsx(CustomTooltip, Object.assign({
-                title: deleteServiceTitle(serviceHasActiveLayers),
-                PopperProps: tooltipPopperProps,
-                placement: tooltipPlacement(),
-                "data-testid": "removeServiceTooltip"
-              }, {
-                children: jsx("span", {
-                  children: jsx(CustomIconButton, Object.assign({
-                    "data-testid": "removeServiceButton",
-                    "aria-label": "delete service",
-                    disabled: serviceHasActiveLayers,
-                    onKeyDown: stopTabPropagation,
-                    onClick: () => layerSelectRemoveService(serviceId, serviceUrl, serviceName)
-                  }, {
-                    children: jsx(Delete, {})
-                  }))
-                })
-              }))
-            })]
-          }))
-        }))]
-      }, serviceUrl);
+        "data-testid": _all ? 'serviceChipAll' : 'serviceChip',
+        onClick: () => toggleChip(chip),
+        onKeyPress: () => toggleChip(chip),
+        disabled: isDisabled,
+        sx: style$1
+      }, {
+        children: service ? service.serviceName : 'All'
+      }))
     })
   }));
 };
 
-const VALIDATIONS_NAME_EXISTING = 'This name already exists. Choose another name.';
-const VALIDATIONS_SERVICE_EXISTING = 'URL already exists.';
-const VALIDATIONS_SERVICE_VALID_URL = 'Not a valid URL.';
-const VALIDATIONS_REQUEST_FAILED = 'Download failed. Check the URL.';
-const validateServiceName = (value, services, ownServiceName = '') => {
-  const serviceName = value === null || value === void 0 ? void 0 : value.toLowerCase();
-  const foundName = Object.keys(services).find(serviceId => {
-    var _a;
-    return ((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceName.toLowerCase()) === serviceName && serviceName !== ownServiceName.toLocaleLowerCase();
+const ServiceChipConnect = ({
+  service,
+  isAllSelected
+}) => {
+  const dispatch = useDispatch();
+  const serviceId = service.serviceId;
+  const toggleChip = () => {
+    if (service.enabled) {
+      if (isAllSelected) {
+        dispatch(layerSelectActions.onlyThisServiceEnabled({
+          serviceId
+        }));
+        return;
+      }
+      dispatch(layerSelectActions.disableActiveService({
+        serviceId
+      }));
+      return;
+    }
+    dispatch(layerSelectActions.enableActiveService({
+      serviceId
+    }));
+  };
+  return jsx(ServiceChip, {
+    service: service,
+    toggleChip: toggleChip,
+    isSelected: isAllSelected ? false : service.enabled,
+    isDisabled: service.isLoading
   });
-  return foundName === undefined ? true : VALIDATIONS_NAME_EXISTING;
-};
-const isValidUrl = url => {
-  if (url === '' || url === null || typeof url === 'undefined') {
-    return false;
-  }
-  const matcher = /^(?:\w+:)?\/\/([^\s.]+\.\S{2}|[0-9a-zA-Z]+[:?\d]*)\S*$/;
-  if (!matcher.test(url)) {
-    return false;
-  }
-  return true;
 };
-const validateServiceUrl = (value, services) => {
-  const serviceUrl = value;
-  // validate valid url
-  const isServiceUrlValid = isValidUrl(serviceUrl);
-  if (!isServiceUrlValid) {
-    return VALIDATIONS_SERVICE_VALID_URL;
-  }
-  // check url existing
-  const foundUrl = Object.keys(services).find(serviceId => {
-    var _a;
-    return ((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceUrl) === serviceUrl;
+const AllChipConnect = ({
+  isAllSelected
+}) => {
+  const dispatch = useDispatch();
+  return jsx(ServiceChip, {
+    toggleChip: () => {
+      if (!isAllSelected) {
+        dispatch(layerSelectActions.enableAllActiveServices());
+      }
+    },
+    isSelected: isAllSelected
   });
-  if (foundUrl) {
-    return VALIDATIONS_SERVICE_EXISTING;
-  }
-  return true;
 };
-const loadWMSService = (serviceUrl, forceReload = false) => __awaiter(void 0, void 0, void 0, function* () {
-  const layers = yield getCapabilities.getLayersFlattenedFromService(serviceUrl, forceReload);
-  const service = WMGetServiceFromStore(serviceUrl);
-  return {
-    id: service.id,
-    name: service.title,
-    serviceUrl,
-    abstract: service.abstract,
-    layers,
-    scope: 'user'
-  };
-});
 
-const getService = (services, serviceUrl) => {
-  const serviceIds = Object.keys(services);
-  const serviceIndex = serviceIds.findIndex(serviceId => {
-    var _a;
-    return ((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceUrl) === serviceUrl;
-  });
-  if (serviceIndex < 0) {
-    return null;
-  }
-  return services[serviceIds[serviceIndex]];
-};
-const getServiceSuccesUpdateMessage = serviceName => `Service "${serviceName}" has been succesfully updated`;
-const getServiceFailedUpdateMessage = error => `Unable to update service, reason: "${error.message}"`;
-const ServiceOptionsDialogConnect = ({
-  mapId
+const ServiceList = ({
+  activeServicesById,
+  setHeight
 }) => {
-  const [isLoading, setIsLoading] = React.useState(false);
-  const dispatch = useDispatch();
-  const serviceSetLayers = React.useCallback(payload => {
-    dispatch(serviceActions.serviceSetLayers(Object.assign(Object.assign({}, payload), {
-      isUpdating: true
-    })));
-  }, [dispatch]);
-  const setServicePopupInfo = React.useCallback(payload => {
-    dispatch(layerSelectActions.toggleServicePopup(Object.assign({}, payload)));
-  }, [dispatch]);
-  const showSnackbar = React.useCallback(message => {
-    dispatch(snackbarActions.openSnackbar({
-      message
-    }));
-  }, [dispatch]);
-  const services = useAppSelector(store => getActiveServices(store));
-  const selectedLayers = useAppSelector(store => mapSelectors.getMapLayers(store, mapId));
-  const layerSelectRemoveService = React.useCallback((serviceId, serviceUrl, serviceName) => {
-    const message = `Service "${serviceName}" has been deleted`;
-    showSnackbar(message);
-    dispatch(layerSelectActions.layerSelectRemoveService({
-      serviceId,
-      serviceUrl
-    }));
-  }, [dispatch, showSnackbar]);
-  const layerSelectReloadService = React.useCallback(serviceUrl => __awaiter(void 0, void 0, void 0, function* () {
-    setIsLoading(true);
-    try {
-      const layersForService = yield loadWMSService(serviceUrl, true);
-      const service = getService(services, serviceUrl);
-      serviceSetLayers({
-        id: layersForService.id,
-        name: service && service.serviceName || layersForService.name,
-        serviceUrl,
-        abstract: service && service.abstract || layersForService.abstract,
-        layers: layersForService.layers,
-        scope: service && service.scope || 'user',
-        isUpdating: true
-      });
-      clearImageCache();
-      const serviceTitle = service && service.serviceName || layersForService.name;
-      showSnackbar(getServiceSuccesUpdateMessage(serviceTitle));
-    } catch (error) {
-      // TODO: Maarten Plieger 2022-11-02: Snackbars should not be used to inform the user that something went wrong.
-      // https://gitlab.com/opengeoweb/opengeoweb/-/issues/2819
-      showSnackbar(getServiceFailedUpdateMessage(error));
-    } finally {
-      setIsLoading(false);
+  const ref = React.useRef(null);
+  const [serviceListHeight, setServiceListHeight] = React.useState(0);
+  const clientHeight = ref && ref.current && ref.current.clientHeight && ref.current.clientHeight;
+  React.useEffect(() => {
+    if (ref && ref.current && ref.current.clientHeight) {
+      setServiceListHeight(ref.current.clientHeight);
     }
-  }), [serviceSetLayers, services, showSnackbar]);
-  return jsx(ServiceOptionsDialog, {
-    selectedLayers: selectedLayers,
-    services: services,
-    layerSelectRemoveService: layerSelectRemoveService,
-    layerSelectReloadService: layerSelectReloadService,
-    setServicePopupInfo: setServicePopupInfo,
-    isLoading: isLoading
+  }, [activeServicesById, clientHeight]);
+  React.useEffect(() => {
+    setHeight(serviceListHeight);
+  }, [serviceListHeight, setHeight]);
+  const activeServicesIds = Object.keys(activeServicesById);
+  const activeServices = Object.values(activeServicesById);
+  const isAllSelected = activeServices.every(activeService => activeService.enabled);
+  return jsx(Box$1, Object.assign({
+    sx: {
+      marginTop: '8px',
+      width: '100%',
+      overflow: 'hidden'
+    },
+    "data-testid": "serviceList"
+  }, {
+    children: jsxs(Box$1, Object.assign({
+      sx: {
+        width: '100%',
+        display: 'block',
+        alignItems: 'center',
+        float: 'left',
+        paddingLeft: '48px',
+        paddingRight: '40px',
+        marginBottom: '8px',
+        fontSize: '0.875rem'
+      },
+      ref: ref
+    }, {
+      children: [(activeServicesIds === null || activeServicesIds === void 0 ? void 0 : activeServicesIds.length) && jsx(AllChipConnect, {
+        isAllSelected: isAllSelected
+      }), activeServices.map(service => {
+        return jsx(ServiceChipConnect, {
+          service: service,
+          isAllSelected: isAllSelected
+        }, service.serviceUrl);
+      })]
+    }))
+  }));
+};
+
+const ServiceListConnect = ({
+  setHeight
+}) => {
+  const activeServices = useAppSelector(store => getActiveServices(store));
+  return jsx(ServiceList, {
+    setHeight: setHeight,
+    activeServicesById: sortByService(activeServices)
   });
 };
-
-const ServiceOptionsButton = ({
-  mapId
-}) => {
-  return jsx(ToggleMenu, Object.assign({
-    buttonTestId: "serviceOptionsButton",
-    menuPosition: "bottom"
-  }, {
-    children: jsx(ServiceOptionsDialogConnect, {
-      mapId: mapId
-    })
-  }));
+
+const styles = {
+  servicesContainer: {
+    width: '360px',
+    maxHeight: '412px',
+    top: '140px',
+    backgroundColor: 'geowebColors.background.surface',
+    boxShadow: 6,
+    overflow: 'auto'
+  },
+  header: {
+    position: 'sticky',
+    top: 0,
+    fontSize: 'default',
+    padding: '12px',
+    backgroundColor: 'geowebColors.background.surface',
+    zIndex: 100
+  },
+  loading: {
+    position: 'absolute',
+    zIndex: 101
+  },
+  footer: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'sticky',
+    bottom: 0,
+    backgroundColor: 'geowebColors.background.surface',
+    zIndex: 100
+  },
+  button: {
+    margin: '16px',
+    width: '80%',
+    fontSize: '12px',
+    textTransform: 'none'
+  }
+};
+const stopTabPropagation = event => {
+  if (event.key === 'Tab') {
+    event.stopPropagation();
+  }
 };
-
-const LayerSelect = ({
-  mapId,
-  bounds,
-  onClose: _onClose = () => {},
-  showTitle,
-  isOpen,
-  onMouseDown: _onMouseDown = () => {},
-  order: _order = 0,
-  source: _source = 'module',
-  startSize: _startSize = {
-    width: 750,
-    height: 500
-  },
-  isMultiMap: _isMultiMap = false
+const ServiceOptionsDialog = ({
+  services,
+  layerSelectRemoveService,
+  layerSelectReloadService,
+  selectedLayers,
+  setServicePopupInfo,
+  isLoading: _isLoading = false
 }) => {
-  const initialServiceListHeight = 37;
-  const [height, setHeight] = React.useState(_startSize.height);
-  const [width, setWidth] = React.useState(_startSize.width);
-  const [serviceListHeight, setServiceListHeight] = React.useState(initialServiceListHeight);
-  const onChangeSize = ({
-    height,
-    width
-  }) => {
-    setHeight(height);
-    setWidth(width);
-  };
-  const handleHeightChange = height => {
-    if (height > initialServiceListHeight) {
-      setServiceListHeight(height);
-    }
+  const openAddService = () => {
+    setServicePopupInfo({
+      isOpen: true,
+      variant: 'add'
+    });
   };
-  return jsxs(ToolContainerDraggable, Object.assign({
-    title: showTitle ? `Layer Select ${mapId}` : 'Layer Select',
-    startSize: {
-      width,
-      height
-    },
-    minWidth: 320,
-    minHeight: 126,
-    startPosition: {
-      top: 150,
-      left: 100
-    },
-    isOpen: isOpen,
-    onResizeStop: (_event, _direction, node) => {
-      const {
-        offsetWidth: width,
-        offsetHeight: height
-      } = node;
-      onChangeSize({
-        width,
-        height
-      });
-    },
-    onClose: _onClose,
-    bounds: bounds,
-    "data-testid": "layerSelectWindow",
-    onMouseDown: event => {
-      const target = event.target;
-      const isButtonInScrollableList = target.closest('.layerInfoButton') || target.closest('.layerAddRemoveButton');
-      // don't propagate when clicking on layerInfoButton or addRemoveButton
-      if (isButtonInScrollableList) {
+  const dialogRef = React.useRef(null);
+  React.useEffect(() => {
+    var _a;
+    (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  }, []);
+  return jsxs(Box$1, Object.assign({
+    sx: styles.servicesContainer,
+    "data-testid": "ServiceDialog",
+    onKeyDown: event => {
+      if (event.key !== 'Escape') {
         event.stopPropagation();
-        return;
       }
-      _onMouseDown(event);
     },
-    order: _order,
-    source: _source
+    tabIndex: -1,
+    ref: dialogRef
   }, {
     children: [jsx(Box$1, Object.assign({
-      sx: {
-        padding: '4px 16px 0 16px'
-      }
-    }, {
-      children: jsx(SearchFieldConnect, {})
-    })), jsx(Box$1, Object.assign({
-      sx: {
-        float: 'left',
-        position: 'absolute',
-        margin: '8px 8px 0 16px',
-        zIndex: 2
-      }
+      sx: styles.header
     }, {
-      children: jsx(KeywordFilterButtonConnect, {
-        mapId: mapId,
-        isMultiMap: _isMultiMap
-      })
-    })), jsx(Box$1, Object.assign({
-      sx: {
-        position: 'absolute',
-        margin: '8px 0 0 calc(100% - 40px)',
-        zIndex: 2
-      }
+      children: "Services"
+    })), jsx(Backdrop, Object.assign({
+      sx: styles.loading,
+      open: _isLoading
     }, {
-      children: jsx(ServiceOptionsButton, {
-        mapId: mapId
-      })
-    })), jsx(Box$1, {
-      children: jsx(ServiceListConnect, {
-        setHeight: handleHeightChange
-      })
+      children: jsx(CircularProgress, {})
+    })), jsx(Rows, {
+      services: services,
+      layerSelectRemoveService: layerSelectRemoveService,
+      layerSelectReloadService: layerSelectReloadService,
+      setServicePopupInfo: setServicePopupInfo,
+      selectedLayers: selectedLayers
     }), jsx(Box$1, Object.assign({
-      sx: {
-        padding: '0 16px'
-      }
+      sx: styles.footer
     }, {
-      children: jsx(LayerListConnect, {
-        mapId: mapId,
-        layerSelectHeight: height,
-        serviceListHeight: serviceListHeight,
-        layerSelectWidth: width
-      })
+      children: jsx(Button, Object.assign({
+        onClick: openAddService,
+        onKeyDown: stopTabPropagation,
+        "data-testid": "openAddServiceButton",
+        sx: styles.button,
+        variant: "tertiary",
+        startIcon: jsx(Add, {})
+      }, {
+        children: "Add a new service"
+      }))
     }))]
   }));
 };
-
-const FilterListItem = ({
-  filter,
-  toggleFilter,
-  enableOnlyOneFilter
+const updateServiceTitle = 'Update layers from WMS service';
+const editServiceTitle = 'Edit Service';
+const showServiceTitle = 'Show Service';
+const deleteServiceTitle = hasActiveLayers => {
+  return hasActiveLayers ? 'Service has active layers. Cannot remove this service' : 'Delete Service';
+};
+const tooltipPlacement = () => {
+  return 'left';
+};
+const tooltipPopperProps = {
+  disablePortal: true,
+  sx: {
+    '& .MuiTooltip-tooltip': {
+      width: '200px',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }
+};
+const Rows = ({
+  services,
+  layerSelectReloadService,
+  layerSelectRemoveService,
+  setServicePopupInfo,
+  selectedLayers
 }) => {
-  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 checkIfServiceHasActiveLayers = serviceUrl => {
+    const foundService = selectedLayers.find(object => object.service === serviceUrl);
+    if (foundService) {
+      return true;
     }
+    return false;
   };
-  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'
+  const sortedServices = sortByService(services);
+  return jsx(List, Object.assign({
+    disablePadding: true
+  }, {
+    children: Object.keys(sortedServices).map(serviceId => {
+      const {
+        serviceUrl,
+        serviceName,
+        scope
+      } = services[serviceId];
+      const serviceHasActiveLayers = checkIfServiceHasActiveLayers(serviceUrl);
+      const userAddedService = isUserAddedService(scope);
+      return jsxs(ListItem, {
+        children: [jsx(ListItemText, Object.assign({
+          style: {
+            fontSize: '16px'
           }
         }, {
-          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'
-              }
+          children: jsx(Typography, Object.assign({
+            noWrap: true,
+            style: {
+              textOverflow: 'ellipsis',
+              paddingRight: '70px'
             }
-          })
-        })), jsxs(Typography$1, Object.assign({
-          variant: "body2",
+          }, {
+            children: serviceName
+          }))
+        })), jsx(ListItemSecondaryAction, Object.assign({
           sx: {
-            fontSize: '16px',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden'
+            marginRight: '0px',
+            width: 96,
+            button: {
+              marginLeft: 1
+            }
           }
         }, {
-          children: [filter.name, " (", filter.amountVisible, ")"]
-        })), 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: jsxs(Grid, Object.assign({
+            container: true,
+            justifyContent: "left"
           }, {
-            children: jsx(Typography$1, Object.assign({
-              sx: {
-                color: 'geowebColors.buttons.primary.default.fill',
-                fontSize: '14px',
-                fontWeight: 500
-              }
+            children: [jsx(CustomTooltip, Object.assign({
+              "data-testid": "updateServiceTooltip",
+              title: updateServiceTitle,
+              placement: tooltipPlacement(),
+              PopperProps: tooltipPopperProps
             }, {
-              children: "ONLY"
-            }))
+              children: jsx(CustomIconButton, Object.assign({
+                "data-testid": "updateServiceButton",
+                "aria-label": "Update layers from WMS service",
+                onKeyDown: stopTabPropagation,
+                onClick: () => {
+                  layerSelectReloadService(serviceUrl);
+                }
+              }, {
+                children: jsx(Cached, {})
+              }))
+            })), userAddedService ? jsx(CustomTooltip, Object.assign({
+              title: editServiceTitle,
+              placement: tooltipPlacement(),
+              PopperProps: tooltipPopperProps
+            }, {
+              children: jsx("span", {
+                children: jsx(CustomIconButton, Object.assign({
+                  "aria-label": "edit service",
+                  "data-testid": "openEditServiceButton",
+                  onKeyDown: stopTabPropagation,
+                  onClick: () => {
+                    setServicePopupInfo({
+                      isOpen: true,
+                      serviceId,
+                      serviceUrl,
+                      variant: 'edit'
+                    });
+                  }
+                }, {
+                  children: jsx(Edit, {})
+                }))
+              })
+            })) : jsx(CustomTooltip, Object.assign({
+              title: showServiceTitle,
+              placement: tooltipPlacement(),
+              PopperProps: tooltipPopperProps
+            }, {
+              children: jsx("span", {
+                children: jsx(CustomIconButton, Object.assign({
+                  "aria-label": "show service",
+                  "data-testid": "openShowServiceButton",
+                  onKeyDown: stopTabPropagation,
+                  onClick: () => {
+                    setServicePopupInfo({
+                      isOpen: true,
+                      serviceId,
+                      serviceUrl,
+                      variant: 'show'
+                    });
+                  }
+                }, {
+                  children: jsx(Visibility, {})
+                }))
+              })
+            })), userAddedService && jsx(Box$1, {
+              children: jsx(CustomTooltip, Object.assign({
+                title: deleteServiceTitle(serviceHasActiveLayers),
+                PopperProps: tooltipPopperProps,
+                placement: tooltipPlacement(),
+                "data-testid": "removeServiceTooltip"
+              }, {
+                children: jsx("span", {
+                  children: jsx(CustomIconButton, Object.assign({
+                    "data-testid": "removeServiceButton",
+                    "aria-label": "delete service",
+                    disabled: serviceHasActiveLayers,
+                    onKeyDown: stopTabPropagation,
+                    onClick: () => layerSelectRemoveService(serviceId, serviceUrl, serviceName)
+                  }, {
+                    children: jsx(Delete, {})
+                  }))
+                })
+              }))
+            })]
           }))
-        }) : null]
-      }))
-    }));
-  }
-  return null;
+        }))]
+      }, serviceUrl);
+    })
+  }));
 };
 
-const KeywordFilterResultsListItemConnect = ({
-  filter
-}) => {
-  const dispatch = useDispatch();
-  const toggleFilter = React.useCallback(filterIds => {
-    dispatch(layerSelectActions.toggleFilter({
-      filterIds
-    }));
-  }, [dispatch]);
-  const enableOnlyOneFilter = React.useCallback(filterId => {
-    dispatch(layerSelectActions.enableOnlyOneFilter({
-      filterId
-    }));
-  }, [dispatch]);
-  return jsx(FilterListItem, {
-    filter: filter,
-    toggleFilter: toggleFilter,
-    enableOnlyOneFilter: enableOnlyOneFilter
+const VALIDATIONS_NAME_EXISTING = 'This name already exists. Choose another name.';
+const VALIDATIONS_SERVICE_EXISTING = 'URL already exists.';
+const VALIDATIONS_SERVICE_VALID_URL = 'Not a valid URL.';
+const VALIDATIONS_REQUEST_FAILED = 'Download failed. Check the URL.';
+const validateServiceName = (value, services, ownServiceName = '') => {
+  const serviceName = value === null || value === void 0 ? void 0 : value.toLowerCase();
+  const foundName = Object.keys(services).find(serviceId => {
+    var _a;
+    return ((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceName.toLowerCase()) === serviceName && serviceName !== ownServiceName.toLocaleLowerCase();
+  });
+  return foundName === undefined ? true : VALIDATIONS_NAME_EXISTING;
+};
+const isValidUrl = url => {
+  if (url === '' || url === null || typeof url === 'undefined') {
+    return false;
+  }
+  const matcher = /^(?:\w+:)?\/\/([^\s.]+\.\S{2}|[0-9a-zA-Z]+[:?\d]*)\S*$/;
+  if (!matcher.test(url)) {
+    return false;
+  }
+  return true;
+};
+const validateServiceUrl = (value, services) => {
+  const serviceUrl = value;
+  // validate valid url
+  const isServiceUrlValid = isValidUrl(serviceUrl);
+  if (!isServiceUrlValid) {
+    return VALIDATIONS_SERVICE_VALID_URL;
+  }
+  // check url existing
+  const foundUrl = Object.keys(services).find(serviceId => {
+    var _a;
+    return ((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceUrl) === serviceUrl;
   });
+  if (foundUrl) {
+    return VALIDATIONS_SERVICE_EXISTING;
+  }
+  return true;
 };
+const loadWMSService = (serviceUrl, forceReload = false) => __awaiter(void 0, void 0, void 0, function* () {
+  const layers = yield getCapabilities.getLayersFlattenedFromService(serviceUrl, forceReload);
+  const service = WMGetServiceFromStore(serviceUrl);
+  return {
+    id: service.id,
+    name: service.title,
+    serviceUrl,
+    abstract: service.abstract,
+    layers,
+    scope: 'user'
+  };
+});
 
-const KeywordFilterSelectAllSwitchConnect = () => {
+const getService = (services, serviceUrl) => {
+  const serviceIds = Object.keys(services);
+  const serviceIndex = serviceIds.findIndex(serviceId => {
+    var _a;
+    return ((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceUrl) === serviceUrl;
+  });
+  if (serviceIndex < 0) {
+    return null;
+  }
+  return services[serviceIds[serviceIndex]];
+};
+const getServiceSuccesUpdateMessage = serviceName => `Service "${serviceName}" has been succesfully updated`;
+const getServiceFailedUpdateMessage = error => `Unable to update service, reason: "${error.message}"`;
+const ServiceOptionsDialogConnect = ({
+  mapId
+}) => {
+  const [isLoading, setIsLoading] = React.useState(false);
   const dispatch = useDispatch();
-  const allFiltersActive = useAppSelector(store => isAllFiltersChecked(store));
-  const allFilterIds = useAppSelector(store => getAllFilterIds(store));
-  const checkedFilterIds = useAppSelector(store => getCheckedFilterIds(store));
-  const toggleFilters = React.useCallback(() => {
-    const filterIds = allFiltersActive ? checkedFilterIds : allFilterIds.filter(id => !checkedFilterIds.includes(id));
-    dispatch(layerSelectActions.toggleFilter({
-      filterIds
+  const serviceSetLayers = React.useCallback(payload => {
+    dispatch(serviceActions.serviceSetLayers(Object.assign(Object.assign({}, payload), {
+      isUpdating: true
+    })));
+  }, [dispatch]);
+  const setServicePopupInfo = React.useCallback(payload => {
+    dispatch(layerSelectActions.toggleServicePopup(Object.assign({}, payload)));
+  }, [dispatch]);
+  const showSnackbar = React.useCallback(message => {
+    dispatch(snackbarActions.openSnackbar({
+      message
     }));
-  }, [allFilterIds, allFiltersActive, checkedFilterIds, dispatch]);
-  return jsx(Switch, {
-    inputProps: {
-      'aria-label': 'All'
-    },
-    checked: allFiltersActive,
-    onChange: toggleFilters,
-    "data-testid": "customSwitch"
+  }, [dispatch]);
+  const services = useAppSelector(store => getActiveServices(store));
+  const selectedLayers = useAppSelector(store => mapSelectors.getMapLayers(store, mapId));
+  const layerSelectRemoveService = React.useCallback((serviceId, serviceUrl, serviceName) => {
+    const message = `Service "${serviceName}" has been deleted`;
+    showSnackbar(message);
+    dispatch(layerSelectActions.layerSelectRemoveService({
+      serviceId,
+      serviceUrl
+    }));
+  }, [dispatch, showSnackbar]);
+  const layerSelectReloadService = React.useCallback(serviceUrl => __awaiter(void 0, void 0, void 0, function* () {
+    setIsLoading(true);
+    try {
+      const layersForService = yield loadWMSService(serviceUrl, true);
+      const service = getService(services, serviceUrl);
+      serviceSetLayers({
+        id: layersForService.id,
+        name: service && service.serviceName || layersForService.name,
+        serviceUrl,
+        abstract: service && service.abstract || layersForService.abstract,
+        layers: layersForService.layers,
+        scope: service && service.scope || 'user',
+        isUpdating: true
+      });
+      clearImageCache();
+      const serviceTitle = service && service.serviceName || layersForService.name;
+      showSnackbar(getServiceSuccesUpdateMessage(serviceTitle));
+    } catch (error) {
+      // TODO: Maarten Plieger 2022-11-02: Snackbars should not be used to inform the user that something went wrong.
+      // https://gitlab.com/opengeoweb/opengeoweb/-/issues/2819
+      showSnackbar(getServiceFailedUpdateMessage(error));
+    } finally {
+      setIsLoading(false);
+    }
+  }), [serviceSetLayers, services, showSnackbar]);
+  return jsx(ServiceOptionsDialog, {
+    selectedLayers: selectedLayers,
+    services: services,
+    layerSelectRemoveService: layerSelectRemoveService,
+    layerSelectReloadService: layerSelectReloadService,
+    setServicePopupInfo: setServicePopupInfo,
+    isLoading: isLoading
   });
 };
 
-const DIALOG_TITLE = 'Groups & Keywords';
-const listStyle = {
-  padding: '0px'
-};
-const accordionDetailsStyle = {
-  padding: '0px',
-  margin: '0px'
+const ServiceOptionsButton = ({
+  mapId
+}) => {
+  return jsx(ToggleMenu, Object.assign({
+    buttonTestId: "serviceOptionsButton",
+    menuPosition: "bottom"
+  }, {
+    children: jsx(ServiceOptionsDialogConnect, {
+      mapId: mapId
+    })
+  }));
 };
-const KeywordFilterResults = ({
-  filters,
+
+const LayerSelect = ({
+  mapId,
   bounds,
   onClose: _onClose = () => {},
+  showTitle,
   isOpen,
   onMouseDown: _onMouseDown = () => {},
   order: _order = 0,
-  source: _source = 'module'
+  source: _source = 'module',
+  startSize: _startSize = {
+    width: 750,
+    height: 500
+  },
+  isMultiMap: _isMultiMap = false
 }) => {
+  const initialServiceListHeight = 37;
+  const [height, setHeight] = React.useState(_startSize.height);
+  const [width, setWidth] = React.useState(_startSize.width);
+  const [serviceListHeight, setServiceListHeight] = React.useState(initialServiceListHeight);
+  const onChangeSize = ({
+    height,
+    width
+  }) => {
+    setHeight(height);
+    setWidth(width);
+  };
+  const handleHeightChange = height => {
+    if (height > initialServiceListHeight) {
+      setServiceListHeight(height);
+    }
+  };
   return jsxs(ToolContainerDraggable, Object.assign({
-    title: DIALOG_TITLE,
-    "data-testid": "keywordFilterResults",
+    title: showTitle ? `Layer Select ${mapId}` : 'Layer Select',
     startSize: {
-      width: 349,
-      height: 600
+      width,
+      height
+    },
+    minWidth: 320,
+    minHeight: 126,
+    startPosition: {
+      top: 150,
+      left: 100
     },
-    minWidth: 312,
-    minHeight: 192,
     isOpen: isOpen,
+    onResizeStop: (_event, _direction, node) => {
+      const {
+        offsetWidth: width,
+        offsetHeight: height
+      } = node;
+      onChangeSize({
+        width,
+        height
+      });
+    },
     onClose: _onClose,
     bounds: bounds,
-    onMouseDown: _onMouseDown,
+    "data-testid": "layerSelectWindow",
+    onMouseDown: event => {
+      const target = event.target;
+      const isButtonInScrollableList = target.closest('.layerInfoButton') || target.closest('.layerAddRemoveButton');
+      // don't propagate when clicking on layerInfoButton or addRemoveButton
+      if (isButtonInScrollableList) {
+        event.stopPropagation();
+        return;
+      }
+      _onMouseDown(event);
+    },
     order: _order,
     source: _source
   }, {
-    children: [jsxs(Grid$1, Object.assign({
-      container: true,
-      item: true,
-      xs: 12,
-      justifyContent: "space-between",
-      alignItems: "center",
+    children: [jsx(Box$1, Object.assign({
       sx: {
-        backgroundColor: 'background.paper',
-        position: 'sticky',
-        top: 0,
-        zIndex: 100
+        padding: '4px 16px 0 16px'
       }
     }, {
-      children: [jsx(Grid$1, Object.assign({
-        container: true,
-        item: true,
-        xs: 6,
-        justifyContent: "flex-start",
-        alignItems: "center",
-        sx: {
-          padding: '15px 15px 0 24px'
-        }
-      }, {
-        children: "Select all"
-      })), jsx(Grid$1, Object.assign({
-        container: true,
-        item: true,
-        xs: 6,
-        justifyContent: "flex-end",
-        alignContent: "center",
-        sx: {
-          padding: '15px 15px 0 15px'
-        }
-      }, {
-        children: jsx(KeywordFilterSelectAllSwitchConnect, {})
-      }))]
-    })), jsx(CustomAccordion, Object.assign({
-      title: "Groups",
-      detailsSx: accordionDetailsStyle
+      children: jsx(SearchFieldConnect, {})
+    })), jsx(Box$1, Object.assign({
+      sx: {
+        float: 'left',
+        position: 'absolute',
+        margin: '8px 8px 0 16px',
+        zIndex: 2
+      }
     }, {
-      children: jsx(List, Object.assign({
-        dense: true,
-        style: listStyle
-      }, {
-        children: filters.groups.map(group => jsx(KeywordFilterResultsListItemConnect, {
-          filter: group
-        }, group.id))
-      }))
-    })), jsx(CustomAccordion, Object.assign({
-      title: "Keywords",
-      detailsSx: accordionDetailsStyle
+      children: jsx(KeywordFilterButtonConnect, {
+        mapId: mapId,
+        isMultiMap: _isMultiMap
+      })
+    })), jsx(Box$1, Object.assign({
+      sx: {
+        position: 'absolute',
+        margin: '8px 0 0 calc(100% - 40px)',
+        zIndex: 2
+      }
     }, {
-      children: jsx(List, Object.assign({
-        dense: true,
-        style: listStyle
-      }, {
-        children: filters.keywords.map(keyword => {
-          return jsx(KeywordFilterResultsListItemConnect, {
-            filter: keyword
-          }, keyword.id);
-        })
-      }))
+      children: jsx(ServiceOptionsButton, {
+        mapId: mapId
+      })
+    })), jsx(Box$1, {
+      children: jsx(ServiceListConnect, {
+        setHeight: handleHeightChange
+      })
+    }), jsx(Box$1, Object.assign({
+      sx: {
+        padding: '0 16px'
+      }
+    }, {
+      children: jsx(LayerListConnect, {
+        mapId: mapId,
+        layerSelectHeight: height,
+        serviceListHeight: serviceListHeight,
+        layerSelectWidth: width
+      })
     }))]
   }));
 };
 
-const KeywordFilterResultsConnect = ({
-  bounds,
-  mapId,
-  isMultiMap
-}) => {
-  const dialogType = isMultiMap ? `${uiTypes.DialogTypes.KeywordFilter}-${mapId}` : uiTypes.DialogTypes.KeywordFilter;
-  const {
-    dialogOrder,
-    onCloseDialog,
-    setDialogOrder,
-    isDialogOpen,
-    uiSource
-  } = useSetupDialog(dialogType);
-  const filters = useAppSelector(getFilters);
-  return jsx(KeywordFilterResults, {
-    bounds: bounds,
-    isOpen: isDialogOpen,
-    onClose: onCloseDialog,
-    onMouseDown: setDialogOrder,
-    order: dialogOrder,
-    source: uiSource,
-    filters: filters
-  });
-};
-
 const LayerInfoDialogConnect = () => {
   const layer = useAppSelector(store => getActiveLayerInfo(store));
   const {
@@ -5460,7 +5460,7 @@ const ServicePopupUnwrapped = ({
             }
           }
         }, {
-          children: [jsx(Typography$1, Object.assign({
+          children: [jsx(Typography, Object.assign({
             variant: "h5",
             component: "span"
           }, {
@@ -5722,4 +5722,4 @@ const LayerSelectConnect = ({
   });
 };
 
-export { LayerInfoButton, LayerInfoButtonConnect, LayerInfoDialog, LayerSelectButtonConnect, LayerSelectConnect, getUserAddedServices, isUserAddedService, layerSelectActions, layerSelectConfig, initialState as layerSelectInitialState, reducer as layerSelectReducer, selectors as layerSelectSelectors, types as layerSelectTypes, setUserAddedServices, useAppSelector };
+export { ADD_HEADING, AllChipConnect, COPY_URL_MESSAGE, DIALOG_TITLE, EDIT_HEADING, FilterListItem, KeywordFilterButtonConnect, KeywordFilterResults, KeywordFilterResultsConnect, KeywordFilterResultsListItemConnect, KeywordFilterSelectAllSwitchConnect, LayerAddRemoveButton, LayerInfoButton, LayerInfoButtonConnect, LayerInfoDialog, LayerList, LayerListConnect, LayerListDimensions, LayerListRow, LayerSelectButtonConnect, LayerSelectConnect, SAVE_HEADING, SearchFieldConnect, ServiceChip, ServiceChipConnect, ServiceList, ServiceListConnect, ServiceOptionsButton, ServiceOptionsDialog, ServiceOptionsDialogConnect, ServicePopup, ServicePopupConnect, ServicePopupDialogConnect, getServiceFailedUpdateMessage, getServiceSuccesUpdateMessage, getSuccesMessage, getUserAddedServices, isUserAddedService, layerSelectActions, layerSelectConfig, initialState as layerSelectInitialState, reducer as layerSelectReducer, selectors as layerSelectSelectors, types as layerSelectTypes, setUserAddedServices, useAppSelector };