@ng-select/ng-select 20.5.0 → 20.6.0

package/fesm2022/ng-select-ng-select.mjs

@@ -1,9 +1,10 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, effect, Directive, TemplateRef, Injectable, Renderer2, NgZone, booleanAttribute, output, viewChild, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, afterNextRender, InjectionToken, HostAttributeToken, ChangeDetectorRef, numberAttribute, model, contentChild, contentChildren, forwardRef, Injector, HostListener, NgModule } from '@angular/core';
+import { inject, ElementRef, input, effect, Directive, TemplateRef, Injectable, Renderer2, NgZone, DestroyRef, booleanAttribute, output, viewChild, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, afterNextRender, InjectionToken, HostAttributeToken, ChangeDetectorRef, numberAttribute, model, contentChild, contentChildren, forwardRef, Injector, HostListener, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { animationFrameScheduler, asapScheduler, Subject, fromEvent } from 'rxjs';
-import { takeUntil, auditTime, tap, debounceTime, filter, map } from 'rxjs/operators';
+import { animationFrameScheduler, asapScheduler, fromEvent, Subject } from 'rxjs';
+import { auditTime, tap, debounceTime, filter, map } from 'rxjs/operators';
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 const unescapedHTMLExp = /[&<>"']/g;
 const hasUnescapedHTMLExp = RegExp(unescapedHTMLExp.source);
@@ -1570,11 +1571,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
 const CSS_POSITIONS = ['top', 'right', 'bottom', 'left'];
 const SCROLL_SCHEDULER = typeof requestAnimationFrame !== 'undefined' ? animationFrameScheduler : asapScheduler;
 class NgDropdownPanelComponent {
+    get currentPosition() {
+        return this._currentPosition;
+    }
+    get itemsLength() {
+        return this._itemsLength;
+    }
+    set itemsLength(value) {
+        if (value !== this._itemsLength) {
+            this._itemsLength = value;
+            this._onItemsLengthChanged();
+        }
+    }
+    get _startOffset() {
+        if (this.markedItem()) {
+            const { itemHeight, panelHeight } = this._panelService.dimensions;
+            const offset = this.markedItem().index * itemHeight;
+            return panelHeight > offset ? 0 : offset;
+        }
+        return 0;
+    }
     constructor() {
         this._renderer = inject(Renderer2);
         this._zone = inject(NgZone);
         this._panelService = inject(NgDropdownPanelService);
         this._document = inject(DOCUMENT, { optional: true });
+        this._destroyRef = inject(DestroyRef);
         this._dropdown = inject((ElementRef)).nativeElement;
         this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
         this.markedItem = input(undefined, ...(ngDevMode ? [{ debugName: "markedItem" }] : []));
@@ -1597,33 +1619,17 @@ class NgDropdownPanelComponent {
         this.contentElementRef = viewChild('content', ...(ngDevMode ? [{ debugName: "contentElementRef", read: ElementRef }] : [{ read: ElementRef }]));
         this.scrollElementRef = viewChild('scroll', ...(ngDevMode ? [{ debugName: "scrollElementRef", read: ElementRef }] : [{ read: ElementRef }]));
         this.paddingElementRef = viewChild('padding', ...(ngDevMode ? [{ debugName: "paddingElementRef", read: ElementRef }] : [{ read: ElementRef }]));
-        this._destroy$ = new Subject();
         this._virtualPadding = computed(() => this.paddingElementRef()?.nativeElement, ...(ngDevMode ? [{ debugName: "_virtualPadding" }] : []));
         this._scrollablePanel = computed(() => this.scrollElementRef()?.nativeElement, ...(ngDevMode ? [{ debugName: "_scrollablePanel" }] : []));
         this._contentPanel = computed(() => this.contentElementRef()?.nativeElement, ...(ngDevMode ? [{ debugName: "_contentPanel" }] : []));
         this._scrollToEndFired = false;
         this._updateScrollHeight = false;
         this._lastScrollPosition = 0;
-    }
-    get currentPosition() {
-        return this._currentPosition;
-    }
-    get itemsLength() {
-        return this._itemsLength;
-    }
-    set itemsLength(value) {
-        if (value !== this._itemsLength) {
-            this._itemsLength = value;
-            this._onItemsLengthChanged();
-        }
-    }
-    get _startOffset() {
-        if (this.markedItem()) {
-            const { itemHeight, panelHeight } = this._panelService.dimensions;
-            const offset = this.markedItem().index * itemHeight;
-            return panelHeight > offset ? 0 : offset;
-        }
-        return 0;
+        this._destroyRef.onDestroy(() => {
+            if (this.appendTo()) {
+                this._renderer.removeChild(this._dropdown.parentNode, this._dropdown);
+            }
+        });
     }
     ngOnInit() {
         this._select = this._dropdown.parentElement;
@@ -1638,14 +1644,6 @@ class NgDropdownPanelComponent {
             this._onItemsChange(change.currentValue, change.firstChange);
         }
     }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-        this._destroy$.unsubscribe();
-        if (this.appendTo()) {
-            this._renderer.removeChild(this._dropdown.parentNode, this._dropdown);
-        }
-    }
     scrollTo(option, startFromOption = false) {
         if (!option) {
             return;
@@ -1704,7 +1702,7 @@ class NgDropdownPanelComponent {
                 return;
             }
             fromEvent(this._scrollablePanel(), 'scroll')
-                .pipe(takeUntil(this._destroy$), auditTime(0, SCROLL_SCHEDULER))
+                .pipe(takeUntilDestroyed(this._destroyRef), auditTime(0, SCROLL_SCHEDULER))
                 .subscribe((event) => {
                 const target = event.target;
                 if (target && 'scrollTop' in target) {
@@ -1719,7 +1717,7 @@ class NgDropdownPanelComponent {
         }
         this._zone.runOutsideAngular(() => {
             fromEvent(this._document, this.outsideClickEvent(), { capture: true })
-                .pipe(takeUntil(this._destroy$))
+                .pipe(takeUntilDestroyed(this._destroyRef))
                 .subscribe(($event) => this._checkToClose($event));
         });
     }
@@ -1900,7 +1898,7 @@ class NgDropdownPanelComponent {
     _setupMousedownListener() {
         this._zone.runOutsideAngular(() => {
             fromEvent(this._dropdown, 'mousedown')
-                .pipe(takeUntil(this._destroy$))
+                .pipe(takeUntilDestroyed(this._destroyRef))
                 .subscribe((event) => {
                 const target = event.target;
                 if (target.tagName === 'INPUT') {
@@ -1956,7 +1954,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
 	`,
                     imports: [NgTemplateOutlet],
                 }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], markedItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "markedItem", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], bufferAmount: [{ type: i0.Input, args: [{ isSignal: true, alias: "bufferAmount", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: false }] }], filterValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterValue", required: false }] }], ariaLabelDropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelDropdown", required: false }] }], outsideClickEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "outsideClickEvent", required: false }] }], update: [{ type: i0.Output, args: ["update"] }], scroll: [{ type: i0.Output, args: ["scroll"] }], scrollToEnd: [{ type: i0.Output, args: ["scrollToEnd"] }], outsideClick: [{ type: i0.Output, args: ["outsideClick"] }], contentElementRef: [{ type: i0.ViewChild, args: ['content', { ...{ read: ElementRef }, isSignal: true }] }], scrollElementRef: [{ type: i0.ViewChild, args: ['scroll', { ...{ read: ElementRef }, isSignal: true }] }], paddingElementRef: [{ type: i0.ViewChild, args: ['padding', { ...{ read: ElementRef }, isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], markedItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "markedItem", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], bufferAmount: [{ type: i0.Input, args: [{ isSignal: true, alias: "bufferAmount", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: false }] }], filterValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterValue", required: false }] }], ariaLabelDropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelDropdown", required: false }] }], outsideClickEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "outsideClickEvent", required: false }] }], update: [{ type: i0.Output, args: ["update"] }], scroll: [{ type: i0.Output, args: ["scroll"] }], scrollToEnd: [{ type: i0.Output, args: ["scrollToEnd"] }], outsideClick: [{ type: i0.Output, args: ["outsideClick"] }], contentElementRef: [{ type: i0.ViewChild, args: ['content', { ...{ read: ElementRef }, isSignal: true }] }], scrollElementRef: [{ type: i0.ViewChild, args: ['scroll', { ...{ read: ElementRef }, isSignal: true }] }], paddingElementRef: [{ type: i0.ViewChild, args: ['padding', { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 class NgOptionComponent {
     constructor() {
@@ -2079,6 +2077,7 @@ class NgSelectComponent {
         this.config = inject(NgSelectConfig);
         this._cd = inject(ChangeDetectorRef);
         this._console = inject(ConsoleService);
+        this._destroyRef = inject(DestroyRef);
         // signals
         this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
         // inputs
@@ -2207,7 +2206,6 @@ class NgSelectComponent {
         this.autoFocus = inject(new HostAttributeToken('autofocus'), { optional: true });
         // private variables
         this._defaultLabel = 'label';
-        this._destroy$ = new Subject();
         this._editableSearchTerm = computed(() => this.editableSearchTerm() && !this.multiple(), ...(ngDevMode ? [{ debugName: "_editableSearchTerm" }] : []));
         this._injector = inject(Injector);
         this._isComposing = false;
@@ -2305,10 +2303,6 @@ class NgSelectComponent {
             this.focus();
         }
     }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
     handleKeyDown($event) {
         const keyName = $event.key;
         if (Object.values(KeyCode).includes(keyName)) {
@@ -2726,7 +2720,7 @@ class NgSelectComponent {
             return;
         }
         this._keyPress$
-            .pipe(takeUntil(this._destroy$), tap((letter) => this._pressedKeys.push(letter)), debounceTime(200), filter(() => this._pressedKeys.length > 0), map(() => this._pressedKeys.join('')))
+            .pipe(takeUntilDestroyed(this._destroyRef), tap((letter) => this._pressedKeys.push(letter)), debounceTime(200), filter(() => this._pressedKeys.length > 0), map(() => this._pressedKeys.join('')))
             .subscribe((term) => {
             const item = this.itemsList.findByLabel(term);
             if (item) {