CngxFilterBuilder
projects/forms/filter-builder/filter-builder.component.ts
Import#
import { CngxFilterBuilder } from '@cngx/forms/filter-builder'
Description#
Recursive query-builder component. Brain lives entirely in
CngxFilterBuilderPresenter (host directive). This component is the
thin render shell: hosts the slot contentChildren and mounts the body
resolved through CNGX_FILTER_BUILDER_BODY_HOST (default
CngxFilterBuilderBody). State-driven UI (loading / error /
refreshing) is the consumer's concern - wrap with
<cngx-async-container [state]>. The live-region announcer is bound
here so AT updates stay outside the body's recursive render path.
Metadata#
Host#
Dependencies#
CNGX_FILTER_BUILDER_BODY_HOSTinject()bodyTypeRelationships
Depends on1
Index#
Instance Properties#
unknowncontentChild(CngxFilterBuilderAddFilterButton)unknowncontentChild(CngxFilterBuilderAddGroupButton)unknowncontentChild(CngxFilterBuilderExpressionTemplate)unknowncontentChild(CngxFilterBuilderGroupTemplate)unknowncontentChild(CngxFilterBuilderNegationToggle)unknowninjectFilterBuilderTemplateRegistry({
empty: this.emptySlot,
expressionTemplate: this.expressionTemplateSlot,
groupTemplate: this.groupTemplateSlot,
addFilterButton: this.addFilterButtonSlot,
addGroupButton: this.addGroupButtonSlot,
removeButton: this.removeButtonSlot,
logicToggle: this.logicToggleSlot,
negationToggle: this.negationToggleSlot,
valueEditor: this.valueEditorSlot,
})HostBindings#
| Binding | Expression |
|---|---|
[attr.aria-disabled] | ariaDisabled() |
Default visuals for CngxFilterBuilder. The host
cngx-filter-builder owns the outer container, group rails, indent /
border accents, action-button row, and the empty-state typography.
Group-row children (cngx-filter-row,
cngx-filter-expression-row) are display: contents wrappers that
delegate their flex layout back to the .cngx-filter-builder__expression
class declared here. Surfaces stay neutral - borders track
--cngx-color-border, the remove-button error tone tracks
--cngx-color-danger, no primary-flavored defaults at this layer.
State modifiers
.cngx-filter-builder__action-button:hover/:focus-visible- alpha-on-black hover tint (alpha-on-white in dark mode).cngx-filter-builder__action-button:focus-visible- 2px currentColor outline, 2px offset.cngx-filter-builder__action-button[disabled]- 0.5 opacity dim,not-allowedcursor
Variants
.cngx-filter-group-root- root group, no indent / no left rail:not(.cngx-filter-group-root)- nested groups pick up the indent and the left rail.cngx-filter-group-negated- dashed border-style on the group container, reads as "exclusion" without changing the color.cngx-filter-builder__action-button--remove- destructive foreground sourced from the danger chain
Slots
cngx-filter-builder- host, padding + background + foreground.cngx-filter-builder__sr- screen-reader-only live region.cngx-filter-builder__group- group container, gap + padding + border + radius.cngx-filter-builder__expression- row inner flex row, gap + wrap, aligned center.cngx-filter-builder__actions- action-button row, flex + gap + wrap.cngx-filter-builder__empty- empty-state typography, italic + muted foreground.cngx-filter-builder__action-button- inline-flex button, border + radius + transitions on background / border.cngx-filter-builder__action-glyph- inline-flex glyph slot, sized via--cngx-filter-builder-action-glyph-size.cngx-filter-builder__logic-toggle- logic-toggle row, gap
Inheritance
Surface tokens delegate to the foundation so a brand change propagates without per-component theming:
--cngx-filter-builder-border-color->--cngx-color-border--cngx-filter-builder-action-border->--cngx-color-border--cngx-filter-builder-group-border->1px solid var(--cngx-color-border)--cngx-filter-builder-rail->2px solid var(--cngx-color-border)--cngx-filter-builder-action-remove-fg->--cngx-filter-builder-error-fg->--cngx-color-danger--cngx-filter-builder-error-fg->--cngx-color-danger
Layout / sizing / motion tokens stay structural (no foundation
delegate). --cngx-filter-builder-action-button borders carry the
group-border color through the same delegating chain so a single
--cngx-color-border swap retints the whole surface.
Dark mode
Three hooks lift the alpha-on-black hover tint to alpha-on-white and invert the muted empty-state foreground from dim dark gray to soft light gray so secondary information keeps its weight:
prefers-color-scheme: dark[data-color-scheme="dark"].darkclass
Foundation-delegated tokens (group border, rail, remove-tone) ride the foundation cascade unchanged.
Index#
Layout
Surface
Variant / Negated
State / Empty
Typography
State / Hover
State / Disabled
Variant / Remove
State / Error
Layout
*0.5remPadding shorthand around the outer builder container.
*0.5remGap between sibling rows / actions / logic-toggle items.
*0.5remPadding shorthand inside each group container.
*0.375remCorner radius of group containers and action buttons.
*1.25remIndent applied to nested (non-root) groups so the hierarchy reads visually.
*0.75remPadding shorthand of the empty-state slot.
*0.25remGap between an action button's glyph and its label.
*0.25rem 0.625remPadding shorthand of an action button.
*1emFont-size of the action-button glyph slot.
Surface
*1px solid oklch(0.87 0 0)Border shorthand of each group container.
inherits: true so the :root delegating value reaches nested
group containers.
<color>oklch(0.87 0 0)Border color of group containers and the action-button stroke.
Falls back through --cngx-color-border. inherits: true so a
:root override flows into the builder host.
See: [[--cngx-color-border]]
*2px solid oklch(0.87 0 0)Left rail border shorthand for nested groups. inherits: true
so the :root delegating value reaches nested rails.
<color>transparentBackground of an action button at rest.
<length>1pxBorder width of an action button.
<color>oklch(0.82 0 0)Border color of an action button. inherits: true so a :root
delegating value reaches the button inside the builder host.
Variant / Negated
*dashedBorder-style applied to negated groups — dashed reads as "exclusion" without changing the color.
State / Empty
<color>oklch(0.45 0 0)Text color of the empty-state slot — muted by default.
inherits: true so the :root dark-mode override reaches the
empty slot inside the builder host.
Typography
*0.875remFont-size of an action button's label.
State / Hover
<color>oklch(0 0 0 / 0.04)Background tint applied on hover / focus-visible of an action
button. inherits: true so the :root dark-mode override
(alpha-on-white in dark) reaches the button.
State / Focus
*2px solid currentColorFocus-ring outline shorthand applied to action buttons.
<length>2pxOutline offset of the focus ring.
State / Disabled
<number>0.5Opacity multiplier applied to disabled action buttons.
Variant / Remove
<color>oklch(0.55 0.18 25)Foreground color of the destructive remove button. Falls back
through --cngx-filter-builder-error-fg and then
--cngx-color-danger.
See: [[--cngx-color-danger]]
State / Error
<color>oklch(0.55 0.18 25)Error-tone foreground shared across the builder's error states.
Falls back through --cngx-color-danger.