@wavemaker/app-ng-runtime 11.7.5-rc.5649 → 11.8.0-next.1417111

app-ng-runtime/components/data/list/esm2022/list.module.mjs

@@ -19,7 +19,7 @@ export class ListModule {
             PaginationModule,
             WmComponentsModule] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListModule, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListModule, [{
         type: NgModule,
         args: [{
                 imports: [
@@ -37,4 +37,4 @@ export class ListModule {
         WmComponentsModule], exports: [ListComponent,
         ListItemDirective] }); })();
 i0.ɵɵsetComponentScope(ListComponent, [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i2.PaginationComponent, i3.TextContentDirective, ListItemDirective], []);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlzdC5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL3dpZGdldHMvZGF0YS9saXN0L3NyYy9saXN0Lm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUUvQyxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUVsRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDakQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7Ozs7O0FBRTFELE1BQU0sVUFBVSxHQUFHO0lBQ2YsYUFBYTtJQUNiLGlCQUFpQjtDQUNwQixDQUFDO0FBV0YsTUFBTSxPQUFPLFVBQVU7MkVBQVYsVUFBVTttRUFBVixVQUFVO3VFQVBmLFlBQVk7WUFDWixnQkFBZ0I7WUFDaEIsa0JBQWtCOzt1RkFLYixVQUFVO2NBVHRCLFFBQVE7ZUFBQztnQkFDTixPQUFPLEVBQUU7b0JBQ0wsWUFBWTtvQkFDWixnQkFBZ0I7b0JBQ2hCLGtCQUFrQjtpQkFDckI7Z0JBQ0QsWUFBWSxFQUFFLENBQUMsR0FBRyxVQUFVLENBQUM7Z0JBQzdCLE9BQU8sRUFBRSxDQUFDLEdBQUcsVUFBVSxDQUFDO2FBQzNCOzt3RkFDWSxVQUFVLG1CQWJuQixhQUFhO1FBQ2IsaUJBQWlCLGFBS2IsWUFBWTtRQUNaLGdCQUFnQjtRQUNoQixrQkFBa0IsYUFSdEIsYUFBYTtRQUNiLGlCQUFpQjt1QkFEakIsYUFBYSwwR0FDYixpQkFBaUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcblxuaW1wb3J0IHsgV21Db21wb25lbnRzTW9kdWxlIH0gZnJvbSAnQHdtL2NvbXBvbmVudHMvYmFzZSc7XG5pbXBvcnQgeyBQYWdpbmF0aW9uTW9kdWxlIH0gZnJvbSAnQHdtL2NvbXBvbmVudHMvZGF0YS9wYWdpbmF0aW9uJztcblxuaW1wb3J0IHsgTGlzdENvbXBvbmVudCB9IGZyb20gJy4vbGlzdC5jb21wb25lbnQnO1xuaW1wb3J0IHsgTGlzdEl0ZW1EaXJlY3RpdmUgfSBmcm9tICcuL2xpc3QtaXRlbS5kaXJlY3RpdmUnO1xuXG5jb25zdCBjb21wb25lbnRzID0gW1xuICAgIExpc3RDb21wb25lbnQsXG4gICAgTGlzdEl0ZW1EaXJlY3RpdmVcbl07XG5cbkBOZ01vZHVsZSh7XG4gICAgaW1wb3J0czogW1xuICAgICAgICBDb21tb25Nb2R1bGUsXG4gICAgICAgIFBhZ2luYXRpb25Nb2R1bGUsXG4gICAgICAgIFdtQ29tcG9uZW50c01vZHVsZVxuICAgIF0sXG4gICAgZGVjbGFyYXRpb25zOiBbLi4uY29tcG9uZW50c10sXG4gICAgZXhwb3J0czogWy4uLmNvbXBvbmVudHNdXG59KVxuZXhwb3J0IGNsYXNzIExpc3RNb2R1bGUge1xufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlzdC5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL3dpZGdldHMvZGF0YS9saXN0L3NyYy9saXN0Lm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUUvQyxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUVsRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDakQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7Ozs7O0FBRTFELE1BQU0sVUFBVSxHQUFHO0lBQ2YsYUFBYTtJQUNiLGlCQUFpQjtDQUNwQixDQUFDO0FBV0YsTUFBTSxPQUFPLFVBQVU7MkVBQVYsVUFBVTttRUFBVixVQUFVO3VFQVBmLFlBQVk7WUFDWixnQkFBZ0I7WUFDaEIsa0JBQWtCOztpRkFLYixVQUFVO2NBVHRCLFFBQVE7ZUFBQztnQkFDTixPQUFPLEVBQUU7b0JBQ0wsWUFBWTtvQkFDWixnQkFBZ0I7b0JBQ2hCLGtCQUFrQjtpQkFDckI7Z0JBQ0QsWUFBWSxFQUFFLENBQUMsR0FBRyxVQUFVLENBQUM7Z0JBQzdCLE9BQU8sRUFBRSxDQUFDLEdBQUcsVUFBVSxDQUFDO2FBQzNCOzt3RkFDWSxVQUFVLG1CQWJuQixhQUFhO1FBQ2IsaUJBQWlCLGFBS2IsWUFBWTtRQUNaLGdCQUFnQjtRQUNoQixrQkFBa0IsYUFSdEIsYUFBYTtRQUNiLGlCQUFpQjt1QkFEakIsYUFBYSwwR0FDYixpQkFBaUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcblxuaW1wb3J0IHsgV21Db21wb25lbnRzTW9kdWxlIH0gZnJvbSAnQHdtL2NvbXBvbmVudHMvYmFzZSc7XG5pbXBvcnQgeyBQYWdpbmF0aW9uTW9kdWxlIH0gZnJvbSAnQHdtL2NvbXBvbmVudHMvZGF0YS9wYWdpbmF0aW9uJztcblxuaW1wb3J0IHsgTGlzdENvbXBvbmVudCB9IGZyb20gJy4vbGlzdC5jb21wb25lbnQnO1xuaW1wb3J0IHsgTGlzdEl0ZW1EaXJlY3RpdmUgfSBmcm9tICcuL2xpc3QtaXRlbS5kaXJlY3RpdmUnO1xuXG5jb25zdCBjb21wb25lbnRzID0gW1xuICAgIExpc3RDb21wb25lbnQsXG4gICAgTGlzdEl0ZW1EaXJlY3RpdmVcbl07XG5cbkBOZ01vZHVsZSh7XG4gICAgaW1wb3J0czogW1xuICAgICAgICBDb21tb25Nb2R1bGUsXG4gICAgICAgIFBhZ2luYXRpb25Nb2R1bGUsXG4gICAgICAgIFdtQ29tcG9uZW50c01vZHVsZVxuICAgIF0sXG4gICAgZGVjbGFyYXRpb25zOiBbLi4uY29tcG9uZW50c10sXG4gICAgZXhwb3J0czogWy4uLmNvbXBvbmVudHNdXG59KVxuZXhwb3J0IGNsYXNzIExpc3RNb2R1bGUge1xufVxuIl19

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

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { ViewContainerRef, Directive, Optional, HostBinding, HostListener, Input, Component, Attribute, ContentChild, ContentChildren, ViewChild, ViewChildren, NgModule } from '@angular/core';
+import { ViewContainerRef, Directive, Optional, HostBinding, HostListener, Input, Component, Attribute, Inject, ContentChild, ContentChildren, ViewChild, ViewChildren, NgModule } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@wm/components/base';
-import { register, PROP_BOOLEAN, PROP_STRING, PROP_ANY, PROP_NUMBER, StylableComponent, styler, APPLY_STYLES_TYPE, extractDataSourceName, NAVIGATION_TYPE, getOrderedDataset, groupData, unsupportedStatePersistenceTypes, DEBOUNCE_TIMES, configureDnD, handleHeaderClick, toggleAllHeaders, provideAsWidgetRef, WmComponentsModule } from '@wm/components/base';
+import { PROP_BOOLEAN, PROP_STRING, PROP_ANY, PROP_NUMBER, register, StylableComponent, APPLY_STYLES_TYPE, styler, extractDataSourceName, NAVIGATION_TYPE, getOrderedDataset, groupData, unsupportedStatePersistenceTypes, DEBOUNCE_TIMES, configureDnD, handleHeaderClick, toggleAllHeaders, provideAsWidgetRef, WmComponentsModule } from '@wm/components/base';
 import * as i2$1 from '@wm/components/data/pagination';
 import { PaginationComponent, PaginationModule } from '@wm/components/data/pagination';
 import * as i2 from '@wm/core';
@@ -168,15 +168,15 @@ class ListItemDirective {
             i0.ɵɵclassProp("active", ctx.isActive)("disable-item", ctx.disableItem);
         } }, inputs: { wmListItem: "wmListItem" }, exportAs: ["listItemRef"] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListItemDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListItemDirective, [{
         type: Directive,
         args: [{
                 selector: '[wmListItem]',
                 exportAs: 'listItemRef'
             }]
-    }], function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i2.App }, { type: ListComponent, decorators: [{
+    }], () => [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i2.App }, { type: ListComponent, decorators: [{
                 type: Optional
-            }] }]; }, { isActive: [{
+            }] }], { isActive: [{
             type: HostBinding,
             args: ['class.active']
         }], disableItem: [{
@@ -423,30 +423,32 @@ const _c0 = ["listTemplate"];
 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.ɵɵelementStart(0, "div", 13)(1, "h3", 14)(2, "div", 15);
-    i0.ɵɵelement(3, "i", 16);
+    i0.ɵɵelementStart(0, "div", 14)(1, "h3", 15)(2, "div", 16);
+    i0.ɵɵelement(3, "i", 17);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 15);
-    i0.ɵɵelement(5, "div", 17)(6, "div", 18);
+    i0.ɵɵelementStart(4, "div", 16);
+    i0.ɵɵelement(5, "div", 18)(6, "div", 19);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
-    i0.ɵɵclassMapInterpolate1("app-icon panel-icon ", ctx_r0.iconclass, "");
-    i0.ɵɵproperty("hidden", !ctx_r0.iconclass);
+    i0.ɵɵclassMapInterpolate1("app-icon panel-icon ", ctx_r1.iconclass, "");
+    i0.ɵɵproperty("hidden", !ctx_r1.iconclass);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("innerHTML", ctx_r0.title, i0.ɵɵsanitizeHtml);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("innerHTML", ctx_r0.subheading, i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("innerHTML", ctx_r1.title, i0.ɵɵsanitizeHtml);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("innerHTML", ctx_r1.subheading, i0.ɵɵsanitizeHtml);
 } }
-const _c4 = function (a0) { return { "disabled": a0 }; };
 function ListComponent_div_1_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 19)(1, "ul", 20)(2, "li", 21)(3, "a", 22);
