@eui/components 16.0.0-next.4 → 16.0.0-next.5

package/esm2022/eui-autocomplete/eui-autocomplete.module.mjs

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { ReactiveFormsModule } from '@angular/forms';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 import { EuiChipListModule } from '@eui/components/eui-chip-list';
 import { EuiChipModule } from '@eui/components/eui-chip';
 import { EuiIconModule } from '@eui/components/eui-icon';
@@ -16,14 +17,16 @@ export class EuiAutocompleteModule {
             EuiChipListModule,
             EuiChipModule,
             EuiIconModule,
-            EuiInputTextModule], exports: [EuiAutocompleteComponent] }); }
+            EuiInputTextModule,
+            ScrollingModule], exports: [EuiAutocompleteComponent] }); }
     /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: EuiAutocompleteModule, imports: [CommonModule,
             ReactiveFormsModule,
             MatAutocompleteModule,
             EuiChipListModule,
             EuiChipModule,
             EuiIconModule,
-            EuiInputTextModule] }); }
+            EuiInputTextModule,
+            ScrollingModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: EuiAutocompleteModule, decorators: [{
             type: NgModule,
@@ -36,9 +39,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                         EuiChipModule,
                         EuiIconModule,
                         EuiInputTextModule,
+                        ScrollingModule,
                     ],
                     declarations: [EuiAutocompleteComponent],
                     exports: [EuiAutocompleteComponent],
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXVpLWF1dG9jb21wbGV0ZS5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9ldWktYXV0b2NvbXBsZXRlL2V1aS1hdXRvY29tcGxldGUubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRXJELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDekQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFFcEUsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sOEJBQThCLENBQUM7O0FBZXhFLE1BQU0sT0FBTyxxQkFBcUI7aUlBQXJCLHFCQUFxQjtrSUFBckIscUJBQXFCLGlCQUhmLHdCQUF3QixhQVJuQyxZQUFZO1lBQ1osbUJBQW1CO1lBQ25CLHFCQUFxQjtZQUNyQixpQkFBaUI7WUFDakIsYUFBYTtZQUNiLGFBQWE7WUFDYixrQkFBa0IsYUFHWix3QkFBd0I7a0lBRXpCLHFCQUFxQixZQVgxQixZQUFZO1lBQ1osbUJBQW1CO1lBQ25CLHFCQUFxQjtZQUNyQixpQkFBaUI7WUFDakIsYUFBYTtZQUNiLGFBQWE7WUFDYixrQkFBa0I7OzJGQUtiLHFCQUFxQjtrQkFiakMsUUFBUTttQkFBQztvQkFDTixPQUFPLEVBQUU7d0JBQ0wsWUFBWTt3QkFDWixtQkFBbUI7d0JBQ25CLHFCQUFxQjt3QkFDckIsaUJBQWlCO3dCQUNqQixhQUFhO3dCQUNiLGFBQWE7d0JBQ2Isa0JBQWtCO3FCQUNyQjtvQkFDRCxZQUFZLEVBQUUsQ0FBQyx3QkFBd0IsQ0FBQztvQkFDeEMsT0FBTyxFQUFFLENBQUMsd0JBQXdCLENBQUM7aUJBQ3RDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBNYXRBdXRvY29tcGxldGVNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9hdXRvY29tcGxldGUnO1xuaW1wb3J0IHsgUmVhY3RpdmVGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuaW1wb3J0IHsgRXVpQ2hpcExpc3RNb2R1bGUgfSBmcm9tICdAZXVpL2NvbXBvbmVudHMvZXVpLWNoaXAtbGlzdCc7XG5pbXBvcnQgeyBFdWlDaGlwTW9kdWxlIH0gZnJvbSAnQGV1aS9jb21wb25lbnRzL2V1aS1jaGlwJztcbmltcG9ydCB7IEV1aUljb25Nb2R1bGUgfSBmcm9tICdAZXVpL2NvbXBvbmVudHMvZXVpLWljb24nO1xuaW1wb3J0IHsgRXVpSW5wdXRUZXh0TW9kdWxlIH0gZnJvbSAnQGV1aS9jb21wb25lbnRzL2V1aS1pbnB1dC10ZXh0JztcblxuaW1wb3J0IHsgRXVpQXV0b2NvbXBsZXRlQ29tcG9uZW50IH0gZnJvbSAnLi9ldWktYXV0b2NvbXBsZXRlLmNvbXBvbmVudCc7XG5cbkBOZ01vZHVsZSh7XG4gICAgaW1wb3J0czogW1xuICAgICAgICBDb21tb25Nb2R1bGUsXG4gICAgICAgIFJlYWN0aXZlRm9ybXNNb2R1bGUsXG4gICAgICAgIE1hdEF1dG9jb21wbGV0ZU1vZHVsZSxcbiAgICAgICAgRXVpQ2hpcExpc3RNb2R1bGUsXG4gICAgICAgIEV1aUNoaXBNb2R1bGUsXG4gICAgICAgIEV1aUljb25Nb2R1bGUsXG4gICAgICAgIEV1aUlucHV0VGV4dE1vZHVsZSxcbiAgICBdLFxuICAgIGRlY2xhcmF0aW9uczogW0V1aUF1dG9jb21wbGV0ZUNvbXBvbmVudF0sXG4gICAgZXhwb3J0czogW0V1aUF1dG9jb21wbGV0ZUNvbXBvbmVudF0sXG59KVxuZXhwb3J0IGNsYXNzIEV1aUF1dG9jb21wbGV0ZU1vZHVsZSB7fVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXVpLWF1dG9jb21wbGV0ZS5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9ldWktYXV0b2NvbXBsZXRlL2V1aS1hdXRvY29tcGxldGUubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3JELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUV6RCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUNsRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDekQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ3pELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBRXBFLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLDhCQUE4QixDQUFDOztBQWdCeEUsTUFBTSxPQUFPLHFCQUFxQjtpSUFBckIscUJBQXFCO2tJQUFyQixxQkFBcUIsaUJBSGYsd0JBQXdCLGFBVG5DLFlBQVk7WUFDWixtQkFBbUI7WUFDbkIscUJBQXFCO1lBQ3JCLGlCQUFpQjtZQUNqQixhQUFhO1lBQ2IsYUFBYTtZQUNiLGtCQUFrQjtZQUNsQixlQUFlLGFBR1Qsd0JBQXdCO2tJQUV6QixxQkFBcUIsWUFaMUIsWUFBWTtZQUNaLG1CQUFtQjtZQUNuQixxQkFBcUI7WUFDckIsaUJBQWlCO1lBQ2pCLGFBQWE7WUFDYixhQUFhO1lBQ2Isa0JBQWtCO1lBQ2xCLGVBQWU7OzJGQUtWLHFCQUFxQjtrQkFkakMsUUFBUTttQkFBQztvQkFDTixPQUFPLEVBQUU7d0JBQ0wsWUFBWTt3QkFDWixtQkFBbUI7d0JBQ25CLHFCQUFxQjt3QkFDckIsaUJBQWlCO3dCQUNqQixhQUFhO3dCQUNiLGFBQWE7d0JBQ2Isa0JBQWtCO3dCQUNsQixlQUFlO3FCQUNsQjtvQkFDRCxZQUFZLEVBQUUsQ0FBQyx3QkFBd0IsQ0FBQztvQkFDeEMsT0FBTyxFQUFFLENBQUMsd0JBQXdCLENBQUM7aUJBQ3RDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBNYXRBdXRvY29tcGxldGVNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9hdXRvY29tcGxldGUnO1xuaW1wb3J0IHsgUmVhY3RpdmVGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IFNjcm9sbGluZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9zY3JvbGxpbmcnO1xuXG5pbXBvcnQgeyBFdWlDaGlwTGlzdE1vZHVsZSB9IGZyb20gJ0BldWkvY29tcG9uZW50cy9ldWktY2hpcC1saXN0JztcbmltcG9ydCB7IEV1aUNoaXBNb2R1bGUgfSBmcm9tICdAZXVpL2NvbXBvbmVudHMvZXVpLWNoaXAnO1xuaW1wb3J0IHsgRXVpSWNvbk1vZHVsZSB9IGZyb20gJ0BldWkvY29tcG9uZW50cy9ldWktaWNvbic7XG5pbXBvcnQgeyBFdWlJbnB1dFRleHRNb2R1bGUgfSBmcm9tICdAZXVpL2NvbXBvbmVudHMvZXVpLWlucHV0LXRleHQnO1xuXG5pbXBvcnQgeyBFdWlBdXRvY29tcGxldGVDb21wb25lbnQgfSBmcm9tICcuL2V1aS1hdXRvY29tcGxldGUuY29tcG9uZW50JztcblxuQE5nTW9kdWxlKHtcbiAgICBpbXBvcnRzOiBbXG4gICAgICAgIENvbW1vbk1vZHVsZSxcbiAgICAgICAgUmVhY3RpdmVGb3Jtc01vZHVsZSxcbiAgICAgICAgTWF0QXV0b2NvbXBsZXRlTW9kdWxlLFxuICAgICAgICBFdWlDaGlwTGlzdE1vZHVsZSxcbiAgICAgICAgRXVpQ2hpcE1vZHVsZSxcbiAgICAgICAgRXVpSWNvbk1vZHVsZSxcbiAgICAgICAgRXVpSW5wdXRUZXh0TW9kdWxlLFxuICAgICAgICBTY3JvbGxpbmdNb2R1bGUsXG4gICAgXSxcbiAgICBkZWNsYXJhdGlvbnM6IFtFdWlBdXRvY29tcGxldGVDb21wb25lbnRdLFxuICAgIGV4cG9ydHM6IFtFdWlBdXRvY29tcGxldGVDb21wb25lbnRdLFxufSlcbmV4cG9ydCBjbGFzcyBFdWlBdXRvY29tcGxldGVNb2R1bGUge31cbiJdfQ==

package/eui-autocomplete/eui-autocomplete.component.d.ts

@@ -3,7 +3,7 @@ import { FormControl, ControlValueAccessor, NgControl } from '@angular/forms';
 import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { MatAutocomplete, MatAutocompleteSelectedEvent, MatAutocompleteTrigger } from '@angular/material/autocomplete';
-import { ScrollDispatcher } from '@angular/cdk/scrolling';
+import { ScrollDispatcher, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { EuiChip } from '@eui/components/eui-chip';
 import { EuiChipDragDrop, EuiChipListComponent } from '@eui/components/eui-chip-list';
 import { EuiTemplateDirective } from '@eui/components/directives';
@@ -14,6 +14,7 @@ export declare class EuiAutocompleteComponent extends BaseDirective implements O
     private cd;
     private control;
     private scrollDispatcher;
+    private elementRef;
     toggleLinkMoreLabel: string;
     toggleLinkLessLabel: string;
     autocompleteData: EuiAutoCompleteItem[];
@@ -63,8 +64,17 @@ export declare class EuiAutocompleteComponent extends BaseDirective implements O
     autocompleteInputTrigger: MatAutocompleteTrigger;
     matAutocomplete: MatAutocomplete;
     chipList: EuiChipListComponent;
-    autocompleteOptionTemplate: TemplateRef<ElementRef>;
-    autocompleteOptGroupTemplate: TemplateRef<ElementRef>;
+    virtualScrolling: CdkVirtualScrollViewport;
+    autocompleteOptionTemplate: TemplateRef<{
+        $implicit: {
+            label: string;
+        };
+    }>;
+    autocompleteOptGroupTemplate: TemplateRef<{
+        $implicit: {
+            label: string;
+        };
+    }>;
     separatorKeysCodes: number[];
     autocompleteControl: FormControl<any>;
     autocompleteOptions: BehaviorSubject<EuiAutoCompleteItem[]>;
@@ -75,6 +85,7 @@ export declare class EuiAutocompleteComponent extends BaseDirective implements O
     };
     autocompleteId: string;
     isDisabled: boolean;
+    selectedOptionIndex: number;
     get hasChips(): boolean;
     set hasChips(value: BooleanInput);
     private _hasChips;
@@ -123,6 +134,9 @@ export declare class EuiAutocompleteComponent extends BaseDirective implements O
     get isForceSelection(): boolean;
     set isForceSelection(value: BooleanInput);
     private _isForceSelection;
+    get autoActiveFirstOption(): boolean;
+    set autoActiveFirstOption(value: BooleanInput);
+    private _autoActiveFirstOption;
     get isChipsGrid(): boolean;
     private destroy$;
     private nbClick;
@@ -130,12 +144,15 @@ export declare class EuiAutocompleteComponent extends BaseDirective implements O
     private value;
     private fieldValue;
     private scrollDispatcherSubscription;
-    constructor(cd: ChangeDetectorRef, control: NgControl, scrollDispatcher: ScrollDispatcher);
+    private keyboardOptionSelectorHandlerSubscription;
+    constructor(cd: ChangeDetectorRef, control: NgControl, scrollDispatcher: ScrollDispatcher, elementRef: ElementRef);
     ngOnChanges(c: SimpleChanges): void;
     ngOnInit(): void;
     ngDoCheck(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    get nbOptionsVisible(): number;
+    get cdkVirtualScrollViewport(): number;
     addOnBlurHandler(event: FocusEvent): void;
     addOnEnterHandler(): void;
     add(newValue: string): void;
@@ -155,7 +172,6 @@ export declare class EuiAutocompleteComponent extends BaseDirective implements O
     trackByFn(index: number, item: EuiAutoCompleteItem): number;
     onClose(): void;
     onOpen(): void;
-    isVisible(origin: ElementRef, scrollableParent: HTMLElement): boolean;
     writeValue(value: EuiAutoCompleteItem | EuiAutoCompleteItem[]): void;
     setDisabledState(isDisabled: boolean): void;
     registerOnChange(fn: any): void;
@@ -166,6 +182,7 @@ export declare class EuiAutocompleteComponent extends BaseDirective implements O
     onClear(): void;
     onChipListFocus(): void;
     onKeyDownBackspace(): void;
+    private isVisible;
     private inputValueHandler;
     private onChange;
     private onTouch;
@@ -174,7 +191,7 @@ export declare class EuiAutocompleteComponent extends BaseDirective implements O
     private generateId;
     private orderItems;
     private groupingHandler;
-    static ɵfac: i0.ɵɵFactoryDeclaration<EuiAutocompleteComponent, [null, { optional: true; self: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EuiAutocompleteComponent, "eui-autocomplete, input[euiAutocomplete]", never, { "toggleLinkMoreLabel": { "alias": "toggleLinkMoreLabel"; "required": false; }; "toggleLinkLessLabel": { "alias": "toggleLinkLessLabel"; "required": false; }; "autocompleteData": { "alias": "autocompleteData"; "required": false; }; "autocompleteDataSelected": { "alias": "autocompleteDataSelected"; "required": false; }; "chipsSortOrder": { "alias": "chipsSortOrder"; "required": false; }; "itemsSortOrder": { "alias": "itemsSortOrder"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "matching": { "alias": "matching"; "required": false; }; "chipsPosition": { "alias": "chipsPosition"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "classList": { "alias": "classList"; "required": false; }; "groupBy": { "alias": "groupBy"; "required": false; }; "dragAndDropSourceName": { "alias": "dragAndDropSourceName"; "required": false; }; "dragAndDropConnectedTo": { "alias": "dragAndDropConnectedTo"; "required": false; }; "hasChips": { "alias": "hasChips"; "required": false; }; "isGrid": { "alias": "isGrid"; "required": false; }; "async": { "alias": "async"; "required": false; }; "addOnBlur": { "alias": "addOnBlur"; "required": false; }; "isFreeValueAllowed": { "alias": "isFreeValueAllowed"; "required": false; }; "isDuplicateValueAllowed": { "alias": "isDuplicateValueAllowed"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "isChipsRemovable": { "alias": "isChipsRemovable"; "required": false; }; "maxVisibleChipsCount": { "alias": "maxVisibleChipsCount"; "required": false; }; "chipsLabelTruncateCount": { "alias": "chipsLabelTruncateCount"; "required": false; }; "isMaxVisibleChipsOpened": { "alias": "isMaxVisibleChipsOpened"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "isChipsSorted": { "alias": "isChipsSorted"; "required": false; }; "isItemsSorted": { "alias": "isItemsSorted"; "required": false; }; "isChipsDragAndDrop": { "alias": "isChipsDragAndDrop"; "required": false; }; "isForceSelection": { "alias": "isForceSelection"; "required": false; }; }, { "closed": "closed"; "opened": "opened"; "selectionChanged": "selectionChanged"; "itemAdded": "itemAdded"; "itemRemoved": "itemRemoved"; "inputChanged": "inputChanged"; "chipDragStarted": "chipDragStarted"; "chipDragReleased": "chipDragReleased"; "chipDropped": "chipDropped"; "clear": "clear"; "close": "close"; "open": "open"; "blur": "blur"; "selectionChange": "selectionChange"; "itemAdd": "itemAdd"; "itemRemove": "itemRemove"; "inputChange": "inputChange"; "chipDragStart": "chipDragStart"; "chipDragRelease": "chipDragRelease"; "chipDrop": "chipDrop"; }, ["templates"], never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EuiAutocompleteComponent, [null, { optional: true; self: true; }, null, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EuiAutocompleteComponent, "eui-autocomplete, input[euiAutocomplete]", never, { "toggleLinkMoreLabel": { "alias": "toggleLinkMoreLabel"; "required": false; }; "toggleLinkLessLabel": { "alias": "toggleLinkLessLabel"; "required": false; }; "autocompleteData": { "alias": "autocompleteData"; "required": false; }; "autocompleteDataSelected": { "alias": "autocompleteDataSelected"; "required": false; }; "chipsSortOrder": { "alias": "chipsSortOrder"; "required": false; }; "itemsSortOrder": { "alias": "itemsSortOrder"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "matching": { "alias": "matching"; "required": false; }; "chipsPosition": { "alias": "chipsPosition"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "classList": { "alias": "classList"; "required": false; }; "groupBy": { "alias": "groupBy"; "required": false; }; "dragAndDropSourceName": { "alias": "dragAndDropSourceName"; "required": false; }; "dragAndDropConnectedTo": { "alias": "dragAndDropConnectedTo"; "required": false; }; "hasChips": { "alias": "hasChips"; "required": false; }; "isGrid": { "alias": "isGrid"; "required": false; }; "async": { "alias": "async"; "required": false; }; "addOnBlur": { "alias": "addOnBlur"; "required": false; }; "isFreeValueAllowed": { "alias": "isFreeValueAllowed"; "required": false; }; "isDuplicateValueAllowed": { "alias": "isDuplicateValueAllowed"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "isChipsRemovable": { "alias": "isChipsRemovable"; "required": false; }; "maxVisibleChipsCount": { "alias": "maxVisibleChipsCount"; "required": false; }; "chipsLabelTruncateCount": { "alias": "chipsLabelTruncateCount"; "required": false; }; "isMaxVisibleChipsOpened": { "alias": "isMaxVisibleChipsOpened"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "isChipsSorted": { "alias": "isChipsSorted"; "required": false; }; "isItemsSorted": { "alias": "isItemsSorted"; "required": false; }; "isChipsDragAndDrop": { "alias": "isChipsDragAndDrop"; "required": false; }; "isForceSelection": { "alias": "isForceSelection"; "required": false; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; }; }, { "closed": "closed"; "opened": "opened"; "selectionChanged": "selectionChanged"; "itemAdded": "itemAdded"; "itemRemoved": "itemRemoved"; "inputChanged": "inputChanged"; "chipDragStarted": "chipDragStarted"; "chipDragReleased": "chipDragReleased"; "chipDropped": "chipDropped"; "clear": "clear"; "close": "close"; "open": "open"; "blur": "blur"; "selectionChange": "selectionChange"; "itemAdd": "itemAdd"; "itemRemove": "itemRemove"; "inputChange": "inputChange"; "chipDragStart": "chipDragStart"; "chipDragRelease": "chipDragRelease"; "chipDrop": "chipDrop"; }, ["templates"], never, false, never>;
 }
 //# sourceMappingURL=eui-autocomplete.component.d.ts.map

package/eui-autocomplete/eui-autocomplete.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"eui-autocomplete.component.d.ts","sourceRoot":"","sources":["../../eui-autocomplete/eui-autocomplete.component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"eui-autocomplete.component.d.ts","sourceRoot":"","sources":["../../eui-autocomplete/eui-autocomplete.component.ts"],"names":[],"mappings":"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"}

package/eui-autocomplete/eui-autocomplete.module.d.ts

@@ -7,9 +7,10 @@ import * as i5 from "@eui/components/eui-chip-list";
 import * as i6 from "@eui/components/eui-chip";
 import * as i7 from "@eui/components/eui-icon";
 import * as i8 from "@eui/components/eui-input-text";
+import * as i9 from "@angular/cdk/scrolling";
 export declare class EuiAutocompleteModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<EuiAutocompleteModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<EuiAutocompleteModule, [typeof i1.EuiAutocompleteComponent], [typeof i2.CommonModule, typeof i3.ReactiveFormsModule, typeof i4.MatAutocompleteModule, typeof i5.EuiChipListModule, typeof i6.EuiChipModule, typeof i7.EuiIconModule, typeof i8.EuiInputTextModule], [typeof i1.EuiAutocompleteComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EuiAutocompleteModule, [typeof i1.EuiAutocompleteComponent], [typeof i2.CommonModule, typeof i3.ReactiveFormsModule, typeof i4.MatAutocompleteModule, typeof i5.EuiChipListModule, typeof i6.EuiChipModule, typeof i7.EuiIconModule, typeof i8.EuiInputTextModule, typeof i9.ScrollingModule], [typeof i1.EuiAutocompleteComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<EuiAutocompleteModule>;
 }
 //# sourceMappingURL=eui-autocomplete.module.d.ts.map

package/eui-autocomplete/eui-autocomplete.module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"eui-autocomplete.module.d.ts","sourceRoot":"","sources":["../../eui-autocomplete/eui-autocomplete.module.ts"],"names":[],"mappings":";;;;;;;;;AAYA,qBAaa,qBAAqB;yCAArB,qBAAqB;0CAArB,qBAAqB;0CAArB,qBAAqB;CAAG"}
+{"version":3,"file":"eui-autocomplete.module.d.ts","sourceRoot":"","sources":["../../eui-autocomplete/eui-autocomplete.module.ts"],"names":[],"mappings":";;;;;;;;;;AAaA,qBAca,qBAAqB;yCAArB,qBAAqB;0CAArB,qBAAqB;0CAArB,qBAAqB;CAAG"}

package/fesm2022/eui-components-eui-autocomplete.mjs

@@ -5,7 +5,7 @@ import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import { takeUntil, startWith, skip } from 'rxjs/operators';
-import { BehaviorSubject, Subject, Subscription, of } from 'rxjs';
+import { BehaviorSubject, Subject, Subscription, fromEvent, filter, of } from 'rxjs';
 import * as i4 from '@angular/material/autocomplete';
 import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
 import { uniqueId } from '@eui/core';
@@ -13,6 +13,7 @@ import { EuiChip, EuiChipTooltip, EuiChipModule } from '@eui/components/eui-chip
 import { EuiTemplateDirective } from '@eui/components/directives';
 import { BaseDirective } from '@eui/components/shared';
 import * as i2 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i5 from '@angular/material/core';
@@ -65,6 +66,8 @@ class EuiAutocompleteComponent extends BaseDirective {
     set isChipsDragAndDrop(value) { this._isChipsDragAndDrop = coerceBooleanProperty(value); }
     get isForceSelection() { return this._isForceSelection; }
     set isForceSelection(value) { this._isForceSelection = coerceBooleanProperty(value); }
+    get autoActiveFirstOption() { return this._autoActiveFirstOption; }
+    set autoActiveFirstOption(value) { this._autoActiveFirstOption = coerceBooleanProperty(value); }
     /* eslint-enable prettier/prettier */
     get isChipsGrid() {
         if (this._isGrid) {
@@ -74,11 +77,12 @@ class EuiAutocompleteComponent extends BaseDirective {
             return this._isGrid;
         }
     }
-    constructor(cd, control, scrollDispatcher) {
+    constructor(cd, control, scrollDispatcher, elementRef) {
         super();
         this.cd = cd;
         this.control = control;
         this.scrollDispatcher = scrollDispatcher;
+        this.elementRef = elementRef;
         this.toggleLinkMoreLabel = null;
         this.toggleLinkLessLabel = null;
         this.autocompleteData = [];
@@ -128,6 +132,7 @@ class EuiAutocompleteComponent extends BaseDirective {
         this.chips = [];
         this.autocompleteId = `eui-autocomplete-${uniqueId()}`;
         this.isDisabled = false;
+        this.selectedOptionIndex = -1;
         this._hasChips = false;
         this._isGrid = true;
         this._async = false;
@@ -144,12 +149,14 @@ class EuiAutocompleteComponent extends BaseDirective {
         this._isItemsSorted = false;
         this._isChipsDragAndDrop = false;
         this._isForceSelection = false;
+        this._autoActiveFirstOption = true;
         this.destroy$ = new Subject();
         this.nbClick = 0;
         this.ignoreOpenCloseEvents = false;
         this.value = null;
         this.fieldValue = null;
         this.scrollDispatcherSubscription = new Subscription();
+        this.keyboardOptionSelectorHandlerSubscription = new Subscription();
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = () => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -208,6 +215,12 @@ class EuiAutocompleteComponent extends BaseDirective {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
     }
+    get nbOptionsVisible() {
+        return 5;
+    }
+    get cdkVirtualScrollViewport() {
+        return this.autocompleteOptions.value.length >= this.nbOptionsVisible ? 240 : this.autocompleteOptions.value.length * 48;
+    }
     addOnBlurHandler(event) {
         if (this.addOnBlur) {
             const target = event.relatedTarget;
@@ -319,28 +332,57 @@ class EuiAutocompleteComponent extends BaseDirective {
             this.closed.emit();
             this.close.emit();
         }
+        this.virtualScrolling.scrollToIndex(0);
+        this.selectedOptionIndex = -1;
+        this.keyboardOptionSelectorHandlerSubscription.unsubscribe();
     }
     onOpen() {
         this.scrollDispatcherSubscription = this.scrollDispatcher
             .ancestorScrolled(this.autocompleteInput)
             .subscribe((event) => {
-            if (event) {
-                if (!this.isVisible(this.autocompleteInput, event.getElementRef().nativeElement)) {
-                    this.autocompleteInputTrigger.closePanel();
-                }
+            const scrollableParent = event ? event.getElementRef().nativeElement : document.querySelector('body');
+            if (!this.isVisible(this.autocompleteInput.nativeElement, scrollableParent)) {
+                this.autocompleteInputTrigger.closePanel();
             }
         });
         if (!this.ignoreOpenCloseEvents) {
             this.opened.emit();
             this.open.emit();
         }
-    }
-    isVisible(origin, scrollableParent) {
-        const originY = origin.nativeElement.getBoundingClientRect().y;
-        const originHeight = origin.nativeElement.getBoundingClientRect().height;
-        const scrollableParentY = scrollableParent.getBoundingClientRect().y;
-        const scrollableParentHeight = scrollableParent.getBoundingClientRect().height;
-        return originY - scrollableParentY > 0 && originY + originHeight < scrollableParentY + scrollableParentHeight;
+        let visibleRangeStart = 0;
+        let visibleRangeEnd = 4;
+        if (this.autocompleteOptions.value.length < this.nbOptionsVisible) {
+            visibleRangeEnd = this.autocompleteOptions.value.length - 1;
+        }
+        this.keyboardOptionSelectorHandlerSubscription = fromEvent(this.elementRef.nativeElement, 'keydown')
+            .pipe(takeUntil(this.destroy$), filter((e) => e.code === 'ArrowDown' || e.code === 'ArrowUp'), startWith(this.autoActiveFirstOption ? { code: 'ArrowDown' } : null))
+            .subscribe((e) => {
+            if (e) {
+                if (e.code === 'ArrowDown' && this.selectedOptionIndex < this.autocompleteOptions.value.length - 1) {
+                    this.selectedOptionIndex++;
+                }
+                if (e.code === 'ArrowUp' && this.selectedOptionIndex > 0) {
+                    this.selectedOptionIndex--;
+                }
+                const cIndex = this.selectedOptionIndex - this.virtualScrolling.getRenderedRange().start;
+                this.matAutocomplete._keyManager.setActiveItem(cIndex);
+                this.matAutocomplete.options.toArray()[cIndex]?.setActiveStyles();
+                if (e.code === 'ArrowDown' && cIndex > visibleRangeEnd - visibleRangeStart - visibleRangeEnd) {
+                    if (this.selectedOptionIndex > visibleRangeEnd) {
+                        this.virtualScrolling.scrollToIndex(this.selectedOptionIndex - visibleRangeEnd + visibleRangeStart);
+                        visibleRangeStart++;
+                        visibleRangeEnd++;
+                    }
+                }
+                if (e.code === 'ArrowUp' && cIndex < visibleRangeStart) {
+                    if (this.selectedOptionIndex < visibleRangeStart) {
+                        this.virtualScrolling.scrollToIndex(this.selectedOptionIndex);
+                        visibleRangeStart--;
+                        visibleRangeEnd--;
+                    }
+                }
+            }
+        });
     }
     writeValue(value) {
         this.value = value;
@@ -400,6 +442,13 @@ class EuiAutocompleteComponent extends BaseDirective {
             this.chipList.euiChipItems.last.nativeElement.querySelector('.eui-chip__remove-icon').focus();
         }
     }
+    isVisible(origin, scrollableParent) {
+        const originY = origin.getBoundingClientRect().y;
+        const scrollableParentY = Math.abs(scrollableParent.getBoundingClientRect().y);
+        const scrollableParentHeight = scrollableParent.getBoundingClientRect().height - 50;
+        return ((originY > 0 && originY < scrollableParentHeight) ||
+            (originY - scrollableParentY > 0 && originY < scrollableParentY + scrollableParentHeight));
+    }
     inputValueHandler(value) {
         if (this.hasChips) {
             this.autocompleteDataSelected = this.autocompleteDataSelected.map((selected) => new EuiAutoCompleteItem(Object.assign({}, selected, { euiInternalId: this.generateId() })));
@@ -532,17 +581,17 @@ class EuiAutocompleteComponent extends BaseDirective {
             });
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: EuiAutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.NgControl, optional: true, self: true }, { token: i2.ScrollDispatcher }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: EuiAutocompleteComponent, selector: "eui-autocomplete, input[euiAutocomplete]", inputs: { toggleLinkMoreLabel: "toggleLinkMoreLabel", toggleLinkLessLabel: "toggleLinkLessLabel", autocompleteData: "autocompleteData", autocompleteDataSelected: "autocompleteDataSelected", chipsSortOrder: "chipsSortOrder", itemsSortOrder: "itemsSortOrder", placeholder: "placeholder", matching: "matching", chipsPosition: "chipsPosition", panelWidth: "panelWidth", classList: "classList", groupBy: "groupBy", dragAndDropSourceName: "dragAndDropSourceName", dragAndDropConnectedTo: "dragAndDropConnectedTo", hasChips: "hasChips", isGrid: "isGrid", async: "async", addOnBlur: "addOnBlur", isFreeValueAllowed: "isFreeValueAllowed", isDuplicateValueAllowed: "isDuplicateValueAllowed", isLoading: "isLoading", isChipsRemovable: "isChipsRemovable", maxVisibleChipsCount: "maxVisibleChipsCount", chipsLabelTruncateCount: "chipsLabelTruncateCount", isMaxVisibleChipsOpened: "isMaxVisibleChipsOpened", readonly: "readonly", isChipsSorted: "isChipsSorted", isItemsSorted: "isItemsSorted", isChipsDragAndDrop: "isChipsDragAndDrop", isForceSelection: "isForceSelection" }, outputs: { closed: "closed", opened: "opened", selectionChanged: "selectionChanged", itemAdded: "itemAdded", itemRemoved: "itemRemoved", inputChanged: "inputChanged", chipDragStarted: "chipDragStarted", chipDragReleased: "chipDragReleased", chipDropped: "chipDropped", clear: "clear", close: "close", open: "open", blur: "blur", selectionChange: "selectionChange", itemAdd: "itemAdd", itemRemove: "itemRemove", inputChange: "inputChange", chipDragStart: "chipDragStart", chipDragRelease: "chipDragRelease", chipDrop: "chipDrop" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], viewQueries: [{ propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true, read: ElementRef }, { propertyName: "autocompleteInputTrigger", first: true, predicate: ["autocompleteInputTrigger"], descendants: true, read: MatAutocompleteTrigger }, { propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }, { propertyName: "chipList", first: true, predicate: ["chipList"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-autocomplete__container\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\n    <div class=\"eui-autocomplete__wrapper eui-autocomplete__wrapper--{{ chipsPosition }}\">\n        <ng-template [ngIf]=\"chipsPosition === 'bottom'\">\n            <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n        </ng-template>\n\n        <ng-container *ngIf=\"hasChips\">\n            <eui-chip-list\n                #chipList\n                [chips]=\"chips\"\n                [isGrid]=\"isChipsGrid\"\n                [isChipsDragAndDrop]=\"isChipsDragAndDrop\"\n                [isChipsRemovable]=\"isChipsRemovable && !readonly\"\n                [isChipsSorted]=\"isChipsSorted\"\n                [chipsSortOrder]=\"chipsSortOrder\"\n                [maxVisibleChipsCount]=\"maxVisibleChipsCount\"\n                [isMaxVisibleChipsOpened]=\"isMaxVisibleChipsOpened\"\n                [toggleLinkMoreLabel]=\"toggleLinkMoreLabel\"\n                [toggleLinkLessLabel]=\"toggleLinkLessLabel\"\n                [chipsLabelTruncateCount]=\"chipsLabelTruncateCount\"\n                [dragAndDropSourceName]=\"dragAndDropSourceName\"\n                [dragAndDropConnectedTo]=\"dragAndDropConnectedTo\"\n                (chipDropped)=\"onChipDropped($event)\"\n                (chipDragStarted)=\"onChipDragStarted($event)\"\n                (chipDragReleased)=\"onChipDragReleased($event)\"\n                (chipRemove)=\"onChipRemove($event)\"\n                (chiplistFocus)=\"onChipListFocus()\">\n                <euiChipListAppendContent>\n                    <ng-template [ngIf]=\"chipsPosition === 'inside'\">\n                        <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n                    </ng-template>\n                </euiChipListAppendContent>\n            </eui-chip-list>\n        </ng-container>\n\n        <ng-template [ngIf]=\"chipsPosition === 'top' || !hasChips\">\n            <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n        </ng-template>\n\n        <ng-template #field>\n            <span class=\"eui-autocomplete__field-wrapper\">\n                <ng-container *ngIf=\"!hasChips\">\n                    <input\n                        [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n                        [euiLoading]=\"isLoading\"\n                        euiInputText\n                        #autocompleteInput\n                        #autocompleteInputTrigger\n                        placeholder=\"{{ placeholder }}\"\n                        [matAutocompleteDisabled]=\"readonly\"\n                        [formControl]=\"autocompleteControl\"\n                        [matAutocomplete]=\"auto\"\n                        [readonly]=\"readonly\"\n                        [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n                        (clear)=\"onClear()\"\n                        (focusout)=\"onFocusOut()\"\n                        role=\"combobox\"\n                        aria-autocomplete=\"both\"\n                        aria-haspopup=\"true\"\n                        aria-controls=\"autocompleteId\" />\n                </ng-container>\n                <ng-container *ngIf=\"hasChips\">\n                    <input\n                        [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n                        [euiLoading]=\"isLoading\"\n                        euiInputText\n                        #autocompleteInput\n                        #autocompleteInputTrigger\n                        placeholder=\"{{ placeholder }}\"\n                        [matAutocompleteDisabled]=\"readonly\"\n                        [formControl]=\"autocompleteControl\"\n                        [matAutocomplete]=\"auto\"\n                        [matAutocompleteConnectedTo]=\"chipsPosition === 'inside' ? origin : null\"\n                        [readonly]=\"readonly\"\n                        [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n                        (clear)=\"onClear()\"\n                        (focusout)=\"onFocusOut(); addOnBlurHandler($event)\"\n                        (keydown.enter)=\"addOnEnterHandler()\"\n                        (keydown.backspace)=\"onKeyDownBackspace()\"\n                        role=\"combobox\"\n                        aria-autocomplete=\"both\"\n                        aria-haspopup=\"true\"\n                        aria-controls=\"autocompleteId\" />\n                </ng-container>\n\n                <mat-autocomplete\n                    autoActiveFirstOption\n                    [id]=\"autocompleteId\"\n                    #auto=\"matAutocomplete\"\n                    [panelWidth]=\"panelWidth\"\n                    [class]=\"classList\"\n                    (closed)=\"onClose()\"\n                    (opened)=\"onOpen()\"\n                    (optionSelected)=\"onOptionSelected($event)\">\n                    <ng-container *ngIf=\"groupBy\">\n                        <ng-container *ngFor=\"let distinctOptionGroup of distinctOptionGroups\">\n                            <mat-optgroup\n                                [class.eui-autocomplete__optgroup--custom]=\"autocompleteOptGroupTemplate\"\n                                *ngIf=\"(groupedItems[distinctOptionGroup] | async).length > 0\"\n                                [label]=\"distinctOptionGroup\">\n                                <ng-container *ngIf=\"autocompleteOptGroupTemplate\">\n                                    <div class=\"eui-autocomplete__optgroup--custom-optgroup-wrapper\">\n                                        <ng-template [ngTemplateOutlet]=\"autocompleteOptGroupTemplate\"></ng-template>\n                                        <!-- [ngTemplateOutletContext]=\"{ $implicit: { label: distinctOptionGroup } }\"></ng-template> TODO check v16 issue -->\n                                    </div>\n                                </ng-container>\n                                <mat-option\n                                    *ngFor=\"let groupedItem of groupedItems[distinctOptionGroup] | async; trackBy: trackByFn\"\n                                    [class]=\"\n                                        groupedItem.typeClass\n                                            ? 'mat-option eui-autocomplete__option eui-autocomplete__option--' + groupedItem.typeClass\n                                            : 'mat-option eui-autocomplete__option'\n                                    \"\n                                    [class.eui-autocomplete__option--custom]=\"autocompleteOptionTemplate\"\n                                    [value]=\"groupedItem\">\n                                    <span *ngIf=\"groupedItem.iconClass\" class=\"{{ groupedItem.iconClass }}\"></span>\n                                    <ng-container *ngIf=\"!autocompleteOptionTemplate\">\n                                        {{ groupedItem.label }}\n                                    </ng-container>\n                                    <ng-container *ngIf=\"autocompleteOptionTemplate\">\n                                        <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate\"></ng-template>\n                                        <!-- [ngTemplateOutletContext]=\"{ $implicit: groupedItem }\"></ng-template> TODO check v16 issue -->\n                                    </ng-container>\n                                </mat-option>\n                            </mat-optgroup>\n                        </ng-container>\n                    </ng-container>\n                    <ng-container *ngIf=\"!groupBy\">\n                        <mat-option\n                            *ngFor=\"let autocompleteOption of autocompleteOptions | async; trackBy: trackByFn\"\n                            [class]=\"\n                                autocompleteOption.typeClass\n                                    ? 'mat-option eui-autocomplete__option eui-autocomplete__option--' + autocompleteOption.typeClass\n                                    : 'mat-option eui-autocomplete__option'\n                            \"\n                            [class.eui-autocomplete__option--custom]=\"autocompleteOptionTemplate\"\n                            [value]=\"autocompleteOption\">\n                            <span *ngIf=\"autocompleteOption.iconClass\" class=\"{{ autocompleteOption.iconClass }}\"></span>\n                            <ng-container *ngIf=\"!autocompleteOptionTemplate\">\n                                {{ autocompleteOption.label }}\n                            </ng-container>\n                            <ng-container *ngIf=\"autocompleteOptionTemplate\">\n                                <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate\"></ng-template>\n                                <!-- [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\"></ng-template> TODO v16 check issue -->\n                            </ng-container>\n                        </mat-option>\n                    </ng-container>\n                </mat-autocomplete>\n            </span>\n        </ng-template>\n    </div>\n</div>\n", styles: [".eui-autocomplete{--eui-autocomplete-input-width: var(--eui-base-spacing-3xl);width:100%}.eui-autocomplete__container .eui-autocomplete__field-wrapper{display:flex;position:relative;width:100%}.eui-autocomplete__container .eui-autocomplete__field-wrapper input{min-width:var(--eui-autocomplete-input-width)}.eui-autocomplete__option{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);border-left:var(--eui-border-state-width) solid transparent;display:flex;height:auto!important;min-height:var(--eui-base-spacing-3xl)!important}.eui-autocomplete__option .eui-icon,.eui-autocomplete__option .eui-icon-svg,.eui-autocomplete__option .eui-flag-icon{margin-right:var(--eui-base-spacing-xs)}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-input-text{border:0}.eui-autocomplete .eui-autocomplete__wrapper--inside euichiplistappendcontent{display:inline-flex;flex-grow:1}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-chip-list-container{width:100%}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-chip-list-container .eui-chip-list__list{flex-wrap:inherit!important;width:100%}.eui-autocomplete--has-chips .eui-input-text[readonly]{display:none}.mat-mdc-autocomplete-panel{padding:0!important}.mat-mdc-autocomplete-panel .mat-mdc-optgroup-label{align-items:center;background-color:var(--eui-base-color-grey-10);color:var(--eui-base-color-grey-80);display:flex;font-family:var(--eui-base-font-family);font-size:var(--eui-base-font-size);font-weight:700;margin-bottom:0}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom .mat-mdc-optgroup-label{display:none}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom-optgroup-wrapper{background-color:var(--eui-base-color-grey-10);color:var(--eui-base-color-grey-80);font-size:var(--eui-base-font-size);font-weight:700;height:auto;line-height:var(--eui-base-spacing-3xl);min-height:var(--eui-base-spacing-3xl);padding:0 var(--eui-base-spacing-s)}.mat-mdc-autocomplete-panel .mdc-list-item--selected{background:none!important}.mat-mdc-autocomplete-panel .mdc-list-item--selected:hover{background:rgba(0,0,0,.04)!important}.mat-mdc-autocomplete-panel .mdc-list-item--selected .mdc-list-item__primary-text{color:inherit!important}.eui-autocomplete--primary input{background-color:var(--eui-base-color-primary-10)}.eui-autocomplete--secondary input{background-color:var(--eui-base-color-grey-10)}.eui-autocomplete--info input{background-color:var(--eui-base-color-info-10)}.eui-autocomplete--success input{background-color:var(--eui-base-color-success-10)}.eui-autocomplete--warning input{background-color:var(--eui-base-color-warning-10)}.eui-autocomplete--danger input{background-color:var(--eui-base-color-danger-10)}.eui-autocomplete--accent input{background-color:var(--eui-base-color-accent-10)}.eui-autocomplete__wrapper--bottom .eui-autocomplete__field-wrapper{display:block;margin-bottom:var(--eui-base-spacing-2xs)}.eui-autocomplete__wrapper--inside{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-50);border-radius:var(--eui-base-border-radius);padding:var(--eui-base-spacing-2xs) var(--eui-base-spacing-2xs) 0 var(--eui-base-spacing-2xs)}.eui-autocomplete__wrapper--inside .mat-chip-list .mat-chip-list-wrapper,.eui-autocomplete__wrapper--inside .mat-chip-list .mat-standard-chip{align-items:center;margin-bottom:0}.eui-autocomplete__wrapper--inside .mat-autocomplete-trigger{background:none;border:0}.eui-autocomplete__wrapper--inside .mat-autocomplete-trigger:focus{border:0;box-shadow:var(--eui-base-shadow-0)}.eui-autocomplete__option--primary{border-left-color:var(--eui-base-color-primary-100)}.eui-autocomplete__option--secondary{border-left-color:var(--eui-base-color-grey-25)}.eui-autocomplete__option--info{border-left-color:var(--eui-base-color-info-100)}.eui-autocomplete__option--success{border-left-color:var(--eui-base-color-success-100)}.eui-autocomplete__option--warning{border-left-color:var(--eui-base-color-warning-100)}.eui-autocomplete__option--danger{border-left-color:var(--eui-base-color-danger-100)}.eui-autocomplete__option--accent{border-left-color:var(--eui-base-color-accent-100)}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i5.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i4.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "component", type: i6.EuiChipListComponent, selector: "eui-chip-list, div[euiChipList], ul[euiChipList]", inputs: ["chips", "toggleLinkMoreLabel", "toggleLinkLessLabel", "chipsSortOrder", "dragAndDropSourceName", "dragAndDropConnectedTo", "ariaLabel", "dropListOrientation", "isSquared", "isChipsRemovable", "maxVisibleChipsCount", "chipsLabelTruncateCount", "isMaxVisibleChipsOpened", "isChipsSorted", "isChipsDragAndDrop", "isGrid"], outputs: ["chipsInit", "chipRemove", "chipDragStarted", "chipDragReleased", "chipDropped", "chiplistFocus"] }, { kind: "directive", type: i6.EuiChipListAppendContentDirective, selector: "euiChipListAppendContent" }, { kind: "component", type: i7.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["class", "isInvalid"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: EuiAutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.NgControl, optional: true, self: true }, { token: i2.ScrollDispatcher }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: EuiAutocompleteComponent, selector: "eui-autocomplete, input[euiAutocomplete]", inputs: { toggleLinkMoreLabel: "toggleLinkMoreLabel", toggleLinkLessLabel: "toggleLinkLessLabel", autocompleteData: "autocompleteData", autocompleteDataSelected: "autocompleteDataSelected", chipsSortOrder: "chipsSortOrder", itemsSortOrder: "itemsSortOrder", placeholder: "placeholder", matching: "matching", chipsPosition: "chipsPosition", panelWidth: "panelWidth", classList: "classList", groupBy: "groupBy", dragAndDropSourceName: "dragAndDropSourceName", dragAndDropConnectedTo: "dragAndDropConnectedTo", hasChips: "hasChips", isGrid: "isGrid", async: "async", addOnBlur: "addOnBlur", isFreeValueAllowed: "isFreeValueAllowed", isDuplicateValueAllowed: "isDuplicateValueAllowed", isLoading: "isLoading", isChipsRemovable: "isChipsRemovable", maxVisibleChipsCount: "maxVisibleChipsCount", chipsLabelTruncateCount: "chipsLabelTruncateCount", isMaxVisibleChipsOpened: "isMaxVisibleChipsOpened", readonly: "readonly", isChipsSorted: "isChipsSorted", isItemsSorted: "isItemsSorted", isChipsDragAndDrop: "isChipsDragAndDrop", isForceSelection: "isForceSelection", autoActiveFirstOption: "autoActiveFirstOption" }, outputs: { closed: "closed", opened: "opened", selectionChanged: "selectionChanged", itemAdded: "itemAdded", itemRemoved: "itemRemoved", inputChanged: "inputChanged", chipDragStarted: "chipDragStarted", chipDragReleased: "chipDragReleased", chipDropped: "chipDropped", clear: "clear", close: "close", open: "open", blur: "blur", selectionChange: "selectionChange", itemAdd: "itemAdd", itemRemove: "itemRemove", inputChange: "inputChange", chipDragStart: "chipDragStart", chipDragRelease: "chipDragRelease", chipDrop: "chipDrop" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], viewQueries: [{ propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true, read: ElementRef }, { propertyName: "autocompleteInputTrigger", first: true, predicate: ["autocompleteInputTrigger"], descendants: true, read: MatAutocompleteTrigger }, { propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }, { propertyName: "chipList", first: true, predicate: ["chipList"], descendants: true }, { propertyName: "virtualScrolling", first: true, predicate: ["virtualScrolling"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-autocomplete__container\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\n    <div class=\"eui-autocomplete__wrapper eui-autocomplete__wrapper--{{ chipsPosition }}\">\n        <ng-template [ngIf]=\"chipsPosition === 'bottom'\">\n            <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n        </ng-template>\n\n        <ng-container *ngIf=\"hasChips\">\n            <eui-chip-list\n                #chipList\n                [chips]=\"chips\"\n                [isGrid]=\"isChipsGrid\"\n                [isChipsDragAndDrop]=\"isChipsDragAndDrop\"\n                [isChipsRemovable]=\"isChipsRemovable && !readonly\"\n                [isChipsSorted]=\"isChipsSorted\"\n                [chipsSortOrder]=\"chipsSortOrder\"\n                [maxVisibleChipsCount]=\"maxVisibleChipsCount\"\n                [isMaxVisibleChipsOpened]=\"isMaxVisibleChipsOpened\"\n                [toggleLinkMoreLabel]=\"toggleLinkMoreLabel\"\n                [toggleLinkLessLabel]=\"toggleLinkLessLabel\"\n                [chipsLabelTruncateCount]=\"chipsLabelTruncateCount\"\n                [dragAndDropSourceName]=\"dragAndDropSourceName\"\n                [dragAndDropConnectedTo]=\"dragAndDropConnectedTo\"\n                (chipDropped)=\"onChipDropped($event)\"\n                (chipDragStarted)=\"onChipDragStarted($event)\"\n                (chipDragReleased)=\"onChipDragReleased($event)\"\n                (chipRemove)=\"onChipRemove($event)\"\n                (chiplistFocus)=\"onChipListFocus()\">\n                <euiChipListAppendContent>\n                    <ng-template [ngIf]=\"chipsPosition === 'inside'\">\n                        <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n                    </ng-template>\n                </euiChipListAppendContent>\n            </eui-chip-list>\n        </ng-container>\n\n        <ng-template [ngIf]=\"chipsPosition === 'top' || !hasChips\">\n            <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n        </ng-template>\n\n        <ng-template #field>\n            <span class=\"eui-autocomplete__field-wrapper\">\n                <ng-container *ngIf=\"!hasChips\">\n                    <input\n                        [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n                        [euiLoading]=\"isLoading\"\n                        euiInputText\n                        #autocompleteInput\n                        #autocompleteInputTrigger\n                        placeholder=\"{{ placeholder }}\"\n                        [matAutocompleteDisabled]=\"readonly\"\n                        [formControl]=\"autocompleteControl\"\n                        [matAutocomplete]=\"auto\"\n                        [readonly]=\"readonly\"\n                        [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n                        (clear)=\"onClear()\"\n                        (focusout)=\"onFocusOut()\"\n                        role=\"combobox\"\n                        aria-autocomplete=\"both\"\n                        aria-haspopup=\"true\"\n                        aria-controls=\"autocompleteId\" />\n                </ng-container>\n                <ng-container *ngIf=\"hasChips\">\n                    <input\n                        [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n                        [euiLoading]=\"isLoading\"\n                        euiInputText\n                        #autocompleteInput\n                        #autocompleteInputTrigger\n                        placeholder=\"{{ placeholder }}\"\n                        [matAutocompleteDisabled]=\"readonly\"\n                        [formControl]=\"autocompleteControl\"\n                        [matAutocomplete]=\"auto\"\n                        [matAutocompleteConnectedTo]=\"chipsPosition === 'inside' ? origin : null\"\n                        [readonly]=\"readonly\"\n                        [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n                        (clear)=\"onClear()\"\n                        (focusout)=\"onFocusOut(); addOnBlurHandler($event)\"\n                        (keydown.enter)=\"addOnEnterHandler()\"\n                        (keydown.backspace)=\"onKeyDownBackspace()\"\n                        role=\"combobox\"\n                        aria-autocomplete=\"both\"\n                        aria-haspopup=\"true\"\n                        aria-controls=\"autocompleteId\" />\n                </ng-container>\n\n                <mat-autocomplete\n                    [id]=\"autocompleteId\"\n                    #auto=\"matAutocomplete\"\n                    [panelWidth]=\"panelWidth\"\n                    [class]=\"classList\"\n                    [autoActiveFirstOption]=\"autoActiveFirstOption\"\n                    (closed)=\"onClose()\"\n                    (opened)=\"onOpen()\"\n                    (optionSelected)=\"onOptionSelected($event)\">\n                    <ng-container *ngIf=\"groupBy\">\n                        <cdk-virtual-scroll-viewport\n                            #virtualScrolling\n                            itemSize=\"48\"\n                            minBufferPx=\"500\"\n                            maxBufferPx=\"750\"\n                            [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n                            <ng-container *ngFor=\"let distinctOptionGroup of distinctOptionGroups\">\n                                <mat-optgroup\n                                    [class.eui-autocomplete__optgroup--custom]=\"autocompleteOptGroupTemplate\"\n                                    *ngIf=\"(groupedItems[distinctOptionGroup] | async).length > 0\"\n                                    [label]=\"distinctOptionGroup\">\n                                    <ng-container *ngIf=\"autocompleteOptGroupTemplate\">\n                                        <div class=\"eui-autocomplete__optgroup--custom-optgroup-wrapper\">\n                                            <ng-template\n                                                [ngTemplateOutlet]=\"autocompleteOptGroupTemplate\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: { label: distinctOptionGroup } }\"></ng-template>\n                                        </div>\n                                    </ng-container>\n                                    <mat-option\n                                        *ngFor=\"let groupedItem of groupedItems[distinctOptionGroup] | async; trackBy: trackByFn\"\n                                        [class]=\"\n                                            groupedItem.typeClass\n                                                ? 'mat-option eui-autocomplete__option eui-autocomplete__option--' + groupedItem.typeClass\n                                                : 'mat-option eui-autocomplete__option'\n                                        \"\n                                        [class.eui-autocomplete__option--custom]=\"autocompleteOptionTemplate\"\n                                        [value]=\"groupedItem\">\n                                        <span *ngIf=\"groupedItem.iconClass\" class=\"{{ groupedItem.iconClass }}\"></span>\n                                        <ng-container *ngIf=\"!autocompleteOptionTemplate\">\n                                            {{ groupedItem.label }}\n                                        </ng-container>\n                                        <ng-container *ngIf=\"autocompleteOptionTemplate\">\n                                            <ng-template\n                                                [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: groupedItem }\"></ng-template>\n                                        </ng-container>\n                                    </mat-option>\n                                </mat-optgroup>\n                            </ng-container>\n                        </cdk-virtual-scroll-viewport>\n                    </ng-container>\n                    <ng-container *ngIf=\"!groupBy\">\n                        <cdk-virtual-scroll-viewport\n                            #virtualScrolling\n                            itemSize=\"48\"\n                            minBufferPx=\"500\"\n                            maxBufferPx=\"750\"\n                            [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n                            <mat-option\n                                *cdkVirtualFor=\"let autocompleteOption of autocompleteOptions | async; let i = index; trackBy: trackByFn\"\n                                [class]=\"\n                                    autocompleteOption.typeClass\n                                        ? 'mat-option eui-autocomplete__option eui-autocomplete__option--' + autocompleteOption.typeClass\n                                        : 'mat-option eui-autocomplete__option'\n                                \"\n                                [class.eui-autocomplete__option--custom]=\"autocompleteOptionTemplate\"\n                                [class.mat-mdc-option-active]=\"i === selectedOptionIndex\"\n                                [class.mdc-list-item--selected]=\"false\"\n                                [value]=\"autocompleteOption\">\n                                <span *ngIf=\"autocompleteOption.iconClass\" class=\"{{ autocompleteOption.iconClass }}\"></span>\n                                <ng-container *ngIf=\"!autocompleteOptionTemplate\">{{ autocompleteOption.label }}</ng-container>\n                                <ng-container *ngIf=\"autocompleteOptionTemplate\">\n                                    <ng-template\n                                        [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n                                        [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\"></ng-template>\n                                </ng-container>\n                            </mat-option>\n                        </cdk-virtual-scroll-viewport>\n                    </ng-container>\n                </mat-autocomplete>\n            </span>\n        </ng-template>\n    </div>\n</div>\n", styles: [".eui-autocomplete{--eui-autocomplete-input-width: var(--eui-base-spacing-3xl);width:100%}.eui-autocomplete__container .eui-autocomplete__field-wrapper{display:flex;position:relative;width:100%}.eui-autocomplete__container .eui-autocomplete__field-wrapper input{min-width:var(--eui-autocomplete-input-width)}.eui-autocomplete .virtual-scroll-viewport{height:256px}.eui-autocomplete__option{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);border-left:var(--eui-border-state-width) solid transparent;display:flex;height:auto!important;min-height:var(--eui-base-spacing-3xl)!important}.eui-autocomplete__option .eui-icon,.eui-autocomplete__option .eui-icon-svg,.eui-autocomplete__option .eui-flag-icon{margin-right:var(--eui-base-spacing-xs)}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-input-text{border:0}.eui-autocomplete .eui-autocomplete__wrapper--inside euichiplistappendcontent{display:inline-flex;flex-grow:1}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-chip-list-container{width:100%}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-chip-list-container .eui-chip-list__list{flex-wrap:inherit!important;width:100%}.eui-autocomplete--has-chips .eui-input-text[readonly]{display:none}.mat-mdc-autocomplete-panel{padding:0!important}.mat-mdc-autocomplete-panel .mat-mdc-optgroup-label{align-items:center;background-color:var(--eui-base-color-grey-10);color:var(--eui-base-color-grey-80);display:flex;font-family:var(--eui-base-font-family);font-size:var(--eui-base-font-size);font-weight:700;margin-bottom:0}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom .mat-mdc-optgroup-label{display:none}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom-optgroup-wrapper{background-color:var(--eui-base-color-grey-10);color:var(--eui-base-color-grey-80);font-size:var(--eui-base-font-size);font-weight:700;height:auto;line-height:var(--eui-base-spacing-3xl);min-height:var(--eui-base-spacing-3xl);padding:0 var(--eui-base-spacing-s)}.mat-mdc-autocomplete-panel .mdc-list-item--selected{background:none!important}.mat-mdc-autocomplete-panel .mdc-list-item--selected:hover{background:rgba(0,0,0,.04)!important}.mat-mdc-autocomplete-panel .mdc-list-item--selected .mdc-list-item__primary-text{color:inherit!important}.eui-autocomplete--primary input{background-color:var(--eui-base-color-primary-10)}.eui-autocomplete--secondary input{background-color:var(--eui-base-color-grey-10)}.eui-autocomplete--info input{background-color:var(--eui-base-color-info-10)}.eui-autocomplete--success input{background-color:var(--eui-base-color-success-10)}.eui-autocomplete--warning input{background-color:var(--eui-base-color-warning-10)}.eui-autocomplete--danger input{background-color:var(--eui-base-color-danger-10)}.eui-autocomplete--accent input{background-color:var(--eui-base-color-accent-10)}.eui-autocomplete__wrapper--bottom .eui-autocomplete__field-wrapper{display:block;margin-bottom:var(--eui-base-spacing-2xs)}.eui-autocomplete__wrapper--inside{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-50);border-radius:var(--eui-base-border-radius);padding:var(--eui-base-spacing-2xs) var(--eui-base-spacing-2xs) 0 var(--eui-base-spacing-2xs)}.eui-autocomplete__wrapper--inside .mat-chip-list .mat-chip-list-wrapper,.eui-autocomplete__wrapper--inside .mat-chip-list .mat-standard-chip{align-items:center;margin-bottom:0}.eui-autocomplete__wrapper--inside .mat-autocomplete-trigger{background:none;border:0}.eui-autocomplete__wrapper--inside .mat-autocomplete-trigger:focus{border:0;box-shadow:var(--eui-base-shadow-0)}.eui-autocomplete__option--primary{border-left-color:var(--eui-base-color-primary-100)}.eui-autocomplete__option--secondary{border-left-color:var(--eui-base-color-grey-25)}.eui-autocomplete__option--info{border-left-color:var(--eui-base-color-info-100)}.eui-autocomplete__option--success{border-left-color:var(--eui-base-color-success-100)}.eui-autocomplete__option--warning{border-left-color:var(--eui-base-color-warning-100)}.eui-autocomplete__option--danger{border-left-color:var(--eui-base-color-danger-100)}.eui-autocomplete__option--accent{border-left-color:var(--eui-base-color-accent-100)}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i5.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i4.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "component", type: i6.EuiChipListComponent, selector: "eui-chip-list, div[euiChipList], ul[euiChipList]", inputs: ["chips", "toggleLinkMoreLabel", "toggleLinkLessLabel", "chipsSortOrder", "dragAndDropSourceName", "dragAndDropConnectedTo", "ariaLabel", "dropListOrientation", "isSquared", "isChipsRemovable", "maxVisibleChipsCount", "chipsLabelTruncateCount", "isMaxVisibleChipsOpened", "isChipsSorted", "isChipsDragAndDrop", "isGrid"], outputs: ["chipsInit", "chipRemove", "chipDragStarted", "chipDragReleased", "chipDropped", "chiplistFocus"] }, { kind: "directive", type: i6.EuiChipListAppendContentDirective, selector: "euiChipListAppendContent" }, { kind: "component", type: i7.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["class", "isInvalid"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: EuiAutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eui-autocomplete, input[euiAutocomplete]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-autocomplete__container\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\n    <div class=\"eui-autocomplete__wrapper eui-autocomplete__wrapper--{{ chipsPosition }}\">\n        <ng-template [ngIf]=\"chipsPosition === 'bottom'\">\n            <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n        </ng-template>\n\n        <ng-container *ngIf=\"hasChips\">\n            <eui-chip-list\n                #chipList\n                [chips]=\"chips\"\n                [isGrid]=\"isChipsGrid\"\n                [isChipsDragAndDrop]=\"isChipsDragAndDrop\"\n                [isChipsRemovable]=\"isChipsRemovable && !readonly\"\n                [isChipsSorted]=\"isChipsSorted\"\n                [chipsSortOrder]=\"chipsSortOrder\"\n                [maxVisibleChipsCount]=\"maxVisibleChipsCount\"\n                [isMaxVisibleChipsOpened]=\"isMaxVisibleChipsOpened\"\n                [toggleLinkMoreLabel]=\"toggleLinkMoreLabel\"\n                [toggleLinkLessLabel]=\"toggleLinkLessLabel\"\n                [chipsLabelTruncateCount]=\"chipsLabelTruncateCount\"\n                [dragAndDropSourceName]=\"dragAndDropSourceName\"\n                [dragAndDropConnectedTo]=\"dragAndDropConnectedTo\"\n                (chipDropped)=\"onChipDropped($event)\"\n                (chipDragStarted)=\"onChipDragStarted($event)\"\n                (chipDragReleased)=\"onChipDragReleased($event)\"\n                (chipRemove)=\"onChipRemove($event)\"\n                (chiplistFocus)=\"onChipListFocus()\">\n                <euiChipListAppendContent>\n                    <ng-template [ngIf]=\"chipsPosition === 'inside'\">\n                        <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n                    </ng-template>\n                </euiChipListAppendContent>\n            </eui-chip-list>\n        </ng-container>\n\n        <ng-template [ngIf]=\"chipsPosition === 'top' || !hasChips\">\n            <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n        </ng-template>\n\n        <ng-template #field>\n            <span class=\"eui-autocomplete__field-wrapper\">\n                <ng-container *ngIf=\"!hasChips\">\n                    <input\n                        [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n                        [euiLoading]=\"isLoading\"\n                        euiInputText\n                        #autocompleteInput\n                        #autocompleteInputTrigger\n                        placeholder=\"{{ placeholder }}\"\n                        [matAutocompleteDisabled]=\"readonly\"\n                        [formControl]=\"autocompleteControl\"\n                        [matAutocomplete]=\"auto\"\n                        [readonly]=\"readonly\"\n                        [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n                        (clear)=\"onClear()\"\n                        (focusout)=\"onFocusOut()\"\n                        role=\"combobox\"\n                        aria-autocomplete=\"both\"\n                        aria-haspopup=\"true\"\n                        aria-controls=\"autocompleteId\" />\n                </ng-container>\n                <ng-container *ngIf=\"hasChips\">\n                    <input\n                        [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n                        [euiLoading]=\"isLoading\"\n                        euiInputText\n                        #autocompleteInput\n                        #autocompleteInputTrigger\n                        placeholder=\"{{ placeholder }}\"\n                        [matAutocompleteDisabled]=\"readonly\"\n                        [formControl]=\"autocompleteControl\"\n                        [matAutocomplete]=\"auto\"\n                        [matAutocompleteConnectedTo]=\"chipsPosition === 'inside' ? origin : null\"\n                        [readonly]=\"readonly\"\n                        [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n                        (clear)=\"onClear()\"\n                        (focusout)=\"onFocusOut(); addOnBlurHandler($event)\"\n                        (keydown.enter)=\"addOnEnterHandler()\"\n                        (keydown.backspace)=\"onKeyDownBackspace()\"\n                        role=\"combobox\"\n                        aria-autocomplete=\"both\"\n                        aria-haspopup=\"true\"\n                        aria-controls=\"autocompleteId\" />\n                </ng-container>\n\n                <mat-autocomplete\n                    autoActiveFirstOption\n                    [id]=\"autocompleteId\"\n                    #auto=\"matAutocomplete\"\n                    [panelWidth]=\"panelWidth\"\n                    [class]=\"classList\"\n                    (closed)=\"onClose()\"\n                    (opened)=\"onOpen()\"\n                    (optionSelected)=\"onOptionSelected($event)\">\n                    <ng-container *ngIf=\"groupBy\">\n                        <ng-container *ngFor=\"let distinctOptionGroup of distinctOptionGroups\">\n                            <mat-optgroup\n                                [class.eui-autocomplete__optgroup--custom]=\"autocompleteOptGroupTemplate\"\n                                *ngIf=\"(groupedItems[distinctOptionGroup] | async).length > 0\"\n                                [label]=\"distinctOptionGroup\">\n                                <ng-container *ngIf=\"autocompleteOptGroupTemplate\">\n                                    <div class=\"eui-autocomplete__optgroup--custom-optgroup-wrapper\">\n                                        <ng-template [ngTemplateOutlet]=\"autocompleteOptGroupTemplate\"></ng-template>\n                                        <!-- [ngTemplateOutletContext]=\"{ $implicit: { label: distinctOptionGroup } }\"></ng-template> TODO check v16 issue -->\n                                    </div>\n                                </ng-container>\n                                <mat-option\n                                    *ngFor=\"let groupedItem of groupedItems[distinctOptionGroup] | async; trackBy: trackByFn\"\n                                    [class]=\"\n                                        groupedItem.typeClass\n                                            ? 'mat-option eui-autocomplete__option eui-autocomplete__option--' + groupedItem.typeClass\n                                            : 'mat-option eui-autocomplete__option'\n                                    \"\n                                    [class.eui-autocomplete__option--custom]=\"autocompleteOptionTemplate\"\n                                    [value]=\"groupedItem\">\n                                    <span *ngIf=\"groupedItem.iconClass\" class=\"{{ groupedItem.iconClass }}\"></span>\n                                    <ng-container *ngIf=\"!autocompleteOptionTemplate\">\n                                        {{ groupedItem.label }}\n                                    </ng-container>\n                                    <ng-container *ngIf=\"autocompleteOptionTemplate\">\n                                        <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate\"></ng-template>\n                                        <!-- [ngTemplateOutletContext]=\"{ $implicit: groupedItem }\"></ng-template> TODO check v16 issue -->\n                                    </ng-container>\n                                </mat-option>\n                            </mat-optgroup>\n                        </ng-container>\n                    </ng-container>\n                    <ng-container *ngIf=\"!groupBy\">\n                        <mat-option\n                            *ngFor=\"let autocompleteOption of autocompleteOptions | async; trackBy: trackByFn\"\n                            [class]=\"\n                                autocompleteOption.typeClass\n                                    ? 'mat-option eui-autocomplete__option eui-autocomplete__option--' + autocompleteOption.typeClass\n                                    : 'mat-option eui-autocomplete__option'\n                            \"\n                            [class.eui-autocomplete__option--custom]=\"autocompleteOptionTemplate\"\n                            [value]=\"autocompleteOption\">\n                            <span *ngIf=\"autocompleteOption.iconClass\" class=\"{{ autocompleteOption.iconClass }}\"></span>\n                            <ng-container *ngIf=\"!autocompleteOptionTemplate\">\n                                {{ autocompleteOption.label }}\n                            </ng-container>\n                            <ng-container *ngIf=\"autocompleteOptionTemplate\">\n                                <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate\"></ng-template>\n                                <!-- [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\"></ng-template> TODO v16 check issue -->\n                            </ng-container>\n                        </mat-option>\n                    </ng-container>\n                </mat-autocomplete>\n            </span>\n        </ng-template>\n    </div>\n</div>\n", styles: [".eui-autocomplete{--eui-autocomplete-input-width: var(--eui-base-spacing-3xl);width:100%}.eui-autocomplete__container .eui-autocomplete__field-wrapper{display:flex;position:relative;width:100%}.eui-autocomplete__container .eui-autocomplete__field-wrapper input{min-width:var(--eui-autocomplete-input-width)}.eui-autocomplete__option{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);border-left:var(--eui-border-state-width) solid transparent;display:flex;height:auto!important;min-height:var(--eui-base-spacing-3xl)!important}.eui-autocomplete__option .eui-icon,.eui-autocomplete__option .eui-icon-svg,.eui-autocomplete__option .eui-flag-icon{margin-right:var(--eui-base-spacing-xs)}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-input-text{border:0}.eui-autocomplete .eui-autocomplete__wrapper--inside euichiplistappendcontent{display:inline-flex;flex-grow:1}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-chip-list-container{width:100%}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-chip-list-container .eui-chip-list__list{flex-wrap:inherit!important;width:100%}.eui-autocomplete--has-chips .eui-input-text[readonly]{display:none}.mat-mdc-autocomplete-panel{padding:0!important}.mat-mdc-autocomplete-panel .mat-mdc-optgroup-label{align-items:center;background-color:var(--eui-base-color-grey-10);color:var(--eui-base-color-grey-80);display:flex;font-family:var(--eui-base-font-family);font-size:var(--eui-base-font-size);font-weight:700;margin-bottom:0}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom .mat-mdc-optgroup-label{display:none}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom-optgroup-wrapper{background-color:var(--eui-base-color-grey-10);color:var(--eui-base-color-grey-80);font-size:var(--eui-base-font-size);font-weight:700;height:auto;line-height:var(--eui-base-spacing-3xl);min-height:var(--eui-base-spacing-3xl);padding:0 var(--eui-base-spacing-s)}.mat-mdc-autocomplete-panel .mdc-list-item--selected{background:none!important}.mat-mdc-autocomplete-panel .mdc-list-item--selected:hover{background:rgba(0,0,0,.04)!important}.mat-mdc-autocomplete-panel .mdc-list-item--selected .mdc-list-item__primary-text{color:inherit!important}.eui-autocomplete--primary input{background-color:var(--eui-base-color-primary-10)}.eui-autocomplete--secondary input{background-color:var(--eui-base-color-grey-10)}.eui-autocomplete--info input{background-color:var(--eui-base-color-info-10)}.eui-autocomplete--success input{background-color:var(--eui-base-color-success-10)}.eui-autocomplete--warning input{background-color:var(--eui-base-color-warning-10)}.eui-autocomplete--danger input{background-color:var(--eui-base-color-danger-10)}.eui-autocomplete--accent input{background-color:var(--eui-base-color-accent-10)}.eui-autocomplete__wrapper--bottom .eui-autocomplete__field-wrapper{display:block;margin-bottom:var(--eui-base-spacing-2xs)}.eui-autocomplete__wrapper--inside{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-50);border-radius:var(--eui-base-border-radius);padding:var(--eui-base-spacing-2xs) var(--eui-base-spacing-2xs) 0 var(--eui-base-spacing-2xs)}.eui-autocomplete__wrapper--inside .mat-chip-list .mat-chip-list-wrapper,.eui-autocomplete__wrapper--inside .mat-chip-list .mat-standard-chip{align-items:center;margin-bottom:0}.eui-autocomplete__wrapper--inside .mat-autocomplete-trigger{background:none;border:0}.eui-autocomplete__wrapper--inside .mat-autocomplete-trigger:focus{border:0;box-shadow:var(--eui-base-shadow-0)}.eui-autocomplete__option--primary{border-left-color:var(--eui-base-color-primary-100)}.eui-autocomplete__option--secondary{border-left-color:var(--eui-base-color-grey-25)}.eui-autocomplete__option--info{border-left-color:var(--eui-base-color-info-100)}.eui-autocomplete__option--success{border-left-color:var(--eui-base-color-success-100)}.eui-autocomplete__option--warning{border-left-color:var(--eui-base-color-warning-100)}.eui-autocomplete__option--danger{border-left-color:var(--eui-base-color-danger-100)}.eui-autocomplete__option--accent{border-left-color:var(--eui-base-color-accent-100)}\n"] }]
+            args: [{ selector: 'eui-autocomplete, input[euiAutocomplete]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-autocomplete__container\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\n    <div class=\"eui-autocomplete__wrapper eui-autocomplete__wrapper--{{ chipsPosition }}\">\n        <ng-template [ngIf]=\"chipsPosition === 'bottom'\">\n            <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n        </ng-template>\n\n        <ng-container *ngIf=\"hasChips\">\n            <eui-chip-list\n                #chipList\n                [chips]=\"chips\"\n                [isGrid]=\"isChipsGrid\"\n                [isChipsDragAndDrop]=\"isChipsDragAndDrop\"\n                [isChipsRemovable]=\"isChipsRemovable && !readonly\"\n                [isChipsSorted]=\"isChipsSorted\"\n                [chipsSortOrder]=\"chipsSortOrder\"\n                [maxVisibleChipsCount]=\"maxVisibleChipsCount\"\n                [isMaxVisibleChipsOpened]=\"isMaxVisibleChipsOpened\"\n                [toggleLinkMoreLabel]=\"toggleLinkMoreLabel\"\n                [toggleLinkLessLabel]=\"toggleLinkLessLabel\"\n                [chipsLabelTruncateCount]=\"chipsLabelTruncateCount\"\n                [dragAndDropSourceName]=\"dragAndDropSourceName\"\n                [dragAndDropConnectedTo]=\"dragAndDropConnectedTo\"\n                (chipDropped)=\"onChipDropped($event)\"\n                (chipDragStarted)=\"onChipDragStarted($event)\"\n                (chipDragReleased)=\"onChipDragReleased($event)\"\n                (chipRemove)=\"onChipRemove($event)\"\n                (chiplistFocus)=\"onChipListFocus()\">\n                <euiChipListAppendContent>\n                    <ng-template [ngIf]=\"chipsPosition === 'inside'\">\n                        <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n                    </ng-template>\n                </euiChipListAppendContent>\n            </eui-chip-list>\n        </ng-container>\n\n        <ng-template [ngIf]=\"chipsPosition === 'top' || !hasChips\">\n            <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n        </ng-template>\n\n        <ng-template #field>\n            <span class=\"eui-autocomplete__field-wrapper\">\n                <ng-container *ngIf=\"!hasChips\">\n                    <input\n                        [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n                        [euiLoading]=\"isLoading\"\n                        euiInputText\n                        #autocompleteInput\n                        #autocompleteInputTrigger\n                        placeholder=\"{{ placeholder }}\"\n                        [matAutocompleteDisabled]=\"readonly\"\n                        [formControl]=\"autocompleteControl\"\n                        [matAutocomplete]=\"auto\"\n                        [readonly]=\"readonly\"\n                        [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n                        (clear)=\"onClear()\"\n                        (focusout)=\"onFocusOut()\"\n                        role=\"combobox\"\n                        aria-autocomplete=\"both\"\n                        aria-haspopup=\"true\"\n                        aria-controls=\"autocompleteId\" />\n                </ng-container>\n                <ng-container *ngIf=\"hasChips\">\n                    <input\n                        [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n                        [euiLoading]=\"isLoading\"\n                        euiInputText\n                        #autocompleteInput\n                        #autocompleteInputTrigger\n                        placeholder=\"{{ placeholder }}\"\n                        [matAutocompleteDisabled]=\"readonly\"\n                        [formControl]=\"autocompleteControl\"\n                        [matAutocomplete]=\"auto\"\n                        [matAutocompleteConnectedTo]=\"chipsPosition === 'inside' ? origin : null\"\n                        [readonly]=\"readonly\"\n                        [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n                        (clear)=\"onClear()\"\n                        (focusout)=\"onFocusOut(); addOnBlurHandler($event)\"\n                        (keydown.enter)=\"addOnEnterHandler()\"\n                        (keydown.backspace)=\"onKeyDownBackspace()\"\n                        role=\"combobox\"\n                        aria-autocomplete=\"both\"\n                        aria-haspopup=\"true\"\n                        aria-controls=\"autocompleteId\" />\n                </ng-container>\n\n                <mat-autocomplete\n                    [id]=\"autocompleteId\"\n                    #auto=\"matAutocomplete\"\n                    [panelWidth]=\"panelWidth\"\n                    [class]=\"classList\"\n                    [autoActiveFirstOption]=\"autoActiveFirstOption\"\n                    (closed)=\"onClose()\"\n                    (opened)=\"onOpen()\"\n                    (optionSelected)=\"onOptionSelected($event)\">\n                    <ng-container *ngIf=\"groupBy\">\n                        <cdk-virtual-scroll-viewport\n                            #virtualScrolling\n                            itemSize=\"48\"\n                            minBufferPx=\"500\"\n                            maxBufferPx=\"750\"\n                            [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n                            <ng-container *ngFor=\"let distinctOptionGroup of distinctOptionGroups\">\n                                <mat-optgroup\n                                    [class.eui-autocomplete__optgroup--custom]=\"autocompleteOptGroupTemplate\"\n                                    *ngIf=\"(groupedItems[distinctOptionGroup] | async).length > 0\"\n                                    [label]=\"distinctOptionGroup\">\n                                    <ng-container *ngIf=\"autocompleteOptGroupTemplate\">\n                                        <div class=\"eui-autocomplete__optgroup--custom-optgroup-wrapper\">\n                                            <ng-template\n                                                [ngTemplateOutlet]=\"autocompleteOptGroupTemplate\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: { label: distinctOptionGroup } }\"></ng-template>\n                                        </div>\n                                    </ng-container>\n                                    <mat-option\n                                        *ngFor=\"let groupedItem of groupedItems[distinctOptionGroup] | async; trackBy: trackByFn\"\n                                        [class]=\"\n                                            groupedItem.typeClass\n                                                ? 'mat-option eui-autocomplete__option eui-autocomplete__option--' + groupedItem.typeClass\n                                                : 'mat-option eui-autocomplete__option'\n                                        \"\n                                        [class.eui-autocomplete__option--custom]=\"autocompleteOptionTemplate\"\n                                        [value]=\"groupedItem\">\n                                        <span *ngIf=\"groupedItem.iconClass\" class=\"{{ groupedItem.iconClass }}\"></span>\n                                        <ng-container *ngIf=\"!autocompleteOptionTemplate\">\n                                            {{ groupedItem.label }}\n                                        </ng-container>\n                                        <ng-container *ngIf=\"autocompleteOptionTemplate\">\n                                            <ng-template\n                                                [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: groupedItem }\"></ng-template>\n                                        </ng-container>\n                                    </mat-option>\n                                </mat-optgroup>\n                            </ng-container>\n                        </cdk-virtual-scroll-viewport>\n                    </ng-container>\n                    <ng-container *ngIf=\"!groupBy\">\n                        <cdk-virtual-scroll-viewport\n                            #virtualScrolling\n                            itemSize=\"48\"\n                            minBufferPx=\"500\"\n                            maxBufferPx=\"750\"\n                            [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n                            <mat-option\n                                *cdkVirtualFor=\"let autocompleteOption of autocompleteOptions | async; let i = index; trackBy: trackByFn\"\n                                [class]=\"\n                                    autocompleteOption.typeClass\n                                        ? 'mat-option eui-autocomplete__option eui-autocomplete__option--' + autocompleteOption.typeClass\n                                        : 'mat-option eui-autocomplete__option'\n                                \"\n                                [class.eui-autocomplete__option--custom]=\"autocompleteOptionTemplate\"\n                                [class.mat-mdc-option-active]=\"i === selectedOptionIndex\"\n                                [class.mdc-list-item--selected]=\"false\"\n                                [value]=\"autocompleteOption\">\n                                <span *ngIf=\"autocompleteOption.iconClass\" class=\"{{ autocompleteOption.iconClass }}\"></span>\n                                <ng-container *ngIf=\"!autocompleteOptionTemplate\">{{ autocompleteOption.label }}</ng-container>\n                                <ng-container *ngIf=\"autocompleteOptionTemplate\">\n                                    <ng-template\n                                        [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n                                        [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\"></ng-template>\n                                </ng-container>\n                            </mat-option>\n                        </cdk-virtual-scroll-viewport>\n                    </ng-container>\n                </mat-autocomplete>\n            </span>\n        </ng-template>\n    </div>\n</div>\n", styles: [".eui-autocomplete{--eui-autocomplete-input-width: var(--eui-base-spacing-3xl);width:100%}.eui-autocomplete__container .eui-autocomplete__field-wrapper{display:flex;position:relative;width:100%}.eui-autocomplete__container .eui-autocomplete__field-wrapper input{min-width:var(--eui-autocomplete-input-width)}.eui-autocomplete .virtual-scroll-viewport{height:256px}.eui-autocomplete__option{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);border-left:var(--eui-border-state-width) solid transparent;display:flex;height:auto!important;min-height:var(--eui-base-spacing-3xl)!important}.eui-autocomplete__option .eui-icon,.eui-autocomplete__option .eui-icon-svg,.eui-autocomplete__option .eui-flag-icon{margin-right:var(--eui-base-spacing-xs)}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-input-text{border:0}.eui-autocomplete .eui-autocomplete__wrapper--inside euichiplistappendcontent{display:inline-flex;flex-grow:1}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-chip-list-container{width:100%}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-chip-list-container .eui-chip-list__list{flex-wrap:inherit!important;width:100%}.eui-autocomplete--has-chips .eui-input-text[readonly]{display:none}.mat-mdc-autocomplete-panel{padding:0!important}.mat-mdc-autocomplete-panel .mat-mdc-optgroup-label{align-items:center;background-color:var(--eui-base-color-grey-10);color:var(--eui-base-color-grey-80);display:flex;font-family:var(--eui-base-font-family);font-size:var(--eui-base-font-size);font-weight:700;margin-bottom:0}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom .mat-mdc-optgroup-label{display:none}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom-optgroup-wrapper{background-color:var(--eui-base-color-grey-10);color:var(--eui-base-color-grey-80);font-size:var(--eui-base-font-size);font-weight:700;height:auto;line-height:var(--eui-base-spacing-3xl);min-height:var(--eui-base-spacing-3xl);padding:0 var(--eui-base-spacing-s)}.mat-mdc-autocomplete-panel .mdc-list-item--selected{background:none!important}.mat-mdc-autocomplete-panel .mdc-list-item--selected:hover{background:rgba(0,0,0,.04)!important}.mat-mdc-autocomplete-panel .mdc-list-item--selected .mdc-list-item__primary-text{color:inherit!important}.eui-autocomplete--primary input{background-color:var(--eui-base-color-primary-10)}.eui-autocomplete--secondary input{background-color:var(--eui-base-color-grey-10)}.eui-autocomplete--info input{background-color:var(--eui-base-color-info-10)}.eui-autocomplete--success input{background-color:var(--eui-base-color-success-10)}.eui-autocomplete--warning input{background-color:var(--eui-base-color-warning-10)}.eui-autocomplete--danger input{background-color:var(--eui-base-color-danger-10)}.eui-autocomplete--accent input{background-color:var(--eui-base-color-accent-10)}.eui-autocomplete__wrapper--bottom .eui-autocomplete__field-wrapper{display:block;margin-bottom:var(--eui-base-spacing-2xs)}.eui-autocomplete__wrapper--inside{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-50);border-radius:var(--eui-base-border-radius);padding:var(--eui-base-spacing-2xs) var(--eui-base-spacing-2xs) 0 var(--eui-base-spacing-2xs)}.eui-autocomplete__wrapper--inside .mat-chip-list .mat-chip-list-wrapper,.eui-autocomplete__wrapper--inside .mat-chip-list .mat-standard-chip{align-items:center;margin-bottom:0}.eui-autocomplete__wrapper--inside .mat-autocomplete-trigger{background:none;border:0}.eui-autocomplete__wrapper--inside .mat-autocomplete-trigger:focus{border:0;box-shadow:var(--eui-base-shadow-0)}.eui-autocomplete__option--primary{border-left-color:var(--eui-base-color-primary-100)}.eui-autocomplete__option--secondary{border-left-color:var(--eui-base-color-grey-25)}.eui-autocomplete__option--info{border-left-color:var(--eui-base-color-info-100)}.eui-autocomplete__option--success{border-left-color:var(--eui-base-color-success-100)}.eui-autocomplete__option--warning{border-left-color:var(--eui-base-color-warning-100)}.eui-autocomplete__option--danger{border-left-color:var(--eui-base-color-danger-100)}.eui-autocomplete__option--accent{border-left-color:var(--eui-base-color-accent-100)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
-                }] }, { type: i2.ScrollDispatcher }]; }, propDecorators: { toggleLinkMoreLabel: [{
+                }] }, { type: i2.ScrollDispatcher }, { type: i0.ElementRef }]; }, propDecorators: { toggleLinkMoreLabel: [{
                 type: Input
             }], toggleLinkLessLabel: [{
                 type: Input
@@ -628,6 +677,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
             }], chipList: [{
                 type: ViewChild,
                 args: ['chipList']
+            }], virtualScrolling: [{
+                type: ViewChild,
+                args: ['virtualScrolling']
             }], hasChips: [{
                 type: Input
             }], isGrid: [{
@@ -660,6 +712,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Input
             }], isForceSelection: [{
                 type: Input
+            }], autoActiveFirstOption: [{
+                type: Input
             }] } });
 
 class EuiAutocompleteModule {
@@ -670,14 +724,16 @@ class EuiAutocompleteModule {
             EuiChipListModule,
             EuiChipModule,
             EuiIconModule,
-            EuiInputTextModule], exports: [EuiAutocompleteComponent] }); }
+            EuiInputTextModule,
+            ScrollingModule], exports: [EuiAutocompleteComponent] }); }
     /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: EuiAutocompleteModule, imports: [CommonModule,
             ReactiveFormsModule,
             MatAutocompleteModule,
             EuiChipListModule,
             EuiChipModule,
             EuiIconModule,
-            EuiInputTextModule] }); }
+            EuiInputTextModule,
+            ScrollingModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: EuiAutocompleteModule, decorators: [{
             type: NgModule,
@@ -690,6 +746,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                         EuiChipModule,
                         EuiIconModule,
                         EuiInputTextModule,
+                        ScrollingModule,
                     ],
                     declarations: [EuiAutocompleteComponent],
                     exports: [EuiAutocompleteComponent],