ENH: model info display UI

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

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

@@ -0,0 +1,39 @@
+import { isObject } from './utils.js';
+import { paramsList } from './params-list.js';
+
+function getChangedParams(swiperParams, oldParams) {
+  const keys = [];
+  if (!oldParams) return keys;
+
+  const addKey = key => {
+    if (keys.indexOf(key) < 0) keys.push(key);
+  };
+
+  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/svelte/get-params.js

@@ -0,0 +1,44 @@
+import Swiper from 'swiper';
+import { isObject, extend } from './utils.js';
+import { paramsList } from './params-list.js';
+
+function getParams(obj = {}) {
+  const params = {
+    on: {}
+  };
+  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') {
+      params.on[`${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
+  };
+}
+
+export { getParams };

resources/web/include/swiper/svelte/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/svelte/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/svelte/swiper-slide.svelte

@@ -0,0 +1,95 @@
+<script>
+  import { onMount, onDestroy, beforeUpdate, afterUpdate } from 'svelte';
+  import { uniqueClasses } from './utils.js';
+
+  export let zoom = undefined;
+  export let virtualIndex = undefined;
+
+  let className = undefined;
+  export { className as class };
+
+  let slideEl = null;
+  let slideClasses = 'swiper-slide';
+
+  let swiper = null;
+  let eventAttached = false;
+
+  const updateClasses = (_, el, classNames) => {
+    if (el === slideEl) {
+      slideClasses = classNames;
+    }
+  };
+
+  const attachEvent = () => {
+    if (!swiper || eventAttached) return;
+    swiper.on('_slideClass', updateClasses);
+    eventAttached = true;
+  };
+
+  const detachEvent = () => {
+    if (!swiper) return;
+    swiper.off('_slideClass', updateClasses);
+    eventAttached = false;
+  };
+
+  $: 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,
+  };
+
+  onMount(() => {
+    if (typeof virtualIndex === 'undefined') return;
+    slideEl.onSwiper = (_swiper) => {
+      swiper = _swiper;
+      attachEvent();
+    };
+    attachEvent();
+  });
+
+  afterUpdate(() => {
+    if (!slideEl || !swiper) return;
+    if (swiper.destroyed) {
+      if (slideClasses !== 'swiper-slide') {
+        slideClasses = 'swiper-slide';
+      }
+      return;
+    }
+    attachEvent();
+  });
+
+  beforeUpdate(() => {
+    attachEvent();
+  });
+
+  onDestroy(() => {
+    if (!swiper) return;
+    detachEvent();
+  });
+</script>
+
+<div
+  bind:this={slideEl}
+  class={uniqueClasses(`${slideClasses}${className ? ` ${className}` : ''}`)}
+  data-swiper-slide-index={virtualIndex}
+  {...$$restProps}
+>
+  {#if zoom}
+    <div
+      class="swiper-zoom-container"
+      data-swiper-zoom={typeof zoom === 'number' ? zoom : undefined}
+    >
+      <slot data={slideData} />
+    </div>
+  {:else}
+    <slot data={slideData} />
+  {/if}
+</div>

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

@@ -0,0 +1,431 @@
+import { SvelteComponentTyped } from 'svelte';
+import { SwiperOptions, Swiper as SwiperClass } from '../types/';
+
+// @ts-ignore
+interface SwiperProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {}
+interface SwiperProps extends SwiperOptions {}
+
+// @ts-ignore
+interface SwiperSlideProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+  /**
+   * Enables additional wrapper required for zoom mode
+   *
+   * @default false
+   */
+  zoom?: boolean;
+
+  /**
+   * Slide's index in slides array/collection
+   *
+   * @default false
+   */
+  virtualIndex?: number;
+}
+
+declare class Swiper extends SvelteComponentTyped<
+  SwiperProps,
+  {
+    swiper: CustomEvent<void>;
+    /**
+   * Event will be fired in when autoplay started
+   */
+  autoplayStart: CustomEvent<[swiper: SwiperClass]>;
+  /**
+   * Event will be fired when autoplay stopped
+   */
+  autoplayStop: CustomEvent<[swiper: SwiperClass]>;
+  /**
+   * Event will be fired when slide changed with autoplay
+   */
+  autoplay: CustomEvent<[swiper: SwiperClass]>;/**
+   * Event will be fired on window hash change
+   */
+  hashChange: CustomEvent<[swiper: SwiperClass]>;
+  /**
+   * Event will be fired when swiper updates the hash
+   */
+  hashSet: CustomEvent<[swiper: SwiperClass]>;/**
+   * Event will be fired on mousewheel scroll
+   */
+  scroll: CustomEvent<[swiper: SwiperClass, event: WheelEvent]>;/**
+   * Event will be fired in the beginning of lazy loading of image
+   */
+  lazyImageLoad: CustomEvent<[swiper: SwiperClass, slideEl: HTMLElement, imageEl: HTMLElement]>;
+  /**
+   * Event will be fired when lazy loading image will be loaded
+   */
+  lazyImageReady: CustomEvent<[swiper: SwiperClass, slideEl: HTMLElement, imageEl: HTMLElement]>;/**
+   * Event will be fired on key press
+   */
+  keyPress: CustomEvent<[swiper: SwiperClass, keyCode: string]>;/**
+   * Event will be fired on navigation hide
+   */
+  navigationHide: CustomEvent<[swiper: SwiperClass]>;
+  /**
+   * Event will be fired on navigation show
+   */
+  navigationShow: CustomEvent<[swiper: SwiperClass]>;/**
+   * Event will be fired on draggable scrollbar drag start
+   */
+  scrollbarDragStart: CustomEvent<[swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent]>;
+
+  /**
+   * Event will be fired on draggable scrollbar drag move
+   */
+  scrollbarDragMove: CustomEvent<[swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent]>;
+
+  /**
+   * Event will be fired on draggable scrollbar drag end
+   */
+  scrollbarDragEnd: CustomEvent<[swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent]>;/**
+   * Event will be fired after pagination rendered
+   */
+  paginationRender: CustomEvent<[swiper: SwiperClass, paginationEl: HTMLElement]>;
+
+  /**
+   * Event will be fired when pagination updated
+   */
+  paginationUpdate: CustomEvent<[swiper: SwiperClass, paginationEl: HTMLElement]>;
+
+  /**
+   * Event will be fired on pagination hide
+   */
+  paginationHide: CustomEvent<[swiper: SwiperClass]>;
+
+  /**
+   * Event will be fired on pagination show
+   */
+  paginationShow: CustomEvent<[swiper: SwiperClass]>;/**
+   * Event will be fired on zoom change
+   */
+  zoomChange: CustomEvent<[swiper: SwiperClass, scale: number, imageEl: HTMLElement, slideEl: HTMLElement]>;
+    
+  /**
+   * 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
+   *     },
+   *   }
+   * });
+   * ```
+   */
+  init: CustomEvent<[swiper: SwiperClass]>;
+
+  /**
+   * Event will be fired right before Swiper destroyed
+   */
+  beforeDestroy: CustomEvent<[swiper: SwiperClass]>;
+
+  /**
+   * Event will be fired when currently active slide is changed
+   */
+  slideChange: CustomEvent<[swiper: SwiperClass]>;
+
+  /**
+   * Event will be fired in the beginning of animation to other slide (next or previous).
+   */
+  slideChangeTransitionStart: CustomEvent<[swiper: SwiperClass]>;
+
+  /**
+   * Event will be fired after animation to other slide (next or previous).
+   */
+  slideChangeTransitionEnd: CustomEvent<[swiper: SwiperClass]>;
+
+  /**
+   * Same as "slideChangeTransitionStart" but for "forward" direction only
+   */
+  slideNextTransitionStart: CustomEvent<[swiper: SwiperClass]>;
+
+  /**
+   * Same as "slideChangeTransitionEnd" but for "forward" direction only
+   */
+  slideNextTransitionEnd: CustomEvent<[swiper: SwiperClass]>;
+
+  /**
+   * Same as "slideChangeTransitionStart" but for "backward" direction only
+   */
+  slidePrevTransitionStart: CustomEvent<[swiper: SwiperClass]>;
+
+  /**
+   * Same as "slideChangeTransitionEnd" but for "backward" direction only
+   */
+  slidePrevTransitionEnd: CustomEvent<[swiper: SwiperClass]>;
+
+  /**
+   * Event will be fired in the beginning of transition.
+   */
+  transitionStart: CustomEvent<[swiper: SwiperClass]>;
+
+  /**
+   * Event will be fired after transition.
+   */
+  transitionEnd: CustomEvent<[swiper: SwiperClass]>;
+
+  /**
+   * Event will be fired when user touch Swiper. Receives `touchstart` event as an arguments.
+   */
+  touchStart: CustomEvent<[swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent]>;
+
+  /**
+   * Event will be fired when user touch and move finger over Swiper. Receives `touchmove` event as an arguments.
+   */
+  touchMove: CustomEvent<[swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent]>;
+
+  /**
+   * Event will be fired when user touch and move finger over Swiper in direction opposite to direction parameter. Receives `touchmove` event as an arguments.
+   */
+  touchMoveOpposite: CustomEvent<[swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent]>;
+
+  /**
+   * Event will be fired when user touch and move finger over Swiper and move it. Receives `touchmove` event as an arguments.
+   */
+  sliderMove: CustomEvent<[swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent]>;
+
+  /**
+   * Event will be fired when user release Swiper. Receives `touchend` event as an arguments.
+   */
+  touchEnd: CustomEvent<[swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent]>;
+
+  /**
+   * Event will be fired when user click/tap on Swiper. Receives `touchend` event as an arguments.
+   */
+  click: CustomEvent<[swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent]>;
+
+  /**
+   * Event will be fired when user click/tap on Swiper. Receives `touchend` event as an arguments.
+   */
+  tap: CustomEvent<[swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent]>;
+
+  /**
+   * Event will be fired when user double tap on Swiper's container. Receives `touchend` event as an arguments
+   */
+  doubleTap: CustomEvent<[swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent]>;
+
+  /**
+   * Event will be fired right after all inner images are loaded. updateOnImagesReady should be also enabled
+   */
+  imagesReady: CustomEvent<[swiper: SwiperClass]>;
+
+  /**
+   * Event will be fired when Swiper progress is changed, as an arguments it receives progress that is always from 0 to 1
+   */
+  progress: CustomEvent<[swiper: SwiperClass, progress: number]>;
+
+  /**
+   * Event will be fired when Swiper reach its beginning (initial position)
+   */
+  reachBeginning: CustomEvent<[swiper: SwiperClass]>;
+
+  /**
+   * Event will be fired when Swiper reach last slide
+   */
+  reachEnd: CustomEvent<[swiper: SwiperClass]>;
+
+  /**
+   * Event will be fired when Swiper goes to beginning or end position
+   */
+  toEdge: CustomEvent<[swiper: SwiperClass]>;
+
+  /**
+   * Event will be fired when Swiper goes from beginning or end position
+   */
+  fromEdge: CustomEvent<[swiper: SwiperClass]>;
+
+  /**
+   * Event will be fired when swiper's wrapper change its position. Receives current translate value as an arguments
+   */
+  setTranslate: CustomEvent<[swiper: SwiperClass, translate: number]>;
+
+  /**
+   * Event will be fired everytime when swiper starts animation. Receives current transition duration (in ms) as an arguments
+   */
+  setTransition: CustomEvent<[swiper: SwiperClass, transition: number]>;
+
+  /**
+   * Event will be fired on window resize right before swiper's onresize manipulation
+   */
+  resize: CustomEvent<[swiper: SwiperClass]>;
+
+  /**
+   * Event will be fired if observer is enabled and it detects DOM mutations
+   */
+  observerUpdate: CustomEvent<[swiper: SwiperClass]>;
+
+  /**
+   * Event will be fired right before "loop fix"
+   */
+  beforeLoopFix: CustomEvent<[swiper: SwiperClass]>;
+
+  /**
+   * Event will be fired after "loop fix"
+   */
+  loopFix: CustomEvent<[swiper: SwiperClass]>;
+
+  /**
+   * Event will be fired on breakpoint change
+   */
+  breakpoint: CustomEvent<[swiper: SwiperClass, breakpointParams: SwiperOptions]>;
+
+  /**
+   * !INTERNAL: Event will fired right before breakpoint change
+   */
+  _beforeBreakpoint: CustomEvent<[swiper: SwiperClass, breakpointParams: SwiperOptions]>;
+
+  /**
+   * !INTERNAL: Event will fired after setting CSS classes on swiper container element
+   */
+  _containerClasses: CustomEvent<[swiper: SwiperClass, classNames: string]>;
+
+  /**
+   * !INTERNAL: Event will fired after setting CSS classes on swiper slide element
+   */
+  _slideClass: CustomEvent<[swiper: SwiperClass, slideEl: HTMLElement, classNames: string]>;
+
+  /**
+   * !INTERNAL: Event will fired after setting CSS classes on all swiper slides
+   */
+  _slideClasses: CustomEvent<[
+    swiper: SwiperClass,
+    slides: { slideEl: HTMLElement; classNames: string; index: number }[],
+  ]>;
+
+  /**
+   * !INTERNAL: Event will fired as soon as swiper instance available (before init)
+   */
+  _swiper: CustomEvent<[swiper: SwiperClass]>;
+
+  /**
+   * !INTERNAL: Event will be fired on free mode touch end (release) and there will no be momentum
+   */
+  _freeModeNoMomentumRelease: CustomEvent<[swiper: SwiperClass]>;
+
+  /**
+   * Event will fired on active index change
+   */
+  activeIndexChange: CustomEvent<[swiper: SwiperClass]>;
+  /**
+   * Event will fired on snap index change
+   */
+  snapIndexChange: CustomEvent<[swiper: SwiperClass]>;
+  /**
+   * Event will fired on real index change
+   */
+  realIndexChange: CustomEvent<[swiper: SwiperClass]>;
+  /**
+   * Event will fired right after initialization
+   */
+  afterInit: CustomEvent<[swiper: SwiperClass]>;
+  /**
+   * Event will fired right before initialization
+   */
+  beforeInit: CustomEvent<[swiper: SwiperClass]>;
+  /**
+   * Event will fired before resize handler
+   */
+  beforeResize: CustomEvent<[swiper: SwiperClass]>;
+  /**
+   * Event will fired before slide change transition start
+   */
+  beforeSlideChangeStart: CustomEvent<[swiper: SwiperClass]>;
+  /**
+   * Event will fired before transition start
+   */
+  beforeTransitionStart: CustomEvent<[swiper: SwiperClass, speed: number, internal: any]>; // what is internal?
+  /**
+   * Event will fired on direction change
+   */
+  changeDirection: CustomEvent<[swiper: SwiperClass]>;
+  /**
+   * Event will be fired when user double click/tap on Swiper
+   */
+  doubleClick: CustomEvent<[swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent]>;
+  /**
+   * Event will be fired on swiper destroy
+   */
+  destroy: CustomEvent<[swiper: SwiperClass]>;
+  /**
+   * Event will be fired on momentum bounce
+   */
+  momentumBounce: CustomEvent<[swiper: SwiperClass]>;
+  /**
+   * Event will be fired on orientation change (e.g. landscape -> portrait)
+   */
+  orientationchange: CustomEvent<[swiper: SwiperClass]>;
+  /**
+   * Event will be fired in the beginning of animation of resetting slide to current one
+   */
+  slideResetTransitionStart: CustomEvent<[swiper: SwiperClass]>;
+  /**
+   * Event will be fired in the end of animation of resetting slide to current one
+   */
+  slideResetTransitionEnd: CustomEvent<[swiper: SwiperClass]>;
+  /**
+   * Event will be fired with first touch/drag move
+   */
+  sliderFirstMove: CustomEvent<[swiper: SwiperClass, event: TouchEvent]>;
+  /**
+   * Event will be fired when number of slides has changed
+   */
+  slidesLengthChange: CustomEvent<[swiper: SwiperClass]>;
+  /**
+   * Event will be fired when slides grid has changed
+   */
+  slidesGridLengthChange: CustomEvent<[swiper: SwiperClass]>;
+  /**
+   * Event will be fired when snap grid has changed
+   */
+  snapGridLengthChange: CustomEvent<[swiper: SwiperClass]>;
+  /**
+   * Event will be fired after swiper.update() call
+   */
+  update: CustomEvent<[swiper: SwiperClass]>;
+  /**
+   * Event will be fired when swiper is locked (when `watchOverflow` enabled)
+   */
+  lock: CustomEvent<[swiper: SwiperClass]>;
+  /**
+   * Event will be fired when swiper is unlocked (when `watchOverflow` enabled)
+   */
+  unlock: CustomEvent<[swiper: SwiperClass]>;
+  
+  },
+  {
+    default: {};
+    'container-start': {};
+    'wrapper-start': {};
+    'wrapper-end': {};
+    'container-end': {};
+  }
+> {}
+
+declare class SwiperSlide extends SvelteComponentTyped<
+  SwiperSlideProps,
+  {},
+  {
+    default: {};
+  }
+> {}
+
+export { Swiper, SwiperSlide };

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

@@ -0,0 +1,15 @@
+/**
+ * Swiper Svelte 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.svelte';
+import SwiperSlide from './swiper-slide.svelte';
+export { Swiper, SwiperSlide };

resources/web/include/swiper/svelte/swiper.svelte

@@ -0,0 +1,178 @@
+<script>
+  import {
+    onMount,
+    onDestroy,
+    afterUpdate,
+    createEventDispatcher,
+    tick,
+    beforeUpdate,
+  } from 'svelte';
+  import { getParams } from './get-params.js';
+  import { initSwiper, mountSwiper } from './init-swiper.js';
+  import {
+    needsScrollbar,
+    needsNavigation,
+    needsPagination,
+    uniqueClasses,
+    extend,
+  } from './utils.js';
+  import { getChangedParams } from './get-changed-params.js';
+  import { updateSwiper } from './update-swiper.js';
+
+  const dispatch = createEventDispatcher();
+
+  let className = undefined;
+  export { className as class };
+
+  let containerClasses = 'swiper';
+  let breakpointChanged = false;
+  let swiperInstance = null;
+  let oldPassedParams = null;
+
+  let paramsData;
+  let swiperParams;
+  let passedParams;
+  let restProps;
+
+  let swiperEl = null;
+  let prevEl = null;
+  let nextEl = null;
+  let scrollbarEl = null;
+  let paginationEl = null;
+  let virtualData = { slides: [] };
+
+  export function swiper() {
+    return swiperInstance;
+  }
+
+  const setVirtualData = (data) => {
+    virtualData = data;
+
+    tick().then(() => {
+      swiperInstance.$wrapperEl.children('.swiper-slide').each((el) => {
+        if (el.onSwiper) el.onSwiper(swiperInstance);
+      });
+      swiperInstance.updateSlides();
+      swiperInstance.updateProgress();
+      swiperInstance.updateSlidesClasses();
+      if (swiperInstance.lazy && swiperInstance.params.lazy.enabled) {
+        swiperInstance.lazy.load();
+      }
+    });
+  };
+
+  const calcParams = () => {
+    paramsData = getParams($$restProps);
+    swiperParams = paramsData.params;
+    passedParams = paramsData.passedParams;
+    restProps = paramsData.rest;
+  };
+
+  calcParams();
+  oldPassedParams = passedParams;
+
+  const onBeforeBreakpoint = () => {
+    breakpointChanged = true;
+  };
+
+  swiperParams.onAny = (event, ...args) => {
+    dispatch(event, [args]);
+  };
+  Object.assign(swiperParams.on, {
+    _beforeBreakpoint: onBeforeBreakpoint,
+    _containerClasses(_swiper, classes) {
+      containerClasses = classes;
+    },
+  });
+
+  swiperInstance = initSwiper(swiperParams);
+  if (swiperInstance.virtual && swiperInstance.params.virtual.enabled) {
+    const extendWith = {
+      cache: false,
+      renderExternal: (data) => {
+        setVirtualData(data);
+        if (swiperParams.virtual && swiperParams.virtual.renderExternal) {
+          swiperParams.virtual.renderExternal(data);
+        }
+      },
+      renderExternalUpdate: false,
+    };
+    extend(swiperInstance.params.virtual, extendWith);
+    extend(swiperInstance.originalParams.virtual, extendWith);
+  }
+
+  onMount(() => {
+    if (!swiperEl) return;
+    mountSwiper(
+      {
+        el: swiperEl,
+        nextEl: nextEl,
+        prevEl: prevEl,
+        paginationEl: paginationEl,
+        scrollbarEl: scrollbarEl,
+        swiper: swiperInstance,
+      },
+      swiperParams,
+    );
+    dispatch('swiper', [swiperInstance]);
+    if (swiperParams.virtual) return;
+    swiperInstance.slides.each((el) => {
+      if (el.onSwiper) el.onSwiper(swiperInstance);
+    });
+  });
+
+  afterUpdate(() => {
+    if (!swiperInstance) return;
+    calcParams();
+
+    const changedParams = getChangedParams(passedParams, oldPassedParams);
+    if (
+      (changedParams.length || breakpointChanged) &&
+      swiperInstance &&
+      !swiperInstance.destroyed
+    ) {
+      updateSwiper({
+        swiper: swiperInstance,
+        passedParams,
+        changedParams,
+        nextEl,
+        prevEl,
+        scrollbarEl,
+        paginationEl,
+      });
+    }
+    breakpointChanged = false;
+    oldPassedParams = passedParams;
+  });
+
+  onDestroy(() => {
+    // eslint-disable-next-line
+    if (typeof window !== 'undefined' && swiperInstance && !swiperInstance.destroyed) {
+      swiperInstance.destroy(true, false);
+    }
+  });
+</script>
+
+<div
+  bind:this={swiperEl}
+  class={uniqueClasses(`${containerClasses}${className ? ` ${className}` : ''}`)}
+  {...restProps}
+>
+  <slot name="container-start" />
+  {#if needsNavigation(swiperParams)}
+    <div bind:this={prevEl} class="swiper-button-prev" />
+    <div bind:this={nextEl} class="swiper-button-next" />
+  {/if}
+  {#if needsScrollbar(swiperParams)}
+    <div bind:this={scrollbarEl} class="swiper-scrollbar" />
+  {/if}
+  {#if needsPagination(swiperParams)}
+    <div bind:this={paginationEl} class="swiper-pagination" />
+  {/if}
+  <div class="swiper-wrapper">
+    <slot name="wrapper-start" />
+    <slot {virtualData} />
+    <slot name="wrapper-end" />
+  </div>
+  <slot name="container-end" />
+</div>

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

@@ -0,0 +1,132 @@
+import { isObject, extend } from './utils.js';
+
+function updateSwiper({
+  swiper,
+  passedParams,
+  changedParams,
+  nextEl,
+  prevEl,
+  scrollbarEl,
+  paginationEl
+}) {
+  const updateParams = changedParams.filter(key => key !== 'children' && key !== 'direction');
+  const {
+    params: currentParams,
+    pagination,
+    navigation,
+    scrollbar,
+    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;
+  }
+
+  if (changedParams.includes('virtual')) {
+    if (passedParams.virtual && passedParams.virtual.slides && swiper.virtual) {
+      swiper.virtual.slides = passedParams.virtual.slides;
+      swiper.virtual.update();
+    }
+  }
+
+  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 (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/svelte/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 };