ENH: model info display UI

Change-Id: I066c0e7f8ce87ec00b1141a1b44430444a819b42
(cherry picked from commit 05907a1a42da82737090d55046974d401f8af057)

resources/web/include/swiper/react/get-changed-params.js

@@ -0,0 +1,43 @@
+import { paramsList } from './params-list.js';
+import { isObject } from './utils.js';
+
+function getChangedParams(swiperParams, oldParams, children, oldChildren) {
+  const keys = [];
+  if (!oldParams) return keys;
+
+  const addKey = key => {
+    if (keys.indexOf(key) < 0) keys.push(key);
+  };
+
+  const oldChildrenKeys = oldChildren.map(child => child.key);
+  const childrenKeys = children.map(child => child.key);
+  if (oldChildrenKeys.join('') !== childrenKeys.join('')) addKey('children');
+  if (oldChildren.length !== children.length) addKey('children');
+  const watchParams = paramsList.filter(key => key[0] === '_').map(key => key.replace(/_/, ''));
+  watchParams.forEach(key => {
+    if (key in swiperParams && key in oldParams) {
+      if (isObject(swiperParams[key]) && isObject(oldParams[key])) {
+        const newKeys = Object.keys(swiperParams[key]);
+        const oldKeys = Object.keys(oldParams[key]);
+
+        if (newKeys.length !== oldKeys.length) {
+          addKey(key);
+        } else {
+          newKeys.forEach(newKey => {
+            if (swiperParams[key][newKey] !== oldParams[key][newKey]) {
+              addKey(key);
+            }
+          });
+          oldKeys.forEach(oldKey => {
+            if (swiperParams[key][oldKey] !== oldParams[key][oldKey]) addKey(key);
+          });
+        }
+      } else if (swiperParams[key] !== oldParams[key]) {
+        addKey(key);
+      }
+    }
+  });
+  return keys;
+}
+
+export { getChangedParams };

resources/web/include/swiper/react/get-children.js

@@ -0,0 +1,46 @@
+import React from 'react';
+
+function processChildren(c) {
+  const slides = [];
+  React.Children.toArray(c).forEach(child => {
+    if (child.type && child.type.displayName === 'SwiperSlide') {
+      slides.push(child);
+    } else if (child.props && child.props.children) {
+      processChildren(child.props.children).forEach(slide => slides.push(slide));
+    }
+  });
+  return slides;
+}
+
+function getChildren(c) {
+  const slides = [];
+  const slots = {
+    'container-start': [],
+    'container-end': [],
+    'wrapper-start': [],
+    'wrapper-end': []
+  };
+  React.Children.toArray(c).forEach(child => {
+    if (child.type && child.type.displayName === 'SwiperSlide') {
+      slides.push(child);
+    } else if (child.props && child.props.slot && slots[child.props.slot]) {
+      slots[child.props.slot].push(child);
+    } else if (child.props && child.props.children) {
+      const foundSlides = processChildren(child.props.children);
+
+      if (foundSlides.length > 0) {
+        foundSlides.forEach(slide => slides.push(slide));
+      } else {
+        slots['container-end'].push(child);
+      }
+    } else {
+      slots['container-end'].push(child);
+    }
+  });
+  return {
+    slides,
+    slots
+  };
+}
+
+export { getChildren };

resources/web/include/swiper/react/get-params.js

@@ -0,0 +1,46 @@
+import Swiper from 'swiper';
+import { isObject, extend } from './utils.js';
+import { paramsList } from './params-list.js';
+
+function getParams(obj = {}) {
+  const params = {
+    on: {}
+  };
+  const events = {};
+  const passedParams = {};
+  extend(params, Swiper.defaults);
+  extend(params, Swiper.extendedDefaults);
+  params._emitClasses = true;
+  params.init = false;
+  const rest = {};
+  const allowedParams = paramsList.map(key => key.replace(/_/, ''));
+  Object.keys(obj).forEach(key => {
+    if (allowedParams.indexOf(key) >= 0) {
+      if (isObject(obj[key])) {
+        params[key] = {};
+        passedParams[key] = {};
+        extend(params[key], obj[key]);
+        extend(passedParams[key], obj[key]);
+      } else {
+        params[key] = obj[key];
+        passedParams[key] = obj[key];
+      }
+    } else if (key.search(/on[A-Z]/) === 0 && typeof obj[key] === 'function') {
+      events[`${key[2].toLowerCase()}${key.substr(3)}`] = obj[key];
+    } else {
+      rest[key] = obj[key];
+    }
+  });
+  ['navigation', 'pagination', 'scrollbar'].forEach(key => {
+    if (params[key] === true) params[key] = {};
+    if (params[key] === false) delete params[key];
+  });
+  return {
+    params,
+    passedParams,
+    rest,
+    events
+  };
+}
+
+export { getParams };

resources/web/include/swiper/react/init-swiper.js

