@syncfusion/ej2-dropdowns 18.2.44-4568 → 18.2.44-4569

package/src/multi-select/multi-select.d.ts

@@ -729,6 +729,8 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      */
     onPropertyChanged(newProp: MultiSelectModel, oldProp: MultiSelectModel): void;
     private reInitializePoup;
+    private presentItemValue;
+    private addNonPresentItems;
     private updateVal;
     /**
      * Adds a new item to the multiselect popup list. By default, new item appends to the list as the last item,

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

@@ -1,22 +1,22 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    }
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__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;
-};
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__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;
+};
 /// <reference path='../drop-down-base/drop-down-base-model.d.ts'/>
 import { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-base';
 import { FieldSettings } from '../drop-down-base/drop-down-base';
@@ -433,7 +433,7 @@ var MultiSelect = /** @class */ (function (_super) {
             this.mainData = list;
             this.mainListCollection = this.liCollections;
         }
-        else if (!isNullOrUndefined(this.mainData) && this.mainData.length === 0) {
+        else if (isNullOrUndefined(this.mainData) || this.mainData.length === 0) {
             this.mainData = list;
         }
         if ((this.remoteCustomValue || list.length <= 0) && this.allowCustomValue && this.inputFocus && this.allowFiltering) {
@@ -2365,7 +2365,9 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.updateActionCompleteData = function (li, item) {
         if (this.value && this.value.indexOf(li.getAttribute('data-value')) > -1) {
             this.mainList = this.ulElement;
-            addClass([li], HIDE_LIST);
+            if (this.hideSelectedItem) {
+                addClass([li], HIDE_LIST);
+            }
         }
     };
     MultiSelect.prototype.updateAddItemList = function (list, itemCount) {
@@ -3294,28 +3296,63 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         this.renderPopup();
     };
+    MultiSelect.prototype.presentItemValue = function (ulElement) {
+        var valuecheck = [];
+        for (var i = 0; i < this.value.length; i++) {
+            var checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', this.value[i]);
+            if (!checkEle) {
+                valuecheck.push(this.value[i]);
+            }
+        }
+        return valuecheck;
+    };
+    ;
+    MultiSelect.prototype.addNonPresentItems = function (valuecheck, ulElement, list, event) {
+        var _this = this;
+        this.showSpinner();
+        this.dataSource.executeQuery(this.getForQuery(valuecheck)).then(function (e) {
+            _this.hideSpinner();
+            _this.addItem(e.result, list.length);
+            _this.updateActionList(ulElement, list, event);
+        });
+    };
+    ;
     MultiSelect.prototype.updateVal = function (newProp, oldProp, prop) {
         if (!this.list) {
             this.onLoadSelect();
         }
-        else if (!this.inputFocus) {
-            if (prop === 'text') {
-                this.initialTextUpdate();
-                newProp = this.value;
-            }
-            if (isNullOrUndefined(this.value) || this.value.length === 0) {
-                this.tempValues = oldProp;
+        else {
+            var valuecheck = [];
+            if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
+                valuecheck = this.presentItemValue(this.ulElement);
             }
-            this.initialValueUpdate();
-            if (this.mode !== 'Box') {
-                this.updateDelimView();
+            if (prop == 'value' && valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
+                && this.listData != null) {
+                this.mainData = null;
+                this.setDynValue = true;
+                this.addNonPresentItems(valuecheck, this.ulElement, this.listData);
             }
-            this.refreshInputHight();
-            this.refreshPlaceHolder();
-            if (this.mode !== 'CheckBox' && this.changeOnBlur) {
-                this.updateValueState(null, newProp, oldProp);
+            else {
+                if (prop === 'text') {
+                    this.initialTextUpdate();
+                    newProp = this.value;
+                }
+                if (isNullOrUndefined(this.value) || this.value.length === 0) {
+                    this.tempValues = oldProp;
+                }
+                this.initialValueUpdate();
+                if (this.mode !== 'Box' && !this.inputFocus) {
+                    this.updateDelimView();
+                }
+                if (!this.inputFocus) {
+                    this.refreshInputHight();
+                }
+                this.refreshPlaceHolder();
+                if (this.mode !== 'CheckBox' && this.changeOnBlur) {
+                    this.updateValueState(null, newProp, oldProp);
+                }
+                this.checkPlaceholderSize();
             }
-            this.checkPlaceholderSize();
         }
         if (!this.changeOnBlur) {
             this.updateValueState(null, newProp, oldProp);

package/styles/_all.scss

@@ -1,3 +1,3 @@
-@import 'drop-down-base/all.scss';
-@import 'drop-down-list/all.scss';
-@import 'drop-down-tree/all.scss';
+@import 'drop-down-base/all.scss';
+@import 'drop-down-list/all.scss';
+@import 'drop-down-tree/all.scss';

package/styles/auto-complete/_bootstrap-dark-definition.scss

@@ -1,3 +1,3 @@
-//default 
-//undefined
-//enddefault
+//default 
+//undefined
+//enddefault

package/styles/auto-complete/_bootstrap4-definition.scss

@@ -1,11 +1,11 @@
-//default
-
-.e-input-group.e-ddl .e-control.e-autocomplete~.e-ddl-icon {
-  font-size: 8px;
-}
-
-.e-bigger .e-input-group.e-ddl .e-control.e-autocomplete~.e-ddl-icon {
-  font-size: 10px;
-}
-
-//enddefault
+//default
+
+.e-input-group.e-ddl .e-control.e-autocomplete~.e-ddl-icon {
+  font-size: 8px;
+}
+
+.e-bigger .e-input-group.e-ddl .e-control.e-autocomplete~.e-ddl-icon {
+  font-size: 10px;
+}
+
+//enddefault

package/styles/auto-complete/_fabric-dark-definition.scss

@@ -1,2 +1,2 @@
-//default 
-//enddefault
+//default 
+//enddefault

package/styles/auto-complete/_highcontrast-light-definition.scss

@@ -1,2 +1,2 @@
-//default 
-//enddefault
+//default 
+//enddefault

package/styles/auto-complete/_material-dark-definition.scss

@@ -1,2 +1,2 @@
-//default 
-//enddefault
+//default 
+//enddefault

package/styles/bootstrap-dark.css

@@ -1177,7 +1177,7 @@ ejs-dropdownlist {
   box-sizing: border-box;
   cursor: text;
   line-height: normal;
-  min-height: 32px;
+  min-height: 34px;
   padding: 0 32px 0 2px;
   position: relative;
   -webkit-user-select: none;
@@ -1398,7 +1398,7 @@ ejs-dropdownlist {
 .e-multi-select-wrapper .e-delim-values {
   font-family: inherit;
   font-size: 14px;
-  line-height: 32px;
+  line-height: 35px;
   max-width: 100%;
   padding-left: 6px;
   padding-right: 6px;
@@ -1406,7 +1406,7 @@ ejs-dropdownlist {
 }
 
 .e-bigger .e-multi-select-wrapper .e-delim-values {
-  line-height: 36px;
+  line-height: 39px;
 }
 
 .e-multi-select-list-wrapper .e-hide-listitem {
@@ -1670,7 +1670,7 @@ ejs-dropdownlist {
 }
 
 .e-bigger .e-checkbox .e-multi-select-wrapper .e-delim-values {
-  line-height: 36px;
+  line-height: 39px;
 }
 
 .e-checkbox .e-multi-select-wrapper .e-delim-values .e-remain {
@@ -1714,13 +1714,13 @@ ejs-multiselect {
 }
 
 .e-small .e-multi-select-wrapper input[type='text'] {
-  height: 26px;
-  min-height: 26px;
+  height: 28px;
+  min-height: 28px;
 }
 
 .e-small .e-multi-select-wrapper .e-delim-values {
   font-size: 13px;
-  line-height: 26px;
+  line-height: 28px;
 }
 
 .e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker {
@@ -1741,13 +1741,13 @@ ejs-multiselect {
 }
 
 .e-bigger.e-small .e-multi-select-wrapper input[type='text'] {
-  height: 34px;
-  min-height: 34px;
+  height: 35px;
+  min-height: 35px;
 }
 
 .e-small.e-bigger .e-multi-select-wrapper .e-delim-values {
   font-size: 14px;
-  line-height: 34px;
+  line-height: 35px;
 }
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker {
@@ -1793,7 +1793,6 @@ ejs-multiselect {
 }
 
 .e-multi-select-wrapper .e-chips > .e-chipcontent {
-  -webkit-text-fill-color: #f0f0f0;
   color: #f0f0f0;
   font-family: inherit;
   font-size: 15px;
@@ -1810,7 +1809,7 @@ ejs-multiselect {
 .e-multi-select-wrapper .e-chips {
   background-color: #414141;
   border-radius: 4px;
-  height: 28px;
+  height: 30px;
 }
 
 .e-multi-select-wrapper .e-chips:hover {
@@ -1822,7 +1821,6 @@ ejs-multiselect {
 }
 
 .e-multi-select-wrapper .e-chips .e-chips-close::before {
-  -webkit-text-fill-color: #f0f0f0;
   color: #f0f0f0;
   font-size: 10px;
 }
@@ -1945,7 +1943,6 @@ ejs-multiselect {
 }
 
 .e-multi-select-wrapper .e-delim-values {
-  -webkit-text-fill-color: #f0f0f0;
   color: #f0f0f0;
 }
 
@@ -1954,7 +1951,7 @@ ejs-multiselect {
 }
 
 .e-small .e-multi-select-wrapper .e-chips {
-  height: 22px;
+  height: 24px;
 }
 
 .e-small .e-multi-select-wrapper .e-chips > .e-chipcontent {
@@ -1970,7 +1967,7 @@ ejs-multiselect {
 }
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips {
-  height: 28px;
+  height: 30px;
 }
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips > .e-chipcontent {

package/styles/bootstrap.css

@@ -1397,7 +1397,7 @@ ejs-dropdownlist {
 .e-multi-select-wrapper .e-delim-values {
   font-family: inherit;
   font-size: 14px;
-  line-height: 32px;
+  line-height: 35px;
   max-width: 100%;
   padding-left: 6px;
   padding-right: 6px;
@@ -1405,7 +1405,7 @@ ejs-dropdownlist {
 }
 
 .e-bigger .e-multi-select-wrapper .e-delim-values {
-  line-height: 36px;
+  line-height: 39px;
 }
 
 .e-multi-select-list-wrapper .e-hide-listitem {
@@ -1669,7 +1669,7 @@ ejs-dropdownlist {
 }
 
 .e-bigger .e-checkbox .e-multi-select-wrapper .e-delim-values {
-  line-height: 36px;
+  line-height: 39px;
 }
 
 .e-checkbox .e-multi-select-wrapper .e-delim-values .e-remain {
@@ -1713,13 +1713,13 @@ ejs-multiselect {
 }
 
 .e-small .e-multi-select-wrapper input[type='text'] {
-  height: 26px;
-  min-height: 26px;
+  height: 28px;
+  min-height: 28px;
 }
 
 .e-small .e-multi-select-wrapper .e-delim-values {
   font-size: 13px;
-  line-height: 26px;
+  line-height: 28px;
 }
 
 .e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker {
@@ -1740,13 +1740,13 @@ ejs-multiselect {
 }
 
 .e-bigger.e-small .e-multi-select-wrapper input[type='text'] {
-  height: 34px;
-  min-height: 34px;
+  height: 35px;
+  min-height: 35px;
 }
 
 .e-small.e-bigger .e-multi-select-wrapper .e-delim-values {
   font-size: 14px;
-  line-height: 34px;
+  line-height: 35px;
 }
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker {
@@ -1792,7 +1792,6 @@ ejs-multiselect {
 }
 
 .e-multi-select-wrapper .e-chips > .e-chipcontent {
-  -webkit-text-fill-color: #333;
   color: #333;
   font-family: inherit;
   font-size: 15px;
@@ -1809,7 +1808,7 @@ ejs-multiselect {
 .e-multi-select-wrapper .e-chips {
   background-color: #e6e6e6;
   border-radius: 4px;
-  height: 28px;
+  height: 30px;
 }
 
 .e-multi-select-wrapper .e-chips:hover {
@@ -1821,7 +1820,6 @@ ejs-multiselect {
 }
 
 .e-multi-select-wrapper .e-chips .e-chips-close::before {
-  -webkit-text-fill-color: #333;
   color: #333;
   font-size: 10px;
 }
@@ -1944,7 +1942,6 @@ ejs-multiselect {
 }
 
 .e-multi-select-wrapper .e-delim-values {
-  -webkit-text-fill-color: #333;
   color: #333;
 }
 
@@ -1953,7 +1950,7 @@ ejs-multiselect {
 }
 
 .e-small .e-multi-select-wrapper .e-chips {
-  height: 22px;
+  height: 24px;
 }
 
 .e-small .e-multi-select-wrapper .e-chips > .e-chipcontent {
@@ -1969,7 +1966,7 @@ ejs-multiselect {
 }
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips {
-  height: 28px;
+  height: 30px;
 }
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips > .e-chipcontent {

package/styles/bootstrap4.css

@@ -1825,7 +1825,7 @@ ejs-dropdownlist {
 }
 
 .e-bigger .e-checkbox .e-multi-select-wrapper .e-delim-values {
-  line-height: 36px;
+  line-height: 39px;
 }
 
 .e-checkbox .e-multi-select-wrapper .e-delim-values .e-remain {
@@ -1865,17 +1865,17 @@ ejs-multiselect {
 }
 
 .e-small .e-multi-select-wrapper {
-  min-height: 22px;
+  min-height: 24px;
 }
 
 .e-small .e-multi-select-wrapper input[type='text'] {
-  height: 22px;
-  min-height: 22px;
+  height: 24px;
+  min-height: 24px;
 }
 
 .e-small .e-multi-select-wrapper .e-delim-values {
   font-size: 12px;
-  line-height: 22px;
+  line-height: 24px;
 }
 
 .e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker {
@@ -1956,7 +1956,6 @@ ejs-multiselect {
 }
 
 .e-multi-select-wrapper .e-chips > .e-chipcontent {
-  -webkit-text-fill-color: #fff;
   color: #fff;
   font-family: inherit;
   font-size: 14px;
@@ -1985,7 +1984,6 @@ ejs-multiselect {
 }
 
 .e-multi-select-wrapper .e-chips .e-chips-close::before {
-  -webkit-text-fill-color: #fff;
   color: #fff;
   font-size: 8px;
 }
@@ -2124,9 +2122,7 @@ ejs-multiselect {
 }
 
 .e-multi-select-wrapper .e-delim-values {
-  -webkit-text-fill-color: #fff;
   color: #fff;
-  -webkit-text-fill-color: #212529;
   color: #212529;
 }
 
@@ -2135,7 +2131,7 @@ ejs-multiselect {
 }
 
 .e-small .e-multi-select-wrapper .e-chips {
-  height: 20px;
+  height: 22px;
 }
 
 .e-small .e-multi-select-wrapper .e-chips > .e-chipcontent {

package/styles/combo-box/_bootstrap-dark-definition.scss

@@ -1,2 +1,2 @@
-//default 
-//enddefault
+//default 
+//enddefault

package/styles/combo-box/_bootstrap4-definition.scss

@@ -1,11 +1,11 @@
-//default
-
-.e-input-group.e-ddl .e-control.e-combobox~.e-ddl-icon {
-  font-size: 8px;
-}
-
-.e-bigger .e-input-group.e-ddl .e-control.e-combobox~.e-ddl-icon {
-  font-size: 10px;
-}
-
-//enddefault
+//default
+
+.e-input-group.e-ddl .e-control.e-combobox~.e-ddl-icon {
+  font-size: 8px;
+}
+
+.e-bigger .e-input-group.e-ddl .e-control.e-combobox~.e-ddl-icon {
+  font-size: 10px;
+}
+
+//enddefault

package/styles/combo-box/_fabric-dark-definition.scss

@@ -1,2 +1,2 @@
-//default 
-//enddefault
+//default 
+//enddefault

package/styles/combo-box/_highcontrast-light-definition.scss

@@ -1,3 +1,3 @@
-//default 
-//undefined
-//enddefault
+//default 
+//undefined
+//enddefault

package/styles/combo-box/_material-dark-definition.scss

@@ -1,2 +1,2 @@
-//default 
-//enddefault
+//default 
+//enddefault

package/styles/drop-down-base/_all.scss

@@ -1,2 +1,2 @@
-@import 'layout.scss';
-@import 'theme.scss';
+@import 'layout.scss';
+@import 'theme.scss';