Koobiq

KbqTreeSelect

Selector: kbq-tree-select

Exported as: kbqTreeSelect

Properties

Name	Description
@Input() autoSelect: boolean
@Input() backdropClass: string
@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: boolean	Whether to use a multiline matcher or not. Default is false
@Input() multiple: boolean
@Input() panelClass: string \| string[] \| Set \| { [key: string]: any; }	Classes to be passed to the select panel. Supports the same syntax as `ngClass`.
@Input() panelMinWidth: number	Minimum width of the panel. If minWidth is larger than window width, it will be ignored.
@Input() panelWidth: KbqTreeSelectPanelWidth	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.
@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() sortComparator: (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('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: EventEmitter	Event emitted when the selected value has been changed by the user.
calculateHiddenItems: () => void
canShowCleaner: boolean
cleaner: KbqCleaner
controlType: string	A name for this control that can be used by `kbq-form-field`.
customMatcher: KbqSelectMatcher
customTagTemplateRef: TemplateRef
customTrigger: KbqSelectTrigger	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
offsetY: number	The y-offset of the overlay panel in relation to the trigger's top start corner. This must be adjusted to align the selected option text over the trigger text. when the panel opens. Will change based on the y-position of the selected option.
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	Min 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: ElementRef
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: any	Strategy that will be used to handle scrolling while the select panel is open.
search: KbqSelectSearch
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: KbqTreeSelection
trigger: ElementRef	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

Name

Description

@Input()

autoSelect: boolean

@Input()

backdropClass: string

@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: boolean

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

@Input()

multiple: boolean

@Input()

panelClass: string | string[] | Set | { [key: string]: any; }

Classes to be passed to the select panel. Supports the same syntax as `ngClass`.

@Input()

panelMinWidth: number

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

@Input()

panelWidth: KbqTreeSelectPanelWidth

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.

@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()

sortComparator: (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('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: EventEmitter

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

calculateHiddenItems: () => void

canShowCleaner: boolean

cleaner: KbqCleaner

controlType: string

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

customMatcher: KbqSelectMatcher

customTagTemplateRef: TemplateRef

customTrigger: KbqSelectTrigger

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

offsetY: number

The y-offset of the overlay panel in relation to the trigger's top start corner. This must be adjusted to align the selected option text over the trigger text. when the panel opens. Will change based on the y-position of the selected option.

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

Min 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: ElementRef

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: any

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

search: KbqSelectSearch

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: KbqTreeSelection

trigger: ElementRef

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

Methods

calculateOverlayOffsetX

clearValue

close

Closes the overlay panel and focuses the host element.

focus

getOverlayRect

getPanelTheme

Returns the theme to be used on the panel.

handleClick

handleKeydown

hiddenItemsTextFormatter

isRtl

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

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

Tree select panel width type.

type KbqTreeSelectPanelWidth = 'auto' | number | null;

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: KbqTreeSelectPanelWidth;
    /**
     * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored.
     */
    panelMinWidth: Exclude<KbqTreeSelectPanelWidth, 'auto'>;
    /**
     * 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: KbqTreeSelectPanelWidth; panelMinWidth: number; searchMinOptionsThreshold: number | "auto"; }>>;

kbqTreeSelectOptionsProvider

Utility provider for `KBQ_TREE_SELECT_OPTIONS`.

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