@wavemaker/app-ng-runtime 12.0.0-next.140479 → 12.0.0-next.140481

app-ng-runtime/components/base/fesm2022/index.mjs

@@ -1,15 +1,17 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, forwardRef, ElementRef, inject, ViewContainerRef, Injectable, Inject, Directive, Self, ContentChildren, Pipe, Input, Component, Attribute, SecurityContext, NgModule } from '@angular/core';
+import { InjectionToken, forwardRef, ElementRef, inject, ViewContainerRef, Injector, Injectable, Inject, Optional, Directive, Self, ContentChildren, Pipe, Input, Component, Attribute, SecurityContext, NgModule } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { Location, CommonModule } from '@angular/common';
 import * as i1 from '@wm/core';
-import { FormWidgetType, checkIsCustomPipeExpression, $parseExpr, isValidWebURL, encodeUrl, stringStartsWith, prettifyLabel, deHyphenate, initCaps, getClonedObject, setCSS, isDefined, IDGenerator, toBoolean, isChangeFromWatch, $unwatch, resetChangeFromWatch, isObject, toDimension, $appDigest, removeClass, addClass, setCSSFromObj, App, findParent, setAttr, isMobileApp, switchClass, removeAttr, $parseEvent, $invokeWatchers, $watch, transformFileURI, ComponentType, noop as noop$1, isLargeTabletLandscape, isLargeTabletPortrait, isKitkatDevice, debounce, hasOffsetStr, AbstractI18nService, CURRENCY_INFO, isMobile, AbstractDialogService, DataSource, processFilterExpBindNode, MatchMode, isEqualWithFields, getFormattedDate, isAndroid, isNumberType, DataType, findValueOf, validateAccessRoles, VALIDATOR, isIos } from '@wm/core';
+import { FormWidgetType, checkIsCustomPipeExpression, $parseExpr, isValidWebURL, encodeUrl, stringStartsWith, prettifyLabel, deHyphenate, initCaps, getClonedObject, setCSS, isDefined, IDGenerator, toBoolean, isChangeFromWatch, $unwatch, resetChangeFromWatch, isObject as isObject$1, toDimension, $appDigest, removeClass, addClass, setCSSFromObj, App, findParent, setAttr, isMobileApp, switchClass, removeAttr, $parseEvent, $invokeWatchers, $watch, transformFileURI, ComponentType, noop as noop$1, isLargeTabletLandscape, isLargeTabletPortrait, isKitkatDevice, debounce as debounce$1, hasOffsetStr, AbstractI18nService, CURRENCY_INFO, isMobile, AbstractDialogService, DataSource, processFilterExpBindNode, MatchMode, isEqualWithFields, getFormattedDate, isAndroid, isNumberType, DataType, findValueOf, validateAccessRoles, VALIDATOR, isIos } from '@wm/core';
 import { SecurityModule, SecurityService } from '@wm/security';
-import { createFocusTrap } from '@wavemaker/focus-trap/dist/focus-trap';
+import { createFocusTrap } from '@wavemaker/focus-trap';
+import { isNull, get, forEach, join, union, isArray, isObject, includes, split, isString, assignWith, startsWith, isFunction, extend, camelCase, map, pickBy, assign, debounce, isDate, isUndefined, filter as filter$1, isEmpty, keys, head, replace, each, intersection, cloneDeep, orderBy, trim, isEqual, uniqWith, uniqBy, sortBy, groupBy, toLower, values, first, omitBy, toUpper, find, concat } from 'lodash-es';
 import * as i1$2 from '@angular/platform-browser';
 import { EventManager } from '@angular/platform-browser';
 import { ReplaySubject, Subject } from 'rxjs';
 import { filter, debounceTime } from 'rxjs/operators';
+import { __param, __metadata, __decorate } from 'tslib';
 import { Validators } from '@angular/forms';
 import { SwipeAnimation } from '@swipey';
 
