list-view.ts

import { Virtualization } from './virtualization';
import { merge, formatUnit, isNullOrUndefined, append, detach, ModuleDeclaration, extend } from '@syncfusion/ej2-base';
import { attributes, addClass, removeClass, prepend, closest, remove } from '@syncfusion/ej2-base';
import { Component, EventHandler, BaseEventArgs, Property, Complex, Event } from '@syncfusion/ej2-base';
import { NotifyPropertyChanges, INotifyPropertyChanged, ChildProperty } from '@syncfusion/ej2-base';
import { KeyboardEventArgs, EmitType, compile, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
import { Animation, AnimationOptions, Effect, rippleEffect, Touch, SwipeEventArgs, animationMode } from '@syncfusion/ej2-base';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { createCheckBox } from '@syncfusion/ej2-buttons';
import { ListBase, ListBaseOptions, SortOrder, getFieldValues, FieldsMapping } from '../common/list-base';
import { ListViewModel, FieldSettingsModel } from './list-view-model';

// Effect Configuration Effect[] =  [fromViewBackward,fromViewForward,toViewBackward,toviewForward];
const effectsConfig: { [key: string]: Effect[] } = {
    'None': [],
    'SlideLeft': ['SlideRightOut', 'SlideLeftOut', 'SlideLeftIn', 'SlideRightIn'],
    'SlideDown': ['SlideTopOut', 'SlideBottomOut', 'SlideBottomIn', 'SlideTopIn'],
    'Zoom': ['FadeOut', 'FadeZoomOut', 'FadeZoomIn', 'FadeIn'],
    'Fade': ['FadeOut', 'FadeOut', 'FadeIn', 'FadeIn']
};


const effectsRTLConfig: { [key: string]: Effect[] } = {
    'None': [],
    'SlideLeft': ['SlideLeftOut', 'SlideRightOut', 'SlideRightIn', 'SlideLeftIn'],
    'SlideDown': ['SlideBottomOut', 'SlideTopOut', 'SlideTopIn', 'SlideBottomIn'],
    'Zoom': ['FadeZoomOut', 'FadeOut', 'FadeIn', 'FadeZoomIn'],
    'Fade': ['FadeOut', 'FadeOut', 'FadeIn', 'FadeIn']
};

// don't use space in classnames.
export const classNames: ClassNames = {
    root: 'e-listview',
    hover: 'e-hover',
    selected: 'e-active',
    focused: 'e-focused',
    parentItem: 'e-list-parent',
    listItem: 'e-list-item',
    listIcon: 'e-list-icon',
    textContent: 'e-text-content',
    listItemText: 'e-list-text',
    groupListItem: 'e-list-group-item',
    hasChild: 'e-has-child',
    view: 'e-view',
    header: 'e-list-header',
    headerText: 'e-headertext',
    headerTemplateText: 'e-headertemplate-text',
    text: 'e-text',
    disable: 'e-disabled',
    container: 'e-list-container',
    icon: 'e-icons',
    backIcon: 'e-icon-back',
    backButton: 'e-back-button',
    checkboxWrapper: 'e-checkbox-wrapper',
    checkbox: 'e-checkbox',
    checked: 'e-check',
    checklist: 'e-checklist',
    checkboxIcon: 'e-frame',
    checkboxRight: 'e-checkbox-right',
    checkboxLeft: 'e-checkbox-left',
    listviewCheckbox: 'e-listview-checkbox',
    itemCheckList: 'e-checklist',
    virtualElementContainer: 'e-list-virtualcontainer'
};

const LISTVIEW_TEMPLATE_PROPERTY: string = 'Template';
const LISTVIEW_GROUPTEMPLATE_PROPERTY: string = 'GroupTemplate';
const LISTVIEW_HEADERTEMPLATE_PROPERTY: string = 'HeaderTemplate';
const swipeVelocity: number = 0.5;

/**
 * An interface that holds options of fields.
 */
export interface Fields {
    /**
     * Specifies the id field mapped in dataSource.
     */
    id?: string | number;
    /**
     * The `text` property is used to map the text value from the data source for each list item.
     */
    text?: string | number;
    /**
     * It is used to map the custom field values of list item from the dataSource.
     */
    [key: string]: Object | string | number | undefined;
}


/**
 * Represents the field settings of the ListView.
 */

export class FieldSettings extends ChildProperty<FieldSettings> {

    /**
     * Specifies the id field mapped in dataSource.
     */
    @Property('id')
    public id: string;
    /**
     * The `text` property is used to map the text value from the data source for each list item.
     */
    @Property('text')
    public text: string;

    /**
     * The `isChecked` property is used to check whether the list items are in checked state or not.
     */
    @Property('isChecked')
    public isChecked: string;
    /**
     * The `isVisible` property is used to check whether the list items are in visible state or not.
     */
    @Property('isVisible')
    public isVisible: string;
    /**
     * Specifies the enabled state of the ListView component.
     * And, we can disable the component using this property by setting its value as false.
     */
    @Property('enabled')
    public enabled: string;
    /**
     * The `iconCss` is used to customize the icon to the list items dynamically.
     *  We can add a specific image to the icons using `iconCss` property.
     */
    @Property('iconCss')
    public iconCss: string;
    /**
     * The `child` property is used for nested navigation of listed items.
     */
    @Property('child')
    public child: string;
    /**
     * The `tooltip` is used to display the information about the target element while hovering on list items.
     */
    @Property('tooltip')
    public tooltip: string;

    /**
     * The `groupBy` property is used to wraps the ListView elements into a group.
     */
    @Property('groupBy')
    public groupBy: string;

    /**
     * The `sortBy` property used to enable the sorting of list items to be ascending or descending order.
     */
    @Property('text')
    public sortBy: string;

    /**
     * The `htmlAttributes` allows additional attributes such as id, class, etc., and
     *  accepts n number of attributes in a key-value pair format.
     */
    @Property('htmlAttributes')
    public htmlAttributes: string;
    /**
     * Specifies the `tableName` used to fetch data from a specific table in the server.
     */
    @Property('tableName')
    public tableName: string;
}

/**
 * An interface that holds animation settings.
 */
export interface AnimationSettings {
    /**
     * It is used to specify the effect which is shown in sub list transform.
     */
    effect?: ListViewEffect;
    /**
     * It is used to specify the time duration of transform object.
     */
    duration?: number;
    /**
     * It is used to specify the easing effect applied while transform
     */
    easing?: string;
}

/**
 * An enum type that denotes the effects of the ListView. Available options are as follows None, SlideLeft, SlideDown, Zoom, Fade;
 * ```props
 * None :- No animation is applied when items are added or removed from the ListView.
 * SlideLeft :- Items slide in from the left when added and slide out to the left when removed.
 * SlideDown :- Items slide in from the top when added and slide out to the top when removed.
 * Zoom :- Items zoom in or out when added or removed.
 * Fade :- Items fade in or out when added or removed.
 * ```
 */
export type ListViewEffect = 'None' | 'SlideLeft' | 'SlideDown' | 'Zoom' | 'Fade';

/**
 * An enum type that denotes the position of checkbox of the ListView. Available options are as follows Left and Right;
 * ```props
 * Left :- The checkbox is positioned on the left side of the ListView item.
 * Right :- The checkbox is positioned on the right side of the ListView item.
 * ```
 */
export type checkBoxPosition = 'Left' | 'Right';

/**
 * Represents the EJ2 ListView control.
 * ```html
 * <div id="listview">
 * <ul>
 * <li>Favorite</li>
 * <li>Documents</li>
 * <li>Downloads</li>
 * </ul>
 * </div>
 * ```
 * ```typescript
 *   var listviewObject = new ListView({});
 *   listviewObject.appendTo("#listview");
 * ```
 */
@NotifyPropertyChanges
export class ListView extends Component<HTMLElement> implements INotifyPropertyChanged {

    private ulElement: HTMLElement;
    private selectedLI: Element;
    private onUIScrolled: Function;
    private curUL: HTMLElement;
    private curDSLevel: string[];
    private curViewDS: DataSource[] | string[] | number[];
    private curDSJSON: DataSource;
    public localData: DataSource[];
    private liCollection: HTMLElement[];
    private headerEle: HTMLElement;
    private contentContainer: HTMLElement;
    private touchModule: Touch;
    private listBaseOption: ListBaseOptions;
    public virtualizationModule: Virtualization;
    private animateOptions: AnimationOptions;
    private rippleFn: Function;
    private isNestedList: boolean;
    private currentLiElements: HTMLElement[];
    private selectedData: string[] | string;
    private selectedId: string[];
    private isWindow: boolean;
    private selectedItems: SelectedItem;
    private aniObj: Animation;
    private LISTVIEW_TEMPLATE_ID: string;
    private LISTVIEW_GROUPTEMPLATE_ID: string;
    private LISTVIEW_HEADERTEMPLATE_ID: string;
    private liElement: Element;
    private virtualCheckBox: Element | string;
    private liElementHeight: number;
    private previousSelectedItems: string[] = [];
    private hiddenItems: string[] = [];
    private enabledItems: string[] = [];
    private disabledItems: string[] = [];
    private isOffline: boolean;
    private previousScrollTop: number;
    /**
     * The `cssClass` property is used to add a user-preferred class name in the root element of the ListView,
     *  using which we can customize the component (both CSS and functionality customization)
     *
     * {% codeBlock src='listview/cssClass/index.md' %}{% endcodeBlock %}
     *
     * @default ''
     */
    @Property('')
    public cssClass: string;

    /**
     * If `enableVirtualization` set to true, which will increase the ListView performance, while loading a large amount of data.
     *
     * {% codeBlock src='listview/enableVirtualization/index.md' %}{% endcodeBlock %}
     *
     * @default false
     */
    @Property(false)
    public enableVirtualization: boolean;

    /**
     * The `htmlAttributes` allows additional attributes such as id, class, etc., and
     *  accepts n number of attributes in a key-value pair format.
     *
     * {% codeBlock src='listview/htmlAttributes/index.md' %}{% endcodeBlock %}
     *
     * @default {}
     */
    @Property({})
    public htmlAttributes: { [key: string]: string; };

    /**
     * If `enable` set to true, the list items are enabled.
     * And, we can disable the component using this property by setting its value as false.
     *
     * {% codeBlock src='listview/enable/index.md' %}{% endcodeBlock %}
     *
     * @default true
     */
    @Property(true)
    public enable: boolean;
    /* es-lint disable */
    /**
     * The `dataSource` provides the data to render the ListView component which is mapped with the fields of ListView.
     *
     * @isGenericType true
     *
     * {% codeBlock src='listview/dataSource/index.md' %}{% endcodeBlock %}
     *
     * @default []
     */
    @Property([])
    public dataSource: { [key: string]: Object }[] | string[] | number[] | DataManager;
    /* es-lint enable */
    /**
     * The `query` is used to fetch the specific data from dataSource by using where and select keywords.
     *
     * {% codeBlock src='listview/query/index.md' %}{% endcodeBlock %}
     *
     * @default null
     */
    @Property()
    public query: Query;

    /**
     * The `fields` is used to map keys from the dataSource which extracts the appropriate data from the dataSource
     *  with specified mapped with the column fields to render the ListView.
     *
     * {% codeBlock src='listview/fields/index.md' %}{% endcodeBlock %}
     *
     * @default defaultMappedFields
     */
    @Complex<FieldSettingsModel>(ListBase.defaultMappedFields, FieldSettings)
    public fields: FieldSettingsModel;

    /**
     * The `animation` property provides an option to apply the different
     *  animations on the ListView component.
     *
     * {% codeBlock src='listview/animation/index.md' %}{% endcodeBlock %}
     *
     *
     * @default { effect: 'SlideLeft', duration: 400, easing: 'ease' }
     */
    @Property<AnimationSettings>({ effect: 'SlideLeft', duration: 400, easing: 'ease' })
    public animation: AnimationSettings;

    /**
     * The `sortOrder` is used to sort the data source. The available type of sort orders are,
     * * `None` - The data source is not sorting.
     * * `Ascending` - The data source is sorting with ascending order.
     * * `Descending` - The data source is sorting with descending order.
     *
     * {% codeBlock src='listview/sortOrder/index.md' %}{% endcodeBlock %}
     *
     * @default 'None'
     */
    @Property<SortOrder>('None')
    public sortOrder: SortOrder;

    /**
     * If `showIcon` set to true, which will show or hide the icon of the list item.
     *
     * {% codeBlock src='listview/showIcon/index.md' %}{% endcodeBlock %}
     *
     * @default false
     */
    @Property<boolean>(false)
    public showIcon: boolean;

    /**
     * If `showCheckBox` set to true, which will show or hide the checkbox.
     *
     * {% codeBlock src='listview/showCheckBox/index.md' %}{% endcodeBlock %}
     *
     *
     * @default false
     */
    @Property<boolean>(false)
    public showCheckBox: boolean;

    /**
     * The `checkBoxPosition` is used to set the position of check box in a list item.
     * By default, the `checkBoxPosition` is Left, which will appear before the text content in a list item.
     *
     * {% codeBlock src='listview/checkBoxPosition/index.md' %}{% endcodeBlock %}
     *
     * @default 'Left'
     */
    @Property<string>('Left')
    public checkBoxPosition: checkBoxPosition;

    /**
     * The `headerTitle` is used to set the title of the ListView component.
     *
     * {% codeBlock src='listview/headerTitle/index.md' %}{% endcodeBlock %}
     *
     *
     * @default ""
     */
    @Property<string>('')
    public headerTitle: string;

    /**
     * If `showHeader` set to true, which will show or hide the header of the ListView component.
     *
     * {% codeBlock src='listview/showHeader/index.md' %}{% endcodeBlock %}
     *
     * @default false
     */
    @Property<boolean>(false)
    public showHeader: boolean;

    /**
     * Specifies whether HTML content should be sanitized or escaped.
     * When set to `true`, any HTML content will be sanitized to remove potentially harmful elements.
     *
     * {% codeBlock src='listview/enableHtmlSanitizer/index.md' %}{% endcodeBlock %}
     *
     * @default false
     */
    @Property(false)
    public enableHtmlSanitizer: boolean;

    /**
     * Defines the height of the ListView component which accepts both string and number values.
     *
     * {% codeBlock src='listview/height/index.md' %}{% endcodeBlock %}
     *
     * @default ''
     */
    @Property('')
    public height: number | string;

    /**
     * Defines the width of the ListView component which accepts both string and number values.
     *
     * {% codeBlock src='listview/width/index.md' %}{% endcodeBlock %}
     *
     * @default ''
     */
    @Property('')
    public width: number | string;

    /**
     * The ListView component supports to customize the content of each list items with the help of `template` property.
     *
     * {% codeBlock src='listview/template/index.md' %}{% endcodeBlock %}
     *
     * @default null
     * @angularType string | object
     * @reactType string | function | JSX.Element
     * @vueType string | function
     * @aspType string
     */
    @Property(null)
    public template: string | Function;

    /**
     * The ListView has an option to custom design the ListView header title with the help of `headerTemplate` property.
     *
     * {% codeBlock src="listview/headerTemplate/index.md" %}{% endcodeBlock %}
     *
     * @default null
     * @angularType string | object
     * @reactType string | function | JSX.Element
     * @vueType string | function
     * @aspType string
     */
    @Property(null)
    public headerTemplate: string | Function;

    /**
     * The ListView has an option to custom design the group header title with the help of `groupTemplate` property.
     *
     * {% codeBlock src="listview/groupTemplate/index.md" %}{% endcodeBlock %}
     *
     * @default null
     * @angularType string | object
     * @reactType string | function | JSX.Element
     * @vueType string | function
     * @aspType string
     */
    @Property(null)
    public groupTemplate: string | Function;

    /**
     * Triggers when we select the list item in the component.
     *
     * @event 'object'
     */
    @Event()
    public select: EmitType<SelectEventArgs>;

    /**
     * Triggers when every ListView action starts.
     *
     * @event 'object'
     */
    @Event()
    public actionBegin: EmitType<object>;

    /**
     * Triggers when every ListView actions completed.
     *
     * @event 'object'
     */
    /* es-lint disable */
    @Event()
    public actionComplete: EmitType<MouseEvent>;
    /* es-lint enable */
    /**
     * Triggers, when the data fetch request from the remote server, fails.
     *
     * @event 'object'
     *
     */
    @Event()
    public actionFailure: EmitType<MouseEvent>;

    /**
    * Triggers when scrollbar of the ListView component reaches to the top or bottom.
    *
    * @event 'object'
    */
    @Event()
    public scroll: EmitType<ScrolledEventArgs>;

    /**
     * Constructor for creating the widget
     *
     * @param options
     *
     * @param element
     */

    constructor(options?: ListViewModel, element?: string | HTMLElement) {
        super(options, <HTMLElement | string>element);
    }

    /**
     * @param newProp
     *
     * @param oldProp
     *
     * @private
     */

    public onPropertyChanged(newProp: ListViewModel, oldProp: ListViewModel): void {
        for (const prop of Object.keys(newProp)) {
            switch (prop) {
            case 'htmlAttributes':
                this.setHTMLAttribute();
                break;
            case 'cssClass':
                this.setCSSClass(oldProp.cssClass);
                break;
            case 'enable':
                this.setEnable();
                break;
            case 'width':
            case 'height':
                this.setSize();
                break;
            case 'enableRtl':
                this.setEnableRTL();
                break;
            case 'fields':
                // eslint-disable-next-line
                this.listBaseOption.fields = (this.fields as any & { properties: object }).properties;
                if (this.enableVirtualization) {
                    this.virtualizationModule.reRenderUiVirtualization();
                } else {
                    this.reRender();
                }
                break;
            case 'headerTitle':
                if (!this.curDSLevel.length) {
                    this.header(this.headerTitle, false, 'header');
                }
                break;
            case 'query':
                if (this.enableVirtualization) {
                    this.virtualizationModule.reRenderUiVirtualization();
                } else {
                    this.reRender();
                }
                break;
            case 'showHeader':
                this.header(this.headerTitle, false, 'header');
                break;
            case 'enableVirtualization':
                if (!isNullOrUndefined(this.contentContainer)) {
                    detach(this.contentContainer);
                }
                this.refresh();
                break;
            case 'showCheckBox':
            case 'checkBoxPosition':
                if (this.enableVirtualization) {
                    this.virtualizationModule.reRenderUiVirtualization();
                } else {
                    this.setCheckbox();
                }
                break;
            case 'dataSource':
                if (this.enableVirtualization) {
                    this.virtualizationModule.reRenderUiVirtualization();
                } else {
                    this.reRender();
                }
                break;
            case 'sortOrder':
            case 'template':
                if (!this.enableVirtualization) {
                    this.refresh();
                }
                break;
            case 'showIcon':
                if (this.enableVirtualization) {
                    this.virtualizationModule.reRenderUiVirtualization();
                } else {
                    this.listBaseOption.showIcon = this.showIcon;
                    this.curViewDS = this.getSubDS();
                    this.resetCurrentList();
                }
                break;
            default:
                break;
            }
        }
    }

    // Model Changes
    private setHTMLAttribute(): void {
        if (Object.keys(this.htmlAttributes).length) {
            attributes(this.element, this.htmlAttributes);
        }
    }

    private setCSSClass(oldCSSClass?: string): void {
        if (this.cssClass) {
            addClass([this.element], this.cssClass.split(' ').filter((css: string) => css));
        }
        if (oldCSSClass) {
            removeClass([this.element], oldCSSClass.split(' ').filter((css: string) => css));
        }
    }

    private setSize(): void {
        this.element.style.height = formatUnit(this.height);
        this.element.style.width = formatUnit(this.width);
        this.isWindow = this.element.clientHeight ? false : true;
    }

    private setEnable(): void {
        this.enableElement(this.element, this.enable);
    }

    private setEnableRTL(): void {
        if (this.enableRtl) {
            this.element.classList.add('e-rtl');
        } else {
            this.element.classList.remove('e-rtl');
        }
    }

    private enableElement(element: HTMLElement, isEnabled?: boolean): void {
        if (isEnabled) {
            element.classList.remove(classNames.disable);
        } else {
            element.classList.add(classNames.disable);
        }
    }

    // Support Component Functions
    private header(text?: string, showBack?: boolean, prop?: string): void {
        if (this.headerEle === undefined && this.showHeader) {
            this.headerEle = this.createElement('div', { className: classNames.header });
            const innerHeaderEle: HTMLElement = this.createElement('span', { className: classNames.headerText });
            if (this.enableHtmlSanitizer) {
                this.setProperties({ headerTitle: SanitizeHtmlHelper.sanitize(this.headerTitle) }, true);
                innerHeaderEle.innerText = this.headerTitle;
            } else {
                innerHeaderEle.innerHTML = this.headerTitle;
            }
            const textEle: HTMLElement = this.createElement('div', { className: classNames.text, innerHTML: innerHeaderEle.outerHTML });
            const hedBackButton: HTMLElement = this.createElement('div', {
                className: classNames.icon + ' ' + classNames.backIcon + ' ' + classNames.backButton,
                attrs: { style: 'display:none;' }
            });
            this.headerEle.appendChild(hedBackButton);
            this.headerEle.appendChild(textEle);
            if (this.headerTemplate) {
                const compiledString: Function = compile(this.headerTemplate);
                const headerTemplateEle: HTMLElement = this.createElement('div', { className: classNames.headerTemplateText });
                // eslint-disable-next-line
                const compiledElement: any = compiledString({}, this, prop, this.LISTVIEW_HEADERTEMPLATE_ID, null, null, this.headerEle);
                if (compiledElement) {
                    append(compiledElement, headerTemplateEle);
                }
                append([headerTemplateEle], this.headerEle);
                // eslint-disable-next-line
                if ((this as any).isReact) {
                    this.renderReactTemplates();
                }
            }
            if (this.headerTemplate && this.headerTitle) {
                textEle.classList.add('header');
            }
            this.element.classList.add('e-has-header');
            prepend([this.headerEle], this.element);
        } else if (this.headerEle) {
            if (this.showHeader) {
                this.headerEle.style.display = '';
                const textEle: Element = this.headerEle.querySelector('.' + classNames.headerText);
                const hedBackButton: Element = this.headerEle.querySelector('.' + classNames.backIcon);
                if (this.enableHtmlSanitizer) {
                    text = SanitizeHtmlHelper.sanitize(text);
                }
                textEle.innerHTML = text;
                if (this.headerTemplate && showBack) {
                    textEle.parentElement.classList.remove('header');
                    this.headerEle.querySelector('.' + classNames.headerTemplateText).classList.add('nested-header');
                }
                if (this.headerTemplate && !showBack) {
                    textEle.parentElement.classList.add('header');
                    this.headerEle.querySelector('.' + classNames.headerTemplateText).classList.remove('nested-header');
                    this.headerEle.querySelector('.' + classNames.headerTemplateText).classList.add('header');
                }
                if (showBack === true) {
                    (hedBackButton as HTMLElement).style.display = '';
                } else {
                    (hedBackButton as HTMLElement).style.display = 'none';
                }
            } else {
                this.headerEle.style.display = 'none';
            }
        }
    }

    // Animation Related Functions
    private switchView(fromView: HTMLElement, toView: HTMLElement, reverse?: boolean): void {
        if (fromView && toView) {
            const fPos: string = fromView.style.position;
            const overflow: string = (this.element.style.overflow !== 'hidden') ? this.element.style.overflow : '';

            fromView.style.position = 'absolute';
            fromView.classList.add('e-view');
            let anim: Effect[];
            let duration: number = this.animation.duration;
            if (this.animation.effect) {
                anim = (this.enableRtl ? effectsRTLConfig[this.animation.effect] : effectsConfig[this.animation.effect]);
            } else {
                const slideLeft: string = 'SlideLeft';
                anim = effectsConfig[`${slideLeft}`];
                reverse = this.enableRtl;
                duration = 0;
            }
            this.element.style.overflow = 'hidden';
            this.aniObj.animate(fromView, {
                name: (reverse === true ? anim[0] : anim[1]),
                duration: (duration === 0 && animationMode === 'Enable') ? 400 : duration,
                timingFunction: this.animation.easing,
                // eslint-disable-next-line
                end: (model: AnimationOptions): void => {
                    fromView.style.display = 'none';
                    this.element.style.overflow = overflow;
                    fromView.style.position = fPos;
                    fromView.classList.remove('e-view');
                }
            });
            toView.style.display = '';
            this.aniObj.animate(toView, {
                name: (reverse === true ? anim[2] : anim[3]),
                duration: (duration === 0 && animationMode === 'Enable') ? 400 : duration,
                timingFunction: this.animation.easing,
                end: (): void => {
                    this.trigger('actionComplete');
                }
            });
            this.curUL = toView;
        }
    }

    protected preRender(): void {
        if (this.template) {
            try {
                if (typeof this.template !== 'function' && document.querySelectorAll(this.template).length) {
                    this.setProperties({ template: document.querySelector(this.template).innerHTML.trim() }, true);
                }
            } catch (e) {
                compile(this.template);
            }
        }
        this.listBaseOption = {
            template: this.template,
            headerTemplate: this.headerTemplate,
            groupTemplate: this.groupTemplate, expandCollapse: true, listClass: '',
            ariaAttributes: {
                itemRole: 'listitem', listRole: 'list', itemText: '',
                groupItemRole: 'presentation', wrapperRole: 'presentation'
            },
            // eslint-disable-next-line
            fields: ((this.fields as any & { properties: Object }).properties) as FieldsMapping,
            sortOrder: this.sortOrder,
            showIcon: this.showIcon,
            itemCreated: this.renderCheckbox.bind(this),
            templateID: `${this.element.id}${LISTVIEW_TEMPLATE_PROPERTY}`,
            groupTemplateID: `${this.element.id}${LISTVIEW_GROUPTEMPLATE_PROPERTY}`,
            enableHtmlSanitizer: this.enableHtmlSanitizer
        };
        this.initialization();
    }

    private initialization(): void {
        this.curDSLevel = [];
        this.animateOptions = {};
        this.curViewDS = [];
        this.currentLiElements = [];
        this.isNestedList = false;
        this.selectedData = [];
        this.selectedId = this.enablePersistence ? this.selectedId : [];
        this.LISTVIEW_TEMPLATE_ID = `${this.element.id}${LISTVIEW_TEMPLATE_PROPERTY}`;
        this.LISTVIEW_GROUPTEMPLATE_ID = `${this.element.id}${LISTVIEW_GROUPTEMPLATE_PROPERTY}`;
        this.LISTVIEW_HEADERTEMPLATE_ID = `${this.element.id}${LISTVIEW_HEADERTEMPLATE_PROPERTY}`;
        this.aniObj = new Animation(this.animateOptions);
        this.removeElement(this.curUL);
        this.removeElement(this.ulElement);
        this.removeElement(this.headerEle);
        this.removeElement(this.contentContainer);
        this.curUL = this.ulElement = this.liCollection = this.headerEle = this.contentContainer = undefined;
    }

    private renderCheckbox(args: ItemCreatedArgs): void {
        if (args.item.classList.contains(classNames.hasChild)) {
            this.isNestedList = true;
        }
        if (this.showCheckBox && args.item.classList.contains(classNames.listItem)) {
            let checkboxElement: Element;
            let fieldData: DataSource;
            // eslint-disable-next-line prefer-const
            checkboxElement = createCheckBox(this.createElement, false, {
                checked: false, enableRtl: this.enableRtl,
                cssClass: classNames.listviewCheckbox
            });
            checkboxElement.setAttribute('role', 'checkbox');
            const frameElement: Element = checkboxElement.querySelector('.' + classNames.checkboxIcon);
            args.item.classList.add(classNames.itemCheckList);
            args.item.firstElementChild.classList.add(classNames.checkbox);
            if (typeof (this.dataSource as string[])[0] !== 'string' && typeof (this.dataSource as number[])[0] !== 'number') {
                fieldData = <DataSource>getFieldValues(args.curData, this.listBaseOption.fields);
                if (this.enablePersistence && !isNullOrUndefined(this.selectedId)) {
                    const index: number = this.selectedId.findIndex(e => e === fieldData[this.listBaseOption.fields.id].toString());
                    if (index !== -1) {
                        this.checkInternally(args, checkboxElement);
                    }
                }
                else if (<object>fieldData[this.listBaseOption.fields.isChecked]) {
                    this.checkInternally(args, checkboxElement);
                }
            } else if (((typeof (this.dataSource as string[])[0] === 'string' ||
                typeof (this.dataSource as number[])[0] === 'number') && this.selectedData.indexOf(args.text) !== -1)) {
                this.checkInternally(args, checkboxElement);
            }
            checkboxElement.setAttribute('aria-checked', frameElement.classList.contains(classNames.checked) ? 'true' : 'false');
            checkboxElement.setAttribute('aria-label', args.text);
            if (this.checkBoxPosition === 'Left') {
                checkboxElement.classList.add(classNames.checkboxLeft);
                args.item.firstElementChild.classList.add(classNames.checkboxLeft);
                args.item.firstElementChild.insertBefore(checkboxElement, args.item.firstElementChild.childNodes[0]);
            } else {
                checkboxElement.classList.add(classNames.checkboxRight);
                args.item.firstElementChild.classList.add(classNames.checkboxRight);
                args.item.firstElementChild.appendChild(checkboxElement);
            }
            this.currentLiElements.push(args.item);
            if (this.checkBoxPosition === 'Left') {
                this.virtualCheckBox = args.item.firstElementChild.children[0];
            }
            else {
                this.virtualCheckBox = args.item.firstElementChild.lastElementChild;
            }
        }
    }

    private checkInternally(args: ItemCreatedArgs, checkboxElement: Element): void {
        args.item.classList.add(classNames.selected);
        checkboxElement.querySelector('.' + classNames.checkboxIcon).classList.add(classNames.checked);
        checkboxElement.setAttribute('aria-checked', 'true');
    }

    /**
     * Checks the specific list item by passing the unchecked fields as an argument to this method.
     *
     * @param  {Fields | HTMLElement | Element} item - It accepts Fields or HTML list element as an argument.
     */

    public checkItem(item: Fields | HTMLElement | Element): void {
        this.toggleCheckBase(item, true);
    }

    private toggleCheckBase(item: Fields | Element | HTMLElement, checked: boolean): void {
        if (this.showCheckBox) {
            let liElement: Element = item as Element;
            if (item instanceof Object && (item as Object).constructor !== HTMLLIElement) {
                liElement = this.getLiFromObjOrElement(item);
            }
            if (!isNullOrUndefined(liElement)) {
                const checkboxIcon: Element = liElement.querySelector('.' + classNames.checkboxIcon);
                if (checked === true) {
                    liElement.classList.add(classNames.selected);
                }
                else {
                    liElement.classList.remove(classNames.selected);
                }
                if (checked === true) {
                    checkboxIcon.classList.add(classNames.checked);
                }
                else {
                    checkboxIcon.classList.remove(classNames.checked);
                }
                checkboxIcon.parentElement.setAttribute('aria-checked', checked ? 'true' : 'false');
            }
            this.setSelectedItemData(liElement);
            this.updateSelectedId();
        }
    }

    /**
     * Uncheck the specific list item by passing the checked fields as an argument to this method.
     *
     * @param  {Fields | HTMLElement | Element} item - It accepts Fields or HTML list element as an argument.
     */

    public uncheckItem(item: Fields | HTMLElement | Element): void {
        this.toggleCheckBase(item, false);
    }

    /**
     * Checks all the unchecked items in the ListView.
     */

    public checkAllItems(): void {
        this.toggleAllCheckBase(true);
    }

    /**
     * Uncheck all the checked items in ListView.
     */

    public uncheckAllItems(): void {
        this.toggleAllCheckBase(false);
    }

    private toggleAllCheckBase(checked: boolean): void {
        if (this.showCheckBox) {
            for (let i: number = 0; i < this.liCollection.length; i++) {
                const checkIcon: Element = this.liCollection[i as number].querySelector('.' + classNames.checkboxIcon);
                if (checkIcon) {
                    if (checked) {
                        if (!checkIcon.classList.contains(classNames.checked)) {
                            this.checkItem(this.liCollection[i as number]);
                        }
                    } else {
                        if (checkIcon.classList.contains(classNames.checked)) {
                            this.uncheckItem(this.liCollection[i as number]);
                        }
                    }
                }
            }
            if (this.enableVirtualization) {
                this.virtualizationModule.checkedItem(checked);
            }
            this.updateSelectedId();
        }
    }

    private setCheckbox(): void {
        if (this.showCheckBox) {
            const liCollection: HTMLElement[] = Array.prototype.slice.call(this.element.querySelectorAll('.' + classNames.listItem));
            const args: ItemCreatedArgs = {
                item: undefined, curData: undefined, dataSource: undefined, fields: undefined,
                options: undefined, text: ''
            };
            for (let i: number = 0; i < liCollection.length; i++) {
                const element: HTMLElement = liCollection[i as number];
                args.item = element;
                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                args.curData = this.getItemData(element) as { [key: string]: Object } as any;
                if (element.querySelector('.' + classNames.checkboxWrapper)) {
                    this.removeElement(element.querySelector('.' + classNames.checkboxWrapper));
                }
                this.renderCheckbox(args);
                if (args.item.classList.contains(classNames.selected)) {
                    this.checkInternally(args, args.item.querySelector('.' + classNames.checkboxWrapper));
                }
            }
        } else {
            const liCollection: HTMLElement[] = Array.prototype.slice.call(this.element.querySelectorAll('.' + classNames.itemCheckList));
            for (let i: number = 0; i < liCollection.length; i++) {
                const element: HTMLElement = liCollection[i as number];
                element.classList.remove(classNames.selected);
                element.firstElementChild.classList.remove(classNames.checkbox);
                this.removeElement(element.querySelector('.' + classNames.checkboxWrapper));
            }
            if (this.selectedItems) {
                this.selectedItems.item.classList.add(classNames.selected);
            }
        }
    }

    /**
     * Refresh the height of the list item only on enabling the virtualization property.
     */

    public refreshItemHeight(): void {
        if (this.virtualizationModule) {
            this.virtualizationModule.refreshItemHeight();
        }
    }

    targetElement: any;
    private clickHandler(e: MouseEvent): void {
        if (Array.isArray(this.dataSource) &&  this.dataSource.length === 0){
            return;
        }
        const target: Element = <Element>e.target;
        this.targetElement = target;
        const classList: DOMTokenList = target.classList;
        let closestElement: HTMLElement;
        if (classList.contains(classNames.backIcon) || classList.contains(classNames.headerText)) {
            if (this.showCheckBox && this.curDSLevel[this.curDSLevel.length - 1]) {
                this.uncheckAllItems();
            }
            this.back();
        } else {
            let li: HTMLElement = <HTMLElement>closest(target.parentNode, '.' + classNames.listItem);
            if (li === null) { li = <HTMLElement>target; }
            this.removeFocus();
            if (this.enable && this.showCheckBox && this.isValidLI(li)) {
                if ((e.target as HTMLElement).classList.contains(classNames.checkboxIcon)) {
                    li.classList.add(classNames.focused);
                    if (isNullOrUndefined(li.querySelector('.' + classNames.checked))) {
                        const args: ItemCreatedArgs = {
                            curData: undefined, dataSource: undefined, fields: undefined, options: undefined,
                            text: undefined, item: li
                        };
                        this.checkInternally(args, args.item.querySelector('.' + classNames.checkboxWrapper));
                    } else {
                        this.uncheckItem(li);
                        li.classList.add(classNames.focused);
                    }
                    if (this.enableVirtualization) {
                        this.virtualizationModule.setCheckboxLI(li, e);
                    }
                    if (e) {
                        const eventArgs: Object = this.selectEventData(li, e);
                        const checkIcon: Element = li.querySelector('.' + classNames.checkboxIcon);
                        merge(eventArgs, { isChecked: checkIcon.classList.contains(classNames.checked) });
                        this.trigger('select', eventArgs);
                    }
                } else if (li.classList.contains(classNames.hasChild)) {
                    this.removeHover();
                    this.removeSelect();
                    this.removeSelect(li);
                    this.setSelectLI(li, e);
                    li.classList.remove(classNames.selected);
                } else {
                    this.setCheckboxLI(li, e);
                    if ((target.nodeName === 'INPUT') || (target.nodeName === 'TEXTAREA')) {
                        target.classList.add('e-focused');
                        this.targetElement = target;
                    }
                }
            } else {
                this.setSelectLI(li, e);
                if ((target.nodeName === 'INPUT') || (target.nodeName === 'TEXTAREA')) {
                    target.classList.add('e-focused');
                    this.targetElement = target;
                }
            }
            closestElement = closest((e.target as HTMLElement), 'li') as HTMLElement;
            if (!isNullOrUndefined(closestElement)) {
                if (closestElement.classList.contains('e-has-child') &&
                    !(e.target as HTMLElement).parentElement.classList.contains('e-listview-checkbox')) {
                    closestElement.classList.add(classNames.disable);
                }
            }
        }
        this.updateSelectedId();
    }

    private removeElement(element: HTMLElement | Element): HTMLElement | Element {
        return element && element.parentNode && element.parentNode.removeChild(element);
    }

    private hoverHandler(e: MouseEvent): void {
        const curLi: HTMLElement = <HTMLElement>closest((<Element>e.target).parentNode, '.' + classNames.listItem);
        this.setHoverLI(curLi);
    }

    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    private leaveHandler(e: MouseEvent): void {
        this.removeHover();
    }
    private homeKeyHandler(e: KeyboardEventArgs, end?: boolean): void {
        e.preventDefault();
        if (Object.keys(this.dataSource).length && this.curUL) {
            const li: Element[] = <NodeListOf<Element> & Element[]>this.curUL.querySelectorAll('.' + classNames.listItem);
            const focusedElement: Element = this.curUL.querySelector('.' + classNames.focused) ||
                this.curUL.querySelector('.' + classNames.selected);
            if (focusedElement) {
                focusedElement.classList.remove(classNames.focused);
                if (!this.showCheckBox) {
                    focusedElement.classList.remove(classNames.selected);
                }
            }
            const index: number = !end ? 0 : li.length - 1;
            if (li[index as number].classList.contains(classNames.hasChild) || this.showCheckBox) {
                li[index as number].classList.add(classNames.focused);
            } else {
                this.setSelectLI(li[index as number], e);
            }
            if (li[index as number]) {
                this.element.setAttribute('aria-activedescendant', (<HTMLElement>li[index as number]).id.toString());
            } else {
                this.element.removeAttribute('aria-activedescendant');
            }
        }
    }

    private onArrowKeyDown(e: KeyboardEventArgs, prev: boolean): Element {
        let siblingLI: Element;
        let li: Element;
        const hasChild: boolean = !isNullOrUndefined(this.curUL.querySelector('.' + classNames.hasChild)) ? true : false;
        if (hasChild || this.showCheckBox) {
            li = this.curUL.querySelector('.' + classNames.focused) || this.curUL.querySelector('.' + classNames.selected);
            siblingLI = ListBase.getSiblingLI(this.curUL.querySelectorAll('.' + classNames.listItem), li, prev);
            if (!isNullOrUndefined(siblingLI)) {
                if (li) {
                    li.classList.remove(classNames.focused);
                    if (!this.showCheckBox) {
                        li.classList.remove(classNames.selected);
                    }
                }
                if (siblingLI.classList.contains(classNames.hasChild) || this.showCheckBox) {
                    siblingLI.classList.add(classNames.focused);
                } else {
                    this.setSelectLI(siblingLI, e);
                }
            }
        } else {
            li = this.curUL.querySelector('.' + classNames.selected);
            siblingLI = ListBase.getSiblingLI(this.curUL.querySelectorAll('.' + classNames.listItem), li, prev);
            this.setSelectLI(siblingLI, e);
        }
        if (siblingLI) {
            this.element.setAttribute('aria-activedescendant', (<HTMLElement>siblingLI).id.toString());
        } else {
            this.element.removeAttribute('aria-activedescendant');
        }
        return siblingLI;
    }

    private arrowKeyHandler(e: KeyboardEventArgs, prev?: boolean): void {
        e.preventDefault();
        if (Object.keys(this.dataSource).length && this.curUL) {
            const siblingLI: Element = this.onArrowKeyDown(e, prev);
            const elementTop: number = this.element.getBoundingClientRect().top;
            const elementHeight: number = this.element.getBoundingClientRect().height;
            const firstItemBounds: ClientRect = this.curUL.querySelector('.' + classNames.listItem).getBoundingClientRect();
            let heightDiff: number;
            let groupItemBounds: ClientRect;
            if (this.fields.groupBy) {
                groupItemBounds = this.curUL.querySelector('.' + classNames.groupListItem).getBoundingClientRect();
            }
            if (siblingLI) {
                const siblingTop: number = siblingLI.getBoundingClientRect().top;
                const siblingHeight: number = siblingLI.getBoundingClientRect().height;
                if (!prev) {
                    const height: number = this.isWindow ? window.innerHeight : elementHeight;
                    heightDiff = this.isWindow ? (siblingTop + siblingHeight) :
                        ((siblingTop - elementTop) + siblingHeight);
                    if (heightDiff > height) {
                        if (this.isWindow === true) {
                            window.scroll(0, pageYOffset + (heightDiff - height));
                        }
                        else {
                            this.element.scrollTop = this.element.scrollTop + (heightDiff - height);
                        }
                    }
                } else {
                    heightDiff = this.isWindow ? siblingTop : (siblingTop - elementTop);
                    if (heightDiff < 0) {
                        if (this.isWindow === true) {
                            window.scroll(0, pageYOffset + heightDiff);
                        }
                        else {
                            this.element.scrollTop = this.element.scrollTop + heightDiff;
                        }
                    }
                }
            } else if (this.enableVirtualization && prev && this.virtualizationModule.uiFirstIndex) {
                this.onUIScrolled = () => {
                    this.onArrowKeyDown(e, prev);
                    this.onUIScrolled = undefined;
                };
                heightDiff = this.virtualizationModule.listItemHeight;
                if (this.isWindow === true) {
                    window.scroll(0, pageYOffset - heightDiff);
                }
                else {
                    this.element.scrollTop = this.element.scrollTop - heightDiff;
                }
            } else if (prev) {
                if (this.showHeader && this.headerEle) {
                    const topHeight: number = groupItemBounds ? groupItemBounds.top : firstItemBounds.top;
                    const headerBounds: ClientRect = this.headerEle.getBoundingClientRect();
                    heightDiff = headerBounds.top < 0 ? (headerBounds.height - topHeight) : 0;
                    if (this.isWindow === true) {
                        window.scroll(0, pageYOffset - heightDiff);
                    }
                    else {
                        this.element.scrollTop = 0;
                    }
                } else if (this.fields.groupBy) {
                    heightDiff = this.isWindow ? (groupItemBounds.top < 0 ? groupItemBounds.top : 0) :
                        (elementTop - firstItemBounds.top) + groupItemBounds.height;
                    if (this.isWindow === true) {
                        window.scroll(0, pageYOffset + heightDiff);
                    }
                    else {
                        this.element.scrollTop = this.element.scrollTop - heightDiff;
                    }
                }
            }
        }
    }

    private enterKeyHandler(e: KeyboardEventArgs): void {
        if (Object.keys(this.dataSource).length && this.curUL) {
            const hasChild: boolean = !isNullOrUndefined(this.curUL.querySelector('.' + classNames.hasChild)) ? true : false;
            const li: Element = this.curUL.querySelector('.' + classNames.focused);
            if (hasChild && li) {
                li.classList.remove(classNames.focused);
                if (this.showCheckBox) {
                    this.removeSelect();
                    this.removeSelect(<HTMLElement>li);
                    this.removeHover();
                }
                this.setSelectLI(li, e);
            }
        }
    }
    private spaceKeyHandler(e: KeyboardEventArgs): void {
        e.preventDefault();
        if (this.enable && this.showCheckBox && Object.keys(this.dataSource).length && this.curUL) {
            const li: Element = this.curUL.querySelector('.' + classNames.focused);
            let checkboxElement: Element;
            let checkIcon: Element;
            if (!isNullOrUndefined(li) && isNullOrUndefined(li.querySelector('.' + classNames.checked))) {
                const args: ItemCreatedArgs = {
                    curData: undefined, dataSource: undefined, fields: undefined, options: undefined,
                    text: undefined, item: <HTMLElement>li
                };
                checkboxElement = args.item.querySelector('.' + classNames.checkboxWrapper);
                this.checkInternally(args, checkboxElement);
                checkIcon = checkboxElement.querySelector('.' + classNames.checkboxIcon + '.' + classNames.icon);
            } else {
                this.uncheckItem(li);
            }
            const eventArgs: object = this.selectEventData(li, e);
            merge(eventArgs, { isChecked: checkIcon ? checkIcon.classList.contains(classNames.checked) : false });
            this.trigger('select', eventArgs);
            this.updateSelectedId();
        }
    }

    private keyActionHandler(e: KeyboardEventArgs): void {
        switch (e.keyCode) {
        case 36:
            this.homeKeyHandler(e);
            break;
        case 35:
            this.homeKeyHandler(e, true);
            break;
        case 40:
            this.arrowKeyHandler(e);
            break;
        case 38:
            this.arrowKeyHandler(e, true);
            break;
        case 13:
            this.enterKeyHandler(e);
            break;
        case 8:
            if (this.showCheckBox && this.curDSLevel[this.curDSLevel.length - 1]) {
                this.uncheckAllItems();
            }
            this.back();
            break;
        case 32:
            if (isNullOrUndefined(this.targetElement) || !(this.targetElement.classList.contains('e-focused'))) {
                this.spaceKeyHandler(e);
            }
            break;
        }
    }

    private swipeActionHandler(e: SwipeEventArgs): void {
        if (e.swipeDirection === 'Right' && e.velocity > swipeVelocity && e.originalEvent.type === 'touchend') {
            if (this.showCheckBox && this.curDSLevel[this.curDSLevel.length - 1]) {
                this.uncheckAllItems();
            }
            this.back();
        }
    }

    private focusout(): void {
        if (Object.keys(this.dataSource).length && this.curUL) {
            const focusedElement: Element = this.curUL.querySelector('.' + classNames.focused);
            if (focusedElement) {
                focusedElement.classList.remove(classNames.focused);
                if (!this.showCheckBox && !isNullOrUndefined(this.selectedLI)) {
                    this.selectedLI.classList.add(classNames.selected);
                }
            }
        }
    }

    private wireEvents(): void {
        EventHandler.add(this.element, 'keydown', this.keyActionHandler, this);
        EventHandler.add(this.element, 'click', this.clickHandler, this);
        EventHandler.add(this.element, 'mouseover', this.hoverHandler, this);
        EventHandler.add(this.element, 'mouseout', this.leaveHandler, this);
        EventHandler.add(this.element, 'focusout', this.focusout, this);
        this.touchModule = new Touch(this.element, { swipe: this.swipeActionHandler.bind(this) });
        if (!isNullOrUndefined(this.scroll)) {
            EventHandler.add(this.element, 'scroll', this.onListScroll, this);
        }
    }

    private unWireEvents(): void {
        EventHandler.remove(this.element, 'click', this.clickHandler);
        EventHandler.remove(this.element, 'mouseover', this.hoverHandler);
        EventHandler.remove(this.element, 'mouseout', this.leaveHandler);
        EventHandler.remove(this.element, 'mouseover', this.hoverHandler);
        EventHandler.remove(this.element, 'mouseout', this.leaveHandler);
        if (!isNullOrUndefined(this.scroll)) {
            EventHandler.remove(this.element, 'scroll', this.onListScroll);
        }
        this.touchModule.destroy();
        this.touchModule = null;
    }

    private removeFocus(): void {
        const focusedLI: Element[] = <NodeListOf<Element> & Element[]>this.element.querySelectorAll('.' + classNames.focused);
        for (const ele of focusedLI) {
            ele.classList.remove(classNames.focused);
        }
    }

    private removeHover(): void {
        const hoverLI: Element = this.element.querySelector('.' + classNames.hover);
        if (hoverLI) { hoverLI.classList.remove(classNames.hover); }
    }

    private removeSelect(li?: HTMLElement): void {
        if (isNullOrUndefined(li)) {
            const selectedLI: Element[] = <NodeListOf<Element> & Element[]>this.element.querySelectorAll('.' + classNames.selected);
            for (const ele of selectedLI) {
                if (this.showCheckBox && ele.querySelector('.' + classNames.checked)) {
                    continue;
                } else {
                    ele.classList.remove(classNames.selected);
                }
            }
        } else {
            li.classList.remove(classNames.selected);
        }
    }

    private isValidLI(li: Element | HTMLElement): boolean {
        return (li && li.classList.contains(classNames.listItem)
            && !li.classList.contains(classNames.groupListItem)
            && !li.classList.contains(classNames.disable));
    }

    private setCheckboxLI(li: Element, e?: MouseEvent | KeyboardEvent | FocusEvent): void {
        if (this.isValidLI(li) && this.enable && this.showCheckBox) {
            if (this.curUL.querySelector('.' + classNames.focused)) {
                this.curUL.querySelector('.' + classNames.focused).classList.remove(classNames.focused);
            }
            const textAreaFocus = li.querySelector('textarea') || li.querySelector('input');
            li.classList.add(classNames.focused);
            if (!isNullOrUndefined(e)){
                if (e.target === textAreaFocus){
                    textAreaFocus.classList.add('e-focused');
                }
            }
            const checkboxElement: Element = li.querySelector('.' + classNames.checkboxWrapper);
            const checkIcon: Element = checkboxElement.querySelector('.' + classNames.checkboxIcon + '.' + classNames.icon);
            this.removeHover();
            if (!checkIcon.classList.contains(classNames.checked)) {
                checkIcon.classList.add(classNames.checked);
                li.classList.add(classNames.selected);
            } else {
                checkIcon.classList.remove(classNames.checked);
                li.classList.remove(classNames.selected);
            }
            checkboxElement.setAttribute('aria-checked', checkIcon.classList.contains(classNames.checked) ?
                'true' : 'false');
            const eventArgs: object = this.selectEventData(li, e);
            merge(eventArgs, { isChecked: checkIcon.classList.contains(classNames.checked) });
            if (this.enableVirtualization) {
                this.virtualizationModule.setCheckboxLI(li, e);
            }
            this.trigger('select', eventArgs);
            this.setSelectedItemData(li);
            this.renderSubList(li);
        }
    }

    private selectEventData(li: Element, e?: MouseEvent | KeyboardEvent | FocusEvent): Object {
        const data: DataSource = this.getItemData(li);
        const fieldData: DataSource = getFieldValues(data as { [key: string]: Object }, this.listBaseOption.fields) as DataSource;
        let selectedItem: SelectedItem;
        if (!isNullOrUndefined(data)
            && typeof (this.dataSource as string[])[0] === 'string' || typeof (this.dataSource as number[])[0] === 'number') {
            selectedItem = { item: li, text: li && (li as HTMLElement).innerText.trim(), data: this.dataSource as string[] | number[] };
        } else {
            selectedItem =
            {
                item: li, text: fieldData && <object>fieldData[this.listBaseOption.fields.text] as any,
                // eslint-disable-next-line
                data: data as { [key: string]: Object } as any
            };
        }
        const eventArgs: object = {};
        merge(eventArgs, selectedItem);
        if (e) {
            merge(eventArgs, { isInteracted: true, event: e, cancel: false, index: this.curUL && Array.prototype.indexOf.call(this.curUL.children, li) });
        }
        return eventArgs;
    }

    private setSelectedItemData(li: Element): void {
        const data: DataSource = this.getItemData(li);
        // eslint-disable-next-line
        const fieldData: DataSource = <DataSource>getFieldValues(data as { [key: string]: Object } as any, this.listBaseOption.fields);
        if (!isNullOrUndefined(data) && ((typeof (this.dataSource as string[])[0] === 'string') ||
            (typeof (this.dataSource as number[])[0] === 'number'))) {
            this.selectedItems = {
                item: li,
                text: li && (li as HTMLElement).innerText.trim(),
                data: this.dataSource as string[]
            };
        } else {
            this.selectedItems = {
                item: li,
                // eslint-disable-next-line
                text: fieldData && fieldData[this.listBaseOption.fields.text] as any,
                // eslint-disable-next-line
                data: data as { [key: string]: Object } as any
            };
        }
    }

    private setSelectLI(li: Element, e?: MouseEvent | KeyboardEvent | FocusEvent): void {
        if (this.isValidLI(li) && !li.classList.contains(classNames.selected) && this.enable) {
            if (!this.showCheckBox) {
                this.removeSelect();
            }
            li.classList.add(classNames.selected);
            this.removeHover();
            this.setSelectedItemData(li);
            if (this.enableVirtualization) {
                this.virtualizationModule.setSelectLI(li, e);
            }
            const eventArgs: object = this.selectEventData(li, e);
            this.trigger('select', eventArgs, (observedArgs: SelectEventArgs) => {
                if (!observedArgs.cancel) {
                    this.selectedLI = li;
                    this.renderSubList(li);
                }
            });
        }
    }

    private setHoverLI(li: Element): void {
        if (this.isValidLI(li) && !li.classList.contains(classNames.hover) && this.enable) {
            const lastLi: Element[] = <NodeListOf<Element> & Element[]>this.element.querySelectorAll('.' + classNames.hover);
            if (lastLi && lastLi.length) { removeClass(lastLi, classNames.hover); }
            if (!(li as Element).classList.contains(classNames.selected) || this.showCheckBox) {
                (li as Element).classList.add(classNames.hover);
            }
        }
    }

    //Data Source Related Functions
    private getSubDS(): DataSource[] {
        const levelKeys: string[] = this.curDSLevel;
        if (levelKeys.length) {
            let ds: DataSource[] = <DataSource[]>this.localData;
            for (const key of levelKeys) {
                const field: DataSource = {};
                // eslint-disable-next-line
                field[this.fields.id] = key as any;
                this.curDSJSON = <DataSource[] & DataSource>this.findItemFromDS(ds, field);
                const fieldData: DataSource = <DataSource>getFieldValues
                // eslint-disable-next-line no-unexpected-multiline
                (this.curDSJSON as { [key: string]: Object }, this.listBaseOption.fields);
                ds = this.curDSJSON ? <DataSource[] & DataSource>fieldData[this.fields.child] : ds;
            }
            return ds;
        }
        return <DataSource[]>this.localData;
    }

    private getItemData(li: Element | HTMLElement | Fields): DataSource {
        const dataSource: DataSource[] | string[] | number[] | DataManager = this.dataSource instanceof DataManager ?
            this.localData : this.dataSource;
        const fields: Fields = this.getElementUID(li);
        let curDS: DataSource[];
        if (isNullOrUndefined(this.element.querySelector('.' + classNames.hasChild)) && this.fields.groupBy) {
            curDS = <DataSource[]>this.curViewDS;
        } else {
            curDS = <DataSource[]>dataSource;
        }

        return <DataSource>this.findItemFromDS(curDS, <DataSource>fields);
    }

    private findItemFromDS(
        dataSource: DataSource[],
        fields: DataSource,
        parent?: boolean): DataSource[] | DataSource {

        let resultJSON: DataSource[] | DataSource;

        if (dataSource && dataSource.length && fields) {
            dataSource.some((data: DataSource) => {
                const fieldData: DataSource =
                    // eslint-disable-next-line
                    <DataSource>getFieldValues(data as { [key: string]: Object } as any, this.listBaseOption.fields);
                //(!(fid) || id === fid) && (!(ftext) || text === ftext) && (!!fid || !!ftext)
                if ((fields[this.fields.id] || fields[this.fields.text]) &&
                    (!fields[this.fields.id] || (!isNullOrUndefined(fieldData[this.fields.id]) &&
                        fieldData[this.fields.id].toString()) === fields[this.fields.id].toString()) &&
                    (!fields[this.fields.text] || fieldData[this.fields.text] === fields[this.fields.text])) {
                    resultJSON = (parent ? <DataSource[] | DataSource>dataSource : data);
                } else if (typeof data !== 'object' && dataSource.indexOf(data) !== -1) {
                    resultJSON = (parent ? <DataSource[] | DataSource>dataSource : data);
                } else if (!isNullOrUndefined(fields[this.fields.id]) && isNullOrUndefined(fieldData[this.fields.id])) {
                    const li: Element = this.element.querySelector('[data-uid="'
                        + fields[this.fields.id] + '"]');
                    // eslint-disable-next-line
                    if (li && (li as HTMLElement).innerText.trim() === fieldData[this.fields.text] as any) {
                        resultJSON = data;
                    }
                    // eslint-disable-next-line
                } else if ((fieldData as object).hasOwnProperty(this.fields.child) && (fieldData[this.fields.child] as object[]).length) {
                    resultJSON = <DataSource & DataSource[]>this.findItemFromDS(
                        <DataSource[]>fieldData[this.fields.child], fields, parent);
                }
                return !!resultJSON;
            });
        } else {
            resultJSON = <DataSource[] & DataSource>dataSource;
        }

        return <DataSource[] & DataSource>resultJSON;
    }

    private getQuery(): Query {
        const columns: string[] = [];
        const query: Query = (this.query ? this.query : new Query());
        if (!this.query) {
            // eslint-disable-next-line
            for (const column of Object.keys((this.fields as any & { properties: object }).properties)) {
                if (column !== 'tableName' && !!((this.fields as DataSource)[`${column}`]) &&
                    (this.fields as DataSource)[`${column}`] !==
                    (ListBase.defaultMappedFields as DataSource)[`${column}`]
                    && columns.indexOf((this.fields as { [key: string]: string })[`${column}`]) === -1) {

                    columns.push((this.fields as { [key: string]: string })[`${column}`]);

                }
            }
            query.select(columns);
            // eslint-disable-next-line
            if ((this.fields as any & { properties: object }).properties.hasOwnProperty('tableName')) {
                query.from(this.fields.tableName);
            }
        }

        return query;
    }

    private setViewDataSource(dataSource: DataSource[] = <DataSource[]>this.localData): void {
        // eslint-disable-next-line
        let fieldValue: any = (isNullOrUndefined(this.fields.sortBy)) ? this.fields.text : this.fields.sortBy;
        const query: Query = ListBase.addSorting(this.sortOrder, fieldValue);
        if (dataSource && this.fields.groupBy) {
            if (this.sortOrder !== 'None') {
                this.curViewDS = ListBase.groupDataSource(
                    ListBase.getDataSource(dataSource, query),
                    this.listBaseOption.fields, this.sortOrder);
            } else {
                this.curViewDS = ListBase.groupDataSource(dataSource, this.listBaseOption.fields, this.sortOrder);
            }
        } else if (dataSource && this.sortOrder !== 'None') {
            this.curViewDS = ListBase.getDataSource(dataSource, query);
        } else {
            this.curViewDS = dataSource;
        }
    }

    private isInAnimation(): boolean {
        return this.curUL.classList.contains('.e-animate');
    }

    private renderRemoteLists(e: Object, listViewComponent: ListView): void {
        if (this.isDestroyed) { return; }
        this.localData = (e as ResultData).result;
        listViewComponent.removeElement(listViewComponent.contentContainer);
        this.renderList();
        this.trigger('actionComplete', e);
    }

    private triggerActionFailure(e: Object): void {
        if (this.isDestroyed) { return; }
        this.trigger('actionFailure', e);
    }

    private setLocalData(): void {
        this.trigger('actionBegin');
        // eslint-disable-next-line
        const listViewComponent: ListView = this;
        if (this.dataSource instanceof DataManager) {
            if ((this.dataSource as DataManager).ready) {
                (this.dataSource as DataManager).ready.then((e: Object) => {
                    /* eslint-disable */
                    this.isOffline = (this.dataSource as DataManager).dataSource.offline;
                    if (this.dataSource instanceof DataManager && this.isOffline) {
                        this.renderRemoteLists(e, listViewComponent);
                    }
                }).catch((e: Object) => {
                    this.triggerActionFailure(e);
                });
            } else {
                (this.dataSource as DataManager).executeQuery(this.getQuery()).then((e: object) => {
                    this.renderRemoteLists(e, listViewComponent);
                }).catch((e: Object) => {
                    this.triggerActionFailure(e);
                });
            }
        } else if (!this.dataSource || !(<DataSource[]>this.dataSource).length) {
            const ul: HTMLElement = <HTMLElement>this.element.querySelector('ul');
            if (ul) {
                remove(ul);
                this.setProperties({ dataSource: ListBase.createJsonFromElement(ul) }, true);
                this.localData = <DataSource[]>this.dataSource;
                this.renderList();
                this.trigger('actionComplete', { data: this.localData });
            }
        } else {
            this.localData = <DataSource[]>this.dataSource;
            this.renderList();
            this.trigger('actionComplete', { data: this.localData });
        }
    }

    private reRender(): void {
        this.removeElement(this.headerEle);
        this.removeElement(this.ulElement);
        this.removeElement(this.contentContainer);
        if ((this as any).isReact) {
            this.clearTemplate();
        }
        if (Object.keys(window).indexOf('ejsInterop') === -1) {
            this.element.innerHTML = '';
        }
        this.headerEle = this.ulElement = this.liCollection = undefined;
        this.header();
        this.setLocalData();
    }

    private resetCurrentList(): void {
        this.setViewDataSource(this.curViewDS as DataSource[]);
        this.contentContainer.innerHTML = '';
        this.createList();
        this.renderIntoDom(this.curUL);
    }

    private setAttributes(liElements: HTMLElement[]): void {
        for (let i: number = 0; i < liElements.length; i++) {
            const element: HTMLElement = liElements[i];
            if (element.classList.contains('e-list-item')) {
                element.setAttribute('id', this.element.id + '_' + element.getAttribute('data-uid'));
                element.setAttribute('tabindex', '-1');
            }
        }
    }

    private createList(): void {
        this.currentLiElements = [];
        this.isNestedList = false;
        this.ulElement = this.curUL = ListBase.createList(
            this.createElement, this.curViewDS as DataSource[], this.listBaseOption, null, this);
        this.liCollection = <HTMLElement[] & NodeListOf<Element>>this.curUL.querySelectorAll('.' + classNames.listItem);
        this.setAttributes(this.liCollection);
    }

    private exceptionEvent(e: object): void {
        this.trigger('actionFailure', e);
    }
    private UpdateCurrentUL(): void {
        this.ulElement = this.curUL = this.element.querySelector('.' + classNames.parentItem);
        if (this.curUL) {
            (this as any).liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);
        }
    }

    private renderSubList(li: Element): void {
        this.liElement = li;
        const uID: string = li.getAttribute('data-uid');
        if (li.classList.contains(classNames.hasChild) && uID) {
            const ul: Element = closest(li.parentNode, '.' + classNames.parentItem);
            let ele: Element = this.element.querySelector('[pid=\'' + uID + '\']');
            this.curDSLevel.push(uID);
            this.setViewDataSource(this.getSubDS());
            if (!ele) {
                const data: DataSource[] = this.curViewDS as DataSource[];
                ele = ListBase.createListFromJson(this.createElement, data, this.listBaseOption, this.curDSLevel.length, null, this);
                if ((this as any).isReact) {
                    this.renderReactTemplates();
                }
                const lists: HTMLElement[] = <HTMLElement[] & NodeListOf<Element>>ele.querySelectorAll('.' + classNames.listItem);
                this.setAttributes(lists);
                ele.setAttribute('pID', <string>uID);
                (ele as HTMLElement).style.display = 'none';
                this.renderIntoDom(ele);
            }
            this.switchView(<HTMLElement>ul, <HTMLElement>ele);
            this.liCollection = <HTMLElement[] & NodeListOf<Element>>this.curUL.querySelectorAll('.' + classNames.listItem);
            if (this.selectedItems) {
                const fieldData: DataSource = <DataSource>
                    getFieldValues(<DataSource | string>this.selectedItems.data, this.listBaseOption.fields);

                this.header((fieldData[this.listBaseOption.fields.text]) as any, true, 'header');
            }
            this.selectedLI = undefined;
        }
    }

    private renderIntoDom(ele: Element): void {
        this.contentContainer.appendChild(ele);
    }

    private renderList(data?: DataSource[]): void {
        this.setViewDataSource(data);
        if (this.enableVirtualization) {
            if (Object.keys(this.dataSource).length) {
                if ((this.template || this.groupTemplate) && !this.virtualizationModule.isNgTemplate()) {
                    this.listBaseOption.itemCreated = this.virtualizationModule.createUIItem.bind(this.virtualizationModule);
                }
            }
            this.virtualizationModule.uiVirtualization();
        } else {
            this.createList();
            this.contentContainer = this.createElement('div', { className: classNames.container });
            this.element.appendChild(this.contentContainer);
            this.renderIntoDom(this.ulElement);
            if ((this as any).isReact) {
                this.renderReactTemplates();
            }
        }
    }

    private getElementUID(obj: Fields | HTMLElement | Element): Fields {
        let fields: DataSource = {};
        if (obj instanceof Element) {
            fields[this.fields.id] = obj.getAttribute('data-uid') as any;
        } else {
            fields = <DataSource>obj;
        }
        return fields;
    }

    /**
     * Initializes the ListView component rendering.
     */

    public render(): void {
        this.element.classList.add(classNames.root);
        attributes(this.element, { tabindex: '0' });
        this.setCSSClass();
        this.setEnableRTL();
        this.setEnable();
        this.setSize();
        this.wireEvents();
        this.header();
        this.setLocalData();
        this.setHTMLAttribute();
        this.rippleFn = rippleEffect(this.element, {
            selector: '.' + classNames.listItem
        });
        this.renderComplete();
        this.previousScrollTop = this.element.scrollTop;
    }

    /**
     * It is used to destroy the ListView component.
     */

    public destroy(): void {
        if ((this as any).isReact) {
            this.clearTemplate();
        }
        this.unWireEvents();
        const classAr: string[] = [classNames.root, classNames.disable, 'e-rtl',
            'e-has-header', 'e-lib'].concat(this.cssClass.split(' ').filter((css: string) => css));
        removeClass([this.element], classAr);
        this.element.removeAttribute('role');
        this.element.removeAttribute('tabindex');
        this.curUL = this.ulElement = this.liCollection = this.headerEle = undefined;
        this.element.innerHTML = '';
        this.contentContainer = null;
        this.selectedItems = null;
        this.selectedLI = null;
        this.liElement = null;
        this.targetElement = null;
        this.currentLiElements = null;
        this.virtualCheckBox = null;
        super.destroy();
    }

    /**
     * Switches back from the navigated sub list item.
     */

    public back(): void {
        const pID: string = this.curDSLevel[this.curDSLevel.length - 1];
        if (pID === undefined || this.isInAnimation()) { return; }
        this.curDSLevel.pop();
        this.setViewDataSource(this.getSubDS());
        let toUL: HTMLElement = <HTMLElement>this.element.querySelector('[data-uid=\'' + pID + '\']');
        const fromUL: HTMLElement = this.curUL;
        if (!toUL) {
            this.createList();
            this.renderIntoDom(this.ulElement);
            toUL = this.curUL;
        } else {
            toUL = toUL.parentElement;
        }
        const fieldData: DataSource = <DataSource>getFieldValues(this.curDSJSON, this.listBaseOption.fields);
        const text: string = fieldData[this.fields.text] as any;
        this.switchView(fromUL, toUL, true);
        this.removeFocus();
        const li: HTMLElement = <HTMLElement>this.element.querySelector('[data-uid=\'' + pID + '\']');
        li.classList.remove(classNames.disable);
        li.classList.add(classNames.focused);
        if(!(this.showCheckBox && li.querySelector('.' + classNames.checkboxIcon).classList.contains(classNames.checked))){
            li.classList.remove(classNames.selected);
        }
        this.liCollection = <HTMLElement[] & NodeListOf<Element>>this.curUL.querySelectorAll('.' + classNames.listItem);
        if (this.enableHtmlSanitizer) {
            this.setProperties({ headerTitle: SanitizeHtmlHelper.sanitize(this.headerTitle) }, true);
        }
        this.header((this.curDSLevel.length ? text : this.headerTitle), (this.curDSLevel.length ? true : false), 'header');
    }

    /**
     * Selects the list item from the ListView by passing the elements or field object.
     *
     * @param  {Fields | HTMLElement | Element} item - We can pass element Object or Fields as Object with ID and Text fields.
     */

    public selectItem(item: Fields | HTMLElement | Element): void {
        if (this.enableVirtualization) {
            this.virtualizationModule.selectItem(item);
        } else if (this.showCheckBox) {
            this.setCheckboxLI(this.getLiFromObjOrElement(item));
        } else {
            if (isNullOrUndefined(item) === true) {
                this.removeSelect();
            }
            else {
                this.setSelectLI(this.getLiFromObjOrElement(item));
            }

        }
    }

    /**
     * This method allows for deselecting a list item within the ListView. The item to be deselected can be specified by passing the element or field object.
     *
     * @param  {Fields | HTMLElement | Element} item - We can pass an element Object or Fields as an Object with ID and Text fields.
     */
    
    public unselectItem(item?: Fields | HTMLElement | Element): void {
        if (isNullOrUndefined(item)) {
          this.removeSelect();
        } else {
          const li = this.getLiFromObjOrElement(item);
          if (!isNullOrUndefined(li)) {
            this.removeSelect(li);
          }
        }
    }

    private getLiFromObjOrElement(obj: Fields | HTMLElement | Element): HTMLElement {
        let li: Element;
        const dataSource: DataSource[] | string[] | number[] | DataManager = this.dataSource instanceof DataManager ?
            this.localData : this.dataSource;
        if (!isNullOrUndefined(obj)) {
            if (typeof (dataSource as string[])[0] === 'string' || typeof (dataSource as number[])[0] === 'number') {
                if (obj instanceof Element) {
                    const uid: string = (obj as HTMLElement).getAttribute('data-uid').toString();
                    for (let i: number = 0; i < this.liCollection.length; i++) {
                        if (this.liCollection[i].getAttribute('data-uid').toString() === uid) {
                            li = this.liCollection[i] as HTMLElement;
                            break;
                        }
                    }
                } else {
                    Array.prototype.some.call(this.curUL.querySelectorAll('.' + classNames.listItem), (item: HTMLElement) => {
                        if (item.innerText.trim() === obj.toString()) {
                            li = item;
                            return true;
                        } else {
                            return false;
                        }
                    });
                }
            } else {
                const resultJSON: DataSource[] | DataSource = this.getItemData(obj);
                const fieldData: DataSource =
                    <DataSource>getFieldValues(resultJSON, this.listBaseOption.fields);
                if (resultJSON) {
                    li = this.element.querySelector('[data-uid="'
                        + (<DataSource>fieldData)[this.fields.id] + '"]');
                    if (!this.enableVirtualization && isNullOrUndefined(li)) {
                        const curLi: NodeListOf<Element> = this.element.querySelectorAll('.' + classNames.listItem);
                        for (let i: number = 0; i < curLi.length; i++) {
                            if ((curLi[i] as HTMLElement).innerText.trim() === fieldData[this.fields.text] as any) {
                                li = curLi[i];
                            }
                        }
                    }
                }
            }
        }
        return <HTMLElement>li;
    }

    /**
     * Selects multiple list items from the ListView.
     *
     * @param  {Fields[] | HTMLElement[] | Element[]} item - We can pass array of
     *  elements or array of fields Object with ID and Text fields.
     */

    public selectMultipleItems(item: Fields[] | HTMLElement[] | Element[]): void {
        if (!isNullOrUndefined(item)) {
            for (let i: number = 0; i < item.length; i++) {
                if (!isNullOrUndefined(item[i])) {
                    this.selectItem(item[i]);
                }
            }
        }
    }

    private getParentId(): string[] {
        const parentId: string[] = [];
        if (this.isNestedList) {
            for (let i: number = this.curDSLevel.length - 1; i >= 0; i--) {
                parentId.push(this.curDSLevel[i]);
            }
        }
        return parentId;
    }

    private updateSelectedId(): void {
        this.selectedId = [];
        const liCollection: any = this.curUL.getElementsByClassName(classNames.selected);
        for (let i: number = 0; i < liCollection.length; i++) {
            const tempData: DataSource = this.getItemData(liCollection[i] as HTMLElement);
            if (!isNullOrUndefined(tempData) && tempData[this.listBaseOption.fields.id]) {
                this.selectedId.push(tempData[this.listBaseOption.fields.id] as any)
            }
        }
    }

    /**
     * Gets the details of the currently selected item from the list items.
     *
     */

    public getSelectedItems(): SelectedItem | SelectedCollection | UISelectedItem | NestedListData {
        let finalValue: any;
        let isCompleted: boolean = false;
        this.selectedId = [];
        const dataSource: DataSource[] | string[] | number[] | DataManager = this.dataSource instanceof DataManager ?
            this.localData : this.dataSource;
        if (this.enableVirtualization && !isCompleted) {
            finalValue = this.virtualizationModule.getSelectedItems();
            isCompleted = true;
        } else if (this.showCheckBox && !isCompleted) {
            const liCollection: any = this.curUL.getElementsByClassName(classNames.selected);
            const liTextCollection: string[] = []; const liDataCollection: DataSource[] = []; this.selectedId = [];
            const dataParent: DataAndParent[] = [];
            for (let i: number = 0; i < liCollection.length; i++) {
                if (typeof (dataSource as string[])[0] === 'string' || typeof (dataSource as number[])[0] === 'number') {
                    liTextCollection.push((liCollection[i] as HTMLElement).innerText.trim());
                } else {
                    const tempData: DataSource = this.getItemData(liCollection[i] as HTMLElement);
                    const fieldData: DataSource =
                        <DataSource>getFieldValues(tempData, this.listBaseOption.fields);
                    if (this.isNestedList) {
                        dataParent.push({ data: tempData, parentId: this.getParentId() });
                    } else {
                        liDataCollection.push(tempData);
                    }
                    if (fieldData) {
                        liTextCollection.push(fieldData[this.listBaseOption.fields.text] as any);
                        this.selectedId.push(fieldData[this.listBaseOption.fields.id] as any);
                    } else {
                        liTextCollection.push(undefined);
                        this.selectedId.push(undefined);
                    }
                }
            }
            if ((typeof (dataSource as string[])[0] === 'string'
                || typeof (dataSource as number[])[0] === 'number')
                && !isCompleted) {
                finalValue = { item: liCollection, data: dataSource as string[] | number[], text: liTextCollection };
                isCompleted = true;
            }
            if (this.isNestedList && !isCompleted) {
                finalValue = { item: liCollection, data: dataParent, text: liTextCollection };
                isCompleted = true;
            } else if (!isCompleted) {
                finalValue = { item: liCollection, data: liDataCollection, text: liTextCollection };
                isCompleted = true;
            }
        } else if (!isCompleted) {
            const liElement: Element = this.element.getElementsByClassName(classNames.selected)[0];
            const fieldData: DataSource =
                <DataSource>getFieldValues(this.getItemData(liElement), this.listBaseOption.fields);
            if ((typeof (dataSource as string[])[0] === 'string'
                || typeof (dataSource as number[])[0] === 'number')
                && !isCompleted) {
                finalValue = (!isNullOrUndefined(liElement)) ? {
                    item: liElement, data: dataSource as string[] | number[],
                    text: (liElement as HTMLElement).innerText.trim()
                } : undefined;
                isCompleted = true;
            } else if (!isCompleted) {
                if (isNullOrUndefined(fieldData) || isNullOrUndefined(liElement)) {
                    finalValue = undefined;
                    isCompleted = true;
                } else {
                    this.selectedId.push(fieldData[this.listBaseOption.fields.id] as any);
                    finalValue = {
                        text: fieldData[this.listBaseOption.fields.text], item: liElement,
                        data: this.getItemData(liElement)
                    };
                    isCompleted = true;
                }
            }
        }
        return finalValue;
    }

    /**
     * Finds out an item details from the current list.
     *
     * @param  {Fields | HTMLElement | Element} item - We can pass element Object or Fields as Object with ID and Text fields.
     */

    public findItem(item: Fields | HTMLElement | Element): SelectedItem {
        return <SelectedItem & DataSource>this.getItemData(item);
    }

    /**
     * Enables the disabled list items by passing the Id and text fields.
     *
     * @param  {Fields | HTMLElement | Element} item - We can pass element Object or Fields as Object with ID and Text fields.
     */

    public enableItem(item: Fields | HTMLElement | Element): void {
        this.setItemState(item, true);
        if (this.enableVirtualization) {
            this.virtualizationModule.enableItem(item);
        }
    }

    /**
     * Disables the list items by passing the Id and text fields.
     *
     * @param  {Fields | HTMLElement | Element} item - We can pass element Object or Fields as Object with ID and Text fields.
     */

    public disableItem(item: Fields | HTMLElement | Element): void {
        this.setItemState(item, false);
        if (this.enableVirtualization) {
            this.virtualizationModule.disableItem(item);
        }
    }

    //A function that used to set state of the list item like enable, disable.
    private setItemState(item: Fields | HTMLElement | Element, isEnable: boolean): void {
        const resultJSON: DataSource = this.getItemData(item);
        const fieldData: DataSource = <DataSource>getFieldValues(resultJSON, this.listBaseOption.fields);
        if (resultJSON) {
            const li: Element = this.element.querySelector('[data-uid="' + fieldData[this.fields.id] + '"]');
            if (isEnable) {
                if (li) { li.classList.remove(classNames.disable); }
                delete resultJSON[this.fields.enabled];
            } else if (!isEnable) {
                if (li) { li.classList.add(classNames.disable); }
                resultJSON[this.fields.enabled] = false as any;
            }
        }
    }

    /**
     * Shows the hide list item from the ListView.
     *
     * @param  {Fields | HTMLElement | Element} item - We can pass element Object or Fields as Object with ID and Text fields.
     */

    public showItem(item: Fields | HTMLElement | Element): void {
        this.showHideItem(item, false, '');
        if (this.enableVirtualization) {
            this.virtualizationModule.showItem(item);
        }
    }

    /**
     * Hides an list item from the ListView.
     *
     * @param  {Fields | HTMLElement | Element} item - We can pass element Object or Fields as Object with ID and Text fields.
     */

    public hideItem(item: Fields | HTMLElement | Element): void {
        this.showHideItem(item, true, 'none');
        if (this.enableVirtualization) {
            this.virtualizationModule.hideItem(item);
        }
    }

    private showHideItem(obj: Fields | HTMLElement | Element, isHide: boolean, display: string): void {
        const resultJSON: DataSource = this.getItemData(obj);
        const fieldData: DataSource = <DataSource>getFieldValues(resultJSON, this.listBaseOption.fields);
        if (resultJSON) {
            const li: HTMLElement = <HTMLElement>this.element.querySelector('[data-uid="' + fieldData[this.fields.id] + '"]');
            if (li) { li.style.display = display; }
            if (isHide) {
                resultJSON[this.fields.isVisible] = false as any;
            } else {
                delete resultJSON[this.fields.isVisible];
            }
        }
    }

    /**
     * Adds the new list item(s) to the current ListView.
     * To add a new list item(s) in the ListView, we need to pass the `data` as an array of items that need
     * to be added and `fields` as the target item to which we need to add the given item(s) as its children.
     * For example fields: { text: 'Name', tooltip: 'Name', id:'id'}
     *
     * @param  {{Object}[]} data - JSON Array Data that need to add.
     *
     * @param  {Fields} fields - Target item to add the given data as its children (can be null).
     *
     * @param {number} index - Indicates the index where the data to be added.
     */

    public addItem(data: { [key: string]: Object }[], fields: Fields = undefined, index?: number): void {
        const dataSource: DataSource[] = this.dataSource instanceof DataManager
            ? this.localData : this.dataSource as DataSource[];
        this.addItemInternally(data, fields, dataSource, index);
    }

    private addItemInternally(data: DataSource[], fields: Fields, dataSource: DataSource[], index?: number): void {
        if (data instanceof Array) {
            if (this.enableVirtualization) {
                this.virtualizationModule.addItem(data, fields, dataSource, index);
            } else {
                const ds: DataSource = <DataSource>this.findItemFromDS(
                    <DataSource[]>dataSource, <DataSource>fields);
                let child: DataSource[];
                if (ds) {
                    const fieldData: DataSource = <DataSource>getFieldValues(ds, this.listBaseOption.fields);
                    child = <DataSource[]>fieldData[this.fields.child];
                    if (!child) {
                        child = [];
                    }
                    child = child.concat(data);
                }
                // check for whether target is nested level or top level in list
                if (ds instanceof Array) {
                    for (let i: number = 0; i < data.length; i++) {
                        dataSource = this.addItemAtIndex(index, dataSource, data[i]);
                        this.setViewDataSource(dataSource);
                        // since it is top level target, get the content container's first child
                        // as it is always the top level UL
                        const targetUL: HTMLElement = this.contentContainer
                            ? <HTMLElement>this.contentContainer.children[0]
                            : null;
                        // check for whether the list was previously empty or not, if it is
                        // proceed to call initial render
                        if (this.contentContainer && targetUL) {
                            this.addItemIntoDom(data[i], targetUL, this.curViewDS as DataSource[]);
                        } else {
                            this.reRender();
                        }
                    }
                    this.liCollection = <HTMLElement[] & NodeListOf<Element>>this.curUL.querySelectorAll('.' + classNames.listItem);
                } else {
                    // proceed as target item is in nested level, only if it is a valid target ds
                    if (ds) {
                        ds[this.fields.child] = child;
                        this.addItemInNestedList(ds, data);
                    }
                }
            }
        }
    }

    private addItemAtIndex(index: number, newDataSource: DataSource[], itemData: DataSource): DataSource[] {
        let isIndexValid =  !(isNullOrUndefined(index)) && index >= 0 && index < newDataSource.length && isNullOrUndefined(this.listBaseOption.fields.groupBy);
        if (isIndexValid) {
            newDataSource.splice(index, 0, itemData);
        } else {
            newDataSource.push(itemData);
        }
        return newDataSource;
    }
    
    private addItemInNestedList(targetItemData: DataSource, itemQueue: DataSource[]): void {
        const targetItemId: string = targetItemData[this.fields.id] as any;
        const targetChildDS: DataSource[] = targetItemData[this.fields.child] as DataSource[];
        const isAlreadyRenderedUL: HTMLElement | null = this.element.querySelector('[pid=\'' + targetItemId + '\']');
        const targetLi: HTMLElement | null = this.element.querySelector('[data-uid=\'' + targetItemId + '\']');
        const targetUL: HTMLElement | null = isAlreadyRenderedUL
            ? isAlreadyRenderedUL
            : targetLi
                ? <HTMLElement>closest(targetLi, 'ul')
                : null;
        const targetDS: DataSource[] = isAlreadyRenderedUL ? targetChildDS : [targetItemData];
        const isTargetEmptyChild: boolean = targetLi ? !targetLi.classList.contains(classNames.hasChild) : false;
        let isRefreshTemplateNeeded: boolean = false;
        // if li element is already rendered, that element needs to be refreshed so that
        // it becomes child viewable due to new child items are added now
        if (isTargetEmptyChild) {
            const targetRefreshedElement: HTMLElement[] = ListBase.createListItemFromJson(
                this.createElement, targetDS, this.listBaseOption, null, null, this);
            this.setAttributes(targetRefreshedElement);
            targetUL.insertBefore(targetRefreshedElement[0], targetLi);
            detach(targetLi);
            isRefreshTemplateNeeded = true;
        }
        // if it is already rendered element, we need to create and append new elements
        if (isAlreadyRenderedUL && itemQueue) {
            for (let i: number = 0; i < itemQueue.length; i++) {
                targetDS.push(itemQueue[i]);
                this.addItemIntoDom(itemQueue[i], targetUL, targetDS);
            }
            isRefreshTemplateNeeded = true;
        }
    }

    private addItemIntoDom(currentItem: DataSource, targetUL: HTMLElement, curViewDS: DataSource[]): void {
        const index: number = curViewDS.indexOf(currentItem);
        this.addListItem(currentItem, index, targetUL, curViewDS);
        const curItemDS: DataSource = curViewDS[index - 1];
        if (curItemDS && curItemDS.isHeader && (curItemDS.items as DataSource[]).length === 1) {
            this.addListItem(curItemDS, (index - 1), targetUL, curViewDS);
        }
    }

    private addListItem(dataSource: DataSource, index: number, ulElement: HTMLElement, curViewDS: DataSource[]): void {
        let target: HTMLElement = this.getLiFromObjOrElement((curViewDS as DataSource[])[index + 1]) ||
            this.getLiFromObjOrElement((curViewDS as DataSource[])[index + 2]) || null;
        const li: HTMLElement[] = ListBase.createListItemFromJson(this.createElement, [dataSource], this.listBaseOption, null, null, this);
        this.setAttributes(li);
        if (this.template && (this as any).isReact) {
            this.renderReactTemplates();
        }
        if (this.fields.groupBy && curViewDS[index + 1] && curViewDS[index + 1].isHeader) {
            let targetEle: HTMLElement = this.getLiFromObjOrElement(curViewDS[index - 1]);
            if (targetEle) {
                target = targetEle.nextElementSibling as HTMLElement;
            }
        }
        ulElement.insertBefore(li[0], target);
    }

    /**
     * Removes the list item from the data source based on a passed
     *  element like fields: { text: 'Name', tooltip: 'Name', id:'id'}
     *
     * @param  {Fields | HTMLElement | Element} item - We can pass element Object or Fields as Object with ID and Text fields.
     */

    public removeItem(item: Fields | HTMLElement | Element): void {
        const listDataSource: DataSource[] = this.dataSource instanceof DataManager
            ? this.localData : this.dataSource as DataSource[];
        if (this.enableVirtualization) {
            this.virtualizationModule.removeItem(item);
        } else {
            this.removeItemFromList(item, listDataSource);
        }
    }

    private removeItemFromList(obj: Fields | Element | HTMLElement, listDataSource: DataSource[]): void {
        const curViewDS: DataSource[] = this.curViewDS as DataSource[];
        const fields: Fields = obj instanceof Element ? this.getElementUID(obj) : obj;
        let dataSource: DataSource[] | DataSource;
        dataSource = this.findItemFromDS(listDataSource, <DataSource>fields, true);
        if (dataSource) {
            let data: DataSource | DataSource[];
            data = this.findItemFromDS(dataSource as DataSource[], <DataSource>fields);
            const index: number = curViewDS.indexOf(data as DataSource);
            const li: HTMLElement = this.getLiFromObjOrElement(obj);
            let groupLi: HTMLElement;
            this.validateNestedView(li);
            if (this.fields.groupBy && this.curViewDS[index - 1] &&
                curViewDS[index - 1].isHeader &&
                (curViewDS[index - 1].items as DataSource[]).length === 1) {
                if (li && (li.previousElementSibling as HTMLElement).classList.contains(classNames.groupListItem) &&
                    (isNullOrUndefined(li.nextElementSibling) || (li.nextElementSibling &&
                        (li.nextElementSibling as HTMLElement).classList.contains(classNames.groupListItem)))) {
                    groupLi = li.previousElementSibling as HTMLElement;
                }
            }
            if (li) {
                detach(li);
            }
            if (groupLi) {
                detach(groupLi);
            }
            const foundData: any = ((<DataSource[]>dataSource).length - 1) <= 0
                ? this.findParent(
                    this.localData,
                    this.fields.id,
                    (value: string) => value === (data as DataSource)[this.fields.id] as any,
                    null) : null;
            const dsIndex: number = (dataSource as DataSource[]).indexOf(data as DataSource);
            (dataSource as DataSource[]).splice(dsIndex, 1);
            this.setViewDataSource(listDataSource);
            if (foundData
                && foundData.parent
                && Array.isArray(foundData.parent[this.fields.child])
                && foundData.parent[this.fields.child].length <= 0) {
                const parentLi: HTMLElement | null = this.getLiFromObjOrElement(foundData.parent);
                if (parentLi) {
                    const li: HTMLElement[] = ListBase.createListItemFromJson(
                        this.createElement,
                        [foundData.parent],
                        this.listBaseOption,
                        null,
                        null,
                        this);
                    this.setAttributes(li);
                    parentLi.parentElement.insertBefore(li[0], parentLi);
                    parentLi.parentElement.removeChild(parentLi);
                }
            }
            if (dataSource.length <= 0) {
                this.back();
            }
            this.liCollection = Array.prototype.slice.call(this.element.querySelectorAll('.' + classNames.listItem));
        }
    }

    // validate before removing an element whether the current view is inside target element's child view
    private validateNestedView(li: HTMLElement | null): void {
        const liID: string = li ? li.getAttribute('data-uid').toString().toLowerCase() : null;
        if (liID && this.curDSLevel && this.curDSLevel.length > 0) {
            while (this.curDSLevel.some((id: string) => id.toString().toLowerCase() === liID)) {
                this.back();
            }
        }
    }

    /**
     * Removes multiple items from the ListView by passing the array of elements or array of field objects.
     *
     * @param  {Fields[] | HTMLElement[] | Element[]} item - We can pass array of elements or array of field Object with ID and Text fields.
     */

    public removeMultipleItems(item: HTMLElement[] | Element[] | Fields[]): void {
        if (item.length) {
            for (let i: number = 0; i < item.length; i++) {
                this.removeItem(item[i]);
            }
        }
    }

    private findParent(dataSource: any, id: string, callback: Function, parent: object): object {
        if (dataSource.hasOwnProperty(id) && callback(dataSource[id]) === true) {
            return extend({}, dataSource);
        }

        for (let i: number = 0; i < Object.keys(dataSource).length; i++) {
            if (dataSource[Object.keys(dataSource)[i]]
                && typeof dataSource[Object.keys(dataSource)[i]] === 'object') {
                const result: any = this.findParent(dataSource[Object.keys(dataSource)[i]], id, callback, dataSource);
                if (result != null) {
                    if (!result.parent) { result.parent = parent; }
                    return result;
                }
            }
        }
        return null;
    }

    // Module Required function
    protected getModuleName(): string {
        return 'listview';
    }

    public requiredModules(): ModuleDeclaration[] {
        const modules: ModuleDeclaration[] = [];
        if (this.enableVirtualization) {
            modules.push({ args: [this], member: 'virtualization' });
        }

        return modules;
    }

    private onListScroll(e: Event ) {
        let args: ScrolledEventArgs = { originalEvent: e, scrollDirection: "Bottom", distanceY: this.element.scrollHeight - this.element.scrollTop };
        let currentScrollTop = this.element.scrollTop;
        if (currentScrollTop > this.previousScrollTop) {
            args.scrollDirection = "Bottom";
            args.distanceY = this.element.scrollHeight - this.element.clientHeight - this.element.scrollTop;
            this.trigger('scroll', args);
        } else if (this.previousScrollTop > currentScrollTop) {
            args.scrollDirection = "Top";
            args.distanceY = this.element.scrollTop;
            this.trigger('scroll', args);
        }
        this.previousScrollTop = currentScrollTop;
    }

    /**
     * Get the properties to be maintained in the persisted state.
     */

    protected getPersistData(): string {
        return this.addOnPersist(['cssClass', 'enableRtl', 'htmlAttributes',
            'enable', 'fields', 'animation', 'headerTitle',
            'sortOrder', 'showIcon', 'height', 'width', 'showCheckBox', 'checkBoxPosition','selectedId']);
    }

}

