import { KbqSelectModule } from '@koobiq/components/select';

KbqSelect

componentСкопировать ссылку на KbqSelect
@Component({ selector: 'kbq-select', exportAs: 'kbqSelect' })
class KbqSelect extends KbqAbstractSelect implements ControlValueAccessor, KbqFormFieldControl<any>, CanUpdateErrorState, KbqSiblingPopup, KbqOptionParentComponent {
readonly hiddenItemsText = input<string>();
readonly hiddenItemsTextFormatter = input<(hiddenItemsText: string, hiddenItems: number) => string>(
(hiddenItemsText, hiddenItems) => hiddenItemsText.replace('{{ number }}', hiddenItems.toString())
);
readonly ariaLabel = input<string | null>(null, {
alias: 'aria-label'
});
readonly showPreselectedValues = input<boolean>(false);
readonly triggerValuesLimit = input<number>(0);
readonly panelClass = input<string | string[] | Set<string> | Record<string, boolean>>();
readonly backdropClass = input<string>(
'cdk-overlay-transparent-backdrop'
);
readonly errorStateMatcher = input<ErrorStateMatcher>();
readonly sortComparator = input<(a: KbqOptionBase, b: KbqOptionBase, options: KbqOptionBase[]) => number>();
readonly multiline = input<boolean>(false);
readonly searchMinOptionsThreshold = input<'auto' | number | undefined>();
readonly scrolledToBottomOffset = input<number>(0);
readonly hasBackdrop = input<boolean>(false);
readonly placeholder = input<string>();
readonly required = input<boolean>(false);
multiple = input<boolean>(false);
readonly compareWith = input<(o1: any, o2: any) => boolean>(
(o1, o2) => o1 === o2
);
readonly virtualOptionFactory = input<(value: any) => KbqVirtualOption>();
readonly clearPredicate = input<(option: KbqOptionBase) => boolean>(
this.defaultOptions?.clearPredicate ?? ((option) => !option.disabled)
);
readonly selectAllToggle = input<boolean>(false);
readonly selectAll = input<boolean>(false);
selectAllHandler = input<((event: KeyboardEvent, select: KbqSelect) => void) | undefined>();
readonly panelWidth = input<KbqPanelWidth>(
this.defaultOptions?.panelWidth ?? null
);
readonly panelMinWidth = input<KbqPanelMinWidth>(
this.defaultOptions?.panelMinWidth === undefined
? KBQ_PANEL_DEFAULT_MIN_WIDTH
: this.defaultOptions.panelMinWidth
);
readonly panelMaxWidth = input<KbqPanelMaxWidth>(
this.defaultOptions?.panelMaxWidth === undefined ? null : this.defaultOptions.panelMaxWidth
);
readonly panelMaxHeight = input<KbqPanelMaxHeight>(
this.defaultOptions?.panelMaxHeight === undefined ? null : this.defaultOptions.panelMaxHeight
);
readonly value = model<any>();
readonly id = input<string | undefined>();
readonly disabled = input<boolean>(false);
readonly beforeOpened = output<void>();
readonly selectionChange = output<KbqSelectChange>();
readonly onSelectAll = output<KbqSelectAllEvent<KbqOption, KbqSelect>>();
readonly scrolledToBottom = output<void>();
defaultErrorStateMatcher: ErrorStateMatcher;
elementRef: ElementRef<HTMLElement>;
parentForm: NgForm | null;
parentFormGroup: FormGroupDirective | null;
ngControl: NgControl | null;
readonly errorState: Signal<boolean>;
controlType: string;
readonly isNativeLabelSupported: false;
readonly hiddenItems: Signal<number>;
triggerFontSize: number;
selectionModel: SelectionModel<KbqOptionBase>;
previousSelectionModelSelected: KbqOptionBase[];
keyManager: ActiveDescendantKeyManager<KbqOption>;
transformOrigin: string;
panelDoneAnimatingStream: Subject<string>;
scrollStrategy: ScrollStrategy;
positions: ConnectedPosition[];
readonly trigger: Signal<ElementRef<any> | undefined>;
readonly panel: Signal<ElementRef<any> | undefined>;
readonly optionsContainer: Signal<ElementRef<any>>;
readonly selectAllOption: Signal<KbqOption | undefined>;
readonly footer: Signal<ElementRef<any> | undefined>;
readonly cdkVirtualForOf: Signal<CdkVirtualForOf<any> | undefined>;
readonly virtualScrollViewport: Signal<CdkVirtualScrollViewport | undefined>;
get tags(): QueryList<KbqTag>;
readonly customTrigger: Signal<KbqSelectTrigger | undefined>;
readonly customMatcher: Signal<KbqSelectMatcher | undefined>;
readonly customTagTemplateRef: Signal<TemplateRef<any> | undefined>;
get options(): QueryList<KbqOption>;
readonly optionGroups: Signal<readonly KbqOptgroup[]>;
readonly search: Signal<KbqSelectSearch | undefined>;
readonly searchEmpty: Signal<KbqSelectSearchEmptyResult | undefined>;
readonly optionSelectionChanges: Observable<KbqOptionSelectionChange>;
readonly openedChange: EventEmitter<boolean>;
readonly openedStream: Observable<void>;
readonly closedStream: Observable<void>;
readonly focused: Signal<boolean>;
panelOpen: boolean;
get isAttached(): boolean;
withVirtualScroll: boolean;
get isEmptySearchResult(): boolean;
get allOptionsSelected(): boolean;
get selectAllState(): KbqPseudoCheckboxState;
get selected(): KbqOptionBase | KbqOptionBase[];
get triggerValue(): string;
get triggerValues(): KbqOptionBase[];
readonly empty: Signal<boolean>;
get noOptions(): boolean;
get firstSelected(): KbqOptionBase | null;
get firstFiltered(): boolean;
get multiSelection(): boolean;
calculateHiddenItems: () => void;
updateErrorState(): void;
resetSearch(): void;
toggle(): void;
open(): void;
openPanel(): void;
close(): void;
isRtl(): boolean;
handleKeydown(event: KeyboardEvent): void;
onFocus(): void;
onBlur(): void;
onAttached(): void;
getPanelTheme(): string;
focus(): void;
onRemoveMatcherItem(option: KbqOptionBase, $event: Event): void;
getItemHeight(): number;
handleClick($event: MouseEvent): void;
}
hiddenItemsTextinputСкопировать ссылку на hiddenItemsTextstring

