@ng-matero/ng-select 0.5.2 → 1.0.0

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

@@ -1,74 +1,9 @@
-import { NgTemplateOutlet } from '@angular/common';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, inject, DOCUMENT, Renderer2, NgZone, ElementRef, booleanAttribute, ViewChild, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, Directive, TemplateRef, InjectionToken, ChangeDetectorRef, HostAttributeToken, forwardRef, numberAttribute, ContentChild, ContentChildren, NgModule } from '@angular/core';
-import { animationFrameScheduler, asapScheduler, Subject, fromEvent, merge } from 'rxjs';
-import { takeUntil, auditTime, startWith, tap, debounceTime, filter, map } from 'rxjs/operators';
+import { Injectable, inject, ElementRef, booleanAttribute, Input, ChangeDetectionStrategy, Component, EventEmitter, Renderer2, NgZone, ViewChild, Output, ViewEncapsulation, Directive, TemplateRef, InjectionToken, ChangeDetectorRef, HostAttributeToken, forwardRef, numberAttribute, ContentChild, ContentChildren, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-
-class NgDropdownPanelUtils {
-    get dimensions() {
-        return this._dimensions;
-    }
-    _dimensions = {
-        itemHeight: 0,
-        panelHeight: 0,
-        itemsPerViewport: 0,
-    };
-    calculateItems(scrollPos, itemsLength, buffer) {
-        const d = this._dimensions;
-        const scrollHeight = d.itemHeight * itemsLength;
-        const scrollTop = Math.max(0, scrollPos);
-        const indexByScrollTop = (scrollTop / scrollHeight) * itemsLength;
-        let end = Math.min(itemsLength, Math.ceil(indexByScrollTop) + (d.itemsPerViewport + 1));
-        const maxStartEnd = end;
-        const maxStart = Math.max(0, maxStartEnd - d.itemsPerViewport);
-        let start = Math.min(maxStart, Math.floor(indexByScrollTop));
-        let topPadding = d.itemHeight * Math.ceil(start) - d.itemHeight * Math.min(start, buffer);
-        topPadding = !isNaN(topPadding) ? topPadding : 0;
-        start = !isNaN(start) ? start : -1;
-        end = !isNaN(end) ? end : -1;
-        start -= buffer;
-        start = Math.max(0, start);
-        end += buffer;
-        end = Math.min(itemsLength, end);
-        return {
-            topPadding,
-            scrollHeight,
-            start,
-            end,
-        };
-    }
-    setDimensions(itemHeight, panelHeight) {
-        const itemsPerViewport = Math.max(1, Math.floor(panelHeight / itemHeight));
-        this._dimensions = {
-            itemHeight,
-            panelHeight,
-            itemsPerViewport,
-        };
-    }
-    getScrollTo(itemTop, itemHeight, lastScroll) {
-        const { panelHeight } = this.dimensions;
-        const itemBottom = itemTop + itemHeight;
-        const top = lastScroll;
-        const bottom = top + panelHeight;
-        if (panelHeight >= itemBottom && lastScroll === itemTop) {
-            return null;
-        }
-        if (itemBottom > bottom) {
-            return top + itemBottom - bottom;
-        }
-        else if (itemTop <= top) {
-            return itemTop;
-        }
-        return null;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgDropdownPanelUtils, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgDropdownPanelUtils, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgDropdownPanelUtils, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+import { Subject, animationFrameScheduler, asapScheduler, fromEvent, merge } from 'rxjs';
+import { takeUntil, auditTime, startWith, tap, debounceTime, filter, map } from 'rxjs/operators';
 
 const unescapedHTMLExp = /[&<>"']/g;
 const hasUnescapedHTMLExp = RegExp(unescapedHTMLExp.source);
@@ -107,558 +42,6 @@ var KeyCode;
     KeyCode["Backspace"] = "Backspace";
 })(KeyCode || (KeyCode = {}));
 
-const CSS_POSITIONS = ['top', 'right', 'bottom', 'left'];
-const SCROLL_SCHEDULER = typeof requestAnimationFrame !== 'undefined' ? animationFrameScheduler : asapScheduler;
-class NgDropdownPanel {
-    listboxId = '';
-    items = [];
-    markedItem;
-    position = 'auto';
-    appendTo;
-    bufferAmount = 4;
-    virtualScroll = false;
-    headerTemplate;
-    footerTemplate;
-    filterValue = null;
-    update = new EventEmitter();
-    scroll = new EventEmitter();
-    scrollToEnd = new EventEmitter();
-    outsideClick = new EventEmitter();
-    scrollHostElRef;
-    scrollContentElRef;
-    scrollSpacerElRef;
-    _document = inject(DOCUMENT, { optional: true });
-    _renderer = inject(Renderer2);
-    _zone = inject(NgZone);
-    _elementRef = inject(ElementRef);
-    _panelUtils = inject(NgDropdownPanelUtils);
-    _destroy$ = new Subject();
-    _dropdown = this._elementRef.nativeElement;
-    _select;
-    _parent;
-    _scrollHost;
-    _scrollContent;
-    _scrollSpacer;
-    _scrollToEndFired = false;
-    _updateScrollHeight = false;
-    _lastScrollPosition = 0;
-    get currentPosition() {
-        return this._currentPosition;
-    }
-    _currentPosition = 'auto';
-    get itemsLength() {
-        return this._itemsLength;
-    }
-    set itemsLength(value) {
-        if (value !== this._itemsLength) {
-            this._itemsLength = value;
-            this._onItemsLengthChanged();
-        }
-    }
-    _itemsLength;
-    get _startOffset() {
-        if (this.markedItem) {
-            const { itemHeight, panelHeight } = this._panelUtils.dimensions;
-            const offset = this.markedItem.index * itemHeight;
-            return panelHeight > offset ? 0 : offset;
-        }
-        return 0;
-    }
-    ngOnInit() {
-        this._select = this._dropdown.parentElement;
-        this._scrollHost = this.scrollHostElRef.nativeElement;
-        this._scrollContent = this.scrollContentElRef.nativeElement;
-        this._scrollSpacer = this.scrollSpacerElRef.nativeElement;
-        this._handleScroll();
-        this._handleOutsideClick();
-        this._appendDropdown();
-        this._setupMousedownListener();
-    }
-    ngOnChanges(changes) {
-        if (changes['items']) {
-            const change = changes['items'];
-            this._onItemsChange(change.currentValue, change.firstChange);
-        }
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-        this._destroy$.unsubscribe();
-        if (this.appendTo) {
-            this._renderer.removeChild(this._dropdown.parentNode, this._dropdown);
-        }
-    }
-    scrollTo(option, startFromOption = false) {
-        if (!option) {
-            return;
-        }
-        const index = this.items.indexOf(option);
-        if (index < 0 || index >= this.itemsLength) {
-            return;
-        }
-        let scrollTo;
-        if (this.virtualScroll) {
-            const itemHeight = this._panelUtils.dimensions.itemHeight;
-            scrollTo = this._panelUtils.getScrollTo(index * itemHeight, itemHeight, this._lastScrollPosition);
-        }
-        else {
-            const item = this._dropdown.querySelector(`#${option.htmlId}`);
-            const lastScroll = startFromOption ? item.offsetTop : this._lastScrollPosition;
-            scrollTo = this._panelUtils.getScrollTo(item.offsetTop, item.clientHeight, lastScroll);
-        }
-        if (isDefined(scrollTo)) {
-            this._scrollHost.scrollTop = scrollTo;
-        }
-    }
-    scrollToTag() {
-        const panel = this._scrollHost;
-        panel.scrollTop = panel.scrollHeight - panel.clientHeight;
-    }
-    adjustPosition() {
-        this._updateYPosition();
-    }
-    _handleDropdownPosition() {
-        this._currentPosition = this._calculateCurrentPosition(this._dropdown);
-        if (CSS_POSITIONS.includes(this._currentPosition)) {
-            this._updateDropdownClass(this._currentPosition);
-        }
-        else {
-            this._updateDropdownClass('bottom');
-        }
-        if (this.appendTo) {
-            this._updateYPosition();
-        }
-        this._dropdown.style.opacity = '1';
-    }
-    _updateDropdownClass(currentPosition) {
-        CSS_POSITIONS.forEach(position => {
-            const REMOVE_CSS_CLASS = `ng-select-${position}`;
-            this._renderer.removeClass(this._dropdown, REMOVE_CSS_CLASS);
-            this._renderer.removeClass(this._select, REMOVE_CSS_CLASS);
-        });
-        const ADD_CSS_CLASS = `ng-select-${currentPosition}`;
-        this._renderer.addClass(this._dropdown, ADD_CSS_CLASS);
-        this._renderer.addClass(this._select, ADD_CSS_CLASS);
-    }
-    _handleScroll() {
-        this._zone.runOutsideAngular(() => {
-            fromEvent(this._scrollHost, 'scroll')
-                .pipe(takeUntil(this._destroy$), auditTime(0, SCROLL_SCHEDULER))
-                .subscribe(e => {
-                const path = e.path || (e.composedPath && e.composedPath());
-                if (!path || (path.length === 0 && !e.target)) {
-                    return;
-                }
-                const scrollTop = !path || path.length === 0 ? e.target.scrollTop : path[0].scrollTop;
-                this._onContentScrolled(scrollTop);
-            });
-        });
-    }
-    _handleOutsideClick() {
-        if (!this._document) {
-            return;
-        }
-        this._zone.runOutsideAngular(() => {
-            merge(fromEvent(this._document, 'touchstart', { capture: true }), fromEvent(this._document, 'click', { capture: true }))
-                .pipe(takeUntil(this._destroy$))
-                .subscribe($event => this._checkToClose($event));
-        });
-    }
-    _checkToClose($event) {
-        if (this._select.contains($event.target) || this._dropdown.contains($event.target)) {
-            return;
-        }
-        const path = $event.path || ($event.composedPath && $event.composedPath());
-        if ($event.target &&
-            $event.target.shadowRoot &&
-            path &&
-            path[0] &&
-            this._select.contains(path[0])) {
-            return;
-        }
-        this._zone.run(() => this.outsideClick.emit());
-    }
-    _onItemsChange(items, firstChange) {
-        this.items = items || [];
-        this._scrollToEndFired = false;
-        this.itemsLength = items.length;
-        if (this.virtualScroll) {
-            this._updateItemsRange(firstChange);
-        }
-        else {
-            this._setVirtualHeight();
-            this._updateItems(firstChange);
-        }
-    }
-    _updateItems(firstChange) {
-        this.update.emit(this.items);
-        if (firstChange === false) {
-            return;
-        }
-        this._zone.runOutsideAngular(() => {
-            Promise.resolve().then(() => {
-                const panelHeight = this._scrollHost.clientHeight;
-                this._panelUtils.setDimensions(0, panelHeight);
-                this._handleDropdownPosition();
-                this.scrollTo(this.markedItem, firstChange);
-            });
-        });
-    }
-    _updateItemsRange(firstChange) {
-        this._zone.runOutsideAngular(() => {
-            this._measureDimensions().then(() => {
-                if (firstChange) {
-                    this._renderItemsRange(this._startOffset);
-                    this._handleDropdownPosition();
-                }
-                else {
-                    this._renderItemsRange();
-                }
-            });
-        });
-    }
-    _onContentScrolled(scrollTop) {
-        if (this.virtualScroll) {
-            this._renderItemsRange(scrollTop);
-        }
-        this._lastScrollPosition = scrollTop;
-        this._fireScrollToEnd(scrollTop);
-    }
-    _updateVirtualHeight(height) {
-        if (this._updateScrollHeight) {
-            this._scrollSpacer.style.height = `${height}px`;
-            this._updateScrollHeight = false;
-        }
-    }
-    _setVirtualHeight() {
-        if (!this._scrollSpacer) {
-            return;
-        }
-        this._scrollSpacer.style.height = `0px`;
-    }
-    _onItemsLengthChanged() {
-        this._updateScrollHeight = true;
-    }
-    _renderItemsRange(scrollTop) {
-        if (scrollTop && this._lastScrollPosition === scrollTop) {
-            return;
-        }
-        scrollTop = scrollTop || this._scrollHost.scrollTop;
-        const range = this._panelUtils.calculateItems(scrollTop, this.itemsLength, this.bufferAmount);
-        this._updateVirtualHeight(range.scrollHeight);
-        this._scrollContent.style.transform = `translateY(${range.topPadding}px)`;
-        this._zone.run(() => {
-            this.update.emit(this.items.slice(range.start, range.end));
-            this.scroll.emit({ start: range.start, end: range.end });
-        });
-        if (isDefined(scrollTop) && this._lastScrollPosition === 0) {
-            this._scrollHost.scrollTop = scrollTop;
-            this._lastScrollPosition = scrollTop;
-        }
-    }
-    _measureDimensions() {
-        if (this._panelUtils.dimensions.itemHeight > 0 || this.itemsLength === 0) {
-            return Promise.resolve(this._panelUtils.dimensions);
-        }
-        const [first] = this.items;
-        this.update.emit([first]);
-        return Promise.resolve().then(() => {
-            const option = this._dropdown.querySelector(`#${first.htmlId}`);
-            const optionHeight = option.clientHeight;
-            this._scrollSpacer.style.height = `${optionHeight * this.itemsLength}px`;
-            const panelHeight = this._scrollHost.clientHeight;
-            this._panelUtils.setDimensions(optionHeight, panelHeight);
-            return this._panelUtils.dimensions;
-        });
-    }
-    _fireScrollToEnd(scrollTop) {
-        if (this._scrollToEndFired || scrollTop === 0) {
-            return;
-        }
-        const padding = this.virtualScroll ? this._scrollSpacer : this._scrollContent;
-        if (scrollTop + this._dropdown.clientHeight >= padding.clientHeight - 1) {
-            this._zone.run(() => this.scrollToEnd.emit());
-            this._scrollToEndFired = true;
-        }
-    }
-    _calculateCurrentPosition(dropdownEl) {
-        if (this.position !== 'auto') {
-            return this.position;
-        }
-        const selectRect = this._select.getBoundingClientRect();
-        const scrollTop = document.documentElement.scrollTop || 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) {
-            return 'top';
-        }
-        else {
-            return 'bottom';
-        }
-    }
-    _appendDropdown() {
-        if (!this.appendTo) {
-            return;
-        }
-        this._parent = this._dropdown.shadowRoot
-            ? this._dropdown.shadowRoot.querySelector(this.appendTo)
-            : document.querySelector(this.appendTo);
-        if (!this._parent) {
-            throw new Error(`appendTo selector ${this.appendTo} did not found any parent element`);
-        }
-        this._updateXPosition();
-        this._parent.appendChild(this._dropdown);
-    }
-    _updateXPosition() {
-        const select = this._select.getBoundingClientRect();
-        const parent = this._parent.getBoundingClientRect();
-        const offsetLeft = select.left - parent.left;
-        this._dropdown.style.left = offsetLeft + 'px';
-        this._dropdown.style.width = select.width + 'px';
-        this._dropdown.style.minWidth = select.width + 'px';
-    }
-    _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';
-            this._dropdown.style.top = 'auto';
-        }
-        else if (this._currentPosition === 'bottom') {
-            const offsetTop = select.top - parent.top;
-            this._dropdown.style.top = offsetTop + delta + 'px';
-            this._dropdown.style.bottom = 'auto';
-        }
-    }
-    _setupMousedownListener() {
-        this._zone.runOutsideAngular(() => {
-            fromEvent(this._dropdown, 'mousedown')
-                .pipe(takeUntil(this._destroy$))
-                .subscribe(event => {
-                const target = event.target;
-                if (target.tagName === 'INPUT') {
-                    return;
-                }
-                event.preventDefault();
-            });
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgDropdownPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: NgDropdownPanel, isStandalone: true, selector: "ng-dropdown-panel", inputs: { listboxId: "listboxId", items: "items", markedItem: "markedItem", position: "position", appendTo: "appendTo", bufferAmount: "bufferAmount", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], headerTemplate: "headerTemplate", footerTemplate: "footerTemplate", filterValue: "filterValue" }, outputs: { update: "update", scroll: "scroll", scrollToEnd: "scrollToEnd", outsideClick: "outsideClick" }, host: { classAttribute: "ng-dropdown-panel" }, 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-dropdown-header">
-        <ng-container
-          [ngTemplateOutlet]="headerTemplate"
-          [ngTemplateOutletContext]="{ searchTerm: filterValue }"
-        />
-      </div>
-    }
-    <div
-      #scrollHost
-      class="ng-dropdown-panel-items"
-      [class.ng-select-virtual-scroll-host]="virtualScroll"
-      [attr.id]="listboxId"
-      role="listbox"
-    >
-      <div #scrollSpacer [class.ng-select-virtual-scroll-spacer]="virtualScroll"></div>
-      <div #scrollContent [class.ng-select-virtual-scroll-content]="virtualScroll && items.length">
-        <ng-content />
-      </div>
-    </div>
-    @if (footerTemplate) {
-      <div class="ng-dropdown-footer">
-        <ng-container
-          [ngTemplateOutlet]="footerTemplate"
-          [ngTemplateOutletContext]="{ searchTerm: filterValue }"
-        />
-      </div>
-    }
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgDropdownPanel, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ng-dropdown-panel',
-                    template: `
-    @if (headerTemplate) {
-      <div class="ng-dropdown-header">
-        <ng-container
-          [ngTemplateOutlet]="headerTemplate"
-          [ngTemplateOutletContext]="{ searchTerm: filterValue }"
-        />
-      </div>
-    }
-    <div
-      #scrollHost
-      class="ng-dropdown-panel-items"
-      [class.ng-select-virtual-scroll-host]="virtualScroll"
-      [attr.id]="listboxId"
-      role="listbox"
-    >
-      <div #scrollSpacer [class.ng-select-virtual-scroll-spacer]="virtualScroll"></div>
-      <div #scrollContent [class.ng-select-virtual-scroll-content]="virtualScroll && items.length">
-        <ng-content />
-      </div>
-    </div>
-    @if (footerTemplate) {
-      <div class="ng-dropdown-footer">
-        <ng-container
-          [ngTemplateOutlet]="footerTemplate"
-          [ngTemplateOutletContext]="{ searchTerm: filterValue }"
-        />
-      </div>
-    }
-  `,
-                    imports: [NgTemplateOutlet],
-                    host: {
-                        class: 'ng-dropdown-panel',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { listboxId: [{
-                type: Input
-            }], items: [{
-                type: Input
-            }], markedItem: [{
-                type: Input
-            }], position: [{
-                type: Input
-            }], appendTo: [{
-                type: Input
-            }], bufferAmount: [{
-                type: Input
-            }], virtualScroll: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], headerTemplate: [{
-                type: Input
-            }], footerTemplate: [{
-                type: Input
-            }], filterValue: [{
-                type: Input
-            }], update: [{
-                type: Output
-            }], scroll: [{
-                type: Output
-            }], scrollToEnd: [{
-                type: Output
-            }], outsideClick: [{
-                type: Output
-            }], scrollHostElRef: [{
-                type: ViewChild,
-                args: ['scrollHost', { read: ElementRef, static: true }]
-            }], scrollContentElRef: [{
-                type: ViewChild,
-                args: ['scrollContent', { read: ElementRef, static: true }]
-            }], scrollSpacerElRef: [{
-                type: ViewChild,
-                args: ['scrollSpacer', { read: ElementRef, static: true }]
-            }] } });
-
-class NgOption {
-    value;
-    disabled = false;
-    elementRef = inject(ElementRef);
-    stateChange$ = new Subject();
-    _previousLabel = '';
-    get label() {
-        return (this.elementRef.nativeElement.textContent || '').trim();
-    }
-    ngOnChanges(changes) {
-        if (changes['disabled']) {
-            this.stateChange$.next({
-                value: this.value,
-                disabled: this.disabled,
-            });
-        }
-    }
-    ngAfterViewChecked() {
-        if (this.label !== this._previousLabel) {
-            this._previousLabel = this.label;
-            this.stateChange$.next({
-                value: this.value,
-                disabled: this.disabled,
-                label: this.elementRef.nativeElement.innerHTML,
-            });
-        }
-    }
-    ngOnDestroy() {
-        this.stateChange$.complete();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.12", type: NgOption, isStandalone: true, selector: "ng-option", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, usesOnChanges: true, ngImport: i0, template: `
-    <ng-content />
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgOption, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ng-option',
-                    template: `
-    <ng-content />
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { value: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
-
-class NgOptionHighlight {
-    term = '';
-    elementRef = inject(ElementRef);
-    renderer = inject(Renderer2);
-    element = this.elementRef.nativeElement;
-    label = '';
-    get _canHighlight() {
-        return this.term && this.label;
-    }
-    ngOnChanges() {
-        if (this._canHighlight) {
-            this._highlightLabel();
-        }
-    }
-    ngAfterViewInit() {
-        this.label = this.element.innerHTML;
-        if (this._canHighlight) {
-            this._highlightLabel();
-        }
-    }
-    _escapeRegExp(str) {
-        return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    }
-    _highlightLabel() {
-        const label = this.label;
-        if (!this.term) {
-            this._setInnerHtml(label);
-            return;
-        }
-        const alternationString = this._escapeRegExp(this.term).replace(' ', '|');
-        const termRegex = new RegExp(alternationString, 'gi');
-        this._setInnerHtml(label.replace(termRegex, `<span class="highlighted">$&</span>`));
-    }
-    _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: NgOptionHighlight, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgOptionHighlight, 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: NgOptionHighlight, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngOptionHighlight]',
-                }]
-        }], propDecorators: { term: [{
-                type: Input,
-                args: ['ngOptionHighlight']
-            }] } });
-
 const diacritics = {
     '\u24B6': 'A',
     '\uFF21': 'A',
@@ -1517,552 +900,1133 @@ class ItemsList {
     get items() {
         return this._items;
     }
-    _items = [];
-    get filteredItems() {
-        return this._filteredItems;
+    _items = [];
+    get filteredItems() {
+        return this._filteredItems;
+    }
+    _filteredItems = [];
+    get markedIndex() {
+        return this._markedIndex;
+    }
+    _markedIndex = -1;
+    get selectedItems() {
+        return this._selectionModel.value;
+    }
+    get markedItem() {
+        return this._filteredItems[this._markedIndex];
+    }
+    get noItemsToSelect() {
+        return this._ngSelect.hideSelected && this._items.length === this.selectedItems.length;
+    }
+    get maxItemsSelected() {
+        return this._ngSelect.multiple && this._ngSelect.maxSelectedItems <= this.selectedItems.length;
+    }
+    get lastSelectedItem() {
+        let i = this.selectedItems.length - 1;
+        for (; i >= 0; i--) {
+            const item = this.selectedItems[i];
+            if (!item.disabled) {
+                return item;
+            }
+        }
+        return null;
+    }
+    setItems(items) {
+        this._items = items.map((item, index) => this.mapItem(item, index));
+        if (this._ngSelect.groupBy) {
+            this._groups = this._groupBy(this._items, this._ngSelect.groupBy);
+            this._items = this._flatten(this._groups);
+        }
+        else {
+            this._groups = new Map();
+            this._groups.set(undefined, this._items);
+        }
+        this._filteredItems = [...this._items];
+    }
+    select(item) {
+        if (item.selected || this.maxItemsSelected) {
+            return;
+        }
+        const multiple = this._ngSelect.multiple;
+        if (!multiple) {
+            this.clearSelected();
+        }
+        this._selectionModel.select(item, multiple, this._ngSelect.selectableGroupAsModel);
+        if (this._ngSelect.hideSelected) {
+            this._hideSelected(item);
+        }
+    }
+    unselect(item) {
+        if (!item.selected) {
+            return;
+        }
+        this._selectionModel.unselect(item, this._ngSelect.multiple);
+        if (this._ngSelect.hideSelected && isDefined(item.index) && this._ngSelect.multiple) {
+            this._showSelected(item);
+        }
+    }
+    findItem(value) {
+        let findBy;
+        if (this._ngSelect.compareWith) {
+            findBy = item => this._ngSelect.compareWith(item.value, value);
+        }
+        else if (this._ngSelect.bindValue) {
+            findBy = item => !item.children &&
+                this.resolveNested(item.value, this._ngSelect.bindValue) === value;
+        }
+        else {
+            findBy = item => item.value === value ||
+                !!(!item.children &&
+                    item.label &&
+                    item.label === this.resolveNested(value, this._ngSelect.bindLabel));
+        }
+        return this._items.find(item => findBy(item));
+    }
+    addItem(item) {
+        const option = this.mapItem(item, this._items.length);
+        this._items.push(option);
+        this._filteredItems.push(option);
+        return option;
+    }
+    clearSelected(keepDisabled = false) {
+        this._selectionModel.clear(keepDisabled);
+        this._items.forEach(item => {
+            item.selected = keepDisabled && item.selected && item.disabled;
+            item.marked = false;
+        });
+        if (this._ngSelect.hideSelected) {
+            this.resetFilteredItems();
+        }
+    }
+    findByLabel(term) {
+        term = stripSpecialChars(term).toLocaleLowerCase();
+        return this.filteredItems.find(item => {
+            const label = stripSpecialChars(item.label).toLocaleLowerCase();
+            return label.startsWith(term);
+        });
+    }
+    filter(term) {
+        if (!term) {
+            this.resetFilteredItems();
+            return;
+        }
+        this._filteredItems = [];
+        term = this._ngSelect.searchFn ? term : stripSpecialChars(term).toLocaleLowerCase();
+        const match = this._ngSelect.searchFn || this._defaultSearchFn;
+        const hideSelected = this._ngSelect.hideSelected;
+        for (const key of Array.from(this._groups.keys())) {
+            const matchedItems = [];
+            for (const item of this._groups.get(key)) {
+                if (hideSelected && ((item.parent && item.parent.selected) || item.selected)) {
+                    continue;
+                }
+                const searchItem = this._ngSelect.searchFn ? item.value : item;
+                if (match(term, searchItem)) {
+                    matchedItems.push(item);
+                }
+            }
+            if (matchedItems.length > 0) {
+                const [last] = matchedItems.slice(-1);
+                if (last.parent) {
+                    const head = this._items.find(x => x === last.parent);
+                    this._filteredItems.push(head);
+                }
+                this._filteredItems.push(...matchedItems);
+            }
+        }
+    }
+    resetFilteredItems() {
+        if (this._filteredItems.length === this._items.length) {
+            return;
+        }
+        if (this._ngSelect.hideSelected && this.selectedItems.length > 0) {
+            this._filteredItems = this._items.filter(x => !x.selected);
+        }
+        else {
+            this._filteredItems = this._items;
+        }
+    }
+    unmarkItem() {
+        this._markedIndex = -1;
+    }
+    markNextItem() {
+        this._stepToItem(+1);
+    }
+    markPreviousItem() {
+        this._stepToItem(-1);
+    }
+    markItem(item) {
+        this._markedIndex = this._filteredItems.indexOf(item);
+    }
+    markSelectedOrDefault(markDefault) {
+        if (this._filteredItems.length === 0) {
+            return;
+        }
+        const lastMarkedIndex = this._getLastMarkedIndex();
+        if (lastMarkedIndex > -1) {
+            this._markedIndex = lastMarkedIndex;
+        }
+        else {
+            this._markedIndex = markDefault ? this.filteredItems.findIndex(x => !x.disabled) : -1;
+        }
+    }
+    resolveNested(option, key) {
+        if (!isObject(option)) {
+            return option;
+        }
+        if (key.indexOf('.') === -1) {
+            return option[key];
+        }
+        else {
+            const keys = key.split('.');
+            let value = option;
+            for (let i = 0, len = keys.length; i < len; ++i) {
+                if (value == null) {
+                    return null;
+                }
+                value = value[keys[i]];
+            }
+            return value;
+        }
+    }
+    mapItem(item, index) {
+        const label = isDefined(item.$ngOptionLabel)
+            ? item.$ngOptionLabel
+            : this.resolveNested(item, this._ngSelect.bindLabel);
+        const value = isDefined(item.$ngOptionValue) ? item.$ngOptionValue : item;
+        return {
+            index,
+            label: isDefined(label) ? label.toString() : '',
+            value,
+            viewValue: item.viewValue || label,
+            disabled: item.disabled,
+            htmlId: `${this._ngSelect._uid}-option-${index}`,
+        };
+    }
+    mapSelectedItems() {
+        const multiple = this._ngSelect.multiple;
+        for (const selected of this.selectedItems) {
+            const value = this._ngSelect.bindValue
+                ? this.resolveNested(selected.value, this._ngSelect.bindValue)
+                : selected.value;
+            const item = isDefined(value) ? this.findItem(value) : null;
+            this._selectionModel.unselect(selected, multiple);
+            this._selectionModel.select(item || selected, multiple, this._ngSelect.selectableGroupAsModel);
+        }
+        if (this._ngSelect.hideSelected) {
+            this._filteredItems = this.filteredItems.filter(x => this.selectedItems.indexOf(x) === -1);
+        }
+    }
+    _showSelected(item) {
+        this._filteredItems.push(item);
+        if (item.parent) {
+            const parent = item.parent;
+            const parentExists = this._filteredItems.find(x => x === parent);
+            if (!parentExists) {
+                this._filteredItems.push(parent);
+            }
+        }
+        else if (item.children) {
+            for (const child of item.children) {
+                child.selected = false;
+                this._filteredItems.push(child);
+            }
+        }
+        this._filteredItems = [...this._filteredItems.sort((a, b) => a.index - b.index)];
+    }
+    _hideSelected(item) {
+        this._filteredItems = this._filteredItems.filter(x => x !== item);
+        if (item.parent) {
+            const children = item.parent.children;
+            if (children.every(x => x.selected)) {
+                this._filteredItems = this._filteredItems.filter(x => x !== item.parent);
+            }
+        }
+        else if (item.children) {
+            this._filteredItems = this.filteredItems.filter(x => x.parent !== item);
+        }
     }
-    _filteredItems = [];
-    get markedIndex() {
-        return this._markedIndex;
+    _defaultSearchFn(search, opt) {
+        const label = stripSpecialChars(opt.label).toLocaleLowerCase();
+        return label.indexOf(search) > -1;
     }
-    _markedIndex = -1;
-    get selectedItems() {
-        return this._selectionModel.value;
+    _getNextItemIndex(steps) {
+        if (steps > 0) {
+            return this._markedIndex >= this._filteredItems.length - 1 ? 0 : this._markedIndex + 1;
+        }
+        return this._markedIndex <= 0 ? this._filteredItems.length - 1 : this._markedIndex - 1;
     }
-    get markedItem() {
-        return this._filteredItems[this._markedIndex];
+    _stepToItem(steps) {
+        if (this._filteredItems.length === 0 || this._filteredItems.every(x => x.disabled)) {
+            return;
+        }
+        this._markedIndex = this._getNextItemIndex(steps);
+        if (this.markedItem?.disabled) {
+            this._stepToItem(steps);
+        }
     }
-    get noItemsToSelect() {
-        return this._ngSelect.hideSelected && this._items.length === this.selectedItems.length;
+    _getLastMarkedIndex() {
+        if (this._ngSelect.hideSelected) {
+            return -1;
+        }
+        if (this._markedIndex > -1 && this.markedItem == null) {
+            return -1;
+        }
+        const selectedIndex = this._filteredItems.indexOf(this.lastSelectedItem);
+        if (this.lastSelectedItem && selectedIndex < 0) {
+            return -1;
+        }
+        return Math.max(this.markedIndex, selectedIndex);
     }
-    get maxItemsSelected() {
-        return this._ngSelect.multiple && this._ngSelect.maxSelectedItems <= this.selectedItems.length;
+    _groupBy(items, prop) {
+        const groups = new Map();
+        if (items.length === 0) {
+            return groups;
+        }
+        // Check if items are already grouped by given key.
+        if (Array.isArray(items[0].value[prop])) {
+            for (const item of items) {
+                const children = (item.value[prop] || []).map((x, index) => this.mapItem(x, index));
+                groups.set(item, children);
+            }
+            return groups;
+        }
+        const isFnKey = isFunction(this._ngSelect.groupBy);
+        const keyFn = (item) => {
+            const key = isFnKey ? prop(item.value) : item.value[prop];
+            return isDefined(key) ? key : undefined;
+        };
+        // Group items by key.
+        for (const item of items) {
+            const key = keyFn(item);
+            const group = groups.get(key);
+            if (group) {
+                group.push(item);
+            }
+            else {
+                groups.set(key, [item]);
+            }
+        }
+        return groups;
     }
-    get lastSelectedItem() {
-        let i = this.selectedItems.length - 1;
-        for (; i >= 0; i--) {
-            const item = this.selectedItems[i];
-            if (!item.disabled) {
-                return item;
+    _flatten(groups) {
+        const isGroupByFn = isFunction(this._ngSelect.groupBy);
+        const items = [];
+        let groupIndex = 0;
+        for (const key of groups.keys()) {
+            let i = items.length;
+            if (key == null) {
+                const withoutGroup = groups.get(undefined) || [];
+                items.push(...withoutGroup.map(x => {
+                    x.index = i++;
+                    return x;
+                }));
+                continue;
             }
+            const isObjectKey = isObject(key);
+            const parent = {
+                label: isObjectKey ? '' : String(key),
+                children: null,
+                parent: null,
+                index: i++,
+                disabled: !this._ngSelect.selectableGroup,
+                htmlId: `${this._ngSelect._uid}-group-${groupIndex}-heading`,
+            };
+            const groupKey = isGroupByFn
+                ? this._ngSelect.bindLabel
+                : this._ngSelect.groupBy;
+            const groupValue = this._ngSelect.groupValue ||
+                (() => {
+                    if (isObjectKey) {
+                        return key.value;
+                    }
+                    return { [groupKey]: key };
+                });
+            const children = groups.get(key).map(x => {
+                x.parent = parent;
+                x.children = null;
+                x.index = i++;
+                return x;
+            });
+            parent.children = children;
+            parent.value = groupValue(key, children.map(x => x.value));
+            items.push(parent);
+            items.push(...children);
+            groupIndex++;
         }
-        return null;
+        return items;
     }
-    setItems(items) {
-        this._items = items.map((item, index) => this.mapItem(item, index));
-        if (this._ngSelect.groupBy) {
-            this._groups = this._groupBy(this._items, this._ngSelect.groupBy);
-            this._items = this._flatten(this._groups);
+}
+
+class NgSelectConfig {
+    placeholder;
+    fixedPlaceholder = false;
+    notFoundText = 'No items found';
+    typeToSearchText = 'Type to search';
+    addTagText = 'Add item';
+    loadingText = 'Loading...';
+    clearAllText = 'Clear all';
+    virtualScroll = false;
+    openOnEnter = true;
+    appendTo;
+    bindValue;
+    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' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectConfig, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class NgSelectOption {
+    value;
+    disabled = false;
+    elementRef = inject(ElementRef);
+    stateChange$ = new Subject();
+    _previousLabel = '';
+    get label() {
+        return (this.elementRef.nativeElement.textContent || '').trim();
+    }
+    ngOnChanges(changes) {
+        if (changes['disabled']) {
+            this.stateChange$.next({
+                value: this.value,
+                disabled: this.disabled,
+            });
         }
-        else {
-            this._groups = new Map();
-            this._groups.set(undefined, this._items);
+    }
+    ngAfterViewChecked() {
+        if (this.label !== this._previousLabel) {
+            this._previousLabel = this.label;
+            this.stateChange$.next({
+                value: this.value,
+                disabled: this.disabled,
+                label: this.elementRef.nativeElement.innerHTML,
+            });
         }
-        this._filteredItems = [...this._items];
     }
-    select(item) {
-        if (item.selected || this.maxItemsSelected) {
-            return;
+    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: `
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectOption, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ng-option, ng-select-option',
+                    template: `
+    <ng-content />
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+class NgSelectPanelUtils {
+    get dimensions() {
+        return this._dimensions;
+    }
+    _dimensions = {
+        itemHeight: 0,
+        panelHeight: 0,
+        itemsPerViewport: 0,
+    };
+    calculateItems(scrollPos, itemsLength, buffer) {
+        const d = this._dimensions;
+        const scrollHeight = d.itemHeight * itemsLength;
+        const scrollTop = Math.max(0, scrollPos);
+        const indexByScrollTop = (scrollTop / scrollHeight) * itemsLength;
+        let end = Math.min(itemsLength, Math.ceil(indexByScrollTop) + (d.itemsPerViewport + 1));
+        const maxStartEnd = end;
+        const maxStart = Math.max(0, maxStartEnd - d.itemsPerViewport);
+        let start = Math.min(maxStart, Math.floor(indexByScrollTop));
+        let topPadding = d.itemHeight * Math.ceil(start) - d.itemHeight * Math.min(start, buffer);
+        topPadding = !isNaN(topPadding) ? topPadding : 0;
+        start = !isNaN(start) ? start : -1;
+        end = !isNaN(end) ? end : -1;
+        start -= buffer;
+        start = Math.max(0, start);
+        end += buffer;
+        end = Math.min(itemsLength, end);
+        return {
+            topPadding,
+            scrollHeight,
+            start,
+            end,
+        };
+    }
+    setDimensions(itemHeight, panelHeight) {
+        const itemsPerViewport = Math.max(1, Math.floor(panelHeight / itemHeight));
+        this._dimensions = {
+            itemHeight,
+            panelHeight,
+            itemsPerViewport,
+        };
+    }
+    getScrollTo(itemTop, itemHeight, lastScroll) {
+        const { panelHeight } = this.dimensions;
+        const itemBottom = itemTop + itemHeight;
+        const top = lastScroll;
+        const bottom = top + panelHeight;
+        if (panelHeight >= itemBottom && lastScroll === itemTop) {
+            return null;
         }
-        const multiple = this._ngSelect.multiple;
-        if (!multiple) {
-            this.clearSelected();
+        if (itemBottom > bottom) {
+            return top + itemBottom - bottom;
         }
-        this._selectionModel.select(item, multiple, this._ngSelect.selectableGroupAsModel);
-        if (this._ngSelect.hideSelected) {
-            this._hideSelected(item);
+        else if (itemTop <= top) {
+            return itemTop;
         }
+        return null;
     }
-    unselect(item) {
-        if (!item.selected) {
-            return;
-        }
-        this._selectionModel.unselect(item, this._ngSelect.multiple);
-        if (this._ngSelect.hideSelected && isDefined(item.index) && this._ngSelect.multiple) {
-            this._showSelected(item);
-        }
+    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, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectPanelUtils, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const CSS_POSITIONS = ['top', 'right', 'bottom', 'left'];
+const SCROLL_SCHEDULER = typeof requestAnimationFrame !== 'undefined' ? animationFrameScheduler : asapScheduler;
+class NgSelectPanel {
+    listboxId = '';
+    items = [];
+    markedItem;
+    position = 'auto';
+    appendTo;
+    bufferAmount = 4;
+    virtualScroll = false;
+    multiple = false;
+    headerTemplate;
+    footerTemplate;
+    filterValue = null;
+    update = new EventEmitter();
+    scroll = new EventEmitter();
+    scrollToEnd = new EventEmitter();
+    outsideClick = new EventEmitter();
+    scrollHostElRef;
+    scrollContentElRef;
+    scrollSpacerElRef;
+    _document = inject(DOCUMENT, { optional: true });
+    _renderer = inject(Renderer2);
+    _zone = inject(NgZone);
+    _elementRef = inject(ElementRef);
+    _panelUtils = inject(NgSelectPanelUtils);
+    _destroy$ = new Subject();
+    _dropdown = this._elementRef.nativeElement;
+    _select;
+    _parent;
+    _scrollHost;
+    _scrollContent;
+    _scrollSpacer;
+    _scrollToEndFired = false;
+    _updateScrollHeight = false;
+    _lastScrollPosition = 0;
+    get currentPosition() {
+        return this._currentPosition;
     }
-    findItem(value) {
-        let findBy;
-        if (this._ngSelect.compareWith) {
-            findBy = item => this._ngSelect.compareWith(item.value, value);
-        }
-        else if (this._ngSelect.bindValue) {
-            findBy = item => !item.children &&
-                this.resolveNested(item.value, this._ngSelect.bindValue) === value;
+    _currentPosition = 'auto';
+    get itemsLength() {
+        return this._itemsLength;
+    }
+    set itemsLength(value) {
+        if (value !== this._itemsLength) {
+            this._itemsLength = value;
+            this._onItemsLengthChanged();
         }
-        else {
-            findBy = item => item.value === value ||
-                !!(!item.children &&
-                    item.label &&
-                    item.label === this.resolveNested(value, this._ngSelect.bindLabel));
+    }
+    _itemsLength;
+    get _startOffset() {
+        if (this.markedItem) {
+            const { itemHeight, panelHeight } = this._panelUtils.dimensions;
+            const offset = this.markedItem.index * itemHeight;
+            return panelHeight > offset ? 0 : offset;
         }
-        return this._items.find(item => findBy(item));
+        return 0;
     }
-    addItem(item) {
-        const option = this.mapItem(item, this._items.length);
-        this._items.push(option);
-        this._filteredItems.push(option);
-        return option;
+    ngOnInit() {
+        this._select = this._dropdown.parentElement;
+        this._scrollHost = this.scrollHostElRef.nativeElement;
+        this._scrollContent = this.scrollContentElRef.nativeElement;
+        this._scrollSpacer = this.scrollSpacerElRef.nativeElement;
+        this._handleScroll();
+        this._handleOutsideClick();
+        this._appendDropdown();
+        this._setupMousedownListener();
     }
-    clearSelected(keepDisabled = false) {
-        this._selectionModel.clear(keepDisabled);
-        this._items.forEach(item => {
-            item.selected = keepDisabled && item.selected && item.disabled;
-            item.marked = false;
-        });
-        if (this._ngSelect.hideSelected) {
-            this.resetFilteredItems();
+    ngOnChanges(changes) {
+        if (changes['items']) {
+            const change = changes['items'];
+            this._onItemsChange(change.currentValue, change.firstChange);
         }
     }
-    findByLabel(term) {
-        term = stripSpecialChars(term).toLocaleLowerCase();
-        return this.filteredItems.find(item => {
-            const label = stripSpecialChars(item.label).toLocaleLowerCase();
-            return label.substr(0, term.length) === term;
-        });
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+        this._destroy$.unsubscribe();
+        if (this.appendTo) {
+            this._renderer.removeChild(this._dropdown.parentNode, this._dropdown);
+        }
     }
-    filter(term) {
-        if (!term) {
-            this.resetFilteredItems();
+    scrollTo(option, startFromOption = false) {
+        if (!option) {
             return;
         }
-        this._filteredItems = [];
-        term = this._ngSelect.searchFn
-            ? term
-            : stripSpecialChars(term).toLocaleLowerCase();
-        const match = this._ngSelect.searchFn || this._defaultSearchFn;
-        const hideSelected = this._ngSelect.hideSelected;
-        for (const key of Array.from(this._groups.keys())) {
-            const matchedItems = [];
-            for (const item of this._groups.get(key)) {
-                if (hideSelected && ((item.parent && item.parent.selected) || item.selected)) {
-                    continue;
-                }
-                const searchItem = this._ngSelect.searchFn ? item.value : item;
-                if (match(term, searchItem)) {
-                    matchedItems.push(item);
-                }
-            }
-            if (matchedItems.length > 0) {
-                const [last] = matchedItems.slice(-1);
-                if (last.parent) {
-                    const head = this._items.find(x => x === last.parent);
-                    this._filteredItems.push(head);
-                }
-                this._filteredItems.push(...matchedItems);
-            }
-        }
-    }
-    resetFilteredItems() {
-        if (this._filteredItems.length === this._items.length) {
+        const index = this.items.indexOf(option);
+        if (index < 0 || index >= this.itemsLength) {
             return;
         }
-        if (this._ngSelect.hideSelected && this.selectedItems.length > 0) {
-            this._filteredItems = this._items.filter(x => !x.selected);
+        let scrollTo;
+        if (this.virtualScroll) {
+            const itemHeight = this._panelUtils.dimensions.itemHeight;
+            scrollTo = this._panelUtils.getScrollTo(index * itemHeight, itemHeight, this._lastScrollPosition);
         }
         else {
-            this._filteredItems = this._items;
+            const item = this._dropdown.querySelector(`#${option.htmlId}`);
+            const lastScroll = startFromOption ? item.offsetTop : this._lastScrollPosition;
+            scrollTo = this._panelUtils.getScrollTo(item.offsetTop, item.clientHeight, lastScroll);
+        }
+        if (isDefined(scrollTo)) {
+            this._scrollHost.scrollTop = scrollTo;
         }
     }
