import { useContentElementConfigurationUpdate, useI18n, withShadowClassName, Text, EditableInlineText, frontend, useFile, useContentElementEditorState, ViewportDependentPillarBoxes, useContentElementLifecycle, Figure, Image, usePlayerState, useAudioFocus, MediaInteractionTracking, VideoPlayerControls, VideoPlayer, AudioPlayerControls, AudioPlayer, useMediaMuted, EditableText, ThirdPartyOptOutInfo, ThirdPartyOptIn, useDarkBackground, textColorForBackgroundColor } from 'pageflow-scrolled/frontend';
import React, { useRef, useState, useEffect } from 'react';
import classNames from 'classnames';
import ReactCompareImage from 'react-compare-image';
import { media } from 'pageflow/frontend';
import ReactPlayer from 'react-player';

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

var styles = {"root":"Heading-module_root__33TFw","first":"Heading-module_first__1PMJX"};

function Heading(_ref) {
  var configuration = _ref.configuration,
      sectionProps = _ref.sectionProps;
  var level = configuration.level || sectionProps.sectionIndex;
  var firstSectionInEntry = level === 0;
  var updateConfiguration = useContentElementConfigurationUpdate();

  var _useI18n = useI18n({
    locale: 'ui'
  }),
      t = _useI18n.t;

  var legacyValue = configuration.children;
  return (
    /*#__PURE__*/
    React.createElement("h1", {
      className: classNames(styles.root, _defineProperty({}, styles.first, firstSectionInEntry), _defineProperty({}, withShadowClassName, !sectionProps.invert))
    },
    /*#__PURE__*/
    React.createElement(Text, {
      scaleCategory: firstSectionInEntry ? 'h1' : 'h2',
      inline: true
    },
    /*#__PURE__*/
    React.createElement(EditableInlineText, {
      value: configuration.value,
      defaultValue: legacyValue,
      placeholder: firstSectionInEntry ? t('pageflow_scrolled.inline_editing.type_title') : t('pageflow_scrolled.inline_editing.type_heading'),
      onChange: function onChange(value) {
        return updateConfiguration({
          value: value
        });
      }
    })))
  );
}

frontend.contentElementTypes.register('heading', {
  component: Heading
});

function ownKeys(object, enumerableOnly) {
  var keys = Object.keys(object);

  if (Object.getOwnPropertySymbols) {
    var symbols = Object.getOwnPropertySymbols(object);
    if (enumerableOnly) symbols = symbols.filter(function (sym) {
      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
    });
    keys.push.apply(keys, symbols);
  }

  return keys;
}

function _objectSpread2(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};

    if (i % 2) {
      ownKeys(Object(source), true).forEach(function (key) {
        _defineProperty(target, key, source[key]);
      });
    } else if (Object.getOwnPropertyDescriptors) {
      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
      ownKeys(Object(source)).forEach(function (key) {
        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
      });
    }
  }

  return target;
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

function _iterableToArrayLimit(arr, i) {
  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
  var _arr = [];
  var _n = true;
  var _d = false;
  var _e = undefined;

  try {
    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
      _arr.push(_s.value);

      if (i && _arr.length === i) break;
    }
  } catch (err) {
    _d = true;
    _e = err;
  } finally {
    try {
      if (!_n && _i["return"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }

  return _arr;
}

function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;

  for (var i = 0, arr2 = new Array(len); i < len; i++) {
    arr2[i] = arr[i];
  }

  return arr2;
}

function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(n);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}

function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}

var styles$1 = {"sliderStart":"BeforeAfter-module_sliderStart__2C5cN","container":"BeforeAfter-module_container__2Lm06","wiggle":"BeforeAfter-module_wiggle__3nVSe","SliderLeftRightShake":"BeforeAfter-module_SliderLeftRightShake__2mcn5","BeforeImageLeftRightShake":"BeforeAfter-module_BeforeImageLeftRightShake__38m9V","AfterImageLeftRightShake":"BeforeAfter-module_AfterImageLeftRightShake__3WMf1"};