Template string for the hidden items counter. Supports the {{ number }} placeholder.

Takes precedence over the value the locale service provides, and keeps it for the whole lifetime of the select — switching the locale no longer overwrites what the consumer asked for.

hiddenItemsTextFormatterinputСкопировать ссылку на hiddenItemsTextFormatter(hiddenItemsText: string, hiddenItems: number) => string

Formats the hidden items counter.

aria-labelinputСкопировать ссылку на aria-labelstring | null

Accessible name of the trigger and of the option list.

Only needed for a select rendered without a kbq-form-field label — with one, the label names both.

showPreselectedValuesinputСкопировать ссылку на showPreselectedValuesboolean

Determines whether preselected values are displayed.

triggerValuesLimitinputСкопировать ссылку на triggerValuesLimitnumber

Specifies the maximum number of trigger values allowed. This constant limits the size of the trigger values array to ensure performance and prevent excessive memory usage. A value of 0 indicates that there is no limit.

panelClassinputСкопировать ссылку на panelClassstring | string[] | Set<string> | Record<string, boolean>

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

backdropClassinputСкопировать ссылку на backdropClassstring

Classes to be passed to the overlay backdrop.

errorStateMatcherinputСкопировать ссылку на errorStateMatcherErrorStateMatcher

Object used to control when error messages are shown.

sortComparatorinputСкопировать ссылку на sortComparator(a: KbqOptionBase, b: KbqOptionBase, options: KbqOptionBase[]) => number

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

Without one the values are emitted in panel order — the order the options are declared in, not the order they were picked in. A value whose option is not rendered (a KbqVirtualOption under virtual scroll or showPreselectedValues) has no place in that order and sorts after everything that has.

multilineinputСкопировать ссылку на multilineboolean

Whether to use a multiline matcher or not. Default is false. When true, allows multiple lines of text in the selected value display.

searchMinOptionsThresholdinputСкопировать ссылку на searchMinOptionsThreshold'auto' | number | undefined

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.

Accepts 'auto', which resolves to KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD; the getter therefore reports the resolved number, never 'auto'. Defaults to undefined.

scrolledToBottomOffsetinputСкопировать ссылку на scrolledToBottomOffsetnumber

Distance in pixels from the bottom of the options panel at which scrolledToBottom fires. Default 0 — emits only when the panel is fully scrolled to the bottom.

hasBackdropinputСкопировать ссылку на hasBackdropboolean

Whether the overlay should have a backdrop. When true, clicking the backdrop will close the select.

placeholderinputСкопировать ссылку на placeholderstring

Placeholder text to be shown when no value is selected. Displayed in the trigger when the select is closed and no value is selected.

