ng-hub-ui-forms 22.11.0 → 22.11.1

package/fesm2022/ng-hub-ui-forms.mjs

@@ -4810,13 +4810,34 @@ class NgSelectComponent {
         return term && term.length >= this.minTermLength();
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_validTerm" }] : /* istanbul ignore next */ []));
+    /** Adds/removes `ng-select-opened` on the host — assigned in the constructor. */
+    _reflectOpenState;
     constructor() {
         const config = this.config;
         const newSelectionModel = inject(SELECTION_MODEL_FACTORY, { optional: true });
         const _elementRef = inject(ElementRef);
+        const _renderer = inject(Renderer2);
         this._mergeGlobalConfig(config);
         this.itemsList = new ItemsList(this, newSelectionModel ? newSelectionModel() : DefaultSelectionModelFactory());
         this.element = _elementRef.nativeElement;
+        // Reflect the open state imperatively — the same mechanism the dropdown
+        // panel uses for `ng-select-bottom/top`. As a `host` binding this class
+        // only applied when the PARENT view happened to be refreshed: open()
+        // ends in a LOCAL `_cd.detectChanges()`, which updates the own template
+        // (panel, aria-expanded) but neither applies host bindings nor flushes
+        // effects — so themes keyed on `.ng-select-opened` (the caret flip)
+        // never engaged until some unrelated global tick. open()/close() call
+        // `_reflectOpenState` synchronously; this effect covers the remaining
+        // signal writes (`[isOpen]` input–driven manual mode).
+        this._reflectOpenState = (open) => {
+            if (open) {
+                _renderer.addClass(this.element, 'ng-select-opened');
+            }
+            else {
+                _renderer.removeClass(this.element, 'ng-select-opened');
+            }
+        };
+        effect(() => this._reflectOpenState(this.isOpen() ?? false));
     }
     get filtered() {
         return (!!this.searchTerm && this.searchable()) || this._isComposing;
@@ -5036,6 +5057,7 @@ class NgSelectComponent {
             return;
         }
         this.isOpen.set(true);
+        this._reflectOpenState(true);
         this.itemsList.markSelectedOrDefault(this.markFirst());
         this.openEvent.emit();
         if (!this.searchTerm) {
@@ -5048,6 +5070,7 @@ class NgSelectComponent {
             return;
         }
         this.isOpen.set(false);
+        this._reflectOpenState(false);
         this._isComposing = false;
         if (!this._editableSearchTermActive()) {
             this._clearSearch();
@@ -5537,7 +5560,7 @@ class NgSelectComponent {
         return isDefined(config.disableVirtualScroll) ? !config.disableVirtualScroll : false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: NgSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: NgSelectComponent, isStandalone: true, selector: "ng-select", inputs: { _ariaLabelDropdown: { classPropertyName: "_ariaLabelDropdown", publicName: "ariaLabelDropdown", isSignal: true, isRequired: false, transformFunction: null }, _ariaLabel: { classPropertyName: "_ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, _markFirst: { classPropertyName: "_markFirst", publicName: "markFirst", isSignal: true, isRequired: false, transformFunction: null }, _placeholder: { classPropertyName: "_placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, _fixedPlaceholder: { classPropertyName: "_fixedPlaceholder", publicName: "fixedPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, _notFoundText: { classPropertyName: "_notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null }, _typeToSearchText: { classPropertyName: "_typeToSearchText", publicName: "typeToSearchText", isSignal: true, isRequired: false, transformFunction: null }, _preventToggleOnRightClick: { classPropertyName: "_preventToggleOnRightClick", publicName: "preventToggleOnRightClick", isSignal: true, isRequired: false, transformFunction: null }, _addTagText: { classPropertyName: "_addTagText", publicName: "addTagText", isSignal: true, isRequired: false, transformFunction: null }, _loadingText: { classPropertyName: "_loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, _clearAllText: { classPropertyName: "_clearAllText", publicName: "clearAllText", isSignal: true, isRequired: false, transformFunction: null }, _dropdownPosition: { classPropertyName: "_dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, _appendTo: { classPropertyName: "_appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, _outsideClickEvent: { classPropertyName: "_outsideClickEvent", publicName: "outsideClickEvent", isSignal: true, isRequired: false, transformFunction: null }, _loading: { classPropertyName: "_loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, _closeOnSelect: { classPropertyName: "_closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, _hideSelected: { classPropertyName: "_hideSelected", publicName: "hideSelected", isSignal: true, isRequired: false, transformFunction: null }, _selectOnTab: { classPropertyName: "_selectOnTab", publicName: "selectOnTab", isSignal: true, isRequired: false, transformFunction: null }, _openOnEnter: { classPropertyName: "_openOnEnter", publicName: "openOnEnter", isSignal: true, isRequired: false, transformFunction: null }, _maxSelectedItems: { classPropertyName: "_maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, _groupBy: { classPropertyName: "_groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, _groupValue: { classPropertyName: "_groupValue", publicName: "groupValue", isSignal: true, isRequired: false, transformFunction: null }, _bufferAmount: { classPropertyName: "_bufferAmount", publicName: "bufferAmount", isSignal: true, isRequired: false, transformFunction: null }, _virtualScroll: { classPropertyName: "_virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, _selectableGroup: { classPropertyName: "_selectableGroup", publicName: "selectableGroup", isSignal: true, isRequired: false, transformFunction: null }, _tabFocusOnClearButton: { classPropertyName: "_tabFocusOnClearButton", publicName: "tabFocusOnClearButton", isSignal: true, isRequired: false, transformFunction: null }, _selectableGroupAsModel: { classPropertyName: "_selectableGroupAsModel", publicName: "selectableGroupAsModel", isSignal: true, isRequired: false, transformFunction: null }, _searchFn: { classPropertyName: "_searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null }, _trackByFn: { classPropertyName: "_trackByFn", publicName: "trackByFn", isSignal: true, isRequired: false, transformFunction: null }, _clearOnBackspace: { classPropertyName: "_clearOnBackspace", publicName: "clearOnBackspace", isSignal: true, isRequired: false, transformFunction: null }, _labelForId: { classPropertyName: "_labelForId", publicName: "labelForId", isSignal: true, isRequired: false, transformFunction: null }, _inputAttrs: { classPropertyName: "_inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, _tabIndex: { classPropertyName: "_tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, _readonly: { classPropertyName: "_readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, _searchWhileComposing: { classPropertyName: "_searchWhileComposing", publicName: "searchWhileComposing", isSignal: true, isRequired: false, transformFunction: null }, _minTermLength: { classPropertyName: "_minTermLength", publicName: "minTermLength", isSignal: true, isRequired: false, transformFunction: null }, _editableSearchTerm: { classPropertyName: "_editableSearchTerm", publicName: "editableSearchTerm", isSignal: true, isRequired: false, transformFunction: null }, _ngClass: { classPropertyName: "_ngClass", publicName: "ngClass", isSignal: true, isRequired: false, transformFunction: null }, _typeahead: { classPropertyName: "_typeahead", publicName: "typeahead", isSignal: true, isRequired: false, transformFunction: null }, _multiple: { classPropertyName: "_multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, _addTag: { classPropertyName: "_addTag", publicName: "addTag", isSignal: true, isRequired: false, transformFunction: null }, _searchable: { classPropertyName: "_searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, _clearable: { classPropertyName: "_clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, _clearKeepsDisabledOptions: { classPropertyName: "_clearKeepsDisabledOptions", publicName: "clearKeepsDisabledOptions", isSignal: true, isRequired: false, transformFunction: null }, _deselectOnClick: { classPropertyName: "_deselectOnClick", publicName: "deselectOnClick", isSignal: true, isRequired: false, transformFunction: null }, _clearSearchOnAdd: { classPropertyName: "_clearSearchOnAdd", publicName: "clearSearchOnAdd", isSignal: true, isRequired: false, transformFunction: null }, _compareWith: { classPropertyName: "_compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, _keyDownFn: { classPropertyName: "_keyDownFn", publicName: "keyDownFn", isSignal: true, isRequired: false, transformFunction: null }, _popover: { classPropertyName: "_popover", publicName: "popover", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { bindLabel: "bindLabelChange", bindValue: "bindValueChange", appearance: "appearanceChange", isOpen: "isOpenChange", items: "itemsChange", 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": "true", "class.ng-select-single": "!multiple()", "class.ng-select-typeahead": "typeahead()", "class.ng-select-multiple": "multiple()", "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()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: NgSelectComponent, isStandalone: true, selector: "ng-select", inputs: { _ariaLabelDropdown: { classPropertyName: "_ariaLabelDropdown", publicName: "ariaLabelDropdown", isSignal: true, isRequired: false, transformFunction: null }, _ariaLabel: { classPropertyName: "_ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, _markFirst: { classPropertyName: "_markFirst", publicName: "markFirst", isSignal: true, isRequired: false, transformFunction: null }, _placeholder: { classPropertyName: "_placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, _fixedPlaceholder: { classPropertyName: "_fixedPlaceholder", publicName: "fixedPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, _notFoundText: { classPropertyName: "_notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null }, _typeToSearchText: { classPropertyName: "_typeToSearchText", publicName: "typeToSearchText", isSignal: true, isRequired: false, transformFunction: null }, _preventToggleOnRightClick: { classPropertyName: "_preventToggleOnRightClick", publicName: "preventToggleOnRightClick", isSignal: true, isRequired: false, transformFunction: null }, _addTagText: { classPropertyName: "_addTagText", publicName: "addTagText", isSignal: true, isRequired: false, transformFunction: null }, _loadingText: { classPropertyName: "_loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, _clearAllText: { classPropertyName: "_clearAllText", publicName: "clearAllText", isSignal: true, isRequired: false, transformFunction: null }, _dropdownPosition: { classPropertyName: "_dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, _appendTo: { classPropertyName: "_appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, _outsideClickEvent: { classPropertyName: "_outsideClickEvent", publicName: "outsideClickEvent", isSignal: true, isRequired: false, transformFunction: null }, _loading: { classPropertyName: "_loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, _closeOnSelect: { classPropertyName: "_closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, _hideSelected: { classPropertyName: "_hideSelected", publicName: "hideSelected", isSignal: true, isRequired: false, transformFunction: null }, _selectOnTab: { classPropertyName: "_selectOnTab", publicName: "selectOnTab", isSignal: true, isRequired: false, transformFunction: null }, _openOnEnter: { classPropertyName: "_openOnEnter", publicName: "openOnEnter", isSignal: true, isRequired: false, transformFunction: null }, _maxSelectedItems: { classPropertyName: "_maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, _groupBy: { classPropertyName: "_groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, _groupValue: { classPropertyName: "_groupValue", publicName: "groupValue", isSignal: true, isRequired: false, transformFunction: null }, _bufferAmount: { classPropertyName: "_bufferAmount", publicName: "bufferAmount", isSignal: true, isRequired: false, transformFunction: null }, _virtualScroll: { classPropertyName: "_virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, _selectableGroup: { classPropertyName: "_selectableGroup", publicName: "selectableGroup", isSignal: true, isRequired: false, transformFunction: null }, _tabFocusOnClearButton: { classPropertyName: "_tabFocusOnClearButton", publicName: "tabFocusOnClearButton", isSignal: true, isRequired: false, transformFunction: null }, _selectableGroupAsModel: { classPropertyName: "_selectableGroupAsModel", publicName: "selectableGroupAsModel", isSignal: true, isRequired: false, transformFunction: null }, _searchFn: { classPropertyName: "_searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null }, _trackByFn: { classPropertyName: "_trackByFn", publicName: "trackByFn", isSignal: true, isRequired: false, transformFunction: null }, _clearOnBackspace: { classPropertyName: "_clearOnBackspace", publicName: "clearOnBackspace", isSignal: true, isRequired: false, transformFunction: null }, _labelForId: { classPropertyName: "_labelForId", publicName: "labelForId", isSignal: true, isRequired: false, transformFunction: null }, _inputAttrs: { classPropertyName: "_inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, _tabIndex: { classPropertyName: "_tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, _readonly: { classPropertyName: "_readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, _searchWhileComposing: { classPropertyName: "_searchWhileComposing", publicName: "searchWhileComposing", isSignal: true, isRequired: false, transformFunction: null }, _minTermLength: { classPropertyName: "_minTermLength", publicName: "minTermLength", isSignal: true, isRequired: false, transformFunction: null }, _editableSearchTerm: { classPropertyName: "_editableSearchTerm", publicName: "editableSearchTerm", isSignal: true, isRequired: false, transformFunction: null }, _ngClass: { classPropertyName: "_ngClass", publicName: "ngClass", isSignal: true, isRequired: false, transformFunction: null }, _typeahead: { classPropertyName: "_typeahead", publicName: "typeahead", isSignal: true, isRequired: false, transformFunction: null }, _multiple: { classPropertyName: "_multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, _addTag: { classPropertyName: "_addTag", publicName: "addTag", isSignal: true, isRequired: false, transformFunction: null }, _searchable: { classPropertyName: "_searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, _clearable: { classPropertyName: "_clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, _clearKeepsDisabledOptions: { classPropertyName: "_clearKeepsDisabledOptions", publicName: "clearKeepsDisabledOptions", isSignal: true, isRequired: false, transformFunction: null }, _deselectOnClick: { classPropertyName: "_deselectOnClick", publicName: "deselectOnClick", isSignal: true, isRequired: false, transformFunction: null }, _clearSearchOnAdd: { classPropertyName: "_clearSearchOnAdd", publicName: "clearSearchOnAdd", isSignal: true, isRequired: false, transformFunction: null }, _compareWith: { classPropertyName: "_compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, _keyDownFn: { classPropertyName: "_keyDownFn", publicName: "keyDownFn", isSignal: true, isRequired: false, transformFunction: null }, _popover: { classPropertyName: "_popover", publicName: "popover", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { bindLabel: "bindLabelChange", bindValue: "bindValueChange", appearance: "appearanceChange", isOpen: "isOpenChange", items: "itemsChange", 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": "true", "class.ng-select-single": "!multiple()", "class.ng-select-typeahead": "typeahead()", "class.ng-select-multiple": "multiple()", "class.ng-select-taggable": "addTag()", "class.ng-select-searchable": "searchable()", "class.ng-select-clearable": "clearable()", "class.ng-select-filtered": "filtered", "class.ng-select-disabled": "disabled()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NgSelectComponent),
@@ -5563,7 +5586,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         '[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()',
                     }, template: "<div\n\t(mousedown)=\"handleMousedown($event)\"\n\t[class.ng-appearance-outline]=\"appearance() === 'outline'\"\n\t[class.ng-appearance-fill]=\"appearance() === 'fill'\"\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<span\n\t\t\tclass=\"ng-clear-wrapper\"\n\t\t\trole=\"button\"\n\t\t\ttabindex=\"0\"\n\t\t\t[attr.tabindex]=\"tabFocusOnClear() ? 0 : -1\"\n\t\t\ttitle=\"{{ clearAllText() || config.clearAllText }}\"\n\t\t\t#clearButton\n\t\t\t(click)=\"handleClearClick($event)\">\n\t\t\t@if (clearButtonTemplate()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"clearButtonTemplate()\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t<span class=\"ng-clear\" aria-hidden=\"true\">\u00D7</span>\n\t\t\t}\n\t\t</span>\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]=\"dropdownVirtualScroll()\"\n\t\t[bufferAmount]=\"bufferAmount()\"\n\t\t[appendTo]=\"appendToValue\"\n\t\t[position]=\"dropdownPosition()\"\n\t\t[outsideClickEvent]=\"outsideClickEvent()\"\n\t\t[headerTemplate]=\"headerTemplate()\"\n\t\t[footerTemplate]=\"footerTemplate()\"\n\t\t[filterValue]=\"searchTerm\"\n\t\t[items]=\"itemsList.filteredItems\"\n\t\t[showAddTag]=\"showAddTag\"\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() ?? config.ariaLabelDropdown\"\n\t\t[popover]=\"popover()\">\n\t\t<ng-container>\n\t\t\t@for (item of viewPortItems; track trackByOption($index, item)) {\n\t\t\t\t<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus, @angular-eslint/template/mouse-events-have-key-events -->\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 ?? 0) + 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<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus, @angular-eslint/template/mouse-events-have-key-events -->\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[attr.aria-selected]=\"false\"\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() ?? config.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"] }]