@wavemaker/app-ng-runtime 11.10.5-rc.6096 → 11.11.0-next.27920

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'), 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';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@wm/components/base'), require('@angular/core'), require('@wm/core'), require('@wm/components/data/pagination'), require('@wm/components/input'), require('rxjs'), require('lodash-es')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/common', '@wm/components/base', '@angular/core', '@wm/core', '@wm/components/data/pagination', '@wm/components/input', 'rxjs', '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.common, global.wm.components.base, global.ng.core, global.wm.core, global.wm.components.data.pagination, global.wm.components.input, global.rxjs, global._));
+})(this, (function (exports, i3, i1, i0, i2, pagination, input, rxjs, lodashEs) { 'use strict';
 
     function _interopNamespaceDefault(e) {
         var n = Object.create(null);
@@ -21,10 +21,9 @@
         return Object.freeze(n);
     }
 
-    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
-    var i1$1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1$1);
+    var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
     var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
-    var i2$1__namespace = /*#__PURE__*/_interopNamespaceDefault(i2$1);
+    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
     var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
 
     const registerProps = () => {
@@ -58,7 +57,7 @@
             ['orderby', i1.PROP_STRING],
             ['paginationclass', i1.PROP_STRING],
             ['pagesize', i1.PROP_NUMBER],
-            ['pulltorefresh', { value: i2.isMobileApp(), ...i1.PROP_BOOLEAN }],
+            ['pulltorefresh', { value: false, ...i1.PROP_BOOLEAN }],
             ['selectfirstitem', i1.PROP_BOOLEAN],
             ['selectionlimit', i1.PROP_NUMBER],
             ['show', { value: true, ...i1.PROP_BOOLEAN }],
@@ -77,7 +76,7 @@
             this.listComponent.lastSelectedItem = this;
         }
         get $index() {
-            return this.context.index;
+            return this.context.$index;
         }
         get $even() {
             return this.context.even;
@@ -193,11 +192,12 @@
                 i0__namespace.ɵɵlistener("focus", function ListItemDirective_focus_HostBindingHandler() { return ctx.onFocus(); });
             } if (rf & 2) {
                 i0__namespace.ɵɵclassProp("active", ctx.isActive)("disable-item", ctx.disableItem);
-            } }, inputs: { wmListItem: "wmListItem" }, exportAs: ["listItemRef"] }); }
+            } }, inputs: { wmListItem: "wmListItem" }, exportAs: ["listItemRef"], standalone: true }); }
     }
     (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ListItemDirective, [{
             type: i0.Directive,
             args: [{
+                    standalone: true,
                     selector: '[wmListItem]',
                     exportAs: 'listItemRef'
                 }]
@@ -216,237 +216,6 @@
                 type: i0.Input
             }] }); })();
 
