@opengeoweb/layer-select 19.0.0 → 19.1.1

package/dist/index.esm.js

@@ -0,0 +1,3477 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { CustomIconButton, FilterOption, ToolContainerDraggable, CustomAccordion, CustomTooltip, SearchHighlight, SearchField, CustomToggleButton, AlertBanner, ToggleMenu, CustomDialog, sessionStorageProvider } from '@opengeoweb/shared';
+import { uiTypes, serviceActions, selectorMemoizationOptions, serviceSelectors, uiActions, getUserAddedServices, setUserAddedServices, layerActions, uiSelectors, layerSelectors, mapListener, serviceListener, layersListener, openlayersListener, uiReducer, layerReducer, serviceReducer, mapReducer, useSetupDialog, mapSelectors, layerTypes, mapEnums } from '@opengeoweb/store';
+import { Filter, ArrowDropDownDown, StacIcon, LayersAdd, MeteoGate, Add, Cached, Edit, Visibility, Delete, Copy } from '@opengeoweb/theme';
+import { createEntityAdapter, createSlice, createSelector, createListenerMiddleware, isAnyOf, combineReducers, configureStore } from '@reduxjs/toolkit';
+import { compact, countBy, partition } from 'lodash';
+import { snackbarListener, snackbarReducer, snackbarActions, snackbarTypes } from '@opengeoweb/snackbar';
+import { Switch, Grid, List, ToggleButtonGroup, ToggleButton, Box, Popper, Grow, Paper, ClickAwayListener, MenuList, MenuItem, Typography, useTheme, Backdrop, CircularProgress, Button, ListItem, ListItemText, LinearProgress, InputAdornment } from '@mui/material';
+import 'i18next';
+import { useTranslation } from 'react-i18next';
+import { List as List$1 } from 'react-window';
+import { getDimensionsList, LayerInfoButton, stacCatalogCollectionToLayerProps, fetchStacCatalogRoot, fetchStacCatalogCollections, clearImageCacheForAllMaps } from '@opengeoweb/webmap-react';
+import { LayerType, webmapUtils, getWMSServiceId, queryWMSServiceInfo, queryWMSLayers, invalidateWMSGetCapabilities } from '@opengeoweb/webmap';
+import { useFormContext } from 'react-hook-form';
+import { ReactHookFormProvider, defaultFormOptions, ReactHookFormTextField } from '@opengeoweb/form-fields';
+
+var en = {
+	"layer-select": "Layer Select",
+	"select-all": "Select all",
+	"groups-and-keywords-dialog-title": "Groups & Keywords",
+	add: "add",
+	remove: "remove",
+	"layer-list-results": "results",
+	groups: "Groups",
+	keywords: "Keywords",
+	"layer-select-button-tooltip": "Open the layer selector",
+	all: "All",
+	services: "Services",
+	"add-a-new-service": "Add a new service",
+	"update-service-title": "Update layers from WMS service",
+	"edit-service-title": "Edit Service",
+	"save-service-title": "Save service",
+	"show-service-title": "Show Service",
+	"service-has-active-layers-error": "Service has active layers. Cannot remove this service",
+	"delete-service": "Delete Service",
+	"copy-url-message": "Service URL copied to clipboard",
+	"get-success-message": "Service \"{{serviceName}}\" has been saved successfully",
+	"service-popup-helper-text": "Short description of what this service does",
+	close: "close",
+	cancel: "cancel",
+	save: "save",
+	"validations-name-existing": "This name already exists. Choose another name.",
+	"validations-service-existing": "URL already exists.",
+	"validations-service-valid-url": "Not a valid URL.",
+	"validations-request-failed": "Download failed. Check the URL.",
+	"validations-field-required": "This field is required",
+	"service-url-label": "This service refers to this URL",
+	"service-name-label": "Service name",
+	"service-abstracts-label": "Abstracts",
+	"service-successfully-updated": "Service \"{{serviceName}}\" has been succesfully updated",
+	"unable-to-update-service": "Unable to update service, reason: \"{{message}}\"",
+	"service-has-been-deleted": "Service \"{{serviceName}}\" has been deleted",
+	"add-to-all-maps": "Add to all maps",
+	"remove-from-all-maps": "Remove from all maps"
+};
+var fi = {
+	"layer-select": "Layer Select",
+	"select-all": "Valitse kaikki",
+	"groups-and-keywords-dialog-title": "Ryhmät ja Avainsanat",
+	add: "lisää",
+	remove: "poista",
+	"layer-list-results": "tulosta",
+	groups: "Ryhmät",
+	keywords: "Avainsanat",
+	"layer-select-button-tooltip": "Avaa Layer Select",
+	all: "Kaikki",
+	services: "Palvelut",
+	"add-a-new-service": "Lisää uusi pavelu",
+	"update-service-title": "Päivitä karttatasot WMS palvelusta",
+	"edit-service-title": "Muokkaa palvelua",
+	"save-service-title": "Tallenna palvelu",
+	"show-service-title": "Näytä palvelu",
+	"service-has-active-layers-error": "Palvelu sisältää aktiivisia karttatasoja. Palvelua ei voi poistaa",
+	"delete-service": "Poista palvelu",
+	"copy-url-message": "Palvelun osoite kopioitu leikepöydälle",
+	"get-success-message": "Palvelu \"{{serviceName}}\" tallennettu onnistuneesti",
+	"service-popup-helper-text": "Lyhyt kuvaus siitä mitä palvelu tekee",
+	close: "sulje",
+	cancel: "peruuta",
+	save: "tallenna",
+	"validations-name-existing": "Nimi on jo käytössä. Valitse toinen nimi.",
+	"validations-service-existing": "Osoite on jo käytössä.",
+	"validations-service-valid-url": "Epäkelpo URL-osoite",
+	"validations-request-failed": "Lataus epäonnistui. Tarkista URL-osoite",
+	"validations-field-required": "Kenttä tulee täyttää",
+	"service-url-label": "Tämä palvelu viittaa tähän URL-osoitteeseen",
+	"service-name-label": "Palvelun nimi",
+	"service-abstracts-label": "Tiivistelmä",
+	"service-successfully-updated": "Palvelu \"{{serviceName}}\"  päivitetty onnistuneesti",
+	"unable-to-update-service": "Palvelun päivitys epäonnistui. Syy: \"{{message}}\"",
+	"service-has-been-deleted": "Palvelu \"{{serviceName}}\" poistettu",
+	"add-to-all-maps": "Lisää kaikkiin karttoihin",
+	"remove-from-all-maps": "Poista kaikista kartoista"
+};
+var no = {
+	"layer-select": "Datavelger",
+	"select-all": "Velg alle",
+	"groups-and-keywords-dialog-title": "Grupper & Nøkkelord",
+	add: "legg til",
+	remove: "fjern",
+	"layer-list-results": "resultat",
+	groups: "Grupper",
+	keywords: "Nøkkelord",
+	"layer-select-button-tooltip": "Åpne datavelger",
+	all: "ALLE",
+	services: "Tjenester",
+	"add-a-new-service": "Legg til en ny tjeneste",
+	"update-service-title": "Oppdater lag fra WMS-tjeneste",
+	"edit-service-title": "Rediger tjeneste",
+	"save-service-title": "Lagre tjeneste",
+	"show-service-title": "Vis tjeneste",
+	"service-has-active-layers-error": "Tjenesten har aktive lag. Kan ikke fjerne denne tjenesten",
+	"delete-service": "Slett tjeneste",
+	"copy-url-message": "Kopier tjeneste-URL til utklippstavle",
+	"get-success-message": "Tjeneste \"{{serviceName}}\" har blitt lagret",
+	"service-popup-helper-text": "Kort beskrivelse av hva denne tjenesten gjør",
+	close: "lukk",
+	cancel: "avbryt",
+	save: "lagre",
+	"validations-name-existing": "Dette navnet eksisterer fra før. Velg et annet navn.",
+	"validations-service-existing": "URL eksisterer fra før.",
+	"validations-service-valid-url": "Ikke en gyldig URL",
+	"validations-request-failed": "Nedlasting feilet. Sjekk URLen",
+	"validations-field-required": "Dette feltet er påkrevd",
+	"service-url-label": "Denne tjenesten referer til denne URLen",
+	"service-name-label": "Tjenestenavn",
+	"service-abstracts-label": "Sammendrag",
+	"service-successfully-updated": "Tjeneste \"{{serviceName}}\" har blitt oppdatert",
+	"unable-to-update-service": "Kan ikke oppdatere tjeneste, grunn: \"{{message}}\"",
+	"service-has-been-deleted": "Tjeneste \"{{serviceName}}\" har blitt slettet",
+	"add-to-all-maps": "Legg til i alle kart",
+	"remove-from-all-maps": "Fjern fra alle kart"
+};
+var nl = {
+	"layer-select": "Layer Select",
+	"select-all": "Selecteer alles",
+	"groups-and-keywords-dialog-title": "Groepen & Trefwoorden",
+	add: "toevoegen",
+	remove: "verwijderen",
+	"layer-list-results": "resultaten",
+	groups: "Groepen",
+	keywords: "Trefwoorden",
+	"layer-select-button-tooltip": "Open de Layer Select",
+	all: "Alle",
+	services: "Services",
+	"add-a-new-service": "Voeg een nieuwe service toe",
+	"update-service-title": "Lagen bijwerken vanaf WMS service",
+	"edit-service-title": "Service bewerken",
+	"save-service-title": "Service opslaan",
+	"show-service-title": "Service tonen",
+	"service-has-active-layers-error": "Service heeft actieve lagen. Kan niet verwijderd worden",
+	"delete-service": "Service verwijderen",
+	"copy-url-message": "Service URL is naar het klembord gekopieerd",
+	"get-success-message": "Service \"{{serviceName}}\" is succesvol opgeslagen",
+	"service-popup-helper-text": "Korte beschrijving van wat de service doet",
+	close: "sluiten",
+	cancel: "annuleren",
+	save: "opslaan",
+	"validations-name-existing": "Deze naam is al in gebruik. Kies een andere naam.",
+	"validations-service-existing": "URL is al in gebruik.",
+	"validations-service-valid-url": "Geen geldige URL.",
+	"validations-request-failed": "Download mislukt. Controleer de URL.",
+	"validations-field-required": "Dit veld is verplicht",
+	"service-url-label": "Deze service verwijst naar deze URL",
+	"service-name-label": "Service naam",
+	"service-abstracts-label": "Beschrijving",
+	"service-successfully-updated": "Service \"{{serviceName}}\" is succesvol bijgewerkt",
+	"unable-to-update-service": "Bijwerken service niet mogelijk, reden: \"{{message}}\"",
+	"service-has-been-deleted": "Service \"{{serviceName}}\" is verwijderd",
+	"add-to-all-maps": "Toevoegen aan alle kaarten",
+	"remove-from-all-maps": "Verwijderen van alle kaarten"
+};
+var layerSelectTranslations = {
+	en: en,
+	fi: fi,
+	no: no,
+	nl: nl
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var getFilterId = function getFilterId(filterType, filterName) {
+  return filterType + "-" + filterName;
+};
+var produceFilters = function produceFilters(filterNames, filterType, draft, layerSelectFilterAdapter) {
+  filterNames.forEach(function (filterName) {
+    layerSelectFilterAdapter.addOne(draft.filters.filters, {
+      id: getFilterId(filterType, filterName),
+      name: filterName,
+      checked: true,
+      type: filterType
+    });
+  });
+};
+var filterLayersFromService = function filterLayersFromService(serviceId, services, filterIds, allFiltersActive, searchString) {
+  var mapStoreService = services[serviceId];
+  if (!mapStoreService) {
+    return [];
+  }
+  if (searchString === '' && allFiltersActive) {
+    return mapStoreService.layers.filter(function (layer) {
+      return layer.leaf;
+    });
+  }
+  var searchStringArray = searchString.split(' ');
+  return mapStoreService.layers.filter(function (layer) {
+    return searchStringArray.every(function (search) {
+      var _layer$keywords, _layer$name, _layer$title, _layer$abstract;
+      var searchLowercase = search.toLowerCase();
+      var layerFilterIds = layer.path.map(function (group) {
+        return getFilterId('groups', group);
+      }).concat(((_layer$keywords = layer.keywords) != null ? _layer$keywords : []).map(function (keyword) {
+        return getFilterId('keywords', keyword);
+      }));
+      var isFilterInLayer = (layerFilterIds == null ? void 0 : layerFilterIds.some(function (id) {
+        return filterIds.includes(id);
+      })) || allFiltersActive;
+      var isSearchTextInLayerFilter = layerFilterIds == null ? void 0 : layerFilterIds.some(function (filterId) {
+        return filterId.toLowerCase().includes(searchLowercase);
+      });
+      var isSearchTextInLayerName = (_layer$name = layer.name) == null ? void 0 : _layer$name.toLowerCase().includes(searchLowercase);
+      var isSearchTextInLayerText = (_layer$title = layer.title) == null ? void 0 : _layer$title.toLowerCase().includes(searchLowercase);
+      var isSearchTextInLayerAbstract = (_layer$abstract = layer["abstract"]) == null ? void 0 : _layer$abstract.toLowerCase().includes(searchLowercase);
+      var isSearchTextInServiceName = mapStoreService.name.toLowerCase().includes(searchLowercase);
+      var isSearchTextInLayer = isSearchTextInLayerName || isSearchTextInLayerText || isSearchTextInLayerAbstract || isSearchTextInLayerFilter || isSearchTextInServiceName;
+      return isFilterInLayer && isSearchTextInLayer;
+    });
+  }).filter(function (layer) {
+    return layer.leaf;
+  });
+};
+var isUserAddedService = function isUserAddedService(scope) {
+  return scope === 'user';
+};
+
+var layerSelectFilterAdapter = createEntityAdapter();
+var layerSelectActiveServicesAdapter = createEntityAdapter({
+  selectId: function selectId(service) {
+    return service.serviceId;
+  }
+});
+var initialServicePopupState = {
+  isOpen: false,
+  url: '',
+  serviceId: '',
+  variant: 'add'
+};
+var initialState = {
+  filters: {
+    searchFilter: '',
+    activeServices: layerSelectActiveServicesAdapter.getInitialState(),
+    filters: layerSelectFilterAdapter.getInitialState()
+  },
+  allServicesEnabled: true,
+  servicePopup: initialServicePopupState
+};
+var slice = createSlice({
+  initialState: initialState,
+  name: uiTypes.DialogTypes.LayerSelect,
+  reducers: {
+    setSearchFilter: function setSearchFilter(draft, action) {
+      var filterText = action.payload.filterText;
+      draft.filters.searchFilter = filterText;
+    },
+    closeServicePopupOpen: function closeServicePopupOpen(draft) {
+      draft.servicePopup.isOpen = false;
+    },
+    toggleServicePopup: function toggleServicePopup(draft, action) {
+      var _action$payload = action.payload,
+        variant = _action$payload.variant,
+        isOpen = _action$payload.isOpen;
+      draft.servicePopup.isOpen = isOpen;
+      draft.servicePopup.url = action.payload.url ? action.payload.url : '';
+      draft.servicePopup.variant = variant;
+      draft.servicePopup.serviceId = action.payload.serviceId ? action.payload.serviceId : '';
+    },
+    layerSelectRemoveService: function layerSelectRemoveService(draft, action) {
+      var serviceId = action.payload.serviceId;
+      layerSelectActiveServicesAdapter.removeOne(draft.filters.activeServices, serviceId);
+    },
+    enableActiveService: function enableActiveService(draft, action) {
+      var activeServicesById = draft.filters.activeServices.entities;
+      var activeServices = compact(Object.values(activeServicesById));
+      var countPressedServices = activeServices.filter(function (service) {
+        return service.enabled;
+      }).length;
+      var isAllServicesGoingToBeEnabled = countPressedServices === activeServices.length - 1;
+      if (isAllServicesGoingToBeEnabled) {
+        slice.caseReducers.enableAllActiveServices(draft);
+        return;
+      }
+      var service = activeServicesById[action.payload.serviceId];
+      service.enabled = true;
+    },
+    enableAllActiveServices: function enableAllActiveServices(draft) {
+      var activeServices = draft.filters.activeServices.entities;
+      var servicesToTurnOn = compact(Object.values(activeServices)).filter(function (service) {
+        return !service.enabled;
+      });
+      var updates = servicesToTurnOn.map(function (service) {
+        return {
+          id: service.serviceId,
+          changes: {
+            enabled: true
+          }
+        };
+      });
+      layerSelectActiveServicesAdapter.updateMany(draft.filters.activeServices, updates);
+      draft.allServicesEnabled = true;
+    },
+    onlyThisServiceEnabled: function onlyThisServiceEnabled(draft, action) {
+      var activeServicesById = draft.filters.activeServices.entities;
+      var services = compact(Object.values(activeServicesById));
+      var servicesToTurnOff = services.filter(function (service) {
+        return service.serviceId !== action.payload.serviceId;
+      });
+      var updates = servicesToTurnOff.map(function (service) {
+        return {
+          id: service.serviceId,
+          changes: {
+            enabled: false
+          }
+        };
+      });
+      layerSelectActiveServicesAdapter.updateMany(draft.filters.activeServices, updates);
+      draft.allServicesEnabled = false;
+    },
+    disableActiveService: function disableActiveService(draft, action) {
+      var activeServicesById = draft.filters.activeServices.entities;
+      var countPressedServices = Object.values(activeServicesById).filter(function (service) {
+        return service == null ? void 0 : service.enabled;
+      }).length;
+      var isAllServicesGoingToBeDisabled = countPressedServices === 1;
+      if (isAllServicesGoingToBeDisabled) {
+        slice.caseReducers.enableAllActiveServices(draft);
+        return;
+      }
+      var service = activeServicesById[action.payload.serviceId];
+      service.enabled = false;
+    },
+    toggleFilter: function toggleFilter(draft, action) {
+      var _action$payload2 = action.payload,
+        filterId = _action$payload2.filterId,
+        only = _action$payload2.only;
+      if (only) {
+        Object.keys(draft.filters.filters.entities).forEach(function (filterId) {
+          draft.filters.filters.entities[filterId].checked = false;
+        });
+        draft.filters.filters.entities[filterId].checked = true;
+      } else {
+        draft.filters.filters.entities[filterId].checked = !draft.filters.filters.entities[filterId].checked;
+      }
+    },
+    toggleAllFilters: function toggleAllFilters(draft) {
+      var allFiltersChecked = Object.values(draft.filters.filters.entities).every(function (filter) {
+        return filter == null ? void 0 : filter.checked;
+      });
+      draft.filters.filters.ids.forEach(function (filterId) {
+        draft.filters.filters.entities[filterId].checked = !allFiltersChecked;
+      });
+    }
+  },
+  extraReducers: function extraReducers(builder) {
+    builder.addCase(serviceActions.serviceSetLayers, function (draft, action) {
+      var _draft$filters$active;
+      var _action$payload3 = action.payload,
+        serviceId = _action$payload3.id,
+        serviceUrl = _action$payload3.serviceUrl,
+        serviceName = _action$payload3.name,
+        scope = _action$payload3.scope,
+        _abstract = _action$payload3["abstract"],
+        layers = _action$payload3.layers,
+        isUpdating = _action$payload3.isUpdating,
+        type = _action$payload3.type;
+      if (isUpdating) {
+        return;
+      }
+      if (type === 'EDR') {
+        // EDR services do not work yet in the layer-select, so skip them for now
+        return;
+      }
+      var keywords = layers.reduce(function (keywords, layer) {
+        if (layer.leaf) {
+          var _layer$keywords;
+          return keywords.concat((_layer$keywords = layer.keywords) != null ? _layer$keywords : []);
+        }
+        return keywords;
+      }, []);
+      var groups = layers.reduce(function (groups, layer) {
+        if (layer.leaf) {
+          var _layer$path;
+          return groups.concat((_layer$path = layer.path) != null ? _layer$path : []);
+        }
+        return groups;
+      }, []);
+      if (!((_draft$filters$active = draft.filters.activeServices.entities[serviceId]) != null && (_draft$filters$active = _draft$filters$active.filterIds) != null && _draft$filters$active.length)) {
+        // If the service has no filters yet, add them
+        produceFilters(groups, 'groups', draft, layerSelectFilterAdapter);
+        produceFilters(keywords, 'keywords', draft, layerSelectFilterAdapter);
+      }
+      var filterIds = groups.map(function (group) {
+        return getFilterId('groups', group);
+      }).concat(keywords.map(function (keyword) {
+        return getFilterId('keywords', keyword);
+      }));
+      layerSelectActiveServicesAdapter.setOne(draft.filters.activeServices, {
+        serviceId: serviceId,
+        enabled: draft.allServicesEnabled,
+        keywords: keywords,
+        groups: groups,
+        filterIds: filterIds,
+        scope: scope,
+        serviceName: serviceName,
+        serviceUrl: serviceUrl,
+        "abstract": _abstract,
+        isLoading: false,
+        type: type
+      });
+    }).addCase(serviceActions.fetchInitialServices, function (draft, action) {
+      var services = action.payload.services;
+      services.forEach(function (service) {
+        var serviceId = service.id,
+          serviceName = service.name,
+          serviceUrl = service.url,
+          _abstract2 = service["abstract"],
+          scope = service.scope;
+        layerSelectActiveServicesAdapter.setOne(draft.filters.activeServices, {
+          serviceId: serviceId,
+          enabled: draft.allServicesEnabled,
+          filterIds: [],
+          scope: scope,
+          serviceName: serviceName,
+          serviceUrl: serviceUrl,
+          "abstract": _abstract2,
+          isLoading: true
+        });
+      });
+    });
+  }
+});
+var layerSelectReducer = slice.reducer,
+  layerSelectActions = slice.actions;
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var useAppSelector = useSelector;
+var layerSelectStore = function layerSelectStore(store) {
+  return store != null && store.layerSelect ? store.layerSelect : null;
+};
+/**
+ * Returns search filter string
+ *
+ * Example getSearchFilter(store);
+ * @param {object} store store: object - store object
+ * @returns {array} returnType: string
+ */
+var getSearchFilter = createSelector(layerSelectStore, function (store) {
+  var _store$filters;
+  return (store == null || (_store$filters = store.filters) == null ? void 0 : _store$filters.searchFilter) || '';
+});
+/**
+ * Returns active services array
+ *
+ * Example getActiveServices(store);
+ * @param {object} store store: object - store object
+ * @returns {ActiveServiceObjectEntities} returnType: ActiveServiceObjectEntitiesobject of active services
+ */
+// cast to usable type - selectEntities returns Dictionary<ActiveServiceObject> which is not usable inside of the code
+var getActiveServices = function getActiveServices(store) {
+  return getActiveServicesDictionary(store);
+};
+var EMPTY_ACTIVE_SERVICES = {
+  entities: {},
+  ids: []
+};
+var _layerSelectActiveSer = layerSelectActiveServicesAdapter.getSelectors(function (store) {
+    var _store$layerSelect;
+    return (store == null || (_store$layerSelect = store.layerSelect) == null || (_store$layerSelect = _store$layerSelect.filters) == null ? void 0 : _store$layerSelect.activeServices) || EMPTY_ACTIVE_SERVICES;
+  }),
+  getActiveServicesDictionary = _layerSelectActiveSer.selectEntities,
+  getActiveServiceById = _layerSelectActiveSer.selectById,
+  getAllActiveServices = _layerSelectActiveSer.selectAll;
+var getEnabledServiceIds = createSelector(getAllActiveServices, function (services) {
+  return services.filter(function (service) {
+    return service.enabled;
+  }).map(function (service) {
+    return service.serviceId;
+  });
+}, selectorMemoizationOptions);
+/**
+ * Returns ids of all keywords
+ *
+ * Example getAllKeywordIds(store);
+ * @param {object} store store: object - store object
+ * @returns {array} returnType: array of all keyword ids
+ */
+// cast to usable type - selectIds returns EntityId[] which is not usable inside of the code
+var getAllFilterIds = function getAllFilterIds(store) {
+  return getAllFilterIdsEntity(store);
+};
+var EMPTY_FILTERS = {
+  entities: {},
+  ids: []
+};
+var _layerSelectFilterAda = layerSelectFilterAdapter.getSelectors(function (store) {
+    var _store$layerSelect2;
+    return (store == null || (_store$layerSelect2 = store.layerSelect) == null || (_store$layerSelect2 = _store$layerSelect2.filters) == null ? void 0 : _store$layerSelect2.filters) || EMPTY_FILTERS;
+  }),
+  getAllFilters = _layerSelectFilterAda.selectAll,
+  getAllFilterIdsEntity = _layerSelectFilterAda.selectIds,
+  getFilterById = _layerSelectFilterAda.selectById;
+var getCheckedFilterIds = createSelector(getAllFilters, function (filters) {
+  return filters.filter(function (filter) {
+    return filter == null ? void 0 : filter.checked;
+  }).map(function (filter) {
+    return filter.id;
+  });
+}, selectorMemoizationOptions);
+var getFilters = createSelector(getAllActiveServices, getAllFilters, function (services, filters) {
+  var enabledServices = services.filter(function (service) {
+    return service.enabled;
+  });
+  var keywords = enabledServices.flatMap(function (service) {
+    return service.keywords;
+  });
+  var groups = enabledServices.flatMap(function (service) {
+    return service.groups;
+  });
+  var countEachKeyword = countBy(keywords);
+  var countEachGroup = countBy(groups);
+  var filtersWithCount = filters.map(function (filter) {
+    var _countEachKeyword$fil;
+    if (filter.type === 'groups') {
+      var _countEachGroup$filte;
+      return Object.assign({}, filter, {
+        amountVisible: (_countEachGroup$filte = countEachGroup[filter.name]) != null ? _countEachGroup$filte : 0
+      });
+    }
+    return Object.assign({}, filter, {
+      amountVisible: (_countEachKeyword$fil = countEachKeyword[filter.name]) != null ? _countEachKeyword$fil : 0
+    });
+  });
+  var _partition = partition(filtersWithCount, function (filter) {
+      return filter.type === 'groups';
+    }),
+    groupsWithCount = _partition[0],
+    keywordsWithCount = _partition[1];
+  var groupsSorted = [].concat(groupsWithCount).sort(function (groupA, groupB) {
+    return groupA.name.localeCompare(groupB.name);
+  });
+  var keywordsSorted = [].concat(keywordsWithCount).sort(function (groupA, groupB) {
+    return groupA.name.localeCompare(groupB.name);
+  });
+  return {
+    groups: groupsSorted,
+    keywords: keywordsSorted
+  };
+});
+/**
+ * Returns if all keywords are checked
+ *
+ * Example isAllKeywordsChecked(store);
+ * @param {object} store store: object - store object
+ * @returns {array} returnType: boolean if all keywords are checked
+ */
+var isAllFiltersChecked = createSelector(layerSelectStore, function (store) {
+  var _store$filters2;
+  return store == null || (_store$filters2 = store.filters) == null || (_store$filters2 = _store$filters2.filters) == null ? void 0 : _store$filters2.ids.every(function (filterId) {
+    var _store$filters3;
+    return store == null || (_store$filters3 = store.filters) == null || (_store$filters3 = _store$filters3.filters) == null || (_store$filters3 = _store$filters3.entities[filterId]) == null ? void 0 : _store$filters3.checked;
+  });
+});
+/**
+ * Returns a filtered active layer object based on the given filter settings
+ * Example: layerSelectSelectors.getFilteredLayers(store, filteredSettings);
+ * @param {object} store store: object - object from which the service state will be extracted
+ * @returns {array} returnType: LayerWithServiceName - an array of all filtered activelayers
+ */
+var getFilteredLayers = createSelector([getEnabledServiceIds, serviceSelectors.getServices, getCheckedFilterIds, isAllFiltersChecked, getSearchFilter], function (enabledServiceIds, servicesStore, checkedFilterIds, allFiltersActive, searchFilter) {
+  return enabledServiceIds.reduce(function (layerList, serviceId) {
+    return layerList.concat(filterLayersFromService(serviceId, servicesStore, checkedFilterIds, allFiltersActive, searchFilter).map(function (layer) {
+      return Object.assign({}, layer, {
+        serviceName: serviceId
+      });
+    }));
+  }, []);
+}, selectorMemoizationOptions);
+/**
+ * Returns service popup details
+ *
+ * Example getServicePopupDetails(store, 'server-id');
+ * @param {object} store store: object - store object
+ * @returns {object} returnType: object of active service
+ */
+var getServicePopupDetails = function getServicePopupDetails(store) {
+  var _store$layerSelect3;
+  return (store == null || (_store$layerSelect3 = store.layerSelect) == null ? void 0 : _store$layerSelect3.servicePopup) || initialServicePopupState;
+};
+/**
+ * Returns service with active filtered layers from seaerch
+ *
+ * Example getFilteredActiveServices(store);
+ * @param {object} store store: object - store object
+ * @returns {object} returnType: object of active service
+ */
+var getFilteredActiveServices = createSelector([getFilteredLayers, getActiveServices, getSearchFilter], function (layers, activeServices, searchResult) {
+  var servicesResult = searchResult.length ? layers.reduce(function (layers, _ref) {
+    var serviceName = _ref.serviceName;
+    return layers.includes(serviceName) ? layers : layers.concat(serviceName);
+  }, []) : [];
+  var updatedServices = Object.fromEntries(Object.entries(activeServices).map(function (_ref2) {
+    var key = _ref2[0],
+      service = _ref2[1];
+    return [key, Object.assign({}, service, {
+      isInSearch: servicesResult.includes(service.serviceId)
+    })];
+  }));
+  return updatedServices;
+}, selectorMemoizationOptions);
+
+var selectors = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  getActiveServiceById: getActiveServiceById,
+  getActiveServices: getActiveServices,
+  getActiveServicesDictionary: getActiveServicesDictionary,
+  getAllActiveServices: getAllActiveServices,
+  getAllFilterIds: getAllFilterIds,
+  getAllFilterIdsEntity: getAllFilterIdsEntity,
+  getAllFilters: getAllFilters,
+  getCheckedFilterIds: getCheckedFilterIds,
+  getEnabledServiceIds: getEnabledServiceIds,
+  getFilterById: getFilterById,
+  getFilteredActiveServices: getFilteredActiveServices,
+  getFilteredLayers: getFilteredLayers,
+  getFilters: getFilters,
+  getSearchFilter: getSearchFilter,
+  getServicePopupDetails: getServicePopupDetails,
+  isAllFiltersChecked: isAllFiltersChecked,
+  useAppSelector: useAppSelector
+});
+
+function asyncGeneratorStep(n, t, e, r, o, a, c) {
+  try {
+    var i = n[a](c),
+      u = i.value;
+  } catch (n) {
+    return void e(n);
+  }
+  i.done ? t(u) : Promise.resolve(u).then(r, o);
+}
+function _asyncToGenerator(n) {
+  return function () {
+    var t = this,
+      e = arguments;
+    return new Promise(function (r, o) {
+      var a = n.apply(t, e);
+      function _next(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
+      }
+      function _throw(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
+      }
+      _next(void 0);
+    });
+  };
+}
+function _objectDestructuringEmpty(t) {
+  if (null == t) throw new TypeError("Cannot destructure " + t);
+}
+function _regenerator() {
+  /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
+  var e,
+    t,
+    r = "function" == typeof Symbol ? Symbol : {},
+    n = r.iterator || "@@iterator",
+    o = r.toStringTag || "@@toStringTag";
+  function i(r, n, o, i) {
+    var c = n && n.prototype instanceof Generator ? n : Generator,
+      u = Object.create(c.prototype);
+    return _regeneratorDefine(u, "_invoke", function (r, n, o) {
+      var i,
+        c,
+        u,
+        f = 0,
+        p = o || [],
+        y = false,
+        G = {
+          p: 0,
+          n: 0,
+          v: e,
+          a: d,
+          f: d.bind(e, 4),
+          d: function (t, r) {
+            return i = t, c = 0, u = e, G.n = r, a;
+          }
+        };
+      function d(r, n) {
+        for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
+          var o,
+            i = p[t],
+            d = G.p,
+            l = i[2];
+          r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
+        }
+        if (o || r > 1) return a;
+        throw y = true, n;
+      }
+      return function (o, p, l) {
+        if (f > 1) throw TypeError("Generator is already running");
+        for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
+          i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
+          try {
+            if (f = 2, i) {
+              if (c || (o = "next"), t = i[o]) {
+                if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
+                if (!t.done) return t;
+                u = t.value, c < 2 && (c = 0);
+              } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
+              i = e;
+            } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
+          } catch (t) {
+            i = e, c = 1, u = t;
+          } finally {
+            f = 1;
+          }
+        }
+        return {
+          value: t,
+          done: y
+        };
+      };
+    }(r, o, i), true), u;
+  }
+  var a = {};
+  function Generator() {}
+  function GeneratorFunction() {}
+  function GeneratorFunctionPrototype() {}
+  t = Object.getPrototypeOf;
+  var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
+      return this;
+    }), t),
+    u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
+  function f(e) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
+  }
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
+    return this;
+  }), _regeneratorDefine(u, "toString", function () {
+    return "[object Generator]";
+  }), (_regenerator = function () {
+    return {
+      w: i,
+      m: f
+    };
+  })();
+}
+function _regeneratorDefine(e, r, n, t) {
+  var i = Object.defineProperty;
+  try {
+    i({}, "", {});
+  } catch (e) {
+    i = 0;
+  }
+  _regeneratorDefine = function (e, r, n, t) {
+    function o(r, n) {
+      _regeneratorDefine(e, r, function (e) {
+        return this._invoke(r, n, e);
+      });
+    }
+    r ? i ? i(e, r, {
+      value: n,
+      enumerable: !t,
+      configurable: !t,
+      writable: !t
+    }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
+  }, _regeneratorDefine(e, r, n, t);
+}
+
+var layerSelectListener = createListenerMiddleware();
+layerSelectListener.startListening({
+  actionCreator: serviceActions.mapStoreRemoveService,
+  effect: function () {
+    var _effect = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(action) {
+      var serviceUrl, localStorageServices;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
+          case 0:
+            serviceUrl = action.payload.serviceUrl;
+            localStorageServices = getUserAddedServices();
+            delete localStorageServices[serviceUrl];
+            setUserAddedServices(localStorageServices);
+          case 1:
+            return _context.a(2);
+        }
+      }, _callee);
+    }));
+    function effect(_x) {
+      return _effect.apply(this, arguments);
+    }
+    return effect;
+  }()
+});
+layerSelectListener.startListening({
+  actionCreator: layerSelectActions.layerSelectRemoveService,
+  effect: function () {
+    var _effect2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(action, listenerApi) {
+      var removedService, serviceId, serviceUrl, services, servicesEnabled;
+      return _regenerator().w(function (_context2) {
+        while (1) switch (_context2.n) {
+          case 0:
+            removedService = action.payload;
+            serviceId = removedService.serviceId, serviceUrl = removedService.serviceUrl;
+            services = getActiveServices(listenerApi.getState());
+            servicesEnabled = Object.values(services).find(function (service) {
+              return service == null ? void 0 : service.enabled;
+            });
+            if (servicesEnabled === undefined) {
+              Object.entries(services).map(function (_ref) {
+                var entryServiceId = _ref[0];
+                return listenerApi.dispatch(layerSelectActions.enableActiveService({
+                  serviceId: entryServiceId
+                }));
+              });
+            }
+            listenerApi.dispatch(serviceActions.mapStoreRemoveService({
+              id: serviceId,
+              serviceUrl: serviceUrl
+            }));
+          case 1:
+            return _context2.a(2);
+        }
+      }, _callee2);
+    }));
+    function effect(_x2, _x3) {
+      return _effect2.apply(this, arguments);
+    }
+    return effect;
+  }()
+});
+layerSelectListener.startListening({
+  actionCreator: serviceActions.serviceSetLayers,
+  effect: function () {
+    var _effect3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(action) {
+      var _action$payload, scope, name, serviceUrl, _abstract, type, _Object$assign, localStorageServices, storedService;
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.n) {
+          case 0:
+            _action$payload = action.payload, scope = _action$payload.scope, name = _action$payload.name, serviceUrl = _action$payload.serviceUrl, _abstract = _action$payload["abstract"], type = _action$payload.type;
+            if (isUserAddedService(scope)) {
+              localStorageServices = getUserAddedServices();
+              storedService = {
+                name: name,
+                url: serviceUrl,
+                "abstract": _abstract,
+                type: type
+              };
+              setUserAddedServices(Object.assign({}, localStorageServices, (_Object$assign = {}, _Object$assign[serviceUrl] = storedService, _Object$assign)));
+            }
+          case 1:
+            return _context3.a(2);
+        }
+      }, _callee3);
+    }));
+    function effect(_x4) {
+      return _effect3.apply(this, arguments);
+    }
+    return effect;
+  }()
+});
+layerSelectListener.startListening({
+  matcher: isAnyOf(uiActions.setToggleOpenDialog, uiActions.setActiveMapIdForDialog),
+  effect: function () {
+    var _effect4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(action, listenerApi) {
+      var payload;
+      return _regenerator().w(function (_context4) {
+        while (1) switch (_context4.n) {
+          case 0:
+            payload = action.payload;
+            if (!payload.setOpen && payload.type === uiTypes.DialogTypes.LayerSelect) {
+              listenerApi.dispatch(layerActions.hideLayerInfo());
+            }
+          case 1:
+            return _context4.a(2);
+        }
+      }, _callee4);
+    }));
+    function effect(_x5, _x6) {
+      return _effect4.apply(this, arguments);
+    }
+    return effect;
+  }()
+});
+layerSelectListener.startListening({
+  matcher: isAnyOf(layerSelectActions.disableActiveService, layerSelectActions.onlyThisServiceEnabled, layerSelectActions.toggleFilter, layerSelectActions.setSearchFilter),
+  effect: function () {
+    var _effect5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(action, listenerApi) {
+      var filteredLayers, dialogInfo, layerWithData;
+      return _regenerator().w(function (_context5) {
+        while (1) switch (_context5.n) {
+          case 0:
+            if (uiSelectors.getisDialogOpen(listenerApi.getState(), uiTypes.DialogTypes.LayerInfo)) {
+              filteredLayers = getFilteredLayers(listenerApi.getState());
+              dialogInfo = layerSelectors.getActiveLayerInfo(listenerApi.getState());
+              layerWithData = dialogInfo && serviceSelectors.getLayerFromService(listenerApi.getState(), dialogInfo.serviceUrl, dialogInfo.layerName);
+              if (!filteredLayers.map(function (layer) {
+                return layer.title;
+              }).includes((layerWithData == null ? void 0 : layerWithData.title) || '')) {
+                listenerApi.dispatch(layerActions.hideLayerInfo());
+              }
+            }
+          case 1:
+            return _context5.a(2);
+        }
+      }, _callee5);
+    }));
+    function effect(_x7, _x8) {
+      return _effect5.apply(this, arguments);
+    }
+    return effect;
+  }()
+});
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var layerSelectReducersMap = {
+  webmap: mapReducer,
+  services: serviceReducer,
+  layers: layerReducer,
+  layerSelect: layerSelectReducer,
+  ui: uiReducer,
+  snackbar: snackbarReducer
+};
+var layerSelectMiddlewares = [mapListener.middleware, serviceListener.middleware, layersListener.middleware, layerSelectListener.middleware, snackbarListener.middleware, openlayersListener.middleware];
+var layerSelectRootReducer = combineReducers(layerSelectReducersMap);
+var createMockStore = function createMockStore(mockState) {
+  return configureStore({
+    reducer: layerSelectRootReducer,
+    preloadedState: mockState,
+    middleware: function middleware(getDefaultMiddleware) {
+      return getDefaultMiddleware().concat(layerSelectMiddlewares);
+    }
+  });
+};
+
+var KeywordFilterButtonConnect = function KeywordFilterButtonConnect(_ref) {
+  var mapId = _ref.mapId,
+    _ref$source = _ref.source,
+    source = _ref$source === void 0 ? 'app' : _ref$source,
+    isMultiMap = _ref.isMultiMap;
+  var dispatch = useDispatch();
+  var dialogType = isMultiMap ? uiTypes.DialogTypes.KeywordFilter + "-" + mapId : uiTypes.DialogTypes.KeywordFilter;
+  var currentActiveMapId = useAppSelector(function (store) {
+    return uiSelectors.getDialogMapId(store, dialogType);
+  });
+  var isOpenInStore = useAppSelector(function (store) {
+    return uiSelectors.getisDialogOpen(store, dialogType);
+  });
+  var openFilterResultsDialog = React.useCallback(function () {
+    dispatch(uiActions.setActiveMapIdForDialog({
+      type: dialogType,
+      mapId: mapId,
+      setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
+      source: source
+    }));
+  }, [currentActiveMapId, dispatch, isOpenInStore, mapId, source, dialogType]);
+  return jsx(CustomIconButton, {
+    "data-testid": "keywordFilterButton",
+    id: "keywordFilterButton",
+    isSelected: isOpenInStore,
+    onClick: openFilterResultsDialog,
+    variant: "tool",
+    children: jsx(Filter, {})
+  });
+};
+
+var KeywordFilterResultsListItemConnect = function KeywordFilterResultsListItemConnect(_ref) {
+  var filter = _ref.filter;
+  var dispatch = useDispatch();
+  var toggleFilter = React.useCallback(function (filterId, only) {
+    dispatch(layerSelectActions.toggleFilter({
+      filterId: filterId,
+      only: only
+    }));
+  }, [dispatch]);
+  return jsx(FilterOption, {
+    checked: !!filter.checked,
+    label: filter.amountVisible ? filter.name + " (" + filter.amountVisible + ")" : filter.name,
+    onClick: function onClick(checked, only) {
+      toggleFilter(filter.id, only);
+    },
+    optionId: filter.id
+  });
+};
+
+var KeywordFilterSelectAllSwitchConnect = function KeywordFilterSelectAllSwitchConnect() {
+  var dispatch = useDispatch();
+  var allFiltersActive = useAppSelector(function (store) {
+    return isAllFiltersChecked(store);
+  });
+  var toggleFilters = React.useCallback(function () {
+    dispatch(layerSelectActions.toggleAllFilters());
+  }, [dispatch]);
+  return jsx(Switch, {
+    checked: allFiltersActive,
+    "data-testid": "customSwitch",
+    onChange: toggleFilters,
+    slotProps: {
+      input: {
+        'aria-label': 'All'
+      }
+    }
+  });
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var LAYER_SELECT_NAMESPACE = 'layerselect';
+var useLayerSelectTranslation = function useLayerSelectTranslation() {
+  return useTranslation(LAYER_SELECT_NAMESPACE);
+};
+
+var listStyle = {
+  padding: '0px'
+};
+var accordionDetailsStyle = {
+  margin: '0px',
+  padding: '0 12px'
+};
+var KeywordFilterResults = function KeywordFilterResults(_ref) {
+  var filters = _ref.filters,
+    bounds = _ref.bounds,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
+    isOpen = _ref.isOpen,
+    _ref$onMouseDown = _ref.onMouseDown,
+    onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
+    _ref$order = _ref.order,
+    order = _ref$order === void 0 ? 0 : _ref$order,
+    _ref$source = _ref.source,
+    source = _ref$source === void 0 ? 'module' : _ref$source;
+  var _useLayerSelectTransl = useLayerSelectTranslation(),
+    t = _useLayerSelectTransl.t;
+  return jsxs(ToolContainerDraggable, {
+    bounds: bounds,
+    "data-testid": "keywordFilterResults",
+    isOpen: isOpen,
+    minHeight: 192,
+    minWidth: 312,
+    onClose: onClose,
+    onMouseDown: onMouseDown,
+    order: order,
+    source: source,
+    startSize: {
+      width: 349,
+      height: 600
+    },
+    title: t('groups-and-keywords-dialog-title'),
+    children: [jsxs(Grid, {
+      container: true,
+      size: {
+        xs: 12
+      },
+      sx: {
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        backgroundColor: 'background.paper',
+        position: 'sticky',
+        top: 0,
+        zIndex: 100
+      },
+      children: [jsx(Grid, {
+        container: true,
+        size: {
+          xs: 6
+        },
+        sx: {
+          alignItems: 'center',
+          justifyContent: 'flex-start',
+          padding: '15px 15px 0 24px'
+        },
+        children: t('select-all')
+      }), jsx(Grid, {
+        container: true,
+        size: {
+          xs: 6
+        },
+        sx: {
+          alignContent: 'center',
+          justifyContent: 'flex-end',
+          padding: '15px 15px 0 15px'
+        },
+        children: jsx(KeywordFilterSelectAllSwitchConnect, {})
+      })]
+    }), jsx(CustomAccordion, {
+      detailsSx: accordionDetailsStyle,
+      title: t('groups'),
+      children: jsx(List, {
+        dense: true,
+        style: listStyle,
+        children: filters.groups.map(function (group) {
+          return jsx(KeywordFilterResultsListItemConnect, {
+            filter: group
+          }, group.id);
+        })
+      })
+    }), jsx(CustomAccordion, {
+      detailsSx: accordionDetailsStyle,
+      title: t('keywords'),
+      children: jsx(List, {
+        dense: true,
+        style: listStyle,
+        children: filters.keywords.map(function (keyword) {
+          return jsx(KeywordFilterResultsListItemConnect, {
+            filter: keyword
+          }, keyword.id);
+        })
+      })
+    })]
+  });
+};
+
+var KeywordFilterResultsConnect = function KeywordFilterResultsConnect(_ref) {
+  var bounds = _ref.bounds,
+    mapId = _ref.mapId,
+    isMultiMap = _ref.isMultiMap;
+  var dialogType = isMultiMap ? uiTypes.DialogTypes.KeywordFilter + "-" + mapId : uiTypes.DialogTypes.KeywordFilter;
+  var _useSetupDialog = useSetupDialog(dialogType),
+    dialogOrder = _useSetupDialog.dialogOrder,
+    onCloseDialog = _useSetupDialog.onCloseDialog,
+    setDialogOrder = _useSetupDialog.setDialogOrder,
+    isDialogOpen = _useSetupDialog.isDialogOpen,
+    uiSource = _useSetupDialog.uiSource;
+  var filters = useAppSelector(getFilters);
+  return jsx(KeywordFilterResults, {
+    bounds: bounds,
+    filters: filters,
+    isOpen: isDialogOpen,
+    onClose: onCloseDialog,
+    onMouseDown: setDialogOrder,
+    order: dialogOrder,
+    source: uiSource
+  });
+};
+
+var LayerAddRemoveButton = function LayerAddRemoveButton(_ref) {
+  var layer = _ref.layer,
+    serviceUrl = _ref.serviceUrl,
+    serviceType = _ref.serviceType,
+    allLayers = _ref.allLayers,
+    allMapIds = _ref.allMapIds,
+    addLayer = _ref.addLayer,
+    addLayerToAllMaps = _ref.addLayerToAllMaps,
+    deleteLayer = _ref.deleteLayer,
+    removeLayerFromAllMaps = _ref.removeLayerFromAllMaps,
+    mapLayers = _ref.mapLayers;
+  var _useLayerSelectTransl = useLayerSelectTranslation(),
+    t = _useLayerSelectTransl.t;
+  var _React$useState = React.useState(false),
+    open = _React$useState[0],
+    setOpen = _React$useState[1];
+  var anchorRef = React.useRef(null);
+  var foundLayerIndex = React.useMemo(function () {
+    return mapLayers.findIndex(function (lr) {
+      return lr.name === layer.name && lr.service === serviceUrl;
+    });
+  }, [mapLayers, layer.name, serviceUrl]);
+  var foundLayer = foundLayerIndex !== -1 && mapLayers[foundLayerIndex];
+  var layerExistsInWorkspace = React.useMemo(function () {
+    return allLayers.find(function (current) {
+      return current.name === layer.name && current.service === serviceUrl;
+    });
+  }, [allLayers, layer.name, serviceUrl]);
+  var existsInAllMaps = React.useMemo(function () {
+    return allMapIds.every(function (mapId) {
+      return allLayers.some(function (current) {
+        return current.mapId === mapId && current.name === layer.name && current.service === serviceUrl;
+      });
+    });
+  }, [allMapIds, allLayers, layer.name, serviceUrl]);
+  var handleToggle = function handleToggle() {
+    setOpen(function (prevOpen) {
+      return !prevOpen;
+    });
+  };
+  var handleClose = function handleClose(event) {
+    var _anchorRef$current;
+    if ((_anchorRef$current = anchorRef.current) != null && _anchorRef$current.contains(event.target)) {
+      return;
+    }
+    setOpen(false);
+  };
+  var handleAddAll = function handleAddAll() {
+    addLayerToAllMaps({
+      serviceUrl: serviceUrl,
+      layerName: layer.name,
+      serviceType: serviceType
+    });
+    setOpen(false);
+  };
+  var handleRemoveAll = function handleRemoveAll(id) {
+    removeLayerFromAllMaps(id);
+    setOpen(false);
+  };
+  return jsxs(Fragment, {
+    children: [jsxs(ToggleButtonGroup, {
+      fullWidth: true,
+      ref: anchorRef,
+      style: {
+        height: '32px'
+      },
+      children: [jsx(ToggleButton, {
+        className: "tool",
+        "data-testid": "layerAddRemoveButton-" + layer.name,
+        fullWidth: true,
+        onClick: function onClick() {
+          !foundLayer ? addLayer({
+            serviceUrl: serviceUrl,
+            layerName: layer.name,
+            serviceType: serviceType
+          }) : deleteLayer({
+            layerId: foundLayer.id,
+            layerIndex: foundLayerIndex
+          });
+        },
+        onMouseDown: function onMouseDown(e) {
+          e.stopPropagation();
+        },
+        selected: !!foundLayer,
+        style: {
+          borderRadius: '3px 0 0 3px',
+          height: 'inherit',
+          minWidth: '62px',
+          fontSize: '12px'
+        },
+        value: "selected",
+        children: !foundLayer ? t('add') : t('remove')
+      }), jsx(Box, {
+        sx: {
+          minWidth: '1px',
+          backgroundColor: foundLayer || layerExistsInWorkspace ? 'geowebColors.buttons.primary.default.borderColor' : 'geowebColors.buttons.secondary.default.fill'
+        }
+      }), jsx(ToggleButton, {
+        className: "tool",
+        "data-testid": "layerAddRemoveButton-dropdown-" + layer.name,
+        onClick: handleToggle,
+        onMouseDown: function onMouseDown(e) {
+          e.stopPropagation();
+        },
+        selected: !!layerExistsInWorkspace,
+        style: {
+          marginLeft: '0',
+          minWidth: '32px',
+          borderRadius: '0 3px 3px 0',
+          height: 'inherit'
+        },
+        value: "dropdown",
+        children: jsx(ArrowDropDownDown, {
+          style: {
+            marginRight: '1px'
+          }
+        })
+      })]
+    }), jsx(Popper, {
+      anchorEl: anchorRef.current,
+      open: open,
+      placement: "bottom-end",
+      role: undefined,
+      style: {
+        zIndex: 1300
+      },
+      transition: true,
+      children: function children(_ref2) {
+        var TransitionProps = _ref2.TransitionProps,
+          placement = _ref2.placement;
+        return jsx(Grow, Object.assign({}, TransitionProps, {
+          style: {
+            transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'
+          },
+          children: jsx(Paper, {
+            children: jsx(ClickAwayListener, {
+              onClickAway: handleClose,
+              children: jsxs(MenuList, {
+                autoFocusItem: true,
+                children: [jsx(MenuItem, {
+                  disabled: existsInAllMaps,
+                  onClick: handleAddAll,
+                  children: t('add-to-all-maps')
+                }), jsx(MenuItem, {
+                  disabled: !layerExistsInWorkspace,
+                  onClick: function onClick() {
+                    layerExistsInWorkspace && handleRemoveAll(layerExistsInWorkspace.id);
+                  },
+                  children: t('remove-from-all-maps')
+                })]
+              })
+            })
+          })
+        }));
+      }
+    })]
+  });
+};
+
+var LayerListDimensions = function LayerListDimensions(_ref) {
+  var dimensions = _ref.dimensions;
+  if (!(dimensions != null && dimensions.length)) {
+    return null;
+  }
+  return jsx(Fragment, {
+    children: dimensions.map(function (dimension) {
+      return jsx(CustomTooltip, {
+        title: dimension.label + ": " + dimension.value,
+        children: jsx("span", {
+          style: {
+            marginRight: 4
+          },
+          children: dimension.icon
+        })
+      }, dimension.label);
+    })
+  });
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var buttonLarge = 80;
+var buttonSmall = 60;
+var layerSelectColumnsLarge = {
+  column1: {
+    width: 112
+  },
+  column2: {
+    marginTop: '6px',
+    width: "calc(100% - 112px)",
+    height: '36px',
+    paddingLeft: '20px'
+  },
+  column3: {
+    height: '12px'
+  },
+  column4: {
+    height: '24px'
+  },
+  column5: {
+    height: '24px',
+    width: 140
+  },
+  column6: {
+    height: '24px',
+    width: "calc(100% - 140px)"
+  },
+  column7: {
+    height: '48px',
+    width: buttonLarge,
+    marginRight: 1,
+    marginLeft: 2
+  },
+  column8: {
+    width: "calc(100% - " + buttonLarge + "px - 32px)"
+  },
+  column9: {
+    width: "calc(" + buttonLarge + "px + 32px)"
+  }
+};
+var layerSelectColumnsSmall = {
+  column1: {
+    width: '100%'
+  },
+  column2: {
+    marginTop: '4px',
+    width: "calc(100% - 20px)"
+  },
+  column3: {
+    height: '12px'
+  },
+  column4: {
+    height: '48px'
+  },
+  column5: {
+    height: '24px',
+    width: '100%'
+  },
+  column6: {
+    height: '24px',
+    width: '100%'
+  },
+  column7: {
+    height: '48px',
+    width: buttonSmall,
+    marginRight: 0,
+    marginLeft: 1
+  },
+  column8: {
+    width: "calc(100% - " + buttonSmall + "px - 50px)"
+  },
+  column9: {
+    width: "calc(" + buttonSmall + "px + 50px)"
+  }
+};
+var breakpoint = 500;
+var widthToColumns = function widthToColumns(width) {
+  if (width <= breakpoint) {
+    return layerSelectColumnsSmall;
+  }
+  return layerSelectColumnsLarge;
+};
+var rowHeightLarge = 68;
+var rowHeightSmall = 136;
+var widthToRowHeight = function widthToRowHeight(width) {
+  if (width <= breakpoint) {
+    return rowHeightSmall;
+  }
+  return rowHeightLarge;
+};
+var sortByService = function sortByService(serviceObj) {
+  return Object.entries(serviceObj).sort(function (_ref, _ref2) {
+    var serviceA = _ref[1];
+    var serviceB = _ref2[1];
+    return serviceA.serviceName.localeCompare(serviceB == null ? void 0 : serviceB.serviceName);
+  }).reduce(function (result, _ref3) {
+    var _Object$assign;
+    var key = _ref3[0],
+      value = _ref3[1];
+    return Object.assign({}, result, (_Object$assign = {}, _Object$assign[key] = value, _Object$assign));
+  }, {});
+};
+
+var layerInfoStyle = {
+  fontSize: '10px',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  lineHeight: 1
+};
+var LayerListRow = function LayerListRow(_ref) {
+  var _layer$keywords, _layer$keywords2;
+  var layer = _ref.layer,
+    service = _ref.service,
+    allLayers = _ref.allLayers,
+    allMapIds = _ref.allMapIds,
+    addLayer = _ref.addLayer,
+    addLayerToAllMaps = _ref.addLayerToAllMaps,
+    deleteLayer = _ref.deleteLayer,
+    removeLayerFromAllMaps = _ref.removeLayerFromAllMaps,
+    mapLayers = _ref.mapLayers,
+    layerSelectWidth = _ref.layerSelectWidth,
+    searchFilter = _ref.searchFilter,
+    _ref$hasActiveLayer = _ref.hasActiveLayer,
+    hasActiveLayer = _ref$hasActiveLayer === void 0 ? false : _ref$hasActiveLayer,
+    onToggleActiveLayer = _ref.onToggleActiveLayer;
+  var _useLayerSelectTransl = useLayerSelectTranslation(),
+    t = _useLayerSelectTransl.t;
+  var rowHeight = widthToRowHeight(layerSelectWidth);
+  var columns = widthToColumns(layerSelectWidth);
+  var dimensions = getDimensionsList(layer.dimensions);
+  var layerServiceUrl = React.useMemo(function () {
+    if (service.type !== 'STAC') {
+      return service.serviceUrl;
+    }
+    var baseUrl = service.serviceUrl.replace(/\/$/, '');
+    return baseUrl + "/collections/" + encodeURIComponent(layer.name);
+  }, [layer.name, service.serviceUrl, service.type]);
+  return jsxs(Grid, {
+    container: true,
+    "data-testid": "layerListLayerRow",
+    sx: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: 'geowebColors.cards.cardContainer',
+      padding: '8px',
+      marginBottom: '4px',
+      height: rowHeight,
+      border: 'solid 1px',
+      borderColor: 'geowebColors.cards.cardContainerBorder'
+    },
+    children: [jsxs(Grid, {
+      container: true,
+      sx: columns.column8,
+      children: [jsx(Grid, {
+        size: {
+          xs: 12
+        },
+        children: jsx(Box, {
+          sx: {
+            fontSize: '12px',
+            height: '14px',
+            lineHeight: '14px',
+            fontWeight: 500,
+            textOverflow: 'ellipsis',
+            overflow: 'hidden'
+          },
+          children: jsx(SearchHighlight, {
+            search: searchFilter,
+            text: layer.title
+          })
+        })
+      }), jsxs(Grid, {
+        container: true,
+        sx: Object.assign({}, columns.column1, {
+          flexDirection: 'column'
+        }),
+        children: [jsx(Box, {
+          sx: {
+            fontSize: '12px',
+            height: '18px',
+            lineHeight: '18px',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden'
+          },
+          children: jsx(SearchHighlight, {
+            search: searchFilter,
+            text: service.name
+          })
+        }), jsxs(Box, {
+          sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '4px'
+          },
+          children: [jsx(LayerInfoButton, {
+            isActive: hasActiveLayer,
+            onClick: onToggleActiveLayer
+          }), service.type === 'STAC' && jsx(CustomTooltip, {
+            title: "STAC Collection",
+            children: jsx("span", {
+              style: {
+                display: 'flex'
+              },
+              children: jsx(StacIcon, {
+                fontSize: "small"
+              })
+            })
+          })]
+        })]
+      }), jsxs(Grid, {
+        sx: columns.column2,
+        children: [jsx(Grid, {
+          sx: columns.column3,
+          children: !!layer["abstract"] && jsx(Typography, {
+            "data-testid": "layerAbstract",
+            sx: layerInfoStyle,
+            children: jsx(SearchHighlight, {
+              search: searchFilter,
+              text: layer["abstract"]
+            })
+          })
+        }), jsxs(Grid, {
+          container: true,
+          sx: columns.column4,
+          children: [jsx(Grid, {
+            sx: columns.column5,
+            children: jsx(LayerListDimensions, {
+              dimensions: dimensions
+            })
+          }), jsxs(Grid, {
+            sx: columns.column6,
+            children: [layer.path.length > 0 && jsxs(Typography, {
+              sx: layerInfoStyle,
+              children: [t('groups'), ":", ' ', jsx(SearchHighlight, {
+                search: searchFilter,
+                text: layer.path.join(' / ')
+              })]
+            }), ((_layer$keywords = layer.keywords) == null ? void 0 : _layer$keywords.length) > 0 && jsxs(Typography, {
+              sx: layerInfoStyle,
+              children: [t('keywords'), ":", ' ', jsx(SearchHighlight, {
+                search: searchFilter,
+                text: ((_layer$keywords2 = layer.keywords) != null ? _layer$keywords2 : []).slice().sort(function (textA, textB) {
+                  return textA.localeCompare(textB);
+                }).join(', ')
+              })]
+            })]
+          })]
+        })]
+      })]
+    }), jsx(Grid, {
+      container: true,
+      sx: [{
+        alignItems: 'center',
+        justifyContent: 'flex-end'
+      }, columns.column9],
+      children: jsx(Box, {
+        sx: [{
+          alignItems: 'flex-start'
+        }, (columns.column7, {
+          width: '100%',
+          paddingLeft: '16px'
+        })],
+        children: jsx(LayerAddRemoveButton, {
+          addLayer: addLayer,
+          addLayerToAllMaps: addLayerToAllMaps,
+          allLayers: allLayers,
+          allMapIds: allMapIds,
+          deleteLayer: deleteLayer,
+          layer: layer,
+          mapLayers: mapLayers,
+          removeLayerFromAllMaps: removeLayerFromAllMaps,
+          serviceType: service.type,
+          serviceUrl: layerServiceUrl
+        })
+      })
+    })]
+  });
+};
+
+var LayerRow = function LayerRow(_ref) {
+  var index = _ref.index,
+    style = _ref.style,
+    services = _ref.services,
+    filteredLayers = _ref.filteredLayers,
+    allLayers = _ref.allLayers,
+    allMapIds = _ref.allMapIds,
+    addLayer = _ref.addLayer,
+    addLayerToAllMaps = _ref.addLayerToAllMaps,
+    deleteLayer = _ref.deleteLayer,
+    removeLayerFromAllMaps = _ref.removeLayerFromAllMaps,
+    mapLayers = _ref.mapLayers,
+    searchFilter = _ref.searchFilter,
+    isLayerInfoVisibleInStore = _ref.isLayerInfoVisibleInStore,
+    _onToggleActiveLayer = _ref.onToggleActiveLayer,
+    currentLayerInfo = _ref.currentLayerInfo,
+    layerSelectWidth = _ref.layerSelectWidth,
+    rowMargin = _ref.rowMargin;
+  var layer = filteredLayers[index];
+  var service = services[layer.serviceName];
+  if (!service) {
+    return jsx("div", {
+      style: style
+    });
+  }
+  var isActiveLayer = isLayerInfoVisibleInStore && (currentLayerInfo == null ? void 0 : currentLayerInfo.serviceUrl) === service.serviceUrl && (currentLayerInfo == null ? void 0 : currentLayerInfo.layerName) === layer.name;
+  var rowStyle = Object.assign({}, style, {
+    boxSizing: 'border-box',
+    paddingBottom: rowMargin
+  });
+  return jsx("div", {
+    style: rowStyle,
+    children: jsx(LayerListRow, {
+      addLayer: addLayer,
+      addLayerToAllMaps: addLayerToAllMaps,
+      allLayers: allLayers,
+      allMapIds: allMapIds,
+      deleteLayer: deleteLayer,
+      hasActiveLayer: isActiveLayer,
+      layer: layer,
+      layerSelectWidth: layerSelectWidth,
+      mapLayers: mapLayers,
+      onToggleActiveLayer: function onToggleActiveLayer() {
+        return _onToggleActiveLayer({
+          serviceUrl: service.serviceUrl,
+          layerName: layer.name,
+          isActiveLayer: isActiveLayer
+        });
+      },
+      removeLayerFromAllMaps: removeLayerFromAllMaps,
+      searchFilter: searchFilter,
+      service: service
+    })
+  }, layer.name);
+};
+var LayerList = function LayerList(_ref2) {
+  var services = _ref2.services,
+    filteredLayers = _ref2.filteredLayers,
+    layerSelectHeight = _ref2.layerSelectHeight,
+    serviceListHeight = _ref2.serviceListHeight,
+    layerSelectWidth = _ref2.layerSelectWidth,
+    allLayers = _ref2.allLayers,
+    allMapIds = _ref2.allMapIds,
+    addLayer = _ref2.addLayer,
+    addLayerToAllMaps = _ref2.addLayerToAllMaps,
+    deleteLayer = _ref2.deleteLayer,
+    removeLayerFromAllMaps = _ref2.removeLayerFromAllMaps,
+    mapLayers = _ref2.mapLayers,
+    searchFilter = _ref2.searchFilter,
+    isLayerInfoVisibleInStore = _ref2.isLayerInfoVisibleInStore,
+    onToggleActiveLayer = _ref2.onToggleActiveLayer,
+    currentLayerInfo = _ref2.currentLayerInfo;
+  var _useLayerSelectTransl = useLayerSelectTranslation(),
+    t = _useLayerSelectTransl.t;
+  var rowMargin = 4;
+  var rowHeight = widthToRowHeight(layerSelectWidth);
+  var layerSelectFilterHeight = 155 + serviceListHeight;
+  var minHeight = 320;
+  var listHeight = layerSelectHeight - layerSelectFilterHeight < minHeight ? minHeight : layerSelectHeight - layerSelectFilterHeight;
+  return jsxs(Box, {
+    "data-testid": "layerList",
+    children: [jsxs(Box, {
+      sx: {
+        marginBottom: '4px',
+        fontSize: '12px'
+      },
+      children: [filteredLayers.length, " ", t('layer-list-results')]
+    }), jsx(List$1, {
+      defaultHeight: minHeight,
+      rowComponent: LayerRow,
+      rowCount: filteredLayers.length,
+      rowHeight: rowHeight + rowMargin,
+      rowProps: {
+        services: services,
+        filteredLayers: filteredLayers,
+        allLayers: allLayers,
+        allMapIds: allMapIds,
+        addLayer: addLayer,
+        addLayerToAllMaps: addLayerToAllMaps,
+        deleteLayer: deleteLayer,
+        removeLayerFromAllMaps: removeLayerFromAllMaps,
+        mapLayers: mapLayers,
+        searchFilter: searchFilter,
+        isLayerInfoVisibleInStore: isLayerInfoVisibleInStore,
+        onToggleActiveLayer: onToggleActiveLayer,
+        currentLayerInfo: currentLayerInfo,
+        layerSelectWidth: layerSelectWidth,
+        rowMargin: rowMargin
+      },
+      style: {
+        height: listHeight,
+        width: '100%'
+      }
+    })]
+  });
+};
+
+var LayerListConnect = function LayerListConnect(_ref) {
+  var mapId = _ref.mapId,
+    layerSelectHeight = _ref.layerSelectHeight,
+    serviceListHeight = _ref.serviceListHeight,
+    layerSelectWidth = _ref.layerSelectWidth;
+  var dispatch = useDispatch();
+  var services = useAppSelector(function (store) {
+    return serviceSelectors.getServices(store);
+  });
+  var mapLayers = useAppSelector(function (store) {
+    return mapSelectors.getMapLayersWithoutDimensionCurrentValue(store, mapId);
+  });
+  var allLayers = useAppSelector(function (store) {
+    return layerSelectors.getAllLayers(store);
+  });
+  var allMapIds = useAppSelector(function (store) {
+    return mapSelectors.getAllMapIds(store);
+  });
+  var _addLayer = function addLayer(_ref2, mapId) {
+    var serviceUrl = _ref2.serviceUrl,
+      layerName = _ref2.layerName,
+      serviceType = _ref2.serviceType;
+    var layer = {
+      service: serviceUrl,
+      name: layerName,
+      id: webmapUtils.generateLayerId(),
+      layerType: serviceType === 'STAC' ? LayerType.stacGeoTIFFLayer : LayerType.mapLayer
+    };
+    addMapLayer({
+      mapId: mapId,
+      layerId: layer.id,
+      layer: layer,
+      origin: layerTypes.LayerActionOrigin.layerManager
+    });
+  };
+  var addMapLayer = React.useCallback(function (_ref3) {
+    var mapId = _ref3.mapId,
+      layerId = _ref3.layerId,
+      layer = _ref3.layer,
+      origin = _ref3.origin;
+    return dispatch(layerActions.addLayer({
+      mapId: mapId,
+      layerId: layerId,
+      layer: layer,
+      origin: origin
+    }));
+  }, [dispatch]);
+  var addLayerToAllMaps = function addLayerToAllMaps(_ref4) {
+    var serviceUrl = _ref4.serviceUrl,
+      layerName = _ref4.layerName,
+      serviceType = _ref4.serviceType;
+    allMapIds.forEach(function (mapId) {
+      if (allLayers.find(function (layer) {
+        return layer.name === layerName && layer.service === serviceUrl && layer.mapId === mapId;
+      })) {
+        return;
+      }
+      _addLayer({
+        serviceUrl: serviceUrl,
+        layerName: layerName,
+        serviceType: serviceType
+      }, mapId);
+    });
+  };
+  var deleteLayer = React.useCallback(function (_ref5) {
+    var layerId = _ref5.layerId,
+      layerIndex = _ref5.layerIndex;
+    return dispatch(layerActions.layerDelete({
+      mapId: mapId,
+      layerId: layerId,
+      layerIndex: layerIndex,
+      origin: layerTypes.LayerActionOrigin.layerManager
+    }));
+  }, [dispatch, mapId]);
+  var removeLayerFromAllMaps = React.useCallback(function (layerId) {
+    if (!layerId) {
+      return;
+    }
+    var layerToRemove = allLayers.find(function (layer) {
+      return layer.id === layerId;
+    });
+    (layerToRemove == null ? void 0 : layerToRemove.name) && (layerToRemove == null ? void 0 : layerToRemove.service) && allLayers.filter(function (layer) {
+      return layer.name === layerToRemove.name && layer.service === layerToRemove.service;
+    }).forEach(function (layer) {
+      layer.mapId && layer.id && dispatch(layerActions.layerDelete({
+        mapId: layer.mapId,
+        layerId: layer.id
+      }));
+    });
+  }, [dispatch, allLayers]);
+  var filteredLayers = useAppSelector(function (store) {
+    return getFilteredLayers(store);
+  });
+  var searchFilter = useAppSelector(function (store) {
+    return getSearchFilter(store);
+  });
+  var isLayerInfoVisibleInStore = useAppSelector(function (store) {
+    return uiSelectors.getisDialogOpen(store, uiTypes.DialogTypes.LayerInfo);
+  });
+  var currentLayerInfo = useAppSelector(function (store) {
+    return layerSelectors.getActiveLayerInfo(store);
+  });
+  var onToggleActiveLayer = React.useCallback(function (_ref6) {
+    var serviceUrl = _ref6.serviceUrl,
+      layerName = _ref6.layerName,
+      isActiveLayer = _ref6.isActiveLayer;
+    if (!isActiveLayer) {
+      dispatch(layerActions.showLayerInfo({
+        layerName: layerName,
+        serviceUrl: serviceUrl,
+        mapId: mapId
+      }));
+    } else {
+      dispatch(layerActions.hideLayerInfo());
+    }
+  }, [mapId, dispatch]);
+  return jsx(LayerList, {
+    addLayer: function addLayer(params) {
+      return _addLayer(params, mapId);
+    },
+    addLayerToAllMaps: addLayerToAllMaps,
+    allLayers: allLayers,
+    allMapIds: allMapIds,
+    currentLayerInfo: currentLayerInfo,
+    deleteLayer: deleteLayer,
+    filteredLayers: filteredLayers,
+    isLayerInfoVisibleInStore: isLayerInfoVisibleInStore,
+    layerSelectHeight: layerSelectHeight,
+    layerSelectWidth: layerSelectWidth,
+    mapLayers: mapLayers,
+    onToggleActiveLayer: onToggleActiveLayer,
+    removeLayerFromAllMaps: removeLayerFromAllMaps,
+    searchFilter: searchFilter,
+    serviceListHeight: serviceListHeight,
+    services: services
+  });
+};
+
+var style$2 = {
+  width: 'auto !important',
+  height: 'auto !important',
+  padding: 0
+};
+var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
+  var mapId = _ref.mapId,
+    _ref$source = _ref.source,
+    source = _ref$source === void 0 ? 'app' : _ref$source,
+    tooltipTitle = _ref.tooltipTitle,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? jsx(LayersAdd, {
+      "data-testid": "layerSelectButtonConnectIcon"
+    }) : _ref$icon,
+    _ref$isMultiMap = _ref.isMultiMap,
+    isMultiMap = _ref$isMultiMap === void 0 ? false : _ref$isMultiMap;
+  var _useLayerSelectTransl = useLayerSelectTranslation(),
+    t = _useLayerSelectTransl.t;
+  var dispatch = useDispatch();
+  var dialogType = isMultiMap ? uiTypes.DialogTypes.LayerSelect + "-" + mapId : uiTypes.DialogTypes.LayerSelect;
+  var currentActiveMapId = useAppSelector(function (store) {
+    return uiSelectors.getDialogMapId(store, dialogType);
+  });
+  var isOpenInStore = useAppSelector(function (store) {
+    return uiSelectors.getisDialogOpen(store, dialogType);
+  });
+  var openLayerSelectDialog = React.useCallback(function () {
+    dispatch(uiActions.setActiveMapIdForDialog({
+      type: dialogType,
+      mapId: mapId,
+      setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
+      source: source
+    }));
+  }, [currentActiveMapId, dispatch, isOpenInStore, mapId, source, dialogType]);
+  return jsx(CustomIconButton, {
+    "data-testid": "layerSelectButton",
+    id: "layerSelectButton",
+    onClick: openLayerSelectDialog,
+    sx: style$2,
+    tooltipTitle: tooltipTitle || t('layer-select-button-tooltip'),
+    children: icon
+  });
+};
+
+var DataExplorerButtonConnect = function DataExplorerButtonConnect(_ref) {
+  var mapId = _ref.mapId,
+    _ref$source = _ref.source,
+    source = _ref$source === void 0 ? 'app' : _ref$source;
+  var dispatch = useDispatch();
+  var dialogType = uiTypes.DialogTypes.DataExplorer;
+  var currentActiveMapId = useSelector(function (store) {
+    return uiSelectors.getDialogMapId(store, dialogType);
+  });
+  var isOpenInStore = useSelector(function (store) {
+    return uiSelectors.getisDialogOpen(store, dialogType);
+  });
+  var openDataExplorerDialog = React.useCallback(function () {
+    dispatch(uiActions.setActiveMapIdForDialog({
+      type: dialogType,
+      setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
+      source: source,
+      mapId: mapId,
+      origin: mapEnums.MapActionOrigin.map
+    }));
+  }, [dispatch, dialogType, currentActiveMapId, mapId, isOpenInStore, source]);
+  return jsx(CustomTooltip, {
+    title: "MeteoGate Data Explorer",
+    children: jsx(CustomIconButton, {
+      "data-testid": "dataExplorerButton",
+      isSelected: currentActiveMapId !== mapId ? false : isOpenInStore,
+      onClick: openDataExplorerDialog,
+      variant: "tool",
+      children: jsx(MeteoGate, {
+        sx: {}
+      })
+    })
+  });
+};
+
+var SearchFieldConnect = function SearchFieldConnect() {
+  var dispatch = useDispatch();
+  var searchFilter = useAppSelector(function (store) {
+    return getSearchFilter(store);
+  });
+  var toggleServicePopup = function toggleServicePopup(url) {
+    dispatch(layerSelectActions.toggleServicePopup({
+      isOpen: true,
+      url: url,
+      variant: 'save'
+    }));
+  };
+  var setSearchFilter = function setSearchFilter(filterText) {
+    dispatch(layerSelectActions.setSearchFilter({
+      filterText: filterText
+    }));
+  };
+  return jsx(SearchField, {
+    onOpenServicePopup: toggleServicePopup,
+    searchFilter: searchFilter,
+    setSearchFilter: setSearchFilter
+  });
+};
+
+var style$1 = {
+  borderRadius: '20px!important',
+  marginRight: '4px',
+  whiteSpace: 'nowrap',
+  height: '24px!important',
+  padding: '5px 12px!important',
+  textTransform: 'none!important',
+  fontWeight: 'normal',
+  marginBottom: '4px'
+};
+var ServiceChip = function ServiceChip(_ref) {
+  var _ref$all = _ref.all,
+    all = _ref$all === void 0 ? false : _ref$all,
+    service = _ref.service,
+    isSelected = _ref.isSelected,
+    isDisabled = _ref.isDisabled,
+    toggleChip = _ref.toggleChip,
+    isInSearch = _ref.isInSearch;
+  var _useLayerSelectTransl = useLayerSelectTranslation(),
+    t = _useLayerSelectTransl.t;
+  var _useTheme = useTheme(),
+    geowebColors = _useTheme.palette.geowebColors;
+  var _React$useState = React.useState(false),
+    isIconHovered = _React$useState[0],
+    setIsIconHovered = _React$useState[1];
+  var chip = all ? 'all' : service == null ? void 0 : service.serviceUrl;
+  var tooltipTitle = '';
+  if (!isIconHovered && service != null && service["abstract"]) {
+    tooltipTitle = "Abstract: " + service["abstract"];
+  }
+  return jsx(CustomTooltip, {
+    title: tooltipTitle,
+    children: jsx("span", {
+      children: jsxs(CustomToggleButton, {
+        "data-testid": all ? 'serviceChipAll' : 'serviceChip',
+        disabled: isDisabled,
+        onClick: function onClick() {
+          return toggleChip(chip);
+        },
+        onKeyDown: function onKeyDown() {
+          return toggleChip(chip);
+        },
+        selected: Boolean(isSelected),
+        sx: Object.assign({}, style$1, isInSearch && Object.assign({
+          backgroundColor: geowebColors.chip.highlightDefault.rgba + "!important",
+          '&:hover': {
+            backgroundColor: geowebColors.chip.highlightDefaultMouseOver.rgba + "!important"
+          }
+        }, isSelected && {
+          backgroundColor: geowebColors.chip.highlightActiveDefault.rgba + "!important",
+          '&:hover': {
+            backgroundColor: geowebColors.chip.highlightActiveMouseOver.rgba + "!important"
+          }
+        })),
+        tabIndex: 0,
+        variant: "boxed",
+        children: [(service == null ? void 0 : service.type) === 'STAC' && jsx(CustomTooltip, {
+          title: "STAC Service",
+          children: jsx("span", {
+            onMouseEnter: function onMouseEnter() {
+              return setIsIconHovered(true);
+            },
+            onMouseLeave: function onMouseLeave() {
+              return setIsIconHovered(false);
+            },
+            style: {
+              display: 'flex',
+              alignItems: 'center'
+            },
+            children: jsx(StacIcon, {
+              fontSize: "inherit",
+              sx: {
+                mr: '4px',
+                verticalAlign: 'middle'
+              }
+            })
+          })
+        }), service ? service.serviceName : t('all')]
+      })
+    })
+  });
+};
+
+var ServiceChipConnect = function ServiceChipConnect(_ref) {
+  var service = _ref.service,
+    isAllSelected = _ref.isAllSelected;
+  var dispatch = useDispatch();
+  var serviceId = service.serviceId;
+  var isInSearch = service.isInSearch || false;
+  var toggleChip = function toggleChip() {
+    if (service.enabled) {
+      if (isAllSelected) {
+        dispatch(layerSelectActions.onlyThisServiceEnabled({
+          serviceId: serviceId
+        }));
+        return;
+      }
+      dispatch(layerSelectActions.disableActiveService({
+        serviceId: serviceId
+      }));
+      return;
+    }
+    dispatch(layerSelectActions.enableActiveService({
+      serviceId: serviceId
+    }));
+  };
+  return jsx(ServiceChip, {
+    isDisabled: service.isLoading,
+    isInSearch: isInSearch,
+    isSelected: isAllSelected ? false : service.enabled,
+    service: service,
+    toggleChip: toggleChip
+  });
+};
+var AllChipConnect = function AllChipConnect(_ref2) {
+  var isAllSelected = _ref2.isAllSelected;
+  var dispatch = useDispatch();
+  return jsx(ServiceChip, {
+    isSelected: isAllSelected,
+    toggleChip: function toggleChip() {
+      if (!isAllSelected) {
+        dispatch(layerSelectActions.enableAllActiveServices());
+      }
+    }
+  });
+};
+
+var ServiceList = function ServiceList(_ref) {
+  var _ref$current;
+  var activeServicesById = _ref.activeServicesById,
+    setHeight = _ref.setHeight;
+  var ref = React.useRef(null);
+  var _React$useState = React.useState(0),
+    serviceListHeight = _React$useState[0],
+    setServiceListHeight = _React$useState[1];
+  var clientHeight = (ref == null || (_ref$current = ref.current) == null ? void 0 : _ref$current.clientHeight) && ref.current.clientHeight;
+  React.useEffect(function () {
+    var _ref$current2;
+    if (ref != null && (_ref$current2 = ref.current) != null && _ref$current2.clientHeight) {
+      setServiceListHeight(ref.current.clientHeight);
+    }
+  }, [activeServicesById, clientHeight]);
+  React.useEffect(function () {
+    setHeight(serviceListHeight);
+  }, [serviceListHeight, setHeight]);
+  var activeServicesIds = Object.keys(activeServicesById);
+  var activeServices = Object.values(activeServicesById);
+  var isAllSelected = activeServices.every(function (activeService) {
+    return activeService.enabled;
+  });
+  return jsx(Box, {
+    "data-testid": "serviceList",
+    sx: {
+      marginTop: '8px',
+      width: '100%',
+      overflow: 'hidden'
+    },
+    children: jsxs(Box, {
+      ref: ref,
+      sx: {
+        width: '100%',
+        display: 'block',
+        alignItems: 'center',
+        "float": 'left',
+        paddingLeft: '48px',
+        paddingRight: '40px',
+        marginBottom: '8px',
+        fontSize: '0.875rem'
+      },
+      children: [!!(activeServicesIds != null && activeServicesIds.length) && jsx(AllChipConnect, {
+        isAllSelected: isAllSelected
+      }), activeServices.map(function (service) {
+        return jsx(ServiceChipConnect, {
+          isAllSelected: isAllSelected,
+          service: service
+        }, service.serviceUrl);
+      })]
+    })
+  });
+};
+
+var ServiceListConnect = function ServiceListConnect(_ref) {
+  var setHeight = _ref.setHeight;
+  var filteredActiveServices = useAppSelector(function (store) {
+    return getFilteredActiveServices(store);
+  });
+  return jsx(ServiceList, {
+    activeServicesById: sortByService(filteredActiveServices),
+    setHeight: setHeight
+  });
+};
+
+var styles = {
+  servicesContainer: {
+    width: '360px',
+    maxHeight: '412px',
+    top: '140px',
+    backgroundColor: 'geowebColors.background.surface',
+    boxShadow: 6,
+    overflow: 'auto'
+  },
+  header: {
+    position: 'sticky',
+    top: 0,
+    padding: '12px',
+    backgroundColor: 'geowebColors.background.surface',
+    zIndex: 100
+  },
+  text: {
+    fontSize: 'default',
+    opacity: 0.67
+  },
+  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'
+  }
+};
+var stopTabPropagation = function stopTabPropagation(event) {
+  if (event.key === 'Tab') {
+    event.stopPropagation();
+  }
+};
+var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
+  var services = _ref.services,
+    layerSelectRemoveService = _ref.layerSelectRemoveService,
+    layerSelectReloadService = _ref.layerSelectReloadService,
+    selectedLayers = _ref.selectedLayers,
+    setServicePopupInfo = _ref.setServicePopupInfo,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    error = _ref.error;
+  var _useLayerSelectTransl = useLayerSelectTranslation(),
+    t = _useLayerSelectTransl.t;
+  var openAddService = function openAddService() {
+    setServicePopupInfo({
+      isOpen: true,
+      variant: 'add'
+    });
+  };
+  var dialogRef = React.useRef(null);
+  React.useEffect(function () {
+    var _dialogRef$current;
+    (_dialogRef$current = dialogRef.current) == null || _dialogRef$current.focus();
+  }, []);
+  return jsxs(Box, {
+    "data-testid": "ServiceDialog",
+    onKeyDown: function onKeyDown(event) {
+      if (event.key !== 'Escape') {
+        event.stopPropagation();
+      }
+    },
+    ref: dialogRef,
+    sx: styles.servicesContainer,
+    tabIndex: -1,
+    children: [jsxs(Box, {
+      sx: styles.header,
+      children: [jsx(Box, {
+        sx: styles.text,
+        children: t('services')
+      }), error ? jsx(AlertBanner, {
+        shouldClose: true,
+        title: error
+      }) : null]
+    }), jsx(Backdrop, {
+      open: isLoading,
+      sx: Object.assign({}, styles.loading, {
+        backgroundSize: 'cover'
+      }),
+      children: jsx(CircularProgress, {})
+    }), jsx(Rows, {
+      layerSelectReloadService: layerSelectReloadService,
+      layerSelectRemoveService: layerSelectRemoveService,
+      selectedLayers: selectedLayers,
+      services: services,
+      setServicePopupInfo: setServicePopupInfo
+    }), jsx(Box, {
+      sx: styles.footer,
+      children: jsx(Button, {
+        "data-testid": "openAddServiceButton",
+        onClick: openAddService,
+        onKeyDown: stopTabPropagation,
+        startIcon: jsx(Add, {}),
+        sx: styles.button,
+        variant: "tertiary",
+        children: t('add-a-new-service')
+      })
+    })]
+  });
+};
+var deleteServiceTitle = function deleteServiceTitle(t, hasActiveLayers) {
+  return hasActiveLayers ? t('service-has-active-layers-error') : t('delete-service');
+};
+var tooltipPlacement = function tooltipPlacement() {
+  return 'left';
+};
+var tooltipPopperProps = {
+  disablePortal: true,
+  sx: {
+    '& .MuiTooltip-tooltip': {
+      width: '200px',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }
+};
+var Rows = function Rows(_ref2) {
+  var services = _ref2.services,
+    layerSelectReloadService = _ref2.layerSelectReloadService,
+    layerSelectRemoveService = _ref2.layerSelectRemoveService,
+    setServicePopupInfo = _ref2.setServicePopupInfo,
+    selectedLayers = _ref2.selectedLayers;
+  var _useLayerSelectTransl2 = useLayerSelectTranslation(),
+    t = _useLayerSelectTransl2.t;
+  var checkIfServiceHasActiveLayers = function checkIfServiceHasActiveLayers(serviceUrl) {
+    var foundService = selectedLayers.find(function (object) {
+      return object.service === serviceUrl;
+    });
+    if (foundService) {
+      return true;
+    }
+    return false;
+  };
+  var sortedServices = sortByService(services);
+  return jsx(List, {
+    disablePadding: true,
+    children: Object.keys(sortedServices).map(function (serviceId) {
+      var _services$serviceId = services[serviceId],
+        serviceUrl = _services$serviceId.serviceUrl,
+        serviceName = _services$serviceId.serviceName,
+        scope = _services$serviceId.scope;
+      var serviceHasActiveLayers = checkIfServiceHasActiveLayers(serviceUrl);
+      var userAddedService = isUserAddedService(scope);
+      return jsx(ListItem, {
+        secondaryAction: jsx(Box, {
+          sx: {
+            marginRight: '0px',
+            width: 96,
+            button: {
+              marginLeft: 1
+            }
+          },
+          children: jsxs(Grid, {
+            container: true,
+            sx: {
+              justifyContent: 'left',
+              marginRight: '0px',
+              width: 96,
+              button: {
+                marginLeft: 1
+              }
+            },
+            children: [jsx(CustomTooltip, {
+              "data-testid": "updateServiceTooltip",
+              placement: tooltipPlacement(),
+              slotProps: {
+                popper: tooltipPopperProps
+              },
+              title: t('update-service-title'),
+              children: jsx(CustomIconButton, {
+                "aria-label": "Update layers from WMS service",
+                "data-testid": "updateServiceButton",
+                onClick: function onClick() {
+                  layerSelectReloadService(serviceUrl);
+                },
+                onKeyDown: stopTabPropagation,
+                children: jsx(Cached, {})
+              })
+            }), userAddedService ? jsx(CustomTooltip, {
+              placement: tooltipPlacement(),
+              slotProps: {
+                popper: tooltipPopperProps
+              },
+              title: t('edit-service-title'),
+              children: jsx("span", {
+                children: jsx(CustomIconButton, {
+                  "aria-label": "edit service",
+                  "data-testid": "openEditServiceButton",
+                  onClick: function onClick() {
+                    setServicePopupInfo({
+                      isOpen: true,
+                      serviceId: serviceId,
+                      serviceUrl: serviceUrl,
+                      variant: 'edit'
+                    });
+                  },
+                  onKeyDown: stopTabPropagation,
+                  children: jsx(Edit, {})
+                })
+              })
+            }) : jsx(CustomTooltip, {
+              placement: tooltipPlacement(),
+              slotProps: {
+                popper: tooltipPopperProps
+              },
+              title: t('show-service-title'),
+              children: jsx("span", {
+                children: jsx(CustomIconButton, {
+                  "aria-label": "show service",
+                  "data-testid": "openShowServiceButton",
+                  onClick: function onClick() {
+                    setServicePopupInfo({
+                      isOpen: true,
+                      serviceId: serviceId,
+                      serviceUrl: serviceUrl,
+                      variant: 'show'
+                    });
+                  },
+                  onKeyDown: stopTabPropagation,
+                  children: jsx(Visibility, {})
+                })
+              })
+            }), !!userAddedService && jsx(Box, {
+              children: jsx(CustomTooltip, {
+                "data-testid": "removeServiceTooltip",
+                placement: tooltipPlacement(),
+                slotProps: {
+                  popper: tooltipPopperProps
+                },
+                title: deleteServiceTitle(t, serviceHasActiveLayers),
+                children: jsx("span", {
+                  children: jsx(CustomIconButton, {
+                    "aria-label": "delete service",
+                    "data-testid": "removeServiceButton",
+                    disabled: serviceHasActiveLayers,
+                    onClick: function onClick() {
+                      return layerSelectRemoveService(serviceId, serviceUrl, serviceName);
+                    },
+                    onKeyDown: stopTabPropagation,
+                    children: jsx(Delete, {})
+                  })
+                })
+              })
+            })]
+          })
+        }),
+        children: jsx(ListItemText, {
+          style: {
+            fontSize: '16px'
+          },
+          children: jsx(Typography, {
+            noWrap: true,
+            style: {
+              textOverflow: 'ellipsis',
+              paddingRight: '70px'
+            },
+            children: serviceName
+          })
+        })
+      }, serviceUrl);
+    })
+  });
+};
+
+var DetectableServiceType;
+(function (DetectableServiceType) {
+  DetectableServiceType["STAC"] = "STAC";
+  DetectableServiceType["WMS"] = "WMS";
+})(DetectableServiceType || (DetectableServiceType = {}));
+var normalizeStacServiceUrl = function normalizeStacServiceUrl(serviceUrl) {
+  return (serviceUrl != null ? serviceUrl : '').replace(/\/collections.*$/i, '');
+};
+var validateServiceName = function validateServiceName(t, value, services, ownServiceName) {
+  if (ownServiceName === void 0) {
+    ownServiceName = '';
+  }
+  var serviceName = value == null ? void 0 : value.toLowerCase();
+  var foundName = Object.keys(services).find(function (serviceId) {
+    var _services$serviceId;
+    return ((_services$serviceId = services[serviceId]) == null ? void 0 : _services$serviceId.serviceName.toLowerCase()) === serviceName && serviceName !== ownServiceName.toLocaleLowerCase();
+  });
+  return foundName === undefined ? true : t('validations-name-existing');
+};
+var isValidUrl = function isValidUrl(url) {
+  if (url === '' || url === null || typeof url === 'undefined') {
+    return false;
+  }
+  var matcher = /^(?:\w+:)?\/\/([^\s.]+\.\S{2}|[0-9a-zA-Z]+[:?\d]*)\S*$/;
+  if (!matcher.test(url)) {
+    return false;
+  }
+  return true;
+};
+var validateServiceUrl = function validateServiceUrl(t, value, services) {
+  var serviceUrl = value;
+  // validate valid url
+  var isServiceUrlValid = isValidUrl(serviceUrl);
+  if (!isServiceUrlValid) {
+    return t('validations-service-valid-url');
+  }
+  // check url existing
+  var foundUrl = Object.keys(services).find(function (serviceId) {
+    var _services$serviceId2;
+    return ((_services$serviceId2 = services[serviceId]) == null ? void 0 : _services$serviceId2.serviceUrl) === serviceUrl;
+  });
+  if (foundUrl) {
+    return t('validations-service-existing');
+  }
+  return true;
+};
+var loadWMSService = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(serviceUrl, forceReload) {
+    var layers, service;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          if (forceReload === void 0) {
+            forceReload = false;
+          }
+          if (!forceReload) {
+            _context.n = 1;
+            break;
+          }
+          _context.n = 1;
+          return invalidateWMSGetCapabilities(serviceUrl);
+        case 1:
+          _context.n = 2;
+          return queryWMSLayers(serviceUrl);
+        case 2:
+          layers = _context.v;
+          _context.n = 3;
+          return queryWMSServiceInfo(serviceUrl);
+        case 3:
+          service = _context.v;
+          return _context.a(2, {
+            id: service.id || getWMSServiceId(serviceUrl),
+            name: service.title,
+            serviceUrl: serviceUrl,
+            "abstract": service["abstract"],
+            layers: layers,
+            scope: 'user'
+          });
+      }
+    }, _callee);
+  }));
+  return function loadWMSService(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var detectServiceType = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(url) {
+    var root, hasStacRootShape;
+    return _regenerator().w(function (_context2) {
+      while (1) switch (_context2.p = _context2.n) {
+        case 0:
+          _context2.p = 0;
+          _context2.n = 1;
+          return fetchStacCatalogRoot(url);
+        case 1:
+          root = _context2.v;
+          hasStacRootShape = root.stac_version || root.type === 'Catalog' || Array.isArray(root.conformsTo);
+          if (!hasStacRootShape) {
+            _context2.n = 2;
+            break;
+          }
+          return _context2.a(2, DetectableServiceType.STAC);
+        case 2:
+          if (!(root.type === 'Collection' && root.stac_version && Array.isArray(root.links))) {
+            _context2.n = 3;
+            break;
+          }
+          return _context2.a(2, DetectableServiceType.STAC);
+        case 3:
+          _context2.n = 5;
+          break;
+        case 4:
+          _context2.p = 4;
+          _context2.v;
+        case 5:
+          return _context2.a(2, DetectableServiceType.WMS);
+      }
+    }, _callee2, null, [[0, 4]]);
+  }));
+  return function detectServiceType(_x3) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+var loadSTACService = /*#__PURE__*/function () {
+  var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(serviceUrl) {
+    var _ref4, _root$title, _root$description;
+    var _yield$Promise$all, root, collections, serviceId, layers;
+    return _regenerator().w(function (_context3) {
+      while (1) switch (_context3.n) {
+        case 0:
+          _context3.n = 1;
+          return Promise.all([fetchStacCatalogRoot(serviceUrl), fetchStacCatalogCollections(serviceUrl)]);
+        case 1:
+          _yield$Promise$all = _context3.v;
+          root = _yield$Promise$all[0];
+          collections = _yield$Promise$all[1];
+          serviceId = serviceUrl.replace(/\/+$/, '').replace(/[^a-zA-Z0-9]/g, '_');
+          layers = collections.map(stacCatalogCollectionToLayerProps);
+          return _context3.a(2, {
+            // Use URL-based ids so different STAC endpoints with identical root.id
+            // values (e.g. "stac-fastapi") can coexist in the service store.
+            id: serviceId,
+            name: (_ref4 = (_root$title = root.title) != null ? _root$title : root.id) != null ? _ref4 : serviceId,
+            serviceUrl: serviceUrl,
+            "abstract": (_root$description = root.description) != null ? _root$description : '',
+            layers: layers,
+            scope: 'user',
+            type: DetectableServiceType.STAC
+          });
+      }
+    }, _callee3);
+  }));
+  return function loadSTACService(_x4) {
+    return _ref3.apply(this, arguments);
+  };
+}();
+
+var getService = function getService(services, serviceUrl) {
+  var serviceIds = Object.keys(services);
+  var serviceIndex = serviceIds.findIndex(function (serviceId) {
+    var _services$serviceId;
+    return ((_services$serviceId = services[serviceId]) == null ? void 0 : _services$serviceId.serviceUrl) === serviceUrl;
+  });
+  if (serviceIndex < 0) {
+    return null;
+  }
+  return services[serviceIds[serviceIndex]];
+};
+var getServiceSuccesUpdateMessage = function getServiceSuccesUpdateMessage(serviceName) {
+  return {
+    type: snackbarTypes.SnackbarMessageType.TRANSLATABLE_MESSAGE,
+    key: 'service-successfully-updated',
+    params: {
+      serviceName: serviceName
+    }
+  };
+};
+var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect(_ref) {
+  var mapId = _ref.mapId;
+  var _React$useState = React.useState(false),
+    isLoading = _React$useState[0],
+    setIsLoading = _React$useState[1];
+  var _React$useState2 = React.useState(undefined),
+    error = _React$useState2[0],
+    setError = _React$useState2[1];
+  var dispatch = useDispatch();
+  var _useLayerSelectTransl = useLayerSelectTranslation(),
+    t = _useLayerSelectTransl.t;
+  var serviceSetLayers = React.useCallback(function (payload) {
+    dispatch(serviceActions.serviceSetLayers(Object.assign({}, payload, {
+      isUpdating: true
+    })));
+  }, [dispatch]);
+  var setServicePopupInfo = React.useCallback(function (popupInfo) {
+    var payload = Object.assign({}, popupInfo, {
+      variant: popupInfo.variant || 'default'
+    });
+    dispatch(layerSelectActions.toggleServicePopup(payload));
+  }, [dispatch]);
+  var showSnackbar = React.useCallback(function (message) {
+    dispatch(snackbarActions.openSnackbar(message));
+  }, [dispatch]);
+  var services = useAppSelector(function (store) {
+    return getActiveServices(store);
+  });
+  var selectedLayers = useAppSelector(function (store) {
+    return mapSelectors.getMapLayersWithoutDimensionCurrentValue(store, mapId);
+  });
+  var layerSelectRemoveService = React.useCallback(function (serviceId, serviceUrl, serviceName) {
+    var message = {
+      type: snackbarTypes.SnackbarMessageType.TRANSLATABLE_MESSAGE,
+      key: 'service-has-been-deleted',
+      params: {
+        serviceName: serviceName
+      }
+    };
+    showSnackbar(message);
+    dispatch(layerSelectActions.layerSelectRemoveService({
+      serviceId: serviceId,
+      serviceUrl: serviceUrl
+    }));
+  }, [dispatch, showSnackbar]);
+  var layerSelectReloadService = React.useCallback(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(serviceUrl) {
+      var layersForService, service, serviceTitle, _t;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.p = _context.n) {
+          case 0:
+            setIsLoading(true);
+            setError(undefined);
+            _context.p = 1;
+            _context.n = 2;
+            return loadWMSService(serviceUrl, true);
+          case 2:
+            layersForService = _context.v;
+            service = getService(services, serviceUrl);
+            serviceSetLayers({
+              id: layersForService.id,
+              name: (service == null ? void 0 : service.serviceName) || layersForService.name,
+              serviceUrl: serviceUrl,
+              "abstract": (service == null ? void 0 : service["abstract"]) || layersForService["abstract"],
+              layers: layersForService.layers,
+              scope: (service == null ? void 0 : service.scope) || 'user',
+              isUpdating: true
+            });
+            clearImageCacheForAllMaps();
+            serviceTitle = (service == null ? void 0 : service.serviceName) || layersForService.name;
+            showSnackbar(getServiceSuccesUpdateMessage(serviceTitle));
+            _context.n = 4;
+            break;
+          case 3:
+            _context.p = 3;
+            _t = _context.v;
+            setError(t('unable-to-update-service', {
+              message: _t.message
+            }));
+          case 4:
+            _context.p = 4;
+            setIsLoading(false);
+            return _context.f(4);
+          case 5:
+            return _context.a(2);
+        }
+      }, _callee, null, [[1, 3, 4, 5]]);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [serviceSetLayers, services, showSnackbar, t]);
+  return jsx(ServiceOptionsDialog, {
+    error: error,
+    isLoading: isLoading,
+    layerSelectReloadService: layerSelectReloadService,
+    layerSelectRemoveService: layerSelectRemoveService,
+    selectedLayers: selectedLayers,
+    services: services,
+    setServicePopupInfo: setServicePopupInfo
+  });
+};
+
+var ServiceOptionsButton = function ServiceOptionsButton(_ref) {
+  var mapId = _ref.mapId;
+  return jsx(ToggleMenu, {
+    buttonTestId: "serviceOptionsButton",
+    menuPosition: "bottom",
+    children: jsx(ServiceOptionsDialogConnect, {
+      mapId: mapId
+    })
+  });
+};
+
+var LayerSelect = function LayerSelect(_ref) {
+  var mapId = _ref.mapId,
+    bounds = _ref.bounds,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
+    showTitle = _ref.showTitle,
+    isOpen = _ref.isOpen,
+    _ref$onMouseDown = _ref.onMouseDown,
+    _onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
+    _ref$order = _ref.order,
+    order = _ref$order === void 0 ? 0 : _ref$order,
+    _ref$source = _ref.source,
+    source = _ref$source === void 0 ? 'module' : _ref$source,
+    _ref$startSize = _ref.startSize,
+    startSize = _ref$startSize === void 0 ? {
+      width: 750,
+      height: 500
+    } : _ref$startSize,
+    _ref$isMultiMap = _ref.isMultiMap,
+    isMultiMap = _ref$isMultiMap === void 0 ? false : _ref$isMultiMap,
+    _ref$hasDataExplorer = _ref.hasDataExplorer,
+    hasDataExplorer = _ref$hasDataExplorer === void 0 ? false : _ref$hasDataExplorer;
+  var initialServiceListHeight = hasDataExplorer ? 52 : 37;
+  var _React$useState = React.useState(startSize.height),
+    height = _React$useState[0],
+    setHeight = _React$useState[1];
+  var _React$useState2 = React.useState(startSize.width),
+    width = _React$useState2[0],
+    setWidth = _React$useState2[1];
+  var _React$useState3 = React.useState(initialServiceListHeight),
+    serviceListHeight = _React$useState3[0],
+    setServiceListHeight = _React$useState3[1];
+  var onChangeSize = function onChangeSize(_ref2) {
+    var height = _ref2.height,
+      width = _ref2.width;
+    setHeight(height);
+    setWidth(width);
+  };
+  var handleHeightChange = function handleHeightChange(height) {
+    if (height > initialServiceListHeight) {
+      setServiceListHeight(height);
+    }
+  };
+  return jsxs(ToolContainerDraggable, {
+    bounds: bounds,
+    "data-testid": "layerSelectWindow",
+    isOpen: isOpen,
+    minHeight: 126,
+    minWidth: 320,
+    onClose: onClose,
+    onMouseDown: function onMouseDown(event) {
+      var target = event.target;
+      var isButtonInScrollableList = target.closest('.layerInfoButton') || target.closest('.layerAddRemoveButton');
+      //  don't propagate when clicking on layerInfoButton or addRemoveButton
+      if (isButtonInScrollableList) {
+        event.stopPropagation();
+        return;
+      }
+      _onMouseDown(event);
+    },
+    onResizeStop: function onResizeStop(_event, _direction, node) {
+      var width = node.offsetWidth,
+        height = node.offsetHeight;
+      onChangeSize({
+        width: width,
+        height: height
+      });
+    },
+    order: order,
+    source: source,
+    startPosition: {
+      top: 150,
+      left: 100
+    },
+    startSize: {
+      width: width,
+      height: height
+    },
+    title: showTitle ? "Layer Select " + mapId : 'Layer Select',
+    children: [jsx(Box, {
+      sx: {
+        padding: '4px 16px 0 16px'
+      },
+      children: jsx(SearchFieldConnect, {})
+    }), jsx(Box, {
+      sx: {
+        "float": 'left',
+        position: 'absolute',
+        margin: '8px 8px 0 16px',
+        zIndex: 2
+      },
+      children: jsxs(Grid, {
+        container: true,
+        children: [jsx(Grid, {
+          size: 12,
+          children: jsx(KeywordFilterButtonConnect, {
+            isMultiMap: isMultiMap,
+            mapId: mapId,
+            source: source
+          })
+        }), !!hasDataExplorer && jsx(Grid, {
+          size: 12,
+          children: jsx(DataExplorerButtonConnect, {
+            mapId: mapId
+          })
+        })]
+      })
+    }), jsx(Box, {
+      sx: {
+        position: 'absolute',
+        margin: '8px 0 0 calc(100% - 40px)',
+        zIndex: 2
+      },
+      children: jsx(ServiceOptionsButton, {
+        mapId: mapId
+      })
+    }), jsx(Box, {
+      sx: hasDataExplorer ? {
+        minHeight: '52px'
+      } : {},
+      children: jsx(ServiceListConnect, {
+        setHeight: handleHeightChange
+      })
+    }), jsx(Box, {
+      sx: {
+        padding: '0 16px'
+      },
+      children: jsx(LayerListConnect, {
+        layerSelectHeight: height,
+        layerSelectWidth: width,
+        mapId: mapId,
+        serviceListHeight: serviceListHeight
+      })
+    })]
+  });
+};
+
+var style = {
+  textField: {
+    width: '100%',
+    marginBottom: 2
+  }
+};
+var getSuccesMessage = function getSuccesMessage(serviceName, t) {
+  return t('get-success-message', {
+    serviceName: serviceName
+  });
+};
+var getTitleForVariant = function getTitleForVariant(t, variant) {
+  switch (variant) {
+    case 'add':
+      return t('add-a-new-service');
+    case 'edit':
+      return t('edit-service-title');
+    case 'save':
+      return t('save-service-title');
+    default:
+      return 'Service';
+  }
+};
+var FormFields;
+(function (FormFields) {
+  FormFields["serviceUrl"] = "serviceUrl";
+  FormFields["serviceName"] = "serviceName";
+  FormFields["serviceAbstracts"] = "serviceAbstracts";
+})(FormFields || (FormFields = {}));
+var InitialValidationsTrigger = function InitialValidationsTrigger(_ref) {
+  var trigger = _ref.trigger,
+    getValues = _ref.getValues,
+    onValidField = _ref.onValidField;
+  React.useEffect(function () {
+    var value = getValues(FormFields.serviceUrl);
+    if (value) {
+      void trigger(FormFields.serviceUrl).then(function (isValid) {
+        return isValid && onValidField(value);
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return null;
+};
+var ServicePopupUnwrapped = function ServicePopupUnwrapped(_ref2) {
+  var servicePopupVariant = _ref2.servicePopupVariant,
+    _ref2$hideBackdrop = _ref2.hideBackdrop,
+    hideBackdrop = _ref2$hideBackdrop === void 0 ? false : _ref2$hideBackdrop,
+    isOpen = _ref2.isOpen,
+    closePopup = _ref2.closePopup,
+    shouldDisableAutoFocus = _ref2.shouldDisableAutoFocus,
+    services = _ref2.services,
+    serviceSetLayers = _ref2.serviceSetLayers,
+    serviceUrl = _ref2.serviceUrl,
+    serviceName = _ref2.serviceName,
+    _ref2$showSnackbar = _ref2.showSnackbar,
+    showSnackbar = _ref2$showSnackbar === void 0 ? function () {} : _ref2$showSnackbar,
+    _ref2$disableAutoFocu = _ref2.disableAutoFocus,
+    disableAutoFocus = _ref2$disableAutoFocu === void 0 ? false : _ref2$disableAutoFocu;
+  var _useLayerSelectTransl = useLayerSelectTranslation(),
+    t = _useLayerSelectTransl.t;
+  var _useFormContext = useFormContext(),
+    errors = _useFormContext.formState.errors,
+    handleSubmit = _useFormContext.handleSubmit,
+    setError = _useFormContext.setError,
+    clearErrors = _useFormContext.clearErrors,
+    watch = _useFormContext.watch,
+    trigger = _useFormContext.trigger,
+    getValues = _useFormContext.getValues,
+    setValue = _useFormContext.setValue;
+  var _React$useState = React.useState(false),
+    isLoading = _React$useState[0],
+    setIsLoading = _React$useState[1];
+  var _React$useState2 = React.useState(false),
+    shouldForceReload = _React$useState2[0],
+    setShouldForceReload = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+    detectedServiceType = _React$useState3[0],
+    setDetectedServiceType = _React$useState3[1];
+  var fetchServiceData = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(newServiceUrl) {
+      var type, serviceUrlForLoading, service, _t;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.p = _context.n) {
+          case 0:
+            _context.p = 0;
+            setIsLoading(true);
+            _context.n = 1;
+            return detectServiceType(newServiceUrl);
+          case 1:
+            type = _context.v;
+            setDetectedServiceType(type);
+            serviceUrlForLoading = type === DetectableServiceType.STAC ? normalizeStacServiceUrl(newServiceUrl) : newServiceUrl;
+            if (serviceUrlForLoading !== newServiceUrl) {
+              setValue(FormFields.serviceUrl, serviceUrlForLoading);
+            }
+            if (!(type === DetectableServiceType.STAC)) {
+              _context.n = 3;
+              break;
+            }
+            _context.n = 2;
+            return loadSTACService(serviceUrlForLoading);
+          case 2:
+            _t = _context.v;
+            _context.n = 5;
+            break;
+          case 3:
+            _context.n = 4;
+            return loadWMSService(serviceUrlForLoading, true);
+          case 4:
+            _t = _context.v;
+          case 5:
+            service = _t;
+            setValue(FormFields.serviceName, service.name);
+            setValue(FormFields.serviceAbstracts, service["abstract"] || '');
+            setIsLoading(false);
+            setShouldForceReload(false);
+            _context.n = 7;
+            break;
+          case 6:
+            _context.p = 6;
+            _context.v;
+            setIsLoading(false);
+            setShouldForceReload(true);
+            setError(FormFields.serviceUrl, {
+              message: t('validations-request-failed'),
+              type: 'SYSTEM'
+            });
+          case 7:
+            return _context.a(2);
+        }
+      }, _callee, null, [[0, 6]]);
+    }));
+    return function fetchServiceData(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var addNewService = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(formValues) {
+      var type, serviceUrlForSaving, service, _t3, _t4;
+      return _regenerator().w(function (_context2) {
+        while (1) switch (_context2.p = _context2.n) {
+          case 0:
+            clearErrors(FormFields.serviceUrl);
+            setIsLoading(true);
+            _context2.p = 1;
+            if (!(detectedServiceType != null)) {
+              _context2.n = 2;
+              break;
+            }
+            _t3 = detectedServiceType;
+            _context2.n = 4;
+            break;
+          case 2:
+            _context2.n = 3;
+            return detectServiceType(formValues.serviceUrl);
+          case 3:
+            _t3 = _context2.v;
+          case 4:
+            type = _t3;
+            serviceUrlForSaving = type === DetectableServiceType.STAC ? normalizeStacServiceUrl(formValues.serviceUrl) : formValues.serviceUrl;
+            if (!(type === DetectableServiceType.STAC)) {
+              _context2.n = 6;
+              break;
+            }
+            _context2.n = 5;
+            return loadSTACService(serviceUrlForSaving);
+          case 5:
+            _t4 = _context2.v;
+            _context2.n = 8;
+            break;
+          case 6:
+            _context2.n = 7;
+            return loadWMSService(serviceUrlForSaving, shouldForceReload);
+          case 7:
+            _t4 = _context2.v;
+          case 8:
+            service = _t4;
+            if (serviceUrlForSaving !== formValues.serviceUrl) {
+              setValue(FormFields.serviceUrl, serviceUrlForSaving);
+            }
+            serviceSetLayers({
+              id: service.id,
+              name: formValues.serviceName,
+              serviceUrl: serviceUrlForSaving,
+              "abstract": formValues.serviceAbstracts,
+              layers: service.layers,
+              scope: 'user',
+              type: service.type
+            });
+            setIsLoading(false);
+            showSnackbar(getSuccesMessage(formValues.serviceName, t));
+            closePopup();
+            _context2.n = 10;
+            break;
+          case 9:
+            _context2.p = 9;
+            _context2.v;
+            setIsLoading(false);
+            setError(FormFields.serviceUrl, {
+              message: t('validations-request-failed'),
+              type: 'SYSTEM'
+            });
+          case 10:
+            return _context2.a(2);
+        }
+      }, _callee2, null, [[1, 9]]);
+    }));
+    return function addNewService(_x2) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+  var onValidateServiceUrl = function onValidateServiceUrl(value) {
+    return validateServiceUrl(t, value, services);
+  };
+  var onFocusServiceUrl = function onFocusServiceUrl() {
+    var hasValue = getValues(FormFields.serviceUrl);
+    if (!errors[FormFields.serviceUrl] && hasValue) {
+      void trigger(FormFields.serviceUrl);
+    }
+  };
+  var onBlurServiceUrl = function onBlurServiceUrl() {
+    void trigger(FormFields.serviceUrl).then(function () {
+      var hasValue = getValues(FormFields.serviceUrl);
+      if (!errors[FormFields.serviceUrl] && hasValue) {
+        void fetchServiceData(getValues(FormFields.serviceUrl));
+      }
+    });
+  };
+  var onKeyDownServiceUrl = function onKeyDownServiceUrl(event) {
+    if (event.key === 'Enter') {
+      onBlurServiceUrl();
+    }
+  };
+  var onValidateServiceName = function onValidateServiceName(value) {
+    return validateServiceName(t, value, services, serviceName);
+  };
+  var getFormAreRequiredFieldsEmpty = function getFormAreRequiredFieldsEmpty() {
+    var serviceNameField = watch(FormFields.serviceName);
+    var serviceUrlField = watch(FormFields.serviceUrl);
+    return serviceNameField === '' || serviceNameField === undefined || serviceUrlField === '' || serviceUrlField === undefined;
+  };
+  var getFormHasformErrors = function getFormHasformErrors() {
+    var totalErrors = Object.keys(errors).length;
+    if (totalErrors > 0) {
+      // prevent SYSTEM error types from blocking the save button
+      if (totalErrors === 1 && errors.serviceUrl) {
+        return errors.serviceUrl.type !== undefined && errors.serviceUrl.type !== 'SYSTEM';
+      }
+      return true;
+    }
+    return false;
+  };
+  var isSubmitDisabled = getFormHasformErrors() || getFormAreRequiredFieldsEmpty();
+  var isShowPopup = servicePopupVariant === 'show';
+  var isServiceUrlDisabled = isShowPopup || servicePopupVariant === 'edit';
+  return jsx(CustomDialog, {
+    actions: isShowPopup ? jsx(Button, {
+      onClick: function onClick() {
+        return closePopup();
+      },
+      sx: {
+        width: {
+          xs: '100%',
+          sm: '117px'
+        }
+      },
+      variant: "tertiary",
+      children: t('close')
+    }) : jsxs(Fragment, {
+      children: [jsx(Button, {
+        "data-testid": "closePopupButtonCancel",
+        onClick: closePopup,
+        sx: {
+          width: {
+            xs: '100%',
+            sm: '117px'
+          }
+        },
+        variant: "tertiary",
+        children: t('cancel')
+      }), jsx(Button, {
+        "data-testid": "saveServiceButton",
+        disabled: isSubmitDisabled || isLoading,
+        form: "servicePopupForm",
+        sx: {
+          marginLeft: {
+            xs: '0px!important',
+            sm: '8px!important'
+          },
+          width: {
+            xs: '100%',
+            sm: '117px'
+          }
+        },
+        type: "submit",
+        variant: "primary",
+        children: t('save')
+      })]
+    }),
+    "data-testid": "servicePopup",
+    disableAutoFocus: disableAutoFocus,
+    fullWidth: true,
+    hideBackdrop: hideBackdrop,
+    maxWidth: "xs",
+    onClose: function onClose() {
+      return closePopup == null ? void 0 : closePopup();
+    },
+    open: isOpen,
+    sx: {
+      '& .MuiDialog-paper': {
+        backgroundColor: "geowebColors.cards.cardContainer",
+        maxWidth: 458
+      }
+    },
+    title: getTitleForVariant(t, servicePopupVariant),
+    children: jsxs("form", {
+      id: "servicePopupForm",
+      onSubmit: handleSubmit(/*#__PURE__*/function () {
+        var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(formValues) {
+          return _regenerator().w(function (_context3) {
+            while (1) switch (_context3.n) {
+              case 0:
+                return _context3.a(2, addNewService(formValues));
+            }
+          }, _callee3);
+        }));
+        return function (_x3) {
+          return _ref5.apply(this, arguments);
+        };
+      }()),
+      children: [!!isLoading && jsx(Box, {
+        sx: {
+          position: 'relative'
+        },
+        children: jsx(LinearProgress, {
+          color: "secondary",
+          "data-testid": "loadingIndicator",
+          sx: {
+            position: 'absolute',
+            width: '100%',
+            top: 8
+          }
+        })
+      }), jsx(ReactHookFormTextField, {
+        autoFocus: !shouldDisableAutoFocus,
+        defaultValue: serviceUrl,
+        disabled: isServiceUrlDisabled || isLoading,
+        inputSlotProps: {
+          disableUnderline: isShowPopup,
+          endAdornment: isShowPopup && jsx(InputAdornment, {
+            position: "end",
+            children: jsx(CustomIconButton, {
+              "aria-label": "copy url",
+              onClick: function onClick() {
+                void navigator.clipboard.writeText(serviceUrl);
+                showSnackbar(t('copy-url-message'));
+              },
+              sx: {
+                marginTop: 0.5
+              },
+              children: jsx(Copy, {})
+            })
+          })
+        },
+        isReadOnly: isShowPopup,
+        label: t('service-url-label'),
+        name: FormFields.serviceUrl,
+        onBlur: onBlurServiceUrl,
+        onFocus: onFocusServiceUrl,
+        onKeyDown: onKeyDownServiceUrl,
+        rules: {
+          required: true,
+          validate: Object.assign({}, !isServiceUrlDisabled && {
+            onValidateServiceUrl: onValidateServiceUrl
+          })
+        },
+        sx: style.textField
+      }), jsx(ReactHookFormTextField, {
+        defaultValue: serviceName,
+        disabled: isShowPopup || isLoading,
+        inputSlotProps: {
+          disableUnderline: isShowPopup
+        },
+        isReadOnly: isShowPopup,
+        label: t('service-name-label'),
+        name: FormFields.serviceName,
+        rules: {
+          required: true,
+          validate: {
+            onValidateServiceName: onValidateServiceName
+          }
+        },
+        sx: style.textField
+      }), jsx(ReactHookFormTextField, {
+        defaultValue: "",
+        disabled: isShowPopup || isLoading,
+        helperText: !isShowPopup ? t('service-popup-helper-text') : '',
+        inputSlotProps: {
+          disableUnderline: isShowPopup
+        },
+        isReadOnly: isShowPopup,
+        label: t('service-abstracts-label'),
+        multiline: true,
+        name: FormFields.serviceAbstracts,
+        rows: 4,
+        sx: style.textField
+      }), !isServiceUrlDisabled && jsx(InitialValidationsTrigger, {
+        getValues: getValues,
+        onValidField: fetchServiceData,
+        trigger: trigger
+      })]
+    })
+  });
+};
+var ServicePopup = function ServicePopup(_ref6) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref6), _ref6));
+  return jsx(ReactHookFormProvider, {
+    options: Object.assign({}, defaultFormOptions, {
+      defaultValues: {
+        serviceUrl: props.serviceUrl,
+        serviceName: props.serviceName,
+        serviceAbstracts: props.serviceAbstracts
+      }
+    }),
+    children: jsx(ServicePopupUnwrapped, Object.assign({}, props))
+  });
+};
+
+// Extracted from ServicePopupDialog as the getActiveServices and getActiveServiceById selectors
+// Result in many rerenders. By extracting we're able to only render this component and these selectors
+// when the dialog is open
+var ServicePopupDialogConnect = function ServicePopupDialogConnect(_ref) {
+  var isOpen = _ref.isOpen,
+    _ref$serviceId = _ref.serviceId,
+    serviceId = _ref$serviceId === void 0 ? '' : _ref$serviceId,
+    variant = _ref.variant,
+    _ref$url = _ref.url,
+    url = _ref$url === void 0 ? '' : _ref$url,
+    setServicePopupClosed = _ref.setServicePopupClosed;
+  var dispatch = useDispatch();
+  var services = useAppSelector(function (store) {
+    return getActiveServices(store);
+  });
+  var activeService = useAppSelector(function (store) {
+    return getActiveServiceById(store, serviceId);
+  });
+  var serviceSetLayers = React.useCallback(function (payload) {
+    dispatch(serviceActions.serviceSetLayers(payload));
+  }, [dispatch]);
+  var showSnackbar = React.useCallback(function (message) {
+    dispatch(snackbarActions.openSnackbar({
+      type: snackbarTypes.SnackbarMessageType.VERBATIM_MESSAGE,
+      message: message
+    }));
+  }, [dispatch]);
+  return jsx(ServicePopup, {
+    closePopup: setServicePopupClosed,
+    isOpen: isOpen,
+    serviceAbstracts: activeService == null ? void 0 : activeService["abstract"],
+    serviceId: serviceId,
+    serviceName: activeService == null ? void 0 : activeService.serviceName,
+    servicePopupVariant: variant,
+    serviceSetLayers: serviceSetLayers,
+    serviceUrl: url || (activeService == null ? void 0 : activeService.serviceUrl),
+    services: services,
+    showSnackbar: showSnackbar
+  });
+};
+
+var ServicePopupConnect = function ServicePopupConnect() {
+  var dispatch = useDispatch();
+  var _useAppSelector = useAppSelector(function (store) {
+      return getServicePopupDetails(store);
+    }),
+    isOpen = _useAppSelector.isOpen,
+    url = _useAppSelector.url,
+    serviceId = _useAppSelector.serviceId,
+    variant = _useAppSelector.variant;
+  var setServicePopupClosed = React.useCallback(function () {
+    dispatch(layerSelectActions.closeServicePopupOpen());
+  }, [dispatch]);
+  if (!isOpen) {
+    return null;
+  }
+  return jsx(ServicePopupDialogConnect, {
+    isOpen: isOpen,
+    serviceId: serviceId,
+    setServicePopupClosed: setServicePopupClosed,
+    url: url,
+    variant: variant
+  });
+};
+
+/**
+ * LayerSelectConnect is a component that is opened from LayerManager
+ * It's used to add Services and Layers to the application
+ * It doesn't expect any props, its subcomponents only read and write to redux store
+ *
+ * ``` <LayerSelectConnect />```
+ */
+var LayerSelectConnect = function LayerSelectConnect(_ref) {
+  var _ref$mapId = _ref.mapId,
+    initialMapId = _ref$mapId === void 0 ? null : _ref$mapId,
+    bounds = _ref.bounds,
+    _ref$showTitle = _ref.showTitle,
+    showTitle = _ref$showTitle === void 0 ? false : _ref$showTitle,
+    _ref$isMultiMap = _ref.isMultiMap,
+    isMultiMap = _ref$isMultiMap === void 0 ? false : _ref$isMultiMap;
+  var dialogType = isMultiMap ? uiTypes.DialogTypes.LayerSelect + "-" + initialMapId : uiTypes.DialogTypes.LayerSelect;
+  var mapId = useAppSelector(function (store) {
+    return uiSelectors.getDialogMapId(store, dialogType);
+  });
+  var _useSetupDialog = useSetupDialog(dialogType),
+    dialogOrder = _useSetupDialog.dialogOrder,
+    isDialogOpen = _useSetupDialog.isDialogOpen,
+    onCloseDialog = _useSetupDialog.onCloseDialog,
+    setDialogOrder = _useSetupDialog.setDialogOrder,
+    uiSource = _useSetupDialog.uiSource;
+  var config = sessionStorageProvider.getConfig();
+  var hasDataExplorer = !!config.GW_DATA_EXPLORER_CONFIGURATION_FILENAME;
+  return jsxs(Fragment, {
+    children: [jsx(LayerSelect, {
+      bounds: bounds,
+      hasDataExplorer: hasDataExplorer,
+      isMultiMap: isMultiMap,
+      isOpen: isDialogOpen,
+      mapId: mapId || initialMapId,
+      onClose: onCloseDialog,
+      onMouseDown: setDialogOrder,
+      order: dialogOrder,
+      showTitle: showTitle,
+      source: uiSource
+    }), jsx(KeywordFilterResultsConnect, {
+      isMultiMap: isMultiMap,
+      mapId: mapId || initialMapId
+    }), jsx(ServicePopupConnect, {})]
+  });
+};
+
+export { AllChipConnect, DataExplorerButtonConnect, KeywordFilterButtonConnect, KeywordFilterResults, KeywordFilterResultsConnect, KeywordFilterResultsListItemConnect, KeywordFilterSelectAllSwitchConnect, LAYER_SELECT_NAMESPACE, LayerAddRemoveButton, LayerList, LayerListConnect, LayerListDimensions, LayerListRow, LayerSelectButtonConnect, LayerSelectConnect, SearchFieldConnect, ServiceChip, ServiceChipConnect, ServiceList, ServiceListConnect, ServiceOptionsButton, ServiceOptionsDialog, ServiceOptionsDialogConnect, ServicePopup, ServicePopupConnect, ServicePopupDialogConnect, createMockStore, getServiceSuccesUpdateMessage, getSuccesMessage, isUserAddedService, layerSelectActions, initialState as layerSelectInitialState, layerSelectListener, layerSelectMiddlewares, layerSelectReducer, layerSelectReducersMap, selectors as layerSelectSelectors, layerSelectTranslations, useAppSelector };