ngx-avatars
Version:
A universal avatar component for Angular applications that fetches / generates avatar based on the information you have about the user.
229 lines (220 loc) • 7.93 kB
TypeScript
import * as i0 from '@angular/core';
import { OnChanges, OnDestroy, EventEmitter, SimpleChanges, ModuleWithProviders } from '@angular/core';
import * as i1 from '@angular/common';
import { SafeUrl } from '@angular/platform-browser';
import { Observable } from 'rxjs';
declare enum AvatarSource {
FACEBOOK = "facebook",
GOOGLE = "google",
TWITTER = "twitter",
INSTAGRAM = "instagram",
VKONTAKTE = "vkontakte",
SKYPE = "skype",
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[];
/**
* Disable custom source (for custom images) cache.
*/
disableSrcCache?: boolean;
}
/**
* 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;
/** Inserted by Angular inject() migration for backwards compatibility */
constructor(...args: unknown[]);
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 {
sourceFactory: SourceFactory;
private avatarService;
private sanitizer;
round: boolean;
size: string | number;
textSizeRatio: number;
bgColor: string | undefined;
fgColor: string;
borderColor: string | undefined;
style: Style;
cornerRadius: string | number;
facebook?: string | null;
twitter?: string | null;
google?: string | null;
instagram?: string | null;
vkontakte?: string | null;
skype?: string | null;
gravatar?: string | null;
github?: string | null;
custom?: string | SafeUrl | null;
customAlt?: string | null;
initials?: string | null;
value?: string | null;
referrerpolicy?: string | null;
placeholder?: string;
initialsSize: string | number;
clickOnAvatar: EventEmitter<Source>;
isAlive: boolean;
avatarSrc: SafeUrl | null;
avatarAlt: SafeUrl | null;
avatarText: string | null;
avatarStyle: Style;
hostStyle: Style;
private currentIndex;
private sources;
constructor();
onAvatarClicked(): void;
/**
* 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-avatars", 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; }; "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; }; "skype": { "alias": "skypeId"; "required": false; }; "gravatar": { "alias": "gravatarId"; "required": false; }; "github": { "alias": "githubId"; "required": false; }; "custom": { "alias": "src"; "required": false; }; "customAlt": { "alias": "alt"; "required": false; }; "initials": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "referrerpolicy": { "alias": "referrerpolicy"; "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>;
}
/**
* list of Supported avatar sources
*/
declare const defaultSources: AvatarSource[];
/**
* list of default colors
*/
declare const defaultColors: string[];
/**
* Default disable custom source cache settings
*/
declare const defaultDisableSrcCache = false;
/**
* Provides utilities methods related to Avatar component
*/
declare class AvatarService {
private http;
private avatarConfigService;
avatarSources: AvatarSource[];
avatarColors: string[];
private readonly failedSources;
constructor();
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, defaultDisableSrcCache, defaultSources };
export type { AvatarConfig };