@blateral/b.kit 2.7.5 → 2.8.1

package/esm/sections.pois.js

@@ -1,32 +1,37 @@
-import { a as __makeTemplateObject, _ as __assign, L as LocationPin, a8 as CurrentLocation, V as MyLocation, f as Cross, h as __awaiter, i as __generator } from './ClockFilled-62515a8f.js';
-import React__default, { useMemo, useState, useCallback, useEffect } from 'react';
+import { a as __makeTemplateObject, _ as __assign, h as Magnifier, ab as CrossBubble, f as Cross, ac as Filter, e as __spreadArray, L as LocationPin, a9 as CurrentLocation, $ as MyLocation, k as __awaiter, l as __generator } from './Filter-19220970.js';
+import React__default, { useMemo, useState, useEffect } from 'react';
 import styled, { css } from 'styled-components';
-import { S as Section, m as mapToBgMode } from './Section-b76e6909.js';
-import { W as Wrapper } from './Wrapper-90dccc89.js';
-import { I as Image } from './Image-dc2b33c1.js';
-import { H as Heading, C as Copy } from './Copy-a28aeb61.js';
-import { s as spacings, m as mq, w as withRange, g as getColors, f as getSVGDataImg } from './styles-da982973.js';
-import { w as withLibTheme, u as useLibTheme } from './LibThemeProvider-52555ac9.js';
-import { G as Grid } from './Grid-5eec127f.js';
-import { I as InfoList } from './InfoList-5c4586ed.js';
-import { P as POIFacts, a as POICard } from './POICard-96ec71d8.js';
+import { S as Section, m as mapToBgMode } from './Section-bd61eb2f.js';
+import { W as Wrapper } from './Wrapper-95108115.js';
+import { I as Image } from './Image-b26692a9.js';
+import { H as Heading, C as Copy } from './Copy-c6786949.js';
+import { s as spacings, m as mq, g as getColors, w as withRange, c as getGlobals, f as getSVGDataImg } from './styles-1f1841ef.js';
+import { w as withLibTheme, u as useLibTheme } from './LibThemeProvider-fb1d35ac.js';
+import { G as Grid } from './Grid-7b33e271.js';
+import { I as InfoList } from './InfoList-b6980a42.js';
+import { P as POIFacts, F as FilterBar, a as POICard } from './FilterBar-2a2a09b7.js';
 import { i as isValidArray } from './arrays-65b644ef.js';
-import { F as FilterField } from './FilterField-962ec61f.js';
-import { u as useUpdateEffect } from './useUpdateEffect-824c0c84.js';
+import { s as setUrlParam, d as deleteUrlParam } from './urlParams-9cfdaf71.js';
+import './useScroll-881c7b04.js';
+import 'react-dom/server';
 import { e as escapeRegExp } from './escape-cbff9c25.js';
-import { u as useMounted } from './useMounted-1e4cc87b.js';
-import { g as getUrlParams, s as setUrlParam, d as deleteUrlParam } from './urlParams-9cfdaf71.js';
-import { u as useLeafletMap } from './useLeafletMap-84170d32.js';
-import { g as generateNavbarIdent, a as getFullNavbarHeights } from './Navigation-99f6dc41.js';
+import { u as useLeafletMap } from './useLeafletMap-fa0ab7d4.js';
+import { g as generateNavbarIdent, a as getFullNavbarHeights } from './Navigation-bb79a1eb.js';
 import { u as useGeolocation } from './useGeolocation-f9f073cc.js';
 import './concat-ab3c66f2.js';
 import './clamp-12d37b65.js';
-import 'react-dom/server';
-import './useLazyInput-54d1785c.js';
-import './useMediaQuery-b42fd64e.js';
-import './navigation-b89325f8.js';
-import './Link-3fd9c9b8.js';
-import './LanguageSwitcher-3fa20077.js';
+import './FilterField-bec061bc.js';
+import './useLazyInput-0b6932aa.js';
+import './MultiselectDropdown-a97be6bc.js';
+import './formFieldText-f4188e55.js';
+import './useMounted-1e4cc87b.js';
+import './Checkbox-1957067a.js';
+import 'react-dom';
+import './Pointer-b4abee91.js';
+import './useMediaQuery-4c1b1fa6.js';
+import './navigation-5216dbad.js';
+import './Link-6067a27f.js';
+import './LanguageSwitcher-f9218fdc.js';
 
 var StyledImage = styled(Image).withConfig({
   displayName: "PointOfInterestDetail__StyledImage",
@@ -39,7 +44,7 @@ var Facts = styled(POIFacts).withConfig({
 var PoiTitle = styled(Heading).withConfig({
   displayName: "PointOfInterestDetail__PoiTitle",
   componentId: "sc-hksryh-2"
-})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    max-width: 880px;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 2; /* number of lines to show */\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n"], ["\n    max-width: 880px;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 2; /* number of lines to show */\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge * 3);
+})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n    max-width: 880px;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 2; /* number of lines to show */\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n"], ["\n    max-width: 880px;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 2; /* number of lines to show */\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge * 3);
 var PoiText = styled(Copy).withConfig({
   displayName: "PointOfInterestDetail__PoiText",
   componentId: "sc-hksryh-3"
@@ -109,16 +114,7 @@ var PointOfInterestDetail = function (_a) {
   })))));
 };
 var PointOfInterestDetail$1 = withLibTheme(PointOfInterestDetail);
