@syncfusion/ej2-dropdowns 20.2.50 → 20.3.47

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.2.50
+*  version : 20.3.47
 *  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@18.51.0",
   "_inBundle": false,
-  "_integrity": "sha512-pC28blWr9V3M37JGaDVsRWLABah2p0qhXNrr7vt1PuFwrVv8NEhYQs1ogCfQn/q5P+J9l++FKVCFgZigDhwGRQ==",
+  "_integrity": "sha512-kxXhjbBwf2fWZ+u/3/Il5zx4gzU1XMJIXxn+TN3UuA+qky6sacaCGrNwlqVch4OE5o2x7XXS+KIWqBj1gGN4GQ==",
   "_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-release/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-18.51.0.tgz",
+  "_shasum": "29ee920ce71820aa1c38fcc934692dd51faa7c2d",
   "_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.47",
+    "@syncfusion/ej2-data": "~20.3.47",
+    "@syncfusion/ej2-inputs": "~20.3.47",
+    "@syncfusion/ej2-lists": "~20.3.47",
+    "@syncfusion/ej2-navigations": "~20.3.47",
+    "@syncfusion/ej2-popups": "~20.3.47"
   },
   "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.47",
   "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';
@@ -267,6 +269,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 +363,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 +431,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';

package/src/mention/mention-model.d.ts

