@syncfusion/ej2-dropdowns 23.2.7 → 24.1.41-566987

package/src/auto-complete/auto-complete-model.d.ts

@@ -1,4 +1,4 @@
-import { Property, EventHandler, KeyboardEventArgs, isNullOrUndefined, detach } from '@syncfusion/ej2-base';import { Event, EmitType, Complex } from '@syncfusion/ej2-base';import { removeClass, attributes, NotifyPropertyChanges } from '@syncfusion/ej2-base';import { dropDownListClasses } from '../drop-down-list/drop-down-list';import { ComboBox } from '../combo-box/combo-box';import { highlightSearch, revertHighlightSearch } from '../common/highlight-search';import { Search } from '../common/incremental-search';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { FieldSettings, FilteringEventArgs, FilterType, ResultData } from '../drop-down-base/drop-down-base';import { FloatLabelType, Input } from '@syncfusion/ej2-inputs';import { DataManager, Predicate, Query } from '@syncfusion/ej2-data';
+import { Property, EventHandler, KeyboardEventArgs, isNullOrUndefined, detach } from '@syncfusion/ej2-base';
 import {ComboBoxModel} from "../combo-box/combo-box-model";
 
 /**
@@ -7,192 +7,192 @@ import {ComboBoxModel} from "../combo-box/combo-box-model";
 export interface AutoCompleteModel extends ComboBoxModel{
 
     /**
-     * The `fields` property maps the columns of the data table and binds the data to the component.
-     * * text - Maps the text column from data table for each list item
-     * * value - Maps the value column from data table for each list item
-     * * iconCss - Maps the icon class column from data table for each list item
-     * * groupBy - Group the list items with it's related items by mapping groupBy field
-     *
-     * {% codeBlock src='autocomplete/fields/index.md' %}{% endcodeBlock %}
-     *
-     * > For more details about the field mapping refer to [`Data binding`](../../auto-complete/data-binding) documentation.
-     *
-     * @default { value: null, iconCss: null, groupBy: null}
-
-     */
-    fields?: FieldSettingsModel;
-
-    /**
-     * When set to ‘false’, consider the [`case-sensitive`](../../auto-complete/filtering/#case-sensitive-filtering)
-     * on performing the search to find suggestions.
-     * By default consider the casing.
-     *
-     * @default true
-
-     */
-    ignoreCase?: boolean;
-
-    /**
-     * Allows you to either show or hide the popup button on the component.
-     *
-     * @default false
-     */
-    showPopupButton?: boolean;
-
-    /**
-     * When set to ‘true’, highlight the searched characters on suggested list items.
-     * > For more details about the highlight refer to [`Custom highlight search`](../../auto-complete/how-to/custom-search) documentation.
-     *
-     * @default false
-     */
-    highlight?: boolean;
-
-    /**
-     * Supports the [`specified number`](../../auto-complete/filtering#filter-item-count)
-     * of list items on the suggestion popup.
-     *
-     * @default 20
-     */
-    suggestionCount?: number;
-
-    /**
-     * Allows additional HTML attributes such as title, name, etc., and
-     * accepts n number of attributes in a key-value pair format.
-     *
-     * {% codeBlock src='autocomplete/htmlAttributes/index.md' %}{% endcodeBlock %}
-     *
-     * @default {}
-
-     */
-    htmlAttributes?: { [key: string]: string };
-
-    /**
-     * Accepts the external `query`
-     * that execute along with data processing.
-     *
-     * {% codeBlock src='autocomplete/query/index.md' %}{% endcodeBlock %}
-     *
-     * @default null
-
-     */
-    query?: Query;
-
-    /**
-     * Allows you to set [`the minimum search character length']
-     * (../../auto-complete/filtering#limit-the-minimum-filter-character),
-     * the search action will perform after typed minimum characters.
-     *
-     * @default 1
-     */
-    minLength?: number;
-
-    /**
-     * Determines on which filter type, the component needs to be considered on search action.
-     * The available [`FilterType`](../../auto-complete/filtering/#change-the-filter-type)
-     * and its supported data types are
-     *
-     * <table>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * FilterType<br/></td><td colSpan=1 rowSpan=1>
-     * Description<br/></td><td colSpan=1 rowSpan=1>
-     * Supported Types<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * StartsWith<br/></td><td colSpan=1 rowSpan=1>
-     * Checks whether a value begins with the specified value.<br/></td><td colSpan=1 rowSpan=1>
-     * String<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * EndsWith<br/></td><td colSpan=1 rowSpan=1>
-     * Checks whether a value ends with specified value.<br/><br/></td><td colSpan=1 rowSpan=1>
-     * <br/>String<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * Contains<br/></td><td colSpan=1 rowSpan=1>
-     * Checks whether a value contains with specified value.<br/><br/></td><td colSpan=1 rowSpan=1>
-     * <br/>String<br/></td></tr>
-     * </table>
-     *
-     * {% codeBlock src="autocomplete/filter-type-api/index.ts" %}{% endcodeBlock %}
-     *
-     * {% codeBlock src="autocomplete/filter-type-api/index.html" %}{% endcodeBlock %}
-     *
-     * The default value set to `Contains`, all the suggestion items which contain typed characters to listed in the suggestion popup.
-     *
-     * @default 'Contains'
-     */
-    filterType?: FilterType;
-
-    /**
-     * Triggers on typing a character in the component.
-     *
-     * @event filtering
-     */
-    filtering?: EmitType<FilteringEventArgs>;
-
-    /**
-     * Not applicable to this component.
-     *
-     * @default null
-     * @private
-
-     */
-    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="autocomplete/float-label-type-api/index.ts" %}{% endcodeBlock %}
-     *
-     * {% codeBlock src="autocomplete/float-label-type-api/index.html" %}{% endcodeBlock %}
-     *
-     * @default Syncfusion.EJ2.Inputs.FloatLabelType.Never
-     * @aspType Syncfusion.EJ2.Inputs.FloatLabelType
-     * @isEnumeration true
-
-     */
-    floatLabelType?: FloatLabelType;
-
-    /**
-     * Not applicable to this component.
-     *
-     * @default null
-     * @aspType string
-     * @private
-
-     */
-    valueTemplate?: string | Function;
-
-    /**
-     * Not applicable to this component.
-     *
-     * @default null
-     * @private
-
-     */
-    filterBarPlaceholder?: string;
-
-    /**
-     * Not applicable to this component.
-     *
-     * @default false
-     * @private
-
-     */
-    allowFiltering?: boolean;
-
-    /**
-     * Not applicable to this component.
-     *
-     * @default null
-     * @private
-
-     */
-    text?: string;
+     * The `fields` property maps the columns of the data table and binds the data to the component.
+     * * text - Maps the text column from data table for each list item
+     * * value - Maps the value column from data table for each list item
+     * * iconCss - Maps the icon class column from data table for each list item
+     * * groupBy - Group the list items with it's related items by mapping groupBy field
+     *
+     * {% codeBlock src='autocomplete/fields/index.md' %}{% endcodeBlock %}
+     *
+     * > For more details about the field mapping refer to [`Data binding`](../../auto-complete/data-binding) documentation.
+     *
+     * @default { value: null, iconCss: null, groupBy: null}
+     * @deprecated
+     */
+    fields?: FieldSettingsModel;
+
+    /**
+     * When set to ‘false’, consider the [`case-sensitive`](../../auto-complete/filtering/#case-sensitive-filtering)
+     * on performing the search to find suggestions.
+     * By default consider the casing.
+     *
+     * @default true
+     * @deprecated
+     */
+    ignoreCase?: boolean;
+
+    /**
+     * Allows you to either show or hide the popup button on the component.
+     *
+     * @default false
+     */
+    showPopupButton?: boolean;
+
+    /**
+     * When set to ‘true’, highlight the searched characters on suggested list items.
+     * > For more details about the highlight refer to [`Custom highlight search`](../../auto-complete/how-to/custom-search) documentation.
+     *
+     * @default false
+     */
+    highlight?: boolean;
+
+    /**
+     * Supports the [`specified number`](../../auto-complete/filtering#filter-item-count)
+     * of list items on the suggestion popup.
+     *
+     * @default 20
+     */
+    suggestionCount?: number;
+
+    /**
+     * Allows additional HTML attributes such as title, name, etc., and
+     * accepts n number of attributes in a key-value pair format.
+     *
+     * {% codeBlock src='autocomplete/htmlAttributes/index.md' %}{% endcodeBlock %}
+     *
+     * @default {}
+     * @deprecated
+     */
+    htmlAttributes?: { [key: string]: string };
+
+    /**
+     * Accepts the external `query`
+     * that execute along with data processing.
+     *
+     * {% codeBlock src='autocomplete/query/index.md' %}{% endcodeBlock %}
+     *
+     * @default null
+     * @deprecated
+     */
+    query?: Query;
+
+    /**
+     * Allows you to set [`the minimum search character length']
+     * (../../auto-complete/filtering#limit-the-minimum-filter-character),
+     * the search action will perform after typed minimum characters.
+     *
+     * @default 1
+     */
+    minLength?: number;
+
+    /**
+     * Determines on which filter type, the component needs to be considered on search action.
+     * The available [`FilterType`](../../auto-complete/filtering/#change-the-filter-type)
+     * and its supported data types are
+     *
+     * <table>
+     * <tr>
+     * <td colSpan=1 rowSpan=1>
+     * FilterType<br/></td><td colSpan=1 rowSpan=1>
+     * Description<br/></td><td colSpan=1 rowSpan=1>
+     * Supported Types<br/></td></tr>
+     * <tr>
+     * <td colSpan=1 rowSpan=1>
+     * StartsWith<br/></td><td colSpan=1 rowSpan=1>
+     * Checks whether a value begins with the specified value.<br/></td><td colSpan=1 rowSpan=1>
+     * String<br/></td></tr>
+     * <tr>
+     * <td colSpan=1 rowSpan=1>
+     * EndsWith<br/></td><td colSpan=1 rowSpan=1>
+     * Checks whether a value ends with specified value.<br/><br/></td><td colSpan=1 rowSpan=1>
+     * <br/>String<br/></td></tr>
+     * <tr>
+     * <td colSpan=1 rowSpan=1>
+     * Contains<br/></td><td colSpan=1 rowSpan=1>
+     * Checks whether a value contains with specified value.<br/><br/></td><td colSpan=1 rowSpan=1>
+     * <br/>String<br/></td></tr>
+     * </table>
+     *
+     * {% codeBlock src="autocomplete/filter-type-api/index.ts" %}{% endcodeBlock %}
+     *
+     * {% codeBlock src="autocomplete/filter-type-api/index.html" %}{% endcodeBlock %}
+     *
+     * The default value set to `Contains`, all the suggestion items which contain typed characters to listed in the suggestion popup.
+     *
+     * @default 'Contains'
+     */
+    filterType?: FilterType;
+
+    /**
+     * Triggers on typing a character in the component.
+     *
+     * @event filtering
+     */
+    filtering?: EmitType<FilteringEventArgs>;
+
+    /**
+     * Not applicable to this component.
+     *
+     * @default null
+     * @private
+     * @deprecated
+     */
+    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="autocomplete/float-label-type-api/index.ts" %}{% endcodeBlock %}
+     *
+     * {% codeBlock src="autocomplete/float-label-type-api/index.html" %}{% endcodeBlock %}
+     *
+     * @default Syncfusion.EJ2.Inputs.FloatLabelType.Never
+     * @aspType Syncfusion.EJ2.Inputs.FloatLabelType
+     * @isEnumeration true
+     * @deprecated
+     */
+    floatLabelType?: FloatLabelType;
+
+    /**
+     * Not applicable to this component.
+     *
+     * @default null
+     * @aspType string
+     * @private
+     * @deprecated
+     */
+    valueTemplate?: string | Function;
+
+    /**
+     * Not applicable to this component.
+     *
+     * @default null
+     * @private
+     * @deprecated
+     */
+    filterBarPlaceholder?: string;
+
+    /**
+     * Not applicable to this component.
+     *
+     * @default false
+     * @private
+     * @deprecated
+     */
+    allowFiltering?: boolean;
+
+    /**
+     * Not applicable to this component.
+     *
+     * @default null
+     * @private
+     * @deprecated
+     */
+    text?: string;
 
 }

