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 Form field 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
Icons
CDK
 Key managers Keycodes
Interface and examples language
English
Version
19.7.0
Filter Bar 
import { KbqFilterBarModule } from '@koobiq/components/filter-bar';
Directives
KbqFilterBarRefresher

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

KbqPipeDirective

Selector: [kbqPipe]

Properties
Name Description
@Input('kbqPipe')
pipe: T
KbqFilterReset

Selector: kbq-filter-reset

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

Selector: [kbqFilterBarButton]

Properties
Name Description
filters: KbqFilters KbqFilters instance
KbqPipeState

Selector: [kbqPipeState]

Properties
Name Description
@Input('kbqPipeState')
state: T 		calculates and updates styles of button from pipe state
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
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
KbqPipeTitleDirective

Selector: [kbqPipeTitle]

Exported as: kbqPipeTitle
Properties
Name Description
@Input('kbqPipeTitle')
viewValue: TemplateRef
arrow: boolean
availablePositions: { [key: string]: ConnectionPositionPair; }
child: HTMLElement
closingActionsSubscription: Subscription
color: string
container: HTMLElement
content: string | TemplateRef
context: any
customClass: string
destroyRef: DestroyRef
detach: () => void
direction: Directionality
disabled: boolean
elementRef: ElementRef
enterDelay: number
focusMonitor: FocusMonitor
forDisabledComponent: InputSignal>> Input for controlling the disabled state of a component. The input expects a component containing `disabledSignal` property, which is a writable signal emitting boolean values.
hideWithTimeout: boolean Changes hiding behavior. By default, tooltip is hidden on mouseleave from trigger. Setting hideWithTimeout to true will delay tooltip hiding and will not hide when the mouse moves from trigger to tooltip.
hostView: ViewContainerRef
hovered: BehaviorSubject Stream that emits when the popupTrigger is hovered.
ignoreTooltipPointerEvents: InputSignal Determines whether pointer events should be ignored on tooltips. When set to `true`, tooltip elements will not receive pointer events, allowing interactions to pass through to underlying elements. Defaults to `true`.
instance: any
isOpen: boolean
isOverflown: boolean
leaveDelay: number
listeners: Map
modifier: TooltipModifier
mouseEvent: MouseEvent
ngZone: NgZone
offset: number
onPositionChange: ($event: ConnectedOverlayPositionChange) => void
originSelector: string
overlay: Overlay
overlayConfig: OverlayConfig
overlayRef: OverlayRef
parent: HTMLElement
parentPopup: KbqParentPopup
placement: "top" | "topLeft" | "topRight" | "right" | "rightTop" | "rightBottom" | "left" | "leftTop" | "leftBottom" | "bottom" | "bottomLeft" | "bottomRight"
placementChange: EventEmitter
placementPriority: string | string[]
portal: ComponentPortal
preventClose: boolean prevents closure by any event
relativeToPointer: boolean Positions the tooltip relative to the mouse cursor. Only available for top and bottom kbqPlacement. Does not work with kbqPlacementPriority.
resizeStream: Subject
scheduler: AsyncScheduler
scrollDispatcher: ScrollDispatcher
scrollStrategy: () => ScrollStrategy
scrollable: CdkScrollable
stickToWindow: "top" | "right" | "left" | "bottom"
strategy: FlexibleConnectedPositionStrategy
tooltipPlacement: "top" | "topLeft" | "topRight" | "right" | "rightTop" | "rightBottom" | "left" | "leftTop" | "leftBottom" | "bottom" | "bottomLeft" | "bottomRight"
tooltipPlacementPriority: string | string[]
tooltipVisible: boolean
trigger: string
triggerName: string
visible: boolean
visibleChange: EventEmitter
Methods
applyRelativeToPointer
clearListeners
closingActions
createOverlay
Create the overlay config and position strategy
focus
getAdjustedPositions
Returns a list of positions that are aligned with the element's dimensions and offsets.
getMouseLeaveListener
getOverlayHandleComponentType
getPrioritizedPositions
getPriorityPlacementStrategy
handleElementEnter
hide
hideTooltip
initListeners
keydownHandler
resetOrigin
show
showForElement
method allows to show the tooltip relative to the element Use this approach when it is not possible to define a trigger in the template. For example: const tooltip = new KbqTooltipTrigger(); tooltip.showForElement(element);
showForMouseEvent
method allows to show the tooltip relative to the given mouse event.
touchendHandler
updateClassMap
updateData
updatePlacement
updatePlacementPriority
updatePosition
Updates the position of the current popover.
updateVisible
KbqPipeButton

