devextreme-angular 17.2.17 → 17.2.18

package/ui/lookup.js

@@ -1,1389 +1,1389 @@
-"use strict";
-/*!
- * devextreme-angular
- * Version: 17.2.17
- * Build date: Fri Apr 23 2021
- *
- * Copyright (c) 2012 - 2021 Developer Express Inc. ALL RIGHTS RESERVED
- *
- * This software may be modified and distributed under the terms
- * of the MIT license. See the LICENSE file in the root of the project for details.
- *
- * https://github.com/DevExpress/devextreme-angular
- */
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-var core_1 = require("@angular/core");
-var lookup_1 = require("devextreme/ui/lookup");
-var validator_1 = require("./validator");
-var forms_1 = require("@angular/forms");
-var component_1 = require("../core/component");
-var template_host_1 = require("../core/template-host");
-var template_1 = require("../core/template");
-var nested_option_1 = require("../core/nested-option");
-var watcher_helper_1 = require("../core/watcher-helper");
-var iterable_differ_helper_1 = require("../core/iterable-differ-helper");
-var animation_1 = require("./nested/animation");
-var hide_1 = require("./nested/hide");
-var show_1 = require("./nested/show");
-var item_dxi_1 = require("./nested/item-dxi");
-var position_1 = require("./nested/position");
-var at_1 = require("./nested/at");
-var boundary_offset_1 = require("./nested/boundary-offset");
-var collision_1 = require("./nested/collision");
-var my_1 = require("./nested/my");
-var offset_1 = require("./nested/offset");
-var item_dxi_2 = require("./nested/item-dxi");
-var CUSTOM_VALUE_ACCESSOR_PROVIDER = {
-    provide: forms_1.NG_VALUE_ACCESSOR,
-    useExisting: core_1.forwardRef(function () { return DxLookupComponent; }),
-    multi: true
-};
-/**
- * The Lookup is a widget that allows an end user to search for an item in a collection shown in a drop-down menu.
- */
-var DxLookupComponent = (function (_super) {
-    __extends(DxLookupComponent, _super);
-    function DxLookupComponent(elementRef, ngZone, templateHost, _watcherHelper, _idh, optionHost) {
-        var _this = _super.call(this, elementRef, ngZone, templateHost, _watcherHelper) || this;
-        _this._watcherHelper = _watcherHelper;
-        _this._idh = _idh;
-        _this.touched = function (_) { };
-        _this._createEventEmitters([
-            { subscribe: 'closed', emit: 'onClosed' },
-            { subscribe: 'contentReady', emit: 'onContentReady' },
-            { subscribe: 'disposing', emit: 'onDisposing' },
-            { subscribe: 'initialized', emit: 'onInitialized' },
-            { subscribe: 'itemClick', emit: 'onItemClick' },
-            { subscribe: 'opened', emit: 'onOpened' },
-            { subscribe: 'optionChanged', emit: 'onOptionChanged' },
-            { subscribe: 'pageLoading', emit: 'onPageLoading' },
-            { subscribe: 'pullRefresh', emit: 'onPullRefresh' },
-            { subscribe: 'scroll', emit: 'onScroll' },
-            { subscribe: 'selectionChanged', emit: 'onSelectionChanged' },
-            { subscribe: 'titleRendered', emit: 'onTitleRendered' },
-            { subscribe: 'valueChanged', emit: 'onValueChanged' },
-            { emit: 'accessKeyChange' },
-            { emit: 'activeStateEnabledChange' },
-            { emit: 'animationChange' },
-            { emit: 'applyButtonTextChange' },
-            { emit: 'applyValueModeChange' },
-            { emit: 'attrChange' },
-            { emit: 'cancelButtonTextChange' },
-            { emit: 'cleanSearchOnOpeningChange' },
-            { emit: 'clearButtonTextChange' },
-            { emit: 'closeOnOutsideClickChange' },
-            { emit: 'dataSourceChange' },
-            { emit: 'deferRenderingChange' },
-            { emit: 'disabledChange' },
-            { emit: 'displayExprChange' },
-            { emit: 'displayValueChange' },
-            { emit: 'dropDownButtonTemplateChange' },
-            { emit: 'elementAttrChange' },
-            { emit: 'fieldEditEnabledChange' },
-            { emit: 'fieldTemplateChange' },
-            { emit: 'focusStateEnabledChange' },
-            { emit: 'fullScreenChange' },
-            { emit: 'groupedChange' },
-            { emit: 'groupTemplateChange' },
-            { emit: 'heightChange' },
-            { emit: 'hintChange' },
-            { emit: 'hoverStateEnabledChange' },
-            { emit: 'inputAttrChange' },
-            { emit: 'isValidChange' },
-            { emit: 'itemsChange' },
-            { emit: 'itemTemplateChange' },
-            { emit: 'minSearchLengthChange' },
-            { emit: 'nameChange' },
-            { emit: 'nextButtonTextChange' },
-            { emit: 'noDataTextChange' },
-            { emit: 'openedChange' },
-            { emit: 'pageLoadingTextChange' },
-            { emit: 'pageLoadModeChange' },
-            { emit: 'pagingEnabledChange' },
-            { emit: 'placeholderChange' },
-            { emit: 'popupHeightChange' },
-            { emit: 'popupWidthChange' },
-            { emit: 'positionChange' },
-            { emit: 'pulledDownTextChange' },
-            { emit: 'pullingDownTextChange' },
-            { emit: 'pullRefreshEnabledChange' },
-            { emit: 'refreshingTextChange' },
-            { emit: 'rtlEnabledChange' },
-            { emit: 'searchEnabledChange' },
-            { emit: 'searchExprChange' },
-            { emit: 'searchModeChange' },
-            { emit: 'searchPlaceholderChange' },
-            { emit: 'searchTimeoutChange' },
-            { emit: 'selectedItemChange' },
-            { emit: 'shadingChange' },
-            { emit: 'showCancelButtonChange' },
-            { emit: 'showClearButtonChange' },
-            { emit: 'showDataBeforeSearchChange' },
-            { emit: 'showNextButtonChange' },
-            { emit: 'showPopupTitleChange' },
-            { emit: 'tabIndexChange' },
-            { emit: 'textChange' },
-            { emit: 'titleChange' },
-            { emit: 'titleTemplateChange' },
-            { emit: 'useNativeScrollingChange' },
-            { emit: 'usePopoverChange' },
-            { emit: 'validationErrorChange' },
-            { emit: 'validationMessageModeChange' },
-            { emit: 'valueChange' },
-            { emit: 'valueChangeEventChange' },
-            { emit: 'valueExprChange' },
-            { emit: 'visibleChange' },
-            { emit: 'widthChange' },
-            { emit: 'onBlur' }
-        ]);
-        _this._idh.setHost(_this);
-        optionHost.setHost(_this);
-        return _this;
-    }
-    Object.defineProperty(DxLookupComponent.prototype, "accessKey", {
-        /**
-         * Specifies the shortcut key that sets focus on the widget.
-         */
-        get: function () {
-            return this._getOption('accessKey');
-        },
-        set: function (value) {
-            this._setOption('accessKey', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "activeStateEnabled", {
-        /**
-         * Specifies whether or not the widget changes its state when interacting with a user.
-         */
-        get: function () {
-            return this._getOption('activeStateEnabled');
-        },
-        set: function (value) {
-            this._setOption('activeStateEnabled', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "animation", {
-        /**
-         * Configures widget visibility animations. This object contains two fields: show and hide.
-         */
-        get: function () {
-            return this._getOption('animation');
-        },
-        set: function (value) {
-            this._setOption('animation', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "applyButtonText", {
-        /**
-         * The text displayed on the Apply button.
-         */
-        get: function () {
-            return this._getOption('applyButtonText');
-        },
-        set: function (value) {
-            this._setOption('applyButtonText', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "applyValueMode", {
-        /**
-         * Specifies the way an end-user applies the selected value.
-         */
-        get: function () {
-            return this._getOption('applyValueMode');
-        },
-        set: function (value) {
-            this._setOption('applyValueMode', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "attr", {
-        /**
-         * Use the inputAttr option instead.
-         */
-        get: function () {
-            return this._getOption('attr');
-        },
-        set: function (value) {
-            this._setOption('attr', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "cancelButtonText", {
-        /**
-         * The text displayed on the Cancel button.
-         */
-        get: function () {
-            return this._getOption('cancelButtonText');
-        },
-        set: function (value) {
-            this._setOption('cancelButtonText', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "cleanSearchOnOpening", {
-        /**
-         * Specifies whether or not the widget cleans the search box when the popup window is displayed.
-         */
-        get: function () {
-            return this._getOption('cleanSearchOnOpening');
-        },
-        set: function (value) {
-            this._setOption('cleanSearchOnOpening', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "clearButtonText", {
-        /**
-         * The text displayed on the Clear button.
-         */
-        get: function () {
-            return this._getOption('clearButtonText');
-        },
-        set: function (value) {
-            this._setOption('clearButtonText', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "closeOnOutsideClick", {
-        /**
-         * Specifies whether to close the drop-down menu if a user clicks outside it.
-         */
-        get: function () {
-            return this._getOption('closeOnOutsideClick');
-        },
-        set: function (value) {
-            this._setOption('closeOnOutsideClick', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "dataSource", {
-        /**
-         * A data source used to fetch data the widget should display.
-         */
-        get: function () {
-            return this._getOption('dataSource');
-        },
-        set: function (value) {
-            this._setOption('dataSource', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "deferRendering", {
-        /**
-         * Specifies whether to render the drop-down field's content when it is displayed. If false, the content is rendered immediately.
-         */
-        get: function () {
-            return this._getOption('deferRendering');
-        },
-        set: function (value) {
-            this._setOption('deferRendering', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "disabled", {
-        /**
-         * Specifies whether the widget responds to user interaction.
-         */
-        get: function () {
-            return this._getOption('disabled');
-        },
-        set: function (value) {
-            this._setOption('disabled', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "displayExpr", {
-        /**
-         * Specifies the name of the data source item field whose value is displayed by the widget.
-         */
-        get: function () {
-            return this._getOption('displayExpr');
-        },
-        set: function (value) {
-            this._setOption('displayExpr', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "displayValue", {
-        /**
-         * Returns the value currently displayed by the widget.
-         */
-        get: function () {
-            return this._getOption('displayValue');
-        },
-        set: function (value) {
-            this._setOption('displayValue', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "dropDownButtonTemplate", {
-        /**
-         * Specifies a custom template for the drop-down button.
-         */
-        get: function () {
-            return this._getOption('dropDownButtonTemplate');
-        },
-        set: function (value) {
-            this._setOption('dropDownButtonTemplate', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "elementAttr", {
-        /**
-         * Specifies the attributes to be attached to the widget's root element.
-         */
-        get: function () {
-            return this._getOption('elementAttr');
-        },
-        set: function (value) {
-            this._setOption('elementAttr', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "fieldEditEnabled", {
-        /**
-         * This option is deprecated, because the functionality controlled by it was not supposed to belong to the Lookup widget. Instead, we suggest that you use the SelectBox widget with the acceptCustomValue option set to true.
-         */
-        get: function () {
-            return this._getOption('fieldEditEnabled');
-        },
-        set: function (value) {
-            this._setOption('fieldEditEnabled', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "fieldTemplate", {
-        /**
-         * Specifies a custom template for the input field.
-         */
-        get: function () {
-            return this._getOption('fieldTemplate');
-        },
-        set: function (value) {
-            this._setOption('fieldTemplate', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "focusStateEnabled", {
-        /**
-         * Specifies whether the widget can be focused using keyboard navigation.
-         */
-        get: function () {
-            return this._getOption('focusStateEnabled');
-        },
-        set: function (value) {
-            this._setOption('focusStateEnabled', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "fullScreen", {
-        /**
-         * A Boolean value specifying whether or not to display the lookup in full-screen mode.
-         */
-        get: function () {
-            return this._getOption('fullScreen');
-        },
-        set: function (value) {
-            this._setOption('fullScreen', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "grouped", {
-        /**
-         * A Boolean value specifying whether or not to group widget items.
-         */
-        get: function () {
-            return this._getOption('grouped');
-        },
-        set: function (value) {
-            this._setOption('grouped', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "groupTemplate", {
-        /**
-         * Specifies a custom template for group captions.
-         */
-        get: function () {
-            return this._getOption('groupTemplate');
-        },
-        set: function (value) {
-            this._setOption('groupTemplate', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "height", {
-        /**
-         * Specifies the widget's height.
-         */
-        get: function () {
-            return this._getOption('height');
-        },
-        set: function (value) {
-            this._setOption('height', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "hint", {
-        /**
-         * Specifies text for a hint that appears when a user pauses on the widget.
-         */
-        get: function () {
-            return this._getOption('hint');
-        },
-        set: function (value) {
-            this._setOption('hint', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "hoverStateEnabled", {
-        /**
-         * Specifies whether the widget changes its state when a user pauses on it.
-         */
-        get: function () {
-            return this._getOption('hoverStateEnabled');
-        },
-        set: function (value) {
-            this._setOption('hoverStateEnabled', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "inputAttr", {
-        /**
-         * Specifies the attributes to be passed on to the underlying HTML element.
-         */
-        get: function () {
-            return this._getOption('inputAttr');
-        },
-        set: function (value) {
-            this._setOption('inputAttr', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "isValid", {
-        /**
-         * Specifies whether the editor's value is valid.
-         */
-        get: function () {
-            return this._getOption('isValid');
-        },
-        set: function (value) {
-            this._setOption('isValid', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "items", {
-        /**
-         * An array of items displayed by the widget.
-         */
-        get: function () {
-            return this._getOption('items');
-        },
-        set: function (value) {
-            this._setOption('items', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "itemTemplate", {
-        /**
-         * Specifies a custom template for items.
-         */
-        get: function () {
-            return this._getOption('itemTemplate');
-        },
-        set: function (value) {
-            this._setOption('itemTemplate', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "minSearchLength", {
-        /**
-         * The minimum number of characters that must be entered into the text box to begin a search. Applies only if searchEnabled is true.
-         */
-        get: function () {
-            return this._getOption('minSearchLength');
-        },
-        set: function (value) {
-            this._setOption('minSearchLength', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "name", {
-        /**
-         * The value to be assigned to the `name` attribute of the underlying HTML element.
-         */
-        get: function () {
-            return this._getOption('name');
-        },
-        set: function (value) {
-            this._setOption('name', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "nextButtonText", {
-        /**
-         * The text displayed on the button used to load the next page from the data source.
-         */
-        get: function () {
-            return this._getOption('nextButtonText');
-        },
-        set: function (value) {
-            this._setOption('nextButtonText', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "noDataText", {
-        /**
-         * The text or HTML markup displayed by the widget if the item collection is empty.
-         */
-        get: function () {
-            return this._getOption('noDataText');
-        },
-        set: function (value) {
-            this._setOption('noDataText', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "opened", {
-        /**
-         * Specifies whether or not the drop-down editor is displayed.
-         */
-        get: function () {
-            return this._getOption('opened');
-        },
-        set: function (value) {
-            this._setOption('opened', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "pageLoadingText", {
-        /**
-         * Specifies the text shown in the pullDown panel, which is displayed when the widget is scrolled to the bottom.
-         */
-        get: function () {
-            return this._getOption('pageLoadingText');
-        },
-        set: function (value) {
-            this._setOption('pageLoadingText', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "pageLoadMode", {
-        /**
-         * Specifies whether the next page is loaded when a user scrolls the widget to the bottom or when the "next" button is clicked.
-         */
-        get: function () {
-            return this._getOption('pageLoadMode');
-        },
-        set: function (value) {
-            this._setOption('pageLoadMode', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "pagingEnabled", {
-        /**
-         * Use the DataSource.paginate option instead.
-         */
-        get: function () {
-            return this._getOption('pagingEnabled');
-        },
-        set: function (value) {
-            this._setOption('pagingEnabled', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "placeholder", {
-        /**
-         * The text displayed by the widget when nothing is selected.
-         */
-        get: function () {
-            return this._getOption('placeholder');
-        },
-        set: function (value) {
-            this._setOption('placeholder', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "popupHeight", {
-        /**
-         * Specifies the popup element's height. Applies only if fullScreen is false.
-         */
-        get: function () {
-            return this._getOption('popupHeight');
-        },
-        set: function (value) {
-            this._setOption('popupHeight', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "popupWidth", {
-        /**
-         * Specifies the popup element's width. Applies only if fullScreen is false.
-         */
-        get: function () {
-            return this._getOption('popupWidth');
-        },
-        set: function (value) {
-            this._setOption('popupWidth', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "position", {
-        /**
-         * An object defining widget positioning options.
-         */
-        get: function () {
-            return this._getOption('position');
-        },
-        set: function (value) {
-            this._setOption('position', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "pulledDownText", {
-        /**
-         * Specifies the text displayed in the pullDown panel when the widget is pulled below the refresh threshold.
-         */
-        get: function () {
-            return this._getOption('pulledDownText');
-        },
-        set: function (value) {
-            this._setOption('pulledDownText', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "pullingDownText", {
-        /**
-         * Specifies the text shown in the pullDown panel while the list is being pulled down to the refresh threshold.
-         */
-        get: function () {
-            return this._getOption('pullingDownText');
-        },
-        set: function (value) {
-            this._setOption('pullingDownText', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "pullRefreshEnabled", {
-        /**
-         * A Boolean value specifying whether or not the widget supports the "pull down to refresh" gesture.
-         */
-        get: function () {
-            return this._getOption('pullRefreshEnabled');
-        },
-        set: function (value) {
-            this._setOption('pullRefreshEnabled', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "refreshingText", {
-        /**
-         * Specifies the text displayed in the pullDown panel while the widget is being refreshed.
-         */
-        get: function () {
-            return this._getOption('refreshingText');
-        },
-        set: function (value) {
-            this._setOption('refreshingText', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "rtlEnabled", {
-        /**
-         * Switches the widget to a right-to-left representation.
-         */
-        get: function () {
-            return this._getOption('rtlEnabled');
-        },
-        set: function (value) {
-            this._setOption('rtlEnabled', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "searchEnabled", {
-        /**
-         * Specifies whether the search box is visible.
-         */
-        get: function () {
-            return this._getOption('searchEnabled');
-        },
-        set: function (value) {
-            this._setOption('searchEnabled', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "searchExpr", {
-        /**
-         * Specifies the name of a data source item field or an expression whose value is compared to the search criterion.
-         */
-        get: function () {
-            return this._getOption('searchExpr');
-        },
-        set: function (value) {
-            this._setOption('searchExpr', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "searchMode", {
-        /**
-         * Specifies the binary operation used to filter data.
-         */
-        get: function () {
-            return this._getOption('searchMode');
-        },
-        set: function (value) {
-            this._setOption('searchMode', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "searchPlaceholder", {
-        /**
-         * The text that is provided as a hint in the lookup's search bar.
-         */
-        get: function () {
-            return this._getOption('searchPlaceholder');
-        },
-        set: function (value) {
-            this._setOption('searchPlaceholder', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "searchTimeout", {
-        /**
-         * Specifies the time delay, in milliseconds, after the last character has been typed in, before a search is executed.
-         */
-        get: function () {
-            return this._getOption('searchTimeout');
-        },
-        set: function (value) {
-            this._setOption('searchTimeout', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "selectedItem", {
-        /**
-         * Gets the currently selected item.
-         */
-        get: function () {
-            return this._getOption('selectedItem');
-        },
-        set: function (value) {
-            this._setOption('selectedItem', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "shading", {
-        /**
-         * A Boolean value specifying whether or not the main screen is inactive while the lookup is active.
-         */
-        get: function () {
-            return this._getOption('shading');
-        },
-        set: function (value) {
-            this._setOption('shading', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "showCancelButton", {
-        /**
-         * Specifies whether to display the Cancel button in the lookup window.
-         */
-        get: function () {
-            return this._getOption('showCancelButton');
-        },
-        set: function (value) {
-            this._setOption('showCancelButton', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "showClearButton", {
-        /**
-         * Specifies whether or not to display the Clear button in the lookup window.
-         */
-        get: function () {
-            return this._getOption('showClearButton');
-        },
-        set: function (value) {
-            this._setOption('showClearButton', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "showDataBeforeSearch", {
-        /**
-         * Specifies whether or not the widget displays unfiltered values until a user types a number of characters exceeding the minSearchLength option value.
-         */
-        get: function () {
-            return this._getOption('showDataBeforeSearch');
-        },
-        set: function (value) {
-            this._setOption('showDataBeforeSearch', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "showNextButton", {
-        /**
-         * Use the pageLoadMode option instead.
-         */
-        get: function () {
-            return this._getOption('showNextButton');
-        },
-        set: function (value) {
-            this._setOption('showNextButton', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "showPopupTitle", {
-        /**
-         * A Boolean value specifying whether or not to display the title in the popup window.
-         */
-        get: function () {
-            return this._getOption('showPopupTitle');
-        },
-        set: function (value) {
-            this._setOption('showPopupTitle', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "tabIndex", {
-        /**
-         * Specifies the number of the element when the Tab key is used for navigating.
-         */
-        get: function () {
-            return this._getOption('tabIndex');
-        },
-        set: function (value) {
-            this._setOption('tabIndex', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "text", {
-        /**
-         * The read-only option that holds the text displayed by the widget input element.
-         */
-        get: function () {
-            return this._getOption('text');
-        },
-        set: function (value) {
-            this._setOption('text', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "title", {
-        /**
-         * The title of the lookup window.
-         */
-        get: function () {
-            return this._getOption('title');
-        },
-        set: function (value) {
-            this._setOption('title', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "titleTemplate", {
-        /**
-         * Specifies a custom template for the title.
-         */
-        get: function () {
-            return this._getOption('titleTemplate');
-        },
-        set: function (value) {
-            this._setOption('titleTemplate', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "useNativeScrolling", {
-        /**
-         * Specifies whether or not the widget uses native scrolling.
-         */
-        get: function () {
-            return this._getOption('useNativeScrolling');
-        },
-        set: function (value) {
-            this._setOption('useNativeScrolling', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "usePopover", {
-        /**
-         * Specifies whether or not to show lookup contents in a Popover widget.
-         */
-        get: function () {
-            return this._getOption('usePopover');
-        },
-        set: function (value) {
-            this._setOption('usePopover', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "validationError", {
-        /**
-         * Specifies information on the validation error when using a custom validation engine. Should be changed at runtime along with the isValid option.
-         */
-        get: function () {
-            return this._getOption('validationError');
-        },
-        set: function (value) {
-            this._setOption('validationError', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "validationMessageMode", {
-        /**
-         * Specifies how the message about the validation rules that are not satisfied by this editor's value is displayed.
-         */
-        get: function () {
-            return this._getOption('validationMessageMode');
-        },
-        set: function (value) {
-            this._setOption('validationMessageMode', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "value", {
-        /**
-         * Specifies the currently selected value. May be an object if dataSource contains objects and valueExpr is not set.
-         */
-        get: function () {
-            return this._getOption('value');
-        },
-        set: function (value) {
-            this._setOption('value', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "valueChangeEvent", {
-        /**
-         * Specifies the DOM events after which the widget's value should be updated.
-         */
-        get: function () {
-            return this._getOption('valueChangeEvent');
-        },
-        set: function (value) {
-            this._setOption('valueChangeEvent', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "valueExpr", {
-        /**
-         * Specifies which data field provides the widget's value. When this option is not set, the value is the entire data object.
-         */
-        get: function () {
-            return this._getOption('valueExpr');
-        },
-        set: function (value) {
-            this._setOption('valueExpr', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "visible", {
-        /**
-         * Specifies whether the widget is visible.
-         */
-        get: function () {
-            return this._getOption('visible');
-        },
-        set: function (value) {
-            this._setOption('visible', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DxLookupComponent.prototype, "width", {
-        /**
-         * Specifies the widget's width.
-         */
-        get: function () {
-            return this._getOption('width');
-        },
-        set: function (value) {
-            this._setOption('width', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    DxLookupComponent.prototype.change = function (_) { };
-    Object.defineProperty(DxLookupComponent.prototype, "itemsChildren", {
-        get: function () {
-            return this._getOption('items');
-        },
-        set: function (value) {
-            this.setChildren('items', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    DxLookupComponent.prototype._createInstance = function (element, options) {
-        var widget = new lookup_1.default(element, options);
-        if (this.validator) {
-            this.validator.createInstance(element);
-        }
-        return widget;
-    };
-    DxLookupComponent.prototype.writeValue = function (value) {
-        this.eventHelper.lockedValueChangeEvent = true;
-        this.value = value;
-        this.eventHelper.lockedValueChangeEvent = false;
-    };
-    DxLookupComponent.prototype.setDisabledState = function (isDisabled) {
-        this.disabled = isDisabled;
-    };
-    DxLookupComponent.prototype.registerOnChange = function (fn) { this.change = fn; };
-    DxLookupComponent.prototype.registerOnTouched = function (fn) { this.touched = fn; };
-    DxLookupComponent.prototype._createWidget = function (element) {
-        var _this = this;
-        _super.prototype._createWidget.call(this, element);
-        this.instance.on('focusOut', function (e) {
-            _this.eventHelper.fireNgEvent('onBlur', [e]);
-        });
-    };
-    DxLookupComponent.prototype.ngOnDestroy = function () {
-        this._destroyWidget();
-    };
-    DxLookupComponent.prototype.ngOnChanges = function (changes) {
-        _super.prototype.ngOnChanges.call(this, changes);
-        this.setupChanges('dataSource', changes);
-        this.setupChanges('items', changes);
-        this.setupChanges('searchExpr', changes);
-    };
-    DxLookupComponent.prototype.setupChanges = function (prop, changes) {
-        if (!(prop in this._optionsToUpdate)) {
-            this._idh.setup(prop, changes);
-        }
-    };
-    DxLookupComponent.prototype.ngDoCheck = function () {
-        this._idh.doCheck('dataSource');
-        this._idh.doCheck('items');
-        this._idh.doCheck('searchExpr');
-        this._watcherHelper.checkWatchers();
-        _super.prototype.ngDoCheck.call(this);
-        _super.prototype.clearChangedOptions.call(this);
-    };
-    DxLookupComponent.prototype._setOption = function (name, value) {
-        var isSetup = this._idh.setupSingle(name, value);
-        var isChanged = this._idh.getChanges(name, value) !== null;
-        if (isSetup || isChanged) {
-            _super.prototype._setOption.call(this, name, value);
-        }
-    };
-    DxLookupComponent.prototype.ngAfterContentInit = function () {
-        if (this.validator) {
-            this.validator.renderOnViewInit = false;
-        }
-    };
-    DxLookupComponent.decorators = [
-        { type: core_1.Component, args: [{
-                    selector: 'dx-lookup',
-                    template: '',
-                    providers: [
-                        template_host_1.DxTemplateHost,
-                        watcher_helper_1.WatcherHelper,
-                        CUSTOM_VALUE_ACCESSOR_PROVIDER,
-                        nested_option_1.NestedOptionHost,
-                        iterable_differ_helper_1.IterableDifferHelper
-                    ]
-                },] },
-    ];
-    /** @nocollapse */
-    DxLookupComponent.ctorParameters = function () { return [
-        { type: core_1.ElementRef, },
-        { type: core_1.NgZone, },
-        { type: template_host_1.DxTemplateHost, },
-        { type: watcher_helper_1.WatcherHelper, },
-        { type: iterable_differ_helper_1.IterableDifferHelper, },
-        { type: nested_option_1.NestedOptionHost, },
-    ]; };
-    DxLookupComponent.propDecorators = {
-        'validator': [{ type: core_1.ContentChild, args: [validator_1.DxValidatorComponent,] },],
-        'accessKey': [{ type: core_1.Input },],
-        'activeStateEnabled': [{ type: core_1.Input },],
-        'animation': [{ type: core_1.Input },],
-        'applyButtonText': [{ type: core_1.Input },],
-        'applyValueMode': [{ type: core_1.Input },],
-        'attr': [{ type: core_1.Input },],
-        'cancelButtonText': [{ type: core_1.Input },],
-        'cleanSearchOnOpening': [{ type: core_1.Input },],
-        'clearButtonText': [{ type: core_1.Input },],
-        'closeOnOutsideClick': [{ type: core_1.Input },],
-        'dataSource': [{ type: core_1.Input },],
-        'deferRendering': [{ type: core_1.Input },],
-        'disabled': [{ type: core_1.Input },],
-        'displayExpr': [{ type: core_1.Input },],
-        'displayValue': [{ type: core_1.Input },],
-        'dropDownButtonTemplate': [{ type: core_1.Input },],
-        'elementAttr': [{ type: core_1.Input },],
-        'fieldEditEnabled': [{ type: core_1.Input },],
-        'fieldTemplate': [{ type: core_1.Input },],
-        'focusStateEnabled': [{ type: core_1.Input },],
-        'fullScreen': [{ type: core_1.Input },],
-        'grouped': [{ type: core_1.Input },],
-        'groupTemplate': [{ type: core_1.Input },],
-        'height': [{ type: core_1.Input },],
-        'hint': [{ type: core_1.Input },],
-        'hoverStateEnabled': [{ type: core_1.Input },],
-        'inputAttr': [{ type: core_1.Input },],
-        'isValid': [{ type: core_1.Input },],
-        'items': [{ type: core_1.Input },],
-        'itemTemplate': [{ type: core_1.Input },],
-        'minSearchLength': [{ type: core_1.Input },],
-        'name': [{ type: core_1.Input },],
-        'nextButtonText': [{ type: core_1.Input },],
-        'noDataText': [{ type: core_1.Input },],
-        'opened': [{ type: core_1.Input },],
-        'pageLoadingText': [{ type: core_1.Input },],
-        'pageLoadMode': [{ type: core_1.Input },],
-        'pagingEnabled': [{ type: core_1.Input },],
-        'placeholder': [{ type: core_1.Input },],
-        'popupHeight': [{ type: core_1.Input },],
-        'popupWidth': [{ type: core_1.Input },],
-        'position': [{ type: core_1.Input },],
-        'pulledDownText': [{ type: core_1.Input },],
-        'pullingDownText': [{ type: core_1.Input },],
-        'pullRefreshEnabled': [{ type: core_1.Input },],
-        'refreshingText': [{ type: core_1.Input },],
-        'rtlEnabled': [{ type: core_1.Input },],
-        'searchEnabled': [{ type: core_1.Input },],
-        'searchExpr': [{ type: core_1.Input },],
-        'searchMode': [{ type: core_1.Input },],
-        'searchPlaceholder': [{ type: core_1.Input },],
-        'searchTimeout': [{ type: core_1.Input },],
-        'selectedItem': [{ type: core_1.Input },],
-        'shading': [{ type: core_1.Input },],
-        'showCancelButton': [{ type: core_1.Input },],
-        'showClearButton': [{ type: core_1.Input },],
-        'showDataBeforeSearch': [{ type: core_1.Input },],
-        'showNextButton': [{ type: core_1.Input },],
-        'showPopupTitle': [{ type: core_1.Input },],
-        'tabIndex': [{ type: core_1.Input },],
-        'text': [{ type: core_1.Input },],
-        'title': [{ type: core_1.Input },],
-        'titleTemplate': [{ type: core_1.Input },],
-        'useNativeScrolling': [{ type: core_1.Input },],
-        'usePopover': [{ type: core_1.Input },],
-        'validationError': [{ type: core_1.Input },],
-        'validationMessageMode': [{ type: core_1.Input },],
-        'value': [{ type: core_1.Input },],
-        'valueChangeEvent': [{ type: core_1.Input },],
-        'valueExpr': [{ type: core_1.Input },],
-        'visible': [{ type: core_1.Input },],
-        'width': [{ type: core_1.Input },],
-        'onClosed': [{ type: core_1.Output },],
-        'onContentReady': [{ type: core_1.Output },],
-        'onDisposing': [{ type: core_1.Output },],
-        'onInitialized': [{ type: core_1.Output },],
-        'onItemClick': [{ type: core_1.Output },],
-        'onOpened': [{ type: core_1.Output },],
-        'onOptionChanged': [{ type: core_1.Output },],
-        'onPageLoading': [{ type: core_1.Output },],
-        'onPullRefresh': [{ type: core_1.Output },],
-        'onScroll': [{ type: core_1.Output },],
-        'onSelectionChanged': [{ type: core_1.Output },],
-        'onTitleRendered': [{ type: core_1.Output },],
-        'onValueChanged': [{ type: core_1.Output },],
-        'accessKeyChange': [{ type: core_1.Output },],
-        'activeStateEnabledChange': [{ type: core_1.Output },],
-        'animationChange': [{ type: core_1.Output },],
-        'applyButtonTextChange': [{ type: core_1.Output },],
-        'applyValueModeChange': [{ type: core_1.Output },],
-        'attrChange': [{ type: core_1.Output },],
-        'cancelButtonTextChange': [{ type: core_1.Output },],
-        'cleanSearchOnOpeningChange': [{ type: core_1.Output },],
-        'clearButtonTextChange': [{ type: core_1.Output },],
-        'closeOnOutsideClickChange': [{ type: core_1.Output },],
-        'dataSourceChange': [{ type: core_1.Output },],
-        'deferRenderingChange': [{ type: core_1.Output },],
-        'disabledChange': [{ type: core_1.Output },],
-        'displayExprChange': [{ type: core_1.Output },],
-        'displayValueChange': [{ type: core_1.Output },],
-        'dropDownButtonTemplateChange': [{ type: core_1.Output },],
-        'elementAttrChange': [{ type: core_1.Output },],
-        'fieldEditEnabledChange': [{ type: core_1.Output },],
-        'fieldTemplateChange': [{ type: core_1.Output },],
-        'focusStateEnabledChange': [{ type: core_1.Output },],
-        'fullScreenChange': [{ type: core_1.Output },],
-        'groupedChange': [{ type: core_1.Output },],
-        'groupTemplateChange': [{ type: core_1.Output },],
-        'heightChange': [{ type: core_1.Output },],
-        'hintChange': [{ type: core_1.Output },],
-        'hoverStateEnabledChange': [{ type: core_1.Output },],
-        'inputAttrChange': [{ type: core_1.Output },],
-        'isValidChange': [{ type: core_1.Output },],
-        'itemsChange': [{ type: core_1.Output },],
-        'itemTemplateChange': [{ type: core_1.Output },],
-        'minSearchLengthChange': [{ type: core_1.Output },],
-        'nameChange': [{ type: core_1.Output },],
-        'nextButtonTextChange': [{ type: core_1.Output },],
-        'noDataTextChange': [{ type: core_1.Output },],
-        'openedChange': [{ type: core_1.Output },],
-        'pageLoadingTextChange': [{ type: core_1.Output },],
-        'pageLoadModeChange': [{ type: core_1.Output },],
-        'pagingEnabledChange': [{ type: core_1.Output },],
-        'placeholderChange': [{ type: core_1.Output },],
-        'popupHeightChange': [{ type: core_1.Output },],
-        'popupWidthChange': [{ type: core_1.Output },],
-        'positionChange': [{ type: core_1.Output },],
-        'pulledDownTextChange': [{ type: core_1.Output },],
-        'pullingDownTextChange': [{ type: core_1.Output },],
-        'pullRefreshEnabledChange': [{ type: core_1.Output },],
-        'refreshingTextChange': [{ type: core_1.Output },],
-        'rtlEnabledChange': [{ type: core_1.Output },],
-        'searchEnabledChange': [{ type: core_1.Output },],
-        'searchExprChange': [{ type: core_1.Output },],
-        'searchModeChange': [{ type: core_1.Output },],
-        'searchPlaceholderChange': [{ type: core_1.Output },],
-        'searchTimeoutChange': [{ type: core_1.Output },],
-        'selectedItemChange': [{ type: core_1.Output },],
-        'shadingChange': [{ type: core_1.Output },],
-        'showCancelButtonChange': [{ type: core_1.Output },],
-        'showClearButtonChange': [{ type: core_1.Output },],
-        'showDataBeforeSearchChange': [{ type: core_1.Output },],
-        'showNextButtonChange': [{ type: core_1.Output },],
-        'showPopupTitleChange': [{ type: core_1.Output },],
-        'tabIndexChange': [{ type: core_1.Output },],
-        'textChange': [{ type: core_1.Output },],
-        'titleChange': [{ type: core_1.Output },],
-        'titleTemplateChange': [{ type: core_1.Output },],
-        'useNativeScrollingChange': [{ type: core_1.Output },],
-        'usePopoverChange': [{ type: core_1.Output },],
-        'validationErrorChange': [{ type: core_1.Output },],
-        'validationMessageModeChange': [{ type: core_1.Output },],
-        'valueChange': [{ type: core_1.Output },],
-        'valueChangeEventChange': [{ type: core_1.Output },],
-        'valueExprChange': [{ type: core_1.Output },],
-        'visibleChange': [{ type: core_1.Output },],
-        'widthChange': [{ type: core_1.Output },],
-        'onBlur': [{ type: core_1.Output },],
-        'change': [{ type: core_1.HostListener, args: ['valueChange', ['$event'],] },],
-        'touched': [{ type: core_1.HostListener, args: ['onBlur', ['$event'],] },],
-        'itemsChildren': [{ type: core_1.ContentChildren, args: [item_dxi_2.DxiItemComponent,] },],
-    };
-    return DxLookupComponent;
-}(component_1.DxComponent));
-exports.DxLookupComponent = DxLookupComponent;
-var DxLookupModule = (function () {
-    function DxLookupModule() {
-    }
-    DxLookupModule.decorators = [
-        { type: core_1.NgModule, args: [{
-                    imports: [
-                        animation_1.DxoAnimationModule,
-                        hide_1.DxoHideModule,
-                        show_1.DxoShowModule,
-                        item_dxi_1.DxiItemModule,
-                        position_1.DxoPositionModule,
-                        at_1.DxoAtModule,
-                        boundary_offset_1.DxoBoundaryOffsetModule,
-                        collision_1.DxoCollisionModule,
-                        my_1.DxoMyModule,
-                        offset_1.DxoOffsetModule,
-                        template_1.DxTemplateModule
-                    ],
-                    declarations: [
-                        DxLookupComponent
-                    ],
-                    exports: [
-                        DxLookupComponent,
-                        animation_1.DxoAnimationModule,
-                        hide_1.DxoHideModule,
-                        show_1.DxoShowModule,
-                        item_dxi_1.DxiItemModule,
-                        position_1.DxoPositionModule,
-                        at_1.DxoAtModule,
-                        boundary_offset_1.DxoBoundaryOffsetModule,
-                        collision_1.DxoCollisionModule,
-                        my_1.DxoMyModule,
-                        offset_1.DxoOffsetModule,
-                        template_1.DxTemplateModule
-                    ],
-                },] },
-    ];
-    /** @nocollapse */
-    DxLookupModule.ctorParameters = function () { return []; };
-    return DxLookupModule;
-}());
-exports.DxLookupModule = DxLookupModule;
+"use strict";
+/*!
+ * devextreme-angular
+ * Version: 17.2.18
+ * Build date: Tue Dec 07 2021
+ *
+ * Copyright (c) 2012 - 2021 Developer Express Inc. ALL RIGHTS RESERVED
+ *
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file in the root of the project for details.
+ *
+ * https://github.com/DevExpress/devextreme-angular
+ */
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var core_1 = require("@angular/core");
+var lookup_1 = require("devextreme/ui/lookup");
+var validator_1 = require("./validator");
+var forms_1 = require("@angular/forms");
+var component_1 = require("../core/component");
+var template_host_1 = require("../core/template-host");
+var template_1 = require("../core/template");
+var nested_option_1 = require("../core/nested-option");
+var watcher_helper_1 = require("../core/watcher-helper");
+var iterable_differ_helper_1 = require("../core/iterable-differ-helper");
+var animation_1 = require("./nested/animation");
+var hide_1 = require("./nested/hide");
+var show_1 = require("./nested/show");
+var item_dxi_1 = require("./nested/item-dxi");
+var position_1 = require("./nested/position");
+var at_1 = require("./nested/at");
+var boundary_offset_1 = require("./nested/boundary-offset");
+var collision_1 = require("./nested/collision");
+var my_1 = require("./nested/my");
+var offset_1 = require("./nested/offset");
+var item_dxi_2 = require("./nested/item-dxi");
+var CUSTOM_VALUE_ACCESSOR_PROVIDER = {
+    provide: forms_1.NG_VALUE_ACCESSOR,
+    useExisting: core_1.forwardRef(function () { return DxLookupComponent; }),
+    multi: true
+};
+/**
+ * The Lookup is a widget that allows an end user to search for an item in a collection shown in a drop-down menu.
+ */
+var DxLookupComponent = (function (_super) {
+    __extends(DxLookupComponent, _super);
+    function DxLookupComponent(elementRef, ngZone, templateHost, _watcherHelper, _idh, optionHost) {
+        var _this = _super.call(this, elementRef, ngZone, templateHost, _watcherHelper) || this;
+        _this._watcherHelper = _watcherHelper;
+        _this._idh = _idh;
+        _this.touched = function (_) { };
+        _this._createEventEmitters([
+            { subscribe: 'closed', emit: 'onClosed' },
+            { subscribe: 'contentReady', emit: 'onContentReady' },
+            { subscribe: 'disposing', emit: 'onDisposing' },
+            { subscribe: 'initialized', emit: 'onInitialized' },
+            { subscribe: 'itemClick', emit: 'onItemClick' },
+            { subscribe: 'opened', emit: 'onOpened' },
+            { subscribe: 'optionChanged', emit: 'onOptionChanged' },
+            { subscribe: 'pageLoading', emit: 'onPageLoading' },
+            { subscribe: 'pullRefresh', emit: 'onPullRefresh' },
+            { subscribe: 'scroll', emit: 'onScroll' },
+            { subscribe: 'selectionChanged', emit: 'onSelectionChanged' },
+            { subscribe: 'titleRendered', emit: 'onTitleRendered' },
+            { subscribe: 'valueChanged', emit: 'onValueChanged' },
+            { emit: 'accessKeyChange' },
+            { emit: 'activeStateEnabledChange' },
+            { emit: 'animationChange' },
+            { emit: 'applyButtonTextChange' },
+            { emit: 'applyValueModeChange' },
+            { emit: 'attrChange' },
+            { emit: 'cancelButtonTextChange' },
+            { emit: 'cleanSearchOnOpeningChange' },
+            { emit: 'clearButtonTextChange' },
+            { emit: 'closeOnOutsideClickChange' },
+            { emit: 'dataSourceChange' },
+            { emit: 'deferRenderingChange' },
+            { emit: 'disabledChange' },
+            { emit: 'displayExprChange' },
+            { emit: 'displayValueChange' },
+            { emit: 'dropDownButtonTemplateChange' },
+            { emit: 'elementAttrChange' },
+            { emit: 'fieldEditEnabledChange' },
+            { emit: 'fieldTemplateChange' },
+            { emit: 'focusStateEnabledChange' },
+            { emit: 'fullScreenChange' },
+            { emit: 'groupedChange' },
+            { emit: 'groupTemplateChange' },
+            { emit: 'heightChange' },
+            { emit: 'hintChange' },
+            { emit: 'hoverStateEnabledChange' },
+            { emit: 'inputAttrChange' },
+            { emit: 'isValidChange' },
+            { emit: 'itemsChange' },
+            { emit: 'itemTemplateChange' },
+            { emit: 'minSearchLengthChange' },
+            { emit: 'nameChange' },
+            { emit: 'nextButtonTextChange' },
+            { emit: 'noDataTextChange' },
+            { emit: 'openedChange' },
+            { emit: 'pageLoadingTextChange' },
+            { emit: 'pageLoadModeChange' },
+            { emit: 'pagingEnabledChange' },
+            { emit: 'placeholderChange' },
+            { emit: 'popupHeightChange' },
+            { emit: 'popupWidthChange' },
+            { emit: 'positionChange' },
+            { emit: 'pulledDownTextChange' },
+            { emit: 'pullingDownTextChange' },
+            { emit: 'pullRefreshEnabledChange' },
+            { emit: 'refreshingTextChange' },
+            { emit: 'rtlEnabledChange' },
+            { emit: 'searchEnabledChange' },
+            { emit: 'searchExprChange' },
+            { emit: 'searchModeChange' },
+            { emit: 'searchPlaceholderChange' },
+            { emit: 'searchTimeoutChange' },
+            { emit: 'selectedItemChange' },
+            { emit: 'shadingChange' },
+            { emit: 'showCancelButtonChange' },
+            { emit: 'showClearButtonChange' },
+            { emit: 'showDataBeforeSearchChange' },
+            { emit: 'showNextButtonChange' },
+            { emit: 'showPopupTitleChange' },
+            { emit: 'tabIndexChange' },
+            { emit: 'textChange' },
+            { emit: 'titleChange' },
+            { emit: 'titleTemplateChange' },
+            { emit: 'useNativeScrollingChange' },
+            { emit: 'usePopoverChange' },
+            { emit: 'validationErrorChange' },
+            { emit: 'validationMessageModeChange' },
+            { emit: 'valueChange' },
+            { emit: 'valueChangeEventChange' },
+            { emit: 'valueExprChange' },
+            { emit: 'visibleChange' },
+            { emit: 'widthChange' },
+            { emit: 'onBlur' }
+        ]);
+        _this._idh.setHost(_this);
+        optionHost.setHost(_this);
+        return _this;
+    }
+    Object.defineProperty(DxLookupComponent.prototype, "accessKey", {
+        /**
+         * Specifies the shortcut key that sets focus on the widget.
+         */
+        get: function () {
+            return this._getOption('accessKey');
+        },
+        set: function (value) {
+            this._setOption('accessKey', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "activeStateEnabled", {
+        /**
+         * Specifies whether or not the widget changes its state when interacting with a user.
+         */
+        get: function () {
+            return this._getOption('activeStateEnabled');
+        },
+        set: function (value) {
+            this._setOption('activeStateEnabled', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "animation", {
+        /**
+         * Configures widget visibility animations. This object contains two fields: show and hide.
+         */
+        get: function () {
+            return this._getOption('animation');
+        },
+        set: function (value) {
+            this._setOption('animation', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "applyButtonText", {
+        /**
+         * The text displayed on the Apply button.
+         */
+        get: function () {
+            return this._getOption('applyButtonText');
+        },
+        set: function (value) {
+            this._setOption('applyButtonText', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "applyValueMode", {
+        /**
+         * Specifies the way an end-user applies the selected value.
+         */
+        get: function () {
+            return this._getOption('applyValueMode');
+        },
+        set: function (value) {
+            this._setOption('applyValueMode', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "attr", {
+        /**
+         * Use the inputAttr option instead.
+         */
+        get: function () {
+            return this._getOption('attr');
+        },
+        set: function (value) {
+            this._setOption('attr', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "cancelButtonText", {
+        /**
+         * The text displayed on the Cancel button.
+         */
+        get: function () {
+            return this._getOption('cancelButtonText');
+        },
+        set: function (value) {
+            this._setOption('cancelButtonText', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "cleanSearchOnOpening", {
+        /**
+         * Specifies whether or not the widget cleans the search box when the popup window is displayed.
+         */
+        get: function () {
+            return this._getOption('cleanSearchOnOpening');
+        },
+        set: function (value) {
+            this._setOption('cleanSearchOnOpening', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "clearButtonText", {
+        /**
+         * The text displayed on the Clear button.
+         */
+        get: function () {
+            return this._getOption('clearButtonText');
+        },
+        set: function (value) {
+            this._setOption('clearButtonText', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "closeOnOutsideClick", {
+        /**
+         * Specifies whether to close the drop-down menu if a user clicks outside it.
+         */
+        get: function () {
+            return this._getOption('closeOnOutsideClick');
+        },
+        set: function (value) {
+            this._setOption('closeOnOutsideClick', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "dataSource", {
+        /**
+         * A data source used to fetch data the widget should display.
+         */
+        get: function () {
+            return this._getOption('dataSource');
+        },
+        set: function (value) {
+            this._setOption('dataSource', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "deferRendering", {
+        /**
+         * Specifies whether to render the drop-down field's content when it is displayed. If false, the content is rendered immediately.
+         */
+        get: function () {
+            return this._getOption('deferRendering');
+        },
+        set: function (value) {
+            this._setOption('deferRendering', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "disabled", {
+        /**
+         * Specifies whether the widget responds to user interaction.
+         */
+        get: function () {
+            return this._getOption('disabled');
+        },
+        set: function (value) {
+            this._setOption('disabled', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "displayExpr", {
+        /**
+         * Specifies the name of the data source item field whose value is displayed by the widget.
+         */
+        get: function () {
+            return this._getOption('displayExpr');
+        },
+        set: function (value) {
+            this._setOption('displayExpr', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "displayValue", {
+        /**
+         * Returns the value currently displayed by the widget.
+         */
+        get: function () {
+            return this._getOption('displayValue');
+        },
+        set: function (value) {
+            this._setOption('displayValue', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "dropDownButtonTemplate", {
+        /**
+         * Specifies a custom template for the drop-down button.
+         */
+        get: function () {
+            return this._getOption('dropDownButtonTemplate');
+        },
+        set: function (value) {
+            this._setOption('dropDownButtonTemplate', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "elementAttr", {
+        /**
+         * Specifies the attributes to be attached to the widget's root element.
+         */
+        get: function () {
+            return this._getOption('elementAttr');
+        },
+        set: function (value) {
+            this._setOption('elementAttr', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "fieldEditEnabled", {
+        /**
+         * This option is deprecated, because the functionality controlled by it was not supposed to belong to the Lookup widget. Instead, we suggest that you use the SelectBox widget with the acceptCustomValue option set to true.
+         */
+        get: function () {
+            return this._getOption('fieldEditEnabled');
+        },
+        set: function (value) {
+            this._setOption('fieldEditEnabled', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "fieldTemplate", {
+        /**
+         * Specifies a custom template for the input field.
+         */
+        get: function () {
+            return this._getOption('fieldTemplate');
+        },
+        set: function (value) {
+            this._setOption('fieldTemplate', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "focusStateEnabled", {
+        /**
+         * Specifies whether the widget can be focused using keyboard navigation.
+         */
+        get: function () {
+            return this._getOption('focusStateEnabled');
+        },
+        set: function (value) {
+            this._setOption('focusStateEnabled', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "fullScreen", {
+        /**
+         * A Boolean value specifying whether or not to display the lookup in full-screen mode.
+         */
+        get: function () {
+            return this._getOption('fullScreen');
+        },
+        set: function (value) {
+            this._setOption('fullScreen', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "grouped", {
+        /**
+         * A Boolean value specifying whether or not to group widget items.
+         */
+        get: function () {
+            return this._getOption('grouped');
+        },
+        set: function (value) {
+            this._setOption('grouped', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "groupTemplate", {
+        /**
+         * Specifies a custom template for group captions.
+         */
+        get: function () {
+            return this._getOption('groupTemplate');
+        },
+        set: function (value) {
+            this._setOption('groupTemplate', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "height", {
+        /**
+         * Specifies the widget's height.
+         */
+        get: function () {
+            return this._getOption('height');
+        },
+        set: function (value) {
+            this._setOption('height', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "hint", {
+        /**
+         * Specifies text for a hint that appears when a user pauses on the widget.
+         */
+        get: function () {
+            return this._getOption('hint');
+        },
+        set: function (value) {
+            this._setOption('hint', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "hoverStateEnabled", {
+        /**
+         * Specifies whether the widget changes its state when a user pauses on it.
+         */
+        get: function () {
+            return this._getOption('hoverStateEnabled');
+        },
+        set: function (value) {
+            this._setOption('hoverStateEnabled', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "inputAttr", {
+        /**
+         * Specifies the attributes to be passed on to the underlying HTML element.
+         */
+        get: function () {
+            return this._getOption('inputAttr');
+        },
+        set: function (value) {
+            this._setOption('inputAttr', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "isValid", {
+        /**
+         * Specifies whether the editor's value is valid.
+         */
+        get: function () {
+            return this._getOption('isValid');
+        },
+        set: function (value) {
+            this._setOption('isValid', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "items", {
+        /**
+         * An array of items displayed by the widget.
+         */
+        get: function () {
+            return this._getOption('items');
+        },
+        set: function (value) {
+            this._setOption('items', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "itemTemplate", {
+        /**
+         * Specifies a custom template for items.
+         */
+        get: function () {
+            return this._getOption('itemTemplate');
+        },
+        set: function (value) {
+            this._setOption('itemTemplate', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "minSearchLength", {
+        /**
+         * The minimum number of characters that must be entered into the text box to begin a search. Applies only if searchEnabled is true.
+         */
+        get: function () {
+            return this._getOption('minSearchLength');
+        },
+        set: function (value) {
+            this._setOption('minSearchLength', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "name", {
+        /**
+         * The value to be assigned to the `name` attribute of the underlying HTML element.
+         */
+        get: function () {
+            return this._getOption('name');
+        },
+        set: function (value) {
+            this._setOption('name', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "nextButtonText", {
+        /**
+         * The text displayed on the button used to load the next page from the data source.
+         */
+        get: function () {
+            return this._getOption('nextButtonText');
+        },
+        set: function (value) {
+            this._setOption('nextButtonText', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "noDataText", {
+        /**
+         * The text or HTML markup displayed by the widget if the item collection is empty.
+         */
+        get: function () {
+            return this._getOption('noDataText');
+        },
+        set: function (value) {
+            this._setOption('noDataText', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "opened", {
+        /**
+         * Specifies whether or not the drop-down editor is displayed.
+         */
+        get: function () {
+            return this._getOption('opened');
+        },
+        set: function (value) {
+            this._setOption('opened', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "pageLoadingText", {
+        /**
+         * Specifies the text shown in the pullDown panel, which is displayed when the widget is scrolled to the bottom.
+         */
+        get: function () {
+            return this._getOption('pageLoadingText');
+        },
+        set: function (value) {
+            this._setOption('pageLoadingText', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "pageLoadMode", {
+        /**
+         * Specifies whether the next page is loaded when a user scrolls the widget to the bottom or when the "next" button is clicked.
+         */
+        get: function () {
+            return this._getOption('pageLoadMode');
+        },
+        set: function (value) {
+            this._setOption('pageLoadMode', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "pagingEnabled", {
+        /**
+         * Use the DataSource.paginate option instead.
+         */
+        get: function () {
+            return this._getOption('pagingEnabled');
+        },
+        set: function (value) {
+            this._setOption('pagingEnabled', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "placeholder", {
+        /**
+         * The text displayed by the widget when nothing is selected.
+         */
+        get: function () {
+            return this._getOption('placeholder');
+        },
+        set: function (value) {
+            this._setOption('placeholder', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "popupHeight", {
+        /**
+         * Specifies the popup element's height. Applies only if fullScreen is false.
+         */
+        get: function () {
+            return this._getOption('popupHeight');
+        },
+        set: function (value) {
+            this._setOption('popupHeight', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "popupWidth", {
+        /**
+         * Specifies the popup element's width. Applies only if fullScreen is false.
+         */
+        get: function () {
+            return this._getOption('popupWidth');
+        },
+        set: function (value) {
+            this._setOption('popupWidth', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "position", {
+        /**
+         * An object defining widget positioning options.
+         */
+        get: function () {
+            return this._getOption('position');
+        },
+        set: function (value) {
+            this._setOption('position', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "pulledDownText", {
+        /**
+         * Specifies the text displayed in the pullDown panel when the widget is pulled below the refresh threshold.
+         */
+        get: function () {
+            return this._getOption('pulledDownText');
+        },
+        set: function (value) {
+            this._setOption('pulledDownText', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "pullingDownText", {
+        /**
+         * Specifies the text shown in the pullDown panel while the list is being pulled down to the refresh threshold.
+         */
+        get: function () {
+            return this._getOption('pullingDownText');
+        },
+        set: function (value) {
+            this._setOption('pullingDownText', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "pullRefreshEnabled", {
+        /**
+         * A Boolean value specifying whether or not the widget supports the "pull down to refresh" gesture.
+         */
+        get: function () {
+            return this._getOption('pullRefreshEnabled');
+        },
+        set: function (value) {
+            this._setOption('pullRefreshEnabled', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "refreshingText", {
+        /**
+         * Specifies the text displayed in the pullDown panel while the widget is being refreshed.
+         */
+        get: function () {
+            return this._getOption('refreshingText');
+        },
+        set: function (value) {
+            this._setOption('refreshingText', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "rtlEnabled", {
+        /**
+         * Switches the widget to a right-to-left representation.
+         */
+        get: function () {
+            return this._getOption('rtlEnabled');
+        },
+        set: function (value) {
+            this._setOption('rtlEnabled', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "searchEnabled", {
+        /**
+         * Specifies whether the search box is visible.
+         */
+        get: function () {
+            return this._getOption('searchEnabled');
+        },
+        set: function (value) {
+            this._setOption('searchEnabled', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "searchExpr", {
+        /**
+         * Specifies the name of a data source item field or an expression whose value is compared to the search criterion.
+         */
+        get: function () {
+            return this._getOption('searchExpr');
+        },
+        set: function (value) {
+            this._setOption('searchExpr', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "searchMode", {
+        /**
+         * Specifies the binary operation used to filter data.
+         */
+        get: function () {
+            return this._getOption('searchMode');
+        },
+        set: function (value) {
+            this._setOption('searchMode', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "searchPlaceholder", {
+        /**
+         * The text that is provided as a hint in the lookup's search bar.
+         */
+        get: function () {
+            return this._getOption('searchPlaceholder');
+        },
+        set: function (value) {
+            this._setOption('searchPlaceholder', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "searchTimeout", {
+        /**
+         * Specifies the time delay, in milliseconds, after the last character has been typed in, before a search is executed.
+         */
+        get: function () {
+            return this._getOption('searchTimeout');
+        },
+        set: function (value) {
+            this._setOption('searchTimeout', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "selectedItem", {
+        /**
+         * Gets the currently selected item.
+         */
+        get: function () {
+            return this._getOption('selectedItem');
+        },
+        set: function (value) {
+            this._setOption('selectedItem', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "shading", {
+        /**
+         * A Boolean value specifying whether or not the main screen is inactive while the lookup is active.
+         */
+        get: function () {
+            return this._getOption('shading');
+        },
+        set: function (value) {
+            this._setOption('shading', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "showCancelButton", {
+        /**
+         * Specifies whether to display the Cancel button in the lookup window.
+         */
+        get: function () {
+            return this._getOption('showCancelButton');
+        },
+        set: function (value) {
+            this._setOption('showCancelButton', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "showClearButton", {
+        /**
+         * Specifies whether or not to display the Clear button in the lookup window.
+         */
+        get: function () {
+            return this._getOption('showClearButton');
+        },
+        set: function (value) {
+            this._setOption('showClearButton', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "showDataBeforeSearch", {
+        /**
+         * Specifies whether or not the widget displays unfiltered values until a user types a number of characters exceeding the minSearchLength option value.
+         */
+        get: function () {
+            return this._getOption('showDataBeforeSearch');
+        },
+        set: function (value) {
+            this._setOption('showDataBeforeSearch', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "showNextButton", {
+        /**
+         * Use the pageLoadMode option instead.
+         */
+        get: function () {
+            return this._getOption('showNextButton');
+        },
+        set: function (value) {
+            this._setOption('showNextButton', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "showPopupTitle", {
+        /**
+         * A Boolean value specifying whether or not to display the title in the popup window.
+         */
+        get: function () {
+            return this._getOption('showPopupTitle');
+        },
+        set: function (value) {
+            this._setOption('showPopupTitle', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "tabIndex", {
+        /**
+         * Specifies the number of the element when the Tab key is used for navigating.
+         */
+        get: function () {
+            return this._getOption('tabIndex');
+        },
+        set: function (value) {
+            this._setOption('tabIndex', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "text", {
+        /**
+         * The read-only option that holds the text displayed by the widget input element.
+         */
+        get: function () {
+            return this._getOption('text');
+        },
+        set: function (value) {
+            this._setOption('text', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "title", {
+        /**
+         * The title of the lookup window.
+         */
+        get: function () {
+            return this._getOption('title');
+        },
+        set: function (value) {
+            this._setOption('title', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "titleTemplate", {
+        /**
+         * Specifies a custom template for the title.
+         */
+        get: function () {
+            return this._getOption('titleTemplate');
+        },
+        set: function (value) {
+            this._setOption('titleTemplate', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "useNativeScrolling", {
+        /**
+         * Specifies whether or not the widget uses native scrolling.
+         */
+        get: function () {
+            return this._getOption('useNativeScrolling');
+        },
+        set: function (value) {
+            this._setOption('useNativeScrolling', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "usePopover", {
+        /**
+         * Specifies whether or not to show lookup contents in a Popover widget.
+         */
+        get: function () {
+            return this._getOption('usePopover');
+        },
+        set: function (value) {
+            this._setOption('usePopover', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "validationError", {
+        /**
+         * Specifies information on the validation error when using a custom validation engine. Should be changed at runtime along with the isValid option.
+         */
+        get: function () {
+            return this._getOption('validationError');
+        },
+        set: function (value) {
+            this._setOption('validationError', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "validationMessageMode", {
+        /**
+         * Specifies how the message about the validation rules that are not satisfied by this editor's value is displayed.
+         */
+        get: function () {
+            return this._getOption('validationMessageMode');
+        },
+        set: function (value) {
+            this._setOption('validationMessageMode', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "value", {
+        /**
+         * Specifies the currently selected value. May be an object if dataSource contains objects and valueExpr is not set.
+         */
+        get: function () {
+            return this._getOption('value');
+        },
+        set: function (value) {
+            this._setOption('value', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "valueChangeEvent", {
+        /**
+         * Specifies the DOM events after which the widget's value should be updated.
+         */
+        get: function () {
+            return this._getOption('valueChangeEvent');
+        },
+        set: function (value) {
+            this._setOption('valueChangeEvent', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "valueExpr", {
+        /**
+         * Specifies which data field provides the widget's value. When this option is not set, the value is the entire data object.
+         */
+        get: function () {
+            return this._getOption('valueExpr');
+        },
+        set: function (value) {
+            this._setOption('valueExpr', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "visible", {
+        /**
+         * Specifies whether the widget is visible.
+         */
+        get: function () {
+            return this._getOption('visible');
+        },
+        set: function (value) {
+            this._setOption('visible', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DxLookupComponent.prototype, "width", {
+        /**
+         * Specifies the widget's width.
+         */
+        get: function () {
+            return this._getOption('width');
+        },
+        set: function (value) {
+            this._setOption('width', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    DxLookupComponent.prototype.change = function (_) { };
+    Object.defineProperty(DxLookupComponent.prototype, "itemsChildren", {
+        get: function () {
+            return this._getOption('items');
+        },
+        set: function (value) {
+            this.setChildren('items', value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    DxLookupComponent.prototype._createInstance = function (element, options) {
+        var widget = new lookup_1.default(element, options);
+        if (this.validator) {
+            this.validator.createInstance(element);
+        }
+        return widget;
+    };
+    DxLookupComponent.prototype.writeValue = function (value) {
+        this.eventHelper.lockedValueChangeEvent = true;
+        this.value = value;
+        this.eventHelper.lockedValueChangeEvent = false;
+    };
+    DxLookupComponent.prototype.setDisabledState = function (isDisabled) {
+        this.disabled = isDisabled;
+    };
+    DxLookupComponent.prototype.registerOnChange = function (fn) { this.change = fn; };
+    DxLookupComponent.prototype.registerOnTouched = function (fn) { this.touched = fn; };
+    DxLookupComponent.prototype._createWidget = function (element) {
+        var _this = this;
+        _super.prototype._createWidget.call(this, element);
+        this.instance.on('focusOut', function (e) {
+            _this.eventHelper.fireNgEvent('onBlur', [e]);
+        });
+    };
+    DxLookupComponent.prototype.ngOnDestroy = function () {
+        this._destroyWidget();
+    };
+    DxLookupComponent.prototype.ngOnChanges = function (changes) {
+        _super.prototype.ngOnChanges.call(this, changes);
+        this.setupChanges('dataSource', changes);
+        this.setupChanges('items', changes);
+        this.setupChanges('searchExpr', changes);
+    };
+    DxLookupComponent.prototype.setupChanges = function (prop, changes) {
+        if (!(prop in this._optionsToUpdate)) {
+            this._idh.setup(prop, changes);
+        }
+    };
+    DxLookupComponent.prototype.ngDoCheck = function () {
+        this._idh.doCheck('dataSource');
+        this._idh.doCheck('items');
+        this._idh.doCheck('searchExpr');
+        this._watcherHelper.checkWatchers();
+        _super.prototype.ngDoCheck.call(this);
+        _super.prototype.clearChangedOptions.call(this);
+    };
+    DxLookupComponent.prototype._setOption = function (name, value) {
+        var isSetup = this._idh.setupSingle(name, value);
+        var isChanged = this._idh.getChanges(name, value) !== null;
+        if (isSetup || isChanged) {
+            _super.prototype._setOption.call(this, name, value);
+        }
+    };
+    DxLookupComponent.prototype.ngAfterContentInit = function () {
+        if (this.validator) {
+            this.validator.renderOnViewInit = false;
+        }
+    };
+    DxLookupComponent.decorators = [
+        { type: core_1.Component, args: [{
+                    selector: 'dx-lookup',
+                    template: '',
+                    providers: [
+                        template_host_1.DxTemplateHost,
+                        watcher_helper_1.WatcherHelper,
+                        CUSTOM_VALUE_ACCESSOR_PROVIDER,
+                        nested_option_1.NestedOptionHost,
+                        iterable_differ_helper_1.IterableDifferHelper
+                    ]
+                },] },
+    ];
+    /** @nocollapse */
+    DxLookupComponent.ctorParameters = function () { return [
+        { type: core_1.ElementRef, },
+        { type: core_1.NgZone, },
+        { type: template_host_1.DxTemplateHost, },
+        { type: watcher_helper_1.WatcherHelper, },
+        { type: iterable_differ_helper_1.IterableDifferHelper, },
+        { type: nested_option_1.NestedOptionHost, },
+    ]; };
+    DxLookupComponent.propDecorators = {
+        'validator': [{ type: core_1.ContentChild, args: [validator_1.DxValidatorComponent,] },],
+        'accessKey': [{ type: core_1.Input },],
+        'activeStateEnabled': [{ type: core_1.Input },],
+        'animation': [{ type: core_1.Input },],
+        'applyButtonText': [{ type: core_1.Input },],
+        'applyValueMode': [{ type: core_1.Input },],
+        'attr': [{ type: core_1.Input },],
+        'cancelButtonText': [{ type: core_1.Input },],
+        'cleanSearchOnOpening': [{ type: core_1.Input },],
+        'clearButtonText': [{ type: core_1.Input },],
+        'closeOnOutsideClick': [{ type: core_1.Input },],
+        'dataSource': [{ type: core_1.Input },],
+        'deferRendering': [{ type: core_1.Input },],
+        'disabled': [{ type: core_1.Input },],
+        'displayExpr': [{ type: core_1.Input },],
+        'displayValue': [{ type: core_1.Input },],
+        'dropDownButtonTemplate': [{ type: core_1.Input },],
+        'elementAttr': [{ type: core_1.Input },],
+        'fieldEditEnabled': [{ type: core_1.Input },],
+        'fieldTemplate': [{ type: core_1.Input },],
+        'focusStateEnabled': [{ type: core_1.Input },],
+        'fullScreen': [{ type: core_1.Input },],
+        'grouped': [{ type: core_1.Input },],
+        'groupTemplate': [{ type: core_1.Input },],
+        'height': [{ type: core_1.Input },],
+        'hint': [{ type: core_1.Input },],
+        'hoverStateEnabled': [{ type: core_1.Input },],
+        'inputAttr': [{ type: core_1.Input },],
+        'isValid': [{ type: core_1.Input },],
+        'items': [{ type: core_1.Input },],
+        'itemTemplate': [{ type: core_1.Input },],
+        'minSearchLength': [{ type: core_1.Input },],
+        'name': [{ type: core_1.Input },],
+        'nextButtonText': [{ type: core_1.Input },],
+        'noDataText': [{ type: core_1.Input },],
+        'opened': [{ type: core_1.Input },],
+        'pageLoadingText': [{ type: core_1.Input },],
+        'pageLoadMode': [{ type: core_1.Input },],
+        'pagingEnabled': [{ type: core_1.Input },],
+        'placeholder': [{ type: core_1.Input },],
+        'popupHeight': [{ type: core_1.Input },],
+        'popupWidth': [{ type: core_1.Input },],
+        'position': [{ type: core_1.Input },],
+        'pulledDownText': [{ type: core_1.Input },],
+        'pullingDownText': [{ type: core_1.Input },],
+        'pullRefreshEnabled': [{ type: core_1.Input },],
+        'refreshingText': [{ type: core_1.Input },],
+        'rtlEnabled': [{ type: core_1.Input },],
+        'searchEnabled': [{ type: core_1.Input },],
+        'searchExpr': [{ type: core_1.Input },],
+        'searchMode': [{ type: core_1.Input },],
+        'searchPlaceholder': [{ type: core_1.Input },],
+        'searchTimeout': [{ type: core_1.Input },],
+        'selectedItem': [{ type: core_1.Input },],
+        'shading': [{ type: core_1.Input },],
+        'showCancelButton': [{ type: core_1.Input },],
+        'showClearButton': [{ type: core_1.Input },],
+        'showDataBeforeSearch': [{ type: core_1.Input },],
+        'showNextButton': [{ type: core_1.Input },],
+        'showPopupTitle': [{ type: core_1.Input },],
+        'tabIndex': [{ type: core_1.Input },],
+        'text': [{ type: core_1.Input },],
+        'title': [{ type: core_1.Input },],
+        'titleTemplate': [{ type: core_1.Input },],
+        'useNativeScrolling': [{ type: core_1.Input },],
+        'usePopover': [{ type: core_1.Input },],
+        'validationError': [{ type: core_1.Input },],
+        'validationMessageMode': [{ type: core_1.Input },],
+        'value': [{ type: core_1.Input },],
+        'valueChangeEvent': [{ type: core_1.Input },],
+        'valueExpr': [{ type: core_1.Input },],
+        'visible': [{ type: core_1.Input },],
+        'width': [{ type: core_1.Input },],
+        'onClosed': [{ type: core_1.Output },],
+        'onContentReady': [{ type: core_1.Output },],
+        'onDisposing': [{ type: core_1.Output },],
+        'onInitialized': [{ type: core_1.Output },],
+        'onItemClick': [{ type: core_1.Output },],
+        'onOpened': [{ type: core_1.Output },],
+        'onOptionChanged': [{ type: core_1.Output },],
+        'onPageLoading': [{ type: core_1.Output },],
+        'onPullRefresh': [{ type: core_1.Output },],
+        'onScroll': [{ type: core_1.Output },],
+        'onSelectionChanged': [{ type: core_1.Output },],
+        'onTitleRendered': [{ type: core_1.Output },],
+        'onValueChanged': [{ type: core_1.Output },],
+        'accessKeyChange': [{ type: core_1.Output },],
+        'activeStateEnabledChange': [{ type: core_1.Output },],
+        'animationChange': [{ type: core_1.Output },],
+        'applyButtonTextChange': [{ type: core_1.Output },],
+        'applyValueModeChange': [{ type: core_1.Output },],
+        'attrChange': [{ type: core_1.Output },],
+        'cancelButtonTextChange': [{ type: core_1.Output },],
+        'cleanSearchOnOpeningChange': [{ type: core_1.Output },],
+        'clearButtonTextChange': [{ type: core_1.Output },],
+        'closeOnOutsideClickChange': [{ type: core_1.Output },],
+        'dataSourceChange': [{ type: core_1.Output },],
+        'deferRenderingChange': [{ type: core_1.Output },],
+        'disabledChange': [{ type: core_1.Output },],
+        'displayExprChange': [{ type: core_1.Output },],
+        'displayValueChange': [{ type: core_1.Output },],
+        'dropDownButtonTemplateChange': [{ type: core_1.Output },],
+        'elementAttrChange': [{ type: core_1.Output },],
+        'fieldEditEnabledChange': [{ type: core_1.Output },],
+        'fieldTemplateChange': [{ type: core_1.Output },],
+        'focusStateEnabledChange': [{ type: core_1.Output },],
+        'fullScreenChange': [{ type: core_1.Output },],
+        'groupedChange': [{ type: core_1.Output },],
+        'groupTemplateChange': [{ type: core_1.Output },],
+        'heightChange': [{ type: core_1.Output },],
+        'hintChange': [{ type: core_1.Output },],
+        'hoverStateEnabledChange': [{ type: core_1.Output },],
+        'inputAttrChange': [{ type: core_1.Output },],
+        'isValidChange': [{ type: core_1.Output },],
+        'itemsChange': [{ type: core_1.Output },],
+        'itemTemplateChange': [{ type: core_1.Output },],
+        'minSearchLengthChange': [{ type: core_1.Output },],
+        'nameChange': [{ type: core_1.Output },],
+        'nextButtonTextChange': [{ type: core_1.Output },],
+        'noDataTextChange': [{ type: core_1.Output },],
+        'openedChange': [{ type: core_1.Output },],
+        'pageLoadingTextChange': [{ type: core_1.Output },],
+        'pageLoadModeChange': [{ type: core_1.Output },],
+        'pagingEnabledChange': [{ type: core_1.Output },],
+        'placeholderChange': [{ type: core_1.Output },],
+        'popupHeightChange': [{ type: core_1.Output },],
+        'popupWidthChange': [{ type: core_1.Output },],
+        'positionChange': [{ type: core_1.Output },],
+        'pulledDownTextChange': [{ type: core_1.Output },],
+        'pullingDownTextChange': [{ type: core_1.Output },],
+        'pullRefreshEnabledChange': [{ type: core_1.Output },],
+        'refreshingTextChange': [{ type: core_1.Output },],
+        'rtlEnabledChange': [{ type: core_1.Output },],
+        'searchEnabledChange': [{ type: core_1.Output },],
+        'searchExprChange': [{ type: core_1.Output },],
+        'searchModeChange': [{ type: core_1.Output },],
+        'searchPlaceholderChange': [{ type: core_1.Output },],
+        'searchTimeoutChange': [{ type: core_1.Output },],
+        'selectedItemChange': [{ type: core_1.Output },],
+        'shadingChange': [{ type: core_1.Output },],
+        'showCancelButtonChange': [{ type: core_1.Output },],
+        'showClearButtonChange': [{ type: core_1.Output },],
+        'showDataBeforeSearchChange': [{ type: core_1.Output },],
+        'showNextButtonChange': [{ type: core_1.Output },],
+        'showPopupTitleChange': [{ type: core_1.Output },],
+        'tabIndexChange': [{ type: core_1.Output },],
+        'textChange': [{ type: core_1.Output },],
+        'titleChange': [{ type: core_1.Output },],
+        'titleTemplateChange': [{ type: core_1.Output },],
+        'useNativeScrollingChange': [{ type: core_1.Output },],
+        'usePopoverChange': [{ type: core_1.Output },],
+        'validationErrorChange': [{ type: core_1.Output },],
+        'validationMessageModeChange': [{ type: core_1.Output },],
+        'valueChange': [{ type: core_1.Output },],
+        'valueChangeEventChange': [{ type: core_1.Output },],
+        'valueExprChange': [{ type: core_1.Output },],
+        'visibleChange': [{ type: core_1.Output },],
+        'widthChange': [{ type: core_1.Output },],
+        'onBlur': [{ type: core_1.Output },],
+        'change': [{ type: core_1.HostListener, args: ['valueChange', ['$event'],] },],
+        'touched': [{ type: core_1.HostListener, args: ['onBlur', ['$event'],] },],
+        'itemsChildren': [{ type: core_1.ContentChildren, args: [item_dxi_2.DxiItemComponent,] },],
+    };
+    return DxLookupComponent;
+}(component_1.DxComponent));
+exports.DxLookupComponent = DxLookupComponent;
+var DxLookupModule = (function () {
+    function DxLookupModule() {
+    }
+    DxLookupModule.decorators = [
+        { type: core_1.NgModule, args: [{
+                    imports: [
+                        animation_1.DxoAnimationModule,
+                        hide_1.DxoHideModule,
+                        show_1.DxoShowModule,
+                        item_dxi_1.DxiItemModule,
+                        position_1.DxoPositionModule,
+                        at_1.DxoAtModule,
+                        boundary_offset_1.DxoBoundaryOffsetModule,
+                        collision_1.DxoCollisionModule,
+                        my_1.DxoMyModule,
+                        offset_1.DxoOffsetModule,
+                        template_1.DxTemplateModule
+                    ],
+                    declarations: [
+                        DxLookupComponent
+                    ],
+                    exports: [
+                        DxLookupComponent,
+                        animation_1.DxoAnimationModule,
+                        hide_1.DxoHideModule,
+                        show_1.DxoShowModule,
+                        item_dxi_1.DxiItemModule,
+                        position_1.DxoPositionModule,
+                        at_1.DxoAtModule,
+                        boundary_offset_1.DxoBoundaryOffsetModule,
+                        collision_1.DxoCollisionModule,
+                        my_1.DxoMyModule,
+                        offset_1.DxoOffsetModule,
+                        template_1.DxTemplateModule
+                    ],
+                },] },
+    ];
+    /** @nocollapse */
+    DxLookupModule.ctorParameters = function () { return []; };
+    return DxLookupModule;
+}());
+exports.DxLookupModule = DxLookupModule;
 //# sourceMappingURL=lookup.js.map