@prom-ui/core 1.7.0-alpha.2 → 1.7.0-alpha.3

package/PhotoGallery/cjs/index.development.v2.js

@@ -0,0 +1,1361 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ScrollLock = require('react-scrolllock');
+var reactTransitionGroup = require('react-transition-group');
+var Backdrop = require('@prom-ui/core/Backdrop');
+var KeyPress = require('@prom-ui/core/KeyPress');
+var Portal = require('@prom-ui/core/Portal');
+var ScrollControls = require('@prom-ui/core/ScrollControls');
+var utils = require('react-scrolllock/dist/utils');
+var Icon = require('@prom-ui/core/Icon');
+var Play = require('@prom-ui/icons/Play');
+var Button = require('@prom-ui/core/Button');
+var useBodyTTag = require('@prom-ui/core/useBodyTTag');
+var Close = require('@prom-ui/icons/Close');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === 'object' && 'default' in e) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
+var ScrollLock__default = /*#__PURE__*/_interopDefaultCompat(ScrollLock);
+
+function _iterableToArrayLimit(arr, i) {
+  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+  if (null != _i) {
+    var _s,
+      _e,
+      _x,
+      _r,
+      _arr = [],
+      _n = !0,
+      _d = !1;
+    try {
+      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+        if (Object(_i) !== _i) return;
+        _n = !1;
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
+    } catch (err) {
+      _d = !0, _e = err;
+    } finally {
+      try {
+        if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+    return _arr;
+  }
+}
+function _taggedTemplateLiteral(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
+  }
+  return Object.freeze(Object.defineProperties(strings, {
+    raw: {
+      value: Object.freeze(raw)
+    }
+  }));
+}
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+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(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+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 _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.");
+}
+
+// FORK FROM https://github.com/jossmac/react-scrolllock/blob/master/src/TouchScrollable.js
+
+function allowTouchMove(e) {
+  var target = e.currentTarget;
+  if (target.scrollHeight > target.clientHeight || target.scrollWidth > target.clientWidth) {
+    e.stopPropagation();
+    return true;
+  }
+  e.preventDefault();
+  return false;
+}
+var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+
+/* @ts-ignore */
+var canUseEventListeners = canUseDOM && !!(window.addEventListener || window.attachEvent);
+var TouchScrollable = function TouchScrollable(_ref) {
+  var _ref$isActive = _ref.isActive,
+    isActive = _ref$isActive === void 0 ? false : _ref$isActive,
+    scrollRef = _ref.scrollRef,
+    children = _ref.children;
+  React__namespace.useEffect(function () {
+    if (!isActive || !canUseEventListeners || !(scrollRef !== null && scrollRef !== void 0 && scrollRef.current)) return;
+    scrollRef.current.addEventListener('touchstart', utils.preventInertiaScroll, utils.listenerOptions);
+    scrollRef.current.addEventListener('touchmove', allowTouchMove, utils.listenerOptions);
+    return function () {
+      if (!isActive || !canUseEventListeners || !(scrollRef !== null && scrollRef !== void 0 && scrollRef.current)) return;
+      scrollRef.current.removeEventListener('touchstart', utils.preventInertiaScroll, utils.listenerOptions);
+      scrollRef.current.removeEventListener('touchmove', allowTouchMove, utils.listenerOptions);
+    };
+  });
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, children);
+};
+
+var reqMap = new Map();
+var scrollInToViewElement = function scrollInToViewElement(target, parent) {
+  var isAnimate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  if (reqMap.has(parent)) {
+    cancelAnimationFrame(reqMap.get(parent));
+    reqMap["delete"](parent);
+  }
+  var reqId = requestAnimationFrame(function () {
+    var parentRect = parent.getBoundingClientRect();
+    var targetRect = target.getBoundingClientRect();
+    var scrollTop = targetRect.top + parent.scrollTop - parentRect.top - parentRect.height / 2 + targetRect.height / 2;
+    var scrollLeft = targetRect.left + parent.scrollLeft - parentRect.left - parentRect.width / 2 + targetRect.width / 2;
+    if (scrollLeft < 0) {
+      scrollLeft = 0;
+    }
+    if (scrollTop < 0) {
+      scrollTop = 0;
+    }
+    parent.scrollTo({
+      behavior: isAnimate ? 'smooth' : 'instant',
+      top: scrollTop,
+      left: scrollLeft
+    });
+  });
+  reqMap.set(parent, reqId);
+};
+var getIndexFromScroll = function getIndexFromScroll(target, size) {
+  var scrollLeft = target.scrollLeft;
+  var scrollWidth = target.scrollWidth;
+  var scrollIndex = scrollLeft / scrollWidth * size;
+  return Math.round(scrollIndex);
+};
+var prepareVideoUrl = function prepareVideoUrl(videoSrc) {
+  var url = new URL(videoSrc);
+  url.searchParams["delete"]('autoplay');
+  url.searchParams.append('enablejsapi', '1');
+  url.searchParams.append('rel', '0');
+  return url.href;
+};
+
+// fork rfom https://github.com/manuelstofer/pinchzoom
+// @ts-nocheck
+
+// utils
+var buildElement = function buildElement(str) {
+  // empty string as title argument required by IE and Edge
+  var tmp = document.implementation.createHTMLDocument('');
+  tmp.body.innerHTML = str;
+  return Array.from(tmp.body.children)[0];
+};
+var definePinchZoom = function definePinchZoom() {
+  /**
+   * Pinch zoom
+   * @param el
+   * @param options
+   * @constructor
+   */
+  var PinchZoom = function PinchZoom(el, options) {
+      this.el = el;
+      this.zoomFactor = 1;
+      this.lastScale = 1;
+      this.offset = {
+        x: 0,
+        y: 0
+      };
+      this.initialOffset = {
+        x: 0,
+        y: 0
+      };
+      this.options = Object.assign({}, this.defaults, options);
+      this.setupMarkup();
+      this.bindEvents();
+      this.update();
+
+      // The image may already be loaded when PinchZoom is initialized,
+      // and then the load event (which trigger update) will never fire.
+      if (this.isImageLoaded(this.el)) {
+        this.updateAspectRatio();
+        this.setupOffsets();
+      }
+      this.enable();
+    },
+    sum = function sum(a, b) {
+      return a + b;
+    },
+    isCloseTo = function isCloseTo(value, expected) {
+      return value > expected - 0.01 && value < expected + 0.01;
+    };
+  PinchZoom.prototype = {
+    defaults: {
+      tapZoomFactor: 2,
+      zoomOutFactor: 1.3,
+      animationDuration: 300,
+      maxZoom: 4,
+      minZoom: 0.5,
+      draggableUnzoomed: true,
+      lockDragAxis: false,
+      setOffsetsOnce: false,
+      use2d: true,
+      useMouseWheel: false,
+      verticalPadding: 0,
+      horizontalPadding: 0,
+      onZoomStart: null,
+      onZoomEnd: null,
+      onZoomUpdate: null,
+      onDragStart: null,
+      onDragEnd: null,
+      onDragUpdate: null,
+      onDoubleTap: null,
+      onMouseWheel: null
+    },
+    /**
+     * Event handler for 'dragstart'
+     * @param event
+     */
+    handleDragStart: function handleDragStart(event) {
+      if (typeof this.options.onDragStart == 'function') {
+        this.options.onDragStart(this, event);
+      }
+      this.stopAnimation();
+      this.lastDragPosition = false;
+      this.hasInteraction = true;
+      this.handleDrag(event);
+    },
+    /**
+     * Event handler for 'drag'
+     * @param event
+     */
+    handleDrag: function handleDrag(event) {
+      var touch = event.type === 'touchmove' ? this.getTouches(event)[0] : this.getPointer(event);
+      this.drag(touch, this.lastDragPosition);
+      this.offset = this.sanitizeOffset(this.offset);
+      this.lastDragPosition = touch;
+    },
+    handleDragEnd: function handleDragEnd() {
+      if (typeof this.options.onDragEnd == 'function') {
+        this.options.onDragEnd(this, event);
+      }
+      this.end();
+    },
+    /**
+     * Event handler for 'zoomstart'
+     * @param event
+     */
+    handleZoomStart: function handleZoomStart(event) {
+      if (typeof this.options.onZoomStart == 'function') {
+        this.options.onZoomStart(this, event);
+      }
+      this.stopAnimation();
+      this.lastScale = 1;
+      this.nthZoom = 0;
+      this.lastZoomCenter = false;
+      this.hasInteraction = true;
+    },
+    /**
+     * Event handler for 'zoom'
+     * @param event
+     */
+    handleZoom: function handleZoom(event, newScale) {
+      // a relative scale factor is used
+      var touchCenter = this.getTouchCenter(this.getTouches(event)),
+        scale = newScale / this.lastScale;
+      this.lastScale = newScale;
+
+      // the first touch events are thrown away since they are not precise
+      this.nthZoom += 1;
+      if (this.nthZoom > 3) {
+        this.scale(scale, touchCenter);
+        this.drag(touchCenter, this.lastZoomCenter);
+      }
+      this.lastZoomCenter = touchCenter;
+    },
+    handleZoomEnd: function handleZoomEnd() {
+      if (typeof this.options.onZoomEnd == 'function') {
+        this.options.onZoomEnd(this, event);
+      }
+      this.end();
+    },
+    /**
+     * Event handler for 'doubletap'
+     * @param event
+     */
+    handleDoubleTap: function handleDoubleTap(event) {
+      var center = this.getTouches(event)[0],
+        zoomFactor = this.zoomFactor > 1 ? 1 : this.options.tapZoomFactor,
+        startZoomFactor = this.zoomFactor,
+        updateProgress = function (progress) {
+          this.scaleTo(startZoomFactor + progress * (zoomFactor - startZoomFactor), center);
+        }.bind(this);
+      if (this.hasInteraction) {
+        return;
+      }
+      this.isDoubleTap = true;
+      if (startZoomFactor > zoomFactor) {
+        center = this.getCurrentZoomCenter();
+      }
+      this.animate(this.options.animationDuration, updateProgress, this.swing);
+      if (typeof this.options.onDoubleTap == 'function') {
+        this.options.onDoubleTap(this, event);
+      }
+    },
+    /**
+     * Event handler for 'mousewheel'
+     * @param event
+     */
+    handleMouseWheel: function handleMouseWheel(event) {
+      var center = this.getPointer(event),
+        newScale = Math.min(Math.max(this.options.minZoom, this.lastScale + event.deltaY * -0.01), this.options.maxZoom),
+        scale = newScale / this.lastScale;
+      this.scale(scale, center);
+      this.lastScale = newScale;
+      this.update();
+      if (typeof this.options.onMouseWheel == 'function') {
+        this.options.onMouseWheel(this, event);
+      }
+    },
+    /**
+     * Compute the initial offset
+     *
+     * the element should be centered in the container upon initialization
+     */
+    computeInitialOffset: function computeInitialOffset() {
+      this.initialOffset = {
+        x: -Math.abs(this.el.offsetWidth * this.getInitialZoomFactor() - this.container.offsetWidth) / 2,
+        y: -Math.abs(this.el.offsetHeight * this.getInitialZoomFactor() - this.container.offsetHeight) / 2
+      };
+    },
+    /**
+     * Reset current image offset to that of the initial offset
+     */
+    resetOffset: function resetOffset() {
+      this.offset.x = this.initialOffset.x;
+      this.offset.y = this.initialOffset.y;
+    },
+    /**
+     * Determine if image is loaded
+     */
+    isImageLoaded: function isImageLoaded(el) {
+      if (el.nodeName === 'IMG') {
+        return el.complete && el.naturalHeight !== 0;
+      } else {
+        return Array.from(el.querySelectorAll('img')).every(this.isImageLoaded);
+      }
+    },
+    setupOffsets: function setupOffsets() {
+      if (this.options.setOffsetsOnce && this._isOffsetsSet) {
+        return;
+      }
+      this._isOffsetsSet = true;
+      this.computeInitialOffset();
+      this.resetOffset();
+    },
+    /**
+     * Max / min values for the offset
+     * @param offset
+     * @return {Object} the sanitized offset
+     */
+    sanitizeOffset: function sanitizeOffset(offset) {
+      var elWidth = this.el.offsetWidth * this.getInitialZoomFactor() * this.zoomFactor;
+      var elHeight = this.el.offsetHeight * this.getInitialZoomFactor() * this.zoomFactor;
+      var maxX = elWidth - this.getContainerX() + this.options.horizontalPadding,
+        maxY = elHeight - this.getContainerY() + this.options.verticalPadding,
+        maxOffsetX = Math.max(maxX, 0),
+        maxOffsetY = Math.max(maxY, 0),
+        minOffsetX = Math.min(maxX, 0) - this.options.horizontalPadding,
+        minOffsetY = Math.min(maxY, 0) - this.options.verticalPadding;
+      return {
+        x: Math.min(Math.max(offset.x, minOffsetX), maxOffsetX),
+        y: Math.min(Math.max(offset.y, minOffsetY), maxOffsetY)
+      };
+    },
+    /**
+     * Scale to a specific zoom factor (not relative)
+     * @param zoomFactor
+     * @param center
+     */
+    scaleTo: function scaleTo(zoomFactor, center) {
+      this.scale(zoomFactor / this.zoomFactor, center);
+    },
+    /**
+     * Scales the element from specified center
+     * @param scale
+     * @param center
+     */
+    scale: function scale(_scale, center) {
+      _scale = this.scaleZoomFactor(_scale);
+      this.addOffset({
+        x: (_scale - 1) * (center.x + this.offset.x),
+        y: (_scale - 1) * (center.y + this.offset.y)
+      });
+      if (typeof this.options.onZoomUpdate == 'function') {
+        this.options.onZoomUpdate(this, event);
+      }
+    },
+    /**
+     * Scales the zoom factor relative to current state
+     * @param scale
+     * @return the actual scale (can differ because of max min zoom factor)
+     */
+    scaleZoomFactor: function scaleZoomFactor(scale) {
+      var originalZoomFactor = this.zoomFactor;
+      this.zoomFactor *= scale;
+      this.zoomFactor = Math.min(this.options.maxZoom, Math.max(this.zoomFactor, this.options.minZoom));
+      return this.zoomFactor / originalZoomFactor;
+    },
+    /**
+     * Determine if the image is in a draggable state
+     *
+     * When the image can be dragged, the drag event is acted upon and cancelled.
+     * When not draggable, the drag event bubbles through this component.
+     *
+     * @return {Boolean}
+     */
+    canDrag: function canDrag() {
+      return this.options.draggableUnzoomed || !isCloseTo(this.zoomFactor, 1);
+    },
+    /**
+     * Drags the element
+     * @param center
+     * @param lastCenter
+     */
+    drag: function drag(center, lastCenter) {
+      if (lastCenter) {
+        if (this.options.lockDragAxis) {
+          // lock scroll to position that was changed the most
+          if (Math.abs(center.x - lastCenter.x) > Math.abs(center.y - lastCenter.y)) {
+            this.addOffset({
+              x: -(center.x - lastCenter.x),
+              y: 0
+            });
+          } else {
+            this.addOffset({
+              y: -(center.y - lastCenter.y),
+              x: 0
+            });
+          }
+        } else {
+          this.addOffset({
+            y: -(center.y - lastCenter.y),
+            x: -(center.x - lastCenter.x)
+          });
+        }
+        if (typeof this.options.onDragUpdate == 'function') {
+          this.options.onDragUpdate(this, event);
+        }
+      }
+    },
+    /**
+     * Calculates the touch center of multiple touches
+     * @param touches
+     * @return {Object}
+     */
+    getTouchCenter: function getTouchCenter(touches) {
+      return this.getVectorAvg(touches);
+    },
+    /**
+     * Calculates the average of multiple vectors (x, y values)
+     */
+    getVectorAvg: function getVectorAvg(vectors) {
+      return {
+        x: vectors.map(function (v) {
+          return v.x;
+        }).reduce(sum) / vectors.length,
+        y: vectors.map(function (v) {
+          return v.y;
+        }).reduce(sum) / vectors.length
+      };
+    },
+    /**
+     * Adds an offset
+     * @param offset the offset to add
+     * @return return true when the offset change was accepted
+     */
+    addOffset: function addOffset(offset) {
+      this.offset = {
+        x: this.offset.x + offset.x,
+        y: this.offset.y + offset.y
+      };
+    },
+    sanitize: function sanitize() {
+      if (this.zoomFactor < this.options.zoomOutFactor) {
+        this.zoomOutAnimation();
+      } else if (this.isInsaneOffset(this.offset)) {
+        this.sanitizeOffsetAnimation();
+      }
+    },
+    /**
+     * Checks if the offset is ok with the current zoom factor
+     * @param offset
+     * @return {Boolean}
+     */
+    isInsaneOffset: function isInsaneOffset(offset) {
+      var sanitizedOffset = this.sanitizeOffset(offset);
+      return sanitizedOffset.x !== offset.x || sanitizedOffset.y !== offset.y;
+    },
+    /**
+     * Creates an animation moving to a sane offset
+     */
+    sanitizeOffsetAnimation: function sanitizeOffsetAnimation() {
+      var targetOffset = this.sanitizeOffset(this.offset),
+        startOffset = {
+          x: this.offset.x,
+          y: this.offset.y
+        },
+        updateProgress = function (progress) {
+          this.offset.x = startOffset.x + progress * (targetOffset.x - startOffset.x);
+          this.offset.y = startOffset.y + progress * (targetOffset.y - startOffset.y);
+          this.update();
+        }.bind(this);
+      this.animate(this.options.animationDuration, updateProgress, this.swing);
+    },
+    /**
+     * Zooms back to the original position,
+     * (no offset and zoom factor 1)
+     */
+    zoomOutAnimation: function zoomOutAnimation() {
+      if (this.zoomFactor === 1) {
+        return;
+      }
+      var startZoomFactor = this.zoomFactor,
+        zoomFactor = 1,
+        center = this.getCurrentZoomCenter(),
+        updateProgress = function (progress) {
+          this.scaleTo(startZoomFactor + progress * (zoomFactor - startZoomFactor), center);
+        }.bind(this);
+      this.animate(this.options.animationDuration, updateProgress, this.swing);
+    },
+    /**
+     * Updates the container aspect ratio
+     *
+     * Any previous container height must be cleared before re-measuring the
+     * parent height, since it depends implicitly on the height of any of its children
+     */
+    updateAspectRatio: function updateAspectRatio() {
+      this.unsetContainerY();
+      this.setContainerY(this.container.parentElement.offsetHeight);
+    },
+    /**
+     * Calculates the initial zoom factor (for the element to fit into the container)
+     * @return {number} the initial zoom factor
+     */
+    getInitialZoomFactor: function getInitialZoomFactor() {
+      var xZoomFactor = this.container.offsetWidth / this.el.offsetWidth;
+      var yZoomFactor = this.container.offsetHeight / this.el.offsetHeight;
+      return Math.min(xZoomFactor, yZoomFactor);
+    },
+    /**
+     * Calculates the aspect ratio of the element
+     * @return the aspect ratio
+     */
+    getAspectRatio: function getAspectRatio() {
+      return this.el.offsetWidth / this.el.offsetHeight;
+    },
+    /**
+     * Calculates the virtual zoom center for the current offset and zoom factor
+     * (used for reverse zoom)
+     * @return {Object} the current zoom center
+     */
+    getCurrentZoomCenter: function getCurrentZoomCenter() {
+      var offsetLeft = this.offset.x - this.initialOffset.x;
+      var centerX = -1 * this.offset.x - offsetLeft / (1 / this.zoomFactor - 1);
+      var offsetTop = this.offset.y - this.initialOffset.y;
+      var centerY = -1 * this.offset.y - offsetTop / (1 / this.zoomFactor - 1);
+      return {
+        x: centerX,
+        y: centerY
+      };
+    },
+    /**
+     * Returns the touches of an event relative to the container offset
+     * @param event
+     * @return array touches
+     */
+    getTouches: function getTouches(event) {
+      var rect = this.container.getBoundingClientRect();
+      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+      var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
+      var posTop = rect.top + scrollTop;
+      var posLeft = rect.left + scrollLeft;
+      return Array.prototype.slice.call(event.touches).map(function (touch) {
+        return {
+          x: touch.pageX - posLeft,
+          y: touch.pageY - posTop
+        };
+      });
+    },
+    /**
+     * Returns the pointer of an event relative to the container offset
+     * @param event
+     * @return pointer
+     */
+    getPointer: function getPointer(event) {
+      var rect = this.container.getBoundingClientRect();
+      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+      var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
+      var posTop = rect.top + scrollTop;
+      var posLeft = rect.left + scrollLeft;
+      return {
+        x: event.pageX - posLeft,
+        y: event.pageY - posTop
+      };
+    },
+    /**
+     * Animation loop
+     * does not support simultaneous animations
+     * @param duration
+     * @param framefn
+     * @param timefn
+     * @param callback
+     */
+    animate: function animate(duration, framefn, timefn, callback) {
+      var startTime = new Date().getTime(),
+        renderFrame = function () {
+          if (!this.inAnimation) {
+            return;
+          }
+          var frameTime = new Date().getTime() - startTime,
+            progress = frameTime / duration;
+          if (frameTime >= duration) {
+            framefn(1);
+            if (callback) {
+              callback();
+            }
+            this.update();
+            this.stopAnimation();
+            this.update();
+          } else {
+            if (timefn) {
+              progress = timefn(progress);
+            }
+            framefn(progress);
+            this.update();
+            requestAnimationFrame(renderFrame);
+          }
+        }.bind(this);
+      this.inAnimation = true;
+      requestAnimationFrame(renderFrame);
+    },
+    /**
+     * Stops the animation
+     */
+    stopAnimation: function stopAnimation() {
+      this.inAnimation = false;
+    },
+    /**
+     * Swing timing function for animations
+     * @param p
+     * @return {Number}
+     */
+    swing: function swing(p) {
+      return -Math.cos(p * Math.PI) / 2 + 0.5;
+    },
+    getContainerX: function getContainerX() {
+      return this.container.offsetWidth;
+    },
+    getContainerY: function getContainerY() {
+      return this.container.offsetHeight;
+    },
+    setContainerY: function setContainerY(y) {
+      return this.container.style.height = y + 'px';
+    },
+    unsetContainerY: function unsetContainerY() {
+      this.container.style.height = null;
+    },
+    /**
+     * Creates the expected html structure
+     */
+    setupMarkup: function setupMarkup() {
+      this.container = buildElement('<div class="pinch-zoom-container"></div>');
+      this.el.parentNode.insertBefore(this.container, this.el);
+      this.container.appendChild(this.el);
+      this.container.style.overflow = 'hidden';
+      this.container.style.position = 'relative';
+      this.el.style.webkitTransformOrigin = '0% 0%';
+      this.el.style.mozTransformOrigin = '0% 0%';
+      this.el.style.msTransformOrigin = '0% 0%';
+      this.el.style.oTransformOrigin = '0% 0%';
+      this.el.style.transformOrigin = '0% 0%';
+      this.el.style.position = 'absolute';
+      this.el.style.backfaceVisibility = 'hidden';
+      this.el.style.willChange = 'transform';
+    },
+    end: function end() {
+      this.hasInteraction = false;
+      this.sanitize();
+      this.update();
+    },
+    /**
+     * Binds all required event listeners
+     */
+    bindEvents: function bindEvents() {
+      var self = this;
+      detectGestures(this.container, this);
+      this.resizeHandler = this.update.bind(this);
+      window.addEventListener('resize', this.resizeHandler);
+      Array.from(this.el.querySelectorAll('img')).forEach(function (imgEl) {
+        imgEl.addEventListener('load', self.update.bind(self));
+      });
+      if (this.el.nodeName === 'IMG') {
+        this.el.addEventListener('load', this.update.bind(this));
+      }
+    },
+    /**
+     * Updates the css values according to the current zoom factor and offset
+     */
+    update: function update(event) {
+      if (event && event.type === 'resize') {
+        this.updateAspectRatio();
+        this.setupOffsets();
+      }
+      if (event && event.type === 'load') {
+        this.updateAspectRatio();
+        this.setupOffsets();
+      }
+      if (this.updatePlanned) {
+        return;
+      }
+      this.updatePlanned = true;
+      window.setTimeout(function () {
+        this.updatePlanned = false;
+        var zoomFactor = this.getInitialZoomFactor() * this.zoomFactor,
+          offsetX = -this.offset.x / zoomFactor,
+          offsetY = -this.offset.y / zoomFactor,
+          transform3d = 'scale3d(' + zoomFactor + ', ' + zoomFactor + ',1) ' + 'translate3d(' + offsetX + 'px,' + offsetY + 'px,0px)',
+          transform2d = 'scale(' + zoomFactor + ', ' + zoomFactor + ') ' + 'translate(' + offsetX + 'px,' + offsetY + 'px)',
+          removeClone = function () {
+            if (this.clone) {
+              this.clone.parentNode.removeChild(this.clone);
+              delete this.clone;
+            }
+          }.bind(this);
+
+        // Scale 3d and translate3d are faster (at least on ios)
+        // but they also reduce the quality.
+        // PinchZoom uses the 3d transformations during interactions
+        // after interactions it falls back to 2d transformations
+        if (!this.options.use2d || this.hasInteraction || this.inAnimation) {
+          this.is3d = true;
+          removeClone();
+          this.el.style.webkitTransform = transform3d;
+          this.el.style.mozTransform = transform2d;
+          this.el.style.msTransform = transform2d;
+          this.el.style.oTransform = transform2d;
+          this.el.style.transform = transform3d;
+        } else {
+          // When changing from 3d to 2d transform webkit has some glitches.
+          // To avoid this, a copy of the 3d transformed element is displayed in the
+          // foreground while the element is converted from 3d to 2d transform
+          if (this.is3d) {
+            this.clone = this.el.cloneNode(true);
+            this.clone.style.pointerEvents = 'none';
+            this.container.appendChild(this.clone);
+            window.setTimeout(removeClone, 200);
+          }
+          this.el.style.webkitTransform = transform2d;
+          this.el.style.mozTransform = transform2d;
+          this.el.style.msTransform = transform2d;
+          this.el.style.oTransform = transform2d;
+          this.el.style.transform = transform2d;
+          this.is3d = false;
+        }
+      }.bind(this), 0);
+    },
+    /**
+     * Enables event handling for gestures
+     */
+    enable: function enable() {
+      this.enabled = true;
+    },
+    /**
+     * Disables event handling for gestures
+     */
+    disable: function disable() {
+      this.enabled = false;
+    },
+    /**
+     * Unmounts the zooming container and global event listeners
+     */
+    destroy: function destroy() {
+      window.removeEventListener('resize', this.resizeHandler);
+      if (this.container) {
+        this.container.remove();
+        this.container = null;
+      }
+    },
+    reset: function reset() {
+      this.zoomOutAnimation();
+    }
+  };
+  var detectGestures = function detectGestures(el, target) {
+    var interaction = null,
+      fingers = 0,
+      lastTouchStart = null,
+      startTouches = null,
+      setInteraction = function setInteraction(newInteraction, event) {
+        if (interaction !== newInteraction) {
+          if (interaction && !newInteraction) {
+            switch (interaction) {
+              case 'zoom':
+                target.handleZoomEnd(event);
+                break;
+              case 'drag':
+                target.handleDragEnd(event);
+                break;
+            }
+          }
+          switch (newInteraction) {
+            case 'zoom':
+              target.handleZoomStart(event);
+              break;
+            case 'drag':
+              target.handleDragStart(event);
+              break;
+          }
+        }
+        interaction = newInteraction;
+      },
+      updateInteraction = function updateInteraction(event) {
+        if (fingers === 2) {
+          setInteraction('zoom');
+        } else if (fingers === 1 && target.canDrag()) {
+          setInteraction('drag', event);
+        } else {
+          setInteraction(null, event);
+        }
+      },
+      targetTouches = function targetTouches(touches) {
+        return Array.from(touches).map(function (touch) {
+          return {
+            x: touch.pageX,
+            y: touch.pageY
+          };
+        });
+      },
+      getDistance = function getDistance(a, b) {
+        var x, y;
+        x = a.x - b.x;
+        y = a.y - b.y;
+        return Math.sqrt(x * x + y * y);
+      },
+      calculateScale = function calculateScale(startTouches, endTouches) {
+        var startDistance = getDistance(startTouches[0], startTouches[1]),
+          endDistance = getDistance(endTouches[0], endTouches[1]);
+        return endDistance / startDistance;
+      },
+      cancelEvent = function cancelEvent(event) {
+        event.stopPropagation();
+        event.preventDefault();
+      },
+      detectDoubleTap = function detectDoubleTap(event) {
+        var time = new Date().getTime();
+        if (fingers > 1) {
+          lastTouchStart = null;
+        }
+        if (time - lastTouchStart < 300) {
+          cancelEvent(event);
+          target.handleDoubleTap(event);
+          switch (interaction) {
+            case 'zoom':
+              target.handleZoomEnd(event);
+              break;
+            case 'drag':
+              target.handleDragEnd(event);
+              break;
+          }
+        } else {
+          target.isDoubleTap = false;
+        }
+        if (fingers === 1) {
+          lastTouchStart = time;
+        }
+      },
+      firstMove = true;
+    el.addEventListener('touchstart', function (event) {
+      if (target.enabled) {
+        firstMove = true;
+        fingers = event.touches.length;
+        detectDoubleTap(event);
+      }
+    }, {
+      passive: false
+    });
+    el.addEventListener('touchmove', function (event) {
+      if (target.enabled && !target.isDoubleTap) {
+        if (firstMove) {
+          updateInteraction(event);
+          if (interaction) {
+            cancelEvent(event);
+          }
+          startTouches = targetTouches(event.touches);
+        } else {
+          switch (interaction) {
+            case 'zoom':
+              if (startTouches.length == 2 && event.touches.length == 2) {
+                target.handleZoom(event, calculateScale(startTouches, targetTouches(event.touches)));
+              }
+              break;
+            case 'drag':
+              target.handleDrag(event);
+              break;
+          }
+          if (interaction) {
+            cancelEvent(event);
+            target.update();
+          }
+        }
+        firstMove = false;
+      }
+    }, {
+      passive: false
+    });
+    el.addEventListener('touchend', function (event) {
+      if (target.enabled) {
+        fingers = event.touches.length;
+        updateInteraction(event);
+      }
+    });
+    if (target.options.useMouseWheel) {
+      el.addEventListener('mousewheel', function (event) {
+        if (target.enabled) {
+          cancelEvent(event);
+          target.handleMouseWheel(event);
+        }
+      });
+      el.addEventListener('mousedown', function (event) {
+        if (target.enabled) {
+          firstMove = true;
+          fingers = 1;
+        }
+      }, {
+        passive: true
+      });
+      el.addEventListener('mousemove', function (event) {
+        if (target.enabled) {
+          if (firstMove) {
+            updateInteraction(event);
+            if (interaction) {
+              cancelEvent(event);
+            }
+          } else {
+            if (interaction === 'drag') {
+              target.handleDrag(event);
+            }
+            if (interaction) {
+              cancelEvent(event);
+              target.update();
+            }
+          }
+          firstMove = false;
+        }
+      }, {
+        passive: false
+      });
+      el.addEventListener('mouseup', function (event) {
+        if (target.enabled) {
+          fingers = 0;
+          updateInteraction(event);
+        }
+      }, {
+        passive: true
+      });
+    }
+  };
+  return PinchZoom;
+};
+var PinchZoom = definePinchZoom();
+
+var css = {"scrolling":"PhotoGallery__scrolling___q1DKc","root":"PhotoGallery__root___KiBKq","layout":"PhotoGallery__layout___JBDok","layoutHeader":"PhotoGallery__layoutHeader___tVG4b","layoutContent":"PhotoGallery__layoutContent___O43ff","layoutSection":"PhotoGallery__layoutSection___CvZb6","layoutAside":"PhotoGallery__layoutAside___fdKgJ","header":"PhotoGallery__header___xfAad","headerTitle":"PhotoGallery__headerTitle___QiOEy","headerClose":"PhotoGallery__headerClose___qdl3x","mainPhotoScrollControls":"PhotoGallery__mainPhotoScrollControls___PeY3Y","mainPhoto":"PhotoGallery__mainPhoto___QIMHy PhotoGallery__scrolling___q1DKc","mainPhotoItem":"PhotoGallery__mainPhotoItem___aZCyk","mainPhotoImage":"PhotoGallery__mainPhotoImage___2aEr5","mainPhotoIframe":"PhotoGallery__mainPhotoIframe___kThdT","preview":"PhotoGallery__preview___F-k0z PhotoGallery__scrolling___q1DKc","previewItem":"PhotoGallery__previewItem___jf683","previewButton":"PhotoGallery__previewButton___VAXOP","previewImage":"PhotoGallery__previewImage___Mx2Y-","videoPlayLabel":"PhotoGallery__videoPlayLabel___jQiDN","videoPlayLabelIcon":"PhotoGallery__videoPlayLabelIcon___wSdjd","enter":"PhotoGallery__enter___Lnosr","exit":"PhotoGallery__exit___NW-xY","enterActive":"PhotoGallery__enterActive___LrirU","exitActive":"PhotoGallery__exitActive___L6st-"};
+
+var MainPhotosImage = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
+  var src = _ref.src,
+    video = _ref.video;
+  var videoIframeRef = React__namespace.useRef(null);
+  var pinchZoomRef = React__namespace.useRef(null);
+  var imgRef = React__namespace.useRef(null);
+  var isVideo = !!video;
+  var reset = function reset() {
+    var _pinchZoomRef$current, _videoIframeRef$curre;
+    (_pinchZoomRef$current = pinchZoomRef.current) === null || _pinchZoomRef$current === void 0 ? void 0 : _pinchZoomRef$current.reset();
+    (_videoIframeRef$curre = videoIframeRef.current) === null || _videoIframeRef$curre === void 0 || (_videoIframeRef$curre = _videoIframeRef$curre.contentWindow) === null || _videoIframeRef$curre === void 0 ? void 0 : _videoIframeRef$curre.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
+  };
+  React__namespace.useEffect(function () {
+    requestAnimationFrame(function () {
+      if (imgRef.current && !isVideo) {
+        pinchZoomRef.current = new PinchZoom(imgRef.current, {
+          draggableUnzoomed: false,
+          animationDuration: 200
+        });
+      }
+    });
+    return function () {
+      var _pinchZoomRef$current2;
+      (_pinchZoomRef$current2 = pinchZoomRef.current) === null || _pinchZoomRef$current2 === void 0 ? void 0 : _pinchZoomRef$current2.destroy();
+    };
+  }, [video]);
+  React__namespace.useImperativeHandle(ref, function () {
+    return {
+      reset: reset
+    };
+  }, []);
+  if (isVideo) {
+    return /*#__PURE__*/React__namespace.createElement("iframe", {
+      ref: videoIframeRef,
+      className: css.mainPhotoIframe,
+      src: prepareVideoUrl(video),
+      width: "100%",
+      height: "100%",
+      allowFullScreen: true,
+      title: "",
+      loading: "lazy",
+      "data-qaid": "photo_gallery_main_video",
+      "data-testid": "photo_gallery_main_video"
+    });
+  }
+  return /*#__PURE__*/React__namespace.createElement("img", {
+    ref: imgRef,
+    className: css.mainPhotoImage,
+    src: src,
+    width: "100%",
+    height: "100%",
+    alt: "",
+    decoding: "async",
+    loading: "lazy",
+    "data-qaid": "photo_gallery_main_image",
+    "data-testid": "photo_gallery_main_image"
+  });
+});
+
+var MainPhotos = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
+  var items = _ref.items,
+    onChange = _ref.onChange;
+  var mainPhotoRefs = React__namespace.useRef([]);
+  var scrollIndex = React__namespace.useRef(0);
+  var localScrollRef = React__namespace.useRef(null);
+  var destroyMainPhoto = function destroyMainPhoto() {
+    mainPhotoRefs.current.forEach(function (currentRef) {
+      currentRef === null || currentRef === void 0 ? void 0 : currentRef.reset();
+    });
+  };
+  var scrollToIndex = function scrollToIndex(index) {
+    var _localScrollRef$curre;
+    var isAnimate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    var childNode = (_localScrollRef$curre = localScrollRef.current) === null || _localScrollRef$curre === void 0 ? void 0 : _localScrollRef$curre.children[index];
+    destroyMainPhoto();
+    if (childNode) {
+      scrollInToViewElement(childNode, localScrollRef.current, isAnimate);
+    }
+  };
+  React__namespace.useImperativeHandle(ref, function () {
+    return {
+      scrollToIndex: scrollToIndex
+    };
+  }, []);
+  var onScroll = function onScroll() {
+    if (!localScrollRef.current) return;
+    var indexFromScroll = getIndexFromScroll(localScrollRef.current, items.length);
+    if (scrollIndex.current !== indexFromScroll) {
+      scrollIndex.current = indexFromScroll;
+      onChange(indexFromScroll);
+      destroyMainPhoto();
+    }
+  };
+  return /*#__PURE__*/React__namespace.createElement(ScrollControls.ScrollControls, {
+    ref: localScrollRef,
+    className: css.mainPhotoScrollControls,
+    showOnHover: true,
+    hideOnDisabled: true
+  }, function (scrollRef) {
+    return /*#__PURE__*/React__namespace.createElement(TouchScrollable, {
+      scrollRef: scrollRef,
+      isActive: true
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      ref: scrollRef,
+      className: css.mainPhoto,
+      onScroll: onScroll
+    }, items.map(function (_ref2, index) {
+      var src = _ref2.src,
+        video = _ref2.video;
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        key: index,
+        className: css.mainPhotoItem,
+        "data-qaid": "photo_gallery_main_item",
+        "data-testid": "photo_gallery_main_item"
+      }, /*#__PURE__*/React__namespace.createElement(MainPhotosImage, {
+        ref: function ref(el) {
+          return mainPhotoRefs.current[index] = el;
+        },
+        src: src,
+        video: video
+      }));
+    })));
+  });
+});
+
+var PreviewPhotos = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
+  var items = _ref.items,
+    selectedIndex = _ref.selectedIndex,
+    onChange = _ref.onChange;
+  var localScrollRef = React__namespace.useRef(null);
+  var scrollToIndex = function scrollToIndex(index) {
+    var _localScrollRef$curre;
+    var isAnimate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    var childNode = (_localScrollRef$curre = localScrollRef.current) === null || _localScrollRef$curre === void 0 ? void 0 : _localScrollRef$curre.children[index];
+    if (childNode) {
+      scrollInToViewElement(childNode, localScrollRef.current, isAnimate);
+    }
+  };
+  React__namespace.useImperativeHandle(ref, function () {
+    return {
+      scrollToIndex: scrollToIndex
+    };
+  }, []);
+  var _onClick = function onClick(index) {
+    onChange(index);
+  };
+  return /*#__PURE__*/React__namespace.createElement(TouchScrollable, {
+    scrollRef: localScrollRef,
+    isActive: true
+  }, /*#__PURE__*/React__namespace.createElement("div", {
+    ref: localScrollRef,
+    className: css.preview
+  }, items.map(function (_ref2, index) {
+    var src = _ref2.src,
+      video = _ref2.video;
+    return /*#__PURE__*/React__namespace.createElement("div", {
+      key: index,
+      className: css.previewItem,
+      "data-qaid": "photo_gallery_preview_item",
+      "data-testid": "photo_gallery_preview_item"
+    }, /*#__PURE__*/React__namespace.createElement("button", {
+      className: css.previewButton,
+      type: "button",
+      onClick: function onClick() {
+        return _onClick(index);
+      },
+      disabled: selectedIndex === index,
+      "data-qaid": "photo_gallery_preview_button",
+      "data-testid": "photo_gallery_preview_button"
+    }, /*#__PURE__*/React__namespace.createElement("img", {
+      className: css.previewImage,
+      src: src,
+      width: 58,
+      height: 58,
+      alt: "",
+      decoding: "async",
+      loading: "lazy",
+      "data-qaid": "photo_gallery_preview_image",
+      "data-testid": "photo_gallery_preview_image"
+    }), !!video && /*#__PURE__*/React__namespace.createElement("div", {
+      className: css.videoPlayLabel,
+      "data-qaid": "photo_gallery_preview_play",
+      "data-testid": "photo_gallery_preview_play"
+    }, /*#__PURE__*/React__namespace.createElement(Icon.Icon, {
+      className: css.videoPlayLabelIcon,
+      "icon-as": Play.SvgPlay
+    }))));
+  })));
+});
+
+var _templateObject;
+var Header = function Header(_ref) {
+  var title = _ref.title,
+    onClose = _ref.onClose,
+    selectedIndex = _ref.selectedIndex,
+    itemsLength = _ref.itemsLength;
+  var _useBodyTTag = useBodyTTag.useBodyTTag(),
+    t = _useBodyTTag.t;
+  var visibleSelectedIndex = selectedIndex + 1;
+  var visibleTitle = t(_templateObject || (_templateObject = _taggedTemplateLiteral(["\u0424\u043E\u0442\u043E ", " \u0438\u0437 ", ""])), visibleSelectedIndex, itemsLength);
+  return /*#__PURE__*/React__namespace.createElement("div", {
+    className: css.header
+  }, /*#__PURE__*/React__namespace.createElement("div", {
+    className: css.headerTitle,
+    "data-qaid": "photo_gallery_title",
+    "data-testid": "photo_gallery_title"
+  }, title || visibleTitle), /*#__PURE__*/React__namespace.createElement("div", {
+    className: css.headerClose
+  }, /*#__PURE__*/React__namespace.createElement(Button.Button, {
+    "button-padding": "xxs",
+    "button-theme": "black-inherit",
+    type: "button",
+    onClick: onClose,
+    "data-qaid": "photo_gallery_close_button",
+    "data-testid": "photo_gallery_close_button"
+  }, /*#__PURE__*/React__namespace.createElement(Icon.Icon, {
+    "icon-as": Close.SvgClose,
+    style: {
+      width: 24,
+      height: 24
+    }
+  }))));
+};
+
+var PhotoGallery = function PhotoGallery(_ref) {
+  var isOpen = _ref.isOpen,
+    title = _ref.title,
+    _ref$visibleIndex = _ref.visibleIndex,
+    visibleIndex = _ref$visibleIndex === void 0 ? 0 : _ref$visibleIndex,
+    items = _ref.items,
+    onClose = _ref.onClose,
+    onChange = _ref.onChange;
+  var refIsAllowChangePreviewPhoto = React__namespace.useRef(true);
+  var refMainPhotos = React__namespace.useRef(null);
+  var refPreviewPhotos = React__namespace.useRef(null);
+  var _React$useState = React__namespace.useState(visibleIndex),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    selectedIndex = _React$useState2[0],
+    setSelectedIndex = _React$useState2[1];
+  React__namespace.useEffect(function () {
+    if (isOpen && typeof onChange === 'function') {
+      onChange(selectedIndex);
+    }
+  }, [selectedIndex]);
+  React__namespace.useEffect(function () {
+    if (isOpen) {
+      var _refPreviewPhotos$cur, _refMainPhotos$curren;
+      setSelectedIndex(visibleIndex);
+      (_refPreviewPhotos$cur = refPreviewPhotos.current) === null || _refPreviewPhotos$cur === void 0 ? void 0 : _refPreviewPhotos$cur.scrollToIndex(visibleIndex, false);
+      (_refMainPhotos$curren = refMainPhotos.current) === null || _refMainPhotos$curren === void 0 ? void 0 : _refMainPhotos$curren.scrollToIndex(visibleIndex, false);
+    }
+  }, [isOpen]);
+  React__namespace.useEffect(function () {
+    if (!isOpen) return function () {};
+    var timer = null;
+    var clearTimeoutHandle = function clearTimeoutHandle() {
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+    var resizeHandle = function resizeHandle() {
+      clearTimeoutHandle();
+      timer = setTimeout(function () {
+        var _refPreviewPhotos$cur2, _refMainPhotos$curren2;
+        (_refPreviewPhotos$cur2 = refPreviewPhotos.current) === null || _refPreviewPhotos$cur2 === void 0 ? void 0 : _refPreviewPhotos$cur2.scrollToIndex(selectedIndex, false);
+        (_refMainPhotos$curren2 = refMainPhotos.current) === null || _refMainPhotos$curren2 === void 0 ? void 0 : _refMainPhotos$curren2.scrollToIndex(selectedIndex, false);
+      }, 100);
+    };
+    window.addEventListener('resize', resizeHandle);
+    window.matchMedia('(orientation: portrait)').addEventListener('change', resizeHandle);
+    return function () {
+      clearTimeoutHandle();
+      window.removeEventListener('resize', resizeHandle);
+      window.matchMedia('(orientation: portrait)').removeEventListener('change', resizeHandle);
+    };
+  }, [isOpen, selectedIndex]);
+  var onChangePreviewPhoto = function onChangePreviewPhoto(index) {
+    var _refPreviewPhotos$cur3, _refMainPhotos$curren3;
+    refIsAllowChangePreviewPhoto.current = false;
+    setSelectedIndex(index);
+    (_refPreviewPhotos$cur3 = refPreviewPhotos.current) === null || _refPreviewPhotos$cur3 === void 0 ? void 0 : _refPreviewPhotos$cur3.scrollToIndex(index);
+    (_refMainPhotos$curren3 = refMainPhotos.current) === null || _refMainPhotos$curren3 === void 0 ? void 0 : _refMainPhotos$curren3.scrollToIndex(index);
+  };
+  var onChangeMainPhoto = function onChangeMainPhoto(index) {
+    if (refIsAllowChangePreviewPhoto.current) {
+      var _refPreviewPhotos$cur4;
+      setSelectedIndex(index);
+      (_refPreviewPhotos$cur4 = refPreviewPhotos.current) === null || _refPreviewPhotos$cur4 === void 0 ? void 0 : _refPreviewPhotos$cur4.scrollToIndex(index);
+    }
+    if (!refIsAllowChangePreviewPhoto.current && selectedIndex === index) {
+      refIsAllowChangePreviewPhoto.current = true;
+    }
+  };
+  var onPrevPhoto = function onPrevPhoto() {
+    if (selectedIndex === 0) return;
+    onChangePreviewPhoto(selectedIndex - 1);
+  };
+  var onNextPhoto = function onNextPhoto() {
+    if (selectedIndex === items.length - 1) return;
+    onChangePreviewPhoto(selectedIndex + 1);
+  };
+  var onCloseHandle = function onCloseHandle() {
+    onClose(selectedIndex);
+  };
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Backdrop.Backdrop, {
+    isOpen: isOpen,
+    onClick: onCloseHandle
+  }), /*#__PURE__*/React__namespace.createElement(reactTransitionGroup.CSSTransition, {
+    "in": isOpen,
+    timeout: 240,
+    classNames: css,
+    unmountOnExit: true
+    // onEnter={onOpen}
+    // onEntered={onOpened}
+    // onExited={onClosed}
+  }, /*#__PURE__*/React__namespace.createElement(Portal.Portal, null, /*#__PURE__*/React__namespace.createElement("div", {
+    className: css.root,
+    "data-qaid": "photo_gallery",
+    "data-testid": "photo_gallery"
+  }, /*#__PURE__*/React__namespace.createElement(ScrollLock__default.default, null), /*#__PURE__*/React__namespace.createElement(KeyPress.KeyPress, {
+    code: "Escape",
+    onKeyUp: onCloseHandle
+  }), /*#__PURE__*/React__namespace.createElement(KeyPress.KeyPress, {
+    code: "ArrowLeft",
+    onKeyUp: onPrevPhoto
+  }), /*#__PURE__*/React__namespace.createElement(KeyPress.KeyPress, {
+    code: "ArrowRight",
+    onKeyUp: onNextPhoto
+  }), /*#__PURE__*/React__namespace.createElement("div", {
+    className: css.layout
+  }, /*#__PURE__*/React__namespace.createElement("header", {
+    className: css.layoutHeader
+  }, /*#__PURE__*/React__namespace.createElement(Header, {
+    title: title,
+    selectedIndex: selectedIndex,
+    itemsLength: items.length,
+    onClose: onCloseHandle
+  })), /*#__PURE__*/React__namespace.createElement("div", {
+    className: css.layoutContent
+  }, /*#__PURE__*/React__namespace.createElement("section", {
+    className: css.layoutSection
+  }, /*#__PURE__*/React__namespace.createElement(MainPhotos, {
+    ref: refMainPhotos,
+    items: items,
+    onChange: onChangeMainPhoto
+  })), /*#__PURE__*/React__namespace.createElement("aside", {
+    className: css.layoutAside
+  }, /*#__PURE__*/React__namespace.createElement(PreviewPhotos, {
+    ref: refPreviewPhotos,
+    items: items,
+    selectedIndex: selectedIndex,
+    onChange: onChangePreviewPhoto
+  }))))))));
+};
+
+exports.PhotoGallery = PhotoGallery;
+
+require('./style.development.v2.css');