interface ResultData {
    result: { [key: string]: object }[];
}

/** @hidden */
export interface ClassNames {
    root: string;
    hover: string;
    focused: string;
    selected: string;
    parentItem: string;
    listItem: string;
    hasChild: string;
    view: string;
    header: string;
    text: string;
    headerText: string;
    headerTemplateText: string;
    listItemText: string;
    listIcon: string;
    textContent: string;
    groupListItem: string;
    disable: string;
    container: string;
    backIcon: string;
    backButton: string;
    icon: string;
    checkboxWrapper: string;
    checkbox: string;
    checked: string;
    checkboxIcon: string;
    checklist: string;
    checkboxRight: string;
    checkboxLeft: string;
    listviewCheckbox: string;
    itemCheckList: string;
    virtualElementContainer: string;
}

/**
 * An interface that holds list selected item.
 */
export interface ListSelectedItem {
    /**
     * Specifies the selected item dataSource collection.
     *
     * @isGenericType true
     */
    data?: object[];
    /**
     * Specifies the selected item text collection.
     */
    text?: string[];
    /**
     * Specifies index of the selected element.
     * Available only in virtualization.
     */
    index?: number[];
    /**
     * Specifies the hierarchical parent id collection of the current view.
     * Available only in nested list with checkbox enabled.
     */
    parentId?: string[];
}