-    class ListAnimator extends _swipey.SwipeAnimation {
-        constructor(list) {
-            super();
-            this.list = list;
-            this.$el = $(this.list.getNativeElement()).find('ul.app-livelist-container').first();
-            this.leftChildrenCount = this.$el.find('>.app-list-item-left-action-panel > button:visible').length;
-            this.rightChildrenCount = this.$el.find('>.app-list-item-right-action-panel > button:visible').length;
-            // when there are no children in both the templates then do not apply swipeAnimation;
-            if (!this.leftChildrenCount && !this.rightChildrenCount) {
-                return;
-            }
-            // initialise swipe animation on the list component.
-            this.init(this.$el);
-            // retrieves all the button components which are placed outside the listTemplate.
-            this.$btnSubscription = this.list.btnComponents.changes.subscribe(items => this.actionItems = items);
-        }
-        // This method sets the css for left or right action panels based on the template. Appends the actionTemplate before li.
-        createActionPanel(li, actionPanelTemplate) {
-            actionPanelTemplate.css({
-                width: li.outerWidth() + 'px',
-                height: li.outerHeight() + 'px',
-                marginBottom: -1 * li.outerHeight() + 'px',
-                float: 'left',
-                padding: 0
-            });
-            return actionPanelTemplate.insertBefore(li);
-        }
-        // Returns the total width occupied by all the children inside the element
-        computeTotalChildrenWidth($ele) {
-            return lodashEs.reduce($ele.children(), (totalWidth, el) => {
-                return totalWidth + $(el).outerWidth();
-            }, 0);
-        }
-        // Returns amount of transition to be applied on element when swiped left or right
-        computeTransitionProportions($ele) {
-            const totalWidth = this.computeTotalChildrenWidth($ele);
-            const reverse = this.position === 'right';
-            let d = 0;
-            // @ts-ignore
-            return lodashEs.map($ele.children(), e => {
-                const f = (totalWidth - d) / totalWidth;
-                d += $(e).outerWidth();
-                return reverse ? f : (d / totalWidth);
-            });
-        }
-        // Resets the transform applied on the element.
-        resetElement(el) {
-            if (el) {
-                el.css({
-                    transform: 'none',
-                    transition: 'none'
-                });
-            }
-        }
-        resetState() {
-            this.resetElement(this.li);
-            this.resetElement(this.actionPanel);
-            if (this.actionPanel) {
-                this.actionPanel = null;
-            }
-        }
-        // Returns the target button (child element) inside the left and right actionPanels.
-        getChildActionElement(actionTemplate) {
-            if (actionTemplate.children().length) {
-                if (this.position === 'left') {
-                    return actionTemplate.children().first();
-                }
-                return actionTemplate.children().last();
-            }
-        }
-        // create the actionPanels and set the background-color for remaining panel as that of first child element
-        // calculates the children's width and its transition proportionates.
-        initActionPanel(actionTemplate) {
-            this.actionPanel = this.createActionPanel(this.li, actionTemplate);
-            this.actionPanel.css({
-                backgroundColor: this.getChildActionElement(this.actionPanel).css('background-color')
-            });
-            this.limit = this.computeTotalChildrenWidth(this.actionPanel);
-            this.transitionProportions = this.computeTransitionProportions(this.actionPanel);
-        }
-        bounds(e, $d) {
-            const target = $(e.target).closest('li');
-            // default bounds when action template markup is not available.
-            let bounds = {
-                strictUpper: true,
-                strictLower: true,
-                lower: 0,
-                center: 0,
-                upper: 0
-            };
-            // apply swipe animation only on list items having "app-list-item" class.
-            if (!target.hasClass('app-list-item')) {
-                return bounds;
-            }
-            if (!this.li || this.li[0] !== target[0]) {
-                let selector = $d > 0 ? '.app-list-item-left-action-panel' : '.app-list-item-right-action-panel';
-                let actionTemplate = this.$el.find('>' + selector);
-                // when groupby is set select the action panel from the list group items.
-                if (!actionTemplate.length && this.list.groupby) {
-                    selector = 'li > ul.list-group >' + selector;
-                    actionTemplate = this.$el.find('>' + selector);
-                }
-                // check for children visiblity. If children are visible then initiate the action panel.
-                if (!actionTemplate.length || !actionTemplate.find('button:visible').length) {
-                    return bounds;
-                }
-                this.resetState();
-                this.li = target;
-                this.position = actionTemplate.attr('position');
-                this.initActionPanel(actionTemplate);
-                if ($d > 0) {
-                    // bounds while swiping from right to left to open left action panel. It can be moved upto limit value (Upper bound).
-                    bounds = {
-                        strictUpper: false,
-                        lower: 0,
-                        center: 0,
-                        upper: this.limit
-                    };
-                }
-                else {
-                    // bounds while swiping from left to right to open right action panel. It can be moved in reverse direction with -limit value (lower bound).
-                    bounds = {
-                        strictLower: false,
-                        lower: -this.limit,
-                        center: 0,
-                        upper: 0
-                    };
-                }
-            }
-            else if (this.position === 'left') {
-                // when left action panel is visible (i.e. center at limit value) then this can be moved by distance (limit) in reverse direction to close the view.
-                bounds = {
-                    strictUpper: false,
-                    lower: -this.limit,
-                    center: this.limit
-                };
-            }
-            else if (this.position === 'right') {
-                // when right action panel is visible (i.e. center at -limit value) then this can be moved by distance (limit) to close the view.
-                bounds = {
-                    center: -this.limit,
-                    upper: this.limit,
-                    strictLower: false
-                };
-            }
-            return bounds;
-        }
-        context() {
-            return {
-                computeActionTransition: (index, $d) => {
-                    const sign = $d > 0 ? 1 : -1;
-                    if (sign * $d > this.limit) {
-                        // once the distance swiped is beyond the limit, then calculate the proportionate distance moved after the limit value.
-                        return ($d - sign * this.limit) + (this.transitionProportions[index] * sign * this.limit);
-                    }
-                    return this.transitionProportions[index] * $d;
-                }
-            };
-        }
-        animation() {
-            return [{
-                    target: () => this.li,
-                    css: {
-                        transform: 'translate3d(${{$D + $d}}px, 0, 0)'
-                    }
-                }, {
-                    target: () => (this.actionPanel && this.actionPanel.children()),
-                    css: {
-                        transform: 'translate3d(${{computeActionTransition($i, $D + $d)}}px, 0, 0)'
-                    }
-                }];
-        }
-        // Triggers full swipe event on the target element.
-        invokeFullSwipeEvt($event) {
-            let target, actions, index;
-            // Check if button are visible or not, invoke the tap event of the last button which is visible.
-            if (this.position === 'left') {
-                actions = this.actionItems.filter(btn => {
-                    return btn.getAttr('swipe-position') === 'left' && btn.$element.is(':visible');
-                });
-                index = 0;
-            }
-            else {
-                actions = this.actionItems.filter(btn => {
-                    return btn.getAttr('swipe-position') === 'right' && btn.$element.is(':visible');
-                });
-                index = actions.length - 1;
-            }
-            target = actions[index];
-            if (target && target.hasEventCallback('tap')) {
-                target.invokeEventCallback('tap', { $event });
-            }
-            this.resetState();
-            this.li = null;
-        }
-        // Called when swipeEnd is triggered. d contains the total distance covered by the element until touchEnd.
-        onAnimation($event, d) {
-            // set the selecteditem on the list component on swipe.
-            this.list.triggerListItemSelection(this.li, $event);
-            if (this.actionPanel && this.actionPanel.attr('enablefullswipe') === 'true') {
-                const sign = d > 0 ? 1 : -1;
-                const $el = this.getChildActionElement(this.actionPanel);
-                if ($el) {
-                    const index = this.position === 'right' ? this.rightChildrenCount - 1 : 0;
-                    // proportionate amount of distance covered by the target element.
-                    const distPercentage = this.transitionProportions[index] * sign * d * 100 / (this.li.outerWidth() - this.limit + $el.width());
-                    // If distance travelled by the target button element is more than 50% of the list item width then invoke the fullswipe.
-                    if (distPercentage > 50) {
-                        // invoke fullswipe event
-                        this.invokeFullSwipeEvt($event);
-                    }
-                }
-            }
-        }
-        onLower() {
-            if (this.position === 'left') {
-                this.resetState();
-                this.li = null;
-            }
-        }
-        onUpper() {
-            if (this.position === 'right') {
-                this.resetState();
-                this.li = null;
-            }
-        }
-        threshold() {
-            return 10;
-        }
-    }
-
     const _c0 = ["listTemplate"];
     const _c1 = ["listLeftActionTemplate"];
     const _c2 = ["listRightActionTemplate"];
