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 molecule owns only the id
coordination computed() graph; the visuals are 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
CngxStat
Relationships
Depends on1
Index#
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'Methods#
HostBindings#
| Binding | Expression |
|---|---|
[attr.aria-labelledby] | 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.