@getflip/swirl-components 0.162.0 → 0.164.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,12 +53,16 @@ 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;
   }
   watchSrcProp() {
     this.imageAvailable = undefined;
@@ -72,7 +82,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, 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 +230,28 @@ export class SwirlAvatar {
         "attribute": "label",
         "reflect": false
       },
+      "loading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlAvatarLoading",
+          "resolved": "\"auto\" | \"eager\" | \"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 +360,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-box/swirl-box.js

@@ -28,7 +28,9 @@ export class SwirlBox {
     this.paddingInlineStart = undefined;
     this.position = undefined;
     this.right = undefined;
+    this.basis = undefined;
     this.shrink = undefined;
+    this.grow = undefined;
     this.top = undefined;
     this.width = undefined;
     this.zIndex = undefined;
@@ -38,7 +40,9 @@ export class SwirlBox {
       alignItems: this.centerBlock ? "center" : undefined,
       bottom: this.bottom,
       display: this.centerBlock || this.centerInline ? "flex" : undefined,
+      flexBasis: this.basis,
       flexShrink: this.shrink,
+      flexGrow: this.grow,
       height: this.cover ? "100%" : this.height,
       justifyContent: this.centerInline ? "center" : undefined,
       left: this.left,
@@ -520,6 +524,23 @@ export class SwirlBox {
         "attribute": "right",
         "reflect": false
       },
+      "basis": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "basis",
+        "reflect": false
+      },
       "shrink": {
         "type": "string",
         "mutable": false,
@@ -537,6 +558,23 @@ export class SwirlBox {
         "attribute": "shrink",
         "reflect": false
       },
+      "grow": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "grow",
+        "reflect": false
+      },
       "top": {
         "type": "string",
         "mutable": false,

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",
 };