@syncfusion/ej2-dropdowns 24.1.45-12082 → 24.1.46

package/dist/ts/list-box/list-box.ts

@@ -1,2772 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/triple-slash-reference
-/// <reference path='../drop-down-base/drop-down-base-model.d.ts'/>
-import { Input, InputObject } from '@syncfusion/ej2-inputs';
-import { DropDownBase, dropDownBaseClasses, FilteringEventArgs, SelectEventArgs } from '../drop-down-base/drop-down-base';
-import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';
-import { EventHandler, closest, removeClass, addClass, Complex, Property, ChildProperty, BaseEventArgs, L10n } from '@syncfusion/ej2-base';
-import { ModuleDeclaration, NotifyPropertyChanges, getComponent, EmitType, Event, extend, detach, attributes } from '@syncfusion/ej2-base';
-import { getUniqueID, Browser, formatUnit, isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
-import { prepend, append } from '@syncfusion/ej2-base';
-import { cssClass, Sortable, moveTo } from '@syncfusion/ej2-lists';
-import { SelectionSettingsModel, ListBoxModel, ToolbarSettingsModel } from './list-box-model';
-import { Button } from '@syncfusion/ej2-buttons';
-import { createSpinner, showSpinner, hideSpinner, getZindexPartial } from '@syncfusion/ej2-popups';
-import { DataManager, Query } from '@syncfusion/ej2-data';
-/**
- * Defines the selection mode in ListBox component.
- * ```props
- * Multiple :- Specifies that the ListBox should allow multiple item selection.
- * Single :- Specifies that the ListBox should allow single item selection.
- * ```
- */
-export type SelectionMode = 'Multiple' | 'Single';
-/**
- * Defines the position of the toolbar in ListBox component.
- * ```props
- * Left :- Specifies that the toolbar should be positioned to the left of the ListBox.
- * Right :- Specifies that the toolbar should be positioned to the right of the ListBox.
- * ```
- */
-export type ToolBarPosition = 'Left' | 'Right';
-/**
- * Defines the position of the checkbox in ListBox component.
- * ```props
- * Left :- Specifies that the checkbox should be positioned to the left of the ListBox.
- * Right :- Specifies that the checkbox should be positioned to the right of the ListBox.
- * ```
- */
-export type CheckBoxPosition = 'Left' | 'Right';
-
-type dataType = { [key: string]: object } | string | boolean | number;
-type obj = { [key: string]: object };
-const ITEMTEMPLATE_PROPERTY: string = 'ItemTemplate';
-/**
- * Defines the Selection settings of List Box.
- */
-export class SelectionSettings extends ChildProperty<SelectionSettings> {
-    /**
-     * Specifies the selection modes. The possible values are
-     * * `Single`: Allows you to select a single item in the ListBox.
-     * * `Multiple`: Allows you to select more than one item in the ListBox.
-     *
-     * @default 'Multiple'
-     */
-    @Property('Multiple')
-    public mode: SelectionMode;
-
-    /**
-     * If 'showCheckbox' is set to true, then 'checkbox' will be visualized in the list item.
-     *
-     * @default false
-     */
-    @Property(false)
-    public showCheckbox: boolean;
-
-    /**
-     * Allows you to either show or hide the selectAll option on the component.
-     *
-     * @default false
-     */
-    @Property(false)
-    public showSelectAll: boolean;
-
-    /**
-     * Set the position of the checkbox.
-     *
-     * @default 'Left'
-     */
-    @Property('Left')
-    public checkboxPosition: CheckBoxPosition;
-}
-/**
- * Defines the toolbar settings of List Box.
- */
-export class ToolbarSettings extends ChildProperty<ToolbarSettings> {
-    /**
-     * Specifies the list of tools for dual ListBox.
-     * The predefined tools are 'moveUp', 'moveDown', 'moveTo', 'moveFrom', 'moveAllTo', and 'moveAllFrom'.
-     *
-     * @default []
-     */
-    @Property([])
-    public items: string[];
-
-    /**
-     * Positions the toolbar before/after the ListBox.
-     * The possible values are:
-     * * Left: The toolbar will be positioned to the left of the ListBox.
-     * * Right: The toolbar will be positioned to the right of the ListBox.
-     *
-     * @default 'Right'
-     */
-    @Property('Right')
-    public position: ToolBarPosition;
-}
-
-/**
- * The ListBox is a graphical user interface component used to display a list of items.
- * Users can select one or more items in the list using a checkbox or by keyboard selection.
- * It supports sorting, grouping, reordering and drag and drop of items.
- * ```html
- * <select id="listbox">
- *      <option value='1'>Badminton</option>
- *      <option value='2'>Basketball</option>
- *      <option value='3'>Cricket</option>
- *      <option value='4'>Football</option>
- *      <option value='5'>Tennis</option>
- * </select>
- * ```
- * ```typescript
- * <script>
- *   var listObj = new ListBox();
- *   listObj.appendTo("#listbox");
- * </script>
- * ```
- */
-@NotifyPropertyChanges
-export class ListBox extends DropDownBase {
-    private prevSelIdx: number;
-    private listCurrentOptions: FieldSettingsModel;
-    private allowDragAll: boolean;
-    private checkBoxSelectionModule: { onDocumentClick: Function, checkAllParent: HTMLElement, clearIconElement: HTMLElement };
-    private tBListBox: ListBox;
-    private initLoad: boolean;
-    private spinner: HTMLElement;
-    private initialSelectedOptions: string[] | number[] | boolean[];
-    private showSelectAll: boolean;
-    private selectAllText: string;
-    private unSelectAllText: string;
-    private popupWrapper: Element;
-    private targetInputElement: HTMLInputElement | string;
-    private isValidKey: boolean = false;
-    private isFiltered: boolean;
-    private clearFilterIconElem: Element;
-    private remoteFilterAction: boolean;
-    private mainList: HTMLElement;
-    private remoteCustomValue: boolean;
-    private filterParent: HTMLElement;
-    protected inputString: string;
-    protected filterInput: HTMLInputElement;
-    protected isCustomFiltering: boolean;
-    private jsonData: { [key: string]: Object }[] | string[] | boolean[] | number[];
-    private toolbarAction: string;
-    private isDataSourceUpdate: boolean = false;
-    private dragValue: string;
-    private customDraggedItem: Object[];
-    private timer: number;
-    private inputFormName: string;
-    /**
-     * Sets the CSS classes to root element of this component, which helps to customize the
-     * complete styles.
-     *
-     * @default ''
-     */
-    @Property('')
-    public cssClass: string;
-
-    /**
-     * Sets the specified item to the selected state or gets the selected item in the ListBox.
-     *
-     * @default []
-     * @aspType object
-     * @isGenericType true
-     */
-    @Property([])
-    public value: string[] | number[] | boolean[];
-
-    /**
-     * Sets the height of the ListBox component.
-     *
-     * @default ''
-     */
-    @Property('')
-    public height: number | string;
-
-    /**
-     * Specifies a value that indicates whether the component is enabled or not.
-     *
-     * @default true
-     * @deprecated
-     */
-    @Property(true)
-    public enabled: boolean;
-
-    /**
-     * Enable or disable persisting component's state between page reloads.
-     * If enabled, following list of states will be persisted.
-     * 1. value
-     *
-     * @default false
-     * @deprecated
-     */
-    @Property(false)
-    public enablePersistence: boolean;
-
-    /**
-     * If 'allowDragAndDrop' is set to true, then you can perform drag and drop of the list item.
-     * ListBox contains same 'scope' property enables drag and drop between multiple ListBox.
-     *
-     * @default false
-     */
-    @Property(false)
-    public allowDragAndDrop: boolean;
-
-    /**
-     * Sets limitation to the value selection.
-     * based on the limitation, list selection will be prevented.
-     *
-     * @default 1000
-     */
-    @Property(1000)
-    public maximumSelectionLength: number;
-
-    /**
-     * To enable the filtering option in this component.
-     * Filter action performs when type in search box and collect the matched item through `filtering` event.
-     * If searching character does not match, `noRecordsTemplate` property value will be shown.
-     *
-     * @default false
-     */
-    @Property(false)
-    public allowFiltering: boolean;
-
-    /**
-     * Defines the scope value to group sets of draggable and droppable ListBox.
-     * A draggable with the same scope value will be accepted by the droppable.
-     *
-     * @default ''
-     */
-    @Property('')
-    public scope: string;
-
-    /**
-     * When set to ‘false’, consider the `case-sensitive` on performing the search to find suggestions.
-     * By default consider the casing.
-     *
-     * @default true
-     * @private
-     */
-    @Property(true)
-    public ignoreCase: boolean;
-
-    /**
-     * Accepts the value to be displayed as a watermark text on the filter bar.
-     *
-     * @default null
-     */
-    @Property(null)
-    public filterBarPlaceholder: string;
-
-    /**
-     * Triggers while rendering each list item.
-     *
-     * @event beforeItemRender
-     * @blazorProperty 'OnItemRender'
-     */
-    @Event()
-    public beforeItemRender: EmitType<BeforeItemRenderEventArgs>;
-
-    /**
-     * Triggers on typing a character in the component.
-     *
-     * @event filtering
-     * @blazorProperty 'ItemSelected'
-     */
-    @Event()
-    public filtering: EmitType<FilteringEventArgs>;
-
-    /**
-     * Triggers when an item in the popup is selected by the user either with mouse/tap or with keyboard navigation.
-     *
-     * @event select
-     * @private
-     */
-    @Event()
-    public select: EmitType<SelectEventArgs>;
-
-    /**
-     * Adds a new item to the popup list. By default, new item appends to the list as the last item,
-     * but you can insert based on the index parameter.
-     *
-     * @param  { Object[] } items - Specifies an array of JSON data or a JSON data.
-     * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.
-     * @returns {void}.
-     * @private
-     */
-    public addItem(
-        items: { [key: string]: Object }[] | { [key: string]: Object } | string | boolean | number | string[] | boolean[] | number[],
-        itemIndex?: number): void {
-        super.addItem(items, itemIndex);
-    }
-
-    /**
-     * Triggers while select / unselect the list item.
-     *
-     * @event change
-     * @blazorProperty 'ValueChange'
-     */
-    @Event()
-    public change: EmitType<ListBoxChangeEventArgs>;
-
-    /**
-     * Triggers before dropping the list item on another list item.
-     *
-     * @event beforeDrop
-     * @blazorProperty 'OnDrop'
-     */
-    @Event()
-    public beforeDrop: EmitType<DropEventArgs>;
-
-    /**
-     * Triggers after dragging the list item.
-     *
-     * @event dragStart
-     * @blazorProperty 'DragStart'
-     */
-    @Event()
-    public dragStart: EmitType<DragEventArgs>;
-
-    /**
-     * Triggers while dragging the list item.
-     *
-     * @event drag
-     * @blazorProperty 'Dragging'
-     */
-    @Event()
-    public drag: EmitType<DragEventArgs>;
-
-    /**
-     * Triggers before dropping the list item on another list item.
-     *
-     * @event drop
-     * @blazorProperty 'Dropped'
-     */
-    @Event()
-    public drop: EmitType<DragEventArgs>;
-
-    /**
-     * Triggers when data source is populated in the list.
-     *
-     * @event dataBound
-     */
-    @Event()
-    public dataBound: EmitType<Object>;
-
-    /**
-     * Accepts the template design and assigns it to the group headers present in the list.
-     *
-     * @default null
-     * @private
-     */
-    @Property(null)
-    public groupTemplate: string;
-    /**
-     * Accepts the template and assigns it to the list content of the ListBox component
-     * when the data fetch request from the remote server fails.
-     *
-     * @default 'Request Failed'
-     * @private
-     */
-    @Property('Request failed')
-    public actionFailureTemplate: string;
-
-    /**
-     * specifies the z-index value of the component popup element.
-     *
-     * @default 1000
-     * @private
-     */
-    @Property(1000)
-    public zIndex: number;
-    /**
-     * ignoreAccent set to true, then ignores the diacritic characters or accents when filtering.
-     *
-     * @private
-     */
-    @Property(false)
-    public ignoreAccent: boolean;
-
-    /**
-     * Specifies the toolbar items and its position.
-     *
-     * @default { items: [], position: 'Right' }
-     */
-    @Complex<ToolbarSettingsModel>({}, ToolbarSettings)
-    public toolbarSettings: ToolbarSettingsModel;
-
-    /**
-     * Specifies the selection mode and its type.
-     *
-     * @default { mode: 'Multiple', type: 'Default' }
-     */
-    @Complex<SelectionSettingsModel>({}, SelectionSettings)
-    public selectionSettings: SelectionSettingsModel;
-
-    /**
-     * Constructor for creating the ListBox component.
-     *
-     * @param {ListBoxModel} options - Specifies ListBox model
-     * @param {string | HTMLElement} element - Specifies the element.
-     */
-    constructor(options?: ListBoxModel, element?: string | HTMLElement) {
-        super(options, element);
-    }
-
-    /**
-     * Build and render the component.
-     *
-     * @private
-     * @returns {void}
-     */
-    public render(): void {
-        this.inputString = '';
-        this.initLoad = true;
-        this.isCustomFiltering = false;
-        this.initialSelectedOptions = this.value;
-        this.inputFormName = this.element.getAttribute('name');
-        super.render();
-        this.setEnabled();
-        this.renderComplete();
-    }
-
-    private initWrapper(): void {
-        const hiddenSelect: HTMLElement = this.createElement('select', { className: 'e-hidden-select', attrs: { 'multiple': '' } });
-        hiddenSelect.style.visibility = 'hidden';
-        this.list.classList.add('e-listbox-wrapper');
-        (this.list.querySelector('.e-list-parent') as any).setAttribute('role', 'presentation');
-        const groupHdrs: HTMLElement[] = <HTMLElement[] & NodeListOf<Element>>this.list.querySelectorAll('.e-list-group-item');
-        for (let i: number = 0; i < groupHdrs.length; i++) {
-            groupHdrs[i as number].removeAttribute('tabindex');
-            groupHdrs[i as number].setAttribute('role', 'option');
-        }
-        if (this.itemTemplate) {
-            this.list.classList.add('e-list-template');
-        }
-        this.list.classList.add('e-wrapper');
-        this.list.classList.add('e-lib');
-        if (this.element.tagName === 'EJS-LISTBOX') {
-            this.element.setAttribute('tabindex', '0');
-            if (this.initLoad) {
-                this.element.appendChild(this.list);
-            }
-        } else {
-            if (this.initLoad) {
-                this.element.parentElement.insertBefore(this.list, this.element);
-            }
-            this.list.insertBefore(this.element, this.list.firstChild);
-            this.element.style.display = 'none';
-        }
-        this.list.insertBefore(hiddenSelect, this.list.firstChild);
-        if (this.list.getElementsByClassName('e-list-item')[0]) {
-            this.list.getElementsByClassName('e-list-item')[0].classList.remove(dropDownBaseClasses.focus);
-        }
-        if (this.itemTemplate) { this.renderReactTemplates(); }
-        removeClass([this.list], [dropDownBaseClasses.content, dropDownBaseClasses.root]);
-        this.validationAttribute(this.element as HTMLInputElement, hiddenSelect as HTMLSelectElement);
-        this.list.setAttribute('role', 'listbox');
-        attributes(this.list, { 'role': 'listbox', 'aria-label': 'listbox', 'aria-multiselectable': this.selectionSettings.mode === 'Multiple' ? 'true' : 'false' });
-        this.updateSelectionSettings();
-    }
-
-    private updateSelectionSettings(): void {
-        if (this.selectionSettings.showCheckbox && this.selectionSettings.showSelectAll && this.liCollections.length) {
-            const l10nSelect: L10n = new L10n(
-                this.getModuleName(), { selectAllText: 'Select All', unSelectAllText: 'Unselect All' }, this.locale);
-            this.showSelectAll = true;
-            this.selectAllText = l10nSelect.getConstant('selectAllText');
-            this.unSelectAllText = l10nSelect.getConstant('unSelectAllText');
-            this.popupWrapper = this.list;
-            this.checkBoxSelectionModule.checkAllParent = null;
-            this.notify('selectAll', {});
-        }
-    }
-
-    private initDraggable(): void {
-        if (this.ulElement) {
-            this.ulElement.id = this.element.id + '_parent';
-        }
-        if (this.allowDragAndDrop) {
-            new Sortable(this.ulElement, {
-                scope: this.scope,
-                itemClass: 'e-list-item',
-                dragStart: this.triggerDragStart.bind(this),
-                drag: this.triggerDrag.bind(this),
-                beforeDrop: this.beforeDragEnd.bind(this),
-                drop: this.dragEnd.bind(this),
-                placeHolder: () => { return this.createElement('span', { className: 'e-placeholder' }); },
-                helper: (e: { sender: Element }) => {
-                    const wrapper: HTMLElement = this.list.cloneNode() as HTMLElement;
-                    const ele: HTMLElement = e.sender.cloneNode(true) as HTMLElement;
-                    wrapper.appendChild(ele);
-                    const refEle: HTMLElement = this.getItems()[0] as HTMLElement;
-                    wrapper.style.width = refEle.offsetWidth + 'px';
-                    wrapper.style.height = refEle.offsetHeight + 'px';
-                    if ((this.value && this.value.length) > 1 && this.isSelected(ele)) {
-                        ele.appendChild(this.createElement('span', {
-                            className: 'e-list-badge', innerHTML: this.value.length + ''
-                        }));
-                    }
-                    wrapper.style.zIndex = getZindexPartial(this.element) + '';
-                    return wrapper;
-                }
-            }
-            );
-        }
-    }
-
-    protected updateActionCompleteData(li: HTMLElement, item: { [key: string]: Object }, index: number): void {
-        (this.jsonData as { [key: string]: Object }[]).splice(index, 0, item);
-    }
-
-    private initToolbar(): void {
-        const pos: string = this.toolbarSettings.position;
-        const prevScope: string = this.element.getAttribute('data-value');
-        if (this.toolbarSettings.items.length) {
-            const toolElem: Element = this.createElement('div', { className: 'e-listbox-tool', attrs: { 'role': 'toolbar' } });
-            const wrapper: Element = this.createElement('div', {
-                className: 'e-listboxtool-wrapper e-lib e-' + pos.toLowerCase()
-            });
-            this.list.parentElement.insertBefore(wrapper, this.list);
-            wrapper.appendChild(pos === 'Right' ? this.list : toolElem);
-            wrapper.appendChild(pos === 'Right' ? toolElem : this.list);
-            this.createButtons(toolElem);
-            if (!this.element.id) {
-                this.element.id = getUniqueID('e-' + this.getModuleName());
-            }
-            if (this.scope) {
-                document.querySelector(this.scope).setAttribute('data-value', this.element.id);
-            } else {
-                this.updateToolBarState();
-            }
-        }
-        const scope: string = this.element.getAttribute('data-value');
-        if (prevScope && scope && (prevScope !== scope)) {
-            this.tBListBox = getComponent(document.getElementById(prevScope), this.getModuleName());
-            this.tBListBox.updateToolBarState();
-        } else if (scope) {
-            this.tBListBox = getComponent(document.getElementById(scope), this.getModuleName());
-            this.tBListBox.updateToolBarState();
-        }
-    }
-
-    private createButtons(toolElem: Element): void {
-        let btn: Button;
-        let ele: HTMLButtonElement;
-        let title: string;
-        const l10n: L10n = new L10n(
-            this.getModuleName(),
-            {
-                moveUp: 'Move Up', moveDown: 'Move Down', moveTo: 'Move To',
-                moveFrom: 'Move From', moveAllTo: 'Move All To', moveAllFrom: 'Move All From'
-            },
-            this.locale
-        );
-        this.toolbarSettings.items.forEach((value: string) => {
-            title = l10n.getConstant(value);
-            ele = this.createElement('button', {
-                attrs: {
-                    'type': 'button',
-                    'data-value': value,
-                    'title': title,
-                    'aria-label': title
-                }
-            }) as HTMLButtonElement;
-            toolElem.appendChild(ele);
-            btn = new Button({ iconCss: 'e-icons e-' + value.toLowerCase() }, ele);
-            btn.createElement = this.createElement;
-        });
-    }
-
-    protected validationAttribute(input: HTMLInputElement, hiddenSelect: HTMLSelectElement): void {
-        if (this.inputFormName) { input.setAttribute('name', this.inputFormName); }
-        super.validationAttribute(input, hiddenSelect);
-        hiddenSelect.required = input.required;
-        input.required = false;
-    }
-
-    private setHeight(): void {
-        const ele: HTMLElement = this.toolbarSettings.items.length ? this.list.parentElement : this.list;
-        ele.style.height = formatUnit(this.height);
-        if (this.allowFiltering && this.height.toString().indexOf('%') < 0) {
-            addClass([this.list], 'e-filter-list');
-        } else {
-            removeClass([this.list], 'e-filter-list');
-        }
-    }
-
-    private setCssClass(): void {
-        const wrap: Element = this.toolbarSettings.items.length ? this.list.parentElement : this.list;
-        if (this.cssClass) {
-            addClass([wrap], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
-        }
-        if (this.enableRtl) {
-            addClass([this.list], 'e-rtl');
-        }
-    }
-
-    private setEnable(): void {
-        const ele: Element = this.toolbarSettings.items.length ? this.list.parentElement : this.list;
-        if (this.enabled) {
-            removeClass([ele], cssClass.disabled);
-        } else {
-            addClass([ele], cssClass.disabled);
-        }
-    }
-
-    public showSpinner(): void {
-        if (!this.spinner) {
-            this.spinner = this.createElement('div', { className: 'e-listbox-wrapper' });
-        }
-        this.spinner.style.height = formatUnit(this.height);
-        this.element.parentElement.insertBefore(this.spinner, this.element.nextSibling);
-        createSpinner({ target: this.spinner }, this.createElement);
-        showSpinner(this.spinner);
-    }
-
-    public hideSpinner(): void {
-        if (this.spinner.querySelector('.e-spinner-pane')) {
-            hideSpinner(this.spinner);
-        }
-        if (this.spinner.parentElement) {
-            detach(this.spinner);
-        }
-    }
-
-    private onInput(): void {
-        this.isDataSourceUpdate = false;
-        if (this.keyDownStatus) {
-            this.isValidKey = true;
-        } else {
-            this.isValidKey = false;
-        }
-        this.keyDownStatus = false;
-        this.refreshClearIcon();
-    }
-
-    private clearText(): void {
-        this.filterInput.value = '';
-        this.refreshClearIcon();
-        const event: KeyboardEvent = document.createEvent('KeyboardEvent');
-        this.isValidKey = true;
-        this.KeyUp(event);
-    }
-
-    private refreshClearIcon(): void {
-        if (this.filterInput.parentElement.querySelector('.' + listBoxClasses.clearIcon)) {
-            const clearElement: HTMLElement = <HTMLElement>this.filterInput.parentElement.querySelector('.' + listBoxClasses.clearIcon);
-            clearElement.style.visibility = this.filterInput.value === '' ? 'hidden' : 'visible';
-        }
-    }
-
-    protected onActionComplete(
-        ulElement: HTMLElement,
-        list: obj[] | boolean[] | string[] | number[],
-        e?: Object): void {
-        let searchEle: Element; let filterElem: HTMLInputElement; let txtLength: number;
-        if (this.allowFiltering && this.list.getElementsByClassName('e-filter-parent')[0]) {
-            searchEle = this.list.getElementsByClassName('e-filter-parent')[0].cloneNode(true) as Element;
-        }
-        if (list.length === 0) {
-            const noRecElem: Element = ulElement.childNodes[0] as Element;
-            if (noRecElem) {
-                ulElement.removeChild(noRecElem);
-            }
-        }
-        if (this.allowFiltering) {
-            filterElem = (this.list.getElementsByClassName('e-input-filter')[0] as HTMLInputElement);
-            if (filterElem) {
-                txtLength = filterElem.selectionStart;
-            }
-        }
-        super.onActionComplete(ulElement, list, e);
-        if (this.allowFiltering && !isNullOrUndefined(searchEle)) {
-            this.list.insertBefore(searchEle, this.list.firstElementChild);
-            this.filterParent = this.list.getElementsByClassName('e-filter-parent')[0] as HTMLElement;
-            this.filterWireEvents(searchEle);
-        }
-        this.initWrapper();
-        this.setSelection();
-        this.initDraggable();
-        this.mainList = this.ulElement;
-        if (this.initLoad) {
-            this.jsonData = []; extend(this.jsonData, list, []);
-            this.initToolbarAndStyles();
-            this.wireEvents();
-            if (this.showCheckbox) {
-                this.setCheckboxPosition();
-            }
-            if (this.allowFiltering) {
-                this.setFiltering();
-            }
-        } else {
-            if (this.isDataSourceUpdate) {
-                this.jsonData = []; extend(this.jsonData, list, []);
-                this.isDataSourceUpdate = false;
-            }
-            if (this.allowFiltering) {
-                filterElem = (this.list.getElementsByClassName('e-input-filter')[0] as HTMLInputElement);
-                filterElem.selectionStart = txtLength;
-                filterElem.selectionEnd = txtLength;
-                filterElem.focus();
-            }
-        }
-        if (this.toolbarSettings.items.length && this.scope && this.scope.indexOf('#') > -1 && !isNullOrUndefined(e)) {
-            const scope: string = this.scope.replace('#', '');
-            const scopedLB: ListBox = getComponent(document.getElementById(scope), this.getModuleName());
-            scopedLB.initToolbar();
-        }
-        this.initLoad = false;
-    }
-
-    private initToolbarAndStyles(): void {
-        this.initToolbar();
-        this.setCssClass();
-        this.setEnable();
-        this.setHeight();
-    }
-
-    private triggerDragStart(args: DragEventArgs ): void {
-        let badge: Element;
-        args = extend(this.getDragArgs(args), { dragSelected: true }) as DragEventArgs;
-        if (Browser.isIos) {
-            this.list.style.overflow = 'hidden';
-        }
-        this.trigger('dragStart', args, (dragEventArgs: DragEventArgs) => {
-            this.allowDragAll = dragEventArgs.dragSelected;
-            if (!this.allowDragAll) {
-                badge = this.ulElement.getElementsByClassName('e-list-badge')[0];
-                if (badge) { detach(badge); }
-            }
-        });
-    }
-
-    private triggerDrag(args: DragEventArgs): void {
-        let scrollParent: HTMLElement; let boundRect: DOMRect; const scrollMoved: number = 36;
-        let scrollHeight: number = 10;
-        if (this.itemTemplate && args.target) {
-            if (args.target && args.target.closest('.e-list-item')) {
-                scrollHeight = args.target.closest('.e-list-item').scrollHeight;
-            } else {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const listItem: HTMLElement = (args as any).element.querySelector('.e-list-item');
-                if (listItem) {
-                    scrollHeight = listItem.scrollHeight;
-                }
-            }
-        }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const event: any = (args as any).event; let wrapper: HTMLElement; this.stopTimer();
-        if (args.target && (args.target.classList.contains('e-listbox-wrapper') || args.target.classList.contains('e-list-item')
-        || args.target.classList.contains('e-filter-parent') || args.target.classList.contains('e-input-group')
-        || args.target.closest('.e-list-item'))) {
-            if (args.target.classList.contains('e-list-item') || args.target.classList.contains('e-filter-parent')
-            || args.target.classList.contains('e-input-group') 
-            || args.target.closest('.e-list-item')) {
-                wrapper = args.target.closest('.e-listbox-wrapper') as HTMLElement;
-            } else {
-                wrapper = args.target as HTMLElement;
-            }
-            if (this.allowFiltering) {
-                scrollParent = wrapper.querySelector('.e-list-parent');
-            } else {
-                scrollParent = wrapper;
-            }
-            boundRect = scrollParent.getBoundingClientRect() as DOMRect;
-            if ((boundRect.y + scrollParent.offsetHeight) - (event.clientY + scrollMoved) < 1) {
-                this.timer = window.setInterval(() => { this.setScrollDown(scrollParent, scrollHeight, true); }, 70);
-            }
-            else if ((event.clientY - scrollMoved) - boundRect.y < 1) {
-                this.timer = window.setInterval(() => { this.setScrollDown(scrollParent, scrollHeight, false); }, 70);
-            }
-        }
-        if (args.target === null) {
-            return;
-        }
-        this.trigger('drag', this.getDragArgs(args as DragEventArgs));
-    }
-
-    private setScrollDown(scrollElem: Element, scrollPixel: number, isScrollDown: boolean): void {
-        if (isScrollDown) {
-            scrollElem.scrollTop = scrollElem.scrollTop + scrollPixel;
-        } else {
-            scrollElem.scrollTop = scrollElem.scrollTop - scrollPixel;
-        }
-    }
-
-    private stopTimer(): void {
-        window.clearInterval(this.timer);
-    }
-
-    private beforeDragEnd(args: DropEventArgs): void {
-        this.stopTimer();
-        let items: object[] = [];
-        this.dragValue = this.getFormattedValue(args.droppedElement.getAttribute('data-value')) as string;
-        if ((this.value as string[]).indexOf(this.dragValue) > -1) {
-            args.items = this.getDataByValues(this.value);
-        } else {
-            args.items = this.getDataByValues([this.dragValue]);
-        }
-        extend(items, args.items);
-        this.trigger('beforeDrop', args);
-        if (args.items !== items) {
-            this.customDraggedItem = args.items;
-        }
-    }
-
-    private dragEnd(args: DropEventArgs): void {
-        let listData: dataType[]; let liColl: HTMLElement[]; let jsonData: dataType[]; let droppedData: dataType;
-        let selectedOptions: (string | boolean | number)[]; let sortedData: dataType[];
-        const dropValue: string | number | boolean = this.getFormattedValue(args.droppedElement.getAttribute('data-value'));
-        const listObj: ListBox = this.getComponent(args.droppedElement);
-        const getArgs: Object = this.getDragArgs({ target: args.droppedElement } as DragEventArgs , true);
-        const sourceArgs: Object = { previousData: this.dataSource }; const destArgs: Object = { previousData: listObj.dataSource };
-        let dragArgs: Object = extend({}, getArgs, { target: args.target, source: { previousData: this.dataSource },
-            previousIndex: args.previousIndex, currentIndex: args.currentIndex });
-        if (listObj !== this) {
-            const sourceArgs1: Object = extend( sourceArgs, {currentData: this.listData});
-            dragArgs = extend(dragArgs, { source: sourceArgs1, destination: destArgs} );
-        }
-        if (Browser.isIos) {
-            this.list.style.overflow = '';
-        }
-        const targetListObj: ListBox = this.getComponent(args.target);
-        if (targetListObj && targetListObj.listData.length === 0) {
-            const noRecElem: Element = targetListObj.ulElement.childNodes[0] as Element;
-            if (noRecElem) {
-                targetListObj.ulElement.removeChild(noRecElem);
-            }
-        }
-        if (listObj === this) {
-            const ul: Element = this.ulElement;
-            listData = [].slice.call(this.listData); liColl = [].slice.call(this.liCollections);
-            jsonData = [].slice.call(this.jsonData); sortedData = [].slice.call(this.sortedData);
-            const toSortIdx: number = args.currentIndex;
-            let toIdx: number = args.currentIndex = this.getCurIdx(this, args.currentIndex);
-            const rIdx: number = listData.indexOf(this.getDataByValue(dropValue));
-            const jsonIdx: number = jsonData.indexOf(this.getDataByValue(dropValue));
-            const sIdx: number = sortedData.indexOf(this.getDataByValue(dropValue));
-            listData.splice(toIdx, 0, listData.splice(rIdx, 1)[0] as obj);
-            sortedData.splice(toSortIdx, 0, sortedData.splice(sIdx, 1)[0] as obj);
-            jsonData.splice(toIdx, 0, jsonData.splice(jsonIdx, 1)[0] as obj);
-            liColl.splice(toIdx, 0, liColl.splice(rIdx, 1)[0] as HTMLElement);
-            if (this.allowDragAll) {
-                selectedOptions = this.value && Array.prototype.indexOf.call(this.value, dropValue) > -1 ? this.value : [dropValue];
-                if (!isNullOrUndefined(this.customDraggedItem)) {
-                    selectedOptions = [];
-                    this.customDraggedItem.forEach((item: object) => {
-                        selectedOptions.push(getValue(this.fields.value, item));
-                    })
-                }
-                selectedOptions.forEach((value: string) => {
-                    if (value !== dropValue) {
-                        const idx: number = listData.indexOf(this.getDataByValue(value));
-                        const jsonIdx: number = jsonData.indexOf(this.getDataByValue(value));
-                        const sIdx: number = sortedData.indexOf(this.getDataByValue(value));
-                        if (idx > toIdx) {
-                            toIdx++;
-                        }
-                        jsonData.splice(toIdx, 0, jsonData.splice(jsonIdx, 1)[0] as obj);
-                        listData.splice(toIdx, 0, listData.splice(idx, 1)[0] as obj);
-                        sortedData.splice(toSortIdx, 0, sortedData.splice(sIdx, 1)[0] as obj);
-                        liColl.splice(toIdx, 0, liColl.splice(idx, 1)[0] as HTMLElement);
-                        ul.insertBefore(this.getItems()[this.getIndexByValue(value)], ul.getElementsByClassName('e-placeholder')[0]);
-                    }
-                });
-            }
-            (this.listData as dataType[]) = listData; (this.jsonData as dataType[]) = jsonData;
-            (this.sortedData as dataType[]) = sortedData; this.liCollections = liColl;
-        } else {
-            let li: Element; const fLiColl: HTMLElement[] = [].slice.call(this.liCollections);
-            let currIdx: number = args.currentIndex = this.getCurIdx(listObj, args.currentIndex); const ul: Element = listObj.ulElement;
-            listData = [].slice.call(listObj.listData); liColl = [].slice.call(listObj.liCollections);
-            jsonData = [].slice.call(listObj.jsonData); sortedData = [].slice.call(listObj.sortedData);
-            selectedOptions = (this.value && Array.prototype.indexOf.call(this.value, dropValue) > -1 && this.allowDragAll)
-                ? this.value : [dropValue];
-            if (!isNullOrUndefined(this.customDraggedItem)) {
-                selectedOptions = [];
-                this.customDraggedItem.forEach((item: object) => {
-                    selectedOptions.push(getValue(this.fields.value, item));
-                })
-            }
-            const fListData: dataType[] = [].slice.call(this.listData); const fSortData: dataType[] = [].slice.call(this.sortedData);
-            selectedOptions.forEach((value: string, index: number) => {
-                droppedData = this.getDataByValue(value);
-                const srcIdx: number = (this.listData as dataType[]).indexOf(droppedData);
-                const jsonSrcIdx: number = (this.jsonData as dataType[]).indexOf(droppedData);
-                const sortIdx: number = (this.sortedData as dataType[]).indexOf(droppedData);
-                fListData.splice(srcIdx, 1); this.jsonData.splice(jsonSrcIdx, 1);
-                fSortData.splice(sortIdx, 1); (this.listData as dataType[]) = fListData; (this.sortedData as dataType[]) = fSortData;
-                const destIdx: number = value === dropValue ? args.currentIndex : currIdx;
-                listData.splice(destIdx, 0, droppedData); jsonData.splice(destIdx, 0, droppedData);
-                sortedData.splice(destIdx, 0, droppedData);
-                liColl.splice(destIdx, 0, fLiColl.splice(srcIdx, 1)[0]);
-                if (!value) {
-                    const liCollElem: Element[] = this.getItems();
-                    for (let i: number = 0; i < liCollElem.length; i++ ) {
-                        if (liCollElem[i as number].getAttribute('data-value') === null && liCollElem[i as number].classList.contains('e-list-item')) {
-                            li = liCollElem[i as number];
-                            break;
-                        }
-                    }
-                } else {
-                    li = this.getItems()[this.getIndexByValue(value)];
-                }
-                if (!li) { li = args.helper; }
-                this.removeSelected(this, value === dropValue ? [args.droppedElement] : [li]);
-                ul.insertBefore(li, ul.getElementsByClassName('e-placeholder')[0]);
-                currIdx++;
-            });
-            if (this.fields.groupBy) {
-                const sourceElem: HTMLElement = this.renderItems(this.listData as obj[], this.fields);
-                this.updateListItems(sourceElem, this.ulElement); this.setSelection();
-            }
-            if (listObj.sortOrder !== 'None' || this.selectionSettings.showCheckbox
-                !== listObj.selectionSettings.showCheckbox || listObj.fields.groupBy || listObj.itemTemplate || this.itemTemplate) {
-                const sortable: { placeHolderElement: Element } = getComponent(ul as HTMLElement, 'sortable');
-                const sourceElem: HTMLElement = listObj.renderItems(listData as obj[], listObj.fields);
-                listObj.updateListItems(sourceElem, ul as HTMLElement); this.setSelection();
-                if (sortable.placeHolderElement) {
-                    ul.appendChild(sortable.placeHolderElement);
-                }
-                ul.appendChild(args.helper); listObj.setSelection();
-            }
-            this.liCollections = fLiColl; listObj.liCollections = liColl;
-            (listObj.jsonData as dataType[]) = extend([], [], jsonData, false) as dataType[];
-            (listObj.listData as dataType[]) = extend([], [], listData, false) as dataType[];
-            (listObj.sortedData as dataType[]) = extend([], [], sortedData, false) as dataType[];
-            if (this.listData.length === 0) {
-                this.l10nUpdate();
-            }
-        }
-        if (this === listObj) {
-            const sourceArgs1: Object = extend( sourceArgs, {currentData: listData});
-            dragArgs = extend(dragArgs, {source: sourceArgs1});
-        } else {
-            const dragArgs1: Object = extend(destArgs, {currentData: listData});
-            dragArgs = extend(dragArgs, { destination: dragArgs1 });
-        }
-        if (!isNullOrUndefined(this.customDraggedItem)) {
-            (dragArgs as DragEventArgs).items = this.customDraggedItem;
-        }
-        this.trigger('drop', dragArgs);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const liCollElem: NodeListOf<Element> = (dragArgs as any).elements;
-        if (liCollElem.length) {
-            for (let i: number = 0; i < liCollElem.length; i++) {
-                liCollElem[i as number].classList.remove('e-grabbed');
-            }
-        }
-    }
-
-    private updateListItems(sourceElem: HTMLElement, destElem: HTMLElement): void {
-        const i: number = 0;
-        destElem.innerHTML = '';
-        while (i < sourceElem.childNodes.length) {
-            destElem.appendChild(sourceElem.childNodes[i as number]);
-        }
-    }
-
-    private removeSelected(listObj: ListBox, elems: Element[]): void {
-        if (listObj.selectionSettings.showCheckbox) {
-            elems.forEach((ele: Element) => { ele.getElementsByClassName('e-frame')[0].classList.remove('e-check'); });
-        } else {
-            removeClass(elems, cssClass.selected);
-        }
-    }
-
-    private getCurIdx(listObj: ListBox, idx: number): number {
-        if (listObj.fields.groupBy) {
-            idx -= [].slice.call(listObj.ulElement.children).slice(0, idx)
-                .filter((ele: Element) => ele.classList.contains(cssClass.group)).length;
-        }
-        return idx;
-    }
-
-    private getComponent(li: Element): ListBox {
-        let listObj: ListBox;
-        const ele: HTMLElement = (this.element.tagName === 'EJS-LISTBOX' ? closest(li, '.e-listbox')
-            : closest(li, '.e-listbox-wrapper') && closest(li, '.e-listbox-wrapper').querySelector('.e-listbox')) as HTMLElement;
-        if (ele) {
-            listObj = getComponent(ele, this.getModuleName());
-        }
-        return listObj;
-    }
-
-    /**
-     * Sets the enabled state to DropDownBase.
-     *
-     * @returns {void}
-     */
-    protected setEnabled(): void {
-        this.element.setAttribute('aria-disabled', (this.enabled) ? 'false' : 'true');
-    }
-
-    protected listOption(
-        dataSource: obj[] | string[] | number[] | boolean[],
-        fields: FieldSettingsModel): FieldSettingsModel {
-        this.listCurrentOptions = super.listOption(dataSource, fields);
-        this.listCurrentOptions = extend({}, this.listCurrentOptions, { itemCreated: this.triggerBeforeItemRender.bind(this) }, true);
-        this.notify('listoption', { module: 'CheckBoxSelection' });
-        return this.listCurrentOptions;
-    }
-
-    private triggerBeforeItemRender(e: { item: Element, curData: obj }): void {
-        e.item.setAttribute('tabindex', '-1');
-        this.trigger('beforeItemRender', { element: e.item, item: e.curData });
-    }
-
-    public requiredModules(): ModuleDeclaration[] {
-        const modules: ModuleDeclaration[] = [];
-        if (this.selectionSettings.showCheckbox) {
-            modules.push({
-                member: 'CheckBoxSelection',
-                args: [this]
-            });
-        }
-        return modules;
-    }
-
-    /**
-     * This method is used to enable or disable the items in the ListBox based on the items and enable argument.
-     *
-     * @param {string[]} items - Text items that needs to be enabled/disabled.
-     * @param {boolean} enable - Set `true`/`false` to enable/disable the list items.
-     * @param {boolean} isValue - Set `true` if `items` parameter is a array of unique values.
-     * @returns {void}
-     */
-    public enableItems(items: string[], enable: boolean = true, isValue?: boolean): void {
-        let li: HTMLElement;
-        items.forEach((item: string) => {
-            const text: string = item;
-            li = this.findListElement(this.list, 'li', 'data-value', isValue ? text : this.getValueByText(text));
-            if (!li) { return; }
-            if (enable) {
-                removeClass([li], cssClass.disabled);
-                li.removeAttribute('aria-disabled');
-            } else {
-                addClass([li], cssClass.disabled);
-                li.setAttribute('aria-disabled', 'true');
-            }
-        });
-    }
-
-    /**
-     * Based on the state parameter, specified list item will be selected/deselected.
-     *
-     * @param {string[]} items - Array of text value of the item.
-     * @param {boolean} state - Set `true`/`false` to select/un select the list items.
-     * @param {boolean} isValue - Set `true` if `items` parameter is a array of unique values.
-     * @returns {void}
-     */
-    public selectItems(items: string[], state: boolean = true, isValue?: boolean): void {
-        if (state && !this.selectionSettings.showCheckbox && this.selectionSettings.mode === 'Single') {
-            this.getSelectedItems().forEach((li: Element) => {
-                li.classList.remove('e-active');
-                li.removeAttribute('aria-selected');
-                removeClass([li], cssClass.selected);
-            });
-        }
-        this.setSelection(items, state, !isValue);
-        this.updateSelectedOptions();
-        let selElems: Element[] = [];
-	    for (let i: number = 0; i < items.length; i++) {
-	    const liColl: NodeListOf<Element> = this.list.querySelectorAll('[aria-selected="true"]');
-	    for (let j: number = 0; j < liColl.length; j++) {
-	        if (items[i as number] === this.getFormattedValue(liColl[j as number].getAttribute('data-value')) as string) {
-	            selElems.push(liColl[j as number])
-		}
-	    }
-	}
-	this.triggerChange(selElems, null);
-    }
-
-    /**
-     * Based on the state parameter, entire list item will be selected/deselected.
-     *
-     * @param {boolean} state - Set `true`/`false` to select/un select the entire list items.
-     * @returns {void}
-     */
-    public selectAll(state: boolean = true): void {
-        this.selectAllItems(state);
-    }
-
-    /**
-     * Adds a new item to the list. By default, new item appends to the list as the last item,
-     * but you can insert based on the index parameter.
-     *
-     * @param  { Object[] } items - Specifies an array of JSON data or a JSON data.
-     * @param { number } itemIndex - Specifies the index to place the newly added item in the list.
-     * @returns {void}.
-     */
-    public addItems(items: obj[] | obj, itemIndex?: number): void {
-        super.addItem(items, itemIndex);
-    }
-    /**
-     * Removes a item from the list. By default, removed the last item in the list,
-     * but you can remove based on the index parameter.
-     *
-     * @param  { Object[] } items - Specifies an array of JSON data or a JSON data.
-     * @param { number } itemIndex - Specifies the index to remove the item from the list.
-     * @returns {void}.
-     */
-    public removeItems(items?: obj[] | obj, itemIndex?: number): void {
-        this.removeItem(items, itemIndex);
-    }
-    /**
-     * Removes a item from the list. By default, removed the last item in the list,
-     * but you can remove based on the index parameter.
-     *
-     * @param  { Object[] } items - Specifies an array of JSON data or a JSON data.
-     * @param { number } itemIndex - Specifies the index to remove the item from the list.
-     * @returns {void}.
-     */
-    public removeItem(
-        items?: { [key: string]: Object }[] | { [key: string]: Object } | string | boolean | number | string[] | boolean[] | number[],
-        itemIndex?: number): void {
-        const liCollections: HTMLElement[] = [];
-        const liElement: HTMLElement[] | NodeListOf<HTMLLIElement> = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
-        if (items) {
-            items = (items instanceof Array ? items : [items]) as { [key: string]: Object }[] | string[] | boolean[] | number[];
-            const fields: FieldSettingsModel = this.fields; let dataValue: string; let objValue: string;
-            const dupData: {[key: string]: Object }[] = []; let itemIdx: number;
-            extend(dupData, [], this.jsonData as { [key: string]: Object }[]);
-            const removeIdxes: number [] = []; const removeLiIdxes: number [] = [];
-            for (let j: number = 0; j < items.length; j++) {
-                if (items[j as number] instanceof Object) {
-                    dataValue = getValue(fields.value, items[j as number]);
-                } else {
-                    dataValue = items[j as number].toString();
-                }
-                for (let i: number = 0, len: number = dupData.length; i < len; i++) {
-                    if (dupData[i as number] instanceof Object) {
-                        objValue = getValue(fields.value, dupData[i as number]);
-                    } else {
-                        objValue = dupData[i as number].toString();
-                    }
-                    if (objValue === dataValue) {
-                        itemIdx = this.getIndexByValue(dataValue);
-                        const idx: number = itemIdx === i ? itemIdx : i;
-                        liCollections.push(liElement[idx as number]);
-                        removeIdxes.push(idx);
-                        removeLiIdxes.push(idx);
-                    }
-                }
-            }
-            for (let k: number = removeIdxes.length - 1; k >= 0; k--) {
-                (this.listData as { [key: string]: Object }[]).splice(removeIdxes[k as number], 1);
-            }
-            for (let k: number = removeIdxes.length - 1; k >= 0; k--) {
-                (this.jsonData as { [key: string]: Object }[]).splice(removeIdxes[k as number], 1);
-            }
-            for (let k: number = removeLiIdxes.length - 1; k >= 0; k--) {
-                this.updateLiCollection(removeLiIdxes[k as number]);
-            }
-        } else {
-            itemIndex = itemIndex ? itemIndex : 0;
-            liCollections.push(liElement[itemIndex as number]);
-            (this.listData as { [key: string]: Object }[]).splice(itemIndex, 1);
-            (this.jsonData as { [key: string]: Object }[]).splice(itemIndex, 1);
-            this.updateLiCollection(itemIndex);
-        }
-        for (let i: number = 0; i < liCollections.length; i++) {
-            this.ulElement.removeChild(liCollections[i as number]);
-        }
-        if (this.listData.length === 0) {
-            this.l10nUpdate();
-        }
-        this.value = [];
-        this.updateToolBarState();
-    }
-    /**
-     * Gets the array of data Object that matches the given array of values.
-     *
-     * @param  { string[] | number[] | boolean[] } value - Specifies the array value of the list item.
-     * @returns {object[]}.
-     */
-    public getDataByValues(value: string[] | number[] | boolean[] ): { [key: string]: Object }[] {
-        const data: string | number | boolean | { [key: string]: Object }[] = [];
-        for (let i: number = 0; i < value.length; i++) {
-            data.push(this.getDataByValue(value[i as number]) as { [key: string]: Object });
-        }
-        return data;
-    }
-    /**
-     * Moves the given value(s) / selected value(s) upwards.
-     *
-     * @param  { string[] | number[] | boolean[] } value - Specifies the value(s).
-     * @returns {void}
-     */
-    public moveUp(value?: string[] | number[] | boolean[]): void {
-        const elem: Element[] = (value) ? this.getElemByValue(value) : this.getSelectedItems();
-        this.moveUpDown(true, false, elem);
-    }
-    /**
-     * Moves the given value(s) / selected value(s) downwards.
-     *
-     * @param  { string[] | number[] | boolean[] } value - Specifies the value(s).
-     * @returns {void}
-     */
-    public moveDown(value?: string[] | number[] | boolean[]): void {
-        const elem: Element[] = (value) ? this.getElemByValue(value) : this.getSelectedItems();
-        this.moveUpDown(false, false, elem);
-    }
-    /**
-     * Moves the given value(s) / selected value(s) in Top of the list.
-     *
-     * @param  { string[] | number[] | boolean[] } value - Specifies the value(s).
-     * @returns {void}
-     */
-      public moveTop(value?: string[] | number[] | boolean[]): void {
-        const elem: Element[] = (value) ? this.getElemByValue(value) : this.getSelectedItems();
-        this.moveUpDown(null, false, elem, true);
-    }
-    /**
-     * Moves the given value(s) / selected value(s) in bottom of the list.
-     *
-     * @param  { string[] | number[] | boolean[] } value - Specifies the value(s).
-     * @returns {void}
-     */
-     public moveBottom(value?: string[] | number[] | boolean[]): void {
-        const elem: Element[] = (value) ? this.getElemByValue(value) : this.getSelectedItems();
-        this.moveUpDown(true, false, elem, false, true);
-    }
-    /**
-     * Moves the given value(s) / selected value(s) to the given / default scoped ListBox.
-     *
-     * @param  { string[] | number[] | boolean[] } value - Specifies the value or array value of the list item.
-     * @param {number} index - Specifies the index.
-     * @param {string} targetId - Specifies the target id.
-     * @returns {void}
-     */
-    public moveTo(value?: string[] | number[] | boolean[], index?: number, targetId?: string): void {
-        const elem: Element[] = (value) ? this.getElemByValue(value) : this.getSelectedItems();
-        const tlistbox: ListBox = (targetId) ? getComponent(targetId, ListBox) : this.getScopedListBox();
-        this.moveData(this, tlistbox, false, elem, index);
-    }
-    /**
-     * Moves all the values from one ListBox to the scoped ListBox.
-     *
-     * @param  { string } targetId - Specifies the scoped ListBox ID.
-     * @param  { string } index - Specifies the index to where the items moved.
-     * @returns {void}
-     */
-    public moveAllTo(targetId?: string, index?: number): void {
-        if (this.listData.length > 0) {
-            const tlistbox: ListBox = (targetId) ? getComponent(targetId, ListBox) : this.getScopedListBox();
-            this.moveAllData(this, tlistbox, false, index);
-        }
-    }
-    /* eslint-disable */
-    /**
-     * Gets the updated dataSource in ListBox.
-     *
-     * @returns {{ [key: string]: Object }[] | string[] | boolean[] | number[]} - Updated DataSource.
-     */
-    /* eslint-enable */
-    public getDataList(): { [key: string]: Object }[] | string[] | boolean[] | number[] {
-        return this.jsonData;
-    }
-    /* eslint-disable */
-    /**
-     * Returns the sorted Data in ListBox.
-     *
-     * @returns {{ [key: string]: Object }[] | string[] | boolean[] | number[]} - Sorted data
-     */
-    /* eslint-enable */
-    public getSortedList(): { [key: string]: Object }[] | string[] | boolean[] | number[] {
-        let sortData: dataType[]; let tempData: { [key: string]: Object }[] | string[] | boolean[] | number[];
-        sortData = tempData = this.sortedData;
-        if (this.fields.groupBy) {
-            sortData = [];
-            for (let i: number = 0; i < tempData.length; i++) {
-                if ((tempData[i as number] as { [key: string]: Object }).isHeader) {
-                    continue;
-                }
-                sortData.push(tempData[i as number]);
-            }
-        }
-        return sortData as { [key: string]: Object }[] | string[] | boolean[] | number[];
-    }
-    private getElemByValue(value: string[] | number[] | boolean[]): Element[] {
-        const elem: Element[] = [];
-        for (let i: number = 0; i < value.length; i++) {
-            elem.push(this.ulElement.querySelector('[data-value ="' + value[i as number] + '"]'));
-        }
-        return elem;
-    }
-    private updateLiCollection(index: number): void {
-        const tempLi: HTMLElement[] = [].slice.call(this.liCollections);
-        tempLi.splice(index, 1);
-        this.liCollections = tempLi;
-    }
-    private selectAllItems(state: boolean, event?: MouseEvent): void {
-        [].slice.call(this.getItems()).forEach((li: Element) => {
-            if (!li.classList.contains(cssClass.disabled)) {
-                if (this.selectionSettings.showCheckbox) {
-                    const ele: Element = li.getElementsByClassName('e-check')[0];
-                    if ((!ele && state) || (ele && !state)) {
-                        this.notify('updatelist', { li: li, module: 'listbox' });
-                        if (this.maximumSelectionLength >= this.list.querySelectorAll('.e-list-item span.e-check').length) {
-                            this.checkMaxSelection();
-                        }
-                    }
-                } else {
-                    if (state) {
-                        li.classList.add(cssClass.selected);
-                    } else {
-                        li.classList.remove(cssClass.selected);
-                    }
-                }
-            }
-        });
-        this.updateSelectedOptions();
-        if (this.allowFiltering && this.selectionSettings.showCheckbox) {
-            const liEle: HTMLCollectionOf<HTMLLIElement> = this.list.getElementsByTagName('li') as HTMLCollectionOf<HTMLLIElement>;
-            let index: number = 0;
-            if (state) {
-                for (index = 0; index < liEle.length; index++) {
-                    const dataValue1: string = this.getFormattedValue(liEle[index as number].getAttribute('data-value')) as string;
-                    if (!(this.value as string[]).some((e: string) => e === dataValue1)) {
-                        (this.value as string[]).push(this.getFormattedValue(liEle[index as number].getAttribute('data-value')) as string);
-                    }
-                }
-            } else {
-                for (index = 0; index < liEle.length; index++) {
-                    const dataValue2: string = this.getFormattedValue(liEle[index as number].getAttribute('data-value')) as string;
-                    this.value = (this.value as string[]).filter((e: string) => e !== dataValue2);
-                }
-            }
-            if (document.querySelectorAll('ul').length < 2) {
-                this.updateMainList();
-            }
-        }
-        this.triggerChange(this.getSelectedItems(), event);
-    }
-
-    private updateMainList(): void {
-        const mainList: NodeListOf<Element> = this.mainList.querySelectorAll('.e-list-item');
-        const ulList: NodeListOf<Element> = this.ulElement.querySelectorAll('.e-list-item');
-        const mainCount: number = mainList.length; const ulEleCount: number = ulList.length;
-        if (this.selectionSettings.showCheckbox || (document.querySelectorAll('ul').length > 1 || mainCount !== ulEleCount)) {
-            let listindex: number = 0;
-            let valueindex: number = 0;
-            let count: number = 0;
-            for (listindex; listindex < mainCount; ) {
-                if (this.value) {
-                    for (valueindex; valueindex < this.value.length; valueindex++) {
-                        if (mainList[listindex as number].getAttribute('data-value') === this.value[valueindex as number]) {
-                            count++;
-                        }
-                    }
-                }
-                if (!count && this.selectionSettings.showCheckbox) {
-                    mainList[listindex as number].getElementsByClassName('e-frame')[0].classList.remove('e-check');
-                }
-                if (document.querySelectorAll('ul').length > 1 && count && mainCount !== ulEleCount) {
-                    this.mainList.removeChild(this.mainList.getElementsByTagName('li')[listindex as number]);
-                    listindex = 0;
-                } else {
-                    listindex++;
-                }
-                count = 0;
-                valueindex = 0;
-            }
-        }
-    }
-
-    private wireEvents(): void {
-        const form: Element = closest(this.element, 'form');
-        const wrapper: Element = this.element.tagName === 'EJS-LISTBOX' ? this.element : this.list;
-        EventHandler.add(this.list, 'click', this.clickHandler, this);
-        EventHandler.add(wrapper, 'keydown', this.keyDownHandler, this);
-        EventHandler.add(wrapper, 'focusout', this.focusOutHandler, this);
-        this.wireToolbarEvent();
-        if (this.selectionSettings.showCheckbox) {
-            EventHandler.remove(document, 'mousedown', this.checkBoxSelectionModule.onDocumentClick);
-        }
-        if (this.fields.groupBy || this.element.querySelector('select>optgroup')) {
-            EventHandler.remove(this.list, 'scroll', this.setFloatingHeader);
-        }
-        if (form) {
-            EventHandler.add(form, 'reset', this.formResetHandler, this);
-        }
-    }
-
-    private wireToolbarEvent(): void {
-        if (this.toolbarSettings.items.length) {
-            EventHandler.add(this.getToolElem(), 'click', this.toolbarClickHandler, this);
-        }
-    }
-
-    private unwireEvents(): void {
-        const form: Element = closest(this.element, 'form');
-        const wrapper: Element = this.element.tagName === 'EJS-LISTBOX' ? this.element : this.list;
-        EventHandler.remove(this.list, 'click', this.clickHandler);
-        EventHandler.remove(wrapper, 'keydown', this.keyDownHandler);
-        EventHandler.remove(wrapper, 'focusout', this.focusOutHandler);
-        if (this.allowFiltering && this.clearFilterIconElem) {
-            EventHandler.remove(this.clearFilterIconElem, 'click', this.clearText);
-        }
-        if (this.toolbarSettings.items.length) {
-            EventHandler.remove(this.getToolElem(), 'click', this.toolbarClickHandler);
-        }
-        if (form) {
-            EventHandler.remove(form, 'reset', this.formResetHandler);
-        }
-    }
-
-    private clickHandler(e: MouseEvent): void {
-        this.selectHandler(e);
-    }
-
-    private checkSelectAll(): void {
-        let searchCount: number = 0;
-        const liItems: NodeListOf<Element> = this.list.querySelectorAll('li.' + dropDownBaseClasses.li);
-        for (let i: number = 0; i < liItems.length; i++) {
-            if (!liItems[i as number].classList.contains('e-disabled')) {
-                searchCount++;
-            }
-        }
-        const len: number = this.getSelectedItems().length;
-        if (this.showSelectAll && searchCount) {
-            this.notify('checkSelectAll', { module: 'CheckBoxSelection',
-                value: (searchCount === len) ? 'check' : (len === 0) ? 'uncheck' : 'indeterminate'});
-        }
-    }
-
-    protected getQuery(query: Query): Query {
-        let filterQuery: Query = query ? query.clone() : this.query ? this.query.clone() : new Query();
-        if (this.allowFiltering) {
-            const filterType: string = this.inputString === '' ? 'contains' : this.filterType;
-            let dataType: string = <string>this.typeOfData(this.dataSource as { [key: string]: Object; }[]).typeof;
-            if (dataType === null) {
-                dataType = <string>this.typeOfData(this.jsonData as { [key: string]: Object; }[]).typeof;
-            }
-            if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
-                filterQuery.where('', filterType, this.inputString, this.ignoreCase, this.ignoreAccent);
-            } else {
-                const fields: string = (this.fields.text) ? this.fields.text : '';
-                filterQuery.where(fields, filterType, this.inputString, this.ignoreCase, this.ignoreAccent);
-            }
-        } else {
-            filterQuery = query ? query : this.query ? this.query : new Query();
-        }
-        return filterQuery;
-    }
-
-    private setFiltering(): InputObject | void {
-        let filterInputObj: InputObject;
-        if (this.initLoad || isNullOrUndefined(this.filterParent)) {
-            this.filterParent = this.createElement('span', {
-                className: listBoxClasses.filterParent
-            });
-            this.filterInput = <HTMLInputElement>this.createElement('input', {
-                attrs: { type: 'text' },
-                className: listBoxClasses.filterInput
-            });
-            this.element.parentNode.insertBefore(this.filterInput, this.element);
-            filterInputObj = Input.createInput(
-                {
-                    element: this.filterInput,
-                    buttons: [listBoxClasses.filterBarClearIcon],
-                    properties: { placeholder: this.filterBarPlaceholder }
-                },
-                this.createElement
-            );
-            append([filterInputObj.container], this.filterParent);
-            prepend([this.filterParent], this.list);
-            attributes(this.filterInput, {
-                'aria-disabled': 'false',
-                'aria-label': 'search list item',
-                'autocomplete': 'off',
-                'autocorrect': 'off',
-                'autocapitalize': 'off',
-                'spellcheck': 'false',
-                'role': 'textbox'
-            });
-            if (this.height.toString().indexOf('%') < 0) {
-                addClass([this.list], 'e-filter-list');
-            }
-            this.inputString = this.filterInput.value;
-            this.filterWireEvents();
-            return filterInputObj;
-        }
-    }
-
-    private filterWireEvents(filterElem?: Element): void {
-        if (filterElem) {
-            this.filterInput = filterElem.querySelector('.e-input-filter');
-        }
-        this.clearFilterIconElem = this.filterInput.parentElement.querySelector('.' + listBoxClasses.clearIcon);
-        if (this.clearFilterIconElem) {
-            EventHandler.add(this.clearFilterIconElem, 'click', this.clearText, this);
-            if (!filterElem) {
-                (this.clearFilterIconElem as HTMLElement).style.visibility = 'hidden';
-            }
-        }
-        EventHandler.add(this.filterInput, 'input', this.onInput, this);
-        EventHandler.add(this.filterInput, 'keyup', this.KeyUp, this);
-        EventHandler.add(this.filterInput, 'keydown', this.onKeyDown, this);
-    }
-
-    private selectHandler(e: MouseEvent | { target: EventTarget, ctrlKey?: boolean, shiftKey?: boolean,
-        metaKey?: boolean}, isKey?: boolean): void {
-        let isSelect: boolean = true;
-        let currSelIdx: number;
-        const li: Element = closest(e.target as Element, '.' + 'e-list-item');
-        let selectedLi: Element[] = [li];
-        if (li && li.parentElement) {
-            currSelIdx = [].slice.call(li.parentElement.children).indexOf(li);
-            if (!this.selectionSettings.showCheckbox) {
-                if ((e.ctrlKey || e.metaKey || Browser.isDevice) && this.isSelected(li)) {
-                    li.classList.remove(cssClass.selected);
-                    li.removeAttribute('aria-selected');
-                    isSelect = false;
-                } else if (!(this.selectionSettings.mode === 'Multiple' && (e.ctrlKey || e.metaKey || Browser.isDevice))) {
-                    this.getSelectedItems().forEach((ele: Element) => {
-                        ele.removeAttribute('aria-selected');
-                    });
-                    removeClass(this.getSelectedItems(), cssClass.selected);
-                }
-            } else {
-                isSelect = !li.getElementsByClassName('e-frame')[0].classList.contains('e-check');
-            }
-            if (e.shiftKey && !this.selectionSettings.showCheckbox && this.selectionSettings.mode !== 'Single') {
-                selectedLi = [].slice.call(li.parentElement.children)
-                    .slice(Math.min(currSelIdx, this.prevSelIdx), Math.max(currSelIdx, this.prevSelIdx) + 1)
-                    .filter((ele: Element) => { return ele.classList.contains('e-list-item'); });
-            } else {
-                this.prevSelIdx = [].slice.call(li.parentElement.children).indexOf(li);
-            }
-            if (isSelect) {
-                if (!this.selectionSettings.showCheckbox) {
-                    addClass(selectedLi, cssClass.selected);
-                }
-                selectedLi.forEach((ele: Element) => {
-                    ele.setAttribute('aria-selected', 'true');
-                });
-                this.list.setAttribute('aria-activedescendant', li.id);
-            } else {
-                selectedLi.forEach((ele: Element) => {
-                    ele.setAttribute('aria-selected', 'false');
-                });
-            }
-            if (!isKey && (this.maximumSelectionLength > (this.value && this.value.length) || !isSelect) &&
-                (this.maximumSelectionLength >= (this.value && this.value.length) || !isSelect) &&
-                !(this.maximumSelectionLength < (this.value && this.value.length))) {
-                this.notify('updatelist', { li: li, e: e, module: 'listbox' });
-            }
-            if (this.allowFiltering && !isKey) {
-                const liDataValue: string = this.getFormattedValue(li.getAttribute('data-value')) as string;
-                if (!isSelect) {
-                    this.value = (this.value as string[]).filter((value1: string) =>
-                        value1 !== liDataValue);
-                } else {
-                    const values: string[] = [];
-                    extend(values, this.value); values.push(liDataValue);
-                    this.value = values;
-                }
-                if (document.querySelectorAll('ul').length < 2) {
-                    this.updateMainList();
-                }
-            }
-            this.updateSelectedOptions();
-            this.triggerChange(this.getSelectedItems(), e as MouseEvent);
-            if (this.list) {
-                this.checkMaxSelection();
-            }
-        }
-    }
-
-    private triggerChange(selectedLis: Element[], event: MouseEvent): void {
-        this.trigger('change', { elements: selectedLis, items: this.getDataByElements(selectedLis), value: this.value, event: event });
-    }
-
-    private getDataByElems(elems: Element[]): Object[] {
-        const data: Object[] = [];
-        for (let i: number = 0, len: number = elems.length; i < len; i++) {
-            data.push(this.getDataByValue(this.getFormattedValue(elems[i as number].getAttribute('data-value'))));
-        }
-        return data;
-    }
-    private getDataByElements(elems: Element[]): Object[] {
-
-        const data: Object[] = []; let value: string | number | boolean; let sIdx: number = 0;
-        if (!isNullOrUndefined(this.listData)) {
-            const type: string = this.typeOfData(this.listData).typeof as string;
-            if (type === 'string' || type === 'number' || type === 'boolean') {
-                for (const item of this.listData) {
-                    for (let i: number = sIdx, len: number = elems.length; i < len; i++) {
-                        value = this.getFormattedValue((elems[i as number] as Element).getAttribute('data-value'));
-                        if (!isNullOrUndefined(item) && item === value as Object) {
-                            sIdx = i; data.push(item); break;
-                        }
-                    }
-                    if (elems.length === data.length) {
-                        break;
-                    }
-                }
-            } else {
-                for (const item of this.listData) {
-                    for (let i: number = sIdx, len: number = elems.length; i < len; i++) {
-                        value = this.getFormattedValue((elems[i as number] as Element).getAttribute('data-value'));
-                        if (!isNullOrUndefined(item) && getValue((this.fields.value ? this.fields.value : 'value'), item) === value) {
-                            sIdx = i; data.push(item); break;
-                        }
-                    }
-                    if (elems.length === data.length) {
-                        break;
-                    }
-                }
-            }
-            return data;
-        }
-        return null;
-    }
-    private checkMaxSelection(): InputObject | void {
-        const limit: number = this.list.querySelectorAll('.e-list-item span.e-check').length;
-        if (this.selectionSettings.showCheckbox) {
-            let index: number = 0;
-            const liCollElem: HTMLCollectionOf<HTMLLIElement> = this.list.getElementsByClassName('e-list-item') as HTMLCollectionOf<HTMLLIElement>;
-            for (index; index < liCollElem.length; index++) {
-                if (!liCollElem[index as number].querySelector('.e-frame.e-check')) {
-                    if (limit === this.maximumSelectionLength) {
-                        liCollElem[index as number].classList.add('e-disable');
-                    } else if (liCollElem[index as number].classList.contains('e-disable')) {
-                        liCollElem[index as number].classList.remove('e-disable');
-                    }
-                }
-            }
-        }
-    }
-
-    private toolbarClickHandler(e: MouseEvent): void {
-        const btn: Element = closest(e.target as Element, 'button');
-        if (btn) {
-            this.toolbarAction = btn.getAttribute('data-value');
-            if ((btn as HTMLButtonElement).disabled) {
-                return;
-            }
-            switch (this.toolbarAction) {
-            case 'moveUp':
-                this.moveUpDown(true);
-                break;
-            case 'moveDown':
-                this.moveUpDown();
-                break;
-            case 'moveTo':
-                this.moveItemTo();
-                break;
-            case 'moveFrom':
-                this.moveItemFrom();
-                break;
-            case 'moveAllTo':
-                this.moveAllItemTo();
-                break;
-            case 'moveAllFrom':
-                this.moveAllItemFrom();
-                break;
-            default:
-                this.trigger('actionBegin', { cancel: false, items: this.getDataByElems(this.getSelectedItems()),
-                    eventName: this.toolbarAction });
-                break;
-            }
-        }
-    }
-
-    private moveUpDown(isUp?: boolean, isKey?: boolean, value?: Element[], isTop?: boolean, isBottom?: boolean): void {
-        let elems: Element[] = this.getSelectedItems();
-        if (value) {
-            elems = value;
-        }
-        if (((isUp && this.isSelected(this.ulElement.firstElementChild))
-            || (!isUp && this.isSelected(this.ulElement.lastElementChild))) && !value ) {
-            return;
-        }
-        const tempItems: Object[] = this.getDataByElems(elems);
-        const localDataArgs: { [key: string]: Object } = { cancel: false, items: tempItems, eventName: this.toolbarAction };
-        this.trigger('actionBegin', localDataArgs);
-        if (localDataArgs.cancel) {
-            return;
-        }
-        (isUp ? elems : elems.reverse()).forEach((ele: Element) => {
-            const jsonToIdx: number = Array.prototype.indexOf.call(this.ulElement.querySelectorAll('.e-list-item'), ele);
-            const idx: number = Array.prototype.indexOf.call(this.ulElement.children, ele);
-            if (isTop) {
-                moveTo(this.ulElement, this.ulElement, [idx], 0);
-                this.changeData(idx, 0 , jsonToIdx, ele);
-            }
-            else if(isBottom) {
-                moveTo(this.ulElement, this.ulElement, [idx], this.ulElement.querySelectorAll('.e-list-item').length);
-                this.changeData(idx, this.ulElement.querySelectorAll('.e-list-item').length, jsonToIdx, ele);
-            }
-            else {
-                moveTo(this.ulElement, this.ulElement, [idx], isUp ? idx - 1 : idx + 2);
-                this.changeData(idx, isUp ? idx - 1 : idx + 1, isUp ? jsonToIdx - 1 : jsonToIdx + 1, ele);
-            }
-        });
-        this.trigger('actionComplete', { items: tempItems, eventName: this.toolbarAction });
-        (elems[0] as HTMLElement).focus();
-        if (!isKey && this.toolbarSettings.items.length) {
-            (this.getToolElem().querySelector('[data-value=' + (isUp ? 'moveUp' : 'moveDown') + ']') as HTMLElement).focus();
-        }
-        this.updateToolBarState();
-    }
-
-    private moveItemTo(): void {
-        this.moveData(this, this.getScopedListBox());
-    }
-
-    private moveItemFrom(): void {
-        this.moveData(this.getScopedListBox(), this);
-    }
-
-    /**
-     * Called internally if any of the property value changed.
-     *
-     * @param {ListBox} fListBox - Specifies the from listbox.
-     * @param {ListBox} tListBox - Specifies the to listbox.
-     * @param {boolean} isKey - Specifies the key.
-     * @param {Element[]} value - Specifies the value.
-     * @param {number} index - Specifies the index.
-     * @returns {void}
-     * @private
-     */
-    private moveData(fListBox: ListBox, tListBox: ListBox, isKey?: boolean, value?: Element[], index?: number): void {
-        const idx: number[] = []; const dataIdx: number[] = []; const jsonIdx: number[] = []; const sortIdx: number[] = [];
-        const listData: dataType[] = [].slice.call(fListBox.listData); const tListData: dataType[] = [].slice.call(tListBox.listData);
-        const sortData: dataType[] = [].slice.call(fListBox.sortedData); let tSortData: dataType[] = [].slice.call(tListBox.sortedData);
-        const fliCollections: HTMLElement[] = [].slice.call(fListBox.liCollections); const dataLiIdx: number[] = [];
-        const tliCollections: HTMLElement[] = [].slice.call(tListBox.liCollections);
-        const tempItems: dataType[] = [];
-        const data: dataType[] = []; let elems: Element[] = fListBox.getSelectedItems();
-        if (value) {
-            elems = value;
-        }
-        const isRefresh: boolean | string | Function = tListBox.sortOrder !== 'None' || (tListBox.selectionSettings.showCheckbox !==
-            fListBox.selectionSettings.showCheckbox) || tListBox.fields.groupBy || tListBox.itemTemplate || fListBox.itemTemplate;
-        fListBox.value = [];
-        if (elems.length) {
-            this.removeSelected(fListBox, elems);
-            elems.forEach((ele: Element) => {
-                idx.push(Array.prototype.indexOf.call(fListBox.ulElement.children, ele)); // update sortable elem
-                // To update lb view data
-                dataLiIdx.push(Array.prototype.indexOf.call(fListBox.ulElement.querySelectorAll('.e-list-item'), ele));
-                // To update lb listdata data
-                dataIdx.push(Array.prototype.indexOf.call(fListBox.listData, fListBox.getDataByElems([ele])[0]));
-                // To update lb sorted data
-                sortIdx.push(Array.prototype.indexOf.call(fListBox.sortedData, fListBox.getDataByElems([ele])[0]));
-                // To update lb original data
-                jsonIdx.push(Array.prototype.indexOf.call(fListBox.jsonData, fListBox.getDataByElems([ele])[0]));
-            });
-            if (this.sortOrder !== 'None') {
-                sortIdx.forEach((i: number) => {
-                    tempItems.push(fListBox.sortedData[i as number]);
-                });
-            } else {
-                jsonIdx.forEach((i: number) => {
-                    tempItems.push(fListBox.jsonData[i as number]);
-                });
-            }
-            const localDataArgs: { [key: string]: Object } = { cancel: false, items: tempItems, eventName: this.toolbarAction };
-            fListBox.trigger('actionBegin', localDataArgs);
-            if (localDataArgs.cancel) {
-                return;
-            }
-            const rLiCollection: HTMLElement[] = [];
-            dataLiIdx.sort((n1: number, n2: number) => n1 - n2).reverse().forEach((i: number) => {
-                rLiCollection.push(fliCollections.splice(i, 1)[0]);
-            });
-            fListBox.liCollections = fliCollections;
-            if (index) {
-                const toColl: HTMLElement[] = tliCollections.splice(0, index);
-                tListBox.liCollections = toColl.concat(rLiCollection.reverse()).concat(tliCollections);
-            } else {
-                tListBox.liCollections = tliCollections.concat(rLiCollection.reverse());
-            }
-            if (tListBox.listData.length === 0) {
-                const noRecElem: Element = tListBox.ulElement.childNodes[0] as Element;
-                if (noRecElem) {
-                    tListBox.ulElement.removeChild(noRecElem);
-                }
-            }
-            dataIdx.sort((n1: number, n2: number) => n2 - n1).forEach((i: number) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-                listData.splice(i, 1)[0];
-            });
-            sortIdx.sort((n1: number, n2: number) => n2 - n1).forEach((i: number) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-                sortData.splice(i, 1)[0];
-            });
-            jsonIdx.slice().reverse().forEach((i: number) => {
-                data.push(fListBox.jsonData.splice(i, 1)[0]);
-            });
-            if (isRefresh) {
-                if (fListBox.fields.groupBy) {
-                    const sourceElem: HTMLElement = fListBox.renderItems(listData as obj[], fListBox.fields);
-                    fListBox.updateListItems(sourceElem, fListBox.ulElement);
-                } else {
-                    elems.forEach((ele: Element) => { detach(ele); });
-                }
-            } else {
-                moveTo(fListBox.ulElement, tListBox.ulElement, idx, index);
-                fListBox.trigger('actionComplete', { items: tempItems, eventName: this.toolbarAction });
-            }
-            if (tListBox.mainList.childElementCount !== tListBox.jsonData.length) {
-                tListBox.mainList = tListBox.ulElement;
-            }
-            fListBox.updateMainList();
-            const tJsonData: dataType[] = [].slice.call(tListBox.jsonData);
-            tSortData = [].slice.call(tListBox.sortedData);
-            this.selectNextList(elems, dataLiIdx, dataIdx, fListBox);
-            if (isKey) { this.list.focus(); }
-            (fListBox.listData as dataType[]) = listData;
-            (fListBox.sortedData as dataType[]) = sortData;
-            index = (index) ? index : tListData.length;
-            for (let i: number = tempItems.length - 1; i >= 0; i--) {
-                tListData.splice(index, 0, tempItems[i as number]);
-                tJsonData.splice(index, 0, tempItems[i as number]);
-                tSortData.splice(index, 0, tempItems[i as number]);
-            }
-            (tListBox.listData as dataType[]) = tListData;
-            tListBox.jsonData = tJsonData as {[key: string]: object}[];
-            tListBox.sortedData = tSortData as {[key: string]: object}[];
-            if (isRefresh) {
-                const sourceElem: HTMLElement = tListBox.renderItems(tListData as obj[], tListBox.fields);
-                tListBox.updateListItems(sourceElem, tListBox.ulElement);
-                tListBox.setSelection();
-                fListBox.trigger('actionComplete', { items: tempItems, eventName: this.toolbarAction });
-            }
-            fListBox.updateSelectedOptions();
-            if (fListBox.listData.length === 0) {
-                fListBox.l10nUpdate();
-            }
-        }
-        if (fListBox.value.length === 1 && fListBox.getSelectedItems().length) {
-            fListBox.value[0] = fListBox.getFormattedValue(fListBox.getSelectedItems()[0].getAttribute('data-value'));
-        }
-    }
-
-    private selectNextList(elems: Element[], dataLiIdx: number[], dataIdx: number[], inst: ListBox): void {
-        const childCnt: number = inst.ulElement.querySelectorAll('.e-list-item').length;
-        let ele: Element; let liIdx: number;
-        let validIdx: number = -1;
-        if (elems.length === 1 && childCnt && !inst.selectionSettings.showCheckbox) {
-            liIdx = childCnt <= dataLiIdx[0] ? childCnt - 1 : dataLiIdx[0];
-            ele = inst.ulElement.querySelectorAll('.e-list-item')[liIdx as number];
-            validIdx = inst.getValidIndex(ele, liIdx, childCnt === dataIdx[0] ? 38 : 40);
-            if (validIdx > -1) {
-                (inst.ulElement.querySelectorAll('.e-list-item')[validIdx as number].classList.add(cssClass.selected));
-            }
-        }
-    }
-
-    private moveAllItemTo(): void {
-        this.moveAllData(this, this.getScopedListBox());
-    }
-
-    private moveAllItemFrom(): void {
-        this.moveAllData(this.getScopedListBox(), this);
-    }
-
-    private moveAllData(fListBox: ListBox, tListBox: ListBox, isKey?: boolean, index?: number): void {
-        type sortedType = dataType | { isHeader: boolean };
-        let listData: dataType[] = [].slice.call(tListBox.listData);
-        const jsonData: {[key: string]: object}[] = [].slice.call(tListBox.jsonData);
-        const isRefresh: boolean | string | Function = tListBox.sortOrder !== 'None' || (tListBox.selectionSettings.showCheckbox !==
-            fListBox.selectionSettings.showCheckbox) || tListBox.fields.groupBy || tListBox.itemTemplate || fListBox.itemTemplate;
-        this.removeSelected(fListBox, fListBox.getSelectedItems());
-        const tempItems: Object[] = [].slice.call(fListBox.listData);
-        const localDataArgs: { [key: string]: Object } = { cancel: false, items: tempItems, eventName: this.toolbarAction };
-        fListBox.trigger('actionBegin', localDataArgs);
-        if (localDataArgs.cancel) {
-            return;
-        }
-        if (tListBox.listData.length === 0) {
-            const noRecElem: Element = tListBox.ulElement.childNodes[0] as Element;
-            if (noRecElem) {
-                tListBox.ulElement.removeChild(noRecElem);
-            }
-        }
-        if (isRefresh) {
-            const noRecElem: Element = fListBox.ulElement.childNodes[0] as Element;
-            if (noRecElem) {
-                fListBox.ulElement.removeChild(noRecElem);
-            }
-        }
-        moveTo(
-            fListBox.ulElement, tListBox.ulElement,
-            // eslint-disable-next-line prefer-spread
-            Array.apply(null, { length: fListBox.ulElement.childElementCount }).map(Number.call, Number), index);
-        this.trigger('actionComplete', { items: tempItems, eventName: this.toolbarAction });
-        if (isKey) { this.list.focus(); }
-        index = (index) ? index : listData.length;
-        for (let i: number = 0; i < fListBox.listData.length; i++) {
-            listData.splice(index + i, 0, fListBox.listData[i as number]);
-        }
-        for (let i: number = 0; i < fListBox.jsonData.length; i++) {
-            jsonData.splice(index + i, 0, fListBox.jsonData[i as number] as {[key: string]: object});
-        }
-        const fliCollections: HTMLElement[] = [].slice.call(fListBox.liCollections);
-        const tliCollections: HTMLElement[] = [].slice.call(tListBox.liCollections);
-        fListBox.liCollections = [];
-        if (index) {
-            const toColl: HTMLElement[] = tliCollections.splice(0, index);
-            tListBox.liCollections = toColl.concat(fliCollections).concat(tliCollections);
-        } else {
-            tListBox.liCollections = tliCollections.concat(fliCollections);
-        }
-        fListBox.value = [];
-        (listData as sortedType[]) = (listData as sortedType[])
-            .filter((data: sortedType) => (data as { isHeader: boolean }).isHeader !== true);
-        const sortedData: dataType[] = listData.filter(function(val: dataType): dataType {
-            return (tListBox.jsonData as dataType[]).indexOf(val) === -1;
-        });
-        for (let i: number = 0; i < sortedData.length; i++) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            tListBox.jsonData.splice(index + i, 0, sortedData[i as number] as any);
-        }
-        (tListBox.listData as dataType[]) = listData;
-        if (fListBox.listData.length === fListBox.jsonData.length) {
-            fListBox.listData = fListBox.sortedData = fListBox.jsonData = [];
-        } else if (fListBox.allowFiltering) {
-            for (let i: number = 0; i < fListBox.listData.length; i++) {
-                for (let j: number = 0; j < fListBox.jsonData.length; j++) {
-                    if (fListBox.listData[i as number] === fListBox.jsonData[j as number]) {
-                        fListBox.jsonData.splice(j, 1);
-                    }
-                }
-            }
-            fListBox.listData = fListBox.sortedData = [];
-        }
-        if (isRefresh) {
-            const sourceElem: HTMLElement = tListBox.renderItems(listData as obj[], tListBox.fields);
-            tListBox.updateListItems(sourceElem, tListBox.ulElement);
-            this.trigger('actionComplete', { items: tempItems, eventName: this.toolbarAction });
-        } else {
-            (tListBox.sortedData as dataType[]) = listData;
-        }
-        fListBox.updateSelectedOptions();
-        if (fListBox.listData.length === 0) {
-            fListBox.l10nUpdate();
-        }
-    }
-
-    private changeData(fromIdx: number, toIdx: number, jsonToIdx: number, ele: Element): void {
-        const listData: obj[] = [].slice.call(this.listData);
-        const jsonData: obj[] = [].slice.call(this.jsonData);
-        const sortData: obj[] = [].slice.call(this.sortedData);
-        const jsonIdx: number = Array.prototype.indexOf.call(this.jsonData, this.getDataByElems([ele])[0]);
-        const sortIdx: number = Array.prototype.indexOf.call(this.sortedData, this.getDataByElems([ele])[0]);
-        const liColl: HTMLElement[] = [].slice.call(this.liCollections);
-        listData.splice(toIdx, 0, listData.splice(fromIdx, 1)[0] as obj);
-        jsonData.splice(jsonToIdx, 0, jsonData.splice(jsonIdx, 1)[0] as obj);
-        sortData.splice(toIdx, 0, sortData.splice(sortIdx, 1)[0] as obj);
-        liColl.splice(toIdx, 0, liColl.splice(fromIdx, 1)[0] as HTMLElement);
-        this.listData = listData;
-        this.jsonData = jsonData;
-        this.liCollections = liColl;
-        this.sortedData = sortData;
-    }
-
-    private getSelectedItems(): Element[] {
-        let ele: Element[] = [];
-        if (this.selectionSettings.showCheckbox) {
-            [].slice.call(this.ulElement.getElementsByClassName('e-check')).forEach((cbox: Element) => {
-                ele.push(closest(cbox, '.' + 'e-list-item'));
-            });
-        } else {
-            ele = [].slice.call(this.ulElement.getElementsByClassName(cssClass.selected));
-        }
-        return ele;
-    }
-
-    private getScopedListBox(): ListBox {
-        let listObj: ListBox;
-        if (this.scope) {
-            [].slice.call(document.querySelectorAll(this.scope)).forEach((ele: Element) => {
-                if (getComponent(ele as HTMLElement, this.getModuleName())) {
-                    listObj = getComponent(ele as HTMLElement, this.getModuleName());
-                }
-            });
-        }
-        return listObj;
-    }
-
-    private getGrabbedItems(args: DragEventArgs): Element[] {
-        let grabbItems : boolean = false;
-        for (let i: number = 0; i < this.value.length; i++) {
-            if (this.value[i as number] === this.getFormattedValue(args.target.getAttribute('data-value')) as string) {
-                grabbItems = true;
-                break;
-            }
-        }
-        if (grabbItems) {
-            for (let i: number = 0; i < this.value.length; i++) {
-                const liColl: NodeListOf<Element> = this.list.querySelectorAll('[aria-selected="true"]');
-                for (let j: number = 0; j < liColl.length; j++) {
-                    if (this.value[i as number] === this.getFormattedValue(liColl[j as number].getAttribute('data-value')) as string) {
-                        liColl[j as number].classList.add('e-grabbed');
-                    }
-                }
-            }
-        }
-        let elems: Element[];
-        if (this.isAngular) {
-            elems = Array.prototype.slice.call(this.element.getElementsByClassName('e-list-parent')[0].querySelectorAll('.e-grabbed'));
-        } else {
-            elems = Array.prototype.slice.call(this.element.nextElementSibling.querySelectorAll('.e-grabbed'));
-        }
-        return elems;
-    }
-
-    private getDragArgs(args: DragEventArgs , isDragEnd?: boolean): DragEventArgs {
-        let elems: Element[] = this.getGrabbedItems(args);
-        if (elems.length) {
-            if (isDragEnd) {
-                elems.push(args.target);
-            }
-        } else {
-            elems = [args.target];
-        }
-        return { elements: elems, items: this.getDataByElems(elems) } as DragEventArgs;
-    }
-
-    private onKeyDown(e: KeyboardEvent): void {
-        this.keyDownHandler(e);
-        e.stopPropagation();
-    }
-
-    private keyDownStatus: boolean = false;
-
-    private keyDownHandler(e: KeyboardEvent): void {
-        if ([32, 35, 36, 37, 38, 39, 40, 65].indexOf(e.keyCode) > -1 && (!this.allowFiltering ||
-            (this.allowFiltering && e.target !== this.filterInput))) {
-            if (e.target && (e.target as Element).className.indexOf('e-edit-template') > -1) {
-                return;
-            }
-            e.preventDefault();
-            if (e.keyCode === 32 && this.ulElement.children.length) {
-                this.selectHandler({
-                    target: this.ulElement.getElementsByClassName('e-focused')[0],
-                    ctrlKey: e.ctrlKey, shiftKey: e.shiftKey
-                });
-            } else if (e.keyCode === 65 && e.ctrlKey) {
-                this.selectAll();
-            } else if ((e.keyCode === 38 || e.keyCode === 40) && e.ctrlKey && e.shiftKey) {
-                this.moveUpDown(e.keyCode === 38 ? true : false, true);
-            } else if ((this.toolbarSettings.items.length || this.tBListBox) && (e.keyCode === 39 || e.keyCode === 37) && e.ctrlKey) {
-                const listObj: ListBox = this.tBListBox || this.getScopedListBox();
-                if (e.keyCode === 39) {
-                    if (e.shiftKey) {
-                        this.moveAllData(this, listObj, true);
-                    } else {
-                        this.moveData(this, listObj, true);
-                    }
-                } else {
-                    if (e.shiftKey) {
-                        this.moveAllData(listObj, this, true);
-                    } else {
-                        this.moveData(listObj, this, true);
-                    }
-                }
-            } else if (e.keyCode !== 37 && e.keyCode !== 39 && e.code !== 'KeyA') {
-                this.upDownKeyHandler(e);
-            }
-        } else if (this.allowFiltering) {
-            if (e.keyCode === 40 || e.keyCode === 38) {
-                this.upDownKeyHandler(e);
-            }
-        }
-    }
-
-    private upDownKeyHandler(e: KeyboardEvent): void {
-        const ul: Element = this.ulElement;
-        const defaultIdx: number = (e.keyCode === 40 || e.keyCode === 36) ? 0 : ul.childElementCount - 1;
-        let fliIdx: number = defaultIdx;
-        const fli: Element = ul.getElementsByClassName('e-focused')[0] || ul.getElementsByClassName(cssClass.selected)[0];
-        if (fli) {
-            if (e.keyCode !== 35 && e.keyCode !== 36) {
-                fliIdx = Array.prototype.indexOf.call(ul.children, fli);
-                if (e.keyCode === 40) {
-                    fliIdx++;
-                } else {
-                    fliIdx--;
-                }
-                if (fliIdx < 0 || fliIdx > ul.childElementCount - 1) {
-                    return;
-                }
-            }
-            removeClass([fli], 'e-focused');
-        }
-        const cli: Element = ul.children[fliIdx as number];
-        if (cli) {
-            fliIdx = this.getValidIndex(cli, fliIdx, e.keyCode);
-            if (fliIdx === -1) {
-                addClass([fli], 'e-focused');
-                return;
-            }
-            (ul.children[fliIdx as number] as HTMLElement).focus();
-            ul.children[fliIdx as number].classList.add('e-focused');
-            if (!e.ctrlKey || !this.selectionSettings.showCheckbox && e.shiftKey && (e.keyCode === 36 || e.keyCode === 35)) {
-                this.selectHandler({ target: ul.children[fliIdx as number], ctrlKey: e.ctrlKey, shiftKey: e.shiftKey }, true);
-            }
-            if (this.selectionSettings.showCheckbox && e.ctrlKey && e.shiftKey && (e.keyCode === 36 || e.keyCode === 35)) {
-                const selectedidx : number = Array.prototype.indexOf.call(ul.children, fli);
-                const sidx : number = e.code === 'Home' ? 0 : selectedidx;
-                const eidx : number = e.code === 'Home' ? selectedidx : ul.children.length - 1;
-                for (let i: number = sidx; i <= eidx; i++) {
-                    const item: Element = ul.children[i as number];
-                    this.notify('updatelist', { li: item, e: {
-                        target: this.ulElement.getElementsByClassName('e-focused')[0],
-                        ctrlKey: e.ctrlKey, shiftKey: e.shiftKey
-                    }, module: 'listbox' });
-                }
-            }
-        }
-    }
-
-    private KeyUp(e: KeyboardEvent): void {
-        if (this.allowFiltering && e.ctrlKey && e.keyCode === 65) {
-            e.preventDefault(); return;
-        }
-        const char: string = String.fromCharCode(e.keyCode);
-        const isWordCharacter: Object = char.match(/\w/);
-        if (!isNullOrUndefined(isWordCharacter)) {
-            this.isValidKey = true;
-        }
-        this.isValidKey = (e.keyCode === 8) || (e.keyCode === 46) || this.isValidKey;
-        if (this.isValidKey) {
-            this.isValidKey = false;
-            switch (e.keyCode) {
-            default:
-                if (this.allowFiltering) {
-                    const eventArgsData: { [key: string]: Object } = {
-                        preventDefaultAction: false,
-                        text: this.targetElement(),
-                        updateData: (
-                            dataSource: {
-                                [key: string]: Object
-                            }[] | DataManager | string[] | number[], query?: Query, fields?: FieldSettingsModel) => {
-                            if (eventArgsData.cancel) { return; }
-                            this.isFiltered = true;
-                            this.remoteFilterAction = true;
-                            this.dataUpdater(dataSource, query, fields);
-                        },
-                        event: e,
-                        cancel: false
-                    };
-                    this.trigger('filtering', eventArgsData, (args: FilteringEventArgs) => {
-                        this.isDataFetched = false;
-                        if (args.cancel || (this.filterInput.value !== '' && this.isFiltered)) {
-                            return;
-                        }
-                        if (!args.cancel && !this.isCustomFiltering && !args.preventDefaultAction) {
-                            this.inputString = this.filterInput.value;
-                            this.filteringAction(this.jsonData, new Query(), this.fields);
-                        }
-                        if (!this.isFiltered && !this.isCustomFiltering && !args.preventDefaultAction) {
-                            this.dataUpdater(this.jsonData, new Query(), this.fields);
-                        }
-                    });
-                }
-            }
-        }
-    }
-    /**
-     * To filter the data from given data source by using query.
-     *
-     * @param  {Object[] | DataManager } dataSource - Set the data source to filter.
-     * @param  {Query} query - Specify the query to filter the data.
-     * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
-     * @returns {void}.
-     */
-    public filter(
-        dataSource: { [key: string]: Object }[] | DataManager | string[] | number[] | boolean[],
-        query?: Query, fields?: FieldSettingsModel): void {
-        this.isCustomFiltering = true;
-        this.filteringAction(dataSource, query, fields);
-    }
-
-    private filteringAction(
-        dataSource: { [key: string]: Object }[] | DataManager | string[] | number[] | boolean[],
-        query?: Query, fields?: FieldSettingsModel): void {
-        this.resetList(dataSource, fields, query);
-    }
-
-
-    protected targetElement(): string {
-        this.targetInputElement = this.list.getElementsByClassName('e-input-filter')[0] as HTMLInputElement;
-        return this.targetInputElement.value;
-    }
-
-    private dataUpdater(
-        dataSource: { [key: string]: Object }[] | DataManager | string[] | number[] | boolean[],
-        query?: Query, fields?: FieldSettingsModel): void {
-        this.isDataFetched = false;
-        const backCommand: boolean = true;
-        if (this.targetElement().trim() === '') {
-            let list: HTMLElement = this.mainList.cloneNode ? <HTMLElement>this.mainList.cloneNode(true) : this.mainList;
-            if (backCommand) {
-                this.remoteCustomValue = false;
-                if (this.isAngular && this.itemTemplate) {
-                    list = this.renderItems(this.listData as obj[], fields);
-                }
-                this.onActionComplete(list, this.jsonData as { [key: string]: Object }[] | string[] | number[] | boolean[]);
-                this.notify('reOrder', { module: 'CheckBoxSelection', enable: this.selectionSettings.showCheckbox, e: this });
-            }
-        } else {
-            this.resetList(dataSource, fields, query);
-        }
-    }
-
-    private focusOutHandler(): void {
-        const ele: Element = this.list.getElementsByClassName('e-focused')[0];
-        if (ele) {
-            ele.classList.remove('e-focused');
-        }
-        if (this.allowFiltering) {
-            this.refreshClearIcon();
-        }
-    }
-
-    private getValidIndex(cli: Element, index: number, keyCode: number): number {
-        const cul: Element = this.ulElement;
-        if (cli.classList.contains('e-disabled') || cli.classList.contains(cssClass.group)) {
-            if (keyCode === 40 || keyCode === 36) {
-                index++;
-            } else {
-                index--;
-            }
-        }
-        if (index < 0 || index === cul.childElementCount) {
-            return -1;
-        }
-        cli = (cul.childNodes as NodeListOf<Element>)[index as number];
-        if (cli.classList.contains('e-disabled') || cli.classList.contains(cssClass.group)) {
-            index = this.getValidIndex(cli, index, keyCode);
-        }
-        return index;
-    }
-
-    private updateSelectedOptions(): void {
-        const selectedOptions: string[] = [];
-        const values: string[] = [];
-        extend(values, this.value as string[]);
-        this.getSelectedItems().forEach((ele: Element) => {
-            if (!ele.classList.contains('e-grabbed')) {
-                selectedOptions.push(this.getFormattedValue(ele.getAttribute('data-value')) as string);
-            }
-        });
-        if (this.mainList.childElementCount === this.ulElement.childElementCount) {
-            if (this.allowFiltering && this.selectionSettings.showCheckbox) {
-                for (let i: number = 0; i < selectedOptions.length; i++) {
-                    if (values.indexOf(selectedOptions[i as number]) > -1) {
-                        continue;
-                    } else {
-                        values.push(selectedOptions[i as number]);
-                    }
-                }
-                this.setProperties({ value: values }, true);
-            } else {
-                this.setProperties({ value: selectedOptions }, true);
-            }
-
-        }
-        this.updateSelectTag();
-        this.updateToolBarState();
-        if (this.tBListBox) {
-            this.tBListBox.updateToolBarState();
-        }
-    }
-
-    private clearSelection(values: (string | number | boolean)[] = this.value): void {
-        if (this.selectionSettings.showCheckbox) {
-            let dvalue: string | number | boolean;
-            this.getSelectedItems().forEach((li: Element) => {
-                dvalue = this.getFormattedValue(li.getAttribute('data-value'));
-                if (values.indexOf(dvalue) < 0) {
-                    li.getElementsByClassName('e-check')[0].classList.remove('e-check');
-                    li.removeAttribute('aria-selected');
-                }
-            });
-        }
-    }
-
-    private setSelection(
-        values: (string | boolean | number | object)[] = this.value, isSelect: boolean = true, isText: boolean = false): void {
-        let li: Element;
-        let liselect: boolean;
-        if (values) {
-            values.forEach((value: string) => {
-                let text: string | number | boolean;
-                if (isText) {
-                    text = this.getValueByText(value);
-                } else {
-                    text = value;
-                }
-                if (typeof(text) === 'string') {
-                    text = text.split('\\').join('\\\\');
-                    li = this.list.querySelector('[data-value="' + text.replace(/"/g, '\\"') + '"]');
-                } else {
-                    li = this.list.querySelector('[data-value="' + text + '"]');
-                }
-                if (li) {
-                    if (this.selectionSettings.showCheckbox) {
-                        liselect = li.getElementsByClassName('e-frame')[0].classList.contains('e-check');
-                    } else {
-                        liselect = li.classList.contains('e-selected');
-                    }
-                    if (!isSelect && liselect || isSelect && !liselect && li) {
-                        if (this.selectionSettings.showCheckbox) {
-                            this.notify('updatelist', { li: li, module: 'listbox' });
-                            (li as HTMLElement).focus();
-                        } else {
-                            if (isSelect) {
-                                li.classList.add(cssClass.selected);
-                                li.setAttribute('aria-selected', 'true');
-                                (li as HTMLElement).focus();
-                            } else {
-                                li.classList.remove(cssClass.selected);
-                                li.removeAttribute('aria-selected');
-                            }
-                        }
-                    }
-                }
-            });
-        }
-        this.updateSelectTag();
-    }
-
-    private updateSelectTag(): void {
-        const ele: Element = this.getSelectTag(); let innerHTML: string = '';
-        ele.innerHTML = '';
-        if (this.value) {
-            for (let i: number = 0, len: number = this.value.length; i < len; i++) {
-                innerHTML += '<option selected>' + this.value[i as number] + '</option>';
-            }
-            ele.innerHTML += innerHTML;
-            for (let i: number = 0, len: number = ele.childNodes.length; i < len; i++) {
-                (ele.childNodes[i as number] as HTMLElement).setAttribute('value', this.value[i as number].toString());
-            }
-        }
-        this.checkSelectAll();
-    }
-
-    private checkDisabledState(inst: ListBox): boolean {
-        return inst.ulElement.querySelectorAll('.' + cssClass.li).length === 0;
-    }
-
-    private updateToolBarState(): void {
-        if (this.toolbarSettings.items.length) {
-            const listObj: ListBox = this.getScopedListBox();
-            const wrap: Element = this.list.parentElement.getElementsByClassName('e-listbox-tool')[0];
-            this.toolbarSettings.items.forEach((value: string) => {
-                const btn: HTMLButtonElement = wrap.querySelector('[data-value="' + value + '"]');
-                switch (value) {
-                case 'moveAllTo':
-                    btn.disabled = this.checkDisabledState(this);
-                    break;
-                case 'moveAllFrom':
-                    btn.disabled = this.checkDisabledState(listObj);
-                    break;
-                case 'moveFrom':
-                    btn.disabled = listObj.value && listObj.value.length ? false : true;
-                    break;
-                case 'moveUp':
-                    btn.disabled = this.value && this.value.length
-                        && !this.isSelected(this.ulElement.children[0]) ? false : true;
-                    break;
-                case 'moveDown':
-                    btn.disabled = this.value && this.value.length
-                        && !this.isSelected(this.ulElement.children[this.ulElement.childElementCount - 1]) ? false : true;
-                    break;
-                default:
-                    btn.disabled = this.value && this.value.length ? false : true;
-                    break;
-                }
-            });
-        }
-    }
-
-    private setCheckboxPosition(): void {
-        const listWrap: HTMLElement = this.list;
-        if (!this.initLoad && this.selectionSettings.checkboxPosition === 'Left') {
-            listWrap.classList.remove('e-right');
-        }
-        if (this.selectionSettings.checkboxPosition === 'Right') {
-            listWrap.classList.add('e-right');
-        }
-    }
-
-    private showCheckbox(showCheckbox: boolean): void {
-        let index: number = 0;
-        const liColl: NodeListOf<Element> = this.list.lastElementChild.querySelectorAll('li');
-        const liCollLen: number = this.list.lastElementChild.getElementsByClassName('e-list-item').length;
-        if (showCheckbox) {
-            this.ulElement = this.renderItems(this.listData as obj[], this.fields);
-            this.mainList = this.ulElement;
-            this.list.removeChild(this.list.getElementsByTagName('ul')[0]);
-            this.list.appendChild(this.ulElement);
-            if (this.selectionSettings.showSelectAll && !this.list.getElementsByClassName('e-selectall-parent')[0]) {
-                const l10nShow: L10n = new L10n(
-                    this.getModuleName(), { selectAllText: 'Select All', unSelectAllText: 'Unselect All' }, this.locale);
-                this.showSelectAll = true;
-                this.selectAllText = l10nShow.getConstant('selectAllText');
-                this.unSelectAllText = l10nShow.getConstant('unSelectAllText');
-                this.popupWrapper = this.list;
-                this.checkBoxSelectionModule.checkAllParent = null;
-                this.notify('selectAll', {});
-                this.checkSelectAll();
-            }
-        } else {
-            if (this.list.getElementsByClassName('e-selectall-parent')[0]) {
-                this.list.removeChild(this.list.getElementsByClassName('e-selectall-parent')[0]);
-            }
-            for (index; index < liCollLen; index++) {
-                if (liColl[index as number].classList.contains('e-list-item')) {
-                    liColl[index as number].removeChild(liColl[index as number].getElementsByClassName('e-checkbox-wrapper')[0]);
-                }
-                if (liColl[index as number].hasAttribute('aria-selected')) {
-                    liColl[index as number].removeAttribute('aria-selected');
-                }
-            }
-            this.mainList = this.ulElement;
-        }
-        this.value = [];
-    }
-
-    private isSelected(ele: Element): boolean {
-        if (!isNullOrUndefined(ele)) {
-            return ele.classList.contains(cssClass.selected) || ele.querySelector('.e-check') !== null;
-        } else {
-            return false;
-        }
-    }
-
-    private getSelectTag(): Element {
-        return this.list.getElementsByClassName('e-hidden-select')[0];
-    }
-
-    private getToolElem(): Element {
-        return this.list.parentElement.getElementsByClassName('e-listbox-tool')[0];
-    }
-
-    private formResetHandler(): void {
-        this.value = this.initialSelectedOptions;
-    }
-
-    /**
-     * Return the module name.
-     *
-     * @private
-     * @returns {string} - Module name
-     */
-    public getModuleName(): string {
-        return 'listbox';
-    }
-
-    /**
-     * Get the properties to be maintained in the persisted state.
-     *
-     * @returns {string} - Persist data
-     */
-    protected getPersistData(): string {
-        return this.addOnPersist(['value']);
-    }
-
-    protected getLocaleName(): string {
-        return 'listbox';
-    }
-
-    public destroy(): void {
-        this.unwireEvents();
-        if (this.element.tagName === 'EJS-LISTBOX') {
-            this.element.innerHTML = '';
-        } else {
-            this.element.style.display = 'inline-block';
-            if (this.toolbarSettings.items.length) {
-                this.list.parentElement.parentElement.insertBefore(this.list, this.list.parentElement);
-                detach(this.list.nextElementSibling);
-            }
-            this.list.parentElement.insertBefore(this.element, this.list);
-        }
-        super.destroy();
-        this.enableRtlElements = []; this.liCollections = null; this.list = null; this.ulElement = null;
-        this.mainList = null; this.spinner = null; this.rippleFun = null;
-        if (this.itemTemplate) { this.clearTemplate(); }
-    }
-
-    /**
-     * Called internally if any of the property value changed.
-     *
-     * @param {ListBoxModel} newProp - Specifies the new properties.
-     * @param {ListBoxModel} oldProp - Specifies the old properties.
-     * @returns {void}
-     * @private
-     */
-    public onPropertyChanged(newProp: ListBoxModel, oldProp: ListBoxModel): void {
-        const wrap: Element = this.toolbarSettings.items.length ? this.list.parentElement : this.list;
-        super.onPropertyChanged(newProp, oldProp);
-        this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp as { [key: string]: string; });
-        for (const prop of Object.keys(newProp)) {
-            switch (prop) {
-            case 'cssClass':
-                if (oldProp.cssClass) {
-                    removeClass([wrap], oldProp.cssClass.split(' '));
-                }
-                if (newProp.cssClass) {
-                    addClass([wrap], newProp.cssClass.replace(/\s+/g, ' ').trim().split(' '));
-                }
-                break;
-            case 'enableRtl':
-                if (newProp.enableRtl) {
-                    this.list.classList.add('e-rtl');
-                } else {
-                    this.list.classList.remove('e-rtl');
-                }
-                break;
-            case 'value':
-                removeClass(this.list.querySelectorAll('.' + cssClass.selected), cssClass.selected);
-                this.clearSelection(this.value);
-                this.setSelection();
-                break;
-            case 'height':
-                this.setHeight();
-                break;
-            case 'enabled':
-                this.setEnable();
-                break;
-            case 'allowDragAndDrop':
-                if (newProp.allowDragAndDrop) {
-                    this.initDraggable();
-                } else {
-                    (getComponent(this.ulElement, 'sortable') as Sortable).destroy();
-                }
-                break;
-            case 'allowFiltering':
-                if (this.allowFiltering) {
-                    this.setFiltering();
-                } else {
-                    this.list.removeChild(this.list.getElementsByClassName('e-filter-parent')[0]);
-                    this.filterParent = null;
-                    removeClass([this.list], 'e-filter-list');
-                }
-                break;
-            case 'filterBarPlaceholder':
-                if (this.allowFiltering) {
-                    if (this.filterInput) { Input.setPlaceholder(newProp.filterBarPlaceholder, this.filterInput as HTMLInputElement); }
-                }
-                break;
-            case 'scope':
-                if (this.allowDragAndDrop) {
-                    (getComponent(this.ulElement, 'sortable') as Sortable).scope = newProp.scope;
-                }
-                if (this.toolbarSettings.items.length) {
-                    if (oldProp.scope) {
-                        (getComponent(document.querySelector(oldProp.scope) as HTMLElement, this.getModuleName()) as ListBox)
-                            .tBListBox = null;
-                    }
-                    if (newProp.scope) {
-                        (getComponent(document.querySelector(newProp.scope) as HTMLElement, this.getModuleName()) as ListBox)
-                            .tBListBox = this;
-                    }
-                }
-                break;
-            case 'toolbarSettings': {
-                let ele: Element;
-                const pos: string = newProp.toolbarSettings.position;
-                const toolElem: Element = this.getToolElem();
-                if (pos) {
-                    removeClass([wrap], ['e-right', 'e-left']);
-                    wrap.classList.add('e-' + pos.toLowerCase());
-                    if (pos === 'Left') {
-                        wrap.insertBefore(toolElem, this.list);
-                    } else {
-                        wrap.appendChild(toolElem);
-                    }
-                }
-                if (newProp.toolbarSettings.items) {
-                    if (oldProp.toolbarSettings && oldProp.toolbarSettings.items.length) {
-                        ele = this.list.parentElement;
-                        ele.parentElement.insertBefore(this.list, ele);
-                        detach(ele);
-                    }
-                    this.initToolbarAndStyles();
-                    this.wireToolbarEvent();
-                }
-                break;
-            }
-            case 'selectionSettings': {
-                const showSelectAll: boolean = newProp.selectionSettings.showSelectAll;
-                const showCheckbox: boolean = newProp.selectionSettings.showCheckbox;
-                if (!isNullOrUndefined(showSelectAll)) {
-                    this.showSelectAll = showSelectAll;
-                    if (this.showSelectAll) {
-                        const l10nSel: L10n = new L10n(
-                            this.getModuleName(), { selectAllText: 'Select All', unSelectAllText: 'Unselect All' }, this.locale);
-                        this.checkBoxSelectionModule.checkAllParent = null;
-                        this.showSelectAll = true;
-                        this.selectAllText = l10nSel.getConstant('selectAllText');
-                        this.unSelectAllText = l10nSel.getConstant('selectAllText');
-                        this.popupWrapper = this.list;
-                    }
-                    this.notify('selectAll', {});
-                    this.checkSelectAll();
-                }
-                if (!isNullOrUndefined(showCheckbox)) {
-                    this.showCheckbox(showCheckbox);
-                }
-                if (this.selectionSettings.showCheckbox) {
-                    this.setCheckboxPosition();
-                }
-                break;
-            }
-            case 'dataSource':
-                this.isDataSourceUpdate = true;
-                this.jsonData = [].slice.call(this.dataSource);
-                break;
-            }
-        }
-    }
-}
-
-/**
- * Interface for before item render event.
- */
-export interface BeforeItemRenderEventArgs extends BaseEventArgs {
-    /**
-     * Returns the list element before rendering.
-     */
-    element: Element;
-    /**
-     * Returns the list item before rendering.
-     */
-    item: { [key: string]: Object };
-}
-
-/**
- * Interface for drag and drop event args.
- */
-export interface SourceDestinationModel {
-    /**
-     * Specifies the list items before  drag or drop in the ListBox.
-     */
-    previousData?: string[] | boolean[] | number[] | { [key: string]: Object; }[] | DataManager;
-    /**
-     * Specifies the list items after drag or drop in the ListBox.
-     */
-    currentData?: string[] | boolean[] | number[] | { [key: string]: Object; }[] | DataManager;
-}
-
-/**
- * Interface for drag and drop event.
- */
-export interface DragEventArgs {
-    /**
-     * Returns the previous index of the selected list item.
-     */
-    previousIndex?: number;
-    /**
-     * Returns the current index of the selected list item.
-     */
-    currentIndex?: number;
-    /**
-     * Returns the selected list element.
-     */
-    elements: Element[];
-    /**
-     * Returns the selected list items.
-     */
-    items: Object[];
-    /**
-     * Returns the target list element where the selected list element to be dropped.
-     */
-    target?: Element;
-    /**
-     * Returns true if the list element is dragged from ListBox. Otherwise, it remains false.
-     */
-    dragSelected?: boolean;
-    /**
-     * Returns the previous list item.
-     */
-    previousItem?: object[];
-    /**
-     * Returns the previous  and current list items of the source list box.
-     */
-    source?: SourceDestinationModel;
-    /**
-     * Returns the previous and current list items of the destination list box.
-     */
-    destination?: SourceDestinationModel;
-}
-
-/**
- * Interface for change event args.
- */
-export interface ListBoxChangeEventArgs extends BaseEventArgs {
-    /**
-     * Returns the selected list elements.
-     */
-    elements: Element[];
-    /**
-     * Returns the selected list items.
-     */
-    items: Object[];
-    /**
-     * Returns the selected state or selected list item in the ListBox.
-     */
-    value: number | string | boolean;
-    /**
-     * Specifies the event.
-     */
-    event: Event;
-}
-
-/**
- * Interface for Drop event args.
- */
-export interface DropEventArgs {
-    /**
-     * Returns the previous index of the selected list item.
-     */
-    previousIndex: number;
-    /**
-     * Returns the current index of the selected list item.
-     */
-    currentIndex: number;
-    /**
-     * Returns the selected list element to be dropped.
-     */
-    droppedElement: Element;
-    /**
-     * Returns the target list element where the selected list element to be dropped.
-     */
-    target: Element;
-    /**
-     * Returns the dragged list element.
-     */
-    helper: Element;
-    /**
-     * Illustrates whether the current action needs to be prevented or not.
-     */
-    cancel?: boolean;
-    /**
-     * Returns the selected list items.
-     */
-    items?: Object[];
-}
-interface ListBoxClassList {
-    backIcon: string;
-    filterBarClearIcon: string;
-    filterInput: string;
-    filterParent: string;
-    clearIcon: string;
-}
-const listBoxClasses: ListBoxClassList = {
-    backIcon: 'e-input-group-icon e-back-icon e-icons',
-    filterBarClearIcon: 'e-input-group-icon e-clear-icon e-icons',
-    filterInput: 'e-input-filter',
-    filterParent: 'e-filter-parent',
-    clearIcon: 'e-clear-icon'
-};