var placeholderForBeforeImage = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQwIiBoZWlnaHQ9IjQwMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDwhLS0gQ3JlYXRlZCB3aXRoIE1ldGhvZCBEcmF3IC0gaHR0cDovL2dpdGh1Yi5jb20vZHVvcGl4ZWwvTWV0aG9kLURyYXcvIC0tPgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9IiMzZDVhODAiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDUiIHdpZHRoPSI2NDIiIHk9Ii0xIiB4PSItMSIvPgogIDxnIGRpc3BsYXk9Im5vbmUiIG92ZXJmbG93PSJ2aXNpYmxlIiB5PSIwIiB4PSIwIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiBpZD0iY2FudmFzR3JpZCI+CiAgIDxyZWN0IGZpbGw9InVybCgjZ3JpZHBhdHRlcm4pIiBzdHJva2Utd2lkdGg9IjAiIHk9IjAiIHg9IjAiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiLz4KICA8L2c+CiA8L2c+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiA8L2c+Cjwvc3ZnPg==';
var placeholderForAfterImage = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQwIiBoZWlnaHQ9IjQwMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDwhLS0gQ3JlYXRlZCB3aXRoIE1ldGhvZCBEcmF3IC0gaHR0cDovL2dpdGh1Yi5jb20vZHVvcGl4ZWwvTWV0aG9kLURyYXcvIC0tPgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9IiM5OGMxZDkiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDUiIHdpZHRoPSI2NDIiIHk9Ii0xIiB4PSItMSIvPgogIDxnIGRpc3BsYXk9Im5vbmUiIG92ZXJmbG93PSJ2aXNpYmxlIiB5PSIwIiB4PSIwIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiBpZD0iY2FudmFzR3JpZCI+CiAgIDxyZWN0IGZpbGw9InVybCgjZ3JpZHBhdHRlcm4pIiBzdHJva2Utd2lkdGg9IjAiIHk9IjAiIHg9IjAiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiLz4KICA8L2c+CiA8L2c+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiA8L2c+Cjwvc3ZnPg==';
var placeholderFile = {
  width: 640,
  height: 403
};
function BeforeAfter(_ref) {
  var _cx;

  var isActive = _ref.isActive,
      load = _ref.load,
      position = _ref.position,
      before_id = _ref.before_id,
      before_label = _ref.before_label,
      after_id = _ref.after_id,
      after_label = _ref.after_label,
      initial_slider_position = _ref.initial_slider_position,
      slider = _ref.slider,
      slider_color = _ref.slider_color,
      slider_handle = _ref.slider_handle;
  var beforeAfterRef = useRef();
  var current = beforeAfterRef.current;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      wiggled = _useState2[0],
      setWiggled = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      wiggle = _useState4[0],
      setWiggle = _useState4[1];

  useEffect(function () {
    var node = current;

    if (node) {
      // Only wiggle once per element, when it is active for the first
      // time
      var shouldWiggle = !wiggled && isActive;
      setWiggle(shouldWiggle); // If wiggle was just set, mark this element as one that already
      // wiggled

      !wiggled && setWiggled(shouldWiggle);
    }
  }, [isActive, current]);
  var beforeImage = useFile({
    collectionName: 'imageFiles',
    permaId: before_id
  });
  var afterImage = useFile({
    collectionName: 'imageFiles',
    permaId: after_id
  });

  var _useContentElementEdi = useContentElementEditorState(),
      isSelected = _useContentElementEdi.isSelected;

  var beforeImageUrl = beforeImage && beforeImage.urls.large;
  var beforeImageAlt = beforeImage && beforeImage.configuration.alt;
  var afterImageUrl = afterImage && afterImage.urls.large;
  var afterImageAlt = afterImage && afterImage.configuration.alt;
  var initialSliderPos = initial_slider_position / 100;
  var opts = {}; // Transform slider-related props into the format that
  // react-compare-image needs

  if (!slider) {
    opts = _objectSpread2(_objectSpread2({}, opts), {}, {
      sliderLineWidth: 0,
      handle:
      /*#__PURE__*/
      React.createElement(React.Fragment, null)
    });
  }

  if (slider) {
    if (!slider_handle) {
      opts = _objectSpread2(_objectSpread2({}, opts), {}, {
        handle:
        /*#__PURE__*/
        React.createElement(React.Fragment, null)
      });
    }

    if (slider_color) {
      opts = _objectSpread2(_objectSpread2({}, opts), {}, {
        sliderLineColor: slider_color
      });
    }
  } //Since the slider wiggle only the first time, set the variable once for performance purpose.


  useEffect(function () {
    if (beforeAfterRef.current) {
      // Compute initial slider coordinate and pass it as a CSS
      // variable, so that before/after images can wiggle together with
      // the slider
      var containerWidth = beforeAfterRef.current.getBoundingClientRect().width;
      var initialRectWidth = initialSliderPos * containerWidth;
      beforeAfterRef.current.style.setProperty('--initial-rect-width', initialRectWidth + 'px');
    }
  }, [wiggled, initialSliderPos]);
  return (
    /*#__PURE__*/
    React.createElement(ViewportDependentPillarBoxes, {
      file: beforeImage || afterImage || placeholderFile,
      position: position
    },
    /*#__PURE__*/
    React.createElement("div", {
      ref: beforeAfterRef,
      className: classNames((_cx = {}, _defineProperty(_cx, styles$1.selected, isSelected), _defineProperty(_cx, styles$1.wiggle, wiggle), _cx), styles$1.container)
    },
    /*#__PURE__*/
    React.createElement(InitialSliderPositionIndicator, {
      parentSelected: isSelected,
      position: initial_slider_position
    }), renderCompareImage()))
  );

  function renderCompareImage() {
    if (!load) {
      return null;
    }

    return (
      /*#__PURE__*/
      React.createElement(ReactCompareImage, Object.assign({
        leftImage: beforeImage ? beforeImageUrl : placeholderForBeforeImage,
        rightImage: afterImage ? afterImageUrl : placeholderForAfterImage,
        leftImageLabel: before_label,
        rightImageLabel: after_label,
        leftImageAlt: beforeImageAlt,
        rightImageAlt: afterImageAlt,
        sliderPositionPercentage: initialSliderPos,
        onSliderPositionChange: function onSliderPositionChange() {
          return setWiggle(false);
        }
      }, opts))
    );
  }
}

