@ng-select/ng-select 20.3.3 → 20.3.5

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

@@ -1711,7 +1711,7 @@ class NgDropdownPanelComponent {
             return;
         }
         this._zone.runOutsideAngular(() => {
-            merge(fromEvent(this._document, 'touchstart', { capture: true }), fromEvent(this._document, 'click', { capture: true }))
+            fromEvent(this._document, 'click', { capture: true })
                 .pipe(takeUntil(this._destroy$))
                 .subscribe(($event) => this._checkToClose($event));
         });
@@ -2939,7 +2939,7 @@ class NgSelectComponent {
                 multi: true,
             },
             NgDropdownPanelService,
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: NgOptionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "optgroupTemplate", first: true, predicate: NgOptgroupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: NgLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "multiLabelTemplate", first: true, predicate: NgMultiLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: NgHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: NgFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "notFoundTemplate", first: true, predicate: NgNotFoundTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: NgPlaceholderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "typeToSearchTemplate", first: true, predicate: NgTypeToSearchTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "loadingTextTemplate", first: true, predicate: NgLoadingTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "tagTemplate", first: true, predicate: NgTagTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: NgLoadingSpinnerTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "clearButtonTemplate", first: true, predicate: NgClearButtonTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "ngOptions", predicate: NgOptionComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: i0.forwardRef(() => NgDropdownPanelComponent), descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n\t(mousedown)=\"handleMousedown($event)\"\n\t[class.ng-appearance-outline]=\"appearance() === 'outline'\"\n\t[class.ng-has-value]=\"hasValue\"\n\tclass=\"ng-select-container\">\n\t<div class=\"ng-value-container\">\n\t\t@if ((selectedItems.length === 0 && !searchTerm) || (fixedPlaceholder() ?? config.fixedPlaceholder )) {\n\t\t\t<ng-template #defaultPlaceholderTemplate>\n\t\t\t\t<div class=\"ng-placeholder\">{{ placeholder() ?? config.placeholder }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template [ngTemplateOutlet]=\"placeholderTemplate() || defaultPlaceholderTemplate\"> </ng-template>\n\t\t}\n\n\t\t@if ((!multiLabelTemplate() || !multiple()) && selectedItems.length > 0) {\n\t\t\t@for (item of selectedItems; track trackByOption($index, item)) {\n\t\t\t\t<div [class.ng-value-disabled]=\"item.disabled\" class=\"ng-value\">\n\t\t\t\t\t<ng-template #defaultLabelTemplate>\n\t\t\t\t\t\t<span class=\"ng-value-icon left\" (click)=\"unselect(item)\" aria-hidden=\"true\">\u00D7</span>\n\t\t\t\t\t\t<span class=\"ng-value-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"labelTemplate() || defaultLabelTemplate\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item: item.value, clear: clearItem, label: item.label }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\n\t\t@if (multiple() && multiLabelTemplate() && selectedValues.length > 0) {\n\t\t\t<ng-template [ngTemplateOutlet]=\"multiLabelTemplate()\" [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\">\n\t\t\t</ng-template>\n\t\t}\n\n\t\t<div class=\"ng-input\">\n\t\t\t<input\n\t\t\t\t#searchInput\n\t\t\t\t(blur)=\"onInputBlur($event)\"\n\t\t\t\t(change)=\"$event.stopPropagation()\"\n\t\t\t\t(compositionend)=\"onCompositionEnd(searchInput.value)\"\n\t\t\t\t(compositionstart)=\"onCompositionStart()\"\n\t\t\t\t(focus)=\"onInputFocus($event)\"\n\t\t\t\t(input)=\"filter(searchInput.value)\"\n\t\t\t\t[attr.aria-activedescendant]=\"isOpen() ? itemsList?.markedItem?.htmlId : null\"\n\t\t\t\t[attr.aria-controls]=\"isOpen() ? dropdownId : null\"\n\t\t\t\t[attr.aria-expanded]=\"isOpen()\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel()\"\n\t\t\t\t[attr.id]=\"labelForId()\"\n\t\t\t\t[attr.tabindex]=\"tabIndex()\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[readOnly]=\"!searchable() || itemsList.maxItemsSelected\"\n\t\t\t\t[value]=\"searchTerm ?? ''\"\n\t\t\t\taria-autocomplete=\"list\"\n\t\t\t\trole=\"combobox\" />\n\t\t</div>\n\t</div>\n\n\t@if (loading()) {\n\t\t<ng-template #defaultLoadingSpinnerTemplate>\n\t\t\t<div class=\"ng-spinner-loader\"></div>\n\t\t</ng-template>\n\t\t<ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate() || defaultLoadingSpinnerTemplate\"></ng-template>\n\t}\n\n\t@if (showClear()) {\n\t\t@if (clearButtonTemplate()) {\n\t\t\t<ng-container [ngTemplateOutlet]=\"clearButtonTemplate()\"></ng-container>\n\t\t} @else {\n\t\t\t<span\n\t\t\t\tclass=\"ng-clear-wrapper\"\n\t\t\t\trole=\"button\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.tabindex]=\"tabFocusOnClear() ? 0 : -1\"\n\t\t\t\ttitle=\"{{ clearAllText() || config.clearAllText }}\"\n\t\t\t\t#clearButton\n\t\t\t\t(click)=\"handleClearClick($event)\">\n\t\t\t\t<span class=\"ng-clear\" aria-hidden=\"true\">\u00D7</span>\n\t\t\t</span>\n\t\t}\n\t}\n\n\t<span class=\"ng-arrow-wrapper\">\n\t\t<span class=\"ng-arrow\"></span>\n\t</span>\n</div>\n\n@if (isOpen()) {\n\t@let appendToValue = appendTo() || config.appendTo;\n\t<ng-dropdown-panel\n\t\tclass=\"ng-dropdown-panel\"\n\t\t[virtualScroll]=\"virtualScroll() ?? !config.disableVirtualScroll ?? false\"\n\t\t[bufferAmount]=\"bufferAmount()\"\n\t\t[appendTo]=\"appendToValue\"\n\t\t[position]=\"dropdownPosition()\"\n\t\t[headerTemplate]=\"headerTemplate()\"\n\t\t[footerTemplate]=\"footerTemplate()\"\n\t\t[filterValue]=\"searchTerm\"\n\t\t[items]=\"itemsList.filteredItems\"\n\t\t[markedItem]=\"itemsList.markedItem\"\n\t\t(update)=\"viewPortItems = $event\"\n\t\t(scroll)=\"scroll.emit($event)\"\n\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t(outsideClick)=\"close()\"\n\t\t[class.ng-select-multiple]=\"multiple()\"\n\t\t[class]=\"appendToValue ? (ngClass() ? ngClass() : classes) : null\"\n\t\t[id]=\"dropdownId\"\n\t\t[ariaLabelDropdown]=\"ariaLabelDropdown()\">\n\t\t<ng-container>\n\t\t\t@for (item of viewPortItems; track trackByOption($index, item)) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ng-option\"\n\t\t\t\t\t[attr.role]=\"item.children ? 'group' : 'option'\"\n\t\t\t\t\t(click)=\"toggleItem(item)\"\n\t\t\t\t\t(mouseover)=\"onItemHover(item)\"\n\t\t\t\t\t[class.ng-option-disabled]=\"item.disabled\"\n\t\t\t\t\t[class.ng-option-selected]=\"item.selected\"\n\t\t\t\t\t[class.ng-optgroup]=\"item.children\"\n\t\t\t\t\t[class.ng-option]=\"!item.children\"\n\t\t\t\t\t[class.ng-option-child]=\"!!item.parent\"\n\t\t\t\t\t[class.ng-option-marked]=\"item === itemsList.markedItem\"\n\t\t\t\t\t[attr.aria-selected]=\"item.selected\"\n\t\t\t\t\t[attr.id]=\"item?.htmlId\"\n\t\t\t\t\t[attr.aria-setsize]=\"itemsList.filteredItems.length\"\n\t\t\t\t\t[attr.aria-posinset]=\"item.index + 1\">\n\t\t\t\t\t<ng-template #defaultOptionTemplate>\n\t\t\t\t\t\t<span class=\"ng-option-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"\n\t\t\t\t\t\t\titem.children ? optgroupTemplate() || defaultOptionTemplate : optionTemplate() || defaultOptionTemplate\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item: item.value, item$: item, index: item.index, searchTerm: searchTerm }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (showAddTag) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ng-option\"\n\t\t\t\t\t[class.ng-option-marked]=\"!itemsList.markedItem\"\n\t\t\t\t\t(mouseover)=\"itemsList.unmarkItem()\"\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\t(click)=\"selectTag()\">\n\t\t\t\t\t<ng-template #defaultTagTemplate>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t><span class=\"ng-tag-label\">{{ addTagText() || config.addTagText }}</span\n\t\t\t\t\t\t\t>\"{{ searchTerm }}\"</span\n\t\t\t\t\t\t>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"tagTemplate() || defaultTagTemplate\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ng-container>\n\t\t@if (showNoItemsFound()) {\n\t\t\t<ng-template #defaultNotFoundTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ notFoundText() ?? config.notFoundText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"notFoundTemplate() || defaultNotFoundTemplate\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n\t\t\t</ng-template>\n\t\t}\n\t\t@if (showTypeToSearch()) {\n\t\t\t<ng-template #defaultTypeToSearchTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ typeToSearchText() || config.typeToSearchText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template [ngTemplateOutlet]=\"typeToSearchTemplate() || defaultTypeToSearchTemplate\"></ng-template>\n\t\t}\n\t\t@if (loading() && itemsList.filteredItems.length === 0) {\n\t\t\t<ng-template #defaultLoadingTextTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ loadingText() || config.loadingText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"loadingTextTemplate() || defaultLoadingTextTemplate\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n\t\t\t</ng-template>\n\t\t}\n\t</ng-dropdown-panel>\n}\n\n<!-- Always present aria-live region -->\n<div aria-atomic=\"true\" aria-live=\"polite\" class=\"ng-visually-hidden\" role=\"status\">\n\t@if (isOpen && showNoItemsFound()) {\n\t\t{{ notFoundText }}\n\t}\n</div>\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ng-select div,.ng-select input,.ng-select span{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ng-select [hidden]{display:none}.ng-select.ng-select-searchable .ng-select-container .ng-value-container .ng-input{opacity:1}.ng-select.ng-select-opened .ng-select-container{z-index:1001}.ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-placeholder,.ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-value{-webkit-user-select:none;user-select:none;cursor:default}.ng-select.ng-select-disabled .ng-arrow-wrapper{cursor:default}.ng-select.ng-select-filtered .ng-placeholder{display:none}.ng-select .ng-select-container{cursor:default;display:flex;outline:none;overflow:hidden;position:relative;width:100%}.ng-select .ng-select-container .ng-value-container{display:flex;flex:1}.ng-select .ng-select-container .ng-value-container .ng-input{opacity:0}.ng-select .ng-select-container .ng-value-container .ng-input>input{box-sizing:content-box;background:none transparent;border:0 none;box-shadow:none;outline:none;padding:0;cursor:default;width:100%}.ng-select .ng-select-container .ng-value-container .ng-input>input::-ms-clear{display:none}.ng-select .ng-select-container .ng-value-container .ng-input>input[readonly]{-webkit-user-select:unset;user-select:unset;width:0;padding:0}.ng-select.ng-select-single.ng-select-filtered .ng-select-container .ng-value-container .ng-value{visibility:hidden}.ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:none}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{position:absolute;left:0;width:100%}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-icon{display:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{flex-wrap:wrap}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{position:absolute}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:nowrap}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-icon{display:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{cursor:pointer}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{flex:1;z-index:2}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{z-index:1}.ng-select .ng-clear-wrapper{cursor:pointer;position:relative;width:17px;-webkit-user-select:none;user-select:none}.ng-select .ng-clear-wrapper .ng-clear{display:inline-block;font-size:18px;line-height:1;pointer-events:none}.ng-select .ng-spinner-loader{border-radius:50%;width:17px;height:17px;margin-right:5px;font-size:10px;position:relative;text-indent:-9999em;border-top:2px solid rgba(66,66,66,.2);border-right:2px solid rgba(66,66,66,.2);border-bottom:2px solid rgba(66,66,66,.2);border-left:2px solid #424242;transform:translateZ(0);animation:load8 .8s infinite linear}.ng-select .ng-spinner-loader:after{border-radius:50%;width:17px;height:17px}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ng-select .ng-arrow-wrapper{cursor:pointer;position:relative;text-align:center;-webkit-user-select:none;user-select:none}.ng-select .ng-arrow-wrapper .ng-arrow{pointer-events:none;display:inline-block;height:0;width:0;position:relative}.ng-dropdown-panel{box-sizing:border-box;position:absolute;opacity:0;width:100%;z-index:1050;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .ng-dropdown-panel-items{display:block;height:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;max-height:240px;overflow-y:auto}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{box-sizing:border-box;cursor:pointer;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-option-label:empty:before{content:\"\\200b\"}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .highlighted{font-weight:700;text-decoration:underline}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.disabled{cursor:default}.ng-dropdown-panel .scroll-host{overflow:hidden;overflow-y:auto;position:relative;display:block;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .scrollable-content{top:0;left:0;width:100%;height:100%;position:absolute}.ng-dropdown-panel .total-padding{width:1px;opacity:0}.ng-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgItemLabelDirective, selector: "[ngItemLabel]", inputs: ["ngItemLabel", "escape"] }, { kind: "component", type: NgDropdownPanelComponent, selector: "ng-dropdown-panel", inputs: ["items", "markedItem", "position", "appendTo", "bufferAmount", "virtualScroll", "headerTemplate", "footerTemplate", "filterValue", "ariaLabelDropdown"], outputs: ["update", "scroll", "scrollToEnd", "outsideClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: NgOptionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "optgroupTemplate", first: true, predicate: NgOptgroupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: NgLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "multiLabelTemplate", first: true, predicate: NgMultiLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: NgHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: NgFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "notFoundTemplate", first: true, predicate: NgNotFoundTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: NgPlaceholderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "typeToSearchTemplate", first: true, predicate: NgTypeToSearchTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "loadingTextTemplate", first: true, predicate: NgLoadingTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "tagTemplate", first: true, predicate: NgTagTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: NgLoadingSpinnerTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "clearButtonTemplate", first: true, predicate: NgClearButtonTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "ngOptions", predicate: NgOptionComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: i0.forwardRef(() => NgDropdownPanelComponent), descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div (mousedown)=\"handleMousedown($event)\" [class.ng-appearance-outline]=\"appearance() === 'outline'\"\n    [class.ng-has-value]=\"hasValue\" class=\"ng-select-container\">\n    <div class=\"ng-value-container\">\n        @if ((selectedItems.length === 0 && !searchTerm) || (fixedPlaceholder() ?? config.fixedPlaceholder)) {\n        <ng-template #defaultPlaceholderTemplate>\n            <div class=\"ng-placeholder\">{{ placeholder() ?? config.placeholder }}</div>\n        </ng-template>\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate() || defaultPlaceholderTemplate\"> </ng-template>\n        }\n\n        @if ((!multiLabelTemplate() || !multiple()) && selectedItems.length > 0) {\n        @for (item of selectedItems; track trackByOption($index, item)) {\n        <div [class.ng-value-disabled]=\"item.disabled\" class=\"ng-value\">\n            <ng-template #defaultLabelTemplate>\n                <span class=\"ng-value-icon left\" (click)=\"unselect(item)\" aria-hidden=\"true\">\u00D7</span>\n                <span class=\"ng-value-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n            </ng-template>\n            <ng-template [ngTemplateOutlet]=\"labelTemplate() || defaultLabelTemplate\"\n                [ngTemplateOutletContext]=\"{ item: item.value, clear: clearItem, label: item.label }\">\n            </ng-template>\n        </div>\n        }\n        }\n\n        @if (multiple() && multiLabelTemplate() && selectedValues.length > 0) {\n        <ng-template [ngTemplateOutlet]=\"multiLabelTemplate()\"\n            [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\">\n        </ng-template>\n        }\n\n        <div class=\"ng-input\">\n            <input #searchInput (blur)=\"onInputBlur($event)\" (change)=\"$event.stopPropagation()\"\n                (compositionend)=\"onCompositionEnd(searchInput.value)\" (compositionstart)=\"onCompositionStart()\"\n                (focus)=\"onInputFocus($event)\" (input)=\"filter(searchInput.value)\"\n                [attr.aria-activedescendant]=\"isOpen() ? itemsList?.markedItem?.htmlId : null\"\n                [attr.aria-controls]=\"isOpen() ? dropdownId : null\" [attr.aria-expanded]=\"isOpen()\"\n                [attr.aria-label]=\"ariaLabel()\" [attr.id]=\"labelForId()\" [attr.tabindex]=\"tabIndex()\"\n                [disabled]=\"disabled()\" [readOnly]=\"!searchable() || itemsList.maxItemsSelected\"\n                [value]=\"searchTerm ?? ''\" aria-autocomplete=\"list\" role=\"combobox\" />\n        </div>\n    </div>\n\n    @if (loading()) {\n    <ng-template #defaultLoadingSpinnerTemplate>\n        <div class=\"ng-spinner-loader\"></div>\n    </ng-template>\n    <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate() || defaultLoadingSpinnerTemplate\"></ng-template>\n    }\n\n    @if (showClear()) {\n    @if (clearButtonTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"clearButtonTemplate()\"></ng-container>\n    } @else {\n    <span class=\"ng-clear-wrapper\" role=\"button\" tabindex=\"0\" [attr.tabindex]=\"tabFocusOnClear() ? 0 : -1\"\n        title=\"{{ clearAllText() || config.clearAllText }}\" #clearButton (click)=\"handleClearClick($event)\">\n        <span class=\"ng-clear\" aria-hidden=\"true\">\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@let appendToValue = appendTo() || config.appendTo;\n<ng-dropdown-panel class=\"ng-dropdown-panel\" [virtualScroll]=\"virtualScroll() ?? !config.disableVirtualScroll ?? false\"\n    [bufferAmount]=\"bufferAmount()\" [appendTo]=\"appendToValue\" [position]=\"dropdownPosition()\"\n    [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\" [filterValue]=\"searchTerm\"\n    [items]=\"itemsList.filteredItems\" [markedItem]=\"itemsList.markedItem\" (update)=\"viewPortItems = $event\"\n    (scroll)=\"scroll.emit($event)\" (scrollToEnd)=\"scrollToEnd.emit($event)\" (outsideClick)=\"close()\"\n    [class.ng-select-multiple]=\"multiple()\" [class]=\"appendToValue ? (ngClass() ? ngClass() : classes) : null\"\n    [id]=\"dropdownId\" [ariaLabelDropdown]=\"ariaLabelDropdown()\">\n    <ng-container>\n        @for (item of viewPortItems; track trackByOption($index, item)) {\n        <div class=\"ng-option\" [attr.role]=\"item.children ? 'group' : 'option'\" (click)=\"toggleItem(item)\"\n            (mouseover)=\"onItemHover(item)\" [class.ng-option-disabled]=\"item.disabled\"\n            [class.ng-option-selected]=\"item.selected\" [class.ng-optgroup]=\"item.children\"\n            [class.ng-option]=\"!item.children\" [class.ng-option-child]=\"!!item.parent\"\n            [class.ng-option-marked]=\"item === itemsList.markedItem\" [attr.aria-selected]=\"item.selected\"\n            [attr.id]=\"item?.htmlId\" [attr.aria-setsize]=\"itemsList.filteredItems.length\"\n            [attr.aria-posinset]=\"item.index + 1\">\n            <ng-template #defaultOptionTemplate>\n                <span class=\"ng-option-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n            </ng-template>\n            <ng-template [ngTemplateOutlet]=\"\n\t\t\t\t\t\t\titem.children ? optgroupTemplate() || defaultOptionTemplate : optionTemplate() || defaultOptionTemplate\n\t\t\t\t\t\t\" [ngTemplateOutletContext]=\"{ item: item.value, item$: item, index: item.index, searchTerm: searchTerm }\">\n            </ng-template>\n        </div>\n        }\n        @if (showAddTag) {\n        <div class=\"ng-option\" [class.ng-option-marked]=\"!itemsList.markedItem\" (mouseover)=\"itemsList.unmarkItem()\"\n            role=\"option\" (click)=\"selectTag()\">\n            <ng-template #defaultTagTemplate>\n                <span><span class=\"ng-tag-label\">{{ addTagText() || config.addTagText }}</span>\"{{ searchTerm }}\"</span>\n            </ng-template>\n            <ng-template [ngTemplateOutlet]=\"tagTemplate() || defaultTagTemplate\"\n                [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n            </ng-template>\n        </div>\n        }\n    </ng-container>\n    @if (showNoItemsFound()) {\n    <ng-template #defaultNotFoundTemplate>\n        <div class=\"ng-option ng-option-disabled\">{{ notFoundText() ?? config.notFoundText }}</div>\n    </ng-template>\n    <ng-template [ngTemplateOutlet]=\"notFoundTemplate() || defaultNotFoundTemplate\"\n        [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n    </ng-template>\n    }\n    @if (showTypeToSearch()) {\n    <ng-template #defaultTypeToSearchTemplate>\n        <div class=\"ng-option ng-option-disabled\">{{ typeToSearchText() || config.typeToSearchText }}</div>\n    </ng-template>\n    <ng-template [ngTemplateOutlet]=\"typeToSearchTemplate() || defaultTypeToSearchTemplate\"></ng-template>\n    }\n    @if (loading() && itemsList.filteredItems.length === 0) {\n    <ng-template #defaultLoadingTextTemplate>\n        <div class=\"ng-option ng-option-disabled\">{{ loadingText() || config.loadingText }}</div>\n    </ng-template>\n    <ng-template [ngTemplateOutlet]=\"loadingTextTemplate() || defaultLoadingTextTemplate\"\n        [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n    </ng-template>\n    }\n</ng-dropdown-panel>\n}\n\n<!-- Always present aria-live region -->\n<div aria-atomic=\"true\" aria-live=\"polite\" class=\"ng-visually-hidden\" role=\"status\">\n    @if (isOpen() && showNoItemsFound()) {\n    {{ notFoundText() ?? config.notFoundText }}\n    }\n</div>", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ng-select div,.ng-select input,.ng-select span{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ng-select [hidden]{display:none}.ng-select.ng-select-searchable .ng-select-container .ng-value-container .ng-input{opacity:1}.ng-select.ng-select-opened .ng-select-container{z-index:1001}.ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-placeholder,.ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-value{-webkit-user-select:none;user-select:none;cursor:default}.ng-select.ng-select-disabled .ng-arrow-wrapper{cursor:default}.ng-select.ng-select-filtered .ng-placeholder{display:none}.ng-select .ng-select-container{cursor:default;display:flex;outline:none;overflow:hidden;position:relative;width:100%}.ng-select .ng-select-container .ng-value-container{display:flex;flex:1}.ng-select .ng-select-container .ng-value-container .ng-input{opacity:0}.ng-select .ng-select-container .ng-value-container .ng-input>input{box-sizing:content-box;background:none transparent;border:0 none;box-shadow:none;outline:none;padding:0;cursor:default;width:100%}.ng-select .ng-select-container .ng-value-container .ng-input>input::-ms-clear{display:none}.ng-select .ng-select-container .ng-value-container .ng-input>input[readonly]{-webkit-user-select:unset;user-select:unset;width:0;padding:0}.ng-select.ng-select-single.ng-select-filtered .ng-select-container .ng-value-container .ng-value{visibility:hidden}.ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:none}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{position:absolute;left:0;width:100%}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-icon{display:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{flex-wrap:wrap}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{position:absolute}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:nowrap}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-icon{display:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{cursor:pointer}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{flex:1;z-index:2}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{z-index:1}.ng-select .ng-clear-wrapper{cursor:pointer;position:relative;width:17px;-webkit-user-select:none;user-select:none}.ng-select .ng-clear-wrapper .ng-clear{display:inline-block;font-size:18px;line-height:1;pointer-events:none}.ng-select .ng-spinner-loader{border-radius:50%;width:17px;height:17px;margin-right:5px;font-size:10px;position:relative;text-indent:-9999em;border-top:2px solid rgba(66,66,66,.2);border-right:2px solid rgba(66,66,66,.2);border-bottom:2px solid rgba(66,66,66,.2);border-left:2px solid #424242;transform:translateZ(0);animation:load8 .8s infinite linear}.ng-select .ng-spinner-loader:after{border-radius:50%;width:17px;height:17px}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ng-select .ng-arrow-wrapper{cursor:pointer;position:relative;text-align:center;-webkit-user-select:none;user-select:none}.ng-select .ng-arrow-wrapper .ng-arrow{pointer-events:none;display:inline-block;height:0;width:0;position:relative}.ng-dropdown-panel{box-sizing:border-box;position:absolute;opacity:0;width:100%;z-index:1050;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .ng-dropdown-panel-items{display:block;height:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;max-height:240px;overflow-y:auto}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{box-sizing:border-box;cursor:pointer;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-option-label:empty:before{content:\"\\200b\"}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .highlighted{font-weight:700;text-decoration:underline}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.disabled{cursor:default}.ng-dropdown-panel .scroll-host{overflow:hidden;overflow-y:auto;position:relative;display:block;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .scrollable-content{top:0;left:0;width:100%;height:100%;position:absolute}.ng-dropdown-panel .total-padding{width:1px;opacity:0}.ng-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgItemLabelDirective, selector: "[ngItemLabel]", inputs: ["ngItemLabel", "escape"] }, { kind: "component", type: NgDropdownPanelComponent, selector: "ng-dropdown-panel", inputs: ["items", "markedItem", "position", "appendTo", "bufferAmount", "virtualScroll", "headerTemplate", "footerTemplate", "filterValue", "ariaLabelDropdown"], outputs: ["update", "scroll", "scrollToEnd", "outsideClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgSelectComponent, decorators: [{
             type: Component,
@@ -2961,7 +2961,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                         '[class.ng-select-opened]': 'isOpen()',
                         '[class.ng-select-filtered]': 'filtered',
                         '[class.ng-select-disabled]': 'disabled()',
-                    }, template: "<div\n\t(mousedown)=\"handleMousedown($event)\"\n\t[class.ng-appearance-outline]=\"appearance() === 'outline'\"\n\t[class.ng-has-value]=\"hasValue\"\n\tclass=\"ng-select-container\">\n\t<div class=\"ng-value-container\">\n\t\t@if ((selectedItems.length === 0 && !searchTerm) || (fixedPlaceholder() ?? config.fixedPlaceholder )) {\n\t\t\t<ng-template #defaultPlaceholderTemplate>\n\t\t\t\t<div class=\"ng-placeholder\">{{ placeholder() ?? config.placeholder }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template [ngTemplateOutlet]=\"placeholderTemplate() || defaultPlaceholderTemplate\"> </ng-template>\n\t\t}\n\n\t\t@if ((!multiLabelTemplate() || !multiple()) && selectedItems.length > 0) {\n\t\t\t@for (item of selectedItems; track trackByOption($index, item)) {\n\t\t\t\t<div [class.ng-value-disabled]=\"item.disabled\" class=\"ng-value\">\n\t\t\t\t\t<ng-template #defaultLabelTemplate>\n\t\t\t\t\t\t<span class=\"ng-value-icon left\" (click)=\"unselect(item)\" aria-hidden=\"true\">\u00D7</span>\n\t\t\t\t\t\t<span class=\"ng-value-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"labelTemplate() || defaultLabelTemplate\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item: item.value, clear: clearItem, label: item.label }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\n\t\t@if (multiple() && multiLabelTemplate() && selectedValues.length > 0) {\n\t\t\t<ng-template [ngTemplateOutlet]=\"multiLabelTemplate()\" [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\">\n\t\t\t</ng-template>\n\t\t}\n\n\t\t<div class=\"ng-input\">\n\t\t\t<input\n\t\t\t\t#searchInput\n\t\t\t\t(blur)=\"onInputBlur($event)\"\n\t\t\t\t(change)=\"$event.stopPropagation()\"\n\t\t\t\t(compositionend)=\"onCompositionEnd(searchInput.value)\"\n\t\t\t\t(compositionstart)=\"onCompositionStart()\"\n\t\t\t\t(focus)=\"onInputFocus($event)\"\n\t\t\t\t(input)=\"filter(searchInput.value)\"\n\t\t\t\t[attr.aria-activedescendant]=\"isOpen() ? itemsList?.markedItem?.htmlId : null\"\n\t\t\t\t[attr.aria-controls]=\"isOpen() ? dropdownId : null\"\n\t\t\t\t[attr.aria-expanded]=\"isOpen()\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel()\"\n\t\t\t\t[attr.id]=\"labelForId()\"\n\t\t\t\t[attr.tabindex]=\"tabIndex()\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[readOnly]=\"!searchable() || itemsList.maxItemsSelected\"\n\t\t\t\t[value]=\"searchTerm ?? ''\"\n\t\t\t\taria-autocomplete=\"list\"\n\t\t\t\trole=\"combobox\" />\n\t\t</div>\n\t</div>\n\n\t@if (loading()) {\n\t\t<ng-template #defaultLoadingSpinnerTemplate>\n\t\t\t<div class=\"ng-spinner-loader\"></div>\n\t\t</ng-template>\n\t\t<ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate() || defaultLoadingSpinnerTemplate\"></ng-template>\n\t}\n\n\t@if (showClear()) {\n\t\t@if (clearButtonTemplate()) {\n\t\t\t<ng-container [ngTemplateOutlet]=\"clearButtonTemplate()\"></ng-container>\n\t\t} @else {\n\t\t\t<span\n\t\t\t\tclass=\"ng-clear-wrapper\"\n\t\t\t\trole=\"button\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.tabindex]=\"tabFocusOnClear() ? 0 : -1\"\n\t\t\t\ttitle=\"{{ clearAllText() || config.clearAllText }}\"\n\t\t\t\t#clearButton\n\t\t\t\t(click)=\"handleClearClick($event)\">\n\t\t\t\t<span class=\"ng-clear\" aria-hidden=\"true\">\u00D7</span>\n\t\t\t</span>\n\t\t}\n\t}\n\n\t<span class=\"ng-arrow-wrapper\">\n\t\t<span class=\"ng-arrow\"></span>\n\t</span>\n</div>\n\n@if (isOpen()) {\n\t@let appendToValue = appendTo() || config.appendTo;\n\t<ng-dropdown-panel\n\t\tclass=\"ng-dropdown-panel\"\n\t\t[virtualScroll]=\"virtualScroll() ?? !config.disableVirtualScroll ?? false\"\n\t\t[bufferAmount]=\"bufferAmount()\"\n\t\t[appendTo]=\"appendToValue\"\n\t\t[position]=\"dropdownPosition()\"\n\t\t[headerTemplate]=\"headerTemplate()\"\n\t\t[footerTemplate]=\"footerTemplate()\"\n\t\t[filterValue]=\"searchTerm\"\n\t\t[items]=\"itemsList.filteredItems\"\n\t\t[markedItem]=\"itemsList.markedItem\"\n\t\t(update)=\"viewPortItems = $event\"\n\t\t(scroll)=\"scroll.emit($event)\"\n\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t(outsideClick)=\"close()\"\n\t\t[class.ng-select-multiple]=\"multiple()\"\n\t\t[class]=\"appendToValue ? (ngClass() ? ngClass() : classes) : null\"\n\t\t[id]=\"dropdownId\"\n\t\t[ariaLabelDropdown]=\"ariaLabelDropdown()\">\n\t\t<ng-container>\n\t\t\t@for (item of viewPortItems; track trackByOption($index, item)) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ng-option\"\n\t\t\t\t\t[attr.role]=\"item.children ? 'group' : 'option'\"\n\t\t\t\t\t(click)=\"toggleItem(item)\"\n\t\t\t\t\t(mouseover)=\"onItemHover(item)\"\n\t\t\t\t\t[class.ng-option-disabled]=\"item.disabled\"\n\t\t\t\t\t[class.ng-option-selected]=\"item.selected\"\n\t\t\t\t\t[class.ng-optgroup]=\"item.children\"\n\t\t\t\t\t[class.ng-option]=\"!item.children\"\n\t\t\t\t\t[class.ng-option-child]=\"!!item.parent\"\n\t\t\t\t\t[class.ng-option-marked]=\"item === itemsList.markedItem\"\n\t\t\t\t\t[attr.aria-selected]=\"item.selected\"\n\t\t\t\t\t[attr.id]=\"item?.htmlId\"\n\t\t\t\t\t[attr.aria-setsize]=\"itemsList.filteredItems.length\"\n\t\t\t\t\t[attr.aria-posinset]=\"item.index + 1\">\n\t\t\t\t\t<ng-template #defaultOptionTemplate>\n\t\t\t\t\t\t<span class=\"ng-option-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"\n\t\t\t\t\t\t\titem.children ? optgroupTemplate() || defaultOptionTemplate : optionTemplate() || defaultOptionTemplate\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item: item.value, item$: item, index: item.index, searchTerm: searchTerm }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (showAddTag) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ng-option\"\n\t\t\t\t\t[class.ng-option-marked]=\"!itemsList.markedItem\"\n\t\t\t\t\t(mouseover)=\"itemsList.unmarkItem()\"\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\t(click)=\"selectTag()\">\n\t\t\t\t\t<ng-template #defaultTagTemplate>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t><span class=\"ng-tag-label\">{{ addTagText() || config.addTagText }}</span\n\t\t\t\t\t\t\t>\"{{ searchTerm }}\"</span\n\t\t\t\t\t\t>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"tagTemplate() || defaultTagTemplate\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ng-container>\n\t\t@if (showNoItemsFound()) {\n\t\t\t<ng-template #defaultNotFoundTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ notFoundText() ?? config.notFoundText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"notFoundTemplate() || defaultNotFoundTemplate\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n\t\t\t</ng-template>\n\t\t}\n\t\t@if (showTypeToSearch()) {\n\t\t\t<ng-template #defaultTypeToSearchTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ typeToSearchText() || config.typeToSearchText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template [ngTemplateOutlet]=\"typeToSearchTemplate() || defaultTypeToSearchTemplate\"></ng-template>\n\t\t}\n\t\t@if (loading() && itemsList.filteredItems.length === 0) {\n\t\t\t<ng-template #defaultLoadingTextTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ loadingText() || config.loadingText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"loadingTextTemplate() || defaultLoadingTextTemplate\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n\t\t\t</ng-template>\n\t\t}\n\t</ng-dropdown-panel>\n}\n\n<!-- Always present aria-live region -->\n<div aria-atomic=\"true\" aria-live=\"polite\" class=\"ng-visually-hidden\" role=\"status\">\n\t@if (isOpen && showNoItemsFound()) {\n\t\t{{ notFoundText }}\n\t}\n</div>\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ng-select div,.ng-select input,.ng-select span{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ng-select [hidden]{display:none}.ng-select.ng-select-searchable .ng-select-container .ng-value-container .ng-input{opacity:1}.ng-select.ng-select-opened .ng-select-container{z-index:1001}.ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-placeholder,.ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-value{-webkit-user-select:none;user-select:none;cursor:default}.ng-select.ng-select-disabled .ng-arrow-wrapper{cursor:default}.ng-select.ng-select-filtered .ng-placeholder{display:none}.ng-select .ng-select-container{cursor:default;display:flex;outline:none;overflow:hidden;position:relative;width:100%}.ng-select .ng-select-container .ng-value-container{display:flex;flex:1}.ng-select .ng-select-container .ng-value-container .ng-input{opacity:0}.ng-select .ng-select-container .ng-value-container .ng-input>input{box-sizing:content-box;background:none transparent;border:0 none;box-shadow:none;outline:none;padding:0;cursor:default;width:100%}.ng-select .ng-select-container .ng-value-container .ng-input>input::-ms-clear{display:none}.ng-select .ng-select-container .ng-value-container .ng-input>input[readonly]{-webkit-user-select:unset;user-select:unset;width:0;padding:0}.ng-select.ng-select-single.ng-select-filtered .ng-select-container .ng-value-container .ng-value{visibility:hidden}.ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:none}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{position:absolute;left:0;width:100%}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-icon{display:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{flex-wrap:wrap}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{position:absolute}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:nowrap}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-icon{display:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{cursor:pointer}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{flex:1;z-index:2}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{z-index:1}.ng-select .ng-clear-wrapper{cursor:pointer;position:relative;width:17px;-webkit-user-select:none;user-select:none}.ng-select .ng-clear-wrapper .ng-clear{display:inline-block;font-size:18px;line-height:1;pointer-events:none}.ng-select .ng-spinner-loader{border-radius:50%;width:17px;height:17px;margin-right:5px;font-size:10px;position:relative;text-indent:-9999em;border-top:2px solid rgba(66,66,66,.2);border-right:2px solid rgba(66,66,66,.2);border-bottom:2px solid rgba(66,66,66,.2);border-left:2px solid #424242;transform:translateZ(0);animation:load8 .8s infinite linear}.ng-select .ng-spinner-loader:after{border-radius:50%;width:17px;height:17px}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ng-select .ng-arrow-wrapper{cursor:pointer;position:relative;text-align:center;-webkit-user-select:none;user-select:none}.ng-select .ng-arrow-wrapper .ng-arrow{pointer-events:none;display:inline-block;height:0;width:0;position:relative}.ng-dropdown-panel{box-sizing:border-box;position:absolute;opacity:0;width:100%;z-index:1050;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .ng-dropdown-panel-items{display:block;height:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;max-height:240px;overflow-y:auto}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{box-sizing:border-box;cursor:pointer;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-option-label:empty:before{content:\"\\200b\"}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .highlighted{font-weight:700;text-decoration:underline}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.disabled{cursor:default}.ng-dropdown-panel .scroll-host{overflow:hidden;overflow-y:auto;position:relative;display:block;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .scrollable-content{top:0;left:0;width:100%;height:100%;position:absolute}.ng-dropdown-panel .total-padding{width:1px;opacity:0}.ng-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:nowrap}\n"] }]
+                    }, template: "<div (mousedown)=\"handleMousedown($event)\" [class.ng-appearance-outline]=\"appearance() === 'outline'\"\n    [class.ng-has-value]=\"hasValue\" class=\"ng-select-container\">\n    <div class=\"ng-value-container\">\n        @if ((selectedItems.length === 0 && !searchTerm) || (fixedPlaceholder() ?? config.fixedPlaceholder)) {\n        <ng-template #defaultPlaceholderTemplate>\n            <div class=\"ng-placeholder\">{{ placeholder() ?? config.placeholder }}</div>\n        </ng-template>\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate() || defaultPlaceholderTemplate\"> </ng-template>\n        }\n\n        @if ((!multiLabelTemplate() || !multiple()) && selectedItems.length > 0) {\n        @for (item of selectedItems; track trackByOption($index, item)) {\n        <div [class.ng-value-disabled]=\"item.disabled\" class=\"ng-value\">\n            <ng-template #defaultLabelTemplate>\n                <span class=\"ng-value-icon left\" (click)=\"unselect(item)\" aria-hidden=\"true\">\u00D7</span>\n                <span class=\"ng-value-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n            </ng-template>\n            <ng-template [ngTemplateOutlet]=\"labelTemplate() || defaultLabelTemplate\"\n                [ngTemplateOutletContext]=\"{ item: item.value, clear: clearItem, label: item.label }\">\n            </ng-template>\n        </div>\n        }\n        }\n\n        @if (multiple() && multiLabelTemplate() && selectedValues.length > 0) {\n        <ng-template [ngTemplateOutlet]=\"multiLabelTemplate()\"\n            [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\">\n        </ng-template>\n        }\n\n        <div class=\"ng-input\">\n            <input #searchInput (blur)=\"onInputBlur($event)\" (change)=\"$event.stopPropagation()\"\n                (compositionend)=\"onCompositionEnd(searchInput.value)\" (compositionstart)=\"onCompositionStart()\"\n                (focus)=\"onInputFocus($event)\" (input)=\"filter(searchInput.value)\"\n                [attr.aria-activedescendant]=\"isOpen() ? itemsList?.markedItem?.htmlId : null\"\n                [attr.aria-controls]=\"isOpen() ? dropdownId : null\" [attr.aria-expanded]=\"isOpen()\"\n                [attr.aria-label]=\"ariaLabel()\" [attr.id]=\"labelForId()\" [attr.tabindex]=\"tabIndex()\"\n                [disabled]=\"disabled()\" [readOnly]=\"!searchable() || itemsList.maxItemsSelected\"\n                [value]=\"searchTerm ?? ''\" aria-autocomplete=\"list\" role=\"combobox\" />\n        </div>\n    </div>\n\n    @if (loading()) {\n    <ng-template #defaultLoadingSpinnerTemplate>\n        <div class=\"ng-spinner-loader\"></div>\n    </ng-template>\n    <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate() || defaultLoadingSpinnerTemplate\"></ng-template>\n    }\n\n    @if (showClear()) {\n    @if (clearButtonTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"clearButtonTemplate()\"></ng-container>\n    } @else {\n    <span class=\"ng-clear-wrapper\" role=\"button\" tabindex=\"0\" [attr.tabindex]=\"tabFocusOnClear() ? 0 : -1\"\n        title=\"{{ clearAllText() || config.clearAllText }}\" #clearButton (click)=\"handleClearClick($event)\">\n        <span class=\"ng-clear\" aria-hidden=\"true\">\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@let appendToValue = appendTo() || config.appendTo;\n<ng-dropdown-panel class=\"ng-dropdown-panel\" [virtualScroll]=\"virtualScroll() ?? !config.disableVirtualScroll ?? false\"\n    [bufferAmount]=\"bufferAmount()\" [appendTo]=\"appendToValue\" [position]=\"dropdownPosition()\"\n    [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\" [filterValue]=\"searchTerm\"\n    [items]=\"itemsList.filteredItems\" [markedItem]=\"itemsList.markedItem\" (update)=\"viewPortItems = $event\"\n    (scroll)=\"scroll.emit($event)\" (scrollToEnd)=\"scrollToEnd.emit($event)\" (outsideClick)=\"close()\"\n    [class.ng-select-multiple]=\"multiple()\" [class]=\"appendToValue ? (ngClass() ? ngClass() : classes) : null\"\n    [id]=\"dropdownId\" [ariaLabelDropdown]=\"ariaLabelDropdown()\">\n    <ng-container>\n        @for (item of viewPortItems; track trackByOption($index, item)) {\n        <div class=\"ng-option\" [attr.role]=\"item.children ? 'group' : 'option'\" (click)=\"toggleItem(item)\"\n            (mouseover)=\"onItemHover(item)\" [class.ng-option-disabled]=\"item.disabled\"\n            [class.ng-option-selected]=\"item.selected\" [class.ng-optgroup]=\"item.children\"\n            [class.ng-option]=\"!item.children\" [class.ng-option-child]=\"!!item.parent\"\n            [class.ng-option-marked]=\"item === itemsList.markedItem\" [attr.aria-selected]=\"item.selected\"\n            [attr.id]=\"item?.htmlId\" [attr.aria-setsize]=\"itemsList.filteredItems.length\"\n            [attr.aria-posinset]=\"item.index + 1\">\n            <ng-template #defaultOptionTemplate>\n                <span class=\"ng-option-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n            </ng-template>\n            <ng-template [ngTemplateOutlet]=\"\n\t\t\t\t\t\t\titem.children ? optgroupTemplate() || defaultOptionTemplate : optionTemplate() || defaultOptionTemplate\n\t\t\t\t\t\t\" [ngTemplateOutletContext]=\"{ item: item.value, item$: item, index: item.index, searchTerm: searchTerm }\">\n            </ng-template>\n        </div>\n        }\n        @if (showAddTag) {\n        <div class=\"ng-option\" [class.ng-option-marked]=\"!itemsList.markedItem\" (mouseover)=\"itemsList.unmarkItem()\"\n            role=\"option\" (click)=\"selectTag()\">\n            <ng-template #defaultTagTemplate>\n                <span><span class=\"ng-tag-label\">{{ addTagText() || config.addTagText }}</span>\"{{ searchTerm }}\"</span>\n            </ng-template>\n            <ng-template [ngTemplateOutlet]=\"tagTemplate() || defaultTagTemplate\"\n                [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n            </ng-template>\n        </div>\n        }\n    </ng-container>\n    @if (showNoItemsFound()) {\n    <ng-template #defaultNotFoundTemplate>\n        <div class=\"ng-option ng-option-disabled\">{{ notFoundText() ?? config.notFoundText }}</div>\n    </ng-template>\n    <ng-template [ngTemplateOutlet]=\"notFoundTemplate() || defaultNotFoundTemplate\"\n        [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n    </ng-template>\n    }\n    @if (showTypeToSearch()) {\n    <ng-template #defaultTypeToSearchTemplate>\n        <div class=\"ng-option ng-option-disabled\">{{ typeToSearchText() || config.typeToSearchText }}</div>\n    </ng-template>\n    <ng-template [ngTemplateOutlet]=\"typeToSearchTemplate() || defaultTypeToSearchTemplate\"></ng-template>\n    }\n    @if (loading() && itemsList.filteredItems.length === 0) {\n    <ng-template #defaultLoadingTextTemplate>\n        <div class=\"ng-option ng-option-disabled\">{{ loadingText() || config.loadingText }}</div>\n    </ng-template>\n    <ng-template [ngTemplateOutlet]=\"loadingTextTemplate() || defaultLoadingTextTemplate\"\n        [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n    </ng-template>\n    }\n</ng-dropdown-panel>\n}\n\n<!-- Always present aria-live region -->\n<div aria-atomic=\"true\" aria-live=\"polite\" class=\"ng-visually-hidden\" role=\"status\">\n    @if (isOpen() && showNoItemsFound()) {\n    {{ notFoundText() ?? config.notFoundText }}\n    }\n</div>", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ng-select div,.ng-select input,.ng-select span{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ng-select [hidden]{display:none}.ng-select.ng-select-searchable .ng-select-container .ng-value-container .ng-input{opacity:1}.ng-select.ng-select-opened .ng-select-container{z-index:1001}.ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-placeholder,.ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-value{-webkit-user-select:none;user-select:none;cursor:default}.ng-select.ng-select-disabled .ng-arrow-wrapper{cursor:default}.ng-select.ng-select-filtered .ng-placeholder{display:none}.ng-select .ng-select-container{cursor:default;display:flex;outline:none;overflow:hidden;position:relative;width:100%}.ng-select .ng-select-container .ng-value-container{display:flex;flex:1}.ng-select .ng-select-container .ng-value-container .ng-input{opacity:0}.ng-select .ng-select-container .ng-value-container .ng-input>input{box-sizing:content-box;background:none transparent;border:0 none;box-shadow:none;outline:none;padding:0;cursor:default;width:100%}.ng-select .ng-select-container .ng-value-container .ng-input>input::-ms-clear{display:none}.ng-select .ng-select-container .ng-value-container .ng-input>input[readonly]{-webkit-user-select:unset;user-select:unset;width:0;padding:0}.ng-select.ng-select-single.ng-select-filtered .ng-select-container .ng-value-container .ng-value{visibility:hidden}.ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:none}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{position:absolute;left:0;width:100%}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-icon{display:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{flex-wrap:wrap}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{position:absolute}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:nowrap}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-icon{display:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{cursor:pointer}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{flex:1;z-index:2}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{z-index:1}.ng-select .ng-clear-wrapper{cursor:pointer;position:relative;width:17px;-webkit-user-select:none;user-select:none}.ng-select .ng-clear-wrapper .ng-clear{display:inline-block;font-size:18px;line-height:1;pointer-events:none}.ng-select .ng-spinner-loader{border-radius:50%;width:17px;height:17px;margin-right:5px;font-size:10px;position:relative;text-indent:-9999em;border-top:2px solid rgba(66,66,66,.2);border-right:2px solid rgba(66,66,66,.2);border-bottom:2px solid rgba(66,66,66,.2);border-left:2px solid #424242;transform:translateZ(0);animation:load8 .8s infinite linear}.ng-select .ng-spinner-loader:after{border-radius:50%;width:17px;height:17px}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ng-select .ng-arrow-wrapper{cursor:pointer;position:relative;text-align:center;-webkit-user-select:none;user-select:none}.ng-select .ng-arrow-wrapper .ng-arrow{pointer-events:none;display:inline-block;height:0;width:0;position:relative}.ng-dropdown-panel{box-sizing:border-box;position:absolute;opacity:0;width:100%;z-index:1050;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .ng-dropdown-panel-items{display:block;height:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;max-height:240px;overflow-y:auto}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{box-sizing:border-box;cursor:pointer;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-option-label:empty:before{content:\"\\200b\"}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .highlighted{font-weight:700;text-decoration:underline}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.disabled{cursor:default}.ng-dropdown-panel .scroll-host{overflow:hidden;overflow-y:auto;position:relative;display:block;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .scrollable-content{top:0;left:0;width:100%;height:100%;position:absolute}.ng-dropdown-panel .total-padding{width:1px;opacity:0}.ng-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [], propDecorators: { handleKeyDown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]