@syncfusion/ej2-dropdowns 32.2.9 → 33.1.44

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

@@ -1434,7 +1434,15 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.setPlaceholderSize = function (downIconWidth) {
         if (isNullOrUndefined(this.value) || this.value.length === 0) {
             if (this.dropIcon.offsetWidth !== 0) {
-                this.searchWrapper.style.width = ('calc(100% - ' + (downIconWidth + 10)) + 'px';
+                var totalIconWidth = downIconWidth + 10;
+                if (this.showClearButton && this.overAllClear) {
+                    var display = this.overAllClear.style.display;
+                    this.overAllClear.style.display = 'block';
+                    var clearWidth = this.overAllClear.offsetWidth;
+                    totalIconWidth += clearWidth;
+                    this.overAllClear.style.display = display;
+                }
+                this.searchWrapper.style.width = 'calc(100% - ' + totalIconWidth + 'px)';
             }
             else {
                 addClass([this.searchWrapper], CUSTOM_WIDTH);
@@ -2827,10 +2835,12 @@ var MultiSelect = /** @class */ (function (_super) {
             if (!isNullOrUndefined(this.chipCollectionWrapper)) {
                 (this.chipCollectionWrapper.style.display = '');
             }
-            if (this.mode === 'Delimiter' || this.mode === 'CheckBox') {
+            if (this.mode === 'Delimiter' || (this.mode === 'CheckBox' && !this.isSelectAllClicked)) {
                 this.showDelimWrapper();
             }
-            this.showOverAllClear();
+            if (!this.isSelectAllClicked) {
+                this.showOverAllClear();
+            }
         }
         else {
             if (!isNullOrUndefined(this.chipCollectionWrapper)) {
@@ -2873,7 +2883,9 @@ var MultiSelect = /** @class */ (function (_super) {
                 temp = this.getOverflowVal(this.value.length - 1);
                 data += temp;
                 temp = this.viewWrapper.innerHTML;
-                this.updateWrapperText(this.viewWrapper, data);
+                if (!this.isSelectAllClicked) {
+                    this.updateWrapperText(this.viewWrapper, data);
+                }
             }
             if (this.enableVirtualization && this.mode === 'CheckBox') {
                 var currentText = [];
@@ -4341,6 +4353,7 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.onMouseClick = function (e) {
         var _this = this;
+        this.isSelectAllClicked = false;
         if (!this.isClearAllItem) {
             this.keyCode = null;
             this.scrollFocusStatus = false;
@@ -4419,7 +4432,7 @@ var MultiSelect = /** @class */ (function (_super) {
                     }
                     else {
                         e.preventDefault();
-                        if (this.value.length === this.listData.length && this.isPopupOpen()) {
+                        if (this.mode !== 'CheckBox' && this.hideSelectedItem && this.value.length === this.listData.length && this.isPopupOpen()) {
                             this.hidePopup(e);
                         }
                     }
@@ -4757,6 +4770,9 @@ var MultiSelect = /** @class */ (function (_super) {
             var remainCompildTemp = remainContent.replace('${count}', this.value.length.toString());
             raminElement.innerText = remainCompildTemp;
             this.viewWrapper.appendChild(raminElement);
+            if (this.isSelectAllClicked) {
+                this.showOverAllClear();
+            }
             this.renderReactTemplates();
             var remainSize = raminElement.offsetWidth;
             remove(raminElement);
@@ -5078,9 +5094,22 @@ var MultiSelect = /** @class */ (function (_super) {
                     index++;
                 }
                 if (length > 50) {
+                    createSpinner({ target: this.filterParent, width: Browser.isDevice ? '16px' : '14px' }, this.createElement);
+                    showSpinner(this.filterParent);
+                    if (this.popupObj && this.filterParent) {
+                        [this.popupObj.element.querySelector('.e-content'), this.popupObj.element.querySelector('.e-selectall-parent'), this.filterParent].forEach(function (el) { return el && (el.style.opacity = '0.5'); });
+                        this.filterParent.querySelector('.e-input').setAttribute('readonly', 'true');
+                        this.filterParent.style.cursor = 'progress';
+                    }
                     setTimeout(function () {
-                        if (_this.virtualSelectAllData && _this.virtualSelectAllData.length > 0) {
-                            _this.virtualSelectAllData.map(function (obj) {
+                        var dataArray = _this.virtualSelectAllData;
+                        var batchSize = 500;
+                        var currentIndex = 0;
+                        var processBatch = function () {
+                            var endIndex = Math.min(currentIndex + batchSize, dataArray.length);
+                            var batch = dataArray.slice(currentIndex, endIndex);
+                            // Use map on the batch
+                            batch.map(function (obj) {
                                 if (_this.value && obj[_this.fields.value] != null && Array.isArray(_this.value) &&
                                     ((!_this.allowObjectBinding && _this.value.indexOf(obj[_this.fields.value]) < 0) ||
                                         (_this.allowObjectBinding && !_this.isObjectInArray(obj[_this.fields.value], _this.value)))) {
@@ -5089,21 +5118,34 @@ var MultiSelect = /** @class */ (function (_super) {
                                     _this.dispatchSelect(value, event, null, false, length, obj, text);
                                 }
                             });
-                        }
-                        _this.updatedataValueItems(event);
-                        _this.isSelectAllLoop = false;
-                        if (!_this.changeOnBlur) {
-                            _this.updateValueState(event, _this.value, _this.tempValues);
-                            _this.isSelectAll = _this.isSelectAll ? !_this.isSelectAll : _this.isSelectAll;
-                        }
-                        _this.updateHiddenElement(true);
-                        if (_this.popupWrapper && li[index - 1] && li[index - 1].classList.contains('e-item-focus')) {
-                            var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
-                            if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
-                                li[index - 1].classList.remove('e-item-focus');
+                            currentIndex = endIndex;
+                            if (currentIndex < dataArray.length) {
+                                requestAnimationFrame(processBatch);
                             }
-                        }
-                        _this.checkSelectAll();
+                            else {
+                                _this.updatedataValueItems(event);
+                                _this.isSelectAllLoop = false;
+                                if (!_this.changeOnBlur) {
+                                    _this.updateValueState(event, _this.value, _this.tempValues);
+                                    _this.isSelectAll = _this.isSelectAll ? !_this.isSelectAll : _this.isSelectAll;
+                                }
+                                _this.updateHiddenElement(true);
+                                if (_this.popupWrapper && li[index - 1] && li[index - 1].classList.contains('e-item-focus')) {
+                                    var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
+                                    if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
+                                        li[index - 1].classList.remove('e-item-focus');
+                                    }
+                                }
+                                _this.checkSelectAll();
+                                hideSpinner(_this.filterParent);
+                                if (_this.popupObj && _this.filterParent) {
+                                    [_this.popupObj.element.querySelector('.e-content'), _this.popupObj.element.querySelector('.e-selectall-parent'), _this.filterParent].forEach(function (el) { return el && (el.style.opacity = ''); });
+                                    _this.filterParent.style.cursor = '';
+                                    _this.filterParent.querySelector('.e-input').removeAttribute('readonly');
+                                }
+                            }
+                        };
+                        processBatch();
                     }, 0);
                 }
                 else if (this.virtualSelectAllData && this.virtualSelectAllData.length > 0) {
@@ -5117,25 +5159,60 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         else {
             if (this.virtualSelectAllData && this.virtualSelectAllData.length > 0) {
-                this.virtualSelectAllData.map(function (obj) {
-                    _this.virtualSelectAll = true;
-                    _this.removeValue(_this.value[index], event, _this.value.length - index);
-                });
-            }
-            this.updatedataValueItems(event);
-            if (!this.changeOnBlur) {
-                this.updateValueState(event, this.value, this.tempValues);
-                this.isSelectAll = this.isSelectAll ? !this.isSelectAll : this.isSelectAll;
-            }
-            this.updateHiddenElement();
-            this.setProperties({ value: [] }, true);
-            this.selectedListData = [];
-            this.virtualSelectAll = false;
-            if (!isNullOrUndefined(this.viewPortInfo.startIndex) && !isNullOrUndefined(this.viewPortInfo.endIndex)) {
-                this.notify('setCurrentViewDataAsync', {
-                    component: this.getModuleName(),
-                    module: 'VirtualScroll'
-                });
+                var dataArray_1 = this.virtualSelectAllData;
+                var batchSize_1 = 500;
+                var currentIndex_1 = 0;
+                this.isProcessingVirtualSelectAll = true;
+                createSpinner({ target: this.filterParent, width: Browser.isDevice ? '16px' : '14px' }, this.createElement);
+                showSpinner(this.filterParent);
+                if (this.popupObj && this.filterParent) {
+                    [this.popupObj.element.querySelector('.e-content'), this.popupObj.element.querySelector('.e-selectall-parent'), this.filterParent].forEach(function (el) { return el && (el.style.opacity = '0.5'); });
+                    this.filterParent.querySelector('.e-input').setAttribute('readonly', 'true');
+                    this.filterParent.style.cursor = 'progress';
+                }
+                var processBatch_1 = function () {
+                    var endIndex = Math.min(currentIndex_1 + batchSize_1, dataArray_1.length);
+                    var batch = dataArray_1.slice(currentIndex_1, endIndex);
+                    // Use map on the batch
+                    batch.map(function (obj) {
+                        _this.virtualSelectAll = true;
+                        // eslint-disable-next-line security/detect-object-injection
+                        _this.removeValue(_this.value[index], event, _this.value.length - index);
+                    });
+                    currentIndex_1 = endIndex;
+                    if (currentIndex_1 < dataArray_1.length) {
+                        requestAnimationFrame(processBatch_1);
+                    }
+                    else {
+                        // All batches completed
+                        _this.isProcessingVirtualSelectAll = false;
+                        hideSpinner(_this.filterParent);
+                        if (_this.popupObj && _this.filterParent) {
+                            [_this.popupObj.element.querySelector('.e-content'), _this.popupObj.element.querySelector('.e-selectall-parent'), _this.filterParent].forEach(function (el) { return el && (el.style.opacity = ''); });
+                            _this.filterParent.querySelector('.e-input').removeAttribute('readonly');
+                            _this.filterParent.style.cursor = '';
+                        }
+                        if (!_this.isSelectAllClicked) {
+                            _this.showOverAllClear();
+                        }
+                        _this.updatedataValueItems(event);
+                        if (!_this.changeOnBlur) {
+                            _this.updateValueState(event, _this.value, _this.tempValues);
+                            _this.isSelectAll = _this.isSelectAll ? !_this.isSelectAll : _this.isSelectAll;
+                        }
+                        _this.updateHiddenElement();
+                        _this.setProperties({ value: [] }, true);
+                        _this.selectedListData = [];
+                        _this.virtualSelectAll = false;
+                        if (!isNullOrUndefined(_this.viewPortInfo.startIndex) && !isNullOrUndefined(_this.viewPortInfo.endIndex)) {
+                            _this.notify('setCurrentViewDataAsync', {
+                                component: _this.getModuleName(),
+                                module: 'VirtualScroll'
+                            });
+                        }
+                    }
+                };
+                processBatch_1();
             }
         }
         this.checkSelectAll();
@@ -5164,13 +5241,13 @@ var MultiSelect = /** @class */ (function (_super) {
         };
         this.trigger('beforeSelectAll', beforeSelectArgs);
         if ((li && li.length) || (this.enableVirtualization && !state)) {
-            var index_1 = 0;
-            var count_1 = 0;
+            var index = 0;
+            var count = 0;
             if (this.enableGroupCheckBox) {
-                count_1 = state ? this.maximumSelectionLength - (this.value ? this.value.length : 0) : li.length;
+                count = state ? this.maximumSelectionLength - (this.value ? this.value.length : 0) : li.length;
             }
             else {
-                count_1 = state ? this.maximumSelectionLength - (this.value ? this.value.length : 0) : this.maximumSelectionLength;
+                count = state ? this.maximumSelectionLength - (this.value ? this.value.length : 0) : this.maximumSelectionLength;
             }
             if (!beforeSelectArgs.preventSelectEvent) {
                 if (this.enableVirtualization) {
@@ -5185,42 +5262,73 @@ var MultiSelect = /** @class */ (function (_super) {
                     }
                 }
                 else {
-                    while (index_1 < length && index_1 <= 50 && index_1 < count_1) {
-                        this.isSelectAllTarget = (length === index_1 + 1);
-                        this.updateListSelection(li[index_1], event, length - index_1);
+                    while (index < length && index <= 50 && index < count) {
+                        this.isSelectAllTarget = (length === index + 1);
+                        this.updateListSelection(li[index], event, length - index);
                         if (this.enableGroupCheckBox) {
-                            this.findGroupStart(li[index_1]);
+                            this.findGroupStart(li[index]);
                         }
-                        index_1++;
+                        index++;
                     }
                     if (length > 50) {
-                        setTimeout(function () {
-                            while (index_1 < length && index_1 < count_1) {
-                                _this.isSelectAllTarget = (length === index_1 + 1);
-                                _this.updateListSelection(li[index_1], event, length - index_1);
-                                if (_this.enableGroupCheckBox) {
-                                    _this.findGroupStart(li[index_1]);
+                        createSpinner({ target: this.filterParent, width: Browser.isDevice ? '16px' : '14px' }, this.createElement);
+                        showSpinner(this.filterParent);
+                        if (this.popupObj && this.filterParent) {
+                            [this.popupObj.element.querySelector('.e-content'), this.popupObj.element.querySelector('.e-selectall-parent'), this.filterParent].forEach(function (el) { return el && (el.style.opacity = '0.5'); });
+                            this.filterParent.querySelector('.e-input').setAttribute('readonly', 'true');
+                            this.filterParent.style.cursor = 'progress';
+                        }
+                        this.isProcessingVirtualSelectAll = !this.isSelectAllClicked;
+                        var indexLocal_1 = index; // preserve original index value
+                        var maxIndex_1 = Math.min(length, count);
+                        // Use two-frame yield to ensure spinner paints before heavy work starts
+                        var CHUNK_SIZE_1 = 6;
+                        requestAnimationFrame(function () {
+                            requestAnimationFrame(function processFrame() {
+                                if (!this.list) {
+                                    return;
                                 }
-                                index_1++;
-                            }
-                            _this.updatedataValueItems(event);
-                            if (!_this.changeOnBlur) {
-                                _this.updateValueState(event, _this.value, _this.tempValues);
-                                _this.isSelectAll = _this.isSelectAll ? !_this.isSelectAll : _this.isSelectAll;
-                            }
-                            _this.updateHiddenElement();
-                            if (_this.popupWrapper && li[index_1 - 1].classList.contains('e-item-focus')) {
-                                var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
-                                if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
-                                    li[index_1 - 1].classList.remove('e-item-focus');
+                                if (indexLocal_1 >= maxIndex_1) {
+                                    this.isProcessingVirtualSelectAll = !this.isProcessingVirtualSelectAll;
+                                    this.updatedataValueItems(event);
+                                    if (!this.changeOnBlur) {
+                                        this.updateValueState(event, this.value, this.tempValues);
+                                        this.isSelectAll = this.isSelectAll ? !this.isSelectAll : this.isSelectAll;
+                                    }
+                                    this.updateHiddenElement();
+                                    if (this.popupWrapper && li[indexLocal_1 - 1] && li[indexLocal_1 - 1].classList.contains('e-item-focus')) {
+                                        var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
+                                        if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
+                                            li[indexLocal_1 - 1].classList.remove('e-item-focus');
+                                        }
+                                    }
+                                    hideSpinner(this.filterParent);
+                                    if (this.popupObj && this.filterParent) {
+                                        [this.popupObj.element.querySelector('.e-content'), this.popupObj.element.querySelector('.e-selectall-parent'), this.filterParent].forEach(function (el) { return el && (el.style.opacity = ''); });
+                                        this.filterParent.querySelector('.e-input').removeAttribute('readonly');
+                                        this.filterParent.style.cursor = '';
+                                    }
+                                    return;
                                 }
-                            }
-                        }, 0);
+                                // process up to CHUNK_SIZE items this frame
+                                var processed = 0;
+                                while (processed < CHUNK_SIZE_1 && indexLocal_1 < maxIndex_1) {
+                                    this.isSelectAllTarget = (length === indexLocal_1 + 1);
+                                    this.updateListSelection(li[indexLocal_1], event, length - indexLocal_1);
+                                    if (this.enableGroupCheckBox) {
+                                        this.findGroupStart(li[indexLocal_1]);
+                                    }
+                                    indexLocal_1++;
+                                    processed++;
+                                }
+                                requestAnimationFrame(processFrame.bind(this));
+                            }.bind(_this));
+                        });
                     }
                 }
             }
             else {
-                for (var i = 0; i < li.length && i < count_1; i++) {
+                for (var i = 0; i < li.length && i < count; i++) {
                     this.removeHover();
                     var customVal = li[i].getAttribute('data-value');
                     var value = this.getFormattedValue(customVal);
@@ -5264,7 +5372,10 @@ var MultiSelect = /** @class */ (function (_super) {
                 this.trigger('selectedAll', args);
             }
         }
-        this.updatedataValueItems(event);
+        if (!this.isProcessingVirtualSelectAll &&
+            ((!this.isSelectAllClicked) || (this.isSelectAllClicked && (this.enableVirtualization ? length > 30 : length <= 50)))) {
+            this.updatedataValueItems(event);
+        }
         this.checkPlaceholderSize();
         if (length <= 50 && !beforeSelectArgs.preventSelectEvent) {
             if (!this.changeOnBlur) {
@@ -5357,6 +5468,7 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.selectAllItems = function (state, event) {
         var _this = this;
+        this.isSelectAllClicked = state;
         if (isNullOrUndefined(this.list)) {
             this.selectAllAction = function () {
                 if (_this.mode === 'CheckBox' && _this.showSelectAll) {
@@ -6641,6 +6753,50 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.delimiterWrapper && this.delimiterWrapper.parentElement) {
             this.delimiterWrapper.parentElement.remove();
         }
+        if (this.hiddenElement) {
+            if (this.hiddenElement.onchange) {
+                this.hiddenElement.onchange = null;
+            }
+            this.hiddenElement.onchange = null;
+            this.hiddenElement.onclick = null;
+            this.hiddenElement.oninput = null;
+            var attrs = Array.prototype.slice.call(this.hiddenElement.attributes);
+            for (var n = 0; n < attrs.length; n++) {
+                this.hiddenElement.removeAttribute(attrs[n].name);
+            }
+            var children = this.hiddenElement.children;
+            for (var i = 0; i < children.length; i++) {
+                var child = children[i];
+                child.onclick = null;
+                child.onchange = null;
+                child.textContent = '';
+                var attr = Array.prototype.slice.call(child.attributes);
+                for (var n = 0; n < attr.length; n++) {
+                    child.removeAttribute(attr[n].name);
+                }
+            }
+            var selectedElement = this.hiddenElement.querySelector('option');
+            if (selectedElement) {
+                selectedElement.removeAttribute('value');
+                selectedElement.removeAttribute('selected');
+                selectedElement.text = '';
+                selectedElement.innerHTML = '';
+                selectedElement = null;
+            }
+            while (this.hiddenElement.firstChild) {
+                this.hiddenElement.removeChild(this.hiddenElement.firstChild);
+            }
+            if (this.hiddenElement.attributes) {
+                var attr = Array.prototype.slice.call(this.hiddenElement.attributes);
+                for (var n = 0; n < attr.length; n++) {
+                    this.hiddenElement.removeAttribute(attr[n].name);
+                }
+            }
+            if (this.hiddenElement.parentNode) {
+                this.hiddenElement.parentNode.removeChild(this.hiddenElement);
+            }
+            this.hiddenElement.innerHTML = '';
+        }
         // Remove the select element if it exists
         var selectElement = this.overAllWrapper.querySelector('select.e-multi-hidden');
         if (selectElement && selectElement.parentElement) {
@@ -6660,7 +6816,7 @@ var MultiSelect = /** @class */ (function (_super) {
             var attrArray = ['readonly', 'aria-disabled', 'placeholder', 'aria-labelledby',
                 'aria-expanded', 'autocomplete', 'aria-readonly', 'autocapitalize',
                 'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-label', 'aria-hidden', 'tabindex', 'aria-controls',
-                'aria-describedby', 'size', 'role', 'type', 'class'];
+                'aria-describedby', 'size', 'role', 'type', 'class', 'aria-activedescendant'];
             for (var i = 0; i < attrArray.length; i++) {
                 this.inputElement.removeAttribute(attrArray[i]);
             }

package/styles/bds-lite.css

@@ -21,11 +21,13 @@
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 4px 0 0;
+  -webkit-padding-end: 4px;
+          padding-inline-end: 4px;
 }
 
 /* stylelint-disable */
@@ -56,11 +58,13 @@
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 4px 0 0;
+  -webkit-padding-end: 4px;
+          padding-inline-end: 4px;
 }
 
 /* stylelint-disable */
@@ -121,11 +125,11 @@
 
 .e-mention.e-popup {
   background: var(--color-sf-bg-primary);
-  border: 0;
   -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
           box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
   margin-top: 2px;
   position: absolute;
+  border: 0;
 }
 
 .e-mention.e-popup .e-dropdownbase {
@@ -220,11 +224,13 @@
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 4px 0 0;
+  -webkit-padding-end: 4px;
+          padding-inline-end: 4px;
 }
 
 /* stylelint-disable */
@@ -1541,11 +1547,13 @@ ejs-dropdownlist {
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 4px 0 0;
+  -webkit-padding-end: 4px;
+          padding-inline-end: 4px;
 }
 
 /* stylelint-disable */

package/styles/bds.css

@@ -21,11 +21,13 @@
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 4px 0 0;
+  -webkit-padding-end: 4px;
+          padding-inline-end: 4px;
 }
 
 /* stylelint-disable */
@@ -56,11 +58,13 @@
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 4px 0 0;
+  -webkit-padding-end: 4px;
+          padding-inline-end: 4px;
 }
 
 /* stylelint-disable */
@@ -121,11 +125,11 @@
 
 .e-mention.e-popup {
   background: var(--color-sf-bg-primary);
-  border: 0;
   -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
           box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
   margin-top: 2px;
   position: absolute;
+  border: 0;
 }
 
 .e-mention.e-popup .e-dropdownbase {
@@ -220,11 +224,13 @@
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 4px 0 0;
+  -webkit-padding-end: 4px;
+          padding-inline-end: 4px;
 }
 
 /* stylelint-disable */
@@ -453,11 +459,13 @@
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 4px 0 0;
+  -webkit-padding-end: 4px;
+          padding-inline-end: 4px;
 }
 
 /* stylelint-disable */
@@ -593,11 +601,13 @@
 }
 
 .e-bigger .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 12px 0 0;
+  -webkit-padding-end: 0 12px 0 0;
+          padding-inline-end: 0 12px 0 0;
 }
 
 .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 0 8px 0 0;
+          padding-inline-end: 0 8px 0 0;
 }
 
 /* stylelint-disable property-no-vendor-prefix */
@@ -2021,11 +2031,13 @@ ejs-dropdownlist {
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 4px 0 0;
+  -webkit-padding-end: 4px;
+          padding-inline-end: 4px;
 }
 
 /* stylelint-disable */
@@ -3076,11 +3088,13 @@ ejs-multiselect {
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 4px 0 0;
+  -webkit-padding-end: 4px;
+          padding-inline-end: 4px;
 }
 
 /* stylelint-disable */