ngx-avatar-2
Version: 
A universal avatar component for Angular applications that fetches / generates avatar based on the information you have about the user.
236 lines (226 loc) • 8.42 kB
TypeScript
import * as i0 from '@angular/core';
import { OnChanges, OnDestroy, EventEmitter, SimpleChanges, ModuleWithProviders } from '@angular/core';
import * as i1 from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
declare enum AvatarSource {
    FACEBOOK = "facebook",/** @debug API version changed */
    GOOGLE = "google",/** @debug API version changed */
    TWITTER = "twitter",/** @deprecated Twitter/X API changes make this unreliable */
    INSTAGRAM = "instagram",/** @debug API version changed */
    VKONTAKTE = "vkontakte",/** @debug API version changed */
    GRAVATAR = "gravatar",
    GITHUB = "github",
    CUSTOM = "custom",
    INITIALS = "initials",
    VALUE = "value"
}
/**
 * Represents avatar configuration object.
 */
interface AvatarConfig {
    /**
     * The avatars colors.
     */
    colors?: string[];
    /**
     * The order in which the avatar sources will be used.
     */
    sourcePriorityOrder?: AvatarSource[];
}
/**
 * Contract of all Sources.
 * Every source must implements the fetch method
 * in order to provide the avatar source.
 */
interface Source {
    /**
     * The avatar source type (Facebook, Twitter, etc.).
     */
    readonly sourceType: AvatarSource;
    /**
     * The avatar id in which it's source recognizes it.
     */
    sourceId: string;
    /**
     * Gets the avatar that usually is a URL, but,
     * for example it can also be a string of initials from the name.
     */
    getAvatar(size: number): string;
}
/**
 * Factory class that implements factory method pattern.
 * Used to create Source implementation class based
 * on the source Type
 */
declare class SourceFactory {
    private sources;
    constructor();
    newInstance(sourceType: AvatarSource, sourceValue: string): Source;
    static ɵfac: i0.ɵɵFactoryDeclaration<SourceFactory, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<SourceFactory>;
}
type Style = Partial<CSSStyleDeclaration>;
/**
 * Universal avatar component that
 * generates avatar from different sources
 *
 * export
 * class AvatarComponent
 * implements {OnChanges}
 */
