@wavemaker/app-ng-runtime 11.8.0-next.141670 → 11.8.0-next.141671

package/components/data/list/bundles/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@wm/components/base'), require('@wm/components/data/pagination'), require('@wm/core'), require('@wm/components/input'), require('rxjs'), require('@swipey')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@wm/components/base', '@wm/components/data/pagination', '@wm/core', '@wm/components/input', 'rxjs', '@swipey'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.data = global.wm.components.data || {}, global.wm.components.data.list = {}), global.ng.core, global.ng.common, global.wm.components.base, global.wm.components.data.pagination, global.wm.core, global.wm.components.input, global.rxjs, global.swipey));
-})(this, (function (exports, i0, i1$1, i1, i2$1, i2, input, rxjs, _swipey) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@wm/components/base'), require('@wm/components/data/pagination'), require('@wm/core'), require('@wm/components/input'), require('rxjs'), require('@swipey'), require('lodash-es')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@wm/components/base', '@wm/components/data/pagination', '@wm/core', '@wm/components/input', 'rxjs', '@swipey', 'lodash-es'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.data = global.wm.components.data || {}, global.wm.components.data.list = {}), global.ng.core, global.ng.common, global.wm.components.base, global.wm.components.data.pagination, global.wm.core, global.wm.components.input, global.rxjs, global.swipey, global._));
+})(this, (function (exports, i0, i1$1, i1, i2$1, i2, input, rxjs, _swipey, lodashEs) { 'use strict';
 
     function _interopNamespaceDefault(e) {
         var n = Object.create(null);
@@ -183,15 +183,15 @@
                 i0__namespace.ɵɵclassProp("active", ctx.isActive)("disable-item", ctx.disableItem);
             } }, inputs: { wmListItem: "wmListItem" }, exportAs: ["listItemRef"] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ListItemDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ListItemDirective, [{
             type: i0.Directive,
             args: [{
                     selector: '[wmListItem]',
                     exportAs: 'listItemRef'
                 }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: i0__namespace.ElementRef }, { type: i2__namespace.App }, { type: ListComponent, decorators: [{
+        }], () => [{ type: i0__namespace.Injector }, { type: i0__namespace.ElementRef }, { type: i2__namespace.App }, { type: ListComponent, decorators: [{
                     type: i0.Optional
-                }] }]; }, { isActive: [{
+                }] }], { isActive: [{
                 type: i0.HostBinding,
                 args: ['class.active']
             }], disableItem: [{
@@ -233,7 +233,7 @@
         }
         // Returns the total width occupied by all the children inside the element
         computeTotalChildrenWidth($ele) {
-            return _.reduce($ele.children(), (totalWidth, el) => {
+            return lodashEs.reduce($ele.children(), (totalWidth, el) => {
                 return totalWidth + $(el).outerWidth();
             }, 0);
         }
@@ -242,7 +242,8 @@
             const totalWidth = this.computeTotalChildrenWidth($ele);
             const reverse = this.position === 'right';
             let d = 0;
-            return _.map($ele.children(), e => {
+            // @ts-ignore
+            return lodashEs.map($ele.children(), e => {
                 const f = (totalWidth - d) / totalWidth;
                 d += $(e).outerWidth();
                 return reverse ? f : (d / totalWidth);
@@ -438,30 +439,32 @@
     const _c1 = ["listLeftActionTemplate"];
     const _c2 = ["listRightActionTemplate"];
     const _c3 = ["wmList", ""];
+    const _c4 = a0 => ({ "disabled": a0 });
+    const _c5 = (a0, a1, a2, a3, a4, a5) => ({ item: a0, $index: a1, itemRef: a2, $first: a3, $last: a4, currentItemWidgets: a5 });
+    const _c6 = a0 => ({ "collapsible-content": a0 });
     function ListComponent_div_0_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "div", 13)(1, "h3", 14)(2, "div", 15);
-        i0__namespace.ɵɵelement(3, "i", 16);
+        i0__namespace.ɵɵelementStart(0, "div", 14)(1, "h3", 15)(2, "div", 16);
+        i0__namespace.ɵɵelement(3, "i", 17);
         i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵelementStart(4, "div", 15);
-        i0__namespace.ɵɵelement(5, "div", 17)(6, "div", 18);
+        i0__namespace.ɵɵelementStart(4, "div", 16);
+        i0__namespace.ɵɵelement(5, "div", 18)(6, "div", 19);
         i0__namespace.ɵɵelementEnd()()();
     } if (rf & 2) {
-        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        const ctx_r1 = i0__namespace.ɵɵnextContext();
         i0__namespace.ɵɵadvance(3);
-        i0__namespace.ɵɵclassMapInterpolate1("app-icon panel-icon ", ctx_r0.iconclass, "");
-        i0__namespace.ɵɵproperty("hidden", !ctx_r0.iconclass);
+        i0__namespace.ɵɵclassMapInterpolate1("app-icon panel-icon ", ctx_r1.iconclass, "");
+        i0__namespace.ɵɵproperty("hidden", !ctx_r1.iconclass);
         i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵproperty("innerHTML", ctx_r0.title, i0__namespace.ɵɵsanitizeHtml);
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵproperty("innerHTML", ctx_r0.subheading, i0__namespace.ɵɵsanitizeHtml);
+        i0__namespace.ɵɵproperty("innerHTML", ctx_r1.title, i0__namespace.ɵɵsanitizeHtml);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("innerHTML", ctx_r1.subheading, i0__namespace.ɵɵsanitizeHtml);
     } }
-    const _c4 = function (a0) { return { "disabled": a0 }; };
     function ListComponent_div_1_Template(rf, ctx) { if (rf & 1) {
-        const _r13 = i0__namespace.ɵɵgetCurrentView();
-        i0__namespace.ɵɵelementStart(0, "div", 19)(1, "ul", 20)(2, "li", 21)(3, "a", 22);
-        i0__namespace.ɵɵlistener("click", function ListComponent_div_1_Template_a_click_3_listener($event) { i0__namespace.ɵɵrestoreView(_r13); const ctx_r12 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r12.dataNavigator.navigatePage("prev", $event)); });
-        i0__namespace.ɵɵelement(4, "i", 23);
-        i0__namespace.ɵɵelementStart(5, "span", 24);
+        const _r3 = i0__namespace.ɵɵgetCurrentView();
+        i0__namespace.ɵɵelementStart(0, "div", 20)(1, "ul", 21)(2, "li", 22)(3, "a", 23);
+        i0__namespace.ɵɵlistener("click", function ListComponent_div_1_Template_a_click_3_listener($event) { i0__namespace.ɵɵrestoreView(_r3); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.dataNavigator.navigatePage("prev", $event)); });
+        i0__namespace.ɵɵelement(4, "i", 24);
+        i0__namespace.ɵɵelementStart(5, "span", 25);
         i0__namespace.ɵɵtext(6);
         i0__namespace.ɵɵelementEnd()()()()();
     } if (rf & 2) {
@@ -469,108 +472,107 @@
         i0__namespace.ɵɵattribute("aria-disabled", ctx_r1.dataNavigator.isDisablePrevious);
         i0__namespace.ɵɵadvance(2);
         i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(4, _c4, ctx_r1.dataNavigator ? ctx_r1.dataNavigator.isDisablePrevious : true));
-        i0__namespace.ɵɵadvance(1);
+        i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵattribute("aria-disabled", ctx_r1.dataNavigator.isDisablePrevious);
         i0__namespace.ɵɵadvance(3);
         i0__namespace.ɵɵtextInterpolate1("Go to Previous page ", ctx_r1.dataNavigator.isDisablePrevious ? ", Disabled" : "", "");
     } }
     function ListComponent_div_2_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "div", 25);
+        i0__namespace.ɵɵelementStart(0, "div", 26);
         i0__namespace.ɵɵtext(1);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const ctx_r2 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵtextInterpolate1(" ", "Page " + ctx_r2.dataNavigator.dn.currentPage + " of " + ctx_r2.dataNavigator.pageCount, "");
+        const ctx_r1 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵtextInterpolate1(" ", "Page " + ctx_r1.dataNavigator.dn.currentPage + " of " + ctx_r1.dataNavigator.pageCount, "");
     } }
     function ListComponent_div_4_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "div", 26);
+        i0__namespace.ɵɵelementStart(0, "div", 27);
         i0__namespace.ɵɵtext(1, " Press space bar to toggle drag drop mode, use arrow keys to move selected elements. ");
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const ctx_r3 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵpropertyInterpolate("id", ctx_r3.titleId);
+        const ctx_r1 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵpropertyInterpolate("id", ctx_r1.titleId);
     } }
     function ListComponent_div_5_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "div", 27);
+        i0__namespace.ɵɵelementStart(0, "div", 28);
         i0__namespace.ɵɵtext(1);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const ctx_r4 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵtextInterpolate1(" ", ctx_r4.ariaText + ctx_r4.currentIndex + " of " + ctx_r4.listItems.length, " ");
+        const ctx_r1 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵtextInterpolate1(" ", ctx_r1.ariaText + ctx_r1.currentIndex + " of " + ctx_r1.listItems.length, " ");
     } }
-    const _c5 = function (a0, a1, a2, a3, a4, a5) { return { item: a0, $index: a1, itemRef: a2, $first: a3, $last: a4, currentItemWidgets: a5 }; };
     function ListComponent_ng_template_7_li_0_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "li", 29, 30);
+        i0__namespace.ɵɵelementStart(0, "li", 30, 1);
         i0__namespace.ɵɵelementContainer(2, 31);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const item_r15 = ctx.$implicit;