@@ -454,214 +223,214 @@
     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", 14)(1, "h3", 15)(2, "div", 16);
-        i0__namespace.ɵɵelement(3, "i", 17);
+    function ListComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementStart(0, "div", 1)(1, "h3", 12)(2, "div", 13);
+        i0__namespace.ɵɵelement(3, "i", 14);
         i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵelementStart(4, "div", 16);
-        i0__namespace.ɵɵelement(5, "div", 18)(6, "div", 19);
+        i0__namespace.ɵɵelementStart(4, "div", 13);
+        i0__namespace.ɵɵelement(5, "div", 15)(6, "div", 16);
         i0__namespace.ɵɵelementEnd()()();
     } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext();
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
         i0__namespace.ɵɵadvance(3);
-        i0__namespace.ɵɵclassMapInterpolate1("app-icon panel-icon ", ctx_r1.iconclass, "");
-        i0__namespace.ɵɵproperty("hidden", !ctx_r1.iconclass);
+        i0__namespace.ɵɵclassMapInterpolate1("app-icon panel-icon ", ctx_r0.iconclass, "");
+        i0__namespace.ɵɵproperty("hidden", !ctx_r0.iconclass);
         i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵproperty("innerHTML", ctx_r1.title, i0__namespace.ɵɵsanitizeHtml);
+        i0__namespace.ɵɵproperty("innerHTML", ctx_r0.title, i0__namespace.ɵɵsanitizeHtml);
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("innerHTML", ctx_r1.subheading, i0__namespace.ɵɵsanitizeHtml);
+        i0__namespace.ɵɵproperty("innerHTML", ctx_r0.subheading, i0__namespace.ɵɵsanitizeHtml);
     } }
-    function ListComponent_div_1_Template(rf, ctx) { if (rf & 1) {
-        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);
+    function ListComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+        const _r2 = i0__namespace.ɵɵgetCurrentView();
+        i0__namespace.ɵɵelementStart(0, "div", 2)(1, "ul", 17)(2, "li", 18)(3, "a", 19);
+        i0__namespace.ɵɵlistener("click", function ListComponent_Conditional_1_Template_a_click_3_listener($event) { i0__namespace.ɵɵrestoreView(_r2); const ctx_r0 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r0.dataNavigator.navigatePage("prev", $event)); });
+        i0__namespace.ɵɵelement(4, "i", 20);
+        i0__namespace.ɵɵelementStart(5, "span", 21);
         i0__namespace.ɵɵtext(6);
         i0__namespace.ɵɵelementEnd()()()()();
     } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵattribute("aria-disabled", ctx_r1.dataNavigator.isDisablePrevious);
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵattribute("aria-disabled", ctx_r0.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.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(4, _c4, ctx_r0.dataNavigator ? ctx_r0.dataNavigator.isDisablePrevious : true));
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵattribute("aria-disabled", ctx_r1.dataNavigator.isDisablePrevious);
+        i0__namespace.ɵɵattribute("aria-disabled", ctx_r0.dataNavigator.isDisablePrevious);
         i0__namespace.ɵɵadvance(3);
-        i0__namespace.ɵɵtextInterpolate1("Go to Previous page ", ctx_r1.dataNavigator.isDisablePrevious ? ", Disabled" : "", "");
+        i0__namespace.ɵɵtextInterpolate1("Go to Previous page ", ctx_r0.dataNavigator.isDisablePrevious ? ", Disabled" : "", "");
     } }
-    function ListComponent_div_2_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "div", 26);
+    function ListComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementStart(0, "div", 3);
         i0__namespace.ɵɵtext(1);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext();
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵtextInterpolate1(" ", "Page " + ctx_r1.dataNavigator.dn.currentPage + " of " + ctx_r1.dataNavigator.pageCount, "");
+        i0__namespace.ɵɵtextInterpolate1(" ", "Page " + ctx_r0.dataNavigator.dn.currentPage + " of " + ctx_r0.dataNavigator.pageCount, "");
     } }
-    function ListComponent_div_4_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "div", 27);
+    function ListComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementStart(0, "div", 4);
         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_r1 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵpropertyInterpolate("id", ctx_r1.titleId);
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵpropertyInterpolate("id", ctx_r0.titleId);
     } }
-    function ListComponent_div_5_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "div", 28);
+    function ListComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementStart(0, "div", 5);
         i0__namespace.ɵɵtext(1);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext();
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵtextInterpolate1(" ", ctx_r1.ariaText + ctx_r1.currentIndex + " of " + ctx_r1.listItems.length, " ");
+        i0__namespace.ɵɵtextInterpolate1(" ", ctx_r0.ariaText + ctx_r0.currentIndex + " of " + ctx_r0.listItems.length, " ");
     } }
-    function ListComponent_ng_template_7_li_0_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "li", 30, 1);
-        i0__namespace.ɵɵelementContainer(2, 31);
+    function ListComponent_Conditional_7_For_1_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementStart(0, "li", 23, 0);
+        i0__namespace.ɵɵelementContainer(2, 24);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        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);
+        const item_r3 = ctx.$implicit;
+        const $index_r4 = ctx.$index;
+        const ɵ$index_47_r5 = ctx.$index;
+        const ɵ$count_47_r6 = ctx.$count;
+        const listItemRef_r7 = i0__namespace.ɵɵreference(1);
+        const ctx_r0 = i0__namespace.ɵɵnextContext(2);
+        i0__namespace.ɵɵclassMapInterpolate1("app-list-item ", ctx_r0.direction === "horizontal" ? "" : ctx_r0.itemsPerRowClass, "");
+        i0__namespace.ɵɵproperty("ngClass", listItemRef_r7.itemClass)("wmListItem", item_r3);
+        i0__namespace.ɵɵattribute("tabindex", ctx_r0.tabindex);
         i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵproperty("ngTemplateOutlet", ctx_r1.listTemplate)("ngTemplateOutletInjector", ctx_r1.createCustomInjector("falt_" + listItemRef_r8.trackId, 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));