function InitialSliderPositionIndicator(_ref2) {
  var parentSelected = _ref2.parentSelected,
      position = _ref2.position;
  var indicatorWidth = '2px';
  var indicatorStyles = {
    left: "calc(".concat(position, "% - ").concat(indicatorWidth, "/2)"),
    width: "".concat(indicatorWidth),
    height: '100%',
    borderLeft: '1px solid black',
    borderRight: '1px solid black'
  }; // In case this element is selected, and its initial slider position
  // is not in the middle, we show InitialSliderPositionIndicator

  return parentSelected && position !== 50 ?
  /*#__PURE__*/
  React.createElement("div", {
    className: styles$1.sliderStart,
    style: indicatorStyles
  }) : '';
}

function InlineBeforeAfter(props) {
  var _useContentElementLif = useContentElementLifecycle(),
      isActive = _useContentElementLif.isActive,
      shouldLoad = _useContentElementLif.shouldLoad;

  return (
    /*#__PURE__*/
    React.createElement(BeforeAfter, Object.assign({}, props.configuration, {
      load: shouldLoad,
      isActive: isActive
    }))
  );
}

frontend.contentElementTypes.register('inlineBeforeAfter', {
  component: InlineBeforeAfter,
  lifecycle: true
});

function InlineImage(_ref) {
  var configuration = _ref.configuration;

  var _useContentElementLif = useContentElementLifecycle(),
      shouldLoad = _useContentElementLif.shouldLoad;

  var imageFile = useFile({
    collectionName: 'imageFiles',
    permaId: configuration.id
  });
  return (
    /*#__PURE__*/
    React.createElement(Figure, {
      caption: configuration.caption
    },
    /*#__PURE__*/
    React.createElement(ViewportDependentPillarBoxes, {
      file: imageFile,
      aspectRatio: imageFile ? undefined : 0.75,
      position: configuration.position,
      opaque: !!configuration.caption
    },
    /*#__PURE__*/
    React.createElement(Image, {
      imageFile: imageFile,
      load: shouldLoad,
      structuredData: true,
      variant: configuration.position === 'full' ? 'large' : 'medium'
    })))
  );
}

frontend.contentElementTypes.register('inlineImage', {
  component: InlineImage,
  lifecycle: true
});

