@lucca-front/ng 22.0.5 → 22.0.6-rc.1

package/llms/references/components/avatar/avatar.component.md

@@ -0,0 +1,563 @@
+# avatar — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-users-avatar-angular-basic--docs)
+
+## Angular
+
+Mots-clés : photo profil, initiales, utilisateur
+
+Component selector : `lu-user-picture`
+
+### Basic
+
+```js
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { LuDisplayInitials, LuUserPictureComponent, USER_PICTURE_SIZE } from '@lucca-front/ng/user';
+import { LuUserPopoverDirective } from '@lucca-front/ng/user-popover';
+import { finn, georges, jake } from '../../user.mocks';
+```
+
+```html
+<button class="userPopover_trigger" type="button" [luUserPopover]="user">
+	<lu-user-picture
+		[user]="user"
+		[displayFormat]="displayFormat"
+		data-testid="lu-user-picture"
+		[class.mod-placeholder]="placeholder"
+	/>
+</button>
+```
+
+### Group
+
+```js
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { LuUserPictureModule } from '@lucca-front/ng/user';
+import { jake } from '../../user.mocks';
+```
+
+```html
+<ul class="avatarWrapper" [class]="sizes()">
+	<li class="avatarWrapper-item" translate="no">
+		<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+		<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+		<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+		<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+		<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+		<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+		<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+		<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+		<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+		<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+		<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+	</li>
+</ul>
+
+<ul class="avatarWrapper" [class]="sizes()">
+	<li class="avatarWrapper-item" translate="no">
+		<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+		<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+		<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+		<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+		<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+		<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+		<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+		<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+		<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+		<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+	</li>
+	<li class="avatarWrapper-item" role="presentation">
+		<button type="button" class="avatarWrapper-item-action">
+			<span class="avatarWrapper-item-action-more">
+				<span aria-hidden="true" data-content-before="+6"></span>
+				<span class="pr-u-mask">Voir les 6 utilisateurs supplémentaires</span>
+			</span>
+		</button>
+	</li>
+</ul>
+
+<ul class="avatarWrapper" [class]="sizes()">
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+			<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+		</a>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+			<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+		</a>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+			<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+		</a>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+			<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+		</a>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+			<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+		</a>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+			<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+		</a>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+			<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+		</a>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+			<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+		</a>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+			<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+		</a>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+			<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+		</a>
+	</li>
+</ul>
+
+<ul class="avatarWrapper" [class]="sizes()">
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+			<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+		</a>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+			<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+		</a>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+			<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+		</a>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+			<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+		</a>
+	</li>
+
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+			<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+		</a>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+			<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+		</a>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+			<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+		</a>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+			<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+		</a>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<lu-user-picture aria-hidden="true" class="avatar" [user]="user" />
+			<span class="pr-u-mask">{{ user.firstName }} {{ user.lastName }}</span>
+		</a>
+	</li>
+	<li class="avatarWrapper-item" role="presentation">
+		<button type="button" class="avatarWrapper-item-action">
+			<span class="avatarWrapper-item-action-more">
+				<span aria-hidden="true" data-content-before="+6"></span>
+				<span class="pr-u-mask">Voir les 6 utilisateurs supplémentaires</span>
+			</span>
+		</button>
+	</li>
+</ul>
+```
+
+## HTML/CSS
+
+Classe CSS : `.avatar`
+
+### Avatars basic
+
+```css
+@forward '@lucca-front/scss/src/components/avatar';
+```
+
+```html
+<div class="avatar">
+	<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+</div>
+```
+
+### Display
+
+```css
+@forward '@lucca-front/scss/src/components/avatar';
+```
+
+```html
+<span class="avatar">
+	<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+</span>
+<span class="avatar" translate="no">
+	<span class="avatar-picture" style="background-color: rgb(202, 92, 214)">
+		<span class="avatar-picture-initials">FM</span>
+	</span>
+</span>
+<span class="avatar mod-placeholder" translate="no">
+	<span class="avatar-picture"></span>
+</span>
+<span class="avatar mod-AI" translate="no">
+	<span class="avatar-picture"></span>
+</span>
+```
+
+### Group basic
+
+```css
+@forward '@lucca-front/scss/src/components/avatar';
+```
+
+```html
+<ul class="avatarWrapper">
+	<li class="avatarWrapper-item" translate="no">
+		<span class="avatar">
+			<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+		</span>
+		<span class="pr-u-mask">Finn Mertens</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<span class="avatar">
+			<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+		</span>
+		<span class="pr-u-mask">Finn Mertens</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<span class="avatar">
+			<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+		</span>
+		<span class="pr-u-mask">Finn Mertens</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<span class="avatar">
+			<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+		</span>
+		<span class="pr-u-mask">Finn Mertens</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<span class="avatar">
+			<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+		</span>
+		<span class="pr-u-mask">Finn Mertens</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<span class="avatar">
+			<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+		</span>
+		<span class="pr-u-mask">Finn Mertens</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<span class="avatar">
+			<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+		</span>
+		<span class="pr-u-mask">Finn Mertens</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<span class="avatar">
+			<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+		</span>
+		<span class="pr-u-mask">Finn Mertens</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<span class="avatar">
+			<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+		</span>
+		<span class="pr-u-mask">Finn Mertens</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<span class="avatar">
+			<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+		</span>
+		<span class="pr-u-mask">Finn Mertens</span>
+	</li>
+</ul>
+```
+
+### Clickable
+
+```css
+@forward '@lucca-front/scss/src/components/avatar';
+```
+
+```html
+<ul class="avatarWrapper">
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<span class="avatar">
+				<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+			</span>
+			<span class="pr-u-mask">Finn Mertens</span>
+		</a>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<span class="avatar">
+				<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+			</span>
+			<span class="pr-u-mask">Finn Mertens</span>
+		</a>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<span class="avatar">
+				<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+			</span>
+			<span class="pr-u-mask">Finn Mertens</span>
+		</a>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<span class="avatar">
+				<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+			</span>
+			<span class="pr-u-mask">Finn Mertens</span>
+		</a>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<span class="avatar">
+				<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+			</span>
+			<span class="pr-u-mask">Finn Mertens</span>
+		</a>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<span class="avatar">
+				<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+			</span>
+			<span class="pr-u-mask">Finn Mertens</span>
+		</a>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<span class="avatar">
+				<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+			</span>
+			<span class="pr-u-mask">Finn Mertens</span>
+		</a>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<span class="avatar">
+				<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+			</span>
+			<span class="pr-u-mask">Finn Mertens</span>
+		</a>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<span class="avatar">
+				<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+			</span>
+			<span class="pr-u-mask">Finn Mertens</span>
+		</a>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<a href="#" class="avatarWrapper-item-action">
+			<span class="avatar">
+				<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+			</span>
+			<span class="pr-u-mask">Finn Mertens</span>
+		</a>
+	</li>
+</ul>
+```
+
+### More
+
+```css
+@forward '@lucca-front/scss/src/components/avatar';
+```
+
+```html
+<ul class="avatarWrapper">
+	<li class="avatarWrapper-item" translate="no">
+		<span class="avatar">
+			<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+		</span>
+		<span class="pr-u-mask">Finn Mertens</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<span class="avatar">
+			<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+		</span>
+		<span class="pr-u-mask">Finn Mertens</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<span class="avatar">
+			<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+		</span>
+		<span class="pr-u-mask">Finn Mertens</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<span class="avatar">
+			<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+		</span>
+		<span class="pr-u-mask">Finn Mertens</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<span class="avatar">
+			<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+		</span>
+		<span class="pr-u-mask">Finn Mertens</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<span class="avatar">
+			<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+		</span>
+		<span class="pr-u-mask">Finn Mertens</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<span class="avatar">
+			<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+		</span>
+		<span class="pr-u-mask">Finn Mertens</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<span class="avatar">
+			<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+		</span>
+		<span class="pr-u-mask">Finn Mertens</span>
+	</li>
+	<li class="avatarWrapper-item" translate="no">
+		<span class="avatar">
+			<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+		</span>
+		<span class="pr-u-mask">Finn Mertens</span>
+	</li>
+	<li role="presentation" class="avatarWrapper-item">
+		<button type="button" class="avatarWrapper-item-action">
+			<span class="avatarWrapper-item-action-more">
+				<span aria-hidden="true" data-content-before="+8"></span>
+				<span class="pr-u-mask">Voir les 8 utilisateurs supplémentaires</span>
+			</span>
+		</button>
+	</li>
+</ul>
+```
+
+### Sizes
+
+```css
+@forward '@lucca-front/scss/src/components/avatar';
+```
+
+```html
+<span class="avatar mod-XS">
+	<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+</span>
+<span class="avatar mod-S">
+	<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+</span>
+<span class="avatar mod-M">
+	<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+</span>
+<span class="avatar mod-L">
+	<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+</span>
+<span class="avatar mod-XL">
+	<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+</span>
+<span class="avatar mod-XXL">
+	<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+</span>
+<span class="avatar mod-XXXL">
+	<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+</span>
+```

