@getflip/swirl-components 0.137.0 → 0.138.0

package/dist/collection/collection-manifest.json

@@ -20,6 +20,7 @@
     "./components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf.js",
     "./components/swirl-form-control/swirl-form-control.js",
     "./components/swirl-form-group/swirl-form-group.js",
+    "./components/swirl-image-grid-item/swirl-image-grid-item.js",
     "./components/swirl-inline-error/swirl-inline-error.js",
     "./components/swirl-inline-notification/swirl-inline-notification.js",
     "./components/swirl-inline-status/swirl-inline-status.js",
@@ -221,7 +222,6 @@
     "./components/swirl-icon/icons/swirl-icon-voice.js",
     "./components/swirl-icon/icons/swirl-icon-warning.js",
     "./components/swirl-image-grid/swirl-image-grid.js",
-    "./components/swirl-image-grid-item/swirl-image-grid-item.js",
     "./components/swirl-lightbox/swirl-lightbox.js",
     "./components/swirl-list/swirl-list.js",
     "./components/swirl-menu-item/swirl-menu-item.js",

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

@@ -1,6 +1,6 @@
 import { newSpecPage } from "@stencil/core/testing";
-import { SwirlImageGrid } from "./swirl-image-grid";
 import { SwirlImageGridItem } from "../swirl-image-grid-item/swirl-image-grid-item";
+import { SwirlImageGrid } from "./swirl-image-grid";
 describe("swirl-image-grid", () => {
   it("renders a single item", async () => {
     const page = await newSpecPage({
@@ -23,6 +23,9 @@ describe("swirl-image-grid", () => {
             <button class="image-grid-item" type="button">
               <div class="image-grid-item__background" style="background-image: url(/sample.jpg);"></div>
               <img alt="Cute dog in a blanket" class="image-grid-item__image" src="/sample.jpg">
+              <div class="image-grid-item__spinner">
+                <swirl-spinner></swirl-spinner>
+              </div>
             </button>
           </mock:shadow-root>
         </swirl-image-grid-item>

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

@@ -18,7 +18,9 @@ const Template = (args) => {
 export const SwirlImageGrid = Template.bind({});
 SwirlImageGrid.args = {
   aspectRatio: "16 / 9",
-  slot: `<swirl-image-grid-item alt="Cute dog in a blanket" interactive src="/sample.jpg"></swirl-image-grid-item>
-<swirl-image-grid-item alt="Another cute dog in a blanket" icon="<swirl-icon-play-arrow></swirl-icon-play-arrow>" interactive src="/sample-2.jpg"></swirl-image-grid-item>
-<swirl-image-grid-item alt="Third cute dog in a blanket" interactive src="/sample-3.jpg"></swirl-image-grid-item>`,
+  slot: `
+    <swirl-image-grid-item alt="Cute dog in a blanket" interactive src="/sample.jpg"></swirl-image-grid-item>
+    <swirl-image-grid-item alt="Cute dog in a blanket" interactive src="/sample-2.jpg"></swirl-image-grid-item>
+    <swirl-image-grid-item alt="Cute dog in a blanket" interactive src="/sample-3.jpg"></swirl-image-grid-item>
+  `,
 };

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

@@ -101,3 +101,13 @@ button.image-grid-item:focus-visible {
   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;
+}

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

@@ -2,18 +2,51 @@ import { h, Host } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlImageGridItem {
   constructor() {
+    this.onLoad = () => {
+      this.loaded = true;
+      console.log(this.loaded);
+    };
     this.alt = undefined;
     this.icon = undefined;
     this.interactive = undefined;
+    this.loading = undefined;
     this.overlay = undefined;
     this.src = undefined;
+    this.loaded = false;
+    this.inViewport = false;
+  }
+  componentDidLoad() {
+    this.setupIntersectionObserver();
+  }
+  disconnectedCallback() {
+    this.intersectionObserver?.disconnect();
+  }
+  setupIntersectionObserver() {
+    if (this.loading !== "intersecting") {
+      return;
+    }
+    this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange.bind(this), {
+      threshold: 0,
+    });
+    this.intersectionObserver.observe(this.el);
+  }
+  onVisibilityChange(entries) {
+    if (entries[0].isIntersecting) {
+      this.inViewport = true;
+    }
   }
   render() {
     const Tag = this.interactive ? "button" : "div";
     const className = classnames("image-grid-item", {
       "image-grid-item--has-overlay": this.overlay,
     });
-    return (h(Host, { role: "listitem" }, h(Tag, { class: className, type: this.interactive ? "button" : undefined }, h("div", { class: "image-grid-item__background", style: { backgroundImage: `url(${this.src})` } }), h("img", { alt: this.alt, class: "image-grid-item__image", src: this.src }), this.icon && !Boolean(this.overlay) && (h("div", { class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (h("div", { class: "image-grid-item__overlay" }, this.overlay)))));
+    return (h(Host, { role: "listitem" }, h(Tag, { class: className, type: this.interactive ? "button" : undefined }, h("div", { class: "image-grid-item__background", style: {
+        backgroundImage: !Boolean(this.loading) ||
+          this.loading === "eager" ||
+          this.loaded
+          ? `url(${this.src})`
+          : undefined,
+      } }), (this.loading !== "intersecting" || this.inViewport) && (h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, onLoad: this.onLoad, src: this.src })), this.loaded && this.icon && !Boolean(this.overlay) && (h("div", { class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (h("div", { class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (h("div", { class: "image-grid-item__spinner" }, h("swirl-spinner", null))))));
   }
   static get is() { return "swirl-image-grid-item"; }
   static get encapsulation() { return "shadow"; }
@@ -80,6 +113,28 @@ export class SwirlImageGridItem {
         "attribute": "interactive",
         "reflect": false
       },
+      "loading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlImageGridItemLoading",
+          "resolved": "\"auto\" | \"eager\" | \"intersecting\" | \"lazy\"",
+          "references": {
+            "SwirlImageGridItemLoading": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-image-grid-item/swirl-image-grid-item.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "loading",
+        "reflect": false
+      },
       "overlay": {
         "type": "string",
         "mutable": false,
@@ -116,4 +171,11 @@ export class SwirlImageGridItem {
       }
     };
   }
+  static get states() {
+    return {
+      "loaded": {},
+      "inViewport": {}
+    };
+  }
+  static get elementRef() { return "el"; }
 }

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

@@ -12,6 +12,9 @@ describe("swirl-image-grid-item", () => {
           <div class="image-grid-item">
             <div class="image-grid-item__background" style="background-image: url(/image.jpg);"></div>
             <img alt="Dog in a blanket" class="image-grid-item__image" src="/image.jpg">
+            <div class="image-grid-item__spinner">
+              <swirl-spinner></swirl-spinner>
+            </div>
           </div>
         </mock:shadow-root>
       </swirl-image-grid-item>