diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.html b/demo-shell/src/app/components/app-layout/app-layout.component.html
index 189261cb607..31c840191d1 100644
--- a/demo-shell/src/app/components/app-layout/app-layout.component.html
+++ b/demo-shell/src/app/components/app-layout/app-layout.component.html
@@ -23,8 +23,13 @@
src="https://avatars.githubusercontent.com/u/503991?v=4&size=64"
initials="DV"
tooltip="Denys Vuika"
- >
+ cursor="pointer"
+ [matMenuTriggerFor]="userMenu">
+
+
+
+
diff --git a/lib/core/src/lib/avatar/avatar.component.md b/lib/core/src/lib/avatar/avatar.component.md
index 697541df5c3..bd2aea54af4 100644
--- a/lib/core/src/lib/avatar/avatar.component.md
+++ b/lib/core/src/lib/avatar/avatar.component.md
@@ -6,6 +6,8 @@ The Avatar component is a simple component that can be used to display user avat
## Usage
+Displaying an avatar with an image and initials fallback:
+
```html
```
+Integrating with context menu:
+
+```html
+
+
+
+
+
+
+
+```
+
## API
Import the following standalone components:
@@ -32,6 +52,7 @@ import { AvatarComponent } from '@alfresco/adf-core';
| `src` | string | | The URL of the image to display. |
| `initials` | string | | The initials to display if the image is not available. |
| `tooltip` | string | | The tooltip to display when hovering over the avatar. |
+| `cursor` | string | `auto` | The cursor style. |
## Theming
@@ -52,3 +73,5 @@ The following CSS classes are available for theming:
| `--adf-avatar-color` | `#333` | The text color of the initials. |
| `--adf-avatar-font-size` | `16px` | The font size of the initials. |
| `--adf-avatar-font-weight` | `400` | The font weight of the initials. |
+| `--adf-avatar-cursor` | `auto` | The cursor style. |
+```
diff --git a/lib/core/src/lib/avatar/avatar.component.scss b/lib/core/src/lib/avatar/avatar.component.scss
index fd683f11668..67e69728c52 100644
--- a/lib/core/src/lib/avatar/avatar.component.scss
+++ b/lib/core/src/lib/avatar/avatar.component.scss
@@ -3,7 +3,7 @@
}
.adf-avatar__image {
- cursor: default;
+ cursor: var(--adf-avatar-cursor, auto);
display: inline-block;
overflow: hidden;
line-height: 1;
diff --git a/lib/core/src/lib/avatar/avatar.component.ts b/lib/core/src/lib/avatar/avatar.component.ts
index 8d572753095..9a868c769ae 100644
--- a/lib/core/src/lib/avatar/avatar.component.ts
+++ b/lib/core/src/lib/avatar/avatar.component.ts
@@ -39,4 +39,8 @@ export class AvatarComponent {
@HostBinding('style.--adf-avatar-size')
@Input()
size = getComputedStyle(document.documentElement).getPropertyValue('--adf-avatar-size');
+
+ @HostBinding('style.--adf-avatar-cursor')
+ @Input()
+ cursor = getComputedStyle(document.documentElement).getPropertyValue('--adf-avatar-cursor');
}