@progress/kendo-angular-layout/avatar/avatar.component.d.ts

Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts

/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { OnInit, Renderer2, ElementRef, AfterViewInit } from '@angular/core';
import { SVGIcon } from '@progress/kendo-svg-icons';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { AvatarFillMode, AvatarShape, AvatarSize, AvatarThemeColor, AvatarRounded } from './models/models';
import * as i0 from "@angular/core";
/**
 * 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 declare class AvatarComponent implements OnInit, AfterViewInit {
    private localization;
    private renderer;
    private element;
    hostClass: boolean;
    /**
     * @hidden
     */
    get borderClass(): boolean;
    /**
     * @hidden
     */
    get flexBasis(): string;
    /**
     * Sets the shape for the avatar.
     * @hidden
     */
    set shape(shape: AvatarShape);
    /**
     * Specifies the size of the Avatar
     * ([see example]({% slug appearance_avatar %}#toc-size)).
     *
     * @default 'medium'
     */
    set size(size: AvatarSize);
    get size(): AvatarSize;
    /**
     * Specifies the rounded styling of the Avatar
     * ([see example](slug:appearance_avatar#toc-roundness)).
     *
     * @default 'full'
     */
    set rounded(rounded: AvatarRounded);
    get rounded(): AvatarRounded;
    /**
     * 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: AvatarThemeColor);
    get themeColor(): AvatarThemeColor;
    /**
     * Specifies the fill style of the Avatar.
     *
     * @default 'solid'
     */
    set fillMode(fillMode: AvatarFillMode);
    get fillMode(): AvatarFillMode;
    /**
     * Specifies the appearance fill style of the avatar.
     * Deprecated, left for backward compatibility.
     *
     * @hidden
     */
    set fill(fillMode: AvatarFillMode);
    /**
     * Adds a border to the Avatar.
     *
     * @default false
     */
    border: boolean;
    /**
     * 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: string;
    /**
     * Sets the width of the Avatar.
     */
    width: string;
    /**
     * @hidden
     */
    get avatarWidth(): string;
    /**
     * Sets the height of the Avatar.
     */
    height: string;
    /**
     * @hidden
     */
    get avatarHeight(): string;
    /**
     * 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?: any;
    /**
     * Sets the initials for the Avatar.
     */
    initials: string;
    /**
     * Sets the icon for the Avatar.
     * All [Kendo UI Icons](slug:icons#icons-list) are supported.
     */
    icon: string;
    /**
     * Sets the image source of the Avatar.
     */
    imageSrc: string;
    /**
     * 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: SVGIcon);
    get svgIcon(): SVGIcon;
    private _themeColor;
    private _size;
    private _fillMode;
    private _rounded;
    private _svgIcon;
    constructor(localization: LocalizationService, renderer: Renderer2, element: ElementRef);
    ngOnInit(): void;
    ngAfterViewInit(): void;
    /**
     * @hidden
     */
    get customAvatar(): boolean;
    private verifyProperties;
    private handleClasses;
    private handleFillModeAndThemeColorClasses;
    /**
     * @hidden
     */
    textFor(key: string): string;
    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "kendo-avatar", never, { "shape": { "alias": "shape"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "fill": { "alias": "fill"; "required": false; }; "border": { "alias": "border"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "cssStyle": { "alias": "cssStyle"; "required": false; }; "initials": { "alias": "initials"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "imageSrc": { "alias": "imageSrc"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; }, {}, never, ["*"], true, never>;
}