Skip to main content
cngx-src documentation

CngxFilterExpressionRow

ComponentOnPushNo encapsulationv0.1.0WCAG AA

projects/forms/filter-builder/filter-builder-expression-row.component.ts

Import#

import { CngxFilterExpressionRow } from '@cngx/forms/filter-builder'

Description#

Embedded expression-row sub-component. Mounted by the builder body for every expression node in the recursive tree; resolves its value from CNGX_FILTER_BUILDER_HOST via [path].

Pillar 3 (Komposition statt Konfiguration): one component, one responsibility - render the recursive renderer's expression row. The column-header / quick-filter surface lives in CngxFilterRow.

Metadata#

Relationships

Index#

Inputs#

path#readonly number[]
input()Required
input()

Slot registry passed down from the parent CngxFilterBuilder. When the registry's removeButton resolves to a TemplateRef, the row renders the consumer-supplied button; otherwise it falls back to the default <button> element.

default null

Instance Properties#

config#unknown
ProtectedReadonly
injectFilterBuilderConfig()
editors#unknown
ProtectedReadonly
injectFilterEditors()
glyphs#unknown
ProtectedReadonly
CNGX_FILTER_BUILDER_GLYPHS
isNativeEditor#unknown
ProtectedReadonly
isNativeEditor

Methods#

handleBooleanValueChange#void
Protected
handleBooleanValueChange(next: boolean)
@paramnextboolean
handleDateValueInput#void
Protected
handleDateValueInput(event: Event)
@parameventEvent
handleFieldChange#void
Protected
handleFieldChange(next: string | undefined)
@paramnextstring | undefined
handleNumberValueInput#void
Protected
handleNumberValueInput(event: Event)
@parameventEvent
handleOperatorChange#void
Protected
handleOperatorChange(next: string | undefined)
@paramnextstring | undefined
handleRemove#void
Protected
handleStringValueInput#void
Protected
handleStringValueInput(event: Event)
@parameventEvent
operatorLabel#string
Protected
operatorLabel(op: string)
@paramopstring
removeButtonContext#literal type
Protected

Expression-row variant of CngxFilterBuilderRow. The host element cngx-filter-expression-row stays display: contents and delegates its layout to the parent's .cngx-filter-builder__expression flex row, redeclared here so the file is self-contained when consumed standalone.

State modifiers

  • .cngx-filter-builder__expression--empty - opacity fade for an empty row, sourced from --cngx-filter-builder-empty-row-opacity (owned by filter-builder-row.component.css)
  • .cngx-filter-expression-incomplete - dashed warning outline for an unfinished expression, draws attention without committing to an error tone

Slots

  • cngx-filter-expression-row - host, display: contents
  • .cngx-filter-builder__expression - inner flex row, gap + wrap, aligned center

Inheritance

Local-token chains:

  • --cngx-filter-builder-incomplete-outline -> 1px dashed var(--cngx-color-warning)
  • --cngx-filter-builder-incomplete-outline-offset - structural, no foundation delegate

--cngx-filter-builder-gap and --cngx-filter-builder-empty-row-opacity are owned by the parent filter-builder files and consumed here through the var() fallback chain only. A :root delegating rule pins the incomplete-outline structural part and inherits the warning hue via the foundation chain so a dark-mode swap on --cngx-color-warning cascades.

Index#

State / Incomplete

--cngx-filter-builder-incomplete-outline#*
Default value 1px dashed oklch(0.55 0.15 65)

Outline shorthand for the incomplete-expression state — dashed warning hue draws attention without committing to an error tone. Falls back through --cngx-color-warning. inherits: true so the :root delegating value reaches the expression-row host.

See: [[--cngx-color-warning]]

--cngx-filter-builder-incomplete-outline-offset#<length>
Default value 2px

Outline offset of the incomplete-expression outline.