@ng-select/ng-select

import * as _angular_core from '@angular/core'; import { OnInit, ElementRef, OnChanges, AfterViewInit, TemplateRef, SimpleChanges, InjectionToken } from '@angular/core'; import { OverlayRef } from '@angular/cdk/overlay'; import { ControlValueAccessor } from '@angular/forms'; import { Subject } from 'rxjs'; /** Configuration provider for the NgSelect component. You can inject this service and provide application wide configuration. */ declare class NgSelectConfig { /** Placeholder text. */ placeholder: string; /** Set placeholder visible even when an item is selected. */ fixedPlaceholder: boolean; /** Set custom text when filter returns empty result. */ notFoundText: string; /** Set custom text when using Typeahead. */ typeToSearchText: string; /** Set custom text when using tagging. */ addTagText: string; /** Set custom text when loading items. */ loadingText: string; /** Set custom text for clear all icon title. */ clearAllText: string; /** Set custom text prefixed to the option label in the aria-label of the remove icon on selected values (multiple mode). */ removeText: string; /** Set custom aria-label for the dropdown options list. */ ariaLabelDropdown: string; /** Disable virtual scroll for the dropdown panel. */ disableVirtualScroll: boolean; /** Open dropdown using enter. */ openOnEnter: boolean; /** Append the dropdown overlay of every select to any element using a css selector. Painting and positioning are unaffected; the target determines DOM containment (ancestor-scoped styles, focus enclosure). */ appendTo: string; /** Object property to use for selected model. By default binds to whole object. */ bindValue: string; /** Object property to use for label. */ bindLabel: string; /** Allows to select dropdown appearance. Set to `outline` or `fill` for Material form-field styles (applies only to Material theme). */ appearance: string; /** Clears search input when item is selected. */ clearSearchOnAdd: boolean; /** Deselects a selected item when it is clicked in the dropdown. */ deselectOnClick: boolean; /** Control tab navigation behavior for the clear button. */ tabFocusOnClear: boolean; /** * Controls which DOM event is used to detect outside clicks for closing the dropdown. * Defaults to 'click'. Set to 'mousedown' to handle early outside interactions * (useful when backdrops load on click and would otherwise close the dropdown). */ outsideClickEvent: 'click' | 'mousedown'; static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgSelectConfig, never>; static ɵprov: _angular_core.ɵɵInjectableDeclaration<NgSelectConfig>; } interface NgOption { [name: string]: any; index?: number; htmlId?: string; selected?: boolean; disabled?: boolean; marked?: boolean; label?: string; value?: string | any; classes?: string; parent?: NgOption; children?: NgOption[]; } type DropdownPosition = 'top' | 'right' | 'bottom' | 'left' | 'auto'; type SelectionModelFactory = () => SelectionModel; declare function DefaultSelectionModelFactory(): DefaultSelectionModel; interface SelectionModel { value: NgOption[]; select(item: NgOption, multiple: boolean, selectableGroupAsModel: boolean): any; unselect(item: NgOption, multiple: boolean): any; clear(keepDisabled: boolean): any; } declare class DefaultSelectionModel implements SelectionModel { private _selected; get value(): NgOption[]; select(item: NgOption, multiple: boolean, groupAsModel: boolean): void; unselect(item: NgOption, multiple: boolean): void; clear(keepDisabled: boolean): void; private _setChildrenSelectedState; private _removeChildren; private _removeParent; private _activeChildren; } declare class ItemsList { private _ngSelect; private _selectionModel; private _groups; constructor(_ngSelect: NgSelectComponent, _selectionModel: SelectionModel); private _items; get items(): NgOption[]; private _filteredItems; get filteredItems(): NgOption[]; private _markedIndex; get markedIndex(): number; get selectedItems(): NgOption[]; get markedItem(): NgOption; get noItemsToSelect(): boolean; get maxItemsSelected(): boolean; get lastSelectedItem(): NgOption; setItems(items: readonly any[]): void; select(item: NgOption): void; unselect(item: NgOption): void; findItem(value: any): NgOption; addItem(item: any): NgOption; clearSelected(keepDisabled: boolean): void; findByLabel(term: string): NgOption; filter(term: string): void; resetFilteredItems(): void; unmarkItem(): void; markNextItem(): void; markPreviousItem(): void; markItem(item: NgOption): void; markSelectedOrDefault(markDefault?: boolean): void; resolveNested(option: any, key: string): any; mapItem(item: any, index: number): NgOption; mapSelectedItems(): void; private _showSelected; private _hideSelected; private _defaultSearchFn; private _getNextItemIndex; private _stepToItem; private _getLastMarkedIndex; /** * Index of the first selected, non-disabled option in filtered list order. * Per the WAI-ARIA listbox pattern, focus lands on the first selected option when the list opens. */ private _getFirstSelectedIndex; private _groupBy; private _flatten; } /** Declares an option for ng-select declared via HTML. Use the value input to bind the option's value and the element content as its label. */ declare class NgOptionComponent implements OnInit { /** Value bound to the option. The projected element content is used as the option's label. */ readonly value: _angular_core.InputSignal<any>; /** Whether the option is disabled and cannot be selected. */ readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>; readonly elementRef: ElementRef<any>; readonly label: _angular_core.WritableSignal<string>; readonly classes: _angular_core.WritableSignal<string>; /** True when this component's inputs are initialized (after first change detection). */ readonly isInitialized: _angular_core.WritableSignal<boolean>; constructor(); ngOnInit(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgOptionComponent, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOptionComponent, "ng-option", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>; } /** DI token for SelectionModel implementation. You can provide custom implementation changing selection behaviour. */ declare const SELECTION_MODEL_FACTORY: InjectionToken<SelectionModelFactory>; type AddTagFn = (term: string) => any | Promise<any>; type CompareWithFn = (a: any, b: any) => boolean; type GroupValueFn = (key: string | any, children: any[]) => string | any; declare class NgSelectComponent implements OnChanges, OnInit, AfterViewInit, ControlValueAccessor { readonly classes: string; readonly config: NgSelectConfig; readonly _disabled: _angular_core.WritableSignal<boolean>; readonly _ariaLabelDropdown: _angular_core.InputSignal<string>; readonly ariaLabelDropdown: _angular_core.WritableSignal<string>; readonly _ariaLabel: _angular_core.InputSignal<string>; readonly ariaLabel: _angular_core.WritableSignal<string>; /** Marks first item as focused when opening/filtering. */ readonly _markFirst: _angular_core.InputSignalWithTransform<boolean, unknown>; readonly markFirst: _angular_core.WritableSignal<boolean>; /** Placeholder text. */ readonly _placeholder: _angular_core.InputSignal<string>; readonly placeholder: _angular_core.WritableSignal<string>; /** Set placeholder visible even when an item is selected */ readonly _fixedPlaceholder: _angular_core.InputSignal<boolean>; readonly fixedPlaceholder: _angular_core.WritableSignal<boolean>; /** Set custom text when filter returns empty result */ readonly _notFoundText: _angular_core.InputSignal<string>; readonly notFoundText: _angular_core.WritableSignal<string>; /** Set custom text when using Typeahead */ readonly _typeToSearchText: _angular_core.InputSignal<string>; readonly typeToSearchText: _angular_core.WritableSignal<string>; /** Prevent opening of ng-select on right mouse click */ readonly _preventToggleOnRightClick: _angular_core.InputSignal<boolean>; readonly preventToggleOnRightClick: _angular_core.WritableSignal<boolean>; /** Set custom text when using tagging */ readonly _addTagText: _angular_core.InputSignal<string>; readonly addTagText: _angular_core.WritableSignal<string>; /** Set custom text when for loading items */ readonly _loadingText: _angular_core.InputSignal<string>; readonly loadingText: _angular_core.WritableSignal<string>; /** Set custom text for clear all icon title */ readonly _clearAllText: _angular_core.InputSignal<string>; readonly clearAllText: _angular_core.WritableSignal<string>; /** Set custom text prefixed to the option label in the aria-label of the remove icon on selected values (multiple mode) */ readonly _removeText: _angular_core.InputSignal<string>; readonly removeText: _angular_core.WritableSignal<string>; /** Set the dropdown position on open */ readonly _dropdownPosition: _angular_core.InputSignal<DropdownPosition>; readonly dropdownPosition: _angular_core.WritableSignal<DropdownPosition>; /** * Append the dropdown overlay to any element using a css selector, resolved against the * select's own root (document or shadow root). The panel keeps its viewport-based * positioning and top-layer painting; the target controls where the overlay lives in the * DOM — ancestor-scoped styles, stacking context and focus containment. Defaults to the * document body. */ readonly _appendTo: _angular_core.InputSignal<string>; readonly appendTo: _angular_core.WritableSignal<string>; /** Configure which DOM event type is used for outside click detection. Use `'mousedown'` to fix issues with backdrop/loading overlays that appear on dropdown open */ readonly _outsideClickEvent: _angular_core.InputSignal<"click" | "mousedown">; readonly outsideClickEvent: _angular_core.WritableSignal<"click" | "mousedown">; /** You can set the loading state from the outside (e.g. async items loading) */ readonly _loading: _angular_core.InputSignalWithTransform<boolean, unknown>; readonly loading: _angular_core.WritableSignal<boolean>; /** Whether to close the menu when a value is selected */ readonly _closeOnSelect: _angular_core.InputSignalWithTransform<boolean, unknown>; readonly closeOnSelect: _angular_core.WritableSignal<boolean>; /** Allows to hide selected items. */ readonly _hideSelected: _angular_core.InputSignalWithTransform<boolean, unknown>; readonly hideSelected: _angular_core.WritableSignal<boolean>; /** Select marked dropdown item using tab. Default `false` */ readonly _selectOnTab: _angular_core.InputSignalWithTransform<boolean, unknown>; readonly selectOnTab: _angular_core.WritableSignal<boolean>; /** Open dropdown using enter. Default `true` */ readonly _openOnEnter: _angular_core.InputSignalWithTransform<boolean, unknown>; readonly openOnEnter: _angular_core.WritableSignal<boolean>; /** When multiple = true, allows to set a limit number of selection. */ readonly _maxSelectedItems: _angular_core.InputSignalWithTransform<number, unknown>; readonly maxSelectedItems: _angular_core.WritableSignal<number>; /** Allow to group items by key or function expression */ readonly _groupBy: _angular_core.InputSignal<string | ((value: any) => any)>; readonly groupBy: _angular_core.WritableSignal<string | ((value: any) => any)>; /** Function expression to provide group value */ readonly _groupValue: _angular_core.InputSignal<GroupValueFn>; readonly groupValue: _angular_core.WritableSignal<GroupValueFn>; /** Used in virtual scrolling, the `bufferAmount` property controls the number of items preloaded in the background to ensure smoother and more seamless scrolling. */ readonly _bufferAmount: _angular_core.InputSignalWithTransform<number, unknown>; readonly bufferAmount: _angular_core.WritableSignal<number>; /** Enable virtual scroll for better performance when rendering a lot of data */ readonly _virtualScroll: _angular_core.InputSignalWithTransform<boolean, unknown>; readonly virtualScroll: _angular_core.WritableSignal<boolean>; readonly dropdownVirtualScroll: _angular_core.Signal<boolean>; /** Allow to select group when groupBy is used */ readonly _selectableGroup: _angular_core.InputSignalWithTransform<boolean, unknown>; readonly selectableGroup: _angular_core.WritableSignal<boolean>; /** Control tab navigation behavior for the clear button. Default `true` */ readonly _tabFocusOnClearButton: _angular_core.InputSignal<boolean>; readonly tabFocusOnClearButton: _angular_core.WritableSignal<boolean>; /** Indicates whether to select all children or group itself */ readonly _selectableGroupAsModel: _angular_core.InputSignalWithTransform<boolean, unknown>; readonly selectableGroupAsModel: _angular_core.WritableSignal<boolean>; /** Allow to filter by custom search function */ readonly _searchFn: _angular_core.InputSignal<any>; readonly searchFn: _angular_core.WritableSignal<any>; /** Provide custom trackBy function */ readonly _trackByFn: _angular_core.InputSignal<any>; readonly trackByFn: _angular_core.WritableSignal<any>; /** Clear selected values one by one when clicking backspace. Default `true` */ readonly _clearOnBackspace: _angular_core.InputSignalWithTransform<boolean, unknown>; readonly clearOnBackspace: _angular_core.WritableSignal<boolean>; /** Id to associate control with label. */ readonly _labelForId: _angular_core.InputSignal<any>; readonly labelForId: _angular_core.WritableSignal<any>; /** Pass custom attributes to underlying `input` element */ readonly _inputAttrs: _angular_core.InputSignal<Record<string, string>>; readonly inputAttrs: _angular_core.WritableSignal<Record<string, string>>; /** Set tabindex on ng-select */ readonly _tabIndex: _angular_core.InputSignalWithTransform<number, unknown>; readonly tabIndex: _angular_core.WritableSignal<number>; /** Set ng-select as readonly. Mostly used with reactive forms. */ readonly _readonly: _angular_core.InputSignalWithTransform<boolean, unknown>; readonly readonly: _angular_core.WritableSignal<boolean>; /** Whether items should be filtered while composition started */ readonly _searchWhileComposing: _angular_core.InputSignalWithTransform<boolean, unknown>; readonly searchWhileComposing: _angular_core.WritableSignal<boolean>; /** Minimum term length to start a search. Should be used with `typeahead` */ readonly _minTermLength: _angular_core.InputSignalWithTransform<number, unknown>; readonly minTermLength: _angular_core.WritableSignal<number>; /** Allow to edit search query if option selected. Default `false`. Works only if multiple is `false`. */ readonly _editableSearchTerm: _angular_core.InputSignalWithTransform<boolean, unknown>; readonly editableSearchTerm: _angular_core.WritableSignal<boolean>; readonly _ngClass: _angular_core.InputSignal<any>; readonly ngClass: _angular_core.WritableSignal<any>; /** Custom autocomplete or advanced filter. */ readonly _typeahead: _angular_core.InputSignal<Subject<string>>; readonly typeahead: _angular_core.WritableSignal<Subject<string>>; /** Allows to select multiple items. */ readonly _multiple: _angular_core.InputSignalWithTransform<boolean, unknown>; readonly multiple: _angular_core.WritableSignal<boolean>; /** Allows to create custom options. */ readonly _addTag: _angular_core.InputSignal<boolean | AddTagFn>; readonly addTag: _angular_core.WritableSignal<boolean | AddTagFn>; /** Allow to search for value. Default `true` */ readonly _searchable: _angular_core.InputSignalWithTransform<boolean, unknown>; readonly searchable: _angular_core.WritableSignal<boolean>; /** Allow to clear selected value. Default `true` */ readonly _clearable: _angular_core.InputSignalWithTransform<boolean, unknown>; readonly clearable: _angular_core.WritableSignal<boolean>; readonly _clearKeepsDisabledOptions: _angular_core.InputSignalWithTransform<boolean, unknown>; readonly clearKeepsDisabledOptions: _angular_core.WritableSignal<boolean>; /** Deselects a selected item when it is clicked in the dropdown. Default `false`. Default `true` when **multiple** is `true` */ readonly _deselectOnClick: _angular_core.InputSignal<boolean>; readonly deselectOnClick: _angular_core.WritableSignal<boolean>; /** Clears search input when item is selected. Default `true`. Default `false` when **closeOnSelect** is `false` */ readonly _clearSearchOnAdd: _angular_core.InputSignal<any>; readonly clearSearchOnAdd: _angular_core.WritableSignal<any>; /** A 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(model). A boolean should be returned. */ readonly _compareWith: _angular_core.InputSignalWithTransform<CompareWithFn, CompareWithFn>; readonly compareWith: _angular_core.WritableSignal<CompareWithFn>; /** Provide custom keyDown function. Executed before default handler. Return false to suppress execution of default key down handlers */ readonly _keyDownFn: _angular_core.InputSignal<(_: KeyboardEvent) => boolean>; readonly keyDownFn: _angular_core.WritableSignal<(_: KeyboardEvent) => boolean>; /** @deprecated Has no effect: the CDK overlay renders in the native Popover API top layer automatically in supporting browsers. Will be removed in a future major version. */ readonly _popover: _angular_core.InputSignalWithTransform<boolean, unknown>; /** @deprecated Has no effect: the CDK overlay renders in the native Popover API top layer automatically in supporting browsers. Will be removed in a future major version. */ readonly popover: _angular_core.WritableSignal<boolean>; /** Object property to use for label. Default `label` */ readonly bindLabel: _angular_core.ModelSignal<string>; /** Object property to use for selected model. By default binds to whole object. */ readonly bindValue: _angular_core.ModelSignal<string>; /** Allows to select dropdown appearance. Set to `outline` or `fill` for Material form-field styles (applies only to Material theme) */ readonly appearance: _angular_core.ModelSignal<string>; /** Allows manual control of dropdown opening and closing. `true` - won't close. `false` - won't open. */ readonly isOpen: _angular_core.ModelSignal<boolean>; /** Items array */ readonly items: _angular_core.ModelSignal<readonly any[]>; /** Fired on select blur */ readonly blurEvent: _angular_core.OutputEmitterRef<any>; /** Fired on select focus */ readonly focusEvent: _angular_core.OutputEmitterRef<any>; /** Fired on model change. Outputs whole model */ readonly changeEvent: _angular_core.OutputEmitterRef<any>; /** Fired on select dropdown open */ readonly openEvent: _angular_core.OutputEmitterRef<void>; /** Fired on select dropdown close */ readonly closeEvent: _angular_core.OutputEmitterRef<void>; /** Fired while typing search term. Outputs search term with filtered items */ readonly searchEvent: _angular_core.OutputEmitterRef<{ term: string; items: any[]; }>; /** Fired on clear icon click */ readonly clearEvent: _angular_core.OutputEmitterRef<void>; /** Fired when item is added while `[multiple]="true"`. Outputs added item */ readonly addEvent: _angular_core.OutputEmitterRef<any>; /** Fired when item is removed while `[multiple]="true"` */ readonly removeEvent: _angular_core.OutputEmitterRef<any>; /** Fired when scrolled (only when `[virtualScroll]="true"`). Provides the start and end index of the currently available items. Can be used for loading more items in chunks before the user has scrolled all the way to the bottom of the list. */ readonly scroll: _angular_core.OutputEmitterRef<{ start: number; end: number; }>; /** Fired when scrolled to the end of items. Can be used for loading more items in chunks. */ readonly scrollToEnd: _angular_core.OutputEmitterRef<any>; readonly disabled: _angular_core.Signal<boolean>; readonly clearSearchOnAddValue: _angular_core.Signal<any>; readonly deselectOnClickValue: _angular_core.Signal<boolean>; readonly optionTemplate: _angular_core.Signal<TemplateRef<any>>; readonly optgroupTemplate: _angular_core.Signal<TemplateRef<any>>; readonly labelTemplate: _angular_core.Signal<TemplateRef<any>>; readonly multiLabelTemplate: _angular_core.Signal<TemplateRef<any>>; readonly headerTemplate: _angular_core.Signal<TemplateRef<any>>; readonly footerTemplate: _angular_core.Signal<TemplateRef<any>>; readonly notFoundTemplate: _angular_core.Signal<TemplateRef<any>>; readonly placeholderTemplate: _angular_core.Signal<TemplateRef<any>>; readonly typeToSearchTemplate: _angular_core.Signal<TemplateRef<any>>; readonly loadingTextTemplate: _angular_core.Signal<TemplateRef<any>>; readonly tagTemplate: _angular_core.Signal<TemplateRef<any>>; readonly loadingSpinnerTemplate: _angular_core.Signal<TemplateRef<any>>; readonly clearButtonTemplate: _angular_core.Signal<TemplateRef<any>>; readonly ngOptions: _angular_core.Signal<readonly NgOptionComponent[]>; readonly dropdownPanel: _angular_core.Signal<any>; readonly searchInput: _angular_core.Signal<ElementRef<HTMLInputElement>>; readonly clearButton: _angular_core.Signal<ElementRef<HTMLSpanElement>>; private readonly _dropdownTemplate; private readonly _dropdownOutlet; private readonly _selectContainer; readonly dropdownId: string; readonly element: HTMLElement; /** Width of the notched-outline gap for the floated label in the material outline appearance */ readonly outlineNotchWidth: _angular_core.WritableSignal<number>; itemsList: ItemsList; viewPortItems: NgOption[]; tabFocusOnClear: _angular_core.WritableSignal<boolean>; private readonly _cd; private readonly _console; private readonly _destroyRef; private readonly autoFocus; /** Overlay hosting the dropdown panel while open. Bound into the panel so it can request repositioning. */ protected dropdownOverlayRef: OverlayRef | null; private readonly _defaultLabel; private readonly _editableSearchTermActive; private readonly _document; private _dropdownPositionStrategy; private _dropdownPortal; /** `appendTo` value the current overlay was created against; a change rebuilds the overlay. */ private _overlayAppendTo; /** Overlay container placed inside the `appendTo` host for browsers without the Popover API. */ private _appendToContainer; private _injector; private _isComposing; private _itemsAreUsed; private readonly _keyPress$; private _manualOpen; private _pressedKeys; private _primitive; private readonly _searchTerm; private readonly _validTerm; constructor(); /** * Measures the placeholder label so the notched outline can leave a real gap in the border * for the floated label instead of masking it with an opaque background (material theme). * The 0.75 factor matches the `scale(0.75)` the material theme applies to the floated label. */ private _measureOutlineNotch; private _focused; get focused(): boolean; get filtered(): boolean; get searchTerm(): string; get selectedItems(): NgOption[]; get selectedValues(): any[]; get hasValue(): boolean; get currentPanelPosition(): DropdownPosition; get showAddTag(): boolean; clearItem: (item: any) => void; ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; ngAfterViewInit(): void; handleKeyDown($event: KeyboardEvent): void; handleKeyCode($event: KeyboardEvent): void; handleKeyCodeInput($event: KeyboardEvent): void; handleKeyCodeClear($event: KeyboardEvent): void; handleRemoveKeydown($event: KeyboardEvent, item: NgOption): void; handleMousedown($event: MouseEvent): boolean; handleArrowClick(): void; handleClearClick(_event?: MouseEvent): void; clearModel(): void; writeValue(value: any | any[]): void; registerOnChange(fn: any): void; registerOnTouched(fn: any): void; setDisabledState(state: boolean): void; toggle(): void; /** Opens the select dropdown panel */ open(): void; /** Closes the select dropdown panel */ close(): void; toggleItem(item: NgOption): void; select(item: NgOption): void; /** Focuses the select element */ focus(): void; /** Blurs the select element */ blur(): void; unselect(item: NgOption): void; selectTag(): void; showClear(): boolean; focusOnClear(): void; trackByOption: (_: number, item: NgOption) => any; showNoItemsFound(): boolean; showTypeToSearch(): boolean; onCompositionStart(): void; onCompositionEnd(term: string): void; filter(term: string): void; onInputFocus($event: FocusEvent): void; onInputBlur($event: FocusEvent): void; onItemHover(item: NgOption): void; detectChanges(): void; private _onChange; private _onTouched; private _handleSignalChanges; private _setSearchTermFromItems; private _setItems; private _setItemsFromNgOptions; private _isValidWriteValue; private _handleWriteValue; private _handleKeyPresses; private _setInputAttributes; private _setTabFocusOnClear; private _updateNgModel; private _clearSearch; private _changeSearch; private _scrollToMarked; private _scrollToTag; private _onSelectionChanged; /** Attaches or detaches the dropdown overlay to match the current open state. Idempotent. */ private _syncDropdownOverlay; /** * Creates the overlay on first open and (re)attaches the dropdown template to it. * The panel always renders in the CDK overlay; `dropdownPosition` maps onto connected * positions, with `auto` falling back to the opposite side when space runs out. */ private _openDropdownOverlay; /** * The dropdown anchors to the `.ng-select-container` box, not the host: themes may pad * the host below the container (material reserves 1.25em of subscript space under the * underline), and the panel must sit flush against the visible field — the same anchor * the pre-overlay `appendTo` positioning used. */ private _dropdownOrigin; private _ensureDropdownOverlay; private _destroyDropdownOverlay; /** Resolves the `appendTo` selector against the select's own root, so a select inside a shadow root finds hosts in that same root. */ private _resolveAppendToHost; private _warnDeprecatedInputs; private _handleTab; private _handleEnter; private _handleSpace; private _handleArrowDown; private _handleArrowUp; private _nextItemIsTag; private _handleBackspace; private _mergeGlobalConfig; /** * Gets virtual scroll value from input or from config * * @param config NgSelectConfig object * * @returns `true` if virtual scroll is enabled, `false` otherwise */ private getVirtualScroll; /** * Gets disableVirtualScroll value from input or from config * * @param config NgSelectConfig object * * @returns `true` if disableVirtualScroll is enabled, `false` otherwise */ private isVirtualScrollDisabled; static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgSelectComponent, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgSelectComponent, "ng-select", ["ngSelect"], { "_ariaLabelDropdown": { "alias": "ariaLabelDropdown"; "required": false; "isSignal": true; }; "_ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "_markFirst": { "alias": "markFirst"; "required": false; "isSignal": true; }; "_placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "_fixedPlaceholder": { "alias": "fixedPlaceholder"; "required": false; "isSignal": true; }; "_notFoundText": { "alias": "notFoundText"; "required": false; "isSignal": true; }; "_typeToSearchText": { "alias": "typeToSearchText"; "required": false; "isSignal": true; }; "_preventToggleOnRightClick": { "alias": "preventToggleOnRightClick"; "required": false; "isSignal": true; }; "_addTagText": { "alias": "addTagText"; "required": false; "isSignal": true; }; "_loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "_clearAllText": { "alias": "clearAllText"; "required": false; "isSignal": true; }; "_removeText": { "alias": "removeText"; "required": false; "isSignal": true; }; "_dropdownPosition": { "alias": "dropdownPosition"; "required": false; "isSignal": true; }; "_appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "_outsideClickEvent": { "alias": "outsideClickEvent"; "required": false; "isSignal": true; }; "_loading": { "alias": "loading"; "required": false; "isSignal": true; }; "_closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "_hideSelected": { "alias": "hideSelected"; "required": false; "isSignal": true; }; "_selectOnTab": { "alias": "selectOnTab"; "required": false; "isSignal": true; }; "_openOnEnter": { "alias": "openOnEnter"; "required": false; "isSignal": true; }; "_maxSelectedItems": { "alias": "maxSelectedItems"; "required": false; "isSignal": true; }; "_groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "_groupValue": { "alias": "groupValue"; "required": false; "isSignal": true; }; "_bufferAmount": { "alias": "bufferAmount"; "required": false; "isSignal": true; }; "_virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "_selectableGroup": { "alias": "selectableGroup"; "required": false; "isSignal": true; }; "_tabFocusOnClearButton": { "alias": "tabFocusOnClearButton"; "required": false; "isSignal": true; }; "_selectableGroupAsModel": { "alias": "selectableGroupAsModel"; "required": false; "isSignal": true; }; "_searchFn": { "alias": "searchFn"; "required": false; "isSignal": true; }; "_trackByFn": { "alias": "trackByFn"; "required": false; "isSignal": true; }; "_clearOnBackspace": { "alias": "clearOnBackspace"; "required": false; "isSignal": true; }; "_labelForId": { "alias": "labelForId"; "required": false; "isSignal": true; }; "_inputAttrs": { "alias": "inputAttrs"; "required": false; "isSignal": true; }; "_tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "_readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "_searchWhileComposing": { "alias": "searchWhileComposing"; "required": false; "isSignal": true; }; "_minTermLength": { "alias": "minTermLength"; "required": false; "isSignal": true; }; "_editableSearchTerm": { "alias": "editableSearchTerm"; "required": false; "isSignal": true; }; "_ngClass": { "alias": "ngClass"; "required": false; "isSignal": true; }; "_typeahead": { "alias": "typeahead"; "required": false; "isSignal": true; }; "_multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "_addTag": { "alias": "addTag"; "required": false; "isSignal": true; }; "_searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "_clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "_clearKeepsDisabledOptions": { "alias": "clearKeepsDisabledOptions"; "required": false; "isSignal": true; }; "_deselectOnClick": { "alias": "deselectOnClick"; "required": false; "isSignal": true; }; "_clearSearchOnAdd": { "alias": "clearSearchOnAdd"; "required": false; "isSignal": true; }; "_compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "_keyDownFn": { "alias": "keyDownFn"; "required": false; "isSignal": true; }; "_popover": { "alias": "popover"; "required": false; "isSignal": true; }; "bindLabel": { "alias": "bindLabel"; "required": false; "isSignal": true; }; "bindValue": { "alias": "bindValue"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; }, { "bindLabel": "bindLabelChange"; "bindValue": "bindValueChange"; "appearance": "appearanceChange"; "isOpen": "isOpenChange"; "items": "itemsChange"; "blurEvent": "blur"; "focusEvent": "focus"; "changeEvent": "change"; "openEvent": "open"; "closeEvent": "close"; "searchEvent": "search"; "clearEvent": "clear"; "addEvent": "add"; "removeEvent": "remove"; "scroll": "scroll"; "scrollToEnd": "scrollToEnd"; }, ["optionTemplate", "optgroupTemplate", "labelTemplate", "multiLabelTemplate", "headerTemplate", "footerTemplate", "notFoundTemplate", "placeholderTemplate", "typeToSearchTemplate", "loadingTextTemplate", "tagTemplate", "loadingSpinnerTemplate", "clearButtonTemplate", "ngOptions"], never, true, never>; } declare class NgDropdownPanelComponent implements OnInit, OnChanges { readonly items: _angular_core.InputSignal<NgOption[]>; readonly showAddTag: _angular_core.InputSignalWithTransform<boolean, unknown>; readonly markedItem: _angular_core.InputSignal<NgOption>; readonly position: _angular_core.InputSignal<DropdownPosition>; readonly bufferAmount: _angular_core.InputSignal<number>; readonly virtualScroll: _angular_core.InputSignalWithTransform<boolean, unknown>; readonly headerTemplate: _angular_core.InputSignal<TemplateRef<any>>; readonly footerTemplate: _angular_core.InputSignal<TemplateRef<any>>; readonly filterValue: _angular_core.InputSignal<string>; readonly ariaLabelDropdown: _angular_core.InputSignal<string>; readonly listboxId: _angular_core.InputSignal<string>; /** * Which DOM event to listen to for outside click detection */ readonly outsideClickEvent: _angular_core.InputSignal<"click" | "mousedown">; /** @deprecated Has no effect: the CDK overlay renders in the native Popover API top layer automatically in supporting browsers. Will be removed in a future major version. */ readonly popover: _angular_core.InputSignalWithTransform<boolean, unknown>; /** Overlay hosting this panel. Used to request repositioning when the rendered content changes. */ readonly overlayRef: _angular_core.InputSignal<OverlayRef>; /** Host `ng-select` element. The panel's DOM lives in the overlay, so the host cannot be derived from the DOM tree. */ readonly selectElement: _angular_core.InputSignal<HTMLElement>; readonly update: _angular_core.OutputEmitterRef<any[]>; readonly scroll: _angular_core.OutputEmitterRef<{ start: number; end: number; }>; readonly scrollToEnd: _angular_core.OutputEmitterRef<void>; readonly outsideClick: _angular_core.OutputEmitterRef<void>; private _renderer; private _zone; private _panelService; private _document; private _destroyRef; private _dropdown; private readonly contentElementRef; private readonly scrollElementRef; private readonly paddingElementRef; private readonly _virtualPadding; private readonly _scrollablePanel; private readonly _contentPanel; private _select; private _scrollToEndFired; private _updateScrollHeight; private _lastScrollPosition; private _lastMousedownInside; private _currentPosition; get currentPosition(): DropdownPosition; private _itemsLength; private get itemsLength(); private set itemsLength(value); private get _startOffset(); ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; scrollTo(option: NgOption, startFromOption?: boolean): void; scrollToTag(): void; adjustPosition(): void; /** * Applies the position chosen by the overlay's position strategy to the panel and host * as `ng-select-top` / `ng-select-bottom` (and `-left` / `-right`) classes, which the * shipped themes use for borders, radius and spacing. */ private _setCurrentPosition; /** * Positions the freshly rendered panel. The overlay measures the real DOM, so header and * footer templates and the actual item count are part of the auto placement decision * (#2575). Only then is the panel made visible to avoid a flash at a stale position. */ private _positionDropdown; private _subscribeOverlayPosition; private _connectionPairToPosition; private _updateDropdownClass; private _handleScroll; private _handleOutsideClick; private _checkToClose; private _isEventInside; private _onItemsOrShowAddTagChange; private _updateItems; private _updateItemsRange; /** Updates cached panelHeight from the live scrollport, preserving row-height measurements. */ private _syncPanelHeightFromDom; private _onContentScrolled; private _updateVirtualHeight; private _setVirtualHeight; private _onItemsLengthChanged; private _renderItemsRange; private _measureDimensions; private _readMeasuredDimensions; private _fireScrollToEnd; private _setupMousedownListener; private _handleDocumentScroll; private _handleSelectResize; static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDropdownPanelComponent, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDropdownPanelComponent, "ng-dropdown-panel", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "showAddTag": { "alias": "showAddTag"; "required": false; "isSignal": true; }; "markedItem": { "alias": "markedItem"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "bufferAmount": { "alias": "bufferAmount"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; "isSignal": true; }; "footerTemplate": { "alias": "footerTemplate"; "required": false; "isSignal": true; }; "filterValue": { "alias": "filterValue"; "required": false; "isSignal": true; }; "ariaLabelDropdown": { "alias": "ariaLabelDropdown"; "required": false; "isSignal": true; }; "listboxId": { "alias": "listboxId"; "required": false; "isSignal": true; }; "outsideClickEvent": { "alias": "outsideClickEvent"; "required": false; "isSignal": true; }; "popover": { "alias": "popover"; "required": false; "isSignal": true; }; "overlayRef": { "alias": "overlayRef"; "required": false; "isSignal": true; }; "selectElement": { "alias": "selectElement"; "required": false; "isSignal": true; }; }, { "update": "update"; "scroll": "scroll"; "scrollToEnd": "scrollToEnd"; "outsideClick": "outsideClick"; }, never, ["*"], true, never>; } /** * @deprecated Default labels are plain text via interpolation. Prefer `{{ label }}` or * custom templates (`ng-label-tmp` / `ng-option-tmp`) for rich markup. Kept for public API * compatibility; always writes `textContent` (the `escape` input is ignored). */ declare class NgItemLabelDirective { private element; ngItemLabel: _angular_core.InputSignal<string>; /** @deprecated Ignored — labels are always written as text. */ escape: _angular_core.InputSignal<boolean>; constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgItemLabelDirective, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgItemLabelDirective, "[ngItemLabel]", never, { "ngItemLabel": { "alias": "ngItemLabel"; "required": false; "isSignal": true; }; "escape": { "alias": "escape"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } declare class NgOptionTemplateDirective { readonly template: TemplateRef<any>; static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgOptionTemplateDirective, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgOptionTemplateDirective, "[ng-option-tmp]", never, {}, {}, never, never, true, never>; } declare class NgOptgroupTemplateDirective { readonly template: TemplateRef<any>; static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgOptgroupTemplateDirective, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgOptgroupTemplateDirective, "[ng-optgroup-tmp]", never, {}, {}, never, never, true, never>; } declare class NgLabelTemplateDirective { readonly template: TemplateRef<any>; static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgLabelTemplateDirective, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgLabelTemplateDirective, "[ng-label-tmp]", never, {}, {}, never, never, true, never>; } declare class NgMultiLabelTemplateDirective { readonly template: TemplateRef<any>; static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgMultiLabelTemplateDirective, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgMultiLabelTemplateDirective, "[ng-multi-label-tmp]", never, {}, {}, never, never, true, never>; } declare class NgHeaderTemplateDirective { readonly template: TemplateRef<any>; static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgHeaderTemplateDirective, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgHeaderTemplateDirective, "[ng-header-tmp]", never, {}, {}, never, never, true, never>; } declare class NgFooterTemplateDirective { readonly template: TemplateRef<any>; static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgFooterTemplateDirective, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgFooterTemplateDirective, "[ng-footer-tmp]", never, {}, {}, never, never, true, never>; } declare class NgNotFoundTemplateDirective { readonly template: TemplateRef<any>; static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgNotFoundTemplateDirective, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgNotFoundTemplateDirective, "[ng-notfound-tmp]", never, {}, {}, never, never, true, never>; } declare class NgPlaceholderTemplateDirective { readonly template: TemplateRef<any>; static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgPlaceholderTemplateDirective, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgPlaceholderTemplateDirective, "[ng-placeholder-tmp]", never, {}, {}, never, never, true, never>; } declare class NgTypeToSearchTemplateDirective { readonly template: TemplateRef<any>; static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgTypeToSearchTemplateDirective, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgTypeToSearchTemplateDirective, "[ng-typetosearch-tmp]", never, {}, {}, never, never, true, never>; } declare class NgLoadingTextTemplateDirective { readonly template: TemplateRef<any>; static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgLoadingTextTemplateDirective, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgLoadingTextTemplateDirective, "[ng-loadingtext-tmp]", never, {}, {}, never, never, true, never>; } declare class NgTagTemplateDirective { readonly template: TemplateRef<any>; static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgTagTemplateDirective, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgTagTemplateDirective, "[ng-tag-tmp]", never, {}, {}, never, never, true, never>; } declare class NgLoadingSpinnerTemplateDirective { readonly template: TemplateRef<any>; static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgLoadingSpinnerTemplateDirective, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgLoadingSpinnerTemplateDirective, "[ng-loadingspinner-tmp]", never, {}, {}, never, never, true, never>; } declare class NgClearButtonTemplateDirective { readonly template: TemplateRef<any>; static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgClearButtonTemplateDirective, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgClearButtonTemplateDirective, "[ng-clearbutton-tmp]", never, {}, {}, never, never, true, never>; } declare class NgSelectModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgSelectModule, never>; static ɵmod: _angular_core.ɵɵNgModuleDeclaration<NgSelectModule, never, [typeof NgDropdownPanelComponent, typeof NgOptionComponent, typeof NgSelectComponent, typeof NgOptgroupTemplateDirective, typeof NgOptionTemplateDirective, typeof NgLabelTemplateDirective, typeof NgMultiLabelTemplateDirective, typeof NgHeaderTemplateDirective, typeof NgFooterTemplateDirective, typeof NgPlaceholderTemplateDirective, typeof NgClearButtonTemplateDirective, typeof NgNotFoundTemplateDirective, typeof NgTypeToSearchTemplateDirective, typeof NgLoadingTextTemplateDirective, typeof NgTagTemplateDirective, typeof NgLoadingSpinnerTemplateDirective, typeof NgItemLabelDirective], [typeof NgSelectComponent, typeof NgOptionComponent, typeof NgOptgroupTemplateDirective, typeof NgOptionTemplateDirective, typeof NgLabelTemplateDirective, typeof NgMultiLabelTemplateDirective, typeof NgHeaderTemplateDirective, typeof NgFooterTemplateDirective, typeof NgPlaceholderTemplateDirective, typeof NgNotFoundTemplateDirective, typeof NgTypeToSearchTemplateDirective, typeof NgLoadingTextTemplateDirective, typeof NgTagTemplateDirective, typeof NgLoadingSpinnerTemplateDirective, typeof NgClearButtonTemplateDirective]>; static ɵinj: _angular_core.ɵɵInjectorDeclaration<NgSelectModule>; } declare class ConsoleService { warn(message: string): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration<ConsoleService, never>; static ɵprov: _angular_core.ɵɵInjectableDeclaration<ConsoleService>; } interface ItemsRangeResult { scrollHeight: number; topPadding: number; start: number; end: number; } interface PanelDimensions { /** Height of a regular option row (non-group). */ itemHeight: number; /** Height of a group header row. Falls back to itemHeight when unset/equal. */ groupHeight: number; panelHeight: number; itemsPerViewport: number; } /** Minimal shape needed to distinguish group headers from options. */ interface VirtualScrollItem { children?: unknown; } declare class NgDropdownPanelService { private _dimensions; get dimensions(): PanelDimensions; calculateItems(scrollPos: number, itemsLength: number, buffer: number, items?: readonly VirtualScrollItem[]): ItemsRangeResult; setDimensions(itemHeight: number, panelHeight: number, groupHeight?: number): void; getItemHeight(item: VirtualScrollItem | null | undefined): number; getItemOffset(items: readonly VirtualScrollItem[], index: number): number; getScrollHeight(items: readonly VirtualScrollItem[]): number; getScrollTo(itemTop: number, itemHeight: number, lastScroll: number): number; private _calculateItemsVariable; static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDropdownPanelService, never>; static ɵprov: _angular_core.ɵɵInjectableDeclaration<NgDropdownPanelService>; } export { ConsoleService, DefaultSelectionModel, DefaultSelectionModelFactory, NgClearButtonTemplateDirective, NgDropdownPanelComponent, NgDropdownPanelService, NgFooterTemplateDirective, NgHeaderTemplateDirective, NgItemLabelDirective, NgLabelTemplateDirective, NgLoadingSpinnerTemplateDirective, NgLoadingTextTemplateDirective, NgMultiLabelTemplateDirective, NgNotFoundTemplateDirective, NgOptgroupTemplateDirective, NgOptionComponent, NgOptionTemplateDirective, NgPlaceholderTemplateDirective, NgSelectComponent, NgSelectConfig, NgSelectModule, NgTagTemplateDirective, NgTypeToSearchTemplateDirective, SELECTION_MODEL_FACTORY }; export type { DropdownPosition, NgOption, SelectionModel };