@wavemaker/app-ng-runtime 11.8.0-next.24904 → 11.8.0-next.27301

app-ng-runtime/components/data/list/fesm2022/index.mjs

@@ -3,14 +3,15 @@ import { ViewContainerRef, Directive, Optional, HostBinding, HostListener, Input
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@wm/components/base';
-import { PROP_BOOLEAN, PROP_STRING, PROP_ANY, PROP_NUMBER, register, StylableComponent, APPLY_STYLES_TYPE, styler, extractDataSourceName, NAVIGATION_TYPE, getOrderedDataset, groupData, unsupportedStatePersistenceTypes, DEBOUNCE_TIMES, configureDnD, handleHeaderClick, toggleAllHeaders, provideAsWidgetRef, WmComponentsModule } from '@wm/components/base';
+import { PROP_BOOLEAN, PROP_STRING, PROP_ANY, PROP_NUMBER, register, StylableComponent, APPLY_STYLES_TYPE, styler, extractDataSourceName, DEBOUNCE_TIMES, handleHeaderClick, toggleAllHeaders, NAVIGATION_TYPE, getOrderedDataset, groupData, unsupportedStatePersistenceTypes, configureDnD, provideAsWidgetRef, WmComponentsModule } from '@wm/components/base';
 import * as i2$1 from '@wm/components/data/pagination';
 import { PaginationComponent, PaginationModule } from '@wm/components/data/pagination';
 import * as i2 from '@wm/core';
-import { isMobileApp, $watch, getClonedObject, isDefined, $appDigest, noop, generateGUId, $invokeWatchers, DataSource, isDataSourceEqual, isObject, isMobile, switchClass, setListClass, isNumber } from '@wm/core';
+import { isMobileApp, $watch, noop, generateGUId, getClonedObject, $appDigest, isDefined, DataSource, isDataSourceEqual, isObject, switchClass, setListClass, isMobile, $invokeWatchers } from '@wm/core';
 import { ButtonComponent } from '@wm/components/input';
 import { Subject } from 'rxjs';
 import { SwipeAnimation } from '@swipey';
+import { reduce, map, get, isEmpty, isArray, forEach, isEqual, isUndefined, includes, last, cloneDeep, isString, has, clone, remove, some, pullAllWith, toNumber, min, max, pullAt, isNumber } from 'lodash-es';
 
 const registerProps = () => {
     register('wm-list', new Map([
@@ -218,7 +219,7 @@ class ListAnimator extends SwipeAnimation {
     }
     // Returns the total width occupied by all the children inside the element
     computeTotalChildrenWidth($ele) {
-        return _.reduce($ele.children(), (totalWidth, el) => {
+        return reduce($ele.children(), (totalWidth, el) => {
             return totalWidth + $(el).outerWidth();
         }, 0);
     }
@@ -227,7 +228,8 @@ class ListAnimator extends SwipeAnimation {
         const totalWidth = this.computeTotalChildrenWidth($ele);
         const reverse = this.position === 'right';
         let d = 0;
-        return _.map($ele.children(), e => {
+        // @ts-ignore
+        return map($ele.children(), e => {
             const f = (totalWidth - d) / totalWidth;
             d += $(e).outerWidth();
             return reverse ? f : (d / totalWidth);
@@ -640,70 +642,6 @@ const DEFAULT_CLS = 'app-livelist app-panel';
 const WIDGET_CONFIG = { widgetType: 'wm-list', hostClass: DEFAULT_CLS };
 class ListComponent extends StylableComponent {
     static { this.initializeProps = registerProps(); }
-    get selecteditem() {
-        if (this.multiselect) {
-            return getClonedObject(this._items);
-        }
-        if (_.isEmpty(this._items)) {
-            return {};
-        }
-        return getClonedObject(this._items[0]);
-    }
-    /**
-     * Returns list of widgets present on list item by considering name and index of the widget.
-     * If we did'nt pass index, it returns array of all the widgets which are matching to widget name
-     * @param widgteName: Name of the widget
-     * @param index: Index of the widget
-     */
-    getWidgets(widgteName, index) {
-        let $target;
-        const retVal = [];
-        if (!widgteName) {
-            return;
-        }
-        if (!isDefined(index)) {
-            _.forEach(this.listItems.toArray(), (el) => {
-                $target = _.get(el.currentItemWidgets, widgteName);
-                if ($target) {
-                    retVal.push($target);
-                }
-            });
-            return retVal;
-        }
-        index = +index || 0;
-        $target = _.get(this.listItems.toArray(), index);
-        if ($target) {
-            return [_.get($target.currentItemWidgets, widgteName)];
-        }
-    }
-    // returns listitem reference by index value. This refers to the same method getListItemByIndex.
-    getItem(index) {
-        return this.getListItemByIndex(index);
-    }
-    /**
-     * Returns index of listItem(listItemDirective / listItemObject)
-     * If item is a directive, index is fetched from listItems
-     * If item is an object, index is fetched from fieldDefs
-    */
-    getIndex(item) {
-        if (item instanceof ListItemDirective) {
-            return this.getListItemIndex(item);
-        }
-        else if (item) {
-            return this.fieldDefs.findIndex((obj) => _.isEqual(obj, item));
-        }
-    }
-    set selecteditem(items) {
-        this._items.length = 0;
-        this.deselectListItems();
-        if (_.isArray(items)) {
-            items.forEach(item => this.selectItem(item));
-        }
-        else {
-            this.selectItem(items);
-        }
-        $appDigest();
-    }
     constructor(inj, cdRef, datePipe, app, appDefaults, ngZone, binditemclass, binddisableitem, binddataset, binddatasource, mouseEnterCB, mouseLeaveCB, statePersistence, paginationService, explicitContext) {
         let resolveFn = noop;
         const propsInitPromise = new Promise(res => resolveFn = res);
@@ -731,12 +669,12 @@ class ListComponent extends StylableComponent {
         // Updates pagination, filter, sort etc options for service and crud variables
         this._listenerDestroyers = [
             this.app.subscribe('check-state-persistence-options', options => {
-                let dataSourceName = _.get(this.datasource, 'name');
+                let dataSourceName = get(this.datasource, 'name');
                 // in Prefabs, this.datasource is not resolved at the time of variable invocation, so additional check is required.
                 if (!dataSourceName) {
                     dataSourceName = extractDataSourceName(this.binddatasource);
                 }
-                if (_.get(options, 'variable.name') !== dataSourceName) {
+                if (get(options, 'variable.name') !== dataSourceName) {
                     return;
                 }
                 this.handleStateParams(options);
@@ -751,31 +689,69 @@ class ListComponent extends StylableComponent {
             })
         ];
     }
-    getConfiguredState() {
-        const mode = this.statePersistence.computeMode(this.statehandler);
-        return mode && mode.toLowerCase();
+    get selecteditem() {
+        if (this.multiselect) {
+            return getClonedObject(this._items);
+        }
+        if (isEmpty(this._items)) {
+            return {};
+        }
+        return getClonedObject(this._items[0]);
     }
-    handleStateParams(options) {
-        if (this._pageLoad && this.getConfiguredState() !== 'none') {
-            this._pageLoad = false;
-            const widgetState = this.statePersistence.getWidgetState(this);
-            if (_.get(widgetState, 'pagination')) {
-                options.options = options.options || {};
-                options.options.page = widgetState.pagination;
-            }
-            if (_.get(widgetState, 'selectedItem')) {
-                this._selectedItemsExist = true;
-            }
+    set selecteditem(items) {
+        this._items.length = 0;
+        this.deselectListItems();
+        if (isArray(items)) {
+            items.forEach(item => this.selectItem(item));
+        }
+        else {
+            this.selectItem(items);
         }
+        $appDigest();
     }
-    triggerWMEvent(eventName, item) {
-        $invokeWatchers(true);
-        // If we have multiselect for the livelist(List with form template), in run mode deleting a record is getting failed. Becuase the selecteditem will be array of objects. So consider the last object.
-        let row = this.multiselect ? _.last(this.selecteditem) : this.selecteditem;
-        if (item) {
-            row = item;
+    /**
+     * Returns list of widgets present on list item by considering name and index of the widget.
+     * If we did'nt pass index, it returns array of all the widgets which are matching to widget name
+     * @param widgteName: Name of the widget
+     * @param index: Index of the widget
+     */
+    getWidgets(widgteName, index) {
+        let $target;
+        const retVal = [];
+        if (!widgteName) {
+            return;
+        }
+        if (!isDefined(index)) {
+            forEach(this.listItems.toArray(), (el) => {
+                $target = get(el.currentItemWidgets, widgteName);
+                if ($target) {
+                    retVal.push($target);
+                }
+            });
+            return retVal;
+        }
+        index = +index || 0;
+        $target = get(this.listItems.toArray(), index);
+        if ($target) {
+            return [get($target.currentItemWidgets, widgteName)];
+        }
+    }
+    // returns listitem reference by index value. This refers to the same method getListItemByIndex.
+    getItem(index) {
+        return this.getListItemByIndex(index);
+    }
+    /**
+     * Returns index of listItem(listItemDirective / listItemObject)
+     * If item is a directive, index is fetched from listItems
+     * If item is an object, index is fetched from fieldDefs
+     */
+    getIndex(item) {
+        if (item instanceof ListItemDirective) {
+            return this.getListItemIndex(item);
+        }
+        else if (item) {
+            return this.fieldDefs.findIndex((obj) => isEqual(obj, item));
         }
-        this.app.notify('wm-event', { eventName, widgetName: this.name, row: row });
     }
     create() {
         if (this._isDependent) {
@@ -814,140 +790,532 @@ class ListComponent extends StylableComponent {
                 this.variableInflight = data.active;
                 // Fix for [WMS-23772] Update nodatafound flag once the response is recieved from the server
                 const totalEle = data.data?.pagination?.totalElements;
-                if (!_.isUndefined(totalEle)) {
+                if (!isUndefined(totalEle)) {
                     this.noDataFound = totalEle === 0 ? true : false;
                 }
                 else { // totalelements is undefined
-                    this.noDataFound = _.isEmpty(data.data?.data);
+                    this.noDataFound = isEmpty(data.data?.data);
                 }
             });
         }
     }
-    resetNavigation() {
-        this.showNavigation = false;
-        this.navControls = undefined;
-        this.infScroll = false;
-        this.onDemandLoad = false;
-    }
-    enableBasicNavigation() {
-        this.navControls = NAVIGATION_TYPE.BASIC;
-        this.showNavigation = true;
-    }
-    enableInlineNavigation() {
-        this.navControls = NAVIGATION_TYPE.INLINE;
-    }
-    enableClassicNavigation() {
-        this.navControls = NAVIGATION_TYPE.CLASSIC;
-        this.showNavigation = true;
-    }
-    enablePagerNavigation() {
-        this.navControls = NAVIGATION_TYPE.PAGER;
-        this.showNavigation = true;
-    }
-    setNavigationTypeNone() {
-        this.navControls = NAVIGATION_TYPE.NONE;
-        this.showNavigation = false;
-    }
-    enableInfiniteScroll() {
-        this.infScroll = true;
-    }
-    enableOnDemandLoad() {
-        this.onDemandLoad = true;
-        this.showNavigation = true;
-    }
-    /**
-     * Sets Navigation type for the list.
-     * @param type
-     */
-    onNavigationTypeChange(type) {
-        this.resetNavigation();
-        switch (type) {
-            case NAVIGATION_TYPE.BASIC:
-                this.enableBasicNavigation();
-                break;
-            case NAVIGATION_TYPE.INLINE:
-                this.enableInlineNavigation();
-                break;
-            case NAVIGATION_TYPE.ADVANCED:
-            case NAVIGATION_TYPE.CLASSIC:
-                this.enableClassicNavigation();
-                break;
-            case NAVIGATION_TYPE.PAGER:
-                this.enablePagerNavigation();
-                break;
-            case NAVIGATION_TYPE.NONE:
-                this.setNavigationTypeNone();
-                break;
-            case NAVIGATION_TYPE.SCROLL:
-                this.enableInfiniteScroll();
-                break;
-            case NAVIGATION_TYPE.ONDEMAND:
-                this.enableOnDemandLoad();
-                break;
+    triggerListItemSelection($el, $event) {
+        if ($el && $el[0]) {
+            const listItemContext = $el.data('listItemContext');
+            // Trigger click event only if the list item is from the corresponding list.
+            if (listItemContext.listComponent === this) {
+                this.onItemClick($event, listItemContext);
+            }
         }
     }
-    /**
-     * Update fieldDefs property, fieldDefs is the model of the List Component.
-     * fieldDefs is an Array type.
-     * @param newVal
-     */
-    updateFieldDefs(newVal) {
-        if (this.infScroll || this.onDemandLoad) {
-            [this.fieldDefs, this.currentPage] = this.paginationService.updateFieldsOnPagination(this, newVal);
-        }
-        else {
-            this.fieldDefs = newVal;
-        }
-        if (this.orderby) {
-            this.fieldDefs = getOrderedDataset(this.fieldDefs, this.orderby);
-        }
-        if (this.groupby) {
-            this.groupedData = groupData(this, this.fieldDefs, this.groupby, this.match, this.orderby, this.dateformat, this.datePipe, undefined, this.appDefaults);
-        }
-        if (!this.fieldDefs.length) {
-            this.noDataFound = true;
-            this.selecteditem = undefined;
+    // this method is called form other data widgets like table.
+    execute(operation, options) {
+        if ([DataSource.Operation.IS_API_AWARE, DataSource.Operation.IS_PAGEABLE, DataSource.Operation.SUPPORTS_SERVER_FILTER].includes(operation)) {
+            return false;
         }
-        $appDigest();
-        this.listItems.setDirty();
+        return this.datasource.execute(operation, options);
     }
-    onDataChange(newVal) {
-        // Check for newVal is not empty
-        if (!_.isEmpty(newVal)) {
-            this.noDataFound = false;
-            this.isDataChanged = true;
-            if (this.datasource && this.datasource.execute(DataSource.Operation.IS_API_AWARE)) {
-                // clone the the data in case of live and service variables to prevent the two-way binding for these variables.
-                newVal = _.cloneDeep(newVal);
-            }
-            if (isObject(newVal) && !_.isArray(newVal)) {
-                newVal = _.isEmpty(newVal) ? [] : [newVal];
-            }
-            if (_.isString(newVal)) {
-                newVal = newVal.split(',');
-            }
-            // if the page number is greater than 1 on initial load then we render the first page.
-            if (this.datasource && this.datasource.owner === 'App' && (this.infScroll || this.onDemandLoad) && !this.currentPage && this.datasource.execute(DataSource.Operation.GET_PAGING_OPTIONS).number > 0) {
-                newVal = this.datasource.execute(DataSource.Operation.LIST_RECORDS, {
-                    'page': 1
-                });
-            }
-            if (_.isArray(newVal)) {
-                if (newVal.length) {
-                    this.invokeEventCallback('beforedatarender', { $data: newVal });
-                }
-                this.updateFieldDefs(newVal);
-            }
-        }
-        else {
-            this.updateFieldDefs([]);
+    handleKeyDown($event, action) {
+        $event.stopPropagation();
+        if ($event.keyCode !== 13 && $event.keyCode !== 9 && !(($event.target.classList.contains('form-control') || $event.target.classList.contains('note-editable')) && $event.keyCode === 32)) {
+            $event.preventDefault();
         }
-    }
-    // Updates the dataSource when pagination is enabled for the Component.
-    setupDataSource() {
-        const dataNavigator = this.dataNavigator;
-        dataNavigator.options = {
-            maxResults: this.pagesize || 20
+        const listItems = this.listItems;
+        let presentIndex = this.getListItemIndex(this.lastSelectedItem);
+        if (this.multiselect) {
+            const firstIndex = this.getListItemIndex(this.firstSelectedItem);
+            const selectCount = isArray(this.selecteditem) ? this.selecteditem.length : (isObject(this.selecteditem) ? 1 : 0);
+            if (action === 'selectPrev') {
+                if (presentIndex > 0) {
+                    if ((presentIndex <= firstIndex) && this.checkSelectionLimit(selectCount)) {
+                        this.lastSelectedItem = this.getListItemByIndex(presentIndex - 1);
+                        this.toggleListItemSelection(this.lastSelectedItem);
+                    }
+                    else if (presentIndex > firstIndex) {
+                        this.toggleListItemSelection(this.getListItemByIndex(presentIndex));
+                        this.lastSelectedItem = this.getListItemByIndex(presentIndex - 1);
+                    }
+                    else {
+                        this.invokeEventCallback('selectionlimitexceed', { $event });
+                    }
+                }
+            }
+            else if (action === 'selectNext') {
+                if (presentIndex < listItems.length - 1) {
+                    if ((presentIndex >= firstIndex) && this.checkSelectionLimit(selectCount)) {
+                        this.lastSelectedItem = this.getListItemByIndex(presentIndex + 1);
+                        this.toggleListItemSelection(this.lastSelectedItem);
+                    }
+                    else if (presentIndex < firstIndex) {
+                        this.toggleListItemSelection(this.getListItemByIndex(presentIndex));
+                        this.lastSelectedItem = this.getListItemByIndex(presentIndex + 1);
+                    }
+                    else {
+                        this.invokeEventCallback('selectionlimitexceed', { $event });
+                    }
+                }
+            }
+        }
+        if (action === 'focusPrev') {
+            if (this.isListElementMovable) {
+                presentIndex = presentIndex <= 0 ? 0 : (presentIndex);
+                if (presentIndex === 0) {
+                    return;
+                }
+                this.lastSelectedItem = this.getListItemByIndex(presentIndex);
+                const prevElt = this.getListItemByIndex(presentIndex - 1);
+                prevElt.nativeElement.before(this.lastSelectedItem.nativeElement);
+                this.lastSelectedItem.nativeElement.focus();
+                this.statePersistence.removeWidgetState(this, 'selectedItem');
+                const arr = this.listItems.toArray();
+                [arr[presentIndex - 1], arr[presentIndex]] = [arr[presentIndex], arr[presentIndex - 1]];
+                this.listItems.reset(arr);
+                this.currentIndex = presentIndex;
+                this.ariaText = "selected ";
+            }
+            else {
+                presentIndex = presentIndex <= 0 ? 0 : (presentIndex - 1);
+                this.lastSelectedItem = this.getListItemByIndex(presentIndex);
+                this.lastSelectedItem.nativeElement.focus();
+                this.currentIndex = presentIndex + 1;
+                this.ariaText = "selected ";
+            }
+        }
+        else if (action === 'focusNext') {
+            if (this.isListElementMovable) {
+                presentIndex = presentIndex < (listItems.length - 1) ? (presentIndex) : (listItems.length - 1);
+                if (presentIndex === this.listItems.length - 1) {
+                    return;
+                }
+                this.lastSelectedItem = this.getListItemByIndex(presentIndex);
+                const nextElt = this.getListItemByIndex(presentIndex + 1);
+                nextElt.nativeElement.after(this.lastSelectedItem.nativeElement);
+                this.lastSelectedItem.nativeElement.focus();
+                this.statePersistence.removeWidgetState(this, 'selectedItem');
+                const arr = this.listItems.toArray();
+                [arr[presentIndex], arr[presentIndex + 1]] = [arr[presentIndex + 1], arr[presentIndex]];
+                this.listItems.reset(arr);
+                this.currentIndex = presentIndex + 2;
+                this.ariaText = "selected ";
+            }
+            else {
+                presentIndex = presentIndex < (listItems.length - 1) ? (presentIndex + 1) : (listItems.length - 1);
+                this.lastSelectedItem = this.getListItemByIndex(presentIndex);
+                this.lastSelectedItem.nativeElement.focus();
+                this.currentIndex = presentIndex + 1;
+                this.ariaText = "selected ";
+            }
+        }
+        else if (action === 'select') {
+            // if the enter click is pressed on the item which is not the last selected item, the find the item from which the event is originated.
+            if (presentIndex === -1 || !$($event.target).closest(this.lastSelectedItem.nativeElement)) {
+                const $li = $($event.target).closest('li.app-list-item');
+                const $ul = $li.closest('ul.app-livelist-container');
+                presentIndex = $ul.find('li.app-list-item').index($li);
+            }
+            this.onItemClick($event, this.getListItemByIndex(presentIndex));
+        }
+        else if (action === 'space') {
+            if (!this.enablereorder) {
+                return;
+            }
+            this.isListElementMovable = !this.isListElementMovable;
+            this.onItemClick($event, this.getListItemByIndex(presentIndex));
+            this.currentIndex = presentIndex + 1;
+            if (this.isListElementMovable) {
+                this.ariaText = `Item ${this.currentIndex} grabbed, current position `;
+                this.$ulEle.data('oldIndex', presentIndex);
+            }
+            else {
+                this.ariaText = `Item ${this.currentIndex} dropped, final position `;
+                this.onUpdate($event, undefined, presentIndex);
+            }
+        }
+    }
+    onPropertyChange(key, nv, ov) {
+        if (key === 'dataset') {
+            if (!nv && this.binddatasource && !this.datasource) {
+                return;
+            }
+            this.onDataSetChange(nv);
+        }
+        else if (key === 'datasource') {
+            if (this.dataset) {
+                this.onDataSetChange(this.dataset);
+            }
+        }
+        else if (key === 'navigation') {
+            // Support for older projects where navigation type was advanced instead of classic
+            if (nv === 'Advanced') {
+                this.navigation = 'Classic';
+                return;
+            }
+            switchClass(this.nativeElement, nv, ov);
+            this.onNavigationTypeChange(nv);
+            if (this.dataNavigator) {
+                this.dataNavigator.navigationClass = this.paginationclass;
+            }
+        }
+        else if (key === 'itemsperrow') {
+            setListClass(this);
+        }
+        else if (key === 'tabindex') {
+            return;
+        }
+        else if (key === 'pulltorefresh' && nv) {
+            this.app.notify('pullToRefresh:enable');
+            this.subscribeToPullToRefresh();
+        }
+        else if (key === 'paginationclass') {
+            if (this.dataNavigator) {
+                // Adding setTimeout because in pagination component updateNavSize method is overriding navigationclass
+                setTimeout(() => this.dataNavigator.navigationClass = nv);
+            }
+        }
+        else if (key === 'pagesize') {
+            this.dataNavigator.options = {
+                maxResults: nv
+            };
+            this.dataNavigator.widget.maxResults = nv;
+            this.dataNavigator.maxResults = nv;
+        }
+        else if (key === 'enablereorder') {
+            if (nv && this.$ulEle) {
+                this.$ulEle.attr('aria-describedby', this.titleId);
+                this.configureDnD();
+                this.$ulEle.sortable('enable');
+            }
+            else if (this.$ulEle && !nv) {
+                this.$ulEle.removeAttr('aria-describedby');
+                this.$ulEle.sortable('disable');
+            }
+        }
+        else {
+            super.onPropertyChange(key, nv, ov);
+        }
+    }
+    onItemClick(evt, $listItem) {
+        let selectCount;
+        if (!$listItem.disableItem) {
+            this.firstSelectedItem = this.firstSelectedItem || $listItem;
+            // Setting selectCount value based number of items selected.
+            selectCount = isArray(this.selecteditem) ? this.selecteditem.length : (isObject(this.selecteditem) ? 1 : 0);
+            // Handling multiselect for mobile device
+            if (this.multiselect && isMobile()) {
+                if (this.checkSelectionLimit(selectCount) || $listItem.isActive) {
+                    this.toggleListItemSelection($listItem);
+                }
+                else {
+                    this.invokeEventCallback('selectionlimitexceed', { $event: evt });
+                }
+            }
+            else if ((evt.ctrlKey || evt.metaKey) && this.multiselect) {
+                if (this.checkSelectionLimit(selectCount) || $listItem.isActive) {
+                    this.firstSelectedItem = this.lastSelectedItem = $listItem;
+                    this.toggleListItemSelection($listItem);
+                }
+                else {
+                    this.invokeEventCallback('selectionlimitexceed', { $event: evt });
+                }
+            }
+            else if (evt.shiftKey && this.multiselect) {
+                let first = $listItem.context.index;
+                let last = this.firstSelectedItem.context.index;
+                // if first is greater than last, then swap values
+                if (first > last) {
+                    last = [first, first = last][0];
+                }
+                if (this.checkSelectionLimit(last - first)) {
+                    this.clearSelectedItems();
+                    this.listItems.forEach(($liItem) => {
+                        const index = $liItem.context.index;
+                        if (index >= first && index <= last) {
+                            this.toggleListItemSelection($liItem);
+                        }
+                    });
+                    this.lastSelectedItem = $listItem;
+                }
+                else {
+                    this.invokeEventCallback('selectionlimitexceed', { $event: evt });
+                }
+            }
+            else {
+                if (!$listItem.isActive || selectCount > 1) {
+                    this.clearSelectedItems();
+                    this.toggleListItemSelection($listItem);
+                    this.firstSelectedItem = this.lastSelectedItem = $listItem;
+                }
+            }
+            $appDigest();
+        }
+    }
+    // Empty the list content on clear
+    clear() {
+        this.updateFieldDefs([]);
+    }
+    /**
+     * deselects item in the list.
+     * @param val: index | model of the list item.
+     */
+    deselectItem(val) {
+        const listItem = this.getItemRefByIndexOrModel(val);
+        if (listItem && listItem.isActive) {
+            this.toggleListItemSelection(listItem);
+        }
+    }
+    /**
+     * selects item in the list.
+     * @param val: index | model of the list item.
+     */
+    selectItem(val, statePersistenceTriggered) {
+        const listItem = this.getItemRefByIndexOrModel(val);
+        if (!listItem) {
+            return;
+        }
+        if (!listItem.isActive) {
+            this.toggleListItemSelection(listItem, statePersistenceTriggered);
+        }
+        // focus the element.
+        listItem.nativeElement.focus();
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.handleHeaderClick = noop;
+        setTimeout(() => {
+            this.debouncedFetchNextDatasetOnScroll = this.paginationService.debouncedFetchNextDatasetOnScroll(this.dataNavigator, DEBOUNCE_TIMES.PAGINATION_DEBOUNCE_TIME, this);
+        }, 0);
+        this._items = [];
+        this.fieldDefs = [];
+        this.reorderProps = {
+            minIndex: null,
+            maxIndex: null
+        };
+    }
+    ngAfterViewInit() {
+        this.promiseResolverFn();
+        this.propsInitPromise.then(() => {
+            super.ngAfterViewInit();
+            this.setUpCUDHandlers();
+            this.selectedItemWidgets = this.multiselect ? [] : {};
+            var ele = $(this.nativeElement).find('.app-livelist-container');
+            if (this.enablereorder && !this.groupby) {
+                if (ele) {
+                    ele.attr('aria-describedby', this.titleId);
+                }
+                this.configureDnD();
+            }
+            if (!this.enablereorder) {
+                if (ele) {
+                    ele.removeAttr('aria-describedby');
+                }
+            }
+            if (this.groupby && this.collapsible) {
+                this.handleHeaderClick = handleHeaderClick;
+                this.toggleAllHeaders = toggleAllHeaders.bind(undefined, this);
+            }
+            setListClass(this);
+        });
+        this.setupHandlers();
+        const $ul = this.nativeElement.querySelector('ul.app-livelist-container');
+        styler($ul, this, APPLY_STYLES_TYPE.SCROLLABLE_CONTAINER);
+        if (this.enablereorder) {
+            if ($ul) {
+                $ul.setAttribute('aria-describedby', this.titleId);
+            }
+        }
+        if (!this.enablereorder) {
+            if ($ul) {
+                $ul.removeAttribute('aria-describedby');
+            }
+        }
+        if (isMobileApp() && $ul.querySelector('.app-list-item-action-panel')) {
+            this._listAnimator = new ListAnimator(this);
+        }
+    }
+    ngOnDestroy() {
+        if (this._listAnimator && this._listAnimator.$btnSubscription) {
+            this._listAnimator.$btnSubscription.unsubscribe();
+        }
+        this._listenerDestroyers.forEach(d => d && d());
+        super.ngOnDestroy();
+    }
+    ngOnDetach() {
+        super.ngOnDetach();
+        this._pageLoad = true;
+    }
+    handleEvent(node, eventName, eventCallback, locals) {
+        // tap and doubleTap events are not getting propagated.So, using mouse events instead.
+        const touchToMouse = {
+            tap: 'click',
+            doubletap: 'dblclick'
+        };
+        if (includes(['click', 'tap', 'dblclick', 'doubletap'], eventName)) {
+            this.eventManager.addEventListener(this.nativeElement, touchToMouse[eventName] || eventName, (evt) => {
+                const target = $(evt.target).closest('.app-list-item');
+                if (target.length) {
+                    const listItemContext = target.data('listItemContext');
+                    if (!listItemContext.disableItem) {
+                        this.invokeEventCallback(eventName, {
+                            widget: listItemContext,
+                            $event: evt,
+                            item: listItemContext.item
+                        });
+                    }
+                }
+            });
+        }
+    }
+    getConfiguredState() {
+        const mode = this.statePersistence.computeMode(this.statehandler);
+        return mode && mode.toLowerCase();
+    }
+    handleStateParams(options) {
+        if (this._pageLoad && this.getConfiguredState() !== 'none') {
+            this._pageLoad = false;
+            const widgetState = this.statePersistence.getWidgetState(this);
+            if (get(widgetState, 'pagination')) {
+                options.options = options.options || {};
+                options.options.page = widgetState.pagination;
+            }
+            if (get(widgetState, 'selectedItem')) {
+                this._selectedItemsExist = true;
+            }
+        }
+    }
+    triggerWMEvent(eventName, item) {
+        $invokeWatchers(true);
+        // If we have multiselect for the livelist(List with form template), in run mode deleting a record is getting failed. Becuase the selecteditem will be array of objects. So consider the last object.
+        let row = this.multiselect ? last(this.selecteditem) : this.selecteditem;
+        if (item) {
+            row = item;
+        }
+        this.app.notify('wm-event', { eventName, widgetName: this.name, row: row });
+    }
+    resetNavigation() {
+        this.showNavigation = false;
+        this.navControls = undefined;
+        this.infScroll = false;
+        this.onDemandLoad = false;
+    }
+    enableBasicNavigation() {
+        this.navControls = NAVIGATION_TYPE.BASIC;
+        this.showNavigation = true;
+    }
+    enableInlineNavigation() {
+        this.navControls = NAVIGATION_TYPE.INLINE;
+    }
+    enableClassicNavigation() {
+        this.navControls = NAVIGATION_TYPE.CLASSIC;
+        this.showNavigation = true;
+    }
+    enablePagerNavigation() {
+        this.navControls = NAVIGATION_TYPE.PAGER;
+        this.showNavigation = true;
+    }
+    setNavigationTypeNone() {
+        this.navControls = NAVIGATION_TYPE.NONE;
+        this.showNavigation = false;
+    }
+    enableInfiniteScroll() {
+        this.infScroll = true;
+    }
+    enableOnDemandLoad() {
+        this.onDemandLoad = true;
+        this.showNavigation = true;
+    }
+    /**
+     * Sets Navigation type for the list.
+     * @param type
+     */
+    onNavigationTypeChange(type) {
+        this.resetNavigation();
+        switch (type) {
+            case NAVIGATION_TYPE.BASIC:
+                this.enableBasicNavigation();
+                break;
+            case NAVIGATION_TYPE.INLINE:
+                this.enableInlineNavigation();
+                break;
+            case NAVIGATION_TYPE.ADVANCED:
+            case NAVIGATION_TYPE.CLASSIC:
+                this.enableClassicNavigation();
+                break;
+            case NAVIGATION_TYPE.PAGER:
+                this.enablePagerNavigation();
+                break;
+            case NAVIGATION_TYPE.NONE:
+                this.setNavigationTypeNone();
+                break;
+            case NAVIGATION_TYPE.SCROLL:
+                this.enableInfiniteScroll();
+                break;
+            case NAVIGATION_TYPE.ONDEMAND:
+                this.enableOnDemandLoad();
+                break;
+        }
+    }
+    /**
+     * Update fieldDefs property, fieldDefs is the model of the List Component.
+     * fieldDefs is an Array type.
+     * @param newVal
+     */
+    updateFieldDefs(newVal) {
+        if (this.infScroll || this.onDemandLoad) {
+            [this.fieldDefs, this.currentPage] = this.paginationService.updateFieldsOnPagination(this, newVal);
+        }
+        else {
+            this.fieldDefs = newVal;
+        }
+        if (this.orderby) {
+            this.fieldDefs = getOrderedDataset(this.fieldDefs, this.orderby);
+        }
+        if (this.groupby) {
+            this.groupedData = groupData(this, this.fieldDefs, this.groupby, this.match, this.orderby, this.dateformat, this.datePipe, undefined, this.appDefaults);
+        }
+        if (!this.fieldDefs.length) {
+            this.noDataFound = true;
+            this.selecteditem = undefined;
+        }
+        $appDigest();
+        this.listItems.setDirty();
+    }
+    onDataChange(newVal) {
+        // Check for newVal is not empty
+        if (!isEmpty(newVal)) {
+            this.noDataFound = false;
+            this.isDataChanged = true;
+            if (this.datasource && this.datasource.execute(DataSource.Operation.IS_API_AWARE)) {
+                // clone the the data in case of live and service variables to prevent the two-way binding for these variables.
+                newVal = cloneDeep(newVal);
+            }
+            if (isObject(newVal) && !isArray(newVal)) {
+                newVal = isEmpty(newVal) ? [] : [newVal];
+            }
+            if (isString(newVal)) {
+                newVal = newVal.split(',');
+            }
+            // if the page number is greater than 1 on initial load then we render the first page.
+            if (this.datasource && this.datasource.owner === 'App' && (this.infScroll || this.onDemandLoad) && !this.currentPage && this.datasource.execute(DataSource.Operation.GET_PAGING_OPTIONS).number > 0) {
+                newVal = this.datasource.execute(DataSource.Operation.LIST_RECORDS, {
+                    'page': 1
+                });
+            }
+            if (isArray(newVal)) {
+                if (newVal.length) {
+                    this.invokeEventCallback('beforedatarender', { $data: newVal });
+                }
+                this.updateFieldDefs(newVal);
+            }
+        }
+        else {
+            this.updateFieldDefs([]);
+        }
+    }
+    // Updates the dataSource when pagination is enabled for the Component.
+    setupDataSource() {
+        const dataNavigator = this.dataNavigator;
+        dataNavigator.options = {
+            maxResults: this.pagesize || 20
         };
         this.dataNavigatorWatched = true;
         if (this.navigatorResultWatch) {
@@ -973,13 +1341,13 @@ class ListComponent extends StylableComponent {
         this.dataNavigator.setBindDataSet(this.binddataset, this.viewParent, datasetBoundExpr ? this.context : this.datasource, this.dataset, this.binddatasource, datasetBoundExpr, this.statehandler);
     }
     onDataSetChange(newVal) {
-        if (_.get(this.datasource, 'category') === 'wm.Variable' && this.getConfiguredState() !== 'none' && this._pageLoad) {
+        if (get(this.datasource, 'category') === 'wm.Variable' && this.getConfiguredState() !== 'none' && this._pageLoad) {
             const widgetState = this.statePersistence.getWidgetState(this);
             this._pageLoad = false;
-            if (_.get(widgetState, 'pagination')) {
+            if (get(widgetState, 'pagination')) {
                 this.dataNavigator.pageChanged({ page: widgetState.pagination }, true);
             }
-            if (_.get(widgetState, 'selectedItem')) {
+            if (get(widgetState, 'selectedItem')) {
                 this._selectedItemsExist = true;
             }
         }
@@ -1014,29 +1382,29 @@ class ListComponent extends StylableComponent {
     getListItemByModel(listModel) {
         return this.listItems.find((listItem) => {
             let itemObj = listItem.item;
-            if (this.groupby && !_.has(listModel, '_groupIndex')) {
+            if (this.groupby && !has(listModel, '_groupIndex')) {
                 // If groupby is enabled, item contains _groupIndex property which should be excluded while comparing model.
-                itemObj = _.clone(itemObj);
+                itemObj = clone(itemObj);
                 delete itemObj._groupIndex;
             }
-            if (_.isEqual(itemObj, listModel)) {
+            if (isEqual(itemObj, listModel)) {
                 return true;
             }
         }) || null;
     }
     updateSelectedItemsWidgets(statePersistenceTriggered) {
         let obj = {}, widgetState;
-        const pageNum = _.get(this.dataNavigator, 'dn.currentPage') || 1;
+        const pageNum = get(this.dataNavigator, 'dn.currentPage') || 1;
         if (this.getConfiguredState() !== 'none') {
             // remove previously configured selected items for current page and construct new ones later below.
             widgetState = this.statePersistence.getWidgetState(this) || {};
-            if (_.get(widgetState, 'selectedItem')) {
+            if (get(widgetState, 'selectedItem')) {
                 // when multiselect is on and an item is selected without pressing CTRL, previously selected items in state should be empty.
                 if (this.multiselect && this.selecteditem.length === 1) {
                     widgetState.selectedItem = [];
                 }
                 else {
-                    _.remove(widgetState.selectedItem, function (selectedItem) {
+                    remove(widgetState.selectedItem, function (selectedItem) {
                         return selectedItem.page === pageNum;
                     });
                 }
@@ -1054,8 +1422,8 @@ class ListComponent extends StylableComponent {
                     this.selectedItemWidgets = item.currentItemWidgets;
                 }
                 obj = { page: pageNum, index: index };
-                if (_.get(widgetState, 'selectedItem') && this.multiselect) {
-                    if (!_.some(widgetState.selectedItem, obj)) {
+                if (get(widgetState, 'selectedItem') && this.multiselect) {
+                    if (!some(widgetState.selectedItem, obj)) {
                         widgetState.selectedItem.push(obj);
                     }
                 }
@@ -1083,13 +1451,13 @@ class ListComponent extends StylableComponent {
         // item is not allowed to get selected if it is disabled.
         if ($listItem && !$listItem.disableItem) {
             let item = $listItem.item;
-            if (this.groupby && _.has(item, '_groupIndex')) {
+            if (this.groupby && has(item, '_groupIndex')) {
                 // If groupby is enabled, item contains _groupIndex property which should be excluded from selecteditem.
-                item = _.clone(item);
+                item = clone(item);
                 delete item._groupIndex;
             }
             if ($listItem.isActive) {
-                this._items = _.pullAllWith(this._items, [item], _.isEqual);
+                this._items = pullAllWith(this._items, [item], isEqual);
                 $listItem.isActive = false;
             }
             else {
@@ -1117,10 +1485,10 @@ class ListComponent extends StylableComponent {
         }
         if (this.isDataChanged && this.getConfiguredState() !== 'none' && listItems.length && this._selectedItemsExist) {
             const widgetState = this.statePersistence.getWidgetState(this);
-            if (_.get(widgetState, 'selectedItem')) {
+            if (get(widgetState, 'selectedItem')) {
                 this._selectedItemsExist = false;
-                const selectedItemsLength = _.isArray(this.selecteditem) ? this.selecteditem.length : _.toNumber(!_.isEmpty(this.selecteditem));
-                const currentPage = _.get(this.dataNavigator, 'dn.currentPage') || 1;
+                const selectedItemsLength = isArray(this.selecteditem) ? this.selecteditem.length : toNumber(!isEmpty(this.selecteditem));
+                const currentPage = get(this.dataNavigator, 'dn.currentPage') || 1;
                 widgetState.pagination = widgetState.pagination || 1;
                 // to prevent item selection from being triggered more than once
                 if (selectedItemsLength !== widgetState.selectedItem.length && widgetState.pagination === currentPage) {
@@ -1132,7 +1500,7 @@ class ListComponent extends StylableComponent {
                 }
             }
         }
-        const selectedItems = _.isArray(this.selecteditem) ? this.selecteditem : [this.selecteditem];
+        const selectedItems = isArray(this.selecteditem) ? this.selecteditem : [this.selecteditem];
         this.firstSelectedItem = this.lastSelectedItem = null;
         // don't select first item if multi-select is enabled and at least item is already selected in the list.
         // don't select first item if state information has selected items
@@ -1171,24 +1539,15 @@ class ListComponent extends StylableComponent {
             else {
                 // In case of mobile app when modal exists, and list items height is greater than the modal content provide ccontainer a scrollable height
                 const modalBody = this.$element.closest('.modal-body');
-                const listHt = this.$element.find('ul').height();
-                const modalHt = window.innerHeight - 140;
-                if (isMobile() && modalBody.length && listHt > modalHt) {
-                    this.$element.css('height', modalHt + 'px');
-                }
-                this.paginationService.bindScrollEvt(this, '> ul', DEBOUNCE_TIMES.PAGINATION_DEBOUNCE_TIME);
-            }
-        }
-        this.isDataChanged = false;
-    }
-    triggerListItemSelection($el, $event) {
-        if ($el && $el[0]) {
-            const listItemContext = $el.data('listItemContext');
-            // Trigger click event only if the list item is from the corresponding list.
-            if (listItemContext.listComponent === this) {
-                this.onItemClick($event, listItemContext);
+                const listHt = this.$element.find('ul').height();
+                const modalHt = window.innerHeight - 140;
+                if (isMobile() && modalBody.length && listHt > modalHt) {
+                    this.$element.css('height', modalHt + 'px');
+                }
+                this.paginationService.bindScrollEvt(this, '> ul', DEBOUNCE_TIMES.PAGINATION_DEBOUNCE_TIME);
             }
         }
+        this.isDataChanged = false;
     }
     setupHandlers() {
         this.listItems.changes.subscribe(listItems => {
@@ -1228,344 +1587,99 @@ class ListComponent extends StylableComponent {
         // If ui is not present then it is called from drag and drop using keyboard
         const newIndex = ui === undefined ? presentIndex : ui.item.index();
         const oldIndex = this.$ulEle.data('oldIndex');
-        const minIndex = _.min([newIndex, oldIndex]);
-        const maxIndex = _.max([newIndex, oldIndex]);
-        const draggedItem = _.pullAt(data, oldIndex)[0];
+        const minIndex = min([newIndex, oldIndex]);
+        const maxIndex = max([newIndex, oldIndex]);
+        const draggedItem = pullAt(data, oldIndex)[0];
         // Modify the data list only if we find a draggedItem
-        if (draggedItem) {
-            if (this.getConfiguredState() !== 'none') {
-                this.statePersistence.removeWidgetState(this, 'selectedItem');
-            }
-            this.reorderProps.minIndex = _.min([minIndex, this.reorderProps.minIndex]);
-            this.reorderProps.maxIndex = _.max([maxIndex, this.reorderProps.maxIndex]);
-            data.splice(newIndex, 0, draggedItem);
-            this.cdRef.markForCheck();
-            this.cdRef.detectChanges();
-            const $changedItem = {
-                oldIndex: oldIndex,
-                newIndex: newIndex,
-                item: data[newIndex]
-            };
-            this.invokeEventCallback('reorder', { $event: evt, $data: data, $changedItem });
-            this.$ulEle.removeData('oldIndex');
-        }
-    }
-    // configures reordering the list items.
-    configureDnD() {
-        let appendTo;
-        const modalEl = $(document).find('.modal');
-        if (this.getAttr('height')) { // when height is applied to the list, append should be the ul's parent as scroll is applied to the parent
-            appendTo = 'parent';
-        }
-        else if (modalEl.length) { // In case of dialog, appendTo should be the modal ele
-            appendTo = modalEl[modalEl.length - 1];
-        }
-        else { // As default append to should be body
-            appendTo = 'body';
-        }
-        const options = isMobileApp() ? {} : {
-            appendTo: appendTo,
-        };
-        const $el = $(this.nativeElement);
-        this.$ulEle = $el.find('.app-livelist-container');
-        configureDnD(this.$ulEle, options, this.onReorderStart.bind(this), this.onUpdate.bind(this), this.onSort.bind(this));
-        this.$ulEle.droppable({ 'accept': '.app-list-item' });
-        if (isMobileApp()) {
-            this.$ulEle.sortable('disable');
-            this.$ulEle.on('touchstart', function (event) {
-                let self = this;
-                if (!self.touching) {
-                    if (self.touched) {
-                        clearTimeout(self.touched);
-                    }
-                    setTimeout(() => {
-                        //Prevent context menu on mobile (IOS/ANDROID)
-                        if (event.cancelable) {
-                            event.preventDefault();
-                        }
-                    }, 50);
-                    self.touched = setTimeout(() => {
-                        $(event.currentTarget).addClass('no-selection');
-                        //Enable draggable
-                        $(event.currentTarget).sortable('enable');
-                        //Set internal flag
-                        self.touching = true;
-                        //trigger touchstart again to enable draggable through touch punch
-                        $(self).trigger(event);
-                        //Choose preferred duration for taphold
-                    }, 350);
-                }
-            }).on('touchend', function (event) {
-                this.touching = false;
-                $(event.currentTarget).removeClass('no-selection');
-                //Disable draggable to enable default behaviour
-                $(event.currentTarget).sortable('disable');
-                clearTimeout(this.touched);
-            }).on('touchmove', function () {
-                clearTimeout(this.touched);
-            });
-        }
-    }
-    // returns true if the selection limit is reached.
-    checkSelectionLimit(count) {
-        return (!this.selectionlimit || count < this.selectionlimit);
-    }
-    // returns listitem reference by index value.
-    getListItemByIndex(index) {
-        return this.listItems.toArray()[index];
-    }
-    /**
-     * return index of an (listItemDirective) in the listItem
-     * @param {ListItemDirective} item
-     * @returns {number}
-     */
-    getListItemIndex(item) {
-        return this.listItems.toArray().indexOf(item);
-    }
-    // this method is called form other data widgets like table.
-    execute(operation, options) {
-        if ([DataSource.Operation.IS_API_AWARE, DataSource.Operation.IS_PAGEABLE, DataSource.Operation.SUPPORTS_SERVER_FILTER].includes(operation)) {
-            return false;
-        }
-        return this.datasource.execute(operation, options);
-    }
-    handleKeyDown($event, action) {
-        $event.stopPropagation();
-        if ($event.keyCode !== 13 && $event.keyCode !== 9 && !(($event.target.classList.contains('form-control') || $event.target.classList.contains('note-editable')) && $event.keyCode === 32)) {
-            $event.preventDefault();
-        }
-        const listItems = this.listItems;
-        let presentIndex = this.getListItemIndex(this.lastSelectedItem);
-        if (this.multiselect) {
-            const firstIndex = this.getListItemIndex(this.firstSelectedItem);
-            const selectCount = _.isArray(this.selecteditem) ? this.selecteditem.length : (_.isObject(this.selecteditem) ? 1 : 0);
-            if (action === 'selectPrev') {
-                if (presentIndex > 0) {
-                    if ((presentIndex <= firstIndex) && this.checkSelectionLimit(selectCount)) {
-                        this.lastSelectedItem = this.getListItemByIndex(presentIndex - 1);
-                        this.toggleListItemSelection(this.lastSelectedItem);
-                    }
-                    else if (presentIndex > firstIndex) {
-                        this.toggleListItemSelection(this.getListItemByIndex(presentIndex));
-                        this.lastSelectedItem = this.getListItemByIndex(presentIndex - 1);
-                    }
-                    else {
-                        this.invokeEventCallback('selectionlimitexceed', { $event });
-                    }
-                }
-            }
-            else if (action === 'selectNext') {
-                if (presentIndex < listItems.length - 1) {
-                    if ((presentIndex >= firstIndex) && this.checkSelectionLimit(selectCount)) {
-                        this.lastSelectedItem = this.getListItemByIndex(presentIndex + 1);
-                        this.toggleListItemSelection(this.lastSelectedItem);
-                    }
-                    else if (presentIndex < firstIndex) {
-                        this.toggleListItemSelection(this.getListItemByIndex(presentIndex));
-                        this.lastSelectedItem = this.getListItemByIndex(presentIndex + 1);
-                    }
-                    else {
-                        this.invokeEventCallback('selectionlimitexceed', { $event });
-                    }
-                }
-            }
-        }
-        if (action === 'focusPrev') {
-            if (this.isListElementMovable) {
-                presentIndex = presentIndex <= 0 ? 0 : (presentIndex);
-                if (presentIndex === 0) {
-                    return;
-                }
-                this.lastSelectedItem = this.getListItemByIndex(presentIndex);
-                const prevElt = this.getListItemByIndex(presentIndex - 1);
-                prevElt.nativeElement.before(this.lastSelectedItem.nativeElement);
-                this.lastSelectedItem.nativeElement.focus();
-                this.statePersistence.removeWidgetState(this, 'selectedItem');
-                const arr = this.listItems.toArray();
-                [arr[presentIndex - 1], arr[presentIndex]] = [arr[presentIndex], arr[presentIndex - 1]];
-                this.listItems.reset(arr);
-                this.currentIndex = presentIndex;
-                this.ariaText = "selected ";
-            }
-            else {
-                presentIndex = presentIndex <= 0 ? 0 : (presentIndex - 1);
-                this.lastSelectedItem = this.getListItemByIndex(presentIndex);
-                this.lastSelectedItem.nativeElement.focus();
-                this.currentIndex = presentIndex + 1;
-                this.ariaText = "selected ";
-            }
-        }
-        else if (action === 'focusNext') {
-            if (this.isListElementMovable) {
-                presentIndex = presentIndex < (listItems.length - 1) ? (presentIndex) : (listItems.length - 1);
-                if (presentIndex === this.listItems.length - 1) {
-                    return;
-                }
-                this.lastSelectedItem = this.getListItemByIndex(presentIndex);
-                const nextElt = this.getListItemByIndex(presentIndex + 1);
-                nextElt.nativeElement.after(this.lastSelectedItem.nativeElement);
-                this.lastSelectedItem.nativeElement.focus();
-                this.statePersistence.removeWidgetState(this, 'selectedItem');
-                const arr = this.listItems.toArray();
-                [arr[presentIndex], arr[presentIndex + 1]] = [arr[presentIndex + 1], arr[presentIndex]];
-                this.listItems.reset(arr);
-                this.currentIndex = presentIndex + 2;
-                this.ariaText = "selected ";
-            }
-            else {
-                presentIndex = presentIndex < (listItems.length - 1) ? (presentIndex + 1) : (listItems.length - 1);
-                this.lastSelectedItem = this.getListItemByIndex(presentIndex);
-                this.lastSelectedItem.nativeElement.focus();
-                this.currentIndex = presentIndex + 1;
-                this.ariaText = "selected ";
-            }
-        }
-        else if (action === 'select') {
-            // if the enter click is pressed on the item which is not the last selected item, the find the item from which the event is originated.
-            if (presentIndex === -1 || !$($event.target).closest(this.lastSelectedItem.nativeElement)) {
-                const $li = $($event.target).closest('li.app-list-item');
-                const $ul = $li.closest('ul.app-livelist-container');
-                presentIndex = $ul.find('li.app-list-item').index($li);
-            }
-            this.onItemClick($event, this.getListItemByIndex(presentIndex));
-        }
-        else if (action === 'space') {
-            if (!this.enablereorder) {
-                return;
-            }
-            this.isListElementMovable = !this.isListElementMovable;
-            this.onItemClick($event, this.getListItemByIndex(presentIndex));
-            this.currentIndex = presentIndex + 1;
-            if (this.isListElementMovable) {
-                this.ariaText = `Item ${this.currentIndex} grabbed, current position `;
-                this.$ulEle.data('oldIndex', presentIndex);
-            }
-            else {
-                this.ariaText = `Item ${this.currentIndex} dropped, final position `;
-                this.onUpdate($event, undefined, presentIndex);
-            }
-        }
-    }
-    onPropertyChange(key, nv, ov) {
-        if (key === 'dataset') {
-            if (!nv && this.binddatasource && !this.datasource) {
-                return;
-            }
-            this.onDataSetChange(nv);
-        }
-        else if (key === 'datasource') {
-            if (this.dataset) {
-                this.onDataSetChange(this.dataset);
-            }
-        }
-        else if (key === 'navigation') {
-            // Support for older projects where navigation type was advanced instead of classic
-            if (nv === 'Advanced') {
-                this.navigation = 'Classic';
-                return;
-            }
-            switchClass(this.nativeElement, nv, ov);
-            this.onNavigationTypeChange(nv);
-            if (this.dataNavigator) {
-                this.dataNavigator.navigationClass = this.paginationclass;
-            }
-        }
-        else if (key === 'itemsperrow') {
-            setListClass(this);
-        }
-        else if (key === 'tabindex') {
-            return;
-        }
-        else if (key === 'pulltorefresh' && nv) {
-            this.app.notify('pullToRefresh:enable');
-            this.subscribeToPullToRefresh();
-        }
-        else if (key === 'paginationclass') {
-            if (this.dataNavigator) {
-                // Adding setTimeout because in pagination component updateNavSize method is overriding navigationclass
-                setTimeout(() => this.dataNavigator.navigationClass = nv);
+        if (draggedItem) {
+            if (this.getConfiguredState() !== 'none') {
+                this.statePersistence.removeWidgetState(this, 'selectedItem');
             }
-        }
-        else if (key === 'pagesize') {
-            this.dataNavigator.options = {
-                maxResults: nv
+            this.reorderProps.minIndex = min([minIndex, this.reorderProps.minIndex]);
+            this.reorderProps.maxIndex = max([maxIndex, this.reorderProps.maxIndex]);
+            data.splice(newIndex, 0, draggedItem);
+            this.cdRef.markForCheck();
+            this.cdRef.detectChanges();
+            const $changedItem = {
+                oldIndex: oldIndex,
+                newIndex: newIndex,
+                item: data[newIndex]
             };
-            this.dataNavigator.widget.maxResults = nv;
-            this.dataNavigator.maxResults = nv;
+            this.invokeEventCallback('reorder', { $event: evt, $data: data, $changedItem });
+            this.$ulEle.removeData('oldIndex');
         }
-        else if (key === 'enablereorder') {
-            if (nv && this.$ulEle) {
-                this.$ulEle.attr('aria-describedby', this.titleId);
-                this.configureDnD();
-                this.$ulEle.sortable('enable');
-            }
-            else if (this.$ulEle && !nv) {
-                this.$ulEle.removeAttr('aria-describedby');
-                this.$ulEle.sortable('disable');
-            }
+    }
+    // configures reordering the list items.
+    configureDnD() {
+        let appendTo;
+        const modalEl = $(document).find('.modal');
+        if (this.getAttr('height')) { // when height is applied to the list, append should be the ul's parent as scroll is applied to the parent
+            appendTo = 'parent';
         }
-        else {
-            super.onPropertyChange(key, nv, ov);
+        else if (modalEl.length) { // In case of dialog, appendTo should be the modal ele
+            appendTo = modalEl[modalEl.length - 1];
         }
-    }
-    onItemClick(evt, $listItem) {
-        let selectCount;
-        if (!$listItem.disableItem) {
-            this.firstSelectedItem = this.firstSelectedItem || $listItem;
-            // Setting selectCount value based number of items selected.
-            selectCount = _.isArray(this.selecteditem) ? this.selecteditem.length : (_.isObject(this.selecteditem) ? 1 : 0);
-            // Handling multiselect for mobile device
-            if (this.multiselect && isMobile()) {
-                if (this.checkSelectionLimit(selectCount) || $listItem.isActive) {
-                    this.toggleListItemSelection($listItem);
-                }
-                else {
-                    this.invokeEventCallback('selectionlimitexceed', { $event: evt });
-                }
-            }
-            else if ((evt.ctrlKey || evt.metaKey) && this.multiselect) {
-                if (this.checkSelectionLimit(selectCount) || $listItem.isActive) {
-                    this.firstSelectedItem = this.lastSelectedItem = $listItem;
-                    this.toggleListItemSelection($listItem);
-                }
-                else {
-                    this.invokeEventCallback('selectionlimitexceed', { $event: evt });
-                }
-            }
-            else if (evt.shiftKey && this.multiselect) {
-                let first = $listItem.context.index;
-                let last = this.firstSelectedItem.context.index;
-                // if first is greater than last, then swap values
-                if (first > last) {
-                    last = [first, first = last][0];
-                }
-                if (this.checkSelectionLimit(last - first)) {
-                    this.clearSelectedItems();
-                    this.listItems.forEach(($liItem) => {
-                        const index = $liItem.context.index;
-                        if (index >= first && index <= last) {
-                            this.toggleListItemSelection($liItem);
+        else { // As default append to should be body
+            appendTo = 'body';
+        }
+        const options = isMobileApp() ? {} : {
+            appendTo: appendTo,
+        };
+        const $el = $(this.nativeElement);
+        this.$ulEle = $el.find('.app-livelist-container');
+        configureDnD(this.$ulEle, options, this.onReorderStart.bind(this), this.onUpdate.bind(this), this.onSort.bind(this));
+        this.$ulEle.droppable({ 'accept': '.app-list-item' });
+        if (isMobileApp()) {
+            this.$ulEle.sortable('disable');
+            this.$ulEle.on('touchstart', function (event) {
+                let self = this;
+                if (!self.touching) {
+                    if (self.touched) {
+                        clearTimeout(self.touched);
+                    }
+                    setTimeout(() => {
+                        //Prevent context menu on mobile (IOS/ANDROID)
+                        if (event.cancelable) {
+                            event.preventDefault();
                         }
-                    });
-                    this.lastSelectedItem = $listItem;
-                }
-                else {
-                    this.invokeEventCallback('selectionlimitexceed', { $event: evt });
-                }
-            }
-            else {
-                if (!$listItem.isActive || selectCount > 1) {
-                    this.clearSelectedItems();
-                    this.toggleListItemSelection($listItem);
-                    this.firstSelectedItem = this.lastSelectedItem = $listItem;
+                    }, 50);
+                    self.touched = setTimeout(() => {
+                        $(event.currentTarget).addClass('no-selection');
+                        //Enable draggable
+                        $(event.currentTarget).sortable('enable');
+                        //Set internal flag
+                        self.touching = true;
+                        //trigger touchstart again to enable draggable through touch punch
+                        $(self).trigger(event);
+                        //Choose preferred duration for taphold
+                    }, 350);
                 }
-            }
-            $appDigest();
+            }).on('touchend', function (event) {
+                this.touching = false;
+                $(event.currentTarget).removeClass('no-selection');
+                //Disable draggable to enable default behaviour
+                $(event.currentTarget).sortable('disable');
+                clearTimeout(this.touched);
+            }).on('touchmove', function () {
+                clearTimeout(this.touched);
+            });
         }
     }
-    // Empty the list content on clear
-    clear() {
-        this.updateFieldDefs([]);
+    // returns true if the selection limit is reached.
+    checkSelectionLimit(count) {
+        return (!this.selectionlimit || count < this.selectionlimit);
+    }
+    // returns listitem reference by index value.
+    getListItemByIndex(index) {
+        return this.listItems.toArray()[index];
+    }
+    /**
+     * return index of an (listItemDirective) in the listItem
+     * @param {ListItemDirective} item
+     * @returns {number}
+     */
+    getListItemIndex(item) {
+        return this.listItems.toArray().indexOf(item);
     }
     /**
      *  Returns ListItem Reference based on the input provided.
@@ -1582,52 +1696,9 @@ class ListComponent extends StylableComponent {
         }
         return listItem;
     }
-    /**
-     * deselects item in the list.
-     * @param val: index | model of the list item.
-     */
-    deselectItem(val) {
-        const listItem = this.getItemRefByIndexOrModel(val);
-        if (listItem && listItem.isActive) {
-            this.toggleListItemSelection(listItem);
-        }
-    }
-    /**
-     * selects item in the list.
-     * @param val: index | model of the list item.
-     */
-    selectItem(val, statePersistenceTriggered) {
-        const listItem = this.getItemRefByIndexOrModel(val);
-        if (!listItem) {
-            return;
-        }
-        if (!listItem.isActive) {
-            this.toggleListItemSelection(listItem, statePersistenceTriggered);
-        }
-        // focus the element.
-        listItem.nativeElement.focus();
-    }
     beforePaginationChange($event, $index) {
         this.invokeEventCallback('paginationchange', { $event, $index });
     }
-    handleEvent(node, eventName, eventCallback, locals) {
-        // tap and doubleTap events are not getting propagated.So, using mouse events instead.
-        const touchToMouse = {
-            tap: 'click',
-            doubletap: 'dblclick'
-        };
-        if (_.includes(['click', 'tap', 'dblclick', 'doubletap'], eventName)) {
-            this.eventManager.addEventListener(this.nativeElement, touchToMouse[eventName] || eventName, (evt) => {
-                const target = $(evt.target).closest('.app-list-item');
-                if (target.length) {
-                    const listItemContext = target.data('listItemContext');
-                    if (!listItemContext.disableItem) {
-                        this.invokeEventCallback(eventName, { widget: listItemContext, $event: evt, item: listItemContext.item });
-                    }
-                }
-            });
-        }
-    }
     // Invoke the datasource variable by default when pulltorefresh event is not specified.
     subscribeToPullToRefresh() {
         this._listenerDestroyers.push(this.app.subscribe('pulltorefresh', () => {
@@ -1636,19 +1707,6 @@ class ListComponent extends StylableComponent {
             }
         }));
     }
-    ngOnInit() {
-        super.ngOnInit();
-        this.handleHeaderClick = noop;
-        setTimeout(() => {
-            this.debouncedFetchNextDatasetOnScroll = this.paginationService.debouncedFetchNextDatasetOnScroll(this.dataNavigator, DEBOUNCE_TIMES.PAGINATION_DEBOUNCE_TIME, this);
-        }, 0);
-        this._items = [];
-        this.fieldDefs = [];
-        this.reorderProps = {
-            minIndex: null,
-            maxIndex: null
-        };
-    }
     setUpCUDHandlers() {
         const $addItem = document.getElementsByClassName("add-list-item")[0];
         if ($addItem) {
@@ -1658,58 +1716,6 @@ class ListComponent extends StylableComponent {
             });
         }
     }
-    ngAfterViewInit() {
-        this.promiseResolverFn();
-        this.propsInitPromise.then(() => {
-            super.ngAfterViewInit();
-            this.setUpCUDHandlers();
-            this.selectedItemWidgets = this.multiselect ? [] : {};
-            var ele = $(this.nativeElement).find('.app-livelist-container');
-            if (this.enablereorder && !this.groupby) {
-                if (ele) {
-                    ele.attr('aria-describedby', this.titleId);
-                }
-                this.configureDnD();
-            }
-            if (!this.enablereorder) {
-                if (ele) {
-                    ele.removeAttr('aria-describedby');
-                }
-            }
-            if (this.groupby && this.collapsible) {
-                this.handleHeaderClick = handleHeaderClick;
-                this.toggleAllHeaders = toggleAllHeaders.bind(undefined, this);
-            }
-            setListClass(this);
-        });
-        this.setupHandlers();
-        const $ul = this.nativeElement.querySelector('ul.app-livelist-container');
-        styler($ul, this, APPLY_STYLES_TYPE.SCROLLABLE_CONTAINER);
-        if (this.enablereorder) {
-            if ($ul) {
-                $ul.setAttribute('aria-describedby', this.titleId);
-            }
-        }
-        if (!this.enablereorder) {
-            if ($ul) {
-                $ul.removeAttribute('aria-describedby');
-            }
-        }
-        if (isMobileApp() && $ul.querySelector('.app-list-item-action-panel')) {
-            this._listAnimator = new ListAnimator(this);
-        }
-    }
-    ngOnDestroy() {
-        if (this._listAnimator && this._listAnimator.$btnSubscription) {
-            this._listAnimator.$btnSubscription.unsubscribe();
-        }
-        this._listenerDestroyers.forEach(d => d && d());
-        super.ngOnDestroy();
-    }
-    ngOnDetach() {
-        super.ngOnDetach();
-        this._pageLoad = true;
-    }
     static { this.ɵfac = function ListComponent_Factory(t) { return new (t || ListComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.ToDatePipe), i0.ɵɵdirectiveInject(i2.App), i0.ɵɵdirectiveInject(i2.AppDefaults), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵinjectAttribute('itemclass.bind'), i0.ɵɵinjectAttribute('disableitem.bind'), i0.ɵɵinjectAttribute('dataset.bind'), i0.ɵɵinjectAttribute('datasource.bind'), i0.ɵɵinjectAttribute('mouseenter.event'), i0.ɵɵinjectAttribute('mouseleave.event'), i0.ɵɵdirectiveInject(i2.StatePersistence), i0.ɵɵdirectiveInject(i2.PaginationService), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ListComponent, selectors: [["div", "wmList", ""]], contentQueries: function ListComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuery(dirIndex, _c0, 5);
@@ -1821,7 +1827,7 @@ class ListComponent extends StylableComponent {
             type: ViewChildren,
             args: [ListItemDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ListComponent, { className: "ListComponent", filePath: "list.component.ts", lineNumber: 63 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ListComponent, { className: "ListComponent", filePath: "list.component.ts", lineNumber: 91 }); })();
 
 const components = [
     ListComponent,