@syncfusion/ej2-dropdowns 20.2.50 → 20.3.48

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.2.50
+*  version : 20.3.48
 *  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/mention.d.ts

@@ -0,0 +1,4 @@
+/**
+ * mention
+ */
+export * from './src/mention/index';

package/mention.js

@@ -0,0 +1,4 @@
+/**
+ * mention
+ */
+export * from './src/mention/index';

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-dropdowns@*",
-  "_id": "@syncfusion/ej2-dropdowns@20.2.48",
+  "_id": "@syncfusion/ej2-dropdowns@20.3.47",
   "_inBundle": false,
-  "_integrity": "sha512-pC28blWr9V3M37JGaDVsRWLABah2p0qhXNrr7vt1PuFwrVv8NEhYQs1ogCfQn/q5P+J9l++FKVCFgZigDhwGRQ==",
+  "_integrity": "sha512-qPiUQ/MULcgK0jSrA3mVYmadOYYd6i3JDnynVCR0RoRkofhK02OhFRwkKbKLXzts2es0dk31hrFriW0BuguJkA==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -33,8 +33,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-20.2.48.tgz",
-  "_shasum": "1469370e5706faae5edcb5fdbdc3651a2172298b",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-20.3.47.tgz",
+  "_shasum": "95e215e550eebf1af76eb923af3e537f9f61a800",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -42,17 +42,17 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.2.48",
-    "@syncfusion/ej2-data": "~20.2.45",
-    "@syncfusion/ej2-inputs": "~20.2.48",
-    "@syncfusion/ej2-lists": "~20.2.46",
-    "@syncfusion/ej2-navigations": "~20.2.50",
-    "@syncfusion/ej2-popups": "~20.2.49"
+    "@syncfusion/ej2-base": "~20.3.48",
+    "@syncfusion/ej2-data": "~20.3.47",
+    "@syncfusion/ej2-inputs": "~20.3.47",
+    "@syncfusion/ej2-lists": "~20.3.47",
+    "@syncfusion/ej2-navigations": "~20.3.48",
+    "@syncfusion/ej2-popups": "~20.3.48"
   },
   "deprecated": false,
   "description": "Essential JS 2 DropDown Components",
   "devDependencies": {},
-  "es2015": "./dist/es6/ej2-dropdowns.es2015.js",
+  "es2015": "./dist/es6/ej2-dropdowns.es5.js",
   "keywords": [
     "ej2",
     "syncfusion",
@@ -72,6 +72,6 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "20.2.50",
+  "version": "20.3.48",
   "sideEffects": false
 }

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

@@ -21,7 +21,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 /// <reference path='../combo-box/combo-box-model.d.ts'/>
 import { Property, EventHandler, isNullOrUndefined, detach } from '@syncfusion/ej2-base';
 import { Event, Complex } from '@syncfusion/ej2-base';
