Tree select · Koobiq

KbqTreeSelect

Selector: kbq-tree-select

Exported as: kbqTreeSelect

Properties

Name	Description
@Input() autoSelect: boolean
@Input() backdropClass: InputSignal
@Input() disabled: boolean
@Input() errorStateMatcher: ErrorStateMatcher	Object used to control when error messages are shown.
@Input() hasBackdrop: boolean
@Input() hiddenItemsText: string
@Input() id: string
@Input() multiline: InputSignalWithTransform	Whether to use a multiline matcher or not. Default is false
@Input() multiple: boolean
@Input() panelClass: InputSignal \| { [key: string]: any; }>	Classes to be passed to the select panel. Supports the same syntax as the `[class]` binding.
@Input() panelMaxWidth: InputSignalWithTransform	Maximum width of the panel in pixels. Caps how far the panel grows with its content — it never makes the panel narrower than the trigger, and never clamps an explicit `panelWidth`. When null, the `--kbq-panel-size-width-max` token applies.
@Input() panelMinWidth: InputSignalWithTransform	Minimum width of the panel. If minWidth is larger than window width, it will be ignored.
@Input() panelWidth: InputSignal	Width of the panel. If set to `auto`, the panel will match the trigger width, but will never be narrower than `panelMinWidth`. If set to null or an empty string, the panel will grow to match the longest option's text. Any other value is used as an exact width, and `panelMinWidth` is not applied.
@Input() placeholder: string
@Input() required: boolean
@Input() searchMinOptionsThreshold: number	Controls when the search functionality is displayed based on the number of available options. Automatically enables search hiding if value provided, even if `defaultOptions.searchMinOptionsThreshold` is provided.
@Input() selectAllHandler: (event: KeyboardEvent, select: KbqTreeSelect) => void	Function for handling the combination Ctrl + A (select all). By default, the internal handler is used.
@Input() selectAllToggle: InputSignalWithTransform	When `true`, a repeated Ctrl/Cmd+A deselects all options. Off by default (Ctrl+A only selects).
@Input() sortComparator: InputSignal<(a: KbqTreeOption, b: KbqTreeOption, options: KbqTreeOption[]) => number>	Function used to sort the values in a select in multiple mode. Follows the same logic as `Array.prototype.sort`.
@Output('closed') closedStream: Observable	Event emitted when the select has been closed.
@Output('onSelectAll') onSelectAll: OutputEmitterRef>	Event emitted when all options are selected or deselected via the Ctrl/Cmd + A shortcut. Not emitted when a custom `selectAllHandler` is supplied — the handler owns the behaviour then.
@Output('openedChange') openedChange: EventEmitter	Event emitted when the select panel has been toggled.
@Output('opened') openedStream: Observable	Event emitted when the select has been opened.
@Output('selectionChange') selectionChange: OutputEmitterRef	Event emitted when the selected value has been changed by the user.
calculateHiddenItems: () => void
canShowCleaner: boolean
changeDetectorRef: ChangeDetectorRef
cleaner: Signal
controlType: string	A name for this control that can be used by `kbq-form-field`.
customMatcher: Signal
customTagTemplateRef: Signal>
customTrigger: Signal	User-supplied override of the trigger element.
defaultErrorStateMatcher: ErrorStateMatcher
elementRef: ElementRef
empty: boolean
errorState: boolean	Whether the component is in an error state.
firstSelected: any
focused: boolean	Whether the select is focused.
hiddenItems: number
isBrowser: boolean
isEmptySearchResult: boolean
multiSelection: boolean	Whether multiple choice is enabled or not. True if multiple or multiline
ngControl: NgControl
onChange: (value: any) => void	`View -> model callback called when value changes`
onTouched: () => void	`View -> model callback called when select has been touched`
optionSelectionChanges: Observable	Combined stream of all of the child options' change events.
options: QueryList
overlayDir: CdkConnectedOverlay
overlayMinWidth: string \| number	Minimum width of the overlay panel.
overlayOrigin: ElementRef \| CdkOverlayOrigin	Origin for the overlay panel.
overlayPanelClass: "kbq-select-overlay"	Overlay panel class.
overlayWidth: string \| number	Width of the overlay panel.
panel: Signal>	Reference to the overlay panel element.
panelDoneAnimatingStream: Subject	Emits when the panel element is finished transforming in.
panelOpen: boolean
parentForm: NgForm
parentFormGroup: FormGroupDirective
positions: ConnectedPosition[]	This position config ensures that the top "start" corner of the overlay is aligned with with the top "start" of the origin by default (overlapping the trigger completely). If the panel cannot fit below the trigger, it will fall back to a position above the trigger.
scrollStrategy: ScrollStrategy	Strategy that will be used to handle scrolling while the select panel is open.
search: Signal
selected: any
selectedValues: any
selectionModel: SelectionModel	Deals with the selection logic.
tags: QueryList
transformOrigin: string	The value of the select panel's transform-origin property.
tree: Signal
trigger: Signal>	Trigger - is a clickable field to open select dropdown panel
triggerFontSize: number	The cached font-size of the trigger element.
triggerRect: DOMRect	The last measured value for the trigger's client bounding rect.
triggerValue: string
triggerValues: KbqTreeSelectTriggerValue[]
userInteractionChanges: Observable	Combined stream of all of the child options userInteraction events.
value: any
viewportMargin: number	Minimum space to keep between the overlay and the viewport edge. At least `defaultOffsetY` so CDK's fit check — which runs before the `kbq-connected-overlay_below/_above` gap padding is applied to the pane — stays conservative enough to absorb that padding instead of letting the panel overflow the viewport by the size of the gap.
Deprecated offsetY: number	The y-offset of the overlay panel in relation to the trigger.