+        i0__namespace.ɵɵproperty("ngTemplateOutlet", ctx_r0.listTemplate)("ngTemplateOutletInjector", ctx_r0.createCustomInjector("falt_" + listItemRef_r7.trackId, i0__namespace.ɵɵpureFunction6(9, _c5, item_r3, $index_r4, listItemRef_r7, ɵ$index_47_r5 === 0, ɵ$index_47_r5 === ɵ$count_47_r6 - 1, listItemRef_r7.currentItemWidgets)))("ngTemplateOutletContext", i0__namespace.ɵɵpureFunction6(16, _c5, item_r3, $index_r4, listItemRef_r7, ɵ$index_47_r5 === 0, ɵ$index_47_r5 === ɵ$count_47_r6 - 1, listItemRef_r7.currentItemWidgets));
     } }
-    function ListComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵtemplate(0, ListComponent_ng_template_7_li_0_Template, 3, 23, "li", 29);
+    function ListComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵrepeaterCreate(0, ListComponent_Conditional_7_For_1_Template, 3, 23, "li", 22, i0__namespace.ɵɵrepeaterTrackByIdentity);
     } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵproperty("ngForOf", ctx_r1.fieldDefs);
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵrepeater(ctx_r0.fieldDefs);
     } }
-    function ListComponent_div_10_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelement(0, "div", 32);
-    } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵproperty("textContent", ctx_r1.nodatamessage);
+    function ListComponent_Conditional_8_For_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelement(0, "i", 29);
     } }
-    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", 25);
-        i0__namespace.ɵɵtext(4, "Loading");
-        i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵelement(5, "span", 35);
-        i0__namespace.ɵɵelementEnd()();
-    } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵproperty("ngClass", ctx_r1.loadingicon);
-        i0__namespace.ɵɵadvance(3);
-        i0__namespace.ɵɵproperty("textContent", ctx_r1.loadingdatamsg);
-    } }
-    function ListComponent_div_12_Template(rf, ctx) { if (rf & 1) {
-        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", 25);
-        i0__namespace.ɵɵtext(6);
-        i0__namespace.ɵɵelementEnd()()()()();
-    } if (rf & 2) {
-        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_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_r1.dataNavigator.isDisableNext ? ", Disabled" : "", "");
-    } }
-    function ListComponent_div_13_a_2_Template(rf, ctx) { if (rf & 1) {
-        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(_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_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);
-        i0__namespace.ɵɵelement(1, "nav", 40);
-        i0__namespace.ɵɵtemplate(2, ListComponent_div_13_a_2_Template, 1, 2, "a", 41);
-        i0__namespace.ɵɵelementEnd();
-    } if (rf & 2) {
-        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_r1.onDemandLoad);
-    } }
-    function ListComponent_ng_template_14_li_0_i_6_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelement(0, "i", 52);
-    } }
-    function ListComponent_ng_template_14_li_0_span_7_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "span", 53);
+    function ListComponent_Conditional_8_For_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementStart(0, "span", 30);
         i0__namespace.ɵɵtext(1);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const groupObj_r12 = i0__namespace.ɵɵnextContext().$implicit;
+        const groupObj_r9 = i0__namespace.ɵɵnextContext().$implicit;
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵtextInterpolate(groupObj_r12.data.length);
+        i0__namespace.ɵɵtextInterpolate(groupObj_r9.data.length);
     } }
-    function ListComponent_ng_template_14_li_0_li_10_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "li", 54, 1);
-        i0__namespace.ɵɵelementContainer(2, 31);
+    function ListComponent_Conditional_8_For_1_For_11_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementStart(0, "li", 33, 0);
+        i0__namespace.ɵɵelementContainer(2, 24);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        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 ctx_r1 = i0__namespace.ɵɵnextContext(3);
-        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);
+        const item_r10 = ctx.$implicit;
+        const $index_r11 = ctx.$index;
+        const ɵ$index_76_r12 = ctx.$index;
+        const ɵ$count_76_r13 = ctx.$count;
+        const listItemRef_r14 = i0__namespace.ɵɵreference(1);
+        const ctx_r0 = i0__namespace.ɵɵnextContext(3);
+        i0__namespace.ɵɵclassMapInterpolate1("app-list-item group-list-item ", ctx_r0.itemsPerRowClass, "");
+        i0__namespace.ɵɵproperty("ngClass", listItemRef_r14.itemClass)("wmListItem", item_r10);
+        i0__namespace.ɵɵattribute("tabindex", ctx_r0.tabindex);
         i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵproperty("ngTemplateOutlet", ctx_r1.listTemplate)("ngTemplateOutletInjector", ctx_r1.createCustomInjector("group_" + listItemRef_r17.trackId, 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));
+        i0__namespace.ɵɵproperty("ngTemplateOutlet", ctx_r0.listTemplate)("ngTemplateOutletInjector", ctx_r0.createCustomInjector("group_" + listItemRef_r14.trackId, i0__namespace.ɵɵpureFunction6(9, _c5, item_r10, $index_r11, listItemRef_r14, ɵ$index_76_r12 === 0, ɵ$index_76_r12 === ɵ$count_76_r13 - 1, listItemRef_r14.currentItemWidgets)))("ngTemplateOutletContext", i0__namespace.ɵɵpureFunction6(16, _c5, item_r10, $index_r11, listItemRef_r14, ɵ$index_76_r12 === 0, ɵ$index_76_r12 === ɵ$count_76_r13 - 1, listItemRef_r14.currentItemWidgets));
     } }
