@eui/components 15.5.3 → 15.5.4-snapshot-1699920889521

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

@@ -5,7 +5,7 @@ import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import { takeUntil, startWith, skip } from 'rxjs/operators';
-import { BehaviorSubject, Subject, Subscription, fromEvent, filter, of } from 'rxjs';
+import { BehaviorSubject, Subject, Subscription, fromEvent, filter } from 'rxjs';
 import * as i4 from '@angular/material/autocomplete';
 import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
 import { uniqueId } from '@eui/core';
@@ -87,6 +87,7 @@ class EuiAutocompleteComponent extends BaseDirective {
         this.autocompleteControl = new FormControl();
         this.autocompleteOptions = new BehaviorSubject(this.autocompleteData);
         this.chips = [];
+        this.groupedOptions = new BehaviorSubject({});
         this.autocompleteId = `eui-autocomplete-${uniqueId()}`;
         this.isDisabled = false;
         this.selectedOptionIndex = -1;
@@ -258,11 +259,15 @@ class EuiAutocompleteComponent extends BaseDirective {
         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.selectedOptionIndex = 0;
             this.fieldValue = value;
             this.inputValueHandler(value);
         });
         if (this.groupBy) {
             this.groupingHandler();
+            this.autocompleteOptions.pipe(takeUntil(this.destroy$)).subscribe((options) => {
+                this.groupingHandler();
+            });
         }
     }
     // TODO: Refactor ngDoCheck when euiInput Text will refactor this hooks
@@ -295,27 +300,26 @@ class EuiAutocompleteComponent extends BaseDirective {
         return this.visibleOptions;
     }
     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;
             }
         }
