@nanoporetech-digital/components 5.4.1 → 5.5.0

package/dist/types/components/slides/slides.d.ts

@@ -6,8 +6,21 @@ import type { FlickityOptions, Flickity, DragEvent, SlideAnimation } from '../..
  *
  * Uses [Flickity](https://flickity.metafizzy.co/) under the hood.
  *
- * @slot - default slot of nano-slide components
+ * @part base - Wrapper around slides and additional ui elements.
+ * @part slide-container - Wraps all slide elements.
+ * @part slide-viewport - The visible, scrollable area around slide elements.
+ * @part navigation-button - Next / previous navigation buttons.
+ * @part navigation-button--next - the next navigation button.
+ * @part navigation-button--previous - The previous navigation button.
+ * @part navigation-icon - The chevron / arrow icon within a navigation button.
+ * @part pagination - Wraps pagination indicators.
+ * @part pagination-item - A pagination indicator.
+ * @part pagination-item--active - The current, active pagination indicator.
+ *
+ * @slot - default slot of nano-slide components.
  * @slot ui - An absolutely positioned element that will be placed over the slider. Any custom ui can be housed here.
+ * @slot next-icon - Optional next icon to use instead of the default.
+ * @slot previous-icon - Optional previous icon to use instead of the default.
  */
 export declare class Slides implements ComponentInterface {
   private flickityEl;
@@ -28,89 +41,51 @@ export declare class Slides implements ComponentInterface {
    */
   options: FlickityOptions;
   optionsChanged(): Promise<void>;
-  /**
-   * If `true`, show the next / prev buttons.
-   */
+  /** If `true`, show the next / prev buttons. */
   navbtns: boolean;
   navbtnsChanged(): Promise<void>;
-  /**
-   * If `true`, show the pagination.
-   */
+  /** If `true`, show the pagination. */
   pager: boolean;
   pagerChanged(): Promise<void>;
-  /**
-   * If `true`, show a fullscreen button.
-   */
+  /** If `true`, show a fullscreen button. */
   fullscreenbtn: boolean;
   fullscreenBtnChanged(): Promise<void>;
-  /**
-   * If `true`, make the slider fullscreen.
-   */
+  /** If `true`, make the slider fullscreen. */
   fullscreen: boolean;
   fullscreenChanged(_?: any, oldFs?: boolean): Promise<void>;
-  /**
-   * Animation presets.
-   */
+  /** Animation presets. */
   animation: SlideAnimation;
   animationChange(_?: any, oldAnim?: SlideAnimation): Promise<void>;
-  /**
-   * Zero-based index of the selected cell.
-   */
+  /** Zero-based index of the selected cell. */
   currentSlide: number;
   currentSlideChange(): void;
   internalSlideChange(): void;
-  /**
-   * time duration, in ms, to automatically advance slides
-   */
+  /** time duration, in ms, to automatically advance slides */
   autoplay: string | false | number;
   autoPlayChange(): Promise<void>;
-  /**
-   * @internal
-   */
+  /** @internal */
   ready: boolean;
-  /**
-   * Emitted after component initialization
-   */
+  /** Emitted after component initialisation. */
   nanoSlidesDidLoad: EventEmitter<void>;
-  /**
-   * Emitted after flickity initialization
-   */
+  /** Emitted after flickity initialisation. */
   nanoSlidesReady: EventEmitter<void>;
-  /**
-   * Emitted when a slide is selected, even on the same slide
-   */
+  /** Emitted when a slide is selected, even on the same slide. */
   nanoSlidesSelect: EventEmitter<number>;
-  /**
-   * Emitted when the selected slide is changed.
-   */
+  /** Emitted when the selected slide is changed. */
   nanoSlidesChange: EventEmitter<number>;
-  /**
-   * Emitted when the slider moves.
-   */
+  /** Emitted when the slider moves. */
   nanoSlidesScroll: EventEmitter<number>;
-  /**
-   * Emitted when the slide transition has finished.
-   */
+  /** Emitted when the slide transition has finished. */
   nanoSlidesTransitionEnd: EventEmitter<number>;
-  /**
-   * Emitted when the slider starts actively being moved.
-   */
+  /** Emitted when the slider starts actively being moved. */
   nanoSlidesDragStart: EventEmitter<DragEvent>;
-  /**
-   * Emitted when the slider is being dragged.
-   */
+  /** Emitted when the slider is being dragged. */
   nanoSlidesDragMove: EventEmitter<DragEvent>;
-  /**
-   * Emitted when the slider has finished being dragged.
-   */
+  /** Emitted when the slider has finished being dragged. */
   nanoSlidesDragEnd: EventEmitter<DragEvent>;
-  /**
-   * Emitted when the user taps/clicks on the slide's container.
-   */
+  /** Emitted when the user taps/clicks on the slide's container. */
   nanoSlidesTap: EventEmitter<DragEvent>;
-  /**
-   * Emitted when the user taps/clicks on the slide's container.
-   */
+  /** Emitted when the user taps/clicks on the slide's container. */
   nanoSlidesFullscreenChange: EventEmitter<boolean>;
   /**
    * Update the underlying flickity implementation. Call this if you've added or removed
@@ -145,21 +120,13 @@ export declare class Slides implements ComponentInterface {
    * @param wrap If true, the last slide will be selected if at the first slide.
    */
   slidePrev(instant?: boolean, wrap?: boolean): Promise<void>;
-  /**
-   * Get the index of the active slide.
-   */
+  /** Get the index of the active slide. */
   getActiveIndex(): Promise<number>;
-  /**
-   * Get the total number of slides.
-   */
+  /** Get the total number of slides. */
   length(): Promise<number>;
-  /**
-   * Get whether or not the current slide is the last slide.
-   */
+  /** Get whether or not the current slide is the last slide. */
   isEnd(): Promise<boolean>;
-  /**
-   * Get whether or not the current slide is the first slide.
-   */
+  /** Get whether or not the current slide is the first slide. */
   isBeginning(): Promise<boolean>;
   /**
    * Start auto play.
@@ -188,7 +155,7 @@ export declare class Slides implements ComponentInterface {
    */
   reload(): Promise<void>;
   private _getRoot;
-  private parralax;
+  private parallax;
   private handleFullscreen;
   private handleSlideSelect;
   private destroyflickity;

package/dist/types/components.d.ts

@@ -5440,7 +5440,7 @@ declare namespace LocalJSX {
          */
         "onNanoSlidesChange"?: (event: NanoSlidesCustomEvent<number>) => void;
         /**
-          * Emitted after component initialization
+          * Emitted after component initialisation.
          */
         "onNanoSlidesDidLoad"?: (event: NanoSlidesCustomEvent<void>) => void;
         /**
@@ -5460,7 +5460,7 @@ declare namespace LocalJSX {
          */
         "onNanoSlidesFullscreenChange"?: (event: NanoSlidesCustomEvent<boolean>) => void;
         /**
-          * Emitted after flickity initialization
+          * Emitted after flickity initialisation.
          */
         "onNanoSlidesReady"?: (event: NanoSlidesCustomEvent<void>) => void;
         /**
@@ -5468,7 +5468,7 @@ declare namespace LocalJSX {
          */
         "onNanoSlidesScroll"?: (event: NanoSlidesCustomEvent<number>) => void;
         /**
-          * Emitted when a slide is selected, even on the same slide
+          * Emitted when a slide is selected, even on the same slide.
          */
         "onNanoSlidesSelect"?: (event: NanoSlidesCustomEvent<number>) => void;
         /**

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-09-08T13:43:42",
+  "timestamp": "2023-09-28T15:17:10",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.23.1",
@@ -13631,13 +13631,61 @@
       "readme": "# ion-slides\n\nThe Slides component is a multi-section container. Each section can be swiped\nor dragged between. It contains any number of [Slide](../slide) components.\n\n\nAdopted from Swiper.js:\nThe most modern mobile touch slider and framework with hardware accelerated transitions.\n\nhttp://www.idangero.us/swiper/\n\nCopyright 2016, Vladimir Kharlampidi\nThe iDangero.us\nhttp://www.idangero.us/\n\nLicensed under MIT\n\n## Custom Animations\n\nBy default, Ionic slides use the built-in `slide` animation effect. Custom animations can be provided via the `options` property. Examples of other animations can be found below.\n\n\n### Coverflow\n\n```typescript\nconst slideOpts = {\n  slidesPerView: 3,\n  coverflowEffect: {\n    rotate: 50,\n    stretch: 0,\n    depth: 100,\n    modifier: 1,\n    slideShadows: true,\n  },\n  on: {\n    beforeInit() {\n      const swiper = this;\n\n      swiper.classNames.push(`${swiper.params.containerModifierClass}coverflow`);\n      swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);\n\n      swiper.params.watchSlidesProgress = true;\n      swiper.originalParams.watchSlidesProgress = true;\n    },\n    setTranslate() {\n      const swiper = this;\n      const {\n        width: swiperWidth, height: swiperHeight, slides, $wrapperEl, slidesSizesGrid, $\n      } = swiper;\n      const params = swiper.params.coverflowEffect;\n      const isHorizontal = swiper.isHorizontal();\n      const transform$$1 = swiper.translate;\n      const center = isHorizontal ? -transform$$1 + (swiperWidth / 2) : -transform$$1 + (swiperHeight / 2);\n      const rotate = isHorizontal ? params.rotate : -params.rotate;\n      const translate = params.depth;\n      // Each slide offset from center\n      for (let i = 0, length = slides.length; i < length; i += 1) {\n        const $slideEl = slides.eq(i);\n        const slideSize = slidesSizesGrid[i];\n        const slideOffset = $slideEl[0].swiperSlideOffset;\n        const offsetMultiplier = ((center - slideOffset - (slideSize / 2)) / slideSize) * params.modifier;\n\n         let rotateY = isHorizontal ? rotate * offsetMultiplier : 0;\n        let rotateX = isHorizontal ? 0 : rotate * offsetMultiplier;\n        // var rotateZ = 0\n        let translateZ = -translate * Math.abs(offsetMultiplier);\n\n         let translateY = isHorizontal ? 0 : params.stretch * (offsetMultiplier);\n        let translateX = isHorizontal ? params.stretch * (offsetMultiplier) : 0;\n\n         // Fix for ultra small values\n        if (Math.abs(translateX) < 0.001) translateX = 0;\n        if (Math.abs(translateY) < 0.001) translateY = 0;\n        if (Math.abs(translateZ) < 0.001) translateZ = 0;\n        if (Math.abs(rotateY) < 0.001) rotateY = 0;\n        if (Math.abs(rotateX) < 0.001) rotateX = 0;\n\n         const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px)  rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;\n\n         $slideEl.transform(slideTransform);\n        $slideEl[0].style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;\n        if (params.slideShadows) {\n          // Set shadows\n          let $shadowBeforeEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');\n          let $shadowAfterEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');\n          if ($shadowBeforeEl.length === 0) {\n            $shadowBeforeEl = swiper.$(`<div class=\"swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}\"></div>`);\n            $slideEl.append($shadowBeforeEl);\n          }\n          if ($shadowAfterEl.length === 0) {\n            $shadowAfterEl = swiper.$(`<div class=\"swiper-slide-shadow-${isHorizontal ? 'right' : 'bottom'}\"></div>`);\n            $slideEl.append($shadowAfterEl);\n          }\n          if ($shadowBeforeEl.length) $shadowBeforeEl[0].style.opacity = offsetMultiplier > 0 ? offsetMultiplier : 0;\n          if ($shadowAfterEl.length) $shadowAfterEl[0].style.opacity = (-offsetMultiplier) > 0 ? -offsetMultiplier : 0;\n        }\n      }\n\n       // Set correct perspective for IE10\n      if (swiper.support.pointerEvents || swiper.support.prefixedPointerEvents) {\n        const ws = $wrapperEl[0].style;\n        ws.perspectiveOrigin = `${center}px 50%`;\n      }\n    },\n    setTransition(duration) {\n      const swiper = this;\n      swiper.slides\n        .transition(duration)\n        .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')\n        .transition(duration);\n    }\n  }\n}\n```\n\n### Cube\n\n```typescript\nconst slideOpts = {\n  grabCursor: true,\n  cubeEffect: {\n    shadow: true,\n    slideShadows: true,\n    shadowOffset: 20,\n    shadowScale: 0.94,\n  },\n  on: {\n    beforeInit: function() {\n      const swiper = this;\n      swiper.classNames.push(`${swiper.params.containerModifierClass}cube`);\n      swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);\n\n      const overwriteParams = {\n        slidesPerView: 1,\n        slidesPerColumn: 1,\n        slidesPerGroup: 1,\n        watchSlidesProgress: true,\n        resistanceRatio: 0,\n        spaceBetween: 0,\n        centeredSlides: false,\n        virtualTranslate: true,\n      };\n\n      this.params = Object.assign(this.params, overwriteParams);\n      this.originalParams = Object.assign(this.originalParams, overwriteParams);\n    },\n    setTranslate: function() {\n      const swiper = this;\n      const {\n        $el, $wrapperEl, slides, width: swiperWidth, height: swiperHeight, rtlTranslate: rtl, size: swiperSize,\n      } = swiper;\n      const params = swiper.params.cubeEffect;\n      const isHorizontal = swiper.isHorizontal();\n      const isVirtual = swiper.virtual && swiper.params.virtual.enabled;\n      let wrapperRotate = 0;\n      let $cubeShadowEl;\n      if (params.shadow) {\n        if (isHorizontal) {\n          $cubeShadowEl = $wrapperEl.find('.swiper-cube-shadow');\n          if ($cubeShadowEl.length === 0) {\n            $cubeShadowEl = swiper.$('<div class=\"swiper-cube-shadow\"></div>');\n            $wrapperEl.append($cubeShadowEl);\n          }\n          $cubeShadowEl.css({ height: `${swiperWidth}px` });\n        } else {\n          $cubeShadowEl = $el.find('.swiper-cube-shadow');\n          if ($cubeShadowEl.length === 0) {\n            $cubeShadowEl = swiper.$('<div class=\"swiper-cube-shadow\"></div>');\n            $el.append($cubeShadowEl);\n          }\n        }\n      }\n\n      for (let i = 0; i < slides.length; i += 1) {\n        const $slideEl = slides.eq(i);\n        let slideIndex = i;\n        if (isVirtual) {\n          slideIndex = parseInt($slideEl.attr('data-swiper-slide-index'), 10);\n        }\n        let slideAngle = slideIndex * 90;\n        let round = Math.floor(slideAngle / 360);\n        if (rtl) {\n          slideAngle = -slideAngle;\n          round = Math.floor(-slideAngle / 360);\n        }\n        const progress = Math.max(Math.min($slideEl[0].progress, 1), -1);\n        let tx = 0;\n        let ty = 0;\n        let tz = 0;\n        if (slideIndex % 4 === 0) {\n          tx = -round * 4 * swiperSize;\n          tz = 0;\n        } else if ((slideIndex - 1) % 4 === 0) {\n          tx = 0;\n          tz = -round * 4 * swiperSize;\n        } else if ((slideIndex - 2) % 4 === 0) {\n          tx = swiperSize + (round * 4 * swiperSize);\n          tz = swiperSize;\n        } else if ((slideIndex - 3) % 4 === 0) {\n          tx = -swiperSize;\n          tz = (3 * swiperSize) + (swiperSize * 4 * round);\n        }\n        if (rtl) {\n          tx = -tx;\n        }\n\n         if (!isHorizontal) {\n          ty = tx;\n          tx = 0;\n        }\n\n         const transform$$1 = `rotateX(${isHorizontal ? 0 : -slideAngle}deg) rotateY(${isHorizontal ? slideAngle : 0}deg) translate3d(${tx}px, ${ty}px, ${tz}px)`;\n        if (progress <= 1 && progress > -1) {\n          wrapperRotate = (slideIndex * 90) + (progress * 90);\n          if (rtl) wrapperRotate = (-slideIndex * 90) - (progress * 90);\n        }\n        $slideEl.transform(transform$$1);\n        if (params.slideShadows) {\n          // Set shadows\n          let shadowBefore = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');\n          let shadowAfter = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');\n          if (shadowBefore.length === 0) {\n            shadowBefore = swiper.$(`<div class=\"swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}\"></div>`);\n            $slideEl.append(shadowBefore);\n          }\n          if (shadowAfter.length === 0) {\n            shadowAfter = swiper.$(`<div class=\"swiper-slide-shadow-${isHorizontal ? 'right' : 'bottom'}\"></div>`);\n            $slideEl.append(shadowAfter);\n          }\n          if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);\n          if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);\n        }\n      }\n      $wrapperEl.css({\n        '-webkit-transform-origin': `50% 50% -${swiperSize / 2}px`,\n        '-moz-transform-origin': `50% 50% -${swiperSize / 2}px`,\n        '-ms-transform-origin': `50% 50% -${swiperSize / 2}px`,\n        'transform-origin': `50% 50% -${swiperSize / 2}px`,\n      });\n\n       if (params.shadow) {\n        if (isHorizontal) {\n          $cubeShadowEl.transform(`translate3d(0px, ${(swiperWidth / 2) + params.shadowOffset}px, ${-swiperWidth / 2}px) rotateX(90deg) rotateZ(0deg) scale(${params.shadowScale})`);\n        } else {\n          const shadowAngle = Math.abs(wrapperRotate) - (Math.floor(Math.abs(wrapperRotate) / 90) * 90);\n          const multiplier = 1.5 - (\n            (Math.sin((shadowAngle * 2 * Math.PI) / 360) / 2)\n            + (Math.cos((shadowAngle * 2 * Math.PI) / 360) / 2)\n          );\n          const scale1 = params.shadowScale;\n          const scale2 = params.shadowScale / multiplier;\n          const offset$$1 = params.shadowOffset;\n          $cubeShadowEl.transform(`scale3d(${scale1}, 1, ${scale2}) translate3d(0px, ${(swiperHeight / 2) + offset$$1}px, ${-swiperHeight / 2 / scale2}px) rotateX(-90deg)`);\n        }\n      }\n\n      const zFactor = (swiper.browser.isSafari || swiper.browser.isUiWebView) ? (-swiperSize / 2) : 0;\n      $wrapperEl\n        .transform(`translate3d(0px,0,${zFactor}px) rotateX(${swiper.isHorizontal() ? 0 : wrapperRotate}deg) rotateY(${swiper.isHorizontal() ? -wrapperRotate : 0}deg)`);\n    },\n    setTransition: function(duration) {\n      const swiper = this;\n      const { $el, slides } = swiper;\n      slides\n        .transition(duration)\n        .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')\n        .transition(duration);\n      if (swiper.params.cubeEffect.shadow && !swiper.isHorizontal()) {\n        $el.find('.swiper-cube-shadow').transition(duration);\n      }\n    },\n  }\n}\n```\n\n### Fade\n\n```typescript\nconst slideOpts = {\n  on: {\n    beforeInit() {\n      const swiper = this;\n      swiper.classNames.push(`${swiper.params.containerModifierClass}fade`);\n      const overwriteParams = {\n        slidesPerView: 1,\n        slidesPerColumn: 1,\n        slidesPerGroup: 1,\n        watchSlidesProgress: true,\n        spaceBetween: 0,\n        virtualTranslate: true,\n      };\n      swiper.params = Object.assign(swiper.params, overwriteParams);\n      swiper.params = Object.assign(swiper.originalParams, overwriteParams);\n    },\n    setTranslate() {\n      const swiper = this;\n      const { slides } = swiper;\n      for (let i = 0; i < slides.length; i += 1) {\n        const $slideEl = swiper.slides.eq(i);\n        const offset$$1 = $slideEl[0].swiperSlideOffset;\n        let tx = -offset$$1;\n        if (!swiper.params.virtualTranslate) tx -= swiper.translate;\n        let ty = 0;\n        if (!swiper.isHorizontal()) {\n          ty = tx;\n          tx = 0;\n        }\n        const slideOpacity = swiper.params.fadeEffect.crossFade\n          ? Math.max(1 - Math.abs($slideEl[0].progress), 0)\n          : 1 + Math.min(Math.max($slideEl[0].progress, -1), 0);\n        $slideEl\n          .css({\n            opacity: slideOpacity,\n          })\n          .transform(`translate3d(${tx}px, ${ty}px, 0px)`);\n      }\n    },\n    setTransition(duration) {\n      const swiper = this;\n      const { slides, $wrapperEl } = swiper;\n      slides.transition(duration);\n      if (swiper.params.virtualTranslate && duration !== 0) {\n        let eventTriggered = false;\n        slides.transitionEnd(() => {\n          if (eventTriggered) return;\n          if (!swiper || swiper.destroyed) return;\n          eventTriggered = true;\n          swiper.animating = false;\n          const triggerEvents = ['webkitTransitionEnd', 'transitionend'];\n          for (let i = 0; i < triggerEvents.length; i += 1) {\n            $wrapperEl.trigger(triggerEvents[i]);\n          }\n        });\n      }\n    },\n  }\n}\n```\n\n### Flip\n\n```typescript\nconst slideOpts = {\n  on: {\n    beforeInit() {\n      const swiper = this;\n      swiper.classNames.push(`${swiper.params.containerModifierClass}flip`);\n      swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);\n      const overwriteParams = {\n        slidesPerView: 1,\n        slidesPerColumn: 1,\n        slidesPerGroup: 1,\n        watchSlidesProgress: true,\n        spaceBetween: 0,\n        virtualTranslate: true,\n      };\n      swiper.params = Object.assign(swiper.params, overwriteParams);\n      swiper.originalParams = Object.assign(swiper.originalParams, overwriteParams);\n    },\n    setTranslate() {\n      const swiper = this;\n      const { $, slides, rtlTranslate: rtl } = swiper;\n      for (let i = 0; i < slides.length; i += 1) {\n        const $slideEl = slides.eq(i);\n        let progress = $slideEl[0].progress;\n        if (swiper.params.flipEffect.limitRotation) {\n          progress = Math.max(Math.min($slideEl[0].progress, 1), -1);\n        }\n        const offset$$1 = $slideEl[0].swiperSlideOffset;\n        const rotate = -180 * progress;\n        let rotateY = rotate;\n        let rotateX = 0;\n        let tx = -offset$$1;\n        let ty = 0;\n        if (!swiper.isHorizontal()) {\n          ty = tx;\n          tx = 0;\n          rotateX = -rotateY;\n          rotateY = 0;\n        } else if (rtl) {\n          rotateY = -rotateY;\n        }\n\n         $slideEl[0].style.zIndex = -Math.abs(Math.round(progress)) + slides.length;\n\n         if (swiper.params.flipEffect.slideShadows) {\n          // Set shadows\n          let shadowBefore = swiper.isHorizontal() ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');\n          let shadowAfter = swiper.isHorizontal() ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');\n          if (shadowBefore.length === 0) {\n            shadowBefore = swiper.$(`<div class=\"swiper-slide-shadow-${swiper.isHorizontal() ? 'left' : 'top'}\"></div>`);\n            $slideEl.append(shadowBefore);\n          }\n          if (shadowAfter.length === 0) {\n            shadowAfter = swiper.$(`<div class=\"swiper-slide-shadow-${swiper.isHorizontal() ? 'right' : 'bottom'}\"></div>`);\n            $slideEl.append(shadowAfter);\n          }\n          if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);\n          if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);\n        }\n        $slideEl\n          .transform(`translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`);\n      }\n    },\n    setTransition(duration) {\n      const swiper = this;\n      const { slides, activeIndex, $wrapperEl } = swiper;\n      slides\n        .transition(duration)\n        .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')\n        .transition(duration);\n      if (swiper.params.virtualTranslate && duration !== 0) {\n        let eventTriggered = false;\n        // eslint-disable-next-line\n        slides.eq(activeIndex).transitionEnd(function onTransitionEnd() {\n          if (eventTriggered) return;\n          if (!swiper || swiper.destroyed) return;\n\n          eventTriggered = true;\n          swiper.animating = false;\n          const triggerEvents = ['webkitTransitionEnd', 'transitionend'];\n          for (let i = 0; i < triggerEvents.length; i += 1) {\n            $wrapperEl.trigger(triggerEvents[i]);\n          }\n        });\n      }\n    }\n  }\n};\n```\n",
       "docs": "The Slides component is a multi-section container. Each section can be swiped or dragged between.\nIt contains any number of Slide components.\n\nUses [Flickity](https://flickity.metafizzy.co/) under the hood.",
       "docsTags": [
+        {
+          "name": "part",
+          "text": "base - Wrapper around slides and additional ui elements."
+        },
+        {
+          "name": "part",
+          "text": "slide-container - Wraps all slide elements."
+        },
+        {
+          "name": "part",
+          "text": "slide-viewport - The visible, scrollable area around slide elements."
+        },
+        {
+          "name": "part",
+          "text": "navigation-button - Next / previous navigation buttons."
+        },
+        {
+          "name": "part",
+          "text": "navigation-button--next - the next navigation button."
+        },
+        {
+          "name": "part",
+          "text": "navigation-button--previous - The previous navigation button."
+        },
+        {
+          "name": "part",
+          "text": "navigation-icon - The chevron / arrow icon within a navigation button."
+        },
+        {
+          "name": "part",
+          "text": "pagination - Wraps pagination indicators."
+        },
+        {
+          "name": "part",
+          "text": "pagination-item - A pagination indicator."
+        },
+        {
+          "name": "part",
+          "text": "pagination-item--active - The current, active pagination indicator."
+        },
         {
           "name": "slot",
-          "text": "- default slot of nano-slide components"
+          "text": "- default slot of nano-slide components."
         },
         {
           "name": "slot",
           "text": "ui - An absolutely positioned element that will be placed over the slider. Any custom ui can be housed here."
+        },
+        {
+          "name": "slot",
+          "text": "next-icon - Optional next icon to use instead of the default."
+        },
+        {
+          "name": "slot",
+          "text": "previous-icon - Optional previous icon to use instead of the default."
         }
       ],
       "usage": {},
@@ -14023,7 +14071,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after component initialization",
+          "docs": "Emitted after component initialisation.",
           "docsTags": []
         },
         {
@@ -14068,7 +14116,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after flickity initialization",
+          "docs": "Emitted after flickity initialisation.",
           "docsTags": []
         },
         {
@@ -14086,7 +14134,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when a slide is selected, even on the same slide",
+          "docs": "Emitted when a slide is selected, even on the same slide.",
           "docsTags": []
         },
         {
@@ -14154,14 +14202,63 @@
       "slots": [
         {
           "name": "",
-          "docs": "default slot of nano-slide components"
+          "docs": "default slot of nano-slide components."
+        },
+        {
+          "name": "next-icon",
+          "docs": "Optional next icon to use instead of the default."
+        },
+        {
+          "name": "previous-icon",
+          "docs": "Optional previous icon to use instead of the default."
         },
         {
           "name": "ui",
           "docs": "An absolutely positioned element that will be placed over the slider. Any custom ui can be housed here."
         }
       ],
-      "parts": [],
+      "parts": [
+        {
+          "name": "base",
+          "docs": "Wrapper around slides and additional ui elements."
+        },
+        {
+          "name": "navigation-button",
+          "docs": "Next / previous navigation buttons."
+        },
+        {
+          "name": "navigation-button--next",
+          "docs": "the next navigation button."
+        },
+        {
+          "name": "navigation-button--previous",
+          "docs": "The previous navigation button."
+        },
+        {
+          "name": "navigation-icon",
+          "docs": "The chevron / arrow icon within a navigation button."
+        },
+        {
+          "name": "pagination",
+          "docs": "Wraps pagination indicators."
+        },
+        {
+          "name": "pagination-item",
+          "docs": "A pagination indicator."
+        },
+        {
+          "name": "pagination-item--active",
+          "docs": "The current, active pagination indicator."
+        },
+        {
+          "name": "slide-container",
+          "docs": "Wraps all slide elements."
+        },
+        {
+          "name": "slide-viewport",
+          "docs": "The visible, scrollable area around slide elements."
+        }
+      ],
       "dependents": [],
       "dependencies": [],
       "dependencyGraph": {}