@@ -87,7 +89,7 @@ const getObjValueByKey = (obj, strKey) => {
         /* 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]) || (isNull(obj) ? obj : obj[key]);
         });
         return val;
     }
@@ -122,7 +124,7 @@ const getEvaluatedData = (dataObj, options, context) => {
     // Handling field name with special charecters
     // Ex: field = "f name"
     if (!bindExpr && !expr) {
-        return _.get(dataObj, field);
+        return get(dataObj, field);
     }
     return $parseExpr(expressionValue)(context, Object.assign({}, dataObj, { __1: dataObj }));
 };
@@ -159,12 +161,12 @@ const hasLinkToCurrentPage = (nodes, routeUrl) => {
 const getOrderByExpr = pageableObj => {
     pageableObj = pageableObj || [];
     const expressions = [], KEY_VAL_SEPARATOR = ' ', FIELD_SEPARATOR = ',';
-    _.forEach(pageableObj, obj => {
+    forEach(pageableObj, obj => {
         if (obj.direction) {
             expressions.push(obj.property + KEY_VAL_SEPARATOR + obj.direction.toLowerCase());
         }
     });
-    return _.join(expressions, FIELD_SEPARATOR);
+    return join(expressions, FIELD_SEPARATOR);
 };
 const isDataSetWidget = widget => {
     return DATASET_WIDGETS.has(widget);
@@ -254,13 +256,13 @@ const getMatchModeTypesMap = (multiMode) => {
         modes.string.push('in', 'notin');
         modes.character.push('in', 'notin');
     }
-    _.forEach(typesMap, (types, primType) => {
-        _.forEach(types, type => {
+    forEach(typesMap, (types, primType) => {
+        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'] = union(modes['number'], modes['string'], modes['character'], modes['date'], modes['date']);
     return matchModeTypesMap;
 };
 const getMatchModeMsgs = (appLocale) => {
@@ -292,14 +294,14 @@ const getMatchModeMsgs = (appLocale) => {
 // Returns array of classes that are evaluated true for given object or array
 const getClassesArray = classVal => {
     let classes = [];
-    if (_.isArray(classVal)) {
+    if (isArray(classVal)) {
         classVal.forEach(v => {
             classes = classes.concat(getClassesArray(v));
         });
         return classes;
     }
-    if (_.isObject(classVal)) {
-        _.forEach(classVal, (val, key) => {
+    if (isObject(classVal)) {
+        forEach(classVal, (val, key) => {
             if (val) {
                 classes = classes.concat(key.split(' '));
             }
@@ -313,9 +315,9 @@ const getConditionalClasses = (nv, ov) => {
     // 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 (isObject(nv)) {
+        toAdd = isArray(classToAdd) ? classToAdd : getClassesArray(classToAdd || []);
+        toRemove = classToRemove ? (isArray(classToRemove) ? classToRemove : getClassesArray(classToRemove)) : [];
     }
     else {
         toAdd = classToAdd ? [classToAdd] : [];
@@ -330,9 +332,9 @@ const pushFieldDef = (dataObject, columnDefObj, namePrefix, options) => {
     if (!options) {
         options = {};
     }
-    _.forEach(dataObject, (value, title) => {
-        if (_.includes(title, '.')) {
-            relatedInfo = _.split(title, '.');
+    forEach(dataObject, (value, title) => {
+        if (includes(title, '.')) {
+            relatedInfo = split(title, '.');
             relatedTable = relatedInfo[0];
             relatedField = relatedInfo[1];
             isRelated = true;
@@ -341,7 +343,7 @@ const pushFieldDef = (dataObject, columnDefObj, namePrefix, options) => {
             modifiedTitle = title;
         }
         else {
-            if (_.isString(title)) {
+            if (isString(title)) {
                 modifiedTitle = prettifyLabel(title);
                 modifiedTitle = deHyphenate(modifiedTitle);
                 modifiedTitle = namePrefix ? initCaps(namePrefix) + ' ' + modifiedTitle : modifiedTitle;
@@ -353,7 +355,7 @@ const pushFieldDef = (dataObject, columnDefObj, namePrefix, options) => {
         title = namePrefix ? namePrefix + '.' + title : title;
         if (isRelated) {
             // For related columns, shorten the title to last two words
-            fieldName = _.split(modifiedTitle, ' ');
+            fieldName = split(modifiedTitle, ' ');
             fieldName = fieldName.length > 1 ? fieldName[fieldName.length - 2] + ' ' + fieldName[fieldName.length - 1] : fieldName[0];
         }
         else {
@@ -362,7 +364,7 @@ const pushFieldDef = (dataObject, columnDefObj, namePrefix, options) => {
         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 (!isObject(value) || (isArray(value) && !value[0])) {
             /*if the column counter has reached upperBound return*/
             if (options.upperBound && options.columnCount === options.upperBound) {
                 return;
@@ -378,7 +380,7 @@ const pushFieldDef = (dataObject, columnDefObj, namePrefix, options) => {
                 columnDefObj.objects.push(defObj);
             }
             /* if field is an array node, process its first child */
-            if (_.isArray(value) && value[0]) {
+            if (isArray(value) && value[0]) {
                 pushFieldDef(value[0], columnDefObj, title + '[0]', options);
             }
             else {
@@ -389,17 +391,17 @@ const pushFieldDef = (dataObject, columnDefObj, namePrefix, options) => {
 };
 const getMetaDataFromData = (data) => {
     let dataObject;
-    if (_.isArray(data)) {
-        if (_.isObject(data[0])) {
+    if (isArray(data)) {
+        if (isObject(data[0])) {
             dataObject = 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) => {
+            forEach(data, (row, index) => {
                 if ((index + 1) >= 10) { // Limit the data search to first 10 records
                     return false;
                 }
-                _.assignWith(dataObject, row, (objValue, srcValue) => {
+                assignWith(dataObject, row, (objValue, srcValue) => {
                     return (objValue === null || objValue === undefined) ? srcValue : objValue;
                 });
             });
@@ -788,11 +790,11 @@ const globalPropertyChangeHandler = (component, key, nv) => {
         }
     }
     // Set the value in the component and trigger appDigest when there is a change in the value
-    if (nv !== ov || isObject(nv) || isObject(ov)) {
+    if (nv !== ov || isObject$1(nv) || isObject$1(ov)) {
         if (isDimensionProp(key)) {
             nv = toDimension(nv);
         }
-        else if (_.startsWith(nv, 'resources/')) {
+        else if (startsWith(nv, 'resources/')) {
             const ref = component;
             if (ref._parentPrefab_ === undefined) {
                 ref._parentPrefab_ = component.$element.parent().closest('[prefabname][prefabname!="__self__"]').attr('prefabname') || '';
@@ -833,7 +835,7 @@ const proxyHandler = {
     },
     get: (target, key) => {
         const v = target[key];
-        if (_.isFunction(v)) { // bind the proper context for the methods
+        if (isFunction(v)) { // bind the proper context for the methods
             return v.bind(target);
         }
         return v;
@@ -862,7 +864,7 @@ class WidgetProxyProvider {
             // bind proper context for the methods
             invokeLater(() => {
                 for (const key in instance) {
-                    if (_.isFunction(instance[key]) && key !== 'constructor' && key !== 'super' && !_.startsWith(key, 'ng')) {
+                    if (isFunction(instance[key]) && key !== 'constructor' && key !== 'super' && !startsWith(key, 'ng')) {
                         instance[key] = instance[key].bind(instance);
                     }
                 }
@@ -893,21 +895,21 @@ class WidgetProxyProvider {
 // Gets list of classes to add and remove and applies on the $el
 const updateClasses = (toAdd, toRemove, el) => {
     if (toRemove && toRemove.length) {
-        removeClass(el, _.join(toRemove, ' '));
+        removeClass(el, join(toRemove, ' '));
     }
     if (toAdd && toAdd.length) {
-        addClass(el, _.join(toAdd, ' '));
+        addClass(el, join(toAdd, ' '));
     }
 };
 // To add and remove styles on the $el
 const updateStyles = (nv, ov, el) => {
-    if (ov && _.isObject(ov)) {
+    if (ov && isObject(ov)) {
         const keys = Object.keys(ov || {});
         keys.forEach(function (key) {
             setCSS(el, key, '');
         });
     }
-    if (nv && _.isObject(nv)) {
+    if (nv && isObject(nv)) {
         setCSSFromObj(el, nv);
     }
 };
@@ -918,7 +920,7 @@ class BaseComponent {
     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;
@@ -950,6 +952,7 @@ class BaseComponent {
         this.__cloneable__ = false;
         this.$attrs = new Map();
         this.isMuted = false;
+        this.customInjectorMap = {};
         const elementRef = inj.get(ElementRef);
         this.nativeElement = elementRef.nativeElement;
         //making the code compatible in both the JIT and AOT modes
@@ -1002,6 +1005,7 @@ class BaseComponent {
             addClass(this.nativeElement, config.hostClass);
         }
         this.widgetId = this.generateWidgetId();
+        this.trackId = this.generateWidgetId();
         setAttr(this.nativeElement, 'widget-id', this.widgetId, true);
         // register default property change handler and style change handler
         this.registerStyleChangeListener(this.onStyleChange, this);
@@ -1017,6 +1021,9 @@ class BaseComponent {
                 this.setInitProps();
             });
         }
+        if (explicitContext) {
+            extend(this.context, explicitContext);
+        }
     }
     getNativeElement() {
         return this.nativeElement;
@@ -1089,8 +1096,8 @@ class BaseComponent {
         }
         if (parentContexts) {
             let parentContextObj = {};
-            if (_.isArray(parentContexts)) {
-                _.forEach(parentContexts, (contextObj) => {
+            if (isArray(parentContexts)) {
+                forEach(parentContexts, (contextObj) => {
                     Object.assign(parentContextObj, contextObj);
                 });
             }
@@ -1248,7 +1255,7 @@ class BaseComponent {
         this.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 = camelCase(`on-${eventName}`);
         // save the eventCallback in widgetScope.
         this[onEventName] = eventCallback;
         // events needs to be setup after viewInit
@@ -1330,7 +1337,7 @@ class BaseComponent {
         if (_tNodeAttrs === null) {
             return actualAttrs.sort();
         }
-        _.forEach(_tNodeAttrs, (attr, i) => {
+        forEach(_tNodeAttrs, (attr, i) => {
             if (typeof attr === 'number') {
                 return false;
             }
@@ -1355,7 +1362,7 @@ class BaseComponent {
      * Process the attributes
      */
     processAttrs() {
-        _.map(this.getAttributes(), (attrName) => {
+        map(this.getAttributes(), (attrName) => {
             let attrValue = this.nativeElement.attributes[attrName].value;
             this.$attrs.set(attrName, attrValue);
             this.processAttr(attrName, attrValue);
@@ -1431,6 +1438,28 @@ class BaseComponent {
     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 = 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.
      */
@@ -1474,21 +1503,26 @@ class BaseComponent {
         this.destroy.complete();
         this.isAttached = false;
     }
-    static { this.ɵfac = function BaseComponent_Factory(t) { return new (t || BaseComponent)(i0.ɵɵinject(i0.Injector), i0.ɵɵinject(WidgetConfig), i0.ɵɵinject(Promise)); }; }
+    static { this.ɵfac = function BaseComponent_Factory(t) { return new (t || BaseComponent)(i0.ɵɵinject(i0.Injector), i0.ɵɵinject(WidgetConfig), i0.ɵɵinject('EXPLICIT_CONTEXT', 8), i0.ɵɵinject(Promise)); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: BaseComponent, factory: BaseComponent.ɵfac }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseComponent, [{
         type: Injectable
-    }], function () { return [{ type: i0.Injector }, { type: undefined, decorators: [{
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [WidgetConfig]
-            }] }, { type: Promise }]; }, null); })();
+            }] }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: 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.ɵɵgetInheritedFactory(StylableComponent)))(t || StylableComponent); }; }(); }
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵStylableComponent_BaseFactory; return function StylableComponent_Factory(t) { return (ɵStylableComponent_BaseFactory || (ɵStylableComponent_BaseFactory = i0.ɵɵgetInheritedFactory(StylableComponent)))(t || StylableComponent); }; })(); }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: StylableComponent, factory: StylableComponent.ɵfac }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StylableComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StylableComponent, [{
         type: Injectable
     }], null, null); })();
 
@@ -1506,26 +1540,26 @@ class RedrawableDirective {
     static { this.ɵfac = function RedrawableDirective_Factory(t) { return new (t || RedrawableDirective)(i0.ɵɵdirectiveInject(WidgetRef, 2)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: RedrawableDirective, selectors: [["", "redrawable", ""]] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RedrawableDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RedrawableDirective, [{
         type: Directive,
         args: [{
                 selector: '[redrawable]'
             }]
-    }], function () { return [{ type: undefined, decorators: [{
+    }], () => [{ type: undefined, decorators: [{
                 type: Self
             }, {
                 type: 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 => {
+        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') && !includes(this.reDrawableComponents._results, widget)) {
                 this.reDrawableComponents._results.push(widget);
             }
             if (widget && widget.Widgets) {
@@ -1560,9 +1594,9 @@ class BaseContainerComponent extends StylableComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.reDrawableComponents = _t);
         } }, features: [i0.ɵɵInheritDefinitionFeature] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseContainerComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseContainerComponent, [{
         type: Directive
-    }], function () { return [{ type: i0.Injector }, { type: undefined }]; }, { reDrawableComponents: [{
+    }], () => [{ type: i0.Injector }, { type: undefined }, { type: undefined }], { reDrawableComponents: [{
             type: ContentChildren,
             args: [RedrawableDirective, { descendants: true }]
         }] }); })();
@@ -1574,17 +1608,17 @@ const WIDGET_CONFIG$4 = {
 };
 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);
         addClass(this.nativeElement, DEFAULT_CLS$3);
         styler(this.nativeElement, this, APPLY_STYLES_TYPE.CONTAINER);
     }
-    static { this.ɵfac = function ContainerDirective_Factory(t) { return new (t || ContainerDirective)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵfac = function ContainerDirective_Factory(t) { return new (t || ContainerDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ContainerDirective, selectors: [["", "wmContainer", ""]], features: [i0.ɵɵProvidersFeature([
                 provideAsWidgetRef(ContainerDirective)
             ]), i0.ɵɵInheritDefinitionFeature] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContainerDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContainerDirective, [{
         type: Directive,
         args: [{
                 selector: '[wmContainer]',
@@ -1592,7 +1626,12 @@ class ContainerDirective extends BaseContainerComponent {
                     provideAsWidgetRef(ContainerDirective)
                 ]
             }]
-    }], function () { return [{ type: i0.Injector }]; }, null); })();
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], null); })();
 
 class ImagePipe {
     transform(url, encode, defaultImageUrl) {
@@ -1601,7 +1640,7 @@ class ImagePipe {
     static { this.ɵfac = function ImagePipe_Factory(t) { return new (t || ImagePipe)(); }; }
     static { this.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "image", type: ImagePipe, pure: true }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ImagePipe, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ImagePipe, [{
         type: Pipe,
         args: [{
                 name: 'image'
@@ -1634,8 +1673,8 @@ class ItemTemplateDirective extends StylableComponent {
     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);
@@ -1645,12 +1684,12 @@ class ItemTemplateDirective extends StylableComponent {
         super.ngOnInit();
         this.partialParams.item = this.userComponentParams.dataObject;
     }
-    static { this.ɵfac = function ItemTemplateDirective_Factory(t) { return new (t || ItemTemplateDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.App)); }; }
+    static { this.ɵfac = function ItemTemplateDirective_Factory(t) { return new (t || ItemTemplateDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.App), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ItemTemplateDirective, selectors: [["", "wmItemTemplate", ""]], inputs: { userComponentParams: "userComponentParams", wmItemTemplate: "wmItemTemplate" }, exportAs: ["itemTemplateRef"], features: [i0.ɵɵProvidersFeature([
                 provideAsWidgetRef(ItemTemplateDirective)
             ]), i0.ɵɵInheritDefinitionFeature] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ItemTemplateDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ItemTemplateDirective, [{
         type: Directive,
         args: [{
                 selector: '[wmItemTemplate]',
@@ -1659,7 +1698,12 @@ class ItemTemplateDirective extends StylableComponent {
                     provideAsWidgetRef(ItemTemplateDirective)
                 ]
             }]
-    }], function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i1.App }]; }, { userComponentParams: [{
+    }], () => [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i1.App }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { userComponentParams: [{
             type: Input
         }], wmItemTemplate: [{
             type: Input
@@ -1678,29 +1722,36 @@ const WIDGET_CONFIG$2 = {
 };
 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.ɵɵdirectiveInject(i0.Injector)); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: RepeatTemplateDirective, selectors: [["", "wmRepeatTemplate", ""]], features: [i0.ɵɵInheritDefinitionFeature] }); }
+    static { this.ɵfac = function RepeatTemplateDirective_Factory(t) { return new (t || RepeatTemplateDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: RepeatTemplateDirective, selectors: [["", "wmRepeatTemplate", ""]], exportAs: ["repeatItemRef"], features: [i0.ɵɵInheritDefinitionFeature] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RepeatTemplateDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RepeatTemplateDirective, [{
         type: Directive,
         args: [{
-                selector: '[wmRepeatTemplate]'
+                selector: '[wmRepeatTemplate]',
+                exportAs: 'repeatItemRef'
             }]
-    }], function () { return [{ type: i0.Injector }]; }, null); })();
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: 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(App) : inject(App);
         let lView = inj._lView;
         this.viewParent = findParent(lView, viewParentApp);
         //this.context = (inj as any).view.context;
-        this.context = inj._lView[8];
+        extend(this.context, inj._lView[8], explicitContext);
     }
     set lazyLoad(expr) {
         this.unSubscribeFn = $watch(expr, this.viewParent, this.context, (val) => {
@@ -1713,15 +1764,20 @@ class LazyLoadDirective {
     ngOnDestroy() {
         this.unSubscribeFn();
     }
-    static { this.ɵfac = function LazyLoadDirective_Factory(t) { return new (t || LazyLoadDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.TemplateRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); }; }
+    static { this.ɵfac = function LazyLoadDirective_Factory(t) { return new (t || LazyLoadDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.TemplateRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: LazyLoadDirective, selectors: [["", "lazyLoad", ""]], inputs: { lazyLoad: "lazyLoad" } }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LazyLoadDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LazyLoadDirective, [{
         type: Directive,
         args: [{
                 selector: '[lazyLoad]'
             }]
-    }], function () { return [{ type: i0.Injector }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, { lazyLoad: [{
+    }], () => [{ type: i0.Injector }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { lazyLoad: [{
             type: Input
         }] }); })();
 
@@ -1742,8 +1798,8 @@ const DEFAULT_CLS$1 = 'alert app-message';
 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 = '';
@@ -1802,10 +1858,10 @@ class MessageComponent extends StylableComponent {
             super.onPropertyChange(key, nv, ov);
         }
     }
-    static { this.ɵfac = function MessageComponent_Factory(t) { return new (t || MessageComponent)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵfac = function MessageComponent_Factory(t) { return new (t || MessageComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MessageComponent, selectors: [["", "wmMessage", ""]], exportAs: ["wmMessage"], features: [i0.ɵɵProvidersFeature([
                 provideAsWidgetRef(MessageComponent)
-            ]), i0.ɵɵ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.ɵɵ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.ɵɵelement(0, "i", 0)(1, "span", 1);
             i0.ɵɵelementStart(2, "button", 2);
             i0.ɵɵlistener("click", function MessageComponent_Template_button_click_2_listener($event) { return ctx.dismiss($event); });
@@ -1815,18 +1871,24 @@ class MessageComponent extends StylableComponent {
         } if (rf & 2) {
             i0.ɵɵclassMapInterpolate2("icon ", ctx.type, " ", ctx.messageIconClass, "");
             i0.ɵɵproperty("title", ctx.type + "Alert");
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("innerHtml", ctx.caption, i0.ɵɵsanitizeHtml);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("hidden", ctx.hideclose);
         } }, encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MessageComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MessageComponent, [{
         type: 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.Injector }]; }, null); })();
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MessageComponent, { className: "MessageComponent", filePath: "widgets/common/message/message.component.ts", lineNumber: 22 }); })();
 
 const registerProps = () => {
     register$1('wm-partial', new Map([
@@ -1838,14 +1900,14 @@ const DEFAULT_CLS = 'app-partial clearfix';
 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 = assign({ widget: this }, locals);
         this.invokeEventCallback(eventName, locals);
     }
     ngOnAttach() {
@@ -1858,12 +1920,12 @@ class PartialDirective extends StylableComponent {
         this.callback('destroy');
         super.ngOnDestroy();
     }
-    static { this.ɵfac = function PartialDirective_Factory(t) { return new (t || PartialDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1.Viewport)); }; }
+    static { this.ɵfac = function PartialDirective_Factory(t) { return new (t || PartialDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1.Viewport), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PartialDirective, selectors: [["", "wmPartial", ""]], features: [i0.ɵɵProvidersFeature([
                 provideAsWidgetRef(PartialDirective)
             ]), i0.ɵɵInheritDefinitionFeature] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PartialDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PartialDirective, [{
         type: Directive,
         args: [{
                 selector: '[wmPartial]',
@@ -1871,7 +1933,12 @@ class PartialDirective extends StylableComponent {
                     provideAsWidgetRef(PartialDirective)
                 ]
             }]
-    }], function () { return [{ type: i0.Injector }, { type: i1.Viewport }]; }, null); })();
+    }], () => [{ type: i0.Injector }, { type: i1.Viewport }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], null); })();
 
 class PartialParamHandlerDirective {
     constructor(widgetRef) {
@@ -1885,7 +1952,7 @@ class PartialParamHandlerDirective {
         if (!value && bindExpr) {
             this.widgetRef.registerDestroyListener(
             //[Todo-CSP]: expr fn should be generated be default
-            $watch(bindExpr, this.widgetRef.getViewParent(), _.get(this.widgetRef, 'context'), nv => {
+            $watch(bindExpr, this.widgetRef.getViewParent(), get(this.widgetRef, 'context'), nv => {
                 this.widgetRef.partialParams[name] = nv;
                 // notify the partial container of the param changes
                 this.widgetRef.params$.next();
@@ -1898,17 +1965,17 @@ class PartialParamHandlerDirective {
     static { this.ɵfac = function PartialParamHandlerDirective_Factory(t) { return new (t || PartialParamHandlerDirective)(i0.ɵɵdirectiveInject(WidgetRef, 2)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PartialParamHandlerDirective, selectors: [["", "partialContainer", ""]] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PartialParamHandlerDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PartialParamHandlerDirective, [{
         type: Directive,
         args: [{
                 selector: '[partialContainer]',
             }]
-    }], function () { return [{ type: undefined, decorators: [{
+    }], () => [{ type: undefined, decorators: [{
                 type: Self
             }, {
                 type: Inject,
                 args: [WidgetRef]
-            }] }]; }, null); })();
+            }] }], null); })();
 class PartialParamDirective {
     constructor(bindValue, type, partialParamsProvider) {
         this.bindValue = bindValue;
@@ -1921,18 +1988,18 @@ class PartialParamDirective {
     static { this.ɵfac = function PartialParamDirective_Factory(t) { return new (t || PartialParamDirective)(i0.ɵɵinjectAttribute('value.bind'), i0.ɵɵinjectAttribute('type'), i0.ɵɵdirectiveInject(PartialParamHandlerDirective)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PartialParamDirective, selectors: [["", "wmParam", ""]], inputs: { name: "name", value: "value" } }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PartialParamDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PartialParamDirective, [{
         type: Directive,
         args: [{
                 selector: '[wmParam]',
             }]
-    }], function () { return [{ type: undefined, decorators: [{
+    }], () => [{ type: undefined, decorators: [{
                 type: Attribute,
                 args: ['value.bind']
             }] }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['type']
-            }] }, { type: PartialParamHandlerDirective }]; }, { name: [{
+            }] }, { type: PartialParamHandlerDirective }], { name: [{
             type: Input
         }], value: [{
             type: Input
@@ -1985,7 +2052,7 @@ class PartialContainerDirective {
         this.resolver = resolver;
         this.partialRefProvider = partialRefProvider;
         this.contentInitialized = false;
-        this.renderPartial = _.debounce(this._renderPartial, 200);
+        this.renderPartial = debounce(this._renderPartial, 200);
         componentInstance.registerPropertyChangeListener((key, nv, ov) => {
             if (key === 'content') {
                 if (componentInstance.$lazyLoad) {
@@ -2008,12 +2075,12 @@ class PartialContainerDirective {
     static { this.ɵfac = function PartialContainerDirective_Factory(t) { return new (t || PartialContainerDirective)(i0.ɵɵdirectiveInject(WidgetRef, 2), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1.App), i0.ɵɵinjectAttribute('content'), i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver), i0.ɵɵdirectiveInject(i1.PartialRefProvider)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PartialContainerDirective, selectors: [["", "partialContainer", ""]] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PartialContainerDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PartialContainerDirective, [{
         type: Directive,
         args: [{
                 selector: '[partialContainer]'
             }]
-    }], function () { return [{ type: undefined, decorators: [{
+    }], () => [{ type: undefined, decorators: [{
                 type: Self
             }, {
                 type: Inject,
@@ -2021,16 +2088,14 @@ class PartialContainerDirective {
             }] }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.Injector }, { type: i1.App }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['content']
-            }] }, { type: i0.ComponentFactoryResolver }, { type: i1.PartialRefProvider }]; }, null); })();
+            }] }, { type: i0.ComponentFactoryResolver }, { type: i1.PartialRefProvider }], 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 = {};
+        extend(this.context, inj._lView[8], explicitContext);
         window.addEventListener('resize', this.onResize.bind(this));
     }
     set wmShowInDevice(devices) {
@@ -2075,18 +2140,20 @@ class ShowInDeviceDirective {
     ngOnDestroy() {
         window.removeEventListener('resize', this.onResize);
     }
-    static { this.ɵfac = function ShowInDeviceDirective_Factory(t) { return new (t || ShowInDeviceDirective)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(WidgetRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.TemplateRef)); }; }
+    static { this.ɵfac = function ShowInDeviceDirective_Factory(t) { return new (t || ShowInDeviceDirective)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.TemplateRef), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ShowInDeviceDirective, selectors: [["", "wmShowInDevice", ""]], inputs: { wmShowInDevice: "wmShowInDevice" } }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ShowInDeviceDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ShowInDeviceDirective, [{
         type: Directive,
         args: [{
                 selector: '[wmShowInDevice]'
             }]
-    }], function () { return [{ type: i0.ElementRef }, { type: BaseComponent, decorators: [{
+    }], () => [{ type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i0.TemplateRef }, { type: undefined, decorators: [{
                 type: Inject,
-                args: [WidgetRef]
-            }] }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i0.TemplateRef }]; }, { wmShowInDevice: [{
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { wmShowInDevice: [{
             type: Input
         }] }); })();
 
@@ -2146,9 +2213,9 @@ class SmoothScrollDirective {
             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) {
@@ -2176,8 +2243,8 @@ class SmoothScrollDirective {
         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 => {
+            forEach($events, (listeners, key) => {
+                forEach(listeners, l => {
                     iScroll.on(key, l);
                 });
             });
@@ -2206,7 +2273,7 @@ class SmoothScrollDirective {
             }
         };
         this._$el[0].iscroll = iScroll;
-        _.forEach(this.pendingIscrolls, (_el, index) => {
+        forEach(this.pendingIscrolls, (_el, index) => {
             if (_el.isSameNode(this._$el[0])) {
                 this.app.notify('iscroll-update', { el: _el });
                 this.pendingIscrolls.splice(index, 1);
@@ -2244,7 +2311,7 @@ class SmoothScrollDirective {
         }
         // Check for scrollable content and if smoothscroll-container div is already added.
         if (iScroll.wrapper
-            && !_.includes(iScroll.wrapper.children[0].classList, 'smoothscroll-container')
+            && !includes(iScroll.wrapper.children[0].classList, 'smoothscroll-container')
             && iScroll.wrapper.scrollHeight > iScroll.wrapper.clientHeight) {
             const cloneEvents = iScroll._events;
             const prevActiveEl = document.activeElement;
@@ -2266,12 +2333,12 @@ class SmoothScrollDirective {
     static { this.ɵfac = function SmoothScrollDirective_Factory(t) { return new (t || SmoothScrollDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.App)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SmoothScrollDirective, selectors: [["", "wmSmoothscroll", ""]], inputs: { wmSmoothscroll: "wmSmoothscroll" } }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SmoothScrollDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SmoothScrollDirective, [{
         type: Directive,
         args: [{
                 selector: '[wmSmoothscroll]'
             }]
-    }], function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i1.App }]; }, { wmSmoothscroll: [{
+    }], () => [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i1.App }], { wmSmoothscroll: [{
             type: Input
         }] }); })();
 /**
@@ -2304,7 +2371,7 @@ const refreshIscrolls = function (iScroll) {
     }
 };
 // on window resize, recalculate the iscroll position and refresh scrollers.
-window.addEventListener('resize', debounce(refreshIscrolls, 200));
+window.addEventListener('resize', debounce$1(refreshIscrolls, 200));
 
 class TextContentDirective {
     set textContent(nv) {
@@ -2320,12 +2387,12 @@ class TextContentDirective {
     static { this.ɵfac = function TextContentDirective_Factory(t) { return new (t || TextContentDirective)(i0.ɵɵdirectiveInject(i0.ElementRef)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TextContentDirective, selectors: [["", "textContent", ""]], inputs: { textContent: "textContent" } }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TextContentDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TextContentDirective, [{
         type: Directive,
         args: [{
                 selector: '[textContent]'
             }]
-    }], function () { return [{ type: i0.ElementRef }]; }, { textContent: [{
+    }], () => [{ type: i0.ElementRef }], { textContent: [{
             type: Input
         }] }); })();
 
@@ -2334,7 +2401,7 @@ class WmPipe {
         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 && isFunction(this.pipeRef.formatter);
     }
     customFormatter(data, args) {
         try {
@@ -2349,7 +2416,7 @@ class WmPipe {
 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 (!isDate(data) && !isNaN(data)) {
         data = parseInt(data, 10);
     }
     // get the timestamp value. If data is time string, append date string to the time value
@@ -2368,12 +2435,12 @@ class TrailingZeroDecimalPipe {
     static { this.ɵfac = function TrailingZeroDecimalPipe_Factory(t) { return new (t || TrailingZeroDecimalPipe)(i0.ɵɵdirectiveInject(i1$1.DecimalPipe, 16)); }; }
     static { this.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "trailingZeroDecimalPipe", type: TrailingZeroDecimalPipe, pure: true }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TrailingZeroDecimalPipe, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TrailingZeroDecimalPipe, [{
         type: Pipe,
         args: [{
                 name: 'trailingZeroDecimalPipe'
             }]
-    }], function () { return [{ type: i1$1.DecimalPipe }]; }, null); })();
+    }], () => [{ type: i1$1.DecimalPipe }], null); })();
 class ToDatePipe extends WmPipe {
     // This method calls the custom formatter fn after applying the exisitng date pattern
     returnFn(data, args) {
@@ -2423,18 +2490,18 @@ class ToDatePipe extends WmPipe {
     static { this.ɵfac = function ToDatePipe_Factory(t) { return new (t || ToDatePipe)(i0.ɵɵdirectiveInject(i1$1.DatePipe, 16), i0.ɵɵdirectiveInject(i1.AbstractI18nService, 16), i0.ɵɵdirectiveInject(i1.CustomPipeManager, 16)); }; }
     static { this.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "toDate", type: ToDatePipe, pure: true }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToDatePipe, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToDatePipe, [{
         type: Pipe,
         args: [{
                 name: 'toDate'
             }]
-    }], function () { return [{ type: i1$1.DatePipe }, { type: i1.AbstractI18nService }, { type: i1.CustomPipeManager }]; }, null); })();
+    }], () => [{ type: i1$1.DatePipe }, { type: i1.AbstractI18nService }, { type: i1.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);
@@ -2447,20 +2514,20 @@ class ToNumberPipe {
     static { this.ɵfac = function ToNumberPipe_Factory(t) { return new (t || ToNumberPipe)(i0.ɵɵdirectiveInject(i1$1.DecimalPipe, 16), i0.ɵɵdirectiveInject(AbstractI18nService, 16)); }; }
     static { this.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "toNumber", type: ToNumberPipe, pure: true }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToNumberPipe, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToNumberPipe, [{
         type: Pipe,
         args: [{
                 name: 'toNumber'
             }]
-    }], function () { return [{ type: i1$1.DecimalPipe }, { type: i1.AbstractI18nService, decorators: [{
+    }], () => [{ type: i1$1.DecimalPipe }, { type: i1.AbstractI18nService, decorators: [{
                 type: Inject,
                 args: [AbstractI18nService]
-            }] }]; }, null); })();
+            }] }], null); })();
 class ToCurrencyPipe {
     transform(data, currencySymbol, fracSize) {
         const _currencySymbol = (CURRENCY_INFO[currencySymbol] || {}).symbol || currencySymbol || '';
         let _val = new ToNumberPipe(this.decimalPipe, this.i18nService).transform(data, fracSize);
-        const isNegativeNumber = _.startsWith(_val, '-');
+        const isNegativeNumber = startsWith(_val, '-');
         if (isNegativeNumber) {
             _val = _val.replace('-', '');
         }
@@ -2473,23 +2540,23 @@ class ToCurrencyPipe {
     static { this.ɵfac = function ToCurrencyPipe_Factory(t) { return new (t || ToCurrencyPipe)(i0.ɵɵdirectiveInject(i1$1.DecimalPipe, 16), i0.ɵɵdirectiveInject(AbstractI18nService, 16)); }; }
     static { this.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "toCurrency", type: ToCurrencyPipe, pure: true }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToCurrencyPipe, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToCurrencyPipe, [{
         type: Pipe,
         args: [{
                 name: 'toCurrency'
             }]
-    }], function () { return [{ type: i1$1.DecimalPipe }, { type: i1.AbstractI18nService, decorators: [{
+    }], () => [{ type: i1$1.DecimalPipe }, { type: i1.AbstractI18nService, decorators: [{
                 type: Inject,
                 args: [AbstractI18nService]
-            }] }]; }, null); })();
+            }] }], null); })();
 class PrefixPipe {
     transform(data, padding) {
-        return (_.isUndefined(data) || data === null || data === '') ? data : ((padding || '') + data);
+        return (isUndefined(data) || data === null || data === '') ? data : ((padding || '') + data);
     }
     static { this.ɵfac = function PrefixPipe_Factory(t) { return new (t || PrefixPipe)(); }; }
     static { this.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "prefix", type: PrefixPipe, pure: true }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrefixPipe, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrefixPipe, [{
         type: Pipe,
         args: [{
                 name: 'prefix'
@@ -2497,12 +2564,12 @@ class PrefixPipe {
     }], null, null); })();
 class SuffixPipe {
     transform(data, padding) {
-        return (_.isUndefined(data) || data === null || data === '') ? data : (data + (padding || ''));
+        return (isUndefined(data) || data === null || data === '') ? data : (data + (padding || ''));
     }
     static { this.ɵfac = function SuffixPipe_Factory(t) { return new (t || SuffixPipe)(); }; }
     static { this.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "suffix", type: SuffixPipe, pure: true }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SuffixPipe, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SuffixPipe, [{
         type: Pipe,
         args: [{
                 name: 'suffix'
@@ -2521,7 +2588,7 @@ class CustomPipe {
             argumentArr.push(arguments[i]);
         }
         let pipeRef = this.custmeUserPipe.getCustomPipe(pipename);
-        if (!pipeRef || !_.isFunction(pipeRef.formatter)) {
+        if (!pipeRef || !isFunction(pipeRef.formatter)) {
             console.warn('formatter is not defined, please check the custom pipes documentation');
             return data;
         }
@@ -2536,12 +2603,12 @@ class CustomPipe {
     static { this.ɵfac = function CustomPipe_Factory(t) { return new (t || CustomPipe)(i0.ɵɵdirectiveInject(i1.CustomPipeManager, 16)); }; }
     static { this.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "custom", type: CustomPipe, pure: true }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CustomPipe, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CustomPipe, [{
         type: Pipe,
         args: [{
                 name: 'custom'
             }]
-    }], function () { return [{ type: i1.CustomPipeManager }]; }, null); })();
+    }], () => [{ type: i1.CustomPipeManager }], null); })();
 class TimeFromNowPipe {
     transform(data) {
         let timestamp;
@@ -2554,17 +2621,17 @@ class TimeFromNowPipe {
     static { this.ɵfac = function TimeFromNowPipe_Factory(t) { return new (t || TimeFromNowPipe)(); }; }
     static { this.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "timeFromNow", type: TimeFromNowPipe, pure: true }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeFromNowPipe, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeFromNowPipe, [{
         type: 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.ɵɵgetInheritedFactory(NumberToStringPipe)))(t || NumberToStringPipe); }; }(); }
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵNumberToStringPipe_BaseFactory; return function NumberToStringPipe_Factory(t) { return (ɵNumberToStringPipe_BaseFactory || (ɵNumberToStringPipe_BaseFactory = i0.ɵɵgetInheritedFactory(NumberToStringPipe)))(t || NumberToStringPipe); }; })(); }
     static { this.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "numberToString", type: NumberToStringPipe, pure: true }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NumberToStringPipe, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NumberToStringPipe, [{
         type: Pipe,
         args: [{
                 name: 'numberToString'
@@ -2577,7 +2644,7 @@ class StringToNumberPipe {
     static { this.ɵfac = function StringToNumberPipe_Factory(t) { return new (t || StringToNumberPipe)(); }; }
     static { this.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "stringToNumber", type: StringToNumberPipe, pure: true }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StringToNumberPipe, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StringToNumberPipe, [{
         type: Pipe,
         args: [{
                 name: 'stringToNumber'
@@ -2589,18 +2656,18 @@ class FilterPipe {
             return [];
         }
         // If object is passed as first paramter
-        if (_.isObject(field)) {
-            return _.filter(data, field);
+        if (isObject(field)) {
+            return filter$1(data, field);
         }
         // If key value pair is provided
-        return _.filter(data, item => {
-            return _.includes(item[field], value);
+        return filter$1(data, item => {
+            return includes(item[field], value);
         });
     }
     static { this.ɵfac = function FilterPipe_Factory(t) { return new (t || FilterPipe)(); }; }
     static { this.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "filter", type: FilterPipe, pure: true }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FilterPipe, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FilterPipe, [{
         type: Pipe,
         args: [{
                 name: 'filter'
@@ -2630,7 +2697,7 @@ class FileSizePipe {
     static { this.ɵfac = function FileSizePipe_Factory(t) { return new (t || FileSizePipe)(); }; }
     static { this.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "filesize", type: FileSizePipe, pure: true }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FileSizePipe, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FileSizePipe, [{
         type: Pipe,
         args: [{
                 name: 'filesize'
@@ -2671,7 +2738,7 @@ class FileIconClassPipe {
     static { this.ɵfac = function FileIconClassPipe_Factory(t) { return new (t || FileIconClassPipe)(); }; }
     static { this.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "fileIconClass", type: FileIconClassPipe, pure: true }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FileIconClassPipe, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FileIconClassPipe, [{
         type: Pipe,
         args: [{
                 name: 'fileIconClass'
@@ -2688,7 +2755,7 @@ class StateClassPipe {
     static { this.ɵfac = function StateClassPipe_Factory(t) { return new (t || StateClassPipe)(); }; }
     static { this.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "stateClass", type: StateClassPipe, pure: true }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StateClassPipe, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StateClassPipe, [{
         type: Pipe,
         args: [{
                 name: 'stateClass'
@@ -2771,7 +2838,7 @@ class FileExtensionFromMimePipe {
     static { this.ɵfac = function FileExtensionFromMimePipe_Factory(t) { return new (t || FileExtensionFromMimePipe)(); }; }
     static { this.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "fileExtensionFromMime", type: FileExtensionFromMimePipe, pure: true }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FileExtensionFromMimePipe, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FileExtensionFromMimePipe, [{
         type: Pipe,
         args: [{
                 name: 'fileExtensionFromMime'
@@ -2807,12 +2874,12 @@ class TrustAsPipe {
     static { this.ɵfac = function TrustAsPipe_Factory(t) { return new (t || TrustAsPipe)(i0.ɵɵdirectiveInject(i1$2.DomSanitizer, 16)); }; }
     static { this.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "trustAs", type: TrustAsPipe, pure: true }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TrustAsPipe, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TrustAsPipe, [{
         type: Pipe,
         args: [{
                 name: 'trustAs'
             }]
-    }], function () { return [{ type: i1$2.DomSanitizer }]; }, null); })();
+    }], () => [{ type: i1$2.DomSanitizer }], null); })();
 
 const openedDialogs = [];
 /*We need closedDialogs array because onHidden event is asynchronous,
@@ -2927,7 +2994,7 @@ class DialogServiceImpl {
      * closes all the opened dialogs
      */
     closeAllDialogs() {
-        _.forEach(openedDialogs.reverse(), (dialog) => {
+        forEach(openedDialogs.reverse(), (dialog) => {
             dialog.close();
         });
     }
@@ -2976,9 +3043,9 @@ class DialogServiceImpl {
     static { this.ɵfac = function DialogServiceImpl_Factory(t) { return new (t || DialogServiceImpl)(); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: DialogServiceImpl, factory: DialogServiceImpl.ɵfac }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DialogServiceImpl, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DialogServiceImpl, [{
         type: Injectable
-    }], function () { return []; }, null); })();
+    }], () => [], null); })();
 
 class SanitizePipe {
     constructor(domSanitizer) {
@@ -3012,12 +3079,12 @@ class SanitizePipe {
     static { this.ɵfac = function SanitizePipe_Factory(t) { return new (t || SanitizePipe)(i0.ɵɵdirectiveInject(i1$2.DomSanitizer, 16)); }; }
     static { this.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "sanitize", type: SanitizePipe, pure: true }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SanitizePipe, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SanitizePipe, [{
         type: Pipe,
         args: [{
                 name: 'sanitize'
             }]
-    }], function () { return [{ type: i1$2.DomSanitizer }]; }, null); })();
+    }], () => [{ type: i1$2.DomSanitizer }], null); })();
 
 const wmComponents = [
     ContainerDirective,
@@ -3076,7 +3143,7 @@ class WmComponentsModule {
     static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
             SecurityModule] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WmComponentsModule, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WmComponentsModule, [{
         type: NgModule,
         args: [{
                 imports: [
@@ -3168,7 +3235,7 @@ const LIVE_CONSTANTS = {
 };
 // Returns true if widget is autocomplete or chips
 function isSearchWidgetType(widget) {
-    return _.includes([FormWidgetType.AUTOCOMPLETE, FormWidgetType.TYPEAHEAD, FormWidgetType.CHIPS], widget);
+    return includes([FormWidgetType.AUTOCOMPLETE, FormWidgetType.TYPEAHEAD, FormWidgetType.CHIPS], widget);
 }
 function onSuccess(response, res, rej) {
     if (response.error) {
@@ -3257,7 +3324,7 @@ function fetchRelatedFieldData(dataSource, formField, options) {
     }
     primaryKeys = dataSource.execute(DataSource.Operation.GET_RELATED_PRIMARY_KEYS, relatedField);
     formField.datafield = datafield;
-    formField._primaryKey = _.isEmpty(primaryKeys) ? undefined : primaryKeys[0];
+    formField._primaryKey = isEmpty(primaryKeys) ? undefined : primaryKeys[0];
     formField.compareby = primaryKeys && primaryKeys.join(',');
     displayField = datafield === ALLFIELDS ? undefined : datafield;
     formField.displayfield = displayField = (formField.displayfield || displayField || formField._primaryKey);
@@ -3276,12 +3343,12 @@ function fetchRelatedFieldData(dataSource, formField, options) {
             dataSource.execute(DataSource.Operation.GET_RELATED_TABLE_DATA, {
                 relatedField,
                 pagesize: formField.limit,
-                orderBy: formField.orderby ? _.replace(formField.orderby, /:/g, ' ') : '',
+                orderBy: formField.orderby ? 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 || head(keys(get(response, '[0]')));
                 if (formField.showPendingSpinner) {
                     formField.showPendingSpinner = false;
                 }
@@ -3296,8 +3363,8 @@ function fetchRelatedFieldData(dataSource, formField, options) {
  * @param callbackFn - function to be called with the new replaced values if any in the filterexpressions object
  */
 const interpolateBindExpressions = (context, filterexpressions, callbackFn) => {
-    const debouncedFn = debounce(() => {
-        if (_.isFunction(callbackFn)) {
+    const debouncedFn = debounce$1(() => {
+        if (isFunction(callbackFn)) {
             callbackFn(filterexpressions);
         }
     }, 300);
@@ -3306,8 +3373,8 @@ const interpolateBindExpressions = (context, filterexpressions, callbackFn) => {
      * 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 ? (isObject(filterexpressions) ? filterexpressions : JSON.parse(filterexpressions)) : {};
+    const destroyFn = context.registerDestroyListener ? context.registerDestroyListener.bind(context) : noop;
     const filterSubscription = processFilterExpBindNode(context, filterExpressions).subscribe((response) => {
         filterexpressions = JSON.stringify(response.filterExpressions);
         debouncedFn();
@@ -3335,7 +3402,7 @@ const getDistinctFieldProperties = (dataSource, formField) => {
         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 ? (isObject(formField.filterexpressions) ? formField.filterexpressions : JSON.parse(formField.filterexpressions)) : {};
     }
     else {
         props.tableName = dataSource.execute(DataSource.Operation.GET_ENTITY_NAME);
@@ -3408,14 +3475,14 @@ function setFieldDataSet(formField, data, options) {
     const emptySupportWidgets = [FormWidgetType.SELECT, FormWidgetType.RADIOSET];
     const emptyOption = {};
     const dataSet = [];
-    if (options.isEnableEmptyFilter && _.includes(emptySupportWidgets, formField[options.widget]) &&
+    if (options.isEnableEmptyFilter && 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 => {
+    each(data, key => {
         const value = key[options.aliasColumn];
         const option = {};
         if (value !== null && value !== '') {
@@ -3443,7 +3510,7 @@ function setFieldDataSet(formField, data, options) {
  *
  */
 function fetchDistinctValues(dataSource, formFields, options) {
-    if (_.isEmpty(formFields)) {
+    if (isEmpty(formFields)) {
         return;
     }
     formFields.forEach(formField => {
@@ -3555,7 +3622,7 @@ function getRangeMatchMode(minValue, maxValue) {
  * @param {object} enableemptyfilter empty filter options
  */
 function getEnableEmptyFilter(enableemptyfilter) {
-    return enableemptyfilter && _.intersection(enableemptyfilter.split(','), LIVE_CONSTANTS.NULL_EMPTY).length > 0;
+    return enableemptyfilter && intersection(enableemptyfilter.split(','), LIVE_CONSTANTS.NULL_EMPTY).length > 0;
 }
 /**
  * @ngdoc function
@@ -3570,14 +3637,14 @@ function getEnableEmptyFilter(enableemptyfilter) {
  */
 function getEmptyMatchMode(enableemptyfilter) {
     let matchMode;
-    const emptyFilterOptions = _.split(enableemptyfilter, ',');
-    if (_.intersection(emptyFilterOptions, LIVE_CONSTANTS.NULL_EMPTY).length === 2) {
+    const emptyFilterOptions = split(enableemptyfilter, ',');
+    if (intersection(emptyFilterOptions, LIVE_CONSTANTS.NULL_EMPTY).length === 2) {
         matchMode = MatchMode.NULLOREMPTY;
     }
-    else if (_.includes(emptyFilterOptions, LIVE_CONSTANTS.NULL)) {
+    else if (includes(emptyFilterOptions, LIVE_CONSTANTS.NULL)) {
         matchMode = MatchMode.NULL;
     }
-    else if (_.includes(emptyFilterOptions, LIVE_CONSTANTS.EMPTY)) {
+    else if (includes(emptyFilterOptions, LIVE_CONSTANTS.EMPTY)) {
         matchMode = MatchMode.EMPTY;
     }
     return matchMode;
@@ -3593,13 +3660,13 @@ function getEmptyMatchMode(enableemptyfilter) {
  * @returns {Array<any>}
  */
 const createArrayFrom = (data) => {
-    if (_.isUndefined(data) || _.isNull(data)) {
+    if (isUndefined(data) || isNull(data)) {
         return [];
     }
-    if (_.isString(data)) {
+    if (isString(data)) {
         data = data.split(',').map(Function.prototype.call, String.prototype.trim);
     }
-    if (!_.isArray(data)) {
+    if (!isArray(data)) {
         data = [data];
     }
     return data;
@@ -3619,13 +3686,13 @@ const createArrayFrom = (data) => {
  */
 function applyFilterOnField(dataSource, filterDef, formFields, newVal, options = {}) {
     const fieldName = filterDef.field || filterDef.key;
-    const filterOnFields = _.filter(formFields, { 'filter-on': fieldName });
+    const filterOnFields = filter$1(formFields, { 'filter-on': fieldName });
     newVal = filterDef['is-range'] ? getRangeFieldValue(filterDef.minValue, filterDef.maxValue) : (isDefined(newVal) ? newVal : filterDef.value);
-    if (!dataSource || (options.isFirst && (_.isUndefined(newVal) || newVal === ''))) {
+    if (!dataSource || (options.isFirst && (isUndefined(newVal) || newVal === ''))) {
         return;
     }
     // Loop over the fields for which the current field is filter on field
-    _.forEach(filterOnFields, filterField => {
+    forEach(filterOnFields, filterField => {
         const filterKey = filterField.field || filterField.key;
         const lookUpField = filterDef['lookup-field'] || filterDef._primaryKey;
         const filterWidget = filterField['edit-widget-type'] || filterField.widgettype;
@@ -3651,7 +3718,7 @@ function applyFilterOnField(dataSource, filterDef, formFields, newVal, options =
             else {
                 matchMode = MatchMode.EQUALS;
             }
-            filterVal = (_.isObject(newVal) && !_.isArray(newVal)) ? newVal[lookUpField] : newVal;
+            filterVal = (isObject(newVal) && !isArray(newVal)) ? newVal[lookUpField] : newVal;
             filterFields[filterOn] = {
                 'value': filterVal,
                 'matchMode': matchMode
@@ -3686,9 +3753,9 @@ function transformData(dataObject, variableName) {
     // data sanity testing
     dataObject = dataObject || [];
     // if the dataObject is not an array make it an array
-    if (!_.isArray(dataObject)) {
+    if (!isArray(dataObject)) {
         // if the data returned is of type string, make it an object inside an array
-        if (_.isString(dataObject)) {
+        if (isString(dataObject)) {
             keys = variableName.substring(variableName.indexOf('.') + 1, variableName.length).split('.');
             oldKeys = [];
             numKeys = keys.length;
@@ -3712,9 +3779,9 @@ function transformData(dataObject, variableName) {
         /*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 (isString(dataObject[0])) {
             tempArr = [];
-            _.forEach(dataObject, str => {
+            forEach(dataObject, str => {
                 newObj = {};
                 newObj[variableName.split('.').join('-')] = str;
                 tempArr.push(newObj);
@@ -3757,18 +3824,18 @@ const ROLLUP_PATTERNS = {
 /**
  * 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 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 orderBy(dataSet, fields, directions);
 };
 /**
  * Returns an array of object, each object contain the DataSetItem whose key, value, label are extracted from object keys.
@@ -3777,10 +3844,10 @@ const transformDataWithKeys = (dataSet) => {
     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 (isObject(dataSet[0]) || (isObject(dataSet) && !(dataSet instanceof Array))) {
         // getting keys of the object
         const objectKeys = Object.keys(dataSet[0] || dataSet);
-        _.forEach(objectKeys, (objKey, index) => {
+        forEach(objectKeys, (objKey, index) => {
             data.push({
                 key: objKey,
                 label: objKey,
@@ -3793,21 +3860,21 @@ const transformDataWithKeys = (dataSet) => {
 };
 // Converts any type of data to array.
 const extractDataAsArray = data => {
-    if (_.isUndefined(data) || _.isNull(data) || _.trim(data) === '') {
+    if (isUndefined(data) || isNull(data) || trim(data) === '') {
         return [];
     }
-    if (_.isString(data)) {
-        data = _.split(data, ',').map(str => str.trim());
+    if (isString(data)) {
+        data = split(data, ',').map(str => str.trim());
     }
-    if (!_.isArray(data)) {
+    if (!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 (isString(dataResult)) {
+        dataResult = split(dataResult, ',').map(str => str.trim());
     }
     return dataResult;
 };
@@ -3819,7 +3886,7 @@ const isSeachWidget = (widgetType) => {
 const setGroupbyKey = (scope, context, dataSetItem, innerItem) => {
     if (scope && isSeachWidget(scope.widgetType)) {
         if (scope.groupby) {
-            if (_.includes(scope.groupby, '(')) {
+            if (includes(scope.groupby, '(')) {
                 //[Todo-CSP]: can generate expr fn in page based on groupby property on widget
                 const groupDataByUserDefinedFn = $parseEvent(scope.groupby);
                 dataSetItem.groupby = groupDataByUserDefinedFn(context, { 'row': dataSetItem.dataObject || dataSetItem });
@@ -3850,10 +3917,10 @@ const transformFormData = (context, dataSet, myDataField, displayOptions, startI
     }
     dataSet = convertDataToObject(dataSet);
     // startIndex is the index of the next new item.
-    if (_.isUndefined(startIndex)) {
+    if (isUndefined(startIndex)) {
         startIndex = 1;
     }
-    if (_.isString(dataSet)) {
+    if (isString(dataSet)) {
         dataSet = dataSet.split(',').map(str => str.trim());
         dataSet.forEach((option, index) => {
             const dataSetItem = { key: option, value: option, label: (isDefined(option) && option !== null) ? option.toString() : '', index: startIndex + index };
@@ -3861,17 +3928,21 @@ const transformFormData = (context, dataSet, myDataField, displayOptions, startI
             data.push(dataSetItem);
         });
     }
-    else if (_.isArray(dataSet) && !_.isObject(dataSet[0])) { // array of primitive values only
+    else if (isArray(dataSet) && !isObject(dataSet[0])) { // array of primitive values only
         dataSet.forEach((option, index) => {
             const dataSetItem = { key: option, value: option, label: (isDefined(option) && option !== null) ? option.toString() : '', index: startIndex + index };
             setGroupbyKey(scope, context, dataSetItem, 'value');
             data.push(dataSetItem);
         });
     }
-    else if (!(dataSet instanceof Array) && _.isObject(dataSet)) {
+    else if (!(dataSet instanceof Array) && isObject(dataSet)) {
         const i = 0;
-        _.forEach(dataSet, (value, key) => {
-            const dataSetItem = { key: _.trim(key), value: key, label: (isDefined(value) && value !== null) ? value.toString() : '', index: startIndex, dataObject: dataSet };
+        forEach(dataSet, (value, key) => {
+            // @ts-ignore
+            const dataSetItem = { key: trim(key), value: key, label: (isDefined(value) && value !== null) ? value.toString() : '',
+                index: startIndex,
+                dataObject: dataSet
+            };
             setGroupbyKey(scope, context, dataSetItem, 'value');
             data.push(dataSetItem);
         });
@@ -3883,7 +3954,7 @@ const transformFormData = (context, dataSet, myDataField, displayOptions, startI
         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 (!isUndefined(key) && !isNull(key)) {
                 const label = getEvaluatedData(option, {
                     field: displayOptions.displayField,
                     expression: displayOptions.displayExpr,
@@ -3893,7 +3964,7 @@ const transformFormData = (context, dataSet, myDataField, displayOptions, startI
                     key: key,
                     label: (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) {
@@ -3915,16 +3986,16 @@ const transformFormData = (context, dataSet, myDataField, displayOptions, startI
 const getUniqObjsByDataField = (data, dataField, displayField, allowEmptyFields) => {
     let uniqData;
     const isAllFields = dataField === ALLFIELDS;
-    uniqData = isAllFields ? _.uniqWith(data, _.isEqual) : _.uniqBy(data, 'key');
+    uniqData = isAllFields ? uniqWith(data, isEqual) : uniqBy(data, 'key');
     if (!displayField || allowEmptyFields) {
         return uniqData;
     }
     // return objects having non empty datafield and display field values.
-    return _.filter(uniqData, (obj) => {
+    return filter$1(uniqData, (obj) => {
         if (isAllFields) {
-            return _.trim(obj.label);
+            return trim(obj.label);
         }
-        return _.trim(obj.key) && _.trim(obj.label);
+        return trim(obj.key) && trim(obj.label);
     });
 };
 /**
@@ -3936,7 +4007,7 @@ const getUniqObjsByDataField = (data, dataField, displayField, allowEmptyFields)
  */
 const setItemByCompare = (datasetItems, compareWithDataObj, compareByField) => {
     // compare the fields based on fields given to compareby property.
-    _.forEach(datasetItems, opt => {
+    forEach(datasetItems, opt => {
         if (isEqualWithFields(opt.value, compareWithDataObj, compareByField)) {
             opt.selected = true;
             return false;
@@ -3953,13 +4024,13 @@ const setItemByCompare = (datasetItems, compareWithDataObj, compareByField) => {
  */
 const getSortedGroupedData = (groupedLiData, groupBy, orderby) => {
     const _groupedData = [];
-    _.forEach(_.keys(groupedLiData), (groupkey, index) => {
+    forEach(keys(groupedLiData), (groupkey, index) => {
         const liData = getOrderedDataset(groupedLiData[groupkey], orderby, 'dataObject');
         _groupedData.push({
             key: groupkey,
-            data: _.sortBy(liData, data => {
+            data: sortBy(liData, data => {
                 data._groupIndex = index + 1;
-                return _.get(data, groupBy) || _.get(data.dataObject, groupBy);
+                return get(data, groupBy) || get(data.dataObject, groupBy);
             })
         });
     });
@@ -3979,10 +4050,11 @@ const getSortedGroupedData = (groupedLiData, groupBy, orderby) => {
  */
 const groupData = (compRef, data, groupby, match, orderby, dateformat, datePipe, innerItem, AppDefaults) => {
     let groupedLiData = {};
-    if (_.includes(groupby, '(')) {
+    if (includes(groupby, '(')) {
         //[Todo-CSP]: can generate expr fn in page based on groupby property on widget
         const groupDataByUserDefinedFn = $parseEvent(groupby);
-        groupedLiData = _.groupBy(data, val => {
+        groupedLiData = groupBy(data, val => {
+            // @ts-ignore
             return groupDataByUserDefinedFn(compRef.viewParent, { 'row': val.dataObject || val });
         });
     }
@@ -4008,14 +4080,14 @@ const getGroupedData = (fieldDefs, groupby, match, orderby, dateFormat, datePipe
     }
     // 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 = orderBy(fieldDefs, fieldDef => {
+        const groupKey = get(innerItem ? fieldDef[innerItem] : fieldDef, groupby);
         if (groupKey) {
-            return _.toLower(groupKey);
+            return 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 = groupBy(fieldDefs, groupDataByField.bind(undefined, groupby, match, innerItem, dateFormat, datePipe, AppDefaults));
     momentLocale._calendar = momentCalendarOptions; // Reset to default moment calendar options
     return groupedLiData;
 };
@@ -4081,9 +4153,9 @@ const getTimeRolledUpString = (concatStr, rollUp, dateformat, datePipe, AppDefau
 // 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 = get(innerItem ? liData[innerItem] : liData, groupby);
     // by default set the undefined groupKey as 'others'
-    if (_.isUndefined(concatStr) || _.isNull(concatStr) || concatStr.toString().trim() === '') {
+    if (isUndefined(concatStr) || isNull(concatStr) || concatStr.toString().trim() === '') {
         return GROUP_BY_OPTIONS.OTHERS;
     }
     // if match prop is alphabetic ,get the starting alphabet of the word as key.
@@ -4091,7 +4163,7 @@ const groupDataByField = (groupby, match, innerItem, dateFormat, datePipe, AppDe
         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 (includes(values(TIME_ROLLUP_OPTIONS), match)) {
         concatStr = getTimeRolledUpString(concatStr, match, dateFormat, datePipe, AppDefaults);
     }
     return concatStr;
@@ -4106,13 +4178,13 @@ const toggleAllHeaders = (el) => {
     // 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');
+        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');
             }
         });
     }
@@ -4177,8 +4249,8 @@ const EDIT_MODE = {
 };
 // Method to set the header config of the data table
 const setHeaderConfig = (headerConfig, config, field, index) => {
-    _.forEach(headerConfig, cols => {
-        if (_.get(cols, 'isGroup')) {
+    forEach(headerConfig, cols => {
+        if (get(cols, 'isGroup')) {
             if (cols.field === field) {
                 cols.columns[index] = config;
             }
@@ -4234,8 +4306,8 @@ const getFieldLayoutConfig = (captionWidth, captionPosition, os) => {
     }
     else if (captionWidth) {
         // handling itemsperrow containing string of classes
-        _.forEach(_.split(captionWidth, ' '), function (cls) {
-            const keys = _.split(cls, '-'), tier = keys[0];
+        forEach(split(captionWidth, ' '), function (cls) {
+            const keys = split(cls, '-'), tier = keys[0];
             let _captionWidth, widgetWidth;
             _captionWidth = parseInt(keys[1], 10);
             widgetWidth = 12 - _captionWidth;
@@ -4250,7 +4322,7 @@ const getFieldLayoutConfig = (captionWidth, captionPosition, os) => {
     };
 };
 const getDefaultViewModeWidget = widget => {
-    if (_.includes(['checkbox', 'toggle', 'rating'], widget)) {
+    if (includes(['checkbox', 'toggle', 'rating'], widget)) {
         return VIEW_MODE_OPTIONS.DEFAULT;
     }
     return VIEW_MODE_OPTIONS.LABEL;
@@ -4320,7 +4392,7 @@ const getDataTableFilterWidget = type => {
     if (type === DataType.BOOLEAN) {
         widget = FormWidgetType.SELECT;
     }
-    if (_.includes([FormWidgetType.TEXT, FormWidgetType.NUMBER, FormWidgetType.SELECT, FormWidgetType.AUTOCOMPLETE,
+    if (includes([FormWidgetType.TEXT, FormWidgetType.NUMBER, FormWidgetType.SELECT, FormWidgetType.AUTOCOMPLETE,
         FormWidgetType.DATE, FormWidgetType.TIME, FormWidgetType.DATETIME], widget)) {
         return widget;
     }
@@ -4378,22 +4450,22 @@ const getValidLink = (link) => {
     const routRegex = /^(\/|#\/|#)(?!\W).*/;
     if (link) {
         if (routRegex.test(link)) {
-            link = _.first(link.match(/[\w]+.*/g)) || '';
+            link = first(link.match(/[\w]+.*/g)) || '';
             return `#/${link}`;
         }
-        if (_.startsWith(link, 'www.')) {
+        if (startsWith(link, 'www.')) {
             return `//${link}`;
         }
         return link;
     }
 };
-class DatasetAwareNavComponent extends StylableComponent {
-    constructor(inj, WIDGET_CONFIG) {
-        super(inj, WIDGET_CONFIG);
+let DatasetAwareNavComponent = class DatasetAwareNavComponent extends StylableComponent {
+    constructor(inj, WIDGET_CONFIG, explicitContext) {
+        super(inj, WIDGET_CONFIG, explicitContext);
         this.nodes = [];
         this.nodes$ = new Subject();
         // debounce function for reset nodes functions.
-        this._resetNodes = _.debounce(this.resetNodes, 50);
+        this._resetNodes = debounce(this.resetNodes, 50);
         this.securityService = this.inj.get(SecurityService);
         this.binditemlabel = this.nativeElement.getAttribute('itemlabel.bind');
         this.binditemicon = this.nativeElement.getAttribute('itemicon.bind');
@@ -4413,24 +4485,49 @@ class DatasetAwareNavComponent extends StylableComponent {
      */
     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) || 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) || get(node, fields.actionField),
+            badge: getEvaluatedData(node, {
+                field: this.itembadge,
+                bindExpression: this.binditembadge
+            }, context) || get(node, fields.badgeField),
             children: Array.isArray(children) ? this.getNodes(children) : [],
-            class: _.get(node, fields.classField),
+            class: 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) || 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)),
             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 : findValueOf(node, this.datafield)) : node
         };
-        return _.omitBy(navNode, _.isUndefined);
+        // @ts-ignore
+        return omitBy(navNode, isUndefined);
     }
     resetItemFieldMap() {
         this._itemFieldMap = null;
@@ -4462,7 +4559,7 @@ class DatasetAwareNavComponent extends StylableComponent {
     prepareNodeDataSet(nv) {
         nv = createArrayFrom(nv);
         return nv.map((val) => {
-            if (!isObject(val)) {
+            if (!isObject$1(val)) {
                 return {
                     label: val,
                     value: val
@@ -4513,7 +4610,12 @@ class DatasetAwareNavComponent extends StylableComponent {
         }
         super.onPropertyChange(key, nv, ov);
     }
-}
+};
+DatasetAwareNavComponent = __decorate([
+    __param(2, Inject('EXPLICIT_CONTEXT')),
+    __param(2, Optional()),
+    __metadata("design:paramtypes", [Injector, Object, Object])
+], DatasetAwareNavComponent);
 
 const DEFAULT_VALIDATOR = {
     pattern: 'regexp',
@@ -4563,7 +4665,7 @@ class BaseFieldValidations {
         if (this.instance.regexp) {
             _validator.push(Validators.pattern(this.instance.regexp));
         }
-        if (this.formwidget && _.isFunction(this.formwidget.validate)) {
+        if (this.formwidget && isFunction(this.formwidget.validate)) {
             _validator.push(this.formwidget.validate.bind(this.formwidget));
         }
         return _validator;
@@ -4590,7 +4692,7 @@ class BaseFieldValidations {
     }
     getPromiseList(validators) {
         const arr = [];
-        _.forEach(validators, (fn, index) => {
+        forEach(validators, (fn, index) => {
             let promise = fn;
             if (fn instanceof Function && fn.bind) {
                 promise = fn(this.widgetControl, this.widgetContext);
@@ -4612,11 +4714,11 @@ class BaseFieldValidations {
                     // 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 = get(err, 'errorMessage');
                     }
                     else {
-                        const keys = _.keys(err);
-                        this.instance.validationmessage = (err[keys[0]]).toString();
+                        const keys$1 = keys(err);
+                        this.instance.validationmessage = (err[keys$1[0]]).toString();
                     }
                     return err;
                 }).then(response => {
@@ -4648,7 +4750,7 @@ class BaseFieldValidations {
         }
     }
     isDefaultValidator(type) {
-        return _.get(VALIDATOR, _.toUpper(type));
+        return get(VALIDATOR, toUpper(type));
     }
     // default validator is bound to a function then watch for value changes
     // otherwise set the value of default validator directly
@@ -4664,10 +4766,10 @@ class BaseFieldValidations {
     }
     // sets the default validation on the form field
     setValidators(validators) {
-        let _cloneValidators = _.cloneDeep(validators);
+        let _cloneValidators = cloneDeep(validators);
         this.hasValidators = true;
         this._syncValidators = [];
-        _.forEach(_cloneValidators, (obj, index) => {
+        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)
@@ -4676,17 +4778,17 @@ class BaseFieldValidations {
             }
             else {
                 // checks for default validator like required, maxchars etc.
-                const key = _.get(obj, 'type');
-                this.defaultValidatorMessages[key] = _.get(obj, 'errorMessage');
+                const key = get(obj, 'type');
+                this.defaultValidatorMessages[key] = get(obj, 'errorMessage');
                 if (this.isDefaultValidator(key)) {
-                    const value = _.get(obj, 'validator');
+                    const value = 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 = filter$1(_cloneValidators, val => {
             if (val) {
                 return val;
             }
@@ -4694,8 +4796,8 @@ class BaseFieldValidations {
         this.applyDefaultValidators();
     }
     observeOn(fields, context) {
-        _.forEach(fields, field => {
-            const formfield = _.find(this.widgetContext[context], { 'key': field });
+        forEach(fields, field => {
+            const formfield = find(this.widgetContext[context], { 'key': field });
             if (formfield) {
                 if (!formfield.notifyForFields) {
                     formfield.notifyForFields = [];
@@ -4726,13 +4828,13 @@ class BaseFieldValidations {
         const watchName = `${this.instance.widgetId}_` + key + '_formField';
         $unwatch(watchName);
         //[Todo-CSP]: Need clarity generate this expr fn if form is present in the page
-        this.instance.registerDestroyListener($watch('boundFn(fn)', _.extend(this.instance, this.instance.viewParent), { fn }, (nv, ov) => {
+        this.instance.registerDestroyListener($watch('boundFn(fn)', extend(this.instance, this.instance.viewParent), { fn }, (nv, ov) => {
             this.instance.widget[key] = nv;
             this.applyDefaultValidators();
         }, watchName));
     }
     isNullOrEmptyOrFalsy(value) {
-        return _.isEmpty(value);
+        return isEmpty(value);
     }
     // invokes both custom sync validations and default validations.
     applyDefaultValidators() {
@@ -4743,7 +4845,7 @@ class BaseFieldValidations {
         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(concat(this._syncValidators || [], validators));
         this.widgetControl.updateValueAndValidity(opt);
         this.setCustomValidationMessage();
     }
@@ -4753,14 +4855,14 @@ class BaseFieldValidations {
             return;
         }
         if (fieldErrors.hasOwnProperty('errorMessage')) {
-            this.instance.validationmessage = _.get(fieldErrors, 'errorMessage');
+            this.instance.validationmessage = get(fieldErrors, 'errorMessage');
         }
         else {
-            const keys = _.keys(fieldErrors);
-            const key = keys[0];
-            const validationMsgKey = _.get(DEFAULT_VALIDATOR, key) || this.formwidget.validateType;
+            const keys$1 = keys(fieldErrors);
+            const key = keys$1[0];
+            const validationMsgKey = get(DEFAULT_VALIDATOR, key) || this.formwidget.validateType;
             if (validationMsgKey) {
-                const msg = _.get(this.defaultValidatorMessages, validationMsgKey) || this.instance.validationmessage;
+                const msg = 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);
@@ -5144,5 +5246,5 @@ const updateDeviceView = (element, isTablet = false) => {
  * Generated bundle index. Do not edit.
  */
 
-export { ALLFIELDS, APPLY_STYLES_TYPE, AUTOCLOSE_TYPE, BaseComponent, BaseContainerComponent, BaseFieldValidations, ContainerDirective, Context, CustomPipe, DEBOUNCE_TIMES, DISPLAY_TYPE, DataSetItem, DatasetAwareNavComponent, DialogRef, DialogServiceImpl, EDIT_MODE, EVENTS_MAP, FileExtensionFromMimePipe, FileIconClassPipe, FileSizePipe, FilterPipe, INPUTMODE, ImagePipe, ItemTemplateDirective, LIVE_CONSTANTS, LazyLoadDirective, Live_Operations, MessageComponent, NAVIGATION_TYPE, NumberToStringPipe, PROP_ANY, PROP_BOOLEAN, PROP_NUMBER, PROP_STRING, PROP_TYPE, PartialContainerDirective, PartialDirective, PartialParamDirective, PartialParamHandlerDirective, PrefixPipe, PullToRefresh, RedrawableDirective, RepeatTemplateDirective, SanitizePipe, ShowInDeviceDirective, SmoothScrollDirective, StateClassPipe, StringToNumberPipe, StylableComponent, SuffixPipe, TextContentDirective, TimeFromNowPipe, ToCurrencyPipe, ToDatePipe, ToNumberPipe, TrailingZeroDecimalPipe, TrustAsPipe, WidgetConfig, WidgetRef, WmComponentsModule, applyFilterOnField, configureDnD, convertDataToObject, createArrayFrom, extractDataAsArray, extractDataSourceName, fetchDistinctValues, fetchRelatedFieldData, filterDate, getBackGroundImageUrl, getConditionalClasses, getContainerTargetClass, getDataTableFilterWidget, getDefaultValue, getDefaultViewModeWidget, getDistinctFieldProperties, getDistinctValues, getDistinctValuesForField, getEditModeWidget, getEmptyMatchMode, getEnableEmptyFilter, getEvaluatedData, getFieldLayoutConfig, getFieldTypeWidgetTypesMap, getImageUrl, getKeyboardFocusableElements, getMatchModeMsgs, getMatchModeTypesMap, getObjValueByKey, getOrderByExpr, getOrderedDataset, getRangeFieldValue, getRangeMatchMode, getRowOperationsColumn, getUniqObjsByDataField, getWatchIdentifier, getWidgetPropsByType, groupData, handleHeaderClick, hasLinkToCurrentPage, interpolateBindExpressions, isActiveNavItem, isBooleanAttr, isDataSetWidget, isDimensionProp, isStyle, parseValueByType, performDataOperation, prepareFieldDefs, propNameCSSKeyMap, provideAs, provideAsDialogRef, provideAsWidgetRef, refreshDataSource, register$1 as register, registerFormWidget, setFocusTrap, setHeaderConfig, setHeaderConfigForTable, setItemByCompare, styler, toggleAllHeaders, transformData, transformDataWithKeys, transformFormData, unsupportedStatePersistenceTypes, updateDeviceView };
+export { ALLFIELDS, APPLY_STYLES_TYPE, AUTOCLOSE_TYPE, BaseComponent, BaseContainerComponent, BaseFieldValidations, ContainerDirective, Context, CustomPipe, DEBOUNCE_TIMES, DISPLAY_TYPE, DataSetItem, DatasetAwareNavComponent, DialogRef, DialogServiceImpl, EDIT_MODE, EVENTS_MAP, FileExtensionFromMimePipe, FileIconClassPipe, FileSizePipe, FilterPipe, INPUTMODE, ImagePipe, ItemTemplateDirective, LIVE_CONSTANTS, LazyLoadDirective, Live_Operations, MessageComponent, NAVIGATION_TYPE, NumberToStringPipe, PROP_ANY, PROP_BOOLEAN, PROP_NUMBER, PROP_STRING, PROP_TYPE, PartialContainerDirective, PartialDirective, PartialParamDirective, PartialParamHandlerDirective, PrefixPipe, PullToRefresh, RedrawableDirective, RepeatTemplateDirective, SanitizePipe, ShowInDeviceDirective, SmoothScrollDirective, StateClassPipe, StringToNumberPipe, StylableComponent, SuffixPipe, TextContentDirective, TimeFromNowPipe, ToCurrencyPipe, ToDatePipe, ToNumberPipe, TrailingZeroDecimalPipe, TrustAsPipe, WidgetConfig, WidgetRef, WmComponentsModule, applyFilterOnField, configureDnD, convertDataToObject, createArrayFrom, extractDataAsArray, extractDataSourceName, fetchDistinctValues, fetchRelatedFieldData, filterDate, getBackGroundImageUrl, getConditionalClasses, getContainerTargetClass, getDataTableFilterWidget, getDefaultValue, getDefaultViewModeWidget, getDistinctFieldProperties, getDistinctValues, getDistinctValuesForField, getEditModeWidget, getEmptyMatchMode, getEnableEmptyFilter, getEvaluatedData, getFieldLayoutConfig, getFieldTypeWidgetTypesMap, getImageUrl, getKeyboardFocusableElements, getMatchModeMsgs, getMatchModeTypesMap, getObjValueByKey, getOrderByExpr, getOrderedDataset, getRangeFieldValue, getRangeMatchMode, getRowOperationsColumn, getUniqObjsByDataField, getWatchIdentifier, getWidgetPropsByType, groupData, handleHeaderClick, hasLinkToCurrentPage, interpolateBindExpressions, isActiveNavItem, isBooleanAttr, isDataSetWidget, isDimensionProp, isStyle, parseValueByType, performDataOperation, prepareFieldDefs, propNameCSSKeyMap, provideAs, provideAsDialogRef, provideAsWidgetRef, refreshDataSource, register$1 as register, registerFormWidget, setFocusTrap, setHeaderConfig, setHeaderConfigForTable, setItemByCompare, styler, toggleAllHeaders, transformData, transformDataWithKeys, transformFormData, unsupportedStatePersistenceTypes, updateDeviceView, widgetIdGenerator };
 //# sourceMappingURL=index.mjs.map