@ng-matero/ng-select 0.5.2 → 0.6.1

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

@@ -1,6 +1,6 @@
-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 { Injectable, EventEmitter, inject, 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 { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -63,11 +63,10 @@ class NgDropdownPanelUtils {
         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' });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgDropdownPanelUtils });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgDropdownPanelUtils, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+            type: Injectable
         }] });
 
 const unescapedHTMLExp = /[&<>"']/g;
@@ -117,6 +116,7 @@ class NgDropdownPanel {
     appendTo;
     bufferAmount = 4;
     virtualScroll = false;
+    multiple = false;
     headerTemplate;
     footerTemplate;
     filterValue = null;
@@ -261,23 +261,28 @@ class NgDropdownPanel {
         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));
+                .subscribe(e => this._checkToClose(e));
         });
     }
-    _checkToClose($event) {
-        if (this._select.contains($event.target) || this._dropdown.contains($event.target)) {
+    _checkToClose(e) {
+        if (this._select.contains(e.target) || this._dropdown.contains(e.target)) {
+            return;
+        }
+        const path = e.path || (e.composedPath && e.composedPath());
+        if (e.target && e.target.shadowRoot && path && path[0] && this._select.contains(path[0])) {
             return;
         }
-        const path = $event.path || ($event.composedPath && $event.composedPath());
-        if ($event.target &&
-            $event.target.shadowRoot &&
-            path &&
-            path[0] &&
-            this._select.contains(path[0])) {
+        if (this._coordinatesWithin(e, this._dropdown) || this._coordinatesWithin(e, this._select)) {
             return;
         }
         this._zone.run(() => this.outsideClick.emit());
     }
+    _coordinatesWithin(e, element) {
+        const clickX = e.clientX;
+        const clickY = e.clientY;
+        const rect = element.getBoundingClientRect();
+        return (clickX >= rect.left && clickX <= rect.right && clickY >= rect.top && clickY <= rect.bottom);
+    }
     _onItemsChange(items, firstChange) {
         this.items = items || [];
         this._scrollToEndFired = false;
@@ -447,7 +452,7 @@ class NgDropdownPanel {
         });
     }
     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: `
+    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], 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-dropdown-panel" }, providers: [NgDropdownPanelUtils], 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
@@ -461,12 +466,17 @@ class NgDropdownPanel {
       class="ng-dropdown-panel-items"
       [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">
+      <div
+        #scrollContent
+        [class.ng-select-virtual-scroll-content]="virtualScroll && items.length"
+        role="presentation"
+      >
         <ng-content />
       </div>
+      <div #scrollSpacer [class.ng-select-virtual-scroll-spacer]="virtualScroll"></div>
     </div>
     @if (footerTemplate) {
       <div class="ng-dropdown-footer">
@@ -496,12 +506,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
       class="ng-dropdown-panel-items"
       [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">
+      <div
+        #scrollContent
+        [class.ng-select-virtual-scroll-content]="virtualScroll && items.length"
+        role="presentation"
+      >
         <ng-content />
       </div>
+      <div #scrollSpacer [class.ng-select-virtual-scroll-spacer]="virtualScroll"></div>
     </div>
     @if (footerTemplate) {
       <div class="ng-dropdown-footer">
@@ -514,10 +529,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
   `,
                     imports: [NgTemplateOutlet],
                     host: {
-                        class: 'ng-dropdown-panel',
+                        'class': 'ng-dropdown-panel',
+                        '[class.ng-select-multiple]': 'multiple',
                     },
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [NgDropdownPanelUtils],
                 }]
         }], propDecorators: { listboxId: [{
                 type: Input
@@ -534,6 +551,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
             }], virtualScroll: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], multiple: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], headerTemplate: [{
                 type: Input
             }], footerTemplate: [{
@@ -1628,9 +1648,7 @@ class ItemsList {
             return;
         }
         this._filteredItems = [];
-        term = this._ngSelect.searchFn
-            ? term
-            : stripSpecialChars(term).toLocaleLowerCase();
+        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())) {
@@ -1717,6 +1735,7 @@ class ItemsList {
             index,
             label: isDefined(label) ? label.toString() : '',
             value,
+            viewValue: item.viewValue || label,
             disabled: item.disabled,
             htmlId: `${this._ngSelect._uid}-option-${index}`,
         };
@@ -2150,10 +2169,12 @@ 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;
-    fixedPlaceholder = this._config.fixedPlaceholder ?? false;
+    fixedPlaceholder = this._config.fixedPlaceholder;
     appendTo = this._config.appendTo;
     panelPosition = 'auto';
     panelDisabled = false;
@@ -2191,10 +2212,16 @@ class NgSelect {
     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 +2238,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;
     }
@@ -2303,6 +2332,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;
     }
@@ -2349,9 +2381,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) => {
@@ -2564,6 +2593,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 +2629,6 @@ class NgSelect {
         }
         this._onSelectionChanged();
     }
-    focus() {
-        this.searchInput.nativeElement.focus();
-    }
-    blur() {
-        this.searchInput.nativeElement.blur();
-    }
     unselect(item) {
         if (!item) {
             return;
@@ -2714,6 +2743,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,13 +3011,13 @@ 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", appearance: "appearance", 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: 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\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  <div [attr.id]=\"_viewValuesId\">{{ selectedViewValuesStr }}</div>\n</div>\n\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]=\"appendTo ? _classList : null\"\n    [multiple]=\"multiple\"\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 ?? 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-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", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block}.ng-select.ng-select-opened .ng-select-container{z-index:1010}.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}.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]{width:0;-webkit-user-select:unset;user-select:unset}.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;right:0}.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}.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}.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:1080;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;overflow:hidden auto;-webkit-overflow-scrolling:touch}.ng-select-virtual-scroll-content{position:absolute;top:0;left:0;width:100%;contain:content}.ng-select-virtual-scroll-spacer{width:1px;opacity:0}.ng-select-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", "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,
@@ -3009,7 +3039,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  <div [attr.id]=\"_viewValuesId\">{{ selectedViewValuesStr }}</div>\n</div>\n\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]=\"appendTo ? _classList : null\"\n    [multiple]=\"multiple\"\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 ?? 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-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", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block}.ng-select.ng-select-opened .ng-select-container{z-index:1010}.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}.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]{width:0;-webkit-user-select:unset;user-select:unset}.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;right:0}.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}.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}.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:1080;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;overflow:hidden auto;-webkit-overflow-scrolling:touch}.ng-select-virtual-scroll-content{position:absolute;top:0;left:0;width:100%;contain:content}.ng-select-virtual-scroll-spacer{width:1px;opacity:0}.ng-select-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: [{
@@ -3114,14 +3144,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
             }], 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: [{