import * as i0 from '@angular/core';
import { Input, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, booleanAttribute, EventEmitter, ChangeDetectorRef, ViewContainerRef, ElementRef, PLATFORM_ID, numberAttribute, Output, ViewChild, ContentChildren, NgModule } from '@angular/core';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';
import { isPlatformBrowser, NgTemplateOutlet, AsyncPipe } from '@angular/common';
import * as i2 from '@angular/forms';
import { FormControl, NgControl, Validators, ReactiveFormsModule } from '@angular/forms';
import { BehaviorSubject, Subject, Subscription, takeUntil, fromEvent, filter } from 'rxjs';
import { TemplatePortal } from '@angular/cdk/portal';
import * as i3 from '@angular/cdk/overlay';
import { ConnectionPositionPair, Overlay, OverlayModule } from '@angular/cdk/overlay';
import { ScrollDispatcher, ScrollingModule } from '@angular/cdk/scrolling';
import { LiveAnnouncer, A11yModule } from '@angular/cdk/a11y';
import { EuiAppShellService } from '@eui/core';
import * as i5 from '@eui/components/eui-chip-list';
import { EUI_CHIP_LIST } from '@eui/components/eui-chip-list';
import { EuiChip, EuiChipTooltip, EUI_CHIP } from '@eui/components/eui-chip';
import { EuiTemplateDirective } from '@eui/components/directives';
import * as i4 from '@eui/components/eui-input-text';
import { EUI_INPUT_TEXT } from '@eui/components/eui-input-text';
import { trigger, state, transition, style, group, animate } from '@angular/animations';
import * as i6 from '@eui/components/eui-icon';
import { EUI_ICON } from '@eui/components/eui-icon';

/**
 * @description
 * Component used internally by `eui-autocomplete` with the option `groupBy`. It allows to display the options in groups.
 */
class EuiAutocompleteOptionGroupComponent {
    constructor() {
        /**
         * ARIA role for the host element to ensure proper accessibility.
         * @default 'optgroup'
         */
        this.role = 'optgroup';
    }
    /**
     * @description
     * Computes and returns the CSS classes for the component based on its current state.
     *
     * @returns {string} Space-separated string of CSS class names
     */
    get cssClasses() {
        return ['eui-autocomplete-option-group'].join(' ').trim();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAutocompleteOptionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: EuiAutocompleteOptionGroupComponent, isStandalone: true, selector: "eui-autocomplete-option-group", inputs: { label: "label" }, host: { properties: { "attr.role": "this.role", "class": "this.cssClasses" } }, ngImport: i0, template: '<ng-content/>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAutocompleteOptionGroupComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'eui-autocomplete-option-group',
                    template: '<ng-content/>',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                }]
        }], propDecorators: { role: [{
                type: HostBinding,
                args: ['attr.role']
            }], cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], label: [{
                type: Input
            }] } });

/**
 * @description
 * Component used internally by `eui-autocomplete` to display the options in the panel.
 */
class EuiAutocompleteOptionComponent {
    constructor() {
        /**
         * ARIA role for the host element to ensure proper accessibility.
         * @default 'option'
         */
        this.role = 'option';
        /**
         * Whether the option is active in the panel.
         *
         * @default false
         */
        this.isActive = false;
        /**
         * Whether the option is disabled in the panel.
         *
         * @default false
         */
        this.isDisabled = false;
        /**
         * Whether the option is displayed inside a group.
         *
         * @default false
         */
        this.isGroupItem = false;
        this.baseStatesDirective = inject(BaseStatesDirective);
    }
    /**
     * @description
     * Computes and returns the CSS classes for the component based on its current state.
     *
     * @returns {string} Space-separated string of CSS class names
     */
    get cssClasses() {
        return [
            this.baseStatesDirective.getCssClasses('eui-autocomplete-option'),
            this.isActive ? 'eui-autocomplete-option--active' : '',
            this.isDisabled ? 'eui-autocomplete-option--disabled' : '',
            this.isGroupItem ? 'eui-autocomplete-option--group-item' : '',
        ]
            .join(' ')
            .trim();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAutocompleteOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: EuiAutocompleteOptionComponent, isStandalone: true, selector: "eui-autocomplete-option", inputs: { isActive: ["isActive", "isActive", booleanAttribute], isDisabled: ["isDisabled", "isDisabled", booleanAttribute], isGroupItem: ["isGroupItem", "isGroupItem", booleanAttribute] }, host: { properties: { "attr.role": "this.role", "class": "this.cssClasses" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiVariant", "euiVariant"] }], ngImport: i0, template: '<ng-content/>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAutocompleteOptionComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'eui-autocomplete-option',
                    template: '<ng-content/>',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiVariant',
                            ],
                        },
                    ],
                }]
        }], propDecorators: { role: [{
                type: HostBinding,
                args: ['attr.role']
            }], cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], isActive: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isDisabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isGroupItem: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }] } });

const panelAnimation = trigger('panelAnimation', [
    state('void, hidden', style({
        opacity: 0,
        transform: 'scaleY(0.8)',
    })),
    transition(':enter, hidden => visible', [
        group([
            animate('0.03s linear', style({ opacity: 1 })),
            animate('0.12s cubic-bezier(0, 0, 0.2, 1)', style({ transform: 'scaleY(1)' })),
        ]),
    ]),
    transition(':leave, visible => hidden', [animate('0.05s linear', style({ opacity: 0 }))]),
]);

/**
 * @description
 * `eui-autocomplete` is a text input showing some suggestions when the user types letters. It can be enhanced with chips to allow user to select multiple values.
 *
 */
