codexly-ui 0.13.2 → 0.13.3

package/fesm2022/codexly-ui.mjs

@@ -1349,13 +1349,28 @@ class ClxAvatarComponent {
     shape = input('circle', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
     alt = input('Avatar', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
     _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    /** Set by (error) on the <img> when src() fails to load (404, expired/broken URL, CORS, wrong
+     *  host, ...) — without this, _contentType() would keep returning 'image' forever since it only
+     *  checks whether src() is truthy, never whether it actually loaded, and the browser renders the
+     *  alt() text raw inside the small circular avatar container ("Avatar" clipped into "Avata").
+     *  Reset by the effect below whenever src() itself changes, so a later successful URL (e.g. after
+     *  uploading a new profile photo) gets a fresh chance to load instead of staying stuck on the
+     *  fallback from a previous broken one. */
+    _imgFailed = signal(false, ...(ngDevMode ? [{ debugName: "_imgFailed" }] : /* istanbul ignore next */ []));
+    _resetImgFailedOnSrcChange = effect(() => {
+        this.src();
+        this._imgFailed.set(false);
+    }, ...(ngDevMode ? [{ debugName: "_resetImgFailedOnSrcChange" }] : /* istanbul ignore next */ []));
     _contentType = computed(() => {
-        if (this.src())
+        if (this.src() && !this._imgFailed())
             return 'image';
         if (this.initials())
             return 'text';
         return 'icon';
     }, ...(ngDevMode ? [{ debugName: "_contentType" }] : /* istanbul ignore next */ []));
+    _onImgError() {
+        this._imgFailed.set(true);
+    }
     _initials = computed(() => (this.initials() ?? '').slice(0, 3).toUpperCase(), ...(ngDevMode ? [{ debugName: "_initials" }] : /* istanbul ignore next */ []));
     _iconSize = computed(() => AVATAR_ICON_SIZE_MAP[this.size()], ...(ngDevMode ? [{ debugName: "_iconSize" }] : /* istanbul ignore next */ []));
     _shapeClass = computed(() => {
@@ -1386,7 +1401,7 @@ class ClxAvatarComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxAvatarComponent, isStandalone: true, selector: "clx-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "img" }, properties: { "class": "_hostClass()", "attr.aria-label": "alt()" } }, ngImport: i0, template: `
     @switch (_contentType()) {
       @case ('image') {
-        <img [src]="src()" [alt]="alt()" class="w-full h-full object-cover" />
+        <img [src]="src()" [alt]="alt()" class="w-full h-full object-cover" (error)="_onImgError()" />
       }
       @case ('text') {
         <span [class]="_textClass()">{{ _initials() }}</span>
@@ -1406,7 +1421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     template: `
     @switch (_contentType()) {
       @case ('image') {
-        <img [src]="src()" [alt]="alt()" class="w-full h-full object-cover" />
+        <img [src]="src()" [alt]="alt()" class="w-full h-full object-cover" (error)="_onImgError()" />
       }
       @case ('text') {
         <span [class]="_textClass()">{{ _initials() }}</span>