@nanoporetech-digital/components 5.4.2 → 5.5.0

package/dist/components/nano-slides.js

@@ -788,9 +788,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 () {
@@ -995,6 +997,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) {
@@ -2735,19 +2738,30 @@ 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);
 
   // 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));
@@ -2772,6 +2786,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);
@@ -2922,6 +2937,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
@@ -2963,6 +2980,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);
@@ -2985,6 +3003,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
@@ -2993,6 +3012,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');
 };
 
@@ -3822,6 +3842,9 @@ const flickity = Flickity;
 
 const slidesCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--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]){opacity:1}.slideshow{max-height:100%;min-height:inherit;height:inherit;position:relative}.slideshow.not-ready{max-width:98vw}.flickity-container{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{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.flickity-container.slides-ready{min-height:inherit;max-height:inherit;height:inherit;width:auto}[hidden]{display:none !important}.ui-extras{pointer-events:none;position:absolute;block-size:100%;inline-size:100%;inset-block-start:0;inset-inline-start:0}.ui-extras *{pointer-events:all}/*! Flickity v2.2.1\nhttps://flickity.metafizzy.co\n---------------------------------------------- */.flickity-enabled{position:relative;opacity:1}.flickity-enabled:focus{outline:none}.flickity-viewport{overflow:hidden;position:relative;min-block-size:100%;flex:1}.flickity-slider{position:absolute;inline-size:100%;block-size:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:grabbing}.flickity-button{position:absolute;background:var(--navbtns-bg-color);border:none;color:#333;opacity:0.75}.flickity-button:hover{opacity:1;cursor:pointer}.flickity-button:focus{outline:none;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:0.6}.flickity-button:disabled{opacity:0.3;cursor:auto;pointer-events:none;background:var(--navbtns-bg-color-disabled)}.flickity-button-icon{fill:var(--navbtns-icon-color)}.flickity-button:disabled .flickity-button-icon{fill:var(--navbtns-icon-color-disabled)}.flickity-prev-next-button{inset-block-start:50%;inline-size:44px;block-size:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{inset-inline-start:10px}.flickity-prev-next-button.next{inset-inline-end:10px}.flickity-rtl .flickity-prev-next-button.previous{inset-inline:auto 10px}.flickity-rtl .flickity-prev-next-button.next{inset-inline:10px auto}.flickity-prev-next-button .flickity-button-icon{position:absolute;inset-inline-start:20%;inset-block-start:20%;inline-size:60%;block-size:60%}.flickity-page-dots{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{direction:rtl}.flickity-page-dots .dot{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{opacity:1;background:var(--dot-color-active)}.flickity-enabled.is-fullscreen{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{inset-block-end:45px}html.is-flickity-fullscreen{overflow:hidden}.flickity-fullscreen-button{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{inset-inline:10px auto}.flickity-fullscreen-button-exit{display:none}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit{display:block}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view{display:none}.flickity-fullscreen-button .flickity-button-icon{position:absolute;inline-size:16px;block-size:16px;inset-inline-start:4px;inset-block-start:4px}.flickity-enabled.is-fade .flickity-slider>*{pointer-events:none;z-index:0}.flickity-enabled.is-fade .flickity-slider ::slotted(.is-selected){pointer-events:auto;z-index:1}";
 
+const modulo = (num, div) => {
+  return ((num % div) + div) % div;
+};
 const Slides = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
   constructor() {
     super();
@@ -3842,12 +3865,26 @@ const Slides = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
     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;
+        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)';
+        let flkX = flkty.x;
+        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);
+        }
+        else if (cell.shift > 0) {
+          x = ((cell.target + (flkX + shiftedPos)) * -1) / 3;
+        }
+        ele.style.transform = 'translate3d(' + x + 'px, 0, 0)';
+        // 'translateX(' + x + 'px)';
       });
     };
     this.handleFullscreen = (isFullScreen) => {
@@ -3908,7 +3945,7 @@ const Slides = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
       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;
@@ -3922,7 +3959,7 @@ const Slides = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
         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 };
@@ -4000,30 +4037,22 @@ const Slides = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
     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;
@@ -4120,7 +4149,7 @@ const Slides = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
       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();
@@ -4214,11 +4243,11 @@ const Slides = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
         slideshow: true,
         ready: this.ready,
         'not-ready': !this.ready,
-      } }, h("div", { ref: (div) => (this.flickityEl = div), class: {
+      }, part: "base" }, h("div", { ref: (div) => (this.flickityEl = div), class: {
         'flickity-container': true,
         'slides-ready': this.slidesReady,
         'slides-not-ready': !this.slidesReady,
-      } }, h("slot", null)), h("div", { class: "ui-extras" }, h("slot", { name: "ui" })))));
+      }, part: "slide-container" }, h("slot", null)), h("div", { class: "ui-extras" }, h("slot", { name: "ui" })))));
   }
   get host() { return this; }
   static get watchers() { return {