@getflip/swirl-components 0.163.0 → 0.165.0

package/dist/collection/components/swirl-avatar/swirl-avatar.css

@@ -250,16 +250,16 @@
   }
 
 .avatar__initials {
+  position: absolute;
   display: inline-flex;
-  width: 100%;
   min-width: 0;
-  height: 100%;
   padding-right: 0.0625rem;
   padding-left: 0.0625rem;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
   font-weight: var(--s-font-weight-medium);
+  inset: 0;
 }
 
 .avatar__initials > span {
@@ -295,8 +295,8 @@
 
 .avatar__tool {
   position: absolute;
-  bottom: 0;
   right: 0;
+  bottom: 0;
   display: inline-flex;
   transform: translate3d(25%, 25%, 0);
 }

package/dist/collection/components/swirl-avatar/swirl-avatar.js

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 const swirlAvatarSizeMappings = {
   "3xs": 20,
@@ -17,9 +17,15 @@ export class SwirlAvatar {
   constructor() {
     this.setImageAvailable = () => {
       this.imageAvailable = true;
+      this.loadingError = false;
+      this.loaded = true;
+      this.imageLoad.emit();
     };
     this.setImageUnavailable = () => {
       this.imageAvailable = false;
+      this.loaded = true;
+      this.loadingError = true;
+      this.imageError.emit();
     };
     this.onKeydown = (event) => {
       // The interactive avatar is activated by the space key on the keyup event,
@@ -47,20 +53,46 @@ export class SwirlAvatar {
     this.initials = undefined;
     this.interactive = false;
     this.label = undefined;
+    this.loading = undefined;
     this.showLabel = false;
     this.size = "m";
     this.src = undefined;
     this.toolPosition = "bottom";
     this.variant = "round";
+    this.loadingError = false;
+    this.loaded = false;
     this.imageAvailable = undefined;
+    this.inViewport = false;
+  }
+  componentDidLoad() {
+    this.setupIntersectionObserver();
+  }
+  disconnectedCallback() {
+    this.intersectionObserver?.disconnect();
   }
   watchSrcProp() {
     this.imageAvailable = undefined;
   }
+  setupIntersectionObserver() {
+    if (this.loading !== "intersecting") {
+      return;
+    }
+    this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange.bind(this), {
+      threshold: 0,
+    });
+    this.intersectionObserver.observe(this.element);
+  }
+  onVisibilityChange(entries) {
+    if (entries[0].isIntersecting) {
+      this.inViewport = true;
+    }
+  }
   render() {
     const showImage = Boolean(this.src) &&
-      (this.imageAvailable || this.imageAvailable === undefined);
-    const showInitials = !showImage && Boolean(this.initials);
+      (this.imageAvailable || this.imageAvailable === undefined) &&
+      (this.loading !== "intersecting" || this.inViewport);
+    const showInitials = (!showImage || (!this.loaded && !this.loadingError)) &&
+      Boolean(this.initials);
     const showIcon = !showImage && !showInitials && Boolean(this.icon);
     const showFallbackIcon = !showImage && !showInitials && !showIcon;
     const showBadge = Boolean(this.badge) && this.size === "m";
@@ -72,7 +104,7 @@ export class SwirlAvatar {
     });
     const badgeClassName = classnames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
     const toolClassName = classnames("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
-    return (h(Host, { "aria-label": this.label, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { class: className, part: "avatar" }, showImage && (h("span", { class: "avatar__image" }, h("img", { alt: "", height: swirlAvatarSizeMappings[this.size], onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (h("span", { class: "avatar__initials" }, h("span", null, this.initials))), showIcon && h("span", { class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { class: "avatar__icon" }, h("swirl-icon-person", null))), showBadge && (h("span", { class: badgeClassName, innerHTML: this.badge })), h("span", { class: toolClassName }, h("slot", { name: "tool" }))), this.showLabel && (h("span", { "aria-hidden": true, class: "avatar__label" }, this.label))));
+    return (h(Host, { "aria-label": this.label, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { class: className, part: "avatar" }, showImage && (h("span", { class: "avatar__image" }, h("img", { alt: "", height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (h("span", { class: "avatar__initials" }, h("span", null, this.initials))), showIcon && h("span", { class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { class: "avatar__icon" }, h("swirl-icon-person", null))), showBadge && (h("span", { class: badgeClassName, innerHTML: this.badge })), h("span", { class: toolClassName }, h("slot", { name: "tool" }))), this.showLabel && (h("span", { "aria-hidden": true, class: "avatar__label" }, this.label))));
   }
   static get is() { return "swirl-avatar"; }
   static get encapsulation() { return "shadow"; }
@@ -220,6 +252,28 @@ export class SwirlAvatar {
         "attribute": "label",
         "reflect": false
       },
+      "loading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlAvatarLoading",
+          "resolved": "\"auto\" | \"eager\" | \"intersecting\" | \"lazy\"",
+          "references": {
+            "SwirlAvatarLoading": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-avatar/swirl-avatar.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "loading",
+        "reflect": false
+      },
       "showLabel": {
         "type": "boolean",
         "mutable": false,
@@ -328,9 +382,45 @@ export class SwirlAvatar {
   }
   static get states() {
     return {
-      "imageAvailable": {}
+      "loadingError": {},
+      "loaded": {},
+      "imageAvailable": {},
+      "inViewport": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "imageError",
+        "name": "imageError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "imageLoad",
+        "name": "imageLoad",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{

package/dist/collection/components/swirl-avatar/swirl-avatar.stories.js

@@ -43,5 +43,6 @@ const Template = (args) => {
 export const SwirlAvatar = Template.bind({});
 SwirlAvatar.args = {
   label: "John Doe",
+  initials: "PS",
   src: "https://picsum.photos/id/433/144/144",
 };

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

@@ -46,6 +46,10 @@ button.image-grid-item:focus-visible {
     outline-offset: var(--s-space-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);
@@ -117,3 +121,13 @@ button.image-grid-item:focus-visible {
   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;
+}

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

@@ -1,9 +1,16 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlImageGridItem {
   constructor() {
     this.onLoad = () => {
+      this.error = false;
       this.loaded = true;
+      this.imageLoad.emit();
+    };
+    this.onError = () => {
+      this.loaded = true;
+      this.error = true;
+      this.imageError.emit();
     };
     this.alt = undefined;
     this.icon = undefined;
@@ -11,6 +18,7 @@ export class SwirlImageGridItem {
     this.loading = undefined;
     this.overlay = undefined;
     this.src = undefined;
+    this.error = false;
     this.loaded = false;
     this.inViewport = false;
   }
@@ -37,6 +45,7 @@ export class SwirlImageGridItem {
   render() {
     const Tag = this.interactive ? "button" : "div";
     const className = classnames("image-grid-item", {
+      "image-grid-item--has-error": this.error,
       "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: {
@@ -45,7 +54,10 @@ export class SwirlImageGridItem {
           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 })) : (h("div", { class: "image-grid-item__loading-placeholder" })), 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))))));
+      } }), this.loading !== "intersecting" || this.inViewport ? (h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.onError, onLoad: this.onLoad, src: this.src })) : (h("div", { class: "image-grid-item__loading-placeholder" })), this.loaded &&
+      !this.error &&
+      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))), this.loaded && this.error && (h("div", { class: "image-grid-item__error" }, h("swirl-icon-error", { color: "critical" }))))));
   }
   static get is() { return "swirl-image-grid-item"; }
   static get encapsulation() { return "shadow"; }
@@ -172,9 +184,43 @@ export class SwirlImageGridItem {
   }
   static get states() {
     return {
+      "error": {},
       "loaded": {},
       "inViewport": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "imageError",
+        "name": "imageError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "imageLoad",
+        "name": "imageLoad",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "el"; }
 }

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

@@ -20,5 +20,5 @@ export const SwirlImageGridItem = Template.bind({});
 SwirlImageGridItem.args = {
   alt: "Dog in a blanket",
   icon: "<swirl-icon-play-arrow></swirl-icon-play-arrow>",
-  src: "/sample.jpg",
+  src: "/sampledsds.jpg",
 };