@blateral/b.kit 2.4.2 → 2.5.0-beta.1.0

package/esm/sections.pois.js

@@ -0,0 +1,720 @@
+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 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 { i as isValidArray } from './arrays-65b644ef.js';
+import { F as FilterField } from './FilterField-7805bdb4.js';
+import { u as useUpdateEffect } from './useUpdateEffect-824c0c84.js';
+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-3ded0cfc.js';
+import { u as useGeolocation } from './useGeolocation-f9f073cc.js';
+import './concat-ab3c66f2.js';
+import './clamp-12d37b65.js';
+import 'react-dom/server';
+import './useLazyInput-16a0b633.js';
+import './useMediaQuery-b08dda62.js';
+import './Link-3fd9c9b8.js';
+import './navigation-ada7fd84.js';
+import './LanguageSwitcher-3fa20077.js';
+
+var StyledImage = styled(Image).withConfig({
+  displayName: "PointOfInterestDetail__StyledImage",
+  componentId: "sc-hksryh-0"
+})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n"], ["\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n"])), spacings.spacer);
+var Facts = styled(POIFacts).withConfig({
+  displayName: "PointOfInterestDetail__Facts",
+  componentId: "sc-hksryh-1"
+})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n    max-width: 880px;\n"], ["\n    max-width: 880px;\n"])));
+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);
+var PoiText = styled(Copy).withConfig({
+  displayName: "PointOfInterestDetail__PoiText",
+  componentId: "sc-hksryh-3"
+})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n    max-width: 880px;\n\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n"], ["\n    max-width: 880px;\n\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge * 3);
+
+var PointOfInterestDetail = function (_a) {
+  var anchorId = _a.anchorId,
+      image = _a.image,
+      title = _a.title,
+      intro = _a.intro,
+      text = _a.text,
+      facts = _a.facts,
+      infos = _a.infos,
+      bgMode = _a.bgMode,
+      customFact = _a.customFact;
+  var colors = useLibTheme().colors;
+  var isInverted = bgMode === 'inverted';
+  var hasBg = bgMode === 'full';
+  var hasInfos = useMemo(function () {
+    return isValidArray(infos === null || infos === void 0 ? void 0 : infos.filter(function (info) {
+      return isValidArray(info.items, false);
+    }), false);
+  }, [infos]);
+  return React__default.createElement(Section, {
+    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
+  }, (image === null || image === void 0 ? void 0 : image.small) && React__default.createElement(StyledImage, __assign({}, image, {
+    coverSpace: true,
+    allowEdgeRadius: true,
+    isInverted: isInverted
+  })), React__default.createElement(Grid.Row, {
+    gutter: spacings.nudge * 5,
+    semilarge: {
+      gutter: spacings.spacer
+    }
+  }, React__default.createElement(Grid.Col, {
+    semilarge: {
+      span: hasInfos ? 5.7 / 8 : 1
+    }
+  }, title && React__default.createElement(PoiTitle, {
+    size: "heading-2",
+    isInverted: isInverted
+  }, title), isValidArray(facts, false) && React__default.createElement(Facts, {
+    isInverted: isInverted,
+    facts: facts,
+    customFact: customFact
+  }), intro && React__default.createElement(PoiText, {
+    size: "medium",
+    type: "copy-b",
+    isInverted: isInverted,
+    innerHTML: intro
+  }), text && React__default.createElement(PoiText, {
+    size: "medium",
+    isInverted: isInverted,
+    innerHTML: text
+  })), hasInfos && React__default.createElement(Grid.Col, {
+    semilarge: {
+      span: 2.3 / 8
+    }
+  }, React__default.createElement(InfoList, {
+    isInverted: isInverted,
+    items: infos
+  })))));
+};
+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 poiExactNameFilter = function (filterQuery) {
+  return function (value) {
+    var regex = new RegExp(filterQuery);
+    return regex.test(value.name);
+  };
+};
+
+var poiSoftNameFilter = function (filterQuery) {
+  return function (value) {
+    var preparedQuery = filterQuery.toLowerCase().replace(/\s/g, '');
+    var preparedName = value.name.toLowerCase().replace(/\s/g, '');
+    var regex = new RegExp(preparedQuery);
+    return regex.test(preparedName);
+  };
+};
+
+var poiFactFilter = function (filterQuery) {
+  return function (value) {
+    if (!isValidArray(value.facts, false)) return false;
+    var preparedQuery = filterQuery.toLowerCase().replace(/\s/g, '');
+    var regex = new RegExp(preparedQuery);
+    var result = value.facts.find(function (fact) {
+      var preparedFact = fact.toLowerCase().replace(/\s/g, '');
+      return regex.test(preparedFact);
+    });
+    return !!result;
+  };
+};
+
+var poiInfoFilter = function (filterQuery) {
+  return function (value) {
+    if (!isValidArray(value === null || value === void 0 ? void 0 : value.infos, false)) return false;
+    var preparedQuery = filterQuery.toLowerCase().replace(/\s/g, '');
+    var regex = new RegExp(preparedQuery);
+    return !!value.infos.find(function (info) {
+      if (!info.text) return false;
+      var preparedText = info.text.toLowerCase().replace(/\s/g, '');
+      return regex.test(preparedText);
+    });
+  };
+};
+
+var poiDescriptionFilter = function (filterQuery) {
+  return function (value) {
+    if (!value.shortDescription) return false;
+    var preparedQuery = filterQuery.toLowerCase().replace(/\s/g, '');
+    var preparedDesc = value.shortDescription.toLowerCase().replace(/\s/g, '');
+    var regex = new RegExp(preparedQuery);
+    return regex.test(preparedDesc);
+  };
+};
+
+var removeMatchIntersections = function (array, item) {
+  if (!item) return [];
+  return item === null || item === void 0 ? void 0 : item.filter(function (m) {
+    return !array.find(function (prioItem) {
+      return prioItem.item.id === m.id;
+    });
+  });
+};
+
+var filterPois = function (filterQuery, pois) {
+  var prioList = [];
+
+  if (!isValidArray(pois === null || pois === void 0 ? void 0 : pois.filter(function (poi) {
+    return poi.id !== undefined;
+  }), false)) {
+    return prioList;
+  } // PRIO 1 Filter: Exact name
+
+
+  var exactNameMatches = pois === null || pois === void 0 ? void 0 : pois.filter(poiExactNameFilter(filterQuery));
+
+  if (isValidArray(exactNameMatches, false)) {
+    prioList.push.apply(prioList, exactNameMatches.map(function (match) {
+      return {
+        item: match,
+        priority: 1
+      };
+    }));
+  } // PRIO 2 Filter: Name
+
+
+  var nameMatches = removeMatchIntersections(prioList, pois === null || pois === void 0 ? void 0 : pois.filter(poiSoftNameFilter(filterQuery)));
+
+  if (isValidArray(nameMatches, false)) {
+    prioList.push.apply(prioList, nameMatches.map(function (match) {
+      return {
+        item: match,
+        priority: 2
+      };
+    }));
+  } // PRIO 3 Filter: Facts
+
+
+  var factMatches = removeMatchIntersections(prioList, pois === null || pois === void 0 ? void 0 : pois.filter(poiFactFilter(filterQuery)));
+
+  if (isValidArray(factMatches, false)) {
+    prioList.push.apply(prioList, factMatches.map(function (match) {
+      return {
+        item: match,
+        priority: 3
+      };
+    }));
+  } // PRIO 4 Filter: Description
+
+
+  var infoMatches = removeMatchIntersections(prioList, pois === null || pois === void 0 ? void 0 : pois.filter(poiInfoFilter(filterQuery)));
+
+  if (isValidArray(infoMatches, false)) {
+    prioList.push.apply(prioList, infoMatches.map(function (match) {
+      return {
+        item: match,
+        priority: 4
+      };
+    }));
+  } // PRIO 5 Filter: Description
+
+
+  var descMatches = removeMatchIntersections(prioList, pois === null || pois === void 0 ? void 0 : pois.filter(poiDescriptionFilter(filterQuery)));
+
+  if (isValidArray(descMatches, false)) {
+    prioList.push.apply(prioList, descMatches.map(function (match) {
+      return {
+        item: match,
+        priority: 5
+      };
+    }));
+  }
+
+  return prioList;
+};
+
+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;
+
+  var _d = useLibTheme(),
+      colors = _d.colors,
+      globals = _d.globals;
+
+  var filterName = globals.sections.poiFilterName;
+  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
+
+    for (var _i = 0, queryParts_1 = queryParts; _i < queryParts_1.length; _i++) {
+      var part = queryParts_1[_i];
+      var matches = filterPois(escapeRegExp(part), pois || []);
+
+      var _loop_1 = function (match) {
+        var intersectionIndex = searchMatches.findIndex(function (sItem) {
+          return sItem.match.item.id === match.item.id;
+        });
+
+        if (intersectionIndex !== -1) {
+          searchMatches[intersectionIndex].intersections += 1;
+        } else {
+          searchMatches.push({
+            match: match,
+            intersections: 1
+          });
+        }
+      };
+
+      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);
+    });
+  }, [filterQuery, pois]);
+  var getFilter = useCallback(function () {
+    return getUrlParams()[filterName];
+  }, [filterName]);
+  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);
+    } else {
+      deleteUrlParam(filterName);
+    }
+  }, [filterName, filterQuery, isMounted]);
+  useUpdateEffect(function () {
+    // set filters to URL params
+    if (filterQuery) {
+      setUrlParam(filterName, filterQuery);
+    } else {
+      deleteUrlParam(filterName);
+    }
+  }, [filterQuery]);
+  return React__default.createElement(Section, {
+    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,
+    isInverted: isInverted
+  }), 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({
+      key: i
+    }, poi.item, {
+      isInverted: isInverted
+    }));
+  }))));
+};
+var PointOfInterestOverview$1 = withLibTheme(PointOfInterestOverview);
+var templateObject_1$1, templateObject_2$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) {
+    var theme = _a.theme; // navbar main only
+
+    var mainIdent = generateNavbarIdent({
+      pageFlow: 'beforeContent',
+      hasMain: true
+    }); // navbar main and top
+
+    var mainTopIdent = generateNavbarIdent({
+      pageFlow: 'beforeContent',
+      hasMain: true,
+      hasTop: true
+    }); // navbar main and bottom
+
+    var mainBottomIdent = generateNavbarIdent({
+      pageFlow: 'beforeContent',
+      hasMain: true,
+      hasBottom: true
+    }); // full navbar with all bars
+
+    var fullIdent = generateNavbarIdent({
+      pageFlow: 'beforeContent',
+      hasTop: true,
+      hasMain: true,
+      hasBottom: true
+    });
+    var navMainHeight = getFullNavbarHeights(theme, mainIdent).large;
+    var navMainTopHeight = getFullNavbarHeights(theme, mainTopIdent).large;
+    var navMainBottomHeight = getFullNavbarHeights(theme, mainBottomIdent).large;
+    var navFullHeight = getFullNavbarHeights(theme, fullIdent).large;
+
+    var mapToSelector = function (idents) {
+      return idents.map(function (id) {
+        return "[data-navbar-ident*='".concat(id, "']");
+      }).join('');
+    };
+
+    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]);
+  });
+};
+
+var PoiMapSection = styled(Section).withConfig({
+  displayName: "PointOfInterestMap__PoiMapSection",
+  componentId: "sc-1ke8oz0-0"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: relative;\n    ", "\n\n    header + & {\n        ", "\n        ", "\n    }\n"], ["\n    position: relative;\n    ", "\n\n    header + & {\n        ", "\n        ", "\n    }\n"])), function (_a) {
+  var isLarge = _a.isLarge;
+  return isLarge && genHeightStyles();
+}, withRange([0], 'padding-top'), withRange([0], 'margin-top'));
+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({
+  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) {
+  var theme = _a.theme;
+  return getColors(theme).primary.default;
+});
+var CardStage = styled.div.withConfig({
+  displayName: "PointOfInterestMap__CardStage",
+  componentId: "sc-1ke8oz0-4"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 10;\n\n    display: flex;\n    align-items: flex-end;\n    justify-content: flex-end;\n\n    pointer-events: all;\n    background-color: rgba(255, 255, 255, 0.8);\n\n    @media ", " {\n        position: absolute;\n        background-color: transparent;\n        padding: ", "px;\n        padding-bottom: ", "px;\n\n        pointer-events: none;\n    }\n"], ["\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 10;\n\n    display: flex;\n    align-items: flex-end;\n    justify-content: flex-end;\n\n    pointer-events: all;\n    background-color: rgba(255, 255, 255, 0.8);\n\n    @media ", " {\n        position: absolute;\n        background-color: transparent;\n        padding: ", "px;\n        padding-bottom: ", "px;\n\n        pointer-events: none;\n    }\n"])), mq.medium, spacings.nudge * 2, spacings.nudge * 3);
+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) {
+  var theme = _a.theme;
+  return getColors(theme).elementBg.light;
+}, spacings.nudge * 3, mq.medium);
+var MapCardHeader = styled.header.withConfig({
+  displayName: "PointOfInterestMap__MapCardHeader",
+  componentId: "sc-1ke8oz0-6"
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n"], ["\n    display: flex;\n    align-items: center;\n"])));
+var CloseBtn = styled.button.withConfig({
+  displayName: "PointOfInterestMap__CloseBtn",
+  componentId: "sc-1ke8oz0-7"
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: inline-block;\n    border: none;\n    background-color: transparent;\n    cursor: pointer;\n    margin-left: auto;\n    padding: ", "px;\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    display: inline-block;\n    border: none;\n    background-color: transparent;\n    cursor: pointer;\n    margin-left: auto;\n    padding: ", "px;\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"])), spacings.nudge, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).primary.default;
+});
+
+var MapCard = function (_a) {
+  var name = _a.name,
+      facts = _a.facts,
+      description = _a.description,
+      infos = _a.infos,
+      action = _a.action,
+      customFact = _a.customFact,
+      customClose = _a.customClose,
+      onClose = _a.onClose,
+      className = _a.className;
+  var colors = useLibTheme().colors;
+  return React__default.createElement(MapCardView, {
+    className: className
+  }, React__default.createElement(MapCardHeader, null, name && React__default.createElement(Copy, {
+    type: "copy-b",
+    size: "big"
+  }, name), React__default.createElement(CloseBtn, {
+    onClick: onClose
+  }, customClose || React__default.createElement(Cross, {
+    iconColor: colors.text.default
+  }))), isValidArray(facts, false) && React__default.createElement(POIFacts, {
+    facts: facts,
+    customFact: customFact
+  }), description && React__default.createElement(Copy, {
+    type: "copy",
+    size: "small",
+    innerHTML: description
+  }), isValidArray(infos, false) && React__default.createElement(InfoList, {
+    items: [{
+      items: infos
+    }]
+  }), action && action);
+};
+
+var PointOfInterestMap = function (_a) {
+  var anchorId = _a.anchorId,
+      size = _a.size,
+      pois = _a.pois,
+      _b = _a.initialPointOfInterest,
+      initialPointOfInterest = _b === void 0 ? '' : _b,
+      provider = _a.provider,
+      attribution = _a.attribution,
+      _c = _a.center,
+      center = _c === void 0 ? [51.505, -0.09] : _c,
+      _d = _a.zoom,
+      zoom = _d === void 0 ? 5 : _d,
+      fitBoundsPadding = _a.fitBoundsPadding,
+      _e = _a.allMarkersOnInit,
+      allMarkersOnInit = _e === void 0 ? false : _e,
+      _f = _a.restrictToMarkersArea,
+      restrictToMarkersArea = _f === void 0 ? true : _f,
+      showOwnPosition = _a.showOwnPosition,
+      flyToZoom = _a.flyToZoom,
+      customFact = _a.customFact,
+      currentPosMarker = _a.currentPosMarker,
+      customCardClose = _a.customCardClose,
+      customLocationRequest = _a.customLocationRequest;
+  var isLarge = size === 'large';
+  var colors = useLibTheme().colors;
+
+  var _g = useState(initialPointOfInterest || ''),
+      activePoiId = _g[0],
+      setActivePoiId = _g[1];
+
+  var _h = useState(false),
+      isDirty = _h[0],
+      setIsDirty = _h[1];
+
+  var activePOI = useMemo(function () {
+    return pois === null || pois === void 0 ? void 0 : pois.find(function (poi) {
+      return poi.id === activePoiId;
+    });
+  }, [activePoiId, pois]);
+
+  var _j = useGeolocation(true, false),
+      isGeolocationSupported = _j.isSupported,
+      location = _j.location,
+      resetGeolocation = _j.reset;
+
+  var mapMarkers = useMemo(function () {
+    var _a;
+
+    var defaultMarker = {
+      size: [28, 28],
+      anchor: [14, 28],
+      sizeActive: [70, 70],
+      anchorActive: [35, 70],
+      url: getSVGDataImg(React__default.createElement(LocationPin, null))
+    }; // marker of own position
+
+    var defaultPosMarker = {
+      size: [24, 24],
+      anchor: [12, 12],
+      sizeActive: [24, 24],
+      anchorActive: [12, 12],
+      url: getSVGDataImg(React__default.createElement(CurrentLocation, {
+        iconColor: "#5383EC"
+      }))
+    };
+    var markers = ((_a = pois === null || pois === void 0 ? void 0 : pois.filter(function (poi) {
+      return poi.id !== undefined;
+    })) === null || _a === void 0 ? void 0 : _a.map(function (_a) {
+      var id = _a.id,
+          position = _a.position,
+          icon = _a.icon;
+      return {
+        id: id,
+        position: position,
+        icon: icon || defaultMarker,
+        isInteractive: true
+      };
+    })) || [];
+
+    if (isGeolocationSupported && (location === null || location === void 0 ? void 0 : location.coords.latitude) && (location === null || location === void 0 ? void 0 : location.coords.longitude)) {
+      markers.push({
+        id: 'my-current-position-123456789',
+        position: [location.coords.latitude, location.coords.longitude],
+        icon: currentPosMarker || defaultPosMarker
+      });
+    }
+
+    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]);
+
+  var _k = useLeafletMap({
+    url: provider,
+    attribution: attribution,
+    center: center,
+    zoom: zoom,
+    activeMarkerId: activePoiId,
+    markers: mapMarkers,
+    fitBoundsPadding: fitBoundsPadding,
+    restrictToMarkersArea: restrictToMarkersArea,
+    showZoomControls: true,
+    zoomControlPosition: 'bottomleft',
+    onMarkerClick: function (markerId) {
+      setActivePoiId(function (prev) {
+        if (prev === markerId) {
+          return '';
+        }
+
+        return markerId;
+      });
+    }
+  }),
+      isLoaded = _k.isLoaded,
+      setMapContainer = _k.setContainer,
+      flyToActive = _k.flyToActive,
+      showAllMarkers = _k.showAllMarkers,
+      flyToPosition = _k.flyToPosition,
+      getCurrentZoom = _k.getCurrentZoom;
+
+  useEffect(function () {
+    if (isLoaded && !isDirty) {
+      if (allMarkersOnInit) showAllMarkers();
+    } else {
+      var currentZoom = getCurrentZoom();
+      var zoom_1 = flyToZoom;
+
+      if (flyToZoom !== undefined && currentZoom > flyToZoom) {
+        zoom_1 = currentZoom;
+      }
+
+      flyToActive(zoom_1);
+    }
+  }, [activePoiId, allMarkersOnInit, flyToActive, flyToZoom, getCurrentZoom, initialPointOfInterest, isDirty, isLoaded, showAllMarkers]);
+  useEffect(function () {
+    if (!isDirty && activePoiId !== initialPointOfInterest) {
+      setIsDirty(true);
+    }
+  }, [activePoiId, initialPointOfInterest, isDirty]);
+
+  var handleLocationRequest = function () {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var currentZoom, zoom_2, position;
+
+      var _a, _b;
+
+      return __generator(this, function (_c) {
+        switch (_c.label) {
+          case 0:
+            if (!(((_a = location === null || location === void 0 ? void 0 : location.coords) === null || _a === void 0 ? void 0 : _a.latitude) && ((_b = location === null || location === void 0 ? void 0 : location.coords) === null || _b === void 0 ? void 0 : _b.longitude))) return [3
+            /*break*/
+            , 1];
+            currentZoom = getCurrentZoom();
+            zoom_2 = flyToZoom;
+
+            if (flyToZoom !== undefined && currentZoom > flyToZoom) {
+              zoom_2 = currentZoom;
+            }
+
+            flyToPosition([location.coords.latitude, location.coords.longitude], zoom_2);
+            return [3
+            /*break*/
+            , 4];
+
+          case 1:
+            _c.trys.push([1, 3,, 4]);
+
+            return [4
+            /*yield*/
+            , resetGeolocation()];
+
+          case 2:
+            position = _c.sent();
+            if (position) showAllMarkers();
+            return [3
+            /*break*/
+            , 4];
+
+          case 3:
+            _c.sent();
+            return [3
+            /*break*/
+            , 4];
+
+          case 4:
+            return [2
+            /*return*/
+            ];
+        }
+      });
+    });
+  };
+
+  return React__default.createElement(PoiMapSection, {
+    anchorId: anchorId,
+    bgColor: "image",
+    bgMode: "full",
+    isLarge: isLarge
+  }, React__default.createElement(Wrapper, {
+    clampWidth: isLarge ? 'large' : 'normal'
+  }, React__default.createElement(MapContainer, null, React__default.createElement(Map, {
+    ref: setMapContainer,
+    isLarge: size === 'large'
+  }), showOwnPosition && React__default.createElement(RequestGeolocationBtn, {
+    onClick: handleLocationRequest
+  }, customLocationRequest || React__default.createElement(MyLocation, {
+    iconColor: colors.text.default
+  })), activePOI && activePOI.name && React__default.createElement(CardStage, {
+    onClick: function (ev) {
+      if (ev.target !== ev.currentTarget) return;
+      setActivePoiId('');
+    }
+  }, React__default.createElement(MapCard, __assign({}, activePOI, {
+    onClose: function () {
+      return setActivePoiId('');
+    },
+    customFact: customFact,
+    customClose: customCardClose
+  }))))));
+};
+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;
+
+export { PointOfInterestDetail$1 as PointOfInterestDetail, PointOfInterestMap$1 as PointOfInterestMap, PointOfInterestOverview$1 as PointOfInterestOverview };
+//# sourceMappingURL=sections.pois.js.map