@progress/kendo-angular-dropdowns/autocomplete/autocomplete.component.d.ts

A wide variety of native Angular dropdown components including AutoComplete, ComboBox, DropDownList, DropDownTree, MultiColumnComboBox, MultiSelect, and MultiSelectTree

/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Renderer2, ElementRef, EventEmitter, ViewContainerRef, TemplateRef, OnDestroy, SimpleChanges, OnChanges, ChangeDetectorRef, NgZone, AfterViewInit, Injector } from '@angular/core';
import { SuffixTemplateDirective, PrefixTemplateDirective } from '@progress/kendo-angular-common';
import { AdaptiveSize, AdaptiveService } from '@progress/kendo-angular-utils';
import { ControlValueAccessor, FormControl } from '@angular/forms';
import { SearchBarComponent } from '../common/searchbar.component';
import { ItemTemplateDirective } from '../common/templates/item-template.directive';
import { HeaderTemplateDirective } from '../common/templates/header-template.directive';
import { FooterTemplateDirective } from '../common/templates/footer-template.directive';
import { GroupTemplateDirective } from '../common/templates/group-template.directive';
import { FixedGroupTemplateDirective } from '../common/templates/fixed-group-template.directive';
import { PopupSettings } from '../common/models/popup-settings';
import { SelectionService } from '../common/selection/selection.service';
import { NavigationService, NavigationEvent } from '../common/navigation/navigation.service';
import { DisabledItemsService } from '../common/disabled-items/disabled-items.service';
import { ItemDisabledFn } from '../common/disabled-items/item-disabled';
import { AdaptiveMode } from '../common/util';
import { NoDataTemplateDirective } from '../common/templates/no-data-template.directive';
import { PreventableEvent } from '../common/models/preventable-event';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { PopupService, PopupRef } from '@progress/kendo-angular-popup';
import { FilterableComponent } from '../common/filtering/filterable-component';
import { DataService } from '../common/data.service';
import { ListComponent } from '../common/list.component';
import { VirtualizationSettings } from '../common/models/virtualization-settings';
import { PageChangeEvent } from '../common/models/page-change-event';
import { DropDownSize } from '../common/models/size';
import { DropDownRounded } from '../common/models/rounded';
import { DropDownFillMode } from '../common/models/fillmode';
import { SVGIcon } from '@progress/kendo-svg-icons';
import { ActionSheetComponent } from '@progress/kendo-angular-navigation';
import { TextBoxComponent } from '@progress/kendo-angular-inputs';
import { ResponsiveRendererComponent } from '../common/action-sheet.component';
import * as i0 from "@angular/core";
/**
 * @hidden
 */
export declare const AUTOCOMPLETE_VALUE_ACCESSOR: any;
/**
 * Represents the [Kendo UI AutoComplete component for Angular]({% slug overview_autocomplete %}).
 *
 * @example
 * ```ts
 * _@Component({
 * selector: 'my-app',
 * template: `
 *  <kendo-autocomplete
 *      [data]="listItems"
 *      [placeholder]="placeholder"
 *  >
 * `
 * })
 * class AppComponent {
 *   public placeholder: string = 'Type "it" for suggestions';
 *   public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
 * }
 * ```
 */
