@agorapulse/ui-components 18.0.0-beta.9 → 18.0.0

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

@@ -1,13 +1,10 @@
 import * as i1 from '@agorapulse/ui-symbol';
-import { apSingleNeutral, apShowTheaterMaskHappy, apFacebookOfficial, apLinkedinOfficial, apYoutubeOfficial, apTiktokOfficial, apGoogleMyBusinessOfficial, apPinterestOfficial, apNsThreadsLogo, apXOfficial, apWebBlogs, apWebNews, SymbolComponent } from '@agorapulse/ui-symbol';
-import { NgClass, NgOptimizedImage } from '@angular/common';
+import { networkDescription, apSingleNeutral, apShowTheaterMaskHappy, toNetworkSymbol, SymbolComponent, NetworkSymbolPipe } from '@agorapulse/ui-symbol';
+import * as i2 from '@angular/common';
+import { NgOptimizedImage, NgClass, NgStyle } from '@angular/common';
 import * as i0 from '@angular/core';
-import { booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostBinding } from '@angular/core';
-import { LetDirective } from '@ngrx/component';
-import { BehaviorSubject, Observable, of, map, combineLatest } from 'rxjs';
+import { input, booleanAttribute, signal, computed, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
 
-const AVATAR_NETWORK_ARRAY = ['facebook', 'linkedin', 'twitter', 'X', 'youtube', 'googleMyBusiness', 'google', 'instagram', 'threads', 'tiktok', 'pinterest', 'webBlog', 'webNews'];
-const ROUND_BORDER_AVATAR_NETWORK = ['facebook', 'twitter', 'youtube', 'tiktok', 'X', 'pinterest', 'webBlog', 'webNews', 'threads'];
 const onlineIconSizeByAvatarSize = {
     56: 16,
     48: 12,
@@ -44,192 +41,127 @@ const initialSizeByAvatarSize = {
     24: 14,
     16: 10,
 };
+const automaticBigSymbolNetwork = ['youtube'];
 class AvatarComponent {
-    symbolRegistry;
-    elementRef;
-    networkSymbolByNetwork = {
-        facebook: 'facebook-official',
-        instagram: 'instagram-official',
-        X: 'x-official',
-        twitter: 'x-official',
-        linkedin: 'linkedin-official',
-        tiktok: 'tiktok-official',
-        youtube: 'youtube-official',
-        pinterest: 'pinterest-official',
-        threads: 'ns-threads-logo',
-        googleMyBusiness: 'google-my-business-official',
-        google: 'google-my-business-official',
-        webNews: 'web-news',
-        webBlog: 'web-blogs',
-    };
-    size$ = new BehaviorSubject(40);
-    profilePicture$ = new BehaviorSubject('');
-    network$ = new BehaviorSubject(undefined);
-    alternativeText$ = new BehaviorSubject('');
-    anonymous$ = new BehaviorSubject(false);
-    username$ = new BehaviorSubject('');
-    online$ = new BehaviorSubject(false);
-    showInitials$ = new BehaviorSubject(false);
-    rounded$ = new BehaviorSubject(true);
-    set alternativeText(alternativeText) {
-        this.alternativeText$.next(alternativeText);
+    ngStyle;
+    profilePicture = input();
+    alt = input('');
+    network = input(undefined, {
+        transform: (v) => (v !== undefined ? v : v),
+    });
+    size = input(40);
+    username = input();
+    showInitials = input();
+    bigNetwork = input(false);
+    anonymous = input(false);
+    online = input(false);
+    hideBigNetwork = input(false, { alias: 'youtubeAvatarMode' });
+    rounded = input(true, { transform: booleanAttribute });
+    imageError = signal(false);
+    backgroundView = computed(() => this.buildBackgroundView());
+    overlayView = computed(() => this.buildOverlayView());
+    useBigNetwork = computed(() => {
+        return (this.automaticBigSymbolNetwork() || this.bigNetwork()) && this.network();
+    });
+    automaticBigSymbolNetwork = computed(() => {
+        return automaticBigSymbolNetwork.includes(this.network());
+    });
+    showBigNetworkBackground = computed(() => {
+        return !this.anonymous() && this.useBigNetwork() && (!this.validProfilePicture() || !this.hideBigNetwork());
+    });
+    validProfilePicture = computed(() => {
+        return !this.imageError() ? this.profilePicture() : undefined;
+    });
+    constructor(symbolRegistry, ngStyle) {
+        this.ngStyle = ngStyle;
+        const networkSymbols = Object.values(networkDescription) //
+            .flatMap(({ symbol }) => (typeof symbol !== 'string' ? [symbol] : []));
+        symbolRegistry.registerSymbols([...networkSymbols, apSingleNeutral, apShowTheaterMaskHappy]);
+        effect(() => {
+            this.ngStyle.ngStyle = this.buildHostStyle();
+            this.ngStyle.ngDoCheck();
+        });
+        effect(() => {
+            this.profilePicture(); // on change
+            untracked(() => this.imageError.set(false));
+        });
     }
-    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);
-    }
-    alt = '';
-    roundedAvatar = true;
-    set rounded(rounded) {
-        this.roundedAvatar = rounded;
-        this.rounded$.next(rounded);
-    }
-    // TODO - migrate to signal input and remove size input
-    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`);
-    }
-    displayProfilePicture$ = new Observable();
-    displaySingleNeutralSvg$ = new Observable();
-    displayInitials$ = new Observable();
-    displayAnonymous$ = new Observable();
-    displayNetwork$ = new Observable();
-    displayOnline$ = new Observable();
-    imageError$ = new BehaviorSubject(false);
-    initials$ = new Observable();
-    initialsAvailable$ = of(false);
-    socialNetwork$ = of(false);
-    constructor(symbolRegistry, elementRef) {
-        this.symbolRegistry = symbolRegistry;
-        this.elementRef = elementRef;
-        this.symbolRegistry.registerSymbols([
-            apSingleNeutral,
-            apShowTheaterMaskHappy,
-            apFacebookOfficial,
-            apLinkedinOfficial,
-            apYoutubeOfficial,
-            apTiktokOfficial,
-            apGoogleMyBusinessOfficial,
-            apPinterestOfficial,
-            apNsThreadsLogo,
-            apXOfficial,
-            apWebBlogs,
-            apWebNews,
-        ]);
-        this.elementRef.nativeElement.style.setProperty('--ap-avatar-size', `40px`);
-        this.elementRef.nativeElement.style.setProperty('--ap-avatar-symbol-size', `${symbolSizeByAvatarSize[this.size$.value]}px`);
+    onImageError() {
+        this.imageError.set(true);
     }
-    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.socialNetwork$ = this.network$.pipe(map(network => {
-            if (!network) {
-                return false;
+    buildBackgroundView() {
+        let bgView;
+        if (this.showBigNetworkBackground()) {
+            bgView = { mode: 'symbol', symbolId: toNetworkSymbol(this.network()), big: true };
+        }
+        else if (this.anonymous()) {
+            bgView = { mode: 'symbol', symbolId: apShowTheaterMaskHappy.name };
+        }
+        else {
+            const profilePicture = this.validProfilePicture();
+            if (profilePicture) {
+                bgView = {
+                    mode: 'image',
+                    image: {
+                        src: profilePicture,
+                        size: +this.size(),
+                        alt: this.alt(),
+                    },
+                };
             }
-            return ROUND_BORDER_AVATAR_NETWORK.indexOf(network) > -1;
-        }));
-        this.initials$ = combineLatest([this.displayInitials$, this.username$]).pipe(map(([displayInitials, username]) => {
-            if ((displayInitials && !username) || !displayInitials) {
-                return '';
+            else {
+                const initials = this.showInitials();
+                if (initials !== false && initials !== undefined) {
+                    const useDefault = initials === true || initials === '';
+                    const candidateName = (useDefault ? this.username()?.charAt(0) ?? '' : initials.slice(0, 2)).toUpperCase();
+                    bgView = { mode: 'initials', text: candidateName };
+                }
+                else {
+                    bgView = { mode: 'symbol', symbolId: apSingleNeutral.name };
+                }
             }
-            this.elementRef.nativeElement.style.setProperty('--ap-avatar-initials-size', `${initialSizeByAvatarSize[this.size$.value]}px`);
-            const names = username?.split(' ');
-            return `${names[0].charAt(0).toUpperCase()}`;
-        }));
+        }
+        return bgView;
     }
-    onImageError() {
-        this.imageError$.next(true);
+    buildOverlayView() {
+        let ovlView = {};
+        const network = this.network();
+        if (this.online()) {
+            ovlView = { mode: 'online' };
+        }
+        else if (network && !this.showBigNetworkBackground() && !this.automaticBigSymbolNetwork()) {
+            // unit tests in platform repo gives random network values which are unchecked by the compiler
+            const { round } = networkDescription[network] ?? {};
+            ovlView = { mode: 'network', network, round };
+        }
+        return ovlView;
+    }
+    buildHostStyle() {
+        const bgView = this.backgroundView();
+        const ovlMode = this.overlayView().mode;
+        const size = this.size();
+        return {
+            '--ap-avatar-size': `${size}px`,
+            '--ap-avatar-border-radius': this.rounded() ? '100%' : 'var(--sys-border-radius-sm)',
+            '--ap-avatar-initials-size': bgView.mode == 'initials' ? `${initialSizeByAvatarSize[size]}px` : '',
+            '--ap-avatar-symbol-size': bgView.mode == 'symbol' ? `${bgView.big ? size : symbolSizeByAvatarSize[size]}px` : '',
+            '--ap-avatar-network-size': ovlMode == 'network' ? `${networkSizeByAvatarSize[size]}px` : '',
+            '--ap-avatar-online-icon-size': ovlMode == 'online' ? `${onlineIconSizeByAvatarSize[size]}px` : '',
+        };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AvatarComponent, deps: [{ token: i1.SymbolRegistry }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", 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", "rounded", booleanAttribute], 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        socialNetwork: socialNetwork$\n    } as avatarViewModel\">\n    @if (avatarViewModel.displayProfilePicture) {\n        <img\n            [src]=\"avatarViewModel.profilePicture\"\n            [width]=\"avatarViewModel.size\"\n            [height]=\"avatarViewModel.size\"\n            [alt]=\"alt\"\n            (error)=\"onImageError()\" />\n    }\n    @if (avatarViewModel.displaySingleNeutralSvg) {\n        <div class=\"no-profile-picture\">\n            <ap-symbol symbolId=\"single-neutral\" />\n        </div>\n    }\n\n    @if (avatarViewModel.displayAnonymous) {\n        <div class=\"anonymous\">\n            <ap-symbol symbolId=\"show-theater-mask-happy\" />\n        </div>\n    }\n    @if (avatarViewModel.displayOnline) {\n        <div class=\"online\"></div>\n    }\n    @if (avatarViewModel.displayNetwork) {\n        <div\n            class=\"network\"\n            [class.social-network]=\"avatarViewModel.socialNetwork\"\n            [ngClass]=\"avatarViewModel.network\">\n            @if (avatarViewModel.network) {\n                <ap-symbol [symbolId]=\"networkSymbolByNetwork[avatarViewModel.network]\" />\n            }\n        </div>\n    }\n\n    @if (avatarViewModel.displayInitials) {\n        <div class=\"initials\">\n            {{ avatarViewModel.initials }}\n        </div>\n    }\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;box-shadow:0 0 0 1px var(--ref-color-grey-10)}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);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 .anonymous{margin-top:7%}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-10)}ap-avatar .network.social-network{border-radius:100%}ap-avatar .network.instagram{border-radius:28%}ap-avatar .network.youtube{bottom:-1px;border-radius:unset;overflow:visible;box-shadow:none}ap-avatar .network.linkedin{border-radius:6%}ap-avatar .network.googleMyBusiness,ap-avatar .network.google{box-shadow:none;border-radius:unset}ap-avatar .network ap-symbol img{border-radius:0;border:none}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AvatarComponent, deps: [{ token: i1.SymbolRegistry }, { token: i2.NgStyle }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: AvatarComponent, isStandalone: true, selector: "ap-avatar", inputs: { profilePicture: { classPropertyName: "profilePicture", publicName: "profilePicture", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null }, showInitials: { classPropertyName: "showInitials", publicName: "showInitials", isSignal: true, isRequired: false, transformFunction: null }, bigNetwork: { classPropertyName: "bigNetwork", publicName: "bigNetwork", isSignal: true, isRequired: false, transformFunction: null }, anonymous: { classPropertyName: "anonymous", publicName: "anonymous", isSignal: true, isRequired: false, transformFunction: null }, online: { classPropertyName: "online", publicName: "online", isSignal: true, isRequired: false, transformFunction: null }, hideBigNetwork: { classPropertyName: "hideBigNetwork", publicName: "youtubeAvatarMode", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.background-default": "!showBigNetworkBackground()" } }, hostDirectives: [{ directive: i2.NgStyle }], ngImport: i0, template: "<!-- background -->\n@if (backgroundView(); as bgView) {\n    @switch (bgView.mode) {\n        @case ('image') {\n            <img\n                class=\"bg-image\"\n                [ngSrc]=\"bgView.image.src\"\n                [width]=\"bgView.image.size\"\n                [height]=\"bgView.image.size\"\n                [alt]=\"bgView.image.alt\"\n                (error)=\"onImageError()\" />\n        }\n        @case ('initials') {\n            <div class=\"bg-initials\">\n                {{ bgView.text }}\n            </div>\n        }\n        @case ('symbol') {\n            <div\n                class=\"bg-symbol\"\n                [ngClass]=\"['sym-' + bgView.symbolId, bgView.big ? 'big' : '']\">\n                <ap-symbol [symbolId]=\"bgView.symbolId\" />\n            </div>\n        }\n    }\n}\n\n<!-- overlay -->\n@if (overlayView(); as ovlView) {\n    @switch (ovlView.mode) {\n        @case ('network') {\n            <div\n                class=\"ovl-network\"\n                [class.round]=\"ovlView.round\"\n                [ngClass]=\"ovlView.network\">\n                <ap-symbol [symbolId]=\"ovlView.network | networkSymbol\" />\n            </div>\n        }\n        @case ('online') {\n            <div class=\"ovl-online\"></div>\n        }\n    }\n}\n", styles: [":host{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);box-sizing:border-box;position:relative;border-radius:var(--ap-avatar-border-radius)}:host.background-default{background:var(--ref-color-grey-40);box-shadow:0 0 0 1px var(--ref-color-grey-10)}.bg-image{overflow:hidden;box-sizing:border-box;border-radius:var(--ap-avatar-border-radius)}.bg-symbol{display:flex;justify-content:center;align-items:center}.bg-symbol:not(.big) 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)}.bg-symbol.big ap-symbol ::ng-deep .svg{top:unset!important;left:unset!important;width:104.35%!important;height:unset!important}.bg-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)}.ovl-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-10)}.ovl-network.round{border-radius:100%}.ovl-network.instagram{border-radius:28%}.ovl-network.linkedin{border-radius:6%}.ovl-network.googleMyBusiness,.ovl-network.google{box-shadow:none;border-radius:unset}.ovl-network ap-symbol ::ng-deep img{border-radius:0;border:none}.ovl-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)}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: NetworkSymbolPipe, name: "networkSymbol" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-avatar', standalone: true, imports: [NgOptimizedImage, SymbolComponent, LetDirective, NgClass], 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        socialNetwork: socialNetwork$\n    } as avatarViewModel\">\n    @if (avatarViewModel.displayProfilePicture) {\n        <img\n            [src]=\"avatarViewModel.profilePicture\"\n            [width]=\"avatarViewModel.size\"\n            [height]=\"avatarViewModel.size\"\n            [alt]=\"alt\"\n            (error)=\"onImageError()\" />\n    }\n    @if (avatarViewModel.displaySingleNeutralSvg) {\n        <div class=\"no-profile-picture\">\n            <ap-symbol symbolId=\"single-neutral\" />\n        </div>\n    }\n\n    @if (avatarViewModel.displayAnonymous) {\n        <div class=\"anonymous\">\n            <ap-symbol symbolId=\"show-theater-mask-happy\" />\n        </div>\n    }\n    @if (avatarViewModel.displayOnline) {\n        <div class=\"online\"></div>\n    }\n    @if (avatarViewModel.displayNetwork) {\n        <div\n            class=\"network\"\n            [class.social-network]=\"avatarViewModel.socialNetwork\"\n            [ngClass]=\"avatarViewModel.network\">\n            @if (avatarViewModel.network) {\n                <ap-symbol [symbolId]=\"networkSymbolByNetwork[avatarViewModel.network]\" />\n            }\n        </div>\n    }\n\n    @if (avatarViewModel.displayInitials) {\n        <div class=\"initials\">\n            {{ avatarViewModel.initials }}\n        </div>\n    }\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;box-shadow:0 0 0 1px var(--ref-color-grey-10)}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);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 .anonymous{margin-top:7%}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-10)}ap-avatar .network.social-network{border-radius:100%}ap-avatar .network.instagram{border-radius:28%}ap-avatar .network.youtube{bottom:-1px;border-radius:unset;overflow:visible;box-shadow:none}ap-avatar .network.linkedin{border-radius:6%}ap-avatar .network.googleMyBusiness,ap-avatar .network.google{box-shadow:none;border-radius:unset}ap-avatar .network ap-symbol img{border-radius:0;border:none}\n"] }]
-        }], ctorParameters: () => [{ type: i1.SymbolRegistry }, { type: i0.ElementRef }], propDecorators: { alternativeText: [{
-                type: Input
-            }], anonymous: [{
-                type: Input
-            }], username: [{
-                type: Input
-            }], network: [{
-                type: Input
-            }], online: [{
-                type: Input
-            }], profilePicture: [{
-                type: Input
-            }], showInitials: [{
-                type: Input
-            }], alt: [{
-                type: Input
-            }], roundedAvatar: [{
-                type: HostBinding,
-                args: ['class.rounded-avatar']
-            }], rounded: [{
-                type: Input,
-                args: [{
-                        transform: booleanAttribute,
-                    }]
-            }], size: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'ap-avatar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgOptimizedImage, SymbolComponent, NgClass, NetworkSymbolPipe], hostDirectives: [NgStyle], host: {
+                        '[class.background-default]': '!showBigNetworkBackground()',
+                    }, template: "<!-- background -->\n@if (backgroundView(); as bgView) {\n    @switch (bgView.mode) {\n        @case ('image') {\n            <img\n                class=\"bg-image\"\n                [ngSrc]=\"bgView.image.src\"\n                [width]=\"bgView.image.size\"\n                [height]=\"bgView.image.size\"\n                [alt]=\"bgView.image.alt\"\n                (error)=\"onImageError()\" />\n        }\n        @case ('initials') {\n            <div class=\"bg-initials\">\n                {{ bgView.text }}\n            </div>\n        }\n        @case ('symbol') {\n            <div\n                class=\"bg-symbol\"\n                [ngClass]=\"['sym-' + bgView.symbolId, bgView.big ? 'big' : '']\">\n                <ap-symbol [symbolId]=\"bgView.symbolId\" />\n            </div>\n        }\n    }\n}\n\n<!-- overlay -->\n@if (overlayView(); as ovlView) {\n    @switch (ovlView.mode) {\n        @case ('network') {\n            <div\n                class=\"ovl-network\"\n                [class.round]=\"ovlView.round\"\n                [ngClass]=\"ovlView.network\">\n                <ap-symbol [symbolId]=\"ovlView.network | networkSymbol\" />\n            </div>\n        }\n        @case ('online') {\n            <div class=\"ovl-online\"></div>\n        }\n    }\n}\n", styles: [":host{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);box-sizing:border-box;position:relative;border-radius:var(--ap-avatar-border-radius)}:host.background-default{background:var(--ref-color-grey-40);box-shadow:0 0 0 1px var(--ref-color-grey-10)}.bg-image{overflow:hidden;box-sizing:border-box;border-radius:var(--ap-avatar-border-radius)}.bg-symbol{display:flex;justify-content:center;align-items:center}.bg-symbol:not(.big) 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)}.bg-symbol.big ap-symbol ::ng-deep .svg{top:unset!important;left:unset!important;width:104.35%!important;height:unset!important}.bg-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)}.ovl-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-10)}.ovl-network.round{border-radius:100%}.ovl-network.instagram{border-radius:28%}.ovl-network.linkedin{border-radius:6%}.ovl-network.googleMyBusiness,.ovl-network.google{box-shadow:none;border-radius:unset}.ovl-network ap-symbol ::ng-deep img{border-radius:0;border:none}.ovl-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)}\n"] }]
+        }], ctorParameters: () => [{ type: i1.SymbolRegistry }, { type: i2.NgStyle }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AVATAR_NETWORK_ARRAY, AvatarComponent };
+export { AvatarComponent };
 //# sourceMappingURL=agorapulse-ui-components-avatar.mjs.map

package/fesm2022/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    SymbolComponent,\n    SymbolRegistry,\n    apFacebookOfficial,\n    apGoogleMyBusinessOfficial,\n    apLinkedinOfficial,\n    apPinterestOfficial,\n    apNsThreadsLogo,\n    apShowTheaterMaskHappy,\n    apSingleNeutral,\n    apTiktokOfficial,\n    apWebBlogs,\n    apWebNews,\n    apXOfficial,\n    apYoutubeOfficial,\n} from '@agorapulse/ui-symbol';\nimport {NgClass, NgOptimizedImage} from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    HostBinding,\n    Input,\n    OnInit,\n    ViewEncapsulation,\n    booleanAttribute,\n} from '@angular/core';\nimport { LetDirective } from '@ngrx/component';\nimport { BehaviorSubject, Observable, combineLatest, map, of } from 'rxjs';\n\nexport type AvatarSize = 56 | 48 | 40 | 36 | 32 | 24 | 16;\n\nexport const AVATAR_NETWORK_ARRAY = ['facebook', 'linkedin', 'twitter', 'X', 'youtube', 'googleMyBusiness', 'google', 'instagram', 'threads', 'tiktok', 'pinterest', 'webBlog', 'webNews'];\nconst ROUND_BORDER_AVATAR_NETWORK: typeof AVATAR_NETWORK_ARRAY[number][] = ['facebook', 'twitter', 'youtube', 'tiktok', 'X', 'pinterest', 'webBlog', 'webNews', 'threads'];\nexport type AvatarNetwork = typeof AVATAR_NETWORK_ARRAY[number];\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: [NgOptimizedImage, SymbolComponent, LetDirective, NgClass],\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        X: 'x-official',\n        twitter: 'x-official',\n        linkedin: 'linkedin-official',\n        tiktok: 'tiktok-official',\n        youtube: 'youtube-official',\n        pinterest: 'pinterest-official',\n        threads: 'ns-threads-logo',\n        googleMyBusiness: 'google-my-business-official',\n        google: 'google-my-business-official',\n        webNews: 'web-news',\n        webBlog: 'web-blogs',\n    };\n\n    size$: BehaviorSubject<AvatarSize> = new BehaviorSubject<AvatarSize>(40);\n    profilePicture$: BehaviorSubject<string | undefined> = new BehaviorSubject<string | undefined>('');\n    network$: BehaviorSubject<AvatarNetwork | undefined> = new BehaviorSubject<AvatarNetwork | undefined>(undefined);\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>(true);\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 | undefined) {\n        this.network$.next(network);\n        this.elementRef.nativeElement.style.setProperty('--ap-avatar-network-size', `${networkSizeByAvatarSize[this.size$.value]}px`);\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 = '';\n\n    @HostBinding('class.rounded-avatar')\n    roundedAvatar = true;\n\n    @Input({\n        transform: booleanAttribute,\n    })\n    set rounded(rounded: boolean) {\n        this.roundedAvatar = rounded;\n        this.rounded$.next(rounded);\n    }\n\n    // TODO - migrate to signal input and remove size input\n    @Input()\n    set size(size: AvatarSize | `${AvatarSize}`) {\n        this.size$.next(+size as AvatarSize);\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('--ap-avatar-online-icon-size', `${onlineIconSizeByAvatarSize[size]}px`);\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    socialNetwork$: Observable<boolean> = of(false);\n\n    constructor(\n        private symbolRegistry: SymbolRegistry,\n        private elementRef: ElementRef\n    ) {\n        this.symbolRegistry.registerSymbols([\n            apSingleNeutral,\n            apShowTheaterMaskHappy,\n            apFacebookOfficial,\n            apLinkedinOfficial,\n            apYoutubeOfficial,\n            apTiktokOfficial,\n            apGoogleMyBusinessOfficial,\n            apPinterestOfficial,\n            apNsThreadsLogo,\n            apXOfficial,\n            apWebBlogs,\n            apWebNews,\n        ]);\n        this.elementRef.nativeElement.style.setProperty('--ap-avatar-size', `40px`);\n        this.elementRef.nativeElement.style.setProperty('--ap-avatar-symbol-size', `${symbolSizeByAvatarSize[this.size$.value]}px`);\n    }\n\n    ngOnInit(): void {\n        this.initialsAvailable$ = this.username$.pipe(\n            map(username => {\n                return !!username;\n            })\n        );\n\n        this.displayProfilePicture$ = combineLatest([this.profilePicture$, this.anonymous$, this.imageError$, this.showInitials$]).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(([profilePicture, imageError, initialsAvailable, showInitials, anonymous, displayInitials, displayProfilePicture]) => {\n                return (\n                    (!profilePicture || imageError || !initialsAvailable || (initialsAvailable && !showInitials)) &&\n                    !anonymous &&\n                    !displayInitials &&\n                    !displayProfilePicture\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.socialNetwork$ = this.network$.pipe(map(network => {\n            if (!network) {\n                return false;\n            }\n            return ROUND_BORDER_AVATAR_NETWORK.indexOf(network) > -1;\n        }));\n\n\n        this.initials$ = combineLatest([this.displayInitials$, this.username$]).pipe(\n            map(([displayInitials, username]) => {\n                if ((displayInitials && !username) || !displayInitials) {\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                return `${names[0].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        socialNetwork: socialNetwork$\n    } as avatarViewModel\">\n    @if (avatarViewModel.displayProfilePicture) {\n        <img\n            [src]=\"avatarViewModel.profilePicture\"\n            [width]=\"avatarViewModel.size\"\n            [height]=\"avatarViewModel.size\"\n            [alt]=\"alt\"\n            (error)=\"onImageError()\" />\n    }\n    @if (avatarViewModel.displaySingleNeutralSvg) {\n        <div class=\"no-profile-picture\">\n            <ap-symbol symbolId=\"single-neutral\" />\n        </div>\n    }\n\n    @if (avatarViewModel.displayAnonymous) {\n        <div class=\"anonymous\">\n            <ap-symbol symbolId=\"show-theater-mask-happy\" />\n        </div>\n    }\n    @if (avatarViewModel.displayOnline) {\n        <div class=\"online\"></div>\n    }\n    @if (avatarViewModel.displayNetwork) {\n        <div\n            class=\"network\"\n            [class.social-network]=\"avatarViewModel.socialNetwork\"\n            [ngClass]=\"avatarViewModel.network\">\n            @if (avatarViewModel.network) {\n                <ap-symbol [symbolId]=\"networkSymbolByNetwork[avatarViewModel.network]\" />\n            }\n        </div>\n    }\n\n    @if (avatarViewModel.displayInitials) {\n        <div class=\"initials\">\n            {{ avatarViewModel.initials }}\n        </div>\n    }\n</ng-container>\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    agorapulseSymbol,\n    apShowTheaterMaskHappy,\n    apSingleNeutral,\n    networkDescription,\n    NetworkName,\n    NetworkSymbolPipe,\n    SymbolComponent,\n    SymbolRegistry,\n    toNetworkSymbol,\n} from '@agorapulse/ui-symbol';\nimport { NgClass, NgOptimizedImage, NgStyle } from '@angular/common';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, computed, effect, input, signal, untracked } from '@angular/core';\n\nexport type AvatarNetwork = NetworkName;\nexport type AvatarSize = 56 | 48 | 40 | 36 | 32 | 24 | 16;\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\nconst automaticBigSymbolNetwork: AvatarNetwork[] = ['youtube'];\n\ntype BackgroundView =\n    | { mode: 'image'; image: { src: string; size: number; alt?: string } }\n    | { mode: 'initials'; text: string }\n    | { mode: 'symbol'; symbolId: agorapulseSymbol; big?: boolean }\n    | { mode?: never };\n\ntype OverlayView = { mode: 'online' } | { mode: 'network'; network: NetworkName; round: boolean } | { mode?: never };\n\n@Component({\n    selector: 'ap-avatar',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    templateUrl: './avatar.component.html',\n    styleUrls: ['./avatar.component.scss'],\n    standalone: true,\n    imports: [NgOptimizedImage, SymbolComponent, NgClass, NetworkSymbolPipe],\n    hostDirectives: [NgStyle],\n    host: {\n        '[class.background-default]': '!showBigNetworkBackground()',\n    },\n})\nexport class AvatarComponent {\n    profilePicture = input<string>();\n    alt = input('');\n    network = input(undefined, {\n        transform: (v?: AvatarNetwork | string) => (v !== undefined ? (v as AvatarNetwork) : v),\n    });\n    size = input<AvatarSize | `${AvatarSize}`>(40);\n    username = input<string>();\n    showInitials = input<boolean | string>();\n    bigNetwork = input(false);\n    anonymous = input(false);\n    online = input(false);\n    hideBigNetwork = input(false, { alias: 'youtubeAvatarMode' });\n    rounded = input(true, { transform: booleanAttribute });\n\n    private imageError = signal(false);\n\n    backgroundView = computed<BackgroundView>(() => this.buildBackgroundView());\n    overlayView = computed<OverlayView>(() => this.buildOverlayView());\n    private useBigNetwork = computed(() => {\n        return (this.automaticBigSymbolNetwork() || this.bigNetwork()) && this.network();\n    });\n    private automaticBigSymbolNetwork = computed(() => {\n        return automaticBigSymbolNetwork.includes(this.network() as AvatarNetwork);\n    });\n    protected showBigNetworkBackground = computed(() => {\n        return !this.anonymous() && this.useBigNetwork() && (!this.validProfilePicture() || !this.hideBigNetwork());\n    });\n    private validProfilePicture = computed(() => {\n        return !this.imageError() ? this.profilePicture() : undefined;\n    });\n\n    constructor(\n        symbolRegistry: SymbolRegistry,\n        private ngStyle: NgStyle\n    ) {\n        const networkSymbols = Object.values(networkDescription) //\n            .flatMap(({ symbol }) => (typeof symbol !== 'string' ? [symbol] : []));\n\n        symbolRegistry.registerSymbols([...networkSymbols, apSingleNeutral, apShowTheaterMaskHappy]);\n\n        effect(() => {\n            this.ngStyle.ngStyle = this.buildHostStyle();\n            this.ngStyle.ngDoCheck();\n        });\n        effect(() => {\n            this.profilePicture(); // on change\n            untracked(() => this.imageError.set(false));\n        });\n    }\n\n    onImageError(): void {\n        this.imageError.set(true);\n    }\n\n    private buildBackgroundView(): BackgroundView {\n        let bgView: BackgroundView;\n\n        if (this.showBigNetworkBackground()) {\n            bgView = { mode: 'symbol', symbolId: toNetworkSymbol(this.network()!), big: true };\n        } else if (this.anonymous()) {\n            bgView = { mode: 'symbol', symbolId: apShowTheaterMaskHappy.name };\n        } else {\n            const profilePicture = this.validProfilePicture();\n\n            if (profilePicture) {\n                bgView = {\n                    mode: 'image',\n                    image: {\n                        src: profilePicture,\n                        size: +this.size(),\n                        alt: this.alt(),\n                    },\n                };\n            } else {\n                const initials = this.showInitials();\n\n                if (initials !== false && initials !== undefined) {\n                    const useDefault = initials === true || initials === '';\n                    const candidateName = (useDefault ? this.username()?.charAt(0) ?? '' : initials.slice(0, 2)).toUpperCase();\n                    bgView = { mode: 'initials', text: candidateName };\n                } else {\n                    bgView = { mode: 'symbol', symbolId: apSingleNeutral.name };\n                }\n            }\n        }\n\n        return bgView;\n    }\n\n    private buildOverlayView(): OverlayView {\n        let ovlView: OverlayView = {};\n        const network = this.network();\n\n        if (this.online()) {\n            ovlView = { mode: 'online' };\n        } else if (network && !this.showBigNetworkBackground() && !this.automaticBigSymbolNetwork()) {\n            // unit tests in platform repo gives random network values which are unchecked by the compiler\n            const { round } = networkDescription[network] ?? {};\n            ovlView = { mode: 'network', network, round };\n        }\n\n        return ovlView;\n    }\n\n    private buildHostStyle() {\n        const bgView = this.backgroundView();\n        const ovlMode = this.overlayView().mode;\n        const size = this.size();\n\n        return {\n            '--ap-avatar-size': `${size}px`,\n            '--ap-avatar-border-radius': this.rounded() ? '100%' : 'var(--sys-border-radius-sm)',\n            '--ap-avatar-initials-size': bgView.mode == 'initials' ? `${initialSizeByAvatarSize[size]}px` : '',\n            '--ap-avatar-symbol-size': bgView.mode == 'symbol' ? `${bgView.big ? size : symbolSizeByAvatarSize[size]}px` : '',\n            '--ap-avatar-network-size': ovlMode == 'network' ? `${networkSizeByAvatarSize[size]}px` : '',\n            '--ap-avatar-online-icon-size': ovlMode == 'online' ? `${onlineIconSizeByAvatarSize[size]}px` : '',\n        };\n    }\n}\n","<!-- background -->\n@if (backgroundView(); as bgView) {\n    @switch (bgView.mode) {\n        @case ('image') {\n            <img\n                class=\"bg-image\"\n                [ngSrc]=\"bgView.image.src\"\n                [width]=\"bgView.image.size\"\n                [height]=\"bgView.image.size\"\n                [alt]=\"bgView.image.alt\"\n                (error)=\"onImageError()\" />\n        }\n        @case ('initials') {\n            <div class=\"bg-initials\">\n                {{ bgView.text }}\n            </div>\n        }\n        @case ('symbol') {\n            <div\n                class=\"bg-symbol\"\n                [ngClass]=\"['sym-' + bgView.symbolId, bgView.big ? 'big' : '']\">\n                <ap-symbol [symbolId]=\"bgView.symbolId\" />\n            </div>\n        }\n    }\n}\n\n<!-- overlay -->\n@if (overlayView(); as ovlView) {\n    @switch (ovlView.mode) {\n        @case ('network') {\n            <div\n                class=\"ovl-network\"\n                [class.round]=\"ovlView.round\"\n                [ngClass]=\"ovlView.network\">\n                <ap-symbol [symbolId]=\"ovlView.network | networkSymbol\" />\n            </div>\n        }\n        @case ('online') {\n            <div class=\"ovl-online\"></div>\n        }\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;AAiBA,MAAM,0BAA0B,GAA+B;AAC3D,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,EAAE,EAAE,CAAC;CACR;AAED,MAAM,sBAAsB,GAA+B;AACvD,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,CAAC;CACR;AAED,MAAM,uBAAuB,GAA+B;AACxD,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,CAAC;CACR;AAED,MAAM,uBAAuB,GAA+B;AACxD,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;CACT;AAED,MAAM,yBAAyB,GAAoB,CAAC,SAAS,CAAC;MAsBjD,eAAe,CAAA;AAkCZ,IAAA,OAAA;IAjCZ,cAAc,GAAG,KAAK,EAAU;AAChC,IAAA,GAAG,GAAG,KAAK,CAAC,EAAE,CAAC;AACf,IAAA,OAAO,GAAG,KAAK,CAAC,SAAS,EAAE;AACvB,QAAA,SAAS,EAAE,CAAC,CAA0B,MAAM,CAAC,KAAK,SAAS,GAAI,CAAmB,GAAG,CAAC,CAAC;AAC1F,KAAA,CAAC;AACF,IAAA,IAAI,GAAG,KAAK,CAA+B,EAAE,CAAC;IAC9C,QAAQ,GAAG,KAAK,EAAU;IAC1B,YAAY,GAAG,KAAK,EAAoB;AACxC,IAAA,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC;AACzB,IAAA,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC;AACxB,IAAA,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC;IACrB,cAAc,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7D,OAAO,GAAG,KAAK,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAE9C,IAAA,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC;IAElC,cAAc,GAAG,QAAQ,CAAiB,MAAM,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC3E,WAAW,GAAG,QAAQ,CAAc,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;AAC1D,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAK;AAClC,QAAA,OAAO,CAAC,IAAI,CAAC,yBAAyB,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI,CAAC,OAAO,EAAE;AACpF,KAAC,CAAC;AACM,IAAA,yBAAyB,GAAG,QAAQ,CAAC,MAAK;QAC9C,OAAO,yBAAyB,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAmB,CAAC;AAC9E,KAAC,CAAC;AACQ,IAAA,wBAAwB,GAAG,QAAQ,CAAC,MAAK;QAC/C,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;AAC/G,KAAC,CAAC;AACM,IAAA,mBAAmB,GAAG,QAAQ,CAAC,MAAK;AACxC,QAAA,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,SAAS;AACjE,KAAC,CAAC;IAEF,WACI,CAAA,cAA8B,EACtB,OAAgB,EAAA;QAAhB,IAAO,CAAA,OAAA,GAAP,OAAO;QAEf,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC;aACnD,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,OAAO,MAAM,KAAK,QAAQ,GAAG,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC;AAE1E,QAAA,cAAc,CAAC,eAAe,CAAC,CAAC,GAAG,cAAc,EAAE,eAAe,EAAE,sBAAsB,CAAC,CAAC;QAE5F,MAAM,CAAC,MAAK;YACR,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,EAAE;AAC5C,YAAA,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE;AAC5B,SAAC,CAAC;QACF,MAAM,CAAC,MAAK;AACR,YAAA,IAAI,CAAC,cAAc,EAAE,CAAC;AACtB,YAAA,SAAS,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AAC/C,SAAC,CAAC;;IAGN,YAAY,GAAA;AACR,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC;;IAGrB,mBAAmB,GAAA;AACvB,QAAA,IAAI,MAAsB;AAE1B,QAAA,IAAI,IAAI,CAAC,wBAAwB,EAAE,EAAE;YACjC,MAAM,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,eAAe,CAAC,IAAI,CAAC,OAAO,EAAG,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE;;AAC/E,aAAA,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;AACzB,YAAA,MAAM,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,sBAAsB,CAAC,IAAI,EAAE;;aAC/D;AACH,YAAA,MAAM,cAAc,GAAG,IAAI,CAAC,mBAAmB,EAAE;YAEjD,IAAI,cAAc,EAAE;AAChB,gBAAA,MAAM,GAAG;AACL,oBAAA,IAAI,EAAE,OAAO;AACb,oBAAA,KAAK,EAAE;AACH,wBAAA,GAAG,EAAE,cAAc;AACnB,wBAAA,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE;AAClB,wBAAA,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE;AAClB,qBAAA;iBACJ;;iBACE;AACH,gBAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,EAAE;gBAEpC,IAAI,QAAQ,KAAK,KAAK,IAAI,QAAQ,KAAK,SAAS,EAAE;oBAC9C,MAAM,UAAU,GAAG,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,EAAE;AACvD,oBAAA,MAAM,aAAa,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE;oBAC1G,MAAM,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,aAAa,EAAE;;qBAC/C;AACH,oBAAA,MAAM,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,eAAe,CAAC,IAAI,EAAE;;;;AAKvE,QAAA,OAAO,MAAM;;IAGT,gBAAgB,GAAA;QACpB,IAAI,OAAO,GAAgB,EAAE;AAC7B,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE;AAE9B,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE;AACf,YAAA,OAAO,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE;;AACzB,aAAA,IAAI,OAAO,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE,IAAI,CAAC,IAAI,CAAC,yBAAyB,EAAE,EAAE;;YAEzF,MAAM,EAAE,KAAK,EAAE,GAAG,kBAAkB,CAAC,OAAO,CAAC,IAAI,EAAE;YACnD,OAAO,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE;;AAGjD,QAAA,OAAO,OAAO;;IAGV,cAAc,GAAA;AAClB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,EAAE;QACpC,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI;AACvC,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;QAExB,OAAO;YACH,kBAAkB,EAAE,CAAG,EAAA,IAAI,CAAI,EAAA,CAAA;AAC/B,YAAA,2BAA2B,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,MAAM,GAAG,6BAA6B;AACpF,YAAA,2BAA2B,EAAE,MAAM,CAAC,IAAI,IAAI,UAAU,GAAG,CAAG,EAAA,uBAAuB,CAAC,IAAI,CAAC,IAAI,GAAG,EAAE;AAClG,YAAA,yBAAyB,EAAE,MAAM,CAAC,IAAI,IAAI,QAAQ,GAAG,CAAA,EAAG,MAAM,CAAC,GAAG,GAAG,IAAI,GAAG,sBAAsB,CAAC,IAAI,CAAC,CAAI,EAAA,CAAA,GAAG,EAAE;AACjH,YAAA,0BAA0B,EAAE,OAAO,IAAI,SAAS,GAAG,CAAA,EAAG,uBAAuB,CAAC,IAAI,CAAC,CAAA,EAAA,CAAI,GAAG,EAAE;AAC5F,YAAA,8BAA8B,EAAE,OAAO,IAAI,QAAQ,GAAG,CAAA,EAAG,0BAA0B,CAAC,IAAI,CAAC,CAAA,EAAA,CAAI,GAAG,EAAE;SACrG;;uGArHI,eAAe,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,cAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,OAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,0BAAA,EAAA,6BAAA,EAAA,EAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,OAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC/E5B,4wCA2CA,ED8Bc,MAAA,EAAA,CAAA,kxEAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,gBAAgB,gPAAE,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAE,iBAAiB,EAAA,IAAA,EAAA,eAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAM9D,eAAe,EAAA,UAAA,EAAA,CAAA;kBAZ3B,SAAS;+BACI,WAAW,EAAA,eAAA,EACJ,uBAAuB,CAAC,MAAM,cAGnC,IAAI,EAAA,OAAA,EACP,CAAC,gBAAgB,EAAE,eAAe,EAAE,OAAO,EAAE,iBAAiB,CAAC,kBACxD,CAAC,OAAO,CAAC,EACnB,IAAA,EAAA;AACF,wBAAA,4BAA4B,EAAE,6BAA6B;AAC9D,qBAAA,EAAA,QAAA,EAAA,4wCAAA,EAAA,MAAA,EAAA,CAAA,kxEAAA,CAAA,EAAA;;;AE7EL;;AAEG;;;;"}

package/fesm2022/agorapulse-ui-components-badge.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, Input } from '@angular/core';
+import { HostBinding, Input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 
 class BadgeComponent {
     color = 'blue';

package/fesm2022/agorapulse-ui-components-button.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, EventEmitter, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Input, Output, HostListener } from '@angular/core';
+import { inject, EventEmitter, booleanAttribute, HostListener, Input, Output, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from '@agorapulse/ui-components/directives';
 import { BaseButtonDirective } from '@agorapulse/ui-components/directives';
 import { SymbolComponent } from '@agorapulse/ui-symbol';
@@ -59,7 +59,7 @@ class ButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: ButtonComponent, isStandalone: true, selector: "ap-button", inputs: { ariaLabel: "ariaLabel", disabled: ["disabled", "disabled", booleanAttribute], name: "name", form: "form", config: "config", loading: "loading", locked: "locked", menuTrigger: "menuTrigger", symbolPosition: "symbolPosition", ionicModalEnabled: "ionicModalEnabled" }, outputs: { menuOpened: "menuOpened", menuClosed: "menuClosed", click: "click", focus: "focus", blur: "blur" }, host: { listeners: { "window:keyup.space": "onSpaceKeyUp($event)" }, properties: { "attr.disabled": "disabled || null" } }, providers: [], viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true }], hostDirectives: [{ directive: i1.BaseButtonDirective }], ngImport: i0, template: "<button\n    #button\n    #trigger=\"matMenuTrigger\"\n    role=\"button\"\n    [matMenuTriggerFor]=\"menuTrigger\"\n    [class.primary]=\"config.style === 'primary' && !locked\"\n    [class.secondary]=\"config.style === 'secondary' && !locked\"\n    [class.ghost]=\"config.style === 'ghost' && !locked\"\n    [class.stroked]=\"(config.style === 'stroked' || config.style === 'stroked-transparent') && !locked\"\n    [class.transparent]=\"config.style === 'stroked-transparent' && !locked\"\n    [class.orange]=\"config.color === 'orange' && !locked\"\n    [class.blue]=\"config.color === 'blue' && !locked\"\n    [class.red]=\"config.color === 'red' && !locked\"\n    [class.grey]=\"config.color === 'grey' && !locked\"\n    [class.loading]=\"loading && !locked\"\n    [class.locked]=\"locked\"\n    [class.inverse]=\"symbolPosition === 'left'\"\n    [disabled]=\"disabled && !locked\"\n    [name]=\"name\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n    [attr.id]=\"baseButtonDirective.hostId\"\n    [attr.type]=\"baseButtonDirective.hostType\"\n    [attr.form]=\"form\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    (click)=\"onClickHandle($event)\"\n    (focus)=\"onFocusHandle($event)\"\n    (blur)=\"onBlurHandle($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\">\n    <ng-content></ng-content>\n    <ng-content select=\"ap-symbol\"></ng-content>\n    @if (loading && !locked) {\n        <div class=\"loading-bar\"></div>\n    }\n</button>\n@if (locked) {\n    <div class=\"locked-symbol\">\n        <ap-symbol\n            symbolId=\"premium-star\"\n            size=\"sm\" />\n    </div>\n}\n", styles: ["ap-button{--loading-bar-width: 50px;display:inline-block;position:relative}ap-button[disabled]{pointer-events:none}ap-button button{border:none;border-radius:4px;padding:var(--comp-button-padding-horizontal) var(--comp-button-padding-vertical);position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;gap:var(--comp-split-button-spacing);flex-direction:row;font-size:var(--comp-button-text-size);font-family:var(--comp-button-text-font-family);line-height:var(--comp-button-text-line-height);font-weight:var(--comp-button-text-weight);max-height:var(--comp-button-height);min-height:var(--comp-button-height);white-space:nowrap;text-overflow:ellipsis;width:100%}ap-button button ap-symbol{width:16px;min-width:16px;max-width:16px;height:16px;min-height:16px;max-height:16px}ap-button button.inverse{flex-direction:row-reverse}ap-button button:hover:not(:disabled):not(.loading){cursor:pointer}ap-button button:disabled{pointer-events:none}@media (hover: hover){ap-button button:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-button button.loading{pointer-events:none}ap-button button.primary{color:var(--ref-color-white)}ap-button button.primary ap-symbol{color:var(--ref-color-white)}ap-button button.primary.orange{background:var(--ref-color-orange-100)}ap-button button.primary.orange:hover{background-color:var(--ref-color-orange-80)}ap-button button.primary.orange:active:not(:disabled){background-color:var(--ref-color-orange-60)}ap-button button.primary.orange:disabled{background-color:var(--ref-color-orange-20)}ap-button button.primary.orange.loading{background-color:var(--ref-color-orange-60)}ap-button button.primary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.primary.blue{background:var(--ref-color-electric-blue-100)}ap-button button.primary.blue:hover{background-color:var(--ref-color-electric-blue-80)}ap-button button.primary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue:disabled{background-color:var(--ref-color-electric-blue-20)}ap-button button.primary.blue.loading{background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.secondary.orange{background:var(--ref-color-orange-10);color:var(--ref-color-orange-100)}ap-button button.secondary.orange ap-symbol{color:var(--ref-color-orange-100)}ap-button button.secondary.orange:hover{background-color:var(--ref-color-orange-20)}ap-button button.secondary.orange:active:not(:disabled){background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange:focus:not(:disabled):not(:active){background-color:var(--ref-color-orange-10)}ap-button button.secondary.orange:disabled{background-color:var(--ref-color-orange-10);color:var(--ref-color-orange-20)}ap-button button.secondary.orange:disabled ap-symbol{color:var(--ref-color-orange-20)}ap-button button.secondary.orange.loading{background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.secondary.blue{background:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue:hover{background-color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-10)}ap-button button.secondary.blue:disabled{background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue.loading{background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.stroked{background:var(--ref-color-white);border-width:1px;border-style:solid;color:var(--ref-color-grey-80)}ap-button button.stroked.grey{border-color:var(--ref-color-grey-20)}ap-button button.stroked.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.stroked.grey:hover{border-color:var(--ref-color-grey-40)}ap-button button.stroked.grey:active:not(:disabled){border-color:var(--ref-color-grey-60)}ap-button button.stroked.grey:focus:not(:disabled):not(:active){border-color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.stroked.grey.loading{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-40)}ap-button button.stroked.grey.loading ap-symbol{color:var(--ref-color-grey-40)}ap-button button.stroked.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.stroked.blue{border-color:var(--ref-color-electric-blue-60);color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:hover{border-color:var(--ref-color-electric-blue-80)}ap-button button.stroked.blue:active:not(:disabled){border-color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:focus:not(:disabled):not(:active){border-color:var(--ref-color-electric-blue-60)}ap-button button.stroked.blue:disabled{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue.loading{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue.loading ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.transparent{background:transparent}ap-button button.ghost{background:transparent}ap-button button.ghost.grey{color:var(--ref-color-grey-80)}ap-button button.ghost.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.ghost.grey:hover{background-color:var(--ref-color-grey-05)}ap-button button.ghost.grey:active:not(:disabled){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:focus:not(:disabled):not(:active){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:disabled{color:var(--ref-color-grey-20)}ap-button button.ghost.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.ghost.grey.loading:not(.locked){color:var(--ref-color-grey-40)}ap-button button.ghost.grey.loading:not(.locked) ap-symbol{color:var(--ref-color-grey-40)}ap-button button.ghost.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.ghost.blue{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue:hover{background-color:var(--ref-color-electric-blue-10)}ap-button button.ghost.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue.loading{color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue.loading ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.ghost.red{color:var(--ref-color-red-100)}ap-button button.ghost.red ap-symbol{color:var(--ref-color-red-100)}ap-button button.ghost.red:hover{background-color:var(--ref-color-red-10)}ap-button button.ghost.red:active:not(:disabled){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:focus:not(:disabled):not(:active){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled{color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-button button.ghost.red.loading{color:var(--ref-color-red-40)}ap-button button.ghost.red.loading ap-symbol{color:var(--ref-color-red-40)}ap-button button.ghost.red .loading-bar{background-color:var(--ref-color-red-100)}ap-button button.locked{background-color:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-button button.locked:hover{border-color:var(--ref-color-purple-40);background-color:var(--ref-color-purple-20)}ap-button button.locked:focus:not(:disabled):not(:active){border-color:var(--ref-color-purple-20);background-color:var(--ref-color-purple-20)}ap-button button.locked:active{border-color:var(--ref-color-purple-60);background-color:var(--ref-color-purple-40)}ap-button .loading-bar{position:absolute;bottom:0;left:var(--comp-button-padding-vertical);width:var(--loading-bar-width);height:5px;border-radius:8px;animation:slide 1.5s ease-in-out infinite}@keyframes slide{0%{left:calc(var(--loading-bar-width) * -1)}to{left:100%}}ap-button .locked-symbol{position:absolute;top:-6px;right:-6px;border-radius:100%;background:var(--ref-color-white)}ap-button .locked-symbol ap-symbol{color:var(--ref-color-purple-100)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: ButtonComponent, isStandalone: true, selector: "ap-button", inputs: { ariaLabel: "ariaLabel", disabled: ["disabled", "disabled", booleanAttribute], name: "name", form: "form", config: "config", loading: "loading", locked: "locked", menuTrigger: "menuTrigger", symbolPosition: "symbolPosition", ionicModalEnabled: "ionicModalEnabled" }, outputs: { menuOpened: "menuOpened", menuClosed: "menuClosed", click: "click", focus: "focus", blur: "blur" }, host: { listeners: { "window:keyup.space": "onSpaceKeyUp($event)" }, properties: { "attr.disabled": "disabled || null" } }, providers: [], viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true }], hostDirectives: [{ directive: i1.BaseButtonDirective }], ngImport: i0, template: "<button\n    #button\n    #trigger=\"matMenuTrigger\"\n    role=\"button\"\n    [matMenuTriggerFor]=\"menuTrigger\"\n    [class.primary]=\"config.style === 'primary' && !locked\"\n    [class.secondary]=\"config.style === 'secondary' && !locked\"\n    [class.ghost]=\"config.style === 'ghost' && !locked\"\n    [class.stroked]=\"(config.style === 'stroked' || config.style === 'stroked-transparent') && !locked\"\n    [class.transparent]=\"config.style === 'stroked-transparent' && !locked\"\n    [class.orange]=\"config.color === 'orange' && !locked\"\n    [class.blue]=\"config.color === 'blue' && !locked\"\n    [class.red]=\"config.color === 'red' && !locked\"\n    [class.grey]=\"config.color === 'grey' && !locked\"\n    [class.loading]=\"loading && !locked\"\n    [class.locked]=\"locked\"\n    [class.inverse]=\"symbolPosition === 'left'\"\n    [disabled]=\"disabled && !locked\"\n    [name]=\"name\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n    [attr.id]=\"baseButtonDirective.hostId\"\n    [attr.type]=\"baseButtonDirective.hostType\"\n    [attr.form]=\"form\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    (click)=\"onClickHandle($event)\"\n    (focus)=\"onFocusHandle($event)\"\n    (blur)=\"onBlurHandle($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\">\n    <ng-content></ng-content>\n    <ng-content select=\"ap-symbol\"></ng-content>\n    @if (loading && !locked) {\n        <div class=\"loading-bar\"></div>\n    }\n</button>\n@if (locked) {\n    <div class=\"locked-symbol\">\n        <ap-symbol\n            symbolId=\"premium-star\"\n            size=\"sm\" />\n    </div>\n}\n", styles: ["ap-button{--loading-bar-width: 50px;display:inline-block;position:relative}ap-button[disabled]{pointer-events:none}ap-button button{border:none;border-radius:4px;padding:var(--comp-button-padding-horizontal) var(--comp-button-padding-vertical);position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;gap:var(--comp-split-button-spacing);flex-direction:row;font-size:var(--comp-button-text-size);font-family:var(--comp-button-text-font-family);line-height:var(--comp-button-text-line-height);font-weight:var(--comp-button-text-weight);max-height:var(--comp-button-height);min-height:var(--comp-button-height);white-space:nowrap;text-overflow:ellipsis;width:100%}ap-button button ap-symbol{width:16px;min-width:16px;max-width:16px;height:16px;min-height:16px;max-height:16px}ap-button button.inverse{flex-direction:row-reverse}ap-button button:hover:not(:disabled):not(.loading){cursor:pointer}ap-button button:disabled{pointer-events:none}@media (hover: hover){ap-button button:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-button button.loading{pointer-events:none}ap-button button.primary{color:var(--ref-color-white)}ap-button button.primary ap-symbol{color:var(--ref-color-white)}ap-button button.primary.orange{background:var(--ref-color-orange-100)}ap-button button.primary.orange:hover{background-color:var(--ref-color-orange-80)}ap-button button.primary.orange:active:not(:disabled){background-color:var(--ref-color-orange-60)}ap-button button.primary.orange:disabled{background-color:var(--ref-color-orange-20)}ap-button button.primary.orange.loading{background-color:var(--ref-color-orange-60)}ap-button button.primary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.primary.blue{background:var(--ref-color-electric-blue-100)}ap-button button.primary.blue:hover{background-color:var(--ref-color-electric-blue-80)}ap-button button.primary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue:disabled{background-color:var(--ref-color-electric-blue-20)}ap-button button.primary.blue.loading{background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.secondary.orange{background:var(--ref-color-orange-10);color:var(--ref-color-orange-100)}ap-button button.secondary.orange ap-symbol{color:var(--ref-color-orange-100)}ap-button button.secondary.orange:hover{background-color:var(--ref-color-orange-20)}ap-button button.secondary.orange:active:not(:disabled){background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange:focus:not(:disabled):not(:active){background-color:var(--ref-color-orange-10)}ap-button button.secondary.orange:disabled{background-color:var(--ref-color-orange-10);color:var(--ref-color-orange-20)}ap-button button.secondary.orange:disabled ap-symbol{color:var(--ref-color-orange-20)}ap-button button.secondary.orange.loading{background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.secondary.blue{background:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue:hover{background-color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-10)}ap-button button.secondary.blue:disabled{background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue.loading{background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.stroked{background:var(--ref-color-white);border-width:1px;border-style:solid;color:var(--ref-color-grey-80)}ap-button button.stroked.grey{border-color:var(--ref-color-grey-20)}ap-button button.stroked.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.stroked.grey:hover{border-color:var(--ref-color-grey-40)}ap-button button.stroked.grey:active:not(:disabled){border-color:var(--ref-color-grey-60)}ap-button button.stroked.grey:focus:not(:disabled):not(:active){border-color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.stroked.grey.loading{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-40)}ap-button button.stroked.grey.loading ap-symbol{color:var(--ref-color-grey-40)}ap-button button.stroked.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.stroked.blue{border-color:var(--ref-color-electric-blue-60);color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:hover{border-color:var(--ref-color-electric-blue-80)}ap-button button.stroked.blue:active:not(:disabled){border-color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:focus:not(:disabled):not(:active){border-color:var(--ref-color-electric-blue-60)}ap-button button.stroked.blue:disabled{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue.loading{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue.loading ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.transparent{background:transparent}ap-button button.ghost{background:transparent}ap-button button.ghost.grey{color:var(--ref-color-grey-80)}ap-button button.ghost.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.ghost.grey:hover{background-color:var(--ref-color-grey-05)}ap-button button.ghost.grey:active:not(:disabled){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:focus:not(:disabled):not(:active){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:disabled{color:var(--ref-color-grey-20)}ap-button button.ghost.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.ghost.grey.loading:not(.locked){color:var(--ref-color-grey-40)}ap-button button.ghost.grey.loading:not(.locked) ap-symbol{color:var(--ref-color-grey-40)}ap-button button.ghost.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.ghost.blue{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue:hover{background-color:var(--ref-color-electric-blue-10)}ap-button button.ghost.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue.loading{color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue.loading ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.ghost.red{color:var(--ref-color-red-100)}ap-button button.ghost.red ap-symbol{color:var(--ref-color-red-100)}ap-button button.ghost.red:hover{background-color:var(--ref-color-red-10)}ap-button button.ghost.red:active:not(:disabled){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:focus:not(:disabled):not(:active){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled{color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-button button.ghost.red.loading{color:var(--ref-color-red-40)}ap-button button.ghost.red.loading ap-symbol{color:var(--ref-color-red-40)}ap-button button.ghost.red .loading-bar{background-color:var(--ref-color-red-100)}ap-button button.locked{background-color:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-button button.locked:hover{border-color:var(--ref-color-purple-40);background-color:var(--ref-color-purple-20)}ap-button button.locked:focus:not(:disabled):not(:active){border-color:var(--ref-color-purple-20);background-color:var(--ref-color-purple-20)}ap-button button.locked:active{border-color:var(--ref-color-purple-60);background-color:var(--ref-color-purple-40)}ap-button .loading-bar{position:absolute;bottom:0;left:var(--comp-button-padding-vertical);width:var(--loading-bar-width);height:5px;border-radius:8px;animation:slide 1.5s ease-in-out infinite}@keyframes slide{0%{left:calc(var(--loading-bar-width) * -1)}to{left:100%}}ap-button .locked-symbol{position:absolute;top:-6px;right:-6px;border-radius:100%;background:var(--ref-color-white)}ap-button .locked-symbol ap-symbol{color:var(--ref-color-purple-100)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,

package/fesm2022/agorapulse-ui-components-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"agorapulse-ui-components-button.mjs","sources":["../../../libs/ui-components/button/src/button.component.ts","../../../libs/ui-components/button/src/button.component.html","../../../libs/ui-components/button/src/agorapulse-ui-components-button.ts"],"sourcesContent":["import {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    EventEmitter,\n    HostListener,\n    inject,\n    Input,\n    Output,\n    ViewChild,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { BaseButtonDirective } from '@agorapulse/ui-components/directives';\nimport { SymbolComponent } from '@agorapulse/ui-symbol';\nimport { MatMenuModule, MatMenuPanel } from '@angular/material/menu';\n\ntype ButtonConfig =\n    | { style: 'primary'; color: 'orange' | 'blue' }\n    | { style: 'secondary'; color: 'orange' | 'blue' }\n    | { style: 'stroked'; color: 'grey' | 'blue' }\n    | { style: 'stroked-transparent'; color: 'grey' | 'blue' }\n    | { style: 'ghost'; color: 'grey' | 'blue' | 'red' };\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-button',\n    styleUrls: ['./button.component.scss'],\n    standalone: true,\n    imports: [SymbolComponent, MatMenuModule],\n    providers: [],\n    templateUrl: './button.component.html',\n    encapsulation: ViewEncapsulation.None,\n    hostDirectives: [BaseButtonDirective],\n    // eslint-disable-next-line @angular-eslint/no-host-metadata-property\n    host: {\n        '[attr.disabled]': 'disabled || null',\n    },\n})\nexport class ButtonComponent {\n    readonly baseButtonDirective: BaseButtonDirective = inject(BaseButtonDirective, { self: true });\n\n    @ViewChild('button') buttonElement!: ElementRef<HTMLButtonElement>;\n\n    @Input() ariaLabel: string = '';\n    @Input({\n        transform: booleanAttribute,\n    })\n    disabled: boolean | undefined = false;\n    @Input({\n        required: true,\n    })\n    name: string = '';\n    @Input() form: string | undefined = undefined;\n    @Input() config: ButtonConfig = {\n        style: 'primary',\n        color: 'orange',\n    };\n    @Input() loading: boolean | undefined = false;\n    @Input() locked: boolean = false;\n    @Input() menuTrigger: MatMenuPanel | null = null;\n    @Input() symbolPosition: 'left' | 'right' = 'right';\n\n    @Output() menuOpened: EventEmitter<void> = new EventEmitter();\n    @Output() menuClosed: EventEmitter<void> = new EventEmitter();\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() click: EventEmitter<MouseEvent> = new EventEmitter();\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() focus: EventEmitter<FocusEvent> = new EventEmitter();\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() blur: EventEmitter<FocusEvent> = new EventEmitter();\n\n    // Specific ionic behaviour with modal trigger on html side. We cannot use stopImmediatePropagation otherwise the modal doesn't open.\n    // Maybe we can remove this hack once we rename click event by onClick\n    @Input() ionicModalEnabled: boolean = false;\n\n    focused: boolean = false;\n\n    onClickHandle($event: MouseEvent): void {\n        if (this.disabled || this.loading) {\n            return;\n        }\n        if (!this.ionicModalEnabled) {\n            $event.stopImmediatePropagation();\n        }\n        this.click.emit($event);\n        this.buttonElement.nativeElement.blur();\n        this.blur.emit($event);\n    }\n\n    onBlurHandle($event: FocusEvent): void {\n        this.focused = false;\n        this.blur.emit($event);\n    }\n\n    onFocusHandle($event: FocusEvent): void {\n        this.focused = true;\n        this.focus.emit($event);\n    }\n\n    @HostListener('window:keyup.space', ['$event'])\n    onSpaceKeyUp(event: KeyboardEvent) {\n        if (this.focused && !this.disabled && !this.loading) {\n            event.preventDefault();\n            this.buttonElement.nativeElement.click();\n        }\n    }\n}\n","<button\n    #button\n    #trigger=\"matMenuTrigger\"\n    role=\"button\"\n    [matMenuTriggerFor]=\"menuTrigger\"\n    [class.primary]=\"config.style === 'primary' && !locked\"\n    [class.secondary]=\"config.style === 'secondary' && !locked\"\n    [class.ghost]=\"config.style === 'ghost' && !locked\"\n    [class.stroked]=\"(config.style === 'stroked' || config.style === 'stroked-transparent') && !locked\"\n    [class.transparent]=\"config.style === 'stroked-transparent' && !locked\"\n    [class.orange]=\"config.color === 'orange' && !locked\"\n    [class.blue]=\"config.color === 'blue' && !locked\"\n    [class.red]=\"config.color === 'red' && !locked\"\n    [class.grey]=\"config.color === 'grey' && !locked\"\n    [class.loading]=\"loading && !locked\"\n    [class.locked]=\"locked\"\n    [class.inverse]=\"symbolPosition === 'left'\"\n    [disabled]=\"disabled && !locked\"\n    [name]=\"name\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n    [attr.id]=\"baseButtonDirective.hostId\"\n    [attr.type]=\"baseButtonDirective.hostType\"\n    [attr.form]=\"form\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    (click)=\"onClickHandle($event)\"\n    (focus)=\"onFocusHandle($event)\"\n    (blur)=\"onBlurHandle($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\">\n    <ng-content></ng-content>\n    <ng-content select=\"ap-symbol\"></ng-content>\n    @if (loading && !locked) {\n        <div class=\"loading-bar\"></div>\n    }\n</button>\n@if (locked) {\n    <div class=\"locked-symbol\">\n        <ap-symbol\n            symbolId=\"premium-star\"\n            size=\"sm\" />\n    </div>\n}\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-button.mjs","sources":["../../../libs/ui-components/button/src/button.component.ts","../../../libs/ui-components/button/src/button.component.html","../../../libs/ui-components/button/src/agorapulse-ui-components-button.ts"],"sourcesContent":["import {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    EventEmitter,\n    HostListener,\n    inject,\n    Input,\n    Output,\n    ViewChild,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { BaseButtonDirective } from '@agorapulse/ui-components/directives';\nimport { SymbolComponent } from '@agorapulse/ui-symbol';\nimport { MatMenuModule, MatMenuPanel } from '@angular/material/menu';\n\ntype ButtonConfig =\n    | { style: 'primary'; color: 'orange' | 'blue' }\n    | { style: 'secondary'; color: 'orange' | 'blue' }\n    | { style: 'stroked'; color: 'grey' | 'blue' }\n    | { style: 'stroked-transparent'; color: 'grey' | 'blue' }\n    | { style: 'ghost'; color: 'grey' | 'blue' | 'red' };\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-button',\n    styleUrls: ['./button.component.scss'],\n    standalone: true,\n    imports: [SymbolComponent, MatMenuModule],\n    providers: [],\n    templateUrl: './button.component.html',\n    encapsulation: ViewEncapsulation.None,\n    hostDirectives: [BaseButtonDirective],\n    // eslint-disable-next-line @angular-eslint/no-host-metadata-property\n    host: {\n        '[attr.disabled]': 'disabled || null',\n    },\n})\nexport class ButtonComponent {\n    readonly baseButtonDirective: BaseButtonDirective = inject(BaseButtonDirective, { self: true });\n\n    @ViewChild('button') buttonElement!: ElementRef<HTMLButtonElement>;\n\n    @Input() ariaLabel: string = '';\n    @Input({\n        transform: booleanAttribute,\n    })\n    disabled: boolean | undefined = false;\n    @Input({\n        required: true,\n    })\n    name: string = '';\n    @Input() form: string | undefined = undefined;\n    @Input() config: ButtonConfig = {\n        style: 'primary',\n        color: 'orange',\n    };\n    @Input() loading: boolean | undefined = false;\n    @Input() locked: boolean = false;\n    @Input() menuTrigger: MatMenuPanel | null = null;\n    @Input() symbolPosition: 'left' | 'right' = 'right';\n\n    @Output() menuOpened: EventEmitter<void> = new EventEmitter();\n    @Output() menuClosed: EventEmitter<void> = new EventEmitter();\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() click: EventEmitter<MouseEvent> = new EventEmitter();\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() focus: EventEmitter<FocusEvent> = new EventEmitter();\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() blur: EventEmitter<FocusEvent> = new EventEmitter();\n\n    // Specific ionic behaviour with modal trigger on html side. We cannot use stopImmediatePropagation otherwise the modal doesn't open.\n    // Maybe we can remove this hack once we rename click event by onClick\n    @Input() ionicModalEnabled: boolean = false;\n\n    focused: boolean = false;\n\n    onClickHandle($event: MouseEvent): void {\n        if (this.disabled || this.loading) {\n            return;\n        }\n        if (!this.ionicModalEnabled) {\n            $event.stopImmediatePropagation();\n        }\n        this.click.emit($event);\n        this.buttonElement.nativeElement.blur();\n        this.blur.emit($event);\n    }\n\n    onBlurHandle($event: FocusEvent): void {\n        this.focused = false;\n        this.blur.emit($event);\n    }\n\n    onFocusHandle($event: FocusEvent): void {\n        this.focused = true;\n        this.focus.emit($event);\n    }\n\n    @HostListener('window:keyup.space', ['$event'])\n    onSpaceKeyUp(event: KeyboardEvent) {\n        if (this.focused && !this.disabled && !this.loading) {\n            event.preventDefault();\n            this.buttonElement.nativeElement.click();\n        }\n    }\n}\n","<button\n    #button\n    #trigger=\"matMenuTrigger\"\n    role=\"button\"\n    [matMenuTriggerFor]=\"menuTrigger\"\n    [class.primary]=\"config.style === 'primary' && !locked\"\n    [class.secondary]=\"config.style === 'secondary' && !locked\"\n    [class.ghost]=\"config.style === 'ghost' && !locked\"\n    [class.stroked]=\"(config.style === 'stroked' || config.style === 'stroked-transparent') && !locked\"\n    [class.transparent]=\"config.style === 'stroked-transparent' && !locked\"\n    [class.orange]=\"config.color === 'orange' && !locked\"\n    [class.blue]=\"config.color === 'blue' && !locked\"\n    [class.red]=\"config.color === 'red' && !locked\"\n    [class.grey]=\"config.color === 'grey' && !locked\"\n    [class.loading]=\"loading && !locked\"\n    [class.locked]=\"locked\"\n    [class.inverse]=\"symbolPosition === 'left'\"\n    [disabled]=\"disabled && !locked\"\n    [name]=\"name\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n    [attr.id]=\"baseButtonDirective.hostId\"\n    [attr.type]=\"baseButtonDirective.hostType\"\n    [attr.form]=\"form\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    (click)=\"onClickHandle($event)\"\n    (focus)=\"onFocusHandle($event)\"\n    (blur)=\"onBlurHandle($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\">\n    <ng-content></ng-content>\n    <ng-content select=\"ap-symbol\"></ng-content>\n    @if (loading && !locked) {\n        <div class=\"loading-bar\"></div>\n    }\n</button>\n@if (locked) {\n    <div class=\"locked-symbol\">\n        <ap-symbol\n            symbolId=\"premium-star\"\n            size=\"sm\" />\n    </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}