-        const $index_r16 = ctx.index;
-        const $first_r17 = ctx.first;
-        const $last_r18 = ctx.last;
-        const _r19 = i0__namespace.ɵɵreference(1);
-        const ctx_r14 = i0__namespace.ɵɵnextContext(2);
-        i0__namespace.ɵɵclassMapInterpolate1("app-list-item ", ctx_r14.direction === "horizontal" ? "" : ctx_r14.itemsPerRowClass, "");
-        i0__namespace.ɵɵproperty("ngClass", _r19.itemClass)("wmListItem", item_r15);
-        i0__namespace.ɵɵattribute("tabindex", ctx_r14.tabindex);
+        const item_r4 = ctx.$implicit;
+        const $index_r5 = ctx.index;
+        const $first_r6 = ctx.first;
+        const $last_r7 = ctx.last;
+        const listItemRef_r8 = i0__namespace.ɵɵreference(1);
+        const ctx_r1 = i0__namespace.ɵɵnextContext(2);
+        i0__namespace.ɵɵclassMapInterpolate1("app-list-item ", ctx_r1.direction === "horizontal" ? "" : ctx_r1.itemsPerRowClass, "");
+        i0__namespace.ɵɵproperty("ngClass", listItemRef_r8.itemClass)("wmListItem", item_r4);
+        i0__namespace.ɵɵattribute("tabindex", ctx_r1.tabindex);
         i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵproperty("ngTemplateOutlet", ctx_r14.listTemplate)("ngTemplateOutletContext", i0__namespace.ɵɵpureFunction6(8, _c5, item_r15, $index_r16, _r19, $first_r17, $last_r18, _r19.currentItemWidgets));
+        i0__namespace.ɵɵproperty("ngTemplateOutlet", ctx_r1.listTemplate)("ngTemplateOutletInjector", ctx_r1.createCustomInjector("flat_" + $index_r5, i0__namespace.ɵɵpureFunction6(9, _c5, item_r4, $index_r5, listItemRef_r8, $first_r6, $last_r7, listItemRef_r8.currentItemWidgets)))("ngTemplateOutletContext", i0__namespace.ɵɵpureFunction6(16, _c5, item_r4, $index_r5, listItemRef_r8, $first_r6, $last_r7, listItemRef_r8.currentItemWidgets));
     } }
     function ListComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵtemplate(0, ListComponent_ng_template_7_li_0_Template, 3, 15, "li", 28);
+        i0__namespace.ɵɵtemplate(0, ListComponent_ng_template_7_li_0_Template, 3, 23, "li", 29);
     } if (rf & 2) {
-        const ctx_r5 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵproperty("ngForOf", ctx_r5.fieldDefs);
+        const ctx_r1 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵproperty("ngForOf", ctx_r1.fieldDefs);
     } }
     function ListComponent_div_10_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "div", 32);
     } if (rf & 2) {
-        const ctx_r6 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵproperty("textContent", ctx_r6.nodatamessage);
+        const ctx_r1 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵproperty("textContent", ctx_r1.nodatamessage);
     } }
     function ListComponent_div_11_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelementStart(0, "div", 33)(1, "span");
         i0__namespace.ɵɵelement(2, "i", 34);
-        i0__namespace.ɵɵelementStart(3, "span", 24);
+        i0__namespace.ɵɵelementStart(3, "span", 25);
         i0__namespace.ɵɵtext(4, "Loading");
         i0__namespace.ɵɵelementEnd();
         i0__namespace.ɵɵelement(5, "span", 35);
         i0__namespace.ɵɵelementEnd()();
     } if (rf & 2) {
-        const ctx_r7 = i0__namespace.ɵɵnextContext();
+        const ctx_r1 = i0__namespace.ɵɵnextContext();
         i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵproperty("ngClass", ctx_r7.loadingicon);
+        i0__namespace.ɵɵproperty("ngClass", ctx_r1.loadingicon);
         i0__namespace.ɵɵadvance(3);
-        i0__namespace.ɵɵproperty("textContent", ctx_r7.loadingdatamsg);
+        i0__namespace.ɵɵproperty("textContent", ctx_r1.loadingdatamsg);
     } }
     function ListComponent_div_12_Template(rf, ctx) { if (rf & 1) {
-        const _r21 = i0__namespace.ɵɵgetCurrentView();
-        i0__namespace.ɵɵelementStart(0, "div", 36)(1, "ul", 20)(2, "li", 37)(3, "a", 22);
-        i0__namespace.ɵɵlistener("click", function ListComponent_div_12_Template_a_click_3_listener($event) { i0__namespace.ɵɵrestoreView(_r21); const ctx_r20 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r20.dataNavigator.navigatePage("next", $event)); });
+        const _r9 = i0__namespace.ɵɵgetCurrentView();
+        i0__namespace.ɵɵelementStart(0, "div", 36)(1, "ul", 21)(2, "li", 37)(3, "a", 23);
+        i0__namespace.ɵɵlistener("click", function ListComponent_div_12_Template_a_click_3_listener($event) { i0__namespace.ɵɵrestoreView(_r9); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.dataNavigator.navigatePage("next", $event)); });
         i0__namespace.ɵɵelement(4, "i", 38);
-        i0__namespace.ɵɵelementStart(5, "span", 24);
+        i0__namespace.ɵɵelementStart(5, "span", 25);
         i0__namespace.ɵɵtext(6);
         i0__namespace.ɵɵelementEnd()()()()();
     } if (rf & 2) {
-        const ctx_r8 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵattribute("aria-disabled", ctx_r8.dataNavigator.isDisableNext);
+        const ctx_r1 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵattribute("aria-disabled", ctx_r1.dataNavigator.isDisableNext);
         i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(4, _c4, ctx_r8.dataNavigator ? ctx_r8.dataNavigator.isDisableNext : true));
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵattribute("aria-disabled", ctx_r8.dataNavigator.isDisableNext);
+        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(4, _c4, ctx_r1.dataNavigator ? ctx_r1.dataNavigator.isDisableNext : true));
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵattribute("aria-disabled", ctx_r1.dataNavigator.isDisableNext);
         i0__namespace.ɵɵadvance(3);
-        i0__namespace.ɵɵtextInterpolate1("Go to Next page ", ctx_r8.dataNavigator.isDisableNext ? ", Disabled" : "", "");
+        i0__namespace.ɵɵtextInterpolate1("Go to Next page ", ctx_r1.dataNavigator.isDisableNext ? ", Disabled" : "", "");
     } }
     function ListComponent_div_13_a_2_Template(rf, ctx) { if (rf & 1) {
-        const _r24 = i0__namespace.ɵɵgetCurrentView();
+        const _r10 = i0__namespace.ɵɵgetCurrentView();
         i0__namespace.ɵɵelementStart(0, "a", 42);
-        i0__namespace.ɵɵlistener("click", function ListComponent_div_13_a_2_Template_a_click_0_listener($event) { i0__namespace.ɵɵrestoreView(_r24); const ctx_r23 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r23.dataNavigator.navigatePage("next", $event)); });
+        i0__namespace.ɵɵlistener("click", function ListComponent_div_13_a_2_Template_a_click_0_listener($event) { i0__namespace.ɵɵrestoreView(_r10); const ctx_r1 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r1.dataNavigator.navigatePage("next", $event)); });
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const ctx_r22 = i0__namespace.ɵɵnextContext(2);
-        i0__namespace.ɵɵproperty("ngClass", ctx_r22.paginationclass)("textContent", ctx_r22.ondemandmessage);
+        const ctx_r1 = i0__namespace.ɵɵnextContext(2);
+        i0__namespace.ɵɵproperty("ngClass", ctx_r1.paginationclass)("textContent", ctx_r1.ondemandmessage);
     } }
     function ListComponent_div_13_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelementStart(0, "div", 39);
@@ -578,10 +580,10 @@
         i0__namespace.ɵɵtemplate(2, ListComponent_div_13_a_2_Template, 1, 2, "a", 41);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const ctx_r9 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵproperty("hidden", !ctx_r9.showNavigation || ctx_r9.onDemandLoad && ctx_r9.dataNavigator.isDisableNext || ctx_r9.dataNavigator.dataSize <= ctx_r9.pagesize || !ctx_r9.dataNavigator.dataSize && !(ctx_r9.dataNavigator.datasource == null ? null : ctx_r9.dataNavigator.datasource.pagination == null ? null : ctx_r9.dataNavigator.datasource.pagination.next));
+        const ctx_r1 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵproperty("hidden", !ctx_r1.showNavigation || ctx_r1.onDemandLoad && ctx_r1.dataNavigator.isDisableNext || ctx_r1.dataNavigator.dataSize <= ctx_r1.pagesize || !ctx_r1.dataNavigator.dataSize && !(ctx_r1.dataNavigator.datasource == null ? null : ctx_r1.dataNavigator.datasource.pagination == null ? null : ctx_r1.dataNavigator.datasource.pagination.next));
         i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵproperty("ngIf", ctx_r9.onDemandLoad);
+        i0__namespace.ɵɵproperty("ngIf", ctx_r1.onDemandLoad);
     } }
     function ListComponent_ng_template_14_li_0_i_6_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "i", 51);
@@ -591,138 +593,73 @@
         i0__namespace.ɵɵtext(1);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const groupObj_r26 = i0__namespace.ɵɵnextContext().$implicit;
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵtextInterpolate(groupObj_r26.data.length);
+        const groupObj_r12 = i0__namespace.ɵɵnextContext().$implicit;
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵtextInterpolate(groupObj_r12.data.length);
     } }
     function ListComponent_ng_template_14_li_0_li_9_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "li", 53, 30);
+        i0__namespace.ɵɵelementStart(0, "li", 53, 1);
         i0__namespace.ɵɵelementContainer(2, 31);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const item_r31 = ctx.$implicit;
