@syncfusion/ej2-dropdowns 25.2.7-130084 → 26.1.35-750253

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

@@ -906,6 +906,13 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      */
     render(): void;
     private getListHeight;
+    /**
+     * Removes disabled values from the given array.
+     *
+     * @param { number[] | string[] | boolean[] | object[] } value - The array to check.
+     * @returns {void}
+     */
+    private removeDisabledItemsValue;
     private checkInitialValue;
     private checkAutoFocus;
     private updatevirtualizationList;
@@ -913,6 +920,14 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private addValidInputClass;
     private dropDownIcon;
     private initialUpdate;
+    /**
+     * Method to disable specific item in the popup.
+     *
+     * @param {string | number | object | HTMLLIElement} item - Specifies the item to be disabled.
+     * @returns {void}
+
+     */
+    disableItem(item: string | number | object | HTMLLIElement): void;
     /**
      * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
      *

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

@@ -358,13 +358,26 @@ var MultiSelect = /** @class */ (function (_super) {
             }
             else {
                 if (this.enableVirtualization) {
-                    element = this.ulElement.querySelector('li.'
-                        + dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)');
+                    if (this.fields.disabled) {
+                        element = this.ulElement.querySelector('li.'
+                            + dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)' + ':not(.' + DISABLED + ')');
+                    }
+                    else {
+                        element = this.ulElement.querySelector('li.'
+                            + dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)');
+                    }
                 }
                 else {
-                    element = this.ulElement.querySelector('li.'
-                        + dropDownBaseClasses.li + ':not(.'
-                        + HIDE_LIST + ')');
+                    if (this.fields.disabled) {
+                        element = this.ulElement.querySelector('li.'
+                            + dropDownBaseClasses.li + ':not(.'
+                            + HIDE_LIST + ')' + ':not(.' + DISABLED + ')');
+                    }
+                    else {
+                        element = this.ulElement.querySelector('li.'
+                            + dropDownBaseClasses.li + ':not(.'
+                            + HIDE_LIST + ')');
+                    }
                 }
             }
             if (element !== null) {
@@ -2097,6 +2110,21 @@ var MultiSelect = /** @class */ (function (_super) {
                 }
             }
         }
+        var focusedLi = this.list ? this.list.querySelector('.e-item-focus') : null;
+        if (this.isDisabledElement(focusedLi)) {
+            if (this.list.querySelectorAll('.e-list-item:not(.e-hide-listitem):not(.e-disabled)').length === 0) {
+                this.removeFocus();
+                return;
+            }
+            var index = this.getIndexByValue(focusedLi.getAttribute('data-value'));
+            if (index === 0 && this.mode !== 'CheckBox') {
+                position = 1;
+            }
+            if (index === (this.list.querySelectorAll('.e-list-item:not(.e-hide-listitem)').length - 1)) {
+                position = -1;
+            }
+            this.moveByList(position);
+        }
     };
     MultiSelect.prototype.getElementByValue = function (value) {
         var item;
@@ -2287,7 +2315,7 @@ var MultiSelect = /** @class */ (function (_super) {
                     }
                     _this.setProperties({ value: [].concat([], removeVal) }, true);
                     if (_this.enableVirtualization) {
-                        var currentText = index == 0 ? _this.text.replace(_this.text.split(_this.delimiterChar)[index] + _this.delimiterChar, '') : _this.text.replace(_this.delimiterChar + _this.text.split(_this.delimiterChar)[index], '');
+                        var currentText = index == 0 && _this.text.split(_this.delimiterChar) && _this.text.split(_this.delimiterChar).length == 1 ? _this.text.replace(_this.text.split(_this.delimiterChar)[index], '') : index == 0 ? _this.text.replace(_this.text.split(_this.delimiterChar)[index] + _this.delimiterChar, '') : _this.text.replace(_this.delimiterChar + _this.text.split(_this.delimiterChar)[index], '');
                         _this.setProperties({ text: currentText.toString() }, true);
                     }
                     if (element_1 !== null) {
@@ -3679,7 +3707,7 @@ var MultiSelect = /** @class */ (function (_super) {
         }
     };
     MultiSelect.prototype.addListFocus = function (element) {
-        if (this.enabled && this.isValidLI(element)) {
+        if (this.enabled && (this.isValidLI(element) || (this.fields.disabled && this.isDisabledElement(element)))) {
             this.removeFocus();
             addClass([element], dropDownBaseClasses.focus);
             this.updateAriaActiveDescendant();
@@ -4270,14 +4298,14 @@ var MultiSelect = /** @class */ (function (_super) {
         var li;
         if (!isNullOrUndefined(this.list)) {
             li = this.list.querySelectorAll(state ?
-                'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide):not(.e-virtual-list)' :
-                'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide):not(.e-virtual-list)');
+                'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide):not(.e-disabled):not(.e-virtual-list)' :
+                'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide):not(.e-disabled):not(.e-virtual-list)');
         }
         if (this.value && this.value.length && event && event.target
             && 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):not(.e-virtual-list)' :
-                'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide):not(.e-virtual-list)');
+                'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide):not(.e-disabled):not(.e-virtual-list)' :
+                'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide):not(.e-disabled):not(.e-virtual-list)');
         }
         if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {
             var target = (event ? (this.groupTemplate ? closest(event.target, '.e-list-group-item') : event.target) : null);
@@ -4725,9 +4753,16 @@ var MultiSelect = /** @class */ (function (_super) {
                     this.updateClearButton(newProp.showClearButton);
                     break;
                 case 'text':
+                    if (this.fields.disabled) {
+                        this.text =
+                            this.text && !this.isDisabledItemByIndex(this.getIndexByValue(this.getValueByText(this.text))) ? this.text : null;
+                    }
                     this.updateVal(this.value, this.value, 'text');
                     break;
                 case 'value':
+                    if (this.fields.disabled) {
+                        this.removeDisabledItemsValue(this.value);
+                    }
                     this.updateVal(this.value, oldProp.value, 'value');
                     this.addValidInputClass();
                     if (!this.closePopupOnSelect && this.isPopupOpen()) {
@@ -5299,8 +5334,33 @@ var MultiSelect = /** @class */ (function (_super) {
         listParent.remove();
         return listItemHeight;
     };
+    /**
+     * Removes disabled values from the given array.
+     *
+     * @param { number[] | string[] | boolean[] | object[] } value - The array to check.
+     * @returns {void}
+     */
+    MultiSelect.prototype.removeDisabledItemsValue = function (value) {
+        if (value) {
+            var data = [];
+            var dataIndex = 0;
+            for (var index = 0; index < value.length; index++) {
+                var indexValue = value[index];
+                if (typeof (indexValue) === 'object') {
+                    indexValue = JSON.parse(JSON.stringify(indexValue))[this.fields.value];
+                }
+                if ((indexValue != null) && !(this.isDisabledItemByIndex(this.getIndexByValue(indexValue)))) {
+                    data[dataIndex++] = value[index];
+                }
+            }
+            this.value = data.length > 0 ? data : null;
+        }
+    };
     MultiSelect.prototype.checkInitialValue = function () {
         var _this = this;
+        if (this.fields.disabled) {
+            this.removeDisabledItemsValue(this.value);
+        }
         var isData = this.dataSource instanceof Array ? (this.dataSource.length > 0)
             : !isNullOrUndefined(this.dataSource);
         if (!(this.value && this.value.length) &&
@@ -5339,6 +5399,9 @@ var MultiSelect = /** @class */ (function (_super) {
                 _super.prototype.render.call(this);
             }
         }
+        if (this.fields.disabled) {
+            this.text = this.text && !this.isDisabledItemByIndex(this.getIndexByValue(this.getValueByText(this.text))) ? this.text : null;
+        }
         if (!isNullOrUndefined(this.text) && (isNullOrUndefined(this.value) || this.value.length === 0)) {
             this.initialTextUpdate();
         }
@@ -5473,6 +5536,66 @@ var MultiSelect = /** @class */ (function (_super) {
         this.refreshInputHight();
         this.checkPlaceholderSize();
     };
+    /**
+     * Method to disable specific item in the popup.
+     *
+     * @param {string | number | object | HTMLLIElement} item - Specifies the item to be disabled.
+     * @returns {void}
+
+     */
+    MultiSelect.prototype.disableItem = function (item) {
+        if (this.fields.disabled) {
+            if (!this.list) {
+                this.renderList();
+            }
+            var itemIndex = -1;
+            if (this.liCollections && this.liCollections.length > 0 && this.listData && this.fields.disabled) {
+                if (typeof (item) === 'string') {
+                    itemIndex = this.getIndexByValue(item);
+                }
+                else if (typeof item === 'object') {
+                    if (item instanceof HTMLLIElement) {
+                        for (var index = 0; index < this.liCollections.length; index++) {
+                            if (this.liCollections[index] === item) {
+                                itemIndex = this.getIndexByValue(item.getAttribute('data-value'));
+                                break;
+                            }
+                        }
+                    }
+                    else {
+                        var value = JSON.parse(JSON.stringify(item))[this.fields.value];
+                        for (var index = 0; index < this.listData.length; index++) {
+                            if (JSON.parse(JSON.stringify(this.listData[index]))[this.fields.value] === value) {
+                                itemIndex = this.getIndexByValue(value);
+                                break;
+                            }
+                        }
+                    }
+                }
+                else {
+                    itemIndex = item;
+                }
+                var isValidIndex = itemIndex < this.liCollections.length && itemIndex > -1;
+                if (isValidIndex && !(JSON.parse(JSON.stringify(this.listData[itemIndex]))[this.fields.disabled])) {
+                    var li = this.liCollections[itemIndex];
+                    if (li) {
+                        this.disableListItem(li);
+                        var parsedData = JSON.parse(JSON.stringify(this.listData[itemIndex]));
+                        parsedData[this.fields.disabled] = true;
+                        this.listData[itemIndex] = parsedData;
+                        if (li.classList.contains(dropDownBaseClasses.focus)) {
+                            this.removeFocus();
+                        }
+                        if (li.classList.contains(HIDE_LIST) || li.classList.contains(dropDownBaseClasses.selected)) {
+                            var oldValue = this.value;
+                            this.removeDisabledItemsValue(this.value);
+                            this.updateVal(this.value, oldValue, 'value');
+                        }
+                    }
+                }
+            }
+        }
+    };
     /**
      * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
      *
@@ -5540,7 +5663,7 @@ var MultiSelect = /** @class */ (function (_super) {
         this.selectAllEventEle = null;
     };
     __decorate([
-        Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)
+        Complex({ text: null, value: null, iconCss: null, groupBy: null, disabled: null }, FieldSettings)
     ], MultiSelect.prototype, "fields", void 0);
     __decorate([
         Property(false)

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

@@ -0,0 +1,2 @@
+//default
+//enddefault

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

@@ -0,0 +1,2 @@
+//default
+//enddefault

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

@@ -1,6 +1,7 @@
 .e-popup.e-ddl {
   border-radius: 4px;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
+          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
   margin-top: 3px;
 }
 .e-popup.e-ddl .e-input-group {
@@ -15,6 +16,7 @@
 }
 
 .e-popup.e-ddl .e-filter-parent .e-input-group {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: auto;
@@ -73,7 +75,8 @@
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-input-group-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 
 .e-ddl.e-popup .e-filter-parent {

package/styles/auto-complete/bootstrap.css

@@ -1,6 +1,7 @@
 .e-popup.e-ddl {
   border-radius: 4px;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
   margin-top: 3px;
 }
 .e-popup.e-ddl .e-input-group {
@@ -15,6 +16,7 @@
 }
 
 .e-popup.e-ddl .e-filter-parent .e-input-group {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: auto;
@@ -73,7 +75,8 @@
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-input-group-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 
 .e-ddl.e-popup .e-filter-parent {

package/styles/auto-complete/bootstrap4.css

@@ -1,6 +1,7 @@
 .e-popup.e-ddl {
   border-radius: 4px;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   margin-top: 3px;
 }
 .e-popup.e-ddl .e-input-group {
@@ -15,6 +16,7 @@
 }
 
 .e-popup.e-ddl .e-filter-parent .e-input-group {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: auto;
@@ -91,11 +93,13 @@
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-input-group-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon {
   background: transparent;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   position: relative;

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

@@ -1,6 +1,7 @@
 .e-popup.e-ddl {
   border-radius: 4px;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   margin-top: 3px;
 }
 .e-popup.e-ddl .e-input-group {
@@ -15,6 +16,7 @@
 }
 
 .e-popup.e-ddl .e-filter-parent .e-input-group {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: auto;
@@ -102,11 +104,13 @@
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-input-group-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon {
   background: transparent;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   position: relative;

package/styles/auto-complete/bootstrap5.css

@@ -1,6 +1,7 @@
 .e-popup.e-ddl {
   border-radius: 4px;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   margin-top: 3px;
 }
 .e-popup.e-ddl .e-input-group {
@@ -15,6 +16,7 @@
 }
 
 .e-popup.e-ddl .e-filter-parent .e-input-group {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: auto;
@@ -102,11 +104,13 @@
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-input-group-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon {
   background: transparent;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   position: relative;

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

@@ -1,6 +1,7 @@
 .e-ddl.e-popup {
   border: 0;
-  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.26);
+  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.26);
+          box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.26);
   margin-top: 1px;
 }
 .e-ddl.e-popup .e-input-group input {
@@ -8,6 +9,7 @@
 }
 
 .e-ddl.e-popup .e-input-group {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: auto;

package/styles/auto-complete/fabric.css

@@ -1,6 +1,7 @@
 .e-ddl.e-popup {
   border: 0;
-  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+          box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
   margin-top: 1px;
 }
 .e-ddl.e-popup .e-input-group input {
@@ -8,6 +9,7 @@
 }
 
 .e-ddl.e-popup .e-input-group {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: auto;

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

@@ -1,6 +1,7 @@
 .e-popup.e-ddl {
   border-radius: 4px;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   margin-top: 1px;
 }
 .e-popup.e-ddl .e-input-group {
@@ -15,6 +16,7 @@
 }
 
 .e-popup.e-ddl .e-filter-parent .e-input-group {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: auto;
@@ -86,11 +88,13 @@
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-input-group-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon {
   background: none;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   position: relative;

package/styles/auto-complete/fluent.css

@@ -1,6 +1,7 @@
 .e-popup.e-ddl {
   border-radius: 4px;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   margin-top: 1px;
 }
 .e-popup.e-ddl .e-input-group {
@@ -15,6 +16,7 @@
 }
 
 .e-popup.e-ddl .e-filter-parent .e-input-group {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: auto;
@@ -86,11 +88,13 @@
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-input-group-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon {
   background: none;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   position: relative;