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.

The row brain comes from CNGX_FILTER_ROW_CONTROLLER_FACTORY; this component is the skin plus a CNGX_FILTER_BUILDER_HOST path-mutator write sink.

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#

ariaLabel#unknown
ProtectedReadonly
this.row.ariaLabel
config#unknown
ProtectedReadonly
injectFilterBuilderConfig()
editor#unknown
ProtectedReadonly
this.row.editor
editors#unknown
ProtectedReadonly
injectFilterEditors()
fieldOptions#unknown
ProtectedReadonly
this.row.fieldOptions
glyphs#unknown
ProtectedReadonly
CNGX_FILTER_BUILDER_GLYPHS
isIncomplete#unknown
ProtectedReadonly
this.row.isIncomplete
isNativeEditor#unknown
ProtectedReadonly
isNativeEditor
operatorOptions#unknown
ProtectedReadonly
this.row.operatorOptions
operators#unknown
ProtectedReadonly
this.row.operators
removeButtonContext#unknown
ProtectedReadonly
this.row.removeButtonContext
removeButtonTemplate#unknown
ProtectedReadonly
this.row.removeButtonTemplate
valueEditorContext#unknown
ProtectedReadonly
this.row.valueEditorContext
valueEditorTemplate#unknown
ProtectedReadonly
this.row.valueEditorTemplate

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

Expression-row variant of CngxFilterBuilderRow. The host element cngx-filter-expression-row stays display: contents; the row div renders as ONE inline pill - borderless picker/editor segments inside a single bordered capsule with hairline dividers.

State modifiers

  • .cngx-filter-expression-incomplete - quiet unfinished-state cue: the value segment's bottom edge goes dashed; no row-level warning box

Slots

  • cngx-filter-expression-row - host, display: contents
  • .cngx-filter-builder__expression - the capsule (border, radius, fit-content)
  • .cngx-filter-builder__field-select / __operator-select - content-hugging borderless segments
  • input[cngxInput] value segment - sized by --cngx-filter-builder-value-basis, capped by -value-max
  • .cngx-filter-builder__action-button--remove - trailing ghost segment (accessible name via aria-label), floored to --cngx-target-min

Inheritance

  • --cngx-filter-builder-incomplete-border-style / -incomplete-border-color - unregistered knobs for the quiet unfinished-value cue; the color falls back through --cngx-color-border

--cngx-filter-builder-gap is owned by the parent filter-builder files and consumed here through the var() fallback chain only.

Index#

Layout / Pill

--cngx-filter-builder-value-basis#<length>
Default value 128px

Inline size of the value-editor segment inside the pill. Geometry token, deliberately not density-derived. inherits: true so one assignment at the builder root sizes every row in the tree.

--cngx-filter-builder-value-max#<length>
Default value 320px

Growth cap of the value-editor segment - keeps a long text value from ballooning the capsule.