@@ -0,0 +1,36 @@
+import Swiper from 'swiper';
+import { needsNavigation, needsPagination, needsScrollbar } from './utils.js';
+
+function initSwiper(swiperParams) {
+  return new Swiper(swiperParams);
+}
+
+function mountSwiper({
+  el,
+  nextEl,
+  prevEl,
+  paginationEl,
+  scrollbarEl,
+  swiper
+}, swiperParams) {
+  if (needsNavigation(swiperParams) && nextEl && prevEl) {
+    swiper.params.navigation.nextEl = nextEl;
+    swiper.originalParams.navigation.nextEl = nextEl;
+    swiper.params.navigation.prevEl = prevEl;
+    swiper.originalParams.navigation.prevEl = prevEl;
+  }
+
+  if (needsPagination(swiperParams) && paginationEl) {
+    swiper.params.pagination.el = paginationEl;
+    swiper.originalParams.pagination.el = paginationEl;
+  }
+
+  if (needsScrollbar(swiperParams) && scrollbarEl) {
+    swiper.params.scrollbar.el = scrollbarEl;
+    swiper.originalParams.scrollbar.el = scrollbarEl;
+  }
+
+  swiper.init(el);
+}
+
+export { initSwiper, mountSwiper };

resources/web/include/swiper/react/loop.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import Swiper from 'swiper';
+
+function calcLoopedSlides(slides, swiperParams) {
+  let slidesPerViewParams = swiperParams.slidesPerView;
+
+  if (swiperParams.breakpoints) {
+    const breakpoint = Swiper.prototype.getBreakpoint(swiperParams.breakpoints);
+    const breakpointOnlyParams = breakpoint in swiperParams.breakpoints ? swiperParams.breakpoints[breakpoint] : undefined;
+
+    if (breakpointOnlyParams && breakpointOnlyParams.slidesPerView) {
+      slidesPerViewParams = breakpointOnlyParams.slidesPerView;
+    }
+  }
+
+  let loopedSlides = Math.ceil(parseFloat(swiperParams.loopedSlides || slidesPerViewParams, 10));
+  loopedSlides += swiperParams.loopAdditionalSlides;
+
+  if (loopedSlides > slides.length) {
+    loopedSlides = slides.length;
+  }
+
+  return loopedSlides;
+}
+
+function renderLoop(swiper, slides, swiperParams) {
+  const modifiedSlides = slides.map((child, index) => {
+    return /*#__PURE__*/React.cloneElement(child, {
+      swiper,
+      'data-swiper-slide-index': index
+    });
+  });
+
+  function duplicateSlide(child, index, position) {
+    return /*#__PURE__*/React.cloneElement(child, {
+      key: `${child.key}-duplicate-${index}-${position}`,
+      className: `${child.props.className || ''} ${swiperParams.slideDuplicateClass}`
+    });
+  }
+
+  if (swiperParams.loopFillGroupWithBlank) {
+    const blankSlidesNum = swiperParams.slidesPerGroup - modifiedSlides.length % swiperParams.slidesPerGroup;
+
+    if (blankSlidesNum !== swiperParams.slidesPerGroup) {
+      for (let i = 0; i < blankSlidesNum; i += 1) {
+        const blankSlide = /*#__PURE__*/React.createElement("div", {
+          className: `${swiperParams.slideClass} ${swiperParams.slideBlankClass}`
+        });
+        modifiedSlides.push(blankSlide);
+      }
+    }
+  }
+
+  if (swiperParams.slidesPerView === 'auto' && !swiperParams.loopedSlides) {
+    swiperParams.loopedSlides = modifiedSlides.length;
+  }
+
+  const loopedSlides = calcLoopedSlides(modifiedSlides, swiperParams);
+  const prependSlides = [];
+  const appendSlides = [];
+  modifiedSlides.forEach((child, index) => {
+    if (index < loopedSlides) {
+      appendSlides.push(duplicateSlide(child, index, 'prepend'));
+    }
+
+    if (index < modifiedSlides.length && index >= modifiedSlides.length - loopedSlides) {
+      prependSlides.push(duplicateSlide(child, index, 'append'));
+    }
+  });
+
+  if (swiper) {
+    swiper.loopedSlides = loopedSlides;
+  }
+
+  return [...prependSlides, ...modifiedSlides, ...appendSlides];
+}
+
+export { calcLoopedSlides, renderLoop };

resources/web/include/swiper/react/params-list.js

@@ -0,0 +1,4 @@
+/* underscore in name -> watch for changes */
+const paramsList = ['modules', 'init', '_direction', 'touchEventsTarget', 'initialSlide', '_speed', 'cssMode', 'updateOnWindowResize', 'resizeObserver', 'nested', 'focusableElements', '_enabled', '_width', '_height', 'preventInteractionOnTransition', 'userAgent', 'url', '_edgeSwipeDetection', '_edgeSwipeThreshold', '_freeMode', '_autoHeight', 'setWrapperSize', 'virtualTranslate', '_effect', 'breakpoints', '_spaceBetween', '_slidesPerView', '_grid', '_slidesPerGroup', '_slidesPerGroupSkip', '_slidesPerGroupAuto', '_centeredSlides', '_centeredSlidesBounds', '_slidesOffsetBefore', '_slidesOffsetAfter', 'normalizeSlideIndex', '_centerInsufficientSlides', '_watchOverflow', 'roundLengths', 'touchRatio', 'touchAngle', 'simulateTouch', '_shortSwipes', '_longSwipes', 'longSwipesRatio', 'longSwipesMs', '_followFinger', 'allowTouchMove', '_threshold', 'touchMoveStopPropagation', 'touchStartPreventDefault', 'touchStartForcePreventDefault', 'touchReleaseOnEdges', 'uniqueNavElements', '_resistance', '_resistanceRatio', '_watchSlidesProgress', '_grabCursor', 'preventClicks', 'preventClicksPropagation', '_slideToClickedSlide', '_preloadImages', 'updateOnImagesReady', '_loop', '_loopAdditionalSlides', '_loopedSlides', '_loopFillGroupWithBlank', 'loopPreventsSlide', '_allowSlidePrev', '_allowSlideNext', '_swipeHandler', '_noSwiping', 'noSwipingClass', 'noSwipingSelector', 'passiveListeners', 'containerModifierClass', 'slideClass', 'slideBlankClass', 'slideActiveClass', 'slideDuplicateActiveClass', 'slideVisibleClass', 'slideDuplicateClass', 'slideNextClass', 'slideDuplicateNextClass', 'slidePrevClass', 'slideDuplicatePrevClass', 'wrapperClass', 'runCallbacksOnInit', 'observer', 'observeParents', 'observeSlideChildren', // modules
+'a11y', 'autoplay', '_controller', 'coverflowEffect', 'cubeEffect', 'fadeEffect', 'flipEffect', 'creativeEffect', 'cardsEffect', 'hashNavigation', 'history', 'keyboard', 'lazy', 'mousewheel', '_navigation', '_pagination', 'parallax', '_scrollbar', '_thumbs', 'virtual', 'zoom'];
+export { paramsList };

