@getflip/swirl-components 0.271.0 → 0.272.0

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-12-16T14:28:04",
+  "timestamp": "2024-12-17T09:39:20",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.18.1",

package/dist/cjs/swirl-image-grid-item.cjs.entry.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2ab5d772.js');
 const index$1 = require('./index-9f94303c.js');
+const utils = require('./utils-ea8f1bbc.js');
 
 const swirlImageGridItemCss = ":host{display:block;width:100%;min-height:0}:host *{box-sizing:border-box}:host(:not(:only-child)) .image-grid-item__background{display:none}:host(:not(:only-child)) .image-grid-item__image{-o-object-fit:cover;object-fit:cover}:host(:only-child) button.image-grid-item:focus-visible:before,:host(:only-child) button.image-grid-item:focus-visible:after{border-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"2\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"2\"]:nth-child(1)) button.image-grid-item:focus-visible:after,:host([data-sibling-count=\"3\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"2\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"2\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm);border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"3\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"3\"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(4)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(4)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host(:nth-child(n+5)){display:none}.image-grid-item{position:relative;display:inline-flex;overflow:hidden;width:100%;height:100%}button.image-grid-item{padding:0;border:none;background-color:transparent;cursor:pointer}button.image-grid-item:focus{outline:none}button.image-grid-item:focus-visible:before{content:\"\";position:absolute;inset:0;border:0.125rem solid var(--s-focus-default);z-index:3}button.image-grid-item:focus-visible:after{content:\"\";position:absolute;inset:0;border:0.1875rem solid var(--s-background-default);z-index:2}.image-grid-item--has-error .image-grid-item__image{display:none}.image-grid-item--has-overlay .image-grid-item__image{scale:1.1;filter:blur(5px)}.image-grid-item__background{position:absolute;background-size:cover;inset:-40px;filter:blur(20px)}.image-grid-item__image{z-index:1;display:inline-flex;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center}.image-grid-item__loading-placeholder{display:inline-flex;width:100%;height:100%}.image-grid-item__icon{position:absolute;z-index:1;top:50%;left:50%;display:flex;width:3rem;height:3rem;justify-content:center;align-items:center;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);transform:translate3d(-50%, -50%, 0)}.image-grid-item__icon ::part(icon){width:2rem;height:2rem}.image-grid-item__gif-controls{position:absolute;z-index:1;bottom:var(--s-space-8);left:var(--s-space-8)}.image-grid-item__gif-controls .image-grid-item__gif-controls__icon{display:flex;padding:var(--s-space-2);justify-content:center;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-icon-on-image);background-color:var(--s-surface-on-image-default)}.image-grid-item__gif-controls .image-grid-item__gif-controls__icon--button{border:none;cursor:pointer}.image-grid-item__gif-controls .image-grid-item__gif-controls__icon--label{padding-left:var(--s-space-8);padding-right:var(--s-space-8)}.image-grid-item__overlay{position:absolute;z-index:2;display:flex;justify-content:center;align-items:center;color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.4);font-size:var(--s-font-size-2xl);inset:0}.image-grid-item__spinner{position:absolute;z-index:3;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.4);inset:0}.image-grid-item__error{position:absolute;z-index:3;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.1);inset:0}";
 const SwirlImageGridItemStyle0 = swirlImageGridItemCss;
