@syncfusion/ej2-dropdowns 21.2.10 → 22.1.34

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 21.2.10
+*  version : 22.1.34
 *  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@21.2.8",
+  "_id": "@syncfusion/ej2-dropdowns@18.63.0",
   "_inBundle": false,
-  "_integrity": "sha512-vA6PaPiAP2ql4GITUbDTJWRB7BJG90oDPUbuvykJiX56rbACzgi1Zdt5xtbcE5S8SLa4NcYOzXfq2RRjC8bK3w==",
+  "_integrity": "sha512-rzvjRsRbQxKUndOXJMiMRTsrKgVpBif5/Hw9QVwm3PzLDRqPxY0OcayRbDnpcillEtHWqypHSLuNh6pEIGP4gg==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -34,8 +34,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-21.2.8.tgz",
-  "_shasum": "84d90cc60579208255733b85609302961579335d",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-18.63.0.tgz",
+  "_shasum": "f3fe366fa86013af30e9ceaed909a5788c686393",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -43,12 +43,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~21.2.9",
-    "@syncfusion/ej2-data": "~21.2.9",
-    "@syncfusion/ej2-inputs": "~21.2.9",
-    "@syncfusion/ej2-lists": "~21.2.9",
-    "@syncfusion/ej2-navigations": "~21.2.9",
-    "@syncfusion/ej2-popups": "~21.2.10"
+    "@syncfusion/ej2-base": "~22.1.34",
+    "@syncfusion/ej2-data": "~22.1.34",
+    "@syncfusion/ej2-inputs": "~22.1.34",
+    "@syncfusion/ej2-lists": "~22.1.34",
+    "@syncfusion/ej2-navigations": "~22.1.34",
+    "@syncfusion/ej2-popups": "~22.1.34"
   },
   "deprecated": false,
   "description": "Essential JS 2 DropDown Components",
