@recursyve/ngx-material-components 18.0.0-beta.0

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

@@ -0,0 +1,772 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, DestroyRef, signal, computed, Injectable, input, viewChild, ElementRef, ChangeDetectorRef, effect, Directive, ViewChildren, Component, ChangeDetectionStrategy, ViewEncapsulation } 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 { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import * as i1 from '@angular/forms';
+import { FormBuilder, NgControl, ReactiveFormsModule } from '@angular/forms';
+import { MatIconButton } from '@angular/material/button';
+import { _getOptionScrollPosition, MatOption } from '@angular/material/core';
+import { MAT_FORM_FIELD, MatFormFieldControl, MatFormField } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { matSelectAnimations } from '@angular/material/select';
+import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
+import { SelectionModel } from '@angular/cdk/collections';
+import { DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, hasModifierKey } from '@angular/cdk/keycodes';
+
+class NiceAsyncTypeaheadResourceProvider {
+}
+
+const NICE_ASYNC_TYPEAHEAD_RESOURCES_PROVIDER = new InjectionToken("nice_async_typeahead_provider");
+
+class NiceTypeaheadService {
+    resources = inject(NICE_ASYNC_TYPEAHEAD_RESOURCES_PROVIDER, { optional: true }) ?? [];
+    destroyRef = inject(DestroyRef);
+    fetchResources$ = new Subject();
+    fetchActive$ = new Subject();
+    resourceProvider = null;
+    _items = signal([]);
+    _active = signal(null);
+    _searchOptions = signal(null);
+    _request = signal(null);
+    _nextRequest = signal(null);
+    _loading = signal(true);
+    items = this._items.asReadonly();
+    active = this._active.asReadonly();
+    loading = this._loading.asReadonly();
+    isLastPage = computed(() => !this._nextRequest());
+    init(resource) {
+        this.fetchResources$.pipe(takeUntilDestroyed(this.destroyRef)).pipe(switchMap((request) => this.fetchResources(request))).subscribe();
+        this.fetchActive$.pipe(takeUntilDestroyed(this.destroyRef)).pipe(switchMap((request) => this.fetchActive(request))).subscribe();
+        const provider = this.resources.find((resources) => resources.resource === resource);
+        if (provider) {
+            this.resourceProvider = provider;
+        }
+    }
+    setSearchOptions(options) {
+        this._searchOptions.set(options);
+    }
+    setActive(active) {
+        this._active.set(active);
+    }
+    setActiveFromId(id) {
+        this.fetchActive$.next({ id });
+    }
+    reloadActive() {
+        const active = this._active();
+        if (!active || !("id" in active)) {
+            return;
+        }
+        if (!(typeof active.id === "number" || typeof active.id === "string")) {
+            return;
+        }
+        this.setActiveFromId(active.id);
+    }
+    setItems(items) {
+        this._items.set(items);
+    }
+    search(searchQuery) {
+        this.fetchResources$.next({
+            searchQuery,
+            page: 0
+        });
+    }
+    loadMore() {
+        const nextRequest = this._nextRequest();
+        if (!nextRequest || this._loading()) {
+            return;
+        }
+        this.fetchResources$.next(nextRequest);
+    }
+    fetchActive(request) {
+        return defer(() => {
+            if (!this.resourceProvider) {
+                return EMPTY;
+            }
+            this._loading.set(true);
+            const localItem = this._items().find((item) => "id" in item && item.id === request.id);
+            if (localItem) {
+                this._loading.set(false);
+                this._items.set([localItem]);
+                this._active.set(localItem);
+                return EMPTY;
+            }
+            return this.resourceProvider.getById(request.id);
+        }).pipe(map((item) => {
+            this._items.set([item]);
+            this._active.set(item);
+        }), catchError(() => EMPTY), finalize(() => {
+            this._loading.set(false);
+        }));
+    }
+    fetchResources(request) {
+        return defer(() => {
+            if (!this.resourceProvider) {
+                return EMPTY;
+            }
+            this._loading.set(true);
+            this._request.set(request);
+            return this.resourceProvider.search(request.searchQuery ?? "", request.page, this._searchOptions() ?? {});
+        }).pipe(map((result) => {
+            if (request.page === 0) {
+                this._items.set(result.items);
+            }
+            else {
+                this._items.set([
+                    ...this._items(),
+                    ...result.items
+                ]);
+            }
+            if (result.nextPage) {
+                this._nextRequest.set({
+                    ...request,
+                    page: result.nextPage
+                });
+            }
+            else {
+                this._nextRequest.set(null);
+            }
+        }), catchError(() => EMPTY), finalize(() => {
+            this._loading.set(false);
+        }));
+    }
+    formatLabel(item) {
+        if (!this.resourceProvider) {
+            return "";
+        }
+        return this.resourceProvider.format(item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NiceTypeaheadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NiceTypeaheadService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NiceTypeaheadService, decorators: [{
+            type: Injectable
+        }] });
+
+function provideAsyncTypeaheadResources(providers) {
+    return providers.map((provider) => ({
+        provide: NICE_ASYNC_TYPEAHEAD_RESOURCES_PROVIDER,
+        useClass: provider,
+        multi: true
+    }));
+}
+
+/**
+ * Implementation of the same panel and overlay logic as the official Angular MatSelect.
+ * This used some of the logic from MatSelect to make this component look and feel like a MatSelect.
+ */
+class NiceTypeaheadBase {
+    options;
+    labelProperty = input();
+    formatLabelFn = input();
+    static nextId = 0;
+    _input = viewChild("input");
+    _panel = viewChild("panel");
+    _overlayDir = viewChild(CdkConnectedOverlay);
+    _focused = false;
+    _required = false;
+    _disabled = false;
+    _panelOpen = false;
+    _compareWith = (o1, o2) => o1 === o2;
+    _value = signal(null);
+    _empty = computed(() => !this._value());
+    _placeholder = signal("");
+    _searchValue = signal("");
+    _elementRef = inject(ElementRef);
+    _destroyRef = inject(DestroyRef);
+    _changeDetectorRef = inject(ChangeDetectorRef);
+    _fb = inject(FormBuilder);
+    _searchControl = this._fb.nonNullable.control("");
+    _initialized = new Subject();
+    _parentFormField = inject(MAT_FORM_FIELD, { optional: true });
+    id = `nice-typeahead-${NiceTypeaheadBase.nextId++}`;
+    controlType = "nice-typeahead";
+    stateChanges = new Subject();
+    optionSelectionChanges = defer(() => {
+        const options = this.options;
+        if (options) {
+            return options.changes.pipe(startWith(options), switchMap(() => merge(...options.map(option => option.onSelectionChange))));
+        }
+        return this._initialized.pipe(switchMap(() => this.optionSelectionChanges));
+    });
+    ngControl = inject(NgControl, { optional: true, self: true });
+    _panelDoneAnimatingStream = new Subject();
+    _keyManager;
+    _preferredOverlayOrigin;
+    _overlayWidth;
+    _selectionModel;
+    _onChange;
+    _onTouch;
+    get placeholder() {
+        return this._placeholder();
+    }
+    set placeholder(placeholder) {
+        this._placeholder.set(placeholder);
+        this.stateChanges.next();
+    }
+    get focused() {
+        return this._focused;
+    }
+    set focused(isFocused) {
+        this._focused = isFocused;
+        this.stateChanges.next();
+    }
+    get required() {
+        return this._required;
+    }
+    set required(isRequired) {
+        this._required = isRequired;
+        this.stateChanges.next();
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = value;
+        this.stateChanges.next();
+    }
+    get value() {
+        return this._value();
+    }
+    set value(value) {
+        const hasAssigned = this._assignValue(value);
+        if (hasAssigned) {
+            this._onChange?.(value);
+        }
+    }
+    get empty() {
+        return !this._value();
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    get errorState() {
+        return false; // Implement error state logic as needed
+    }
+    get panelOpen() {
+        return this._panelOpen;
+    }
+    constructor() {
+        effect(() => {
+            this._input()?.nativeElement.focus();
+        });
+        if (this.ngControl) {
+            // Note: we provide the value accessor through here, instead of
+            // the `providers` to avoid running into a circular import.
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    ngOnInit() {
+        this._selectionModel = new SelectionModel();
+        this._searchControl.valueChanges.pipe(takeUntilDestroyed(this._destroyRef), debounceTime(250), distinctUntilChanged()).subscribe((value) => this._searchValue.set(value));
+    }
+    ngAfterViewInit() {
+        this._initialized.next();
+        this._initialized.complete();
+        this._initKeyManager();
+        this.options.changes.pipe(startWith(null), takeUntilDestroyed(this._destroyRef)).subscribe(() => {
+            this._resetOptions();
+            this._initializeSelection();
+        });
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+    }
+    onContainerClick(event) {
+        if (this.disabled) {
+            return;
+        }
+        this.stateChanges.next();
+        if (event.target.tagName.toLowerCase() !== "input") {
+            this.onFocusChanged(true);
+        }
+    }
+    setDescribedByIds(ids) {
+        const controlElement = this._elementRef.nativeElement.querySelector(".nice-typeahead");
+        if (!controlElement) {
+            return;
+        }
+        controlElement.setAttribute("aria-describedby", ids.join(" "));
+    }
+    onFocusChanged(isFocused) {
+        this.focused = isFocused;
+        this.stateChanges.next();
+        if (isFocused) {
+            this.open();
+        }
+    }
+    writeValue(value) {
+        this._assignValue(value);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouch = fn;
+    }
+    formatLabel(item) {
+        if (typeof item === "string") {
+            return item;
+        }
+        const fn = this.formatLabelFn();
+        if (fn) {
+            return fn(item);
+        }
+        const property = this.labelProperty();
+        if (!property) {
+            return item?.toString() ?? "";
+        }
+        if (!(typeof item === "object") || item === null) {
+            return item?.toString() ?? "";
+        }
+        if (property in item) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            return item[property];
+        }
+        return item.toString();
+    }
+    removeActiveValue() {
+        this.value = null;
+        this._selectionModel.clear();
+        this._keyManager.setActiveItem(-1);
+        this._changeDetectorRef.markForCheck();
+    }
+    open() {
+        if (!this._canOpen()) {
+            return;
+        }
+        // It's important that we read this as late as possible, because doing so earlier will
+        // return a different element since it's based on queries in the form field which may
+        // not have run yet. Also this needs to be assigned before we measure the overlay width.
+        if (this._parentFormField) {
+            this._preferredOverlayOrigin = this._parentFormField.getConnectedOverlayOrigin();
+        }
+        this._overlayWidth = this._getOverlayWidth(this._preferredOverlayOrigin);
+        this._panelOpen = true;
+        this._keyManager.withHorizontalOrientation(null);
+        this._changeDetectorRef.markForCheck();
+        // Required for the MDC form field to pick up when the overlay has been opened.
+        this.stateChanges.next();
+    }
+    close() {
+        if (!this._panelOpen) {
+            return;
+        }
+        this._focused = false;
+        this._panelOpen = false;
+        this._changeDetectorRef.markForCheck();
+        this._searchValue.set("");
+        // Required for the MDC form field to pick up when the overlay has been closed.
+        this.stateChanges.next();
+    }
+    focus(options) {
+        this._elementRef.nativeElement.focus(options);
+    }
+    _handleKeydown(event) {
+        if (this.disabled) {
+            return;
+        }
+        if (this.panelOpen) {
+            this._handleOpenKeydown(event);
+        }
+        else {
+            this._handleClosedKeydown(event);
+        }
+    }
+    _handleScrollEnd() {
+        console.log("scroll end");
+    }
+    _canOpen() {
+        return !this._panelOpen && !this.disabled;
+    }
+    _onAttached() {
+        this._overlayDir()?.positionChange.pipe(take(1)).subscribe(() => {
+            this._changeDetectorRef.detectChanges();
+            this._positioningSettled();
+        });
+    }
+    _initKeyManager() {
+        this._keyManager = new ActiveDescendantKeyManager(this.options)
+            .withVerticalOrientation()
+            .withHomeAndEnd()
+            .withPageUpDown()
+            .withAllowedModifierKeys(["shiftKey"])
+            .skipPredicate(this._skipPredicate);
+        this._keyManager.tabOut.subscribe(() => {
+            if (this.panelOpen) {
+                if (this._keyManager.activeItem) {
+                    this._keyManager.activeItem._selectViaInteraction();
+                }
+                this.focus();
+                this.close();
+            }
+        });
+        this._keyManager.change.subscribe(() => {
+            if (this._panelOpen && this._panel()) {
+                this._scrollOptionIntoView(this._keyManager.activeItemIndex || 0);
+            }
+            else if (!this._panelOpen && this._keyManager.activeItem) {
+                this._keyManager.activeItem._selectViaInteraction();
+            }
+        });
+    }
+    _getOverlayWidth(preferredOrigin) {
+        const refToMeasure = preferredOrigin instanceof CdkOverlayOrigin
+            ? preferredOrigin.elementRef
+            : preferredOrigin || this._elementRef;
+        return refToMeasure.nativeElement.getBoundingClientRect().width;
+    }
+    _skipPredicate = (option) => {
+        if (this.panelOpen) {
+            return false;
+        }
+        return option.disabled;
+    };
+    _positioningSettled() {
+        this._scrollOptionIntoView(this._keyManager.activeItemIndex || 0);
+    }
+    _scrollOptionIntoView(index) {
+        const option = this.options.toArray()[index];
+        if (!option) {
+            return;
+        }
+        const panel = this._panel()?.nativeElement;
+        if (!panel) {
+            return;
+        }
+        const element = option._getHostElement();
+        if (index === 0) {
+            // If we've got one group label before the option and we're at the top option,
+            // scroll the list to the top. This is better UX than scrolling the list to the
+            // top of the option, because it allows the user to read the top group's label.
+            panel.scrollTop = 0;
+        }
+        else {
+            panel.scrollTop = _getOptionScrollPosition(element.offsetTop, element.offsetHeight, panel.scrollTop, panel.offsetHeight);
+        }
+    }
+    _resetOptions() {
+        this.optionSelectionChanges.pipe(takeUntil(this.options.changes), takeUntilDestroyed(this._destroyRef)).subscribe((event) => {
+            this._onSelect(event.source);
+            if (event.isUserInput && this._panelOpen) {
+                this.close();
+                this.focus();
+            }
+        });
+    }
+    _onSelect(option) {
+        this.value = option.value;
+        this._setSelectionByValue(option.value);
+        this._selectOptionByValue(option.value);
+        this.stateChanges.next();
+    }
+    _initializeSelection() {
+        // Defer setting the value in order to avoid the "Expression
+        // has changed after it was checked" errors from Angular.
+        Promise.resolve().then(() => {
+            if (this.ngControl) {
+                this._value.set(this.ngControl.value);
+            }
+            const _value = this.value;
+            if (_value) {
+                this._selectOptionByValue(_value);
+            }
+            this._setSelectionByValue(_value);
+            this._highlightCorrectOption();
+            this.stateChanges.next();
+        });
+    }
+    _setSelectionByValue(value) {
+        this.options.forEach(option => option.setInactiveStyles());
+        this._selectionModel.clear();
+        const correspondingOption = value ? this._selectOptionByValue(value) : null;
+        // Shift focus to the active item. Note that we shouldn't do this in multiple
+        // mode, because we don't know what option the user interacted with last.
+        if (correspondingOption) {
+            correspondingOption.select(false);
+            this._keyManager.updateActiveItem(correspondingOption);
+        }
+        else if (!this.panelOpen) {
+            // Otherwise reset the highlighted option. Note that we only want to do this while
+            // closed, because doing it while open can shift the user's focus unnecessarily.
+            this._keyManager.updateActiveItem(-1);
+        }
+        this._changeDetectorRef.markForCheck();
+    }
+    _selectOptionByValue(value) {
+        const correspondingOption = this.options.find((option) => {
+            // Skip options that are already in the model. This allows us to handle cases
+            // where the same primitive value is selected multiple times.
+            if (this._selectionModel.isSelected(option)) {
+                return false;
+            }
+            try {
+                // Treat null as a special reset value.
+                return option.value != null && this._compareWith(option.value, value);
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            }
+            catch (error) {
+                return false;
+            }
+        });
+        if (correspondingOption) {
+            this._selectionModel.select(correspondingOption);
+        }
+        return correspondingOption;
+    }
+    _highlightCorrectOption() {
+        if (!this._keyManager) {
+            return;
+        }
+        if (this.empty) {
+            // Find the index of the first *enabled* option. Avoid calling `_keyManager.setActiveItem`
+            // because it activates the first option that passes the skip predicate, rather than the
+            // first *enabled* option.
+            let firstEnabledOptionIndex = -1;
+            for (let index = 0; index < this.options.length; index++) {
+                const option = this.options.get(index);
+                if (!option.disabled) {
+                    firstEnabledOptionIndex = index;
+                    break;
+                }
+            }
+            this._keyManager.setActiveItem(firstEnabledOptionIndex);
+        }
+        else {
+            this._keyManager.setActiveItem(this._selectionModel.selected[0]);
+        }
+    }
+    _handleClosedKeydown(event) {
+        const keyCode = event.keyCode;
+        const isArrowKey = keyCode === DOWN_ARROW ||
+            keyCode === UP_ARROW ||
+            keyCode === LEFT_ARROW ||
+            keyCode === RIGHT_ARROW;
+        const isOpenKey = keyCode === ENTER || keyCode === SPACE;
+        const manager = this._keyManager;
+        // Open the select on ALT + arrow key to match the native <select>
+        if ((!manager.isTyping() && isOpenKey && !hasModifierKey(event)) ||
+            (event.altKey && isArrowKey)) {
+            event.preventDefault(); // prevents the page from scrolling down when pressing space
+            this.open();
+        }
+    }
+    _handleOpenKeydown(event) {
+        const manager = this._keyManager;
+        const keyCode = event.keyCode;
+        const isArrowKey = keyCode === DOWN_ARROW || keyCode === UP_ARROW;
+        const isTyping = manager.isTyping();
+        if (isArrowKey && event.altKey) {
+            // Close the select on ALT + arrow key to match the native <select>
+            event.preventDefault();
+            this.close();
+            // Don't do anything in this case if the user is typing,
+            // because the typing sequence can include the space key.
+        }
+        else if (!isTyping &&
+            (keyCode === ENTER || keyCode === SPACE) &&
+            manager.activeItem &&
+            !hasModifierKey(event)) {
+            event.preventDefault();
+            manager.activeItem._selectViaInteraction();
+        }
+        else {
+            manager.onKeydown(event);
+        }
+    }
+    _assignValue(newValue) {
+        // Always re-assign an array, because it might have been mutated.
+        if (newValue !== this.value) {
+            if (this.options) {
+                this._setSelectionByValue(newValue);
+            }
+            this._value.set(newValue);
+            return true;
+        }
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NiceTypeaheadBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.13", type: NiceTypeaheadBase, inputs: { labelProperty: { classPropertyName: "labelProperty", publicName: "labelProperty", isSignal: true, isRequired: false, transformFunction: null }, formatLabelFn: { classPropertyName: "formatLabelFn", publicName: "formatLabelFn", isSignal: true, isRequired: false, transformFunction: null } }, 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: "18.2.13", ngImport: i0, type: NiceTypeaheadBase, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { options: [{
+                type: ViewChildren,
+                args: [MatOption]
+            }] } });
+
+class NiceAsyncTypeahead extends NiceTypeaheadBase {
+    resource = input.required();
+    filteredValues = computed(() => this.service.items());
+    optionsContainer = viewChild("optionsContainer");
+    service = inject(NiceTypeaheadService);
+    _compareWith = (o1, o2) => {
+        if (!(typeof o1 === "object" && o1 && typeof o2 === "object" && o2)) {
+            return o1 === o2;
+        }
+        if (!("id" in o1) || !("id" in o2)) {
+            return o1 === o2;
+        }
+        return o1.id === o2.id;
+    };
+    /**
+     * Infinite scroll internal state
+     */
+    scrollThresholdPercent = 0.99;
+    lastScrollHeight = 0;
+    constructor() {
+        super();
+        effect(() => this.service.search(this._searchValue()), {
+            allowSignalWrites: true
+        });
+        effect(() => {
+            const container = this.optionsContainer();
+            if (!container) {
+                return;
+            }
+            container.nativeElement.addEventListener("scroll", this.onScroll.bind(this));
+        });
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.service.init(this.resource());
+    }
+    onFocusChanged(isFocused) {
+        super.onFocusChanged(isFocused);
+        if (isFocused) {
+            this._searchControl.patchValue("");
+        }
+    }
+    formatLabel(item) {
+        return this.service.formatLabel(item);
+    }
+    removeActiveValue() {
+        super.removeActiveValue();
+        this.service.setActive(null);
+    }
+    onScroll(event) {
+        const target = event.target;
+        const threshold = (this.scrollThresholdPercent * 100 * target.scrollHeight) / 100;
+        const current = target.scrollTop + target.clientHeight;
+        if (this.lastScrollHeight > target.scrollHeight) {
+            this.lastScrollHeight = 0;
+        }
+        if (current > threshold && this.lastScrollHeight < target.scrollHeight) {
+            this.service.loadMore();
+            this.lastScrollHeight = target.scrollHeight;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NiceAsyncTypeahead, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NiceAsyncTypeahead, isStandalone: true, selector: "nice-async-typeahead", inputs: { resource: { classPropertyName: "resource", publicName: "resource", isSignal: true, isRequired: true, 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 {\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\"\n        [attr.id]=\"id + '-panel'\"\n        [@transformPanel]=\"'showing'\"\n        (@transformPanel.done)=\"_panelDoneAnimatingStream.next($event.toState)\"\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            </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                    {{ formatLabel(item) }}\n                </mat-option>\n            } @empty {\n                <mat-option disabled>\n                    <span class=\"nice-typeahead__no-items\">No items found</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,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)}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-input{padding-left:8px;padding-right:8px;padding-bottom:8px}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)}\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"], exportAs: ["matInput"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], animations: [matSelectAnimations.transformPanel], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NiceAsyncTypeahead, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-async-typeahead", standalone: true, imports: [
+                        CdkOverlayOrigin,
+                        CdkConnectedOverlay,
+                        ReactiveFormsModule,
+                        MatOption,
+                        MatFormField,
+                        MatInput,
+                        MatIconButton
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [matSelectAnimations.transformPanel], providers: [
+                        { provide: MatFormFieldControl, useExisting: NiceAsyncTypeahead },
+                        NiceTypeaheadService
+                    ], host: {
+                        "role": "combobox",
+                        "aria-haspopup": "listbox",
+                        "class": "nice-typeahead",
+                        "[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",
+                        "(keydown)": "_handleKeydown($event)",
+                        "(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 {\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\"\n        [attr.id]=\"id + '-panel'\"\n        [@transformPanel]=\"'showing'\"\n        (@transformPanel.done)=\"_panelDoneAnimatingStream.next($event.toState)\"\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            </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                    {{ formatLabel(item) }}\n                </mat-option>\n            } @empty {\n                <mat-option disabled>\n                    <span class=\"nice-typeahead__no-items\">No items found</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,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)}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-input{padding-left:8px;padding-right:8px;padding-bottom:8px}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)}\n"] }]
+        }], ctorParameters: () => [] });
+
+class NiceTypeahead extends NiceTypeaheadBase {
+    values = input.required();
+    searchFn = input();
+    filteredValues = computed(() => this.filterValuesFromSearch(this._searchValue(), this.values()));
+    onFocusChanged(isFocused) {
+        super.onFocusChanged(isFocused);
+        if (isFocused) {
+            this._searchControl.patchValue("");
+        }
+    }
+    filterValuesFromSearch(searchValue, values) {
+        if (!searchValue) {
+            return values;
+        }
+        const _searchValue = searchValue.toLowerCase();
+        const fn = this.searchFn();
+        if (fn) {
+            return values.filter((v) => fn(_searchValue, v));
+        }
+        return values.filter((v) => {
+            if (typeof v === "string") {
+                return v.toLowerCase().includes(_searchValue);
+            }
+            const property = this.labelProperty();
+            if (!property) {
+                return false;
+            }
+            if (typeof v === "object" && v && property in v) {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                return v[property].toString().toLowerCase().includes(_searchValue);
+            }
+            return false;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NiceTypeahead, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 {\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\"\n        [attr.id]=\"id + '-panel'\"\n        [@transformPanel]=\"'showing'\"\n        (@transformPanel.done)=\"_panelDoneAnimatingStream.next($event.toState)\"\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            </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                    {{ formatLabel(item) }}\n                </mat-option>\n            } @empty {\n                <mat-option disabled>\n                    <span class=\"nice-typeahead__no-items\">No items found</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,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)}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-input{padding-left:8px;padding-right:8px;padding-bottom:8px}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)}\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"], exportAs: ["matInput"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], animations: [matSelectAnimations.transformPanel], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NiceTypeahead, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-typeahead", standalone: true, imports: [
+                        CdkOverlayOrigin,
+                        CdkConnectedOverlay,
+                        ReactiveFormsModule,
+                        MatOption,
+                        MatFormField,
+                        MatInput,
+                        MatIconButton
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [matSelectAnimations.transformPanel], providers: [{ provide: MatFormFieldControl, useExisting: NiceTypeahead }], host: {
+                        "role": "combobox",
+                        "aria-haspopup": "listbox",
+                        "class": "nice-typeahead",
+                        "[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",
+                        "(keydown)": "_handleKeydown($event)",
+                        "(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 {\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\"\n        [attr.id]=\"id + '-panel'\"\n        [@transformPanel]=\"'showing'\"\n        (@transformPanel.done)=\"_panelDoneAnimatingStream.next($event.toState)\"\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            </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                    {{ formatLabel(item) }}\n                </mat-option>\n            } @empty {\n                <mat-option disabled>\n                    <span class=\"nice-typeahead__no-items\">No items found</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,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)}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-input{padding-left:8px;padding-right:8px;padding-bottom:8px}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)}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NiceAsyncTypeahead, NiceAsyncTypeaheadResourceProvider, NiceTypeahead, NiceTypeaheadService, provideAsyncTypeaheadResources };
+//# sourceMappingURL=recursyve-ngx-material-components-typeahead.mjs.map