@openexo/design-system
Version:
OpenExO design system
104 lines (103 loc) • 3.23 kB
TypeScript
import { EventEmitter } from '@angular/core';
declare type SizeAvatar = 'xs' | 'sm' | 'lg' | 'xl';
declare type ShapeType = 'circle' | 'rect';
declare type TooltipPosition = 'left' | 'right' | 'above' | 'below' | 'before' | 'after';
declare enum SizeAvatarEnum {
xs = "xs",
sm = "sm",
lg = "lg",
xl = "xl"
}
interface Certificate {
code: CertificateEnum;
name: string;
humanizedCode?: string;
}
declare enum CertificateEnum {
FOUNDATION = "CFO",
CONSULTANT = "CCO",
SPRINT_COACH = "CSC",
AMBASSADOR = "CEA",
TRAINER = "CTR",
BOARD_ADVISOR = "CBA"
}
export declare class ExOAvatarComponent {
/**
* Number that set the maximum of shown avatars
*/
maxSetShowed: number;
/**
* Custom array to load.
* You need to pass a tuple [{src, tooltip}] in array
*/
imageSet: {
src: string;
tooltip: string;
}[];
/**
* Custom src to load.
* If you send the user, will take from the user.profilePictures array with
* the size defined on the input size.
*/
src: string;
/**
* If you want add a custom alt to image. If you send the user, will take user.fullName by default.
*/
alt: string;
/**
* The component has defined 4 sizes by default (xs (24px), sm(48px), lg(96px), xl(144px)), but if you need
* other sizes you can send as { width: '40px', height: '40px'} and will overwrite the default sizes.
*/
customizedSize: {
width: string;
height: string;
};
/**
* By default will use SizeAvatarEnum.sm
* (xs (24px), sm(48px), lg(96px), xl(144px))
*/
size: SizeAvatar;
/**
* Shape of the avatar. By default will be circle.
*/
shape: ShapeType;
/**
* Item can be a user or group, etc... If you send a item, you will get the info from alt, src, etc from the item.
*/
item: any;
/**
* Show tooltip in the image, if you send user will take the user.fullName by default.
*/
tooltip: string;
/**
* Position where the tooltip will show. By default is below.
*/
tooltipPosition: TooltipPosition;
/**
* Certificates only will work with the standards sizes, so this input can't combine with customizedSize.
* In the same way, only will work with the default shape (circle).
*/
certificates: Certificate[];
/**
* In other case, will emit an event and the parent will take the control (For example, to show a menu when click)
*/
onClick: EventEmitter<boolean>;
sizeAvatar: typeof SizeAvatarEnum;
valuesCertification: number[];
/**
* Sizes defined in the profile_picture array.
* @param size Must be xs, sm, lg, xl. If you need other, talk with design.
*/
static parseSizeToNumber(size: SizeAvatar): number;
get imageUrl(): string | undefined;
buildPicture(profilePictures: any): any;
get imageAlt(): string;
/**
* Return name, fullName or shortName(in that order) from items to use in the Alt attr from image and the tooltips.
*/
buildNameItem(item: any): any;
get imageTooltip(): string;
get certificateTooltip(): string;
click(): void;
}
export {};