@@ -73,7 +73,7 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "21.2.10",
+  "version": "22.1.34",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -162,10 +162,11 @@ export interface AutoCompleteModel extends ComboBoxModel{
      * Not applicable to this component.
      *
      * @default null
+     * @aspType string
      * @private
 
      */
-    valueTemplate?: string;
+    valueTemplate?: string | Function;
 
     /**
      * Not applicable to this component.

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

@@ -167,10 +167,11 @@ export declare class AutoComplete extends ComboBox {
      * Not applicable to this component.
      *
      * @default null
+     * @aspType string
      * @private
 
      */
-    valueTemplate: string;
+    valueTemplate: string | Function;
     /**
      * Not applicable to this component.
      *

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

@@ -313,7 +313,7 @@ var AutoComplete = /** @class */ (function (_super) {
      */
     AutoComplete.prototype.hidePopup = function (e) {
         _super.prototype.hidePopup.call(this, e);
-        this.activeIndex = -1;
+        this.activeIndex = null;
     };
     /**
      * Dynamically change the value of properties.

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

@@ -106,9 +106,10 @@ export interface ComboBoxModel extends DropDownListModel{
      * Not applicable to this component.
      *
      * @default null
+     * @aspType string
      * @private
      */
-    valueTemplate?: string;
+    valueTemplate?: string | Function;
 
     /**
      * Specifies whether to display the floating label above the input element.
@@ -150,18 +151,20 @@ export interface ComboBoxModel extends DropDownListModel{
      * > For more details about the available template options refer to [`Template`](../../drop-down-list/templates) documentation.
      *
      * @default null
+     * @aspType string
 
      */
-    headerTemplate?: 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;
+    footerTemplate?: string | Function;
 
     /**
      * Specifies a short hint that describes the expected value of the DropDownList component.

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

@@ -114,9 +114,10 @@ export declare class ComboBox extends DropDownList {
      * Not applicable to this component.
      *
      * @default null
+     * @aspType string
      * @private
      */
-    valueTemplate: string;
+    valueTemplate: string | Function;
     /**
      * Specifies whether to display the floating label above the input element.
      * Possible values are:
@@ -154,17 +155,19 @@ export declare class ComboBox extends DropDownList {
      * > For more details about the available template options refer to [`Template`](../../drop-down-list/templates) documentation.
      *
      * @default null
+     * @aspType string
 
      */
-    headerTemplate: 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;
+    footerTemplate: string | Function;
     /**
      * Specifies a short hint that describes the expected value of the DropDownList component.
      *

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

@@ -82,35 +82,39 @@ export interface DropDownBaseModel extends ComponentModel{
      * For EX: We have expression evolution as like ES6 expression string literals.
      *
      * @default null
+     * @aspType string
 
      */
-    itemTemplate?: string;
+    itemTemplate?: string | Function;
 
     /**
      * Accepts the template design and assigns it to the group headers present in the popup list.
      *
      * @default null
+     * @aspType string
 
      */
-    groupTemplate?: string;
+    groupTemplate?: string | Function;
 
     /**
      * Accepts the template design and assigns it to popup list of component
      * when no data is available on the component.
      *
      * @default 'No records found'
+     * @aspType string
 
      */
-    noRecordsTemplate?: string;
+    noRecordsTemplate?: string | Function;
 
     /**
      * Accepts the template and assigns it to the popup list content of the component
      * when the data fetch request from the remote server fails.
      *
      * @default 'Request failed'
+     * @aspType string
 
      */
-    actionFailureTemplate?: string;
+    actionFailureTemplate?: string | Function;
 
     /**
      * Specifies the `sortOrder` to sort the data source. The available type of sort orders are

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

@@ -247,32 +247,36 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * For EX: We have expression evolution as like ES6 expression string literals.
      *
      * @default null
+     * @aspType string
 
      */
-    itemTemplate: string;
+    itemTemplate: string | Function;
     /**
      * Accepts the template design and assigns it to the group headers present in the popup list.
      *
      * @default null
+     * @aspType string
 
      */
-    groupTemplate: string;
+    groupTemplate: string | Function;
     /**
      * Accepts the template design and assigns it to popup list of component
      * when no data is available on the component.
      *
      * @default 'No records found'
+     * @aspType string
 
      */
-    noRecordsTemplate: string;
+    noRecordsTemplate: string | Function;
     /**
      * Accepts the template and assigns it to the popup list content of the component
      * when the data fetch request from the remote server fails.
      *
      * @default 'Request failed'
+     * @aspType string
 
      */
-    actionFailureTemplate: string;
+    actionFailureTemplate: string | Function;
     /**
      * Specifies the `sortOrder` to sort the data source. The available type of sort orders are
      * * `None` - The data source is not sorting.

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

@@ -219,7 +219,7 @@ var DropDownBase = /** @class */ (function (_super) {
     };
     DropDownBase.prototype.templateCompiler = function (baseTemplate) {
         var checkTemplate = false;
-        if (baseTemplate) {
+        if (typeof baseTemplate !== 'function' && baseTemplate) {
             try {
                 checkTemplate = (selectAll(baseTemplate, document).length) ? true : false;
             }
@@ -237,7 +237,7 @@ var DropDownBase = /** @class */ (function (_super) {
             var templateId = actionFailure ? this.actionFailureTemplateId : this.noRecordsTemplateId;
             ele.innerHTML = '';
             var tempaltecheck = this.templateCompiler(template);
-            if (tempaltecheck) {
+            if (typeof template !== 'function' && tempaltecheck) {
                 compiledString = compile(select(template, document).innerHTML.trim());
             }
             else {
@@ -603,6 +603,9 @@ var DropDownBase = /** @class */ (function (_super) {
     DropDownBase.prototype.onActionComplete = function (ulElement, list, e) {
         /* eslint-enable @typescript-eslint/no-unused-vars */
         this.listData = list;
+        if (this.getModuleName() !== 'listbox') {
+            ulElement.setAttribute('tabindex', '0');
+        }
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.isReact) {
             this.clearTemplate(['itemTemplate', 'groupTemplate', 'actionFailureTemplate', 'noRecordsTemplate']);
@@ -662,7 +665,7 @@ var DropDownBase = /** @class */ (function (_super) {
             var option = { groupTemplateID: this.groupTemplateId, isStringTemplate: this.isStringTemplate };
             var headerItems = listEle.querySelectorAll('.' + dropDownBaseClasses.group);
             var groupcheck = this.templateCompiler(this.groupTemplate);
-            if (groupcheck) {
+            if (typeof this.groupTemplate !== 'function' && groupcheck) {
                 var groupValue = select(this.groupTemplate, document).innerHTML.trim();
                 // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 var tempHeaders = ListBase.renderGroupTemplate(groupValue, dataSource, this.fields.properties, headerItems, option, this);
@@ -799,7 +802,7 @@ var DropDownBase = /** @class */ (function (_super) {
         option.templateID = this.itemTemplateId;
         option.isStringTemplate = this.isStringTemplate;
         var itemcheck = this.templateCompiler(this.itemTemplate);
-        if (itemcheck) {
+        if (typeof this.itemTemplate !== 'function' && itemcheck) {
             var itemValue = select(this.itemTemplate, document).innerHTML.trim();
             return ListBase.renderContentTemplate(this.createElement, itemValue, dataSource, fields.properties, option, this);
         }
@@ -886,7 +889,9 @@ var DropDownBase = /** @class */ (function (_super) {
     DropDownBase.prototype.dispatchEvent = function (element, type) {
         var evt = document.createEvent('HTMLEvents');
         evt.initEvent(type, false, true);
-        element.dispatchEvent(evt);
+        if (element) {
+            element.dispatchEvent(evt);
+        }
     };
     /**
      * To set the current fields
@@ -1014,7 +1019,12 @@ var DropDownBase = /** @class */ (function (_super) {
      * @returns {void}
      */
     DropDownBase.prototype.render = function (e, isEmptyData) {
-        this.list = this.createElement('div', { className: dropDownBaseClasses.content, attrs: { 'tabindex': '0' } });
+        if (this.getModuleName() === 'listbox') {
+            this.list = this.createElement('div', { className: dropDownBaseClasses.content, attrs: { 'tabindex': '0' } });
+        }
+        else {
+            this.list = this.createElement('div', { className: dropDownBaseClasses.content });
+        }
         this.list.classList.add(dropDownBaseClasses.root);
         this.setFields();
         var rippleModel = { duration: 300, selector: '.' + dropDownBaseClasses.li };
@@ -1103,7 +1113,8 @@ var DropDownBase = /** @class */ (function (_super) {
             }
             if (this.itemTemplate && !isHeader) {
                 var itemCheck = this.templateCompiler(this.itemTemplate);
-                var compiledString = itemCheck ? compile(select(this.itemTemplate, document).innerHTML.trim()) : compile(this.itemTemplate);
+                var compiledString = typeof this.itemTemplate !== 'function' &&
+                    itemCheck ? compile(select(this.itemTemplate, document).innerHTML.trim()) : compile(this.itemTemplate);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var addItemTemplate = compiledString(item, this, 'itemTemplate', this.itemTemplateId, this.isStringTemplate, null, li);
                 if (addItemTemplate) {

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

@@ -107,24 +107,27 @@ export interface DropDownListModel extends DropDownBaseModel{
      * For EX: We have expression evolution as like ES6 expression string literals.
      *
      * @default null
+     * @aspType string
      */
-    valueTemplate?: 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;
+    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;
+    footerTemplate?: string | Function;
 
     /**
      * When allowFiltering is set to true, show the filter bar (search box) of the component.

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

@@ -197,22 +197,25 @@ export declare class DropDownList extends DropDownBase implements IInput {
      * For EX: We have expression evolution as like ES6 expression string literals.
      *
      * @default null
+     * @aspType string
      */
-    valueTemplate: 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;
+    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;
+    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

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

@@ -722,8 +722,11 @@ var DropDownList = /** @class */ (function (_super) {
                 startIndex = e.action === 'down' && isNullOrUndefined(this.activeIndex) ? 0 : this.liCollections.length - 1;
                 index = index < 0 ? this.liCollections.length - 1 : index === this.liCollections.length ? 0 : index;
             }
-            var nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[startIndex]
-                : this.liCollections[index];
+            var nextItem = void 0;
+            if (this.getModuleName() !== 'autocomplete' || this.getModuleName() === 'autocomplete' && this.isPopupOpen) {
+                nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[startIndex]
+                    : this.liCollections[index];
+            }
             if (!isNullOrUndefined(nextItem)) {
                 this.setSelection(nextItem, e);
             }
@@ -1041,9 +1044,7 @@ var DropDownList = /** @class */ (function (_super) {
         }
         if (Browser.info.name !== 'mozilla') {
             if (this.targetElement()) {
-                if (this.getModuleName() !== 'combobox') {
-                    attributes(this.targetElement(), { 'aria-describedby': this.inputElement.id !== '' ? this.inputElement.id : this.element.id });
-                }
+                attributes(this.targetElement(), { 'aria-describedby': this.inputElement.id !== '' ? this.inputElement.id : this.element.id });
                 this.targetElement().removeAttribute('aria-live');
             }
         }
@@ -1056,7 +1057,7 @@ var DropDownList = /** @class */ (function (_super) {
     };
     DropDownList.prototype.dropdownCompiler = function (dropdownTemplate) {
         var checkTemplate = false;
-        if (dropdownTemplate) {
+        if (typeof dropdownTemplate !== 'function' && dropdownTemplate) {
             try {
                 checkTemplate = (document.querySelectorAll(dropdownTemplate).length) ? true : false;
             }
@@ -1087,7 +1088,7 @@ var DropDownList = /** @class */ (function (_super) {
             this.valueTempElement.innerHTML = '';
         }
         var valuecheck = this.dropdownCompiler(this.valueTemplate);
-        if (valuecheck) {
+        if (typeof this.valueTemplate !== 'function' && valuecheck) {
             compiledString = compile(document.querySelector(this.valueTemplate).innerHTML.trim());
         }
         else {
@@ -1136,7 +1137,6 @@ var DropDownList = /** @class */ (function (_super) {
         var index = this.isSelectCustom ? null : this.activeIndex;
         this.setProperties({ 'index': index, 'text': dataItem.text, 'value': dataItem.value }, true);
         this.detachChangeEvent(eve);
-        this.dispatchEvent(this.hiddenElement, 'change');
     };
     DropDownList.prototype.detachChanges = function (value) {
         var items;
@@ -1476,6 +1476,9 @@ var DropDownList = /** @class */ (function (_super) {
     };
     DropDownList.prototype.onInput = function (e) {
         this.isValidKey = true;
+        if (this.getModuleName() === 'combobox') {
+            this.updateIconState();
+        }
         // For filtering works in mobile firefox.
         if (Browser.isDevice && Browser.info.name === 'mozilla') {
             this.typedString = this.filterInput.value;
@@ -2146,7 +2149,9 @@ var DropDownList = /** @class */ (function (_super) {
         this.setFields();
         this.inputWrapper.container.style.width = formatUnit(this.width);
         this.inputWrapper.container.classList.add('e-ddl');
-        Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+        if (this.floatLabelType === 'Auto') {
+            Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+        }
         if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && this.inputWrapper.container.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never') {
             this.inputWrapper.container.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
         }
@@ -2222,7 +2227,7 @@ var DropDownList = /** @class */ (function (_super) {
             addClass([this.footer], dropDownListClasses.footer);
         }
         var footercheck = this.dropdownCompiler(this.footerTemplate);
-        if (footercheck) {
+        if (typeof this.footerTemplate !== 'function' && footercheck) {
             compiledString = compile(select(this.footerTemplate, document).innerHTML.trim());
         }
         else {
@@ -2245,7 +2250,7 @@ var DropDownList = /** @class */ (function (_super) {
             addClass([this.header], dropDownListClasses.header);
         }
         var headercheck = this.dropdownCompiler(this.headerTemplate);
-        if (headercheck) {
+        if (typeof this.headerTemplate !== 'function' && headercheck) {
             compiledString = compile(select(this.headerTemplate, document).innerHTML.trim());
         }
         else {
@@ -2716,7 +2721,9 @@ var DropDownList = /** @class */ (function (_super) {
         }
         addClass([this.inputWrapper.container], [dropDownListClasses.inputFocus]);
         this.onFocus(e);
-        Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+        if (this.floatLabelType === 'Auto') {
+            Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+        }
     };
     /**
      * Moves the focus from the component if the component is already focused.
@@ -2734,7 +2741,9 @@ var DropDownList = /** @class */ (function (_super) {
             this.targetElement().blur();
         }
         removeClass([this.inputWrapper.container], [dropDownListClasses.inputFocus]);
-        Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+        if (this.floatLabelType === 'Auto' && this.inputElement.value === '') {
+            Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+        }
     };
     /**
      * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.

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

@@ -140,8 +140,9 @@ export interface DropDownTreeModel extends ComponentModel{
      * Dropdown Tree component when the data fetch request from the remote server fails.
      *
      * @default 'The Request Failed'
+     * @aspType string
      */
-    actionFailureTemplate?: string;
+    actionFailureTemplate?: string | Function;
 
     /**
      * When allowFiltering is set to true, it shows the filter bar (search text box) of the component.
@@ -182,8 +183,9 @@ export interface DropDownTreeModel extends ComponentModel{
      * added to the input instead of the selected item text in the Dropdown Tree when the multi-selection or checkbox support is enabled.
      *
      * @default "${value.length} item(s) selected"
+     * @aspType string
      */
-    customTemplate?: string;
+    customTemplate?: string | Function;
 
     /**
      * Defines the value separator character in the input element when multi-selection or checkbox is enabled in the Dropdown Tree.
@@ -267,8 +269,12 @@ export interface DropDownTreeModel extends ComponentModel{
      * By default, the footerTemplate will be null and there will be no footer container for the pop-up list.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
      */
-    footerTemplate?: string;
+    footerTemplate?: string | Function;
 
     /**
      * When **ignoreAccent** is set to true, then it ignores the diacritic characters or accents when filtering.
@@ -287,8 +293,12 @@ export interface DropDownTreeModel extends ComponentModel{
      * By default, the headerTemplate will be null and there will be no header container for the pop-up list.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
      */
-    headerTemplate?: string;
+    headerTemplate?: string | Function;
 
     /**
      * Allows additional HTML attributes such as title, name, etc., and accepts n number of attributes in a key-value pair format.
@@ -304,8 +314,12 @@ export interface DropDownTreeModel extends ComponentModel{
      * or HTML element ID holding the content.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
      */
-    itemTemplate?: string;
+    itemTemplate?: string | Function;
 
     /**
      * Configures visibility mode for component interaction when allowMultiSelection or checkbox is enabled.
@@ -323,8 +337,9 @@ export interface DropDownTreeModel extends ComponentModel{
      * to be displayed within the pop-up.
      *
      * @default 'No Records Found'
+     * @aspType string
      */
-    noRecordsTemplate?: string;
+    noRecordsTemplate?: string | Function;
 
     /**
      * Specifies a short hint that describes the expected value of the Dropdown Tree component.