function InlineVideo(_ref) {
  var contentElementId = _ref.contentElementId,
      sectionProps = _ref.sectionProps,
      configuration = _ref.configuration;
  var videoFile = useFile({
    collectionName: 'videoFiles',
    permaId: configuration.id
  });
  var posterImageFile = useFile({
    collectionName: 'imageFiles',
    permaId: configuration.posterId
  });

  var _usePlayerState = usePlayerState(),
      _usePlayerState2 = _slicedToArray(_usePlayerState, 2),
      playerState = _usePlayerState2[0],
      playerActions = _usePlayerState2[1];

  var _useContentElementEdi = useContentElementEditorState(),
      isEditable = _useContentElementEdi.isEditable,
      isSelected = _useContentElementEdi.isSelected;

  var _useContentElementLif = useContentElementLifecycle({
    onActivate: function onActivate() {
      if (configuration.autoplay) {
        playerActions.play();
      }
    },
    onDeactivate: function onDeactivate() {
      playerActions.fadeOutAndPause(400);
    }
  }),
      shouldLoad = _useContentElementLif.shouldLoad,
      shouldPrepare = _useContentElementLif.shouldPrepare;

  useAudioFocus({
    key: contentElementId,
    request: playerState.shouldPlay,
    onLost: function onLost() {
      playerActions.fadeOutAndPause(400);
    }
  });

  var onPlayerClick = function onPlayerClick() {
    if (isEditable && !isSelected) {
      return;
    }

    if (!playerState.shouldPlay || media.muted) {
      playerActions.playBlessed();
    } else {
      playerActions.pause();
    }
  };

  return (
    /*#__PURE__*/
    React.createElement(Figure, {
      caption: configuration.caption
    },
    /*#__PURE__*/
    React.createElement(MediaInteractionTracking, {
      playerState: playerState,
      playerActions: playerActions
    },
    /*#__PURE__*/
    React.createElement(VideoPlayerControls, {
      videoFile: videoFile,
      defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
      playerState: playerState,
      playerActions: playerActions,
      configuration: configuration,
      sectionProps: sectionProps,
      onPlayerClick: onPlayerClick
    },
    /*#__PURE__*/
    React.createElement(VideoPlayer, {
      load: shouldPrepare ? 'auto' : shouldLoad ? 'poster' : 'none',
      position: configuration.position,
      controls: configuration.controls,
      playerState: playerState,
      playerActions: playerActions,
      videoFile: videoFile,
      posterImageFile: posterImageFile,
      defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
      quality: 'high',
      playsInline: true,
      atmoDuringPlayback: configuration.atmoDuringPlayback
    }))))
  );
}

frontend.contentElementTypes.register('inlineVideo', {
  component: InlineVideo,
  lifecycle: true
});

function InlineAudio(_ref) {
  var contentElementId = _ref.contentElementId,
      sectionProps = _ref.sectionProps,
      configuration = _ref.configuration;
  var audioFile = useFile({
    collectionName: 'audioFiles',
    permaId: configuration.id
  });
  var posterImageFile = useFile({
    collectionName: 'imageFiles',
    permaId: configuration.posterId
  });

  var _usePlayerState = usePlayerState(),
      _usePlayerState2 = _slicedToArray(_usePlayerState, 2),
      playerState = _usePlayerState2[0],
      playerActions = _usePlayerState2[1];

  var _useContentElementEdi = useContentElementEditorState(),
      isEditable = _useContentElementEdi.isEditable,
      isSelected = _useContentElementEdi.isSelected;

  var _useContentElementLif = useContentElementLifecycle({
    onActivate: function onActivate() {
      if (configuration.autoplay && !media.muted) {
        playerActions.play();
      }
    },
    onDeactivate: function onDeactivate() {
      playerActions.fadeOutAndPause(400);
    }
  }),
      shouldLoad = _useContentElementLif.shouldLoad,
      shouldPrepare = _useContentElementLif.shouldPrepare;

  useAudioFocus({
    key: contentElementId,
    request: playerState.shouldPlay,
    onLost: function onLost() {
      playerActions.fadeOutAndPause(400);
    }
  });

  var onPlayerClick = function onPlayerClick() {
    if (isEditable && !isSelected) {
      return;
    }

    if (playerState.shouldPlay) {
      playerActions.pause();
    } else {
      playerActions.playBlessed();
    }
  };

  return (
    /*#__PURE__*/
    React.createElement(Figure, {
      caption: configuration.caption
    },
    /*#__PURE__*/
    React.createElement(AudioPlayerControls, {
      audioFile: audioFile,
      defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
      playerState: playerState,
      playerActions: playerActions,
      standAlone: !posterImageFile,
      configuration: configuration,
      sectionProps: sectionProps,
      onPlayerClick: onPlayerClick
    },
    /*#__PURE__*/
    React.createElement(AudioPlayer, {
      load: shouldPrepare ? 'auto' : shouldLoad ? 'poster' : 'none',
      position: configuration.position,
      controls: configuration.controls,
      playerState: playerState,
      playerActions: playerActions,
      audioFile: audioFile,
      posterImageFile: posterImageFile,
      defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
      quality: 'high',
      playsInline: true,
      atmoDuringPlayback: configuration.atmoDuringPlayback
    })))
  );
}

