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

package/esm/sections.events.js

@@ -0,0 +1,623 @@
+import { a as __makeTemplateObject, e as __spreadArray, _ as __assign } from './ClockFilled-62515a8f.js';
+import React__default, { useCallback, useEffect, useMemo } from 'react';
+import styled from 'styled-components';
+import { S as Section, m as mapToBgMode } from './Section-b76e6909.js';
+import { W as Wrapper } from './Wrapper-90dccc89.js';
+import { E as EventBlock } from './EventBlock-41d68d0a.js';
+import { s as spacings, g as getColors, m as mq } from './styles-da982973.js';
+import { w as withLibTheme, u as useLibTheme } from './LibThemeProvider-52555ac9.js';
+import { S as StatusFormatter } from './statusFormatter-9be0fbff.js';
+import { c as concat } from './concat-ab3c66f2.js';
+import { F as Filter } from './Filter-2b5f5e53.js';
+import { T as Tag } from './Tag-ac51e916.js';
+import { P as Pointer } from './Pointer-5c77b1f1.js';
+import { C as Copy, H as Heading } from './Copy-a28aeb61.js';
+import { i as isValidArray } from './arrays-65b644ef.js';
+import { g as getUrlParams, s as setUrlParam, d as deleteUrlParam } from './urlParams-9cfdaf71.js';
+import { u as useMounted } from './useMounted-1e4cc87b.js';
+import { u as useObserverSupport } from './useObserverSupport-02bce7f5.js';
+import { u as useScrollTo } from './useScrollTo-70af34bf.js';
+import { u as useUpdateEffect } from './useUpdateEffect-824c0c84.js';
+import { I as Image } from './Image-dc2b33c1.js';
+import { G as Grid } from './Grid-5eec127f.js';
+import { I as InfoList } from './InfoList-5c4586ed.js';
+import './Link-3fd9c9b8.js';
+import 'react-dom/server';
+import './clamp-12d37b65.js';
+
+var TagContainer$1 = styled.div.withConfig({
+  displayName: "EventOverview__TagContainer",
+  componentId: "sc-u2afqs-0"
+})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n    margin-top: -", "px;\n    margin-left: -", "px;\n\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n\n    &:not(:only-child) {\n        margin-bottom: ", "px;\n    }\n"], ["\n    margin-top: -", "px;\n    margin-left: -", "px;\n\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n\n    &:not(:only-child) {\n        margin-bottom: ", "px;\n    }\n"])), spacings.nudge, spacings.nudge, spacings.nudge * 6);
+var TagWrapper$1 = styled.div.withConfig({
+  displayName: "EventOverview__TagWrapper",
+  componentId: "sc-u2afqs-1"
+})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n    padding-top: ", "px;\n    padding-left: ", "px;\n"], ["\n    padding-top: ", "px;\n    padding-left: ", "px;\n"])), spacings.nudge, spacings.nudge);
+var Events = styled.ul.withConfig({
+  displayName: "EventOverview__Events",
+  componentId: "sc-u2afqs-2"
+})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n\n    /* & > * + * {\n        border-top: 1px solid\n            ", ";\n    }\n\n    & > *:first-of-type {\n        border-top: 1px solid\n            ", ";\n    }\n\n    & > *:last-of-type {\n        border-bottom: 1px solid\n            ", ";\n    } */\n\n    & > * + * {\n        padding-top: ", "px;\n    }\n"], ["\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n\n    /* & > * + * {\n        border-top: 1px solid\n            ", ";\n    }\n\n    & > *:first-of-type {\n        border-top: 1px solid\n            ", ";\n    }\n\n    & > *:last-of-type {\n        border-bottom: 1px solid\n            ", ";\n    } */\n\n    & > * + * {\n        padding-top: ", "px;\n    }\n"])), function (_a) {
+  var theme = _a.theme,
+      hasBg = _a.hasBg;
+  return hasBg ? getColors(theme).elementBg.light : getColors(theme).elementBg.medium;
+}, function (_a) {
+  var theme = _a.theme,
+      hasBg = _a.hasBg;
+  return hasBg ? getColors(theme).elementBg.light : getColors(theme).elementBg.medium;
+}, function (_a) {
+  var theme = _a.theme,
+      hasBg = _a.hasBg;
+  return hasBg ? getColors(theme).elementBg.light : getColors(theme).elementBg.medium;
+}, spacings.nudge * 3);
+var FilterIcon = styled(Copy).withConfig({
+  displayName: "EventOverview__FilterIcon",
+  componentId: "sc-u2afqs-3"
+})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    padding: ", "px ", "px 0 0;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    padding: ", "px ", "px 0 0;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge / 2, spacings.nudge, spacings.nudge);
+var EventItem = styled.li.withConfig({
+  displayName: "EventOverview__EventItem",
+  componentId: "sc-u2afqs-4"
+})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n    /* padding: ", "px 0; */\n"], ["\n    /* padding: ", "px 0; */\n"])), spacings.nudge * 3);
+var ListFooter = styled.div.withConfig({
+  displayName: "EventOverview__ListFooter",
+  componentId: "sc-u2afqs-5"
+})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n    margin-top: ", "px;\n    text-align: center;\n\n    @media ", " {\n        text-align: left;\n    }\n"], ["\n    margin-top: ", "px;\n    text-align: center;\n\n    @media ", " {\n        text-align: left;\n    }\n"])), spacings.nudge * 6, mq.medium);
+var ShowMore = styled.span.withConfig({
+  displayName: "EventOverview__ShowMore",
+  componentId: "sc-u2afqs-6"
+})(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n    display: ", ";\n"], ["\n    display: ", ";\n"])), function (_a) {
+  var itemCount = _a.itemCount;
+  return itemCount && itemCount > 2 ? 'block' : 'none';
+});
+var getEventFilterParams = function (url, theme, tags) {
+  if (tags === void 0) {
+    tags = [];
+  }
+
+  if (!url || !theme) return '';
+  if (!isValidArray(tags, false)) return url;
+  var filterName = theme.globals.sections.eventFilterName;
+  if (!filterName) return url;
+
+  try {
+    var validUrl = new URL(url);
+    var newParams = new URLSearchParams(validUrl.search);
+    newParams.set(filterName, encodeURIComponent(tags.join(',')));
+    return "".concat(url, "?").concat(newParams.toString());
+  } catch (err) {
+    return "".concat(url, "?").concat(filterName, "=").concat(encodeURIComponent(tags.join(',')));
+  }
+};
+
+var EventOverview = function (_a) {
+  var tags = _a.tags,
+      events = _a.events,
+      bgMode = _a.bgMode,
+      anchorId = _a.anchorId,
+      initial = _a.initial,
+      showMoreText = _a.showMoreText,
+      onTagClick = _a.onTagClick,
+      customTag = _a.customTag;
+  var isInverted = bgMode === 'inverted';
+  var hasBg = bgMode === 'full';
+
+  var _b = useLibTheme(),
+      colors = _b.colors,
+      globals = _b.globals;
+
+  var filterName = globals.sections.eventFilterName;
+
+  var _c = React__default.useState((initial === null || initial === void 0 ? void 0 : initial.activeTags) || []),
+      selectedTags = _c[0],
+      setSelectedTags = _c[1];
+
+  var itemsPerRow = React__default.useState(1)[0];
+
+  var _d = React__default.useState((initial === null || initial === void 0 ? void 0 : initial.visibleRows) || 3),
+      visibleRows = _d[0],
+      setVisibleRows = _d[1];
+
+  var targetRef = React__default.useRef(null);
+  var observerSupported = useObserverSupport();
+  var isMounted = useMounted();
+  var eventCount = (events === null || events === void 0 ? void 0 : events.length) || 0;
+  var setNewPos = useScrollTo(800);
+  var getFilters = useCallback(function () {
+    var tags = [];
+    var filters = getUrlParams()[filterName];
+
+    if (filters) {
+      var tagsFilter = filters === null || filters === void 0 ? void 0 : filters.split(',');
+
+      if (isValidArray(tagsFilter, false)) {
+        tags.push.apply(tags, tagsFilter);
+      }
+    }
+
+    return tags;
+  }, [filterName]);
+  useEffect(function () {
+    // if initial data is defined exit hook
+    if (initial) return; // if no initial data provied try to find needed params in URL
+
+    var paramTags = getFilters();
+
+    if (isValidArray(paramTags, false)) {
+      setSelectedTags(paramTags);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [getFilters, initial]);
+  useEffect(function () {
+    var _a;
+
+    if (!initial || isMounted) return; // set inital data into URL
+
+    setUrlParam('rows', (initial === null || initial === void 0 ? void 0 : initial.visibleRows) || 3);
+
+    if (isValidArray(initial === null || initial === void 0 ? void 0 : initial.activeTags, false)) {
+      setUrlParam(filterName, (_a = initial === null || initial === void 0 ? void 0 : initial.activeTags) === null || _a === void 0 ? void 0 : _a.join(','));
+    } else {
+      deleteUrlParam(filterName);
+    }
+  }, [filterName, initial, isMounted]);
+  useUpdateEffect(function () {
+    setUrlParam('rows', visibleRows);
+  }, [visibleRows]);
+  useUpdateEffect(function () {
+    if (onTagClick || !isValidArray(selectedTags)) return; // set filters to URL params
+
+    if (selectedTags.length > 0) {
+      setUrlParam(filterName, selectedTags.join(','));
+    } else {
+      deleteUrlParam(filterName);
+    }
+  }, [selectedTags]);
+
+  var handleTagClick = function (tag, enableToggling) {
+    if (enableToggling === void 0) {
+      enableToggling = true;
+    }
+
+    setSelectedTags(function (prev) {
+      var prevCopy = __spreadArray([], prev, true);
+
+      var itemIndex = tag.name ? prev.indexOf(tag.name) : -1;
+
+      if (itemIndex === -1 && tag.name) {
+        return __spreadArray(__spreadArray([], prevCopy, true), [tag.name], false);
+      }
+
+      if (enableToggling) {
+        prevCopy.splice(itemIndex, 1);
+        return prevCopy;
+      }
+
+      return prev;
+    });
+    setVisibleRows(3);
+  };
+
+  var filteredEvents = useMemo(function () {
+    var tagFilterFn = function (item) {
+      if (!isValidArray(selectedTags, false)) return true;
+      if (!item.tags) return false;
+      var hasTags = false;
+
+      for (var i = 0; i < item.tags.length; i++) {
+        if (selectedTags.indexOf(item.tags[i].name || '') !== -1) {
+          hasTags = true;
+          break;
+        }
+      }
+
+      return hasTags;
+    };
+
+    var filtered = isValidArray(events) ? __spreadArray([], events, true) : []; // adding filter
+
+    filtered = filtered === null || filtered === void 0 ? void 0 : filtered.filter(tagFilterFn);
+    return filtered;
+  }, [events, selectedTags]);
+  var visibleEvents = useMemo(function () {
+    return (filteredEvents === null || filteredEvents === void 0 ? void 0 : filteredEvents.filter(function (_, i) {
+      return i < visibleRows * itemsPerRow;
+    })) || [];
+  }, [filteredEvents, itemsPerRow, visibleRows]);
+  useEffect(function () {
+    // cancel if intersection observers are not supported
+    if (!observerSupported) return;
+    var element = targetRef.current;
+    var observer;
+
+    if (element) {
+      var options = {
+        rootMargin: '0px 0px 100px 0px',
+        threshold: 0
+      };
+      observer = new IntersectionObserver(function (entries) {
+        var entry = entries[0];
+
+        if (entry === null || entry === void 0 ? void 0 : entry.isIntersecting) {
+          // on bottom of the wrapper load more events
+          if (visibleRows < Math.ceil(filteredEvents.length / itemsPerRow)) {
+            setVisibleRows(function (prev) {
+              return prev + 1;
+            });
+          }
+        }
+      }, options);
+      observer.observe(element);
+    }
+
+    return function () {
+      if (observer) observer.disconnect();
+    };
+  }, [itemsPerRow, eventCount, visibleRows, observerSupported, filteredEvents.length]);
+  var filteredTags = useMemo(function () {
+    return tags === null || tags === void 0 ? void 0 : tags.filter(function (tag) {
+      return tag;
+    });
+  }, [tags]);
+  return React__default.createElement(Section, {
+    addSeperation: true,
+    anchorId: anchorId,
+    bgColor: isInverted ? colors.sectionBg.dark : hasBg ? colors.sectionBg.medium : 'transparent',
+    bgMode: mapToBgMode(bgMode, true)
+  }, React__default.createElement(Wrapper, {
+    addWhitespace: true
+  }, isValidArray(filteredTags, false) && React__default.createElement(TagContainer$1, null, React__default.createElement(FilterIcon, {
+    size: "small",
+    type: "copy",
+    isInverted: isInverted
+  }, React__default.createElement(Filter, null), React__default.createElement("span", null, "Filter")), filteredTags.map(function (tag, i) {
+    return React__default.createElement(TagWrapper$1, {
+      key: i
+    }, customTag ? customTag({
+      key: i,
+      name: tag,
+      isInverted: isInverted,
+      isActive: selectedTags.indexOf(tag) !== -1,
+      clickHandler: function (ev) {
+        ev === null || ev === void 0 ? void 0 : ev.preventDefault();
+
+        if (!onTagClick) {
+          handleTagClick({
+            name: tag
+          });
+        } else onTagClick({
+          name: tag
+        });
+      }
+    }) : React__default.createElement(Tag, {
+      isInverted: isInverted,
+      onClick: function (ev) {
+        ev === null || ev === void 0 ? void 0 : ev.preventDefault();
+
+        if (!onTagClick) {
+          handleTagClick({
+            name: tag
+          });
+        } else onTagClick({
+          name: tag
+        }, false);
+      },
+      isActive: selectedTags.indexOf(tag) !== -1
+    }, tag));
+  })), React__default.createElement(Events, {
+    hasBg: hasBg
+  }, visibleEvents.map(function (item, i) {
+    var _a;
+
+    var timespan = '';
+
+    if (item.date) {
+      var formatter = new StatusFormatter(item.date.getTime(), '', globals.sections.eventDateFormat(item.date), globals.sections.eventTimeFormat(item.date), globals.sections.eventLocaleKey);
+      timespan = formatter.getFormattedTimespan(globals.sections.eventTimespanFormat(item.date, item.duration), item.duration);
+    }
+
+    var text = concat([timespan, item.address], ' | ');
+    return React__default.createElement(EventItem, {
+      key: "".concat(i, "_event_").concat(item.title)
+    }, React__default.createElement(EventBlock, __assign({
+      hasBg: bgMode === 'full'
+    }, item, {
+      text: text,
+      tags: (_a = item.tags) === null || _a === void 0 ? void 0 : _a.map(function (tag) {
+        return {
+          name: tag.name
+        };
+      }),
+      isInverted: isInverted,
+      onTagClick: function (tag) {
+        // scroll back to top
+        setNewPos(0);
+
+        if (!onTagClick) {
+          // if no callback is defined handle filtering on client side inside the component
+          handleTagClick({
+            name: tag.name
+          }, false);
+        } else {
+          onTagClick({
+            name: tag.name
+          }, true);
+        }
+      },
+      customTag: customTag
+    })));
+  })), React__default.createElement("div", {
+    ref: targetRef
+  }), !observerSupported && React__default.createElement(ListFooter, null, events && events.length > 0 && React__default.createElement(Copy, {
+    type: "copy",
+    size: "medium",
+    isInverted: isInverted
+  }, React__default.createElement(ShowMore, {
+    itemCount: events.length,
+    onClick: function (ev) {
+      ev.preventDefault();
+
+      if (visibleRows < Math.ceil(filteredEvents.length / itemsPerRow)) {
+        setVisibleRows(function (prev) {
+          return prev + 1;
+        });
+      }
+    }
+  }, visibleRows < filteredEvents.length / itemsPerRow && React__default.createElement(Pointer.View, {
+    as: "button",
+    isInverted: isInverted
+  }, React__default.createElement(Pointer.Label, null, showMoreText || 'mehr anzeigen')))))));
+};
+var EventOverview$1 = withLibTheme(EventOverview);
+var templateObject_1$2, templateObject_2$2, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1;
+
+var List = styled.ul.withConfig({
+  displayName: "EventList__List",
+  componentId: "sc-1ssgszz-0"
+})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n    list-style: none;\n    margin: 0;\n    padding: 0;\n\n    /* & > * + * {\n        border-top: 1px solid\n            ", ";\n    }\n\n    & > *:first-of-type {\n        border-top: 1px solid\n            ", ";\n    }\n\n    & > *:last-of-type {\n        border-bottom: 1px solid\n            ", ";\n    } */\n\n    & > * + * {\n        padding-top: ", "px;\n    }\n"], ["\n    list-style: none;\n    margin: 0;\n    padding: 0;\n\n    /* & > * + * {\n        border-top: 1px solid\n            ", ";\n    }\n\n    & > *:first-of-type {\n        border-top: 1px solid\n            ", ";\n    }\n\n    & > *:last-of-type {\n        border-bottom: 1px solid\n            ", ";\n    } */\n\n    & > * + * {\n        padding-top: ", "px;\n    }\n"])), function (_a) {
+  var theme = _a.theme,
+      hasBg = _a.hasBg;
+  return hasBg ? getColors(theme).elementBg.light : getColors(theme).elementBg.medium;
+}, function (_a) {
+  var theme = _a.theme,
+      hasBg = _a.hasBg;
+  return hasBg ? getColors(theme).elementBg.light : getColors(theme).elementBg.medium;
+}, function (_a) {
+  var theme = _a.theme,
+      hasBg = _a.hasBg;
+  return hasBg ? getColors(theme).elementBg.light : getColors(theme).elementBg.medium;
+}, spacings.nudge * 3);
+var ListItem = styled.li.withConfig({
+  displayName: "EventList__ListItem",
+  componentId: "sc-1ssgszz-1"
+})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n    /* padding: ", "px 0; */\n"], ["\n    /* padding: ", "px 0; */\n"])), spacings.nudge * 3);
+
+var EventList = function (_a) {
+  var anchorId = _a.anchorId,
+      events = _a.events,
+      bgMode = _a.bgMode,
+      customTag = _a.customTag;
+
+  var _b = useLibTheme(),
+      colors = _b.colors,
+      globals = _b.globals,
+      theme = _b.theme;
+
+  var isInverted = bgMode === 'inverted';
+  var hasBg = bgMode === 'full';
+  return React__default.createElement(Section, {
+    addSeperation: true,
+    anchorId: anchorId,
+    bgColor: isInverted ? colors.sectionBg.dark : bgMode ? colors.sectionBg.medium : colors.sectionBg.light,
+    bgMode: mapToBgMode(bgMode, true)
+  }, React__default.createElement(Wrapper, {
+    addWhitespace: true
+  }, React__default.createElement(List, {
+    hasBg: hasBg
+  }, events === null || events === void 0 ? void 0 : events.map(function (event, i) {
+    var _a;
+
+    var timespan = '';
+
+    if (event.date) {
+      var formatter = new StatusFormatter(event.date.getTime(), '', globals.sections.eventDateFormat(event.date), globals.sections.eventTimeFormat(event.date), globals.sections.eventLocaleKey);
+      timespan = formatter.getFormattedTimespan(globals.sections.eventTimespanFormat(event.date, event.duration), event.duration);
+    }
+
+    var text = concat([timespan, event.address], ' | ');
+    return React__default.createElement(ListItem, {
+      key: i
+    }, React__default.createElement(EventBlock, __assign({
+      hasBg: bgMode === 'full'
+    }, event, {
+      tags: (_a = event.tags) === null || _a === void 0 ? void 0 : _a.map(function (tag) {
+        var _a, _b;
+
+        var tagHref = undefined;
+
+        if (tag.name && ((_a = tag.link) === null || _a === void 0 ? void 0 : _a.href)) {
+          tagHref = getEventFilterParams(tag.link.href, theme, [tag.name]);
+        }
+
+        return {
+          name: tag.name,
+          link: ((_b = tag.link) === null || _b === void 0 ? void 0 : _b.href) ? __assign(__assign({}, tag.link), {
+            href: tagHref
+          }) : undefined
+        };
+      }),
+      isInverted: isInverted,
+      text: text,
+      customTag: customTag
+    })));
+  }))));
+};
+var EventList$1 = withLibTheme(EventList);
+var templateObject_1$1, templateObject_2$1;
+
+var ImageContainer = styled.div.withConfig({
+  displayName: "EventDetail__ImageContainer",
+  componentId: "sc-1ko6neq-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n\n    overflow: hidden;\n\n    margin-bottom: ", "px;\n"], ["\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n\n    overflow: hidden;\n\n    margin-bottom: ", "px;\n"])), spacings.spacer);
+var StyledImage = styled(Image).withConfig({
+  displayName: "EventDetail__StyledImage",
+  componentId: "sc-1ko6neq-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    &:not(:first-child) {\n        display: none;\n    }\n\n    @media ", " {\n        max-width: 50%;\n\n        &:not(:first-child) {\n            display: inline-block;\n        }\n\n        & + & {\n            margin-left: ", "px;\n        }\n    }\n"], ["\n    &:not(:first-child) {\n        display: none;\n    }\n\n    @media ", " {\n        max-width: 50%;\n\n        &:not(:first-child) {\n            display: inline-block;\n        }\n\n        & + & {\n            margin-left: ", "px;\n        }\n    }\n"])), mq.medium, spacings.nudge);
+var ImageBackground = styled.div.withConfig({
+  displayName: "EventDetail__ImageBackground",
+  componentId: "sc-1ko6neq-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n\n    background-position: center;\n    background-size: cover;\n    background-repeat: no-repeat;\n\n    filter: blur(10px);\n    transform: scale(1.5);\n    z-index: -1;\n"], ["\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n\n    background-position: center;\n    background-size: cover;\n    background-repeat: no-repeat;\n\n    filter: blur(10px);\n    transform: scale(1.5);\n    z-index: -1;\n"])));
+var StyledTextImage = styled(Image).withConfig({
+  displayName: "EventDetail__StyledTextImage",
+  componentId: "sc-1ko6neq-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-top: ", "px;\n\n    @media ", " {\n        display: none;\n    }\n"], ["\n    margin-top: ", "px;\n\n    @media ", " {\n        display: none;\n    }\n"])), spacings.nudge * 3, mq.medium);
+var TagContainer = styled.div.withConfig({
+  displayName: "EventDetail__TagContainer",
+  componentId: "sc-1ko6neq-4"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    max-width: 880px;\n    margin-top: -", "px;\n    margin-left: -", "px;\n\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n"], ["\n    max-width: 880px;\n    margin-top: -", "px;\n    margin-left: -", "px;\n\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n"])), spacings.nudge, spacings.nudge);
+var TagWrapper = styled.div.withConfig({
+  displayName: "EventDetail__TagWrapper",
+  componentId: "sc-1ko6neq-5"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    padding-top: ", "px;\n    padding-left: ", "px;\n"], ["\n    padding-top: ", "px;\n    padding-left: ", "px;\n"])), spacings.nudge, spacings.nudge);
+var EventTitle = styled(Heading).withConfig({
+  displayName: "EventDetail__EventTitle",
+  componentId: "sc-1ko6neq-6"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    max-width: 880px;\n\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\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"], ["\n    max-width: 880px;\n\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\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"])), spacings.nudge * 3, mq.semilarge);
+var EventDateTime = styled(Copy).withConfig({
+  displayName: "EventDetail__EventDateTime",
+  componentId: "sc-1ko6neq-7"
+})(templateObject_8 || (templateObject_8 = __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 EventAddress = styled(Copy).withConfig({
+  displayName: "EventDetail__EventAddress",
+  componentId: "sc-1ko6neq-8"
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    max-width: 880px;\n\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n\n    ", " + & {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n"], ["\n    max-width: 880px;\n\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n\n    ", " + & {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n"])), spacings.nudge * 3, EventDateTime, spacings.nudge, mq.semilarge);
+var EventText = styled(Copy).withConfig({
+  displayName: "EventDetail__EventText",
+  componentId: "sc-1ko6neq-9"
+})(templateObject_10 || (templateObject_10 = __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 EventDetail = function (_a) {
+  var _b;
+
+  var anchorId = _a.anchorId,
+      event = _a.event,
+      infos = _a.infos,
+      bgMode = _a.bgMode,
+      customTag = _a.customTag;
+
+  var _c = useLibTheme(),
+      colors = _c.colors,
+      globals = _c.globals;
+
+  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]);
+  var publishedAt = '';
+  var timespan = '';
+
+  if (event === null || event === void 0 ? void 0 : event.date) {
+    var formatter = new StatusFormatter(event.date.getTime(), '', globals.sections.eventDateFormat(event.date), globals.sections.eventTimeFormat(event.date), globals.sections.eventLocaleKey);
+    publishedAt = formatter.getFormattedDate();
+    timespan = formatter.getFormattedTimespan(globals.sections.eventTimespanFormat(event.date, event.duration), event.duration);
+  }
+
+  var images = useMemo(function () {
+    var _a;
+
+    return (_a = event === null || event === void 0 ? void 0 : event.images) === null || _a === void 0 ? void 0 : _a.slice(0, 2);
+  }, [event === null || event === void 0 ? void 0 : event.images]);
+  var secondaryImage = images === null || images === void 0 ? void 0 : images[1];
+  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
+  }, isValidArray(images, false) && React__default.createElement(ImageContainer, null, images.map(function (img, i) {
+    if (!img.small) return null;
+    return React__default.createElement(StyledImage, __assign({
+      key: i
+    }, img, {
+      coverSpace: true,
+      allowEdgeRadius: true,
+      isInverted: isInverted,
+      ratios: {
+        small: {
+          w: 4,
+          h: 3
+        }
+      }
+    }));
+  }), images.length < 2 && React__default.createElement(ImageBackground, {
+    style: {
+      backgroundImage: "url(".concat((_b = event === null || event === void 0 ? void 0 : event.images) === null || _b === void 0 ? void 0 : _b[0].small, ")")
+    }
+  })), 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
+    }
+  }, (event === null || event === void 0 ? void 0 : event.tags) && React__default.createElement(TagContainer, null, event.tags.map(function (tag, i) {
+    return React__default.createElement(TagWrapper, {
+      key: 'tag_' + i
+    }, customTag ? customTag({
+      key: "headtag-".concat(i),
+      name: tag.name || '',
+      isInverted: isInverted,
+      isActive: false,
+      link: tag.link
+    }) : React__default.createElement(Tag, {
+      link: tag.link,
+      isInverted: isInverted
+    }, tag.name));
+  })), (event === null || event === void 0 ? void 0 : event.title) && React__default.createElement(EventTitle, {
+    size: "heading-2",
+    isInverted: isInverted
+  }, event.title), publishedAt && React__default.createElement(EventDateTime, {
+    size: "big",
+    type: "copy-b",
+    isInverted: isInverted
+  }, publishedAt || '', publishedAt && timespan ? ' | ' : '', timespan), (event === null || event === void 0 ? void 0 : event.address) && React__default.createElement(EventAddress, {
+    size: "big",
+    type: "copy",
+    innerHTML: event.address,
+    isInverted: isInverted
+  }), (event === null || event === void 0 ? void 0 : event.abstract) && React__default.createElement(EventText, {
+    size: "medium",
+    type: "copy-b",
+    isInverted: isInverted
+  }, event.abstract), secondaryImage && React__default.createElement(StyledTextImage, __assign({}, secondaryImage, {
+    coverSpace: true,
+    allowEdgeRadius: true,
+    isInverted: isInverted,
+    ratios: {
+      small: {
+        w: 4,
+        h: 3
+      }
+    }
+  })), (event === null || event === void 0 ? void 0 : event.text) && React__default.createElement(EventText, {
+    size: "medium",
+    isInverted: isInverted,
+    innerHTML: event.text
+  })), hasInfos && React__default.createElement(Grid.Col, {
+    semilarge: {
+      span: 2.3 / 8
+    }
+  }, React__default.createElement(InfoList, {
+    isInverted: isInverted,
+    items: infos
+  })))));
+};
+var EventDetail$1 = withLibTheme(EventDetail);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+
+export { EventDetail$1 as EventDetail, EventList$1 as EventList, EventOverview$1 as EventOverview };
+//# sourceMappingURL=sections.events.js.map