@nanoporetech-digital/components 5.4.2 → 5.5.1

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-09-09T00:05:28",
+  "timestamp": "2023-09-29T10:16:55",
   "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": {}

package/hydrate/index.js

@@ -17290,10 +17290,7 @@ class GlobalNav {
       (this.loggedInNavItms.length || this.hasLoggedinSlot) && (hAsync("nav", { class: "nav-links", "aria-label": "Your user account links" }, hAsync("nano-nav-item", { class: "nano-global-nav user-nav nano-global-nav-menu" }, this.myAccountUser.name, hAsync("nano-icon", { slot: "icon-end", name: "solid/chevron-right" }), hAsync("div", { slot: "secondary" }, hAsync("div", { class: "content" }, hAsync("button", { class: "back-btn", onClick: this.subMenuClose }, hAsync("nano-icon", { slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back" }), this.myAccountUser.name), !!((_a = this.myAccountUser) === null || _a === void 0 ? void 0 : _a.small_avatar_url) && (hAsync("nano-global-nav-user-profile", { myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), hAsync("div", { class: "content--sub" }, hAsync("slot", { name: "loggedin", onSlotchange: this.assessSlottedContent }), this.loggedInNavItms.map((link) => {
       return (hAsync("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, hAsync("a", { href: link.address, target: link.target }, link.title)));
     }), hAsync("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, hAsync("a", { href: this.myAccData.urls.forgot_password +
-        this.ssoRedirect }, "Change Password")))))))), hAsync("slot", { name: "promotion", onSlotchange: this.assessSlottedContent }), this.myAccData && this.myAccData.urls.logout && (hAsync("div", { class: "login-btn logout-btn" }, hAsync("a", { href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout")))))), hAsync("div", { class: "sticker-trigger" }), hAsync("nano-sticker", { "auto-resize": "false", "break-point-max": "800", quietMode: { h: 600, w: 800 }, part: "sticker" }, hAsync("div", { class: "bars", part: "bars" }, hAsync("nav", { part: "main-bar", class: "main-bar", "aria-label": "Main site navigation", tabindex: "-1", ref: (div) => (this.mainBarDiv = div), role: !!this.mainSlotLen &&
-        this.threshold >= this.THRESHOLDLIMIT - THRESHOLDBREAKS.main
-        ? 'menu'
-        : undefined }, (this.hasPromotionSlot ||
+        this.ssoRedirect }, "Change Password")))))))), hAsync("slot", { name: "promotion", onSlotchange: this.assessSlottedContent }), this.myAccData && this.myAccData.urls.logout && (hAsync("div", { class: "login-btn logout-btn" }, hAsync("a", { href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout")))))), hAsync("div", { class: "sticker-trigger" }), hAsync("nano-sticker", { "auto-resize": "false", "break-point-max": "800", quietMode: { h: 600, w: 800 }, part: "sticker" }, hAsync("div", { class: "bars", part: "bars" }, hAsync("nav", { part: "main-bar", class: "main-bar", "aria-label": "Main site navigation", tabindex: "-1", ref: (div) => (this.mainBarDiv = div) }, (this.hasPromotionSlot ||
       !!this.overflowSlotLen ||
       ((this.myAccData || !!this.iconSlotLen) &&
         this.threshold <
@@ -20212,7 +20209,7 @@ class NavItem {
         'nano-global-nav': this.isInGlobalNav,
         'nano-menu-drawer': this.isInMenuDrawer,
         'nano-menu': this.isInMenu,
-      }, onBlur: this.handleHostBlur, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onClick: this.handleHostClick, role: "menuitem" }, hAsync("div", { class: {
+      }, onBlur: this.handleHostBlur, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onClick: this.handleHostClick, role: this.el.closest('[role="menu"]') ? 'menuitem' : undefined }, hAsync("div", { class: {
         'nav-item': true,
         'secondary-open': this.open,
         selected: this.selected,
@@ -23067,9 +23064,11 @@ proto$9.setTranslateX = function (x, is3d) {
   var translateX = this.getPositionValue(x);
   // use 3D tranforms for hardware acceleration on iOS
   // but use 2D when settled, for better font-rendering
-  this.slider.style.transform = is3d
-    ? 'translate3d(' + translateX + ',0,0)'
-    : 'translateX(' + translateX + ')';
+  // this.slider.style.transform = is3d
+  //   ? 'translate3d(' + translateX + ',0,0)'
+  //   : 'translateX(' + translateX + ')';
+
+  this.slider.style.transform = 'translate3d(' + translateX + ',0,0)';
 };
 
 proto$9.dispatchScrollEvent = function () {
@@ -23274,6 +23273,7 @@ proto$8._create = function () {
   // create viewport & slider
   this.viewport = document.createElement('div');
   this.viewport.className = 'flickity-viewport';
+  this.viewport.part.add('slide-viewport');
   this._createSlider();
 
   if (this.options.resize || this.options.watchCSS) {
@@ -25014,19 +25014,35 @@ PrevNextButton.prototype._create = function () {
   var leftDirection = this.parent.options.rightToLeft ? 1 : -1;
   this.isLeft = this.direction == leftDirection;
 
-  var element = (this.element = document.createElement('button'));
-  element.className = 'flickity-button flickity-prev-next-button';
-  element.className += this.isPrevious ? ' previous' : ' next';
+  var button = (this.element = document.createElement('button'));
+  button.className = 'flickity-button flickity-prev-next-button';
+  button.part.add('navigation-button');
+  if (this.isPrevious) {
+    button.classList.add('previous');
+    button.part.add('navigation-button--previous');
+  } else {
+    button.classList.add('next');
+    button.part.add('navigation-button--next');
+  }
   // prevent button from submitting form http://stackoverflow.com/a/10836076/182183
-  element.setAttribute('type', 'button');
+  button.setAttribute('type', 'button');
   // init as disabled
   this.disable();
 
-  element.setAttribute('aria-label', this.isPrevious ? 'Previous' : 'Next');
+  button.setAttribute('aria-label', this.isPrevious ? 'Previous' : 'Next');
+
+  const slot = document.createElement('slot');
+  slot.name = this.isPrevious ? 'previous-icon' : 'next-icon';
+  button.appendChild(slot);
+  slot.addEventListener('slotchange', () => {
+    slot.assignedElements({ flatten: true }).forEach((ele) => {
+      ele.removeAttribute('hidden');
+    });
+  });
 
   // create arrow
   var svg = this.createSVG();
-  element.appendChild(svg);
+  slot.appendChild(svg);
   // events
   this.parent.on('select', this.update.bind(this));
   this.on('pointerDown', this.parent.childUIPointerDown.bind(this.parent));
@@ -25051,6 +25067,7 @@ PrevNextButton.prototype.createSVG = function () {
   var svg = document.createElementNS(svgURI$1, 'svg');
   svg.setAttribute('class', 'flickity-button-icon');
   svg.setAttribute('viewBox', '0 0 100 100');
+  svg.part.add('navigation-icon');
   var path = document.createElementNS(svgURI$1, 'path');
   var pathMovements = getArrowMovements(this.parent.options.arrowShape);
   path.setAttribute('d', pathMovements);
@@ -25201,6 +25218,8 @@ PageDots.prototype._create = function () {
   // create holder element
   this.holder = document.createElement('ol');
   this.holder.className = 'flickity-page-dots';
+  this.holder.part.add('pagination');
+
   // create dots, array of elements
   this.dots = [];
   // events
@@ -25242,6 +25261,7 @@ PageDots.prototype.addDots = function (count) {
   for (var i = length; i < max; i++) {
     var dot = document.createElement('li');
     dot.classList.add('dot');
+    dot.part.add('pagination-item');
     dot.setAttribute('aria-label', 'Page dot ' + (i + 1));
     fragment.appendChild(dot);
     newDots.push(dot);
@@ -25264,6 +25284,7 @@ PageDots.prototype.updateSelected = function () {
   // remove selected class on previous
   if (this.selectedDot) {
     this.selectedDot.classList.remove('is-selected');
+    this.selectedDot.part.remove('pagination-item--active');
     this.selectedDot.removeAttribute('aria-current');
   }
   // don't proceed if no dots
@@ -25272,6 +25293,7 @@ PageDots.prototype.updateSelected = function () {
   }
   this.selectedDot = this.dots[this.parent.selectedIndex];
   this.selectedDot.classList.add('is-selected');
+  this.selectedDot.part.add('pagination-item--active');
   this.selectedDot.setAttribute('aria-current', 'step');
 };
 
@@ -26101,14 +26123,30 @@ const flickity = Flickity;
 
 const slidesCss = "/*!@:host*/.sc-nano-slides-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-slides,*.sc-nano-slides::before,*.sc-nano-slides::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-slides{display:none !important}/*!@:host*/.sc-nano-slides-h{--dot-color:#ccc;--dot-color-active:var(--nano-color-primary, #007495);--navbtns-icon-color:var(--dot-color-active);--navbtns-bg-color:white;--navbtns-icon-color-disabled:var(--dot-color-active);--navbtns-bg-color-disabled:white;--fsbtn-icon-color:var(--dot-color-active);--fsbtn-bg-color:white;display:block;-webkit-user-select:none;user-select:none;overflow:hidden;transition:opacity 0.2s;opacity:0;max-width:100vw}/*!@:host([ready])*/[ready].sc-nano-slides-h{opacity:1}/*!@.slideshow*/.slideshow.sc-nano-slides{max-height:100%;min-height:inherit;height:inherit;position:relative}/*!@.slideshow.not-ready*/.slideshow.not-ready.sc-nano-slides{max-width:98vw}/*!@.flickity-container*/.flickity-container.sc-nano-slides{opacity:0;transition:opacity 0.2s;display:flex;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}/*!@.not-ready .flickity-container*/.not-ready.sc-nano-slides .flickity-container.sc-nano-slides{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}/*!@.flickity-container.slides-ready*/.flickity-container.slides-ready.sc-nano-slides{min-height:inherit;max-height:inherit;height:inherit;width:auto}/*!@[hidden]*/[hidden].sc-nano-slides{display:none !important}/*!@.ui-extras*/.ui-extras.sc-nano-slides{pointer-events:none;position:absolute;block-size:100%;inline-size:100%;inset-block-start:0;inset-inline-start:0}/*!@.ui-extras **/.ui-extras.sc-nano-slides *.sc-nano-slides{pointer-events:all}/*!@.flickity-enabled*/.flickity-enabled.sc-nano-slides{position:relative;opacity:1}/*!@.flickity-enabled:focus*/.flickity-enabled.sc-nano-slides:focus{outline:none}/*!@.flickity-viewport*/.flickity-viewport.sc-nano-slides{overflow:hidden;position:relative;min-block-size:100%;flex:1}/*!@.flickity-slider*/.flickity-slider.sc-nano-slides{position:absolute;inline-size:100%;block-size:100%}/*!@.flickity-enabled.is-draggable*/.flickity-enabled.is-draggable.sc-nano-slides{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}/*!@.flickity-enabled.is-draggable .flickity-viewport*/.flickity-enabled.is-draggable.sc-nano-slides .flickity-viewport.sc-nano-slides{cursor:move;cursor:grab;cursor:grab}/*!@.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down*/.flickity-enabled.is-draggable.sc-nano-slides .flickity-viewport.is-pointer-down.sc-nano-slides{cursor:grabbing}/*!@.flickity-button*/.flickity-button.sc-nano-slides{position:absolute;background:var(--navbtns-bg-color);border:none;color:#333;opacity:0.75}/*!@.flickity-button:hover*/.flickity-button.sc-nano-slides:hover{opacity:1;cursor:pointer}/*!@.flickity-button:focus*/.flickity-button.sc-nano-slides:focus{outline:none;box-shadow:0 0 0 5px #19f}/*!@.flickity-button:active*/.flickity-button.sc-nano-slides:active{opacity:0.6}/*!@.flickity-button:disabled*/.flickity-button.sc-nano-slides:disabled{opacity:0.3;cursor:auto;pointer-events:none;background:var(--navbtns-bg-color-disabled)}/*!@.flickity-button-icon*/.flickity-button-icon.sc-nano-slides{fill:var(--navbtns-icon-color)}/*!@.flickity-button:disabled .flickity-button-icon*/.flickity-button.sc-nano-slides:disabled .flickity-button-icon.sc-nano-slides{fill:var(--navbtns-icon-color-disabled)}/*!@.flickity-prev-next-button*/.flickity-prev-next-button.sc-nano-slides{inset-block-start:50%;inline-size:44px;block-size:44px;border-radius:50%;transform:translateY(-50%)}/*!@.flickity-prev-next-button.previous*/.flickity-prev-next-button.previous.sc-nano-slides{inset-inline-start:10px}/*!@.flickity-prev-next-button.next*/.flickity-prev-next-button.next.sc-nano-slides{inset-inline-end:10px}/*!@.flickity-rtl .flickity-prev-next-button.previous*/.flickity-rtl.sc-nano-slides .flickity-prev-next-button.previous.sc-nano-slides{inset-inline:auto 10px}/*!@.flickity-rtl .flickity-prev-next-button.next*/.flickity-rtl.sc-nano-slides .flickity-prev-next-button.next.sc-nano-slides{inset-inline:10px auto}/*!@.flickity-prev-next-button .flickity-button-icon*/.flickity-prev-next-button.sc-nano-slides .flickity-button-icon.sc-nano-slides{position:absolute;inset-inline-start:20%;inset-block-start:20%;inline-size:60%;block-size:60%}/*!@.flickity-page-dots*/.flickity-page-dots.sc-nano-slides{position:absolute;inline-size:100%;inset-block-end:10px;padding:0;margin:0;list-style:none;text-align:center;line-height:1;z-index:4}/*!@.flickity-rtl .flickity-page-dots*/.flickity-rtl.sc-nano-slides .flickity-page-dots.sc-nano-slides{direction:rtl}/*!@.flickity-page-dots .dot*/.flickity-page-dots.sc-nano-slides .dot.sc-nano-slides{display:inline-block;inline-size:10px;block-size:10px;margin-block:0;margin-inline:8px;border-radius:50%;cursor:pointer;background:var(--dot-color)}/*!@.flickity-page-dots .dot.is-selected*/.flickity-page-dots.sc-nano-slides .dot.is-selected.sc-nano-slides{opacity:1;background:var(--dot-color-active)}/*!@.flickity-enabled.is-fullscreen*/.flickity-enabled.is-fullscreen.sc-nano-slides{position:fixed;inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;background:rgba(0, 0, 0, 0.9);-webkit-padding-after:35px;padding-block-end:35px;z-index:100}/*!@.flickity-enabled.is-fullscreen .flickity-page-dots*/.flickity-enabled.is-fullscreen.sc-nano-slides .flickity-page-dots.sc-nano-slides{inset-block-end:45px}/*!@html.is-flickity-fullscreen*/html.is-flickity-fullscreen.sc-nano-slides{overflow:hidden}/*!@.flickity-fullscreen-button*/.flickity-fullscreen-button.sc-nano-slides{display:block;inset-inline-end:10px;inset-block-start:10px;inline-size:24px;block-size:24px;border-radius:4px;background:var(--fsbtn-bg-color);fill:var(--fsbtn-icon-color)}/*!@.flickity-rtl .flickity-fullscreen-button*/.flickity-rtl.sc-nano-slides .flickity-fullscreen-button.sc-nano-slides{inset-inline:10px auto}/*!@.flickity-fullscreen-button-exit*/.flickity-fullscreen-button-exit.sc-nano-slides{display:none}/*!@.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit*/.flickity-enabled.is-fullscreen.sc-nano-slides .flickity-fullscreen-button-exit.sc-nano-slides{display:block}/*!@.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view*/.flickity-enabled.is-fullscreen.sc-nano-slides .flickity-fullscreen-button-view.sc-nano-slides{display:none}/*!@.flickity-fullscreen-button .flickity-button-icon*/.flickity-fullscreen-button.sc-nano-slides .flickity-button-icon.sc-nano-slides{position:absolute;inline-size:16px;block-size:16px;inset-inline-start:4px;inset-block-start:4px}/*!@.flickity-enabled.is-fade .flickity-slider > **/.flickity-enabled.is-fade.sc-nano-slides .flickity-slider.sc-nano-slides>*.sc-nano-slides{pointer-events:none;z-index:0}/*!@.flickity-enabled.is-fade .flickity-slider ::slotted(.is-selected)*/.flickity-enabled.is-fade .flickity-slider .sc-nano-slides-s>.is-selected{pointer-events:auto;z-index:1}";
 
+const modulo = (num, div) => {
+  return ((num % div) + div) % div;
+};
 /**
  * The Slides component is a multi-section container. Each section can be swiped or dragged between.
  * It contains any number of Slide components.
  *
  * 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.
  */
 class Slides {
   constructor(hostRef) {
@@ -26128,12 +26166,25 @@ class Slides {
     this.flickity = new Promise((resolve) => {
       this.readyflickity = resolve;
     });
-    this.parralax = async () => {
+    this.parallax = async () => {
       const flkty = await this.flickity;
-      flkty.slides.forEach((slide, i) => {
+      flkty.cells.forEach((el, i) => {
+        const cell = el;
+        let flkX = flkty.x;
+        const shiftedPos = cell.x + flkty.slideableWidth * cell.shift;
         const ele = this.childrenEles[i];
-        const x = ((slide.target + flkty.x) * -1) / 3;
-        ele.style['transform'] = 'translateX(' + x + 'px)';
+        if (flkty.options.wrapAround && flkty.cells.length > 1) {
+          flkX = modulo(flkX, flkty.slideableWidth);
+          flkX = flkX - flkty.slideableWidth;
+        }
+        let x = ((cell.target + flkX) * -1) / 3;
+        if (cell.shift < 0) {
+          x = x + Math.abs(shiftedPos) * 1.3333;
+        }
+        else if (cell.shift > 0) {
+          x = ((cell.target + (flkX + shiftedPos)) * -1) / 3;
+        }
+        ele.style.transform = 'translate3d(' + x + 'px, 0, 0)';
       });
     };
     this.handleFullscreen = (isFullScreen) => {
@@ -26194,7 +26245,7 @@ class Slides {
       slide.style['left'] = undefined;
     });
     if (oldAnim === 'parallax') {
-      flkty.off('scroll', this.parralax);
+      flkty.off('scroll', this.parallax);
       slides.forEach((_, i) => {
         if (this.childrenEles && this.childrenEles[i])
           this.childrenEles[i].style['transform'] = undefined;
@@ -26208,7 +26259,7 @@ class Slides {
         break;
       case 'parallax':
         this.options = { fade: false, percentPosition: false };
-        flkty.on('scroll', this.parralax);
+        flkty.on('scroll', this.parallax);
         break;
       default:
         this.options = { fade: false, percentPosition: true };
@@ -26286,30 +26337,22 @@ class Slides {
     const flickity = await this.getflickity();
     flickity.previous(instant, wrap);
   }
-  /**
-   * Get the index of the active slide.
-   */
+  /** Get the index of the active slide. */
   async getActiveIndex() {
     const flickity = await this.getflickity();
     return flickity.selectedIndex;
   }
-  /**
-   * Get the total number of slides.
-   */
+  /** Get the total number of slides. */
   async length() {
     const flickity = await this.getflickity();
     return flickity.slides.length;
   }
-  /**
-   * Get whether or not the current slide is the last slide.
-   */
+  /** Get whether or not the current slide is the last slide. */
   async isEnd() {
     const flickity = await this.getflickity();
     return flickity.selectedIndex === flickity.slides.length - 1;
   }
-  /**
-   * Get whether or not the current slide is the first slide.
-   */
+  /** Get whether or not the current slide is the first slide. */
   async isBeginning() {
     const flickity = await this.getflickity();
     return flickity.selectedIndex === 0;
@@ -26324,9 +26367,7 @@ class Slides {
       this.options = { autoPlay: time };
     setTimeout(() => flickity.playPlayer());
   }
-  /**
-   * Stop auto play.
-   */
+  /** Stop auto play. */
   async stopAutoplay() {
     const flickity = await this.getflickity();
     flickity.stopPlayer();
@@ -26406,7 +26447,7 @@ class Slides {
       this.ready = true;
       if (!window['ResizeObserver'])
         return;
-      // just boots and brances to make sure it's the correct size oninit
+      // just boots and braces to make sure it's the correct size oninit
       const ro = (this.resizeO = new ResizeObserver(() => {
         flick.resize();
         // this.resizeO.disconnect();
@@ -26485,11 +26526,11 @@ class Slides {
         slideshow: true,
         ready: this.ready,
         'not-ready': !this.ready,
-      } }, hAsync("div", { ref: (div) => (this.flickityEl = div), class: {
+      }, part: "base" }, hAsync("div", { ref: (div) => (this.flickityEl = div), class: {
         'flickity-container': true,
         'slides-ready': this.slidesReady,
         'slides-not-ready': !this.slidesReady,
-      } }, hAsync("slot", null)), hAsync("div", { class: "ui-extras" }, hAsync("slot", { name: "ui" })))));
+      }, part: "slide-container" }, hAsync("slot", null)), hAsync("div", { class: "ui-extras" }, hAsync("slot", { name: "ui" })))));
   }
   get host() { return getElement(this); }
   static get watchers() { return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "5.4.2",
+  "version": "5.5.1",
   "repository": {
     "type": "git",
     "url": "https://git.oxfordnanolabs.local/Digital/nano-components"
@@ -131,7 +131,7 @@
     "nanopore",
     "digital"
   ],
-  "gitHead": "351cba2d67b5997430819509ffb41490ca07e106",
+  "gitHead": "0b7b272095323bc7e95104a214b1f53bc028c8c5",
   "volta": {
     "node": "14.18.1",
     "npm": "8.6.0"

package/dist/cjs/table.worker-1b295406.js.map

@@ -1 +0,0 @@
-{"file":"table.worker-1b295406.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/esm/table.worker-8356a40e.js.map

@@ -1 +0,0 @@
-{"file":"table.worker-8356a40e.js","mappings":";;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}