devextreme-angular/fesm2022/devextreme-angular-ui-lookup.mjs.map

DevExtreme UI and Visualization Components for Angular

{"version":3,"file":"devextreme-angular-ui-lookup.mjs","sources":["../../../dist/ui/lookup/index.ts","../../../dist/ui/lookup/devextreme-angular-ui-lookup.ts"],"sourcesContent":["/*!\n * devextreme-angular\n * Version: 26.1.3\n * Build date: Wed Jun 10 2026\n *\n * Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED\n *\n * This software may be modified and distributed under the terms\n * of the MIT license. See the LICENSE file in the root of the project for details.\n *\n * https://github.com/DevExpress/DevExtreme\n */\n\n/* tslint:disable:max-line-length */\n\n\nimport {\n    TransferState,\n    Component,\n    NgModule,\n    ElementRef,\n    NgZone,\n    PLATFORM_ID,\n    Inject,\n\n    Input,\n    Output,\n    OnDestroy,\n    EventEmitter,\n    forwardRef,\n    HostListener,\n    OnChanges,\n    DoCheck,\n    SimpleChanges,\n    ContentChildren,\n    QueryList\n} from '@angular/core';\n\n\nimport type { ApplyValueMode, LabelMode, PageLoadMode, SimplifiedSearchMode, EditorStyle, ValidationMessageMode, Mode, Position, ValidationStatus } from 'devextreme/common';\nimport type { CollectionWidgetItem } from 'devextreme/ui/collection/ui.collection_widget.base';\nimport type { default as DataSource, DataSourceOptions } from 'devextreme/data/data_source';\nimport type { Store } from 'devextreme/data/store';\nimport type { dxPopoverOptions } from 'devextreme/ui/popover';\nimport type { ClosedEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, OpenedEvent, OptionChangedEvent, PageLoadingEvent, PullRefreshEvent, ScrollEvent, SelectionChangedEvent, ValueChangedEvent } from 'devextreme/ui/lookup';\n\nimport DxLookup from 'devextreme/ui/lookup';\n\nimport {\n    ControlValueAccessor,\n    NG_VALUE_ACCESSOR\n} from '@angular/forms';\n\nimport {\n    DxComponent,\n    DxTemplateHost,\n    DxIntegrationModule,\n    DxTemplateModule,\n    NestedOptionHost,\n    IterableDifferHelper,\n    WatcherHelper,\n    CollectionNestedOption,\n} from 'devextreme-angular/core';\n\nimport { DxoDropDownOptionsModule } from 'devextreme-angular/ui/nested';\nimport { DxoAnimationModule } from 'devextreme-angular/ui/nested';\nimport { DxoHideModule } from 'devextreme-angular/ui/nested';\nimport { DxoFromModule } from 'devextreme-angular/ui/nested';\nimport { DxoPositionModule } from 'devextreme-angular/ui/nested';\nimport { DxoAtModule } from 'devextreme-angular/ui/nested';\nimport { DxoBoundaryOffsetModule } from 'devextreme-angular/ui/nested';\nimport { DxoCollisionModule } from 'devextreme-angular/ui/nested';\nimport { DxoMyModule } from 'devextreme-angular/ui/nested';\nimport { DxoOffsetModule } from 'devextreme-angular/ui/nested';\nimport { DxoToModule } from 'devextreme-angular/ui/nested';\nimport { DxoShowModule } from 'devextreme-angular/ui/nested';\nimport { DxoHideEventModule } from 'devextreme-angular/ui/nested';\nimport { DxoShowEventModule } from 'devextreme-angular/ui/nested';\nimport { DxiItemModule } from 'devextreme-angular/ui/nested';\n\nimport { DxoLookupAnimationModule } from 'devextreme-angular/ui/lookup/nested';\nimport { DxoLookupAtModule } from 'devextreme-angular/ui/lookup/nested';\nimport { DxoLookupBoundaryOffsetModule } from 'devextreme-angular/ui/lookup/nested';\nimport { DxoLookupCollisionModule } from 'devextreme-angular/ui/lookup/nested';\nimport { DxoLookupDropDownOptionsModule } from 'devextreme-angular/ui/lookup/nested';\nimport { DxoLookupFromModule } from 'devextreme-angular/ui/lookup/nested';\nimport { DxoLookupHideModule } from 'devextreme-angular/ui/lookup/nested';\nimport { DxoLookupHideEventModule } from 'devextreme-angular/ui/lookup/nested';\nimport { DxiLookupItemModule } from 'devextreme-angular/ui/lookup/nested';\nimport { DxoLookupMyModule } from 'devextreme-angular/ui/lookup/nested';\nimport { DxoLookupOffsetModule } from 'devextreme-angular/ui/lookup/nested';\nimport { DxoLookupPositionModule } from 'devextreme-angular/ui/lookup/nested';\nimport { DxoLookupShowModule } from 'devextreme-angular/ui/lookup/nested';\nimport { DxoLookupShowEventModule } from 'devextreme-angular/ui/lookup/nested';\nimport { DxoLookupToModule } from 'devextreme-angular/ui/lookup/nested';\nimport { DxiLookupToolbarItemModule } from 'devextreme-angular/ui/lookup/nested';\nimport { \n           PROPERTY_TOKEN_items,\n           PROPERTY_TOKEN_toolbarItems,\n     } from 'devextreme-angular/core/tokens';\n\n\n\nconst CUSTOM_VALUE_ACCESSOR_PROVIDER = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => DxLookupComponent),\n    multi: true\n};\n/**\n * The Lookup is a UI component that allows an end user to search for an item in a collection shown in a drop-down menu.\n\n */\n@Component({\n    selector: 'dx-lookup',\n    template: '',\n    host: { ngSkipHydration: 'true' },\n    imports: [ DxIntegrationModule ],\n    providers: [\n        DxTemplateHost,\n        WatcherHelper,\n        CUSTOM_VALUE_ACCESSOR_PROVIDER,\n        NestedOptionHost,\n        IterableDifferHelper\n    ]\n})\nexport class DxLookupComponent extends DxComponent implements OnDestroy, ControlValueAccessor, OnChanges, DoCheck {\n\n    @ContentChildren(PROPERTY_TOKEN_items)\n    set _itemsContentChildren(value: QueryList<CollectionNestedOption>) {\n        this.setChildren('items', value);\n    }\n\n    @ContentChildren(PROPERTY_TOKEN_toolbarItems)\n    set _toolbarItemsContentChildren(value: QueryList<CollectionNestedOption>) {\n        this.setChildren('toolbarItems', value);\n    }\n\n    instance: DxLookup = null;\n\n    /**\n     * Specifies the shortcut key that sets focus on the UI component.\n    \n     */\n    @Input()\n    get accessKey(): string | undefined {\n        return this._getOption('accessKey');\n    }\n    set accessKey(value: string | undefined) {\n        this._setOption('accessKey', value);\n    }\n\n\n    /**\n     * Specifies whether the UI component changes its visual state as a result of user interaction.\n    \n     */\n    @Input()\n    get activeStateEnabled(): boolean {\n        return this._getOption('activeStateEnabled');\n    }\n    set activeStateEnabled(value: boolean) {\n        this._setOption('activeStateEnabled', value);\n    }\n\n\n    /**\n     * The text displayed on the Apply button.\n    \n     */\n    @Input()\n    get applyButtonText(): string {\n        return this._getOption('applyButtonText');\n    }\n    set applyButtonText(value: string) {\n        this._setOption('applyButtonText', value);\n    }\n\n\n    /**\n     * Specifies the way an end user applies the selected value.\n    \n     */\n    @Input()\n    get applyValueMode(): ApplyValueMode {\n        return this._getOption('applyValueMode');\n    }\n    set applyValueMode(value: ApplyValueMode) {\n        this._setOption('applyValueMode', value);\n    }\n\n\n    /**\n     * The text displayed on the Cancel button.\n    \n     */\n    @Input()\n    get cancelButtonText(): string {\n        return this._getOption('cancelButtonText');\n    }\n    set cancelButtonText(value: string) {\n        this._setOption('cancelButtonText', value);\n    }\n\n\n    /**\n     * Specifies whether or not the UI component cleans the search box when the popup window is displayed.\n    \n     */\n    @Input()\n    get cleanSearchOnOpening(): boolean {\n        return this._getOption('cleanSearchOnOpening');\n    }\n    set cleanSearchOnOpening(value: boolean) {\n        this._setOption('cleanSearchOnOpening', value);\n    }\n\n\n    /**\n     * The text displayed on the Clear button.\n    \n     */\n    @Input()\n    get clearButtonText(): string {\n        return this._getOption('clearButtonText');\n    }\n    set clearButtonText(value: string) {\n        this._setOption('clearButtonText', value);\n    }\n\n\n    /**\n     * Binds the UI component to data.\n    \n     */\n    @Input()\n    get dataSource(): Array<any | CollectionWidgetItem> | DataSource | DataSourceOptions | null | Store | string {\n        return this._getOption('dataSource');\n    }\n    set dataSource(value: Array<any | CollectionWidgetItem> | DataSource | DataSourceOptions | null | Store | string) {\n        this._setOption('dataSource', value);\n    }\n\n\n    /**\n     * Specifies whether to render the drop-down field&apos;s content when it is displayed. If false, the content is rendered immediately.\n    \n     */\n    @Input()\n    get deferRendering(): boolean {\n        return this._getOption('deferRendering');\n    }\n    set deferRendering(value: boolean) {\n        this._setOption('deferRendering', value);\n    }\n\n\n    /**\n     * Specifies whether the UI component responds to user interaction.\n    \n     */\n    @Input()\n    get disabled(): boolean {\n        return this._getOption('disabled');\n    }\n    set disabled(value: boolean) {\n        this._setOption('disabled', value);\n    }\n\n\n    /**\n     * Specifies the data field whose values should be displayed.\n    \n     */\n    @Input()\n    get displayExpr(): ((item: any) => string) | string | undefined {\n        return this._getOption('displayExpr');\n    }\n    set displayExpr(value: ((item: any) => string) | string | undefined) {\n        this._setOption('displayExpr', value);\n    }\n\n\n    /**\n     * Returns the value currently displayed by the UI component.\n    \n     */\n    @Input()\n    get displayValue(): string | undefined {\n        return this._getOption('displayValue');\n    }\n    set displayValue(value: string | undefined) {\n        this._setOption('displayValue', value);\n    }\n\n\n    /**\n     * Specifies whether to vertically align the drop-down menu so that the selected item is in its center. Applies only in Material Design themes.\n    \n     */\n    @Input()\n    get dropDownCentered(): boolean {\n        return this._getOption('dropDownCentered');\n    }\n    set dropDownCentered(value: boolean) {\n        this._setOption('dropDownCentered', value);\n    }\n\n\n    /**\n     * Configures the drop-down field.\n    \n     */\n    @Input()\n    get dropDownOptions(): dxPopoverOptions<any> {\n        return this._getOption('dropDownOptions');\n    }\n    set dropDownOptions(value: dxPopoverOptions<any>) {\n        this._setOption('dropDownOptions', value);\n    }\n\n\n    /**\n     * Specifies the global attributes to be attached to the UI component&apos;s container element.\n    \n     */\n    @Input()\n    get elementAttr(): Record<string, any> {\n        return this._getOption('elementAttr');\n    }\n    set elementAttr(value: Record<string, any>) {\n        this._setOption('elementAttr', value);\n    }\n\n\n    /**\n     * Specifies a custom template for the input field.\n    \n     */\n    @Input()\n    get fieldTemplate(): any {\n        return this._getOption('fieldTemplate');\n    }\n    set fieldTemplate(value: any) {\n        this._setOption('fieldTemplate', value);\n    }\n\n\n    /**\n     * Specifies whether the UI component can be focused using keyboard navigation.\n    \n     */\n    @Input()\n    get focusStateEnabled(): boolean {\n        return this._getOption('focusStateEnabled');\n    }\n    set focusStateEnabled(value: boolean) {\n        this._setOption('focusStateEnabled', value);\n    }\n\n\n    /**\n     * Specifies whether data items should be grouped.\n    \n     */\n    @Input()\n    get grouped(): boolean {\n        return this._getOption('grouped');\n    }\n    set grouped(value: boolean) {\n        this._setOption('grouped', value);\n    }\n\n\n    /**\n     * Specifies a custom template for group captions.\n    \n     */\n    @Input()\n    get groupTemplate(): any {\n        return this._getOption('groupTemplate');\n    }\n    set groupTemplate(value: any) {\n        this._setOption('groupTemplate', value);\n    }\n\n\n    /**\n     * Specifies the UI component&apos;s height.\n    \n     */\n    @Input()\n    get height(): number | string | undefined {\n        return this._getOption('height');\n    }\n    set height(value: number | string | undefined) {\n        this._setOption('height', value);\n    }\n\n\n    /**\n     * Specifies text for a hint that appears when a user pauses on the UI component.\n    \n     */\n    @Input()\n    get hint(): string | undefined {\n        return this._getOption('hint');\n    }\n    set hint(value: string | undefined) {\n        this._setOption('hint', value);\n    }\n\n\n    /**\n     * Specifies whether the UI component changes its state when a user pauses on it.\n    \n     */\n    @Input()\n    get hoverStateEnabled(): boolean {\n        return this._getOption('hoverStateEnabled');\n    }\n    set hoverStateEnabled(value: boolean) {\n        this._setOption('hoverStateEnabled', value);\n    }\n\n\n    /**\n     * Specifies the attributes to be passed on to the underlying HTML element.\n    \n     */\n    @Input()\n    get inputAttr(): any {\n        return this._getOption('inputAttr');\n    }\n    set inputAttr(value: any) {\n        this._setOption('inputAttr', value);\n    }\n\n\n    /**\n     * Specifies whether the component&apos;s current value differs from the initial value.\n    \n     */\n    @Input()\n    get isDirty(): boolean {\n        return this._getOption('isDirty');\n    }\n    set isDirty(value: boolean) {\n        this._setOption('isDirty', value);\n    }\n\n\n    /**\n     * Specifies or indicates whether the editor&apos;s value is valid.\n    \n     */\n    @Input()\n    get isValid(): boolean {\n        return this._getOption('isValid');\n    }\n    set isValid(value: boolean) {\n        this._setOption('isValid', value);\n    }\n\n\n    /**\n     * An array of items displayed by the UI component.\n    \n     */\n    @Input()\n    get items(): Array<any | CollectionWidgetItem> {\n        return this._getOption('items');\n    }\n    set items(value: Array<any | CollectionWidgetItem>) {\n        this._setOption('items', value);\n    }\n\n\n    /**\n     * Specifies a custom template for items.\n    \n     */\n    @Input()\n    get itemTemplate(): any {\n        return this._getOption('itemTemplate');\n    }\n    set itemTemplate(value: any) {\n        this._setOption('itemTemplate', value);\n    }\n\n\n    /**\n     * Specifies a text string used to annotate the editor&apos;s value.\n    \n     */\n    @Input()\n    get label(): string {\n        return this._getOption('label');\n    }\n    set label(value: string) {\n        this._setOption('label', value);\n    }\n\n\n    /**\n     * Specifies the label&apos;s display mode.\n    \n     */\n    @Input()\n    get labelMode(): LabelMode {\n        return this._getOption('labelMode');\n    }\n    set labelMode(value: LabelMode) {\n        this._setOption('labelMode', value);\n    }\n\n\n    /**\n     * The minimum number of characters that must be entered into the text box to begin a search. Applies only if searchEnabled is true.\n    \n     */\n    @Input()\n    get minSearchLength(): number {\n        return this._getOption('minSearchLength');\n    }\n    set minSearchLength(value: number) {\n        this._setOption('minSearchLength', value);\n    }\n\n\n    /**\n     * The value to be assigned to the `name` attribute of the underlying HTML element.\n    \n     */\n    @Input()\n    get name(): string {\n        return this._getOption('name');\n    }\n    set name(value: string) {\n        this._setOption('name', value);\n    }\n\n\n    /**\n     * The text displayed on the button used to load the next page from the data source.\n    \n     */\n    @Input()\n    get nextButtonText(): string {\n        return this._getOption('nextButtonText');\n    }\n    set nextButtonText(value: string) {\n        this._setOption('nextButtonText', value);\n    }\n\n\n    /**\n     * Specifies the text or HTML markup displayed by the UI component if the item collection is empty.\n    \n     */\n    @Input()\n    get noDataText(): string {\n        return this._getOption('noDataText');\n    }\n    set noDataText(value: string) {\n        this._setOption('noDataText', value);\n    }\n\n\n    /**\n     * Specifies whether or not the drop-down editor is displayed.\n    \n     */\n    @Input()\n    get opened(): boolean {\n        return this._getOption('opened');\n    }\n    set opened(value: boolean) {\n        this._setOption('opened', value);\n    }\n\n\n    /**\n     * Specifies the text shown in the pullDown panel, which is displayed when the UI component is scrolled to the bottom.\n    \n     */\n    @Input()\n    get pageLoadingText(): string {\n        return this._getOption('pageLoadingText');\n    }\n    set pageLoadingText(value: string) {\n        this._setOption('pageLoadingText', value);\n    }\n\n\n    /**\n     * Specifies whether the next page is loaded when a user scrolls the UI component to the bottom or when the &apos;next&apos; button is clicked.\n    \n     */\n    @Input()\n    get pageLoadMode(): PageLoadMode {\n        return this._getOption('pageLoadMode');\n    }\n    set pageLoadMode(value: PageLoadMode) {\n        this._setOption('pageLoadMode', value);\n    }\n\n\n    /**\n     * The text displayed by the UI component when nothing is selected.\n    \n     */\n    @Input()\n    get placeholder(): string {\n        return this._getOption('placeholder');\n    }\n    set placeholder(value: string) {\n        this._setOption('placeholder', value);\n    }\n\n\n    /**\n     * Specifies the text displayed in the pullDown panel when the UI component is pulled below the refresh threshold.\n    \n     */\n    @Input()\n    get pulledDownText(): string {\n        return this._getOption('pulledDownText');\n    }\n    set pulledDownText(value: string) {\n        this._setOption('pulledDownText', value);\n    }\n\n\n    /**\n     * Specifies the text shown in the pullDown panel while the list is being pulled down to the refresh threshold.\n    \n     */\n    @Input()\n    get pullingDownText(): string {\n        return this._getOption('pullingDownText');\n    }\n    set pullingDownText(value: string) {\n        this._setOption('pullingDownText', value);\n    }\n\n\n    /**\n     * A Boolean value specifying whether or not the UI component supports the &apos;pull down to refresh&apos; gesture.\n    \n     */\n    @Input()\n    get pullRefreshEnabled(): boolean {\n        return this._getOption('pullRefreshEnabled');\n    }\n    set pullRefreshEnabled(value: boolean) {\n        this._setOption('pullRefreshEnabled', value);\n    }\n\n\n    /**\n     * Specifies the text displayed in the pullDown panel while the UI component is being refreshed.\n    \n     */\n    @Input()\n    get refreshingText(): string {\n        return this._getOption('refreshingText');\n    }\n    set refreshingText(value: string) {\n        this._setOption('refreshingText', value);\n    }\n\n\n    /**\n     * Switches the UI component to a right-to-left representation.\n    \n     */\n    @Input()\n    get rtlEnabled(): boolean {\n        return this._getOption('rtlEnabled');\n    }\n    set rtlEnabled(value: boolean) {\n        this._setOption('rtlEnabled', value);\n    }\n\n\n    /**\n     * Specifies whether the search box is visible.\n    \n     */\n    @Input()\n    get searchEnabled(): boolean {\n        return this._getOption('searchEnabled');\n    }\n    set searchEnabled(value: boolean) {\n        this._setOption('searchEnabled', value);\n    }\n\n\n    /**\n     * Specifies the name of a data source item field or an expression whose value is compared to the search criterion.\n    \n     */\n    @Input()\n    get searchExpr(): Array<Function | string> | Function | string {\n        return this._getOption('searchExpr');\n    }\n    set searchExpr(value: Array<Function | string> | Function | string) {\n        this._setOption('searchExpr', value);\n    }\n\n\n    /**\n     * Specifies a comparison operation used to search UI component items.\n    \n     */\n    @Input()\n    get searchMode(): SimplifiedSearchMode {\n        return this._getOption('searchMode');\n    }\n    set searchMode(value: SimplifiedSearchMode) {\n        this._setOption('searchMode', value);\n    }\n\n\n    /**\n     * The text that is provided as a hint in the lookup&apos;s search bar.\n    \n     */\n    @Input()\n    get searchPlaceholder(): string {\n        return this._getOption('searchPlaceholder');\n    }\n    set searchPlaceholder(value: string) {\n        this._setOption('searchPlaceholder', value);\n    }\n\n\n    /**\n     * Specifies the DOM events after which the UI component&apos;s search results should be updated.\n    \n     */\n    @Input()\n    get searchStartEvent(): string {\n        return this._getOption('searchStartEvent');\n    }\n    set searchStartEvent(value: string) {\n        this._setOption('searchStartEvent', value);\n    }\n\n\n    /**\n     * Specifies the time delay, in milliseconds, after the last character has been typed in, before a search is executed.\n    \n     */\n    @Input()\n    get searchTimeout(): number {\n        return this._getOption('searchTimeout');\n    }\n    set searchTimeout(value: number) {\n        this._setOption('searchTimeout', value);\n    }\n\n\n    /**\n     * Gets the currently selected item.\n    \n     */\n    @Input()\n    get selectedItem(): any {\n        return this._getOption('selectedItem');\n    }\n    set selectedItem(value: any) {\n        this._setOption('selectedItem', value);\n    }\n\n\n    /**\n     * Specifies whether to display the Cancel button in the lookup window.\n    \n     */\n    @Input()\n    get showCancelButton(): boolean {\n        return this._getOption('showCancelButton');\n    }\n    set showCancelButton(value: boolean) {\n        this._setOption('showCancelButton', value);\n    }\n\n\n    /**\n     * Specifies whether to display the Clear button in the lookup window.\n    \n     */\n    @Input()\n    get showClearButton(): boolean {\n        return this._getOption('showClearButton');\n    }\n    set showClearButton(value: boolean) {\n        this._setOption('showClearButton', value);\n    }\n\n\n    /**\n     * Specifies whether or not the UI component displays unfiltered values until a user types a number of characters exceeding the minSearchLength property value.\n    \n     */\n    @Input()\n    get showDataBeforeSearch(): boolean {\n        return this._getOption('showDataBeforeSearch');\n    }\n    set showDataBeforeSearch(value: boolean) {\n        this._setOption('showDataBeforeSearch', value);\n    }\n\n\n    /**\n     * Specifies how the UI component&apos;s text field is styled.\n    \n     */\n    @Input()\n    get stylingMode(): EditorStyle {\n        return this._getOption('stylingMode');\n    }\n    set stylingMode(value: EditorStyle) {\n        this._setOption('stylingMode', value);\n    }\n\n\n    /**\n     * Specifies the number of the element when the Tab key is used for navigating.\n    \n     */\n    @Input()\n    get tabIndex(): number {\n        return this._getOption('tabIndex');\n    }\n    set tabIndex(value: number) {\n        this._setOption('tabIndex', value);\n    }\n\n\n    /**\n     * The read-only property that holds the text displayed by the UI component input element.\n    \n     */\n    @Input()\n    get text(): string {\n        return this._getOption('text');\n    }\n    set text(value: string) {\n        this._setOption('text', value);\n    }\n\n\n    /**\n     * Specifies whether the widget uses item&apos;s text a title attribute.\n    \n     */\n    @Input()\n    get useItemTextAsTitle(): boolean {\n        return this._getOption('useItemTextAsTitle');\n    }\n    set useItemTextAsTitle(value: boolean) {\n        this._setOption('useItemTextAsTitle', value);\n    }\n\n\n    /**\n     * Specifies whether or not the UI component uses native scrolling.\n    \n     */\n    @Input()\n    get useNativeScrolling(): boolean {\n        return this._getOption('useNativeScrolling');\n    }\n    set useNativeScrolling(value: boolean) {\n        this._setOption('useNativeScrolling', value);\n    }\n\n\n    /**\n     * Specifies whether to show lookup contents in the Popover UI component.\n    \n     */\n    @Input()\n    get usePopover(): boolean {\n        return this._getOption('usePopover');\n    }\n    set usePopover(value: boolean) {\n        this._setOption('usePopover', value);\n    }\n\n\n    /**\n     * Information on the broken validation rule. Contains the first item from the validationErrors array.\n    \n     */\n    @Input()\n    get validationError(): any {\n        return this._getOption('validationError');\n    }\n    set validationError(value: any) {\n        this._setOption('validationError', value);\n    }\n\n\n    /**\n     * An array of validation errors.\n    \n     */\n    @Input()\n    get validationErrors(): Array<any> {\n        return this._getOption('validationErrors');\n    }\n    set validationErrors(value: Array<any>) {\n        this._setOption('validationErrors', value);\n    }\n\n\n    /**\n     * Specifies how the message about the validation rules that are not satisfied by this editor&apos;s value is displayed.\n    \n     */\n    @Input()\n    get validationMessageMode(): ValidationMessageMode {\n        return this._getOption('validationMessageMode');\n    }\n    set validationMessageMode(value: ValidationMessageMode) {\n        this._setOption('validationMessageMode', value);\n    }\n\n\n    /**\n     * Specifies the position of a validation message relative to the component. The validation message describes the validation rules that this component&apos;s value does not satisfy.\n    \n     */\n    @Input()\n    get validationMessagePosition(): Mode | Position {\n        return this._getOption('validationMessagePosition');\n    }\n    set validationMessagePosition(value: Mode | Position) {\n        this._setOption('validationMessagePosition', value);\n    }\n\n\n    /**\n     * Indicates or specifies the current validation status.\n    \n     */\n    @Input()\n    get validationStatus(): ValidationStatus {\n        return this._getOption('validationStatus');\n    }\n    set validationStatus(value: ValidationStatus) {\n        this._setOption('validationStatus', value);\n    }\n\n\n    /**\n     * Specifies the currently selected value. May be an object if dataSource contains objects, the store key is specified, and valueExpr is not set.\n    \n     */\n    @Input()\n    get value(): any {\n        return this._getOption('value');\n    }\n    set value(value: any) {\n        this._setOption('value', value);\n    }\n\n\n    /**\n     * Specifies the DOM events after which the UI component&apos;s value should be updated.\n    \n     */\n    @Input()\n    get valueChangeEvent(): string {\n        return this._getOption('valueChangeEvent');\n    }\n    set valueChangeEvent(value: string) {\n        this._setOption('valueChangeEvent', value);\n    }\n\n\n    /**\n     * Specifies which data field provides unique values to the UI component&apos;s value.\n    \n     */\n    @Input()\n    get valueExpr(): ((item: any) => string | number | boolean) | string {\n        return this._getOption('valueExpr');\n    }\n    set valueExpr(value: ((item: any) => string | number | boolean) | string) {\n        this._setOption('valueExpr', value);\n    }\n\n\n    /**\n     * Specifies whether the UI component is visible.\n    \n     */\n    @Input()\n    get visible(): boolean {\n        return this._getOption('visible');\n    }\n    set visible(value: boolean) {\n        this._setOption('visible', value);\n    }\n\n\n    /**\n     * Specifies the UI component&apos;s width.\n    \n     */\n    @Input()\n    get width(): number | string | undefined {\n        return this._getOption('width');\n    }\n    set width(value: number | string | undefined) {\n        this._setOption('width', value);\n    }\n\n\n    /**\n     * Specifies whether text that exceeds the drop-down list width should be wrapped.\n    \n     */\n    @Input()\n    get wrapItemText(): boolean {\n        return this._getOption('wrapItemText');\n    }\n    set wrapItemText(value: boolean) {\n        this._setOption('wrapItemText', value);\n    }\n\n    /**\n    \n     * A function that is executed once the drop-down editor is closed.\n    \n    \n     */\n    @Output() onClosed: EventEmitter<ClosedEvent>;\n\n    /**\n    \n     * A function that is executed when the UI component is rendered and each time the component is repainted.\n    \n    \n     */\n    @Output() onContentReady: EventEmitter<ContentReadyEvent>;\n\n    /**\n    \n     * A function that is executed before the UI component is disposed of.\n    \n    \n     */\n    @Output() onDisposing: EventEmitter<DisposingEvent>;\n\n    /**\n    \n     * A function used in JavaScript frameworks to save the UI component instance.\n    \n    \n     */\n    @Output() onInitialized: EventEmitter<InitializedEvent>;\n\n    /**\n    \n     * A function that is executed when a list item is clicked or tapped.\n    \n    \n     */\n    @Output() onItemClick: EventEmitter<ItemClickEvent>;\n\n    /**\n    \n     * A function that is executed once the drop-down editor is opened.\n    \n    \n     */\n    @Output() onOpened: EventEmitter<OpenedEvent>;\n\n    /**\n    \n     * A function that is executed after a UI component property is changed.\n    \n    \n     */\n    @Output() onOptionChanged: EventEmitter<OptionChangedEvent>;\n\n    /**\n    \n     * A function that is executed before the next page is loaded.\n    \n    \n     */\n    @Output() onPageLoading: EventEmitter<PageLoadingEvent>;\n\n    /**\n    \n     * A function that is executed when the &apos;pull to refresh&apos; gesture is performed on the drop-down item list. Supported on mobile devices only.\n    \n    \n     */\n    @Output() onPullRefresh: EventEmitter<PullRefreshEvent>;\n\n    /**\n    \n     * A function that is executed on each scroll gesture performed on the drop-down item list.\n    \n    \n     */\n    @Output() onScroll: EventEmitter<ScrollEvent>;\n\n    /**\n    \n     * A function that is executed when a list item is selected or selection is canceled.\n    \n    \n     */\n    @Output() onSelectionChanged: EventEmitter<SelectionChangedEvent>;\n\n    /**\n    \n     * A function that is executed after the UI component&apos;s value is changed.\n    \n    \n     */\n    @Output() onValueChanged: EventEmitter<ValueChangedEvent>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() accessKeyChange: EventEmitter<string | undefined>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() activeStateEnabledChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() applyButtonTextChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() applyValueModeChange: EventEmitter<ApplyValueMode>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() cancelButtonTextChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() cleanSearchOnOpeningChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() clearButtonTextChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() dataSourceChange: EventEmitter<Array<any | CollectionWidgetItem> | DataSource | DataSourceOptions | null | Store | string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() deferRenderingChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() disabledChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() displayExprChange: EventEmitter<((item: any) => string) | string | undefined>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() displayValueChange: EventEmitter<string | undefined>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() dropDownCenteredChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() dropDownOptionsChange: EventEmitter<dxPopoverOptions<any>>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() elementAttrChange: EventEmitter<Record<string, any>>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() fieldTemplateChange: EventEmitter<any>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() focusStateEnabledChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() groupedChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() groupTemplateChange: EventEmitter<any>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() heightChange: EventEmitter<number | string | undefined>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() hintChange: EventEmitter<string | undefined>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() hoverStateEnabledChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() inputAttrChange: EventEmitter<any>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() isDirtyChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() isValidChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() itemsChange: EventEmitter<Array<any | CollectionWidgetItem>>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() itemTemplateChange: EventEmitter<any>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() labelChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() labelModeChange: EventEmitter<LabelMode>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() minSearchLengthChange: EventEmitter<number>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() nameChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() nextButtonTextChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() noDataTextChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() openedChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() pageLoadingTextChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() pageLoadModeChange: EventEmitter<PageLoadMode>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() placeholderChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() pulledDownTextChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() pullingDownTextChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() pullRefreshEnabledChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() refreshingTextChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() rtlEnabledChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() searchEnabledChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() searchExprChange: EventEmitter<Array<Function | string> | Function | string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() searchModeChange: EventEmitter<SimplifiedSearchMode>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() searchPlaceholderChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() searchStartEventChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() searchTimeoutChange: EventEmitter<number>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() selectedItemChange: EventEmitter<any>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() showCancelButtonChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() showClearButtonChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() showDataBeforeSearchChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() stylingModeChange: EventEmitter<EditorStyle>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() tabIndexChange: EventEmitter<number>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() textChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() useItemTextAsTitleChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() useNativeScrollingChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() usePopoverChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() validationErrorChange: EventEmitter<any>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() validationErrorsChange: EventEmitter<Array<any>>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() validationMessageModeChange: EventEmitter<ValidationMessageMode>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() validationMessagePositionChange: EventEmitter<Mode | Position>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() validationStatusChange: EventEmitter<ValidationStatus>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() valueChange: EventEmitter<any>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() valueChangeEventChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() valueExprChange: EventEmitter<((item: any) => string | number | boolean) | string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() visibleChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() widthChange: EventEmitter<number | string | undefined>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() wrapItemTextChange: EventEmitter<boolean>;\n\n    /**\n    \n     * \n    \n    \n     */\n    @Output() onBlur: EventEmitter<any>;\n\n\n    @HostListener('valueChange', ['$event']) change(_) { }\n    @HostListener('onBlur', ['$event']) touched = (_) => {};\n\n\n    constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost,\n            private _watcherHelper: WatcherHelper,\n            private _idh: IterableDifferHelper,\n            optionHost: NestedOptionHost,\n            transferState: TransferState,\n            @Inject(PLATFORM_ID) platformId: any) {\n\n        super(elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId);\n\n        this._createEventEmitters([\n            { subscribe: 'closed', emit: 'onClosed' },\n            { subscribe: 'contentReady', emit: 'onContentReady' },\n            { subscribe: 'disposing', emit: 'onDisposing' },\n            { subscribe: 'initialized', emit: 'onInitialized' },\n            { subscribe: 'itemClick', emit: 'onItemClick' },\n            { subscribe: 'opened', emit: 'onOpened' },\n            { subscribe: 'optionChanged', emit: 'onOptionChanged' },\n            { subscribe: 'pageLoading', emit: 'onPageLoading' },\n            { subscribe: 'pullRefresh', emit: 'onPullRefresh' },\n            { subscribe: 'scroll', emit: 'onScroll' },\n            { subscribe: 'selectionChanged', emit: 'onSelectionChanged' },\n            { subscribe: 'valueChanged', emit: 'onValueChanged' },\n            { emit: 'accessKeyChange' },\n            { emit: 'activeStateEnabledChange' },\n            { emit: 'applyButtonTextChange' },\n            { emit: 'applyValueModeChange' },\n            { emit: 'cancelButtonTextChange' },\n            { emit: 'cleanSearchOnOpeningChange' },\n            { emit: 'clearButtonTextChange' },\n            { emit: 'dataSourceChange' },\n            { emit: 'deferRenderingChange' },\n            { emit: 'disabledChange' },\n            { emit: 'displayExprChange' },\n            { emit: 'displayValueChange' },\n            { emit: 'dropDownCenteredChange' },\n            { emit: 'dropDownOptionsChange' },\n            { emit: 'elementAttrChange' },\n            { emit: 'fieldTemplateChange' },\n            { emit: 'focusStateEnabledChange' },\n            { emit: 'groupedChange' },\n            { emit: 'groupTemplateChange' },\n            { emit: 'heightChange' },\n            { emit: 'hintChange' },\n            { emit: 'hoverStateEnabledChange' },\n            { emit: 'inputAttrChange' },\n            { emit: 'isDirtyChange' },\n            { emit: 'isValidChange' },\n            { emit: 'itemsChange' },\n            { emit: 'itemTemplateChange' },\n            { emit: 'labelChange' },\n            { emit: 'labelModeChange' },\n            { emit: 'minSearchLengthChange' },\n            { emit: 'nameChange' },\n            { emit: 'nextButtonTextChange' },\n            { emit: 'noDataTextChange' },\n            { emit: 'openedChange' },\n            { emit: 'pageLoadingTextChange' },\n            { emit: 'pageLoadModeChange' },\n            { emit: 'placeholderChange' },\n            { emit: 'pulledDownTextChange' },\n            { emit: 'pullingDownTextChange' },\n            { emit: 'pullRefreshEnabledChange' },\n            { emit: 'refreshingTextChange' },\n            { emit: 'rtlEnabledChange' },\n            { emit: 'searchEnabledChange' },\n            { emit: 'searchExprChange' },\n            { emit: 'searchModeChange' },\n            { emit: 'searchPlaceholderChange' },\n            { emit: 'searchStartEventChange' },\n            { emit: 'searchTimeoutChange' },\n            { emit: 'selectedItemChange' },\n            { emit: 'showCancelButtonChange' },\n            { emit: 'showClearButtonChange' },\n            { emit: 'showDataBeforeSearchChange' },\n            { emit: 'stylingModeChange' },\n            { emit: 'tabIndexChange' },\n            { emit: 'textChange' },\n            { emit: 'useItemTextAsTitleChange' },\n            { emit: 'useNativeScrollingChange' },\n            { emit: 'usePopoverChange' },\n            { emit: 'validationErrorChange' },\n            { emit: 'validationErrorsChange' },\n            { emit: 'validationMessageModeChange' },\n            { emit: 'validationMessagePositionChange' },\n            { emit: 'validationStatusChange' },\n            { emit: 'valueChange' },\n            { emit: 'valueChangeEventChange' },\n            { emit: 'valueExprChange' },\n            { emit: 'visibleChange' },\n            { emit: 'widthChange' },\n            { emit: 'wrapItemTextChange' },\n            { emit: 'onBlur' }\n        ]);\n\n        this._idh.setHost(this);\n        optionHost.setHost(this);\n    }\n\n    protected _createInstance(element, options) {\n\n        return new DxLookup(element, options);\n    }\n\n\n    writeValue(value: any): void {\n        this.eventHelper.lockedValueChangeEvent = true;\n        this.value = value;\n        this.eventHelper.lockedValueChangeEvent = false;\n    }\n\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n    }\n\n    registerOnChange(fn: (_: any) => void): void { this.change = fn; }\n    registerOnTouched(fn: () => void): void { this.touched = fn; }\n\n    _createWidget(element: any) {\n        super._createWidget(element);\n        this.