-        const $index_r32 = ctx.index;
-        const $first_r33 = ctx.first;
-        const $last_r34 = ctx.last;
-        const _r35 = i0__namespace.ɵɵreference(1);
-        const ctx_r29 = i0__namespace.ɵɵnextContext(3);
-        i0__namespace.ɵɵclassMapInterpolate1("app-list-item group-list-item ", ctx_r29.itemsPerRowClass, "");
-        i0__namespace.ɵɵproperty("ngClass", _r35.itemClass)("wmListItem", item_r31);
-        i0__namespace.ɵɵattribute("tabindex", ctx_r29.tabindex);
+        const item_r13 = ctx.$implicit;
+        const $index_r14 = ctx.index;
+        const $first_r15 = ctx.first;
+        const $last_r16 = ctx.last;
+        const listItemRef_r17 = i0__namespace.ɵɵreference(1);
+        const groupIndex_r18 = i0__namespace.ɵɵnextContext().index;
+        const ctx_r1 = i0__namespace.ɵɵnextContext(2);
+        i0__namespace.ɵɵclassMapInterpolate1("app-list-item group-list-item ", ctx_r1.itemsPerRowClass, "");
+        i0__namespace.ɵɵproperty("ngClass", listItemRef_r17.itemClass)("wmListItem", item_r13);
+        i0__namespace.ɵɵattribute("tabindex", ctx_r1.tabindex);
         i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵproperty("ngTemplateOutlet", ctx_r29.listTemplate)("ngTemplateOutletContext", i0__namespace.ɵɵpureFunction6(8, _c5, item_r31, $index_r32, _r35, $first_r33, $last_r34, _r35.currentItemWidgets));
+        i0__namespace.ɵɵproperty("ngTemplateOutlet", ctx_r1.listTemplate)("ngTemplateOutletInjector", ctx_r1.createCustomInjector("group_" + groupIndex_r18 + "_item_" + $index_r14, i0__namespace.ɵɵpureFunction6(9, _c5, item_r13, $index_r14, listItemRef_r17, $first_r15, $last_r16, listItemRef_r17.currentItemWidgets)))("ngTemplateOutletContext", i0__namespace.ɵɵpureFunction6(16, _c5, item_r13, $index_r14, listItemRef_r17, $first_r15, $last_r16, listItemRef_r17.currentItemWidgets));
     } }
-    const _c6 = function (a0) { return { "collapsible-content": a0 }; };
     function ListComponent_ng_template_14_li_0_Template(rf, ctx) { if (rf & 1) {
-        const _r37 = i0__namespace.ɵɵgetCurrentView();
+        const _r11 = i0__namespace.ɵɵgetCurrentView();
         i0__namespace.ɵɵelementStart(0, "li", 44)(1, "ul", 45)(2, "li", 46);
-        i0__namespace.ɵɵlistener("click", function ListComponent_ng_template_14_li_0_Template_li_click_2_listener($event) { i0__namespace.ɵɵrestoreView(_r37); const ctx_r36 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r36.handleHeaderClick($event)); });
+        i0__namespace.ɵɵlistener("click", function ListComponent_ng_template_14_li_0_Template_li_click_2_listener($event) { i0__namespace.ɵɵrestoreView(_r11); const ctx_r1 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r1.handleHeaderClick($event)); });
         i0__namespace.ɵɵelementStart(3, "h4");
         i0__namespace.ɵɵtext(4);
         i0__namespace.ɵɵelementStart(5, "div", 47);
-        i0__namespace.ɵɵtemplate(6, ListComponent_ng_template_14_li_0_i_6_Template, 1, 0, "i", 48);
-        i0__namespace.ɵɵtemplate(7, ListComponent_ng_template_14_li_0_span_7_Template, 2, 1, "span", 49);
+        i0__namespace.ɵɵtemplate(6, ListComponent_ng_template_14_li_0_i_6_Template, 1, 0, "i", 48)(7, ListComponent_ng_template_14_li_0_span_7_Template, 2, 1, "span", 49);
         i0__namespace.ɵɵelementEnd()()();
         i0__namespace.ɵɵelementStart(8, "ul");
-        i0__namespace.ɵɵtemplate(9, ListComponent_ng_template_14_li_0_li_9_Template, 3, 15, "li", 50);
+        i0__namespace.ɵɵtemplate(9, ListComponent_ng_template_14_li_0_li_9_Template, 3, 23, "li", 50);
         i0__namespace.ɵɵelementEnd()()();
     } if (rf & 2) {
-        const groupObj_r26 = ctx.$implicit;
-        const ctx_r25 = i0__namespace.ɵɵnextContext(2);
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵproperty("ngClass", ctx_r25.listclass);
-        i0__namespace.ɵɵattribute("tabindex", ctx_r25.tabindex);
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(10, _c6, ctx_r25.collapsible));
+        const groupObj_r12 = ctx.$implicit;
+        const ctx_r1 = i0__namespace.ɵɵnextContext(2);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("ngClass", ctx_r1.listclass);
+        i0__namespace.ɵɵattribute("tabindex", ctx_r1.tabindex);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(11, _c6, ctx_r1.collapsible));
         i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵtextInterpolate1("", groupObj_r26.key, " ");
+        i0__namespace.ɵɵtextInterpolate1("", groupObj_r12.key, " ");
         i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵproperty("ngIf", ctx_r25.collapsible);
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵproperty("ngIf", ctx_r25.showcount);
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵclassMapInterpolate1("list-group clearfix ", ctx_r25.direction === "horizontal" ? "app-horizontal-list" : "", "");
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵproperty("ngForOf", groupObj_r26.data);
+        i0__namespace.ɵɵproperty("ngIf", ctx_r1.collapsible);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("ngIf", ctx_r1.showcount);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵclassMapInterpolate1("list-group clearfix ", ctx_r1.direction === "horizontal" ? "app-horizontal-list" : "", "");
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("ngForOf", groupObj_r12.data)("ngForTrackBy", ctx_r1.trackByFn);
     } }
     function ListComponent_ng_template_14_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵtemplate(0, ListComponent_ng_template_14_li_0_Template, 10, 12, "li", 43);
+        i0__namespace.ɵɵtemplate(0, ListComponent_ng_template_14_li_0_Template, 10, 13, "li", 43);
     } if (rf & 2) {
-        const ctx_r11 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵproperty("ngForOf", ctx_r11.groupedData);
+        const ctx_r1 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵproperty("ngForOf", ctx_r1.groupedData);
     } }
     const DEFAULT_CLS = 'app-livelist app-panel';
     const WIDGET_CONFIG = { widgetType: 'wm-list', hostClass: DEFAULT_CLS };
     class ListComponent extends i1.StylableComponent {
         static { this.initializeProps = registerProps(); }
-        get selecteditem() {
-            if (this.multiselect) {
-                return i2.getClonedObject(this._items);
-            }
-            if (_.isEmpty(this._items)) {
-                return {};
-            }
-            return i2.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 (!i2.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);
-            }
-            i2.$appDigest();
-        }
-        constructor(inj, cdRef, datePipe, app, appDefaults, ngZone, binditemclass, binddisableitem, binddataset, binddatasource, mouseEnterCB, mouseLeaveCB, statePersistence, paginationService) {
+        constructor(inj, cdRef, datePipe, app, appDefaults, ngZone, binditemclass, binddisableitem, binddataset, binddatasource, mouseEnterCB, mouseLeaveCB, statePersistence, paginationService, explicitContext) {
             let resolveFn = i2.noop;
             const propsInitPromise = new Promise(res => resolveFn = res);
-            super(inj, WIDGET_CONFIG, propsInitPromise);
+            super(inj, WIDGET_CONFIG, explicitContext, propsInitPromise);
             this.propsInitPromise = propsInitPromise;
             this.promiseResolverFn = resolveFn;
             i1.styler(this.nativeElement, this, i1.APPLY_STYLES_TYPE.SHELL);
@@ -746,12 +683,12 @@
             // 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 = lodashEs.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 = i1.extractDataSourceName(this.binddatasource);
                     }
-                    if (_.get(options, 'variable.name') !== dataSourceName) {
+                    if (lodashEs.get(options, 'variable.name') !== dataSourceName) {
                         return;
                     }
                     this.handleStateParams(options);
@@ -766,31 +703,69 @@
                 })
             ];
         }
-        getConfiguredState() {
-            const mode = this.statePersistence.computeMode(this.statehandler);
-            return mode && mode.toLowerCase();
+        get selecteditem() {
+            if (this.multiselect) {
+                return i2.getClonedObject(this._items);
+            }
+            if (lodashEs.isEmpty(this._items)) {
+                return {};
+            }
+            return i2.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 (lodashEs.isArray(items)) {
+                items.forEach(item => this.selectItem(item));
+            }
+            else {
+                this.selectItem(items);
             }
+            i2.$appDigest();
         }
-        triggerWMEvent(eventName, item) {
-            i2.$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 (!i2.isDefined(index)) {
+                lodashEs.forEach(this.listItems.toArray(), (el) => {
+                    $target = lodashEs.get(el.currentItemWidgets, widgteName);
+                    if ($target) {
+                        retVal.push($target);
+                    }
+                });
+                return retVal;
+            }
+            index = +index || 0;
+            $target = lodashEs.get(this.listItems.toArray(), index);
+            if ($target) {
+                return [lodashEs.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) => lodashEs.isEqual(obj, item));
             }
-            this.app.notify('wm-event', { eventName, widgetName: this.name, row: row });
         }
         create() {
             if (this._isDependent) {
@@ -829,129 +804,521 @@
                     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 (!lodashEs.isUndefined(totalEle)) {
                         this.noDataFound = totalEle === 0 ? true : false;
                     }
                     else { // totalelements is undefined
-                        this.noDataFound = _.isEmpty(data.data?.data);
+                        this.noDataFound = lodashEs.isEmpty(data.data?.data);
                     }
                 });
             }
         }