package/src/auto-complete/auto-complete.d.ts

@@ -33,7 +33,7 @@ export declare class AutoComplete extends ComboBox {
      * > For more details about the field mapping refer to [`Data binding`](../../auto-complete/data-binding) documentation.
      *
      * @default { value: null, iconCss: null, groupBy: null}
-
+     * @deprecated
      */
     fields: FieldSettingsModel;
     /**
@@ -42,7 +42,7 @@ export declare class AutoComplete extends ComboBox {
      * By default consider the casing.
      *
      * @default true
-
+     * @deprecated
      */
     ignoreCase: boolean;
     /**
@@ -72,7 +72,7 @@ export declare class AutoComplete extends ComboBox {
      * {% codeBlock src='autocomplete/htmlAttributes/index.md' %}{% endcodeBlock %}
      *
      * @default {}
-
+     * @deprecated
      */
     htmlAttributes: {
         [key: string]: string;
@@ -84,7 +84,7 @@ export declare class AutoComplete extends ComboBox {
      * {% codeBlock src='autocomplete/query/index.md' %}{% endcodeBlock %}
      *
      * @default null
-
+     * @deprecated
      */
     query: Query;
     /**
@@ -143,7 +143,7 @@ export declare class AutoComplete extends ComboBox {
      *
      * @default null
      * @private
-
+     * @deprecated
      */
     index: number;
     /**
@@ -160,7 +160,7 @@ export declare class AutoComplete extends ComboBox {
      * @default Syncfusion.EJ2.Inputs.FloatLabelType.Never
      * @aspType Syncfusion.EJ2.Inputs.FloatLabelType
      * @isEnumeration true
-
+     * @deprecated
      */
     floatLabelType: FloatLabelType;
     /**
@@ -169,7 +169,7 @@ export declare class AutoComplete extends ComboBox {
      * @default null
      * @aspType string
      * @private
-
+     * @deprecated
      */
     valueTemplate: string | Function;
     /**
@@ -177,7 +177,7 @@ export declare class AutoComplete extends ComboBox {
      *
      * @default null
      * @private
-
+     * @deprecated
      */
     filterBarPlaceholder: string;
     /**
@@ -185,7 +185,7 @@ export declare class AutoComplete extends ComboBox {
      *
      * @default false
      * @private
-
+     * @deprecated
      */
     allowFiltering: boolean;
     /**
@@ -193,7 +193,7 @@ export declare class AutoComplete extends ComboBox {
      *
      * @default null
      * @private
-
+     * @deprecated
      */
     text: string;
     /**
@@ -222,7 +222,7 @@ export declare class AutoComplete extends ComboBox {
      * @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;
@@ -247,7 +247,7 @@ export declare class AutoComplete extends ComboBox {
      * Search the entered text and show it in the suggestion list if available.
      *
      * @returns {void}
-
+     * @deprecated
      */
     showPopup(e?: MouseEvent | KeyboardEventArgs | TouchEvent): void;
     /**

package/src/auto-complete/auto-complete.js

@@ -1,22 +1,22 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        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 extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        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 extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path='../combo-box/combo-box-model.d.ts'/>
 import { Property, EventHandler, isNullOrUndefined, detach } from '@syncfusion/ej2-base';
@@ -84,7 +84,7 @@ var AutoComplete = /** @class */ (function (_super) {
             if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
                 filterQuery.where('', filterType, queryString, this.ignoreCase, this.ignoreAccent);
             }
-            else {
+            else if ((!this.enableVirtualization) || (this.enableVirtualization && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource)))) {
                 var mapping = !isNullOrUndefined(this.fields.value) ? this.fields.value : '';
                 filterQuery.where(mapping, filterType, queryString, this.ignoreCase, this.ignoreAccent);
             }
@@ -100,7 +100,7 @@ var AutoComplete = /** @class */ (function (_super) {
             }
             filterQuery.take(this.suggestionCount);
         }
-        if (this.enableVirtualization) {
+        if (this.enableVirtualization && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource))) {
             var takeValue = this.getTakeValue();
             filterQuery.skip(this.virtualItemStartIndex);
             filterQuery.take(takeValue);
@@ -151,7 +151,7 @@ var AutoComplete = /** @class */ (function (_super) {
      * @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
      */
     AutoComplete.prototype.filter = function (dataSource, query, fields) {
         this.isFiltered = true;
@@ -182,7 +182,7 @@ var AutoComplete = /** @class */ (function (_super) {
                     document.getElementsByClassName('e-popup')[0].querySelector('.e-dropdownbase').appendChild(virualElement);
                 }
             }
-            if (this.enableVirtualization) {
+            if ((this.getModuleName() === 'autocomplete' && !(this.dataSource instanceof DataManager)) || (this.getModuleName() === 'autocomplete' && (this.dataSource instanceof DataManager) && this.totalItemCount != 0)) {
                 this.getFilteringSkeletonCount();
             }
         }
@@ -203,7 +203,12 @@ var AutoComplete = /** @class */ (function (_super) {
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     AutoComplete.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {
-        this.fixedHeaderElement = null;
+        if (!this.enableVirtualization) {
+            this.fixedHeaderElement = null;
+        }
+        if ((this.getModuleName() === 'autocomplete' && !(this.dataSource instanceof DataManager)) || (this.getModuleName() === 'autocomplete' && (this.dataSource instanceof DataManager) && this.totalItemCount != 0)) {
+            this.getFilteringSkeletonCount();
+        }
         _super.prototype.onActionComplete.call(this, ulElement, list, e);
         var item = this.list.querySelector('.' + dropDownListClasses.li);
         if (!isNullOrUndefined(item)) {
@@ -325,7 +330,7 @@ var AutoComplete = /** @class */ (function (_super) {
      * Search the entered text and show it in the suggestion list if available.
      *
      * @returns {void}
-
+     * @deprecated
      */
     AutoComplete.prototype.showPopup = function (e) {
         if (!this.enabled) {