### File

`packages/components/eui-user-profile/user-profile-card/user-profile-card.component.ts`

### Description

User profile card component that displays detailed user information including avatar, name, function, and organization. Designed for use within dropdown menus or profile panels. Automatically fetches user data from UserService and supports impersonation display.

### Basic Usage

Example :

    <!-- Simple profile card -->
    <eui-user-profile-card
      [isShowAvatarInitials]="true"
      (showProfileInfo)="onShowProfile()"
      (closeProfileMenu)="onClose()" />

    <!-- With custom avatar -->
    <eui-user-profile-card
      [avatarUrl]="user.avatarUrl"
      [reverseNameOrder]="true"
      showDetailsLabel="View Details" />

Example :

    onShowProfile(): void {
      this.router.navigate(['/profile']);
    }

### Accessibility

- Avatar has semantic meaning with user initials or image
- Profile details link is keyboard accessible with tabindex
- User information structured with proper heading hierarchy
- Impersonation status clearly indicated for screen readers

### Notes

- Automatically displays user function and organization if available
- Impersonation mode shows both impersonated and actual user
- Avatar initials computed from user name (configurable order)
- Integrates seamlessly with eui-user-profile dropdown

### Implements

`OnInit`

### Metadata

changeDetection | `ChangeDetectionStrategy.Default`
encapsulation | `ViewEncapsulation.None`
selector | `eui-user-profile-card`
imports | `EUI_AVATAR`
templateUrl | `./user-profile-card.component.html`

### Index

###### Properties

- avatarInitials
- fullName
- isOnline
- userState

###### Methods

- onClose
- onShowInfoClick

###### Inputs

- avatarUrl
- impersonateLabel
- isShowAvatarInitials
- reverseNameOrder
- showDetailsLabel

###### Outputs

- closeProfileMenu
- showProfileInfo

###### HostBindings

- class

###### Accessors

- cssClasses

### Inputs

avatarUrl
Type : `string`

impersonateLabel
Type : `string`
Default value : `'acting as'`

isShowAvatarInitials
Type : `boolean`
Default value : `true`

reverseNameOrder
Type : `boolean`
Default value : `false`
If true, the name will be displayed in reverse order (first name, first)

showDetailsLabel
Type : `string`
Default value : `'Show profile details'`

### Outputs

closeProfileMenu
Type : `EventEmitter<void>`

showProfileInfo
Type : `EventEmitter<void>`

### HostBindings

class
Type : `string`

### Methods

onClose
`onClose()`
Returns : `void`

onShowInfoClick
`onShowInfoClick()`
Returns : `void`

### Properties

avatarInitials
Type : `Signal<string>`

fullName
Type : `Signal<literal type>`
Holds the full name of the user and the impersonated user

isOnline
This property is not used anymore
Type : `unknown`
Default value : `true`
If true, the user is online

userState
Type : `Signal<UserProfile>`
Default value : `inject(UserService).getSignal()`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""