Selector: kbq-pipe-button

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

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

Properties
Name Description
@Input()
filter: KbqFilter 		Filter that is currently selected
@Input()
pipeTemplates: KbqPipeTemplate[] 		An array of templates that are used when adding a pipe. Also contains lists of options to select (values).
@Input()
selectedAllEqualsSelectedNothing: boolean 		This is special logic that unselect all items when all selected because "all selected = nothing selected". Default is true
@Output('onChangePipe')
onChangePipe: EventEmitter 		Event that emits whenever the value of the pipe changes.
@Output('onClearPipe')
onClearPipe: EventEmitter 		Event that emits whenever the pipe cleared.
@Output('onClosePipe')
onClosePipe: EventEmitter 		Event that emits whenever the select or multiselect pipe closed.
@Output('onRemovePipe')
onRemovePipe: EventEmitter 		Event that emits whenever the pipe deleted.
changes: BehaviorSubject all changes
configuration: any
externalConfiguration: unknown
internalFilterChanges: BehaviorSubject internal filter changes
internalTemplatesChanges: BehaviorSubject internal changes in templates
isChanged: boolean Whether the current filter is changed
isDisabled: boolean Whether the current filter is disabled
isReadOnly: boolean Whether the current filter is readonly
isSaved: boolean Whether the current filter is saved
isSavedAndChanged: boolean Whether the current filter is saved and changed
onResetFilter: BehaviorSubject Event that emits whenever the filter is reset.
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
KbqBasePipe
Properties
Name Description
data: KbqPipeData pipe data. Provided from subclass
isEmpty: boolean Whether the current pipe is empty. Used for apply style modifier
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
KbqPipeAdd

Selector: kbq-pipe-add

Properties
Name Description
@Input()
filterTemplate: KbqFilter 		template of filter
@Output('onAddPipe')
onAddPipe: EventEmitter 		Event that is generated after add pipe.
addedPipes: (string | number)[] already added pipes. Used to open an already added pipe.
filterBar: KbqFilterBar 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.
KbqFilterBarSearch

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

