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

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

@@ -23,6 +23,7 @@ import * as i2 from '@wm/core';
 import { isDefined, getClonedObject, closePopover, $unwatch, $watch, $appDigest, triggerFn, DataSource, isDataSourceEqual, isMobile, $invokeWatchers, getValidJSON, extendProto, getDatasourceFromExpr, $parseEvent, extractCurrentItemExpr, isNumberType, DataType, adjustContainerRightEdges, FormWidgetType, isDateTimeType, getDisplayDateTimeFormat } from '@wm/core';
 import { Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
+import { isEmpty, floor, debounce, get, set, some, findIndex, isEqual, pullAllWith, remove, extend, isNaN, isUndefined, forEach, isArray, isObject, indexOf, keys, find, toNumber, includes, split, startsWith, omitBy, values, parseInt as parseInt$1, map, last, toString, isNull, range, filter, endsWith, toLower, head, orderBy, sum, mean, round, min, max, cloneDeep } from 'lodash-es';
 
 const registerProps$5 = () => {
     register('wm-table', new Map([
@@ -228,7 +229,7 @@ class TableComponent extends StylableComponent {
     set gridData(newValue) {
         this.isDataLoading = false;
         // Fix for [WMS-24012]: hide no datafound msg when variableInflight is true and dataset is empty
-        if (this.variableInflight && _.isEmpty(newValue)) {
+        if (this.variableInflight && isEmpty(newValue)) {
             return;
         }
         this.variableInflight = false;
@@ -244,7 +245,7 @@ class TableComponent extends StylableComponent {
             [this._gridData, this.currentPage] = this.paginationService.updateFieldsOnPagination(this, newValue);
             // When edit action is performed on previous page, update the _gridData field with the modified row data
             if (this.gridOptions.lastActionPerformed === this.gridOptions.ACTIONS.EDIT) {
-                const rowIndex = _.floor(this.actionRowIndex % this.pagesize);
+                const rowIndex = floor(this.actionRowIndex % this.pagesize);
                 this._gridData.splice(this.actionRowIndex, 1, newValue[rowIndex]);
             }
             this.setDataGridOption('isLastPage', !!(this.dataNavigator.isDisableNext));
@@ -282,7 +283,7 @@ class TableComponent extends StylableComponent {
                 this.setDataGridOption('colDefs', getClonedObject(this.fieldDefs));
             }
             // If data and colDefs are present, call on before data render event
-            if (!this.isdynamictable && !_.isEmpty(newValue) && gridOptions.colDefs.length) {
+            if (!this.isdynamictable && !isEmpty(newValue) && gridOptions.colDefs.length) {
                 this.invokeEventCallback('beforedatarender', { $data: this._gridData, $columns: this.columns, data: this._gridData, columns: this.columns });
             }
             this.setDataGridOption('data', getClonedObject(this._gridData));
@@ -295,7 +296,7 @@ class TableComponent extends StylableComponent {
         if (this.multiselect) {
             return getClonedObject(this.items);
         }
-        if (_.isEmpty(this.items)) {
+        if (isEmpty(this.items)) {
             return {};
         }
         return getClonedObject(this.items[0]);
@@ -361,8 +362,8 @@ class TableComponent extends StylableComponent {
         this.fullFieldDefs = [];
         this.variableInflight = true;
         this.applyProps = new Map();
-        this.redraw = _.debounce(this._redraw, 150);
-        this.debouncedHandleLoading = _.debounce(this.handleLoading, 350);
+        this.redraw = debounce(this._redraw, 150);
+        this.debouncedHandleLoading = debounce(this.handleLoading, 350);
         // Filter and Sort Methods
         this.rowFilter = {};
         this._searchSortHandler = noop;
@@ -427,11 +428,11 @@ class TableComponent extends StylableComponent {
             isLastPage: false,
             // get the current page number
             getCurrentPage: () => {
-                return _.get(this.dataNavigator, 'dn.currentPage') || 1;
+                return get(this.dataNavigator, 'dn.currentPage') || 1;
             },
             // set the page number
             setCurrentPage: (pageNum) => {
-                _.set(this.dataNavigator, 'dn.currentPage', pageNum || 1);
+                set(this.dataNavigator, 'dn.currentPage', pageNum || 1);
             },
             getDataSource: () => {
                 return this.datasource;
@@ -503,8 +504,8 @@ class TableComponent extends StylableComponent {
                     if (this.selectedItems.length && rowData.$index && this.getConfiguredState() !== 'none' && this.dataNavigator && unsupportedStatePersistenceTypes.indexOf(this.navigation) < 0) {
                         const obj = { page: this.dataNavigator.dn.currentPage, index: rowData.$index - 1 };
                         const widgetState = this.statePersistence.getWidgetState(this);
-                        if (_.get(widgetState, 'selectedItem') && this.multiselect) {
-                            if (!_.some(widgetState.selectedItem, obj)) {
+                        if (get(widgetState, 'selectedItem') && this.multiselect) {
+                            if (!some(widgetState.selectedItem, obj)) {
                                 widgetState.selectedItem.push(obj);
                             }
                             this.statePersistence.setWidgetState(this, { 'selectedItem': widgetState.selectedItem });
@@ -528,7 +529,7 @@ class TableComponent extends StylableComponent {
                      */
                     if (this.multiselect) {
                         //Fix for [WMS-25110]: Add row to items list only if the row is selected
-                        if (_.findIndex(this.items, row) === -1 && (rowInfo?._selected === undefined || rowInfo?._selected == true || (this.gridfirstrowselect && rowInfo?.rowId == 0 && !this.showFirstRow))) {
+                        if (findIndex(this.items, row) === -1 && (rowInfo?._selected === undefined || rowInfo?._selected == true || (this.gridfirstrowselect && rowInfo?.rowId == 0 && !this.showFirstRow))) {
                             this.items.push(row);
                             if (rowInfo?.rowId == 0) {
                                 this.showFirstRow = true;
@@ -548,16 +549,16 @@ class TableComponent extends StylableComponent {
             onRowDeselect: (row, e) => {
                 if (this.multiselect) {
                     this.ngZone.run(() => {
-                        this.items = _.pullAllWith(this.items, [row], _.isEqual);
+                        this.items = pullAllWith(this.items, [row], isEqual);
                         this.selectedItems = this.callDataGridMethod('getSelectedRows');
                         this.invokeEventCallback('rowdeselect', { $data: row, $event: e, row });
                         const rowData = this.addRowIndex(row);
                         if (this.getConfiguredState() !== 'none' && unsupportedStatePersistenceTypes.indexOf(this.navigation) < 0) {
                             const obj = { page: this.dataNavigator.dn.currentPage, index: rowData.$index - 1 };
                             const widgetState = this.statePersistence.getWidgetState(this);
-                            if (_.get(widgetState, 'selectedItem')) {
-                                _.remove(widgetState.selectedItem, function (selectedItem) {
-                                    return _.isEqual(selectedItem, obj);
+                            if (get(widgetState, 'selectedItem')) {
+                                remove(widgetState.selectedItem, function (selectedItem) {
+                                    return isEqual(selectedItem, obj);
                                 });
                                 this.statePersistence.removeWidgetState(this, 'selectedItem');
                                 if (widgetState.selectedItem.length > 0) {
@@ -600,11 +601,16 @@ class TableComponent extends StylableComponent {
             },
             onRowDelete: (row, cancelRowDeleteCallback, e, callBack, options) => {
                 this.ngZone.run(() => {
-                    this.deleteRecord(_.extend({}, options, { row, 'cancelRowDeleteCallback': cancelRowDeleteCallback, 'evt': e, 'callBack': callBack }));
+                    this.deleteRecord(extend({}, options, {
+                        row,
+                        'cancelRowDeleteCallback': cancelRowDeleteCallback,
+                        'evt': e,
+                        'callBack': callBack
+                    }));
                 });
             },
             onRowInsert: (row, e, callBack, options) => {
-                this.insertRecord(_.extend({}, options, { row, event: e, 'callBack': callBack }));
+                this.insertRecord(extend({}, options, { row, event: e, 'callBack': callBack }));
             },
             beforeRowUpdate: (row, eventName) => {
                 if (this._liveTableParent) {
@@ -613,7 +619,7 @@ class TableComponent extends StylableComponent {
                 this.prevData = getClonedObject(row);
             },
             afterRowUpdate: (row, e, callBack, options) => {
-                this.updateRecord(_.extend({}, options, { row, 'prevData': this.prevData, 'event': e, 'callBack': callBack }));
+                this.updateRecord(extend({}, options, { row, 'prevData': this.prevData, 'event': e, 'callBack': callBack }));
             },
             onBeforeRowUpdate: (row, e, options) => {
                 return this.invokeEventCallback('beforerowupdate', { $event: e, $data: row, row, options: options });
@@ -694,7 +700,7 @@ class TableComponent extends StylableComponent {
                     const customExprView = this.customExprViewRef.createEmbeddedView(tmpl, context);
                     const rootNode = customExprView.rootNodes[0];
                     const fieldName = rootNode.getAttribute('data-col-identifier');
-                    _.extend(colDef, this.columns[fieldName]);
+                    extend(colDef, this.columns[fieldName]);
                     if (!summaryRow) {
                         this.customExprCompiledTl[fieldName + index] = rootNode;
                     }
@@ -922,7 +928,7 @@ class TableComponent extends StylableComponent {
                 if (this.gridOptions.isNavTypeScrollOrOndemand()) {
                     this.actionRowIndex = parseInt(val);
                     this.setDataGridOption('actionRowIndex', this.actionRowIndex);
-                    if (!_.isNaN(this.actionRowIndex)) {
+                    if (!isNaN(this.actionRowIndex)) {
                         this.actionRowPage = Math.floor(this.actionRowIndex / this.pagesize) + 1;
                         this.setDataGridOption('actionRowPage', this.actionRowPage || this.gridOptions.actionRowPage);
                     }
@@ -964,7 +970,7 @@ class TableComponent extends StylableComponent {
             clearForm: this.clearForm.bind(this),
             callLoadInlineWidgetData: () => {
                 this.fullFieldDefs.forEach(col => {
-                    if (_.isUndefined(col.isDataSetBound)) {
+                    if (isUndefined(col.isDataSetBound)) {
                         triggerFn(col.loadInlineWidgetData && col.loadInlineWidgetData.bind(col));
                     }
                 });
@@ -1001,12 +1007,12 @@ class TableComponent extends StylableComponent {
         const listenersToRemove = [
             // Updates pagination, filter, sort etc options for service and crud variables
             this.app.subscribe('check-state-persistence-options', options => {
-                let dataSourceName = _.get(this.datasource, 'name');
+                let dataSourceName = get(this.datasource, 'name');
                 // in Prefabs, this.datasource is not resolved at the time of variable invocation, so additional check is required.
                 if (!dataSourceName) {
                     dataSourceName = extractDataSourceName(this.binddatasource);
                 }
-                if (_.get(options, 'variable.name') !== dataSourceName) {
+                if (get(options, 'variable.name') !== dataSourceName) {
                     return;
                 }
                 if (this._pageLoad && this.getConfiguredState() !== 'none') {
@@ -1053,7 +1059,7 @@ class TableComponent extends StylableComponent {
     ngAfterContentInit() {
         super.ngAfterContentInit();
         this.headerConfig = this.headerConfig.filter(this.filterEmptyValues.bind(this));
-        _.remove(this.fieldDefs, f => f === undefined);
+        remove(this.fieldDefs, f => f === undefined);
         const runModeInitialProperties = {
             showrowindex: 'showRowIndex',
             multiselect: 'multiselect',
@@ -1101,7 +1107,7 @@ class TableComponent extends StylableComponent {
         this.gridOptions.loadingdatamsg = this.loadingdatamsg;
         // When loadondemand property is enabled(deferload="true") and show is true, only the column titles of the datatable are rendered, the data(body of the datatable) is not at all rendered.
         // Because the griddata is setting before the datatable dom is rendered but we are sending empty data to the datatable.
-        if (!_.isEmpty(this.gridData)) {
+        if (!isEmpty(this.gridData)) {
             this.gridOptions.data = getClonedObject(this.gridData);
         }
         this.gridOptions.messages = {
@@ -1110,7 +1116,7 @@ class TableComponent extends StylableComponent {
         this.datagridElement = $(this._tableElement.nativeElement);
         this.gridElement = this.$element;
         this.$element.css({ 'position': 'relative' });
-        _.forEach(runModeInitialProperties, (value, key) => {
+        forEach(runModeInitialProperties, (value, key) => {
             if (isDefined(this[key])) {
                 this.gridOptions[value] = (this[key] === 'true' || this[key] === true);
             }
@@ -1138,17 +1144,17 @@ class TableComponent extends StylableComponent {
         return mode && mode.toLowerCase();
     }
     handleStateParams(widgetState, options) {
-        if (_.get(widgetState, 'selectedItem')) {
+        if (get(widgetState, 'selectedItem')) {
             this._selectedItemsExist = true;
         }
         options.options = options.options || {};
-        if (_.get(widgetState, 'pagination')) {
+        if (get(widgetState, 'pagination')) {
             options.options.page = widgetState.pagination;
-            if (_.get(widgetState, 'sort')) {
+            if (get(widgetState, 'sort')) {
                 this.sortStateHandler(widgetState);
-                options.options.orderBy = _.get(widgetState, 'sort.field') + ' ' + _.get(widgetState, 'sort.direction');
+                options.options.orderBy = get(widgetState, 'sort.field') + ' ' + get(widgetState, 'sort.direction');
             }
-            if (_.get(widgetState, 'search')) {
+            if (get(widgetState, 'search')) {
                 setTimeout(() => {
                     this.searchStateHandler(widgetState);
                 }, 500);
@@ -1157,15 +1163,15 @@ class TableComponent extends StylableComponent {
         }
         else {
             options.options.page = 1;
-            if (_.get(widgetState, 'search')) {
+            if (get(widgetState, 'search')) {
                 setTimeout(() => {
                     this.searchStateHandler(widgetState);
                 }, 500);
                 options.options.filterFields = this.getFilterFields(widgetState.search);
             }
-            if (_.get(widgetState, 'sort')) {
+            if (get(widgetState, 'sort')) {
                 this.sortStateHandler(widgetState);
-                options.options.orderBy = _.get(widgetState, 'sort.field') + ' ' + _.get(widgetState, 'sort.direction');
+                options.options.orderBy = get(widgetState, 'sort.field') + ' ' + get(widgetState, 'sort.direction');
             }
         }
         return options;
@@ -1179,17 +1185,17 @@ class TableComponent extends StylableComponent {
     }
     sortStateHandler(widgetState) {
         const $gridElement = this.datagridElement;
-        const $sortIcon = $gridElement.find('th[data-col-field="' + _.get(widgetState, 'sort.field') + '"] .sort-icon');
-        if (_.get(widgetState, 'sort.direction') === 'asc' && $sortIcon.length) {
+        const $sortIcon = $gridElement.find('th[data-col-field="' + get(widgetState, 'sort.field') + '"] .sort-icon');
+        if (get(widgetState, 'sort.direction') === 'asc' && $sortIcon.length) {
             $sortIcon.addClass('asc wi wi-long-arrow-up');
         }
-        else if (_.get(widgetState, 'sort.direction') === 'desc' && $sortIcon.length) {
+        else if (get(widgetState, 'sort.direction') === 'desc' && $sortIcon.length) {
             $sortIcon.addClass('desc wi wi-long-arrow-down');
         }
     }
     searchStateHandler(widgetState) {
-        if (_.isArray(widgetState.search)) {
-            _.forEach(widgetState.search, (filterObj) => {
+        if (isArray(widgetState.search)) {
+            forEach(widgetState.search, (filterObj) => {
                 if (this.rowFilter[filterObj.field]) {
                     this.rowFilter[filterObj.field].value = filterObj.value;
                     this.rowFilter[filterObj.field].matchMode = filterObj.matchMode;
@@ -1216,11 +1222,11 @@ class TableComponent extends StylableComponent {
     }
     // Compares the prevFilterCriteria Rules with the new rules
     compareFilterExpressions(prevFilters, newFilters) {
-        return !!((prevFilters.length === newFilters.length) && (_.isEqual(prevFilters, newFilters)));
+        return !!((prevFilters.length === newFilters.length) && (isEqual(prevFilters, newFilters)));
     }
     // Set the table lastActionPerformed to Filter Criteria and maintain the prevFilterExpression
     setLastActionToFilterCriteria() {
-        this.prevFilterExpression = _.get(this.datasource, 'filterExpressions.rules') ? getClonedObject(this.datasource.filterExpressions.rules) : getClonedObject([].concat(this.datasource.dataBinding));
+        this.prevFilterExpression = get(this.datasource, 'filterExpressions.rules') ? getClonedObject(this.datasource.filterExpressions.rules) : getClonedObject([].concat(this.datasource.dataBinding));
         this.gridOptions.setLastActionPerformed(this.gridOptions.ACTIONS.FILTER_CRITERIA);
         this.gridOptions.setIsSearchTrigerred(true);
     }
@@ -1234,8 +1240,8 @@ class TableComponent extends StylableComponent {
     }
     // Update the lastActionPerformed to Filter_Criteria, when there is change in the Variable filter criteria rules
     checkIfVarFiltersApplied() {
-        if (!_.isEmpty(_.get(this.datasource, 'filterExpressions.rules')) || !_.isEmpty(_.get(this.datasource, 'dataBinding'))) {
-            const currentFilterExpr = _.get(this.datasource, 'filterExpressions.rules') ? this.datasource.filterExpressions.rules : [].concat(this.datasource.dataBinding);
+        if (!isEmpty(get(this.datasource, 'filterExpressions.rules')) || !isEmpty(get(this.datasource, 'dataBinding'))) {
+            const currentFilterExpr = get(this.datasource, 'filterExpressions.rules') ? this.datasource.filterExpressions.rules : [].concat(this.datasource.dataBinding);
             const isEqual = this.compareFilterExpressions(this.prevFilterExpression, currentFilterExpr);
             if (!isEqual) {
                 this.setLastActionToFilterCriteria();
@@ -1249,29 +1255,29 @@ class TableComponent extends StylableComponent {
             this.checkIfVarFiltersApplied();
         }
         // State handling for static variables
-        if (_.get(this.datasource, 'category') === 'wm.Variable' && this._pageLoad && this.getConfiguredState() !== 'none') {
+        if (get(this.datasource, 'category') === 'wm.Variable' && this._pageLoad && this.getConfiguredState() !== 'none') {
             const widgetState = this.statePersistence.getWidgetState(this);
             this._pageLoad = false;
-            if (_.get(widgetState, 'selectedItem')) {
+            if (get(widgetState, 'selectedItem')) {
                 this._selectedItemsExist = true;
             }
             else {
                 this.setDataGridOption('selectFirstRow', this.gridfirstrowselect);
             }
-            if (_.get(widgetState, 'search')) {
+            if (get(widgetState, 'search')) {
                 this.searchStateHandler(widgetState);
                 this.searchSortHandler(widgetState.search, undefined, 'search', true);
             }
-            if (_.get(widgetState, 'sort')) {
+            if (get(widgetState, 'sort')) {
                 this.searchSortHandler(widgetState.sort, undefined, 'sort', true);
                 this.sortStateHandler(widgetState);
             }
-            if (_.get(widgetState, 'pagination')) {
+            if (get(widgetState, 'pagination')) {
                 this.dataNavigator.pageChanged({ page: widgetState.pagination }, true);
             }
         }
         // After the setting the watch on navigator, dataset is triggered with undefined. In this case, return here.
-        if (this.dataNavigatorWatched && _.isUndefined(newVal) && this.__fullData) {
+        if (this.dataNavigatorWatched && isUndefined(newVal) && this.__fullData) {
             return;
         }
         // If variable is in loading state, show loading icon
@@ -1305,7 +1311,7 @@ class TableComponent extends StylableComponent {
         else {
             this.resetPageNavigation();
             // If the dataset is undefined or empty or table is bound to static variable then set variableInflight to false inorder to update the status
-            if (newVal === '' || newVal === undefined || _.get(this.datasource, 'category') === 'wm.Variable') {
+            if (newVal === '' || newVal === undefined || get(this.datasource, 'category') === 'wm.Variable') {
                 this.variableInflight = false;
             }
             /*for run mode, disabling the loader and showing no data found message if dataset is not valid*/
@@ -1317,7 +1323,8 @@ class TableComponent extends StylableComponent {
         if (!this.isNavigationEnabled() && newVal) {
             this.checkFiltersApplied(this.getSortExpr());
         }
-        if (!_.isObject(newVal) || newVal === '' || (newVal && newVal.dataValue === '')) {
+        // @ts-ignore
+        if (!isObject(newVal) || newVal === '' || (newVal && newVal.dataValue === '')) {
             if (!this.variableInflight) {
                 // If variable has finished loading and resultSet is empty, ender empty data
                 this.setGridData([]);
@@ -1340,7 +1347,7 @@ class TableComponent extends StylableComponent {
     }
     addRowIndex(row) {
         const rowData = getClonedObject(row);
-        const rowIndex = _.indexOf(this.gridOptions.data, row);
+        const rowIndex = indexOf(this.gridOptions.data, row);
         if (rowIndex < 0) {
             return row;
         }
@@ -1366,7 +1373,7 @@ class TableComponent extends StylableComponent {
     getClonedRowObject(rowData) {
         const row = getClonedObject(rowData);
         row.getProperty = field => {
-            return _.get(row, field);
+            return get(row, field);
         };
         row.$isFirst = row.$index === 1;
         row.$isLast = this.gridData.length === row.$index;
@@ -1382,7 +1389,7 @@ class TableComponent extends StylableComponent {
         }
         else {
             // If grid is in edit mode or grid has data, dont show the no data message
-            if (!this.isGridEditMode && _.isEmpty(this.dataset)) {
+            if (!this.isGridEditMode && isEmpty(this.dataset)) {
                 this.callDataGridMethod('setStatus', 'nodata', this.nodatamessage);
             }
             else {
@@ -1401,7 +1408,7 @@ class TableComponent extends StylableComponent {
     }
     clearForm(newRow) {
         const ctrls = this.ngform.controls;
-        _.keys(this.ngform.controls).forEach(key => {
+        keys(this.ngform.controls).forEach(key => {
             // If new row, clear the controls in the new row. Else, clear the controls in edit row
             if (!key.endsWith('_filter') && ((key.endsWith('_new') && newRow) || (!key.endsWith('_new') && !newRow))) {
                 ctrls[key].setValue('');
@@ -1453,7 +1460,7 @@ class TableComponent extends StylableComponent {
         const data = this.filternullrecords ? this.removeEmptyRecords(serverData) : serverData;
         // fix for [WMS-24012] set variableinflight flag to false for static variables
         // If the table is bound to some widget and not bound to any variable (ex: Table1.selectedItem) then set variableInflight to false
-        if (_.get(this.datasource, 'category') === 'wm.Variable' || _.get(this.datasource, 'category') === undefined) {
+        if (get(this.datasource, 'category') === 'wm.Variable' || get(this.datasource, 'category') === undefined) {
             this.variableInflight = false;
         }
         if (!this.variableInflight) {
@@ -1471,7 +1478,7 @@ class TableComponent extends StylableComponent {
             return;
         }
         const option = {};
-        if (isDefined && (!_.isEqual(newVal, this.gridOptions[optionName]) || forceSet)) {
+        if (isDefined && (!isEqual(newVal, this.gridOptions[optionName]) || forceSet)) {
             option[optionName] = newVal;
             this.datagridElement.datatable('option', option);
             this.gridOptions[optionName] = newVal;
@@ -1495,13 +1502,13 @@ class TableComponent extends StylableComponent {
         if (!this.fieldDefs.length) {
             return;
         }
-        rowActionCol = _.find(this.fullFieldDefs, { 'field': ROW_OPS_FIELD, type: 'custom' }); // Check if column is fetched from markup
-        _.remove(this.fieldDefs, { type: 'custom', field: ROW_OPS_FIELD }); // Removing operations column
-        _.remove(this.headerConfig, { field: rowOperationsColumn.field });
+        rowActionCol = find(this.fullFieldDefs, { 'field': ROW_OPS_FIELD, type: 'custom' }); // Check if column is fetched from markup
+        remove(this.fieldDefs, { type: 'custom', field: ROW_OPS_FIELD }); // Removing operations column
+        remove(this.headerConfig, { field: rowOperationsColumn.field });
         /*Add the column for row operations only if at-least one operation has been enabled.*/
         if (this.rowActions.length) {
             if (rowActionCol) { // If column is present in markup, push the column or push the default column
-                insertPosition = rowActionCol.rowactionsposition ? _.toNumber(rowActionCol.rowactionsposition) : this.fieldDefs.length;
+                insertPosition = rowActionCol.rowactionsposition ? toNumber(rowActionCol.rowactionsposition) : this.fieldDefs.length;
                 this.fieldDefs.splice(insertPosition, 0, rowActionCol);
                 if (insertPosition === 0) {
                     this.headerConfig.unshift(config);
@@ -1530,15 +1537,15 @@ class TableComponent extends StylableComponent {
                 if (isDefined(newVal)) {
                     // Watch will not be triggered if dataset and new value are equal. So trigger the property change handler manually
                     // This happens in case, if dataset is directly updated.
-                    if (_.isEqual(this.dataset, newVal)) {
+                    if (isEqual(this.dataset, newVal)) {
                         this.watchVariableDataSet(newVal);
                     }
                     else {
-                        if (_.isArray(newVal)) {
+                        if (isArray(newVal)) {
                             this.widget.dataset = [].concat(newVal);
                         }
-                        else if (_.isObject(newVal)) {
-                            this.widget.dataset = _.extend({}, newVal);
+                        else if (isObject(newVal)) {
+                            this.widget.dataset = extend({}, newVal);
                         }
                         else {
                             this.widget.dataset = newVal;
@@ -1618,7 +1625,7 @@ class TableComponent extends StylableComponent {
         if (this.getConfiguredState() !== 'none' && this._selectedItemsExist && serviceData.length) {
             const widgetState = this.statePersistence.getWidgetState(this);
             let currentPageItems;
-            if (_.get(widgetState, 'selectedItem')) {
+            if (get(widgetState, 'selectedItem')) {
                 currentPageItems = widgetState.selectedItem.filter(val => {
                     return val.page === this.dataNavigator.dn.currentPage;
                 });
@@ -1626,7 +1633,7 @@ class TableComponent extends StylableComponent {
                 // if an item is already selected, don't trigger onSelect event for it again
                 if (currentPageItems.length && this.selecteditem.length !== widgetState.selectedItem.length) {
                     // don't reassign this.selecteditem if selected items already exist.
-                    if (_.isArray(this.selecteditem)) {
+                    if (isArray(this.selecteditem)) {
                         currentPageItems.forEach((item) => {
                             this.selectItem(item.index, undefined);
                         });
@@ -1643,15 +1650,15 @@ class TableComponent extends StylableComponent {
         this.fieldDefs = []; // empty the form fields
         // empty the filter field template refs.
         this.filterTmpl._results = [];
-        if (_.isEmpty(columns)) {
+        if (isEmpty(columns)) {
             return;
         }
         let tmpl = '';
         columns.forEach(col => {
             let attrsTmpl = '';
             let customTmpl = '';
-            _.forEach(col, (val, key) => {
-                if (!_.isUndefined(val) && val !== '') {
+            forEach(col, (val, key) => {
+                if (!isUndefined(val) && val !== '') {
                     // If custom expression is present, keep it inside table column. Else, keep as attribute
                     if (key === 'customExpression') {
                         customTmpl = val;
@@ -1690,7 +1697,7 @@ class TableComponent extends StylableComponent {
         /*call utility function to prepare fieldDefs for grid against given data (A MAX OF 10 COLUMNS ONLY)*/
         defaultFieldDefs = prepareFieldDefs(properties);
         /*append additional properties*/
-        _.forEach(defaultFieldDefs, columnDef => {
+        forEach(defaultFieldDefs, columnDef => {
             columnDef.binding = columnDef.field;
             columnDef.caption = columnDef.displayName;
             columnDef.pcDisplay = true;
@@ -1712,7 +1719,7 @@ class TableComponent extends StylableComponent {
         this.invokeEventCallback('beforedatarender', { $data: data, $columns: this.columns, data: data, columns: this.columns });
         defaultFieldDefs = [];
         // Apply the changes made by the user
-        _.forEach(this.columns, val => {
+        forEach(this.columns, val => {
             defaultFieldDefs.push(val);
         });
         this.generateDynamicColumns(defaultFieldDefs);
@@ -1722,11 +1729,11 @@ class TableComponent extends StylableComponent {
         /* check whether data is valid or not */
         const dataValid = data && !data.error;
         /*if the data is type json object, make it an array of the object*/
-        if (dataValid && !_.isArray(data)) {
+        if (dataValid && !isArray(data)) {
             data = [data];
         }
         /* if the data is empty, show nodatamessage */
-        if (_.isEmpty(data)) {
+        if (isEmpty(data)) {
             this.setGridData(data);
             return;
         }
@@ -1743,7 +1750,7 @@ class TableComponent extends StylableComponent {
         let pagingOptions;
         if (this.datasource && this.datasource.execute(DataSource.Operation.IS_PAGEABLE)) {
             pagingOptions = this.datasource.execute(DataSource.Operation.GET_PAGING_OPTIONS);
-            sortExp = _.isEmpty(pagingOptions) ? '' : getOrderByExpr(pagingOptions.sort);
+            sortExp = isEmpty(pagingOptions) ? '' : getOrderByExpr(pagingOptions.sort);
         }
         return sortExp || '';
     }
@@ -1769,7 +1776,7 @@ class TableComponent extends StylableComponent {
                 }
                 // if table is inside list then table dataset will be set as "item.XXX" and there is no datasource.
                 // So extracting datasource from the datset bound expression.
-                if (this.parentList && !this.datasource && _.startsWith(this.binddataset, 'item')) {
+                if (this.parentList && !this.datasource && startsWith(this.binddataset, 'item')) {
                     this.datasource = getDatasourceFromExpr(this.widget.$attrs.get('datasetboundexpr'), this);
                 }
                 if (this.gridOptions.isNavTypeScrollOrOndemand()) {
@@ -1786,7 +1793,7 @@ class TableComponent extends StylableComponent {
                 }
                 // for Static Variables with Retain State enabled, prevent Table from rendering more than once
                 // Fix for [WMS-25284]: Render table that is inside list widget and bound to static Variable
-                if (!(_.get(this.datasource, 'category') === 'wm.Variable' && this._pageLoad && this.getConfiguredState() !== 'none') || (this.parentList && _.startsWith(this.binddataset, 'item'))) {
+                if (!(get(this.datasource, 'category') === 'wm.Variable' && this._pageLoad && this.getConfiguredState() !== 'none') || (this.parentList && startsWith(this.binddataset, 'item'))) {
                     this.watchVariableDataSet(nv);
                 }
                 break;
@@ -1837,7 +1844,7 @@ class TableComponent extends StylableComponent {
                 this.exportOptions = [];
                 if (nv) {
                     // Populate options for export drop down menu
-                    _.forEach(_.split(nv, ','), type => {
+                    forEach(split(nv, ','), type => {
                         this.exportOptions.push({
                             label: type,
                             icon: exportIconMapping[type]
@@ -1847,7 +1854,7 @@ class TableComponent extends StylableComponent {
                 break;
             case 'shownewrow':
                 // Enable new row if shownew is true or addNewRow buton is present
-                enableNewRow = nv || _.some(this.actions, act => _.includes(act.action, 'addNewRow()'));
+                enableNewRow = nv || some(this.actions, act => includes(act.action, 'addNewRow()'));
                 this.callDataGridMethod('option', 'actionsEnabled.new', enableNewRow);
                 break;
             case 'pagesize':
@@ -1902,11 +1909,11 @@ class TableComponent extends StylableComponent {
     populateActions() {
         this._actions.header = [];
         this._actions.footer = [];
-        _.forEach(this.actions, (action) => {
-            if (_.includes(action.position, 'header')) {
+        forEach(this.actions, (action) => {
+            if (includes(action.position, 'header')) {
                 this._actions.header.push(action);
             }
-            if (_.includes(action.position, 'footer')) {
+            if (includes(action.position, 'footer')) {
                 this._actions.footer.push(action);
             }
         });
@@ -1975,9 +1982,9 @@ class TableComponent extends StylableComponent {
         if (data) {
             this.serverData = data;
         }
-        if (_.isObject(item)) {
-            item = _.omitBy(item, (value) => {
-                return _.isArray(value) && _.isEmpty(value);
+        if (isObject(item)) {
+            item = omitBy(item, (value) => {
+                return isArray(value) && isEmpty(value);
             });
         }
         this.callDataGridMethod('selectRow', item, true);
@@ -1992,7 +1999,7 @@ class TableComponent extends StylableComponent {
         this.checkFiltersApplied(this.getSortExpr());
         if (this._isClientSearch) {
             data = getClonedObject(this.__fullData);
-            if (_.isObject(data) && !_.isArray(data)) {
+            if (isObject(data) && !isArray(data)) {
                 data = [data];
             }
             data = this.getSearchResult(data, this.filterInfo);
@@ -2008,7 +2015,7 @@ class TableComponent extends StylableComponent {
     }
     export($item) {
         let filterFields;
-        const sortOptions = _.isEmpty(this.sortInfo) ? '' : this.sortInfo.field + ' ' + this.sortInfo.direction;
+        const sortOptions = isEmpty(this.sortInfo) ? '' : this.sortInfo.field + ' ' + this.sortInfo.direction;
         const columns = {};
         let isValid;
         let requestData;
@@ -2044,7 +2051,7 @@ class TableComponent extends StylableComponent {
         if (isValid === false) {
             return;
         }
-        requestData.fields = _.values(requestData.columns);
+        requestData.fields = values(requestData.columns);
         this.datasource.execute(DataSource.Operation.DOWNLOAD, { data: requestData });
     }
     expandRow(rowId) {
@@ -2105,7 +2112,7 @@ class TableComponent extends StylableComponent {
     }
     ngOnDetach() {
         super.ngOnDetach();
-        if (_.get(this.datasource, 'category') === 'wm.Variable' && this.getConfiguredState() !== 'none') {
+        if (get(this.datasource, 'category') === 'wm.Variable' && this.getConfiguredState() !== 'none') {
             this._pageLoad = false;
         }
         else {
@@ -2258,7 +2265,7 @@ class TableComponent extends StylableComponent {
             type: HostListener,
             args: ['keypress', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TableComponent, { className: "TableComponent", filePath: "table.component.ts", lineNumber: 109 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TableComponent, { className: "TableComponent", filePath: "table.component.ts", lineNumber: 122 }); })();
 
 const OPERATION = {
     'NEW': 'new',
@@ -2380,23 +2387,23 @@ class TableCUDDirective {
     generatePath(binddataset) {
         let path, index;
         let dataBoundExpr = this.table.widget.$attrs.get('datasetboundexpr');
-        if (_.startsWith(binddataset, 'item') && dataBoundExpr) {
-            if (_.startsWith(dataBoundExpr, 'Widgets.')) {
+        if (startsWith(binddataset, 'item') && dataBoundExpr) {
+            if (startsWith(dataBoundExpr, 'Widgets.')) {
                 dataBoundExpr = extractCurrentItemExpr(dataBoundExpr, this.table);
             }
             const parentListItems = this.table.$element.parents('.app-list-item');
-            const indexArr = _.map(parentListItems, (item) => _.parseInt($(item).attr('listitemindex')));
+            const indexArr = map(parentListItems, (item) => parseInt$1($(item).attr('listitemindex')));
             for (let i = indexArr.length - 1; i >= 0; i--) {
                 dataBoundExpr = dataBoundExpr.replace('$i', indexArr[i]);
             }
-            index = _.last(indexArr);
+            index = last(indexArr);
             path = dataBoundExpr.replace(/^Variables\..*\.dataSet([^.])*(\.|$)/g, '');
         }
         else {
             // if we have dataset as "Variables.staticVar1.dataSet[1].details" then pass index as 1.
             const regEx = /^Variables\..*\.dataSet([\[][0-9]])/g;
             if (regEx.test(binddataset)) {
-                index = _.parseInt(binddataset.replace(/^Variables\..*\.dataSet([\[])/g, ''));
+                index = parseInt$1(binddataset.replace(/^Variables\..*\.dataSet([\[])/g, ''));
             }
             path = binddataset.replace(/^Variables\..*\.dataSet([^.])*(\.|$)/g, '');
         }
@@ -2737,12 +2744,12 @@ const getSearchValue = (value, type) => {
         return undefined;
     }
     if (isNumberType(type)) {
-        return _.toNumber(value);
+        return toNumber(value);
     }
     if (type === DataType.DATETIME) {
         return moment(value).valueOf();
     }
-    return _.toString(value).toLowerCase();
+    return toString(value).toLowerCase();
 };
 // Filter the data based on the search value and conditions
 const getFilteredData = (data, searchObj, visibleCols = []) => {
@@ -2751,26 +2758,27 @@ const getFilteredData = (data, searchObj, visibleCols = []) => {
     // Return whole data if
     // - search value is undefined and matchmode is not an empty matchmode type
     // - search value is null and datatype is number. Null can not be compared with numeric values[WMS-19275].
-    if ((!isDefined(searchVal) && !_.includes(emptyMatchModes, searchObj.matchMode)) || (isNumberType(searchObj.type) && _.isNull(searchObj.value))) {
+    if ((!isDefined(searchVal) && !includes(emptyMatchModes, searchObj.matchMode)) || (isNumberType(searchObj.type) && isNull(searchObj.value))) {
         return data;
     }
     data = data.filter((obj) => {
         let isExists;
         if (searchObj.field) {
-            currentVal = getSearchValue(_.get(obj, searchObj.field), searchObj.type);
+            currentVal = getSearchValue(get(obj, searchObj.field), searchObj.type);
         }
         else {
             currentVal = [];
-            _.forEach(obj, (val, key) => {
-                if ((_.includes(visibleCols, key))) {
+            forEach(obj, (val, key) => {
+                if ((includes(visibleCols, key))) {
                     currentVal.push(val);
                 }
                 else {
                     // WMS-22271 If the key is in nested key format (dot format)
                     // Find all the indexes of the key in visiblecols and extract their values from obj
-                    const colIndex = _.filter(_.range(visibleCols.length), (i) => visibleCols[i].includes(key));
-                    _.forEach(colIndex, (index) => {
-                        const value = _.get(obj, visibleCols[index]);
+                    const colIndex = filter(range(visibleCols.length), (i) => visibleCols[i].includes(key));
+                    forEach(colIndex, (index) => {
+                        // @ts-ignore
+                        const value = get(obj, visibleCols[index]);
                         if (currentVal.indexOf(value) < 0) {
                             currentVal.push(value);
                         }
@@ -2781,31 +2789,31 @@ const getFilteredData = (data, searchObj, visibleCols = []) => {
         }
         switch (searchObj.matchMode) {
             case 'start':
-                isExists = _.startsWith(currentVal, searchVal);
+                isExists = startsWith(currentVal, searchVal);
                 break;
             case 'end':
-                isExists = _.endsWith(currentVal, searchVal);
+                isExists = endsWith(currentVal, searchVal);
                 break;
             case 'exact':
-                isExists = _.isEqual(currentVal, searchVal);
+                isExists = isEqual(currentVal, searchVal);
                 break;
             case 'notequals':
-                isExists = !_.isEqual(currentVal, searchVal);
+                isExists = !isEqual(currentVal, searchVal);
                 break;
             case 'null':
-                isExists = _.isNull(currentVal);
+                isExists = isNull(currentVal);
                 break;
             case 'isnotnull':
-                isExists = !_.isNull(currentVal);
+                isExists = !isNull(currentVal);
                 break;
             case 'empty':
-                isExists = _.isEmpty(currentVal);
+                isExists = isEmpty(currentVal);
                 break;
             case 'isnotempty':
-                isExists = !_.isEmpty(currentVal);
+                isExists = !isEmpty(currentVal);
                 break;
             case 'nullorempty':
-                isExists = _.isNull(currentVal) || _.isEmpty(currentVal);
+                isExists = isNull(currentVal) || isEmpty(currentVal);
                 break;
             case 'lessthan':
                 isExists = currentVal < searchVal;
@@ -2820,7 +2828,7 @@ const getFilteredData = (data, searchObj, visibleCols = []) => {
                 isExists = currentVal >= searchVal;
                 break;
             default:
-                isExists = isNumberType(searchObj.type) ? _.isEqual(currentVal, searchVal) : _.includes(currentVal, searchVal);
+                isExists = isNumberType(searchObj.type) ? isEqual(currentVal, searchVal) : includes(currentVal, searchVal);
                 break;
         }
         return isExists;
@@ -2905,13 +2913,13 @@ class TableFilterSortDirective {
     // Get first or last page based on sort info of primary key
     getNavigationTargetBySortInfo() {
         return this.table.sortInfo && this.table.sortInfo.direction === 'desc' &&
-            _.includes(this.table.primaryKey, this.table.sortInfo.field) ? 'first' : 'last';
+            includes(this.table.primaryKey, this.table.sortInfo.field) ? 'first' : 'last';
     }
     // Returns all the columns of the table wherein, showinfilter is set to true
     getTableVisibleCols() {
         const visibleCols = [];
-        _.forEach(this.table.columns, (val, col) => {
-            if (_.toLower(_.toString(val.showinfilter)) === 'true' && col !== 'rowOperations' && val.searchable) {
+        forEach(this.table.columns, (val, col) => {
+            if (toLower(toString(val.showinfilter)) === 'true' && col !== 'rowOperations' && val.searchable) {
                 visibleCols.push(col);
             }
         });
@@ -2922,7 +2930,7 @@ class TableFilterSortDirective {
         if (searchObj.field) {
             setFilterFields(filterFields, searchObj);
         }
-        else if (!_.isEmpty(searchObj)) {
+        else if (!isEmpty(searchObj)) {
             const visibleCols = this.getTableVisibleCols();
             setFilterFields(filterFields, searchObj, visibleCols);
         }
@@ -2931,8 +2939,8 @@ class TableFilterSortDirective {
     getFilterFields(searchObj) {
         searchObj = searchObj || {};
         const filterFields = {};
-        if (_.isArray(searchObj)) {
-            _.forEach(searchObj, obj => {
+        if (isArray(searchObj)) {
+            forEach(searchObj, obj => {
                 this.invokeSetFilterfieldBasedOnFieldval(obj, filterFields);
             });
         }
@@ -2953,11 +2961,11 @@ class TableFilterSortDirective {
     // Reset the sort based on sort returned by the call
     resetSortStatus(variableSort) {
         let gridSortString;
-        if (!_.isEmpty(this.table.sortInfo) && this.table.datasource) {
+        if (!isEmpty(this.table.sortInfo) && this.table.datasource) {
             gridSortString = this.table.sortInfo.field + ' ' + this.table.sortInfo.direction;
             variableSort = this.table.datasource.execute(DataSource.Operation.GET_OPTIONS).orderBy || variableSort;
             if (variableSort) { // If multiple order by fields are present, compare with the first one
-                variableSort = _.head(_.split(variableSort, ','));
+                variableSort = head(split(variableSort, ','));
             }
             if (gridSortString !== variableSort) {
                 this.table.callDataGridMethod('resetSortIcons');
@@ -2995,7 +3003,7 @@ class TableFilterSortDirective {
             return;
         }
         if (this.table.datasource.execute(DataSource.Operation.SUPPORTS_SERVER_FILTER)) {
-            if (_.isEmpty(this.table.datasource.execute(DataSource.Operation.GET_OPTIONS).filterFields)) {
+            if (isEmpty(this.table.datasource.execute(DataSource.Operation.GET_OPTIONS).filterFields)) {
                 this.clearFilter(true);
             }
             this.resetSortStatus(variableSort);
@@ -3011,7 +3019,7 @@ class TableFilterSortDirective {
         if (!searchObj) {
             return data;
         }
-        if (_.isArray(searchObj)) {
+        if (isArray(searchObj)) {
             searchObj.forEach((obj) => {
                 data = getFilteredData(data, obj, visibleCols);
             });
@@ -3024,7 +3032,7 @@ class TableFilterSortDirective {
     // Returns data sorted using sortObj
     getSortResult(data, sortObj) {
         if (sortObj && sortObj.direction) {
-            data = _.orderBy(data, sortObj.field, sortObj.direction);
+            data = orderBy(data, sortObj.field, sortObj.direction);
         }
         return data;
     }
@@ -3039,7 +3047,7 @@ class TableFilterSortDirective {
         else {
             this.table.sortInfo = searchSortObj;
         }
-        if (_.isObject(data) && !_.isArray(data)) {
+        if (isObject(data) && !isArray(data)) {
             data = [data];
         }
         /*Both the functions return same 'data' if arguments are undefined*/
@@ -3071,9 +3079,9 @@ class TableFilterSortDirective {
         this.table.filterInfo = searchObj;
         data = this.getSearchResult(data, searchObj);
         // Compared the filtered data and original data, to show or hide the rows
-        _.forEach(this.table.gridData, (value, index) => {
+        forEach(this.table.gridData, (value, index) => {
             const $row = $($rows[index]);
-            if (_.find(data, obj => _.isEqual(obj, value))) {
+            if (find(data, obj => isEqual(obj, value))) {
                 $row.show();
             }
             else {
@@ -3144,7 +3152,7 @@ class TableFilterSortDirective {
     }
     searchHandler(searchSortObj, e, type, statePersistenceTriggered) {
         let obj;
-        if (_.isArray(searchSortObj)) {
+        if (isArray(searchSortObj)) {
             obj = searchSortObj.filter(function (searchObject) {
                 return (searchObject.matchMode !== undefined && searchObject.value !== undefined) || (searchObject.value !== undefined && searchObject.field === '');
             });
@@ -3153,7 +3161,7 @@ class TableFilterSortDirective {
             obj = { field: searchSortObj.field, value: searchSortObj.value, type: searchSortObj.type };
         }
         if (this.table.getConfiguredState() !== 'none' && unsupportedStatePersistenceTypes.indexOf(this.table.navigation) < 0) {
-            if ((_.isArray(searchSortObj) && obj.length) || (searchSortObj.value)) {
+            if ((isArray(searchSortObj) && obj.length) || (searchSortObj.value)) {
                 this.table.statePersistence.removeWidgetState(this.table, 'search');
                 this.table.statePersistence.setWidgetState(this.table, { search: obj });
             }
@@ -3176,7 +3184,7 @@ class TableFilterSortDirective {
         let output;
         const userFilters = {};
         // Transform filter fields from array to object having field names as keys
-        if (_.isArray(filterFields)) {
+        if (isArray(filterFields)) {
             filterFields.forEach(filterField => {
                 transformFilterField(userFilters, filterField);
             });
@@ -3191,9 +3199,9 @@ class TableFilterSortDirective {
         }
         filterFields = [];
         // if the field is not selected in search filter dropdown, building the filter fields object
-        if (_.isEmpty(userFilters) && !_.isEmpty(obj)) {
-            if (_.isArray(obj)) {
-                _.forEach(obj, searchObj => {
+        if (isEmpty(userFilters) && !isEmpty(obj)) {
+            if (isArray(obj)) {
+                forEach(obj, searchObj => {
                     addToFilterFields(filterFields, searchObj);
                 });
             }
@@ -3203,13 +3211,9 @@ class TableFilterSortDirective {
         }
         else {
             // Transform back the filter fields from object to array
-            _.forEach(userFilters, (val, key) => {
-                filterFields.push({
-                    field: key,
-                    matchMode: val.matchMode,
-                    type: val.type,
-                    value: val.value
-                });
+            forEach(userFilters, (val, key) => {
+                // @ts-ignore
+                filterFields.push({ field: key, matchMode: val.matchMode, type: val.type, value: val.value });
             });
         }
         if (dataSource && dataSource.execute(DataSource.Operation.SUPPORTS_SERVER_FILTER)) {
@@ -3287,7 +3291,7 @@ class TableFilterSortDirective {
         this.table.rowFilter[fieldName] = this.table.rowFilter[fieldName] || {};
         this.table.rowFilter[fieldName].matchMode = condition;
         // For empty match modes, clear off the value and call filter
-        if (_.includes(this.table.emptyMatchModes, condition)) {
+        if (includes(this.table.emptyMatchModes, condition)) {
             this.table.columns[fieldName].resetFilter();
             this.table.onRowFilterChange();
         }
@@ -3310,10 +3314,10 @@ class TableFilterSortDirective {
         }
         const fieldName = filterDef.field;
         const formFields = this.table.fullFieldDefs;
-        const filterOnFields = _.filter(formFields, { 'filteronfilter': fieldName });
-        const newVal = _.get(this.table.rowFilter, [fieldName, 'value']);
+        const filterOnFields = filter(formFields, { 'filteronfilter': fieldName });
+        const newVal = get(this.table.rowFilter, [fieldName, 'value']);
         // Loop over the fields for which the current field is filter on field
-        _.forEach(filterOnFields, filterField => {
+        forEach(filterOnFields, filterField => {
             const filterOn = filterField.filteronfilter;
             const filterKey = filterField.field;
             const filterFields = {};
@@ -3338,13 +3342,13 @@ class TableFilterSortDirective {
     // This method is triggered on value change in multi column filter
     onRowFilterChange(fieldName) {
         const searchObj = [];
-        const field = _.find(this.table.fullFieldDefs, { 'field': fieldName });
+        const field = find(this.table.fullFieldDefs, { 'field': fieldName });
         // Convert row filters to a search object and call search handler
-        _.forEach(this.table.rowFilter, (value, key) => {
-            if ((isDefined(value.value) && value.value !== '') || _.includes(this.table.emptyMatchModes, value.matchMode)) {
+        forEach(this.table.rowFilter, (value, key) => {
+            if ((isDefined(value.value) && value.value !== '') || includes(this.table.emptyMatchModes, value.matchMode)) {
                 if (field && key === field.field) {
                     value.type = value.type || field.type;
-                    value.matchMode = value.matchMode || _.get(this.table.matchModeTypesMap[value.type], 0);
+                    value.matchMode = value.matchMode || get(this.table.matchModeTypesMap[value.type], 0);
                 }
                 searchObj.push({
                     field: key,
@@ -3429,7 +3433,7 @@ class TableActionDirective extends BaseComponent {
             show: this.show,
             class: this.class || '',
             iconclass: this.iconclass || '',
-            title: _.isUndefined(this.title) ? (this['display-name'] || '') : this.title,
+            title: isUndefined(this.title) ? (this['display-name'] || '') : this.title,
             action: this.action,
             accessroles: this.accessroles,
             shortcutkey: this.shortcutkey,
@@ -3691,22 +3695,22 @@ class TableColumnDirective extends BaseComponent {
         this.observeOnFields = [];
         this.aggregate = {
             sum: () => {
-                return _.sum(this._getColumnData());
+                return sum(this._getColumnData());
             },
             average: (precision = 2) => {
-                return _.round(_.mean(this._getColumnData()), precision);
+                return round(mean(this._getColumnData()), precision);
             },
             count: () => {
                 return this._getColumnData().length;
             },
             minimum: () => {
-                return _.min(this._getColumnData());
+                return min(this._getColumnData());
             },
             maximum: () => {
-                return _.max(this._getColumnData());
+                return max(this._getColumnData());
             },
             percent: (value, precision = 2) => {
-                return _.round((_.sum(this._getColumnData()) / value) * 100, precision);
+                return round((sum(this._getColumnData()) / value) * 100, precision);
             }
         };
         this.notifyForFields = [];
@@ -3963,7 +3967,7 @@ class TableColumnDirective extends BaseComponent {
                 if (this.relatedEntityName) {
                     this.widget['is-related'] = true;
                     this.widget['lookup-type'] = this.relatedEntityName;
-                    this.widget['lookup-field'] = _.last(_.split(this.field, '.'));
+                    this.widget['lookup-field'] = last(split(this.field, '.'));
                 }
                 if (this.filterwidget === FormWidgetType.AUTOCOMPLETE) {
                     this.filterInstance.dataoptions = getDistinctFieldProperties(this.table.datasource, this);
@@ -3990,11 +3994,11 @@ class TableColumnDirective extends BaseComponent {
             if (this['related-entity-name'] && this['primary-key']) {
                 // Fetch the data for the related fields
                 this.isDataSetBound = true;
-                const bindings = _.split(this.binding, '.');
+                const bindings = split(this.binding, '.');
                 this.showPendingSpinner = true;
                 fetchRelatedFieldData(dataSource, this.widget, {
-                    relatedField: _.head(bindings),
-                    datafield: _.last(bindings),
+                    relatedField: head(bindings),
+                    datafield: last(bindings),
                     widget: 'edit-widget-type'
                 });
             }
@@ -4023,7 +4027,7 @@ class TableColumnDirective extends BaseComponent {
         this.filterInstance.registerReadyStateListener(() => {
             if (isDataSetWidget(this.filterwidget)) {
                 // if binding is department.deptId then field will be deptId
-                const field = _.last(this.binding.split('.'));
+                const field = last(this.binding.split('.'));
                 this.filterInstance.dataset = this._filterDataSet;
                 this.filterInstance.datafield = this.filterdatafield || field;
                 this.filterInstance.displayfield = this.filterdisplayfield || field;
@@ -4040,7 +4044,7 @@ class TableColumnDirective extends BaseComponent {
     }
     // Notifies all the dependent validation controls incase of any changes
     notifyChanges(quickEdit) {
-        _.forEach(this.notifyForFields, field => {
+        forEach(this.notifyForFields, field => {
             if (quickEdit && this._isNewEditableRow) {
                 field.fieldValidations_new.validate();
             }
@@ -4051,7 +4055,7 @@ class TableColumnDirective extends BaseComponent {
     }
     // Watches control for dependent validation changes
     observeOn(fields) {
-        this.observeOnFields = _.cloneDeep(fields);
+        this.observeOnFields = cloneDeep(fields);
     }
     // Sets the default validators inline and quickedit new row using props
     setUpValidators() {
@@ -4062,11 +4066,11 @@ class TableColumnDirective extends BaseComponent {
     }
     // Sets the Async validators on the inline and quickedit new row form control
     setAsyncValidators(validators) {
-        this.asyncValidators = _.cloneDeep(validators);
+        this.asyncValidators = cloneDeep(validators);
     }
     // Sets the default/custom validators on the inline and quickedit new row form control
     setValidators(validators) {
-        this.syncValidators = _.cloneDeep(validators);
+        this.syncValidators = cloneDeep(validators);
     }
     boundFn(fn) {
         return fn();
@@ -4081,7 +4085,7 @@ class TableColumnDirective extends BaseComponent {
         this._invokeSummaryRowData(newData);
     }
     _invokeSummaryRowData(data) {
-        _.forEach(data, (item, index) => {
+        forEach(data, (item, index) => {
             const content = item;
             if (content instanceof Promise) {
                 content.then(res => {
@@ -4099,7 +4103,7 @@ class TableColumnDirective extends BaseComponent {
         });
     }
     _getColumnData() {
-        return _.map(this.table.dataset, this.binding);
+        return map(this.table.dataset, this.binding);
     }
     /* Summary Row Logic end */
     // Set the props on the inline edit widget
@@ -4149,7 +4153,7 @@ class TableColumnDirective extends BaseComponent {
         this.limit = this.limit ? +this.limit : undefined;
         this.editWidgetType = this['edit-widget-type'] = this['edit-widget-type'] || getEditModeWidget(this);
         this.filterOn = this['filter-on'];
-        this.readonly = isDefined(this.getAttr('readonly')) ? this.getAttr('readonly') === 'true' : (this['related-entity-name'] ? !this['primary-key'] : _.includes(['identity', 'uniqueid', 'sequence'], this.generator));
+        this.readonly = isDefined(this.getAttr('readonly')) ? this.getAttr('readonly') === 'true' : (this['related-entity-name'] ? !this['primary-key'] : includes(['identity', 'uniqueid', 'sequence'], this.generator));
         this.filterwidget = this.filterwidget || getDataTableFilterWidget(this.type || 'string');
         this.isFilterDataSetBound = !!this.bindfilterdataset;
         this.defaultvalue = getDefaultValue(this.defaultvalue, this.type, this.editWidgetType);
@@ -4380,7 +4384,7 @@ class TableRowActionDirective extends BaseComponent {
         contexts[0].addNewRow = (evt) => this.table.addNewRow(evt);
     }
     getTitle() {
-        return _.isUndefined(this.title) ? (this['display-name'] || '') : this.title;
+        return isUndefined(this.title) ? (this['display-name'] || '') : this.title;
     }
     populateAction() {
         this.buttonDef = {