@syncfusion/ej2-dropdowns 19.3.43 → 19.3.47

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.3.43
+*  version : 19.3.47
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-dropdowns@*",
-  "_id": "@syncfusion/ej2-dropdowns@18.30.0",
+  "_id": "@syncfusion/ej2-dropdowns@19.3.46",
   "_inBundle": false,
-  "_integrity": "sha512-HbSN59eHZPqqbgLc9V7BuGet6UvGMAugqPdluPOQHM8b24T5nW3LOo6eBUAgJBUlkCn5GNRgPfO7RzJ2uBBDtg==",
+  "_integrity": "sha512-1s/sRzEruRPBWzxdT4RnWeLpg8rERIFNMtTPG0BX9syh6Ke1IOV24+Rafjmjc3q0nZlA4/4dJfxmYQkqrDEa7g==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -33,8 +33,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-18.30.0.tgz",
-  "_shasum": "5ca64896701a7f48777b5cf629ed0038cf99a561",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-19.3.46.tgz",
+  "_shasum": "23c4b20999a8bbff002f3c6607dbd30afc4e020c",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -42,12 +42,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.3.43",
-    "@syncfusion/ej2-data": "~19.3.43",
-    "@syncfusion/ej2-inputs": "~19.3.43",
-    "@syncfusion/ej2-lists": "~19.3.43",
-    "@syncfusion/ej2-navigations": "~19.3.43",
-    "@syncfusion/ej2-popups": "~19.3.43"
+    "@syncfusion/ej2-base": "~19.3.47",
+    "@syncfusion/ej2-data": "~19.3.47",
+    "@syncfusion/ej2-inputs": "~19.3.47",
+    "@syncfusion/ej2-lists": "~19.3.45",
+    "@syncfusion/ej2-navigations": "~19.3.46",
+    "@syncfusion/ej2-popups": "~19.3.47"
   },
   "deprecated": false,
   "description": "Essential JS 2 DropDown Components",
@@ -72,6 +72,6 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "19.3.43",
+  "version": "19.3.47",
   "sideEffects": false
 }

package/src/combo-box/combo-box.js

