CngxStat
projects/common/data/display/stat/stat.component.ts
Import#
import { CngxStat } from '@cngx/common/data'
Description#
Coordination molecule for a KPI stat. Its sole reason to exist is the
screen-reader layer (Pillar 2): hand-assembling a heading, a <cngx-metric>
and a <cngx-delta> makes a screen reader announce three disconnected
fragments. CngxStat projects the label / value / delta / caption slots,
collects the id each slot registers, and derives one aria-labelledby that
reads the whole stat as a single accessible name in reading order.
Composition, never a config bag (Pillar 3): the id coordination lives in the CngxStatCoordinator host directive, so another component that hosts the same four slots applies the identical brain instead of reimplementing it. The visuals stay whatever atoms the consumer projects into the slots.
<cngx-stat aria-live="polite">
<span cngxStatLabel>Revenue</span>
<cngx-metric cngxStatValue [value]="1.2" unit="M EUR" />
<cngx-delta cngxStatDelta [value]="5.3" />
<span cngxStatCaption>vs. last quarter</span>
</cngx-stat>Metadata#
Host#
Providers#
CNGX_STAT- useExisting
CngxStatCoordinator
Relationships
Depends on1
Index#
Inputs
HostBindings
Inputs#
"off" | "polite" | "assertive"Politeness of the live region. off (default) for a static stat;
polite / assertive for a KPI whose value updates in place.
'off'HostBindings#
| Binding | Expression |
|---|---|
[attr.aria-labelledby] | coordinator.labelledBy() |
[attr.aria-live] | live() |
Default layout for CngxStat. The host carries .cngx-stat - a vertical
grid stacking the label, the value+delta row, and the caption. Purely
structural: every visual (colour, size, weight) comes from the atoms the
consumer projects into the slots, so the molecule adds no thematic surface
of its own beyond the row gaps.
Slots
[cngxStatLabel]- the heading row.cngx-stat__row- the value + delta row (baseline-aligned)[cngxStatCaption]- the trailing context row
Index#
Layout
<length>8pxHorizontal gap between the value and the delta on the value row.