requiredinputСкопировать ссылку на requiredboolean

Whether the select is required. Affects validation and display of placeholder.

multipleinputСкопировать ссылку на multipleboolean

Whether multiple options can be selected. Note: This cannot be changed dynamically after initialization.

compareWithinputСкопировать ссылку на compareWith(o1: any, o2: any) => 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. Should return true if the values match. Defaults to strict equality comparison.

virtualOptionFactoryinputСкопировать ссылку на virtualOptionFactory(value: any) => KbqVirtualOption

Factory used to construct a KbqVirtualOption for selected values whose KbqOption is not currently rendered (e.g. virtual scroll out of viewport, programmatically set initial value, showPreselectedValues).

Required when option values are objects so the trigger (and tags in multiple mode) can render a human-readable label. Also lets consumers customise per-value disabled state or any future KbqVirtualOption fields without adding new @Inputs.

Defaults to new KbqVirtualOption(value, this.disabled()), which is correct for primitive values where value itself is the display label.

clearPredicateinputСкопировать ссылку на clearPredicate(option: KbqOptionBase) => boolean

Decides which selected options the projected KbqCleaner removes: return true to clear the option, false to keep it. Disabled options are kept by default. Bind a stable reference — a new function on every change detection re-runs the predicate over the whole selection.

Not consulted by writeValue / reset(), which always clear everything.

selectAllToggleinputСкопировать ссылку на selectAllToggleboolean

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

selectAllinputСкопировать ссылку на selectAllboolean

Whether to render the "select all" master checkbox above the options. Multiple selection only.

The row acts on the options the user can actually toggle — rendered, enabled and selectable. Since search filtering removes options from the DOM, "select all" under an active query selects only the matches. Enabling it also makes Ctrl/Cmd + A a two-way toggle, so the shortcut and the checkbox never disagree (selectAllToggle is implied).

selectAllHandlerinputСкопировать ссылку на selectAllHandler((event: KeyboardEvent, select: KbqSelect) => void) | undefined

Function for handling the Ctrl + A (select all) keyboard combination. By default, the internal handler selects all options. It is called with the keyboard event that triggered it and a reference to this select component.

panelWidthinputСкопировать ссылку на panelWidthKbqPanelWidth

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.

panelMinWidthinputСкопировать ссылку на panelMinWidthKbqPanelMinWidth

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

panelMaxWidthinputСкопировать ссылку на panelMaxWidthKbqPanelMaxWidth

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.

panelMaxHeightinputСкопировать ссылку на panelMaxHeightKbqPanelMaxHeight

Maximum height of the panel's scrollable option list, in pixels. Applied as the --kbq-select-panel-size-max-height custom property on the panel, so it also drives the pinned height of a cdk-virtual-scroll-viewport — with virtual scroll the value is an exact height, not a cap.

The search field and the footer sit outside the scrollable area and add to the panel's total height. When null, the token default (256px) applies.

valuemodelСкопировать ссылку на valueany

Value of the select control. Can be a single value or array of values for multiple selection. Follows [value], the form control and the user's selection. A value set in code selects its options on the next change detection, without emitting valueChange.

idinputСкопировать ссылку на idstring | undefined

Unique identifier for the select component. Auto-generates an ID if not provided.

disabledinputСкопировать ссылку на disabledboolean

Whether the select is disabled. When disabled, the select cannot be opened and its value cannot be changed. Also set by the bound form control.

localeOverridesinputСкопировать ссылку на localeOverridesKbqPartialLocaleData | undefined

Localized strings for this element and its subtree, keyed by locale section. Every key is optional at every depth.

beforeOpenedoutputСкопировать ссылку на beforeOpenedvoid

Event emitted before the select panel starts opening.

selectionChangeoutputСкопировать ссылку на selectionChangeKbqSelectChange

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

onSelectAlloutputСкопировать ссылку на onSelectAllKbqSelectAllEvent<KbqOption, KbqSelect>

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.

scrolledToBottomoutputСкопировать ссылку на scrolledToBottomvoid

Emits when the options panel is scrolled to (or within scrolledToBottomOffset of) the bottom.

errorStateСкопировать ссылку на errorStateSignal<boolean>

Whether the component is in an error state.

controlTypeСкопировать ссылку на controlTypestring

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

isNativeLabelSupportedСкопировать ссылку на isNativeLabelSupportedfalse

A kbq-select is not a native labelable element, so the form-field's <label for> cannot associate with it. The select is named through aria-labelledby instead.

hiddenItemsСкопировать ссылку на hiddenItemsSignal<number>

