@mintplayer/ng-bootstrap 21.0.0 → 21.1.0

package/fesm2022/mintplayer-ng-bootstrap-searchbox.mjs

@@ -1,130 +1,101 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, ViewChild, Optional, Component, Directive, NgModule } from '@angular/core';
-import * as i3 from '@angular/forms';
+import { inject, signal, model, output, effect, ViewChild, ChangeDetectionStrategy, Component, TemplateRef, Directive, Input, NgModule } from '@angular/core';
+import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i4 from '@angular/common';
+import * as i2 from '@angular/common';
 import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
-import * as i5 from '@mintplayer/ng-focus-on-load';
+import * as i3 from '@mintplayer/ng-focus-on-load';
 import { FocusOnLoadDirective } from '@mintplayer/ng-focus-on-load';
-import * as i6 from '@mintplayer/ng-bootstrap/dropdown';
+import * as i4 from '@mintplayer/ng-bootstrap/dropdown';
 import { BsDropdownModule } from '@mintplayer/ng-bootstrap/dropdown';
-import * as i10 from '@mintplayer/ng-bootstrap/progress-bar';
+import * as i8 from '@mintplayer/ng-bootstrap/progress-bar';
 import { BsProgressBarModule } from '@mintplayer/ng-bootstrap/progress-bar';
-import * as i8 from '@mintplayer/ng-bootstrap/dropdown-menu';
+import * as i6 from '@mintplayer/ng-bootstrap/dropdown-menu';
 import { BsDropdownMenuModule } from '@mintplayer/ng-bootstrap/dropdown-menu';
-import * as i9 from '@mintplayer/ng-bootstrap/button-type';
+import * as i7 from '@mintplayer/ng-bootstrap/button-type';
 import { BsButtonTypeDirective } from '@mintplayer/ng-bootstrap/button-type';
-import * as i7 from '@mintplayer/ng-bootstrap/has-overlay';
+import * as i5 from '@mintplayer/ng-bootstrap/has-overlay';
 import { BsHasOverlayComponent } from '@mintplayer/ng-bootstrap/has-overlay';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Color } from '@mintplayer/ng-bootstrap';
