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
});