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

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

@@ -4,7 +4,7 @@ var __extends = (this && this.__extends) || (function () {
             ({ __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; }
@@ -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) {
@@ -748,7 +748,9 @@ var MultiSelect = /** @class */ (function (_super) {
                 }
             }
         }
-        e.preventDefault();
+        if (!(this.targetElement() && this.targetElement() !== '')) { 
+            e.preventDefault();
+        }
     };
     MultiSelect.prototype.enable = function (state) {
         if (state) {
@@ -2365,7 +2367,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 +3298,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;
+        else {
+            var valuecheck = [];
+            if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
+                valuecheck = this.presentItemValue(this.ulElement);
             }
-            if (isNullOrUndefined(this.value) || this.value.length === 0) {
-                this.tempValues = oldProp;
+            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.initialValueUpdate();
-            if (this.mode !== 'Box') {
-                this.updateDelimView();
-            }
-            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';

package/styles/drop-down-base/_bootstrap-dark-definition.scss

@@ -1,64 +1,64 @@
-//default 
-$ddl-last-child-bottom-border: 0 !default;
-$ddl-default-font-family: inherit !default;
-$ddl-list-border-size: 1px !default;
-$ddl-default-header-font-color: $default-font-color !default;
-$ddl-list-bottom-border: $ddl-list-border-size !default;
-
-$ddl-list-border-color: $grey-44 !default;
-$ddl-list-font-family: inherit !default;
-$ddl-list-gradient-color: $grey-white !default;
-$ddl-list-bg-color: $grey-dark !default;
-$ddl-list-header-bg-color: $grey-white !default;
-$ddl-list-header-border-color: 1px $grey-base !default;
-$ddl-list-default-font-color: $grey-dark-font !default;
-$ddl-list-active-border-color: $grey-white !default;
-$ddl-list-active-font-color: $brand-primary-font !default;
-$ddl-list-active-bg-color: $brand-primary !default;
-$ddl-list-hover-bg-color: $grey-44 !default;
-$ddl-list-hover-border-color: $grey-white !default;
-$ddl-list-hover-font-color: $grey-dark-font !default;
-$ddl-nodata-font-color: $grey-d4 !default;
-$ddl-group-list-padding-left: 30px !default;
-$ddl-header-font-weight: normal !default;
-$ddl-list-header-padding-left: 20px !default;
-$ddl-list-font-size: 14px !default;
-$ddl-group-list-font-size: 12px !default;
-$ddl-list-header-font-color: lighten($brand-primary, 15%) !default;
-$ddl-list-text-indent: 20px !default;
-$ddl-list-rtl-padding-right: 0 !default;
-$ddl-list-line-height: 26px !default;
-$ddl-list-padding-right: 20px !default;
-$ddl-list-rtl-padding-left: 20px !default;
-$ddl-bigger-list-header-font-size: $ddl-list-font-size !default;
-$ddl-multi-column-border-width: 0 0 1px 0 !default;
-$ddl-multi-column-border-color: $grey-88 !default;
-
-// small size
-$ddl-small-icon-font-size: 14px !default;
-$ddl-small-line-height: 22px !default;
-$ddl-small-list-font-color: $grey-dark-font !default;
-$ddl-small-list-text-indent: 12px !default;
-
-// Touch Small
-
-$ddl-bigger-small-icon-font-size: 18px !default;
-$ddl-bigger-small-line-height: 34px !default;
-$ddl-bigger-small-list-font-color: $grey-dark-font !default;
-$ddl-bigger-small-list-text-indent: 16px !default;
-$ddl-bigger-small-list-header-font-size: 14px !default;
-
-@include export-module('dropdownbase-bootstrap-dark') {
-  .e-dropdownbase .e-list-item .e-list-icon {
-    padding: 0 10px 0 0;
-  }
-
-  .e-bigger .e-dropdownbase .e-list-item .e-list-icon,
-  .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
-    padding: 0 12px 0 0;
-  }
-
-  .e-small .e-dropdownbase .e-list-item .e-list-icon {
-    padding: 0 8px 0 0;
-  }
-}
+//default 
+$ddl-last-child-bottom-border: 0 !default;
+$ddl-default-font-family: inherit !default;
+$ddl-list-border-size: 1px !default;
+$ddl-default-header-font-color: $default-font-color !default;
+$ddl-list-bottom-border: $ddl-list-border-size !default;
+
+$ddl-list-border-color: $grey-44 !default;
+$ddl-list-font-family: inherit !default;
+$ddl-list-gradient-color: $grey-white !default;
+$ddl-list-bg-color: $grey-dark !default;
+$ddl-list-header-bg-color: $grey-white !default;
+$ddl-list-header-border-color: 1px $grey-base !default;
+$ddl-list-default-font-color: $grey-dark-font !default;
+$ddl-list-active-border-color: $grey-white !default;
+$ddl-list-active-font-color: $brand-primary-font !default;
+$ddl-list-active-bg-color: $brand-primary !default;
+$ddl-list-hover-bg-color: $grey-44 !default;
+$ddl-list-hover-border-color: $grey-white !default;
+$ddl-list-hover-font-color: $grey-dark-font !default;
+$ddl-nodata-font-color: $grey-d4 !default;
+$ddl-group-list-padding-left: 30px !default;
+$ddl-header-font-weight: normal !default;
+$ddl-list-header-padding-left: 20px !default;
+$ddl-list-font-size: 14px !default;
+$ddl-group-list-font-size: 12px !default;
+$ddl-list-header-font-color: lighten($brand-primary, 15%) !default;
+$ddl-list-text-indent: 20px !default;
+$ddl-list-rtl-padding-right: 0 !default;
+$ddl-list-line-height: 26px !default;
+$ddl-list-padding-right: 20px !default;
+$ddl-list-rtl-padding-left: 20px !default;
+$ddl-bigger-list-header-font-size: $ddl-list-font-size !default;
+$ddl-multi-column-border-width: 0 0 1px 0 !default;
+$ddl-multi-column-border-color: $grey-88 !default;
+
+// small size
+$ddl-small-icon-font-size: 14px !default;
+$ddl-small-line-height: 22px !default;
+$ddl-small-list-font-color: $grey-dark-font !default;
+$ddl-small-list-text-indent: 12px !default;
+
+// Touch Small
+
+$ddl-bigger-small-icon-font-size: 18px !default;
+$ddl-bigger-small-line-height: 34px !default;
+$ddl-bigger-small-list-font-color: $grey-dark-font !default;
+$ddl-bigger-small-list-text-indent: 16px !default;
+$ddl-bigger-small-list-header-font-size: 14px !default;
+
+@include export-module('dropdownbase-bootstrap-dark') {
+  .e-dropdownbase .e-list-item .e-list-icon {
+    padding: 0 10px 0 0;
+  }
+
+  .e-bigger .e-dropdownbase .e-list-item .e-list-icon,
+  .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
+    padding: 0 12px 0 0;
+  }
+
+  .e-small .e-dropdownbase .e-list-item .e-list-icon {
+    padding: 0 8px 0 0;
+  }
+}