UNPKG

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
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 };