pageflow 15.2.0 → 15.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0f634bdc5700407153c1e555eb991eac53f2572d
-  data.tar.gz: 47766062e1a5fedffcce3c969fae1fa52ba10ed3
+  metadata.gz: b169ee9cc88c35d211b95622dff89fd05f45bb63
+  data.tar.gz: ae672e0fa5c1ea4ec5b294616eba14fc3d08e85e
 SHA512:
-  metadata.gz: 8a87e52617931eeff9d0bce5bf8b09ef2673e4543173d9cd00edd88d2e2fab165222a6216785560fb099635e2a8fc7e7df9f1c69d3c8c79d94cde602aedcf5a2
-  data.tar.gz: ebcb2edecf5aca9a2dbbd2037a4e07120cdf3fcc3c578de36ba5a19d08507298a493e3ef15b21714829061dd0a43d777e4d882a2303a3beed8f0942506e2adf5
+  metadata.gz: 6725c2802c161ef7edd6fb3b67d714090592e31d587902e792d7a275006d284029136ae9815f6e70db8a6838caed27823c9d236a33a910a021ac8995dd6daf04
+  data.tar.gz: 661df44b0a39b41eede0d0b49b65a1bee5695a9b165953e406a3bf9ee3ba840bd984d370a77c41ebb5ceff5c29ad1e69e26c1bb986ba1f2793aa9a989ec624ce

data/CHANGELOG.md

@@ -1,5 +1,16 @@
 # CHANGELOG
 