+        else {
+            return this.autocompleteOptions.value.length >= this.visibleOptions ?
+                this.visibleOptions * this.itemSize :
+                this.autocompleteOptions.value.length * this.itemSize;
+        }
     }
     addOnBlurHandler(event) {
         if (this.addOnBlur) {
@@ -449,7 +453,7 @@ class EuiAutocompleteComponent extends BaseDirective {
             this.open.emit();
         }
         let visibleRangeStart = 0;
-        let visibleRangeEnd = 4;
+        let visibleRangeEnd = this.visibleOptions - 1;
         if (this.autocompleteOptions.value.length < this.nbOptionsVisible) {
             visibleRangeEnd = this.autocompleteOptions.value.length - 1;
         }
@@ -467,8 +471,18 @@ class EuiAutocompleteComponent extends BaseDirective {
                 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);
+                    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++;
                     }
@@ -667,33 +681,27 @@ 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),
-                };
-            });
-        });
+        const distinctGroups = this.autocompleteData.map(item => this.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 = this.autocompleteOptions.value.filter(option => this.groupBy.split('.').reduce((prev, curr) => (prev ? prev[curr] : null), option || self) === group);
+            if (this.isItemsSorted) {
+                o = this.orderItems(o, this.itemsSortOrder);
+            }
+            groupedOptions[group] = { options: o, ancestorLength };
+            ancestorLength += o.length;
+        }
+        this.groupedOptions.next(groupedOptions);
+        this.distinctOptionGroups = distinctOptionGroups;
     }
 }
 /** @nocollapse */ EuiAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", 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 */ EuiAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: { closed: "closed", opened: "opened", selectionChanged: "selectionChanged", itemAdded: "itemAdded", itemRemoved: "itemRemoved", inputChanged: "inputChanged", chipDragStarted: "chipDragStarted", chipDragReleased: "chipDragReleased", chipDropped: "chipDropped", clear: "clear", close: "close", open: "open", blur: "blur", selectionChange: "selectionChange", itemAdd: "itemAdd", itemRemove: "itemRemove", inputChange: "inputChange", chipDragStart: "chipDragStart", chipDragRelease: "chipDragRelease", chipDrop: "chipDrop" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], viewQueries: [{ propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true, read: ElementRef }, { propertyName: "autocompleteInputTrigger", first: true, predicate: ["autocompleteInputTrigger"], descendants: true, read: MatAutocompleteTrigger }, { propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }, { propertyName: "chipList", first: true, predicate: ["chipList"], descendants: true }, { propertyName: "virtualScrolling", first: true, predicate: ["virtualScrolling"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-autocomplete__container\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\n    <div class=\"eui-autocomplete__wrapper eui-autocomplete__wrapper--{{ chipsPosition }}\">\n        <ng-template [ngIf]=\"chipsPosition === 'bottom'\">\n            <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n        </ng-template>\n\n        <ng-container *ngIf=\"hasChips\">\n            <eui-chip-list\n                #chipList\n                [chips]=\"chips\"\n                [isGrid]=\"isChipsGrid\"\n                [isChipsDragAndDrop]=\"isChipsDragAndDrop\"\n                [isChipsRemovable]=\"isChipsRemovable && !readonly\"\n                [isChipsSorted]=\"isChipsSorted\"\n                [chipsSortOrder]=\"chipsSortOrder\"\n                [maxVisibleChipsCount]=\"maxVisibleChipsCount\"\n                [isMaxVisibleChipsOpened]=\"isMaxVisibleChipsOpened\"\n                [toggleLinkMoreLabel]=\"toggleLinkMoreLabel\"\n                [toggleLinkLessLabel]=\"toggleLinkLessLabel\"\n                [chipsLabelTruncateCount]=\"chipsLabelTruncateCount\"\n                [dragAndDropSourceName]=\"dragAndDropSourceName\"\n                [dragAndDropConnectedTo]=\"dragAndDropConnectedTo\"\n                (chipDropped)=\"onChipDropped($event)\"\n                (chipDragStarted)=\"onChipDragStarted($event)\"\n                (chipDragReleased)=\"onChipDragReleased($event)\"\n                (chipRemove)=\"onChipRemove($event)\"\n                (chiplistFocus)=\"onChipListFocus()\">\n                <euiChipListAppendContent>\n                    <ng-template [ngIf]=\"chipsPosition === 'inside'\">\n                        <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n                    </ng-template>\n                </euiChipListAppendContent>\n            </eui-chip-list>\n        </ng-container>\n\n        <ng-template [ngIf]=\"chipsPosition === 'top' || !hasChips\">\n            <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n        </ng-template>\n\n        <ng-template #field>\n            <span class=\"eui-autocomplete__field-wrapper\">\n                <ng-container *ngIf=\"!hasChips\">\n                    <input\n                        [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n                        [euiLoading]=\"isLoading\"\n                        euiInputText\n                        #autocompleteInput\n                        #autocompleteInputTrigger\n                        placeholder=\"{{ placeholder }}\"\n                        [matAutocompleteDisabled]=\"readonly\"\n                        [formControl]=\"autocompleteControl\"\n                        [matAutocomplete]=\"auto\"\n                        [readonly]=\"readonly\"\n                        [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n                        (clear)=\"onClear()\"\n                        (focusout)=\"onFocusOut()\"\n                        role=\"combobox\"\n                        aria-autocomplete=\"both\"\n                        aria-haspopup=\"true\"\n                        aria-controls=\"autocompleteId\" />\n                </ng-container>\n                <ng-container *ngIf=\"hasChips\">\n                    <input\n                        [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n                        [euiLoading]=\"isLoading\"\n                        euiInputText\n                        #autocompleteInput\n                        #autocompleteInputTrigger\n                        placeholder=\"{{ placeholder }}\"\n                        [matAutocompleteDisabled]=\"readonly\"\n                        [formControl]=\"autocompleteControl\"\n                        [matAutocomplete]=\"auto\"\n                        [matAutocompleteConnectedTo]=\"chipsPosition === 'inside' ? origin : null\"\n                        [readonly]=\"readonly\"\n                        [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n                        (clear)=\"onClear()\"\n                        (focusout)=\"onFocusOut(); addOnBlurHandler($event)\"\n                        (keydown.enter)=\"addOnEnterHandler()\"\n                        (keydown.backspace)=\"onKeyDownBackspace()\"\n                        role=\"combobox\"\n                        aria-autocomplete=\"both\"\n                        aria-haspopup=\"true\"\n                        aria-controls=\"autocompleteId\" />\n                </ng-container>\n\n                <mat-autocomplete\n                    [id]=\"autocompleteId\"\n                    #auto=\"matAutocomplete\"\n                    [panelWidth]=\"panelWidth === 'auto' ? null : panelWidth\"\n                    [class]=\"classList\"\n                    [autoActiveFirstOption]=\"autoActiveFirstOption\"\n                    [hideSingleSelectionIndicator]=\"true\"\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;font-family:var(--eui-base-font-family);font-size:var(--eui-base-font-size);font-weight:700;margin-bottom:0}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom .mat-mdc-optgroup-label{display:none}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom-optgroup-wrapper{align-items:center;background-color:var(--eui-base-color-grey-10);color:var(--eui-base-color-grey-80);display:flex;font-size:var(--eui-base-font-size);font-weight:700;height:auto;line-height:var(--eui-base-spacing-3xl);min-height:var(--eui-base-spacing-3xl);padding:0 var(--eui-base-spacing-s)}.mat-mdc-autocomplete-panel .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: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i5.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i4.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "component", type: i6.EuiChipListComponent, selector: "eui-chip-list, div[euiChipList], ul[euiChipList]", inputs: ["chips", "toggleLinkMoreLabel", "toggleLinkLessLabel", "chipsSortOrder", "dragAndDropSourceName", "dragAndDropConnectedTo", "ariaLabel", "dropListOrientation", "isSquared", "isChipsRemovable", "maxVisibleChipsCount", "chipsLabelTruncateCount", "isMaxVisibleChipsOpened", "isChipsSorted", "isChipsDragAndDrop", "isGrid"], outputs: ["chipsInit", "chipRemove", "chipDragStarted", "chipDragReleased", "chipDropped", "chiplistFocus"] }, { kind: "directive", type: i6.EuiChipListAppendContentDirective, selector: "euiChipListAppendContent" }, { kind: "component", type: i7.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["class", "isInvalid"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ EuiAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: { closed: "closed", opened: "opened", selectionChanged: "selectionChanged", itemAdded: "itemAdded", itemRemoved: "itemRemoved", inputChanged: "inputChanged", chipDragStarted: "chipDragStarted", chipDragReleased: "chipDragReleased", chipDropped: "chipDropped", clear: "clear", close: "close", open: "open", blur: "blur", selectionChange: "selectionChange", itemAdd: "itemAdd", itemRemove: "itemRemove", inputChange: "inputChange", chipDragStart: "chipDragStart", chipDragRelease: "chipDragRelease", chipDrop: "chipDrop" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], viewQueries: [{ propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true, read: ElementRef }, { propertyName: "autocompleteInputTrigger", first: true, predicate: ["autocompleteInputTrigger"], descendants: true, read: MatAutocompleteTrigger }, { propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }, { propertyName: "chipList", first: true, predicate: ["chipList"], descendants: true }, { propertyName: "virtualScrolling", first: true, predicate: ["virtualScrolling"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-autocomplete__container\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\n    <div class=\"eui-autocomplete__wrapper eui-autocomplete__wrapper--{{ chipsPosition }}\">\n        <ng-template [ngIf]=\"chipsPosition === 'bottom'\">\n            <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n        </ng-template>\n\n        <ng-container *ngIf=\"hasChips\">\n            <eui-chip-list\n                #chipList\n                [chips]=\"chips\"\n                [isGrid]=\"isChipsGrid\"\n                [isChipsDragAndDrop]=\"isChipsDragAndDrop\"\n                [isChipsRemovable]=\"isChipsRemovable && !readonly\"\n                [isChipsSorted]=\"isChipsSorted\"\n                [chipsSortOrder]=\"chipsSortOrder\"\n                [maxVisibleChipsCount]=\"maxVisibleChipsCount\"\n                [isMaxVisibleChipsOpened]=\"isMaxVisibleChipsOpened\"\n                [toggleLinkMoreLabel]=\"toggleLinkMoreLabel\"\n                [toggleLinkLessLabel]=\"toggleLinkLessLabel\"\n                [chipsLabelTruncateCount]=\"chipsLabelTruncateCount\"\n                [dragAndDropSourceName]=\"dragAndDropSourceName\"\n                [dragAndDropConnectedTo]=\"dragAndDropConnectedTo\"\n                (chipDropped)=\"onChipDropped($event)\"\n                (chipDragStarted)=\"onChipDragStarted($event)\"\n                (chipDragReleased)=\"onChipDragReleased($event)\"\n                (chipRemove)=\"onChipRemove($event)\"\n                (chiplistFocus)=\"onChipListFocus()\">\n                <euiChipListAppendContent>\n                    <ng-template [ngIf]=\"chipsPosition === 'inside'\">\n                        <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n                    </ng-template>\n                </euiChipListAppendContent>\n            </eui-chip-list>\n        </ng-container>\n\n        <ng-template [ngIf]=\"chipsPosition === 'top' || !hasChips\">\n            <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n        </ng-template>\n\n        <ng-template #field>\n            <span class=\"eui-autocomplete__field-wrapper\">\n                <ng-container *ngIf=\"!hasChips\">\n                    <input\n                        [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n                        [euiLoading]=\"isLoading\"\n                        euiInputText\n                        #autocompleteInput\n                        #autocompleteInputTrigger\n                        placeholder=\"{{ placeholder }}\"\n                        [matAutocompleteDisabled]=\"readonly\"\n                        [formControl]=\"autocompleteControl\"\n                        [matAutocomplete]=\"auto\"\n                        [readonly]=\"readonly\"\n                        [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n                        (clear)=\"onClear()\"\n                        (focusout)=\"onFocusOut()\"\n                        role=\"combobox\"\n                        aria-autocomplete=\"both\"\n                        aria-haspopup=\"true\"\n                        aria-controls=\"autocompleteId\" />\n                </ng-container>\n                <ng-container *ngIf=\"hasChips\">\n                    <input\n                        [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n                        [euiLoading]=\"isLoading\"\n                        euiInputText\n                        #autocompleteInput\n                        #autocompleteInputTrigger\n                        placeholder=\"{{ placeholder }}\"\n                        [matAutocompleteDisabled]=\"readonly\"\n                        [formControl]=\"autocompleteControl\"\n                        [matAutocomplete]=\"auto\"\n                        [matAutocompleteConnectedTo]=\"chipsPosition === 'inside' ? origin : null\"\n                        [readonly]=\"readonly\"\n                        [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n                        (clear)=\"onClear()\"\n                        (focusout)=\"onFocusOut(); addOnBlurHandler($event)\"\n                        (keydown.enter)=\"addOnEnterHandler()\"\n                        (keydown.backspace)=\"onKeyDownBackspace()\"\n                        role=\"combobox\"\n                        aria-autocomplete=\"both\"\n                        aria-haspopup=\"true\"\n                        aria-controls=\"autocompleteId\" />\n                </ng-container>\n\n                <mat-autocomplete\n                    [id]=\"autocompleteId\"\n                    #auto=\"matAutocomplete\"\n                    [panelWidth]=\"panelWidth === 'auto' ? null : panelWidth\"\n                    [class]=\"classList\"\n                    [autoActiveFirstOption]=\"autoActiveFirstOption\"\n                    [hideSingleSelectionIndicator]=\"true\"\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; let i=index\">\n                                <mat-optgroup\n                                    [class.eui-autocomplete__optgroup--custom]=\"autocompleteOptGroupTemplate\"\n                                    *ngIf=\"(groupedOptions | async)[distinctOptionGroup].options.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 autocompleteOption of (groupedOptions | async)[distinctOptionGroup].options; trackBy: trackByFn; let ii=index\"\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]=\"selectedOptionIndex === (groupedOptions | async)[distinctOptionGroup].ancestorLength + ii\"\n                                        [value]=\"autocompleteOption\">\n                                        <span *ngIf=\"autocompleteOption.iconClass\" class=\"{{ autocompleteOption.iconClass }}\"></span>\n                                        <ng-container *ngIf=\"!autocompleteOptionTemplate\">\n                                            {{ autocompleteOption.label }}\n                                        </ng-container>\n                                        <ng-container *ngIf=\"autocompleteOptionTemplate\">\n                                            <ng-template\n                                                [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\"></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;font-family:var(--eui-base-font-family);font-size:var(--eui-base-font-size);font-weight:700;margin-bottom:0;min-height:var(--eui-base-spacing-3xl)}.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;font-size:var(--eui-base-font-size);font-weight:700;height:auto;line-height:var(--eui-base-spacing-3xl);min-height:var(--eui-base-spacing-3xl);padding:0 var(--eui-base-spacing-s)}.mat-mdc-autocomplete-panel .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: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i5.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i4.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "component", type: i6.EuiChipListComponent, selector: "eui-chip-list, div[euiChipList], ul[euiChipList]", inputs: ["chips", "toggleLinkMoreLabel", "toggleLinkLessLabel", "chipsSortOrder", "dragAndDropSourceName", "dragAndDropConnectedTo", "ariaLabel", "dropListOrientation", "isSquared", "isChipsRemovable", "maxVisibleChipsCount", "chipsLabelTruncateCount", "isMaxVisibleChipsOpened", "isChipsSorted", "isChipsDragAndDrop", "isGrid"], outputs: ["chipsInit", "chipRemove", "chipDragStarted", "chipDragReleased", "chipDropped", "chiplistFocus"] }, { kind: "directive", type: i6.EuiChipListAppendContentDirective, selector: "euiChipListAppendContent" }, { kind: "component", type: i7.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["class", "isInvalid"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: EuiAutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eui-autocomplete, input[euiAutocomplete]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-autocomplete__container\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\n    <div class=\"eui-autocomplete__wrapper eui-autocomplete__wrapper--{{ chipsPosition }}\">\n        <ng-template [ngIf]=\"chipsPosition === 'bottom'\">\n            <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n        </ng-template>\n\n        <ng-container *ngIf=\"hasChips\">\n            <eui-chip-list\n                #chipList\n                [chips]=\"chips\"\n                [isGrid]=\"isChipsGrid\"\n                [isChipsDragAndDrop]=\"isChipsDragAndDrop\"\n                [isChipsRemovable]=\"isChipsRemovable && !readonly\"\n                [isChipsSorted]=\"isChipsSorted\"\n                [chipsSortOrder]=\"chipsSortOrder\"\n                [maxVisibleChipsCount]=\"maxVisibleChipsCount\"\n                [isMaxVisibleChipsOpened]=\"isMaxVisibleChipsOpened\"\n                [toggleLinkMoreLabel]=\"toggleLinkMoreLabel\"\n                [toggleLinkLessLabel]=\"toggleLinkLessLabel\"\n                [chipsLabelTruncateCount]=\"chipsLabelTruncateCount\"\n                [dragAndDropSourceName]=\"dragAndDropSourceName\"\n                [dragAndDropConnectedTo]=\"dragAndDropConnectedTo\"\n                (chipDropped)=\"onChipDropped($event)\"\n                (chipDragStarted)=\"onChipDragStarted($event)\"\n                (chipDragReleased)=\"onChipDragReleased($event)\"\n                (chipRemove)=\"onChipRemove($event)\"\n                (chiplistFocus)=\"onChipListFocus()\">\n                <euiChipListAppendContent>\n                    <ng-template [ngIf]=\"chipsPosition === 'inside'\">\n                        <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n                    </ng-template>\n                </euiChipListAppendContent>\n            </eui-chip-list>\n        </ng-container>\n\n        <ng-template [ngIf]=\"chipsPosition === 'top' || !hasChips\">\n            <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n        </ng-template>\n\n        <ng-template #field>\n            <span class=\"eui-autocomplete__field-wrapper\">\n                <ng-container *ngIf=\"!hasChips\">\n                    <input\n                        [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n                        [euiLoading]=\"isLoading\"\n                        euiInputText\n                        #autocompleteInput\n                        #autocompleteInputTrigger\n                        placeholder=\"{{ placeholder }}\"\n                        [matAutocompleteDisabled]=\"readonly\"\n                        [formControl]=\"autocompleteControl\"\n                        [matAutocomplete]=\"auto\"\n                        [readonly]=\"readonly\"\n                        [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n                        (clear)=\"onClear()\"\n                        (focusout)=\"onFocusOut()\"\n                        role=\"combobox\"\n                        aria-autocomplete=\"both\"\n                        aria-haspopup=\"true\"\n                        aria-controls=\"autocompleteId\" />\n                </ng-container>\n                <ng-container *ngIf=\"hasChips\">\n                    <input\n                        [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n                        [euiLoading]=\"isLoading\"\n                        euiInputText\n                        #autocompleteInput\n                        #autocompleteInputTrigger\n                        placeholder=\"{{ placeholder }}\"\n                        [matAutocompleteDisabled]=\"readonly\"\n                        [formControl]=\"autocompleteControl\"\n                        [matAutocomplete]=\"auto\"\n                        [matAutocompleteConnectedTo]=\"chipsPosition === 'inside' ? origin : null\"\n                        [readonly]=\"readonly\"\n                        [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n                        (clear)=\"onClear()\"\n                        (focusout)=\"onFocusOut(); addOnBlurHandler($event)\"\n                        (keydown.enter)=\"addOnEnterHandler()\"\n                        (keydown.backspace)=\"onKeyDownBackspace()\"\n                        role=\"combobox\"\n                        aria-autocomplete=\"both\"\n                        aria-haspopup=\"true\"\n                        aria-controls=\"autocompleteId\" />\n                </ng-container>\n\n                <mat-autocomplete\n                    [id]=\"autocompleteId\"\n                    #auto=\"matAutocomplete\"\n                    [panelWidth]=\"panelWidth === 'auto' ? null : panelWidth\"\n                    [class]=\"classList\"\n                    [autoActiveFirstOption]=\"autoActiveFirstOption\"\n                    [hideSingleSelectionIndicator]=\"true\"\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;font-family:var(--eui-base-font-family);font-size:var(--eui-base-font-size);font-weight:700;margin-bottom:0}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom .mat-mdc-optgroup-label{display:none}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom-optgroup-wrapper{align-items:center;background-color:var(--eui-base-color-grey-10);color:var(--eui-base-color-grey-80);display:flex;font-size:var(--eui-base-font-size);font-weight:700;height:auto;line-height:var(--eui-base-spacing-3xl);min-height:var(--eui-base-spacing-3xl);padding:0 var(--eui-base-spacing-s)}.mat-mdc-autocomplete-panel .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"] }]