-    i0.ɵɵlistener("click", function ListComponent_div_1_Template_a_click_3_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.dataNavigator.navigatePage("prev", $event)); });
-    i0.ɵɵelement(4, "i", 23);
-    i0.ɵɵelementStart(5, "span", 24);
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 20)(1, "ul", 21)(2, "li", 22)(3, "a", 23);
+    i0.ɵɵlistener("click", function ListComponent_div_1_Template_a_click_3_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.dataNavigator.navigatePage("prev", $event)); });
+    i0.ɵɵelement(4, "i", 24);
+    i0.ɵɵelementStart(5, "span", 25);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
@@ -454,108 +456,107 @@ function ListComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵattribute("aria-disabled", ctx_r1.dataNavigator.isDisablePrevious);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c4, ctx_r1.dataNavigator ? ctx_r1.dataNavigator.isDisablePrevious : true));
-    i0.ɵɵadvance(1);
+    i0.ɵɵadvance();
     i0.ɵɵattribute("aria-disabled", ctx_r1.dataNavigator.isDisablePrevious);
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1("Go to Previous page ", ctx_r1.dataNavigator.isDisablePrevious ? ", Disabled" : "", "");
 } }
 function ListComponent_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵelementStart(0, "div", 26);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", "Page " + ctx_r2.dataNavigator.dn.currentPage + " of " + ctx_r2.dataNavigator.pageCount, "");
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", "Page " + ctx_r1.dataNavigator.dn.currentPage + " of " + ctx_r1.dataNavigator.pageCount, "");
 } }
 function ListComponent_div_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵelementStart(0, "div", 27);
     i0.ɵɵtext(1, " Press space bar to toggle drag drop mode, use arrow keys to move selected elements. ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵpropertyInterpolate("id", ctx_r3.titleId);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵpropertyInterpolate("id", ctx_r1.titleId);
 } }
 function ListComponent_div_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵelementStart(0, "div", 28);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r4 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", ctx_r4.ariaText + ctx_r4.currentIndex + " of " + ctx_r4.listItems.length, " ");
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵ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.ɵɵelementStart(0, "li", 29, 30);
+    i0.ɵɵelementStart(0, "li", 30, 1);
     i0.ɵɵelementContainer(2, 31);
     i0.ɵɵ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.ɵɵreference(1);