declare class AvatarComponent implements OnChanges, OnDestroy {
    round: boolean;
    size: string | number;
    textSizeRatio: number;
    bgColor: string | undefined;
    fgColor: string;
    borderColor: string | undefined;
    style: Style;
    cornerRadius: string | number;
    alt?: string;
    ariaLabel?: string;
    role: string;
    clickable: boolean;
    facebook?: string | null;
    twitter?: string | null;
    google?: string | null;
    instagram?: string | null;
    vkontakte?: string | null;
    gravatar?: string | null;
    github?: string | null;
    custom?: string | null;
    initials?: string | null;
    value?: string | null;
    placeholder?: string;
    initialsSize: string | number;
    clickOnAvatar: EventEmitter<Source>;
    isAlive: boolean;
    avatarSrc: string | null;
    avatarText: string | null;
    avatarStyle: Style;
    hostStyle: Style;
    private currentIndex;
    private sources;
    sourceFactory: SourceFactory;
    private avatarService;
    private cdr;
    onAvatarClicked(): void;
    onKeyDown(event: KeyboardEvent): void;
    /**
     * Generate accessible alt text for avatar images
     */
    getAltText(): string;
    /**
     * Generate ARIA label for accessibility
     */
    getAriaLabel(): string;
    /**
     * Detect inputs change
     *
     * param {{ [propKey: string]: SimpleChange }} changes
     *
     * memberof AvatarComponent
     */
    ngOnChanges(changes: SimpleChanges): void;
    /**
     * Fetch avatar source
     *
     * memberOf AvatarComponent
     */
    fetchAvatarSource(): void;
    private findNextSource;
    ngOnDestroy(): void;
    /**
     * Initialize the avatar component and its fallback system
     */
    private initializeAvatar;
    private sortAvatarSources;
    private buildTextAvatar;
    private buildImageAvatar;
    /**
     *
     * returns initials style
     *
     * memberOf AvatarComponent
     */
    private getInitialsStyle;
    /**
     *
     * returns image style
     *
     * memberOf AvatarComponent
     */
    private getImageStyle;
    /**
     * Fetch avatar image asynchronously.
     *
     * param {Source} source represents avatar source
     * memberof AvatarComponent
     */
    private fetchAndProcessAsyncAvatar;
    /**
     * Add avatar source
     *
     * param sourceType avatar source type e.g facebook,twitter, etc.
     * param sourceValue  source value e.g facebookId value, etc.
     */
    private addSource;
    /**
     * Remove avatar source
     *
     * param sourceType avatar source type e.g facebook,twitter, etc.
     */
    private removeSource;
    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "ngx-avatar", never, { "round": { "alias": "round"; "required": false; }; "size": { "alias": "size"; "required": false; }; "textSizeRatio": { "alias": "textSizeRatio"; "required": false; }; "bgColor": { "alias": "bgColor"; "required": false; }; "fgColor": { "alias": "fgColor"; "required": false; }; "borderColor": { "alias": "borderColor"; "required": false; }; "style": { "alias": "style"; "required": false; }; "cornerRadius": { "alias": "cornerRadius"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "role": { "alias": "role"; "required": false; }; "clickable": { "alias": "clickable"; "required": false; }; "facebook": { "alias": "facebookId"; "required": false; }; "twitter": { "alias": "twitterId"; "required": false; }; "google": { "alias": "googleId"; "required": false; }; "instagram": { "alias": "instagramId"; "required": false; }; "vkontakte": { "alias": "vkontakteId"; "required": false; }; "gravatar": { "alias": "gravatarId"; "required": false; }; "github": { "alias": "githubId"; "required": false; }; "custom": { "alias": "src"; "required": false; }; "initials": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "initialsSize": { "alias": "initialsSize"; "required": false; }; }, { "clickOnAvatar": "clickOnAvatar"; }, never, never, true, never>;
}
declare class AvatarModule {
    static forRoot(avatarConfig?: AvatarConfig): ModuleWithProviders<AvatarModule>;
    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<AvatarModule, never, [typeof i1.CommonModule, typeof AvatarComponent], [typeof AvatarComponent]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<AvatarModule>;
}
declare class AvatarConfigService {
    userConfig: AvatarConfig;
    constructor(userConfig: AvatarConfig);
    getAvatarSources(defaultSources: AvatarSource[]): AvatarSource[];
    getAvatarColors(defaultColors: string[]): string[];
    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarConfigService, [{ optional: true; }]>;
    static ɵprov: i0.ɵɵInjectableDeclaration<AvatarConfigService>;
}
/**
 * list of Supported avatar sources
 */
declare const defaultSources: AvatarSource[];
/**
 * list of default colors
 */
declare const defaultColors: string[];
/**
 * Provides utilities methods related to Avatar component
 */
declare class AvatarService {
    private http;
    private avatarConfigService;
    avatarSources: AvatarSource[];
    avatarColors: string[];
    private readonly failedSources;
    constructor(http: HttpClient, avatarConfigService: AvatarConfigService);
    fetchAvatar(avatarUrl: string): Observable<unknown>;
    getRandomColor(avatarText: string): string;
    compareSources(sourceType1: AvatarSource, sourceType2: AvatarSource): number;
    isSource(source: string): boolean;
    isTextAvatar(sourceType: AvatarSource): boolean;
    private buildSourceKey;
    sourceHasFailedBefore(source: Source): boolean;
    markSourceAsFailed(source: Source): void;
    private overrideAvatarSources;
    private overrideAvatarColors;
    private calculateAsciiCode;
    private getSourcePriority;
    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarService, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<AvatarService>;
}
export { AvatarComponent, AvatarModule, AvatarService, AvatarSource, defaultColors, defaultSources };
export type { AvatarConfig };