/** 
* An enum type that denotes the ListView scroll direction when it reaches the end. 
* ```props 
* Top:- The scrollbar is moved upwards. 
* Bottom:- The scrollbar is moved downwards. 
 
* ``` 
*/ 
export type direction = 'Top' | 'Bottom'; 

/**
 * An interface that holds selected item.
 */
export interface SelectedItem {
    /**
     * It denotes the selected item text.
     */
    text: string;

    /**
     * It denotes the selected item list element.
     *
     */
    item: HTMLElement | Element;

    /**
     * It denotes the selected item dataSource JSON object.
     *
     * @isGenericType true
     */
    data: { [key: string]: Object } | string[] | number[];

}

/**
 * An interface that holds selected collection.
 */
export interface SelectedCollection {
    /**
     * It denotes the selected item text data or collection.
     */
    text: string | string[];

    /**
     * It denotes the selected item list element or element collection.
     */
    item: HTMLElement | Element[] | NodeList;

    /**
     * It denotes the selected item dataSource JSON object or object collection.
     *
     * @isGenericType true
     */
    data: { [key: string]: object } | { [key: string]: object }[] | string[] | number[];
}

/**
 * An interface that holds UI selected item.
 */
export interface UISelectedItem {
    /**
     * It denotes the selected item text data or collection.
     */
    text: string | number | string[] | number[];