frontend.contentElementTypes.register('inlineAudio', {
  component: InlineAudio,
  lifecycle: true
});

var styles$2 = {"soundDisclaimer":"SoundDisclaimer-module_soundDisclaimer__31hWh","unmute":"SoundDisclaimer-module_unmute__1V4Ab","unmuted":"SoundDisclaimer-module_unmuted__22CJ5","active":"SoundDisclaimer-module_active__11_kc"};

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

function _objectWithoutProperties(source, excluded) {
  if (source == null) return {};
  var target = _objectWithoutPropertiesLoose(source, excluded);
  var key, i;

  if (Object.getOwnPropertySymbols) {
    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);

    for (i = 0; i < sourceSymbolKeys.length; i++) {
      key = sourceSymbolKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
      target[key] = source[key];
    }
  }

  return target;
}

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}
var MutedIcon = (function (_ref) {
  var _ref$styles = _ref.styles,
      styles = _ref$styles === void 0 ? {} : _ref$styles,
      props = _objectWithoutProperties(_ref, ["styles"]);

  return React.createElement("svg", _extends({
    "aria-hidden": "true",
    "data-prefix": "fas",
    "data-icon": "volume-mute",
    className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-volume-mute"] || "fa-volume-mute") + " " + (styles["fa-w-16"] || "fa-w-16"),
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 512 512"
  }, props), React.createElement("path", {
    d: "M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zM461.64 256l45.64-45.64c6.3-6.3 6.3-16.52 0-22.82l-22.82-22.82c-6.3-6.3-16.52-6.3-22.82 0L416 210.36l-45.64-45.64c-6.3-6.3-16.52-6.3-22.82 0l-22.82 22.82c-6.3 6.3-6.3 16.52 0 22.82L370.36 256l-45.63 45.63c-6.3 6.3-6.3 16.52 0 22.82l22.82 22.82c6.3 6.3 16.52 6.3 22.82 0L416 301.64l45.64 45.64c6.3 6.3 16.52 6.3 22.82 0l22.82-22.82c6.3-6.3 6.3-16.52 0-22.82L461.64 256z"
  }));
});

function _extends$1() {
  _extends$1 = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends$1.apply(this, arguments);
}
var UnmutedIcon = (function (_ref) {
  var _ref$styles = _ref.styles,
      styles = _ref$styles === void 0 ? {} : _ref$styles,
      props = _objectWithoutProperties(_ref, ["styles"]);

  return React.createElement("svg", _extends$1({
    "aria-hidden": "true",
    "data-prefix": "fas",
    "data-icon": "volume-mute",
    className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-volume-mute"] || "fa-volume-mute") + " " + (styles["fa-w-16"] || "fa-w-16"),
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 512 512"
  }, props), React.createElement("path", {
    d: "M232.36 64.01a24.007 24.007 0 00-1.176.002c-5.703.15-11.464 2.348-16.155 7.039L126.061 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-14.293-11.514-23.733-23.64-24.01zm149.5 31.994c-8.107-.16-16.098 3.814-20.75 11.217-7.09 11.28-3.78 26.21 7.41 33.36C408.27 165.97 432 209.11 432 256s-23.73 90.03-63.48 115.42c-11.19 7.14-14.5 22.07-7.41 33.36 6.51 10.36 21.12 15.14 33.12 7.46C447.94 377.94 480 319.54 480 256c0-63.53-32.06-121.94-85.77-156.24a23.808 23.808 0 00-12.37-3.756zm-55.032 80.174c-8.51-.046-16.795 4.42-21.209 12.402-6.39 11.61-2.159 26.2 9.451 32.61C327.98 228.28 336 241.63 336 256c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88 0-31.88-17.54-61.32-45.78-76.86a23.987 23.987 0 00-11.402-2.952z"
  }));
});

