@spartan-ng/brain 0.0.1-alpha.608 → 0.0.1-alpha.609

package/fesm2022/spartan-ng-brain-autocomplete.mjs

@@ -1,132 +1,287 @@
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injector, input, output, signal, contentChildren, computed, effect, untracked, Directive, TemplateRef, ViewContainerRef, PLATFORM_ID, ElementRef, booleanAttribute } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Directive, InjectionToken, inject, forwardRef, Injector, input, booleanAttribute, linkedSignal, model, contentChild, ElementRef, computed, contentChildren, Renderer2, TemplateRef, ViewContainerRef, effect, PLATFORM_ID, signal } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { stringifyAsLabel } from '@spartan-ng/brain/core';
 import { BrnPopover } from '@spartan-ng/brain/popover';
+import { BrnDialog } from '@spartan-ng/brain/dialog';
 import { isPlatformBrowser } from '@angular/common';
-import { startWith } from 'rxjs/operators';
+
+class BrnAutocompleteInputWrapper {
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteInputWrapper, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: BrnAutocompleteInputWrapper, isStandalone: true, selector: "[brnAutocompleteInputWrapper]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteInputWrapper, decorators: [{
+            type: Directive,
+            args: [{ selector: '[brnAutocompleteInputWrapper]' }]
+        }] });
 
 const BrnAutocompleteItemToken = new InjectionToken('BrnAutocompleteItemToken');
 function provideBrnAutocompleteItem(autocomplete) {
     return { provide: BrnAutocompleteItemToken, useExisting: autocomplete };
 }
 
