Main
 Installation Versioning Theming Typography Design tokens Schematics Migration guides
Components
 Accordion Actions panel AG grid Alert App Switcher Autocomplete Badge Breadcrumbs Button Button Group Button toggle Checkbox Clamped list Clamped text Code block Content panel Core Datepicker Description list Divider Dropdown Dynamic translation Empty state File upload Filter Bar Flag New Form field Highlight Icon Icon Button Icon Item Inline edit Input Layout flex Link List Markdown Modal Navbar Notification Center Overflow items Overlay Popover Progress bar Progress spinner Radio Resizer Scrollbar Search expandable Select Sidebar Sidepanel Skeleton Split button Splitter Table Tabs Tag Tag autocomplete Tag input Tag list Textarea Time range Timepicker Timezone Title Toast Toggle Tooltip Topbar Tree Tree select Username
Other
 Date formatter Filesize formatter Forms Number formatter Validation Smart search New
Icons
Interface and examples language
English
Version
20.3.1
Filter Bar
Source code
import { KbqFilterBarModule } from '@koobiq/components/filter-bar';
Directives
KbqFilterReset

Selector: kbq-filter-reset

Properties
Name Description
@Output('onResetFilter')
onResetFilter: OutputEmitterRef 		Event that is generated whenever the user reset a filter.
Methods
resetFilter
KbqPipeDirective

Selector: [kbqPipe]

Properties
Name Description
@Input('kbqPipe')
pipe: InputSignal
KbqFilterBarButton

Selector: [kbqFilterBarButton]

Properties
Name Description
filters: KbqFilters KbqFilters instance
KbqPipeState

Selector: [kbqPipeState]

Properties
Name Description
@Input('kbqPipeState')
state: InputSignal 		Pipe state used to calculate/update the button style.
KbqFilterBarRefresher

Selector: kbq-filter-refresher, [kbq-filter-refresher]

KbqFilterRefresher

Selector: kbq-filter-refresher, [kbq-filter-refresher]

KbqPipeReadonlyComponent

Selector: kbq-pipe-readonly

Properties
Name Description
data: KbqPipeData pipe data. Provided from subclass
isEmpty: boolean Whether the current pipe is empty. Used for apply style modifier
lockedValues: unknown[] Values forwarded from the pipe template whose selection the user cannot remove. Only consumed by the multi-select pipe components; other pipe types ignore it.
optionCompareWith: (o1: KbqSelectValue, o2: KbqSelectValue) => boolean Optional equality comparator forwarded from the pipe template to the underlying `kbq-select`. Only consumed by the select / multi-select pipe components; when unset they fall back to their own id-based `compareByValue`.
panelMaxHeight: number Maximum height of the dropdown panel's scrollable list, forwarded from the pipe template to the underlying `kbq-select` / `kbq-tree-select`. Only consumed by the select-family pipe components; `undefined` leaves the list at the select-family default of 256px.
showRemoveButton: boolean Whether the current pipe is removable or cleanable. Used for apply style modifier
stateChanges: Subject changes of state
updateTemplates: (templates: KbqPipeTemplate[]) => void updates values for selection and value template
valueTemplate: string | TemplateRef TemplateRef for selecting an option
values: any values to select from the pipe template
Methods
isTemplateRef
templateRef checker utility
onClear
clears the pipe and triggers changes
onRemove
removes pipe from filter-bar and triggers changes
open
KbqTreeSelectPipeBase

Shared scaffolding for the tree-based select pipes (`kbq-pipe-tree-select`, `kbq-pipe-multi-tree-select`): the flat-tree control / flattener / data source, the node accessors, search-driven filtering and open handling. Subclasses provide the value-specific pieces (`selected`, `isEmpty`, `onSelect`, `updateTemplates`). The `internalTemplatesChanges` subscription is intentionally left in each subclass constructor: it must be set up after the subclass's `updateTemplates` field initializer runs, so the initial `BehaviorSubject` replay dispatches to the subclass override (which writes `dataSource.data`) rather than the base one.

Properties
Name Description
data: KbqPipeData pipe data. Provided from subclass
dataSource: KbqTreeFlatDataSource
getChildren: (node: KbqTreeSelectNode) => KbqTreeSelectNode[]
getLevel: (node: KbqTreeSelectFlatNode) => number
getValue: (node: KbqTreeSelectFlatNode) => unknown
getViewValue: (node: KbqTreeSelectFlatNode) => string
isEmpty: boolean Whether the current pipe is empty. Used for apply style modifier
isExpandable: (node: KbqTreeSelectFlatNode) => boolean
lockedValues: unknown[] Values forwarded from the pipe template whose selection the user cannot remove. Only consumed by the multi-select pipe components; other pipe types ignore it.
optionCompareWith: (o1: KbqSelectValue, o2: KbqSelectValue) => boolean Optional equality comparator forwarded from the pipe template to the underlying `kbq-select`. Only consumed by the select / multi-select pipe components; when unset they fall back to their own id-based `compareByValue`.
panelMaxHeight: number Maximum height of the dropdown panel's scrollable list, forwarded from the pipe template to the underlying `kbq-select` / `kbq-tree-select`. Only consumed by the select-family pipe components; `undefined` leaves the list at the select-family default of 256px.
searchControl: FormControl control for search options
showRemoveButton: boolean Whether the current pipe is removable or cleanable. Used for apply style modifier
stateChanges: Subject changes of state
transformer: (node: KbqTreeSelectNode, level: number, parent: KbqTreeSelectFlatNode) => KbqTreeSelectFlatNode
treeControl: FlatTreeControl
treeFlattener: KbqTreeFlattener
updateTemplates: (templates: KbqPipeTemplate[]) => void updates values for selection and value template
valueTemplate: string | TemplateRef TemplateRef for selecting an option
values: any values to select from the pipe template
Methods
hasChild
tree-node predicate: whether the node has children
isTemplateRef
templateRef checker utility
onClear
clears the pipe and triggers changes
onRemove
removes pipe from filter-bar and triggers changes
open
opens the tree-select panel
KbqPipeInputComponent

