import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
import { AvatarShape } from '../../../../types/src/avatar';
import { CSSResultGroup, TemplateResult } from 'lit';
import { default as CxIcon } from '../icon/icon';

/**
 * @summary Avatars are used to represent a person or object.
 * By default, a generic icon will be shown. You can personalize avatars by adding custom icons, initials,
 * and images. You should always provide a `label` for assistive devices.
 *
 * @event cx-error - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some
 * unknown cause.
 *
 * @slot icon - The default icon to use when no image or initials are present. Works best with `<cx-icon>`.
 *
 * @csspart base - The component's base wrapper.
 * @csspart icon - The container that wraps the avatar's icon.
 * @csspart initials - The container that wraps the avatar's initials.
 * @csspart image - The avatar image. Only shown when the `image` attribute is set.
 *
 * @cssproperty --size - The size of the avatar.
 */
export default class CxAvatar extends CortexElement {
    static styles: CSSResultGroup;
    static dependencies: {
        'cx-icon': typeof CxIcon;
    };
    private hasError;
    /** The image source to use for the avatar. */
    image: string;
    /** A label to use to describe the avatar to assistive devices. */
    label: string;
    /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
    initials: string;
    /** Indicates how the browser should load the image. */
    loading: 'eager' | 'lazy';
    /** The shape of the avatar. */
    shape: AvatarShape;
    handleImageChange(): void;
    private handleImageLoadError;
    render(): TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-avatar': CxAvatar;
    }
}