-    function ListComponent_ng_template_14_li_0_Template(rf, ctx) { if (rf & 1) {
-        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(_r11); const ctx_r1 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r1.handleHeaderClick($event)); });
+    function ListComponent_Conditional_8_For_1_Template(rf, ctx) { if (rf & 1) {
+        const _r8 = i0__namespace.ɵɵgetCurrentView();
+        i0__namespace.ɵɵelementStart(0, "li", 25)(1, "ul", 26)(2, "li", 27);
+        i0__namespace.ɵɵlistener("click", function ListComponent_Conditional_8_For_1_Template_li_click_2_listener($event) { i0__namespace.ɵɵrestoreView(_r8); const ctx_r0 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r0.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)(7, ListComponent_ng_template_14_li_0_span_7_Template, 2, 1, "span", 49);
+        i0__namespace.ɵɵelementStart(5, "div", 28);
+        i0__namespace.ɵɵtemplate(6, ListComponent_Conditional_8_For_1_Conditional_6_Template, 1, 0, "i", 29)(7, ListComponent_Conditional_8_For_1_Conditional_7_Template, 2, 1, "span", 30);
         i0__namespace.ɵɵelementEnd()()();
-        i0__namespace.ɵɵelementStart(8, "li", 50)(9, "ul");
-        i0__namespace.ɵɵtemplate(10, ListComponent_ng_template_14_li_0_li_10_Template, 3, 23, "li", 51);
+        i0__namespace.ɵɵelementStart(8, "li", 31)(9, "ul");
+        i0__namespace.ɵɵrepeaterCreate(10, ListComponent_Conditional_8_For_1_For_11_Template, 3, 23, "li", 32, i0__namespace.ɵɵcomponentInstance().trackByFn, true);
         i0__namespace.ɵɵelementEnd()()()();
     } if (rf & 2) {
-        const groupObj_r12 = ctx.$implicit;
-        const ctx_r1 = i0__namespace.ɵɵnextContext(2);
+        const groupObj_r9 = ctx.$implicit;
+        const ctx_r0 = i0__namespace.ɵɵnextContext(2);
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngClass", ctx_r1.listclass);
-        i0__namespace.ɵɵattribute("tabindex", ctx_r1.tabindex);
+        i0__namespace.ɵɵproperty("ngClass", ctx_r0.listclass);
+        i0__namespace.ɵɵattribute("tabindex", ctx_r0.tabindex);
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(11, _c6, ctx_r1.collapsible));
+        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(9, _c6, ctx_r0.collapsible));
         i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵtextInterpolate1("", groupObj_r12.key, " ");
+        i0__namespace.ɵɵtextInterpolate1("", groupObj_r9.key, " ");
         i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵproperty("ngIf", ctx_r1.collapsible);
+        i0__namespace.ɵɵconditional(ctx_r0.collapsible ? 6 : -1);
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngIf", ctx_r1.showcount);
+        i0__namespace.ɵɵconditional(ctx_r0.showcount ? 7 : -1);
         i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵclassMapInterpolate1("list-group clearfix ", ctx_r1.direction === "horizontal" ? "app-horizontal-list" : "", "");
+        i0__namespace.ɵɵclassMapInterpolate1("list-group clearfix ", ctx_r0.direction === "horizontal" ? "app-horizontal-list" : "", "");
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngForOf", groupObj_r12.data)("ngForTrackBy", ctx_r1.trackByFn);
+        i0__namespace.ɵɵrepeater(groupObj_r9.data);
+    } }
+    function ListComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵrepeaterCreate(0, ListComponent_Conditional_8_For_1_Template, 12, 11, "li", 25, i0__namespace.ɵɵrepeaterTrackByIdentity);
+    } if (rf & 2) {
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵrepeater(ctx_r0.groupedData);
     } }