Selector: kbq-pipe-input

Properties
Name Description
control: FormControl Input control. Must stay nullable: `KbqCleaner` resets the control, and `reset()` resolves to `defaultValue`, which is `null` only while `nonNullable` is unset. `{ nonNullable: true }` would make `reset()` yield `''` and silently break the cleaner bridge below.
data: KbqPipeData pipe data. Provided from subclass
debounceTime: number Debounce in milliseconds between the last keystroke and the typed value being applied to the filter. Matches `defaultEmitValueTimeout` of `kbq-search-expandable`, so both search fields of a bar feel the same. `Enter` and blur apply immediately and cancel a pending apply.
isEmpty: boolean Whether the current pipe is empty. Used for apply style modifier
lockedValues: unknown[] Values forwarded from the pipe template whose selection the user cannot remove. Only consumed by the multi-select pipe components; other pipe types ignore it.
minLength: number Minimum number of characters before typing applies the value to the filter. Anything shorter — including an emptied field — is applied as `null`, so the filter never keeps text the user has already erased. `Enter` and blur ignore the threshold. Set to `0` to apply every keystroke.
optionCompareWith: (o1: KbqSelectValue, o2: KbqSelectValue) => boolean Optional equality comparator forwarded from the pipe template to the underlying `kbq-select`. Only consumed by the select / multi-select pipe components; when unset they fall back to their own id-based `compareByValue`.
panelMaxHeight: number Maximum height of the dropdown panel's scrollable list, forwarded from the pipe template to the underlying `kbq-select` / `kbq-tree-select`. Only consumed by the select-family pipe components; `undefined` leaves the list at the select-family default of 256px.
showRemoveButton: boolean Whether the current pipe is removable or cleanable. Used for apply style modifier
stateChanges: Subject changes of state
updateTemplates: (templates: KbqPipeTemplate[]) => void updates values for selection and value template
valueTemplate: string | TemplateRef TemplateRef for selecting an option
values: any values to select from the pipe template
Methods
isTemplateRef
templateRef checker utility
onClear
clears the pipe and triggers changes
onRemove
removes pipe from filter-bar and triggers changes
open
focuses the input
KbqPipeButton

Selector: kbq-pipe-button

Properties
Name Description
@Input()
readonly: InputSignalWithTransform 		enables/disables read-only state
filterBar: KbqFilterBarHost KbqFilterBar instance
pipe: KbqBasePipe KbqPipe instance
KbqPipeDateBaseComponent

Shared implementation for the `date` and `datetime` pipes. The two pipes differ only in how a range is formatted and in their default start/end values, exposed here as the {@link formatRange}, {@link getDefaultStart} and {@link getDefaultEnd} hooks. Everything else — the period list / custom period flow, calendar handling and form group — is common.

Properties
Name Description
adapter: DateAdapter
data: KbqPipeData pipe data. Provided from subclass
defaultEnd: D default object for end
defaultStart: D default object for start
disabled: boolean Whether the current pipe is disabled.
end: D parsed end
formattedValue: string formatted value for period
formatter: DateFormatter
isEmpty: boolean Whether the current pipe is empty.
isListMode: boolean Whether the current state is list of periods. When false will displayed control for set custom period
lockedValues: unknown[] Values forwarded from the pipe template whose selection the user cannot remove. Only consumed by the multi-select pipe components; other pipe types ignore it.
optionCompareWith: (o1: KbqSelectValue, o2: KbqSelectValue) => boolean Optional equality comparator forwarded from the pipe template to the underlying `kbq-select`. Only consumed by the select / multi-select pipe components; when unset they fall back to their own id-based `compareByValue`.
panelMaxHeight: number Maximum height of the dropdown panel's scrollable list, forwarded from the pipe template to the underlying `kbq-select` / `kbq-tree-select`. Only consumed by the select-family pipe components; `undefined` leaves the list at the select-family default of 256px.
showRemoveButton: boolean Whether the current pipe is removable or cleanable. Used for apply style modifier
start: D parsed start
stateChanges: Subject changes of state
updateTemplates: (templates: KbqPipeTemplate[]) => void updates values for selection and value template
valueTemplate: string | TemplateRef TemplateRef for selecting an option
values: any values to select from the pipe template
Methods
formatRange
Formats the selected range for display.
getDefaultEnd
Default end value used when the pipe has no stored `start`.
getDefaultStart
Default start value used when the pipe has no stored `start`.
hideCalendars
isTemplateRef
templateRef checker utility
onApplyPeriod
onClear
clears the pipe and triggers changes
onFocusEndInput
onFocusStartInput
onRemove
removes pipe from filter-bar and triggers changes
onSelect
onSelectEndDate
onSelectStartDate
open
opens popover
showList
showPeriod
usesTime
Whether this pipe edits the time part (`datetime`) or only the date (`date`). Gates whether the `minDateTime` / `maxDateTime` bounds keep their time or are pinned to day edges.
KbqPipeAdd

Selector: kbq-pipe-add

