Справочник API

Вот полный контракт avatar: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.

Входные свойства

Настройте avatar с помощью 22 входных свойств. Привязывайте их, как любой @Input в Angular.

Имя	Тип	По умолчанию	Описание
`size`	`string \| number`	`50`	Размер аватара: одно число — это пиксели; любая длина CSS (1.75rem, 50%, calc(2rem + 12px)) рисуется как есть
`name`	`string \| null`	—	Имя пользователя для генерации инициалов, когда источники изображений недоступны
`src`	`string \| SafeUrl \| null`	—	URL основного пользовательского источника изображения для аватара
`alt`	`string \| null`	—	Альтернативный текст изображения аватара для доступности
`round`	`boolean`	`true`	Должен ли аватар быть круглым (true) или следовать cornerRadius
`interactive`	`boolean`	`false`	Помечает аватар как интерактивный элемент управления: выставляет role=“button”, делает его фокусируемым и вызывает clickOnAvatar по Enter/Space. Включайте всегда, когда привязываете (clickOnAvatar).
`bgColor`	`string`	—	Цвет фона для текстовых аватаров. Генерируется автоматически, если не указан
`autoColor`	`boolean`	`true`	При `true` (по умолчанию) аватар с инициалами получает фон из хеша имени. Установите `false`, чтобы задать его через переменную `--hub-avatar-bg-color`; явный `bgColor` всегда имеет приоритет.
`fgColor`	`string \| undefined`	—	Цвет инициалов и проецируемого содержимого. Если не задан, аватар сам выбирает чёрный или белый по фону — тот, что проходит по WCAG; явно указанное значение всегда побеждает, независимо от контраста.
`borderColor`	`string`	—	Цвет рамки вокруг аватара
`cornerRadius`	`string \| number`	`0`	Радиус скругления углов, когда round равно false
`textSizeRatio`	`number`	`3`	Коэффициент для расчёта размера текста на основе размера аватара (size / textSizeRatio)
`initialsSize`	`string \| number`	`0`	Ограничивает количество отображаемых инициалов (0 = без ограничения)
`facebookId`	`string \| null`	—	ID пользователя Facebook для изображения профиля (по возможности, могут действовать ограничения API)
`githubId`	`string \| null`	—	Имя пользователя GitHub для получения изображения профиля
`gravatarId`	`string \| null`	—	Email или MD5-хеш Gravatar для получения изображения профиля
`value`	`string \| null`	—	Отображение пользовательского значения в качестве аватара (например, "75%", "+5")
`style`	`Record<string, string \| number \| null \| undefined> \| string`	—	Инлайн-стили, объединяемые с отрисованным содержимым — изображением, инициалами или слотом проецируемого содержимого. Принимает объект стилей или строку CSS; до хост-элемента не доходят
`referrerpolicy`	`string \| null`	—	Политика referrer для изображения аватара (например, "no-referrer")
`placeholder`	`string`	—	Изображение на крайний случай: показывается, только пока не отрисовано ничего другого — ни один источник не разрешён, ни один не объявлен или один ещё загружается — и инициалов тоже нет. Оно никогда не входит в цепочку запасных вариантов, поэтому не может обойти инициалы, как это сделал бы `src`.
`badge`	`string \| number \| boolean \| null`	`null`	Угловой оверлей: `badge` / `[badge]="true"` → точка; `badge="4k"` → метка; null / отсутствует → ничего.
`badgeColor`	`HubAvatarBadgeColor \| string \| null`	`null`	Семантический цвет бейджа (primary · secondary · success · danger · warning · info · light · dark) → `--hub-sys-color-*`.

События

Реагируйте на то, что делает avatar, — 1 событий, к которым можно подключить вашу логику.

Имя	Тип	Описание
`clickOnAvatar`	`OutputEmitterRef<Source \| null>`	Вызывается при клике, а также по Enter/Space, если задан `interactive`. Возвращает источник, отрисовывающий аватар — его `sourceType`, `sourceId` и `getAvatar(size)` — или null, если ни один не разрешён. `Source` экспортируется из пакета, поэтому обработчик может назвать тип, а не откатываться к any

Методы

Управляйте avatar из кода — 1 методов его программного интерфейса.

Имя	Сигнатура	Возвращает	Описание
`Source.getAvatar`	`getAvatar(size: number): string`	`string`	Возвращает то, что источник рисует в заданном размере: URL картинки для удалённого источника, инициалы или обычный текст для локального. `Source` — полезная нагрузка `clickOnAvatar`, и она экспортируется из пакета.

Шаблоны

Шаблоны пока не задокументированы.