@progress/kendo-angular-layout
Version:
Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts
403 lines (394 loc) • 14.5 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, HostBinding, Input, isDevMode, Renderer2, ElementRef } from '@angular/core';
import { NgIf, NgStyle } from '@angular/common';
import { validatePackage } from '@progress/kendo-licensing';
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
import { getStylingClasses, mapShapeToRounded } from '../common/util';
import { packageMetadata } from '../package-metadata';
import { LocalizedAvatarMessagesDirective } from './l10n/localized-messages.directive';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
const DEFAULT_ROUNDED = 'full';
const DEFAULT_SIZE = 'medium';
const DEFAULT_THEME_COLOR = 'primary';
const DEFAULT_FILL_MODE = 'solid';
/**
* Represents the Kendo UI Avatar component for Angular. Displays images, icons, or initials representing people or other entities.
*
* @example
* ```typescript
* @Component({
* selector: 'my-app',
* template: `
* <kendo-avatar [imageSrc]="userImage" size="large"></kendo-avatar>
* <kendo-avatar [initials]="userInitials" themeColor="primary"></kendo-avatar>
* <kendo-avatar [icon]="userIcon" fillMode="outline"></kendo-avatar>
* `
* })
* class AppComponent {
* userImage = 'path/to/image.jpg';
* userInitials = 'JD';
* userIcon = 'user';
* }
* ```
* @remarks
* Supported children components are: {@link AvatarCustomMessagesComponent}.
*/
export class AvatarComponent {
localization;
renderer;
element;
hostClass = true;
/**
* @hidden
*/
get borderClass() {
return this.border;
}
/**
* @hidden
*/
get flexBasis() {
return this.width;
}
/**
* Sets the shape for the avatar.
* @hidden
*/
set shape(shape) {
this.rounded = mapShapeToRounded(shape);
}
/**
* Specifies the size of the Avatar
* ([see example]({% slug appearance_avatar %}#toc-size)).
*
* @default 'medium'
*/
set size(size) {
if (size !== this._size) {
const newSize = size ? size : DEFAULT_SIZE;
this.handleClasses('size', newSize);
this._size = newSize;
}
}
get size() {
return this._size;
}
/**
* Specifies the rounded styling of the Avatar
* ([see example](slug:appearance_avatar#toc-roundness)).
*
* @default 'full'
*/
set rounded(rounded) {
if (rounded !== this._rounded) {
const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
this.handleClasses('rounded', newRounded);
this._rounded = newRounded;
}
}
get rounded() {
return this._rounded;
}
/**
* Specifies the theme color of the Avatar.
* The theme color applies as background and border color while adjusting the text color accordingly.
*
* @default 'primary'
*/
set themeColor(themeColor) {
if (themeColor !== this._themeColor) {
const newThemeColor = themeColor ? themeColor : DEFAULT_THEME_COLOR;
this._themeColor = newThemeColor;
this.handleFillModeAndThemeColorClasses(this.fillMode, this.themeColor);
}
}
get themeColor() {
return this._themeColor;
}
/**
* Specifies the fill style of the Avatar.
*
* @default 'solid'
*/
set fillMode(fillMode) {
if (fillMode !== this.fillMode) {
const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
this._fillMode = newFillMode;
this.handleFillModeAndThemeColorClasses(this.fillMode, this.themeColor);
}
}
get fillMode() {
return this._fillMode;
}
/**
* Specifies the appearance fill style of the avatar.
* Deprecated, left for backward compatibility.
*
* @hidden
*/
set fill(fillMode) {
this.fillMode = fillMode;
}
/**
* Adds a border to the Avatar.
*
* @default false
*/
border = false;
/**
* Defines a CSS class or multiple classes separated by spaces.
* You can apply these classes to a `span` element inside the Avatar and also use custom icons.
*/
iconClass;
/**
* Sets the width of the Avatar.
*/
width;
/**
* @hidden
*/
get avatarWidth() {
return this.width;
}
/**
* Sets the height of the Avatar.
*/
height;
/**
* @hidden
*/
get avatarHeight() {
return this.height;
}
/**
* Defines the CSS styles that render on the content element of the Avatar.
* Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports.
*/
cssStyle;
/**
* Sets the initials for the Avatar.
*/
initials;
/**
* Sets the icon for the Avatar.
* All [Kendo UI Icons](slug:icons#icons-list) are supported.
*/
icon;
/**
* Sets the image source of the Avatar.
*/
imageSrc;
/**
* Defines an SVG icon to render.
* You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
*/
set svgIcon(icon) {
if (isDevMode() && icon && this.icon && this.iconClass) {
throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
}
this._svgIcon = icon;
}
get svgIcon() {
return this._svgIcon;
}
_themeColor = DEFAULT_THEME_COLOR;
_size = DEFAULT_SIZE;
_fillMode = DEFAULT_FILL_MODE;
_rounded = DEFAULT_ROUNDED;
_svgIcon;
constructor(localization, renderer, element) {
this.localization = localization;
this.renderer = renderer;
this.element = element;
validatePackage(packageMetadata);
}
ngOnInit() {
this.verifyProperties();
}
ngAfterViewInit() {
const stylingInputs = ['size', 'rounded'];
stylingInputs.forEach(input => {
this.handleClasses(input, this[input]);
});
this.handleFillModeAndThemeColorClasses(this.fillMode, this.themeColor);
}
/**
* @hidden
*/
get customAvatar() {
return !(this.imageSrc || this.initials || this.icon || this.iconClass);
}
verifyProperties() {
if (!isDevMode()) {
return;
}
const inputs = [this.icon || this.iconClass, this.imageSrc, this.initials];
const inputsLength = inputs.filter((value) => value).length;
if (inputsLength > 1) {
throw new Error(`
Invalid property configuration given.
The kendo-avatar component can accept only one of:
icon, imageSrc or initials properties.
`);
}
}
handleClasses(styleType, value) {
const elem = this.element.nativeElement;
const classes = getStylingClasses('avatar', styleType, this[styleType], value);
if (classes.toRemove) {
this.renderer.removeClass(elem, classes.toRemove);
}
if (classes.toAdd) {
this.renderer.addClass(elem, classes.toAdd);
}
}
handleFillModeAndThemeColorClasses(fill, themeColor) {
const wrapperElement = this.element.nativeElement;
// remove existing fill and theme color classes
const currentClasses = Array.from(wrapperElement.classList);
const classesToRemove = currentClasses.filter(cl => {
return cl.startsWith('k-avatar-solid') || cl.startsWith('k-avatar-outline');
});
classesToRemove.forEach((cl => this.renderer.removeClass(wrapperElement, cl)));
// add fill if needed
if (fill !== 'none') {
this.renderer.addClass(wrapperElement, `k-avatar-${fill}`);
}
// add theme color class if fill and theme color
if (fill !== 'none' && themeColor !== 'none') {
this.renderer.addClass(wrapperElement, `k-avatar-${fill}-${themeColor}`);
}
}
/**
* @hidden
*/
textFor(key) {
return this.localization.get(key);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AvatarComponent, isStandalone: true, selector: "kendo-avatar", inputs: { shape: "shape", size: "size", rounded: "rounded", themeColor: "themeColor", fillMode: "fillMode", fill: "fill", border: "border", iconClass: "iconClass", width: "width", height: "height", cssStyle: "cssStyle", initials: "initials", icon: "icon", imageSrc: "imageSrc", svgIcon: "svgIcon" }, host: { properties: { "class.k-avatar": "this.hostClass", "class.k-avatar-bordered": "this.borderClass", "style.flexBasis": "this.flexBasis", "style.width": "this.avatarWidth", "style.height": "this.avatarHeight" } }, providers: [
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.avatar'
}
], ngImport: i0, template: `
<ng-container kendoAvatarLocalizedMessages
i18n-avatarAlt="kendo.avatar.avatarAlt|The alt attribute text of the image in the avatar."
avatarAlt="Avatar"
>
</ng-container>
<ng-content *ngIf="customAvatar"></ng-content>
<ng-container *ngIf="imageSrc">
<span class="k-avatar-image">
<img src="{{ imageSrc }}" [alt]="textFor('avatarAlt')" [ngStyle]="cssStyle" />
</span>
</ng-container>
<ng-container *ngIf="initials">
<span class="k-avatar-text" [ngStyle]="cssStyle">{{ initials.substring(0, 2) }}</span>
</ng-container>
<ng-container *ngIf="icon || iconClass || svgIcon">
<span class="k-avatar-icon">
<kendo-icon-wrapper
[ngStyle]="cssStyle"
[name]="icon"
[customFontClass]="iconClass"
[svgIcon]="svgIcon"
>
</kendo-icon-wrapper>
</span>
</ng-container>
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: LocalizedAvatarMessagesDirective, selector: "[kendoAvatarLocalizedMessages]" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarComponent, decorators: [{
type: Component,
args: [{
providers: [
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.avatar'
}
],
selector: 'kendo-avatar',
template: `
<ng-container kendoAvatarLocalizedMessages
i18n-avatarAlt="kendo.avatar.avatarAlt|The alt attribute text of the image in the avatar."
avatarAlt="Avatar"
>
</ng-container>
<ng-content *ngIf="customAvatar"></ng-content>
<ng-container *ngIf="imageSrc">
<span class="k-avatar-image">
<img src="{{ imageSrc }}" [alt]="textFor('avatarAlt')" [ngStyle]="cssStyle" />
</span>
</ng-container>
<ng-container *ngIf="initials">
<span class="k-avatar-text" [ngStyle]="cssStyle">{{ initials.substring(0, 2) }}</span>
</ng-container>
<ng-container *ngIf="icon || iconClass || svgIcon">
<span class="k-avatar-icon">
<kendo-icon-wrapper
[ngStyle]="cssStyle"
[name]="icon"
[customFontClass]="iconClass"
[svgIcon]="svgIcon"
>
</kendo-icon-wrapper>
</span>
</ng-container>
`,
standalone: true,
imports: [NgIf, NgStyle, IconWrapperComponent, LocalizedAvatarMessagesDirective]
}]
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { hostClass: [{
type: HostBinding,
args: ['class.k-avatar']
}], borderClass: [{
type: HostBinding,
args: ['class.k-avatar-bordered']
}], flexBasis: [{
type: HostBinding,
args: ['style.flexBasis']
}], shape: [{
type: Input
}], size: [{
type: Input
}], rounded: [{
type: Input
}], themeColor: [{
type: Input
}], fillMode: [{
type: Input
}], fill: [{
type: Input
}], border: [{
type: Input
}], iconClass: [{
type: Input
}], width: [{
type: Input
}], avatarWidth: [{
type: HostBinding,
args: ['style.width']
}], height: [{
type: Input
}], avatarHeight: [{
type: HostBinding,
args: ['style.height']
}], cssStyle: [{
type: Input
}], initials: [{
type: Input
}], icon: [{
type: Input
}], imageSrc: [{
type: Input
}], svgIcon: [{
type: Input
}] } });