Name

Description

@Input()

autoSelect: boolean

@Input()

backdropClass: InputSignal

@Input()

disabled: boolean

@Input()

errorStateMatcher: ErrorStateMatcher

Object used to control when error messages are shown.

@Input()

hasBackdrop: boolean

@Input()

hiddenItemsText: string

@Input()

id: string

@Input()

multiline: InputSignalWithTransform

Whether to use a multiline matcher or not. Default is false

@Input()

multiple: boolean

@Input()

panelClass: InputSignal | { [key: string]: any; }>

Classes to be passed to the select panel. Supports the same syntax as the `[class]` binding.

@Input()

panelMaxWidth: InputSignalWithTransform

Maximum width of the panel in pixels. Caps how far the panel grows with its content — it never makes the panel narrower than the trigger, and never clamps an explicit `panelWidth`. When null, the `--kbq-panel-size-width-max` token applies.

@Input()

panelMinWidth: InputSignalWithTransform

Minimum width of the panel. If minWidth is larger than window width, it will be ignored.

@Input()

panelWidth: InputSignal

Width of the panel. If set to `auto`, the panel will match the trigger width, but will never be narrower than `panelMinWidth`. If set to null or an empty string, the panel will grow to match the longest option's text. Any other value is used as an exact width, and `panelMinWidth` is not applied.

@Input()

placeholder: string

@Input()

required: boolean

@Input()

searchMinOptionsThreshold: number

Controls when the search functionality is displayed based on the number of available options. Automatically enables search hiding if value provided, even if `defaultOptions.searchMinOptionsThreshold` is provided.

@Input()

selectAllHandler: (event: KeyboardEvent, select: KbqTreeSelect) => void

Function for handling the combination Ctrl + A (select all). By default, the internal handler is used.

@Input()

selectAllToggle: InputSignalWithTransform

When `true`, a repeated Ctrl/Cmd+A deselects all options. Off by default (Ctrl+A only selects).

@Input()

sortComparator: InputSignal<(a: KbqTreeOption, b: KbqTreeOption, options: KbqTreeOption[]) => number>

Function used to sort the values in a select in multiple mode. Follows the same logic as `Array.prototype.sort`.

@Output('closed')

closedStream: Observable

Event emitted when the select has been closed.

@Output('onSelectAll')

onSelectAll: OutputEmitterRef>

Event emitted when all options are selected or deselected via the Ctrl/Cmd + A shortcut. Not emitted when a custom `selectAllHandler` is supplied — the handler owns the behaviour then.

@Output('openedChange')

openedChange: EventEmitter

Event emitted when the select panel has been toggled.

@Output('opened')

openedStream: Observable

Event emitted when the select has been opened.

@Output('selectionChange')

selectionChange: OutputEmitterRef

Event emitted when the selected value has been changed by the user.

calculateHiddenItems: () => void

canShowCleaner: boolean

changeDetectorRef: ChangeDetectorRef

cleaner: Signal

controlType: string

A name for this control that can be used by `kbq-form-field`.

customMatcher: Signal

customTagTemplateRef: Signal>

customTrigger: Signal

User-supplied override of the trigger element.

defaultErrorStateMatcher: ErrorStateMatcher

elementRef: ElementRef

empty: boolean

errorState: boolean

Whether the component is in an error state.

firstSelected: any

focused: boolean

Whether the select is focused.

hiddenItems: number

isBrowser: boolean

isEmptySearchResult: boolean

multiSelection: boolean

Whether multiple choice is enabled or not. True if multiple or multiline

ngControl: NgControl

onChange: (value: any) => void

`View -> model callback called when value changes`

onTouched: () => void

`View -> model callback called when select has been touched`

optionSelectionChanges: Observable

Combined stream of all of the child options' change events.

options: QueryList

overlayDir: CdkConnectedOverlay

overlayMinWidth: string | number

Minimum width of the overlay panel.

overlayOrigin: ElementRef | CdkOverlayOrigin

Origin for the overlay panel.

overlayPanelClass: "kbq-select-overlay"

Overlay panel class.

overlayWidth: string | number

Width of the overlay panel.

panel: Signal>

Reference to the overlay panel element.

