@acorex/platform 20.9.30 → 20.9.32

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

@@ -16,7 +16,7 @@ import { AXPLayoutRendererComponent, AXPLayoutBuilderService } from '@acorex/pla
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet, AsyncPipe, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, signal, effect, computed, InjectionToken, Injectable, Directive, viewChild, contentChild, ElementRef, output, afterNextRender, model, EventEmitter, forwardRef, ViewChild, Output, Input, untracked, DestroyRef, PLATFORM_ID, linkedSignal, ViewChildren, TemplateRef, contentChildren } from '@angular/core';
+import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, signal, effect, linkedSignal, computed, InjectionToken, Injectable, Directive, viewChild, contentChild, ElementRef, output, afterNextRender, model, EventEmitter, forwardRef, ViewChild, Output, Input, untracked, DestroyRef, PLATFORM_ID, ViewChildren, TemplateRef, contentChildren } from '@angular/core';
 import { AXAccordionCdkModule } from '@acorex/cdk/accordion';
 import { AXTagModule } from '@acorex/components/tag';
 import * as i1$1 from '@acorex/components/avatar';
@@ -70,7 +70,7 @@ import { AXCalendarService } from '@acorex/core/date-time';
 import { AXPFilterOperatorMiddlewareService, AXPSettingsService, ALL_DEFAULT_OPERATORS, AXPFileStorageService, withDefaultMultiLanguageOnWidgetProperty, AXPDefaultMultiLanguageConfigService, resolveSearchableText, AXP_PLATFORM_CONFIG_TOKEN } from '@acorex/platform/common';
 import { resolveEntityListFilterQueryField, resolveEntityListFilterContextField } from '@acorex/platform/layout/entity-contracts';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Subject, filter, BehaviorSubject, timer, takeUntil } from 'rxjs';
+import { Subject, filter, BehaviorSubject, timer } from 'rxjs';
 import * as i1$7 from '@acorex/components/image-editor';
 import { AXImageEditorContainerComponent, AXImageEditorModule } from '@acorex/components/image-editor';
 import * as i3$5 from '@acorex/components/toolbar';