Number of the selected items that do not fit into the trigger.

triggerFontSizeСкопировать ссылку на triggerFontSizenumber

The cached font-size of the trigger element in pixels.

selectionModelСкопировать ссылку на selectionModelSelectionModel<KbqOptionBase>

Deals with the selection logic. Manages selected options and their states.

previousSelectionModelSelectedСкопировать ссылку на previousSelectionModelSelectedKbqOptionBase[]

Previously selected options before the current selection was made.

keyManagerСкопировать ссылку на keyManagerActiveDescendantKeyManager<KbqOption>

Manages keyboard events for options in the panel.

transformOriginСкопировать ссылку на transformOriginstring

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

panelDoneAnimatingStreamСкопировать ссылку на panelDoneAnimatingStreamSubject<string>

Emits once the panel has rendered ('showing') or has been removed ('void').

scrollStrategyСкопировать ссылку на scrollStrategyScrollStrategy

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

positionsСкопировать ссылку на positionsConnectedPosition[]

Opens the panel below the trigger, falling back to above it when it does not fit.

A third position is appended at runtime by updatePanelAnchor: a multiline trigger that has grown taller than the panel gets it anchored to its first row and drawn over the rest of it.

triggerСкопировать ссылку на triggerSignal<ElementRef<any> | undefined>

Trigger - is a clickable field to open select dropdown panel

panelСкопировать ссылку на panelSignal<ElementRef<any> | undefined>

Reference to the overlay panel element.

optionsContainerСкопировать ссылку на optionsContainerSignal<ElementRef<any>>

Reference to the container element that holds the options.

selectAllOptionСкопировать ссылку на selectAllOptionSignal<KbqOption | undefined>

Reference to the built-in "select all" row, rendered only while selectAll is on.

cdkVirtualForOfСкопировать ссылку на cdkVirtualForOfSignal<CdkVirtualForOf<any> | undefined>

Reference to the CDK virtual scroll directive for virtual scrolling support.

virtualScrollViewportСкопировать ссылку на virtualScrollViewportSignal<CdkVirtualScrollViewport | undefined>

Reference to the CDK virtual scroll viewport for tracking scroll position in virtual mode.

tagsСкопировать ссылку на tagsQueryList<KbqTag>

Query list of tags displayed in multiple selection mode.

customTriggerСкопировать ссылку на customTriggerSignal<KbqSelectTrigger | undefined>

User-supplied override of the trigger element for custom rendering.

customMatcherСкопировать ссылку на customMatcherSignal<KbqSelectMatcher | undefined>

User-supplied matcher component for custom value matching logic.

customTagTemplateRefСкопировать ссылку на customTagTemplateRefSignal<TemplateRef<any> | undefined>

Custom template reference for rendering tag content.

optionsСкопировать ссылку на optionsQueryList<KbqOption>

All of the defined select options.

optionGroupsСкопировать ссылку на optionGroupsSignal<readonly KbqOptgroup[]>

All of the defined groups of options.

searchEmptyСкопировать ссылку на searchEmptySignal<KbqSelectSearchEmptyResult | undefined>

Reference to the optional empty search result component.

optionSelectionChangesСкопировать ссылку на optionSelectionChangesObservable<KbqOptionSelectionChange>

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

openedChangeСкопировать ссылку на openedChangeEventEmitter<boolean>

Event emitted when the select panel has been toggled. Emits true when opened, false when closed. Also serves as the openedChange member of the KbqSiblingPopup contract — a tooltip sharing this element's host reacts to it, so its emission timing (gated on panelDoneAnimatingStream, see ngOnInit) matters beyond this output's original consumers.

openedStreamСкопировать ссылку на openedStreamObservable<void>

Event emitted when the select has been opened.

closedStreamСкопировать ссылку на closedStreamObservable<void>

Event emitted when the select has been closed.

focusedСкопировать ссылку на focusedSignal<boolean>

Whether the select is focused.

panelOpenСкопировать ссылку на panelOpenboolean

Whether the select panel is currently open.

isAttachedСкопировать ссылку на isAttachedboolean

Whether the overlay panel is currently on screen. Part of the KbqSiblingPopup contract.

withVirtualScrollСкопировать ссылку на withVirtualScrollboolean

Whether virtual scrolling is enabled for the options panel.

isEmptySearchResultСкопировать ссылку на isEmptySearchResultboolean

Whether the search returned no results.

allOptionsSelectedСкопировать ссылку на allOptionsSelectedboolean

Whether every option "select all" can act on is selected.