panelDoneAnimatingStream: Subject

Emits when the panel element is finished transforming in.

panelOpen: boolean

parentForm: NgForm

parentFormGroup: FormGroupDirective

positions: ConnectedPosition[]

This position config ensures that the top "start" corner of the overlay is aligned with with the top "start" of the origin by default (overlapping the trigger completely). If the panel cannot fit below the trigger, it will fall back to a position above the trigger.

scrollStrategy: ScrollStrategy

Strategy that will be used to handle scrolling while the select panel is open.

search: Signal

selected: any

selectedValues: any

selectionModel: SelectionModel

Deals with the selection logic.

tags: QueryList

transformOrigin: string

The value of the select panel's transform-origin property.

tree: Signal

trigger: Signal>

Trigger - is a clickable field to open select dropdown panel

triggerFontSize: number

The cached font-size of the trigger element.

triggerRect: DOMRect

The last measured value for the trigger's client bounding rect.

triggerValue: string

triggerValues: KbqTreeSelectTriggerValue[]

userInteractionChanges: Observable

Combined stream of all of the child options userInteraction events.

value: any

viewportMargin: number

Minimum space to keep between the overlay and the viewport edge. At least `defaultOffsetY` so CDK's fit check — which runs before the `kbq-connected-overlay_below/_above` gap padding is applied to the pane — stays conservative enough to absorb that padding instead of letting the panel overflow the viewport by the size of the gap.

Deprecated

offsetY: number

The y-offset of the overlay panel in relation to the trigger.

Methods

calculateOverlayOffsetX

clearValue

close

Closes the overlay panel and focuses the host element.

focus

getOverlayRect

getPanelClasses

Returns the full set of classes for the panel: base class, theme and custom `panelClass`.

getPanelTheme

Returns the theme to be used on the panel.

handleClick

handleKeydown

hiddenItemsTextFormatter

isRtl

lockOverlayWidthForSearch

Freezes the panel at its rendered width so that filtering the options does not reflow it. Does nothing when the width is already pinned.

onAttached

Callback that is invoked when the overlay panel has been attached.

onBlur

Calls the touched callback only if the panel is closed. Otherwise, the trigger will "blur" to the panel when it opens, causing a false positive.

onFocus

onRemoveSelectedOption

Invoked when an option is clicked.

open

panelKeydownHandler

resetOverlay

resolveSearchMinOptionsThreshold

setOverlayPosition

toggle

triggerKeydownHandler

updateErrorState

updateOverlayWidth

Resolves the overlay panel size for the current trigger geometry and stores it for the `cdkConnectedOverlay` width bindings.

KbqTreeSelectChange

Change event object that is emitted when the select value has changed.

Properties

Name	Description
isUserInput: boolean
source: KbqTreeSelect
value: any
values: unknown[]

Name

Description

isUserInput: boolean

source: KbqTreeSelect

value: any

values: unknown[]

KbqTreeSelectTriggerValue

Tree select trigger value type.

type KbqTreeSelectTriggerValue = {
    disabled: boolean;
    value: string;
    viewValue: string;
};

KbqTreeSelectPanelWidth

Deprecated

Tree select panel width type.

type KbqTreeSelectPanelWidth = KbqPanelWidth;

KbqTreeSelectOptions

Options for the `kbq-tree-select` that can be configured using the `KBQ_TREE_SELECT_OPTIONS` injection token.

type KbqTreeSelectOptions = Partial<{
    /**
     * Width of the panel. If set to `auto`, the panel will match the trigger width.
     * If set to null or an empty string, the panel will grow to match the longest option's text.
     */
    panelWidth: KbqPanelWidth;
    /**
     * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored.
     */
    panelMinWidth: KbqPanelMinWidth;
    /**
     * Maximum width of the panel. Caps growth by content only — it never overrides the trigger width or an
     * explicit `panelWidth`. If null, the `--kbq-panel-size-width-max` token applies.
     */
    panelMaxWidth: KbqPanelMaxWidth;
    /**
     * Whether to enable hiding search by default if options is less than minimum.
     *
     * - `'auto'` uses `KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD` as min value.
     * - number - will enables search hiding and uses value as min.
     * @see KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD
     */
    searchMinOptionsThreshold: 'auto' | number;
}>;

KBQ_TREE_SELECT_OPTIONS

Injection token that can be used to provide the default options for the `kbq-tree-select`.

const KBQ_TREE_SELECT_OPTIONS: InjectionToken<Partial<{ panelWidth: KbqPanelWidth; panelMinWidth: number; panelMaxWidth: number; searchMinOptionsThreshold: number | "auto"; }>>;

kbqTreeSelectOptionsProvider

Utility provider for `KBQ_TREE_SELECT_OPTIONS`.

const kbqTreeSelectOptionsProvider: (options: Partial<{ panelWidth: KbqPanelWidth; panelMinWidth: number; panelMaxWidth: number; searchMinOptionsThreshold: number | "auto"; }>) => Provider;