    /**
     * It denotes the selected item list element or element collection.
     */
    item?: HTMLElement | Element[] | NodeList;

    /**
     * It denotes the selected item dataSource JSON object or object collection.
     *
     * @isGenericType true
     */
    data: { [key: string]: object } | { [key: string]: object }[] | string | number | string[] | number[];
    /**
     * It is used to denote the index of the selected element.
     */
    index?: number | number[];
    /**
     * It is used to check whether the element is checked or not.
     */
    isChecked?: boolean;
}

/**
 * An interface that holds details of data and parent.
 */
export interface DataAndParent {
    /**
     * It denotes the selected item dataSource JSON object or object collection.
     *
     * @isGenericType true
     */
    data: { [key: string]: object } | { [key: string]: object }[] | string[];
    /**
     * It denotes the selected item's parent id;
     */
    parentId: string[];
}

/**
 * An interface that holds nested list data.
 */
export interface NestedListData {
    /**
     * It denotes the selected item text data or collection.
     */
    text: string | string[];
    /**
     * It denotes the selected item list element or element collection.
     */
    item: HTMLElement | Element[] | NodeList;
    /**
     * It denotes the selected item dataSource JSON object with it's parent id.
     */
    data: DataAndParent[];
}

/**
 * An interface that holds selected event arguments
 */
