@ng-select/ng-select 13.2.0 → 13.3.0

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

@@ -2001,6 +2001,11 @@ class NgSelectComponent {
         this._deselectOnClick = value;
     }
     ;
+    get dropdownPanelStaticClasses() {
+        return this.appendTo && this.classes
+            ? `ng-dropdown-panel ${this.classes}`
+            : 'ng-dropdown-panel';
+    }
     get disabled() { return this.readonly || this._disabled; }
     ;
     get filtered() { return (!!this.searchTerm && this.searchable || this._isComposing); }
@@ -2035,6 +2040,7 @@ class NgSelectComponent {
         this.minTermLength = 0;
         this.editableSearchTerm = false;
         this.keyDownFn = (_) => true;
+        this.ngClass = null;
         this.multiple = false;
         this.addTag = false;
         this.searchable = true;
@@ -2750,11 +2756,11 @@ class NgSelectComponent {
         this.appearance = this.appearance || config.appearance;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgSelectComponent, deps: [{ token: 'class', attribute: true }, { token: 'autofocus', attribute: true }, { token: NgSelectConfig }, { token: SELECTION_MODEL_FACTORY }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: ConsoleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: NgSelectComponent, selector: "ng-select", inputs: { bindLabel: "bindLabel", bindValue: "bindValue", markFirst: ["markFirst", "markFirst", booleanAttribute], placeholder: "placeholder", notFoundText: "notFoundText", typeToSearchText: "typeToSearchText", addTagText: "addTagText", loadingText: "loadingText", clearAllText: "clearAllText", appearance: "appearance", dropdownPosition: "dropdownPosition", appendTo: "appendTo", loading: ["loading", "loading", booleanAttribute], closeOnSelect: ["closeOnSelect", "closeOnSelect", booleanAttribute], hideSelected: ["hideSelected", "hideSelected", booleanAttribute], selectOnTab: ["selectOnTab", "selectOnTab", booleanAttribute], openOnEnter: ["openOnEnter", "openOnEnter", booleanAttribute], maxSelectedItems: ["maxSelectedItems", "maxSelectedItems", numberAttribute], groupBy: "groupBy", groupValue: "groupValue", bufferAmount: ["bufferAmount", "bufferAmount", numberAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], selectableGroup: ["selectableGroup", "selectableGroup", booleanAttribute], selectableGroupAsModel: ["selectableGroupAsModel", "selectableGroupAsModel", booleanAttribute], searchFn: "searchFn", trackByFn: "trackByFn", clearOnBackspace: ["clearOnBackspace", "clearOnBackspace", booleanAttribute], labelForId: "labelForId", inputAttrs: "inputAttrs", tabIndex: ["tabIndex", "tabIndex", numberAttribute], readonly: ["readonly", "readonly", booleanAttribute], searchWhileComposing: ["searchWhileComposing", "searchWhileComposing", booleanAttribute], minTermLength: ["minTermLength", "minTermLength", numberAttribute], editableSearchTerm: ["editableSearchTerm", "editableSearchTerm", booleanAttribute], keyDownFn: "keyDownFn", typeahead: "typeahead", multiple: ["multiple", "multiple", booleanAttribute], addTag: "addTag", searchable: ["searchable", "searchable", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], isOpen: ["isOpen", "isOpen", booleanAttribute], items: "items", compareWith: "compareWith", clearSearchOnAdd: "clearSearchOnAdd", deselectOnClick: "deselectOnClick" }, outputs: { blurEvent: "blur", focusEvent: "focus", changeEvent: "change", openEvent: "open", closeEvent: "close", searchEvent: "search", clearEvent: "clear", addEvent: "add", removeEvent: "remove", scroll: "scroll", scrollToEnd: "scrollToEnd" }, host: { listeners: { "keydown": "handleKeyDown($event)" }, properties: { "class.ng-select-typeahead": "this.typeahead", "class.ng-select-multiple": "this.multiple", "class.ng-select-taggable": "this.addTag", "class.ng-select-searchable": "this.searchable", "class.ng-select-clearable": "this.clearable", "class.ng-select-opened": "this.isOpen", "class.ng-select": "this.useDefaultClass", "class.ng-select-disabled": "this.disabled", "class.ng-select-filtered": "this.filtered", "class.ng-select-single": "this.single" } }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: NgSelectComponent, selector: "ng-select", inputs: { bindLabel: "bindLabel", bindValue: "bindValue", markFirst: ["markFirst", "markFirst", booleanAttribute], placeholder: "placeholder", notFoundText: "notFoundText", typeToSearchText: "typeToSearchText", addTagText: "addTagText", loadingText: "loadingText", clearAllText: "clearAllText", appearance: "appearance", dropdownPosition: "dropdownPosition", appendTo: "appendTo", loading: ["loading", "loading", booleanAttribute], closeOnSelect: ["closeOnSelect", "closeOnSelect", booleanAttribute], hideSelected: ["hideSelected", "hideSelected", booleanAttribute], selectOnTab: ["selectOnTab", "selectOnTab", booleanAttribute], openOnEnter: ["openOnEnter", "openOnEnter", booleanAttribute], maxSelectedItems: ["maxSelectedItems", "maxSelectedItems", numberAttribute], groupBy: "groupBy", groupValue: "groupValue", bufferAmount: ["bufferAmount", "bufferAmount", numberAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], selectableGroup: ["selectableGroup", "selectableGroup", booleanAttribute], selectableGroupAsModel: ["selectableGroupAsModel", "selectableGroupAsModel", booleanAttribute], searchFn: "searchFn", trackByFn: "trackByFn", clearOnBackspace: ["clearOnBackspace", "clearOnBackspace", booleanAttribute], labelForId: "labelForId", inputAttrs: "inputAttrs", tabIndex: ["tabIndex", "tabIndex", numberAttribute], readonly: ["readonly", "readonly", booleanAttribute], searchWhileComposing: ["searchWhileComposing", "searchWhileComposing", booleanAttribute], minTermLength: ["minTermLength", "minTermLength", numberAttribute], editableSearchTerm: ["editableSearchTerm", "editableSearchTerm", booleanAttribute], keyDownFn: "keyDownFn", ngClass: "ngClass", typeahead: "typeahead", multiple: ["multiple", "multiple", booleanAttribute], addTag: "addTag", searchable: ["searchable", "searchable", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], isOpen: "isOpen", items: "items", compareWith: "compareWith", clearSearchOnAdd: "clearSearchOnAdd", deselectOnClick: "deselectOnClick" }, outputs: { blurEvent: "blur", focusEvent: "focus", changeEvent: "change", openEvent: "open", closeEvent: "close", searchEvent: "search", clearEvent: "clear", addEvent: "add", removeEvent: "remove", scroll: "scroll", scrollToEnd: "scrollToEnd" }, host: { listeners: { "keydown": "handleKeyDown($event)" }, properties: { "class.ng-select-typeahead": "this.typeahead", "class.ng-select-multiple": "this.multiple", "class.ng-select-taggable": "this.addTag", "class.ng-select-searchable": "this.searchable", "class.ng-select-clearable": "this.clearable", "class.ng-select-opened": "this.isOpen", "class.ng-select": "this.useDefaultClass", "class.ng-select-disabled": "this.disabled", "class.ng-select-filtered": "this.filtered", "class.ng-select-single": "this.single" } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NgSelectComponent),
                 multi: true
-            }, NgDropdownPanelService], queries: [{ propertyName: "optionTemplate", first: true, predicate: NgOptionTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "optgroupTemplate", first: true, predicate: NgOptgroupTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "labelTemplate", first: true, predicate: NgLabelTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "multiLabelTemplate", first: true, predicate: NgMultiLabelTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: NgHeaderTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: NgFooterTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "notFoundTemplate", first: true, predicate: NgNotFoundTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "typeToSearchTemplate", first: true, predicate: NgTypeToSearchTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "loadingTextTemplate", first: true, predicate: NgLoadingTextTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "tagTemplate", first: true, predicate: NgTagTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: NgLoadingSpinnerTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "ngOptions", predicate: NgOptionComponent, descendants: true }], viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: i0.forwardRef(() => NgDropdownPanelComponent), descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, static: true }, { propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    (mousedown)=\"handleMousedown($event)\"\n    [class.ng-appearance-outline]=\"appearance === 'outline'\"\n    [class.ng-has-value]=\"hasValue\"\n    class=\"ng-select-container\">\n\n    <div class=\"ng-value-container\">\n        <div class=\"ng-placeholder\">{{ placeholder }}</div>\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\n                        [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\n                [ngTemplateOutlet]=\"multiLabelTemplate\"\n                [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\">\n            </ng-template>\n        }\n\n        <div class=\"ng-input\"\n            role=\"combobox\" \n            [attr.aria-expanded]=\"isOpen\" \n            [attr.aria-owns]=\"isOpen ? dropdownId : null\" \n            aria-haspopup=\"listbox\">\n\n            <input #searchInput\n                   [attr.id]=\"labelForId\"\n                   [attr.tabindex]=\"tabIndex\"\n                   [readOnly]=\"!searchable || itemsList.maxItemsSelected\"\n                   [disabled]=\"disabled\"\n                   [value]=\"searchTerm ? searchTerm : ''\"\n                   (input)=\"filter(searchInput.value)\"\n                   (compositionstart)=\"onCompositionStart()\"\n                   (compositionend)=\"onCompositionEnd(searchInput.value)\"\n                   (focus)=\"onInputFocus($event)\"\n                   (blur)=\"onInputBlur($event)\"\n                   (change)=\"$event.stopPropagation()\"\n                   [attr.aria-activedescendant]=\"isOpen ? itemsList?.markedItem?.htmlId : null\"\n                   aria-autocomplete=\"list\"\n                   [attr.aria-controls]=\"isOpen ? dropdownId : null\">\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\n            [ngTemplateOutlet]=\"loadingSpinnerTemplate || defaultLoadingSpinnerTemplate\">\n        </ng-template>\n    }\n\n    @if (showClear()) {\n        <span class=\"ng-clear-wrapper\" tabindex=\"0\" title=\"{{clearAllText}}\" #clearButton>\n            <span class=\"ng-clear\" aria-hidden=\"true\">\u00D7</span>\n        </span>\n    }\n\n    <span class=\"ng-arrow-wrapper\">\n        <span class=\"ng-arrow\"></span>\n    </span>\n</div>\n\n@if (isOpen) {\n    <ng-dropdown-panel\n        class=\"ng-dropdown-panel\"\n        [virtualScroll]=\"virtualScroll\"\n        [bufferAmount]=\"bufferAmount\"\n        [appendTo]=\"appendTo\"\n        [position]=\"dropdownPosition\"\n        [headerTemplate]=\"headerTemplate\"\n        [footerTemplate]=\"footerTemplate\"\n        [filterValue]=\"searchTerm\"\n        [items]=\"itemsList.filteredItems\"\n        [markedItem]=\"itemsList.markedItem\"\n        (update)=\"viewPortItems = $event\"\n        (scroll)=\"scroll.emit($event)\"\n        (scrollToEnd)=\"scrollToEnd.emit($event)\"\n        (outsideClick)=\"close()\"\n        [class.ng-select-multiple]=\"multiple\"\n        [ngClass]=\"appendTo ? classes : null\"\n        [id]=\"dropdownId\"\n        role=\"listbox\"\n        aria-label=\"Options list\">\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)\"\n                     [class.ng-option-disabled]=\"item.disabled\"\n                     [class.ng-option-selected]=\"item.selected\"\n                     [class.ng-optgroup]=\"item.children\"\n                     [class.ng-option]=\"!item.children\"\n                     [class.ng-option-child]=\"!!item.parent\"\n                     [class.ng-option-marked]=\"item === itemsList.markedItem\"\n                     [attr.aria-selected]=\"item.selected\"\n                     [attr.id]=\"item?.htmlId\">\n                    <ng-template #defaultOptionTemplate>\n                        <span class=\"ng-option-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n                    </ng-template>\n                    <ng-template\n                        [ngTemplateOutlet]=\"item.children ? (optgroupTemplate || defaultOptionTemplate) : (optionTemplate || defaultOptionTemplate)\"\n                        [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\"\n                     (mouseover)=\"itemsList.unmarkItem()\" role=\"option\" (click)=\"selectTag()\">\n                    <ng-template #defaultTagTemplate>\n                        <span><span class=\"ng-tag-label\">{{ addTagText }}</span>\"{{ searchTerm }}\"</span>\n                    </ng-template>\n                    <ng-template\n                        [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 }}</div>\n            </ng-template>\n            <ng-template\n                [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 }}</div>\n            </ng-template>\n            <ng-template\n                [ngTemplateOutlet]=\"typeToSearchTemplate || defaultTypeToSearchTemplate\">\n            </ng-template>\n        }\n        @if (loading && itemsList.filteredItems.length === 0) {\n            <ng-template #defaultLoadingTextTemplate>\n                <div class=\"ng-option ng-option-disabled\">{{ loadingText }}</div>\n            </ng-template>\n            <ng-template\n                [ngTemplateOutlet]=\"loadingTextTemplate || defaultLoadingTextTemplate\"\n                [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n            </ng-template>\n        }\n    </ng-dropdown-panel>\n}\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:none;user-select:none;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}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgDropdownPanelComponent, selector: "ng-dropdown-panel", inputs: ["items", "markedItem", "position", "appendTo", "bufferAmount", "virtualScroll", "headerTemplate", "footerTemplate", "filterValue"], outputs: ["update", "scroll", "scrollToEnd", "outsideClick"] }, { kind: "directive", type: NgItemLabelDirective, selector: "[ngItemLabel]", inputs: ["ngItemLabel", "escape"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+            }, NgDropdownPanelService], queries: [{ propertyName: "optionTemplate", first: true, predicate: NgOptionTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "optgroupTemplate", first: true, predicate: NgOptgroupTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "labelTemplate", first: true, predicate: NgLabelTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "multiLabelTemplate", first: true, predicate: NgMultiLabelTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: NgHeaderTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: NgFooterTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "notFoundTemplate", first: true, predicate: NgNotFoundTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "typeToSearchTemplate", first: true, predicate: NgTypeToSearchTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "loadingTextTemplate", first: true, predicate: NgLoadingTextTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "tagTemplate", first: true, predicate: NgTagTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: NgLoadingSpinnerTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "ngOptions", predicate: NgOptionComponent, descendants: true }], viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: i0.forwardRef(() => NgDropdownPanelComponent), descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, static: true }, { propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    (mousedown)=\"handleMousedown($event)\"\n    [class.ng-appearance-outline]=\"appearance === 'outline'\"\n    [class.ng-has-value]=\"hasValue\"\n    class=\"ng-select-container\">\n\n    <div class=\"ng-value-container\">\n        <div class=\"ng-placeholder\">{{ placeholder }}</div>\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\n                        [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\n                [ngTemplateOutlet]=\"multiLabelTemplate\"\n                [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\">\n            </ng-template>\n        }\n\n        <div class=\"ng-input\"\n            role=\"combobox\" \n            [attr.aria-expanded]=\"isOpen\" \n            [attr.aria-owns]=\"isOpen ? dropdownId : null\" \n            aria-haspopup=\"listbox\">\n\n            <input #searchInput\n                   [attr.id]=\"labelForId\"\n                   [attr.tabindex]=\"tabIndex\"\n                   [readOnly]=\"!searchable || itemsList.maxItemsSelected\"\n                   [disabled]=\"disabled\"\n                   [value]=\"searchTerm ? searchTerm : ''\"\n                   (input)=\"filter(searchInput.value)\"\n                   (compositionstart)=\"onCompositionStart()\"\n                   (compositionend)=\"onCompositionEnd(searchInput.value)\"\n                   (focus)=\"onInputFocus($event)\"\n                   (blur)=\"onInputBlur($event)\"\n                   (change)=\"$event.stopPropagation()\"\n                   [attr.aria-activedescendant]=\"isOpen ? itemsList?.markedItem?.htmlId : null\"\n                   aria-autocomplete=\"list\"\n                   [attr.aria-controls]=\"isOpen ? dropdownId : null\">\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\n            [ngTemplateOutlet]=\"loadingSpinnerTemplate || defaultLoadingSpinnerTemplate\">\n        </ng-template>\n    }\n\n    @if (showClear()) {\n        <span class=\"ng-clear-wrapper\" tabindex=\"0\" title=\"{{clearAllText}}\" #clearButton>\n            <span class=\"ng-clear\" aria-hidden=\"true\">\u00D7</span>\n        </span>\n    }\n\n    <span class=\"ng-arrow-wrapper\">\n        <span class=\"ng-arrow\"></span>\n    </span>\n</div>\n\n@if (isOpen) {\n    <ng-dropdown-panel\n        [class]=\"dropdownPanelStaticClasses\"\n        [virtualScroll]=\"virtualScroll\"\n        [bufferAmount]=\"bufferAmount\"\n        [appendTo]=\"appendTo\"\n        [position]=\"dropdownPosition\"\n        [headerTemplate]=\"headerTemplate\"\n        [footerTemplate]=\"footerTemplate\"\n        [filterValue]=\"searchTerm\"\n        [items]=\"itemsList.filteredItems\"\n        [markedItem]=\"itemsList.markedItem\"\n        (update)=\"viewPortItems = $event\"\n        (scroll)=\"scroll.emit($event)\"\n        (scrollToEnd)=\"scrollToEnd.emit($event)\"\n        (outsideClick)=\"close()\"\n        [class.ng-select-multiple]=\"multiple\"\n        [ngClass]=\"appendTo ? ngClass : null\"\n        [id]=\"dropdownId\"\n        role=\"listbox\"\n        aria-label=\"Options list\">\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)\"\n                     [class.ng-option-disabled]=\"item.disabled\"\n                     [class.ng-option-selected]=\"item.selected\"\n                     [class.ng-optgroup]=\"item.children\"\n                     [class.ng-option]=\"!item.children\"\n                     [class.ng-option-child]=\"!!item.parent\"\n                     [class.ng-option-marked]=\"item === itemsList.markedItem\"\n                     [attr.aria-selected]=\"item.selected\"\n                     [attr.id]=\"item?.htmlId\">\n                    <ng-template #defaultOptionTemplate>\n                        <span class=\"ng-option-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n                    </ng-template>\n                    <ng-template\n                        [ngTemplateOutlet]=\"item.children ? (optgroupTemplate || defaultOptionTemplate) : (optionTemplate || defaultOptionTemplate)\"\n                        [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\"\n                     (mouseover)=\"itemsList.unmarkItem()\" role=\"option\" (click)=\"selectTag()\">\n                    <ng-template #defaultTagTemplate>\n                        <span><span class=\"ng-tag-label\">{{ addTagText }}</span>\"{{ searchTerm }}\"</span>\n                    </ng-template>\n                    <ng-template\n                        [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 }}</div>\n            </ng-template>\n            <ng-template\n                [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 }}</div>\n            </ng-template>\n            <ng-template\n                [ngTemplateOutlet]=\"typeToSearchTemplate || defaultTypeToSearchTemplate\">\n            </ng-template>\n        }\n        @if (loading && itemsList.filteredItems.length === 0) {\n            <ng-template #defaultLoadingTextTemplate>\n                <div class=\"ng-option ng-option-disabled\">{{ loadingText }}</div>\n            </ng-template>\n            <ng-template\n                [ngTemplateOutlet]=\"loadingTextTemplate || defaultLoadingTextTemplate\"\n                [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n            </ng-template>\n        }\n    </ng-dropdown-panel>\n}\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:none;user-select:none;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}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgDropdownPanelComponent, selector: "ng-dropdown-panel", inputs: ["items", "markedItem", "position", "appendTo", "bufferAmount", "virtualScroll", "headerTemplate", "footerTemplate", "filterValue"], outputs: ["update", "scroll", "scrollToEnd", "outsideClick"] }, { kind: "directive", type: NgItemLabelDirective, selector: "[ngItemLabel]", inputs: ["ngItemLabel", "escape"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgSelectComponent, decorators: [{
             type: Component,
@@ -2762,7 +2768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => NgSelectComponent),
                             multi: true