-const BrnAutocompleteToken = new InjectionToken('BrnAutocompleteToken');
-function provideBrnAutocomplete(autocomplete) {
-    return { provide: BrnAutocompleteToken, useExisting: autocomplete };
+const BrnAutocompleteBaseToken = new InjectionToken('BrnAutocompleteBaseToken');
+function provideBrnAutocompleteBase(autocomplete) {
+    return { provide: BrnAutocompleteBaseToken, useExisting: autocomplete };
+}
+function injectBrnAutocompleteBase() {
+    return inject(BrnAutocompleteBaseToken);
+}
+function getDefaultConfig() {
+    return {
+        isItemEqualToValue: (itemValue, selectedValue) => Object.is(itemValue, selectedValue),
+        itemToString: undefined,
+    };
+}
+const BrnAutocompleteConfigToken = new InjectionToken('BrnAutocompleteConfig');
+function provideBrnAutocompleteConfig(config) {
+    return { provide: BrnAutocompleteConfigToken, useValue: { ...getDefaultConfig(), ...config } };
 }
-function injectBrnAutocomplete() {
-    return inject(BrnAutocompleteToken);
+function injectBrnAutocompleteConfig() {
+    const injectedConfig = inject(BrnAutocompleteConfigToken, { optional: true });
+    return injectedConfig ? injectedConfig : getDefaultConfig();
 }
 
+const BRN_AUTOCOMPLETE_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => BrnAutocomplete),
+    multi: true,
+};
 class BrnAutocomplete {
-    static _id = 0;
     _injector = inject(Injector);
-    /** The id of the autocomplete */
-    id = input(`brn-autocomplete-${++BrnAutocomplete._id}`);
-    /** when the selection has changed */
-    valueChange = output();
-    /** when the selection has been cleared */
-    selectionCleared = output();
+    _config = injectBrnAutocompleteConfig();
     /** Access the popover if present */
     _brnPopover = inject(BrnPopover, { optional: true });
-    /** @internal The focus strategy when opening */
-    _focus = signal('first');
+    /** Whether the autocomplete is disabled */
+    disabled = input(false, { transform: booleanAttribute });
+    _disabled = linkedSignal(this.disabled);
+    /** @internal The disabled state as a readonly signal */
+    disabledState = this._disabled.asReadonly();
+    /** A function to compare an item with the selected value. */
+    isItemEqualToValue = input(this._config.isItemEqualToValue);
+    /** A function to convert an item to a string for display. */
+    itemToString = input(this._config.itemToString);
+    /** The selected value of the autocomplete. */
+    value = model(null);
+    /** The current search query. */
+    search = model('');
+    _searchInputWrapper = contentChild(BrnAutocompleteInputWrapper, {
+        read: ElementRef,
+    });
+    /** @internal The width of the search input wrapper */
+    searchInputWrapperWidth = computed(() => {
+        const inputElement = this._searchInputWrapper()?.nativeElement;
+        return inputElement ? inputElement.offsetWidth : null;
+    });
     /** @internal Access all the items within the autocomplete */
     items = contentChildren(BrnAutocompleteItemToken, {
         descendants: true,
     });
+    /** Determine if the autocomplete has any visible items */
+    visibleItems = computed(() => this.items().length > 0);
     /** @internal The key manager for managing active descendant */
     keyManager = new ActiveDescendantKeyManager(this.items, this._injector);
     /** @internal Whether the autocomplete is expanded */
     isExpanded = computed(() => this._brnPopover?.stateComputed() === 'open');
+    _onChange;
+    _onTouched;
     constructor() {
         this.keyManager
             .withVerticalOrientation()
             .withHomeAndEnd()
             .withWrap()
             .skipPredicate((item) => item.disabled);
-        effect(() => {
-            const items = this.items();
-            const focus = this._focus();
-            untracked(() => {
-                if (!items.length)
-                    return;
-                const activeItem = this.keyManager.activeItem;
-                if (!activeItem || !items.includes(activeItem)) {
-                    focus === 'first' ? this.keyManager.setFirstItemActive() : this.keyManager.setLastItemActive();
-                }
-            });
-        });
-        this.keyManager.change.pipe(takeUntilDestroyed()).subscribe(() => {
-            const value = this.keyManager.activeItem?.value();
-            if (value) {
-                this.valueChange.emit(value);
-            }
+        this._brnPopover?.closed.subscribe(() => {
+            this.keyManager.setActiveItem(-1);
         });
     }
-    selectActiveItem() {
-        if (this._brnPopover?.stateComputed() === 'open') {
-            this.keyManager.activeItem?.selected.emit();
+    updateSearch(value) {
+        this.search.set(value);
+        this.open();
+        if (value === '') {
+            this.resetValue();
         }
     }
-    open(focus = 'first') {
+    isSelected(itemValue) {
+        return this.isItemEqualToValue()(itemValue, this.value());
+    }
+    select(itemValue) {
+        this.value.set(itemValue);
+        this._onChange?.(itemValue);
+        this.search.set(stringifyAsLabel(itemValue, this.itemToString()));
+        this.close();
+    }
+    /** Select the active item with Enter key. */
+    selectActiveItem() {
+        if (!this.isExpanded())
+            return;
+        const value = this.keyManager.activeItem?.value();
+        if (value === undefined)
+            return;
+        this.select(value);
+    }
+    resetValue() {
+        this.value.set(null);
+        this.search.set('');
+        this._onChange?.(null);
+    }
+    open() {
+        if (this._disabled() || this.isExpanded())
+            return;
         this._brnPopover?.open();
-        this._focus.set(focus);
     }
     close() {
+        if (this._disabled() || !this.isExpanded())
+            return;
         this._brnPopover?.close();
     }
     toggle() {
+        if (this._disabled())
+            return;
         this.isExpanded() ? this.close() : this.open();
     }
+    /** CONTROL VALUE ACCESSOR */
+    writeValue(value) {
+        this.value.set(value);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.0.7", type: BrnAutocomplete, isStandalone: true, selector: "[brnAutocomplete]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", selectionCleared: "selectionCleared" }, host: { listeners: { "keydown.enter": "selectActiveItem()" }, properties: { "id": "id()" } }, providers: [provideBrnAutocomplete(BrnAutocomplete)], queries: [{ propertyName: "items", predicate: BrnAutocompleteItemToken, descendants: true, isSignal: true }], ngImport: i0 });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.0.7", type: BrnAutocomplete, isStandalone: true, selector: "[brnAutocomplete]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isItemEqualToValue: { classPropertyName: "isItemEqualToValue", publicName: "isItemEqualToValue", isSignal: true, isRequired: false, transformFunction: null }, itemToString: { classPropertyName: "itemToString", publicName: "itemToString", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "searchChange" }, providers: [provideBrnAutocompleteBase(BrnAutocomplete), BRN_AUTOCOMPLETE_VALUE_ACCESSOR], queries: [{ propertyName: "_searchInputWrapper", first: true, predicate: BrnAutocompleteInputWrapper, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "items", predicate: BrnAutocompleteItemToken, descendants: true, isSignal: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocomplete, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnAutocomplete]',
-                    providers: [provideBrnAutocomplete(BrnAutocomplete)],
-                    host: {
-                        '[id]': 'id()',
-                        '(keydown.enter)': 'selectActiveItem()',
-                    },
+                    providers: [provideBrnAutocompleteBase(BrnAutocomplete), BRN_AUTOCOMPLETE_VALUE_ACCESSOR],
                 }]
         }], ctorParameters: () => [] });
 
-class BrnAutocompleteEmpty {
+class BrnAutocompleteAnchor {
+    _host = inject(ElementRef, { host: true });
+    _brnDialog = inject(BrnDialog, { optional: true });
+    constructor() {
+        if (!this._brnDialog)
+            return;
+        this._brnDialog.mutableAttachTo.set(this._host.nativeElement);
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteAnchor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: BrnAutocompleteAnchor, isStandalone: true, selector: "[brnAutocompleteAnchor]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteAnchor, decorators: [{
+            type: Directive,
+            args: [{ selector: '[brnAutocompleteAnchor]' }]
+        }], ctorParameters: () => [] });
+
+class BrnAutocompleteClear {
+    _autocomplete = injectBrnAutocompleteBase();
+    _renderer = inject(Renderer2);
     _templateRef = inject(TemplateRef);
     _viewContainerRef = inject(ViewContainerRef);
-    _autocomplete = injectBrnAutocomplete();
-    /** Determine if the autocomplete has any items */
-    _visible = computed(() => this._autocomplete.items().length > 0);
+    /** Determine if the combobox has a value */
+    _hasValue = computed(() => this._autocomplete.value() !== null);
     constructor() {
         effect(() => {
-            if (this._visible()) {
-                this._viewContainerRef.clear();
-            }
-            else {
-                this._viewContainerRef.createEmbeddedView(this._templateRef);
+            this._viewContainerRef.clear();
+            if (this._hasValue()) {
+                const view = this._viewContainerRef.createEmbeddedView(this._templateRef);
+                view.rootNodes.forEach((node) => {
+                    this._renderer.listen(node, 'click', (e) => {
+                        e.preventDefault();
+                        this.clear();
+                    });
+                });
             }
         });
     }
+    clear() {
+        this._autocomplete.resetValue();
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteClear, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: BrnAutocompleteClear, isStandalone: true, selector: "[brnAutocompleteClear]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteClear, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnAutocompleteClear]',
+                }]
+        }], ctorParameters: () => [] });
+
+class BrnAutocompleteContent {
+    _autocomplete = injectBrnAutocompleteBase();
+    /** Determine if the autocomplete has any visible items */
+    _visibleItems = this._autocomplete.visibleItems;
+    _autocompleteWidth = this._autocomplete.searchInputWrapperWidth;
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: BrnAutocompleteContent, isStandalone: true, selector: "[brnAutocompleteContent]", host: { properties: { "attr.data-empty": "!_visibleItems() ? \"\" : null", "style.--brn-autocomplete-width.px": "_autocompleteWidth()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnAutocompleteContent]',
+                    host: {
+                        '[attr.data-empty]': '!_visibleItems() ? "" : null',
+                        '[style.--brn-autocomplete-width.px]': '_autocompleteWidth()',
+                    },
+                }]
+        }] });
+
+class BrnAutocompleteEmpty {
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: BrnAutocompleteEmpty, isStandalone: true, selector: "[brnAutocompleteEmpty]", ngImport: i0 });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: BrnAutocompleteEmpty, isStandalone: true, selector: "[brnAutocompleteEmpty]", host: { attributes: { "role": "status", "aria-live": "polite", "aria-atomic": "true" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteEmpty, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnAutocompleteEmpty]',
+                    host: {
+                        role: 'status',
+                        'aria-live': 'polite',
+                        'aria-atomic': 'true',
+                    },
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
-class BrnAutocompleteGroup {
+class BrnAutocompleteLabel {
     static _id = 0;
-    /** The id of the autocomplete list */
-    id = input(`brn-autocomplete-group-${++BrnAutocompleteGroup._id}`);
+    /** The id of the autocomplete label */
+    id = input(`brn-autocomplete-label-${++BrnAutocompleteLabel._id}`);
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.7", type: BrnAutocompleteLabel, isStandalone: true, selector: "[brnAutocompleteLabel]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "id()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnAutocompleteLabel]',
+                    host: {
+                        '[id]': 'id()',
+                    },
+                }]
+        }] });
+
+class BrnAutocompleteGroup {
+    /** Get the items in the group */
+    _items = contentChildren(BrnAutocompleteItemToken, {
+        descendants: true,
+    });
+    /** Determine if there are any visible items in the group */
+    _visible = computed(() => this._items().length > 0);
+    /** Get the label associated with the group */
+    _label = contentChild(BrnAutocompleteLabel);
+    _labelledBy = computed(() => {
+        const label = this._label();
+        return label ? label.id() : null;
+    });
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.7", type: BrnAutocompleteGroup, isStandalone: true, selector: "[brnAutocompleteGroup]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "id": "id()" } }, ngImport: i0 });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.0.7", type: BrnAutocompleteGroup, isStandalone: true, selector: "[brnAutocompleteGroup]", host: { attributes: { "role": "group" }, properties: { "attr.data-hidden": "!_visible() ? \"\" : null", "attr.aria-labelledby": "_labelledBy()" } }, queries: [{ propertyName: "_items", predicate: BrnAutocompleteItemToken, descendants: true, isSignal: true }, { propertyName: "_label", first: true, predicate: BrnAutocompleteLabel, descendants: true, isSignal: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteGroup, decorators: [{
             type: Directive,
@@ -134,22 +289,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                     selector: '[brnAutocompleteGroup]',
                     host: {
                         role: 'group',
-                        '[id]': 'id()',
+                        '[attr.data-hidden]': '!_visible() ? "" : null',
+                        '[attr.aria-labelledby]': '_labelledBy()',
                     },
                 }]
         }] });
 
