@syncfusion/ej2-dropdowns 32.2.6 → 32.2.8

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 32.2.4
+*  version : 32.2.8
 *  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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-dropdowns",
-  "version": "32.2.6",
+  "version": "32.2.8",
   "description": "Essential JS 2 DropDown Components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -10,11 +10,11 @@
   "dependencies": {
     "@syncfusion/ej2-base": "~32.2.6",
     "@syncfusion/ej2-data": "~32.2.3",
-    "@syncfusion/ej2-inputs": "~32.2.3",
-    "@syncfusion/ej2-lists": "~32.2.6",
-    "@syncfusion/ej2-navigations": "~32.2.6",
+    "@syncfusion/ej2-inputs": "~32.2.8",
+    "@syncfusion/ej2-lists": "~32.2.7",
+    "@syncfusion/ej2-navigations": "~32.2.8",
     "@syncfusion/ej2-notifications": "~32.2.3",
-    "@syncfusion/ej2-popups": "~32.2.6"
+    "@syncfusion/ej2-popups": "~32.2.8"
   },
   "devDependencies": {},
   "keywords": [

package/src/common/virtual-scroll.js

@@ -156,7 +156,7 @@ var VirtualScroll = /** @class */ (function () {
         if (this.component === 'combobox') {
             var totalData = 0;
             if (this.parent.dataSource instanceof DataManager) {
-                totalData = this.parent.remoteDataCount;
+                totalData = this.parent.dataSource.dataSource.json.length;
             }
             else if (this.parent.dataSource && this.parent.dataSource.length > 0) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -133,6 +133,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     private filterArgs;
     private isReactTemplateUpdate;
     private iOSscrollPosition;
+    private resizeHandler;
     /**
      * Sets CSS classes to the root element of the component that allows customization of appearance.
      *
@@ -603,6 +604,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     private updateSelectionList;
     protected removeFocus(): void;
     protected renderPopup(e?: MouseEvent | KeyboardEventArgs | TouchEvent | Object): void;
+    protected getAppendToElement(): HTMLElement;
     private checkCollision;
     private getOffsetValue;
     private createPopup;

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

@@ -593,7 +593,8 @@ var DropDownList = /** @class */ (function (_super) {
         EventHandler.add(this.inputWrapper.container, 'mousedown', this.dropDownClick, this);
         EventHandler.add(this.inputWrapper.container, 'focus', this.focusIn, this);
         EventHandler.add(this.inputWrapper.container, 'keypress', this.onSearch, this);
-        EventHandler.add(window, 'resize', this.windowResize, this);
+        this.resizeHandler = this.windowResize.bind(this);
+        window.addEventListener('resize', this.resizeHandler);
         this.bindCommonEvent();
     };
     DropDownList.prototype.bindCommonEvent = function () {
@@ -1383,7 +1384,10 @@ var DropDownList = /** @class */ (function (_super) {
             EventHandler.remove(this.inputWrapper.container, 'mousedown', this.dropDownClick);
             EventHandler.remove(this.inputWrapper.container, 'keypress', this.onSearch);
             EventHandler.remove(this.inputWrapper.container, 'focus', this.focusIn);
-            EventHandler.remove(window, 'resize', this.windowResize);
+            if (this.resizeHandler) {
+                window.removeEventListener('resize', this.resizeHandler);
+                this.resizeHandler = null;
+            }
         }
         this.unBindCommonEvent();
     };
@@ -2650,7 +2654,8 @@ var DropDownList = /** @class */ (function (_super) {
                     _this.setFooterTemplate(popupEle_1);
                     _this.isUpdateFooterHeight = _this.footer.offsetHeight !== 0;
                 }
-                document.body.appendChild(popupEle_1);
+                var appendToElement = _this.getAppendToElement();
+                appendToElement.appendChild(popupEle_1);
                 popupEle_1.style.top = '0px';
                 initialPopupHeight = popupEle_1.clientHeight;
                 if (_this.enableVirtualization && (_this.itemTemplate || _this.isAngular)) {
@@ -2912,6 +2917,16 @@ var DropDownList = /** @class */ (function (_super) {
             }
         });
     };
+    DropDownList.prototype.getAppendToElement = function () {
+        if (this.isAngular) {
+            var cdkPane = this.element && this.element.closest ? this.element.closest('.cdk-overlay-pane') : null;
+            var popoverEl = this.element && this.element.closest ? this.element.closest('[popover]') : null;
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    };
     DropDownList.prototype.checkCollision = function (popupEle) {
         if (!Browser.isDevice || (Browser.isDevice && !(this.getModuleName() === 'dropdownlist' || this.isDropDownClick))) {
             var collision = isCollide(popupEle);
@@ -3686,7 +3701,8 @@ var DropDownList = /** @class */ (function (_super) {
         var listParentHeight = formatUnit(this.popupHeight);
         listParent.style.height = (parseInt(listParentHeight, 10)).toString() + 'px';
         listParent.appendChild(item);
-        document.body.appendChild(listParent);
+        var appendToElement = this.getAppendToElement();
+        appendToElement.appendChild(listParent);
         this.virtualListHeight = listParent.getBoundingClientRect().height;
         var listItemHeight = Math.ceil(item.getBoundingClientRect().height) +
             parseInt(window.getComputedStyle(item).marginBottom, 10);

package/src/drop-down-tree/drop-down-tree-model.d.ts

@@ -410,10 +410,23 @@ export interface DropDownTreeModel extends ComponentModel{
      * Specifies whether to display or remove the untrusted HTML values in the Dropdown Tree component.
      * If 'enableHtmlSanitizer' set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
      *
+     * **Note:** To correctly remove untrusted HTML values, `disableHtmlEncode` must also be set to true. When `enableHtmlSanitizer` is set to false, `disableHtmlEncode` must also be set to false.
+     *
      * @default true
      */
     enableHtmlSanitizer?: boolean;
 
+    /**
+     * Enables rendering of raw text content in the Dropdown Tree component without HTML encoding.
+     * When set to true, the text will be displayed exactly as provided (including HTML tags or special characters),
+     * instead of being encoded or truncated (e.g., `hiiih<hihi` will be shown as-is).
+     *
+     * **Note:** To preserve and render raw HTML content correctly, `enableHtmlSanitizer` must also be set to false.
+     *
+     * @default true
+     */
+    disableHtmlEncode?: boolean
+
     /**
      * Specifies whether to show or hide the clear icon in textbox.
      * When the clear button is clicked, `value`, `text` properties will be reset to null.

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

@@ -580,9 +580,21 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
      * Specifies whether to display or remove the untrusted HTML values in the Dropdown Tree component.
      * If 'enableHtmlSanitizer' set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
      *
+     * **Note:** To correctly remove untrusted HTML values, `disableHtmlEncode` must also be set to true. When `enableHtmlSanitizer` is set to false, `disableHtmlEncode` must also be set to false.
+     *
      * @default true
      */
     enableHtmlSanitizer: boolean;
+    /**
+     * Enables rendering of raw text content in the Dropdown Tree component without HTML encoding.
+     * When set to true, the text will be displayed exactly as provided (including HTML tags or special characters),
+     * instead of being encoded or truncated (e.g., `hiiih<hihi` will be shown as-is).
+     *
+     * **Note:** To preserve and render raw HTML content correctly, `enableHtmlSanitizer` must also be set to false.
+     *
+     * @default true
+     */
+    disableHtmlEncode: boolean;
     /**
      * Specifies whether to show or hide the clear icon in textbox.
      * When the clear button is clicked, `value`, `text` properties will be reset to null.
@@ -898,6 +910,8 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     private updateText;
     private updateModelMode;
     private updateOption;
+    private getDomSetter;
+    private getSanitizedText;
     /**
      * Dynamically change the value of properties.
      *

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

@@ -1072,12 +1072,7 @@ var DropDownTree = /** @class */ (function (_super) {
                         temp = this.getOverflowVal(index);
                         data += temp;
                         temp = this.overFlowWrapper.innerHTML;
-                        if (this.enableHtmlSanitizer) {
-                            this.overFlowWrapper.innerText = SanitizeHtmlHelper.sanitize(data);
-                        }
-                        else {
-                            this.overFlowWrapper.innerHTML = data;
-                        }
+                        this.overFlowWrapper[this.getDomSetter()] = this.getSanitizedText(data);
                         wrapperleng = this.overFlowWrapper.offsetWidth;
                         overAllContainer = this.inputWrapper.offsetWidth;
                         if ((wrapperleng + downIconWidth + this.clearIconWidth) > overAllContainer) {
@@ -1657,6 +1652,7 @@ var DropDownTree = /** @class */ (function (_super) {
             dataBound: this.OnDataBound.bind(this),
             allowMultiSelection: this.allowMultiSelection,
             enableHtmlSanitizer: this.enableHtmlSanitizer,
+            disableHtmlEncode: this.disableHtmlEncode,
             showCheckBox: this.showCheckBox,
             autoCheck: this.treeSettings.autoCheck,
             sortOrder: this.sortOrder,
@@ -2643,12 +2639,7 @@ var DropDownTree = /** @class */ (function (_super) {
         });
         var chipContent = this.createElement('span', { className: CHIP_CONTENT });
         var chipClose = this.createElement('span', { className: CHIP_CLOSE + ' ' + ICONS });
-        if (this.enableHtmlSanitizer) {
-            chipContent.innerText = SanitizeHtmlHelper.sanitize(text);
-        }
-        else {
-            chipContent.innerHTML = text;
-        }
+        chipContent[this.getDomSetter()] = this.getSanitizedText(text);
         chip.appendChild(chipContent);
         this.chipCollection.appendChild(chip);
         if (this.showClearButton) {
@@ -3087,6 +3078,12 @@ var DropDownTree = /** @class */ (function (_super) {
             this.hiddenElement.removeAttribute('multiple');
         }
     };
+    DropDownTree.prototype.getDomSetter = function () {
+        return this.disableHtmlEncode ? 'textContent' : 'innerHTML';
+    };
+    DropDownTree.prototype.getSanitizedText = function (text) {
+        return this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(text) : text;
+    };
     /**
      * Dynamically change the value of properties.
      *
@@ -3556,6 +3553,9 @@ var DropDownTree = /** @class */ (function (_super) {
     __decorate([
         Property(true)
     ], DropDownTree.prototype, "enableHtmlSanitizer", void 0);
+    __decorate([
+        Property(true)
+    ], DropDownTree.prototype, "disableHtmlEncode", void 0);
     __decorate([
         Property(true)
     ], DropDownTree.prototype, "showClearButton", void 0);

package/src/list-box/list-box.d.ts

@@ -138,6 +138,7 @@ export declare class ListBox extends DropDownBase {
     private timer;
     private inputFormName;
     private selectedListItemCount;
+    private boundResizeHandler;
     /**
      * Sets the CSS classes to root element of this component, which helps to customize the
      * complete styles.

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

@@ -1236,7 +1236,8 @@ var ListBox = /** @class */ (function (_super) {
         if (form) {
             EventHandler.add(form, 'reset', this.formResetHandler, this);
         }
-        window.addEventListener('resize', this.resizeHandler.bind(this));
+        this.boundResizeHandler = this.resizeHandler.bind(this);
+        window.addEventListener('resize', this.boundResizeHandler);
     };
     ListBox.prototype.wireToolbarEvent = function () {
         if (this.toolbarSettings.items.length) {
@@ -1258,7 +1259,10 @@ var ListBox = /** @class */ (function (_super) {
         if (form) {
             EventHandler.remove(form, 'reset', this.formResetHandler);
         }
-        window.removeEventListener('resize', this.resizeHandler.bind(this));
+        if (this.boundResizeHandler) {
+            window.removeEventListener('resize', this.boundResizeHandler);
+            this.boundResizeHandler = null;
+        }
     };
     ListBox.prototype.clickHandler = function (e) {
         var li = closest(e.target, '.' + 'e-list-item');

package/src/mention/mention.d.ts

@@ -59,6 +59,9 @@ export declare class Mention extends DropDownBase {
     private isUpDownKey;
     private isRTE;
     private keyEventName;
+    private keyupHandler;
+    private keydownHandler;
+    private popupAppendTo;
     /**
      * Defines class/multiple classes separated by a space for the mention component.
      *
@@ -410,6 +413,7 @@ export declare class Mention extends DropDownBase {
     hidePopup(e?: MouseEvent | KeyboardEventArgs): void;
     private closePopup;
     private renderPopup;
+    protected getAppendToElement(): HTMLElement;
     private setHeight;
     private checkCollision;
     private getTriggerCharPosition;

package/src/mention/mention.js

@@ -145,16 +145,21 @@ var Mention = /** @class */ (function (_super) {
         this.wireEvent();
     };
     Mention.prototype.wireEvent = function () {
-        EventHandler.add(this.inputElement, 'keyup', this.onKeyUp, this);
+        this.keyupHandler = this.onKeyUp.bind(this);
+        EventHandler.add(this.inputElement, 'keyup', this.keyupHandler, this);
         this.bindCommonEvent();
     };
     Mention.prototype.unWireEvent = function () {
-        EventHandler.remove(this.inputElement, 'keyup', this.onKeyUp);
+        if (this.keyupHandler) {
+            EventHandler.remove(this.inputElement, 'keyup', this.keyupHandler);
+            this.keyupHandler = null;
+        }
         this.unBindCommonEvent();
     };
     Mention.prototype.bindCommonEvent = function () {
         if (!Browser.isDevice) {
-            this.inputElement.addEventListener('keydown', this.keyDownHandler.bind(this), !this.isRTE);
+            this.keydownHandler = this.keyDownHandler.bind(this);
+            this.inputElement.addEventListener('keydown', this.keydownHandler, !this.isRTE);
         }
     };
     /**
@@ -343,8 +348,9 @@ var Mention = /** @class */ (function (_super) {
         return !isNullOrUndefined(element);
     };
     Mention.prototype.unBindCommonEvent = function () {
-        if (!Browser.isDevice) {
-            this.inputElement.removeEventListener('keydown', this.keyDownHandler.bind(this), !this.isRTE);
+        if (!Browser.isDevice && this.keydownHandler) {
+            this.inputElement.removeEventListener('keydown', this.keydownHandler, !this.isRTE);
+            this.keydownHandler = null;
         }
     };
     Mention.prototype.onKeyUp = function (e) {
@@ -827,9 +833,11 @@ var Mention = /** @class */ (function (_super) {
                         addClass([popupEle_1], 'e-rte-elements');
                     }
                 }
+                var appendToElement = _this.getAppendToElement();
+                _this.popupAppendTo = appendToElement;
                 if ((!_this.popupObj || !document.body.contains(_this.popupObj.element)) ||
                     !document.contains(popupEle_1) && isNullOrUndefined(_this.target)) {
-                    document.body.appendChild(popupEle_1);
+                    appendToElement.appendChild(popupEle_1);
                 }
                 var coordinates_1;
                 popupEle_1.style.visibility = 'hidden';
@@ -902,6 +910,19 @@ var Mention = /** @class */ (function (_super) {
             }
         });
     };
+    Mention.prototype.getAppendToElement = function () {
+        if (this.popupAppendTo) {
+            return this.popupAppendTo;
+        }
+        if (this.isAngular) {
+            var cdkPane = this.element && this.element.closest ? this.element.closest('.cdk-overlay-pane') : null;
+            var popoverEl = this.element && this.element.closest ? this.element.closest('[popover]') : null;
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    };
     Mention.prototype.setHeight = function (popupEle) {
         if (this.popupHeight !== 'auto' && this.list) {
             this.list.style.maxHeight = (parseInt(this.listHeight, 10) - 2).toString() + 'px'; // due to box-sizing property

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

@@ -75,6 +75,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private isFilterPrevented;
     private isFilteringAction;
     private headerTemplateHeight;
+    private resizeHandler;
     /**
      * The `fields` property maps the columns of the data table and binds the data to the component.
      * * text - Maps the text column from data table for each list item.

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

@@ -3577,7 +3577,8 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.wireEvent = function () {
         EventHandler.add(this.componentWrapper, 'mousedown', this.wrapperClick, this);
-        EventHandler.add(window, 'resize', this.windowResize, this);
+        this.resizeHandler = this.windowResize.bind(this);
+        window.addEventListener('resize', this.resizeHandler);
         EventHandler.add(this.inputElement, 'focus', this.focusInHandler, this);
         EventHandler.add(this.inputElement, 'keydown', this.onKeyDown, this);
         EventHandler.add(this.inputElement, 'keyup', this.keyUp, this);
@@ -4888,7 +4889,10 @@ var MultiSelect = /** @class */ (function (_super) {
         if (!isNullOrUndefined(this.componentWrapper)) {
             EventHandler.remove(this.componentWrapper, 'mousedown', this.wrapperClick);
         }
-        EventHandler.remove(window, 'resize', this.windowResize);
+        if (this.resizeHandler) {
+            window.removeEventListener('resize', this.resizeHandler);
+            this.resizeHandler = null;
+        }
         if (!isNullOrUndefined(this.inputElement)) {
             EventHandler.remove(this.inputElement, 'focus', this.focusInHandler);
             EventHandler.remove(this.inputElement, 'keydown', this.onKeyDown);

package/styles/drop-down-base/material3-dark.css

@@ -230,7 +230,6 @@
 }
 
 .e-mention.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border: 0;
   -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
@@ -402,7 +401,6 @@
 }
 .e-dropdownbase {
   border-color: #e0e0e0;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-dropdownbase .e-list-item {
@@ -417,7 +415,6 @@
   min-height: 32px;
   padding-right: 16px;
   text-indent: 16px;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 
@@ -434,7 +431,6 @@
   padding-right: 16px;
   overflow: hidden;
   text-overflow: ellipsis;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 
@@ -483,7 +479,6 @@
 }
 
 .e-multi-column.e-ddl.e-popup.e-popup-open .e-ddl-header {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border-color: #e0e0e0;
   border-style: solid;
@@ -543,7 +538,6 @@
 }
 
 .e-ddl.e-popup.e-multiselect-group .e-list-group-item {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border-bottom: 0;
   border-color: rgba(var(--color-sf-surface));

package/styles/drop-down-base/material3.css

@@ -234,7 +234,6 @@
 }
 
 .e-mention.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border: 0;
   -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
@@ -408,7 +407,6 @@
 }
 .e-dropdownbase {
   border-color: #e0e0e0;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-dropdownbase .e-list-item {
@@ -423,7 +421,6 @@
   min-height: 32px;
   padding-right: 16px;
   text-indent: 16px;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 
@@ -440,7 +437,6 @@
   padding-right: 16px;
   overflow: hidden;
   text-overflow: ellipsis;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 
@@ -489,7 +485,6 @@
 }
 
 .e-multi-column.e-ddl.e-popup.e-popup-open .e-ddl-header {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-color: #e0e0e0;
   border-style: solid;
@@ -549,7 +544,6 @@
 }
 
 .e-ddl.e-popup.e-multiselect-group .e-list-group-item {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-bottom: 0;
   border-color: rgba(var(--color-sf-surface));

package/styles/drop-down-list/material3-dark.css

@@ -643,7 +643,6 @@
 }
 
 .e-ddl.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border-radius: calc(var(--e-radius) * 0.25);
   position: absolute;

package/styles/drop-down-list/material3.css

@@ -647,7 +647,6 @@
 }
 
 .e-ddl.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-radius: calc(var(--e-radius) * 0.25);
   position: absolute;

package/styles/drop-down-tree/material3-dark.css

@@ -641,7 +641,6 @@
 /* 15px */
 /* 16px */
 .e-ddt .e-chips {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   border-color: rgba(var(--color-sf-outline));
   border: 1px solid;
@@ -656,7 +655,6 @@
   color: #757575;
 }
 .e-ddt.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border-color: rgba(var(--color-sf-outline-variant));
 }

package/styles/drop-down-tree/material3.css

@@ -647,7 +647,6 @@
 
 
 .e-ddt .e-chips {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-color: rgba(var(--color-sf-outline));
   border: 1px solid;
@@ -662,7 +661,6 @@
   color: #757575;
 }
 .e-ddt.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-color: rgba(var(--color-sf-outline-variant));
 }

package/styles/material3-dark-lite.css

@@ -230,7 +230,6 @@
 }
 
 .e-mention.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border: 0;
   -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
@@ -402,7 +401,6 @@
 }
 .e-dropdownbase {
   border-color: #e0e0e0;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-dropdownbase .e-list-item {
@@ -417,7 +415,6 @@
   min-height: 32px;
   padding-right: 16px;
   text-indent: 16px;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 
@@ -434,7 +431,6 @@
   padding-right: 16px;
   overflow: hidden;
   text-overflow: ellipsis;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 
@@ -483,7 +479,6 @@
 }
 
 .e-multi-column.e-ddl.e-popup.e-popup-open .e-ddl-header {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border-color: #e0e0e0;
   border-style: solid;
@@ -543,7 +538,6 @@
 }
 
 .e-ddl.e-popup.e-multiselect-group .e-list-group-item {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border-bottom: 0;
   border-color: rgba(var(--color-sf-surface));
@@ -1130,7 +1124,6 @@
 }
 
 .e-ddl.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border-radius: calc(var(--e-radius) * 0.25);
   position: absolute;
@@ -2012,7 +2005,6 @@ ejs-dropdownlist {
 /* 15px */
 /* 16px */
 .e-ddt .e-chips {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   border-color: rgba(var(--color-sf-outline));
   border: 1px solid;
@@ -2027,7 +2019,6 @@ ejs-dropdownlist {
   color: #757575;
 }
 .e-ddt.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border-color: rgba(var(--color-sf-outline-variant));
 }