Properties
Name Description
@Input()
filterTemplate: InputSignal 		template of filter
@Output('onAddPipe')
onAddPipe: OutputEmitterRef 		Event that is generated after add pipe.
addedPipes: Signal<(string | number | (string & {}))[]> Ids of the pipes already added to the current filter. Used to open an already-added pipe. Derived from the `filter` signal so it stays in sync without the retired `changes` bus.
filterBar: KbqFilterBarHost KbqFilterBar instance
Methods
addPipeFromTemplate
compareWith
Function to compare the option values with the selected values. The first argument is a value from an option. The second is a value from the selection. A boolean should be returned.
KbqFilterBar

Selector: kbq-filter-bar, [kbq-filter-bar]

Properties
Name Description
@Input()
@Output('filterChange')
filter: ModelSignal 		Filter that is currently selected. A two-way-bindable `model()`: derived state (`isSaved`/`isChanged`/…) is exposed via `computed()` off it and change detection is driven by signal reactivity. `model()` auto-provides the `filterChange` output for `[(filter)]` two-way binding.
@Input()
pipeTemplates: InputSignal 		An array of templates that are used when adding a pipe. Also contains lists of options to select (values).
@Input()
selectedAllEqualsSelectedNothing: InputSignalWithTransform 		This is special logic that unselect all items when all selected because "all selected = nothing selected". Default is true
@Output('onChangePipe')
onChangePipe: OutputEmitterRef 		Event that emits whenever the value of the pipe changes.
@Output('onClearPipe')
onClearPipe: OutputEmitterRef 		Event that emits whenever the pipe cleared.
@Output('onClosePipe')
onClosePipe: OutputEmitterRef 		Event that emits whenever the select or multiselect pipe closed.
@Output('onRemovePipe')
onRemovePipe: OutputEmitterRef 		Event that emits whenever the pipe deleted.
configuration: { reset: { buttonName: string; }; search: { tooltip: string; placeholder: string; }; filters: { defaultName: string; saveNewFilterTooltip: string; searchPlaceholder: string; searchEmptyResult: string; saveAsNewFilter: string; saveChanges: string; saveAsNew: string; change: string; resetChanges: string; remove: string; name: string; error: string; errorHint: string; saveButton: string; cancelButton: string; actionsTooltip: string; }; add: { tooltip: string; addedAnnouncement: string; }; refresher: { refresh: string; settings: string; }; pipe: { clearButtonTooltip: string; removeButtonTooltip: string; applyButton: string; emptySearchResult: string; selectAll: string; }; datePipe: { customPeriod: string; customPeriodFrom: string; customPeriodTo: string; customPeriodErrorHint: string; customPeriodMinIntervalErrorHint: string; customPeriodMaxIntervalErrorHint: string; backToPeriodSelection: string; }; } Localized strings and configuration for the filter-bar and its pipes.
externalConfiguration: { reset: { buttonName: string; }; search: { tooltip: string; placeholder: string; }; filters: { defaultName: string; saveNewFilterTooltip: string; searchPlaceholder: string; searchEmptyResult: string; saveAsNewFilter: string; saveChanges: string; saveAsNew: string; change: string; resetChanges: string; remove: string; name: string; error: string; errorHint: string; saveButton: string; cancelButton: string; actionsTooltip: string; }; add: { tooltip: string; addedAnnouncement: string; }; refresher: { refresh: string; settings: string; }; pipe: { clearButtonTooltip: string; removeButtonTooltip: string; applyButton: string; emptySearchResult: string; selectAll: string; }; datePipe: { customPeriod: string; customPeriodFrom: string; customPeriodTo: string; customPeriodErrorHint: string; customPeriodMinIntervalErrorHint: string; customPeriodMaxIntervalErrorHint: string; backToPeriodSelection: string; }; }
internalFilterChanges: BehaviorSubject internal filter changes
internalTemplatesChanges: BehaviorSubject internal changes in templates
isChanged: Signal Whether the current filter is changed
isDisabled: Signal Whether the current filter is disabled
isReadOnly: Signal Whether the current filter is readonly
isSaved: Signal Whether the current filter is saved
isSavedAndChanged: Signal Whether the current filter is saved and changed
onResetFilter: BehaviorSubject Event that emits whenever the filter is reset.
Deprecated
changes: BehaviorSubject 		All changes.
Methods
removePipe
Remove pipe from current filter and emit event
resetFilterChangedState
Set the filter state "changed" to false
restoreFilterState
Restore previously saved filter state.
saveFilterState
Save current state of filter. Deep-clones the filter via `structuredClone`, so any pipe `value` payload handed to save/restore must be structured-cloneable (plain data — no functions, DOM nodes, class instances or `TemplateRef`s), otherwise `structuredClone` throws `DataCloneError`. All built-in pipes produce cloneable values.
KbqPipeTextComponent

Selector: kbq-pipe-text

Properties
Name Description
control: FormControl textarea control
data: KbqPipeData pipe data. Provided from subclass
disabled: boolean Whether the current pipe is disabled.
isEmpty: boolean Whether the current pipe is empty. Used for apply style modifier
lockedValues: unknown[] Values forwarded from the pipe template whose selection the user cannot remove. Only consumed by the multi-select pipe components; other pipe types ignore it.
optionCompareWith: (o1: KbqSelectValue, o2: KbqSelectValue) => boolean Optional equality comparator forwarded from the pipe template to the underlying `kbq-select`. Only consumed by the select / multi-select pipe components; when unset they fall back to their own id-based `compareByValue`.
panelMaxHeight: number Maximum height of the dropdown panel's scrollable list, forwarded from the pipe template to the underlying `kbq-select` / `kbq-tree-select`. Only consumed by the select-family pipe components; `undefined` leaves the list at the select-family default of 256px.
placements: typeof PopUpPlacements
showRemoveButton: boolean Whether the current pipe is removable or cleanable. Used for apply style modifier
stateChanges: Subject changes of state
updateTemplates: (templates: KbqPipeTemplate[]) => void updates values for selection and value template
valueTemplate: string | TemplateRef TemplateRef for selecting an option
values: any values to select from the pipe template
Methods
isTemplateRef
templateRef checker utility
onApply
onClear
clears the pipe and triggers changes
onRemove
removes pipe from filter-bar and triggers changes
open
opens popover
KbqPipeSelectComponent