@@ -286,11 +286,11 @@ class AXPAvatarComponent {
         this.fallbackText = input(undefined, ...(ngDevMode ? [{ debugName: "fallbackText" }] : /* istanbul ignore next */ []));
         /** Forces placeholder mode and '?' fallback. */
         this.placeholder = input(false, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-        this.isAvatarLoaded = signal(false, ...(ngDevMode ? [{ debugName: "isAvatarLoaded" }] : /* istanbul ignore next */ []));
+        this.imageFailed = linkedSignal({ ...(ngDevMode ? { debugName: "imageFailed" } : /* istanbul ignore next */ {}), source: () => this.src(),
+            computation: () => false });
         this.normalizedName = computed(() => (this.fullName() ?? '').trim(), ...(ngDevMode ? [{ debugName: "normalizedName" }] : /* istanbul ignore next */ []));
         this.resolvedSrc = computed(() => (this.src() ?? '').trim(), ...(ngDevMode ? [{ debugName: "resolvedSrc" }] : /* istanbul ignore next */ []));
-        this.hasAvatar = computed(() => !isNil(this.resolvedSrc()) && !isEmpty(this.resolvedSrc()) && !this.placeholder(), ...(ngDevMode ? [{ debugName: "hasAvatar" }] : /* istanbul ignore next */ []));
-        this.isLoading = computed(() => this.hasAvatar() && !this.isAvatarLoaded(), ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+        this.hasAvatar = computed(() => !isNil(this.resolvedSrc()) && !isEmpty(this.resolvedSrc()) && !this.placeholder() && !this.imageFailed(), ...(ngDevMode ? [{ debugName: "hasAvatar" }] : /* istanbul ignore next */ []));
         this.avatarText = computed(() => {
             if (this.placeholder()) {
                 return '?';
@@ -305,10 +305,10 @@ class AXPAvatarComponent {
         this.title = computed(() => this.normalizedName(), ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     }
     onImageError(event) {
-        this.isAvatarLoaded.set(false);
+        this.imageFailed.set(true);
     }
     onImageLoad(event) {
-        this.isAvatarLoaded.set(true);
+        this.imageFailed.set(false);
     }
     computeInitials(name) {
         if (!name) {
@@ -345,11 +345,11 @@ class AXPAvatarComponent {
         // ax-accent3-lightest
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPAvatarComponent, isStandalone: true, selector: "axp-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, fullName: { classPropertyName: "fullName", publicName: "fullName", isSignal: true, isRequired: false, transformFunction: null }, fallbackText: { classPropertyName: "fallbackText", publicName: "fallbackText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ax-avatar [size]=\"size()\" class=\"ax-cursor-pointer ax-relative\" [title]=\"title()\"\n  class=\"ax-{{ avatarColor() }}-lightest ax-border \">\n  @if (hasAvatar()) {\n  <ng-container>\n    <ax-image (onError)=\"onImageError($event)\" (onLoad)=\"onImageLoad($event)\" [src]=\"resolvedSrc()\"\n      [class.ax-opacity-0]=\"isLoading()\" class=\"ax-transition-opacity ax-duration-200\" />\n    @if (isLoading()) {\n    <ax-icon icon=\"fa-solid fa-user fa-2x\" class=\"ax-text-3xl\" />\n    }\n  </ng-container>\n  } @else {\n  <ax-text>\n    <small class=\"ax-font-semibold\" [style.font-size]=\"size() * 0.35 + 'px'\">{{ avatarText() }}</small>\n  </ax-text>\n  }\n</ax-avatar>", styles: [":host ax-text{border-style:none;background-color:transparent;color:unset!important}\n"], dependencies: [{ kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i1$1.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: i3$1.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPAvatarComponent, isStandalone: true, selector: "axp-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, fullName: { classPropertyName: "fullName", publicName: "fullName", isSignal: true, isRequired: false, transformFunction: null }, fallbackText: { classPropertyName: "fallbackText", publicName: "fallbackText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ax-avatar [size]=\"size()\" class=\"ax-cursor-pointer ax-relative\" [title]=\"title()\"\n  class=\"ax-{{ avatarColor() }}-lightest ax-border \">\n  @if (hasAvatar()) {\n  <ax-image\n    (onError)=\"onImageError($event)\"\n    (onLoad)=\"onImageLoad($event)\"\n    [src]=\"resolvedSrc()\"\n  />\n  } @else {\n  <ax-text>\n    <small class=\"ax-font-semibold\" [style.font-size]=\"size() * 0.35 + 'px'\">{{ avatarText() }}</small>\n  </ax-text>\n  }\n</ax-avatar>\n", styles: [":host ax-text{border-style:none;background-color:transparent;color:unset!important}:host ax-image{position:absolute!important;inset:0;width:100%!important;height:100%!important}:host ax-image img{display:block!important}\n"], dependencies: [{ kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i1$1.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { 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: i3$1.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-avatar', imports: [AXAvatarModule, AXDecoratorModule, AXImageModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-avatar [size]=\"size()\" class=\"ax-cursor-pointer ax-relative\" [title]=\"title()\"\n  class=\"ax-{{ avatarColor() }}-lightest ax-border \">\n  @if (hasAvatar()) {\n  <ng-container>\n    <ax-image (onError)=\"onImageError($event)\" (onLoad)=\"onImageLoad($event)\" [src]=\"resolvedSrc()\"\n      [class.ax-opacity-0]=\"isLoading()\" class=\"ax-transition-opacity ax-duration-200\" />\n    @if (isLoading()) {\n    <ax-icon icon=\"fa-solid fa-user fa-2x\" class=\"ax-text-3xl\" />\n    }\n  </ng-container>\n  } @else {\n  <ax-text>\n    <small class=\"ax-font-semibold\" [style.font-size]=\"size() * 0.35 + 'px'\">{{ avatarText() }}</small>\n  </ax-text>\n  }\n</ax-avatar>", styles: [":host ax-text{border-style:none;background-color:transparent;color:unset!important}\n"] }]
+            args: [{ selector: 'axp-avatar', imports: [AXAvatarModule, AXDecoratorModule, AXImageModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-avatar [size]=\"size()\" class=\"ax-cursor-pointer ax-relative\" [title]=\"title()\"\n  class=\"ax-{{ avatarColor() }}-lightest ax-border \">\n  @if (hasAvatar()) {\n  <ax-image\n    (onError)=\"onImageError($event)\"\n    (onLoad)=\"onImageLoad($event)\"\n    [src]=\"resolvedSrc()\"\n  />\n  } @else {\n  <ax-text>\n    <small class=\"ax-font-semibold\" [style.font-size]=\"size() * 0.35 + 'px'\">{{ avatarText() }}</small>\n  </ax-text>\n  }\n</ax-avatar>\n", styles: [":host ax-text{border-style:none;background-color:transparent;color:unset!important}:host ax-image{position:absolute!important;inset:0;width:100%!important;height:100%!important}:host ax-image img{display:block!important}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], fullName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullName", required: false }] }], fallbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackText", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
 
 const AXP_TASK_BADGE_PROVIDERS = new InjectionToken('AXP_TASK_BADGE_PROVIDERS');
@@ -9226,7 +9226,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class AXPUserAvatarComponent {
     constructor() {
         this.userAvatarService = inject(AXPUserAvatarService);
-        this.destroy$ = new Subject();
         this.userInfo = signal(null, ...(ngDevMode ? [{ debugName: "userInfo" }] : /* istanbul ignore next */ []));
         this.size = input(40, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.userId = input('', ...(ngDevMode ? [{ debugName: "userId" }] : /* istanbul ignore next */ []));
@@ -9240,35 +9239,24 @@ class AXPUserAvatarComponent {
         /** Full display name used for avatar initials and external templates. */
         this.title = computed(() => this.resolveDisplayName(this.userInfo()), ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
         this.isOnline = computed(() => this.userInfo()?.status === 'online', ...(ngDevMode ? [{ debugName: "isOnline" }] : /* istanbul ignore next */ []));
-    }
-    ngOnInit() {
-        this.loadUserData();
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    loadUserData() {
-        // Skip if no username provided
-        if (!this.userId()) {
-            return;
-        }
-        // Subscribe to the user info observable to get real-time updates
-        this.userAvatarService
-            .getUserInfo$(this.userId())
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((userData) => {
-            this.userInfo.set(userData);
-            // This is a placeholder - replace with your actual avatar URL logic
-            this.generateAvatarSrc();
+        effect((onCleanup) => {
+            const userId = this.userId()?.trim();
+            if (!userId) {
+                this.userInfo.set(null);
+                this.src.set('');
+                return;
+            }
+            const sub = this.userAvatarService.getUserInfo$(userId).subscribe((userData) => {
+                this.userInfo.set(userData);
+                this.generateAvatarSrc();
+            });
+            onCleanup(() => sub.unsubscribe());
         });
     }
     /**
      * 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) {
             this.src.set(this.userInfo()?.avatarUrl);
             return;
@@ -9291,7 +9279,7 @@ class AXPUserAvatarComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPUserAvatarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-user-avatar', imports: [AXPAvatarComponent, AXBadgeModule, AXSkeletonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [], template: "<axp-avatar [size]=\"size()\" [src]=\"src()\" [fullName]=\"title()\" />\n" }]
-        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userId: [{ type: i0.Input, args: [{ isSignal: true, alias: "userId", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userId: [{ type: i0.Input, args: [{ isSignal: true, alias: "userId", required: false }] }] } });
 
 //#region ---- Imports ----
 //#endregion