@acorex/platform 20.8.21 → 20.8.22

package/fesm2022/acorex-platform-layout-components.mjs

@@ -5328,7 +5328,7 @@ class AXPUserAvatarComponent {
         this.userInfo = signal(null, ...(ngDevMode ? [{ debugName: "userInfo" }] : []));
         this.size = input(40, ...(ngDevMode ? [{ debugName: "size" }] : []));
         this.userId = input('', ...(ngDevMode ? [{ debugName: "userId" }] : []));
-        this.src = signal('', ...(ngDevMode ? [{ debugName: "src" }] : []));
+        this.avatarUrl = signal('', ...(ngDevMode ? [{ debugName: "avatarUrl" }] : []));
         this.userName = computed(() => this.userInfo()?.username || '', ...(ngDevMode ? [{ debugName: "userName" }] : []));
         this.firstName = computed(() => this.userInfo()?.firstName || 'Root', ...(ngDevMode ? [{ debugName: "firstName" }] : []));
         this.lastName = computed(() => this.userInfo()?.lastName || 'User', ...(ngDevMode ? [{ debugName: "lastName" }] : []));
@@ -5336,17 +5336,17 @@ class AXPUserAvatarComponent {
         this.isOnline = computed(() => this.userInfo()?.status === 'online', ...(ngDevMode ? [{ debugName: "isOnline" }] : []));
         this.avatarText = computed(() => this.getInitials(), ...(ngDevMode ? [{ debugName: "avatarText" }] : []));
         this.avatarColor = computed(() => this.pickColor(this.avatarText()), ...(ngDevMode ? [{ debugName: "avatarColor" }] : []));
-        this.hasAvatar = computed(() => !isNil(this.src()) && !isEmpty(this.src()), ...(ngDevMode ? [{ debugName: "hasAvatar" }] : []));
+        this.hasAvatarUrl = computed(() => !isNil(this.avatarUrl()) && !isEmpty(this.avatarUrl()), ...(ngDevMode ? [{ debugName: "hasAvatarUrl" }] : []));
         this.isAvatarLoaded = signal(false, ...(ngDevMode ? [{ debugName: "isAvatarLoaded" }] : []));
-        this.isLoading = computed(() => this.hasAvatar() && !this.isAvatarLoaded(), ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.hasImageError = signal(false, ...(ngDevMode ? [{ debugName: "hasImageError" }] : []));
+        this.showImage = computed(() => this.hasAvatarUrl() && this.isAvatarLoaded() && !this.hasImageError(), ...(ngDevMode ? [{ debugName: "showImage" }] : []));
+        this.showPlaceholder = computed(() => this.hasAvatarUrl() && !this.showImage(), ...(ngDevMode ? [{ debugName: "showPlaceholder" }] : []));
     }
-    onImageError(event) {
-        // Clear src on error to fall back to initials
-        this.isAvatarLoaded.set(false);
-        this.src.set('');
+    onImageError(_event) {
+        this.markImageAsFailed();
     }
-    onImageLoad(event) {
-        this.isAvatarLoaded.set(true);
+    onImageLoad(_event) {
+        this.markImageAsLoaded();
     }
     ngOnInit() {
         this.loadUserData();
@@ -5371,17 +5371,47 @@ class AXPUserAvatarComponent {
         });
     }
     /**
-     * Generate avatar image source
-     * This is a placeholder - implement based on your actual requirements
+     * Resolves avatar image URL from user data and resets load state.
      */
     generateAvatarSrc() {
-        // Example: Check if the user has a custom avatar URL
-        // If not, generate a placeholder using initials
-        if (this.userInfo()?.avatarUrl) {
-            // Reset loading state when setting new src
+        const url = this.userInfo()?.avatarUrl;
+        if (url) {
             this.isAvatarLoaded.set(false);
-            this.src.set(this.userInfo()?.avatarUrl);
+            this.hasImageError.set(false);
+            this.avatarUrl.set(url);
+            this.preloadAvatar(url);
+            return;
         }
+        this.avatarUrl.set('');
+        this.isAvatarLoaded.set(false);
+        this.hasImageError.set(false);
+    }
+    /**
+     * Preloads avatar image without breaking ax-avatar content projection.
+     */
+    preloadAvatar(url) {
+        const image = new Image();
+        image.onload = () => {
+            if (this.avatarUrl() !== url) {
+                return;
+            }
+            this.markImageAsLoaded();
+        };
+        image.onerror = () => {
+            if (this.avatarUrl() !== url) {
+                return;
+            }
+            this.markImageAsFailed();
+        };
+        image.src = url;
+    }
+    markImageAsLoaded() {
+        this.hasImageError.set(false);
+        this.isAvatarLoaded.set(true);
+    }
+    markImageAsFailed() {
+        this.hasImageError.set(true);
+        this.isAvatarLoaded.set(false);
     }
     /**
      * Get initials from first and last name
@@ -5405,11 +5435,11 @@ class AXPUserAvatarComponent {
         return colors[idx];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPUserAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPUserAvatarComponent, isStandalone: true, selector: "axp-user-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<ax-avatar #avatar [size]=\"size()\" class=\"ax-cursor-pointer ax-relative\" [title]=\"this.src()\">\n  @if(hasAvatar()){\n  <ng-container>\n    <ax-image (onError)=\"onImageError($event)\" (onLoad)=\"onImageLoad($event)\" [src]=\"src()\"\n      [class.ax-opacity-0]=\"isLoading()\" class=\"ax-transition-opacity ax-duration-200\"></ax-image>\n    @if(isLoading()){\n    <!-- <ax-image [src]=\"src()\"></ax-image> -->\n    <ax-icon icon=\"fa-solid fa-user fa-2x\" class=\"ax-text-3xl\"></ax-icon>\n    }\n  </ng-container>\n  }@else{\n  <ax-text class=\"ax-{{ avatarColor() }}-lightest \">\n    <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n  </ax-text>\n  <!-- TODO: Add initials if firstName and lastName are not available -->\n  <!-- <ng-container>\n    @if(firstName() && lastName())\n    {\n    <ax-text class=\"ax-{{ avatarColor() }}-lightest \">\n      <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n    </ax-text>\n    }\n    @else {\n    <ax-icon icon=\"fa-solid fa-user fa-2x\" class=\"ax-text-3xl\"></ax-icon>\n    }\n  </ng-container> -->\n  }\n</ax-avatar>\n\n<!--\n\nax-primary-lightest\nax-warning-lightest\nax-success-lightest\nax-danger-lightest\nax-secondary-lightest\nax-accent1-lightest\nax-accent2-lightest\nax-accent3-lightest\n\n-->", styles: [""], dependencies: [{ kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i1$7.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$6.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXSkeletonModule }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPUserAvatarComponent, isStandalone: true, selector: "axp-user-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<ax-avatar #avatar [size]=\"size()\" class=\"ax-cursor-pointer ax-relative\" [title]=\"title()\">\n  @if (showImage()) {\n    <ax-image\n      (onError)=\"onImageError($event)\"\n      (onLoad)=\"onImageLoad($event)\"\n      [src]=\"avatarUrl()\"\n      class=\"ax-transition-opacity ax-duration-200\"\n    ></ax-image>\n  } @else if (showPlaceholder()) {\n    <ax-text class=\"ax-bg-primary-light\">\n      <ax-icon\n        icon=\"fa-solid fa-user\"\n        class=\"ax-text-sm ax-text-primary-500 ax-flex ax-text-center ax-justify-center\"\n        aria-hidden=\"true\"\n      ></ax-icon>\n    </ax-text>\n  } @else {\n    <ax-text class=\"ax-{{ avatarColor() }}-lightest\">\n      <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n    </ax-text>\n  }\n</ax-avatar>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i1$7.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$6.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXSkeletonModule }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPUserAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-user-avatar', imports: [AXAvatarModule, AXDecoratorModule, AXImageModule, AXBadgeModule, AXSkeletonModule], encapsulation: ViewEncapsulation.None, providers: [], template: "<ax-avatar #avatar [size]=\"size()\" class=\"ax-cursor-pointer ax-relative\" [title]=\"this.src()\">\n  @if(hasAvatar()){\n  <ng-container>\n    <ax-image (onError)=\"onImageError($event)\" (onLoad)=\"onImageLoad($event)\" [src]=\"src()\"\n      [class.ax-opacity-0]=\"isLoading()\" class=\"ax-transition-opacity ax-duration-200\"></ax-image>\n    @if(isLoading()){\n    <!-- <ax-image [src]=\"src()\"></ax-image> -->\n    <ax-icon icon=\"fa-solid fa-user fa-2x\" class=\"ax-text-3xl\"></ax-icon>\n    }\n  </ng-container>\n  }@else{\n  <ax-text class=\"ax-{{ avatarColor() }}-lightest \">\n    <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n  </ax-text>\n  <!-- TODO: Add initials if firstName and lastName are not available -->\n  <!-- <ng-container>\n    @if(firstName() && lastName())\n    {\n    <ax-text class=\"ax-{{ avatarColor() }}-lightest \">\n      <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n    </ax-text>\n    }\n    @else {\n    <ax-icon icon=\"fa-solid fa-user fa-2x\" class=\"ax-text-3xl\"></ax-icon>\n    }\n  </ng-container> -->\n  }\n</ax-avatar>\n\n<!--\n\nax-primary-lightest\nax-warning-lightest\nax-success-lightest\nax-danger-lightest\nax-secondary-lightest\nax-accent1-lightest\nax-accent2-lightest\nax-accent3-lightest\n\n-->" }]
+            args: [{ selector: 'axp-user-avatar', imports: [AXAvatarModule, AXDecoratorModule, AXImageModule, AXBadgeModule, AXSkeletonModule], encapsulation: ViewEncapsulation.None, providers: [], template: "<ax-avatar #avatar [size]=\"size()\" class=\"ax-cursor-pointer ax-relative\" [title]=\"title()\">\n  @if (showImage()) {\n    <ax-image\n      (onError)=\"onImageError($event)\"\n      (onLoad)=\"onImageLoad($event)\"\n      [src]=\"avatarUrl()\"\n      class=\"ax-transition-opacity ax-duration-200\"\n    ></ax-image>\n  } @else if (showPlaceholder()) {\n    <ax-text class=\"ax-bg-primary-light\">\n      <ax-icon\n        icon=\"fa-solid fa-user\"\n        class=\"ax-text-sm ax-text-primary-500 ax-flex ax-text-center ax-justify-center\"\n        aria-hidden=\"true\"\n      ></ax-icon>\n    </ax-text>\n  } @else {\n    <ax-text class=\"ax-{{ avatarColor() }}-lightest\">\n      <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n    </ax-text>\n  }\n</ax-avatar>\n" }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userId: [{ type: i0.Input, args: [{ isSignal: true, alias: "userId", required: false }] }] } });
 
 class AXPQueryViewsComponent {