function SoundDisclaimer() {
  var _useContentElementEdi = useContentElementEditorState(),
      isEditable = _useContentElementEdi.isEditable,
      isSelected = _useContentElementEdi.isSelected;

  var _useI18n = useI18n(),
      t = _useI18n.t;

  var muted = useMediaMuted();
  return (
    /*#__PURE__*/
    React.createElement("div", {
      className: classNames(styles$2.soundDisclaimer),
      style: {
        pointerEvents: isEditable && !isSelected ? 'none' : undefined
      }
    },
    /*#__PURE__*/
    React.createElement("button", {
      className: classNames(styles$2.unmute, _defineProperty({}, styles$2.active, muted)),
      onClick: function onClick() {
        return media.mute(false);
      }
    },
    /*#__PURE__*/
    React.createElement(MutedIcon, null),
    /*#__PURE__*/
    React.createElement("p", {
      dangerouslySetInnerHTML: {
        __html: t('pageflow_scrolled.public.sound_disclaimer.help_muted')
      }
    })),
    /*#__PURE__*/
    React.createElement("div", {
      className: classNames(styles$2.unmuted, _defineProperty({}, styles$2.active, !muted))
    },
    /*#__PURE__*/
    React.createElement(UnmutedIcon, null),
    /*#__PURE__*/
    React.createElement("p", {
      dangerouslySetInnerHTML: {
        __html: t('pageflow_scrolled.public.sound_disclaimer.help_unmuted')
      }
    })))
  );
}

frontend.contentElementTypes.register('soundDisclaimer', {
  component: SoundDisclaimer
});

var styles$3 = {"text":"TextBlock-module_text__21Hk4"};

function TextBlock(props) {
  var updateConfiguration = useContentElementConfigurationUpdate();

  var _useI18n = useI18n({
    locale: 'ui'
  }),
      t = _useI18n.t;

  return (
    /*#__PURE__*/
    React.createElement("div", {
      className: styles$3.text
    },
    /*#__PURE__*/
    React.createElement(EditableText, {
      value: props.configuration.value,
      contentElementId: props.contentElementId,
      placeholder: t('pageflow_scrolled.inline_editing.type_text'),
      onChange: function onChange(value) {
        return updateConfiguration({
          value: value
        });
      }
    }))
  );
}

frontend.contentElementTypes.register('textBlock', {
  component: TextBlock,
  customSelectionRect: true,
  supportsWrappingAroundFloats: true
});

var styles$4 = {"VideoEmbed":"VideoEmbed-module_VideoEmbed__3BUjc","embedPlayer":"VideoEmbed-module_embedPlayer__54NKG"};

var aspectRatios = {
  wide: 0.5625,
  narrow: 0.75,
  square: 1,
  portrait: 1.7777
};
function VideoEmbed(_ref) {
  var contentElementId = _ref.contentElementId,
      configuration = _ref.configuration;

  var _useContentElementEdi = useContentElementEditorState(),
      isEditable = _useContentElementEdi.isEditable,
      isSelected = _useContentElementEdi.isSelected;

  var _useContentElementLif = useContentElementLifecycle(),
      shouldLoad = _useContentElementLif.shouldLoad;

  var _useState = useState('unplayed'),
      _useState2 = _slicedToArray(_useState, 2),
      playerState = _useState2[0],
      setPlayerState = _useState2[1];

  return (
    /*#__PURE__*/
    React.createElement("div", {
      className: styles$4.VideoEmbed,
      style: {
        pointerEvents: isEditable && !isSelected ? 'none' : undefined
      }
    },
    /*#__PURE__*/
    React.createElement(Figure, {
      caption: configuration.caption
    },
    /*#__PURE__*/
    React.createElement(ViewportDependentPillarBoxes, {
      aspectRatio: aspectRatios[configuration.aspectRatio || 'wide'],
      position: configuration.position,
      opaque: !!configuration.caption
    }, shouldLoad &&
    /*#__PURE__*/
    React.createElement(PreparedPlayer, {
      playerState: playerState,
      setPlayerState: setPlayerState,
      contentElementId: contentElementId,
      configuration: configuration
    })),
    /*#__PURE__*/
    React.createElement(ThirdPartyOptOutInfo, {
      providerName: "video",
      hide: playerState === 'playing',
      contentElementPosition: configuration.position
    })))
  );
}