export declare class AutoCompleteComponent implements ControlValueAccessor, OnDestroy, AfterViewInit, OnChanges, FilterableComponent {
    private localization;
    private dataService;
    private popupService;
    private selectionService;
    private navigationService;
    private disabledItemsService;
    private _zone;
    private cdr;
    private renderer;
    hostElement: ElementRef;
    private injector;
    private adaptiveService;
    /**
     * @hidden
     */
    animationDuration: number;
    /**
     * @hidden
     */
    xIcon: SVGIcon;
    /**
     * @hidden
     */
    responsiveRendererComponent: ResponsiveRendererComponent;
    /**
     * @hidden
     */
    get actionSheet(): ActionSheetComponent;
    /**
     * @hidden
     */
    get actionSheetSearchBar(): TextBoxComponent;
    get width(): any;
    get height(): any;
    get listContainerClasses(): Object;
    get suggestion(): string;
    get appendTo(): ViewContainerRef;
    get clearButtonVisiblity(): string;
    get ariaControls(): string;
    /**
     * @hidden
     */
    get isControlRequired(): boolean;
    dataItem: any;
    /**
     * Toggles the visibility of the popup or actionSheet.
     * If you use the `toggle` method to open or close the popup or actionSheet, the `open` and `close` events will not be fired.
     *
     * @param open - The state of the popup.
     */
    toggle(open?: boolean): void;
    /**
     * Returns the current open state. Returns `true` if the popup or actionSheet is open.
     */
    get isOpen(): boolean;
    /**
     * @hidden
     */
    handleClick(): void;
    /**
     * @hidden
     */
    togglePopup(open: boolean): void;
    get activeDescendant(): string;
    /**
     * Defines whether the first match from the suggestions list will be automatically focused.
     * By default, `highlightFirst` is set to `true`.
     */
    highlightFirst: boolean;
    /**
     * Shows or hides the current group sticky header when using grouped data.
     * By default the sticky header is displayed ([see example]({% slug grouping_autocomplete %}#toc-sticky-header)).
     */
    showStickyHeader: boolean;
    /**
     * @hidden
     */
    focusableId: string;
    /**
     * Sets the data of the AutoComplete.
     *
     * > The data has to be provided in an array-like list.
     */
    set data(data: any);
    get data(): any;
    /**
     * Sets the value of the AutoComplete.
     */
    set value(newValue: string);
    get value(): string;
    /**
     * Specifies the `string` property of the data item that represents the item value.
     * If the data contains only primitive values, do not define it.
     *
     * > The `valueField` property can be set to point to a nested property value - e.g. `category.name`.
     */
    valueField: string;
    /**
     * The hint which is displayed when the component is empty.
     */
    placeholder: string;
    /**
     * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
     */
    adaptiveMode: AdaptiveMode;
    /**
     * Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
     * By default the ActionSheet title uses the text provided for the label of the AutoComplete.
     */
    title: string;
    /**
     * Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
     * By default the ActionSheet subtitle uses the text provided for the `placeholder` of the AutoComplete.
    */
    set subtitle(_subtitle: string);
    get subtitle(): string;
    /**
     * @hidden
     */
    get isAdaptiveModeEnabled(): boolean;
    /**
     * Configures the popup of the AutoComplete.
     *
     * The available options are:
     * - `animate: Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
     * - `width: Number | String`&mdash;Sets the width of the popup container. By default, the width of the host element is used. If set to `auto`, the component automatically adjusts the width of the popup and no item labels are wrapped. The `auto` mode is not supported when virtual scrolling is enabled.
     * - `height: Number`&mdash;Sets the height of the popup container.
     * - `popupClass: String`&mdash;Specifies a list of CSS classes that are used to style the popup.
     * - `appendTo: "root" | "component" | ViewContainerRef`&mdash;Specifies the component to which the popup will be appended.
     */
    set popupSettings(settings: PopupSettings);
    get popupSettings(): PopupSettings;
    /**
     * Sets the height of the options list in the popup. By default, `listHeight` is 200px.
     *
     * > The `listHeight` property affects only the list of options and not the whole popup container.
     * > To set the height of the popup container, use `popupSettings.height`.
     *
     * > When using `adaptiveMode` and the screen size is `small` or `medium` the `listHeight` property is set to null.
     */
    set listHeight(_listHeight: number);
    get listHeight(): number;
    private _listHeight;
    /**
     * Sets and gets the loading state of the AutoComplete.
     */
    loading: boolean;
    /**
     * @hidden
     *
     * If set to `true`, renders a button on hovering over the component.
     * Clicking this button resets the value of the component to `undefined` and triggers the `change` event.
     */
    clearButton: boolean;
    /**
     * Enables the auto-completion of the text based on the first data item.
     */
    suggest: boolean;
    /**
     * Sets the disabled state of the component. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_autocomplete#toc-managing-the-autocomplete-disabled-state-in-reactive-forms).
     */
    disabled: boolean;
    /**
     * Defines a Boolean function that is executed for each data item in the component
     * ([see examples]({% slug disableditems_autocomplete %})).
     * Determines whether the item will be disabled.
     */
    set itemDisabled(fn: ItemDisabledFn);
    /**
     * Sets the read-only state of the component.
     *
     * @default false
     */
    readonly: boolean;
    /**
     * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
     */
    tabindex: number;
    /**
     * @hidden
     */
    set tabIndex(tabIndex: number);
    get tabIndex(): number;
    /**
     * Enables the [filtering]({% slug filtering_autocomplete %}) functionality.
     * If set to `true`, the component emits the `filterChange` event.
     */
    filterable: boolean;
    /**
     * Enables the [virtualization]({% slug virtualization_autocomplete %}) functionality.
     */
    set virtual(settings: boolean | VirtualizationSettings);
    get virtual(): VirtualizationSettings;
    /**
     * Sets the size of the component.
     *
     * The possible values are:
     * * `small`
     * * `medium` (default)
     * * `large`
     * * `none`
     *
     */
    set size(size: DropDownSize);
    get size(): DropDownSize;
    /**
     * Sets the border radius of the component.
     *
     * The possible values are:
     * * `small`
     * * `medium` (default)
     * * `large`
     * * `full`
     * * `none`
     *
     */
    set rounded(rounded: DropDownRounded);
    get rounded(): DropDownRounded;
    /**
     * Sets the fillMode of the component.
     *
     * The possible values are:
     * * `flat`
     * * `solid` (default)
     * * `outline`
     * * `none`
     *
     */
    set fillMode(fillMode: DropDownFillMode);
    get fillMode(): DropDownFillMode;
    /**
     * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
     */
    inputAttributes: {
        [key: string]: string;
    };
    /**
     * Fires each time the value is changed&mdash;
     * when the component is blurred or the value is cleared through the **Clear** button
     * ([see example](slug:events_autocomplete)).
     * When the value of the component is programmatically changed to `ngModel` or `formControl`
     * through its API or form binding, the `valueChange` event is not triggered because it
     * might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
     */
    valueChange: EventEmitter<string>;
    /**
     * Fires each time the user types in the input field.
     * You can filter the source based on the passed filtration value
     * ([see example](slug:events_autocomplete)).
     */
    filterChange: EventEmitter<string>;
    /**
     * Fires each time the popup is about to open.
     * This event is preventable. If you cancel it, the popup will remain closed.
     */
    open: EventEmitter<PreventableEvent>;
    /**
     * Fires after the popup has been opened.
     */
    opened: EventEmitter<any>;
    /**
     * Fires each time the popup is about to close.
     * This event is preventable. If you cancel it, the popup will remain open.
     */
    close: EventEmitter<PreventableEvent>;
    /**
     * Fires after the popup has been closed.
     */
    closed: EventEmitter<any>;
    /**
     * Fires each time the user focuses the AutoComplete.
     */
    onFocus: EventEmitter<any>;
    /**
     * Fires each time the AutoComplete gets blurred.
     */
    onBlur: EventEmitter<any>;
    /**
     * Fires each time the user focuses the `input` element.
     */
    inputFocus: EventEmitter<any>;
    /**
     * Fires each time the `input` element gets blurred.
     */
    inputBlur: EventEmitter<any>;
    template: ItemTemplateDirective;
    headerTemplate: HeaderTemplateDirective;
    footerTemplate: FooterTemplateDirective;
    noDataTemplate: NoDataTemplateDirective;
    groupTemplate: GroupTemplateDirective;
    fixedGroupTemplate: FixedGroupTemplateDirective;
    /**
     * @hidden
     */
    suffixTemplate: SuffixTemplateDirective;
    /**
     * @hidden
     */
    prefixTemplate: PrefixTemplateDirective;
    container: ViewContainerRef;
    popupTemplate: TemplateRef<any>;
    searchbar: SearchBarComponent;
    optionsList: ListComponent;
    widgetClasses: boolean;
    get isFocused(): boolean;
    set isFocused(isFocused: boolean);
    get isDisabled(): boolean;
    get isLoading(): boolean;
    get dir(): any;
    text: string;
    listBoxId: string;
    optionPrefix: string;
    popupRef: PopupRef;
    /**
     * @hidden
     */
    windowSize: AdaptiveSize;
    /**
     * @hidden
     */
    get isActionSheetExpanded(): boolean;
    /**
     * @hidden
     */
    get isAdaptive(): boolean;
    /**
     * @hidden
     */
    get formControl(): FormControl;
    protected onChangeCallback: Function;
    protected onTouchedCallback: Function;
    constructor(localization: LocalizationService, dataService: DataService, popupService: PopupService, selectionService: SelectionService, navigationService: NavigationService, disabledItemsService: DisabledItemsService, _zone: NgZone, cdr: ChangeDetectorRef, renderer: Renderer2, hostElement: ElementRef, injector: Injector, adaptiveService: AdaptiveService);
    ngOnInit(): void;
    ngAfterViewInit(): void;
    ngOnDestroy(): void;
    ngOnChanges(changes: SimpleChanges): void;
    /**
     * Resets the value of the AutoComplete.
     * If you use the `reset` method to clear the value of the component,
     * the model will not update automatically and the `valueChange` event will not be fired.
     */
    reset(): void;
    /**
     * @hidden
     */
    messageFor(key: string): string;
    /**
     * @hidden
     */
    onAdaptiveTextBoxChange(text: string): void;
    /**
     * @hidden
     */
    clearValue(event: any): void;
    /**
     * @hidden
     */
    writeValue(value: any): void;
    /**
     * @hidden
     */
    registerOnChange(fn: any): void;
    /**
     * @hidden
     */
    registerOnTouched(fn: any): void;
    /**
     * @hidden
     */
    setDisabledState(isDisabled: boolean): void;
    /**
     * Focuses a specific item of the AutoComplete based on a provided index.
     * If null or invalid index is provided the focus will be removed.
     */
    focusItemAt(index: number): void;
    /**
     * Focuses the AutoComplete.
     */
    focus(): void;
    /**
     * Blurs the AutoComplete.
     */
    blur(): void;
    /**
     * @hidden
     */
    onResize(): void;
    protected emitChange(value: string): void;
    protected verifySettings(newValue: any): void;
    protected search(text: any, startFrom?: number): void;
    protected navigate(index: number): void;
    /**
     * @hidden
     */
    handleNavigate(event: any): void;
    protected handleEnter(event: NavigationEvent): void;
    protected handleEscape(): void;
    /**
     * @hidden
     */
    searchBarChange(text: string): void;
    /**
     * @hidden
     */
    onFilterChange(text: string): void;
    /**
     * @hidden
     */
    handleInputFocus(): void;
    /**
     * @hidden
     */
    handleFocus(): void;
    /**
     * @hidden
     */
    handleBlur(): void;
    /**
     * @hidden
     */
    handleInputBlur(): void;
    /**
     * @hidden
     */
    pageChange(event: PageChangeEvent): void;
    protected change(value: string): void;
    private popupMouseDownHandler;
    private _popupSettings;
    private _virtualSettings;
    private _open;
    private _value;
    private suggestedText;
    private backspacePressed;
    private subs;
    private valueChangeSubject;
    private touchstartDisposeHandler;
    private _subtitle;
    private wrapper;
    private _isFocused;
    private direction;
    private _size;
    private _rounded;
    private _fillMode;
    private subscribeEvents;
    private findIndex;
    private subscribeTouchEvents;
    private handleItemChange;
    private handleItemFocus;
    private createPopup;
    private destroyPopup;
    private _toggle;
    private triggerPopupEvents;
    private firstFocusableIndex;
    private findIndexPredicate;
    private setComponentClasses;
    private closeActionSheet;
    private openActionSheet;
    static ɵfac: i0.ɵɵFactoryDeclaration<AutoCompleteComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<AutoCompleteComponent, "kendo-autocomplete", ["kendoAutoComplete"], { "highlightFirst": { "alias": "highlightFirst"; "required": false; }; "showStickyHeader": { "alias": "showStickyHeader"; "required": false; }; "focusableId": { "alias": "focusableId"; "required": false; }; "data": { "alias": "data"; "required": false; }; "value": { "alias": "value"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "listHeight": { "alias": "listHeight"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "suggest": { "alias": "suggest"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "itemDisabled": { "alias": "itemDisabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "filterable": { "alias": "filterable"; "required": false; }; "virtual": { "alias": "virtual"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; }; }, { "valueChange": "valueChange"; "filterChange": "filterChange"; "open": "open"; "opened": "opened"; "close": "close"; "closed": "closed"; "onFocus": "focus"; "onBlur": "blur"; "inputFocus": "inputFocus"; "inputBlur": "inputBlur"; }, ["template", "headerTemplate", "footerTemplate", "noDataTemplate", "groupTemplate", "fixedGroupTemplate", "suffixTemplate", "prefixTemplate"], never, true, never>;
}