@ng-matero/ng-select 0.3.0 → 0.4.0

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

@@ -98,13 +98,6 @@ function isPromise(value) {
 function isFunction(value) {
     return value instanceof Function;
 }
-function newId() {
-    // First character is an 'a', it's good practice to tag id to begin with a letter
-    return 'axxxxxxxxxxx'.replace(/[x]/g, () => {
-        const val = (Math.random() * 16) | 0;
-        return val.toString(16);
-    });
-}
 var KeyCode;
 (function (KeyCode) {
     KeyCode["Tab"] = "Tab";
@@ -120,12 +113,12 @@ const CSS_POSITIONS = ['top', 'right', 'bottom', 'left'];
 const SCROLL_SCHEDULER = typeof requestAnimationFrame !== 'undefined' ? animationFrameScheduler : asapScheduler;
 class NgDropdownPanel {
     constructor() {
+        this.listboxId = '';
         this.items = [];
         this.position = 'auto';
         this.bufferAmount = 4;
         this.virtualScroll = false;
         this.filterValue = null;
-        this.ariaLabelDropdown = null;
         this.update = new EventEmitter();
         this.scroll = new EventEmitter();
         this.scrollToEnd = new EventEmitter();
@@ -163,9 +156,9 @@ class NgDropdownPanel {
     }
     ngOnInit() {
         this._select = this._dropdown.parentElement;
-        this._virtualPadding = this.paddingElementRef.nativeElement;
-        this._scrollablePanel = this.scrollElementRef.nativeElement;
-        this._contentPanel = this.contentElementRef.nativeElement;
+        this._scrollHost = this.scrollHostElRef.nativeElement;
+        this._scrollContent = this.scrollContentElRef.nativeElement;
+        this._scrollSpacer = this.scrollSpacerElRef.nativeElement;
         this._handleScroll();
         this._handleOutsideClick();
         this._appendDropdown();
@@ -204,11 +197,11 @@ class NgDropdownPanel {
             scrollTo = this._panelUtils.getScrollTo(item.offsetTop, item.clientHeight, lastScroll);
         }
         if (isDefined(scrollTo)) {
-            this._scrollablePanel.scrollTop = scrollTo;
+            this._scrollHost.scrollTop = scrollTo;
         }
     }
     scrollToTag() {
-        const panel = this._scrollablePanel;
+        const panel = this._scrollHost;
         panel.scrollTop = panel.scrollHeight - panel.clientHeight;
     }
     adjustPosition() {
@@ -239,7 +232,7 @@ class NgDropdownPanel {
     }
     _handleScroll() {
         this._zone.runOutsideAngular(() => {
-            fromEvent(this.scrollElementRef.nativeElement, 'scroll')
+            fromEvent(this._scrollHost, 'scroll')
                 .pipe(takeUntil(this._destroy$), auditTime(0, SCROLL_SCHEDULER))
                 .subscribe(e => {
                 const path = e.path || (e.composedPath && e.composedPath());
@@ -294,7 +287,7 @@ class NgDropdownPanel {
         }
         this._zone.runOutsideAngular(() => {
             Promise.resolve().then(() => {
-                const panelHeight = this._scrollablePanel.clientHeight;
+                const panelHeight = this._scrollHost.clientHeight;
                 this._panelUtils.setDimensions(0, panelHeight);
                 this._handleDropdownPosition();
                 this.scrollTo(this.markedItem, firstChange);
@@ -323,15 +316,15 @@ class NgDropdownPanel {
     }
     _updateVirtualHeight(height) {
         if (this._updateScrollHeight) {
-            this._virtualPadding.style.height = `${height}px`;
+            this._scrollSpacer.style.height = `${height}px`;
             this._updateScrollHeight = false;
         }
     }
     _setVirtualHeight() {
-        if (!this._virtualPadding) {
+        if (!this._scrollSpacer) {
             return;
         }
-        this._virtualPadding.style.height = `0px`;
+        this._scrollSpacer.style.height = `0px`;
     }
     _onItemsLengthChanged() {
         this._updateScrollHeight = true;
@@ -340,16 +333,16 @@ class NgDropdownPanel {
         if (scrollTop && this._lastScrollPosition === scrollTop) {
             return;
         }
-        scrollTop = scrollTop || this._scrollablePanel.scrollTop;
+        scrollTop = scrollTop || this._scrollHost.scrollTop;
         const range = this._panelUtils.calculateItems(scrollTop, this.itemsLength, this.bufferAmount);
         this._updateVirtualHeight(range.scrollHeight);
-        this._contentPanel.style.transform = `translateY(${range.topPadding}px)`;
+        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._scrollablePanel.scrollTop = scrollTop;
+            this._scrollHost.scrollTop = scrollTop;
             this._lastScrollPosition = scrollTop;
         }
     }
@@ -362,8 +355,8 @@ class NgDropdownPanel {
         return Promise.resolve().then(() => {
             const option = this._dropdown.querySelector(`#${first.htmlId}`);
             const optionHeight = option.clientHeight;
-            this._virtualPadding.style.height = `${optionHeight * this.itemsLength}px`;
-            const panelHeight = this._scrollablePanel.clientHeight;
+            this._scrollSpacer.style.height = `${optionHeight * this.itemsLength}px`;
+            const panelHeight = this._scrollHost.clientHeight;
             this._panelUtils.setDimensions(optionHeight, panelHeight);
             return this._panelUtils.dimensions;
         });
@@ -372,7 +365,7 @@ class NgDropdownPanel {
         if (this._scrollToEndFired || scrollTop === 0) {
             return;
         }
-        const padding = this.virtualScroll ? this._virtualPadding : this._contentPanel;
+        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;
@@ -444,7 +437,7 @@ class NgDropdownPanel {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgDropdownPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: NgDropdownPanel, isStandalone: true, selector: "ng-dropdown-panel", inputs: { items: "items", markedItem: "markedItem", position: "position", appendTo: "appendTo", bufferAmount: "bufferAmount", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], headerTemplate: "headerTemplate", footerTemplate: "footerTemplate", filterValue: "filterValue", ariaLabelDropdown: "ariaLabelDropdown" }, outputs: { update: "update", scroll: "scroll", scrollToEnd: "scrollToEnd", outsideClick: "outsideClick" }, viewQueries: [{ propertyName: "contentElementRef", first: true, predicate: ["content"], descendants: true, read: ElementRef, static: true }, { propertyName: "scrollElementRef", first: true, predicate: ["scroll"], descendants: true, read: ElementRef, static: true }, { propertyName: "paddingElementRef", first: true, predicate: ["padding"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵ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" }, 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
@@ -454,13 +447,14 @@ class NgDropdownPanel {
       </div>
     }
     <div
-      #scroll
-      class="ng-dropdown-panel-items ng-select-virtual-scroll-host"
-      [attr.aria-label]="ariaLabelDropdown"
+      #scrollHost
+      class="ng-dropdown-panel-items"
+      [class.ng-select-virtual-scroll-host]="virtualScroll"
+      [attr.id]="listboxId"
       role="listbox"
     >
-      <div #padding [class.ng-select-virtual-scroll-spacer]="virtualScroll"></div>
-      <div #content [class.ng-select-virtual-scroll-content]="virtualScroll && items.length">
+      <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>
@@ -488,13 +482,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
       </div>
     }
     <div
-      #scroll
-      class="ng-dropdown-panel-items ng-select-virtual-scroll-host"
-      [attr.aria-label]="ariaLabelDropdown"
+      #scrollHost
+      class="ng-dropdown-panel-items"
+      [class.ng-select-virtual-scroll-host]="virtualScroll"
+      [attr.id]="listboxId"
       role="listbox"
     >
-      <div #padding [class.ng-select-virtual-scroll-spacer]="virtualScroll"></div>
-      <div #content [class.ng-select-virtual-scroll-content]="virtualScroll && items.length">
+      <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>
@@ -511,7 +506,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { items: [{
+        }], propDecorators: { listboxId: [{
+                type: Input
+            }], items: [{
                 type: Input
             }], markedItem: [{
                 type: Input
@@ -530,8 +527,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                 type: Input
             }], filterValue: [{
                 type: Input
-            }], ariaLabelDropdown: [{
-                type: Input
             }], update: [{
                 type: Output
             }], scroll: [{
@@ -540,15 +535,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                 type: Output
             }], outsideClick: [{
                 type: Output
-            }], contentElementRef: [{
+            }], scrollHostElRef: [{
                 type: ViewChild,
-                args: ['content', { read: ElementRef, static: true }]
-            }], scrollElementRef: [{
+                args: ['scrollHost', { read: ElementRef, static: true }]
+            }], scrollContentElRef: [{
                 type: ViewChild,
-                args: ['scroll', { read: ElementRef, static: true }]
-            }], paddingElementRef: [{
+                args: ['scrollContent', { read: ElementRef, static: true }]
+            }], scrollSpacerElRef: [{
                 type: ViewChild,
-                args: ['padding', { read: ElementRef, static: true }]
+                args: ['scrollSpacer', { read: ElementRef, static: true }]
             }] } });
 
 class NgOption {
@@ -1710,7 +1705,7 @@ class ItemsList {
             label: isDefined(label) ? label.toString() : '',
             value,
             disabled: item.disabled,
-            htmlId: `${this._ngSelect.dropdownId}-${index}`,
+            htmlId: `${this._ngSelect._uid}-option-${index}`,
         };
     }
     mapSelectedItems() {
@@ -1779,7 +1774,7 @@ class ItemsList {
         if (this._ngSelect.hideSelected) {
             return -1;
         }
-        if (this._markedIndex > -1 && this.markedItem === undefined) {
+        if (this._markedIndex > -1 && this.markedItem == null) {
             return -1;
         }
         const selectedIndex = this._filteredItems.indexOf(this.lastSelectedItem);
@@ -1822,9 +1817,10 @@ class ItemsList {
     _flatten(groups) {
         const isGroupByFn = isFunction(this._ngSelect.groupBy);
         const items = [];
-        for (const key of Array.from(groups.keys())) {
+        let groupIndex = 0;
+        for (const key of groups.keys()) {
             let i = items.length;
-            if (key === undefined) {
+            if (key == null) {
                 const withoutGroup = groups.get(undefined) || [];
                 items.push(...withoutGroup.map(x => {
                     x.index = i++;
@@ -1835,11 +1831,11 @@ class ItemsList {
             const isObjectKey = isObject(key);
             const parent = {
                 label: isObjectKey ? '' : String(key),
-                children: undefined,
+                children: null,
                 parent: null,
                 index: i++,
                 disabled: !this._ngSelect.selectableGroup,
-                htmlId: newId(),
+                htmlId: `${this._ngSelect._uid}-group-${groupIndex}-heading`,
             };
             const groupKey = isGroupByFn
                 ? this._ngSelect.bindLabel
@@ -1853,7 +1849,7 @@ class ItemsList {
                 });
             const children = groups.get(key).map(x => {
                 x.parent = parent;
-                x.children = undefined;
+                x.children = null;
                 x.index = i++;
                 return x;
             });
@@ -1861,6 +1857,7 @@ class ItemsList {
             parent.value = groupValue(key, children.map(x => x.value));
             items.push(parent);
             items.push(...children);
+            groupIndex++;
         }
         return items;
     }
@@ -1874,11 +1871,9 @@ class NgSelectConfig {
         this.addTagText = 'Add item';
         this.loadingText = 'Loading...';
         this.clearAllText = 'Clear all';
-        this.ariaLabelDropdown = 'Options List';
-        this.disableVirtualScroll = true;
+        this.virtualScroll = false;
         this.openOnEnter = true;
         this.appearance = 'underline';
-        this.tabFocusOnClear = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectConfig, providedIn: 'root' }); }
@@ -1894,7 +1889,7 @@ class NgItemLabel {
         this.escape = true;
         this.element = inject(ElementRef);
     }
-    ngOnChanges(changes) {
+    ngOnChanges() {
         this.element.nativeElement.innerHTML = this.escape
             ? escapeHTML(this.ngItemLabel)
             : this.ngItemLabel;
@@ -2158,6 +2153,7 @@ class DefaultSelectionModel {
 }
 
 const SELECTION_MODEL_FACTORY = new InjectionToken('ng-select-selection-model');
+let nextUniqueId = 0;
 class NgSelect {
     set panelClass(value) {
         const newClassList = {};
@@ -2174,6 +2170,12 @@ class NgSelect {
         this._classList = newClassList;
         this._cdr.markForCheck();
     }
+    get inputId() {
+        return this._inputId || `${this._uid}-input`;
+    }
+    set inputId(value) {
+        this._inputId = value;
+    }
     get items() {
         return this._items;
     }
@@ -2194,25 +2196,13 @@ class NgSelect {
         this._compareWith = fn;
     }
     get clearSearchOnAdd() {
-        if (isDefined(this._clearSearchOnAdd)) {
-            return this._clearSearchOnAdd;
-        }
-        else if (isDefined(this._config.clearSearchOnAdd)) {
-            return this._config.clearSearchOnAdd;
-        }
-        return this.closeOnSelect;
+        return this._clearSearchOnAdd ?? this._config.clearSearchOnAdd ?? this.closeOnSelect;
     }
     set clearSearchOnAdd(value) {
         this._clearSearchOnAdd = value;
     }
     get deselectOnClick() {
-        if (isDefined(this._deselectOnClick)) {
-            return this._deselectOnClick;
-        }
-        else if (isDefined(this._config.deselectOnClick)) {
-            return this._config.deselectOnClick;
-        }
-        return this.multiple;
+        return this._deselectOnClick ?? this._config.deselectOnClick ?? this.multiple;
     }
     set deselectOnClick(value) {
         this._deselectOnClick = value;
@@ -2256,6 +2246,22 @@ class NgSelect {
         const term = this.searchTerm?.trim();
         return term && term.length >= this.minTermLength;
     }
+    get showClearButton() {
+        return this.clearable && (this.hasValue || this.searchTerm) && !this.disabled;
+    }
+    get showNoItemsFound() {
+        const empty = this.itemsList.filteredItems.length === 0;
+        return (((empty && !this._isTypeahead && !this.loading) ||
+            (empty && this._isTypeahead && this._validTerm && !this.loading)) &&
+            !this.showAddTag);
+    }
+    get showTypeToSearch() {
+        const empty = this.itemsList.filteredItems.length === 0;
+        return empty && this._isTypeahead && !this._validTerm && !this.loading;
+    }
+    get listboxId() {
+        return `${this._uid}-listbox`;
+    }
     constructor() {
         this._cdr = inject(ChangeDetectorRef);
         this._elementRef = inject(ElementRef);
@@ -2264,17 +2270,26 @@ class NgSelect {
         this.autoFocus = inject(new HostAttributeToken('autofocus'), { optional: true });
         this.classes = inject(new HostAttributeToken('class'), { optional: true });
         this._classList = {};
-        this.fixedPlaceholder = false;
-        this.dropdownPosition = 'auto';
+        this._uid = `ng-select-${nextUniqueId++}`;
+        this.bindLabel = this._config.bindLabel;
+        this.bindValue = this._config.bindValue;
+        this.placeholder = this._config.placeholder;
+        this.fixedPlaceholder = this._config.fixedPlaceholder ?? false;
+        this.appendTo = this._config.appendTo;
+        this.panelPosition = 'auto';
         this.readonly = false;
         this.multiple = false;
         this.searchable = true;
         this.clearable = true;
+        this.clearOnBackspace = true;
+        this.clearAllText = this._config.clearAllText;
         this.loading = false;
+        this.loadingText = this._config.loadingText;
         this.closeOnSelect = true;
-        this.clearOnBackspace = true;
         this.hideSelected = false;
         this.selectOnTab = false;
+        this.openOnEnter = this._config.openOnEnter;
+        this.virtualScroll = this._config.virtualScroll;
         this.bufferAmount = 4;
         this.selectableGroup = false;
         this.selectableGroupAsModel = true;
@@ -2285,14 +2300,17 @@ class NgSelect {
         this.markFirst = true;
         this.preventToggleOnRightClick = false;
         this.addTag = false;
+        this.addTagText = this._config.addTagText;
+        this.notFoundText = this._config.notFoundText;
+        this.typeToSearchText = this._config.typeToSearchText;
         this.searchFn = null;
         this.keyDownFn = (_) => true;
         this.trackByFn = null;
-        this.labelForId = null;
-        this.ariaLabelDropdown = 'Options List';
+        this.appearance = this._config.appearance;
         this.inputAttrs = {};
         // isOpen should allow undefined value, so avoid using booleanAttribute!
         this.isOpen = false;
+        this._inputId = '';
         this._items = [];
         this._disabled = false;
         // output events
@@ -2307,12 +2325,11 @@ class NgSelect {
         this.removeEvent = new EventEmitter();
         this.scroll = new EventEmitter();
         this.scrollToEnd = new EventEmitter();
-        this.dropdownId = newId();
+        this.itemsList = new ItemsList(this, this.newSelectionModel?.() ?? DefaultSelectionModelFactory());
         this.element = this._elementRef.nativeElement;
         this.viewPortItems = [];
         this.searchTerm = null;
         this.escapeHTML = true;
-        this.tabFocusOnClear = true;
         this._pressedKeys = [];
         this._isComposing = false;
         this._defaultLabel = 'label';
@@ -2330,9 +2347,7 @@ class NgSelect {
             const option = this.selectedItems.find(x => x.value === item);
             this.unselect(option);
         };
-        this._mergeGlobalConfig();
         this.classes?.split(/\s+/).forEach(c => (this._classList[c] = true));
-        this.itemsList = new ItemsList(this, this.newSelectionModel ? this.newSelectionModel() : DefaultSelectionModelFactory());
     }
     ngOnInit() {
         this._handleKeyPresses();
@@ -2356,7 +2371,6 @@ class NgSelect {
         if (changes['inputAttrs']) {
             this._setInputAttributes();
         }
-        this._setTabFocusOnClear();
     }
     ngAfterViewInit() {
         if (!this._itemsAreUsed) {
@@ -2584,7 +2598,7 @@ class NgSelect {
     selectTag() {
         let tag;
         if (isFunction(this.addTag)) {
-            tag = this.addTag(this.searchTerm);
+            tag = this.addTag(this.searchTerm || '');
         }
         else {
             tag = this._primitive ? this.searchTerm : { [this.bindLabel]: this.searchTerm };
@@ -2599,25 +2613,6 @@ class NgSelect {
             this.select(handleTag(tag));
         }
     }
-    showClear() {
-        return this.clearable && (this.hasValue || this.searchTerm) && !this.disabled;
-    }
-    focusOnClear() {
-        this.blur();
-        if (this.clearButton) {
-            this.clearButton.nativeElement.focus();
-        }
-    }
-    showNoItemsFound() {
-        const empty = this.itemsList.filteredItems.length === 0;
-        return (((empty && !this._isTypeahead && !this.loading) ||
-            (empty && this._isTypeahead && this._validTerm && !this.loading)) &&
-            !this.showAddTag);
-    }
-    showTypeToSearch() {
-        const empty = this.itemsList.filteredItems.length === 0;
-        return empty && this._isTypeahead && !this._validTerm && !this.loading;
-    }
     onCompositionStart() {
         this._isComposing = true;
     }
@@ -2818,12 +2813,6 @@ class NgSelect {
             input.setAttribute(key, attributes[key]);
         }
     }
-    _setTabFocusOnClear() {
-        this.tabFocusOnClear = isDefined(this.tabFocusOnClearButton)
-            ? !!this.tabFocusOnClearButton
-            : this._config.tabFocusOnClear;
-        this._cdr.markForCheck();
-    }
     _updateNgModel() {
         const model = [];
         for (const item of this.selectedItems) {
@@ -2887,11 +2876,7 @@ class NgSelect {
     }
     _handleTab(e) {
         if (this.isOpen === false) {
-            if (this.showClear() && !e.shiftKey && this.tabFocusOnClear) {
-                this.focusOnClear();
-                e.preventDefault();
-            }
-            else if (!this.addTag) {
+            if (!this.addTag) {
                 return;
             }
         }
@@ -2980,52 +2965,14 @@ class NgSelect {
             this.clearModel();
         }
     }
-    _mergeGlobalConfig() {
-        this.placeholder = this.placeholder || this._config.placeholder;
-        this.fixedPlaceholder = this.fixedPlaceholder || this._config.fixedPlaceholder;
-        this.notFoundText = this.notFoundText || this._config.notFoundText;
-        this.typeToSearchText = this.typeToSearchText || this._config.typeToSearchText;
-        this.addTagText = this.addTagText || this._config.addTagText;
-        this.loadingText = this.loadingText || this._config.loadingText;
-        this.clearAllText = this.clearAllText || this._config.clearAllText;
-        this.virtualScroll = this.getVirtualScroll(this._config);
-        this.openOnEnter = isDefined(this.openOnEnter) ? this.openOnEnter : this._config.openOnEnter;
-        this.appendTo = this.appendTo || this._config.appendTo;
-        this.bindValue = this.bindValue || this._config.bindValue;
-        this.bindLabel = this.bindLabel || this._config.bindLabel;
-        this.appearance = this.appearance || this._config.appearance;
-        this._setTabFocusOnClear();
-    }
-    /**
-     * Gets virtual scroll value from input or from config
-     *
-     *  @param config NgSelectConfig object
-     *
-     *  @returns `true` if virtual scroll is enabled, `false` otherwise
-     */
-    getVirtualScroll(config) {
-        return isDefined(this.virtualScroll)
-            ? this.virtualScroll
-            : this.isVirtualScrollDisabled(config);
-    }
-    /**
-     * Gets disableVirtualScroll value from input or from config
-     *
-     *  @param config NgSelectConfig object
-     *
-     *  @returns `true` if disableVirtualScroll is enabled, `false` otherwise
-     */
-    isVirtualScrollDisabled(config) {
-        return isDefined(config.disableVirtualScroll) ? !config.disableVirtualScroll : false;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵ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", dropdownPosition: "dropdownPosition", readonly: ["readonly", "readonly", booleanAttribute], multiple: ["multiple", "multiple", booleanAttribute], searchable: ["searchable", "searchable", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], clearAllText: "clearAllText", tabFocusOnClearButton: "tabFocusOnClearButton", loading: ["loading", "loading", booleanAttribute], loadingText: "loadingText", closeOnSelect: ["closeOnSelect", "closeOnSelect", booleanAttribute], clearOnBackspace: ["clearOnBackspace", "clearOnBackspace", 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], labelForId: "labelForId", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", ariaLabelDropdown: "ariaLabelDropdown", inputAttrs: "inputAttrs", isOpen: "isOpen", panelClass: "panelClass", items: "items", compareWith: "compareWith", clearSearchOnAdd: "clearSearchOnAdd", deselectOnClick: "deselectOnClick" }, 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 { this.ɵ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", 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", isOpen: "isOpen", panelClass: "panelClass", inputId: "inputId", items: "items", compareWith: "compareWith", clearSearchOnAdd: "clearSearchOnAdd", deselectOnClick: "deselectOnClick" }, 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/role-has-required-aria -->\n<!-- 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]=\"labelForId\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        [attr.aria-expanded]=\"isOpen\"\n        [attr.aria-controls]=\"isOpen ? dropdownId : 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 (showClear()) {\n    @if (clearButtonTemplate) {\n      <ng-container [ngTemplateOutlet]=\"clearButtonTemplate\" />\n    } @else {\n      <span\n        #clearButton\n        class=\"ng-clear-wrapper\"\n        [title]=\"clearAllText\"\n        [attr.tabindex]=\"tabFocusOnClear ? 0 : -1\"\n        role=\"button\"\n      >\n        <span class=\"ng-clear\">\u00D7</span>\n      </span>\n    }\n  }\n\n  <span class=\"ng-arrow-wrapper\">\n    <span class=\"ng-arrow\"></span>\n  </span>\n</div>\n\n@if (isOpen) {\n  <ng-dropdown-panel\n    class=\"ng-dropdown-panel\"\n    [class.ng-select-multiple]=\"multiple\"\n    [class]=\"appendTo ? _classList : null\"\n    [id]=\"dropdownId\"\n    [ariaLabelDropdown]=\"ariaLabelDropdown\"\n    [virtualScroll]=\"virtualScroll\"\n    [bufferAmount]=\"bufferAmount\"\n    [appendTo]=\"appendTo\"\n    [position]=\"dropdownPosition\"\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    <ng-container>\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-selected]=\"item.selected\"\n          [attr.aria-setsize]=\"itemsList.filteredItems.length\"\n          [attr.aria-posinset]=\"item.index! + 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      @if (showAddTag) {\n        <div\n          class=\"ng-option\"\n          [class.ng-option-marked]=\"!itemsList.markedItem\"\n          (click)=\"selectTag()\"\n          (mouseover)=\"itemsList.unmarkItem()\"\n          role=\"option\"\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    </ng-container>\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 [hidden]{display:none}.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: ["items", "markedItem", "position", "appendTo", "bufferAmount", "virtualScroll", "headerTemplate", "footerTemplate", "filterValue", "ariaLabelDropdown"], outputs: ["update", "scroll", "scrollToEnd", "outsideClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], 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/role-has-required-aria -->\n<!-- 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-expanded]=\"isOpen\"\n        [attr.aria-controls]=\"isOpen ? listboxId : null\"\n        [attr.aria-activedescendant]=\"isOpen ? itemsList.markedItem?.htmlId : null\"\n        aria-haspopup=\"listbox\"\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  <span class=\"ng-arrow-wrapper\" aria-hidden=\"true\">\n    <span class=\"ng-arrow\"></span>\n  </span>\n</div>\n\n@if (isOpen) {\n  <ng-dropdown-panel\n    class=\"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-selected]=\"item.selected\"\n        [attr.aria-setsize]=\"itemsList.filteredItems.length\"\n        [attr.aria-posinset]=\"item.index! + 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        (click)=\"selectTag()\"\n        (mouseover)=\"itemsList.unmarkItem()\"\n        role=\"option\"\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 [hidden]{display:none}.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelect, decorators: [{
             type: Component,
@@ -3047,7 +2994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                             useExisting: forwardRef(() => NgSelect),
                             multi: true,
                         },
-                    ], template: "<!-- eslint-disable @angular-eslint/template/role-has-required-aria -->\n<!-- 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]=\"labelForId\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        [attr.aria-expanded]=\"isOpen\"\n        [attr.aria-controls]=\"isOpen ? dropdownId : 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 (showClear()) {\n    @if (clearButtonTemplate) {\n      <ng-container [ngTemplateOutlet]=\"clearButtonTemplate\" />\n    } @else {\n      <span\n        #clearButton\n        class=\"ng-clear-wrapper\"\n        [title]=\"clearAllText\"\n        [attr.tabindex]=\"tabFocusOnClear ? 0 : -1\"\n        role=\"button\"\n      >\n        <span class=\"ng-clear\">\u00D7</span>\n      </span>\n    }\n  }\n\n  <span class=\"ng-arrow-wrapper\">\n    <span class=\"ng-arrow\"></span>\n  </span>\n</div>\n\n@if (isOpen) {\n  <ng-dropdown-panel\n    class=\"ng-dropdown-panel\"\n    [class.ng-select-multiple]=\"multiple\"\n    [class]=\"appendTo ? _classList : null\"\n    [id]=\"dropdownId\"\n    [ariaLabelDropdown]=\"ariaLabelDropdown\"\n    [virtualScroll]=\"virtualScroll\"\n    [bufferAmount]=\"bufferAmount\"\n    [appendTo]=\"appendTo\"\n    [position]=\"dropdownPosition\"\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    <ng-container>\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-selected]=\"item.selected\"\n          [attr.aria-setsize]=\"itemsList.filteredItems.length\"\n          [attr.aria-posinset]=\"item.index! + 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      @if (showAddTag) {\n        <div\n          class=\"ng-option\"\n          [class.ng-option-marked]=\"!itemsList.markedItem\"\n          (click)=\"selectTag()\"\n          (mouseover)=\"itemsList.unmarkItem()\"\n          role=\"option\"\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    </ng-container>\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 [hidden]{display:none}.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/role-has-required-aria -->\n<!-- 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-expanded]=\"isOpen\"\n        [attr.aria-controls]=\"isOpen ? listboxId : null\"\n        [attr.aria-activedescendant]=\"isOpen ? itemsList.markedItem?.htmlId : null\"\n        aria-haspopup=\"listbox\"\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  <span class=\"ng-arrow-wrapper\" aria-hidden=\"true\">\n    <span class=\"ng-arrow\"></span>\n  </span>\n</div>\n\n@if (isOpen) {\n  <ng-dropdown-panel\n    class=\"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-selected]=\"item.selected\"\n        [attr.aria-setsize]=\"itemsList.filteredItems.length\"\n        [attr.aria-posinset]=\"item.index! + 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        (click)=\"selectTag()\"\n        (mouseover)=\"itemsList.unmarkItem()\"\n        role=\"option\"\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 [hidden]{display:none}.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"] }]
         }], ctorParameters: () => [], propDecorators: { bindLabel: [{
                 type: Input
             }], bindValue: [{
@@ -3058,7 +3005,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                 type: Input
             }], appendTo: [{
                 type: Input
-            }], dropdownPosition: [{
+            }], panelPosition: [{
                 type: Input
             }], readonly: [{
                 type: Input,
@@ -3072,10 +3019,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
             }], clearable: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], clearOnBackspace: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], clearAllText: [{
                 type: Input
-            }], tabFocusOnClearButton: [{
-                type: Input
             }], loading: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -3084,9 +3032,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
             }], closeOnSelect: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], clearOnBackspace: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], hideSelected: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -3151,22 +3096,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
             }], tabIndex: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
-            }], labelForId: [{
-                type: Input
             }], ariaLabel: [{
                 type: Input
             }], ariaLabelledby: [{
                 type: Input
             }], ariaDescribedby: [{
                 type: Input
-            }], ariaLabelDropdown: [{
-                type: Input
             }], inputAttrs: [{
                 type: Input
             }], isOpen: [{
                 type: Input
             }], panelClass: [{
                 type: Input
+            }], inputId: [{
+                type: Input
             }], items: [{
                 type: Input
             }], compareWith: [{