ngx-bootstrap 21.2.0 → 21.2.1

package/typeahead/fesm2022/ngx-bootstrap-typeahead.mjs

@@ -1,10 +1,9 @@
 import * as i0 from '@angular/core';
 import { output, HostListener, ViewChildren, ViewChild, Component, Injectable, input, EventEmitter, Directive, NgModule } from '@angular/core';
-import { Utils } from 'ngx-bootstrap/utils';
+import { Utils, animateExpand } from 'ngx-bootstrap/utils';
 import * as i1 from 'ngx-bootstrap/positioning';
 import { PositioningService } from 'ngx-bootstrap/positioning';
 import { Subscription, isObservable, EMPTY, from } from 'rxjs';
-import { trigger, state, style, transition, animate } from '@angular/animations';
 import { NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i3 from '@angular/forms';
 import * as i1$1 from 'ngx-bootstrap/component-loader';
@@ -937,20 +936,8 @@ function getValueFromObject(object, option) {
     return object.toString();
 }
 
-const TYPEAHEAD_ANIMATION_TIMING = '220ms cubic-bezier(0, 0, 0.2, 1)';
-const typeaheadAnimation = trigger('typeaheadAnimation', [
-    state('animated-down', style({ height: '*', overflow: 'hidden' })),
-    transition('* => animated-down', [
-        style({ height: 0, overflow: 'hidden' }),
-        animate(TYPEAHEAD_ANIMATION_TIMING)
-    ]),
-    state('animated-up', style({ height: '*', overflow: 'hidden' })),
-    transition('* => animated-up', [
-        style({ height: '*', overflow: 'hidden' }),
-        animate(TYPEAHEAD_ANIMATION_TIMING)
-    ]),
-    transition('* => unanimated', animate('0s'))
-]);
+const TYPEAHEAD_ANIMATION_DURATION_MS = 220;
+const TYPEAHEAD_ANIMATION_TIMING = `${TYPEAHEAD_ANIMATION_DURATION_MS}ms cubic-bezier(0, 0, 0.2, 1)`;
 
 class TypeaheadContainerComponent {
     get typeaheadTemplateMethods() {
@@ -968,18 +955,26 @@ class TypeaheadContainerComponent {
         // eslint-disable-next-line @angular-eslint/no-output-rename
         this.activeChangeEvent = output({ alias: 'activeChange' });
         this.isFocused = false;
+        this._animationPlayed = false;
         this.positionServiceSubscription = new Subscription();
         this.height = 0;
         this.popupId = '';
         this._matches = [];
+        // Start hidden before the first paint; position-service event will reveal or animate it.
+        // Using max-height (not height) avoids conflict with the [style.height] host binding.
+        this.renderer.setStyle(this.element.nativeElement, 'max-height', '0');
+        this.renderer.setStyle(this.element.nativeElement, 'overflow', 'hidden');
         this.positionServiceSubscription.add(this.positionService.event$?.subscribe(() => {
-            if (this.isAnimated) {
-                this.animationState = this.isTopPosition ? 'animated-up' : 'animated-down';
-                this.changeDetectorRef.detectChanges();
-                return;
+            if (!this._animationPlayed) {
+                this._animationPlayed = true;
+                if (this.isAnimated) {
+                    this._animateExpand(this.element.nativeElement);
+                }
+                else {
+                    this.renderer.removeStyle(this.element.nativeElement, 'max-height');
+                    this.renderer.removeStyle(this.element.nativeElement, 'overflow');
+                }
             }
-            this.animationState = 'unanimated';
-            this.changeDetectorRef.detectChanges();
         }));
     }
     get active() {
@@ -1006,12 +1001,12 @@ class TypeaheadContainerComponent {
         }
         if (this.typeaheadIsFirstItemActive && this._matches.length > 0) {
             this.setActive(this._matches[0]);
-            if (this._active?.isHeader()) {
+            if (this.active?.isHeader()) {
                 this.nextActiveMatch();
             }
         }
-        if (this._active && !this.typeaheadIsFirstItemActive) {
-            const concurrency = this._matches.find(match => match.value === this._active?.value);
+        if (this.active && !this.typeaheadIsFirstItemActive) {
+            const concurrency = this._matches.find(match => match.value === this.active?.value);
             if (concurrency) {
                 this.selectActive(concurrency);
                 this.changeDetectorRef.markForCheck();
@@ -1050,27 +1045,28 @@ class TypeaheadContainerComponent {
         return !!this.parent?.selectItemOnBlur;
     }
     selectActiveMatch(isActiveItemChanged) {
-        if (this._active && this.parent?.typeaheadSelectFirstItem()) {
-            this.selectMatch(this._active);
+        if (this.active && this.parent?.typeaheadSelectFirstItem()) {
+            this.selectMatch(this.active);
         }
         if (!this.parent?.typeaheadSelectFirstItem() && isActiveItemChanged) {
-            this.selectMatch(this._active);
+            this.selectMatch(this.active);
         }
     }
     activeChanged() {
-        if (!this._active) {
+        if (!this.active) {
+            this.activeChangeEvent.emit('');
             return;
         }
-        const index = this.matches.indexOf(this._active);
+        const index = this.matches.indexOf(this.active);
         this.activeChangeEvent.emit(`${this.popupId}-${index}`);
     }
     prevActiveMatch() {
-        if (!this._active) {
+        if (!this.active) {
             return;
         }
-        const index = this.matches.indexOf(this._active);
+        const index = this.matches.indexOf(this.active);
         this.setActive(this.matches[index - 1 < 0 ? this.matches.length - 1 : index - 1]);
-        if (this._active.isHeader()) {
+        if (this.active.isHeader()) {
             this.prevActiveMatch();
         }
         if (this.typeaheadScrollable) {
@@ -1078,9 +1074,9 @@ class TypeaheadContainerComponent {
         }
     }
     nextActiveMatch() {
-        const index = this._active ? this.matches.indexOf(this._active) : -1;
+        const index = this.active ? this.matches.indexOf(this.active) : -1;
         this.setActive(this.matches[index + 1 > this.matches.length - 1 ? 0 : index + 1]);
-        if (this._active?.isHeader()) {
+        if (this.active?.isHeader()) {
             this.nextActiveMatch();
         }
         if (this.typeaheadScrollable) {
@@ -1195,13 +1191,24 @@ class TypeaheadContainerComponent {
             }
         }
     }
+    _animateExpand(el) {
+        // el is already at max-height: 0; overflow: hidden (set in constructor).
+        // Animating max-height avoids conflict with the [style.height] host binding.
+        this._cancelExpandAnimation?.();
+        this._cancelExpandAnimation = animateExpand(this.renderer, el, {
+            property: 'max-height',
+            timing: TYPEAHEAD_ANIMATION_TIMING,
+            durationMs: TYPEAHEAD_ANIMATION_DURATION_MS
+        });
+    }
     ngOnDestroy() {
+        this._cancelExpandAnimation?.();
         this.positionServiceSubscription.unsubscribe();
     }
     setActive(value) {
-        this._active = value;
+        this.active = value;
         let preview;
-        if (!(this._active == null || this._active.isHeader())) {
+        if (!(this.active == null || this.active.isHeader())) {
             preview = value;
         }
         this.parent?.typeaheadOnPreview.emit(preview);
@@ -1230,7 +1237,7 @@ class TypeaheadContainerComponent {
         this.ulElement.nativeElement.scrollTop = 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TypeaheadContainerComponent, deps: [{ token: i1.PositioningService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TypeaheadContainerComponent, isStandalone: true, selector: "typeahead-container", outputs: { activeChangeEvent: "activeChange" }, host: { listeners: { "mouseleave": "focusLost()", "blur": "focusLost()" }, properties: { "style.height": "needScrollbar ? guiHeight: 'auto'", "style.visibility": "'inherit'", "class.dropup": "dropup", "attr.role": "'listbox'" }, styleAttribute: "position: absolute;display: block;", classAttribute: "dropdown open bottom dropdown-menu" }, providers: [PositioningService], viewQueries: [{ propertyName: "ulElement", first: true, predicate: ["ulElement"], descendants: true }, { propertyName: "liElements", predicate: ["liElements"], descendants: true }], ngImport: i0, template: "<!-- inject options list template -->\n<ng-template [ngTemplateOutlet]=\"optionsListTemplate || bs4Template\"\n             [ngTemplateOutletContext]=\"{\n               matches: matches,\n               itemTemplate: itemTemplate || bsItemTemplate,\n               query: query,\n               $implicit: typeaheadTemplateMethods\n             }\">\n</ng-template>\n\n<!-- default options item template -->\n<ng-template #bsItemTemplate let-match=\"match\" let-query=\"query\">\n  <span [innerHtml]=\"highlight(match, query)\"></span>\n</ng-template>\n\n<!-- Bootstrap 4 options list template -->\n<ng-template #bs4Template>\n  @for (match of matches; track match; let i = $index) {\n    @if (match.isHeader()) {\n      <h6 class=\"dropdown-header\">{{ match }}</h6>\n    }\n    @if (!match.isHeader()) {\n      <button #liElements\n        [id]=\"popupId + '-' + i\"\n        role=\"option\"\n        [@typeaheadAnimation]=\"animationState\"\n        class=\"dropdown-item\"\n        (click)=\"selectMatch(match, $event)\"\n        (mouseenter)=\"selectActive(match)\"\n        [class.active]=\"isActive(match)\">\n        <ng-template [ngTemplateOutlet]=\"itemTemplate || bsItemTemplate\"\n          [ngTemplateOutletContext]=\"{item: match.item, index: i, match: match, query: query}\">\n        </ng-template>\n      </button>\n    }\n  }\n</ng-template>\n", styles: [":host.dropdown{z-index:1000}:host.dropdown-menu,.dropdown-menu{overflow-y:auto;height:100px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [typeaheadAnimation] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TypeaheadContainerComponent, isStandalone: true, selector: "typeahead-container", outputs: { activeChangeEvent: "activeChange" }, host: { listeners: { "mouseleave": "focusLost()", "blur": "focusLost()" }, properties: { "style.height": "needScrollbar ? guiHeight: 'auto'", "style.visibility": "'inherit'", "class.dropup": "dropup", "attr.role": "'listbox'" }, styleAttribute: "position: absolute;display: block;", classAttribute: "dropdown open bottom dropdown-menu" }, providers: [PositioningService], viewQueries: [{ propertyName: "ulElement", first: true, predicate: ["ulElement"], descendants: true }, { propertyName: "liElements", predicate: ["liElements"], descendants: true }], ngImport: i0, template: "<!-- inject options list template -->\n<ng-template [ngTemplateOutlet]=\"optionsListTemplate || bs4Template\"\n             [ngTemplateOutletContext]=\"{\n               matches: matches,\n               itemTemplate: itemTemplate || bsItemTemplate,\n               query: query,\n               $implicit: typeaheadTemplateMethods\n             }\">\n</ng-template>\n\n<!-- default options item template -->\n<ng-template #bsItemTemplate let-match=\"match\" let-query=\"query\">\n  <span [innerHtml]=\"highlight(match, query)\"></span>\n</ng-template>\n\n<!-- Bootstrap 4 options list template -->\n<ng-template #bs4Template>\n  @for (match of matches; track match; let i = $index) {\n    @if (match.isHeader()) {\n      <h6 class=\"dropdown-header\">{{ match }}</h6>\n    }\n    @if (!match.isHeader()) {\n      <button #liElements\n        [id]=\"popupId + '-' + i\"\n        role=\"option\"\n        class=\"dropdown-item\"\n        (click)=\"selectMatch(match, $event)\"\n        (mouseenter)=\"selectActive(match)\"\n        [class.active]=\"isActive(match)\">\n        <ng-template [ngTemplateOutlet]=\"itemTemplate || bsItemTemplate\"\n          [ngTemplateOutletContext]=\"{item: match.item, index: i, match: match, query: query}\">\n        </ng-template>\n      </button>\n    }\n  }\n</ng-template>\n", styles: [":host.dropdown{z-index:1000}:host.dropdown-menu,.dropdown-menu{overflow-y:auto;height:100px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TypeaheadContainerComponent, decorators: [{
             type: Component,
@@ -1241,7 +1248,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         '[class.dropup]': 'dropup',
                         style: 'position: absolute;display: block;',
                         '[attr.role]': `'listbox'`
-                    }, animations: [typeaheadAnimation], standalone: true, imports: [NgTemplateOutlet], providers: [PositioningService], template: "<!-- inject options list template -->\n<ng-template [ngTemplateOutlet]=\"optionsListTemplate || bs4Template\"\n             [ngTemplateOutletContext]=\"{\n               matches: matches,\n               itemTemplate: itemTemplate || bsItemTemplate,\n               query: query,\n               $implicit: typeaheadTemplateMethods\n             }\">\n</ng-template>\n\n<!-- default options item template -->\n<ng-template #bsItemTemplate let-match=\"match\" let-query=\"query\">\n  <span [innerHtml]=\"highlight(match, query)\"></span>\n</ng-template>\n\n<!-- Bootstrap 4 options list template -->\n<ng-template #bs4Template>\n  @for (match of matches; track match; let i = $index) {\n    @if (match.isHeader()) {\n      <h6 class=\"dropdown-header\">{{ match }}</h6>\n    }\n    @if (!match.isHeader()) {\n      <button #liElements\n        [id]=\"popupId + '-' + i\"\n        role=\"option\"\n        [@typeaheadAnimation]=\"animationState\"\n        class=\"dropdown-item\"\n        (click)=\"selectMatch(match, $event)\"\n        (mouseenter)=\"selectActive(match)\"\n        [class.active]=\"isActive(match)\">\n        <ng-template [ngTemplateOutlet]=\"itemTemplate || bsItemTemplate\"\n          [ngTemplateOutletContext]=\"{item: match.item, index: i, match: match, query: query}\">\n        </ng-template>\n      </button>\n    }\n  }\n</ng-template>\n", styles: [":host.dropdown{z-index:1000}:host.dropdown-menu,.dropdown-menu{overflow-y:auto;height:100px}\n"] }]
+                    }, standalone: true, imports: [NgTemplateOutlet], providers: [PositioningService], template: "<!-- inject options list template -->\n<ng-template [ngTemplateOutlet]=\"optionsListTemplate || bs4Template\"\n             [ngTemplateOutletContext]=\"{\n               matches: matches,\n               itemTemplate: itemTemplate || bsItemTemplate,\n               query: query,\n               $implicit: typeaheadTemplateMethods\n             }\">\n</ng-template>\n\n<!-- default options item template -->\n<ng-template #bsItemTemplate let-match=\"match\" let-query=\"query\">\n  <span [innerHtml]=\"highlight(match, query)\"></span>\n</ng-template>\n\n<!-- Bootstrap 4 options list template -->\n<ng-template #bs4Template>\n  @for (match of matches; track match; let i = $index) {\n    @if (match.isHeader()) {\n      <h6 class=\"dropdown-header\">{{ match }}</h6>\n    }\n    @if (!match.isHeader()) {\n      <button #liElements\n        [id]=\"popupId + '-' + i\"\n        role=\"option\"\n        class=\"dropdown-item\"\n        (click)=\"selectMatch(match, $event)\"\n        (mouseenter)=\"selectActive(match)\"\n        [class.active]=\"isActive(match)\">\n        <ng-template [ngTemplateOutlet]=\"itemTemplate || bsItemTemplate\"\n          [ngTemplateOutletContext]=\"{item: match.item, index: i, match: match, query: query}\">\n        </ng-template>\n      </button>\n    }\n  }\n</ng-template>\n", styles: [":host.dropdown{z-index:1000}:host.dropdown-menu,.dropdown-menu{overflow-y:auto;height:100px}\n"] }]
         }], ctorParameters: () => [{ type: i1.PositioningService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { activeChangeEvent: [{ type: i0.Output, args: ["activeChange"] }], ulElement: [{
                 type: ViewChild,
                 args: ['ulElement', { static: false }]
@@ -1596,7 +1603,7 @@ class TypeaheadDirective {
         this._container.matches = this._matches;
         this.element.nativeElement.focus();
         this._container.activeChangeEvent.subscribe((activeId) => {
-            this.activeDescendant = activeId;
+            this.activeDescendant = activeId || undefined;
             this.changeDetection.markForCheck();
         });
         this.isOpen = true;
@@ -1607,6 +1614,7 @@ class TypeaheadDirective {
             this._outsideClickListener();
             this._container = void 0;
             this.isOpen = false;
+            this.activeDescendant = void 0;
             this.changeDetection.markForCheck();
         }
         this.typeaheadOnPreview.emit(undefined);
@@ -1807,7 +1815,7 @@ class TypeaheadDirective {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TypeaheadDirective, deps: [{ token: i1$1.ComponentLoaderFactory }, { token: TypeaheadConfig }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i3.NgControl }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: TypeaheadDirective, isStandalone: true, selector: "[typeahead]", inputs: { typeahead: { classPropertyName: "typeahead", publicName: "typeahead", isSignal: true, isRequired: false, transformFunction: null }, typeaheadMinLength: { classPropertyName: "typeaheadMinLength", publicName: "typeaheadMinLength", isSignal: true, isRequired: false, transformFunction: null }, adaptivePosition: { classPropertyName: "adaptivePosition", publicName: "adaptivePosition", isSignal: true, isRequired: false, transformFunction: null }, isAnimated: { classPropertyName: "isAnimated", publicName: "isAnimated", isSignal: true, isRequired: false, transformFunction: null }, typeaheadWaitMs: { classPropertyName: "typeaheadWaitMs", publicName: "typeaheadWaitMs", isSignal: true, isRequired: false, transformFunction: null }, typeaheadOptionsLimit: { classPropertyName: "typeaheadOptionsLimit", publicName: "typeaheadOptionsLimit", isSignal: true, isRequired: false, transformFunction: null }, typeaheadOptionField: { classPropertyName: "typeaheadOptionField", publicName: "typeaheadOptionField", isSignal: true, isRequired: false, transformFunction: null }, typeaheadGroupField: { classPropertyName: "typeaheadGroupField", publicName: "typeaheadGroupField", isSignal: true, isRequired: false, transformFunction: null }, typeaheadOrderBy: { classPropertyName: "typeaheadOrderBy", publicName: "typeaheadOrderBy", isSignal: true, isRequired: false, transformFunction: null }, typeaheadAsync: { classPropertyName: "typeaheadAsync", publicName: "typeaheadAsync", isSignal: true, isRequired: false, transformFunction: null }, typeaheadLatinize: { classPropertyName: "typeaheadLatinize", publicName: "typeaheadLatinize", isSignal: true, isRequired: false, transformFunction: null }, typeaheadSingleWords: { classPropertyName: "typeaheadSingleWords", publicName: "typeaheadSingleWords", isSignal: true, isRequired: false, transformFunction: null }, typeaheadWordDelimiters: { classPropertyName: "typeaheadWordDelimiters", publicName: "typeaheadWordDelimiters", isSignal: true, isRequired: false, transformFunction: null }, typeaheadMultipleSearch: { classPropertyName: "typeaheadMultipleSearch", publicName: "typeaheadMultipleSearch", isSignal: true, isRequired: false, transformFunction: null }, typeaheadMultipleSearchDelimiters: { classPropertyName: "typeaheadMultipleSearchDelimiters", publicName: "typeaheadMultipleSearchDelimiters", isSignal: true, isRequired: false, transformFunction: null }, typeaheadPhraseDelimiters: { classPropertyName: "typeaheadPhraseDelimiters", publicName: "typeaheadPhraseDelimiters", isSignal: true, isRequired: false, transformFunction: null }, typeaheadItemTemplate: { classPropertyName: "typeaheadItemTemplate", publicName: "typeaheadItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, optionsListTemplate: { classPropertyName: "optionsListTemplate", publicName: "optionsListTemplate", isSignal: true, isRequired: false, transformFunction: null }, typeaheadScrollable: { classPropertyName: "typeaheadScrollable", publicName: "typeaheadScrollable", isSignal: true, isRequired: false, transformFunction: null }, typeaheadOptionsInScrollableView: { classPropertyName: "typeaheadOptionsInScrollableView", publicName: "typeaheadOptionsInScrollableView", isSignal: true, isRequired: false, transformFunction: null }, typeaheadHideResultsOnBlur: { classPropertyName: "typeaheadHideResultsOnBlur", publicName: "typeaheadHideResultsOnBlur", isSignal: true, isRequired: false, transformFunction: null }, typeaheadSelectFirstItem: { classPropertyName: "typeaheadSelectFirstItem", publicName: "typeaheadSelectFirstItem", isSignal: true, isRequired: false, transformFunction: null }, typeaheadIsFirstItemActive: { classPropertyName: "typeaheadIsFirstItemActive", publicName: "typeaheadIsFirstItemActive", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null }, dropup: { classPropertyName: "dropup", publicName: "dropup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { typeaheadLoading: "typeaheadLoading", typeaheadNoResults: "typeaheadNoResults", typeaheadOnSelect: "typeaheadOnSelect", typeaheadOnPreview: "typeaheadOnPreview", typeaheadOnBlur: "typeaheadOnBlur" }, host: { listeners: { "input": "onInput($event)", "keyup": "onChange($event)", "click": "onFocus()", "focus": "onFocus()", "blur": "onBlur()", "keydown": "onKeydown($event)" }, properties: { "attr.aria-activedescendant": "activeDescendant", "attr.aria-owns": "isOpen ? popupId : null", "attr.aria-expanded": "isOpen", "attr.aria-autocomplete": "list" } }, providers: [ComponentLoaderFactory, PositioningService], exportAs: ["bs-typeahead"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: TypeaheadDirective, isStandalone: true, selector: "[typeahead]", inputs: { typeahead: { classPropertyName: "typeahead", publicName: "typeahead", isSignal: true, isRequired: false, transformFunction: null }, typeaheadMinLength: { classPropertyName: "typeaheadMinLength", publicName: "typeaheadMinLength", isSignal: true, isRequired: false, transformFunction: null }, adaptivePosition: { classPropertyName: "adaptivePosition", publicName: "adaptivePosition", isSignal: true, isRequired: false, transformFunction: null }, isAnimated: { classPropertyName: "isAnimated", publicName: "isAnimated", isSignal: true, isRequired: false, transformFunction: null }, typeaheadWaitMs: { classPropertyName: "typeaheadWaitMs", publicName: "typeaheadWaitMs", isSignal: true, isRequired: false, transformFunction: null }, typeaheadOptionsLimit: { classPropertyName: "typeaheadOptionsLimit", publicName: "typeaheadOptionsLimit", isSignal: true, isRequired: false, transformFunction: null }, typeaheadOptionField: { classPropertyName: "typeaheadOptionField", publicName: "typeaheadOptionField", isSignal: true, isRequired: false, transformFunction: null }, typeaheadGroupField: { classPropertyName: "typeaheadGroupField", publicName: "typeaheadGroupField", isSignal: true, isRequired: false, transformFunction: null }, typeaheadOrderBy: { classPropertyName: "typeaheadOrderBy", publicName: "typeaheadOrderBy", isSignal: true, isRequired: false, transformFunction: null }, typeaheadAsync: { classPropertyName: "typeaheadAsync", publicName: "typeaheadAsync", isSignal: true, isRequired: false, transformFunction: null }, typeaheadLatinize: { classPropertyName: "typeaheadLatinize", publicName: "typeaheadLatinize", isSignal: true, isRequired: false, transformFunction: null }, typeaheadSingleWords: { classPropertyName: "typeaheadSingleWords", publicName: "typeaheadSingleWords", isSignal: true, isRequired: false, transformFunction: null }, typeaheadWordDelimiters: { classPropertyName: "typeaheadWordDelimiters", publicName: "typeaheadWordDelimiters", isSignal: true, isRequired: false, transformFunction: null }, typeaheadMultipleSearch: { classPropertyName: "typeaheadMultipleSearch", publicName: "typeaheadMultipleSearch", isSignal: true, isRequired: false, transformFunction: null }, typeaheadMultipleSearchDelimiters: { classPropertyName: "typeaheadMultipleSearchDelimiters", publicName: "typeaheadMultipleSearchDelimiters", isSignal: true, isRequired: false, transformFunction: null }, typeaheadPhraseDelimiters: { classPropertyName: "typeaheadPhraseDelimiters", publicName: "typeaheadPhraseDelimiters", isSignal: true, isRequired: false, transformFunction: null }, typeaheadItemTemplate: { classPropertyName: "typeaheadItemTemplate", publicName: "typeaheadItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, optionsListTemplate: { classPropertyName: "optionsListTemplate", publicName: "optionsListTemplate", isSignal: true, isRequired: false, transformFunction: null }, typeaheadScrollable: { classPropertyName: "typeaheadScrollable", publicName: "typeaheadScrollable", isSignal: true, isRequired: false, transformFunction: null }, typeaheadOptionsInScrollableView: { classPropertyName: "typeaheadOptionsInScrollableView", publicName: "typeaheadOptionsInScrollableView", isSignal: true, isRequired: false, transformFunction: null }, typeaheadHideResultsOnBlur: { classPropertyName: "typeaheadHideResultsOnBlur", publicName: "typeaheadHideResultsOnBlur", isSignal: true, isRequired: false, transformFunction: null }, typeaheadSelectFirstItem: { classPropertyName: "typeaheadSelectFirstItem", publicName: "typeaheadSelectFirstItem", isSignal: true, isRequired: false, transformFunction: null }, typeaheadIsFirstItemActive: { classPropertyName: "typeaheadIsFirstItemActive", publicName: "typeaheadIsFirstItemActive", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null }, dropup: { classPropertyName: "dropup", publicName: "dropup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { typeaheadLoading: "typeaheadLoading", typeaheadNoResults: "typeaheadNoResults", typeaheadOnSelect: "typeaheadOnSelect", typeaheadOnPreview: "typeaheadOnPreview", typeaheadOnBlur: "typeaheadOnBlur" }, host: { listeners: { "input": "onInput($event)", "keyup": "onChange($event)", "click": "onFocus()", "focus": "onFocus()", "blur": "onBlur()", "keydown": "onKeydown($event)" }, properties: { "attr.aria-activedescendant": "activeDescendant", "attr.aria-controls": "isOpen ? popupId : null", "attr.aria-expanded": "isOpen", "attr.aria-autocomplete": "list", "attr.role": "'combobox'" } }, providers: [ComponentLoaderFactory, PositioningService], exportAs: ["bs-typeahead"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TypeaheadDirective, decorators: [{
             type: Directive,
@@ -1816,9 +1824,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                     exportAs: 'bs-typeahead',
                     host: {
                         '[attr.aria-activedescendant]': 'activeDescendant',
-                        '[attr.aria-owns]': 'isOpen ? popupId : null',
+                        '[attr.aria-controls]': 'isOpen ? popupId : null',
                         '[attr.aria-expanded]': 'isOpen',
-                        '[attr.aria-autocomplete]': 'list'
+                        '[attr.aria-autocomplete]': 'list',
+                        '[attr.role]': `'combobox'`
                     },
                     standalone: true,
                     providers: [ComponentLoaderFactory, PositioningService]