@syncfusion/ej2-dropdowns 20.2.39 → 20.2.43-1234

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

@@ -28,7 +28,7 @@ export interface ComboBoxModel extends DropDownListModel{
      * {% codeBlock src='combobox/htmlAttributes/index.md' %}{% endcodeBlock %}
      *
      * @default {}
-
+     * @deprecated
      */
     htmlAttributes?: { [key: string]: string };
 
@@ -43,7 +43,7 @@ export interface ComboBoxModel extends DropDownListModel{
      * {% codeBlock src="combobox/allow-filtering-api/index.html" %}{% endcodeBlock %}
      *
      * @default false
-
+     * @deprecated
      */
     allowFiltering?: boolean;
 
@@ -54,7 +54,7 @@ export interface ComboBoxModel extends DropDownListModel{
      * {% codeBlock src='combobox/query/index.md' %}{% endcodeBlock %}
      *
      * @default null
-
+     * @deprecated
      */
     query?: Query;
 
@@ -66,7 +66,7 @@ export interface ComboBoxModel extends DropDownListModel{
      * {% codeBlock src="combobox/index-api/index.html" %}{% endcodeBlock %}
      *
      * @default null
-
+     * @deprecated
      */
     index?: number;
 
@@ -82,7 +82,7 @@ export interface ComboBoxModel extends DropDownListModel{
      * Enable or disable rendering component in right to left direction.
      *
      * @default false
-
+     * @deprecated
      */
     enableRtl?: boolean;
 
@@ -124,7 +124,7 @@ export interface ComboBoxModel extends DropDownListModel{
      * @default Syncfusion.EJ2.Inputs.FloatLabelType.Never
      * @aspType Syncfusion.EJ2.Inputs.FloatLabelType
      * @isEnumeration true
-
+     * @deprecated
      */
     floatLabelType?: FloatLabelType;
 
@@ -133,7 +133,7 @@ export interface ComboBoxModel extends DropDownListModel{
      *
      * @default null
      * @private
-
+     * @deprecated
      */
     filterBarPlaceholder?: string;
 
@@ -141,7 +141,7 @@ export interface ComboBoxModel extends DropDownListModel{
      * Sets CSS classes to the root element of the component that allows customization of appearance.
      *
      * @default null
-
+     * @deprecated
      */
     cssClass?: string;
 
@@ -150,7 +150,7 @@ export interface ComboBoxModel extends DropDownListModel{
      * > For more details about the available template options refer to [`Template`](../../drop-down-list/templates) documentation.
      *
      * @default null
-
+     * @deprecated
      */
     headerTemplate?: string;
 
@@ -159,7 +159,7 @@ export interface ComboBoxModel extends DropDownListModel{
      * > For more details about the available template options refer to [`Template`](../../drop-down-list/templates) documentation.
      *
      * @default null
-
+     * @deprecated
      */
     footerTemplate?: string;
 
@@ -167,7 +167,7 @@ export interface ComboBoxModel extends DropDownListModel{
      * Specifies a short hint that describes the expected value of the DropDownList component.
      *
      * @default null
-
+     * @deprecated
      */
     placeholder?: string;
 
@@ -177,7 +177,7 @@ export interface ComboBoxModel extends DropDownListModel{
      *
      * @default '100%'
      * @aspType string
-
+     * @deprecated
      */
     width?: string | number;
 
@@ -188,7 +188,7 @@ export interface ComboBoxModel extends DropDownListModel{
      *
      * @default '300px'
      * @aspType string
-
+     * @deprecated
      */
     popupHeight?: string | number;
 
@@ -200,7 +200,7 @@ export interface ComboBoxModel extends DropDownListModel{
      *
      * @default '100%'
      * @aspType string
-
+     * @deprecated
      */
     popupWidth?: string | number;
 
@@ -208,7 +208,7 @@ export interface ComboBoxModel extends DropDownListModel{
      * When set to true, the user interactions on the component are disabled.
      *
      * @default false
-
+     * @deprecated
      */
     readonly?: boolean;
 
@@ -216,7 +216,7 @@ export interface ComboBoxModel extends DropDownListModel{
      * Gets or sets the display text of the selected item in the component.
      *
      * @default null
-
+     * @deprecated
      */
     text?: string;
 
@@ -225,7 +225,7 @@ export interface ComboBoxModel extends DropDownListModel{
      *
      * @default null
      * @isGenericType true
-
+     * @deprecated
      */
     value?: number | string | boolean;
 

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

@@ -42,7 +42,7 @@ export declare class ComboBox extends DropDownList {
      * {% codeBlock src='combobox/htmlAttributes/index.md' %}{% endcodeBlock %}
      *
      * @default {}
-
+     * @deprecated
      */
     htmlAttributes: {
         [key: string]: string;
@@ -58,7 +58,7 @@ export declare class ComboBox extends DropDownList {
      * {% codeBlock src="combobox/allow-filtering-api/index.html" %}{% endcodeBlock %}
      *
      * @default false
-
+     * @deprecated
      */
     allowFiltering: boolean;
     /**
@@ -68,7 +68,7 @@ export declare class ComboBox extends DropDownList {
      * {% codeBlock src='combobox/query/index.md' %}{% endcodeBlock %}
      *
      * @default null
-
+     * @deprecated
      */
     query: Query;
     /**
@@ -79,7 +79,7 @@ export declare class ComboBox extends DropDownList {
      * {% codeBlock src="combobox/index-api/index.html" %}{% endcodeBlock %}
      *
      * @default null
-
+     * @deprecated
      */
     index: number;
     /**
@@ -93,7 +93,7 @@ export declare class ComboBox extends DropDownList {
      * Enable or disable rendering component in right to left direction.
      *
      * @default false
-
+     * @deprecated
      */
     enableRtl: boolean;
     /**
@@ -131,7 +131,7 @@ export declare class ComboBox extends DropDownList {
      * @default Syncfusion.EJ2.Inputs.FloatLabelType.Never
      * @aspType Syncfusion.EJ2.Inputs.FloatLabelType
      * @isEnumeration true
-
+     * @deprecated
      */
     floatLabelType: FloatLabelType;
     /**
@@ -139,14 +139,14 @@ export declare class ComboBox extends DropDownList {
      *
      * @default null
      * @private
-
+     * @deprecated
      */
     filterBarPlaceholder: string;
     /**
      * Sets CSS classes to the root element of the component that allows customization of appearance.
      *
      * @default null
-
+     * @deprecated
      */
     cssClass: string;
     /**
@@ -154,7 +154,7 @@ export declare class ComboBox extends DropDownList {
      * > For more details about the available template options refer to [`Template`](../../drop-down-list/templates) documentation.
      *
      * @default null
-
+     * @deprecated
      */
     headerTemplate: string;
     /**
@@ -162,14 +162,14 @@ export declare class ComboBox extends DropDownList {
      * > For more details about the available template options refer to [`Template`](../../drop-down-list/templates) documentation.
      *
      * @default null
-
+     * @deprecated
      */
     footerTemplate: string;
     /**
      * Specifies a short hint that describes the expected value of the DropDownList component.
      *
      * @default null
-
+     * @deprecated
      */
     placeholder: string;
     /**
@@ -178,7 +178,7 @@ export declare class ComboBox extends DropDownList {
      *
      * @default '100%'
      * @aspType string
-
+     * @deprecated
      */
     width: string | number;
     /**
@@ -188,7 +188,7 @@ export declare class ComboBox extends DropDownList {
      *
      * @default '300px'
      * @aspType string
-
+     * @deprecated
      */
     popupHeight: string | number;
     /**
@@ -199,21 +199,21 @@ export declare class ComboBox extends DropDownList {
      *
      * @default '100%'
      * @aspType string
-
+     * @deprecated
      */
     popupWidth: string | number;
     /**
      * When set to true, the user interactions on the component are disabled.
      *
      * @default false
-
+     * @deprecated
      */
     readonly: boolean;
     /**
      * Gets or sets the display text of the selected item in the component.
      *
      * @default null
-
+     * @deprecated
      */
     text: string;
     /**
@@ -221,7 +221,7 @@ export declare class ComboBox extends DropDownList {
      *
      * @default null
      * @isGenericType true
-
+     * @deprecated
      */
     value: number | string | boolean;
     /**
@@ -265,14 +265,14 @@ export declare class ComboBox extends DropDownList {
      * Shows the spinner loader.
      *
      * @returns {void}
-
+     * @deprecated
      */
     showSpinner(): void;
     /**
      * Hides the spinner loader.
      *
      * @returns {void}
-
+     * @deprecated
      */
     hideSpinner(): void;
     protected setAutoFill(activeElement: Element, isHover?: boolean): void;
@@ -318,10 +318,10 @@ 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}
-
+     * @deprecated
      */
     addItem(items: {
         [key: string]: Object;
@@ -331,11 +331,11 @@ 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}
-
+     * @deprecated
      */
     filter(dataSource: {
         [key: string]: Object;
@@ -344,16 +344,16 @@ export declare class ComboBox extends DropDownList {
      * Opens the popup that displays the list of items.
      *
      * @returns {void}
-
+     * @deprecated
      */
-    showPopup(): void;
+    showPopup(e?: MouseEvent | KeyboardEventArgs | TouchEvent): void;
     /**
      * Hides the popup if it is in open state.
      *
      * @returns {void}
-
+     * @deprecated
      */
-    hidePopup(e?: MouseEvent | KeyboardEventArgs): void;
+    hidePopup(e?: MouseEvent | KeyboardEventArgs | TouchEvent): void;
     /**
      * Sets the focus to the component for interaction.
      *
@@ -364,21 +364,21 @@ export declare class ComboBox extends DropDownList {
      * Allows you to clear the selected values from the component.
      *
      * @returns {void}
-
+     * @deprecated
      */
     clear(): void;
     /**
      * Moves the focus from the component if the component is already focused.
      *
      * @returns {void}
-
+     * @deprecated
      */
     focusOut(e?: MouseEvent | KeyboardEventArgs): void;
     /**
      * Gets all the list items bound on this component.
      *
      * @returns {Element[]}
-
+     * @deprecated
      */
     getItems(): Element[];
     /**
@@ -386,7 +386,7 @@ export declare class ComboBox extends DropDownList {
      *
      * @param { string | number } value - Specifies the value of the list item.
      * @returns {Object}
-
+     * @deprecated
      */
     getDataByValue(value: string | number | boolean): {
         [key: string]: Object;

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

@@ -178,15 +178,12 @@ var ComboBox = /** @class */ (function (_super) {
     };
     ComboBox.prototype.getAriaAttributes = function () {
         var ariaAttributes = {
-            'aria-owns': this.element.id + '_options',
             'role': 'combobox',
             'aria-autocomplete': 'both',
             'aria-labelledby': this.hiddenElement.id,
-            'aria-hasPopup': 'true',
             'aria-expanded': 'false',
             'aria-readonly': this.readonly.toString(),
             'autocomplete': 'off',
-            'autocorrect': 'off',
             'autocapitalize': 'off',
             'spellcheck': 'false'
         };
@@ -229,7 +226,7 @@ var ComboBox = /** @class */ (function (_super) {
     };
     ComboBox.prototype.getFocusElement = function () {
         var dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();
-        var selected = this.list.querySelector('.' + dropDownListClasses.selected);
+        var selected = !isNullOrUndefined(this.list) ? this.list.querySelector('.' + dropDownListClasses.selected) : this.list;
         var isSelected = dataItem.text === this.inputElement.value && !isNullOrUndefined(selected);
         if (isSelected) {
             return selected;
@@ -237,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;
@@ -278,14 +277,14 @@ 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);
         }
     };
     /**
      * Shows the spinner loader.
      *
      * @returns {void}
-
+     * @deprecated
      */
     ComboBox.prototype.showSpinner = function () {
         if (isNullOrUndefined(this.spinnerElement)) {
@@ -305,7 +304,7 @@ var ComboBox = /** @class */ (function (_super) {
      * Hides the spinner loader.
      *
      * @returns {void}
-
+     * @deprecated
      */
     ComboBox.prototype.hideSpinner = function () {
         if (!isNullOrUndefined(this.spinnerElement)) {
@@ -387,9 +386,11 @@ var ComboBox = /** @class */ (function (_super) {
         }
         else if (this.inputElement.value === '') {
             this.activeIndex = null;
-            this.list.scrollTop = 0;
-            var focusItem = this.list.querySelector('.' + dropDownListClasses.li);
-            this.setHoverList(focusItem);
+            if (!isNullOrUndefined(this.list)) {
+                this.list.scrollTop = 0;
+                var focusItem = this.list.querySelector('.' + dropDownListClasses.li);
+                this.setHoverList(focusItem);
+            }
         }
         else {
             this.activeIndex = null;
@@ -400,7 +401,7 @@ var ComboBox = /** @class */ (function (_super) {
         }
     };
     ComboBox.prototype.incrementalSearch = function (e) {
-        this.showPopup();
+        this.showPopup(e);
         if (!isNullOrUndefined(this.listData)) {
             this.inlineSearch(e);
             e.preventDefault();
@@ -486,6 +487,7 @@ var ComboBox = /** @class */ (function (_super) {
             this.preventFocus = false;
         }
         this.onFocus(e);
+        Input.calculateWidth(this.inputElement, this.inputWrapper.container);
     };
     ComboBox.prototype.dropDownClick = function (e) {
         e.preventDefault();
@@ -637,10 +639,10 @@ 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}
-
+     * @deprecated
      */
     ComboBox.prototype.addItem = function (items, itemIndex) {
         _super.prototype.addItem.call(this, items, itemIndex);
@@ -648,11 +650,11 @@ 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}
-
+     * @deprecated
      */
     ComboBox.prototype.filter = function (dataSource, query, fields) {
         _super.prototype.filter.call(this, dataSource, query, fields);
@@ -661,17 +663,17 @@ var ComboBox = /** @class */ (function (_super) {
      * Opens the popup that displays the list of items.
      *
      * @returns {void}
-
+     * @deprecated
      */
-    ComboBox.prototype.showPopup = function () {
-        _super.prototype.showPopup.call(this);
+    ComboBox.prototype.showPopup = function (e) {
+        _super.prototype.showPopup.call(this, e);
     };
     /* eslint-disable valid-jsdoc, jsdoc/require-param */
     /**
      * Hides the popup if it is in open state.
      *
      * @returns {void}
-
+     * @deprecated
      */
     ComboBox.prototype.hidePopup = function (e) {
         /* eslint-enable valid-jsdoc, jsdoc/require-param */
@@ -687,7 +689,7 @@ var ComboBox = /** @class */ (function (_super) {
                 this.removeFillSelection();
             }
             var dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();
-            var selected = this.list.querySelector('.' + dropDownListClasses.selected);
+            var selected = !isNullOrUndefined(this.list) ? this.list.querySelector('.' + dropDownListClasses.selected) : null;
             if (this.inputElement && dataItem.text === this.inputElement.value && !isNullOrUndefined(selected)) {
                 if (this.isSelected) {
                     this.onChangeEvent(e);
@@ -697,10 +699,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)) {
@@ -738,7 +742,7 @@ var ComboBox = /** @class */ (function (_super) {
      * Allows you to clear the selected values from the component.
      *
      * @returns {void}
-
+     * @deprecated
      */
     ComboBox.prototype.clear = function () {
         this.value = null;
@@ -748,7 +752,7 @@ var ComboBox = /** @class */ (function (_super) {
      * Moves the focus from the component if the component is already focused.
      *
      * @returns {void}
-
+     * @deprecated
      */
     ComboBox.prototype.focusOut = function (e) {
         /* eslint-enable valid-jsdoc, jsdoc/require-param */
@@ -759,7 +763,7 @@ var ComboBox = /** @class */ (function (_super) {
      * Gets all the list items bound on this component.
      *
      * @returns {Element[]}
-
+     * @deprecated
      */
     ComboBox.prototype.getItems = function () {
         return _super.prototype.getItems.call(this);
@@ -769,7 +773,7 @@ var ComboBox = /** @class */ (function (_super) {
      *
      * @param { string | number } value - Specifies the value of the list item.
      * @returns {Object}
-
+     * @deprecated
      */
     ComboBox.prototype.getDataByValue = function (value) {
         return _super.prototype.getDataByValue.call(this, value);

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;
     }