@eui/components 17.0.0-next.24 → 17.0.0-next.25

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

@@ -1,30 +1,30 @@
+import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { EventEmitter, ElementRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Self, Optional, Input, Output, HostBinding, ContentChildren, ViewChild, NgModule } from '@angular/core';
-import * as i1 from '@angular/forms';
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, Input, EventEmitter, ElementRef, Self, Optional, ContentChildren, ViewChild, Output, NgModule } from '@angular/core';
+import * as i4 from '@angular/forms';
 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, filter, fromEvent, of } from 'rxjs';
-import * as i4 from '@angular/material/autocomplete';
-import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
-import { uniqueId } from '@eui/core';
-import { EuiChip, EuiChipTooltip, EuiChipModule } from '@eui/components/eui-chip';
+import { BehaviorSubject, Subject, Subscription, takeUntil, fromEvent, filter } from 'rxjs';
+import { TemplatePortal } from '@angular/cdk/portal';
+import * as i1$1 from '@angular/cdk/overlay';
+import { ConnectionPositionPair, OverlayModule } from '@angular/cdk/overlay';
+import * as uuid from 'uuid';
+import { EuiChipTooltip, EuiChip, 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 { coerceBoolean, coerceNumber } from '@eui/base';
+import * as i1 from '@eui/components/shared';
+import { BaseStatesDirective } from '@eui/components/shared';
+import { style, state, animate, group, transition, trigger } from '@angular/animations';
+import * as i2 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import * as i3 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
-import * as i3 from '@angular/common';
+import * as i6 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i5 from '@angular/material/core';
-import * as i6 from '@eui/components/eui-chip-list';
-import { EuiChipListModule } from '@eui/components/eui-chip-list';
 import * as i7 from '@eui/components/eui-input-text';
 import { EuiInputTextModule } from '@eui/components/eui-input-text';
-import { EuiIconModule } from '@eui/components/eui-icon';
+import * as i8 from '@eui/components/eui-chip-list';
+import { EuiChipListModule } from '@eui/components/eui-chip-list';
 
-// TODO: on v17 replace any with no object as a type and declare it as breaking change
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 class EuiAutoCompleteItem {
     constructor(values = {}) {
         this.isDisabled = false;
@@ -32,142 +32,179 @@ class EuiAutoCompleteItem {
     }
 }
 
-class EuiAutocompleteComponent extends BaseDirective {
+/**
+ * @description
+ * Validator checking if the user choose the value in the panel.
+ *
+ * @usageNotes
+ * ```typescript
+ * autocompleteData: EuiAutoCompleteItem[] = [
+ *    new EuiAutoCompleteItem({ id: 1, label: 'Ananas' }),
+ *    new EuiAutoCompleteItem({ id: 2, label: 'Apple' }),
+ *    new EuiAutoCompleteItem({ id: 3, label: 'Banana' }),
+ * ]
+ * const autocomplete = new FormControl({ label: 'abcdef' }, euiAutocompleteForceSelectionFromData);
+ * console.log(autocomplete.errors); // { isInData: { isInData: false, invalidValues: { label: 'abcdef' } } }
+ * ```
+ *
+ * @returns A validator function that returns an error with the `isInData` to false and a list of invalid values if the validation
+ * check fails, otherwise `null`.
+ */
+const euiAutocompleteForceSelectionFromData = (control) => {
+    if (control.value) {
+        const isInData = Array.isArray(control.value) ? control.value.every(obj => 'id' in obj) : control.value.id !== undefined;
+        const invalidValues = Array.isArray(control.value) ? control.value.filter(v => v.id === undefined) : control.value;
+        return !isInData ? { isInData: { isInData, invalidValues } } : null;
+    }
+    return null;
+};
+
+const panelAnimation = trigger('panelAnimation', [
+    state('void, hidden', style({
+        opacity: 0,
+        transform: 'scaleY(0.8)',
+    })),
+    transition(':enter, hidden => visible', [
+        group([
+            animate('0.03s linear', style({ opacity: 1 })),
+            animate('0.12s cubic-bezier(0, 0, 0.2, 1)', style({ transform: 'scaleY(1)' })),
+        ]),
+    ]),
+    transition(':leave, visible => hidden', [animate('0.075s linear', style({ opacity: 0 }))]),
+]);
+
+class EuiAutocompleteOptionComponent {
     get cssClasses() {
-        return [this.hasChips ? 'eui-autocomplete--has-chips' : '', super.getCssClasses('eui-autocomplete')].join(' ').trim();
-    }
-    get hasChips() {
-        return this._hasChips;
-    }
-    set hasChips(value) {
-        this._hasChips = coerceBooleanProperty(value);
-    }
-    get isGrid() {
-        return this._isGrid;
-    }
-    set isGrid(value) {
-        this._isGrid = coerceBooleanProperty(value);
-    }
-    get async() {
-        return this._async;
-    }
-    set async(value) {
-        this._async = coerceBooleanProperty(value);
-    }
-    get addOnBlur() {
-        return this._addOnBlur;
-    }
-    set addOnBlur(value) {
-        this._addOnBlur = coerceBooleanProperty(value);
-    }
-    get isFreeValueAllowed() {
-        return this._isFreeValueAllowed;
-    }
-    set isFreeValueAllowed(value) {
-        this._isFreeValueAllowed = coerceBooleanProperty(value);
-    }
-    get isDuplicateValueAllowed() {
-        return this._isDuplicateValueAllowed;
-    }
-    set isDuplicateValueAllowed(value) {
-        this._isDuplicateValueAllowed = coerceBooleanProperty(value);
-    }
-    get isLoading() {
-        return this._isLoading;
-    }
-    set isLoading(value) {
-        this._isLoading = coerceBooleanProperty(value);
-    }
-    get isChipsRemovable() {
-        return this._isChipsRemovable;
-    }
-    set isChipsRemovable(value) {
-        this._isChipsRemovable = coerceBooleanProperty(value);
-    }
-    get maxVisibleChipsCount() {
-        return this._maxVisibleChipsCount;
-    }
-    set maxVisibleChipsCount(value) {
-        this._maxVisibleChipsCount = coerceNumberProperty(value);
-    }
-    get chipsLabelTruncateCount() {
-        return this._chipsLabelTruncateCount;
-    }
-    set chipsLabelTruncateCount(value) {
-        this._chipsLabelTruncateCount = coerceNumberProperty(value);
-    }
-    get isMaxVisibleChipsOpened() {
-        return this._isMaxVisibleChipsOpened;
-    }
-    set isMaxVisibleChipsOpened(value) {
-        this._isMaxVisibleChipsOpened = coerceBooleanProperty(value);
-    }
-    get readonly() {
-        return this._readonly;
-    }
-    set readonly(value) {
-        this._readonly = coerceBooleanProperty(value);
-    }
-    get isChipsSorted() {
-        return this._isChipsSorted;
-    }
-    set isChipsSorted(value) {
-        this._isChipsSorted = coerceBooleanProperty(value);
-    }
-    get isItemsSorted() {
-        return this._isItemsSorted;
-    }
-    set isItemsSorted(value) {
-        this._isItemsSorted = coerceBooleanProperty(value);
-    }
-    get isChipsDragAndDrop() {
-        return this._isChipsDragAndDrop;
-    }
-    set isChipsDragAndDrop(value) {
-        this._isChipsDragAndDrop = coerceBooleanProperty(value);
-    }
-    get isForceSelection() {
-        return this._isForceSelection;
-    }
-    set isForceSelection(value) {
-        this._isForceSelection = coerceBooleanProperty(value);
+        return [
+            this.baseStatesDirective.getCssClasses('eui-autocomplete-option'),
+            this.isActive ? 'eui-autocomplete-option--active' : '',
+            this.isDisabled ? 'eui-autocomplete-option--disabled' : '',
+            this.isGroupItem ? 'eui-autocomplete-option--group-item' : '',
+        ]
+            .join(' ')
+            .trim();
+    }
+    constructor(baseStatesDirective) {
+        this.baseStatesDirective = baseStatesDirective;
+        this.role = 'option';
+        this.isActive = false;
+        this.isDisabled = false;
+        this.isGroupItem = false;
     }
-    get autoActiveFirstOption() {
-        return this._autoActiveFirstOption;
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAutocompleteOptionComponent, deps: [{ token: i1.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiAutocompleteOptionComponent, selector: "eui-autocomplete-option", inputs: { isActive: "isActive", isDisabled: "isDisabled", isGroupItem: "isGroupItem" }, host: { properties: { "attr.role": "this.role", "class": "this.cssClasses" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiVariant", "euiVariant"] }], ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+__decorate([
+    coerceBoolean
+], EuiAutocompleteOptionComponent.prototype, "isActive", void 0);
+__decorate([
+    coerceBoolean
+], EuiAutocompleteOptionComponent.prototype, "isDisabled", void 0);
+__decorate([
+    coerceBoolean
+], EuiAutocompleteOptionComponent.prototype, "isGroupItem", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAutocompleteOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-autocomplete-option', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [
+                        {
+                            directive: BaseStatesDirective,
+                            inputs: [
+                                'euiVariant',
+                            ],
+                        },
+                    ], template: "<ng-content></ng-content>\n" }]
+        }], ctorParameters: () => [{ type: i1.BaseStatesDirective }], propDecorators: { role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], isActive: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], isGroupItem: [{
+                type: Input
+            }] } });
+
+class EuiAutocompleteOptionGroupComponent {
+    constructor() {
+        this.role = 'optgroup';
     }
-    set autoActiveFirstOption(value) {
-        this._autoActiveFirstOption = coerceBooleanProperty(value);
+    get cssClasses() {
+        return ['eui-autocomplete-option-group'].join(' ').trim();
     }
-    get isChipsGrid() {
-        if (this._isGrid) {
-            return this._isChipsDragAndDrop && this.dragAndDropConnectedTo.length === 0;
-        }
-        else {
-            return this._isGrid;
-        }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAutocompleteOptionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiAutocompleteOptionGroupComponent, selector: "eui-autocomplete-option-group", inputs: { label: "label" }, host: { properties: { "attr.role": "this.role", "class": "this.cssClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAutocompleteOptionGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-autocomplete-option-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], label: [{
+                type: Input
+            }] } });
+
+class EuiAutocompleteComponent {
+    get cssClasses() {
+        return [
+            'eui-autocomplete',
+            'eui-autocomplete--chips-position-' + this.chipsPosition,
+        ].join(' ').trim();
     }
-    constructor(cd, control, scrollDispatcher, elementRef) {
-        super();
+    constructor(overlay, cd, viewContainerRef, elementRef, liveAnnouncer, scrollDispatcher, control) {
+        this.overlay = overlay;
         this.cd = cd;
-        this.control = control;
-        this.scrollDispatcher = scrollDispatcher;
+        this.viewContainerRef = viewContainerRef;
         this.elementRef = elementRef;
-        this.toggleLinkMoreLabel = null;
-        this.toggleLinkLessLabel = null;
+        this.liveAnnouncer = liveAnnouncer;
+        this.scrollDispatcher = scrollDispatcher;
+        this.control = control;
         this.autocompleteData = [];
+        this.visibleOptions = 5;
+        this.matching = 'contains';
+        this.placeholder = '';
         this.autocompleteDataSelected = [];
         this.chipsSortOrder = 'ASC';
         this.itemsSortOrder = 'ASC';
-        this.placeholder = '';
-        this.matching = 'contains';
         this.chipsPosition = 'top';
-        this.visibleOptions = 5;
+        this.toggleLinkMoreLabel = null;
+        this.toggleLinkLessLabel = null;
+        this.classList = null;
         this.dragAndDropConnectedTo = [];
-        // euiInputText does not send event when the the field is cleared
-        this.clear = new EventEmitter();
+        this.isFreeValueAllowed = true;
+        this.isReadonly = false;
+        this.isLoading = false;
+        this.hasChips = false;
+        this.isAsync = false;
+        this.isChipsSorted = false;
+        this.isItemsSorted = false;
+        this.isChipsRemovable = true;
+        this.isDuplicateValueAllowed = false;
+        this.isAddOnBlur = false;
+        this.isForceSelection = false;
+        this.maxVisibleChipsCount = null;
+        this.chipsLabelTruncateCount = null;
+        this.isMaxVisibleChipsOpened = false;
+        this.isChipsDragAndDrop = false;
+        this.autocompleteOptions = new BehaviorSubject(this.autocompleteData);
+        this.selectedOptionIndex = 0;
+        this.autocompleteControl = new FormControl('');
+        this.isDisabled = false;
+        this.chips = [];
+        this.groupedOptions = new BehaviorSubject({});
+        this.globalOptionIndex = 0;
+        this.itemSize = 48;
         this.panelClose = new EventEmitter();
         this.panelOpen = new EventEmitter();
+        this.inputFocus = new EventEmitter();
         this.inputBlur = new EventEmitter();
+        this.clear = new EventEmitter();
         this.selectionChange = new EventEmitter();
         this.itemAdd = new EventEmitter();
         this.itemRemove = new EventEmitter();
@@ -175,38 +212,25 @@ class EuiAutocompleteComponent extends BaseDirective {
         this.chipDragStart = new EventEmitter();
         this.chipDragRelease = new EventEmitter();
         this.chipDrop = new EventEmitter();
-        this.separatorKeysCodes = [ENTER, COMMA];
-        this.autocompleteControl = new FormControl();
-        this.autocompleteOptions = new BehaviorSubject(this.autocompleteData);
-        this.chips = [];
-        this.autocompleteId = `eui-autocomplete-${uniqueId()}`;
-        this.isDisabled = false;
-        this.selectedOptionIndex = -1;
-        this.itemSize = 48;
-        this._hasChips = false;
-        this._isGrid = true;
-        this._async = false;
-        this._addOnBlur = false;
-        this._isFreeValueAllowed = true;
-        this._isDuplicateValueAllowed = false;
-        this._isLoading = false;
-        this._isChipsRemovable = true;
-        this._maxVisibleChipsCount = null;
-        this._chipsLabelTruncateCount = null;
-        this._isMaxVisibleChipsOpened = false;
-        this._readonly = false;
-        this._isChipsSorted = false;
-        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.isOpen$ = new BehaviorSubject(false);
         this.keyboardOptionSelectorHandlerSubscription = new Subscription();
+        this.addOnBlurClickHandlerSubscription = new Subscription();
+        this.isForceSelectionSubscription = new Subscription();
+        this.keyboardSubscription = new Subscription();
+        this.autocompleteOptionsSubscription = new Subscription();
+        this.scrollDispatcherSubscription = new Subscription();
+        this.windowResizeSubscription = new Subscription();
+        this.value = null;
+        this.TOP = new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' }, 0, 0, [
+            'eui-autocomplete-position',
+            'eui-autocomplete-position--top',
+        ]);
+        this.BOTTOM = new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' }, 0, 0, [
+            'eui-autocomplete-position',
+            'eui-autocomplete-position--bottom',
+        ]);
+        this.preferredPositons = [this.BOTTOM, this.TOP];
         this.onChange = (change) => {
             /** empty */
         };