resources/web/include/swiper/react/swiper-react.d.ts

@@ -0,0 +1,467 @@
+import * as React from 'react';
+
+import { SwiperOptions, Swiper as SwiperClass } from '../types/';
+
+interface Swiper extends SwiperOptions {
+  /**
+   * Swiper container tag
+   *
+   * @default 'div'
+   */
+  tag?: string;
+
+  /**
+   * Swiper wrapper tag
+   *
+   * @default 'div'
+   */
+  wrapperTag?: string;
+
+  /**
+   * Get Swiper instance
+   */
+  onSwiper?: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired in when autoplay started
+   */
+  onAutoplayStart?: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired when autoplay stopped
+   */
+  onAutoplayStop?: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired when slide changed with autoplay
+   */
+  onAutoplay?: (swiper: SwiperClass) => void;/**
+   * Event will be fired on window hash change
+   */
+  onHashChange?: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired when swiper updates the hash
+   */
+  onHashSet?: (swiper: SwiperClass) => void;/**
+   * Event will be fired on mousewheel scroll
+   */
+  onScroll?: (swiper: SwiperClass, event: WheelEvent) => void;/**
+   * Event will be fired in the beginning of lazy loading of image
+   */
+  onLazyImageLoad?: (swiper: SwiperClass, slideEl: HTMLElement, imageEl: HTMLElement) => void;
+  /**
+   * Event will be fired when lazy loading image will be loaded
+   */
+  onLazyImageReady?: (swiper: SwiperClass, slideEl: HTMLElement, imageEl: HTMLElement) => void;/**
+   * Event will be fired on key press
+   */
+  onKeyPress?: (swiper: SwiperClass, keyCode: string) => void;/**
+   * Event will be fired on navigation hide
+   */
+  onNavigationHide?: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired on navigation show
+   */
+  onNavigationShow?: (swiper: SwiperClass) => void;/**
+   * Event will be fired on draggable scrollbar drag start
+   */
+  onScrollbarDragStart?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+
+  /**
+   * Event will be fired on draggable scrollbar drag move
+   */
+  onScrollbarDragMove?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+
+  /**
+   * Event will be fired on draggable scrollbar drag end
+   */
+  onScrollbarDragEnd?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;/**
+   * Event will be fired after pagination rendered
+   */
+  onPaginationRender?: (swiper: SwiperClass, paginationEl: HTMLElement) => void;
+
+  /**
+   * Event will be fired when pagination updated
+   */
+  onPaginationUpdate?: (swiper: SwiperClass, paginationEl: HTMLElement) => void;
+
+  /**
+   * Event will be fired on pagination hide
+   */
+  onPaginationHide?: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired on pagination show
+   */
+  onPaginationShow?: (swiper: SwiperClass) => void;/**
+   * Event will be fired on zoom change
+   */
+  onZoomChange?: (swiper: SwiperClass, scale: number, imageEl: HTMLElement, slideEl: HTMLElement) => void;
+  
+  /**
+   * Fired right after Swiper initialization.
+   * @note Note that with `swiper.on('init')` syntax it will
+   * work only in case you set `init: false` parameter.
+   *
+   * @example
+   * ```js
+   * const swiper = new Swiper('.swiper', {
+   *   init: false,
+   *   // other parameters
+   * });
+   * swiper.on('init', function() {
+   *  // do something
+   * });
+   * // init Swiper
+   * swiper.init();
+   * ```
+   *
+   * @example
+   * ```js
+   * // Otherwise use it as the parameter:
+   * const swiper = new Swiper('.swiper', {
+   *   // other parameters
+   *   on: {
+   *     init: function () {
+   *       // do something
+   *     },
+   *   }
+   * });
+   * ```
+   */
+  onInit?: (swiper: SwiperClass) => any;
+
+  /**
+   * Event will be fired right before Swiper destroyed
+   */
+  onBeforeDestroy?: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired when currently active slide is changed
+   */
+  onSlideChange?: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired in the beginning of animation to other slide (next or previous).
+   */
+  onSlideChangeTransitionStart?: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired after animation to other slide (next or previous).
+   */
+  onSlideChangeTransitionEnd?: (swiper: SwiperClass) => void;
+
+  /**
+   * Same as "slideChangeTransitionStart" but for "forward" direction only
+   */
+  onSlideNextTransitionStart?: (swiper: SwiperClass) => void;
+
+  /**
+   * Same as "slideChangeTransitionEnd" but for "forward" direction only
+   */
+  onSlideNextTransitionEnd?: (swiper: SwiperClass) => void;
+
+  /**
+   * Same as "slideChangeTransitionStart" but for "backward" direction only
+   */
+  onSlidePrevTransitionStart?: (swiper: SwiperClass) => void;
+
+  /**
+   * Same as "slideChangeTransitionEnd" but for "backward" direction only
+   */
+  onSlidePrevTransitionEnd?: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired in the beginning of transition.
+   */
+  onTransitionStart?: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired after transition.
+   */
+  onTransitionEnd?: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired when user touch Swiper. Receives `touchstart` event as an arguments.
+   */
+  onTouchStart?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+
+  /**
+   * Event will be fired when user touch and move finger over Swiper. Receives `touchmove` event as an arguments.
+   */
+  onTouchMove?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+
+  /**
+   * Event will be fired when user touch and move finger over Swiper in direction opposite to direction parameter. Receives `touchmove` event as an arguments.
+   */
+  onTouchMoveOpposite?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+
+  /**
+   * Event will be fired when user touch and move finger over Swiper and move it. Receives `touchmove` event as an arguments.
+   */
+  onSliderMove?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+
+  /**
+   * Event will be fired when user release Swiper. Receives `touchend` event as an arguments.
+   */
+  onTouchEnd?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+
+  /**
+   * Event will be fired when user click/tap on Swiper. Receives `touchend` event as an arguments.
+   */
+  onClick?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+
+  /**
+   * Event will be fired when user click/tap on Swiper. Receives `touchend` event as an arguments.
+   */
+  onTap?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+
+  /**
+   * Event will be fired when user double tap on Swiper's container. Receives `touchend` event as an arguments
+   */
+  onDoubleTap?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+
+  /**
+   * Event will be fired right after all inner images are loaded. updateOnImagesReady should be also enabled
+   */
+  onImagesReady?: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired when Swiper progress is changed, as an arguments it receives progress that is always from 0 to 1
+   */
+  onProgress?: (swiper: SwiperClass, progress: number) => void;
+
+  /**
+   * Event will be fired when Swiper reach its beginning (initial position)
+   */
+  onReachBeginning?: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired when Swiper reach last slide
+   */
+  onReachEnd?: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired when Swiper goes to beginning or end position
+   */
+  onToEdge?: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired when Swiper goes from beginning or end position
+   */
+  onFromEdge?: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired when swiper's wrapper change its position. Receives current translate value as an arguments
+   */
+  onSetTranslate?: (swiper: SwiperClass, translate: number) => void;
+
+  /**
+   * Event will be fired everytime when swiper starts animation. Receives current transition duration (in ms) as an arguments
+   */
+  onSetTransition?: (swiper: SwiperClass, transition: number) => void;
+
+  /**
+   * Event will be fired on window resize right before swiper's onresize manipulation
+   */
+  onResize?: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired if observer is enabled and it detects DOM mutations
+   */
+  onObserverUpdate?: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired right before "loop fix"
+   */
+  onBeforeLoopFix?: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired after "loop fix"
+   */
+  onLoopFix?: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired on breakpoint change
+   */
+  onBreakpoint?: (swiper: SwiperClass, breakpointParams: SwiperOptions) => void;
+
+  /**
+   * !INTERNAL: Event will fired right before breakpoint change
+   */
+  _beforeBreakpoint?: (swiper: SwiperClass, breakpointParams: SwiperOptions) => void;
+
+  /**
+   * !INTERNAL: Event will fired after setting CSS classes on swiper container element
+   */
+  _containerClasses?: (swiper: SwiperClass, classNames: string) => void;
+
+  /**
+   * !INTERNAL: Event will fired after setting CSS classes on swiper slide element
+   */
+  _slideClass?: (swiper: SwiperClass, slideEl: HTMLElement, classNames: string) => void;
+
+  /**
+   * !INTERNAL: Event will fired after setting CSS classes on all swiper slides
+   */
+  _slideClasses?: (
+    swiper: SwiperClass,
+    slides: { slideEl: HTMLElement; classNames: string; index: number }[],
+  ) => void;
+
+  /**
+   * !INTERNAL: Event will fired as soon as swiper instance available (before init)
+   */
+  _swiper?: (swiper: SwiperClass) => void;
+
+  /**
+   * !INTERNAL: Event will be fired on free mode touch end (release) and there will no be momentum
+   */
+  _freeModeNoMomentumRelease?: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will fired on active index change
+   */
+  onActiveIndexChange?: (swiper: SwiperClass) => void;
+  /**
+   * Event will fired on snap index change
+   */
+  onSnapIndexChange?: (swiper: SwiperClass) => void;
+  /**
+   * Event will fired on real index change
+   */
+  onRealIndexChange?: (swiper: SwiperClass) => void;
+  /**
+   * Event will fired right after initialization
+   */
+  onAfterInit?: (swiper: SwiperClass) => void;
+  /**
+   * Event will fired right before initialization
+   */
+  onBeforeInit?: (swiper: SwiperClass) => void;
+  /**
+   * Event will fired before resize handler
+   */
+  onBeforeResize?: (swiper: SwiperClass) => void;
+  /**
+   * Event will fired before slide change transition start
+   */
+  onBeforeSlideChangeStart?: (swiper: SwiperClass) => void;
+  /**
+   * Event will fired before transition start
+   */
+  onBeforeTransitionStart?: (swiper: SwiperClass, speed: number, internal: any) => void; // what is internal?
+  /**
+   * Event will fired on direction change
+   */
+  onChangeDirection?: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired when user double click/tap on Swiper
+   */
+  onDoubleClick?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+  /**
+   * Event will be fired on swiper destroy
+   */
+  onDestroy?: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired on momentum bounce
+   */
+  onMomentumBounce?: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired on orientation change (e.g. landscape -> portrait)
+   */
+  onOrientationchange?: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired in the beginning of animation of resetting slide to current one
+   */
+  onSlideResetTransitionStart?: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired in the end of animation of resetting slide to current one
+   */
+  onSlideResetTransitionEnd?: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired with first touch/drag move
+   */
+  onSliderFirstMove?: (swiper: SwiperClass, event: TouchEvent) => void;
+  /**
+   * Event will be fired when number of slides has changed
+   */
+  onSlidesLengthChange?: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired when slides grid has changed
+   */
+  onSlidesGridLengthChange?: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired when snap grid has changed
+   */
+  onSnapGridLengthChange?: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired after swiper.update() call
+   */
+  onUpdate?: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired when swiper is locked (when `watchOverflow` enabled)
+   */
+  onLock?: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired when swiper is unlocked (when `watchOverflow` enabled)
+   */
+  onUnlock?: (swiper: SwiperClass) => void;
+  
+}
+
+interface SlideData {
+  isActive: boolean;
+  isVisible: boolean;
+  isDuplicate: boolean;
+  isPrev: boolean;
+  isNext: boolean;
+}
+
+interface SwiperSlide {
+  /**
+   * Slide tag
+   *
+   * @default 'div'
+   */
+  tag?: string;
+
+  /**
+   * Enables additional wrapper required for zoom mode
+   *
+   * @default false
+   */
+  zoom?: boolean;
+
+  /**
+   * Slide's index in slides array/collection
+   *
+   * @default false
+   */
+  virtualIndex?: number;
+
+  /**
+   * Slide's child element or render function
+   *
+   * @default undefined
+   */
+  children?: React.ReactNode | ((slideData: SlideData) => React.ReactNode);
+}
+
+interface Swiper
+  extends Omit<
+    React.HTMLAttributes<HTMLElement>,
+    | 'onProgress'
+    | 'onClick'
+    | 'onTouchEnd'
+    | 'onTouchMove'
+    | 'onTouchStart'
+    | 'onTransitionEnd'
+    | 'onKeyPress'
+    | 'onDoubleClick'
+    | 'onScroll'
+  > {}
+interface SwiperSlide extends React.HTMLAttributes<HTMLElement> {}
+
+declare const Swiper: React.FunctionComponent<Swiper>;
+declare const SwiperSlide: React.VoidFunctionComponent<SwiperSlide>;
+
+export { Swiper, SwiperSlide };