-    unmarkItem() {
-        this._markedIndex = -1;
-    }
-    markNextItem() {
-        this._stepToItem(+1);
-    }
-    markPreviousItem() {
-        this._stepToItem(-1);
+    scrollToTag() {
+        const panel = this._scrollHost;
+        panel.scrollTop = panel.scrollHeight - panel.clientHeight;
     }
-    markItem(item) {
-        this._markedIndex = this._filteredItems.indexOf(item);
+    adjustPosition() {
+        this._updateYPosition();
     }
-    markSelectedOrDefault(markDefault) {
-        if (this._filteredItems.length === 0) {
-            return;
-        }
-        const lastMarkedIndex = this._getLastMarkedIndex();
-        if (lastMarkedIndex > -1) {
-            this._markedIndex = lastMarkedIndex;
+    _handleDropdownPosition() {
+        this._currentPosition = this._calculateCurrentPosition(this._dropdown);
+        if (CSS_POSITIONS.includes(this._currentPosition)) {
+            this._updateDropdownClass(this._currentPosition);
         }
         else {
-            this._markedIndex = markDefault ? this.filteredItems.findIndex(x => !x.disabled) : -1;
-        }
-    }
-    resolveNested(option, key) {
-        if (!isObject(option)) {
-            return option;
+            this._updateDropdownClass('bottom');
         }
-        if (key.indexOf('.') === -1) {
-            return option[key];
+        if (this.appendTo) {
+            this._updateYPosition();
         }
-        else {
-            const keys = key.split('.');
-            let value = option;
-            for (let i = 0, len = keys.length; i < len; ++i) {
-                if (value == null) {
-                    return null;
+        this._dropdown.style.opacity = '1';
+    }
+    _updateDropdownClass(currentPosition) {
+        CSS_POSITIONS.forEach(position => {
+            const REMOVE_CSS_CLASS = `ng-select-${position}`;
+            this._renderer.removeClass(this._dropdown, REMOVE_CSS_CLASS);
+            this._renderer.removeClass(this._select, REMOVE_CSS_CLASS);
+        });
+        const ADD_CSS_CLASS = `ng-select-${currentPosition}`;
+        this._renderer.addClass(this._dropdown, ADD_CSS_CLASS);
+        this._renderer.addClass(this._select, ADD_CSS_CLASS);
+    }
+    _handleScroll() {
+        this._zone.runOutsideAngular(() => {
+            fromEvent(this._scrollHost, 'scroll')
+                .pipe(takeUntil(this._destroy$), auditTime(0, SCROLL_SCHEDULER))
+                .subscribe(e => {
+                const path = e.path || (e.composedPath && e.composedPath());
+                if (!path || (path.length === 0 && !e.target)) {
+                    return;
                 }
-                value = value[keys[i]];
-            }
-            return value;
-        }
+                const scrollTop = !path || path.length === 0 ? e.target.scrollTop : path[0].scrollTop;
+                this._onContentScrolled(scrollTop);
+            });
+        });
     }
-    mapItem(item, index) {
-        const label = isDefined(item.$ngOptionLabel)
-            ? item.$ngOptionLabel
-            : this.resolveNested(item, this._ngSelect.bindLabel);
-        const value = isDefined(item.$ngOptionValue) ? item.$ngOptionValue : item;
-        return {
-            index,
-            label: isDefined(label) ? label.toString() : '',
-            value,
-            disabled: item.disabled,
-            htmlId: `${this._ngSelect._uid}-option-${index}`,
-        };
+    _handleOutsideClick() {
+        if (!this._document) {
+            return;
+        }
+        this._zone.runOutsideAngular(() => {
+            merge(fromEvent(this._document, 'touchstart', { capture: true }), fromEvent(this._document, 'click', { capture: true }))
+                .pipe(takeUntil(this._destroy$))
+                .subscribe($event => this._checkToClose($event));
+        });
     }
-    mapSelectedItems() {
-        const multiple = this._ngSelect.multiple;
-        for (const selected of this.selectedItems) {
-            const value = this._ngSelect.bindValue
-                ? this.resolveNested(selected.value, this._ngSelect.bindValue)
-                : selected.value;
-            const item = isDefined(value) ? this.findItem(value) : null;
-            this._selectionModel.unselect(selected, multiple);
-            this._selectionModel.select(item || selected, multiple, this._ngSelect.selectableGroupAsModel);
+    _checkToClose($event) {
+        if (this._select.contains($event.target) || this._dropdown.contains($event.target)) {
+            return;
         }
-        if (this._ngSelect.hideSelected) {
-            this._filteredItems = this.filteredItems.filter(x => this.selectedItems.indexOf(x) === -1);
+        const path = $event.path || ($event.composedPath && $event.composedPath());
+        if ($event.target &&
+            $event.target.shadowRoot &&
+            path &&
+            path[0] &&
+            this._select.contains(path[0])) {
+            return;
         }
+        this._zone.run(() => this.outsideClick.emit());
     }
-    _showSelected(item) {
-        this._filteredItems.push(item);
-        if (item.parent) {
-            const parent = item.parent;
-            const parentExists = this._filteredItems.find(x => x === parent);
-            if (!parentExists) {
-                this._filteredItems.push(parent);
-            }
+    _onItemsChange(items, firstChange) {
+        this.items = items || [];
+        this._scrollToEndFired = false;
+        this.itemsLength = items.length;
+        if (this.virtualScroll) {
+            this._updateItemsRange(firstChange);
         }
-        else if (item.children) {
-            for (const child of item.children) {
-                child.selected = false;
-                this._filteredItems.push(child);
-            }
+        else {
+            this._setVirtualHeight();
+            this._updateItems(firstChange);
         }
-        this._filteredItems = [...this._filteredItems.sort((a, b) => a.index - b.index)];
     }
-    _hideSelected(item) {
-        this._filteredItems = this._filteredItems.filter(x => x !== item);
-        if (item.parent) {
-            const children = item.parent.children;
-            if (children.every(x => x.selected)) {
-                this._filteredItems = this._filteredItems.filter(x => x !== item.parent);
-            }
-        }
-        else if (item.children) {
-            this._filteredItems = this.filteredItems.filter(x => x.parent !== item);
+    _updateItems(firstChange) {
+        this.update.emit(this.items);
+        if (firstChange === false) {
+            return;
         }
+        this._zone.runOutsideAngular(() => {
+            Promise.resolve().then(() => {
+                const panelHeight = this._scrollHost.clientHeight;
+                this._panelUtils.setDimensions(0, panelHeight);
+                this._handleDropdownPosition();
+                this.scrollTo(this.markedItem, firstChange);
+            });
+        });
     }
-    _defaultSearchFn(search, opt) {
-        const label = stripSpecialChars(opt.label).toLocaleLowerCase();
-        return label.indexOf(search) > -1;
+    _updateItemsRange(firstChange) {
+        this._zone.runOutsideAngular(() => {
+            this._measureDimensions().then(() => {
+                if (firstChange) {
+                    this._renderItemsRange(this._startOffset);
+                    this._handleDropdownPosition();
+                }
+                else {
+                    this._renderItemsRange();
+                }
+            });
+        });
     }
-    _getNextItemIndex(steps) {
-        if (steps > 0) {
-            return this._markedIndex >= this._filteredItems.length - 1 ? 0 : this._markedIndex + 1;
+    _onContentScrolled(scrollTop) {
+        if (this.virtualScroll) {
+            this._renderItemsRange(scrollTop);
         }
-        return this._markedIndex <= 0 ? this._filteredItems.length - 1 : this._markedIndex - 1;
+        this._lastScrollPosition = scrollTop;
+        this._fireScrollToEnd(scrollTop);
     }
-    _stepToItem(steps) {
-        if (this._filteredItems.length === 0 || this._filteredItems.every(x => x.disabled)) {
-            return;
-        }
-        this._markedIndex = this._getNextItemIndex(steps);
-        if (this.markedItem?.disabled) {
-            this._stepToItem(steps);
+    _updateVirtualHeight(height) {
+        if (this._updateScrollHeight) {
+            this._scrollSpacer.style.height = `${height}px`;
+            this._updateScrollHeight = false;
         }
     }
-    _getLastMarkedIndex() {
-        if (this._ngSelect.hideSelected) {
-            return -1;
+    _setVirtualHeight() {
+        if (!this._scrollSpacer) {
+            return;
         }
-        if (this._markedIndex > -1 && this.markedItem == null) {
-            return -1;
+        this._scrollSpacer.style.height = `0px`;
+    }
+    _onItemsLengthChanged() {
+        this._updateScrollHeight = true;
+    }
+    _renderItemsRange(scrollTop) {
+        if (scrollTop && this._lastScrollPosition === scrollTop) {
+            return;
         }
-        const selectedIndex = this._filteredItems.indexOf(this.lastSelectedItem);
-        if (this.lastSelectedItem && selectedIndex < 0) {
-            return -1;
+        scrollTop = scrollTop || this._scrollHost.scrollTop;
+        const range = this._panelUtils.calculateItems(scrollTop, this.itemsLength, this.bufferAmount);
+        this._updateVirtualHeight(range.scrollHeight);
+        this._scrollContent.style.transform = `translateY(${range.topPadding}px)`;
+        this._zone.run(() => {
+            this.update.emit(this.items.slice(range.start, range.end));
+            this.scroll.emit({ start: range.start, end: range.end });
+        });
+        if (isDefined(scrollTop) && this._lastScrollPosition === 0) {
+            this._scrollHost.scrollTop = scrollTop;
+            this._lastScrollPosition = scrollTop;
         }
-        return Math.max(this.markedIndex, selectedIndex);
     }
-    _groupBy(items, prop) {
-        const groups = new Map();
-        if (items.length === 0) {
-            return groups;
+    _measureDimensions() {
+        if (this._panelUtils.dimensions.itemHeight > 0 || this.itemsLength === 0) {
+            return Promise.resolve(this._panelUtils.dimensions);
         }
-        // Check if items are already grouped by given key.
-        if (Array.isArray(items[0].value[prop])) {
-            for (const item of items) {
-                const children = (item.value[prop] || []).map((x, index) => this.mapItem(x, index));
-                groups.set(item, children);
-            }
-            return groups;
+        const [first] = this.items;
+        this.update.emit([first]);
+        return Promise.resolve().then(() => {
+            const option = this._dropdown.querySelector(`#${first.htmlId}`);
+            const optionHeight = option.clientHeight;
+            this._scrollSpacer.style.height = `${optionHeight * this.itemsLength}px`;
+            const panelHeight = this._scrollHost.clientHeight;
+            this._panelUtils.setDimensions(optionHeight, panelHeight);
+            return this._panelUtils.dimensions;
+        });
+    }
+    _fireScrollToEnd(scrollTop) {
+        if (this._scrollToEndFired || scrollTop === 0) {
+            return;
         }
-        const isFnKey = isFunction(this._ngSelect.groupBy);
-        const keyFn = (item) => {
-            const key = isFnKey ? prop(item.value) : item.value[prop];
-            return isDefined(key) ? key : undefined;
-        };
-        // Group items by key.
-        for (const item of items) {
-            const key = keyFn(item);
-            const group = groups.get(key);
-            if (group) {
-                group.push(item);
-            }
-            else {
-                groups.set(key, [item]);
-            }
+        const padding = this.virtualScroll ? this._scrollSpacer : this._scrollContent;
+        if (scrollTop + this._dropdown.clientHeight >= padding.clientHeight - 1) {
+            this._zone.run(() => this.scrollToEnd.emit());
+            this._scrollToEndFired = true;
         }
-        return groups;
     }
-    _flatten(groups) {
-        const isGroupByFn = isFunction(this._ngSelect.groupBy);
-        const items = [];
-        let groupIndex = 0;
-        for (const key of groups.keys()) {
-            let i = items.length;
-            if (key == null) {
-                const withoutGroup = groups.get(undefined) || [];
-                items.push(...withoutGroup.map(x => {
-                    x.index = i++;
-                    return x;
-                }));
-                continue;
-            }
-            const isObjectKey = isObject(key);
-            const parent = {
-                label: isObjectKey ? '' : String(key),
-                children: null,
-                parent: null,
-                index: i++,
-                disabled: !this._ngSelect.selectableGroup,
-                htmlId: `${this._ngSelect._uid}-group-${groupIndex}-heading`,
-            };
-            const groupKey = isGroupByFn
-                ? this._ngSelect.bindLabel
-                : this._ngSelect.groupBy;
-            const groupValue = this._ngSelect.groupValue ||
-                (() => {
-                    if (isObjectKey) {
-                        return key.value;
-                    }
-                    return { [groupKey]: key };
-                });
-            const children = groups.get(key).map(x => {
-                x.parent = parent;
-                x.children = null;
-                x.index = i++;
-                return x;
-            });
-            parent.children = children;
-            parent.value = groupValue(key, children.map(x => x.value));
-            items.push(parent);
-            items.push(...children);
-            groupIndex++;
+    _calculateCurrentPosition(dropdownEl) {
+        if (this.position !== 'auto') {
+            return this.position;
+        }
+        const selectRect = this._select.getBoundingClientRect();
+        const scrollTop = document.documentElement.scrollTop || 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) {
+            return 'top';
+        }
+        else {
+            return 'bottom';
         }
-        return items;
     }
+    _appendDropdown() {
+        if (!this.appendTo) {
+            return;
+        }
+        this._parent = this._dropdown.shadowRoot
+            ? this._dropdown.shadowRoot.querySelector(this.appendTo)
+            : document.querySelector(this.appendTo);
+        if (!this._parent) {
+            throw new Error(`appendTo selector ${this.appendTo} did not found any parent element`);
+        }
+        this._updateXPosition();
+        this._parent.appendChild(this._dropdown);
+    }
+    _updateXPosition() {
+        const select = this._select.getBoundingClientRect();
+        const parent = this._parent.getBoundingClientRect();
+        const offsetLeft = select.left - parent.left;
+        this._dropdown.style.left = offsetLeft + 'px';
+        this._dropdown.style.width = select.width + 'px';
+        this._dropdown.style.minWidth = select.width + 'px';
+    }
+    _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';
+            this._dropdown.style.top = 'auto';
+        }
+        else if (this._currentPosition === 'bottom') {
+            const offsetTop = select.top - parent.top;
+            this._dropdown.style.top = offsetTop + delta + 'px';
+            this._dropdown.style.bottom = 'auto';
+        }
+    }
+    _setupMousedownListener() {
+        this._zone.runOutsideAngular(() => {
+            fromEvent(this._dropdown, 'mousedown')
+                .pipe(takeUntil(this._destroy$))
+                .subscribe(event => {
+                const target = event.target;
+                if (target.tagName === 'INPUT') {
+                    return;
+                }
+                event.preventDefault();
+            });
+        });
+    }
+    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" }, 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
+          [ngTemplateOutlet]="headerTemplate"
+          [ngTemplateOutletContext]="{ searchTerm: filterValue }"
+        />
+      </div>
+    }
+    <div
+      #scrollHost
+      class="ng-select-listbox"
+      [class.ng-select-virtual-scroll-host]="virtualScroll"
+      [attr.id]="listboxId"
+      [attr.aria-multiselectable]="multiple"
+      role="listbox"
+    >
+      <div #scrollSpacer [class.ng-select-virtual-scroll-spacer]="virtualScroll"></div>
+      <div
+        #scrollContent
+        [class.ng-select-virtual-scroll-content]="virtualScroll && items.length"
+        role="presentation"
+      >
+        <ng-content />
+      </div>
+    </div>
+    @if (footerTemplate) {
+      <div class="ng-select-panel-footer">
+        <ng-container
+          [ngTemplateOutlet]="footerTemplate"
+          [ngTemplateOutletContext]="{ searchTerm: filterValue }"
+        />
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectPanel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ng-select-panel',
+                    template: `
+    @if (headerTemplate) {
+      <div class="ng-select-panel-header">
+        <ng-container
+          [ngTemplateOutlet]="headerTemplate"
+          [ngTemplateOutletContext]="{ searchTerm: filterValue }"
+        />
+      </div>
+    }
+    <div
+      #scrollHost
+      class="ng-select-listbox"
+      [class.ng-select-virtual-scroll-host]="virtualScroll"
+      [attr.id]="listboxId"
+      [attr.aria-multiselectable]="multiple"
+      role="listbox"
+    >
+      <div #scrollSpacer [class.ng-select-virtual-scroll-spacer]="virtualScroll"></div>
+      <div
+        #scrollContent
+        [class.ng-select-virtual-scroll-content]="virtualScroll && items.length"
+        role="presentation"
+      >
+        <ng-content />
+      </div>
+    </div>
+    @if (footerTemplate) {
+      <div class="ng-select-panel-footer">
+        <ng-container
+          [ngTemplateOutlet]="footerTemplate"
+          [ngTemplateOutletContext]="{ searchTerm: filterValue }"
+        />
+      </div>
+    }
+  `,
+                    imports: [NgTemplateOutlet],
+                    host: {
+                        'class': 'ng-select-panel',
+                        '[class.ng-select-multiple]': 'multiple',
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { listboxId: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], markedItem: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], appendTo: [{
+                type: Input
+            }], bufferAmount: [{
+                type: Input
+            }], virtualScroll: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], multiple: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], headerTemplate: [{
+                type: Input
+            }], footerTemplate: [{
+                type: Input
+            }], filterValue: [{
+                type: Input
+            }], update: [{
+                type: Output
+            }], scroll: [{
+                type: Output
+            }], scrollToEnd: [{
+                type: Output
+            }], outsideClick: [{
+                type: Output
+            }], scrollHostElRef: [{
+                type: ViewChild,
+                args: ['scrollHost', { read: ElementRef, static: true }]
+            }], scrollContentElRef: [{
+                type: ViewChild,
+                args: ['scrollContent', { read: ElementRef, static: true }]
+            }], scrollSpacerElRef: [{
+                type: ViewChild,
+                args: ['scrollSpacer', { read: ElementRef, static: true }]
+            }] } });
 
-class NgSelectConfig {
-    placeholder;
-    fixedPlaceholder = true;
-    notFoundText = 'No items found';
-    typeToSearchText = 'Type to search';
-    addTagText = 'Add item';
-    loadingText = 'Loading...';
-    clearAllText = 'Clear all';
-    virtualScroll = false;
-    openOnEnter = true;
-    appendTo;
-    bindValue;
-    bindLabel;
-    clearSearchOnAdd;
-    deselectOnClick;
-    appearance = 'underline';
-    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' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectConfig, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class NgItemLabel {
-    ngItemLabel = '';
-    escape = true;
+class NgSelectLabelRenderer {
+    ngSelectLabelValue = '';
+    ngSelectLabelEscape = true;
     element = inject(ElementRef);
     ngOnChanges() {
-        this.element.nativeElement.innerHTML = this.escape
-            ? escapeHTML(this.ngItemLabel)
-            : this.ngItemLabel;
+        this.element.nativeElement.innerHTML = this.ngSelectLabelEscape
+            ? escapeHTML(this.ngSelectLabelValue)
+            : this.ngSelectLabelValue;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgItemLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgItemLabel, isStandalone: true, selector: "[ngItemLabel]", inputs: { ngItemLabel: "ngItemLabel", escape: "escape" }, usesOnChanges: true, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgItemLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectLabelRenderer, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ngItemLabel]',
+                    selector: '[ngSelectLabelValue]',
                 }]
-        }], propDecorators: { ngItemLabel: [{
+        }], propDecorators: { ngSelectLabelValue: [{
                 type: Input
-            }], escape: [{
+            }], ngSelectLabelEscape: [{
                 type: Input
             }] } });
-class NgOptionTemplate {
+class NgSelectOptionTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgOptionTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgOptionTemplate, isStandalone: true, selector: "[ng-option-tmp]", ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgOptionTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectOptionTemplate, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ng-option-tmp]',
+                    selector: '[ngSelectOption]',
                 }]
         }] });
-class NgOptgroupTemplate {
+class NgSelectOptgroupTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgOptgroupTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgOptgroupTemplate, isStandalone: true, selector: "[ng-optgroup-tmp]", ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgOptgroupTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectOptgroupTemplate, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ng-optgroup-tmp]',
+                    selector: '[ngSelectOptgroup]',
                 }]
         }] });
-class NgLabelTemplate {
+class NgSelectLabelTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgLabelTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgLabelTemplate, isStandalone: true, selector: "[ng-label-tmp]", ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgLabelTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectLabelTemplate, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ng-label-tmp]',
+                    selector: '[ngSelectLabel]',
                 }]
         }] });
-class NgMultiLabelTemplate {
+class NgSelectMultiLabelTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgMultiLabelTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgMultiLabelTemplate, isStandalone: true, selector: "[ng-multi-label-tmp]", ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgMultiLabelTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectMultiLabelTemplate, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ng-multi-label-tmp]',
+                    selector: '[ngSelectMultiLabel]',
                 }]
         }] });