selectAllStateСкопировать ссылку на selectAllStateKbqPseudoCheckboxState

State of the "select all" master checkbox.

selectedСкопировать ссылку на selectedKbqOptionBase | KbqOptionBase[]

Returns the currently selected option(s). Single value or array for multiple selection.

triggerValueСкопировать ссылку на triggerValuestring

Returns the display value for the trigger element.

triggerValuesСкопировать ссылку на triggerValuesKbqOptionBase[]

Returns all selected options in display order.

emptyСкопировать ссылку на emptySignal<boolean>

Whether no option is currently selected.

noOptionsСкопировать ссылку на noOptionsboolean

Whether there are no options available.

firstSelectedСкопировать ссылку на firstSelectedKbqOptionBase | null

Returns the first selected option that is not disabled.

firstFilteredСкопировать ссылку на firstFilteredboolean

Whether the first selected option is filtered (not visible in the list).

multiSelectionСкопировать ссылку на multiSelectionboolean

Whether multiple choice is enabled. True if multiple or multiline mode is active.

calculateHiddenItemsСкопировать ссылку на calculateHiddenItems() => void

Calculates the number of hidden items in multiple selection mode and updates hiddenItems.

updateErrorState()Скопировать ссылку на updateErrorState()void

Updates the error state based on the error state matcher.

resetSearch()Скопировать ссылку на resetSearch()void

Resets the search component if present.

toggle()Скопировать ссылку на toggle()void

Toggles the overlay panel open or closed.

open()Скопировать ссылку на open()void

Triggers the opening of the panel component. If the component is disabled or the panel is already open, the call is ignored. Otherwise, the (beforeOpened) event is emitted. When no options are available, the panel is opened after a short delay; if options exist, it opens immediately.

openPanel()Скопировать ссылку на openPanel()void

Internal method to open the panel. Handles overlay positioning and sizing. Sets up the overlay dimensions based on trigger size and configured options.

close()Скопировать ссылку на close()void

Closes the overlay panel.

isRtl()Скопировать ссылку на isRtl()boolean

Checks if the current direction is RTL (right-to-left).

Returns
boolean

True if RTL mode is active, false otherwise.

handleKeydown()Скопировать ссылку на handleKeydown()void

Handles all keyboard events for the select. Delegates to appropriate handler based on panel state.

Parameters
eventKeyboardEvent

The keyboard event to handle.

onFocus()Скопировать ссылку на onFocus()void

Handles focus event on the select element.

onBlur()Скопировать ссылку на onBlur()void

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.

onAttached()Скопировать ссылку на onAttached()void

Callback that is invoked when the overlay panel has been attached. Sets up position change subscription and closing actions.

getPanelTheme()Скопировать ссылку на getPanelTheme()string

Returns the theme to be used on the panel based on parent form field color.

focus()Скопировать ссылку на focus()void

Focuses the select element.

onRemoveMatcherItem()Скопировать ссылку на onRemoveMatcherItem()void

Handles removal of a matched item in the trigger.

Parameters
optionKbqOptionBase

The option to remove from selection.

$eventEvent

The mouse or keyboard event that triggered the removal.

getItemHeight()Скопировать ссылку на getItemHeight()number

Gets the height of a single option item.

Returns
number

The height in pixels of the first option, or 0 if no options exist.

handleClick()Скопировать ссылку на handleClick()void

Handles click events on the select. Closes the panel if click is inside the footer.

Parameters
$eventMouseEvent

The mouse event to handle.

KbqSelectError

componentСкопировать ссылку на KbqSelectError

This component renders the error for a Select component. The error message can be displayed in two visual variants: a default centered layout (when [paging] is falsy) or a variant with left‑aligned text suitable for pagination controls (when [paging] is truthy).

@Component({
selector: 'kbq-select-error, [kbq-select-error]',
exportAs: 'kbqSelectError'
})
class KbqSelectError {
readonly paging = input<boolean>(false);
}
paginginputСкопировать ссылку на pagingboolean

Indicates whether styles for pagination controls should be used.

KbqSelectLoading

componentСкопировать ссылку на KbqSelectLoading
@Component({
selector: 'kbq-select-loading, [kbq-select-loading]',
exportAs: 'kbqSelectLoading'
})
class KbqSelectLoading {}

KbqSelectNoOptions

componentСкопировать ссылку на KbqSelectNoOptions

Component that represents the empty state of a select dropdown.

@Component({
selector: 'kbq-select-no-options, [kbq-select-no-options]',
exportAs: 'kbqSelectNoOptions'
})
class KbqSelectNoOptions {}

KbqOptionTooltip