resources/web/include/swiper/react/swiper-react.js

@@ -0,0 +1,15 @@
+/**
+ * Swiper React 7.2.0
+ * Most modern mobile touch slider and framework with hardware accelerated transitions
+ * https://swiperjs.com
+ *
+ * Copyright 2014-2021 Vladimir Kharlampidi
+ *
+ * Released under the MIT License
+ *
+ * Released on: October 27, 2021
+ */
+
+import { Swiper } from './swiper.js';
+import { SwiperSlide } from './swiper-slide.js';
+export { Swiper, SwiperSlide };

resources/web/include/swiper/react/swiper-slide.js

@@ -0,0 +1,79 @@
+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); }
+
+import React, { useRef, useState, forwardRef } from 'react';
+import { uniqueClasses } from './utils.js';
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.js';
+const SwiperSlide = /*#__PURE__*/forwardRef(({
+  tag: Tag = 'div',
+  children,
+  className = '',
+  swiper,
+  zoom,
+  virtualIndex,
+  ...rest
+} = {}, externalRef) => {
+  const slideElRef = useRef(null);
+  const [slideClasses, setSlideClasses] = useState('swiper-slide');
+
+  function updateClasses(_s, el, classNames) {
+    if (el === slideElRef.current) {
+      setSlideClasses(classNames);
+    }
+  }
+
+  useIsomorphicLayoutEffect(() => {
+    if (externalRef) {
+      externalRef.current = slideElRef.current;
+    }
+
+    if (!slideElRef.current || !swiper) {
+      return;
+    }
+
+    if (swiper.destroyed) {
+      if (slideClasses !== 'swiper-slide') {
+        setSlideClasses('swiper-slide');
+      }
+
+      return;
+    }
+
+    swiper.on('_slideClass', updateClasses); // eslint-disable-next-line
+
+    return () => {
+      if (!swiper) return;
+      swiper.off('_slideClass', updateClasses);
+    };
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (swiper && slideElRef.current) {
+      setSlideClasses(swiper.getSlideClasses(slideElRef.current));
+    }
+  }, [swiper]);
+  let slideData;
+
+  if (typeof children === 'function') {
+    slideData = {
+      isActive: slideClasses.indexOf('swiper-slide-active') >= 0 || slideClasses.indexOf('swiper-slide-duplicate-active') >= 0,
+      isVisible: slideClasses.indexOf('swiper-slide-visible') >= 0,
+      isDuplicate: slideClasses.indexOf('swiper-slide-duplicate') >= 0,
+      isPrev: slideClasses.indexOf('swiper-slide-prev') >= 0 || slideClasses.indexOf('swiper-slide-duplicate-prev') >= 0,
+      isNext: slideClasses.indexOf('swiper-slide-next') >= 0 || slideClasses.indexOf('swiper-slide-duplicate-next') >= 0
+    };
+  }
+
+  const renderChildren = () => {
+    return typeof children === 'function' ? children(slideData) : children;
+  };
+
+  return /*#__PURE__*/React.createElement(Tag, _extends({
+    ref: slideElRef,
+    className: uniqueClasses(`${slideClasses}${className ? ` ${className}` : ''}`),
+    "data-swiper-slide-index": virtualIndex
+  }, rest), zoom ? /*#__PURE__*/React.createElement("div", {
+    className: "swiper-zoom-container",
+    "data-swiper-zoom": typeof zoom === 'number' ? zoom : undefined
+  }, renderChildren()) : renderChildren());
+});
+SwiperSlide.displayName = 'SwiperSlide';
+export { SwiperSlide };

