import * as i0 from '@angular/core';
import { QueryList } from '@angular/core';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';
/**
* Component representing an avatar badge.
* This badge can be positioned at the top or bottom of the avatar and is used
* to display additional information or status indicators.
*
* The component uses content projection to allow any content to be displayed inside the badge.
*
* @usageNotes
* ```html
*
* eUI
*
* 7
*
*
* ```
*/
declare class EuiAvatarBadgeComponent {
/**
* Whether the avatar should have a shadow effect
* @default false
*/
isPositionBottom: boolean;
/**
* Gets the CSS classes to be applied to the host element.
* Combines the base class with a modifier class based on the position.
* @returns {string} The combined CSS classes.
*/
cssClasses(): string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_isPositionBottom: unknown;
}
/**
* @description
* Component representing an avatar icon.
* This component serves as a container for icons within an avatar.
* It applies the appropriate styling and structure needed for avatar icons.
*
* The component simply wraps its content with the 'eui-avatar-icon' class styling.
* Used for displaying icons as avatar content instead of images or text.
*
* @usageNotes
* ```html
*
*
*
*
*
* ```
*/
declare class EuiAvatarIconComponent {
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Component representing an avatar image.
* Displays an image for an avatar with fallback to a default image when none is provided.
* Uses the application's configured assets base URL for the default image path.
*
* @usageNotes
* ```html
*
*
*
* ```
*/
declare class EuiAvatarImageComponent {
/** CSS class applied to the host element */
get cssClasses(): string;
/**
* URL of the image to be displayed in the avatar.
* If not provided, a default image will be used.
*/
imageUrl: any;
/**
* The final image URL to be used in the template.
* This will be either the provided imageUrl or a default image URL.
*/
imageUrlGenerated: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Component for displaying textual content alongside an avatar.
* Serves as a container for avatar-content-label and avatar-content-sublabel subcomponents.
* Typically used to show user name and additional information like email or role.
* Content is projected via ng-content and styled to align properly with the avatar.
* Must be used within an eui-avatar parent component for proper layout.
*
* @usageNotes
* ```html
*
*
*
* John Doe
* john.doe@ec.europa.eu
*
*
* ```
*
* ### Accessibility
* - Content is readable by screen readers in natural reading order
* - Label and sublabel are semantically grouped for context
* - Use meaningful text that identifies the user or entity
*
* ### Notes
* - Must be direct child of eui-avatar component
* - Typically contains eui-avatar-content-label and eui-avatar-content-sublabel
* - Layout can be reversed using isReverse on parent eui-avatar
* - Automatically styled to align with avatar size variants
*/
declare class EuiAvatarContentComponent {
/**
* Binds the CSS class 'eui-avatar-list' to the host element.
* This class provides the styling necessary for arranging avatars in a list.
* @returns {string} The CSS class name
*/
cssClasses(): string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Component for displaying a list of avatars.
* This component serves as a container that arranges multiple avatars in a visually
* coherent group, typically with slight overlapping to save space.
*
* The component uses content projection to allow placing multiple avatar components
* within it and applies appropriate styling via the 'eui-avatar-list' CSS class.
*
* @usageNotes
* ```html
*
*
*
*
*
*
*
*
*
*
*
*/
declare class EuiAvatarListComponent {
/**
* Binds the CSS class 'eui-avatar-list' to the host element.
* This class provides the styling necessary for arranging avatars in a list.
* @returns {string} The CSS class name
*/
cssClasses(): string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Component for displaying text content within an avatar.
* This component serves as a container for text that appears inside an avatar,
* such as initials or short text identifiers.
*
* The component applies the 'eui-avatar-text' class to provide appropriate styling
* for text displayed within an avatar context. It uses content projection to allow
* any text content to be displayed inside.
*
* @usageNotes
* ```html
*
* eUI
*
* 7
*
*
* ```
*/
declare class EuiAvatarTextComponent {
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Component for displaying avatars in the EUI design system.
*
* An avatar is a visual representation of a user or entity and can contain
* an image, text, or an icon. This component serves as the container for
* various avatar subcomponents, such as EuiAvatarImage, EuiAvatarText,
* EuiAvatarIcon, and EuiAvatarBadge.
*
* The component supports various customizations, including colors (via state directives),
* sizes, shapes, and appearance modifiers.
*
* @usageNotes
* #### Text avatar
* ```html
*
* JD
*
* ```
*
* #### Image avatar with badge
* ```html
*
*
*
*
* ```
*
* #### Icon avatar with square shape
* ```html
*
*
*
* ```
*
* #### Avatar with content (name and email)
* ```html
*
*
*
* John Doe
* john.doe@example.com
*
*
* ```
*
* ### Accessibility
* - Uses role="status" for screen reader announcements
* - aria-label provides context about the avatar (defaults to "avatar")
* - Image avatars should include alt text via eui-avatar-image
* - Text avatars are automatically readable by screen readers
* - Badge status changes are announced when present
*
* ### Notes
* - Default shape is circular, use isShapeSquare for square avatars
* - Size variants: euiSizeXS, euiSizeS (default), euiSizeL, euiSizeXL, euiSize2XL
* - Color variants: euiPrimary, euiSecondary, euiSuccess, euiInfo, euiWarning, euiDanger
* - Use hasNoBackground to remove background color (useful for image avatars)
* - isReverse flips the layout when used with eui-avatar-content
* - colorPalette accepts custom color palette names for extended theming
* - hasShadow adds depth with shadow effect
* - euiOutline adds border outline styling
*/
declare class EuiAvatarComponent {
/**
* Data attribute for E2E testing
* @default 'eui-avatar'
*/
e2eAttr: string;
/**
* ARIA role for accessibility
* @default 'status'
*/
role: string;
/**
* ARIA label for accessibility
* @default 'avatar'
*/
ariaLabel: string | null;
/**
* Whether the avatar should have a shadow effect
* @default false
*/
hasShadow: boolean;
/**
* Whether the avatar shape should be square instead of circular
* @default false
*/
isShapeSquare: boolean;
/**
* Whether the avatar should have no background color
* @default false
*/
hasNoBackground: boolean;
/**
* Whether the avatar reverse layout with content
* @default false
*/
isReverse: boolean;
/**
* Extra color palette to be used on the avatar.
*/
colorPalette: string;
avatarImage: QueryList;
/**
* Reference to the BaseStatesDirective providing state-based styling
* @internal
*/
protected baseStatesDirective: BaseStatesDirective;
/**
* Gets the CSS classes to be applied to the host element.
* Combines base classes with modifier classes.
* @returns {string} The combined CSS classes
*/
cssClasses(): string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_hasShadow: unknown;
static ngAcceptInputType_isShapeSquare: unknown;
static ngAcceptInputType_hasNoBackground: unknown;
static ngAcceptInputType_isReverse: unknown;
}
/**
* @description
* Component for displaying secondary label text within avatar content.
* Typically used to show additional information like email, role, or status.
* Content is projected via ng-content and styled as secondary/subdued text.
* Must be used within eui-avatar-content for proper styling and layout.
*
* @usageNotes
* ```html
*
* JD
*
* John Doe
* john.doe@ec.europa.eu
*
*
* ```
*
* ### Accessibility
* - Text content is directly readable by screen readers
* - Appears after label in reading order
* - Provides additional context about the user or entity
*
* ### Notes
* - Must be child of eui-avatar-content component
* - Styled as secondary/muted text
* - Typically displays email, role, department, or status
* - Optional - can be omitted if only primary label is needed
*/
declare class EuiAvatarContentSublabelComponent {
/**
* Binds the CSS class 'eui-avatar-list' to the host element.
* This class provides the styling necessary for arranging avatars in a list.
* @returns {string} The CSS class name
*/
cssClasses(): string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Component for displaying the primary label text within avatar content.
* Typically used to show the user's name or primary identifier.
* Content is projected via ng-content and styled as the main text line.
* Must be used within eui-avatar-content for proper styling and layout.
*
* @usageNotes
* ```html
*
*
*
* John Doe
* Developer
*
*
* ```
*
* ### Accessibility
* - Text content is directly readable by screen readers
* - Appears first in reading order before sublabel
* - Use concise, meaningful text for user identification
*
* ### Notes
* - Must be child of eui-avatar-content component
* - Styled as primary/prominent text
* - Typically displays user name or entity title
* - Can be used alone without sublabel if needed
*/
declare class EuiAvatarContentLabelComponent {
/**
* Binds the CSS class 'eui-avatar-list' to the host element.
* This class provides the styling necessary for arranging avatars in a list.
* @returns {string} The CSS class name
*/
cssClasses(): string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
declare const EUI_AVATAR: readonly [typeof EuiAvatarComponent, typeof EuiAvatarIconComponent, typeof EuiAvatarTextComponent, typeof EuiAvatarImageComponent, typeof EuiAvatarBadgeComponent, typeof EuiAvatarListComponent, typeof EuiAvatarContentComponent, typeof EuiAvatarContentLabelComponent, typeof EuiAvatarContentSublabelComponent];
export { EUI_AVATAR, EuiAvatarBadgeComponent, EuiAvatarComponent, EuiAvatarContentComponent, EuiAvatarContentLabelComponent, EuiAvatarContentSublabelComponent, EuiAvatarIconComponent, EuiAvatarImageComponent, EuiAvatarListComponent, EuiAvatarTextComponent };
//# sourceMappingURL=eui-components-eui-avatar.d.ts.map