CngxCheckboxIndicator
projects/common/display/checkbox-indicator/checkbox-indicator.component.ts
Import#
import { CngxCheckboxIndicator } from '@cngx/common/display'
Description#
Presentational checkbox / checkmark indicator.
Why this exists.
Across the library, "is this row selected?" shows up as a bare
<span class="cngx-select__check">✓</span> in the forms/select panel,
a future grid/tree cell will want a checkbox with indeterminate state, and
ng decompose cngx-* schematics should emit a consistent indicator shape
regardless of which list-like component they originated from. This atom
unifies all three surfaces behind a single presentational molecule -
purely decorative (aria-hidden="true"), zero outputs, two variants,
full --cngx-checkbox-* theming.
Responsibilities (intentionally narrow).
- Render a boxed checkbox or a bare checkmark glyph (
variant). - Express checked / indeterminate / disabled visual state via host classes the consumer (or upstream CSS) can theme.
- Apply size presets (
sm/md/lg) as CSS-custom-property modifiers.
Non-responsibilities.
- Selection state - controlled entirely by the parent via
checked/indeterminateinputs. - Interaction - no
clickoutput, no keyboard handling. The parent (option row, tree cell, grid row) owns the hit area and toggle semantics. - Accessibility announcements -
aria-hidden="true"unconditionally. The truth about "selected" is communicated by the row's ownaria-selected/role="option"ARIA, not by this decoration.
Metadata#
Host#
Relationships
Index#
HostBindings
Inputs#
TemplateRef | null Consumer-supplied template for the check glyph. When null (default),
the built-in <span class="cngx-checkbox-indicator__check">✓</span>
is rendered. When set, the consumer template replaces the glyph span
entirely - the __check class is NOT applied to the custom content
(consumers own the styling of their replacement).
Convention-compatible with *cngxSelectCheck / *cngxSelectOptionLabel:
pass a TemplateRef<void> obtained via #myGlyphTpl. Useful for
CngxTreeCheckboxHeader or other consumers that need a custom glyph
without forking the atom.
nullTemplateRef | null Consumer-supplied template for the indeterminate dash glyph. Mirrors
checkGlyph - defaults to the built-in
<span class="cngx-checkbox-indicator__dash">−</span>.
nullDisabled visual state. Purely cosmetic (opacity dim) - the indicator never intercepts events, so this is a hint, not a block.
falsePartial-selection state. Takes precedence over checked - when both
are true, the dash glyph is rendered. Intended for tree / group rows
where some-but-not-all descendants are selected.
false"sm" | "md" | "lg"Size preset. Maps to a --cngx-checkbox-size custom property.
'md'"checkbox" | "checkmark"Visual form. 'checkbox' renders a bordered box containing the glyph;
'checkmark' renders the bare glyph only (no box). Consumers pick the
mode-appropriate form themselves - @cngx/forms/select resolves it
from its selectionIndicatorVariant config.
'checkbox'HostBindings#
| Binding | Expression |
|---|---|
[class.cngx-checkbox-indicator--checkbox] | variant() === 'checkbox' |
[class.cngx-checkbox-indicator--checkmark] | variant() === 'checkmark' |
[class.cngx-checkbox-indicator--checked] | checked() |
[class.cngx-checkbox-indicator--indeterminate] | indeterminate() |
[class.cngx-checkbox-indicator--disabled] | disabled() |
[class.cngx-checkbox-indicator--sm] | size() === 'sm' |
[class.cngx-checkbox-indicator--md] | size() === 'md' |
[class.cngx-checkbox-indicator--lg] | size() === 'lg' |
Default visuals for CngxCheckboxIndicator. The host carries
.cngx-checkbox-indicator and reserves a constant box even when
the inner glyph is not rendered (the checkmark variant has empty
content while unchecked), so adjacent labels stay put across state
toggles. The inner __box is a child of the host - several tokens
carry inherits: true so size-variant overrides on the host
cascade through.
State modifiers
--checked- box fills with the checked-bg, glyph paints in the checked-color--indeterminate- same surface as checked, dash glyph--disabled- opacity dim via--cngx-checkbox-disabled-opacity
Variants
--checkmark- bare glyph, no box; the checked color is honored on the inner__check/__dashdirectly
Size variants
Each size pins --cngx-checkbox-size:
--sm- 0.875em--md- 1em (default)--lg- 1.25em
Slots
.cngx-checkbox-indicator__box- the bordered square.cngx-checkbox-indicator__check- checkmark glyph.cngx-checkbox-indicator__dash- indeterminate-state glyph
Inheritance
--cngx-checkbox-checked-bg->--cngx-color-primary(also pinned via:rootdelegation so dark-mode primary cascades without the @property initial-value shadowing the chain)--cngx-checkbox-radius->--cngx-radius-sm--cngx-checkbox-color->--cngx-color-primary(checkmark variant only)--cngx-checkbox-bg,--cngx-checkbox-border,--cngx-checkbox-checked-color- leaf tokens
Index#
State / Checked
State / Disabled
Layout
*1emActive size of the indicator box. inherits: true is load-bearing -
the inner __box is a child of the host, and the size-variant
classes (--sm / --md / --lg) set this token on the host. With
inherits: false the child would only see the registered initial
value and the size variants would render with a constant-sized box
inside a variable-sized host frame.
<length>2pxCorner radius of the box. Defaults to --cngx-radius-sm. Inherited
so a host-level override reaches the __box child that consumes it.
Surface
*currentColorText color of the inner glyph in the bare checkmark variant.
Defaults to currentColor.
*transparentBackground of the unchecked box. Inherited so a host-level
override reaches the __box child that consumes it.
*1.5px solid currentColorBorder shorthand of the unchecked box. Width + style + color in
one declaration so a consumer can re-skin the stroke with a
single override. Inherited so a host-level override reaches the
__box child that consumes it.
State / Checked
<color>oklch(0.66 0.19 50)Background of the box when checked or indeterminate. Falls back
to --cngx-color-primary.
See: [[--cngx-color-primary]]
<color>oklch(1 0 0)Glyph color inside the checked/indeterminate box.
State / Disabled
<number>0.5Opacity multiplier applied by .cngx-checkbox-indicator--disabled.
Variant / Size
*0.875emSize token for the .cngx-checkbox-indicator--sm variant.
*1emSize token for the .cngx-checkbox-indicator--md variant (default).
*1.25emSize token for the .cngx-checkbox-indicator--lg variant.