-    const ctx_r14 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassMapInterpolate1("app-list-item ", ctx_r14.direction === "horizontal" ? "" : ctx_r14.itemsPerRowClass, "");
-    i0.ɵɵproperty("ngClass", _r19.itemClass)("wmListItem", item_r15);
-    i0.ɵɵ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.ɵɵreference(1);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassMapInterpolate1("app-list-item ", ctx_r1.direction === "horizontal" ? "" : ctx_r1.itemsPerRowClass, "");
+    i0.ɵɵproperty("ngClass", listItemRef_r8.itemClass)("wmListItem", item_r4);
+    i0.ɵɵattribute("tabindex", ctx_r1.tabindex);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r14.listTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction6(8, _c5, item_r15, $index_r16, _r19, $first_r17, $last_r18, _r19.currentItemWidgets));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.listTemplate)("ngTemplateOutletInjector", ctx_r1.createCustomInjector("flat_" + $index_r5, i0.ɵɵpureFunction6(9, _c5, item_r4, $index_r5, listItemRef_r8, $first_r6, $last_r7, listItemRef_r8.currentItemWidgets)))("ngTemplateOutletContext", i0.ɵɵ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.ɵɵtemplate(0, ListComponent_ng_template_7_li_0_Template, 3, 15, "li", 28);
+    i0.ɵɵtemplate(0, ListComponent_ng_template_7_li_0_Template, 3, 23, "li", 29);
 } if (rf & 2) {
-    const ctx_r5 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngForOf", ctx_r5.fieldDefs);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngForOf", ctx_r1.fieldDefs);
 } }
 function ListComponent_div_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 32);
 } if (rf & 2) {
-    const ctx_r6 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("textContent", ctx_r6.nodatamessage);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("textContent", ctx_r1.nodatamessage);
 } }
 function ListComponent_div_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 33)(1, "span");
     i0.ɵɵelement(2, "i", 34);