@@ -0,0 +1,285 @@
+import { KeyboardEvents, compile, Property, EventHandler, Animation, AnimationModel, KeyboardEventArgs, formatUnit, append } from '@syncfusion/ej2-base';import { isNullOrUndefined, detach, Event, EmitType, Complex, addClass, removeClass, closest, isUndefined, getValue, NotifyPropertyChanges, Browser } from '@syncfusion/ej2-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { FieldSettings, FilteringEventArgs, FilterType } from '../drop-down-base/drop-down-base';import { DropDownBase, PopupEventArgs, SelectEventArgs, BeforeOpenEventArgs, dropDownBaseClasses } from '../drop-down-base/drop-down-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { SortOrder } from '@syncfusion/ej2-lists';import { Popup, isCollide, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { highlightSearch, revertHighlightSearch } from '../common/highlight-search';
+import {MentionChangeEventArgs} from "./mention";
+
+/**
+ * Interface for a class Mention
+ */
+export interface MentionModel {
+
+    /**
+     * Defines class/multiple classes separated by a space for the mention component.
+     *
+     * @default null
+     */
+    cssClass?: string;
+
+    /**
+     * Specifies the symbol or single character which triggers the search action in the mention component.
+     *
+     * @default '@'
+     * @aspType char
+     */
+    mentionChar?: string;
+
+    /**
+     * Specifies whether to show the configured mentionChar with the text.
+     *
+     * @default false
+     */
+    showMentionChar?: boolean;
+
+    /**
+     * Defines whether to allow the space in the middle of mention while searching.
+     * When disabled, the space ends the mention component search.
+     *
+     * @default false
+     */
+    allowSpaces?: boolean;
+
+    /**
+     * Specifies the custom suffix to append along with the mention component selected item while inserting.
+     * You can append space or new line character as suffix.
+     *
+     * @default null
+     */
+    suffixText?: string;
+
+    /**
+     * Specifies the number of items in the suggestion list.
+     *
+     * @default 25
+     * @aspType int
+     */
+    suggestionCount?: number;
+
+    /**
+     * Specifies the minimum length of user input to initiate the search action.
+     * The default value is zero, where suggestion the list opened as soon as the user inputs the mention character.
+     *
+     * @default 0
+     * @aspType int
+     */
+    minLength?: number;
+
+    /**
+     * Specifies the order to sort the data source. The possible sort orders are, 
+     * * `None` - The data source is not sorted.
+     * * `Ascending` - The data source is sorted in ascending order.
+     * * `Descending` - The data source is sorted in descending order.
+     *
+     * @default 'None'
+     */
+    sortOrder?: SortOrder;
+
+    /**
+     * Specifies whether the searches are case sensitive to find suggestions.
+     *
+     * @default true
+     */
+    ignoreCase?: boolean;
+
+    /**
+     * Specifies whether to highlight the searched characters on suggestion list items.
+     *
+     * @default false
+     */
+    highlight?: boolean;
+
+    /**
+     * Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
+     *
+     * @default 'en-US'
+     */
+    locale?: string;
+
+    /**
+     * Specifies the width of the popup in pixels/number/percentage. The number value is considered as pixels.
+     *
+     * @default 'auto'
+     * @aspType string
+     */
+    popupWidth?: string | number;
+
+    /**
+     * Specifies the height of the popup in pixels/number/percentage. The number value is considered as pixels.
+     *
+     * @default '300px'
+     * @aspType string
+     */
+    popupHeight?: string | number;
+
+    /**
+     * Specifies the template for the selected value from the suggestion list.
+     *
+     * @default null
+     */
+    displayTemplate?: string;
+
+    /**
+     * Specifies the template for the suggestion list.
+     *
+     * @default null
+     */
+    itemTemplate?: string;
+
+    /**
+     * Specifies the template for no matched item which is displayed when there are no items to display in the suggestion list.
+     *
+     * @default 'No records found'
+     */
+    noRecordsTemplate?: string;
+
+    /**
+     * Specifies the template for showing until data is loaded in the popup.
+     *
+     * @default null
+     */
+    spinnerTemplate?: string;
+
+    /**
+     * Specifies the target selector where the mention component needs to be displayed.
+     * The mention component listens to the target's user input and displays suggestions as soon as the user inputs the mention character.
+     *
+     */
+    target?: HTMLElement | string;
+
+    /**
+     * Accepts the list items either through local or remote service and binds it to the component.
+     * It can be an array of JSON Objects or an instance of `DataManager`.
+     *
+     * @default []
+     */
+    dataSource?: { [key: string]: Object }[] | DataManager | string[] | number[] | boolean[];
+
+    /**
+     * Specifies the external query, which can be customized and filtered against the data source.
+     *
+     * @default null
+     */
+    query?: Query;
+
+    /**
+     * Determines on which filter type, the component needs to be considered on search action.
+     * and its supported data types are
+     *
+     * <table>
+     * <tr>
+     * <td colSpan=1 rowSpan=1>
+     * FilterType<br/></td><td colSpan=1 rowSpan=1>
+     * Description<br/></td><td colSpan=1 rowSpan=1>
+     * Supported Types<br/></td></tr>
+     * <tr>
+     * <td colSpan=1 rowSpan=1>
+     * StartsWith<br/></td><td colSpan=1 rowSpan=1>
+     * Checks whether a value begins with the specified value.<br/></td><td colSpan=1 rowSpan=1>
+     * String<br/></td></tr>
+     * <tr>
+     * <td colSpan=1 rowSpan=1>
+     * EndsWith<br/></td><td colSpan=1 rowSpan=1>
+     * Checks whether a value ends with a specified value.<br/><br/></td><td colSpan=1 rowSpan=1>
+     * <br/>String<br/></td></tr>
+     * <tr>
+     * <td colSpan=1 rowSpan=1>
+     * Contains<br/></td><td colSpan=1 rowSpan=1>
+     * Checks whether a value contains with a specified value.<br/><br/></td><td colSpan=1 rowSpan=1>
+     * <br/>String<br/></td></tr>
+     * </table>
+     *
+     * The default value set to `Contains`, all the suggestion items which contain typed characters to listed in the suggestion popup.
+     *
+     * @default 'Contains'
+     */
+    filterType?: FilterType;
+
+    /**
+     * Defines the fields of the Mention to map with the data source and binds the data to the component.
+     * * text - Specifies the text that maps the text filed from the data source for each list item.
+     * * value - Specifies the value that maps the value filed from the data source for each list item.
+     * * iconCss - Specifies the iconCss that map the icon class filed from the data source for each list item.
+     * * groupBy - Specifies the groupBy that groups the list items with its related items by mapping groupBy field.
+     *
+     * @default
+     * {
+     *  text: null, value: null, iconCss: null, groupBy: null
+     * }
+     */
+    fields?: FieldSettingsModel;
+
+    /**
+     * Triggers before fetching data from the remote server.
+     *
+     * @event actionBegin
+     */
+    actionBegin?: EmitType<Object>;
+
+    /**
+     * Triggers after data is fetched successfully from the remote server.
+     *
+     * @event actionComplete
+     */
+    actionComplete?: EmitType<Object>;
+
+    /**
+     * Triggers when the data fetch request from the remote server fails.
+     *
+     * @event actionFailure
+     */
+    actionFailure?: EmitType<Object>;
+
+    /**
+     * Triggers when an item in a popup is selected and updated in an editor.
+     *
+     * @event change
+     */
+    change?: EmitType<MentionChangeEventArgs>;
+
+    /**
+     * Triggers before the popup is opened.
+     *
+     * @event beforeOpen
+     */
+    beforeOpen?: EmitType<PopupEventArgs>;
+
+    /**
+     * Triggers after the popup opens.
+     *
+     * @event opened
+     */
+    opened?: EmitType<PopupEventArgs>;
+
+    /**
+     * Triggers after the popup is closed.
+     *
+     * @event closed
+     */
+    closed?: EmitType<PopupEventArgs>;
+
+    /**
+     * Triggers when an item in the popup is selected by the user either with the mouse/tap or with keyboard navigation.
+     *
+     * @event select
+     */
+    select?: EmitType<SelectEventArgs>;
+
+    /**
+     * Triggers on typing a character in the component.
+     *
+     * @event filtering
+     */
+    filtering?: EmitType<FilteringEventArgs>;
+
+    /**
+     * Triggers when the component is created.
+     *
+     * @event created
+     */
+    created?: EmitType<Object>;
+
+    /**
+     * Triggers when the component is destroyed.
+     *
+     * @event destroyed
+     */
+    destroyed?: EmitType<Object>;
+
+}