-class NgHeaderTemplate {
+class NgSelectPanelHeaderTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgHeaderTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgHeaderTemplate, isStandalone: true, selector: "[ng-header-tmp]", ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgHeaderTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectPanelHeaderTemplate, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ng-header-tmp]',
+                    selector: '[ngSelectPanelHeader]',
                 }]
         }] });
-class NgFooterTemplate {
+class NgSelectPanelFooterTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgFooterTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgFooterTemplate, isStandalone: true, selector: "[ng-footer-tmp]", ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgFooterTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectPanelFooterTemplate, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ng-footer-tmp]',
+                    selector: '[ngSelectPanelFooter]',
                 }]
         }] });
-class NgNotFoundTemplate {
+class NgSelectNotFoundTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgNotFoundTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgNotFoundTemplate, isStandalone: true, selector: "[ng-notfound-tmp]", ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgNotFoundTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectNotFoundTemplate, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ng-notfound-tmp]',
+                    selector: '[ngSelectNotFound]',
                 }]
         }] });
-class NgPlaceholderTemplate {
+class NgSelectPlaceholderTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgPlaceholderTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgPlaceholderTemplate, isStandalone: true, selector: "[ng-placeholder-tmp]", ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgPlaceholderTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectPlaceholderTemplate, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ng-placeholder-tmp]',
+                    selector: '[ngSelectPlaceholder]',
                 }]
         }] });