resources/web/include/swiper/react/swiper.js

@@ -0,0 +1,202 @@
+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); }
+
+import React, { useRef, useState, useEffect, forwardRef } from 'react';
+import { getParams } from './get-params.js';
+import { initSwiper, mountSwiper } from './init-swiper.js';
+import { needsScrollbar, needsNavigation, needsPagination, uniqueClasses, extend } from './utils.js';
+import { renderLoop, calcLoopedSlides } from './loop.js';
+import { getChangedParams } from './get-changed-params.js';
+import { getChildren } from './get-children.js';
+import { updateSwiper } from './update-swiper.js';
+import { renderVirtual, updateOnVirtualData } from './virtual.js';
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.js';
+const Swiper = /*#__PURE__*/forwardRef(({
+  className,
+  tag: Tag = 'div',
+  wrapperTag: WrapperTag = 'div',
+  children,
+  onSwiper,
+  ...rest
+} = {}, externalElRef) => {
+  let eventsAssigned = false;
+  const [containerClasses, setContainerClasses] = useState('swiper');
+  const [virtualData, setVirtualData] = useState(null);
+  const [breakpointChanged, setBreakpointChanged] = useState(false);
+  const initializedRef = useRef(false);
+  const swiperElRef = useRef(null);
+  const swiperRef = useRef(null);
+  const oldPassedParamsRef = useRef(null);
+  const oldSlides = useRef(null);
+  const nextElRef = useRef(null);
+  const prevElRef = useRef(null);
+  const paginationElRef = useRef(null);
+  const scrollbarElRef = useRef(null);
+  const {
+    params: swiperParams,
+    passedParams,
+    rest: restProps,
+    events
+  } = getParams(rest);
+  const {
+    slides,
+    slots
+  } = getChildren(children);
+
+  const onBeforeBreakpoint = () => {
+    setBreakpointChanged(!breakpointChanged);
+  };
+
+  Object.assign(swiperParams.on, {
+    _containerClasses(swiper, classes) {
+      setContainerClasses(classes);
+    }
+
+  });
+
+  if (!swiperElRef.current) {
+    // init swiper
+    Object.assign(swiperParams.on, events);
+    eventsAssigned = true;
+    swiperRef.current = initSwiper(swiperParams);
+
+    swiperRef.current.loopCreate = () => {};
+
+    swiperRef.current.loopDestroy = () => {};
+
+    if (swiperParams.loop) {
+      swiperRef.current.loopedSlides = calcLoopedSlides(slides, swiperParams);
+    }
+
+    if (swiperRef.current.virtual && swiperRef.current.params.virtual.enabled) {
+      swiperRef.current.virtual.slides = slides;
+      const extendWith = {
+        cache: false,
+        slides,
+        renderExternal: setVirtualData,
+        renderExternalUpdate: false
+      };
+      extend(swiperRef.current.params.virtual, extendWith);
+      extend(swiperRef.current.originalParams.virtual, extendWith);
+    }
+  } // Listen for breakpoints change
+
+
+  if (swiperRef.current) {
+    swiperRef.current.on('_beforeBreakpoint', onBeforeBreakpoint);
+  }
+
+  const attachEvents = () => {
+    if (eventsAssigned || !events || !swiperRef.current) return;
+    Object.keys(events).forEach(eventName => {
+      swiperRef.current.on(eventName, events[eventName]);
+    });
+  };
+
+  const detachEvents = () => {
+    if (!events || !swiperRef.current) return;
+    Object.keys(events).forEach(eventName => {
+      swiperRef.current.off(eventName, events[eventName]);
+    });
+  };
+
+  useEffect(() => {
+    return () => {
+      if (swiperRef.current) swiperRef.current.off('_beforeBreakpoint', onBeforeBreakpoint);
+    };
+  }); // set initialized flag
+
+  useEffect(() => {
+    if (!initializedRef.current && swiperRef.current) {
+      swiperRef.current.emitSlidesClasses();
+      initializedRef.current = true;
+    }
+  }); // mount swiper
+
+  useIsomorphicLayoutEffect(() => {
+    if (externalElRef) {
+      externalElRef.current = swiperElRef.current;
+    }
+
+    if (!swiperElRef.current) return;
+    mountSwiper({
+      el: swiperElRef.current,
+      nextEl: nextElRef.current,
+      prevEl: prevElRef.current,
+      paginationEl: paginationElRef.current,
+      scrollbarEl: scrollbarElRef.current,
+      swiper: swiperRef.current
+    }, swiperParams);
+    if (onSwiper) onSwiper(swiperRef.current); // eslint-disable-next-line
+
+    return () => {
+      if (swiperRef.current && !swiperRef.current.destroyed) {
+        swiperRef.current.destroy(true, false);
+      }
+    };
+  }, []); // watch for params change
+
+  useIsomorphicLayoutEffect(() => {
+    attachEvents();
+    const changedParams = getChangedParams(passedParams, oldPassedParamsRef.current, slides, oldSlides.current);
+    oldPassedParamsRef.current = passedParams;
+    oldSlides.current = slides;
+
+    if (changedParams.length && swiperRef.current && !swiperRef.current.destroyed) {
+      updateSwiper({
+        swiper: swiperRef.current,
+        slides,
+        passedParams,
+        changedParams,
+        nextEl: nextElRef.current,
+        prevEl: prevElRef.current,
+        scrollbarEl: scrollbarElRef.current,
+        paginationEl: paginationElRef.current
+      });
+    }
+
+    return () => {
+      detachEvents();
+    };
+  }); // update on virtual update
+
+  useIsomorphicLayoutEffect(() => {
+    updateOnVirtualData(swiperRef.current);
+  }, [virtualData]); // bypass swiper instance to slides
+
+  function renderSlides() {
+    if (swiperParams.virtual) {
+      return renderVirtual(swiperRef.current, slides, virtualData);
+    }
+
+    if (!swiperParams.loop || swiperRef.current && swiperRef.current.destroyed) {
+      return slides.map(child => {
+        return /*#__PURE__*/React.cloneElement(child, {
+          swiper: swiperRef.current
+        });
+      });
+    }
+
+    return renderLoop(swiperRef.current, slides, swiperParams);
+  }
+
+  return /*#__PURE__*/React.createElement(Tag, _extends({
+    ref: swiperElRef,
+    className: uniqueClasses(`${containerClasses}${className ? ` ${className}` : ''}`)
+  }, restProps), slots['container-start'], needsNavigation(swiperParams) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: prevElRef,
+    className: "swiper-button-prev"
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: nextElRef,
+    className: "swiper-button-next"
+  })), needsScrollbar(swiperParams) && /*#__PURE__*/React.createElement("div", {
+    ref: scrollbarElRef,
+    className: "swiper-scrollbar"
+  }), needsPagination(swiperParams) && /*#__PURE__*/React.createElement("div", {
+    ref: paginationElRef,
+    className: "swiper-pagination"
+  }), /*#__PURE__*/React.createElement(WrapperTag, {
+    className: "swiper-wrapper"
+  }, slots['wrapper-start'], renderSlides(), slots['wrapper-end']), slots['container-end']);
+});
+Swiper.displayName = 'Swiper';
+export { Swiper };

