@ng-matero/ng-select 1.0.2 → 1.2.0

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

@@ -1273,10 +1273,11 @@ class NgSelectConfig {
     bindLabel;
     clearSearchOnAdd;
     deselectOnClick;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectConfig, providedIn: 'root' });
+    usePopover = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectConfig, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectConfig, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1311,12 +1312,12 @@ class NgSelectOption {
     ngOnDestroy() {
         this.stateChange$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.12", type: NgSelectOption, isStandalone: true, selector: "ng-option, ng-select-option", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.15", type: NgSelectOption, isStandalone: true, selector: "ng-option, ng-select-option", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, usesOnChanges: true, ngImport: i0, template: `
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectOption, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng-option, ng-select-option',
@@ -1389,10 +1390,10 @@ class NgSelectPanelUtils {
         }
         return null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectPanelUtils, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectPanelUtils });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectPanelUtils, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectPanelUtils });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectPanelUtils, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectPanelUtils, decorators: [{
             type: Injectable
         }] });
 
@@ -1407,6 +1408,7 @@ class NgSelectPanel {
     bufferAmount = 4;
     virtualScroll = false;
     multiple = false;
+    usePopover = false;
     headerTemplate;
     footerTemplate;
     filterValue = null;
@@ -1417,7 +1419,7 @@ class NgSelectPanel {
     scrollHostElRef;
     scrollContentElRef;
     scrollSpacerElRef;
-    _document = inject(DOCUMENT, { optional: true });
+    _document = inject(DOCUMENT);
     _renderer = inject(Renderer2);
     _zone = inject(NgZone);
     _elementRef = inject(ElementRef);
@@ -1463,6 +1465,8 @@ class NgSelectPanel {
         this._handleOutsideClick();
         this._appendDropdown();
         this._setupMousedownListener();
+        this._showPopoverIfNeeded();
+        this._handleReposition();
     }
     ngOnChanges(changes) {
         if (changes['items']) {
@@ -1474,7 +1478,7 @@ class NgSelectPanel {
         this._destroy$.next();
         this._destroy$.complete();
         this._destroy$.unsubscribe();
-        if (this.appendTo) {
+        if (this.appendTo || this.usePopover) {
             this._renderer.removeChild(this._dropdown.parentNode, this._dropdown);
         }
     }
@@ -1515,7 +1519,7 @@ class NgSelectPanel {
         else {
             this._updateDropdownClass('bottom');
         }
-        if (this.appendTo) {
+        if (this.appendTo || this.usePopover) {
             this._updateYPosition();
         }
         this._dropdown.style.opacity = '1';
@@ -1681,11 +1685,12 @@ class NgSelectPanel {
             return this.position;
         }
         const selectRect = this._select.getBoundingClientRect();
-        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+        const scrollTop = this._document.documentElement.scrollTop || this._document.body.scrollTop;
         const offsetTop = selectRect.top + window.pageYOffset;
         const height = selectRect.height;
         const dropdownHeight = dropdownEl.getBoundingClientRect().height;
-        if (offsetTop + height + dropdownHeight > scrollTop + document.documentElement.clientHeight) {
+        if (offsetTop + height + dropdownHeight >
+            scrollTop + this._document.documentElement.clientHeight) {
             return 'top';
         }
         else {
@@ -1698,7 +1703,7 @@ class NgSelectPanel {
         }
         this._parent = this._dropdown.shadowRoot
             ? this._dropdown.shadowRoot.querySelector(this.appendTo)
-            : document.querySelector(this.appendTo);
+            : this._document.querySelector(this.appendTo);
         if (!this._parent) {
             throw new Error(`appendTo selector ${this.appendTo} did not found any parent element`);
         }
@@ -1708,7 +1713,7 @@ class NgSelectPanel {
     _updateXPosition() {
         const select = this._select.getBoundingClientRect();
         const parent = this._parent.getBoundingClientRect();
-        const offsetLeft = select.left - parent.left;
+        const offsetLeft = this.usePopover ? select.left : select.left - parent.left;
         this._dropdown.style.left = offsetLeft + 'px';
         this._dropdown.style.width = select.width + 'px';
         this._dropdown.style.minWidth = select.width + 'px';
@@ -1716,15 +1721,16 @@ class NgSelectPanel {
     _updateYPosition() {
         const select = this._select.getBoundingClientRect();
         const parent = this._parent.getBoundingClientRect();
-        const delta = select.height;
         if (this._currentPosition === 'top') {
-            const offsetBottom = parent.bottom - select.bottom;
-            this._dropdown.style.bottom = offsetBottom + delta + 'px';
+            const offsetBottom = this.usePopover
+                ? window.innerHeight - select.top
+                : parent.bottom - select.bottom + select.height;
+            this._dropdown.style.bottom = offsetBottom + 'px';
             this._dropdown.style.top = 'auto';
         }
         else if (this._currentPosition === 'bottom') {
-            const offsetTop = select.top - parent.top;
-            this._dropdown.style.top = offsetTop + delta + 'px';
+            const offsetTop = this.usePopover ? select.bottom : select.top - parent.top + select.height;
+            this._dropdown.style.top = offsetTop + 'px';
             this._dropdown.style.bottom = 'auto';
         }
     }
@@ -1741,8 +1747,33 @@ class NgSelectPanel {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: NgSelectPanel, isStandalone: true, selector: "ng-select-panel", inputs: { listboxId: "listboxId", items: "items", markedItem: "markedItem", position: "position", appendTo: "appendTo", bufferAmount: "bufferAmount", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], multiple: ["multiple", "multiple", booleanAttribute], headerTemplate: "headerTemplate", footerTemplate: "footerTemplate", filterValue: "filterValue" }, outputs: { update: "update", scroll: "scroll", scrollToEnd: "scrollToEnd", outsideClick: "outsideClick" }, host: { properties: { "class.ng-select-multiple": "multiple" }, classAttribute: "ng-select-panel" }, providers: [NgSelectPanelUtils], viewQueries: [{ propertyName: "scrollHostElRef", first: true, predicate: ["scrollHost"], descendants: true, read: ElementRef, static: true }, { propertyName: "scrollContentElRef", first: true, predicate: ["scrollContent"], descendants: true, read: ElementRef, static: true }, { propertyName: "scrollSpacerElRef", first: true, predicate: ["scrollSpacer"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    _showPopoverIfNeeded() {
+        if (!this.usePopover) {
+            return;
+        }
+        if (typeof this._dropdown.showPopover === 'function') {
+            this._renderer.setAttribute(this._dropdown, 'popover', 'manual');
+            this._dropdown.showPopover();
+            this._parent = this._document.body;
+            this._updateXPosition();
+            this._updateYPosition();
+        }
+    }
+    _handleReposition() {
+        if (!this.appendTo && !this.usePopover) {
+            return;
+        }
+        this._zone.runOutsideAngular(() => {
+            merge(fromEvent(this._document, 'scroll', { capture: true, passive: true }), fromEvent(window, 'resize', { passive: true }))
+                .pipe(takeUntil(this._destroy$), auditTime(0, SCROLL_SCHEDULER))
+                .subscribe(() => {
+                this._updateXPosition();
+                this._updateYPosition();
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: NgSelectPanel, isStandalone: true, selector: "ng-select-panel", inputs: { listboxId: "listboxId", items: "items", markedItem: "markedItem", position: "position", appendTo: "appendTo", bufferAmount: "bufferAmount", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], multiple: ["multiple", "multiple", booleanAttribute], usePopover: ["usePopover", "usePopover", booleanAttribute], headerTemplate: "headerTemplate", footerTemplate: "footerTemplate", filterValue: "filterValue" }, outputs: { update: "update", scroll: "scroll", scrollToEnd: "scrollToEnd", outsideClick: "outsideClick" }, host: { properties: { "class.ng-select-popover": "usePopover", "class.ng-select-multiple": "multiple" }, classAttribute: "ng-select-panel" }, providers: [NgSelectPanelUtils], viewQueries: [{ propertyName: "scrollHostElRef", first: true, predicate: ["scrollHost"], descendants: true, read: ElementRef, static: true }, { propertyName: "scrollContentElRef", first: true, predicate: ["scrollContent"], descendants: true, read: ElementRef, static: true }, { propertyName: "scrollSpacerElRef", first: true, predicate: ["scrollSpacer"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
     @if (headerTemplate) {
       <div class="ng-select-panel-header">
         <ng-container
@@ -1778,7 +1809,7 @@ class NgSelectPanel {
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectPanel, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng-select-panel',
@@ -1820,6 +1851,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                     imports: [NgTemplateOutlet],
                     host: {
                         'class': 'ng-select-panel',
+                        '[class.ng-select-popover]': 'usePopover',
                         '[class.ng-select-multiple]': 'multiple',
                     },
                     encapsulation: ViewEncapsulation.None,
@@ -1844,6 +1876,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
             }], multiple: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], usePopover: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], headerTemplate: [{
                 type: Input
             }], footerTemplate: [{
@@ -1878,10 +1913,10 @@ class NgSelectLabelRenderer {
             ? escapeHTML(this.ngSelectLabelValue)
             : this.ngSelectLabelValue;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectLabelRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgSelectLabelRenderer, isStandalone: true, selector: "[ngSelectLabelValue]", inputs: { ngSelectLabelValue: "ngSelectLabelValue", ngSelectLabelEscape: "ngSelectLabelEscape" }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectLabelRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: NgSelectLabelRenderer, isStandalone: true, selector: "[ngSelectLabelValue]", inputs: { ngSelectLabelValue: "ngSelectLabelValue", ngSelectLabelEscape: "ngSelectLabelEscape" }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectLabelRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectLabelRenderer, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngSelectLabelValue]',
@@ -1893,10 +1928,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
             }] } });
 class NgSelectOptionTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectOptionTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgSelectOptionTemplate, isStandalone: true, selector: "[ngSelectOption]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectOptionTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: NgSelectOptionTemplate, isStandalone: true, selector: "[ngSelectOption]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectOptionTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectOptionTemplate, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngSelectOption]',
@@ -1904,10 +1939,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
         }] });
 class NgSelectOptgroupTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectOptgroupTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgSelectOptgroupTemplate, isStandalone: true, selector: "[ngSelectOptgroup]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectOptgroupTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: NgSelectOptgroupTemplate, isStandalone: true, selector: "[ngSelectOptgroup]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectOptgroupTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectOptgroupTemplate, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngSelectOptgroup]',
@@ -1915,10 +1950,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
         }] });
 class NgSelectLabelTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectLabelTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgSelectLabelTemplate, isStandalone: true, selector: "[ngSelectLabel]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectLabelTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: NgSelectLabelTemplate, isStandalone: true, selector: "[ngSelectLabel]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectLabelTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectLabelTemplate, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngSelectLabel]',
@@ -1926,10 +1961,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
         }] });
 class NgSelectMultiLabelTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectMultiLabelTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgSelectMultiLabelTemplate, isStandalone: true, selector: "[ngSelectMultiLabel]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectMultiLabelTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: NgSelectMultiLabelTemplate, isStandalone: true, selector: "[ngSelectMultiLabel]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectMultiLabelTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectMultiLabelTemplate, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngSelectMultiLabel]',
@@ -1937,10 +1972,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
         }] });
 class NgSelectPanelHeaderTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectPanelHeaderTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgSelectPanelHeaderTemplate, isStandalone: true, selector: "[ngSelectPanelHeader]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectPanelHeaderTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: NgSelectPanelHeaderTemplate, isStandalone: true, selector: "[ngSelectPanelHeader]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectPanelHeaderTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectPanelHeaderTemplate, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngSelectPanelHeader]',
@@ -1948,10 +1983,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
         }] });
 class NgSelectPanelFooterTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectPanelFooterTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgSelectPanelFooterTemplate, isStandalone: true, selector: "[ngSelectPanelFooter]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectPanelFooterTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: NgSelectPanelFooterTemplate, isStandalone: true, selector: "[ngSelectPanelFooter]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectPanelFooterTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectPanelFooterTemplate, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngSelectPanelFooter]',
@@ -1959,10 +1994,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
         }] });
 class NgSelectNotFoundTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectNotFoundTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgSelectNotFoundTemplate, isStandalone: true, selector: "[ngSelectNotFound]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectNotFoundTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: NgSelectNotFoundTemplate, isStandalone: true, selector: "[ngSelectNotFound]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectNotFoundTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectNotFoundTemplate, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngSelectNotFound]',
@@ -1970,10 +2005,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
         }] });
 class NgSelectPlaceholderTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectPlaceholderTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgSelectPlaceholderTemplate, isStandalone: true, selector: "[ngSelectPlaceholder]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectPlaceholderTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: NgSelectPlaceholderTemplate, isStandalone: true, selector: "[ngSelectPlaceholder]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectPlaceholderTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectPlaceholderTemplate, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngSelectPlaceholder]',
@@ -1981,10 +2016,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
         }] });
 class NgSelectTypeToSearchTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectTypeToSearchTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgSelectTypeToSearchTemplate, isStandalone: true, selector: "[ngSelectTypeToSearch]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectTypeToSearchTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: NgSelectTypeToSearchTemplate, isStandalone: true, selector: "[ngSelectTypeToSearch]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectTypeToSearchTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectTypeToSearchTemplate, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngSelectTypeToSearch]',
@@ -1992,10 +2027,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
         }] });
 class NgSelectLoadingTextTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectLoadingTextTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgSelectLoadingTextTemplate, isStandalone: true, selector: "[ngSelectLoadingText]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectLoadingTextTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: NgSelectLoadingTextTemplate, isStandalone: true, selector: "[ngSelectLoadingText]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectLoadingTextTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectLoadingTextTemplate, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngSelectLoadingText]',
@@ -2003,10 +2038,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
         }] });
 class NgSelectTagTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectTagTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgSelectTagTemplate, isStandalone: true, selector: "[ngSelectTag]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectTagTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: NgSelectTagTemplate, isStandalone: true, selector: "[ngSelectTag]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectTagTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectTagTemplate, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngSelectTag]',
@@ -2014,10 +2049,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
         }] });
 class NgSelectLoadingTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectLoadingTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgSelectLoadingTemplate, isStandalone: true, selector: "[ngSelectLoading]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectLoadingTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: NgSelectLoadingTemplate, isStandalone: true, selector: "[ngSelectLoading]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectLoadingTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectLoadingTemplate, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngSelectLoading]',
@@ -2025,10 +2060,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
         }] });
 class NgSelectClearButtonTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectClearButtonTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgSelectClearButtonTemplate, isStandalone: true, selector: "[ngSelectClearButton]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectClearButtonTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: NgSelectClearButtonTemplate, isStandalone: true, selector: "[ngSelectClearButton]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectClearButtonTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectClearButtonTemplate, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngSelectClearButton]',
@@ -2141,6 +2176,7 @@ class NgSelect {
     selectOnTab = false;
     openOnEnter = this._config.openOnEnter;
     virtualScroll = this._config.virtualScroll;
+    usePopover = this._config.usePopover;
     bufferAmount = 4;
     selectableGroup = false;
     selectableGroupAsModel = true;
@@ -2816,7 +2852,7 @@ class NgSelect {
         const model = [];
         for (const item of this.selectedItems) {
             if (this.bindValue) {
-                let value = null;
+                let value;
                 if (item.children) {
                     const groupKey = this.groupValue ? this.bindValue : this.groupBy;
                     value = item.value[groupKey || this.groupBy];
@@ -2867,7 +2903,7 @@ class NgSelect {
         this.dropdownPanel.scrollToTag();
     }
     _onSelectionChanged() {
-        if (this.isOpen && this.deselectOnClick && this.appendTo) {
+        if (this.isOpen && this.deselectOnClick && (this.appendTo || this.usePopover)) {
             // Make sure items are rendered.
             this._cdr.detectChanges();
             this.dropdownPanel.adjustPosition();
@@ -2964,16 +3000,16 @@ class NgSelect {
             this.clearModel();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: NgSelect, isStandalone: true, selector: "ng-select", inputs: { bindLabel: "bindLabel", bindValue: "bindValue", placeholder: "placeholder", fixedPlaceholder: "fixedPlaceholder", appendTo: "appendTo", panelPosition: "panelPosition", panelDisabled: ["panelDisabled", "panelDisabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], multiple: ["multiple", "multiple", booleanAttribute], searchable: ["searchable", "searchable", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], clearOnBackspace: ["clearOnBackspace", "clearOnBackspace", booleanAttribute], clearAllText: "clearAllText", loading: ["loading", "loading", booleanAttribute], loadingText: "loadingText", closeOnSelect: ["closeOnSelect", "closeOnSelect", booleanAttribute], hideSelected: ["hideSelected", "hideSelected", booleanAttribute], selectOnTab: ["selectOnTab", "selectOnTab", booleanAttribute], openOnEnter: ["openOnEnter", "openOnEnter", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], bufferAmount: ["bufferAmount", "bufferAmount", numberAttribute], selectableGroup: ["selectableGroup", "selectableGroup", booleanAttribute], selectableGroupAsModel: ["selectableGroupAsModel", "selectableGroupAsModel", booleanAttribute], searchWhileComposing: ["searchWhileComposing", "searchWhileComposing", booleanAttribute], editableSearchTerm: ["editableSearchTerm", "editableSearchTerm", booleanAttribute], maxSelectedItems: ["maxSelectedItems", "maxSelectedItems", numberAttribute], minTermLength: ["minTermLength", "minTermLength", numberAttribute], markFirst: ["markFirst", "markFirst", booleanAttribute], preventToggleOnRightClick: ["preventToggleOnRightClick", "preventToggleOnRightClick", booleanAttribute], addTag: "addTag", addTagText: "addTagText", notFoundText: "notFoundText", typeahead: "typeahead", typeToSearchText: "typeToSearchText", groupBy: "groupBy", groupValue: "groupValue", searchFn: "searchFn", keyDownFn: "keyDownFn", trackByFn: "trackByFn", tabIndex: ["tabIndex", "tabIndex", numberAttribute], inputAttrs: "inputAttrs", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", panelClass: "panelClass", inputId: "inputId", items: "items", compareWith: "compareWith", clearSearchOnAdd: ["clearSearchOnAdd", "clearSearchOnAdd", booleanAttribute], deselectOnClick: ["deselectOnClick", "deselectOnClick", booleanAttribute] }, 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-single": "!multiple", "class.ng-select-multiple": "multiple", "class.ng-select-typeahead": "typeahead", "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" }, classAttribute: "ng-select" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: NgSelect, isStandalone: true, selector: "ng-select", inputs: { bindLabel: "bindLabel", bindValue: "bindValue", placeholder: "placeholder", fixedPlaceholder: "fixedPlaceholder", appendTo: "appendTo", panelPosition: "panelPosition", panelDisabled: ["panelDisabled", "panelDisabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], multiple: ["multiple", "multiple", booleanAttribute], searchable: ["searchable", "searchable", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], clearOnBackspace: ["clearOnBackspace", "clearOnBackspace", booleanAttribute], clearAllText: "clearAllText", loading: ["loading", "loading", booleanAttribute], loadingText: "loadingText", closeOnSelect: ["closeOnSelect", "closeOnSelect", booleanAttribute], hideSelected: ["hideSelected", "hideSelected", booleanAttribute], selectOnTab: ["selectOnTab", "selectOnTab", booleanAttribute], openOnEnter: ["openOnEnter", "openOnEnter", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], usePopover: ["usePopover", "usePopover", booleanAttribute], bufferAmount: ["bufferAmount", "bufferAmount", numberAttribute], selectableGroup: ["selectableGroup", "selectableGroup", booleanAttribute], selectableGroupAsModel: ["selectableGroupAsModel", "selectableGroupAsModel", booleanAttribute], searchWhileComposing: ["searchWhileComposing", "searchWhileComposing", booleanAttribute], editableSearchTerm: ["editableSearchTerm", "editableSearchTerm", booleanAttribute], maxSelectedItems: ["maxSelectedItems", "maxSelectedItems", numberAttribute], minTermLength: ["minTermLength", "minTermLength", numberAttribute], markFirst: ["markFirst", "markFirst", booleanAttribute], preventToggleOnRightClick: ["preventToggleOnRightClick", "preventToggleOnRightClick", booleanAttribute], addTag: "addTag", addTagText: "addTagText", notFoundText: "notFoundText", typeahead: "typeahead", typeToSearchText: "typeToSearchText", groupBy: "groupBy", groupValue: "groupValue", searchFn: "searchFn", keyDownFn: "keyDownFn", trackByFn: "trackByFn", tabIndex: ["tabIndex", "tabIndex", numberAttribute], inputAttrs: "inputAttrs", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", panelClass: "panelClass", inputId: "inputId", items: "items", compareWith: "compareWith", clearSearchOnAdd: ["clearSearchOnAdd", "clearSearchOnAdd", booleanAttribute], deselectOnClick: ["deselectOnClick", "deselectOnClick", booleanAttribute] }, 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-single": "!multiple", "class.ng-select-multiple": "multiple", "class.ng-select-typeahead": "typeahead", "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" }, classAttribute: "ng-select" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NgSelect),
                 multi: true,
             },
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: NgSelectOptionTemplate, descendants: true, read: TemplateRef }, { propertyName: "optgroupTemplate", first: true, predicate: NgSelectOptgroupTemplate, descendants: true, read: TemplateRef }, { propertyName: "labelTemplate", first: true, predicate: NgSelectLabelTemplate, descendants: true, read: TemplateRef }, { propertyName: "multiLabelTemplate", first: true, predicate: NgSelectMultiLabelTemplate, descendants: true, read: TemplateRef }, { propertyName: "panelHeaderTemplate", first: true, predicate: NgSelectPanelHeaderTemplate, descendants: true, read: TemplateRef }, { propertyName: "panelFooterTemplate", first: true, predicate: NgSelectPanelFooterTemplate, descendants: true, read: TemplateRef }, { propertyName: "notFoundTemplate", first: true, predicate: NgSelectNotFoundTemplate, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: NgSelectPlaceholderTemplate, descendants: true, read: TemplateRef }, { propertyName: "typeToSearchTemplate", first: true, predicate: NgSelectTypeToSearchTemplate, descendants: true, read: TemplateRef }, { propertyName: "loadingTextTemplate", first: true, predicate: NgSelectLoadingTextTemplate, descendants: true, read: TemplateRef }, { propertyName: "tagTemplate", first: true, predicate: NgSelectTagTemplate, descendants: true, read: TemplateRef }, { propertyName: "loadingTemplate", first: true, predicate: NgSelectLoadingTemplate, descendants: true, read: TemplateRef }, { propertyName: "clearButtonTemplate", first: true, predicate: NgSelectClearButtonTemplate, descendants: true, read: TemplateRef }, { propertyName: "ngOptions", predicate: NgSelectOption, descendants: true }], viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: i0.forwardRef(() => NgSelectPanel), 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: "<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/mouse-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n\n<div class=\"ng-select-visually-hidden\">\n  <div role=\"status\" aria-atomic=\"true\" aria-live=\"polite\">\n    @if (isOpen && showNoItemsFound) {\n      {{ notFoundText }}\n    }\n  </div>\n\n  <div [attr.id]=\"_viewValuesId\">{{ selectedViewValuesStr }}</div>\n</div>\n\n<div\n  class=\"ng-select-control\"\n  [class.ng-select-has-value]=\"hasValue\"\n  (mousedown)=\"handleMousedown($event)\"\n>\n  <div class=\"ng-select-value-container\">\n    @if ((selectedItems.length === 0 && !searchTerm) || fixedPlaceholder) {\n      <ng-template #defaultPlaceholderTemplate>\n        <div class=\"ng-select-placeholder\">{{ placeholder }}</div>\n      </ng-template>\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n    }\n\n    @if ((!multiLabelTemplate || !multiple) && selectedItems.length > 0) {\n      @for (item of selectedItems; track trackByOption($index, item)) {\n        <div class=\"ng-select-value\" [class.ng-select-value-disabled]=\"item.disabled\">\n          <ng-template #defaultLabelTemplate>\n            <span\n              class=\"ng-select-value-label\"\n              [ngSelectLabelValue]=\"item.label || ''\"\n              [ngSelectLabelEscape]=\"escapeHTML\"\n            ></span>\n            @if (multiple) {\n              <span class=\"ng-select-value-remove\" (click)=\"unselect(item)\" role=\"button\">\n                <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n                  <path\n                    fill=\"currentColor\"\n                    d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"\n                  />\n                </svg>\n              </span>\n            }\n          </ng-template>\n          <ng-template\n            [ngTemplateOutlet]=\"labelTemplate || defaultLabelTemplate\"\n            [ngTemplateOutletContext]=\"{ item: item.value, clear: clearItem, label: item.label }\"\n          />\n        </div>\n      }\n    }\n\n    @if (multiple && multiLabelTemplate && selectedValues.length > 0) {\n      <ng-template\n        [ngTemplateOutlet]=\"multiLabelTemplate\"\n        [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\"\n      />\n    }\n\n    <div class=\"ng-select-input-container\">\n      <input\n        #searchInput\n        class=\"ng-select-input\"\n        [disabled]=\"disabled\"\n        [readOnly]=\"!searchable || itemsList.maxItemsSelected\"\n        [value]=\"searchTerm ?? ''\"\n        (change)=\"$event.stopPropagation()\"\n        (input)=\"filter(searchInput.value)\"\n        (focus)=\"onInputFocus($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (compositionend)=\"onCompositionEnd(searchInput.value)\"\n        (compositionstart)=\"onCompositionStart()\"\n        [tabIndex]=\"tabIndex\"\n        [attr.id]=\"inputId\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        [attr.aria-haspopup]=\"panelDisabled ? 'false' : 'listbox'\"\n        [attr.aria-expanded]=\"isOpen\"\n        [attr.aria-controls]=\"isOpen ? _listboxId : null\"\n        [attr.aria-activedescendant]=\"isOpen ? itemsList.markedItem?.htmlId : null\"\n        aria-autocomplete=\"list\"\n        role=\"combobox\"\n      />\n    </div>\n  </div>\n\n  @if (loading) {\n    <ng-template #defaultLoadingSpinnerTemplate>\n      <div class=\"ng-select-spinner\"></div>\n    </ng-template>\n    <ng-template [ngTemplateOutlet]=\"loadingTemplate || defaultLoadingSpinnerTemplate\" />\n  }\n\n  @if (showClearButton) {\n    @if (clearButtonTemplate) {\n      <ng-container [ngTemplateOutlet]=\"clearButtonTemplate\" />\n    } @else {\n      <span #clearButton class=\"ng-select-clear\" [title]=\"clearAllText\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n          <path\n            fill=\"currentColor\"\n            d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"\n          />\n        </svg>\n      </span>\n    }\n  }\n\n  @if (!panelDisabled) {\n    <span class=\"ng-select-arrow\" aria-hidden=\"true\">\n      <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n        <path\n          fill=\"currentColor\"\n          d=\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"\n        />\n      </svg>\n    </span>\n  }\n</div>\n\n@if (isOpen) {\n  <ng-select-panel\n    [class]=\"appendTo ? _classList : null\"\n    [multiple]=\"multiple\"\n    [listboxId]=\"_listboxId\"\n    [virtualScroll]=\"virtualScroll\"\n    [bufferAmount]=\"bufferAmount\"\n    [appendTo]=\"appendTo\"\n    [position]=\"panelPosition\"\n    [headerTemplate]=\"panelHeaderTemplate\"\n    [footerTemplate]=\"panelFooterTemplate\"\n    [filterValue]=\"searchTerm\"\n    [items]=\"itemsList.filteredItems\"\n    [markedItem]=\"itemsList.markedItem\"\n    (update)=\"updateViewPortItems($event)\"\n    (scroll)=\"scroll.emit($event)\"\n    (scrollToEnd)=\"scrollToEnd.emit()\"\n    (outsideClick)=\"close()\"\n  >\n    @for (item of viewPortItems; track trackByOption($index, item)) {\n      <div\n        class=\"ng-select-option\"\n        [class.ng-select-option-disabled]=\"item.disabled\"\n        [class.ng-select-option-selected]=\"item.selected\"\n        [class.ng-select-optgroup]=\"item.children\"\n        [class.ng-select-option]=\"!item.children\"\n        [class.ng-select-option-child]=\"!!item.parent\"\n        [class.ng-select-option-marked]=\"item === itemsList.markedItem\"\n        [attr.id]=\"item.htmlId\"\n        [attr.role]=\"item.children ? 'group' : 'option'\"\n        [attr.aria-disabled]=\"item.disabled ?? false\"\n        [attr.aria-selected]=\"item.selected ?? false\"\n        [attr.aria-setsize]=\"itemsList.filteredItems.length\"\n        [attr.aria-posinset]=\"(item.index || 0) + 1\"\n        (click)=\"toggleItem(item)\"\n        (mouseover)=\"onItemHover(item)\"\n      >\n        <ng-template #defaultOptionTemplate>\n          <span\n            class=\"ng-select-option-label\"\n            [ngSelectLabelValue]=\"item.label || ''\"\n            [ngSelectLabelEscape]=\"escapeHTML\"\n          ></span>\n        </ng-template>\n        <ng-template\n          [ngTemplateOutlet]=\"\n            item.children\n              ? optgroupTemplate || defaultOptionTemplate\n              : optionTemplate || defaultOptionTemplate\n          \"\n          [ngTemplateOutletContext]=\"{\n            item: item.value,\n            item$: item,\n            index: item.index,\n            searchTerm: searchTerm,\n          }\"\n        />\n      </div>\n    }\n\n    @if (showAddTag) {\n      <div\n        class=\"ng-select-option ng-select-tag-option\"\n        [class.ng-select-option-marked]=\"!itemsList.markedItem\"\n        role=\"option\"\n        [attr.aria-disabled]=\"false\"\n        [attr.aria-selected]=\"false\"\n        (click)=\"selectTag()\"\n        (mouseover)=\"itemsList.unmarkItem()\"\n      >\n        <ng-template #defaultTagTemplate>\n          <span class=\"ng-select-tag-option-label\">{{ addTagText }}</span>\n          <span class=\"ng-select-tag-option-value\">\"{{ searchTerm }}\"</span>\n        </ng-template>\n        <ng-template\n          [ngTemplateOutlet]=\"tagTemplate || defaultTagTemplate\"\n          [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n        />\n      </div>\n    }\n\n    @if (showNoItemsFound) {\n      <ng-template #defaultNotFoundTemplate>\n        <div class=\"ng-select-option ng-select-option-disabled\">{{ notFoundText }}</div>\n      </ng-template>\n      <ng-template\n        [ngTemplateOutlet]=\"notFoundTemplate || defaultNotFoundTemplate\"\n        [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n      />\n    }\n    @if (showTypeToSearch) {\n      <ng-template #defaultTypeToSearchTemplate>\n        <div class=\"ng-select-option ng-select-option-disabled\">{{ typeToSearchText }}</div>\n      </ng-template>\n      <ng-template [ngTemplateOutlet]=\"typeToSearchTemplate || defaultTypeToSearchTemplate\" />\n    }\n    @if (loading && itemsList.filteredItems.length === 0) {\n      <ng-template #defaultLoadingTextTemplate>\n        <div class=\"ng-select-option ng-select-option-disabled\">{{ loadingText }}</div>\n      </ng-template>\n      <ng-template\n        [ngTemplateOutlet]=\"loadingTextTemplate || defaultLoadingTextTemplate\"\n        [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n      />\n    }\n  </ng-select-panel>\n}\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block}.ng-select-control{box-sizing:border-box;position:relative;display:flex;width:100%;outline:none;overflow:hidden}.ng-select-opened .ng-select-control{z-index:1010}.ng-select-value-container{position:relative;display:flex;flex:1;flex-wrap:wrap;align-items:center}.ng-select-input-container{position:relative;box-sizing:border-box}.ng-select-value-remove svg{width:14px;height:14px}.ng-select-input{width:100%;padding:0;background:transparent;border:none;box-shadow:none;outline:none;cursor:default}.ng-select-input[readonly]{width:0;-webkit-user-select:unset;user-select:unset}.ng-select-clear,.ng-select-arrow{position:relative;-webkit-user-select:none;user-select:none}.ng-select-clear svg,.ng-select-arrow svg{width:20px;height:20px}.ng-select-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}.ng-select-disabled .ng-select-placeholder,.ng-select-disabled .ng-select-value{-webkit-user-select:none;user-select:none}.ng-select-disabled .ng-select-clear,.ng-select-disabled .ng-select-arrow{pointer-events:none}.ng-select-filtered .ng-select-placeholder,.ng-select-has-value .ng-select-placeholder{display:none}.ng-select-single.ng-select-filtered .ng-select-value{visibility:hidden}.ng-select-single .ng-select-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select-single .ng-select-input-container{position:absolute;left:0;right:0}.ng-select-multiple .ng-select-placeholder{position:absolute}.ng-select-multiple .ng-select-value{display:inline-flex;align-items:center;overflow:hidden}.ng-select-multiple .ng-select-value.ng-select-value-disabled{-webkit-user-select:none;user-select:none}.ng-select-multiple.ng-select-disabled .ng-select-value-remove,.ng-select-multiple .ng-select-value-disabled .ng-select-value-remove{display:none}.ng-select-multiple .ng-select-input-container{flex:1}.ng-select-panel{box-sizing:border-box;position:absolute;z-index:1080;width:100%;opacity:0;-webkit-overflow-scrolling:touch}.ng-select-listbox{max-height:300px;overflow-y:auto}.ng-select-option,.ng-select-optgroup{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select-option-highlighted{font-weight:700;text-decoration:underline}.ng-select-option-label:empty:before{content:\"\\200b\"}.ng-select-virtual-scroll-host{position:relative;overflow:hidden auto;-webkit-overflow-scrolling:touch}.ng-select-virtual-scroll-content{position:absolute;top:0;left:0;width:100%;contain:content}.ng-select-virtual-scroll-spacer{width:1px;opacity:0}.ng-select-spinner{position:relative;width:16px;height:16px;margin:auto 4px;border-radius:50%;border:2px solid rgba(66,66,66,.2);border-left-color:#666;animation:ng-select-spinning .8s infinite linear}@keyframes ng-select-spinning{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgSelectLabelRenderer, selector: "[ngSelectLabelValue]", inputs: ["ngSelectLabelValue", "ngSelectLabelEscape"] }, { kind: "component", type: NgSelectPanel, selector: "ng-select-panel", inputs: ["listboxId", "items", "markedItem", "position", "appendTo", "bufferAmount", "virtualScroll", "multiple", "headerTemplate", "footerTemplate", "filterValue"], outputs: ["update", "scroll", "scrollToEnd", "outsideClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: NgSelectOptionTemplate, descendants: true, read: TemplateRef }, { propertyName: "optgroupTemplate", first: true, predicate: NgSelectOptgroupTemplate, descendants: true, read: TemplateRef }, { propertyName: "labelTemplate", first: true, predicate: NgSelectLabelTemplate, descendants: true, read: TemplateRef }, { propertyName: "multiLabelTemplate", first: true, predicate: NgSelectMultiLabelTemplate, descendants: true, read: TemplateRef }, { propertyName: "panelHeaderTemplate", first: true, predicate: NgSelectPanelHeaderTemplate, descendants: true, read: TemplateRef }, { propertyName: "panelFooterTemplate", first: true, predicate: NgSelectPanelFooterTemplate, descendants: true, read: TemplateRef }, { propertyName: "notFoundTemplate", first: true, predicate: NgSelectNotFoundTemplate, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: NgSelectPlaceholderTemplate, descendants: true, read: TemplateRef }, { propertyName: "typeToSearchTemplate", first: true, predicate: NgSelectTypeToSearchTemplate, descendants: true, read: TemplateRef }, { propertyName: "loadingTextTemplate", first: true, predicate: NgSelectLoadingTextTemplate, descendants: true, read: TemplateRef }, { propertyName: "tagTemplate", first: true, predicate: NgSelectTagTemplate, descendants: true, read: TemplateRef }, { propertyName: "loadingTemplate", first: true, predicate: NgSelectLoadingTemplate, descendants: true, read: TemplateRef }, { propertyName: "clearButtonTemplate", first: true, predicate: NgSelectClearButtonTemplate, descendants: true, read: TemplateRef }, { propertyName: "ngOptions", predicate: NgSelectOption, descendants: true }], viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: i0.forwardRef(() => NgSelectPanel), 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: "<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/mouse-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n\n<div class=\"ng-select-visually-hidden\">\n  <div role=\"status\" aria-atomic=\"true\" aria-live=\"polite\">\n    @if (isOpen && showNoItemsFound) {\n      {{ notFoundText }}\n    }\n  </div>\n\n  <div [attr.id]=\"_viewValuesId\">{{ selectedViewValuesStr }}</div>\n</div>\n\n<div\n  class=\"ng-select-control\"\n  [class.ng-select-has-value]=\"hasValue\"\n  (mousedown)=\"handleMousedown($event)\"\n>\n  <div class=\"ng-select-value-container\">\n    @if ((selectedItems.length === 0 && !searchTerm) || fixedPlaceholder) {\n      <ng-template #defaultPlaceholderTemplate>\n        <div class=\"ng-select-placeholder\">{{ placeholder }}</div>\n      </ng-template>\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n    }\n\n    @if ((!multiLabelTemplate || !multiple) && selectedItems.length > 0) {\n      @for (item of selectedItems; track trackByOption($index, item)) {\n        <div class=\"ng-select-value\" [class.ng-select-value-disabled]=\"item.disabled\">\n          <ng-template #defaultLabelTemplate>\n            <span\n              class=\"ng-select-value-label\"\n              [ngSelectLabelValue]=\"item.label || ''\"\n              [ngSelectLabelEscape]=\"escapeHTML\"\n            ></span>\n            @if (multiple) {\n              <span class=\"ng-select-value-remove\" (click)=\"unselect(item)\" role=\"button\">\n                <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n                  <path\n                    fill=\"currentColor\"\n                    d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"\n                  />\n                </svg>\n              </span>\n            }\n          </ng-template>\n          <ng-template\n            [ngTemplateOutlet]=\"labelTemplate || defaultLabelTemplate\"\n            [ngTemplateOutletContext]=\"{ item: item.value, clear: clearItem, label: item.label }\"\n          />\n        </div>\n      }\n    }\n\n    @if (multiple && multiLabelTemplate && selectedValues.length > 0) {\n      <ng-template\n        [ngTemplateOutlet]=\"multiLabelTemplate\"\n        [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\"\n      />\n    }\n\n    <div class=\"ng-select-input-container\">\n      <input\n        #searchInput\n        class=\"ng-select-input\"\n        [disabled]=\"disabled\"\n        [readOnly]=\"!searchable || itemsList.maxItemsSelected\"\n        [value]=\"searchTerm ?? ''\"\n        (change)=\"$event.stopPropagation()\"\n        (input)=\"filter(searchInput.value)\"\n        (focus)=\"onInputFocus($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (compositionend)=\"onCompositionEnd(searchInput.value)\"\n        (compositionstart)=\"onCompositionStart()\"\n        [tabIndex]=\"tabIndex\"\n        [attr.id]=\"inputId\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        [attr.aria-haspopup]=\"panelDisabled ? 'false' : 'listbox'\"\n        [attr.aria-expanded]=\"isOpen\"\n        [attr.aria-controls]=\"isOpen ? _listboxId : null\"\n        [attr.aria-activedescendant]=\"isOpen ? itemsList.markedItem?.htmlId : null\"\n        aria-autocomplete=\"list\"\n        role=\"combobox\"\n      />\n    </div>\n  </div>\n\n  @if (loading) {\n    <ng-template #defaultLoadingSpinnerTemplate>\n      <div class=\"ng-select-spinner\"></div>\n    </ng-template>\n    <ng-template [ngTemplateOutlet]=\"loadingTemplate || defaultLoadingSpinnerTemplate\" />\n  }\n\n  @if (showClearButton) {\n    @if (clearButtonTemplate) {\n      <ng-container [ngTemplateOutlet]=\"clearButtonTemplate\" />\n    } @else {\n      <span #clearButton class=\"ng-select-clear\" [title]=\"clearAllText\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n          <path\n            fill=\"currentColor\"\n            d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"\n          />\n        </svg>\n      </span>\n    }\n  }\n\n  @if (!panelDisabled) {\n    <span class=\"ng-select-arrow\" aria-hidden=\"true\">\n      <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n        <path\n          fill=\"currentColor\"\n          d=\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"\n        />\n      </svg>\n    </span>\n  }\n</div>\n\n@if (isOpen) {\n  <ng-select-panel\n    [class]=\"appendTo ? _classList : null\"\n    [multiple]=\"multiple\"\n    [listboxId]=\"_listboxId\"\n    [virtualScroll]=\"virtualScroll\"\n    [bufferAmount]=\"bufferAmount\"\n    [appendTo]=\"appendTo\"\n    [position]=\"panelPosition\"\n    [usePopover]=\"usePopover\"\n    [headerTemplate]=\"panelHeaderTemplate\"\n    [footerTemplate]=\"panelFooterTemplate\"\n    [filterValue]=\"searchTerm\"\n    [items]=\"itemsList.filteredItems\"\n    [markedItem]=\"itemsList.markedItem\"\n    (update)=\"updateViewPortItems($event)\"\n    (scroll)=\"scroll.emit($event)\"\n    (scrollToEnd)=\"scrollToEnd.emit()\"\n    (outsideClick)=\"close()\"\n  >\n    @for (item of viewPortItems; track trackByOption($index, item)) {\n      <div\n        class=\"ng-select-option\"\n        [class.ng-select-option-disabled]=\"item.disabled\"\n        [class.ng-select-option-selected]=\"item.selected\"\n        [class.ng-select-optgroup]=\"item.children\"\n        [class.ng-select-option]=\"!item.children\"\n        [class.ng-select-option-child]=\"!!item.parent\"\n        [class.ng-select-option-marked]=\"item === itemsList.markedItem\"\n        [attr.id]=\"item.htmlId\"\n        [attr.role]=\"item.children ? 'group' : 'option'\"\n        [attr.aria-disabled]=\"item.disabled ?? false\"\n        [attr.aria-selected]=\"item.selected ?? false\"\n        [attr.aria-setsize]=\"itemsList.filteredItems.length\"\n        [attr.aria-posinset]=\"(item.index || 0) + 1\"\n        (click)=\"toggleItem(item)\"\n        (mouseover)=\"onItemHover(item)\"\n      >\n        <ng-template #defaultOptionTemplate>\n          <span\n            class=\"ng-select-option-label\"\n            [ngSelectLabelValue]=\"item.label || ''\"\n            [ngSelectLabelEscape]=\"escapeHTML\"\n          ></span>\n        </ng-template>\n        <ng-template\n          [ngTemplateOutlet]=\"\n            item.children\n              ? optgroupTemplate || defaultOptionTemplate\n              : optionTemplate || defaultOptionTemplate\n          \"\n          [ngTemplateOutletContext]=\"{\n            item: item.value,\n            item$: item,\n            index: item.index,\n            searchTerm: searchTerm,\n          }\"\n        />\n      </div>\n    }\n\n    @if (showAddTag) {\n      <div\n        class=\"ng-select-option ng-select-tag-option\"\n        [class.ng-select-option-marked]=\"!itemsList.markedItem\"\n        role=\"option\"\n        [attr.aria-disabled]=\"false\"\n        [attr.aria-selected]=\"false\"\n        (click)=\"selectTag()\"\n        (mouseover)=\"itemsList.unmarkItem()\"\n      >\n        <ng-template #defaultTagTemplate>\n          <span class=\"ng-select-tag-option-label\">{{ addTagText }}</span>\n          <span class=\"ng-select-tag-option-value\">\"{{ searchTerm }}\"</span>\n        </ng-template>\n        <ng-template\n          [ngTemplateOutlet]=\"tagTemplate || defaultTagTemplate\"\n          [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n        />\n      </div>\n    }\n\n    @if (showNoItemsFound) {\n      <ng-template #defaultNotFoundTemplate>\n        <div class=\"ng-select-option ng-select-option-disabled\">{{ notFoundText }}</div>\n      </ng-template>\n      <ng-template\n        [ngTemplateOutlet]=\"notFoundTemplate || defaultNotFoundTemplate\"\n        [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n      />\n    }\n    @if (showTypeToSearch) {\n      <ng-template #defaultTypeToSearchTemplate>\n        <div class=\"ng-select-option ng-select-option-disabled\">{{ typeToSearchText }}</div>\n      </ng-template>\n      <ng-template [ngTemplateOutlet]=\"typeToSearchTemplate || defaultTypeToSearchTemplate\" />\n    }\n    @if (loading && itemsList.filteredItems.length === 0) {\n      <ng-template #defaultLoadingTextTemplate>\n        <div class=\"ng-select-option ng-select-option-disabled\">{{ loadingText }}</div>\n      </ng-template>\n      <ng-template\n        [ngTemplateOutlet]=\"loadingTextTemplate || defaultLoadingTextTemplate\"\n        [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n      />\n    }\n  </ng-select-panel>\n}\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block}.ng-select-control{box-sizing:border-box;position:relative;display:flex;width:100%;outline:none;overflow:hidden}.ng-select-opened .ng-select-control{z-index:1010}.ng-select-value-container{position:relative;display:flex;flex:1;flex-wrap:wrap;align-items:center}.ng-select-input-container{position:relative;box-sizing:border-box}.ng-select-value-remove svg{width:var(--ns-multi-value-remove-icon-size, 14px);height:var(--ns-multi-value-remove-icon-size, 14px)}.ng-select-input{width:100%;padding:0;background:transparent;border:none;box-shadow:none;outline:none;cursor:default}.ng-select-input[readonly]{width:0;-webkit-user-select:unset;user-select:unset}.ng-select-clear,.ng-select-arrow{position:relative;-webkit-user-select:none;user-select:none}.ng-select-clear svg,.ng-select-arrow svg{width:var(--ns-indicator-icon-size, 20px);height:var(--ns-indicator-icon-size, 20px)}.ng-select-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}.ng-select-disabled .ng-select-placeholder,.ng-select-disabled .ng-select-value{-webkit-user-select:none;user-select:none}.ng-select-disabled .ng-select-clear,.ng-select-disabled .ng-select-arrow{pointer-events:none}.ng-select-filtered .ng-select-placeholder,.ng-select-has-value .ng-select-placeholder{display:none}.ng-select-single.ng-select-filtered .ng-select-value{visibility:hidden}.ng-select-single .ng-select-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select-single .ng-select-input-container{position:absolute;left:0;right:0}.ng-select-multiple .ng-select-placeholder{position:absolute}.ng-select-multiple .ng-select-value{display:inline-flex;align-items:center;overflow:hidden}.ng-select-multiple .ng-select-value.ng-select-value-disabled{-webkit-user-select:none;user-select:none}.ng-select-multiple.ng-select-disabled .ng-select-value-remove,.ng-select-multiple .ng-select-value-disabled .ng-select-value-remove{display:none}.ng-select-multiple .ng-select-input-container{flex:1}.ng-select-panel{box-sizing:border-box;position:absolute;z-index:1080;width:100%;opacity:0;-webkit-overflow-scrolling:touch}.ng-select-panel.ng-select-popover{position:fixed;padding:0;border:none}.ng-select-listbox{position:relative;max-height:var(--ns-panel-max-height, 300px);overflow-y:auto}.ng-select-option,.ng-select-optgroup{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select-option-highlighted{font-weight:700;text-decoration:underline}.ng-select-option-label:empty:before{content:\"\\200b\"}.ng-select-virtual-scroll-host{position:relative;overflow:hidden auto;-webkit-overflow-scrolling:touch}.ng-select-virtual-scroll-content{position:absolute;top:0;left:0;width:100%;contain:content}.ng-select-virtual-scroll-spacer{width:1px;opacity:0}.ng-select-spinner{position:relative;width:16px;height:16px;margin:auto 4px;border-radius:50%;border:2px solid rgba(66,66,66,.2);border-left-color:#666;animation:ng-select-spinning .8s infinite linear}@keyframes ng-select-spinning{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgSelectLabelRenderer, selector: "[ngSelectLabelValue]", inputs: ["ngSelectLabelValue", "ngSelectLabelEscape"] }, { kind: "component", type: NgSelectPanel, selector: "ng-select-panel", inputs: ["listboxId", "items", "markedItem", "position", "appendTo", "bufferAmount", "virtualScroll", "multiple", "usePopover", "headerTemplate", "footerTemplate", "filterValue"], outputs: ["update", "scroll", "scrollToEnd", "outsideClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelect, decorators: [{
             type: Component,
             args: [{ selector: 'ng-select', imports: [NgTemplateOutlet, NgSelectLabelRenderer, NgSelectPanel], host: {
                         'class': 'ng-select',
@@ -2993,7 +3029,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                             useExisting: forwardRef(() => NgSelect),
                             multi: true,
                         },
-                    ], template: "<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/mouse-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n\n<div class=\"ng-select-visually-hidden\">\n  <div role=\"status\" aria-atomic=\"true\" aria-live=\"polite\">\n    @if (isOpen && showNoItemsFound) {\n      {{ notFoundText }}\n    }\n  </div>\n\n  <div [attr.id]=\"_viewValuesId\">{{ selectedViewValuesStr }}</div>\n</div>\n\n<div\n  class=\"ng-select-control\"\n  [class.ng-select-has-value]=\"hasValue\"\n  (mousedown)=\"handleMousedown($event)\"\n>\n  <div class=\"ng-select-value-container\">\n    @if ((selectedItems.length === 0 && !searchTerm) || fixedPlaceholder) {\n      <ng-template #defaultPlaceholderTemplate>\n        <div class=\"ng-select-placeholder\">{{ placeholder }}</div>\n      </ng-template>\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n    }\n\n    @if ((!multiLabelTemplate || !multiple) && selectedItems.length > 0) {\n      @for (item of selectedItems; track trackByOption($index, item)) {\n        <div class=\"ng-select-value\" [class.ng-select-value-disabled]=\"item.disabled\">\n          <ng-template #defaultLabelTemplate>\n            <span\n              class=\"ng-select-value-label\"\n              [ngSelectLabelValue]=\"item.label || ''\"\n              [ngSelectLabelEscape]=\"escapeHTML\"\n            ></span>\n            @if (multiple) {\n              <span class=\"ng-select-value-remove\" (click)=\"unselect(item)\" role=\"button\">\n                <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n                  <path\n                    fill=\"currentColor\"\n                    d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"\n                  />\n                </svg>\n              </span>\n            }\n          </ng-template>\n          <ng-template\n            [ngTemplateOutlet]=\"labelTemplate || defaultLabelTemplate\"\n            [ngTemplateOutletContext]=\"{ item: item.value, clear: clearItem, label: item.label }\"\n          />\n        </div>\n      }\n    }\n\n    @if (multiple && multiLabelTemplate && selectedValues.length > 0) {\n      <ng-template\n        [ngTemplateOutlet]=\"multiLabelTemplate\"\n        [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\"\n      />\n    }\n\n    <div class=\"ng-select-input-container\">\n      <input\n        #searchInput\n        class=\"ng-select-input\"\n        [disabled]=\"disabled\"\n        [readOnly]=\"!searchable || itemsList.maxItemsSelected\"\n        [value]=\"searchTerm ?? ''\"\n        (change)=\"$event.stopPropagation()\"\n        (input)=\"filter(searchInput.value)\"\n        (focus)=\"onInputFocus($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (compositionend)=\"onCompositionEnd(searchInput.value)\"\n        (compositionstart)=\"onCompositionStart()\"\n        [tabIndex]=\"tabIndex\"\n        [attr.id]=\"inputId\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        [attr.aria-haspopup]=\"panelDisabled ? 'false' : 'listbox'\"\n        [attr.aria-expanded]=\"isOpen\"\n        [attr.aria-controls]=\"isOpen ? _listboxId : null\"\n        [attr.aria-activedescendant]=\"isOpen ? itemsList.markedItem?.htmlId : null\"\n        aria-autocomplete=\"list\"\n        role=\"combobox\"\n      />\n    </div>\n  </div>\n\n  @if (loading) {\n    <ng-template #defaultLoadingSpinnerTemplate>\n      <div class=\"ng-select-spinner\"></div>\n    </ng-template>\n    <ng-template [ngTemplateOutlet]=\"loadingTemplate || defaultLoadingSpinnerTemplate\" />\n  }\n\n  @if (showClearButton) {\n    @if (clearButtonTemplate) {\n      <ng-container [ngTemplateOutlet]=\"clearButtonTemplate\" />\n    } @else {\n      <span #clearButton class=\"ng-select-clear\" [title]=\"clearAllText\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n          <path\n            fill=\"currentColor\"\n            d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"\n          />\n        </svg>\n      </span>\n    }\n  }\n\n  @if (!panelDisabled) {\n    <span class=\"ng-select-arrow\" aria-hidden=\"true\">\n      <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n        <path\n          fill=\"currentColor\"\n          d=\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"\n        />\n      </svg>\n    </span>\n  }\n</div>\n\n@if (isOpen) {\n  <ng-select-panel\n    [class]=\"appendTo ? _classList : null\"\n    [multiple]=\"multiple\"\n    [listboxId]=\"_listboxId\"\n    [virtualScroll]=\"virtualScroll\"\n    [bufferAmount]=\"bufferAmount\"\n    [appendTo]=\"appendTo\"\n    [position]=\"panelPosition\"\n    [headerTemplate]=\"panelHeaderTemplate\"\n    [footerTemplate]=\"panelFooterTemplate\"\n    [filterValue]=\"searchTerm\"\n    [items]=\"itemsList.filteredItems\"\n    [markedItem]=\"itemsList.markedItem\"\n    (update)=\"updateViewPortItems($event)\"\n    (scroll)=\"scroll.emit($event)\"\n    (scrollToEnd)=\"scrollToEnd.emit()\"\n    (outsideClick)=\"close()\"\n  >\n    @for (item of viewPortItems; track trackByOption($index, item)) {\n      <div\n        class=\"ng-select-option\"\n        [class.ng-select-option-disabled]=\"item.disabled\"\n        [class.ng-select-option-selected]=\"item.selected\"\n        [class.ng-select-optgroup]=\"item.children\"\n        [class.ng-select-option]=\"!item.children\"\n        [class.ng-select-option-child]=\"!!item.parent\"\n        [class.ng-select-option-marked]=\"item === itemsList.markedItem\"\n        [attr.id]=\"item.htmlId\"\n        [attr.role]=\"item.children ? 'group' : 'option'\"\n        [attr.aria-disabled]=\"item.disabled ?? false\"\n        [attr.aria-selected]=\"item.selected ?? false\"\n        [attr.aria-setsize]=\"itemsList.filteredItems.length\"\n        [attr.aria-posinset]=\"(item.index || 0) + 1\"\n        (click)=\"toggleItem(item)\"\n        (mouseover)=\"onItemHover(item)\"\n      >\n        <ng-template #defaultOptionTemplate>\n          <span\n            class=\"ng-select-option-label\"\n            [ngSelectLabelValue]=\"item.label || ''\"\n            [ngSelectLabelEscape]=\"escapeHTML\"\n          ></span>\n        </ng-template>\n        <ng-template\n          [ngTemplateOutlet]=\"\n            item.children\n              ? optgroupTemplate || defaultOptionTemplate\n              : optionTemplate || defaultOptionTemplate\n          \"\n          [ngTemplateOutletContext]=\"{\n            item: item.value,\n            item$: item,\n            index: item.index,\n            searchTerm: searchTerm,\n          }\"\n        />\n      </div>\n    }\n\n    @if (showAddTag) {\n      <div\n        class=\"ng-select-option ng-select-tag-option\"\n        [class.ng-select-option-marked]=\"!itemsList.markedItem\"\n        role=\"option\"\n        [attr.aria-disabled]=\"false\"\n        [attr.aria-selected]=\"false\"\n        (click)=\"selectTag()\"\n        (mouseover)=\"itemsList.unmarkItem()\"\n      >\n        <ng-template #defaultTagTemplate>\n          <span class=\"ng-select-tag-option-label\">{{ addTagText }}</span>\n          <span class=\"ng-select-tag-option-value\">\"{{ searchTerm }}\"</span>\n        </ng-template>\n        <ng-template\n          [ngTemplateOutlet]=\"tagTemplate || defaultTagTemplate\"\n          [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n        />\n      </div>\n    }\n\n    @if (showNoItemsFound) {\n      <ng-template #defaultNotFoundTemplate>\n        <div class=\"ng-select-option ng-select-option-disabled\">{{ notFoundText }}</div>\n      </ng-template>\n      <ng-template\n        [ngTemplateOutlet]=\"notFoundTemplate || defaultNotFoundTemplate\"\n        [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n      />\n    }\n    @if (showTypeToSearch) {\n      <ng-template #defaultTypeToSearchTemplate>\n        <div class=\"ng-select-option ng-select-option-disabled\">{{ typeToSearchText }}</div>\n      </ng-template>\n      <ng-template [ngTemplateOutlet]=\"typeToSearchTemplate || defaultTypeToSearchTemplate\" />\n    }\n    @if (loading && itemsList.filteredItems.length === 0) {\n      <ng-template #defaultLoadingTextTemplate>\n        <div class=\"ng-select-option ng-select-option-disabled\">{{ loadingText }}</div>\n      </ng-template>\n      <ng-template\n        [ngTemplateOutlet]=\"loadingTextTemplate || defaultLoadingTextTemplate\"\n        [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n      />\n    }\n  </ng-select-panel>\n}\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block}.ng-select-control{box-sizing:border-box;position:relative;display:flex;width:100%;outline:none;overflow:hidden}.ng-select-opened .ng-select-control{z-index:1010}.ng-select-value-container{position:relative;display:flex;flex:1;flex-wrap:wrap;align-items:center}.ng-select-input-container{position:relative;box-sizing:border-box}.ng-select-value-remove svg{width:14px;height:14px}.ng-select-input{width:100%;padding:0;background:transparent;border:none;box-shadow:none;outline:none;cursor:default}.ng-select-input[readonly]{width:0;-webkit-user-select:unset;user-select:unset}.ng-select-clear,.ng-select-arrow{position:relative;-webkit-user-select:none;user-select:none}.ng-select-clear svg,.ng-select-arrow svg{width:20px;height:20px}.ng-select-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}.ng-select-disabled .ng-select-placeholder,.ng-select-disabled .ng-select-value{-webkit-user-select:none;user-select:none}.ng-select-disabled .ng-select-clear,.ng-select-disabled .ng-select-arrow{pointer-events:none}.ng-select-filtered .ng-select-placeholder,.ng-select-has-value .ng-select-placeholder{display:none}.ng-select-single.ng-select-filtered .ng-select-value{visibility:hidden}.ng-select-single .ng-select-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select-single .ng-select-input-container{position:absolute;left:0;right:0}.ng-select-multiple .ng-select-placeholder{position:absolute}.ng-select-multiple .ng-select-value{display:inline-flex;align-items:center;overflow:hidden}.ng-select-multiple .ng-select-value.ng-select-value-disabled{-webkit-user-select:none;user-select:none}.ng-select-multiple.ng-select-disabled .ng-select-value-remove,.ng-select-multiple .ng-select-value-disabled .ng-select-value-remove{display:none}.ng-select-multiple .ng-select-input-container{flex:1}.ng-select-panel{box-sizing:border-box;position:absolute;z-index:1080;width:100%;opacity:0;-webkit-overflow-scrolling:touch}.ng-select-listbox{max-height:300px;overflow-y:auto}.ng-select-option,.ng-select-optgroup{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select-option-highlighted{font-weight:700;text-decoration:underline}.ng-select-option-label:empty:before{content:\"\\200b\"}.ng-select-virtual-scroll-host{position:relative;overflow:hidden auto;-webkit-overflow-scrolling:touch}.ng-select-virtual-scroll-content{position:absolute;top:0;left:0;width:100%;contain:content}.ng-select-virtual-scroll-spacer{width:1px;opacity:0}.ng-select-spinner{position:relative;width:16px;height:16px;margin:auto 4px;border-radius:50%;border:2px solid rgba(66,66,66,.2);border-left-color:#666;animation:ng-select-spinning .8s infinite linear}@keyframes ng-select-spinning{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+                    ], template: "<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/mouse-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n\n<div class=\"ng-select-visually-hidden\">\n  <div role=\"status\" aria-atomic=\"true\" aria-live=\"polite\">\n    @if (isOpen && showNoItemsFound) {\n      {{ notFoundText }}\n    }\n  </div>\n\n  <div [attr.id]=\"_viewValuesId\">{{ selectedViewValuesStr }}</div>\n</div>\n\n<div\n  class=\"ng-select-control\"\n  [class.ng-select-has-value]=\"hasValue\"\n  (mousedown)=\"handleMousedown($event)\"\n>\n  <div class=\"ng-select-value-container\">\n    @if ((selectedItems.length === 0 && !searchTerm) || fixedPlaceholder) {\n      <ng-template #defaultPlaceholderTemplate>\n        <div class=\"ng-select-placeholder\">{{ placeholder }}</div>\n      </ng-template>\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n    }\n\n    @if ((!multiLabelTemplate || !multiple) && selectedItems.length > 0) {\n      @for (item of selectedItems; track trackByOption($index, item)) {\n        <div class=\"ng-select-value\" [class.ng-select-value-disabled]=\"item.disabled\">\n          <ng-template #defaultLabelTemplate>\n            <span\n              class=\"ng-select-value-label\"\n              [ngSelectLabelValue]=\"item.label || ''\"\n              [ngSelectLabelEscape]=\"escapeHTML\"\n            ></span>\n            @if (multiple) {\n              <span class=\"ng-select-value-remove\" (click)=\"unselect(item)\" role=\"button\">\n                <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n                  <path\n                    fill=\"currentColor\"\n                    d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"\n                  />\n                </svg>\n              </span>\n            }\n          </ng-template>\n          <ng-template\n            [ngTemplateOutlet]=\"labelTemplate || defaultLabelTemplate\"\n            [ngTemplateOutletContext]=\"{ item: item.value, clear: clearItem, label: item.label }\"\n          />\n        </div>\n      }\n    }\n\n    @if (multiple && multiLabelTemplate && selectedValues.length > 0) {\n      <ng-template\n        [ngTemplateOutlet]=\"multiLabelTemplate\"\n        [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\"\n      />\n    }\n\n    <div class=\"ng-select-input-container\">\n      <input\n        #searchInput\n        class=\"ng-select-input\"\n        [disabled]=\"disabled\"\n        [readOnly]=\"!searchable || itemsList.maxItemsSelected\"\n        [value]=\"searchTerm ?? ''\"\n        (change)=\"$event.stopPropagation()\"\n        (input)=\"filter(searchInput.value)\"\n        (focus)=\"onInputFocus($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (compositionend)=\"onCompositionEnd(searchInput.value)\"\n        (compositionstart)=\"onCompositionStart()\"\n        [tabIndex]=\"tabIndex\"\n        [attr.id]=\"inputId\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        [attr.aria-haspopup]=\"panelDisabled ? 'false' : 'listbox'\"\n        [attr.aria-expanded]=\"isOpen\"\n        [attr.aria-controls]=\"isOpen ? _listboxId : null\"\n        [attr.aria-activedescendant]=\"isOpen ? itemsList.markedItem?.htmlId : null\"\n        aria-autocomplete=\"list\"\n        role=\"combobox\"\n      />\n    </div>\n  </div>\n\n  @if (loading) {\n    <ng-template #defaultLoadingSpinnerTemplate>\n      <div class=\"ng-select-spinner\"></div>\n    </ng-template>\n    <ng-template [ngTemplateOutlet]=\"loadingTemplate || defaultLoadingSpinnerTemplate\" />\n  }\n\n  @if (showClearButton) {\n    @if (clearButtonTemplate) {\n      <ng-container [ngTemplateOutlet]=\"clearButtonTemplate\" />\n    } @else {\n      <span #clearButton class=\"ng-select-clear\" [title]=\"clearAllText\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n          <path\n            fill=\"currentColor\"\n            d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"\n          />\n        </svg>\n      </span>\n    }\n  }\n\n  @if (!panelDisabled) {\n    <span class=\"ng-select-arrow\" aria-hidden=\"true\">\n      <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n        <path\n          fill=\"currentColor\"\n          d=\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"\n        />\n      </svg>\n    </span>\n  }\n</div>\n\n@if (isOpen) {\n  <ng-select-panel\n    [class]=\"appendTo ? _classList : null\"\n    [multiple]=\"multiple\"\n    [listboxId]=\"_listboxId\"\n    [virtualScroll]=\"virtualScroll\"\n    [bufferAmount]=\"bufferAmount\"\n    [appendTo]=\"appendTo\"\n    [position]=\"panelPosition\"\n    [usePopover]=\"usePopover\"\n    [headerTemplate]=\"panelHeaderTemplate\"\n    [footerTemplate]=\"panelFooterTemplate\"\n    [filterValue]=\"searchTerm\"\n    [items]=\"itemsList.filteredItems\"\n    [markedItem]=\"itemsList.markedItem\"\n    (update)=\"updateViewPortItems($event)\"\n    (scroll)=\"scroll.emit($event)\"\n    (scrollToEnd)=\"scrollToEnd.emit()\"\n    (outsideClick)=\"close()\"\n  >\n    @for (item of viewPortItems; track trackByOption($index, item)) {\n      <div\n        class=\"ng-select-option\"\n        [class.ng-select-option-disabled]=\"item.disabled\"\n        [class.ng-select-option-selected]=\"item.selected\"\n        [class.ng-select-optgroup]=\"item.children\"\n        [class.ng-select-option]=\"!item.children\"\n        [class.ng-select-option-child]=\"!!item.parent\"\n        [class.ng-select-option-marked]=\"item === itemsList.markedItem\"\n        [attr.id]=\"item.htmlId\"\n        [attr.role]=\"item.children ? 'group' : 'option'\"\n        [attr.aria-disabled]=\"item.disabled ?? false\"\n        [attr.aria-selected]=\"item.selected ?? false\"\n        [attr.aria-setsize]=\"itemsList.filteredItems.length\"\n        [attr.aria-posinset]=\"(item.index || 0) + 1\"\n        (click)=\"toggleItem(item)\"\n        (mouseover)=\"onItemHover(item)\"\n      >\n        <ng-template #defaultOptionTemplate>\n          <span\n            class=\"ng-select-option-label\"\n            [ngSelectLabelValue]=\"item.label || ''\"\n            [ngSelectLabelEscape]=\"escapeHTML\"\n          ></span>\n        </ng-template>\n        <ng-template\n          [ngTemplateOutlet]=\"\n            item.children\n              ? optgroupTemplate || defaultOptionTemplate\n              : optionTemplate || defaultOptionTemplate\n          \"\n          [ngTemplateOutletContext]=\"{\n            item: item.value,\n            item$: item,\n            index: item.index,\n            searchTerm: searchTerm,\n          }\"\n        />\n      </div>\n    }\n\n    @if (showAddTag) {\n      <div\n        class=\"ng-select-option ng-select-tag-option\"\n        [class.ng-select-option-marked]=\"!itemsList.markedItem\"\n        role=\"option\"\n        [attr.aria-disabled]=\"false\"\n        [attr.aria-selected]=\"false\"\n        (click)=\"selectTag()\"\n        (mouseover)=\"itemsList.unmarkItem()\"\n      >\n        <ng-template #defaultTagTemplate>\n          <span class=\"ng-select-tag-option-label\">{{ addTagText }}</span>\n          <span class=\"ng-select-tag-option-value\">\"{{ searchTerm }}\"</span>\n        </ng-template>\n        <ng-template\n          [ngTemplateOutlet]=\"tagTemplate || defaultTagTemplate\"\n          [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n        />\n      </div>\n    }\n\n    @if (showNoItemsFound) {\n      <ng-template #defaultNotFoundTemplate>\n        <div class=\"ng-select-option ng-select-option-disabled\">{{ notFoundText }}</div>\n      </ng-template>\n      <ng-template\n        [ngTemplateOutlet]=\"notFoundTemplate || defaultNotFoundTemplate\"\n        [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n      />\n    }\n    @if (showTypeToSearch) {\n      <ng-template #defaultTypeToSearchTemplate>\n        <div class=\"ng-select-option ng-select-option-disabled\">{{ typeToSearchText }}</div>\n      </ng-template>\n      <ng-template [ngTemplateOutlet]=\"typeToSearchTemplate || defaultTypeToSearchTemplate\" />\n    }\n    @if (loading && itemsList.filteredItems.length === 0) {\n      <ng-template #defaultLoadingTextTemplate>\n        <div class=\"ng-select-option ng-select-option-disabled\">{{ loadingText }}</div>\n      </ng-template>\n      <ng-template\n        [ngTemplateOutlet]=\"loadingTextTemplate || defaultLoadingTextTemplate\"\n        [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n      />\n    }\n  </ng-select-panel>\n}\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block}.ng-select-control{box-sizing:border-box;position:relative;display:flex;width:100%;outline:none;overflow:hidden}.ng-select-opened .ng-select-control{z-index:1010}.ng-select-value-container{position:relative;display:flex;flex:1;flex-wrap:wrap;align-items:center}.ng-select-input-container{position:relative;box-sizing:border-box}.ng-select-value-remove svg{width:var(--ns-multi-value-remove-icon-size, 14px);height:var(--ns-multi-value-remove-icon-size, 14px)}.ng-select-input{width:100%;padding:0;background:transparent;border:none;box-shadow:none;outline:none;cursor:default}.ng-select-input[readonly]{width:0;-webkit-user-select:unset;user-select:unset}.ng-select-clear,.ng-select-arrow{position:relative;-webkit-user-select:none;user-select:none}.ng-select-clear svg,.ng-select-arrow svg{width:var(--ns-indicator-icon-size, 20px);height:var(--ns-indicator-icon-size, 20px)}.ng-select-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}.ng-select-disabled .ng-select-placeholder,.ng-select-disabled .ng-select-value{-webkit-user-select:none;user-select:none}.ng-select-disabled .ng-select-clear,.ng-select-disabled .ng-select-arrow{pointer-events:none}.ng-select-filtered .ng-select-placeholder,.ng-select-has-value .ng-select-placeholder{display:none}.ng-select-single.ng-select-filtered .ng-select-value{visibility:hidden}.ng-select-single .ng-select-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select-single .ng-select-input-container{position:absolute;left:0;right:0}.ng-select-multiple .ng-select-placeholder{position:absolute}.ng-select-multiple .ng-select-value{display:inline-flex;align-items:center;overflow:hidden}.ng-select-multiple .ng-select-value.ng-select-value-disabled{-webkit-user-select:none;user-select:none}.ng-select-multiple.ng-select-disabled .ng-select-value-remove,.ng-select-multiple .ng-select-value-disabled .ng-select-value-remove{display:none}.ng-select-multiple .ng-select-input-container{flex:1}.ng-select-panel{box-sizing:border-box;position:absolute;z-index:1080;width:100%;opacity:0;-webkit-overflow-scrolling:touch}.ng-select-panel.ng-select-popover{position:fixed;padding:0;border:none}.ng-select-listbox{position:relative;max-height:var(--ns-panel-max-height, 300px);overflow-y:auto}.ng-select-option,.ng-select-optgroup{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select-option-highlighted{font-weight:700;text-decoration:underline}.ng-select-option-label:empty:before{content:\"\\200b\"}.ng-select-virtual-scroll-host{position:relative;overflow:hidden auto;-webkit-overflow-scrolling:touch}.ng-select-virtual-scroll-content{position:absolute;top:0;left:0;width:100%;contain:content}.ng-select-virtual-scroll-spacer{width:1px;opacity:0}.ng-select-spinner{position:relative;width:16px;height:16px;margin:auto 4px;border-radius:50%;border:2px solid rgba(66,66,66,.2);border-left-color:#666;animation:ng-select-spinning .8s infinite linear}@keyframes ng-select-spinning{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { bindLabel: [{
                 type: Input
             }], bindValue: [{
@@ -3046,6 +3082,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
             }], virtualScroll: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], usePopover: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], bufferAmount: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
@@ -3203,8 +3242,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
             }] } });
 
 class NgSelectModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.12", ngImport: i0, type: NgSelectModule, imports: [NgSelectPanel,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: NgSelectModule, imports: [NgSelectPanel,
             NgSelect,
             NgSelectOption,
             NgSelectOptgroupTemplate,
@@ -3235,14 +3274,14 @@ class NgSelectModule {
             NgSelectLoadingTextTemplate,
             NgSelectTagTemplate,
             NgSelectLoadingTemplate] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectModule, providers: [
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectModule, providers: [
             {
                 provide: SELECTION_MODEL_FACTORY,
                 useValue: DefaultSelectionModelFactory,
             },
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3326,10 +3365,10 @@ class NgSelectOptionHighlight {
     _setInnerHtml(html) {
         this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', html);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectOptionHighlight, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgSelectOptionHighlight, isStandalone: true, selector: "[ngOptionHighlight]", inputs: { term: ["ngOptionHighlight", "term"] }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectOptionHighlight, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: NgSelectOptionHighlight, isStandalone: true, selector: "[ngOptionHighlight]", inputs: { term: ["ngOptionHighlight", "term"] }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectOptionHighlight, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgSelectOptionHighlight, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngOptionHighlight]',