<tyro-ui-user-chip>

User Chip

Utilisateur affiché en pilule - avatar + nom. Un clic ouvre une bulle Détail (grand avatar, nom, @pseudo, lignes d'info, étiquettes). Purement présentationnel : l'application charge le détail sur (opened) si besoin.

Bulle détail

Cliquez sur un utilisateur

Chargé à l'ouverture

(opened) → appel API simulé → [badges]

Tailles et affichage seul

xs / sm / md / lg - [clickable]=false

Sans bulle

Inputs

Propriété	Type	Défaut	Description
`[name]`	`string`	`''`	Nom affiché (ex. displayName, sinon pseudo) - sert aussi à générer l'avatar sans [src]
`[username]`	`string`	`-`	Pseudo, affiché en `@pseudo` dans la bulle
`[src]`	`string (URL)`	`-`	Photo de profil (voir `tyro-ui-avatar`)
`[size]`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'sm'`	Taille de l'avatar de la pilule
`[clickable]`	`boolean`	`true`	`false` : simple affichage, sans bulle
`[badges]`	`ITyroUiUserChipBadge[]`	`[]`	Étiquettes de la bulle : `{ label, variant?, icon? }` (variantes de `tyro-ui-chip`)
`[lines]`	`ITyroUiUserChipLine[]`	`[]`	Lignes d'information de la bulle : `{ text, icon? }` (ex. un email)
`[detailLoading]`	`boolean`	`false`	Squelette à la place des lignes et étiquettes pendant un chargement
`[detailError]`	`string \| null`	`null`	Message affiché si le détail n'a pas pu être chargé
`[bubbleLabel]`	`string`	`'Détail'`	Titre de la bulle (FR/EN automatique par défaut)

Outputs

Propriété	Type	Défaut	Description
`(opened)`	`void`	-	Bulle ouverte - le bon moment pour charger le détail (API)
`(closed)`	`void`	-	Bulle fermée (clic extérieur, Échap ou défilement)

Utilisation

La bulle est en position fixe : elle n'est jamais coupée par un tableau qui défile, et se ferme au clic extérieur, avec Échap ou au défilement.

<tyro-ui-user-chip
  [name]="user.displayName || user.username"
  [username]="user.username"
  [src]="user.pp"
  [badges]="badges()"
  [detailLoading]="loading()"
  (opened)="loadUserCard(user.id)">
</tyro-ui-user-chip>