directiveСкопировать ссылку на KbqOptionTooltip
@Directive({ selector: 'kbq-option' })
class KbqOptionTooltip extends KbqTooltipTrigger {
readonly ignoreTooltipPointerEvents = input<boolean>(true);
readonly forDisabledComponent = input<Record<'disabledSignal', WritableSignal<boolean>>>();
readonly singleInstance = input<boolean>(
inject(KBQ_TOOLTIP_SINGLE_INSTANCE_DEFAULT),
{ alias: 'kbqTooltipSingleInstance' }
);
hideWithTimeout = input<boolean | undefined>();
get textElement(): HTMLElement;
get isOverflown(): boolean;
tooltipVisible: boolean;
tooltipPlacement: KbqPopUpPlacementValues;
relativeToPointer: boolean;
relativeToCaret: boolean;
relativeToCaretVertical: KbqCaretVerticalAnchor;
tooltipPlacementPriority: string | string[] | null;
content: string | TemplateRef<unknown>;
disabled: boolean;
enterDelay: number;
leaveDelay: number;
trigger: string;
customClass: string;
context: unknown;
color: KbqComponentColors | string;
arrow: boolean;
offset: number | null;
readonly placementChange: EventEmitter<KbqPopUpPlacementValues>;
readonly visibleChange: EventEmitter<boolean>;
modifier: KbqEnumValues<TooltipModifier>;
header: string | TemplateRef<unknown>;
isOpen: boolean;
get isAttached(): boolean;
get openedChange(): Observable<boolean>;
handleElementEnter(): void;
handleElementLeave(): void;
show(delay?: number): void;
hide(delay?: number): void;
showForMouseEvent(event: MouseEvent): void;
showForElement(element: HTMLElement): void;
updateOrigin(origin: KbqOverlayOrigin | null): void;
}
ignoreTooltipPointerEventsinputСкопировать ссылку на ignoreTooltipPointerEventsboolean

Overrides the tooltip's hoverable default. The overflow hint floats over the neighbouring options of a scrolling list, so a pointer-capturing pane would swallow the click that selects them.

forDisabledComponentinputСкопировать ссылку на forDisabledComponentRecord<'disabledSignal', WritableSignal<boolean>>

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.

kbqTooltipSingleInstanceinputСкопировать ссылку на kbqTooltipSingleInstanceboolean

Whether the tooltip takes part in the "only one tooltip is visible at a time" group: showing it hides the previously visible tooltip, and it is hidden when another tooltip is shown.

Defaults to true; the default can be changed application-wide with the KBQ_TOOLTIP_SINGLE_INSTANCE_DEFAULT token.

Tooltips without an interactive kbqTrigger (manual, none, …) never take part in the group, regardless of this input — they are shown imperatively and are expected to stay pinned.

hideWithTimeoutinputСкопировать ссылку на hideWithTimeoutboolean | undefined

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.

tooltipVisibleСкопировать ссылку на tooltipVisibleboolean

Input (kbqVisible) that programmatically shows or hides the tooltip; reflects the current visible state.

tooltipPlacementСкопировать ссылку на tooltipPlacementKbqPopUpPlacementValues

Input (kbqPlacement) that sets the tooltip placement relative to its trigger; reflects the current placement.

relativeToPointerСкопировать ссылку на relativeToPointerboolean

Positions the tooltip relative to the mouse cursor. Only available for top and bottom kbqPlacement. Does not work with kbqPlacementPriority.

relativeToCaretСкопировать ссылку на relativeToCaretboolean

Positions the tooltip relative to the text caret of the field it is attached to, following it while the user types, moves the caret and scrolls the field. Anchors to the selection whenever there is one.

Every placement is available, unlike with kbqRelativeToPointer: the caret is anchored as a rectangle, so the usual fallback placements keep the tooltip on screen. Wins when both inputs are enabled.

The field is the host element itself when it is editable, otherwise the first editable it wraps.

relativeToCaretVerticalСкопировать ссылку на relativeToCaretVerticalKbqCaretVerticalAnchor

What the tooltip is vertically anchored to while kbqRelativeToCaret is enabled.

tooltipPlacementPriorityСкопировать ссылку на tooltipPlacementPrioritystring | string[] | null

Input (kbqPlacementPriority) that sets the ordered fallback placements; reflects the current placementPriority.

contentСкопировать ссылку на contentstring | TemplateRef<unknown>

Input (kbqTooltip) with the tooltip content — a string or a template. Updating it refreshes an open tooltip.

disabledСкопировать ссылку на disabledboolean

