@nanoporetech-digital/components 5.11.9 → 5.12.1

package/dist/components/nano-slides.js

@@ -1,7 +1,7 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, Build, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, readTask, writeTask, Build, h, Host } from '@stencil/core/internal/client';
 
 function EvEmitter() { }
 const proto$7 = EvEmitter.prototype;
@@ -2662,17 +2662,6 @@ const Slides = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
     flickity.resize();
     flickity.reposition();
   }
-  /**
-   * Force flickity to update its height (when adaptiveHeight is enabled) for the duration
-   * equal to 'speed' parameter.
-   *
-   * @param speed The transition duration (in ms).
-   */
-  async updateAutoHeight(speed) {
-    const vp = document.querySelector('.flickity-viewport');
-    if (vp)
-      vp.style.transition = speed + 'ms';
-  }
   /**
    * Transition to the specified slide.
    *
@@ -2834,10 +2823,20 @@ const Slides = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
       this.ready = true;
       if (!window['ResizeObserver'])
         return;
-      // just boots and braces to make sure it's the correct size oninit
+      if (this.resizeO) {
+        this.resizeO.disconnect();
+        this.resizeO = undefined;
+      }
       const ro = (this.resizeO = new ResizeObserver(() => {
-        flick.resize();
-        // this.resizeO.disconnect();
+        readTask(() => {
+          const vp = this.host.shadowRoot.querySelector('.flickity-viewport');
+          writeTask(() => {
+            // reset the height, otherwise it *only* gets bigger
+            if (vp)
+              vp.style.height = '';
+            flick.resize();
+          });
+        });
       }));
       ro.observe(this.host);
     }, 100);
@@ -2885,10 +2884,10 @@ const Slides = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
     };
     const customEvents = !!this.options && !!this.options.on ? this.options.on : {};
     // merge "on" event listeners, while giving our event listeners priority
-    const mergedEventOptions = { on: Object.assign(Object.assign({}, customEvents), eventOptions) };
+    const mergedEventOptions = { on: { ...customEvents, ...eventOptions } };
     // Merge the base, user options, and events together then pass to flickity
     // @ts-ignore
-    return Object.assign(Object.assign(Object.assign({}, flickityOptions), mergedEventOptions), this.options);
+    return { ...flickityOptions, ...mergedEventOptions, ...this.options };
   }
   componentDidLoad() {
     if (Build.isBrowser &&
@@ -2919,8 +2918,10 @@ const Slides = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
       this.mutationO.disconnect();
       this.mutationO = undefined;
     }
-    if (this.resizeO)
+    if (this.resizeO) {
       this.resizeO.disconnect();
+      this.resizeO = undefined;
+    }
     this.destroyflickity();
   }
   render() {
@@ -2961,7 +2962,6 @@ const Slides = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
     "slidesReady": [32],
     "didInit": [32],
     "update": [64],
-    "updateAutoHeight": [64],
     "slideTo": [64],
     "slideNext": [64],
     "slidePrev": [64],