Référence API

Voici le contrat complet de avatar : tout ce que vous pouvez lier, écouter, projeter et personnaliser, réuni au même endroit. Branchez ce dont vous avez besoin et stylisez ce que vous voulez — c’est standalone et compatible avec les signals.

Inputs

Réglez avatar à votre goût avec 19 inputs. Liez-les comme n’importe quel @Input Angular.

Nom	Type	Par défaut	Description
`size`	`string \| number`	`50`	Taille de l'avatar en pixels.
`name`	`string`	—	Nom d'utilisateur pour générer les initiales lorsque les sources d'images échouent.
`src`	`string \| SafeUrl`	—	URL source d'image personnalisée principale pour l'avatar.
`alt`	`string`	—	Texte alternatif de l'image de l'avatar pour l'accessibilité.
`round`	`boolean`	`true`	Indique si l'avatar doit être circulaire (true) ou suivre cornerRadius.
`bgColor`	`string`	—	Couleur d'arrière-plan des avatars textuels. Générée automatiquement si non fournie.
`fgColor`	`string`	`#FFF`	Couleur du texte des initiales dans les avatars textuels.
`borderColor`	`string`	—	Couleur de la bordure autour de l'avatar.
`cornerRadius`	`string \| number`	`0`	Rayon des angles lorsque round vaut false.
`textSizeRatio`	`number`	`3`	Ratio pour calculer la taille du texte à partir de la taille de l'avatar (size / textSizeRatio).
`initialsSize`	`string \| number`	`0`	Limite le nombre d'initiales affichées (0 = aucune restriction).
`facebookId`	`string`	—	Identifiant utilisateur Facebook pour la photo de profil (au mieux, des restrictions d'API peuvent s'appliquer).
`githubId`	`string`	—	Nom d'utilisateur GitHub pour récupérer la photo de profil.
`gravatarId`	`string`	—	E-mail Gravatar ou hachage MD5 pour récupérer la photo de profil.
`value`	`string`	—	Afficher une valeur personnalisée comme avatar (par ex. "75%", "+5").
`style`	`Partial<CSSStyleDeclaration>`	—	Styles personnalisés à appliquer à l'élément racine de l'avatar.
`referrerpolicy`	`string`	—	Politique de référent pour l'image de l'avatar (par ex. "no-referrer").
`badge`	`string \| number \| boolean \| null`	—	Superposition d’angle : `badge` / `[badge]="true"` → un point ; `badge="4k"` → une pastille ; null / absent → rien.
`badgeColor`	`HubAvatarBadgeColor \| string \| null`	—	Couleur sémantique du badge (primary · secondary · success · danger · warning · info · light · dark) → `--hub-sys-color-*`.

Outputs

Réagissez à ce que fait avatar — 1 événements sur lesquels accrocher votre logique.

Nom	Type	Description
`clickOnAvatar`	`Source`	Émis lorsque l'avatar est cliqué, renvoie l'objet source actif courant.

Templates

Aucun template documenté pour le moment.

Variables CSS

Personnalisez chaque pixel avec 11 variables CSS. Remplacez-les au niveau de :root ou limitez-les à un conteneur.

Taille et mise en page

Contrôlez les dimensions et l'espacement de l'avatar.

Variable	Par défaut	Type	Description
`--hub-avatar-size`	`50px`	length	Taille par défaut de l'avatar lorsqu'aucune taille n'est spécifiée. `24px40px64px96px`
`--hub-avatar-border-radius`	`50%`	length	Rayon de bordure du conteneur de l'avatar. `04px8px50%`

Couleurs et apparence

Personnalisez les couleurs et l'apparence visuelle de l'avatar.

Variable	Par défaut	Type	Description
`--hub-avatar-bg-color`	`var(--hub-sys-color-primary)`	color	Couleur d'arrière-plan des avatars textuels. `#007bff#28a745#dc3545#6f42c1`
`--hub-avatar-text-color`	`#ffffff`	color	Couleur du texte des initiales dans les avatars textuels. `#000000#ffffff#6c757d`
`--hub-avatar-border-color`	`transparent`	color	Couleur de la bordure autour de l'avatar. `#dee2e6#007bff#28a745`
`--hub-avatar-border-width`	`0`	length	Largeur de la bordure autour de l'avatar. `1px2px3px`

Typographie

Contrôlez l'apparence du texte des initiales de l'avatar.

Variable	Par défaut	Type	Description
`--hub-avatar-font-family`	`Helvetica, Arial, sans-serif`	string	Famille de police des initiales de l'avatar. `Inter, sans-serifRoboto, sans-serifsystem-ui`
`--hub-avatar-font-weight`	`normal`	string	Graisse de police des initiales de l'avatar. `400500600bold`
`--hub-avatar-text-transform`	`uppercase`	string	Transformation du texte pour les initiales. `noneuppercaselowercasecapitalize`

Contenu personnalisé

Dimensionnement du contenu projeté dans l'avatar. L'arrière-plan et le premier plan proviennent des propres tokens de l'avatar.

Variable	Par défaut	Type	Description
`--hub-avatar-content-padding`	`calc(var(--hub-avatar-size) * 0.2)`	length	Espace entre le contenu projeté et le bord de l'avatar. `8px15%calc(var(--hub-avatar-size) * 0.25)`
`--hub-avatar-content-icon-size`	`calc(var(--hub-avatar-size) * 0.55)`	length	Taille de police pour les icônes de police / emoji projetés (héritée par le glyphe). `1.5remcalc(var(--hub-avatar-size) * 0.6)`

Styles et theming

Aucun exemple de style n’est encore documenté. Cette section inclura des recettes de personnalisation et des exemples de theming.