-var templateObject_1$2, templateObject_2$2, templateObject_3$1, templateObject_4$1;
-
-var Content = styled.div.withConfig({
-  displayName: "PointOfInterestOverview__Content",
-  componentId: "sc-epctuk-0"
-})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        & > * + * {\n            margin-top: ", "px;\n        }\n    }\n"], ["\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        & > * + * {\n            margin-top: ", "px;\n        }\n    }\n"])), spacings.nudge * 5, mq.large, spacings.nudge * 3);
-var Filter = styled(FilterField).withConfig({
-  displayName: "PointOfInterestOverview__Filter",
-  componentId: "sc-epctuk-1"
-})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n    // margin to show prevent section overflow outline\n    margin-top: 2px;\n\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n"], ["\n    // margin to show prevent section overflow outline\n    margin-top: 2px;\n\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n"])), spacings.nudge * 5);
+var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$1;
 
 var poiExactNameFilter = function (filterQuery) {
   return function (value) {
@@ -253,114 +249,211 @@ var filterPois = function (filterQuery, pois) {
   return prioList;
 };
 
+var getFilterMatches = function (filterQuery, categoryFilters, items) {
+  var _a;
+
+  var searchMatches = new Map();
+
+  if (!filterQuery && !categoryFilters.length) {
+    for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+      var item = items_1[_i];
+      searchMatches.set(item.id, {
+        item: item,
+        priority: 0
+      });
+    }
+  }
+
+  for (var _b = 0, items_2 = items; _b < items_2.length; _b++) {
+    var item = items_2[_b];
+
+    if ((_a = item.facts) === null || _a === void 0 ? void 0 : _a.some(function (fact) {
+      return categoryFilters.includes(fact);
+    })) {
+      searchMatches.set(item.id, {
+        item: item,
+        priority: 1
+      });
+    }
+  } // tracking matches of each query part
+
+
+  var matches = filterQuery ? filterPois(escapeRegExp(filterQuery), items || []) : [];
+
+  for (var _c = 0, matches_1 = matches; _c < matches_1.length; _c++) {
+    var match = matches_1[_c];
+    if (searchMatches.has(match.item.id)) continue;
+    searchMatches.set(match.item.id, match);
+  }
+
+  return searchMatches;
+};
+
+var PoiFilterBar = function (_a) {
+  var hasBorders = _a.hasBorders,
+      value = _a.value,
+      onChange = _a.onChange,
+      textFilter = _a.textFilter,
+      categoryFilter = _a.categoryFilter,
+      mobileSubmitLabel = _a.mobileSubmitLabel,
+      closeIcon = _a.closeIcon,
+      toggleLabel = _a.toggleLabel,
+      filterIcon = _a.filterIcon,
+      indicator = _a.indicator,
+      isInverted = _a.isInverted,
+      className = _a.className;
+  return React__default.createElement(FilterBar, {
+    isInverted: isInverted,
+    hasBorders: hasBorders,
+    value: value,
+    onChange: onChange,
+    textFilter: textFilter ? {
+      placeholder: textFilter.placeholder || 'Search...',
+      icon: textFilter.icon ? textFilter.icon : function () {
+        return React__default.createElement(Magnifier, {
+          width: 18,
+          height: 18
+        });
+      },
+      submitIcon: textFilter.submitIcon ? textFilter.submitIcon : function () {
+        return null;
+      },
+      clearIcon: textFilter.clearIcon ? textFilter.clearIcon : function () {
+        return React__default.createElement(CrossBubble, null);
+      }
+    } : undefined,
+    categoryFilter: categoryFilter ? {
+      label: categoryFilter.label || 'Categories',
+      items: categoryFilter.items || [],
+      resetLabel: categoryFilter.resetLabel || 'reset selection'
+    } : undefined,
+    mobileSubmitLabel: mobileSubmitLabel || 'Apply filters',
+    closeIcon: closeIcon ? closeIcon : function () {
+      return React__default.createElement(Cross, null);
+    },
+    toggleLabel: toggleLabel || 'Search & Filter',
+    filterIcon: filterIcon ? filterIcon : function () {
+      return React__default.createElement(Filter, null);
+    },
+    indicator: indicator,
+    className: className
+  });
+};
+
+var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    PoiFilterBar: PoiFilterBar
+});
+
+var POISection = styled(Section).withConfig({
+  displayName: "PointOfInterestOverview__POISection",
+  componentId: "sc-epctuk-0"
+})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n    overflow: visible;\n"], ["\n    overflow: visible;\n"])));
+var Content = styled.div.withConfig({
+  displayName: "PointOfInterestOverview__Content",
+  componentId: "sc-epctuk-1"
+})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        & > * + * {\n            margin-top: ", "px;\n        }\n    }\n"], ["\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        & > * + * {\n            margin-top: ", "px;\n        }\n    }\n"])), spacings.nudge * 5, mq.large, spacings.nudge * 3);
+var PoiOverviewFilterBar = styled(PoiFilterBar).withConfig({
+  displayName: "PointOfInterestOverview__PoiOverviewFilterBar",
+  componentId: "sc-epctuk-2"
+})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    // margin to show prevent section overflow outline\n    margin-top: 2px;\n    border: solid 1px\n        ", ";\n\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n\n    @media ", " {\n        border: none;\n    }\n"], ["\n    // margin to show prevent section overflow outline\n    margin-top: 2px;\n    border: solid 1px\n        ", ";\n\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n\n    @media ", " {\n        border: none;\n    }\n"])), function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).elementBg.light : getColors(theme).elementBg.dark;
+}, spacings.nudge * 5, mq.medium);
+
 var PointOfInterestOverview = function (_a) {
   var _b;
 
   var anchorId = _a.anchorId,
       bgMode = _a.bgMode,
       pois = _a.pois,
-      enableFiltering = _a.enableFiltering,
-      initialFilterQuery = _a.initialFilterQuery,
-      _c = _a.filterPlaceholder,
-      filterPlaceholder = _c === void 0 ? 'Filter' : _c,
-      filterSubmitIcon = _a.filterSubmitIcon,
-      filterClearIcon = _a.filterClearIcon;
+      initialPoiFilters = _a.initialPoiFilters,
+      poiFilters = _a.poiFilters,
+      customPoiFilters = _a.customPoiFilters;
 
-  var _d = useLibTheme(),
-      colors = _d.colors,
-      globals = _d.globals;
+  var _c = useLibTheme(),
+      colors = _c.colors,
+      globals = _c.globals;
 
   var filterName = globals.sections.poiFilterName;
+  var factFiltername = globals.sections.poiFactFilterName;
   var isInverted = bgMode === 'inverted';
   var hasBg = bgMode === 'full';
 
-  var _e = useState(initialFilterQuery || ''),
-      filterQuery = _e[0],
-      setFilterQuery = _e[1];
-
-  var isMounted = useMounted();
-  var poiMatches = React__default.useMemo(function () {
-    var queryParts = filterQuery.split(' ').map(function (part) {
-      return part.trim();
-    });
-    var searchMatches = []; // tracking matches of each query part
+  var _d = useState(initialPoiFilters || {
+    categoryFilter: [],
+    textFilter: ''
+  }),
+      filters = _d[0],
+      setFilters = _d[1];
 
-    for (var _i = 0, queryParts_1 = queryParts; _i < queryParts_1.length; _i++) {
-      var part = queryParts_1[_i];
-      var matches = filterPois(escapeRegExp(part), pois || []);
+  var categories = useMemo(function () {
+    return pois === null || pois === void 0 ? void 0 : pois.reduce(function (acc, poi) {
+      var newCategories = __spreadArray([], acc, true);
 
-      var _loop_1 = function (match) {
-        var intersectionIndex = searchMatches.findIndex(function (sItem) {
-          return sItem.match.item.id === match.item.id;
-        });
+      for (var _i = 0, _a = poi.facts || []; _i < _a.length; _i++) {
+        var fact = _a[_i];
 
-        if (intersectionIndex !== -1) {
-          searchMatches[intersectionIndex].intersections += 1;
-        } else {
-          searchMatches.push({
-            match: match,
-            intersections: 1
-          });
+        if (!newCategories.includes(fact)) {
+          newCategories.push(fact);
         }
-      };
-
-      for (var _a = 0, matches_1 = matches; _a < matches_1.length; _a++) {
-        var match = matches_1[_a];
-
-        _loop_1(match);
       }
-    } // filter search matches by intersections so only matches with results for all search parts are shown
 
-
-    return searchMatches.filter(function (m) {
-      return m.intersections >= queryParts.length;
-    }).map(function (m) {
-      return __assign({}, m.match);
+      return newCategories;
+    }, []);
+  }, [pois]);
+  var poiMatches = useMemo(function () {
+    var matches = getFilterMatches((filters === null || filters === void 0 ? void 0 : filters.textFilter) || '', (filters === null || filters === void 0 ? void 0 : filters.categoryFilter) || [], pois || []) || pois;
+    return Array.from(matches).map(function (m) {
+      return m[1];
     });
-  }, [filterQuery, pois]);
-  var getFilter = useCallback(function () {
-    return getUrlParams()[filterName];
-  }, [filterName]);
+  }, [filters === null || filters === void 0 ? void 0 : filters.textFilter, filters === null || filters === void 0 ? void 0 : filters.categoryFilter, pois]);
   useEffect(function () {
-    var urlFilter = getFilter();
-
-    if (urlFilter !== undefined && urlFilter !== null && typeof urlFilter === 'string') {
-      setFilterQuery(urlFilter);
-    }
-  }, [getFilter]);
-  useEffect(function () {
-    if (isMounted) return; // set inital data into URL
-
-    if (filterQuery) {
-      setUrlParam(filterName, filterQuery);
+    if (filters.textFilter) {
+      setUrlParam(filterName, filters.textFilter);
     } else {
       deleteUrlParam(filterName);
     }
-  }, [filterName, filterQuery, isMounted]);
-  useUpdateEffect(function () {
-    // set filters to URL params
-    if (filterQuery) {
-      setUrlParam(filterName, filterQuery);
+
+    if (isValidArray(filters.categoryFilter, false)) {
+      setUrlParam(factFiltername, filters.categoryFilter.join(','));
     } else {
-      deleteUrlParam(filterName);
+      deleteUrlParam(factFiltername);
     }
-  }, [filterQuery]);
-  return React__default.createElement(Section, {
+  }, [filterName, factFiltername, filters.textFilter, filters.categoryFilter]);
+  return React__default.createElement(POISection, {
     addSeperation: true,
     anchorId: anchorId,
     bgColor: isInverted ? colors.sectionBg.dark : hasBg ? colors.sectionBg.medium : colors.sectionBg.light,
     bgMode: mapToBgMode(bgMode, true)
   }, React__default.createElement(Wrapper, {
     addWhitespace: true
-  }, enableFiltering && React__default.createElement(Filter, {
-    value: filterQuery,
-    initialValue: initialFilterQuery,
-    placeholder: filterPlaceholder,
-    onSubmit: setFilterQuery,
-    submitIcon: filterSubmitIcon,
-    clearIcon: filterClearIcon,
+  }, poiFilters ? customPoiFilters ? customPoiFilters === null || customPoiFilters === void 0 ? void 0 : customPoiFilters({
+    filters: filters,
+    setFilters: setFilters,
+    pois: pois || [],
+    settings: poiFilters
+  }) : React__default.createElement(PoiOverviewFilterBar, {
+    hasBorders: true,
+    value: filters,
+    onChange: setFilters,
+    textFilter: (poiFilters === null || poiFilters === void 0 ? void 0 : poiFilters.textFilter) || undefined,
+    categoryFilter: (poiFilters === null || poiFilters === void 0 ? void 0 : poiFilters.categoryFilter) ? __assign(__assign({}, poiFilters.categoryFilter), {
+      items: categories === null || categories === void 0 ? void 0 : categories.map(function (cat) {
+        return {
+          value: cat,
+          label: cat
+        } || [];
+      })
+    }) : undefined,
+    mobileSubmitLabel: poiFilters === null || poiFilters === void 0 ? void 0 : poiFilters.mobileSubmitLabel,
+    closeIcon: poiFilters === null || poiFilters === void 0 ? void 0 : poiFilters.closeIcon,
+    toggleLabel: poiFilters === null || poiFilters === void 0 ? void 0 : poiFilters.toggleLabel,
+    filterIcon: poiFilters === null || poiFilters === void 0 ? void 0 : poiFilters.filterIcon,
+    indicator: poiFilters === null || poiFilters === void 0 ? void 0 : poiFilters.indicator,
     isInverted: isInverted
-  }), React__default.createElement(Content, null, (_b = poiMatches === null || poiMatches === void 0 ? void 0 : poiMatches.sort(function (a, b) {
+  }) : null, React__default.createElement(Content, null, (_b = poiMatches === null || poiMatches === void 0 ? void 0 : poiMatches.sort(function (a, b) {
     return a.priority - b.priority;
   })) === null || _b === void 0 ? void 0 : _b.map(function (poi, i) {
     return React__default.createElement(POICard, __assign({
@@ -371,7 +464,7 @@ var PointOfInterestOverview = function (_a) {
   }))));
 };
 var PointOfInterestOverview$1 = withLibTheme(PointOfInterestOverview);
-var templateObject_1$1, templateObject_2$1;
+var templateObject_1$1, templateObject_2$1, templateObject_3$1;
 
 var genHeightStyles = function () {
   return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    // Doing some crazy shit to calculate curent navbar height in CSS\n    ", "\n"], ["\n    // Doing some crazy shit to calculate curent navbar height in CSS\n    ", "\n"])), function (_a) {
@@ -412,7 +505,7 @@ var genHeightStyles = function () {
     };
 
     var refHeight = '100vh';
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            ", " {\n                height: ", ";\n            }\n\n            // with main navbar element\n            header", " ~ & {\n                ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            // with main and top navbar elements\n            header", " ~ & {\n                ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            // with main and bottom navbar elements\n            header", " ~ & {\n                ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            // with all navbar elements\n            header", " ~ & {\n                ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            @media ", " {\n                // with main navbar element\n                header", " ~ & {\n                    ", " {\n                        height: calc(", " - ", "px);\n                    }\n                }\n\n                // with main and top navbar elements\n                header", " ~ & {\n                    ", " {\n                        height: calc(", " - ", "px);\n                    }\n                }\n\n                // with main and bottom navbar elements\n                header", " ~ & {\n                    ", " {\n                        height: calc(\n                            ", " - ", "px\n                        );\n                    }\n                }\n\n                // with all navbar elements\n                header", " ~ & {\n                    ", " {\n                        height: calc(", " - ", "px);\n                    }\n                }\n            }\n        "], ["\n            ", " {\n                height: ", ";\n            }\n\n            // with main navbar element\n            header", " ~ & {\n                ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            // with main and top navbar elements\n            header", " ~ & {\n                ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            // with main and bottom navbar elements\n            header", " ~ & {\n                ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            // with all navbar elements\n            header", " ~ & {\n                ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            @media ", " {\n                // with main navbar element\n                header", " ~ & {\n                    ", " {\n                        height: calc(", " - ", "px);\n                    }\n                }\n\n                // with main and top navbar elements\n                header", " ~ & {\n                    ", " {\n                        height: calc(", " - ", "px);\n                    }\n                }\n\n                // with main and bottom navbar elements\n                header", " ~ & {\n                    ", " {\n                        height: calc(\n                            ", " - ", "px\n                        );\n                    }\n                }\n\n                // with all navbar elements\n                header", " ~ & {\n                    ", " {\n                        height: calc(", " - ", "px);\n                    }\n                }\n            }\n        "])), Map, refHeight, mapToSelector(mainIdent.split('-')), Map, refHeight, navMainHeight[0], mapToSelector(mainTopIdent.split('-')), Map, refHeight, navMainTopHeight[0], mapToSelector(mainBottomIdent.split('-')), Map, refHeight, navMainBottomHeight[0], mapToSelector(fullIdent.split('-')), Map, refHeight, navFullHeight[0], mq.semilarge, mapToSelector(mainIdent.split('-')), Map, refHeight, navMainHeight[1], mapToSelector(mainTopIdent.split('-')), Map, refHeight, navMainTopHeight[1], mapToSelector(mainBottomIdent.split('-')), Map, refHeight, navMainBottomHeight[1], mapToSelector(fullIdent.split('-')), Map, refHeight, navFullHeight[1]);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            ", " {\n                height: ", ";\n            }\n\n            // with main navbar element\n            header", " ~ & {\n                ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            // with main and top navbar elements\n            header", " ~ & {\n                ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            // with main and bottom navbar elements\n            header", " ~ & {\n                ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            // with all navbar elements\n            header", " ~ & {\n                ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            @media ", " {\n                // with main navbar element\n                header", " ~ & {\n                    ", " {\n                        height: calc(", " - ", "px);\n                    }\n                }\n\n                // with main and top navbar elements\n                header", " ~ & {\n                    ", " {\n                        height: calc(", " - ", "px);\n                    }\n                }\n\n                // with main and bottom navbar elements\n                header", " ~ & {\n                    ", " {\n                        height: calc(\n                            ", " - ", "px\n                        );\n                    }\n                }\n\n                // with all navbar elements\n                header", " ~ & {\n                    ", " {\n                        height: calc(", " - ", "px);\n                    }\n                }\n            }\n        "], ["\n            ", " {\n                height: ", ";\n            }\n\n            // with main navbar element\n            header", " ~ & {\n                ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            // with main and top navbar elements\n            header", " ~ & {\n                ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            // with main and bottom navbar elements\n            header", " ~ & {\n                ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            // with all navbar elements\n            header", " ~ & {\n                ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            @media ", " {\n                // with main navbar element\n                header", " ~ & {\n                    ", " {\n                        height: calc(", " - ", "px);\n                    }\n                }\n\n                // with main and top navbar elements\n                header", " ~ & {\n                    ", " {\n                        height: calc(", " - ", "px);\n                    }\n                }\n\n                // with main and bottom navbar elements\n                header", " ~ & {\n                    ", " {\n                        height: calc(\n                            ", " - ", "px\n                        );\n                    }\n                }\n\n                // with all navbar elements\n                header", " ~ & {\n                    ", " {\n                        height: calc(", " - ", "px);\n                    }\n                }\n            }\n        "])), Map$1, refHeight, mapToSelector(mainIdent.split('-')), Map$1, refHeight, navMainHeight[0], mapToSelector(mainTopIdent.split('-')), Map$1, refHeight, navMainTopHeight[0], mapToSelector(mainBottomIdent.split('-')), Map$1, refHeight, navMainBottomHeight[0], mapToSelector(fullIdent.split('-')), Map$1, refHeight, navFullHeight[0], mq.semilarge, mapToSelector(mainIdent.split('-')), Map$1, refHeight, navMainHeight[1], mapToSelector(mainTopIdent.split('-')), Map$1, refHeight, navMainTopHeight[1], mapToSelector(mainBottomIdent.split('-')), Map$1, refHeight, navMainBottomHeight[1], mapToSelector(fullIdent.split('-')), Map$1, refHeight, navFullHeight[1]);
   });
 };
 
@@ -427,14 +520,14 @@ var MapContainer = styled.div.withConfig({
   displayName: "PointOfInterestMap__MapContainer",
   componentId: "sc-1ke8oz0-1"
 })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    position: relative;\n"], ["\n    position: relative;\n"])));
-var Map = styled.div.withConfig({
+var Map$1 = styled.div.withConfig({
   displayName: "PointOfInterestMap__Map",
   componentId: "sc-1ke8oz0-2"
 })(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    min-height: 360px;\n    height: 360px;\n    max-height: 1300px;\n    z-index: 0;\n\n    @media ", " {\n        height: 600px;\n        min-height: 600px;\n    }\n"], ["\n    min-height: 360px;\n    height: 360px;\n    max-height: 1300px;\n    z-index: 0;\n\n    @media ", " {\n        height: 600px;\n        min-height: 600px;\n    }\n"])), mq.medium);
 var RequestGeolocationBtn = styled.button.withConfig({
   displayName: "PointOfInterestMap__RequestGeolocationBtn",
   componentId: "sc-1ke8oz0-3"
-})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    position: absolute;\n    top: ", "px;\n    left: ", "px;\n\n    background-color: transparent;\n    border: none;\n    padding: ", "px;\n    cursor: pointer;\n\n    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            opacity: 0.6;\n        }\n    }\n\n    &:focus {\n        outline: 2px solid ", ";\n        transform: scale(1.012);\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &:active {\n        transform: scale(0.95);\n    }\n\n    & > * {\n        width: 30px;\n        height: 30px;\n    }\n"], ["\n    position: absolute;\n    top: ", "px;\n    left: ", "px;\n\n    background-color: transparent;\n    border: none;\n    padding: ", "px;\n    cursor: pointer;\n\n    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            opacity: 0.6;\n        }\n    }\n\n    &:focus {\n        outline: 2px solid ", ";\n        transform: scale(1.012);\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &:active {\n        transform: scale(0.95);\n    }\n\n    & > * {\n        width: 30px;\n        height: 30px;\n    }\n"])), spacings.nudge * 2, spacings.nudge * 2, spacings.nudge, function (_a) {
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    background-color: transparent;\n    border: none;\n    padding: ", "px;\n    cursor: pointer;\n\n    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            opacity: 0.6;\n        }\n    }\n\n    &:focus {\n        outline: 2px solid ", ";\n        transform: scale(1.012);\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &:active {\n        transform: scale(0.95);\n    }\n\n    & > * {\n        width: 30px;\n        height: 30px;\n    }\n"], ["\n    background-color: transparent;\n    border: none;\n    padding: ", "px;\n    cursor: pointer;\n\n    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            opacity: 0.6;\n        }\n    }\n\n    &:focus {\n        outline: 2px solid ", ";\n        transform: scale(1.012);\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &:active {\n        transform: scale(0.95);\n    }\n\n    & > * {\n        width: 30px;\n        height: 30px;\n    }\n"])), spacings.nudge, function (_a) {
   var theme = _a.theme;
   return getColors(theme).primary.default;
 });
@@ -445,9 +538,12 @@ var CardStage = styled.div.withConfig({
 var MapCardView = styled.div.withConfig({
   displayName: "PointOfInterestMap__MapCardView",
   componentId: "sc-1ke8oz0-5"
-})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    max-height: 100%;\n    width: 100%;\n    padding: ", "px;\n    overflow: auto;\n\n    background: ", ";\n    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);\n    pointer-events: all;\n    border-radius: 8px;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        max-width: 400px;\n    }\n"], ["\n    max-height: 100%;\n    width: 100%;\n    padding: ", "px;\n    overflow: auto;\n\n    background: ", ";\n    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);\n    pointer-events: all;\n    border-radius: 8px;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        max-width: 400px;\n    }\n"])), spacings.nudge * 2, function (_a) {
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    max-height: 100%;\n    width: 100%;\n    padding: ", "px;\n    overflow: auto;\n\n    background: ", ";\n    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);\n    pointer-events: all;\n    border-radius: ", ";\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        max-width: 400px;\n    }\n"], ["\n    max-height: 100%;\n    width: 100%;\n    padding: ", "px;\n    overflow: auto;\n\n    background: ", ";\n    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);\n    pointer-events: all;\n    border-radius: ", ";\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        max-width: 400px;\n    }\n"])), spacings.nudge * 2, function (_a) {
   var theme = _a.theme;
   return getColors(theme).elementBg.light;
+}, function (_a) {
+  var theme = _a.theme;
+  return getGlobals(theme).sections.edgeRadius;
 }, spacings.nudge * 3, mq.medium);
 var MapCardHeader = styled.header.withConfig({
   displayName: "PointOfInterestMap__MapCardHeader",
@@ -460,6 +556,10 @@ var CloseBtn = styled.button.withConfig({
   var theme = _a.theme;
   return getColors(theme).primary.default;
 });
+var Overlay = styled.div.withConfig({
+  displayName: "PointOfInterestMap__Overlay",
+  componentId: "sc-1ke8oz0-8"
+})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    position: absolute;\n    top: ", "px;\n    left: ", "px;\n    width: 100%;\n\n    display: flex;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    position: absolute;\n    top: ", "px;\n    left: ", "px;\n    width: 100%;\n\n    display: flex;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge * 2, spacings.nudge * 2, spacings.nudge * 2);
 
 var MapCard = function (_a) {
   var name = _a.name,
@@ -517,28 +617,62 @@ var PointOfInterestMap = function (_a) {
       customFact = _a.customFact,
       currentPosMarker = _a.currentPosMarker,
       customCardClose = _a.customCardClose,
-      customLocationRequest = _a.customLocationRequest;
+      customLocationRequest = _a.customLocationRequest,
+      initialPoiFilters = _a.initialPoiFilters,
+      poiFilters = _a.poiFilters,
+      customPoiFilters = _a.customPoiFilters;
   var isLarge = size === 'large';
-  var colors = useLibTheme().colors;
 
-  var _g = useState(initialPointOfInterest || ''),
-      activePoiId = _g[0],
-      setActivePoiId = _g[1];
+  var _g = useLibTheme(),
+      colors = _g.colors,
+      globals = _g.globals;
+
+  var _h = useState(initialPointOfInterest || ''),
+      activePoiId = _h[0],
+      setActivePoiId = _h[1];
+
+  var _j = useState(false),
+      isDirty = _j[0],
+      setIsDirty = _j[1];
+
+  var _k = useState(initialPoiFilters || {
+    categoryFilter: [],
+    textFilter: ''
+  }),
+      filters = _k[0],
+      setFilters = _k[1];
+
+  var categories = useMemo(function () {
+    return pois === null || pois === void 0 ? void 0 : pois.reduce(function (acc, poi) {
+      var newCategories = __spreadArray([], acc, true);
 
-  var _h = useState(false),
-      isDirty = _h[0],
-      setIsDirty = _h[1];
+      for (var _i = 0, _a = poi.facts || []; _i < _a.length; _i++) {
+        var fact = _a[_i];
 
+        if (!newCategories.includes(fact)) {
+          newCategories.push(fact);
+        }
+      }
+
+      return newCategories;
+    }, []);
+  }, [pois]);
+  var activePois = useMemo(function () {
+    var matches = getFilterMatches((filters === null || filters === void 0 ? void 0 : filters.textFilter) || '', (filters === null || filters === void 0 ? void 0 : filters.categoryFilter) || [], pois || []) || pois;
+    return Array.from(matches).map(function (m) {
+      return m[1].item;
+    });
+  }, [filters === null || filters === void 0 ? void 0 : filters.textFilter, filters === null || filters === void 0 ? void 0 : filters.categoryFilter, pois]);
   var activePOI = useMemo(function () {
-    return pois === null || pois === void 0 ? void 0 : pois.find(function (poi) {
+    return activePois === null || activePois === void 0 ? void 0 : activePois.find(function (poi) {
       return poi.id === activePoiId;
     });
-  }, [activePoiId, pois]);
+  }, [activePoiId, activePois]);
 
-  var _j = useGeolocation(true, false),
-      isGeolocationSupported = _j.isSupported,
-      location = _j.location,
-      resetGeolocation = _j.reset;
+  var _l = useGeolocation(true, false),
+      isGeolocationSupported = _l.isSupported,
+      location = _l.location,
+      resetGeolocation = _l.reset;
 
   var mapMarkers = useMemo(function () {
     var _a;
@@ -560,7 +694,7 @@ var PointOfInterestMap = function (_a) {
         iconColor: "#5383EC"
       }))
     };
-    var markers = ((_a = pois === null || pois === void 0 ? void 0 : pois.filter(function (poi) {
+    var markers = ((_a = activePois === null || activePois === void 0 ? void 0 : activePois.filter(function (poi) {
       return poi.id !== undefined;
     })) === null || _a === void 0 ? void 0 : _a.map(function (_a) {
       var id = _a.id,
@@ -583,9 +717,9 @@ var PointOfInterestMap = function (_a) {
     }
 
     return markers;
-  }, [currentPosMarker, isGeolocationSupported, location === null || location === void 0 ? void 0 : location.coords.latitude, location === null || location === void 0 ? void 0 : location.coords.longitude, pois]);
+  }, [currentPosMarker, isGeolocationSupported, location === null || location === void 0 ? void 0 : location.coords.latitude, location === null || location === void 0 ? void 0 : location.coords.longitude, activePois]);
 
-  var _k = useLeafletMap({
+  var _m = useLeafletMap({
     url: provider,
     attribution: attribution,
     center: center,
@@ -606,12 +740,12 @@ var PointOfInterestMap = function (_a) {
       });
     }
   }),
-      isLoaded = _k.isLoaded,
-      setMapContainer = _k.setContainer,
-      flyToActive = _k.flyToActive,
-      showAllMarkers = _k.showAllMarkers,
-      flyToPosition = _k.flyToPosition,
-      getCurrentZoom = _k.getCurrentZoom;
+      isLoaded = _m.isLoaded,
+      setMapContainer = _m.setContainer,
+      flyToActive = _m.flyToActive,
+      showAllMarkers = _m.showAllMarkers,
+      flyToPosition = _m.flyToPosition,
+      getCurrentZoom = _m.getCurrentZoom;
 
   useEffect(function () {
     if (isLoaded && !isDirty) {
@@ -686,6 +820,25 @@ var PointOfInterestMap = function (_a) {
     });
   };
 
+  var filterName = globals.sections.poiFilterName;
+  var factFiltername = globals.sections.poiFactFilterName;
+  useEffect(function () {
+    if (filters.textFilter) {
+      setUrlParam(filterName, filters.textFilter);
+    } else {
+      deleteUrlParam(filterName);
+    }
+
+    if (isValidArray(filters.categoryFilter, false)) {
+      setUrlParam(factFiltername, filters.categoryFilter.join(','));
+    } else {
+      deleteUrlParam(factFiltername);
+    }
+  }, [filterName, factFiltername, filters.textFilter, filters.categoryFilter]);
+  useEffect(function () {
+    setActivePoiId('');
+    setIsDirty(false);
+  }, [filters]);
   return React__default.createElement(PoiMapSection, {
     anchorId: anchorId,
     bgColor: "image",
@@ -693,14 +846,36 @@ var PointOfInterestMap = function (_a) {
     isLarge: isLarge
   }, React__default.createElement(Wrapper, {
     clampWidth: isLarge ? 'large' : 'normal'
-  }, React__default.createElement(MapContainer, null, React__default.createElement(Map, {
+  }, React__default.createElement(MapContainer, null, React__default.createElement(Map$1, {
     ref: setMapContainer,
     isLarge: size === 'large'
-  }), showOwnPosition && React__default.createElement(RequestGeolocationBtn, {
+  }), (showOwnPosition || poiFilters) && React__default.createElement(Overlay, null, showOwnPosition && React__default.createElement(RequestGeolocationBtn, {
     onClick: handleLocationRequest
   }, customLocationRequest || React__default.createElement(MyLocation, {
     iconColor: colors.text.default
-  })), activePOI && activePOI.name && React__default.createElement(CardStage, {
+  })), poiFilters ? customPoiFilters ? customPoiFilters({
+    filters: filters,
+    setFilters: setFilters,
+    pois: pois || [],
+    settings: poiFilters
+  }) : React__default.createElement(PoiFilterBar, {
+    value: filters,
+    onChange: setFilters,
+    textFilter: (poiFilters === null || poiFilters === void 0 ? void 0 : poiFilters.textFilter) || undefined,
+    categoryFilter: (poiFilters === null || poiFilters === void 0 ? void 0 : poiFilters.categoryFilter) ? __assign(__assign({}, poiFilters.categoryFilter), {
+      items: categories === null || categories === void 0 ? void 0 : categories.map(function (cat) {
+        return {
+          value: cat,
+          label: cat
+        } || [];
+      })
+    }) : undefined,
+    mobileSubmitLabel: poiFilters === null || poiFilters === void 0 ? void 0 : poiFilters.mobileSubmitLabel,
+    closeIcon: poiFilters === null || poiFilters === void 0 ? void 0 : poiFilters.closeIcon,
+    toggleLabel: poiFilters === null || poiFilters === void 0 ? void 0 : poiFilters.toggleLabel,
+    filterIcon: poiFilters === null || poiFilters === void 0 ? void 0 : poiFilters.filterIcon,
+    indicator: poiFilters === null || poiFilters === void 0 ? void 0 : poiFilters.indicator
+  }) : null), activePOI && activePOI.name && React__default.createElement(CardStage, {
     onClick: function (ev) {
       if (ev.target !== ev.currentTarget) return;
       setActivePoiId('');
@@ -714,7 +889,7 @@ var PointOfInterestMap = function (_a) {
   }))))));
 };
 var PointOfInterestMap$1 = withLibTheme(PointOfInterestMap);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
 
-export { PointOfInterestDetail$1 as PointOfInterestDetail, PointOfInterestMap$1 as PointOfInterestMap, PointOfInterestOverview$1 as PointOfInterestOverview };
+export { index as PoiPartials, PointOfInterestDetail$1 as PointOfInterestDetail, PointOfInterestMap$1 as PointOfInterestMap, PointOfInterestOverview$1 as PointOfInterestOverview };
 //# sourceMappingURL=sections.pois.js.map