@ng-select/ng-select 20.4.4 → 20.6.0

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { ElementRef, OnDestroy, OnChanges, OnInit, AfterViewInit, TemplateRef, SimpleChanges, InjectionToken } from '@angular/core';
+import { ElementRef, OnChanges, OnInit, AfterViewInit, TemplateRef, SimpleChanges, InjectionToken } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { Subject } from 'rxjs';
 
@@ -20,6 +20,12 @@ declare class NgSelectConfig {
     clearSearchOnAdd: boolean;
     deselectOnClick: boolean;
     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>;
 }
@@ -115,11 +121,12 @@ 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 OnDestroy, OnChanges, OnInit, AfterViewInit, ControlValueAccessor {
+declare class NgSelectComponent implements OnChanges, OnInit, AfterViewInit, ControlValueAccessor {
     readonly classes: string;
     readonly config: NgSelectConfig;
     private readonly _cd;
     private readonly _console;
+    private readonly _destroyRef;
     readonly _disabled: _angular_core.WritableSignal<boolean>;
     readonly ariaLabelDropdown: _angular_core.InputSignal<string>;
     readonly ariaLabel: _angular_core.InputSignal<string>;
@@ -134,6 +141,7 @@ declare class NgSelectComponent implements OnDestroy, OnChanges, OnInit, AfterVi
     readonly clearAllText: _angular_core.InputSignal<string>;
     readonly dropdownPosition: _angular_core.InputSignal<DropdownPosition>;
     readonly appendTo: _angular_core.InputSignal<string>;
+    readonly outsideClickEvent: _angular_core.InputSignal<"click" | "mousedown">;
     readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly closeOnSelect: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly hideSelected: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -219,7 +227,6 @@ declare class NgSelectComponent implements OnDestroy, OnChanges, OnInit, AfterVi
     tabFocusOnClear: _angular_core.WritableSignal<boolean>;
     private readonly autoFocus;
     private readonly _defaultLabel;
-    private readonly _destroy$;
     private readonly _editableSearchTerm;
     private _focused;
     private _injector;
@@ -244,7 +251,6 @@ declare class NgSelectComponent implements OnDestroy, OnChanges, OnInit, AfterVi
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
-    ngOnDestroy(): void;
     handleKeyDown($event: KeyboardEvent): void;
     handleKeyCode($event: KeyboardEvent): void;
     handleKeyCodeInput($event: KeyboardEvent): void;
@@ -319,14 +325,15 @@ declare class NgSelectComponent implements OnDestroy, OnChanges, OnInit, AfterVi
      */
     private isVirtualScrollDisabled;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgSelectComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgSelectComponent, "ng-select", never, { "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; }; "dropdownPosition": { "alias": "dropdownPosition"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "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; }; "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; }; "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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgSelectComponent, "ng-select", never, { "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; }; "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; }; "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; }; "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, OnDestroy {
+declare class NgDropdownPanelComponent implements OnInit, OnChanges {
     private _renderer;
     private _zone;
     private _panelService;
     private _document;
+    private _destroyRef;
     private _dropdown;
     readonly items: _angular_core.InputSignal<NgOption[]>;
     readonly markedItem: _angular_core.InputSignal<NgOption>;
@@ -338,6 +345,10 @@ declare class NgDropdownPanelComponent implements OnInit, OnChanges, OnDestroy {
     readonly footerTemplate: _angular_core.InputSignal<TemplateRef<any>>;
     readonly filterValue: _angular_core.InputSignal<string>;
     readonly ariaLabelDropdown: _angular_core.InputSignal<string>;
+    /**
+     * Which DOM event to listen to for outside click detection
+     */
+    readonly outsideClickEvent: _angular_core.InputSignal<"click" | "mousedown">;
     readonly update: _angular_core.OutputEmitterRef<any[]>;
     readonly scroll: _angular_core.OutputEmitterRef<{
         start: number;
@@ -348,7 +359,6 @@ declare class NgDropdownPanelComponent implements OnInit, OnChanges, OnDestroy {
     private readonly contentElementRef;
     private readonly scrollElementRef;
     private readonly paddingElementRef;
-    private readonly _destroy$;
     private readonly _virtualPadding;
     private readonly _scrollablePanel;
     private readonly _contentPanel;
@@ -363,9 +373,9 @@ declare class NgDropdownPanelComponent implements OnInit, OnChanges, OnDestroy {
     private get itemsLength();
     private set itemsLength(value);
     private get _startOffset();
+    constructor();
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
-    ngOnDestroy(): void;
     scrollTo(option: NgOption, startFromOption?: boolean): void;
     scrollToTag(): void;
     adjustPosition(): void;
@@ -390,7 +400,7 @@ declare class NgDropdownPanelComponent implements OnInit, OnChanges, OnDestroy {
     private _updateYPosition;
     private _setupMousedownListener;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDropdownPanelComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDropdownPanelComponent, "ng-dropdown-panel", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "markedItem": { "alias": "markedItem"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "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; }; }, { "update": "update"; "scroll": "scroll"; "scrollToEnd": "scrollToEnd"; "outsideClick": "outsideClick"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDropdownPanelComponent, "ng-dropdown-panel", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "markedItem": { "alias": "markedItem"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "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; }; "outsideClickEvent": { "alias": "outsideClickEvent"; "required": false; "isSignal": true; }; }, { "update": "update"; "scroll": "scroll"; "scrollToEnd": "scrollToEnd"; "outsideClick": "outsideClick"; }, never, ["*"], true, never>;
 }
 
 declare class NgItemLabelDirective {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-select/ng-select",
-  "version": "20.4.4",
+  "version": "20.6.0",
   "description": "Angular ng-select - All in One UI Select, Multiselect and Autocomplete",
   "author": "@ng-select/ng-select",
   "license": "MIT",