-    function ListComponent_ng_template_14_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵtemplate(0, ListComponent_ng_template_14_li_0_Template, 11, 13, "li", 43);
+    function ListComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelement(0, "div", 8);
     } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵproperty("ngForOf", ctx_r1.groupedData);
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵproperty("textContent", ctx_r0.nodatamessage);
+    } }
+    function ListComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementStart(0, "div", 9)(1, "span");
+        i0__namespace.ɵɵelement(2, "i", 34);
+        i0__namespace.ɵɵelementStart(3, "span", 21);
+        i0__namespace.ɵɵtext(4, "Loading");
+        i0__namespace.ɵɵelementEnd();
+        i0__namespace.ɵɵelement(5, "span", 35);
+        i0__namespace.ɵɵelementEnd()();
+    } if (rf & 2) {
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵadvance(2);
+        i0__namespace.ɵɵproperty("ngClass", ctx_r0.loadingicon);
+        i0__namespace.ɵɵadvance(3);
+        i0__namespace.ɵɵproperty("textContent", ctx_r0.loadingdatamsg);
+    } }
+    function ListComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+        const _r15 = i0__namespace.ɵɵgetCurrentView();
+        i0__namespace.ɵɵelementStart(0, "div", 10)(1, "ul", 17)(2, "li", 36)(3, "a", 19);
+        i0__namespace.ɵɵlistener("click", function ListComponent_Conditional_13_Template_a_click_3_listener($event) { i0__namespace.ɵɵrestoreView(_r15); const ctx_r0 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r0.dataNavigator.navigatePage("next", $event)); });
+        i0__namespace.ɵɵelement(4, "i", 37);
+        i0__namespace.ɵɵelementStart(5, "span", 21);
+        i0__namespace.ɵɵtext(6);
+        i0__namespace.ɵɵelementEnd()()()()();
+    } if (rf & 2) {
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵattribute("aria-disabled", ctx_r0.dataNavigator.isDisableNext);
+        i0__namespace.ɵɵadvance(2);
+        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(4, _c4, ctx_r0.dataNavigator ? ctx_r0.dataNavigator.isDisableNext : true));
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵattribute("aria-disabled", ctx_r0.dataNavigator.isDisableNext);
+        i0__namespace.ɵɵadvance(3);
+        i0__namespace.ɵɵtextInterpolate1("Go to Next page ", ctx_r0.dataNavigator.isDisableNext ? ", Disabled" : "", "");
+    } }
+    function ListComponent_Conditional_14_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+        const _r16 = i0__namespace.ɵɵgetCurrentView();
+        i0__namespace.ɵɵelementStart(0, "a", 40);
+        i0__namespace.ɵɵlistener("click", function ListComponent_Conditional_14_Conditional_2_Template_a_click_0_listener($event) { i0__namespace.ɵɵrestoreView(_r16); const ctx_r0 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r0.dataNavigator.navigatePage("next", $event)); });
+        i0__namespace.ɵɵelementEnd();
+    } if (rf & 2) {
+        const ctx_r0 = i0__namespace.ɵɵnextContext(2);
+        i0__namespace.ɵɵproperty("ngClass", ctx_r0.paginationclass)("textContent", ctx_r0.ondemandmessage);
+    } }
+    function ListComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementStart(0, "div", 11);
+        i0__namespace.ɵɵelement(1, "nav", 38);
+        i0__namespace.ɵɵtemplate(2, ListComponent_Conditional_14_Conditional_2_Template, 1, 2, "a", 39);
+        i0__namespace.ɵɵelementEnd();
+    } if (rf & 2) {
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵproperty("hidden", !ctx_r0.showNavigation || ctx_r0.onDemandLoad && ctx_r0.dataNavigator.isDisableNext || ctx_r0.dataNavigator.dataSize <= ctx_r0.pagesize || !ctx_r0.dataNavigator.dataSize && !(ctx_r0.dataNavigator.datasource == null ? null : ctx_r0.dataNavigator.datasource.pagination == null ? null : ctx_r0.dataNavigator.datasource.pagination.next));
+        i0__namespace.ɵɵadvance(2);
+        i0__namespace.ɵɵconditional(ctx_r0.onDemandLoad ? 2 : -1);
     } }
     const DEFAULT_CLS = 'app-livelist app-panel';
     const WIDGET_CONFIG = { widgetType: 'wm-list', hostClass: DEFAULT_CLS };
@@ -1153,9 +922,6 @@
                     $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) {
@@ -1555,22 +1321,15 @@
                 });
             }
             if (this.fieldDefs.length && this.infScroll) {
-                const smoothScrollEl = this.$element.closest('[wmsmoothscroll]');
-                // if smoothscroll is set to false, then native scroll has to be applied
-                // otherwise smoothscroll events will be binded.
-                if (i2.isMobileApp() && smoothScrollEl.length && smoothScrollEl.attr('wmsmoothscroll') === 'true') {
-                    this.paginationService.bindIScrollEvt(this, i1.DEBOUNCE_TIMES.PAGINATION_DEBOUNCE_TIME);
-                }
-                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.$element.closest('[wmsmoothscroll]');
+                // 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;
         }
@@ -1647,48 +1406,13 @@
             else { // As default append to should be body
                 appendTo = 'body';
             }
-            const options = i2.isMobileApp() ? {} : {
+            const options = {
                 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) {
@@ -1757,62 +1481,60 @@
                 i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.listRightActionTemplate = _t.first);
                 i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.btnComponents = _t);
             } }, viewQuery: function ListComponent_Query(rf, ctx) { if (rf & 1) {
-                i0__namespace.ɵɵviewQuery(i2$1.PaginationComponent, 5);
+                i0__namespace.ɵɵviewQuery(pagination.PaginationComponent, 5);
                 i0__namespace.ɵɵviewQuery(ListItemDirective, 5);
             } if (rf & 2) {
                 let _t;
                 i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.dataNavigator = _t.first);
                 i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.listItems = _t);