Selector: kbq-pipe-select

Properties
Name Description
compareByValue: (o1: Pick, o2: Pick) => boolean Comparator of selected options
data: KbqPipeData pipe data. Provided from subclass
filteredOptions: Observable filtered by search options
isEmpty: boolean Whether the current pipe is empty.
lockedValues: unknown[] Values forwarded from the pipe template whose selection the user cannot remove. Only consumed by the multi-select pipe components; other pipe types ignore it.
optionCompareWith: (o1: KbqSelectValue, o2: KbqSelectValue) => boolean Optional equality comparator forwarded from the pipe template to the underlying `kbq-select`. Only consumed by the select / multi-select pipe components; when unset they fall back to their own id-based `compareByValue`.
panelMaxHeight: number Maximum height of the dropdown panel's scrollable list, forwarded from the pipe template to the underlying `kbq-select` / `kbq-tree-select`. Only consumed by the select-family pipe components; `undefined` leaves the list at the select-family default of 256px.
searchControl: FormControl control for search options
selected: KbqSelectValue selected value
showRemoveButton: boolean Whether the current pipe is removable or cleanable. Used for apply style modifier
stateChanges: Subject changes of state
updateTemplates: (templates: KbqPipeTemplate[]) => void updates values for selection and value template
valueTemplate: string | TemplateRef TemplateRef for selecting an option
values: any values to select from the pipe template
Methods
isTemplateRef
templateRef checker utility
onClear
clears the pipe and triggers changes
onRemove
removes pipe from filter-bar and triggers changes
onSelect
open
opens select
KbqPipeDateComponent

Selector: kbq-pipe-date

Properties
Name Description
adapter: DateAdapter
data: KbqPipeData pipe data. Provided from subclass
defaultEnd: D default object for end
defaultStart: D default object for start
disabled: boolean Whether the current pipe is disabled.
end: D parsed end
formattedValue: string formatted value for period
formatter: DateFormatter
isEmpty: boolean Whether the current pipe is empty.
isListMode: boolean Whether the current state is list of periods. When false will displayed control for set custom period
lockedValues: unknown[] Values forwarded from the pipe template whose selection the user cannot remove. Only consumed by the multi-select pipe components; other pipe types ignore it.
optionCompareWith: (o1: KbqSelectValue, o2: KbqSelectValue) => boolean Optional equality comparator forwarded from the pipe template to the underlying `kbq-select`. Only consumed by the select / multi-select pipe components; when unset they fall back to their own id-based `compareByValue`.
panelMaxHeight: number Maximum height of the dropdown panel's scrollable list, forwarded from the pipe template to the underlying `kbq-select` / `kbq-tree-select`. Only consumed by the select-family pipe components; `undefined` leaves the list at the select-family default of 256px.
showRemoveButton: boolean Whether the current pipe is removable or cleanable. Used for apply style modifier
start: D parsed start
stateChanges: Subject changes of state
updateTemplates: (templates: KbqPipeTemplate[]) => void updates values for selection and value template
valueTemplate: string | TemplateRef TemplateRef for selecting an option
values: any values to select from the pipe template
Methods
formatRange
getDefaultEnd
getDefaultStart
hideCalendars
isTemplateRef
templateRef checker utility
onApplyPeriod
onClear
clears the pipe and triggers changes
onFocusEndInput
onFocusStartInput
onRemove
removes pipe from filter-bar and triggers changes
onSelect
onSelectEndDate
onSelectStartDate
open
opens popover
showList
showPeriod
usesTime
KbqPipeDatetimeComponent

Selector: kbq-pipe-datetime

Properties
Name Description
adapter: DateAdapter
data: KbqPipeData pipe data. Provided from subclass
defaultEnd: D default object for end
defaultStart: D default object for start
disabled: boolean Whether the current pipe is disabled.
end: D parsed end
formattedValue: string formatted value for period
formatter: DateFormatter
isEmpty: boolean Whether the current pipe is empty.
isListMode: boolean Whether the current state is list of periods. When false will displayed control for set custom period
lockedValues: unknown[] Values forwarded from the pipe template whose selection the user cannot remove. Only consumed by the multi-select pipe components; other pipe types ignore it.
optionCompareWith: (o1: KbqSelectValue, o2: KbqSelectValue) => boolean Optional equality comparator forwarded from the pipe template to the underlying `kbq-select`. Only consumed by the select / multi-select pipe components; when unset they fall back to their own id-based `compareByValue`.
panelMaxHeight: number Maximum height of the dropdown panel's scrollable list, forwarded from the pipe template to the underlying `kbq-select` / `kbq-tree-select`. Only consumed by the select-family pipe components; `undefined` leaves the list at the select-family default of 256px.
showRemoveButton: boolean Whether the current pipe is removable or cleanable. Used for apply style modifier
start: D parsed start
stateChanges: Subject changes of state
updateTemplates: (templates: KbqPipeTemplate[]) => void updates values for selection and value template
valueTemplate: string | TemplateRef TemplateRef for selecting an option
values: any values to select from the pipe template
Methods
formatRange
getDefaultEnd
getDefaultStart
hideCalendars
isTemplateRef
templateRef checker utility
onApplyPeriod
onClear
clears the pipe and triggers changes
onFocusEndInput
onFocusStartInput
onRemove
removes pipe from filter-bar and triggers changes
onSelect
onSelectEndDate
onSelectStartDate
open
opens popover
showList
showPeriod
usesTime
KbqPipeTreeSelectComponent

