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

app-ng-runtime/components/base/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/core'), require('@wm/security'), require('@wavemaker/focus-trap/dist/focus-trap'), require('@angular/platform-browser'), require('rxjs'), require('rxjs/operators'), require('@angular/forms'), require('@swipey')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@wm/core', '@wm/security', '@wavemaker/focus-trap/dist/focus-trap', '@angular/platform-browser', 'rxjs', 'rxjs/operators', '@angular/forms', '@swipey'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.base = {}), global.ng.core, global.ng.common, global.wm.core, global.wm.security, global.focusTrap, global.ng.platformBrowser, global.rxjs, global.rxjs.operators, global.ng.forms, global.swipey));
-})(this, (function (exports, i0, i1$1, i1, security, focusTrap, i1$2, rxjs, operators, forms, _swipey) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@wm/core'), require('@wm/security'), require('@wavemaker/focus-trap/dist/focus-trap'), require('@angular/platform-browser'), require('rxjs'), require('rxjs/operators'), require('tslib'), require('@angular/forms'), require('@swipey')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@wm/core', '@wm/security', '@wavemaker/focus-trap/dist/focus-trap', '@angular/platform-browser', 'rxjs', 'rxjs/operators', 'tslib', '@angular/forms', '@swipey'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.base = {}), global.ng.core, global.ng.common, global.wm.core, global.wm.security, global.focusTrap, global.ng.platformBrowser, global.rxjs, global.rxjs.operators, global.tslib, global.ng.forms, global.swipey));
+})(this, (function (exports, i0, i1$1, i1, security, focusTrap, i1$2, rxjs, operators, tslib, forms, _swipey) { 'use strict';
 
     function _interopNamespaceDefault(e) {
         var n = Object.create(null);
@@ -927,7 +927,7 @@
         get $element() {
             return $(this.nativeElement);
         }
-        constructor(inj, config, initPromise // Promise on which the initialization has to wait
+        constructor(inj, config, explicitContext, initPromise // Promise on which the initialization has to wait
         ) {
             this.inj = inj;
             this.isAttached = false;
@@ -959,6 +959,7 @@
             this.__cloneable__ = false;
             this.$attrs = new Map();
             this.isMuted = false;
+            this.customInjectorMap = {};
             const elementRef = inj.get(i0.ElementRef);
             this.nativeElement = elementRef.nativeElement;
             //making the code compatible in both the JIT and AOT modes
@@ -1026,6 +1027,9 @@
                     this.setInitProps();
                 });
             }
+            if (explicitContext) {
+                _.extend(this.context, explicitContext);
+            }
         }
         getNativeElement() {
             return this.nativeElement;
@@ -1438,6 +1442,22 @@
         unmute() {
             this.isMuted = false;
         }
+        createCustomInjector(contextKey, context) {
+            if (this.customInjectorMap[contextKey]) {
+                if (this.customInjectorMap[contextKey].context === context) {
+                    return this.customInjectorMap[contextKey].injector;
+                }
+                delete this.customInjectorMap[contextKey];
+            }
+            const inj = i0.Injector.create({
+                providers: [{ provide: 'EXPLICIT_CONTEXT', useValue: context }],
+            });
+            this.customInjectorMap[contextKey] = {
+                context: context,
+                injector: inj
+            };
+            return inj;
+        }
         /**
          * After the host page is attached from cache, this function is called.
          */
@@ -1481,21 +1501,26 @@
             this.destroy.complete();
             this.isAttached = false;
         }
-        static { this.ɵfac = function BaseComponent_Factory(t) { return new (t || BaseComponent)(i0__namespace.ɵɵinject(i0__namespace.Injector), i0__namespace.ɵɵinject(WidgetConfig), i0__namespace.ɵɵinject(Promise)); }; }
+        static { this.ɵfac = function BaseComponent_Factory(t) { return new (t || BaseComponent)(i0__namespace.ɵɵinject(i0__namespace.Injector), i0__namespace.ɵɵinject(WidgetConfig), i0__namespace.ɵɵinject('EXPLICIT_CONTEXT', 8), i0__namespace.ɵɵinject(Promise)); }; }
         static { this.ɵprov = /*@__PURE__*/ i0__namespace.ɵɵdefineInjectable({ token: BaseComponent, factory: BaseComponent.ɵfac }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(BaseComponent, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(BaseComponent, [{
             type: i0.Injectable
-        }], function () { return [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+        }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
                     type: i0.Inject,
                     args: [WidgetConfig]
-                }] }, { type: Promise }]; }, null); })();
+                }] }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }, { type: Promise }], null); })();
 
     class StylableComponent extends BaseComponent {
-        static { this.ɵfac = /*@__PURE__*/ function () { let ɵStylableComponent_BaseFactory; return function StylableComponent_Factory(t) { return (ɵStylableComponent_BaseFactory || (ɵStylableComponent_BaseFactory = i0__namespace.ɵɵgetInheritedFactory(StylableComponent)))(t || StylableComponent); }; }(); }
+        static { this.ɵfac = /*@__PURE__*/ (() => { let ɵStylableComponent_BaseFactory; return function StylableComponent_Factory(t) { return (ɵStylableComponent_BaseFactory || (ɵStylableComponent_BaseFactory = i0__namespace.ɵɵgetInheritedFactory(StylableComponent)))(t || StylableComponent); }; })(); }
         static { this.ɵprov = /*@__PURE__*/ i0__namespace.ɵɵdefineInjectable({ token: StylableComponent, factory: StylableComponent.ɵfac }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(StylableComponent, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(StylableComponent, [{
             type: i0.Injectable
         }], null, null); })();
 
@@ -1513,21 +1538,21 @@
         static { this.ɵfac = function RedrawableDirective_Factory(t) { return new (t || RedrawableDirective)(i0__namespace.ɵɵdirectiveInject(WidgetRef, 2)); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: RedrawableDirective, selectors: [["", "redrawable", ""]] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(RedrawableDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(RedrawableDirective, [{
             type: i0.Directive,
             args: [{
                     selector: '[redrawable]'
                 }]
-        }], function () { return [{ type: undefined, decorators: [{
+        }], () => [{ type: undefined, decorators: [{
                     type: i0.Self
                 }, {
                     type: i0.Inject,
                     args: [WidgetRef]
-                }] }]; }, null); })();
+                }] }], null); })();
 
     class BaseContainerComponent extends StylableComponent {
-        constructor(inj, WIDGET_CONFIG) {
-            super(inj, WIDGET_CONFIG);
+        constructor(inj, WIDGET_CONFIG, explicitContext) {
+            super(inj, WIDGET_CONFIG, explicitContext);
         }
         updateRedrawableComponents(widgets) {
             _.pickBy(widgets, widget => {
@@ -1567,9 +1592,9 @@
                 i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.reDrawableComponents = _t);
             } }, features: [i0__namespace.ɵɵInheritDefinitionFeature] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(BaseContainerComponent, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(BaseContainerComponent, [{
             type: i0.Directive
-        }], function () { return [{ type: i0__namespace.Injector }, { type: undefined }]; }, { reDrawableComponents: [{
+        }], () => [{ type: i0__namespace.Injector }, { type: undefined }, { type: undefined }], { reDrawableComponents: [{
                 type: i0.ContentChildren,
                 args: [RedrawableDirective, { descendants: true }]
             }] }); })();
@@ -1581,17 +1606,17 @@
     };
     class ContainerDirective extends BaseContainerComponent {
         static { this.initializeProps = registerProps$4(); }
-        constructor(inj) {
-            super(inj, WIDGET_CONFIG$4);
+        constructor(inj, explicitContext) {
+            super(inj, WIDGET_CONFIG$4, explicitContext);
             i1.addClass(this.nativeElement, DEFAULT_CLS$3);
             styler(this.nativeElement, this, exports.APPLY_STYLES_TYPE.CONTAINER);
         }
-        static { this.ɵfac = function ContainerDirective_Factory(t) { return new (t || ContainerDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+        static { this.ɵfac = function ContainerDirective_Factory(t) { return new (t || ContainerDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: ContainerDirective, selectors: [["", "wmContainer", ""]], features: [i0__namespace.ɵɵProvidersFeature([
                     provideAsWidgetRef(ContainerDirective)
                 ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ContainerDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ContainerDirective, [{
             type: i0.Directive,
             args: [{
                     selector: '[wmContainer]',
@@ -1599,7 +1624,12 @@
                         provideAsWidgetRef(ContainerDirective)
                     ]
                 }]
-        }], function () { return [{ type: i0__namespace.Injector }]; }, null); })();
+        }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], null); })();
 
     class ImagePipe {
         transform(url, encode, defaultImageUrl) {
@@ -1608,7 +1638,7 @@
         static { this.ɵfac = function ImagePipe_Factory(t) { return new (t || ImagePipe)(); }; }
         static { this.ɵpipe = /*@__PURE__*/ i0__namespace.ɵɵdefinePipe({ name: "image", type: ImagePipe, pure: true }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ImagePipe, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ImagePipe, [{
             type: i0.Pipe,
             args: [{
                     name: 'image'
@@ -1641,8 +1671,8 @@
         set wmItemTemplate(value) {
             this.widget.content = value;
         }
-        constructor(inj, elRef, app) {
-            super(inj, WIDGET_CONFIG$3);
+        constructor(inj, elRef, app, explicitContext) {
+            super(inj, WIDGET_CONFIG$3, explicitContext);
             this.app = app;
             this.nativeElement = elRef.nativeElement;
             // this.context = (<NgForOfContext<ItemTemplateDirective>>(<any>inj).view.context);
@@ -1652,12 +1682,12 @@
             super.ngOnInit();
             this.partialParams.item = this.userComponentParams.dataObject;
         }
-        static { this.ɵfac = function ItemTemplateDirective_Factory(t) { return new (t || ItemTemplateDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i0__namespace.ElementRef), i0__namespace.ɵɵdirectiveInject(i1__namespace.App)); }; }
+        static { this.ɵfac = function ItemTemplateDirective_Factory(t) { return new (t || ItemTemplateDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i0__namespace.ElementRef), i0__namespace.ɵɵdirectiveInject(i1__namespace.App), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: ItemTemplateDirective, selectors: [["", "wmItemTemplate", ""]], inputs: { userComponentParams: "userComponentParams", wmItemTemplate: "wmItemTemplate" }, exportAs: ["itemTemplateRef"], features: [i0__namespace.ɵɵProvidersFeature([
                     provideAsWidgetRef(ItemTemplateDirective)
                 ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ItemTemplateDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ItemTemplateDirective, [{
             type: i0.Directive,
             args: [{
                     selector: '[wmItemTemplate]',
@@ -1666,7 +1696,12 @@
                         provideAsWidgetRef(ItemTemplateDirective)
                     ]
                 }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: i0__namespace.ElementRef }, { type: i1__namespace.App }]; }, { userComponentParams: [{
+        }], () => [{ type: i0__namespace.Injector }, { type: i0__namespace.ElementRef }, { type: i1__namespace.App }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], { userComponentParams: [{
                 type: i0.Input
             }], wmItemTemplate: [{
                 type: i0.Input
@@ -1685,19 +1720,24 @@
     };
     class RepeatTemplateDirective extends StylableComponent {
         static { this.initializeProps = registerProps$2(); }
-        constructor(inj) {
-            super(inj, WIDGET_CONFIG$2);
+        constructor(inj, explicitContext) {
+            super(inj, WIDGET_CONFIG$2, explicitContext);
             styler(this.nativeElement, this);
         }
-        static { this.ɵfac = function RepeatTemplateDirective_Factory(t) { return new (t || RepeatTemplateDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+        static { this.ɵfac = function RepeatTemplateDirective_Factory(t) { return new (t || RepeatTemplateDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: RepeatTemplateDirective, selectors: [["", "wmRepeatTemplate", ""]], features: [i0__namespace.ɵɵInheritDefinitionFeature] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(RepeatTemplateDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(RepeatTemplateDirective, [{
             type: i0.Directive,
             args: [{
                     selector: '[wmRepeatTemplate]'
                 }]
-        }], function () { return [{ type: i0__namespace.Injector }]; }, null); })();
+        }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], null); })();
 
     class LazyLoadDirective {
         constructor(inj, templateRef, viewContainer) {
@@ -1723,12 +1763,12 @@
         static { this.ɵfac = function LazyLoadDirective_Factory(t) { return new (t || LazyLoadDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i0__namespace.TemplateRef), i0__namespace.ɵɵdirectiveInject(i0__namespace.ViewContainerRef)); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: LazyLoadDirective, selectors: [["", "lazyLoad", ""]], inputs: { lazyLoad: "lazyLoad" } }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(LazyLoadDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(LazyLoadDirective, [{
             type: i0.Directive,
             args: [{
                     selector: '[lazyLoad]'
                 }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: i0__namespace.TemplateRef }, { type: i0__namespace.ViewContainerRef }]; }, { lazyLoad: [{
+        }], () => [{ type: i0__namespace.Injector }, { type: i0__namespace.TemplateRef }, { type: i0__namespace.ViewContainerRef }], { lazyLoad: [{
                 type: i0.Input
             }] }); })();
 
@@ -1749,8 +1789,8 @@
     const WIDGET_CONFIG$1 = { widgetType: 'wm-message', hostClass: DEFAULT_CLS$1 };
     class MessageComponent extends StylableComponent {
         static { this.initializeProps = registerProps$1(); }
-        constructor(inj) {
-            super(inj, WIDGET_CONFIG$1);
+        constructor(inj, explicitContext) {
+            super(inj, WIDGET_CONFIG$1, explicitContext);
             this.messageClass = '';
             this.messageIconClass = '';
             this.type = '';
@@ -1809,10 +1849,10 @@
                 super.onPropertyChange(key, nv, ov);
             }
         }
-        static { this.ɵfac = function MessageComponent_Factory(t) { return new (t || MessageComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+        static { this.ɵfac = function MessageComponent_Factory(t) { return new (t || MessageComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: MessageComponent, selectors: [["", "wmMessage", ""]], exportAs: ["wmMessage"], features: [i0__namespace.ɵɵProvidersFeature([
                     provideAsWidgetRef(MessageComponent)
-                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0, decls: 5, vars: 7, consts: [["aria-hidden", "true", 3, "title"], [3, "innerHtml"], ["title", "Close", "type", "button", "aria-label", "Close", 1, "btn-transparent", "close", 3, "hidden", "click"], ["aria-hidden", "true"]], template: function MessageComponent_Template(rf, ctx) { if (rf & 1) {
+                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0, decls: 5, vars: 7, consts: [["aria-hidden", "true", 3, "title"], [3, "innerHtml"], ["title", "Close", "type", "button", "aria-label", "Close", 1, "btn-transparent", "close", 3, "click", "hidden"], ["aria-hidden", "true"]], template: function MessageComponent_Template(rf, ctx) { if (rf & 1) {
                 i0__namespace.ɵɵelement(0, "i", 0)(1, "span", 1);
                 i0__namespace.ɵɵelementStart(2, "button", 2);
                 i0__namespace.ɵɵlistener("click", function MessageComponent_Template_button_click_2_listener($event) { return ctx.dismiss($event); });
@@ -1822,18 +1862,24 @@
             } if (rf & 2) {
                 i0__namespace.ɵɵclassMapInterpolate2("icon ", ctx.type, " ", ctx.messageIconClass, "");
                 i0__namespace.ɵɵproperty("title", ctx.type + "Alert");
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("innerHtml", ctx.caption, i0__namespace.ɵɵsanitizeHtml);
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("hidden", ctx.hideclose);
             } }, encapsulation: 2 }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(MessageComponent, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(MessageComponent, [{
             type: i0.Component,
             args: [{ selector: '[wmMessage]', providers: [
                         provideAsWidgetRef(MessageComponent)
                     ], exportAs: 'wmMessage', template: "<i aria-hidden=\"true\" [title]=\"type + 'Alert'\" class=\"icon {{type}} {{messageIconClass}}\"></i>\n<span [innerHtml]=\"caption\"></span>\n<button title=\"Close\" type=\"button\" class=\"btn-transparent close\" [hidden]=\"hideclose\" (click)=\"dismiss($event)\" aria-label=\"Close\">\n    <span aria-hidden=\"true\">&times;</span>\n</button>\n" }]
-        }], function () { return [{ type: i0__namespace.Injector }]; }, null); })();
+        }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], null); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(MessageComponent, { className: "MessageComponent", filePath: "widgets/common/message/message.component.ts", lineNumber: 22 }); })();
 
     const registerProps = () => {
         register$1('wm-partial', new Map([
@@ -1845,8 +1891,8 @@
     const WIDGET_CONFIG = { widgetType: 'wm-partial', hostClass: DEFAULT_CLS };
     class PartialDirective extends StylableComponent {
         static { this.initializeProps = registerProps(); }
-        constructor(inj, viewport) {
-            super(inj, WIDGET_CONFIG);
+        constructor(inj, viewport, explicitContext) {
+            super(inj, WIDGET_CONFIG, explicitContext);
             this.viewport = viewport;
             this.registerDestroyListener(this.viewport.subscribe("resize" /* ViewportEvent.RESIZE */, data => this.callback('resize', data)));
             this.registerDestroyListener(this.viewport.subscribe("orientationchange" /* ViewportEvent.ORIENTATION_CHANGE */, data => this.callback('orientationchange', data)));
@@ -1865,12 +1911,12 @@
             this.callback('destroy');
             super.ngOnDestroy();
         }
-        static { this.ɵfac = function PartialDirective_Factory(t) { return new (t || PartialDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1__namespace.Viewport)); }; }
+        static { this.ɵfac = function PartialDirective_Factory(t) { return new (t || PartialDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1__namespace.Viewport), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: PartialDirective, selectors: [["", "wmPartial", ""]], features: [i0__namespace.ɵɵProvidersFeature([
                     provideAsWidgetRef(PartialDirective)
                 ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PartialDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PartialDirective, [{
             type: i0.Directive,
             args: [{
                     selector: '[wmPartial]',
@@ -1878,7 +1924,12 @@
                         provideAsWidgetRef(PartialDirective)
                     ]
                 }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: i1__namespace.Viewport }]; }, null); })();
+        }], () => [{ type: i0__namespace.Injector }, { type: i1__namespace.Viewport }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], null); })();
 
     class PartialParamHandlerDirective {
         constructor(widgetRef) {
@@ -1905,17 +1956,17 @@
         static { this.ɵfac = function PartialParamHandlerDirective_Factory(t) { return new (t || PartialParamHandlerDirective)(i0__namespace.ɵɵdirectiveInject(WidgetRef, 2)); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: PartialParamHandlerDirective, selectors: [["", "partialContainer", ""]] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PartialParamHandlerDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PartialParamHandlerDirective, [{
             type: i0.Directive,
             args: [{
                     selector: '[partialContainer]',
                 }]
-        }], function () { return [{ type: undefined, decorators: [{
+        }], () => [{ type: undefined, decorators: [{
                     type: i0.Self
                 }, {
                     type: i0.Inject,
                     args: [WidgetRef]
-                }] }]; }, null); })();
+                }] }], null); })();
     class PartialParamDirective {
         constructor(bindValue, type, partialParamsProvider) {
             this.bindValue = bindValue;
@@ -1928,18 +1979,18 @@
         static { this.ɵfac = function PartialParamDirective_Factory(t) { return new (t || PartialParamDirective)(i0__namespace.ɵɵinjectAttribute('value.bind'), i0__namespace.ɵɵinjectAttribute('type'), i0__namespace.ɵɵdirectiveInject(PartialParamHandlerDirective)); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: PartialParamDirective, selectors: [["", "wmParam", ""]], inputs: { name: "name", value: "value" } }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PartialParamDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PartialParamDirective, [{
             type: i0.Directive,
             args: [{
                     selector: '[wmParam]',
                 }]
-        }], function () { return [{ type: undefined, decorators: [{
+        }], () => [{ type: undefined, decorators: [{
                     type: i0.Attribute,
                     args: ['value.bind']
                 }] }, { type: undefined, decorators: [{
                     type: i0.Attribute,
                     args: ['type']
-                }] }, { type: PartialParamHandlerDirective }]; }, { name: [{
+                }] }, { type: PartialParamHandlerDirective }], { name: [{
                 type: i0.Input
             }], value: [{
                 type: i0.Input
@@ -2015,12 +2066,12 @@
         static { this.ɵfac = function PartialContainerDirective_Factory(t) { return new (t || PartialContainerDirective)(i0__namespace.ɵɵdirectiveInject(WidgetRef, 2), i0__namespace.ɵɵdirectiveInject(i0__namespace.ViewContainerRef), i0__namespace.ɵɵdirectiveInject(i0__namespace.ElementRef), i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1__namespace.App), i0__namespace.ɵɵinjectAttribute('content'), i0__namespace.ɵɵdirectiveInject(i0__namespace.ComponentFactoryResolver), i0__namespace.ɵɵdirectiveInject(i1__namespace.PartialRefProvider)); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: PartialContainerDirective, selectors: [["", "partialContainer", ""]] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PartialContainerDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PartialContainerDirective, [{
             type: i0.Directive,
             args: [{
                     selector: '[partialContainer]'
                 }]
-        }], function () { return [{ type: undefined, decorators: [{
+        }], () => [{ type: undefined, decorators: [{
                     type: i0.Self
                 }, {
                     type: i0.Inject,
@@ -2028,7 +2079,7 @@
                 }] }, { type: i0__namespace.ViewContainerRef }, { type: i0__namespace.ElementRef }, { type: i0__namespace.Injector }, { type: i1__namespace.App }, { type: undefined, decorators: [{
                     type: i0.Attribute,
                     args: ['content']
-                }] }, { type: i0__namespace.ComponentFactoryResolver }, { type: i1__namespace.PartialRefProvider }]; }, null); })();
+                }] }, { type: i0__namespace.ComponentFactoryResolver }, { type: i1__namespace.PartialRefProvider }], null); })();
 
     class ShowInDeviceDirective {
         constructor(elRef, widget, viewContainerRef, inj, templateRef) {
@@ -2085,15 +2136,15 @@
         static { this.ɵfac = function ShowInDeviceDirective_Factory(t) { return new (t || ShowInDeviceDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.ElementRef), i0__namespace.ɵɵdirectiveInject(WidgetRef), i0__namespace.ɵɵdirectiveInject(i0__namespace.ViewContainerRef), i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i0__namespace.TemplateRef)); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: ShowInDeviceDirective, selectors: [["", "wmShowInDevice", ""]], inputs: { wmShowInDevice: "wmShowInDevice" } }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ShowInDeviceDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ShowInDeviceDirective, [{
             type: i0.Directive,
             args: [{
                     selector: '[wmShowInDevice]'
                 }]
-        }], function () { return [{ type: i0__namespace.ElementRef }, { type: BaseComponent, decorators: [{
+        }], () => [{ type: i0__namespace.ElementRef }, { type: BaseComponent, decorators: [{
                     type: i0.Inject,
                     args: [WidgetRef]
-                }] }, { type: i0__namespace.ViewContainerRef }, { type: i0__namespace.Injector }, { type: i0__namespace.TemplateRef }]; }, { wmShowInDevice: [{
+                }] }, { type: i0__namespace.ViewContainerRef }, { type: i0__namespace.Injector }, { type: i0__namespace.TemplateRef }], { wmShowInDevice: [{
                 type: i0.Input
             }] }); })();
 
@@ -2153,9 +2204,9 @@
                 preventDefault: false,
                 momentum: true,
                 bounce: false,
-                mouseWheel: true,
-                disablePointer: true,
-                disableTouch: false,
+                mouseWheel: true, // for preview in browser support
+                disablePointer: true, // disable the pointer events as it causes lag in scrolling (jerky).
+                disableTouch: false, // false to be usable with touch devices
                 disableMouse: false // false to be usable with a mouse (desktop)
             }, el = this._$el[0];
             if (!el.children.length) {
@@ -2273,12 +2324,12 @@
         static { this.ɵfac = function SmoothScrollDirective_Factory(t) { return new (t || SmoothScrollDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i0__namespace.ElementRef), i0__namespace.ɵɵdirectiveInject(i1__namespace.App)); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: SmoothScrollDirective, selectors: [["", "wmSmoothscroll", ""]], inputs: { wmSmoothscroll: "wmSmoothscroll" } }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SmoothScrollDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SmoothScrollDirective, [{
             type: i0.Directive,
             args: [{
                     selector: '[wmSmoothscroll]'
                 }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: i0__namespace.ElementRef }, { type: i1__namespace.App }]; }, { wmSmoothscroll: [{
+        }], () => [{ type: i0__namespace.Injector }, { type: i0__namespace.ElementRef }, { type: i1__namespace.App }], { wmSmoothscroll: [{
                 type: i0.Input
             }] }); })();
     /**
@@ -2327,12 +2378,12 @@
         static { this.ɵfac = function TextContentDirective_Factory(t) { return new (t || TextContentDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.ElementRef)); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: TextContentDirective, selectors: [["", "textContent", ""]], inputs: { textContent: "textContent" } }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TextContentDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TextContentDirective, [{
             type: i0.Directive,
             args: [{
                     selector: '[textContent]'
                 }]
-        }], function () { return [{ type: i0__namespace.ElementRef }]; }, { textContent: [{
+        }], () => [{ type: i0__namespace.ElementRef }], { textContent: [{
                 type: i0.Input
             }] }); })();
 
@@ -2375,12 +2426,12 @@
         static { this.ɵfac = function TrailingZeroDecimalPipe_Factory(t) { return new (t || TrailingZeroDecimalPipe)(i0__namespace.ɵɵdirectiveInject(i1$1__namespace.DecimalPipe, 16)); }; }
         static { this.ɵpipe = /*@__PURE__*/ i0__namespace.ɵɵdefinePipe({ name: "trailingZeroDecimalPipe", type: TrailingZeroDecimalPipe, pure: true }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TrailingZeroDecimalPipe, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TrailingZeroDecimalPipe, [{
             type: i0.Pipe,
             args: [{
                     name: 'trailingZeroDecimalPipe'
                 }]
-        }], function () { return [{ type: i1$1__namespace.DecimalPipe }]; }, null); })();
+        }], () => [{ type: i1$1__namespace.DecimalPipe }], null); })();
     class ToDatePipe extends WmPipe {
         // This method calls the custom formatter fn after applying the exisitng date pattern
         returnFn(data, args) {
@@ -2430,12 +2481,12 @@
         static { this.ɵfac = function ToDatePipe_Factory(t) { return new (t || ToDatePipe)(i0__namespace.ɵɵdirectiveInject(i1$1__namespace.DatePipe, 16), i0__namespace.ɵɵdirectiveInject(i1__namespace.AbstractI18nService, 16), i0__namespace.ɵɵdirectiveInject(i1__namespace.CustomPipeManager, 16)); }; }
         static { this.ɵpipe = /*@__PURE__*/ i0__namespace.ɵɵdefinePipe({ name: "toDate", type: ToDatePipe, pure: true }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ToDatePipe, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ToDatePipe, [{
             type: i0.Pipe,
             args: [{
                     name: 'toDate'
                 }]
-        }], function () { return [{ type: i1$1__namespace.DatePipe }, { type: i1__namespace.AbstractI18nService }, { type: i1__namespace.CustomPipeManager }]; }, null); })();
+        }], () => [{ type: i1$1__namespace.DatePipe }, { type: i1__namespace.AbstractI18nService }, { type: i1__namespace.CustomPipeManager }], null); })();
     class ToNumberPipe {
         transform(data, fracSize) {
             if (fracSize && !String(fracSize).match(/^(\d+)?\.((\d+)(-(\d+))?)?$/)) {
@@ -2454,15 +2505,15 @@
         static { this.ɵfac = function ToNumberPipe_Factory(t) { return new (t || ToNumberPipe)(i0__namespace.ɵɵdirectiveInject(i1$1__namespace.DecimalPipe, 16), i0__namespace.ɵɵdirectiveInject(i1.AbstractI18nService, 16)); }; }
         static { this.ɵpipe = /*@__PURE__*/ i0__namespace.ɵɵdefinePipe({ name: "toNumber", type: ToNumberPipe, pure: true }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ToNumberPipe, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ToNumberPipe, [{
             type: i0.Pipe,
             args: [{
                     name: 'toNumber'
                 }]
-        }], function () { return [{ type: i1$1__namespace.DecimalPipe }, { type: i1__namespace.AbstractI18nService, decorators: [{
+        }], () => [{ type: i1$1__namespace.DecimalPipe }, { type: i1__namespace.AbstractI18nService, decorators: [{
                     type: i0.Inject,
                     args: [i1.AbstractI18nService]
-                }] }]; }, null); })();
+                }] }], null); })();
     class ToCurrencyPipe {
         transform(data, currencySymbol, fracSize) {
             const _currencySymbol = (i1.CURRENCY_INFO[currencySymbol] || {}).symbol || currencySymbol || '';
@@ -2480,15 +2531,15 @@
         static { this.ɵfac = function ToCurrencyPipe_Factory(t) { return new (t || ToCurrencyPipe)(i0__namespace.ɵɵdirectiveInject(i1$1__namespace.DecimalPipe, 16), i0__namespace.ɵɵdirectiveInject(i1.AbstractI18nService, 16)); }; }
         static { this.ɵpipe = /*@__PURE__*/ i0__namespace.ɵɵdefinePipe({ name: "toCurrency", type: ToCurrencyPipe, pure: true }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ToCurrencyPipe, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ToCurrencyPipe, [{
             type: i0.Pipe,
             args: [{
                     name: 'toCurrency'
                 }]
-        }], function () { return [{ type: i1$1__namespace.DecimalPipe }, { type: i1__namespace.AbstractI18nService, decorators: [{
+        }], () => [{ type: i1$1__namespace.DecimalPipe }, { type: i1__namespace.AbstractI18nService, decorators: [{
                     type: i0.Inject,
                     args: [i1.AbstractI18nService]
-                }] }]; }, null); })();
+                }] }], null); })();
     class PrefixPipe {
         transform(data, padding) {
             return (_.isUndefined(data) || data === null || data === '') ? data : ((padding || '') + data);
@@ -2496,7 +2547,7 @@
         static { this.ɵfac = function PrefixPipe_Factory(t) { return new (t || PrefixPipe)(); }; }
         static { this.ɵpipe = /*@__PURE__*/ i0__namespace.ɵɵdefinePipe({ name: "prefix", type: PrefixPipe, pure: true }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PrefixPipe, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PrefixPipe, [{
             type: i0.Pipe,
             args: [{
                     name: 'prefix'
@@ -2509,7 +2560,7 @@
         static { this.ɵfac = function SuffixPipe_Factory(t) { return new (t || SuffixPipe)(); }; }
         static { this.ɵpipe = /*@__PURE__*/ i0__namespace.ɵɵdefinePipe({ name: "suffix", type: SuffixPipe, pure: true }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SuffixPipe, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SuffixPipe, [{
             type: i0.Pipe,
             args: [{
                     name: 'suffix'
@@ -2543,12 +2594,12 @@
         static { this.ɵfac = function CustomPipe_Factory(t) { return new (t || CustomPipe)(i0__namespace.ɵɵdirectiveInject(i1__namespace.CustomPipeManager, 16)); }; }
         static { this.ɵpipe = /*@__PURE__*/ i0__namespace.ɵɵdefinePipe({ name: "custom", type: CustomPipe, pure: true }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CustomPipe, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CustomPipe, [{
             type: i0.Pipe,
             args: [{
                     name: 'custom'
                 }]
-        }], function () { return [{ type: i1__namespace.CustomPipeManager }]; }, null); })();
+        }], () => [{ type: i1__namespace.CustomPipeManager }], null); })();
     class TimeFromNowPipe {
         transform(data) {
             let timestamp;
@@ -2561,17 +2612,17 @@
         static { this.ɵfac = function TimeFromNowPipe_Factory(t) { return new (t || TimeFromNowPipe)(); }; }
         static { this.ɵpipe = /*@__PURE__*/ i0__namespace.ɵɵdefinePipe({ name: "timeFromNow", type: TimeFromNowPipe, pure: true }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TimeFromNowPipe, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TimeFromNowPipe, [{
             type: i0.Pipe,
             args: [{
                     name: 'timeFromNow'
                 }]
         }], null, null); })();
     class NumberToStringPipe extends ToNumberPipe {
-        static { this.ɵfac = /*@__PURE__*/ function () { let ɵNumberToStringPipe_BaseFactory; return function NumberToStringPipe_Factory(t) { return (ɵNumberToStringPipe_BaseFactory || (ɵNumberToStringPipe_BaseFactory = i0__namespace.ɵɵgetInheritedFactory(NumberToStringPipe)))(t || NumberToStringPipe); }; }(); }
+        static { this.ɵfac = /*@__PURE__*/ (() => { let ɵNumberToStringPipe_BaseFactory; return function NumberToStringPipe_Factory(t) { return (ɵNumberToStringPipe_BaseFactory || (ɵNumberToStringPipe_BaseFactory = i0__namespace.ɵɵgetInheritedFactory(NumberToStringPipe)))(t || NumberToStringPipe); }; })(); }
         static { this.ɵpipe = /*@__PURE__*/ i0__namespace.ɵɵdefinePipe({ name: "numberToString", type: NumberToStringPipe, pure: true }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(NumberToStringPipe, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(NumberToStringPipe, [{
             type: i0.Pipe,
             args: [{
                     name: 'numberToString'
@@ -2584,7 +2635,7 @@
         static { this.ɵfac = function StringToNumberPipe_Factory(t) { return new (t || StringToNumberPipe)(); }; }
         static { this.ɵpipe = /*@__PURE__*/ i0__namespace.ɵɵdefinePipe({ name: "stringToNumber", type: StringToNumberPipe, pure: true }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(StringToNumberPipe, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(StringToNumberPipe, [{
             type: i0.Pipe,
             args: [{
                     name: 'stringToNumber'
@@ -2607,7 +2658,7 @@
         static { this.ɵfac = function FilterPipe_Factory(t) { return new (t || FilterPipe)(); }; }
         static { this.ɵpipe = /*@__PURE__*/ i0__namespace.ɵɵdefinePipe({ name: "filter", type: FilterPipe, pure: true }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(FilterPipe, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(FilterPipe, [{
             type: i0.Pipe,
             args: [{
                     name: 'filter'
@@ -2637,7 +2688,7 @@
         static { this.ɵfac = function FileSizePipe_Factory(t) { return new (t || FileSizePipe)(); }; }
         static { this.ɵpipe = /*@__PURE__*/ i0__namespace.ɵɵdefinePipe({ name: "filesize", type: FileSizePipe, pure: true }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(FileSizePipe, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(FileSizePipe, [{
             type: i0.Pipe,
             args: [{
                     name: 'filesize'
@@ -2678,7 +2729,7 @@
         static { this.ɵfac = function FileIconClassPipe_Factory(t) { return new (t || FileIconClassPipe)(); }; }
         static { this.ɵpipe = /*@__PURE__*/ i0__namespace.ɵɵdefinePipe({ name: "fileIconClass", type: FileIconClassPipe, pure: true }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(FileIconClassPipe, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(FileIconClassPipe, [{
             type: i0.Pipe,
             args: [{
                     name: 'fileIconClass'
@@ -2695,7 +2746,7 @@
         static { this.ɵfac = function StateClassPipe_Factory(t) { return new (t || StateClassPipe)(); }; }
         static { this.ɵpipe = /*@__PURE__*/ i0__namespace.ɵɵdefinePipe({ name: "stateClass", type: StateClassPipe, pure: true }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(StateClassPipe, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(StateClassPipe, [{
             type: i0.Pipe,
             args: [{
                     name: 'stateClass'
@@ -2778,7 +2829,7 @@
         static { this.ɵfac = function FileExtensionFromMimePipe_Factory(t) { return new (t || FileExtensionFromMimePipe)(); }; }
         static { this.ɵpipe = /*@__PURE__*/ i0__namespace.ɵɵdefinePipe({ name: "fileExtensionFromMime", type: FileExtensionFromMimePipe, pure: true }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(FileExtensionFromMimePipe, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(FileExtensionFromMimePipe, [{
             type: i0.Pipe,
             args: [{
                     name: 'fileExtensionFromMime'
@@ -2814,12 +2865,12 @@
         static { this.ɵfac = function TrustAsPipe_Factory(t) { return new (t || TrustAsPipe)(i0__namespace.ɵɵdirectiveInject(i1$2__namespace.DomSanitizer, 16)); }; }
         static { this.ɵpipe = /*@__PURE__*/ i0__namespace.ɵɵdefinePipe({ name: "trustAs", type: TrustAsPipe, pure: true }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TrustAsPipe, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TrustAsPipe, [{
             type: i0.Pipe,
             args: [{
                     name: 'trustAs'
                 }]
-        }], function () { return [{ type: i1$2__namespace.DomSanitizer }]; }, null); })();
+        }], () => [{ type: i1$2__namespace.DomSanitizer }], null); })();
 
     const openedDialogs = [];
     /*We need closedDialogs array because onHidden event is asynchronous,
@@ -2983,9 +3034,9 @@
         static { this.ɵfac = function DialogServiceImpl_Factory(t) { return new (t || DialogServiceImpl)(); }; }
         static { this.ɵprov = /*@__PURE__*/ i0__namespace.ɵɵdefineInjectable({ token: DialogServiceImpl, factory: DialogServiceImpl.ɵfac }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(DialogServiceImpl, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(DialogServiceImpl, [{
             type: i0.Injectable
-        }], function () { return []; }, null); })();
+        }], () => [], null); })();
 
     class SanitizePipe {
         constructor(domSanitizer) {
@@ -3019,12 +3070,12 @@
         static { this.ɵfac = function SanitizePipe_Factory(t) { return new (t || SanitizePipe)(i0__namespace.ɵɵdirectiveInject(i1$2__namespace.DomSanitizer, 16)); }; }
         static { this.ɵpipe = /*@__PURE__*/ i0__namespace.ɵɵdefinePipe({ name: "sanitize", type: SanitizePipe, pure: true }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SanitizePipe, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SanitizePipe, [{
             type: i0.Pipe,
             args: [{
                     name: 'sanitize'
                 }]
-        }], function () { return [{ type: i1$2__namespace.DomSanitizer }]; }, null); })();
+        }], () => [{ type: i1$2__namespace.DomSanitizer }], null); })();
 
     const wmComponents = [
         ContainerDirective,
@@ -3083,7 +3134,7 @@
         static { this.ɵinj = /*@__PURE__*/ i0__namespace.ɵɵdefineInjector({ imports: [i1$1.CommonModule,
                 security.SecurityModule] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(WmComponentsModule, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(WmComponentsModule, [{
             type: i0.NgModule,
             args: [{
                     imports: [
@@ -3899,7 +3950,7 @@
                         key: key,
                         label: (i1.isDefined(label) && label !== null) ? label.toString() : '',
                         value: myDataField === ALLFIELDS ? option : key,
-                        dataObject: option,
+                        dataObject: option, // represents the object when datafield is ALLFIELDS. This is used as innerItem while grouping the datasetItems.
                         index: startIndex + index
                     };
                     if (displayOptions.displayImgSrc || displayOptions.bindDisplayImgSrc) {
@@ -4393,9 +4444,9 @@
             return link;
         }
     };
-    class DatasetAwareNavComponent extends StylableComponent {
-        constructor(inj, WIDGET_CONFIG) {
-            super(inj, WIDGET_CONFIG);
+    exports.DatasetAwareNavComponent = class DatasetAwareNavComponent extends StylableComponent {
+        constructor(inj, WIDGET_CONFIG, explicitContext) {
+            super(inj, WIDGET_CONFIG, explicitContext);
             this.nodes = [];
             this.nodes$ = new rxjs.Subject();
             // debounce function for reset nodes functions.
@@ -4519,7 +4570,12 @@
             }
             super.onPropertyChange(key, nv, ov);
         }
-    }
+    };
+    exports.DatasetAwareNavComponent = tslib.__decorate([
+        tslib.__param(2, i0.Inject('EXPLICIT_CONTEXT')),
+        tslib.__param(2, i0.Optional()),
+        tslib.__metadata("design:paramtypes", [i0.Injector, Object, Object])
+    ], exports.DatasetAwareNavComponent);
 
     const DEFAULT_VALIDATOR = {
         pattern: 'regexp',
@@ -5156,7 +5212,6 @@
     exports.DEBOUNCE_TIMES = DEBOUNCE_TIMES;
     exports.DISPLAY_TYPE = DISPLAY_TYPE;
     exports.DataSetItem = DataSetItem;
-    exports.DatasetAwareNavComponent = DatasetAwareNavComponent;
     exports.DialogRef = DialogRef;
     exports.DialogServiceImpl = DialogServiceImpl;
     exports.EDIT_MODE = EDIT_MODE;