@syncfusion/ej2-dropdowns 20.2.39 → 20.2.43-1234

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

@@ -1,4 +1,4 @@
-import { Input, InputObject, FloatLabelType, TextBox, InputEventArgs } from '@syncfusion/ej2-inputs';import { createCheckBox } from '@syncfusion/ej2-buttons';import { NotifyPropertyChanges, INotifyPropertyChanged, Property, Event, EmitType } from '@syncfusion/ej2-base';import { Component, EventHandler, attributes, formatUnit, ChildProperty, remove, L10n, extend } from '@syncfusion/ej2-base';import { addClass, removeClass, detach, prepend, Complex, closest, setValue, getValue, compile, append } from '@syncfusion/ej2-base';import { select, selectAll, isNullOrUndefined as isNOU, matches, Browser, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';import { Popup } from '@syncfusion/ej2-popups';import { TreeView, NodeSelectEventArgs, DataBoundEventArgs, FieldsSettingsModel, NodeClickEventArgs } from '@syncfusion/ej2-navigations';import { NodeCheckEventArgs, FailureEventArgs} from '@syncfusion/ej2-navigations';
+import { Input, InputObject, FloatLabelType, TextBox, InputEventArgs } from '@syncfusion/ej2-inputs';import { createCheckBox } from '@syncfusion/ej2-buttons';import { NotifyPropertyChanges, INotifyPropertyChanged, Property, Event, EmitType } from '@syncfusion/ej2-base';import { Component, EventHandler, attributes, formatUnit, ChildProperty, remove, L10n, extend } from '@syncfusion/ej2-base';import { addClass, removeClass, detach, prepend, Complex, closest, setValue, getValue, compile, append } from '@syncfusion/ej2-base';import { select, selectAll, isNullOrUndefined as isNOU, matches, Browser, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';import { Popup } from '@syncfusion/ej2-popups';import { TreeView, NodeSelectEventArgs, DataBoundEventArgs, FieldsSettingsModel, NodeClickEventArgs, NodeExpandEventArgs } from '@syncfusion/ej2-navigations';import { NodeCheckEventArgs, FailureEventArgs} from '@syncfusion/ej2-navigations';
 import {Mode,ExpandOn,TreeFilterType,SortOrder,DdtBeforeOpenEventArgs,DdtChangeEventArgs,DdtPopupEventArgs,DdtDataBoundEventArgs,DdtFilteringEventArgs,DdtFocusEventArgs,DdtKeyPressEventArgs,DdtSelectEventArgs} from "./drop-down-tree";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
@@ -58,6 +58,12 @@ export interface FieldsModel {
      */
     query?: Query;
 
+    /**
+     * Specifies whether the node can be selected by users or not 
+     * When set to false, the user interaction is prevented for the corresponding node. 
+     */
+    selectable?: string;
+
     /**
      * Specifies the mapping field for the selected state of the Dropdown Tree item.
      */
@@ -199,7 +205,7 @@ export interface DropDownTreeModel extends ComponentModel{
      *
      * @default {value: 'value', text: 'text', dataSource: [], child: 'child', parentValue: 'parentValue', hasChildren: 'hasChildren',
      *  expanded: 'expanded', htmlAttributes: 'htmlAttributes', iconCss: 'iconCss', imageUrl: 'imageUrl',
-     *  query: null, selected: 'selected', tableName: null, tooltip: 'tooltip'}
+     *  query: null, selected: 'selected', selectable: 'selectable', tableName: null, tooltip: 'tooltip' }
      */
     fields?: FieldsModel;
 
@@ -370,6 +376,14 @@ export interface DropDownTreeModel extends ComponentModel{
      */
     showCheckBox?: boolean;
 
+    /**
+     * Specifies whether to allow rendering of untrusted HTML values in the Dropdown Tree component.
+     * While enable this property, it sanitize suspected untrusted strings and script, and update in the Dropdown Tree component.
+     * 
+     * @default false
+     */
+    enableHtmlSanitizer?: boolean;
+
     /**
      * Specifies whether to show or hide the clear icon in textbox.
      * When the clear button is clicked, `value`, `text` properties will be reset to null.

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

@@ -50,6 +50,11 @@ export declare class Fields extends ChildProperty<Fields> {
      * @default null
      */
     query: Query;
+    /**
+     * Specifies whether the node can be selected by users or not
+     * When set to false, the user interaction is prevented for the corresponding node.
+     */
+    selectable: string;
     /**
      * Specifies the mapping field for the selected state of the Dropdown Tree item.
      */
@@ -283,6 +288,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     private nestedTableUpdate;
     private clearIconWidth;
     private isClicked;
+    private isCheckAllCalled;
     /**
      * Specifies the template that renders to the popup list content of the
      * Dropdown Tree component when the data fetch request from the remote server fails.
@@ -345,7 +351,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
      *
      * @default {value: 'value', text: 'text', dataSource: [], child: 'child', parentValue: 'parentValue', hasChildren: 'hasChildren',
      *  expanded: 'expanded', htmlAttributes: 'htmlAttributes', iconCss: 'iconCss', imageUrl: 'imageUrl',
-     *  query: null, selected: 'selected', tableName: null, tooltip: 'tooltip'}
+     *  query: null, selected: 'selected', selectable: 'selectable', tableName: null, tooltip: 'tooltip' }
      */
     fields: FieldsModel;
     /**
@@ -499,6 +505,13 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
      * @default false
      */
     showCheckBox: boolean;
+    /**
+     * Specifies whether to allow rendering of untrusted HTML values in the Dropdown Tree component.
+     * While enable this property, it sanitize suspected untrusted strings and script, and update in the Dropdown Tree component.
+     *
+     * @default false
+     */
+    enableHtmlSanitizer: boolean;
     /**
      * Specifies whether to show or hide the clear icon in textbox.
      * When the clear button is clicked, `value`, `text` properties will be reset to null.
@@ -750,6 +763,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     private onNodeClicked;
     private onNodeChecked;
     private beforeCheck;
+    private onNodeExpanded;
     private updateClearButton;
     private updateDropDownIconState;
     private updateMode;

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

@@ -107,6 +107,9 @@ var Fields = /** @class */ (function (_super) {
     __decorate([
         Property(null)
     ], Fields.prototype, "query", void 0);
+    __decorate([
+        Property('selectable')
+    ], Fields.prototype, "selectable", void 0);
     __decorate([
         Property('selected')
     ], Fields.prototype, "selected", void 0);
@@ -165,6 +168,8 @@ var DropDownTree = /** @class */ (function (_super) {
         _this.selectedData = [];
         _this.filterDelayTime = 300;
         _this.isClicked = false;
+        // Specifies if the checkAll method has been called
+        _this.isCheckAllCalled = false;
         return _this;
     }
     /**
@@ -293,7 +298,7 @@ var DropDownTree = /** @class */ (function (_super) {
         this.updateDataAttribute();
         this.setHTMLAttributes();
         this.setAttributes();
-        this.popupDiv = this.createElement('div', { className: CONTENT, attrs: { 'tabindex': '0' } });
+        this.popupDiv = this.createElement('div', { className: CONTENT });
         this.popupDiv.classList.add(DROPDOWN);
         this.tree = this.createElement('div', { id: this.element.id + '_tree' });
         this.popupDiv.appendChild(this.tree);
@@ -918,7 +923,12 @@ var DropDownTree = /** @class */ (function (_super) {
                         temp = this.getOverflowVal(index);
                         data += temp;
                         temp = this.overFlowWrapper.innerHTML;
-                        this.overFlowWrapper.innerHTML = data;
+                        if (this.enableHtmlSanitizer) {
+                            this.overFlowWrapper.innerText = data;
+                        }
+                        else {
+                            this.overFlowWrapper.innerHTML = data;
+                        }
                         wrapperleng = this.overFlowWrapper.offsetWidth;
                         overAllContainer = this.inputWrapper.offsetWidth;
                         if ((wrapperleng + downIconWidth + this.clearIconWidth) > overAllContainer) {
@@ -1088,7 +1098,7 @@ var DropDownTree = /** @class */ (function (_super) {
             if (isValid && this.value !== null && (this.value && this.value.length !== 0)) {
                 addClass([this.inputEle], CHIP_INPUT);
             }
-            else if (this.value === null || (this.value && this.value.length === 0)) {
+            else if (this.value === null || (this.value && this.value.length === 0) || this.chipWrapper) {
                 addClass([this.chipWrapper], HIDEICON);
             }
         }
@@ -1143,6 +1153,7 @@ var DropDownTree = /** @class */ (function (_super) {
             frameSpan.classList.add(CHECK);
             ariaState = 'true';
             if (!this.isReverseUpdate) {
+                this.isCheckAllCalled = true;
                 this.treeObj.checkAll();
                 if (!this.changeOnBlur) {
                     this.triggerChangeEvent(e);
@@ -1446,10 +1457,12 @@ var DropDownTree = /** @class */ (function (_super) {
             nodeSelected: this.onNodeSelected.bind(this),
             nodeChecked: this.onNodeChecked.bind(this),
             nodeChecking: this.beforeCheck.bind(this),
+            nodeExpanded: this.onNodeExpanded.bind(this),
             actionFailure: this.onActionFailure.bind(this),
             nodeClicked: this.onNodeClicked.bind(this),
             dataBound: this.OnDataBound.bind(this),
             allowMultiSelection: this.allowMultiSelection,
+            enableHtmlSanitizer: this.enableHtmlSanitizer,
             showCheckBox: this.showCheckBox,
             autoCheck: this.treeSettings.autoCheck,
             sortOrder: this.sortOrder,
@@ -1552,7 +1565,7 @@ var DropDownTree = /** @class */ (function (_super) {
             var height = Math.round(this.header.getBoundingClientRect().height);
             popupHeight = formatUnit(parseInt(popupHeight, 10) - height + 'px');
         }
-        if (this.showCheckBox && this.showSelectAll) {
+        if (this.showCheckBox && this.showSelectAll && (!this.popupDiv.classList.contains(NODATA))) {
             var height = Math.round(this.checkAllParent.getBoundingClientRect().height);
             popupHeight = formatUnit(parseInt(popupHeight, 10) - height + 'px');
         }
@@ -1635,14 +1648,14 @@ var DropDownTree = /** @class */ (function (_super) {
         var isFooter = closest(target, '.' + FOOTER);
         var isScroller = target.classList.contains(DROPDOWN) ? true :
             (matches(target, '.e-ddt .e-popup') || matches(target, '.e-ddt .e-treeview'));
-        if ((this.isPopupOpen && (this.inputWrapper.contains(target) || isTree || isFilter || isScroller || isHeader || isFooter)) ||
+        if ((this.isPopupOpen && (this.inputWrapper.contains(target) || isTree || isScroller || isHeader || isFooter)) ||
             ((this.allowMultiSelection || this.showCheckBox) && (this.isPopupOpen && target.classList.contains(CHIP_CLOSE) ||
                 (this.isPopupOpen && (target.classList.contains(CHECKALLPARENT) || target.classList.contains(ALLTEXT)
                     || target.classList.contains(CHECKBOXFRAME)))))) {
             this.isDocumentClick = false;
             e.preventDefault();
         }
-        else if (!this.inputWrapper.contains(target) && this.inputFocus) {
+        else if (!this.inputWrapper.contains(target) && this.inputFocus && !isFilter) {
             this.focusOut(e);
         }
     };
@@ -1675,6 +1688,9 @@ var DropDownTree = /** @class */ (function (_super) {
         }
         var eventArgs = { data: args.data };
         this.trigger('dataBound', eventArgs);
+        if (this.filterObj === null) {
+            this.isFilteredData = false;
+        }
         if (this.isFilteredData) {
             this.treeObj.expandAll();
         }
@@ -1742,7 +1758,7 @@ var DropDownTree = /** @class */ (function (_super) {
             dataSource: fields.dataSource, value: fields.value, text: fields.text, parentValue: fields.parentValue,
             child: this.cloneChildField(fields.child), hasChildren: fields.hasChildren, expanded: fields.expanded,
             iconCss: fields.iconCss, imageUrl: fields.imageUrl, htmlAttributes: fields.htmlAttributes, query: fields.query,
-            selected: fields.selected, tableName: fields.tableName, tooltip: fields.tooltip
+            selected: fields.selected, selectable: fields.selectable, tableName: fields.tableName, tooltip: fields.tooltip
         };
         return clonedField;
     };
@@ -1755,7 +1771,7 @@ var DropDownTree = /** @class */ (function (_super) {
                 dataSource: fields.dataSource, value: fields.value, text: fields.text, parentValue: fields.parentValue,
                 child: (fields.child ? this.cloneChildField(fields.child) : null), hasChildren: fields.hasChildren,
                 expanded: fields.expanded, iconCss: fields.iconCss, imageUrl: fields.imageUrl, htmlAttributes: fields.htmlAttributes,
-                query: fields.query, selected: fields.selected, tableName: fields.tableName, tooltip: fields.tooltip
+                query: fields.query, selected: fields.selected, selectable: fields.selectable, tableName: fields.tableName, tooltip: fields.tooltip
             };
             return clonedField;
         }
@@ -1765,7 +1781,7 @@ var DropDownTree = /** @class */ (function (_super) {
             dataSource: fields.dataSource, id: fields.value, text: fields.text, parentID: fields.parentValue,
             child: this.getTreeChildren(fields.child), hasChildren: fields.hasChildren, expanded: fields.expanded,
             iconCss: fields.iconCss, imageUrl: fields.imageUrl, isChecked: fields.selected,
-            htmlAttributes: fields.htmlAttributes, query: fields.query, selected: fields.selected,
+            htmlAttributes: fields.htmlAttributes, query: fields.query, selectable: fields.selectable, selected: fields.selected,
             tableName: fields.tableName, tooltip: fields.tooltip
         };
         return treeFields;
@@ -1803,7 +1819,8 @@ var DropDownTree = /** @class */ (function (_super) {
             }
             return 2;
         }
-        this.fields.dataSource = isNOU(this.fields.dataSource) ? [] : this.fields.dataSource;
+        if (isNOU(this.fields.dataSource))
+            this.fields.dataSource = [];
         for (var i = 0, len = this.fields.dataSource.length; i < len; i++) {
             if ((typeof field.child === 'string') && !isNOU(getValue(field.child, this.fields.dataSource[i]))) {
                 return 2;
@@ -1942,13 +1959,14 @@ var DropDownTree = /** @class */ (function (_super) {
             var nodes = this.treeObj.element.querySelectorAll('li');
             var checkedNodes = this.treeObj.element.querySelectorAll('li .e-checkbox-wrapper[aria-checked=true]');
             var wrap = closest(this.checkBoxElement, '.' + CHECKBOXWRAP);
-            if (wrap && args.action === 'uncheck') {
+            if (wrap && args.action === 'uncheck' && (args.isInteracted || checkedNodes.length === 0)) {
                 this.isReverseUpdate = true;
                 this.changeState(wrap, 'uncheck');
                 this.isReverseUpdate = false;
             }
-            else if (wrap && args.action === 'check' && checkedNodes.length === nodes.length) {
+            else if (wrap && args.action === 'check' && checkedNodes.length === nodes.length && this.isCheckAllCalled) {
                 this.isReverseUpdate = true;
+                this.isCheckAllCalled = false;
                 this.changeState(wrap, 'check');
                 this.isReverseUpdate = false;
             }
@@ -1959,6 +1977,13 @@ var DropDownTree = /** @class */ (function (_super) {
             this.oldValue = this.value ? this.value.slice() : this.value;
         }
     };
+    DropDownTree.prototype.onNodeExpanded = function (args) {
+        if (this.hasTemplate && this.portals) {
+            this.portals = [].concat(this.treeObj.portals);
+            /* eslint-enable */
+            this.renderReactTemplates();
+        }
+    };
     DropDownTree.prototype.updateClearButton = function (state) {
         if (state) {
             if (!this.inputWrapper.contains(this.overAllClear)) {
@@ -2259,7 +2284,12 @@ var DropDownTree = /** @class */ (function (_super) {
         });
         var chipContent = this.createElement('span', { className: CHIP_CONTENT });
         var chipClose = this.createElement('span', { className: CHIP_CLOSE + ' ' + ICONS });
-        chipContent.innerHTML = text;
+        if (this.enableHtmlSanitizer) {
+            chipContent.innerText = text;
+        }
+        else {
+            chipContent.innerHTML = text;
+        }
         chip.appendChild(chipContent);
         this.chipCollection.appendChild(chip);
         if (this.showClearButton) {
@@ -2456,6 +2486,7 @@ var DropDownTree = /** @class */ (function (_super) {
     DropDownTree.prototype.selectAllItems = function (state) {
         if (this.showCheckBox) {
             if (state) {
+                this.isCheckAllCalled = true;
                 this.treeObj.checkAll();
             }
             else {
@@ -2550,8 +2581,6 @@ var DropDownTree = /** @class */ (function (_super) {
         }
         else {
             this.noRecord = this.createElement('div');
-            addClass([this.noRecord], NODATACONTAINER);
-            prepend([this.noRecord], this.popupDiv);
         }
         if (this.noRecordsTemplate !== 'No Records Found' || this.actionFailureTemplate !== 'The Request Failed') {
             var template = actionFailure ? this.actionFailureTemplate : this.noRecordsTemplate;
@@ -2563,6 +2592,8 @@ var DropDownTree = /** @class */ (function (_super) {
             if (tempArr) {
                 tempArr = Array.prototype.slice.call(tempArr);
                 append(tempArr, this.noRecord);
+                addClass([this.noRecord], NODATACONTAINER);
+                prepend([this.noRecord], this.popupDiv);
             }
         }
         else {
@@ -2571,6 +2602,8 @@ var DropDownTree = /** @class */ (function (_super) {
             this.l10n = new L10n(this.getLocaleName(), l10nLocale, this.locale);
             this.noRecord.innerHTML = actionFailure ?
                 this.l10n.getConstant('actionFailureTemplate') : this.l10n.getConstant('noRecordsTemplate');
+            addClass([this.noRecord], NODATACONTAINER);
+            prepend([this.noRecord], this.popupDiv);
         }
     };
     DropDownTree.prototype.updateRecordTemplate = function (action) {
@@ -3082,6 +3115,9 @@ var DropDownTree = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], DropDownTree.prototype, "showCheckBox", void 0);
+    __decorate([
+        Property(false)
+    ], DropDownTree.prototype, "enableHtmlSanitizer", void 0);
     __decorate([
         Property(true)
     ], DropDownTree.prototype, "showClearButton", void 0);

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-model.d.ts

@@ -93,6 +93,24 @@ export interface ListBoxModel extends DropDownBaseModel{
      */
     height?: number | string;
 
+    /**
+     * Specifies a value that indicates whether the component is enabled or not.
+     *
+     * @default true
+     * @deprecated
+     */
+    enabled?: boolean;
+
+    /**
+     * Enable or disable persisting component's state between page reloads.
+     * If enabled, following list of states will be persisted.
+     * 1. value
+     *
+     * @default false
+     * @deprecated
+     */
+    enablePersistence?: boolean;
+
     /**
      * If 'allowDragAndDrop' is set to true, then you can perform drag and drop of the list item.
      * ListBox contains same 'scope' property enables drag and drop between multiple ListBox.

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

@@ -141,6 +141,22 @@ export declare class ListBox extends DropDownBase {
      * @default ''
      */
     height: number | string;
+    /**
+     * Specifies a value that indicates whether the component is enabled or not.
+     *
+     * @default true
+     * @deprecated
+     */
+    enabled: boolean;
+    /**
+     * Enable or disable persisting component's state between page reloads.
+     * If enabled, following list of states will be persisted.
+     * 1. value
+     *
+     * @default false
+     * @deprecated
+     */
+    enablePersistence: boolean;
     /**
      * If 'allowDragAndDrop' is set to true, then you can perform drag and drop of the list item.
      * ListBox contains same 'scope' property enables drag and drop between multiple ListBox.
@@ -342,6 +358,12 @@ export declare class ListBox extends DropDownBase {
     private removeSelected;
     private getCurIdx;
     private getComponent;
+    /**
+     * Sets the enabled state to DropDownBase.
+     *
+     * @returns {void}
+     */
+    protected setEnabled(): void;
     protected listOption(dataSource: obj[] | string[] | number[] | boolean[], fields: FieldSettingsModel): FieldSettingsModel;
     private triggerBeforeItemRender;
     requiredModules(): ModuleDeclaration[];

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

@@ -130,6 +130,7 @@ var ListBox = /** @class */ (function (_super) {
         this.isCustomFiltering = false;
         this.initialSelectedOptions = this.value;
         _super.prototype.render.call(this);
+        this.setEnabled();
         this.renderComplete();
     };
     ListBox.prototype.initWrapper = function () {
@@ -164,7 +165,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 () {
@@ -427,10 +428,10 @@ var ListBox = /** @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var event = args.event;
         var wrapper;
-        if (args.target && (args.target.classList.contains("e-listbox-wrapper") || args.target.classList.contains("e-list-item")
-            || args.target.classList.contains("e-filter-parent") || args.target.classList.contains("e-input-group"))) {
-            if (args.target.classList.contains("e-list-item") || args.target.classList.contains("e-filter-parent")
-                || args.target.classList.contains("e-input-group")) {
+        if (args.target && (args.target.classList.contains('e-listbox-wrapper') || args.target.classList.contains('e-list-item')
+            || args.target.classList.contains('e-filter-parent') || args.target.classList.contains('e-input-group'))) {
+            if (args.target.classList.contains('e-list-item') || args.target.classList.contains('e-filter-parent')
+                || args.target.classList.contains('e-input-group')) {
                 wrapper = args.target.closest('.e-listbox-wrapper');
             }
             else {
@@ -485,7 +486,8 @@ var ListBox = /** @class */ (function (_super) {
         var getArgs = this.getDragArgs({ target: args.droppedElement }, true);
         var sourceArgs = { previousData: this.dataSource };
         var destArgs = { previousData: listObj.dataSource };
-        var dragArgs = extend({}, getArgs, { target: args.target, source: { previousData: this.dataSource }, previousIndex: args.previousIndex, currentIndex: args.currentIndex });
+        var dragArgs = extend({}, getArgs, { target: args.target, source: { previousData: this.dataSource },
+            previousIndex: args.previousIndex, currentIndex: args.currentIndex });
         if (listObj !== this) {
             var sourceArgs1 = extend(sourceArgs, { currentData: this.listData });
             dragArgs = extend(dragArgs, { source: sourceArgs1, destination: destArgs });
@@ -560,10 +562,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,10 +615,17 @@ var ListBox = /** @class */ (function (_super) {
             dragArgs = extend(dragArgs, { destination: dragArgs1 });
         }
         this.trigger('drop', dragArgs);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        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;
-        destElem.innerHTML = "";
+        destElem.innerHTML = '';
         while (i < sourceElem.childNodes.length) {
             destElem.appendChild(sourceElem.childNodes[i]);
         }
@@ -645,6 +654,14 @@ var ListBox = /** @class */ (function (_super) {
         }
         return listObj;
     };
+    /**
+     * Sets the enabled state to DropDownBase.
+     *
+     * @returns {void}
+     */
+    ListBox.prototype.setEnabled = function () {
+        this.element.setAttribute('aria-disabled', (this.enabled) ? 'false' : 'true');
+    };
     ListBox.prototype.listOption = function (dataSource, fields) {
         this.listCurrentOptions = _super.prototype.listOption.call(this, dataSource, fields);
         this.listCurrentOptions = extend({}, this.listCurrentOptions, { itemCreated: this.triggerBeforeItemRender.bind(this) }, true);
@@ -805,7 +822,7 @@ var ListBox = /** @class */ (function (_super) {
         if (this.listData.length === 0) {
             this.l10nUpdate();
         }
-        this.value = null;
+        this.value = [];
         this.updateToolBarState();
     };
     /**
@@ -1094,9 +1111,7 @@ var ListBox = /** @class */ (function (_super) {
             prepend([this.filterParent], this.list);
             attributes(this.filterInput, {
                 'aria-disabled': 'false',
-                'aria-owns': this.element.id + '_options',
-                'role': 'listbox',
-                'aria-activedescendant': null,
+                'aria-label': 'search list item',
                 'autocomplete': 'off',
                 'autocorrect': 'off',
                 'autocapitalize': 'off',
@@ -1133,12 +1148,12 @@ var ListBox = /** @class */ (function (_super) {
         if (li && li.parentElement) {
             currSelIdx = [].slice.call(li.parentElement.children).indexOf(li);
             if (!this.selectionSettings.showCheckbox) {
-                if ((e.ctrlKey || Browser.isDevice) && this.isSelected(li)) {
+                if ((e.ctrlKey || e.metaKey || Browser.isDevice) && this.isSelected(li)) {
                     li.classList.remove(cssClass.selected);
                     li.removeAttribute('aria-selected');
                     isSelect = false;
                 }
-                else if (!(this.selectionSettings.mode === 'Multiple' && (e.ctrlKey || Browser.isDevice))) {
+                else if (!(this.selectionSettings.mode === 'Multiple' && (e.ctrlKey || e.metaKey || Browser.isDevice))) {
                     this.getSelectedItems().forEach(function (ele) {
                         ele.removeAttribute('aria-selected');
                     });
@@ -1498,7 +1513,7 @@ var ListBox = /** @class */ (function (_super) {
         var isRefresh = tListBox.sortOrder !== 'None' || (tListBox.selectionSettings.showCheckbox !==
             fListBox.selectionSettings.showCheckbox) || tListBox.fields.groupBy || tListBox.itemTemplate || fListBox.itemTemplate;
         this.removeSelected(fListBox, fListBox.getSelectedItems());
-        var tempItems = [].slice.call(fListBox.jsonData);
+        var tempItems = [].slice.call(fListBox.listData);
         var localDataArgs = { cancel: false, items: tempItems, eventName: this.toolbarAction };
         fListBox.trigger('actionBegin', localDataArgs);
         if (localDataArgs.cancel) {
@@ -1543,9 +1558,27 @@ var ListBox = /** @class */ (function (_super) {
         fListBox.value = [];
         listData = listData
             .filter(function (data) { return data.isHeader !== true; });
+        var sortedData = listData.filter(function (val) {
+            return tListBox.jsonData.indexOf(val) === -1;
+        });
+        for (var i = 0; i < sortedData.length; i++) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            tListBox.jsonData.splice(index + i, 0, sortedData[i]);
+        }
         tListBox.listData = listData;
-        tListBox.jsonData = jsonData;
-        fListBox.listData = fListBox.sortedData = fListBox.jsonData = [];
+        if (fListBox.listData.length === fListBox.jsonData.length) {
+            fListBox.listData = fListBox.sortedData = fListBox.jsonData = [];
+        }
+        else if (fListBox.allowFiltering) {
+            for (var i = 0; i < fListBox.listData.length; i++) {
+                for (var j = 0; j < fListBox.jsonData.length; j++) {
+                    if (fListBox.listData[i] === fListBox.jsonData[j]) {
+                        fListBox.jsonData.splice(j, 1);
+                    }
+                }
+            }
+            fListBox.listData = fListBox.sortedData = [];
+        }
         if (isRefresh) {
             var sourceElem = tListBox.renderItems(listData, tListBox.fields);
             tListBox.updateListItems(sourceElem, tListBox.ulElement);
@@ -1599,21 +1632,35 @@ var ListBox = /** @class */ (function (_super) {
         }
         return listObj;
     };
-    ListBox.prototype.getGrabbedItems = function () {
+    ListBox.prototype.getGrabbedItems = function (args) {
+        var grabbItems = false;
         for (var i = 0; i < this.value.length; i++) {
-            if (this.value[i] === this.dragValue) {
+            if (this.value[i] === this.getFormattedValue(args.target.getAttribute('data-value'))) {
+                grabbItems = true;
+                break;
+            }
+        }
+        if (grabbItems) {
+            for (var i = 0; i < this.value.length; i++) {
                 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');
+                for (var j = 0; j < liColl.length; j++) {
+                    if (this.value[i] === this.getFormattedValue(liColl[j].getAttribute('data-value'))) {
+                        liColl[j].classList.add('e-grabbed');
+                    }
                 }
-                break;
             }
         }
-        var elems = Array.prototype.slice.call(this.element.querySelectorAll('.e-grabbed'));
+        var elems;
+        if (this.isAngular) {
+            elems = Array.prototype.slice.call(this.element.getElementsByClassName('e-list-parent')[0].querySelectorAll('.e-grabbed'));
+        }
+        else {
+            elems = Array.prototype.slice.call(this.element.nextElementSibling.querySelectorAll('.e-grabbed'));
+        }
         return elems;
     };
     ListBox.prototype.getDragArgs = function (args, isDragEnd) {
-        var elems = this.getGrabbedItems();
+        var elems = this.getGrabbedItems(args);
         if (elems.length) {
             if (isDragEnd) {
                 elems.push(args.target);
@@ -1665,7 +1712,7 @@ var ListBox = /** @class */ (function (_super) {
                     }
                 }
             }
-            else if (e.keyCode !== 37 && e.keyCode !== 39 && e.code !== "KeyA") {
+            else if (e.keyCode !== 37 && e.keyCode !== 39 && e.code !== 'KeyA') {
                 this.upDownKeyHandler(e);
             }
         }
@@ -1709,8 +1756,8 @@ var ListBox = /** @class */ (function (_super) {
             }
             if (this.selectionSettings.showCheckbox && e.ctrlKey && e.shiftKey && (e.keyCode === 36 || e.keyCode === 35)) {
                 var selectedidx = Array.prototype.indexOf.call(ul.children, fli);
-                var sidx = e.code === "Home" ? 0 : selectedidx;
-                var eidx = e.code === "Home" ? selectedidx : ul.children.length - 1;
+                var sidx = e.code === 'Home' ? 0 : selectedidx;
+                var eidx = e.code === 'Home' ? selectedidx : ul.children.length - 1;
                 for (var i = sidx; i <= eidx; i++) {
                     var item = ul.children[i];
                     this.notify('updatelist', { li: item, e: {
@@ -1868,7 +1915,6 @@ var ListBox = /** @class */ (function (_super) {
                 dvalue_1 = _this.getFormattedValue(li.getAttribute('data-value'));
                 if (values.indexOf(dvalue_1) < 0) {
                     li.getElementsByClassName('e-check')[0].classList.remove('e-check');
-                    li.getElementsByClassName('e-checkbox-wrapper')[0].removeAttribute('aria-checked');
                     li.removeAttribute('aria-selected');
                 }
             });
@@ -1890,6 +1936,9 @@ var ListBox = /** @class */ (function (_super) {
                 else {
                     text = value;
                 }
+                if (typeof (text) === 'string') {
+                    text = text.split("\\").join("\\\\");
+                }
                 li = _this.list.querySelector('[data-value="' + text + '"]');
                 if (li) {
                     if (_this.selectionSettings.showCheckbox) {
@@ -2220,6 +2269,12 @@ var ListBox = /** @class */ (function (_super) {
     __decorate([
         Property('')
     ], ListBox.prototype, "height", void 0);
+    __decorate([
+        Property(true)
+    ], ListBox.prototype, "enabled", void 0);
+    __decorate([
+        Property(false)
+    ], ListBox.prototype, "enablePersistence", void 0);
     __decorate([
         Property(false)
     ], ListBox.prototype, "allowDragAndDrop", void 0);

package/src/mention/index.d.ts

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