Selector: kbq-pipe-tree-select

Properties
Name Description
data: KbqPipeData pipe data. Provided from subclass
dataSource: KbqTreeFlatDataSource
getChildren: (node: KbqTreeSelectNode) => KbqTreeSelectNode[]
getLevel: (node: KbqTreeSelectFlatNode) => number
getValue: (node: KbqTreeSelectFlatNode) => unknown
getViewValue: (node: KbqTreeSelectFlatNode) => string
isEmpty: boolean Whether the current pipe is empty.
isExpandable: (node: KbqTreeSelectFlatNode) => boolean
lockedValues: unknown[] Values forwarded from the pipe template whose selection the user cannot remove. Only consumed by the multi-select pipe components; other pipe types ignore it.
optionCompareWith: (o1: KbqSelectValue, o2: KbqSelectValue) => boolean Optional equality comparator forwarded from the pipe template to the underlying `kbq-select`. Only consumed by the select / multi-select pipe components; when unset they fall back to their own id-based `compareByValue`.
panelMaxHeight: number Maximum height of the dropdown panel's scrollable list, forwarded from the pipe template to the underlying `kbq-select` / `kbq-tree-select`. Only consumed by the select-family pipe components; `undefined` leaves the list at the select-family default of 256px.
searchControl: FormControl control for search options
selected: KbqSelectValue selected value
showRemoveButton: boolean Whether the current pipe is removable or cleanable. Used for apply style modifier
stateChanges: Subject changes of state
transformer: (node: KbqTreeSelectNode, level: number, parent: KbqTreeSelectFlatNode) => KbqTreeSelectFlatNode
treeControl: FlatTreeControl
treeFlattener: KbqTreeFlattener
updateTemplates: (templates: KbqPipeTemplate[]) => void Populates the tree data source from the pipe template. The shared `values`/`valueTemplate` assignment is already performed by the base subscription, so this override only does the tree-specific work and avoids a redundant double assignment.
valueTemplate: string | TemplateRef TemplateRef for selecting an option
values: any values to select from the pipe template
Methods
hasChild
tree-node predicate: whether the node has children
isTemplateRef
templateRef checker utility
onClear
clears the pipe and triggers changes
onRemove
removes pipe from filter-bar and triggers changes
onSelect
open
opens the tree-select panel
KbqBasePipe
Properties
Name Description
data: KbqPipeData pipe data. Provided from subclass
isEmpty: boolean Whether the current pipe is empty. Used for apply style modifier
lockedValues: unknown[] Values forwarded from the pipe template whose selection the user cannot remove. Only consumed by the multi-select pipe components; other pipe types ignore it.
optionCompareWith: (o1: KbqSelectValue, o2: KbqSelectValue) => boolean Optional equality comparator forwarded from the pipe template to the underlying `kbq-select`. Only consumed by the select / multi-select pipe components; when unset they fall back to their own id-based `compareByValue`.
panelMaxHeight: number Maximum height of the dropdown panel's scrollable list, forwarded from the pipe template to the underlying `kbq-select` / `kbq-tree-select`. Only consumed by the select-family pipe components; `undefined` leaves the list at the select-family default of 256px.
showRemoveButton: boolean Whether the current pipe is removable or cleanable. Used for apply style modifier
stateChanges: Subject changes of state
updateTemplates: (templates: KbqPipeTemplate[]) => void updates values for selection and value template
valueTemplate: string | TemplateRef TemplateRef for selecting an option
values: any values to select from the pipe template
Methods
isTemplateRef
templateRef checker utility
onClear
clears the pipe and triggers changes
onRemove
removes pipe from filter-bar and triggers changes
KbqPipeMultiSelectComponent

Selector: kbq-pipe-multi-select

Properties
Name Description
allOptionsSelected: boolean true if all options selected
allVisibleOptionsSelected: boolean true if all visible options selected
checkboxState: KbqPseudoCheckboxState state for checkbox 'select all'.
compareByValue: (o1: Pick, o2: Pick) => boolean Comparator of selected options. Two null/absent values never match (aligned with the select pipe).
data: KbqPipeData pipe data. Provided from subclass
filteredOptions: Observable filtered by search options
isEmpty: boolean Whether the current pipe is empty.
lockedValues: unknown[] Values forwarded from the pipe template whose selection the user cannot remove. Only consumed by the multi-select pipe components; other pipe types ignore it.
optionCompareWith: (o1: KbqSelectValue, o2: KbqSelectValue) => boolean Optional equality comparator forwarded from the pipe template to the underlying `kbq-select`. Only consumed by the select / multi-select pipe components; when unset they fall back to their own id-based `compareByValue`.
panelMaxHeight: number Maximum height of the dropdown panel's scrollable list, forwarded from the pipe template to the underlying `kbq-select` / `kbq-tree-select`. Only consumed by the select-family pipe components; `undefined` leaves the list at the select-family default of 256px.
searchControl: FormControl control for search options
selectAllHandler: (event: KeyboardEvent) => void handler for select all options in select
selected: KbqSelectValue[] selected value
selectedAllEqualsSelectedNothing: boolean
showRemoveButton: boolean Whether the current pipe is removable or cleanable. Used for apply style modifier
stateChanges: Subject changes of state
updateTemplates: (templates: KbqPipeTemplate[]) => void updates values for selection and value template
valueTemplate: string | TemplateRef TemplateRef for selecting an option
values: any values to select from the pipe template
Methods
isLocked
Whether the option cannot be deselected by the user. Template-only.
isTemplateRef
templateRef checker utility
onRemove
removes pipe from filter-bar and triggers changes
open
opens select
KbqPipeMultiTreeSelectComponent

