@syncfusion/ej2-dropdowns 27.2.5 → 28.1.35

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

@@ -68,6 +68,7 @@ var BOX_ELEMENT = 'e-multiselect-box';
 var FILTERPARENT = 'e-filter-parent';
 var CUSTOM_WIDTH = 'e-search-custom-width';
 var FILTERINPUT = 'e-input-filter';
+var RESIZE_ICON = 'e-resizer-right e-icons';
 /**
  * The Multiselect allows the user to pick a more than one value from list of predefined values.
  * ```html
@@ -99,6 +100,9 @@ var MultiSelect = /** @class */ (function (_super) {
         var _this = _super.call(this, option, element) || this;
         _this.clearIconWidth = 0;
         _this.previousFilterText = '';
+        _this.storedSelectAllHeight = 0;
+        _this.isUpdateHeaderHeight = false;
+        _this.isUpdateFooterHeight = false;
         _this.isValidKey = false;
         _this.selectAllEventData = [];
         _this.selectAllEventEle = [];
@@ -249,7 +253,7 @@ var MultiSelect = /** @class */ (function (_super) {
         var eventArgs = { popup: this.popupObj, event: e, cancel: false, animation: animModel };
         this.trigger('open', eventArgs, function (eventArgs) {
             if (!eventArgs.cancel) {
-                _this.focusAtFirstListItem();
+                _this.focusAtFirstListItem(true);
                 if (_this.popupObj) {
                     document.body.appendChild(_this.popupObj.element);
                 }
@@ -264,6 +268,23 @@ var MultiSelect = /** @class */ (function (_super) {
                 if (_this.popupObj) {
                     _this.popupObj.show(eventArgs.animation, (_this.zIndex === 1000) ? _this.element : null);
                 }
+                if (_this.isReact) {
+                    setTimeout(function () {
+                        if (_this.popupHeight && _this.list && _this.popupHeight !== 'auto') {
+                            var popupHeightValue = typeof _this.popupHeight === 'string' ? parseInt(_this.popupHeight, 10) : _this.popupHeight;
+                            if (!_this.isUpdateHeaderHeight && _this.headerTemplate && _this.header) {
+                                var listHeight = _this.list.style.maxHeight === '' ? popupHeightValue : parseInt(_this.list.style.maxHeight, 10);
+                                _this.list.style.maxHeight = (listHeight - _this.header.offsetHeight).toString() + 'px';
+                                _this.isUpdateHeaderHeight = true;
+                            }
+                            if (!_this.isUpdateFooterHeight && _this.footerTemplate && _this.footer) {
+                                var listHeight = _this.list.style.maxHeight === '' ? popupHeightValue : parseInt(_this.list.style.maxHeight, 10);
+                                _this.list.style.maxHeight = (listHeight - _this.footer.offsetHeight).toString() + 'px';
+                                _this.isUpdateFooterHeight = true;
+                            }
+                        }
+                    }, 15);
+                }
                 attributes(_this.inputElement, {
                     'aria-expanded': 'true', 'aria-owns': _this.element.id + '_popup', 'aria-controls': _this.element.id
                 });
@@ -340,16 +361,16 @@ var MultiSelect = /** @class */ (function (_super) {
                 : this.value[this.value.length - 1];
             var valueEle = this.findListElement((this.hideSelectedItem ? this.ulElement : this.list), 'li', 'data-value', value);
             if (!isNullOrUndefined(valueEle)) {
-                this.scrollBottom(valueEle);
+                this.scrollBottom(valueEle, undefined, false, null, true);
             }
         }
         if (this.enableVirtualization) {
             var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
             this.isKeyBoardAction = false;
-            this.scrollBottom(focusedItem);
+            this.scrollBottom(focusedItem, undefined, false, null, true);
         }
     };
-    MultiSelect.prototype.focusAtFirstListItem = function () {
+    MultiSelect.prototype.focusAtFirstListItem = function (isOpen) {
         if (this.ulElement && this.ulElement.querySelector('li.'
             + dropDownBaseClasses.li)) {
             var element = void 0;
@@ -362,10 +383,18 @@ var MultiSelect = /** @class */ (function (_super) {
                     if (this.fields.disabled) {
                         element = this.ulElement.querySelector('li.'
                             + dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)' + ':not(.' + DISABLED + ')');
+                        if (isOpen && this.viewPortInfo && this.viewPortInfo.startIndex !== 0) {
+                            var elements = this.ulElement.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)');
+                            element = elements && elements.length > 0 ? elements[2] : element;
+                        }
                     }
                     else {
                         element = this.ulElement.querySelector('li.'
                             + dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)');
+                        if (isOpen && this.viewPortInfo && this.viewPortInfo.startIndex !== 0) {
+                            var elements = this.ulElement.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)');
+                            element = elements && elements.length > 0 ? elements[2] : element;
+                        }
                     }
                 }
                 else {
@@ -662,7 +691,7 @@ var MultiSelect = /** @class */ (function (_super) {
                     if (this.hideSelectedItem && element.classList.contains(dropDownBaseClasses.focus)) {
                         removeClass([element], dropDownBaseClasses.focus);
                         var listEle = element.parentElement.querySelectorAll('.' +
-                            dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')');
+                            dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.' + DISABLED + ')');
                         if (listEle.length > 0) {
                             addClass([listEle[0]], dropDownBaseClasses.focus);
                             this.updateAriaActiveDescendant();
@@ -831,7 +860,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
                     filterQuery.where('', this.filterType, this.targetElement(), this.ignoreCase, this.ignoreAccent);
                 }
-                else if ((this.enableVirtualization && this.targetElement() !== '') || !this.enableVirtualization) {
+                else if ((this.enableVirtualization && this.targetElement() !== '' && !this.isClearAllAction) || !this.enableVirtualization) {
                     var fields = this.fields;
                     filterQuery.where(!isNullOrUndefined(fields.text) ? fields.text : '', this.filterType, this.targetElement(), this.ignoreCase, this.ignoreAccent);
                 }
@@ -839,6 +868,11 @@ var MultiSelect = /** @class */ (function (_super) {
             if (this.enableVirtualization && (this.viewPortInfo.endIndex !== 0) && !this.virtualSelectAll) {
                 return this.virtualFilterQuery(filterQuery);
             }
+            if (this.virtualSelectAll) {
+                return query ? query.take(this.maximumSelectionLength).requiresCount() : this.query ?
+                    this.query.take(this.maximumSelectionLength).requiresCount() :
+                    new Query().take(this.maximumSelectionLength).requiresCount();
+            }
             return filterQuery;
         }
         else {
@@ -1027,6 +1061,9 @@ var MultiSelect = /** @class */ (function (_super) {
             this.getFilteringSkeletonCount();
         }
         this.refreshPopup();
+        if (this.allowResize) {
+            this.setResize();
+        }
         if (this.mode === 'CheckBox') {
             this.removeFocus();
         }
@@ -1360,6 +1397,15 @@ var MultiSelect = /** @class */ (function (_super) {
             ':not(.' + HIDE_LIST + ')' +
             ':not(.e-reorder-hide)');
         var previousItem = steps >= 0 ? collection[steps + 1] : collection[0];
+        if (this.fields.disabled && previousItem && !this.enableVirtualization) {
+            while (previousItem && (previousItem.classList.contains('e-disabled') || previousItem.classList.contains(HIDE_LIST) ||
+                previousItem.classList.contains('.e-reorder-hide') || previousItem.classList.contains('e-list-group-item'))) {
+                previousItem = previousItem.previousElementSibling;
+            }
+            if (!previousItem) {
+                return;
+            }
+        }
         if (this.enableVirtualization && isVirtualKeyAction) {
             previousItem = (this.liCollections.length >= steps && steps >= 0)
                 ? this.liCollections[steps]
@@ -1391,6 +1437,15 @@ var MultiSelect = /** @class */ (function (_super) {
         var collection = this.list.querySelectorAll('li.'
             + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
         var previousItem = steps <= collection.length ? collection[steps - 1] : collection[collection.length - 1];
+        if (this.fields.disabled && previousItem && !this.enableVirtualization) {
+            while (previousItem && (previousItem.classList.contains('e-disabled') || previousItem.classList.contains(HIDE_LIST) ||
+                previousItem.classList.contains('.e-reorder-hide') || previousItem.classList.contains('e-list-group-item'))) {
+                previousItem = previousItem.nextElementSibling;
+            }
+            if (!previousItem) {
+                return;
+            }
+        }
         if (this.enableVirtualization && this.skeletonCount > 0) {
             previousItem = steps < list.length ? this.liCollections[steps] : this.liCollections[list.length - 1];
         }
@@ -1442,6 +1497,9 @@ var MultiSelect = /** @class */ (function (_super) {
             if (this.isPopupOpen()) {
                 this.refreshPopup();
             }
+            if (this.allowResize) {
+                this.setResize();
+            }
             setTimeout(function () {
                 _this.calculateWidth();
             }, 150);
@@ -1678,6 +1736,7 @@ var MultiSelect = /** @class */ (function (_super) {
                     if (this.mode === 'CheckBox') {
                         this.inputElement.focus();
                     }
+                    this.isKeyBoardAction = false;
                     return;
                 case 13:
                     e.preventDefault();
@@ -1686,10 +1745,12 @@ var MultiSelect = /** @class */ (function (_super) {
                         this.selectByKey(e);
                     }
                     this.checkPlaceholderSize();
+                    this.isKeyBoardAction = false;
                     return;
                 case 32:
                     this.isKeyBoardAction = true;
                     this.spaceKeySelection(e);
+                    this.isKeyBoardAction = false;
                     return;
                 case 9:
                     e.preventDefault();
@@ -1731,6 +1792,9 @@ var MultiSelect = /** @class */ (function (_super) {
         if (!(this.mode === 'CheckBox' && this.showSelectAll)) {
             this.refreshPopup();
         }
+        if (this.allowResize) {
+            this.setResize();
+        }
         this.isKeyBoardAction = false;
     };
     MultiSelect.prototype.arrowDown = function (e, isVirtualKeyAction) {
@@ -1855,9 +1919,10 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         this.makeTextBoxEmpty();
     };
-    MultiSelect.prototype.scrollBottom = function (selectedLI, activeIndex, isInitialSelection, keyCode) {
+    MultiSelect.prototype.scrollBottom = function (selectedLI, activeIndex, isInitialSelection, keyCode, isInitial) {
         if (isInitialSelection === void 0) { isInitialSelection = false; }
         if (keyCode === void 0) { keyCode = null; }
+        if (isInitial === void 0) { isInitial = false; }
         if ((!isNullOrUndefined(selectedLI) && selectedLI.classList.contains('e-virtual-list')) ||
             (this.enableVirtualization && isNullOrUndefined(selectedLI))) {
             selectedLI = this.liCollections[this.skeletonCount];
@@ -1912,8 +1977,9 @@ var MultiSelect = /** @class */ (function (_super) {
                 }
             }
             else {
-                this.list.scrollTop = this.virtualListInfo &&
-                    this.virtualListInfo.startIndex ? this.virtualListInfo.startIndex * this.listItemHeight : 0;
+                this.list.scrollTop = this.virtualListInfo && this.virtualListInfo.startIndex ?
+                    isInitial && this.virtualListInfo.startIndex ? this.virtualListInfo.startIndex * this.listItemHeight +
+                        (this.listItemHeight * 2) : this.virtualListInfo.startIndex * this.listItemHeight : 0;
             }
             isScrollerCHanged = this.isKeyBoardAction;
             isScrollTopChanged = true;
@@ -2116,6 +2182,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 this.getDataByValue(this.getFormattedValue(selectedElem.getAttribute('data-value'))) :
                 selectedElem.getAttribute('data-value');
             this.removeValue(currentChip, e);
+            this.updateDelimeter(this.delimiterChar, e);
             this.makeTextBoxEmpty();
         }
         if (this.closePopupOnSelect) {
@@ -2238,7 +2305,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 return;
             }
             var index = this.getIndexByValue(focusedLi.getAttribute('data-value'));
-            if (index === 0 && this.mode !== 'CheckBox') {
+            if (index === 0) {
                 position = 1;
             }
             if (index === (this.list.querySelectorAll('.e-list-item:not(.e-hide-listitem)').length - 1)) {
@@ -2894,6 +2961,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 if (this.headerTemplate) {
                     this.setHeaderTemplate();
                     overAllHeight -= this.header.offsetHeight;
+                    this.isUpdateHeaderHeight = this.header.offsetHeight !== 0;
                 }
                 append([this.list], this.popupWrapper);
                 if (!this.list.classList.contains(dropDownBaseClasses.noData) && this.getItems()[1]) {
@@ -2931,6 +2999,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 if (this.footerTemplate) {
                     this.setFooterTemplate();
                     overAllHeight -= this.footer.offsetHeight;
+                    this.isUpdateFooterHeight = this.footer.offsetHeight !== 0;
                 }
                 if (this.mode === 'CheckBox' && this.showSelectAll) {
                     this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
@@ -3048,6 +3117,9 @@ var MultiSelect = /** @class */ (function (_super) {
                 if (this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering && this.isDeviceFullScreen) {
                     this.notify('deviceSearchBox', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
                 }
+                if (this.allowResize) {
+                    this.setResize();
+                }
                 this.popupObj.close();
                 this.popupWrapper.style.visibility = '';
             }
@@ -3171,6 +3243,7 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.enabled && !this.readonly) {
             var temp = void 0;
             this.setDynValue = false;
+            this.isClearAllAction = true;
             if (this.value && this.value.length > 0) {
                 if (this.allowFiltering) {
                     this.refreshListItems(null);
@@ -3217,6 +3290,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 this.previousStartIndex = 0;
                 this.previousEndIndex = 0;
             }
+            this.isClearAllAction = false;
         }
         this.isClearAllItem = true;
         EventHandler.add(document, 'mouseup', this.preventSelection, this);
@@ -3247,6 +3321,9 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.isPopupOpen()) {
             this.refreshPopup();
         }
+        if (this.allowResize) {
+            this.setResize();
+        }
         if (!this.inputFocus) {
             if (this.changeOnBlur) {
                 this.updateValueState(e, this.value, tempValues);
@@ -4061,6 +4138,9 @@ var MultiSelect = /** @class */ (function (_super) {
                     }
                     this.checkSelectAll();
                     this.refreshPopup();
+                    if (this.allowResize) {
+                        this.setResize();
+                    }
                     if (this.hideSelectedItem) {
                         this.focusAtFirstListItem();
                     }
@@ -4575,6 +4655,22 @@ var MultiSelect = /** @class */ (function (_super) {
             EventHandler.remove(this.inputElement, 'paste', this.pasteHandler);
         }
     };
+    MultiSelect.prototype.resizingWireEvent = function () {
+        // Mouse events
+        EventHandler.add(document, 'mousemove', this.resizePopup, this);
+        EventHandler.add(document, 'mouseup', this.stopResizing, this);
+        // Touch events
+        EventHandler.add(document, 'touchmove', this.resizePopup, this);
+        EventHandler.add(document, 'touchend', this.stopResizing, this);
+    };
+    MultiSelect.prototype.resizingUnWireEvent = function () {
+        // Mouse events
+        EventHandler.remove(document, 'mousemove', this.resizePopup);
+        EventHandler.remove(document, 'mouseup', this.stopResizing);
+        // Touch events
+        EventHandler.remove(document, 'touchmove', this.resizePopup);
+        EventHandler.remove(document, 'touchend', this.stopResizing);
+    };
     MultiSelect.prototype.selectAllItem = function (state, event, list) {
         var li;
         if (!isNullOrUndefined(this.list)) {
@@ -5101,6 +5197,20 @@ var MultiSelect = /** @class */ (function (_super) {
                     this.enableRTL(newProp.enableRtl);
                     _super.prototype.onPropertyChanged.call(this, newProp, oldProp);
                     break;
+                case 'allowResize':
+                    this.allowResize = newProp.allowResize;
+                    if (!this.allowResize && this.popupObj) {
+                        var overAllHeight = parseInt(this.popupHeight, 10);
+                        if (this.popupHeight !== 'auto') {
+                            this.list.style.maxHeight = formatUnit(overAllHeight);
+                            this.popupWrapper.style.height = formatUnit(this.popupHeight);
+                            this.popupWrapper.style.maxHeight = formatUnit(this.popupHeight);
+                        }
+                        else {
+                            this.list.style.maxHeight = formatUnit(this.popupHeight);
+                        }
+                    }
+                    break;
                 case 'readonly':
                     this.updateReadonly(newProp.readonly);
                     this.hidePopup();
@@ -5345,6 +5455,24 @@ var MultiSelect = /** @class */ (function (_super) {
                     if (_this.mode === 'CheckBox' && _this.showSelectAll) {
                         EventHandler.remove(_this.popupObj.element, 'click', _this.clickHandler);
                     }
+                    if (_this.list && _this.list.parentElement && _this.allowResize) {
+                        if (_this.resizer && _this.list.parentElement.contains(_this.resizer)) {
+                            _this.list.parentElement.removeChild(_this.resizer);
+                        }
+                        if (_this.list.parentElement.classList.contains('e-resize')) {
+                            _this.list.parentElement.classList.remove('e-resize');
+                        }
+                        _this.list.parentElement.style.boxSizing = '';
+                        _this.list.parentElement.style.paddingBottom = '';
+                        var overAllHeight = parseInt(_this.popupHeight, 10);
+                        _this.list.style.maxHeight = formatUnit(overAllHeight);
+                        _this.list.parentElement.style.height = formatUnit(_this.popupHeight);
+                        _this.list.parentElement.style.maxHeight = formatUnit(_this.popupHeight);
+                    }
+                    if (_this.resizer) {
+                        EventHandler.remove(_this.resizer, 'mousedown', _this.startResizing);
+                        _this.resizer.remove();
+                    }
                     if (_this.enableVirtualization && _this.mode === 'CheckBox' && _this.value && _this.value.length > 0 &&
                         _this.enableSelectionOrder) {
                         _this.viewPortInfo.startIndex = _this.virtualItemStartIndex = 0;
@@ -5462,6 +5590,9 @@ var MultiSelect = /** @class */ (function (_super) {
                         }
                     }
                 }
+                if (_this.allowResize) {
+                    _this.setResize();
+                }
                 _this.preventSetCurrentData = true;
             }
         });
@@ -5647,6 +5778,102 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         this.renderComplete();
     };
+    MultiSelect.prototype.setResize = function () {
+        var resizePaddingBottom = 16;
+        if (this.list && this.list.parentElement && isNullOrUndefined(this.list.parentElement.querySelector('.e-resizer-right.e-icons'))) {
+            this.resizer = this.createElement('div', {
+                id: this.element.id + '_resize-popup',
+                className: RESIZE_ICON
+            });
+        }
+        if (this.mode === 'CheckBox' && this.showSelectAll && this.selectAllHeight && this.selectAllHeight !== 0) {
+            this.storedSelectAllHeight = this.selectAllHeight;
+        }
+        if (this.list && this.list.parentElement) {
+            this.list.parentElement.classList.add('e-resize');
+            if (this.popupHeight.toString().toLowerCase() !== 'auto') {
+                this.list.parentElement.style.height = '100%';
+            }
+            this.list.parentElement.style.boxSizing = 'border-box'; // Ensures padding doesn't affect element size
+            var paddingBottom = this.mode === 'CheckBox' && this.searchBoxHeight ? this.searchBoxHeight + resizePaddingBottom + (this.showSelectAll ? this.storedSelectAllHeight : 0) : resizePaddingBottom;
+            this.list.parentElement.style.paddingBottom = paddingBottom + "px";
+            this.list.parentElement.appendChild(this.resizer);
+            this.list.parentElement.style.width = this.resizeWidth + 'px';
+            this.list.parentElement.style.height = this.resizeHeight + 'px';
+            this.list.parentElement.style.maxHeight = this.resizeHeight + 'px';
+            this.list.style.maxHeight = this.resizeHeight + "px";
+        }
+        if (this.resizer) {
+            EventHandler.add(this.resizer, 'mousedown', this.startResizing, this);
+            EventHandler.add(this.resizer, 'touchstart', this.startResizing, this);
+        }
+    };
+    MultiSelect.prototype.startResizing = function (event) {
+        this.isResizing = true;
+        this.trigger('resizeStart', event);
+        // Get initial touch or mouse coordinates
+        var clientX = (event instanceof MouseEvent) ? event.clientX : event.touches[0].clientX;
+        var clientY = (event instanceof MouseEvent) ? event.clientY : event.touches[0].clientY;
+        if (this.list && this.list.parentElement) {
+            this.originalWidth = this.list.parentElement.offsetWidth;
+            this.originalHeight = this.list.parentElement.offsetHeight;
+            this.originalMouseX = clientX;
+            this.originalMouseY = clientY;
+        }
+        this.resizingWireEvent();
+        // Prevent default behavior like text selection
+        if (event) {
+            event.preventDefault();
+        }
+    };
+    MultiSelect.prototype.resizePopup = function (event) {
+        if (!this.isResizing) {
+            return;
+        }
+        this.trigger('resizing', event);
+        // Get the current touch or mouse position
+        var clientX = (event instanceof MouseEvent) ? event.clientX : event.touches[0].clientX;
+        var clientY = (event instanceof MouseEvent) ? event.clientY : event.touches[0].clientY;
+        // Calculate the new width and height based on drag
+        var dx = clientX - this.originalMouseX;
+        var dy = clientY - this.originalMouseY;
+        // Set minimum width and height (100px)
+        var minWidth = 100;
+        var minHeight = 130;
+        // Ensure the new width and height are not smaller than the minimum
+        this.resizeWidth = Math.max(this.originalWidth + dx, minWidth);
+        this.resizeHeight = Math.max(this.originalHeight + dy, minHeight);
+        if (this.list && this.list.parentElement) {
+            // Set minimum width and height (100px)
+            var minWidth_1 = parseInt(window.getComputedStyle(this.list.parentElement).minWidth, 10);
+            var minHeight_1 = parseInt(window.getComputedStyle(this.list.parentElement).minHeight, 10);
+            minWidth_1 = minWidth_1 || 100;
+            minHeight_1 = minHeight_1 || 120;
+            // Ensure the new width and height are not smaller than the minimum
+            this.resizeWidth = Math.max(this.originalWidth + dx, minWidth_1);
+            this.resizeHeight = Math.max(this.originalHeight + dy, minHeight_1);
+            this.list.parentElement.style.width = this.resizeWidth + "px";
+            this.list.parentElement.style.height = this.resizeHeight + "px";
+            this.list.parentElement.style.maxHeight = this.resizeHeight + "px";
+            this.list.style.maxHeight = this.resizeHeight + "px";
+            if (this.fixedHeaderElement && this.ulElement) {
+                this.fixedHeaderElement.style.width = this.ulElement.offsetWidth + "px";
+            }
+        }
+        if (event) {
+            event.preventDefault();
+        }
+    };
+    MultiSelect.prototype.stopResizing = function (event) {
+        if (this.isResizing) {
+            this.isResizing = false;
+            this.trigger('resizeStop', event);
+            this.resizingUnWireEvent();
+        }
+        if (event) {
+            event.preventDefault();
+        }
+    };
     MultiSelect.prototype.getListHeight = function () {
         var listParent = this.createElement('div', {
             className: 'e-dropdownbase'
@@ -6034,6 +6261,7 @@ var MultiSelect = /** @class */ (function (_super) {
         this.inputElement = null;
         this.delimiterWrapper = null;
         this.liCollections = null;
+        this.popupContentElement = null;
         this.header = null;
         this.mainList = null;
         this.mainListCollection = null;
@@ -6143,6 +6371,9 @@ var MultiSelect = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], MultiSelect.prototype, "readonly", void 0);
+    __decorate([
+        Property(false)
+    ], MultiSelect.prototype, "allowResize", void 0);
     __decorate([
         Property(null)
     ], MultiSelect.prototype, "text", void 0);
@@ -6224,6 +6455,15 @@ var MultiSelect = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], MultiSelect.prototype, "chipSelection", void 0);
+    __decorate([
+        Event()
+    ], MultiSelect.prototype, "resizeStop", void 0);
+    __decorate([
+        Event()
+    ], MultiSelect.prototype, "resizing", void 0);
+    __decorate([
+        Event()
+    ], MultiSelect.prototype, "resizeStart", void 0);
     __decorate([
         Event()
     ], MultiSelect.prototype, "filtering", void 0);

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

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

package/styles/auto-complete/bds.css

@@ -0,0 +1,75 @@
+
+
+
+
+.e-ddl.e-control-wrapper .e-ddl-icon::before {
+  -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+  -webkit-transition: -webkit-transform 300ms ease;
+  transition: -webkit-transform 300ms ease;
+  transition: transform 300ms ease;
+  transition: transform 300ms ease, -webkit-transform 300ms ease;
+}
+
+.e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+  -webkit-transition: -webkit-transform 300ms ease;
+  transition: -webkit-transform 300ms ease;
+  transition: transform 300ms ease;
+  transition: transform 300ms ease, -webkit-transform 300ms ease;
+}
+
+.e-dropdownbase .e-list-item.e-active.e-hover {
+  color: var(--color-sf-text-primary);
+}
+
+.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
+.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
+.e-input-group:not(.e-disabled) .e-back-icon:active,
+.e-input-group:not(.e-disabled) .e-back-icon:hover,
+.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:active,
+.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:hover {
+  background: transparent;
+}
+
+.e-input-group .e-ddl-icon:not(:active)::after {
+  -webkit-animation: none;
+          animation: none;
+}
+
+.e-ddl.e-popup {
+  border: 0;
+  border-radius: 8px;
+  -webkit-box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
+          box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
+  margin-top: 4px;
+}
+
+.e-small .e-ddl.e-popup,
+.e-small.e-ddl.e-popup {
+  border-radius: 4px;
+  margin-top: 2px;
+}
+
+.e-popup.e-ddl .e-dropdownbase {
+  min-height: 26px;
+  padding: 4px 6px;
+}
+
+.e-input-group.e-ddl,
+.e-input-group.e-ddl .e-input,
+.e-input-group.e-ddl .e-ddl-icon {
+  background: var(--color-sf-bg-primary);
+}
+
+.e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group:hover:not(.e-disabled):not(.e-float-icon-left),
+.e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left) {
+  border-bottom-width: 0;
+}
+
+.e-ddl.e-popup.e-outline .e-filter-parent {
+  padding: 4px 8px;
+}
+
+/* stylelint-disable-line no-empty-source */

package/styles/auto-complete/bds.scss

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

package/styles/auto-complete/highcontrast.css

@@ -11,7 +11,7 @@
 .e-ddl.e-popup .e-content.e-nodata {
   background-color: #000;
 }
-.e-ddl.e-popup .e-dropdownbase .e-list-item .e-highlight {
+.e-ddl.e-popup .e-dropdownbase .e-list-item:not(.e-active) .e-highlight {
   color: #ffd939;
 }
 .e-ddl.e-popup .e-input-group {