@syncfusion/ej2-dropdowns 20.2.50 → 20.3.47

package/dist/es6/ej2-dropdowns.es2015.js

@@ -214,6 +214,8 @@ const dropDownBaseClasses = {
     grouping: 'e-dd-group'
 };
 const ITEMTEMPLATE_PROPERTY = 'ItemTemplate';
+const DISPLAYTEMPLATE_PROPERTY = 'DisplayTemplate';
+const SPINNERTEMPLATE_PROPERTY = 'SpinnerTemplate';
 const VALUETEMPLATE_PROPERTY = 'ValueTemplate';
 const GROUPTEMPLATE_PROPERTY = 'GroupTemplate';
 const HEADERTEMPLATE_PROPERTY = 'HeaderTemplate';
@@ -416,6 +418,7 @@ let DropDownBase = class DropDownBase extends Component {
                 liElem.textContent = content;
                 ele.appendChild(liElem);
                 liElem.classList.add('e-list-nrt');
+                liElem.setAttribute('role', 'option');
             }
             else {
                 ele.innerHTML = content;
@@ -509,7 +512,7 @@ let DropDownBase = class DropDownBase extends Component {
      * @returns {void}
      */
     updateDataAttribute(value) {
-        const invalidAttr = ['class', 'style', 'id', 'type'];
+        const invalidAttr = ['class', 'style', 'id', 'type', 'aria-expanded', 'aria-autocomplete', 'aria-readonly'];
         const attr = {};
         for (let a = 0; a < this.element.attributes.length; a++) {
             if (invalidAttr.indexOf(this.element.attributes[a].name) === -1 &&
@@ -576,6 +579,8 @@ let DropDownBase = class DropDownBase extends Component {
         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}`;
@@ -1674,8 +1679,8 @@ let DropDownList = class DropDownList extends DropDownBase {
                     this.inputWrapper.container.setAttribute('style', this.htmlAttributes[htmlAttr]);
                 }
                 else {
-                    const defaultAttr = ['title', 'id', 'placeholder', 'aria-placeholder',
-                        'role', 'autocorrect', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];
+                    const defaultAttr = ['title', 'id', 'placeholder',
+                        'role', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];
                     const validateAttr = ['name', 'required'];
                     if (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') {
                         defaultAttr.push('tabindex');
@@ -1704,11 +1709,8 @@ let DropDownList = class DropDownList extends DropDownBase {
     getAriaAttributes() {
         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
         };
@@ -2428,10 +2430,6 @@ let DropDownList = class DropDownList extends DropDownBase {
         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;
@@ -2442,7 +2440,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         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');
         }
     }
@@ -2826,11 +2824,8 @@ let DropDownList = class DropDownList extends DropDownBase {
             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'
             });
@@ -3125,7 +3120,12 @@ let DropDownList = class DropDownList extends DropDownBase {
                     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');
+                }
                 const inputParent = this.isFiltering() ? this.filterInput.parentElement : this.inputWrapper.container;
                 addClass([inputParent], [dropDownListClasses.inputFocus]);
                 const animModel = { name: 'FadeIn', duration: 100 };
@@ -3398,6 +3398,9 @@ let DropDownList = class DropDownList extends DropDownBase {
             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;
@@ -3455,6 +3458,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             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' } });
@@ -3497,8 +3501,8 @@ let DropDownList = class DropDownList extends DropDownBase {
         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';
@@ -3977,7 +3981,10 @@ let DropDownList = class DropDownList extends DropDownBase {
         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');
+        }
     }
     renderHightSearch() {
         // update high light search
@@ -4083,10 +4090,9 @@ let DropDownList = class DropDownList extends DropDownBase {
             return;
         }
         if (this.inputElement) {
-            const 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'];
+            const attrArray = ['readonly', 'aria-disabled', 'placeholder', 'aria-labelledby',
+                'aria-expanded', 'autocomplete', 'aria-readonly', 'autocapitalize',
+                'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-describedby', 'aria-label'];
             for (let i = 0; i < attrArray.length; i++) {
                 this.inputElement.removeAttribute(attrArray[i]);
             }
@@ -7496,15 +7502,12 @@ let ComboBox = class ComboBox extends DropDownList {
     }
     getAriaAttributes() {
         const 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'
         };
@@ -8338,6 +8341,7 @@ let AutoComplete = class AutoComplete extends ComboBox {
     }
     setSelection(li, e) {
         if (!this.isValidLI(li)) {
+            this.selectedLI = li;
             return;
         }
         if (!isNullOrUndefined(e) && e.type === 'keydown' && e.action !== 'enter'
@@ -8353,7 +8357,6 @@ let AutoComplete = class AutoComplete extends ComboBox {
                     e.action === 'home' || e.action === 'end' || e.action === 'pageUp' || e.action === 'pageDown');
                 super.setAutoFill(li, isKeyNavigate);
             }
-            attributes(this.inputElement, { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
         }
         else {
             super.setSelection(li, e);
@@ -8962,7 +8965,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 this.refreshPopup();
                 this.renderReactTemplates();
                 this.popupObj.show(eventArgs.animation, (this.zIndex === 1000) ? this.element : null);
-                attributes(this.inputElement, { 'aria-expanded': 'true' });
+                attributes(this.inputElement, { 'aria-expanded': 'true', 'aria-owns': this.inputElement.id + '_options' });
+                if (this.selectedElementID == null) {
+                    this.inputElement.removeAttribute('aria-activedescendant');
+                }
+                else {
+                    attributes(this.inputElement, { 'aria-activedescendant': this.selectedElementID });
+                }
                 if (this.isFirstClick) {
                     this.loadTemplate();
                 }
@@ -9032,11 +9041,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     getAriaAttributes() {
         const ariaAttributes = {
             'aria-disabled': 'false',
-            'aria-owns': this.element.id + '_options',
-            'role': 'listbox',
-            'aria-multiselectable': 'true',
-            'aria-activedescendant': 'null',
-            'aria-haspopup': 'true',
+            'role': 'combobox',
             'aria-expanded': 'false'
         };
         return ariaAttributes;
@@ -9046,7 +9051,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             attributes(this.ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
         }
         const disableStatus = (this.inputElement.disabled) ? true : false;
-        attributes(this.inputElement, this.getAriaAttributes());
+        if (!this.isPopupOpen()) {
+            attributes(this.inputElement, this.getAriaAttributes());
+        }
         if (disableStatus) {
             attributes(this.inputElement, { 'aria-disabled': 'true' });
         }
@@ -10844,6 +10851,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         this.removeValue(temp, e, null, true);
                     }
                 }
+                this.selectedElementID = null;
+                this.inputElement.removeAttribute('aria-activedescendant');
             }
             else {
                 this.clearAllCallback(e);
@@ -11331,7 +11340,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             if (this.chipCollectionWrapper) {
                 this.removeChipSelection();
             }
-            attributes(this.inputElement, { 'aria-activedescendant': element.id });
+            this.selectedElementID = element.id;
         }
     }
     updateDelimeter(delimChar, e) {
@@ -12352,6 +12361,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     this.overAllWrapper.classList.remove(iconAnimation);
                     this.popupObj.hide(new Animation(eventArgs.animation));
                     attributes(this.inputElement, { 'aria-expanded': 'false' });
+                    this.inputElement.removeAttribute('aria-owns');
+                    this.inputElement.removeAttribute('aria-activedescendant');
                     if (this.allowFiltering) {
                         this.notify('inputFocus', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'clear' });
                     }
@@ -12538,7 +12549,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.element.setAttribute('data-val', 'false');
         }
         Input.createSpanElement(this.overAllWrapper, this.createElement);
-        Input.calculateWidth(this.inputElement, this.overAllWrapper);
+        Input.calculateWidth(this.inputElement.parentElement.parentElement, this.overAllWrapper);
         if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] && this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
             this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
         }
@@ -12677,7 +12688,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.ulElement = null;
         this.mainListCollection = null;
         super.destroy();
-        const temp = ['readonly', 'aria-disabled', 'aria-placeholder', 'placeholder'];
+        const temp = ['readonly', 'aria-disabled', 'placeholder'];
         let length = temp.length;
         while (length > 0) {
             this.inputElement.removeAttribute(temp[length - 1]);
@@ -13156,11 +13167,8 @@ class CheckBoxSelection {
             prepend([this.parent.filterParent], args.popupElement);
             attributes(this.filterInput, {
                 'aria-disabled': 'false',
-                'aria-owns': this.parent.element.id + '_options',
-                'role': 'listbox',
-                'aria-activedescendant': null,
+                'role': 'combobox',
                 'autocomplete': 'off',
-                'autocorrect': 'off',
                 'autocapitalize': 'off',
                 'spellcheck': 'false'
             });
@@ -13522,7 +13530,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         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();
     }
     updateSelectionSettings() {
@@ -13967,6 +13975,12 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             dragArgs = extend(dragArgs, { destination: dragArgs1 });
         }
         this.trigger('drop', dragArgs);
+        let liCollElem = dragArgs.elements;
+        if (liCollElem.length) {
+            for (let i = 0; i < liCollElem.length; i++) {
+                liCollElem[i].classList.remove('e-grabbed');
+            }
+        }
     }
     updateListItems(sourceElem, destElem) {
         const i = 0;
@@ -14947,15 +14961,14 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
     }
     getGrabbedItems() {
         for (let i = 0; i < this.value.length; i++) {
-            if (this.value[i] === this.dragValue) {
-                const liColl = this.list.querySelectorAll('[aria-selected="true"]');
-                for (let i = 0; i < liColl.length; i++) {
-                    liColl[i].classList.add('e-grabbed');
+            const liColl = this.list.querySelectorAll('[aria-selected="true"]');
+            for (let j = 0; j < liColl.length; j++) {
+                if (this.value[i] === liColl[j].textContent) {
+                    liColl[j].classList.add('e-grabbed');
                 }
-                break;
             }
         }
-        const elems = Array.prototype.slice.call(this.element.querySelectorAll('.e-grabbed'));
+        const elems = Array.prototype.slice.call(this.element.nextElementSibling.querySelectorAll('.e-grabbed'));
         return elems;
     }
     getDragArgs(args, isDragEnd) {
@@ -15630,6 +15643,1350 @@ const listBoxClasses = {
     clearIcon: 'e-clear-icon'
 };
 
+/**
+ * export all modules from current location
+ */
+
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The Mention component is used to list someone or something based on user input in textarea, input,
+ * or any other editable element from which the user can select.
+ */
+let Mention = class Mention extends DropDownBase {
+    /**
+     * * Constructor for creating the widget
+     *
+     * @param {MentionModel} options - Specifies the MentionComponent model.
+     * @param {string | HTMLElement} element - Specifies the element to render as component.
+     * @private
+     */
+    constructor(options, element) {
+        super(options, element);
+    }
+    /**
+     * When property value changes happened, then onPropertyChanged method will execute the respective changes in this component.
+     *
+     * @param {MentionModel} newProp - Returns the dynamic property value of the component.
+     * @param {MentionModel} oldProp - Returns the previous property value of the component.
+     * @private
+     * @returns {void}
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onPropertyChanged(newProp, oldProp) {
+        for (const prop of Object.keys(newProp)) {
+            switch (prop) {
+                case 'minLength':
+                    this.minLength = newProp.minLength;
+                    break;
+                case 'suffixText':
+                    this.suffixText = newProp.suffixText;
+                    break;
+                case 'allowSpaces':
+                    this.allowSpaces = newProp.allowSpaces;
+                    break;
+                case 'mentionChar':
+                    this.mentionChar = newProp.mentionChar;
+                    break;
+                case 'showMentionChar':
+                    this.showMentionChar = newProp.showMentionChar;
+                    break;
+                case 'cssClass':
+                    this.updateCssClass(newProp.cssClass, oldProp.cssClass);
+                    break;
+            }
+        }
+    }
+    updateCssClass(newClass, oldClass) {
+        if (!isNullOrUndefined(oldClass)) {
+            oldClass = (oldClass.replace(/\s+/g, ' ')).trim();
+        }
+        if (!isNullOrUndefined(newClass)) {
+            newClass = (newClass.replace(/\s+/g, ' ')).trim();
+        }
+        this.setCssClass(newClass, [this.inputElement], oldClass);
+        if (this.popupObj) {
+            this.setCssClass(newClass, [this.popupObj.element], oldClass);
+        }
+    }
+    setCssClass(cssClass$$1, elements, oldClass) {
+        if (!isNullOrUndefined(oldClass) && oldClass !== '') {
+            removeClass(elements, oldClass.split(' '));
+        }
+        if (!isNullOrUndefined(cssClass$$1) && cssClass$$1 !== '') {
+            addClass(elements, cssClass$$1.split(' '));
+        }
+    }
+    initializeData() {
+        this.isSelected = false;
+        this.isFiltered = false;
+        this.beforePopupOpen = false;
+        this.initRemoteRender = false;
+        this.isPopupOpen = false;
+        this.isCollided = false;
+        this.lineBreak = false;
+        this.keyConfigure = {
+            tab: 'tab',
+            enter: '13',
+            escape: '27',
+            end: '35',
+            home: '36',
+            down: '40',
+            up: '38',
+            pageUp: '33',
+            pageDown: '34',
+            open: 'alt+40',
+            close: 'shift+tab',
+            hide: 'alt+38',
+            space: '32'
+        };
+    }
+    /**
+     * Execute before render the list items
+     *
+     * @private
+     * @returns {void}
+     */
+    preRender() {
+        this.initializeData();
+        super.preRender();
+    }
+    /**
+     * To Initialize the control rendering
+     *
+     * @private
+     * @returns {void}
+     */
+    render() {
+        this.inputElement = !isNullOrUndefined(this.target) ? ((typeof this.target) === 'string') ?
+            document.querySelector(this.target) : this.target : this.element;
+        if (this.isContentEditable(this.inputElement)) {
+            this.inputElement.setAttribute('contenteditable', 'true');
+            addClass([this.inputElement], ['e-mention']);
+            if (isNullOrUndefined(this.target)) {
+                addClass([this.inputElement], ['e-editable-element']);
+            }
+        }
+        this.queryString = this.elementValue();
+        this.wireEvent();
+    }
+    wireEvent() {
+        EventHandler.add(this.inputElement, 'keyup', this.onKeyUp, this);
+        this.bindCommonEvent();
+    }
+    unWireEvent() {
+        EventHandler.remove(this.inputElement, 'keyup', this.onKeyUp);
+        this.unBindCommonEvent();
+    }
+    bindCommonEvent() {
+        if (!Browser.isDevice) {
+            this.keyboardModule = new KeyboardEvents(this.inputElement, {
+                keyAction: this.keyActionHandler.bind(this), keyConfigs: this.keyConfigure, eventName: 'keydown'
+            });
+        }
+    }
+    /**
+     * Hides the spinner loader.
+     *
+     * @returns {void}
+     */
+    hideSpinner() {
+        this.hideWaitingSpinner();
+    }
+    hideWaitingSpinner() {
+        if (!isNullOrUndefined(this.spinnerElement)) {
+            hideSpinner(this.spinnerElement);
+        }
+        if (!isNullOrUndefined(this.spinnerTemplate)) {
+            detach(this.spinnerTemplateElement);
+        }
+    }
+    /**
+     * Shows the spinner loader.
+     *
+     * @returns {void}
+     */
+    showWaitingSpinner() {
+        if (!isNullOrUndefined(this.popupObj)) {
+            if (isNullOrUndefined(this.spinnerTemplate) && isNullOrUndefined(this.spinnerElement)) {
+                this.spinnerElement = this.popupObj.element;
+                createSpinner({
+                    target: this.spinnerElement,
+                    width: Browser.isDevice ? '16px' : '14px'
+                }, this.createElement);
+                showSpinner(this.spinnerElement);
+            }
+            if (!isNullOrUndefined(this.spinnerTemplate)) {
+                this.setSpinnerTemplate();
+                this.popupObj.element.appendChild(this.spinnerTemplateElement);
+            }
+        }
+    }
+    keyActionHandler(e) {
+        const isNavigation = (e.action === 'down' || e.action === 'up' || e.action === 'pageUp' || e.action === 'pageDown'
+            || e.action === 'home' || e.action === 'end');
+        const isTabAction = e.action === 'tab' || e.action === 'close';
+        if (this.list === undefined && !this.isRequested && !isTabAction && e.action !== 'escape') {
+            this.renderList();
+        }
+        if (isNullOrUndefined(this.list) || (!isNullOrUndefined(this.liCollections) &&
+            isNavigation && this.liCollections.length === 0) || this.isRequested) {
+            return;
+        }
+        if (e.action === 'escape') {
+            e.preventDefault();
+        }
+        this.isSelected = e.action === 'escape' ? false : this.isSelected;
+        switch (e.action) {
+            case 'down':
+            case 'up':
+                this.updateUpDownAction(e);
+                break;
+            case 'tab':
+                if (this.isPopupOpen) {
+                    const li = this.list.querySelector('.' + dropDownBaseClasses.selected);
+                    if (li) {
+                        this.setSelection(li, e);
+                    }
+                    if (this.isPopupOpen) {
+                        this.hidePopup(e);
+                    }
+                }
+                break;
+            case 'enter':
+                if (this.isPopupOpen) {
+                    e.preventDefault();
+                    if (this.popupObj && this.popupObj.element.contains(this.selectedLI)) {
+                        this.setValue(e);
+                    }
+                }
+                break;
+            case 'escape':
+                if (this.isPopupOpen) {
+                    this.hidePopup(e);
+                }
+                break;
+        }
+    }
+    updateUpDownAction(e) {
+        const focusEle = this.list.querySelector('.' + dropDownBaseClasses.focus);
+        if (this.isSelectFocusItem(focusEle)) {
+            this.setSelection(focusEle, e);
+        }
+        else if (!isNullOrUndefined(this.liCollections)) {
+            const li = this.list.querySelector('.' + dropDownBaseClasses.selected);
+            if (!isNullOrUndefined(li)) {
+                const value = this.getFormattedValue(li.getAttribute('data-value'));
+                this.activeIndex = this.getIndexByValue(value);
+            }
+            let index = e.action === 'down' ? this.activeIndex + 1 : this.activeIndex - 1;
+            let startIndex = 0;
+            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;
+            const nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[startIndex] : this.liCollections[index];
+            if (!isNullOrUndefined(nextItem)) {
+                this.setSelection(nextItem, e);
+            }
+        }
+        if (this.isPopupOpen) {
+            e.preventDefault();
+        }
+    }
+    isSelectFocusItem(element) {
+        return !isNullOrUndefined(element);
+    }
+    unBindCommonEvent() {
+        if (!Browser.isDevice) {
+            this.keyboardModule.destroy();
+        }
+    }
+    onKeyUp(e) {
+        let rangetextContent;
+        if (this.isContentEditable(this.inputElement)) {
+            this.range = this.getCurrentRange();
+            rangetextContent = this.range.startContainer.textContent.split('');
+        }
+        let currentRange = this.getTextRange();
+        const lastWordRange = this.getLastLetter(currentRange);
+        const Regex = new RegExp(this.mentionChar, 'g');
+        const charRegex = new RegExp('[a-zA-Z]', 'g');
+        if (e.key === 'Shift' || e.keyCode === 37 || e.keyCode === 39) {
+            return;
+        }
+        if ((!currentRange || !lastWordRange) || e.code === 'Enter' || e.keyCode === 27 ||
+            (lastWordRange.match(Regex) && lastWordRange.match(Regex).length > 1) ||
+            (this.isContentEditable(this.inputElement) && this.range.startContainer &&
+                this.range.startContainer.previousElementSibling && this.range.startContainer.textContent.split('').length > 0 &&
+                (rangetextContent.length === 1 || rangetextContent[rangetextContent.length - 2].indexOf('') === -1 ||
+                    this.range.startContainer.nodeType === 1))) {
+            if (this.allowSpaces && currentRange && currentRange.trim() !== '' && charRegex.test(currentRange) && currentRange.indexOf(this.mentionChar) !== -1
+                && !this.isMatchedText() && (currentRange.length > 1 && currentRange.replace(/\u00A0/g, ' ').charAt(currentRange.length - 2) !== ' ') &&
+                (this.list && this.list.querySelectorAll('ul').length > 0)) {
+                this.queryString = currentRange.substring(currentRange.lastIndexOf(this.mentionChar) + 1).replace('\u00a0', ' ');
+                this.searchLists(e);
+            }
+            else if (this.isPopupOpen && (!this.allowSpaces || !lastWordRange)) {
+                this.hidePopup();
+                this.lineBreak = true;
+            }
+            return;
+        }
+        this.queryString = lastWordRange.replace(this.mentionChar, '');
+        if (this.mentionChar.charCodeAt(0) === lastWordRange.charCodeAt(0) &&
+            this.queryString !== '' && e.keyCode !== 38 && e.keyCode !== 40 && !this.lineBreak) {
+            this.searchLists(e);
+            if (!this.isPopupOpen && this.queryString.length >= this.minLength) {
+                if (!this.isContentEditable(this.inputElement)) {
+                    this.showPopup();
+                }
+                else if (this.isContentEditable(this.inputElement) && this.range && this.range.startContainer !== this.inputElement) {
+                    this.showPopup();
+                }
+            }
+        }
+        else if (lastWordRange.indexOf(this.mentionChar) === 0 && !this.isPopupOpen && e.keyCode !== 8 && (!this.popupObj ||
+            (isNullOrUndefined(this.target) && !document.body.contains(this.popupObj.element) ||
+                !isNullOrUndefined(this.target) && document.body.contains(this.popupObj.element)))) {
+            if (this.initRemoteRender && this.list && this.list.classList.contains('e-nodata')) {
+                this.searchLists(e);
+            }
+            this.resetList(this.dataSource, this.fields);
+            if (isNullOrUndefined(this.list)) {
+                this.initValue();
+            }
+            if (!this.isPopupOpen && e.keyCode !== 38 && e.keyCode !== 40) {
+                this.showPopup();
+                if (this.initRemoteRender && this.list.querySelectorAll('li').length === 0) {
+                    this.showWaitingSpinner();
+                }
+                this.lineBreak = false;
+            }
+        }
+        else if (this.allowSpaces && this.queryString !== '' && currentRange && currentRange.trim() !== '' && currentRange.replace('\u00a0', ' ').lastIndexOf(' ') < currentRange.length - 1 &&
+            e.keyCode !== 38 && e.keyCode !== 40 && e.keyCode !== 8) {
+            this.queryString = currentRange.substring(currentRange.lastIndexOf(this.mentionChar) + 1).replace('\u00a0', ' ');
+            this.searchLists(e);
+        }
+        else if (this.queryString === '' && this.isPopupOpen && e.keyCode !== 38 && e.keyCode !== 40) {
+            this.resetList(this.dataSource, this.fields);
+        }
+    }
+    isMatchedText() {
+        let isMatched = false;
+        for (let i = 0; i < (this.liCollections && this.liCollections.length); i++) {
+            if (this.getTextRange() &&
+                this.getTextRange().substring(this.getTextRange().lastIndexOf(this.mentionChar) + 1).replace('\u00a0', ' ').trim() === this.liCollections[i].getAttribute('data-value').toLowerCase()) {
+                isMatched = true;
+            }
+        }
+        return isMatched;
+    }
+    getCurrentRange() {
+        this.range = this.inputElement.ownerDocument.getSelection().getRangeAt(0);
+        return this.range;
+    }
+    searchLists(e) {
+        this.isDataFetched = false;
+        if (isNullOrUndefined(this.list)) {
+            super.render();
+            this.unWireListEvents();
+            this.wireListEvents();
+        }
+        if (e.type !== 'mousedown' && (e.keyCode === 40 || e.keyCode === 38)) {
+            this.queryString = this.queryString === '' ? null : this.queryString;
+            this.beforePopupOpen = true;
+            this.resetList(this.dataSource, this.fields);
+            return;
+        }
+        this.isSelected = false;
+        this.activeIndex = null;
+        const eventArgs = {
+            preventDefaultAction: false,
+            text: this.elementValue(),
+            updateData: (dataSource, query, fields) => {
+                if (eventArgs.cancel) {
+                    return;
+                }
+                this.isFiltered = true;
+                this.filterAction(dataSource, query, fields);
+            },
+            cancel: false
+        };
+        this.trigger('filtering', eventArgs, (eventArgs) => {
+            if (!eventArgs.cancel && !this.isFiltered && !eventArgs.preventDefaultAction) {
+                this.filterAction(this.dataSource, null, this.fields);
+            }
+        });
+    }
+    filterAction(dataSource, query, fields) {
+        this.beforePopupOpen = true;
+        if (this.queryString !== '' && (this.queryString.length >= this.minLength)) {
+            this.resetList(dataSource, fields, query);
+        }
+        else {
+            if (this.isPopupOpen) {
+                this.hidePopup();
+            }
+            this.beforePopupOpen = false;
+        }
+        this.setDataIndex();
+        this.renderReactTemplates();
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onActionComplete(ulElement, list, e, isUpdated) {
+        super.onActionComplete(ulElement, list, e);
+        if (this.isActive) {
+            let focusItem = ulElement.querySelector('.' + dropDownBaseClasses.li);
+            if (focusItem) {
+                focusItem.classList.add(dropDownBaseClasses.selected);
+                this.selectedLI = focusItem;
+                const value = this.getFormattedValue(focusItem.getAttribute('data-value'));
+                this.selectEventCallback(focusItem, this.getDataByValue(value), value, true);
+            }
+        }
+    }
+    setDataIndex() {
+        for (let i = 0; this.liCollections && i < this.liCollections.length; i++) {
+            this.liCollections[i].setAttribute('data-index', i.toString());
+        }
+    }
+    listOption(dataSource, fieldsSettings) {
+        const fields = super.listOption(dataSource, fieldsSettings);
+        if (isNullOrUndefined(fields.itemCreated)) {
+            fields.itemCreated = (e) => {
+                if (this.highlight) {
+                    if (this.inputElement.tagName === this.getNgDirective() && this.itemTemplate) {
+                        setTimeout(() => {
+                            highlightSearch(e.item, this.queryString, this.ignoreCase, this.filterType);
+                        }, 0);
+                    }
+                    else {
+                        highlightSearch(e.item, this.queryString, this.ignoreCase, this.filterType);
+                    }
+                }
+            };
+        }
+        else {
+            const itemCreated = fields.itemCreated;
+            fields.itemCreated = (e) => {
+                if (this.highlight) {
+                    highlightSearch(e.item, this.queryString, this.ignoreCase, this.filterType);
+                }
+                itemCreated.apply(this, [e]);
+            };
+        }
+        return fields;
+    }
+    elementValue() {
+        if (!this.isContentEditable(this.inputElement)) {
+            return this.inputElement.value.replace(this.mentionChar, '');
+        }
+        else {
+            return this.inputElement.textContent.replace(this.mentionChar, '');
+        }
+    }
+    getQuery(query) {
+        const filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();
+        const filterType = (this.queryString === '' && !isNullOrUndefined(this.elementValue())) ? 'equal' : this.filterType;
+        const queryString = (this.queryString === '' && !isNullOrUndefined(this.elementValue())) ?
+            this.elementValue() : this.queryString;
+        if (this.isFiltered) {
+            return filterQuery;
+        }
+        if (this.queryString !== null && this.queryString !== '') {
+            const dataType = this.typeOfData(this.dataSource).typeof;
+            if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
+                filterQuery.where('', filterType, queryString, this.ignoreCase, this.ignoreAccent);
+            }
+            else {
+                const mapping = !isNullOrUndefined(this.fields.text) ? this.fields.text : '';
+                filterQuery.where(mapping, filterType, queryString, this.ignoreCase, this.ignoreAccent);
+            }
+        }
+        if (!isNullOrUndefined(this.suggestionCount)) {
+            // Since defualt value of suggestioncount is 25, checked the condition
+            if (this.suggestionCount !== 25) {
+                for (let queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
+                    if (filterQuery.queries[queryElements].fn === 'onTake') {
+                        filterQuery.queries.splice(queryElements, 1);
+                    }
+                }
+            }
+            filterQuery.take(this.suggestionCount);
+        }
+        return filterQuery;
+    }
+    renderHightSearch() {
+        if (this.highlight) {
+            for (let i = 0; i < this.liCollections.length; i++) {
+                const isHighlight = this.ulElement.querySelector('.e-active');
+                if (!isHighlight) {
+                    revertHighlightSearch(this.liCollections[i]);
+                    highlightSearch(this.liCollections[i], this.queryString, this.ignoreCase, this.filterType);
+                }
+            }
+        }
+    }
+    getTextRange() {
+        let text;
+        if (!this.isContentEditable(this.inputElement)) {
+            const component = this.inputElement;
+            if (!isNullOrUndefined(component)) {
+                const startPos = component.selectionStart;
+                if (component.value && startPos >= 0) {
+                    text = component.value.substring(0, startPos);
+                }
+            }
+        }
+        else {
+            const selectedElem = this.range.startContainer;
+            if (!isNullOrUndefined(selectedElem)) {
+                const workingNodeContent = selectedElem.textContent;
+                let selectStartOffset = this.range.startOffset;
+                if (workingNodeContent && selectStartOffset >= 0) {
+                    text = workingNodeContent.substring(0, selectStartOffset);
+                }
+            }
+        }
+        return text;
+    }
+    getLastLetter(text) {
+        if (isNullOrUndefined(text)) {
+            return '';
+        }
+        const textValue = text.replace(/\u00A0/g, ' ');
+        const words = textValue.split(/\s+/);
+        let wordCnt = words.length - 1;
+        return words[wordCnt].trim();
+    }
+    isContentEditable(element) {
+        return element && element.nodeName !== 'INPUT' && element.nodeName !== 'TEXTAREA';
+    }
+    /**
+     * Opens the popup that displays the list of items.
+     *
+     * @returns {void}
+     */
+    showPopup() {
+        this.renderPopup();
+    }
+    /* eslint-disable valid-jsdoc, jsdoc/require-param */
+    /**
+     * Hides the popup if it is in an open state.
+     *
+     * @returns {void}
+     */
+    hidePopup(e) {
+        this.removeSelection();
+        this.closePopup(0, e);
+    }
+    closePopup(delay, e) {
+        if (!(this.popupObj && document.body.contains(this.popupObj.element) && this.beforePopupOpen)) {
+            return;
+        }
+        EventHandler.remove(document, 'mousedown', this.onDocumentClick);
+        this.beforePopupOpen = false;
+        const animModel = {
+            name: 'FadeOut',
+            duration: 100,
+            delay: delay ? delay : 0
+        };
+        const popupInstance = this.popupObj;
+        const eventArgs = { popup: popupInstance, cancel: false, animation: animModel, event: e || null };
+        this.trigger('closed', eventArgs, (eventArgs) => {
+            if (!eventArgs.cancel && this.popupObj) {
+                if (this.isPopupOpen) {
+                    this.popupObj.hide(new Animation(eventArgs.animation));
+                }
+                else {
+                    this.destroyPopup();
+                }
+            }
+        });
+    }
+    renderPopup() {
+        const args = { cancel: false };
+        this.trigger('beforeOpen', args, (args) => {
+            if (!args.cancel) {
+                const popupEle = isNullOrUndefined(this.target) ? this.createElement('div', {
+                    id: this.inputElement.id + '_popup', className: 'e-mention e-popup ' + (this.cssClass != null ? this.cssClass : '')
+                }) : this.element;
+                if (!isNullOrUndefined(this.target)) {
+                    popupEle.id = this.inputElement.id + '_popup';
+                    addClass([popupEle], ['e-mention', 'e-popup', 'e-popup-close']);
+                }
+                this.listHeight = formatUnit(this.popupHeight);
+                if (!isNullOrUndefined(this.list.querySelector('li')) && !this.initRemoteRender) {
+                    const li = this.list.querySelector('.' + dropDownBaseClasses.focus);
+                    if (!isNullOrUndefined(li)) {
+                        this.selectedLI = li;
+                        const value = this.getFormattedValue(li.getAttribute('data-value'));
+                        this.selectEventCallback(li, this.getDataByValue(value), value, true);
+                    }
+                }
+                append([this.list], popupEle);
+                if ((!this.popupObj || !document.body.contains(this.popupObj.element)) || !document.contains(popupEle) && isNullOrUndefined(this.target)) {
+                    document.body.appendChild(popupEle);
+                }
+                let coordinates;
+                popupEle.style.visibility = 'hidden';
+                if (this.popupHeight !== 'auto') {
+                    this.list.style.maxHeight = (parseInt(this.listHeight, 10) - 2).toString() + 'px'; // due to box-sizing property
+                    popupEle.style.maxHeight = formatUnit(this.popupHeight);
+                }
+                else {
+                    popupEle.style.height = 'auto';
+                }
+                const offsetValue = 0;
+                const left = 0;
+                this.initializePopup(popupEle, offsetValue, left);
+                this.checkCollision(popupEle);
+                popupEle.style.visibility = 'visible';
+                if (!isNullOrUndefined(this.list)) {
+                    this.unWireListEvents();
+                    this.wireListEvents();
+                }
+                const animModel = { name: 'FadeIn', duration: 100 };
+                this.beforePopupOpen = true;
+                const popupInstance = this.popupObj;
+                const eventArgs = { popup: popupInstance, cancel: false, animation: animModel };
+                this.trigger('opened', eventArgs, (eventArgs) => {
+                    if (!eventArgs.cancel) {
+                        this.renderReactTemplates();
+                        this.popupObj.show(new Animation(eventArgs.animation), (this.zIndex === 1000) ? this.inputElement : null);
+                        coordinates = this.getCoordinates(this.inputElement, this.getTriggerCharPosition());
+                        if (!this.isCollided) {
+                            popupEle.style.cssText = 'top: '.concat(coordinates.top.toString(), 'px;\n left: ').concat(coordinates.left.toString(), 'px;\nposition: absolute;\n display: block;');
+                        }
+                        else {
+                            popupEle.style.left = formatUnit(coordinates.left);
+                            this.isCollided = false;
+                        }
+                        popupEle.style.width = this.popupWidth !== '100%' && !isNullOrUndefined(this.popupWidth) ? formatUnit(this.popupWidth) : 'auto';
+                    }
+                    else {
+                        this.beforePopupOpen = false;
+                        this.destroyPopup();
+                    }
+                });
+            }
+            else {
+                this.beforePopupOpen = false;
+            }
+        });
+    }
+    checkCollision(popupEle) {
+        if (!Browser.isDevice || (Browser.isDevice && !(this.getModuleName() === 'mention'))) {
+            const collision = isCollide(popupEle);
+            if (collision.length > 0) {
+                popupEle.style.marginTop = -parseInt(getComputedStyle(popupEle).marginTop, 10) + 'px';
+                this.isCollided = true;
+            }
+            this.popupObj.resolveCollision();
+        }
+    }
+    getTriggerCharPosition() {
+        let mostRecentTriggerCharPos;
+        const currentRange = this.getTextRange();
+        if (currentRange !== undefined && currentRange !== null) {
+            mostRecentTriggerCharPos = 0;
+            const idx = currentRange.lastIndexOf(this.mentionChar);
+            if (idx >= mostRecentTriggerCharPos) {
+                mostRecentTriggerCharPos = idx;
+            }
+        }
+        return mostRecentTriggerCharPos;
+    }
+    initializePopup(element, offsetValue, left) {
+        this.popupObj = new Popup(element, {
+            width: this.setWidth(), targetType: 'relative',
+            relateTo: this.inputElement, collision: { X: 'flip', Y: 'flip' }, offsetY: offsetValue,
+            enableRtl: this.enableRtl, offsetX: left, position: { X: 'top', Y: 'left' }, actionOnScroll: 'hide',
+            zIndex: this.zIndex,
+            close: () => {
+                this.destroyPopup();
+            },
+            open: () => {
+                EventHandler.add(document, 'mousedown', this.onDocumentClick, this);
+                this.isPopupOpen = true;
+                this.setDataIndex();
+            }
+        });
+    }
+    setWidth() {
+        let width = formatUnit(this.popupWidth);
+        if (width.indexOf('%') > -1) {
+            const inputWidth = this.inputElement.offsetWidth * parseFloat(width) / 100;
+            width = inputWidth.toString() + 'px';
+        }
+        return width;
+    }
+    destroyPopup() {
+        this.isPopupOpen = false;
+        this.popupObj.destroy();
+        if (isNullOrUndefined(this.target)) {
+            detach(this.popupObj.element);
+        }
+        else {
+            this.popupObj.element.innerHTML = '';
+            this.popupObj.element.removeAttribute('style');
+            this.popupObj.element.removeAttribute('aria-disabled');
+        }
+    }
+    onDocumentClick(e) {
+        const target = e.target;
+        if (!(!isNullOrUndefined(this.popupObj) && closest(target, '#' + this.popupObj.element.id))) {
+            this.hidePopup(e);
+        }
+    }
+    getCoordinates(element, position) {
+        const properties = ['direction', 'boxSizing', 'width', 'height', 'overflowX', 'overflowY', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'fontStyle', 'fontVariant', 'fontWeight', 'fontStretch', 'fontSize', 'fontSizeAdjust', 'lineHeight', 'fontFamily', 'textAlign', 'textTransform', 'textIndent', 'textDecoration', 'letterSpacing', 'wordSpacing'];
+        let div;
+        let span;
+        let range;
+        let globalRange;
+        let coordinates;
+        let computed;
+        let rect;
+        if (!this.isContentEditable(this.inputElement)) {
+            div = this.createElement('div', { className: 'e-form-mirror-div' });
+            document.body.appendChild(div);
+            computed = getComputedStyle(element);
+            div.style.position = 'absolute';
+            div.style.visibility = 'hidden';
+            properties.forEach((prop) => {
+                div.style[prop] = computed[prop];
+            });
+            div.textContent = element.value.substring(0, position);
+            if (this.inputElement.nodeName === 'INPUT') {
+                div.textContent = div.textContent.replace(/\s/g, '\u00a0');
+            }
+            span = this.createElement('span');
+            span.textContent = element.value.substring(position) || '.';
+            div.appendChild(span);
+            rect = element.getBoundingClientRect();
+        }
+        else {
+            const selectedNodePosition = this.getTriggerCharPosition();
+            globalRange = this.range;
+            range = document.createRange();
+            range.setStart(globalRange.startContainer, selectedNodePosition);
+            range.setEnd(globalRange.startContainer, selectedNodePosition);
+            range.collapse(false);
+            rect = range.getBoundingClientRect();
+        }
+        const doc = document.documentElement;
+        const windowLeft = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
+        const windowTop = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
+        if (!this.isContentEditable(this.inputElement)) {
+            coordinates = {
+                top: rect.top + windowTop + span.offsetTop + parseInt(computed.borderTopWidth, 10) +
+                    parseInt(computed.fontSize, 10) + 3 - element.scrollTop,
+                left: rect.left + windowLeft + span.offsetLeft + parseInt(computed.borderLeftWidth, 10)
+            };
+            document.body.removeChild(div);
+        }
+        else {
+            coordinates = {
+                top: rect.top + windowTop + parseInt(getComputedStyle(this.inputElement).fontSize),
+                left: rect.left + windowLeft
+            };
+        }
+        return coordinates;
+    }
+    ;
+    initValue() {
+        this.renderList();
+        if (this.dataSource instanceof DataManager) {
+            this.initRemoteRender = true;
+        }
+        else {
+            this.updateValues();
+        }
+    }
+    updateValues() {
+        const li = this.list.querySelector('.' + dropDownBaseClasses.focus);
+        if (!isNullOrUndefined(li)) {
+            this.setSelection(li, null);
+        }
+    }
+    renderList() {
+        super.render();
+        this.unWireListEvents();
+        this.wireListEvents();
+    }
+    /**
+     * Event binding for list
+     *
+     * @returns {void}
+     */
+    wireListEvents() {
+        EventHandler.add(this.list, 'click', this.onMouseClick, this);
+        EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);
+        EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);
+    }
+    /**
+     * Event un binding for list items.
+     *
+     * @returns {void}
+     */
+    unWireListEvents() {
+        EventHandler.remove(this.list, 'click', this.onMouseClick);
+        EventHandler.remove(this.list, 'mouseover', this.onMouseOver);
+        EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);
+    }
+    onMouseClick(e) {
+        const target = e.target;
+        const li = closest(target, '.' + dropDownBaseClasses.li);
+        if (!this.isValidLI(li)) {
+            return;
+        }
+        this.setSelection(li, e);
+        const delay = 100;
+        this.closePopup(delay, e);
+        this.inputElement.focus();
+    }
+    updateSelectedItem(li, e, preventSelect, isSelection) {
+        this.removeSelection();
+        li.classList.add(dropDownBaseClasses.selected);
+        this.removeHover();
+        const value = this.getFormattedValue(li.getAttribute('data-value'));
+        const selectedData = this.getDataByValue(value);
+        if (!preventSelect && !isNullOrUndefined(e)) {
+            const items = this.detachChanges(selectedData);
+            this.isSelected = true;
+            const eventArgs = {
+                e: e,
+                item: li,
+                itemData: items,
+                isInteracted: e ? true : false,
+                cancel: false
+            };
+            this.trigger('select', eventArgs, (eventArgs) => {
+                if (eventArgs.cancel) {
+                    li.classList.remove(dropDownBaseClasses.selected);
+                }
+                else {
+                    this.selectEventCallback(li, selectedData, value);
+                    if (isSelection) {
+                        this.setSelectOptions(li, e);
+                    }
+                }
+            });
+        }
+        else {
+            this.selectEventCallback(li, selectedData, value);
+            if (isSelection) {
+                this.setSelectOptions(li, e);
+            }
+        }
+    }
+    setSelection(li, e) {
+        if (this.isValidLI(li) && (!li.classList.contains(dropDownBaseClasses.selected) || (this.isPopupOpen && this.isSelected
+            && li.classList.contains(dropDownBaseClasses.selected)))) {
+            this.updateSelectedItem(li, e, false, true);
+        }
+        else {
+            this.setSelectOptions(li, e);
+        }
+    }
+    setSelectOptions(li, e) {
+        if (this.list) {
+            this.removeHover();
+        }
+        this.previousSelectedLI = (!isNullOrUndefined(this.selectedLI)) ? this.selectedLI : null;
+        this.selectedLI = li;
+        if (this.isPopupOpen && !isNullOrUndefined(this.selectedLI)) {
+            this.setScrollPosition(e);
+        }
+        if (e && (e.keyCode === 38 || e.keyCode === 40)) {
+            return;
+        }
+        if (isNullOrUndefined(e) || this.setValue(e)) {
+            return;
+        }
+    }
+    setScrollPosition(e) {
+        if (!isNullOrUndefined(e)) {
+            switch (e.action) {
+                case 'pageDown':
+                case 'down':
+                case 'end':
+                    this.scrollBottom();
+                    break;
+                default:
+                    this.scrollTop();
+                    break;
+            }
+        }
+        else {
+            this.scrollBottom(true);
+        }
+    }
+    scrollBottom(isInitial) {
+        if (!isNullOrUndefined(this.selectedLI)) {
+            const currentOffset = this.list.offsetHeight;
+            const nextBottom = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;
+            let nextOffset = this.list.scrollTop + nextBottom - currentOffset;
+            nextOffset = isInitial ? nextOffset + parseInt(getComputedStyle(this.list).paddingTop, 10) * 2 : nextOffset;
+            let boxRange = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;
+            if (this.activeIndex === 0) {
+                this.list.scrollTop = 0;
+            }
+            else if (nextBottom > currentOffset || !(boxRange > 0 && this.list.offsetHeight > boxRange)) {
+                this.list.scrollTop = nextOffset;
+            }
+        }
+    }
+    scrollTop() {
+        if (!isNullOrUndefined(this.selectedLI)) {
+            let nextOffset = this.selectedLI.offsetTop - this.list.scrollTop;
+            nextOffset = this.fields.groupBy && nextOffset;
+            const boxRange = (this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop);
+            if (this.activeIndex === 0) {
+                this.list.scrollTop = 0;
+            }
+            else if (nextOffset < 0) {
+                this.list.scrollTop = this.list.scrollTop + nextOffset;
+            }
+            else if (!(boxRange > 0 && this.list.offsetHeight > boxRange)) {
+                this.list.scrollTop = this.selectedLI.offsetTop;
+            }
+        }
+    }
+    selectEventCallback(li, selectedData, value, selectLi) {
+        this.previousItemData = (!isNullOrUndefined(this.itemData)) ? this.itemData : null;
+        this.item = li;
+        this.itemData = selectedData;
+        const focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
+        if (focusedItem) {
+            removeClass([focusedItem], dropDownBaseClasses.focus);
+        }
+        if (selectLi) {
+            addClass([li], dropDownBaseClasses.selected);
+        }
+        li.setAttribute('aria-selected', 'true');
+        this.activeIndex = this.getIndexByValue(value);
+    }
+    detachChanges(value) {
+        let items;
+        if (typeof value === 'string' ||
+            typeof value === 'boolean' ||
+            typeof value === 'number') {
+            items = Object.defineProperties({}, {
+                value: {
+                    value: value,
+                    enumerable: true
+                },
+                text: {
+                    value: value,
+                    enumerable: true
+                }
+            });
+        }
+        else {
+            items = value;
+        }
+        return items;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    setValue(e) {
+        const dataItem = this.getItemData();
+        let textSuffix;
+        let value;
+        let endPos;
+        let range;
+        let globalRange;
+        const selection = this.inputElement.ownerDocument.getSelection();
+        const startPos = this.getTriggerCharPosition();
+        textSuffix = typeof this.suffixText === 'string' ? this.suffixText : '';
+        if (dataItem.value !== null) {
+            value = this.mentionVal(dataItem.text);
+        }
+        if (!this.isContentEditable(this.inputElement)) {
+            const myField = this.inputElement;
+            let currentTriggerSnippet = this.getTextRange().substring(startPos + this.mentionChar.length, this.getTextRange().length);
+            value += textSuffix;
+            endPos = startPos + this.mentionChar.length;
+            endPos += currentTriggerSnippet.length;
+            myField.value = myField.value.substring(0, startPos) + value + myField.value.substring(endPos, myField.value.length);
+            myField.selectionStart = startPos + value.length;
+            myField.selectionEnd = startPos + value.length;
+            if (this.isPopupOpen) {
+                this.hidePopup();
+            }
+            this.onChangeEvent(e);
+            return true;
+        }
+        else {
+            endPos = this.getTriggerCharPosition() + this.mentionChar.length;
+            if (this.range && (this.range.startContainer.textContent.trim() !== this.mentionChar)) {
+                endPos = this.range.endOffset;
+            }
+            globalRange = this.range;
+            range = document.createRange();
+            range.setStart(globalRange.startContainer, startPos);
+            range.setEnd(globalRange.startContainer, endPos);
+            range.deleteContents();
+            const element = this.createElement('div');
+            element.innerHTML = value;
+            const frag = document.createDocumentFragment();
+            let node;
+            let lastNode;
+            while (node = element.firstChild) {
+                lastNode = frag.appendChild(node);
+            }
+            range.insertNode(frag);
+            if (lastNode) {
+                range = range.cloneRange();
+                range.setStartAfter(lastNode);
+                range.collapse(true);
+                selection.removeAllRanges();
+                selection.addRange(range);
+            }
+            if (this.isPopupOpen) {
+                this.hidePopup();
+            }
+            this.onChangeEvent(e);
+            return true;
+        }
+    }
+    mentionVal(value) {
+        let showChar = this.showMentionChar ? this.mentionChar : '';
+        if (!isNullOrUndefined(this.displayTemplate)) {
+            value = this.setDisplayTemplate();
+        }
+        if (this.isContentEditable(this.inputElement)) {
+            return '<span contenteditable="false" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : ' ');
+        }
+        else {
+            return showChar + value;
+        }
+    }
+    setDisplayTemplate() {
+        let compiledString;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (this.isReact) {
+            this.clearTemplate(['displayTemplate']);
+            if (this.displayTempElement) {
+                detach(this.displayTempElement);
+                this.displayTempElement = null;
+            }
+        }
+        if (!this.displayTempElement) {
+            this.displayTempElement = this.createElement('div');
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (!this.isReact) {
+            this.displayTempElement.innerHTML = '';
+        }
+        compiledString = compile(this.displayTemplate);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const displayCompTemp = compiledString(this.itemData, this, 'displayTemplate', this.displayTemplateId, this.isStringTemplate, null, this.displayTempElement);
+        if (displayCompTemp && displayCompTemp.length > 0) {
+            for (let i = 0; i < displayCompTemp.length; i++) {
+                this.displayTempElement.appendChild(displayCompTemp[i]);
+            }
+        }
+        this.renderReactTemplates();
+        return this.displayTempElement.innerHTML;
+    }
+    setSpinnerTemplate() {
+        let compiledString;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (this.isReact) {
+            this.clearTemplate(['spinnerTemplate']);
+            if (this.spinnerTemplateElement) {
+                detach(this.spinnerTemplateElement);
+                this.spinnerTemplateElement = null;
+            }
+        }
+        if (!this.spinnerTemplateElement) {
+            this.spinnerTemplateElement = this.createElement('div');
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (!this.isReact) {
+            this.spinnerTemplateElement.innerHTML = '';
+        }
+        compiledString = compile(this.spinnerTemplate);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const spinnerCompTemp = compiledString(null, this, 'spinnerTemplate', this.spinnerTemplateId, this.isStringTemplate, null, this.spinnerTemplateElement);
+        if (spinnerCompTemp && spinnerCompTemp.length > 0) {
+            for (let i = 0; i < spinnerCompTemp.length; i++) {
+                this.spinnerTemplateElement.appendChild(spinnerCompTemp[i]);
+            }
+        }
+        this.renderReactTemplates();
+    }
+    onChangeEvent(eve) {
+        this.isSelected = false;
+        const items = this.detachMentionChanges(this.itemData);
+        let preItems;
+        if (typeof this.previousItemData === 'string' ||
+            typeof this.previousItemData === 'boolean' ||
+            typeof this.previousItemData === 'number') {
+            preItems = Object.defineProperties({}, {
+                value: {
+                    value: this.previousItemData,
+                    enumerable: true
+                },
+                text: {
+                    value: this.previousItemData,
+                    enumerable: true
+                }
+            });
+        }
+        else {
+            preItems = this.previousItemData;
+        }
+        const eventArgs = {
+            e: eve,
+            item: this.item,
+            itemData: items,
+            previousItem: this.previousSelectedLI,
+            previousItemData: preItems,
+            isInteracted: eve ? true : false,
+            value: this.item.innerHTML,
+            element: this.inputElement
+        };
+        this.trigger('change', eventArgs);
+    }
+    detachMentionChanges(value) {
+        let items;
+        if (typeof value === 'string' ||
+            typeof value === 'boolean' ||
+            typeof value === 'number') {
+            items = Object.defineProperties({}, {
+                value: {
+                    value: value,
+                    enumerable: true
+                },
+                text: {
+                    value: value,
+                    enumerable: true
+                }
+            });
+        }
+        else {
+            items = value;
+        }
+        return items;
+    }
+    getItemData() {
+        const fields = this.fields;
+        let dataItem = null;
+        dataItem = this.itemData;
+        let dataValue;
+        let dataText;
+        if (!isNullOrUndefined(dataItem)) {
+            dataValue = getValue(fields.value, dataItem);
+            dataText = getValue(fields.text, dataItem);
+        }
+        const value = (!isNullOrUndefined(dataItem) &&
+            !isUndefined(dataValue) ? dataValue : dataItem);
+        const text = (!isNullOrUndefined(dataItem) &&
+            !isUndefined(dataValue) ? dataText : dataItem);
+        return { value: value, text: text };
+    }
+    removeSelection() {
+        if (this.list) {
+            const selectedItems = this.list.querySelectorAll('.' + dropDownBaseClasses.selected);
+            if (selectedItems.length) {
+                removeClass(selectedItems, dropDownBaseClasses.selected);
+                selectedItems[0].removeAttribute('aria-selected');
+            }
+        }
+    }
+    onMouseOver(e) {
+        const currentLi = closest(e.target, '.' + dropDownBaseClasses.li);
+        this.setHover(currentLi);
+    }
+    setHover(li) {
+        if (this.enabled && this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.hover)) {
+            this.removeHover();
+            addClass([li], dropDownBaseClasses.hover);
+        }
+    }
+    removeHover() {
+        if (this.list) {
+            const hoveredItem = this.list.querySelectorAll('.' + dropDownBaseClasses.hover);
+            if (hoveredItem && hoveredItem.length) {
+                removeClass(hoveredItem, dropDownBaseClasses.hover);
+            }
+        }
+    }
+    isValidLI(li) {
+        return (li && li.hasAttribute('role') && li.getAttribute('role') === 'option');
+    }
+    onMouseLeave() {
+        this.removeHover();
+    }
+    /**
+     * Search the entered text and show it in the suggestion list if available.
+     *
+     * @returns {void}
+     */
+    search(text, positionX, positionY) {
+        if ((this.ignoreCase && (text === this.elementValue() || text === this.elementValue().toLowerCase()))
+            || !this.ignoreCase && text === this.elementValue()) {
+            this.resetList(this.dataSource, this.fields);
+        }
+        else {
+            if (this.isPopupOpen) {
+                this.hidePopup();
+            }
+            return;
+        }
+        if (isNullOrUndefined(this.list)) {
+            this.renderList();
+            this.renderPopup();
+        }
+        else {
+            this.showPopup();
+        }
+        this.popupObj.element.style.left = formatUnit(positionX);
+        this.popupObj.element.style.top = formatUnit(positionY);
+    }
+    /**
+     * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
+     *
+     * @method destroy
+     * @returns {void}
+     */
+    destroy() {
+        this.hidePopup();
+        this.unWireEvent();
+        if (this.list) {
+            this.unWireListEvents();
+        }
+        if (this.inputElement && !this.inputElement.classList.contains('e-' + this.getModuleName())) {
+            return;
+        }
+        super.destroy();
+    }
+    getLocaleName() {
+        return 'mention';
+    }
+    getNgDirective() {
+        return 'EJS-MENTION';
+    }
+    /**
+     * Return the module name of this component.
+     *
+     * @private
+     * @returns {string} Return the module name of this component.
+     */
+    getModuleName() {
+        return 'mention';
+    }
+};
+__decorate$7([
+    Property(null)
+], Mention.prototype, "cssClass", void 0);
+__decorate$7([
+    Property('@')
+], Mention.prototype, "mentionChar", void 0);
+__decorate$7([
+    Property(false)
+], Mention.prototype, "showMentionChar", void 0);
+__decorate$7([
+    Property(false)
+], Mention.prototype, "allowSpaces", void 0);
+__decorate$7([
+    Property(null)
+], Mention.prototype, "suffixText", void 0);
+__decorate$7([
+    Property(25)
+], Mention.prototype, "suggestionCount", void 0);
+__decorate$7([
+    Property(0)
+], Mention.prototype, "minLength", void 0);
+__decorate$7([
+    Property('None')
+], Mention.prototype, "sortOrder", void 0);
+__decorate$7([
+    Property(true)
+], Mention.prototype, "ignoreCase", void 0);
+__decorate$7([
+    Property(false)
+], Mention.prototype, "highlight", void 0);
+__decorate$7([
+    Property()
+], Mention.prototype, "locale", void 0);
+__decorate$7([
+    Property('auto')
+], Mention.prototype, "popupWidth", void 0);
+__decorate$7([
+    Property('300px')
+], Mention.prototype, "popupHeight", void 0);
+__decorate$7([
+    Property(null)
+], Mention.prototype, "displayTemplate", void 0);
+__decorate$7([
+    Property(null)
+], Mention.prototype, "itemTemplate", void 0);
+__decorate$7([
+    Property('No records found')
+], Mention.prototype, "noRecordsTemplate", void 0);
+__decorate$7([
+    Property(null)
+], Mention.prototype, "spinnerTemplate", void 0);
+__decorate$7([
+    Property()
+], Mention.prototype, "target", void 0);
+__decorate$7([
+    Property([])
+], Mention.prototype, "dataSource", void 0);
+__decorate$7([
+    Property(null)
+], Mention.prototype, "query", void 0);
+__decorate$7([
+    Property('Contains')
+], Mention.prototype, "filterType", void 0);
+__decorate$7([
+    Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)
+], Mention.prototype, "fields", void 0);
+__decorate$7([
+    Event()
+], Mention.prototype, "actionBegin", void 0);
+__decorate$7([
+    Event()
+], Mention.prototype, "actionComplete", void 0);
+__decorate$7([
+    Event()
+], Mention.prototype, "actionFailure", void 0);
+__decorate$7([
+    Event()
+], Mention.prototype, "change", void 0);
+__decorate$7([
+    Event()
+], Mention.prototype, "beforeOpen", void 0);
+__decorate$7([
+    Event()
+], Mention.prototype, "opened", void 0);
+__decorate$7([
+    Event()
+], Mention.prototype, "closed", void 0);
+__decorate$7([
+    Event()
+], Mention.prototype, "select", void 0);
+__decorate$7([
+    Event()
+], Mention.prototype, "filtering", void 0);
+__decorate$7([
+    Event()
+], Mention.prototype, "created", void 0);
+__decorate$7([
+    Event()
+], Mention.prototype, "destroyed", void 0);
+Mention = __decorate$7([
+    NotifyPropertyChanges
+], Mention);
+
 /**
  * export all modules from current location
  */
@@ -15638,5 +16995,5 @@ const listBoxClasses = {
  * export all modules from current location
  */
 
-export { incrementalSearch, Search, escapeCharRegExp, resetIncrementalSearchValues, highlightSearch, revertHighlightSearch, FieldSettings, dropDownBaseClasses, DropDownBase, dropDownListClasses, DropDownList, Fields, TreeSettings, DropDownTree, ComboBox, AutoComplete, MultiSelect, CheckBoxSelection, createFloatLabel, updateFloatLabelState, removeFloating, setPlaceHolder, floatLabelFocus, floatLabelBlur, encodePlaceholder, SelectionSettings, ToolbarSettings, ListBox };
+export { incrementalSearch, Search, escapeCharRegExp, resetIncrementalSearchValues, highlightSearch, revertHighlightSearch, FieldSettings, dropDownBaseClasses, DropDownBase, dropDownListClasses, DropDownList, Fields, TreeSettings, DropDownTree, ComboBox, AutoComplete, MultiSelect, CheckBoxSelection, createFloatLabel, updateFloatLabelState, removeFloating, setPlaceHolder, floatLabelFocus, floatLabelBlur, encodePlaceholder, SelectionSettings, ToolbarSettings, ListBox, Mention };
 //# sourceMappingURL=ej2-dropdowns.es2015.js.map