@syncfusion/ej2-dropdowns 24.2.8 → 25.1.35

package/src/mention/mention.js

@@ -103,6 +103,8 @@ var Mention = /** @class */ (function (_super) {
         this.isPopupOpen = false;
         this.isCollided = false;
         this.lineBreak = false;
+        this.isRTE = false;
+        this.keyEventName = 'mousedown';
     };
     /**
      * Execute before render the list items
@@ -148,7 +150,7 @@ var Mention = /** @class */ (function (_super) {
     };
     Mention.prototype.bindCommonEvent = function () {
         if (!Browser.isDevice) {
-            this.inputElement.addEventListener('keydown', this.keyDownHandler.bind(this), true);
+            this.inputElement.addEventListener('keydown', this.keyDownHandler.bind(this), !this.isRTE);
         }
     };
     /**
@@ -178,6 +180,10 @@ var Mention = /** @class */ (function (_super) {
                 return parentElement.querySelector('.e-content');
             }
         }
+        if (targetElement && targetElement.parentElement && targetElement.parentElement.classList.contains('e-rte-content')) {
+            this.isRTE = true;
+            this.keyEventName = 'click';
+        }
         return targetElement;
     };
     /**
@@ -319,7 +325,7 @@ var Mention = /** @class */ (function (_super) {
     };
     Mention.prototype.unBindCommonEvent = function () {
         if (!Browser.isDevice) {
-            this.inputElement.removeEventListener('keydown', this.keyDownHandler.bind(this), true);
+            this.inputElement.removeEventListener('keydown', this.keyDownHandler.bind(this), !this.isRTE);
         }
     };
     Mention.prototype.onKeyUp = function (e) {
@@ -330,7 +336,7 @@ var Mention = /** @class */ (function (_super) {
         }
         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) {
+        if (document.activeElement != this.inputElement && isRteImage) {
             this.inputElement.focus();
         }
         if (this.isContentEditable(this.inputElement)) {
@@ -356,9 +362,9 @@ var Mention = /** @class */ (function (_super) {
                 this.range.startContainer.previousElementSibling && this.range.startContainer.previousElementSibling.tagName !== 'BR' && this.range.startContainer.textContent.split('').length > 0 &&
                 (rangetextContent.length === 1 || rangetextContent[rangetextContent.length - 2].indexOf('') === -1 ||
                     this.range.startContainer.nodeType === 1))) {
-            if (this.allowSpaces && currentRange && currentRange.trim() !== '' && charRegex.test(currentRange) && currentRange.indexOf(this.mentionChar) !== -1
+            if (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)) {
+                (this.list && this.list.querySelectorAll('ul').length > 0) && e.code !== 'Enter') {
                 this.queryString = currentRange.substring(currentRange.lastIndexOf(this.mentionChar) + 1).replace('\u00a0', ' ');
                 this.searchLists(e);
             }
@@ -864,6 +870,9 @@ var Mention = /** @class */ (function (_super) {
             this.popupObj.element.removeAttribute('style');
             this.popupObj.element.removeAttribute('aria-disabled');
         }
+        if (this.list.classList.contains('e-nodata')) {
+            this.list = null;
+        }
     };
     Mention.prototype.onDocumentClick = function (e) {
         var target = e.target;
@@ -974,6 +983,7 @@ var Mention = /** @class */ (function (_super) {
         return coordinates;
     };
     Mention.prototype.initValue = function () {
+        this.isDataFetched = false;
         this.renderList();
         if (this.dataSource instanceof DataManager) {
             this.initRemoteRender = true;
@@ -999,7 +1009,7 @@ var Mention = /** @class */ (function (_super) {
      * @returns {void}
      */
     Mention.prototype.wireListEvents = function () {
-        EventHandler.add(this.list, 'mousedown', this.onMouseClick, this);
+        EventHandler.add(this.list, this.keyEventName, this.onMouseClick, this);
         EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);
         EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);
     };
@@ -1009,7 +1019,7 @@ var Mention = /** @class */ (function (_super) {
      * @returns {void}
      */
     Mention.prototype.unWireListEvents = function () {
-        EventHandler.remove(this.list, 'mousedown', this.onMouseClick);
+        EventHandler.remove(this.list, this.keyEventName, this.onMouseClick);
         EventHandler.remove(this.list, 'mouseover', this.onMouseOver);
         EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);
     };
@@ -1024,7 +1034,9 @@ var Mention = /** @class */ (function (_super) {
         var delay = 100;
         this.closePopup(delay, e);
         this.inputElement.focus();
-        e.preventDefault();
+        if (!this.isRTE) {
+            e.preventDefault();
+        }
     };
     Mention.prototype.updateSelectedItem = function (li, e, preventSelect, isSelection) {
         var _this = this;
@@ -1265,7 +1277,7 @@ var Mention = /** @class */ (function (_super) {
             if (this.isPopupOpen) {
                 this.hidePopup();
             }
-            //New event to update the RichTextEditor value, when a mention item is selected using mouse click action. 
+            //New event to update the RichTextEditor value, when a mention item is selected using mouse click action.
             if (!isNullOrUndefined(e.pointerType) && e.pointerType === 'mouse') {
                 var event_1 = new CustomEvent('content-changed', { detail: { click: true } });
                 this.inputElement.dispatchEvent(event_1);

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

@@ -146,7 +146,7 @@ var CheckBoxSelection = /** @class */ (function () {
                 }
                 EventHandler.add(this.checkAllParent, 'mousedown', this.clickHandler, this);
             }
-            if (this.parent.list.classList.contains('e-nodata') || (this.parent.listData && this.parent.listData.length <= 1 &&
+            if (this.parent.list.classList.contains('e-nodata') || (this.parent.listData && this.parent.listData.length <= 1 && !this.parent.enableVirtualization &&
                 !(this.parent.isDynamicDataChange)) || (this.parent.isDynamicDataChange &&
                 this.parent.listData && this.parent.listData.length <= 1)) {
                 this.checkAllParent.style.display = 'none';
@@ -512,7 +512,13 @@ var CheckBoxSelection = /** @class */ (function () {
                 });
                 remLi = this.parent.ulElement.querySelectorAll('li.e-active');
                 addClass(remLi, 'e-reorder-hide');
-                prepend([ulEle_1], this.parent.list);
+                if (this.parent.enableVirtualization) {
+                    var virtualUlElement = this.parent.list.querySelector('.e-virtual-ddl-content');
+                    prepend([ulEle_1], virtualUlElement);
+                }
+                else {
+                    prepend([ulEle_1], this.parent.list);
+                }
             }
             this.parent.focusAtFirstListItem();
         }

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

@@ -10,14 +10,14 @@ import { FloatLabelType } from '@syncfusion/ej2-inputs';
  * @param {FloatLabelType} floatLabelType - Specify the FloatLabel Type.
  * @param {string} placeholder - Specify the PlaceHolder text.
  */
-export declare function createFloatLabel(overAllWrapper: HTMLDivElement, searchWrapper: HTMLElement, element: HTMLElement, inputElement: HTMLInputElement, value: number[] | string[] | boolean[], floatLabelType: FloatLabelType, placeholder: string): void;
+export declare function createFloatLabel(overAllWrapper: HTMLDivElement, searchWrapper: HTMLElement, element: HTMLElement, inputElement: HTMLInputElement, value: number[] | string[] | boolean[] | object[], floatLabelType: FloatLabelType, placeholder: string): void;
 /**
  * Function to update status of the Float Label element.
  *
  * @param {string[] | number[] | boolean[]} value - Value of the MultiSelect.
  * @param {HTMLElement} label - Float label element.
  */
-export declare function updateFloatLabelState(value: string[] | number[] | boolean[], label: HTMLElement): void;
+export declare function updateFloatLabelState(value: string[] | number[] | boolean[] | object[], label: HTMLElement): void;
 /**
  * Function to remove Float Label element.
  *
@@ -29,7 +29,7 @@ export declare function updateFloatLabelState(value: string[] | number[] | boole
  * @param {FloatLabelType} floatLabelType - Specify the FloatLabel Type.
  * @param {string} placeholder - Specify the PlaceHolder text.
  */
-export declare function removeFloating(overAllWrapper: HTMLDivElement, componentWrapper: HTMLDivElement, searchWrapper: HTMLElement, inputElement: HTMLInputElement, value: number[] | string[] | boolean[], floatLabelType: FloatLabelType, placeholder: string): void;
+export declare function removeFloating(overAllWrapper: HTMLDivElement, componentWrapper: HTMLDivElement, searchWrapper: HTMLElement, inputElement: HTMLInputElement, value: number[] | string[] | boolean[] | object[], floatLabelType: FloatLabelType, placeholder: string): void;
 /**
  * Function to set the placeholder to the element.
  *
@@ -37,7 +37,7 @@ export declare function removeFloating(overAllWrapper: HTMLDivElement, component
  * @param {HTMLInputElement} inputElement - Specify the input wrapper.
  * @param {string} placeholder - Specify the PlaceHolder text.
  */
-export declare function setPlaceHolder(value: number[] | string[] | boolean[], inputElement: HTMLInputElement, placeholder: string): void;
+export declare function setPlaceHolder(value: number[] | string[] | boolean[] | object[], inputElement: HTMLInputElement, placeholder: string): void;
 /**
  * Function for focusing the Float Element.
  *
@@ -54,5 +54,5 @@ export declare function floatLabelFocus(overAllWrapper: HTMLDivElement, componen
  * @param {FloatLabelType} floatLabelType - Specify the FloatLabel Type.
  * @param {string} placeholder - Specify the PlaceHolder text.
  */
-export declare function floatLabelBlur(overAllWrapper: HTMLDivElement, componentWrapper: HTMLDivElement, value: number[] | string[] | boolean[], floatLabelType: FloatLabelType, placeholder: string): void;
+export declare function floatLabelBlur(overAllWrapper: HTMLDivElement, componentWrapper: HTMLDivElement, value: number[] | string[] | boolean[] | object[], floatLabelType: FloatLabelType, placeholder: string): void;
 export declare function encodePlaceholder(placeholder: string): string;

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

@@ -4,5 +4,6 @@
 export * from './multi-select';
 export * from './multi-select-model';
 export * from './checkbox-selection';
+export * from '../common/virtual-scroll';
 export * from './interface';
 export * from './float-label';

package/src/multi-select/index.js

@@ -3,4 +3,5 @@
  */
 export * from './multi-select';
 export * from './checkbox-selection';
+export * from '../common/virtual-scroll';
 export * from './float-label';

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

@@ -41,6 +41,7 @@ export interface IMulitSelect extends Component<HTMLElement> {
         [key: string]: Object;
     };
     itemTemplate?: string;
+    enableVirtualization?: boolean;
     headerTemplate?: string;
     mobFilter?: boolean;
     header?: HTMLElement;

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

@@ -1,4 +1,4 @@
-import { DropDownBase, SelectEventArgs, dropDownBaseClasses, PopupEventArgs, FilteringEventArgs } from '../drop-down-base/drop-down-base';import { FocusEventArgs, BeforeOpenEventArgs, FilterType, FieldSettings, ResultData } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { IInput, FloatLabelType, Input } from '@syncfusion/ej2-inputs';import { attributes, setValue, SanitizeHtmlHelper, getValue } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, extend } from '@syncfusion/ej2-base';import { EventHandler, Property, Event, compile, L10n, EmitType, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Animation, AnimationModel, Browser, prepend, Complex } from '@syncfusion/ej2-base';import { Search } from '../common/incremental-search';import { append, addClass, removeClass, closest, detach, remove, select, selectAll } from '@syncfusion/ej2-base';import { getUniqueID, formatUnit, isNullOrUndefined, isUndefined, ModuleDeclaration } from '@syncfusion/ej2-base';import { DataManager, Query, Predicate, JsonAdaptor } from '@syncfusion/ej2-data';import { SortOrder } from '@syncfusion/ej2-lists';import { createFloatLabel, removeFloating, floatLabelFocus, floatLabelBlur, encodePlaceholder } from './float-label';
+import { DropDownBase, SelectEventArgs, dropDownBaseClasses, PopupEventArgs, FilteringEventArgs } from '../drop-down-base/drop-down-base';import { FocusEventArgs, BeforeOpenEventArgs, FilterType, FieldSettings, ResultData } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { IInput, FloatLabelType, Input } from '@syncfusion/ej2-inputs';import { attributes, setValue, SanitizeHtmlHelper, getValue } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, extend } from '@syncfusion/ej2-base';import { EventHandler, Property, Event, compile, L10n, EmitType, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Animation, AnimationModel, Browser, prepend, Complex } from '@syncfusion/ej2-base';import { Search } from '../common/incremental-search';import { append, addClass, removeClass, closest, detach, remove, select, selectAll } from '@syncfusion/ej2-base';import { getUniqueID, formatUnit, isNullOrUndefined, isUndefined, ModuleDeclaration } from '@syncfusion/ej2-base';import { DataManager, Query, Predicate, JsonAdaptor, DataOptions } from '@syncfusion/ej2-data';import { SortOrder } from '@syncfusion/ej2-lists';import { createFloatLabel, removeFloating, floatLabelFocus, floatLabelBlur, encodePlaceholder } from './float-label';
 import {visualMode,MultiSelectChangeEventArgs,RemoveEventArgs,ISelectAllEventArgs,TaggingEventArgs,CustomValueEventArgs} from "./multi-select";
 import {DropDownBaseModel} from "../drop-down-base/drop-down-base-model";
 
@@ -91,6 +91,13 @@ export interface MultiSelectModel extends DropDownBaseModel{
      */
     enableHtmlSanitizer?: boolean;
 
+    /**
+     * Defines whether to enable virtual scrolling in the component. 
+     *
+     * @default false
+     */
+    enableVirtualization?: boolean;
+
     /**
      * Accepts the list items either through local or remote service and binds it to the MultiSelect component.
      * It can be an array of JSON Objects or an instance of
@@ -334,6 +341,7 @@ export interface MultiSelectModel extends DropDownBaseModel{
      * Selects the list item which maps the data `text` field in the component.
      *
      * @default null
+     * @aspType string
      */
     text?: string | null;
 
@@ -344,7 +352,14 @@ export interface MultiSelectModel extends DropDownBaseModel{
      * @default null
      * @isGenericType true
      */
-    value?: number[] | string[] | boolean[] | null;
+    value?: number[] | string[] | boolean[] | object[] | null ;
+
+    /**
+    * Defines whether the object binding is allowed or not in the component.
+    *
+    * @default false
+    */
+    allowObjectBinding?: boolean; 
 
     /**
      * Hides the selected item from the list item.

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

@@ -49,6 +49,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private previousFilterText;
     private selectedElementID;
     private focusFirstListItem;
+    private currentFocuedListElement;
     private isCustomRendered;
     private isRemoteSelection;
     private isSelectAllTarget;
@@ -128,6 +129,12 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      * @default true
      */
     enableHtmlSanitizer: boolean;
+    /**
+     * Defines whether to enable virtual scrolling in the component.
+     *
+     * @default false
+     */
+    enableVirtualization: boolean;
     /**
      * Accepts the list items either through local or remote service and binds it to the MultiSelect component.
      * It can be an array of JSON Objects or an instance of
@@ -351,6 +358,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      * Selects the list item which maps the data `text` field in the component.
      *
      * @default null
+     * @aspType string
      */
     text: string | null;
     /**
@@ -360,7 +368,13 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      * @default null
      * @isGenericType true
      */
-    value: number[] | string[] | boolean[] | null;
+    value: number[] | string[] | boolean[] | object[] | null;
+    /**
+    * Defines whether the object binding is allowed or not in the component.
+    *
+    * @default false
+    */
+    allowObjectBinding: boolean;
     /**
      * Hides the selected item from the list item.
      *
@@ -560,6 +574,9 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private mainList;
     ulElement: HTMLElement;
     private mainData;
+    protected virtualCustomSelectData: {
+        [key: string]: Object;
+    }[];
     private mainListCollection;
     private customValueFlag;
     private inputElement;
@@ -589,6 +606,8 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private removeIndex;
     private resetMainList;
     private resetFilteredData;
+    private preventSetCurrentData;
+    private virtualCustomData;
     private enableRTL;
     requiredModules(): ModuleDeclaration[];
     private updateHTMLAttribute;
@@ -597,6 +616,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private updateCssClass;
     private updateOldPropCssClass;
     private onPopupShown;
+    private updateVirtualReOrderList;
     private updateListItems;
     private loadTemplate;
     private setScrollPosition;
@@ -633,6 +653,8 @@ export declare class MultiSelect extends DropDownBase implements IInput {
         [key: string]: Object;
     }[] | DataManager | string[] | number[] | boolean[], query?: Query, fields?: FieldSettingsModel): void;
     protected getQuery(query: Query): Query;
+    private virtualFilterQuery;
+    protected getTakeValue(): number;
     private dataUpdater;
     private tempQuery;
     private tempValues;
@@ -651,7 +673,6 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private updateValueState;
     private updateTempValue;
     private updateAriaActiveDescendant;
-    private getPagingCount;
     private pageUpSelection;
     private pageDownSelection;
     getItems(): Element[];
@@ -665,6 +686,8 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private popupKeyActions;
     private updateAriaAttribute;
     private homeNavigation;
+    private updateSelectionList;
+    private handleVirtualKeyboardActions;
     private onKeyDown;
     private arrowDown;
     private arrowUp;
@@ -675,12 +698,14 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private escapeAction;
     private scrollBottom;
     private scrollTop;
+    private IsScrollerAtEnd;
     private selectListByKey;
     private refreshListItems;
     private removeSelectedChip;
     private moveByTop;
     private clickHandler;
     private moveByList;
+    private getElementByValue;
     private updateCheck;
     private moveBy;
     private chipClick;
@@ -696,6 +721,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private removeChip;
     private setWidth;
     private updateChipStatus;
+    private indexOfObjectInArray;
     private addValue;
     private checkMaxSelection;
     private dispatchSelect;
@@ -714,6 +740,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private renderPopup;
     private setHeaderTemplate;
     private setFooterTemplate;
+    private updateInitialData;
     private clearAll;
     private clearAllCallback;
     private windowResize;
@@ -814,6 +841,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      */
     onPropertyChanged(newProp: MultiSelectModel, oldProp: MultiSelectModel): void;
     private reInitializePoup;
+    private totalItemsCount;
     private presentItemValue;
     private addNonPresentItems;
     private updateVal;
@@ -872,8 +900,10 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      * @returns {void}
      */
     render(): void;
+    private getListHeight;
     private checkInitialValue;
     private checkAutoFocus;
+    private updatevirtualizationList;
     private setFloatLabelType;
     private addValidInputClass;
     private dropDownIcon;
@@ -933,13 +963,13 @@ export interface MultiSelectChangeEventArgs {
      *
      * @isGenericType true
      */
-    oldValue: number[] | string[] | boolean[];
+    oldValue: number[] | string[] | boolean[] | object[];
     /**
      * Returns the updated component Values.
      *
      * @isGenericType true
      */
-    value: number[] | string[] | boolean[];
+    value: number[] | string[] | boolean[] | object[];
     /**
      * Specifies the original event arguments.
      */