-    i0.ɵɵelementStart(3, "span", 24);
+    i0.ɵɵelementStart(3, "span", 25);
     i0.ɵɵtext(4, "Loading");
     i0.ɵɵelementEnd();
     i0.ɵɵelement(5, "span", 35);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r7 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r7.loadingicon);
+    i0.ɵɵproperty("ngClass", ctx_r1.loadingicon);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("textContent", ctx_r7.loadingdatamsg);
+    i0.ɵɵproperty("textContent", ctx_r1.loadingdatamsg);
 } }
 function ListComponent_div_12_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 36)(1, "ul", 20)(2, "li", 37)(3, "a", 22);
-    i0.ɵɵlistener("click", function ListComponent_div_12_Template_a_click_3_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r20 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r20.dataNavigator.navigatePage("next", $event)); });
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 36)(1, "ul", 21)(2, "li", 37)(3, "a", 23);
+    i0.ɵɵlistener("click", function ListComponent_div_12_Template_a_click_3_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.dataNavigator.navigatePage("next", $event)); });
     i0.ɵɵelement(4, "i", 38);
-    i0.ɵɵelementStart(5, "span", 24);
+    i0.ɵɵelementStart(5, "span", 25);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
-    const ctx_r8 = i0.ɵɵnextContext();
-    i0.ɵɵattribute("aria-disabled", ctx_r8.dataNavigator.isDisableNext);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("aria-disabled", ctx_r1.dataNavigator.isDisableNext);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c4, ctx_r8.dataNavigator ? ctx_r8.dataNavigator.isDisableNext : true));
-    i0.ɵɵadvance(1);
-    i0.ɵɵattribute("aria-disabled", ctx_r8.dataNavigator.isDisableNext);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c4, ctx_r1.dataNavigator ? ctx_r1.dataNavigator.isDisableNext : true));
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("aria-disabled", ctx_r1.dataNavigator.isDisableNext);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("Go to Next page ", ctx_r8.dataNavigator.isDisableNext ? ", Disabled" : "", "");
+    i0.ɵɵ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.ɵɵgetCurrentView();
+    const _r10 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "a", 42);
-    i0.ɵɵlistener("click", function ListComponent_div_13_a_2_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r23 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r23.dataNavigator.navigatePage("next", $event)); });
+    i0.ɵɵlistener("click", function ListComponent_div_13_a_2_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.dataNavigator.navigatePage("next", $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r22 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", ctx_r22.paginationclass)("textContent", ctx_r22.ondemandmessage);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.paginationclass)("textContent", ctx_r1.ondemandmessage);
 } }
 function ListComponent_div_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 39);