package/llms/references/components/avatar/avatar.md

@@ -0,0 +1,93 @@
+# avatar
+
+## Import
+
+```typescript
+import { LuUserPictureComponent } from '@lucca-front/ng/user';
+```
+
+## Basic Usage
+
+```html
+<button class="userPopover_trigger" type="button" [luUserPopover]="user"> <lu-user-picture [user]="user" [displayFormat]="displayFormat" data-testid="lu-user-picture" [class.mod-placeholder]="placeholder" />
+</button>
+```
+
+## API Reference
+
+### LuUserPictureComponent (component)
+
+**Selector:** `lu-user-picture`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `displayFormat` | `displayFormat` | `LuDisplayInitials` | `displayPictureFormatRecord[inject(LU_DEFAULT_DISPLAY_POLICY)]` | — | — | Format d’affichage des initiales. F pour prénom (firstname) L pour nom (lastname). |
+| `user` | `user` | `LuUserPictureUserInput` | — | — | — | [Story] Affiche la photo de l’utilisateur ou ses initiales. |
+| `AI` | `AI` | `boolean` | `false` | — | `luBooleanAttribute` | Avatar utilisé pour une réponse faite par IA. |
+| `placeholder` | `placeholder` | `boolean` | `false` | — | `luBooleanAttribute` | Applique un placeholder d’avatar. |
+| `softRounded` | `softRounded` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `size` | `size` | `'XS' \| 'S' \| 'M' \| 'L' \| 'XL' \| 'XXL' \| 'XXXL'` | `'M'` | — | — | — |
+| `imageLoadingAttribute` | `imageLoadingAttribute` | `HTMLImageElement['loading']` | `'lazy'` | — | — | — |
+
+### Modules dépréciés
+
+- ⚠️ `LuUserPictureModule` — use `LuUserPictureComponent` instead
+- ⚠️ `LuUserModule` — use `LuUserDisplayPipe, LuUserPictureComponent, LuUserTileComponent` instead
+
+## Related files
+
+- 📝 [Code & implementation](./avatar.component.md)
+
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/avatar/avatar.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-users-avatar-angular-basic--docs)
+
+## Changelog
+
+> Diff structurel de l'API (selectors, inputs, outputs, models) entre versions stables, depuis `v21.4.2` jusqu'à `v22.0.0`. Les versions sans changement d'API sont omises.
+
+### 22.0.0
+
+~ `AI` : transform booleanAttribute → luBooleanAttribute
+~ `placeholder` : transform booleanAttribute → luBooleanAttribute
+~ `softRounded` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Added
+
+- `placeholder` input to render an empty picture, and `softRounded` input for a squared picture with rounded corners.
+- `USER_PICTURE_SIZE` constant and `UserPictureSize` type are now publicly exported and used to type the `size` input.
+
+#### 21.1.4
+
+##### Fixed
+
+- The picture falls back to `pictureHref` when loading `picture.href` fails.
+
+#### 20.3.0
+
+##### Added
+
+- `AI` input to render the picture with the AI styling.
+
+#### 19.0.0
+
+##### Deprecated
+
+- `LuUserPictureModule` — import the standalone `LuUserPictureComponent` instead.
+
+#### 18.2.0
+
+##### Changed
+
+- Avatar styles moved to the SCSS package.
+
+#### 18.1.1
+
+##### Added
+
+- `LU_DEFAULT_DISPLAY_POLICY` is taken into account to compute the initials.