+### Version 15.2.1
+
+2020-04-02
+
+[Compare changes](https://github.com/codevise/pageflow/compare/v15.2.0...v15.2.1)
+
+- Fix disabling home button input in account form based on theme (15.2 Backport)
+  ([#1376](https://github.com/codevise/pageflow/pull/1376))
+- Include scrolled content element js files in gem (15.2 Backport)
+  ([#1374](https://github.com/codevise/pageflow/pull/1374))
+
 ### Version 15.2.0
 
 2020-04-01

data/app/assets/javascripts/pageflow/admin/accounts.js

@@ -1,6 +1,6 @@
 jQuery(function($) {
   $('.admin_accounts').filter('.new, .edit').find('form.pageflow_account').each(function() {
-    var themeSelect = $('#account_default_theming_attributes_theme_name', this);
+    var themeSelect = $('#account_paged_entry_template_attributes_theme_name', this);
     var themeOptions = JSON.parse($('script#theme_options', this).text());
     var homeButtonCheckBox = $('#account_paged_entry_template_attributes_configuration_home_button_enabled', this);
 

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

@@ -0,0 +1,410 @@
+import { editor as editor$1 } from 'pageflow-scrolled/editor';
+import { TextInputView, TextAreaInputView, SliderInputView, CheckBoxInputView, UrlInputView, SelectInputView, cssModulesUtils, ConfigurationEditorView } from 'pageflow/ui';
+import { FileInputView, ColorInputView, ListView, transientReferences } from 'pageflow/editor';
+import Marionette from 'backbone.marionette';
+import _ from 'underscore';
+import Backbone from 'backbone';
+import I18n$1 from 'i18n-js';
+
+editor$1.contentElementTypes.register('heading', {
+  configurationEditor: function configurationEditor() {
+    this.tab('general', function () {
+      this.input('children', TextInputView);
+    });
+  }
+});
+
+editor$1.contentElementTypes.register('textBlock', {
+  configurationEditor: function configurationEditor() {
+    this.tab('general', function () {
+      this.input('children', TextAreaInputView);
+    });
+  }
+});
+
+editor$1.contentElementTypes.register('inlineImage', {
+  configurationEditor: function configurationEditor() {
+    this.tab('general', function () {
+      this.input('id', FileInputView, {
+        collection: 'image_files',
+        fileSelectionHandler: 'contentElementConfiguration'
+      });
+      this.group('ContentElementCaption');
+      this.group('ContentElementPosition');
+    });
+  }
+});
+
+editor$1.contentElementTypes.register('inlineVideo', {
+  configurationEditor: function configurationEditor() {
+    this.tab('general', function () {});
+  }
+});
+
+editor$1.contentElementTypes.register('inlineBeforeAfter', {
+  configurationEditor: function configurationEditor() {
+    this.tab('general', function () {
+      this.input('before_id', FileInputView, {
+        collection: 'image_files',
+        fileSelectionHandler: 'contentElementConfiguration',
+        positioning: false
+      });
+      this.input('before_label', TextInputView);
+      this.input('after_id', FileInputView, {
+        collection: 'image_files',
+        fileSelectionHandler: 'contentElementConfiguration',
+        positioning: false
+      });
+      this.input('after_label', TextInputView);
+      this.input('initial_slider_position', SliderInputView);
+      this.input('slider', CheckBoxInputView);
+      this.input('slider_handle', CheckBoxInputView, {
+        visibleBinding: 'slider'
+      });
+      this.input('slider_color', ColorInputView, {
+        visibleBinding: 'slider'
+      });
+      this.group('ContentElementPosition');
+    });
+  },
+  defaultConfig: {
+    slider: true,
+    slider_handle: true,
+    initial_slider_position: 50
+  }
+});
+
+editor$1.contentElementTypes.register('soundDisclaimer', {
+  configurationEditor: function configurationEditor() {
+    this.tab('general', function () {});
+  }
+});
+
+editor$1.contentElementTypes.register('videoEmbed', {
+  configurationEditor: function configurationEditor() {
+    this.tab('general', function () {
+      this.input('videoSource', UrlInputView, {
+        supportedHosts: ['http://youtu.be', 'https://youtu.be', 'http://www.youtube.com', 'https://www.youtube.com', 'http://vimeo.com', 'https://vimeo.com', 'http://www.facebook.com', 'https://www.facebook.com'],
+        displayPropertyName: 'videoSource',
+        required: true,
+        permitHttps: true
+      });
+      this.input('hideInfo', CheckBoxInputView);
+      this.input('hideControls', CheckBoxInputView);
+      this.input('aspectRatio', SelectInputView, {
+        values: ['wide', 'narrow', 'square', 'portrait']
+      });
+      this.group('ContentElementCaption');
+      this.group('ContentElementPosition');
+    });
+  }
+});
+
+var SidebarRouter = Marionette.AppRouter.extend({
+  appRoutes: {
+    'scrolled/external_links/:id/': 'links',
+    'scrolled/external_links/:id/:link_id': 'link'
+  }
+});
+
+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 = ".SidebarListView-module_container__2j0sq {\n  margin-top: 30px;\n}\n.SidebarListView-module_add__138Ey{\n  border: 1px solid #1c86fe;\n  border-radius: 3px;\n  box-shadow: inset 0 1px 0 0 #b6d5f8;\n  color: white !important;\n  display: inline-block;\n  font-size: 11px;\n  font-weight: bold;\n  background-color: #6aacf7;\n  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6aacf7), color-stop(100%, #2b8efe));\n  background-image: -webkit-linear-gradient(#6aacf7, #2b8efe);\n  background-image: linear-gradient(#6aacf7, #2b8efe) !important;\n  padding: 7px 18px;\n  text-decoration: none !important;\n  text-shadow: 0 1px 0 #067bff;\n  background-clip: padding-box;\n  padding-top: 5px;\n  padding-bottom: 4px;\n  padding-left: 12px\n}\n\n.SidebarListView-module_add__138Ey::before{\n  font-family: 'entypo';\n  content: \"\\2795\"\n}\n\n.SidebarListView-module_add__138Ey:hover:not(:disabled):not(.SidebarListView-module_disabled__2s_kN) {\n  box-shadow: inset 0 1px 0 0 #87baf4;\n  cursor: pointer;\n  background-color: #559ff2;\n  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #559ff2), color-stop(100%, #1d86fc));\n  background-image: -webkit-linear-gradient(#559ff2, #1d86fc);\n  background-image: linear-gradient(#559ff2, #1d86fc)\n}\n\n.SidebarListView-module_add__138Ey:active:not(:disabled):not(.SidebarListView-module_disabled__2s_kN) {\n  border: 1px solid #1c86fe;\n  box-shadow: inset 0 0 8px 4px #0f7efb, inset 0 0 8px 4px #0f7efb, 0 1px 1px 0 #eee\n}\n\n.SidebarListView-module_header__fxwPU{\n  display: 'block';\n}\n\n\n.SidebarListView-module_links_container__XDAeC {\n  margin-top: 10px;\n}";
+var styles = {"container":"SidebarListView-module_container__2j0sq","add":"SidebarListView-module_add__138Ey","disabled":"SidebarListView-module_disabled__2s_kN","header":"SidebarListView-module_header__fxwPU","links_container":"SidebarListView-module_links_container__XDAeC"};
+styleInject(css);
+
+var SidebarListView = Marionette.Layout.extend({
+  template: function template(data) {
+    return "\n    <a class=\"back\">".concat(I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.outline'), "</a>\n    <a class=\"destroy\">").concat(I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.destroy'), "</a>\n    <div class=\"").concat(styles.container, "\">\n      <label class=\"").concat(styles.header, "\">\n        <span class=\"name\">").concat(I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.name'), "</span>\n      </label>\n      <div class='").concat(styles.links_container, "'></div>\n      <a class=\"").concat(styles.add, "\" href=\"\">").concat(I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.add'), "</a>\n    </div>\n  ");
+  },
+  className: 'manage_external_links',
+  regions: {
+    linksContainer: '.' + styles.links_container
+  },
+  ui: cssModulesUtils.ui(styles, 'add', 'header'),
+  events: function events() {
+    var eventObject = {
+      'click a.back': 'goBack',
+      'click a.destroy': 'destroyElement'
+    };
+    eventObject['click a.' + styles.add] = 'addElement';
+    return eventObject;
+  },
+  initialize: function initialize(options) {
+    this.listenTo(options.contentElement.configuration, 'change', function () {
+      this.render();
+    });
+  },
+  onRender: function onRender() {
+    this.linksContainer.show(new ListView({
+      collection: this.model,
+      onEdit: _.bind(this.onEdit, this),
+      onRemove: _.bind(this.onRemove, this),
+      contentElement: this.options.contentElement
+    }));
+  },
+  goBack: function goBack() {
+    editor$1.navigate('', {
+      trigger: true
+    });
+  },
+  destroyElement: function destroyElement() {
+    if (confirm(I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.confirm_delete'))) {
+      this.options.contentElement.destroy();
+      this.goBack();
+    }
+  },
+  addElement: function addElement() {
+    var newModel = this.model.addNewLink();
+    this.onEdit(newModel);
+  },
+  onEdit: function onEdit(linkModel) {
+    editor$1.navigate("/scrolled/external_links/".concat(this.options.contentElement.get('id'), "/").concat(linkModel.get('id')), {
+      trigger: true
+    });
+  },
+  onRemove: function onRemove(linkModel) {
+    if (confirm(I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.confirm_delete_link'))) {
+      this.model.remove(linkModel);
+    }
+  }
+});
+
+var SidebarEditLinkView = Marionette.Layout.extend({
+  template: function template(data) {
+    return "\n    <a class=\"back\">".concat(I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.back'), "</a>\n    <a class=\"destroy\">").concat(I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.destroy'), "</a>\n\n    <div class='form_container'></div>\n  ");
+  },
+  className: 'edit_external_link',
+  regions: {
+    formContainer: '.form_container'
+  },
+  events: {
+    'click a.back': 'goBack',
+    'click a.destroy': 'destroyLink'
+  },
+  initialize: function initialize(options) {},
+  onRender: function onRender() {
+    var configurationEditor = new ConfigurationEditorView({
+      model: this.model,
+      attributeTranslationKeyPrefixes: ['pageflow_scrolled.editor.content_elements.externalLinkList.attributes'],
+      tabTranslationKeyPrefix: 'pageflow_scrolled.editor.content_elements.externalLinkList.tabs'
+    });
+    var self = this;
+    configurationEditor.tab('edit_link', function () {
+      this.input('url', TextInputView, {
+        required: true
+      });
+      this.input('open_in_new_tab', CheckBoxInputView);
+      this.input('thumbnail', FileInputView, {
+        collection: 'image_files',
+        fileSelectionHandler: 'contentElement.externalLinks.link',
+        fileSelectionHandlerOptions: {
+          contentElementId: self.options.contentElement.get('id')
+        },
+        positioning: false
+      });
+      this.input('title', TextInputView, {
+        required: true
+      });
+      this.input('description', TextAreaInputView, {
+        size: 'short',
+        disableLinks: true
+      });
+    });
+    this.formContainer.show(configurationEditor);
+  },
+  goBack: function goBack() {
+    editor.navigate("/scrolled/external_links/".concat(this.options.contentElement.get('id'), "/"), {
+      trigger: true
+    });
+  },
+  destroyLink: function destroyLink() {
+    if (confirm('pageflow_scrolled.editor.content_elements.externalLinkList.confirm_delete_link')) {
+      this.options.collection.remove(this.model);
+      this.goBack();
+    }
+  }
+});
+
+var ExternalLinkModel = Backbone.Model.extend({
+  modelName: 'ExternalLink',
+  i18nKey: 'external_link',
+  mixins: [transientReferences],
+  initialize: function initialize(options) {},
+  thumbnailUrl: function thumbnailUrl() {
+    var image = this.collection.entry.imageFiles.getByPermaId(this.get('thumbnail'));
+    return image ? image.get('thumbnail_url') : '';
+  },
+  title: function title() {
+    return this.get('title');
+  }
+});
+
+var ExternalLinkCollection = Backbone.Collection.extend({
+  model: ExternalLinkModel,
+  initialize: function initialize(models, options) {
+    this.entry = options.entry;
+    this.configuration = options.configuration;
+    this.bind('change', this.updateConfiguration);
+    this.bind('add', this.updateConfiguration);
+    this.bind('remove', this.updateConfiguration);
+  },
+  modelId: function modelId(attrs) {
+    return attrs.id;
+  },
+  updateConfiguration: function updateConfiguration() {
+    var _this = this;
+
+    this.configuration.set('links', this.toJSON(), {
+      silent: true
+    });
+    setTimeout(function () {
+      //triggering change event inside this timeout block because otherwise due to
+      //some unknown reason page navigates to window.location.origin+window.location.pathname
+      //ignoring the hash thus causing the page to refresh.
+      _this.configuration.trigger('change');
+    }, 0);
+  },
+  addNewLink: function addNewLink() {
+    var newLink = {
+      id: this.length + 1,
+      title: '',
+      url: '',
+      thumbnail: '',
+      description: '',
+      open_in_new_tab: 1
+    };
+    this.add(newLink);
+    return this.get(this.length);
+  }
+});
+
+var SidebarController = Marionette.Controller.extend({
+  initialize: function initialize(options) {
+    this.region = options.region;
+  },
+  links: function links(id) {
+    var _this = this;
+
+    this.setModel(id); //if not done without timeout another empty tab view is shown in the sidebar
+    //to me it seems to be the problem of some method call ordering which gets fixed with this
+    //hack but in future it should be fixed without having to use setTimeout
+
+    setTimeout(function () {
+      _this.region.show(new SidebarListView({
+        model: _this.linksCollection,
+        contentElement: _this.model,
+        entry: _this.options.entry
+      }));
+    }, 0);
+  },
+  link: function link(id, link_id) {
+    var _this2 = this;
+
+    this.setModel(id);
+    setTimeout(function () {
+      _this2.region.show(new SidebarEditLinkView({
+        model: _this2.linksCollection.get(link_id),
+        collection: _this2.linksCollection,
+        contentElement: _this2.model,
+        entry: _this2.options.entry
+      }));
+    }, 0);
+  },
+  setModel: function setModel(id) {
+    this.model = this.options.entry.contentElements.get(id);
+    var configuration = this.model.configuration;
+
+    if (!configuration.get('links')) {
+      configuration.set('links', []);
+    }
+
+    this.linksCollection = new ExternalLinkCollection(configuration.get('links'), {
+      entry: this.options.entry,
+      configuration: configuration
+    });
+  }
+});
+
+//router defines the URL hash path mapping and controller provides functions for the paths
+
+editor$1.registerSideBarRouting({
+  router: SidebarRouter,
+  controller: SidebarController
+}); // register external link list content element configuration editor for sidebar
+
+editor$1.contentElementTypes.register('externalLinkList', {
+  configurationEditor: function configurationEditor() {
+    this.tab('general', function () {
+      var externalListModel = this.model.parent; //redirect to special hash path that is specific to external links only
+
+      editor$1.navigate("/scrolled/external_links/".concat(externalListModel.get('id'), "/"), {
+        trigger: true
+      });
+    });
+  }
+}); // register file handler for thumbnail of external link
+
+editor$1.registerFileSelectionHandler('contentElement.externalLinks.link', function (options) {
+  var contentElement = options.entry.contentElements.get(options.contentElementId);
+  var links = contentElement.configuration.get('links');
+
+  this.call = function (file) {
+    var link = links.find(function (link) {
+      return link.id == options.id;
+    });
+    link.thumbnail = file.get('perma_id');
+    contentElement.configuration.set('links', links);
+    contentElement.configuration.trigger('change', contentElement.configuration);
+  };
+
+  this.getReferer = function () {
+    return '/scrolled/external_links/' + contentElement.id + '/' + options.id;
+  };
+});
+
+var DatawrapperAdView = Marionette.ItemView.extend({
+  template: function template(data) {
+    return "\n    <form action=\"https://datawrapper.de/chart/create\" method=\"POST\" target=\"_blank\">\n      <input type=\"hidden\" name=\"theme\" value=\"pageflow\" />\n      <input type=\"submit\" value=\"".concat(I18n$1.t('pageflow_scrolled.editor.content_elements.dataWrapperChart.attributes.create_chart.label'), "\" />\n    </form>\n  ");
+  },
+  className: 'datawrapper_ad'
+});
+
+editor$1.contentElementTypes.register('dataWrapperChart', {
+  configurationEditor: function configurationEditor() {
+    this.tab('general', function () {
+      this.input('url', UrlInputView, {
+        supportedHosts: ['http://cf.datawrapper.de', 'https://cf.datawrapper.de', 'http://datawrapper.dwcdn.de', 'https://datawrapper.dwcdn.de', 'http://datawrapper.dwcdn.net', 'https://datawrapper.dwcdn.net', 'http://charts.datawrapper.de', 'https://charts.datawrapper.de'],
+        displayPropertyName: 'url',
+        required: true,
+        permitHttps: true
+      });
+      this.view(DatawrapperAdView);
+    });
+  }
+});

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

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

data/lib/pageflow/version.rb

@@ -1,3 +1,3 @@
 module Pageflow
-  VERSION = '15.2.0'.freeze
+  VERSION = '15.2.1'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: pageflow
 version: !ruby/object:Gem::Version
-  version: 15.2.0
+  version: 15.2.1
 platform: ruby
 authors:
 - Codevise Solutions Ltd
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-04-01 00:00:00.000000000 Z
+date: 2020-04-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -1704,6 +1704,8 @@ files:
 - entry_types/scrolled/lib/pageflow_scrolled/plugin.rb
 - entry_types/scrolled/lib/pageflow_scrolled/seeds.rb
 - entry_types/scrolled/lib/tasks/pageflow_scrolled_tasks.rake
+- entry_types/scrolled/package/contentElements-editor.js
+- entry_types/scrolled/package/contentElements-frontend.js
 - entry_types/scrolled/package/editor.js
 - entry_types/scrolled/package/frontend.js
 - entry_types/scrolled/package/package.json