-import { removeClass, attributes, NotifyPropertyChanges } from '@syncfusion/ej2-base';
+import { removeClass, 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';
@@ -191,6 +191,7 @@ var AutoComplete = /** @class */ (function (_super) {
     };
     AutoComplete.prototype.setSelection = function (li, e) {
         if (!this.isValidLI(li)) {
+            this.selectedLI = li;
             return;
         }
         if (!isNullOrUndefined(e) && e.type === 'keydown' && e.action !== 'enter'
@@ -206,7 +207,6 @@ var AutoComplete = /** @class */ (function (_super) {
                     e.action === 'home' || e.action === 'end' || e.action === 'pageUp' || e.action === 'pageDown');
                 _super.prototype.setAutoFill.call(this, li, isKeyNavigate);
             }
-            attributes(this.inputElement, { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
         }
         else {
             _super.prototype.setSelection.call(this, li, e);

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

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

@@ -203,6 +203,8 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
     }[] | string[] | boolean[] | number[];
     protected isGroupChecking: boolean;
     protected itemTemplateId: string;
+    protected displayTemplateId: string;
+    protected spinnerTemplateId: string;
     protected valueTemplateId: string;
     protected groupTemplateId: string;
     protected headerTemplateId: string;

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

@@ -61,6 +61,8 @@ export var dropDownBaseClasses = {
     grouping: 'e-dd-group'
 };
 var ITEMTEMPLATE_PROPERTY = 'ItemTemplate';
+var DISPLAYTEMPLATE_PROPERTY = 'DisplayTemplate';
+var SPINNERTEMPLATE_PROPERTY = 'SpinnerTemplate';
 var VALUETEMPLATE_PROPERTY = 'ValueTemplate';
 var GROUPTEMPLATE_PROPERTY = 'GroupTemplate';
 var HEADERTEMPLATE_PROPERTY = 'HeaderTemplate';
@@ -258,7 +260,8 @@ var DropDownBase = /** @class */ (function (_super) {
                 this.l10n = componentLocale;
             }
             else {
-                this.l10n = new L10n(this.getModuleName() === 'listbox' ? 'listbox' : 'dropdowns', l10nLocale, this.locale);
+                this.l10n = new L10n(this.getModuleName() === 'listbox' ? 'listbox' :
+                    this.getModuleName() === 'mention' ? 'mention' : 'dropdowns', l10nLocale, this.locale);
             }
             var content = actionFailure ?
                 this.l10n.getConstant('actionFailureTemplate') : this.l10n.getConstant('noRecordsTemplate');
@@ -267,6 +270,7 @@ var DropDownBase = /** @class */ (function (_super) {
                 liElem.textContent = content;
                 ele.appendChild(liElem);
                 liElem.classList.add('e-list-nrt');
+                liElem.setAttribute('role', 'option');
             }
             else {
                 ele.innerHTML = content;
@@ -360,7 +364,7 @@ var DropDownBase = /** @class */ (function (_super) {
      * @returns {void}
      */
     DropDownBase.prototype.updateDataAttribute = function (value) {
-        var invalidAttr = ['class', 'style', 'id', 'type'];
+        var invalidAttr = ['class', 'style', 'id', 'type', 'aria-expanded', 'aria-autocomplete', 'aria-readonly'];
         var attr = {};
         for (var a = 0; a < this.element.attributes.length; a++) {
             if (invalidAttr.indexOf(this.element.attributes[a].name) === -1 &&
@@ -428,6 +432,8 @@ var DropDownBase = /** @class */ (function (_super) {
         this.isRequested = false;
         this.isDataFetched = false;
         this.itemTemplateId = "" + this.element.id + ITEMTEMPLATE_PROPERTY;
+        this.displayTemplateId = "" + this.element.id + DISPLAYTEMPLATE_PROPERTY;
+        this.spinnerTemplateId = "" + this.element.id + SPINNERTEMPLATE_PROPERTY;
         this.valueTemplateId = "" + this.element.id + VALUETEMPLATE_PROPERTY;
         this.groupTemplateId = "" + this.element.id + GROUPTEMPLATE_PROPERTY;
         this.headerTemplateId = "" + this.element.id + HEADERTEMPLATE_PROPERTY;

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

@@ -104,6 +104,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     protected isListSearched: boolean;
     protected preventChange: boolean;
     protected isAngular: boolean;
+    protected selectedElementID: string;
     /**
      * Sets CSS classes to the root element of the component that allows customization of appearance.
      *

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

@@ -255,8 +255,8 @@ var DropDownList = /** @class */ (function (_super) {
                     this.inputWrapper.container.setAttribute('style', this.htmlAttributes[htmlAttr]);
                 }
                 else {
-                    var defaultAttr = ['title', 'id', 'placeholder', 'aria-placeholder',
-                        'role', 'autocorrect', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];
+                    var defaultAttr = ['title', 'id', 'placeholder',
+                        'role', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];
                     var validateAttr = ['name', 'required'];
                     if (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') {
                         defaultAttr.push('tabindex');
@@ -285,11 +285,8 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.getAriaAttributes = function () {
         return {
             'aria-disabled': 'false',
-            'aria-owns': this.element.id + '_options',
             'role': 'combobox',
-            'aria-haspopup': 'true',
             'aria-expanded': 'false',
-            'aria-activedescendant': 'null',
             'aria-live': 'polite',
             'aria-labelledby': this.hiddenElement.id
         };
@@ -1011,10 +1008,6 @@ var DropDownList = /** @class */ (function (_super) {
         if (this.setValue(e)) {
             return;
         }
-        attributes(this.targetElement(), { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
-        if (this.isFilterLayout() && this.filterInput) {
-            attributes(this.filterInput, { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
-        }
         if ((!this.isPopupOpen && !isNullOrUndefined(li)) || (this.isPopupOpen && !isNullOrUndefined(e) &&
             (e.type !== 'keydown' || e.type === 'keydown' && e.action === 'enter'))) {
             this.isSelectCustom = false;
@@ -1025,7 +1018,7 @@ var DropDownList = /** @class */ (function (_super) {
         }
         if (Browser.info.name !== 'mozilla') {
             attributes(this.inputElement, { 'aria-label': this.inputElement.value });
-            attributes(this.targetElement(), { 'aria-describedby': this.inputElement.id });
+            attributes(this.targetElement(), { 'aria-describedby': this.inputElement.id != '' ? this.inputElement.id : this.element.id });
             this.targetElement().removeAttribute('aria-live');
         }
     };
@@ -1410,11 +1403,8 @@ var DropDownList = /** @class */ (function (_super) {
             prepend([parentElement], popupElement);
             attributes(this.filterInput, {
                 'aria-disabled': 'false',
-                'aria-owns': this.element.id + '_options',
-                'role': 'listbox',
-                'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null,
+                'role': 'combobox',
                 'autocomplete': 'off',
-                'autocorrect': 'off',
                 'autocapitalize': 'off',
                 'spellcheck': 'false'
             });
@@ -1715,7 +1705,12 @@ var DropDownList = /** @class */ (function (_super) {
                     _this.unWireListEvents();
                     _this.wireListEvents();
                 }
-                attributes(_this.targetElement(), { 'aria-expanded': 'true' });
+                _this.selectedElementID = _this.selectedLI ? _this.selectedLI.id : null;
+                attributes(_this.targetElement(), { 'aria-expanded': 'true', 'aria-owns': _this.inputElement.id + '_options', 'aria-activedescendant': _this.selectedElementID });
+                _this.inputElement.setAttribute('aria-expanded', 'true');
+                if (_this.selectedElementID == null) {
+                    _this.targetElement().removeAttribute('aria-activedescendant');
+                }
                 var inputParent = _this.isFiltering() ? _this.filterInput.parentElement : _this.inputWrapper.container;
                 addClass([inputParent], [dropDownListClasses.inputFocus]);
                 var animModel = { name: 'FadeIn', duration: 100 };
@@ -1991,6 +1986,9 @@ var DropDownList = /** @class */ (function (_super) {
             this.filterInput = null;
         }
         attributes(this.targetElement(), { 'aria-expanded': 'false' });
+        this.inputElement.setAttribute('aria-expanded', 'false');
+        this.targetElement().removeAttribute('aria-owns');
+        this.targetElement().removeAttribute('aria-activedescendant');
         this.inputWrapper.container.classList.remove(dropDownListClasses.iconAnimation);
         if (this.isFiltering()) {
             this.actionCompleteData.isUpdated = false;
@@ -2048,6 +2046,7 @@ var DropDownList = /** @class */ (function (_super) {
             if (isNullOrUndefined(this.inputElement.getAttribute('type'))) {
                 this.inputElement.setAttribute('type', 'text');
             }
+            this.inputElement.setAttribute('aria-expanded', 'false');
         }
         else {
             this.inputElement = this.createElement('input', { attrs: { role: 'combobox', type: 'text' } });
@@ -2090,8 +2089,8 @@ var DropDownList = /** @class */ (function (_super) {
         this.inputWrapper.container.style.width = formatUnit(this.width);
         this.inputWrapper.container.classList.add('e-ddl');
         Input.calculateWidth(this.inputElement, this.inputWrapper.container);
-        if (!isNullOrUndefined(this.inputWrapper) && !isNullOrUndefined(this.inputWrapper.buttons[0]) && this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0] && this.floatLabelType !== 'Never') {
-            this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');
+        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');
         }
         this.wireEvent();
         this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';
@@ -2577,7 +2576,10 @@ var DropDownList = /** @class */ (function (_super) {
         if (!isNullOrUndefined(this.list.children[0]) || this.list.classList.contains(dropDownBaseClasses.noData)) {
             this.renderPopup(e);
         }
-        attributes(this.targetElement(), { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
+        attributes(this.targetElement(), { 'aria-activedescendant': this.selectedElementID });
+        if (this.selectedElementID == null) {
+            this.targetElement().removeAttribute('aria-activedescendant');
+        }
     };
     DropDownList.prototype.renderHightSearch = function () {
         // update high light search
@@ -2683,10 +2685,9 @@ var DropDownList = /** @class */ (function (_super) {
             return;
         }
         if (this.inputElement) {
-            var attrArray = ['readonly', 'aria-disabled', 'aria-placeholder',
-                'placeholder', 'aria-owns', 'aria-labelledby', 'aria-haspopup', 'aria-expanded',
-                'aria-activedescendant', 'autocomplete', 'aria-readonly', 'autocorrect',
-                'autocapitalize', 'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-describedby', 'aria-label'];
+            var attrArray = ['readonly', 'aria-disabled', 'placeholder', 'aria-labelledby',
+                'aria-expanded', 'autocomplete', 'aria-readonly', 'autocapitalize',
+                'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-describedby', 'aria-label'];
             for (var i = 0; i < attrArray.length; i++) {
                 this.inputElement.removeAttribute(attrArray[i]);
             }

package/src/index.d.ts

@@ -9,3 +9,4 @@ export * from './combo-box/index';
 export * from './auto-complete/index';
 export * from './multi-select/index';
 export * from './list-box/index';
+export * from './mention/index';

package/src/index.js

@@ -9,3 +9,4 @@ export * from './combo-box/index';
 export * from './auto-complete/index';
 export * from './multi-select/index';
 export * from './list-box/index';
+export * from './mention/index';

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

@@ -164,7 +164,7 @@ var ListBox = /** @class */ (function (_super) {
         removeClass([this.list], [dropDownBaseClasses.content, dropDownBaseClasses.root]);
         this.validationAttribute(this.element, hiddenSelect);
         this.list.setAttribute('role', 'listbox');
-        attributes(this.list, { 'role': 'listbox', 'aria-multiselectable': this.selectionSettings.mode === 'Multiple' ? 'true' : 'false' });
+        attributes(this.list, { 'role': 'listbox', 'aria-label': 'listbox', 'aria-multiselectable': this.selectionSettings.mode === 'Multiple' ? 'true' : 'false' });
         this.updateSelectionSettings();
     };
     ListBox.prototype.updateSelectionSettings = function () {
@@ -560,10 +560,10 @@ var ListBox = /** @class */ (function (_super) {
                 sortedData.splice(destIdx, 0, droppedData);
                 liColl.splice(destIdx, 0, fLiColl_1.splice(srcIdx, 1)[0]);
                 if (!value) {
-                    var liCollElem = _this.getItems();
-                    for (var i = 0; i < liCollElem.length; i++) {
-                        if (liCollElem[i].getAttribute('data-value') === null && liCollElem[i].classList.contains('e-list-item')) {
-                            li_1 = liCollElem[i];
+                    var liCollElem_1 = _this.getItems();
+                    for (var i = 0; i < liCollElem_1.length; i++) {
+                        if (liCollElem_1[i].getAttribute('data-value') === null && liCollElem_1[i].classList.contains('e-list-item')) {
+                            li_1 = liCollElem_1[i];
                             break;
                         }
                     }
@@ -613,6 +613,12 @@ var ListBox = /** @class */ (function (_super) {
             dragArgs = extend(dragArgs, { destination: dragArgs1 });
         }
         this.trigger('drop', dragArgs);
+        var liCollElem = dragArgs.elements;
+        if (liCollElem.length) {
+            for (var i = 0; i < liCollElem.length; i++) {
+                liCollElem[i].classList.remove('e-grabbed');
+            }
+        }
     };
     ListBox.prototype.updateListItems = function (sourceElem, destElem) {
         var i = 0;
@@ -1612,15 +1618,14 @@ var ListBox = /** @class */ (function (_super) {
     };
     ListBox.prototype.getGrabbedItems = function () {
         for (var i = 0; i < this.value.length; i++) {
-            if (this.value[i] === this.dragValue) {
-                var liColl = this.list.querySelectorAll('[aria-selected="true"]');
-                for (var i_1 = 0; i_1 < liColl.length; i_1++) {
-                    liColl[i_1].classList.add('e-grabbed');
+            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');
                 }
-                break;
             }
         }
-        var elems = Array.prototype.slice.call(this.element.querySelectorAll('.e-grabbed'));
+        var elems = Array.prototype.slice.call(this.element.nextElementSibling.querySelectorAll('.e-grabbed'));
         return elems;
     };
     ListBox.prototype.getDragArgs = function (args, isDragEnd) {

package/src/mention/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * export all modules from current location
+ */
+export * from './mention';
+export * from './mention-model';

package/src/mention/index.js

@@ -0,0 +1,4 @@
+/**
+ * export all modules from current location
+ */
+export * from './mention';