@syncfusion/ej2-dropdowns 23.1.43 → 23.2.4-13895

package/dist/ts/common/highlight-search.ts

@@ -0,0 +1,57 @@
+export type HightLightType = 'Contains' | 'StartsWith' | 'EndsWith';
+/**
+ * Function helps to find which highlightSearch is to call based on your data.
+ *
+ * @param  {HTMLElement} element - Specifies an li element.
+ * @param  {string} query - Specifies the string to be highlighted.
+ * @param  {boolean} ignoreCase - Specifies the ignoreCase option.
+ * @param  {HightLightType} type - Specifies the type of highlight.
+ * @returns {void}
+ */
+export function highlightSearch(element: HTMLElement, query: string, ignoreCase: boolean, type?: HightLightType): void {
+    if (query === '') {
+        return;
+    } else {
+        const ignoreRegex: string = ignoreCase ? 'gim' : 'gm';
+        // eslint-disable-next-line
+        query = /^[a-zA-Z0-9- ]*$/.test(query) ? query : query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
+        const replaceQuery: string = type === 'StartsWith' ? '^(' + query + ')' : type === 'EndsWith' ?
+            '(' + query + ')$' : '(' + query + ')';
+        // eslint-disable-next-line security/detect-non-literal-regexp
+        findTextNode(element, new RegExp(replaceQuery, ignoreRegex));
+    }
+}
+/* eslint-enable jsdoc/require-param, valid-jsdoc */
+/**
+ *
+ * @param {HTMLElement} element - Specifies the element.
+ * @param {RegExp} pattern - Specifies the regex to match the searched text.
+ * @returns {void}
+ */
+function findTextNode(element: HTMLElement, pattern: RegExp): void {
+    for (let index: number = 0; element.childNodes && (index < element.childNodes.length); index++) {
+        if (element.childNodes[index as number].nodeType === 3 && element.childNodes[index as number].textContent.trim() !== '') {
+            const value: string = element.childNodes[index as number].nodeValue.trim().replace(pattern, '<span class="e-highlight">$1</span>');
+            element.childNodes[index as number].nodeValue = '';
+            element.innerHTML = element.innerHTML.trim() + value;
+            break;
+        } else {
+            findTextNode(element.childNodes[index as number] as HTMLElement, pattern);
+        }
+    }
+}
+
+/**
+ * Function helps to remove highlighted element based on your data.
+ *
+ * @param  {HTMLElement} content - Specifies an content element.
+ * @returns {void}
+ */
+export function revertHighlightSearch(content: HTMLElement): void {
+    const contentElement: NodeListOf<Element> = content.querySelectorAll('.e-highlight');
+    for (let i: number = contentElement.length - 1; i >= 0; i--) {
+        const parent: Node = contentElement[i as number].parentNode;
+        const text: Text = document.createTextNode(contentElement[i as number].textContent);
+        parent.replaceChild(text, contentElement[i as number]);
+    }
+}

package/dist/ts/common/incremental-search.ts