Input (kbqTooltipDisabled) controlling whether the tooltip is disabled; setting it to true hides it. undefined leaves the decision to the trigger, like an unset input.

Reads back the effective state, which for triggers that derive one of their own (see derivedDisabledWins) is not necessarily the value that was written.

enterDelayСкопировать ссылку на enterDelaynumber

Input (kbqEnterDelay) — delay in milliseconds before the tooltip is shown. Defaults to 400.

leaveDelayСкопировать ссылку на leaveDelaynumber

Input (kbqLeaveDelay) — delay in milliseconds before the tooltip is hidden. Defaults to 0.

triggerСкопировать ссылку на triggerstring

Input (kbqTrigger) with the comma-separated trigger events. An empty value resets to hover + focus and rebinds listeners.

customClassСкопировать ссылку на customClassstring

Input (kbqTooltipClass) with an extra CSS class applied to the tooltip; updating it refreshes the class map.

contextСкопировать ссылку на contextunknown

Input (kbqTooltipContext) with the context object passed to a template tooltip; updating it refreshes the open tooltip.

colorСкопировать ссылку на colorKbqComponentColors | string

Input (kbqTooltipColor) with the tooltip color theme. Defaults to KbqComponentColors.Contrast.

arrowСкопировать ссылку на arrowboolean

Input (kbqTooltipArrow) — whether to render the tooltip's arrow/pointer. Defaults to false.

offsetСкопировать ссылку на offsetnumber | null

Input (kbqTooltipOffset) — distance in pixels between the tooltip and its trigger. null, the default, keeps the gap of the stylesheet.

placementChangeСкопировать ссылку на placementChangeEventEmitter<KbqPopUpPlacementValues>

Output (kbqPlacementChange) that emits the new placement whenever the tooltip repositions.

visibleChangeСкопировать ссылку на visibleChangeEventEmitter<boolean>

Output (kbqVisibleChange) that emits when the tooltip's visibility changes.

modifierСкопировать ссылку на modifierKbqEnumValues<TooltipModifier>

Visual variant of the tooltip. Accepts 'default' | 'warning' | 'extended'. Replaces the removed KbqWarningTooltipTrigger and KbqExtendedTooltipTrigger subclasses — to render a warning tooltip use kbqTooltipModifier="warning", and kbqTooltipModifier="extended" for the extended variant (combine with kbqTooltipHeader).

headerСкопировать ссылку на headerstring | TemplateRef<unknown>

Header text or template, rendered above the tooltip content. Only meaningful with kbqTooltipModifier="extended". Replaces the removed KbqExtendedTooltipTrigger.header.

isOpenСкопировать ссылку на isOpenboolean

Whether the pop-up overlay is currently open.

isAttachedСкопировать ссылку на isAttachedboolean

Whether the pop-up overlay is currently attached.

Unlike isOpen, which follows the visibility of the pop-up component and therefore lags a task behind show()/hide(), this flips synchronously — it is the window during which the overlay (and its backdrop) is present in the DOM. Part of the KbqSiblingPopup contract.

openedChangeСкопировать ссылку на openedChangeObservable<boolean>

Emits true when the pop-up opens and false when it closes. Part of the KbqSiblingPopup contract.

show()Скопировать ссылку на show()void

Shows the tooltip after delay ms. Suppresses showing while a pop-up on the same element holds the anchor or on a focus trigger that did not originate from the keyboard, and applies cursor-relative positioning when relativeToPointer is enabled.

hide()Скопировать ссылку на hide()void

Hides the tooltip after delay ms and, when the user has genuinely left the host, un-mutes a tooltip that a pop-up on the same element had muted.

mouseleave and blur are the release signals because the base class binds hide to both regardless of whether the tooltip is currently visible. A pop-up that is still attached does not count: its backdrop steals the hover from the trigger while the pointer stands still, and that mouseleave must not be mistaken for the user leaving.

showForMouseEvent()Скопировать ссылку на showForMouseEvent()void

Shows the tooltip next to the cursor position of the given mouse event, anchoring it to the event's currentTarget instead of the directive's own host element.

Use it when the trigger cannot be declared in the template — for instance for a tooltip shared by the cells of a virtualized table. The directive still has to be created in an injection context.

showForElement()Скопировать ссылку на showForElement()void

Shows the tooltip anchored to the given element instead of the directive's own host element.

Use it when the trigger cannot be declared in the template. The directive still has to be created in an injection context:

const tooltip = runInInjectionContext(injector, () => new KbqTooltipTrigger());
tooltip.showForElement(element);

