@agorapulse/ui-components 15.1.31 → 16.0.0-rc.0

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

@@ -0,0 +1,216 @@
+import * as i1 from '@agorapulse/ui-symbol';
+import { apSingleNeutral, apShowTheaterMaskHappy, apFacebookOfficial, apTwitterOfficial, apLinkedinOfficial, apYoutubeOfficial, apTiktokOfficial, apGoogleMyBusinessOfficial, apPinterestOfficial, SymbolComponent } from '@agorapulse/ui-symbol';
+import { NgIf, NgForOf, NgOptimizedImage } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostBinding } from '@angular/core';
+import { BehaviorSubject, Observable, of, map, combineLatest } from 'rxjs';
+import * as i2 from '@ngrx/component';
+import { LetModule } from '@ngrx/component';
+
+const onlineIconSizeByAvatarSize = {
+    56: 16,
+    48: 12,
+    40: 12,
+    36: 8,
+    32: 8,
+    24: 6,
+    16: 6,
+};
+const symbolSizeByAvatarSize = {
+    56: 28,
+    48: 24,
+    40: 20,
+    36: 18,
+    32: 16,
+    24: 12,
+    16: 8,
+};
+const networkSizeByAvatarSize = {
+    56: 16,
+    48: 16,
+    40: 16,
+    36: 16,
+    32: 12,
+    24: 12,
+    16: 8,
+};
+const initialSizeByAvatarSize = {
+    56: 28,
+    48: 24,
+    40: 22,
+    36: 18,
+    32: 18,
+    24: 14,
+    16: 10,
+};
+class AvatarComponent {
+    symbolRegistry;
+    elementRef;
+    networkSymbolByNetwork = {
+        facebook: 'facebook-official',
+        instagram: 'instagram-official',
+        twitter: 'twitter-official',
+        linkedin: 'linkedin-official',
+        tiktok: 'tiktok-official',
+        youtube: 'youtube-official',
+        pinterest: 'pinterest-official',
+        googleMyBusiness: 'google-my-business-official',
+        google: 'google-my-business-official',
+    };
+    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);
+    }
+    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);
+    }
+    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);
+    constructor(symbolRegistry, elementRef) {
+        this.symbolRegistry = symbolRegistry;
+        this.elementRef = elementRef;
+        this.symbolRegistry.registerSymbols([
+            apSingleNeutral,
+            apShowTheaterMaskHappy,
+            apFacebookOfficial,
+            apTwitterOfficial,
+            apLinkedinOfficial,
+            apYoutubeOfficial,
+            apTiktokOfficial,
+            apGoogleMyBusinessOfficial,
+            apPinterestOfficial,
+        ]);
+        this.elementRef.nativeElement.style.setProperty('--ap-avatar-size', `40px`);
+        this.elementRef.nativeElement.style.setProperty('--ap-avatar-symbol-size', `${symbolSizeByAvatarSize[this.size$.value]}px`);
+    }
+    ngOnInit() {
+        this.initialsAvailable$ = this.username$.pipe(map(username => {
+            return !!username;
+        }));
+        this.displayProfilePicture$ = combineLatest([this.profilePicture$, this.anonymous$, this.imageError$, this.showInitials$]).pipe(map(([profilePicture, anonymous, imageError]) => {
+            return !!profilePicture && !anonymous && !imageError;
+        }));
+        this.displayInitials$ = combineLatest([
+            this.showInitials$,
+            this.anonymous$,
+            this.initialsAvailable$,
+            this.displayProfilePicture$,
+        ]).pipe(map(([showInitials, anonymous, initialsAvailable, displayProfilePicture]) => {
+            return showInitials && !anonymous && initialsAvailable && !displayProfilePicture;
+        }));
+        this.displaySingleNeutralSvg$ = combineLatest([
+            this.profilePicture$,
+            this.imageError$,
+            this.initialsAvailable$,
+            this.showInitials$,
+            this.anonymous$,
+            this.displayInitials$,
+            this.displayProfilePicture$,
+        ]).pipe(map(([profilePicture, imageError, initialsAvailable, showInitials, anonymous, displayInitials, displayProfilePicture]) => {
+            return ((!profilePicture || imageError || !initialsAvailable || (initialsAvailable && !showInitials)) &&
+                !anonymous &&
+                !displayInitials &&
+                !displayProfilePicture);
+        }));
+        this.displayAnonymous$ = combineLatest([this.anonymous$, this.rounded$]).pipe(map(([anonymous, rounded]) => {
+            return anonymous && rounded;
+        }));
+        this.displayOnline$ = combineLatest([this.online$, this.rounded$]).pipe(map(([online, rounded]) => {
+            return online && rounded;
+        }));
+        this.displayNetwork$ = combineLatest([this.network$, this.rounded$]).pipe(map(([network, rounded]) => {
+            return !!network && rounded;
+        }));
+        this.initials$ = combineLatest([this.displayInitials$, this.username$]).pipe(map(([displayInitials, username]) => {
+            if ((displayInitials && !username) || !displayInitials) {
+                return '';
+            }
+            this.elementRef.nativeElement.style.setProperty('--ap-avatar-initials-size', `${initialSizeByAvatarSize[this.size$.value]}px`);
+            const names = username?.split(' ');
+            return `${names[0].charAt(0).toUpperCase()}`;
+        }));
+    }
+    onImageError() {
+        this.imageError$.next(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: AvatarComponent, deps: [{ token: i1.SymbolRegistry }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: AvatarComponent, isStandalone: true, selector: "ap-avatar", inputs: { alternativeText: "alternativeText", anonymous: "anonymous", username: "username", network: "network", online: "online", profilePicture: "profilePicture", showInitials: "showInitials", alt: "alt", rounded: "rounded", size: "size" }, host: { properties: { "class.rounded-avatar": "this.roundedAvatar" } }, ngImport: i0, template: "<ng-container\n    *ngrxLet=\"{\n        displayProfilePicture: displayProfilePicture$,\n        displaySingleNeutralSvg: displaySingleNeutralSvg$,\n        displayInitials: displayInitials$,\n        displayAnonymous: displayAnonymous$,\n        displayOnline: displayOnline$,\n        displayNetwork: displayNetwork$,\n        initials: initials$,\n        profilePicture: profilePicture$,\n        size: size$,\n        network: network$\n    } as avatarViewModel\">\n    <img\n        *ngIf=\"avatarViewModel.displayProfilePicture\"\n        [src]=\"avatarViewModel.profilePicture\"\n        [width]=\"avatarViewModel.size\"\n        [height]=\"avatarViewModel.size\"\n        [alt]=\"alt\"\n        (error)=\"onImageError()\" />\n    <div\n        *ngIf=\"avatarViewModel.displaySingleNeutralSvg\"\n        class=\"no-profile-picture\">\n        <ap-symbol symbolId=\"single-neutral\" />\n    </div>\n\n    <div\n        *ngIf=\"avatarViewModel.displayAnonymous\"\n        class=\"anonymous\">\n        <ap-symbol symbolId=\"show-theater-mask-happy\" />\n    </div>\n    <div\n        *ngIf=\"avatarViewModel.displayOnline\"\n        class=\"online\"></div>\n    <div\n        *ngIf=\"avatarViewModel.displayNetwork\"\n        class=\"network\"\n        [class.facebook]=\"avatarViewModel.network === 'facebook'\"\n        [class.linkedin]=\"avatarViewModel.network === 'linkedin'\"\n        [class.twitter]=\"avatarViewModel.network === 'twitter'\"\n        [class.youtube]=\"avatarViewModel.network === 'youtube'\"\n        [class.googleMyBusiness]=\"avatarViewModel.network === 'googleMyBusiness' || avatarViewModel.network === 'google'\"\n        [class.instagram]=\"avatarViewModel.network === 'instagram'\"\n        [class.tiktok]=\"avatarViewModel.network === 'tiktok'\">\n        <ap-symbol\n            *ngIf=\"avatarViewModel.network\"\n            [symbolId]=\"networkSymbolByNetwork[avatarViewModel.network]\" />\n    </div>\n\n    <div\n        *ngIf=\"avatarViewModel.displayInitials\"\n        class=\"initials\">\n        {{ avatarViewModel.initials }}\n    </div>\n</ng-container>\n", styles: ["ap-avatar{display:flex;justify-content:center;align-items:center;height:var(--ap-avatar-size);min-height:var(--ap-avatar-size);max-height:var(--ap-avatar-size);width:var(--ap-avatar-size);min-width:var(--ap-avatar-size);max-width:var(--ap-avatar-size);border-radius:var(--sys-border-radius-sm);background:var(--ref-color-grey-40);box-sizing:border-box;position:relative;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.facebook,ap-avatar .network.twitter,ap-avatar .network.youtube,ap-avatar .network.tiktok,ap-avatar .network,ap-avatar .network pinterest{border-radius:100%}ap-avatar .network.instagram{border-radius:28%}ap-avatar .network.linkedin{border-radius:6%}ap-avatar .network.googleMyBusiness,ap-avatar .network.google{box-shadow:none;border-radius:unset}ap-avatar .network ap-symbol img{border-radius:0;border:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "ngmodule", type: LetModule }, { kind: "directive", type: i2.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-avatar', standalone: true, imports: [NgIf, NgForOf, NgOptimizedImage, SymbolComponent, LetModule], encapsulation: ViewEncapsulation.None, template: "<ng-container\n    *ngrxLet=\"{\n        displayProfilePicture: displayProfilePicture$,\n        displaySingleNeutralSvg: displaySingleNeutralSvg$,\n        displayInitials: displayInitials$,\n        displayAnonymous: displayAnonymous$,\n        displayOnline: displayOnline$,\n        displayNetwork: displayNetwork$,\n        initials: initials$,\n        profilePicture: profilePicture$,\n        size: size$,\n        network: network$\n    } as avatarViewModel\">\n    <img\n        *ngIf=\"avatarViewModel.displayProfilePicture\"\n        [src]=\"avatarViewModel.profilePicture\"\n        [width]=\"avatarViewModel.size\"\n        [height]=\"avatarViewModel.size\"\n        [alt]=\"alt\"\n        (error)=\"onImageError()\" />\n    <div\n        *ngIf=\"avatarViewModel.displaySingleNeutralSvg\"\n        class=\"no-profile-picture\">\n        <ap-symbol symbolId=\"single-neutral\" />\n    </div>\n\n    <div\n        *ngIf=\"avatarViewModel.displayAnonymous\"\n        class=\"anonymous\">\n        <ap-symbol symbolId=\"show-theater-mask-happy\" />\n    </div>\n    <div\n        *ngIf=\"avatarViewModel.displayOnline\"\n        class=\"online\"></div>\n    <div\n        *ngIf=\"avatarViewModel.displayNetwork\"\n        class=\"network\"\n        [class.facebook]=\"avatarViewModel.network === 'facebook'\"\n        [class.linkedin]=\"avatarViewModel.network === 'linkedin'\"\n        [class.twitter]=\"avatarViewModel.network === 'twitter'\"\n        [class.youtube]=\"avatarViewModel.network === 'youtube'\"\n        [class.googleMyBusiness]=\"avatarViewModel.network === 'googleMyBusiness' || avatarViewModel.network === 'google'\"\n        [class.instagram]=\"avatarViewModel.network === 'instagram'\"\n        [class.tiktok]=\"avatarViewModel.network === 'tiktok'\">\n        <ap-symbol\n            *ngIf=\"avatarViewModel.network\"\n            [symbolId]=\"networkSymbolByNetwork[avatarViewModel.network]\" />\n    </div>\n\n    <div\n        *ngIf=\"avatarViewModel.displayInitials\"\n        class=\"initials\">\n        {{ avatarViewModel.initials }}\n    </div>\n</ng-container>\n", styles: ["ap-avatar{display:flex;justify-content:center;align-items:center;height:var(--ap-avatar-size);min-height:var(--ap-avatar-size);max-height:var(--ap-avatar-size);width:var(--ap-avatar-size);min-width:var(--ap-avatar-size);max-width:var(--ap-avatar-size);border-radius:var(--sys-border-radius-sm);background:var(--ref-color-grey-40);box-sizing:border-box;position:relative;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.facebook,ap-avatar .network.twitter,ap-avatar .network.youtube,ap-avatar .network.tiktok,ap-avatar .network,ap-avatar .network pinterest{border-radius:100%}ap-avatar .network.instagram{border-radius:28%}ap-avatar .network.linkedin{border-radius:6%}ap-avatar .network.googleMyBusiness,ap-avatar .network.google{box-shadow:none;border-radius:unset}ap-avatar .network ap-symbol img{border-radius:0;border:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.SymbolRegistry }, { type: i0.ElementRef }]; }, propDecorators: { alternativeText: [{
+                type: Input
+            }], 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
+            }], size: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AvatarComponent };
+//# sourceMappingURL=agorapulse-ui-components-avatar.mjs.map

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