@@ -0,0 +1,131 @@
+/**
+ * IncrementalSearch module file
+ */
+
+let queryString: string = '';
+let prevString: string = '';
+let matches: Element[] = [];
+const activeClass: string = 'e-active';
+let prevElementId: string = '';
+export type SearchType = 'StartsWith' | 'Equal' | 'EndsWith' | 'Contains';
+/**
+ * Search and focus the list item based on key code matches with list text content
+ *
+ * @param  { number } keyCode - Specifies the key code which pressed on keyboard events.
+ * @param  { HTMLElement[]} items - Specifies an array of HTMLElement, from which matches find has done.
+ * @param { number } selectedIndex - Specifies the selected item in list item, so that search will happen
+ * after selected item otherwise it will do from initial.
+ * @param  { boolean } ignoreCase - Specifies the case consideration when search has done.
+ * @param {string} elementId - Specifies the list element ID.
+ * @returns {Element} Returns list item based on key code matches with list text content.
+ */
+export function incrementalSearch(
+    keyCode: number, items: HTMLElement[], selectedIndex: number, ignoreCase: boolean, elementId: string): Element {
+    queryString += String.fromCharCode(keyCode);
+    setTimeout(() => {
+        queryString = '';
+    }, 1000);
+    let index: number;
+    queryString = ignoreCase ? queryString.toLowerCase() : queryString;
+    if (prevElementId === elementId && prevString === queryString) {
+        for (let i: number = 0; i < matches.length; i++) {
+            if (matches[i as number].classList.contains(activeClass)) {
+                index = i; break;
+            }
+        }
+        index = index + 1;
+        return matches[index as number] ? matches[index as number] : matches[0];
+    } else {
+        const listItems: Element[] = items;
+        const strLength: number = queryString.length;
+        let text: string;
+        let item: HTMLElement;
+        selectedIndex = selectedIndex ? selectedIndex + 1 : 0;
+        let i: number = selectedIndex;
+        matches = [];
+        do {
+            if (i === listItems.length) {
+                i = -1;
+            }
+            if (i === -1) {
+                index = 0;
+            } else {
+                index = i;
+            }
+            item = listItems[index as number] as HTMLElement;
+            text = ignoreCase ? item.innerText.toLowerCase() : item.innerText;
+            if (text.substr(0, strLength) === queryString) {
+                matches.push(listItems[index as number]);
+            }
+            i++;
+        } while (i !== selectedIndex);
+        prevString = queryString;
+        prevElementId = elementId;
+        return matches[0];
+    }
+}
+
+/**
+ * Search the list item based on given input value matches with search type.
+ *
+ * @param {string} inputVal - Specifies the given input value.
+ * @param {HTMLElement[]} items - Specifies the list items.
+ * @param {SearchType} searchType - Specifies the filter type.
+ * @param {boolean} ignoreCase - Specifies the case sensitive option for search operation.
+ * @returns {Element | number} Returns the search matched items.
+ */
+export function Search(
+    inputVal: string, items: HTMLElement[], searchType: SearchType, ignoreCase?: boolean, dataSource?: string[] | number[] | boolean[] | {
+        [key: string]: Object
+    }[], fields?: any, type?: string): { [key: string]: Element | number } {
+    const listItems: HTMLElement[] = items;
+    ignoreCase = ignoreCase !== undefined && ignoreCase !== null ? ignoreCase : true;
+    const itemData: { [key: string]: Element | number } = { item: null, index: null };
+    if (inputVal && inputVal.length) {
+        const strLength: number = inputVal.length;
+        let queryStr: string = ignoreCase ? inputVal.toLocaleLowerCase() : inputVal;
+        queryStr = escapeCharRegExp(queryStr);
+        for (let i: number = 0, itemsData: Element[] = listItems; i < itemsData.length; i++) {
+            const item: Element = itemsData[i as number];
+            let text: string;
+            let filterValue: string;
+            if (items && dataSource) {
+                let checkField: Element = item;
+                let fieldValue = fields.text.split('.');
+                (dataSource as { [key: string]: Object }[]).filter(function (data: any) {
+                    Array.prototype.slice.call(fieldValue).forEach(function (value: string | number) {
+                        /* eslint-disable security/detect-object-injection */
+                        if (type === 'object' && (!data.isHeader && checkField.textContent.toString().indexOf(data[value]) !== -1) && checkField.getAttribute('data-value') === data[fields.value].toString() || type === 'string' && checkField.textContent.toString().indexOf(data) !== -1) {
+                            filterValue = type === 'object' ? data[value] : data;
+                        }
+                    });
+                })
+            }
+            text = dataSource && filterValue ? (ignoreCase ? filterValue.toLocaleLowerCase() : filterValue).replace(/^\s+|\s+$/g, '') : (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
+            /* eslint-disable security/detect-non-literal-regexp */
+            if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr) || (searchType === 'EndsWith' && text.substr(text.length - queryStr.length) === queryStr) || (searchType === 'Contains' && new RegExp(queryStr, "g").test(text))) {
+                itemData.item = item;
+                itemData.index = i;
+                return { item: item, index: i };
+            }
+        }
+        return itemData;
+        /* eslint-enable security/detect-non-literal-regexp */
+
+    }
+    return itemData;
+}
+/* eslint-enable security/detect-object-injection */
+
+export function escapeCharRegExp(value: string) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+export function resetIncrementalSearchValues(elementId: string): void {
+    if (prevElementId === elementId) {
+        prevElementId = '';
+        prevString = '';
+        queryString = '';
+        matches = [];
+    }
+}

package/dist/ts/common/interface.ts

