pageflow 15.1.0 → 15.2.2

data/entry_types/scrolled/package/contentElements-frontend.js

@@ -0,0 +1,533 @@
+import { Text, frontend, useFile, useEditorSelection, useOnScreen, Image, InlineCaption, Video, useMediaSettings, useI18n } from 'pageflow-scrolled/frontend';
+import React, { useRef, useState, useEffect } from 'react';
+import classNames from 'classnames';
+import ReactCompareImage from 'react-compare-image';
+import ReactPlayer from 'react-player';
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css = ".Heading-module_root__33TFw {\n  margin-top: 0.2em;\n  margin-bottom: 0.5em;\n  padding-top: 0.3em;\n}\n\n@media (orientation: landscape) {\n  .Heading-module_first__1PMJX {\n    padding-top: 25%;\n  }\n}\n";
+var styles = {"root":"Heading-module_root__33TFw","first":"Heading-module_first__1PMJX"};
+styleInject(css);
+
+function Heading(_ref) {
+  var configuration = _ref.configuration;
+  return React.createElement("h1", {
+    className: classNames(styles.root, _defineProperty({}, styles.first, configuration.first))
+  }, React.createElement(Text, {
+    scaleCategory: configuration.first ? 'h1' : 'h2',
+    inline: true
+  }, configuration.children));
+}
+
+frontend.contentElementTypes.register('heading', {
+  component: Heading
+});
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
+    return;
+  }
+
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
+
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+}
+
+var css$1 = ".BeforeAfter-module_sliderStart__2C5cN {\n  background-color: white;\n  position: absolute;\n  z-index: 1;\n}\n\n.BeforeAfter-module_container__2Lm06 {\n  /* slider default position: 50%, spacing around labels in\n   react-compare-image: 5% each side, so default label max width\n   should be 40%. This is only a fallback. We should receive widths\n   from BeforeAfter.js */\n  --default-label-max-width: 40%;\n  /* label padding in react-compare-image is set to 20px left and right,\n   so we need to subtract the sum from max width */\n  --label-padding: 40px;\n  --wiggle-animation: 1.5s cubic-bezier(.36,.07,.19,.97) both;\n  --frame1pos: -8;\n  --frame2pos: 16;\n  --frame3pos: -32;\n  --frame4pos: 32;\n  --frame1px: calc(var(--frame1pos) * 1px);\n  --frame2px: calc(var(--frame2pos) * 1px);\n  --frame3px: calc(var(--frame3pos) * 1px);\n  --frame4px: calc(var(--frame4pos) * 1px);\n  --frame1percent: calc(var(--frame1pos) * 2.5%);\n  --frame2percent: calc(var(--frame2pos) * 2.5%);\n  --frame3percent: calc(var(--frame3pos) * 2.5%);\n  --frame4percent: calc(var(--frame4pos) * 2.5%);\n  /* in addition to the above variables, we receive --initial-rect-width\n   from BeforeAfter.js, which has no sensible default value */\n}\n\n/* With react-compare-image 2.0.4 (commit 7410d14), this selects the\n   slider */\n.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe div div:nth-child(3) {\n  animation: BeforeAfter-module_SliderLeftRightShake__2mcn5 var(--wiggle-animation);\n}\n\n/* With react-compare-image 2.0.4 (commit 7410d14), this selects the\n   before image */\n.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe div img:nth-child(2) {\n  animation: BeforeAfter-module_BeforeImageLeftRightShake__38m9V var(--wiggle-animation);\n}\n\n/* With react-compare-image 2.0.4 (commit 7410d14), this selects the\n   before label */\n.BeforeAfter-module_container__2Lm06 div div:nth-child(4) div {\n  max-width: calc(var(--before-label-max-width, var(--default-label-max-width)) -\n                  var(--label-padding));\n}\n\n/* With react-compare-image 2.0.4 (commit 7410d14), this selects the\n   after image */\n.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe div img:nth-child(1) {\n  animation: BeforeAfter-module_AfterImageLeftRightShake__3WMf1 var(--wiggle-animation);\n}\n\n/* With react-compare-image 2.0.4 (commit 7410d14), this selects the\n   after label */\n.BeforeAfter-module_container__2Lm06 div div:nth-child(5) div {\n  max-width: calc(var(--after-label-max-width, var(--default-label-max-width)) -\n                  var(--label-padding));\n}\n\n@keyframes BeforeAfter-module_BeforeImageLeftRightShake__38m9V {\n  10%, 90% {\n    clip: rect(auto, calc(var(--initial-rect-width) + var(--frame1px)), auto, auto);\n  }\n\n  20%, 80% {\n    clip: rect(auto, calc(var(--initial-rect-width) + var(--frame2px)), auto, auto);\n  }\n\n  30%, 50%, 70% {\n    clip: rect(auto, calc(var(--initial-rect-width) + var(--frame3px)), auto, auto);\n  }\n\n  40%, 60% {\n    clip: rect(auto, calc(var(--initial-rect-width) + var(--frame4px)), auto, auto);\n  }\n}\n\n@keyframes BeforeAfter-module_AfterImageLeftRightShake__3WMf1 {\n  10%, 90% {\n    clip: rect(auto, auto, auto, calc(var(--initial-rect-width) + var(--frame1px)));\n  }\n\n  20%, 80% {\n    clip: rect(auto, auto, auto, calc(var(--initial-rect-width) + var(--frame2px)));\n  }\n\n  30%, 50%, 70% {\n    clip: rect(auto, auto, auto, calc(var(--initial-rect-width) + var(--frame3px)));\n  }\n\n  40%, 60% {\n    clip: rect(auto, auto, auto, calc(var(--initial-rect-width) + var(--frame4px)));\n  }\n}\n\n@keyframes BeforeAfter-module_SliderLeftRightShake__2mcn5 {\n  10%, 90% {\n    transform: translate3d(var(--frame1percent), 0, 0);\n  }\n\n  20%, 80% {\n    transform: translate3d(var(--frame2percent), 0, 0);\n  }\n\n  30%, 50%, 70% {\n    transform: translate3d(var(--frame3percent), 0, 0);\n  }\n\n  40%, 60% {\n    transform: translate3d(var(--frame4percent), 0, 0);\n  }\n}\n";
+var styles$1 = {"sliderStart":"BeforeAfter-module_sliderStart__2C5cN","container":"BeforeAfter-module_container__2Lm06","wiggle":"BeforeAfter-module_wiggle__3nVSe","SliderLeftRightShake":"BeforeAfter-module_SliderLeftRightShake__2mcn5","BeforeImageLeftRightShake":"BeforeAfter-module_BeforeImageLeftRightShake__38m9V","AfterImageLeftRightShake":"BeforeAfter-module_AfterImageLeftRightShake__3WMf1"};
+styleInject(css$1);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function BeforeAfter(_ref) {
+  var _cx;
+
+  var state = _ref.state,
+      before_id = _ref.before_id,
+      before_label = _ref.before_label,
+      after_id = _ref.after_id,
+      after_label = _ref.after_label,
+      initial_slider_position = _ref.initial_slider_position,
+      slider = _ref.slider,
+      slider_color = _ref.slider_color,
+      slider_handle = _ref.slider_handle,
+      contentElementId = _ref.contentElementId;
+  var beforeAfterRef = useRef();
+  var current = beforeAfterRef.current;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      wiggled = _useState2[0],
+      setWiggled = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      wiggle = _useState4[0],
+      setWiggle = _useState4[1];
+
+  useEffect(function () {
+    var node = current;
+
+    if (node) {
+      // Only wiggle once per element, when it is active for the first
+      // time
+      var shouldWiggle = !wiggled && state === 'active';
+      setWiggle(shouldWiggle); // If wiggle was just set, mark this element as one that already
+      // wiggled
+
+      !wiggled && setWiggled(shouldWiggle);
+    }
+  }, [state, current]);
+  var beforeImage = useFile({
+    collectionName: 'imageFiles',
+    permaId: before_id
+  });
+  var afterImage = useFile({
+    collectionName: 'imageFiles',
+    permaId: after_id
+  });
+
+  var _useEditorSelection = useEditorSelection({
+    id: contentElementId,
+    type: 'contentElement'
+  }),
+      isSelected = _useEditorSelection.isSelected;
+
+  var beforeImageUrl = beforeImage && beforeImage.urls.large;
+  var beforeImageAlt = beforeImage && beforeImage.configuration.alt;
+  var afterImageUrl = afterImage && afterImage.urls.large;
+  var afterImageAlt = afterImage && afterImage.configuration.alt;
+  var initialSliderPos = initial_slider_position / 100;
+  var opts = {}; // Transform slider-related props into the format that
+  // react-compare-image needs
+
+  if (!slider) {
+    opts = _objectSpread({}, opts, {
+      sliderLineWidth: 0,
+      handle: React.createElement(React.Fragment, null)
+    });
+  }
+
+  if (slider) {
+    if (!slider_handle) {
+      opts = _objectSpread({}, opts, {
+        handle: React.createElement(React.Fragment, null)
+      });
+    }
+
+    if (slider_color) {
+      opts = _objectSpread({}, opts, {
+        sliderLineColor: slider_color
+      });
+    }
+  }
+
+  if (current) {
+    // Size labels according to initial slider position. Unit is %,
+    // left and right spacing is 5%, so we subtract 10. 90 = 100 - 10.
+    var beforeLabelWidth = initial_slider_position - 10;
+    var afterLabelWidth = 90 - initial_slider_position; // Compute initial slider coordinate and pass it as a CSS
+    // variable, so that before/after images can wiggle together with
+    // the slider
+
+    var containerWidth = current.getBoundingClientRect().width;
+    var initialRectWidth = initialSliderPos * containerWidth;
+    current.style.setProperty('--before-label-max-width', beforeLabelWidth + '%');
+    current.style.setProperty('--after-label-max-width', afterLabelWidth + '%');
+    current.style.setProperty('--initial-rect-width', initialRectWidth + 'px');
+  }
+
+  return React.createElement("div", {
+    ref: beforeAfterRef,
+    className: classNames((_cx = {}, _defineProperty(_cx, styles$1.selected, isSelected), _defineProperty(_cx, styles$1.wiggle, wiggle), _cx), styles$1.container)
+  }, React.createElement(InitialSliderPositionIndicator, {
+    parentSelected: isSelected,
+    position: initial_slider_position
+  }), React.createElement(ReactCompareImage, Object.assign({
+    leftImage: beforeImageUrl,
+    rightImage: afterImageUrl,
+    leftImageLabel: before_label,
+    rightImageLabel: after_label,
+    leftImageAlt: beforeImageAlt,
+    rightImageAlt: afterImageAlt,
+    sliderPositionPercentage: initialSliderPos,
+    onSliderPositionChange: function onSliderPositionChange() {
+      return setWiggle(false);
+    }
+  }, opts)));
+}
+
+function InitialSliderPositionIndicator(_ref2) {
+  var parentSelected = _ref2.parentSelected,
+      position = _ref2.position;
+  var indicatorWidth = '2px';
+  var indicatorStyles = {
+    left: "calc(".concat(position, "% - ").concat(indicatorWidth, "/2)"),
+    width: "".concat(indicatorWidth),
+    height: '100%',
+    borderLeft: '1px solid black',
+    borderRight: '1px solid black'
+  }; // In case this element is selected, and its initial slider position
+  // is not in the middle, we show InitialSliderPositionIndicator
+
+  return parentSelected && position !== 50 ? React.createElement("div", {
+    className: styles$1.sliderStart,
+    style: indicatorStyles
+  }) : '';
+}
+
+var css$2 = ".InlineBeforeAfter-module_root__1f5oG {\n  position: relative;\n  margin: 0 auto;\n}\n";
+var styles$2 = {"root":"InlineBeforeAfter-module_root__1f5oG"};
+styleInject(css$2);
+
+function InlineBeforeAfter(props) {
+  var ref = useRef();
+  var onScreen = useOnScreen(ref, '-50% 0px -50% 0px');
+  return React.createElement("div", {
+    ref: ref,
+    className: styles$2.root
+  }, React.createElement(BeforeAfter, Object.assign({}, props.configuration, {
+    state: onScreen ? 'active' : 'inactive',
+    contentElementId: props.contentElementId
+  })));
+}
+
+frontend.contentElementTypes.register('inlineBeforeAfter', {
+  component: InlineBeforeAfter
+});
+
+var css$3 = ".InlineImage-module_root__3edeH {\n  position: relative;\n  margin-top: 1em;\n}\n\n.InlineImage-module_container__30JBC {\n  position: relative;\n  margin-top: 1em;\n}\n\n.InlineImage-module_spacer__2yTJT {\n  padding-top: 75%;\n}\n\n.InlineImage-module_inner__3WcPa {\n  border: solid 2px #fff;\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n}\n";
+var styles$3 = {"root":"InlineImage-module_root__3edeH","container":"InlineImage-module_container__30JBC","spacer":"InlineImage-module_spacer__2yTJT","inner":"InlineImage-module_inner__3WcPa"};
+styleInject(css$3);
+
+function InlineImage(_ref) {
+  var configuration = _ref.configuration;
+  return React.createElement("div", {
+    className: classNames(styles$3.root)
+  }, React.createElement("div", {
+    className: styles$3.container
+  }, React.createElement("div", {
+    className: styles$3.spacer
+  }, React.createElement("div", {
+    className: styles$3.inner
+  }, React.createElement(Image, configuration)))), React.createElement(InlineCaption, {
+    text: configuration.caption
+  }));
+}
+
+frontend.contentElementTypes.register('inlineImage', {
+  component: InlineImage
+});
+
+var css$4 = ".InlineVideo-module_root__26uiY {\n  position: relative;\n  max-height: 98vh;\n}\n\n.InlineVideo-module_inner__3n7y4 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n}\n\n/* Timeline in native video controls is hidden in Storybook to prevent\n   Percy from detecting different loading progress as visual\n   change. See .storybook/preview-head.html file. */\n";
+var styles$4 = {"root":"InlineVideo-module_root__26uiY","inner":"InlineVideo-module_inner__3n7y4"};
+styleInject(css$4);
+
+function InlineVideo(_ref) {
+  var configuration = _ref.configuration;
+  var ref = useRef();
+  var onScreen = useOnScreen(ref, '-50% 0px -50% 0px');
+  return React.createElement("div", {
+    ref: ref,
+    className: classNames(styles$4.root)
+  }, React.createElement("div", {
+    style: {
+      paddingTop: configuration.wideFormat ? '41.15%' : '56.25%'
+    }
+  }, React.createElement("div", {
+    className: styles$4.inner
+  }, React.createElement(Video, Object.assign({}, configuration, {
+    state: onScreen ? 'active' : 'inactive',
+    interactive: true
+  })))));
+}
+
+frontend.contentElementTypes.register('inlineVideo', {
+  component: InlineVideo
+});
+
+var css$5 = ".SoundDisclaimer-module_soundDisclaimer__31hWh {\n  text-align: center;\n  border: 1px solid white;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: inherit;\n}\n\n.SoundDisclaimer-module_soundDisclaimer__31hWh:hover {\n  background: rgba(255, 255, 255, 0.25);\n}";
+var styles$5 = {"soundDisclaimer":"SoundDisclaimer-module_soundDisclaimer__31hWh"};
+styleInject(css$5);
+
+function SoundDisclaimer() {
+  var mediaSettings = useMediaSettings();
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  return React.createElement("div", {
+    className: classNames(styles$5.soundDisclaimer),
+    onClick: function onClick() {
+      return mediaSettings.setMuted(false);
+    }
+  }, React.createElement("p", {
+    dangerouslySetInnerHTML: {
+      __html: t('pageflow_scrolled.public.sound_disclaimer.help_text')
+    }
+  }));
+}
+
+frontend.contentElementTypes.register('soundDisclaimer', {
+  component: SoundDisclaimer
+});
+
+var css$6 = ".TextBlock-module_text__21Hk4 {\n  padding: 0;\n  margin: 1em 0;\n  text-shadow: none;\n}\n\n.TextBlock-module_dummy__2KicI {\n  opacity: 0.7;\n}\n\n.TextBlock-module_text__21Hk4 a {\n  color: #fff;\n  word-wrap: break-word;\n}\n\n.TextBlock-module_text__21Hk4 ol,\n.TextBlock-module_text__21Hk4 ul {\n  padding-left: 20px;\n}\n";
+var styles$6 = {"text":"TextBlock-module_text__21Hk4","dummy":"TextBlock-module_dummy__2KicI"};
+styleInject(css$6);
+
+function TextBlock(_ref) {
+  var configuration = _ref.configuration;
+  return React.createElement(Text, {
+    scaleCategory: "body"
+  }, React.createElement("div", {
+    className: classNames(styles$6.text, _defineProperty({}, styles$6.dummy, configuration.dummy)),
+    dangerouslySetInnerHTML: {
+      __html: configuration.children
+    }
+  }));
+}
+
+frontend.contentElementTypes.register('textBlock', {
+  component: TextBlock
+});
+
+var css$7 = ".VideoEmbed-module_VideoEmbed__3BUjc {\n  margin-bottom: 15px;\n}\n\n.VideoEmbed-module_embedWrapper__1kG8A {\n  overflow:hidden;\n  position:relative;\n  background: black;\n  padding-top: 56.25%;\n}\n\n.VideoEmbed-module_wide__1IwOr {\n  padding-top: 56.25%;\n}\n\n.VideoEmbed-module_narrow__2jLxH {\n  padding-top: 75%;\n}\n\n.VideoEmbed-module_square__2ljo8 {\n  padding-top: 100%;\n}\n\n.VideoEmbed-module_portrait__1ttPj {\n  padding-top: 177.77%;\n}\n\n.VideoEmbed-module_embedPlayer__54NKG {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n}\n";
+var styles$7 = {"VideoEmbed":"VideoEmbed-module_VideoEmbed__3BUjc","embedWrapper":"VideoEmbed-module_embedWrapper__1kG8A","wide":"VideoEmbed-module_wide__1IwOr","narrow":"VideoEmbed-module_narrow__2jLxH","square":"VideoEmbed-module_square__2ljo8","portrait":"VideoEmbed-module_portrait__1ttPj","embedPlayer":"VideoEmbed-module_embedPlayer__54NKG"};
+styleInject(css$7);
+
+function VideoEmbed(_ref) {
+  var configuration = _ref.configuration;
+
+  // base64-encoded configuration
+  // => make component re-render on configuration changes
+  function keyFromConfiguration(config) {
+    return btoa(JSON.stringify(config));
+  }
+
+  return React.createElement("div", {
+    className: styles$7.VideoEmbed
+  }, React.createElement("div", {
+    className: classNames(styles$7.embedWrapper, styles$7[configuration.aspectRatio])
+  }, React.createElement(ReactPlayer, {
+    className: styles$7.embedPlayer,
+    key: keyFromConfiguration(configuration),
+    url: configuration.videoSource,
+    playing: true,
+    light: true,
+    width: "100%",
+    height: "100%",
+    controls: !configuration.hideControls,
+    config: {
+      youtube: {
+        playerVars: {
+          showinfo: !configuration.hideInfo
+        }
+      },
+      vimeo: {
+        playerOptions: {
+          byline: !configuration.hideInfo
+        }
+      }
+    }
+  })), React.createElement(InlineCaption, {
+    text: configuration.caption
+  }));
+}
+
+frontend.contentElementTypes.register('videoEmbed', {
+  component: VideoEmbed
+});
+
+var css$8 = "\n.ExternalLink-module_hidden__3jer0 {\n  display: none;\n}\n\n.ExternalLink-module_link_item__Blypv {\n  width: 45%;\n  max-width: 45%;\n  vertical-align: top;\n  margin: 2% auto;\n  background-color: #fff; \n  color: rgba(20,20,20,0.8);\n  text-decoration: none;\n  transition: 0.3s;\n}\n\n\n.ExternalLink-module_link_item__Blypv.ExternalLink-module_invert__1zrgN {\n  background-color: rgba(20,20,20,0.8);;\n  color: #fff;\n}\n\n.ExternalLink-module_link_item__Blypv.ExternalLink-module_layout_center__3NRpQ {\n  width: 29%;\n  max-width: 29%;\n  \n}\n\n.ExternalLink-module_link_item__Blypv:hover {\n  background-color: #141414;\n  color: #fff;\n  -webkit-transform: scale(1.05);\n  -moz-transform: scale(1.05);\n  -ms-transform: scale(1.05);\n  -o-transform: scale(1.05);\n  transform: scale(1.05);\n}\n\n.ExternalLink-module_link_item__Blypv:hover .ExternalLink-module_link_title__FZJ-0 {\n  text-decoration: underline;\n}\n\n.ExternalLink-module_link_thumbnail__2_BHq {\n  width: auto;\n  background-repeat: no-repeat;\n  background-size: cover;\n  padding-top: 56.25%;\n  position: relative;\n\n}\n\n.ExternalLink-module_link_details__lRhKU {\n  margin: 20px;\n}\n\n.ExternalLink-module_link_details__lRhKU > .ExternalLink-module_link_title__FZJ-0 {\n  font-size: 1.2em;\n  font-weight: bold;\n  margin-bottom: 20px;\n}\n\n.ExternalLink-module_link_details__lRhKU > .ExternalLink-module_link_desc__3fSe1 {\n\n}\n\n.ExternalLink-module_link_details__lRhKU > p {\n  width: 100%;\n  white-space: normal;\n  line-height: 1.3em;\n}\n\n.ExternalLink-module_tooltip__18MpC {\n  position: absolute;\n  left: 50%;\n  top: 80px;\n  width: 180px;\n  padding: 5px;\n  margin-left: -95px;\n  background-color: #444;\n  color: #fff;\n  border: solid 1px #fff;\n  opacity: 0.9;\n  font-size: 13px;\n  text-align: center;\n  white-space: normal;\n}\n\n.ExternalLink-module_tooltip__18MpC > span {\n  display: block;\n  color: #fff;\n  text-decoration: underline;\n}";
+var styles$8 = {"hidden":"ExternalLink-module_hidden__3jer0","link_item":"ExternalLink-module_link_item__Blypv","invert":"ExternalLink-module_invert__1zrgN","layout_center":"ExternalLink-module_layout_center__3NRpQ","link_title":"ExternalLink-module_link_title__FZJ-0","link_thumbnail":"ExternalLink-module_link_thumbnail__2_BHq","link_details":"ExternalLink-module_link_details__lRhKU","link_desc":"ExternalLink-module_link_desc__3fSe1","tooltip":"ExternalLink-module_tooltip__18MpC"};
+styleInject(css$8);
+
+function ExternalLink(props) {
+  var _classNames;
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      hideTooltip = _useState2[0],
+      setHideTooltip = _useState2[1];
+
+  var _props$sectionProps = props.sectionProps,
+      layout = _props$sectionProps.layout,
+      invert = _props$sectionProps.invert;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var isInEditor = function isInEditor() {
+    return window.frameElement != undefined && window.location.pathname.includes('/editor/entries/');
+  };
+
+  var onTooltipClick = function onTooltipClick() {
+    window.open(props.url, '_blank');
+    setHideTooltip(true);
+  };
+
+  var onClick = function onClick(event) {
+    if (props.open_in_new_tab == false && isInEditor()) {
+      setHideTooltip(false);
+      event.preventDefault();
+    }
+  };
+
+  var onMouseLeave = function onMouseLeave() {
+    setHideTooltip(true);
+  };
+
+  return React.createElement("a", {
+    className: classNames(styles$8.link_item, (_classNames = {}, _defineProperty(_classNames, styles$8.invert, invert), _defineProperty(_classNames, styles$8.layout_center, layout == 'center'), _classNames)),
+    href: props.url || '',
+    onClick: onClick,
+    onMouseLeave: onMouseLeave,
+    target: props.open_in_new_tab == '1' ? '_blank' : '_self'
+  }, React.createElement("div", {
+    className: styles$8.link_thumbnail
+  }, React.createElement(Image, {
+    id: props.thumbnail
+  })), React.createElement("div", {
+    className: styles$8.link_details
+  }, React.createElement("p", {
+    className: styles$8.link_title
+  }, props.title), React.createElement("p", {
+    className: styles$8.link_desc,
+    dangerouslySetInnerHTML: {
+      __html: props.description
+    }
+  })), React.createElement("div", {
+    className: classNames(_defineProperty({}, styles$8.hidden, hideTooltip), styles$8.tooltip),
+    onClick: onTooltipClick
+  }, t('pageflow_scrolled.public.external_link.open_in_new_tab_message'), React.createElement("span", {
+    target: "_blank"
+  }, t('pageflow_scrolled.public.external_link.open_in_new_tab'))));
+}
+
+var css$9 = ".ExternalLinkList-module_ext_links_container__16IIo{\n  display: flex;\n  flex-wrap: wrap;\n  border-collapse: separate;\n  border-spacing: 10px;\n  min-height: 240px;\n  width: auto;\n  height: auto;\n  pointer-events: all;\n  position: relative;\n  -webkit-transition: opacity 0.5s;\n  -moz-transition: opacity 0.5s;\n  transition: opacity 0.5s;\n  transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1);\n  transition-duration: 0ms;\n}\n";
+var styles$9 = {"ext_links_container":"ExternalLinkList-module_ext_links_container__16IIo"};
+styleInject(css$9);
+
+function ExternalLinkList(props) {
+  var linkList = props.configuration.links || [];
+  return React.createElement("div", {
+    className: styles$9.ext_links_container
+  }, linkList.map(function (link, index) {
+    return React.createElement(ExternalLink, Object.assign({}, link, {
+      key: link.id,
+      sectionProps: props.sectionProps
+    }));
+  }));
+}
+
+frontend.contentElementTypes.register('externalLinkList', {
+  component: ExternalLinkList
+});
+
+var css$a = ".DataWrapperChart-module_container__2eZ15 {\n  min-height: 200px;\n  height: 400px;\n}\n\n.DataWrapperChart-module_container__2eZ15 > iframe {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  top: 0;\n}";
+var styles$a = {"container":"DataWrapperChart-module_container__2eZ15"};
+styleInject(css$a);
+
+function DataWrapperChart(_ref) {
+  var configuration = _ref.configuration;
+  var ref = useRef();
+  var onScreen = useOnScreen(ref, '25% 0px 25% 0px'); // remove url protocol, so that it is selected by the browser itself
+
+  var srcURL = '';
+
+  if (configuration.url && onScreen) {
+    srcURL = configuration.url.replace(/http(s|):/, '');
+  }
+
+  return React.createElement("div", {
+    ref: ref,
+    className: styles$a.container
+  }, React.createElement("iframe", {
+    src: srcURL,
+    scrolling: "auto",
+    frameBorder: "0",
+    align: "aus",
+    allowFullScreen: true,
+    mozallowfullscreen: "true",
+    webkitallowfullscreen: "true"
+  }));
+}
+
+frontend.contentElementTypes.register('dataWrapperChart', {
+  component: DataWrapperChart
+});