function PreparedPlayer(_ref2) {
  var contentElementId = _ref2.contentElementId,
      configuration = _ref2.configuration,
      playerState = _ref2.playerState,
      setPlayerState = _ref2.setPlayerState;
  useAudioFocus({
    key: contentElementId,
    request: playerState === 'playing',
    onLost: function onLost() {
      setPlayerState('paused');
    }
  }); // base64-encoded configuration
  // => make component re-render on configuration changes

  function keyFromConfiguration(config) {
    return btoa(JSON.stringify(config));
  }

  return (
    /*#__PURE__*/
    React.createElement(ThirdPartyOptIn, {
      providerName: "video"
    }, function (_ref3) {
      var consentedHere = _ref3.consentedHere;
      return (
        /*#__PURE__*/
        React.createElement(ReactPlayer, {
          className: styles$4.embedPlayer,
          key: keyFromConfiguration(configuration),
          url: configuration.videoSource,
          playing: playerState !== 'paused',
          onPlay: function onPlay() {
            return setPlayerState('playing');
          },
          onPause: function onPause() {
            return setPlayerState('paused');
          },
          onEnded: function onEnded() {
            return setPlayerState('paused');
          },
          light: !consentedHere && playerState === 'unplayed',
          width: "100%",
          height: "100%",
          controls: !configuration.hideControls,
          config: {
            youtube: {
              playerVars: {
                showinfo: !configuration.hideInfo
              }
            },
            vimeo: {
              playerOptions: {
                byline: !configuration.hideInfo
              }
            }
          }
        })
      );
    })
  );
}

frontend.contentElementTypes.register('videoEmbed', {
  component: VideoEmbed,
  lifecycle: true
});

var styles$5 = {"hidden":"ExternalLink-module_hidden__3jer0","link_item":"ExternalLink-module_link_item__Blypv","invert":"ExternalLink-module_invert__1zrgN","layout_center":"ExternalLink-module_layout_center__3NRpQ","link_title":"ExternalLink-module_link_title__FZJ-0","link_thumbnail":"ExternalLink-module_link_thumbnail__2_BHq","link_details":"ExternalLink-module_link_details__lRhKU","link_desc":"ExternalLink-module_link_desc__3fSe1","tooltip":"ExternalLink-module_tooltip__18MpC"};

function ExternalLink(props) {
  var _classNames2;

  var _useState = useState(true),
      _useState2 = _slicedToArray(_useState, 2),
      hideTooltip = _useState2[0],
      setHideTooltip = _useState2[1];

  var layout = props.sectionProps.layout;

  var _useI18n = useI18n({
    locale: 'ui'
  }),
      t = _useI18n.t;

  var _useContentElementEdi = useContentElementEditorState(),
      isEditable = _useContentElementEdi.isEditable,
      isSelected = _useContentElementEdi.isSelected;

  var thumbnailImageFile = useFile({
    collectionName: 'imageFiles',
    permaId: props.thumbnail
  });

  var onClick = function onClick(event) {
    if (isEditable) {
      if (!props.open_in_new_tab || !isSelected) {
        event.preventDefault();
      }

      if (!props.open_in_new_tab && isSelected) {
        setHideTooltip(false);
      }
    }
  };

  var onMouseLeave = function onMouseLeave() {
    setHideTooltip(true);
  };

  function renderNewTabTooltip() {
    if (isEditable) {
      var onTooltipClick = function onTooltipClick() {
        window.open(props.url, '_blank');
        setHideTooltip(true);
      };

      return (
        /*#__PURE__*/
        React.createElement("div", {
          className: classNames(_defineProperty({}, styles$5.hidden, hideTooltip), styles$5.tooltip),
          onClick: onTooltipClick
        }, t('pageflow_scrolled.inline_editing.external_links.open_in_new_tab_message'),
        /*#__PURE__*/
        React.createElement("span", null, t('pageflow_scrolled.inline_editing.external_links.open_in_new_tab')))
      );
    }
  }

  return (
    /*#__PURE__*/
    React.createElement("a", {
      className: classNames(styles$5.link_item, (_classNames2 = {}, _defineProperty(_classNames2, styles$5.invert, props.invert), _defineProperty(_classNames2, styles$5.layout_center, layout === 'center'), _classNames2)),
      href: props.url || 'about:blank',
      onClick: onClick,
      onMouseLeave: onMouseLeave,
      target: props.open_in_new_tab ? '_blank' : '_self',
      rel: props.open_in_new_tab ? 'noopen noreferrer' : undefined
    },
    /*#__PURE__*/
    React.createElement("div", {
      className: styles$5.link_thumbnail
    },
    /*#__PURE__*/
    React.createElement(Image, {
      imageFile: thumbnailImageFile,
      load: props.loadImages,
      variant: "linkThumbnailLarge"
    })),
    /*#__PURE__*/
    React.createElement("div", {
      className: styles$5.link_details
    },
    /*#__PURE__*/
    React.createElement("p", {
      className: styles$5.link_title
    }, props.title),
    /*#__PURE__*/
    React.createElement("p", {
      className: styles$5.link_desc
    }, props.description)), renderNewTabTooltip())
  );
}

