CngxGoal
projects/common/data/display/goal/goal.component.ts
Import#
import { CngxGoal } from '@cngx/common/data'
Description#
Determinate attainment bar - a continuous progress toward a target
(quota reached, budget spent, goal met). Named CngxGoal because
cngx-progress is the indeterminate async loading bar; this is the
finished-fraction indicator, distinct from that and from the discrete
CngxSegmentedProgress.
Mirrors the CngxSegmentedProgress a11y shape: role="progressbar" with
the whole aria-value* set plus aria-valuetext living in the computed()
graph (Pillar 2). The value is clamped to [0, max]; the fill width is a
derived percent bound as a CSS custom property.
<cngx-goal [value]="73" [max]="100" />
<cngx-goal [value]="q()" [max]="target()" [valueTextFormat]="quotaText" />Metadata#
Host#
Index#
Properties
Derived State
Inputs#
Instance Properties#
unknownOverride the aria-valuetext string. Receives (now, max) - the clamped
value and the target. The default is (now, max) => \${now} of ${max}`. Supply a localised closure for richer text (e.g. (n, m) => `${n} of ${m}, ${Math.round((n / m) * 100)}% of quota``).
input<((now: number, max: number) => string) | undefined>(undefined)HostBindings#
| Binding | Expression |
|---|---|
[attr.aria-valuemin] | 0 |
[attr.aria-valuemax] | maxValue() |
[attr.aria-valuenow] | now() |
[attr.aria-valuetext] | valueText() |
[style.--cngx-goal-fill.%] | fillPercent() |
Default visuals for CngxGoal. The host carries .cngx-goal - a rounded
track with a determinate fill whose width is driven by --cngx-goal-fill
(a percent the component binds inline from the clamped attainment). Purely
a horizontal bar; the accessible value lives on the host's aria-value*.
Slots
.cngx-goal__track- the full-width groove.cngx-goal__fill- the attained portion, width= --cngx-goal-fill%
Inheritance
--cngx-goal-fill-color->--cngx-color-success--cngx-goal-track-color- leaf token, swaps in dark mode
Dark mode
Three hooks lift the track and fill to the foundation's dark variant:
prefers-color-scheme: dark[data-color-scheme="dark"]/.darkclass[data-color-scheme="light"]/.lightclass (explicit pin)
Index#
Layout
<percentage>0%Attained fraction, as a <percentage>. The component binds this inline
on the host from the clamped value (e.g. 73%); it must inherit so the
value reaches the descendant .cngx-goal__fill that consumes it (a
inherits: false here would pin the fill to the 0% initial). Authors
normally leave it alone.
Surface
<color>oklch(0.92 0.01 290)Colour of the unfilled track groove.
<color>oklch(0.65 0.18 145)Colour of the attained fill. Falls back to --cngx-color-success.
See: [[--cngx-color-success]]