@progress/kendo-angular-dropdowns 21.4.1 → 22.0.0-develop.1

package/esm2022/dropdownlist/dropdownlist.component.mjs

@@ -1,1999 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Component, Renderer2, forwardRef, ElementRef, Input, Output, HostBinding, EventEmitter, ContentChild, ViewChild, ViewContainerRef, isDevMode, NgZone, TemplateRef, ChangeDetectorRef, HostListener, Injector } from '@angular/core';
-import { NG_VALUE_ACCESSOR, NgControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { validatePackage } from '@progress/kendo-licensing';
-import { packageMetadata } from '../package-metadata';
-import { merge, interval, Subscription } from 'rxjs';
-import { concatMap, filter, map, skipWhile, take, takeUntil, tap } from 'rxjs/operators';
-import { isDocumentAvailable, KendoInput, hasObservers, anyChanged, isChanged, EventsOutsideAngularDirective, ResizeSensorComponent, Keys, TemplateContextDirective, isSafari, guid, normalizeKeys, parseCSSClassNames } from '@progress/kendo-angular-common';
-import { AdaptiveService } from '@progress/kendo-angular-utils';
-import { isPresent, getter, shuffleData, sameCharsOnly, matchText, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass, isTruthy, setListBoxAriaLabelledBy, setActionSheetTitle, animationDuration } from '../common/util';
-import { SelectionService } from '../common/selection/selection.service';
-import { NavigationService, NavigationEvent } from '../common/navigation/navigation.service';
-import { ItemTemplateDirective } from '../common/templates/item-template.directive';
-import { GroupTemplateDirective } from '../common/templates/group-template.directive';
-import { FixedGroupTemplateDirective } from '../common/templates/fixed-group-template.directive';
-import { ValueTemplateDirective } from '../common/templates/value-template.directive';
-import { HeaderTemplateDirective } from '../common/templates/header-template.directive';
-import { FooterTemplateDirective } from '../common/templates/footer-template.directive';
-import { NoDataTemplateDirective } from '../common/templates/no-data-template.directive';
-import { NavigationAction } from '../common/navigation/navigation-action';
-import { PreventableEvent } from '../common/models/preventable-event';
-import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { PopupService } from '@progress/kendo-angular-popup';
-import { DropDownListMessages } from '../common/constants/error-messages';
-import { DisabledItemsService } from '../common/disabled-items/disabled-items.service';
-import { DataService } from '../common/data.service';
-import { FilterableComponent } from '../common/filtering/filterable-component';
-import { ListComponent } from '../common/list.component';
-import { normalizeVirtualizationSettings } from '../common/models/virtualization-settings';
-import { caretAltDownIcon, searchIcon, xIcon } from '@progress/kendo-svg-icons';
-import { AdaptiveRendererComponent } from '../common/adaptive-renderer.component';
-import { FilterInputDirective } from '../common/filter-input.directive';
-import { NgClass, NgTemplateOutlet } from '@angular/common';
-import { LocalizedMessagesDirective } from '../common/localization/localized-messages.directive';
-import { IconWrapperComponent } from '@progress/kendo-angular-icons';
-import { touchEnabled } from '@progress/kendo-common';
-import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-l10n";
-import * as i2 from "@progress/kendo-angular-popup";
-import * as i3 from "../common/selection/selection.service";
-import * as i4 from "../common/navigation/navigation.service";
-import * as i5 from "../common/disabled-items/disabled-items.service";
-import * as i6 from "../common/data.service";
-import * as i7 from "@progress/kendo-angular-utils";
-import * as i8 from "@angular/forms";
-/**
- * @hidden
- */
-export const DROPDOWNLIST_VALUE_ACCESSOR = {
-    multi: true,
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => DropDownListComponent)
-};
-const DEFAULT_SIZE = 'medium';
-const DEFAULT_ROUNDED = 'medium';
-const DEFAULT_FILL_MODE = 'solid';
-/**
- * Represents the Kendo UI for Angular [DropDownList]({% slug overview_ddl %}) component.
- *
- * @example
- * ```html
- * <kendo-dropdownlist [data]="["Item 1", "Item 2", "Item 3"]"></kendo-dropdownlist>
- * ```
- * @remarks
- * Supported children components are: {@link CustomMessagesComponent}.
- */
-export class DropDownListComponent {
-    wrapper;
-    localization;
-    popupService;
-    selectionService;
-    navigationService;
-    disabledItemsService;
-    dataService;
-    _zone;
-    renderer;
-    cdr;
-    injector;
-    adaptiveService;
-    /**
-     * @hidden
-     */
-    touchEnabled = touchEnabled;
-    /**
-     * @hidden
-     */
-    animationDuration = animationDuration;
-    /**
-     * @hidden
-     */
-    xIcon = xIcon;
-    /**
-     * @hidden
-     */
-    searchIcon = searchIcon;
-    /**
-     * @hidden
-     */
-    caretAltDownSVGIcon = caretAltDownIcon;
-    /**
-     * @hidden
-     */
-    customIconClass;
-    /**
-     * @hidden
-     */
-    adaptiveRenderer;
-    /**
-     * @hidden
-     */
-    searchInput;
-    /**
-     * @hidden
-     */
-    get actionSheet() {
-        return this.adaptiveRenderer?.actionSheet;
-    }
-    /**
-     * @hidden
-     */
-    get actionSheetSearchBar() {
-        return this.adaptiveRenderer?.actionSheetSearchBar;
-    }
-    get width() {
-        const wrapperWidth = isDocumentAvailable() ? this.wrapper.nativeElement.offsetWidth : 0;
-        const width = this.popupSettings.width || wrapperWidth;
-        const minWidth = isNaN(wrapperWidth) ? wrapperWidth : `${wrapperWidth}px`;
-        const maxWidth = isNaN(width) ? width : `${width}px`;
-        return { min: minWidth, max: maxWidth };
-    }
-    get height() {
-        const popupHeight = this.popupSettings.height;
-        return isPresent(popupHeight) ? `${popupHeight}px` : 'auto';
-    }
-    get widgetTabIndex() {
-        if (this.disabled) {
-            return undefined;
-        }
-        const providedTabIndex = Number(this.tabIndex);
-        const defaultTabIndex = 0;
-        return !isNaN(providedTabIndex) ? providedTabIndex : defaultTabIndex;
-    }
-    get ariaActivedescendant() {
-        if (!isPresent(this.dataItem) || !this.isOpen) {
-            return;
-        }
-        return this.optionPrefix + "-" + this.selectionService.focused;
-    }
-    get appendTo() {
-        const { appendTo } = this.popupSettings;
-        if (!appendTo || appendTo === 'root') {
-            return undefined;
-        }
-        return appendTo === 'component' ? this.container : appendTo;
-    }
-    /**
-     * @hidden
-     */
-    onFilterChange(text) {
-        if (this.filterable) {
-            this.filterChange.emit(text);
-        }
-    }
-    /**
-     * @hidden
-     */
-    get ariaLive() {
-        return this.filterable ? 'polite' : 'off';
-    }
-    /**
-     * Shows or hides the current group sticky header when using grouped data.
-     * The sticky header displays by default. [see example.]({% slug grouping_autocomplete %}#toc-sticky-header)
-     */
-    showStickyHeader = true;
-    /**
-     * @hidden
-     */
-    icon;
-    /**
-     * @hidden
-     */
-    svgIcon;
-    /**
-     * Sets and gets the loading state of the `DropDownListComponent`.
-     */
-    loading;
-    /**
-     * Sets the data of the `DropDownListComponent`.
-     *
-     * The data must be an array-like list.
-     */
-    set data(data) {
-        this.dataService.data = data || [];
-        if (this.virtual) {
-            this.virtual.skip = 0;
-        }
-        this.setState();
-    }
-    get data() {
-        const virtual = this.virtual;
-        if (virtual) {
-            const start = virtual.skip || 0;
-            const 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 value of the `DropDownListComponent`.
-     * The value can be a primitive (string, number) or a complex object.
-     * Use the `valuePrimitive` option to define the type.
-     *
-     * All selected values not present in the source are ignored.
-     */
-    set value(newValue) {
-        if (!isPresent(newValue)) {
-            this._previousDataItem = undefined;
-        }
-        this._value = newValue;
-        this.setState();
-        this.cdr.markForCheck();
-    }
-    get value() {
-        return this._value;
-    }
-    /**
-     * Sets the data item field that represents the item text.
-     * If the data contains only primitive values, do not define this property.
-     *
-     * The `textField` property can point to a nested property value, for example, `category.name`.
-     */
-    textField;
-    /**
-     * Sets the data item field that represents the item value.
-     * If the data contains only primitive values, do not define this property.
-     *
-     * The `valueField` property can point to a nested property value, for example, `category.id`.
-     */
-    valueField;
-    /**
-     * Enables or disables the adaptive mode. The adaptive rendering is disabled by default.
-     */
-    adaptiveMode = 'none';
-    /**
-     * Sets the title of the ActionSheet rendered instead of the Popup on small screens.
-     * By default, the ActionSheet title uses the label text of the `DropDownListComponent`.
-     */
-    adaptiveTitle = '';
-    /**
-     * Sets the subtitle of the ActionSheet rendered instead of the Popup on small screens.
-     * By default, the ActionSheet does not render a subtitle.
-     */
-    adaptiveSubtitle = '';
-    /**
-     * @hidden
-     */
-    get isAdaptiveModeEnabled() {
-        return this.adaptiveMode === 'auto';
-    }
-    /**
-    * @hidden
-    */
-    windowSize = 'large';
-    /**
-     * @hidden
-     */
-    get isActionSheetExpanded() {
-        return this.actionSheet?.expanded;
-    }
-    /**
-     * @hidden
-     */
-    get isAdaptive() {
-        return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
-    }
-    /**
-     * Configures the popup of the `DropDownListComponent`.
-     *
-     * The available options are:
-     * - `animate: Boolean`&mdash;Controls the popup animation. The open and close animations are enabled by default.
-     * - `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 used to style the popup.
-     * - `appendTo: "root" | "component" | ViewContainerRef`&mdash;Specifies the component to which the popup will be appended.
-     */
-    set popupSettings(settings) {
-        this._popupSettings = Object.assign({ animate: true }, settings);
-    }
-    get popupSettings() {
-        return this._popupSettings;
-    }
-    /**
-     * Sets the height of the options list in the popup.
-     *
-     * The `listHeight` property affects only the list of options, 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.
-     *
-     * @default 200
-     */
-    set listHeight(_listHeight) {
-        this._listHeight = _listHeight;
-    }
-    get listHeight() {
-        if (this.isAdaptive) {
-            return;
-        }
-        return this._listHeight;
-    }
-    _listHeight = 200;
-    /**
-     * Sets the text of the default empty item. The value type must match the data type.
-     */
-    defaultItem;
-    /**
-     * Sets the disabled state of the component. To disable the component in reactive forms, see [Forms Support](slug:formssupport_ddl#toc-managing-the-dropdownlist-disabled-state-in-reactive-forms).
-     */
-    disabled;
-    /**
-     * Defines a Boolean function executed for each data item in the component. Determines whether the item is disabled. [See examples.]({% slug disableditems_ddl %})
-     */
-    set itemDisabled(fn) {
-        if (typeof fn !== 'function') {
-            throw new Error(`itemDisabled must be a function, but received ${JSON.stringify(fn)}.`);
-        }
-        this.disabledItemsService.itemDisabled = fn;
-    }
-    /**
-     * Sets the read-only state of the component.
-     *
-     * @default false
-     */
-    readonly = false;
-    /**
-     * Enables the [filtering]({% slug filtering_ddl %}) functionality of the `DropDownListComponent`.
-     */
-    filterable = false;
-    /**
-     * Enables the [virtualization]({% slug virtualization_ddl %}) functionality.
-     */
-    set virtual(settings) {
-        this._virtualSettings = normalizeVirtualizationSettings(settings);
-    }
-    get virtual() {
-        return this._virtualSettings;
-    }
-    /**
-     * Enables a case-insensitive search. Use this option when filtration is disabled.
-     */
-    ignoreCase = true;
-    /**
-     * Sets the delay before an item search is performed. Use this option when filtration is disabled.
-     */
-    delay = 500;
-    /**
-     * Specifies the type of the selected value. If set to `true`, the selected value must be a primitive value.
-     * * [More information and example.]({% slug valuebinding_ddl %}#toc-primitive-values-from-object-fields)
-     */
-    set valuePrimitive(isPrimitive) {
-        this._valuePrimitive = isPrimitive;
-    }
-    get valuePrimitive() {
-        if (!isPresent(this._valuePrimitive)) {
-            return !isPresent(this.valueField);
-        }
-        return this._valuePrimitive;
-    }
-    /**
-     * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
-     */
-    tabindex = 0;
-    /**
-     * @hidden
-     */
-    set tabIndex(tabIndex) {
-        this.tabindex = tabIndex;
-    }
-    get tabIndex() {
-        return this.tabindex;
-    }
-    /**
-     * Sets the size of the component.
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
-     *
-     * @default 'medium'
-     */
-    set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE;
-        this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('picker', this.size));
-        if (size !== 'none') {
-            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('picker', newSize));
-        }
-        this._size = newSize;
-    }
-    get size() {
-        return this._size;
-    }
-    /**
-     * Sets the border radius of the component.
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `full`
-     * * `none`
-     *
-     * @default 'medium'
-     */
-    set rounded(rounded) {
-        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
-        this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
-        if (rounded !== 'none') {
-            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(newRounded));
-        }
-        this._rounded = rounded;
-    }
-    get rounded() {
-        return this._rounded;
-    }
-    /**
-     * Sets the fillMode of the component.
-     *
-     * The possible values are:
-     * * `flat`
-     * * `solid` (default)
-     * * `outline`
-     * * `none`
-     *
-     * @default 'solid'
-     */
-    set fillMode(fillMode) {
-        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
-        this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('picker', this.fillMode));
-        if (fillMode !== 'none') {
-            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', newFillMode));
-        }
-        this._fillMode = newFillMode;
-    }
-    get fillMode() {
-        return this._fillMode;
-    }
-    /**
-     * Toggles the left and right arrow keys navigation functionality.
-     * @hidden
-     */
-    leftRightArrowsNavigation = true;
-    /**
-     * Fires each time the value changes. [See example.](slug:events_ddl).
-     */
-    valueChange = new EventEmitter();
-    /**
-     ** Fires each time the user types in the input field. You can filter the source based on the filtration value. When the value is programmatically changed, the `valueChange` event is not triggered. [See example.](slug:events_ddl).
-     */
-    filterChange = new EventEmitter();
-    /**
-     * Fires each time the item selection changes. [see example.](slug:events_ddl).
-     */
-    selectionChange = new EventEmitter();
-    /**
-     * Fires each time the popup is about to open. This event is preventable. If you cancel it, the popup remains closed. [see example.]({% slug openstate_ddl %}#toc-preventing-opening-and-closing)
-     */
-    open = new EventEmitter();
-    /**
-     * Fires after the popup has been opened.
-     */
-    opened = new EventEmitter();
-    /**
-     * Fires each time the popup is about to close. This event is preventable. If you cancel it, the popup remains open. [see example.]({% slug openstate_ddl %}#toc-preventing-opening-and-closing)
-     */
-    close = new EventEmitter();
-    /**
-     * Fires after the popup has been closed.
-     */
-    closed = new EventEmitter();
-    /**
-     * Fires each time the user focuses the `DropDownListComponent`.
-     */
-    onFocus = new EventEmitter();
-    /**
-     * Fires each time the `DropDownListComponent` gets blurred.
-     */
-    onBlur = new EventEmitter();
-    itemTemplate;
-    groupTemplate;
-    fixedGroupTemplate;
-    valueTemplate;
-    headerTemplate;
-    footerTemplate;
-    noDataTemplate;
-    container;
-    popupTemplate;
-    optionsList;
-    /**
-     * @hidden
-     */
-    blurComponent(event) {
-        if (event.target !== this.wrapper.nativeElement) {
-            return;
-        }
-        event.stopImmediatePropagation();
-        this.hostElementBlurred.emit();
-    }
-    /**
-     * @hidden
-     */
-    blurFilterInput() {
-        this.filterBlurred.emit();
-    }
-    /**
-     * @hidden
-     */
-    focusComponent(event) {
-        if (event.target !== this.wrapper.nativeElement) {
-            return;
-        }
-        event.stopImmediatePropagation();
-        this.hostElementFocused.emit();
-        if (!this.isFocused) {
-            this.isFocused = true;
-            if (hasObservers(this.onFocus)) {
-                this._zone.run(() => {
-                    this.onFocus.emit();
-                });
-            }
-        }
-    }
-    /**
-     * @hidden
-     */
-    onResize() {
-        const currentWindowSize = this.adaptiveService.size;
-        if (this.isAdaptiveModeEnabled && this.windowSize !== currentWindowSize) {
-            if (this.isOpen) {
-                this.togglePopup(false);
-            }
-            this.windowSize = currentWindowSize;
-        }
-        if (this.isOpen && !this.isActionSheetExpanded) {
-            const popupWrapper = this.popupRef.popupElement;
-            const { min, max } = this.width;
-            popupWrapper.style.minWidth = min;
-            popupWrapper.style.width = max;
-        }
-    }
-    hostClasses = true;
-    get isDisabledClass() {
-        return this.disabled || null;
-    }
-    get isLoading() {
-        return this.loading;
-    }
-    /**
-     * @hidden
-     */
-    focusableId = `k-${guid()}`;
-    get dir() {
-        return this.direction;
-    }
-    get hostTabIndex() {
-        return this.widgetTabIndex;
-    }
-    get readonlyClass() {
-        return this.readonly;
-    }
-    get readonlyAttr() {
-        return this.readonly ? '' : null;
-    }
-    get isBusy() {
-        return this.isLoading;
-    }
-    role = 'combobox';
-    haspopup = 'listbox';
-    get hostAriaInvalid() {
-        return this.formControl?.invalid ? true : null;
-    }
-    /**
-     * @hidden
-     */
-    keydown(event, input) {
-        if (input) {
-            event.stopPropagation();
-        }
-        const firstIndex = isPresent(this.defaultItem) ? -1 : 0;
-        const focused = isNaN(this.selectionService.focused) ? this.firstFocusableIndex(firstIndex) : this.selectionService.focused;
-        let offset = 0;
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        // on some keyboards, Home and End keys are mapped to Numpad keys
-        const code = normalizeKeys(event);
-        const isHomeKey = code === Keys.Home;
-        const isEndKey = code === Keys.End;
-        const isHomeEnd = isHomeKey || isEndKey;
-        const isFilterFocused = this.filterable && this.isFocused && this.isOpen;
-        if (isFilterFocused && isHomeEnd) {
-            return;
-        }
-        const hasSelected = isPresent(this.selectionService.selected[0]);
-        const focusedItemNotSelected = isPresent(this.selectionService.focused) && !this.selectionService.isSelected(this.selectionService.focused);
-        if (!hasSelected || focusedItemNotSelected) {
-            if (code === Keys.ArrowDown || code === Keys.ArrowRight && this.leftRightArrowsNavigation) {
-                offset = -1;
-            }
-            else if (code === Keys.ArrowUp || code === Keys.ArrowLeft && this.leftRightArrowsNavigation) {
-                offset = 1;
-            }
-        }
-        const eventData = event;
-        const action = this.navigationService.process({
-            current: focused + offset,
-            max: this.dataService.itemsCount - 1,
-            min: this.defaultItem ? -1 : 0,
-            originalEvent: eventData,
-            openOnSpace: !this.isOpen,
-            closeOnSpace: this.isOpen && !input && !(event.target instanceof HTMLInputElement)
-        });
-        const leftRightKeys = (action === NavigationAction.Left) || (action === NavigationAction.Right) && this.leftRightArrowsNavigation;
-        if (action !== NavigationAction.Undefined &&
-            action !== NavigationAction.Tab &&
-            action !== NavigationAction.Backspace &&
-            action !== NavigationAction.Delete &&
-            action !== NavigationAction.PageDown &&
-            action !== NavigationAction.PageUp &&
-            action !== NavigationAction.SelectAll &&
-            !(leftRightKeys && this.filterable) &&
-            action !== NavigationAction.Enter //enter when popup is opened is handled before `handleEnter`
-        ) {
-            eventData.preventDefault();
-        }
-        if (action === NavigationAction.Tab && this.isActionSheetExpanded) {
-            this.togglePopup(false);
-        }
-    }
-    /**
-     * @hidden
-     */
-    keypress(event) {
-        if (this.disabled || this.readonly || this.filterable) {
-            return;
-        }
-        this.onKeyPress(event);
-    }
-    /**
-     * @hidden
-     */
-    click() {
-        if (!this.isActionSheetExpanded) {
-            this.focus();
-            this.togglePopup(!this.isOpen);
-        }
-    }
-    groupIndices = [];
-    optionPrefix = `k-${guid()}`;
-    valueLabelId;
-    filterText = '';
-    listBoxId = `k-${guid()}`;
-    subs = new Subscription();
-    _isFocused = false;
-    set isFocused(isFocused) {
-        this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-focus');
-        this._isFocused = isFocused;
-    }
-    get isFocused() {
-        return this._isFocused;
-    }
-    direction;
-    dataItem;
-    popupRef;
-    onTouchedCallback = (_) => { };
-    onChangeCallback = (_) => { };
-    popupMouseDownHandler;
-    word = "";
-    last = "";
-    typingTimeout;
-    filterFocused = new EventEmitter();
-    filterBlurred = new EventEmitter();
-    hostElementFocused = new EventEmitter();
-    hostElementBlurred = new EventEmitter();
-    touchstartDisposeHandler;
-    _value;
-    _open = false;
-    _previousDataItem;
-    _valuePrimitive;
-    text;
-    _popupSettings = { animate: true };
-    _virtualSettings;
-    _size = 'medium';
-    _rounded = 'medium';
-    _fillMode = 'solid';
-    constructor(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, _zone, renderer, cdr, injector, adaptiveService) {
-        this.wrapper = wrapper;
-        this.localization = localization;
-        this.popupService = popupService;
-        this.selectionService = selectionService;
-        this.navigationService = navigationService;
-        this.disabledItemsService = disabledItemsService;
-        this.dataService = dataService;
-        this._zone = _zone;
-        this.renderer = renderer;
-        this.cdr = cdr;
-        this.injector = injector;
-        this.adaptiveService = adaptiveService;
-        validatePackage(packageMetadata);
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.data = [];
-        this.subscribeEvents();
-        this.subscribeTouchEvents();
-        this.subscribeFocusEvents();
-        this.popupMouseDownHandler = this.onMouseDown.bind(this);
-    }
-    ngOnInit() {
-        this.renderer.removeAttribute(this.wrapper.nativeElement, "tabindex");
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
-        if (this.ariaActivedescendant) {
-            this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-activedescendant', this.ariaActivedescendant);
-        }
-        this.subs.add(this.localization
-            .changes.subscribe(({ rtl }) => {
-            this.direction = rtl ? 'rtl' : 'ltr';
-            this.cdr.detectChanges();
-        }));
-        this.assignAriaDescribedBy();
-        this.setComponentClasses();
-    }
-    ngAfterViewInit() {
-        this.windowSize = this.adaptiveService.size;
-    }
-    /**
-     * @hidden
-     * Used by the TextBoxContainer to determine if the component is empty.
-     */
-    isEmpty() {
-        const value = this.value;
-        return !(value === 0 || value === false || value || this.defaultItem);
-    }
-    /**
-     * @hidden
-     */
-    onFilterFocus() {
-        this.filterFocused.emit();
-    }
-    /**
-     * @hidden
-     */
-    ngOnDestroy() {
-        this.destroyPopup();
-        this.subs.unsubscribe();
-        this.unSubscribeFocusEvents();
-        if (this.touchstartDisposeHandler) {
-            this.touchstartDisposeHandler();
-        }
-    }
-    /**
-     * @hidden
-     */
-    ngOnChanges(changes) {
-        const virtual = this.virtual;
-        const requestInitialData = virtual && changes['data'] && changes['data'].isFirstChange();
-        if (requestInitialData) {
-            this.pageChange({ skip: 0, take: virtual.pageSize });
-        }
-        if (isChanged('defaultItem', changes, false)) {
-            this.disabledItemsService.defaultItem = this.defaultItem;
-        }
-        if (anyChanged(['textField', 'valueField', 'valuePrimitive', 'defaultItem', 'itemDisabled'], changes, false)) {
-            this.setState();
-        }
-    }
-    /**
-     * @hidden
-     */
-    ngAfterContentChecked() {
-        this.verifySettings();
-    }
-    /**
-     * @hidden
-     */
-    get formControl() {
-        const ngControl = this.injector.get(NgControl, null);
-        return ngControl?.control || null;
-    }
-    /**
-     * Focuses a specific item of the `DropDownListComponent` based on the provided index. If there is a default item, it is positioned at index `-1`. If `null` or an invalid index is provided, the focus is removed.
-     */
-    focusItemAt(index) {
-        const minIndex = isPresent(this.defaultItem) ? -1 : 0;
-        const isInRange = minIndex <= index && index < this.data.length;
-        if (isPresent(index) && isInRange && !this.disabledItemsService.isIndexDisabled(index)) {
-            this.selectionService.focus(index);
-        }
-        else {
-            this.selectionService.focus(null);
-        }
-    }
-    /**
-     * Focuses the `DropDownListComponent`.
-     */
-    focus() {
-        if (!this.disabled) {
-            this.wrapper.nativeElement.focus();
-        }
-    }
-    /**
-     * Blurs the `DropDownListComponent`.
-     */
-    blur() {
-        if (!this.disabled) {
-            this.wrapper.nativeElement.blur();
-            this.cdr.detectChanges();
-        }
-    }
-    /**
-     * Toggles the visibility of the Popup or ActionSheet. If you use the `toggle` method to open or close the Popup, the `open` and `close` events are not fired.
-     *
-     * @param open - The state of the popup.
-     */
-    toggle(open) {
-        // The Promise is required to open the popup on load.
-        // Otherwise, the "Expression has changed..." type error will be thrown.
-        Promise.resolve(null).then(() => {
-            const shouldOpen = isPresent(open) ? open : !this._open;
-            this._toggle(shouldOpen);
-        });
-    }
-    _toggle(open) {
-        this._open = open;
-        this.destroyPopup();
-        if (this.isActionSheetExpanded) {
-            this.closeActionSheet();
-        }
-        if (this._open) {
-            this.createPopup();
-        }
-    }
-    triggerPopupEvents(open) {
-        const eventArgs = new PreventableEvent();
-        if (open) {
-            this.open.emit(eventArgs);
-        }
-        else {
-            this.close.emit(eventArgs);
-        }
-        return eventArgs.isDefaultPrevented();
-    }
-    /**
-     * @hidden
-     */
-    togglePopup(open) {
-        const isDisabled = this.disabled || this.readonly;
-        const sameState = this.isOpen === open;
-        if (isDisabled || sameState) {
-            return;
-        }
-        const isDefaultPrevented = this.triggerPopupEvents(open);
-        if (!isDefaultPrevented) {
-            if (!open && this.filterable && this.isFocused) {
-                this.focus();
-            }
-            this._toggle(open);
-        }
-    }
-    /**
-     * Returns the current open state. Returns `true` if the popup or actionSheet is open.
-     */
-    get isOpen() {
-        return isTruthy(this._open || this.isActionSheetExpanded);
-    }
-    /**
-     * Resets the value of the `DropDownListComponent`. If you use the `reset` method to clear the value, the model does not update automatically and the `selectionChange` and `valueChange` events are not fired.
-     */
-    reset() {
-        this.value = undefined;
-    }
-    /**
-     * @hidden
-     */
-    messageFor(key) {
-        return this.localization.get(key);
-    }
-    /**
-     * @hidden
-     */
-    writeValue(value) {
-        this.value = value === null ? undefined : value;
-    }
-    /**
-     * @hidden
-     */
-    registerOnChange(fn) {
-        this.onChangeCallback = fn;
-    }
-    /**
-     * @hidden
-     */
-    registerOnTouched(fn) {
-        this.onTouchedCallback = fn;
-    }
-    /**
-     * @hidden
-     */
-    setDisabledState(isDisabled) {
-        this.cdr.markForCheck();
-        this.disabled = isDisabled;
-    }
-    /**
-     * @hidden
-     */
-    get selectButtonClasses() {
-        return `${this.size ? getSizeClass('button', this.size) : ''} ${this.fillMode ? 'k-button-' + this.fillMode : ''} ${this.fillMode ? 'k-button-' + this.fillMode + '-base' : ''}`;
-    }
-    /**
-     * @hidden
-     */
-    get filterInputClasses() {
-        return `${this.size ? getSizeClass('input', this.size) : ''} ${this.fillMode ? 'k-input-' + this.fillMode : ''} ${this.rounded ? getRoundedClass(this.rounded) : ''}`;
-    }
-    /**
-     * @hidden
-     */
-    get listContainerClasses() {
-        const containerClasses = ['k-list-container', 'k-dropdownlist-popup'];
-        if (!this.popupSettings.popupClass) {
-            return containerClasses;
-        }
-        const parsedPopupClasses = parseCSSClassNames(this.popupSettings.popupClass);
-        if (parsedPopupClasses?.length) {
-            containerClasses.push(...parsedPopupClasses);
-        }
-        return containerClasses;
-    }
-    /**
-     * @hidden
-     */
-    getText() {
-        return this.text;
-    }
-    createPopup() {
-        if (this.virtual) {
-            this.virtual.skip = 0;
-        }
-        this.windowSize = this.adaptiveService.size;
-        if (this.isAdaptive) {
-            this.openActionSheet();
-            return;
-        }
-        const horizontalAlign = this.direction === "rtl" ? "right" : "left";
-        const anchorPosition = { horizontal: horizontalAlign, vertical: "bottom" };
-        const popupPosition = { horizontal: horizontalAlign, vertical: "top" };
-        const appendToComponent = typeof this.popupSettings.appendTo === 'string' && this.popupSettings.appendTo === 'component';
-        this.popupRef = this.popupService.open({
-            anchor: this.wrapper,
-            anchorAlign: anchorPosition,
-            animate: this.popupSettings.animate,
-            appendTo: this.appendTo,
-            content: this.popupTemplate,
-            popupAlign: popupPosition,
-            popupClass: this.listContainerClasses,
-            positionMode: appendToComponent ? 'fixed' : 'absolute'
-        });
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.listBoxId);
-        const popupWrapper = this.popupRef.popupElement;
-        const { min, max } = this.width;
-        popupWrapper.addEventListener('mousedown', this.popupMouseDownHandler);
-        popupWrapper.style.minWidth = min;
-        popupWrapper.style.width = max;
-        popupWrapper.style.height = this.height;
-        popupWrapper.setAttribute('dir', this.direction);
-        if (!this.appendTo) {
-            this.renderer.setAttribute(popupWrapper, 'role', 'region');
-            this.renderer.setAttribute(popupWrapper, 'aria-label', this.messageFor('popupLabel'));
-        }
-        this.subs.add(this.popupRef.popupOpen.subscribe(() => {
-            this.cdr.detectChanges();
-            if (!this.dataService.grouped) {
-                setListBoxAriaLabelledBy(this.optionsList, this.wrapper, this.renderer);
-            }
-            this.setAriaactivedescendant();
-            this.optionsList.scrollToItem(this.selectionService.focused);
-            this.selectionService.focus(this.selectionService.focused);
-            this.opened.emit();
-        }));
-        this.subs.add(this.popupRef.popupClose.subscribe(() => {
-            this.closed.emit();
-        }));
-        if (!this.filterable) {
-            this.subs.add(this.popupRef.popupAnchorViewportLeave.subscribe(() => this.togglePopup(false)));
-        }
-    }
-    destroyPopup() {
-        if (this.popupRef) {
-            this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
-            this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
-            this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-activedescendant');
-            this.popupRef.popupElement
-                .removeEventListener('mousedown', this.popupMouseDownHandler);
-            this.popupRef.close();
-            this.popupRef = null;
-        }
-    }
-    updateState({ dataItem, confirm = false }) {
-        this.dataItem = dataItem;
-        this.text = getter(dataItem, this.textField);
-        if (confirm) {
-            this._previousDataItem = dataItem;
-        }
-    }
-    clearState() {
-        this.text = undefined;
-        this.dataItem = undefined;
-    }
-    resetSelection(index) {
-        const clear = !isPresent(index);
-        this.selectionService.resetSelection(clear ? [] : [index]);
-        this.selectionService.focused = clear ? this.firstFocusableIndex(0) : index;
-    }
-    onSelectionChange({ dataItem }) {
-        this.updateState({ dataItem });
-        this.selectionChange.emit(dataItem);
-        // reassigning the value label ID as aria-deascibedby forces firefox/nvda, forefox/jaws to read
-        // the new value when the popup is closed and the value is changed with the arrow keys (up/down)
-        this.assignAriaDescribedBy();
-        this.setAriaactivedescendant();
-    }
-    subscribeEvents() {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        // Item selection when the popup is open.
-        this.subs.add(this.selectionService.onSelect.pipe(filter(() => this.isOpen), map(this.itemFromEvent.bind(this)))
-            .subscribe(this.onSelectionChange.bind(this)));
-        // Item selection when the popup is closed | clicked | enter, and so on.
-        this.subs.add(merge(this.selectionService.onSelect.pipe(filter(() => !this.isOpen)), this.selectionService.onChange).pipe(map(this.itemFromEvent.bind(this)), tap(() => this.togglePopup(false)))
-            .subscribe(({ dataItem, value: newValue, newSelection }) => {
-            if (newSelection) {
-                this.onSelectionChange({ dataItem });
-            }
-            const shouldUsePrevious = !isPresent(dataItem) && this._previousDataItem;
-            const shouldUseNewValue = newValue !== getter(this.value, this.valueField);
-            if (shouldUsePrevious) {
-                this.updateState({ dataItem: this._previousDataItem });
-                this.resetSelection();
-            }
-            else if (shouldUseNewValue) {
-                this.value = this.valuePrimitive ? newValue : dataItem;
-                this._previousDataItem = dataItem;
-                this.emitChange(this.value);
-            }
-            this.clearFilter();
-        }));
-        this.subs.add(merge(this.navigationService.up, this.navigationService.down, this.navigationService.left.pipe(filter(() => this.leftRightArrowsNavigation), skipWhile(() => this.filterable)), this.navigationService.right.pipe(filter(() => this.leftRightArrowsNavigation), skipWhile(() => this.filterable)), this.navigationService.home, this.navigationService.end)
-            .pipe(filter((event) => !isNaN(event.index)))
-            .subscribe((event) => this.selectionService.select(event.index)));
-        this.subs.add(merge(this.navigationService.pagedown, this.navigationService.pageup).subscribe((event) => {
-            if (this.isOpen) {
-                event.originalEvent.preventDefault();
-                const code = normalizeKeys(event.originalEvent);
-                this.optionsList.scrollWithOnePage(NavigationAction[code]);
-            }
-        }));
-        this.subs.add(this.navigationService.open.subscribe(() => this.togglePopup(true)));
-        this.subs.add(this.navigationService.close.subscribe(() => {
-            this.togglePopup(false);
-            this.focus();
-        }));
-        this.subs.add(this.navigationService.enter
-            .pipe(tap((event) => event.originalEvent.preventDefault()))
-            .subscribe(this.handleEnter.bind(this)));
-        this.subs.add(this.navigationService.esc
-            .subscribe(this.handleEscape.bind(this)));
-        this.subs.add(this.filterBlurred.pipe(concatMap(() => interval(10).pipe(take(1), takeUntil(this.hostElementFocused))))
-            .subscribe(() => {
-            this.hostElementBlurred.emit();
-        }));
-        this._zone.runOutsideAngular(() => {
-            this.subs.add(merge(this.hostElementBlurred.pipe(concatMap(() => interval(10).pipe(take(1), takeUntil(this.filterFocused)))), this.navigationService.tab).pipe(tap(event => event instanceof NavigationEvent && this.focus()), filter(() => this.isFocused), filter(() => {
-                const isBrowserSafari = isDocumentAvailable() && isSafari(navigator.userAgent);
-                if (!isBrowserSafari) {
-                    return true;
-                }
-                const hasFocusedKendoButton = this.popupRef?.popupElement.querySelector('.k-button.k-focus');
-                const shouldNotBlur = this.searchInput && hasFocusedKendoButton && hasObservers(this.filterChange);
-                if (shouldNotBlur) {
-                    this.searchInput.nativeElement.focus();
-                    this.isFocused = true;
-                }
-                return !shouldNotBlur;
-            }))
-                .subscribe(() => this.componentBlur()));
-        });
-    }
-    setAriaactivedescendant() {
-        if (this.ariaActivedescendant) {
-            this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-activedescendant', this.ariaActivedescendant);
-            if (this.searchInput) {
-                this.renderer.setAttribute(this.searchInput.nativeElement, 'aria-activedescendant', this.ariaActivedescendant);
-            }
-        }
-    }
-    subscribeTouchEvents() {
-        if (!isDocumentAvailable() || !this.touchEnabled) {
-            return;
-        }
-        this._zone.runOutsideAngular(() => 
-        // Roll up DropDownList on iOS when tapped outside
-        this.touchstartDisposeHandler = this.renderer.listen(document, 'touchstart', (e) => {
-            const target = e.target;
-            if (this.isFocused && !inDropDown(this.wrapper, target, this.popupRef)) {
-                this._zone.run(() => {
-                    if (this.filterFocused) {
-                        // Close popup if filter is focused
-                        this.togglePopup(false);
-                    }
-                    this.blur();
-                });
-            }
-        }));
-    }
-    subscribeFocusEvents() {
-        if (isDocumentAvailable()) {
-            this.focusComponent = this.focusComponent.bind(this);
-            this.blurComponent = this.blurComponent.bind(this);
-            this._zone.runOutsideAngular(() => {
-                const useCapture = true;
-                document.addEventListener('focus', this.focusComponent, useCapture);
-                document.addEventListener('blur', this.blurComponent, useCapture);
-            });
-        }
-    }
-    unSubscribeFocusEvents() {
-        if (isDocumentAvailable()) {
-            const useCapture = true;
-            document.removeEventListener('focus', this.focusComponent, useCapture);
-            document.removeEventListener('blur', this.blurComponent, useCapture);
-        }
-    }
-    itemFromEvent(event) {
-        const index = event.indices[0];
-        let dataItem = this.dataService.itemAt(index);
-        dataItem = isPresent(dataItem) ? dataItem : this.currentOrDefault(index);
-        const value = getter(dataItem, this.valueField);
-        const newSelection = event.newSelection;
-        return {
-            dataItem,
-            index,
-            newSelection,
-            value
-        };
-    }
-    currentOrDefault(selectedIndex) {
-        const defaultItemIndex = -1;
-        if (isPresent(this.dataItem) && selectedIndex !== defaultItemIndex) {
-            return this.dataItem;
-        }
-        else {
-            return this.defaultItem;
-        }
-    }
-    firstFocusableIndex(index) {
-        const maxIndex = this.dataService.itemsCount - 1;
-        if (this.disabledItemsService.isIndexDisabled(index)) {
-            return (index < maxIndex) ? this.firstFocusableIndex(index + 1) : undefined;
-        }
-        else {
-            return index;
-        }
-    }
-    handleEnter() {
-        if (this.isOpen) {
-            this.selectionService.change(this.selectionService.focused);
-            this.focus();
-        }
-        else {
-            this.togglePopup(true);
-        }
-    }
-    handleEscape() {
-        if (isPresent(this.selectionService.selected[0])) {
-            this.selectionService.change(this.selectionService.selected[0]);
-        }
-        else {
-            this.togglePopup(false);
-            this.clearFilter();
-        }
-        this.focus();
-    }
-    clearFilter() {
-        if (!(this.filterable && this.filterText)) {
-            return;
-        }
-        this.filterText = "";
-        this.cdr.markForCheck();
-        this.filterChange.emit(this.filterText);
-    }
-    verifySettings() {
-        if (!isDevMode()) {
-            return;
-        }
-        if (this.defaultItem && this.valueField && typeof this.defaultItem !== "object") {
-            throw new Error(DropDownListMessages.defaultItem);
-        }
-        if (this.valuePrimitive === true && isPresent(this.value) && typeof this.value === "object") {
-            throw new Error(DropDownListMessages.primitive);
-        }
-        if (this.valuePrimitive === false && isPresent(this.value) && typeof this.value !== "object") {
-            throw new Error(DropDownListMessages.object);
-        }
-        const valueOrText = !isPresent(this.valueField) !== !isPresent(this.textField);
-        if (valueOrText) {
-            throw new Error(DropDownListMessages.textAndValue);
-        }
-    }
-    componentBlur() {
-        if (!this.isActionSheetExpanded) {
-            this.isFocused = false;
-            const selectionPresent = isPresent(this.selectionService.selected[0]);
-            const valueHasChanged = selectionPresent && getter(this.value, this.valueField) !== getter(this.dataService.itemAt(this.selectionService.selected[0]), this.valueField);
-            if (valueHasChanged ||
-                hasObservers(this.close) ||
-                hasObservers(this.onBlur) ||
-                hasObservers(this.filterChange) ||
-                isUntouched(this.wrapper.nativeElement) ||
-                this.formControl?.updateOn === 'blur') {
-                this._zone.run(() => {
-                    if (valueHasChanged) {
-                        this.selectionService.change(this.selectionService.selected[0]);
-                    }
-                    this.togglePopup(false);
-                    this.clearFilter();
-                    this.onBlur.emit();
-                    this.onTouchedCallback();
-                });
-            }
-            else {
-                this.togglePopup(false);
-                //this is needed for Ang 18 not to throw ng0100 error when closing the popup
-                //the component could be refactored using kendoDropDownSharedEvents directive
-                //once we are able to debug against Angular 18
-                this.cdr.markForCheck();
-            }
-        }
-    }
-    /**
-     * @hidden
-     */
-    onMouseDown(event) {
-        const tagName = event.target.tagName.toLowerCase();
-        if (tagName !== "input") {
-            event.preventDefault();
-        }
-    }
-    onKeyPress(event) {
-        if (event.which === 0 || event.code === Keys.Enter || event.code === Keys.NumpadEnter || event.key.length > 1) {
-            return;
-        }
-        let character = event.key;
-        if (this.ignoreCase) {
-            character = character.toLowerCase();
-        }
-        if (character === " ") {
-            event.preventDefault();
-        }
-        this.word += character;
-        this.last = character;
-        this.search();
-    }
-    search() {
-        clearTimeout(this.typingTimeout);
-        if (!this.filterable) {
-            this.typingTimeout = setTimeout(() => {
-                this.word = "";
-            }, this.delay);
-            this.selectNext();
-        }
-    }
-    selectNext() {
-        let data = this.dataService
-            .filter((item) => isPresent(item) && !item.header && !this.disabledItemsService.isItemDisabled(item))
-            .map((item) => {
-            if (this.dataService.grouped) {
-                return { item: item.value, itemIndex: item.offsetIndex };
-            }
-            return { item: item, itemIndex: this.dataService.indexOf(item) };
-        });
-        const isInLoop = sameCharsOnly(this.word, this.last);
-        let dataLength = data.length;
-        const hasSelected = !isNaN(this.selectionService.selected[0]);
-        let startIndex = !hasSelected ? 0 : this.selectionService.selected[0];
-        let text, index, defaultItem;
-        if (this.defaultItem && !this.disabledItemsService.isItemDisabled(this.defaultItem)) {
-            defaultItem = { item: this.defaultItem, itemIndex: -1 };
-            dataLength += 1;
-            startIndex += 1;
-        }
-        startIndex += isInLoop && hasSelected ? 1 : 0;
-        data = shuffleData(data, startIndex, defaultItem);
-        index = 0;
-        for (; index < dataLength; index++) {
-            text = getter(data[index].item, this.textField);
-            const loopMatch = Boolean(isInLoop && matchText(text, this.last, this.ignoreCase));
-            const nextMatch = Boolean(matchText(text, this.word, this.ignoreCase));
-            if (loopMatch || nextMatch) {
-                index = data[index].itemIndex;
-                break;
-            }
-        }
-        if (index !== dataLength) {
-            this.navigate(index);
-        }
-    }
-    emitChange(value) {
-        this.onChangeCallback(value);
-        this.valueChange.emit(value);
-    }
-    navigate(index) {
-        this.selectionService.select(index);
-    }
-    findDataItem({ valueField, value }) {
-        const result = {
-            dataItem: null,
-            index: -1
-        };
-        const prop = dataItem => getter(dataItem, valueField);
-        let comparer;
-        if (this.dataService.grouped) {
-            comparer = (element) => {
-                return prop(element.value) === prop(value);
-            };
-        }
-        else {
-            comparer = (element) => {
-                return prop(element) === prop(value);
-            };
-        }
-        const index = this.dataService.findIndex(comparer);
-        result.dataItem = this.dataService.itemAt(index);
-        result.index = index;
-        return result;
-    }
-    setState() {
-        const value = this.value;
-        const valueField = this.valueField;
-        const textField = this.textField;
-        const primitive = this.valuePrimitive;
-        if (this.defaultItem) {
-            const defaultValue = getter(this.defaultItem, valueField);
-            const currentValue = getter(value, valueField);
-            if (!isPresent(value) || (currentValue === defaultValue)) {
-                this.updateState({ dataItem: this.defaultItem, confirm: true });
-                this.resetSelection(-1);
-                if (this.filterable && this.filterText && this.dataService.itemsCount) {
-                    this.selectionService.focused = this.firstFocusableIndex(0);
-                }
-                return;
-            }
-        }
-        const resolved = this.findDataItem({ valueField, value });
-        // The data and value are of same shape,
-        // for example, value: 'foo', data: ['foo', 'bar']
-        // or value: { value: 1, text: 'foo' }, data: [{ value: 1, text: 'foo' }].
-        const ofSameType = !(primitive && textField);
-        if (resolved.dataItem) {
-            this.updateState({ dataItem: resolved.dataItem, confirm: true });
-            this.resetSelection(resolved.index);
-        }
-        else if (isPresent(value) && ofSameType) {
-            this.updateState({ dataItem: value });
-            this.resetSelection();
-        }
-        else if (this._previousDataItem) {
-            this.updateState({ dataItem: this._previousDataItem });
-            this.resetSelection();
-        }
-        else {
-            this.clearState();
-            this.resetSelection();
-        }
-    }
-    /**
-     * @hidden
-     */
-    handleFilter(event) {
-        this.filterChange.emit(event.target.value);
-    }
-    /**
-     * @hidden
-     */
-    handleClick() {
-        this.windowSize = this.adaptiveService.size;
-        if (this.isAdaptive) {
-            this.togglePopup(true);
-        }
-    }
-    /**
-     * @hidden
-     */
-    pageChange(event) {
-        const virtual = this.virtual;
-        virtual.skip = event.skip;
-    }
-    assignAriaDescribedBy() {
-        const currentValue = this.wrapper.nativeElement.getAttribute('aria-describedby') || '';
-        const trimmed = currentValue.replace(this.valueLabelId, '').trim();
-        // reset the value label ID to force readers to read the new value
-        this.valueLabelId = `k-${guid()}`;
-        // add to the current value - don't replace it
-        const newValue = `${this.valueLabelId} ${trimmed}`.trim();
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-describedby', newValue);
-    }
-    setComponentClasses() {
-        if (this.size !== 'none') {
-            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('picker', this.size));
-        }
-        if (this.rounded !== 'none') {
-            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
-        }
-        if (this.fillMode !== 'none') {
-            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', this.fillMode));
-        }
-    }
-    closeActionSheet() {
-        this.actionSheet.toggle(false);
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
-        this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
-        if (this.filterable) {
-            this.adaptiveRenderer.searchBarValue = '';
-            this.filterChange.emit('');
-        }
-        this.closed.emit();
-    }
-    openActionSheet() {
-        this.actionSheet.toggle(true);
-        this.cdr.detectChanges();
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.listBoxId);
-        if (!this.dataService.grouped) {
-            setListBoxAriaLabelledBy(this.optionsList, this.wrapper, this.renderer);
-        }
-        this.setAriaactivedescendant();
-        this.adaptiveTitle = setActionSheetTitle(this.wrapper, this.adaptiveTitle);
-        this.cdr.detectChanges();
-        this.optionsList.scrollToItem(this.selectionService.focused);
-        this.selectionService.focus(this.selectionService.focused);
-        this.opened.emit();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropDownListComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.SelectionService }, { token: i4.NavigationService }, { token: i5.DisabledItemsService }, { token: i6.DataService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DropDownListComponent, isStandalone: true, selector: "kendo-dropdownlist", inputs: { customIconClass: "customIconClass", showStickyHeader: "showStickyHeader", icon: "icon", svgIcon: "svgIcon", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", popupSettings: "popupSettings", listHeight: "listHeight", defaultItem: "defaultItem", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", filterable: "filterable", virtual: "virtual", ignoreCase: "ignoreCase", delay: "delay", valuePrimitive: "valuePrimitive", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", leftRightArrowsNavigation: "leftRightArrowsNavigation", focusableId: ["id", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click()" }, properties: { "class.k-readonly": "this.readonly", "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.aria-disabled": "this.isDisabledClass", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.readonlyAttr", "attr.aria-busy": "this.isBusy", "attr.role": "this.role", "attr.aria-haspopup": "this.haspopup", "attr.aria-invalid": "this.hostAriaInvalid" } }, providers: [
-            DROPDOWNLIST_VALUE_ACCESSOR,
-            DataService,
-            SelectionService,
-            NavigationService,
-            DisabledItemsService,
-            LocalizationService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.dropdownlist'
-            },
-            {
-                provide: FilterableComponent, useExisting: forwardRef(() => DropDownListComponent)
-            },
-            {
-                provide: KendoInput, useExisting: forwardRef(() => DropDownListComponent)
-            }
-        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }, { propertyName: "valueTemplate", first: true, predicate: ValueTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "adaptiveRenderer", first: true, predicate: AdaptiveRendererComponent, descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoDropDownList"], usesOnChanges: true, ngImport: i0, template: `
-        <ng-container kendoDropDownListLocalizedMessages
-          i18n-noDataText="kendo.dropdownlist.noDataText|The text displayed in the popup when there are no items"
-          noDataText="NO DATA FOUND"
-        
-          i18n-selectButtonText="kendo.dropdownlist.selectButtonText|The text set as aria-label on the select button"
-          selectButtonText="Select"
-        
-          i18n-filterInputLabel="kendo.dropdownlist.filterInputLabel|The text set as aria-label on the filter input"
-          filterInputLabel="Filter"
-        
-          i18n-popupLabel="kendo.dropdownlist.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
-          popupLabel="Options list"
-        
-          i18n-adaptiveCloseButtonTitle="kendo.dropdownlist.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
-          adaptiveCloseButtonTitle="Close"
-        
-          i18n-filterPlaceholder="kendo.dropdownlist.filterPlaceholder|The text for the input's placeholder when filtering is enabled"
-          filterInputPlaceholder="Filter"
-          >
-        </ng-container>
-        <span class="k-input-inner" unselectable="on" [id]="valueLabelId" (click)="$event.preventDefault()">
-          <span class="k-input-value-text">
-            @if (valueTemplate) {
-              <ng-template
-                    [templateContext]="{
-                        templateRef: valueTemplate.templateRef,
-                        $implicit: dataItem
-                    }">
-              </ng-template>
-            }
-            @if (!valueTemplate) {{{ getText() }}}
-          </span>
-        </span>
-        @if (loading) {
-          <span class="k-i-loading k-input-loading-icon k-icon"></span>
-        }
-        <button
-          tabindex="-1"
-          unselectable="on"
-          type="button"
-          class="k-input-button k-button k-icon-button"
-          [ngClass]="selectButtonClasses"
-          [attr.aria-label]="messageFor('selectButtonText')"
-          [attr.disabled]="disabled ? '' : null"
-            [kendoEventsOutsideAngular]="{
-                mousedown: onMouseDown
-            }"
-          >
-          <kendo-icon-wrapper
-            unselectable="on"
-            [name]="icon || 'caret-alt-down'"
-            innerCssClass="k-button-icon"
-            [customFontClass]="customIconClass"
-            [svgIcon]="svgIcon || caretAltDownSVGIcon">
-          </kendo-icon-wrapper>
-        </button>
-        <ng-template #popupTemplate>
-          <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
-        </ng-template>
-        @if (isOpen || isAdaptiveModeEnabled) {
-          <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-        }
-        <ng-container #container></ng-container>
-        
-        <kendo-adaptive-renderer
-          [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-          [title]="adaptiveTitle"
-          [showTextInput]="filterable"
-          [subtitle]="adaptiveSubtitle"
-          (closePopup)="togglePopup(false)"
-          (textInputChange)="onFilterChange($event)"
-          [filterable]="filterable">
-        </kendo-adaptive-renderer>
-        
-        <ng-template #sharedPopupActionSheetTemplate>
-          <!--filterable-->
-          @if (filterable && !isActionSheetExpanded) {
-            <div class="k-list-filter" (click)="$event.stopImmediatePropagation()">
-              <span
-                class="k-searchbox k-input"
-                [ngClass]="filterInputClasses">
-                <kendo-icon-wrapper
-                  class="k-icon"
-                  innerCssClass="k-input-icon"
-                  name="search"
-                  [svgIcon]="searchIcon">
-                </kendo-icon-wrapper>
-                <input
-                  #searchInput
-                  role="searchbox"
-                  aria-autocomplete="list"
-                  aria-haspopup="listbox"
-                  [attr.aria-controls]="listBoxId"
-                  tabindex="-1"
-                  [filterInput]="isFocused && !touchEnabled"
-                  [attr.aria-label]="messageFor('filterInputLabel')"
-                  [dir]="direction"
-                  [(ngModel)]="filterText"
-                  class="k-input-inner"
-                  (keydown)="keydown($event, searchInput)"
-                  (input)="handleFilter($event)"
-                  (focus)="onFilterFocus()"
-                  (blur)="blurFilterInput()"
-                  (click)="handleClick()" />
-              </span>
-            </div>
-          }
-          <!--header template-->
-          @if (headerTemplate) {
-            <ng-template
-                [templateContext]="{
-                    templateRef: headerTemplate.templateRef
-                }">
-            </ng-template>
-          }
-          <!--list-->
-          <kendo-list
-            #optionsList
-            [id]="listBoxId"
-            [size]="isAdaptive ? 'large' : size"
-            [rounded]="rounded"
-            [optionPrefix]="optionPrefix"
-            [data]="data"
-            [textField]="textField"
-            [valueField]="valueField"
-            [template]="itemTemplate"
-            [groupTemplate]="groupTemplate"
-            [fixedGroupTemplate]="fixedGroupTemplate"
-            [height]="listHeight"
-            [show]="isOpen"
-            [virtual]="virtual"
-            [ariaLive]="ariaLive"
-            [showStickyHeader]="showStickyHeader"
-            (pageChange)="pageChange($event)"
-            [defaultItem]="defaultItem">
-          </kendo-list>
-          <!--no-data template-->
-          @if (data.length === 0) {
-            <div class="k-no-data">
-              @if (noDataTemplate) {
-                <ng-template
-                    [templateContext]="{
-                        templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
-                    }">
-                </ng-template>
-              }
-              @if (!noDataTemplate) {
-                <div>{{ messageFor('noDataText') }}</div>
-              }
-            </div>
-          }
-          <!--footer template-->
-          @if (footerTemplate) {
-            <ng-template
-                [templateContext]="{
-                    templateRef: footerTemplate.templateRef
-                }">
-            </ng-template>
-          }
-        </ng-template>
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropDownListComponent, decorators: [{
-            type: Component,
-            args: [{
-                    exportAs: 'kendoDropDownList',
-                    providers: [
-                        DROPDOWNLIST_VALUE_ACCESSOR,
-                        DataService,
-                        SelectionService,
-                        NavigationService,
-                        DisabledItemsService,
-                        LocalizationService,
-                        {
-                            provide: L10N_PREFIX,
-                            useValue: 'kendo.dropdownlist'
-                        },
-                        {
-                            provide: FilterableComponent, useExisting: forwardRef(() => DropDownListComponent)
-                        },
-                        {
-                            provide: KendoInput, useExisting: forwardRef(() => DropDownListComponent)
-                        }
-                    ],
-                    selector: 'kendo-dropdownlist',
-                    template: `
-        <ng-container kendoDropDownListLocalizedMessages
-          i18n-noDataText="kendo.dropdownlist.noDataText|The text displayed in the popup when there are no items"
-          noDataText="NO DATA FOUND"
-        
-          i18n-selectButtonText="kendo.dropdownlist.selectButtonText|The text set as aria-label on the select button"
-          selectButtonText="Select"
-        
-          i18n-filterInputLabel="kendo.dropdownlist.filterInputLabel|The text set as aria-label on the filter input"
-          filterInputLabel="Filter"
-        
-          i18n-popupLabel="kendo.dropdownlist.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
-          popupLabel="Options list"
-        
-          i18n-adaptiveCloseButtonTitle="kendo.dropdownlist.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
-          adaptiveCloseButtonTitle="Close"
-        
-          i18n-filterPlaceholder="kendo.dropdownlist.filterPlaceholder|The text for the input's placeholder when filtering is enabled"
-          filterInputPlaceholder="Filter"
-          >
-        </ng-container>
-        <span class="k-input-inner" unselectable="on" [id]="valueLabelId" (click)="$event.preventDefault()">
-          <span class="k-input-value-text">
-            @if (valueTemplate) {
-              <ng-template
-                    [templateContext]="{
-                        templateRef: valueTemplate.templateRef,
-                        $implicit: dataItem
-                    }">
-              </ng-template>
-            }
-            @if (!valueTemplate) {{{ getText() }}}
-          </span>
-        </span>
-        @if (loading) {
-          <span class="k-i-loading k-input-loading-icon k-icon"></span>
-        }
-        <button
-          tabindex="-1"
-          unselectable="on"
-          type="button"
-          class="k-input-button k-button k-icon-button"
-          [ngClass]="selectButtonClasses"
-          [attr.aria-label]="messageFor('selectButtonText')"
-          [attr.disabled]="disabled ? '' : null"
-            [kendoEventsOutsideAngular]="{
-                mousedown: onMouseDown
-            }"
-          >
-          <kendo-icon-wrapper
-            unselectable="on"
-            [name]="icon || 'caret-alt-down'"
-            innerCssClass="k-button-icon"
-            [customFontClass]="customIconClass"
-            [svgIcon]="svgIcon || caretAltDownSVGIcon">
-          </kendo-icon-wrapper>
-        </button>
-        <ng-template #popupTemplate>
-          <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
-        </ng-template>
-        @if (isOpen || isAdaptiveModeEnabled) {
-          <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-        }
-        <ng-container #container></ng-container>
-        
-        <kendo-adaptive-renderer
-          [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-          [title]="adaptiveTitle"
-          [showTextInput]="filterable"
-          [subtitle]="adaptiveSubtitle"
-          (closePopup)="togglePopup(false)"
-          (textInputChange)="onFilterChange($event)"
-          [filterable]="filterable">
-        </kendo-adaptive-renderer>
-        
-        <ng-template #sharedPopupActionSheetTemplate>
-          <!--filterable-->
-          @if (filterable && !isActionSheetExpanded) {
-            <div class="k-list-filter" (click)="$event.stopImmediatePropagation()">
-              <span
-                class="k-searchbox k-input"
-                [ngClass]="filterInputClasses">
-                <kendo-icon-wrapper
-                  class="k-icon"
-                  innerCssClass="k-input-icon"
-                  name="search"
-                  [svgIcon]="searchIcon">
-                </kendo-icon-wrapper>
-                <input
-                  #searchInput
-                  role="searchbox"
-                  aria-autocomplete="list"
-                  aria-haspopup="listbox"
-                  [attr.aria-controls]="listBoxId"
-                  tabindex="-1"
-                  [filterInput]="isFocused && !touchEnabled"
-                  [attr.aria-label]="messageFor('filterInputLabel')"
-                  [dir]="direction"
-                  [(ngModel)]="filterText"
-                  class="k-input-inner"
-                  (keydown)="keydown($event, searchInput)"
-                  (input)="handleFilter($event)"
-                  (focus)="onFilterFocus()"
-                  (blur)="blurFilterInput()"
-                  (click)="handleClick()" />
-              </span>
-            </div>
-          }
-          <!--header template-->
-          @if (headerTemplate) {
-            <ng-template
-                [templateContext]="{
-                    templateRef: headerTemplate.templateRef
-                }">
-            </ng-template>
-          }
-          <!--list-->
-          <kendo-list
-            #optionsList
-            [id]="listBoxId"
-            [size]="isAdaptive ? 'large' : size"
-            [rounded]="rounded"
-            [optionPrefix]="optionPrefix"
-            [data]="data"
-            [textField]="textField"
-            [valueField]="valueField"
-            [template]="itemTemplate"
-            [groupTemplate]="groupTemplate"
-            [fixedGroupTemplate]="fixedGroupTemplate"
-            [height]="listHeight"
-            [show]="isOpen"
-            [virtual]="virtual"
-            [ariaLive]="ariaLive"
-            [showStickyHeader]="showStickyHeader"
-            (pageChange)="pageChange($event)"
-            [defaultItem]="defaultItem">
-          </kendo-list>
-          <!--no-data template-->
-          @if (data.length === 0) {
-            <div class="k-no-data">
-              @if (noDataTemplate) {
-                <ng-template
-                    [templateContext]="{
-                        templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
-                    }">
-                </ng-template>
-              }
-              @if (!noDataTemplate) {
-                <div>{{ messageFor('noDataText') }}</div>
-              }
-            </div>
-          }
-          <!--footer template-->
-          @if (footerTemplate) {
-            <ng-template
-                [templateContext]="{
-                    templateRef: footerTemplate.templateRef
-                }">
-            </ng-template>
-          }
-        </ng-template>
-        `,
-                    standalone: true,
-                    imports: [LocalizedMessagesDirective, TemplateContextDirective, NgClass, EventsOutsideAngularDirective, IconWrapperComponent, NgTemplateOutlet, ResizeSensorComponent, AdaptiveRendererComponent, ReactiveFormsModule, FilterInputDirective, FormsModule, ListComponent]
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i2.PopupService }, { type: i3.SelectionService }, { type: i4.NavigationService }, { type: i5.DisabledItemsService }, { type: i6.DataService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i7.AdaptiveService }], propDecorators: { customIconClass: [{
-                type: Input
-            }], adaptiveRenderer: [{
-                type: ViewChild,
-                args: [AdaptiveRendererComponent]
-            }], searchInput: [{
-                type: ViewChild,
-                args: ['searchInput']
-            }], showStickyHeader: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], svgIcon: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], textField: [{
-                type: Input
-            }], valueField: [{
-                type: Input
-            }], adaptiveMode: [{
-                type: Input
-            }], adaptiveTitle: [{
-                type: Input
-            }], adaptiveSubtitle: [{
-                type: Input
-            }], popupSettings: [{
-                type: Input
-            }], listHeight: [{
-                type: Input
-            }], defaultItem: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], itemDisabled: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.k-readonly']
-            }], filterable: [{
-                type: Input
-            }], virtual: [{
-                type: Input
-            }], ignoreCase: [{
-                type: Input
-            }], delay: [{
-                type: Input
-            }], valuePrimitive: [{
-                type: Input
-            }], tabindex: [{
-                type: Input
-            }], tabIndex: [{
-                type: Input,
-                args: ["tabIndex"]
-            }], size: [{
-                type: Input
-            }], rounded: [{
-                type: Input
-            }], fillMode: [{
-                type: Input
-            }], leftRightArrowsNavigation: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], filterChange: [{
-                type: Output
-            }], selectionChange: [{
-                type: Output
-            }], open: [{
-                type: Output
-            }], opened: [{
-                type: Output
-            }], close: [{
-                type: Output
-            }], closed: [{
-                type: Output
-            }], onFocus: [{
-                type: Output,
-                args: ['focus']
-            }], onBlur: [{
-                type: Output,
-                args: ['blur']
-            }], itemTemplate: [{
-                type: ContentChild,
-                args: [ItemTemplateDirective, { static: false }]
-            }], groupTemplate: [{
-                type: ContentChild,
-                args: [GroupTemplateDirective, { static: false }]
-            }], fixedGroupTemplate: [{
-                type: ContentChild,
-                args: [FixedGroupTemplateDirective, { static: false }]
-            }], valueTemplate: [{
-                type: ContentChild,
-                args: [ValueTemplateDirective, { static: false }]
-            }], headerTemplate: [{
-                type: ContentChild,
-                args: [HeaderTemplateDirective, { static: false }]
-            }], footerTemplate: [{
-                type: ContentChild,
-                args: [FooterTemplateDirective, { static: false }]
-            }], noDataTemplate: [{
-                type: ContentChild,
-                args: [NoDataTemplateDirective, { static: false }]
-            }], container: [{
-                type: ViewChild,
-                args: ['container', { read: ViewContainerRef, static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
-            }], optionsList: [{
-                type: ViewChild,
-                args: ['optionsList', { static: false }]
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-dropdownlist']
-            }, {
-                type: HostBinding,
-                args: ['class.k-picker']
-            }], isDisabledClass: [{
-                type: HostBinding,
-                args: ['class.k-disabled']
-            }, {
-                type: HostBinding,
-                args: ['attr.aria-disabled']
-            }], isLoading: [{
-                type: HostBinding,
-                args: ['class.k-loading']
-            }], focusableId: [{
-                type: Input,
-                args: ['id']
-            }, {
-                type: HostBinding,
-                args: ['attr.id']
-            }], dir: [{
-                type: HostBinding,
-                args: ['attr.dir']
-            }], hostTabIndex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }], readonlyClass: [{
-                type: HostBinding,
-                args: ['attr.readonly']
-            }], readonlyAttr: [{
-                type: HostBinding,
-                args: ['attr.readonly']
-            }], isBusy: [{
-                type: HostBinding,
-                args: ['attr.aria-busy']
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], haspopup: [{
-                type: HostBinding,
-                args: ['attr.aria-haspopup']
-            }], hostAriaInvalid: [{
-                type: HostBinding,
-                args: ['attr.aria-invalid']
-            }], keydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], keypress: [{
-                type: HostListener,
-                args: ['keypress', ['$event']]
-            }], click: [{
-                type: HostListener,
-                args: ['click']
-            }] } });