import { KbqFilterBarModule } from '@koobiq/components/filter-bar';@Component({ selector: 'kbq-filter-bar, [kbq-filter-bar]' }) class KbqFilterBar implements KbqFilterBarHost { readonly selectedAllEqualsSelectedNothing = input<boolean>(true); readonly filter = model<KbqFilter | null>(null); readonly pipeTemplates = input<KbqPipeTemplate[]>([]); readonly onChangePipe = output<KbqPipe>(); readonly onRemovePipe = output<KbqPipe>(); readonly onClearPipe = output<KbqPipe>(); readonly onClosePipe = output<KbqPipe>(); readonly localeConfiguration: Signal<KbqFilterBarLocaleConfiguration>; readonly isSaved: Signal<boolean>; readonly isChanged: Signal<boolean>; readonly isSavedAndChanged: Signal<boolean>; readonly isReadOnly: Signal<boolean>; readonly isDisabled: Signal<boolean>; readonly onResetFilter: BehaviorSubject<boolean>; readonly internalFilterChanges: BehaviorSubject<KbqFilter | null>; readonly internalTemplatesChanges: BehaviorSubject<KbqPipeTemplate[] | null>; get hasSavedState(): boolean; clearSavedState(): void; removePipe(pipe: KbqPipe): void; saveFilterState(filter?: KbqFilter): void; restoreFilterState(filter?: KbqFilter): void; resetFilterChangedState(): void; }
selectedAllEqualsSelectedNothingboolean This is special logic that unselect all items when all selected because "all selected = nothing selected". Default is true
filterKbqFilter | null 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.
pipeTemplatesKbqPipeTemplate[] An array of templates that are used when adding a pipe. Also contains lists of options to select (values).
useStateSavingboolean Whether the component remembers its state across reloads and restores it on the next render.
Defaults to true, or to whatever KBQ_STATE_SAVING_ENABLED is provided as.
stateSavingKeystring The key the state is persisted under. While it is empty the key is derived from where the
component sits in the document, which moves when the surrounding markup is restructured — an id
on the component or any ancestor pins it just as well as this input does.
localeOverridesKbqPartialLocaleData | undefined Localized strings for this element and its subtree, keyed by locale section. Every key is optional at every depth.
onChangePipeKbqPipe Event that emits whenever the value of the pipe changes.
onRemovePipeKbqPipe Event that emits whenever the pipe deleted.
onClearPipeKbqPipe Event that emits whenever the pipe cleared.
onClosePipeKbqPipe Event that emits whenever the select or multiselect pipe closed.
localeConfigurationSignal<KbqFilterBarLocaleConfiguration> Localized strings and configuration for the filter-bar and its pipes.
Read through a signal so that a runtime setLocale() reaches the pipes and the projected
sub-components, which render these strings from their own OnPush views.
isSavedSignal<boolean> Whether the current filter is saved
isChangedSignal<boolean> Whether the current filter is changed
isSavedAndChangedSignal<boolean> Whether the current filter is saved and changed
isReadOnlySignal<boolean> Whether the current filter is readonly
isDisabledSignal<boolean> Whether the current filter is disabled
onResetFilterBehaviorSubject<boolean> Event that emits whenever the filter is reset.
internalFilterChangesBehaviorSubject<KbqFilter | null> internal filter changes
internalTemplatesChangesBehaviorSubject<KbqPipeTemplate[] | null> internal changes in templates
hasSavedStateboolean Whether state is currently persisted for this filter bar — restored on init, or written since.
Always false while useStateSaving is unset, and false again after clearSavedState().
clearSavedState()void Removes the state persisted for this filter bar.
Persistence itself stays on — the next change is written again. Unset useStateSaving to stop it.
Unrelated to restoreFilterState(), which reverts to an in-memory snapshot within one session.
removePipe()void Remove pipe from current filter and emit event
saveFilterState()void 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 TemplateRefs), otherwise
structuredClone throws DataCloneError. All built-in pipes produce cloneable values.
restoreFilterState()void Restore previously saved filter state. As with saveFilterState, pipe value payloads must be
structured-cloneable.
resetFilterChangedState()void Set the filter state "changed" to false
@Component({ selector: 'kbq-filter-refresher, [kbq-filter-refresher]' }) class KbqFilterRefresher {}
@Component({ selector: 'kbq-filter-reset' }) class KbqFilterReset { readonly onResetFilter = output<KbqFilter | null>(); }
onResetFilterKbqFilter | null Event that is generated whenever the user reset a filter.
@Component({ selector: 'kbq-filters', exportAs: 'kbqFilters' }) class KbqFilters { readonly filters = input.required<KbqFilter[]>(); readonly onSelectFilter = output<KbqFilter>(); readonly onSave = output<KbqSaveFilterEvent>(); readonly onChangeFilter = output<KbqSaveFilterEvent>(); readonly onRemoveFilter = output<KbqFilter>(); readonly onResetFilterChanges = output<KbqFilter | null>(); readonly searchControl: FormControl<string | null>; readonly filteredOptions: Signal<KbqFilter[]>; get opened(): boolean; get filterActionsOpened(): boolean; get filter(): KbqFilter | null; get isEmpty(): boolean; selectFilter(filter: KbqFilter): void; saveChanges(): void; restoreFocus(): void; resetFilterChanges(): void; removeFilter(): void; filterSavedSuccessfully(): void; filterSavedUnsuccessfully(error?: KbqSaveFilterError): void; }
onSelectFilterKbqFilter Event that is generated whenever the user selects a filter.
onSaveKbqSaveFilterEvent 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.
onChangeFilterKbqSaveFilterEvent Event that is generated whenever the user change a filter.
onRemoveFilterKbqFilter Event that is generated whenever the user remove a filter.
onResetFilterChangesKbqFilter | null Event that is generated whenever the user reset a filter changes.
searchControlFormControl<string | null> control for search filter
filteredOptionsSignal<KbqFilter[]> Saved filters whose name matches the search query.
openedboolean Component state. true if opened dropdown or popup
filterActionsOpenedboolean Component state. true if opened dropdown or popup of filterActions
filterKbqFilter | null Selected filter. Kept as a plain getter facade over the bar's filter model.
isEmptyboolean Component state. True if 'filters' input contains no elements.
filterSavedSuccessfully()void Hide the popup and restore focus. Use this method in the onSave or onChangeFilter events after the data has been successfully saved.
filterSavedUnsuccessfully()void Shows an error. Use this method in the onSave or onChangeFilter events if saving data failed.
@Component({ selector: 'kbq-pipe-add' }) class KbqPipeAdd { readonly filterTemplate = input<KbqFilter>( { name: '', pipes: [], readonly: false, disabled: false, changed: false, saved: false } ); readonly onAddPipe = output<KbqPipeTemplate>(); readonly addedPipes: Signal<(string | number | (string & {}))[]>; addPipeFromTemplate(option: KbqOption): void; compareWith(o1: KbqPipe, o2: string): boolean; }
filterTemplateKbqFilter template of filter
onAddPipeKbqPipeTemplate Event that is generated after add pipe.
addedPipesSignal<(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.
compareWith()boolean 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.
@Component({ selector: 'kbq-pipe-button' }) class KbqPipeButton { readonly readonly = input<boolean>(false); }
readonlyboolean enables/disables read-only state
@Component({ selector: 'kbq-pipe-date' }) class KbqPipeDateComponent<D> extends KbqPipeDateBaseComponent<D> { get formattedValue(): string; get disabled(): boolean; get start(): D; get defaultStart(): D; get end(): D; get defaultEnd(): D; get isEmpty(): boolean; readonly stateChanges: Subject<void>; readonly data: KbqPipeData<V>; get showRemoveButton(): boolean; updateTemplates: (templates: KbqPipeTemplate[] | null) => void; onApplyPeriod(): void; onSelect(item: KbqDateTimeValue): void; showPeriod(): void; showList(): void; open(): void; onSelectStartDate(value: D): void; onSelectEndDate(value: D): void; onFocusStartInput(): void; onFocusEndInput(): void; hideCalendars(): void; isTemplateRef(value: unknown): boolean; onRemove(): void; onClear(): void; }
formattedValuestring formatted value for period
disabledboolean Whether the current pipe is disabled.
startD parsed start
defaultStartD default object for start
endD parsed end
defaultEndD default object for end
isEmptyboolean Whether the current pipe is empty.
stateChangesSubject<void> changes of state
dataKbqPipeData<V> pipe data. Provided from subclass
showRemoveButtonboolean Whether the current pipe is removable or cleanable. Used for apply style modifier
updateTemplates(templates: KbqPipeTemplate[] | null) => void updates values for selection and value template
open()void opens popover
isTemplateRef()boolean templateRef checker utility
onRemove()void removes pipe from filter-bar and triggers changes
onClear()void clears the pipe and triggers changes
@Component({ selector: 'kbq-pipe-datetime' }) class KbqPipeDatetimeComponent<D> extends KbqPipeDateBaseComponent<D> { get formattedValue(): string; get disabled(): boolean; get start(): D; get defaultStart(): D; get end(): D; get defaultEnd(): D; get isEmpty(): boolean; readonly stateChanges: Subject<void>; readonly data: KbqPipeData<V>; get showRemoveButton(): boolean; updateTemplates: (templates: KbqPipeTemplate[] | null) => void; onApplyPeriod(): void; onSelect(item: KbqDateTimeValue): void; showPeriod(): void; showList(): void; open(): void; onSelectStartDate(value: D): void; onSelectEndDate(value: D): void; onFocusStartInput(): void; onFocusEndInput(): void; hideCalendars(): void; isTemplateRef(value: unknown): boolean; onRemove(): void; onClear(): void; }
formattedValuestring formatted value for period
disabledboolean Whether the current pipe is disabled.
startD parsed start
defaultStartD default object for start
endD parsed end
defaultEndD default object for end
isEmptyboolean Whether the current pipe is empty.
stateChangesSubject<void> changes of state
dataKbqPipeData<V> pipe data. Provided from subclass
showRemoveButtonboolean Whether the current pipe is removable or cleanable. Used for apply style modifier
updateTemplates(templates: KbqPipeTemplate[] | null) => void updates values for selection and value template
open()void opens popover
isTemplateRef()boolean templateRef checker utility
onRemove()void removes pipe from filter-bar and triggers changes
onClear()void clears the pipe and triggers changes
@Component({ selector: 'kbq-pipe-input' }) class KbqPipeInputComponent extends KbqBasePipe<string | null> { readonly control: FormControl<string | null>; debounceTime: number; minLength: number; get isEmpty(): boolean; readonly stateChanges: Subject<void>; readonly data: KbqPipeData<V>; get showRemoveButton(): boolean; updateTemplates: (templates: KbqPipeTemplate[] | null) => void; onClear(): void; open(): void; isTemplateRef(value: unknown): boolean; onRemove(): void; }
controlFormControl<string | null> 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.
debounceTimenumber 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.
minLengthnumber 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.
isEmptyboolean Whether the current pipe is empty. Used for apply style modifier
stateChangesSubject<void> changes of state
dataKbqPipeData<V> pipe data. Provided from subclass
showRemoveButtonboolean Whether the current pipe is removable or cleanable. Used for apply style modifier
updateTemplates(templates: KbqPipeTemplate[] | null) => void updates values for selection and value template
onClear()void clears the pipe and triggers changes
open()void focuses the input
isTemplateRef()boolean templateRef checker utility
onRemove()void removes pipe from filter-bar and triggers changes
@Component({ selector: 'kbq-pipe-multi-select' }) class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]> { readonly searchControl: FormControl<string | null>; readonly filteredOptions: Signal<KbqSelectValue[]>; get selected(): KbqSelectValue[] | null; get isEmpty(): boolean; get checkboxState(): KbqPseudoCheckboxState; get allVisibleOptionsSelected(): boolean; get allOptionsSelected(): boolean; get selectedAllEqualsSelectedNothing(): boolean; compareByValue: (o1: Pick<KbqSelectValue, "id"> | null, o2: Pick<KbqSelectValue, "id"> | null) => boolean; selectAllHandler: (event: KeyboardEvent) => void; readonly stateChanges: Subject<void>; readonly data: KbqPipeData<V>; get showRemoveButton(): boolean; updateTemplates: (templates: KbqPipeTemplate[] | null) => void; open(): void; isTemplateRef(value: unknown): boolean; onRemove(): void; }
searchControlFormControl<string | null> control for search options
filteredOptionsSignal<KbqSelectValue[]> Options of the pipe template that match the search query. Follows the templates too, so options supplied after initialization render on first open.
selectedKbqSelectValue[] | null selected value
isEmptyboolean Whether the current pipe is empty.
checkboxStateKbqPseudoCheckboxState state for checkbox 'select all'.
allVisibleOptionsSelectedboolean true if all visible options selected
allOptionsSelectedboolean true if all options selected
compareByValue(o1: Pick<KbqSelectValue, "id"> | null, o2: Pick<KbqSelectValue, "id"> | null) => boolean Comparator of selected options. Two null/absent values never match (aligned with the select pipe).
selectAllHandler(event: KeyboardEvent) => void handler for select all options in select
stateChangesSubject<void> changes of state
dataKbqPipeData<V> pipe data. Provided from subclass
showRemoveButtonboolean Whether the current pipe is removable or cleanable. Used for apply style modifier
updateTemplates(templates: KbqPipeTemplate[] | null) => void updates values for selection and value template
open()void opens select
isTemplateRef()boolean templateRef checker utility
onRemove()void removes pipe from filter-bar and triggers changes
@Component({ selector: 'kbq-pipe-multi-tree-select' }) class KbqPipeMultiTreeSelectComponent extends KbqTreeSelectPipeBase<KbqSelectValue[]> { get selected(): KbqSelectValue[] | null; get isEmpty(): boolean; get selectAllCheckboxState(): KbqPseudoCheckboxState; get numberOfSelectedLeaves(): number; get allOptionsSelected(): boolean; get selectedAllEqualsSelectedNothing(): boolean; get allVisibleOptionsSelected(): boolean; updateTemplates: (templates: KbqPipeTemplate[] | null) => void; selectAllHandler: (event: KeyboardEvent) => void; readonly searchControl: FormControl<string | null>; treeControl: FlatTreeControl<KbqTreeSelectFlatNode>; treeFlattener: KbqTreeFlattener<KbqTreeSelectNode, KbqTreeSelectFlatNode>; dataSource: KbqTreeFlatDataSource<KbqTreeSelectNode, KbqTreeSelectFlatNode>; readonly stateChanges: Subject<void>; readonly data: KbqPipeData<V>; get showRemoveButton(): boolean; isNodeSelectAll( _: number, nodeData: KbqTreeSelectFlatNode ): boolean; onSelect({ value: option }: { value: any; }): void; searchKeydownHandler(): void; toggleSelectAllNode(emitEvent?: boolean): void; onClear(): void; hasChild(_: number, nodeData: KbqTreeSelectFlatNode): boolean; open(): void; isTemplateRef(value: unknown): boolean; onRemove(): void; }
selectedKbqSelectValue[] | null selected value
isEmptyboolean Whether the current pipe is empty.
allOptionsSelectedboolean true if all options selected
allVisibleOptionsSelectedboolean true if all visible options selected
updateTemplates(templates: KbqPipeTemplate[] | null) => 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.
selectAllHandler(event: KeyboardEvent) => void handler for select all options in select
searchControlFormControl<string | null> control for search options
stateChangesSubject<void> changes of state
dataKbqPipeData<V> pipe data. Provided from subclass
showRemoveButtonboolean Whether the current pipe is removable or cleanable. Used for apply style modifier
hasChild()boolean tree-node predicate: whether the node has children
open()void opens the tree-select panel
isTemplateRef()boolean templateRef checker utility
onRemove()void removes pipe from filter-bar and triggers changes
@Component({ selector: 'kbq-pipe-readonly' }) class KbqPipeReadonlyComponent extends KbqBasePipe<string | null> { readonly stateChanges: Subject<void>; readonly data: KbqPipeData<V>; get isEmpty(): boolean; get showRemoveButton(): boolean; updateTemplates: (templates: KbqPipeTemplate[] | null) => void; open(): void; isTemplateRef(value: unknown): boolean; onRemove(): void; onClear(): void; }
stateChangesSubject<void> changes of state
dataKbqPipeData<V> pipe data. Provided from subclass
isEmptyboolean Whether the current pipe is empty. Used for apply style modifier
showRemoveButtonboolean Whether the current pipe is removable or cleanable. Used for apply style modifier
updateTemplates(templates: KbqPipeTemplate[] | null) => void updates values for selection and value template
isTemplateRef()boolean templateRef checker utility
onRemove()void removes pipe from filter-bar and triggers changes
onClear()void clears the pipe and triggers changes
@Component({ selector: 'kbq-pipe-select' }) class KbqPipeSelectComponent extends KbqBasePipe<KbqSelectValue> { readonly searchControl: FormControl<string | null>; readonly filteredOptions: Signal<KbqSelectValue[]>; get selected(): KbqSelectValue | null; get isEmpty(): boolean; compareByValue: (o1: Pick<KbqSelectValue, "id"> | null, o2: Pick<KbqSelectValue, "id"> | null) => boolean; readonly stateChanges: Subject<void>; readonly data: KbqPipeData<V>; get showRemoveButton(): boolean; updateTemplates: (templates: KbqPipeTemplate[] | null) => void; onSelect(item: KbqSelectValue): void; open(): void; isTemplateRef(value: unknown): boolean; onRemove(): void; onClear(): void; }
searchControlFormControl<string | null> control for search options
filteredOptionsSignal<KbqSelectValue[]> Options of the pipe template that match the search query. Follows the templates too, so options supplied after initialization render on first open.
selectedKbqSelectValue | null selected value
isEmptyboolean Whether the current pipe is empty.
compareByValue(o1: Pick<KbqSelectValue, "id"> | null, o2: Pick<KbqSelectValue, "id"> | null) => boolean Comparator of selected options
stateChangesSubject<void> changes of state
dataKbqPipeData<V> pipe data. Provided from subclass
showRemoveButtonboolean Whether the current pipe is removable or cleanable. Used for apply style modifier
updateTemplates(templates: KbqPipeTemplate[] | null) => void updates values for selection and value template
open()void opens select
isTemplateRef()boolean templateRef checker utility
onRemove()void removes pipe from filter-bar and triggers changes
onClear()void clears the pipe and triggers changes
@Component({ selector: 'kbq-pipe-text' }) class KbqPipeTextComponent extends KbqBasePipe<string | null> { readonly placements: typeof PopUpPlacements; get disabled(): boolean; control: FormControl<typeof this.data.value>; readonly stateChanges: Subject<void>; readonly data: KbqPipeData<V>; get isEmpty(): boolean; get showRemoveButton(): boolean; updateTemplates: (templates: KbqPipeTemplate[] | null) => void; onApply(): void; onClear(): void; open(): void; isTemplateRef(value: unknown): boolean; onRemove(): void; }
disabledboolean Whether the current pipe is disabled.
controlFormControl<typeof this.data.value> textarea control
stateChangesSubject<void> changes of state
dataKbqPipeData<V> pipe data. Provided from subclass
isEmptyboolean Whether the current pipe is empty. Used for apply style modifier
showRemoveButtonboolean Whether the current pipe is removable or cleanable. Used for apply style modifier
updateTemplates(templates: KbqPipeTemplate[] | null) => void updates values for selection and value template
onClear()void clears the pipe and triggers changes
open()void opens popover
isTemplateRef()boolean templateRef checker utility
onRemove()void removes pipe from filter-bar and triggers changes
@Component({ selector: 'kbq-pipe-tree-select' }) class KbqPipeTreeSelectComponent extends KbqTreeSelectPipeBase<KbqSelectValue> { get selected(): KbqSelectValue | null; get isEmpty(): boolean; updateTemplates: (templates: KbqPipeTemplate[] | null) => void; readonly searchControl: FormControl<string | null>; treeControl: FlatTreeControl<KbqTreeSelectFlatNode>; treeFlattener: KbqTreeFlattener<KbqTreeSelectNode, KbqTreeSelectFlatNode>; dataSource: KbqTreeFlatDataSource<KbqTreeSelectNode, KbqTreeSelectFlatNode>; readonly stateChanges: Subject<void>; readonly data: KbqPipeData<V>; get showRemoveButton(): boolean; onSelect(item: KbqTreeOption): void; hasChild(_: number, nodeData: KbqTreeSelectFlatNode): boolean; open(): void; isTemplateRef(value: unknown): boolean; onRemove(): void; onClear(): void; }
selectedKbqSelectValue | null selected value
isEmptyboolean Whether the current pipe is empty.
updateTemplates(templates: KbqPipeTemplate[] | null) => 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.
searchControlFormControl<string | null> control for search options
stateChangesSubject<void> changes of state
dataKbqPipeData<V> pipe data. Provided from subclass
showRemoveButtonboolean Whether the current pipe is removable or cleanable. Used for apply style modifier
hasChild()boolean tree-node predicate: whether the node has children
open()void opens the tree-select panel
isTemplateRef()boolean templateRef checker utility
onRemove()void removes pipe from filter-bar and triggers changes
onClear()void clears the pipe and triggers changes
@Directive() abstract class KbqBasePipe<V> { readonly stateChanges: Subject<void>; readonly data: KbqPipeData<V>; protected values: any; protected valueTemplate?: TemplateRef<any> | string; protected optionCompareWith?: ( o1: KbqSelectValue | null | undefined, o2: KbqSelectValue | null | undefined ) => boolean; protected lockedValues?: unknown[]; protected panelMaxHeight?: KbqPanelMaxHeight; protected multilineOptions?: boolean; protected noOptionsText?: string; get isEmpty(): boolean; get showRemoveButton(): boolean; protected get noOptions(): boolean; protected get noOptionsMessage(): string; updateTemplates: (templates: KbqPipeTemplate[] | null) => void; isTemplateRef(value: unknown): boolean; onRemove(): void; onClear(): void; }
stateChangesSubject<void> changes of state
dataKbqPipeData<V> pipe data. Provided from subclass
valuesany values to select from the pipe template
valueTemplateTemplateRef<any> | string TemplateRef for selecting an option
optionCompareWith( o1: KbqSelectValue | null | undefined, o2: KbqSelectValue | null | undefined ) => 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.
lockedValuesunknown[] 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.
panelMaxHeightKbqPanelMaxHeight 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.
multilineOptionsboolean Whether the dropdown's option names and captions wrap instead of being truncated, forwarded from the pipe template. Only consumed by the select / multi-select pipe components.
noOptionsTextstring Message shown in place of the options when the pipe template has none, forwarded from the pipe
template. Only consumed by the select-family pipe components; undefined falls back to the localized
pipe.noOptions string.
isEmptyboolean Whether the current pipe is empty. Used for apply style modifier
showRemoveButtonboolean Whether the current pipe is removable or cleanable. Used for apply style modifier
noOptionsboolean Whether the pipe template provides no values to choose from. The select-family pipe components then
show noOptionsMessage instead of the list; the date pipes open straight on the custom period.
noOptionsMessagestring Message the select-family pipe components show when there are no options.
updateTemplates(templates: KbqPipeTemplate[] | null) => void updates values for selection and value template
isTemplateRef()boolean templateRef checker utility
onRemove()void removes pipe from filter-bar and triggers changes
onClear()void clears the pipe and triggers changes
@Directive({ selector: '[kbqFilterBarButton]' }) class KbqFilterBarButton {}
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 formatRange,
getDefaultStart and getDefaultEnd hooks. Everything else — the period list / custom
period flow, calendar handling and form group — is common.
@Directive() abstract class KbqPipeDateBaseComponent<D> extends KbqBasePipe<KbqDateTimeValue> { protected readonly adapter: DateAdapter<any>; protected readonly formatter: DateFormatter<any>; protected readonly isListMode: WritableSignal<boolean>; get formattedValue(): string; get disabled(): boolean; get start(): D; get defaultStart(): D; get end(): D; get defaultEnd(): D; get isEmpty(): boolean; readonly stateChanges: Subject<void>; readonly data: KbqPipeData<V>; protected values: any; protected valueTemplate?: TemplateRef<any> | string; protected optionCompareWith?: ( o1: KbqSelectValue | null | undefined, o2: KbqSelectValue | null | undefined ) => boolean; protected lockedValues?: unknown[]; protected panelMaxHeight?: KbqPanelMaxHeight; protected multilineOptions?: boolean; protected noOptionsText?: string; get showRemoveButton(): boolean; protected get noOptions(): boolean; protected get noOptionsMessage(): string; updateTemplates: (templates: KbqPipeTemplate[] | null) => void; onApplyPeriod(): void; onSelect(item: KbqDateTimeValue): void; showPeriod(): void; showList(): void; open(): void; onSelectStartDate(value: D): void; onSelectEndDate(value: D): void; onFocusStartInput(): void; onFocusEndInput(): void; hideCalendars(): void; protected abstract usesTime(): boolean; protected abstract formatRange(start: D, end: D): string; protected abstract getDefaultStart(): D; protected abstract getDefaultEnd(): D; isTemplateRef(value: unknown): boolean; onRemove(): void; onClear(): void; }
isListModeWritableSignal<boolean> Whether the current state is list of periods. When false will displayed control for set custom period
formattedValuestring formatted value for period
disabledboolean Whether the current pipe is disabled.
startD parsed start
defaultStartD default object for start
endD parsed end
defaultEndD default object for end
isEmptyboolean Whether the current pipe is empty.
stateChangesSubject<void> changes of state
dataKbqPipeData<V> pipe data. Provided from subclass
valuesany values to select from the pipe template
valueTemplateTemplateRef<any> | string TemplateRef for selecting an option
optionCompareWith( o1: KbqSelectValue | null | undefined, o2: KbqSelectValue | null | undefined ) => 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.
lockedValuesunknown[] 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.
panelMaxHeightKbqPanelMaxHeight 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.
multilineOptionsboolean Whether the dropdown's option names and captions wrap instead of being truncated, forwarded from the pipe template. Only consumed by the select / multi-select pipe components.
noOptionsTextstring Message shown in place of the options when the pipe template has none, forwarded from the pipe
template. Only consumed by the select-family pipe components; undefined falls back to the localized
pipe.noOptions string.
showRemoveButtonboolean Whether the current pipe is removable or cleanable. Used for apply style modifier
noOptionsboolean Whether the pipe template provides no values to choose from. The select-family pipe components then
show noOptionsMessage instead of the list; the date pipes open straight on the custom period.
noOptionsMessagestring Message the select-family pipe components show when there are no options.
updateTemplates(templates: KbqPipeTemplate[] | null) => void updates values for selection and value template
open()void opens popover
usesTime()boolean 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.
formatRange()string Formats the selected range for display.
getDefaultStart()D Default start value used when the pipe has no stored start.
getDefaultEnd()D Default end value used when the pipe has no stored start.
isTemplateRef()boolean templateRef checker utility
onRemove()void removes pipe from filter-bar and triggers changes
onClear()void clears the pipe and triggers changes
@Directive({ selector: '[kbqPipe]' }) class KbqPipeDirective<T extends KbqPipe> { readonly pipe = input<T>(undefined, { alias: 'kbqPipe' }); }
@Directive({ selector: '[kbqPipeState]' }) class KbqPipeState<T> { readonly state = input<T | null>(null, { alias: 'kbqPipeState' }); }
kbqPipeStateT | null Pipe state the styled button belongs to.
Carries the binding this directive's selector matches. Every binding passes the pipe's own data,
which is mutated in place, so this value is a constant for the life of the pipe and the style is
derived from pipe.isEmpty instead.
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.
@Directive() abstract class KbqTreeSelectPipeBase<V> extends KbqBasePipe<V> { readonly searchControl: FormControl<string | null>; treeControl: FlatTreeControl<KbqTreeSelectFlatNode>; treeFlattener: KbqTreeFlattener<KbqTreeSelectNode, KbqTreeSelectFlatNode>; dataSource: KbqTreeFlatDataSource<KbqTreeSelectNode, KbqTreeSelectFlatNode>; protected transformer: (node: KbqTreeSelectNode, level: number, parent: KbqTreeSelectFlatNode | null) => KbqTreeSelectFlatNode; protected getLevel: (node: KbqTreeSelectFlatNode) => number; protected isExpandable: (node: KbqTreeSelectFlatNode) => boolean; protected getChildren: (node: KbqTreeSelectNode) => KbqTreeSelectNode[] | null; protected getValue: (node: KbqTreeSelectFlatNode) => unknown; protected getViewValue: (node: KbqTreeSelectFlatNode) => string; readonly stateChanges: Subject<void>; readonly data: KbqPipeData<V>; protected values: any; protected valueTemplate?: TemplateRef<any> | string; protected optionCompareWith?: ( o1: KbqSelectValue | null | undefined, o2: KbqSelectValue | null | undefined ) => boolean; protected lockedValues?: unknown[]; protected panelMaxHeight?: KbqPanelMaxHeight; protected multilineOptions?: boolean; protected noOptionsText?: string; get isEmpty(): boolean; get showRemoveButton(): boolean; protected get noOptions(): boolean; protected get noOptionsMessage(): string; updateTemplates: (templates: KbqPipeTemplate[] | null) => void; hasChild(_: number, nodeData: KbqTreeSelectFlatNode): boolean; open(): void; isTemplateRef(value: unknown): boolean; onRemove(): void; onClear(): void; }
searchControlFormControl<string | null> control for search options
stateChangesSubject<void> changes of state
dataKbqPipeData<V> pipe data. Provided from subclass
valuesany values to select from the pipe template
valueTemplateTemplateRef<any> | string TemplateRef for selecting an option
optionCompareWith( o1: KbqSelectValue | null | undefined, o2: KbqSelectValue | null | undefined ) => 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.
lockedValuesunknown[] 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.
panelMaxHeightKbqPanelMaxHeight 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.
multilineOptionsboolean Whether the dropdown's option names and captions wrap instead of being truncated, forwarded from the pipe template. Only consumed by the select / multi-select pipe components.
noOptionsTextstring Message shown in place of the options when the pipe template has none, forwarded from the pipe
template. Only consumed by the select-family pipe components; undefined falls back to the localized
pipe.noOptions string.
isEmptyboolean Whether the current pipe is empty. Used for apply style modifier
showRemoveButtonboolean Whether the current pipe is removable or cleanable. Used for apply style modifier
noOptionsboolean Whether the pipe template provides no values to choose from. The select-family pipe components then
show noOptionsMessage instead of the list; the date pipes open straight on the custom period.
noOptionsMessagestring Message the select-family pipe components show when there are no options.
updateTemplates(templates: KbqPipeTemplate[] | null) => void updates values for selection and value template
hasChild()boolean tree-node predicate: whether the node has children
open()void opens the tree-select panel
isTemplateRef()boolean templateRef checker utility
onRemove()void removes pipe from filter-bar and triggers changes
onClear()void clears the pipe and triggers changes
Flattened node
class KbqTreeSelectFlatNode { name: string; value: unknown; level: number; expandable: boolean; parent?: KbqTreeSelectFlatNode; }
function to get unique identifier of an element
function getId(item: KbqPipeTemplate): KbqPipeType | string | number;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.
function kbqBuildTree<T extends KbqTreeSelectNode>( value: Record<string, unknown>, level: number ): T[];
interface KbqDateTimeValue { name?: string; start?: string; end?: string; }
interface KbqFilter { name: string; pipes: KbqPipe[]; readonly: boolean; disabled: boolean; changed: boolean; saved: boolean; }
Contract a pipe (or filter-bar sub-component) depends on instead of the concrete KbqFilterBar.
KbqFilterBar provides itself as 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.
interface KbqFilterBarHost { readonly localeConfiguration: Signal<KbqFilterBarLocaleConfiguration>; readonly filter: ModelSignal<KbqFilter | null>; readonly pipeTemplates: Signal<KbqPipeTemplate[]>; readonly selectedAllEqualsSelectedNothing: Signal<boolean>; readonly isSaved: Signal<boolean>; readonly isChanged: Signal<boolean>; readonly isSavedAndChanged: Signal<boolean>; readonly isReadOnly: Signal<boolean>; readonly onChangePipe: OutputEmitterRef<KbqPipe>; readonly onClearPipe: OutputEmitterRef<KbqPipe>; readonly onClosePipe: OutputEmitterRef<KbqPipe>; readonly internalFilterChanges: BehaviorSubject<KbqFilter | null>; readonly internalTemplatesChanges: BehaviorSubject<KbqPipeTemplate[] | null>; readonly openPipe: BehaviorSubject<string | number | null>; readonly onResetFilter: BehaviorSubject<boolean>; removePipe(pipe: KbqPipe): void; resetFilterChangedState(): void; }
localeConfigurationSignal<KbqFilterBarLocaleConfiguration> Localized strings and configuration for the filter-bar and its pipes. Read via localeConfiguration():
the bar derives it from the active locale, so an override is registered with
kbqFilterBarLocaleConfigurationProvider or bound as [localeOverrides].
filterModelSignal<KbqFilter | null> Currently selected filter. A two-way-bindable model(): read via filter(), write via filter.set().
pipeTemplatesSignal<KbqPipeTemplate[]> Templates used when adding a pipe (also hold the option lists). Read via pipeTemplates().
selectedAllEqualsSelectedNothingSignal<boolean> Whether selecting all options counts as selecting nothing.
isSavedSignal<boolean> Whether the current filter is saved.
isChangedSignal<boolean> Whether the current filter is changed.
isSavedAndChangedSignal<boolean> Whether the current filter is both saved and changed.
isReadOnlySignal<boolean> Whether the current filter is readonly.
onChangePipeOutputEmitterRef<KbqPipe> Emits whenever a pipe value changes.
(The two-way-bound filter value is emitted by the filter model's filterChange output.)
onClearPipeOutputEmitterRef<KbqPipe> Emits whenever a pipe is cleared.
onClosePipeOutputEmitterRef<KbqPipe> Emits whenever a select/multiselect pipe closes.
internalFilterChangesBehaviorSubject<KbqFilter | null> Internal filter changes.
internalTemplatesChangesBehaviorSubject<KbqPipeTemplate[] | null> Internal pipe-template changes.
openPipeBehaviorSubject<string | number | null> Requests that an already-added pipe open its pop-up. A one-shot command handled synchronously by the
pipes that exist when it is dispatched, not retained state — clear it back to null after next. A
pipe that has not been rendered yet is opened with openOnAdd on the pipe itself, not through this.
onResetFilterBehaviorSubject<boolean> Emits when the filter is reset.
removePipe()void Removes a pipe from the current filter and emits the change.
resetFilterChangedState()void Clears the current filter's "changed" flag.
One pipe as it is persisted: what identifies it, and what the user put in it.
Deliberately not the pipe itself. A pipe built from a template keeps whatever that template carried
(pipe-add.ts strips only values and valueTemplate), so it can hold a compareWith function or a
DateTime bound — things JSON.stringify drops silently rather than rejecting. Everything but the
value is rebuilt from the application's own filters and templates while restoring.
interface KbqFilterBarPipeState { id: string | number; value: unknown; }
idstring | number getId(pipe) — the pipe's id, or its name when it has none.
valueunknown The pipe's value, in whatever shape the pipe stores it. Has to survive JSON.stringify.
The persisted state of a filter bar: which filter was selected, and the edits made to it.
interface KbqFilterBarState { name: string; changed: boolean; pipes: KbqFilterBarPipeState[]; }
namestring KbqFilter.name, the only identity a filter has. Empty for a filter the user never saved.
changedboolean Whether the filter carried unsaved changes.
pipesKbqFilterBarPipeState[] The filter's pipes, in order.
Contract a projected child depends on instead of the concrete KbqFilters. KbqFilters provides
itself as KBQ_FILTERS, so a child declared in its template does not import the component that
declares it.
interface KbqFiltersHost { saveFocusedElement(button?: KbqButton): void; }
saveFocusedElement()void Remembers the control focus returns to once the save popover closes.
interface KbqPipe { name: string; id?: string | number; type: KbqPipeType; value: unknown | null; search?: boolean; selectAll?: boolean; openOnAdd?: boolean; openOnReset?: boolean; selectedAllEqualsSelectedNothing?: boolean; cleanable: boolean; removable: boolean; disabled: boolean; }
selectedAllEqualsSelectedNothingboolean This is special logic that unselect all items when all selected because "all selected = nothing selected". Default is true
interface KbqPipeData<V> extends KbqPipe { value: V | null; name: string; id?: string | number; type: KbqPipeType; search?: boolean; selectAll?: boolean; openOnAdd?: boolean; openOnReset?: boolean; selectedAllEqualsSelectedNothing?: boolean; cleanable: boolean; removable: boolean; disabled: boolean; }
selectedAllEqualsSelectedNothingboolean This is special logic that unselect all items when all selected because "all selected = nothing selected". Default is true
interface KbqPipeTemplate extends Omit<KbqPipe, 'value'> { values?: unknown[]; valueTemplate?: TemplateRef<any> | string; compareWith?: (o1: KbqSelectValue | null | undefined, o2: KbqSelectValue | null | undefined) => boolean; lockedValues?: unknown[]; panelMaxHeight?: KbqPanelMaxHeight; multilineOptions?: boolean; noOptionsText?: string; minDateTime?: unknown; maxDateTime?: unknown; minInterval?: unknown; maxInterval?: unknown; disabled: boolean; name: string; selectAll?: boolean; search?: boolean; id?: string | number; type: KbqPipeType; openOnAdd?: boolean; openOnReset?: boolean; selectedAllEqualsSelectedNothing?: boolean; cleanable: boolean; removable: boolean; }
compareWith(o1: KbqSelectValue | null | undefined, o2: KbqSelectValue | null | undefined) => 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.
lockedValuesunknown[] 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.
panelMaxHeightKbqPanelMaxHeight 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.
multilineOptionsboolean Whether option names and captions in the dropdown wrap instead of being truncated to one line.
Applies to the select and multiselect pipes; ignored by the other pipe types. Unrelated to
KbqSelect.multiline, which lays the trigger's values out in rows.
noOptionsTextstring Message shown in the dropdown of the select, multiselect, tree-select and multi-tree-select
pipes when values is empty. Defaults to the localized pipe.noOptions string. Ignored by other pipe
types.
minDateTimeunknown 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.
maxDateTimeunknown Latest selectable instant for the date / datetime pipe custom period. See
KbqPipeTemplate.minDateTime. The date pipe uses only its day (pinned to the end of day).
Ignored by other pipe types.
minIntervalunknown 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 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).
maxIntervalunknown Maximum length of the date / datetime pipe custom period (end − start). See
KbqPipeTemplate.minInterval. When the selected period is longer, the editor shows an error and
disables Apply. Ignored by other pipe types.
selectedAllEqualsSelectedNothingboolean This is special logic that unselect all items when all selected because "all selected = nothing selected". Default is true
type KbqPipeType = `${KbqPipeTypes}` | (string & {});interface KbqSaveFilterError { text?: string; nameAlreadyExists?: boolean; }
interface KbqSaveFilterEvent { filter: KbqFilter; filterBar: KbqFilterBar; status?: KbqSaveFilterStatuses; }
interface KbqSelectValue { name: string; value: unknown; id?: string | number; caption?: string; }
idstring | number Optional stable identifier used by the select/multi-select pipe comparators.
captionstring Second line under name in the dropdown of the select / multiselect pipes. Ignored where a
valueTemplate owns the option.
interface KbqTreeSelectNode { children: KbqTreeSelectNode[] | null; name: string; value: unknown; }
list of pipe types available out of the box
enum KbqPipeTypes { ReadOnly = 'readonly', Text = 'text', Input = 'input', Select = 'select', TreeSelect = 'tree-select', MultiSelect = 'multiselect', MultiTreeSelect = 'multi-tree-select', Date = 'date', Datetime = 'datetime' }
Input'input' Renders a bare input: no popover, never opens. Commits while typing (debounced), on Enter and on blur.
saving statuses for KbqSaveFilterEvent
enum KbqSaveFilterStatuses { OnlyChanges = 'onlyChanges', NewName = 'newName', NewFilter = 'newFilter' }
list of pipes available out of the box.
const defaultFilterBarPipes: [KbqPipeType, Type<KbqBasePipe<unknown>>][];Use KBQ_FILTER_BAR_LOCALE_CONFIGURATION. Will be removed in 22.0.0.
const KBQ_FILTER_BAR_CONFIGURATION: InjectionToken<KbqFilterBarLocaleConfiguration>;Use KBQ_FILTER_BAR_DEFAULT_LOCALE_CONFIGURATION. Will be removed in 22.0.0.
const KBQ_FILTER_BAR_DEFAULT_CONFIGURATION: KbqFilterBarLocaleConfiguration;Default localized strings for the filter-bar, used when no KBQ_LOCALE_SERVICE (nor an explicit
KBQ_FILTER_BAR_LOCALE_CONFIGURATION) is provided. These are the Russian (ru-RU) strings, matching the
library-wide default-locale convention (every KBQ_*_DEFAULT_LOCALE_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_LOCALE_CONFIGURATION: KbqFilterBarLocaleConfiguration;Injection token exposing the 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>;Injection Token for providing configuration of filter-bar
const KBQ_FILTER_BAR_LOCALE_CONFIGURATION: InjectionToken<KbqFilterBarLocaleConfiguration>;Injection Token for providing pipes in filter-bar. Defaults to defaultFilterBarPipes so the
standalone KbqFilterBar works without KbqFilterBarModule; override it with
kbqFilterBarPipesProvider or a provider of your own.
const KBQ_FILTER_BAR_PIPES: InjectionToken<Map<KbqPipeType, Type<KbqBasePipe<unknown>>>>;Injection token exposing the KbqFiltersHost seam.
const KBQ_FILTERS: InjectionToken<KbqFiltersHost>;Injection Token for providing configuration of filter-bar
const KBQ_PIPE_DATA: InjectionToken<unknown>;Utility provider for KBQ_FILTER_BAR_LOCALE_CONFIGURATION. Only the strings you pass are overridden; the rest
keep following the active locale.
const kbqFilterBarLocaleConfigurationProvider: ( configuration: KbqDeepPartial<KbqFilterBarLocaleConfiguration> ) => Provider;
Utility provider for KBQ_FILTER_BAR_PIPES.
const kbqFilterBarPipesProvider: () => Provider;