igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
323 lines (318 loc) • 12.4 kB
JavaScript
import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, ElementRef, TemplateRef, HostBinding, Input, ViewChild, Component, NgModule } from '@angular/core';
import { normalizeURI } from 'igniteui-angular/core';
import { IgxIconComponent } from 'igniteui-angular/icon';
let NEXT_ID = 0;
const IgxAvatarSize = {
SMALL: 'small',
MEDIUM: 'medium',
LARGE: 'large'
};
const IgxAvatarType = {
INITIALS: 'initials',
IMAGE: 'image',
ICON: 'icon',
CUSTOM: 'custom'
};
/**
* Avatar provides a way to display an image, icon or initials to the user.
*
* @igxModule IgxAvatarModule
*
* @igxTheme igx-avatar-theme, igx-icon-theme
*
* @igxKeywords avatar, profile, picture, initials
*
* @igxGroup Layouts
*
* @remarks
*
* The Ignite UI Avatar provides an easy way to add an avatar icon to your application. This icon can be an
* image, someone's initials or a material icon from the Google Material icon set.
*
* @example
* ```html
* <igx-avatar initials="MS" shape="rounded" size="large">
* </igx-avatar>
* ```
*/
class IgxAvatarComponent {
constructor() {
this.elementRef = inject(ElementRef);
/**
* Returns the `aria-label` attribute of the avatar.
*
* @example
* ```typescript
* let ariaLabel = this.avatar.ariaLabel;
* ```
*
*/
this.ariaLabel = 'avatar';
/**
* Returns the `role` attribute of the avatar.
*
* @example
* ```typescript
* let avatarRole = this.avatar.role;
* ```
*/
this.role = 'img';
/**
* Host `class.igx-avatar` binding.
*
* @hidden
* @internal
*/
this.cssClass = 'igx-avatar';
/**
* Sets the `id` of the avatar. If not set, the first avatar component will have `id` = `"igx-avatar-0"`.
*
* @example
* ```html
* <igx-avatar id="my-first-avatar"></igx-avatar>
* ```
*/
this.id = `igx-avatar-${NEXT_ID++}`;
/**
* Sets square, rounded or circular shape to the avatar.
* By default the shape of the avatar is square.
*
* @example
* ```html
* <igx-avatar shape="rounded"></igx-avatar>
* ```
*/
this.shape = 'square';
}
/** @hidden @internal */
get isRounded() {
return this.shape === 'rounded';
}
/** @hidden @internal */
get isCircle() {
return this.shape === 'circle';
}
/**
* Sets the image source of the avatar.
*
* @example
* ```html
* <igx-avatar src="images/picture.jpg"></igx-avatar>
* ```
* @igxFriendlyName Image URL
*/
set src(value) {
this._src = normalizeURI(value);
}
get src() {
return this._src;
}
/**
* Returns the size of the avatar.
*
* @example
* ```typescript
* let avatarSize = this.avatar.size;
* ```
*/
get size() {
return this._size || IgxAvatarSize.SMALL;
}
/**
* Sets the size of the avatar.
* By default, the size is `"small"`. It can be set to `"medium"` or `"large"`.
*
* @example
* ```html
* <igx-avatar size="large"></igx-avatar>
* ```
*/
set size(value) {
switch (value) {
case 'small':
case 'medium':
case 'large':
this._size = value;
break;
default:
this._size = 'small';
}
}
/**
* Returns the type of the avatar.
*
* @example
* ```typescript
* let avatarType = this.avatar.type;
* ```
*/
get type() {
if (this.src) {
return IgxAvatarType.IMAGE;
}
if (this.icon) {
return IgxAvatarType.ICON;
}
if (this.initials) {
return IgxAvatarType.INITIALS;
}
return IgxAvatarType.CUSTOM;
}
/** @hidden @internal */
get _isImageType() {
return this.type === IgxAvatarType.IMAGE;
}
/** @hidden @internal */
get _isIconType() {
return this.type === IgxAvatarType.ICON;
}
/** @hidden @internal */
get _isInitialsType() {
return this.type === IgxAvatarType.INITIALS;
}
get componentSize() {
if (this._size) {
return `var(--ig-size-${this._size})`;
}
}
/**
* Returns the template of the avatar.
*
* @hidden
* @internal
*/
get template() {
switch (this.type) {
case IgxAvatarType.IMAGE:
return this.imageTemplate;
case IgxAvatarType.INITIALS:
return this.initialsTemplate;
case IgxAvatarType.ICON:
return this.iconTemplate;
default:
return this.defaultTemplate;
}
}
/**
* Returns the css url of the image.
*
* @hidden
* @internal
*/
getSrcUrl() {
return `url("${this.src}")`;
}
/** @hidden @internal */
ngOnInit() {
this.roleDescription = this.getRole();
}
/** @hidden @internal */
getRole() {
switch (this.type) {
case IgxAvatarType.IMAGE:
return 'image avatar';
case IgxAvatarType.ICON:
return 'icon avatar';
case IgxAvatarType.INITIALS:
return 'initials avatar';
default:
return 'custom avatar';
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.2", type: IgxAvatarComponent, isStandalone: true, selector: "igx-avatar", inputs: { id: "id", shape: "shape", color: "color", bgColor: "bgColor", initials: "initials", icon: "icon", src: "src", size: "size" }, host: { properties: { "attr.aria-label": "this.ariaLabel", "attr.role": "this.role", "class.igx-avatar": "this.cssClass", "attr.aria-roledescription": "this.roleDescription", "attr.id": "this.id", "class.igx-avatar--rounded": "this.isRounded", "class.igx-avatar--circle": "this.isCircle", "style.color": "this.color", "style.background": "this.bgColor", "class.igx-avatar--image": "this._isImageType", "class.igx-avatar--icon": "this._isIconType", "class.igx-avatar--initials": "this._isInitialsType", "style.--component-size": "this.componentSize" } }, viewQueries: [{ propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "imageTemplate", first: true, predicate: ["imageTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "initialsTemplate", first: true, predicate: ["initialsTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "iconTemplate", first: true, predicate: ["iconTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #defaultTemplate>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #imageTemplate>\n <div #image class=\"igx-avatar__image\" [style.backgroundImage]=\"getSrcUrl()\"></div>\n</ng-template>\n\n<ng-template #initialsTemplate>\n <span>{{initials.substring(0, 2)}}</span>\n</ng-template>\n\n<ng-template #iconTemplate>\n <igx-icon>{{icon}}</igx-icon>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template\"></ng-container>\n", dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxAvatarComponent, decorators: [{
type: Component,
args: [{ selector: 'igx-avatar', imports: [IgxIconComponent, NgTemplateOutlet], template: "<ng-template #defaultTemplate>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #imageTemplate>\n <div #image class=\"igx-avatar__image\" [style.backgroundImage]=\"getSrcUrl()\"></div>\n</ng-template>\n\n<ng-template #initialsTemplate>\n <span>{{initials.substring(0, 2)}}</span>\n</ng-template>\n\n<ng-template #iconTemplate>\n <igx-icon>{{icon}}</igx-icon>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template\"></ng-container>\n" }]
}], propDecorators: { ariaLabel: [{
type: HostBinding,
args: ['attr.aria-label']
}], role: [{
type: HostBinding,
args: ['attr.role']
}], cssClass: [{
type: HostBinding,
args: ['class.igx-avatar']
}], roleDescription: [{
type: HostBinding,
args: ['attr.aria-roledescription']
}], id: [{
type: HostBinding,
args: ['attr.id']
}, {
type: Input
}], shape: [{
type: Input
}], isRounded: [{
type: HostBinding,
args: ['class.igx-avatar--rounded']
}], isCircle: [{
type: HostBinding,
args: ['class.igx-avatar--circle']
}], color: [{
type: HostBinding,
args: ['style.color']
}, {
type: Input
}], bgColor: [{
type: HostBinding,
args: ['style.background']
}, {
type: Input
}], initials: [{
type: Input
}], icon: [{
type: Input
}], src: [{
type: Input
}], defaultTemplate: [{
type: ViewChild,
args: ['defaultTemplate', { read: TemplateRef, static: true }]
}], imageTemplate: [{
type: ViewChild,
args: ['imageTemplate', { read: TemplateRef, static: true }]
}], initialsTemplate: [{
type: ViewChild,
args: ['initialsTemplate', { read: TemplateRef, static: true }]
}], iconTemplate: [{
type: ViewChild,
args: ['iconTemplate', { read: TemplateRef, static: true }]
}], size: [{
type: Input
}], _isImageType: [{
type: HostBinding,
args: ['class.igx-avatar--image']
}], _isIconType: [{
type: HostBinding,
args: ['class.igx-avatar--icon']
}], _isInitialsType: [{
type: HostBinding,
args: ['class.igx-avatar--initials']
}], componentSize: [{
type: HostBinding,
args: ['style.--component-size']
}] } });
/**
* @hidden
* IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
*/
class IgxAvatarModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxAvatarModule, imports: [IgxAvatarComponent], exports: [IgxAvatarComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxAvatarModule, imports: [IgxAvatarComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxAvatarModule, decorators: [{
type: NgModule,
args: [{
imports: [IgxAvatarComponent],
exports: [IgxAvatarComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { IgxAvatarComponent, IgxAvatarModule, IgxAvatarSize, IgxAvatarType };
//# sourceMappingURL=igniteui-angular-avatar.mjs.map