@@ -15,6 +16,10 @@ const SwirlImageGridItem = class {
         this.gifStopped = index.createEvent(this, "gifStopped", 7);
         this.imageError = index.createEvent(this, "imageError", 7);
         this.imageLoad = index.createEvent(this, "imageLoad", 7);
+        this.handleIntersectionEntries = utils.debounce((entries) => {
+            const sorted = [...entries].sort((a, b) => a.time - b.time);
+            this.inViewport = sorted.at(-1).isIntersecting;
+        }, 250);
         this.onLoad = () => {
             this.error = false;
             this.loaded = true;
@@ -89,14 +94,11 @@ const SwirlImageGridItem = class {
         if (this.loading !== "intersecting") {
             return;
         }
-        this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange.bind(this), {
-            threshold: 0,
+        this.intersectionObserver = new IntersectionObserver((entries) => {
+            this.handleIntersectionEntries(entries);
         });
         this.intersectionObserver.observe(this.el);
     }
-    onVisibilityChange(entries) {
-        this.inViewport = entries.some((entry) => entry.isIntersecting);
-    }
     async pauseGif() {
         const imageEl = this.img;
         const staticImage = await this.readImageFromCanvas(imageEl.src);
@@ -130,16 +132,16 @@ const SwirlImageGridItem = class {
             "image-grid-item--has-error": this.error,
             "image-grid-item--has-overlay": this.overlay,
         });
-        return (index.h(index.Host, { key: '76485aab929a8e33cc8f3b226497d9f1df3bb49d', "data-sibling-count": siblingCount, role: "listitem" }, index.h(Tag, { key: '12d24ad20f9a877584cbb3d2e9cdfbad6a4dc2e9', class: className, type: this.interactive ? "button" : undefined }, index.h("div", { key: '6d0fa0c2d90033e3b357323d403e887fb80fe4ec', class: "image-grid-item__background", style: {
+        return (index.h(index.Host, { key: '3df6b790bbb8606b4eed5d6d0788d105e04f4b8a', "data-sibling-count": siblingCount, role: "listitem" }, index.h(Tag, { key: 'bb91bd8a691464f03e90ed9e89149f395df74a9d', class: className, type: this.interactive ? "button" : undefined }, index.h("div", { key: '8c1193c46a7d739a0b0980bbb8ba1fc6085800d7', class: "image-grid-item__background", style: {
                 backgroundImage: showBlurredBackground
                     ? `url(${this.computedSrc})`
                     : undefined,
             } }), this.loading !== "intersecting" ||
             this.inViewport ||
-            this.gifPaused ? (index.h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.onError, onLoad: this.onLoad, ref: (el) => (this.img = el), src: this.computedSrc })) : (index.h("div", { class: "image-grid-item__loading-placeholder" })), this.showGifControls && (index.h("swirl-stack", { key: '827ad86b66876e451aef554fc24ff090e4d5777d', class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, index.h("button", { key: '83026738dfc9cbb8a145d309c540712fdb16b000', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--button", onClick: this.handleControlClick, type: "button", "aria-label": this.gifPaused ? this.gifPlayLabel : this.gifPauseLabel }, this.gifPaused ? (index.h("swirl-icon-play-arrow", { size: 20 })) : (index.h("swirl-icon-pause", { size: 20 }))), index.h("div", { key: '6b666841df8cbaae189d2ef21dafa54fd1891377', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label" }, index.h("swirl-icon-gif", { key: '76908d564832b3b6f63a43928be8815502943425', size: 20 })))), this.loaded &&
+            this.gifPaused ? (index.h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.onError, onLoad: this.onLoad, ref: (el) => (this.img = el), src: this.computedSrc })) : (index.h("div", { class: "image-grid-item__loading-placeholder" })), this.showGifControls && (index.h("swirl-stack", { key: 'ddbdaa408afe0d8fe445256196a23ace3c0fb75b', class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, index.h("button", { key: 'd0d2b4ca348272191442dba90619f4ac9a1bd7ec', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--button", onClick: this.handleControlClick, type: "button", "aria-label": this.gifPaused ? this.gifPlayLabel : this.gifPauseLabel }, this.gifPaused ? (index.h("swirl-icon-play-arrow", { size: 20 })) : (index.h("swirl-icon-pause", { size: 20 }))), index.h("div", { key: '2818e0abc2a61e1483a69c32678c2ac4e4989290', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label" }, index.h("swirl-icon-gif", { key: 'c514991c015cd6f9767dd175f2370eb20937eeda', size: 20 })))), this.loaded &&
             !this.error &&
             this.icon &&
-            !Boolean(this.overlay) && (index.h("div", { key: '1870a25ab75a9e71e9f0028312489242e76b3d82', class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (index.h("div", { key: 'b8cfc7ed5e18b5df4d319418520a8e599d93563b', class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (index.h("div", { key: 'c6e3fef4dc7e639902af85cd6118754e8d58d3f3', class: "image-grid-item__spinner" }, index.h("swirl-spinner", { key: '6df4e1823d1761eb9344655b30bb4eecfa3807aa' }))), this.loaded && this.error && (index.h("div", { key: '2a059146e82ae8fd6ec968b34267239f3f1b7071', class: "image-grid-item__error" }, index.h("swirl-icon-error", { key: '37a20227d442b202a0cd5a66c2203f827836fcb9', color: "critical" }))))));
+            !Boolean(this.overlay) && (index.h("div", { key: '3fbb938d73610ca670018d66422ce58d92a2c91c', class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (index.h("div", { key: '435b2fd7a8a94fbe0905636b82a1793202cb1c41', class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (index.h("div", { key: 'a4a2276318afe3424504a200185a038d6dc4161f', class: "image-grid-item__spinner" }, index.h("swirl-spinner", { key: '55a074bfe0459222049673788d7b755608fd9f27' }))), this.loaded && this.error && (index.h("div", { key: 'cd48b68ce0970d73fed49bad653b9de2f0f4907f', class: "image-grid-item__error" }, index.h("swirl-icon-error", { key: '60b1c44bb59cf45b8cf5a27528dc680100344896', color: "critical" }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.js

@@ -1,7 +1,12 @@
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
+import { debounce } from "../../utils";
 export class SwirlImageGridItem {
     constructor() {
+        this.handleIntersectionEntries = debounce((entries) => {
+            const sorted = [...entries].sort((a, b) => a.time - b.time);
+            this.inViewport = sorted.at(-1).isIntersecting;
+        }, 250);
         this.onLoad = () => {
             this.error = false;
             this.loaded = true;
@@ -76,14 +81,11 @@ export class SwirlImageGridItem {
         if (this.loading !== "intersecting") {
             return;
         }
-        this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange.bind(this), {
-            threshold: 0,
+        this.intersectionObserver = new IntersectionObserver((entries) => {
+            this.handleIntersectionEntries(entries);
         });
         this.intersectionObserver.observe(this.el);
     }
-    onVisibilityChange(entries) {
-        this.inViewport = entries.some((entry) => entry.isIntersecting);
-    }
     async pauseGif() {
         const imageEl = this.img;
         const staticImage = await this.readImageFromCanvas(imageEl.src);
@@ -117,16 +119,16 @@ export class SwirlImageGridItem {
             "image-grid-item--has-error": this.error,
             "image-grid-item--has-overlay": this.overlay,
         });
-        return (h(Host, { key: '76485aab929a8e33cc8f3b226497d9f1df3bb49d', "data-sibling-count": siblingCount, role: "listitem" }, h(Tag, { key: '12d24ad20f9a877584cbb3d2e9cdfbad6a4dc2e9', class: className, type: this.interactive ? "button" : undefined }, h("div", { key: '6d0fa0c2d90033e3b357323d403e887fb80fe4ec', class: "image-grid-item__background", style: {
+        return (h(Host, { key: '3df6b790bbb8606b4eed5d6d0788d105e04f4b8a', "data-sibling-count": siblingCount, role: "listitem" }, h(Tag, { key: 'bb91bd8a691464f03e90ed9e89149f395df74a9d', class: className, type: this.interactive ? "button" : undefined }, h("div", { key: '8c1193c46a7d739a0b0980bbb8ba1fc6085800d7', class: "image-grid-item__background", style: {
                 backgroundImage: showBlurredBackground
                     ? `url(${this.computedSrc})`
                     : undefined,
             } }), this.loading !== "intersecting" ||
             this.inViewport ||
-            this.gifPaused ? (h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.onError, onLoad: this.onLoad, ref: (el) => (this.img = el), src: this.computedSrc })) : (h("div", { class: "image-grid-item__loading-placeholder" })), this.showGifControls && (h("swirl-stack", { key: '827ad86b66876e451aef554fc24ff090e4d5777d', class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, h("button", { key: '83026738dfc9cbb8a145d309c540712fdb16b000', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--button", onClick: this.handleControlClick, type: "button", "aria-label": this.gifPaused ? this.gifPlayLabel : this.gifPauseLabel }, this.gifPaused ? (h("swirl-icon-play-arrow", { size: 20 })) : (h("swirl-icon-pause", { size: 20 }))), h("div", { key: '6b666841df8cbaae189d2ef21dafa54fd1891377', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label" }, h("swirl-icon-gif", { key: '76908d564832b3b6f63a43928be8815502943425', size: 20 })))), this.loaded &&
+            this.gifPaused ? (h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.onError, onLoad: this.onLoad, ref: (el) => (this.img = el), src: this.computedSrc })) : (h("div", { class: "image-grid-item__loading-placeholder" })), this.showGifControls && (h("swirl-stack", { key: 'ddbdaa408afe0d8fe445256196a23ace3c0fb75b', class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, h("button", { key: 'd0d2b4ca348272191442dba90619f4ac9a1bd7ec', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--button", onClick: this.handleControlClick, type: "button", "aria-label": this.gifPaused ? this.gifPlayLabel : this.gifPauseLabel }, this.gifPaused ? (h("swirl-icon-play-arrow", { size: 20 })) : (h("swirl-icon-pause", { size: 20 }))), h("div", { key: '2818e0abc2a61e1483a69c32678c2ac4e4989290', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label" }, h("swirl-icon-gif", { key: 'c514991c015cd6f9767dd175f2370eb20937eeda', size: 20 })))), this.loaded &&
             !this.error &&
             this.icon &&
-            !Boolean(this.overlay) && (h("div", { key: '1870a25ab75a9e71e9f0028312489242e76b3d82', class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (h("div", { key: 'b8cfc7ed5e18b5df4d319418520a8e599d93563b', class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (h("div", { key: 'c6e3fef4dc7e639902af85cd6118754e8d58d3f3', class: "image-grid-item__spinner" }, h("swirl-spinner", { key: '6df4e1823d1761eb9344655b30bb4eecfa3807aa' }))), this.loaded && this.error && (h("div", { key: '2a059146e82ae8fd6ec968b34267239f3f1b7071', class: "image-grid-item__error" }, h("swirl-icon-error", { key: '37a20227d442b202a0cd5a66c2203f827836fcb9', color: "critical" }))))));
+            !Boolean(this.overlay) && (h("div", { key: '3fbb938d73610ca670018d66422ce58d92a2c91c', class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (h("div", { key: '435b2fd7a8a94fbe0905636b82a1793202cb1c41', class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (h("div", { key: 'a4a2276318afe3424504a200185a038d6dc4161f', class: "image-grid-item__spinner" }, h("swirl-spinner", { key: '55a074bfe0459222049673788d7b755608fd9f27' }))), this.loaded && this.error && (h("div", { key: 'cd48b68ce0970d73fed49bad653b9de2f0f4907f', class: "image-grid-item__error" }, h("swirl-icon-error", { key: '60b1c44bb59cf45b8cf5a27528dc680100344896', color: "critical" }))))));
     }
     static get is() { return "swirl-image-grid-item"; }
     static get encapsulation() { return "shadow"; }