Avatar

An avatar, nol-avatar, for a person or an agent: a rounded square with the large radius, filled with its AvatarColor's fill, showing its image clipped to that square, or else its initials in that color's letter color, regular at the panel text size, at least 4.5:1 on the fill. Its color is the one bound, or else the one of its author color's family, or else the one its color key chooses, or else the default pair, avatar-default. Under forced colors it keeps a 1px CanvasText edge. Initials wider than the room inside its edge, less 1px on each side, are scaled down to that room at every size; initials that fit keep their size. Shown alone, it is an image named by its name, or by its label; beside the name it shows, it is decorative and hidden from assistive technology, as it is when its name and label are both blank. An unavailable avatar is dimmed, and its name says so.

Examples

Loading…

States

Loading…

API

Selector nol-avatar

Import from @noldova/ui.components.angular

Inputs

Name	Type	Default	Description
`name`	`string`	Required	The name of whom the avatar shows, which names it for assistive technology and gives its initial when it has no initials.
`image`	`string \| null`	`null`	The address of the image the avatar shows in place of its initials; null when not bound, which shows the initials. An image that fails to load or decode shows the initials in its place, in the same box, until the avatar is given another address.
`initials`	`string \| null`	`null`	The initials the avatar shows; null when not bound, which shows the first character of the name in upper case, in the app's locale.
`color`	`number \| null`	`null`	Which of the theme's eight author colors, from 1 to 8, picks the avatar's color when none is bound to `filledColor`: 1 the default pair, 2 Teal, 3 Green, 4 Amber, 5 Orange, 6 Red, 7 Pink and 8 Purple, so an author's name and avatar stay one family; null when not bound, which takes the color its color key chooses, or the default pair without one. Another number fails when the avatar renders, with an `ArgumentOutOfRangeException`.
`colorKey`	`string \| null`	`null`	A key, such as the id the app knows the person or agent by, that chooses one of the eight author colors' hues, by its 32-bit FNV-1a hash modulo eight, when no color is bound, the same one for the same key every time; null when not bound.
`size`	`AvatarSize`	`AvatarSize.Normal`	The avatar's size; normal when not bound.
`label`	`string`	`String.empty`	The name assistive technology reads in place of the name, such as the name and a role; empty when not bound, which reads the name.
`decorative`	`boolean`	`false`	Whether the avatar is hidden from assistive technology, because the name it stands for is shown beside it; false when not bound.
`unavailable`	`boolean`	`false`	Whether whom the avatar shows is unavailable, which dims it and adds "unavailable" to its name; false when not bound.
`filled`	`boolean`	`false`	Changes nothing, as every avatar is filled, so an owner may bind it or leave it out. False when not bound.
`filledColor`	`AvatarColor \| null`	`null`	The avatar's color; null when not bound, which takes the one its `color` picks, or else the one its color key chooses, or else the default pair, `avatar-default`.

Accessibility

It takes no keys of its own.

Shown alone, an avatar has the img role and is named by its name, or by the label its owner gives.

Beside the name it stands for, its owner makes it decorative, and it is hidden from assistive technology; with a blank name and no label it is hidden too.

An unavailable avatar is read as its name followed by “, unavailable”, since its dimmed look alone would not say so.

An image avatar's picture has an empty alt text, so the avatar's own name is read once.

It takes no focus and has no hover of its own; the control around it, such as a row, gives those.

Specification

Loading…