@@ -0,0 +1,72 @@
+import { Component, KeyboardEventArgs } from '@syncfusion/ej2-base';
+import { Popup } from '@syncfusion/ej2-popups';
+import { VirtualInfo } from '../common/virtual-scroll';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';
+import { GeneratedData } from '../drop-down-list/drop-down-list';
+/**
+ * Specifies virtual scroll interfaces.
+ *
+ * @hidden
+ */
+
+export interface IDropdownlist extends Component<HTMLElement> {
+    popupContentElement: HTMLElement;
+    isPreventScrollAction: boolean;
+    listHeight: string;
+    previousStartIndex: number;
+    previousEndIndex: number;
+    previousInfo: VirtualInfo;
+    startIndex: number;
+    currentPageNumber: number;
+    isMouseScrollAction: boolean;
+    isPreventKeyAction: boolean;
+    pageCount: number;
+    isKeyBoardAction: boolean;
+    viewPortInfo: VirtualInfo;
+    isUpwardScrolling: boolean;
+    queryString: string;
+    containerElementRect: ClientRect;
+    isScrollActionTriggered: boolean;
+    virtualListInfo: VirtualInfo;
+    selectedValueInfo: VirtualInfo;
+    value: number | string | boolean;
+    totalItemCount: number;
+    virtualItemCount: number;
+    virtualItemEndIndex: number;
+    virtualItemStartIndex: number;
+    popupObj: Popup;
+    listItemHeight: number;
+    scrollPreStartIndex: number;
+    list: HTMLElement;
+    liCollections: HTMLElement[];
+    typedString: string
+    isVirtualScrolling: boolean;
+    isCustomFilter: boolean;
+    allowFiltering: boolean;
+    isPopupOpen: boolean;
+    isTyped: boolean;
+    itemCount: number;
+    fields: FieldSettingsModel;
+    generatedDataObject: GeneratedData;
+    keyboardEvent: KeyboardEventArgs;
+    dataCount: number;
+    filterInput: HTMLInputElement;
+    dataSource: { [key: string]: Object }[] | DataManager | string[] | number[] | boolean[];
+    listData: { [key: string]: Object }[] | string[] | boolean[] | number[];
+    getSkeletonCount(retainSkeleton?: boolean): void;
+    getItems(): HTMLElement[];
+    getQuery(query: Query): Query;
+    getTransformValues(): string;
+    UpdateSkeleton(): void;
+    updateSelectionList(): void;
+    GetVirtualTrackHeight(): string;
+    getPageCount(returnExactCount?: boolean): number;
+    handleVirtualKeyboardActions(e: KeyboardEventArgs, pageCount: number): void;
+    renderItems(listData: { [key: string]: Object }[], fields: FieldSettingsModel): HTMLElement
+    resetList(
+        dataSource?: { [key: string]: Object }[] | DataManager | string[] | number[] | boolean[],
+        fields?: FieldSettingsModel, query?: Query, e?: MouseEvent | KeyboardEventArgs | TouchEvent): void
+    findListElement(list: HTMLElement, findNode: string, attribute: string, value: string | boolean | number): HTMLElement;
+}
+

package/dist/ts/common/virtual-scroll.ts