+            args: [{ selector: 'eui-autocomplete, input[euiAutocomplete]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-autocomplete__container\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\n    <div class=\"eui-autocomplete__wrapper eui-autocomplete__wrapper--{{ chipsPosition }}\">\n        <ng-template [ngIf]=\"chipsPosition === 'bottom'\">\n            <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n        </ng-template>\n\n        <ng-container *ngIf=\"hasChips\">\n            <eui-chip-list\n                #chipList\n                [chips]=\"chips\"\n                [isGrid]=\"isChipsGrid\"\n                [isChipsDragAndDrop]=\"isChipsDragAndDrop\"\n                [isChipsRemovable]=\"isChipsRemovable && !readonly\"\n                [isChipsSorted]=\"isChipsSorted\"\n                [chipsSortOrder]=\"chipsSortOrder\"\n                [maxVisibleChipsCount]=\"maxVisibleChipsCount\"\n                [isMaxVisibleChipsOpened]=\"isMaxVisibleChipsOpened\"\n                [toggleLinkMoreLabel]=\"toggleLinkMoreLabel\"\n                [toggleLinkLessLabel]=\"toggleLinkLessLabel\"\n                [chipsLabelTruncateCount]=\"chipsLabelTruncateCount\"\n                [dragAndDropSourceName]=\"dragAndDropSourceName\"\n                [dragAndDropConnectedTo]=\"dragAndDropConnectedTo\"\n                (chipDropped)=\"onChipDropped($event)\"\n                (chipDragStarted)=\"onChipDragStarted($event)\"\n                (chipDragReleased)=\"onChipDragReleased($event)\"\n                (chipRemove)=\"onChipRemove($event)\"\n                (chiplistFocus)=\"onChipListFocus()\">\n                <euiChipListAppendContent>\n                    <ng-template [ngIf]=\"chipsPosition === 'inside'\">\n                        <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n                    </ng-template>\n                </euiChipListAppendContent>\n            </eui-chip-list>\n        </ng-container>\n\n        <ng-template [ngIf]=\"chipsPosition === 'top' || !hasChips\">\n            <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n        </ng-template>\n\n        <ng-template #field>\n            <span class=\"eui-autocomplete__field-wrapper\">\n                <ng-container *ngIf=\"!hasChips\">\n                    <input\n                        [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n                        [euiLoading]=\"isLoading\"\n                        euiInputText\n                        #autocompleteInput\n                        #autocompleteInputTrigger\n                        placeholder=\"{{ placeholder }}\"\n                        [matAutocompleteDisabled]=\"readonly\"\n                        [formControl]=\"autocompleteControl\"\n                        [matAutocomplete]=\"auto\"\n                        [readonly]=\"readonly\"\n                        [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n                        (clear)=\"onClear()\"\n                        (focusout)=\"onFocusOut()\"\n                        role=\"combobox\"\n                        aria-autocomplete=\"both\"\n                        aria-haspopup=\"true\"\n                        aria-controls=\"autocompleteId\" />\n                </ng-container>\n                <ng-container *ngIf=\"hasChips\">\n                    <input\n                        [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n                        [euiLoading]=\"isLoading\"\n                        euiInputText\n                        #autocompleteInput\n                        #autocompleteInputTrigger\n                        placeholder=\"{{ placeholder }}\"\n                        [matAutocompleteDisabled]=\"readonly\"\n                        [formControl]=\"autocompleteControl\"\n                        [matAutocomplete]=\"auto\"\n                        [matAutocompleteConnectedTo]=\"chipsPosition === 'inside' ? origin : null\"\n                        [readonly]=\"readonly\"\n                        [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n                        (clear)=\"onClear()\"\n                        (focusout)=\"onFocusOut(); addOnBlurHandler($event)\"\n                        (keydown.enter)=\"addOnEnterHandler()\"\n                        (keydown.backspace)=\"onKeyDownBackspace()\"\n                        role=\"combobox\"\n                        aria-autocomplete=\"both\"\n                        aria-haspopup=\"true\"\n                        aria-controls=\"autocompleteId\" />\n                </ng-container>\n\n                <mat-autocomplete\n                    [id]=\"autocompleteId\"\n                    #auto=\"matAutocomplete\"\n                    [panelWidth]=\"panelWidth === 'auto' ? null : panelWidth\"\n                    [class]=\"classList\"\n                    [autoActiveFirstOption]=\"autoActiveFirstOption\"\n                    [hideSingleSelectionIndicator]=\"true\"\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; let i=index\">\n                                <mat-optgroup\n                                    [class.eui-autocomplete__optgroup--custom]=\"autocompleteOptGroupTemplate\"\n                                    *ngIf=\"(groupedOptions | async)[distinctOptionGroup].options.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 autocompleteOption of (groupedOptions | async)[distinctOptionGroup].options; trackBy: trackByFn; let ii=index\"\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]=\"selectedOptionIndex === (groupedOptions | async)[distinctOptionGroup].ancestorLength + ii\"\n                                        [value]=\"autocompleteOption\">\n                                        <span *ngIf=\"autocompleteOption.iconClass\" class=\"{{ autocompleteOption.iconClass }}\"></span>\n                                        <ng-container *ngIf=\"!autocompleteOptionTemplate\">\n                                            {{ autocompleteOption.label }}\n                                        </ng-container>\n                                        <ng-container *ngIf=\"autocompleteOptionTemplate\">\n                                            <ng-template\n                                                [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\"></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;font-family:var(--eui-base-font-family);font-size:var(--eui-base-font-size);font-weight:700;margin-bottom:0;min-height:var(--eui-base-spacing-3xl)}.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;font-size:var(--eui-base-font-size);font-weight:700;height:auto;line-height:var(--eui-base-spacing-3xl);min-height:var(--eui-base-spacing-3xl);padding:0 var(--eui-base-spacing-s)}.mat-mdc-autocomplete-panel .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: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.NgControl, decorators: [{
                     type: Self
                 }, {