-class NgTypeToSearchTemplate {
+class NgSelectTypeToSearchTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgTypeToSearchTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgTypeToSearchTemplate, isStandalone: true, selector: "[ng-typetosearch-tmp]", ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgTypeToSearchTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectTypeToSearchTemplate, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ng-typetosearch-tmp]',
+                    selector: '[ngSelectTypeToSearch]',
                 }]
         }] });
-class NgLoadingTextTemplate {
+class NgSelectLoadingTextTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgLoadingTextTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgLoadingTextTemplate, isStandalone: true, selector: "[ng-loadingtext-tmp]", ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgLoadingTextTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectLoadingTextTemplate, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ng-loadingtext-tmp]',
+                    selector: '[ngSelectLoadingText]',
                 }]
         }] });
-class NgTagTemplate {
+class NgSelectTagTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgTagTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgTagTemplate, isStandalone: true, selector: "[ng-tag-tmp]", ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgTagTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectTagTemplate, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ng-tag-tmp]',
+                    selector: '[ngSelectTag]',
                 }]
         }] });
-class NgLoadingSpinnerTemplate {
+class NgSelectLoadingTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgLoadingSpinnerTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgLoadingSpinnerTemplate, isStandalone: true, selector: "[ng-loadingspinner-tmp]", ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgLoadingSpinnerTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectLoadingTemplate, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ng-loadingspinner-tmp]',
+                    selector: '[ngSelectLoading]',
                 }]
         }] });