@@ -219,40 +243,57 @@ class EuiAutocompleteComponent extends BaseDirective {
     }
     ngOnChanges(c) {
         if (c && c.autocompleteData) {
-            this.autocompleteOptions.next(this._filter(''));
-            if (this.groupBy) {
-                this.groupingHandler();
-            }
+            this.setOptions('', this.isItemsSorted);
         }
         if (c && c.autocompleteDataSelected && this.hasChips) {
-            this.autocompleteDataSelected = this.autocompleteDataSelected.map((selected) => new EuiAutoCompleteItem(Object.assign({}, selected, { euiInternalId: this.generateId() })));
-            this.chips = this.mapAsChip();
-            this.autocompleteOptions.next(this._filter(''));
-        }
-        if (c && c.visibleOptions) {
-            this.classList = 'eui-autocomplete--no-max-height';
+            this.autocompleteDataSelected = c.autocompleteDataSelected.currentValue.map((s) => (new EuiAutoCompleteItem({ ...s, euiInternalId: uuid.v4() })));
+            this.chips = this.mapToChip(this.autocompleteDataSelected);
+            this.setOptions('', this.isItemsSorted);
         }
     }
     ngOnInit() {
-        const start = Array.isArray(this.value) ? null : this.value?.label;
-        this.autocompleteOptions.next(this._filter(start));
-        this.autocompleteControl.valueChanges.pipe(takeUntil(this.destroy$), startWith(start), skip(1)).subscribe((value) => {
-            this.fieldValue = value;
-            this.inputValueHandler(value);
-        });
-        if (this.groupBy) {
-            this.groupingHandler();
-        }
-    }
-    // TODO: Refactor ngDoCheck when euiInput Text will refactor this hooks
-    ngDoCheck() {
         if (this.control) {
-            this.control.touched ? this.autocompleteControl.markAsTouched() : this.autocompleteControl.markAsUntouched();
-            this.control.invalid ? this.autocompleteControl.setErrors({ invalid: true }) : this.autocompleteControl.setErrors(null);
-            this.cd.detectChanges();
+            this.control.statusChanges.pipe(takeUntil(this.destroy$)).subscribe((status) => {
+                this.autocompleteControl.setErrors(this.control.errors);
+            });
+        }
+        this.autocompleteControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
+            this.selectedOptionIndex = 0;
+            if (!this.isOpen) {
+                this.openPanel();
+            }
+            this.setOptions(value, this.isItemsSorted);
+            if (this.hasChips) {
+                if (!value) {
+                    this.onChange(this.autocompleteDataSelected.length > 0 ? this.autocompleteDataSelected : null);
+                }
+            }
+            else {
+                if (typeof value === 'string') {
+                    const foundItem = this.autocompleteData.find((d) => d.label.toLowerCase().trim() === value.toLowerCase().trim());
+                    if (foundItem) {
+                        this.onChange(foundItem);
+                    }
+                    else {
+                        value ? this.onChange(new EuiAutoCompleteItem({ label: value })) : this.onChange(null);
+                    }
+                }
+                else {
+                    this.onChange(value === undefined ? null : value);
+                    if (!value) {
+                        this.setOptions('', this.isItemsSorted);
+                    }
+                }
+            }
+            this.itemSize = this.getItemSize();
+            this.inputChange.emit(value);
+        });
+        if (!this.isAsync) {
+            this.setOptions(Array.isArray(this.value) ? '' : this.value?.label, this.isItemsSorted);
         }
     }
     ngAfterViewInit() {
+        this.templatePortal = new TemplatePortal(this.templatePortalContent, this.viewContainerRef);
         this.templates.forEach((item) => {
             if (item.getType() === 'dropdownOption') {
                 this.autocompleteOptionTemplate = item.template;
@@ -261,206 +302,297 @@ class EuiAutocompleteComponent extends BaseDirective {
                 this.autocompleteOptGroupTemplate = item.template;
             }
         });
-        if (this.hasChips) {
-            this.chips = this.mapAsChip();
-            this.cd.detectChanges();
-        }
     }
     ngOnDestroy() {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
-    }
-    get nbOptionsVisible() {
-        return this.visibleOptions;
+        this.keyboardOptionSelectorHandlerSubscription.unsubscribe();
+        this.addOnBlurClickHandlerSubscription.unsubscribe();
+        this.isForceSelectionSubscription.unsubscribe();
+        this.keyboardSubscription.unsubscribe();
+        this.autocompleteOptionsSubscription.unsubscribe();
+        this.windowResizeSubscription.unsubscribe();
     }
     get cdkVirtualScrollViewport() {
-        if (this.visibleOptions !== 5) {
-            return this.visibleOptions * this.itemSize;
-        }
-        else {
-            if (this.groupBy) {
-                const filteredOptionGroups = this.autocompleteOptions.value
-                    .map((item) => this.groupBy.split('.').reduce((prev, curr) => (prev ? prev[curr] : null), item || self))
-                    .filter((optionGroup, index, array) => {
-                    return (this.autocompleteOptions.value.some((option) => option.metadata !== undefined && optionGroup.includes(option.metadata.continent)) &&
-                        array.indexOf(optionGroup) === index);
-                });
-                return this.autocompleteOptions.value.length >= this.nbOptionsVisible ?
-                    5 * this.itemSize :
-                    (this.autocompleteOptions.value.length + filteredOptionGroups.length) * this.itemSize;
+        if (this.groupBy) {
+            const filteredOptionGroups = this.autocompleteOptions.value
+                .map(item => this.groupBy.split('.').reduce((prev, curr) => (prev ? prev[curr] : null), item || self))
+                .filter((optionGroup) => {
+                return (this.autocompleteOptions.value.some((option) => this.groupBy.split('.').reduce((prev, curr) => (prev ? prev[curr] : null), option || self) === optionGroup));
+            })
+                .filter((optionGroup, index, array) => array.indexOf(optionGroup) === index);
+            if (this.autocompleteOptions.value.length >= this.visibleOptions) {
+                return this.visibleOptions * this.itemSize;
             }
             else {
-                return this.autocompleteOptions.value.length >= this.nbOptionsVisible ?
-                    5 * this.itemSize :
-                    this.autocompleteOptions.value.length * this.itemSize;
+                const scrollItems = this.autocompleteOptions.value.length + filteredOptionGroups.length;
+                return (scrollItems > this.visibleOptions ? this.visibleOptions : scrollItems) * this.itemSize;
             }
         }
-    }
-    addOnBlurHandler(event) {
-        if (this.addOnBlur) {
-            const target = event.relatedTarget;
-            if (!target || target.tagName !== 'MAT-OPTION') {
-                const newValue = this.autocompleteInput.nativeElement.value;
-                this.add(newValue);
-            }
+        else {
+            return this.autocompleteOptions.value.length >= this.visibleOptions ?
+                this.visibleOptions * this.itemSize :
+                this.autocompleteOptions.value.length * this.itemSize;
         }
     }
-    addOnEnterHandler() {
-        const newValue = this.autocompleteInput.nativeElement.value;
-        this.add(newValue);
-    }
-    add(newValue) {
-        if (this.isFreeValueAllowed) {
-            if ((newValue || '').trim()) {
-                const foundItem = !this.isDuplicateValueAllowed
-                    ? this.autocompleteDataSelected.find((selectedItem) => selectedItem.label.toString().trim() === newValue.trim())
-                    : false;
-                if (!foundItem) {
-                    this.autocompleteDataSelected.push(new EuiAutoCompleteItem({ label: newValue.trim() }));
-                    this.chips = this.mapAsChip();
-                    this.autocompleteInput.nativeElement.value = '';
-                    this.autocompleteControl.setValue(null);
-                    this.autocompleteInputTrigger.closePanel();
-                    this.selectionChange.emit(this.autocompleteDataSelected);
-                    this.itemAdd.emit(new EuiAutoCompleteItem({ label: newValue.trim() }));
+    get isOpen() {
+        return this.isOpen$.value;
+    }
+    get hasOptionsResult() {
+        return this.autocompleteOptions.value.length > 0;
+    }
+    openPanel() {
+        if (!this.isOpen) {
+            this.scrollDispatcherSubscription = this.scrollDispatcher
+                .ancestorScrolled(this.input)
+                .pipe(takeUntil(this.destroy$))
+                .subscribe((event) => {
+                const scrollableParent = event ? event.getElementRef().nativeElement : document.querySelector('body');
+                if (!this.isVisible(this.input.nativeElement, scrollableParent)) {
+                    this.closePanel();
+                }
+            });
+            this.windowResizeSubscription = fromEvent(window, 'resize')
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(() => {
+                if (this.overlayRef && this.overlayRef.hasAttached() && !this.panelWidth) {
+                    this.overlayRef.updateSize({
+                        width: this.inputContainerRef.nativeElement.clientWidth,
+                    });
+                }
+            });
+            const positionStrategy = this.getPositionStrategy();
+            const scrollStrategy = this.getScrollStrategy();
+            this.overlayRef = this.overlay.create({
+                hasBackdrop: false,
+                positionStrategy,
+                scrollStrategy,
+                disposeOnNavigation: true,
+                width: this.panelWidth ? this.panelWidth : this.inputContainerRef.nativeElement.clientWidth,
+                panelClass: ['eui-autocomplete__panel-container', this.classList],
+            });
+            this.overlayRef.attach(this.templatePortal);
+            setTimeout(() => {
+                this.itemSize = this.getItemSize();
+            });
+            this.overlayRef
+                .outsidePointerEvents()
+                .pipe(takeUntil(this.destroy$))
+                .subscribe((e) => {
+                const targetElement = e.target;
+                const clearElement = this.elementRef.nativeElement.querySelector('.eui-sprite-eui-close');
+                const isElementOrChildOfElement = (element, parentElement) => {
+                    while (element) {
+                        if (element === parentElement) {
+                            return true;
+                        }
+                        element = element.parentElement;
+                    }
+                    return false;
+                };
+                const isClearableButton = targetElement.classList.contains('eui-sprite-eui-close');
+                const isInput = targetElement.classList.contains('eui-autocomplete__input');
+                if (!isClearableButton && !isInput && !isElementOrChildOfElement(targetElement, clearElement)) {
+                    this.closePanel();
+                }
+                if (isClearableButton && !this.elementRef.nativeElement.contains(targetElement)) {
+                    this.closePanel();
+                }
+                if (isInput && !this.elementRef.nativeElement.contains(targetElement)) {
+                    this.closePanel();
+                }
+                if (e.target.classList.contains('eui-autocomplete__input')) {
+                    e.stopPropagation();
+                }
+            });
+            this.overlayRef
+                .keydownEvents()
+                .pipe(takeUntil(this.destroy$))
+                .subscribe((keyboardEvent) => {
+                if (keyboardEvent.key?.toLowerCase() === 'escape') {
+                    this.closePanel();
+                }
+            });
+            this.autocompleteOptionsSubscription = this.autocompleteOptions.subscribe((autocompleteOptions) => {
+                this.overlayRef.removePanelClass('eui-autocomplete__panel-container--no-option');
+                if (autocompleteOptions.length === 0) {
+                    this.selectedOptionIndex = 0;
+                    this.overlayRef.addPanelClass('eui-autocomplete__panel-container--no-option');
+                }
+            });
+            let visibleRangeStart = 0;
+            let visibleRangeEnd = this.visibleOptions - 1;
+            this.keyboardOptionSelectorHandlerSubscription = fromEvent(this.input.nativeElement, 'keydown')
+                .pipe(filter((e) => e.code === 'ArrowDown' || e.code === 'ArrowUp' || e.code === 'Enter' || e.code === 'Tab'), takeUntil(this.destroy$))
+                .subscribe((e) => {
+                if (e) {
+                    if (e.code === 'ArrowDown' && this.selectedOptionIndex < this.autocompleteOptions.value.length - 1) {
+                        this.selectedOptionIndex++;
+                        this.cd.detectChanges();
+                        this.liveAnnouncer.clear();
+                        this.liveAnnouncer.announce(this.autocompleteOptions.value[this.selectedOptionIndex].label);
+                        e.preventDefault();
+                    }
+                    if (e.code === 'ArrowUp' && this.selectedOptionIndex > 0) {
+                        this.selectedOptionIndex--;
+                        this.cd.detectChanges();
+                        this.liveAnnouncer.clear();
+                        this.liveAnnouncer.announce(this.autocompleteOptions.value[this.selectedOptionIndex].label);
+                        e.preventDefault();
+                    }
+                    const cIndex = this.selectedOptionIndex - this.virtualScrolling?.getRenderedRange().start;
+                    if (e.code === 'ArrowDown' && cIndex > visibleRangeEnd - visibleRangeStart - visibleRangeEnd) {
+                        let nbOptionsGroup = 0;
+                        const nbOptions = this.autocompleteOptions.value.length;
+                        if (this.groupBy) {
+                            Object.keys(this.groupedOptions.value).forEach(groupedOption => {
+                                if (this.groupedOptions.value[groupedOption].options.length > 0 &&
+                                    this.selectedOptionIndex > this.groupedOptions.value[groupedOption].ancestorLength - 1) {
+                                    nbOptionsGroup++;
+                                }
+                            });
+                        }
+                        if ((this.selectedOptionIndex + nbOptionsGroup) > visibleRangeEnd && visibleRangeEnd <= (nbOptions + nbOptionsGroup)) {
+                            this.virtualScrolling.scrollToIndex((this.selectedOptionIndex + nbOptionsGroup) - visibleRangeEnd + visibleRangeStart);
+                            visibleRangeStart++;
+                            visibleRangeEnd++;
+                        }
+                    }
+                    if (e.code === 'ArrowUp' && cIndex < visibleRangeStart) {
+                        if (this.selectedOptionIndex < visibleRangeStart) {
+                            this.virtualScrolling.scrollToIndex(this.selectedOptionIndex);
+                            visibleRangeStart--;
+                            visibleRangeEnd--;
+                        }
+                    }
+                    if (e.code === 'Enter') {
+                        if (this.hasOptionsResult) {
+                            if (this.groupBy) {
+                                const options = [].concat(...Object.values(this.groupedOptions.value).map(group => group.options));
+                                this.onOptionSelected(options[this.selectedOptionIndex]);
+                            }
+                            else {
+                                this.onOptionSelected(this.autocompleteOptions.value[this.selectedOptionIndex]);
+                            }
+                        }
+                        else if (this.hasChips && this.isFreeValueAllowed) {
+                            this.add(this.autocompleteControl.value);
+                        }
+                    }
+                    if (e.code === 'Tab') {
+                        if (this.isOpen) {
+                            if (this.isAddOnBlur && this.hasChips && this.autocompleteControl.value?.trim().length > 0) {
+                                this.add(this.autocompleteControl.value.trim());
+                            }
+                            if (this.isForceSelection) {
+                                this.input.nativeElement.value = '';
+                                this.autocompleteControl.setValue(null, { emitEvent: false });
+                                this.setOptions('', this.isItemsSorted);
+                            }
+                            this.closePanel();
+                        }
+                    }
                 }
+            });
+            this.addOnBlurClickHandlerSubscription.unsubscribe();
+            if (this.isAddOnBlur) {
+                this.addOnBlurClickHandlerSubscription = fromEvent(document, 'click').pipe(takeUntil(this.destroy$)).subscribe((event) => {
+                    if (!event.target.classList.contains('eui-autocomplete-option') && this.hasChips && this.autocompleteControl.value?.trim().length > 0) {
+                        this.add(this.autocompleteControl.value.trim());
+                    }
+                });
             }
+            this.isForceSelectionSubscription.unsubscribe();
+            if (this.isForceSelection) {
+                this.isForceSelectionSubscription = fromEvent(document, 'click').pipe(takeUntil(this.destroy$)).subscribe((event) => {
+                    if (!event.target.classList.contains('eui-autocomplete-option')) {
+                        this.input.nativeElement.value = '';
+                        this.autocompleteControl.setValue(null, { emitEvent: false });
+                        this.setOptions('', this.isItemsSorted);
+                    }
+                });
+            }
+            this.isOpen$.next(true);
+            this.panelOpen.emit();
         }
     }
-    onOptionSelected(event) {
-        const value = event.option.value;
-        if (this.hasChips) {
-            this.autocompleteDataSelected.push(value);
-            this.autocompleteInput.nativeElement.value = '';
-            this.autocompleteControl.setValue(null);
-        }
-        else {
-            this.autocompleteDataSelected = value;
-            this.autocompleteInput.nativeElement.value = value.label;
-            this.autocompleteControl.setValue(value.label, { emitEvent: false });
-        }
-        if (this.hasChips) {
-            this.autocompleteOptions.next(this._filter(''));
-        }
-        this.selectionChange.emit(this.autocompleteDataSelected);
-        this.itemAdd.emit(value);
-    }
-    onChipRemove(e) {
-        const autocompleteDataRemoved = this.autocompleteDataSelected.find((data) => e.removed instanceof EuiChip
-            ? data.euiInternalId === e.removed.euiInternalId
-            : data.euiInternalId === e.removed.chip.euiInternalId);
-        this.autocompleteDataSelected = this.autocompleteDataSelected.filter((data) => e.removed instanceof EuiChip
-            ? data.euiInternalId !== e.removed.euiInternalId
-            : data.euiInternalId !== e.removed.chip.euiInternalId);
-        if (!this.isDuplicateValueAllowed) {
-            this.autocompleteOptions.next(this.isItemsSorted ? this.orderItems(this._filter(''), this.itemsSortOrder) : this._filter(''));
-        }
-        this.onChange(this.autocompleteDataSelected.length > 0 ? this.autocompleteDataSelected : null);
-        this.selectionChange.emit(this.autocompleteDataSelected);
-        this.itemRemove.emit(autocompleteDataRemoved);
-        if (!(e.removed instanceof EuiChip) &&
-            e.removed.event instanceof KeyboardEvent &&
-            e.removed.event.code === 'Backspace' &&
-            this.chipList.euiChipItems.length > 1) {
-            this.chipList.euiChipItems
-                .get(this.chipList.euiChipItems.length - 2)
-                .nativeElement.querySelector('.eui-chip__remove-icon')
-                .focus();
+    closePanel() {
+        this.selectedOptionIndex = 0;
+        this.overlayRef.dispose();
+        this.overlayRef = null;
+        this.isOpen$.next(false);
+        this.keyboardOptionSelectorHandlerSubscription.unsubscribe();
+        this.autocompleteOptionsSubscription.unsubscribe();
+        this.scrollDispatcherSubscription.unsubscribe();
+        this.windowResizeSubscription.unsubscribe();
+        this.panelClose.emit();
+    }
+    onOptionSelected(e) {
+        if (!e.isDisabled) {
+            if (this.hasChips) {
+                this.autocompleteDataSelected.push(new EuiAutoCompleteItem({ ...e, euiInternalId: uuid.v4() }));
+                this.chips = this.mapToChip(this.autocompleteDataSelected);
+                this.input.nativeElement.value = '';
+                this.autocompleteControl.setValue(null);
+                this.setOptions('', this.isItemsSorted);
+            }
+            else {
+                this.autocompleteDataSelected = [e];
+                this.input.nativeElement.value = e.label;
+                this.autocompleteControl.setValue(e.label);
+            }
+            this.addOnBlurClickHandlerSubscription.unsubscribe();
+            this.isForceSelectionSubscription.unsubscribe();
+            this.selectionChange.emit(this.autocompleteDataSelected);
+            this.itemAdd.emit(e);
+            this.closePanel();
         }
     }
-    onFocus() {
-        if (this.isForceSelection) {
-            this.autocompleteControl.setValue(null);
+    add(value) {
+        if (!value || (!this.isFreeValueAllowed && !this.autocompleteData.find(a => a.label === value.trim()))) {
+            return;
         }
-    }
-    onFocusOut() {
-        this.onTouch();
-        if (this.isForceSelection) {
-            setTimeout(() => {
-                this.autocompleteInput.nativeElement.value = '';
-                this.autocompleteControl.setValue(null);
-            }, 250);
+        if (!this.isDuplicateValueAllowed && this.autocompleteDataSelected.some(s => s.label.trim() === value.trim())) {
+            return;
         }
-        this.inputBlur.emit();
+        const item = this.autocompleteData.find(a => a.label === value.trim()) || new EuiAutoCompleteItem({ label: value.trim(), euiInternalId: uuid.v4() });
+        this.autocompleteDataSelected.push(item);
+        this.chips = this.mapToChip(this.autocompleteDataSelected);
+        this.input.nativeElement.value = '';
+        this.autocompleteControl.setValue(null);
+        this.closePanel();
+        this.addOnBlurClickHandlerSubscription.unsubscribe();
+        this.isForceSelectionSubscription.unsubscribe();
+        this.selectionChange.emit(this.autocompleteDataSelected);
+        this.itemAdd.emit(item);
     }
-    trackByFn(index) {
-        return index;
+    groupsTrackByFn(index, group) {
+        return group;
     }
-    onClose() {
-        this.scrollDispatcherSubscription.unsubscribe();
-        if (!this.ignoreOpenCloseEvents) {
-            this.panelClose.emit();
-        }
-        this.virtualScrolling.scrollToIndex(0);
-        this.selectedOptionIndex = -1;
-        this.keyboardOptionSelectorHandlerSubscription.unsubscribe();
-    }
-    onOpen() {
-        this.itemSize = (this.matAutocomplete.options?.first['_element']?.nativeElement?.clientHeight + 1) || 48;
-        this.scrollDispatcherSubscription = this.scrollDispatcher
-            .ancestorScrolled(this.autocompleteInput)
-            .subscribe((event) => {
-            const scrollableParent = event ? event.getElementRef().nativeElement : document.querySelector('body');
-            if (!this.isVisible(this.autocompleteInput.nativeElement, scrollableParent)) {
-                this.autocompleteInputTrigger.closePanel();
-            }
-        });
-        if (!this.ignoreOpenCloseEvents) {
-            this.panelOpen.emit();
-        }
-        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--;
-                    }
-                }
-            }
-        });
+    optionsTrackByFn(index, item) {
+        return item.id;
     }
     writeValue(value) {
         this.value = value;
         if (this.hasChips) {
-            this.autocompleteDataSelected = value ? value : [];
-            this.autocompleteDataSelected = this.autocompleteDataSelected.map((selected) => new EuiAutoCompleteItem(Object.assign({}, selected, { euiInternalId: this.generateId() })));
-            this.chips = [...this.mapAsChip()];
+            this.autocompleteDataSelected = value ? ([...value]) : [];
+            this.chips = this.mapToChip(this.autocompleteDataSelected);
             this.autocompleteControl.patchValue(null, { emitEvent: false });
-            this.autocompleteOptions.next(this._filter(''));
+            this.setOptions('', this.isItemsSorted);
         }
         else {
             this.autocompleteControl.patchValue(value ? value.label : null, { emitEvent: false });
-            this.fieldValue = value ? value.label : null;
-            this.autocompleteOptions.next(this._filter(this.fieldValue));
+            const inputValue = value ? value.label : null;
+            this.setOptions(inputValue, this.isItemsSorted);
         }
     }
     setDisabledState(isDisabled) {
         this.isDisabled = isDisabled;
         isDisabled ? this.autocompleteControl.disable() : this.autocompleteControl.enable();
+        if (this.isOpen) {
+            this.closePanel();
+        }
+        this.cd.detectChanges();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -468,135 +600,132 @@ class EuiAutocompleteComponent extends BaseDirective {
     registerOnTouched(fn) {
         this.onTouch = fn;
     }
-    // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    onChipDropped(e) {
-        // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.autocompleteDataSelected = e.chips.map((c) => {
-            const found = this.autocompleteDataSelected.find((a) => a.id === c.id);
-            return found ? found : new EuiAutoCompleteItem({ ...c.data, euiInternalId: c.euiInternalId });
+    onClear() {
+        this.clear.emit();
+    }
+    onFocus() {
+        this.keyboardSubscription = fromEvent(this.input.nativeElement, 'keydown')
+            .pipe(filter((event) => /^[a-zA-Z0-9]$/.test(event.key) ||
+            event.key === 'Space' ||
+            event.key === 'ArrowDown' ||
+            event.key === 'Backspace'))
+            .subscribe((event) => {
+            if (!this.isOpen) {
+                this.openPanel();
+                event.stopPropagation();
+            }
+            if (this.chipsPosition === 'inside' && event.key === 'Backspace') {
+                const removed = this.chips.pop();
+                this.onChipRemove({ chips: [...this.chips], removed });
+                this.cd.detectChanges();
+                this.overlayRef.updateSize({ width: this.inputContainerRef.nativeElement.clientWidth });
+                this.overlayRef.updatePosition();
+            }
         });
-        this.chips = this.mapAsChip();
-        this.autocompleteOptions.next(this._filter(''));
+        if (!this.isOpen) {
+            this.openPanel();
+        }
+        this.inputFocus.emit();
+    }
+    onBlur() {
+        this.keyboardSubscription.unsubscribe();
+        this.inputBlur.emit();
+        this.onTouch();
+    }
+    onChipRemove(e) {
+        const event = e;
+        const itemRemoved = this.autocompleteDataSelected.find(i => i.id === event.removed.id);
+        this.autocompleteDataSelected = this.autocompleteDataSelected
+            .filter(i => event.chips.find(c => c.id === i.id))
+            .filter(i => event.chips.find(c => c.euiInternalId === i.euiInternalId));
+        this.chips = this.mapToChip(this.autocompleteDataSelected);
+        this.setOptions('', this.isItemsSorted);
+        this.onChange(this.autocompleteDataSelected.length > 0 ? this.autocompleteDataSelected : null);
+        this.selectionChange.emit(this.autocompleteDataSelected);
+        this.itemRemove.emit(itemRemoved);
+    }
+    onChipDropped(e) {
+        const selected = this.autocompleteDataSelected;
+        this.autocompleteDataSelected = e.chips.map(c => selected.find((a) => a.id === c.id));
+        this.chips = this.mapToChip(this.autocompleteDataSelected);
+        this.autocompleteOptions.next(this.filterOptions(''));
         this.onChange(this.autocompleteDataSelected.length > 0 ? this.autocompleteDataSelected : null);
         this.selectionChange.emit(this.autocompleteDataSelected);
         this.chipDrop.emit(e);
     }
-    // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     onChipDragStarted(e) {
         this.chipDragStart.emit(e);
     }
-    // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     onChipDragReleased(e) {
         this.chipDragRelease.emit(e);
     }
-    onClear() {
-        this.clear.next(undefined);
-    }
-    onChipListFocus() {
-        this.autocompleteInputTrigger.closePanel();
+    getItemSize() {
+        const optionHeight = this.overlayRef?.hostElement?.querySelector('.eui-autocomplete__panel')?.querySelectorAll('.eui-autocomplete-option')[0]?.clientHeight + 1;
+        return optionHeight || 48;
     }
-    onKeyDownBackspace() {
-        if (this.chipsPosition === 'inside' && this.autocompleteInput.nativeElement.value === '' && this.chipList.euiChipItems.length > 0) {
-            this.onChipListFocus();
-            this.chipList.euiChipItems.last.nativeElement.querySelector('.eui-chip__remove-icon').focus();
+    setOptions(value, isItemsSorted) {
+        this.autocompleteOptions.next(isItemsSorted ? (this.orderArray(this.filterOptions(value), this.itemsSortOrder)) : this.filterOptions(value));
+        if (this.groupBy) {
+            const { groupedOptions, distinctOptionGroups } = this.groupingHandler(this.autocompleteOptions.value, this.groupBy);
+            this.groupedOptions.next(groupedOptions);
+            this.distinctOptionGroups = distinctOptionGroups;
         }
     }
-    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() })));
-            this.chips = this.mapAsChip();
-            // value is null when chips is added, testing value prevent having two valuechanges triggered
-            if (!value) {
-                this.onChange(this.autocompleteDataSelected.length > 0 ? this.autocompleteDataSelected : null);
-            }
-        }
-        else {
-            if (typeof value === 'string') {
-                const foundItem = this.autocompleteData.find((data) => data && data.label && value && typeof value === 'string'
-                    ? data.label.toLowerCase().trim() === value.toLowerCase().trim()
-                    : false);
-                if (foundItem) {
-                    this.onChange(foundItem);
+    getPositionStrategy() {
+        return this.overlay
+            .position()
+            .flexibleConnectedTo(this.inputContainerRef.nativeElement)
+            .withPositions(this.preferredPositons)
+            .withFlexibleDimensions(false)
+            .withLockedPosition(true);
+    }
+    getScrollStrategy() {
+        return this.overlay.scrollStrategies.reposition({ scrollThrottle: 10 });
+    }
+    filterOptions(inputValue) {
+        let data = [];
+        if (inputValue) {
+            data = this.autocompleteData.filter((autocompleteItem) => {
+                if (this.matching === 'contains' &&
+                    autocompleteItem.label.toLowerCase().indexOf(inputValue.toString().toLowerCase()) !== -1) {
+                    return autocompleteItem;
                 }
-                else {
-                    value ? this.onChange(new EuiAutoCompleteItem({ label: value })) : this.onChange(null);
+                if (this.matching === 'startWith' &&
+                    autocompleteItem.label.toLowerCase().substr(0, inputValue.toString().length) === inputValue.toLowerCase()) {
+                    return autocompleteItem;
                 }
-            }
-            else {
-                this.onChange(value === undefined ? null : value);
-                if (!value) {
-                    this.autocompleteOptions.next(this._filter(''));
-                }
-            }
+            });
         }
-        this.inputChange.emit(value);
-        if (!this.async) {
-            const filterValue = typeof value === 'string' || !value ? value : value.label;
-            this.autocompleteOptions.next(this.isItemsSorted
-                ? this.orderItems(this._filter(filterValue), this.itemsSortOrder)
-                : this._filter(filterValue));
+        else {
+            data = this.autocompleteData;
         }
-    }
-    _filter(str) {
-        const filteredItems = [];
-        this.autocompleteData.forEach((item) => {
-            const foundItem = !this.isDuplicateValueAllowed && Array.isArray(this.autocompleteDataSelected)
-                ? this.autocompleteDataSelected.find((selectedItem) => {
-                    if (item.id) {
-                        return selectedItem.id === item.id;
-                    }
-                    else {
-                        return selectedItem.label.toLowerCase() === item.label.toLowerCase();
-                    }
-                })
-                : false;
-            if (!foundItem) {
-                if (str) {
-                    if (this.matching === 'contains' && item.label.toLowerCase().indexOf(str.toString().toLowerCase()) !== -1) {
-                        filteredItems.push(item);
-                    }
-                    if (this.matching === 'startWith' && item.label.toLowerCase().substr(0, str.toString().length) === str.toLowerCase()) {
-                        filteredItems.push(item);
-                    }
-                }
-                else {
-                    filteredItems.push(item);
-                }
-            }
+        if (this.hasChips) {
+            data = data.filter(d => !this.isDuplicateValueAllowed ? !this.autocompleteDataSelected.some(selectedItem => d.id === selectedItem.id) : true);
+        }
+        if (this.isItemsSorted) {
+            data = this.orderArray(data, this.itemsSortOrder);
+        }
+        return data;
+    }
+    mapToChip(items) {
+        const chips = items.map((selected) => {
+            return new EuiChip({
+                id: selected.id,
+                euiInternalId: selected.euiInternalId,
+                label: selected.label,
+                typeClass: selected.typeClass,
+                isOutline: selected.isOutline,
+                isRounded: selected.isRounded,
+                sizeClass: selected.sizeClass,
+                isRemovable: selected.isRemovable,
+                tooltipMessage: selected.tooltip?.tooltipMessage,
+                tooltip: new EuiChipTooltip(selected.tooltip),
+                iconClass: selected.iconClass,
+            });
         });
-        return this.isItemsSorted ? this.orderItems(filteredItems, this.itemsSortOrder) : filteredItems;
-    }
-    mapAsChip() {
-        const chips = this.autocompleteDataSelected.map((selected) => new EuiChip({
-            id: selected.id,
-            euiInternalId: selected.euiInternalId,
-            label: selected.label,
-            typeClass: selected.typeClass,
-            isOutline: selected.isOutline,
-            isRounded: selected.isRounded,
-            sizeClass: selected.sizeClass,
-            isRemovable: selected.isRemovable,
-            tooltipMessage: selected.tooltip?.tooltipMessage,
-            tooltip: new EuiChipTooltip(selected.tooltip),
-            iconClass: selected.iconClass,
-        }));
-        return this.isChipsSorted ? this.orderItems(chips, this.chipsSortOrder) : chips;
-    }
-    generateId() {
-        return '_' + Math.random().toString(36).substr(2, 9);
-    }
-    orderItems(tab, sortOrder) {
+        return this.isChipsSorted && chips.length > 0 ? this.orderArray(chips, this.chipsSortOrder) : chips;
+    }
+    orderArray(tab, sortOrder) {
         tab.sort((a, b) => {
             const aObj = a.label.toLowerCase();
             const bObj = b.label.toLowerCase();
@@ -621,43 +750,102 @@ class EuiAutocompleteComponent extends BaseDirective {
         });
         return tab;
     }
-    groupingHandler() {
-        this.distinctOptionGroups = this.autocompleteData.map((item) => this.groupBy.split('.').reduce((prev, curr) => (prev ? prev[curr] : null), item || self));
-        this.distinctOptionGroups = this.distinctOptionGroups
-            .filter((n, i) => this.distinctOptionGroups.indexOf(n) === i)
-            .sort((a, b) => (a > b ? 1 : -1));
-        this.autocompleteOptions.pipe(takeUntil(this.destroy$)).subscribe((autocompleteOptions) => {
-            let groupedItems;
-            this.distinctOptionGroups.forEach((group) => {
-                groupedItems = autocompleteOptions.filter((item) => {
-                    const f = this.groupBy.split('.').reduce((prev, curr) => (prev ? prev[curr] : null), item || self);
-                    return f === group;
-                });
-                if (this.isItemsSorted) {
-                    groupedItems = this.orderItems(groupedItems, this.itemsSortOrder);
-                }
-                this.groupedItems = {
-                    ...this.groupedItems,
-                    [group]: of(groupedItems),
-                };
-            });
-        });
+    groupingHandler(options, groupBy) {
+        const distinctGroups = this.autocompleteData.map(item => groupBy.split('.').reduce((prev, curr) => (prev ? prev[curr] : null), item || self));
+        const distinctOptionGroups = [...new Set(distinctGroups)].sort((a, b) => (a > b ? 1 : -1));
+        const groupedOptions = {};
+        let ancestorLength = 0;
+        for (const group of distinctOptionGroups) {
+            let o = options.filter(option => groupBy.split('.').reduce((prev, curr) => (prev ? prev[curr] : null), option || self) === group);
+            if (this.isItemsSorted) {
+                o = this.orderArray(o, this.itemsSortOrder);
+            }
+            groupedOptions[group] = { options: o, ancestorLength };
+            ancestorLength += o.length;
+        }
+        return { groupedOptions, distinctOptionGroups };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", 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: "17.0.1", 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", visibleOptions: "visibleOptions", 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: { clear: "clear", panelClose: "panelClose", panelOpen: "panelOpen", inputBlur: "inputBlur", 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                        (focus)=\"onFocus()\"\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                        (focus)=\"onFocus()\"\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 === 'auto' ? null : 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]=\"itemSize\"\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                                        [disabled]=\"groupedItem.isDisabled\"\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]=\"itemSize\"\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                                [disabled]=\"autocompleteOption.isDisabled\"\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--no-max-height{max-height:none!important}.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__option .mat-pseudo-checkbox-checked,.eui-autocomplete__option .mat-pseudo-checkbox-indeterminate,.eui-autocomplete__option .mat-accent .mat-pseudo-checkbox-checked,.eui-autocomplete__option .mat-accent .mat-pseudo-checkbox-indeterminate{background:transparent}.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;margin-bottom:0;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom .mat-mdc-optgroup-label{display:none}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom-optgroup-wrapper{align-items:center;background-color:var(--eui-base-color-grey-10);color:var(--eui-base-color-grey-80);display:flex;height:auto;line-height:var(--eui-base-spacing-3xl);min-height:var(--eui-base-spacing-3xl);padding:0 var(--eui-base-spacing-s);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom-optgroup-wrapper .eui-icon{margin-right:var(--eui-base-spacing-2xs)}.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: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], 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", "chipDragStart", "chipDragRelease", "chipDrop", "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 }); }
+    isVisible(origin, scrollableParent) {
+        const originY = origin.getBoundingClientRect().y;
+        const scrollableParentY = Math.abs(scrollableParent.getBoundingClientRect().y);
+        const scrollableParentHeight = scrollableParent.getBoundingClientRect().height - 55;
+        return ((originY > 0 && originY < scrollableParentHeight) ||
+            (originY - scrollableParentY > 0 && originY < scrollableParentY + scrollableParentHeight));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAutocompleteComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i2.LiveAnnouncer }, { token: i3.ScrollDispatcher }, { token: i4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiAutocompleteComponent, selector: "eui-autocomplete, input[euiAutocomplete]", inputs: { autocompleteData: "autocompleteData", visibleOptions: "visibleOptions", matching: "matching", placeholder: "placeholder", autocompleteDataSelected: "autocompleteDataSelected", chipsSortOrder: "chipsSortOrder", itemsSortOrder: "itemsSortOrder", chipsPosition: "chipsPosition", groupBy: "groupBy", toggleLinkMoreLabel: "toggleLinkMoreLabel", toggleLinkLessLabel: "toggleLinkLessLabel", classList: "classList", panelWidth: "panelWidth", dragAndDropSourceName: "dragAndDropSourceName", dragAndDropConnectedTo: "dragAndDropConnectedTo", isFreeValueAllowed: "isFreeValueAllowed", isReadonly: "isReadonly", isLoading: "isLoading", hasChips: "hasChips", isAsync: "isAsync", isChipsSorted: "isChipsSorted", isItemsSorted: "isItemsSorted", isChipsRemovable: "isChipsRemovable", isDuplicateValueAllowed: "isDuplicateValueAllowed", isAddOnBlur: "isAddOnBlur", isForceSelection: "isForceSelection", maxVisibleChipsCount: "maxVisibleChipsCount", chipsLabelTruncateCount: "chipsLabelTruncateCount", isMaxVisibleChipsOpened: "isMaxVisibleChipsOpened", isChipsDragAndDrop: "isChipsDragAndDrop" }, outputs: { panelClose: "panelClose", panelOpen: "panelOpen", inputFocus: "inputFocus", inputBlur: "inputBlur", clear: "clear", 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: "templatePortalContent", first: true, predicate: ["templatePortalContent"], descendants: true }, { propertyName: "inputContainerRef", first: true, predicate: ["inputContainerRef"], descendants: true }, { propertyName: "virtualScrolling", first: true, predicate: ["virtualScrolling"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef }], usesOnChanges: true, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent"] }], ngImport: i0, template: "<div class=\"eui-autocomplete__wrapper\">\n    <ng-container *ngIf=\"chipsPosition === 'bottom'\">\n        <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"hasChips\">\n        <eui-chip-list\n            [chips]=\"chips\"\n            [isChipsRemovable]=\"isChipsRemovable && !isReadonly\"\n            [maxVisibleChipsCount]=\"maxVisibleChipsCount\"\n            [isMaxVisibleChipsOpened]=\"isMaxVisibleChipsOpened\"\n            [chipsLabelTruncateCount]=\"chipsLabelTruncateCount\"\n            [toggleLinkMoreLabel]=\"toggleLinkMoreLabel\"\n            [toggleLinkLessLabel]=\"toggleLinkLessLabel\"\n            [isChipsDragAndDrop]=\"isChipsDragAndDrop\"\n            [dragAndDropSourceName]=\"dragAndDropSourceName\"\n            [dragAndDropConnectedTo]=\"dragAndDropConnectedTo\"\n            (chipDrop)=\"onChipDropped($event)\"\n            (chipDragStart)=\"onChipDragStarted($event)\"\n            (chipDragRelease)=\"onChipDragReleased($event)\"\n            (chipRemove)=\"onChipRemove($event)\">\n            <euiChipListAppendContent>\n                <ng-template [ngIf]=\"chipsPosition === 'inside'\">\n                    <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n                </ng-template>\n            </euiChipListAppendContent>\n        </eui-chip-list>\n    </ng-container>\n    <ng-container *ngIf=\"chipsPosition === 'top'\">\n        <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n    </ng-container>\n</div>\n\n<ng-template #control>\n    <div class=\"eui-autocomplete__input-container\" #inputContainerRef>\n        <input\n            #input\n            euiInputText\n            [euiClearable]=\"!isReadonly && !isDisabled\"\n            [euiLoading]=\"isLoading\"\n            [formControl]=\"autocompleteControl\"\n            class=\"eui-autocomplete__input {{ classList }}\"\n            placeholder=\"{{ placeholder }}\"\n            [readonly]=\"isReadonly\"\n            (clear)=\"onClear()\"\n            (click)=\"openPanel()\"\n            (focus)=\"onFocus()\"\n            (blur)=\"onBlur()\"\n            aria-autocomplete=\"both\"\n            aria-haspopup=\"true\"\n            aria-controls=\"eui-autocomplete__panel\" />\n    </div>\n</ng-template>\n\n<ng-template #templatePortalContent>\n    <div id=\"eui-autocomplete__panel\" class=\"eui-autocomplete__panel\" [@panelAnimation]=\"isOpen ? 'visible' : 'hidden'\" role=\"listbox\" aria-live=\"polite\">\n        <cdk-virtual-scroll-viewport\n            #virtualScrolling\n            [itemSize]=\"itemSize\"\n            minBufferPx=\"500\"\n            maxBufferPx=\"750\"\n            [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n            <ng-container *ngIf=\"!groupBy\">\n                <eui-autocomplete-option\n                    *cdkVirtualFor=\"let autocompleteOption of autocompleteOptions | async; let i = index; trackBy: optionsTrackByFn\"\n                    [isActive]=\"selectedOptionIndex === i\"\n                    [isDisabled]=\"autocompleteOption.isDisabled\"\n                    [attr.aria-disabled]=\"autocompleteOption.isDisabled\"\n                    [euiVariant]=\"autocompleteOption.typeClass\"\n                    (click)=\"onOptionSelected(autocompleteOption)\">\n                    <ng-container *ngIf=\"!autocompleteOptionTemplate\">\n                        <span *ngIf=\"autocompleteOption.iconClass\" class=\"{{ autocompleteOption.iconClass }}\"></span>\n                        {{ autocompleteOption.label }}\n                    </ng-container>\n                    <ng-container *ngIf=\"autocompleteOptionTemplate\">\n                        <ng-template\n                            [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\">\n                        </ng-template>\n                    </ng-container>\n                </eui-autocomplete-option>\n            </ng-container>\n            <ng-container *ngIf=\"groupBy\">\n                <ng-container *ngFor=\"let distinctOptionGroup of distinctOptionGroups; let i = index; trackBy: groupsTrackByFn\">\n                    <eui-autocomplete-option-group *ngIf=\"(groupedOptions | async)[distinctOptionGroup].options.length > 0\" [label]=\"distinctOptionGroup\">\n                        <div class=\"eui-autocomplete-option-group__label\">\n                            <ng-container *ngIf=\"autocompleteOptGroupTemplate\">\n                                <ng-template\n                                    [ngTemplateOutlet]=\"autocompleteOptGroupTemplate\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: { label: distinctOptionGroup } }\">\n                                </ng-template>\n                            </ng-container>\n                            <ng-container *ngIf=\"!autocompleteOptGroupTemplate\">\n                                {{ distinctOptionGroup }}\n                            </ng-container>\n                        </div>\n                        <div class=\"eui-autocomplete-option-group__options\">\n                            <ng-container *ngFor=\"let autocompleteOption of (groupedOptions | async)[distinctOptionGroup].options; let j = index; trackBy: optionsTrackByFn\">\n                                <eui-autocomplete-option\n                                    isGroupItem\n                                    [isActive]=\"selectedOptionIndex === (groupedOptions | async)[distinctOptionGroup].ancestorLength + j\"\n                                    [isDisabled]=\"autocompleteOption.isDisabled\"\n                                    [attr.aria-disabled]=\"autocompleteOption.isDisabled\"\n                                    [euiVariant]=\"autocompleteOption.typeClass\"\n                                    (click)=\"onOptionSelected(autocompleteOption)\">\n                                    <ng-container *ngIf=\"!autocompleteOptionTemplate\">\n                                        <span *ngIf=\"autocompleteOption.iconClass\" class=\"{{ autocompleteOption.iconClass }}\"></span>\n                                        {{ autocompleteOption.label }}\n                                    </ng-container>\n                                    <ng-container *ngIf=\"autocompleteOptionTemplate\">\n                                        <ng-template\n                                            [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\">\n                                        </ng-template>\n                                    </ng-container>\n                                </eui-autocomplete-option>\n                            </ng-container>\n                        </div>\n                    </eui-autocomplete-option-group>\n                </ng-container>\n            </ng-container>\n        </cdk-virtual-scroll-viewport>\n    </div>  \n</ng-template>\n", styles: [".eui-autocomplete,.eui-autocomplete__wrapper{width:100%}.eui-autocomplete__wrapper .eui-autocomplete__input-container{display:flex;width:100%}.eui-autocomplete__panel-container .eui-autocomplete__panel{box-shadow:var(--eui-base-shadow-8);width:100%}.eui-autocomplete__panel-container.eui-autocomplete__panel-container--no-option .eui-autocomplete__panel{box-shadow:none}.eui-autocomplete.eui-autocomplete--chips-position-bottom .eui-autocomplete__input-container{margin-bottom:var(--eui-base-spacing-2xs)}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-50);border-radius:var(--eui-base-border-radius);padding:0 var(--eui-base-spacing-2xs)}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list,.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper .eui-chip-list__chip-container{display:block}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper .eui-chip-list__chip-container .eui-chip{margin-bottom:0;margin-top:var(--eui-base-spacing-2xs)}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list .eui-input-text{border:0;min-height:calc(var(--eui-base-spacing-2xl) + var(--eui-base-spacing-2xs) - 2px)}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list euichiplistappendcontent{flex-grow:1}button~.eui-autocomplete .eui-autocomplete__input,.eui-input-group-addon-item~.eui-autocomplete .eui-autocomplete__input{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.eui-autocomplete:has(+button) .eui-autocomplete__input{border-top-right-radius:0;border-bottom-right-radius:0}.eui-autocomplete:has(+.eui-input-group-addon-item) .eui-autocomplete__input{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.eui-autocomplete-option-group .eui-autocomplete-option-group__label{align-items:center;background-color:var(--eui-base-color-grey-10);border-bottom:1px solid var(--eui-base-color-grey-10);border-left:var(--eui-base-border-state-width) solid transparent;cursor:pointer;display:flex;font-weight:700;min-height:var(--eui-base-spacing-3xl);padding-left:var(--eui-base-spacing-s);padding-right:var(--eui-base-spacing-s)}.eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-icon,.eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-icon-svg,.eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-flag-icon{margin-right:var(--eui-base-spacing-2xs)}.eui-autocomplete-option{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);border-left:var(--eui-base-border-state-width) solid transparent;cursor:pointer;display:flex;min-height:var(--eui-base-spacing-3xl);padding-left:var(--eui-base-spacing-s);padding-right:var(--eui-base-spacing-s)}.eui-autocomplete-option:hover{background-color:var(--eui-base-color-grey-5)}.eui-autocomplete-option--group-item{padding-left:var(--eui-base-spacing-l)}.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-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)}.eui-autocomplete-option--active{background-color:var(--eui-base-color-grey-5);outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px}.eui-autocomplete-option--disabled{cursor:default;opacity:.4}.eui-autocomplete-option--disabled:hover{background:none}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i7.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["class", "isInvalid"] }, { kind: "component", type: i8.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", "chipDragStart", "chipDragRelease", "chipDrop", "chiplistFocus"] }, { kind: "directive", type: i8.EuiChipListAppendContentDirective, selector: "euiChipListAppendContent" }, { kind: "component", type: EuiAutocompleteOptionComponent, selector: "eui-autocomplete-option", inputs: ["isActive", "isDisabled", "isGroupItem"] }, { kind: "component", type: EuiAutocompleteOptionGroupComponent, selector: "eui-autocomplete-option-group", inputs: ["label"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }], animations: [panelAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
+__decorate([
+    coerceBoolean
+], EuiAutocompleteComponent.prototype, "isFreeValueAllowed", void 0);
+__decorate([
+    coerceBoolean
+], EuiAutocompleteComponent.prototype, "isReadonly", void 0);
+__decorate([
+    coerceBoolean
+], EuiAutocompleteComponent.prototype, "isLoading", void 0);
+__decorate([
+    coerceBoolean
+], EuiAutocompleteComponent.prototype, "hasChips", void 0);
+__decorate([
+    coerceBoolean
+], EuiAutocompleteComponent.prototype, "isAsync", void 0);
+__decorate([
+    coerceBoolean
+], EuiAutocompleteComponent.prototype, "isChipsSorted", void 0);
+__decorate([
+    coerceBoolean
+], EuiAutocompleteComponent.prototype, "isItemsSorted", void 0);
+__decorate([
+    coerceBoolean
+], EuiAutocompleteComponent.prototype, "isChipsRemovable", void 0);
+__decorate([
+    coerceBoolean
+], EuiAutocompleteComponent.prototype, "isDuplicateValueAllowed", void 0);
+__decorate([
+    coerceBoolean
+], EuiAutocompleteComponent.prototype, "isAddOnBlur", void 0);
+__decorate([
+    coerceBoolean
+], EuiAutocompleteComponent.prototype, "isForceSelection", void 0);
+__decorate([
+    coerceNumber
+], EuiAutocompleteComponent.prototype, "maxVisibleChipsCount", void 0);
+__decorate([
+    coerceNumber
+], EuiAutocompleteComponent.prototype, "chipsLabelTruncateCount", void 0);
+__decorate([
+    coerceBoolean
+], EuiAutocompleteComponent.prototype, "isMaxVisibleChipsOpened", void 0);
+__decorate([
+    coerceBoolean
+], EuiAutocompleteComponent.prototype, "isChipsDragAndDrop", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", 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                        (focus)=\"onFocus()\"\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                        (focus)=\"onFocus()\"\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 === 'auto' ? null : 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]=\"itemSize\"\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                                        [disabled]=\"groupedItem.isDisabled\"\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]=\"itemSize\"\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                                [disabled]=\"autocompleteOption.isDisabled\"\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--no-max-height{max-height:none!important}.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__option .mat-pseudo-checkbox-checked,.eui-autocomplete__option .mat-pseudo-checkbox-indeterminate,.eui-autocomplete__option .mat-accent .mat-pseudo-checkbox-checked,.eui-autocomplete__option .mat-accent .mat-pseudo-checkbox-indeterminate{background:transparent}.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;margin-bottom:0;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom .mat-mdc-optgroup-label{display:none}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom-optgroup-wrapper{align-items:center;background-color:var(--eui-base-color-grey-10);color:var(--eui-base-color-grey-80);display:flex;height:auto;line-height:var(--eui-base-spacing-3xl);min-height:var(--eui-base-spacing-3xl);padding:0 var(--eui-base-spacing-s);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom-optgroup-wrapper .eui-icon{margin-right:var(--eui-base-spacing-2xs)}.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: () => [{ type: i0.ChangeDetectorRef }, { type: i1.NgControl, decorators: [{
+            args: [{ selector: 'eui-autocomplete, input[euiAutocomplete]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [panelAnimation], hostDirectives: [
+                        {
+                            directive: BaseStatesDirective,
+                            inputs: [
+                                'euiSecondary',
+                                'euiSuccess',
+                                'euiInfo',
+                                'euiWarning',
+                                'euiDanger',
+                                'euiAccent',
+                            ],
+                        },
+                    ], template: "<div class=\"eui-autocomplete__wrapper\">\n    <ng-container *ngIf=\"chipsPosition === 'bottom'\">\n        <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"hasChips\">\n        <eui-chip-list\n            [chips]=\"chips\"\n            [isChipsRemovable]=\"isChipsRemovable && !isReadonly\"\n            [maxVisibleChipsCount]=\"maxVisibleChipsCount\"\n            [isMaxVisibleChipsOpened]=\"isMaxVisibleChipsOpened\"\n            [chipsLabelTruncateCount]=\"chipsLabelTruncateCount\"\n            [toggleLinkMoreLabel]=\"toggleLinkMoreLabel\"\n            [toggleLinkLessLabel]=\"toggleLinkLessLabel\"\n            [isChipsDragAndDrop]=\"isChipsDragAndDrop\"\n            [dragAndDropSourceName]=\"dragAndDropSourceName\"\n            [dragAndDropConnectedTo]=\"dragAndDropConnectedTo\"\n            (chipDrop)=\"onChipDropped($event)\"\n            (chipDragStart)=\"onChipDragStarted($event)\"\n            (chipDragRelease)=\"onChipDragReleased($event)\"\n            (chipRemove)=\"onChipRemove($event)\">\n            <euiChipListAppendContent>\n                <ng-template [ngIf]=\"chipsPosition === 'inside'\">\n                    <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n                </ng-template>\n            </euiChipListAppendContent>\n        </eui-chip-list>\n    </ng-container>\n    <ng-container *ngIf=\"chipsPosition === 'top'\">\n        <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n    </ng-container>\n</div>\n\n<ng-template #control>\n    <div class=\"eui-autocomplete__input-container\" #inputContainerRef>\n        <input\n            #input\n            euiInputText\n            [euiClearable]=\"!isReadonly && !isDisabled\"\n            [euiLoading]=\"isLoading\"\n            [formControl]=\"autocompleteControl\"\n            class=\"eui-autocomplete__input {{ classList }}\"\n            placeholder=\"{{ placeholder }}\"\n            [readonly]=\"isReadonly\"\n            (clear)=\"onClear()\"\n            (click)=\"openPanel()\"\n            (focus)=\"onFocus()\"\n            (blur)=\"onBlur()\"\n            aria-autocomplete=\"both\"\n            aria-haspopup=\"true\"\n            aria-controls=\"eui-autocomplete__panel\" />\n    </div>\n</ng-template>\n\n<ng-template #templatePortalContent>\n    <div id=\"eui-autocomplete__panel\" class=\"eui-autocomplete__panel\" [@panelAnimation]=\"isOpen ? 'visible' : 'hidden'\" role=\"listbox\" aria-live=\"polite\">\n        <cdk-virtual-scroll-viewport\n            #virtualScrolling\n            [itemSize]=\"itemSize\"\n            minBufferPx=\"500\"\n            maxBufferPx=\"750\"\n            [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n            <ng-container *ngIf=\"!groupBy\">\n                <eui-autocomplete-option\n                    *cdkVirtualFor=\"let autocompleteOption of autocompleteOptions | async; let i = index; trackBy: optionsTrackByFn\"\n                    [isActive]=\"selectedOptionIndex === i\"\n                    [isDisabled]=\"autocompleteOption.isDisabled\"\n                    [attr.aria-disabled]=\"autocompleteOption.isDisabled\"\n                    [euiVariant]=\"autocompleteOption.typeClass\"\n                    (click)=\"onOptionSelected(autocompleteOption)\">\n                    <ng-container *ngIf=\"!autocompleteOptionTemplate\">\n                        <span *ngIf=\"autocompleteOption.iconClass\" class=\"{{ autocompleteOption.iconClass }}\"></span>\n                        {{ autocompleteOption.label }}\n                    </ng-container>\n                    <ng-container *ngIf=\"autocompleteOptionTemplate\">\n                        <ng-template\n                            [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\">\n                        </ng-template>\n                    </ng-container>\n                </eui-autocomplete-option>\n            </ng-container>\n            <ng-container *ngIf=\"groupBy\">\n                <ng-container *ngFor=\"let distinctOptionGroup of distinctOptionGroups; let i = index; trackBy: groupsTrackByFn\">\n                    <eui-autocomplete-option-group *ngIf=\"(groupedOptions | async)[distinctOptionGroup].options.length > 0\" [label]=\"distinctOptionGroup\">\n                        <div class=\"eui-autocomplete-option-group__label\">\n                            <ng-container *ngIf=\"autocompleteOptGroupTemplate\">\n                                <ng-template\n                                    [ngTemplateOutlet]=\"autocompleteOptGroupTemplate\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: { label: distinctOptionGroup } }\">\n                                </ng-template>\n                            </ng-container>\n                            <ng-container *ngIf=\"!autocompleteOptGroupTemplate\">\n                                {{ distinctOptionGroup }}\n                            </ng-container>\n                        </div>\n                        <div class=\"eui-autocomplete-option-group__options\">\n                            <ng-container *ngFor=\"let autocompleteOption of (groupedOptions | async)[distinctOptionGroup].options; let j = index; trackBy: optionsTrackByFn\">\n                                <eui-autocomplete-option\n                                    isGroupItem\n                                    [isActive]=\"selectedOptionIndex === (groupedOptions | async)[distinctOptionGroup].ancestorLength + j\"\n                                    [isDisabled]=\"autocompleteOption.isDisabled\"\n                                    [attr.aria-disabled]=\"autocompleteOption.isDisabled\"\n                                    [euiVariant]=\"autocompleteOption.typeClass\"\n                                    (click)=\"onOptionSelected(autocompleteOption)\">\n                                    <ng-container *ngIf=\"!autocompleteOptionTemplate\">\n                                        <span *ngIf=\"autocompleteOption.iconClass\" class=\"{{ autocompleteOption.iconClass }}\"></span>\n                                        {{ autocompleteOption.label }}\n                                    </ng-container>\n                                    <ng-container *ngIf=\"autocompleteOptionTemplate\">\n                                        <ng-template\n                                            [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\">\n                                        </ng-template>\n                                    </ng-container>\n                                </eui-autocomplete-option>\n                            </ng-container>\n                        </div>\n                    </eui-autocomplete-option-group>\n                </ng-container>\n            </ng-container>\n        </cdk-virtual-scroll-viewport>\n    </div>  \n</ng-template>\n", styles: [".eui-autocomplete,.eui-autocomplete__wrapper{width:100%}.eui-autocomplete__wrapper .eui-autocomplete__input-container{display:flex;width:100%}.eui-autocomplete__panel-container .eui-autocomplete__panel{box-shadow:var(--eui-base-shadow-8);width:100%}.eui-autocomplete__panel-container.eui-autocomplete__panel-container--no-option .eui-autocomplete__panel{box-shadow:none}.eui-autocomplete.eui-autocomplete--chips-position-bottom .eui-autocomplete__input-container{margin-bottom:var(--eui-base-spacing-2xs)}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-50);border-radius:var(--eui-base-border-radius);padding:0 var(--eui-base-spacing-2xs)}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list,.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper .eui-chip-list__chip-container{display:block}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper .eui-chip-list__chip-container .eui-chip{margin-bottom:0;margin-top:var(--eui-base-spacing-2xs)}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list .eui-input-text{border:0;min-height:calc(var(--eui-base-spacing-2xl) + var(--eui-base-spacing-2xs) - 2px)}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list euichiplistappendcontent{flex-grow:1}button~.eui-autocomplete .eui-autocomplete__input,.eui-input-group-addon-item~.eui-autocomplete .eui-autocomplete__input{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.eui-autocomplete:has(+button) .eui-autocomplete__input{border-top-right-radius:0;border-bottom-right-radius:0}.eui-autocomplete:has(+.eui-input-group-addon-item) .eui-autocomplete__input{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.eui-autocomplete-option-group .eui-autocomplete-option-group__label{align-items:center;background-color:var(--eui-base-color-grey-10);border-bottom:1px solid var(--eui-base-color-grey-10);border-left:var(--eui-base-border-state-width) solid transparent;cursor:pointer;display:flex;font-weight:700;min-height:var(--eui-base-spacing-3xl);padding-left:var(--eui-base-spacing-s);padding-right:var(--eui-base-spacing-s)}.eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-icon,.eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-icon-svg,.eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-flag-icon{margin-right:var(--eui-base-spacing-2xs)}.eui-autocomplete-option{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);border-left:var(--eui-base-border-state-width) solid transparent;cursor:pointer;display:flex;min-height:var(--eui-base-spacing-3xl);padding-left:var(--eui-base-spacing-s);padding-right:var(--eui-base-spacing-s)}.eui-autocomplete-option:hover{background-color:var(--eui-base-color-grey-5)}.eui-autocomplete-option--group-item{padding-left:var(--eui-base-spacing-l)}.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-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)}.eui-autocomplete-option--active{background-color:var(--eui-base-color-grey-5);outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px}.eui-autocomplete-option--disabled{cursor:default;opacity:.4}.eui-autocomplete-option--disabled:hover{background:none}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i2.LiveAnnouncer }, { type: i3.ScrollDispatcher }, { type: i4.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
-                }] }, { type: i2.ScrollDispatcher }, { type: i0.ElementRef }], propDecorators: { toggleLinkMoreLabel: [{
+                }] }], propDecorators: { autocompleteData: [{
                 type: Input
-            }], toggleLinkLessLabel: [{
+            }], visibleOptions: [{
+                type: Input
+            }], matching: [{
                 type: Input
-            }], autocompleteData: [{
+            }], placeholder: [{
                 type: Input
             }], autocompleteDataSelected: [{
                 type: Input
@@ -665,32 +853,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
                 type: Input
             }], itemsSortOrder: [{
                 type: Input
-            }], placeholder: [{
-                type: Input
-            }], matching: [{
-                type: Input
             }], chipsPosition: [{
                 type: Input
-            }], panelWidth: [{
+            }], groupBy: [{
                 type: Input
-            }], visibleOptions: [{
+            }], toggleLinkMoreLabel: [{
+                type: Input
+            }], toggleLinkLessLabel: [{
                 type: Input
             }], classList: [{
                 type: Input
-            }], groupBy: [{
+            }], panelWidth: [{
                 type: Input
             }], dragAndDropSourceName: [{
                 type: Input
             }], dragAndDropConnectedTo: [{
                 type: Input
-            }], clear: [{
-                type: Output
+            }], isFreeValueAllowed: [{
+                type: Input
+            }], isReadonly: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], hasChips: [{
+                type: Input
+            }], isAsync: [{
+                type: Input
+            }], isChipsSorted: [{
+                type: Input
+            }], isItemsSorted: [{
+                type: Input
+            }], isChipsRemovable: [{
+                type: Input
+            }], isDuplicateValueAllowed: [{
+                type: Input
+            }], isAddOnBlur: [{
+                type: Input
+            }], isForceSelection: [{
+                type: Input
+            }], maxVisibleChipsCount: [{
+                type: Input
+            }], chipsLabelTruncateCount: [{
+                type: Input
+            }], isMaxVisibleChipsOpened: [{
+                type: Input
+            }], isChipsDragAndDrop: [{
+                type: Input
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], templates: [{
+                type: ContentChildren,
+                args: [EuiTemplateDirective]
+            }], templatePortalContent: [{
+                type: ViewChild,
+                args: ['templatePortalContent']
+            }], inputContainerRef: [{
+                type: ViewChild,
+                args: ['inputContainerRef']
+            }], virtualScrolling: [{
+                type: ViewChild,
+                args: ['virtualScrolling']
+            }], input: [{
+                type: ViewChild,
+                args: ['input', { read: ElementRef }]
             }], panelClose: [{
                 type: Output
             }], panelOpen: [{
                 type: Output
+            }], inputFocus: [{
+                type: Output
             }], inputBlur: [{
                 type: Output
+            }], clear: [{
+                type: Output
             }], selectionChange: [{
                 type: Output
             }], itemAdd: [{
@@ -705,81 +941,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
                 type: Output
             }], chipDrop: [{
                 type: Output
-            }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], templates: [{
-                type: ContentChildren,
-                args: [EuiTemplateDirective]
-            }], autocompleteInput: [{
-                type: ViewChild,
-                args: ['autocompleteInput', { read: ElementRef }]
-            }], autocompleteInputTrigger: [{
-                type: ViewChild,
-                args: ['autocompleteInputTrigger', { read: MatAutocompleteTrigger }]
-            }], matAutocomplete: [{
-                type: ViewChild,
-                args: ['auto']
-            }], chipList: [{
-                type: ViewChild,
-                args: ['chipList']
-            }], virtualScrolling: [{
-                type: ViewChild,
-                args: ['virtualScrolling']
-            }], hasChips: [{
-                type: Input
-            }], isGrid: [{
-                type: Input
-            }], async: [{
-                type: Input
-            }], addOnBlur: [{
-                type: Input
-            }], isFreeValueAllowed: [{
-                type: Input
-            }], isDuplicateValueAllowed: [{
-                type: Input
-            }], isLoading: [{
-                type: Input
-            }], isChipsRemovable: [{
-                type: Input
-            }], maxVisibleChipsCount: [{
-                type: Input
-            }], chipsLabelTruncateCount: [{
-                type: Input
-            }], isMaxVisibleChipsOpened: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], isChipsSorted: [{
-                type: Input
-            }], isItemsSorted: [{
-                type: Input
-            }], isChipsDragAndDrop: [{
-                type: Input
-            }], isForceSelection: [{
-                type: Input
-            }], autoActiveFirstOption: [{
-                type: Input
             }] } });
 
 class EuiAutocompleteModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: EuiAutocompleteModule, declarations: [EuiAutocompleteComponent], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: EuiAutocompleteModule, declarations: [EuiAutocompleteComponent,
+            EuiAutocompleteOptionComponent,
+            EuiAutocompleteOptionGroupComponent], imports: [CommonModule,
             ReactiveFormsModule,
-            MatAutocompleteModule,
-            EuiChipListModule,
-            EuiChipModule,
-            EuiIconModule,
+            OverlayModule,
             EuiInputTextModule,
-            ScrollingModule], exports: [EuiAutocompleteComponent] }); }
+            ScrollingModule,
+            A11yModule,
+            EuiChipListModule,
+            EuiChipModule], exports: [EuiAutocompleteComponent] }); }
     /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAutocompleteModule, imports: [CommonModule,
             ReactiveFormsModule,
-            MatAutocompleteModule,
-            EuiChipListModule,
-            EuiChipModule,
-            EuiIconModule,
+            OverlayModule,
             EuiInputTextModule,
-            ScrollingModule] }); }
+            ScrollingModule,
+            A11yModule,
+            EuiChipListModule,
+            EuiChipModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAutocompleteModule, decorators: [{
             type: NgModule,
@@ -787,14 +970,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
                     imports: [
                         CommonModule,
                         ReactiveFormsModule,
-                        MatAutocompleteModule,
-                        EuiChipListModule,
-                        EuiChipModule,
-                        EuiIconModule,
+                        OverlayModule,
                         EuiInputTextModule,
                         ScrollingModule,
+                        A11yModule,
+                        EuiChipListModule,
+                        EuiChipModule,
+                    ],
+                    declarations: [
+                        EuiAutocompleteComponent,
+                        EuiAutocompleteOptionComponent,
+                        EuiAutocompleteOptionGroupComponent,
                     ],
-                    declarations: [EuiAutocompleteComponent],
                     exports: [EuiAutocompleteComponent],
                 }]
         }] });
@@ -803,5 +990,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { EuiAutoCompleteItem, EuiAutocompleteComponent, EuiAutocompleteModule };
+export { EuiAutoCompleteItem, EuiAutocompleteComponent, EuiAutocompleteModule, euiAutocompleteForceSelectionFromData };
 //# sourceMappingURL=eui-components-eui-autocomplete.mjs.map