pageflow 15.6.1 → 15.7.0

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

@@ -1,19 +1,39 @@
+import I18n from 'i18n-js';
 import { editor, NoOptionsHintView, buttonStyles } from 'pageflow-scrolled/editor';
-import { FileInputView, CheckBoxInputView, ColorInputView as ColorInputView$1, editor as editor$1, transientReferences, ListView, SliderInputView as SliderInputView$1, SelectInputView as SelectInputView$1, EnumTableCellView } from 'pageflow/editor';
-import { SelectInputView, ColorInputView, TextInputView, SliderInputView, CheckBoxInputView as CheckBoxInputView$1, UrlInputView, ConfigurationEditorView, cssModulesUtils } from 'pageflow/ui';
+import { SelectInputView, SeparatorView, LabelOnlyView, ColorInputView, UrlInputView, CheckBoxInputView as CheckBoxInputView$1, TextInputView, SliderInputView, ConfigurationEditorView, cssModulesUtils } from 'pageflow/ui';
+import { InfoBoxView, FileInputView, CheckBoxInputView, ColorInputView as ColorInputView$1, editor as editor$1, transientReferences, ListView, SliderInputView as SliderInputView$1, SelectInputView as SelectInputView$1, EnumTableCellView } from 'pageflow/editor';
 import Marionette from 'backbone.marionette';
-import I18n from 'i18n-js';
 import Backbone from 'backbone';
 import _ from 'underscore';
 