-        resetNavigation() {
-            this.showNavigation = false;
-            this.navControls = undefined;
-            this.infScroll = false;
-            this.onDemandLoad = false;
-        }
-        enableBasicNavigation() {
-            this.navControls = i1.NAVIGATION_TYPE.BASIC;
-            this.showNavigation = true;
-        }
-        enableInlineNavigation() {
-            this.navControls = i1.NAVIGATION_TYPE.INLINE;
-        }
-        enableClassicNavigation() {
-            this.navControls = i1.NAVIGATION_TYPE.CLASSIC;
-            this.showNavigation = true;
-        }
-        enablePagerNavigation() {
-            this.navControls = i1.NAVIGATION_TYPE.PAGER;
-            this.showNavigation = true;
-        }
-        setNavigationTypeNone() {
-            this.navControls = i1.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 i1.NAVIGATION_TYPE.BASIC:
-                    this.enableBasicNavigation();
-                    break;
-                case i1.NAVIGATION_TYPE.INLINE:
-                    this.enableInlineNavigation();
-                    break;
-                case i1.NAVIGATION_TYPE.ADVANCED:
-                case i1.NAVIGATION_TYPE.CLASSIC:
-                    this.enableClassicNavigation();
-                    break;
-                case i1.NAVIGATION_TYPE.PAGER:
-                    this.enablePagerNavigation();
-                    break;
-                case i1.NAVIGATION_TYPE.NONE:
-                    this.setNavigationTypeNone();
-                    break;
-                case i1.NAVIGATION_TYPE.SCROLL:
-                    this.enableInfiniteScroll();
-                    break;
-                case i1.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 = i1.getOrderedDataset(this.fieldDefs, this.orderby);
-            }
-            if (this.groupby) {
-                this.groupedData = i1.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 ([i2.DataSource.Operation.IS_API_AWARE, i2.DataSource.Operation.IS_PAGEABLE, i2.DataSource.Operation.SUPPORTS_SERVER_FILTER].includes(operation)) {
+                return false;
             }
-            i2.$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(i2.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 (i2.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(i2.DataSource.Operation.GET_PAGING_OPTIONS).number > 0) {
-                    newVal = this.datasource.execute(i2.DataSource.Operation.LIST_RECORDS, {
-                        'page': 1
-                    });
-                }
-                if (_.isArray(newVal)) {
-                    if (newVal.length) {
-                        this.invokeEventCallback('beforedatarender', { $data: newVal });
-                    }
-                    this.updateFieldDefs(newVal);
+        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 = lodashEs.isArray(this.selecteditem) ? this.selecteditem.length : (i2.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;
+                }
+                i2.switchClass(this.nativeElement, nv, ov);
+                this.onNavigationTypeChange(nv);
+                if (this.dataNavigator) {
+                    this.dataNavigator.navigationClass = this.paginationclass;
+                }
+            }
+            else if (key === 'itemsperrow') {
+                i2.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 = lodashEs.isArray(this.selecteditem) ? this.selecteditem.length : (i2.isObject(this.selecteditem) ? 1 : 0);
+                // Handling multiselect for mobile device
+                if (this.multiselect && i2.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;
+                    }
+                }
+                i2.$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 = i2.noop;
+            setTimeout(() => {
+                this.debouncedFetchNextDatasetOnScroll = this.paginationService.debouncedFetchNextDatasetOnScroll(this.dataNavigator, i1.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 = i1.handleHeaderClick;
+                    this.toggleAllHeaders = i1.toggleAllHeaders.bind(undefined, this);
+                }
+                i2.setListClass(this);
+            });
+            this.setupHandlers();
+            const $ul = this.nativeElement.querySelector('ul.app-livelist-container');
+            i1.styler($ul, this, i1.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 (i2.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 (lodashEs.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 (lodashEs.get(widgetState, 'pagination')) {
+                    options.options = options.options || {};
+                    options.options.page = widgetState.pagination;
+                }
+                if (lodashEs.get(widgetState, 'selectedItem')) {
+                    this._selectedItemsExist = true;
+                }
+            }
+        }
+        triggerWMEvent(eventName, item) {
+            i2.$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 ? lodashEs.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 = i1.NAVIGATION_TYPE.BASIC;
+            this.showNavigation = true;
+        }
+        enableInlineNavigation() {
+            this.navControls = i1.NAVIGATION_TYPE.INLINE;
+        }
+        enableClassicNavigation() {
+            this.navControls = i1.NAVIGATION_TYPE.CLASSIC;
+            this.showNavigation = true;
+        }
+        enablePagerNavigation() {
+            this.navControls = i1.NAVIGATION_TYPE.PAGER;
+            this.showNavigation = true;
+        }
+        setNavigationTypeNone() {
+            this.navControls = i1.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 i1.NAVIGATION_TYPE.BASIC:
+                    this.enableBasicNavigation();
+                    break;
+                case i1.NAVIGATION_TYPE.INLINE:
+                    this.enableInlineNavigation();
+                    break;
+                case i1.NAVIGATION_TYPE.ADVANCED:
+                case i1.NAVIGATION_TYPE.CLASSIC:
+                    this.enableClassicNavigation();
+                    break;
+                case i1.NAVIGATION_TYPE.PAGER:
+                    this.enablePagerNavigation();
+                    break;
+                case i1.NAVIGATION_TYPE.NONE:
+                    this.setNavigationTypeNone();
+                    break;
+                case i1.NAVIGATION_TYPE.SCROLL:
+                    this.enableInfiniteScroll();
+                    break;
+                case i1.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 = i1.getOrderedDataset(this.fieldDefs, this.orderby);
+            }
+            if (this.groupby) {
+                this.groupedData = i1.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;
+            }
+            i2.$appDigest();
+            this.listItems.setDirty();
+        }
+        onDataChange(newVal) {
+            // Check for newVal is not empty
+            if (!lodashEs.isEmpty(newVal)) {
+                this.noDataFound = false;
+                this.isDataChanged = true;
+                if (this.datasource && this.datasource.execute(i2.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 = lodashEs.cloneDeep(newVal);
+                }
+                if (i2.isObject(newVal) && !lodashEs.isArray(newVal)) {
+                    newVal = lodashEs.isEmpty(newVal) ? [] : [newVal];
+                }
+                if (lodashEs.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(i2.DataSource.Operation.GET_PAGING_OPTIONS).number > 0) {
+                    newVal = this.datasource.execute(i2.DataSource.Operation.LIST_RECORDS, {
+                        'page': 1
+                    });
+                }
+                if (lodashEs.isArray(newVal)) {
+                    if (newVal.length) {
+                        this.invokeEventCallback('beforedatarender', { $data: newVal });
+                    }
+                    this.updateFieldDefs(newVal);
                 }
             }
             else {
@@ -988,13 +1355,13 @@
             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 (lodashEs.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 (lodashEs.get(widgetState, 'pagination')) {
                     this.dataNavigator.pageChanged({ page: widgetState.pagination }, true);
                 }
-                if (_.get(widgetState, 'selectedItem')) {
+                if (lodashEs.get(widgetState, 'selectedItem')) {
                     this._selectedItemsExist = true;
                 }
             }
@@ -1029,29 +1396,29 @@
         getListItemByModel(listModel) {
             return this.listItems.find((listItem) => {
                 let itemObj = listItem.item;
-                if (this.groupby && !_.has(listModel, '_groupIndex')) {
+                if (this.groupby && !lodashEs.has(listModel, '_groupIndex')) {
                     // If groupby is enabled, item contains _groupIndex property which should be excluded while comparing model.
-                    itemObj = _.clone(itemObj);
+                    itemObj = lodashEs.clone(itemObj);
                     delete itemObj._groupIndex;
                 }
-                if (_.isEqual(itemObj, listModel)) {
+                if (lodashEs.isEqual(itemObj, listModel)) {
                     return true;
                 }
             }) || null;
         }
         updateSelectedItemsWidgets(statePersistenceTriggered) {
             let obj = {}, widgetState;
-            const pageNum = _.get(this.dataNavigator, 'dn.currentPage') || 1;
+            const pageNum = lodashEs.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 (lodashEs.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) {
+                        lodashEs.remove(widgetState.selectedItem, function (selectedItem) {
                             return selectedItem.page === pageNum;
                         });
                     }
@@ -1069,8 +1436,8 @@
                         this.selectedItemWidgets = item.currentItemWidgets;
                     }
                     obj = { page: pageNum, index: index };
-                    if (_.get(widgetState, 'selectedItem') && this.multiselect) {
-                        if (!_.some(widgetState.selectedItem, obj)) {
+                    if (lodashEs.get(widgetState, 'selectedItem') && this.multiselect) {
+                        if (!lodashEs.some(widgetState.selectedItem, obj)) {
                             widgetState.selectedItem.push(obj);
                         }
                     }
@@ -1098,13 +1465,13 @@
             // 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 && lodashEs.has(item, '_groupIndex')) {
                     // If groupby is enabled, item contains _groupIndex property which should be excluded from selecteditem.
-                    item = _.clone(item);
+                    item = lodashEs.clone(item);
                     delete item._groupIndex;
                 }
                 if ($listItem.isActive) {
-                    this._items = _.pullAllWith(this._items, [item], _.isEqual);
+                    this._items = lodashEs.pullAllWith(this._items, [item], lodashEs.isEqual);
                     $listItem.isActive = false;
                 }
                 else {
@@ -1132,10 +1499,10 @@
             }
             if (this.isDataChanged && this.getConfiguredState() !== 'none' && listItems.length && this._selectedItemsExist) {
                 const widgetState = this.statePersistence.getWidgetState(this);
-                if (_.get(widgetState, 'selectedItem')) {
+                if (lodashEs.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 = lodashEs.isArray(this.selecteditem) ? this.selecteditem.length : lodashEs.toNumber(!lodashEs.isEmpty(this.selecteditem));
+                    const currentPage = lodashEs.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) {
@@ -1147,7 +1514,7 @@
                     }
                 }
             }
-            const selectedItems = _.isArray(this.selecteditem) ? this.selecteditem : [this.selecteditem];
+            const selectedItems = lodashEs.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
@@ -1185,25 +1552,16 @@
                 }
                 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 (i2.isMobile() && modalBody.length && listHt > modalHt) {
-                        this.$element.css('height', modalHt + 'px');
-                    }
-                    this.paginationService.bindScrollEvt(this, '> ul', i1.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 modalBody = this.$element.closest('.modal-body');
+                    const listHt = this.$element.find('ul').height();
+                    const modalHt = window.innerHeight - 140;
+                    if (i2.isMobile() && modalBody.length && listHt > modalHt) {
+                        this.$element.css('height', modalHt + 'px');
+                    }
+                    this.paginationService.bindScrollEvt(this, '> ul', i1.DEBOUNCE_TIMES.PAGINATION_DEBOUNCE_TIME);
                 }
             }
+            this.isDataChanged = false;
         }
         setupHandlers() {
             this.listItems.changes.subscribe(listItems => {
@@ -1243,344 +1601,99 @@
             // 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 = lodashEs.min([newIndex, oldIndex]);
+            const maxIndex = lodashEs.max([newIndex, oldIndex]);
+            const draggedItem = lodashEs.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 = i2.isMobileApp() ? {} : {
-                appendTo: appendTo,
-            };
-            const $el = $(this.nativeElement);
-            this.$ulEle = $el.find('.app-livelist-container');
-            i1.configureDnD(this.$ulEle, options, this.onReorderStart.bind(this), this.onUpdate.bind(this), this.onSort.bind(this));
-            this.$ulEle.droppable({ 'accept': '.app-list-item' });
-            if (i2.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 ([i2.DataSource.Operation.IS_API_AWARE, i2.DataSource.Operation.IS_PAGEABLE, i2.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;
-                }
-                i2.switchClass(this.nativeElement, nv, ov);
-                this.onNavigationTypeChange(nv);
-                if (this.dataNavigator) {
-                    this.dataNavigator.navigationClass = this.paginationclass;
-                }
-            }
-            else if (key === 'itemsperrow') {
-                i2.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 (this.getConfiguredState() !== 'none') {
+                    this.statePersistence.removeWidgetState(this, 'selectedItem');
                 }
-            }
-            else if (key === 'pagesize') {
-                this.dataNavigator.options = {
-                    maxResults: nv
+                this.reorderProps.minIndex = lodashEs.min([minIndex, this.reorderProps.minIndex]);
+                this.reorderProps.maxIndex = lodashEs.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 && i2.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 = i2.isMobileApp() ? {} : {
+                appendTo: appendTo,
+            };
+            const $el = $(this.nativeElement);
+            this.$ulEle = $el.find('.app-livelist-container');
+            i1.configureDnD(this.$ulEle, options, this.onReorderStart.bind(this), this.onUpdate.bind(this), this.onSort.bind(this));
+            this.$ulEle.droppable({ 'accept': '.app-list-item' });
+            if (i2.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);
                     }
-                }
-                i2.$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.
@@ -1589,7 +1702,7 @@
          */
         getItemRefByIndexOrModel(val) {
             let listItem;
-            if (i2.isNumber(val)) {
+            if (lodashEs.isNumber(val)) {
                 listItem = this.getListItemByIndex(val);
             }
             else {
@@ -1597,51 +1710,11 @@
             }
             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 });
-                        }
-                    }
-                });
-            }
+        trackByFn($index) {
+            return $index; // Return a unique identifier for each item
         }
         // Invoke the datasource variable by default when pulltorefresh event is not specified.
         subscribeToPullToRefresh() {
@@ -1651,19 +1724,6 @@
                 }
             }));
         }
-        ngOnInit() {
-            super.ngOnInit();
-            this.handleHeaderClick = i2.noop;
-            setTimeout(() => {
-                this.debouncedFetchNextDatasetOnScroll = this.paginationService.debouncedFetchNextDatasetOnScroll(this.dataNavigator, i1.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) {
@@ -1673,59 +1733,7 @@
                 });
             }
         }
-        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 = i1.handleHeaderClick;
-                    this.toggleAllHeaders = i1.toggleAllHeaders.bind(undefined, this);
-                }
-                i2.setListClass(this);
-            });
-            this.setupHandlers();
-            const $ul = this.nativeElement.querySelector('ul.app-livelist-container');
-            i1.styler($ul, this, i1.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 (i2.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__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i0__namespace.ChangeDetectorRef), i0__namespace.ɵɵdirectiveInject(i1__namespace.ToDatePipe), i0__namespace.ɵɵdirectiveInject(i2__namespace.App), i0__namespace.ɵɵdirectiveInject(i2__namespace.AppDefaults), i0__namespace.ɵɵdirectiveInject(i0__namespace.NgZone), i0__namespace.ɵɵinjectAttribute('itemclass.bind'), i0__namespace.ɵɵinjectAttribute('disableitem.bind'), i0__namespace.ɵɵinjectAttribute('dataset.bind'), i0__namespace.ɵɵinjectAttribute('datasource.bind'), i0__namespace.ɵɵinjectAttribute('mouseenter.event'), i0__namespace.ɵɵinjectAttribute('mouseleave.event'), i0__namespace.ɵɵdirectiveInject(i2__namespace.StatePersistence), i0__namespace.ɵɵdirectiveInject(i2__namespace.PaginationService)); }; }
+        static { this.ɵfac = function ListComponent_Factory(t) { return new (t || ListComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i0__namespace.ChangeDetectorRef), i0__namespace.ɵɵdirectiveInject(i1__namespace.ToDatePipe), i0__namespace.ɵɵdirectiveInject(i2__namespace.App), i0__namespace.ɵɵdirectiveInject(i2__namespace.AppDefaults), i0__namespace.ɵɵdirectiveInject(i0__namespace.NgZone), i0__namespace.ɵɵinjectAttribute('itemclass.bind'), i0__namespace.ɵɵinjectAttribute('disableitem.bind'), i0__namespace.ɵɵinjectAttribute('dataset.bind'), i0__namespace.ɵɵinjectAttribute('datasource.bind'), i0__namespace.ɵɵinjectAttribute('mouseenter.event'), i0__namespace.ɵɵinjectAttribute('mouseleave.event'), i0__namespace.ɵɵdirectiveInject(i2__namespace.StatePersistence), i0__namespace.ɵɵdirectiveInject(i2__namespace.PaginationService), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: ListComponent, selectors: [["div", "wmList", ""]], contentQueries: function ListComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
                 i0__namespace.ɵɵcontentQuery(dirIndex, _c0, 5);
                 i0__namespace.ɵɵcontentQuery(dirIndex, _c1, 5);
@@ -1746,61 +1754,55 @@
                 i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.listItems = _t);
             } }, features: [i0__namespace.ɵɵProvidersFeature([
                     i1.provideAsWidgetRef(ListComponent)
-                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c3, decls: 16, vars: 19, consts: [["class", "panel-heading", 4, "ngIf"], ["class", "app-datanavigator", "aria-label", "Page navigation", 4, "ngIf"], ["aria-live", "polite", "aria-atomic", "true", "class", "sr-only", 4, "ngIf"], ["class", "sr-only", 3, "id", 4, "ngIf"], ["aria-live", "assertive", "class", "sr-only", 4, "ngIf"], ["role", "list", 3, "hidden", "keydown.enter", "keydown.space", "keydown.arrowup", "keydown.arrowdown", "keydown.arrowleft", "keydown.arrowright", "keydown.shift.arrowup", "keydown.shift.arrowdown", "keydown.shift.arrowleft", "keydown.shift.arrowright"], [3, "ngIf", "ngIfElse"], [3, "ngTemplateOutlet"], ["class", "no-data-msg", 3, "textContent", 4, "ngIf"], ["class", "loading-data-msg", 4, "ngIf"], ["class", "app-datanavigator", 4, "ngIf"], ["class", "panel-footer", 3, "hidden", 4, "ngIf"], ["groupedListTemplate", ""], [1, "panel-heading"], [1, "panel-title"], [1, "pull-left"], ["aria-hidden", "true", 3, "hidden"], [1, "heading", 3, "innerHTML"], [1, "description", 3, "innerHTML"], ["aria-label", "Page navigation", 1, "app-datanavigator"], [1, "pager"], [1, "previous", 3, "ngClass"], ["href", "javascript:void(0);", 3, "click"], ["aria-hidden", "true", 1, "wi", "wi-chevron-left"], [1, "sr-only"], ["aria-live", "polite", "aria-atomic", "true", 1, "sr-only"], [1, "sr-only", 3, "id"], ["aria-live", "assertive", 1, "sr-only"], ["role", "listitem", 3, "class", "ngClass", "wmListItem", 4, "ngFor", "ngForOf"], ["role", "listitem", 3, "ngClass", "wmListItem"], ["listItemRef", "listItemRef"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "no-data-msg", 3, "textContent"], [1, "loading-data-msg"], ["aria-hidden", "true", 1, "app-icon", "panel-icon", "fa-spin", 3, "ngClass"], [1, "loading-text", 3, "textContent"], [1, "app-datanavigator"], [1, "next", 3, "ngClass"], ["aria-hidden", "true", 1, "wi", "wi-chevron-right"], [1, "panel-footer", 3, "hidden"], ["wmPagination", "", "navigationalign.bind", "navigationalign", "navigation.bind", "navControls", "showrecordcount.bind", "showrecordcount", "maxsize.bind", "maxsize", "boundarylinks.bind", "boundarylinks", "forceellipses.bind", "forceellipses", "directionlinks.bind", "directionlinks", "show.bind", "!onDemandLoad", "paginationchange.event", "beforePaginationChange($event, $index)"], ["href", "javascript:void(0);", "class", "app-button btn btn-block", 3, "ngClass", "textContent", "click", 4, "ngIf"], ["href", "javascript:void(0);", 1, "app-button", "btn", "btn-block", 3, "ngClass", "textContent", "click"], ["class", "app-list-item-group clearfix", 4, "ngFor", "ngForOf"], [1, "app-list-item-group", "clearfix"], [1, "list-group", "item-group", 3, "ngClass"], [1, "app-list-item-header", "list-item", "list-group-header", 3, "ngClass", "click"], [1, "header-action"], ["class", "app-icon wi action wi-chevron-up", 4, "ngIf"], ["class", "label label-default", 4, "ngIf"], [3, "class", "ngClass", "wmListItem", 4, "ngFor", "ngForOf"], [1, "app-icon", "wi", "action", "wi-chevron-up"], [1, "label", "label-default"], [3, "ngClass", "wmListItem"]], template: function ListComponent_Template(rf, ctx) { if (rf & 1) {
-                i0__namespace.ɵɵtemplate(0, ListComponent_div_0_Template, 7, 6, "div", 0);
-                i0__namespace.ɵɵtemplate(1, ListComponent_div_1_Template, 7, 6, "div", 1);
-                i0__namespace.ɵɵtemplate(2, ListComponent_div_2_Template, 2, 1, "div", 2);
+                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c3, decls: 16, vars: 19, consts: [["groupedListTemplate", ""], ["listItemRef", "listItemRef"], ["class", "panel-heading", 4, "ngIf"], ["class", "app-datanavigator", "aria-label", "Page navigation", 4, "ngIf"], ["aria-live", "polite", "aria-atomic", "true", "class", "sr-only", 4, "ngIf"], ["class", "sr-only", 3, "id", 4, "ngIf"], ["aria-live", "assertive", "class", "sr-only", 4, "ngIf"], ["role", "list", 3, "keydown.enter", "keydown.space", "keydown.arrowup", "keydown.arrowdown", "keydown.arrowleft", "keydown.arrowright", "keydown.shift.arrowup", "keydown.shift.arrowdown", "keydown.shift.arrowleft", "keydown.shift.arrowright", "hidden"], [3, "ngIf", "ngIfElse"], [3, "ngTemplateOutlet"], ["class", "no-data-msg", 3, "textContent", 4, "ngIf"], ["class", "loading-data-msg", 4, "ngIf"], ["class", "app-datanavigator", 4, "ngIf"], ["class", "panel-footer", 3, "hidden", 4, "ngIf"], [1, "panel-heading"], [1, "panel-title"], [1, "pull-left"], ["aria-hidden", "true", 3, "hidden"], [1, "heading", 3, "innerHTML"], [1, "description", 3, "innerHTML"], ["aria-label", "Page navigation", 1, "app-datanavigator"], [1, "pager"], [1, "previous", 3, "ngClass"], ["href", "javascript:void(0);", 3, "click"], ["aria-hidden", "true", 1, "wi", "wi-chevron-left"], [1, "sr-only"], ["aria-live", "polite", "aria-atomic", "true", 1, "sr-only"], [1, "sr-only", 3, "id"], ["aria-live", "assertive", 1, "sr-only"], ["role", "listitem", 3, "class", "ngClass", "wmListItem", 4, "ngFor", "ngForOf"], ["role", "listitem", 3, "ngClass", "wmListItem"], [3, "ngTemplateOutlet", "ngTemplateOutletInjector", "ngTemplateOutletContext"], [1, "no-data-msg", 3, "textContent"], [1, "loading-data-msg"], ["aria-hidden", "true", 1, "app-icon", "panel-icon", "fa-spin", 3, "ngClass"], [1, "loading-text", 3, "textContent"], [1, "app-datanavigator"], [1, "next", 3, "ngClass"], ["aria-hidden", "true", 1, "wi", "wi-chevron-right"], [1, "panel-footer", 3, "hidden"], ["wmPagination", "", "navigationalign.bind", "navigationalign", "navigation.bind", "navControls", "showrecordcount.bind", "showrecordcount", "maxsize.bind", "maxsize", "boundarylinks.bind", "boundarylinks", "forceellipses.bind", "forceellipses", "directionlinks.bind", "directionlinks", "show.bind", "!onDemandLoad", "paginationchange.event", "beforePaginationChange($event, $index)"], ["href", "javascript:void(0);", "class", "app-button btn btn-block", 3, "ngClass", "textContent", "click", 4, "ngIf"], ["href", "javascript:void(0);", 1, "app-button", "btn", "btn-block", 3, "click", "ngClass", "textContent"], ["class", "app-list-item-group clearfix", 4, "ngFor", "ngForOf"], [1, "app-list-item-group", "clearfix"], [1, "list-group", "item-group", 3, "ngClass"], [1, "app-list-item-header", "list-item", "list-group-header", 3, "click", "ngClass"], [1, "header-action"], ["class", "app-icon wi action wi-chevron-up", 4, "ngIf"], ["class", "label label-default", 4, "ngIf"], [3, "class", "ngClass", "wmListItem", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "app-icon", "wi", "action", "wi-chevron-up"], [1, "label", "label-default"], [3, "ngClass", "wmListItem"]], template: function ListComponent_Template(rf, ctx) { if (rf & 1) {
+                const _r1 = i0__namespace.ɵɵgetCurrentView();
+                i0__namespace.ɵɵtemplate(0, ListComponent_div_0_Template, 7, 6, "div", 2)(1, ListComponent_div_1_Template, 7, 6, "div", 3)(2, ListComponent_div_2_Template, 2, 1, "div", 4);
                 i0__namespace.ɵɵelementStart(3, "div");
-                i0__namespace.ɵɵtemplate(4, ListComponent_div_4_Template, 2, 1, "div", 3);
-                i0__namespace.ɵɵtemplate(5, ListComponent_div_5_Template, 2, 1, "div", 4);
+                i0__namespace.ɵɵtemplate(4, ListComponent_div_4_Template, 2, 1, "div", 5)(5, ListComponent_div_5_Template, 2, 1, "div", 6);
                 i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵelementStart(6, "ul", 5);
-                i0__namespace.ɵɵlistener("keydown.enter", function ListComponent_Template_ul_keydown_enter_6_listener($event) { return ctx.handleKeyDown($event, "select"); })("keydown.space", function ListComponent_Template_ul_keydown_space_6_listener($event) { return ctx.handleKeyDown($event, "space"); })("keydown.arrowup", function ListComponent_Template_ul_keydown_arrowup_6_listener($event) { return ctx.handleKeyDown($event, "focusPrev"); })("keydown.arrowdown", function ListComponent_Template_ul_keydown_arrowdown_6_listener($event) { return ctx.handleKeyDown($event, "focusNext"); })("keydown.arrowleft", function ListComponent_Template_ul_keydown_arrowleft_6_listener($event) { return ctx.handleKeyDown($event, "focusPrev"); })("keydown.arrowright", function ListComponent_Template_ul_keydown_arrowright_6_listener($event) { return ctx.handleKeyDown($event, "focusNext"); })("keydown.shift.arrowup", function ListComponent_Template_ul_keydown_shift_arrowup_6_listener($event) { return ctx.handleKeyDown($event, "selectPrev"); })("keydown.shift.arrowdown", function ListComponent_Template_ul_keydown_shift_arrowdown_6_listener($event) { return ctx.handleKeyDown($event, "selectNext"); })("keydown.shift.arrowleft", function ListComponent_Template_ul_keydown_shift_arrowleft_6_listener($event) { return ctx.handleKeyDown($event, "selectPrev"); })("keydown.shift.arrowright", function ListComponent_Template_ul_keydown_shift_arrowright_6_listener($event) { return ctx.handleKeyDown($event, "selectNext"); });
-                i0__namespace.ɵɵtemplate(7, ListComponent_ng_template_7_Template, 1, 1, "ng-template", 6);
-                i0__namespace.ɵɵelementContainer(8, 7)(9, 7);
+                i0__namespace.ɵɵelementStart(6, "ul", 7);
+                i0__namespace.ɵɵlistener("keydown.enter", function ListComponent_Template_ul_keydown_enter_6_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleKeyDown($event, "select")); })("keydown.space", function ListComponent_Template_ul_keydown_space_6_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleKeyDown($event, "space")); })("keydown.arrowup", function ListComponent_Template_ul_keydown_arrowup_6_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleKeyDown($event, "focusPrev")); })("keydown.arrowdown", function ListComponent_Template_ul_keydown_arrowdown_6_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleKeyDown($event, "focusNext")); })("keydown.arrowleft", function ListComponent_Template_ul_keydown_arrowleft_6_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleKeyDown($event, "focusPrev")); })("keydown.arrowright", function ListComponent_Template_ul_keydown_arrowright_6_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleKeyDown($event, "focusNext")); })("keydown.shift.arrowup", function ListComponent_Template_ul_keydown_shift_arrowup_6_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleKeyDown($event, "selectPrev")); })("keydown.shift.arrowdown", function ListComponent_Template_ul_keydown_shift_arrowdown_6_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleKeyDown($event, "selectNext")); })("keydown.shift.arrowleft", function ListComponent_Template_ul_keydown_shift_arrowleft_6_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleKeyDown($event, "selectPrev")); })("keydown.shift.arrowright", function ListComponent_Template_ul_keydown_shift_arrowright_6_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleKeyDown($event, "selectNext")); });
+                i0__namespace.ɵɵtemplate(7, ListComponent_ng_template_7_Template, 1, 1, "ng-template", 8);
+                i0__namespace.ɵɵelementContainer(8, 9)(9, 9);
                 i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵtemplate(10, ListComponent_div_10_Template, 1, 1, "div", 8);
