pageflow 15.2.2 → 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

@@ -1,7 +1,8 @@
-import { Text, frontend, useFile, useEditorSelection, useOnScreen, Image, InlineCaption, Video, useMediaSettings, useI18n } from 'pageflow-scrolled/frontend';
+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) {
@@ -19,60 +20,89 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
+var styles = {"root":"Heading-module_root__33TFw","first":"Heading-module_first__1PMJX"};
 
-  if (!css || typeof document === 'undefined') { return; }
+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 head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
+  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
+        });
+      }
+    })))
+  );
+}
 
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
+frontend.contentElementTypes.register('heading', {
+  component: Heading
+});
 
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
+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;
 }
 
-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 _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
 
-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));
-}
+    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));
+      });
+    }
+  }
 
-frontend.contentElementTypes.register('heading', {
-  component: Heading
-});
+  return target;
+}
 
 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;
-  }
-
+  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
   var _arr = [];
   var _n = true;
   var _d = false;
@@ -98,25 +128,47 @@ function _iterableToArrayLimit(arr, i) {
   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");
+  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) || _nonIterableRest();
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(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; }
+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 state = _ref.state,
+  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,
@@ -124,8 +176,7 @@ function BeforeAfter(_ref) {
       initial_slider_position = _ref.initial_slider_position,
       slider = _ref.slider,
       slider_color = _ref.slider_color,
-      slider_handle = _ref.slider_handle,
-      contentElementId = _ref.contentElementId;
+      slider_handle = _ref.slider_handle;
   var beforeAfterRef = useRef();
   var current = beforeAfterRef.current;
 
@@ -145,13 +196,13 @@ function BeforeAfter(_ref) {
     if (node) {
       // Only wiggle once per element, when it is active for the first
       // time
-      var shouldWiggle = !wiggled && state === 'active';
+      var shouldWiggle = !wiggled && isActive;
       setWiggle(shouldWiggle); // If wiggle was just set, mark this element as one that already
       // wiggled
 
       !wiggled && setWiggled(shouldWiggle);
     }
-  }, [state, current]);
+  }, [isActive, current]);
   var beforeImage = useFile({
     collectionName: 'imageFiles',
     permaId: before_id
@@ -161,11 +212,8 @@ function BeforeAfter(_ref) {
     permaId: after_id
   });
 
-  var _useEditorSelection = useEditorSelection({
-    id: contentElementId,
-    type: 'contentElement'
-  }),
-      isSelected = _useEditorSelection.isSelected;
+  var _useContentElementEdi = useContentElementEditorState(),
+      isSelected = _useContentElementEdi.isSelected;
 
   var beforeImageUrl = beforeImage && beforeImage.urls.large;
   var beforeImageAlt = beforeImage && beforeImage.configuration.alt;
@@ -176,59 +224,80 @@ function BeforeAfter(_ref) {
   // react-compare-image needs
 
   if (!slider) {
-    opts = _objectSpread({}, opts, {
+    opts = _objectSpread2(_objectSpread2({}, opts), {}, {
       sliderLineWidth: 0,
-      handle: React.createElement(React.Fragment, null)
+      handle:
+      /*#__PURE__*/
+      React.createElement(React.Fragment, null)
     });
   }
 
   if (slider) {
     if (!slider_handle) {
-      opts = _objectSpread({}, opts, {
-        handle: React.createElement(React.Fragment, null)
+      opts = _objectSpread2(_objectSpread2({}, opts), {}, {
+        handle:
+        /*#__PURE__*/
+        React.createElement(React.Fragment, null)
       });
     }
 
     if (slider_color) {
-      opts = _objectSpread({}, opts, {
+      opts = _objectSpread2(_objectSpread2({}, opts), {}, {
         sliderLineColor: slider_color
       });
     }
-  }
+  } //Since the slider wiggle only the first time, set the variable once for performance purpose.
 
-  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);
+  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;
     }
-  }, opts)));
+
+    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) {
@@ -244,207 +313,395 @@ function InitialSliderPositionIndicator(_ref2) {
   }; // 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", {
+  return parentSelected && position !== 50 ?
+  /*#__PURE__*/
+  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
-  })));
+  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
+  component: InlineBeforeAfter,
+  lifecycle: true
 });
 