class EuiAutocompleteComponent {
    /**
     * @description
     * Computes and returns the CSS classes for the component based on its current state.
     *
     * @returns {string} Space-separated string of CSS class names
     */
    get cssClasses() {
        return [
            this.baseStatesDirective.getCssClasses('eui-autocomplete'),
            'eui-autocomplete--chips-position-' + this.chipsPosition,
            this.isReadonly ? 'eui-autocomplete--readonly' : '',
        ]
            .join(' ')
            .trim();
    }
    constructor() {
        /**
         * Datas to be used in the autocomplete.
         */
        this.autocompleteData = [];
        /**
         * Sets the maximum number of options that will be visible in the autocomplete panel.
         *
         * @default 5
         */
        this.visibleOptions = 5;
        /**
         * Sets the way the options should be retrieved.
         *
         * @default 'contains'
         */
        this.matching = 'contains';
        /**
         * Sets the placeholder of the text input.
         */
        this.placeholder = '';
        /**
         * Sets the options that will be selected by default.
         */
        this.autocompleteDataSelected = [];
        /**
         * Sets the sort criteria of the chips.
         *
         * @type {('ASC' | 'DESC')}
         * @default 'ASC'
         */
        this.chipsSortOrder = 'ASC';
        /**
         * In combination with `isChipsSorted`. Sets the sort criteria of the options in the panel.
         *
         * @type {('ASC' | 'DESC')}
         * @default 'ASC'
         */
        this.itemsSortOrder = 'ASC';
        /**
         * In Combination with `isItemsSorted`. Sets the position of the chips relative to the text input.
         *
         * @type {('top' | 'bottom' | 'inside')}
         * @default 'top''
         */
        this.chipsPosition = 'top';
        /**
         * In combination with `maxVisibleChipsCount`, sets the label of the 'more label' button, if not provided an arrow right icon will be displayed only.
         */
        this.toggleLinkMoreLabel = null;
        /**
         * In combination with `maxVisibleChipsCount`, sets the label of the 'less label' button, if not provided an arrow left icon will be displayed only.
         */
        this.toggleLinkLessLabel = null;
        /**
         * Sets a CSS class to be added on the options panel container.
         */
        this.classList = null;
        /**
         * In combination with `isChipsDragAndDrop`, sets the name to the chips source with which a drag and drop will be done.
         */
        this.dragAndDropConnectedTo = [];
        /**
         * In combination with `hasChips`. Whether the user can add a value, which is not part of the options, to craete a chip.
         *
         * @default true
         */
        this.isFreeValueAllowed = true;
        /**
         * Whether autocomplete is in readonly mode.
         *
         * @default false
         */
        this.isReadonly = false;
        /**
         * Whether loading spinner is displayed in text input.
         *
         * @default false
         */
        this.isLoading = false;
        /**
         * Whether autocomplete will display the selected values with chips.
         *
         * @default false
         */
        this.hasChips = false;
        /**
         * Whether autocomplete will get the data asynchronously.
         *
         * @default false
         */
        this.isAsync = false;
        /**
         * Whether this chip is sorted on their label.
         *
         * @default false
         */
        this.isChipsSorted = false;
        /**
         * Whether this item in the panel is sorted on their label.
         *
         * @default false
         */
        this.isItemsSorted = false;
        /**
         * Whether the chip can be removed from the selection.
         * When a chip is removed, its value goes back in the panel.
         *
         * @default true
         */
        this.isChipsRemovable = true;
        /**
         * Whether the chips can have multiple times the same value.
         * With this option, the value is not removed from the panel when choosen.
         *
         * @default false
         */
        this.isDuplicateValueAllowed = false;
        /**
         * In combination with `hasChips`. Whether the chip is added when the text input is blurred.
         *
         * @default false
         */
        this.isAddOnBlur = false;
        /**
         * In combination with `hasChips` and `isFreeValueAllowed=false`. Whether the text input is empty after blurring when no value has been selected in the panel.
         *
         * @default false
         */
        this.isForceSelection = false;
        /**
         * Whether a limited amount, defined by this option, is used to display the chips.
         */
        this.maxVisibleChipsCount = null;
        /**
         * Whether the chips label length is limited by the value of this option.
         */
        this.chipsLabelTruncateCount = null;
        /**
         * In combination with `maxVisibleChipsCount`. Whether all chips are shown by default.
         *
         * @default false
         */
        this.isMaxVisibleChipsOpened = false;
        /**
         * Whether the chips can be drag and dropped.
         *
         * @default false
         */
        this.isChipsDragAndDrop = false;
        this.autocompleteOptions = new BehaviorSubject(this.autocompleteData);
        this.selectedOptionIndex = 0;
        this.autocompleteControl = new FormControl('');
        this.isDisabled = false;
        this.chips = [];
        this.groupedOptions = new BehaviorSubject({});
        this.globalOptionIndex = 0;
        this.itemSize = 40;
        /**
         * Event emitted when the panel is closed.
         */
        this.panelClose = new EventEmitter();
        /**
         * Event emitted when the panel is opened.
         */
        this.panelOpen = new EventEmitter();
        /**
         * Event emitted when the text input gets the focus.
         */
        this.inputFocus = new EventEmitter();
        /**
         * Event emitted when the text input is blurred.
         */
        this.inputBlur = new EventEmitter();
        /**
         * Event emitted when the text input is cleared.
         */
        this.clear = new EventEmitter();
        /**
         * Event emitted when an option is selected or when the selection is modified.
         */
        this.selectionChange = new EventEmitter();
        /**
         * Event emitted when an option is selected.
         */
        this.itemAdd = new EventEmitter();
        /**
         * Event emitted when an option is removed.
         */
        this.itemRemove = new EventEmitter();
        /**
         * Event emitted when the value of the text input changes.
         */
        this.inputChange = new EventEmitter();
        /**
         * Event emitted when a chip drag starts.
         */
        this.chipDragStart = new EventEmitter();
        /**
         * Event emitted when a chip drag is released.
         */
        this.chipDragRelease = new EventEmitter();
        /**
         * Event emitted when a chip is dropped.
         */
        this.chipDrop = new EventEmitter();
        this.destroy$ = new Subject();
        this.isOpen$ = new BehaviorSubject(false);
        this.keyboardOptionSelectorHandlerSubscription = new Subscription();
        this.addOnBlurClickHandlerSubscription = new Subscription();
        this.isForceSelectionSubscription = new Subscription();
        this.keyboardSubscription = new Subscription();
        this.autocompleteOptionsSubscription = new Subscription();
        this.scrollDispatcherSubscription = new Subscription();
        this.windowResizeSubscription = new Subscription();
        this.value = null;
        this.TOP = new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' }, 0, 0, [
            'eui-autocomplete-position',
            'eui-autocomplete-position--top',
        ]);
        this.BOTTOM = new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' }, 0, 0, [
            'eui-autocomplete-position',
            'eui-autocomplete-position--bottom',
        ]);
        this.preferredPositons = [this.BOTTOM, this.TOP];
        this.overlay = inject(Overlay);
        this.cd = inject(ChangeDetectorRef);
        this.viewContainerRef = inject(ViewContainerRef);
        this.elementRef = inject(ElementRef);
        this.liveAnnouncer = inject(LiveAnnouncer);
        this.scrollDispatcher = inject(ScrollDispatcher);
        this.euiAppShellService = inject(EuiAppShellService);
        this.baseStatesDirective = inject(BaseStatesDirective);
        this.control = inject(NgControl, { self: true, optional: true });
        this.platformId = inject(PLATFORM_ID);
        this.onChange = (change) => {
            /** empty */
        };
        this.onTouch = () => {
            /** empty */
        };
        if (this.control) {
            this.control.valueAccessor = this;
        }
    }
    get isChipsPositionInside() {
        return this.chipsPosition === 'inside';
    }
    ngOnChanges(c) {
        if (c && c.autocompleteData) {
            this.setOptions('', this.isItemsSorted);
        }
        if (c && c.autocompleteDataSelected && this.hasChips) {
            this.autocompleteDataSelected = c.autocompleteDataSelected.currentValue.map((s) => ({ ...s, euiInternalId: crypto.randomUUID() }));
            this.chips = this.mapToChip(this.autocompleteDataSelected);
            this.setOptions('', this.isItemsSorted);
        }
    }
    ngOnInit() {
        this.euiAppShellService.state$.pipe(takeUntil(this.destroy$)).subscribe((state) => {
            this.itemSize = state.appBaseFontSize === '16px' ? 40 : 35;
        });
        if (this.control) {
            this.updateInputAriaRequiredAttribute(this.control);
            this.control.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
                this.updateInputAriaRequiredAttribute(this.control);
            });
        }
        this.autocompleteControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
            this.selectedOptionIndex = 0;
            if (!this.isOpen) {
                this.openPanel();
            }
            this.setOptions(value, this.isItemsSorted);
            if (this.hasChips) {
                if (!value) {
                    this.onChange(this.autocompleteDataSelected.length > 0 ? this.autocompleteDataSelected : null);
                }
            }
            else {
                if (typeof value === 'string') {
                    const foundItem = this.autocompleteData.find((d) => d.label.toLowerCase().trim() === value.toLowerCase().trim());
                    if (foundItem) {
                        this.onChange(foundItem);
                    }
                    else {
                        // eslint-disable-next-line
                        value ? this.onChange({ label: value }) : this.onChange(null);
                    }
                }
                else {
                    this.onChange(value === undefined ? null : value);
                    if (!value) {
                        this.setOptions('', this.isItemsSorted);
                    }
                }
            }
            this.inputChange.emit(value);
        });
        if (!this.isAsync) {
            this.setOptions(Array.isArray(this.value) ? '' : this.value?.label, this.isItemsSorted);
        }
    }
    ngDoCheck() {
        if (this.control) {
            // eslint-disable-next-line
            this.control.touched ? this.autocompleteControl.markAsTouched() : this.autocompleteControl.markAsUntouched();
            // eslint-disable-next-line
            this.control.invalid ? this.autocompleteControl.setErrors(this.control.errors) : this.autocompleteControl.setErrors(null);
            this.cd.detectChanges();
        }
    }
    ngAfterViewInit() {
        this.templatePortal = new TemplatePortal(this.templatePortalContent, this.viewContainerRef);
        this.templates.forEach((item) => {
            if (item.getType() === 'dropdownOption') {
                this.autocompleteOptionTemplate = item.template;
            }
            if (item.getType() === 'dropdownOptGroup') {
                this.autocompleteOptGroupTemplate = item.template;
            }
        });
    }
    ngOnDestroy() {
        this.destroy$.next(true);
        this.destroy$.unsubscribe();
        this.keyboardOptionSelectorHandlerSubscription.unsubscribe();
        this.addOnBlurClickHandlerSubscription.unsubscribe();
        this.isForceSelectionSubscription.unsubscribe();
        this.keyboardSubscription.unsubscribe();
        this.autocompleteOptionsSubscription.unsubscribe();
        this.windowResizeSubscription.unsubscribe();
    }
    /**
     * Calculates the height that the virtual scroll need to have.
     *
     * @type {number}
     */
    get cdkVirtualScrollViewport() {
        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 {
                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;
        }
    }
    /**
     * Returns the opening state of the panel.
     *
     * @type {boolean}
     */
    get isOpen() {
        return this.isOpen$.value;
    }
    /**
     * Checks if autocomplete options are available.
     *
     * @returns {boolean} `true` if options are present, otherwise `false`.
     */
    get hasOptionsResult() {
        return this.autocompleteOptions.value.length > 0;
    }
    /**
     * Method that creates and opens the panel containing autocomplete options.
     */
    openPanel() {
        if (!this.isOpen && !this.isReadonly) {
            this.scrollDispatcherSubscription = this.scrollDispatcher
                .ancestorScrolled(this.input)
                .pipe(takeUntil(this.destroy$))
                .subscribe((event) => {
                if (isPlatformBrowser(this.platformId)) {
                    const scrollableParent = event ? event.getElementRef().nativeElement : document.querySelector('body');
                    if (!this.isVisible(this.input.nativeElement, scrollableParent)) {
                        this.closePanel();
                    }
                }
            });
            this.windowResizeSubscription = fromEvent(window, 'resize')
                .pipe(takeUntil(this.destroy$))
                .subscribe(() => {
                if (this.overlayRef && this.overlayRef.hasAttached() && !this.panelWidth) {
                    this.overlayRef.updateSize({
                        width: this.inputContainerRef.nativeElement.clientWidth,
                    });
                }
            });
            const positionStrategy = this.getPositionStrategy();
            const scrollStrategy = this.getScrollStrategy();
            this.overlayRef = this.overlay.create({
                hasBackdrop: false,
                positionStrategy,
                scrollStrategy,
                disposeOnNavigation: true,
                width: this.panelWidth ? this.panelWidth : this.inputContainerRef.nativeElement.clientWidth,
                panelClass: ['eui-autocomplete__panel-container', this.classList],
            });
            this.overlayRef.attach(this.templatePortal);
            document.querySelectorAll('.cdk-overlay-container')?.forEach(el => {
                if (!el.classList.contains('eui-19')) {
                    el.classList.add('eui-19');
                }
            });
            this.overlayRef
                .outsidePointerEvents()
                .pipe(takeUntil(this.destroy$))
                .subscribe((e) => {
                const targetElement = e.target;
                const clearElement = this.elementRef.nativeElement.querySelector('.eui-sprite-eui-close');
                const isElementOrChildOfElement = (element, parentElement) => {
                    while (element) {
                        if (element === parentElement) {
                            return true;
                        }
                        element = element.parentElement;
                    }
                    return false;
                };
                const isClearableButton = targetElement.classList.contains('eui-sprite-eui-close');
                const isInput = targetElement.classList.contains('eui-autocomplete__input');
                if (!isClearableButton && !isInput && !isElementOrChildOfElement(targetElement, clearElement)) {
                    this.closePanel();
                }
                if (isClearableButton && !this.elementRef.nativeElement.contains(targetElement)) {
                    this.closePanel();
                }
                if (isInput && !this.elementRef.nativeElement.contains(targetElement)) {
                    this.closePanel();
                }
                if (e.target.classList.contains('eui-autocomplete__input')) {
                    e.stopPropagation();
                }
            });
            this.overlayRef
                .keydownEvents()
                .pipe(takeUntil(this.destroy$))
                .subscribe((keyboardEvent) => {
                if (keyboardEvent.key?.toLowerCase() === 'escape') {
                    this.closePanel();
                }
            });
            this.autocompleteOptionsSubscription = this.autocompleteOptions.subscribe((autocompleteOptions) => {
                this.overlayRef.removePanelClass('eui-autocomplete__panel-container--no-option');
                if (autocompleteOptions.length === 0) {
                    this.selectedOptionIndex = 0;
                    this.overlayRef.addPanelClass('eui-autocomplete__panel-container--no-option');
                }
                setTimeout(() => {
                    this.overlayRef?.updatePositionStrategy(this.getPositionStrategy());
                });
            });
            const liveAnnouncerSource = this.groupBy ? Object.values(this.groupedOptions.value).flatMap(group => group.options) : this.autocompleteOptions.value;
            this.liveAnnouncer.clear();
            this.liveAnnouncer.announce(liveAnnouncerSource[0]?.label);
            let visibleRangeStart = 0;
            let visibleRangeEnd = this.visibleOptions - 1;
            this.keyboardOptionSelectorHandlerSubscription = fromEvent(this.input.nativeElement, 'keydown')
                .pipe(filter((e) => e.code === 'ArrowDown' || e.code === 'ArrowUp' || e.key === 'Enter' || e.code === 'Tab'), takeUntil(this.destroy$))
                .subscribe((e) => {
                if (e) {
                    if (e.code === 'ArrowDown' && this.selectedOptionIndex < this.autocompleteOptions.value.length - 1) {
                        this.selectedOptionIndex++;
                        this.cd.detectChanges();
                        const liveAnnouncerSource = this.groupBy ? Object.values(this.groupedOptions.value).flatMap(group => group.options) : this.autocompleteOptions.value;
                        this.liveAnnouncer.clear();
                        this.liveAnnouncer.announce(liveAnnouncerSource[this.selectedOptionIndex].label);
                        e.preventDefault();
                    }
                    if (e.code === 'ArrowUp' && this.selectedOptionIndex > 0) {
                        this.selectedOptionIndex--;
                        this.cd.detectChanges();
                        const liveAnnouncerSource = this.groupBy ? Object.values(this.groupedOptions.value).flatMap(group => group.options) : this.autocompleteOptions.value;
                        this.liveAnnouncer.clear();
                        this.liveAnnouncer.announce(liveAnnouncerSource[this.selectedOptionIndex].label);
                        e.preventDefault();
                    }
                    const cIndex = this.selectedOptionIndex - this.virtualScrolling?.getRenderedRange().start;
                    if (e.code === 'ArrowDown' && cIndex > visibleRangeEnd - visibleRangeStart - visibleRangeEnd) {
                        let nbOptionsGroup = 0;
                        const nbOptions = this.autocompleteOptions.value.length;
                        if (this.groupBy) {
                            Object.keys(this.groupedOptions.value).forEach(groupedOption => {
                                if (this.groupedOptions.value[groupedOption].options.length > 0 &&
                                    this.selectedOptionIndex > this.groupedOptions.value[groupedOption].ancestorLength - 1) {
                                    nbOptionsGroup++;
                                }
                            });
                        }
                        if ((this.selectedOptionIndex + nbOptionsGroup) > visibleRangeEnd && visibleRangeEnd <= (nbOptions + nbOptionsGroup)) {
                            this.virtualScrolling.scrollToIndex((this.selectedOptionIndex + nbOptionsGroup) - visibleRangeEnd + visibleRangeStart);
                            visibleRangeStart++;
                            visibleRangeEnd++;
                        }
                    }
                    if (e.code === 'ArrowUp' && cIndex < visibleRangeStart) {
                        if (this.selectedOptionIndex < visibleRangeStart) {
                            this.virtualScrolling.scrollToIndex(this.selectedOptionIndex);
                            visibleRangeStart--;
                            visibleRangeEnd--;
                        }
                    }
                    if (e.key === 'Enter') {
                        if (this.hasOptionsResult) {
                            if (this.groupBy) {
                                const options = [].concat(...Object.values(this.groupedOptions.value).map(group => group.options));
                                this.onOptionSelected(options[this.selectedOptionIndex]);
                            }
                            else {
                                this.onOptionSelected(this.autocompleteOptions.value[this.selectedOptionIndex]);
                            }
                        }
                        else if (this.hasChips && this.isFreeValueAllowed) {
                            this.add(this.autocompleteControl.value);
                        }
                    }
                    if (e.code === 'Tab') {
                        if (this.isOpen) {
                            if (this.isAddOnBlur && this.hasChips && this.autocompleteControl.value?.trim().length > 0) {
                                this.add(this.autocompleteControl.value.trim());
                            }
                            if (this.isForceSelection) {
                                const foundItem = this.autocompleteData.find((d) => d.label.toLowerCase().trim() === this.autocompleteControl.value?.toLowerCase().trim());
                                if (this.hasChips || (!this.hasChips && !foundItem)) {
                                    this.input.nativeElement.value = '';
                                    this.autocompleteControl.setValue(null, { emitEvent: false });
                                    this.setOptions('', this.isItemsSorted);
                                    if (!this.hasChips) {
                                        this.onChange(null);
                                    }
                                    this.inputChange.emit(null);
                                    if (!this.hasChips) {
                                        this.autocompleteDataSelected = [];
                                    }
                                }
                            }
                            this.closePanel();
                        }
                    }
                }
            });
            this.addOnBlurClickHandlerSubscription.unsubscribe();
            if (this.isAddOnBlur) {
                this.addOnBlurClickHandlerSubscription = fromEvent(document, 'click').pipe(takeUntil(this.destroy$)).subscribe((event) => {
                    if (!event.target.classList.contains('eui-autocomplete-option') && this.hasChips && this.autocompleteControl.value?.trim().length > 0) {
                        this.add(this.autocompleteControl.value.trim());
                    }
                });
            }
            this.isForceSelectionSubscription.unsubscribe();
            if (this.isForceSelection) {
                this.isForceSelectionSubscription = fromEvent(document, 'click').pipe(takeUntil(this.destroy$)).subscribe((event) => {
                    if (!event.target.classList.contains('eui-autocomplete-option')) {
                        const foundItem = this.autocompleteData.find((d) => d.label.toLowerCase().trim() === this.autocompleteControl.value?.toLowerCase().trim());
                        if (this.hasChips || (!this.hasChips && !foundItem)) {
                            this.input.nativeElement.value = '';
                            this.autocompleteControl.setValue(null, { emitEvent: false });
                            this.setOptions('', this.isItemsSorted);
                            if (!this.hasChips) {
                                this.onChange(null);
                            }
                            this.inputChange.emit(null);
                            if (!this.hasChips) {
                                this.autocompleteDataSelected = [];
                            }
                        }
                    }
                });
            }
            this.isOpen$.next(true);
            this.panelOpen.emit();
        }
    }
    /**
     * Closes the autocomplete panel.
     */
    closePanel() {
        this.selectedOptionIndex = 0;
        this.overlayRef.dispose();
        this.overlayRef = null;
        this.isOpen$.next(false);
        this.cd.detectChanges();
        this.keyboardOptionSelectorHandlerSubscription.unsubscribe();
        this.autocompleteOptionsSubscription.unsubscribe();
        this.scrollDispatcherSubscription.unsubscribe();
        this.windowResizeSubscription.unsubscribe();
        this.panelClose.emit();
    }
    /**
     * Method called when an option is selected.
     *
     * @param e Selected option
     */
    onOptionSelected(e) {
        if (!e.isDisabled) {
            if (this.hasChips) {
                this.autocompleteDataSelected.push({ ...e, euiInternalId: crypto.randomUUID() });
                this.chips = this.mapToChip(this.autocompleteDataSelected);
                this.input.nativeElement.value = '';
                this.autocompleteControl.setValue(null);
                this.setOptions('', this.isItemsSorted);
            }
            else {
                this.autocompleteDataSelected = [e];
                this.input.nativeElement.value = e.label;
                this.autocompleteControl.setValue(e.label);
            }
            this.addOnBlurClickHandlerSubscription.unsubscribe();
            this.isForceSelectionSubscription.unsubscribe();
            this.selectionChange.emit(this.autocompleteDataSelected);
            this.itemAdd.emit(e);
            this.closePanel();
        }
    }
    /**
     * Method called when an option is added through the text input.
     *
     * @param value Value to add
     */
    add(value) {
        if (!value || (!this.isFreeValueAllowed && !this.autocompleteData.find(a => a.label === value.trim()))) {
            return;
        }
        if (!this.isDuplicateValueAllowed && this.autocompleteDataSelected.some(s => s.label.trim() === value.trim())) {
            return;
        }
        const item = this.autocompleteData.find(a => a.label === value.trim()) || { label: value.trim(), euiInternalId: crypto.randomUUID() };
        this.autocompleteDataSelected.push(item);
        this.chips = this.mapToChip(this.autocompleteDataSelected);
        this.input.nativeElement.value = '';
        this.autocompleteControl.setValue(null);
        this.closePanel();
        this.addOnBlurClickHandlerSubscription.unsubscribe();
        this.isForceSelectionSubscription.unsubscribe();
        this.selectionChange.emit(this.autocompleteDataSelected);
        this.itemAdd.emit(item);
    }
    optionsTrackByFn(index, item) {
        return item.id;
    }
    writeValue(value) {
        this.value = value;
        if (this.hasChips) {
            this.autocompleteDataSelected = value ? ([...value]) : [];
            this.chips = this.mapToChip(this.autocompleteDataSelected);
            this.autocompleteControl.patchValue(null, { emitEvent: false });
            this.setOptions('', this.isItemsSorted);
        }
        else {
            this.autocompleteControl.patchValue(value ? value.label : null, { emitEvent: false });
            const inputValue = value ? value.label : null;
            this.setOptions(inputValue, this.isItemsSorted);
        }
    }
    setDisabledState(isDisabled) {
        // eslint-disable-next-line
        this.isDisabled = isDisabled;
        // eslint-disable-next-line
        isDisabled ? this.autocompleteControl.disable() : this.autocompleteControl.enable();
        if (this.isOpen) {
            this.closePanel();
        }
        this.cd.detectChanges();
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouch = fn;
    }
    onClear() {
        this.clear.emit();
    }
    /**
     * Text input focus handler.
     */
    onFocus() {
        this.keyboardSubscription = fromEvent(this.input.nativeElement, 'keydown')
            .pipe(filter((event) => /^[a-zA-Z0-9]$/.test(event.key) ||
            event.key === 'Space' ||
            event.key === 'ArrowDown' ||
            event.key === 'Backspace'))
            .subscribe((event) => {
            if (!this.isOpen) {
                this.openPanel();
                event.stopPropagation();
            }
            if (this.chipsPosition === 'inside' && event.key === 'Backspace' && (!this.autocompleteControl.value || this.autocompleteControl.value.length === 0)) {
                const removed = this.chips.pop();
                this.onChipRemove({ chips: [...this.chips], removed });
                this.cd.detectChanges();
                this.overlayRef.updateSize({ width: this.inputContainerRef.nativeElement.clientWidth });
                this.overlayRef.updatePosition();
            }
        });
        if (!this.isOpen) {
            this.openPanel();
        }
        this.inputFocus.emit();
    }
    /**
     * Text input blur handler.
     */
    onBlur() {
        this.keyboardSubscription.unsubscribe();
        this.inputBlur.emit();
        this.onTouch();
    }
    /**
     * Called when a chip is removed.
     *
     * @param e Object containing the chip to remove.
     */
    onChipRemove(e) {
        const event = e;
        const itemRemoved = this.autocompleteDataSelected.find(i => i.id === event.removed.id);
        this.autocompleteDataSelected = this.autocompleteDataSelected
            .filter(i => event.chips.find(c => c.id === i.id))
            .filter(i => event.chips.find(c => c.euiInternalId === i.euiInternalId));
        this.chips = this.mapToChip(this.autocompleteDataSelected);
        this.setOptions('', this.isItemsSorted);
        this.onChange(this.autocompleteDataSelected.length > 0 ? this.autocompleteDataSelected : null);
        this.selectionChange.emit(this.autocompleteDataSelected);
        this.itemRemove.emit(itemRemoved);
    }
    /**
     * Called when a chip is dropped for reordering or from a source to another.
     *
     * @param e Object containing the chip dropped.
     */
    onChipDropped(e) {
        const data = this.autocompleteData;
        this.autocompleteDataSelected = e.chips.map(c => data.find((a) => a.id === c.id));
        this.chips = this.mapToChip(this.autocompleteDataSelected);
        this.autocompleteOptions.next(this.filterOptions(''));
        this.onChange(this.autocompleteDataSelected.length > 0 ? this.autocompleteDataSelected : null);
        this.selectionChange.emit(this.autocompleteDataSelected);
        this.chipDrop.emit(e);
    }
    /**
     * Called when a chip is dragged for reordering or from a source to another.
     *
     * @param e Object containing the chip dragged.
     */
    onChipDragStarted(e) {
        this.chipDragStart.emit(e);
    }
    /**
     * Called when a chip is released for reordering or from a source to another.
     *
     * @param e Object containing the chip released.
     */
    onChipDragReleased(e) {
        this.chipDragRelease.emit(e);
    }
    /**
     * Calculates the item size for virtual scrolling.
     *
     * @returns a number representing the item size.
     */
    getItemSize() {
        const optionHeight = this.overlayRef?.hostElement?.querySelector('.eui-autocomplete__panel')?.querySelectorAll('.eui-autocomplete-option')[0]?.clientHeight + 1;
        return optionHeight || 48;
    }
    /**
     * Re-order options panel based on the input valuea and sort order.
     *
     * @param value Value to filter the options.
     * @param isItemsSorted If the items are sorted.
     */
    setOptions(value, isItemsSorted) {
        this.autocompleteOptions.next(isItemsSorted ? (this.orderArray(this.filterOptions(value), this.itemsSortOrder)) : this.filterOptions(value));
        if (this.groupBy) {
            const { groupedOptions, distinctOptionGroups } = this.groupingHandler(this.autocompleteOptions.value, this.groupBy);
            this.groupedOptions.next(groupedOptions);
            this.distinctOptionGroups = distinctOptionGroups;
        }
    }
    /**
     * Return the position strategy for the panel.
     *
     * @returns A CDK position strategy.
     */
    getPositionStrategy() {
        return this.overlay
            .position()
            .flexibleConnectedTo(this.inputContainerRef.nativeElement)
            .withPositions(this.preferredPositons)
            .withFlexibleDimensions(false)
            .withLockedPosition(true);
    }
    /**
     * Return the scroll strategy for the panel.
     *
     * @returns A CDK scroll strategy.
     */
    getScrollStrategy() {
        return this.overlay.scrollStrategies.reposition({ scrollThrottle: 10 });
    }
    /**
     * Refine the options based on the input value.
     *
     * @param inputValue Value to filter the options.
     * @returns An array of options.
     */
    filterOptions(inputValue) {
        let data = [];
        if (inputValue) {
            data = this.autocompleteData.filter((autocompleteItem) => {
                if (this.matching === 'contains' &&
                    autocompleteItem.label.toLowerCase().indexOf(inputValue.toString().toLowerCase()) !== -1) {
                    return autocompleteItem;
                }
                if (this.matching === 'startWith' &&
                    autocompleteItem.label.toLowerCase().substr(0, inputValue.toString().length) === inputValue.toLowerCase()) {
                    return autocompleteItem;
                }
            });
        }
        else {
            data = this.autocompleteData;
        }
        if (this.hasChips) {
            data = data.filter(d => !this.isDuplicateValueAllowed ? !this.autocompleteDataSelected.some(selectedItem => d.id === selectedItem.id) : true);
        }
        if (this.isItemsSorted) {
            data = this.orderArray(data, this.itemsSortOrder);
        }
        return data;
    }
    /**
     * Converts EuiAutoCompleteItem array to EuiChip array.
     *
     * @param items Array of EuiAutoCompleteItem.
     * @returns An array of EuiChip
     */
    mapToChip(items) {
        const chips = items.map((selected) => {
            return new EuiChip({
                id: selected.id,
                euiInternalId: selected.euiInternalId,
                label: selected.label,
                typeClass: selected.typeClass,
                isOutline: selected.isOutline,
                isRounded: selected.isRounded,
                sizeClass: selected.sizeClass,
                isRemovable: selected.isRemovable,
                tooltipMessage: selected.tooltip?.tooltipMessage,
                tooltip: new EuiChipTooltip(selected.tooltip),
                iconClass: selected.iconClass,
                iconSvgName: selected.iconSvgName,
            });
        });
        return this.isChipsSorted && chips.length > 0 ? this.orderArray(chips, this.chipsSortOrder) : chips;
    }
    /**
     * Sort an array of objects based on their label.
     *
     * @param tab Array to order
     * @param sortOrder Sort order criteria
     * @returns A sorted array
     */
    orderArray(tab, sortOrder) {
        tab.sort((a, b) => {
            const aObj = a.label.toLowerCase();
            const bObj = b.label.toLowerCase();
            if (sortOrder === 'ASC') {
                if (aObj < bObj) {
                    return -1;
                }
                if (aObj > bObj) {
                    return 1;
                }
                return 0;
            }
            else {
                if (aObj > bObj) {
                    return -1;
                }
                if (aObj < bObj) {
                    return 1;
                }
                return 0;
            }
        });
        return tab;
    }
    /**
     * Transforms array of EuiAutoCompleteItem into a grouped object.
     *
     * @param options Array of EuiAutoCompleteItem
     * @param groupBy Label of the group
     * @returns An object containing the grouped options and the distinct option groups.
     */
    groupingHandler(options, groupBy) {
        const distinctGroups = this.autocompleteData.map(item => groupBy.split('.').reduce((prev, curr) => (prev ? prev[curr] : null), item || self));
        const distinctOptionGroups = [...new Set(distinctGroups)].sort((a, b) => (a > b ? 1 : -1));
        const groupedOptions = {};
        let ancestorLength = 0;
        for (const group of distinctOptionGroups) {
            let o = options.filter(option => groupBy.split('.').reduce((prev, curr) => (prev ? prev[curr] : null), option || self) === group);
            if (this.isItemsSorted) {
                o = this.orderArray(o, this.itemsSortOrder);
            }
            groupedOptions[group] = { options: o, ancestorLength };
            ancestorLength += o.length;
        }
        return { groupedOptions, distinctOptionGroups };
    }
    /**
     * Indicates if the origin element is visible in the scrollable parent.
     *
     * @param origin Origin of the autocomplete
     * @param scrollableParent Scrollable container
     * @returns A boolean, true if visible else false.
     */
    isVisible(origin, scrollableParent) {
        const originY = origin.getBoundingClientRect().y;
        const scrollableParentY = Math.abs(scrollableParent.getBoundingClientRect().y);
        const scrollableParentHeight = scrollableParent.getBoundingClientRect().height - 55;
        return ((originY > 0 && originY < scrollableParentHeight) ||
            (originY - scrollableParentY > 0 && originY < scrollableParentY + scrollableParentHeight));
    }
    /**
     * Updates the `aria-required` attribute on the input element.
     * @private
     */
    updateInputAriaRequiredAttribute(control) {
        this.hasAriaRequiredAttribute = control?.control?.hasValidator(Validators.required);
        this.cd.markForCheck();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EuiAutocompleteComponent, isStandalone: true, selector: "eui-autocomplete, input[euiAutocomplete]", inputs: { inputId: "inputId", autocompleteData: "autocompleteData", visibleOptions: "visibleOptions", matching: "matching", placeholder: "placeholder", autocompleteDataSelected: "autocompleteDataSelected", chipsSortOrder: "chipsSortOrder", itemsSortOrder: "itemsSortOrder", chipsPosition: "chipsPosition", groupBy: "groupBy", toggleLinkMoreLabel: "toggleLinkMoreLabel", toggleLinkLessLabel: "toggleLinkLessLabel", classList: "classList", panelWidth: "panelWidth", dragAndDropSourceName: "dragAndDropSourceName", dragAndDropConnectedTo: "dragAndDropConnectedTo", isFreeValueAllowed: ["isFreeValueAllowed", "isFreeValueAllowed", booleanAttribute], isReadonly: ["isReadonly", "isReadonly", booleanAttribute], isLoading: ["isLoading", "isLoading", booleanAttribute], hasChips: ["hasChips", "hasChips", booleanAttribute], isAsync: ["isAsync", "isAsync", booleanAttribute], isChipsSorted: ["isChipsSorted", "isChipsSorted", booleanAttribute], isItemsSorted: ["isItemsSorted", "isItemsSorted", booleanAttribute], isChipsRemovable: ["isChipsRemovable", "isChipsRemovable", booleanAttribute], isDuplicateValueAllowed: ["isDuplicateValueAllowed", "isDuplicateValueAllowed", booleanAttribute], isAddOnBlur: ["isAddOnBlur", "isAddOnBlur", booleanAttribute], isForceSelection: ["isForceSelection", "isForceSelection", booleanAttribute], maxVisibleChipsCount: ["maxVisibleChipsCount", "maxVisibleChipsCount", numberAttribute], chipsLabelTruncateCount: ["chipsLabelTruncateCount", "chipsLabelTruncateCount", numberAttribute], isMaxVisibleChipsOpened: ["isMaxVisibleChipsOpened", "isMaxVisibleChipsOpened", booleanAttribute], isChipsDragAndDrop: ["isChipsDragAndDrop", "isChipsDragAndDrop", booleanAttribute] }, outputs: { panelClose: "panelClose", panelOpen: "panelOpen", inputFocus: "inputFocus", inputBlur: "inputBlur", clear: "clear", selectionChange: "selectionChange", itemAdd: "itemAdd", itemRemove: "itemRemove", inputChange: "inputChange", chipDragStart: "chipDragStart", chipDragRelease: "chipDragRelease", chipDrop: "chipDrop" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], viewQueries: [{ propertyName: "templatePortalContent", first: true, predicate: ["templatePortalContent"], descendants: true }, { propertyName: "inputContainerRef", first: true, predicate: ["inputContainerRef"], descendants: true }, { propertyName: "virtualScrolling", first: true, predicate: ["virtualScrolling"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef }], usesOnChanges: true, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent"] }], ngImport: i0, template: "<div class=\"eui-autocomplete__wrapper\">\n    @if (chipsPosition === 'bottom') {\n        <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n    }\n    @if (isChipsPositionInside || (hasChips && chips?.length > 0)) {\n        <eui-chip-list\n            [chips]=\"chips\"\n            isGrid=\"true\"\n            [isChipsRemovable]=\"isChipsRemovable && !isReadonly\"\n            [maxVisibleChipsCount]=\"maxVisibleChipsCount\"\n            [isMaxVisibleChipsOpened]=\"isMaxVisibleChipsOpened\"\n            [chipsLabelTruncateCount]=\"chipsLabelTruncateCount\"\n            [toggleLinkMoreLabel]=\"toggleLinkMoreLabel\"\n            [toggleLinkLessLabel]=\"toggleLinkLessLabel\"\n            [isChipsDragAndDrop]=\"isChipsDragAndDrop\"\n            [dragAndDropSourceName]=\"dragAndDropSourceName\"\n            [dragAndDropConnectedTo]=\"dragAndDropConnectedTo\"\n            (chipDrop)=\"onChipDropped($event)\"\n            (chipDragStart)=\"onChipDragStarted($event)\"\n            (chipDragRelease)=\"onChipDragReleased($event)\"\n            (chipRemove)=\"onChipRemove($event)\">\n            <euiChipListAppendContent>\n                @if (chipsPosition === 'inside') {\n                    <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n                }\n            </euiChipListAppendContent>\n        </eui-chip-list>\n    }\n    @if (chipsPosition === 'top') {\n        <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n    }\n</div>\n\n<ng-template #control>\n    @if (!hasChips || (hasChips && !isReadonly)) {\n        <div class=\"eui-autocomplete__input-container {{ classList }}\" #inputContainerRef>\n            <input\n                [attr.id]=\"inputId\"\n                #input\n                euiInputText\n                [euiClearable]=\"!isReadonly && !isDisabled && !isLoading\"\n                [euiLoading]=\"isLoading\"\n                [formControl]=\"autocompleteControl\"\n                class=\"eui-autocomplete__input {{ classList }}\"\n                placeholder=\"{{ placeholder }}\"\n                autocomplete=\"off\"\n                [readonly]=\"isReadonly\"\n                (clear)=\"onClear()\"\n                (click)=\"openPanel()\"\n                (focus)=\"onFocus()\"\n                (blur)=\"onBlur()\"\n                [attr.aria-controls]=\"isOpen ? 'eui-autocomplete__panel' : null\"\n                [attr.aria-label]=\"autocompleteControl.value?.length > 0 ? autocompleteControl.value : 'Input field without value'\"\n                [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n                aria-autocomplete=\"both\"\n                aria-haspopup=\"true\" />\n        </div>\n    }\n</ng-template>\n\n<ng-template #templatePortalContent>\n    <div\n        id=\"eui-autocomplete__panel\"\n        class=\"eui-autocomplete__panel\"\n        [@panelAnimation]=\"isOpen ? 'visible' : 'hidden'\"\n        role=\"listbox\"\n        aria-live=\"polite\"\n        aria-label=\"Autocomplete panel\">\n        <cdk-virtual-scroll-viewport\n            #virtualScrolling\n            [itemSize]=\"itemSize\"\n            tabindex=\"0\"\n            minBufferPx=\"500\"\n            maxBufferPx=\"750\"\n            [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n            @if (groupBy) {\n                @for (distinctOptionGroup of distinctOptionGroups; let i = $index; track distinctOptionGroup) {\n                        @if ((groupedOptions | async)[distinctOptionGroup].options.length > 0) {\n                            <eui-autocomplete-option-group [label]=\"distinctOptionGroup\">\n                                <div class=\"eui-autocomplete-option-group__label\">\n                                    @if (autocompleteOptGroupTemplate) {\n                                        <ng-template\n                                            [ngTemplateOutlet]=\"autocompleteOptGroupTemplate\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: { label: distinctOptionGroup } }\">\n                                        </ng-template>\n                                    } @else {\n                                        {{ distinctOptionGroup }}\n                                    }\n                                </div>\n                                <div class=\"eui-autocomplete-option-group__options\">\n                                    @for (autocompleteOption of (groupedOptions | async)[distinctOptionGroup].options; let j = $index; track autocompleteOption.id) {\n                                        <eui-autocomplete-option\n                                            isGroupItem\n                                            [isActive]=\"selectedOptionIndex === (groupedOptions | async)[distinctOptionGroup].ancestorLength + j\"\n                                            [isDisabled]=\"autocompleteOption.isDisabled\"\n                                            [attr.aria-disabled]=\"autocompleteOption.isDisabled\"\n                                            [euiVariant]=\"autocompleteOption.typeClass\"\n                                            (click)=\"onOptionSelected(autocompleteOption)\">\n                                            @if (autocompleteOptionTemplate) {\n                                                <ng-template\n                                                    [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n                                                    [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\">\n                                                </ng-template>\n                                            } @else {\n                                                @if (autocompleteOption.iconClass) {\n                                                    <span class=\"{{ autocompleteOption.iconClass }}\"></span>\n                                                } @else if (autocompleteOption.iconSvgName) {\n                                                    <eui-icon-svg icon=\"{{ autocompleteOption.iconSvgName }}\"></eui-icon-svg>\n                                                }\n                                                {{ autocompleteOption.label }}\n                                            }\n                                        </eui-autocomplete-option>\n                                    }\n                                </div>\n                            </eui-autocomplete-option-group>\n                        }\n                }\n            } @else {\n                <eui-autocomplete-option\n                    *cdkVirtualFor=\"let autocompleteOption of autocompleteOptions | async; let i = index; trackBy: optionsTrackByFn\"\n                    [isActive]=\"selectedOptionIndex === i\"\n                    [isDisabled]=\"autocompleteOption.isDisabled\"\n                    [attr.aria-disabled]=\"autocompleteOption.isDisabled\"\n                    [euiVariant]=\"autocompleteOption.typeClass\"\n                    (click)=\"onOptionSelected(autocompleteOption)\">\n                    @if (autocompleteOptionTemplate) {\n                        <ng-template\n                            [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\">\n                        </ng-template>\n                    } @else {\n                        @if (autocompleteOption.iconClass) {\n                            <span class=\"{{ autocompleteOption.iconClass }}\"></span>\n                        } @else if (autocompleteOption.iconSvgName) {\n                            <eui-icon-svg icon=\"{{ autocompleteOption.iconSvgName }}\"></eui-icon-svg>\n                        }\n                        {{ autocompleteOption.label }}\n                    }\n                </eui-autocomplete-option>\n            }\n        </cdk-virtual-scroll-viewport>\n    </div>\n</ng-template>\n", styles: [".eui-19 .eui-autocomplete{display:flex;width:100%}.eui-19 .eui-autocomplete__wrapper{display:flex;flex-direction:column;width:100%}.eui-19 .eui-autocomplete__wrapper .eui-autocomplete__input-container{display:flex;width:100%}.eui-19 .eui-autocomplete__panel-container .eui-autocomplete__panel{box-shadow:var(--eui-sh-8);width:100%}.eui-19 .eui-autocomplete__panel-container.eui-autocomplete__panel-container--no-option .eui-autocomplete__panel{box-shadow:none}.eui-19 .eui-autocomplete.eui-autocomplete--chips-position-top:not(.eui-autocomplete--readonly) .eui-chip-list-container{margin-bottom:var(--eui-s-xs)}.eui-19 .eui-autocomplete.eui-autocomplete--chips-position-top:not(.eui-autocomplete--readonly) .eui-chip-list-wrapper{gap:unset!important}.eui-19 .eui-autocomplete.eui-autocomplete--chips-position-top:not(.eui-autocomplete--readonly) .eui-chip-list-wrapper .eui-chip-list__expand-button-wrapper{margin-left:var(--eui-s-xs)}.eui-19 .eui-autocomplete.eui-autocomplete--chips-position-inside:not(.eui-autocomplete--readonly) .eui-autocomplete__wrapper{background-color:var(--eui-c-surface-container);border:var(--eui-bw-xs) solid var(--eui-c-s-secondary-border-light);border-radius:var(--eui-br-m);padding:var(--eui-s-xs)}.eui-19 .eui-autocomplete.eui-autocomplete--chips-position-inside:not(.eui-autocomplete--readonly) .eui-autocomplete__wrapper .eui-chip-list .eui-chip-list-container{margin-bottom:unset}.eui-19 .eui-autocomplete.eui-autocomplete--chips-position-inside:not(.eui-autocomplete--readonly) .eui-autocomplete__wrapper .eui-chip-list .eui-chip-list__group{width:100%}.eui-19 .eui-autocomplete.eui-autocomplete--chips-position-inside:not(.eui-autocomplete--readonly) .eui-autocomplete__wrapper .eui-chip-list euichiplistappendcontent:not(:empty){flex-grow:1}.eui-19 .eui-autocomplete.eui-autocomplete--chips-position-inside:not(.eui-autocomplete--readonly) .eui-autocomplete__wrapper .eui-chip-list eui-chip-list-append-content:not(:empty){flex-grow:1}.eui-19 .eui-autocomplete.eui-autocomplete--chips-position-bottom:not(.eui-autocomplete--readonly) .eui-chip-list{margin-top:var(--eui-s-xs)}.eui-19 button~.eui-autocomplete .eui-autocomplete__input,.eui-19 .eui-input-group-addon-item~.eui-autocomplete .eui-autocomplete__input{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.eui-19 .eui-autocomplete:has(+button) .eui-autocomplete__input{border-top-right-radius:0;border-bottom-right-radius:0}.eui-19 .eui-autocomplete:has(+.eui-input-group-addon-item) .eui-autocomplete__input{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.eui-19 .eui-autocomplete-option-group .eui-autocomplete-option-group__label{align-items:center;border-left:var(--eui-bw-m) solid transparent;cursor:pointer;display:flex;font-weight:700;min-height:var(--eui-s-3xl);padding-left:var(--eui-s-s);padding-right:var(--eui-s-s)}.eui-19 .eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-icon,.eui-19 .eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-icon-svg,.eui-19 .eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-flag-icon{margin-right:var(--eui-s-2xs)}.eui-19 .eui-autocomplete-option{align-items:center;border-left:var(--eui-bw-m) solid transparent;cursor:pointer;display:flex;min-height:var(--eui-s-3xl);padding-left:var(--eui-s-s);padding-right:var(--eui-s-s)}.eui-19 .eui-autocomplete-option:hover{background-color:var(--eui-c-hover)}.eui-19 .eui-autocomplete-option--group-item{padding-left:var(--eui-s-l)}.eui-19 .eui-autocomplete-option .eui-icon,.eui-19 .eui-autocomplete-option .eui-icon-svg,.eui-19 .eui-autocomplete-option .eui-flag-icon{margin-right:var(--eui-s-xs)}.eui-19 .eui-autocomplete-option--primary{border-left-color:var(--eui-c-s-primary-base)}.eui-19 .eui-autocomplete-option--secondary{border-left-color:var(--eui-c-s-secondary-border)}.eui-19 .eui-autocomplete-option--info{border-left-color:var(--eui-c-s-info-base)}.eui-19 .eui-autocomplete-option--success{border-left-color:var(--eui-c-s-success-base)}.eui-19 .eui-autocomplete-option--warning{border-left-color:var(--eui-c-s-warning-base)}.eui-19 .eui-autocomplete-option--danger{border-left-color:var(--eui-c-s-danger-base)}.eui-19 .eui-autocomplete-option--accent{border-left-color:var(--eui-c-s-accent-border)}.eui-19 .eui-autocomplete-option--active{background-color:var(--eui-c-active-bg)}.eui-19 .eui-autocomplete-option--disabled{cursor:default;opacity:.4}.eui-19 .eui-autocomplete-option--disabled:hover{background:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: EuiAutocompleteOptionComponent, selector: "eui-autocomplete-option", inputs: ["isActive", "isDisabled", "isGroupItem"] }, { kind: "component", type: EuiAutocompleteOptionGroupComponent, selector: "eui-autocomplete-option-group", inputs: ["label"] }, { kind: "component", type: i4.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }, { kind: "directive", type: i5.EuiChipListAppendContentDirective, selector: "euiChipListAppendContent" }, { kind: "component", type: i5.EuiChipListComponent, selector: "eui-chip-list, div[euiChipList], ul[euiChipList]", inputs: ["chips", "toggleLinkMoreLabel", "toggleLinkLessLabel", "chipsSortOrder", "dragAndDropSourceName", "dragAndDropConnectedTo", "ariaLabel", "dropListOrientation", "isSquared", "isChipsRemovable", "isMaxVisibleChipsOpened", "isChipsSorted", "isChipsDragAndDrop", "isGrid", "maxVisibleChipsCount", "chipsLabelTruncateCount"], outputs: ["chipsInit", "chipRemove", "chipDragStart", "chipDragRelease", "chipDrop", "chiplistFocus"] }, { kind: "component", type: i6.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }], animations: [panelAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAutocompleteComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-autocomplete, input[euiAutocomplete]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                        NgTemplateOutlet,
                        AsyncPipe,
                        ReactiveFormsModule,
                        OverlayModule,
                        ScrollingModule,
                        A11yModule,
                        EuiAutocompleteOptionComponent,
                        EuiAutocompleteOptionGroupComponent,
                        ...EUI_INPUT_TEXT,
                        ...EUI_CHIP_LIST,
                        ...EUI_CHIP,
                        ...EUI_ICON,
                    ], animations: [panelAnimation], hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiSecondary',
                                'euiSuccess',
                                'euiInfo',
                                'euiWarning',
                                'euiDanger',
                                'euiAccent',
                            ],
                        },
                    ], template: "<div class=\"eui-autocomplete__wrapper\">\n    @if (chipsPosition === 'bottom') {\n        <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n    }\n    @if (isChipsPositionInside || (hasChips && chips?.length > 0)) {\n        <eui-chip-list\n            [chips]=\"chips\"\n            isGrid=\"true\"\n            [isChipsRemovable]=\"isChipsRemovable && !isReadonly\"\n            [maxVisibleChipsCount]=\"maxVisibleChipsCount\"\n            [isMaxVisibleChipsOpened]=\"isMaxVisibleChipsOpened\"\n            [chipsLabelTruncateCount]=\"chipsLabelTruncateCount\"\n            [toggleLinkMoreLabel]=\"toggleLinkMoreLabel\"\n            [toggleLinkLessLabel]=\"toggleLinkLessLabel\"\n            [isChipsDragAndDrop]=\"isChipsDragAndDrop\"\n            [dragAndDropSourceName]=\"dragAndDropSourceName\"\n            [dragAndDropConnectedTo]=\"dragAndDropConnectedTo\"\n            (chipDrop)=\"onChipDropped($event)\"\n            (chipDragStart)=\"onChipDragStarted($event)\"\n            (chipDragRelease)=\"onChipDragReleased($event)\"\n            (chipRemove)=\"onChipRemove($event)\">\n            <euiChipListAppendContent>\n                @if (chipsPosition === 'inside') {\n                    <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n                }\n            </euiChipListAppendContent>\n        </eui-chip-list>\n    }\n    @if (chipsPosition === 'top') {\n        <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n    }\n</div>\n\n<ng-template #control>\n    @if (!hasChips || (hasChips && !isReadonly)) {\n        <div class=\"eui-autocomplete__input-container {{ classList }}\" #inputContainerRef>\n            <input\n                [attr.id]=\"inputId\"\n                #input\n                euiInputText\n                [euiClearable]=\"!isReadonly && !isDisabled && !isLoading\"\n                [euiLoading]=\"isLoading\"\n                [formControl]=\"autocompleteControl\"\n                class=\"eui-autocomplete__input {{ classList }}\"\n                placeholder=\"{{ placeholder }}\"\n                autocomplete=\"off\"\n                [readonly]=\"isReadonly\"\n                (clear)=\"onClear()\"\n                (click)=\"openPanel()\"\n                (focus)=\"onFocus()\"\n                (blur)=\"onBlur()\"\n                [attr.aria-controls]=\"isOpen ? 'eui-autocomplete__panel' : null\"\n                [attr.aria-label]=\"autocompleteControl.value?.length > 0 ? autocompleteControl.value : 'Input field without value'\"\n                [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n                aria-autocomplete=\"both\"\n                aria-haspopup=\"true\" />\n        </div>\n    }\n</ng-template>\n\n<ng-template #templatePortalContent>\n    <div\n        id=\"eui-autocomplete__panel\"\n        class=\"eui-autocomplete__panel\"\n        [@panelAnimation]=\"isOpen ? 'visible' : 'hidden'\"\n        role=\"listbox\"\n        aria-live=\"polite\"\n        aria-label=\"Autocomplete panel\">\n        <cdk-virtual-scroll-viewport\n            #virtualScrolling\n            [itemSize]=\"itemSize\"\n            tabindex=\"0\"\n            minBufferPx=\"500\"\n            maxBufferPx=\"750\"\n            [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n            @if (groupBy) {\n                @for (distinctOptionGroup of distinctOptionGroups; let i = $index; track distinctOptionGroup) {\n                        @if ((groupedOptions | async)[distinctOptionGroup].options.length > 0) {\n                            <eui-autocomplete-option-group [label]=\"distinctOptionGroup\">\n                                <div class=\"eui-autocomplete-option-group__label\">\n                                    @if (autocompleteOptGroupTemplate) {\n                                        <ng-template\n                                            [ngTemplateOutlet]=\"autocompleteOptGroupTemplate\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: { label: distinctOptionGroup } }\">\n                                        </ng-template>\n                                    } @else {\n                                        {{ distinctOptionGroup }}\n                                    }\n                                </div>\n                                <div class=\"eui-autocomplete-option-group__options\">\n                                    @for (autocompleteOption of (groupedOptions | async)[distinctOptionGroup].options; let j = $index; track autocompleteOption.id) {\n                                        <eui-autocomplete-option\n                                            isGroupItem\n                                            [isActive]=\"selectedOptionIndex === (groupedOptions | async)[distinctOptionGroup].ancestorLength + j\"\n                                            [isDisabled]=\"autocompleteOption.isDisabled\"\n                                            [attr.aria-disabled]=\"autocompleteOption.isDisabled\"\n                                            [euiVariant]=\"autocompleteOption.typeClass\"\n                                            (click)=\"onOptionSelected(autocompleteOption)\">\n                                            @if (autocompleteOptionTemplate) {\n                                                <ng-template\n                                                    [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n                                                    [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\">\n                                                </ng-template>\n                                            } @else {\n                                                @if (autocompleteOption.iconClass) {\n                                                    <span class=\"{{ autocompleteOption.iconClass }}\"></span>\n                                                } @else if (autocompleteOption.iconSvgName) {\n                                                    <eui-icon-svg icon=\"{{ autocompleteOption.iconSvgName }}\"></eui-icon-svg>\n                                                }\n                                                {{ autocompleteOption.label }}\n                                            }\n                                        </eui-autocomplete-option>\n                                    }\n                                </div>\n                            </eui-autocomplete-option-group>\n                        }\n                }\n            } @else {\n                <eui-autocomplete-option\n                    *cdkVirtualFor=\"let autocompleteOption of autocompleteOptions | async; let i = index; trackBy: optionsTrackByFn\"\n                    [isActive]=\"selectedOptionIndex === i\"\n                    [isDisabled]=\"autocompleteOption.isDisabled\"\n                    [attr.aria-disabled]=\"autocompleteOption.isDisabled\"\n                    [euiVariant]=\"autocompleteOption.typeClass\"\n                    (click)=\"onOptionSelected(autocompleteOption)\">\n                    @if (autocompleteOptionTemplate) {\n                        <ng-template\n                            [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\">\n                        </ng-template>\n                    } @else {\n                        @if (autocompleteOption.iconClass) {\n                            <span class=\"{{ autocompleteOption.iconClass }}\"></span>\n                        } @else if (autocompleteOption.iconSvgName) {\n                            <eui-icon-svg icon=\"{{ autocompleteOption.iconSvgName }}\"></eui-icon-svg>\n                        }\n                        {{ autocompleteOption.label }}\n                    }\n                </eui-autocomplete-option>\n            }\n        </cdk-virtual-scroll-viewport>\n    </div>\n</ng-template>\n", styles: [".eui-19 .eui-autocomplete{display:flex;width:100%}.eui-19 .eui-autocomplete__wrapper{display:flex;flex-direction:column;width:100%}.eui-19 .eui-autocomplete__wrapper .eui-autocomplete__input-container{display:flex;width:100%}.eui-19 .eui-autocomplete__panel-container .eui-autocomplete__panel{box-shadow:var(--eui-sh-8);width:100%}.eui-19 .eui-autocomplete__panel-container.eui-autocomplete__panel-container--no-option .eui-autocomplete__panel{box-shadow:none}.eui-19 .eui-autocomplete.eui-autocomplete--chips-position-top:not(.eui-autocomplete--readonly) .eui-chip-list-container{margin-bottom:var(--eui-s-xs)}.eui-19 .eui-autocomplete.eui-autocomplete--chips-position-top:not(.eui-autocomplete--readonly) .eui-chip-list-wrapper{gap:unset!important}.eui-19 .eui-autocomplete.eui-autocomplete--chips-position-top:not(.eui-autocomplete--readonly) .eui-chip-list-wrapper .eui-chip-list__expand-button-wrapper{margin-left:var(--eui-s-xs)}.eui-19 .eui-autocomplete.eui-autocomplete--chips-position-inside:not(.eui-autocomplete--readonly) .eui-autocomplete__wrapper{background-color:var(--eui-c-surface-container);border:var(--eui-bw-xs) solid var(--eui-c-s-secondary-border-light);border-radius:var(--eui-br-m);padding:var(--eui-s-xs)}.eui-19 .eui-autocomplete.eui-autocomplete--chips-position-inside:not(.eui-autocomplete--readonly) .eui-autocomplete__wrapper .eui-chip-list .eui-chip-list-container{margin-bottom:unset}.eui-19 .eui-autocomplete.eui-autocomplete--chips-position-inside:not(.eui-autocomplete--readonly) .eui-autocomplete__wrapper .eui-chip-list .eui-chip-list__group{width:100%}.eui-19 .eui-autocomplete.eui-autocomplete--chips-position-inside:not(.eui-autocomplete--readonly) .eui-autocomplete__wrapper .eui-chip-list euichiplistappendcontent:not(:empty){flex-grow:1}.eui-19 .eui-autocomplete.eui-autocomplete--chips-position-inside:not(.eui-autocomplete--readonly) .eui-autocomplete__wrapper .eui-chip-list eui-chip-list-append-content:not(:empty){flex-grow:1}.eui-19 .eui-autocomplete.eui-autocomplete--chips-position-bottom:not(.eui-autocomplete--readonly) .eui-chip-list{margin-top:var(--eui-s-xs)}.eui-19 button~.eui-autocomplete .eui-autocomplete__input,.eui-19 .eui-input-group-addon-item~.eui-autocomplete .eui-autocomplete__input{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.eui-19 .eui-autocomplete:has(+button) .eui-autocomplete__input{border-top-right-radius:0;border-bottom-right-radius:0}.eui-19 .eui-autocomplete:has(+.eui-input-group-addon-item) .eui-autocomplete__input{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.eui-19 .eui-autocomplete-option-group .eui-autocomplete-option-group__label{align-items:center;border-left:var(--eui-bw-m) solid transparent;cursor:pointer;display:flex;font-weight:700;min-height:var(--eui-s-3xl);padding-left:var(--eui-s-s);padding-right:var(--eui-s-s)}.eui-19 .eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-icon,.eui-19 .eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-icon-svg,.eui-19 .eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-flag-icon{margin-right:var(--eui-s-2xs)}.eui-19 .eui-autocomplete-option{align-items:center;border-left:var(--eui-bw-m) solid transparent;cursor:pointer;display:flex;min-height:var(--eui-s-3xl);padding-left:var(--eui-s-s);padding-right:var(--eui-s-s)}.eui-19 .eui-autocomplete-option:hover{background-color:var(--eui-c-hover)}.eui-19 .eui-autocomplete-option--group-item{padding-left:var(--eui-s-l)}.eui-19 .eui-autocomplete-option .eui-icon,.eui-19 .eui-autocomplete-option .eui-icon-svg,.eui-19 .eui-autocomplete-option .eui-flag-icon{margin-right:var(--eui-s-xs)}.eui-19 .eui-autocomplete-option--primary{border-left-color:var(--eui-c-s-primary-base)}.eui-19 .eui-autocomplete-option--secondary{border-left-color:var(--eui-c-s-secondary-border)}.eui-19 .eui-autocomplete-option--info{border-left-color:var(--eui-c-s-info-base)}.eui-19 .eui-autocomplete-option--success{border-left-color:var(--eui-c-s-success-base)}.eui-19 .eui-autocomplete-option--warning{border-left-color:var(--eui-c-s-warning-base)}.eui-19 .eui-autocomplete-option--danger{border-left-color:var(--eui-c-s-danger-base)}.eui-19 .eui-autocomplete-option--accent{border-left-color:var(--eui-c-s-accent-border)}.eui-19 .eui-autocomplete-option--active{background-color:var(--eui-c-active-bg)}.eui-19 .eui-autocomplete-option--disabled{cursor:default;opacity:.4}.eui-19 .eui-autocomplete-option--disabled:hover{background:none}\n"] }]
        }], ctorParameters: () => [], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], inputId: [{
                type: Input
            }], autocompleteData: [{
                type: Input
            }], visibleOptions: [{
                type: Input
            }], matching: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], autocompleteDataSelected: [{
                type: Input
            }], chipsSortOrder: [{
                type: Input
            }], itemsSortOrder: [{
                type: Input
            }], chipsPosition: [{
                type: Input
            }], groupBy: [{
                type: Input
            }], toggleLinkMoreLabel: [{
                type: Input
            }], toggleLinkLessLabel: [{
                type: Input
            }], classList: [{
                type: Input
            }], panelWidth: [{
                type: Input
            }], dragAndDropSourceName: [{
                type: Input
            }], dragAndDropConnectedTo: [{
                type: Input
            }], isFreeValueAllowed: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isReadonly: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isLoading: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasChips: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isAsync: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isChipsSorted: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isItemsSorted: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isChipsRemovable: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isDuplicateValueAllowed: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isAddOnBlur: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isForceSelection: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], maxVisibleChipsCount: [{
                type: Input,
                args: [{ transform: numberAttribute }]
            }], chipsLabelTruncateCount: [{
                type: Input,
                args: [{ transform: numberAttribute }]
            }], isMaxVisibleChipsOpened: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isChipsDragAndDrop: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], templates: [{
                type: ContentChildren,
                args: [EuiTemplateDirective]
            }], templatePortalContent: [{
                type: ViewChild,
                args: ['templatePortalContent']
            }], inputContainerRef: [{
                type: ViewChild,
                args: ['inputContainerRef']
            }], virtualScrolling: [{
                type: ViewChild,
                args: ['virtualScrolling']
            }], input: [{
                type: ViewChild,
                args: ['input', { read: ElementRef }]
            }], panelClose: [{
                type: Output
            }], panelOpen: [{
                type: Output
            }], inputFocus: [{
                type: Output
            }], inputBlur: [{
                type: Output
            }], clear: [{
                type: Output
            }], selectionChange: [{
                type: Output
            }], itemAdd: [{
                type: Output
            }], itemRemove: [{
                type: Output
            }], inputChange: [{
                type: Output
            }], chipDragStart: [{
                type: Output
            }], chipDragRelease: [{
                type: Output
            }], chipDrop: [{
                type: Output
            }] } });