resources/web/include/swiper/react/update-swiper.js

@@ -0,0 +1,131 @@
+import { isObject, extend } from './utils.js';
+
+function updateSwiper({
+  swiper,
+  slides,
+  passedParams,
+  changedParams,
+  nextEl,
+  prevEl,
+  scrollbarEl,
+  paginationEl
+}) {
+  const updateParams = changedParams.filter(key => key !== 'children' && key !== 'direction');
+  const {
+    params: currentParams,
+    pagination,
+    navigation,
+    scrollbar,
+    virtual,
+    thumbs
+  } = swiper;
+  let needThumbsInit;
+  let needControllerInit;
+  let needPaginationInit;
+  let needScrollbarInit;
+  let needNavigationInit;
+
+  if (changedParams.includes('thumbs') && passedParams.thumbs && passedParams.thumbs.swiper && currentParams.thumbs && !currentParams.thumbs.swiper) {
+    needThumbsInit = true;
+  }
+
+  if (changedParams.includes('controller') && passedParams.controller && passedParams.controller.control && currentParams.controller && !currentParams.controller.control) {
+    needControllerInit = true;
+  }
+
+  if (changedParams.includes('pagination') && passedParams.pagination && (passedParams.pagination.el || paginationEl) && (currentParams.pagination || currentParams.pagination === false) && pagination && !pagination.el) {
+    needPaginationInit = true;
+  }
+
+  if (changedParams.includes('scrollbar') && passedParams.scrollbar && (passedParams.scrollbar.el || scrollbarEl) && (currentParams.scrollbar || currentParams.scrollbar === false) && scrollbar && !scrollbar.el) {
+    needScrollbarInit = true;
+  }
+
+  if (changedParams.includes('navigation') && passedParams.navigation && (passedParams.navigation.prevEl || prevEl) && (passedParams.navigation.nextEl || nextEl) && (currentParams.navigation || currentParams.navigation === false) && navigation && !navigation.prevEl && !navigation.nextEl) {
+    needNavigationInit = true;
+  }
+
+  const destroyModule = mod => {
+    if (!swiper[mod]) return;
+    swiper[mod].destroy();
+
+    if (mod === 'navigation') {
+      currentParams[mod].prevEl = undefined;
+      currentParams[mod].nextEl = undefined;
+      swiper[mod].prevEl = undefined;
+      swiper[mod].nextEl = undefined;
+    } else {
+      currentParams[mod].el = undefined;
+      swiper[mod].el = undefined;
+    }
+  };
+
+  updateParams.forEach(key => {
+    if (isObject(currentParams[key]) && isObject(passedParams[key])) {
+      extend(currentParams[key], passedParams[key]);
+    } else {
+      const newValue = passedParams[key];
+
+      if ((newValue === true || newValue === false) && (key === 'navigation' || key === 'pagination' || key === 'scrollbar')) {
+        if (newValue === false) {
+          destroyModule(key);
+        }
+      } else {
+        currentParams[key] = passedParams[key];
+      }
+    }
+  });
+
+  if (changedParams.includes('children') && virtual && currentParams.virtual.enabled) {
+    virtual.slides = slides;
+    virtual.update(true);
+  } else if (changedParams.includes('children') && swiper.lazy && swiper.params.lazy.enabled) {
+    swiper.lazy.load();
+  }
+
+  if (needThumbsInit) {
+    const initialized = thumbs.init();
+    if (initialized) thumbs.update(true);
+  }
+
+  if (needControllerInit) {
+    swiper.controller.control = currentParams.controller.control;
+  }
+
+  if (needPaginationInit) {
+    if (paginationEl) currentParams.pagination.el = paginationEl;
+    pagination.init();
+    pagination.render();
+    pagination.update();
+  }
+
+  if (needScrollbarInit) {
+    if (scrollbarEl) currentParams.scrollbar.el = scrollbarEl;
+    scrollbar.init();
+    scrollbar.updateSize();
+    scrollbar.setTranslate();
+  }
+
+  if (needNavigationInit) {
+    if (nextEl) currentParams.navigation.nextEl = nextEl;
+    if (prevEl) currentParams.navigation.prevEl = prevEl;
+    navigation.init();
+    navigation.update();
+  }
+
+  if (changedParams.includes('allowSlideNext')) {
+    swiper.allowSlideNext = passedParams.allowSlideNext;
+  }
+
+  if (changedParams.includes('allowSlidePrev')) {
+    swiper.allowSlidePrev = passedParams.allowSlidePrev;
+  }
+
+  if (changedParams.includes('direction')) {
+    swiper.changeDirection(passedParams.direction, false);
+  }
+
+  swiper.update();
+}
+
+export { updateSwiper };