-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
-  }));
+
+  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
+  component: InlineImage,
+  lifecycle: true
 });
 
-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%'
+  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();
     }
-  }, React.createElement("div", {
-    className: styles$4.inner
-  }, React.createElement(Video, Object.assign({}, configuration, {
-    state: onScreen ? 'active' : 'inactive',
-    interactive: true
-  })))));
+  };
+
+  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
+  component: InlineVideo,
+  lifecycle: true
 });
 
-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 InlineAudio(_ref) {
+  var sectionProps = _ref.sectionProps,
+      configuration = _ref.configuration;
 
-function SoundDisclaimer() {
-  var mediaSettings = useMediaSettings();
+  var _usePlayerState = usePlayerState(),
+      _usePlayerState2 = _slicedToArray(_usePlayerState, 2),
+      playerState = _usePlayerState2[0],
+      playerActions = _usePlayerState2[1];
 
-  var _useI18n = useI18n(),
-      t = _useI18n.t;
+  var _useContentElementEdi = useContentElementEditorState(),
+      isEditable = _useContentElementEdi.isEditable,
+      isSelected = _useContentElementEdi.isSelected;
 
-  return React.createElement("div", {
-    className: classNames(styles$5.soundDisclaimer),
-    onClick: function onClick() {
-      return mediaSettings.setMuted(false);
+  var _useContentElementLif = useContentElementLifecycle({
+    onActivate: function onActivate() {
+      if (configuration.autoplay && !media.muted) {
+        playerActions.play();
+      }
+    },
+    onDeactivate: function onDeactivate() {
+      playerActions.pause();
     }
-  }, React.createElement("p", {
-    dangerouslySetInnerHTML: {
-      __html: t('pageflow_scrolled.public.sound_disclaimer.help_text')
+  }),
+      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 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);
+var styles$3 = {"text":"TextBlock-module_text__21Hk4"};
 
-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
-    }
-  }));
+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
+  component: TextBlock,
+  customSelectionRect: true
 });
 
-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);
+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;
 
-  // base64-encoded 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));
   }
 
-  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
+  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
       }
-    }
-  })), React.createElement(InlineCaption, {
-    text: configuration.caption
-  }));
+    },
+    /*#__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
+  component: VideoEmbed,
+  lifecycle: true
 });
 
-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);
+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 _classNames;
+  var _classNames2;
 
   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 layout = props.sectionProps.layout;
 
-  var _useI18n = useI18n(),
+  var _useI18n = useI18n({
+    locale: 'ui'
+  }),
       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 _useContentElementEdi = useContentElementEditorState(),
+      isEditable = _useContentElementEdi.isEditable,
+      isSelected = _useContentElementEdi.isSelected;
 
   var onClick = function onClick(event) {
-    if (props.open_in_new_tab == false && isInEditor()) {
-      setHideTooltip(false);
-      event.preventDefault();
+    if (isEditable) {
+      if (!props.open_in_new_tab || !isSelected) {
+        event.preventDefault();
+      }
+
+      if (!props.open_in_new_tab && isSelected) {
+        setHideTooltip(false);
+      }
     }
   };
 
@@ -452,82 +709,170 @@ function ExternalLink(props) {
     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
+  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')))
+      );
     }
-  })), 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'))));
+  }
+
+  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 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);
+var styles$6 = {"ext_links_container":"ExternalLinkList-module_ext_links_container__16IIo"};
 
 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
-    }));
-  }));
+
+  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
+  component: ExternalLinkList,
+  lifecycle: true
 });
 
-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 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 ref = useRef();
-  var onScreen = useOnScreen(ref, '25% 0px 25% 0px'); // remove url protocol, so that it is selected by the browser itself
+
+  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 && onScreen) {
+  if (configuration.url && isPrepared) {
     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"
-  }));
+  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
+  component: DataWrapperChart,
+  lifecycle: true
 });