-                        }, NgDropdownPanelService], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    (mousedown)=\"handleMousedown($event)\"\n    [class.ng-appearance-outline]=\"appearance === 'outline'\"\n    [class.ng-has-value]=\"hasValue\"\n    class=\"ng-select-container\">\n\n    <div class=\"ng-value-container\">\n        <div class=\"ng-placeholder\">{{ placeholder }}</div>\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\n                        [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\n                [ngTemplateOutlet]=\"multiLabelTemplate\"\n                [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\">\n            </ng-template>\n        }\n\n        <div class=\"ng-input\"\n            role=\"combobox\" \n            [attr.aria-expanded]=\"isOpen\" \n            [attr.aria-owns]=\"isOpen ? dropdownId : null\" \n            aria-haspopup=\"listbox\">\n\n            <input #searchInput\n                   [attr.id]=\"labelForId\"\n                   [attr.tabindex]=\"tabIndex\"\n                   [readOnly]=\"!searchable || itemsList.maxItemsSelected\"\n                   [disabled]=\"disabled\"\n                   [value]=\"searchTerm ? searchTerm : ''\"\n                   (input)=\"filter(searchInput.value)\"\n                   (compositionstart)=\"onCompositionStart()\"\n                   (compositionend)=\"onCompositionEnd(searchInput.value)\"\n                   (focus)=\"onInputFocus($event)\"\n                   (blur)=\"onInputBlur($event)\"\n                   (change)=\"$event.stopPropagation()\"\n                   [attr.aria-activedescendant]=\"isOpen ? itemsList?.markedItem?.htmlId : null\"\n                   aria-autocomplete=\"list\"\n                   [attr.aria-controls]=\"isOpen ? dropdownId : null\">\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\n            [ngTemplateOutlet]=\"loadingSpinnerTemplate || defaultLoadingSpinnerTemplate\">\n        </ng-template>\n    }\n\n    @if (showClear()) {\n        <span class=\"ng-clear-wrapper\" tabindex=\"0\" title=\"{{clearAllText}}\" #clearButton>\n            <span class=\"ng-clear\" aria-hidden=\"true\">\u00D7</span>\n        </span>\n    }\n\n    <span class=\"ng-arrow-wrapper\">\n        <span class=\"ng-arrow\"></span>\n    </span>\n</div>\n\n@if (isOpen) {\n    <ng-dropdown-panel\n        class=\"ng-dropdown-panel\"\n        [virtualScroll]=\"virtualScroll\"\n        [bufferAmount]=\"bufferAmount\"\n        [appendTo]=\"appendTo\"\n        [position]=\"dropdownPosition\"\n        [headerTemplate]=\"headerTemplate\"\n        [footerTemplate]=\"footerTemplate\"\n        [filterValue]=\"searchTerm\"\n        [items]=\"itemsList.filteredItems\"\n        [markedItem]=\"itemsList.markedItem\"\n        (update)=\"viewPortItems = $event\"\n        (scroll)=\"scroll.emit($event)\"\n        (scrollToEnd)=\"scrollToEnd.emit($event)\"\n        (outsideClick)=\"close()\"\n        [class.ng-select-multiple]=\"multiple\"\n        [ngClass]=\"appendTo ? classes : null\"\n        [id]=\"dropdownId\"\n        role=\"listbox\"\n        aria-label=\"Options list\">\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)\"\n                     [class.ng-option-disabled]=\"item.disabled\"\n                     [class.ng-option-selected]=\"item.selected\"\n                     [class.ng-optgroup]=\"item.children\"\n                     [class.ng-option]=\"!item.children\"\n                     [class.ng-option-child]=\"!!item.parent\"\n                     [class.ng-option-marked]=\"item === itemsList.markedItem\"\n                     [attr.aria-selected]=\"item.selected\"\n                     [attr.id]=\"item?.htmlId\">\n                    <ng-template #defaultOptionTemplate>\n                        <span class=\"ng-option-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n                    </ng-template>\n                    <ng-template\n                        [ngTemplateOutlet]=\"item.children ? (optgroupTemplate || defaultOptionTemplate) : (optionTemplate || defaultOptionTemplate)\"\n                        [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\"\n                     (mouseover)=\"itemsList.unmarkItem()\" role=\"option\" (click)=\"selectTag()\">\n                    <ng-template #defaultTagTemplate>\n                        <span><span class=\"ng-tag-label\">{{ addTagText }}</span>\"{{ searchTerm }}\"</span>\n                    </ng-template>\n                    <ng-template\n                        [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 }}</div>\n            </ng-template>\n            <ng-template\n                [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 }}</div>\n            </ng-template>\n            <ng-template\n                [ngTemplateOutlet]=\"typeToSearchTemplate || defaultTypeToSearchTemplate\">\n            </ng-template>\n        }\n        @if (loading && itemsList.filteredItems.length === 0) {\n            <ng-template #defaultLoadingTextTemplate>\n                <div class=\"ng-option ng-option-disabled\">{{ loadingText }}</div>\n            </ng-template>\n            <ng-template\n                [ngTemplateOutlet]=\"loadingTextTemplate || defaultLoadingTextTemplate\"\n                [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n            </ng-template>\n        }\n    </ng-dropdown-panel>\n}\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:none;user-select:none;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}\n"] }]
+                        }, NgDropdownPanelService], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    (mousedown)=\"handleMousedown($event)\"\n    [class.ng-appearance-outline]=\"appearance === 'outline'\"\n    [class.ng-has-value]=\"hasValue\"\n    class=\"ng-select-container\">\n\n    <div class=\"ng-value-container\">\n        <div class=\"ng-placeholder\">{{ placeholder }}</div>\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\n                        [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\n                [ngTemplateOutlet]=\"multiLabelTemplate\"\n                [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\">\n            </ng-template>\n        }\n\n        <div class=\"ng-input\"\n            role=\"combobox\" \n            [attr.aria-expanded]=\"isOpen\" \n            [attr.aria-owns]=\"isOpen ? dropdownId : null\" \n            aria-haspopup=\"listbox\">\n\n            <input #searchInput\n                   [attr.id]=\"labelForId\"\n                   [attr.tabindex]=\"tabIndex\"\n                   [readOnly]=\"!searchable || itemsList.maxItemsSelected\"\n                   [disabled]=\"disabled\"\n                   [value]=\"searchTerm ? searchTerm : ''\"\n                   (input)=\"filter(searchInput.value)\"\n                   (compositionstart)=\"onCompositionStart()\"\n                   (compositionend)=\"onCompositionEnd(searchInput.value)\"\n                   (focus)=\"onInputFocus($event)\"\n                   (blur)=\"onInputBlur($event)\"\n                   (change)=\"$event.stopPropagation()\"\n                   [attr.aria-activedescendant]=\"isOpen ? itemsList?.markedItem?.htmlId : null\"\n                   aria-autocomplete=\"list\"\n                   [attr.aria-controls]=\"isOpen ? dropdownId : null\">\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\n            [ngTemplateOutlet]=\"loadingSpinnerTemplate || defaultLoadingSpinnerTemplate\">\n        </ng-template>\n    }\n\n    @if (showClear()) {\n        <span class=\"ng-clear-wrapper\" tabindex=\"0\" title=\"{{clearAllText}}\" #clearButton>\n            <span class=\"ng-clear\" aria-hidden=\"true\">\u00D7</span>\n        </span>\n    }\n\n    <span class=\"ng-arrow-wrapper\">\n        <span class=\"ng-arrow\"></span>\n    </span>\n</div>\n\n@if (isOpen) {\n    <ng-dropdown-panel\n        [class]=\"dropdownPanelStaticClasses\"\n        [virtualScroll]=\"virtualScroll\"\n        [bufferAmount]=\"bufferAmount\"\n        [appendTo]=\"appendTo\"\n        [position]=\"dropdownPosition\"\n        [headerTemplate]=\"headerTemplate\"\n        [footerTemplate]=\"footerTemplate\"\n        [filterValue]=\"searchTerm\"\n        [items]=\"itemsList.filteredItems\"\n        [markedItem]=\"itemsList.markedItem\"\n        (update)=\"viewPortItems = $event\"\n        (scroll)=\"scroll.emit($event)\"\n        (scrollToEnd)=\"scrollToEnd.emit($event)\"\n        (outsideClick)=\"close()\"\n        [class.ng-select-multiple]=\"multiple\"\n        [ngClass]=\"appendTo ? ngClass : null\"\n        [id]=\"dropdownId\"\n        role=\"listbox\"\n        aria-label=\"Options list\">\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)\"\n                     [class.ng-option-disabled]=\"item.disabled\"\n                     [class.ng-option-selected]=\"item.selected\"\n                     [class.ng-optgroup]=\"item.children\"\n                     [class.ng-option]=\"!item.children\"\n                     [class.ng-option-child]=\"!!item.parent\"\n                     [class.ng-option-marked]=\"item === itemsList.markedItem\"\n                     [attr.aria-selected]=\"item.selected\"\n                     [attr.id]=\"item?.htmlId\">\n                    <ng-template #defaultOptionTemplate>\n                        <span class=\"ng-option-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n                    </ng-template>\n                    <ng-template\n                        [ngTemplateOutlet]=\"item.children ? (optgroupTemplate || defaultOptionTemplate) : (optionTemplate || defaultOptionTemplate)\"\n                        [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\"\n                     (mouseover)=\"itemsList.unmarkItem()\" role=\"option\" (click)=\"selectTag()\">\n                    <ng-template #defaultTagTemplate>\n                        <span><span class=\"ng-tag-label\">{{ addTagText }}</span>\"{{ searchTerm }}\"</span>\n                    </ng-template>\n                    <ng-template\n                        [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 }}</div>\n            </ng-template>\n            <ng-template\n                [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 }}</div>\n            </ng-template>\n            <ng-template\n                [ngTemplateOutlet]=\"typeToSearchTemplate || defaultTypeToSearchTemplate\">\n            </ng-template>\n        }\n        @if (loading && itemsList.filteredItems.length === 0) {\n            <ng-template #defaultLoadingTextTemplate>\n                <div class=\"ng-option ng-option-disabled\">{{ loadingText }}</div>\n            </ng-template>\n            <ng-template\n                [ngTemplateOutlet]=\"loadingTextTemplate || defaultLoadingTextTemplate\"\n                [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n            </ng-template>\n        }\n    </ng-dropdown-panel>\n}\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:none;user-select:none;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}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['class']
@@ -2859,6 +2865,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 args: [{ transform: booleanAttribute }]
             }], keyDownFn: [{
                 type: Input
+            }], ngClass: [{
+                type: Input
             }], typeahead: [{
                 type: Input
             }, {
@@ -2888,8 +2896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 type: HostBinding,
                 args: ['class.ng-select-clearable']
             }], isOpen: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
+                type: Input
             }, {
                 type: HostBinding,
                 args: ['class.ng-select-opened']