export interface SelectEventArgs extends BaseEventArgs, SelectedItem {
    /**
     * Specifies that event has triggered by user interaction.
     */
    isInteracted: boolean;
    /**
     * Specifies that event argument when event raised by other event.
     */
    event: MouseEvent | KeyboardEvent;
    /**
     * It is used to denote the index of the selected element.
     */
    index: number;
    /**
     * It is used to check whether the element is checked or not.
     */
    isChecked?: boolean;
    /**
     * Cancels the item selection if the value is true 
     */
    cancel: boolean;
}

/**
 * An interface that holds scrolled event arguments
 */
export interface ScrolledEventArgs {
    /** 
     * Specifies the direction “Top” or “Bottom” in which the scrolling occurs. 
     */ 
    scrollDirection: direction; 
    /** 
     * Specifies the default scroll event arguments. 
     */ 
    originalEvent: Event;
    /** 
     * Specifies the distance from the scrollbar to the top and bottom ends.
     */ 
    distanceY: number;
}

/**
 * An interface that holds item created event arguments
 */
export interface ItemCreatedArgs {
    curData: { [key: string]: object };
    dataSource: { [key: string]: object } | string[];
    fields: FieldsMapping;
    item: HTMLElement;
    options: ListBaseOptions;
    text: string;
}

interface DataSource {
    [key: string]: object;
}