import * as i1 from '@agorapulse/ui-symbol';
import { networkDescription, apUser, apMask, 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 { input, booleanAttribute, signal, computed, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';

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: 20,
    36: 16,
    32: 16,
    24: 12,
    16: 8,
};
const automaticBigSymbolNetwork = ['youtube'];
class AvatarComponent {
    ngStyle;
    profilePicture = input(...(ngDevMode ? [undefined, { debugName: "profilePicture" }] : /* istanbul ignore next */ []));
    alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
    network = input(undefined, { ...(ngDevMode ? { debugName: "network" } : /* istanbul ignore next */ {}), transform: (v) => (v !== undefined ? v : v) });
    size = input(40, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
    username = input(...(ngDevMode ? [undefined, { debugName: "username" }] : /* istanbul ignore next */ []));
    showInitials = input(...(ngDevMode ? [undefined, { debugName: "showInitials" }] : /* istanbul ignore next */ []));
    bigNetwork = input(false, ...(ngDevMode ? [{ debugName: "bigNetwork" }] : /* istanbul ignore next */ []));
    anonymous = input(false, ...(ngDevMode ? [{ debugName: "anonymous" }] : /* istanbul ignore next */ []));
    online = input(false, ...(ngDevMode ? [{ debugName: "online" }] : /* istanbul ignore next */ []));
    hideBigNetwork = input(false, { ...(ngDevMode ? { debugName: "hideBigNetwork" } : /* istanbul ignore next */ {}), alias: 'youtubeAvatarMode' }); // TODO: rename youtubeAvatarMode to hideBigNetwork in platform
    rounded = input(true, { ...(ngDevMode ? { debugName: "rounded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    imageError = signal(false, ...(ngDevMode ? [{ debugName: "imageError" }] : /* istanbul ignore next */ []));
    backgroundView = computed(() => this.buildBackgroundView(), ...(ngDevMode ? [{ debugName: "backgroundView" }] : /* istanbul ignore next */ []));
    overlayView = computed(() => this.buildOverlayView(), ...(ngDevMode ? [{ debugName: "overlayView" }] : /* istanbul ignore next */ []));
    useBigNetwork = computed(() => {
        return (this.automaticBigSymbolNetwork() || this.bigNetwork()) && this.network();
    }, ...(ngDevMode ? [{ debugName: "useBigNetwork" }] : /* istanbul ignore next */ []));
    automaticBigSymbolNetwork = computed(() => {
        return automaticBigSymbolNetwork.includes(this.network());
    }, ...(ngDevMode ? [{ debugName: "automaticBigSymbolNetwork" }] : /* istanbul ignore next */ []));
    showBigNetworkBackground = computed(() => {
        return !this.anonymous() && this.useBigNetwork() && (!this.validProfilePicture() || !this.hideBigNetwork());
    }, ...(ngDevMode ? [{ debugName: "showBigNetworkBackground" }] : /* istanbul ignore next */ []));
    validProfilePicture = computed(() => {
        return !this.imageError() ? this.profilePicture() : undefined;
    }, ...(ngDevMode ? [{ debugName: "validProfilePicture" }] : /* istanbul ignore next */ []));
    constructor(symbolRegistry, ngStyle) {
        this.ngStyle = ngStyle;
        const networkSymbols = Object.values(networkDescription) //
            .flatMap(({ symbol }) => (typeof symbol !== 'string' ? [symbol] : []));
        symbolRegistry.registerSymbols([...networkSymbols, apUser, apMask]);
        effect(() => {
            this.ngStyle.ngStyle = this.buildHostStyle();
            this.ngStyle.ngDoCheck();
        });
        effect(() => {
            this.profilePicture(); // on change
            untracked(() => this.imageError.set(false));
        });
    }
    onImageError() {
        this.imageError.set(true);
    }
    buildBackgroundView() {
        let bgView;
        if (this.showBigNetworkBackground()) {
            bgView = { mode: 'symbol', symbolId: toNetworkSymbol(this.network()), big: true };
        }
        else if (this.anonymous()) {
            bgView = { mode: 'symbol', symbolId: apMask.name };
        }
        else {
            const profilePicture = this.validProfilePicture();
            if (profilePicture) {
                bgView = {
                    mode: 'image',
                    image: {
                        src: profilePicture,
                        size: +this.size(),
                        alt: this.alt(),
                    },
                };
            }
            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: apUser.name };
                }
            }
        }
        return bgView;
    }
    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: "21.2.16", ngImport: i0, type: AvatarComponent, deps: [{ token: i1.SymbolRegistry }, { token: i2.NgStyle }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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: { attributes: { "role": "presentation" }, 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(--comp-avatar-background-color);box-shadow:var(--comp-avatar-background-shadow)}.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;width:100%}.bg-symbol:not(.big) ap-symbol{color:var(--comp-avatar-symbol-color);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{width:100%}.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(--comp-avatar-initials-weight);font-size:var(--ap-avatar-initials-size);font-family:Averta;color:var(--comp-avatar-initials-color)}.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:var(--comp-avatar-background-shadow)}.ovl-network.round{border-radius:100%}.ovl-network.instagram{border-radius:28%}.ovl-network.linkedin{border-radius:6%}.ovl-network.googleMyBusiness,.ovl-network.google,.ovl-network.meta{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;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", "decoding", "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: "21.2.16", ngImport: i0, type: AvatarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ap-avatar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgOptimizedImage, SymbolComponent, NgClass, NetworkSymbolPipe], hostDirectives: [NgStyle], host: {
                        '[class.background-default]': '!showBigNetworkBackground()',
                        role: 'presentation',
                    }, 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(--comp-avatar-background-color);box-shadow:var(--comp-avatar-background-shadow)}.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;width:100%}.bg-symbol:not(.big) ap-symbol{color:var(--comp-avatar-symbol-color);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{width:100%}.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(--comp-avatar-initials-weight);font-size:var(--ap-avatar-initials-size);font-family:Averta;color:var(--comp-avatar-initials-color)}.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:var(--comp-avatar-background-shadow)}.ovl-network.round{border-radius:100%}.ovl-network.instagram{border-radius:28%}.ovl-network.linkedin{border-radius:6%}.ovl-network.googleMyBusiness,.ovl-network.google,.ovl-network.meta{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;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 }], propDecorators: { profilePicture: [{ type: i0.Input, args: [{ isSignal: true, alias: "profilePicture", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], network: [{ type: i0.Input, args: [{ isSignal: true, alias: "network", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], username: [{ type: i0.Input, args: [{ isSignal: true, alias: "username", required: false }] }], showInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInitials", required: false }] }], bigNetwork: [{ type: i0.Input, args: [{ isSignal: true, alias: "bigNetwork", required: false }] }], anonymous: [{ type: i0.Input, args: [{ isSignal: true, alias: "anonymous", required: false }] }], online: [{ type: i0.Input, args: [{ isSignal: true, alias: "online", required: false }] }], hideBigNetwork: [{ type: i0.Input, args: [{ isSignal: true, alias: "youtubeAvatarMode", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { AvatarComponent };
//# sourceMappingURL=agorapulse-ui-components-avatar.mjs.map
