@recursyve/ngx-material-components 20.0.2 → 21.0.0

package/fesm2022/recursyve-ngx-material-components-typeahead.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, DestroyRef, signal, computed, Injectable, Component, input, output, viewChild, ElementRef, ChangeDetectorRef, effect, ViewChildren, Directive, booleanAttribute, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+import { InjectionToken, inject, DestroyRef, signal, computed, Injectable, Component, input, output, viewChild, ElementRef, ChangeDetectorRef, effect, ViewChildren, Directive, booleanAttribute, untracked, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Subject, switchMap, defer, EMPTY, map, catchError, finalize, startWith, merge, debounceTime, distinctUntilChanged, take, takeUntil } from 'rxjs';
+import { Subject, switchMap, EMPTY, defer, map, catchError, finalize, tap, startWith, merge, debounceTime, distinctUntilChanged, take, takeUntil } from 'rxjs';
 import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i1 from '@angular/forms';
@@ -31,7 +31,7 @@ class NiceTypeaheadService {
     _request = signal(null, ...(ngDevMode ? [{ debugName: "_request" }] : []));
     _nextRequest = signal(null, ...(ngDevMode ? [{ debugName: "_nextRequest" }] : []));
     _preloaded = signal(false, ...(ngDevMode ? [{ debugName: "_preloaded" }] : []));
-    _autoSelectFirstValue = signal(false, ...(ngDevMode ? [{ debugName: "_autoSelectFirstValue" }] : []));
+    _autoSelectMode = signal("none", ...(ngDevMode ? [{ debugName: "_autoSelectMode" }] : []));
     _loading = signal(true, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
     items = this._items.asReadonly();
     active = this._active.asReadonly();
@@ -45,16 +45,30 @@ class NiceTypeaheadService {
             throw new Error("No provider found for resource " + resource);
         }
         this.resourceProvider = provider;
-        if (options?.autoSelectFirstValue) {
-            this._autoSelectFirstValue.set(options.autoSelectFirstValue);
+        if (options?.autoSelectMode) {
+            this._autoSelectMode.set(options.autoSelectMode);
         }
         if (options?.searchOptions) {
             this._searchOptions.set(options.searchOptions);
         }
     }
+    autoSelect(items) {
+        if (this._autoSelectMode() === "first_result" && !this._preloaded()) {
+            this._preloaded.set(true);
+            this._active.set(items[0]);
+        }
+        if (this._autoSelectMode() === "single_result" && items.length === 1) {
+            this._preloaded.set(true);
+            this._active.set(items[0]);
+        }
+    }
     setSearchOptions(options) {
         this._searchOptions.set(options);
     }
+    patchSearchOptions(options) {
+        const currentOptions = this._searchOptions();
+        this._searchOptions.set({ ...currentOptions, ...options });
+    }
     setActive(active) {
         this._active.set(active);
     }
@@ -62,7 +76,13 @@ class NiceTypeaheadService {
         this.fetchActive$.next({ id });
     }
     reload() {
-        this.fetchResources$.next({ page: 0, searchQuery: this._request()?.searchQuery ?? "" });
+        const onFinish = new Subject();
+        this.fetchResources$.next({
+            page: 0,
+            searchQuery: this._request()?.searchQuery ?? "",
+            onFinish
+        });
+        return onFinish.asObservable();
     }
     reloadActive() {
         const active = this._active();
@@ -78,17 +98,18 @@ class NiceTypeaheadService {
         this._items.set(items);
     }
     search(searchQuery) {
-        this.fetchResources$.next({
-            searchQuery,
-            page: 0
-        });
+        const onFinish = new Subject();
+        this.fetchResources$.next({ searchQuery, page: 0, onFinish });
+        return onFinish.asObservable();
     }
     loadMore() {
         const nextRequest = this._nextRequest();
         if (!nextRequest || this._loading()) {
-            return;
+            return EMPTY;
         }
-        this.fetchResources$.next(nextRequest);
+        const onFinish = new Subject();
+        this.fetchResources$.next({ ...nextRequest, onFinish });
+        return onFinish.asObservable();
     }
     fetchActive(request) {
         return defer(() => {
@@ -114,6 +135,11 @@ class NiceTypeaheadService {
     fetchResources(request) {
         return defer(() => {
             if (!this.resourceProvider) {
+                const error = new Error("Resource provider not initialized");
+                if (request.onFinish) {
+                    request.onFinish.error(error);
+                    request.onFinish.complete();
+                }
                 return EMPTY;
             }
             this._loading.set(true);
@@ -138,9 +164,23 @@ class NiceTypeaheadService {
             else {
                 this._nextRequest.set(null);
             }
-            if (this._autoSelectFirstValue() && !this._preloaded()) {
-                this._preloaded.set(true);
-                this._active.set(result.items[0]);
+        }), tap({
+            next: () => {
+                if (request.onFinish) {
+                    request.onFinish.next();
+                    request.onFinish.complete();
+                }
+            },
+            error: (error) => {
+                if (request.onFinish) {
+                    request.onFinish.error(error);
+                    request.onFinish.complete();
+                }
+            },
+            finalize: () => {
+                if (request.onFinish && !request.onFinish.closed) {
+                    request.onFinish.complete();
+                }
             }
         }), catchError(() => EMPTY), finalize(() => {
             this._loading.set(false);
@@ -152,10 +192,10 @@ class NiceTypeaheadService {
         }
         return this.resourceProvider.format(item);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceTypeaheadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceTypeaheadService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: NiceTypeaheadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: NiceTypeaheadService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceTypeaheadService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: NiceTypeaheadService, decorators: [{
             type: Injectable
         }] });
 
@@ -168,10 +208,10 @@ function provideAsyncTypeaheadResources(providers) {
 }
 
 class NiceTypeaheadSearchIcon {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceTypeaheadSearchIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: NiceTypeaheadSearchIcon, isStandalone: true, selector: "nice-typeahead-search-icon", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <path d=\"M1.4720451262 13.356970375A9.063 9.063 0 1 0 18.154024235 6.267298379a9.063 9.063 0 1 0 -16.6819791088 7.089671996Z\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"></path>\n    <path d=\"m16.221 16.22 7.029 7.03\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"></path>\n</svg>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: NiceTypeaheadSearchIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: NiceTypeaheadSearchIcon, isStandalone: true, selector: "nice-typeahead-search-icon", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <path d=\"M1.4720451262 13.356970375A9.063 9.063 0 1 0 18.154024235 6.267298379a9.063 9.063 0 1 0 -16.6819791088 7.089671996Z\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"></path>\n    <path d=\"m16.221 16.22 7.029 7.03\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"></path>\n</svg>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceTypeaheadSearchIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: NiceTypeaheadSearchIcon, decorators: [{
             type: Component,
             args: [{ selector: "nice-typeahead-search-icon", template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <path d=\"M1.4720451262 13.356970375A9.063 9.063 0 1 0 18.154024235 6.267298379a9.063 9.063 0 1 0 -16.6819791088 7.089671996Z\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"></path>\n    <path d=\"m16.221 16.22 7.029 7.03\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"></path>\n</svg>\n" }]
         }] });
@@ -618,7 +658,7 @@ class NiceTypeaheadBase {
             // because the typing sequence can include the space key.
         }
         else if (!isTyping &&
-            (keyCode === ENTER || keyCode === SPACE) &&
+            keyCode === ENTER &&
             manager.activeItem &&
             !hasModifierKey(event)) {
             event.preventDefault();
@@ -639,22 +679,27 @@ class NiceTypeaheadBase {
         }
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceTypeaheadBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.2.1", type: NiceTypeaheadBase, isStandalone: true, inputs: { noItemsFoundLabel: { classPropertyName: "noItemsFoundLabel", publicName: "noItemsFoundLabel", isSignal: true, isRequired: false, transformFunction: null }, labelProperty: { classPropertyName: "labelProperty", publicName: "labelProperty", isSignal: true, isRequired: false, transformFunction: null }, formatLabelFn: { classPropertyName: "formatLabelFn", publicName: "formatLabelFn", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, canRemoveValue: { classPropertyName: "canRemoveValue", publicName: "canRemoveValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "_panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "_overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "options", predicate: MatOption, descendants: true }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: NiceTypeaheadBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.0.5", type: NiceTypeaheadBase, isStandalone: true, inputs: { noItemsFoundLabel: { classPropertyName: "noItemsFoundLabel", publicName: "noItemsFoundLabel", isSignal: true, isRequired: false, transformFunction: null }, labelProperty: { classPropertyName: "labelProperty", publicName: "labelProperty", isSignal: true, isRequired: false, transformFunction: null }, formatLabelFn: { classPropertyName: "formatLabelFn", publicName: "formatLabelFn", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, canRemoveValue: { classPropertyName: "canRemoveValue", publicName: "canRemoveValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "_panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "_overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "options", predicate: MatOption, descendants: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceTypeaheadBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: NiceTypeaheadBase, decorators: [{
             type: Directive
         }], ctorParameters: () => [], propDecorators: { options: [{
                 type: ViewChildren,
                 args: [MatOption]
-            }] } });
+            }], noItemsFoundLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsFoundLabel", required: false }] }], labelProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelProperty", required: false }] }], formatLabelFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatLabelFn", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], canRemoveValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "canRemoveValue", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], _input: [{ type: i0.ViewChild, args: ["input", { isSignal: true }] }], _panel: [{ type: i0.ViewChild, args: ["panel", { isSignal: true }] }], _overlayDir: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }] } });
 
 class NiceAsyncTypeahead extends NiceTypeaheadBase {
     resource = input.required(...(ngDevMode ? [{ debugName: "resource" }] : []));
     searchOptions = input(null, ...(ngDevMode ? [{ debugName: "searchOptions" }] : []));
-    autoSelectFirstValue = input(false, ...(ngDevMode ? [{ debugName: "autoSelectFirstValue", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    autoSelectMode = input("none", ...(ngDevMode ? [{ debugName: "autoSelectMode" }] : []));
+    /**
+     * @deprecated Use autoSelectMode instead
+     */
+    autoSelectFirstValue = input(false, { ...(ngDevMode ? { debugName: "autoSelectFirstValue" } : {}), transform: booleanAttribute });
     filteredValues = computed(() => this.service.items(), ...(ngDevMode ? [{ debugName: "filteredValues" }] : []));
     optionsContainer = viewChild("optionsContainer", ...(ngDevMode ? [{ debugName: "optionsContainer" }] : []));
+    prefilled = signal(false, ...(ngDevMode ? [{ debugName: "prefilled" }] : []));
     service = inject(NiceTypeaheadService);
     _compareWith = (o1, o2) => {
         if (!(typeof o1 === "object" && o1 && typeof o2 === "object" && o2)) {
@@ -684,12 +729,20 @@ class NiceAsyncTypeahead extends NiceTypeaheadBase {
         effect(() => {
             this.value = this.service.active();
         });
+        effect(() => {
+            if (this.focused) {
+                return;
+            }
+            const items = this.service.items();
+            untracked(() => this.service.autoSelect(items));
+        });
     }
     ngOnInit() {
         super.ngOnInit();
+        const autoSelectMode = this.autoSelectMode() ?? (this.autoSelectFirstValue() ? "first_result" : "none");
         const searchOptions = this.optionsContainer();
         this.service.init(this.resource(), {
-            autoSelectFirstValue: this.autoSelectFirstValue(),
+            autoSelectMode: autoSelectMode,
             ...(searchOptions && { searchOptions: searchOptions })
         });
     }
@@ -703,9 +756,14 @@ class NiceAsyncTypeahead extends NiceTypeaheadBase {
     }
     onFocusChanged(isFocused) {
         super.onFocusChanged(isFocused);
-        if (isFocused) {
-            this._searchControl.patchValue("");
+        if (!isFocused) {
+            return;
+        }
+        if (this.prefilled()) {
+            this.prefilled.set(false);
+            return;
         }
+        this._searchControl.patchValue("");
     }
     formatLabel(item) {
         return this.service.formatLabel(item);
@@ -720,11 +778,24 @@ class NiceAsyncTypeahead extends NiceTypeaheadBase {
         this._selectOptionByValue(option.value);
         this.stateChanges.next();
     }
+    prefill(searchQuery) {
+        this.prefilled.set(true);
+        this._searchControl.patchValue(searchQuery);
+    }
+    search(searchQuery) {
+        this.service.search(searchQuery);
+    }
     setSearchOptions(options) {
         this.service.setSearchOptions(options);
     }
+    setActive(active) {
+        this.service.setActive(active);
+    }
+    patchSearchOptions(options) {
+        this.service.patchSearchOptions(options);
+    }
     reload() {
-        this.service.reload();
+        return this.service.reload();
     }
     reloadActive() {
         this.service.reloadActive();
@@ -741,13 +812,13 @@ class NiceAsyncTypeahead extends NiceTypeaheadBase {
             this.lastScrollHeight = target.scrollHeight;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceAsyncTypeahead, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: NiceAsyncTypeahead, isStandalone: true, selector: "nice-async-typeahead", inputs: { resource: { classPropertyName: "resource", publicName: "resource", isSignal: true, isRequired: true, transformFunction: null }, searchOptions: { classPropertyName: "searchOptions", publicName: "searchOptions", isSignal: true, isRequired: false, transformFunction: null }, autoSelectFirstValue: { classPropertyName: "autoSelectFirstValue", publicName: "autoSelectFirstValue", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "aria-haspopup": "listbox" }, listeners: { "keydown": "_handleKeydown($event)", "focus": "onFocusChanged(true)", "blur": "onFocusChanged(false)" }, properties: { "attr.id": "id", "attr.aria-controls": "panelOpen ? id + \"-panel\" : null", "attr.aria-expanded": "panelOpen", "attr.aria-required": "required.toString()", "attr.aria-disabled": "disabled.toString()", "attr.aria-invalid": "errorState", "class.nice-typeahead-disabled": "disabled", "class.nice-typeahead-invalid": "errorState", "class.nice-typeahead-required": "required", "class.nice-typeahead-empty": "empty" }, classAttribute: "nice-typeahead" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: NiceAsyncTypeahead, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: NiceAsyncTypeahead, isStandalone: true, selector: "nice-async-typeahead", inputs: { resource: { classPropertyName: "resource", publicName: "resource", isSignal: true, isRequired: true, transformFunction: null }, searchOptions: { classPropertyName: "searchOptions", publicName: "searchOptions", isSignal: true, isRequired: false, transformFunction: null }, autoSelectMode: { classPropertyName: "autoSelectMode", publicName: "autoSelectMode", isSignal: true, isRequired: false, transformFunction: null }, autoSelectFirstValue: { classPropertyName: "autoSelectFirstValue", publicName: "autoSelectFirstValue", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "aria-haspopup": "listbox" }, listeners: { "keydown": "_handleKeydown($event)", "focus": "onFocusChanged(true)", "blur": "onFocusChanged(false)" }, properties: { "attr.id": "id", "attr.aria-controls": "panelOpen ? id + \"-panel\" : null", "attr.aria-expanded": "panelOpen", "attr.aria-required": "required.toString()", "attr.aria-disabled": "disabled.toString()", "attr.aria-invalid": "errorState", "class.nice-typeahead-disabled": "disabled", "class.nice-typeahead-invalid": "errorState", "class.nice-typeahead-required": "required", "class.nice-typeahead-empty": "empty" }, classAttribute: "nice-typeahead" }, providers: [
             { provide: MatFormFieldControl, useExisting: NiceAsyncTypeahead },
             NiceTypeaheadService
-        ], viewQueries: [{ propertyName: "optionsContainer", first: true, predicate: ["optionsContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n    #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n    class=\"nice-typeahead\"\n    cdk-overlay-origin\n>\n    <div class=\"nice-typeahead-value\">\n        @if (_empty()) {\n            <span class=\"nice-typeahead-placeholder mat-mdc-select-min-line\">{{ _placeholder() }}</span>\n        } @else {\n            <span class=\"nice-typeahead-value-text\">\n                <span class=\"mat-mdc-select-min-line\">\n                    @if (_value(); as activeValue) {\n                        {{ formatLabel(activeValue) }}\n                    }\n                </span>\n            </span>\n        }\n    </div>\n\n    <div class=\"nice-typeahead-suffix\">\n        @if (_empty()) {\n            <div class=\"mat-mdc-select-arrow\">\n                <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" aria-hidden=\"true\">\n                    <path d=\"M7 10l5 5 5-5z\"></path>\n                </svg>\n            </div>\n        } @else if (canRemoveValue()) {\n            <button class=\"nice-typeahead-remove\" mat-icon-button (click)=\"$event.stopPropagation(); removeActiveValue()\">\n                <svg viewBox=\"0 -960 960 960\">\n                    <path d=\"m291-240-51-51 189-189-189-189 51-51 189 189 189-189 51 51-189 189 189 189-51 51-189-189-189 189Z\"/>\n                </svg>\n            </button>\n        }\n    </div>\n</div>\n\n<ng-template\n    cdk-connected-overlay\n    cdkConnectedOverlayLockPosition\n    cdkConnectedOverlayHasBackdrop\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayWidth]=\"_overlayWidth\"\n    [cdkConnectedOverlayOrigin]=\"_preferredOverlayOrigin || fallbackOverlayOrigin\"\n    (attach)=\"_onAttached()\"\n    (backdropClick)=\"close()\"\n    (detach)=\"close()\"\n>\n    <div\n        #panel\n        role=\"listbox\"\n        tabindex=\"-1\"\n        class=\"nice-typeahead-panel nice-typeahead--open nice-typehead-animations-enabled\"\n        [ngClass]=\"panelClass()\"\n        [attr.id]=\"id + '-panel'\"\n        (keydown)=\"_handleKeydown($event)\"\n        (scrollend)=\"_handleScrollEnd()\"\n    >\n        <div class=\"nice-typeahead-search-input\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <input\n                    #input\n                    class=\"nice-typeahead__input\"\n                    matInput\n                    [formControl]=\"_searchControl\"\n                >\n\n                <nice-typeahead-search-icon matIconPrefix />\n            </mat-form-field>\n        </div>\n\n        <div #optionsContainer class=\"nice-typeahead-options\" role=\"presentation\">\n            @for (item of filteredValues(); track item) {\n                <mat-option [value]=\"item\">\n                    @if (optionTemplate(); as optionTemplate) {\n                        <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: item }\"></ng-container>\n                    } @else {\n                        {{ formatLabel(item) }}\n                    }\n                </mat-option>\n            } @empty {\n                <mat-option disabled>\n                    <span class=\"nice-typeahead__no-items\">\n                        {{ noItemsFoundLabel() }}\n                    </span>\n                </mat-option>\n            }\n        </div>\n    </div>\n</ng-template>\n", styles: ["nice-typeahead,nice-async-typeahead{display:inline-block;width:100%;outline:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:var(--mat-select-enabled-trigger-text-color, var(--mat-app-on-surface));font-family:var(--mat-select-trigger-text-font, var(--mat-app-body-large-font));line-height:var(--mat-select-trigger-text-line-height, var(--mat-app-body-large-line-height));font-size:var(--mat-select-trigger-text-size, var(--mat-app-body-large-size));font-weight:var(--mat-select-trigger-text-weight, var(--mat-app-body-large-weight));letter-spacing:var(--mat-select-trigger-text-tracking, var(--mat-app-body-large-tracking))}nice-typeahead.nice-typeahead-disabled,nice-async-typeahead.nice-typeahead-disabled{color:var(--mat-select-disabled-trigger-text-color)}nice-typeahead.nice-typeahead-disabled .mat-mdc-select-arrow,nice-typeahead.nice-typeahead-disabled .nice-typeahead-remove,nice-async-typeahead.nice-typeahead-disabled .mat-mdc-select-arrow,nice-async-typeahead.nice-typeahead-disabled .nice-typeahead-remove{color:var(--mat-select-disabled-trigger-text-color)}nice-typeahead.nice-typeahead-invalid .mat-mdc-select-arrow,nice-async-typeahead.nice-typeahead-invalid .mat-mdc-select-arrow{color:var(--mat-select-invalid-arrow-color)}nice-typeahead .nice-typeahead,nice-async-typeahead .nice-typeahead{width:100%;display:inline-flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative;box-sizing:border-box}nice-typeahead .nice-typeahead-suffix,nice-async-typeahead .nice-typeahead-suffix{height:24px;flex-shrink:0;display:inline-flex;align-items:center;--mdc-icon-button-state-layer-size: 24px}nice-typeahead .nice-typeahead-suffix .nice-typeahead-remove,nice-async-typeahead .nice-typeahead-suffix .nice-typeahead-remove{margin-right:-6px}nice-typeahead .nice-typeahead-value,nice-async-typeahead .nice-typeahead-value{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nice-typeahead .nice-typeahead-value-text,nice-async-typeahead .nice-typeahead-value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nice-typeahead .mat-mdc-select-min-line:empty:before,nice-async-typeahead .mat-mdc-select-min-line:empty:before{content:\" \";white-space:pre;width:1px;display:inline-block;visibility:hidden}nice-typeahead .nice-typeahead__input,nice-async-typeahead .nice-typeahead__input{border:none;outline:none;box-shadow:none;background:none;padding:0;margin:0;color:inherit}.mat-mdc-form-field-type-nice-typeahead:not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper{cursor:pointer}.mat-mdc-form-field-type-nice-typeahead.mat-form-field-appearance-outline .mdc-notched-outline__notch{max-width:calc(100% - 60px)}@keyframes _nice-typeahead-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _nice-typeahead-exit{0%{opacity:1}to{opacity:0}}div.nice-typeahead-panel{width:100%;outline:0;padding:8px 0;border-radius:4px;box-sizing:border-box;position:static;background-color:var(--mat-select-panel-background-color, var(--mat-app-surface-container))}div.nice-typeahead-panel nice-typeahead-search-icon{width:16px;height:16px;margin-right:8px;margin-left:16px}div.nice-typeahead-panel nice-typeahead-search-icon svg{width:16px;height:16px}div.nice-typeahead-panel .nice-typeahead-search-input{padding-left:8px;padding-right:8px;padding-bottom:8px}div.nice-typeahead-panel .nice-typeahead-search-input .mat-mdc-form-field,div.nice-typeahead-panel .nice-typeahead-search-input .mat-mdc-form-field-infix{width:100%}div.nice-typeahead-panel .nice-typeahead-options{overflow:auto;max-height:384px}div.nice-typeahead-panel{box-shadow:var(--mat-select-container-elevation-shadow)}.nice-typehead-animations-enabled{animation:_nice-typeahead-enter .12s cubic-bezier(0,0,.2,1)}.nice-typehead-animations-enabled.mat-select-panel-exit{animation:_nice-typeahead-exit .1s linear}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NiceTypeaheadSearchIcon, selector: "nice-typeahead-search-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "optionsContainer", first: true, predicate: ["optionsContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n    #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n    class=\"nice-typeahead\"\n    cdk-overlay-origin\n>\n    <div class=\"nice-typeahead-value\">\n        @if (_empty()) {\n            <span class=\"nice-typeahead-placeholder mat-mdc-select-min-line\">{{ _placeholder() }}</span>\n        } @else {\n            <span class=\"nice-typeahead-value-text\">\n                <span class=\"mat-mdc-select-min-line\">\n                    @if (_value(); as activeValue) {\n                        {{ formatLabel(activeValue) }}\n                    }\n                </span>\n            </span>\n        }\n    </div>\n\n    <div class=\"nice-typeahead-suffix\">\n        @if (_empty()) {\n            <div class=\"mat-mdc-select-arrow\">\n                <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" aria-hidden=\"true\">\n                    <path d=\"M7 10l5 5 5-5z\"></path>\n                </svg>\n            </div>\n        } @else if (canRemoveValue()) {\n            <button class=\"nice-typeahead-remove\" mat-icon-button (click)=\"$event.stopPropagation(); removeActiveValue()\">\n                <svg viewBox=\"0 -960 960 960\">\n                    <path d=\"m291-240-51-51 189-189-189-189 51-51 189 189 189-189 51 51-189 189 189 189-51 51-189-189-189 189Z\"/>\n                </svg>\n            </button>\n        }\n    </div>\n</div>\n\n<ng-template\n    cdk-connected-overlay\n    cdkConnectedOverlayLockPosition\n    cdkConnectedOverlayHasBackdrop\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayWidth]=\"_overlayWidth\"\n    [cdkConnectedOverlayOrigin]=\"_preferredOverlayOrigin || fallbackOverlayOrigin\"\n    (attach)=\"_onAttached()\"\n    (backdropClick)=\"close()\"\n    (detach)=\"close()\"\n>\n    <div\n        #panel\n        role=\"listbox\"\n        tabindex=\"-1\"\n        class=\"nice-typeahead-panel nice-typeahead--open nice-typehead-animations-enabled\"\n        [ngClass]=\"panelClass()\"\n        [attr.id]=\"id + '-panel'\"\n        (keydown)=\"_handleKeydown($event)\"\n        (scrollend)=\"_handleScrollEnd()\"\n    >\n        <div class=\"nice-typeahead-search-input\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <input\n                    #input\n                    class=\"nice-typeahead__input\"\n                    matInput\n                    [formControl]=\"_searchControl\"\n                >\n\n                <nice-typeahead-search-icon matIconPrefix />\n            </mat-form-field>\n        </div>\n\n        <div #optionsContainer class=\"nice-typeahead-options\" role=\"presentation\">\n            @for (item of filteredValues(); track item) {\n                <mat-option [value]=\"item\">\n                    @if (optionTemplate(); as optionTemplate) {\n                        <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: item }\"></ng-container>\n                    } @else {\n                        {{ formatLabel(item) }}\n                    }\n                </mat-option>\n            } @empty {\n                <mat-option disabled>\n                    <span class=\"nice-typeahead__no-items\">\n                        {{ noItemsFoundLabel() }}\n                    </span>\n                </mat-option>\n            }\n        </div>\n    </div>\n</ng-template>\n", styles: ["nice-typeahead,nice-async-typeahead{display:inline-block;width:100%;outline:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:var(--mat-select-enabled-trigger-text-color, var(--mat-app-on-surface));font-family:var(--mat-select-trigger-text-font, var(--mat-app-body-large-font));line-height:var(--mat-select-trigger-text-line-height, var(--mat-app-body-large-line-height));font-size:var(--mat-select-trigger-text-size, var(--mat-app-body-large-size));font-weight:var(--mat-select-trigger-text-weight, var(--mat-app-body-large-weight));letter-spacing:var(--mat-select-trigger-text-tracking, var(--mat-app-body-large-tracking))}nice-typeahead.nice-typeahead-disabled,nice-async-typeahead.nice-typeahead-disabled{color:var(--mat-select-disabled-trigger-text-color)}nice-typeahead.nice-typeahead-disabled .mat-mdc-select-arrow,nice-typeahead.nice-typeahead-disabled .nice-typeahead-remove,nice-async-typeahead.nice-typeahead-disabled .mat-mdc-select-arrow,nice-async-typeahead.nice-typeahead-disabled .nice-typeahead-remove{color:var(--mat-select-disabled-trigger-text-color)}nice-typeahead.nice-typeahead-invalid .mat-mdc-select-arrow,nice-async-typeahead.nice-typeahead-invalid .mat-mdc-select-arrow{color:var(--mat-select-invalid-arrow-color)}nice-typeahead .nice-typeahead,nice-async-typeahead .nice-typeahead{width:100%;display:inline-flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative;box-sizing:border-box}nice-typeahead .nice-typeahead-suffix,nice-async-typeahead .nice-typeahead-suffix{height:24px;flex-shrink:0;display:inline-flex;align-items:center;--mdc-icon-button-state-layer-size: 24px}nice-typeahead .nice-typeahead-suffix .nice-typeahead-remove,nice-async-typeahead .nice-typeahead-suffix .nice-typeahead-remove{margin-right:-6px}nice-typeahead .nice-typeahead-value,nice-async-typeahead .nice-typeahead-value{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nice-typeahead .nice-typeahead-value-text,nice-async-typeahead .nice-typeahead-value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nice-typeahead .mat-mdc-select-min-line:empty:before,nice-async-typeahead .mat-mdc-select-min-line:empty:before{content:\" \";white-space:pre;width:1px;display:inline-block;visibility:hidden}nice-typeahead .nice-typeahead__input,nice-async-typeahead .nice-typeahead__input{border:none;outline:none;box-shadow:none;background:none;padding:0;margin:0;color:inherit}.mat-mdc-form-field-type-nice-typeahead:not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper{cursor:pointer}.mat-mdc-form-field-type-nice-typeahead.mat-form-field-appearance-outline .mdc-notched-outline__notch{max-width:calc(100% - 60px)}@keyframes _nice-typeahead-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _nice-typeahead-exit{0%{opacity:1}to{opacity:0}}div.nice-typeahead-panel{width:100%;outline:0;padding:8px 0;border-radius:4px;box-sizing:border-box;position:static;background-color:var(--mat-select-panel-background-color, var(--mat-app-surface-container))}div.nice-typeahead-panel nice-typeahead-search-icon{width:16px;height:16px;margin-right:8px;margin-left:16px}div.nice-typeahead-panel nice-typeahead-search-icon svg{width:16px;height:16px}div.nice-typeahead-panel .nice-typeahead-search-input{padding-left:8px;padding-right:8px;padding-bottom:8px}div.nice-typeahead-panel .nice-typeahead-search-input .mat-mdc-form-field,div.nice-typeahead-panel .nice-typeahead-search-input .mat-mdc-form-field-infix{width:100%}div.nice-typeahead-panel .nice-typeahead-options{overflow:auto;max-height:384px}div.nice-typeahead-panel{box-shadow:var(--mat-select-container-elevation-shadow)}.nice-typehead-animations-enabled{animation:_nice-typeahead-enter .12s cubic-bezier(0,0,.2,1)}.nice-typehead-animations-enabled.mat-select-panel-exit{animation:_nice-typeahead-exit .1s linear}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NiceTypeaheadSearchIcon, selector: "nice-typeahead-search-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceAsyncTypeahead, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: NiceAsyncTypeahead, decorators: [{
             type: Component,
             args: [{ selector: "nice-async-typeahead", imports: [
                         CdkOverlayOrigin,
@@ -782,7 +853,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         "(focus)": "onFocusChanged(true)",
                         "(blur)": "onFocusChanged(false)"
                     }, template: "<div\n    #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n    class=\"nice-typeahead\"\n    cdk-overlay-origin\n>\n    <div class=\"nice-typeahead-value\">\n        @if (_empty()) {\n            <span class=\"nice-typeahead-placeholder mat-mdc-select-min-line\">{{ _placeholder() }}</span>\n        } @else {\n            <span class=\"nice-typeahead-value-text\">\n                <span class=\"mat-mdc-select-min-line\">\n                    @if (_value(); as activeValue) {\n                        {{ formatLabel(activeValue) }}\n                    }\n                </span>\n            </span>\n        }\n    </div>\n\n    <div class=\"nice-typeahead-suffix\">\n        @if (_empty()) {\n            <div class=\"mat-mdc-select-arrow\">\n                <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" aria-hidden=\"true\">\n                    <path d=\"M7 10l5 5 5-5z\"></path>\n                </svg>\n            </div>\n        } @else if (canRemoveValue()) {\n            <button class=\"nice-typeahead-remove\" mat-icon-button (click)=\"$event.stopPropagation(); removeActiveValue()\">\n                <svg viewBox=\"0 -960 960 960\">\n                    <path d=\"m291-240-51-51 189-189-189-189 51-51 189 189 189-189 51 51-189 189 189 189-51 51-189-189-189 189Z\"/>\n                </svg>\n            </button>\n        }\n    </div>\n</div>\n\n<ng-template\n    cdk-connected-overlay\n    cdkConnectedOverlayLockPosition\n    cdkConnectedOverlayHasBackdrop\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayWidth]=\"_overlayWidth\"\n    [cdkConnectedOverlayOrigin]=\"_preferredOverlayOrigin || fallbackOverlayOrigin\"\n    (attach)=\"_onAttached()\"\n    (backdropClick)=\"close()\"\n    (detach)=\"close()\"\n>\n    <div\n        #panel\n        role=\"listbox\"\n        tabindex=\"-1\"\n        class=\"nice-typeahead-panel nice-typeahead--open nice-typehead-animations-enabled\"\n        [ngClass]=\"panelClass()\"\n        [attr.id]=\"id + '-panel'\"\n        (keydown)=\"_handleKeydown($event)\"\n        (scrollend)=\"_handleScrollEnd()\"\n    >\n        <div class=\"nice-typeahead-search-input\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <input\n                    #input\n                    class=\"nice-typeahead__input\"\n                    matInput\n                    [formControl]=\"_searchControl\"\n                >\n\n                <nice-typeahead-search-icon matIconPrefix />\n            </mat-form-field>\n        </div>\n\n        <div #optionsContainer class=\"nice-typeahead-options\" role=\"presentation\">\n            @for (item of filteredValues(); track item) {\n                <mat-option [value]=\"item\">\n                    @if (optionTemplate(); as optionTemplate) {\n                        <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: item }\"></ng-container>\n                    } @else {\n                        {{ formatLabel(item) }}\n                    }\n                </mat-option>\n            } @empty {\n                <mat-option disabled>\n                    <span class=\"nice-typeahead__no-items\">\n                        {{ noItemsFoundLabel() }}\n                    </span>\n                </mat-option>\n            }\n        </div>\n    </div>\n</ng-template>\n", styles: ["nice-typeahead,nice-async-typeahead{display:inline-block;width:100%;outline:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:var(--mat-select-enabled-trigger-text-color, var(--mat-app-on-surface));font-family:var(--mat-select-trigger-text-font, var(--mat-app-body-large-font));line-height:var(--mat-select-trigger-text-line-height, var(--mat-app-body-large-line-height));font-size:var(--mat-select-trigger-text-size, var(--mat-app-body-large-size));font-weight:var(--mat-select-trigger-text-weight, var(--mat-app-body-large-weight));letter-spacing:var(--mat-select-trigger-text-tracking, var(--mat-app-body-large-tracking))}nice-typeahead.nice-typeahead-disabled,nice-async-typeahead.nice-typeahead-disabled{color:var(--mat-select-disabled-trigger-text-color)}nice-typeahead.nice-typeahead-disabled .mat-mdc-select-arrow,nice-typeahead.nice-typeahead-disabled .nice-typeahead-remove,nice-async-typeahead.nice-typeahead-disabled .mat-mdc-select-arrow,nice-async-typeahead.nice-typeahead-disabled .nice-typeahead-remove{color:var(--mat-select-disabled-trigger-text-color)}nice-typeahead.nice-typeahead-invalid .mat-mdc-select-arrow,nice-async-typeahead.nice-typeahead-invalid .mat-mdc-select-arrow{color:var(--mat-select-invalid-arrow-color)}nice-typeahead .nice-typeahead,nice-async-typeahead .nice-typeahead{width:100%;display:inline-flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative;box-sizing:border-box}nice-typeahead .nice-typeahead-suffix,nice-async-typeahead .nice-typeahead-suffix{height:24px;flex-shrink:0;display:inline-flex;align-items:center;--mdc-icon-button-state-layer-size: 24px}nice-typeahead .nice-typeahead-suffix .nice-typeahead-remove,nice-async-typeahead .nice-typeahead-suffix .nice-typeahead-remove{margin-right:-6px}nice-typeahead .nice-typeahead-value,nice-async-typeahead .nice-typeahead-value{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nice-typeahead .nice-typeahead-value-text,nice-async-typeahead .nice-typeahead-value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nice-typeahead .mat-mdc-select-min-line:empty:before,nice-async-typeahead .mat-mdc-select-min-line:empty:before{content:\" \";white-space:pre;width:1px;display:inline-block;visibility:hidden}nice-typeahead .nice-typeahead__input,nice-async-typeahead .nice-typeahead__input{border:none;outline:none;box-shadow:none;background:none;padding:0;margin:0;color:inherit}.mat-mdc-form-field-type-nice-typeahead:not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper{cursor:pointer}.mat-mdc-form-field-type-nice-typeahead.mat-form-field-appearance-outline .mdc-notched-outline__notch{max-width:calc(100% - 60px)}@keyframes _nice-typeahead-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _nice-typeahead-exit{0%{opacity:1}to{opacity:0}}div.nice-typeahead-panel{width:100%;outline:0;padding:8px 0;border-radius:4px;box-sizing:border-box;position:static;background-color:var(--mat-select-panel-background-color, var(--mat-app-surface-container))}div.nice-typeahead-panel nice-typeahead-search-icon{width:16px;height:16px;margin-right:8px;margin-left:16px}div.nice-typeahead-panel nice-typeahead-search-icon svg{width:16px;height:16px}div.nice-typeahead-panel .nice-typeahead-search-input{padding-left:8px;padding-right:8px;padding-bottom:8px}div.nice-typeahead-panel .nice-typeahead-search-input .mat-mdc-form-field,div.nice-typeahead-panel .nice-typeahead-search-input .mat-mdc-form-field-infix{width:100%}div.nice-typeahead-panel .nice-typeahead-options{overflow:auto;max-height:384px}div.nice-typeahead-panel{box-shadow:var(--mat-select-container-elevation-shadow)}.nice-typehead-animations-enabled{animation:_nice-typeahead-enter .12s cubic-bezier(0,0,.2,1)}.nice-typehead-animations-enabled.mat-select-panel-exit{animation:_nice-typeahead-exit .1s linear}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { resource: [{ type: i0.Input, args: [{ isSignal: true, alias: "resource", required: true }] }], searchOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchOptions", required: false }] }], autoSelectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSelectMode", required: false }] }], autoSelectFirstValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSelectFirstValue", required: false }] }], optionsContainer: [{ type: i0.ViewChild, args: ["optionsContainer", { isSignal: true }] }] } });
 
 class NiceTypeahead extends NiceTypeaheadBase {
     values = input.required(...(ngDevMode ? [{ debugName: "values" }] : []));
@@ -819,10 +890,10 @@ class NiceTypeahead extends NiceTypeaheadBase {
             return false;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceTypeahead, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: NiceTypeahead, isStandalone: true, selector: "nice-typeahead", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: true, transformFunction: null }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "aria-haspopup": "listbox" }, listeners: { "keydown": "_handleKeydown($event)", "focus": "onFocusChanged(true)", "blur": "onFocusChanged(false)" }, properties: { "attr.id": "id", "attr.aria-controls": "panelOpen ? id + \"-panel\" : null", "attr.aria-expanded": "panelOpen", "attr.aria-required": "required.toString()", "attr.aria-disabled": "disabled.toString()", "attr.aria-invalid": "errorState", "class.nice-typeahead-disabled": "disabled", "class.nice-typeahead-invalid": "errorState", "class.nice-typeahead-required": "required", "class.nice-typeahead-empty": "empty" }, classAttribute: "nice-typeahead" }, providers: [{ provide: MatFormFieldControl, useExisting: NiceTypeahead }], usesInheritance: true, ngImport: i0, template: "<div\n    #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n    class=\"nice-typeahead\"\n    cdk-overlay-origin\n>\n    <div class=\"nice-typeahead-value\">\n        @if (_empty()) {\n            <span class=\"nice-typeahead-placeholder mat-mdc-select-min-line\">{{ _placeholder() }}</span>\n        } @else {\n            <span class=\"nice-typeahead-value-text\">\n                <span class=\"mat-mdc-select-min-line\">\n                    @if (_value(); as activeValue) {\n                        {{ formatLabel(activeValue) }}\n                    }\n                </span>\n            </span>\n        }\n    </div>\n\n    <div class=\"nice-typeahead-suffix\">\n        @if (_empty()) {\n            <div class=\"mat-mdc-select-arrow\">\n                <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" aria-hidden=\"true\">\n                    <path d=\"M7 10l5 5 5-5z\"></path>\n                </svg>\n            </div>\n        } @else if (canRemoveValue()) {\n            <button class=\"nice-typeahead-remove\" mat-icon-button (click)=\"$event.stopPropagation(); removeActiveValue()\">\n                <svg viewBox=\"0 -960 960 960\">\n                    <path d=\"m291-240-51-51 189-189-189-189 51-51 189 189 189-189 51 51-189 189 189 189-51 51-189-189-189 189Z\"/>\n                </svg>\n            </button>\n        }\n    </div>\n</div>\n\n<ng-template\n    cdk-connected-overlay\n    cdkConnectedOverlayLockPosition\n    cdkConnectedOverlayHasBackdrop\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayWidth]=\"_overlayWidth\"\n    [cdkConnectedOverlayOrigin]=\"_preferredOverlayOrigin || fallbackOverlayOrigin\"\n    (attach)=\"_onAttached()\"\n    (backdropClick)=\"close()\"\n    (detach)=\"close()\"\n>\n    <div\n        #panel\n        role=\"listbox\"\n        tabindex=\"-1\"\n        class=\"nice-typeahead-panel nice-typeahead--open nice-typehead-animations-enabled\"\n        [ngClass]=\"panelClass()\"\n        [attr.id]=\"id + '-panel'\"\n        (keydown)=\"_handleKeydown($event)\"\n        (scrollend)=\"_handleScrollEnd()\"\n    >\n        <div class=\"nice-typeahead-search-input\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <input\n                    #input\n                    class=\"nice-typeahead__input\"\n                    matInput\n                    [formControl]=\"_searchControl\"\n                >\n\n                <nice-typeahead-search-icon matIconPrefix />\n            </mat-form-field>\n        </div>\n\n        <div #optionsContainer class=\"nice-typeahead-options\" role=\"presentation\">\n            @for (item of filteredValues(); track item) {\n                <mat-option [value]=\"item\">\n                    @if (optionTemplate(); as optionTemplate) {\n                        <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: item }\"></ng-container>\n                    } @else {\n                        {{ formatLabel(item) }}\n                    }\n                </mat-option>\n            } @empty {\n                <mat-option disabled>\n                    <span class=\"nice-typeahead__no-items\">\n                        {{ noItemsFoundLabel() }}\n                    </span>\n                </mat-option>\n            }\n        </div>\n    </div>\n</ng-template>\n", styles: ["nice-typeahead,nice-async-typeahead{display:inline-block;width:100%;outline:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:var(--mat-select-enabled-trigger-text-color, var(--mat-app-on-surface));font-family:var(--mat-select-trigger-text-font, var(--mat-app-body-large-font));line-height:var(--mat-select-trigger-text-line-height, var(--mat-app-body-large-line-height));font-size:var(--mat-select-trigger-text-size, var(--mat-app-body-large-size));font-weight:var(--mat-select-trigger-text-weight, var(--mat-app-body-large-weight));letter-spacing:var(--mat-select-trigger-text-tracking, var(--mat-app-body-large-tracking))}nice-typeahead.nice-typeahead-disabled,nice-async-typeahead.nice-typeahead-disabled{color:var(--mat-select-disabled-trigger-text-color)}nice-typeahead.nice-typeahead-disabled .mat-mdc-select-arrow,nice-typeahead.nice-typeahead-disabled .nice-typeahead-remove,nice-async-typeahead.nice-typeahead-disabled .mat-mdc-select-arrow,nice-async-typeahead.nice-typeahead-disabled .nice-typeahead-remove{color:var(--mat-select-disabled-trigger-text-color)}nice-typeahead.nice-typeahead-invalid .mat-mdc-select-arrow,nice-async-typeahead.nice-typeahead-invalid .mat-mdc-select-arrow{color:var(--mat-select-invalid-arrow-color)}nice-typeahead .nice-typeahead,nice-async-typeahead .nice-typeahead{width:100%;display:inline-flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative;box-sizing:border-box}nice-typeahead .nice-typeahead-suffix,nice-async-typeahead .nice-typeahead-suffix{height:24px;flex-shrink:0;display:inline-flex;align-items:center;--mdc-icon-button-state-layer-size: 24px}nice-typeahead .nice-typeahead-suffix .nice-typeahead-remove,nice-async-typeahead .nice-typeahead-suffix .nice-typeahead-remove{margin-right:-6px}nice-typeahead .nice-typeahead-value,nice-async-typeahead .nice-typeahead-value{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nice-typeahead .nice-typeahead-value-text,nice-async-typeahead .nice-typeahead-value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nice-typeahead .mat-mdc-select-min-line:empty:before,nice-async-typeahead .mat-mdc-select-min-line:empty:before{content:\" \";white-space:pre;width:1px;display:inline-block;visibility:hidden}nice-typeahead .nice-typeahead__input,nice-async-typeahead .nice-typeahead__input{border:none;outline:none;box-shadow:none;background:none;padding:0;margin:0;color:inherit}.mat-mdc-form-field-type-nice-typeahead:not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper{cursor:pointer}.mat-mdc-form-field-type-nice-typeahead.mat-form-field-appearance-outline .mdc-notched-outline__notch{max-width:calc(100% - 60px)}@keyframes _nice-typeahead-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _nice-typeahead-exit{0%{opacity:1}to{opacity:0}}div.nice-typeahead-panel{width:100%;outline:0;padding:8px 0;border-radius:4px;box-sizing:border-box;position:static;background-color:var(--mat-select-panel-background-color, var(--mat-app-surface-container))}div.nice-typeahead-panel nice-typeahead-search-icon{width:16px;height:16px;margin-right:8px;margin-left:16px}div.nice-typeahead-panel nice-typeahead-search-icon svg{width:16px;height:16px}div.nice-typeahead-panel .nice-typeahead-search-input{padding-left:8px;padding-right:8px;padding-bottom:8px}div.nice-typeahead-panel .nice-typeahead-search-input .mat-mdc-form-field,div.nice-typeahead-panel .nice-typeahead-search-input .mat-mdc-form-field-infix{width:100%}div.nice-typeahead-panel .nice-typeahead-options{overflow:auto;max-height:384px}div.nice-typeahead-panel{box-shadow:var(--mat-select-container-elevation-shadow)}.nice-typehead-animations-enabled{animation:_nice-typeahead-enter .12s cubic-bezier(0,0,.2,1)}.nice-typehead-animations-enabled.mat-select-panel-exit{animation:_nice-typeahead-exit .1s linear}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NiceTypeaheadSearchIcon, selector: "nice-typeahead-search-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: NiceTypeahead, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: NiceTypeahead, isStandalone: true, selector: "nice-typeahead", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: true, transformFunction: null }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "aria-haspopup": "listbox" }, listeners: { "keydown": "_handleKeydown($event)", "focus": "onFocusChanged(true)", "blur": "onFocusChanged(false)" }, properties: { "attr.id": "id", "attr.aria-controls": "panelOpen ? id + \"-panel\" : null", "attr.aria-expanded": "panelOpen", "attr.aria-required": "required.toString()", "attr.aria-disabled": "disabled.toString()", "attr.aria-invalid": "errorState", "class.nice-typeahead-disabled": "disabled", "class.nice-typeahead-invalid": "errorState", "class.nice-typeahead-required": "required", "class.nice-typeahead-empty": "empty" }, classAttribute: "nice-typeahead" }, providers: [{ provide: MatFormFieldControl, useExisting: NiceTypeahead }], usesInheritance: true, ngImport: i0, template: "<div\n    #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n    class=\"nice-typeahead\"\n    cdk-overlay-origin\n>\n    <div class=\"nice-typeahead-value\">\n        @if (_empty()) {\n            <span class=\"nice-typeahead-placeholder mat-mdc-select-min-line\">{{ _placeholder() }}</span>\n        } @else {\n            <span class=\"nice-typeahead-value-text\">\n                <span class=\"mat-mdc-select-min-line\">\n                    @if (_value(); as activeValue) {\n                        {{ formatLabel(activeValue) }}\n                    }\n                </span>\n            </span>\n        }\n    </div>\n\n    <div class=\"nice-typeahead-suffix\">\n        @if (_empty()) {\n            <div class=\"mat-mdc-select-arrow\">\n                <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" aria-hidden=\"true\">\n                    <path d=\"M7 10l5 5 5-5z\"></path>\n                </svg>\n            </div>\n        } @else if (canRemoveValue()) {\n            <button class=\"nice-typeahead-remove\" mat-icon-button (click)=\"$event.stopPropagation(); removeActiveValue()\">\n                <svg viewBox=\"0 -960 960 960\">\n                    <path d=\"m291-240-51-51 189-189-189-189 51-51 189 189 189-189 51 51-189 189 189 189-51 51-189-189-189 189Z\"/>\n                </svg>\n            </button>\n        }\n    </div>\n</div>\n\n<ng-template\n    cdk-connected-overlay\n    cdkConnectedOverlayLockPosition\n    cdkConnectedOverlayHasBackdrop\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayWidth]=\"_overlayWidth\"\n    [cdkConnectedOverlayOrigin]=\"_preferredOverlayOrigin || fallbackOverlayOrigin\"\n    (attach)=\"_onAttached()\"\n    (backdropClick)=\"close()\"\n    (detach)=\"close()\"\n>\n    <div\n        #panel\n        role=\"listbox\"\n        tabindex=\"-1\"\n        class=\"nice-typeahead-panel nice-typeahead--open nice-typehead-animations-enabled\"\n        [ngClass]=\"panelClass()\"\n        [attr.id]=\"id + '-panel'\"\n        (keydown)=\"_handleKeydown($event)\"\n        (scrollend)=\"_handleScrollEnd()\"\n    >\n        <div class=\"nice-typeahead-search-input\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <input\n                    #input\n                    class=\"nice-typeahead__input\"\n                    matInput\n                    [formControl]=\"_searchControl\"\n                >\n\n                <nice-typeahead-search-icon matIconPrefix />\n            </mat-form-field>\n        </div>\n\n        <div #optionsContainer class=\"nice-typeahead-options\" role=\"presentation\">\n            @for (item of filteredValues(); track item) {\n                <mat-option [value]=\"item\">\n                    @if (optionTemplate(); as optionTemplate) {\n                        <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: item }\"></ng-container>\n                    } @else {\n                        {{ formatLabel(item) }}\n                    }\n                </mat-option>\n            } @empty {\n                <mat-option disabled>\n                    <span class=\"nice-typeahead__no-items\">\n                        {{ noItemsFoundLabel() }}\n                    </span>\n                </mat-option>\n            }\n        </div>\n    </div>\n</ng-template>\n", styles: ["nice-typeahead,nice-async-typeahead{display:inline-block;width:100%;outline:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:var(--mat-select-enabled-trigger-text-color, var(--mat-app-on-surface));font-family:var(--mat-select-trigger-text-font, var(--mat-app-body-large-font));line-height:var(--mat-select-trigger-text-line-height, var(--mat-app-body-large-line-height));font-size:var(--mat-select-trigger-text-size, var(--mat-app-body-large-size));font-weight:var(--mat-select-trigger-text-weight, var(--mat-app-body-large-weight));letter-spacing:var(--mat-select-trigger-text-tracking, var(--mat-app-body-large-tracking))}nice-typeahead.nice-typeahead-disabled,nice-async-typeahead.nice-typeahead-disabled{color:var(--mat-select-disabled-trigger-text-color)}nice-typeahead.nice-typeahead-disabled .mat-mdc-select-arrow,nice-typeahead.nice-typeahead-disabled .nice-typeahead-remove,nice-async-typeahead.nice-typeahead-disabled .mat-mdc-select-arrow,nice-async-typeahead.nice-typeahead-disabled .nice-typeahead-remove{color:var(--mat-select-disabled-trigger-text-color)}nice-typeahead.nice-typeahead-invalid .mat-mdc-select-arrow,nice-async-typeahead.nice-typeahead-invalid .mat-mdc-select-arrow{color:var(--mat-select-invalid-arrow-color)}nice-typeahead .nice-typeahead,nice-async-typeahead .nice-typeahead{width:100%;display:inline-flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative;box-sizing:border-box}nice-typeahead .nice-typeahead-suffix,nice-async-typeahead .nice-typeahead-suffix{height:24px;flex-shrink:0;display:inline-flex;align-items:center;--mdc-icon-button-state-layer-size: 24px}nice-typeahead .nice-typeahead-suffix .nice-typeahead-remove,nice-async-typeahead .nice-typeahead-suffix .nice-typeahead-remove{margin-right:-6px}nice-typeahead .nice-typeahead-value,nice-async-typeahead .nice-typeahead-value{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nice-typeahead .nice-typeahead-value-text,nice-async-typeahead .nice-typeahead-value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nice-typeahead .mat-mdc-select-min-line:empty:before,nice-async-typeahead .mat-mdc-select-min-line:empty:before{content:\" \";white-space:pre;width:1px;display:inline-block;visibility:hidden}nice-typeahead .nice-typeahead__input,nice-async-typeahead .nice-typeahead__input{border:none;outline:none;box-shadow:none;background:none;padding:0;margin:0;color:inherit}.mat-mdc-form-field-type-nice-typeahead:not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper{cursor:pointer}.mat-mdc-form-field-type-nice-typeahead.mat-form-field-appearance-outline .mdc-notched-outline__notch{max-width:calc(100% - 60px)}@keyframes _nice-typeahead-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _nice-typeahead-exit{0%{opacity:1}to{opacity:0}}div.nice-typeahead-panel{width:100%;outline:0;padding:8px 0;border-radius:4px;box-sizing:border-box;position:static;background-color:var(--mat-select-panel-background-color, var(--mat-app-surface-container))}div.nice-typeahead-panel nice-typeahead-search-icon{width:16px;height:16px;margin-right:8px;margin-left:16px}div.nice-typeahead-panel nice-typeahead-search-icon svg{width:16px;height:16px}div.nice-typeahead-panel .nice-typeahead-search-input{padding-left:8px;padding-right:8px;padding-bottom:8px}div.nice-typeahead-panel .nice-typeahead-search-input .mat-mdc-form-field,div.nice-typeahead-panel .nice-typeahead-search-input .mat-mdc-form-field-infix{width:100%}div.nice-typeahead-panel .nice-typeahead-options{overflow:auto;max-height:384px}div.nice-typeahead-panel{box-shadow:var(--mat-select-container-elevation-shadow)}.nice-typehead-animations-enabled{animation:_nice-typeahead-enter .12s cubic-bezier(0,0,.2,1)}.nice-typehead-animations-enabled.mat-select-panel-exit{animation:_nice-typeahead-exit .1s linear}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NiceTypeaheadSearchIcon, selector: "nice-typeahead-search-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceTypeahead, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: NiceTypeahead, decorators: [{
             type: Component,
             args: [{ selector: "nice-typeahead", imports: [
                         CdkOverlayOrigin,
@@ -854,7 +925,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         "(focus)": "onFocusChanged(true)",
                         "(blur)": "onFocusChanged(false)"
                     }, template: "<div\n    #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n    class=\"nice-typeahead\"\n    cdk-overlay-origin\n>\n    <div class=\"nice-typeahead-value\">\n        @if (_empty()) {\n            <span class=\"nice-typeahead-placeholder mat-mdc-select-min-line\">{{ _placeholder() }}</span>\n        } @else {\n            <span class=\"nice-typeahead-value-text\">\n                <span class=\"mat-mdc-select-min-line\">\n                    @if (_value(); as activeValue) {\n                        {{ formatLabel(activeValue) }}\n                    }\n                </span>\n            </span>\n        }\n    </div>\n\n    <div class=\"nice-typeahead-suffix\">\n        @if (_empty()) {\n            <div class=\"mat-mdc-select-arrow\">\n                <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" aria-hidden=\"true\">\n                    <path d=\"M7 10l5 5 5-5z\"></path>\n                </svg>\n            </div>\n        } @else if (canRemoveValue()) {\n            <button class=\"nice-typeahead-remove\" mat-icon-button (click)=\"$event.stopPropagation(); removeActiveValue()\">\n                <svg viewBox=\"0 -960 960 960\">\n                    <path d=\"m291-240-51-51 189-189-189-189 51-51 189 189 189-189 51 51-189 189 189 189-51 51-189-189-189 189Z\"/>\n                </svg>\n            </button>\n        }\n    </div>\n</div>\n\n<ng-template\n    cdk-connected-overlay\n    cdkConnectedOverlayLockPosition\n    cdkConnectedOverlayHasBackdrop\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayWidth]=\"_overlayWidth\"\n    [cdkConnectedOverlayOrigin]=\"_preferredOverlayOrigin || fallbackOverlayOrigin\"\n    (attach)=\"_onAttached()\"\n    (backdropClick)=\"close()\"\n    (detach)=\"close()\"\n>\n    <div\n        #panel\n        role=\"listbox\"\n        tabindex=\"-1\"\n        class=\"nice-typeahead-panel nice-typeahead--open nice-typehead-animations-enabled\"\n        [ngClass]=\"panelClass()\"\n        [attr.id]=\"id + '-panel'\"\n        (keydown)=\"_handleKeydown($event)\"\n        (scrollend)=\"_handleScrollEnd()\"\n    >\n        <div class=\"nice-typeahead-search-input\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <input\n                    #input\n                    class=\"nice-typeahead__input\"\n                    matInput\n                    [formControl]=\"_searchControl\"\n                >\n\n                <nice-typeahead-search-icon matIconPrefix />\n            </mat-form-field>\n        </div>\n\n        <div #optionsContainer class=\"nice-typeahead-options\" role=\"presentation\">\n            @for (item of filteredValues(); track item) {\n                <mat-option [value]=\"item\">\n                    @if (optionTemplate(); as optionTemplate) {\n                        <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: item }\"></ng-container>\n                    } @else {\n                        {{ formatLabel(item) }}\n                    }\n                </mat-option>\n            } @empty {\n                <mat-option disabled>\n                    <span class=\"nice-typeahead__no-items\">\n                        {{ noItemsFoundLabel() }}\n                    </span>\n                </mat-option>\n            }\n        </div>\n    </div>\n</ng-template>\n", styles: ["nice-typeahead,nice-async-typeahead{display:inline-block;width:100%;outline:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:var(--mat-select-enabled-trigger-text-color, var(--mat-app-on-surface));font-family:var(--mat-select-trigger-text-font, var(--mat-app-body-large-font));line-height:var(--mat-select-trigger-text-line-height, var(--mat-app-body-large-line-height));font-size:var(--mat-select-trigger-text-size, var(--mat-app-body-large-size));font-weight:var(--mat-select-trigger-text-weight, var(--mat-app-body-large-weight));letter-spacing:var(--mat-select-trigger-text-tracking, var(--mat-app-body-large-tracking))}nice-typeahead.nice-typeahead-disabled,nice-async-typeahead.nice-typeahead-disabled{color:var(--mat-select-disabled-trigger-text-color)}nice-typeahead.nice-typeahead-disabled .mat-mdc-select-arrow,nice-typeahead.nice-typeahead-disabled .nice-typeahead-remove,nice-async-typeahead.nice-typeahead-disabled .mat-mdc-select-arrow,nice-async-typeahead.nice-typeahead-disabled .nice-typeahead-remove{color:var(--mat-select-disabled-trigger-text-color)}nice-typeahead.nice-typeahead-invalid .mat-mdc-select-arrow,nice-async-typeahead.nice-typeahead-invalid .mat-mdc-select-arrow{color:var(--mat-select-invalid-arrow-color)}nice-typeahead .nice-typeahead,nice-async-typeahead .nice-typeahead{width:100%;display:inline-flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative;box-sizing:border-box}nice-typeahead .nice-typeahead-suffix,nice-async-typeahead .nice-typeahead-suffix{height:24px;flex-shrink:0;display:inline-flex;align-items:center;--mdc-icon-button-state-layer-size: 24px}nice-typeahead .nice-typeahead-suffix .nice-typeahead-remove,nice-async-typeahead .nice-typeahead-suffix .nice-typeahead-remove{margin-right:-6px}nice-typeahead .nice-typeahead-value,nice-async-typeahead .nice-typeahead-value{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nice-typeahead .nice-typeahead-value-text,nice-async-typeahead .nice-typeahead-value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nice-typeahead .mat-mdc-select-min-line:empty:before,nice-async-typeahead .mat-mdc-select-min-line:empty:before{content:\" \";white-space:pre;width:1px;display:inline-block;visibility:hidden}nice-typeahead .nice-typeahead__input,nice-async-typeahead .nice-typeahead__input{border:none;outline:none;box-shadow:none;background:none;padding:0;margin:0;color:inherit}.mat-mdc-form-field-type-nice-typeahead:not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper{cursor:pointer}.mat-mdc-form-field-type-nice-typeahead.mat-form-field-appearance-outline .mdc-notched-outline__notch{max-width:calc(100% - 60px)}@keyframes _nice-typeahead-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _nice-typeahead-exit{0%{opacity:1}to{opacity:0}}div.nice-typeahead-panel{width:100%;outline:0;padding:8px 0;border-radius:4px;box-sizing:border-box;position:static;background-color:var(--mat-select-panel-background-color, var(--mat-app-surface-container))}div.nice-typeahead-panel nice-typeahead-search-icon{width:16px;height:16px;margin-right:8px;margin-left:16px}div.nice-typeahead-panel nice-typeahead-search-icon svg{width:16px;height:16px}div.nice-typeahead-panel .nice-typeahead-search-input{padding-left:8px;padding-right:8px;padding-bottom:8px}div.nice-typeahead-panel .nice-typeahead-search-input .mat-mdc-form-field,div.nice-typeahead-panel .nice-typeahead-search-input .mat-mdc-form-field-infix{width:100%}div.nice-typeahead-panel .nice-typeahead-options{overflow:auto;max-height:384px}div.nice-typeahead-panel{box-shadow:var(--mat-select-container-elevation-shadow)}.nice-typehead-animations-enabled{animation:_nice-typeahead-enter .12s cubic-bezier(0,0,.2,1)}.nice-typehead-animations-enabled.mat-select-panel-exit{animation:_nice-typeahead-exit .1s linear}\n"] }]
-        }] });
+        }], propDecorators: { values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: true }] }], searchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFn", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.