Deprecated
Properties
Name Description
@Input('placeholder')
customPlaceholder: InputSignal 		Custom placeholder text. When set, overrides localeData.placeholder
@Input('tooltip')
customTooltip: InputSignal 		Custom tooltip text. When set, overrides localeData.tooltip
@Input()
emitValueByEnter: InputSignalWithTransform 		Emit event by enter or not. Default is false
@Input()
initialValue: InputSignal 		Value of the field after initialization
@Input()
onSearchTimeout: InputSignalWithTransform 		/** Timeout in milliseconds for emit event. The default value is taken from defaultOnSearchTimeout
@Output('onSearch')
onSearch: EventEmitter 		event that is generated whenever a user performs a search.
isSearchActive: boolean Whether the search active
searchControl: UntypedFormControl control for search
Methods
openSearch
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
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: any, o2: any) => 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.
searchControl: UntypedFormControl 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
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: any, o2: any) => 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.
searchControl: UntypedFormControl 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
isTemplateRef
templateRef checker utility
onRemove
removes pipe from filter-bar and triggers changes
open
opens select
KbqPipeTreeSelectComponent

Selector: kbq-pipe-tree-select

Properties
Name Description
data: KbqPipeData pipe data. Provided from subclass
dataSource: KbqTreeFlatDataSource
filteredOptions: Observable filtered by search options
isEmpty: boolean Whether the current pipe is empty.
searchControl: UntypedFormControl 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
template: any
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
isTemplateRef
templateRef checker utility
onClear
clears the pipe and triggers changes
onOpen
onRemove
removes pipe from filter-bar and triggers changes
onSelect
open
opens select
KbqPipeDateComponent

Selector: kbq-pipe-date

Properties
Name Description
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
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
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
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
KbqPipeDatetimeComponent

Selector: kbq-pipe-datetime

Properties
Name Description
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
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
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
hideCalendars
isTemplateRef
templateRef checker utility
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
KbqFilters

Selector: kbq-filters

Exported as: kbqFilters
Properties
Name Description
@Input()
filters: KbqFilter[]
@Output('onChangeFilter')
onChangeFilter: EventEmitter 		Event that is generated whenever the user change a filter.
@Output('onRemoveFilter')
onRemoveFilter: EventEmitter 		Event that is generated whenever the user remove a filter.
@Output('onResetFilterChanges')
onResetFilterChanges: EventEmitter 		Event that is generated whenever the user reset a filter changes.
@Output('onSave')
onSave: EventEmitter 		Event that is generated whenever the user save a filter.
@Output('onSelectFilter')
onSelectFilter: EventEmitter 		Event that is generated whenever the user selects a filter.
closePopover: (restoreFocus?: boolean) => void
filter: KbqFilter Selected filter
filterActionsOpened: boolean Component state. true if opened dropdown or popup of filterActions
filterBar: KbqFilterBar KbqFilterBar instance
filterName: FormControl new filter name for saving
filterSavingErrorText: string
filteredOptions: Observable filtered by search filters
isEmpty: boolean Component state. True if 'filters' input contains no elements.
isSaving: boolean
opened: boolean Component state. true if opened dropdown or popup
popoverHeader: string header of popover. Depends on the mode
saveNewFilter: boolean true if saving a new filter, false if saving changes in filter
searchControl: UntypedFormControl control for search filter
showFilterSavingError: boolean
@Output('onSaveAsNew')
Deprecated
onSaveAsNew: EventEmitter 		Event that is generated whenever the user saves a filter as new.
Methods
filterSavedSuccessfully
Hide the popup and restore focus. Use this method in the onSave, onSaveAsNew, or onChangeFilter events after the data has been successfully saved.
filterSavedUnsuccessfully
Shows an error. Use this method in the onSave, onSaveAsNew, or onChangeFilter events if saving data failed.
openChangeFilterNamePopover
openSaveAsNewFilterPopover
preparePopover
removeFilter
resetFilterChanges
restoreFocus
saveAsNew
saveChanges
selectFilter
showError
KbqPipeMinWidth

Selector: [kbqPipeMinWidth]

Properties
Name Description
filterBar: KbqFilterBar 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
KbqDateTimeValue
Properties
Name Description
end: string
name: string
start: string
KbqSelectValue
Properties
Name Description
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: string
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: string
value: V
Deprecated
required: boolean
KbqPipeTemplate
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: string
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;
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: any, level: number): T[];
Parameters Description
value: any
level: number
Type aliases
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 configuration of filter-bar

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

Injection Token for providing configuration of filter-bar

const KBQ_FILTER_BAR_CONFIGURATION: InjectionToken<unknown>;
defaultOnSearchTimeout 
const defaultOnSearchTimeout: number;
KBQ_FILTER_BAR_PIPES

Injection Token for providing pipes in filter-bar

const KBQ_FILTER_BAR_PIPES: InjectionToken<any>;
kbqFilterBarPipesProvider

Utility provider for `KBQ_FILTER_BAR_PIPES`.

const kbqFilterBarPipesProvider: () => Provider;
defaultFilterBarPipes

list of pipes available out of the box.

const defaultFilterBarPipes: [string, unknown][];
Docs Feedback
If you have any questions or would like to contribute to writing the documentation, please create an issue in our GitHub repository.