+var img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e%3c!--! Font Awesome Pro 6.1.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons%2c Inc. --%3e%3cpath fill='white' d='M448 448c0 17.69-14.33 32-32 32h-96c-17.67 0-32-14.31-32-32s14.33-32 32-32h16v-144h-224v144H128c17.67 0 32 14.31 32 32s-14.33 32-32 32H32c-17.67 0-32-14.31-32-32s14.33-32 32-32h16v-320H32c-17.67 0-32-14.31-32-32s14.33-32 32-32h96c17.67 0 32 14.31 32 32s-14.33 32-32 32H112v112h224v-112H320c-17.67 0-32-14.31-32-32s14.33-32 32-32h96c17.67 0 32 14.31 32 32s-14.33 32-32 32h-16v320H416C433.7 416 448 430.3 448 448z'/%3e%3c/svg%3e";
+
 editor.contentElementTypes.register('heading', {
+  pictogram: img,
   supportedPositions: ['inline', 'wide'],
   defaultConfig: {
     position: 'wide'
   },
-  configurationEditor: function configurationEditor() {
+  configurationEditor: function configurationEditor(_ref) {
+    var entry = _ref.entry;
+    this.listenTo(this.model, 'change:hyphens', this.refresh);
     this.tab('general', function () {
+      this.input('textSize', SelectInputView, {
+        values: ['auto', 'large', 'medium', 'small']
+      });
+      this.group('ContentElementTypographyVariant', {
+        entry: entry
+      });
       this.group('ContentElementPosition');
+      this.input('hyphens', SelectInputView, {
+        values: ['auto', 'manual']
+      });
+
+      if (this.model.get('hyphens') === 'manual') {
+        this.view(InfoBoxView, {
+          text: I18n.t('pageflow_scrolled.editor.content_elements.heading.help_texts.shortcuts')
+        });
+      }
     });
   }
 });
@@ -67,30 +87,48 @@ function _objectSpread2(target) {
   return target;
 }
 
+var img$1 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e %3c!--! Font Awesome Pro 6.1.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons%2c Inc. --%3e %3cpath fill='white' d='M 256%2c416 H 32 c -17.67%2c0 -32%2c14.33 -32%2c32 0%2c17.67 14.33%2c32 32%2c32 h 224 c 17.7%2c0 32%2c-14.33 32%2c-32 0%2c-17.67 -14.3%2c-32 -32%2c-32 z m 0%2c-256 H 32 c -17.67%2c0 -32%2c14.3 -32%2c32 0%2c17.7 14.33%2c32 32%2c32 h 224 c 17.7%2c0 32%2c-14.3 32%2c-32 0%2c-17.7 -14.3%2c-32 -32%2c-32 z M 0%2c320 c 0%2c17.7 14.33%2c32 32%2c32 h 384 c 17.7%2c0 32%2c-14.3 32%2c-32 0%2c-17.7 -14.3%2c-32 -32%2c-32 H 32 C 14.33%2c288 0%2c302.3 0%2c320 Z M 416%2c32 H 32 C 14.33%2c32 0%2c46.3 0%2c64 0%2c81.7 14.33%2c96 32%2c96 h 384 c 17.7%2c0 32%2c-14.3 32%2c-32 0%2c-17.7 -14.3%2c-32 -32%2c-32 z' /%3e%3c/svg%3e";
+
 editor.contentElementTypes.register('textBlock', {
+  pictogram: img$1,
   supportedPositions: ['inline'],
-  configurationEditor: function configurationEditor() {
+  configurationEditor: function configurationEditor(_ref) {
+    var _this = this;
+
+    var entry = _ref.entry,
+        contentElement = _ref.contentElement;
+    this.listenTo(contentElement.transientState, 'change:currentNodeType', function () {
+      return _this.refresh();
+    });
     this.tab('general', function () {
-      this.view(NoOptionsHintView);
+      var currentNodeType = contentElement.transientState.get('currentNodeType');
+      this.group('ContentElementTypographyVariant', {
+        entry: entry,
+        model: contentElement.transientState,
+        prefix: currentNodeType || 'none',
+        fallback: function fallback() {
+          this.view(NoOptionsHintView);
+        }
+      });
     });
   },
   split: function split(configuration, insertIndex) {
+    var value = getValue(configuration);
     return [_objectSpread2(_objectSpread2({}, configuration), {}, {
-      value: configuration.value.slice(0, insertIndex)
+      value: value.slice(0, insertIndex)
     }), _objectSpread2(_objectSpread2({}, configuration), {}, {
-      value: configuration.value.slice(insertIndex)
+      value: value.slice(insertIndex)
     })];
   },
   merge: function merge(configurationA, configurationB) {
-    // Value might still be empty if text block has not been edited
-    var value = (configurationA.value || []).concat(configurationB.value || []);
+    var value = getValue(configurationA).concat(getValue(configurationB));
     return _objectSpread2(_objectSpread2({}, configurationA), {}, {
-      // Slate.js does not like empty arrays as value.
-      // `inlineEditing/EditableText` sets default value, but only if
-      // `value` is falsy.
-      value: value.length ? value : undefined
+      value: value
     });
   },
+  getLength: function getLength(configuration) {
+    return getValue(configuration).length;
+  },
   handleDestroy: function handleDestroy(contentElement) {
     var transientState = contentElement.get('transientState') || {};
 
@@ -103,7 +141,21 @@ editor.contentElementTypes.register('textBlock', {
   }
 });
 
+function getValue(configuration) {
+  // Value might still be empty if text block has not been edited
+  return configuration.value || [{
+    type: 'paragraph',
+    children: [{
+      text: ''
+    }]
+  }];
+}
+
+var img$2 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3c!--! Font Awesome Pro 6.1.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons%2c Inc. --%3e%3cpath fill='white' d='M447.1 32h-384C28.64 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM111.1 96c26.51 0 48 21.49 48 48S138.5 192 111.1 192s-48-21.49-48-48S85.48 96 111.1 96zM446.1 407.6C443.3 412.8 437.9 416 432 416H82.01c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C142.1 290.4 146.9 288 152 288s9.916 2.441 12.93 6.574l32.46 44.51l93.3-139.1C293.7 194.7 298.7 192 304 192s10.35 2.672 13.31 7.125l128 192C448.6 396 448.9 402.3 446.1 407.6z'/%3e%3c/svg%3e";
+
 editor.contentElementTypes.register('inlineImage', {
+  pictogram: img$2,
+  category: 'media',
   supportedPositions: ['inline', 'sticky', 'left', 'right', 'wide', 'full'],
   configurationEditor: function configurationEditor() {
     this.tab('general', function () {
@@ -112,15 +164,83 @@ editor.contentElementTypes.register('inlineImage', {
         fileSelectionHandler: 'contentElementConfiguration',
         positioning: false
       });
+      this.input('portraitId', FileInputView, {
+        collection: 'image_files',
+        fileSelectionHandler: 'contentElementConfiguration',
+        positioning: false
+      });
       this.group('ContentElementCaption');
       this.group('ContentElementPosition');
     });
   }
 });
 
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
+
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+
+  return arr2;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(n);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+var img$3 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3c!--! Font Awesome Pro 6.1.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons%2c Inc. --%3e%3cpath fill='white' d='M463.1 32h-416C21.49 32-.0001 53.49-.0001 80v352c0 26.51 21.49 48 47.1 48h416c26.51 0 48-21.49 48-48v-352C511.1 53.49 490.5 32 463.1 32zM111.1 408c0 4.418-3.582 8-8 8H55.1c-4.418 0-8-3.582-8-8v-48c0-4.418 3.582-8 8-8h47.1c4.418 0 8 3.582 8 8L111.1 408zM111.1 280c0 4.418-3.582 8-8 8H55.1c-4.418 0-8-3.582-8-8v-48c0-4.418 3.582-8 8-8h47.1c4.418 0 8 3.582 8 8V280zM111.1 152c0 4.418-3.582 8-8 8H55.1c-4.418 0-8-3.582-8-8v-48c0-4.418 3.582-8 8-8h47.1c4.418 0 8 3.582 8 8L111.1 152zM351.1 400c0 8.836-7.164 16-16 16H175.1c-8.836 0-16-7.164-16-16v-96c0-8.838 7.164-16 16-16h160c8.836 0 16 7.162 16 16V400zM351.1 208c0 8.836-7.164 16-16 16H175.1c-8.836 0-16-7.164-16-16v-96c0-8.838 7.164-16 16-16h160c8.836 0 16 7.162 16 16V208zM463.1 408c0 4.418-3.582 8-8 8h-47.1c-4.418 0-7.1-3.582-7.1-8l0-48c0-4.418 3.582-8 8-8h47.1c4.418 0 8 3.582 8 8V408zM463.1 280c0 4.418-3.582 8-8 8h-47.1c-4.418 0-8-3.582-8-8v-48c0-4.418 3.582-8 8-8h47.1c4.418 0 8 3.582 8 8V280zM463.1 152c0 4.418-3.582 8-8 8h-47.1c-4.418 0-8-3.582-8-8l0-48c0-4.418 3.582-8 7.1-8h47.1c4.418 0 8 3.582 8 8V152z'/%3e%3c/svg%3e";
+
 editor.contentElementTypes.register('inlineVideo', {
-  supportedPositions: ['inline', 'sticky', 'left', 'right', 'full'],
+  pictogram: img$3,
+  category: 'media',
+  supportedPositions: ['inline', 'sticky', 'left', 'right', 'wide', 'full'],
   configurationEditor: function configurationEditor() {
+    migrateLegacyAutoplay(this.model);
     this.tab('general', function () {
       this.input('id', FileInputView, {
         collection: 'video_files',
@@ -133,18 +253,60 @@ editor.contentElementTypes.register('inlineVideo', {
         fileSelectionHandler: 'contentElementConfiguration',
         positioning: false
       });
-      this.input('autoplay', CheckBoxInputView);
+      this.view(SeparatorView);
+      this.input('playbackMode', SelectInputView, {
+        values: ['manual', 'autoplay', 'loop']
+      });
+      this.input('hideControlBar', CheckBoxInputView, {
+        disabledBinding: 'playbackMode',
+        disabled: function disabled(playbackMode) {
+          return playbackMode === 'loop';
+        },
+        displayCheckedIfDisabled: true
+      });
+      this.input('unmuteLabel', LabelOnlyView);
+      this.input('unmute', CheckBoxInputView, {
+        storeInverted: 'keepMuted'
+      });
+      this.input('rewindOnUnmute', CheckBoxInputView, {
+        disabledBinding: ['playbackMode', 'keepMuted'],
+        disabled: function disabled(_ref) {
+          var _ref2 = _slicedToArray(_ref, 2),
+              playbackMode = _ref2[0],
+              keepMuted = _ref2[1];
+
+          return playbackMode !== 'autoplay' || keepMuted;
+        },
+        displayUncheckedIfDisabled: true
+      });
+      this.view(SeparatorView);
       this.input('atmoDuringPlayback', SelectInputView, {
         values: ['play', 'mute', 'turnDown']
       });
+      this.view(SeparatorView);
       this.group('ContentElementCaption');
       this.group('ContentElementPosition');
     });
   }
 });
 
+function migrateLegacyAutoplay(model) {
+  if (!model.has('playbackMode') && model.get('autoplay')) {
+    model.set('playbackMode', 'autoplay', {
+      trigger: false
+    });
+  }
+}
+
+var img$4 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3e%3c!--! Font Awesome Pro 6.1.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons%2c Inc. --%3e%3cpath fill='white' d='M192 352c53.03 0 96-42.97 96-96v-160c0-53.03-42.97-96-96-96s-96 42.97-96 96v160C96 309 138.1 352 192 352zM344 192C330.7 192 320 202.7 320 215.1V256c0 73.33-61.97 132.4-136.3 127.7c-66.08-4.169-119.7-66.59-119.7-132.8L64 215.1C64 202.7 53.25 192 40 192S16 202.7 16 215.1v32.15c0 89.66 63.97 169.6 152 181.7V464H128c-18.19 0-32.84 15.18-31.96 33.57C96.43 505.8 103.8 512 112 512h160c8.222 0 15.57-6.216 15.96-14.43C288.8 479.2 274.2 464 256 464h-40v-33.77C301.7 418.5 368 344.9 368 256V215.1C368 202.7 357.3 192 344 192z'/%3e%3c/svg%3e";
+
 editor.contentElementTypes.register('inlineAudio', {
+  pictogram: img$4,
+  category: 'media',
   supportedPositions: ['inline', 'sticky', 'left', 'right', 'full'],
+  defaultConfig: {
+    playerControlVariant: 'waveformBars'
+  },
   configurationEditor: function configurationEditor(_ref) {
     var entry = _ref.entry;
     this.tab('general', function () {
@@ -159,60 +321,65 @@ editor.contentElementTypes.register('inlineAudio', {
         fileSelectionHandler: 'contentElementConfiguration',
         positioning: false
       });
+      this.view(SeparatorView);
       this.input('autoplay', CheckBoxInputView);
+      this.input('atmoDuringPlayback', SelectInputView, {
+        values: ['play', 'mute', 'turnDown']
+      });
+      this.view(SeparatorView);
       this.input('playerControlVariant', SelectInputView, {
-        values: ['classic', 'waveform'],
+        values: ['waveformBars', 'waveformLines', 'waveform', 'classic'],
         ensureValueDefined: true
       });
       this.input('waveformColor', ColorInputView, {
         visibleBinding: 'playerControlVariant',
-        visibleBindingValue: 'waveform',
+        visible: function visible(variant) {
+          return variant === null || variant === void 0 ? void 0 : variant.startsWith('waveform');
+        },
         defaultValue: entry.getTheme().get('options').colors.accent
       });
-      this.input('atmoDuringPlayback', SelectInputView, {
-        values: ['play', 'mute', 'turnDown']
-      });
+      this.view(SeparatorView);
       this.group('ContentElementCaption');
       this.group('ContentElementPosition');
     });
   }
 });
 
-editor.contentElementTypes.register('inlineBeforeAfter', {
-  supportedPositions: ['inline'],
+var img$5 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg version='1.1' id='Youtube' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 20 20' enable-background='new 0 0 20 20' xml:space='preserve'%3e%3cpath fill='white' d='M10%2c2.3C0.172%2c2.3%2c0%2c3.174%2c0%2c10s0.172%2c7.7%2c10%2c7.7s10-0.874%2c10-7.7S19.828%2c2.3%2c10%2c2.3z M13.205%2c10.334 l-4.49%2c2.096C8.322%2c12.612%2c8%2c12.408%2c8%2c11.974V8.026C8%2c7.593%2c8.322%2c7.388%2c8.715%2c7.57l4.49%2c2.096 C13.598%2c9.85%2c13.598%2c10.15%2c13.205%2c10.334z'/%3e%3c/svg%3e";
+
+editor.contentElementTypes.register('videoEmbed', {
+  pictogram: img$5,
+  category: 'media',
+  supportedPositions: ['inline', 'sticky', 'left', 'right', 'wide', 'full'],
   configurationEditor: function configurationEditor() {
     this.tab('general', function () {
-      this.input('before_id', FileInputView, {
-        collection: 'image_files',
-        fileSelectionHandler: 'contentElementConfiguration',
-        positioning: false
+      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: 'displayVideoSource',
+        required: true,
+        permitHttps: true
       });
-      this.input('before_label', TextInputView);
-      this.input('after_id', FileInputView, {
+      this.input('posterId', FileInputView, {
         collection: 'image_files',
         fileSelectionHandler: 'contentElementConfiguration',
         positioning: false
       });
-      this.input('after_label', TextInputView);
-      this.input('initial_slider_position', SliderInputView);
-      this.input('slider', CheckBoxInputView$1);
-      this.input('slider_handle', CheckBoxInputView$1, {
-        visibleBinding: 'slider'
-      });
-      this.input('slider_color', ColorInputView$1, {
-        visibleBinding: 'slider'
+      this.input('hideInfo', CheckBoxInputView$1);
+      this.input('hideControls', CheckBoxInputView$1);
+      this.input('aspectRatio', SelectInputView, {
+        values: ['wide', 'narrow', 'square', 'portrait']
       });
+      this.group('ContentElementCaption');
       this.group('ContentElementPosition');
     });
-  },
-  defaultConfig: {
-    slider: true,
-    slider_handle: true,
-    initial_slider_position: 50
   }
 });
 
+var img$6 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e%3c!--! Font Awesome Pro 6.1.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons%2c Inc. --%3e%3cpath fill='white' d='M412.6 181.9c-10.28-8.344-25.41-6.875-33.75 3.406c-8.406 10.25-6.906 25.37 3.375 33.78C393.5 228.4 400 241.8 400 256c0 14.19-6.5 27.62-17.81 36.87c-10.28 8.406-11.78 23.53-3.375 33.78c4.719 5.812 11.62 8.812 18.56 8.812c5.344 0 10.75-1.781 15.19-5.406C435.1 311.6 448 284.7 448 256S435.1 200.4 412.6 181.9zM301.2 34.84c-11.5-5.187-25.01-3.116-34.43 5.259L131.8 160H48c-26.51 0-48 21.49-48 47.1v95.1c0 26.51 21.49 47.1 48 47.1h83.84l134.9 119.9C272.7 477.2 280.3 480 288 480c4.438 0 8.959-.9313 13.16-2.837C312.7 472 320 460.6 320 448V64C320 51.41 312.7 39.1 301.2 34.84z'/%3e%3c/svg%3e";
+
 editor.contentElementTypes.register('soundDisclaimer', {
+  pictogram: img$6,
+  category: 'media',
   supportedPositions: ['inline'],
   configurationEditor: function configurationEditor() {
     this.tab('general', function () {
@@ -221,20 +388,33 @@ editor.contentElementTypes.register('soundDisclaimer', {
   }
 });
 
-editor.contentElementTypes.register('videoEmbed', {
-  supportedPositions: ['inline', 'sticky', 'left', 'right', 'full'],
+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.t('pageflow_scrolled.editor.content_elements.dataWrapperChart.attributes.create_chart.label'), "\" />\n    </form>\n  ");
+  },
+  className: 'datawrapper_ad'
+});
+
+var img$7 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e%3c!--! Font Awesome Pro 6.1.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons%2c Inc. --%3e%3cpath fill='white' d='M160 80C160 53.49 181.5 32 208 32H240C266.5 32 288 53.49 288 80V432C288 458.5 266.5 480 240 480H208C181.5 480 160 458.5 160 432V80zM0 272C0 245.5 21.49 224 48 224H80C106.5 224 128 245.5 128 272V432C128 458.5 106.5 480 80 480H48C21.49 480 0 458.5 0 432V272zM400 96C426.5 96 448 117.5 448 144V432C448 458.5 426.5 480 400 480H368C341.5 480 320 458.5 320 432V144C320 117.5 341.5 96 368 96H400z'/%3e%3c/svg%3e";
+
+editor.contentElementTypes.register('dataWrapperChart', {
+  category: 'data',
+  pictogram: img$7,
+  supportedPositions: ['inline', 'sticky', 'left', 'right', 'wide', 'full'],
   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: 'displayVideoSource',
+      this.input('url', UrlInputView, {
+        supportedHosts: ['cf.datawrapper.de', 'charts.datawrapper.de', 'datawrapper.dwcdn.de', 'datawrapper.dwcdn.net'],
+        displayPropertyName: 'displayUrl',
         required: true,
         permitHttps: true
       });
-      this.input('hideInfo', CheckBoxInputView$1);
-      this.input('hideControls', CheckBoxInputView$1);
-      this.input('aspectRatio', SelectInputView, {
-        values: ['wide', 'narrow', 'square', 'portrait']
+      this.view(DatawrapperAdView);
+      this.input('title', TextInputView, {
+        placeholder: I18n.t('pageflow_scrolled.public.chart.default_title')
+      });
+      this.input('backgroundColor', ColorInputView, {
+        defaultValue: '#323d4d'
       });
       this.group('ContentElementCaption');
       this.group('ContentElementPosition');
@@ -242,6 +422,36 @@ editor.contentElementTypes.register('videoEmbed', {
   }
 });
 
+var img$8 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e %3cpath fill='white' d='M 64%2c32 C 28.65%2c32 0%2c60.65 0%2c96 v 320 c 0%2c35.3 28.65%2c64 64%2c64 h 384 c 35.3%2c0 64%2c-28.7 64%2c-64 V 96 C 512%2c60.65 483.3%2c32 448%2c32 Z m 0%2c64 c 128%2c0 256%2c0 384%2c0 v 320 c -128%2c0 -256%2c0 -384%2c0 z m 182%2c28.52734 v 262.94532 h 22 V 124.52734 Z' /%3e %3cpath fill='white' d='m 186.81892%2c180.66143 c -12.25808%2c0.76551 -17.96668%2c13.50905 -26.61356%2c20.28687 -15.58075%2c16.39278 -33.16416%2c31.13354 -47.27512%2c48.79321 -4.0855%2c9.29219 2.78939%2c18.77866 10.09922%2c24.02983 19.1732%2c18.53891 37.00376%2c38.59231 57.19375%2c56.00728 11.59502%2c6.28738 27.33763%2c-7.35964 21.67579%2c-19.66992 -4.34142%2c-10.06283 -14.81383%2c-15.2758 -21.33624%2c-23.70538 -10.16266%2c-10.16266 -20.32532%2c-20.32532 -30.48798%2c-30.48798 16.9997%2c-17.81564 35.98195%2c-34.02522 51.5957%2c-53.07617 4.60995%2c-9.90721 -3.84461%2c-22.82682 -14.85156%2c-22.17774 z' /%3e %3cpath fill='white' d='m 325.18108%2c331.33857 c 12.25808%2c-0.76551 17.96668%2c-13.50905 26.61356%2c-20.28687 15.58075%2c-16.39278 33.16416%2c-31.13354 47.27512%2c-48.79321 4.0855%2c-9.29219 -2.78939%2c-18.77866 -10.09922%2c-24.02983 -19.1732%2c-18.53892 -37.00376%2c-38.59232 -57.19375%2c-56.00729 -11.59502%2c-6.28738 -27.33763%2c7.35964 -21.67579%2c19.66992 4.34142%2c10.06283 14.81383%2c15.2758 21.33624%2c23.70538 10.16266%2c10.16267 20.32532%2c20.32533 30.48798%2c30.48799 -16.9997%2c17.81564 -35.98195%2c34.02522 -51.5957%2c53.07617 -4.60995%2c9.90721 3.84461%2c22.82682 14.85156%2c22.17774 z' /%3e%3c/svg%3e";
+
+editor.contentElementTypes.register('inlineBeforeAfter', {
+  pictogram: img$8,
+  category: 'interactive',
+  supportedPositions: ['inline', 'sticky', 'left', 'right', 'wide', 'full'],
+  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_color', ColorInputView$1);
+      this.group('ContentElementPosition');
+    });
+  },
+  defaultConfig: {
+    initial_slider_position: 50
+  }
+});
+
 var SidebarRouter = Marionette.AppRouter.extend({
   appRoutes: {
     'scrolled/external_links/:id/:link_id': 'link'
@@ -301,6 +511,22 @@ var SidebarEditLinkView = Marionette.Layout.extend({
   }
 });
 
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+
 var ExternalLinkModel = Backbone.Model.extend({
   modelName: 'ExternalLink',
   i18nKey: 'external_link',
@@ -316,12 +542,11 @@ var ExternalLinkModel = Backbone.Model.extend({
 
 var ExternalLinkCollection = Backbone.Collection.extend({
   model: ExternalLinkModel,
+  comparator: 'position',
   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);
+    this.listenTo(this, 'add remove sort change', this.updateConfiguration);
   },
   modelId: function modelId(attrs) {
     return attrs.id;
@@ -330,17 +555,18 @@ var ExternalLinkCollection = Backbone.Collection.extend({
     this.configuration.set('links', this.toJSON());
   },
   addNewLink: function addNewLink() {
-    var newLink = {
-      id: this.length + 1,
+    var id = this.length ? Math.max.apply(Math, _toConsumableArray(this.pluck('id'))) + 1 : 1;
+    this.add({
+      id: id,
       title: '',
       url: '',
       thumbnail: '',
       description: '',
       open_in_new_tab: 1
-    };
-    this.add(newLink);
-    return this.get(this.length);
-  }
+    });
+    return this.get(id);
+  },
+  saveOrder: function saveOrder() {}
 });
 
 ExternalLinkCollection.forContentElement = function (contentElement, entry) {
@@ -408,6 +634,7 @@ var SidebarListView = Marionette.Layout.extend({
   onRender: function onRender() {
     this.linksContainer.show(new ListView({
       collection: this.collection,
+      sortable: true,
       onEdit: _.bind(this.onEdit, this),
       onRemove: _.bind(this.onRemove, this)
     }));
@@ -428,6 +655,8 @@ var SidebarListView = Marionette.Layout.extend({
   }
 });
 
+var img$9 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e%3c!--! Font Awesome Pro 6.1.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons%2c Inc. --%3e%3cpath fill='white' d='M384 32H64C28.65 32 0 60.66 0 96v320c0 35.34 28.65 64 64 64h320c35.35 0 64-28.66 64-64V96C448 60.66 419.3 32 384 32zM344 312c0 17.69-14.31 32-32 32s-32-14.31-32-32V245.3l-121.4 121.4C152.4 372.9 144.2 376 136 376s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L234.8 200H168c-17.69 0-32-14.31-32-32s14.31-32 32-32h144c17.69 0 32 14.31 32 32V312z'/%3e%3c/svg%3e";
+
 //router defines the URL hash path mapping and controller provides functions for the paths
 
 editor.registerSideBarRouting({
@@ -436,6 +665,8 @@ editor.registerSideBarRouting({
 }); // register external link list content element configuration editor for sidebar
 
 editor.contentElementTypes.register('externalLinkList', {
+  pictogram: img$9,
+  category: 'links',
   supportedPositions: ['inline'],
   configurationEditor: function configurationEditor(_ref) {
     var entry = _ref.entry;
@@ -462,37 +693,11 @@ editor.registerFileSelectionHandler('contentElement.externalLinks.link', functio
   };
 });
 
-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.t('pageflow_scrolled.editor.content_elements.dataWrapperChart.attributes.create_chart.label'), "\" />\n    </form>\n  ");
-  },
-  className: 'datawrapper_ad'
-});
-
-editor.contentElementTypes.register('dataWrapperChart', {
-  supportedPositions: ['inline', 'sticky', 'left', 'right', 'full'],
-  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: 'displayUrl',
-        required: true,
-        permitHttps: true
-      });
-      this.view(DatawrapperAdView);
-      this.input('title', TextInputView, {
-        placeholder: I18n.t('pageflow_scrolled.public.chart.default_title')
-      });
-      this.input('backgroundColor', ColorInputView, {
-        defaultValue: '#323d4d'
-      });
-      this.group('ContentElementCaption');
-      this.group('ContentElementPosition');
-    });
-  }
-});
+var img$a = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3e%3c!--! Font Awesome Pro 6.1.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons%2c Inc. --%3e%3cpath fill='white' d='M578.2 66.06C409.8 116.6 230.2 116.6 61.8 66.06C31 56.82 0 79.88 0 112v319.9c0 32.15 30.1 55.21 61.79 45.97c168.4-50.53 347.1-50.53 516.4-.002C608.1 487.2 640 464.1 640 431.1V112C640 79.88 609 56.82 578.2 66.06zM128 224C110.3 224 96 209.7 96 192s14.33-32 32-32c17.68 0 32 14.33 32 32S145.7 224 128 224zM474.3 388.6C423.4 380.3 371.8 376 320 376c-50.45 0-100.7 4.043-150.3 11.93c-14.14 2.246-24.11-13.19-15.78-24.84l49.18-68.56C206.1 290.4 210.9 288 216 288s9.916 2.441 12.93 6.574l32.46 44.51l93.3-139.1C357.7 194.7 362.7 192 368 192s10.35 2.672 13.31 7.125l109.1 165.1C498.1 375.9 488.1 390.8 474.3 388.6z'/%3e%3c/svg%3e";
 
 editor.contentElementTypes.register('vrImage', {
+  pictogram: img$a,
+  category: 'interactive',
   configurationEditor: function configurationEditor() {
     this.tab('general', function () {
       this.input('image', FileInputView, {
@@ -539,3 +744,32 @@ editor.fileTypes.modify('image_files', {
     }
   }]
 });
+
+var img$b = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3e%3c!--! Font Awesome Pro 6.1.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons%2c Inc. --%3e%3cpath fill='white' d='M414.8 40.79L286.8 488.8C281.9 505.8 264.2 515.6 247.2 510.8C230.2 505.9 220.4 488.2 225.2 471.2L353.2 23.21C358.1 6.216 375.8-3.624 392.8 1.232C409.8 6.087 419.6 23.8 414.8 40.79H414.8zM518.6 121.4L630.6 233.4C643.1 245.9 643.1 266.1 630.6 278.6L518.6 390.6C506.1 403.1 485.9 403.1 473.4 390.6C460.9 378.1 460.9 357.9 473.4 345.4L562.7 256L473.4 166.6C460.9 154.1 460.9 133.9 473.4 121.4C485.9 108.9 506.1 108.9 518.6 121.4V121.4zM166.6 166.6L77.25 256L166.6 345.4C179.1 357.9 179.1 378.1 166.6 390.6C154.1 403.1 133.9 403.1 121.4 390.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4L121.4 121.4C133.9 108.9 154.1 108.9 166.6 121.4C179.1 133.9 179.1 154.1 166.6 166.6V166.6z'/%3e%3c/svg%3e";
+
+var aspectRatios = ['wide', 'narrow', 'square', 'portrait'];
+editor.contentElementTypes.register('iframeEmbed', {
+  pictogram: img$b,
+  category: 'interactive',
+  featureName: 'iframe_embed_content_element',
+  supportedPositions: ['inline', 'sticky', 'left', 'right', 'wide', 'full'],
+  configurationEditor: function configurationEditor() {
+    this.tab('general', function () {
+      this.input('source', TextInputView);
+      this.input('title', TextInputView);
+      this.input('aspectRatio', SelectInputView, {
+        values: aspectRatios
+      });
+      this.input('portraitAspectRatio', SelectInputView, {
+        includeBlank: true,
+        blankTranslationKey: 'pageflow_scrolled.editor.' + 'content_elements.iframeEmbed.' + 'attributes.portraitAspectRatio.blank',
+        values: aspectRatios
+      });
+      this.input('scale', SelectInputView, {
+        values: ['p100', 'p75', 'p50', 'p33']
+      });
+      this.group('ContentElementCaption');
+      this.group('ContentElementPosition');
+    });
+  }
+});

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

@@ -1 +1 @@
-.Heading-module_root__33TFw{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-wrap:break-word;margin-top:.2em;margin-bottom:0;padding-top:.3em}@media (min-width:951px){.Heading-module_right__1TJKF{text-align:right}}.Heading-module_center__38lDY{text-align:center}@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{height:100%;--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>div{height:100%!important}.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);animation:BeforeAfter-module_SliderLeftRightShake__2mcn5 1.5s cubic-bezier(.36,.07,.19,.97)}.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);animation:BeforeAfter-module_BeforeImageLeftRightShake__38m9V 1.5s cubic-bezier(.36,.07,.19,.97)}.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);animation:BeforeAfter-module_AfterImageLeftRightShake__3WMf1 1.5s cubic-bezier(.36,.07,.19,.97)}.BeforeAfter-module_container__2Lm06 div div:nth-child(5) div{transition:opacity .1s ease-out .3s!important}@-webkit-keyframes BeforeAfter-module_BeforeImageLeftRightShake__38m9V{0%,to{clip:rect(auto,var(--initial-rect-width),auto,auto)}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{0%,to{clip:rect(auto,var(--initial-rect-width),auto,auto)}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{0%,to{clip:rect(auto,auto,auto,var(--initial-rect-width))}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{0%,to{clip:rect(auto,auto,auto,var(--initial-rect-width))}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{0%,to{margin-left:0}10%,90%{margin-left:var(--frame1px)}20%,80%{margin-left:var(--frame2px)}30%,50%,70%{margin-left:var(--frame3px)}40%,60%{margin-left:var(--frame4px)}}@keyframes BeforeAfter-module_SliderLeftRightShake__2mcn5{0%,to{margin-left:0}10%,90%{margin-left:var(--frame1px)}20%,80%{margin-left:var(--frame2px)}30%,50%,70%{margin-left:var(--frame3px)}40%,60%{margin-left:var(--frame4px)}}.SoundDisclaimer-module_soundDisclaimer__31hWh{display:grid;border:1px solid;border-radius:4px;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.SoundDisclaimer-module_unmute__1V4Ab,.SoundDisclaimer-module_unmuted__22CJ5{grid-column:1;grid-row:1;display:flex;align-items:center;transition-property:opacity,visibility;transition-duration:.09s;transition-timing-function:ease-out;opacity:0;visibility:hidden;padding:0 15px}.SoundDisclaimer-module_unmute__1V4Ab{position:relative;border:0;background-color:transparent;font:inherit;color:currentColor;text-align:initial;width:100%;z-index:1;cursor:pointer}.SoundDisclaimer-module_active__11_kc{opacity:1;visibility:visible;transition-delay:.09s;transition-duration:.21s;transition-timing-function:ease-in}.SoundDisclaimer-module_soundDisclaimer__31hWh svg{flex:0 0 25px;fill:currentColor;margin-right:15px}.TextBlock-module_text__21Hk4 h2,.TextBlock-module_text__21Hk4 li,.TextBlock-module_text__21Hk4 p{margin:1em 0 0}.TextBlock-module_text__21Hk4 h2{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-wrap:break-word}.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;clear:both}.TextBlock-module_text__21Hk4 blockquote{padding:.5em 1em .5em 2em;margin:1em 0 0 .5em;position:relative;overflow:hidden}.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_VideoEmbed__3BUjc{background-color:#000;color:#fff}.VideoEmbed-module_embedPlayer__54NKG{position:absolute;top:0;left:0;bottom:0;right:0}.ExternalLink-module_hidden__3jer0{display:none}.ExternalLink-module_link_item__Blypv{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%}.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}@media only screen and (max-width:600px){.ExternalLink-module_link_item__Blypv.ExternalLink-module_layout_center__3NRpQ{width:45%}}@media only screen and (max-width:350px){.ExternalLink-module_link_item__Blypv,.ExternalLink-module_link_item__Blypv.ExternalLink-module_layout_center__3NRpQ{width:85%}}.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:auto;position:relative;transition:opacity .5s;transition-timing-function:cubic-bezier(.1,.57,.1,1);transition-duration:0ms}.DataWrapperChart-module_container__2eZ15{min-height:200px;padding:20px 5%}.DataWrapperChart-module_container__2eZ15>iframe{width:100%;height:100%;position:relative;top:0;border:0}
+.Heading-module_root__33TFw{margin-top:.2em;margin-bottom:0;padding-top:.3em}@media (min-width:951px){.Heading-module_right__1TJKF{text-align:right}}.Heading-module_center__38lDY,.Heading-module_centerRagged__388sq{text-align:center}@media (orientation:landscape){.Heading-module_first__1PMJX{padding-top:var(--theme-first-heading-landscape-padding-top,25%)}}.BeforeAfter-module_sliderStart__2C5cN{background-color:#fff;position:absolute;z-index:1}.BeforeAfter-module_container__2Lm06{height:100%;--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>div{height:100%!important}.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);animation:BeforeAfter-module_SliderLeftRightShake__2mcn5 1.5s cubic-bezier(.36,.07,.19,.97)}.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);animation:BeforeAfter-module_BeforeImageLeftRightShake__38m9V 1.5s cubic-bezier(.36,.07,.19,.97)}.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);animation:BeforeAfter-module_AfterImageLeftRightShake__3WMf1 1.5s cubic-bezier(.36,.07,.19,.97)}.BeforeAfter-module_container__2Lm06 div div:nth-child(5) div{transition:opacity .1s ease-out .3s!important}@-webkit-keyframes BeforeAfter-module_BeforeImageLeftRightShake__38m9V{0%,to{clip:rect(auto,var(--initial-rect-width),auto,auto)}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{0%,to{clip:rect(auto,var(--initial-rect-width),auto,auto)}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{0%,to{clip:rect(auto,auto,auto,var(--initial-rect-width))}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{0%,to{clip:rect(auto,auto,auto,var(--initial-rect-width))}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{0%,to{margin-left:0}10%,90%{margin-left:var(--frame1px)}20%,80%{margin-left:var(--frame2px)}30%,50%,70%{margin-left:var(--frame3px)}40%,60%{margin-left:var(--frame4px)}}@keyframes BeforeAfter-module_SliderLeftRightShake__2mcn5{0%,to{margin-left:0}10%,90%{margin-left:var(--frame1px)}20%,80%{margin-left:var(--frame2px)}30%,50%,70%{margin-left:var(--frame3px)}40%,60%{margin-left:var(--frame4px)}}.MutedIndicator-module_wrapper__17JUY{position:absolute;right:0;top:0;color:#fff;background:linear-gradient(30deg,transparent,transparent 60%,rgba(0,0,0,.65));padding:5px 5px 40px 70px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:1}.MutedIndicator-module_visible__3qARn{opacity:1}.MutedIndicator-module_eqBar__1cMDE{transform:scaleY(-1) translateY(-24px);fill:#fff}.MutedIndicator-module_eqBar1__2Ap_R{-webkit-animation-name:MutedIndicator-module_short-eq__1OYlk;animation-name:MutedIndicator-module_short-eq__1OYlk;-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:0s;animation-delay:0s}.MutedIndicator-module_eqBar2__2QTgX{-webkit-animation-name:MutedIndicator-module_tall-eq__6gm0B;animation-name:MutedIndicator-module_tall-eq__6gm0B;-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:.17s;animation-delay:.17s}.MutedIndicator-module_eqBar3__2S-y3{-webkit-animation-name:MutedIndicator-module_short-eq__1OYlk;animation-name:MutedIndicator-module_short-eq__1OYlk;-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:.34s;animation-delay:.34s}@-webkit-keyframes MutedIndicator-module_short-eq__1OYlk{0%{height:8px}50%{height:4px}to{height:8px}}@keyframes MutedIndicator-module_short-eq__1OYlk{0%{height:8px}50%{height:4px}to{height:8px}}@-webkit-keyframes MutedIndicator-module_tall-eq__6gm0B{0%{height:16px}50%{height:6px}to{height:16px}}@keyframes MutedIndicator-module_tall-eq__6gm0B{0%{height:16px}50%{height:6px}to{height:16px}}.SoundDisclaimer-module_soundDisclaimer__31hWh{display:grid;border:1px solid;border-radius:4px;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.SoundDisclaimer-module_unmute__1V4Ab,.SoundDisclaimer-module_unmuted__22CJ5{grid-column:1;grid-row:1;display:flex;align-items:center;transition-property:opacity,visibility;transition-duration:.09s;transition-timing-function:ease-out;opacity:0;visibility:hidden;padding:0 15px}.SoundDisclaimer-module_unmute__1V4Ab{position:relative;border:0;background-color:transparent;font:inherit;color:currentColor;text-align:initial;width:100%;z-index:1;cursor:pointer}.SoundDisclaimer-module_active__11_kc{opacity:1;visibility:visible;transition-delay:.09s;transition-duration:.21s;transition-timing-function:ease-in}.SoundDisclaimer-module_soundDisclaimer__31hWh svg{flex:0 0 25px;fill:currentColor;margin-right:15px}.TextBlock-module_text__21Hk4 li,.TextBlock-module_text__21Hk4 p{margin:1em 0 0}.TextBlock-module_text__21Hk4 h2{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-wrap:break-word}.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;clear:both}.TextBlock-module_text__21Hk4 blockquote{padding:.5em 1em .5em 2em;margin:1em 0 0 .5em;position:relative;overflow:hidden}.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}.TextBlock-module_layout-centerRagged__1tjoI{text-align:center}.TextBlock-module_layout-centerRagged__1tjoI ol,.TextBlock-module_layout-centerRagged__1tjoI ul{padding-left:0;list-style-position:inside}.VideoEmbed-module_embedPlayer__54NKG{position:absolute;top:0;left:0;bottom:0;right:0;background-color:#000;color:#fff}.ExternalLink-module_hidden__3jer0{display:none}.ExternalLink-module_link_item__Blypv{width:45%;vertical-align:top;margin:2% auto;background-color:var(--theme-light-content-surface-color,#fff);color:var(--theme-dark-content-text-color,#222);text-decoration:none;transition:transform .3s;border-radius:var(--theme-content-element-box-border-radius);overflow:hidden;will-change:transform}.ExternalLink-module_link_item__Blypv.ExternalLink-module_invert__1zrgN{background-color:var(--theme-dark-content-surface-color,#101010);color:var(--theme-light-content-text-color,#fff)}.ExternalLink-module_link_item__Blypv.ExternalLink-module_layout_center__3NRpQ{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;opacity:.9;font-size:13px;text-align:center;white-space:normal}.ExternalLink-module_tooltip__18MpC>span{display:block;color:#fff;text-decoration:underline}@media only screen and (max-width:600px){.ExternalLink-module_link_item__Blypv.ExternalLink-module_layout_center__3NRpQ{width:45%}}@media only screen and (max-width:350px){.ExternalLink-module_link_item__Blypv,.ExternalLink-module_link_item__Blypv.ExternalLink-module_layout_center__3NRpQ{width:85%}}.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:auto;position:relative;transition:opacity .5s;transition-timing-function:cubic-bezier(.1,.57,.1,1);transition-duration:0ms}.DataWrapperChart-module_container__2eZ15{min-height:200px;padding:20px 5%}.DataWrapperChart-module_container__2eZ15>iframe{width:100%;height:100%;position:relative;top:0;border:0}.IframeEmbed-module_wrapper__3w_LN{overflow:hidden}.IframeEmbed-module_iframe__3QVCA{width:100%;height:100%;border:none;transform-origin:0 0}.IframeEmbed-module_scale-p33__MRjVy{width:300%;height:300%;transform:scale(.333)}.IframeEmbed-module_scale-p50__1EKxu{width:200%;height:200%;transform:scale(.5)}.IframeEmbed-module_scale-p75__1yT4D{width:133.333%;height:133.333%;transform:scale(.75)}