@@ -0,0 +1,354 @@
+import { EventHandler, Browser, ScrollEventArgs, select, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { debounce, Touch } from '@syncfusion/ej2-base';
+import { IDropdownlist } from './interface'; 
+import { DropDownList } from '../drop-down-list/'; 
+import { Query } from '@syncfusion/ej2-data';
+export type ScrollDirection = 'up' | 'down';
+type ScrollArg = { direction: string, sentinel: SentinelType, offset: Offsets, focusElement: HTMLElement };
+export type SentinelType = {
+    check?: (rect: ClientRect, info: SentinelType) => boolean,
+    top?: number, entered?: boolean,
+    axis?: string;
+};
+
+export type SentinelInfo = { up?: SentinelType, down?: SentinelType, right?: SentinelType, left?: SentinelType };
+
+export type Offsets = { top?: number, left?: number };
+export interface VirtualInfo {
+    currentPageNumber?: number;
+    direction?: string;
+    sentinelInfo?: SentinelType;
+    offsets?: Offsets;
+    startIndex?: number;
+    endIndex?: number;
+}
+
+export class VirtualScroll {
+    private parent: IDropdownlist;
+    private containerElementRect: ClientRect;
+    private element: HTMLElement;
+    private options: any;
+    private touchModule: Touch;
+    private component: string;
+
+    constructor(parent: IDropdownlist) {
+        this.parent = parent;
+        this.removeEventListener();
+        this.addEventListener();
+    }
+
+    public addEventListener(): void {
+        if (this.parent.isDestroyed) {
+            return;
+        }
+        this.parent.on('observe', this.observe, this);
+        this.parent.on('setGeneratedData', this.setGeneratedData, this);
+        this.parent.on('dataProcessAsync', this.dataProcessAsync, this);
+        this.parent.on('setCurrentViewDataAsync', this.setCurrentViewDataAsync, this);
+        this.parent.on('bindScrollEvent', this.bindScrollEvent, this);
+    }
+
+    public removeEventListener(): void {
+        if (this.parent.isDestroyed) {
+            return;
+        }
+        this.parent.off('observe', this.observe);
+        this.parent.off('setGeneratedData', this.setGeneratedData);
+        this.parent.off('dataProcessAsync', this.dataProcessAsync);
+        this.parent.off('setCurrentViewDataAsync', this.setCurrentViewDataAsync);
+        this.parent.off('bindScrollEvent', this.bindScrollEvent);
+    }
+
+    private bindScrollEvent(component: object): void {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.component = (component as any).component;
+        this.observe((scrollArgs: ScrollArg) => this.scrollListener(scrollArgs));
+    }
+
+    private observe(callback: Function): void {
+        this.containerElementRect = this.parent.popupContentElement.getBoundingClientRect();
+        EventHandler.add(this.parent.popupContentElement, 'wheel mousedown', this.popupScrollHandler, this);
+        this.touchModule = new Touch(this.parent.popupContentElement, {
+            scroll: this.popupScrollHandler.bind(this)
+        });
+        EventHandler.add(this.parent.popupContentElement, 'scroll', this.virtualScrollHandler(callback), this);
+    }
+
+    public getModuleName(): string {
+        return 'VirtualScroll';
+    }
+
+    private popupScrollHandler(e: ScrollEventArgs): void {
+        this.parent.isMouseScrollAction = true;
+        this.parent.isPreventScrollAction = false;
+    }
+
+    private getPageQuery(query: Query, virtualStartIndex: number, virtualEndIndex: number): Query {
+        if (virtualEndIndex !== 0 && !this.parent.allowFiltering && this.component !== 'autocomplete') {
+            query = query.skip(virtualStartIndex);
+        }
+        return query;
+    }
+
+    private setGeneratedData(qStartIndex: number, recentlyGeneratedData: object[]): void {
+        let loopIteration: number = 0;
+        let endIndex: number = this.parent.listData.length + this.parent.virtualItemStartIndex;
+        for (let i = this.parent.virtualItemStartIndex; i < endIndex; i++) {
+            const alreadyAddedData: object | undefined = this.parent.generatedDataObject[i as number];
+            if (!alreadyAddedData) {
+                if (recentlyGeneratedData !== null && this.parent.listData.slice(loopIteration, loopIteration + 1).length > 0) {
+                    const slicedData = this.parent.listData.slice(loopIteration, loopIteration + 1);
+                    if (slicedData.length > 0) {
+                        // Safely assign slicedData to this.parent.generatedDataObject[i]
+                        this.parent.generatedDataObject[i as number] = slicedData;
+                    }
+                }
+            }
+            loopIteration++;
+        }
+    }
+
+    private generateAndExecuteQueryAsync(query: Query, virtualItemStartIndex: number = 0, virtualItemEndIndex: number = 0, isQueryGenerated: boolean = false): void {
+        let dataSource = this.parent.dataSource;
+        if (!isQueryGenerated) {
+            query = this.getPageQuery(query, virtualItemStartIndex, virtualItemEndIndex);
+        }
+        this.parent.resetList(dataSource, this.parent.fields, query);
+    }
+    
+    public setCurrentViewDataAsync(): void {
+        // eslint-disable-next-line
+        let currentData: any = [];
+        for (let i = this.parent.viewPortInfo.startIndex; i < this.parent.viewPortInfo.endIndex; i++) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const alreadyAddedData: any = this.parent.generatedDataObject[i as number];
+            if (alreadyAddedData) {
+                currentData.push(alreadyAddedData[0]);
+            }
+        }
+        this.parent.renderItems(currentData, this.parent.fields);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const virtualTrackElement = this.parent.list.getElementsByClassName('e-virtual-ddl')[0] as any;
+        if (virtualTrackElement) {
+            (virtualTrackElement).style = this.parent.GetVirtualTrackHeight();
+        }
+        this.parent.UpdateSkeleton();
+        this.parent.liCollections = <HTMLElement[] & NodeListOf<Element>>this.parent.list.querySelectorAll('.e-list-item');
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const virtualContentElement = this.parent.list.getElementsByClassName('e-virtual-ddl-content')[0] as any;
+        if (virtualContentElement) {
+            (virtualContentElement).style = this.parent.getTransformValues();
+        }
+    }
+
+    private generateQueryAndSetQueryIndexAsync(query: Query, isPopupOpen?: boolean): void {
+        let isStartIndexInitialised: boolean = false;
+        let queryStartIndex: number = 0;
+        let queryEndIndex: number = 0;
+        let sortedDataStartIndex: number = 0;
+        let vEndIndex: number = this.parent && this.parent.viewPortInfo.endIndex !== 0 ? this.parent.viewPortInfo.endIndex : sortedDataStartIndex + this.parent.getItems().length;
+        if (!isPopupOpen && vEndIndex !== 0) {
+            for (let i = this.parent.viewPortInfo.startIndex; i <= vEndIndex; i++) {
+                if (!(i in this.parent.generatedDataObject)) {
+                    if (!isStartIndexInitialised) {
+                        isStartIndexInitialised = true;
+                        queryStartIndex = queryEndIndex = i;
+                    } else {
+                        queryEndIndex = i === vEndIndex ? i : i + 1;
+                    }
+                }
+            }
+        }
+        if (isStartIndexInitialised && !((this.parent.totalItemCount == queryStartIndex) && (this.parent.totalItemCount == queryEndIndex))) {
+            this.parent.virtualItemStartIndex = queryStartIndex;
+            this.parent.virtualItemEndIndex = queryEndIndex;
+            this.generateAndExecuteQueryAsync(query, queryStartIndex, queryEndIndex);
+        }
+        this.setCurrentViewDataAsync();
+    }
+    private dataProcessAsync(isOpenPopup?: boolean): void {
+        this.parent.selectedValueInfo = null;
+        this.parent.virtualItemStartIndex = this.parent.viewPortInfo.startIndex;
+        this.parent.virtualItemEndIndex = this.parent.viewPortInfo.endIndex;
+        this.generateQueryAndSetQueryIndexAsync(new Query(), isOpenPopup);
+    }
+    private async virtualScrollRefreshAsync(): Promise<void> {
+        this.parent.isCustomFilter = (!(this.parent.isTyped || (this.component === 'combobox' && this.parent.allowFiltering && this.parent.queryString != this.parent.typedString) || (!isNullOrUndefined(this.parent.filterInput) && !isNullOrUndefined(this.parent.filterInput.value) && this.parent.filterInput.value !=='') && this.component !== 'combobox') && !(this.component === 'autocomplete' && this.parent.value != null)) || this.parent.isCustomFilter;
+        if (this.parent.allowFiltering || this.component === 'autocomplete') {
+            if (!isNullOrUndefined(this.parent.typedString) && !(this.component === 'combobox' && !isNullOrUndefined(this.parent.typedString) && this.parent.allowFiltering)) {
+                if (this.parent.viewPortInfo.endIndex >= this.parent.dataCount) {
+                    this.parent.viewPortInfo.endIndex = this.parent.dataCount;
+                }
+                if (this.parent.viewPortInfo.startIndex >= this.parent.dataCount) {
+                    this.parent.viewPortInfo.startIndex = this.parent.dataCount - this.parent.itemCount;
+                }
+            }
+            else {
+                this.parent.getSkeletonCount(true);
+            }
+        }
+        await this.dataProcessAsync();
+        if (this.parent.keyboardEvent != null) {
+            this.parent.handleVirtualKeyboardActions(this.parent.keyboardEvent, this.parent.pageCount);
+        }
+        this.parent.isCustomFilter = false;
+    }
+
+    public scrollListener(scrollArgs: ScrollArg): void {
+        if (!this.parent.isPreventScrollAction) {
+            let info: SentinelType = scrollArgs.sentinel;
+            let pStartIndex: number = this.parent.previousStartIndex;
+            this.parent.viewPortInfo = this.getInfoFromView(scrollArgs.direction, info, scrollArgs.offset, false);
+            this.parent.isUpwardScrolling = false;
+            if (this.parent.previousStartIndex !== pStartIndex && !this.parent.isKeyBoardAction) {
+                this.parent.isScrollActionTriggered = false;
+                this.parent.currentPageNumber = this.parent.viewPortInfo.currentPageNumber;
+                this.parent.virtualListInfo = { ...this.parent.viewPortInfo };
+                this.parent.isPreventKeyAction = true;
+                this.parent.isVirtualScrolling = true;
+                setTimeout(() => {
+                    this.parent.pageCount = this.parent.getPageCount();
+                    this.virtualScrollRefreshAsync().then(() => {
+                        if (this.parent.popupObj) {
+                            this.parent.list = this.parent.popupObj.element.querySelector('.' + 'e-content') || select('.' + 'e-content');
+                            this.parent.updateSelectionList();
+                            this.parent.liCollections = <HTMLElement[] & NodeListOf<Element>>this.parent.getItems();
+                        }
+                        this.parent.isKeyBoardAction = false;
+                        this.parent.isVirtualScrolling = false;
+                        this.parent.isPreventKeyAction = false;
+                    });
+                }, 5);
+            }
+            else if (this.parent.isScrollActionTriggered) {
+                this.parent.isPreventKeyAction = false;
+                this.parent.isScrollActionTriggered = false;
+                let virtualListCount: number = this.parent.list.querySelectorAll('.e-virtual-list').length;
+                let listElement: HTMLElement = this.parent.list.querySelector('.' + 'e-list-item');
+                let translateY: number = scrollArgs.offset.top - (listElement.offsetHeight * virtualListCount);
+                (this.parent.list.getElementsByClassName('e-virtual-ddl-content') as HTMLCollectionOf<HTMLElement>)[0].style.transform = "translate(0px," + translateY + "px)"
+            }
+            this.parent.previousInfo = this.parent.viewPortInfo;
+        }
+    }
+
+    private getPageCount(popupElement: HTMLElement, returnExactCount: boolean = false): number {
+        var list = popupElement && popupElement.querySelector('.e-content');
+        if (list) {
+            var liHeight = list.classList.contains('e-nodata') ? null : getComputedStyle(list.querySelectorAll('.e-list-item')[0], null).getPropertyValue('height');
+            var pageCount = list.getBoundingClientRect().height / parseInt(liHeight, 10)
+            return returnExactCount ? pageCount : Math.round(pageCount);
+        }
+        return 0;
+    };
+
+    private getRowHeight(): number {
+        return (isNullOrUndefined(this.parent.liCollections) || this.parent.liCollections.length == 0) ? 0 : Math.ceil(this.parent.liCollections[0].getBoundingClientRect().height);
+    }
+    private getInfoFromView(direction: string, info: SentinelType, e: Offsets, isscrollAction: boolean): VirtualInfo {
+
+        let infoType: VirtualInfo = {
+            direction: direction, sentinelInfo: info, offsets: e,
+            startIndex: this.parent.previousStartIndex, endIndex: this.parent.previousEndIndex
+        };
+        let vHeight: string | number = this.parent.popupContentElement.getBoundingClientRect().height;
+        //Row Start and End Index calculation
+        let rowHeight: number = this.parent.listItemHeight;
+        let exactTopIndex: number = e.top / rowHeight;
+        let infoViewIndices: number = vHeight / rowHeight;
+        let exactEndIndex: number = exactTopIndex + infoViewIndices;
+        let pageSizeBy4: number = this.parent.virtualItemCount / 4;
+        let totalItemCount: number = this.parent.totalItemCount;
+        if (infoType.direction === 'down') {
+            let sIndex: number = Math.round(exactEndIndex) - Math.round((pageSizeBy4));
+
+            if (isNullOrUndefined(infoType.startIndex) || (exactEndIndex >
+                (infoType.startIndex + Math.round((this.parent.virtualItemCount / 2 + pageSizeBy4)))
+                && infoType.endIndex !== totalItemCount)) {
+                infoType.startIndex = sIndex >= 0 ? Math.round(sIndex) : 0;
+                infoType.startIndex = infoType.startIndex > exactTopIndex ? Math.floor(exactTopIndex) : infoType.startIndex;
+                let eIndex: number = infoType.startIndex + this.parent.virtualItemCount;
+                infoType.startIndex = eIndex < exactEndIndex ? (Math.ceil(exactEndIndex) - this.parent.virtualItemCount)
+                    : infoType.startIndex;
+                infoType.endIndex = eIndex < totalItemCount ? eIndex : totalItemCount;
+                infoType.startIndex = eIndex >= totalItemCount ? (infoType.endIndex - this.parent.virtualItemCount > 0 ? infoType.endIndex - this.parent.virtualItemCount : 0) : infoType.startIndex;
+                infoType.currentPageNumber = Math.ceil(infoType.endIndex / this.parent.virtualItemCount);
+            }
+        } else if (infoType.direction === 'up') {
+            if (infoType.startIndex && infoType.endIndex) {
+                let loadAtIndex: number = Math.round(((infoType.startIndex * rowHeight) + (pageSizeBy4 * rowHeight)) / rowHeight);
+                if (exactTopIndex < loadAtIndex) {
+                    let idxAddedToExactTop: number = (pageSizeBy4) > infoViewIndices ? pageSizeBy4 :
+                        (infoViewIndices + infoViewIndices / 4);
+                    let eIndex: number = Math.round(exactTopIndex + idxAddedToExactTop);
+                    infoType.endIndex = eIndex < totalItemCount ? eIndex : totalItemCount;
+                    let sIndex: number = infoType.endIndex - this.parent.virtualItemCount;
+                    infoType.startIndex = sIndex > 0 ? sIndex : 0;
+                    infoType.endIndex = sIndex < 0 ? this.parent.virtualItemCount : infoType.endIndex;
+                    infoType.currentPageNumber = Math.ceil(infoType.startIndex / this.parent.virtualItemCount);
+                }
+            }
+        }
+        if (!isscrollAction) {
+            this.parent.previousStartIndex = infoType.startIndex;
+            this.parent.startIndex = infoType.startIndex;
+            this.parent.previousEndIndex = infoType.endIndex;
+        }
+        else {
+            this.parent.scrollPreStartIndex = infoType.startIndex;
+        }
+        return infoType;
+    }
+    private sentinelInfo: SentinelInfo = {
+        'up': {
+            check: (rect: ClientRect, info: SentinelType) => {
+                let top: number = rect.top - this.containerElementRect.top;
+                info.entered = top >= 0;
+                return top + (this.parent.listItemHeight * this.parent.virtualItemCount / 2) >= 0;
+            },
+            axis: 'Y'
+        },
+        'down': {
+            check: (rect: ClientRect, info: SentinelType) => {
+                let cHeight: number = this.parent.popupContentElement.clientHeight;
+                let top: number = rect.bottom;
+                info.entered = rect.bottom <= this.containerElementRect.bottom;
+                return top - (this.parent.listItemHeight * this.parent.virtualItemCount / 2) <= this.parent.listItemHeight * this.parent.virtualItemCount / 2;
+            }, axis: 'Y'
+        }
+    };
+
+    private virtualScrollHandler(callback?: Function): Function {
+        let delay: number = Browser.info.name === 'chrome' ? 200 : 100;
+        let prevTop: number = 0; let debounced100: Function = debounce(callback, delay);
+        let debounced50: Function = debounce(callback, 50);
+        return (e: Event) => {
+            let top: number = (<HTMLElement>e.target).scrollTop;
+            let left: number = (<HTMLElement>e.target).scrollLeft;
+            let direction: ScrollDirection = prevTop < top && !this.parent.isUpwardScrolling ? 'down' : 'up';
+            prevTop = top;
+            let current: SentinelType = this.sentinelInfo[direction as 'up' | 'down'];
+            var pstartIndex = this.parent.scrollPreStartIndex;
+            var scrollOffsetargs = {
+                top: top,
+                left: left
+            }
+            if (this.parent.list.querySelectorAll('.e-virtual-list').length > 0) {
+                var infoview = this.getInfoFromView(direction, current, scrollOffsetargs, true)
+                if (this.parent.scrollPreStartIndex != pstartIndex && !this.parent.isPreventScrollAction) {
+                    this.parent.isScrollActionTriggered = true;
+                    let virtualPoup: HTMLElement = (this.parent.list.querySelector('.e-virtual-ddl-content'));
+                    virtualPoup.style.transform = "translate(0px," + top + "px)";
+                }
+            }
+            let debounceFunction: Function = debounced100;
+            if (current.axis === 'X') { debounceFunction = debounced50; }
+            debounceFunction({ direction: direction, sentinel: current, offset: { top: top, left: left },
+                focusElement: document.activeElement});
+        };
+    }
+
+    public destroy(): void {
+        this.removeEventListener();
+    }
+}