Selector: kbq-pipe-multi-tree-select

Properties
Name Description
allOptionsSelected: boolean true if all options selected
allVisibleOptionsSelected: boolean true if all visible options selected
data: KbqPipeData pipe data. Provided from subclass
dataSource: KbqTreeFlatDataSource
getChildren: (node: KbqTreeSelectNode) => KbqTreeSelectNode[]
getLevel: (node: KbqTreeSelectFlatNode) => number
getValue: (node: KbqTreeSelectFlatNode) => unknown
getViewValue: (node: KbqTreeSelectFlatNode) => string
isEmpty: boolean Whether the current pipe is empty.
isExpandable: (node: KbqTreeSelectFlatNode) => boolean
lockedValues: unknown[] Values forwarded from the pipe template whose selection the user cannot remove. Only consumed by the multi-select pipe components; other pipe types ignore it.
numberOfSelectedLeaves: number
optionCompareWith: (o1: KbqSelectValue, o2: KbqSelectValue) => boolean Optional equality comparator forwarded from the pipe template to the underlying `kbq-select`. Only consumed by the select / multi-select pipe components; when unset they fall back to their own id-based `compareByValue`.
panelMaxHeight: number Maximum height of the dropdown panel's scrollable list, forwarded from the pipe template to the underlying `kbq-select` / `kbq-tree-select`. Only consumed by the select-family pipe components; `undefined` leaves the list at the select-family default of 256px.
searchControl: FormControl control for search options
selectAllCheckboxState: KbqPseudoCheckboxState
selectAllHandler: (event: KeyboardEvent) => void handler for select all options in select
selected: KbqSelectValue[] selected value
selectedAllEqualsSelectedNothing: boolean
showRemoveButton: boolean Whether the current pipe is removable or cleanable. Used for apply style modifier
stateChanges: Subject changes of state
transformer: (node: KbqTreeSelectNode, level: number, parent: KbqTreeSelectFlatNode) => KbqTreeSelectFlatNode
treeControl: FlatTreeControl
treeFlattener: KbqTreeFlattener
updateTemplates: (templates: KbqPipeTemplate[]) => void Populates the tree data source from the pipe template. The shared `values`/`valueTemplate` assignment is already performed by the base subscription, so this override only does the tree-specific work and avoids a redundant double assignment.
valueTemplate: string | TemplateRef TemplateRef for selecting an option
values: any values to select from the pipe template
Methods
clearedValue
Clearing keeps the locked values; with none configured the pipe resets to `null` as before.
hasChild
tree-node predicate: whether the node has children
isNodeSelectAll
isTemplateRef
templateRef checker utility
onClear
onRemove
removes pipe from filter-bar and triggers changes
onSelect
open
opens the tree-select panel
searchKeydownHandler
toggleSelectAllNode
KbqFilters

Selector: kbq-filters

Exported as: kbqFilters
Properties
Name Description
@Input()
filters: InputSignal
@Output('onChangeFilter')
onChangeFilter: OutputEmitterRef 		Event that is generated whenever the user change a filter.
@Output('onRemoveFilter')
onRemoveFilter: OutputEmitterRef 		Event that is generated whenever the user remove a filter.
@Output('onResetFilterChanges')
onResetFilterChanges: OutputEmitterRef 		Event that is generated whenever the user reset a filter changes.
@Output('onSave')
onSave: OutputEmitterRef 		Event that is generated whenever the user save a filter. The emitted `filter` shares its pipe objects with the live filter by design (so the rendered pipes keep their identity across a save instead of being destroyed and recreated). Consumers that persist `event.filter` as an immutable record should snapshot it first (e.g. via `KbqFilterBar.saveFilterState` or a structural copy) — otherwise later in-place pipe edits will mutate the stored reference.
@Output('onSelectFilter')
onSelectFilter: OutputEmitterRef 		Event that is generated whenever the user selects a filter.
filter: KbqFilter Selected filter. Kept as a plain getter facade over the bar's `filter` model.
filterActionsOpened: boolean Component state. true if opened dropdown or popup of filterActions
filterBar: KbqFilterBar KbqFilterBar instance
filteredOptions: Observable filtered by search filters
isEmpty: boolean Component state. True if 'filters' input contains no elements.
opened: boolean Component state. true if opened dropdown or popup
searchControl: FormControl control for search filter
Methods
filterSavedSuccessfully
Hide the popup and restore focus. Use this method in the onSave or onChangeFilter events after the data has been successfully saved.
filterSavedUnsuccessfully
Shows an error. Use this method in the onSave or onChangeFilter events if saving data failed.
removeFilter
resetFilterChanges
restoreFocus
saveChanges
selectFilter
KbqPipeMinWidth

Selector: [kbqPipeMinWidth]

Properties
Name Description
filterBar: KbqFilterBarHost KbqFilterBar instance
maxSymbolsForFitContent: number maximal symbols for apply fit-content to min-width
textLength: number current length of text
update: () => void
Classes
KbqTreeSelectFlatNode