/**
 * @description
 * Validator checking if the user choose the value in the panel.
 *
 * @returns A validator function that returns an error with the `isInData` to false and a list of invalid values if the validation
 * check fails, otherwise `null`.
 */
const euiAutocompleteForceSelectionFromData = (control) => {
    if (control.value) {
        const isInData = Array.isArray(control.value) ? control.value.every(obj => 'id' in obj) : control.value.id !== undefined;
        const invalidValues = Array.isArray(control.value) ? control.value.filter(v => v.id === undefined) : control.value;
        return !isInData ? { isInData: { isInData, invalidValues } } : null;
    }
    return null;
};

/**
 * @description
 * Module that provides the EuiAutocomplete component and its dependencies
 *
 * @deprecated Use {@link EUI_AUTOCOMPLETE} instead.
 */
class EuiAutocompleteModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: EuiAutocompleteModule, imports: [EuiAutocompleteComponent,
            EuiAutocompleteOptionComponent,
            EuiAutocompleteOptionGroupComponent], exports: [EuiAutocompleteComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAutocompleteModule, imports: [EuiAutocompleteComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAutocompleteModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        EuiAutocompleteComponent,
                        EuiAutocompleteOptionComponent,
                        EuiAutocompleteOptionGroupComponent,
                    ],
                    exports: [EuiAutocompleteComponent],
                }]
        }] });

const EUI_AUTOCOMPLETE = [
    EuiAutocompleteComponent,
    EuiAutocompleteOptionComponent,
    EuiAutocompleteOptionGroupComponent,
];

/**
 * Generated bundle index. Do not edit.
 */

export { EUI_AUTOCOMPLETE, EuiAutocompleteComponent, EuiAutocompleteModule, EuiAutocompleteOptionComponent, EuiAutocompleteOptionGroupComponent, euiAutocompleteForceSelectionFromData };
//# sourceMappingURL=eui-components-eui-autocomplete.mjs.map