+class BrnAutocompleteInput {
+    static _id = 0;
+    _el = inject(ElementRef);
+    _autocomplete = injectBrnAutocompleteBase();
+    /** The id of the autocomplete input */
+    id = input(`brn-autocomplete-input-${++BrnAutocompleteInput._id}`);
+    disabled = this._autocomplete.disabledState;
+    /** Whether the autocomplete panel is expanded */
+    _isExpanded = this._autocomplete.isExpanded;
+    constructor() {
+        effect(() => {
+            const value = this._autocomplete.value();
+            const search = this._autocomplete.search();
+            const valueLabel = stringifyAsLabel(value, this._autocomplete.itemToString());
+            if (valueLabel === search) {
+                this._el.nativeElement.value = valueLabel;
+            }
+            else if (search === '') {
+                this._el.nativeElement.value = '';
+            }
+        });
+    }
+    onInput(event) {
+        const value = event.target.value;
+        this._autocomplete.updateSearch(value);
+    }
+    onKeyDown(event) {
+        if (event.key === 'Enter') {
+            // prevent form submission if inside a form
+            event.preventDefault();
+            this._autocomplete.selectActiveItem();
+        }
+        if (!this._isExpanded()) {
+            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                this._autocomplete.open();
+            }
+            if (event.key === 'Escape') {
+                this._autocomplete.resetValue();
+            }
+        }
+        this._autocomplete.keyManager.onKeydown(event);
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.7", type: BrnAutocompleteInput, isStandalone: true, selector: "input[brnAutocompleteInput]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "text", "role": "combobox", "autocomplete": "off", "autocorrect": "off", "autocapitalize": "none", "spellcheck": "false", "aria-autocomplete": "list", "aria-haspopup": "listbox" }, listeners: { "keydown": "onKeyDown($event)", "input": "onInput($event)" }, properties: { "id": "id()", "attr.aria-expanded": "_isExpanded()", "attr.disabled": "disabled() ? \"\" : null" } }, exportAs: ["brnAutocompleteInput"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[brnAutocompleteInput]',
+                    exportAs: 'brnAutocompleteInput',
+                    host: {
+                        '[id]': 'id()',
+                        type: 'text',
+                        role: 'combobox',
+                        autocomplete: 'off',
+                        autocorrect: 'off',
+                        autocapitalize: 'none',
+                        spellcheck: 'false',
+                        'aria-autocomplete': 'list',
+                        'aria-haspopup': 'listbox',
+                        '[attr.aria-expanded]': '_isExpanded()',
+                        '[attr.disabled]': 'disabled() ? "" : null',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(input)': 'onInput($event)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
 class BrnAutocompleteItem {
     static _id = 0;
     _platform = inject(PLATFORM_ID);
     _elementRef = inject(ElementRef);
     /** Access the autocomplete component */
-    _autocomplete = injectBrnAutocomplete();
+    _autocomplete = injectBrnAutocompleteBase();
     /** A unique id for the item */
     id = input(`brn-autocomplete-item-${++BrnAutocompleteItem._id}`);
     /** The value this item represents. */
     value = input.required();
-    /** Whether the item is disabled. */
     // eslint-disable-next-line @typescript-eslint/naming-convention
     _disabled = input(false, {
         alias: 'disabled',
@@ -160,28 +383,27 @@ class BrnAutocompleteItem {
         return this._disabled();
     }
     /** Whether the item is selected. */
-    _active = signal(false);
-    /** Emits when the item is selected. */
-    selected = output();
-    /** @internal Get the display value */
-    getLabel() {
-        return this._elementRef.nativeElement.textContent?.trim() ?? '';
-    }
-    /** @internal */
+    active = computed(() => this._autocomplete.isSelected(this.value()));
+    _highlighted = signal(false);
     setActiveStyles() {
-        this._active.set(true);
+        this._highlighted.set(true);
         // ensure the item is in view
         if (isPlatformBrowser(this._platform)) {
             this._elementRef.nativeElement.scrollIntoView({ block: 'nearest' });
         }
     }
-    /** @internal */
     setInactiveStyles() {
-        this._active.set(false);
+        this._highlighted.set(false);
+    }
+    getLabel() {
+        return stringifyAsLabel(this.value(), this._autocomplete.itemToString());
     }
-    onClick() {
+    select() {
+        if (this._disabled()) {
+            return;
+        }
         this._autocomplete.keyManager.setActiveItem(this);
-        this.selected.emit();
+        this._autocomplete.select(this.value());
     }
     activate() {
         if (this._disabled()) {
@@ -190,24 +412,21 @@ class BrnAutocompleteItem {
         this._autocomplete.keyManager.setActiveItem(this);
     }
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.7", type: BrnAutocompleteItem, isStandalone: true, selector: "button[brnAutocompleteItem]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { attributes: { "type": "button", "role": "option", "tabIndex": "-1" }, listeners: { "click": "onClick()", "mouseenter": "activate()" }, properties: { "id": "id()", "attr.disabled": "_disabled() ? true : null", "attr.data-disabled": "_disabled() ? \"\" : null", "attr.data-value": "value()", "attr.aria-selected": "_active()", "attr.data-selected": "_active() ? '' : null" } }, providers: [provideBrnAutocompleteItem(BrnAutocompleteItem)], ngImport: i0 });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.7", type: BrnAutocompleteItem, isStandalone: true, selector: "[brnAutocompleteItem]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, listeners: { "click": "select()", "mouseenter": "activate()" }, properties: { "id": "id()", "attr.data-highlighted": "_highlighted() ? \"\" : null", "attr.data-value": "value()", "attr.aria-selected": "active()", "attr.aria-disabled": "_disabled()" } }, providers: [provideBrnAutocompleteItem(BrnAutocompleteItem)], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteItem, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'button[brnAutocompleteItem]',
+                    selector: '[brnAutocompleteItem]',
                     providers: [provideBrnAutocompleteItem(BrnAutocompleteItem)],
                     host: {
-                        type: 'button',
                         role: 'option',
-                        tabIndex: '-1',
                         '[id]': 'id()',
-                        '[attr.disabled]': '_disabled() ? true : null',
-                        '[attr.data-disabled]': '_disabled() ? "" : null',
+                        '[attr.data-highlighted]': '_highlighted() ? "" : null',
                         '[attr.data-value]': 'value()',
-                        '[attr.aria-selected]': '_active()',
-                        '[attr.data-selected]': "_active() ? '' : null",
-                        '(click)': 'onClick()',
+                        '[attr.aria-selected]': 'active()',
+                        '[attr.aria-disabled]': '_disabled()',
+                        '(click)': 'select()',
                         '(mouseenter)': 'activate()',
                     },
                 }]
@@ -215,10 +434,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
 
 class BrnAutocompleteList {
     static _id = 0;
-    /** The id of the command list */
+    _autocomplete = injectBrnAutocompleteBase();
+    /** Determine if the autocomplete has any visible items */
+    _visibleItems = this._autocomplete.visibleItems;
+    /** The id of the autocomplete list */
     id = input(`brn-autocomplete-list-${++BrnAutocompleteList._id}`);
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.7", type: BrnAutocompleteList, isStandalone: true, selector: "[brnAutocompleteList]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, properties: { "id": "id()" } }, ngImport: i0 });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.7", type: BrnAutocompleteList, isStandalone: true, selector: "[brnAutocompleteList]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox", "tabIndex": "-1", "aria-orientation": "vertical" }, properties: { "id": "id()", "attr.data-empty": "!_visibleItems() ? \"\" : null" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteList, decorators: [{
             type: Directive,
@@ -226,72 +448,190 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                     selector: '[brnAutocompleteList]',
                     host: {
                         role: 'listbox',
+                        tabIndex: '-1',
+                        'aria-orientation': 'vertical',
                         '[id]': 'id()',
+                        '[attr.data-empty]': '!_visibleItems() ? "" : null',
                     },
                 }]
         }] });
 