Flattened node

Properties
Name Description
expandable: boolean
level: number
name: string
parent: KbqTreeSelectFlatNode
value: unknown
Interfaces
KbqFilterBarHost

Contract a pipe (or filter-bar sub-component) depends on instead of the concrete `KbqFilterBar`. `KbqFilterBar` provides itself as {@link KBQ_FILTER_BAR_HOST}, so a pipe can be unit-tested against a lightweight mock of this seam rather than a full bar. Members mirror the current `KbqFilterBar` surface; they are expected to slim down once the state model moves to signals.

Properties
Name Description
configuration: { reset: { buttonName: string; }; search: { tooltip: string; placeholder: string; }; filters: { defaultName: string; saveNewFilterTooltip: string; searchPlaceholder: string; searchEmptyResult: string; saveAsNewFilter: string; saveChanges: string; saveAsNew: string; change: string; resetChanges: string; remove: string; name: string; error: string; errorHint: string; saveButton: string; cancelButton: string; actionsTooltip: string; }; add: { tooltip: string; addedAnnouncement: string; }; refresher: { refresh: string; settings: string; }; pipe: { clearButtonTooltip: string; removeButtonTooltip: string; applyButton: string; emptySearchResult: string; selectAll: string; }; datePipe: { customPeriod: string; customPeriodFrom: string; customPeriodTo: string; customPeriodErrorHint: string; customPeriodMinIntervalErrorHint: string; customPeriodMaxIntervalErrorHint: string; backToPeriodSelection: string; }; } Localized strings and configuration for the filter-bar and its pipes.
filter: ModelSignal Currently selected filter. A two-way-bindable `model()`: read via `filter()`, write via `filter.set()`.
internalFilterChanges: BehaviorSubject Internal filter changes.
internalTemplatesChanges: BehaviorSubject Internal pipe-template changes.
isChanged: Signal Whether the current filter is changed.
isReadOnly: Signal Whether the current filter is readonly.
isSaved: Signal Whether the current filter is saved.
isSavedAndChanged: Signal Whether the current filter is both saved and changed.
onChangePipe: OutputEmitterRef Emits whenever a pipe value changes. (The two-way-bound `filter` value is emitted by the `filter` model's `filterChange` output.)
onClearPipe: OutputEmitterRef Emits whenever a pipe is cleared.
onClosePipe: OutputEmitterRef Emits whenever a select/multiselect pipe closes.
onResetFilter: BehaviorSubject Emits when the filter is reset.
openPipe: BehaviorSubject Requests opening a pipe after it is added.
pipeTemplates: Signal Templates used when adding a pipe (also hold the option lists). Read via `pipeTemplates()`.
selectedAllEqualsSelectedNothing: Signal Whether selecting all options counts as selecting nothing.
Methods
removePipe
Removes a pipe from the current filter and emits the change.
resetFilterChangedState
Clears the current filter's "changed" flag.
KbqDateTimeValue
Properties
Name Description
end: string
name: string
start: string
KbqSelectValue
Properties
Name Description
id: string | number Optional stable identifier used by the select/multi-select pipe comparators.
name: string
value: unknown
KbqFilter
Properties
Name Description
changed: boolean
disabled: boolean
name: string
pipes: KbqPipe[]
readonly: boolean
saved: boolean
KbqPipe
Properties
Name Description
cleanable: boolean
disabled: boolean
id: string | number
name: string
openOnAdd: boolean
openOnReset: boolean
removable: boolean
search: boolean
selectAll: boolean
selectedAllEqualsSelectedNothing: boolean This is special logic that unselect all items when all selected because "all selected = nothing selected". Default is true
type: KbqPipeType
value: unknown
Deprecated
required: boolean
KbqPipeData
Properties
Name Description
cleanable: boolean
disabled: boolean
id: string | number
name: string
openOnAdd: boolean
openOnReset: boolean
removable: boolean
search: boolean
selectAll: boolean
selectedAllEqualsSelectedNothing: boolean This is special logic that unselect all items when all selected because "all selected = nothing selected". Default is true
type: KbqPipeType
value: V
Deprecated
required: boolean
KbqPipeTemplate
Properties
Name Description
cleanable: boolean
compareWith: (o1: KbqSelectValue, o2: KbqSelectValue) => boolean Custom equality comparator forwarded to the underlying `kbq-select` of the `select` / `multiselect` pipes. When omitted, the pipe's default id-based comparator (`compareByValue`) is used. Ignored by other pipe types.
disabled: boolean
id: string | number
lockedValues: unknown[] Options whose selection cannot be removed by the user: they are always selected, render as `disabled` with a checked checkbox, and survive both "select all" toggling and clearing the pipe. Entries have the same shape as the entries of the owning pipe's `value`: `KbqSelectValue` objects for the `multiselect` pipe (matched with `compareWith`, falling back to the pipe's id-based comparator), and raw node values for the `multi-tree-select` pipe. Locking a tree branch locks its whole subtree. Ignored by other pipe types.
maxDateTime: unknown Latest selectable instant for the `date` / `datetime` pipe custom period. See {@link KbqPipeTemplate.minDateTime}. The `date` pipe uses only its day (pinned to the end of day). Ignored by other pipe types.
maxInterval: unknown Maximum length of the `date` / `datetime` pipe custom period (`end − start`). See {@link KbqPipeTemplate.minInterval}. When the selected period is longer, the editor shows an error and disables Apply. Ignored by other pipe types.
minDateTime: unknown Earliest selectable instant for the `date` / `datetime` pipe custom period. Accepts any value the configured `DateAdapter` can deserialize (with the default Luxon adapter: an ISO-8601 string, a `Date`, or a `DateTime`). The `date` pipe uses only its day (pinned to the start of day). Ignored by other pipe types.
minInterval: unknown Minimum length of the `date` / `datetime` pipe custom period (`end − start`), as a Luxon duration-like object, e.g. `{ days: 1 }` or `{ hours: 2 }`. When the selected period is shorter, the editor shows an error and disables Apply. Ignored by other pipe types. Unlike {@link KbqPipeTemplate.minDateTime}, this value is NOT deserialized through the configured `DateAdapter` — it is applied directly via the date value's own `.plus()`, so this option currently assumes the default Luxon adapter and is not portable to other `DateAdapter` implementations (e.g. the Moment adapter).
name: string
openOnAdd: boolean
openOnReset: boolean
panelMaxHeight: number Maximum height of the dropdown panel's scrollable list, in pixels, forwarded to the underlying `kbq-select` / `kbq-tree-select` of the `select`, `multiselect`, `tree-select` and `multi-tree-select` pipes. Omitting it — or passing `null` — keeps the select-family default of 256px, i.e. exactly eight 32px options. The cap covers the scrollable list only, and the list's own padding is added on top of it, so a multiple of the option height fits without a scrollbar. The pipe's search field is rendered above the list and adds to the panel's total height, while the "select all" row scrolls with the options and is counted by the cap. A value taller than the room left in the viewport is clipped by the overlay rather than scrolled. Ignored by other pipe types.
removable: boolean
search: boolean
selectAll: boolean
selectedAllEqualsSelectedNothing: boolean This is special logic that unselect all items when all selected because "all selected = nothing selected". Default is true
type: KbqPipeType
valueTemplate: string | TemplateRef
values: unknown[]
Deprecated
required: boolean
KbqSaveFilterError
Properties
Name Description
nameAlreadyExists: boolean
text: string
KbqSaveFilterEvent
Properties
Name Description
filter: KbqFilter
filterBar: KbqFilterBar
status: KbqSaveFilterStatuses
KbqTreeSelectNode
Properties
Name Description
children: KbqTreeSelectNode[]
name: string
value: unknown
Functions
getId