-class NgClearButtonTemplate {
+class NgSelectClearButtonTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgClearButtonTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: NgClearButtonTemplate, isStandalone: true, selector: "[ng-clearbutton-tmp]", ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgClearButtonTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectClearButtonTemplate, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ng-clearbutton-tmp]',
+                    selector: '[ngSelectClearButton]',
                 }]
         }] });
 
@@ -2150,6 +2114,8 @@ class NgSelect {
     classes = inject(new HostAttributeToken('class'), { optional: true });
     _classList = {};
     _uid = `ng-select-${nextUniqueId++}`;
+    _listboxId = `${this._uid}-listbox`;
+    _viewValuesId = `${this._uid}-view-values`;
     bindLabel = this._config.bindLabel;
     bindValue = this._config.bindValue;
     placeholder = this._config.placeholder;
@@ -2189,12 +2155,17 @@ class NgSelect {
     searchFn = null;
     keyDownFn = (e) => true;
     trackByFn = null;
-    appearance = this._config.appearance;
     tabIndex;
+    inputAttrs = {};
     ariaLabel;
     ariaLabelledby;
-    ariaDescribedby;
-    inputAttrs = {};
+    get ariaDescribedby() {
+        return this._ariaDescribedby || this._viewValuesId;
+    }
+    set ariaDescribedby(value) {
+        this._ariaDescribedby = value ? `${value} ${this._viewValuesId}` : this._viewValuesId;
+    }
+    _ariaDescribedby;
     set panelClass(value) {
         const newClassList = {};
         this.classes?.split(/\s+/).forEach(c => (newClassList[c] = true));
@@ -2211,12 +2182,14 @@ class NgSelect {
         this._cdr.markForCheck();
     }
     get inputId() {
-        return this._inputId || `${this._uid}-input`;
+        return this._inputId;
     }
     set inputId(value) {
-        this._inputId = value;
+        if (value) {
+            this._inputId = value;
+        }
     }
-    _inputId;
+    _inputId = `${this._uid}-input`;
     get items() {
         return this._items;
     }
@@ -2274,14 +2247,14 @@ class NgSelect {
     optgroupTemplate;
     labelTemplate;
     multiLabelTemplate;
-    headerTemplate;
-    footerTemplate;
+    panelHeaderTemplate;
+    panelFooterTemplate;
     notFoundTemplate;
     placeholderTemplate;
     typeToSearchTemplate;
     loadingTextTemplate;
     tagTemplate;
-    loadingSpinnerTemplate;
+    loadingTemplate;
     clearButtonTemplate;
     itemsList = new ItemsList(this, this.newSelectionModel?.() ?? DefaultSelectionModelFactory());
     element = this._elementRef.nativeElement;
@@ -2303,6 +2276,9 @@ class NgSelect {
     get selectedValues() {
         return this.selectedItems.map(x => x.value);
     }
+    get selectedViewValuesStr() {
+        return this.selectedItems.map(x => x.viewValue).join(', ');
+    }
     get hasValue() {
         return this.selectedItems.length > 0;
     }
@@ -2330,7 +2306,7 @@ class NgSelect {
         return this.editableSearchTerm && !this.multiple;
     }
     get _isTypeahead() {
-        return this.typeahead && this.typeahead.observers.length > 0;
+        return this.typeahead && this.typeahead.observed;
     }
     get _validTerm() {
         const term = this.searchTerm?.trim();
@@ -2349,9 +2325,6 @@ class NgSelect {
         const empty = this.itemsList.filteredItems.length === 0;
         return empty && this._isTypeahead && !this._validTerm && !this.loading;
     }
-    get listboxId() {
-        return `${this._uid}-listbox`;
-    }
     _onChange = (_) => { };
     _onTouched = () => { };
     trackByOption = (_, item) => {
@@ -2471,33 +2444,34 @@ class NgSelect {
         }
     }
     handleMousedown(e) {
-        if (this.preventToggleOnRightClick && e.button === 2) {
+        if (this.preventToggleOnRightClick && e.button === 2)
             return;
-        }
         const target = e.target;
-        if (target.tagName !== 'INPUT') {
+        const isInput = target.tagName === 'INPUT';
+        const isClearClick = !!target.closest('.ng-select-clear');
+        const isArrowClick = !!target.closest('.ng-select-arrow');
+        const isValueRemoveClick = !!target.closest('.ng-select-value-remove');
+        if (!isInput) {
             e.preventDefault();
         }
-        if (target.classList.contains('ng-clear-wrapper')) {
+        if (isClearClick) {
             this.handleClearClick();
             return;
         }
-        if (target.classList.contains('ng-arrow-wrapper')) {
+        if (isArrowClick) {
             this.handleArrowClick();
             return;
         }
-        if (target.classList.contains('ng-value-remove')) {
+        if (isValueRemoveClick) {
             return;
         }
         if (!this.focused) {
             this.focus();
         }
-        if (this.searchable) {
-            this.open();
-        }
-        else {
-            this.toggle();
+        if (this.searchable && this.isOpen) {
+            return;
         }
+        this.toggle();
     }
     handleArrowClick() {
         if (this.isOpen) {
@@ -2564,6 +2538,12 @@ class NgSelect {
         this.closeEvent.emit();
         this._cdr.markForCheck();
     }
+    focus() {
+        this.searchInput.nativeElement.focus();
+    }
+    blur() {
+        this.searchInput.nativeElement.blur();
+    }
     toggleItem(item) {
         if (!item || item.disabled || this.disabled) {
             return;
@@ -2594,12 +2574,6 @@ class NgSelect {
         }
         this._onSelectionChanged();
     }
-    focus() {
-        this.searchInput.nativeElement.focus();
-    }
-    blur() {
-        this.searchInput.nativeElement.blur();
-    }
     unselect(item) {
         if (!item) {
             return;
@@ -2714,6 +2688,7 @@ class NgSelect {
             this.items = options.map(option => ({
                 $ngOptionValue: option.value,
                 $ngOptionLabel: option.elementRef.nativeElement.innerHTML,
+                viewValue: (option.elementRef.nativeElement.textContent || '').trim(),
                 disabled: option.disabled,
             }));
             this.itemsList.setItems(this.items);
@@ -2981,17 +2956,17 @@ class NgSelect {
         }
     }
     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", appearance: "appearance", tabIndex: ["tabIndex", "tabIndex", numberAttribute], ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", inputAttrs: "inputAttrs", 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 ɵ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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NgSelect),
                 multi: true,
             },
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: NgOptionTemplate, descendants: true, read: TemplateRef }, { propertyName: "optgroupTemplate", first: true, predicate: NgOptgroupTemplate, descendants: true, read: TemplateRef }, { propertyName: "labelTemplate", first: true, predicate: NgLabelTemplate, descendants: true, read: TemplateRef }, { propertyName: "multiLabelTemplate", first: true, predicate: NgMultiLabelTemplate, descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: NgHeaderTemplate, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: NgFooterTemplate, descendants: true, read: TemplateRef }, { propertyName: "notFoundTemplate", first: true, predicate: NgNotFoundTemplate, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: NgPlaceholderTemplate, descendants: true, read: TemplateRef }, { propertyName: "typeToSearchTemplate", first: true, predicate: NgTypeToSearchTemplate, descendants: true, read: TemplateRef }, { propertyName: "loadingTextTemplate", first: true, predicate: NgLoadingTextTemplate, descendants: true, read: TemplateRef }, { propertyName: "tagTemplate", first: true, predicate: NgTagTemplate, descendants: true, read: TemplateRef }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: NgLoadingSpinnerTemplate, descendants: true, read: TemplateRef }, { propertyName: "clearButtonTemplate", first: true, predicate: NgClearButtonTemplate, descendants: true, read: TemplateRef }, { propertyName: "ngOptions", predicate: NgOption, descendants: true }], viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: i0.forwardRef(() => NgDropdownPanel), 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<div\n  class=\"ng-select-container\"\n  [class.ng-appearance-outline]=\"appearance === 'outline'\"\n  [class.ng-has-value]=\"hasValue\"\n  (mousedown)=\"handleMousedown($event)\"\n>\n  <div class=\"ng-value-container\">\n    @if ((selectedItems.length === 0 && !searchTerm) || fixedPlaceholder) {\n      <ng-template #defaultPlaceholderTemplate>\n        <div class=\"ng-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-value\" [class.ng-value-disabled]=\"item.disabled\">\n          <ng-template #defaultLabelTemplate>\n            <span\n              class=\"ng-value-label\"\n              [ngItemLabel]=\"item.label || ''\"\n              [escape]=\"escapeHTML\"\n            ></span>\n            <span class=\"ng-value-remove\" (click)=\"unselect(item)\" role=\"button\">\u00D7</span>\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-input\">\n      <input\n        #searchInput\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]=\"loadingSpinnerTemplate || defaultLoadingSpinnerTemplate\" />\n  }\n\n  @if (showClearButton) {\n    @if (clearButtonTemplate) {\n      <ng-container [ngTemplateOutlet]=\"clearButtonTemplate\" />\n    } @else {\n      <span #clearButton class=\"ng-clear-wrapper\" [title]=\"clearAllText\" aria-hidden=\"true\">\n        <span class=\"ng-clear\">\u00D7</span>\n      </span>\n    }\n  }\n\n  @if (!panelDisabled) {\n    <span class=\"ng-arrow-wrapper\" aria-hidden=\"true\">\n      <span class=\"ng-arrow\"></span>\n    </span>\n  }\n</div>\n\n@if (isOpen) {\n  <ng-dropdown-panel\n    [class.ng-select-multiple]=\"multiple\"\n    [class]=\"appendTo ? _classList : null\"\n    [listboxId]=\"listboxId\"\n    [virtualScroll]=\"virtualScroll\"\n    [bufferAmount]=\"bufferAmount\"\n    [appendTo]=\"appendTo\"\n    [position]=\"panelPosition\"\n    [headerTemplate]=\"headerTemplate\"\n    [footerTemplate]=\"footerTemplate\"\n    [filterValue]=\"searchTerm\"\n    [items]=\"itemsList.filteredItems\"\n    [markedItem]=\"itemsList.markedItem\"\n    (update)=\"viewPortItems = $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-option\"\n        [class.ng-option-disabled]=\"item.disabled\"\n        [class.ng-option-selected]=\"item.selected\"\n        [class.ng-optgroup]=\"item.children\"\n        [class.ng-option]=\"!item.children\"\n        [class.ng-option-child]=\"!!item.parent\"\n        [class.ng-option-marked]=\"item === itemsList.markedItem\"\n        [attr.id]=\"item?.htmlId\"\n        [attr.role]=\"item.children ? 'group' : 'option'\"\n        [attr.aria-disabled]=\"item.disabled\"\n        [attr.aria-selected]=\"item.selected\"\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-option-label\"\n            [ngItemLabel]=\"item.label || ''\"\n            [escape]=\"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-option\"\n        [class.ng-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>\n            <span class=\"ng-tag-label\">{{ addTagText }}</span>\n            \"{{ searchTerm }}\"\n          </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-option ng-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-option ng-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-option ng-option-disabled\">{{ loadingText }}</div>\n      </ng-template>\n      <ng-template\n        [ngTemplateOutlet]=\"loadingTextTemplate || defaultLoadingTextTemplate\"\n        [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n      />\n    }\n  </ng-dropdown-panel>\n}\n\n<!-- Always present aria-live region -->\n<div class=\"ng-select-visually-hidden\" aria-atomic=\"true\" aria-live=\"polite\" role=\"status\">\n  @if (isOpen && showNoItemsFound) {\n    {{ notFoundText }}\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block}.ng-select.ng-select-searchable .ng-input{opacity:1}.ng-select.ng-select-opened .ng-select-container{z-index:1001}.ng-select.ng-select-disabled .ng-placeholder,.ng-select.ng-select-disabled .ng-value{-webkit-user-select:none;user-select:none;cursor:default}.ng-select.ng-select-disabled .ng-arrow-wrapper{cursor:default}.ng-select.ng-select-filtered .ng-placeholder,.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{box-sizing:border-box;position:relative;display:flex;width:100%;outline:none;overflow:hidden;cursor:default}.ng-select .ng-value-container{display:flex;flex:1}.ng-select .ng-input{box-sizing:border-box;opacity:0}.ng-select .ng-input>input{width:100%;padding:0;background:transparent;border:none;box-shadow:none;outline:none;cursor:default}.ng-select .ng-input>input::-ms-clear{display:none}.ng-select .ng-input>input[readonly]{-webkit-user-select:unset;user-select:unset;width:0;padding:0}.ng-select.ng-select-single.ng-select-filtered .ng-value{visibility:hidden}.ng-select.ng-select-single .ng-value-container,.ng-select.ng-select-single .ng-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select.ng-select-single .ng-value-remove{display:none}.ng-select.ng-select-single .ng-input{position:absolute;left:0;width:100%}.ng-select.ng-select-multiple.ng-select-disabled .ng-value-remove{display:none}.ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap}.ng-select.ng-select-multiple .ng-placeholder{position:absolute;z-index:1}.ng-select.ng-select-multiple .ng-value{white-space:nowrap}.ng-select.ng-select-multiple .ng-value-remove{cursor:pointer}.ng-select.ng-select-multiple .ng-value-disabled .ng-value-remove{display:none}.ng-select.ng-select-multiple .ng-input{flex:1;z-index:2}.ng-select .ng-clear-wrapper{cursor:pointer;position:relative;width:17px;-webkit-user-select:none;user-select:none}.ng-select .ng-clear{display:inline-block;font-size:18px;line-height:1;pointer-events:none}.ng-select .ng-arrow-wrapper{position:relative;text-align:center;-webkit-user-select:none;user-select:none;cursor:pointer}.ng-select .ng-arrow{position:relative;display:inline-block;height:0;width:0;pointer-events:none}.ng-dropdown-panel{box-sizing:border-box;position:absolute;z-index:1050;width:100%;opacity:0;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .ng-dropdown-panel-items{display:block;height:auto;max-height:240px;overflow-y:auto}.ng-dropdown-panel .ng-optgroup,.ng-dropdown-panel .ng-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-option{display:block;cursor:pointer}.ng-dropdown-panel .ng-option.disabled{cursor:default}.ng-dropdown-panel .ng-option .highlighted{font-weight:700;text-decoration:underline}.ng-dropdown-panel .ng-option-label:empty:before{content:\"\\200b\"}.ng-select-virtual-scroll-host{position:relative;display:block;overflow:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.ng-select-virtual-scroll-content{position:absolute;top:0;left:0;width:100%;height:100%}.ng-select-virtual-scroll-spacer{width:1px;opacity:0}.ng-select-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0;clip-path:rect(0 0 0 0);white-space:nowrap}.ng-select-spinner{position:relative;width:16px;height:16px;margin:0 4px;font-size:10px;text-indent:-9999em;border-radius:50%;border:2px solid rgba(66,66,66,.2);border-left-color:#424242;animation:load8 .8s infinite linear}@keyframes load8{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgItemLabel, selector: "[ngItemLabel]", inputs: ["ngItemLabel", "escape"] }, { kind: "component", type: NgDropdownPanel, selector: "ng-dropdown-panel", inputs: ["listboxId", "items", "markedItem", "position", "appendTo", "bufferAmount", "virtualScroll", "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    [headerTemplate]=\"panelHeaderTemplate\"\n    [footerTemplate]=\"panelFooterTemplate\"\n    [filterValue]=\"searchTerm\"\n    [items]=\"itemsList.filteredItems\"\n    [markedItem]=\"itemsList.markedItem\"\n    (update)=\"viewPortItems = $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;overflow-y:auto;-webkit-overflow-scrolling:touch}.ng-select-virtual-scroll-content{position:absolute;top:0;left:0;width:100%;height:100%}.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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-select', imports: [NgTemplateOutlet, NgItemLabel, NgDropdownPanel], host: {
+            args: [{ selector: 'ng-select', imports: [NgTemplateOutlet, NgSelectLabelRenderer, NgSelectPanel], host: {
                         'class': 'ng-select',
                         '[class.ng-select-single]': '!multiple',
                         '[class.ng-select-multiple]': 'multiple',
@@ -3009,7 +2984,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<div\n  class=\"ng-select-container\"\n  [class.ng-appearance-outline]=\"appearance === 'outline'\"\n  [class.ng-has-value]=\"hasValue\"\n  (mousedown)=\"handleMousedown($event)\"\n>\n  <div class=\"ng-value-container\">\n    @if ((selectedItems.length === 0 && !searchTerm) || fixedPlaceholder) {\n      <ng-template #defaultPlaceholderTemplate>\n        <div class=\"ng-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-value\" [class.ng-value-disabled]=\"item.disabled\">\n          <ng-template #defaultLabelTemplate>\n            <span\n              class=\"ng-value-label\"\n              [ngItemLabel]=\"item.label || ''\"\n              [escape]=\"escapeHTML\"\n            ></span>\n            <span class=\"ng-value-remove\" (click)=\"unselect(item)\" role=\"button\">\u00D7</span>\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-input\">\n      <input\n        #searchInput\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]=\"loadingSpinnerTemplate || defaultLoadingSpinnerTemplate\" />\n  }\n\n  @if (showClearButton) {\n    @if (clearButtonTemplate) {\n      <ng-container [ngTemplateOutlet]=\"clearButtonTemplate\" />\n    } @else {\n      <span #clearButton class=\"ng-clear-wrapper\" [title]=\"clearAllText\" aria-hidden=\"true\">\n        <span class=\"ng-clear\">\u00D7</span>\n      </span>\n    }\n  }\n\n  @if (!panelDisabled) {\n    <span class=\"ng-arrow-wrapper\" aria-hidden=\"true\">\n      <span class=\"ng-arrow\"></span>\n    </span>\n  }\n</div>\n\n@if (isOpen) {\n  <ng-dropdown-panel\n    [class.ng-select-multiple]=\"multiple\"\n    [class]=\"appendTo ? _classList : null\"\n    [listboxId]=\"listboxId\"\n    [virtualScroll]=\"virtualScroll\"\n    [bufferAmount]=\"bufferAmount\"\n    [appendTo]=\"appendTo\"\n    [position]=\"panelPosition\"\n    [headerTemplate]=\"headerTemplate\"\n    [footerTemplate]=\"footerTemplate\"\n    [filterValue]=\"searchTerm\"\n    [items]=\"itemsList.filteredItems\"\n    [markedItem]=\"itemsList.markedItem\"\n    (update)=\"viewPortItems = $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-option\"\n        [class.ng-option-disabled]=\"item.disabled\"\n        [class.ng-option-selected]=\"item.selected\"\n        [class.ng-optgroup]=\"item.children\"\n        [class.ng-option]=\"!item.children\"\n        [class.ng-option-child]=\"!!item.parent\"\n        [class.ng-option-marked]=\"item === itemsList.markedItem\"\n        [attr.id]=\"item?.htmlId\"\n        [attr.role]=\"item.children ? 'group' : 'option'\"\n        [attr.aria-disabled]=\"item.disabled\"\n        [attr.aria-selected]=\"item.selected\"\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-option-label\"\n            [ngItemLabel]=\"item.label || ''\"\n            [escape]=\"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-option\"\n        [class.ng-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>\n            <span class=\"ng-tag-label\">{{ addTagText }}</span>\n            \"{{ searchTerm }}\"\n          </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-option ng-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-option ng-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-option ng-option-disabled\">{{ loadingText }}</div>\n      </ng-template>\n      <ng-template\n        [ngTemplateOutlet]=\"loadingTextTemplate || defaultLoadingTextTemplate\"\n        [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n      />\n    }\n  </ng-dropdown-panel>\n}\n\n<!-- Always present aria-live region -->\n<div class=\"ng-select-visually-hidden\" aria-atomic=\"true\" aria-live=\"polite\" role=\"status\">\n  @if (isOpen && showNoItemsFound) {\n    {{ notFoundText }}\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block}.ng-select.ng-select-searchable .ng-input{opacity:1}.ng-select.ng-select-opened .ng-select-container{z-index:1001}.ng-select.ng-select-disabled .ng-placeholder,.ng-select.ng-select-disabled .ng-value{-webkit-user-select:none;user-select:none;cursor:default}.ng-select.ng-select-disabled .ng-arrow-wrapper{cursor:default}.ng-select.ng-select-filtered .ng-placeholder,.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{box-sizing:border-box;position:relative;display:flex;width:100%;outline:none;overflow:hidden;cursor:default}.ng-select .ng-value-container{display:flex;flex:1}.ng-select .ng-input{box-sizing:border-box;opacity:0}.ng-select .ng-input>input{width:100%;padding:0;background:transparent;border:none;box-shadow:none;outline:none;cursor:default}.ng-select .ng-input>input::-ms-clear{display:none}.ng-select .ng-input>input[readonly]{-webkit-user-select:unset;user-select:unset;width:0;padding:0}.ng-select.ng-select-single.ng-select-filtered .ng-value{visibility:hidden}.ng-select.ng-select-single .ng-value-container,.ng-select.ng-select-single .ng-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select.ng-select-single .ng-value-remove{display:none}.ng-select.ng-select-single .ng-input{position:absolute;left:0;width:100%}.ng-select.ng-select-multiple.ng-select-disabled .ng-value-remove{display:none}.ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap}.ng-select.ng-select-multiple .ng-placeholder{position:absolute;z-index:1}.ng-select.ng-select-multiple .ng-value{white-space:nowrap}.ng-select.ng-select-multiple .ng-value-remove{cursor:pointer}.ng-select.ng-select-multiple .ng-value-disabled .ng-value-remove{display:none}.ng-select.ng-select-multiple .ng-input{flex:1;z-index:2}.ng-select .ng-clear-wrapper{cursor:pointer;position:relative;width:17px;-webkit-user-select:none;user-select:none}.ng-select .ng-clear{display:inline-block;font-size:18px;line-height:1;pointer-events:none}.ng-select .ng-arrow-wrapper{position:relative;text-align:center;-webkit-user-select:none;user-select:none;cursor:pointer}.ng-select .ng-arrow{position:relative;display:inline-block;height:0;width:0;pointer-events:none}.ng-dropdown-panel{box-sizing:border-box;position:absolute;z-index:1050;width:100%;opacity:0;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .ng-dropdown-panel-items{display:block;height:auto;max-height:240px;overflow-y:auto}.ng-dropdown-panel .ng-optgroup,.ng-dropdown-panel .ng-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-option{display:block;cursor:pointer}.ng-dropdown-panel .ng-option.disabled{cursor:default}.ng-dropdown-panel .ng-option .highlighted{font-weight:700;text-decoration:underline}.ng-dropdown-panel .ng-option-label:empty:before{content:\"\\200b\"}.ng-select-virtual-scroll-host{position:relative;display:block;overflow:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.ng-select-virtual-scroll-content{position:absolute;top:0;left:0;width:100%;height:100%}.ng-select-virtual-scroll-spacer{width:1px;opacity:0}.ng-select-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0;clip-path:rect(0 0 0 0);white-space:nowrap}.ng-select-spinner{position:relative;width:16px;height:16px;margin:0 4px;font-size:10px;text-indent:-9999em;border-radius:50%;border:2px solid rgba(66,66,66,.2);border-left-color:#424242;animation:load8 .8s infinite linear}@keyframes load8{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    [headerTemplate]=\"panelHeaderTemplate\"\n    [footerTemplate]=\"panelFooterTemplate\"\n    [filterValue]=\"searchTerm\"\n    [items]=\"itemsList.filteredItems\"\n    [markedItem]=\"itemsList.markedItem\"\n    (update)=\"viewPortItems = $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;overflow-y:auto;-webkit-overflow-scrolling:touch}.ng-select-virtual-scroll-content{position:absolute;top:0;left:0;width:100%;height:100%}.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: [{
@@ -3109,19 +3084,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                 type: Input
             }], trackByFn: [{
                 type: Input
-            }], appearance: [{
-                type: Input
             }], tabIndex: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
+            }], inputAttrs: [{
+                type: Input
             }], ariaLabel: [{
                 type: Input
             }], ariaLabelledby: [{
                 type: Input
             }], ariaDescribedby: [{
                 type: Input
-            }], inputAttrs: [{
-                type: Input
             }], panelClass: [{
                 type: Input
             }], inputId: [{
@@ -3169,7 +3142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                 type: Output
             }], dropdownPanel: [{
                 type: ViewChild,
-                args: [forwardRef(() => NgDropdownPanel)]
+                args: [forwardRef(() => NgSelectPanel)]
             }], searchInput: [{
                 type: ViewChild,
                 args: ['searchInput', { static: true }]
@@ -3178,81 +3151,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                 args: ['clearButton']
             }], ngOptions: [{
                 type: ContentChildren,
-                args: [NgOption, { descendants: true }]
+                args: [NgSelectOption, { descendants: true }]
             }], optionTemplate: [{
                 type: ContentChild,
-                args: [NgOptionTemplate, { read: TemplateRef }]
+                args: [NgSelectOptionTemplate, { read: TemplateRef }]
             }], optgroupTemplate: [{
                 type: ContentChild,
-                args: [NgOptgroupTemplate, { read: TemplateRef }]
+                args: [NgSelectOptgroupTemplate, { read: TemplateRef }]
             }], labelTemplate: [{
                 type: ContentChild,
-                args: [NgLabelTemplate, { read: TemplateRef }]
+                args: [NgSelectLabelTemplate, { read: TemplateRef }]
             }], multiLabelTemplate: [{
                 type: ContentChild,
-                args: [NgMultiLabelTemplate, { read: TemplateRef }]
-            }], headerTemplate: [{
+                args: [NgSelectMultiLabelTemplate, { read: TemplateRef }]
+            }], panelHeaderTemplate: [{
                 type: ContentChild,
-                args: [NgHeaderTemplate, { read: TemplateRef }]
-            }], footerTemplate: [{
+                args: [NgSelectPanelHeaderTemplate, { read: TemplateRef }]
+            }], panelFooterTemplate: [{
                 type: ContentChild,
-                args: [NgFooterTemplate, { read: TemplateRef }]
+                args: [NgSelectPanelFooterTemplate, { read: TemplateRef }]
             }], notFoundTemplate: [{
                 type: ContentChild,
-                args: [NgNotFoundTemplate, { read: TemplateRef }]
+                args: [NgSelectNotFoundTemplate, { read: TemplateRef }]
             }], placeholderTemplate: [{
                 type: ContentChild,
-                args: [NgPlaceholderTemplate, { read: TemplateRef }]
+                args: [NgSelectPlaceholderTemplate, { read: TemplateRef }]
             }], typeToSearchTemplate: [{
                 type: ContentChild,
-                args: [NgTypeToSearchTemplate, { read: TemplateRef }]
+                args: [NgSelectTypeToSearchTemplate, { read: TemplateRef }]
             }], loadingTextTemplate: [{
                 type: ContentChild,
-                args: [NgLoadingTextTemplate, { read: TemplateRef }]
+                args: [NgSelectLoadingTextTemplate, { read: TemplateRef }]
             }], tagTemplate: [{
                 type: ContentChild,
-                args: [NgTagTemplate, { read: TemplateRef }]
-            }], loadingSpinnerTemplate: [{
+                args: [NgSelectTagTemplate, { read: TemplateRef }]
+            }], loadingTemplate: [{
                 type: ContentChild,
-                args: [NgLoadingSpinnerTemplate, { read: TemplateRef }]
+                args: [NgSelectLoadingTemplate, { read: TemplateRef }]
             }], clearButtonTemplate: [{
                 type: ContentChild,
-                args: [NgClearButtonTemplate, { read: TemplateRef }]
+                args: [NgSelectClearButtonTemplate, { read: TemplateRef }]
             }] } });
 
 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: [NgDropdownPanel,
-            NgOption,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.12", ngImport: i0, type: NgSelectModule, imports: [NgSelectPanel,
             NgSelect,
-            NgOptgroupTemplate,
-            NgOptionTemplate,
-            NgLabelTemplate,
-            NgMultiLabelTemplate,
-            NgHeaderTemplate,
-            NgFooterTemplate,
-            NgPlaceholderTemplate,
-            NgClearButtonTemplate,
-            NgNotFoundTemplate,
-            NgTypeToSearchTemplate,
-            NgLoadingTextTemplate,
-            NgTagTemplate,
-            NgLoadingSpinnerTemplate,
-            NgItemLabel], exports: [NgSelect,
-            NgOption,
-            NgOptgroupTemplate,
-            NgOptionTemplate,
-            NgLabelTemplate,
-            NgMultiLabelTemplate,
-            NgHeaderTemplate,
-            NgFooterTemplate,
-            NgPlaceholderTemplate,
-            NgNotFoundTemplate,
-            NgTypeToSearchTemplate,
-            NgLoadingTextTemplate,
-            NgTagTemplate,
-            NgLoadingSpinnerTemplate,
-            NgClearButtonTemplate] });
+            NgSelectOption,
+            NgSelectOptgroupTemplate,
+            NgSelectOptionTemplate,
+            NgSelectLabelTemplate,
+            NgSelectMultiLabelTemplate,
+            NgSelectPanelHeaderTemplate,
+            NgSelectPanelFooterTemplate,
+            NgSelectPlaceholderTemplate,
+            NgSelectClearButtonTemplate,
+            NgSelectNotFoundTemplate,
+            NgSelectTypeToSearchTemplate,
+            NgSelectLoadingTextTemplate,
+            NgSelectTagTemplate,
+            NgSelectLoadingTemplate,
+            NgSelectLabelRenderer], exports: [NgSelect,
+            NgSelectOption,
+            NgSelectOptgroupTemplate,
+            NgSelectOptionTemplate,
+            NgSelectLabelTemplate,
+            NgSelectMultiLabelTemplate,
+            NgSelectPanelHeaderTemplate,
+            NgSelectPanelFooterTemplate,
+            NgSelectPlaceholderTemplate,
+            NgSelectClearButtonTemplate,
+            NgSelectNotFoundTemplate,
+            NgSelectTypeToSearchTemplate,
+            NgSelectLoadingTextTemplate,
+            NgSelectTagTemplate,
+            NgSelectLoadingTemplate] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectModule, providers: [
             {
                 provide: SELECTION_MODEL_FACTORY,
@@ -3264,40 +3237,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
             type: NgModule,
             args: [{
                     imports: [
-                        NgDropdownPanel,
-                        NgOption,
+                        NgSelectPanel,
                         NgSelect,
-                        NgOptgroupTemplate,
-                        NgOptionTemplate,
-                        NgLabelTemplate,
-                        NgMultiLabelTemplate,
-                        NgHeaderTemplate,
-                        NgFooterTemplate,
-                        NgPlaceholderTemplate,
-                        NgClearButtonTemplate,
-                        NgNotFoundTemplate,
-                        NgTypeToSearchTemplate,
-                        NgLoadingTextTemplate,
-                        NgTagTemplate,
-                        NgLoadingSpinnerTemplate,
-                        NgItemLabel,
+                        NgSelectOption,
+                        NgSelectOptgroupTemplate,
+                        NgSelectOptionTemplate,
+                        NgSelectLabelTemplate,
+                        NgSelectMultiLabelTemplate,
+                        NgSelectPanelHeaderTemplate,
+                        NgSelectPanelFooterTemplate,
+                        NgSelectPlaceholderTemplate,
+                        NgSelectClearButtonTemplate,
+                        NgSelectNotFoundTemplate,
+                        NgSelectTypeToSearchTemplate,
+                        NgSelectLoadingTextTemplate,
+                        NgSelectTagTemplate,
+                        NgSelectLoadingTemplate,
+                        NgSelectLabelRenderer,
                     ],
                     exports: [
                         NgSelect,
-                        NgOption,
-                        NgOptgroupTemplate,
-                        NgOptionTemplate,
-                        NgLabelTemplate,
-                        NgMultiLabelTemplate,
-                        NgHeaderTemplate,
-                        NgFooterTemplate,
-                        NgPlaceholderTemplate,
-                        NgNotFoundTemplate,
-                        NgTypeToSearchTemplate,
-                        NgLoadingTextTemplate,
-                        NgTagTemplate,
-                        NgLoadingSpinnerTemplate,
-                        NgClearButtonTemplate,
+                        NgSelectOption,
+                        NgSelectOptgroupTemplate,
+                        NgSelectOptionTemplate,
+                        NgSelectLabelTemplate,
+                        NgSelectMultiLabelTemplate,
+                        NgSelectPanelHeaderTemplate,
+                        NgSelectPanelFooterTemplate,
+                        NgSelectPlaceholderTemplate,
+                        NgSelectClearButtonTemplate,
+                        NgSelectNotFoundTemplate,
+                        NgSelectTypeToSearchTemplate,
+                        NgSelectLoadingTextTemplate,
+                        NgSelectTagTemplate,
+                        NgSelectLoadingTemplate,
                     ],
                     providers: [
                         {
@@ -3308,6 +3281,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                 }]
         }] });
 
+class NgSelectOptionHighlight {
+    term = '';
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    element = this.elementRef.nativeElement;
+    label = '';
+    get _canHighlight() {
+        return this.term && this.label;
+    }
+    ngOnChanges() {
+        if (this._canHighlight) {
+            this._highlightLabel();
+        }
+    }
+    ngAfterViewInit() {
+        this.label = this.element.innerHTML;
+        if (this._canHighlight) {
+            this._highlightLabel();
+        }
+    }
+    _escapeRegExp(str) {
+        return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
+    _highlightLabel() {
+        const label = this.label;
+        if (!this.term) {
+            this._setInnerHtml(label);
+            return;
+        }
+        const alternationString = this._escapeRegExp(this.term).replace(' ', '|');
+        const termRegex = new RegExp(alternationString, 'gi');
+        this._setInnerHtml(label.replace(termRegex, `<span class="ng-select-option-highlighted">$&</span>`));
+    }
+    _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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectOptionHighlight, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngOptionHighlight]',
+                }]
+        }], propDecorators: { term: [{
+                type: Input,
+                args: ['ngOptionHighlight']
+            }] } });
+
 /*
  * Public API Surface of ng-select
  */
