@ng-select/ng-select 20.1.3 → 20.2.0

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

@@ -1,9 +1,10 @@
 import * as i0 from '@angular/core';
-import { Input, Directive, Injectable, input, EventEmitter, DOCUMENT, ElementRef, booleanAttribute, ViewChild, Output, Optional, Inject, ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, signal, TemplateRef, forwardRef, numberAttribute, HostListener, HostBinding, ContentChildren, ContentChild, Attribute, NgModule } 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, forwardRef, contentChildren, HostListener, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { animationFrameScheduler, asapScheduler, Subject, fromEvent, merge } from 'rxjs';
-import { takeUntil, auditTime, startWith, tap, debounceTime, filter, map } from 'rxjs/operators';
-import { NgTemplateOutlet, NgClass } from '@angular/common';
+import { takeUntil, auditTime, tap, startWith, switchMap, debounceTime, filter, map } from 'rxjs/operators';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import { toObservable } from '@angular/core/rxjs-interop';
 
 const unescapedHTMLExp = /[&<>"']/g;
 const hasUnescapedHTMLExp = RegExp(unescapedHTMLExp.source);
@@ -31,15 +32,18 @@ function isFunction(value) {
 }
 
 class NgItemLabelDirective {
-    constructor(element) {
-        this.element = element;
-        this.escape = true;
-    }
-    ngOnChanges(changes) {
-        this.element.nativeElement.innerHTML = this.escape ? escapeHTML(this.ngItemLabel) : this.ngItemLabel;
+    constructor() {
+        this.element = inject(ElementRef);
+        this.ngItemLabel = input();
+        this.escape = input(true);
+        effect(() => {
+            this.element.nativeElement.innerHTML = this.escape()
+                ? escapeHTML(this.ngItemLabel())
+                : this.ngItemLabel();
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgItemLabelDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: NgItemLabelDirective, isStandalone: true, selector: "[ngItemLabel]", inputs: { ngItemLabel: "ngItemLabel", escape: "escape" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgItemLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0", type: NgItemLabelDirective, isStandalone: true, selector: "[ngItemLabel]", inputs: { ngItemLabel: { classPropertyName: "ngItemLabel", publicName: "ngItemLabel", isSignal: true, isRequired: false, transformFunction: null }, escape: { classPropertyName: "escape", publicName: "escape", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgItemLabelDirective, decorators: [{
             type: Directive,
@@ -47,16 +51,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                     selector: '[ngItemLabel]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { ngItemLabel: [{
-                type: Input
-            }], escape: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 class NgOptionTemplateDirective {
-    constructor(template) {
-        this.template = template;
+    constructor() {
+        this.template = inject((TemplateRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgOptionTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgOptionTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: NgOptionTemplateDirective, isStandalone: true, selector: "[ng-option-tmp]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgOptionTemplateDirective, decorators: [{
@@ -66,12 +66,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                     selector: '[ng-option-tmp]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+        }] });
 class NgOptgroupTemplateDirective {
-    constructor(template) {
-        this.template = template;
+    constructor() {
+        this.template = inject((TemplateRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgOptgroupTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgOptgroupTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: NgOptgroupTemplateDirective, isStandalone: true, selector: "[ng-optgroup-tmp]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgOptgroupTemplateDirective, decorators: [{
@@ -81,12 +81,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                     selector: '[ng-optgroup-tmp]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+        }] });
 class NgLabelTemplateDirective {
-    constructor(template) {
-        this.template = template;
+    constructor() {
+        this.template = inject((TemplateRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgLabelTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgLabelTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: NgLabelTemplateDirective, isStandalone: true, selector: "[ng-label-tmp]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgLabelTemplateDirective, decorators: [{
@@ -96,12 +96,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                     selector: '[ng-label-tmp]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+        }] });
 class NgMultiLabelTemplateDirective {
-    constructor(template) {
-        this.template = template;
+    constructor() {
+        this.template = inject((TemplateRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgMultiLabelTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgMultiLabelTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: NgMultiLabelTemplateDirective, isStandalone: true, selector: "[ng-multi-label-tmp]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgMultiLabelTemplateDirective, decorators: [{
@@ -111,12 +111,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                     selector: '[ng-multi-label-tmp]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+        }] });
 class NgHeaderTemplateDirective {
-    constructor(template) {
-        this.template = template;
+    constructor() {
+        this.template = inject((TemplateRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: NgHeaderTemplateDirective, isStandalone: true, selector: "[ng-header-tmp]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgHeaderTemplateDirective, decorators: [{
@@ -126,12 +126,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                     selector: '[ng-header-tmp]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+        }] });
 class NgFooterTemplateDirective {
-    constructor(template) {
-        this.template = template;
+    constructor() {
+        this.template = inject((TemplateRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgFooterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgFooterTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: NgFooterTemplateDirective, isStandalone: true, selector: "[ng-footer-tmp]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgFooterTemplateDirective, decorators: [{
@@ -141,12 +141,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                     selector: '[ng-footer-tmp]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+        }] });
 class NgNotFoundTemplateDirective {
-    constructor(template) {
-        this.template = template;
+    constructor() {
+        this.template = inject((TemplateRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgNotFoundTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgNotFoundTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: NgNotFoundTemplateDirective, isStandalone: true, selector: "[ng-notfound-tmp]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgNotFoundTemplateDirective, decorators: [{
@@ -156,12 +156,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                     selector: '[ng-notfound-tmp]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+        }] });
 class NgPlaceholderTemplateDirective {
-    constructor(template) {
-        this.template = template;
+    constructor() {
+        this.template = inject((TemplateRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgPlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgPlaceholderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: NgPlaceholderTemplateDirective, isStandalone: true, selector: "[ng-placeholder-tmp]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgPlaceholderTemplateDirective, decorators: [{
@@ -171,12 +171,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                     selector: '[ng-placeholder-tmp]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+        }] });
 class NgTypeToSearchTemplateDirective {
-    constructor(template) {
-        this.template = template;
+    constructor() {
+        this.template = inject((TemplateRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgTypeToSearchTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgTypeToSearchTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: NgTypeToSearchTemplateDirective, isStandalone: true, selector: "[ng-typetosearch-tmp]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgTypeToSearchTemplateDirective, decorators: [{
@@ -186,12 +186,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                     selector: '[ng-typetosearch-tmp]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+        }] });
 class NgLoadingTextTemplateDirective {
-    constructor(template) {
-        this.template = template;
+    constructor() {
+        this.template = inject((TemplateRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgLoadingTextTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgLoadingTextTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: NgLoadingTextTemplateDirective, isStandalone: true, selector: "[ng-loadingtext-tmp]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgLoadingTextTemplateDirective, decorators: [{
@@ -201,12 +201,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                     selector: '[ng-loadingtext-tmp]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+        }] });
 class NgTagTemplateDirective {
-    constructor(template) {
-        this.template = template;
+    constructor() {
+        this.template = inject((TemplateRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgTagTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgTagTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: NgTagTemplateDirective, isStandalone: true, selector: "[ng-tag-tmp]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgTagTemplateDirective, decorators: [{
@@ -216,12 +216,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                     selector: '[ng-tag-tmp]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+        }] });
 class NgLoadingSpinnerTemplateDirective {
-    constructor(template) {
-        this.template = template;
+    constructor() {
+        this.template = inject((TemplateRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgLoadingSpinnerTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgLoadingSpinnerTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: NgLoadingSpinnerTemplateDirective, isStandalone: true, selector: "[ng-loadingspinner-tmp]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgLoadingSpinnerTemplateDirective, decorators: [{
@@ -231,19 +231,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                     selector: '[ng-loadingspinner-tmp]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+        }] });
 // eslint-disable-next-line @angular-eslint/directive-selector
 class NgClearButtonTemplateDirective {
-    constructor(template) {
-        this.template = template;
+    constructor() {
+        this.template = inject((TemplateRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgClearButtonTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgClearButtonTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: NgClearButtonTemplateDirective, isStandalone: true, selector: "[ng-clearbutton-tmp]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgClearButtonTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[ng-clearbutton-tmp]', standalone: true }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+        }] });
+
+class NgSelectConfig {
+    constructor() {
+        this.fixedPlaceholder = true;
+        this.notFoundText = 'No items found';
+        this.typeToSearchText = 'Type to search';
+        this.addTagText = 'Add item';
+        this.loadingText = 'Loading...';
+        this.clearAllText = 'Clear all';
+        this.disableVirtualScroll = true;
+        this.openOnEnter = true;
+        this.appearance = 'underline';
+        this.tabFocusOnClear = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgSelectConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgSelectConfig, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgSelectConfig, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ConsoleService {
+    warn(message) {
+        console.warn(message);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ConsoleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ConsoleService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ConsoleService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 function newId() {
     // First character is an 'a', it's good practice to tag id to begin with a letter
@@ -1124,10 +1157,10 @@ class ItemsList {
         return this._filteredItems[this._markedIndex];
     }
     get noItemsToSelect() {
-        return this._ngSelect.hideSelected && this._items.length === this.selectedItems.length;
+        return this._ngSelect.hideSelected() && this._items.length === this.selectedItems.length;
     }
     get maxItemsSelected() {
-        return this._ngSelect.multiple && this._ngSelect.maxSelectedItems <= this.selectedItems.length;
+        return this._ngSelect.multiple() && this._ngSelect.maxSelectedItems() <= this.selectedItems.length;
     }
     get lastSelectedItem() {
         let i = this.selectedItems.length - 1;
@@ -1141,8 +1174,9 @@ class ItemsList {
     }
     setItems(items) {
         this._items = items.map((item, index) => this.mapItem(item, index));
-        if (this._ngSelect.groupBy) {
-            this._groups = this._groupBy(this._items, this._ngSelect.groupBy);
+        const groupBy = this._ngSelect.groupBy();
+        if (groupBy) {
+            this._groups = this._groupBy(this._items, groupBy);
             this._items = this._flatten(this._groups);
         }
         else {
@@ -1155,12 +1189,12 @@ class ItemsList {
         if (item.selected || this.maxItemsSelected) {
             return;
         }
-        const multiple = this._ngSelect.multiple;
+        const multiple = this._ngSelect.multiple();
         if (!multiple) {
             this.clearSelected();
         }
-        this._selectionModel.select(item, multiple, this._ngSelect.selectableGroupAsModel);
-        if (this._ngSelect.hideSelected) {
+        this._selectionModel.select(item, multiple, this._ngSelect.selectableGroupAsModel());
+        if (this._ngSelect.hideSelected()) {
             this._hideSelected(item);
         }
     }
@@ -1168,21 +1202,22 @@ class ItemsList {
         if (!item.selected) {
             return;
         }
-        this._selectionModel.unselect(item, this._ngSelect.multiple);
-        if (this._ngSelect.hideSelected && isDefined(item.index) && this._ngSelect.multiple) {
+        const multiple = this._ngSelect.multiple();
+        this._selectionModel.unselect(item, multiple);
+        if (this._ngSelect.hideSelected() && isDefined(item.index) && multiple) {
             this._showSelected(item);
         }
     }
     findItem(value) {
         let findBy;
-        if (this._ngSelect.compareWith) {
-            findBy = (item) => this._ngSelect.compareWith(item.value, value);
+        if (this._ngSelect.compareWith()) {
+            findBy = (item) => this._ngSelect.compareWith()(item.value, value);
         }
-        else if (this._ngSelect.bindValue) {
-            findBy = (item) => !item.children && this.resolveNested(item.value, this._ngSelect.bindValue) === value;
+        else if (this._ngSelect.bindValue()) {
+            findBy = (item) => !item.children && this.resolveNested(item.value, this._ngSelect.bindValue()) === value;
         }
         else {
-            findBy = (item) => item.value === value || (!item.children && item.label && item.label === this.resolveNested(value, this._ngSelect.bindLabel));
+            findBy = (item) => item.value === value || (!item.children && item.label && item.label === this.resolveNested(value, this._ngSelect.bindLabel()));
         }
         return this._items.find((item) => findBy(item));
     }
@@ -1198,7 +1233,7 @@ class ItemsList {
             item.selected = keepDisabled && item.selected && item.disabled;
             item.marked = false;
         });
-        if (this._ngSelect.hideSelected) {
+        if (this._ngSelect.hideSelected()) {
             this.resetFilteredItems();
         }
     }
@@ -1215,16 +1250,16 @@ class ItemsList {
             return;
         }
         this._filteredItems = [];
-        term = this._ngSelect.searchFn ? term : stripSpecialChars(term).toLocaleLowerCase();
-        const match = this._ngSelect.searchFn || this._defaultSearchFn;
-        const hideSelected = this._ngSelect.hideSelected;
+        term = this._ngSelect.searchFn() ? term : stripSpecialChars(term).toLocaleLowerCase();
+        const match = this._ngSelect.searchFn() || this._defaultSearchFn;
+        const hideSelected = this._ngSelect.hideSelected();
         for (const key of Array.from(this._groups.keys())) {
             const matchedItems = [];
             for (const item of this._groups.get(key)) {
                 if (hideSelected && ((item.parent && item.parent.selected) || item.selected)) {
                     continue;
                 }
-                const searchItem = this._ngSelect.searchFn ? item.value : item;
+                const searchItem = this._ngSelect.searchFn() ? item.value : item;
                 if (match(term, searchItem)) {
                     matchedItems.push(item);
                 }
@@ -1243,7 +1278,7 @@ class ItemsList {
         if (this._filteredItems.length === this._items.length) {
             return;
         }
-        if (this._ngSelect.hideSelected && this.selectedItems.length > 0) {
+        if (this._ngSelect.hideSelected() && this.selectedItems.length > 0) {
             this._filteredItems = this._items.filter((x) => !x.selected);
         }
         else {
@@ -1294,7 +1329,7 @@ class ItemsList {
         }
     }
     mapItem(item, index) {
-        const label = isDefined(item.$ngOptionLabel) ? item.$ngOptionLabel : this.resolveNested(item, this._ngSelect.bindLabel);
+        const label = isDefined(item.$ngOptionLabel) ? item.$ngOptionLabel : this.resolveNested(item, this._ngSelect.bindLabel());
         const value = isDefined(item.$ngOptionValue) ? item.$ngOptionValue : item;
         return {
             index,
@@ -1305,21 +1340,22 @@ class ItemsList {
         };
     }
     mapSelectedItems() {
-        const multiple = this._ngSelect.multiple;
+        const multiple = this._ngSelect.multiple();
         for (const selected of this.selectedItems) {
+            const bindValue = this._ngSelect.bindValue();
             let item = null;
             // When compareWith is used, we need to find the item using the original selected value rather than the extracted bindValue, since compareWith expects to compare against the original value
-            if (this._ngSelect.compareWith) {
-                item = this._items.find((item) => this._ngSelect.compareWith(item.value, selected.value));
+            if (this._ngSelect.compareWith()) {
+                item = this._items.find((item) => this._ngSelect.compareWith()(item.value, selected.value));
             }
             else {
-                const value = this._ngSelect.bindValue ? this.resolveNested(selected.value, this._ngSelect.bindValue) : selected.value;
+                const value = bindValue ? this.resolveNested(selected.value, bindValue) : selected.value;
                 item = isDefined(value) ? this.findItem(value) : null;
             }
             this._selectionModel.unselect(selected, multiple);
-            this._selectionModel.select(item || selected, multiple, this._ngSelect.selectableGroupAsModel);
+            this._selectionModel.select(item || selected, multiple, this._ngSelect.selectableGroupAsModel());
         }
-        if (this._ngSelect.hideSelected) {
+        if (this._ngSelect.hideSelected()) {
             this._filteredItems = this.filteredItems.filter((x) => this.selectedItems.indexOf(x) === -1);
         }
     }
@@ -1372,7 +1408,7 @@ class ItemsList {
         }
     }
     _getLastMarkedIndex() {
-        if (this._ngSelect.hideSelected) {
+        if (this._ngSelect.hideSelected()) {
             return -1;
         }
         if (this._markedIndex > -1 && this.markedItem === undefined) {
@@ -1397,7 +1433,7 @@ class ItemsList {
             }
             return groups;
         }
-        const isFnKey = isFunction(this._ngSelect.groupBy);
+        const isFnKey = isFunction(this._ngSelect.groupBy());
         const keyFn = (item) => {
             const key = isFnKey ? prop(item.value) : item.value[prop];
             return isDefined(key) ? key : undefined;
@@ -1416,7 +1452,7 @@ class ItemsList {
         return groups;
     }
     _flatten(groups) {
-        const isGroupByFn = isFunction(this._ngSelect.groupBy);
+        const isGroupByFn = isFunction(this._ngSelect.groupBy());
         const items = [];
         for (const key of Array.from(groups.keys())) {
             let i = items.length;
@@ -1434,11 +1470,11 @@ class ItemsList {
                 children: undefined,
                 parent: null,
                 index: i++,
-                disabled: !this._ngSelect.selectableGroup,
+                disabled: !this._ngSelect.selectableGroup(),
                 htmlId: newId(),
             };
-            const groupKey = isGroupByFn ? this._ngSelect.bindLabel : this._ngSelect.groupBy;
-            const groupValue = this._ngSelect.groupValue ||
+            const groupKey = isGroupByFn ? this._ngSelect.bindLabel() : this._ngSelect.groupBy();
+            const groupValue = this._ngSelect.groupValue() ||
                 (() => {
                     if (isObjectKey) {
                         return key.value;
@@ -1529,25 +1565,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 const CSS_POSITIONS = ['top', 'right', 'bottom', 'left'];
 const SCROLL_SCHEDULER = typeof requestAnimationFrame !== 'undefined' ? animationFrameScheduler : asapScheduler;
 class NgDropdownPanelComponent {
-    constructor(_renderer, _zone, _panelService, _elementRef, _document) {
-        this._renderer = _renderer;
-        this._zone = _zone;
-        this._panelService = _panelService;
-        this._document = _document;
-        this.items = [];
-        this.position = 'auto';
-        this.virtualScroll = false;
-        this.filterValue = null;
+    constructor() {
+        this._renderer = inject(Renderer2);
+        this._zone = inject(NgZone);
+        this._panelService = inject(NgDropdownPanelService);
+        this._document = inject(DOCUMENT, { optional: true });
+        this._dropdown = inject((ElementRef)).nativeElement;
+        this.items = input([]);
+        this.markedItem = input(undefined);
+        this.position = input('auto');
+        this.appendTo = input(undefined);
+        this.bufferAmount = input(undefined);
+        this.virtualScroll = input(false, { transform: booleanAttribute });
+        this.headerTemplate = input(undefined);
+        this.footerTemplate = input(undefined);
+        this.filterValue = input(null);
         this.ariaLabelDropdown = input(null);
-        this.update = new EventEmitter();
-        this.scroll = new EventEmitter();
-        this.scrollToEnd = new EventEmitter();
-        this.outsideClick = new EventEmitter();
+        this.update = output();
+        this.scroll = output();
+        this.scrollToEnd = output();
+        this.outsideClick = output();
+        this.contentElementRef = viewChild('content', { read: ElementRef });
+        this.scrollElementRef = viewChild('scroll', { read: ElementRef });
+        this.paddingElementRef = viewChild('padding', { read: ElementRef });
         this._destroy$ = new Subject();
+        this._virtualPadding = computed(() => this.paddingElementRef()?.nativeElement);
+        this._scrollablePanel = computed(() => this.scrollElementRef()?.nativeElement);
+        this._contentPanel = computed(() => this.contentElementRef()?.nativeElement);
         this._scrollToEndFired = false;
         this._updateScrollHeight = false;
         this._lastScrollPosition = 0;
-        this._dropdown = _elementRef.nativeElement;
     }
     get currentPosition() {
         return this._currentPosition;
@@ -1562,18 +1609,15 @@ class NgDropdownPanelComponent {
         }
     }
     get _startOffset() {
-        if (this.markedItem) {
+        if (this.markedItem()) {
             const { itemHeight, panelHeight } = this._panelService.dimensions;
-            const offset = this.markedItem.index * itemHeight;
+            const offset = this.markedItem().index * itemHeight;
             return panelHeight > offset ? 0 : offset;
         }
         return 0;
     }
     ngOnInit() {
         this._select = this._dropdown.parentElement;
-        this._virtualPadding = this.paddingElementRef.nativeElement;
-        this._scrollablePanel = this.scrollElementRef.nativeElement;
-        this._contentPanel = this.contentElementRef.nativeElement;
         this._handleScroll();
         this._handleOutsideClick();
         this._appendDropdown();
@@ -1589,7 +1633,7 @@ class NgDropdownPanelComponent {
         this._destroy$.next();
         this._destroy$.complete();
         this._destroy$.unsubscribe();
-        if (this.appendTo) {
+        if (this.appendTo()) {
             this._renderer.removeChild(this._dropdown.parentNode, this._dropdown);
         }
     }
@@ -1597,12 +1641,12 @@ class NgDropdownPanelComponent {
         if (!option) {
             return;
         }
-        const index = this.items.indexOf(option);
+        const index = this.items().indexOf(option);
         if (index < 0 || index >= this.itemsLength) {
             return;
         }
         let scrollTo;
-        if (this.virtualScroll) {
+        if (this.virtualScroll()) {
             const itemHeight = this._panelService.dimensions.itemHeight;
             scrollTo = this._panelService.getScrollTo(index * itemHeight, itemHeight, this._lastScrollPosition);
         }
@@ -1612,11 +1656,11 @@ class NgDropdownPanelComponent {
             scrollTo = this._panelService.getScrollTo(item.offsetTop, item.clientHeight, lastScroll);
         }
         if (isDefined(scrollTo)) {
-            this._scrollablePanel.scrollTop = scrollTo;
+            this._scrollablePanel().scrollTop = scrollTo;
         }
     }
     scrollToTag() {
-        const panel = this._scrollablePanel;
+        const panel = this._scrollablePanel();
         panel.scrollTop = panel.scrollHeight - panel.clientHeight;
     }
     adjustPosition() {
@@ -1630,7 +1674,7 @@ class NgDropdownPanelComponent {
         else {
             this._updateDropdownClass('bottom');
         }
-        if (this.appendTo) {
+        if (this.appendTo()) {
             this._updateYPosition();
         }
         this._dropdown.style.opacity = '1';
@@ -1647,7 +1691,10 @@ class NgDropdownPanelComponent {
     }
     _handleScroll() {
         this._zone.runOutsideAngular(() => {
-            fromEvent(this.scrollElementRef.nativeElement, 'scroll')
+            if (!this._scrollablePanel()) {
+                return;
+            }
+            fromEvent(this._scrollablePanel(), 'scroll')
                 .pipe(takeUntil(this._destroy$), auditTime(0, SCROLL_SCHEDULER))
                 .subscribe((e) => {
                 const path = e.path || (e.composedPath && e.composedPath());
@@ -1679,11 +1726,10 @@ class NgDropdownPanelComponent {
         }
         this._zone.run(() => this.outsideClick.emit());
     }
-    _onItemsChange(items, firstChange) {
-        this.items = items || [];
+    _onItemsChange(items = [], firstChange) {
         this._scrollToEndFired = false;
         this.itemsLength = items.length;
-        if (this.virtualScroll) {
+        if (this.virtualScroll()) {
             this._updateItemsRange(firstChange);
         }
         else {
@@ -1692,16 +1738,16 @@ class NgDropdownPanelComponent {
         }
     }
     _updateItems(firstChange) {
-        this.update.emit(this.items);
+        this.update.emit(this.items());
         if (firstChange === false) {
             return;
         }
         this._zone.runOutsideAngular(() => {
             Promise.resolve().then(() => {
-                const panelHeight = this._scrollablePanel.clientHeight;
+                const panelHeight = this._scrollablePanel().clientHeight;
                 this._panelService.setDimensions(0, panelHeight);
                 this._handleDropdownPosition();
-                this.scrollTo(this.markedItem, firstChange);
+                this.scrollTo(this.markedItem(), firstChange);
             });
         });
     }
@@ -1719,7 +1765,7 @@ class NgDropdownPanelComponent {
         });
     }
     _onContentScrolled(scrollTop) {
-        if (this.virtualScroll) {
+        if (this.virtualScroll()) {
             this._renderItemsRange(scrollTop);
         }
         this._lastScrollPosition = scrollTop;
@@ -1727,15 +1773,15 @@ class NgDropdownPanelComponent {
     }
     _updateVirtualHeight(height) {
         if (this._updateScrollHeight) {
-            this._virtualPadding.style.height = `${height}px`;
+            this._virtualPadding().style.height = `${height}px`;
             this._updateScrollHeight = false;
         }
     }
     _setVirtualHeight() {
-        if (!this._virtualPadding) {
+        if (!this._virtualPadding()) {
             return;
         }
-        this._virtualPadding.style.height = `0px`;
+        this._virtualPadding().style.height = `0px`;
     }
     _onItemsLengthChanged() {
         this._updateScrollHeight = true;
@@ -1744,16 +1790,16 @@ class NgDropdownPanelComponent {
         if (scrollTop && this._lastScrollPosition === scrollTop) {
             return;
         }
-        scrollTop = scrollTop || this._scrollablePanel.scrollTop;
-        const range = this._panelService.calculateItems(scrollTop, this.itemsLength, this.bufferAmount);
+        scrollTop = scrollTop || this._scrollablePanel().scrollTop;
+        const range = this._panelService.calculateItems(scrollTop, this.itemsLength, this.bufferAmount());
         this._updateVirtualHeight(range.scrollHeight);
-        this._contentPanel.style.transform = `translateY(${range.topPadding}px)`;
+        this._contentPanel().style.transform = `translateY(${range.topPadding}px)`;
         this._zone.run(() => {
-            this.update.emit(this.items.slice(range.start, range.end));
+            this.update.emit(this.items().slice(range.start, range.end));
             this.scroll.emit({ start: range.start, end: range.end });
         });
         if (isDefined(scrollTop) && this._lastScrollPosition === 0) {
-            this._scrollablePanel.scrollTop = scrollTop;
+            this._scrollablePanel().scrollTop = scrollTop;
             this._lastScrollPosition = scrollTop;
         }
     }
@@ -1761,13 +1807,13 @@ class NgDropdownPanelComponent {
         if (this._panelService.dimensions.itemHeight > 0 || this.itemsLength === 0) {
             return Promise.resolve(this._panelService.dimensions);
         }
-        const [first] = this.items;
+        const [first] = this.items();
         this.update.emit([first]);
         return Promise.resolve().then(() => {
             const option = this._dropdown.querySelector(`#${first.htmlId}`);
             const optionHeight = option.clientHeight;
-            this._virtualPadding.style.height = `${optionHeight * this.itemsLength}px`;
-            const panelHeight = this._scrollablePanel.clientHeight;
+            this._virtualPadding().style.height = `${optionHeight * this.itemsLength}px`;
+            const panelHeight = this._scrollablePanel().clientHeight;
             this._panelService.setDimensions(optionHeight, panelHeight);
             return this._panelService.dimensions;
         });
@@ -1776,15 +1822,16 @@ class NgDropdownPanelComponent {
         if (this._scrollToEndFired || scrollTop === 0) {
             return;
         }
-        const padding = this.virtualScroll ? this._virtualPadding : this._contentPanel;
+        const padding = this.virtualScroll() ? this._virtualPadding() : this._contentPanel();
         if (scrollTop + this._dropdown.clientHeight >= padding.clientHeight - 1) {
             this._zone.run(() => this.scrollToEnd.emit());
             this._scrollToEndFired = true;
         }
     }
     _calculateCurrentPosition(dropdownEl) {
-        if (this.position !== 'auto') {
-            return this.position;
+        const position = this.position();
+        if (position !== 'auto') {
+            return position;
         }
         const selectRect = this._select.getBoundingClientRect();
         const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
@@ -1799,14 +1846,14 @@ class NgDropdownPanelComponent {
         }
     }
     _appendDropdown() {
-        if (!this.appendTo) {
+        if (!this.appendTo()) {
             return;
         }
         this._parent = this._dropdown.shadowRoot
-            ? this._dropdown.shadowRoot.querySelector(this.appendTo)
-            : document.querySelector(this.appendTo);
+            ? this._dropdown.shadowRoot.querySelector(this.appendTo())
+            : document.querySelector(this.appendTo());
         if (!this._parent) {
-            throw new Error(`appendTo selector ${this.appendTo} did not found any parent element`);
+            throw new Error(`appendTo selector ${this.appendTo()} did not found any parent element`);
         }
         this._updateXPosition();
         this._parent.appendChild(this._dropdown);
@@ -1814,8 +1861,17 @@ class NgDropdownPanelComponent {
     _updateXPosition() {
         const select = this._select.getBoundingClientRect();
         const parent = this._parent.getBoundingClientRect();
+        const isRTL = document.documentElement.dir === 'rtl';
         const offsetLeft = select.left - parent.left;
-        this._dropdown.style.left = offsetLeft + 'px';
+        if (isRTL) {
+            const offsetRight = parent.right - select.right;
+            this._dropdown.style.right = offsetRight + 'px';
+            this._dropdown.style.left = 'auto';
+        }
+        else {
+            this._dropdown.style.left = offsetLeft + 'px';
+            this._dropdown.style.right = 'auto';
+        }
         this._dropdown.style.width = select.width + 'px';
         this._dropdown.style.minWidth = select.width + 'px';
     }
@@ -1847,22 +1903,22 @@ class NgDropdownPanelComponent {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgDropdownPanelComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: NgDropdownPanelService }, { token: i0.ElementRef }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: NgDropdownPanelComponent, isStandalone: true, selector: "ng-dropdown-panel", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, markedItem: { classPropertyName: "markedItem", publicName: "markedItem", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: false, isRequired: false, transformFunction: null }, bufferAmount: { classPropertyName: "bufferAmount", publicName: "bufferAmount", isSignal: false, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: false, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: false, isRequired: false, transformFunction: null }, filterValue: { classPropertyName: "filterValue", publicName: "filterValue", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelDropdown: { classPropertyName: "ariaLabelDropdown", publicName: "ariaLabelDropdown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { update: "update", scroll: "scroll", scrollToEnd: "scrollToEnd", outsideClick: "outsideClick" }, viewQueries: [{ propertyName: "contentElementRef", first: true, predicate: ["content"], descendants: true, read: ElementRef, static: true }, { propertyName: "scrollElementRef", first: true, predicate: ["scroll"], descendants: true, read: ElementRef, static: true }, { propertyName: "paddingElementRef", first: true, predicate: ["padding"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
-		@if (headerTemplate) {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgDropdownPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: NgDropdownPanelComponent, isStandalone: true, selector: "ng-dropdown-panel", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, markedItem: { classPropertyName: "markedItem", publicName: "markedItem", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, bufferAmount: { classPropertyName: "bufferAmount", publicName: "bufferAmount", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, filterValue: { classPropertyName: "filterValue", publicName: "filterValue", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelDropdown: { classPropertyName: "ariaLabelDropdown", publicName: "ariaLabelDropdown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { update: "update", scroll: "scroll", scrollToEnd: "scrollToEnd", outsideClick: "outsideClick" }, viewQueries: [{ propertyName: "contentElementRef", first: true, predicate: ["content"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "scrollElementRef", first: true, predicate: ["scroll"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "paddingElementRef", first: true, predicate: ["padding"], descendants: true, read: ElementRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `
+		@if (headerTemplate()) {
 			<div class="ng-dropdown-header">
-				<ng-container [ngTemplateOutlet]="headerTemplate" [ngTemplateOutletContext]="{ searchTerm: filterValue }" />
+				<ng-container [ngTemplateOutlet]="headerTemplate()" [ngTemplateOutletContext]="{ searchTerm: filterValue() }" />
 			</div>
 		}
 		<div #scroll role="listbox" class="ng-dropdown-panel-items scroll-host" [attr.aria-label]="ariaLabelDropdown()">
-			<div #padding [class.total-padding]="virtualScroll"></div>
-			<div #content [class.scrollable-content]="virtualScroll && items.length">
+			<div #padding [class.total-padding]="virtualScroll()"></div>
+			<div #content [class.scrollable-content]="virtualScroll() && items().length">
 				<ng-content />
 			</div>
 		</div>
-		@if (footerTemplate) {
+		@if (footerTemplate()) {
 			<div class="ng-dropdown-footer">
-				<ng-container [ngTemplateOutlet]="footerTemplate" [ngTemplateOutletContext]="{ searchTerm: filterValue }" />
+				<ng-container [ngTemplateOutlet]="footerTemplate()" [ngTemplateOutletContext]="{ searchTerm: filterValue() }" />
 			</div>
 		}
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -1874,100 +1930,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     selector: 'ng-dropdown-panel',
                     template: `
-		@if (headerTemplate) {
+		@if (headerTemplate()) {
 			<div class="ng-dropdown-header">
-				<ng-container [ngTemplateOutlet]="headerTemplate" [ngTemplateOutletContext]="{ searchTerm: filterValue }" />
+				<ng-container [ngTemplateOutlet]="headerTemplate()" [ngTemplateOutletContext]="{ searchTerm: filterValue() }" />
 			</div>
 		}
 		<div #scroll role="listbox" class="ng-dropdown-panel-items scroll-host" [attr.aria-label]="ariaLabelDropdown()">
-			<div #padding [class.total-padding]="virtualScroll"></div>
-			<div #content [class.scrollable-content]="virtualScroll && items.length">
+			<div #padding [class.total-padding]="virtualScroll()"></div>
+			<div #content [class.scrollable-content]="virtualScroll() && items().length">
 				<ng-content />
 			</div>
 		</div>
-		@if (footerTemplate) {
+		@if (footerTemplate()) {
 			<div class="ng-dropdown-footer">
-				<ng-container [ngTemplateOutlet]="footerTemplate" [ngTemplateOutletContext]="{ searchTerm: filterValue }" />
+				<ng-container [ngTemplateOutlet]="footerTemplate()" [ngTemplateOutletContext]="{ searchTerm: filterValue() }" />
 			</div>
 		}
 	`,
-                    imports: [NgTemplateOutlet],
+                    imports: [NgTemplateOutlet]
                 }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: NgDropdownPanelService }, { type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { items: [{
-                type: Input
-            }], markedItem: [{
-                type: Input
-            }], position: [{
-                type: Input
-            }], appendTo: [{
-                type: Input
-            }], bufferAmount: [{
-                type: Input
-            }], virtualScroll: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], headerTemplate: [{
-                type: Input
-            }], footerTemplate: [{
-                type: Input
-            }], filterValue: [{
-                type: Input
-            }], update: [{
-                type: Output
-            }], scroll: [{
-                type: Output
-            }], scrollToEnd: [{
-                type: Output
-            }], outsideClick: [{
-                type: Output
-            }], contentElementRef: [{
-                type: ViewChild,
-                args: ['content', { read: ElementRef, static: true }]
-            }], scrollElementRef: [{
-                type: ViewChild,
-                args: ['scroll', { read: ElementRef, static: true }]
-            }], paddingElementRef: [{
-                type: ViewChild,
-                args: ['padding', { read: ElementRef, static: true }]
-            }] } });
+        }] });
 
 class NgOptionComponent {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.disabled = false;
-        this.stateChange$ = new Subject();
-    }
-    get label() {
-        return (this.elementRef.nativeElement.textContent || '').trim();
-    }
-    ngOnChanges(changes) {
-        if (changes.disabled) {
-            this.stateChange$.next({
-                value: this.value,
-                disabled: this.disabled,
-            });
-        }
-    }
-    ngAfterViewChecked() {
-        if (this.label !== this._previousLabel) {
-            this._previousLabel = this.label;
-            this.stateChange$.next({
-                value: this.value,
-                disabled: this.disabled,
-                label: this.elementRef.nativeElement.innerHTML,
-            });
-        }
+    constructor() {
+        this.value = input();
+        this.disabled = input(false, {
+            transform: booleanAttribute,
+        });
+        this.elementRef = inject((ElementRef));
+        this.label = signal('');
+        this.stateChange = computed(() => ({
+            value: this.value(),
+            disabled: this.disabled(),
+            label: this.label(),
+        }));
+        this.stateChange$ = toObservable(this.stateChange);
+        afterNextRender(() => {
+            if (this._label !== this.label()) {
+                this.label.set(this._label);
+            }
+        });
     }
-    ngOnDestroy() {
-        this.stateChange$.complete();
+    get _label() {
+        return (this.elementRef.nativeElement.innerHTML || '').trim();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgOptionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.0", type: NgOptionComponent, isStandalone: true, selector: "ng-option", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, usesOnChanges: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: NgOptionComponent, isStandalone: true, selector: "ng-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgOptionComponent, decorators: [{
             type: Component,
@@ -1977,12 +1985,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `<ng-content />`,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { value: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
+        }], ctorParameters: () => [] });
 
 var KeyCode;
 (function (KeyCode) {
@@ -2070,88 +2073,128 @@ class DefaultSelectionModel {
     }
 }
 
-class NgSelectConfig {
-    constructor() {
-        this.fixedPlaceholder = true;
-        this.notFoundText = 'No items found';
-        this.typeToSearchText = 'Type to search';
-        this.addTagText = 'Add item';
-        this.loadingText = 'Loading...';
-        this.clearAllText = 'Clear all';
-        this.disableVirtualScroll = true;
-        this.openOnEnter = true;
-        this.appearance = 'underline';
-        this.tabFocusOnClear = true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgSelectConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgSelectConfig, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgSelectConfig, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class ConsoleService {
-    warn(message) {
-        console.warn(message);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ConsoleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ConsoleService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ConsoleService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
 const SELECTION_MODEL_FACTORY = new InjectionToken('ng-select-selection-model');
 class NgSelectComponent {
-    constructor(classes, autoFocus, config, newSelectionModel, _elementRef, _cd, _console) {
-        this.classes = classes;
-        this.autoFocus = autoFocus;
-        this.config = config;
-        this._cd = _cd;
-        this._console = _console;
-        this.ariaLabelDropdown = 'Options List';
-        this.markFirst = true;
-        this.fixedPlaceholder = true;
-        this.preventToggleOnRightClick = false;
-        this.dropdownPosition = 'auto';
-        this.loading = false;
-        this.closeOnSelect = true;
-        this.hideSelected = false;
-        this.selectOnTab = false;
-        this.bufferAmount = 4;
-        this.selectableGroup = false;
-        this.selectableGroupAsModel = true;
-        this.searchFn = null;
-        this.trackByFn = null;
-        this.clearOnBackspace = true;
-        this.labelForId = null;
-        this.inputAttrs = {};
+    constructor() {
+        this.classes = inject(new HostAttributeToken('class'), { optional: true });
+        this.autoFocus = inject(new HostAttributeToken('autofocus'), { optional: true });
+        this.config = inject(NgSelectConfig);
+        this._cd = inject(ChangeDetectorRef);
+        this._console = inject(ConsoleService);
+        // signals
+        this._disabled = signal(false);
+        // inputs
+        this.ariaLabelDropdown = input('Options List');
+        this.ariaLabel = input(undefined);
+        this.markFirst = input(true, { transform: booleanAttribute });
+        this.placeholder = input(this.config.placeholder);
+        this.fixedPlaceholder = input(true);
+        this.notFoundText = input(undefined);
+        this.typeToSearchText = input(undefined);
+        this.preventToggleOnRightClick = input(false);
+        this.addTagText = input(undefined);
+        this.loadingText = input(undefined);
+        this.clearAllText = input(undefined);
+        this.dropdownPosition = input('auto');
+        this.appendTo = input(undefined);
+        this.loading = input(false, { transform: booleanAttribute });
+        this.closeOnSelect = input(true, { transform: booleanAttribute });
+        this.hideSelected = input(false, { transform: booleanAttribute });
+        this.selectOnTab = input(false, { transform: booleanAttribute });
+        this.openOnEnter = input(undefined, { transform: booleanAttribute });
+        this.maxSelectedItems = input(undefined, { transform: numberAttribute });
+        this.groupBy = input(undefined);
+        this.groupValue = input(undefined);
+        this.bufferAmount = input(4, { transform: numberAttribute });
+        this.virtualScroll = input(undefined, { transform: booleanAttribute });
+        this.selectableGroup = input(false, { transform: booleanAttribute });
         this.tabFocusOnClearButton = input();
-        this.readonly = false;
-        this.searchWhileComposing = true;
-        this.minTermLength = 0;
-        this.editableSearchTerm = false;
-        this.ngClass = null;
-        this.multiple = false;
-        this.addTag = false;
-        this.searchable = true;
-        this.clearable = true;
-        this.isOpen = false;
+        this.selectableGroupAsModel = input(true, { transform: booleanAttribute });
+        this.searchFn = input(null);
+        this.trackByFn = input(null);
+        this.clearOnBackspace = input(true, { transform: booleanAttribute });
+        this.labelForId = input(null);
+        this.inputAttrs = input({});
+        this.tabIndex = input(undefined, { transform: numberAttribute });
+        this.readonly = input(false, { transform: booleanAttribute });
+        this.searchWhileComposing = input(true, { transform: booleanAttribute });
+        this.minTermLength = input(0, { transform: numberAttribute });
+        this.editableSearchTerm = input(false, { transform: booleanAttribute });
+        this.ngClass = input(null);
+        this.typeahead = input(undefined);
+        this.multiple = input(false, { transform: booleanAttribute });
+        this.addTag = input(false);
+        this.searchable = input(true, { transform: booleanAttribute });
+        this.clearable = input(true, { transform: booleanAttribute });
+        this.deselectOnClick = input();
+        this.clearSearchOnAdd = input(undefined);
+        this.compareWith = input(undefined, {
+            transform: (fn) => {
+                if (fn !== undefined && fn !== null && !isFunction(fn)) {
+                    throw Error('`compareWith` must be a function.');
+                }
+                return fn;
+            },
+        });
+        // models
+        this.bindLabel = model(undefined);
+        this.bindValue = model(undefined);
+        this.appearance = model(undefined);
+        this.isOpen = model(false);
+        this.items = model([]);
         // output events
-        this.blurEvent = new EventEmitter();
-        this.focusEvent = new EventEmitter();
-        this.changeEvent = new EventEmitter();
-        this.openEvent = new EventEmitter();
-        this.closeEvent = new EventEmitter();
-        this.searchEvent = new EventEmitter();
-        this.clearEvent = new EventEmitter();
-        this.addEvent = new EventEmitter();
-        this.removeEvent = new EventEmitter();
-        this.scroll = new EventEmitter();
-        this.scrollToEnd = new EventEmitter();
-        this.useDefaultClass = true;
+        this.blurEvent = output({ alias: 'blur' });
+        this.focusEvent = output({ alias: 'focus' });
+        this.changeEvent = output({ alias: 'change' });
+        this.openEvent = output({ alias: 'open' });
+        this.closeEvent = output({ alias: 'close' });
+        this.searchEvent = output({ alias: 'search' });
+        this.clearEvent = output({ alias: 'clear' });
+        this.addEvent = output({ alias: 'add' });
+        this.removeEvent = output({ alias: 'remove' });
+        this.scroll = output({ alias: 'scroll' });
+        this.scrollToEnd = output({ alias: 'scrollToEnd' });
+        // computed
+        this.disabled = computed(() => this.readonly() || this._disabled());
+        this.clearSearchOnAddValue = computed(() => {
+            if (isDefined(this.clearSearchOnAdd())) {
+                return this.clearSearchOnAdd();
+            }
+            if (isDefined(this.config.clearSearchOnAdd)) {
+                return this.config.clearSearchOnAdd;
+            }
+            return this.closeOnSelect();
+        });
+        this.deselectOnClickValue = computed(() => {
+            if (isDefined(this.deselectOnClick())) {
+                return this.deselectOnClick();
+            }
+            if (isDefined(this.config.deselectOnClick)) {
+                return this.config.deselectOnClick;
+            }
+            return this.multiple();
+        });
+        // content child queries
+        this.optionTemplate = contentChild(NgOptionTemplateDirective, { read: TemplateRef });
+        this.optgroupTemplate = contentChild(NgOptgroupTemplateDirective, { read: TemplateRef });
+        this.labelTemplate = contentChild(NgLabelTemplateDirective, { read: TemplateRef });
+        this.multiLabelTemplate = contentChild(NgMultiLabelTemplateDirective, { read: TemplateRef });
+        this.headerTemplate = contentChild(NgHeaderTemplateDirective, { read: TemplateRef });
+        this.footerTemplate = contentChild(NgFooterTemplateDirective, { read: TemplateRef });
+        this.notFoundTemplate = contentChild(NgNotFoundTemplateDirective, { read: TemplateRef });
+        this.placeholderTemplate = contentChild(NgPlaceholderTemplateDirective, { read: TemplateRef });
+        this.typeToSearchTemplate = contentChild(NgTypeToSearchTemplateDirective, { read: TemplateRef });
+        this.loadingTextTemplate = contentChild(NgLoadingTextTemplateDirective, { read: TemplateRef });
+        this.tagTemplate = contentChild(NgTagTemplateDirective, { read: TemplateRef });
+        this.loadingSpinnerTemplate = contentChild(NgLoadingSpinnerTemplateDirective, { read: TemplateRef });
+        this.clearButtonTemplate = contentChild(NgClearButtonTemplateDirective, { read: TemplateRef });
+        // view children queries
+        this.dropdownPanel = viewChild(forwardRef(() => NgDropdownPanelComponent));
+        this.searchInput = viewChild('searchInput');
+        this.clearButton = viewChild('clearButton');
+        // public variables
+        this.ngOptions = contentChildren(NgOptionComponent, { descendants: true });
+        this.ngOptionsObservable = toObservable(this.ngOptions);
         this.viewPortItems = [];
         this.searchTerm = null;
         this.dropdownId = newId();
@@ -2162,72 +2205,28 @@ class NgSelectComponent {
         this._isComposing = false;
         this._destroy$ = new Subject();
         this._keyPress$ = new Subject();
-        this._items = [];
-        this.keyDownFn = (_) => true;
+        this.keyDownFn = input((_) => true);
         this.clearItem = (item) => {
             const option = this.selectedItems.find((x) => x.value === item);
             this.unselect(option);
         };
         this.trackByOption = (_, item) => {
-            if (this.trackByFn) {
-                return this.trackByFn(item.value);
+            if (this.trackByFn()) {
+                return this.trackByFn()(item.value);
             }
             return item;
         };
         this._onChange = (_) => { };
         this._onTouched = () => { };
+        const config = this.config;
+        const newSelectionModel = inject(SELECTION_MODEL_FACTORY, { optional: true });
+        const _elementRef = inject(ElementRef);
         this._mergeGlobalConfig(config);
         this.itemsList = new ItemsList(this, newSelectionModel ? newSelectionModel() : DefaultSelectionModelFactory());
         this.element = _elementRef.nativeElement;
     }
     get filtered() {
-        return (!!this.searchTerm && this.searchable) || this._isComposing;
-    }
-    get single() {
-        return !this.multiple;
-    }
-    get items() {
-        return this._items;
-    }
-    set items(value) {
-        this._itemsAreUsed = true;
-        this._items = value ?? [];
-    }
-    get disabled() {
-        return this.readonly || this._disabled;
-    }
-    get compareWith() {
-        return this._compareWith;
-    }
-    set compareWith(fn) {
-        if (fn !== undefined && fn !== null && !isFunction(fn)) {
-            throw Error('`compareWith` must be a function.');
-        }
-        this._compareWith = fn;
-    }
-    get clearSearchOnAdd() {
-        if (isDefined(this._clearSearchOnAdd)) {
-            return this._clearSearchOnAdd;
-        }
-        else if (isDefined(this.config.clearSearchOnAdd)) {
-            return this.config.clearSearchOnAdd;
-        }
-        return this.closeOnSelect;
-    }
-    set clearSearchOnAdd(value) {
-        this._clearSearchOnAdd = value;
-    }
-    get deselectOnClick() {
-        if (isDefined(this._deselectOnClick)) {
-            return this._deselectOnClick;
-        }
-        else if (isDefined(this.config.deselectOnClick)) {
-            return this.config.deselectOnClick;
-        }
-        return this.multiple;
-    }
-    set deselectOnClick(value) {
-        this._deselectOnClick = value;
+        return (!!this.searchTerm && this.searchable()) || this._isComposing;
     }
     get selectedItems() {
         return this.itemsList.selectedItems;
@@ -2239,8 +2238,8 @@ class NgSelectComponent {
         return this.selectedItems.length > 0;
     }
     get currentPanelPosition() {
-        if (this.dropdownPanel) {
-            return this.dropdownPanel.currentPosition;
+        if (this.dropdownPanel()) {
+            return this.dropdownPanel().currentPosition;
         }
         return undefined;
     }
@@ -2249,20 +2248,20 @@ class NgSelectComponent {
             return false;
         }
         const term = this.searchTerm.toLowerCase().trim();
-        return (this.addTag &&
+        return (this.addTag() &&
             !this.itemsList.filteredItems.some((x) => x.label.toLowerCase() === term) &&
-            ((!this.hideSelected && this.isOpen) || !this.selectedItems.some((x) => x.label.toLowerCase() === term)) &&
-            !this.loading);
+            ((!this.hideSelected() && this.isOpen()) || !this.selectedItems.some((x) => x.label.toLowerCase() === term)) &&
+            !this.loading());
     }
     get _editableSearchTerm() {
-        return this.editableSearchTerm && !this.multiple;
+        return this.editableSearchTerm() && !this.multiple();
     }
     get _isTypeahead() {
-        return this.typeahead && this.typeahead.observers.length > 0;
+        return this.typeahead() && this.typeahead().observed;
     }
     get _validTerm() {
         const term = this.searchTerm?.trim();
-        return term && term.length >= this.minTermLength;
+        return term && term.length >= this.minTermLength();
     }
     ngOnInit() {
         this._handleKeyPresses();
@@ -2273,6 +2272,7 @@ class NgSelectComponent {
             this.itemsList.clearSelected();
         }
         if (changes.items) {
+            this._itemsAreUsed = true;
             this._setItems(changes.items.currentValue || []);
         }
         if (changes.isOpen) {
@@ -2280,7 +2280,7 @@ class NgSelectComponent {
         }
         if (changes.groupBy) {
             if (!changes.items) {
-                this._setItems([...this.items]);
+                this._setItems([...this.items()]);
             }
         }
         if (changes.inputAttrs) {
@@ -2304,7 +2304,7 @@ class NgSelectComponent {
     handleKeyDown($event) {
         const keyName = $event.key;
         if (Object.values(KeyCode).includes(keyName)) {
-            if (this.keyDownFn($event) === false) {
+            if (this.keyDownFn()($event) === false) {
                 return;
             }
             this.handleKeyCode($event);
@@ -2315,7 +2315,7 @@ class NgSelectComponent {
     }
     handleKeyCode($event) {
         const target = $event.target;
-        if (this.clearButton && this.clearButton.nativeElement === target) {
+        if (this.clearButton() && this.clearButton().nativeElement === target) {
             this.handleKeyCodeClear($event);
         }
         else {
@@ -2357,7 +2357,10 @@ class NgSelectComponent {
         }
     }
     handleMousedown($event) {
-        if (this.preventToggleOnRightClick && $event.button === 2) {
+        if (this.disabled()) {
+            return;
+        }
+        if (this.preventToggleOnRightClick() && $event.button === 2) {
             return false;
         }
         const target = $event.target;
@@ -2378,7 +2381,7 @@ class NgSelectComponent {
         if (!this.focused) {
             this.focus();
         }
-        if (this.searchable) {
+        if (this.searchable()) {
             this.open();
         }
         else {
@@ -2386,7 +2389,7 @@ class NgSelectComponent {
         }
     }
     handleArrowClick() {
-        if (this.isOpen) {
+        if (this.isOpen()) {
             this.close();
         }
         else {
@@ -2404,7 +2407,7 @@ class NgSelectComponent {
         this._onSelectionChanged();
     }
     clearModel() {
-        if (!this.clearable) {
+        if (!this.clearable()) {
             return;
         }
         this.itemsList.clearSelected();
@@ -2422,11 +2425,11 @@ class NgSelectComponent {
         this._onTouched = fn;
     }
     setDisabledState(state) {
-        this._disabled = state;
+        this._disabled.set(state);
         this._cd.markForCheck();
     }
     toggle() {
-        if (!this.isOpen) {
+        if (!this.isOpen()) {
             this.open();
         }
         else {
@@ -2434,14 +2437,14 @@ class NgSelectComponent {
         }
     }
     open() {
-        if (this.disabled || this.isOpen || this._manualOpen) {
+        if (this.disabled() || this.isOpen() || this._manualOpen) {
             return;
         }
-        if (!this._isTypeahead && !this.addTag && this.itemsList.noItemsToSelect) {
+        if (!this._isTypeahead && !this.addTag() && this.itemsList.noItemsToSelect) {
             return;
         }
-        this.isOpen = true;
-        this.itemsList.markSelectedOrDefault(this.markFirst);
+        this.isOpen.set(true);
+        this.itemsList.markSelectedOrDefault(this.markFirst());
         this.openEvent.emit();
         if (!this.searchTerm) {
             this.focus();
@@ -2449,10 +2452,10 @@ class NgSelectComponent {
         this.detectChanges();
     }
     close() {
-        if (!this.isOpen || this._manualOpen) {
+        if (!this.isOpen() || this._manualOpen) {
             return;
         }
-        this.isOpen = false;
+        this.isOpen.set(false);
         this._isComposing = false;
         if (!this._editableSearchTerm) {
             this._clearSearch();
@@ -2466,10 +2469,10 @@ class NgSelectComponent {
         this._cd.markForCheck();
     }
     toggleItem(item) {
-        if (!item || item.disabled || this.disabled) {
+        if (!item || item.disabled || this.disabled()) {
             return;
         }
-        if (this.deselectOnClick && item.selected) {
+        if (this.deselectOnClickValue() && item.selected) {
             this.unselect(item);
         }
         else {
@@ -2482,24 +2485,24 @@ class NgSelectComponent {
     select(item) {
         if (!item.selected) {
             this.itemsList.select(item);
-            if (this.clearSearchOnAdd && !this._editableSearchTerm) {
+            if (this.clearSearchOnAddValue() && !this._editableSearchTerm) {
                 this._clearSearch();
             }
             this._updateNgModel();
-            if (this.multiple) {
+            if (this.multiple()) {
                 this.addEvent.emit(item.value);
             }
         }
-        if (this.closeOnSelect || this.itemsList.noItemsToSelect) {
+        if (this.closeOnSelect() || this.itemsList.noItemsToSelect) {
             this.close();
         }
         this._onSelectionChanged();
     }
     focus() {
-        this.searchInput.nativeElement.focus();
+        this.searchInput().nativeElement.focus();
     }
     blur() {
-        this.searchInput.nativeElement.blur();
+        this.searchInput().nativeElement.blur();
     }
     unselect(item) {
         if (!item) {
@@ -2513,13 +2516,13 @@ class NgSelectComponent {
     }
     selectTag() {
         let tag;
-        if (isFunction(this.addTag)) {
-            tag = this.addTag(this.searchTerm);
+        if (isFunction(this.addTag())) {
+            tag = this.addTag()(this.searchTerm);
         }
         else {
-            tag = this._primitive ? this.searchTerm : { [this.bindLabel]: this.searchTerm };
+            tag = this._primitive ? this.searchTerm : { [this.bindLabel()]: this.searchTerm };
         }
-        const handleTag = (item) => (this._isTypeahead || !this.isOpen ? this.itemsList.mapItem(item, null) : this.itemsList.addItem(item));
+        const handleTag = (item) => (this._isTypeahead || !this.isOpen() ? this.itemsList.mapItem(item, null) : this.itemsList.addItem(item));
         if (isPromise(tag)) {
             tag.then((item) => this.select(handleTag(item))).catch(() => { });
         }
@@ -2528,45 +2531,45 @@ class NgSelectComponent {
         }
     }
     showClear() {
-        return this.clearable && (this.hasValue || this.searchTerm) && !this.disabled;
+        return this.clearable() && (this.hasValue || this.searchTerm) && !this.disabled();
     }
     focusOnClear() {
         this.blur();
-        if (this.clearButton) {
-            this.clearButton.nativeElement.focus();
+        if (this.clearButton()) {
+            this.clearButton().nativeElement.focus();
         }
     }
     showNoItemsFound() {
         const empty = this.itemsList.filteredItems.length === 0;
-        return (((empty && !this._isTypeahead && !this.loading) || (empty && this._isTypeahead && this._validTerm && !this.loading)) &&
+        return (((empty && !this._isTypeahead && !this.loading()) || (empty && this._isTypeahead && this._validTerm && !this.loading())) &&
             !this.showAddTag);
     }
     showTypeToSearch() {
         const empty = this.itemsList.filteredItems.length === 0;
-        return empty && this._isTypeahead && !this._validTerm && !this.loading;
+        return empty && this._isTypeahead && !this._validTerm && !this.loading();
     }
     onCompositionStart() {
         this._isComposing = true;
     }
     onCompositionEnd(term) {
         this._isComposing = false;
-        if (this.searchWhileComposing) {
+        if (this.searchWhileComposing()) {
             return;
         }
         this.filter(term);
     }
     filter(term) {
-        if (this._isComposing && !this.searchWhileComposing) {
+        if (this._isComposing && !this.searchWhileComposing()) {
             return;
         }
         this.searchTerm = term;
-        if (this._isTypeahead && (this._validTerm || this.minTermLength === 0)) {
-            this.typeahead.next(term);
+        if (this._isTypeahead && (this._validTerm || this.minTermLength() === 0)) {
+            this.typeahead().next(term);
         }
         if (!this._isTypeahead) {
             this.itemsList.filter(this.searchTerm);
-            if (this.isOpen) {
-                this.itemsList.markSelectedOrDefault(this.markFirst);
+            if (this.isOpen()) {
+                this.itemsList.markSelectedOrDefault(this.markFirst());
             }
         }
         this.searchEvent.emit({ term, items: this.itemsList.filteredItems.map((x) => x.value) });
@@ -2586,7 +2589,7 @@ class NgSelectComponent {
     onInputBlur($event) {
         this.element.classList.remove('ng-select-focused');
         this.blurEvent.emit($event);
-        if (!this.isOpen && !this.disabled) {
+        if (!this.isOpen() && !this.disabled()) {
             this._onTouched();
         }
         if (this._editableSearchTerm) {
@@ -2611,61 +2614,57 @@ class NgSelectComponent {
     }
     _setItems(items) {
         const firstItem = items[0];
-        this.bindLabel = this.bindLabel || this._defaultLabel;
-        this._primitive = isDefined(firstItem) ? !isObject(firstItem) : this._primitive || this.bindLabel === this._defaultLabel;
+        this.bindLabel.set(this.bindLabel() || this._defaultLabel);
+        this._primitive = isDefined(firstItem) ? !isObject(firstItem) : this._primitive || this.bindLabel() === this._defaultLabel;
         this.itemsList.setItems(items);
         if (items.length > 0 && this.hasValue) {
             this.itemsList.mapSelectedItems();
         }
-        if (this.isOpen && isDefined(this.searchTerm) && !this._isTypeahead) {
+        if (this.isOpen() && isDefined(this.searchTerm) && !this._isTypeahead) {
             this.itemsList.filter(this.searchTerm);
         }
-        if (this._isTypeahead || this.isOpen) {
-            this.itemsList.markSelectedOrDefault(this.markFirst);
+        if (this._isTypeahead || this.isOpen()) {
+            this.itemsList.markSelectedOrDefault(this.markFirst());
         }
     }
     _setItemsFromNgOptions() {
         const mapNgOptions = (options) => {
-            this.items = options.map((option) => ({
-                $ngOptionValue: option.value,
+            const items = options.map((option) => ({
+                $ngOptionValue: option.value(),
                 $ngOptionLabel: option.elementRef.nativeElement.innerHTML,
-                disabled: option.disabled,
-            }));
-            this.itemsList.setItems(this.items);
+                disabled: option.disabled(),
+            })) ?? [];
+            this.items.set(items);
+            this.itemsList.setItems(items);
             if (this.hasValue) {
                 this.itemsList.mapSelectedItems();
             }
-            this.detectChanges();
         };
-        const handleOptionChange = () => {
-            const changedOrDestroyed = merge(this.ngOptions.changes, this._destroy$);
-            merge(...this.ngOptions.map((option) => option.stateChange$))
-                .pipe(takeUntil(changedOrDestroyed))
-                .subscribe((option) => {
+        const handleOptionChange = (options) => {
+            return merge(...options.map((option) => option.stateChange$)).pipe(tap((option) => {
                 const item = this.itemsList.findItem(option.value);
                 item.disabled = option.disabled;
                 item.label = option.label || item.label;
-                this._cd.detectChanges();
-            });
+            }));
         };
-        this.ngOptions.changes.pipe(startWith(this.ngOptions), takeUntil(this._destroy$)).subscribe((options) => {
-            this.bindLabel = this._defaultLabel;
+        this.ngOptionsObservable.pipe(startWith(this.ngOptions()), takeUntil(this._destroy$), tap((options) => {
+            this.bindLabel.set(this._defaultLabel);
             mapNgOptions(options);
-            handleOptionChange();
-        });
+            this._cd.detectChanges();
+        }), switchMap((options) => handleOptionChange(options))).subscribe();
     }
     _isValidWriteValue(value) {
-        if (!isDefined(value) || (this.multiple && value === '') || (Array.isArray(value) && value.length === 0)) {
+        if (!isDefined(value) || (this.multiple() && value === '') || (Array.isArray(value) && value.length === 0)) {
             return false;
         }
         const validateBinding = (item) => {
-            if (!isDefined(this.compareWith) && isObject(item) && this.bindValue) {
+            if (!isDefined(this.compareWith()) && isObject(item) && this.bindValue()) {
                 this._console.warn(`Setting object(${JSON.stringify(item)}) as your model with bindValue is not allowed unless [compareWith] is used.`);
                 return false;
             }
             return true;
         };
-        if (this.multiple) {
+        if (this.multiple()) {
             if (!Array.isArray(value)) {
                 this._console.warn('Multiple select ngModel should be array.');
                 return false;
@@ -2687,20 +2686,20 @@ class NgSelectComponent {
             }
             else {
                 const isValObject = isObject(val);
-                const isPrimitive = !isValObject && !this.bindValue;
+                const isPrimitive = !isValObject && !this.bindValue();
                 if (isValObject || isPrimitive) {
                     this.itemsList.select(this.itemsList.mapItem(val, null));
                 }
-                else if (this.bindValue) {
+                else if (this.bindValue()) {
                     item = {
-                        [this.bindLabel]: null,
-                        [this.bindValue]: val,
+                        [this.bindLabel()]: null,
+                        [this.bindValue()]: val,
                     };
                     this.itemsList.select(this.itemsList.mapItem(item, null));
                 }
             }
         };
-        if (this.multiple) {
+        if (this.multiple()) {
             ngModel.forEach((item) => select(item));
         }
         else {
@@ -2708,7 +2707,7 @@ class NgSelectComponent {
         }
     }
     _handleKeyPresses() {
-        if (this.searchable) {
+        if (this.searchable()) {
             return;
         }
         this._keyPress$
@@ -2716,7 +2715,7 @@ class NgSelectComponent {
             .subscribe((term) => {
             const item = this.itemsList.findByLabel(term);
             if (item) {
-                if (this.isOpen) {
+                if (this.isOpen()) {
                     this.itemsList.markItem(item);
                     this._scrollToMarked();
                     this._cd.markForCheck();
@@ -2729,14 +2728,14 @@ class NgSelectComponent {
         });
     }
     _setInputAttributes() {
-        const input = this.searchInput.nativeElement;
+        const input = this.searchInput().nativeElement;
         const attributes = {
             type: 'text',
             autocorrect: 'off',
             autocapitalize: 'off',
             autocomplete: 'off',
             'aria-controls': this.dropdownId,
-            ...this.inputAttrs,
+            ...this.inputAttrs(),
         };
         for (const key of Object.keys(attributes)) {
             input.setAttribute(key, attributes[key]);
@@ -2748,14 +2747,14 @@ class NgSelectComponent {
     _updateNgModel() {
         const model = [];
         for (const item of this.selectedItems) {
-            if (this.bindValue) {
+            if (this.bindValue()) {
                 let value = null;
                 if (item.children) {
-                    const groupKey = this.groupValue ? this.bindValue : this.groupBy;
-                    value = item.value[groupKey || this.groupBy];
+                    const groupKey = this.groupValue() ? this.bindValue() : this.groupBy();
+                    value = item.value[groupKey || this.groupBy()];
                 }
                 else {
-                    value = this.itemsList.resolveNested(item.value, this.bindValue);
+                    value = this.itemsList.resolveNested(item.value, this.bindValue());
                 }
                 model.push(value);
             }
@@ -2764,7 +2763,7 @@ class NgSelectComponent {
             }
         }
         const selected = this.selectedItems.map((x) => x.value);
-        if (this.multiple) {
+        if (this.multiple()) {
             this._onChange(model);
             this.changeEvent.emit(selected);
         }
@@ -2784,39 +2783,40 @@ class NgSelectComponent {
     _changeSearch(searchTerm) {
         this.searchTerm = searchTerm;
         if (this._isTypeahead) {
-            this.typeahead.next(searchTerm);
+            this.typeahead().next(searchTerm);
         }
     }
     _scrollToMarked() {
-        if (!this.isOpen || !this.dropdownPanel) {
+        if (!this.isOpen() || !this.dropdownPanel()) {
             return;
         }
-        this.dropdownPanel.scrollTo(this.itemsList.markedItem);
+        this.dropdownPanel().scrollTo(this.itemsList.markedItem);
     }
     _scrollToTag() {
-        if (!this.isOpen || !this.dropdownPanel) {
+        if (!this.isOpen() || !this.dropdownPanel()) {
             return;
         }
-        this.dropdownPanel.scrollToTag();
+        this.dropdownPanel().scrollToTag();
     }
     _onSelectionChanged() {
-        if (this.isOpen && this.deselectOnClick && this.appendTo) {
+        const appendTo = this.appendTo() ?? this.config.appendTo;
+        if (this.isOpen() && this.deselectOnClickValue() && appendTo) {
             // Make sure items are rendered.
             this._cd.detectChanges();
-            this.dropdownPanel.adjustPosition();
+            this.dropdownPanel().adjustPosition();
         }
     }
     _handleTab($event) {
-        if (this.isOpen === false) {
+        if (this.isOpen() === false) {
             if (this.showClear() && !$event.shiftKey && this.tabFocusOnClear()) {
                 this.focusOnClear();
                 $event.preventDefault();
             }
-            else if (!this.addTag) {
+            else if (!this.addTag()) {
                 return;
             }
         }
-        if (this.selectOnTab) {
+        if (this.selectOnTab()) {
             if (this.itemsList.markedItem) {
                 this.toggleItem(this.itemsList.markedItem);
                 $event.preventDefault();
@@ -2834,7 +2834,8 @@ class NgSelectComponent {
         }
     }
     _handleEnter($event) {
-        if (this.isOpen || this._manualOpen) {
+        const openOnEnter = this.openOnEnter() ?? this.config.openOnEnter;
+        if (this.isOpen() || this._manualOpen) {
             if (this.itemsList.markedItem) {
                 this.toggleItem(this.itemsList.markedItem);
             }
@@ -2842,7 +2843,7 @@ class NgSelectComponent {
                 this.selectTag();
             }
         }
-        else if (this.openOnEnter) {
+        else if (openOnEnter) {
             this.open();
         }
         else {
@@ -2851,7 +2852,7 @@ class NgSelectComponent {
         $event.preventDefault();
     }
     _handleSpace($event) {
-        if (this.isOpen || this._manualOpen) {
+        if (this.isOpen() || this._manualOpen) {
             return;
         }
         this.open();
@@ -2870,7 +2871,7 @@ class NgSelectComponent {
         $event.preventDefault();
     }
     _handleArrowUp($event) {
-        if (!this.isOpen) {
+        if (!this.isOpen()) {
             return;
         }
         if (this._nextItemIsTag(-1)) {
@@ -2885,13 +2886,13 @@ class NgSelectComponent {
     }
     _nextItemIsTag(nextStep) {
         const nextIndex = this.itemsList.markedIndex + nextStep;
-        return (this.addTag && this.searchTerm && this.itemsList.markedItem && (nextIndex < 0 || nextIndex === this.itemsList.filteredItems.length));
+        return (this.addTag() && this.searchTerm && this.itemsList.markedItem && (nextIndex < 0 || nextIndex === this.itemsList.filteredItems.length));
     }
     _handleBackspace() {
-        if (this.searchTerm || !this.clearable || !this.clearOnBackspace || !this.hasValue) {
+        if (this.searchTerm || !this.clearable() || !this.clearOnBackspace() || !this.hasValue) {
             return;
         }
-        if (this.multiple) {
+        if (this.multiple()) {
             this.unselect(this.itemsList.lastSelectedItem);
         }
         else {
@@ -2899,19 +2900,9 @@ class NgSelectComponent {
         }
     }
     _mergeGlobalConfig(config) {
-        this.placeholder = this.placeholder || config.placeholder;
-        this.fixedPlaceholder = this.fixedPlaceholder || config.fixedPlaceholder;
-        this.notFoundText = this.notFoundText || config.notFoundText;
-        this.typeToSearchText = this.typeToSearchText || config.typeToSearchText;
-        this.addTagText = this.addTagText || config.addTagText;
-        this.loadingText = this.loadingText || config.loadingText;
-        this.clearAllText = this.clearAllText || config.clearAllText;
-        this.virtualScroll = this.getVirtualScroll(config);
-        this.openOnEnter = isDefined(this.openOnEnter) ? this.openOnEnter : config.openOnEnter;
-        this.appendTo = this.appendTo || config.appendTo;
-        this.bindValue = this.bindValue || config.bindValue;
-        this.bindLabel = this.bindLabel || config.bindLabel;
-        this.appearance = this.appearance || config.appearance;
+        this.bindValue.set(this.bindValue() || config.bindValue);
+        this.bindLabel.set(this.bindLabel() || config.bindLabel);
+        this.appearance.set(this.appearance() || config.appearance);
         this._setTabFocusOnClear();
     }
     /**
@@ -2922,7 +2913,7 @@ class NgSelectComponent {
      *  @returns `true` if virtual scroll is enabled, `false` otherwise
      */
     getVirtualScroll(config) {
-        return isDefined(this.virtualScroll) ? this.virtualScroll : this.isVirtualScrollDisabled(config);
+        return isDefined(this.virtualScroll) ? this.virtualScroll() : this.isVirtualScrollDisabled(config);
     }
     /**
      * Gets disableVirtualScroll value from input or from config
@@ -2934,15 +2925,15 @@ class NgSelectComponent {
     isVirtualScrollDisabled(config) {
         return isDefined(config.disableVirtualScroll) ? !config.disableVirtualScroll : false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgSelectComponent, deps: [{ token: 'class', attribute: true }, { token: 'autofocus', attribute: true }, { token: NgSelectConfig }, { token: SELECTION_MODEL_FACTORY, optional: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: ConsoleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: NgSelectComponent, isStandalone: true, selector: "ng-select", inputs: { ariaLabelDropdown: { classPropertyName: "ariaLabelDropdown", publicName: "ariaLabelDropdown", isSignal: false, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: false, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, markFirst: { classPropertyName: "markFirst", publicName: "markFirst", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, fixedPlaceholder: { classPropertyName: "fixedPlaceholder", publicName: "fixedPlaceholder", isSignal: false, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: false, isRequired: false, transformFunction: null }, typeToSearchText: { classPropertyName: "typeToSearchText", publicName: "typeToSearchText", isSignal: false, isRequired: false, transformFunction: null }, preventToggleOnRightClick: { classPropertyName: "preventToggleOnRightClick", publicName: "preventToggleOnRightClick", isSignal: false, isRequired: false, transformFunction: null }, addTagText: { classPropertyName: "addTagText", publicName: "addTagText", isSignal: false, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: false, isRequired: false, transformFunction: null }, clearAllText: { classPropertyName: "clearAllText", publicName: "clearAllText", isSignal: false, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: false, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, hideSelected: { classPropertyName: "hideSelected", publicName: "hideSelected", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectOnTab: { classPropertyName: "selectOnTab", publicName: "selectOnTab", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, openOnEnter: { classPropertyName: "openOnEnter", publicName: "openOnEnter", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: false, isRequired: false, transformFunction: numberAttribute }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: false, isRequired: false, transformFunction: null }, groupValue: { classPropertyName: "groupValue", publicName: "groupValue", isSignal: false, isRequired: false, transformFunction: null }, bufferAmount: { classPropertyName: "bufferAmount", publicName: "bufferAmount", isSignal: false, isRequired: false, transformFunction: numberAttribute }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectableGroup: { classPropertyName: "selectableGroup", publicName: "selectableGroup", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectableGroupAsModel: { classPropertyName: "selectableGroupAsModel", publicName: "selectableGroupAsModel", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: false, isRequired: false, transformFunction: null }, trackByFn: { classPropertyName: "trackByFn", publicName: "trackByFn", isSignal: false, isRequired: false, transformFunction: null }, clearOnBackspace: { classPropertyName: "clearOnBackspace", publicName: "clearOnBackspace", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, labelForId: { classPropertyName: "labelForId", publicName: "labelForId", isSignal: false, isRequired: false, transformFunction: null }, inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, tabFocusOnClearButton: { classPropertyName: "tabFocusOnClearButton", publicName: "tabFocusOnClearButton", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, searchWhileComposing: { classPropertyName: "searchWhileComposing", publicName: "searchWhileComposing", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, minTermLength: { classPropertyName: "minTermLength", publicName: "minTermLength", isSignal: false, isRequired: false, transformFunction: numberAttribute }, editableSearchTerm: { classPropertyName: "editableSearchTerm", publicName: "editableSearchTerm", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, ngClass: { classPropertyName: "ngClass", publicName: "ngClass", isSignal: false, isRequired: false, transformFunction: null }, typeahead: { classPropertyName: "typeahead", publicName: "typeahead", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, addTag: { classPropertyName: "addTag", publicName: "addTag", isSignal: false, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: false, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: false, isRequired: false, transformFunction: null }, clearSearchOnAdd: { classPropertyName: "clearSearchOnAdd", publicName: "clearSearchOnAdd", isSignal: false, isRequired: false, transformFunction: null }, deselectOnClick: { classPropertyName: "deselectOnClick", publicName: "deselectOnClick", isSignal: false, isRequired: false, transformFunction: null }, keyDownFn: { classPropertyName: "keyDownFn", publicName: "keyDownFn", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { blurEvent: "blur", focusEvent: "focus", changeEvent: "change", openEvent: "open", closeEvent: "close", searchEvent: "search", clearEvent: "clear", addEvent: "add", removeEvent: "remove", scroll: "scroll", scrollToEnd: "scrollToEnd" }, host: { listeners: { "keydown": "handleKeyDown($event)" }, properties: { "class.ng-select-typeahead": "this.typeahead", "class.ng-select-multiple": "this.multiple", "class.ng-select-taggable": "this.addTag", "class.ng-select-searchable": "this.searchable", "class.ng-select-clearable": "this.clearable", "class.ng-select-opened": "this.isOpen", "class.ng-select": "this.useDefaultClass", "class.ng-select-filtered": "this.filtered", "class.ng-select-single": "this.single", "class.ng-select-disabled": "this.disabled" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: NgSelectComponent, isStandalone: true, selector: "ng-select", inputs: { ariaLabelDropdown: { classPropertyName: "ariaLabelDropdown", publicName: "ariaLabelDropdown", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, markFirst: { classPropertyName: "markFirst", publicName: "markFirst", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, fixedPlaceholder: { classPropertyName: "fixedPlaceholder", publicName: "fixedPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null }, typeToSearchText: { classPropertyName: "typeToSearchText", publicName: "typeToSearchText", isSignal: true, isRequired: false, transformFunction: null }, preventToggleOnRightClick: { classPropertyName: "preventToggleOnRightClick", publicName: "preventToggleOnRightClick", isSignal: true, isRequired: false, transformFunction: null }, addTagText: { classPropertyName: "addTagText", publicName: "addTagText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAllText: { classPropertyName: "clearAllText", publicName: "clearAllText", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, hideSelected: { classPropertyName: "hideSelected", publicName: "hideSelected", isSignal: true, isRequired: false, transformFunction: null }, selectOnTab: { classPropertyName: "selectOnTab", publicName: "selectOnTab", isSignal: true, isRequired: false, transformFunction: null }, openOnEnter: { classPropertyName: "openOnEnter", publicName: "openOnEnter", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, groupValue: { classPropertyName: "groupValue", publicName: "groupValue", isSignal: true, isRequired: false, transformFunction: null }, bufferAmount: { classPropertyName: "bufferAmount", publicName: "bufferAmount", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, selectableGroup: { classPropertyName: "selectableGroup", publicName: "selectableGroup", isSignal: true, isRequired: false, transformFunction: null }, tabFocusOnClearButton: { classPropertyName: "tabFocusOnClearButton", publicName: "tabFocusOnClearButton", isSignal: true, isRequired: false, transformFunction: null }, selectableGroupAsModel: { classPropertyName: "selectableGroupAsModel", publicName: "selectableGroupAsModel", isSignal: true, isRequired: false, transformFunction: null }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null }, trackByFn: { classPropertyName: "trackByFn", publicName: "trackByFn", isSignal: true, isRequired: false, transformFunction: null }, clearOnBackspace: { classPropertyName: "clearOnBackspace", publicName: "clearOnBackspace", isSignal: true, isRequired: false, transformFunction: null }, labelForId: { classPropertyName: "labelForId", publicName: "labelForId", isSignal: true, isRequired: false, transformFunction: null }, inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, searchWhileComposing: { classPropertyName: "searchWhileComposing", publicName: "searchWhileComposing", isSignal: true, isRequired: false, transformFunction: null }, minTermLength: { classPropertyName: "minTermLength", publicName: "minTermLength", isSignal: true, isRequired: false, transformFunction: null }, editableSearchTerm: { classPropertyName: "editableSearchTerm", publicName: "editableSearchTerm", isSignal: true, isRequired: false, transformFunction: null }, ngClass: { classPropertyName: "ngClass", publicName: "ngClass", isSignal: true, isRequired: false, transformFunction: null }, typeahead: { classPropertyName: "typeahead", publicName: "typeahead", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, addTag: { classPropertyName: "addTag", publicName: "addTag", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, deselectOnClick: { classPropertyName: "deselectOnClick", publicName: "deselectOnClick", isSignal: true, isRequired: false, transformFunction: null }, clearSearchOnAdd: { classPropertyName: "clearSearchOnAdd", publicName: "clearSearchOnAdd", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, keyDownFn: { classPropertyName: "keyDownFn", publicName: "keyDownFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { 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" }, host: { listeners: { "keydown": "handleKeyDown($event)" }, properties: { "class.ng-select": "true", "class.ng-select-single": "!multiple()", "class.ng-select-typeahead": "typeahead()", "class.ng-select-multiple": "multiple()", "class.ng-select-taggable": "addTag()", "class.ng-select-searchable": "searchable()", "class.ng-select-clearable": "clearable()", "class.ng-select-opened": "isOpen()", "class.ng-select-filtered": "filtered", "class.ng-select-disabled": "disabled()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NgSelectComponent),
                 multi: true,
             },
             NgDropdownPanelService,
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: NgOptionTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "optgroupTemplate", first: true, predicate: NgOptgroupTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "labelTemplate", first: true, predicate: NgLabelTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "multiLabelTemplate", first: true, predicate: NgMultiLabelTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: NgHeaderTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: NgFooterTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "notFoundTemplate", first: true, predicate: NgNotFoundTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: NgPlaceholderTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "typeToSearchTemplate", first: true, predicate: NgTypeToSearchTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "loadingTextTemplate", first: true, predicate: NgLoadingTextTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "tagTemplate", first: true, predicate: NgTagTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: NgLoadingSpinnerTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "clearButtonTemplate", first: true, predicate: NgClearButtonTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "ngOptions", predicate: NgOptionComponent, descendants: true }], viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: i0.forwardRef(() => NgDropdownPanelComponent), descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, static: true }, { propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n\t(mousedown)=\"handleMousedown($event)\"\n\t[class.ng-appearance-outline]=\"appearance === 'outline'\"\n\t[class.ng-has-value]=\"hasValue\"\n\tclass=\"ng-select-container\">\n\t<div class=\"ng-value-container\">\n\t\t@if ((selectedItems.length === 0 && !searchTerm) || fixedPlaceholder) {\n\t\t\t<ng-template #defaultPlaceholderTemplate>\n\t\t\t\t<div class=\"ng-placeholder\">{{ placeholder }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\"> </ng-template>\n\t\t}\n\n\t\t@if ((!multiLabelTemplate || !multiple) && selectedItems.length > 0) {\n\t\t\t@for (item of selectedItems; track trackByOption($index, item)) {\n\t\t\t\t<div [class.ng-value-disabled]=\"item.disabled\" class=\"ng-value\">\n\t\t\t\t\t<ng-template #defaultLabelTemplate>\n\t\t\t\t\t\t<span class=\"ng-value-icon left\" (click)=\"unselect(item)\" aria-hidden=\"true\">\u00D7</span>\n\t\t\t\t\t\t<span class=\"ng-value-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"labelTemplate || defaultLabelTemplate\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item: item.value, clear: clearItem, label: item.label }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\n\t\t@if (multiple && multiLabelTemplate && selectedValues.length > 0) {\n\t\t\t<ng-template [ngTemplateOutlet]=\"multiLabelTemplate\" [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\">\n\t\t\t</ng-template>\n\t\t}\n\n\t\t<div class=\"ng-input\">\n\t\t\t<input\n\t\t\t\t#searchInput\n\t\t\t\t(blur)=\"onInputBlur($event)\"\n\t\t\t\t(change)=\"$event.stopPropagation()\"\n\t\t\t\t(compositionend)=\"onCompositionEnd(searchInput.value)\"\n\t\t\t\t(compositionstart)=\"onCompositionStart()\"\n\t\t\t\t(focus)=\"onInputFocus($event)\"\n\t\t\t\t(input)=\"filter(searchInput.value)\"\n\t\t\t\t[attr.aria-activedescendant]=\"isOpen ? itemsList?.markedItem?.htmlId : null\"\n\t\t\t\t[attr.aria-controls]=\"isOpen ? dropdownId : null\"\n\t\t\t\t[attr.aria-expanded]=\"isOpen\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t[attr.id]=\"labelForId\"\n\t\t\t\t[attr.tabindex]=\"tabIndex\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[readOnly]=\"!searchable || itemsList.maxItemsSelected\"\n\t\t\t\t[value]=\"searchTerm ?? ''\"\n\t\t\t\taria-autocomplete=\"list\"\n\t\t\t\trole=\"combobox\" />\n\t\t</div>\n\t</div>\n\n\t@if (loading) {\n\t\t<ng-template #defaultLoadingSpinnerTemplate>\n\t\t\t<div class=\"ng-spinner-loader\"></div>\n\t\t</ng-template>\n\t\t<ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate || defaultLoadingSpinnerTemplate\"></ng-template>\n\t}\n\n\t@if (showClear()) {\n\t\t@if (clearButtonTemplate) {\n\t\t\t<ng-container [ngTemplateOutlet]=\"clearButtonTemplate\"></ng-container>\n\t\t} @else {\n\t\t\t<span\n\t\t\t\tclass=\"ng-clear-wrapper\"\n\t\t\t\trole=\"button\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.tabindex]=\"tabFocusOnClear() ? 0 : -1\"\n\t\t\t\ttitle=\"{{ clearAllText }}\"\n\t\t\t\t#clearButton\n\t\t\t\t(click)=\"handleClearClick($event)\">\n\t\t\t\t<span class=\"ng-clear\" aria-hidden=\"true\">\u00D7</span>\n\t\t\t</span>\n\t\t}\n\t}\n\n\t<span class=\"ng-arrow-wrapper\">\n\t\t<span class=\"ng-arrow\"></span>\n\t</span>\n</div>\n\n@if (isOpen) {\n\t<ng-dropdown-panel\n\t\tclass=\"ng-dropdown-panel\"\n\t\t[virtualScroll]=\"virtualScroll\"\n\t\t[bufferAmount]=\"bufferAmount\"\n\t\t[appendTo]=\"appendTo\"\n\t\t[position]=\"dropdownPosition\"\n\t\t[headerTemplate]=\"headerTemplate\"\n\t\t[footerTemplate]=\"footerTemplate\"\n\t\t[filterValue]=\"searchTerm\"\n\t\t[items]=\"itemsList.filteredItems\"\n\t\t[markedItem]=\"itemsList.markedItem\"\n\t\t(update)=\"viewPortItems = $event\"\n\t\t(scroll)=\"scroll.emit($event)\"\n\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t(outsideClick)=\"close()\"\n\t\t[class.ng-select-multiple]=\"multiple\"\n\t\t[ngClass]=\"appendTo ? (ngClass ? ngClass : classes) : null\"\n\t\t[id]=\"dropdownId\"\n\t\t[ariaLabelDropdown]=\"ariaLabelDropdown\">\n\t\t<ng-container>\n\t\t\t@for (item of viewPortItems; track trackByOption($index, item)) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ng-option\"\n\t\t\t\t\t[attr.role]=\"item.children ? 'group' : 'option'\"\n\t\t\t\t\t(click)=\"toggleItem(item)\"\n\t\t\t\t\t(mouseover)=\"onItemHover(item)\"\n\t\t\t\t\t[class.ng-option-disabled]=\"item.disabled\"\n\t\t\t\t\t[class.ng-option-selected]=\"item.selected\"\n\t\t\t\t\t[class.ng-optgroup]=\"item.children\"\n\t\t\t\t\t[class.ng-option]=\"!item.children\"\n\t\t\t\t\t[class.ng-option-child]=\"!!item.parent\"\n\t\t\t\t\t[class.ng-option-marked]=\"item === itemsList.markedItem\"\n\t\t\t\t\t[attr.aria-selected]=\"item.selected\"\n\t\t\t\t\t[attr.id]=\"item?.htmlId\"\n\t\t\t\t\t[attr.aria-setsize]=\"itemsList.filteredItems.length\"\n\t\t\t\t\t[attr.aria-posinset]=\"item.index + 1\">\n\t\t\t\t\t<ng-template #defaultOptionTemplate>\n\t\t\t\t\t\t<span class=\"ng-option-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"\n\t\t\t\t\t\t\titem.children ? optgroupTemplate || defaultOptionTemplate : optionTemplate || defaultOptionTemplate\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item: item.value, item$: item, index: item.index, searchTerm: searchTerm }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (showAddTag) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ng-option\"\n\t\t\t\t\t[class.ng-option-marked]=\"!itemsList.markedItem\"\n\t\t\t\t\t(mouseover)=\"itemsList.unmarkItem()\"\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\t(click)=\"selectTag()\">\n\t\t\t\t\t<ng-template #defaultTagTemplate>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t><span class=\"ng-tag-label\">{{ addTagText }}</span\n\t\t\t\t\t\t\t>\"{{ searchTerm }}\"</span\n\t\t\t\t\t\t>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"tagTemplate || defaultTagTemplate\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ng-container>\n\t\t@if (showNoItemsFound()) {\n\t\t\t<ng-template #defaultNotFoundTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ notFoundText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"notFoundTemplate || defaultNotFoundTemplate\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n\t\t\t</ng-template>\n\t\t}\n\t\t@if (showTypeToSearch()) {\n\t\t\t<ng-template #defaultTypeToSearchTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ typeToSearchText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template [ngTemplateOutlet]=\"typeToSearchTemplate || defaultTypeToSearchTemplate\"></ng-template>\n\t\t}\n\t\t@if (loading && itemsList.filteredItems.length === 0) {\n\t\t\t<ng-template #defaultLoadingTextTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ loadingText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"loadingTextTemplate || defaultLoadingTextTemplate\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n\t\t\t</ng-template>\n\t\t}\n\t</ng-dropdown-panel>\n}\n\n<!-- Always present aria-live region -->\n<div aria-atomic=\"true\" aria-live=\"polite\" class=\"ng-visually-hidden\" role=\"status\">\n\t@if (isOpen && showNoItemsFound()) {\n\t\t{{ notFoundText }}\n\t}\n</div>\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ng-select div,.ng-select input,.ng-select span{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ng-select [hidden]{display:none}.ng-select.ng-select-searchable .ng-select-container .ng-value-container .ng-input{opacity:1}.ng-select.ng-select-opened .ng-select-container{z-index:1001}.ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-placeholder,.ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-value{-webkit-user-select:none;user-select:none;cursor:default}.ng-select.ng-select-disabled .ng-arrow-wrapper{cursor:default}.ng-select.ng-select-filtered .ng-placeholder{display:none}.ng-select .ng-select-container{cursor:default;display:flex;outline:none;overflow:hidden;position:relative;width:100%}.ng-select .ng-select-container .ng-value-container{display:flex;flex:1}.ng-select .ng-select-container .ng-value-container .ng-input{opacity:0}.ng-select .ng-select-container .ng-value-container .ng-input>input{box-sizing:content-box;background:none transparent;border:0 none;box-shadow:none;outline:none;padding:0;cursor:default;width:100%}.ng-select .ng-select-container .ng-value-container .ng-input>input::-ms-clear{display:none}.ng-select .ng-select-container .ng-value-container .ng-input>input[readonly]{-webkit-user-select:unset;user-select:unset;width:0;padding:0}.ng-select.ng-select-single.ng-select-filtered .ng-select-container .ng-value-container .ng-value{visibility:hidden}.ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:none}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{position:absolute;left:0;width:100%}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-icon{display:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{flex-wrap:wrap}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{position:absolute}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:nowrap}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-icon{display:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{cursor:pointer}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{flex:1;z-index:2}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{z-index:1}.ng-select .ng-clear-wrapper{cursor:pointer;position:relative;width:17px;-webkit-user-select:none;user-select:none}.ng-select .ng-clear-wrapper .ng-clear{display:inline-block;font-size:18px;line-height:1;pointer-events:none}.ng-select .ng-spinner-loader{border-radius:50%;width:17px;height:17px;margin-right:5px;font-size:10px;position:relative;text-indent:-9999em;border-top:2px solid rgba(66,66,66,.2);border-right:2px solid rgba(66,66,66,.2);border-bottom:2px solid rgba(66,66,66,.2);border-left:2px solid #424242;transform:translateZ(0);animation:load8 .8s infinite linear}.ng-select .ng-spinner-loader:after{border-radius:50%;width:17px;height:17px}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ng-select .ng-arrow-wrapper{cursor:pointer;position:relative;text-align:center;-webkit-user-select:none;user-select:none}.ng-select .ng-arrow-wrapper .ng-arrow{pointer-events:none;display:inline-block;height:0;width:0;position:relative}.ng-dropdown-panel{box-sizing:border-box;position:absolute;opacity:0;width:100%;z-index:1050;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .ng-dropdown-panel-items{display:block;height:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;max-height:240px;overflow-y:auto}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{box-sizing:border-box;cursor:pointer;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-option-label:empty:before{content:\"\\200b\"}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .highlighted{font-weight:700;text-decoration:underline}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.disabled{cursor:default}.ng-dropdown-panel .scroll-host{overflow:hidden;overflow-y:auto;position:relative;display:block;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .scrollable-content{top:0;left:0;width:100%;height:100%;position:absolute}.ng-dropdown-panel .total-padding{width:1px;opacity:0}.ng-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgItemLabelDirective, selector: "[ngItemLabel]", inputs: ["ngItemLabel", "escape"] }, { kind: "component", type: NgDropdownPanelComponent, selector: "ng-dropdown-panel", inputs: ["items", "markedItem", "position", "appendTo", "bufferAmount", "virtualScroll", "headerTemplate", "footerTemplate", "filterValue", "ariaLabelDropdown"], outputs: ["update", "scroll", "scrollToEnd", "outsideClick"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: NgOptionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "optgroupTemplate", first: true, predicate: NgOptgroupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: NgLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "multiLabelTemplate", first: true, predicate: NgMultiLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: NgHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: NgFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "notFoundTemplate", first: true, predicate: NgNotFoundTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: NgPlaceholderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "typeToSearchTemplate", first: true, predicate: NgTypeToSearchTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "loadingTextTemplate", first: true, predicate: NgLoadingTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "tagTemplate", first: true, predicate: NgTagTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: NgLoadingSpinnerTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "clearButtonTemplate", first: true, predicate: NgClearButtonTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "ngOptions", predicate: NgOptionComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: i0.forwardRef(() => NgDropdownPanelComponent), descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n\t(mousedown)=\"handleMousedown($event)\"\n\t[class.ng-appearance-outline]=\"appearance() === 'outline'\"\n\t[class.ng-has-value]=\"hasValue\"\n\tclass=\"ng-select-container\">\n\t<div class=\"ng-value-container\">\n\t\t@if ((selectedItems.length === 0 && !searchTerm) || (fixedPlaceholder() ?? config.fixedPlaceholder )) {\n\t\t\t<ng-template #defaultPlaceholderTemplate>\n\t\t\t\t<div class=\"ng-placeholder\">{{ placeholder() ?? config.placeholder }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template [ngTemplateOutlet]=\"placeholderTemplate() || defaultPlaceholderTemplate\"> </ng-template>\n\t\t}\n\n\t\t@if ((!multiLabelTemplate() || !multiple()) && selectedItems.length > 0) {\n\t\t\t@for (item of selectedItems; track trackByOption($index, item)) {\n\t\t\t\t<div [class.ng-value-disabled]=\"item.disabled\" class=\"ng-value\">\n\t\t\t\t\t<ng-template #defaultLabelTemplate>\n\t\t\t\t\t\t<span class=\"ng-value-icon left\" (click)=\"unselect(item)\" aria-hidden=\"true\">\u00D7</span>\n\t\t\t\t\t\t<span class=\"ng-value-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"labelTemplate() || defaultLabelTemplate\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item: item.value, clear: clearItem, label: item.label }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\n\t\t@if (multiple() && multiLabelTemplate() && selectedValues.length > 0) {\n\t\t\t<ng-template [ngTemplateOutlet]=\"multiLabelTemplate()\" [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\">\n\t\t\t</ng-template>\n\t\t}\n\n\t\t<div class=\"ng-input\">\n\t\t\t<input\n\t\t\t\t#searchInput\n\t\t\t\t(blur)=\"onInputBlur($event)\"\n\t\t\t\t(change)=\"$event.stopPropagation()\"\n\t\t\t\t(compositionend)=\"onCompositionEnd(searchInput.value)\"\n\t\t\t\t(compositionstart)=\"onCompositionStart()\"\n\t\t\t\t(focus)=\"onInputFocus($event)\"\n\t\t\t\t(input)=\"filter(searchInput.value)\"\n\t\t\t\t[attr.aria-activedescendant]=\"isOpen() ? itemsList?.markedItem?.htmlId : null\"\n\t\t\t\t[attr.aria-controls]=\"isOpen() ? dropdownId : null\"\n\t\t\t\t[attr.aria-expanded]=\"isOpen()\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel()\"\n\t\t\t\t[attr.id]=\"labelForId()\"\n\t\t\t\t[attr.tabindex]=\"tabIndex()\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[readOnly]=\"!searchable() || itemsList.maxItemsSelected\"\n\t\t\t\t[value]=\"searchTerm ?? ''\"\n\t\t\t\taria-autocomplete=\"list\"\n\t\t\t\trole=\"combobox\" />\n\t\t</div>\n\t</div>\n\n\t@if (loading()) {\n\t\t<ng-template #defaultLoadingSpinnerTemplate>\n\t\t\t<div class=\"ng-spinner-loader\"></div>\n\t\t</ng-template>\n\t\t<ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate() || defaultLoadingSpinnerTemplate\"></ng-template>\n\t}\n\n\t@if (showClear()) {\n\t\t@if (clearButtonTemplate()) {\n\t\t\t<ng-container [ngTemplateOutlet]=\"clearButtonTemplate()\"></ng-container>\n\t\t} @else {\n\t\t\t<span\n\t\t\t\tclass=\"ng-clear-wrapper\"\n\t\t\t\trole=\"button\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.tabindex]=\"tabFocusOnClear() ? 0 : -1\"\n\t\t\t\ttitle=\"{{ clearAllText() || config.clearAllText }}\"\n\t\t\t\t#clearButton\n\t\t\t\t(click)=\"handleClearClick($event)\">\n\t\t\t\t<span class=\"ng-clear\" aria-hidden=\"true\">\u00D7</span>\n\t\t\t</span>\n\t\t}\n\t}\n\n\t<span class=\"ng-arrow-wrapper\">\n\t\t<span class=\"ng-arrow\"></span>\n\t</span>\n</div>\n\n@if (isOpen()) {\n\t@let appendToValue = appendTo() || config.appendTo;\n\t<ng-dropdown-panel\n\t\tclass=\"ng-dropdown-panel\"\n\t\t[virtualScroll]=\"virtualScroll() ?? !config.disableVirtualScroll ?? false\"\n\t\t[bufferAmount]=\"bufferAmount()\"\n\t\t[appendTo]=\"appendToValue\"\n\t\t[position]=\"dropdownPosition()\"\n\t\t[headerTemplate]=\"headerTemplate()\"\n\t\t[footerTemplate]=\"footerTemplate()\"\n\t\t[filterValue]=\"searchTerm\"\n\t\t[items]=\"itemsList.filteredItems\"\n\t\t[markedItem]=\"itemsList.markedItem\"\n\t\t(update)=\"viewPortItems = $event\"\n\t\t(scroll)=\"scroll.emit($event)\"\n\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t(outsideClick)=\"close()\"\n\t\t[class.ng-select-multiple]=\"multiple()\"\n\t\t[class]=\"appendToValue ? (ngClass() ? ngClass() : classes) : null\"\n\t\t[id]=\"dropdownId\"\n\t\t[ariaLabelDropdown]=\"ariaLabelDropdown()\">\n\t\t<ng-container>\n\t\t\t@for (item of viewPortItems; track trackByOption($index, item)) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ng-option\"\n\t\t\t\t\t[attr.role]=\"item.children ? 'group' : 'option'\"\n\t\t\t\t\t(click)=\"toggleItem(item)\"\n\t\t\t\t\t(mouseover)=\"onItemHover(item)\"\n\t\t\t\t\t[class.ng-option-disabled]=\"item.disabled\"\n\t\t\t\t\t[class.ng-option-selected]=\"item.selected\"\n\t\t\t\t\t[class.ng-optgroup]=\"item.children\"\n\t\t\t\t\t[class.ng-option]=\"!item.children\"\n\t\t\t\t\t[class.ng-option-child]=\"!!item.parent\"\n\t\t\t\t\t[class.ng-option-marked]=\"item === itemsList.markedItem\"\n\t\t\t\t\t[attr.aria-selected]=\"item.selected\"\n\t\t\t\t\t[attr.id]=\"item?.htmlId\"\n\t\t\t\t\t[attr.aria-setsize]=\"itemsList.filteredItems.length\"\n\t\t\t\t\t[attr.aria-posinset]=\"item.index + 1\">\n\t\t\t\t\t<ng-template #defaultOptionTemplate>\n\t\t\t\t\t\t<span class=\"ng-option-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"\n\t\t\t\t\t\t\titem.children ? optgroupTemplate() || defaultOptionTemplate : optionTemplate() || defaultOptionTemplate\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item: item.value, item$: item, index: item.index, searchTerm: searchTerm }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (showAddTag) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ng-option\"\n\t\t\t\t\t[class.ng-option-marked]=\"!itemsList.markedItem\"\n\t\t\t\t\t(mouseover)=\"itemsList.unmarkItem()\"\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\t(click)=\"selectTag()\">\n\t\t\t\t\t<ng-template #defaultTagTemplate>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t><span class=\"ng-tag-label\">{{ addTagText() || config.addTagText }}</span\n\t\t\t\t\t\t\t>\"{{ searchTerm }}\"</span\n\t\t\t\t\t\t>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"tagTemplate() || defaultTagTemplate\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ng-container>\n\t\t@if (showNoItemsFound()) {\n\t\t\t<ng-template #defaultNotFoundTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ notFoundText() ?? config.notFoundText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"notFoundTemplate() || defaultNotFoundTemplate\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n\t\t\t</ng-template>\n\t\t}\n\t\t@if (showTypeToSearch()) {\n\t\t\t<ng-template #defaultTypeToSearchTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ typeToSearchText() || config.typeToSearchText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template [ngTemplateOutlet]=\"typeToSearchTemplate() || defaultTypeToSearchTemplate\"></ng-template>\n\t\t}\n\t\t@if (loading() && itemsList.filteredItems.length === 0) {\n\t\t\t<ng-template #defaultLoadingTextTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ loadingText() || config.loadingText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"loadingTextTemplate() || defaultLoadingTextTemplate\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n\t\t\t</ng-template>\n\t\t}\n\t</ng-dropdown-panel>\n}\n\n<!-- Always present aria-live region -->\n<div aria-atomic=\"true\" aria-live=\"polite\" class=\"ng-visually-hidden\" role=\"status\">\n\t@if (isOpen && showNoItemsFound()) {\n\t\t{{ notFoundText }}\n\t}\n</div>\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ng-select div,.ng-select input,.ng-select span{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ng-select [hidden]{display:none}.ng-select.ng-select-searchable .ng-select-container .ng-value-container .ng-input{opacity:1}.ng-select.ng-select-opened .ng-select-container{z-index:1001}.ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-placeholder,.ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-value{-webkit-user-select:none;user-select:none;cursor:default}.ng-select.ng-select-disabled .ng-arrow-wrapper{cursor:default}.ng-select.ng-select-filtered .ng-placeholder{display:none}.ng-select .ng-select-container{cursor:default;display:flex;outline:none;overflow:hidden;position:relative;width:100%}.ng-select .ng-select-container .ng-value-container{display:flex;flex:1}.ng-select .ng-select-container .ng-value-container .ng-input{opacity:0}.ng-select .ng-select-container .ng-value-container .ng-input>input{box-sizing:content-box;background:none transparent;border:0 none;box-shadow:none;outline:none;padding:0;cursor:default;width:100%}.ng-select .ng-select-container .ng-value-container .ng-input>input::-ms-clear{display:none}.ng-select .ng-select-container .ng-value-container .ng-input>input[readonly]{-webkit-user-select:unset;user-select:unset;width:0;padding:0}.ng-select.ng-select-single.ng-select-filtered .ng-select-container .ng-value-container .ng-value{visibility:hidden}.ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:none}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{position:absolute;left:0;width:100%}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-icon{display:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{flex-wrap:wrap}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{position:absolute}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:nowrap}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-icon{display:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{cursor:pointer}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{flex:1;z-index:2}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{z-index:1}.ng-select .ng-clear-wrapper{cursor:pointer;position:relative;width:17px;-webkit-user-select:none;user-select:none}.ng-select .ng-clear-wrapper .ng-clear{display:inline-block;font-size:18px;line-height:1;pointer-events:none}.ng-select .ng-spinner-loader{border-radius:50%;width:17px;height:17px;margin-right:5px;font-size:10px;position:relative;text-indent:-9999em;border-top:2px solid rgba(66,66,66,.2);border-right:2px solid rgba(66,66,66,.2);border-bottom:2px solid rgba(66,66,66,.2);border-left:2px solid #424242;transform:translateZ(0);animation:load8 .8s infinite linear}.ng-select .ng-spinner-loader:after{border-radius:50%;width:17px;height:17px}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ng-select .ng-arrow-wrapper{cursor:pointer;position:relative;text-align:center;-webkit-user-select:none;user-select:none}.ng-select .ng-arrow-wrapper .ng-arrow{pointer-events:none;display:inline-block;height:0;width:0;position:relative}.ng-dropdown-panel{box-sizing:border-box;position:absolute;opacity:0;width:100%;z-index:1050;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .ng-dropdown-panel-items{display:block;height:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;max-height:240px;overflow-y:auto}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{box-sizing:border-box;cursor:pointer;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-option-label:empty:before{content:\"\\200b\"}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .highlighted{font-weight:700;text-decoration:underline}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.disabled{cursor:default}.ng-dropdown-panel .scroll-host{overflow:hidden;overflow-y:auto;position:relative;display:block;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .scrollable-content{top:0;left:0;width:100%;height:100%;position:absolute}.ng-dropdown-panel .total-padding{width:1px;opacity:0}.ng-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgItemLabelDirective, selector: "[ngItemLabel]", inputs: ["ngItemLabel", "escape"] }, { kind: "component", type: NgDropdownPanelComponent, selector: "ng-dropdown-panel", inputs: ["items", "markedItem", "position", "appendTo", "bufferAmount", "virtualScroll", "headerTemplate", "footerTemplate", "filterValue", "ariaLabelDropdown"], outputs: ["update", "scroll", "scrollToEnd", "outsideClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgSelectComponent, decorators: [{
             type: Component,
@@ -2953,253 +2944,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                             multi: true,
                         },
                         NgDropdownPanelService,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, NgItemLabelDirective, NgDropdownPanelComponent, NgClass], template: "<div\n\t(mousedown)=\"handleMousedown($event)\"\n\t[class.ng-appearance-outline]=\"appearance === 'outline'\"\n\t[class.ng-has-value]=\"hasValue\"\n\tclass=\"ng-select-container\">\n\t<div class=\"ng-value-container\">\n\t\t@if ((selectedItems.length === 0 && !searchTerm) || fixedPlaceholder) {\n\t\t\t<ng-template #defaultPlaceholderTemplate>\n\t\t\t\t<div class=\"ng-placeholder\">{{ placeholder }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\"> </ng-template>\n\t\t}\n\n\t\t@if ((!multiLabelTemplate || !multiple) && selectedItems.length > 0) {\n\t\t\t@for (item of selectedItems; track trackByOption($index, item)) {\n\t\t\t\t<div [class.ng-value-disabled]=\"item.disabled\" class=\"ng-value\">\n\t\t\t\t\t<ng-template #defaultLabelTemplate>\n\t\t\t\t\t\t<span class=\"ng-value-icon left\" (click)=\"unselect(item)\" aria-hidden=\"true\">\u00D7</span>\n\t\t\t\t\t\t<span class=\"ng-value-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"labelTemplate || defaultLabelTemplate\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item: item.value, clear: clearItem, label: item.label }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\n\t\t@if (multiple && multiLabelTemplate && selectedValues.length > 0) {\n\t\t\t<ng-template [ngTemplateOutlet]=\"multiLabelTemplate\" [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\">\n\t\t\t</ng-template>\n\t\t}\n\n\t\t<div class=\"ng-input\">\n\t\t\t<input\n\t\t\t\t#searchInput\n\t\t\t\t(blur)=\"onInputBlur($event)\"\n\t\t\t\t(change)=\"$event.stopPropagation()\"\n\t\t\t\t(compositionend)=\"onCompositionEnd(searchInput.value)\"\n\t\t\t\t(compositionstart)=\"onCompositionStart()\"\n\t\t\t\t(focus)=\"onInputFocus($event)\"\n\t\t\t\t(input)=\"filter(searchInput.value)\"\n\t\t\t\t[attr.aria-activedescendant]=\"isOpen ? itemsList?.markedItem?.htmlId : null\"\n\t\t\t\t[attr.aria-controls]=\"isOpen ? dropdownId : null\"\n\t\t\t\t[attr.aria-expanded]=\"isOpen\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t[attr.id]=\"labelForId\"\n\t\t\t\t[attr.tabindex]=\"tabIndex\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[readOnly]=\"!searchable || itemsList.maxItemsSelected\"\n\t\t\t\t[value]=\"searchTerm ?? ''\"\n\t\t\t\taria-autocomplete=\"list\"\n\t\t\t\trole=\"combobox\" />\n\t\t</div>\n\t</div>\n\n\t@if (loading) {\n\t\t<ng-template #defaultLoadingSpinnerTemplate>\n\t\t\t<div class=\"ng-spinner-loader\"></div>\n\t\t</ng-template>\n\t\t<ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate || defaultLoadingSpinnerTemplate\"></ng-template>\n\t}\n\n\t@if (showClear()) {\n\t\t@if (clearButtonTemplate) {\n\t\t\t<ng-container [ngTemplateOutlet]=\"clearButtonTemplate\"></ng-container>\n\t\t} @else {\n\t\t\t<span\n\t\t\t\tclass=\"ng-clear-wrapper\"\n\t\t\t\trole=\"button\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.tabindex]=\"tabFocusOnClear() ? 0 : -1\"\n\t\t\t\ttitle=\"{{ clearAllText }}\"\n\t\t\t\t#clearButton\n\t\t\t\t(click)=\"handleClearClick($event)\">\n\t\t\t\t<span class=\"ng-clear\" aria-hidden=\"true\">\u00D7</span>\n\t\t\t</span>\n\t\t}\n\t}\n\n\t<span class=\"ng-arrow-wrapper\">\n\t\t<span class=\"ng-arrow\"></span>\n\t</span>\n</div>\n\n@if (isOpen) {\n\t<ng-dropdown-panel\n\t\tclass=\"ng-dropdown-panel\"\n\t\t[virtualScroll]=\"virtualScroll\"\n\t\t[bufferAmount]=\"bufferAmount\"\n\t\t[appendTo]=\"appendTo\"\n\t\t[position]=\"dropdownPosition\"\n\t\t[headerTemplate]=\"headerTemplate\"\n\t\t[footerTemplate]=\"footerTemplate\"\n\t\t[filterValue]=\"searchTerm\"\n\t\t[items]=\"itemsList.filteredItems\"\n\t\t[markedItem]=\"itemsList.markedItem\"\n\t\t(update)=\"viewPortItems = $event\"\n\t\t(scroll)=\"scroll.emit($event)\"\n\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t(outsideClick)=\"close()\"\n\t\t[class.ng-select-multiple]=\"multiple\"\n\t\t[ngClass]=\"appendTo ? (ngClass ? ngClass : classes) : null\"\n\t\t[id]=\"dropdownId\"\n\t\t[ariaLabelDropdown]=\"ariaLabelDropdown\">\n\t\t<ng-container>\n\t\t\t@for (item of viewPortItems; track trackByOption($index, item)) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ng-option\"\n\t\t\t\t\t[attr.role]=\"item.children ? 'group' : 'option'\"\n\t\t\t\t\t(click)=\"toggleItem(item)\"\n\t\t\t\t\t(mouseover)=\"onItemHover(item)\"\n\t\t\t\t\t[class.ng-option-disabled]=\"item.disabled\"\n\t\t\t\t\t[class.ng-option-selected]=\"item.selected\"\n\t\t\t\t\t[class.ng-optgroup]=\"item.children\"\n\t\t\t\t\t[class.ng-option]=\"!item.children\"\n\t\t\t\t\t[class.ng-option-child]=\"!!item.parent\"\n\t\t\t\t\t[class.ng-option-marked]=\"item === itemsList.markedItem\"\n\t\t\t\t\t[attr.aria-selected]=\"item.selected\"\n\t\t\t\t\t[attr.id]=\"item?.htmlId\"\n\t\t\t\t\t[attr.aria-setsize]=\"itemsList.filteredItems.length\"\n\t\t\t\t\t[attr.aria-posinset]=\"item.index + 1\">\n\t\t\t\t\t<ng-template #defaultOptionTemplate>\n\t\t\t\t\t\t<span class=\"ng-option-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"\n\t\t\t\t\t\t\titem.children ? optgroupTemplate || defaultOptionTemplate : optionTemplate || defaultOptionTemplate\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item: item.value, item$: item, index: item.index, searchTerm: searchTerm }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (showAddTag) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ng-option\"\n\t\t\t\t\t[class.ng-option-marked]=\"!itemsList.markedItem\"\n\t\t\t\t\t(mouseover)=\"itemsList.unmarkItem()\"\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\t(click)=\"selectTag()\">\n\t\t\t\t\t<ng-template #defaultTagTemplate>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t><span class=\"ng-tag-label\">{{ addTagText }}</span\n\t\t\t\t\t\t\t>\"{{ searchTerm }}\"</span\n\t\t\t\t\t\t>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"tagTemplate || defaultTagTemplate\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ng-container>\n\t\t@if (showNoItemsFound()) {\n\t\t\t<ng-template #defaultNotFoundTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ notFoundText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"notFoundTemplate || defaultNotFoundTemplate\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n\t\t\t</ng-template>\n\t\t}\n\t\t@if (showTypeToSearch()) {\n\t\t\t<ng-template #defaultTypeToSearchTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ typeToSearchText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template [ngTemplateOutlet]=\"typeToSearchTemplate || defaultTypeToSearchTemplate\"></ng-template>\n\t\t}\n\t\t@if (loading && itemsList.filteredItems.length === 0) {\n\t\t\t<ng-template #defaultLoadingTextTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ loadingText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"loadingTextTemplate || defaultLoadingTextTemplate\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n\t\t\t</ng-template>\n\t\t}\n\t</ng-dropdown-panel>\n}\n\n<!-- Always present aria-live region -->\n<div aria-atomic=\"true\" aria-live=\"polite\" class=\"ng-visually-hidden\" role=\"status\">\n\t@if (isOpen && showNoItemsFound()) {\n\t\t{{ notFoundText }}\n\t}\n</div>\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ng-select div,.ng-select input,.ng-select span{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ng-select [hidden]{display:none}.ng-select.ng-select-searchable .ng-select-container .ng-value-container .ng-input{opacity:1}.ng-select.ng-select-opened .ng-select-container{z-index:1001}.ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-placeholder,.ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-value{-webkit-user-select:none;user-select:none;cursor:default}.ng-select.ng-select-disabled .ng-arrow-wrapper{cursor:default}.ng-select.ng-select-filtered .ng-placeholder{display:none}.ng-select .ng-select-container{cursor:default;display:flex;outline:none;overflow:hidden;position:relative;width:100%}.ng-select .ng-select-container .ng-value-container{display:flex;flex:1}.ng-select .ng-select-container .ng-value-container .ng-input{opacity:0}.ng-select .ng-select-container .ng-value-container .ng-input>input{box-sizing:content-box;background:none transparent;border:0 none;box-shadow:none;outline:none;padding:0;cursor:default;width:100%}.ng-select .ng-select-container .ng-value-container .ng-input>input::-ms-clear{display:none}.ng-select .ng-select-container .ng-value-container .ng-input>input[readonly]{-webkit-user-select:unset;user-select:unset;width:0;padding:0}.ng-select.ng-select-single.ng-select-filtered .ng-select-container .ng-value-container .ng-value{visibility:hidden}.ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:none}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{position:absolute;left:0;width:100%}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-icon{display:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{flex-wrap:wrap}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{position:absolute}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:nowrap}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-icon{display:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{cursor:pointer}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{flex:1;z-index:2}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{z-index:1}.ng-select .ng-clear-wrapper{cursor:pointer;position:relative;width:17px;-webkit-user-select:none;user-select:none}.ng-select .ng-clear-wrapper .ng-clear{display:inline-block;font-size:18px;line-height:1;pointer-events:none}.ng-select .ng-spinner-loader{border-radius:50%;width:17px;height:17px;margin-right:5px;font-size:10px;position:relative;text-indent:-9999em;border-top:2px solid rgba(66,66,66,.2);border-right:2px solid rgba(66,66,66,.2);border-bottom:2px solid rgba(66,66,66,.2);border-left:2px solid #424242;transform:translateZ(0);animation:load8 .8s infinite linear}.ng-select .ng-spinner-loader:after{border-radius:50%;width:17px;height:17px}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ng-select .ng-arrow-wrapper{cursor:pointer;position:relative;text-align:center;-webkit-user-select:none;user-select:none}.ng-select .ng-arrow-wrapper .ng-arrow{pointer-events:none;display:inline-block;height:0;width:0;position:relative}.ng-dropdown-panel{box-sizing:border-box;position:absolute;opacity:0;width:100%;z-index:1050;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .ng-dropdown-panel-items{display:block;height:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;max-height:240px;overflow-y:auto}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{box-sizing:border-box;cursor:pointer;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-option-label:empty:before{content:\"\\200b\"}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .highlighted{font-weight:700;text-decoration:underline}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.disabled{cursor:default}.ng-dropdown-panel .scroll-host{overflow:hidden;overflow-y:auto;position:relative;display:block;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .scrollable-content{top:0;left:0;width:100%;height:100%;position:absolute}.ng-dropdown-panel .total-padding{width:1px;opacity:0}.ng-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:nowrap}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['class']
-                }] }, { type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['autofocus']
-                }] }, { type: NgSelectConfig }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [SELECTION_MODEL_FACTORY]
-                }, {
-                    type: Optional
-                }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: ConsoleService }], propDecorators: { ariaLabelDropdown: [{
-                type: Input
-            }], bindLabel: [{
-                type: Input
-            }], bindValue: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input
-            }], markFirst: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], placeholder: [{
-                type: Input
-            }], fixedPlaceholder: [{
-                type: Input
-            }], notFoundText: [{
-                type: Input
-            }], typeToSearchText: [{
-                type: Input
-            }], preventToggleOnRightClick: [{
-                type: Input
-            }], addTagText: [{
-                type: Input
-            }], loadingText: [{
-                type: Input
-            }], clearAllText: [{
-                type: Input
-            }], appearance: [{
-                type: Input
-            }], dropdownPosition: [{
-                type: Input
-            }], appendTo: [{
-                type: Input
-            }], loading: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], closeOnSelect: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], hideSelected: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], selectOnTab: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], openOnEnter: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], maxSelectedItems: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], groupBy: [{
-                type: Input
-            }], groupValue: [{
-                type: Input
-            }], bufferAmount: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], virtualScroll: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], selectableGroup: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], selectableGroupAsModel: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], searchFn: [{
-                type: Input
-            }], trackByFn: [{
-                type: Input
-            }], clearOnBackspace: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], labelForId: [{
-                type: Input
-            }], inputAttrs: [{
-                type: Input
-            }], tabIndex: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], readonly: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], searchWhileComposing: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], minTermLength: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], editableSearchTerm: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], ngClass: [{
-                type: Input
-            }], typeahead: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.ng-select-typeahead']
-            }], multiple: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }, {
-                type: HostBinding,
-                args: ['class.ng-select-multiple']
-            }], addTag: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.ng-select-taggable']
-            }], searchable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }, {
-                type: HostBinding,
-                args: ['class.ng-select-searchable']
-            }], clearable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }, {
-                type: HostBinding,
-                args: ['class.ng-select-clearable']
-            }], isOpen: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.ng-select-opened']
-            }], blurEvent: [{
-                type: Output,
-                args: ['blur']
-            }], focusEvent: [{
-                type: Output,
-                args: ['focus']
-            }], changeEvent: [{
-                type: Output,
-                args: ['change']
-            }], openEvent: [{
-                type: Output,
-                args: ['open']
-            }], closeEvent: [{
-                type: Output,
-                args: ['close']
-            }], searchEvent: [{
-                type: Output,
-                args: ['search']
-            }], clearEvent: [{
-                type: Output,
-                args: ['clear']
-            }], addEvent: [{
-                type: Output,
-                args: ['add']
-            }], removeEvent: [{
-                type: Output,
-                args: ['remove']
-            }], scroll: [{
-                type: Output,
-                args: ['scroll']
-            }], scrollToEnd: [{
-                type: Output,
-                args: ['scrollToEnd']
-            }], optionTemplate: [{
-                type: ContentChild,
-                args: [NgOptionTemplateDirective, { read: TemplateRef }]
-            }], optgroupTemplate: [{
-                type: ContentChild,
-                args: [NgOptgroupTemplateDirective, { read: TemplateRef }]
-            }], labelTemplate: [{
-                type: ContentChild,
-                args: [NgLabelTemplateDirective, { read: TemplateRef }]
-            }], multiLabelTemplate: [{
-                type: ContentChild,
-                args: [NgMultiLabelTemplateDirective, { read: TemplateRef }]
-            }], headerTemplate: [{
-                type: ContentChild,
-                args: [NgHeaderTemplateDirective, { read: TemplateRef }]
-            }], footerTemplate: [{
-                type: ContentChild,
-                args: [NgFooterTemplateDirective, { read: TemplateRef }]
-            }], notFoundTemplate: [{
-                type: ContentChild,
-                args: [NgNotFoundTemplateDirective, { read: TemplateRef }]
-            }], placeholderTemplate: [{
-                type: ContentChild,
-                args: [NgPlaceholderTemplateDirective, { read: TemplateRef }]
-            }], typeToSearchTemplate: [{
-                type: ContentChild,
-                args: [NgTypeToSearchTemplateDirective, { read: TemplateRef }]
-            }], loadingTextTemplate: [{
-                type: ContentChild,
-                args: [NgLoadingTextTemplateDirective, { read: TemplateRef }]
-            }], tagTemplate: [{
-                type: ContentChild,
-                args: [NgTagTemplateDirective, { read: TemplateRef }]
-            }], loadingSpinnerTemplate: [{
-                type: ContentChild,
-                args: [NgLoadingSpinnerTemplateDirective, { read: TemplateRef }]
-            }], clearButtonTemplate: [{
-                type: ContentChild,
-                args: [NgClearButtonTemplateDirective, { read: TemplateRef }]
-            }], dropdownPanel: [{
-                type: ViewChild,
-                args: [forwardRef(() => NgDropdownPanelComponent)]
-            }], searchInput: [{
-                type: ViewChild,
-                args: ['searchInput', { static: true }]
-            }], clearButton: [{
-                type: ViewChild,
-                args: ['clearButton']
-            }], ngOptions: [{
-                type: ContentChildren,
-                args: [NgOptionComponent, { descendants: true }]
-            }], useDefaultClass: [{
-                type: HostBinding,
-                args: ['class.ng-select']
-            }], filtered: [{
-                type: HostBinding,
-                args: ['class.ng-select-filtered']
-            }], single: [{
-                type: HostBinding,
-                args: ['class.ng-select-single']
-            }], items: [{
-                type: Input
-            }], disabled: [{
-                type: HostBinding,
-                args: ['class.ng-select-disabled']
-            }], compareWith: [{
-                type: Input
-            }], clearSearchOnAdd: [{
-                type: Input
-            }], deselectOnClick: [{
-                type: Input
-            }], keyDownFn: [{
-                type: Input
-            }], handleKeyDown: [{
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, NgItemLabelDirective, NgDropdownPanelComponent], host: {
+                        '[class.ng-select]': 'true',
+                        '[class.ng-select-single]': '!multiple()',
+                        '[class.ng-select-typeahead]': 'typeahead()',
+                        '[class.ng-select-multiple]': 'multiple()',
+                        '[class.ng-select-taggable]': 'addTag()',
+                        '[class.ng-select-searchable]': 'searchable()',
+                        '[class.ng-select-clearable]': 'clearable()',
+                        '[class.ng-select-opened]': 'isOpen()',
+                        '[class.ng-select-filtered]': 'filtered',
+                        '[class.ng-select-disabled]': 'disabled()',
+                    }, template: "<div\n\t(mousedown)=\"handleMousedown($event)\"\n\t[class.ng-appearance-outline]=\"appearance() === 'outline'\"\n\t[class.ng-has-value]=\"hasValue\"\n\tclass=\"ng-select-container\">\n\t<div class=\"ng-value-container\">\n\t\t@if ((selectedItems.length === 0 && !searchTerm) || (fixedPlaceholder() ?? config.fixedPlaceholder )) {\n\t\t\t<ng-template #defaultPlaceholderTemplate>\n\t\t\t\t<div class=\"ng-placeholder\">{{ placeholder() ?? config.placeholder }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template [ngTemplateOutlet]=\"placeholderTemplate() || defaultPlaceholderTemplate\"> </ng-template>\n\t\t}\n\n\t\t@if ((!multiLabelTemplate() || !multiple()) && selectedItems.length > 0) {\n\t\t\t@for (item of selectedItems; track trackByOption($index, item)) {\n\t\t\t\t<div [class.ng-value-disabled]=\"item.disabled\" class=\"ng-value\">\n\t\t\t\t\t<ng-template #defaultLabelTemplate>\n\t\t\t\t\t\t<span class=\"ng-value-icon left\" (click)=\"unselect(item)\" aria-hidden=\"true\">\u00D7</span>\n\t\t\t\t\t\t<span class=\"ng-value-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"labelTemplate() || defaultLabelTemplate\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item: item.value, clear: clearItem, label: item.label }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\n\t\t@if (multiple() && multiLabelTemplate() && selectedValues.length > 0) {\n\t\t\t<ng-template [ngTemplateOutlet]=\"multiLabelTemplate()\" [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\">\n\t\t\t</ng-template>\n\t\t}\n\n\t\t<div class=\"ng-input\">\n\t\t\t<input\n\t\t\t\t#searchInput\n\t\t\t\t(blur)=\"onInputBlur($event)\"\n\t\t\t\t(change)=\"$event.stopPropagation()\"\n\t\t\t\t(compositionend)=\"onCompositionEnd(searchInput.value)\"\n\t\t\t\t(compositionstart)=\"onCompositionStart()\"\n\t\t\t\t(focus)=\"onInputFocus($event)\"\n\t\t\t\t(input)=\"filter(searchInput.value)\"\n\t\t\t\t[attr.aria-activedescendant]=\"isOpen() ? itemsList?.markedItem?.htmlId : null\"\n\t\t\t\t[attr.aria-controls]=\"isOpen() ? dropdownId : null\"\n\t\t\t\t[attr.aria-expanded]=\"isOpen()\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel()\"\n\t\t\t\t[attr.id]=\"labelForId()\"\n\t\t\t\t[attr.tabindex]=\"tabIndex()\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[readOnly]=\"!searchable() || itemsList.maxItemsSelected\"\n\t\t\t\t[value]=\"searchTerm ?? ''\"\n\t\t\t\taria-autocomplete=\"list\"\n\t\t\t\trole=\"combobox\" />\n\t\t</div>\n\t</div>\n\n\t@if (loading()) {\n\t\t<ng-template #defaultLoadingSpinnerTemplate>\n\t\t\t<div class=\"ng-spinner-loader\"></div>\n\t\t</ng-template>\n\t\t<ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate() || defaultLoadingSpinnerTemplate\"></ng-template>\n\t}\n\n\t@if (showClear()) {\n\t\t@if (clearButtonTemplate()) {\n\t\t\t<ng-container [ngTemplateOutlet]=\"clearButtonTemplate()\"></ng-container>\n\t\t} @else {\n\t\t\t<span\n\t\t\t\tclass=\"ng-clear-wrapper\"\n\t\t\t\trole=\"button\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.tabindex]=\"tabFocusOnClear() ? 0 : -1\"\n\t\t\t\ttitle=\"{{ clearAllText() || config.clearAllText }}\"\n\t\t\t\t#clearButton\n\t\t\t\t(click)=\"handleClearClick($event)\">\n\t\t\t\t<span class=\"ng-clear\" aria-hidden=\"true\">\u00D7</span>\n\t\t\t</span>\n\t\t}\n\t}\n\n\t<span class=\"ng-arrow-wrapper\">\n\t\t<span class=\"ng-arrow\"></span>\n\t</span>\n</div>\n\n@if (isOpen()) {\n\t@let appendToValue = appendTo() || config.appendTo;\n\t<ng-dropdown-panel\n\t\tclass=\"ng-dropdown-panel\"\n\t\t[virtualScroll]=\"virtualScroll() ?? !config.disableVirtualScroll ?? false\"\n\t\t[bufferAmount]=\"bufferAmount()\"\n\t\t[appendTo]=\"appendToValue\"\n\t\t[position]=\"dropdownPosition()\"\n\t\t[headerTemplate]=\"headerTemplate()\"\n\t\t[footerTemplate]=\"footerTemplate()\"\n\t\t[filterValue]=\"searchTerm\"\n\t\t[items]=\"itemsList.filteredItems\"\n\t\t[markedItem]=\"itemsList.markedItem\"\n\t\t(update)=\"viewPortItems = $event\"\n\t\t(scroll)=\"scroll.emit($event)\"\n\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t(outsideClick)=\"close()\"\n\t\t[class.ng-select-multiple]=\"multiple()\"\n\t\t[class]=\"appendToValue ? (ngClass() ? ngClass() : classes) : null\"\n\t\t[id]=\"dropdownId\"\n\t\t[ariaLabelDropdown]=\"ariaLabelDropdown()\">\n\t\t<ng-container>\n\t\t\t@for (item of viewPortItems; track trackByOption($index, item)) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ng-option\"\n\t\t\t\t\t[attr.role]=\"item.children ? 'group' : 'option'\"\n\t\t\t\t\t(click)=\"toggleItem(item)\"\n\t\t\t\t\t(mouseover)=\"onItemHover(item)\"\n\t\t\t\t\t[class.ng-option-disabled]=\"item.disabled\"\n\t\t\t\t\t[class.ng-option-selected]=\"item.selected\"\n\t\t\t\t\t[class.ng-optgroup]=\"item.children\"\n\t\t\t\t\t[class.ng-option]=\"!item.children\"\n\t\t\t\t\t[class.ng-option-child]=\"!!item.parent\"\n\t\t\t\t\t[class.ng-option-marked]=\"item === itemsList.markedItem\"\n\t\t\t\t\t[attr.aria-selected]=\"item.selected\"\n\t\t\t\t\t[attr.id]=\"item?.htmlId\"\n\t\t\t\t\t[attr.aria-setsize]=\"itemsList.filteredItems.length\"\n\t\t\t\t\t[attr.aria-posinset]=\"item.index + 1\">\n\t\t\t\t\t<ng-template #defaultOptionTemplate>\n\t\t\t\t\t\t<span class=\"ng-option-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"\n\t\t\t\t\t\t\titem.children ? optgroupTemplate() || defaultOptionTemplate : optionTemplate() || defaultOptionTemplate\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item: item.value, item$: item, index: item.index, searchTerm: searchTerm }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (showAddTag) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ng-option\"\n\t\t\t\t\t[class.ng-option-marked]=\"!itemsList.markedItem\"\n\t\t\t\t\t(mouseover)=\"itemsList.unmarkItem()\"\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\t(click)=\"selectTag()\">\n\t\t\t\t\t<ng-template #defaultTagTemplate>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t><span class=\"ng-tag-label\">{{ addTagText() || config.addTagText }}</span\n\t\t\t\t\t\t\t>\"{{ searchTerm }}\"</span\n\t\t\t\t\t\t>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"tagTemplate() || defaultTagTemplate\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ng-container>\n\t\t@if (showNoItemsFound()) {\n\t\t\t<ng-template #defaultNotFoundTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ notFoundText() ?? config.notFoundText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"notFoundTemplate() || defaultNotFoundTemplate\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n\t\t\t</ng-template>\n\t\t}\n\t\t@if (showTypeToSearch()) {\n\t\t\t<ng-template #defaultTypeToSearchTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ typeToSearchText() || config.typeToSearchText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template [ngTemplateOutlet]=\"typeToSearchTemplate() || defaultTypeToSearchTemplate\"></ng-template>\n\t\t}\n\t\t@if (loading() && itemsList.filteredItems.length === 0) {\n\t\t\t<ng-template #defaultLoadingTextTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ loadingText() || config.loadingText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"loadingTextTemplate() || defaultLoadingTextTemplate\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n\t\t\t</ng-template>\n\t\t}\n\t</ng-dropdown-panel>\n}\n\n<!-- Always present aria-live region -->\n<div aria-atomic=\"true\" aria-live=\"polite\" class=\"ng-visually-hidden\" role=\"status\">\n\t@if (isOpen && showNoItemsFound()) {\n\t\t{{ notFoundText }}\n\t}\n</div>\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ng-select div,.ng-select input,.ng-select span{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ng-select [hidden]{display:none}.ng-select.ng-select-searchable .ng-select-container .ng-value-container .ng-input{opacity:1}.ng-select.ng-select-opened .ng-select-container{z-index:1001}.ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-placeholder,.ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-value{-webkit-user-select:none;user-select:none;cursor:default}.ng-select.ng-select-disabled .ng-arrow-wrapper{cursor:default}.ng-select.ng-select-filtered .ng-placeholder{display:none}.ng-select .ng-select-container{cursor:default;display:flex;outline:none;overflow:hidden;position:relative;width:100%}.ng-select .ng-select-container .ng-value-container{display:flex;flex:1}.ng-select .ng-select-container .ng-value-container .ng-input{opacity:0}.ng-select .ng-select-container .ng-value-container .ng-input>input{box-sizing:content-box;background:none transparent;border:0 none;box-shadow:none;outline:none;padding:0;cursor:default;width:100%}.ng-select .ng-select-container .ng-value-container .ng-input>input::-ms-clear{display:none}.ng-select .ng-select-container .ng-value-container .ng-input>input[readonly]{-webkit-user-select:unset;user-select:unset;width:0;padding:0}.ng-select.ng-select-single.ng-select-filtered .ng-select-container .ng-value-container .ng-value{visibility:hidden}.ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:none}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{position:absolute;left:0;width:100%}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-icon{display:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{flex-wrap:wrap}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{position:absolute}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:nowrap}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-icon{display:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{cursor:pointer}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{flex:1;z-index:2}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{z-index:1}.ng-select .ng-clear-wrapper{cursor:pointer;position:relative;width:17px;-webkit-user-select:none;user-select:none}.ng-select .ng-clear-wrapper .ng-clear{display:inline-block;font-size:18px;line-height:1;pointer-events:none}.ng-select .ng-spinner-loader{border-radius:50%;width:17px;height:17px;margin-right:5px;font-size:10px;position:relative;text-indent:-9999em;border-top:2px solid rgba(66,66,66,.2);border-right:2px solid rgba(66,66,66,.2);border-bottom:2px solid rgba(66,66,66,.2);border-left:2px solid #424242;transform:translateZ(0);animation:load8 .8s infinite linear}.ng-select .ng-spinner-loader:after{border-radius:50%;width:17px;height:17px}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ng-select .ng-arrow-wrapper{cursor:pointer;position:relative;text-align:center;-webkit-user-select:none;user-select:none}.ng-select .ng-arrow-wrapper .ng-arrow{pointer-events:none;display:inline-block;height:0;width:0;position:relative}.ng-dropdown-panel{box-sizing:border-box;position:absolute;opacity:0;width:100%;z-index:1050;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .ng-dropdown-panel-items{display:block;height:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;max-height:240px;overflow-y:auto}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{box-sizing:border-box;cursor:pointer;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-option-label:empty:before{content:\"\\200b\"}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .highlighted{font-weight:700;text-decoration:underline}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.disabled{cursor:default}.ng-dropdown-panel .scroll-host{overflow:hidden;overflow-y:auto;position:relative;display:block;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .scrollable-content{top:0;left:0;width:100%;height:100%;position:absolute}.ng-dropdown-panel .total-padding{width:1px;opacity:0}.ng-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { handleKeyDown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }] } });
@@ -3237,7 +2994,7 @@ class NgSelectModule {
             NgTagTemplateDirective,
             NgLoadingSpinnerTemplateDirective,
             NgClearButtonTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgSelectModule, providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: DefaultSelectionModelFactory }] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgSelectModule, providers: provideNgSelect() }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgSelectModule, decorators: [{
             type: NgModule,
@@ -3278,9 +3035,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                         NgLoadingSpinnerTemplateDirective,
                         NgClearButtonTemplateDirective
                     ],
-                    providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: DefaultSelectionModelFactory }],
+                    providers: provideNgSelect(),
                 }]
         }] });
+function provideNgSelect() {
+    return [
+        {
+            provide: SELECTION_MODEL_FACTORY,
+            useValue: DefaultSelectionModelFactory,
+        },
+    ];
+}
 
 /*
  * Public API Surface of ng-select