CngxAccordionItem
projects/ui/accordion/accordion-item.component.ts
Import#
import { CngxAccordionItem } from '@cngx/ui/accordion'
Description#
Accordion item organism. Renders the APG-correct trio a headless consumer
otherwise hand-wires: a role="heading" wrapper carrying the group's
aria-level, a cngxAccordionPanel header <button>, and a
role="region" named back at the header via aria-labelledby. Expansion is
derived from the coordinator (Pillar 1); the header self-wires keyboard nav
through the registration brain, so arrow keys rove across items even though
each header lives in its own component view.
A disabled item renders a visually-hidden reason element with a stable id
that aria-describedby always points at (IDREF never dangles); only the
element's aria-hidden and text toggle with disabled().
Metadata#
Host#
Dependencies#
CNGX_ACCORDION_GROUPinject()groupRelationships
Index#
Properties
HostBindings
Inputs#
Disabled item: the header reports tabindex="-1" + aria-disabled="true",
is skipped by roving, and its click never expands. The reason text is
announced through disabledReason via aria-describedby.
falseReason announced to assistive tech when the item is disabled, bound through
the always-present aria-describedby reason element. Resolves
input ?? CNGX_ACCORDION_CONFIG.disabledReason ?? EN default: an unbound
input falls back to the app-wide config (English out of the box, overridden
via withAccordionLabels).
this.config.disabledReasonMessage announced through a role="alert" when [state] is error and no
*cngxAccordionItemError slot is provided. Resolves
input ?? CNGX_ACCORDION_CONFIG.errorMessage ?? EN default, mirroring
disabledReason: a spoken default so the error state is never silent
to assistive tech. The error slot, when present, wins over this string.
this.config.errorMessageStable id this item registers under in the coordinator's open-set. Defaults
to a generated id; bind [panelId] to a stable consumer value to address
the panel through the group's [(openIds)] model - seed it open on load or
drive expansion from router/SSR state. Mirrors CngxTab.id / CngxStep.id.
nextUid('cngx-accordion-panel-')Semantic severity reflected onto the [data-severity] host attribute for
skins that render it (the severity-spine skin fills its colour column from
the matching --cngx-color-danger / -warning / -info token). Mirrors the
group's [skin] -> [data-skin] cascade; purely visual, no ARIA impact.
The panel's async lifecycle, communicated to assistive tech. Accepts a raw
AsyncStatus or a CngxAsyncState the consumer already owns -
the item reads only the status discriminator, never the payload, so it stays
non-generic. A pure data input (the item injects no CNGX_STATEFUL), so no
empty-string transform: a bare string status must survive untouched. The
consumer wires the fetch; the item only communicates the state it is handed.
Instance Properties#
unknownBusy-state slot; absent means the CSS skeleton default renders.
contentChild(CngxAccordionItemBusy)unknownLazy region-body slot; absent means the body projects eagerly through the default slot.
contentChild(CngxAccordionItemContent)unknownThe button's aria-describedby: subtitle first (an informative secondary
line the title-only name-pin would otherwise hide from AT), then the
disabled-reason element. Both IDREFs are always present in the DOM - the
subtitle span toggles aria-hidden by presence, the reason span toggles by
disabled(). Constant string: the ids never change, so no computed().
`${this.subtitleId} ${this.reasonId}`unknownError-state slot; absent means the CSS error affordance default renders.
contentChild(CngxAccordionItemError)unknownChevron override slot; absent means the CSS chevron default renders.
contentChild(CngxAccordionItemIcon)unknownSubtitle presence, so the always-present subtitle IDREF wrapper toggles its
aria-hidden by projection: hidden (empty) when unbound, announced through
aria-describedby when a subtitle is projected.
contentChild(CngxAccordionItemSubtitle)HostBindings#
| Binding | Expression |
|---|---|
[attr.data-expanded] | expanded() ? '' : null |
[attr.data-severity] | severity() ?? null |