@@ -3316,5 +3338,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DefaultSelectionModel, DefaultSelectionModelFactory, NgClearButtonTemplate, NgDropdownPanel, NgDropdownPanelUtils, NgFooterTemplate, NgHeaderTemplate, NgItemLabel, NgLabelTemplate, NgLoadingSpinnerTemplate, NgLoadingTextTemplate, NgMultiLabelTemplate, NgNotFoundTemplate, NgOptgroupTemplate, NgOption, NgOptionHighlight, NgOptionTemplate, NgPlaceholderTemplate, NgSelect, NgSelectConfig, NgSelectModule, NgTagTemplate, NgTypeToSearchTemplate, SELECTION_MODEL_FACTORY };
+export { DefaultSelectionModel, DefaultSelectionModelFactory, NgSelect, NgSelectClearButtonTemplate, NgSelectConfig, NgSelectLabelRenderer, NgSelectLabelTemplate, NgSelectLoadingTemplate, NgSelectLoadingTextTemplate, NgSelectModule, NgSelectMultiLabelTemplate, NgSelectNotFoundTemplate, NgSelectOptgroupTemplate, NgSelectOption, NgSelectOptionHighlight, NgSelectOptionTemplate, NgSelectPanel, NgSelectPanelFooterTemplate, NgSelectPanelHeaderTemplate, NgSelectPanelUtils, NgSelectPlaceholderTemplate, NgSelectTagTemplate, NgSelectTypeToSearchTemplate, SELECTION_MODEL_FACTORY };
 //# sourceMappingURL=ng-matero-ng-select.mjs.map