@syncfusion/ej2-dropdowns 18.1.57 → 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';
@@ -415,6 +415,9 @@ var MultiSelect = /** @class */ (function (_super) {
         else {
             this.updateActionList(ulElement, list, e);
         }
+        if (isBlazor() && this.isServerRendered && this.allowFiltering && this.mode === 'CheckBox') {
+            this.removeFocus();
+        }
         if (isBlazor() && this.isServerRendered && this.isDynamicDataChange && this.value && this.value.length > 0) {
             this.updateVal(this.value, null, 'value');
             this.addValidInputClass();
@@ -430,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) {
@@ -774,8 +777,16 @@ var MultiSelect = /** @class */ (function (_super) {
             if (this.mode !== 'CheckBox') {
                 this.inputElement.focus();
             }
+            else if ((this.floatLabelType === 'Auto' &&
+                ((this.overAllWrapper.classList.contains('e-outline')) || (this.overAllWrapper.classList.contains('e-filled'))))) {
+                addClass([this.overAllWrapper], 'e-valid-input');
+            }
             return;
         }
+        if (this.floatLabelType === 'Auto' && (this.overAllWrapper.classList.contains('e-outline')) && this.mode === 'CheckBox' &&
+            ((isNullOrUndefined(this.value)) || this.value.length === 0)) {
+            removeClass([this.overAllWrapper], 'e-valid-input');
+        }
         if (this.mode === 'CheckBox' && Browser.isIE && !isNullOrUndefined(eve) && !isDocClickFromCheck) {
             this.inputFocus = false;
             this.overAllWrapper.classList.remove(FOCUS);
@@ -826,6 +837,11 @@ var MultiSelect = /** @class */ (function (_super) {
                 parseInt(window.getComputedStyle(this.dropIcon).marginRight, 10);
             this.setPlaceholderSize(downIconWidth);
         }
+        else {
+            if (!isNullOrUndefined(this.dropIcon)) {
+                this.setPlaceholderSize(this.showDropDownIcon ? this.dropIcon.offsetWidth : 0);
+            }
+        }
     };
     MultiSelect.prototype.setPlaceholderSize = function (downIconWidth) {
         if (isNullOrUndefined(this.value) || this.value.length === 0) {
@@ -1944,16 +1960,16 @@ var MultiSelect = /** @class */ (function (_super) {
                                     if (_this.itemTemplate && (isBlazor() && _this.isServerRendered)) {
                                         setTimeout(function () { _this.mainList = _this.ulElement; }, 0);
                                     }
-                                    else {
-                                        if (!(_this.mode !== 'CheckBox' && _this.allowFiltering && _this.targetElement().trim() !== '')) {
-                                            _this.mainList = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;
-                                        }
+                                    else if (!(_this.mode !== 'CheckBox' && (_this.allowFiltering || _this.allowCustomValue) &&
+                                        _this.targetElement().trim() !== '')) {
+                                        _this.mainList = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;
                                     }
                                 }
                                 _this.isFirstClick = true;
                             }
                             _this.popupObj.wireScrollEvents();
-                            if (!(_this.mode !== 'CheckBox' && _this.allowFiltering && _this.targetElement().trim() !== '')) {
+                            if (!(_this.mode !== 'CheckBox' && (_this.allowFiltering || _this.allowCustomValue) &&
+                                _this.targetElement().trim() !== '')) {
                                 _this.loadTemplate();
                             }
                             _this.setScrollPosition();
@@ -2349,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) {
@@ -2867,7 +2885,9 @@ var MultiSelect = /** @class */ (function (_super) {
                             var textArr = this.viewWrapper.innerHTML.split(this.delimiterChar);
                             textArr.pop();
                             this.viewWrapper.innerHTML = textArr.join(this.delimiterChar);
-                            remaining++;
+                            if (this.viewWrapper.innerHTML === '') {
+                                remaining++;
+                            }
                             wrapperleng = this.viewWrapper.offsetWidth;
                         }
                         break;
@@ -2983,7 +3003,7 @@ var MultiSelect = /** @class */ (function (_super) {
             'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide)' :
             'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)');
         if (this.value && this.value.length && this.isPopupOpen() && event && event.target
-            && closest(event.target, '.e-close-hooker')) {
+            && closest(event.target, '.e-close-hooker') && this.allowFiltering) {
             li = this.mainList.querySelectorAll(state ?
                 'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide)' :
                 'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)');
@@ -3276,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

@@ -730,13 +730,13 @@ ejs-dropdownlist {
   outline: none;
 }
 
-.e-ddt.e-icon-anim .e-ddt-icon::before {
-  transform: rotate(180deg);
+.e-ddt .e-ddt-icon::before {
+  transform: rotate(0deg);
   transition: transform 300ms ease;
 }
 
-.e-ddt .e-ddt-icon::before {
-  transform: rotate(0deg);
+.e-ddt.e-icon-anim .e-ddt-icon::before {
+  transform: rotate(180deg);
   transition: transform 300ms ease;
 }
 
@@ -759,10 +759,6 @@ ejs-dropdownlist {
   display: none;
 }
 
-.e-ddt.e-input-group.e-control-wrapper.e-input-focus input ~ label.e-float-text, .e-ddt.e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
-  top: 16px;
-}
-
 .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon {
   bottom: 0;
   position: absolute;
@@ -799,19 +795,22 @@ ejs-dropdownlist {
 
 .e-ddt .e-chips-wrapper .e-chips-close::before {
   font-size: 10px;
+  vertical-align: middle;
 }
 
 .e-ddt .e-chips-wrapper .e-chips {
   -ms-flex-align: center;
       align-items: center;
+  border-radius: 4px;
+  box-sizing: border-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   float: left;
   height: 28px;
   margin: 2px 1px;
-  max-width: 100%;
+  max-width: calc(100% - 2px);
   overflow: hidden;
-  padding: 0 0 0 10px;
+  padding: 0;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -819,22 +818,25 @@ ejs-dropdownlist {
 .e-ddt .e-chips-wrapper .e-chips > .e-chipcontent {
   max-width: 100%;
   overflow: hidden;
-  padding: 0 10px 0 0;
+  padding: 0 10px 0 10px;
   text-indent: 0;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
-  margin-right: 64px;
+.e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
+  margin-right: 32px;
+  max-width: calc(100% - 33px);
 }
 
-.e-ddt.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
+.e-ddt.e-show-clear .e-chips-wrapper .e-chips:last-child {
   margin-right: 32px;
+  max-width: calc(100% - 33px);
 }
 
-.e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
-  margin-right: 32px;
+.e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
+  margin-right: 64px;
+  max-width: calc(100% - 65px);
 }
 
 .e-ddt input[readonly],
@@ -850,9 +852,8 @@ ejs-dropdownlist {
 }
 
 .e-ddt.e-popup {
-  border: 1px solid;
+  border: 1px solid #414141;
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 0px rgba(0, 0, 0, 0.14), 0 3px 14px 0px rgba(0, 0, 0, 0.12);
-  margin-top: 2px;
   position: absolute;
 }
 
@@ -863,7 +864,7 @@ ejs-dropdownlist {
   line-height: 36px;
   overflow: hidden;
   position: relative;
-  text-indent: 39px;
+  text-indent: 38px;
   white-space: nowrap;
   width: 100%;
 }
@@ -873,7 +874,6 @@ ejs-dropdownlist {
 }
 
 .e-ddt.e-popup .e-selectall-parent .e-checkbox-wrapper {
-  margin-right: 10px;
   position: relative;
   text-indent: 0;
 }
@@ -881,10 +881,27 @@ ejs-dropdownlist {
 .e-ddt.e-popup .e-selectall-parent .e-all-text {
   font-family: inherit;
   font-size: 14px;
+  margin: 10px;
+}
+
+.e-ddt.e-popup .e-filter-wrap .e-input,
+.e-ddt.e-popup .e-filter-wrap .e-input:focus {
+  padding: 0 12px;
+}
+
+.e-ddt.e-popup .e-filter-wrap {
+  border: #414141;
+  border-top-width: 0;
+  display: block;
+  padding: 5px 8px;
+}
+
+.e-ddt.e-popup .e-filter-wrap {
+  border-bottom: 1px solid #484848;
 }
 
 .e-ddt.e-popup .e-filter-wrap .e-input-group {
-  padding: 0 10px;
+  margin-bottom: 0;
 }
 
 .e-ddt.e-popup .e-popup-content {
@@ -947,29 +964,26 @@ ejs-dropdownlist {
 
 .e-ddt.e-rtl .e-chips-wrapper .e-chips {
   float: right;
-  padding: 0 10px 0 0;
 }
 
-.e-ddt.e-rtl .e-chips-wrapper .e-chips > .e-chipcontent {
-  padding: 0 0 0 10px;
-}
-
-.e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
-  margin-left: 64px;
+.e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
+  margin-left: 32px;
   margin-right: 1px;
 }
 
-.e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
+.e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child {
   margin-left: 32px;
   margin-right: 1px;
 }
 
-.e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
-  margin-left: 32px;
+.e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
+  margin-left: 64px;
   margin-right: 1px;
 }
 
-.e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon {
+.e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon,
+.e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon,
+.e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon {
   left: 0;
   right: auto;
 }
@@ -978,16 +992,6 @@ ejs-dropdownlist {
   left: 32px;
 }
 
-.e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon {
-  left: 0;
-  right: auto;
-}
-
-.e-ddt.e-rtl.e-popup .e-selectall-parent .e-checkbox-wrapper {
-  margin-left: 10px;
-  margin-right: 0;
-}
-
 .e-ddt.e-rtl.e-popup .e-treeview .e-list-item .e-ul {
   padding: 0 14px 0 0;
 }
@@ -1015,24 +1019,27 @@ ejs-dropdownlist {
   min-height: 38px;
 }
 
-.e-bigger .e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
-.e-ddt.e-bigger.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
-  margin-right: 76px;
+.e-bigger .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
+.e-ddt.e-bigger.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
+  margin-right: 38px;
+  max-width: calc(100% - 39px);
 }
 
-.e-bigger .e-ddt.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child,
-.e-ddt.e-bigger.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
+.e-bigger .e-ddt.e-show-clear .e-chips-wrapper .e-chips:last-child,
+.e-ddt.e-bigger.e-show-clear .e-chips-wrapper .e-chips:last-child {
   margin-right: 38px;
+  max-width: calc(100% - 39px);
 }
 
-.e-bigger .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
-.e-ddt.e-bigger.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
-  margin-right: 38px;
+.e-bigger .e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
+.e-ddt.e-bigger.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
+  margin-right: 76px;
+  max-width: calc(100% - 77px);
 }
 
 .e-bigger .e-ddt.e-popup .e-selectall-parent,
 .e-ddt.e-bigger.e-popup .e-selectall-parent {
-  text-indent: 44px;
+  text-indent: 43px;
 }
 
 .e-bigger .e-ddt.e-popup .e-treeview .e-fullrow,
@@ -1040,21 +1047,21 @@ ejs-dropdownlist {
   height: 44px;
 }
 
-.e-bigger .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
-.e-ddt.e-bigger.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
-  margin-left: 76px;
+.e-bigger .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
+.e-ddt.e-bigger.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
+  margin-left: 38px;
   margin-right: 1px;
 }
 
-.e-bigger .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child,
-.e-ddt.e-bigger.e-rtl.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
+.e-bigger .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child,
+.e-ddt.e-bigger.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child {
   margin-left: 38px;
   margin-right: 1px;
 }
 
-.e-bigger .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
-.e-ddt.e-bigger.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
-  margin-left: 38px;
+.e-bigger .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
+.e-ddt.e-bigger.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
+  margin-left: 76px;
   margin-right: 1px;
 }
 
@@ -1066,7 +1073,6 @@ ejs-dropdownlist {
 
 .e-ddt .e-chips {
   background-color: #414141;
-  border-radius: 4px;
 }
 
 .e-ddt .e-chips .e-chips-close::before {
@@ -1099,7 +1105,7 @@ ejs-dropdownlist {
 }
 
 .e-ddt.e-popup .e-selectall-parent {
-  border-bottom: 1px solid #2a2a2a;
+  border-bottom-color: #484848;
 }
 
 .e-ddt.e-popup .e-selectall-parent .e-all-text {