resources/web/include/swiper/react/use-isomorphic-layout-effect.js

@@ -0,0 +1,9 @@
+import { useEffect, useLayoutEffect } from 'react';
+
+function useIsomorphicLayoutEffect(callback, deps) {
+  // eslint-disable-next-line
+  if (typeof window === 'undefined') return useEffect(callback, deps);
+  return useLayoutEffect(callback, deps);
+}
+
+export { useIsomorphicLayoutEffect };

resources/web/include/swiper/react/utils.js

@@ -0,0 +1,37 @@
+function isObject(o) {
+  return typeof o === 'object' && o !== null && o.constructor && Object.prototype.toString.call(o).slice(8, -1) === 'Object';
+}
+
+function extend(target, src) {
+  const noExtend = ['__proto__', 'constructor', 'prototype'];
+  Object.keys(src).filter(key => noExtend.indexOf(key) < 0).forEach(key => {
+    if (typeof target[key] === 'undefined') target[key] = src[key];else if (isObject(src[key]) && isObject(target[key]) && Object.keys(src[key]).length > 0) {
+      if (src[key].__swiper__) target[key] = src[key];else extend(target[key], src[key]);
+    } else {
+      target[key] = src[key];
+    }
+  });
+}
+
+function needsNavigation(params = {}) {
+  return params.navigation && typeof params.navigation.nextEl === 'undefined' && typeof params.navigation.prevEl === 'undefined';
+}
+
+function needsPagination(params = {}) {
+  return params.pagination && typeof params.pagination.el === 'undefined';
+}
+
+function needsScrollbar(params = {}) {
+  return params.scrollbar && typeof params.scrollbar.el === 'undefined';
+}
+
+function uniqueClasses(classNames = '') {
+  const classes = classNames.split(' ').map(c => c.trim()).filter(c => !!c);
+  const unique = [];
+  classes.forEach(c => {
+    if (unique.indexOf(c) < 0) unique.push(c);
+  });
+  return unique.join(' ');
+}
+
+export { isObject, extend, needsNavigation, needsPagination, needsScrollbar, uniqueClasses };

resources/web/include/swiper/react/virtual.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+function updateOnVirtualData(swiper) {
+  if (!swiper || swiper.destroyed || !swiper.params.virtual || swiper.params.virtual && !swiper.params.virtual.enabled) return;
+  swiper.updateSlides();
+  swiper.updateProgress();
+  swiper.updateSlidesClasses();
+
+  if (swiper.lazy && swiper.params.lazy.enabled) {
+    swiper.lazy.load();
+  }
+
+  if (swiper.parallax && swiper.params.parallax && swiper.params.parallax.enabled) {
+    swiper.parallax.setTranslate();
+  }
+}
+
+function renderVirtual(swiper, slides, virtualData) {
+  if (!virtualData) return null;
+  const style = swiper.isHorizontal() ? {
+    [swiper.rtlTranslate ? 'right' : 'left']: `${virtualData.offset}px`
+  } : {
+    top: `${virtualData.offset}px`
+  };
+  return slides.filter((child, index) => index >= virtualData.from && index <= virtualData.to).map(child => {
+    return /*#__PURE__*/React.cloneElement(child, {
+      swiper,
+      style
+    });
+  });
+}
+
+export { renderVirtual, updateOnVirtualData };