@syncfusion/ej2-dropdowns 23.2.7 → 24.1.41-566987

package/src/drop-down-list/drop-down-list-model.d.ts

@@ -1,4 +1,4 @@
-import { EventHandler, Property, Event, compile, EmitType, KeyboardEvents, append, select, ModuleDeclaration } from '@syncfusion/ej2-base';import { attributes, isNullOrUndefined, getUniqueID, formatUnit, isUndefined, getValue } from '@syncfusion/ej2-base';import { Animation, AnimationModel, Browser, KeyboardEventArgs, NotifyPropertyChanges } from '@syncfusion/ej2-base';import { addClass, removeClass, closest, prepend, detach, classList } from '@syncfusion/ej2-base';import { Popup, isCollide, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { IInput, Input, InputObject, FloatLabelType } from '@syncfusion/ej2-inputs';import { incrementalSearch, resetIncrementalSearchValues } from '../common/incremental-search';import { DropDownBase, dropDownBaseClasses, SelectEventArgs, FilteringEventArgs, PopupEventArgs } from '../drop-down-base/drop-down-base';import { FocusEventArgs, ResultData, BeforeOpenEventArgs } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { DataManager, Query, Predicate, DataOptions } from '@syncfusion/ej2-data';import {VirtualScroll, Offsets, ScrollDirection, SentinelType, VirtualInfo} from '../common/virtual-scroll';import { Skeleton } from '@syncfusion/ej2-notifications';
+import { EventHandler, Property, Event, compile, EmitType, KeyboardEvents, append, select, ModuleDeclaration } from '@syncfusion/ej2-base';
 import {ChangeEventArgs} from "./drop-down-list";
 import {DropDownBaseModel} from "../drop-down-base/drop-down-base-model";
 
@@ -8,260 +8,260 @@ import {DropDownBaseModel} from "../drop-down-base/drop-down-base-model";
 export interface DropDownListModel extends DropDownBaseModel{
 
     /**
-     * Sets CSS classes to the root element of the component that allows customization of appearance.
-     *
-     * @default null
-     */
-    cssClass?: string;
+     * Sets CSS classes to the root element of the component that allows customization of appearance.
+     *
+     * @default null
+     */
+    cssClass?: string;
 
     /**
-     * Specifies the width of the component. By default, the component width sets based on the width of
-     * its parent container. You can also set the width in pixel values.
-     *
-     * @default '100%'
-     * @aspType string
-     */
-    width?: string | number;
+     * Specifies the width of the component. By default, the component width sets based on the width of
+     * its parent container. You can also set the width in pixel values.
+     *
+     * @default '100%'
+     * @aspType string
+     */
+    width?: string | number;
 
     /**
-     * Specifies a value that indicates whether the component is enabled or not.
-     *
-     * @default true
-
-     */
-    enabled?: boolean;
+     * Specifies a value that indicates whether the component is enabled or not.
+     *
+     * @default true
+     * @deprecated
+     */
+    enabled?: boolean;
 
     /**
-     * Enable or disable persisting component's state between page reloads.
-     * If enabled, following list of states will be persisted.
-     * 1. value
-     *
-     * @default false
-
-     */
-    enablePersistence?: boolean;
+     * Enable or disable persisting component's state between page reloads.
+     * If enabled, following list of states will be persisted.
+     * 1. value
+     *
+     * @default false
+     * @deprecated
+     */
+    enablePersistence?: boolean;
 
     /**
-     * Specifies the height of the popup list.
-     * > For more details about the popup configuration refer to
-     * [`Popup Configuration`](../../drop-down-list/getting-started#configure-the-popup-list) documentation.
-     *
-     * @default '300px'
-     * @aspType string
-     */
-    popupHeight?: string | number;
+     * Specifies the height of the popup list.
+     * > For more details about the popup configuration refer to
+     * [`Popup Configuration`](../../drop-down-list/getting-started#configure-the-popup-list) documentation.
+     *
+     * @default '300px'
+     * @aspType string
+     */
+    popupHeight?: string | number;
 
     /**
-     * Specifies the width of the popup list. By default, the popup width sets based on the width of
-     * the component.
-     * > For more details about the popup configuration refer to
-     * [`Popup Configuration`](../../drop-down-list/getting-started#configure-the-popup-list) documentation.
-     *
-     * @default '100%'
-     * @aspType string
-     */
-    popupWidth?: string | number;
+     * Specifies the width of the popup list. By default, the popup width sets based on the width of
+     * the component.
+     * > For more details about the popup configuration refer to
+     * [`Popup Configuration`](../../drop-down-list/getting-started#configure-the-popup-list) documentation.
+     *
+     * @default '100%'
+     * @aspType string
+     */
+    popupWidth?: string | number;
 
     /**
-     * Specifies a short hint that describes the expected value of the DropDownList component.
-     *
-     * @default null
-     */
-    placeholder?: string;
+     * Specifies a short hint that describes the expected value of the DropDownList component.
+     *
+     * @default null
+     */
+    placeholder?: string;
 
     /**
-     * Accepts the value to be displayed as a watermark text on the filter bar.
-     *
-     * @default null
-     */
-    filterBarPlaceholder?: string;
+     * Accepts the value to be displayed as a watermark text on the filter bar.
+     *
+     * @default null
+     */
+    filterBarPlaceholder?: string;
 
     /**
-     * Allows additional HTML attributes such as title, name, etc., and
-     * accepts n number of attributes in a key-value pair format.
-     *
-     * {% codeBlock src='dropdownlist/htmlAttributes/index.md' %}{% endcodeBlock %}
-     *
-     * @default {}
-     */
-    htmlAttributes?: { [key: string]: string };
+     * Allows additional HTML attributes such as title, name, etc., and
+     * accepts n number of attributes in a key-value pair format.
+     *
+     * {% codeBlock src='dropdownlist/htmlAttributes/index.md' %}{% endcodeBlock %}
+     *
+     * @default {}
+     */
+    htmlAttributes?: { [key: string]: string };
 
     /**
-     * Accepts the external `Query`
-     * that execute along with data processing.
-     *
-     * {% codeBlock src='dropdownlist/query/index.md' %}{% endcodeBlock %}
-     *
-     * @default null
-
-     */
-    query?: Query;
+     * Accepts the external `Query`
+     * that execute along with data processing.
+     *
+     * {% codeBlock src='dropdownlist/query/index.md' %}{% endcodeBlock %}
+     *
+     * @default null
+     * @deprecated
+     */
+    query?: Query;
 
     /**
-     * Accepts the template design and assigns it to the selected list item in the input element of the component.
-     * For more details about the available template options refer to
-     * [`Template`](../../drop-down-list/templates) documentation.
-     *
-     * We have built-in `template engine`
-     * which provides options to compile template string into a executable function.
-     * For EX: We have expression evolution as like ES6 expression string literals.
-     *
-     * @default null
-     * @aspType string
-     */
-    valueTemplate?: string | Function;
+     * Accepts the template design and assigns it to the selected list item in the input element of the component.
+     * For more details about the available template options refer to
+     * [`Template`](../../drop-down-list/templates) documentation.
+     *
+     * We have built-in `template engine`
+     * which provides options to compile template string into a executable function.
+     * For EX: We have expression evolution as like ES6 expression string literals.
+     *
+     * @default null
+     * @aspType string
+     */
+    valueTemplate?: string | Function;
 
     /**
-     * Accepts the template design and assigns it to the header container of the popup list.
-     * > For more details about the available template options refer to [`Template`](../../drop-down-list/templates) documentation.
-     *
-     * @default null
-     * @aspType string
-     */
-    headerTemplate?: string | Function;
+     * Accepts the template design and assigns it to the header container of the popup list.
+     * > For more details about the available template options refer to [`Template`](../../drop-down-list/templates) documentation.
+     *
+     * @default null
+     * @aspType string
+     */
+    headerTemplate?: string | Function;
 
     /**
-     * Accepts the template design and assigns it to the footer container of the popup list.
-     * > For more details about the available template options refer to [`Template`](../../drop-down-list/templates) documentation.
-     *
-     * @default null
-     * @aspType string
-     */
-    footerTemplate?: string | Function;
+     * Accepts the template design and assigns it to the footer container of the popup list.
+     * > For more details about the available template options refer to [`Template`](../../drop-down-list/templates) documentation.
+     *
+     * @default null
+     * @aspType string
+     */
+    footerTemplate?: string | Function;
 
     /**
-     * When allowFiltering is set to true, show the filter bar (search box) of the component.
-     * The filter action retrieves matched items through the `filtering` event based on
-     * the characters typed in the search TextBox.
-     *
-     * If no match is found, the value of the `noRecordsTemplate` property will be displayed.
-     * > For more details about the filtering refer to [`Filtering`](../../drop-down-list/filtering) documentation.
-     *
-     * {% codeBlock src="dropdownlist/allow-filtering-api/index.ts" %}{% endcodeBlock %}
-     *
-     * {% codeBlock src="dropdownlist/allow-filtering-api/index.html" %}{% endcodeBlock %}
-     *
-     * @default false
-     */
-    allowFiltering?: boolean;
+     * When allowFiltering is set to true, show the filter bar (search box) of the component.
+     * The filter action retrieves matched items through the `filtering` event based on
+     * the characters typed in the search TextBox.
+     *
+     * If no match is found, the value of the `noRecordsTemplate` property will be displayed.
+     * > For more details about the filtering refer to [`Filtering`](../../drop-down-list/filtering) documentation.
+     *
+     * {% codeBlock src="dropdownlist/allow-filtering-api/index.ts" %}{% endcodeBlock %}
+     *
+     * {% codeBlock src="dropdownlist/allow-filtering-api/index.html" %}{% endcodeBlock %}
+     *
+     * @default false
+     */
+    allowFiltering?: boolean;
 
     /**
-     * When set to true, the user interactions on the component are disabled.
-     *
-     * @default false
-     */
-    readonly?: boolean;
+     * When set to true, the user interactions on the component are disabled.
+     *
+     * @default false
+     */
+    readonly?: boolean;
 
     /**
-     * Defines whether to enable virtual scrolling in the component. 
-     *
-     * @default false
-     */
-    enableVirtualization?: boolean;
+     * Defines whether to enable virtual scrolling in the component. 
+     *
+     * @default false
+     */
+    enableVirtualization?: boolean;
 
     /**
-     * Gets or sets the display text of the selected item in the component.
-     *
-     * @default null
-     */
-    text?: string;
+     * Gets or sets the display text of the selected item in the component.
+     *
+     * @default null
+     */
+    text?: string;
 
     /**
-     * Gets or sets the value of the selected item in the component.
-     *
-     * @default null
-     * @isGenericType true
-     */
-    value?: number | string | boolean;
+     * Gets or sets the value of the selected item in the component.
+     *
+     * @default null
+     * @isGenericType true
+     */
+    value?: number | string | boolean;
 
     /**
-     * Gets or sets the index of the selected item in the component.
-     *
-     * {% codeBlock src="dropdownlist/index-api/index.ts" %}{% endcodeBlock %}
-     *
-     * {% codeBlock src="dropdownlist/index-api/index.html" %}{% endcodeBlock %}
-     *
-     * @default null
-     */
-    index?: number;
+     * Gets or sets the index of the selected item in the component.
+     *
+     * {% codeBlock src="dropdownlist/index-api/index.ts" %}{% endcodeBlock %}
+     *
+     * {% codeBlock src="dropdownlist/index-api/index.html" %}{% endcodeBlock %}
+     *
+     * @default null
+     */
+    index?: number;
 
     /**
-     * Specifies whether to display the floating label above the input element.
-     * Possible values are:
-     * * Never: The label will never float in the input when the placeholder is available.
-     * * Always: The floating label will always float above the input.
-     * * Auto: The floating label will float above the input after focusing or entering a value in the input.
-     *
-     * {% codeBlock src="dropdownlist/float-label-type-api/index.ts" %}{% endcodeBlock %}
-     *
-     * {% codeBlock src="dropdownlist/float-label-type-api/index.html" %}{% endcodeBlock %}
-     *
-     * @default Syncfusion.EJ2.Inputs.FloatLabelType.Never
-     * @aspType Syncfusion.EJ2.Inputs.FloatLabelType
-     * @isEnumeration true
-     */
-    floatLabelType?: FloatLabelType;
+     * Specifies whether to display the floating label above the input element.
+     * Possible values are:
+     * * Never: The label will never float in the input when the placeholder is available.
+     * * Always: The floating label will always float above the input.
+     * * Auto: The floating label will float above the input after focusing or entering a value in the input.
+     *
+     * {% codeBlock src="dropdownlist/float-label-type-api/index.ts" %}{% endcodeBlock %}
+     *
+     * {% codeBlock src="dropdownlist/float-label-type-api/index.html" %}{% endcodeBlock %}
+     *
+     * @default Syncfusion.EJ2.Inputs.FloatLabelType.Never
+     * @aspType Syncfusion.EJ2.Inputs.FloatLabelType
+     * @isEnumeration true
+     */
+    floatLabelType?: FloatLabelType;
 
     /**
-     * Specifies whether to show or hide the clear button.
-     * When the clear button is clicked, `value`, `text`, and `index` properties are reset to null.
-     *
-     * @default false
-     */
-    showClearButton?: boolean;
+     * Specifies whether to show or hide the clear button.
+     * When the clear button is clicked, `value`, `text`, and `index` properties are reset to null.
+     *
+     * @default false
+     */
+    showClearButton?: boolean;
 
     /**
-     * Triggers on typing a character in the filter bar when the
-     * [`allowFiltering`](./#allowfiltering)
-     * is enabled.
-     * > For more details about the filtering refer to [`Filtering`](../../drop-down-list/filtering) documentation.
-     *
-     * @event filtering
-     */
-    filtering?: EmitType<FilteringEventArgs>;
+     * Triggers on typing a character in the filter bar when the
+     * [`allowFiltering`](./#allowfiltering)
+     * is enabled.
+     * > For more details about the filtering refer to [`Filtering`](../../drop-down-list/filtering) documentation.
+     *
+     * @event filtering
+     */
+    filtering?: EmitType<FilteringEventArgs>;
 
     /**
-     * Triggers when an item in a popup is selected or when the model value is changed by user.
-     * Use change event to
-     * [`Configure the Cascading DropDownList`](../../drop-down-list/how-to/cascading)
-     *
-     * @event change
-     */
-    change?: EmitType<ChangeEventArgs>;
+     * Triggers when an item in a popup is selected or when the model value is changed by user.
+     * Use change event to
+     * [`Configure the Cascading DropDownList`](../../drop-down-list/how-to/cascading)
+     *
+     * @event change
+     */
+    change?: EmitType<ChangeEventArgs>;
 
     /**
-     * Triggers when the popup before opens.
-     *
-     * @event beforeOpen
-     */
-    beforeOpen?: EmitType<Object>;
+     * Triggers when the popup before opens.
+     *
+     * @event beforeOpen
+     */
+    beforeOpen?: EmitType<Object>;
 
     /**
-     * Triggers when the popup opens.
-     *
-     * @event open
-     */
-    open?: EmitType<PopupEventArgs>;
+     * Triggers when the popup opens.
+     *
+     * @event open
+     */
+    open?: EmitType<PopupEventArgs>;
 
     /**
-     * Triggers when the popup is closed.
-     *
-     * @event close
-     */
-    close?: EmitType<PopupEventArgs>;
+     * Triggers when the popup is closed.
+     *
+     * @event close
+     */
+    close?: EmitType<PopupEventArgs>;
 
     /**
-     * Triggers when focus moves out from the component.
-     *
-     * @event blur
-     */
-    blur?: EmitType<Object>;
+     * Triggers when focus moves out from the component.
+     *
+     * @event blur
+     */
+    blur?: EmitType<Object>;
 
     /**
-     * Triggers when the component is focused.
-     *
-     * @event focus
-     */
-    focus?: EmitType<Object>;
+     * Triggers when the component is focused.
+     *
+     * @event focus
+     */
+    focus?: EmitType<Object>;
 
 }

package/src/drop-down-list/drop-down-list.d.ts

@@ -61,7 +61,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     } | string | number | boolean;
     private listHeight;
     private listItemHeight;
-    private skeletonCount;
+    protected skeletonCount: number;
     protected hiddenElement: HTMLSelectElement;
     protected isPopupOpen: boolean;
     private isDocumentClick;
@@ -113,7 +113,6 @@ export declare class DropDownList extends DropDownBase implements IInput {
     protected preventChange: boolean;
     protected isAngular: boolean;
     protected selectedElementID: string;
-    protected itemCount: number;
     private virtualListHeight;
     private virtualItemCount;
     private isVirtualScrolling;
@@ -136,6 +135,10 @@ export declare class DropDownList extends DropDownBase implements IInput {
     private virtualItemEndIndex;
     private generatedDataObject;
     private preselectedIndex;
+    protected incrementalQueryString: string;
+    protected incrementalEndIndex: number;
+    protected incrementalStartIndex: number;
+    protected incrementalPreQueryString: string;
     private isTouched;
     protected virtualListInfo: VirtualInfo;
     protected viewPortInfo: VirtualInfo;
@@ -158,7 +161,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
      * Specifies a value that indicates whether the component is enabled or not.
      *
      * @default true
-
+     * @deprecated
      */
     enabled: boolean;
     /**
@@ -167,7 +170,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
      * 1. value
      *
      * @default false
-
+     * @deprecated
      */
     enablePersistence: boolean;
     /**
@@ -219,7 +222,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
      * {% codeBlock src='dropdownlist/query/index.md' %}{% endcodeBlock %}
      *
      * @default null
-
+     * @deprecated
      */
     query: Query;
     /**
@@ -440,6 +443,9 @@ export declare class DropDownList extends DropDownBase implements IInput {
     private onMouseLeave;
     protected removeHover(): void;
     protected isValidLI(li: Element | HTMLElement): boolean;
+    protected updateIncrementalInfo(startIndex: number, endIndex: number): void;
+    protected updateIncrementalView(startIndex: number, endIndex: number): void;
+    protected updateIncrementalItemIndex(startIndex: number, endIndex: number): void;
     protected incrementalSearch(e: KeyboardEventArgs): void;
     /**
      * Hides the spinner loader.
@@ -455,13 +461,13 @@ export declare class DropDownList extends DropDownBase implements IInput {
     showSpinner(): void;
     protected keyActionHandler(e: KeyboardEventArgs): void;
     private updateUpDownAction;
+    private updateVirtualItemIndex;
     private updateHomeEndAction;
     protected selectCurrentValueOnTab(e: KeyboardEventArgs): void;
     protected mobileKeyActionHandler(e: KeyboardEventArgs): void;
     private handleVirtualKeyboardActions;
     protected selectCurrentItem(e: KeyboardEventArgs): void;
     protected isSelectFocusItem(element: Element): boolean;
-    private getPageCount;
     private pageUpSelection;
     private PageUpDownSelection;
     private pageDownSelection;
@@ -523,7 +529,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
      * @param {Query} query - Specify the query to filter the data.
      * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
      * @returns {void}
-
+     * @deprecated
      */
     filter(dataSource: {
         [key: string]: Object;
@@ -611,6 +617,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     onPropertyChanged(newProp: DropDownListModel, oldProp: DropDownListModel): void;
     private checkValidLi;
     private setSelectionData;
+    protected updatePopupState(): void;
     protected setReadOnly(): void;
     protected setInputValue(newProp?: any, oldProp?: any): void;
     private setCssClass;