@@ -563,10 +564,10 @@ function ListComponent_div_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(2, ListComponent_div_13_a_2_Template, 1, 2, "a", 41);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r9 = i0.ɵɵnextContext();
-    i0.ɵɵ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.ɵɵnextContext();
+    i0.ɵɵ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.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r9.onDemandLoad);
+    i0.ɵɵproperty("ngIf", ctx_r1.onDemandLoad);
 } }
 function ListComponent_ng_template_14_li_0_i_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 51);
@@ -576,65 +577,64 @@ function ListComponent_ng_template_14_li_0_span_7_Template(rf, ctx) { if (rf & 1
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const groupObj_r26 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(groupObj_r26.data.length);
+    const groupObj_r12 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(groupObj_r12.data.length);
 } }
 function ListComponent_ng_template_14_li_0_li_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "li", 53, 30);
+    i0.ɵɵelementStart(0, "li", 53, 1);
     i0.ɵɵelementContainer(2, 31);
     i0.ɵɵ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.ɵɵreference(1);
-    const ctx_r29 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassMapInterpolate1("app-list-item group-list-item ", ctx_r29.itemsPerRowClass, "");
-    i0.ɵɵproperty("ngClass", _r35.itemClass)("wmListItem", item_r31);
-    i0.ɵɵ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.ɵɵreference(1);
+    const groupIndex_r18 = i0.ɵɵnextContext().index;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassMapInterpolate1("app-list-item group-list-item ", ctx_r1.itemsPerRowClass, "");
+    i0.ɵɵproperty("ngClass", listItemRef_r17.itemClass)("wmListItem", item_r13);
+    i0.ɵɵattribute("tabindex", ctx_r1.tabindex);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r29.listTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction6(8, _c5, item_r31, $index_r32, _r35, $first_r33, $last_r34, _r35.currentItemWidgets));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.listTemplate)("ngTemplateOutletInjector", ctx_r1.createCustomInjector("group_" + groupIndex_r18 + "_item_" + $index_r14, i0.ɵɵpureFunction6(9, _c5, item_r13, $index_r14, listItemRef_r17, $first_r15, $last_r16, listItemRef_r17.currentItemWidgets)))("ngTemplateOutletContext", i0.ɵɵ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.ɵɵgetCurrentView();
+    const _r11 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li", 44)(1, "ul", 45)(2, "li", 46);
-    i0.ɵɵlistener("click", function ListComponent_ng_template_14_li_0_Template_li_click_2_listener($event) { i0.ɵɵrestoreView(_r37); const ctx_r36 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r36.handleHeaderClick($event)); });
+    i0.ɵɵlistener("click", function ListComponent_ng_template_14_li_0_Template_li_click_2_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleHeaderClick($event)); });
     i0.ɵɵelementStart(3, "h4");
     i0.ɵɵtext(4);
     i0.ɵɵelementStart(5, "div", 47);