-            } }, features: [i0__namespace.ɵɵProvidersFeature([
+            } }, standalone: true, features: [i0__namespace.ɵɵProvidersFeature([
                     i1.provideAsWidgetRef(ListComponent)
-                ]), 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"], [1, "list-group-container"], [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.ɵɵInheritDefinitionFeature, i0__namespace.ɵɵStandaloneFeature], attrs: _c3, decls: 15, vars: 18, consts: [["listItemRef", "listItemRef"], [1, "panel-heading"], ["aria-label", "Page navigation", 1, "app-datanavigator"], ["aria-live", "polite", "aria-atomic", "true", 1, "sr-only"], [1, "sr-only", 3, "id"], ["aria-live", "assertive", 1, "sr-only"], ["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, "ngTemplateOutlet"], [1, "no-data-msg", 3, "textContent"], [1, "loading-data-msg"], [1, "app-datanavigator"], [1, "panel-footer", 3, "hidden"], [1, "panel-title"], [1, "pull-left"], ["aria-hidden", "true", 3, "hidden"], [1, "heading", 3, "innerHTML"], [1, "description", 3, "innerHTML"], [1, "pager"], [1, "previous", 3, "ngClass"], ["href", "javascript:void(0);", 3, "click"], ["aria-hidden", "true", 1, "wi", "wi-chevron-left"], [1, "sr-only"], ["role", "listitem", 3, "class", "ngClass", "wmListItem"], ["role", "listitem", 3, "ngClass", "wmListItem"], [3, "ngTemplateOutlet", "ngTemplateOutletInjector", "ngTemplateOutletContext"], [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"], [1, "app-icon", "wi", "action", "wi-chevron-up"], [1, "label", "label-default"], [1, "list-group-container"], [3, "class", "ngClass", "wmListItem"], [3, "ngClass", "wmListItem"], ["aria-hidden", "true", 1, "app-icon", "panel-icon", "fa-spin", 3, "ngClass"], [1, "loading-text", 3, "textContent"], [1, "next", 3, "ngClass"], ["aria-hidden", "true", 1, "wi", "wi-chevron-right"], ["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);", 1, "app-button", "btn", "btn-block", 3, "ngClass", "textContent"], ["href", "javascript:void(0);", 1, "app-button", "btn", "btn-block", 3, "click", "ngClass", "textContent"]], template: function ListComponent_Template(rf, ctx) { if (rf & 1) {
+                i0__namespace.ɵɵtemplate(0, ListComponent_Conditional_0_Template, 7, 6, "div", 1)(1, ListComponent_Conditional_1_Template, 7, 6, "div", 2)(2, ListComponent_Conditional_2_Template, 2, 1, "div", 3);
                 i0__namespace.ɵɵelementStart(3, "div");
-                i0__namespace.ɵɵtemplate(4, ListComponent_div_4_Template, 2, 1, "div", 5)(5, ListComponent_div_5_Template, 2, 1, "div", 6);
+                i0__namespace.ɵɵtemplate(4, ListComponent_Conditional_4_Template, 2, 1, "div", 4)(5, ListComponent_Conditional_5_Template, 2, 1, "div", 5);
                 i0__namespace.ɵɵelementEnd();
-                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.ɵɵelementStart(6, "ul", 6);
+                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_Conditional_7_Template, 2, 0)(8, ListComponent_Conditional_8_Template, 2, 0);
+                i0__namespace.ɵɵelementContainer(9, 7)(10, 7);
                 i0__namespace.ɵɵelementEnd();
