@eui/components 17.0.0-next.10 → 17.0.0-next.11

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

@@ -33,7 +33,7 @@ class EuiAutoCompleteItem {
 
 class EuiAutocompleteComponent extends BaseDirective {
     get cssClasses() {
-        return [this.hasChips ? `eui-autocomplete--has-chips` : ``, super.getCssClasses('eui-autocomplete')].join(' ').trim();
+        return [this.hasChips ? 'eui-autocomplete--has-chips' : '', super.getCssClasses('eui-autocomplete')].join(' ').trim();
     }
     get hasChips() {
         return this._hasChips;
@@ -163,32 +163,17 @@ class EuiAutocompleteComponent extends BaseDirective {
         this.chipsPosition = 'top';
         this.visibleOptions = 5;
         this.dragAndDropConnectedTo = [];
-        /** @deprecated This will be removed in next version of eui */
-        this.closed = new EventEmitter();
-        /** @deprecated This will be removed in next version of eui */
-        this.opened = new EventEmitter();
-        /** @deprecated This will be removed in next version of eui */
-        this.selectionChanged = new EventEmitter();
-        /** @deprecated This will be removed in next version of eui */
-        this.itemAdded = new EventEmitter();
-        /** @deprecated This will be removed in next version of eui */
-        this.itemRemoved = new EventEmitter();
-        /** @deprecated This will be removed in next version of eui */
-        this.inputChanged = new EventEmitter();
-        /** @deprecated This will be removed in next version of eui */
-        this.chipDragStarted = new EventEmitter();
-        /** @deprecated This will be removed in next version of eui */
-        this.chipDragReleased = new EventEmitter();
-        /** @deprecated This will be removed in next version of eui */
-        this.chipDropped = new EventEmitter();
         // euiInputText does not send event when the the field is cleared
         this.clear = new EventEmitter();
-        // eslint-disable-next-line @angular-eslint/no-output-native
+        /**@deprecated will be replaced in the next eUI version by panelClose */
         this.close = new EventEmitter();
-        // eslint-disable-next-line @angular-eslint/no-output-native
+        this.panelClose = new EventEmitter();
+        /**@deprecated will be replaced in the next eUI version by panelOpen */
         this.open = new EventEmitter();
-        // eslint-disable-next-line @angular-eslint/no-output-native
+        this.panelOpen = new EventEmitter();
+        /**@deprecated will be replaced in the next eUI version by inputBlur */
         this.blur = new EventEmitter();
+        this.inputBlur = new EventEmitter();
         this.selectionChange = new EventEmitter();
         this.itemAdd = new EventEmitter();
         this.itemRemove = new EventEmitter();
@@ -332,9 +317,7 @@ class EuiAutocompleteComponent extends BaseDirective {
                     this.autocompleteInput.nativeElement.value = '';
                     this.autocompleteControl.setValue(null);
                     this.autocompleteInputTrigger.closePanel();
-                    this.selectionChanged.emit(this.autocompleteDataSelected);
                     this.selectionChange.emit(this.autocompleteDataSelected);
-                    this.itemAdded.emit(new EuiAutoCompleteItem({ label: newValue.trim() }));
                     this.itemAdd.emit(new EuiAutoCompleteItem({ label: newValue.trim() }));
                 }
             }
@@ -355,9 +338,7 @@ class EuiAutocompleteComponent extends BaseDirective {
         if (this.hasChips) {
             this.autocompleteOptions.next(this._filter(''));
         }
-        this.selectionChanged.emit(this.autocompleteDataSelected);
         this.selectionChange.emit(this.autocompleteDataSelected);
-        this.itemAdded.emit(value);
         this.itemAdd.emit(value);
     }
     onChipRemove(e) {
@@ -371,9 +352,7 @@ class EuiAutocompleteComponent extends BaseDirective {
             this.autocompleteOptions.next(this.isItemsSorted ? this.orderItems(this._filter(''), this.itemsSortOrder) : this._filter(''));
         }
         this.onChange(this.autocompleteDataSelected.length > 0 ? this.autocompleteDataSelected : null);
-        this.selectionChanged.emit(this.autocompleteDataSelected);
         this.selectionChange.emit(this.autocompleteDataSelected);
-        this.itemRemoved.emit(autocompleteDataRemoved);
         this.itemRemove.emit(autocompleteDataRemoved);
         if (!(e.removed instanceof EuiChip) &&
             e.removed.event instanceof KeyboardEvent &&
@@ -385,22 +364,6 @@ class EuiAutocompleteComponent extends BaseDirective {
                 .focus();
         }
     }
-    /** @deprecated This will be removed in eUI-14 */
-    onClick() {
-        if (!this.readonly) {
-            if (this.nbClick > 0) {
-                this.matAutocomplete.isOpen ? this.autocompleteInputTrigger.closePanel() : this.autocompleteInputTrigger.openPanel();
-            }
-            this.nbClick += 1;
-        }
-    }
-    /** @deprecated This will be removed in eUI-14 */
-    resetNbClick(e) {
-        if (!e.relatedTarget || e.relatedTarget['className'].indexOf('mat-option') === -1) {
-            this.nbClick = 0;
-        }
-        this.onTouch();
-    }
     onFocus() {
         if (this.isForceSelection) {
             this.autocompleteControl.setValue(null);
@@ -415,6 +378,7 @@ class EuiAutocompleteComponent extends BaseDirective {
             }, 250);
         }
         this.blur.emit();
+        this.inputBlur.emit();
     }
     trackByFn(index) {
         return index;
@@ -422,8 +386,8 @@ class EuiAutocompleteComponent extends BaseDirective {
     onClose() {
         this.scrollDispatcherSubscription.unsubscribe();
         if (!this.ignoreOpenCloseEvents) {
-            this.closed.emit();
             this.close.emit();
+            this.panelClose.emit();
         }
         this.virtualScrolling.scrollToIndex(0);
         this.selectedOptionIndex = -1;
@@ -439,8 +403,8 @@ class EuiAutocompleteComponent extends BaseDirective {
             }
         });
         if (!this.ignoreOpenCloseEvents) {
-            this.opened.emit();
             this.open.emit();
+            this.panelOpen.emit();
         }
         let visibleRangeStart = 0;
         let visibleRangeEnd = 4;
@@ -510,17 +474,13 @@ class EuiAutocompleteComponent extends BaseDirective {
         this.chips = this.mapAsChip();
         this.autocompleteOptions.next(this._filter(''));
         this.onChange(this.autocompleteDataSelected.length > 0 ? this.autocompleteDataSelected : null);
-        this.selectionChanged.emit(this.autocompleteDataSelected);
         this.selectionChange.emit(this.autocompleteDataSelected);
-        this.chipDropped.emit(e);
         this.chipDrop.emit(e);
     }
     onChipDragStarted(e) {
-        this.chipDragStarted.emit(e);
         this.chipDragStart.emit(e);
     }
     onChipDragReleased(e) {
-        this.chipDragReleased.emit(e);
         this.chipDragRelease.emit(e);
     }
     onClear() {
@@ -570,7 +530,6 @@ class EuiAutocompleteComponent extends BaseDirective {
                 }
             }
         }
-        this.inputChanged.emit(value);
         this.inputChange.emit(value);
         if (!this.async) {
             const filterValue = typeof value === 'string' || !value ? value : value.label;
@@ -681,10 +640,10 @@ class EuiAutocompleteComponent extends BaseDirective {
     _calculateNewItemSize(baseFontSize = '16px') {
         return (parseInt(baseFontSize, 10) * 3).toString() || '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiAutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.NgControl, optional: true, self: true }, { token: i2.ScrollDispatcher }, { token: i0.ElementRef }, { token: i3.EuiAppShellService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.7", 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                        (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=\"48\"\n                            minBufferPx=\"500\"\n                            maxBufferPx=\"750\"\n                            [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n                            <ng-container *ngFor=\"let distinctOptionGroup of distinctOptionGroups\">\n                                <mat-optgroup\n                                    [class.eui-autocomplete__optgroup--custom]=\"autocompleteOptGroupTemplate\"\n                                    *ngIf=\"(groupedItems[distinctOptionGroup] | async).length > 0\"\n                                    [label]=\"distinctOptionGroup\">\n                                    <ng-container *ngIf=\"autocompleteOptGroupTemplate\">\n                                        <div class=\"eui-autocomplete__optgroup--custom-optgroup-wrapper\">\n                                            <ng-template\n                                                [ngTemplateOutlet]=\"autocompleteOptGroupTemplate\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: { label: distinctOptionGroup } }\"></ng-template>\n                                        </div>\n                                    </ng-container>\n                                    <mat-option\n                                        *ngFor=\"let groupedItem of groupedItems[distinctOptionGroup] | async; trackBy: trackByFn\"\n                                        [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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i5.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: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i5.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "component", type: i7.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: i7.EuiChipListAppendContentDirective, selector: "euiChipListAppendContent" }, { kind: "component", type: i8.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: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiAutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.NgControl, optional: true, self: true }, { token: i2.ScrollDispatcher }, { token: i0.ElementRef }, { token: i3.EuiAppShellService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.0", type: EuiAutocompleteComponent, selector: "eui-autocomplete, input[euiAutocomplete]", inputs: { toggleLinkMoreLabel: "toggleLinkMoreLabel", toggleLinkLessLabel: "toggleLinkLessLabel", autocompleteData: "autocompleteData", autocompleteDataSelected: "autocompleteDataSelected", chipsSortOrder: "chipsSortOrder", itemsSortOrder: "itemsSortOrder", placeholder: "placeholder", matching: "matching", chipsPosition: "chipsPosition", panelWidth: "panelWidth", 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", close: "close", panelClose: "panelClose", open: "open", panelOpen: "panelOpen", blur: "blur", 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=\"48\"\n                            minBufferPx=\"500\"\n                            maxBufferPx=\"750\"\n                            [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n                            <ng-container *ngFor=\"let distinctOptionGroup of distinctOptionGroups\">\n                                <mat-optgroup\n                                    [class.eui-autocomplete__optgroup--custom]=\"autocompleteOptGroupTemplate\"\n                                    *ngIf=\"(groupedItems[distinctOptionGroup] | async).length > 0\"\n                                    [label]=\"distinctOptionGroup\">\n                                    <ng-container *ngIf=\"autocompleteOptGroupTemplate\">\n                                        <div class=\"eui-autocomplete__optgroup--custom-optgroup-wrapper\">\n                                            <ng-template\n                                                [ngTemplateOutlet]=\"autocompleteOptGroupTemplate\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: { label: distinctOptionGroup } }\"></ng-template>\n                                        </div>\n                                    </ng-container>\n                                    <mat-option\n                                        *ngFor=\"let groupedItem of groupedItems[distinctOptionGroup] | async; trackBy: trackByFn\"\n                                        [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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i5.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: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i5.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "component", type: i7.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", "chipDragStart", "chipDragRelease", "chipDrop", "chiplistFocus"] }, { kind: "directive", type: i7.EuiChipListAppendContentDirective, selector: "euiChipListAppendContent" }, { kind: "component", type: i8.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: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiAutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-autocomplete, input[euiAutocomplete]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-autocomplete__container\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\n    <div class=\"eui-autocomplete__wrapper eui-autocomplete__wrapper--{{ chipsPosition }}\">\n        <ng-template [ngIf]=\"chipsPosition === 'bottom'\">\n            <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n        </ng-template>\n\n        <ng-container *ngIf=\"hasChips\">\n            <eui-chip-list\n                #chipList\n                [chips]=\"chips\"\n                [isGrid]=\"isChipsGrid\"\n                [isChipsDragAndDrop]=\"isChipsDragAndDrop\"\n                [isChipsRemovable]=\"isChipsRemovable && !readonly\"\n                [isChipsSorted]=\"isChipsSorted\"\n                [chipsSortOrder]=\"chipsSortOrder\"\n                [maxVisibleChipsCount]=\"maxVisibleChipsCount\"\n                [isMaxVisibleChipsOpened]=\"isMaxVisibleChipsOpened\"\n                [toggleLinkMoreLabel]=\"toggleLinkMoreLabel\"\n                [toggleLinkLessLabel]=\"toggleLinkLessLabel\"\n                [chipsLabelTruncateCount]=\"chipsLabelTruncateCount\"\n                [dragAndDropSourceName]=\"dragAndDropSourceName\"\n                [dragAndDropConnectedTo]=\"dragAndDropConnectedTo\"\n                (chipDropped)=\"onChipDropped($event)\"\n                (chipDragStarted)=\"onChipDragStarted($event)\"\n                (chipDragReleased)=\"onChipDragReleased($event)\"\n                (chipRemove)=\"onChipRemove($event)\"\n                (chiplistFocus)=\"onChipListFocus()\">\n                <euiChipListAppendContent>\n                    <ng-template [ngIf]=\"chipsPosition === 'inside'\">\n                        <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n                    </ng-template>\n                </euiChipListAppendContent>\n            </eui-chip-list>\n        </ng-container>\n\n        <ng-template [ngIf]=\"chipsPosition === 'top' || !hasChips\">\n            <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n        </ng-template>\n\n        <ng-template #field>\n            <span class=\"eui-autocomplete__field-wrapper\">\n                <ng-container *ngIf=\"!hasChips\">\n                    <input\n                        [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n                        [euiLoading]=\"isLoading\"\n                        euiInputText\n                        #autocompleteInput\n                        #autocompleteInputTrigger\n                        placeholder=\"{{ placeholder }}\"\n                        [matAutocompleteDisabled]=\"readonly\"\n                        [formControl]=\"autocompleteControl\"\n                        [matAutocomplete]=\"auto\"\n                        [readonly]=\"readonly\"\n                        [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n                        (clear)=\"onClear()\"\n                        (focusout)=\"onFocusOut()\"\n                        (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=\"48\"\n                            minBufferPx=\"500\"\n                            maxBufferPx=\"750\"\n                            [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n                            <ng-container *ngFor=\"let distinctOptionGroup of distinctOptionGroups\">\n                                <mat-optgroup\n                                    [class.eui-autocomplete__optgroup--custom]=\"autocompleteOptGroupTemplate\"\n                                    *ngIf=\"(groupedItems[distinctOptionGroup] | async).length > 0\"\n                                    [label]=\"distinctOptionGroup\">\n                                    <ng-container *ngIf=\"autocompleteOptGroupTemplate\">\n                                        <div class=\"eui-autocomplete__optgroup--custom-optgroup-wrapper\">\n                                            <ng-template\n                                                [ngTemplateOutlet]=\"autocompleteOptGroupTemplate\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: { label: distinctOptionGroup } }\"></ng-template>\n                                        </div>\n                                    </ng-container>\n                                    <mat-option\n                                        *ngFor=\"let groupedItem of groupedItems[distinctOptionGroup] | async; trackBy: trackByFn\"\n                                        [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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.NgControl, decorators: [{
@@ -721,32 +680,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7",
                 type: Input
             }], dragAndDropConnectedTo: [{
                 type: Input
-            }], closed: [{
-                type: Output
-            }], opened: [{
-                type: Output
-            }], selectionChanged: [{
-                type: Output
-            }], itemAdded: [{
-                type: Output
-            }], itemRemoved: [{
-                type: Output
-            }], inputChanged: [{
-                type: Output
-            }], chipDragStarted: [{
-                type: Output
-            }], chipDragReleased: [{
-                type: Output
-            }], chipDropped: [{
-                type: Output
             }], clear: [{
                 type: Output
             }], close: [{
                 type: Output
+            }], panelClose: [{
+                type: Output
             }], open: [{
                 type: Output
+            }], panelOpen: [{
+                type: Output
             }], blur: [{
                 type: Output
+            }], inputBlur: [{
+                type: Output
             }], selectionChange: [{
                 type: Output
             }], itemAdd: [{
@@ -819,8 +766,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7",
             }] } });
 
 class EuiAutocompleteModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiAutocompleteModule, declarations: [EuiAutocompleteComponent], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiAutocompleteModule, declarations: [EuiAutocompleteComponent], imports: [CommonModule,
             ReactiveFormsModule,
             MatAutocompleteModule,
             EuiChipListModule,
@@ -828,7 +775,7 @@ class EuiAutocompleteModule {
             EuiIconModule,
             EuiInputTextModule,
             ScrollingModule], exports: [EuiAutocompleteComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiAutocompleteModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiAutocompleteModule, imports: [CommonModule,
             ReactiveFormsModule,
             MatAutocompleteModule,
             EuiChipListModule,
@@ -837,7 +784,7 @@ class EuiAutocompleteModule {
             EuiInputTextModule,
             ScrollingModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiAutocompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiAutocompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [