@agorapulse/ui-components 15.1.1 → 15.1.3

package/fesm2020/agorapulse-ui-components-avatar.mjs

@@ -1,153 +1,213 @@
 import * as i1 from '@agorapulse/ui-symbol';
-import { apSingleNeutral, apFacebookOfficial, apTwitterOfficial, apYoutubeOfficial, apTiktokOfficial, apLinkedinOfficial, apGoogleMyBusinessOfficial, apPinterestOfficial, SymbolComponent } from '@agorapulse/ui-symbol';
-import { NgIf, SlicePipe, NgForOf } from '@angular/common';
+import { apSingleNeutral, apShowTheaterMaskHappy, apFacebookOfficial, apTwitterOfficial, apLinkedinOfficial, apYoutubeOfficial, apTiktokOfficial, apGoogleMyBusinessOfficial, apPinterestOfficial, SymbolComponent } from '@agorapulse/ui-symbol';
+import { NgIf, NgOptimizedImage, NgForOf } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostBinding } from '@angular/core';
+import { BehaviorSubject, Observable, of, map, combineLatest } from 'rxjs';
+import * as i2 from '@ngrx/component';
+import { LetModule } from '@ngrx/component';
 
-const SizeMap = {
-    'large': '64',
-    'large-sm': '56',
-    'normal': '48',
-    'medium': '40',
-    'medium-sm': '36',
-    'small': '32',
-    'mini': '24',
-    'mini-sm': '16',
-    'micro': '12',
-    'facebook': '40',
-    'linkedin': '40',
-    'instagram': '40',
-    'youtube': '40',
-    'google': '40',
-    'tiktok': '56',
-    'twitter': '48'
+const onlineIconSizeByAvatarSize = {
+    56: 16,
+    48: 12,
+    40: 12,
+    36: 8,
+    32: 8,
+    24: 6,
+    16: 6,
 };
-const SizeMapNumbers = {
-    large: 64,
-    'large-sm': 56,
-    normal: 48,
-    medium: 40,
-    'medium-sm': 36,
-    small: 32,
-    mini: 24,
-    'mini-sm': 16,
-    micro: 12,
-    facebook: 40,
-    linkedin: 40,
-    instagram: 40,
-    youtube: 40,
-    google: 40,
-    tiktok: 56,
-    twitter: 48,
+const symbolSizeByAvatarSize = {
+    56: 28,
+    48: 24,
+    40: 20,
+    36: 18,
+    32: 16,
+    24: 12,
+    16: 8,
 };
-const SymbolSizeByAvatarSize = {
-    large: 'small',
-    normal: 'mini',
-    medium: 'mini',
-    'medium-sm': 'mini-sm',
-    small: 'micro',
-    mini: 'micro-sm',
-    'mini-sm': 'pico',
-    micro: 'pico',
+const networkSizeByAvatarSize = {
+    56: 16,
+    48: 16,
+    40: 16,
+    36: 16,
+    32: 12,
+    24: 12,
+    16: 8,
+};
+const initialSizeByAvatarSize = {
+    56: 28,
+    48: 24,
+    40: 22,
+    36: 18,
+    32: 18,
+    24: 14,
+    16: 10,
 };
 class AvatarComponent {
-    constructor(symbolRegistry) {
+    set alternativeText(alternativeText) {
+        this.alternativeText$.next(alternativeText);
+    }
+    set anonymous(anonymous) {
+        this.anonymous$.next(anonymous);
+    }
+    set username(username) {
+        this.username$.next(username);
+    }
+    set network(network) {
+        this.network$.next(network);
+        this.elementRef.nativeElement.style.setProperty('--ap-avatar-network-size', `${networkSizeByAvatarSize[this.size$.value]}px`);
+    }
+    set online(online) {
+        this.online$.next(online);
+    }
+    set profilePicture(profilePicture) {
+        this.profilePicture$.next(profilePicture);
+        this.imageError$.next(false);
+    }
+    set showInitials(showInitials) {
+        this.showInitials$.next(showInitials);
+    }
+    set rounded(rounded) {
+        this.roundedAvatar = rounded;
+        this.rounded$.next(rounded);
+    }
+    set size(size) {
+        this.size$.next(size);
+        this.elementRef.nativeElement.style.setProperty('--ap-avatar-size', `${size}px`);
+        this.elementRef.nativeElement.style.setProperty('--ap-avatar-symbol-size', `${symbolSizeByAvatarSize[size]}px`);
+        this.elementRef.nativeElement.style.setProperty('--ap-avatar-online-icon-size', `${onlineIconSizeByAvatarSize[size]}px`);
+    }
+    constructor(symbolRegistry, elementRef) {
         this.symbolRegistry = symbolRegistry;
-        this.border = '';
-        this.defaultImageEnabled = true; // DEPRECATED default avatar if we don't have username
-        this.fallbackSymbolId = 'single-neutral';
-        this.fallbackSymbolSize = 'mini';
-        this.loading = 'auto';
-        this.outerBorderHidden = false;
-        this.size = 'medium';
-        this.rounded = false;
-        this.online = false;
-        this.sizeMap = SizeMap;
-        this.sizeMapNumbers = SizeMapNumbers;
-        this.symbolSizeByAvatarSize = SymbolSizeByAvatarSize;
+        this.elementRef = elementRef;
+        this.networkSymbolByNetwork = {
+            facebook: 'facebook-official',
+            instagram: 'instagram-official',
+            twitter: 'twitter-official',
+            linkedin: 'linkedin-official',
+            tiktok: 'tiktok-official',
+            youtube: 'youtube-official',
+            pinterest: 'pinterest-official',
+            googleMyBusiness: 'google-my-business-official',
+        };
+        this.size$ = new BehaviorSubject(40);
+        this.profilePicture$ = new BehaviorSubject('');
+        this.network$ = new BehaviorSubject('facebook');
+        this.alternativeText$ = new BehaviorSubject('');
+        this.anonymous$ = new BehaviorSubject(false);
+        this.username$ = new BehaviorSubject('');
+        this.online$ = new BehaviorSubject(false);
+        this.showInitials$ = new BehaviorSubject(false);
+        this.rounded$ = new BehaviorSubject(false);
+        this.displayProfilePicture$ = new Observable();
+        this.displaySingleNeutralSvg$ = new Observable();
+        this.displayInitials$ = new Observable();
+        this.displayAnonymous$ = new Observable();
+        this.displayNetwork$ = new Observable();
+        this.displayOnline$ = new Observable();
+        this.imageError$ = new BehaviorSubject(false);
+        this.initials$ = new Observable();
+        this.initialsAvailable$ = of(false);
         this.symbolRegistry.registerSymbols([
             apSingleNeutral,
+            apShowTheaterMaskHappy,
             apFacebookOfficial,
             apTwitterOfficial,
+            apLinkedinOfficial,
             apYoutubeOfficial,
             apTiktokOfficial,
-            apLinkedinOfficial,
             apGoogleMyBusinessOfficial,
-            apPinterestOfficial
+            apPinterestOfficial,
         ]);
+        this.elementRef.nativeElement.style.setProperty('--ap-avatar-size', `40px`);
+        this.elementRef.nativeElement.style.setProperty('--ap-avatar-symbol-size', `${symbolSizeByAvatarSize[this.size$.value]}px`);
     }
-    ngOnChanges(changes) {
-        if (changes.social?.currentValue || changes.size?.currentValue) {
-            if (this.social) {
-                this.socialLogo = this.social === 'google' ? 'google-my-business-official' : `${this.social}-official`;
-            }
-            if (this.social === 'google') {
-                switch (this.size) {
-                    case 'medium-sm':
-                        this.socialSize = '14';
-                        break;
-                    case 'mini':
-                        this.socialSize = '15';
-                        break;
-                    case 'mini-sm':
-                        this.socialSize = '10';
-                        break;
-                    default:
-                        this.socialSize = '19';
-                }
+    ngOnInit() {
+        this.initialsAvailable$ = this.username$.pipe(map(username => {
+            return !!username;
+        }));
+        this.displayProfilePicture$ = combineLatest([
+            this.profilePicture$,
+            this.anonymous$,
+            this.imageError$,
+            this.showInitials$,
+        ]).pipe(map(([profilePicture, anonymous, imageError]) => {
+            return !!profilePicture && !anonymous && !imageError;
+        }));
+        this.displayInitials$ = combineLatest([
+            this.showInitials$,
+            this.anonymous$,
+            this.initialsAvailable$,
+            this.displayProfilePicture$,
+        ]).pipe(map(([showInitials, anonymous, initialsAvailable, displayProfilePicture]) => {
+            return showInitials && !anonymous && initialsAvailable && !displayProfilePicture;
+        }));
+        this.displaySingleNeutralSvg$ = combineLatest([
+            this.profilePicture$,
+            this.imageError$,
+            this.initialsAvailable$,
+            this.showInitials$,
+            this.anonymous$,
+            this.displayInitials$,
+            this.displayProfilePicture$,
+        ]).pipe(map(([profilePicture, imageError, initialsAvailable, showInitials, anonymous, displayInitials, displayProfilePicture,]) => {
+            return ((!profilePicture || imageError || !initialsAvailable || (initialsAvailable && !showInitials)) &&
+                !anonymous &&
+                !displayInitials &&
+                !displayProfilePicture);
+        }));
+        this.displayAnonymous$ = combineLatest([this.anonymous$, this.rounded$]).pipe(map(([anonymous, rounded]) => {
+            return anonymous && rounded;
+        }));
+        this.displayOnline$ = combineLatest([this.online$, this.rounded$]).pipe(map(([online, rounded]) => {
+            return online && rounded;
+        }));
+        this.displayNetwork$ = combineLatest([this.network$, this.rounded$]).pipe(map(([network, rounded]) => {
+            return !!network && rounded;
+        }));
+        this.initials$ = combineLatest([this.displayInitials$, this.username$]).pipe(map(([displayInitials, username]) => {
+            if (displayInitials && !username) {
+                return '';
             }
-            else {
-                switch (this.size) {
-                    case 'medium-sm':
-                    case 'mini':
-                        this.socialSize = '12';
-                        break;
-                    case 'mini-sm':
-                        this.socialSize = '8';
-                        break;
-                    default:
-                        this.socialSize = '16';
-                }
+            this.elementRef.nativeElement.style.setProperty('--ap-avatar-initials-size', `${initialSizeByAvatarSize[this.size$.value]}px`);
+            const names = username.split(' ');
+            if (names.length === 1) {
+                return `${names[0].charAt(0).toUpperCase()}${names[0].charAt(1).toUpperCase()}`;
             }
-        }
-        if (changes.defaultImageEnabled && changes.defaultImageEnabled.currentValue) {
-            console.warn("'defaultImageEnabled' attribute is deprecated.");
-        }
+            return `${names[0].charAt(0).toUpperCase()}${names[names.length - 1].charAt(0).toUpperCase()}`;
+        }));
     }
-    onError() {
-        this.imageUrl = null;
+    onImageError() {
+        this.imageError$.next(true);
     }
 }
-AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: AvatarComponent, deps: [{ token: i1.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
-AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: AvatarComponent, isStandalone: true, selector: "ap-avatar", inputs: { border: "border", defaultImageEnabled: "defaultImageEnabled", fallbackSymbolId: "fallbackSymbolId", fallbackSymbolSize: "fallbackSymbolSize", imageUrl: "imageUrl", loading: "loading", outerBorderHidden: "outerBorderHidden", size: "size", social: "social", username: "username", rounded: "rounded", online: "online", imageUrls: "imageUrls" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ap-avatar-container {{size}}\"\n    [style.width]=\"imageUrls ? (imageUrls.length < 4 ? sizeMapNumbers[size] * (imageUrls.length / 3 + 1) + 'px' : sizeMapNumbers[size] * 1.5 + 'px') : sizeMapNumbers[size] + 'px'\">\n    <!-- simple avatar -->\n    <div *ngIf=\"imageUrl || imageUrls; else noPicture\">\n        <img *ngIf=\"imageUrl && !imageUrls\"\n             class=\"ap-avatar {{size}}\"\n             [class.outer-border]=\"!outerBorderHidden\"\n             [class.rounded]=\"rounded\"\n             [attr.border]=\"border\"\n             [attr.loading]=\"loading\"\n             [attr.height]=\"sizeMap[size]\"\n             [attr.width]=\"sizeMap[size]\"\n             [src]=\"imageUrl\"\n             (error)=\"onError()\"/>\n        <div *ngIf=\"imageUrls && !imageUrl\"\n            class=\"multi-avatar-container\">\n            <div *ngFor=\"let url of imageUrls | slice: 0:3; let i = index\">\n                <img *ngIf=\"url\" class=\"ap-avatar {{size}} multi\"\n                     [class.outer-border]=\"!outerBorderHidden\"\n                     [class.rounded]=\"rounded\"\n                     [style.z-index]=\"i\"\n                     [style.left]=\"2 * i * sizeMapNumbers[size] / 3 + 'px'\"\n                     [attr.border]=\"border\"\n                     [attr.loading]=\"loading\"\n                     [attr.height]=\"sizeMap[size]\"\n                     [attr.width]=\"sizeMap[size]\"\n                     [src]=\"url\"\n                     (error)=\"onError()\"/>\n                <span *ngIf=\"!url\"\n                    class=\"ap-avatar ap-avatar-username {{size}} multi\"\n                    [style.z-index]=\"i\"\n                    [style.left]=\"2 * i * sizeMapNumbers[size] / 3 + 'px'\"\n                    [class.outer-border]=\"!outerBorderHidden\"\n                    [class.rounded]=\"rounded\"\n                    [attr.border]=\"border\">\n                    <ng-container *ngIf=\"username; else symbol\">\n                        {{username.charAt(0).toUpperCase()}}\n                    </ng-container>\n                    <ng-template #symbol>\n                        <ap-symbol\n                            [size]=\"fallbackSymbolSize\"\n                            [symbolId]=\"fallbackSymbolId\">\n                        </ap-symbol>\n                    </ng-template>\n                </span>\n            </div>\n        </div>\n    </div>\n    <!-- image with first letter of screen name -->\n    <ng-template #noPicture>\n        <span\n              class=\"ap-avatar ap-avatar-username {{size}}\"\n              [class.outer-border]=\"!outerBorderHidden\"\n              [class.rounded]=\"rounded\"\n              [attr.border]=\"border\">\n            <ng-container *ngIf=\"username; else symbol\">\n                {{username.charAt(0).toUpperCase()}}\n            </ng-container>\n            <ng-template #symbol>\n                <ap-symbol\n                    [size]=\"symbolSizeByAvatarSize[size] ?? fallbackSymbolSize\"\n                    [symbolId]=\"fallbackSymbolId\">\n                </ap-symbol>\n            </ng-template>\n        </span>\n    </ng-template>\n\n    <div  *ngIf=\"social\"\n          class=\"social-symbol-wrapper {{social}} {{size}}\">\n        <ap-symbol [symbolId]=\"socialLogo\"\n                   [size]=\"socialSize\">\n        </ap-symbol>\n    </div>\n    <div *ngIf=\"online\" class=\"online-indicator {{size}}\"></div>\n\n</div>\n<label>\n    <ng-content></ng-content>\n</label>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}:host{align-items:center;display:inline-flex}label{margin-left:8px}label:empty{display:none}.ap-avatar-container,.ap-avatar-container .multi-avatar-container{position:relative}.ap-avatar-container .multi-avatar-container .multi{position:absolute}.ap-avatar-container.large{height:64px;width:64px}.ap-avatar-container.large-normal{min-height:56px;min-width:56px;height:56px;width:56px}.ap-avatar-container.normal{height:48px;width:48px}.ap-avatar-container.medium{height:40px;width:40px}.ap-avatar-container.medium-sm{height:36px;width:36px}.ap-avatar-container.small{height:32px;width:32px}.ap-avatar-container.mini{height:24px;width:24px}.ap-avatar-container.mini-sm{height:16px;width:16px}.ap-avatar-container.micro{height:12px;width:12px}.ap-avatar-container .ap-avatar.outer-border{box-shadow:0 0 0 1.5px #eaecef}.ap-avatar-container .ap-avatar.large{height:64px;width:64px}.ap-avatar-container .ap-avatar.large-normal{min-height:56px;min-width:56px;height:56px;width:56px}.ap-avatar-container .ap-avatar.normal{height:48px;width:48px}.ap-avatar-container .ap-avatar.medium{height:40px;width:40px}.ap-avatar-container .ap-avatar.medium-sm{height:36px;width:36px}.ap-avatar-container .ap-avatar.small{height:32px;width:32px}.ap-avatar-container .ap-avatar.mini{height:24px;width:24px}.ap-avatar-container .ap-avatar.mini-sm{height:16px;width:16px}.ap-avatar-container .ap-avatar.micro{height:12px;width:12px}.ap-avatar-container .ap-avatar.facebook,.ap-avatar-container .ap-avatar.linkedin,.ap-avatar-container .ap-avatar.youtube,.ap-avatar-container .ap-avatar.instagram,.ap-avatar-container .ap-avatar.google{height:40px;width:40px}.ap-avatar-container .ap-avatar.twitter{height:48px;width:48px}.ap-avatar-container .ap-avatar.tiktok{height:56px;width:56px}.ap-avatar-container .ap-avatar:not(.rounded){border-radius:13%}.ap-avatar-container .ap-avatar-username{display:inline-flex;align-items:center;justify-content:center;background-color:#aeb5c1;color:#fff;font-size:24px}.ap-avatar-container .ap-avatar-username.large{font-size:28px}.ap-avatar-container .ap-avatar-username.medium{font-size:18px}.ap-avatar-container .ap-avatar-username.medium-sm{font-size:16px}.ap-avatar-container .ap-avatar-username.small{font-size:14px}.ap-avatar-container .ap-avatar-username.mini{font-size:12px}.ap-avatar-container .ap-avatar-username.mini-sm{font-size:1px}.ap-avatar-container .social-symbol-wrapper{position:absolute;right:0;bottom:0;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1.5px #eaecef}.ap-avatar-container .social-symbol-wrapper.facebook,.ap-avatar-container .social-symbol-wrapper.twitter,.ap-avatar-container .social-symbol-wrapper.youtube,.ap-avatar-container .social-symbol-wrapper.tiktok,.ap-avatar-container .social-symbol-wrapper,.ap-avatar-container .social-symbol-wrapper pinterest{border-radius:100%}.ap-avatar-container .social-symbol-wrapper.instagram{border-radius:28%}.ap-avatar-container .social-symbol-wrapper.linkedin{border-radius:6%}.ap-avatar-container .social-symbol-wrapper.google{box-shadow:none;right:-3px;bottom:-3px}.ap-avatar-container .social-symbol-wrapper.google ap-symbol{border-radius:0;background-color:transparent}.ap-avatar-container .social-symbol-wrapper ap-symbol{border-radius:100%;background-color:#fff}.ap-avatar-container .social-symbol-wrapper ap-symbol ::ng-deep svg{display:block}.ap-avatar-container .online-indicator{box-shadow:none;background:#45B854;right:0;bottom:0;position:absolute}.ap-avatar-container .online-indicator.large{outline:5px solid white;border-radius:16px;min-height:16px;min-width:16px}.ap-avatar-container .online-indicator.normal{outline:4px solid white;border-radius:12px;min-height:12px;min-width:12px}.ap-avatar-container .online-indicator.medium,.ap-avatar-container .online-indicator.medium-sm,.ap-avatar-container .online-indicator.small{outline:3px solid white;border-radius:8px;min-height:8px;min-width:8px}.ap-avatar-container .online-indicator.mini,.ap-avatar-container .online-indicator.mini-sm{outline:2px solid white;border-radius:6px;min-height:6px;min-width:6px}.ap-avatar-container .online-indicator.micro{outline:1px solid white;border-radius:4px;min-height:4px;min-width:4px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "component", type: SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: AvatarComponent, deps: [{ token: i1.SymbolRegistry }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: AvatarComponent, isStandalone: true, selector: "ap-avatar", inputs: { alternativeText: "alternativeText", anonymous: "anonymous", username: "username", network: "network", online: "online", profilePicture: "profilePicture", showInitials: "showInitials", alt: "alt", rounded: "rounded", size: "size" }, host: { properties: { "class.rounded-avatar": "this.roundedAvatar" } }, ngImport: i0, template: "<ng-container\n    *ngrxLet=\"{\n        displayProfilePicture: displayProfilePicture$,\n        displaySingleNeutralSvg: displaySingleNeutralSvg$,\n        displayInitials: displayInitials$,\n        displayAnonymous: displayAnonymous$,\n        displayOnline: displayOnline$,\n        displayNetwork: displayNetwork$,\n        initials: initials$,\n        profilePicture: profilePicture$,\n        size: size$,\n        network: network$\n    } as avatarViewModel\">\n    <img\n        *ngIf=\"avatarViewModel.displayProfilePicture\"\n        [ngSrc]=\"avatarViewModel.profilePicture\"\n        [width]=\"avatarViewModel.size\"\n        [height]=\"avatarViewModel.size\"\n        [alt]=\"alt\"\n        (error)=\"onImageError()\" />\n    <div *ngIf=\"avatarViewModel.displaySingleNeutralSvg\" class=\"no-profile-picture\">\n        <ap-symbol symbolId=\"single-neutral\"></ap-symbol>\n    </div>\n\n    <div *ngIf=\"avatarViewModel.displayAnonymous\" class=\"anonymous\">\n        <ap-symbol symbolId=\"show-theater-mask-happy\"></ap-symbol>\n    </div>\n    <div *ngIf=\"avatarViewModel.displayOnline\" class=\"online\"></div>\n    <div\n        *ngIf=\"avatarViewModel.displayNetwork\"\n        class=\"network\"\n        [class.facebook]=\"avatarViewModel.network === 'facebook'\"\n        [class.linkedin]=\"avatarViewModel.network === 'linkedin'\"\n        [class.twitter]=\"avatarViewModel.network === 'twitter'\"\n        [class.youtube]=\"avatarViewModel.network === 'youtube'\"\n        [class.googleMyBusiness]=\"avatarViewModel.network === 'googleMyBusiness'\"\n        [class.instagram]=\"avatarViewModel.network === 'instagram'\"\n        [class.tiktok]=\"avatarViewModel.network === 'tiktok'\">\n        <ap-symbol [symbolId]=\"networkSymbolByNetwork[avatarViewModel.network]\"></ap-symbol>\n    </div>\n\n    <div *ngIf=\"avatarViewModel.displayInitials\" class=\"initials\">\n        {{ avatarViewModel.initials }}\n    </div>\n</ng-container>\n", styles: ["ap-avatar{display:flex;justify-content:center;align-items:center;height:var(--ap-avatar-size);min-height:var(--ap-avatar-size);max-height:var(--ap-avatar-size);width:var(--ap-avatar-size);min-width:var(--ap-avatar-size);max-width:var(--ap-avatar-size);border-radius:var(--sys-border-radius-sm);background:var(--ref-color-grey-40);box-sizing:border-box;position:relative}ap-avatar.rounded-avatar{border-radius:100%}ap-avatar.rounded-avatar img,ap-avatar.rounded-avatar .no-profile-picture,ap-avatar.rounded-avatar .anonymous{border-radius:100%}ap-avatar img{overflow:hidden;border-radius:var(--sys-border-radius-sm);border:1px solid var(--ref-color-grey-10);box-sizing:border-box}ap-avatar .no-profile-picture,ap-avatar .anonymous{display:flex;justify-content:center;align-items:center;background:var(--ref-color-grey-40);border-radius:var(--sys-border-radius-sm)}ap-avatar .no-profile-picture ap-symbol,ap-avatar .anonymous ap-symbol{color:var(--ref-color-white);width:var(--ap-avatar-symbol-size);min-width:var(--ap-avatar-symbol-size);max-width:var(--ap-avatar-symbol-size);height:var(--ap-avatar-symbol-size);min-height:var(--ap-avatar-symbol-size);max-height:var(--ap-avatar-symbol-size)}ap-avatar .online{position:absolute;height:var(--ap-avatar-online-icon-size);min-height:var(--ap-avatar-online-icon-size);max-height:var(--ap-avatar-online-icon-size);width:var(--ap-avatar-online-icon-size);min-width:var(--ap-avatar-online-icon-size);max-width:var(--ap-avatar-online-icon-size);border-radius:100%;overflow:hidden;background:var(--ref-color-grey-40);box-sizing:border-box;border:1px solid var(--ref-color-white);bottom:0;right:0;background:var(--ref-color-green-100)}ap-avatar .initials{font-weight:var(--ref-font-weight-bold);font-size:var(--ap-avatar-initials-size);line-height:var(--ref-font-line-height-xl);font-family:Averta;color:var(--ref-color-white)}ap-avatar .network{position:absolute;height:var(--ap-avatar-online-icon-size);min-height:var(--ap-avatar-network-size);max-height:var(--ap-avatar-network-size);width:var(--ap-avatar-network-size);min-width:var(--ap-avatar-network-size);max-width:var(--ap-avatar-network-size);overflow:hidden;box-sizing:border-box;bottom:0;right:0;box-shadow:0 0 0 1px var(--ref-color-grey-20)}ap-avatar .network.facebook,ap-avatar .network.twitter,ap-avatar .network.youtube,ap-avatar .network.tiktok,ap-avatar .network,ap-avatar .network pinterest{border-radius:100%}ap-avatar .network.instagram{border-radius:28%}ap-avatar .network.linkedin{border-radius:6%}ap-avatar .network.googleMyBusiness{box-shadow:none}ap-avatar .network ap-symbol img{border-radius:0;border:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "disableOptimizedSrcset", "fill", "src", "srcset"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { kind: "ngmodule", type: LetModule }, { kind: "directive", type: i2.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-avatar', standalone: true, imports: [NgIf, SlicePipe, SymbolComponent, NgForOf], template: "<div class=\"ap-avatar-container {{size}}\"\n    [style.width]=\"imageUrls ? (imageUrls.length < 4 ? sizeMapNumbers[size] * (imageUrls.length / 3 + 1) + 'px' : sizeMapNumbers[size] * 1.5 + 'px') : sizeMapNumbers[size] + 'px'\">\n    <!-- simple avatar -->\n    <div *ngIf=\"imageUrl || imageUrls; else noPicture\">\n        <img *ngIf=\"imageUrl && !imageUrls\"\n             class=\"ap-avatar {{size}}\"\n             [class.outer-border]=\"!outerBorderHidden\"\n             [class.rounded]=\"rounded\"\n             [attr.border]=\"border\"\n             [attr.loading]=\"loading\"\n             [attr.height]=\"sizeMap[size]\"\n             [attr.width]=\"sizeMap[size]\"\n             [src]=\"imageUrl\"\n             (error)=\"onError()\"/>\n        <div *ngIf=\"imageUrls && !imageUrl\"\n            class=\"multi-avatar-container\">\n            <div *ngFor=\"let url of imageUrls | slice: 0:3; let i = index\">\n                <img *ngIf=\"url\" class=\"ap-avatar {{size}} multi\"\n                     [class.outer-border]=\"!outerBorderHidden\"\n                     [class.rounded]=\"rounded\"\n                     [style.z-index]=\"i\"\n                     [style.left]=\"2 * i * sizeMapNumbers[size] / 3 + 'px'\"\n                     [attr.border]=\"border\"\n                     [attr.loading]=\"loading\"\n                     [attr.height]=\"sizeMap[size]\"\n                     [attr.width]=\"sizeMap[size]\"\n                     [src]=\"url\"\n                     (error)=\"onError()\"/>\n                <span *ngIf=\"!url\"\n                    class=\"ap-avatar ap-avatar-username {{size}} multi\"\n                    [style.z-index]=\"i\"\n                    [style.left]=\"2 * i * sizeMapNumbers[size] / 3 + 'px'\"\n                    [class.outer-border]=\"!outerBorderHidden\"\n                    [class.rounded]=\"rounded\"\n                    [attr.border]=\"border\">\n                    <ng-container *ngIf=\"username; else symbol\">\n                        {{username.charAt(0).toUpperCase()}}\n                    </ng-container>\n                    <ng-template #symbol>\n                        <ap-symbol\n                            [size]=\"fallbackSymbolSize\"\n                            [symbolId]=\"fallbackSymbolId\">\n                        </ap-symbol>\n                    </ng-template>\n                </span>\n            </div>\n        </div>\n    </div>\n    <!-- image with first letter of screen name -->\n    <ng-template #noPicture>\n        <span\n              class=\"ap-avatar ap-avatar-username {{size}}\"\n              [class.outer-border]=\"!outerBorderHidden\"\n              [class.rounded]=\"rounded\"\n              [attr.border]=\"border\">\n            <ng-container *ngIf=\"username; else symbol\">\n                {{username.charAt(0).toUpperCase()}}\n            </ng-container>\n            <ng-template #symbol>\n                <ap-symbol\n                    [size]=\"symbolSizeByAvatarSize[size] ?? fallbackSymbolSize\"\n                    [symbolId]=\"fallbackSymbolId\">\n                </ap-symbol>\n            </ng-template>\n        </span>\n    </ng-template>\n\n    <div  *ngIf=\"social\"\n          class=\"social-symbol-wrapper {{social}} {{size}}\">\n        <ap-symbol [symbolId]=\"socialLogo\"\n                   [size]=\"socialSize\">\n        </ap-symbol>\n    </div>\n    <div *ngIf=\"online\" class=\"online-indicator {{size}}\"></div>\n\n</div>\n<label>\n    <ng-content></ng-content>\n</label>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}:host{align-items:center;display:inline-flex}label{margin-left:8px}label:empty{display:none}.ap-avatar-container,.ap-avatar-container .multi-avatar-container{position:relative}.ap-avatar-container .multi-avatar-container .multi{position:absolute}.ap-avatar-container.large{height:64px;width:64px}.ap-avatar-container.large-normal{min-height:56px;min-width:56px;height:56px;width:56px}.ap-avatar-container.normal{height:48px;width:48px}.ap-avatar-container.medium{height:40px;width:40px}.ap-avatar-container.medium-sm{height:36px;width:36px}.ap-avatar-container.small{height:32px;width:32px}.ap-avatar-container.mini{height:24px;width:24px}.ap-avatar-container.mini-sm{height:16px;width:16px}.ap-avatar-container.micro{height:12px;width:12px}.ap-avatar-container .ap-avatar.outer-border{box-shadow:0 0 0 1.5px #eaecef}.ap-avatar-container .ap-avatar.large{height:64px;width:64px}.ap-avatar-container .ap-avatar.large-normal{min-height:56px;min-width:56px;height:56px;width:56px}.ap-avatar-container .ap-avatar.normal{height:48px;width:48px}.ap-avatar-container .ap-avatar.medium{height:40px;width:40px}.ap-avatar-container .ap-avatar.medium-sm{height:36px;width:36px}.ap-avatar-container .ap-avatar.small{height:32px;width:32px}.ap-avatar-container .ap-avatar.mini{height:24px;width:24px}.ap-avatar-container .ap-avatar.mini-sm{height:16px;width:16px}.ap-avatar-container .ap-avatar.micro{height:12px;width:12px}.ap-avatar-container .ap-avatar.facebook,.ap-avatar-container .ap-avatar.linkedin,.ap-avatar-container .ap-avatar.youtube,.ap-avatar-container .ap-avatar.instagram,.ap-avatar-container .ap-avatar.google{height:40px;width:40px}.ap-avatar-container .ap-avatar.twitter{height:48px;width:48px}.ap-avatar-container .ap-avatar.tiktok{height:56px;width:56px}.ap-avatar-container .ap-avatar:not(.rounded){border-radius:13%}.ap-avatar-container .ap-avatar-username{display:inline-flex;align-items:center;justify-content:center;background-color:#aeb5c1;color:#fff;font-size:24px}.ap-avatar-container .ap-avatar-username.large{font-size:28px}.ap-avatar-container .ap-avatar-username.medium{font-size:18px}.ap-avatar-container .ap-avatar-username.medium-sm{font-size:16px}.ap-avatar-container .ap-avatar-username.small{font-size:14px}.ap-avatar-container .ap-avatar-username.mini{font-size:12px}.ap-avatar-container .ap-avatar-username.mini-sm{font-size:1px}.ap-avatar-container .social-symbol-wrapper{position:absolute;right:0;bottom:0;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1.5px #eaecef}.ap-avatar-container .social-symbol-wrapper.facebook,.ap-avatar-container .social-symbol-wrapper.twitter,.ap-avatar-container .social-symbol-wrapper.youtube,.ap-avatar-container .social-symbol-wrapper.tiktok,.ap-avatar-container .social-symbol-wrapper,.ap-avatar-container .social-symbol-wrapper pinterest{border-radius:100%}.ap-avatar-container .social-symbol-wrapper.instagram{border-radius:28%}.ap-avatar-container .social-symbol-wrapper.linkedin{border-radius:6%}.ap-avatar-container .social-symbol-wrapper.google{box-shadow:none;right:-3px;bottom:-3px}.ap-avatar-container .social-symbol-wrapper.google ap-symbol{border-radius:0;background-color:transparent}.ap-avatar-container .social-symbol-wrapper ap-symbol{border-radius:100%;background-color:#fff}.ap-avatar-container .social-symbol-wrapper ap-symbol ::ng-deep svg{display:block}.ap-avatar-container .online-indicator{box-shadow:none;background:#45B854;right:0;bottom:0;position:absolute}.ap-avatar-container .online-indicator.large{outline:5px solid white;border-radius:16px;min-height:16px;min-width:16px}.ap-avatar-container .online-indicator.normal{outline:4px solid white;border-radius:12px;min-height:12px;min-width:12px}.ap-avatar-container .online-indicator.medium,.ap-avatar-container .online-indicator.medium-sm,.ap-avatar-container .online-indicator.small{outline:3px solid white;border-radius:8px;min-height:8px;min-width:8px}.ap-avatar-container .online-indicator.mini,.ap-avatar-container .online-indicator.mini-sm{outline:2px solid white;border-radius:6px;min-height:6px;min-width:6px}.ap-avatar-container .online-indicator.micro{outline:1px solid white;border-radius:4px;min-height:4px;min-width:4px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.SymbolRegistry }]; }, propDecorators: { border: [{
-                type: Input
-            }], defaultImageEnabled: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-avatar', standalone: true, imports: [NgIf, NgForOf, NgOptimizedImage, SymbolComponent, LetModule], encapsulation: ViewEncapsulation.None, template: "<ng-container\n    *ngrxLet=\"{\n        displayProfilePicture: displayProfilePicture$,\n        displaySingleNeutralSvg: displaySingleNeutralSvg$,\n        displayInitials: displayInitials$,\n        displayAnonymous: displayAnonymous$,\n        displayOnline: displayOnline$,\n        displayNetwork: displayNetwork$,\n        initials: initials$,\n        profilePicture: profilePicture$,\n        size: size$,\n        network: network$\n    } as avatarViewModel\">\n    <img\n        *ngIf=\"avatarViewModel.displayProfilePicture\"\n        [ngSrc]=\"avatarViewModel.profilePicture\"\n        [width]=\"avatarViewModel.size\"\n        [height]=\"avatarViewModel.size\"\n        [alt]=\"alt\"\n        (error)=\"onImageError()\" />\n    <div *ngIf=\"avatarViewModel.displaySingleNeutralSvg\" class=\"no-profile-picture\">\n        <ap-symbol symbolId=\"single-neutral\"></ap-symbol>\n    </div>\n\n    <div *ngIf=\"avatarViewModel.displayAnonymous\" class=\"anonymous\">\n        <ap-symbol symbolId=\"show-theater-mask-happy\"></ap-symbol>\n    </div>\n    <div *ngIf=\"avatarViewModel.displayOnline\" class=\"online\"></div>\n    <div\n        *ngIf=\"avatarViewModel.displayNetwork\"\n        class=\"network\"\n        [class.facebook]=\"avatarViewModel.network === 'facebook'\"\n        [class.linkedin]=\"avatarViewModel.network === 'linkedin'\"\n        [class.twitter]=\"avatarViewModel.network === 'twitter'\"\n        [class.youtube]=\"avatarViewModel.network === 'youtube'\"\n        [class.googleMyBusiness]=\"avatarViewModel.network === 'googleMyBusiness'\"\n        [class.instagram]=\"avatarViewModel.network === 'instagram'\"\n        [class.tiktok]=\"avatarViewModel.network === 'tiktok'\">\n        <ap-symbol [symbolId]=\"networkSymbolByNetwork[avatarViewModel.network]\"></ap-symbol>\n    </div>\n\n    <div *ngIf=\"avatarViewModel.displayInitials\" class=\"initials\">\n        {{ avatarViewModel.initials }}\n    </div>\n</ng-container>\n", styles: ["ap-avatar{display:flex;justify-content:center;align-items:center;height:var(--ap-avatar-size);min-height:var(--ap-avatar-size);max-height:var(--ap-avatar-size);width:var(--ap-avatar-size);min-width:var(--ap-avatar-size);max-width:var(--ap-avatar-size);border-radius:var(--sys-border-radius-sm);background:var(--ref-color-grey-40);box-sizing:border-box;position:relative}ap-avatar.rounded-avatar{border-radius:100%}ap-avatar.rounded-avatar img,ap-avatar.rounded-avatar .no-profile-picture,ap-avatar.rounded-avatar .anonymous{border-radius:100%}ap-avatar img{overflow:hidden;border-radius:var(--sys-border-radius-sm);border:1px solid var(--ref-color-grey-10);box-sizing:border-box}ap-avatar .no-profile-picture,ap-avatar .anonymous{display:flex;justify-content:center;align-items:center;background:var(--ref-color-grey-40);border-radius:var(--sys-border-radius-sm)}ap-avatar .no-profile-picture ap-symbol,ap-avatar .anonymous ap-symbol{color:var(--ref-color-white);width:var(--ap-avatar-symbol-size);min-width:var(--ap-avatar-symbol-size);max-width:var(--ap-avatar-symbol-size);height:var(--ap-avatar-symbol-size);min-height:var(--ap-avatar-symbol-size);max-height:var(--ap-avatar-symbol-size)}ap-avatar .online{position:absolute;height:var(--ap-avatar-online-icon-size);min-height:var(--ap-avatar-online-icon-size);max-height:var(--ap-avatar-online-icon-size);width:var(--ap-avatar-online-icon-size);min-width:var(--ap-avatar-online-icon-size);max-width:var(--ap-avatar-online-icon-size);border-radius:100%;overflow:hidden;background:var(--ref-color-grey-40);box-sizing:border-box;border:1px solid var(--ref-color-white);bottom:0;right:0;background:var(--ref-color-green-100)}ap-avatar .initials{font-weight:var(--ref-font-weight-bold);font-size:var(--ap-avatar-initials-size);line-height:var(--ref-font-line-height-xl);font-family:Averta;color:var(--ref-color-white)}ap-avatar .network{position:absolute;height:var(--ap-avatar-online-icon-size);min-height:var(--ap-avatar-network-size);max-height:var(--ap-avatar-network-size);width:var(--ap-avatar-network-size);min-width:var(--ap-avatar-network-size);max-width:var(--ap-avatar-network-size);overflow:hidden;box-sizing:border-box;bottom:0;right:0;box-shadow:0 0 0 1px var(--ref-color-grey-20)}ap-avatar .network.facebook,ap-avatar .network.twitter,ap-avatar .network.youtube,ap-avatar .network.tiktok,ap-avatar .network,ap-avatar .network pinterest{border-radius:100%}ap-avatar .network.instagram{border-radius:28%}ap-avatar .network.linkedin{border-radius:6%}ap-avatar .network.googleMyBusiness{box-shadow:none}ap-avatar .network ap-symbol img{border-radius:0;border:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.SymbolRegistry }, { type: i0.ElementRef }]; }, propDecorators: { alternativeText: [{
                 type: Input
-            }], fallbackSymbolId: [{
+            }], anonymous: [{
                 type: Input
-            }], fallbackSymbolSize: [{
+            }], username: [{
                 type: Input
-            }], imageUrl: [{
+            }], network: [{
                 type: Input
-            }], loading: [{
+            }], online: [{
                 type: Input
-            }], outerBorderHidden: [{
+            }], profilePicture: [{
                 type: Input
-            }], size: [{
+            }], showInitials: [{
                 type: Input
-            }], social: [{
-                type: Input
-            }], username: [{
+            }], alt: [{
                 type: Input
+            }], roundedAvatar: [{
+                type: HostBinding,
+                args: ['class.rounded-avatar']
             }], rounded: [{
                 type: Input
-            }], online: [{
-                type: Input
-            }], imageUrls: [{
+            }], size: [{
                 type: Input
             }] } });
 

package/fesm2020/agorapulse-ui-components-avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"agorapulse-ui-components-avatar.mjs","sources":["../../../libs/ui-components/avatar/src/avatar.component.ts","../../../libs/ui-components/avatar/src/avatar.component.html","../../../libs/ui-components/avatar/src/agorapulse-ui-components-avatar.ts"],"sourcesContent":["import {\n    agorapulseSymbol,\n    apFacebookOfficial,\n    apGoogleMyBusinessOfficial,\n    apLinkedinOfficial,\n    apSingleNeutral,\n    apTiktokOfficial,\n    apTwitterOfficial,\n    apYoutubeOfficial,\n    apPinterestOfficial,\n    SymbolComponent,\n    SymbolRegistry,\n} from '@agorapulse/ui-symbol';\nimport {NgForOf, NgIf, SlicePipe} from '@angular/common';\nimport {ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges} from '@angular/core';\n\nconst SizeMap: {[key: string]: string} = {\n    'large': '64',\n    'large-sm': '56',\n    'normal': '48',\n    'medium': '40',\n    'medium-sm': '36',\n    'small': '32',\n    'mini': '24',\n    'mini-sm': '16',\n    'micro': '12',\n    'facebook': '40',\n    'linkedin': '40',\n    'instagram': '40',\n    'youtube': '40',\n    'google': '40',\n    'tiktok': '56',\n    'twitter': '48'\n};\n\nconst SizeMapNumbers: {[key: string]: number} = {\n    large: 64,\n    'large-sm': 56,\n    normal: 48,\n    medium: 40,\n    'medium-sm': 36,\n    small: 32,\n    mini: 24,\n    'mini-sm': 16,\n    micro: 12,\n    facebook: 40,\n    linkedin: 40,\n    instagram: 40,\n    youtube: 40,\n    google: 40,\n    tiktok: 56,\n    twitter: 48,\n};\n\nconst SymbolSizeByAvatarSize: {[key: string]: string} = {\n    large: 'small',\n    normal: 'mini',\n    medium: 'mini',\n    'medium-sm': 'mini-sm',\n    small: 'micro',\n    mini: 'micro-sm',\n    'mini-sm': 'pico',\n    micro: 'pico',\n};\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-avatar',\n    styleUrls: ['./avatar.component.scss'],\n    standalone: true,\n    imports: [NgIf, SlicePipe, SymbolComponent, NgForOf],\n    templateUrl: './avatar.component.html',\n})\nexport class AvatarComponent implements OnChanges {\n    @Input() border = '';\n    @Input() defaultImageEnabled = true; // DEPRECATED default avatar if we don't have username\n    @Input() fallbackSymbolId: agorapulseSymbol = 'single-neutral';\n    @Input() fallbackSymbolSize: string | 'none' | 'pico' | 'nano' | 'micro' | 'mini' | 'small' | 'medium' | 'normal' | 'large' = 'mini';\n    @Input() imageUrl: string | undefined;\n    @Input() loading: 'auto' | 'lazy' | 'eager' = 'auto';\n    @Input() outerBorderHidden = false;\n    @Input() size:\n        'large' | 'large-normal' | 'large-sm' | 'normal'| 'medium' | 'medium-sm'  | 'small' | 'mini' | 'mini-sm' | 'micro' |\n        'facebook' | 'twitter' | 'linkedin' | 'instagram' | 'youtube' | 'google' = 'medium';\n    @Input() social: 'facebook' | 'instagram' | 'linkedin' | 'tiktok' | 'twitter' | 'youtube' | 'google' | 'pinterest';\n    @Input() username: string; // used to display initials\n    @Input() rounded = false;\n    @Input() online = false;\n    @Input() imageUrls: string[];\n\n    socialSize: string;\n    socialLogo: agorapulseSymbol;\n    sizeMap = SizeMap;\n    sizeMapNumbers = SizeMapNumbers;\n    symbolSizeByAvatarSize = SymbolSizeByAvatarSize;\n\n    constructor(private symbolRegistry: SymbolRegistry) {\n        this.symbolRegistry.registerSymbols([\n            apSingleNeutral,\n            apFacebookOfficial,\n            apTwitterOfficial,\n            apYoutubeOfficial,\n            apTiktokOfficial,\n            apLinkedinOfficial,\n            apGoogleMyBusinessOfficial,\n            apPinterestOfficial\n        ])\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes.social?.currentValue || changes.size?.currentValue) {\n            if (this.social) {\n               this.socialLogo = this.social === 'google' ? 'google-my-business-official' : `${this.social}-official` as agorapulseSymbol;\n            }\n            if (this.social === 'google') {\n                switch (this.size) {\n                    case 'medium-sm':\n                        this.socialSize = '14';\n                        break;\n                    case 'mini':\n                        this.socialSize = '15';\n                        break;\n                    case 'mini-sm':\n                        this.socialSize = '10';\n                        break;\n                    default:\n                        this.socialSize = '19';\n                }\n            } else {\n                switch (this.size) {\n                    case 'medium-sm':\n                    case 'mini':\n                        this.socialSize = '12';\n                        break;\n                    case 'mini-sm':\n                        this.socialSize = '8';\n                        break;\n                    default:\n                        this.socialSize = '16';\n                }\n            }\n        }\n        if (changes.defaultImageEnabled && changes.defaultImageEnabled.currentValue) {\n            console.warn(\"'defaultImageEnabled' attribute is deprecated.\");\n        }\n    }\n\n    onError(): void {\n        this.imageUrl = null;\n    }\n}\n","<div class=\"ap-avatar-container {{size}}\"\n    [style.width]=\"imageUrls ? (imageUrls.length < 4 ? sizeMapNumbers[size] * (imageUrls.length / 3 + 1) + 'px' : sizeMapNumbers[size] * 1.5 + 'px') : sizeMapNumbers[size] + 'px'\">\n    <!-- simple avatar -->\n    <div *ngIf=\"imageUrl || imageUrls; else noPicture\">\n        <img *ngIf=\"imageUrl && !imageUrls\"\n             class=\"ap-avatar {{size}}\"\n             [class.outer-border]=\"!outerBorderHidden\"\n             [class.rounded]=\"rounded\"\n             [attr.border]=\"border\"\n             [attr.loading]=\"loading\"\n             [attr.height]=\"sizeMap[size]\"\n             [attr.width]=\"sizeMap[size]\"\n             [src]=\"imageUrl\"\n             (error)=\"onError()\"/>\n        <div *ngIf=\"imageUrls && !imageUrl\"\n            class=\"multi-avatar-container\">\n            <div *ngFor=\"let url of imageUrls | slice: 0:3; let i = index\">\n                <img *ngIf=\"url\" class=\"ap-avatar {{size}} multi\"\n                     [class.outer-border]=\"!outerBorderHidden\"\n                     [class.rounded]=\"rounded\"\n                     [style.z-index]=\"i\"\n                     [style.left]=\"2 * i * sizeMapNumbers[size] / 3 + 'px'\"\n                     [attr.border]=\"border\"\n                     [attr.loading]=\"loading\"\n                     [attr.height]=\"sizeMap[size]\"\n                     [attr.width]=\"sizeMap[size]\"\n                     [src]=\"url\"\n                     (error)=\"onError()\"/>\n                <span *ngIf=\"!url\"\n                    class=\"ap-avatar ap-avatar-username {{size}} multi\"\n                    [style.z-index]=\"i\"\n                    [style.left]=\"2 * i * sizeMapNumbers[size] / 3 + 'px'\"\n                    [class.outer-border]=\"!outerBorderHidden\"\n                    [class.rounded]=\"rounded\"\n                    [attr.border]=\"border\">\n                    <ng-container *ngIf=\"username; else symbol\">\n                        {{username.charAt(0).toUpperCase()}}\n                    </ng-container>\n                    <ng-template #symbol>\n                        <ap-symbol\n                            [size]=\"fallbackSymbolSize\"\n                            [symbolId]=\"fallbackSymbolId\">\n                        </ap-symbol>\n                    </ng-template>\n                </span>\n            </div>\n        </div>\n    </div>\n    <!-- image with first letter of screen name -->\n    <ng-template #noPicture>\n        <span\n              class=\"ap-avatar ap-avatar-username {{size}}\"\n              [class.outer-border]=\"!outerBorderHidden\"\n              [class.rounded]=\"rounded\"\n              [attr.border]=\"border\">\n            <ng-container *ngIf=\"username; else symbol\">\n                {{username.charAt(0).toUpperCase()}}\n            </ng-container>\n            <ng-template #symbol>\n                <ap-symbol\n                    [size]=\"symbolSizeByAvatarSize[size] ?? fallbackSymbolSize\"\n                    [symbolId]=\"fallbackSymbolId\">\n                </ap-symbol>\n            </ng-template>\n        </span>\n    </ng-template>\n\n    <div  *ngIf=\"social\"\n          class=\"social-symbol-wrapper {{social}} {{size}}\">\n        <ap-symbol [symbolId]=\"socialLogo\"\n                   [size]=\"socialSize\">\n        </ap-symbol>\n    </div>\n    <div *ngIf=\"online\" class=\"online-indicator {{size}}\"></div>\n\n</div>\n<label>\n    <ng-content></ng-content>\n</label>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"agorapulse-ui-components-avatar.mjs","sources":["../../../libs/ui-components/avatar/src/avatar.component.ts","../../../libs/ui-components/avatar/src/avatar.component.html","../../../libs/ui-components/avatar/src/agorapulse-ui-components-avatar.ts"],"sourcesContent":["import {\n    apFacebookOfficial,\n    apGoogleMyBusinessOfficial,\n    apLinkedinOfficial,\n    apShowTheaterMaskHappy,\n    apSingleNeutral,\n    apTiktokOfficial,\n    apTwitterOfficial,\n    apYoutubeOfficial,\n    apPinterestOfficial,\n    SymbolComponent,\n    SymbolRegistry,\n} from '@agorapulse/ui-symbol';\nimport {NgForOf, NgIf, NgOptimizedImage} from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    HostBinding,\n    Input,\n    OnInit,\n    ViewEncapsulation,\n} from '@angular/core';\nimport {BehaviorSubject, combineLatest, map, Observable, of} from 'rxjs';\nimport {LetModule} from '@ngrx/component';\n\nexport type AvatarSize = 56 | 48 | 40 | 36 | 32 | 24 | 16;\nexport type AvatarNetwork =\n    | 'facebook'\n    | 'instagram'\n    | 'twitter'\n    | 'linkedin'\n    | 'tiktok'\n    | 'youtube'\n    | 'pinterest'\n    | 'googleMyBusiness';\n\nconst onlineIconSizeByAvatarSize: Record<AvatarSize, number> = {\n    56: 16,\n    48: 12,\n    40: 12,\n    36: 8,\n    32: 8,\n    24: 6,\n    16: 6,\n};\n\nconst symbolSizeByAvatarSize: Record<AvatarSize, number> = {\n    56: 28,\n    48: 24,\n    40: 20,\n    36: 18,\n    32: 16,\n    24: 12,\n    16: 8,\n};\n\nconst networkSizeByAvatarSize: Record<AvatarSize, number> = {\n    56: 16,\n    48: 16,\n    40: 16,\n    36: 16,\n    32: 12,\n    24: 12,\n    16: 8,\n};\n\nconst initialSizeByAvatarSize: Record<AvatarSize, number> = {\n    56: 28,\n    48: 24,\n    40: 22,\n    36: 18,\n    32: 18,\n    24: 14,\n    16: 10,\n};\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-avatar',\n    styleUrls: ['./avatar.component.scss'],\n    standalone: true,\n    imports: [NgIf, NgForOf, NgOptimizedImage, SymbolComponent, LetModule],\n    templateUrl: './avatar.component.html',\n    encapsulation: ViewEncapsulation.None,\n})\nexport class AvatarComponent implements OnInit {\n    readonly networkSymbolByNetwork: Record<AvatarNetwork, string> = {\n        facebook: 'facebook-official',\n        instagram: 'instagram-official',\n        twitter: 'twitter-official',\n        linkedin: 'linkedin-official',\n        tiktok: 'tiktok-official',\n        youtube: 'youtube-official',\n        pinterest: 'pinterest-official',\n        googleMyBusiness: 'google-my-business-official',\n    };\n\n    size$: BehaviorSubject<AvatarSize> = new BehaviorSubject<AvatarSize>(40);\n    profilePicture$: BehaviorSubject<string | undefined> = new BehaviorSubject<string>('');\n    network$: BehaviorSubject<AvatarNetwork> = new BehaviorSubject<AvatarNetwork>('facebook');\n\n    private alternativeText$: BehaviorSubject<string> = new BehaviorSubject<string>('');\n    private anonymous$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);\n    private username$: BehaviorSubject<string> = new BehaviorSubject<string>('');\n    private online$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);\n    private showInitials$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);\n    private rounded$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);\n\n    @Input() set alternativeText(alternativeText: string) {\n        this.alternativeText$.next(alternativeText);\n    }\n\n    @Input() set anonymous(anonymous: boolean) {\n        this.anonymous$.next(anonymous);\n    }\n\n    @Input() set username(username: string) {\n        this.username$.next(username);\n    }\n\n    @Input() set network(network: AvatarNetwork) {\n        this.network$.next(network);\n        this.elementRef.nativeElement.style.setProperty(\n            '--ap-avatar-network-size',\n            `${networkSizeByAvatarSize[this.size$.value]}px`\n        );\n    }\n\n    @Input() set online(online: boolean) {\n        this.online$.next(online);\n    }\n\n    @Input() set profilePicture(profilePicture: string | undefined) {\n        this.profilePicture$.next(profilePicture);\n        this.imageError$.next(false);\n    }\n\n    @Input() set showInitials(showInitials: boolean) {\n        this.showInitials$.next(showInitials);\n    }\n    @Input() alt: string;\n\n    @HostBinding('class.rounded-avatar')\n    roundedAvatar: boolean;\n\n    @Input()\n    set rounded(rounded: boolean) {\n        this.roundedAvatar = rounded;\n        this.rounded$.next(rounded);\n    }\n\n    @Input() set size(size: AvatarSize) {\n        this.size$.next(size);\n        this.elementRef.nativeElement.style.setProperty('--ap-avatar-size', `${size}px`);\n        this.elementRef.nativeElement.style.setProperty('--ap-avatar-symbol-size', `${symbolSizeByAvatarSize[size]}px`);\n        this.elementRef.nativeElement.style.setProperty(\n            '--ap-avatar-online-icon-size',\n            `${onlineIconSizeByAvatarSize[size]}px`\n        );\n    }\n\n    displayProfilePicture$: Observable<boolean> = new Observable<boolean>();\n    displaySingleNeutralSvg$: Observable<boolean> = new Observable<boolean>();\n    displayInitials$: Observable<boolean> = new Observable<boolean>();\n    displayAnonymous$: Observable<boolean> = new Observable<boolean>();\n    displayNetwork$: Observable<boolean> = new Observable<boolean>();\n    displayOnline$: Observable<boolean> = new Observable<boolean>();\n    imageError$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);\n    initials$: Observable<string> = new Observable<string>();\n    initialsAvailable$: Observable<boolean> = of(false);\n\n    constructor(private symbolRegistry: SymbolRegistry, private elementRef: ElementRef) {\n        this.symbolRegistry.registerSymbols([\n            apSingleNeutral,\n            apShowTheaterMaskHappy,\n            apFacebookOfficial,\n            apTwitterOfficial,\n            apLinkedinOfficial,\n            apYoutubeOfficial,\n            apTiktokOfficial,\n            apGoogleMyBusinessOfficial,\n            apPinterestOfficial,\n        ]);\n        this.elementRef.nativeElement.style.setProperty('--ap-avatar-size', `40px`);\n        this.elementRef.nativeElement.style.setProperty(\n            '--ap-avatar-symbol-size',\n            `${symbolSizeByAvatarSize[this.size$.value]}px`\n        );\n    }\n\n    ngOnInit(): void {\n        this.initialsAvailable$ = this.username$.pipe(\n            map(username => {\n                return !!username;\n            })\n        );\n\n        this.displayProfilePicture$ = combineLatest([\n            this.profilePicture$,\n            this.anonymous$,\n            this.imageError$,\n            this.showInitials$,\n        ]).pipe(\n            map(([profilePicture, anonymous, imageError]) => {\n                return !!profilePicture && !anonymous && !imageError;\n            })\n        );\n\n        this.displayInitials$ = combineLatest([\n            this.showInitials$,\n            this.anonymous$,\n            this.initialsAvailable$,\n            this.displayProfilePicture$,\n        ]).pipe(\n            map(([showInitials, anonymous, initialsAvailable, displayProfilePicture]) => {\n                return showInitials && !anonymous && initialsAvailable && !displayProfilePicture;\n            })\n        );\n\n        this.displaySingleNeutralSvg$ = combineLatest([\n            this.profilePicture$,\n            this.imageError$,\n            this.initialsAvailable$,\n            this.showInitials$,\n            this.anonymous$,\n            this.displayInitials$,\n            this.displayProfilePicture$,\n        ]).pipe(\n            map(\n                ([\n                    profilePicture,\n                    imageError,\n                    initialsAvailable,\n                    showInitials,\n                    anonymous,\n                    displayInitials,\n                    displayProfilePicture,\n                ]) => {\n                    return (\n                        (!profilePicture || imageError || !initialsAvailable || (initialsAvailable && !showInitials)) &&\n                        !anonymous &&\n                        !displayInitials &&\n                        !displayProfilePicture\n                    );\n                }\n            )\n        );\n\n        this.displayAnonymous$ = combineLatest([this.anonymous$, this.rounded$]).pipe(\n            map(([anonymous, rounded]) => {\n                return anonymous && rounded;\n            })\n        );\n\n        this.displayOnline$ = combineLatest([this.online$, this.rounded$]).pipe(\n            map(([online, rounded]) => {\n                return online && rounded;\n            })\n        );\n\n        this.displayNetwork$ = combineLatest([this.network$, this.rounded$]).pipe(\n            map(([network, rounded]) => {\n                return !!network && rounded;\n            })\n        );\n\n        this.initials$ = combineLatest([this.displayInitials$, this.username$]).pipe(\n            map(([displayInitials, username]) => {\n                if (displayInitials && !username) {\n                    return '';\n                }\n                this.elementRef.nativeElement.style.setProperty(\n                    '--ap-avatar-initials-size',\n                    `${initialSizeByAvatarSize[this.size$.value]}px`\n                );\n                const names = username.split(' ');\n                if (names.length === 1) {\n                    return `${names[0].charAt(0).toUpperCase()}${names[0].charAt(1).toUpperCase()}`;\n                }\n                return `${names[0].charAt(0).toUpperCase()}${names[names.length - 1].charAt(0).toUpperCase()}`;\n            })\n        );\n    }\n\n    onImageError(): void {\n        this.imageError$.next(true);\n    }\n}\n","<ng-container\n    *ngrxLet=\"{\n        displayProfilePicture: displayProfilePicture$,\n        displaySingleNeutralSvg: displaySingleNeutralSvg$,\n        displayInitials: displayInitials$,\n        displayAnonymous: displayAnonymous$,\n        displayOnline: displayOnline$,\n        displayNetwork: displayNetwork$,\n        initials: initials$,\n        profilePicture: profilePicture$,\n        size: size$,\n        network: network$\n    } as avatarViewModel\">\n    <img\n        *ngIf=\"avatarViewModel.displayProfilePicture\"\n        [ngSrc]=\"avatarViewModel.profilePicture\"\n        [width]=\"avatarViewModel.size\"\n        [height]=\"avatarViewModel.size\"\n        [alt]=\"alt\"\n        (error)=\"onImageError()\" />\n    <div *ngIf=\"avatarViewModel.displaySingleNeutralSvg\" class=\"no-profile-picture\">\n        <ap-symbol symbolId=\"single-neutral\"></ap-symbol>\n    </div>\n\n    <div *ngIf=\"avatarViewModel.displayAnonymous\" class=\"anonymous\">\n        <ap-symbol symbolId=\"show-theater-mask-happy\"></ap-symbol>\n    </div>\n    <div *ngIf=\"avatarViewModel.displayOnline\" class=\"online\"></div>\n    <div\n        *ngIf=\"avatarViewModel.displayNetwork\"\n        class=\"network\"\n        [class.facebook]=\"avatarViewModel.network === 'facebook'\"\n        [class.linkedin]=\"avatarViewModel.network === 'linkedin'\"\n        [class.twitter]=\"avatarViewModel.network === 'twitter'\"\n        [class.youtube]=\"avatarViewModel.network === 'youtube'\"\n        [class.googleMyBusiness]=\"avatarViewModel.network === 'googleMyBusiness'\"\n        [class.instagram]=\"avatarViewModel.network === 'instagram'\"\n        [class.tiktok]=\"avatarViewModel.network === 'tiktok'\">\n        <ap-symbol [symbolId]=\"networkSymbolByNetwork[avatarViewModel.network]\"></ap-symbol>\n    </div>\n\n    <div *ngIf=\"avatarViewModel.displayInitials\" class=\"initials\">\n        {{ avatarViewModel.initials }}\n    </div>\n</ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}