-    i0.ɵɵtemplate(6, ListComponent_ng_template_14_li_0_i_6_Template, 1, 0, "i", 48);
-    i0.ɵɵtemplate(7, ListComponent_ng_template_14_li_0_span_7_Template, 2, 1, "span", 49);
+    i0.ɵɵ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.ɵɵelementEnd()()();
     i0.ɵɵelementStart(8, "ul");
-    i0.ɵɵtemplate(9, ListComponent_ng_template_14_li_0_li_9_Template, 3, 15, "li", 50);
+    i0.ɵɵtemplate(9, ListComponent_ng_template_14_li_0_li_9_Template, 3, 23, "li", 50);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const groupObj_r26 = ctx.$implicit;
-    const ctx_r25 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngClass", ctx_r25.listclass);
-    i0.ɵɵattribute("tabindex", ctx_r25.tabindex);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c6, ctx_r25.collapsible));
+    const groupObj_r12 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.listclass);
+    i0.ɵɵattribute("tabindex", ctx_r1.tabindex);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c6, ctx_r1.collapsible));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", groupObj_r26.key, " ");
+    i0.ɵɵtextInterpolate1("", groupObj_r12.key, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r25.collapsible);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r25.showcount);
-    i0.ɵɵadvance(1);
-    i0.ɵɵclassMapInterpolate1("list-group clearfix ", ctx_r25.direction === "horizontal" ? "app-horizontal-list" : "", "");
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", groupObj_r26.data);
+    i0.ɵɵproperty("ngIf", ctx_r1.collapsible);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.showcount);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMapInterpolate1("list-group clearfix ", ctx_r1.direction === "horizontal" ? "app-horizontal-list" : "", "");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", groupObj_r12.data);
 } }
 function ListComponent_ng_template_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, ListComponent_ng_template_14_li_0_Template, 10, 12, "li", 43);
 } if (rf & 2) {
-    const ctx_r11 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngForOf", ctx_r11.groupedData);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngForOf", ctx_r1.groupedData);
 } }
 const DEFAULT_CLS = 'app-livelist app-panel';
 const WIDGET_CONFIG = { widgetType: 'wm-list', hostClass: DEFAULT_CLS };
@@ -704,10 +704,10 @@ class ListComponent extends StylableComponent {
         }
         $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 = 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;
         styler(this.nativeElement, this, APPLY_STYLES_TYPE.SHELL);
@@ -1710,7 +1710,7 @@ class ListComponent extends StylableComponent {
         super.ngOnDetach();
         this._pageLoad = true;
     }