function to get unique identifier of an element

const getId(item: KbqPipeTemplate): string | number | (string & {});
Parameters Description
item: KbqPipeTemplate
kbqBuildTree

Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object. The return value is the list of extends `KbqTreeSelectNode`.

const kbqBuildTree(value: Record<string, unknown>, level: number): T[];
Parameters Description
value: Record
level: number
Type aliases
KbqFilterBarConfiguration

Shape of the localized strings consumed by the filter-bar and its pipes.

type KbqFilterBarConfiguration = typeof KBQ_FILTER_BAR_DEFAULT_CONFIGURATION;
KbqPipeType 
type KbqPipeType = `${KbqPipeTypes}` | (string & {});
Constants
KBQ_PIPE_DATA

Injection Token for providing configuration of filter-bar

const KBQ_PIPE_DATA: InjectionToken<unknown>;
KBQ_FILTER_BAR_DEFAULT_CONFIGURATION

Default localized strings for the filter-bar, used when no `KBQ_LOCALE_SERVICE` (nor an explicit `KBQ_FILTER_BAR_CONFIGURATION`) is provided. These are the Russian (`ru-RU`) strings, matching the library-wide default-locale convention (every `KBQ_*_DEFAULT_CONFIGURATION` resolves to `ruRULocaleData`). Provide `KBQ_LOCALE_SERVICE` at the application root to localize the filter-bar for other locales.

const KBQ_FILTER_BAR_DEFAULT_CONFIGURATION: { reset: { buttonName: string; }; search: { tooltip: string; placeholder: string; }; filters: { defaultName: string; saveNewFilterTooltip: string; searchPlaceholder: string; searchEmptyResult: string; ... 11 more ...; actionsTooltip: string; }; add: { ...; }; refresher: { ...; }; pipe: { ...; }; datePipe: { ...; }; };
KBQ_FILTER_BAR_CONFIGURATION

Injection Token for providing configuration of filter-bar

const KBQ_FILTER_BAR_CONFIGURATION: InjectionToken<{ reset: { buttonName: string; }; search: { tooltip: string; placeholder: string; }; filters: { defaultName: string; saveNewFilterTooltip: string; searchPlaceholder: string; searchEmptyResult: string; ... 11 more ...; actionsTooltip: string; }; add: { ...; }; refresher: { ...; }; pipe: { ...; }; dateP...;
KBQ_FILTER_BAR_HOST

Injection token exposing the {@link KbqFilterBarHost} seam. `KbqFilterBar` provides itself via `useExisting`, so pipes `inject(KBQ_FILTER_BAR_HOST)` instead of depending on the concrete bar.

const KBQ_FILTER_BAR_HOST: InjectionToken<KbqFilterBarHost>;
KBQ_FILTER_BAR_PIPES

Injection Token for providing pipes in filter-bar

const KBQ_FILTER_BAR_PIPES: InjectionToken<Map<KbqPipeType, Type<KbqBasePipe<unknown>>>>;
kbqFilterBarPipesProvider

Utility provider for `KBQ_FILTER_BAR_PIPES`.

const kbqFilterBarPipesProvider: () => Provider;
defaultFilterBarPipes

list of pipes available out of the box.

const defaultFilterBarPipes: [KbqPipeType, Type<KbqBasePipe<unknown>>][];
Suggestions for improvement
If you found a mistake or want to improve the article, create an issue on GitHub.