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