-    static { this.ɵfac = function ListComponent_Factory(t) { return new (t || ListComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.ToDatePipe), i0.ɵɵdirectiveInject(i2.App), i0.ɵɵdirectiveInject(i2.AppDefaults), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵinjectAttribute('itemclass.bind'), i0.ɵɵinjectAttribute('disableitem.bind'), i0.ɵɵinjectAttribute('dataset.bind'), i0.ɵɵinjectAttribute('datasource.bind'), i0.ɵɵinjectAttribute('mouseenter.event'), i0.ɵɵinjectAttribute('mouseleave.event'), i0.ɵɵdirectiveInject(i2.StatePersistence), i0.ɵɵdirectiveInject(i2.PaginationService)); }; }
+    static { this.ɵfac = function ListComponent_Factory(t) { return new (t || ListComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.ToDatePipe), i0.ɵɵdirectiveInject(i2.App), i0.ɵɵdirectiveInject(i2.AppDefaults), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵinjectAttribute('itemclass.bind'), i0.ɵɵinjectAttribute('disableitem.bind'), i0.ɵɵinjectAttribute('dataset.bind'), i0.ɵɵinjectAttribute('datasource.bind'), i0.ɵɵinjectAttribute('mouseenter.event'), i0.ɵɵinjectAttribute('mouseleave.event'), i0.ɵɵdirectiveInject(i2.StatePersistence), i0.ɵɵdirectiveInject(i2.PaginationService), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ListComponent, selectors: [["div", "wmList", ""]], contentQueries: function ListComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuery(dirIndex, _c0, 5);
             i0.ɵɵcontentQuery(dirIndex, _c1, 5);
@@ -1731,61 +1731,55 @@ class ListComponent extends StylableComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.listItems = _t);
         } }, features: [i0.ɵɵProvidersFeature([
                 provideAsWidgetRef(ListComponent)
-            ]), i0.ɵɵ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.ɵɵtemplate(0, ListComponent_div_0_Template, 7, 6, "div", 0);
-            i0.ɵɵtemplate(1, ListComponent_div_1_Template, 7, 6, "div", 1);
-            i0.ɵɵtemplate(2, ListComponent_div_2_Template, 2, 1, "div", 2);
+            ]), i0.ɵɵ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"], [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.ɵɵgetCurrentView();
+            i0.ɵɵ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.ɵɵelementStart(3, "div");
-            i0.ɵɵtemplate(4, ListComponent_div_4_Template, 2, 1, "div", 3);
-            i0.ɵɵtemplate(5, ListComponent_div_5_Template, 2, 1, "div", 4);
+            i0.ɵɵtemplate(4, ListComponent_div_4_Template, 2, 1, "div", 5)(5, ListComponent_div_5_Template, 2, 1, "div", 6);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "ul", 5);
-            i0.ɵɵ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.ɵɵtemplate(7, ListComponent_ng_template_7_Template, 1, 1, "ng-template", 6);
-            i0.ɵɵelementContainer(8, 7)(9, 7);
+            i0.ɵɵelementStart(6, "ul", 7);
+            i0.ɵɵlistener("keydown.enter", function ListComponent_Template_ul_keydown_enter_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleKeyDown($event, "select")); })("keydown.space", function ListComponent_Template_ul_keydown_space_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleKeyDown($event, "space")); })("keydown.arrowup", function ListComponent_Template_ul_keydown_arrowup_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleKeyDown($event, "focusPrev")); })("keydown.arrowdown", function ListComponent_Template_ul_keydown_arrowdown_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleKeyDown($event, "focusNext")); })("keydown.arrowleft", function ListComponent_Template_ul_keydown_arrowleft_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleKeyDown($event, "focusPrev")); })("keydown.arrowright", function ListComponent_Template_ul_keydown_arrowright_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleKeyDown($event, "focusNext")); })("keydown.shift.arrowup", function ListComponent_Template_ul_keydown_shift_arrowup_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleKeyDown($event, "selectPrev")); })("keydown.shift.arrowdown", function ListComponent_Template_ul_keydown_shift_arrowdown_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleKeyDown($event, "selectNext")); })("keydown.shift.arrowleft", function ListComponent_Template_ul_keydown_shift_arrowleft_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleKeyDown($event, "selectPrev")); })("keydown.shift.arrowright", function ListComponent_Template_ul_keydown_shift_arrowright_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleKeyDown($event, "selectNext")); });
+            i0.ɵɵtemplate(7, ListComponent_ng_template_7_Template, 1, 1, "ng-template", 8);
+            i0.ɵɵelementContainer(8, 9)(9, 9);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(10, ListComponent_div_10_Template, 1, 1, "div", 8);
-            i0.ɵɵtemplate(11, ListComponent_div_11_Template, 6, 2, "div", 9);
-            i0.ɵɵtemplate(12, ListComponent_div_12_Template, 7, 6, "div", 10);
-            i0.ɵɵtemplate(13, ListComponent_div_13_Template, 3, 2, "div", 11);
-            i0.ɵɵtemplate(14, ListComponent_ng_template_14_Template, 1, 1, "ng-template", null, 12, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵ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.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
-            const _r10 = i0.ɵɵreference(15);
+            const groupedListTemplate_r19 = i0.ɵɵreference(15);
             i0.ɵɵproperty("ngIf", ctx.title || ctx.subheading || ctx.iconclass);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.navigation === "Inline" && !ctx.noDataFound);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.navigation === "Inline" && !ctx.noDataFound);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.enablereorder);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.listItems && ctx.enablereorder && ctx.currentIndex);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵclassMapInterpolate2("app-livelist-container clearfix ", ctx.direction === "horizontal" ? "app-horizontal-list" : "", " ", ctx.listclass, "");
             i0.ɵɵproperty("hidden", ctx.noDataFound && !ctx.variableInflight);
             i0.ɵɵattribute("tabindex", ctx.tabindex);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", _r10);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", groupedListTemplate_r19);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngTemplateOutlet", ctx.listLeftActionTemplate);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngTemplateOutlet", ctx.listRightActionTemplate);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.noDataFound && !ctx.variableInflight);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.variableInflight && !ctx.pulltorefresh);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.navigation === "Inline" && !ctx.noDataFound);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.navigation !== "None");
         } }, encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListComponent, [{
         type: Component,
         args: [{ selector: 'div[wmList]', providers: [
                     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.Injector }, { type: i0.ChangeDetectorRef }, { type: i1.ToDatePipe }, { type: i2.App }, { type: i2.AppDefaults }, { type: i0.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; 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.Injector }, { type: i0.ChangeDetectorRef }, { type: i1.ToDatePipe }, { type: i2.App }, { type: i2.AppDefaults }, { type: i0.NgZone }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['itemclass.bind']
             }] }, { type: undefined, decorators: [{
@@ -1803,7 +1797,12 @@ class ListComponent extends StylableComponent {
             }] }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['mouseleave.event']
-            }] }, { type: i2.StatePersistence }, { type: i2.PaginationService }]; }, { listTemplate: [{
+            }] }, { type: i2.StatePersistence }, { type: i2.PaginationService }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { listTemplate: [{
             type: ContentChild,
             args: ['listTemplate']
         }], listLeftActionTemplate: [{
@@ -1822,6 +1821,7 @@ class ListComponent extends StylableComponent {
             type: ViewChildren,
             args: [ListItemDirective]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ListComponent, { className: "ListComponent", filePath: "list.component.ts", lineNumber: 63 }); })();
 
 const components = [
     ListComponent,
@@ -1834,7 +1834,7 @@ class ListModule {
             PaginationModule,
             WmComponentsModule] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListModule, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListModule, [{
         type: NgModule,
         args: [{
                 imports: [