var styles$6 = {"ext_links_container":"ExternalLinkList-module_ext_links_container__16IIo"};

function ExternalLinkList(props) {
  var linkList = props.configuration.links || [];

  var _useContentElementLif = useContentElementLifecycle(),
      shouldLoad = _useContentElementLif.shouldLoad;

  var darkBackground = useDarkBackground();
  return (
    /*#__PURE__*/
    React.createElement("div", {
      className: styles$6.ext_links_container
    }, linkList.map(function (link, index) {
      return (
        /*#__PURE__*/
        React.createElement(ExternalLink, Object.assign({}, link, {
          key: link.id,
          invert: !darkBackground,
          sectionProps: props.sectionProps,
          loadImages: shouldLoad
        }))
      );
    }))
  );
}

frontend.contentElementTypes.register('externalLinkList', {
  component: ExternalLinkList,
  lifecycle: true
});

function useIframeHeight(url) {
  var _useState = useState('400px'),
      _useState2 = _slicedToArray(_useState, 2),
      height = _useState2[0],
      setHeight = _useState2[1];

  useEffect(function () {
    window.addEventListener('message', receive);

    function receive(event) {
      if (typeof event.data['datawrapper-height'] !== 'undefined') {
        for (var chartId in event.data['datawrapper-height']) {
          if ((url === null || url === void 0 ? void 0 : url.indexOf(chartId)) > -1) {
            setHeight(event.data['datawrapper-height'][chartId] + 'px');
          }
        }
      }
    }

    return function () {
      return window.removeEventListener('message', receive);
    };
  }, [url]);
  return height;
}

var styles$7 = {"container":"DataWrapperChart-module_container__2eZ15"};

function DataWrapperChart(_ref) {
  var configuration = _ref.configuration;

  var _useI18n = useI18n(),
      t = _useI18n.t;

  var _useContentElementLif = useContentElementLifecycle(),
      shouldLoad = _useContentElementLif.shouldLoad;

  var _useContentElementEdi = useContentElementEditorState(),
      isEditable = _useContentElementEdi.isEditable,
      isSelected = _useContentElementEdi.isSelected;

  var height = useIframeHeight(configuration.url); // remove url protocol, so that it is selected by the browser itself

  var srcURL = '';

  if (configuration.url) {
    srcURL = configuration.url.replace(/http(s|):/, '');
  }

  var backgroundColor = configuration.backgroundColor || '#323d4d';
  return (
    /*#__PURE__*/
    React.createElement(Figure, {
      caption: configuration.caption
    },
    /*#__PURE__*/
    React.createElement("div", {
      className: styles$7.container,
      style: {
        pointerEvents: isEditable && !isSelected ? 'none' : undefined,
        backgroundColor: backgroundColor,
        color: textColorForBackgroundColor(backgroundColor),
        height: height
      },
      "data-percy": "hide"
    },
    /*#__PURE__*/
    React.createElement(ThirdPartyOptIn, {
      providerName: "datawrapper"
    }, shouldLoad && renderIframe(srcURL, configuration.title || t('pageflow_scrolled.public.chart.default_title')),
    /*#__PURE__*/
    React.createElement(ThirdPartyOptOutInfo, {
      providerName: "datawrapper",
      contentElementPosition: configuration.position
    }))))
  );
}

function renderIframe(url, title) {
  if (!url) {
    return null;
  }

  return (
    /*#__PURE__*/
    React.createElement("iframe", {
      src: url,
      title: title,
      scrolling: "no",
      allowFullScreen: true,
      mozallowfullscreen: "true",
      webkitallowfullscreen: "true"
    })
  );
}

frontend.contentElementTypes.register('dataWrapperChart', {
  component: DataWrapperChart,
  lifecycle: true
});