-class BrnAutocompleteSearchInput {
-    _autocomplete = injectBrnAutocomplete();
-    /** Whether the autocomplete panel is expanded */
-    _isExpanded = this._autocomplete.isExpanded;
-    /** The id of the active option */
-    _activeDescendant = signal(undefined);
+const BRN_AUTOCOMPLETE_SEARCH_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => BrnAutocompleteSearch),
+    multi: true,
+};
+class BrnAutocompleteSearch {
+    _injector = inject(Injector);
+    _config = injectBrnAutocompleteConfig();
+    /** Access the popover if present */
+    _brnPopover = inject(BrnPopover, { optional: true });
+    /** Whether the autocomplete is disabled */
+    disabled = input(false, { transform: booleanAttribute });
+    _disabled = linkedSignal(this.disabled);
+    /** @internal The disabled state as a readonly signal */
+    disabledState = this._disabled.asReadonly();
+    /** A function to convert an item to a string for display. */
+    itemToString = input(this._config.itemToString);
+    /** The selected value of the autocomplete. */
+    value = model(null);
+    /** The current search query. */
+    search = model('');
+    _searchInputWrapper = contentChild(BrnAutocompleteInputWrapper, {
+        read: ElementRef,
+    });
+    /** @internal The width of the search input wrapper */
+    searchInputWrapperWidth = computed(() => {
+        const inputElement = this._searchInputWrapper()?.nativeElement;
+        return inputElement ? inputElement.offsetWidth : null;
+    });
+    /** @internal Access all the items within the autocomplete */
+    items = contentChildren(BrnAutocompleteItemToken, {
+        descendants: true,
+    });
+    /** Determine if the autocomplete has any visible items */
+    visibleItems = computed(() => this.items().length > 0);
+    /** @internal The key manager for managing active descendant */
+    keyManager = new ActiveDescendantKeyManager(this.items, this._injector);
+    /** @internal Whether the autocomplete is expanded */
+    isExpanded = computed(() => this._brnPopover?.stateComputed() === 'open');
+    _onChange;
+    _onTouched;
     constructor() {
-        this._autocomplete.keyManager.change
-            .pipe(startWith(this._autocomplete.keyManager.activeItemIndex), takeUntilDestroyed())
-            .subscribe(() => {
-            this._activeDescendant.set(this._autocomplete.keyManager.activeItem?.id());
+        this.keyManager
+            .withVerticalOrientation()
+            .withHomeAndEnd()
+            .withWrap()
+            .skipPredicate((item) => item.disabled);
+        this._brnPopover?.closed.subscribe(() => {
+            this.keyManager.setActiveItem(-1);
         });
     }
-    /** Listen for keydown events */
-    onKeyDown(event) {
-        if (event.key === 'Enter') {
-            // prevent form submission if inside a form
-            event.preventDefault();
+    updateSearch(value) {
+        this.value.set(value);
+        this.search.set(value);
+        this._onChange?.(value);
+        this.open();
+        if (value === '') {
+            this.resetValue();
         }
-        if (!this._isExpanded()) {
-            if (event.key === 'ArrowDown') {
-                this._autocomplete.open('first');
-            }
-            if (event.key === 'ArrowUp') {
-                this._autocomplete.open('last');
-            }
-            if (event.key === 'Escape') {
-                this._autocomplete.selectionCleared.emit();
-            }
-        }
-        this._autocomplete.keyManager.onKeydown(event);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteSearchInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: BrnAutocompleteSearchInput, isStandalone: true, selector: "input[brnAutocompleteSearchInput]", host: { attributes: { "role": "combobox", "aria-autocomplete": "list" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.aria-activedescendant": "_activeDescendant()", "attr.aria-expanded": "_isExpanded()" } }, ngImport: i0 });
+    isSelected(itemValue) {
+        return stringifyAsLabel(itemValue, this.itemToString()) === this.value();
+    }
+    select(itemValue) {
+        const label = stringifyAsLabel(itemValue, this.itemToString());
+        this.value.set(label);
+        this._onChange?.(label);
+        this.search.set(label);
+        this.close();
+    }
+    /** Select the active item with Enter key. */
+    selectActiveItem() {
+        if (!this.isExpanded())
+            return;
+        const value = this.keyManager.activeItem?.value();
+        if (value === undefined)
+            return;
+        this.select(value);
+    }
+    resetValue() {
+        this.value.set(null);
+        this.search.set('');
+        this._onChange?.(null);
+    }
+    open() {
+        if (this._disabled() || this.isExpanded())
+            return;
+        this._brnPopover?.open();
+    }
+    close() {
+        if (this._disabled() || !this.isExpanded())
+            return;
+        this._brnPopover?.close();
+    }
+    toggle() {
+        if (this._disabled())
+            return;
+        this.isExpanded() ? this.close() : this.open();
+    }
+    /** CONTROL VALUE ACCESSOR */
+    writeValue(value) {
+        this.value.set(value);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteSearch, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.0.7", type: BrnAutocompleteSearch, isStandalone: true, selector: "[brnAutocomplete]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, itemToString: { classPropertyName: "itemToString", publicName: "itemToString", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "searchChange" }, providers: [provideBrnAutocompleteBase(BrnAutocompleteSearch), BRN_AUTOCOMPLETE_SEARCH_VALUE_ACCESSOR], queries: [{ propertyName: "_searchInputWrapper", first: true, predicate: BrnAutocompleteInputWrapper, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "items", predicate: BrnAutocompleteItemToken, descendants: true, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteSearch, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnAutocomplete]',
+                    providers: [provideBrnAutocompleteBase(BrnAutocompleteSearch), BRN_AUTOCOMPLETE_SEARCH_VALUE_ACCESSOR],
+                }]
+        }], ctorParameters: () => [] });
+
+class BrnAutocompleteSeparator {
+    orientation = input('horizontal');
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.7", type: BrnAutocompleteSeparator, isStandalone: true, selector: "[brnAutocompleteSeparator]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "attr.aria-orientation": "orientation()", "attr.data-orientation": "orientation()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteSearchInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteSeparator, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'input[brnAutocompleteSearchInput]',
+                    selector: '[brnAutocompleteSeparator]',
                     host: {
-                        role: 'combobox',
-                        'aria-autocomplete': 'list',
-                        '[attr.aria-activedescendant]': '_activeDescendant()',
-                        '[attr.aria-expanded]': '_isExpanded()',
-                        '(keydown)': 'onKeyDown($event)',
+                        role: 'separator',
+                        '[attr.aria-orientation]': 'orientation()',
+                        '[attr.data-orientation]': 'orientation()',
                     },
                 }]
-        }], ctorParameters: () => [] });
+        }] });
+
+class BrnAutocompleteStatus {
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteStatus, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: BrnAutocompleteStatus, isStandalone: true, selector: "[brnAutocompleteStatus]", host: { attributes: { "role": "status", "aria-live": "polite", "aria-atomic": "true" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnAutocompleteStatus, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnAutocompleteStatus]',
+                    host: {
+                        role: 'status',
+                        'aria-live': 'polite',
+                        'aria-atomic': 'true',
+                    },
+                }]
+        }] });
 
 const BrnAutocompleteImports = [
     BrnAutocomplete,
+    BrnAutocompleteAnchor,
+    BrnAutocompleteClear,
+    BrnAutocompleteContent,
     BrnAutocompleteEmpty,
     BrnAutocompleteGroup,
+    BrnAutocompleteInput,
+    BrnAutocompleteInputWrapper,
     BrnAutocompleteItem,
+    BrnAutocompleteLabel,
     BrnAutocompleteList,
-    BrnAutocompleteSearchInput,
+    BrnAutocompleteSearch,
+    BrnAutocompleteSeparator,
+    BrnAutocompleteStatus,
 ];
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BrnAutocomplete, BrnAutocompleteEmpty, BrnAutocompleteGroup, BrnAutocompleteImports, BrnAutocompleteItem, BrnAutocompleteItemToken, BrnAutocompleteList, BrnAutocompleteSearchInput, BrnAutocompleteToken, injectBrnAutocomplete, provideBrnAutocomplete, provideBrnAutocompleteItem };
+export { BRN_AUTOCOMPLETE_SEARCH_VALUE_ACCESSOR, BRN_AUTOCOMPLETE_VALUE_ACCESSOR, BrnAutocomplete, BrnAutocompleteAnchor, BrnAutocompleteBaseToken, BrnAutocompleteClear, BrnAutocompleteContent, BrnAutocompleteEmpty, BrnAutocompleteGroup, BrnAutocompleteImports, BrnAutocompleteInput, BrnAutocompleteInputWrapper, BrnAutocompleteItem, BrnAutocompleteItemToken, BrnAutocompleteLabel, BrnAutocompleteList, BrnAutocompleteSearch, BrnAutocompleteSeparator, BrnAutocompleteStatus, injectBrnAutocompleteBase, injectBrnAutocompleteConfig, provideBrnAutocompleteBase, provideBrnAutocompleteConfig, provideBrnAutocompleteItem };
 //# sourceMappingURL=spartan-ng-brain-autocomplete.mjs.map