@syncfusion/ej2-dropdowns 31.2.16 → 32.1.19

package/dist/global/index.d.ts

@@ -1,12 +1,3 @@
-/*!
-*  filename: index.d.ts
-*  version : 31.2.16
-*  Copyright Syncfusion Inc. 2001 - 2025. 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
-*  licensing@syncfusion.com. Any infringement will be prosecuted under
-*  applicable laws. 
-*/
 import * as _dropdowns from '@syncfusion/ej2-dropdowns';
 
 export declare namespace ej {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-dropdowns",
-  "version": "31.2.16",
+  "version": "32.1.19",
   "description": "Essential JS 2 DropDown Components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,13 +8,13 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-dropdowns.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~31.2.12",
-    "@syncfusion/ej2-data": "~31.2.16",
-    "@syncfusion/ej2-inputs": "~31.2.15",
-    "@syncfusion/ej2-lists": "~31.2.12",
-    "@syncfusion/ej2-navigations": "~31.2.16",
-    "@syncfusion/ej2-notifications": "~31.2.12",
-    "@syncfusion/ej2-popups": "~31.2.12"
+    "@syncfusion/ej2-base": "~32.1.19",
+    "@syncfusion/ej2-data": "~32.1.19",
+    "@syncfusion/ej2-inputs": "~32.1.19",
+    "@syncfusion/ej2-lists": "~32.1.19",
+    "@syncfusion/ej2-navigations": "~32.1.19",
+    "@syncfusion/ej2-notifications": "~32.1.19",
+    "@syncfusion/ej2-popups": "~32.1.19"
   },
   "devDependencies": {},
   "keywords": [

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

@@ -30,6 +30,11 @@ export interface ChangeEventArgs extends SelectEventArgs {
      * Specifies the original event arguments.
      */
     event: MouseEvent | KeyboardEvent | TouchEvent;
+    /**
+     * Specifies the original event arguments.
+
+     */
+    e: MouseEvent | KeyboardEvent | TouchEvent;
     /**
      * Illustrates whether the current action needs to be prevented or not.
 

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

@@ -1877,6 +1877,9 @@ var DropDownList = /** @class */ (function (_super) {
             }
         }
         else {
+            while (this.hiddenElement.firstChild) {
+                this.hiddenElement.removeChild(this.hiddenElement.firstChild);
+            }
             this.hiddenElement.innerHTML = '';
         }
     };
@@ -2759,6 +2762,9 @@ var DropDownList = /** @class */ (function (_super) {
                         EventHandler.add(_this.clearIconElement, 'click', _this.clearText, _this);
                     }
                 }
+                if (_this.selectedLI && _this.fields.groupBy) {
+                    _this.setScrollPosition();
+                }
                 popupEle_1.style.visibility = 'visible';
                 addClass([popupEle_1], 'e-popup-close');
                 var scrollParentElements = _this.popupObj.getScrollableParent(_this.inputWrapper.container);
@@ -3312,6 +3318,13 @@ var DropDownList = /** @class */ (function (_super) {
                 this.filterInput.removeAttribute('autocapitalize');
                 this.filterInput.removeAttribute('spellcheck');
             }
+            if (this.filterInput.parentNode) {
+                this.filterInput.parentNode.removeChild(this.filterInput);
+                var attrs = Array.prototype.slice.call(this.filterInput.attributes);
+                for (var n = 0; n < attrs.length; n++) {
+                    this.filterInput.removeAttribute(attrs[n].name);
+                }
+            }
             this.filterInput = null;
         }
         attributes(this.targetElement(), { 'aria-expanded': 'false' });
@@ -4444,9 +4457,68 @@ var DropDownList = /** @class */ (function (_super) {
                 detach(this.inputWrapper.container);
             }
         }
-        delete this.hiddenElement;
+        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 attrs_1 = Array.prototype.slice.call(child.attributes);
+                for (var n = 0; n < attrs_1.length; n++) {
+                    child.removeAttribute(attrs_1[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 attrs_2 = Array.prototype.slice.call(this.hiddenElement.attributes);
+                for (var n = 0; n < attrs_2.length; n++) {
+                    this.hiddenElement.removeAttribute(attrs_2[n].name);
+                }
+            }
+            if (this.hiddenElement.parentNode) {
+                this.hiddenElement.parentNode.removeChild(this.hiddenElement);
+            }
+            this.hiddenElement.innerHTML = '';
+        }
         this.filterInput = null;
         this.keyboardModule = null;
+        if (this.list) {
+            detach(this.list);
+        }
+        if (this.ulElement) {
+            detach(this.ulElement);
+        }
+        if (this.popupContentElement) {
+            detach(this.popupContentElement);
+        }
+        if (this.popupObj && this.popupObj.element) {
+            if (this.popupObj.element && this.popupObj.element.parentNode) {
+                this.popupObj.element.parentNode.removeChild(this.popupObj.element);
+            }
+            detach(this.popupObj.element);
+            this.popupObj.element = null;
+        }
         this.ulElement = null;
         this.list = null;
         this.clearIconElement = null;
@@ -4460,7 +4532,14 @@ var DropDownList = /** @class */ (function (_super) {
         this.header = null;
         this.previousSelectedLI = null;
         this.valueTempElement = null;
+        if (this.actionData.ulElement) {
+            detach(this.actionData.ulElement);
+        }
         this.actionData.ulElement = null;
+        if (this.actionCompleteData.ulElement) {
+            detach(this.actionCompleteData.ulElement);
+        }
+        this.actionCompleteData.ulElement = null;
         if (this.inputElement && !isNullOrUndefined(this.inputElement.onchange)) {
             this.inputElement.onchange = null;
         }

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

@@ -563,12 +563,38 @@ var ListBox = /** @class */ (function (_super) {
         this.stopTimer();
         var items = [];
         this.dragValue = this.getFormattedValue(args.droppedElement.getAttribute('data-value'));
-        if (this.value.indexOf(this.dragValue) > -1) {
-            args.items = this.getDataByValues(this.value);
+        if (this.allowDragAll) {
+            var selectedValues = [];
+            if (this.selectionSettings.showCheckbox && this.allowFiltering) {
+                var visibleSelected = [];
+                var selectedList = this.getSelectedItems();
+                for (var index = 0; index < selectedList.length; index++) {
+                    var formattedValue = this.getFormattedValue(selectedList[index].getAttribute('data-value'));
+                    visibleSelected.push(formattedValue);
+                }
+                selectedValues = visibleSelected.length ? visibleSelected
+                    : ((this.value ? this.value.slice() : []));
+            }
+            else {
+                var selectedList = this.getSelectedItems();
+                for (var index = 0; index < selectedList.length; index++) {
+                    var formattedValue = this.getFormattedValue(selectedList[index].getAttribute('data-value'));
+                    selectedValues.push(formattedValue);
+                }
+            }
+            if (selectedValues.indexOf(this.dragValue) > -1) {
+                args.items = this.getDataByValues(selectedValues);
+            }
+            else {
+                args.items = this.getDataByValues([this.dragValue]);
+            }
         }
         else {
             args.items = this.getDataByValues([this.dragValue]);
         }
+        if (this.allowDragAll) {
+            this.customDraggedItem = args.items;
+        }
         extend(items, args.items);
         this.trigger('beforeDrop', args);
         if (JSON.stringify(args.items) !== JSON.stringify(items)) {
@@ -597,6 +623,9 @@ var ListBox = /** @class */ (function (_super) {
         if (Browser.isIos) {
             this.list.style.overflow = '';
         }
+        if (listObj && listObj !== this && !listObj.allowDragAndDrop) {
+            return;
+        }
         var targetListObj = this.getComponent(args.target);
         if (targetListObj && targetListObj.listData.length === 0) {
             var noRecElem = targetListObj.ulElement.childNodes[0];

package/src/mention/mention.js

@@ -353,6 +353,10 @@ var Mention = /** @class */ (function (_super) {
             this.isUpDownKey = false;
             return;
         }
+        if (!this.allowSpaces && e.code === 'Space' && this.beforePopupOpen && this.isPopupOpen) {
+            this.hidePopup();
+            return;
+        }
         this.isTyped = e.code !== 'Enter' && e.code !== 'Space' && e.code !== 'ArrowDown' && e.code !== 'ArrowUp' ? true : false;
         var isRteImage = document.activeElement.parentElement && document.activeElement.parentElement.querySelector('.e-rte-image') ? true : false;
         if (document.activeElement !== this.inputElement && !isRteImage) {
@@ -380,6 +384,9 @@ var Mention = /** @class */ (function (_super) {
             if (!this.requireLeadingSpace && lastWordRange && lastWordRange.includes(this.mentionChar)) {
                 lastWordRange = this.mentionChar + lastWordRange.split(this.mentionChar).pop();
             }
+            if (lastWordRange.includes(' ')) {
+                return;
+            }
         }
         var lastTwoLetters = this.mentionChar.toString() + this.mentionChar.toString();
         // eslint-disable-next-line security/detect-non-literal-regexp
@@ -400,8 +407,7 @@ var Mention = /** @class */ (function (_super) {
                 (rangetextContent.length === 1 || rangetextContent[rangetextContent.length - 2].indexOf('') === -1 ||
                     this.range.startContainer.nodeType === 1))) {
             if (isValid && this.isPopupOpen && this.allowSpaces && currentRange && currentRange.trim() !== '' && charRegex.test(currentRange) && currentRange.indexOf(this.mentionChar) !== -1
-                && !this.isMatchedText() && (currentRange.length > 1 && currentRange.replace(/\u00A0/g, ' ').charAt(currentRange.length - 2) !== ' ') &&
-                (this.list && this.list.querySelectorAll('ul').length > 0) && e.code !== 'Enter') {
+                && !this.isMatchedText() && this.list && e.code !== 'ArrowDown' && e.code !== 'ArrowUp' && e.code !== 'Enter') {
                 this.queryString = currentRange.substring(currentRange.lastIndexOf(this.mentionChar) + 1).replace('\u00a0', ' ');
                 this.searchLists(e);
             }
@@ -677,7 +683,7 @@ var Mention = /** @class */ (function (_super) {
             return '';
         }
         var textValue = text.indexOf('\u200B') > -1 ? text.replace(/\u200B/g, '').replace(/\u00A0/g, ' ') : text.replace(/\u00A0/g, ' ');
-        var words = textValue.split(/\s+/);
+        var words = this.allowSpaces && this.isPopupOpen ? [textValue] : textValue.split(/\s+/);
         var wordCnt = words.length - 1;
         return words[wordCnt].trim();
     };

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

@@ -5074,6 +5074,13 @@ var MultiSelect = /** @class */ (function (_super) {
                         _this.checkSelectAll();
                     }, 0);
                 }
+                else if (this.virtualSelectAllData && this.virtualSelectAllData.length > 0) {
+                    setTimeout(function () {
+                        if (_this.value && _this.value.length && _this.viewWrapper && !_this.viewWrapper.querySelector('.' + REMAIN_WRAPPER)) {
+                            _this.updatedataValueItems(event);
+                        }
+                    }, 0);
+                }
             }
         }
         else {

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

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@forward 'ej2-base/styles/definition/bootstrap4';
+
 //default
 
 .e-input-group.e-ddl .e-control.e-autocomplete ~ .e-ddl-icon {

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

@@ -1 +1,2 @@
-@import './bootstrap5-definition.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap5-dark';

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

@@ -1 +1,2 @@
-@import './fluent-definition.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@forward 'ej2-base/styles/definition/fluent-dark';

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

@@ -1 +1,2 @@
-@import './material3-definition.scss';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@forward 'ej2-base/styles/definition/material3-dark';

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

@@ -1 +1,2 @@
-@import './tailwind-definition.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@forward 'ej2-base/styles/definition/tailwind-dark';

package/styles/auto-complete/_theme-variables.scss

@@ -0,0 +1 @@
+@forward './_tailwind3-definition';

package/styles/auto-complete/bds.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import '../drop-down-list/bds-definition.scss';
-@import 'bds-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/bds' as *;
+@use '../drop-down-list/bds-definition' as *;
+@use 'bds-definition' as *;
+@use 'all' as *;

package/styles/auto-complete/bootstrap-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.scss';
-@import '../drop-down-list/bootstrap-dark-definition.scss';
-@import 'bootstrap-dark-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@use '../drop-down-list/bootstrap-dark-definition' as *;
+@use 'bootstrap-dark-definition' as *;
+@use 'all' as *;

package/styles/auto-complete/bootstrap.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/bootstrap.scss';
-@import '../drop-down-list/bootstrap-definition.scss';
-@import 'bootstrap-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@use '../drop-down-list/bootstrap-definition' as *;
+@use 'bootstrap-definition' as *;
+@use 'all' as *;

package/styles/auto-complete/bootstrap4.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/bootstrap4.scss';
-@import '../drop-down-list/bootstrap4-definition.scss';
-@import 'bootstrap4-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@use '../drop-down-list/bootstrap4-definition' as *;
+@use 'bootstrap4-definition' as *;
+@use 'all' as *;

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

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
-@import '../drop-down-list/bootstrap5-dark-definition.scss';
-@import 'bootstrap5-dark-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@use '../drop-down-list/bootstrap5-dark-definition' as *;
+@use 'bootstrap5-dark-definition' as *;
+@use 'all' as *;

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

@@ -2,8 +2,88 @@
 
 
 
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
 .e-popup.e-ddl {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   -webkit-box-shadow: none;
           box-shadow: none;
   margin-top: 3px;

package/styles/auto-complete/bootstrap5.3.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/bootstrap5.3.scss';
-@import '../drop-down-list/bootstrap5.3-definition.scss';
-@import 'bootstrap5.3-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@use '../drop-down-list/bootstrap5.3-definition' as *;
+@use 'bootstrap5.3-definition' as *;
+@use 'all' as *;

package/styles/auto-complete/bootstrap5.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/bootstrap5.scss';
-@import '../drop-down-list/bootstrap5-definition.scss';
-@import 'bootstrap5-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@use '../drop-down-list/bootstrap5-definition' as *;
+@use 'bootstrap5-definition' as *;
+@use 'all' as *;

package/styles/auto-complete/fabric-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/fabric-dark.scss';
-@import '../drop-down-list/fabric-dark-definition.scss';
-@import 'fabric-dark-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@use '../drop-down-list/fabric-dark-definition' as *;
+@use 'fabric-dark-definition' as *;
+@use 'all' as *;

package/styles/auto-complete/fabric.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/fabric.scss';
-@import '../drop-down-list/fabric-definition.scss';
-@import 'fabric-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/fabric' as *;
+@use '../drop-down-list/fabric-definition' as *;
+@use 'fabric-definition' as *;
+@use 'all' as *;

package/styles/auto-complete/fluent-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/fluent-dark.scss';
-@import '../drop-down-list/fluent-dark-definition.scss';
-@import 'fluent-dark-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@use '../drop-down-list/fluent-dark-definition' as *;
+@use 'fluent-dark-definition' as *;
+@use 'all' as *;

package/styles/auto-complete/fluent.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/fluent.scss';
-@import '../drop-down-list/fluent-definition.scss';
-@import 'fluent-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/fluent' as *;
+@use '../drop-down-list/fluent-definition' as *;
+@use 'fluent-definition' as *;
+@use 'all' as *;

package/styles/auto-complete/fluent2.css

@@ -4,6 +4,86 @@
 
 
 
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
+
+
 .e-ddl.e-control-wrapper .e-ddl-icon::before {
   -webkit-transform: rotate(0deg);
           transform: rotate(0deg);
@@ -42,7 +122,7 @@
 
 .e-ddl.e-popup {
   border: 0;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   -webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
           box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
   margin-top: 4px;
@@ -50,7 +130,7 @@
 
 .e-small .e-ddl.e-popup,
 .e-small.e-ddl.e-popup {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   margin-top: 2px;
 }
 
@@ -74,4 +154,39 @@
   padding: 4px 8px;
 }
 
+.e-bigger .e-ddl.e-popup,
+.e-bigger.e-ddl.e-popup {
+  border-radius: calc(var(--e-radius) * 0.5);
+  margin-top: 8px;
+}
+
+.e-bigger.e-small .e-ddl.e-popup,
+.e-small.e-bigger.e-ddl.e-popup {
+  border-radius: calc(var(--e-radius) * 0.5);
+  margin-top: 6px;
+}
+
+.e-bigger .e-popup.e-ddl-device-filter .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
+  border-color: var(--color-sf-border-light);
+}
+
+.e-bigger .e-popup.e-ddl-device-filter {
+  margin-top: 0;
+}
+
+.e-bigger .e-ddl-device .e-input-group,
+.e-bigger .e-ddl-device .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
+  background: var(--color-sf-flyout-bg-color);
+  border-width: 0;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  margin-bottom: 0;
+}
+
+.e-bigger .e-ddl-device .e-input-group .e-back-icon,
+.e-bigger .e-ddl-device .e-input-group input.e-input,
+.e-bigger .e-ddl-device .e-input-group .e-clear-icon {
+  background-color: var(--color-sf-flyout-bg-color);
+}
+
 /* stylelint-disable-line no-empty-source */