-                i0__namespace.ɵɵtemplate(11, ListComponent_div_11_Template, 6, 2, "div", 9);
-                i0__namespace.ɵɵtemplate(12, ListComponent_div_12_Template, 7, 6, "div", 10);
-                i0__namespace.ɵɵtemplate(13, ListComponent_div_13_Template, 3, 2, "div", 11);
-                i0__namespace.ɵɵtemplate(14, ListComponent_ng_template_14_Template, 1, 1, "ng-template", null, 12, i0__namespace.ɵɵtemplateRefExtractor);
+                i0__namespace.ɵɵtemplate(10, ListComponent_div_10_Template, 1, 1, "div", 10)(11, ListComponent_div_11_Template, 6, 2, "div", 11)(12, ListComponent_div_12_Template, 7, 6, "div", 12)(13, ListComponent_div_13_Template, 3, 2, "div", 13)(14, ListComponent_ng_template_14_Template, 1, 1, "ng-template", null, 0, i0__namespace.ɵɵtemplateRefExtractor);
             } if (rf & 2) {
-                const _r10 = i0__namespace.ɵɵreference(15);
+                const groupedListTemplate_r19 = i0__namespace.ɵɵreference(15);
                 i0__namespace.ɵɵproperty("ngIf", ctx.title || ctx.subheading || ctx.iconclass);
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("ngIf", ctx.navigation === "Inline" && !ctx.noDataFound);
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("ngIf", ctx.navigation === "Inline" && !ctx.noDataFound);
                 i0__namespace.ɵɵadvance(2);
                 i0__namespace.ɵɵproperty("ngIf", ctx.enablereorder);
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("ngIf", ctx.listItems && ctx.enablereorder && ctx.currentIndex);
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵclassMapInterpolate2("app-livelist-container clearfix ", ctx.direction === "horizontal" ? "app-horizontal-list" : "", " ", ctx.listclass, "");
                 i0__namespace.ɵɵproperty("hidden", ctx.noDataFound && !ctx.variableInflight);
                 i0__namespace.ɵɵattribute("tabindex", ctx.tabindex);
-                i0__namespace.ɵɵadvance(1);
-                i0__namespace.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", _r10);
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
+                i0__namespace.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", groupedListTemplate_r19);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("ngTemplateOutlet", ctx.listLeftActionTemplate);
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("ngTemplateOutlet", ctx.listRightActionTemplate);
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("ngIf", ctx.noDataFound && !ctx.variableInflight);
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("ngIf", ctx.variableInflight && !ctx.pulltorefresh);
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("ngIf", ctx.navigation === "Inline" && !ctx.noDataFound);
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("ngIf", ctx.navigation !== "None");
             } }, encapsulation: 2 }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ListComponent, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ListComponent, [{
             type: i0.Component,
             args: [{ selector: 'div[wmList]', providers: [
                         i1.provideAsWidgetRef(ListComponent)
-                    ], template: "<div class=\"panel-heading\" *ngIf=\"title || subheading || iconclass\">\n    <h3 class=\"panel-title\">\n        <div class=\"pull-left\">\n            <i class=\"app-icon panel-icon {{iconclass}}\" aria-hidden=\"true\" [hidden]=\"!iconclass\"></i>\n        </div>\n        <div class=\"pull-left\">\n            <div class=\"heading\" [innerHTML]=\"title\"></div>\n            <div class=\"description\" [innerHTML]=\"subheading\"></div>\n        </div>\n    </h3>\n</div>\n\n<div class=\"app-datanavigator\" [attr.aria-disabled]=\"dataNavigator.isDisablePrevious\" aria-label=\"Page navigation\" *ngIf=\"navigation === 'Inline' && !noDataFound\">\n    <ul class=\"pager\">\n        <li class=\"previous\" [ngClass]=\"{'disabled': (dataNavigator ? dataNavigator.isDisablePrevious : true)}\">\n            <a href=\"javascript:void(0);\" (click)=\"dataNavigator.navigatePage('prev', $event)\"\n               [attr.aria-disabled]=\"dataNavigator.isDisablePrevious\">\n                <i class=\"wi wi-chevron-left\" aria-hidden=\"true\"></i>\n                <span class=\"sr-only\">Go to Previous page {{dataNavigator.isDisablePrevious ? ', Disabled' : ''}}</span>\n            </a>\n        </li>\n    </ul>\n</div>\n<div *ngIf=\"navigation === 'Inline' && !noDataFound\" aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\"> {{'Page ' + dataNavigator.dn.currentPage + ' of ' + dataNavigator.pageCount }}</div>\n\n<div>\n    <div id={{titleId}} class=\"sr-only\" *ngIf=\"enablereorder\">\n        Press space bar to toggle drag drop mode, use arrow keys to move selected elements.\n    </div>\n\n    <div aria-live=\"assertive\" *ngIf=\"listItems && enablereorder && currentIndex\" class=\"sr-only\" >\n        {{ariaText + currentIndex + ' of ' +  listItems.length}}\n    </div>\n</div>\n\n<ul [attr.tabindex]=\"tabindex\"  class=\"app-livelist-container clearfix {{direction === 'horizontal' ? 'app-horizontal-list': ''}} {{listclass}}\" role=\"list\"\n    (keydown.enter)=\"handleKeyDown($event, 'select')\"\n\n    (keydown.space)=\"handleKeyDown($event, 'space')\"\n\n    (keydown.arrowup)=\"handleKeyDown($event, 'focusPrev')\"\n    (keydown.arrowdown)=\"handleKeyDown($event, 'focusNext')\"\n    (keydown.arrowleft)=\"handleKeyDown($event, 'focusPrev')\"\n    (keydown.arrowright)=\"handleKeyDown($event, 'focusNext')\"\n\n    (keydown.shift.arrowup)=\"handleKeyDown($event, 'selectPrev')\"\n    (keydown.shift.arrowdown)=\"handleKeyDown($event, 'selectNext')\"\n    (keydown.shift.arrowleft)=\"handleKeyDown($event, 'selectPrev')\"\n    (keydown.shift.arrowright)=\"handleKeyDown($event, 'selectNext')\"\n    [hidden]=\"noDataFound && !variableInflight\"\n>\n    <ng-template [ngIf]=\"!groupby\" [ngIfElse]=\"groupedListTemplate\">\n        <li *ngFor=\"let item of fieldDefs; index as $index; first as $first; last as $last;\" class=\"app-list-item {{direction === 'horizontal' ? '' : itemsPerRowClass}}\" [ngClass]=\"listItemRef.itemClass\"\n            [wmListItem]=\"item\"\n            #listItemRef=\"listItemRef\"\n            [attr.tabindex]=\"tabindex\"\n            role=\"listitem\">\n            <ng-container [ngTemplateOutlet]=\"listTemplate\" [ngTemplateOutletContext]=\"{item: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}\"></ng-container>\n        </li>\n    </ng-template>\n    <ng-container [ngTemplateOutlet]=\"listLeftActionTemplate\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"listRightActionTemplate\"></ng-container>\n</ul>\n\n<div class=\"no-data-msg\" *ngIf=\"noDataFound && !variableInflight\" [textContent]=\"nodatamessage\"></div>\n\n<div class=\"loading-data-msg\" *ngIf=\"variableInflight && !pulltorefresh\">\n    <span>\n        <i class=\"app-icon panel-icon fa-spin\" aria-hidden=\"true\" [ngClass]=\"loadingicon\"></i>\n        <span class=\"sr-only\">Loading</span>\n        <span class=\"loading-text\" [textContent]=\"loadingdatamsg\"></span>\n    </span>\n</div>\n\n<div class=\"app-datanavigator\" [attr.aria-disabled]=\"dataNavigator.isDisableNext\" *ngIf=\"navigation === 'Inline' && !noDataFound\">\n    <ul class=\"pager\">\n        <li class=\"next\" [ngClass]=\"{'disabled': (dataNavigator ? dataNavigator.isDisableNext  : true)}\">\n            <a href=\"javascript:void(0);\" (click)=\"dataNavigator.navigatePage('next', $event)\"\n               [attr.aria-disabled]=\"dataNavigator.isDisableNext\">\n                <i class=\"wi wi-chevron-right\" aria-hidden=\"true\"></i>\n                <span class=\"sr-only\">Go to Next page {{dataNavigator.isDisableNext ? ', Disabled' : ''}}</span>\n            </a>\n        </li>\n    </ul>\n</div>\n\n<div class=\"panel-footer\" *ngIf=\"navigation !== 'None'\" [hidden]=\"!showNavigation || (onDemandLoad && dataNavigator.isDisableNext) || (dataNavigator.dataSize <= pagesize) || (!dataNavigator.dataSize && !dataNavigator.datasource?.pagination?.next)\">\n    <nav wmPagination\n         navigationalign.bind=\"navigationalign\"\n         navigation.bind=\"navControls\"\n         showrecordcount.bind=\"showrecordcount\"\n         maxsize.bind=\"maxsize\"\n         boundarylinks.bind=\"boundarylinks\"\n         forceellipses.bind=\"forceellipses\"\n         directionlinks.bind=\"directionlinks\"\n         show.bind=\"!onDemandLoad\"\n         paginationchange.event=\"beforePaginationChange($event, $index)\"\n    ></nav>\n    <a *ngIf=\"onDemandLoad\" href=\"javascript:void(0);\"\n       (click)=\"dataNavigator.navigatePage('next', $event)\"\n       class=\"app-button btn btn-block\"\n       [ngClass]=\"paginationclass\"\n       [textContent]=\"ondemandmessage\"\n    ></a>\n</div>\n\n<!--This template will be displayed when groupby is specified-->\n<ng-template #groupedListTemplate>\n    <li *ngFor=\"let groupObj of groupedData\" class=\"app-list-item-group clearfix\">\n        <ul [attr.tabindex]=\"tabindex\" class=\"list-group item-group\" [ngClass]=\"listclass\">\n            <li class=\"app-list-item-header list-item list-group-header\" (click)=\"handleHeaderClick($event)\" [ngClass]=\"{'collapsible-content': collapsible}\">\n            <h4>{{groupObj.key}}\n                <div class=\"header-action\">\n                    <i class=\"app-icon wi action wi-chevron-up\" *ngIf=\"collapsible\"></i>\n                    <span *ngIf=\"showcount\" class=\"label label-default\">{{groupObj.data.length}}</span>\n                    </div>\n                </h4>\n            </li>\n            <ul class=\"list-group clearfix {{direction === 'horizontal' ? 'app-horizontal-list': ''}}\">\n                <li *ngFor=\"let item of groupObj.data; index as $index; first as $first; last as $last;\" [attr.tabindex]=\"tabindex\"\n                    class=\"app-list-item group-list-item {{itemsPerRowClass}}\"\n                    [ngClass]=\"listItemRef.itemClass\"\n                    [wmListItem]=\"item\" #listItemRef=\"listItemRef\">\n                    <ng-container [ngTemplateOutlet]=\"listTemplate\" [ngTemplateOutletContext]=\"{item: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}\"></ng-container>\n                </li>\n            </ul>\n        </ul>\n    </li>\n</ng-template>\n" }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.ToDatePipe }, { type: i2__namespace.App }, { type: i2__namespace.AppDefaults }, { type: i0__namespace.NgZone }, { type: undefined, decorators: [{
+                    ], template: "<div class=\"panel-heading\" *ngIf=\"title || subheading || iconclass\">\n    <h3 class=\"panel-title\">\n        <div class=\"pull-left\">\n            <i class=\"app-icon panel-icon {{iconclass}}\" aria-hidden=\"true\" [hidden]=\"!iconclass\"></i>\n        </div>\n        <div class=\"pull-left\">\n            <div class=\"heading\" [innerHTML]=\"title\"></div>\n            <div class=\"description\" [innerHTML]=\"subheading\"></div>\n        </div>\n    </h3>\n</div>\n\n<div class=\"app-datanavigator\" [attr.aria-disabled]=\"dataNavigator.isDisablePrevious\" aria-label=\"Page navigation\" *ngIf=\"navigation === 'Inline' && !noDataFound\">\n    <ul class=\"pager\">\n        <li class=\"previous\" [ngClass]=\"{'disabled': (dataNavigator ? dataNavigator.isDisablePrevious : true)}\">\n            <a href=\"javascript:void(0);\" (click)=\"dataNavigator.navigatePage('prev', $event)\"\n               [attr.aria-disabled]=\"dataNavigator.isDisablePrevious\">\n                <i class=\"wi wi-chevron-left\" aria-hidden=\"true\"></i>\n                <span class=\"sr-only\">Go to Previous page {{dataNavigator.isDisablePrevious ? ', Disabled' : ''}}</span>\n            </a>\n        </li>\n    </ul>\n</div>\n<div *ngIf=\"navigation === 'Inline' && !noDataFound\" aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\"> {{'Page ' + dataNavigator.dn.currentPage + ' of ' + dataNavigator.pageCount }}</div>\n\n<div>\n    <div id={{titleId}} class=\"sr-only\" *ngIf=\"enablereorder\">\n        Press space bar to toggle drag drop mode, use arrow keys to move selected elements.\n    </div>\n\n    <div aria-live=\"assertive\" *ngIf=\"listItems && enablereorder && currentIndex\" class=\"sr-only\" >\n        {{ariaText + currentIndex + ' of ' +  listItems.length}}\n    </div>\n</div>\n\n<ul [attr.tabindex]=\"tabindex\"  class=\"app-livelist-container clearfix {{direction === 'horizontal' ? 'app-horizontal-list': ''}} {{listclass}}\" role=\"list\"\n    (keydown.enter)=\"handleKeyDown($event, 'select')\"\n\n    (keydown.space)=\"handleKeyDown($event, 'space')\"\n\n    (keydown.arrowup)=\"handleKeyDown($event, 'focusPrev')\"\n    (keydown.arrowdown)=\"handleKeyDown($event, 'focusNext')\"\n    (keydown.arrowleft)=\"handleKeyDown($event, 'focusPrev')\"\n    (keydown.arrowright)=\"handleKeyDown($event, 'focusNext')\"\n\n    (keydown.shift.arrowup)=\"handleKeyDown($event, 'selectPrev')\"\n    (keydown.shift.arrowdown)=\"handleKeyDown($event, 'selectNext')\"\n    (keydown.shift.arrowleft)=\"handleKeyDown($event, 'selectPrev')\"\n    (keydown.shift.arrowright)=\"handleKeyDown($event, 'selectNext')\"\n    [hidden]=\"noDataFound && !variableInflight\"\n>\n    <ng-template [ngIf]=\"!groupby\" [ngIfElse]=\"groupedListTemplate\">\n        <li *ngFor=\"let item of fieldDefs; index as $index; first as $first; last as $last;\" class=\"app-list-item {{direction === 'horizontal' ? '' : itemsPerRowClass}}\" [ngClass]=\"listItemRef.itemClass\"\n            [wmListItem]=\"item\"\n            #listItemRef=\"listItemRef\"\n            [attr.tabindex]=\"tabindex\"\n            role=\"listitem\">\n            <ng-container [ngTemplateOutlet]=\"listTemplate\"\n                          [ngTemplateOutletInjector]=\"createCustomInjector('flat_' + $index, {item: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets})\"\n                          [ngTemplateOutletContext]=\"{item: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}\"></ng-container>\n        </li>\n    </ng-template>\n    <ng-container [ngTemplateOutlet]=\"listLeftActionTemplate\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"listRightActionTemplate\"></ng-container>\n</ul>\n\n<div class=\"no-data-msg\" *ngIf=\"noDataFound && !variableInflight\" [textContent]=\"nodatamessage\"></div>\n\n<div class=\"loading-data-msg\" *ngIf=\"variableInflight && !pulltorefresh\">\n    <span>\n        <i class=\"app-icon panel-icon fa-spin\" aria-hidden=\"true\" [ngClass]=\"loadingicon\"></i>\n        <span class=\"sr-only\">Loading</span>\n        <span class=\"loading-text\" [textContent]=\"loadingdatamsg\"></span>\n    </span>\n</div>\n\n<div class=\"app-datanavigator\" [attr.aria-disabled]=\"dataNavigator.isDisableNext\" *ngIf=\"navigation === 'Inline' && !noDataFound\">\n    <ul class=\"pager\">\n        <li class=\"next\" [ngClass]=\"{'disabled': (dataNavigator ? dataNavigator.isDisableNext  : true)}\">\n            <a href=\"javascript:void(0);\" (click)=\"dataNavigator.navigatePage('next', $event)\"\n               [attr.aria-disabled]=\"dataNavigator.isDisableNext\">\n                <i class=\"wi wi-chevron-right\" aria-hidden=\"true\"></i>\n                <span class=\"sr-only\">Go to Next page {{dataNavigator.isDisableNext ? ', Disabled' : ''}}</span>\n            </a>\n        </li>\n    </ul>\n</div>\n\n<div class=\"panel-footer\" *ngIf=\"navigation !== 'None'\" [hidden]=\"!showNavigation || (onDemandLoad && dataNavigator.isDisableNext) || (dataNavigator.dataSize <= pagesize) || (!dataNavigator.dataSize && !dataNavigator.datasource?.pagination?.next)\">\n    <nav wmPagination\n         navigationalign.bind=\"navigationalign\"\n         navigation.bind=\"navControls\"\n         showrecordcount.bind=\"showrecordcount\"\n         maxsize.bind=\"maxsize\"\n         boundarylinks.bind=\"boundarylinks\"\n         forceellipses.bind=\"forceellipses\"\n         directionlinks.bind=\"directionlinks\"\n         show.bind=\"!onDemandLoad\"\n         paginationchange.event=\"beforePaginationChange($event, $index)\"\n    ></nav>\n    <a *ngIf=\"onDemandLoad\" href=\"javascript:void(0);\"\n       (click)=\"dataNavigator.navigatePage('next', $event)\"\n       class=\"app-button btn btn-block\"\n       [ngClass]=\"paginationclass\"\n       [textContent]=\"ondemandmessage\"\n    ></a>\n</div>\n\n<!--This template will be displayed when groupby is specified-->\n<ng-template #groupedListTemplate>\n    <li *ngFor=\"let groupObj of groupedData; let groupIndex = index;\" class=\"app-list-item-group clearfix\">\n        <ul [attr.tabindex]=\"tabindex\" class=\"list-group item-group\" [ngClass]=\"listclass\">\n            <li class=\"app-list-item-header list-item list-group-header\" (click)=\"handleHeaderClick($event)\" [ngClass]=\"{'collapsible-content': collapsible}\">\n            <h4>{{groupObj.key}}\n                <div class=\"header-action\">\n                    <i class=\"app-icon wi action wi-chevron-up\" *ngIf=\"collapsible\"></i>\n                    <span *ngIf=\"showcount\" class=\"label label-default\">{{groupObj.data.length}}</span>\n                    </div>\n                </h4>\n            </li>\n            <ul class=\"list-group clearfix {{direction === 'horizontal' ? 'app-horizontal-list': ''}}\">\n                <li *ngFor=\"let item of groupObj.data; index as $index; trackBy: trackByFn; first as $first; last as $last;\" [attr.tabindex]=\"tabindex\"\n                    class=\"app-list-item group-list-item {{itemsPerRowClass}}\"\n                    [ngClass]=\"listItemRef.itemClass\"\n                    [wmListItem]=\"item\" #listItemRef=\"listItemRef\">\n                    <ng-container [ngTemplateOutlet]=\"listTemplate\"\n                                  [ngTemplateOutletInjector]=\"createCustomInjector('group_' + groupIndex + '_item_' + $index, {item: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets})\"\n                                  [ngTemplateOutletContext]=\"{item: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}\"></ng-container>\n                </li>\n            </ul>\n        </ul>\n    </li>\n</ng-template>\n" }]
+        }], () => [{ type: i0__namespace.Injector }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.ToDatePipe }, { type: i2__namespace.App }, { type: i2__namespace.AppDefaults }, { type: i0__namespace.NgZone }, { type: undefined, decorators: [{
                     type: i0.Attribute,
                     args: ['itemclass.bind']
                 }] }, { type: undefined, decorators: [{
@@ -1818,7 +1820,12 @@
                 }] }, { type: undefined, decorators: [{
                     type: i0.Attribute,
                     args: ['mouseleave.event']
-                }] }, { type: i2__namespace.StatePersistence }, { type: i2__namespace.PaginationService }]; }, { listTemplate: [{
+                }] }, { type: i2__namespace.StatePersistence }, { type: i2__namespace.PaginationService }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], { listTemplate: [{
                 type: i0.ContentChild,
                 args: ['listTemplate']
             }], listLeftActionTemplate: [{
@@ -1837,6 +1844,7 @@
                 type: i0.ViewChildren,
                 args: [ListItemDirective]
             }] }); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(ListComponent, { className: "ListComponent", filePath: "list.component.ts", lineNumber: 91 }); })();
 
     const components = [
         ListComponent,
@@ -1849,7 +1857,7 @@
                 i2$1.PaginationModule,
                 i1.WmComponentsModule] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ListModule, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ListModule, [{
             type: i0.NgModule,
             args: [{
                     imports: [