@syncfusion/ej2-dropdowns 20.3.58 → 20.3.60

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.3.58
+*  version : 20.3.60
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-dropdowns@*",
-  "_id": "@syncfusion/ej2-dropdowns@20.3.56",
+  "_id": "@syncfusion/ej2-dropdowns@20.3.59",
   "_inBundle": false,
-  "_integrity": "sha512-Hr6+gHo6gtVnaUWqIisrp1vcV5e8+Tx3Ff5DzpY7RErX8BEjZsNf5YQM7Gcq4pOB17AfhyH+lfIehfdqKv55rw==",
+  "_integrity": "sha512-3KOrC1GdJj32XxkzIJxQd8zP9Dbp7L/0/AWOUu3LZF+4B+6Xther2bXQ6t1Gt4nstmFHbiXDrrTVE8YJbsYKUA==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -33,8 +33,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-20.3.56.tgz",
-  "_shasum": "3d9eaac2b6206eca2d22474fc3ed667d0a66cf0f",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-20.3.59.tgz",
+  "_shasum": "9a67584709f1877eda262c63bf59a2c61d33f8de",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
   "author": {
@@ -43,11 +43,11 @@
   "bundleDependencies": false,
   "dependencies": {
     "@syncfusion/ej2-base": "~20.3.56",
-    "@syncfusion/ej2-data": "~20.3.56",
+    "@syncfusion/ej2-data": "~20.3.60",
     "@syncfusion/ej2-inputs": "~20.3.57",
     "@syncfusion/ej2-lists": "~20.3.56",
-    "@syncfusion/ej2-navigations": "~20.3.58",
-    "@syncfusion/ej2-popups": "~20.3.58"
+    "@syncfusion/ej2-navigations": "~20.3.60",
+    "@syncfusion/ej2-popups": "~20.3.60"
   },
   "deprecated": false,
   "description": "Essential JS 2 DropDown Components",
@@ -72,6 +72,6 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "20.3.58",
+  "version": "20.3.60",
   "sideEffects": false
 }

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

@@ -14,6 +14,7 @@ export interface AutoCompleteModel extends ComboBoxModel{
      * * 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}

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

@@ -29,6 +29,7 @@ export declare class AutoComplete extends ComboBox {
      * * 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}