-                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);
+                i0__namespace.ɵɵtemplate(11, ListComponent_Conditional_11_Template, 1, 1, "div", 8)(12, ListComponent_Conditional_12_Template, 6, 2, "div", 9)(13, ListComponent_Conditional_13_Template, 7, 6, "div", 10)(14, ListComponent_Conditional_14_Template, 3, 2, "div", 11);
             } if (rf & 2) {
-                const groupedListTemplate_r18 = i0__namespace.ɵɵreference(15);
-                i0__namespace.ɵɵproperty("ngIf", ctx.title || ctx.subheading || ctx.iconclass);
+                i0__namespace.ɵɵconditional(ctx.title || ctx.subheading || ctx.iconclass ? 0 : -1);
                 i0__namespace.ɵɵadvance();
-                i0__namespace.ɵɵproperty("ngIf", ctx.navigation === "Inline" && !ctx.noDataFound);
+                i0__namespace.ɵɵconditional(ctx.navigation === "Inline" && !ctx.noDataFound ? 1 : -1);
                 i0__namespace.ɵɵadvance();
-                i0__namespace.ɵɵproperty("ngIf", ctx.navigation === "Inline" && !ctx.noDataFound);
+                i0__namespace.ɵɵconditional(ctx.navigation === "Inline" && !ctx.noDataFound ? 2 : -1);
                 i0__namespace.ɵɵadvance(2);
-                i0__namespace.ɵɵproperty("ngIf", ctx.enablereorder);
+                i0__namespace.ɵɵconditional(ctx.enablereorder ? 4 : -1);
                 i0__namespace.ɵɵadvance();
-                i0__namespace.ɵɵproperty("ngIf", ctx.listItems && ctx.enablereorder && ctx.currentIndex);
+                i0__namespace.ɵɵconditional(ctx.listItems && ctx.enablereorder && ctx.currentIndex ? 5 : -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();
-                i0__namespace.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", groupedListTemplate_r18);
-                i0__namespace.ɵɵadvance();
+                i0__namespace.ɵɵconditional(!ctx.groupby ? 7 : 8);
+                i0__namespace.ɵɵadvance(2);
                 i0__namespace.ɵɵproperty("ngTemplateOutlet", ctx.listLeftActionTemplate);
                 i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("ngTemplateOutlet", ctx.listRightActionTemplate);
                 i0__namespace.ɵɵadvance();
-                i0__namespace.ɵɵproperty("ngIf", ctx.noDataFound && !ctx.variableInflight);
+                i0__namespace.ɵɵconditional(ctx.noDataFound && !ctx.variableInflight ? 11 : -1);
                 i0__namespace.ɵɵadvance();
-                i0__namespace.ɵɵproperty("ngIf", ctx.variableInflight && !ctx.pulltorefresh);
+                i0__namespace.ɵɵconditional(ctx.variableInflight && !ctx.pulltorefresh ? 12 : -1);
                 i0__namespace.ɵɵadvance();
-                i0__namespace.ɵɵproperty("ngIf", ctx.navigation === "Inline" && !ctx.noDataFound);
+                i0__namespace.ɵɵconditional(ctx.navigation === "Inline" && !ctx.noDataFound ? 13 : -1);
                 i0__namespace.ɵɵadvance();
-                i0__namespace.ɵɵproperty("ngIf", ctx.navigation !== "None");
-            } }, encapsulation: 2 }); }
+                i0__namespace.ɵɵconditional(ctx.navigation !== "None" ? 14 : -1);
+            } }, dependencies: [i3.CommonModule, i3__namespace.NgClass, i3__namespace.NgTemplateOutlet, i1.WmComponentsModule, i1__namespace.TextContentDirective, pagination.PaginationComponent, ListItemDirective], encapsulation: 2 }); }
     }
     (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ListComponent, [{
             type: i0.Component,
-            args: [{ selector: 'div[wmList]', providers: [
+            args: [{ standalone: true, imports: [i3.CommonModule, i1.WmComponentsModule, pagination.PaginationComponent, ListItemDirective], 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\"\n                          [ngTemplateOutletInjector]=\"createCustomInjector('falt_' + listItemRef.trackId, {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            <li class=\"list-group-container\">\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_' + listItemRef.trackId, {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            </li>\n        </ul>\n    </li>\n</ng-template>\n" }]
+                    ], template: "@if (title || subheading || iconclass) {\n  <div class=\"panel-heading\">\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\n@if (navigation === 'Inline' && !noDataFound) {\n  <div class=\"app-datanavigator\" [attr.aria-disabled]=\"dataNavigator.isDisablePrevious\" aria-label=\"Page navigation\">\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}\n@if (navigation === 'Inline' && !noDataFound) {\n  <div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\"> {{'Page ' + dataNavigator.dn.currentPage + ' of ' + dataNavigator.pageCount }}</div>\n}\n\n<div>\n  @if (enablereorder) {\n    <div id={{titleId}} class=\"sr-only\">\n      Press space bar to toggle drag drop mode, use arrow keys to move selected elements.\n    </div>\n  }\n\n  @if (listItems && enablereorder && currentIndex) {\n    <div aria-live=\"assertive\" class=\"sr-only\" >\n      {{ariaText + currentIndex + ' of ' +  listItems.length}}\n    </div>\n  }\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  @if (!groupby) {\n    @for (item of fieldDefs; track item) {\n      <li 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('falt_' + listItemRef.trackId, {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    }\n  } @else {\n    @for (groupObj of groupedData; track groupObj; let groupIndex = $index) {\n      <li 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                @if (collapsible) {\n                  <i class=\"app-icon wi action wi-chevron-up\"></i>\n                }\n                @if (showcount) {\n                  <span class=\"label label-default\">{{groupObj.data.length}}</span>\n                }\n              </div>\n            </h4>\n          </li>\n          <li class=\"list-group-container\">\n            <ul class=\"list-group clearfix {{direction === 'horizontal' ? 'app-horizontal-list': ''}}\">\n              @for (item of groupObj.data; track trackByFn($index, item)) {\n                <li [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_' + listItemRef.trackId, {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              }\n            </ul>\n          </li>\n        </ul>\n      </li>\n    }\n  }\n  <ng-container [ngTemplateOutlet]=\"listLeftActionTemplate\"></ng-container>\n  <ng-container [ngTemplateOutlet]=\"listRightActionTemplate\"></ng-container>\n</ul>\n\n@if (noDataFound && !variableInflight) {\n  <div class=\"no-data-msg\" [textContent]=\"nodatamessage\"></div>\n}\n\n@if (variableInflight && !pulltorefresh) {\n  <div class=\"loading-data-msg\">\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\n@if (navigation === 'Inline' && !noDataFound) {\n  <div class=\"app-datanavigator\" [attr.aria-disabled]=\"dataNavigator.isDisableNext\">\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\n@if (navigation !== 'None') {\n  <div class=\"panel-footer\" [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    @if (onDemandLoad) {\n      <a 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    }\n  </div>\n}\n\n<!--This template will be displayed when groupby is specified-->\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']
@@ -1850,45 +1572,14 @@
                 args: [input.ButtonComponent]
             }], dataNavigator: [{
                 type: i0.ViewChild,
-                args: [i2$1.PaginationComponent]
+                args: [pagination.PaginationComponent]
             }], listItems: [{
                 type: i0.ViewChildren,
                 args: [ListItemDirective]
             }] }); })();
-    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(ListComponent, { className: "ListComponent", filePath: "list.component.ts", lineNumber: 91 }); })();
-
-    const components = [
-        ListComponent,
-        ListItemDirective
-    ];
-    class ListModule {
-        static { this.ɵfac = function ListModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ListModule)(); }; }
-        static { this.ɵmod = /*@__PURE__*/ i0__namespace.ɵɵdefineNgModule({ type: ListModule }); }
-        static { this.ɵinj = /*@__PURE__*/ i0__namespace.ɵɵdefineInjector({ imports: [i1$1.CommonModule,
-                i2$1.PaginationModule,
-                i1.WmComponentsModule] }); }
-    }
-    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ListModule, [{
-            type: i0.NgModule,
-            args: [{
-                    imports: [
-                        i1$1.CommonModule,
-                        i2$1.PaginationModule,
-                        i1.WmComponentsModule
-                    ],
-                    declarations: [...components],
-                    exports: [...components]
-                }]
-        }], null, null); })();
-    (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0__namespace.ɵɵsetNgModuleScope(ListModule, { declarations: [ListComponent,
-            ListItemDirective], imports: [i1$1.CommonModule,
-            i2$1.PaginationModule,
-            i1.WmComponentsModule], exports: [ListComponent,
-            ListItemDirective] }); })();
-    i0__namespace.ɵɵsetComponentScope(ListComponent, [i1$1__namespace.NgClass, i1$1__namespace.NgForOf, i1$1__namespace.NgIf, i1$1__namespace.NgTemplateOutlet, i2$1__namespace.PaginationComponent, i1__namespace.TextContentDirective, ListItemDirective], []);
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(ListComponent, { className: "ListComponent", filePath: "list.component.ts", lineNumber: 94 }); })();
 
     exports.ListComponent = ListComponent;
     exports.ListItemDirective = ListItemDirective;
-    exports.ListModule = ListModule;
 
 }));