Does nothing while the tooltip is disabled or has no content — there is no overlay to anchor then.

updateOrigin()Скопировать ссылку на updateOrigin()void

Positions the pop-up against origin — an element, or a rectangle in viewport coordinates such as the one kbqCreateCaretOrigin keeps on the caret — instead of the host element; null restores the host element. An open pop-up moves to the new origin at once.

This moves the position origin only. setExternalNativeElement moves the host itself, and with it the trigger's event listeners, its focus target and the scroll containers the pop-up follows.

KbqSelectErrorText

directiveСкопировать ссылку на KbqSelectErrorText

Marks an element as the error text container for a KbqSelect component.

@Directive({
selector: '[kbq-select-error-text]',
exportAs: 'kbqSelectErrorText'
})
class KbqSelectErrorText {}

KbqSelectChange

classСкопировать ссылку на KbqSelectChange

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

class KbqSelectChange {
source: KbqSelect;
value: any;
constructor(source: KbqSelect, value: any);
}

KbqSelectMatcherMeasurement

typeСкопировать ссылку на KbqSelectMatcherMeasurement

Widths the matcher needs in order to work out how many of the selected tags actually fit.

type KbqSelectMatcherMeasurement = {
totalItemsWidth: number;
totalVisibleItemsWidth: number;
visibleItems: number;
};
totalItemsWidthСкопировать ссылку на totalItemsWidthnumber

Total width of the selected tags, laid out without the "+N" counter.

totalVisibleItemsWidthСкопировать ссылку на totalVisibleItemsWidthnumber

Total width of the tags that stay on the first line while the counter is shown.

visibleItemsСкопировать ссылку на visibleItemsnumber

How many tags stay on the first line while the counter is shown.

KbqSelectOptions

typeСкопировать ссылку на KbqSelectOptions

Options for the kbq-select that can be configured using the KBQ_SELECT_OPTIONS injection token.

type KbqSelectOptions = Partial<{
panelWidth: KbqPanelWidth;
panelMinWidth: KbqPanelMinWidth;
panelMaxWidth: KbqPanelMaxWidth;
panelMaxHeight: KbqPanelMaxHeight;
searchMinOptionsThreshold: 'auto' | number;
clearPredicate: (option: KbqOptionBase) => boolean;
}>;
panelWidthoptionalСкопировать ссылку на panelWidthKbqPanelWidth

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.

panelMinWidthoptionalСкопировать ссылку на panelMinWidthKbqPanelMinWidth

Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored.

panelMaxWidthoptionalСкопировать ссылку на panelMaxWidthKbqPanelMaxWidth

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.

panelMaxHeightoptionalСкопировать ссылку на panelMaxHeightKbqPanelMaxHeight

Maximum height of the panel's scrollable option list. Does not include the search field or the footer. If null, the --kbq-select-panel-size-max-height token applies.

searchMinOptionsThresholdoptionalСкопировать ссылку на searchMinOptionsThreshold'auto' | number

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.
clearPredicateoptionalСкопировать ссылку на clearPredicate(option: KbqOptionBase) => boolean

Decides which selected options the projected KbqCleaner removes. Disabled options are kept when this is not set. Overridden per instance by the clearPredicate attribute.

delayBeforeDisplayingResultWithoutOptions

constСкопировать ссылку на delayBeforeDisplayingResultWithoutOptions

Delay in milliseconds before displaying a result when there are no options.

const delayBeforeDisplayingResultWithoutOptions: number;

KBQ_SELECT_HIDDEN_TEXT_VISIBLE_CLASS

constСкопировать ссылку на KBQ_SELECT_HIDDEN_TEXT_VISIBLE_CLASS

Class that reveals the "+N" counter the matcher reserves room for.

const KBQ_SELECT_HIDDEN_TEXT_VISIBLE_CLASS: string;

KBQ_SELECT_OPTIONS

constСкопировать ссылку на KBQ_SELECT_OPTIONS

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

const KBQ_SELECT_OPTIONS: InjectionToken<KbqSelectOptions>;

kbqSelectOptionsProvider

constСкопировать ссылку на kbqSelectOptionsProvider

Utility provider for KBQ_SELECT_OPTIONS.

const kbqSelectOptionsProvider: (options: KbqSelectOptions) => Provider;

minimumTimeToDisplayLoading

constСкопировать ссылку на minimumTimeToDisplayLoading

Minimum time in milliseconds to display the loading state.

const minimumTimeToDisplayLoading: number;
Предложения по улучшению
Если вы нашли ошибку или хотите доработать статью, создайте запрос на GitHub.