-import { BehaviorSubject, debounceTime } from 'rxjs';
-import * as i1 from '@mintplayer/ng-bootstrap/form';
-import * as i2 from '@angular/platform-browser';
+import { BsFormComponent } from '@mintplayer/ng-bootstrap/form';
+import { DomSanitizer } from '@angular/platform-browser';
 
 /// <reference types="../types" />
 class BsSearchboxComponent {
-    constructor(bsForm, sanitizer) {
+    constructor() {
+        this.bsForm = inject(BsFormComponent, { optional: true });
+        this.sanitizer = inject(DomSanitizer);
+        this.caretUpFill = signal(undefined, ...(ngDevMode ? [{ debugName: "caretUpFill" }] : []));
+        this.caretDownFill = signal(undefined, ...(ngDevMode ? [{ debugName: "caretDownFill" }] : []));
         this.colors = Color;
-        this.isBusy$ = new BehaviorSubject(false);
-        //#region isOpen
-        this._isOpen = false;
-        //#endregion
-        //#region suggestions
-        this._suggestions = [];
-        this.selectedItemChange = new EventEmitter();
-        //#endregion
-        //#region searchterm
-        this.searchterm$ = new BehaviorSubject('');
-        this.provideSuggestions = new EventEmitter();
-        if (!bsForm) {
+        this.isBusy = signal(false, ...(ngDevMode ? [{ debugName: "isBusy" }] : []));
+        this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this.selectedItem = model(undefined, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
+        this.searchterm = model('', ...(ngDevMode ? [{ debugName: "searchterm" }] : []));
+        this.suggestions = model([], ...(ngDevMode ? [{ debugName: "suggestions" }] : []));
+        this.provideSuggestions = output();
+        this.debouncedSearchterm = signal('', ...(ngDevMode ? [{ debugName: "debouncedSearchterm" }] : []));
+        if (!this.bsForm) {
             throw '<bs-searchbox> must be inside a <bs-form>';
         }
-        this.searchterm$.pipe(debounceTime(200), takeUntilDestroyed()).subscribe((searchterm) => {
-            if (searchterm === '') {
-                this.suggestions = [];
+        effect(() => {
+            const searchterm = this.searchterm();
+            clearTimeout(this.debounceTimeout);
+            this.debounceTimeout = setTimeout(() => {
+                if (searchterm === '') {
+                    // clear suggestions - will be handled by the template
+                }
+                else {
+                    this.isBusy.set(true);
+                    this.provideSuggestions.emit(searchterm);
+                }
+            }, 200);
+        });
+        effect(() => {
+            const suggestions = this.suggestions();
+            if (suggestions) {
+                this.isBusy.set(false);
             }
-            else {
-                this.isBusy$.next(true);
-                this.provideSuggestions.emit(searchterm);
+        });
+        effect(() => {
+            const isOpen = this.isOpen();
+            if (isOpen) {
+                setTimeout(() => this.textbox?.nativeElement?.setSelectionRange(0, -1), 20);
             }
         });
         import('bootstrap-icons/icons/caret-up-fill.svg').then((icon) => {
-            this.caretUpFill = sanitizer.bypassSecurityTrustHtml(icon.default);
+            this.caretUpFill.set(this.sanitizer.bypassSecurityTrustHtml(icon.default));
         });
         import('bootstrap-icons/icons/caret-down-fill.svg').then((icon) => {
-            this.caretDownFill = sanitizer.bypassSecurityTrustHtml(icon.default);
+            this.caretDownFill.set(this.sanitizer.bypassSecurityTrustHtml(icon.default));
         });
     }
-    get isOpen() {
-        return this._isOpen;
-    }
-    set isOpen(value) {
-        const changed = (this._isOpen !== value);
-        this._isOpen = value;
-        if (changed && value) {
-            setTimeout(() => this.textbox.nativeElement.setSelectionRange(0, -1), 20);
-        }
-    }
-    get suggestions() {
-        return this._suggestions;
-    }
-    set suggestions(value) {
-        this._suggestions = value;
-        this.isBusy$.next(false);
-    }
-    get selectedItem() {
-        return this._selectedItem;
-    }
-    set selectedItem(value) {
-        this._selectedItem = value;
-        this.selectedItemChange.emit(value);
-    }
-    ;
-    get searchterm() {
-        return this.searchterm$.value;
-    }
-    set searchterm(value) {
-        this.searchterm$.next(value);
-    }
     onSearchtermChange(searchterm) {
-        this.searchterm$.next(searchterm);
+        this.searchterm.set(searchterm);
     }
     onSuggestionClicked(suggestion) {
-        this.selectedItem = suggestion;
-        this.isOpen = false;
-        this.searchterm = '';
+        this.selectedItem.set(suggestion);
+        this.isOpen.set(false);
+        this.searchterm.set('');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSearchboxComponent, deps: [{ token: i1.BsFormComponent, optional: true }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BsSearchboxComponent, isStandalone: false, selector: "bs-searchbox", inputs: { isOpen: "isOpen", suggestions: "suggestions", selectedItem: "selectedItem", searchterm: "searchterm" }, outputs: { selectedItemChange: "selectedItemChange", provideSuggestions: "provideSuggestions" }, viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }], ngImport: i0, template: "<bs-has-overlay></bs-has-overlay>\n<div bsDropdown [(isOpen)]=\"isOpen\" [hasBackdrop]=\"false\" [sameDropdownWidth]=\"true\">\n    <button [color]=\"colors.primary\" class=\"d-flex w-100\" bsDropdownToggle>\n        <div class=\"flex-grow-1\">\n            @if (!selectedItem) {\n                <ng-content></ng-content>\n            } @else if (suggestionTemplate) {\n                <ng-container *ngTemplateOutlet=\"suggestionTemplate; context: { $implicit: selectedItem, searchbox: this }\"></ng-container>\n            }\n        </div>\n        <span [innerHTML]=\"isOpen ? caretUpFill : caretDownFill\" class=\"float-end\"></span>\n    </button>\n    <bs-dropdown-menu *bsDropdownMenu>\n        @let isBusy = isBusy$ | async;\n        @if (isBusy) {\n            <bs-progress [isIndeterminate]=\"true\" class=\"prog\">\n                <bs-progress-bar></bs-progress-bar>\n            </bs-progress>\n        }\n        <div class=\"w-100 px-2 mb-2\">\n            <input type=\"text\" #textbox autofocus class=\"form-control d-block\" [ngModel]=\"searchterm$ | async\" (ngModelChange)=\"onSearchtermChange($event)\">\n        </div>\n        \n        @if (searchterm === '') {\n            <bs-dropdown-item [disabled]=\"true\">\n                <ng-container *ngTemplateOutlet=\"enterSearchtermTemplate ?? defaultEnterSearchtermTemplate; context: { }\"></ng-container>\n            </bs-dropdown-item>\n        } @else {\n            <div class=\"overflow-y-auto\" [style.max-height.px]=\"200\">\n                @for (suggestion of suggestions; track suggestion) {\n                    <bs-dropdown-item (click)=\"onSuggestionClicked(suggestion)\" [isSelected]=\"selectedItem?.id === suggestion.id\" [disabled]=\"isBusy ?? true\">\n                        @if (suggestionTemplate) {\n                            <ng-container *ngTemplateOutlet=\"suggestionTemplate; context: { $implicit: suggestion, searchbox: this }\"></ng-container>\n                        }\n                    </bs-dropdown-item>\n                }\n                @if (suggestions.length === 0) {\n                    <bs-dropdown-item [disabled]=\"true\">\n                        <ng-container *ngTemplateOutlet=\"noResultsTemplate ?? defaultNoResultsTemplate; context: { }\"></ng-container>\n                    </bs-dropdown-item>\n                }\n            </div>\n        }\n    </bs-dropdown-menu>\n</div>\n\n<ng-template #defaultEnterSearchtermTemplate>\n    Enter a search term\n</ng-template>\n<ng-template #defaultNoResultsTemplate>\n    No results\n</ng-template>", styles: [".prog{height:.3rem;margin-top:-.5rem;margin-bottom:.2rem}\n"], dependencies: [{ kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.FocusOnLoadDirective, selector: "*[autofocus]", inputs: ["autofocus"] }, { kind: "directive", type: i6.BsDropdownDirective, selector: "[bsDropdown]", inputs: ["hasBackdrop", "sameWidth", "closeOnClickOutside", "sameDropdownWidth", "isOpen"], outputs: ["isOpenChange"] }, { kind: "directive", type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle]" }, { kind: "directive", type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu]" }, { kind: "component", type: i7.BsHasOverlayComponent, selector: "bs-has-overlay" }, { kind: "component", type: i8.BsDropdownMenuComponent, selector: "bs-dropdown-menu", inputs: ["maxHeight"] }, { kind: "component", type: i8.BsDropdownItemComponent, selector: "bs-dropdown-item", inputs: ["isSelected", "disabled"] }, { kind: "directive", type: i9.BsButtonTypeDirective, selector: "button[color],input[type=\"button\"][color],input[type=\"submit\"][color],a[color]", inputs: ["color"] }, { kind: "component", type: i10.BsProgressBarComponent, selector: "bs-progress-bar", inputs: ["minimum", "maximum", "value", "color", "striped", "animated"] }, { kind: "component", type: i10.BsProgressComponent, selector: "bs-progress", inputs: ["height", "isIndeterminate"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSearchboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BsSearchboxComponent, isStandalone: false, selector: "bs-searchbox", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, selectedItem: { classPropertyName: "selectedItem", publicName: "selectedItem", isSignal: true, isRequired: false, transformFunction: null }, searchterm: { classPropertyName: "searchterm", publicName: "searchterm", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", selectedItem: "selectedItemChange", searchterm: "searchtermChange", suggestions: "suggestionsChange", provideSuggestions: "provideSuggestions" }, viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }], ngImport: i0, template: "<bs-has-overlay></bs-has-overlay>\n<div bsDropdown [(isOpen)]=\"isOpen\" [hasBackdrop]=\"false\" [sameDropdownWidth]=\"true\">\n    <button [color]=\"colors.primary\" class=\"d-flex w-100\" bsDropdownToggle>\n        <div class=\"flex-grow-1\">\n            @if (!selectedItem()) {\n                <ng-content></ng-content>\n            } @else if (suggestionTemplate) {\n                <ng-container *ngTemplateOutlet=\"suggestionTemplate; context: { $implicit: selectedItem(), searchbox: this }\"></ng-container>\n            }\n        </div>\n        <span [innerHTML]=\"isOpen() ? caretUpFill() : caretDownFill()\" class=\"float-end\"></span>\n    </button>\n    <bs-dropdown-menu *bsDropdownMenu>\n        @if (isBusy()) {\n            <bs-progress [isIndeterminate]=\"true\" class=\"prog\">\n                <bs-progress-bar></bs-progress-bar>\n            </bs-progress>\n        }\n        <div class=\"w-100 px-2 mb-2\">\n            <input type=\"text\" #textbox autofocus class=\"form-control d-block\" [ngModel]=\"searchterm()\" (ngModelChange)=\"onSearchtermChange($event)\">\n        </div>\n\n        @if (searchterm() === '') {\n            <bs-dropdown-item [disabled]=\"true\">\n                <ng-container *ngTemplateOutlet=\"enterSearchtermTemplate ?? defaultEnterSearchtermTemplate; context: { }\"></ng-container>\n            </bs-dropdown-item>\n        } @else {\n            <div class=\"overflow-y-auto\" [style.max-height.px]=\"200\">\n                @for (suggestion of suggestions(); track suggestion) {\n                    <bs-dropdown-item (click)=\"onSuggestionClicked(suggestion)\" [isSelected]=\"selectedItem()?.id === suggestion.id\" [disabled]=\"isBusy()\">\n                        @if (suggestionTemplate) {\n                            <ng-container *ngTemplateOutlet=\"suggestionTemplate; context: { $implicit: suggestion, searchbox: this }\"></ng-container>\n                        }\n                    </bs-dropdown-item>\n                }\n                @if (suggestions().length === 0) {\n                    <bs-dropdown-item [disabled]=\"true\">\n                        <ng-container *ngTemplateOutlet=\"noResultsTemplate ?? defaultNoResultsTemplate; context: { }\"></ng-container>\n                    </bs-dropdown-item>\n                }\n            </div>\n        }\n    </bs-dropdown-menu>\n</div>\n\n<ng-template #defaultEnterSearchtermTemplate>\n    Enter a search term\n</ng-template>\n<ng-template #defaultNoResultsTemplate>\n    No results\n</ng-template>\n", styles: [".prog{height:.3rem;margin-top:-.5rem;margin-bottom:.2rem}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.FocusOnLoadDirective, selector: "*[autofocus]", inputs: ["autofocus"] }, { kind: "directive", type: i4.BsDropdownDirective, selector: "[bsDropdown]", inputs: ["hasBackdrop", "sameWidth", "closeOnClickOutside", "sameDropdownWidth", "isOpen"], outputs: ["isOpenChange"] }, { kind: "directive", type: i4.BsDropdownToggleDirective, selector: "[bsDropdownToggle]" }, { kind: "directive", type: i4.BsDropdownMenuDirective, selector: "[bsDropdownMenu]" }, { kind: "component", type: i5.BsHasOverlayComponent, selector: "bs-has-overlay" }, { kind: "component", type: i6.BsDropdownMenuComponent, selector: "bs-dropdown-menu", inputs: ["maxHeight"] }, { kind: "component", type: i6.BsDropdownItemComponent, selector: "bs-dropdown-item", inputs: ["isSelected", "disabled"] }, { kind: "directive", type: i7.BsButtonTypeDirective, selector: "button[color],input[type=\"button\"][color],input[type=\"submit\"][color],a[color]", inputs: ["color"] }, { kind: "component", type: i8.BsProgressBarComponent, selector: "bs-progress-bar", inputs: ["minimum", "maximum", "value", "color", "striped", "animated"] }, { kind: "component", type: i8.BsProgressComponent, selector: "bs-progress", inputs: ["height", "isIndeterminate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSearchboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-searchbox', standalone: false, template: "<bs-has-overlay></bs-has-overlay>\n<div bsDropdown [(isOpen)]=\"isOpen\" [hasBackdrop]=\"false\" [sameDropdownWidth]=\"true\">\n    <button [color]=\"colors.primary\" class=\"d-flex w-100\" bsDropdownToggle>\n        <div class=\"flex-grow-1\">\n            @if (!selectedItem) {\n                <ng-content></ng-content>\n            } @else if (suggestionTemplate) {\n                <ng-container *ngTemplateOutlet=\"suggestionTemplate; context: { $implicit: selectedItem, searchbox: this }\"></ng-container>\n            }\n        </div>\n        <span [innerHTML]=\"isOpen ? caretUpFill : caretDownFill\" class=\"float-end\"></span>\n    </button>\n    <bs-dropdown-menu *bsDropdownMenu>\n        @let isBusy = isBusy$ | async;\n        @if (isBusy) {\n            <bs-progress [isIndeterminate]=\"true\" class=\"prog\">\n                <bs-progress-bar></bs-progress-bar>\n            </bs-progress>\n        }\n        <div class=\"w-100 px-2 mb-2\">\n            <input type=\"text\" #textbox autofocus class=\"form-control d-block\" [ngModel]=\"searchterm$ | async\" (ngModelChange)=\"onSearchtermChange($event)\">\n        </div>\n        \n        @if (searchterm === '') {\n            <bs-dropdown-item [disabled]=\"true\">\n                <ng-container *ngTemplateOutlet=\"enterSearchtermTemplate ?? defaultEnterSearchtermTemplate; context: { }\"></ng-container>\n            </bs-dropdown-item>\n        } @else {\n            <div class=\"overflow-y-auto\" [style.max-height.px]=\"200\">\n                @for (suggestion of suggestions; track suggestion) {\n                    <bs-dropdown-item (click)=\"onSuggestionClicked(suggestion)\" [isSelected]=\"selectedItem?.id === suggestion.id\" [disabled]=\"isBusy ?? true\">\n                        @if (suggestionTemplate) {\n                            <ng-container *ngTemplateOutlet=\"suggestionTemplate; context: { $implicit: suggestion, searchbox: this }\"></ng-container>\n                        }\n                    </bs-dropdown-item>\n                }\n                @if (suggestions.length === 0) {\n                    <bs-dropdown-item [disabled]=\"true\">\n                        <ng-container *ngTemplateOutlet=\"noResultsTemplate ?? defaultNoResultsTemplate; context: { }\"></ng-container>\n                    </bs-dropdown-item>\n                }\n            </div>\n        }\n    </bs-dropdown-menu>\n</div>\n\n<ng-template #defaultEnterSearchtermTemplate>\n    Enter a search term\n</ng-template>\n<ng-template #defaultNoResultsTemplate>\n    No results\n</ng-template>", styles: [".prog{height:.3rem;margin-top:-.5rem;margin-bottom:.2rem}\n"] }]
-        }], ctorParameters: () => [{ type: i1.BsFormComponent, decorators: [{
-                    type: Optional
-                }] }, { type: i2.DomSanitizer }], propDecorators: { textbox: [{
+            args: [{ selector: 'bs-searchbox', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-has-overlay></bs-has-overlay>\n<div bsDropdown [(isOpen)]=\"isOpen\" [hasBackdrop]=\"false\" [sameDropdownWidth]=\"true\">\n    <button [color]=\"colors.primary\" class=\"d-flex w-100\" bsDropdownToggle>\n        <div class=\"flex-grow-1\">\n            @if (!selectedItem()) {\n                <ng-content></ng-content>\n            } @else if (suggestionTemplate) {\n                <ng-container *ngTemplateOutlet=\"suggestionTemplate; context: { $implicit: selectedItem(), searchbox: this }\"></ng-container>\n            }\n        </div>\n        <span [innerHTML]=\"isOpen() ? caretUpFill() : caretDownFill()\" class=\"float-end\"></span>\n    </button>\n    <bs-dropdown-menu *bsDropdownMenu>\n        @if (isBusy()) {\n            <bs-progress [isIndeterminate]=\"true\" class=\"prog\">\n                <bs-progress-bar></bs-progress-bar>\n            </bs-progress>\n        }\n        <div class=\"w-100 px-2 mb-2\">\n            <input type=\"text\" #textbox autofocus class=\"form-control d-block\" [ngModel]=\"searchterm()\" (ngModelChange)=\"onSearchtermChange($event)\">\n        </div>\n\n        @if (searchterm() === '') {\n            <bs-dropdown-item [disabled]=\"true\">\n                <ng-container *ngTemplateOutlet=\"enterSearchtermTemplate ?? defaultEnterSearchtermTemplate; context: { }\"></ng-container>\n            </bs-dropdown-item>\n        } @else {\n            <div class=\"overflow-y-auto\" [style.max-height.px]=\"200\">\n                @for (suggestion of suggestions(); track suggestion) {\n                    <bs-dropdown-item (click)=\"onSuggestionClicked(suggestion)\" [isSelected]=\"selectedItem()?.id === suggestion.id\" [disabled]=\"isBusy()\">\n                        @if (suggestionTemplate) {\n                            <ng-container *ngTemplateOutlet=\"suggestionTemplate; context: { $implicit: suggestion, searchbox: this }\"></ng-container>\n                        }\n                    </bs-dropdown-item>\n                }\n                @if (suggestions().length === 0) {\n                    <bs-dropdown-item [disabled]=\"true\">\n                        <ng-container *ngTemplateOutlet=\"noResultsTemplate ?? defaultNoResultsTemplate; context: { }\"></ng-container>\n                    </bs-dropdown-item>\n                }\n            </div>\n        }\n    </bs-dropdown-menu>\n</div>\n\n<ng-template #defaultEnterSearchtermTemplate>\n    Enter a search term\n</ng-template>\n<ng-template #defaultNoResultsTemplate>\n    No results\n</ng-template>\n", styles: [".prog{height:.3rem;margin-top:-.5rem;margin-bottom:.2rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { textbox: [{
                 type: ViewChild,
                 args: ['textbox']
-            }], isOpen: [{
-                type: Input
-            }], suggestions: [{
-                type: Input
-            }], selectedItem: [{
-                type: Input
-            }], selectedItemChange: [{
-                type: Output
-            }], searchterm: [{
-                type: Input
-            }], provideSuggestions: [{
-                type: Output
-            }] } });
+            }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], selectedItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItem", required: false }] }, { type: i0.Output, args: ["selectedItemChange"] }], searchterm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchterm", required: false }] }, { type: i0.Output, args: ["searchtermChange"] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }, { type: i0.Output, args: ["suggestionsChange"] }], provideSuggestions: [{ type: i0.Output, args: ["provideSuggestions"] }] } });
 
 class BsEnterSearchTermTemplateDirective {
-    constructor(searchbox, template) {
+    constructor() {
+        const searchbox = inject(BsSearchboxComponent);
+        const template = inject(TemplateRef);
         searchbox.enterSearchtermTemplate = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsEnterSearchTermTemplateDirective, deps: [{ token: BsSearchboxComponent }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsEnterSearchTermTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: BsEnterSearchTermTemplateDirective, isStandalone: false, selector: "[bsEnterSearchTermTemplate]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsEnterSearchTermTemplateDirective, decorators: [{
@@ -133,20 +104,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     selector: '[bsEnterSearchTermTemplate]',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: BsSearchboxComponent }, { type: i0.TemplateRef }] });
+        }], ctorParameters: () => [] });
 
 class BsSuggestionTemplateDirective {
-    constructor(searchbox, template) {
-        this.searchbox = searchbox;
-        searchbox.suggestionTemplate = template;
+    constructor() {
+        this.searchbox = inject(BsSearchboxComponent);
+        const template = inject(TemplateRef);
+        this.searchbox.suggestionTemplate = template;
     }
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
     set bsSuggestionTemplateOf(value) {
-        this.searchbox.suggestions = value;
+        this.searchbox.suggestions.set(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSuggestionTemplateDirective, deps: [{ token: BsSearchboxComponent }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSuggestionTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: BsSuggestionTemplateDirective, isStandalone: false, selector: "[bsSuggestionTemplate]", inputs: { bsSuggestionTemplateOf: "bsSuggestionTemplateOf" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSuggestionTemplateDirective, decorators: [{
@@ -155,7 +127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     selector: '[bsSuggestionTemplate]',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: BsSearchboxComponent }, { type: i0.TemplateRef }], propDecorators: { bsSuggestionTemplateOf: [{
+        }], ctorParameters: () => [], propDecorators: { bsSuggestionTemplateOf: [{
                 type: Input
             }] } });
 class BsSuggestionTemplateContext {
@@ -166,10 +138,12 @@ class BsSuggestionTemplateContext {
 }
 
 class BsNoResultsTemplateDirective {
-    constructor(searchbox, template) {
+    constructor() {
+        const searchbox = inject(BsSearchboxComponent);
+        const template = inject(TemplateRef);
         searchbox.noResultsTemplate = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsNoResultsTemplateDirective, deps: [{ token: BsSearchboxComponent }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsNoResultsTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: BsNoResultsTemplateDirective, isStandalone: false, selector: "[bsNoResultsTemplate]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsNoResultsTemplateDirective, decorators: [{
@@ -178,7 +152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     selector: '[bsNoResultsTemplate]',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: BsSearchboxComponent }, { type: i0.TemplateRef }] });
+        }], ctorParameters: () => [] });
 
 class BsSearchboxModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSearchboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }

package/fesm2022/mintplayer-ng-bootstrap-searchbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mintplayer-ng-bootstrap-searchbox.mjs","sources":["../../../../libs/mintplayer-ng-bootstrap/searchbox/src/searchbox/searchbox.component.ts","../../../../libs/mintplayer-ng-bootstrap/searchbox/src/searchbox/searchbox.component.html","../../../../libs/mintplayer-ng-bootstrap/searchbox/src/directives/enter-search-term.directive.ts","../../../../libs/mintplayer-ng-bootstrap/searchbox/src/directives/suggestion.directive.ts","../../../../libs/mintplayer-ng-bootstrap/searchbox/src/directives/no-results.directive.ts","../../../../libs/mintplayer-ng-bootstrap/searchbox/src/searchbox.module.ts","../../../../libs/mintplayer-ng-bootstrap/searchbox/mintplayer-ng-bootstrap-searchbox.ts"],"sourcesContent":["/// <reference types=\"../types\" />\n\nimport { Component, ElementRef, EventEmitter, Input, Optional, Output, TemplateRef, ViewChild } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { Color } from '@mintplayer/ng-bootstrap';\nimport { BsFormComponent } from '@mintplayer/ng-bootstrap/form';\nimport { HasId } from '@mintplayer/ng-bootstrap/has-id';\nimport { BehaviorSubject, debounceTime } from 'rxjs';\nimport { BsSuggestionTemplateContext } from '../directives';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\n\n@Component({\n  selector: 'bs-searchbox',\n  templateUrl: './searchbox.component.html',\n  styleUrls: ['./searchbox.component.scss'],\n  standalone: false,\n})\nexport class BsSearchboxComponent<T extends HasId<U>, U> {\n  constructor(@Optional() bsForm: BsFormComponent, sanitizer: DomSanitizer) {\n    if (!bsForm) {\n      throw '<bs-searchbox> must be inside a <bs-form>';\n    }\n\n    this.searchterm$.pipe(debounceTime(200), takeUntilDestroyed()).subscribe((searchterm) => {\n      if (searchterm === '') {\n        this.suggestions = [];\n      } else {\n        this.isBusy$.next(true);\n        this.provideSuggestions.emit(searchterm);\n      }\n    });\n    \n    import('bootstrap-icons/icons/caret-up-fill.svg').then((icon) => {\n      this.caretUpFill = sanitizer.bypassSecurityTrustHtml(icon.default);\n    });\n    import('bootstrap-icons/icons/caret-down-fill.svg').then((icon) => {\n      this.caretDownFill = sanitizer.bypassSecurityTrustHtml(icon.default);\n    });\n  }\n\n  caretUpFill?: SafeHtml;\n  caretDownFill?: SafeHtml;\n  colors = Color;\n  isBusy$ = new BehaviorSubject<boolean>(false);\n  @ViewChild('textbox') textbox!: ElementRef<HTMLInputElement>;\n  \n  //#region isOpen\n  private _isOpen = false;\n  public get isOpen() {\n    return this._isOpen;\n  }\n  @Input() public set isOpen(value: boolean) {\n    const changed = (this._isOpen !== value);\n    this._isOpen = value;\n    if (changed && value) {\n      setTimeout(() => this.textbox.nativeElement.setSelectionRange(0, -1), 20);\n    }\n  }\n  //#endregion\n\n  //#region suggestions\n  private _suggestions: T[] = [];\n  public get suggestions() {\n    return this._suggestions;\n  }\n  @Input() public set suggestions(value: T[]) {\n    this._suggestions = value;\n    this.isBusy$.next(false);\n  }\n  //#endregion\n\n  //#region selectedItem\n  private _selectedItem?: T;\n  public get selectedItem() {\n    return this._selectedItem;\n  }\n  @Input() public set selectedItem(value: T | undefined) {\n    this._selectedItem = value;\n    this.selectedItemChange.emit(value);\n  };\n  @Output() selectedItemChange = new EventEmitter<T | undefined>();\n  //#endregion\n\n  //#region searchterm\n  searchterm$ = new BehaviorSubject<string>('');\n  public get searchterm() {\n    return this.searchterm$.value;\n  }\n  @Input() public set searchterm(value: string) {\n    this.searchterm$.next(value);\n  }\n  //#endregion\n\n  suggestionTemplate?: TemplateRef<BsSuggestionTemplateContext<T, U>>;\n  enterSearchtermTemplate?: TemplateRef<T>;\n  noResultsTemplate?: TemplateRef<T>;\n  @Output() provideSuggestions = new EventEmitter<string>();\n\n  onSearchtermChange(searchterm: string) {\n    this.searchterm$.next(searchterm);\n  }\n\n  onSuggestionClicked(suggestion: T) {\n    this.selectedItem = suggestion;\n    this.isOpen = false;\n    this.searchterm = '';\n  }\n}\n","<bs-has-overlay></bs-has-overlay>\n<div bsDropdown [(isOpen)]=\"isOpen\" [hasBackdrop]=\"false\" [sameDropdownWidth]=\"true\">\n    <button [color]=\"colors.primary\" class=\"d-flex w-100\" bsDropdownToggle>\n        <div class=\"flex-grow-1\">\n            @if (!selectedItem) {\n                <ng-content></ng-content>\n            } @else if (suggestionTemplate) {\n                <ng-container *ngTemplateOutlet=\"suggestionTemplate; context: { $implicit: selectedItem, searchbox: this }\"></ng-container>\n            }\n        </div>\n        <span [innerHTML]=\"isOpen ? caretUpFill : caretDownFill\" class=\"float-end\"></span>\n    </button>\n    <bs-dropdown-menu *bsDropdownMenu>\n        @let isBusy = isBusy$ | async;\n        @if (isBusy) {\n            <bs-progress [isIndeterminate]=\"true\" class=\"prog\">\n                <bs-progress-bar></bs-progress-bar>\n            </bs-progress>\n        }\n        <div class=\"w-100 px-2 mb-2\">\n            <input type=\"text\" #textbox autofocus class=\"form-control d-block\" [ngModel]=\"searchterm$ | async\" (ngModelChange)=\"onSearchtermChange($event)\">\n        </div>\n        \n        @if (searchterm === '') {\n            <bs-dropdown-item [disabled]=\"true\">\n                <ng-container *ngTemplateOutlet=\"enterSearchtermTemplate ?? defaultEnterSearchtermTemplate; context: { }\"></ng-container>\n            </bs-dropdown-item>\n        } @else {\n            <div class=\"overflow-y-auto\" [style.max-height.px]=\"200\">\n                @for (suggestion of suggestions; track suggestion) {\n                    <bs-dropdown-item (click)=\"onSuggestionClicked(suggestion)\" [isSelected]=\"selectedItem?.id === suggestion.id\" [disabled]=\"isBusy ?? true\">\n                        @if (suggestionTemplate) {\n                            <ng-container *ngTemplateOutlet=\"suggestionTemplate; context: { $implicit: suggestion, searchbox: this }\"></ng-container>\n                        }\n                    </bs-dropdown-item>\n                }\n                @if (suggestions.length === 0) {\n                    <bs-dropdown-item [disabled]=\"true\">\n                        <ng-container *ngTemplateOutlet=\"noResultsTemplate ?? defaultNoResultsTemplate; context: { }\"></ng-container>\n                    </bs-dropdown-item>\n                }\n            </div>\n        }\n    </bs-dropdown-menu>\n</div>\n\n<ng-template #defaultEnterSearchtermTemplate>\n    Enter a search term\n</ng-template>\n<ng-template #defaultNoResultsTemplate>\n    No results\n</ng-template>","import { Directive, TemplateRef } from '@angular/core';\nimport { HasId } from '@mintplayer/ng-bootstrap/has-id';\nimport { BsSearchboxComponent } from '../searchbox/searchbox.component';\n\n@Directive({\n  selector: '[bsEnterSearchTermTemplate]',\n  standalone: false,\n})\nexport class BsEnterSearchTermTemplateDirective<T extends HasId<U>, U> {\n  constructor(searchbox: BsSearchboxComponent<T, U>, template: TemplateRef<T>) {\n    searchbox.enterSearchtermTemplate = template;\n  }\n}\n","import { Directive, Input, TemplateRef } from '@angular/core';\nimport { HasId } from '@mintplayer/ng-bootstrap/has-id';\nimport { BsSearchboxComponent } from '../searchbox/searchbox.component';\n\n@Directive({\n  selector: '[bsSuggestionTemplate]',\n  standalone: false,\n})\nexport class BsSuggestionTemplateDirective<TData extends HasId<U>, U> {\n  constructor(private searchbox: BsSearchboxComponent<TData, U>, template: TemplateRef<BsSuggestionTemplateContext<TData, U>>) {\n    searchbox.suggestionTemplate = template;\n  }\n  \n  public static ngTemplateContextGuard<TData extends HasId<U>, U>(\n    dir: BsSuggestionTemplateDirective<TData, U>,\n    ctx: any\n  ): ctx is BsSuggestionTemplateContext<Exclude<TData, false | 0 | '' | null | undefined>, U> {\n    return true;\n  }\n\n  @Input() set bsSuggestionTemplateOf(value: TData[]) {\n    this.searchbox.suggestions = value;\n  }\n}\n\nexport class BsSuggestionTemplateContext<TData extends HasId<U>, U> {\n  public $implicit: TData = null!;\n  public searchbox: BsSearchboxComponent<TData, U> = null!;\n}","import { Directive, TemplateRef } from '@angular/core';\nimport { HasId } from '@mintplayer/ng-bootstrap/has-id';\nimport { BsSearchboxComponent } from '../searchbox/searchbox.component';\n\n@Directive({\n  selector: '[bsNoResultsTemplate]',\n  standalone: false,\n})\nexport class BsNoResultsTemplateDirective<T extends HasId<U>, U> {\n  constructor(searchbox: BsSearchboxComponent<T, U>, template: TemplateRef<T>) {\n    searchbox.noResultsTemplate = template;\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AsyncPipe, NgTemplateOutlet } from '@angular/common';\nimport { FocusOnLoadDirective } from '@mintplayer/ng-focus-on-load';\nimport { BsDropdownModule } from '@mintplayer/ng-bootstrap/dropdown';\nimport { BsProgressBarModule } from '@mintplayer/ng-bootstrap/progress-bar';\nimport { BsDropdownMenuModule } from '@mintplayer/ng-bootstrap/dropdown-menu';\nimport { BsButtonTypeDirective } from '@mintplayer/ng-bootstrap/button-type';\nimport { BsHasOverlayComponent } from '@mintplayer/ng-bootstrap/has-overlay';\nimport { BsSearchboxComponent } from './searchbox/searchbox.component';\nimport { BsEnterSearchTermTemplateDirective } from './directives/enter-search-term.directive';\nimport { BsSuggestionTemplateDirective } from './directives/suggestion.directive';\nimport { BsNoResultsTemplateDirective } from './directives/no-results.directive';\n\n@NgModule({\n  declarations: [\n    BsSearchboxComponent,\n    BsEnterSearchTermTemplateDirective,\n    BsSuggestionTemplateDirective,\n    BsNoResultsTemplateDirective,\n  ],\n  imports: [\n    FormsModule,\n    AsyncPipe,\n    NgTemplateOutlet,\n    FocusOnLoadDirective,\n    BsDropdownModule,\n    BsDropdownMenuModule,\n    BsButtonTypeDirective,\n    BsProgressBarModule,\n    BsHasOverlayComponent,\n  ],\n  exports: [\n    BsSearchboxComponent,\n    BsEnterSearchTermTemplateDirective,\n    BsSuggestionTemplateDirective,\n    BsNoResultsTemplateDirective,\n  ],\n})\nexport class BsSearchboxModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.BsSearchboxComponent"],"mappings":"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"}
+{"version":3,"file":"mintplayer-ng-bootstrap-searchbox.mjs","sources":["../../../../libs/mintplayer-ng-bootstrap/searchbox/src/searchbox/searchbox.component.ts","../../../../libs/mintplayer-ng-bootstrap/searchbox/src/searchbox/searchbox.component.html","../../../../libs/mintplayer-ng-bootstrap/searchbox/src/directives/enter-search-term.directive.ts","../../../../libs/mintplayer-ng-bootstrap/searchbox/src/directives/suggestion.directive.ts","../../../../libs/mintplayer-ng-bootstrap/searchbox/src/directives/no-results.directive.ts","../../../../libs/mintplayer-ng-bootstrap/searchbox/src/searchbox.module.ts","../../../../libs/mintplayer-ng-bootstrap/searchbox/mintplayer-ng-bootstrap-searchbox.ts"],"sourcesContent":["/// <reference types=\"../types\" />\n\nimport { ChangeDetectionStrategy, Component, effect, ElementRef, inject, input, model, output, signal, TemplateRef, ViewChild } from '@angular/core';\nimport { Color } from '@mintplayer/ng-bootstrap';\nimport { BsFormComponent } from '@mintplayer/ng-bootstrap/form';\nimport { HasId } from '@mintplayer/ng-bootstrap/has-id';\nimport { BsSuggestionTemplateContext } from '../directives';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\n\n@Component({\n  selector: 'bs-searchbox',\n  templateUrl: './searchbox.component.html',\n  styleUrls: ['./searchbox.component.scss'],\n  standalone: false,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BsSearchboxComponent<T extends HasId<U>, U> {\n\n  private bsForm = inject(BsFormComponent, { optional: true });\n  private sanitizer = inject(DomSanitizer);\n\n  caretUpFill = signal<SafeHtml | undefined>(undefined);\n  caretDownFill = signal<SafeHtml | undefined>(undefined);\n  colors = Color;\n  isBusy = signal<boolean>(false);\n  @ViewChild('textbox') textbox!: ElementRef<HTMLInputElement>;\n\n  isOpen = model(false);\n  selectedItem = model<T | undefined>(undefined);\n  searchterm = model('');\n\n  suggestions = model<T[]>([]);\n\n  suggestionTemplate?: TemplateRef<BsSuggestionTemplateContext<T, U>>;\n  enterSearchtermTemplate?: TemplateRef<T>;\n  noResultsTemplate?: TemplateRef<T>;\n  provideSuggestions = output<string>();\n\n  private debouncedSearchterm = signal('');\n  private debounceTimeout: any;\n\n  constructor() {\n    if (!this.bsForm) {\n      throw '<bs-searchbox> must be inside a <bs-form>';\n    }\n\n    effect(() => {\n      const searchterm = this.searchterm();\n      clearTimeout(this.debounceTimeout);\n      this.debounceTimeout = setTimeout(() => {\n        if (searchterm === '') {\n          // clear suggestions - will be handled by the template\n        } else {\n          this.isBusy.set(true);\n          this.provideSuggestions.emit(searchterm);\n        }\n      }, 200);\n    });\n\n    effect(() => {\n      const suggestions = this.suggestions();\n      if (suggestions) {\n        this.isBusy.set(false);\n      }\n    });\n\n    effect(() => {\n      const isOpen = this.isOpen();\n      if (isOpen) {\n        setTimeout(() => this.textbox?.nativeElement?.setSelectionRange(0, -1), 20);\n      }\n    });\n\n    import('bootstrap-icons/icons/caret-up-fill.svg').then((icon) => {\n      this.caretUpFill.set(this.sanitizer.bypassSecurityTrustHtml(icon.default));\n    });\n    import('bootstrap-icons/icons/caret-down-fill.svg').then((icon) => {\n      this.caretDownFill.set(this.sanitizer.bypassSecurityTrustHtml(icon.default));\n    });\n  }\n\n  onSearchtermChange(searchterm: string) {\n    this.searchterm.set(searchterm);\n  }\n\n  onSuggestionClicked(suggestion: T) {\n    this.selectedItem.set(suggestion);\n    this.isOpen.set(false);\n    this.searchterm.set('');\n  }\n}\n","<bs-has-overlay></bs-has-overlay>\n<div bsDropdown [(isOpen)]=\"isOpen\" [hasBackdrop]=\"false\" [sameDropdownWidth]=\"true\">\n    <button [color]=\"colors.primary\" class=\"d-flex w-100\" bsDropdownToggle>\n        <div class=\"flex-grow-1\">\n            @if (!selectedItem()) {\n                <ng-content></ng-content>\n            } @else if (suggestionTemplate) {\n                <ng-container *ngTemplateOutlet=\"suggestionTemplate; context: { $implicit: selectedItem(), searchbox: this }\"></ng-container>\n            }\n        </div>\n        <span [innerHTML]=\"isOpen() ? caretUpFill() : caretDownFill()\" class=\"float-end\"></span>\n    </button>\n    <bs-dropdown-menu *bsDropdownMenu>\n        @if (isBusy()) {\n            <bs-progress [isIndeterminate]=\"true\" class=\"prog\">\n                <bs-progress-bar></bs-progress-bar>\n            </bs-progress>\n        }\n        <div class=\"w-100 px-2 mb-2\">\n            <input type=\"text\" #textbox autofocus class=\"form-control d-block\" [ngModel]=\"searchterm()\" (ngModelChange)=\"onSearchtermChange($event)\">\n        </div>\n\n        @if (searchterm() === '') {\n            <bs-dropdown-item [disabled]=\"true\">\n                <ng-container *ngTemplateOutlet=\"enterSearchtermTemplate ?? defaultEnterSearchtermTemplate; context: { }\"></ng-container>\n            </bs-dropdown-item>\n        } @else {\n            <div class=\"overflow-y-auto\" [style.max-height.px]=\"200\">\n                @for (suggestion of suggestions(); track suggestion) {\n                    <bs-dropdown-item (click)=\"onSuggestionClicked(suggestion)\" [isSelected]=\"selectedItem()?.id === suggestion.id\" [disabled]=\"isBusy()\">\n                        @if (suggestionTemplate) {\n                            <ng-container *ngTemplateOutlet=\"suggestionTemplate; context: { $implicit: suggestion, searchbox: this }\"></ng-container>\n                        }\n                    </bs-dropdown-item>\n                }\n                @if (suggestions().length === 0) {\n                    <bs-dropdown-item [disabled]=\"true\">\n                        <ng-container *ngTemplateOutlet=\"noResultsTemplate ?? defaultNoResultsTemplate; context: { }\"></ng-container>\n                    </bs-dropdown-item>\n                }\n            </div>\n        }\n    </bs-dropdown-menu>\n</div>\n\n<ng-template #defaultEnterSearchtermTemplate>\n    Enter a search term\n</ng-template>\n<ng-template #defaultNoResultsTemplate>\n    No results\n</ng-template>\n","import { Directive, inject, TemplateRef } from '@angular/core';\nimport { HasId } from '@mintplayer/ng-bootstrap/has-id';\nimport { BsSearchboxComponent } from '../searchbox/searchbox.component';\n\n@Directive({\n  selector: '[bsEnterSearchTermTemplate]',\n  standalone: false,\n})\nexport class BsEnterSearchTermTemplateDirective<T extends HasId<U>, U> {\n  constructor() {\n    const searchbox = inject<BsSearchboxComponent<T, U>>(BsSearchboxComponent);\n    const template = inject<TemplateRef<T>>(TemplateRef);\n    searchbox.enterSearchtermTemplate = template;\n  }\n}\n","import { Directive, inject, Input, TemplateRef } from '@angular/core';\nimport { HasId } from '@mintplayer/ng-bootstrap/has-id';\nimport { BsSearchboxComponent } from '../searchbox/searchbox.component';\n\n@Directive({\n  selector: '[bsSuggestionTemplate]',\n  standalone: false,\n})\nexport class BsSuggestionTemplateDirective<TData extends HasId<U>, U> {\n  private searchbox = inject<BsSearchboxComponent<TData, U>>(BsSearchboxComponent);\n\n  constructor() {\n    const template = inject<TemplateRef<BsSuggestionTemplateContext<TData, U>>>(TemplateRef);\n    this.searchbox.suggestionTemplate = template;\n  }\n  \n  public static ngTemplateContextGuard<TData extends HasId<U>, U>(\n    dir: BsSuggestionTemplateDirective<TData, U>,\n    ctx: any\n  ): ctx is BsSuggestionTemplateContext<Exclude<TData, false | 0 | '' | null | undefined>, U> {\n    return true;\n  }\n\n  @Input() set bsSuggestionTemplateOf(value: TData[]) {\n    this.searchbox.suggestions.set(value);\n  }\n}\n\nexport class BsSuggestionTemplateContext<TData extends HasId<U>, U> {\n  public $implicit: TData = null!;\n  public searchbox: BsSearchboxComponent<TData, U> = null!;\n}","import { Directive, inject, TemplateRef } from '@angular/core';\nimport { HasId } from '@mintplayer/ng-bootstrap/has-id';\nimport { BsSearchboxComponent } from '../searchbox/searchbox.component';\n\n@Directive({\n  selector: '[bsNoResultsTemplate]',\n  standalone: false,\n})\nexport class BsNoResultsTemplateDirective<T extends HasId<U>, U> {\n  constructor() {\n    const searchbox = inject<BsSearchboxComponent<T, U>>(BsSearchboxComponent);\n    const template = inject<TemplateRef<T>>(TemplateRef);\n    searchbox.noResultsTemplate = template;\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AsyncPipe, NgTemplateOutlet } from '@angular/common';\nimport { FocusOnLoadDirective } from '@mintplayer/ng-focus-on-load';\nimport { BsDropdownModule } from '@mintplayer/ng-bootstrap/dropdown';\nimport { BsProgressBarModule } from '@mintplayer/ng-bootstrap/progress-bar';\nimport { BsDropdownMenuModule } from '@mintplayer/ng-bootstrap/dropdown-menu';\nimport { BsButtonTypeDirective } from '@mintplayer/ng-bootstrap/button-type';\nimport { BsHasOverlayComponent } from '@mintplayer/ng-bootstrap/has-overlay';\nimport { BsSearchboxComponent } from './searchbox/searchbox.component';\nimport { BsEnterSearchTermTemplateDirective } from './directives/enter-search-term.directive';\nimport { BsSuggestionTemplateDirective } from './directives/suggestion.directive';\nimport { BsNoResultsTemplateDirective } from './directives/no-results.directive';\n\n@NgModule({\n  declarations: [\n    BsSearchboxComponent,\n    BsEnterSearchTermTemplateDirective,\n    BsSuggestionTemplateDirective,\n    BsNoResultsTemplateDirective,\n  ],\n  imports: [\n    FormsModule,\n    AsyncPipe,\n    NgTemplateOutlet,\n    FocusOnLoadDirective,\n    BsDropdownModule,\n    BsDropdownMenuModule,\n    BsButtonTypeDirective,\n    BsProgressBarModule,\n    BsHasOverlayComponent,\n  ],\n  exports: [\n    BsSearchboxComponent,\n    BsEnterSearchTermTemplateDirective,\n    BsSuggestionTemplateDirective,\n    BsNoResultsTemplateDirective,\n  ],\n})\nexport class BsSearchboxModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -1,24 +1,19 @@
 import * as i0 from '@angular/core';
-import { Input, ViewChild, Component, forwardRef, HostListener, Directive, Optional, Host, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
+import { inject, Renderer2, input, computed, effect, ViewChild, ChangeDetectionStrategy, Component, ElementRef, forwardRef, Input, HostListener, Directive, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { BehaviorSubject, map } from 'rxjs';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 class BsSelectComponent {
-    constructor(renderer) {
-        this.renderer = renderer;
+    constructor() {
+        this.renderer = inject(Renderer2);
         // For debugging purposes
-        this.identifier = 0;
-        //#region Size
-        this.size$ = new BehaviorSubject('md');
-        //#endregion
-        //#region Multiple
-        this.multiple$ = new BehaviorSubject(false);
-        //#endregion
-        //#region NumberVisible
-        this.numberVisible$ = new BehaviorSubject(null);
-        this.sizeClass$ = this.size$.pipe(map((size) => {
+        this.identifier = input(0, ...(ngDevMode ? [{ debugName: "identifier" }] : []));
+        this.size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+        this.numberVisible = input(null, ...(ngDevMode ? [{ debugName: "numberVisible" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.sizeClass = computed(() => {
+            const size = this.size();
             switch (size) {
                 case 'sm':
                 case 'lg':
@@ -26,71 +21,38 @@ class BsSelectComponent {
                 default:
                     return null;
             }
-        }));
-        this.multipleValue$ = this.multiple$.pipe(map((multiple) => {
-            if (multiple) {
+        }, ...(ngDevMode ? [{ debugName: "sizeClass" }] : []));
+        this.multipleValue = computed(() => {
+            if (this.multiple()) {
                 return true;
             }
             else {
                 return null;
             }
-        }));
-    }
-    ngOnInit() { }
-    get size() {
-        return this.size$.value;
-    }
-    set size(value) {
-        this.size$.next(value);
-    }
-    get multiple() {
-        return this.multiple$.value;
-    }
-    set multiple(value) {
-        this.multiple$.next(value);
-    }
-    get numberVisible() {
-        return this.numberVisible$.value;
-    }
-    set numberVisible(value) {
-        this.numberVisible$.next(value);
-    }
-    //#endregion
-    //#region Disabled
-    get disabled() {
-        return this.selectBox.nativeElement.disabled;
-    }
-    set disabled(value) {
-        if (this.selectBox) {
-            this.renderer.setProperty(this.selectBox.nativeElement, 'disabled', value);
-        }
+        }, ...(ngDevMode ? [{ debugName: "multipleValue" }] : []));
+        effect(() => {
+            const disabled = this.disabled();
+            if (this.selectBox) {
+                this.renderer.setProperty(this.selectBox.nativeElement, 'disabled', disabled);
+            }
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSelectComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: BsSelectComponent, isStandalone: false, selector: "bs-select", inputs: { identifier: "identifier", size: "size", multiple: "multiple", numberVisible: "numberVisible", disabled: "disabled" }, viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true }], ngImport: i0, template: "<select class=\"form-select\" #selectBox [class]=\"sizeClass$ | async\" [attr.multiple]=\"multipleValue$ | async\" [attr.size]=\"numberVisible$ | async\" aria-label=\"Default select example\">\n    <ng-content></ng-content>\n</select>", styles: [":host ::ng-deep .form-select{--bs-form-select-bg-img: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e\");display:block;width:100%;padding:.375rem 2.25rem .375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:var(--bs-body-color);appearance:none;background-color:var(--bs-body-bg);background-image:var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon, none);background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;border:var(--bs-border-width) solid var(--bs-border-color);border-radius:var(--bs-border-radius);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){:host ::ng-deep .form-select{transition:none}}:host ::ng-deep .form-select:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem #0d6efd40}:host ::ng-deep .form-select[multiple],:host ::ng-deep .form-select[size]:not([size=\"1\"]){padding-right:.75rem;background-image:none}:host ::ng-deep .form-select:disabled{background-color:var(--bs-secondary-bg)}:host ::ng-deep .form-select:-moz-focusring{color:transparent;text-shadow:0 0 0 var(--bs-body-color)}:host ::ng-deep .form-select-sm{padding-top:.25rem;padding-bottom:.25rem;padding-left:.5rem;font-size:.875rem;border-radius:var(--bs-border-radius-sm)}:host ::ng-deep .form-select-lg{padding-top:.5rem;padding-bottom:.5rem;padding-left:1rem;font-size:1.25rem;border-radius:var(--bs-border-radius-lg)}:host ::ng-deep [data-bs-theme=dark] .form-select{--bs-form-select-bg-img: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e\")}\n"], dependencies: [{ kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: BsSelectComponent, isStandalone: false, selector: "bs-select", inputs: { identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, numberVisible: { classPropertyName: "numberVisible", publicName: "numberVisible", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true }], ngImport: i0, template: "<select class=\"form-select\" #selectBox [class]=\"sizeClass()\" [attr.multiple]=\"multipleValue()\" [attr.size]=\"numberVisible()\" aria-label=\"Default select example\">\n    <ng-content></ng-content>\n</select>\n", styles: [":host ::ng-deep .form-select{--bs-form-select-bg-img: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e\");display:block;width:100%;padding:.375rem 2.25rem .375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:var(--bs-body-color);appearance:none;background-color:var(--bs-body-bg);background-image:var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon, none);background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;border:var(--bs-border-width) solid var(--bs-border-color);border-radius:var(--bs-border-radius);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){:host ::ng-deep .form-select{transition:none}}:host ::ng-deep .form-select:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem #0d6efd40}:host ::ng-deep .form-select[multiple],:host ::ng-deep .form-select[size]:not([size=\"1\"]){padding-right:.75rem;background-image:none}:host ::ng-deep .form-select:disabled{background-color:var(--bs-secondary-bg)}:host ::ng-deep .form-select:-moz-focusring{color:transparent;text-shadow:0 0 0 var(--bs-body-color)}:host ::ng-deep .form-select-sm{padding-top:.25rem;padding-bottom:.25rem;padding-left:.5rem;font-size:.875rem;border-radius:var(--bs-border-radius-sm)}:host ::ng-deep .form-select-lg{padding-top:.5rem;padding-bottom:.5rem;padding-left:1rem;font-size:1.25rem;border-radius:var(--bs-border-radius-lg)}:host ::ng-deep [data-bs-theme=dark] .form-select{--bs-form-select-bg-img: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e\")}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-select', standalone: false, template: "<select class=\"form-select\" #selectBox [class]=\"sizeClass$ | async\" [attr.multiple]=\"multipleValue$ | async\" [attr.size]=\"numberVisible$ | async\" aria-label=\"Default select example\">\n    <ng-content></ng-content>\n</select>", styles: [":host ::ng-deep .form-select{--bs-form-select-bg-img: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e\");display:block;width:100%;padding:.375rem 2.25rem .375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:var(--bs-body-color);appearance:none;background-color:var(--bs-body-bg);background-image:var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon, none);background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;border:var(--bs-border-width) solid var(--bs-border-color);border-radius:var(--bs-border-radius);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){:host ::ng-deep .form-select{transition:none}}:host ::ng-deep .form-select:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem #0d6efd40}:host ::ng-deep .form-select[multiple],:host ::ng-deep .form-select[size]:not([size=\"1\"]){padding-right:.75rem;background-image:none}:host ::ng-deep .form-select:disabled{background-color:var(--bs-secondary-bg)}:host ::ng-deep .form-select:-moz-focusring{color:transparent;text-shadow:0 0 0 var(--bs-body-color)}:host ::ng-deep .form-select-sm{padding-top:.25rem;padding-bottom:.25rem;padding-left:.5rem;font-size:.875rem;border-radius:var(--bs-border-radius-sm)}:host ::ng-deep .form-select-lg{padding-top:.5rem;padding-bottom:.5rem;padding-left:1rem;font-size:1.25rem;border-radius:var(--bs-border-radius-lg)}:host ::ng-deep [data-bs-theme=dark] .form-select{--bs-form-select-bg-img: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e\")}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { identifier: [{
-                type: Input
-            }], selectBox: [{
+            args: [{ selector: 'bs-select', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<select class=\"form-select\" #selectBox [class]=\"sizeClass()\" [attr.multiple]=\"multipleValue()\" [attr.size]=\"numberVisible()\" aria-label=\"Default select example\">\n    <ng-content></ng-content>\n</select>\n", styles: [":host ::ng-deep .form-select{--bs-form-select-bg-img: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e\");display:block;width:100%;padding:.375rem 2.25rem .375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:var(--bs-body-color);appearance:none;background-color:var(--bs-body-bg);background-image:var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon, none);background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;border:var(--bs-border-width) solid var(--bs-border-color);border-radius:var(--bs-border-radius);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){:host ::ng-deep .form-select{transition:none}}:host ::ng-deep .form-select:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem #0d6efd40}:host ::ng-deep .form-select[multiple],:host ::ng-deep .form-select[size]:not([size=\"1\"]){padding-right:.75rem;background-image:none}:host ::ng-deep .form-select:disabled{background-color:var(--bs-secondary-bg)}:host ::ng-deep .form-select:-moz-focusring{color:transparent;text-shadow:0 0 0 var(--bs-body-color)}:host ::ng-deep .form-select-sm{padding-top:.25rem;padding-bottom:.25rem;padding-left:.5rem;font-size:.875rem;border-radius:var(--bs-border-radius-sm)}:host ::ng-deep .form-select-lg{padding-top:.5rem;padding-bottom:.5rem;padding-left:1rem;font-size:1.25rem;border-radius:var(--bs-border-radius-lg)}:host ::ng-deep [data-bs-theme=dark] .form-select{--bs-form-select-bg-img: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e\")}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { identifier: [{ type: i0.Input, args: [{ isSignal: true, alias: "identifier", required: false }] }], selectBox: [{
                 type: ViewChild,
                 args: ['selectBox']
-            }], size: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], numberVisible: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }] } });
+            }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], numberVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberVisible", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 class BsSelectValueAccessor {
-    constructor(_renderer, _elementRef, selectBox) {
-        this._renderer = _renderer;
-        this._elementRef = _elementRef;
-        this.selectBox = selectBox;
+    constructor() {
+        this._renderer = inject(Renderer2);
+        this._elementRef = inject(ElementRef);
+        this.selectBox = inject(BsSelectComponent);
         this.onChange = (_) => { };
         this.onTouched = () => { };
         this.optionMap = new Map();
@@ -167,7 +129,7 @@ class BsSelectValueAccessor {
         const id = this.extractId(valueString);
         return this.optionMap.has(id) ? this.optionMap.get(id) : valueString;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSelectValueAccessor, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: BsSelectComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSelectValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: BsSelectValueAccessor, isStandalone: false, selector: "bs-select", inputs: { compareWith: "compareWith" }, host: { listeners: { "change": "hostOnChange($event)", "blur": "hostBlur($event)" } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BsSelectValueAccessor),
@@ -185,7 +147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                             multi: true,
                         }],
                 }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: BsSelectComponent }], propDecorators: { hostOnChange: [{
+        }], propDecorators: { hostOnChange: [{
                 type: HostListener,
                 args: ['change', ['$event']]
             }], hostBlur: [{
@@ -195,10 +157,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 type: Input
             }] } });
 class BsSelectOption {
-    constructor(element, renderer, select) {
-        this.element = element;
-        this.renderer = renderer;
-        this.select = select;
+    constructor() {
+        this.element = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.select = inject(BsSelectValueAccessor, { optional: true, host: true });
         if (this.select) {
             this.id = this.select.registerOption();
         }
@@ -231,7 +193,7 @@ class BsSelectOption {
             this.select.writeValue(this.select.value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSelectOption, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: BsSelectValueAccessor, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: BsSelectOption, isStandalone: false, selector: "option", inputs: { ngValue: "ngValue", value: "value" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsSelectOption, decorators: [{
@@ -240,11 +202,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     selector: 'option',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: BsSelectValueAccessor, decorators: [{
-                    type: Optional
-                }, {
-                    type: Host
-                }] }], propDecorators: { ngValue: [{
+        }], ctorParameters: () => [], propDecorators: { ngValue: [{
                 type: Input,
                 args: ['ngValue']
             }], value: [{