@nanoporetech-digital/components 8.12.2 → 8.12.3

package/hydrate/index.js

@@ -24604,28 +24604,15 @@ class NanoTable {
         this.handleHideCaptionChange();
     }
     componentDidRender() {
-        if (this.scrollable !== false && this.table) {
-            // a hack. Revise in-future.
-            // the table is always rendered in the light DOM - so it should always be visible, but
-            // if we conditionally render the slot within the masked overflow there's quite a noticeable
-            //  CLS as it moves before the nano-masked-overflow is bootstrapped.
-            customElements
-                .whenDefined(transformTag('nano-masked-overflow'))
-                .then(() => {
-                this.host
-                    .querySelector('.nano-table__overflow')
-                    ?.appendChild(this.table);
-            });
-        }
     }
     disconnectedCallback() {
         this.cleanUpObservers();
     }
     render() {
-        return (h(Host, { key: '54758d3dbda3695305222d5717ad0503d355dc42', class: {
+        return (h(Host, { key: 'bd86de55fe8bc0259cf6e7e112c4bb48ad190761', class: {
                 'nano-table': true,
                 'nano-table--props-ready': this.propsReady,
-            } }, this.scrollable && (h("nano-masked-overflow", { key: '28386faf317ffb158e7c743a9891c07d1843bcaf', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: 'b3c3169a26443abbc19761df5bd543edafae52f2', class: "nano-table__overflow" }))), h("slot", { key: 'a2ced54f3b39798c78a06fded180291111dfd1b1' })));
+            } }, this.scrollable && (h("nano-masked-overflow", { key: '7002c33f0368801339f718e191922cb03b28ce08', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '60b7c9a2d7a6bde7ffcde6ce62b0477790601cf5', class: "nano-table__overflow" }))), h("slot", { key: '3d4fb01789dd5c1b0a2b3872534e796e5182d579' })));
     }
     static get watchers() { return {
         "compact": ["handleCompactChange"],
@@ -29636,7 +29623,6 @@ class Slides {
     }
     flickityEl;
     flickityReady = false;
-    mutationO;
     resizeO;
     readyflickity;
     flickity = new Promise((resolve) => {
@@ -29700,7 +29686,7 @@ class Slides {
     async animationChange(_, oldAnim) {
         const [flkty, slides] = await Promise.all([
             this.getflickity(),
-            this.waitForSlides(this.host),
+            this.waitForSlides(),
         ]);
         // clear old stuff
         slides.forEach((slide) => {
@@ -29790,9 +29776,11 @@ class Slides {
      * child slides.
      */
     async update() {
+        if (!this.didInit)
+            return;
         const [flickity] = await Promise.all([
             this.getflickity(),
-            this.waitForSlides(this.host),
+            this.waitForSlides(),
         ]);
         this.childrenEles = this.host.querySelectorAll(`${transformTag('nano-slide')} > *`);
         flickity.reloadCells();
@@ -29980,7 +29968,7 @@ class Slides {
         const finalOptions = this.normalizeOptions();
         await this.loadFlickityModules(finalOptions);
         // init flickity core
-        await this.waitForSlides(this.host);
+        await this.waitForSlides();
         this.flickityEl =
             this.flickityEl || this._getRoot().querySelector('.flickity-container');
         if (!this.flickityEl)
@@ -30070,8 +30058,8 @@ class Slides {
         // @ts-expect-error - merged options don't quite match the flickity options
         return { ...flickityOptions, ...mergedEventOptions, ...this.options };
     }
-    waitForSlides = (host) => {
-        const allSlides = Array.from(host.querySelectorAll(transformTag('nano-slide')));
+    waitForSlides = () => {
+        const allSlides = Array.from(this.host.querySelectorAll(transformTag('nano-slide')));
         this.slideCount = allSlides.length;
         let toLoadSlides = allSlides.filter((ele) => !ele.ready);
         if (!toLoadSlides.length)
@@ -30081,13 +30069,13 @@ class Slides {
                 toLoadSlides = toLoadSlides.filter((ele) => ele !== ev.target);
                 if (!toLoadSlides.length) {
                     resolve(allSlides);
-                    host.removeEventListener('nanoSlideReady', slideResolver);
-                    host.removeEventListener('nano-slide-ready', slideResolver);
+                    this.host.removeEventListener('nanoSlideReady', slideResolver);
+                    this.host.removeEventListener('nano-slide-ready', slideResolver);
                 }
             };
-            host.addEventListener('nanoSlideReady', slideResolver);
+            this.host.addEventListener('nanoSlideReady', slideResolver);
             // fallback for vue who can't handle camelcase event names
-            host.addEventListener('nano-slide-ready', slideResolver);
+            this.host.addEventListener('nano-slide-ready', slideResolver);
         });
     };
     componentDidLoad() {
@@ -30098,10 +30086,6 @@ class Slides {
         }
     }
     disconnectedCallback() {
-        if (this.mutationO) {
-            this.mutationO.disconnect();
-            this.mutationO = undefined;
-        }
         if (this.resizeO) {
             this.resizeO.disconnect();
             this.resizeO = undefined;
@@ -30109,15 +30093,15 @@ class Slides {
         this.destroyflickity();
     }
     render() {
-        return (h(Host, { key: '6dedc1589f5ae629975f38303f658de914c8f506', class: "nano-slides" }, h("div", { key: '528c7b10972b258ef0345525a9fa82c289ecc083', class: {
+        return (h(Host, { key: '87cf8ae3ff3ded83f82ef3bfc5d76381afb967e0', class: "nano-slides" }, h("div", { key: 'af12496fc219421dcf416607a7c5cc9b0e59968e', class: {
                 slideshow: true,
                 ready: this.ready,
                 'not-ready': !this.ready,
-            }, part: "base" }, h("div", { key: '4d16a4da0692f53500c755600a539edf5dc2d606', ref: (div) => (this.flickityEl = div), class: {
+            }, part: "base" }, h("div", { key: 'c5995f58b334a741e4c7930be1354d4814dd436b', ref: (div) => (this.flickityEl = div), class: {
                 'flickity-container': true,
                 'slides-ready': this.slidesReady,
                 'slides-not-ready': !this.slidesReady,
-            }, part: "slide-container" }, h("slot", { key: 'ddcdf042f8d25069c08578e7417e3f5571386b76' })), h("div", { key: '5a456eee7631c979fef473352d2c4beec7a5cf2e', class: "ui-extras" }, h("slot", { key: '3994bac2fd8111223df9e3886481edf72b0f2d54', name: "ui" })), this.slideCount > 1 && this.pager && (h("div", { key: '2966cef941d7232110ba4dbba0aefdb33e757216', class: "pagination flickity-page-dots", part: "pagination" }, Array.from({ length: this.slideCount }).map((_, index) => (h("button", { part: "pagination-item--active", key: index, class: {
+            }, part: "slide-container" }, h("slot", { key: 'f4b17d46db05d7b23ff79501cc435b2b6beadcb2', onSlotchange: () => this.update() })), h("div", { key: '483ab2edd42b87d48bcc0793cbe5c21efdd1a4d3', class: "ui-extras" }, h("slot", { key: '8fc3e7b78980381d52817c0faa80efa5439a14a6', name: "ui" })), this.slideCount > 1 && this.pager && (h("div", { key: '4e7c781d179dda4d43356ae9a5892d913d17b43c', class: "pagination flickity-page-dots", part: "pagination" }, Array.from({ length: this.slideCount }).map((_, index) => (h("button", { part: "pagination-item--active", key: index, class: {
                 'pagination-btn': true,
                 'pagination-btn--active': this.isActive(index),
                 'is-selected': this.isActive(index),

package/hydrate/index.mjs

@@ -24602,28 +24602,15 @@ class NanoTable {
         this.handleHideCaptionChange();
     }
     componentDidRender() {
-        if (this.scrollable !== false && this.table) {
-            // a hack. Revise in-future.
-            // the table is always rendered in the light DOM - so it should always be visible, but
-            // if we conditionally render the slot within the masked overflow there's quite a noticeable
-            //  CLS as it moves before the nano-masked-overflow is bootstrapped.
-            customElements
-                .whenDefined(transformTag('nano-masked-overflow'))
-                .then(() => {
-                this.host
-                    .querySelector('.nano-table__overflow')
-                    ?.appendChild(this.table);
-            });
-        }
     }
     disconnectedCallback() {
         this.cleanUpObservers();
     }
     render() {
-        return (h(Host, { key: '54758d3dbda3695305222d5717ad0503d355dc42', class: {
+        return (h(Host, { key: 'bd86de55fe8bc0259cf6e7e112c4bb48ad190761', class: {
                 'nano-table': true,
                 'nano-table--props-ready': this.propsReady,
-            } }, this.scrollable && (h("nano-masked-overflow", { key: '28386faf317ffb158e7c743a9891c07d1843bcaf', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: 'b3c3169a26443abbc19761df5bd543edafae52f2', class: "nano-table__overflow" }))), h("slot", { key: 'a2ced54f3b39798c78a06fded180291111dfd1b1' })));
+            } }, this.scrollable && (h("nano-masked-overflow", { key: '7002c33f0368801339f718e191922cb03b28ce08', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '60b7c9a2d7a6bde7ffcde6ce62b0477790601cf5', class: "nano-table__overflow" }))), h("slot", { key: '3d4fb01789dd5c1b0a2b3872534e796e5182d579' })));
     }
     static get watchers() { return {
         "compact": ["handleCompactChange"],
@@ -29634,7 +29621,6 @@ class Slides {
     }
     flickityEl;
     flickityReady = false;
-    mutationO;
     resizeO;
     readyflickity;
     flickity = new Promise((resolve) => {
@@ -29698,7 +29684,7 @@ class Slides {
     async animationChange(_, oldAnim) {
         const [flkty, slides] = await Promise.all([
             this.getflickity(),
-            this.waitForSlides(this.host),
+            this.waitForSlides(),
         ]);
         // clear old stuff
         slides.forEach((slide) => {
@@ -29788,9 +29774,11 @@ class Slides {
      * child slides.
      */
     async update() {
+        if (!this.didInit)
+            return;
         const [flickity] = await Promise.all([
             this.getflickity(),
-            this.waitForSlides(this.host),
+            this.waitForSlides(),
         ]);
         this.childrenEles = this.host.querySelectorAll(`${transformTag('nano-slide')} > *`);
         flickity.reloadCells();
@@ -29978,7 +29966,7 @@ class Slides {
         const finalOptions = this.normalizeOptions();
         await this.loadFlickityModules(finalOptions);
         // init flickity core
-        await this.waitForSlides(this.host);
+        await this.waitForSlides();
         this.flickityEl =
             this.flickityEl || this._getRoot().querySelector('.flickity-container');
         if (!this.flickityEl)
@@ -30068,8 +30056,8 @@ class Slides {
         // @ts-expect-error - merged options don't quite match the flickity options
         return { ...flickityOptions, ...mergedEventOptions, ...this.options };
     }
-    waitForSlides = (host) => {
-        const allSlides = Array.from(host.querySelectorAll(transformTag('nano-slide')));
+    waitForSlides = () => {
+        const allSlides = Array.from(this.host.querySelectorAll(transformTag('nano-slide')));
         this.slideCount = allSlides.length;
         let toLoadSlides = allSlides.filter((ele) => !ele.ready);
         if (!toLoadSlides.length)
@@ -30079,13 +30067,13 @@ class Slides {
                 toLoadSlides = toLoadSlides.filter((ele) => ele !== ev.target);
                 if (!toLoadSlides.length) {
                     resolve(allSlides);
-                    host.removeEventListener('nanoSlideReady', slideResolver);
-                    host.removeEventListener('nano-slide-ready', slideResolver);
+                    this.host.removeEventListener('nanoSlideReady', slideResolver);
+                    this.host.removeEventListener('nano-slide-ready', slideResolver);
                 }
             };
-            host.addEventListener('nanoSlideReady', slideResolver);
+            this.host.addEventListener('nanoSlideReady', slideResolver);
             // fallback for vue who can't handle camelcase event names
-            host.addEventListener('nano-slide-ready', slideResolver);
+            this.host.addEventListener('nano-slide-ready', slideResolver);
         });
     };
     componentDidLoad() {
@@ -30096,10 +30084,6 @@ class Slides {
         }
     }
     disconnectedCallback() {
-        if (this.mutationO) {
-            this.mutationO.disconnect();
-            this.mutationO = undefined;
-        }
         if (this.resizeO) {
             this.resizeO.disconnect();
             this.resizeO = undefined;
@@ -30107,15 +30091,15 @@ class Slides {
         this.destroyflickity();
     }
     render() {
-        return (h(Host, { key: '6dedc1589f5ae629975f38303f658de914c8f506', class: "nano-slides" }, h("div", { key: '528c7b10972b258ef0345525a9fa82c289ecc083', class: {
+        return (h(Host, { key: '87cf8ae3ff3ded83f82ef3bfc5d76381afb967e0', class: "nano-slides" }, h("div", { key: 'af12496fc219421dcf416607a7c5cc9b0e59968e', class: {
                 slideshow: true,
                 ready: this.ready,
                 'not-ready': !this.ready,
-            }, part: "base" }, h("div", { key: '4d16a4da0692f53500c755600a539edf5dc2d606', ref: (div) => (this.flickityEl = div), class: {
+            }, part: "base" }, h("div", { key: 'c5995f58b334a741e4c7930be1354d4814dd436b', ref: (div) => (this.flickityEl = div), class: {
                 'flickity-container': true,
                 'slides-ready': this.slidesReady,
                 'slides-not-ready': !this.slidesReady,
-            }, part: "slide-container" }, h("slot", { key: 'ddcdf042f8d25069c08578e7417e3f5571386b76' })), h("div", { key: '5a456eee7631c979fef473352d2c4beec7a5cf2e', class: "ui-extras" }, h("slot", { key: '3994bac2fd8111223df9e3886481edf72b0f2d54', name: "ui" })), this.slideCount > 1 && this.pager && (h("div", { key: '2966cef941d7232110ba4dbba0aefdb33e757216', class: "pagination flickity-page-dots", part: "pagination" }, Array.from({ length: this.slideCount }).map((_, index) => (h("button", { part: "pagination-item--active", key: index, class: {
+            }, part: "slide-container" }, h("slot", { key: 'f4b17d46db05d7b23ff79501cc435b2b6beadcb2', onSlotchange: () => this.update() })), h("div", { key: '483ab2edd42b87d48bcc0793cbe5c21efdd1a4d3', class: "ui-extras" }, h("slot", { key: '8fc3e7b78980381d52817c0faa80efa5439a14a6', name: "ui" })), this.slideCount > 1 && this.pager && (h("div", { key: '4e7c781d179dda4d43356ae9a5892d913d17b43c', class: "pagination flickity-page-dots", part: "pagination" }, Array.from({ length: this.slideCount }).map((_, index) => (h("button", { part: "pagination-item--active", key: index, class: {
                 'pagination-btn': true,
                 'pagination-btn--active': this.isActive(index),
                 'is-selected': this.isActive(index),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "8.12.2",
+  "version": "8.12.3",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -60,7 +60,7 @@
     "smart-array-filter": "^4.0.2",
     "stencil-wormhole": "3.2.1",
     "tyqs": "^0.1.3",
-    "@nanoporetech-digital/style": "8.12.2"
+    "@nanoporetech-digital/style": "8.12.3"
   },
   "devDependencies": {
     "@algolia/client-search": "^4.22.1",