@wavemaker/app-ng-runtime 12.0.0-next.45001 → 12.0.0-next.45005

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'), require('lodash-es'), 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', 'lodash-es', '@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._, global.ng.platformBrowser, global.rxjs, global.rxjs.operators, global.tslib, global.ng.forms, global.swipey));
+})(this, (function (exports, i0, i1$1, i1, security, focusTrap, lodashEs, i1$2, rxjs, operators, tslib, forms, _swipey) { 'use strict';
 
     function _interopNamespaceDefault(e) {
         var n = Object.create(null);
@@ -100,7 +100,7 @@
             /* convert indexes to properties, so as to work for even 'key1[0].child1'*/
             strKey.replace(/\[(\w+)\]/g, '.$1').split('.').forEach(key => {
                 // If obj is null, then assign val to null.
-                val = (val && val[key]) || (_.isNull(obj) ? obj : obj[key]);
+                val = (val && val[key]) || (lodashEs.isNull(obj) ? obj : obj[key]);
             });
             return val;
         }
@@ -135,7 +135,7 @@
         // Handling field name with special charecters
         // Ex: field = "f name"
         if (!bindExpr && !expr) {
-            return _.get(dataObj, field);
+            return lodashEs.get(dataObj, field);
         }
         return i1.$parseExpr(expressionValue)(context, Object.assign({}, dataObj, { __1: dataObj }));
     };
@@ -172,12 +172,12 @@
     const getOrderByExpr = pageableObj => {
         pageableObj = pageableObj || [];
         const expressions = [], KEY_VAL_SEPARATOR = ' ', FIELD_SEPARATOR = ',';
-        _.forEach(pageableObj, obj => {
+        lodashEs.forEach(pageableObj, obj => {
             if (obj.direction) {
                 expressions.push(obj.property + KEY_VAL_SEPARATOR + obj.direction.toLowerCase());
             }
         });
-        return _.join(expressions, FIELD_SEPARATOR);
+        return lodashEs.join(expressions, FIELD_SEPARATOR);
     };
     const isDataSetWidget = widget => {
         return DATASET_WIDGETS.has(widget);
@@ -267,13 +267,13 @@
             modes.string.push('in', 'notin');
             modes.character.push('in', 'notin');
         }
-        _.forEach(typesMap, (types, primType) => {
-            _.forEach(types, type => {
+        lodashEs.forEach(typesMap, (types, primType) => {
+            lodashEs.forEach(types, type => {
                 matchModeTypesMap[type] = modes[primType];
             });
         });
         // this is used in filter criteria when the user types the column name manually and where we dont know the type of the column
-        matchModeTypesMap['default'] = _.union(modes['number'], modes['string'], modes['character'], modes['date'], modes['date']);
+        matchModeTypesMap['default'] = lodashEs.union(modes['number'], modes['string'], modes['character'], modes['date'], modes['date']);
         return matchModeTypesMap;
     };
     const getMatchModeMsgs = (appLocale) => {
@@ -305,14 +305,14 @@
     // Returns array of classes that are evaluated true for given object or array
     const getClassesArray = classVal => {
         let classes = [];
-        if (_.isArray(classVal)) {
+        if (lodashEs.isArray(classVal)) {
             classVal.forEach(v => {
                 classes = classes.concat(getClassesArray(v));
             });
             return classes;
         }
-        if (_.isObject(classVal)) {
-            _.forEach(classVal, (val, key) => {
+        if (lodashEs.isObject(classVal)) {
+            lodashEs.forEach(classVal, (val, key) => {
                 if (val) {
                     classes = classes.concat(key.split(' '));
                 }
@@ -326,9 +326,9 @@
         // if the conditional class property has already toAdd and toRemove arrays then take that otherwise build those arrays
         const classToAdd = nv.toAdd || nv;
         const classToRemove = nv.toRemove || ov;
-        if (_.isObject(nv)) {
-            toAdd = _.isArray(classToAdd) ? classToAdd : getClassesArray(classToAdd || []);
-            toRemove = classToRemove ? (_.isArray(classToRemove) ? classToRemove : getClassesArray(classToRemove)) : [];
+        if (lodashEs.isObject(nv)) {
+            toAdd = lodashEs.isArray(classToAdd) ? classToAdd : getClassesArray(classToAdd || []);
+            toRemove = classToRemove ? (lodashEs.isArray(classToRemove) ? classToRemove : getClassesArray(classToRemove)) : [];
         }
         else {
             toAdd = classToAdd ? [classToAdd] : [];
@@ -343,9 +343,9 @@
         if (!options) {
             options = {};
         }
-        _.forEach(dataObject, (value, title) => {
-            if (_.includes(title, '.')) {
-                relatedInfo = _.split(title, '.');
+        lodashEs.forEach(dataObject, (value, title) => {
+            if (lodashEs.includes(title, '.')) {
+                relatedInfo = lodashEs.split(title, '.');
                 relatedTable = relatedInfo[0];
                 relatedField = relatedInfo[1];
                 isRelated = true;
@@ -354,7 +354,7 @@
                 modifiedTitle = title;
             }
             else {
-                if (_.isString(title)) {
+                if (lodashEs.isString(title)) {
                     modifiedTitle = i1.prettifyLabel(title);
                     modifiedTitle = i1.deHyphenate(modifiedTitle);
                     modifiedTitle = namePrefix ? i1.initCaps(namePrefix) + ' ' + modifiedTitle : modifiedTitle;
@@ -366,7 +366,7 @@
             title = namePrefix ? namePrefix + '.' + title : title;
             if (isRelated) {
                 // For related columns, shorten the title to last two words
-                fieldName = _.split(modifiedTitle, ' ');
+                fieldName = lodashEs.split(modifiedTitle, ' ');
                 fieldName = fieldName.length > 1 ? fieldName[fieldName.length - 2] + ' ' + fieldName[fieldName.length - 1] : fieldName[0];
             }
             else {
@@ -375,7 +375,7 @@
             const defObj = options.setBindingField ? { 'displayName': fieldName, 'field': title, 'relatedTable': relatedTable, 'relatedField': relatedField || modifiedTitle }
                 : { 'displayName': fieldName, 'relatedTable': relatedTable, 'relatedField': relatedField || modifiedTitle };
             /*if field is a leaf node, push it in the columnDefs*/
-            if (!_.isObject(value) || (_.isArray(value) && !value[0])) {
+            if (!lodashEs.isObject(value) || (lodashEs.isArray(value) && !value[0])) {
                 /*if the column counter has reached upperBound return*/
                 if (options.upperBound && options.columnCount === options.upperBound) {
                     return;
@@ -391,7 +391,7 @@
                     columnDefObj.objects.push(defObj);
                 }
                 /* if field is an array node, process its first child */
-                if (_.isArray(value) && value[0]) {
+                if (lodashEs.isArray(value) && value[0]) {
                     pushFieldDef(value[0], columnDefObj, title + '[0]', options);
                 }
                 else {
@@ -402,17 +402,17 @@
     };
     const getMetaDataFromData = (data) => {
         let dataObject;
-        if (_.isArray(data)) {
-            if (_.isObject(data[0])) {
+        if (lodashEs.isArray(data)) {
+            if (lodashEs.isObject(data[0])) {
                 dataObject = i1.getClonedObject(data[0]);
                 /*Loop over the object to find out any null values. If any null values are present in the first row, check and assign the values from other row.
                  * As column generation is dependent on data, for related fields if first row value is null, columns are not generated.
                  * To prevent this, check the data in other rows and generate the columns. New keys from others rows are also added*/
-                _.forEach(data, (row, index) => {
+                lodashEs.forEach(data, (row, index) => {
                     if ((index + 1) >= 10) { // Limit the data search to first 10 records
                         return false;
                     }
-                    _.assignWith(dataObject, row, (objValue, srcValue) => {
+                    lodashEs.assignWith(dataObject, row, (objValue, srcValue) => {
                         return (objValue === null || objValue === undefined) ? srcValue : objValue;
                     });
                 });
@@ -801,7 +801,7 @@
             if (isDimensionProp(key)) {
                 nv = i1.toDimension(nv);
             }
-            else if (_.startsWith(nv, 'resources/')) {
+            else if (lodashEs.startsWith(nv, 'resources/')) {
                 const ref = component;
                 if (ref._parentPrefab_ === undefined) {
                     ref._parentPrefab_ = component.$element.parent().closest('[prefabname][prefabname!="__self__"]').attr('prefabname') || '';
@@ -842,7 +842,7 @@
         },
         get: (target, key) => {
             const v = target[key];
-            if (_.isFunction(v)) { // bind the proper context for the methods
+            if (lodashEs.isFunction(v)) { // bind the proper context for the methods
                 return v.bind(target);
             }
             return v;
@@ -871,7 +871,7 @@
                 // bind proper context for the methods
                 invokeLater(() => {
                     for (const key in instance) {
-                        if (_.isFunction(instance[key]) && key !== 'constructor' && key !== 'super' && !_.startsWith(key, 'ng')) {
+                        if (lodashEs.isFunction(instance[key]) && key !== 'constructor' && key !== 'super' && !lodashEs.startsWith(key, 'ng')) {
                             instance[key] = instance[key].bind(instance);
                         }
                     }
@@ -902,21 +902,21 @@
     // Gets list of classes to add and remove and applies on the $el
     const updateClasses = (toAdd, toRemove, el) => {
         if (toRemove && toRemove.length) {
-            i1.removeClass(el, _.join(toRemove, ' '));
+            i1.removeClass(el, lodashEs.join(toRemove, ' '));
         }
         if (toAdd && toAdd.length) {
-            i1.addClass(el, _.join(toAdd, ' '));
+            i1.addClass(el, lodashEs.join(toAdd, ' '));
         }
     };
     // To add and remove styles on the $el
     const updateStyles = (nv, ov, el) => {
-        if (ov && _.isObject(ov)) {
+        if (ov && lodashEs.isObject(ov)) {
             const keys = Object.keys(ov || {});
             keys.forEach(function (key) {
                 i1.setCSS(el, key, '');
             });
         }
-        if (nv && _.isObject(nv)) {
+        if (nv && lodashEs.isObject(nv)) {
             i1.setCSSFromObj(el, nv);
         }
     };
@@ -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
@@ -1011,6 +1012,7 @@
                 i1.addClass(this.nativeElement, config.hostClass);
             }
             this.widgetId = this.generateWidgetId();
+            this.trackId = this.generateWidgetId();
             i1.setAttr(this.nativeElement, 'widget-id', this.widgetId, true);
             // register default property change handler and style change handler
             this.registerStyleChangeListener(this.onStyleChange, this);
@@ -1027,6 +1029,9 @@
                     resolveFn && resolveFn();
                 });
             }
+            if (explicitContext) {
+                lodashEs.extend(this.context, explicitContext);
+            }
         }
         getNativeElement() {
             return this.nativeElement;
@@ -1099,8 +1104,8 @@
             }
             if (parentContexts) {
                 let parentContextObj = {};
-                if (_.isArray(parentContexts)) {
-                    _.forEach(parentContexts, (contextObj) => {
+                if (lodashEs.isArray(parentContexts)) {
+                    lodashEs.forEach(parentContexts, (contextObj) => {
                         Object.assign(parentContextObj, contextObj);
                     });
                 }
@@ -1236,6 +1241,7 @@
             const locals = this.context;
             locals.widget = child ? child.widget : this.widget;
             const boundFn = fn.bind(undefined, child ? this.viewParent.viewParent : this.viewParent, locals);
+            let widget = child ? child.widget : this, nativeElement = child ? child.nativeElement : this.nativeElement;
             const eventCallback = () => {
                 let boundFnVal;
                 i1.$invokeWatchers(true);
@@ -1255,38 +1261,28 @@
                     console.error(e);
                 }
             };
-            if (child) {
-                if (!child.widget.eventHandlers)
-                    child.widget.eventHandlers = new Map();
-                child.widget.eventHandlers.set(this.getMappedEventName(eventName), { callback: eventCallback, locals });
-            }
-            else
-                this.eventHandlers.set(this.getMappedEventName(eventName), { callback: eventCallback, locals });
+            if (child && !child.widget.eventHandlers)
+                child.widget.eventHandlers = new Map();
+            widget.eventHandlers.set(this.getMappedEventName(eventName), { callback: eventCallback, locals });
             // prepend eventName with on and convert it to camelcase.
             // eg, "click" ---> onClick
-            const onEventName = _.camelCase(`on-${eventName}`);
+            const onEventName = lodashEs.camelCase(`on-${eventName}`);
             // save the eventCallback in widgetScope.
-            if (child) {
-                child.widget[onEventName] = eventCallback;
-            }
-            else
-                this[onEventName] = eventCallback;
+            widget[onEventName] = eventCallback;
             // events needs to be setup after viewInit
             this.toBeSetupEventsQueue.push(() => {
-                if (child) {
-                    this.handleEvent(child.nativeElement, this.getMappedEventName(eventName), eventCallback, locals, meta);
-                }
-                else
-                    this.handleEvent(this.nativeElement, this.getMappedEventName(eventName), eventCallback, locals, meta);
+                this.handleEvent(nativeElement, this.getMappedEventName(eventName), eventCallback, locals, meta);
             });
         }
         /**
          * Process the bound property
          * Register a watch on the bound expression
          */
-        processBindAttr(propName, expr) {
-            this.initState.delete(propName);
-            this.registerDestroyListener(i1.$watch(expr, this.viewParent, this.context, nv => this.widget[propName] = nv, getWatchIdentifier(this.widgetId, propName), propName === 'datasource', this.widgetProps.get(propName), () => this.isMuted));
+        processBindAttr(propName, expr, child) {
+            if (!child)
+                this.initState.delete(propName);
+            let viewParent = child ? child.widget.viewParent.viewParent : this.viewParent, context = child ? child.widget.context : this.context, widget = child ? child.widget : this.widget, isMuted = child ? child.widget.isMuted : this.isMuted, widgetProps = child ? child.widget.widgetProps : this.widgetProps, widgetId = child ? child.widget.widgetId : this.widgetId;
+            this.registerDestroyListener(i1.$watch(expr, viewParent, context, nv => widget[propName] = nv, getWatchIdentifier(widgetId, propName), propName === 'datasource', widgetProps.get(propName), () => isMuted));
         }
         /**
          * Remove watch on the bound property
@@ -1309,9 +1305,6 @@
                 }
             }
         }
-        processChildAttr(attrName, attrValue, child) {
-            this.processAttr(attrName, attrValue, child);
-        }
         /**
          * Process the attribute
          * If the attribute is an event expression, generate a functional representation of the expression
@@ -1326,9 +1319,9 @@
                 if (propName === 'show') {
                     this.nativeElement.hidden = true;
                 }
-                this.processBindAttr(propName, attrValue);
+                this.processBindAttr(propName, attrValue, child);
             }
-            else if (type === 'event') {
+            else if (type === 'event' && !this.nativeElement.hasAttribute('customwidgetcontainer')) {
                 this.processEventAttr(propName, attrValue, meta, child);
             }
             else if (length === 1) {
@@ -1355,7 +1348,7 @@
             if (_tNodeAttrs === null) {
                 return actualAttrs.sort();
             }
-            _.forEach(_tNodeAttrs, (attr, i) => {
+            lodashEs.forEach(_tNodeAttrs, (attr, i) => {
                 if (typeof attr === 'number') {
                     return false;
                 }
@@ -1380,7 +1373,7 @@
          * Process the attributes
          */
         processAttrs() {
-            _.map(this.getAttributes(), (attrName) => {
+            lodashEs.map(this.getAttributes(), (attrName) => {
                 let attrValue = this.nativeElement.attributes[attrName].value;
                 this.$attrs.set(attrName, attrValue);
                 this.processAttr(attrName, attrValue);
@@ -1456,6 +1449,28 @@
         unmute() {
             this.isMuted = false;
         }
+        /**
+         * After the Angular 17 upgrade, Angular is no longer sending ngTemplateContext to components in ng-template.
+         * Wavemaker widgets inside ng-template require context to evaluate bind expressions.
+         * So we're creating an injectionToken that returns the context as a value.
+         * We are passing the injectionToken to the ngTemplateOutletInjector.
+         * This injects the context into each widget in the ng-template.
+         * In the widget component constructor we are getting the injectionToken using dependency injection.
+         * If injectionToken is present, we extend the component context with the value of injectionToken.
+         * @param contextKey
+         * @param context
+         * @returns injector
+         */
+        createCustomInjector(contextKey, context) {
+            if (this.customInjectorMap[contextKey]) {
+                return this.customInjectorMap[contextKey].injector;
+            }
+            const injector = i0.Injector.create({
+                providers: [{ provide: 'EXPLICIT_CONTEXT', useFactory: () => context }]
+            });
+            this.customInjectorMap[contextKey] = { context, injector };
+            return injector;
+        }
         /**
          * After the host page is attached from cache, this function is called.
          */
@@ -1499,21 +1514,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); })();
 
@@ -1531,26 +1551,26 @@
         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 => {
+            lodashEs.pickBy(widgets, widget => {
                 // check for redrawable widget and whether it is already exist in reDrawableComponents query list or not
-                if (widget && widget.nativeElement && widget.nativeElement.hasAttribute('redrawable') && !_.includes(this.reDrawableComponents._results, widget)) {
+                if (widget && widget.nativeElement && widget.nativeElement.hasAttribute('redrawable') && !lodashEs.includes(this.reDrawableComponents._results, widget)) {
                     this.reDrawableComponents._results.push(widget);
                 }
                 if (widget && widget.Widgets) {
@@ -1585,9 +1605,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 }]
             }] }); })();
@@ -1599,17 +1619,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]',
@@ -1617,7 +1637,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) {
@@ -1626,7 +1651,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'
@@ -1659,8 +1684,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);
@@ -1670,12 +1695,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]',
@@ -1684,7 +1709,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
@@ -1703,29 +1733,36 @@
     };
     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.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: RepeatTemplateDirective, selectors: [["", "wmRepeatTemplate", ""]], features: [i0__namespace.ɵɵInheritDefinitionFeature] }); }
+        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", ""]], exportAs: ["repeatItemRef"], 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]'
+                    selector: '[wmRepeatTemplate]',
+                    exportAs: 'repeatItemRef'
                 }]
-        }], 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) {
+        constructor(inj, templateRef, viewContainer, explicitContext = {}) {
             this.templateRef = templateRef;
             this.viewContainer = viewContainer;
+            this.context = {};
             let viewParentApp = inj ? inj.get(i1.App) : i0.inject(i1.App);
             let lView = inj._lView;
             this.viewParent = i1.findParent(lView, viewParentApp);
             //this.context = (inj as any).view.context;
-            this.context = inj._lView[8];
+            lodashEs.extend(this.context, inj._lView[8], explicitContext);
         }
         set lazyLoad(expr) {
             this.unSubscribeFn = i1.$watch(expr, this.viewParent, this.context, (val) => {
@@ -1738,15 +1775,20 @@
         ngOnDestroy() {
             this.unSubscribeFn();
         }
-        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.ɵ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), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         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 }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], { lazyLoad: [{
                 type: i0.Input
             }] }); })();
 
@@ -1767,8 +1809,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 = '';
@@ -1827,10 +1869,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); });
@@ -1840,18 +1882,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([
@@ -1863,14 +1911,14 @@
     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)));
         }
         callback(eventName, locals) {
-            locals = _.assign({ widget: this }, locals);
+            locals = lodashEs.assign({ widget: this }, locals);
             this.invokeEventCallback(eventName, locals);
         }
         ngOnAttach() {
@@ -1883,12 +1931,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]',
@@ -1896,7 +1944,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) {
@@ -1910,7 +1963,7 @@
             if (!value && bindExpr) {
                 this.widgetRef.registerDestroyListener(
                 //[Todo-CSP]: expr fn should be generated be default
-                i1.$watch(bindExpr, this.widgetRef.getViewParent(), _.get(this.widgetRef, 'context'), nv => {
+                i1.$watch(bindExpr, this.widgetRef.getViewParent(), lodashEs.get(this.widgetRef, 'context'), nv => {
                     this.widgetRef.partialParams[name] = nv;
                     // notify the partial container of the param changes
                     this.widgetRef.params$.next();
@@ -1923,17 +1976,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;
@@ -1946,18 +1999,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
@@ -2010,7 +2063,7 @@
             this.resolver = resolver;
             this.partialRefProvider = partialRefProvider;
             this.contentInitialized = false;
-            this.renderPartial = _.debounce(this._renderPartial, 200);
+            this.renderPartial = lodashEs.debounce(this._renderPartial, 200);
             componentInstance.registerPropertyChangeListener((key, nv, ov) => {
                 if (key === 'content') {
                     if (componentInstance.$lazyLoad) {
@@ -2033,12 +2086,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,
@@ -2046,7 +2099,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 CustomWidgetContainerDirective {
         constructor(componentInstance, vcRef, elRef, inj, app, widgetname, customWidgetRefProvider) {
@@ -2067,12 +2120,12 @@
         static { this.ɵfac = function CustomWidgetContainerDirective_Factory(t) { return new (t || CustomWidgetContainerDirective)(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('widgetname'), i0__namespace.ɵɵdirectiveInject(i1__namespace.CustomWidgetRefProvider)); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: CustomWidgetContainerDirective, selectors: [["", "customWidgetContainer", "", "widgetname", ""]] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CustomWidgetContainerDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CustomWidgetContainerDirective, [{
             type: i0.Directive,
             args: [{
                     selector: '[customWidgetContainer][widgetname]'
                 }]
-        }], function () { return [{ type: undefined, decorators: [{
+        }], () => [{ type: undefined, decorators: [{
                     type: i0.Self
                 }, {
                     type: i0.Inject,
@@ -2080,16 +2133,14 @@
                 }] }, { type: i0__namespace.ViewContainerRef }, { type: i0__namespace.ElementRef }, { type: i0__namespace.Injector }, { type: i1__namespace.App }, { type: undefined, decorators: [{
                     type: i0.Attribute,
                     args: ['widgetname']
-                }] }, { type: i1__namespace.CustomWidgetRefProvider }]; }, null); })();
+                }] }, { type: i1__namespace.CustomWidgetRefProvider }], null); })();
 
     class ShowInDeviceDirective {
-        constructor(elRef, widget, viewContainerRef, inj, templateRef) {
-            this.elRef = elRef;
-            this.widget = widget;
+        constructor(viewContainerRef, inj, templateRef, explicitContext) {
             this.viewContainerRef = viewContainerRef;
             this.templateRef = templateRef;
-            //this.context = (inj as any).view.context;
-            this.context = inj._lView[8];
+            this.context = {};
+            lodashEs.extend(this.context, inj._lView[8], explicitContext);
             window.addEventListener('resize', this.onResize.bind(this));
         }
         set wmShowInDevice(devices) {
@@ -2134,18 +2185,20 @@
         ngOnDestroy() {
             window.removeEventListener('resize', this.onResize);
         }
-        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.ɵfac = function ShowInDeviceDirective_Factory(t) { return new (t || ShowInDeviceDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.ViewContainerRef), i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i0__namespace.TemplateRef), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         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.ViewContainerRef }, { type: i0__namespace.Injector }, { type: i0__namespace.TemplateRef }, { type: undefined, decorators: [{
                     type: i0.Inject,
-                    args: [WidgetRef]
-                }] }, { type: i0__namespace.ViewContainerRef }, { type: i0__namespace.Injector }, { type: i0__namespace.TemplateRef }]; }, { wmShowInDevice: [{
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], { wmShowInDevice: [{
                 type: i0.Input
             }] }); })();
 
@@ -2205,9 +2258,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) {
@@ -2235,8 +2288,8 @@
             let iScroll = new IScroll(el, scrollOptions);
             if ($events) {
                 // map all events on previous iscroll to the newly created iscroll.
-                _.forEach($events, (listeners, key) => {
-                    _.forEach(listeners, l => {
+                lodashEs.forEach($events, (listeners, key) => {
+                    lodashEs.forEach(listeners, l => {
                         iScroll.on(key, l);
                     });
                 });
@@ -2265,7 +2318,7 @@
                 }
             };
             this._$el[0].iscroll = iScroll;
-            _.forEach(this.pendingIscrolls, (_el, index) => {
+            lodashEs.forEach(this.pendingIscrolls, (_el, index) => {
                 if (_el.isSameNode(this._$el[0])) {
                     this.app.notify('iscroll-update', { el: _el });
                     this.pendingIscrolls.splice(index, 1);
@@ -2303,7 +2356,7 @@
             }
             // Check for scrollable content and if smoothscroll-container div is already added.
             if (iScroll.wrapper
-                && !_.includes(iScroll.wrapper.children[0].classList, 'smoothscroll-container')
+                && !lodashEs.includes(iScroll.wrapper.children[0].classList, 'smoothscroll-container')
                 && iScroll.wrapper.scrollHeight > iScroll.wrapper.clientHeight) {
                 const cloneEvents = iScroll._events;
                 const prevActiveEl = document.activeElement;
@@ -2325,12 +2378,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
             }] }); })();
     /**
@@ -2379,12 +2432,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
             }] }); })();
 
@@ -2393,7 +2446,7 @@
             this.pipeName = pipeName;
             this.customPipeManager = customPipeManager;
             this.pipeRef = this.customPipeManager ? this.customPipeManager.getCustomPipe(pipeName) : null;
-            this.isCustomPipe = this.pipeRef && _.isFunction(this.pipeRef.formatter);
+            this.isCustomPipe = this.pipeRef && lodashEs.isFunction(this.pipeRef.formatter);
         }
         customFormatter(data, args) {
             try {
@@ -2408,7 +2461,7 @@
     const getEpochValue = data => {
         let epoch;
         // For data in form of string number ('123'), convert to number (123). And don't parse date objects.
-        if (!_.isDate(data) && !isNaN(data)) {
+        if (!lodashEs.isDate(data) && !isNaN(data)) {
             data = parseInt(data, 10);
         }
         // get the timestamp value. If data is time string, append date string to the time value
@@ -2427,12 +2480,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) {
@@ -2482,18 +2535,18 @@
         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+))?)?$/)) {
                 fracSize = '1.' + fracSize + '-' + fracSize;
             }
-            if (!_.isNaN(+data)) {
+            if (!isNaN(+data)) {
                 const locale = this.i18nService && this.i18nService.getwidgetLocale() ? this.i18nService.getwidgetLocale() : undefined;
                 const formattedLocale = locale ? locale['number'] : null;
                 return this.decimalPipe.transform(data, fracSize, formattedLocale);
@@ -2506,20 +2559,20 @@
         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 || '';
             let _val = new ToNumberPipe(this.decimalPipe, this.i18nService).transform(data, fracSize);
-            const isNegativeNumber = _.startsWith(_val, '-');
+            const isNegativeNumber = lodashEs.startsWith(_val, '-');
             if (isNegativeNumber) {
                 _val = _val.replace('-', '');
             }
@@ -2532,23 +2585,23 @@
         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);
+            return (lodashEs.isUndefined(data) || data === null || data === '') ? data : ((padding || '') + data);
         }
         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'
@@ -2556,12 +2609,12 @@
         }], null, null); })();
     class SuffixPipe {
         transform(data, padding) {
-            return (_.isUndefined(data) || data === null || data === '') ? data : (data + (padding || ''));
+            return (lodashEs.isUndefined(data) || data === null || data === '') ? data : (data + (padding || ''));
         }
         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'
@@ -2580,7 +2633,7 @@
                 argumentArr.push(arguments[i]);
             }
             let pipeRef = this.custmeUserPipe.getCustomPipe(pipename);
-            if (!pipeRef || !_.isFunction(pipeRef.formatter)) {
+            if (!pipeRef || !lodashEs.isFunction(pipeRef.formatter)) {
                 console.warn('formatter is not defined, please check the custom pipes documentation');
                 return data;
             }
@@ -2595,12 +2648,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;
@@ -2613,17 +2666,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'
@@ -2636,7 +2689,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'
@@ -2648,18 +2701,18 @@
                 return [];
             }
             // If object is passed as first paramter
-            if (_.isObject(field)) {
-                return _.filter(data, field);
+            if (lodashEs.isObject(field)) {
+                return lodashEs.filter(data, field);
             }
             // If key value pair is provided
-            return _.filter(data, item => {
-                return _.includes(item[field], value);
+            return lodashEs.filter(data, item => {
+                return lodashEs.includes(item[field], value);
             });
         }
         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'
@@ -2689,7 +2742,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'
@@ -2730,7 +2783,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'
@@ -2747,7 +2800,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'
@@ -2830,7 +2883,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'
@@ -2866,12 +2919,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,
@@ -2986,7 +3039,7 @@
          * closes all the opened dialogs
          */
         closeAllDialogs() {
-            _.forEach(openedDialogs.reverse(), (dialog) => {
+            lodashEs.forEach(openedDialogs.reverse(), (dialog) => {
                 dialog.close();
             });
         }
@@ -3035,9 +3088,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) {
@@ -3071,12 +3124,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,
@@ -3136,7 +3189,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: [
@@ -3230,7 +3283,7 @@
     };
     // Returns true if widget is autocomplete or chips
     function isSearchWidgetType(widget) {
-        return _.includes([i1.FormWidgetType.AUTOCOMPLETE, i1.FormWidgetType.TYPEAHEAD, i1.FormWidgetType.CHIPS], widget);
+        return lodashEs.includes([i1.FormWidgetType.AUTOCOMPLETE, i1.FormWidgetType.TYPEAHEAD, i1.FormWidgetType.CHIPS], widget);
     }
     function onSuccess(response, res, rej) {
         if (response.error) {
@@ -3319,7 +3372,7 @@
         }
         primaryKeys = dataSource.execute(i1.DataSource.Operation.GET_RELATED_PRIMARY_KEYS, relatedField);
         formField.datafield = datafield;
-        formField._primaryKey = _.isEmpty(primaryKeys) ? undefined : primaryKeys[0];
+        formField._primaryKey = lodashEs.isEmpty(primaryKeys) ? undefined : primaryKeys[0];
         formField.compareby = primaryKeys && primaryKeys.join(',');
         displayField = datafield === ALLFIELDS ? undefined : datafield;
         formField.displayfield = displayField = (formField.displayfield || displayField || formField._primaryKey);
@@ -3338,12 +3391,12 @@
                 dataSource.execute(i1.DataSource.Operation.GET_RELATED_TABLE_DATA, {
                     relatedField,
                     pagesize: formField.limit,
-                    orderBy: formField.orderby ? _.replace(formField.orderby, /:/g, ' ') : '',
+                    orderBy: formField.orderby ? lodashEs.replace(formField.orderby, /:/g, ' ') : '',
                     filterFields: {},
                     filterExpr: formField.filterexpressions ? formField.filterexpressions : {}
                 }).then(response => {
                     formField.dataset = response.data;
-                    formField.displayfield = formField.displayfield || _.head(_.keys(_.get(response, '[0]')));
+                    formField.displayfield = formField.displayfield || lodashEs.head(lodashEs.keys(lodashEs.get(response, '[0]')));
                     if (formField.showPendingSpinner) {
                         formField.showPendingSpinner = false;
                     }
@@ -3359,7 +3412,7 @@
      */
     const interpolateBindExpressions = (context, filterexpressions, callbackFn) => {
         const debouncedFn = i1.debounce(() => {
-            if (_.isFunction(callbackFn)) {
+            if (lodashEs.isFunction(callbackFn)) {
                 callbackFn(filterexpressions);
             }
         }, 300);
@@ -3368,8 +3421,8 @@
          * without this it will never be called. processFilterExpBindNode will be called only for the binded variable expressions.
          */
         debouncedFn();
-        const filterExpressions = filterexpressions ? (_.isObject(filterexpressions) ? filterexpressions : JSON.parse(filterexpressions)) : {};
-        const destroyFn = context.registerDestroyListener ? context.registerDestroyListener.bind(context) : _.noop;
+        const filterExpressions = filterexpressions ? (lodashEs.isObject(filterexpressions) ? filterexpressions : JSON.parse(filterexpressions)) : {};
+        const destroyFn = context.registerDestroyListener ? context.registerDestroyListener.bind(context) : noop;
         const filterSubscription = i1.processFilterExpBindNode(context, filterExpressions).subscribe((response) => {
             filterexpressions = JSON.stringify(response.filterExpressions);
             debouncedFn();
@@ -3397,7 +3450,7 @@
             fieldColumn = formField['lookup-field'];
             props.distinctField = fieldColumn;
             props.aliasColumn = fieldColumn.replace('.', '$'); // For related fields, In response . is replaced by $
-            props.filterExpr = formField.filterexpressions ? (_.isObject(formField.filterexpressions) ? formField.filterexpressions : JSON.parse(formField.filterexpressions)) : {};
+            props.filterExpr = formField.filterexpressions ? (lodashEs.isObject(formField.filterexpressions) ? formField.filterexpressions : JSON.parse(formField.filterexpressions)) : {};
         }
         else {
             props.tableName = dataSource.execute(i1.DataSource.Operation.GET_ENTITY_NAME);
@@ -3470,14 +3523,14 @@
         const emptySupportWidgets = [i1.FormWidgetType.SELECT, i1.FormWidgetType.RADIOSET];
         const emptyOption = {};
         const dataSet = [];
-        if (options.isEnableEmptyFilter && _.includes(emptySupportWidgets, formField[options.widget]) &&
+        if (options.isEnableEmptyFilter && lodashEs.includes(emptySupportWidgets, formField[options.widget]) &&
             !formField['is-range'] && !formField.multiple) {
             // If empty option is selected, push an empty object in to dataSet
             emptyOption[LIVE_CONSTANTS.LABEL_KEY] = LIVE_CONSTANTS.EMPTY_KEY;
             emptyOption[LIVE_CONSTANTS.LABEL_VALUE] = options.EMPTY_VALUE || LIVE_CONSTANTS.EMPTY_VALUE;
             dataSet.push(emptyOption);
         }
-        _.each(data, key => {
+        lodashEs.each(data, key => {
             const value = key[options.aliasColumn];
             const option = {};
             if (value !== null && value !== '') {
@@ -3505,7 +3558,7 @@
      *
      */
     function fetchDistinctValues(dataSource, formFields, options) {
-        if (_.isEmpty(formFields)) {
+        if (lodashEs.isEmpty(formFields)) {
             return;
         }
         formFields.forEach(formField => {
@@ -3617,7 +3670,7 @@
      * @param {object} enableemptyfilter empty filter options
      */
     function getEnableEmptyFilter(enableemptyfilter) {
-        return enableemptyfilter && _.intersection(enableemptyfilter.split(','), LIVE_CONSTANTS.NULL_EMPTY).length > 0;
+        return enableemptyfilter && lodashEs.intersection(enableemptyfilter.split(','), LIVE_CONSTANTS.NULL_EMPTY).length > 0;
     }
     /**
      * @ngdoc function
@@ -3632,14 +3685,14 @@
      */
     function getEmptyMatchMode(enableemptyfilter) {
         let matchMode;
-        const emptyFilterOptions = _.split(enableemptyfilter, ',');
-        if (_.intersection(emptyFilterOptions, LIVE_CONSTANTS.NULL_EMPTY).length === 2) {
+        const emptyFilterOptions = lodashEs.split(enableemptyfilter, ',');
+        if (lodashEs.intersection(emptyFilterOptions, LIVE_CONSTANTS.NULL_EMPTY).length === 2) {
             matchMode = i1.MatchMode.NULLOREMPTY;
         }
-        else if (_.includes(emptyFilterOptions, LIVE_CONSTANTS.NULL)) {
+        else if (lodashEs.includes(emptyFilterOptions, LIVE_CONSTANTS.NULL)) {
             matchMode = i1.MatchMode.NULL;
         }
-        else if (_.includes(emptyFilterOptions, LIVE_CONSTANTS.EMPTY)) {
+        else if (lodashEs.includes(emptyFilterOptions, LIVE_CONSTANTS.EMPTY)) {
             matchMode = i1.MatchMode.EMPTY;
         }
         return matchMode;
@@ -3655,13 +3708,13 @@
      * @returns {Array<any>}
      */
     const createArrayFrom = (data) => {
-        if (_.isUndefined(data) || _.isNull(data)) {
+        if (lodashEs.isUndefined(data) || lodashEs.isNull(data)) {
             return [];
         }
-        if (_.isString(data)) {
+        if (lodashEs.isString(data)) {
             data = data.split(',').map(Function.prototype.call, String.prototype.trim);
         }
-        if (!_.isArray(data)) {
+        if (!lodashEs.isArray(data)) {
             data = [data];
         }
         return data;
@@ -3681,13 +3734,13 @@
      */
     function applyFilterOnField(dataSource, filterDef, formFields, newVal, options = {}) {
         const fieldName = filterDef.field || filterDef.key;
-        const filterOnFields = _.filter(formFields, { 'filter-on': fieldName });
+        const filterOnFields = lodashEs.filter(formFields, { 'filter-on': fieldName });
         newVal = filterDef['is-range'] ? getRangeFieldValue(filterDef.minValue, filterDef.maxValue) : (i1.isDefined(newVal) ? newVal : filterDef.value);
-        if (!dataSource || (options.isFirst && (_.isUndefined(newVal) || newVal === ''))) {
+        if (!dataSource || (options.isFirst && (lodashEs.isUndefined(newVal) || newVal === ''))) {
             return;
         }
         // Loop over the fields for which the current field is filter on field
-        _.forEach(filterOnFields, filterField => {
+        lodashEs.forEach(filterOnFields, filterField => {
             const filterKey = filterField.field || filterField.key;
             const lookUpField = filterDef['lookup-field'] || filterDef._primaryKey;
             const filterWidget = filterField['edit-widget-type'] || filterField.widgettype;
@@ -3713,7 +3766,7 @@
                 else {
                     matchMode = i1.MatchMode.EQUALS;
                 }
-                filterVal = (_.isObject(newVal) && !_.isArray(newVal)) ? newVal[lookUpField] : newVal;
+                filterVal = (lodashEs.isObject(newVal) && !lodashEs.isArray(newVal)) ? newVal[lookUpField] : newVal;
                 filterFields[filterOn] = {
                     'value': filterVal,
                     'matchMode': matchMode
@@ -3748,9 +3801,9 @@
         // data sanity testing
         dataObject = dataObject || [];
         // if the dataObject is not an array make it an array
-        if (!_.isArray(dataObject)) {
+        if (!lodashEs.isArray(dataObject)) {
             // if the data returned is of type string, make it an object inside an array
-            if (_.isString(dataObject)) {
+            if (lodashEs.isString(dataObject)) {
                 keys = variableName.substring(variableName.indexOf('.') + 1, variableName.length).split('.');
                 oldKeys = [];
                 numKeys = keys.length;
@@ -3774,9 +3827,9 @@
             /*if the dataObject is an array and each value is a string, then lite-transform the string to an object
              * lite-transform: just checking if the first value is string and then transforming the object, instead of traversing through the whole array
              * */
-            if (_.isString(dataObject[0])) {
+            if (lodashEs.isString(dataObject[0])) {
                 tempArr = [];
-                _.forEach(dataObject, str => {
+                lodashEs.forEach(dataObject, str => {
                     newObj = {};
                     newObj[variableName.split('.').join('-')] = str;
                     tempArr.push(newObj);
@@ -3819,18 +3872,18 @@
     /**
      * function to get the ordered dataset based on the given orderby
      */
-    const getOrderedDataset = (dataSet, orderBy, innerItem) => {
-        if (!orderBy) {
-            return _.cloneDeep(dataSet);
+    const getOrderedDataset = (dataSet, orderBy$1, innerItem) => {
+        if (!orderBy$1) {
+            return lodashEs.cloneDeep(dataSet);
         }
         // The order by only works when the dataset contains list of objects.
-        const items = orderBy.split(','), fields = [], directions = [];
+        const items = orderBy$1.split(','), fields = [], directions = [];
         items.forEach(obj => {
             const item = obj.split(':');
             fields.push(innerItem ? innerItem + '.' + item[0] : item[0]);
             directions.push(item[1]);
         });
-        return _.orderBy(dataSet, fields, directions);
+        return lodashEs.orderBy(dataSet, fields, directions);
     };
     /**
      * Returns an array of object, each object contain the DataSetItem whose key, value, label are extracted from object keys.
@@ -3839,10 +3892,10 @@
         const data = [];
         // if the dataset is instance of object (not an array) or the first item in the dataset array is an object,
         // then we extract the keys from the object and prepare the dataset items.
-        if (_.isObject(dataSet[0]) || (_.isObject(dataSet) && !(dataSet instanceof Array))) {
+        if (lodashEs.isObject(dataSet[0]) || (lodashEs.isObject(dataSet) && !(dataSet instanceof Array))) {
             // getting keys of the object
             const objectKeys = Object.keys(dataSet[0] || dataSet);
-            _.forEach(objectKeys, (objKey, index) => {
+            lodashEs.forEach(objectKeys, (objKey, index) => {
                 data.push({
                     key: objKey,
                     label: objKey,
@@ -3855,21 +3908,21 @@
     };
     // Converts any type of data to array.
     const extractDataAsArray = data => {
-        if (_.isUndefined(data) || _.isNull(data) || _.trim(data) === '') {
+        if (lodashEs.isUndefined(data) || lodashEs.isNull(data) || lodashEs.trim(data) === '') {
             return [];
         }
-        if (_.isString(data)) {
-            data = _.split(data, ',').map(str => str.trim());
+        if (lodashEs.isString(data)) {
+            data = lodashEs.split(data, ',').map(str => str.trim());
         }
-        if (!_.isArray(data)) {
+        if (!lodashEs.isArray(data)) {
             data = [data];
         }
         return data;
     };
     // This function return always an object containing dataset details.
     const convertDataToObject = dataResult => {
-        if (_.isString(dataResult)) {
-            dataResult = _.split(dataResult, ',').map(str => str.trim());
+        if (lodashEs.isString(dataResult)) {
+            dataResult = lodashEs.split(dataResult, ',').map(str => str.trim());
         }
         return dataResult;
     };
@@ -3881,7 +3934,7 @@
     const setGroupbyKey = (scope, context, dataSetItem, innerItem) => {
         if (scope && isSeachWidget(scope.widgetType)) {
             if (scope.groupby) {
-                if (_.includes(scope.groupby, '(')) {
+                if (lodashEs.includes(scope.groupby, '(')) {
                     //[Todo-CSP]: can generate expr fn in page based on groupby property on widget
                     const groupDataByUserDefinedFn = i1.$parseEvent(scope.groupby);
                     dataSetItem.groupby = groupDataByUserDefinedFn(context, { 'row': dataSetItem.dataObject || dataSetItem });
@@ -3912,10 +3965,10 @@
         }
         dataSet = convertDataToObject(dataSet);
         // startIndex is the index of the next new item.
-        if (_.isUndefined(startIndex)) {
+        if (lodashEs.isUndefined(startIndex)) {
             startIndex = 1;
         }
-        if (_.isString(dataSet)) {
+        if (lodashEs.isString(dataSet)) {
             dataSet = dataSet.split(',').map(str => str.trim());
             dataSet.forEach((option, index) => {
                 const dataSetItem = { key: option, value: option, label: (i1.isDefined(option) && option !== null) ? option.toString() : '', index: startIndex + index };
@@ -3923,16 +3976,20 @@
                 data.push(dataSetItem);
             });
         }
-        else if (_.isArray(dataSet) && !_.isObject(dataSet[0])) { // array of primitive values only
+        else if (lodashEs.isArray(dataSet) && !lodashEs.isObject(dataSet[0])) { // array of primitive values only
             dataSet.forEach((option, index) => {
                 const dataSetItem = { key: option, value: option, label: (i1.isDefined(option) && option !== null) ? option.toString() : '', index: startIndex + index };
                 setGroupbyKey(scope, context, dataSetItem, 'value');
                 data.push(dataSetItem);
             });
         }
-        else if (!(dataSet instanceof Array) && _.isObject(dataSet)) {
-            _.forEach(dataSet, (value, key) => {
-                const dataSetItem = { key: _.trim(key), value: key, label: (i1.isDefined(value) && value !== null) ? value.toString() : '', index: startIndex, dataObject: dataSet };
+        else if (!(dataSet instanceof Array) && lodashEs.isObject(dataSet)) {
+            lodashEs.forEach(dataSet, (value, key) => {
+                // @ts-ignore
+                const dataSetItem = { key: lodashEs.trim(key), value: key, label: (i1.isDefined(value) && value !== null) ? value.toString() : '',
+                    index: startIndex,
+                    dataObject: dataSet
+                };
                 setGroupbyKey(scope, context, dataSetItem, 'value');
                 data.push(dataSetItem);
             });
@@ -3944,7 +4001,7 @@
             dataSet.forEach((option, index) => {
                 const key = myDataField === ALLFIELDS ? startIndex + index : getObjValueByKey(option, myDataField);
                 // Omit all the items whose datafield (key) is null or undefined.
-                if (!_.isUndefined(key) && !_.isNull(key)) {
+                if (!lodashEs.isUndefined(key) && !lodashEs.isNull(key)) {
                     const label = getEvaluatedData(option, {
                         field: displayOptions.displayField,
                         expression: displayOptions.displayExpr,
@@ -3954,7 +4011,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) {
@@ -3976,16 +4033,16 @@
     const getUniqObjsByDataField = (data, dataField, displayField, allowEmptyFields) => {
         let uniqData;
         const isAllFields = dataField === ALLFIELDS;
-        uniqData = isAllFields ? _.uniqWith(data, _.isEqual) : _.uniqBy(data, 'key');
+        uniqData = isAllFields ? lodashEs.uniqWith(data, lodashEs.isEqual) : lodashEs.uniqBy(data, 'key');
         if (!displayField || allowEmptyFields) {
             return uniqData;
         }
         // return objects having non empty datafield and display field values.
-        return _.filter(uniqData, (obj) => {
+        return lodashEs.filter(uniqData, (obj) => {
             if (isAllFields) {
-                return _.trim(obj.label);
+                return lodashEs.trim(obj.label);
             }
-            return _.trim(obj.key) && _.trim(obj.label);
+            return lodashEs.trim(obj.key) && lodashEs.trim(obj.label);
         });
     };
     /**
@@ -3997,7 +4054,7 @@
      */
     const setItemByCompare = (datasetItems, compareWithDataObj, compareByField) => {
         // compare the fields based on fields given to compareby property.
-        _.forEach(datasetItems, opt => {
+        lodashEs.forEach(datasetItems, opt => {
             if (i1.isEqualWithFields(opt.value, compareWithDataObj, compareByField)) {
                 opt.selected = true;
                 return false;
@@ -4014,13 +4071,13 @@
      */
     const getSortedGroupedData = (groupedLiData, groupBy, orderby) => {
         const _groupedData = [];
-        _.forEach(_.keys(groupedLiData), (groupkey, index) => {
+        lodashEs.forEach(lodashEs.keys(groupedLiData), (groupkey, index) => {
             const liData = getOrderedDataset(groupedLiData[groupkey], orderby, 'dataObject');
             _groupedData.push({
                 key: groupkey,
-                data: _.sortBy(liData, data => {
+                data: lodashEs.sortBy(liData, data => {
                     data._groupIndex = index + 1;
-                    return _.get(data, groupBy) || _.get(data.dataObject, groupBy);
+                    return lodashEs.get(data, groupBy) || lodashEs.get(data.dataObject, groupBy);
                 })
             });
         });
@@ -4040,10 +4097,11 @@
      */
     const groupData = (compRef, data, groupby, match, orderby, dateformat, datePipe, innerItem, AppDefaults) => {
         let groupedLiData = {};
-        if (_.includes(groupby, '(')) {
+        if (lodashEs.includes(groupby, '(')) {
             //[Todo-CSP]: can generate expr fn in page based on groupby property on widget
             const groupDataByUserDefinedFn = i1.$parseEvent(groupby);
-            groupedLiData = _.groupBy(data, val => {
+            groupedLiData = lodashEs.groupBy(data, val => {
+                // @ts-ignore
                 return groupDataByUserDefinedFn(compRef.viewParent, { 'row': val.dataObject || val });
             });
         }
@@ -4069,14 +4127,14 @@
         }
         // handling case-in-sensitive scenario
         // ordering the data based on groupby field. If there is innerItem then apply orderby using the innerItem's containing the groupby field.
-        fieldDefs = _.orderBy(fieldDefs, fieldDef => {
-            const groupKey = _.get(innerItem ? fieldDef[innerItem] : fieldDef, groupby);
+        fieldDefs = lodashEs.orderBy(fieldDefs, fieldDef => {
+            const groupKey = lodashEs.get(innerItem ? fieldDef[innerItem] : fieldDef, groupby);
             if (groupKey) {
-                return _.toLower(groupKey);
+                return lodashEs.toLower(groupKey);
             }
         });
         // extract the grouped data based on the field obtained from 'groupDataByField'.
-        const groupedLiData = _.groupBy(fieldDefs, groupDataByField.bind(undefined, groupby, match, innerItem, dateFormat, datePipe, AppDefaults));
+        const groupedLiData = lodashEs.groupBy(fieldDefs, groupDataByField.bind(undefined, groupby, match, innerItem, dateFormat, datePipe, AppDefaults));
         momentLocale._calendar = momentCalendarOptions; // Reset to default moment calendar options
         return groupedLiData;
     };
@@ -4142,9 +4200,9 @@
     // groups the fields based on the groupby value.
     const groupDataByField = (groupby, match, innerItem, dateFormat, datePipe, AppDefaults, liData) => {
         // get the groupby field value from the liData or innerItem in the liData.
-        let concatStr = _.get(innerItem ? liData[innerItem] : liData, groupby);
+        let concatStr = lodashEs.get(innerItem ? liData[innerItem] : liData, groupby);
         // by default set the undefined groupKey as 'others'
-        if (_.isUndefined(concatStr) || _.isNull(concatStr) || concatStr.toString().trim() === '') {
+        if (lodashEs.isUndefined(concatStr) || lodashEs.isNull(concatStr) || concatStr.toString().trim() === '') {
             return GROUP_BY_OPTIONS.OTHERS;
         }
         // if match prop is alphabetic ,get the starting alphabet of the word as key.
@@ -4152,7 +4210,7 @@
             concatStr = concatStr.substr(0, 1);
         }
         // if match contains the time options then get the concatStr using 'getTimeRolledUpString'
-        if (_.includes(_.values(TIME_ROLLUP_OPTIONS), match)) {
+        if (lodashEs.includes(lodashEs.values(TIME_ROLLUP_OPTIONS), match)) {
             concatStr = getTimeRolledUpString(concatStr, match, dateFormat, datePipe, AppDefaults);
         }
         return concatStr;
@@ -4167,13 +4225,13 @@
         // toggle the collapse icon on list header.
         const groupIcons = groups.find('li.list-group-header .app-icon');
         if (groupIcons) {
-            _.forEach(groupIcons, (icon) => {
-                icon = $(icon);
-                if (icon.hasClass('wi-chevron-down')) {
-                    icon.removeClass('wi-chevron-down').addClass('wi-chevron-up');
+            lodashEs.forEach(groupIcons, (icon) => {
+                const $icon = $(icon);
+                if ($icon.hasClass('wi-chevron-down')) {
+                    $icon.removeClass('wi-chevron-down').addClass('wi-chevron-up');
                 }
                 else {
-                    icon.removeClass('wi-chevron-up').addClass('wi-chevron-down');
+                    $icon.removeClass('wi-chevron-up').addClass('wi-chevron-down');
                 }
             });
         }
@@ -4238,8 +4296,8 @@
     };
     // Method to set the header config of the data table
     const setHeaderConfig = (headerConfig, config, field, index) => {
-        _.forEach(headerConfig, cols => {
-            if (_.get(cols, 'isGroup')) {
+        lodashEs.forEach(headerConfig, cols => {
+            if (lodashEs.get(cols, 'isGroup')) {
                 if (cols.field === field) {
                     cols.columns[index] = config;
                 }
@@ -4295,8 +4353,8 @@
         }
         else if (captionWidth) {
             // handling itemsperrow containing string of classes
-            _.forEach(_.split(captionWidth, ' '), function (cls) {
-                const keys = _.split(cls, '-'), tier = keys[0];
+            lodashEs.forEach(lodashEs.split(captionWidth, ' '), function (cls) {
+                const keys = lodashEs.split(cls, '-'), tier = keys[0];
                 let _captionWidth, widgetWidth;
                 _captionWidth = parseInt(keys[1], 10);
                 widgetWidth = 12 - _captionWidth;
@@ -4311,7 +4369,7 @@
         };
     };
     const getDefaultViewModeWidget = widget => {
-        if (_.includes(['checkbox', 'toggle', 'rating'], widget)) {
+        if (lodashEs.includes(['checkbox', 'toggle', 'rating'], widget)) {
             return VIEW_MODE_OPTIONS.DEFAULT;
         }
         return VIEW_MODE_OPTIONS.LABEL;
@@ -4381,7 +4439,7 @@
         if (type === i1.DataType.BOOLEAN) {
             widget = i1.FormWidgetType.SELECT;
         }
-        if (_.includes([i1.FormWidgetType.TEXT, i1.FormWidgetType.NUMBER, i1.FormWidgetType.SELECT, i1.FormWidgetType.AUTOCOMPLETE,
+        if (lodashEs.includes([i1.FormWidgetType.TEXT, i1.FormWidgetType.NUMBER, i1.FormWidgetType.SELECT, i1.FormWidgetType.AUTOCOMPLETE,
             i1.FormWidgetType.DATE, i1.FormWidgetType.TIME, i1.FormWidgetType.DATETIME], widget)) {
             return widget;
         }
@@ -4439,22 +4497,22 @@
         const routRegex = /^(\/|#\/|#)(?!\W).*/;
         if (link) {
             if (routRegex.test(link)) {
-                link = _.first(link.match(/[\w]+.*/g)) || '';
+                link = lodashEs.first(link.match(/[\w]+.*/g)) || '';
                 return `#/${link}`;
             }
-            if (_.startsWith(link, 'www.')) {
+            if (lodashEs.startsWith(link, 'www.')) {
                 return `//${link}`;
             }
             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.
-            this._resetNodes = _.debounce(this.resetNodes, 50);
+            this._resetNodes = lodashEs.debounce(this.resetNodes, 50);
             this.securityService = this.inj.get(security.SecurityService);
             this.binditemlabel = this.nativeElement.getAttribute('itemlabel.bind');
             this.binditemicon = this.nativeElement.getAttribute('itemicon.bind');
@@ -4474,24 +4532,49 @@
          */
         getNode(fields, node) {
             const context = this.viewParent.pageScope || this.viewParent;
-            const children = getEvaluatedData(node, { field: this.itemchildren, bindExpression: this.binditemchildren }, context) || _.get(node, fields.childrenField);
+            const children = getEvaluatedData(node, {
+                field: this.itemchildren,
+                bindExpression: this.binditemchildren
+            }, context) || lodashEs.get(node, fields.childrenField);
             const navNode = {
-                action: getEvaluatedData(node, { field: this.itemaction, bindExpression: this.binditemaction }, context) || _.get(node, fields.actionField),
-                badge: getEvaluatedData(node, { field: this.itembadge, bindExpression: this.binditembadge }, context) || _.get(node, fields.badgeField),
+                action: getEvaluatedData(node, {
+                    field: this.itemaction,
+                    bindExpression: this.binditemaction
+                }, context) || lodashEs.get(node, fields.actionField),
+                badge: getEvaluatedData(node, {
+                    field: this.itembadge,
+                    bindExpression: this.binditembadge
+                }, context) || lodashEs.get(node, fields.badgeField),
                 children: Array.isArray(children) ? this.getNodes(children) : [],
-                class: _.get(node, fields.classField),
+                class: lodashEs.get(node, fields.classField),
                 disabled: node.disabled,
-                icon: getEvaluatedData(node, { field: this.itemicon, bindExpression: this.binditemicon }, context) || _.get(node, fields.iconField),
-                id: getEvaluatedData(node, { field: this.itemid, bindExpression: this.binditemid }, context) || _.get(node, fields.idField),
-                label: getEvaluatedData(node, { field: this.itemlabel, bindExpression: this.binditemlabel }, context) || _.get(node, fields.labelField),
-                link: getValidLink(getEvaluatedData(node, { field: this.itemlink, bindExpression: this.binditemlink }, context) || _.get(node, fields.linkField)),
-                target: getValidLink(getEvaluatedData(node, { field: this.itemtarget, bindExpression: this.binditemtarget }, context) || _.get(node, fields.targetField)),
+                icon: getEvaluatedData(node, {
+                    field: this.itemicon,
+                    bindExpression: this.binditemicon
+                }, context) || lodashEs.get(node, fields.iconField),
+                id: getEvaluatedData(node, {
+                    field: this.itemid,
+                    bindExpression: this.binditemid
+                }, context) || lodashEs.get(node, fields.idField),
+                label: getEvaluatedData(node, {
+                    field: this.itemlabel,
+                    bindExpression: this.binditemlabel
+                }, context) || lodashEs.get(node, fields.labelField),
+                link: getValidLink(getEvaluatedData(node, {
+                    field: this.itemlink,
+                    bindExpression: this.binditemlink
+                }, context) || lodashEs.get(node, fields.linkField)),
+                target: getValidLink(getEvaluatedData(node, {
+                    field: this.itemtarget,
+                    bindExpression: this.binditemtarget
+                }, context) || lodashEs.get(node, fields.targetField)),
                 role: getEvaluatedData(node, { field: this.userrole, bindExpression: this.binduserrole }, context),
                 isactive: getEvaluatedData(node, { field: this.isactive, bindExpression: this.bindisactive }, context),
                 // older projects have display field & data field property for menu.
                 value: this.datafield ? (this.datafield === 'All Fields' ? node : i1.findValueOf(node, this.datafield)) : node
             };
-            return _.omitBy(navNode, _.isUndefined);
+            // @ts-ignore
+            return lodashEs.omitBy(navNode, lodashEs.isUndefined);
         }
         resetItemFieldMap() {
             this._itemFieldMap = null;
@@ -4574,7 +4657,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',
@@ -4624,7 +4712,7 @@
             if (this.instance.regexp) {
                 _validator.push(forms.Validators.pattern(this.instance.regexp));
             }
-            if (this.formwidget && _.isFunction(this.formwidget.validate)) {
+            if (this.formwidget && lodashEs.isFunction(this.formwidget.validate)) {
                 _validator.push(this.formwidget.validate.bind(this.formwidget));
             }
             return _validator;
@@ -4651,7 +4739,7 @@
         }
         getPromiseList(validators) {
             const arr = [];
-            _.forEach(validators, (fn, index) => {
+            lodashEs.forEach(validators, (fn, index) => {
                 let promise = fn;
                 if (fn instanceof Function && fn.bind) {
                     promise = fn(this.widgetControl, this.widgetContext);
@@ -4673,11 +4761,11 @@
                         // if err obj has validationMessage key, then set validationMessage using this value
                         // else return the value of the first key in the err object as validation message.
                         if (err.hasOwnProperty('errorMessage')) {
-                            this.instance.validationmessage = _.get(err, 'errorMessage');
+                            this.instance.validationmessage = lodashEs.get(err, 'errorMessage');
                         }
                         else {
-                            const keys = _.keys(err);
-                            this.instance.validationmessage = (err[keys[0]]).toString();
+                            const keys$1 = lodashEs.keys(err);
+                            this.instance.validationmessage = (err[keys$1[0]]).toString();
                         }
                         return err;
                     }).then(response => {
@@ -4709,7 +4797,7 @@
             }
         }
         isDefaultValidator(type) {
-            return _.get(i1.VALIDATOR, _.toUpper(type));
+            return lodashEs.get(i1.VALIDATOR, lodashEs.toUpper(type));
         }
         // default validator is bound to a function then watch for value changes
         // otherwise set the value of default validator directly
@@ -4725,10 +4813,10 @@
         }
         // sets the default validation on the form field
         setValidators(validators) {
-            let _cloneValidators = _.cloneDeep(validators);
+            let _cloneValidators = lodashEs.cloneDeep(validators);
             this.hasValidators = true;
             this._syncValidators = [];
-            _.forEach(_cloneValidators, (obj, index) => {
+            lodashEs.forEach(_cloneValidators, (obj, index) => {
                 // custom validation is bound to function.
                 if (obj && obj instanceof Function) {
                     // passing formfield and form as arguments to the obj (i.e. validator function)
@@ -4737,17 +4825,17 @@
                 }
                 else {
                     // checks for default validator like required, maxchars etc.
-                    const key = _.get(obj, 'type');
-                    this.defaultValidatorMessages[key] = _.get(obj, 'errorMessage');
+                    const key = lodashEs.get(obj, 'type');
+                    this.defaultValidatorMessages[key] = lodashEs.get(obj, 'errorMessage');
                     if (this.isDefaultValidator(key)) {
-                        const value = _.get(obj, 'validator');
+                        const value = lodashEs.get(obj, 'validator');
                         this.setDefaultValidator(key, value);
                         _cloneValidators[index] = '';
                     }
                 }
             });
             // _syncValidators contains all the custom validations on the form field. will not include default validators.
-            this._syncValidators = _.filter(_cloneValidators, val => {
+            this._syncValidators = lodashEs.filter(_cloneValidators, val => {
                 if (val) {
                     return val;
                 }
@@ -4755,8 +4843,8 @@
             this.applyDefaultValidators();
         }
         observeOn(fields, context) {
-            _.forEach(fields, field => {
-                const formfield = _.find(this.widgetContext[context], { 'key': field });
+            lodashEs.forEach(fields, field => {
+                const formfield = lodashEs.find(this.widgetContext[context], { 'key': field });
                 if (formfield) {
                     if (!formfield.notifyForFields) {
                         formfield.notifyForFields = [];
@@ -4787,13 +4875,13 @@
             const watchName = `${this.instance.widgetId}_` + key + '_formField';
             i1.$unwatch(watchName);
             //[Todo-CSP]: Need clarity generate this expr fn if form is present in the page
-            this.instance.registerDestroyListener(i1.$watch('boundFn(fn)', _.extend(this.instance, this.instance.viewParent), { fn }, (nv, ov) => {
+            this.instance.registerDestroyListener(i1.$watch('boundFn(fn)', lodashEs.extend(this.instance, this.instance.viewParent), { fn }, (nv, ov) => {
                 this.instance.widget[key] = nv;
                 this.applyDefaultValidators();
             }, watchName));
         }
         isNullOrEmptyOrFalsy(value) {
-            return _.isEmpty(value);
+            return lodashEs.isEmpty(value);
         }
         // invokes both custom sync validations and default validations.
         applyDefaultValidators() {
@@ -4804,7 +4892,7 @@
             if (this.formwidget && (this.instance.value === this.formwidget.prevDatavalue || this.isNullOrEmptyOrFalsy(this.instance.value))) {
                 opt['emitEvent'] = false;
             }
-            this.widgetControl.setValidators(_.concat(this._syncValidators || [], validators));
+            this.widgetControl.setValidators(lodashEs.concat(this._syncValidators || [], validators));
             this.widgetControl.updateValueAndValidity(opt);
             this.setCustomValidationMessage();
         }
@@ -4814,14 +4902,14 @@
                 return;
             }
             if (fieldErrors.hasOwnProperty('errorMessage')) {
-                this.instance.validationmessage = _.get(fieldErrors, 'errorMessage');
+                this.instance.validationmessage = lodashEs.get(fieldErrors, 'errorMessage');
             }
             else {
-                const keys = _.keys(fieldErrors);
-                const key = keys[0];
-                const validationMsgKey = _.get(DEFAULT_VALIDATOR, key) || this.formwidget.validateType;
+                const keys$1 = lodashEs.keys(fieldErrors);
+                const key = keys$1[0];
+                const validationMsgKey = lodashEs.get(DEFAULT_VALIDATOR, key) || this.formwidget.validateType;
                 if (validationMsgKey) {
-                    const msg = _.get(this.defaultValidatorMessages, validationMsgKey) || this.instance.validationmessage;
+                    const msg = lodashEs.get(this.defaultValidatorMessages, validationMsgKey) || this.instance.validationmessage;
                     if (msg && msg instanceof Function) {
                         // passing formfield and form as arguments to the errorMessage function.
                         this.instance.validationmessage = msg(this.widgetControl, this.widgetContext);
@@ -5212,7 +5300,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;
@@ -5325,5 +5412,6 @@
     exports.transformFormData = transformFormData;
     exports.unsupportedStatePersistenceTypes = unsupportedStatePersistenceTypes;
     exports.updateDeviceView = updateDeviceView;
+    exports.widgetIdGenerator = widgetIdGenerator;
 
 }));