pageflow 15.1.1 → 15.3.0

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

@@ -0,0 +1 @@
+.Heading-module_root__33TFw{margin-top:.2em;margin-bottom:0;padding-top:.3em}@media (orientation:landscape){.Heading-module_first__1PMJX{padding-top:25%}}.BeforeAfter-module_sliderStart__2C5cN{background-color:#fff;position:absolute;z-index:1}.BeforeAfter-module_container__2Lm06{--frame1pos:-8;--frame2pos:16;--frame3pos:-32;--frame4pos:32;--frame1px:calc(var(--frame1pos)*1px);--frame2px:calc(var(--frame2pos)*1px);--frame3px:calc(var(--frame3pos)*1px);--frame4px:calc(var(--frame4pos)*1px)}.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe div div:nth-child(3){-webkit-animation:BeforeAfter-module_SliderLeftRightShake__2mcn5 1.5s cubic-bezier(.36,.07,.19,.97) both;animation:BeforeAfter-module_SliderLeftRightShake__2mcn5 1.5s cubic-bezier(.36,.07,.19,.97) both}.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe div img:nth-child(2){-webkit-animation:BeforeAfter-module_BeforeImageLeftRightShake__38m9V 1.5s cubic-bezier(.36,.07,.19,.97) both;animation:BeforeAfter-module_BeforeImageLeftRightShake__38m9V 1.5s cubic-bezier(.36,.07,.19,.97) both}.BeforeAfter-module_container__2Lm06 div div:nth-child(4) div{transition:opacity .1s ease-out .3s!important}.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe div img:first-child{-webkit-animation:BeforeAfter-module_AfterImageLeftRightShake__3WMf1 1.5s cubic-bezier(.36,.07,.19,.97) both;animation:BeforeAfter-module_AfterImageLeftRightShake__3WMf1 1.5s cubic-bezier(.36,.07,.19,.97) both}.BeforeAfter-module_container__2Lm06 div div:nth-child(5) div{transition:opacity .1s ease-out .3s!important}@-webkit-keyframes BeforeAfter-module_BeforeImageLeftRightShake__38m9V{10%,90%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame1px)),auto,auto)}20%,80%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame2px)),auto,auto)}30%,50%,70%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame3px)),auto,auto)}40%,60%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame4px)),auto,auto)}}@keyframes BeforeAfter-module_BeforeImageLeftRightShake__38m9V{10%,90%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame1px)),auto,auto)}20%,80%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame2px)),auto,auto)}30%,50%,70%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame3px)),auto,auto)}40%,60%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame4px)),auto,auto)}}@-webkit-keyframes BeforeAfter-module_AfterImageLeftRightShake__3WMf1{10%,90%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame1px)))}20%,80%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame2px)))}30%,50%,70%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame3px)))}40%,60%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame4px)))}}@keyframes BeforeAfter-module_AfterImageLeftRightShake__3WMf1{10%,90%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame1px)))}20%,80%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame2px)))}30%,50%,70%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame3px)))}40%,60%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame4px)))}}@-webkit-keyframes BeforeAfter-module_SliderLeftRightShake__2mcn5{10%,90%{transform:translate3d(-20%,0,0)}20%,80%{transform:translate3d(40%,0,0)}30%,50%,70%{transform:translate3d(-80%,0,0)}40%,60%{transform:translate3d(80%,0,0)}}@keyframes BeforeAfter-module_SliderLeftRightShake__2mcn5{10%,90%{transform:translate3d(-20%,0,0)}20%,80%{transform:translate3d(40%,0,0)}30%,50%,70%{transform:translate3d(-80%,0,0)}40%,60%{transform:translate3d(80%,0,0)}}.SoundDisclaimer-module_soundDisclaimer__31hWh{text-align:center;border:1px solid;border-radius:4px;cursor:pointer;font-size:inherit}.SoundDisclaimer-module_soundDisclaimer__31hWh:hover{background:hsla(0,0%,100%,.25)}.TextBlock-module_text__21Hk4 h2,.TextBlock-module_text__21Hk4 li,.TextBlock-module_text__21Hk4 p{margin:1em 0 0}.TextBlock-module_text__21Hk4 a{color:currentColor;word-wrap:break-word}.TextBlock-module_text__21Hk4 ol,.TextBlock-module_text__21Hk4 ul{margin:0;padding-left:20px}.TextBlock-module_text__21Hk4 blockquote{padding:.5em 1em .5em 2em;margin:1em 0 0 .5em;position:relative}.TextBlock-module_text__21Hk4 blockquote:before{content:"\201C";font-size:3em;font-weight:700;color:#aaa;position:absolute;top:0;left:0;line-height:1em}.VideoEmbed-module_embedPlayer__54NKG{background-color:#000;position:absolute;top:0;left:0;bottom:0;right:0}.ExternalLink-module_hidden__3jer0{display:none}.ExternalLink-module_link_item__Blypv{width:45%;max-width:45%;vertical-align:top;margin:2% auto;background-color:#fff;color:#000;text-decoration:none;transition:transform .3s}.ExternalLink-module_link_item__Blypv.ExternalLink-module_invert__1zrgN{background-color:#222;color:#fff}.ExternalLink-module_link_item__Blypv.ExternalLink-module_layout_center__3NRpQ{width:29%;max-width:29%}.ExternalLink-module_link_item__Blypv:hover{transform:scale(1.05)}.ExternalLink-module_link_item__Blypv:hover .ExternalLink-module_link_title__FZJ-0{text-decoration:underline}.ExternalLink-module_link_thumbnail__2_BHq{width:auto;background-repeat:no-repeat;background-size:cover;padding-top:56.25%;position:relative}.ExternalLink-module_link_details__lRhKU{margin:20px}.ExternalLink-module_link_details__lRhKU>.ExternalLink-module_link_title__FZJ-0{font-size:1.2em;font-weight:700;margin-bottom:20px}.ExternalLink-module_link_details__lRhKU>p{width:100%;white-space:normal;line-height:1.3em}.ExternalLink-module_tooltip__18MpC{position:absolute;left:50%;top:80px;width:180px;padding:5px;margin-left:-95px;background-color:#444;color:#fff;border:1px solid #fff;opacity:.9;font-size:13px;text-align:center;white-space:normal}.ExternalLink-module_tooltip__18MpC>span{display:block;color:#fff;text-decoration:underline}.ExternalLinkList-module_ext_links_container__16IIo{display:flex;flex-wrap:wrap;border-collapse:separate;border-spacing:10px;min-height:240px;width:auto;height:auto;pointer-events:all;position:relative;transition:opacity .5s;transition-timing-function:cubic-bezier(.1,.57,.1,1);transition-duration:0ms}.DataWrapperChart-module_container__2eZ15{min-height:200px;background-color:rgba(0,0,0,.5)}.DataWrapperChart-module_container__2eZ15>iframe{width:100%;height:100%;position:relative;top:0}

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

@@ -0,0 +1,878 @@
+import { useContentElementConfigurationUpdate, useI18n, withShadowClassName, Text, EditableInlineText, frontend, useFile, useContentElementEditorState, ViewportDependentPillarBoxes, useContentElementLifecycle, Figure, Image, usePlayerState, MediaInteractionTracking, VideoPlayer, VideoPlayerControls, AudioPlayer, AudioPlayerControls, EditableText, useDarkBackground } from 'pageflow-scrolled/frontend';
+import React, { useRef, useState, useEffect } from 'react';
+import classNames from 'classnames';
+import ReactCompareImage from 'react-compare-image';
+import { media } from 'pageflow/frontend';
+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;
+}
+
+var styles = {"root":"Heading-module_root__33TFw","first":"Heading-module_first__1PMJX"};
+
+function Heading(_ref) {
+  var configuration = _ref.configuration,
+      sectionProps = _ref.sectionProps;
+  var level = configuration.level || sectionProps.sectionIndex;
+  var firstSectionInEntry = level === 0;
+  var updateConfiguration = useContentElementConfigurationUpdate();
+
+  var _useI18n = useI18n({
+    locale: 'ui'
+  }),
+      t = _useI18n.t;
+
+  var legacyValue = configuration.children;
+  return (
+    /*#__PURE__*/
+    React.createElement("h1", {
+      className: classNames(styles.root, _defineProperty({}, styles.first, firstSectionInEntry), _defineProperty({}, withShadowClassName, !sectionProps.invert))
+    },
+    /*#__PURE__*/
+    React.createElement(Text, {
+      scaleCategory: firstSectionInEntry ? 'h1' : 'h2',
+      inline: true
+    },
+    /*#__PURE__*/
+    React.createElement(EditableInlineText, {
+      value: configuration.value,
+      defaultValue: legacyValue,
+      placeholder: t('pageflow_scrolled.inline_editing.type_heading'),
+      onChange: function onChange(value) {
+        return updateConfiguration({
+          value: value
+        });
+      }
+    })))
+  );
+}
+
+frontend.contentElementTypes.register('heading', {
+  component: Heading
+});
+
+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 _objectSpread2(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 _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) 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 _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+
+  return arr2;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(n);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+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"};
+
+var placeholderForBeforeImage = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQwIiBoZWlnaHQ9IjQwMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDwhLS0gQ3JlYXRlZCB3aXRoIE1ldGhvZCBEcmF3IC0gaHR0cDovL2dpdGh1Yi5jb20vZHVvcGl4ZWwvTWV0aG9kLURyYXcvIC0tPgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9IiMzZDVhODAiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDUiIHdpZHRoPSI2NDIiIHk9Ii0xIiB4PSItMSIvPgogIDxnIGRpc3BsYXk9Im5vbmUiIG92ZXJmbG93PSJ2aXNpYmxlIiB5PSIwIiB4PSIwIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiBpZD0iY2FudmFzR3JpZCI+CiAgIDxyZWN0IGZpbGw9InVybCgjZ3JpZHBhdHRlcm4pIiBzdHJva2Utd2lkdGg9IjAiIHk9IjAiIHg9IjAiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiLz4KICA8L2c+CiA8L2c+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiA8L2c+Cjwvc3ZnPg==';
+var placeholderForAfterImage = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQwIiBoZWlnaHQ9IjQwMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDwhLS0gQ3JlYXRlZCB3aXRoIE1ldGhvZCBEcmF3IC0gaHR0cDovL2dpdGh1Yi5jb20vZHVvcGl4ZWwvTWV0aG9kLURyYXcvIC0tPgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9IiM5OGMxZDkiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDUiIHdpZHRoPSI2NDIiIHk9Ii0xIiB4PSItMSIvPgogIDxnIGRpc3BsYXk9Im5vbmUiIG92ZXJmbG93PSJ2aXNpYmxlIiB5PSIwIiB4PSIwIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiBpZD0iY2FudmFzR3JpZCI+CiAgIDxyZWN0IGZpbGw9InVybCgjZ3JpZHBhdHRlcm4pIiBzdHJva2Utd2lkdGg9IjAiIHk9IjAiIHg9IjAiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiLz4KICA8L2c+CiA8L2c+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiA8L2c+Cjwvc3ZnPg==';
+var placeholderFile = {
+  width: 640,
+  height: 403
+};
+function BeforeAfter(_ref) {
+  var _cx;
+
+  var isActive = _ref.isActive,
+      isPrepared = _ref.isPrepared,
+      position = _ref.position,
+      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;
+  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 && isActive;
+      setWiggle(shouldWiggle); // If wiggle was just set, mark this element as one that already
+      // wiggled
+
+      !wiggled && setWiggled(shouldWiggle);
+    }
+  }, [isActive, current]);
+  var beforeImage = useFile({
+    collectionName: 'imageFiles',
+    permaId: before_id
+  });
+  var afterImage = useFile({
+    collectionName: 'imageFiles',
+    permaId: after_id
+  });
+
+  var _useContentElementEdi = useContentElementEditorState(),
+      isSelected = _useContentElementEdi.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 = _objectSpread2(_objectSpread2({}, opts), {}, {
+      sliderLineWidth: 0,
+      handle:
+      /*#__PURE__*/
+      React.createElement(React.Fragment, null)
+    });
+  }
+
+  if (slider) {
+    if (!slider_handle) {
+      opts = _objectSpread2(_objectSpread2({}, opts), {}, {
+        handle:
+        /*#__PURE__*/
+        React.createElement(React.Fragment, null)
+      });
+    }
+
+    if (slider_color) {
+      opts = _objectSpread2(_objectSpread2({}, opts), {}, {
+        sliderLineColor: slider_color
+      });
+    }
+  } //Since the slider wiggle only the first time, set the variable once for performance purpose.
+
+
+  useEffect(function () {
+    if (beforeAfterRef.current) {
+      // Compute initial slider coordinate and pass it as a CSS
+      // variable, so that before/after images can wiggle together with
+      // the slider
+      var containerWidth = beforeAfterRef.current.getBoundingClientRect().width;
+      var initialRectWidth = initialSliderPos * containerWidth;
+      beforeAfterRef.current.style.setProperty('--initial-rect-width', initialRectWidth + 'px');
+    }
+  }, [wiggled, initialSliderPos]);
+  return (
+    /*#__PURE__*/
+    React.createElement(ViewportDependentPillarBoxes, {
+      file: beforeImage || afterImage || placeholderFile,
+      position: position
+    },
+    /*#__PURE__*/
+    React.createElement("div", {
+      ref: beforeAfterRef,
+      className: classNames((_cx = {}, _defineProperty(_cx, styles$1.selected, isSelected), _defineProperty(_cx, styles$1.wiggle, wiggle), _cx), styles$1.container)
+    },
+    /*#__PURE__*/
+    React.createElement(InitialSliderPositionIndicator, {
+      parentSelected: isSelected,
+      position: initial_slider_position
+    }), renderCompareImage()))
+  );
+
+  function renderCompareImage() {
+    if (!isPrepared) {
+      return null;
+    }
+
+    return (
+      /*#__PURE__*/
+      React.createElement(ReactCompareImage, Object.assign({
+        leftImage: beforeImage ? beforeImageUrl : placeholderForBeforeImage,
+        rightImage: afterImage ? afterImageUrl : placeholderForAfterImage,
+        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 ?
+  /*#__PURE__*/
+  React.createElement("div", {
+    className: styles$1.sliderStart,
+    style: indicatorStyles
+  }) : '';
+}
+
+function InlineBeforeAfter(props) {
+  var _useContentElementLif = useContentElementLifecycle(),
+      isActive = _useContentElementLif.isActive,
+      isPrepared = _useContentElementLif.isPrepared;
+
+  return (
+    /*#__PURE__*/
+    React.createElement(BeforeAfter, Object.assign({}, props.configuration, {
+      isPrepared: isPrepared,
+      isActive: isActive
+    }))
+  );
+}
+
+frontend.contentElementTypes.register('inlineBeforeAfter', {
+  component: InlineBeforeAfter,
+  lifecycle: true
+});
+
+function InlineImage(_ref) {
+  var configuration = _ref.configuration;
+
+  var _useContentElementLif = useContentElementLifecycle(),
+      isPrepared = _useContentElementLif.isPrepared;
+
+  var imageFile = useFile({
+    collectionName: 'imageFiles',
+    permaId: configuration.id
+  });
+  return (
+    /*#__PURE__*/
+    React.createElement(Figure, {
+      caption: configuration.caption
+    },
+    /*#__PURE__*/
+    React.createElement(ViewportDependentPillarBoxes, {
+      file: imageFile,
+      aspectRatio: imageFile ? undefined : 0.75,
+      position: configuration.position,
+      opaque: !!configuration.caption
+    },
+    /*#__PURE__*/
+    React.createElement(Image, Object.assign({}, configuration, {
+      isPrepared: isPrepared,
+      structuredData: true,
+      variant: configuration.position === 'full' ? 'large' : 'medium'
+    }))))
+  );
+}
+
+frontend.contentElementTypes.register('inlineImage', {
+  component: InlineImage,
+  lifecycle: true
+});
+
+function InlineVideo(_ref) {
+  var sectionProps = _ref.sectionProps,
+      configuration = _ref.configuration;
+
+  var _usePlayerState = usePlayerState(),
+      _usePlayerState2 = _slicedToArray(_usePlayerState, 2),
+      playerState = _usePlayerState2[0],
+      playerActions = _usePlayerState2[1];
+
+  var _useContentElementEdi = useContentElementEditorState(),
+      isEditable = _useContentElementEdi.isEditable,
+      isSelected = _useContentElementEdi.isSelected;
+
+  var _useContentElementLif = useContentElementLifecycle({
+    onActivate: function onActivate() {
+      if (configuration.autoplay) {
+        playerActions.play();
+      }
+    },
+    onDeactivate: function onDeactivate() {
+      playerActions.fadeOutAndPause(400);
+    }
+  }),
+      isPrepared = _useContentElementLif.isPrepared;
+
+  var onPlayerClick = function onPlayerClick() {
+    if (isEditable && !isSelected) {
+      return;
+    }
+
+    if (!playerState.shouldPlay || media.muted) {
+      playerActions.playBlessed();
+    } else {
+      playerActions.pause();
+    }
+  };
+
+  return (
+    /*#__PURE__*/
+    React.createElement(Figure, {
+      caption: configuration.caption
+    },
+    /*#__PURE__*/
+    React.createElement(MediaInteractionTracking, {
+      playerState: playerState,
+      playerActions: playerActions
+    },
+    /*#__PURE__*/
+    React.createElement(VideoPlayer, {
+      isPrepared: isPrepared,
+      position: configuration.position,
+      controls: configuration.controls,
+      playerState: playerState,
+      playerActions: playerActions,
+      id: configuration.id,
+      posterId: configuration.posterId,
+      defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
+      quality: 'high',
+      playsInline: true,
+      atmoDuringPlayback: configuration.atmoDuringPlayback,
+      onClick: onPlayerClick
+    }),
+    /*#__PURE__*/
+    React.createElement(VideoPlayerControls, {
+      videoFilePermaId: configuration.id,
+      defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
+      playerState: playerState,
+      playerActions: playerActions,
+      configuration: configuration,
+      sectionProps: sectionProps
+    })))
+  );
+}
+
+frontend.contentElementTypes.register('inlineVideo', {
+  component: InlineVideo,
+  lifecycle: true
+});
+
+function InlineAudio(_ref) {
+  var sectionProps = _ref.sectionProps,
+      configuration = _ref.configuration;
+
+  var _usePlayerState = usePlayerState(),
+      _usePlayerState2 = _slicedToArray(_usePlayerState, 2),
+      playerState = _usePlayerState2[0],
+      playerActions = _usePlayerState2[1];
+
+  var _useContentElementEdi = useContentElementEditorState(),
+      isEditable = _useContentElementEdi.isEditable,
+      isSelected = _useContentElementEdi.isSelected;
+
+  var _useContentElementLif = useContentElementLifecycle({
+    onActivate: function onActivate() {
+      if (configuration.autoplay && !media.muted) {
+        playerActions.play();
+      }
+    },
+    onDeactivate: function onDeactivate() {
+      playerActions.pause();
+    }
+  }),
+      isPrepared = _useContentElementLif.isPrepared;
+
+  var onPlayerClick = function onPlayerClick() {
+    if (isEditable && !isSelected) {
+      return;
+    }
+
+    if (playerState.shouldPlay) {
+      playerActions.pause();
+    } else {
+      playerActions.playBlessed();
+    }
+  };
+
+  return (
+    /*#__PURE__*/
+    React.createElement(Figure, {
+      caption: configuration.caption
+    },
+    /*#__PURE__*/
+    React.createElement(AudioPlayer, {
+      isPrepared: isPrepared,
+      position: configuration.position,
+      controls: configuration.controls,
+      playerState: playerState,
+      playerActions: playerActions,
+      id: configuration.id,
+      posterId: configuration.posterId,
+      defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
+      quality: 'high',
+      playsInline: true,
+      atmoDuringPlayback: configuration.atmoDuringPlayback,
+      onClick: onPlayerClick
+    }),
+    /*#__PURE__*/
+    React.createElement(AudioPlayerControls, {
+      audioFilePermaId: configuration.id,
+      defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
+      playerState: playerState,
+      playerActions: playerActions,
+      configuration: configuration,
+      sectionProps: sectionProps
+    }))
+  );
+}
+
+frontend.contentElementTypes.register('inlineAudio', {
+  component: InlineAudio,
+  lifecycle: true
+});
+
+var styles$2 = {"soundDisclaimer":"SoundDisclaimer-module_soundDisclaimer__31hWh"};
+
+function SoundDisclaimer() {
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: classNames(styles$2.soundDisclaimer),
+      onClick: function onClick() {
+        return media.mute(false);
+      }
+    },
+    /*#__PURE__*/
+    React.createElement("p", {
+      dangerouslySetInnerHTML: {
+        __html: t('pageflow_scrolled.public.sound_disclaimer.help_text')
+      }
+    }))
+  );
+}
+
+frontend.contentElementTypes.register('soundDisclaimer', {
+  component: SoundDisclaimer
+});
+
+var styles$3 = {"text":"TextBlock-module_text__21Hk4"};
+
+function TextBlock(props) {
+  var updateConfiguration = useContentElementConfigurationUpdate();
+
+  var _useI18n = useI18n({
+    locale: 'ui'
+  }),
+      t = _useI18n.t;
+
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: styles$3.text
+    },
+    /*#__PURE__*/
+    React.createElement(EditableText, {
+      value: props.configuration.value,
+      contentElementId: props.contentElementId,
+      placeholder: t('pageflow_scrolled.inline_editing.type_text'),
+      onChange: function onChange(value) {
+        return updateConfiguration({
+          value: value
+        });
+      }
+    }))
+  );
+}
+
+frontend.contentElementTypes.register('textBlock', {
+  component: TextBlock,
+  customSelectionRect: true
+});
+
+var styles$4 = {"VideoEmbed":"VideoEmbed-module_VideoEmbed__3BUjc","embedPlayer":"VideoEmbed-module_embedPlayer__54NKG"};
+
+var aspectRatios = {
+  wide: 0.5625,
+  narrow: 0.75,
+  square: 1,
+  portrait: 1.7777
+};
+function VideoEmbed(_ref) {
+  var configuration = _ref.configuration;
+
+  var _useContentElementLif = useContentElementLifecycle(),
+      isPrepared = _useContentElementLif.isPrepared;
+
+  var _useContentElementEdi = useContentElementEditorState(),
+      isEditable = _useContentElementEdi.isEditable,
+      isSelected = _useContentElementEdi.isSelected; // base64-encoded configuration
+  // => make component re-render on configuration changes
+
+
+  function keyFromConfiguration(config) {
+    return btoa(JSON.stringify(config));
+  }
+
+  function renderPlayer() {
+    if (!isPrepared) {
+      return null;
+    }
+
+    return (
+      /*#__PURE__*/
+      React.createElement(ReactPlayer, {
+        className: styles$4.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
+            }
+          }
+        }
+      })
+    );
+  }
+
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: styles$4.VideoEmbed,
+      style: {
+        pointerEvents: isEditable && !isSelected ? 'none' : undefined
+      }
+    },
+    /*#__PURE__*/
+    React.createElement(Figure, {
+      caption: configuration.caption
+    },
+    /*#__PURE__*/
+    React.createElement(ViewportDependentPillarBoxes, {
+      aspectRatio: aspectRatios[configuration.aspectRatio || 'wide'],
+      position: configuration.position,
+      opaque: !!configuration.caption
+    }, renderPlayer())))
+  );
+}
+
+frontend.contentElementTypes.register('videoEmbed', {
+  component: VideoEmbed,
+  lifecycle: true
+});
+
+var styles$5 = {"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"};
+
+function ExternalLink(props) {
+  var _classNames2;
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      hideTooltip = _useState2[0],
+      setHideTooltip = _useState2[1];
+
+  var layout = props.sectionProps.layout;
+
+  var _useI18n = useI18n({
+    locale: 'ui'
+  }),
+      t = _useI18n.t;
+
+  var _useContentElementEdi = useContentElementEditorState(),
+      isEditable = _useContentElementEdi.isEditable,
+      isSelected = _useContentElementEdi.isSelected;
+
+  var onClick = function onClick(event) {
+    if (isEditable) {
+      if (!props.open_in_new_tab || !isSelected) {
+        event.preventDefault();
+      }
+
+      if (!props.open_in_new_tab && isSelected) {
+        setHideTooltip(false);
+      }
+    }
+  };
+
+  var onMouseLeave = function onMouseLeave() {
+    setHideTooltip(true);
+  };
+
+  function renderNewTabTooltip() {
+    if (isEditable) {
+      var onTooltipClick = function onTooltipClick() {
+        window.open(props.url, '_blank');
+        setHideTooltip(true);
+      };
+
+      return (
+        /*#__PURE__*/
+        React.createElement("div", {
+          className: classNames(_defineProperty({}, styles$5.hidden, hideTooltip), styles$5.tooltip),
+          onClick: onTooltipClick
+        }, t('pageflow_scrolled.inline_editing.external_links.open_in_new_tab_message'),
+        /*#__PURE__*/
+        React.createElement("span", null, t('pageflow_scrolled.inline_editing.external_links.open_in_new_tab')))
+      );
+    }
+  }
+
+  return (
+    /*#__PURE__*/
+    React.createElement("a", {
+      className: classNames(styles$5.link_item, (_classNames2 = {}, _defineProperty(_classNames2, styles$5.invert, props.invert), _defineProperty(_classNames2, styles$5.layout_center, layout === 'center'), _classNames2)),
+      href: props.url || 'about:blank',
+      onClick: onClick,
+      onMouseLeave: onMouseLeave,
+      target: props.open_in_new_tab ? '_blank' : '_self'
+    },
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: styles$5.link_thumbnail
+    },
+    /*#__PURE__*/
+    React.createElement(Image, {
+      id: props.thumbnail,
+      isPrepared: props.isPrepared,
+      variant: "linkThumbnailLarge"
+    })),
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: styles$5.link_details
+    },
+    /*#__PURE__*/
+    React.createElement("p", {
+      className: styles$5.link_title
+    }, props.title),
+    /*#__PURE__*/
+    React.createElement("p", {
+      className: styles$5.link_desc
+    }, props.description)), renderNewTabTooltip())
+  );
+}
+
+var styles$6 = {"ext_links_container":"ExternalLinkList-module_ext_links_container__16IIo"};
+
+function ExternalLinkList(props) {
+  var linkList = props.configuration.links || [];
+
+  var _useContentElementLif = useContentElementLifecycle(),
+      isPrepared = _useContentElementLif.isPrepared;
+
+  var darkBackground = useDarkBackground();
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: styles$6.ext_links_container
+    }, linkList.map(function (link, index) {
+      return (
+        /*#__PURE__*/
+        React.createElement(ExternalLink, Object.assign({}, link, {
+          key: link.id,
+          invert: !darkBackground,
+          sectionProps: props.sectionProps,
+          isPrepared: isPrepared
+        }))
+      );
+    }))
+  );
+}
+
+frontend.contentElementTypes.register('externalLinkList', {
+  component: ExternalLinkList,
+  lifecycle: true
+});
+
+function useIframeHeight(url) {
+  var _useState = useState('400px'),
+      _useState2 = _slicedToArray(_useState, 2),
+      height = _useState2[0],
+      setHeight = _useState2[1];
+
+  useEffect(function () {
+    window.addEventListener('message', receive);
+
+    function receive(event) {
+      if (typeof event.data['datawrapper-height'] !== 'undefined') {
+        for (var chartId in event.data['datawrapper-height']) {
+          if (url.indexOf(chartId) > -1) {
+            setHeight(event.data['datawrapper-height'][chartId] + 'px');
+          }
+        }
+      }
+    }
+
+    return function () {
+      return window.removeEventListener('message', receive);
+    };
+  }, [url]);
+  return height;
+}
+
+var styles$7 = {"container":"DataWrapperChart-module_container__2eZ15"};
+
+function DataWrapperChart(_ref) {
+  var configuration = _ref.configuration;
+
+  var _useContentElementLif = useContentElementLifecycle(),
+      isPrepared = _useContentElementLif.isPrepared;
+
+  var _useContentElementEdi = useContentElementEditorState(),
+      isEditable = _useContentElementEdi.isEditable,
+      isSelected = _useContentElementEdi.isSelected;
+
+  var height = useIframeHeight(configuration.url); // remove url protocol, so that it is selected by the browser itself
+
+  var srcURL = '';
+
+  if (configuration.url && isPrepared) {
+    srcURL = configuration.url.replace(/http(s|):/, '');
+  }
+
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: styles$7.container,
+      style: {
+        pointerEvents: isEditable && !isSelected ? 'none' : undefined,
+        height: height
+      },
+      "data-percy": "hide"
+    }, renderIframe(srcURL))
+  );
+}
+
+function renderIframe(url) {
+  if (!url) {
+    return null;
+  }
+
+  return (
+    /*#__PURE__*/
+    React.createElement("iframe", {
+      src: url,
+      scrolling: "auto",
+      frameBorder: "0",
+      align: "aus",
+      allowFullScreen: true,
+      mozallowfullscreen: "true",
+      webkitallowfullscreen: "true"
+    })
+  );
+}
+
+frontend.contentElementTypes.register('dataWrapperChart', {
+  component: DataWrapperChart,
+  lifecycle: true
+});