@progress/kendo-angular-dropdowns 6.0.3-dev.202203091003 → 7.0.0-next.202203232111

package/dist/es/autocomplete/autocomplete.component.js

@@ -1,1201 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-/* tslint:disable:member-ordering */
-import * as tslib_1 from "tslib";
-import { Component, Renderer2, forwardRef, ElementRef, Input, Output, EventEmitter, ContentChild, ViewChild, ViewContainerRef, TemplateRef, HostBinding, isDevMode, ChangeDetectorRef, NgZone, Optional, Inject } from '@angular/core';
-import { isDocumentAvailable, KendoInput, hasObservers } from '@progress/kendo-angular-common';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { validatePackage } from '@progress/kendo-licensing';
-import { packageMetadata } from '../package-metadata';
-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 { SelectionService } from '../common/selection/selection.service';
-import { NavigationService } from '../common/navigation/navigation.service';
-import { DisabledItemsService } from '../common/disabled-items/disabled-items.service';
-import { Subject, merge } from 'rxjs';
-import { isPresent, guid, getter, isUntouched, noop, inDropDown, getSizeClass, getRoundedClass, getFillModeClass } from '../common/util';
-import { NavigationAction } from '../common/navigation/navigation-action';
-import { NoDataTemplateDirective } from '../common/templates/no-data-template.directive';
-import { PreventableEvent } from '../common/models/preventable-event';
-import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { PopupService } 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 { normalizeVirtualizationSettings } from '../common/models/virtualization-settings';
-import { TOUCH_ENABLED } from '../common/constants/touch-enabled';
-var NO_VALUE = "";
-/**
- * @hidden
- */
-export var AUTOCOMPLETE_VALUE_ACCESSOR = {
-    multi: true,
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(function () { return AutoCompleteComponent; })
-};
-/**
- * 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"];
- * }
- * ```
- */
-var AutoCompleteComponent = /** @class */ (function () {
-    function AutoCompleteComponent(localization, dataService, popupService, selectionService, navigationService, disabledItemsService, _zone, cdr, renderer, hostElement, touchEnabled) {
-        this.localization = localization;
-        this.dataService = dataService;
-        this.popupService = popupService;
-        this.selectionService = selectionService;
-        this.navigationService = navigationService;
-        this.disabledItemsService = disabledItemsService;
-        this._zone = _zone;
-        this.cdr = cdr;
-        this.renderer = renderer;
-        this.hostElement = hostElement;
-        this.touchEnabled = touchEnabled;
-        /**
-         * Defines whether the first match from the suggestions list will be automatically focused.
-         * By default, `highlightFirst` is set to `true`.
-         */
-        this.highlightFirst = true;
-        /**
-         * @hidden
-         */
-        this.focusableId = "k-" + guid();
-        /**
-         * The hint which is displayed when the component is empty.
-         */
-        this.placeholder = "";
-        /**
-         * Sets the height of the suggestions list. By default, `listHeight` is 200px.
-         *
-         * > The `listHeight` property affects only the list of suggestions and not the whole popup container.
-         * > To set the height of the popup container, use `popupSettings.height`.
-         */
-        this.listHeight = 200;
-        /**
-         * @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.
-         */
-        this.clearButton = true;
-        /**
-         * Sets the disabled state of the component.
-         */
-        this.disabled = false;
-        /**
-         * Sets the read-only state of the component.
-         */
-        this.readonly = false;
-        /**
-         * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
-         */
-        this.tabindex = 0;
-        /**
-         * Enables the [filtering]({% slug filtering_autocomplete %}) functionality.
-         * If set to `true`, the component emits the `filterChange` event.
-         */
-        this.filterable = false;
-        /**
-         * 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 overview_autocomplete %}#toc-events)).
-         * 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.
-         */
-        this.valueChange = new EventEmitter();
-        /**
-         * Fires each time the user types in the input field.
-         * You can filter the source based on the passed filtration value
-         * ([see example]({% slug overview_autocomplete %}#toc-events)).
-         */
-        this.filterChange = new EventEmitter();
-        /**
-         * Fires each time the popup is about to open.
-         * This event is preventable. If you cancel it, the popup will remain closed.
-         */
-        this.open = new EventEmitter();
-        /**
-         * Fires after the popup has been opened.
-         */
-        this.opened = new EventEmitter();
-        /**
-         * Fires each time the popup is about to close.
-         * This event is preventable. If you cancel it, the popup will remain open.
-         */
-        this.close = new EventEmitter();
-        /**
-         * Fires after the popup has been closed.
-         */
-        this.closed = new EventEmitter();
-        /**
-         * Fires each time the user focuses the AutoComplete.
-         */
-        this.onFocus = new EventEmitter();
-        /**
-         * Fires each time the AutoComplete gets blurred.
-         */
-        this.onBlur = new EventEmitter();
-        this.widgetClasses = true;
-        this.listBoxId = guid();
-        this.optionPrefix = guid();
-        this.onChangeCallback = noop;
-        this.onTouchedCallback = noop;
-        this.popupMouseDownHandler = function (event) { return event.preventDefault(); };
-        this._popupSettings = { animate: true };
-        this._open = false;
-        this._value = "";
-        this.valueChangeSubject = new Subject();
-        this._isFocused = false;
-        this._size = 'medium';
-        this._rounded = 'medium';
-        this._fillMode = 'solid';
-        validatePackage(packageMetadata);
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.wrapper = this.hostElement.nativeElement;
-        this.data = [];
-        this.subscribeEvents();
-        this.subscribeTouchEvents();
-        this.selectionService.resetSelection([-1]);
-    }
-    AutoCompleteComponent_1 = AutoCompleteComponent;
-    Object.defineProperty(AutoCompleteComponent.prototype, "width", {
-        get: function () {
-            var wrapperOffsetWidth = 0;
-            if (isDocumentAvailable()) {
-                wrapperOffsetWidth = this.wrapper.offsetWidth;
-            }
-            var width = this.popupSettings.width || wrapperOffsetWidth;
-            var minWidth = isNaN(wrapperOffsetWidth) ? wrapperOffsetWidth : wrapperOffsetWidth + "px";
-            var maxWidth = isNaN(width) ? width : width + "px";
-            return { min: minWidth, max: maxWidth };
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AutoCompleteComponent.prototype, "height", {
-        get: function () {
-            var popupHeight = this.popupSettings.height;
-            return isPresent(popupHeight) ? popupHeight + "px" : 'auto';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AutoCompleteComponent.prototype, "listContainerClasses", {
-        get: function () {
-            var containerClasses = ['k-list-container', 'k-reset'];
-            if (this.popupSettings.popupClass) {
-                containerClasses.push(this.popupSettings.popupClass);
-            }
-            return containerClasses;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AutoCompleteComponent.prototype, "suggestion", {
-        get: function () {
-            if (!this.text || !this.suggestedText) {
-                this.suggestedText = undefined;
-                return;
-            }
-            var hasMatch = this.suggestedText.toLowerCase().startsWith(this.text.toLowerCase());
-            var shouldSuggest = this.suggest && !this.backspacePressed;
-            if (shouldSuggest && hasMatch) {
-                return this.suggestedText;
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AutoCompleteComponent.prototype, "appendTo", {
-        get: function () {
-            var appendTo = this.popupSettings.appendTo;
-            if (!appendTo || appendTo === 'root') {
-                return undefined;
-            }
-            return appendTo === 'component' ? this.container : appendTo;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AutoCompleteComponent.prototype, "clearButtonVisiblity", {
-        get: function () {
-            if (this.touchEnabled) {
-                return 'visible';
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * Toggles the visibility of the popup.
-     * If you use the `toggle` method to open or close the popup, the `open` and `close` events will not be fired.
-     *
-     * @param open - The state of the popup.
-     */
-    AutoCompleteComponent.prototype.toggle = function (open) {
-        var _this = this;
-        Promise.resolve(null).then(function () {
-            var shouldOpen = isPresent(open) ? open : !_this._open;
-            _this._toggle(shouldOpen);
-        });
-    };
-    Object.defineProperty(AutoCompleteComponent.prototype, "isOpen", {
-        /**
-         * Returns the current open state of the popup.
-         */
-        get: function () {
-            return this._open;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    AutoCompleteComponent.prototype.togglePopup = function (open) {
-        var isDisabled = this.disabled || this.readonly;
-        var sameState = this.isOpen === open;
-        if (isDisabled || sameState) {
-            return;
-        }
-        var isDefaultPrevented = this.triggerPopupEvents(open);
-        if (!isDefaultPrevented) {
-            this._toggle(open);
-        }
-    };
-    Object.defineProperty(AutoCompleteComponent.prototype, "activeDescendant", {
-        get: function () {
-            if (!this.isOpen || !isPresent(this.selectionService.focused) || this.selectionService.focused === -1) {
-                return null;
-            }
-            var dataItem = this.dataService.itemAt(this.selectionService.focused);
-            return this.optionPrefix + "-" + getter(dataItem, this.valueField);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AutoCompleteComponent.prototype, "noDataLabel", {
-        get: function () {
-            if (this.data.length === 0) {
-                return this.messageFor('noDataText');
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AutoCompleteComponent.prototype, "data", {
-        get: function () {
-            var virtual = this.virtual;
-            if (virtual) {
-                var start = virtual.skip || 0;
-                var end = start + virtual.pageSize;
-                // Use length instead of itemsCount because of the grouping.
-                virtual.total = this.dataService.data.length;
-                return this.dataService.data.slice(start, end);
-            }
-            return this.dataService.data;
-        },
-        /**
-         * Sets the data of the AutoComplete.
-         *
-         * > The data has to be provided in an array-like list.
-         */
-        set: function (data) {
-            this.dataService.data = data || [];
-            if (this.virtual) {
-                this.virtual.skip = 0;
-            }
-            if (this.filterable) {
-                this.selectionService.focused = this.isOpen && this.data.length && this.highlightFirst ? this.firstFocusableIndex(0) : -1;
-            }
-            if (this.suggest && this.dataService.itemsCount > 0) {
-                this.suggestedText = getter(this.dataService.itemAt(0), this.valueField);
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AutoCompleteComponent.prototype, "value", {
-        get: function () {
-            return this._value || NO_VALUE;
-        },
-        /**
-         * Sets the value of the AutoComplete.
-         */
-        set: function (newValue) {
-            this.verifySettings(newValue);
-            this._value = newValue || NO_VALUE;
-            this.text = this.value;
-            this.cdr.markForCheck();
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AutoCompleteComponent.prototype, "popupSettings", {
-        get: function () {
-            return this._popupSettings;
-        },
-        /**
-         * 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: function (settings) {
-            this._popupSettings = Object.assign({ animate: true }, settings);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AutoCompleteComponent.prototype, "itemDisabled", {
-        /**
-         * 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: function (fn) {
-            if (typeof fn !== 'function') {
-                throw new Error("itemDisabled must be a function, but received " + JSON.stringify(fn) + ".");
-            }
-            this.disabledItemsService.itemDisabled = fn;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AutoCompleteComponent.prototype, "tabIndex", {
-        get: function () {
-            return this.tabindex;
-        },
-        /**
-         * @hidden
-         */
-        set: function (tabIndex) {
-            this.tabindex = tabIndex;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AutoCompleteComponent.prototype, "virtual", {
-        get: function () {
-            return this._virtualSettings;
-        },
-        /**
-         * Enables the [virtualization]({% slug virtualization_autocomplete %}) functionality.
-         */
-        set: function (settings) {
-            this._virtualSettings = normalizeVirtualizationSettings(settings);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AutoCompleteComponent.prototype, "size", {
-        get: function () {
-            return this._size;
-        },
-        /**
-         * Sets the size of the component.
-         *
-         * The possible values are:
-         * * `'small'`
-         * * `'medium'` (default)
-         * * `'large'`
-         * * `null`
-         *
-         */
-        set: function (size) {
-            this.renderer.removeClass(this.wrapper, getSizeClass('input', this.size));
-            if (size) {
-                this.renderer.addClass(this.wrapper, getSizeClass('input', size));
-            }
-            this._size = size;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AutoCompleteComponent.prototype, "rounded", {
-        get: function () {
-            return this._rounded;
-        },
-        /**
-         * Sets the border radius of the component.
-         *
-         * The possible values are:
-         * * `'small'`
-         * * `'medium'` (default)
-         * * `'large'`
-         * * `'full'`
-         * * `null`
-         *
-         */
-        set: function (rounded) {
-            this.renderer.removeClass(this.wrapper, getRoundedClass(this.rounded));
-            if (rounded) {
-                this.renderer.addClass(this.wrapper, getRoundedClass(rounded));
-            }
-            this._rounded = rounded;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AutoCompleteComponent.prototype, "fillMode", {
-        get: function () {
-            return this._fillMode;
-        },
-        /**
-         * Sets the fillMode of the component.
-         *
-         * The possible values are:
-         * * `'flat'`
-         * * `'solid'` (default)
-         * * `'outline'`
-         * * `null`
-         *
-         */
-        set: function (fillMode) {
-            this.renderer.removeClass(this.wrapper, getFillModeClass('input', this.fillMode));
-            if (fillMode) {
-                this.renderer.addClass(this.wrapper, getFillModeClass('input', fillMode));
-            }
-            this._fillMode = fillMode;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AutoCompleteComponent.prototype, "isFocused", {
-        get: function () {
-            return this._isFocused;
-        },
-        set: function (isFocused) {
-            this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper, "k-focus");
-            this._isFocused = isFocused;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AutoCompleteComponent.prototype, "isDisabled", {
-        get: function () {
-            return this.disabled;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AutoCompleteComponent.prototype, "isLoading", {
-        get: function () {
-            return this.loading;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AutoCompleteComponent.prototype, "dir", {
-        get: function () {
-            return this.direction;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    AutoCompleteComponent.prototype.ngOnInit = function () {
-        var _this = this;
-        this.renderer.removeAttribute(this.wrapper, "tabindex");
-        this.localizationChangeSubscription = this.localization
-            .changes
-            .subscribe(function (_a) {
-            var rtl = _a.rtl;
-            _this.direction = rtl ? 'rtl' : 'ltr';
-            _this.cdr.detectChanges();
-        });
-        this.setComponentClasses();
-    };
-    AutoCompleteComponent.prototype.ngOnDestroy = function () {
-        this.destroyPopup();
-        this.unsubscribeEvents();
-        if (this.localizationChangeSubscription) {
-            this.localizationChangeSubscription.unsubscribe();
-        }
-    };
-    AutoCompleteComponent.prototype.ngOnChanges = function (changes) {
-        var virtual = this.virtual;
-        var requestInitialData = virtual && changes.data && changes.data.isFirstChange();
-        if (requestInitialData) {
-            this.pageChange({ skip: 0, take: virtual.pageSize });
-        }
-    };
-    /**
-     * 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 `selectionChange` and `valueChange` events will not be fired.
-     */
-    AutoCompleteComponent.prototype.reset = function () {
-        this.value = NO_VALUE;
-    };
-    /**
-     * @hidden
-     */
-    AutoCompleteComponent.prototype.messageFor = function (key) {
-        return this.localization.get(key);
-    };
-    /**
-     * @hidden
-     */
-    AutoCompleteComponent.prototype.clearValue = function (event) {
-        event.stopImmediatePropagation();
-        this.focus();
-        this.change(NO_VALUE);
-        if (this.filterable) {
-            this.filterChange.emit('');
-        }
-        this.selectionService.resetSelection([]);
-    };
-    /**
-     * @hidden
-     */
-    AutoCompleteComponent.prototype.writeValue = function (value) {
-        this.value = value;
-    };
-    /**
-     * @hidden
-     */
-    AutoCompleteComponent.prototype.registerOnChange = function (fn) {
-        this.onChangeCallback = fn;
-    };
-    /**
-     * @hidden
-     */
-    AutoCompleteComponent.prototype.registerOnTouched = function (fn) {
-        this.onTouchedCallback = fn;
-    };
-    /**
-     * @hidden
-     */
-    AutoCompleteComponent.prototype.setDisabledState = function (isDisabled) {
-        this.disabled = isDisabled;
-    };
-    /**
-     * Focuses a specific item of the AutoComplete based on a provided index.
-     * If null or invalid index is provided the focus will be removed.
-     */
-    AutoCompleteComponent.prototype.focusItemAt = function (index) {
-        var isInRange = index >= 0 && index < this.data.length;
-        if (isPresent(index) && isInRange && !this.disabledItemsService.isIndexDisabled(index)) {
-            this.selectionService.focus(index);
-        }
-        else {
-            this.selectionService.focus(-1);
-        }
-    };
-    /**
-     * Focuses the AutoComplete.
-     */
-    AutoCompleteComponent.prototype.focus = function () {
-        if (!this.disabled) {
-            this.searchbar.focus();
-        }
-    };
-    /**
-     * Blurs the AutoComplete.
-     */
-    AutoCompleteComponent.prototype.blur = function () {
-        if (!this.disabled) {
-            this.searchbar.blur();
-        }
-    };
-    /**
-     * @hidden
-     */
-    AutoCompleteComponent.prototype.onResize = function () {
-        if (this._open) {
-            var popupWrapper = this.popupRef.popupElement;
-            var _a = this.width, min = _a.min, max = _a.max;
-            popupWrapper.style.minWidth = min;
-            popupWrapper.style.width = max;
-        }
-    };
-    AutoCompleteComponent.prototype.emitChange = function (value) {
-        this.onChangeCallback(value);
-        this.valueChange.emit(value);
-    };
-    AutoCompleteComponent.prototype.verifySettings = function (newValue) {
-        if (!isDevMode()) {
-            return;
-        }
-        if (isPresent(newValue) && typeof newValue !== "string") {
-            throw new Error("Expected value of type string. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/value-binding/");
-        }
-    };
-    AutoCompleteComponent.prototype.search = function (text, startFrom) {
-        if (startFrom === void 0) { startFrom = 0; }
-        var index;
-        if (text.length && this.dataService.itemsCount) {
-            index = this.dataService.findIndex(this.findIndexPredicate(text), startFrom);
-        }
-        else {
-            index = -1;
-        }
-        if (this.disabledItemsService.isIndexDisabled(index)) {
-            if (index + 1 < this.dataService.itemsCount) {
-                this.search(text, index + 1);
-            }
-            else {
-                this.selectionService.focus(-1);
-            }
-        }
-        else {
-            this.selectionService.focus(index);
-            if (this.suggest) {
-                this.suggestedText = getter(this.dataService.itemAt(index), this.valueField);
-            }
-        }
-    };
-    AutoCompleteComponent.prototype.navigate = function (index) {
-        if (!this.isOpen) {
-            return;
-        }
-        this.selectionService.focus(index);
-    };
-    /**
-     * @hidden
-     */
-    AutoCompleteComponent.prototype.handleNavigate = function (event) {
-        var focused = isNaN(this.selectionService.focused) ? this.firstFocusableIndex(0) : this.selectionService.focused;
-        if (this.disabled || this.readonly || isNaN(focused)) {
-            return;
-        }
-        var action = this.navigationService.process({
-            current: focused,
-            max: this.dataService.itemsCount - 1,
-            min: 0,
-            originalEvent: event
-        });
-        if (action !== NavigationAction.Undefined &&
-            action !== NavigationAction.Backspace &&
-            action !== NavigationAction.Delete &&
-            action !== NavigationAction.Home &&
-            action !== NavigationAction.End &&
-            action !== NavigationAction.Left &&
-            action !== NavigationAction.Right &&
-            ((action === NavigationAction.Enter && this.isOpen) || action !== NavigationAction.Enter)) {
-            event.preventDefault();
-        }
-    };
-    AutoCompleteComponent.prototype.handleEnter = function (event) {
-        var focused = this.selectionService.focused;
-        var value;
-        if (this.isOpen) {
-            event.originalEvent.preventDefault();
-        }
-        if (focused >= 0) {
-            value = getter(this.dataService.itemAt(focused), this.valueField);
-        }
-        else {
-            var match = this.suggest && this.suggestedText && this.data.length &&
-                getter(this.dataService.itemAt(0), this.valueField).toLowerCase() === this.searchbar.value.toLowerCase();
-            if (this.isOpen && match) {
-                value = this.suggestedText;
-            }
-            else {
-                value = this.searchbar.value;
-            }
-        }
-        this.change(value);
-    };
-    AutoCompleteComponent.prototype.handleEscape = function () {
-        this.togglePopup(false);
-        this.selectionService.focused = -1;
-        this.suggestedText = null;
-    };
-    /**
-     * @hidden
-     */
-    AutoCompleteComponent.prototype.searchBarChange = function (text) {
-        var currentTextLength = isPresent(this.text) ? this.text.length : 0;
-        this.backspacePressed = (text.length < currentTextLength) ? true : false;
-        this.text = text;
-        this.togglePopup(text.length > 0);
-        if (!this.highlightFirst) {
-            this.selectionService.focused = -1;
-        }
-        if (this.filterable) {
-            this.filterChange.emit(text);
-        }
-        else if (this.highlightFirst) {
-            this.search(text);
-        }
-    };
-    /**
-     * @hidden
-     */
-    AutoCompleteComponent.prototype.handleFocus = function () {
-        var _this = this;
-        this.isFocused = true;
-        if (hasObservers(this.onFocus)) {
-            this._zone.run(function () {
-                _this.onFocus.emit();
-            });
-        }
-    };
-    /**
-     * @hidden
-     */
-    AutoCompleteComponent.prototype.handleBlur = function () {
-        var _this = this;
-        var focused = this.filterable ? this.selectionService.focused : -1;
-        this.searchbar.input.nativeElement.scrollLeft = 0; // Firefox doesn't auto-scroll to the left on blur like other browsers
-        var dataItem;
-        var text;
-        if (focused !== -1) {
-            dataItem = this.dataService.itemAt(focused);
-            text = getter(dataItem, this.valueField) || "";
-        }
-        else {
-            text = this.searchbar.value;
-        }
-        var exactMatch = text === this.searchbar.value;
-        var insensitiveMatch = text.toLowerCase() === this.searchbar.value.toLowerCase();
-        if (!exactMatch && insensitiveMatch) {
-            this.selectionService.resetSelection([]);
-        }
-        this.isFocused = false;
-        var valueHasChanged = this.value !== this.text;
-        var runInZone = hasObservers(this.onBlur) || hasObservers(this.close) || isUntouched(this.wrapper) || valueHasChanged;
-        if (runInZone) {
-            this._zone.run(function () {
-                if (valueHasChanged) {
-                    _this.change(_this.searchbar.value);
-                }
-                _this.onBlur.emit();
-                _this.onTouchedCallback();
-                _this.togglePopup(false);
-            });
-        }
-        else {
-            this.togglePopup(false);
-        }
-    };
-    /**
-     * @hidden
-     */
-    AutoCompleteComponent.prototype.pageChange = function (event) {
-        var virtual = this.virtual;
-        virtual.skip = event.skip;
-    };
-    AutoCompleteComponent.prototype.change = function (value) {
-        this.togglePopup(false);
-        this.valueChangeSubject.next(value);
-    };
-    AutoCompleteComponent.prototype.subscribeEvents = function () {
-        var _this = this;
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        this.valueChangeSubscription = this.valueChangeSubject
-            .subscribe(function (value) {
-            var hasChange = _this.value !== value;
-            _this.value = value;
-            _this.text = value;
-            // emit change after assigning `this.value` => allows the user to modify the component value on `valueChange`
-            if (hasChange) {
-                _this.emitChange(value);
-            }
-        });
-        this.changeSubscription = this.selectionService.onChange.subscribe(this.handleItemChange.bind(this));
-        this.focusSubscription = this.selectionService.onFocus.subscribe(this.handleItemFocus.bind(this));
-        this.navigationSubscription = merge(this.navigationService.up, this.navigationService.down).subscribe(function (event) { return _this.navigate(event.index); });
-        this.closeSubscription = this.navigationService.close.subscribe(function () { return _this.togglePopup(false); });
-        this.enterSubscription = this.navigationService.enter.subscribe(this.handleEnter.bind(this));
-        this.escSubscription = this.navigationService.esc.subscribe(this.handleEscape.bind(this));
-    };
-    AutoCompleteComponent.prototype.subscribeTouchEvents = function () {
-        var _this = this;
-        if (!isDocumentAvailable() || !this.touchEnabled) {
-            return;
-        }
-        this._zone.runOutsideAngular(function () {
-            // Roll up AutoComplete on iOS when tapped outside
-            return _this.touchstartDisposeHandler = _this.renderer.listen(document, 'touchstart', function (e) {
-                var target = e.target;
-                if (_this.isFocused && !inDropDown(_this.hostElement, target, _this.popupRef)) {
-                    _this._zone.run(function () { return _this.blur(); });
-                }
-            });
-        });
-    };
-    AutoCompleteComponent.prototype.unsubscribeEvents = function () {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        this.changeSubscription.unsubscribe();
-        this.navigationSubscription.unsubscribe();
-        this.closeSubscription.unsubscribe();
-        this.enterSubscription.unsubscribe();
-        this.escSubscription.unsubscribe();
-        this.valueChangeSubscription.unsubscribe();
-        this.focusSubscription.unsubscribe();
-        if (this.touchstartDisposeHandler) {
-            this.touchstartDisposeHandler();
-        }
-    };
-    AutoCompleteComponent.prototype.handleItemChange = function (event) {
-        var index = event.indices.length ? event.indices[0] : undefined;
-        this.selectionService.resetSelection([-1]);
-        if (!isPresent(index)) {
-            return;
-        }
-        var text = getter(this.dataService.itemAt(index), this.valueField);
-        this.change(text);
-    };
-    AutoCompleteComponent.prototype.handleItemFocus = function (_event) {
-        var focused = this.selectionService.focused;
-        var shouldSuggest = Boolean(this.suggest && this.data && this.data.length && focused >= 0);
-        if (shouldSuggest) {
-            this.suggestedText = getter(this.dataService.itemAt(focused), this.valueField);
-        }
-    };
-    AutoCompleteComponent.prototype.createPopup = function () {
-        var _this = this;
-        if (this.virtual) {
-            this.virtual.skip = 0;
-        }
-        var horizontalAlign = this.direction === "rtl" ? "right" : "left";
-        var anchorPosition = { horizontal: horizontalAlign, vertical: "bottom" };
-        var popupPosition = { horizontal: horizontalAlign, vertical: "top" };
-        this.popupRef = this.popupService.open({
-            anchor: this.wrapper,
-            animate: this.popupSettings.animate,
-            appendTo: this.appendTo,
-            content: this.popupTemplate,
-            popupClass: this.listContainerClasses,
-            positionMode: 'absolute',
-            popupAlign: popupPosition,
-            anchorAlign: anchorPosition
-        });
-        var popupWrapper = this.popupRef.popupElement;
-        var _a = this.width, min = _a.min, max = _a.max;
-        popupWrapper.addEventListener('mousedown', this.popupMouseDownHandler);
-        popupWrapper.style.minWidth = min;
-        popupWrapper.style.width = max;
-        popupWrapper.style.height = this.height;
-        popupWrapper.setAttribute("dir", this.direction);
-        this.popupRef.popupOpen.subscribe(function () {
-            _this.cdr.detectChanges();
-            _this.optionsList.scrollToItem(_this.selectionService.focused);
-            _this.opened.emit();
-        });
-        this.popupRef.popupClose.subscribe(function () {
-            _this.closed.emit();
-        });
-        this.popupRef.popupAnchorViewportLeave.subscribe(function () { return _this.togglePopup(false); });
-    };
-    AutoCompleteComponent.prototype.destroyPopup = function () {
-        if (this.popupRef) {
-            this.popupRef.popupElement
-                .removeEventListener('mousedown', this.popupMouseDownHandler);
-            this.popupRef.close();
-            this.popupRef = null;
-        }
-    };
-    AutoCompleteComponent.prototype._toggle = function (open) {
-        this._open = open;
-        this.destroyPopup();
-        if (this._open) {
-            this.createPopup();
-        }
-    };
-    AutoCompleteComponent.prototype.triggerPopupEvents = function (open) {
-        var eventArgs = new PreventableEvent();
-        if (open) {
-            this.open.emit(eventArgs);
-        }
-        else {
-            this.close.emit(eventArgs);
-        }
-        return eventArgs.isDefaultPrevented();
-    };
-    AutoCompleteComponent.prototype.firstFocusableIndex = function (index) {
-        var maxIndex = this.data.length - 1;
-        if (this.disabledItemsService.isIndexDisabled(index)) {
-            return (index < maxIndex) ? this.firstFocusableIndex(index + 1) : undefined;
-        }
-        else {
-            return index;
-        }
-    };
-    AutoCompleteComponent.prototype.findIndexPredicate = function (text) {
-        var _this = this;
-        if (this.dataService.grouped) {
-            return function (item) {
-                var itemText = getter(item.value, _this.valueField);
-                itemText = !isPresent(itemText) ? "" : itemText.toString().toLowerCase();
-                return itemText.startsWith(text.toLowerCase());
-            };
-        }
-        else {
-            return function (item) {
-                var itemText = getter(item, _this.valueField);
-                itemText = !isPresent(itemText) ? "" : itemText.toString().toLowerCase();
-                return itemText.startsWith(text.toLowerCase());
-            };
-        }
-    };
-    AutoCompleteComponent.prototype.setComponentClasses = function () {
-        if (this.size) {
-            this.renderer.addClass(this.wrapper, getSizeClass('input', this.size));
-        }
-        if (this.rounded) {
-            this.renderer.addClass(this.wrapper, getRoundedClass(this.rounded));
-        }
-        if (this.fillMode) {
-            this.renderer.addClass(this.wrapper, getFillModeClass('input', this.fillMode));
-        }
-    };
-    var AutoCompleteComponent_1;
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], AutoCompleteComponent.prototype, "highlightFirst", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], AutoCompleteComponent.prototype, "focusableId", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Object),
-        tslib_1.__metadata("design:paramtypes", [Object])
-    ], AutoCompleteComponent.prototype, "data", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String),
-        tslib_1.__metadata("design:paramtypes", [String])
-    ], AutoCompleteComponent.prototype, "value", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], AutoCompleteComponent.prototype, "valueField", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], AutoCompleteComponent.prototype, "placeholder", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Object),
-        tslib_1.__metadata("design:paramtypes", [Object])
-    ], AutoCompleteComponent.prototype, "popupSettings", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], AutoCompleteComponent.prototype, "listHeight", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], AutoCompleteComponent.prototype, "loading", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], AutoCompleteComponent.prototype, "clearButton", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], AutoCompleteComponent.prototype, "suggest", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], AutoCompleteComponent.prototype, "disabled", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Function),
-        tslib_1.__metadata("design:paramtypes", [Function])
-    ], AutoCompleteComponent.prototype, "itemDisabled", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], AutoCompleteComponent.prototype, "readonly", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], AutoCompleteComponent.prototype, "tabindex", void 0);
-    tslib_1.__decorate([
-        Input("tabIndex"),
-        tslib_1.__metadata("design:type", Number),
-        tslib_1.__metadata("design:paramtypes", [Number])
-    ], AutoCompleteComponent.prototype, "tabIndex", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], AutoCompleteComponent.prototype, "filterable", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Object),
-        tslib_1.__metadata("design:paramtypes", [Object])
-    ], AutoCompleteComponent.prototype, "virtual", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String),
-        tslib_1.__metadata("design:paramtypes", [String])
-    ], AutoCompleteComponent.prototype, "size", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String),
-        tslib_1.__metadata("design:paramtypes", [String])
-    ], AutoCompleteComponent.prototype, "rounded", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String),
-        tslib_1.__metadata("design:paramtypes", [String])
-    ], AutoCompleteComponent.prototype, "fillMode", null);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], AutoCompleteComponent.prototype, "valueChange", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], AutoCompleteComponent.prototype, "filterChange", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], AutoCompleteComponent.prototype, "open", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], AutoCompleteComponent.prototype, "opened", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], AutoCompleteComponent.prototype, "close", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], AutoCompleteComponent.prototype, "closed", void 0);
-    tslib_1.__decorate([
-        Output('focus'),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], AutoCompleteComponent.prototype, "onFocus", void 0);
-    tslib_1.__decorate([
-        Output('blur'),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], AutoCompleteComponent.prototype, "onBlur", void 0);
-    tslib_1.__decorate([
-        ContentChild(ItemTemplateDirective, { static: false }),
-        tslib_1.__metadata("design:type", ItemTemplateDirective)
-    ], AutoCompleteComponent.prototype, "template", void 0);
-    tslib_1.__decorate([
-        ContentChild(HeaderTemplateDirective, { static: false }),
-        tslib_1.__metadata("design:type", HeaderTemplateDirective)
-    ], AutoCompleteComponent.prototype, "headerTemplate", void 0);
-    tslib_1.__decorate([
-        ContentChild(FooterTemplateDirective, { static: false }),
-        tslib_1.__metadata("design:type", FooterTemplateDirective)
-    ], AutoCompleteComponent.prototype, "footerTemplate", void 0);
-    tslib_1.__decorate([
-        ContentChild(NoDataTemplateDirective, { static: false }),
-        tslib_1.__metadata("design:type", NoDataTemplateDirective)
-    ], AutoCompleteComponent.prototype, "noDataTemplate", void 0);
-    tslib_1.__decorate([
-        ContentChild(GroupTemplateDirective, { static: false }),
-        tslib_1.__metadata("design:type", GroupTemplateDirective)
-    ], AutoCompleteComponent.prototype, "groupTemplate", void 0);
-    tslib_1.__decorate([
-        ContentChild(FixedGroupTemplateDirective, { static: false }),
-        tslib_1.__metadata("design:type", FixedGroupTemplateDirective)
-    ], AutoCompleteComponent.prototype, "fixedGroupTemplate", void 0);
-    tslib_1.__decorate([
-        ViewChild('container', { read: ViewContainerRef, static: true }),
-        tslib_1.__metadata("design:type", ViewContainerRef)
-    ], AutoCompleteComponent.prototype, "container", void 0);
-    tslib_1.__decorate([
-        ViewChild('popupTemplate', { static: true }),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], AutoCompleteComponent.prototype, "popupTemplate", void 0);
-    tslib_1.__decorate([
-        ViewChild(SearchBarComponent, { static: true }),
-        tslib_1.__metadata("design:type", SearchBarComponent)
-    ], AutoCompleteComponent.prototype, "searchbar", void 0);
-    tslib_1.__decorate([
-        ViewChild('optionsList', { static: false }),
-        tslib_1.__metadata("design:type", ListComponent)
-    ], AutoCompleteComponent.prototype, "optionsList", void 0);
-    tslib_1.__decorate([
-        HostBinding('class.k-autocomplete'),
-        HostBinding('class.k-input'),
-        tslib_1.__metadata("design:type", Boolean)
-    ], AutoCompleteComponent.prototype, "widgetClasses", void 0);
-    tslib_1.__decorate([
-        HostBinding('class.k-disabled'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], AutoCompleteComponent.prototype, "isDisabled", null);
-    tslib_1.__decorate([
-        HostBinding('class.k-loading'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], AutoCompleteComponent.prototype, "isLoading", null);
-    tslib_1.__decorate([
-        HostBinding('attr.dir'),
-        tslib_1.__metadata("design:type", Object),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], AutoCompleteComponent.prototype, "dir", null);
-    AutoCompleteComponent = AutoCompleteComponent_1 = tslib_1.__decorate([
-        Component({
-            exportAs: 'kendoAutoComplete',
-            providers: [
-                AUTOCOMPLETE_VALUE_ACCESSOR,
-                DataService,
-                SelectionService,
-                NavigationService,
-                DisabledItemsService,
-                LocalizationService,
-                {
-                    provide: L10N_PREFIX,
-                    useValue: 'kendo.autocomplete'
-                },
-                {
-                    provide: FilterableComponent,
-                    useExisting: forwardRef(function () { return AutoCompleteComponent_1; })
-                },
-                {
-                    provide: KendoInput,
-                    useExisting: forwardRef(function () { return AutoCompleteComponent_1; })
-                }
-            ],
-            selector: 'kendo-autocomplete',
-            template: "\n        <ng-container kendoAutoCompleteLocalizedMessages\n            i18n-noDataText=\"kendo.autocomplete.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.autocomplete.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n        >\n        </ng-container>\n        <kendo-searchbar #searchbar\n            [role]=\"'combobox'\"\n            [id]=\"focusableId\"\n            [listId]=\"listBoxId\"\n            [activeDescendant]=\"activeDescendant\"\n            [noDataLabel]=\"noDataLabel\"\n            [userInput]=\"text\"\n            [suggestedText]=\"suggestion\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [tabIndex]=\"tabIndex\"\n            [popupOpen]=\"isOpen\"\n            [placeholder]=\"placeholder\"\n            (onNavigate)=\"handleNavigate($event)\"\n            (valueChange)=\"searchBarChange($event)\"\n            (onBlur)=\"handleBlur()\"\n            (onFocus)=\"handleFocus()\"\n        ></kendo-searchbar>\n        <span\n            *ngIf=\"!loading && !readonly && (clearButton && text?.length)\"\n            class=\"k-clear-value\"\n            [style.visibility]=\"clearButtonVisiblity\"\n            [attr.title]=\"messageFor('clearTitle')\"\n            role=\"button\"\n            tabindex=\"-1\"\n            (click)=\"clearValue($event)\"\n            (mousedown)=\"$event.preventDefault()\"\n        >\n            <span class=\"k-icon k-i-x\"></span>\n        </span>\n        <span *ngIf=\"loading\" class=\"k-icon k-i-loading\"></span>\n        <ng-template #popupTemplate>\n            <!--header template-->\n            <ng-template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </ng-template>\n            <!--list-->\n            <kendo-list\n                #optionsList\n                [size]=\"size\"\n                [rounded]=\"rounded\"\n                [id]=\"listBoxId\"\n                [optionPrefix]=\"optionPrefix\"\n                [data]=\"data\"\n                [textField]=\"valueField\"\n                [valueField]=\"valueField\"\n                [template]=\"template\"\n                [groupTemplate]=\"groupTemplate\"\n                [fixedGroupTemplate]=\"fixedGroupTemplate\"\n                [height]=\"listHeight\"\n                [show]=\"isOpen\"\n                [virtual]=\"virtual\"\n                (pageChange)=\"pageChange($event)\"\n            >\n            </kendo-list>\n            <!--no-data template-->\n            <div class=\"k-no-data\" *ngIf=\"data.length === 0\">\n                <ng-template [ngIf]=\"noDataTemplate\"\n                    [templateContext]=\"{\n                        templateRef: noDataTemplate?.templateRef\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!noDataTemplate\">\n                    <div>{{ messageFor('noDataText') }}</div>\n                </ng-template>\n            </div>\n            <!--footer template-->\n            <ng-template *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate.templateRef\n                }\">\n            </ng-template>\n        </ng-template>\n        <ng-template [ngIf]=\"isOpen\">\n            <kendo-resize-sensor (resize)=\"onResize()\"></kendo-resize-sensor>\n        </ng-template>\n        <ng-container #container></ng-container>\n  "
-        }),
-        tslib_1.__param(10, Optional()), tslib_1.__param(10, Inject(TOUCH_ENABLED)),
-        tslib_1.__metadata("design:paramtypes", [LocalizationService,
-            DataService,
-            PopupService,
-            SelectionService,
-            NavigationService,
-            DisabledItemsService,
-            NgZone,
-            ChangeDetectorRef,
-            Renderer2,
-            ElementRef, Boolean])
-    ], AutoCompleteComponent);
-    return AutoCompleteComponent;
-}());
-export { AutoCompleteComponent };