@@ -216,9 +217,9 @@ export declare class AutoComplete extends ComboBox {
     /**
      * To filter the data from given data source by using query
      *
-     * @param  {Object[] | DataManager } dataSource - Set the data source to filter.
-     * @param  {Query} query - Specify the query to filter the data.
-     * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
+     * @param {Object[] | DataManager } dataSource - Set the data source to filter.
+     * @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}
 
      */

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

@@ -140,9 +140,9 @@ var AutoComplete = /** @class */ (function (_super) {
     /**
      * To filter the data from given data source by using query
      *
-     * @param  {Object[] | DataManager } dataSource - Set the data source to filter.
-     * @param  {Query} query - Specify the query to filter the data.
-     * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
+     * @param {Object[] | DataManager } dataSource - Set the data source to filter.
+     * @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}
 
      */
@@ -182,7 +182,9 @@ var AutoComplete = /** @class */ (function (_super) {
     AutoComplete.prototype.postBackAction = function () {
         if (this.autofill && !isNullOrUndefined(this.liCollections[0]) && this.searchList) {
             var items = [this.liCollections[0]];
-            var searchItem = Search(this.inputElement.value, items, 'StartsWith', this.ignoreCase);
+            var dataSource = this.listData;
+            var type = this.typeOfData(dataSource).typeof;
+            var searchItem = Search(this.inputElement.value, items, 'StartsWith', this.ignoreCase, dataSource, this.fields, type);
             this.searchList = false;
             if (!isNullOrUndefined(searchItem.item)) {
                 _super.prototype.setAutoFill.call(this, this.liCollections[0], true);

package/src/combo-box/combo-box.d.ts

@@ -318,7 +318,7 @@ export declare class ComboBox extends DropDownList {
      * Adds a new item to the combobox popup list. By default, new item appends to the list as the last item,
      * but you can insert based on the index parameter.
      *
-     * @param  { Object[] } items - Specifies an array of JSON data or a JSON data.
+     * @param { Object[] } items - Specifies an array of JSON data or a JSON data.
      * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.
      * @returns {void}
 
@@ -331,9 +331,9 @@ export declare class ComboBox extends DropDownList {
     /**
      * To filter the data from given data source by using query
      *
-     * @param  {Object[] | DataManager } dataSource - Set the data source to filter.
-     * @param  {Query} query - Specify the query to filter the data.
-     * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
+     * @param {Object[] | DataManager } dataSource - Set the data source to filter.
+     * @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}
 
      */

package/src/combo-box/combo-box.js

@@ -234,7 +234,9 @@ var ComboBox = /** @class */ (function (_super) {
         if ((Browser.isDevice && !this.isDropDownClick || !Browser.isDevice) &&
             !isNullOrUndefined(this.liCollections) && this.liCollections.length > 0) {
             var inputValue = this.inputElement.value;
-            var activeItem = Search(inputValue, this.liCollections, this.filterType, true);
+            var dataSource = this.sortedData;
+            var type = this.typeOfData(dataSource).typeof;
+            var activeItem = Search(inputValue, this.liCollections, this.filterType, true, dataSource, this.fields, type);
             var activeElement = activeItem.item;
             if (!isNullOrUndefined(activeElement)) {
                 var count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;
@@ -275,7 +277,7 @@ var ComboBox = /** @class */ (function (_super) {
         this.itemData = this.getDataByValue(this.value);
         var dataItem = this.getItemData();
         if (!(this.allowCustom && isNullOrUndefined(dataItem.value) && isNullOrUndefined(dataItem.text))) {
-            this.setProperties({ 'value': dataItem.value, 'text': dataItem.text }, !this.allowCustom);
+            this.setProperties({ 'value': dataItem.value }, !this.allowCustom);
         }
     };
     /**
@@ -635,7 +637,7 @@ var ComboBox = /** @class */ (function (_super) {
      * Adds a new item to the combobox popup list. By default, new item appends to the list as the last item,
      * but you can insert based on the index parameter.
      *
-     * @param  { Object[] } items - Specifies an array of JSON data or a JSON data.
+     * @param { Object[] } items - Specifies an array of JSON data or a JSON data.
      * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.
      * @returns {void}
 
@@ -646,9 +648,9 @@ var ComboBox = /** @class */ (function (_super) {
     /**
      * To filter the data from given data source by using query
      *
-     * @param  {Object[] | DataManager } dataSource - Set the data source to filter.
-     * @param  {Query} query - Specify the query to filter the data.
-     * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
+     * @param {Object[] | DataManager } dataSource - Set the data source to filter.
+     * @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}
 
      */
@@ -695,10 +697,12 @@ var ComboBox = /** @class */ (function (_super) {
                 return;
             }
             if (this.getModuleName() === 'combobox' && this.inputElement.value.trim() !== '') {
-                var searchItem = Search(this.inputElement.value, this.liCollections, 'Equal', true);
+                var dataSource = this.sortedData;
+                var type = this.typeOfData(dataSource).typeof;
+                var searchItem = Search(this.inputElement.value, this.liCollections, 'Equal', true, dataSource, this.fields, type);
                 this.selectedLI = searchItem.item;
                 if (isNullOrUndefined(searchItem.index)) {
-                    searchItem.index = Search(this.inputElement.value, this.liCollections, 'StartsWith', true).index;
+                    searchItem.index = Search(this.inputElement.value, this.liCollections, 'StartsWith', true, dataSource, this.fields, type).index;
                 }
                 this.activeIndex = searchItem.index;
                 if (!isNullOrUndefined(this.selectedLI)) {

package/src/common/incremental-search.d.ts

@@ -1,6 +1,3 @@
-/**
- * IncrementalSearch module file
- */
 export declare type SearchType = 'StartsWith' | 'Equal' | 'EndsWith' | 'Contains';
 /**
  * Search and focus the list item based on key code matches with list text content
@@ -23,7 +20,9 @@ export declare function incrementalSearch(keyCode: number, items: HTMLElement[],
  * @param {boolean} ignoreCase - Specifies the case sensitive option for search operation.
  * @returns {Element | number} Returns the search matched items.
  */
-export declare function Search(inputVal: string, items: HTMLElement[], searchType: SearchType, ignoreCase?: boolean): {
+export declare function Search(inputVal: string, items: HTMLElement[], searchType: SearchType, ignoreCase?: boolean, dataSource?: string[] | number[] | boolean[] | {
+    [key: string]: Object;
+}[], fields?: any, type?: string): {
     [key: string]: Element | number;
 };
 export declare function escapeCharRegExp(value: string): string;

package/src/common/incremental-search.js

@@ -1,6 +1,3 @@
-/**
- * IncrementalSearch module file
- */
 var queryString = '';
 var prevString = '';
 var matches = [];
@@ -73,7 +70,7 @@ export function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, ele
  * @param {boolean} ignoreCase - Specifies the case sensitive option for search operation.
  * @returns {Element | number} Returns the search matched items.
  */
-export function Search(inputVal, items, searchType, ignoreCase) {
+export function Search(inputVal, items, searchType, ignoreCase, dataSource, fields, type) {
     var listItems = items;
     ignoreCase = ignoreCase !== undefined && ignoreCase !== null ? ignoreCase : true;
     var itemData = { item: null, index: null };
@@ -81,14 +78,32 @@ export function Search(inputVal, items, searchType, ignoreCase) {
         var strLength = inputVal.length;
         var queryStr = ignoreCase ? inputVal.toLocaleLowerCase() : inputVal;
         queryStr = escapeCharRegExp(queryStr);
-        for (var i = 0, itemsData = listItems; i < itemsData.length; i++) {
+        var _loop_1 = function (i, itemsData) {
             var item = itemsData[i];
-            var text = (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
+            var text = void 0;
+            var filterValue;
+            if (items && dataSource) {
+                var checkField_1 = item;
+                var fieldValue_1 = fields.text.split('.');
+                dataSource.filter(function (data) {
+                    Array.prototype.slice.call(fieldValue_1).forEach(function (value) {
+                        if (type === 'object' && checkField_1.textContent.toString().indexOf(data[value]) !== -1 && checkField_1.getAttribute('data-value') === data[fields.value] || type === 'string' && checkField_1.textContent.toString().indexOf(data) !== -1) {
+                            filterValue = type === 'object' ? data[value] : data;
+                        }
+                    });
+                });
+            }
+            text = dataSource && filterValue ? (ignoreCase ? filterValue.toLocaleLowerCase() : filterValue).replace(/^\s+|\s+$/g, '') : (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
             if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr) || (searchType === 'EndsWith' && text.substr(text.length - queryStr.length) === queryStr) || (searchType === 'Contains' && new RegExp(queryStr, "g").test(text))) {
                 itemData.item = item;
                 itemData.index = i;
-                return { item: item, index: i };
+                return { value: { item: item, index: i } };
             }
+        };
+        for (var i = 0, itemsData = listItems; i < itemsData.length; i++) {
+            var state_1 = _loop_1(i, itemsData);
+            if (typeof state_1 === "object")
+                return state_1.value;
         }
         return itemData;
     }

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

@@ -637,7 +637,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * Adds a new item to the popup list. By default, new item appends to the list as the last item,
      * but you can insert based on the index parameter.
      *
-     * @param  { Object[] } items - Specifies an array of JSON data or a JSON data.
+     * @param { Object[] } items - Specifies an array of JSON data or a JSON data.
      * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.
      * @returns {void}
 

package/src/drop-down-base/drop-down-base.js

@@ -705,18 +705,20 @@ var DropDownBase = /** @class */ (function (_super) {
         return extend({}, options, fields, true);
     };
     DropDownBase.prototype.setFloatingHeader = function (e) {
-        if (isNullOrUndefined(this.fixedHeaderElement)) {
-            this.fixedHeaderElement = this.createElement('div', { className: dropDownBaseClasses.fixedHead });
-            if (!this.list.querySelector('li').classList.contains(dropDownBaseClasses.group)) {
-                this.fixedHeaderElement.style.display = 'none';
+        if (!isNullOrUndefined(this.list) && !this.list.classList.contains(dropDownBaseClasses.noData)) {
+            if (isNullOrUndefined(this.fixedHeaderElement)) {
+                this.fixedHeaderElement = this.createElement('div', { className: dropDownBaseClasses.fixedHead });
+                if (!this.list.querySelector('li').classList.contains(dropDownBaseClasses.group)) {
+                    this.fixedHeaderElement.style.display = 'none';
+                }
+                prepend([this.fixedHeaderElement], this.list);
+                this.setFixedHeader();
             }
-            prepend([this.fixedHeaderElement], this.list);
-            this.setFixedHeader();
-        }
-        if (!isNullOrUndefined(this.fixedHeaderElement) && this.fixedHeaderElement.style.zIndex === '0') {
-            this.setFixedHeader();
+            if (!isNullOrUndefined(this.fixedHeaderElement) && this.fixedHeaderElement.style.zIndex === '0') {
+                this.setFixedHeader();
+            }
+            this.scrollStop(e);
         }
-        this.scrollStop(e);
     };
     DropDownBase.prototype.scrollStop = function (e) {
         var target = !isNullOrUndefined(e) ? e.target : this.list;
@@ -1039,7 +1041,7 @@ var DropDownBase = /** @class */ (function (_super) {
      * Adds a new item to the popup list. By default, new item appends to the list as the last item,
      * but you can insert based on the index parameter.
      *
-     * @param  { Object[] } items - Specifies an array of JSON data or a JSON data.
+     * @param { Object[] } items - Specifies an array of JSON data or a JSON data.
      * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.
      * @returns {void}
 

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

@@ -453,9 +453,9 @@ export declare class DropDownList extends DropDownBase implements IInput {
     /**
      * To filter the data from given data source by using query
      *
-     * @param  {Object[] | DataManager } dataSource - Set the data source to filter.
-     * @param  {Query} query - Specify the query to filter the data.
-     * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
+     * @param {Object[] | DataManager } dataSource - Set the data source to filter.
+     * @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}
 
      */

package/src/drop-down-list/drop-down-list.js

@@ -1022,10 +1022,10 @@ var DropDownList = /** @class */ (function (_super) {
             attributes(this.targetElement(), { 'aria-describedby': this.inputElement.id != '' ? this.inputElement.id : this.element.id });
             this.targetElement().removeAttribute('aria-live');
         }
-        if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-item-focus')[0])) {
+        if (this.isPopupOpen && !isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-item-focus')[0])) {
             attributes(this.targetElement(), { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });
         }
-        else if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-active')[0])) {
+        else if (this.isPopupOpen && !isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-active')[0])) {
             attributes(this.targetElement(), { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-active')[0].id });
         }
     };
@@ -1345,9 +1345,9 @@ var DropDownList = /** @class */ (function (_super) {
     /**
      * To filter the data from given data source by using query
      *
-     * @param  {Object[] | DataManager } dataSource - Set the data source to filter.
-     * @param  {Query} query - Specify the query to filter the data.
-     * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
+     * @param {Object[] | DataManager } dataSource - Set the data source to filter.
+     * @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}
 
      */

package/src/list-box/list-box.js

@@ -1139,12 +1139,12 @@ var ListBox = /** @class */ (function (_super) {
         if (li && li.parentElement) {
             currSelIdx = [].slice.call(li.parentElement.children).indexOf(li);
             if (!this.selectionSettings.showCheckbox) {
-                if ((e.ctrlKey || Browser.isDevice) && this.isSelected(li)) {
+                if ((e.ctrlKey || e.metaKey || Browser.isDevice) && this.isSelected(li)) {
                     li.classList.remove(cssClass.selected);
                     li.removeAttribute('aria-selected');
                     isSelect = false;
                 }
-                else if (!(this.selectionSettings.mode === 'Multiple' && (e.ctrlKey || Browser.isDevice))) {
+                else if (!(this.selectionSettings.mode === 'Multiple' && (e.ctrlKey || e.metaKey || Browser.isDevice))) {
                     this.getSelectedItems().forEach(function (ele) {
                         ele.removeAttribute('aria-selected');
                     });
@@ -1616,12 +1616,21 @@ var ListBox = /** @class */ (function (_super) {
         }
         return listObj;
     };
-    ListBox.prototype.getGrabbedItems = function () {
+    ListBox.prototype.getGrabbedItems = function (args) {
+        var grabbItems = false;
         for (var i = 0; i < this.value.length; i++) {
-            var liColl = this.list.querySelectorAll('[aria-selected="true"]');
-            for (var j = 0; j < liColl.length; j++) {
-                if (this.value[i] === liColl[j].textContent) {
-                    liColl[j].classList.add('e-grabbed');
+            if (this.value[i] === this.getFormattedValue(args.target.getAttribute('data-value'))) {
+                grabbItems = true;
+                break;
+            }
+        }
+        if (grabbItems) {
+            for (var i = 0; i < this.value.length; i++) {
+                var liColl = this.list.querySelectorAll('[aria-selected="true"]');
+                for (var j = 0; j < liColl.length; j++) {
+                    if (this.value[i] === this.getFormattedValue(liColl[j].getAttribute('data-value'))) {
+                        liColl[j].classList.add('e-grabbed');
+                    }
                 }
             }
         }
@@ -1635,7 +1644,7 @@ var ListBox = /** @class */ (function (_super) {
         return elems;
     };
     ListBox.prototype.getDragArgs = function (args, isDragEnd) {
-        var elems = this.getGrabbedItems();
+        var elems = this.getGrabbedItems(args);
         if (elems.length) {
             if (isDragEnd) {
                 elems.push(args.target);

package/src/multi-select/multi-select.d.ts

@@ -611,9 +611,9 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     /**
      * To filter the multiselect data from given data source by using query
      *
-     * @param  {Object[] | DataManager } dataSource - Set the data source to filter.
-     * @param  {Query} query - Specify the query to filter the data.
-     * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
+     * @param {Object[] | DataManager } dataSource - Set the data source to filter.
+     * @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}
      */
     filter(dataSource: {
@@ -805,7 +805,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      * Adds a new item to the multiselect popup list. By default, new item appends to the list as the last item,
      * but you can insert based on the index parameter.
      *
-     * @param  { Object[] } items - Specifies an array of JSON data or a JSON data.
+     * @param { Object[] } items - Specifies an array of JSON data or a JSON data.
      * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.
      * @returns {void}
      */

package/src/multi-select/multi-select.js

@@ -637,9 +637,9 @@ var MultiSelect = /** @class */ (function (_super) {
     /**
      * To filter the multiselect data from given data source by using query
      *
-     * @param  {Object[] | DataManager } dataSource - Set the data source to filter.
-     * @param  {Query} query - Specify the query to filter the data.
-     * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
+     * @param {Object[] | DataManager } dataSource - Set the data source to filter.
+     * @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}
      */
     MultiSelect.prototype.filter = function (dataSource, query, fields) {
@@ -3647,7 +3647,7 @@ var MultiSelect = /** @class */ (function (_super) {
      * Adds a new item to the multiselect popup list. By default, new item appends to the list as the last item,
      * but you can insert based on the index parameter.
      *
-     * @param  { Object[] } items - Specifies an array of JSON data or a JSON data.
+     * @param { Object[] } items - Specifies an array of JSON data or a JSON data.
      * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.
      * @returns {void}
      */