@@ -583,6 +583,7 @@ var ComboBox = /** @class */ (function (_super) {
                         EventHandler.add(this.inputElement, 'keyup', this.onFilterUp, this);
                         EventHandler.add(this.inputElement, 'keydown', this.onFilterDown, this);
                     }
+                    this.setReadOnly();
                     break;
                 case 'allowFiltering':
                     this.setSearchBox();

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

@@ -528,6 +528,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     onPropertyChanged(newProp: DropDownListModel, oldProp: DropDownListModel): void;
     private checkValidLi;
     private setSelectionData;
+    protected setReadOnly(): void;
     private setCssClass;
     /**
      * Return the module name of this component.

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

@@ -2068,6 +2068,7 @@ var DropDownList = /** @class */ (function (_super) {
         });
         prepend([this.hiddenElement], this.inputWrapper.container);
         this.validationAttribute(this.element, this.hiddenElement);
+        this.setReadOnly();
         this.setFields();
         this.inputWrapper.container.style.width = formatUnit(this.width);
         this.inputWrapper.container.classList.add('e-ddl');
@@ -2195,6 +2196,8 @@ var DropDownList = /** @class */ (function (_super) {
             this.actionData = this.actionCompleteData;
         }
         else if (this.allowFiltering && newProp.query && !isNullOrUndefined(Object.keys(newProp.query))) {
+            this.actionCompleteData = this.getModuleName() === 'combobox' ?
+                { ulElement: null, list: null, isUpdated: false } : this.actionCompleteData;
             this.actionData = this.actionCompleteData;
         }
     };
@@ -2262,6 +2265,7 @@ var DropDownList = /** @class */ (function (_super) {
                     if (this.getModuleName() !== 'dropdownlist') {
                         Input.setReadonly(newProp.readonly, this.inputElement);
                     }
+                    this.setReadOnly();
                     break;
                 case 'cssClass':
                     this.setCssClass(newProp.cssClass, oldProp.cssClass);
@@ -2421,6 +2425,14 @@ var DropDownList = /** @class */ (function (_super) {
             }
         };
     };
+    DropDownList.prototype.setReadOnly = function () {
+        if (this.readonly) {
+            addClass([this.inputWrapper.container], ['e-readonly']);
+        }
+        else {
+            removeClass([this.inputWrapper.container], ['e-readonly']);
+        }
+    };
     DropDownList.prototype.setCssClass = function (newClass, oldClass) {
         if (!isNullOrUndefined(oldClass)) {
             oldClass = (oldClass.replace(/\s+/g, ' ')).trim();

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

@@ -289,9 +289,9 @@ var DropDownTree = /** @class */ (function (_super) {
         this.createClearIcon();
         this.inputWrapper.classList.add(DROPDOWNTREE);
         this.setElementWidth(this.width);
-        this.setAttributes();
         this.updateDataAttribute();
         this.setHTMLAttributes();
+        this.setAttributes();
         this.popupDiv = this.createElement('div', { className: CONTENT, attrs: { 'tabindex': '0' } });
         this.popupDiv.classList.add(DROPDOWN);
         this.tree = this.createElement('div', { id: this.element.id + '_tree' });
@@ -579,9 +579,6 @@ var DropDownTree = /** @class */ (function (_super) {
             this.isClearButtonClick = false;
             return;
         }
-        if (!this.wrapText && e.target.classList.contains(CHIP_CLOSE)) {
-            this.removeChip(e);
-        }
         if (this.isPopupOpen) {
             this.hidePopup();
         }
@@ -813,11 +810,18 @@ var DropDownTree = /** @class */ (function (_super) {
                 switch (e.action) {
                     case 'escape':
                     case 'altUp':
+                        if (_this.isPopupOpen) {
+                            _this.hidePopup();
+                        }
+                        break;
                     case 'shiftTab':
                     case 'tab':
                         if (_this.isPopupOpen) {
                             _this.hidePopup();
                         }
+                        if (_this.inputFocus) {
+                            _this.onFocusOut();
+                        }
                         break;
                     case 'altDown':
                         if (!_this.isPopupOpen) {
@@ -1188,7 +1192,7 @@ var DropDownTree = /** @class */ (function (_super) {
         }
     };
     DropDownTree.prototype.setAttributes = function () {
-        this.element.removeAttribute('tabindex');
+        this.inputEle.setAttribute('tabindex', '-1');
         var id = this.element.getAttribute('id');
         this.hiddenElement.id = id + '_hidden';
         this.inputWrapper.setAttribute('tabindex', '0');

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

@@ -678,6 +678,10 @@ export interface DropEventArgs {
      * Illustrates whether the current action needs to be prevented or not.
      */
     cancel?: boolean;
+    /**
+     * Illustrates whether the drag all action needs to be prevented or not.
+     */
+    isDragAll?: boolean | null;
     /**
      * Returns the selected list items.
      */

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

@@ -438,6 +438,9 @@ var ListBox = /** @class */ (function (_super) {
             args.items = this.getDataByValues([dragValue]);
         }
         this.trigger('beforeDrop', args);
+        if (args.isDragAll !== null) {
+            this.allowDragAll = args.isDragAll;
+        }
     };
     ListBox.prototype.dragEnd = function (args) {
         var _this = this;

package/src/multi-select/multi-select.js

@@ -2388,6 +2388,7 @@ var MultiSelect = /** @class */ (function (_super) {
                         setValue(this.fields.value, value, newValue);
                         var noDataEle = this.popupWrapper.querySelector('.' + dropDownBaseClasses.noData);
                         this.addItem(newValue, indexItem);
+                        element = element ? element : this.findListElement(this.hideSelectedItem ? this.ulElement : this.list, 'li', 'data-value', value);
                         if (this.popupWrapper.contains(noDataEle)) {
                             this.list.setAttribute('style', noDataEle.getAttribute('style'));
                             this.popupWrapper.replaceChild(this.list, noDataEle);
@@ -2436,6 +2437,10 @@ var MultiSelect = /** @class */ (function (_super) {
             this.popupObj = null;
             this.renderPopup();
         }
+        else if (this.allowCustomValue) {
+            this.list = list;
+            this.mainList = this.ulElement = list.querySelector('ul');
+        }
     };
     MultiSelect.prototype.updateDataList = function () {
         if (this.mainList && this.ulElement && this.mainList.childElementCount < this.ulElement.childElementCount) {

package/styles/auto-complete/bootstrap4.css

@@ -68,6 +68,11 @@
   background: transparent;
 }
 
+.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+  background: #e9ecef;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,

package/styles/auto-complete/bootstrap5-dark.css

@@ -64,6 +64,11 @@
   background: transparent;
 }
 
+.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+  background: #343a40;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,

package/styles/auto-complete/bootstrap5.css

@@ -64,6 +64,11 @@
   background: transparent;
 }
 
+.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+  background: #e9ecef;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,

package/styles/bootstrap4.css

@@ -449,6 +449,11 @@
   background: transparent;
 }
 
+.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+  background: #e9ecef;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,

package/styles/bootstrap5-dark.css

@@ -455,6 +455,11 @@
   background: transparent;
 }
 
+.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+  background: #343a40;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,

package/styles/bootstrap5.css

@@ -455,6 +455,11 @@
   background: transparent;
 }
 
+.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+  background: #e9ecef;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,

package/styles/combo-box/bootstrap4.css

@@ -68,6 +68,11 @@
   background: transparent;
 }
 
+.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+  background: #e9ecef;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,

package/styles/combo-box/bootstrap5-dark.css

@@ -64,6 +64,11 @@
   background: transparent;
 }
 
+.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+  background: #343a40;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,

package/styles/combo-box/bootstrap5.css

@@ -64,6 +64,11 @@
   background: transparent;
 }
 
+.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+  background: #e9ecef;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,

package/styles/drop-down-list/_bootstrap4-definition.scss

@@ -23,6 +23,7 @@ $ddl-back-icon-margin: -2px 10px 0 -54px !default;
 $ddl-back-icon-padding: 0 !default;
 $ddl-icon-color: rgba($black, .5) !default;
 $ddl-icon-hover-color: rgba($black, .4) !default;
+$ddl-readonly-bg-color: $gray-200 !default;
 
 // small size
 $ddl-small-list-font-size: 13px !default;
@@ -106,6 +107,11 @@ $ddl-bigger-small-list-font-size: 14px !default;
     background: transparent;
   }
 
+  .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+  .e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+    background: $ddl-readonly-bg-color;
+  }
+
   .e-input-group:not(.e-disabled) .e-control#{&}.e-dropdownlist ~ .e-ddl-icon:active,
   .e-input-group:not(.e-disabled) .e-control#{&}.e-dropdownlist ~ .e-ddl-icon:hover,
   .e-control#{&}.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,

package/styles/drop-down-list/_bootstrap5-definition.scss

@@ -15,6 +15,7 @@ $ddl-clear-icon-margin-right: 66px !default;
 $ddl-back-icon-margin: 0 10px 0 -52px !default;
 $ddl-back-icon-padding: 0 8px !default;
 $ddl-popup-shadow: $shadow-lg !default;
+$ddl-readonly-bg-color: $content-bg-color-alt2 !default;
 
 // Small Size
 $ddl-small-list-font-size: $text-xs !default;
@@ -106,6 +107,11 @@ $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
     background: transparent;
   }
 
+  .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+  .e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+    background: $ddl-readonly-bg-color;
+  }
+
   .e-input-group:not(.e-disabled) .e-control#{&}.e-dropdownlist ~ .e-ddl-icon:active,
   .e-input-group:not(.e-disabled) .e-control#{&}.e-dropdownlist ~ .e-ddl-icon:hover,
   .e-control#{&}.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,

package/styles/drop-down-list/bootstrap4.css

@@ -117,6 +117,11 @@
   background: transparent;
 }
 
+.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+  background: #e9ecef;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,

package/styles/drop-down-list/bootstrap5-dark.css

@@ -121,6 +121,11 @@
   background: transparent;
 }
 
+.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+  background: #343a40;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,

package/styles/drop-down-list/bootstrap5.css

@@ -121,6 +121,11 @@
   background: transparent;
 }
 
+.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+  background: #e9ecef;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,