@openproject/primer-view-components 0.79.0 → 0.79.1

package/app/components/primer/open_project/avatar_fallback.d.ts

@@ -1,7 +1,15 @@
 export declare class AvatarFallbackElement extends HTMLElement {
     uniqueId: string;
     altText: string;
+    fallbackSrc: string;
+    private img;
+    private boundErrorHandler?;
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    private isImageBroken;
+    private handleImageError;
+    private applyColor;
     private valueHash;
     private updateSvgColor;
+    private isFallbackImage;
 }

package/app/components/primer/open_project/avatar_fallback.js

@@ -10,16 +10,50 @@ let AvatarFallbackElement = class AvatarFallbackElement extends HTMLElement {
         super(...arguments);
         this.uniqueId = '';
         this.altText = '';
+        this.fallbackSrc = '';
+        this.img = null;
     }
     connectedCallback() {
+        this.img = this.querySelector('img') ?? null;
+        if (!this.img)
+            return;
+        this.boundErrorHandler = () => this.handleImageError(this.img);
+        // Handle image load errors (404, network failure, etc.)
+        this.img.addEventListener('error', this.boundErrorHandler);
+        // Check if image already failed (error event fired before listener attached)
+        if (this.isImageBroken(this.img)) {
+            this.handleImageError(this.img);
+        }
+        else if (this.isFallbackImage(this.img)) {
+            this.applyColor(this.img);
+        }
+    }
+    disconnectedCallback() {
+        if (this.boundErrorHandler && this.img) {
+            this.img.removeEventListener('error', this.boundErrorHandler);
+        }
+        this.boundErrorHandler = undefined;
+        this.img = null;
+    }
+    isImageBroken(img) {
+        // Image is broken if loading completed but no actual image data loaded
+        // Skip check for data URIs (fallback SVGs) as they're always valid
+        return img.complete && img.naturalWidth === 0 && !img.src.startsWith('data:');
+    }
+    handleImageError(img) {
+        // Prevent infinite loop if fallback also fails
+        if (this.isFallbackImage(img))
+            return;
+        if (this.fallbackSrc) {
+            img.src = this.fallbackSrc;
+            this.applyColor(img);
+        }
+    }
+    applyColor(img) {
         // If either uniqueId or altText is missing, skip color customization so the SVG
         // keeps its default gray fill defined in the source and no color override is applied.
         if (!this.uniqueId || !this.altText)
             return;
-        const img = this.querySelector('img[src^="data:image/svg+xml"]');
-        if (!img)
-            return;
-        // Generate consistent color based on uniqueId and altText (hash must match OP Core)
         const text = `${this.uniqueId}${this.altText}`;
         const hue = this.valueHash(text);
         const color = `hsl(${hue}, 50%, 30%)`;
@@ -49,6 +83,9 @@ let AvatarFallbackElement = class AvatarFallbackElement extends HTMLElement {
             // to avoid breaking the component.
         }
     }
+    isFallbackImage(img) {
+        return img.src === this.fallbackSrc;
+    }
 };
 __decorate([
     attr
@@ -56,6 +93,9 @@ __decorate([
 __decorate([
     attr
 ], AvatarFallbackElement.prototype, "altText", void 0);
+__decorate([
+    attr
+], AvatarFallbackElement.prototype, "fallbackSrc", void 0);
 AvatarFallbackElement = __decorate([
     controller
 ], AvatarFallbackElement);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openproject/primer-view-components",
-  "version": "0.79.0",
+  "version": "0.79.1",
   "description": "ViewComponents of the Primer Design System for OpenProject",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",

package/static/arguments.json

@@ -5775,7 +5775,7 @@
         "name": "src",
         "type": "String",
         "default": "`nil`",
-        "description": "The source url of the avatar image. When nil, renders a fallback with initials."
+        "description": "The source url of the avatar image. When nil or a broken URL, it renders a fallback with initials."
       },
       {
         "name": "alt",

package/static/info_arch.json

@@ -18882,7 +18882,7 @@
         "name": "src",
         "type": "String",
         "default": "`nil`",
-        "description": "The source url of the avatar image. When nil, renders a fallback with initials."
+        "description": "The source url of the avatar image. When nil or a broken URL, it renders a fallback with initials."
       },
       {
         "name": "alt",
@@ -19040,6 +19040,32 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/open_project/avatar_with_fallback/broken_image_404",
+        "name": "broken_image_404",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/avatar_with_fallback/multiple_broken_images",
+        "name": "multiple_broken_images",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": []

package/static/previews.json

@@ -1633,6 +1633,32 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/open_project/avatar_with_fallback/broken_image_404",
+        "name": "broken_image_404",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/avatar_with_fallback/multiple_broken_images",
+        "name": "multiple_broken_images",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },