@wavemaker/app-ng-runtime 11.8.0-next.24904 → 11.8.0-next.27301

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

@@ -3,9 +3,10 @@ import { InjectionToken, forwardRef, ElementRef, inject, ViewContainerRef, Injec
 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';
@@ -88,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;
     }
@@ -123,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 }));
 };
@@ -160,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);
@@ -255,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) => {
@@ -293,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(' '));
             }
@@ -314,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] : [];
@@ -331,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;
@@ -342,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;
@@ -354,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 {
@@ -363,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;
@@ -379,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 {
@@ -390,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;
                 });
             });
@@ -789,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') || '';
@@ -834,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;
@@ -863,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);
                     }
                 }
@@ -894,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);
     }
 };
@@ -1020,7 +1021,7 @@ class BaseComponent {
             });
         }
         if (explicitContext) {
-            _.extend(this.context, explicitContext);
+            extend(this.context, explicitContext);
         }
     }
     getNativeElement() {
@@ -1094,8 +1095,8 @@ class BaseComponent {
         }
         if (parentContexts) {
             let parentContextObj = {};
-            if (_.isArray(parentContexts)) {
-                _.forEach(parentContexts, (contextObj) => {
+            if (isArray(parentContexts)) {
+                forEach(parentContexts, (contextObj) => {
                     Object.assign(parentContextObj, contextObj);
                 });
             }
@@ -1253,7 +1254,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
@@ -1335,7 +1336,7 @@ class BaseComponent {
         if (_tNodeAttrs === null) {
             return actualAttrs.sort();
         }
-        _.forEach(_tNodeAttrs, (attr, i) => {
+        forEach(_tNodeAttrs, (attr, i) => {
             if (typeof attr === 'number') {
                 return false;
             }
@@ -1360,7 +1361,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);
@@ -1549,9 +1550,9 @@ class BaseContainerComponent extends StylableComponent {
         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) {
@@ -1892,7 +1893,7 @@ class PartialDirective extends StylableComponent {
         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() {
@@ -1937,7 +1938,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();
@@ -2037,7 +2038,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) {
@@ -2228,8 +2229,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);
                 });
             });
@@ -2258,7 +2259,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);
@@ -2296,7 +2297,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;
@@ -2356,7 +2357,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) {
@@ -2386,7 +2387,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 {
@@ -2401,7 +2402,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
@@ -2486,7 +2487,7 @@ class ToNumberPipe {
         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);
@@ -2512,7 +2513,7 @@ 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('-', '');
         }
@@ -2536,7 +2537,7 @@ class ToCurrencyPipe {
             }] }], 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 }); }
@@ -2549,7 +2550,7 @@ 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 }); }
@@ -2573,7 +2574,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;
         }
@@ -2641,12 +2642,12 @@ 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)(); }; }
@@ -2979,7 +2980,7 @@ class DialogServiceImpl {
      * closes all the opened dialogs
      */
     closeAllDialogs() {
-        _.forEach(openedDialogs.reverse(), (dialog) => {
+        forEach(openedDialogs.reverse(), (dialog) => {
             dialog.close();
         });
     }
@@ -3220,7 +3221,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) {
@@ -3309,7 +3310,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);
@@ -3328,12 +3329,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;
                 }
@@ -3348,8 +3349,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);
@@ -3358,8 +3359,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();
@@ -3387,7 +3388,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);
@@ -3460,14 +3461,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 !== '') {
@@ -3495,7 +3496,7 @@ function setFieldDataSet(formField, data, options) {
  *
  */
 function fetchDistinctValues(dataSource, formFields, options) {
-    if (_.isEmpty(formFields)) {
+    if (isEmpty(formFields)) {
         return;
     }
     formFields.forEach(formField => {
@@ -3607,7 +3608,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
@@ -3622,14 +3623,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;
@@ -3645,13 +3646,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;
@@ -3671,13 +3672,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;
@@ -3703,7 +3704,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
@@ -3738,9 +3739,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;
@@ -3764,9 +3765,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);
@@ -3809,18 +3810,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.
@@ -3829,10 +3830,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,
@@ -3845,21 +3846,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;
 };
@@ -3871,7 +3872,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 });
@@ -3902,10 +3903,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 };
@@ -3913,17 +3914,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);
         });
@@ -3935,7 +3940,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,
@@ -3967,16 +3972,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);
     });
 };
 /**
@@ -3988,7 +3993,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;
@@ -4005,13 +4010,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);
             })
         });
     });
@@ -4031,10 +4036,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 });
         });
     }
@@ -4060,14 +4066,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;
 };
@@ -4133,9 +4139,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.
@@ -4143,7 +4149,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;
@@ -4158,13 +4164,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');
             }
         });
     }
@@ -4229,8 +4235,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;
             }
@@ -4286,8 +4292,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;
@@ -4302,7 +4308,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;
@@ -4372,7 +4378,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;
     }
@@ -4430,10 +4436,10 @@ 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;
@@ -4445,7 +4451,7 @@ let DatasetAwareNavComponent = class DatasetAwareNavComponent extends StylableCo
         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');
@@ -4465,24 +4471,49 @@ let DatasetAwareNavComponent = class DatasetAwareNavComponent extends StylableCo
      */
     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;
@@ -4514,7 +4545,7 @@ let DatasetAwareNavComponent = class DatasetAwareNavComponent extends StylableCo
     prepareNodeDataSet(nv) {
         nv = createArrayFrom(nv);
         return nv.map((val) => {
-            if (!isObject(val)) {
+            if (!isObject$1(val)) {
                 return {
                     label: val,
                     value: val
@@ -4620,7 +4651,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;
@@ -4647,7 +4678,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);
@@ -4669,10 +4700,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);
+                        // @ts-ignore
+                        const keys = keys(err);
                         this.instance.validationmessage = (err[keys[0]]).toString();
                     }
                     return err;
@@ -4705,7 +4737,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
@@ -4721,10 +4753,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)
@@ -4733,17 +4765,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;
             }
@@ -4751,8 +4783,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 = [];
@@ -4783,13 +4815,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() {
@@ -4800,7 +4832,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();
     }
@@ -4810,14 +4842,15 @@ class BaseFieldValidations {
             return;
         }
         if (fieldErrors.hasOwnProperty('errorMessage')) {
-            this.instance.validationmessage = _.get(fieldErrors, 'errorMessage');
+            this.instance.validationmessage = get(fieldErrors, 'errorMessage');
         }
         else {
-            const keys = _.keys(fieldErrors);
+            // @ts-ignore
+            const keys = keys(fieldErrors);
             const key = keys[0];
-            const validationMsgKey = _.get(DEFAULT_VALIDATOR, key) || this.formwidget.validateType;
+            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);