@@ -0,0 +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    apFacebookOfficial,\n    apGoogleMyBusinessOfficial,\n    apLinkedinOfficial,\n    apShowTheaterMaskHappy,\n    apSingleNeutral,\n    apTiktokOfficial,\n    apTwitterOfficial,\n    apYoutubeOfficial,\n    apPinterestOfficial,\n    SymbolComponent,\n    SymbolRegistry,\n} from '@agorapulse/ui-symbol';\nimport { NgForOf, NgIf, NgOptimizedImage } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, ElementRef, HostBinding, Input, OnInit, ViewEncapsulation } from '@angular/core';\nimport { BehaviorSubject, combineLatest, map, Observable, of } from 'rxjs';\nimport { LetModule } from '@ngrx/component';\n\nexport type AvatarSize = 56 | 48 | 40 | 36 | 32 | 24 | 16;\nexport type AvatarNetwork =\n    | 'facebook'\n    | 'instagram'\n    | 'twitter'\n    | 'linkedin'\n    | 'tiktok'\n    | 'youtube'\n    | 'pinterest'\n    | 'googleMyBusiness'\n    | 'google';\n\nconst onlineIconSizeByAvatarSize: Record<AvatarSize, number> = {\n    56: 16,\n    48: 12,\n    40: 12,\n    36: 8,\n    32: 8,\n    24: 6,\n    16: 6,\n};\n\nconst symbolSizeByAvatarSize: Record<AvatarSize, number> = {\n    56: 28,\n    48: 24,\n    40: 20,\n    36: 18,\n    32: 16,\n    24: 12,\n    16: 8,\n};\n\nconst networkSizeByAvatarSize: Record<AvatarSize, number> = {\n    56: 16,\n    48: 16,\n    40: 16,\n    36: 16,\n    32: 12,\n    24: 12,\n    16: 8,\n};\n\nconst initialSizeByAvatarSize: Record<AvatarSize, number> = {\n    56: 28,\n    48: 24,\n    40: 22,\n    36: 18,\n    32: 18,\n    24: 14,\n    16: 10,\n};\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-avatar',\n    styleUrls: ['./avatar.component.scss'],\n    standalone: true,\n    imports: [NgIf, NgForOf, NgOptimizedImage, SymbolComponent, LetModule],\n    templateUrl: './avatar.component.html',\n    encapsulation: ViewEncapsulation.None,\n})\nexport class AvatarComponent implements OnInit {\n    readonly networkSymbolByNetwork: Record<AvatarNetwork, string> = {\n        facebook: 'facebook-official',\n        instagram: 'instagram-official',\n        twitter: 'twitter-official',\n        linkedin: 'linkedin-official',\n        tiktok: 'tiktok-official',\n        youtube: 'youtube-official',\n        pinterest: 'pinterest-official',\n        googleMyBusiness: 'google-my-business-official',\n        google: 'google-my-business-official',\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    set rounded(rounded: boolean) {\n        this.roundedAvatar = rounded;\n        this.rounded$.next(rounded);\n    }\n\n    @Input() set size(size: AvatarSize) {\n        this.size$.next(size);\n        this.elementRef.nativeElement.style.setProperty('--ap-avatar-size', `${size}px`);\n        this.elementRef.nativeElement.style.setProperty('--ap-avatar-symbol-size', `${symbolSizeByAvatarSize[size]}px`);\n        this.elementRef.nativeElement.style.setProperty('--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\n    constructor(private symbolRegistry: SymbolRegistry, private elementRef: ElementRef) {\n        this.symbolRegistry.registerSymbols([\n            apSingleNeutral,\n            apShowTheaterMaskHappy,\n            apFacebookOfficial,\n            apTwitterOfficial,\n            apLinkedinOfficial,\n            apYoutubeOfficial,\n            apTiktokOfficial,\n            apGoogleMyBusinessOfficial,\n            apPinterestOfficial,\n        ]);\n        this.elementRef.nativeElement.style.setProperty('--ap-avatar-size', `40px`);\n        this.elementRef.nativeElement.style.setProperty('--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.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    } as avatarViewModel\">\n    <img\n        *ngIf=\"avatarViewModel.displayProfilePicture\"\n        [src]=\"avatarViewModel.profilePicture\"\n        [width]=\"avatarViewModel.size\"\n        [height]=\"avatarViewModel.size\"\n        [alt]=\"alt\"\n        (error)=\"onImageError()\" />\n    <div\n        *ngIf=\"avatarViewModel.displaySingleNeutralSvg\"\n        class=\"no-profile-picture\">\n        <ap-symbol symbolId=\"single-neutral\" />\n    </div>\n\n    <div\n        *ngIf=\"avatarViewModel.displayAnonymous\"\n        class=\"anonymous\">\n        <ap-symbol symbolId=\"show-theater-mask-happy\" />\n    </div>\n    <div\n        *ngIf=\"avatarViewModel.displayOnline\"\n        class=\"online\"></div>\n    <div\n        *ngIf=\"avatarViewModel.displayNetwork\"\n        class=\"network\"\n        [class.facebook]=\"avatarViewModel.network === 'facebook'\"\n        [class.linkedin]=\"avatarViewModel.network === 'linkedin'\"\n        [class.twitter]=\"avatarViewModel.network === 'twitter'\"\n        [class.youtube]=\"avatarViewModel.network === 'youtube'\"\n        [class.googleMyBusiness]=\"avatarViewModel.network === 'googleMyBusiness' || avatarViewModel.network === 'google'\"\n        [class.instagram]=\"avatarViewModel.network === 'instagram'\"\n        [class.tiktok]=\"avatarViewModel.network === 'tiktok'\">\n        <ap-symbol\n            *ngIf=\"avatarViewModel.network\"\n            [symbolId]=\"networkSymbolByNetwork[avatarViewModel.network]\" />\n    </div>\n\n    <div\n        *ngIf=\"avatarViewModel.displayInitials\"\n        class=\"initials\">\n        {{ avatarViewModel.initials }}\n    </div>\n</ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;;AA8BA,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,CAAC;AAEF,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,CAAC;AAEF,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,CAAC;AAEF,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,CAAC;MAWW,eAAe,CAAA;AAiFJ,IAAA,cAAA,CAAA;AAAwC,IAAA,UAAA,CAAA;AAhFnD,IAAA,sBAAsB,GAAkC;AAC7D,QAAA,QAAQ,EAAE,mBAAmB;AAC7B,QAAA,SAAS,EAAE,oBAAoB;AAC/B,QAAA,OAAO,EAAE,kBAAkB;AAC3B,QAAA,QAAQ,EAAE,mBAAmB;AAC7B,QAAA,MAAM,EAAE,iBAAiB;AACzB,QAAA,OAAO,EAAE,kBAAkB;AAC3B,QAAA,SAAS,EAAE,oBAAoB;AAC/B,QAAA,gBAAgB,EAAE,6BAA6B;AAC/C,QAAA,MAAM,EAAE,6BAA6B;KACxC,CAAC;AAEF,IAAA,KAAK,GAAgC,IAAI,eAAe,CAAa,EAAE,CAAC,CAAC;AACzE,IAAA,eAAe,GAAwC,IAAI,eAAe,CAAqB,EAAE,CAAC,CAAC;AACnG,IAAA,QAAQ,GAA+C,IAAI,eAAe,CAA4B,SAAS,CAAC,CAAC;AAEzG,IAAA,gBAAgB,GAA4B,IAAI,eAAe,CAAS,EAAE,CAAC,CAAC;AAC5E,IAAA,UAAU,GAA6B,IAAI,eAAe,CAAU,KAAK,CAAC,CAAC;AAC3E,IAAA,SAAS,GAA4B,IAAI,eAAe,CAAS,EAAE,CAAC,CAAC;AACrE,IAAA,OAAO,GAA6B,IAAI,eAAe,CAAU,KAAK,CAAC,CAAC;AACxE,IAAA,aAAa,GAA6B,IAAI,eAAe,CAAU,KAAK,CAAC,CAAC;AAC9E,IAAA,QAAQ,GAA6B,IAAI,eAAe,CAAU,IAAI,CAAC,CAAC;IAEhF,IAAa,eAAe,CAAC,eAAuB,EAAA;AAChD,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KAC/C;IAED,IAAa,SAAS,CAAC,SAAkB,EAAA;AACrC,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACnC;IAED,IAAa,QAAQ,CAAC,QAAgB,EAAA;AAClC,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACjC;IAED,IAAa,OAAO,CAAC,OAAkC,EAAA;AACnD,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC5B,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,0BAA0B,EAAE,GAAG,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAI,EAAA,CAAA,CAAC,CAAC;KACjI;IAED,IAAa,MAAM,CAAC,MAAe,EAAA;AAC/B,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAC7B;IAED,IAAa,cAAc,CAAC,cAAkC,EAAA;AAC1D,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;AAC1C,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAChC;IAED,IAAa,YAAY,CAAC,YAAqB,EAAA;AAC3C,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KACzC;IACQ,GAAG,GAAG,EAAE,CAAC;IAGlB,aAAa,GAAG,IAAI,CAAC;IAErB,IACI,OAAO,CAAC,OAAgB,EAAA;AACxB,QAAA,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;AAC7B,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAC/B;IAED,IAAa,IAAI,CAAC,IAAgB,EAAA;AAC9B,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACtB,QAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,kBAAkB,EAAE,CAAA,EAAG,IAAI,CAAA,EAAA,CAAI,CAAC,CAAC;AACjF,QAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,GAAG,sBAAsB,CAAC,IAAI,CAAC,CAAA,EAAA,CAAI,CAAC,CAAC;AAChH,QAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,8BAA8B,EAAE,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAA,EAAA,CAAI,CAAC,CAAC;KAC5H;AAED,IAAA,sBAAsB,GAAwB,IAAI,UAAU,EAAW,CAAC;AACxE,IAAA,wBAAwB,GAAwB,IAAI,UAAU,EAAW,CAAC;AAC1E,IAAA,gBAAgB,GAAwB,IAAI,UAAU,EAAW,CAAC;AAClE,IAAA,iBAAiB,GAAwB,IAAI,UAAU,EAAW,CAAC;AACnE,IAAA,eAAe,GAAwB,IAAI,UAAU,EAAW,CAAC;AACjE,IAAA,cAAc,GAAwB,IAAI,UAAU,EAAW,CAAC;AAChE,IAAA,WAAW,GAA6B,IAAI,eAAe,CAAU,KAAK,CAAC,CAAC;AAC5E,IAAA,SAAS,GAAuB,IAAI,UAAU,EAAU,CAAC;AACzD,IAAA,kBAAkB,GAAwB,EAAE,CAAC,KAAK,CAAC,CAAC;IAEpD,WAAoB,CAAA,cAA8B,EAAU,UAAsB,EAAA;QAA9D,IAAc,CAAA,cAAA,GAAd,cAAc,CAAgB;QAAU,IAAU,CAAA,UAAA,GAAV,UAAU,CAAY;AAC9E,QAAA,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC;YAChC,eAAe;YACf,sBAAsB;YACtB,kBAAkB;YAClB,iBAAiB;YACjB,kBAAkB;YAClB,iBAAiB;YACjB,gBAAgB;YAChB,0BAA0B;YAC1B,mBAAmB;AACtB,SAAA,CAAC,CAAC;AACH,QAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,kBAAkB,EAAE,CAAA,IAAA,CAAM,CAAC,CAAC;QAC5E,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,GAAG,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAI,EAAA,CAAA,CAAC,CAAC;KAC/H;IAED,QAAQ,GAAA;AACJ,QAAA,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CACzC,GAAG,CAAC,QAAQ,IAAG;YACX,OAAO,CAAC,CAAC,QAAQ,CAAC;SACrB,CAAC,CACL,CAAC;AAEF,QAAA,IAAI,CAAC,sBAAsB,GAAG,aAAa,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAC3H,GAAG,CAAC,CAAC,CAAC,cAAc,EAAE,SAAS,EAAE,UAAU,CAAC,KAAI;YAC5C,OAAO,CAAC,CAAC,cAAc,IAAI,CAAC,SAAS,IAAI,CAAC,UAAU,CAAC;SACxD,CAAC,CACL,CAAC;AAEF,QAAA,IAAI,CAAC,gBAAgB,GAAG,aAAa,CAAC;AAClC,YAAA,IAAI,CAAC,aAAa;AAClB,YAAA,IAAI,CAAC,UAAU;AACf,YAAA,IAAI,CAAC,kBAAkB;AACvB,YAAA,IAAI,CAAC,sBAAsB;AAC9B,SAAA,CAAC,CAAC,IAAI,CACH,GAAG,CAAC,CAAC,CAAC,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,qBAAqB,CAAC,KAAI;YACxE,OAAO,YAAY,IAAI,CAAC,SAAS,IAAI,iBAAiB,IAAI,CAAC,qBAAqB,CAAC;SACpF,CAAC,CACL,CAAC;AAEF,QAAA,IAAI,CAAC,wBAAwB,GAAG,aAAa,CAAC;AAC1C,YAAA,IAAI,CAAC,eAAe;AACpB,YAAA,IAAI,CAAC,WAAW;AAChB,YAAA,IAAI,CAAC,kBAAkB;AACvB,YAAA,IAAI,CAAC,aAAa;AAClB,YAAA,IAAI,CAAC,UAAU;AACf,YAAA,IAAI,CAAC,gBAAgB;AACrB,YAAA,IAAI,CAAC,sBAAsB;SAC9B,CAAC,CAAC,IAAI,CACH,GAAG,CAAC,CAAC,CAAC,cAAc,EAAE,UAAU,EAAE,iBAAiB,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,qBAAqB,CAAC,KAAI;AACrH,YAAA,QACI,CAAC,CAAC,cAAc,IAAI,UAAU,IAAI,CAAC,iBAAiB,KAAK,iBAAiB,IAAI,CAAC,YAAY,CAAC;AAC5F,gBAAA,CAAC,SAAS;AACV,gBAAA,CAAC,eAAe;gBAChB,CAAC,qBAAqB,EACxB;SACL,CAAC,CACL,CAAC;QAEF,IAAI,CAAC,iBAAiB,GAAG,aAAa,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CACzE,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,CAAC,KAAI;YACzB,OAAO,SAAS,IAAI,OAAO,CAAC;SAC/B,CAAC,CACL,CAAC;QAEF,IAAI,CAAC,cAAc,GAAG,aAAa,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CACnE,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,KAAI;YACtB,OAAO,MAAM,IAAI,OAAO,CAAC;SAC5B,CAAC,CACL,CAAC;QAEF,IAAI,CAAC,eAAe,GAAG,aAAa,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CACrE,GAAG,CAAC,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,KAAI;AACvB,YAAA,OAAO,CAAC,CAAC,OAAO,IAAI,OAAO,CAAC;SAC/B,CAAC,CACL,CAAC;QAEF,IAAI,CAAC,SAAS,GAAG,aAAa,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CACxE,GAAG,CAAC,CAAC,CAAC,eAAe,EAAE,QAAQ,CAAC,KAAI;YAChC,IAAI,CAAC,eAAe,IAAI,CAAC,QAAQ,KAAK,CAAC,eAAe,EAAE;AACpD,gBAAA,OAAO,EAAE,CAAC;AACb,aAAA;YACD,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAC3C,2BAA2B,EAC3B,GAAG,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAI,EAAA,CAAA,CACnD,CAAC;YACF,MAAM,KAAK,GAAG,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;AACnC,YAAA,OAAO,CAAG,EAAA,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC;SAChD,CAAC,CACL,CAAC;KACL;IAED,YAAY,GAAA;AACR,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC/B;wGA/KQ,eAAe,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,cAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,+XC/E5B,0jEAuDA,EAAA,MAAA,EAAA,CAAA,ypFAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDoBc,IAAI,EAA6B,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,eAAe,4FAAE,SAAS,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,oBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAI5D,eAAe,EAAA,UAAA,EAAA,CAAA;kBAT3B,SAAS;sCACW,uBAAuB,CAAC,MAAM,EACrC,QAAA,EAAA,WAAW,cAET,IAAI,EAAA,OAAA,EACP,CAAC,IAAI,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,SAAS,CAAC,EAAA,aAAA,EAEvD,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,0jEAAA,EAAA,MAAA,EAAA,CAAA,ypFAAA,CAAA,EAAA,CAAA;8HA0BxB,eAAe,EAAA,CAAA;sBAA3B,KAAK;gBAIO,SAAS,EAAA,CAAA;sBAArB,KAAK;gBAIO,QAAQ,EAAA,CAAA;sBAApB,KAAK;gBAIO,OAAO,EAAA,CAAA;sBAAnB,KAAK;gBAKO,MAAM,EAAA,CAAA;sBAAlB,KAAK;gBAIO,cAAc,EAAA,CAAA;sBAA1B,KAAK;gBAKO,YAAY,EAAA,CAAA;sBAAxB,KAAK;gBAGG,GAAG,EAAA,CAAA;sBAAX,KAAK;gBAGN,aAAa,EAAA,CAAA;sBADZ,WAAW;uBAAC,sBAAsB,CAAA;gBAI/B,OAAO,EAAA,CAAA;sBADV,KAAK;gBAMO,IAAI,EAAA,CAAA;sBAAhB,KAAK;;;AE/IV;;AAEG;;;;"}

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

@@ -0,0 +1,116 @@
+import * as i0 from '@angular/core';
+import { inject, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Input, Output, HostListener } from '@angular/core';
+import { NgIf, CommonModule } from '@angular/common';
+import { SymbolComponent } from '@agorapulse/ui-symbol';
+import * as i2 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i1 from '@agorapulse/ui-components/directives';
+import { BaseButtonDirective } from '@agorapulse/ui-components/directives';
+
+class ButtonComponent {
+    baseButtonDirective = inject(BaseButtonDirective, { self: true });
+    buttonElement;
+    ariaLabel = '';
+    disabled = false;
+    name = '';
+    form = undefined;
+    config = {
+        style: 'primary',
+        color: 'orange',
+    };
+    loading = false;
+    locked = false;
+    menuTrigger = null;
+    symbolPosition = 'right';
+    menuOpened = new EventEmitter();
+    menuClosed = new EventEmitter();
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    click = new EventEmitter();
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    focus = new EventEmitter();
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    blur = new EventEmitter();
+    // Specific ionic behaviour with modal trigger on html side. We cannot use stopImmediatePropagation otherwise the modal doesn't open.
+    // Maybe we can remove this hack once we rename click event by onClick
+    ionicModalEnabled = false;
+    focused = false;
+    onClickHandle($event) {
+        if (this.disabled || this.loading) {
+            return;
+        }
+        if (!this.ionicModalEnabled) {
+            $event.stopImmediatePropagation();
+        }
+        this.click.emit($event);
+        this.buttonElement.nativeElement.blur();
+        this.blur.emit($event);
+    }
+    onBlurHandle($event) {
+        this.focused = false;
+        this.blur.emit($event);
+    }
+    onFocusHandle($event) {
+        this.focused = true;
+        this.focus.emit($event);
+    }
+    onSpaceKeyUp(event) {
+        if (this.focused && !this.disabled && !this.loading) {
+            event.preventDefault();
+            this.buttonElement.nativeElement.click();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: ButtonComponent, isStandalone: true, selector: "ap-button", inputs: { ariaLabel: "ariaLabel", disabled: "disabled", 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    <div\n        *ngIf=\"loading && !locked\"\n        class=\"loading-bar\"></div>\n</button>\n<div\n    *ngIf=\"locked\"\n    class=\"locked-symbol\">\n    <ap-symbol\n        symbolId=\"premium-star\"\n        size=\"micro\" />\n</div>\n", styles: ["ap-button{--loading-bar-width: 50px;display:inline-flex;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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-button', standalone: true, imports: [NgIf, SymbolComponent, CommonModule, MatMenuModule], providers: [], encapsulation: ViewEncapsulation.None, hostDirectives: [BaseButtonDirective], host: {
+                        '[attr.disabled]': 'disabled || null',
+                    }, 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    <div\n        *ngIf=\"loading && !locked\"\n        class=\"loading-bar\"></div>\n</button>\n<div\n    *ngIf=\"locked\"\n    class=\"locked-symbol\">\n    <ap-symbol\n        symbolId=\"premium-star\"\n        size=\"micro\" />\n</div>\n", styles: ["ap-button{--loading-bar-width: 50px;display:inline-flex;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"] }]
+        }], propDecorators: { buttonElement: [{
+                type: ViewChild,
+                args: ['button']
+            }], ariaLabel: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], name: [{
+                type: Input,
+                args: [{
+                        required: true,
+                    }]
+            }], form: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], locked: [{
+                type: Input
+            }], menuTrigger: [{
+                type: Input
+            }], symbolPosition: [{
+                type: Input
+            }], menuOpened: [{
+                type: Output
+            }], menuClosed: [{
+                type: Output
+            }], click: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }], blur: [{
+                type: Output
+            }], ionicModalEnabled: [{
+                type: Input
+            }], onSpaceKeyUp: [{
+                type: HostListener,
+                args: ['window:keyup.space', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ButtonComponent };
+//# sourceMappingURL=agorapulse-ui-components-button.mjs.map

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

@@ -0,0 +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    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    EventEmitter,\n    HostListener,\n    inject,\n    Input,\n    Output,\n    ViewChild,\n    ViewEncapsulation,\n} from '@angular/core';\nimport { CommonModule, NgIf } from '@angular/common';\nimport { SymbolComponent } from '@agorapulse/ui-symbol';\nimport { MatMenuModule, MatMenuPanel } from '@angular/material/menu';\nimport { BaseButtonDirective } from '@agorapulse/ui-components/directives';\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: [NgIf, SymbolComponent, CommonModule, 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() 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    <div\n        *ngIf=\"loading && !locked\"\n        class=\"loading-bar\"></div>\n</button>\n<div\n    *ngIf=\"locked\"\n    class=\"locked-symbol\">\n    <ap-symbol\n        symbolId=\"premium-star\"\n        size=\"micro\" />\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}