@wavemaker/app-ng-runtime 11.8.0-next.141670 → 11.8.0-next.141673

package/components/data/table/bundles/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('ngx-bootstrap/tooltip'), require('ngx-bootstrap/dropdown'), require('@wm/components/base'), require('@wm/components/basic'), require('@wm/components/input'), require('@wm/components/navigation/menu'), require('@wm/components/data/list'), require('@wm/components/data/pagination'), require('@wm/core'), require('rxjs'), require('rxjs/operators')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/forms', 'ngx-bootstrap/tooltip', 'ngx-bootstrap/dropdown', '@wm/components/base', '@wm/components/basic', '@wm/components/input', '@wm/components/navigation/menu', '@wm/components/data/list', '@wm/components/data/pagination', '@wm/core', 'rxjs', 'rxjs/operators'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.data = global.wm.components.data || {}, global.wm.components.data.table = {}), global.ng.core, global.ng.common, global.ng.forms, global.tooltip, global.dropdown, global.wm.components.base, global.wm.components.basic, global.wm.components.input, global.wm.components.navigation.menu, global.wm.components.data.list, global.wm.components.data.pagination, global.wm.core, global.rxjs, global.rxjs.operators));
-})(this, (function (exports, i0, i7, i1, tooltip, i6, i4, i5, i8, i9, i3, i10, i2, rxjs, operators) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('ngx-bootstrap/tooltip'), require('ngx-bootstrap/dropdown'), require('@wm/components/base'), require('@wm/components/basic'), require('@wm/components/input'), require('@wm/components/navigation/menu'), require('@wm/components/data/list'), require('@wm/components/data/pagination'), require('@wm/core'), require('rxjs'), require('rxjs/operators'), require('lodash-es')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/forms', 'ngx-bootstrap/tooltip', 'ngx-bootstrap/dropdown', '@wm/components/base', '@wm/components/basic', '@wm/components/input', '@wm/components/navigation/menu', '@wm/components/data/list', '@wm/components/data/pagination', '@wm/core', 'rxjs', 'rxjs/operators', 'lodash-es'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.data = global.wm.components.data || {}, global.wm.components.data.table = {}), global.ng.core, global.ng.common, global.ng.forms, global.tooltip, global.dropdown, global.wm.components.base, global.wm.components.basic, global.wm.components.input, global.wm.components.navigation.menu, global.wm.components.data.list, global.wm.components.data.pagination, global.wm.core, global.rxjs, global.rxjs.operators, global._));
+})(this, (function (exports, i0, i7, i1, tooltip, i6, i4, i5, i8, i9, i3, i10, i2, rxjs, operators, lodashEs) { 'use strict';
 
     function _interopNamespaceDefault(e) {
         var n = Object.create(null);
@@ -60,7 +60,7 @@
             ['gridfirstrowselect', i4.PROP_BOOLEAN],
             ['iconclass', i4.PROP_STRING],
             ['insertmessage', { value: 'Record added successfully', ...i4.PROP_STRING }],
-            ['isdynamictable', i4.PROP_BOOLEAN],
+            ['isdynamictable', i4.PROP_BOOLEAN], // internal property to determine dynamic table
             ['isrowexpansionenabled', i4.PROP_BOOLEAN],
             ['loadingdatamsg', { value: 'Loading...', ...i4.PROP_STRING }],
             ['loadingicon', { value: 'fa fa-circle-o-notch fa-spin', ...i4.PROP_STRING }],
@@ -109,39 +109,40 @@
     const _c14 = ["rowExpansionActionView"];
     const _c15 = ["dynamicTable"];
     const _c16 = ["wmTable", ""];
+    const _c17 = a0 => ({ btn: a0 });
+    const _c18 = (a0, a1) => ({ "btn-sm": a0, "disabled-new": a1 });
     function TableComponent_div_0_i_3_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "i");
     } if (rf & 2) {
-        const ctx_r15 = i0__namespace.ɵɵnextContext(2);
-        i0__namespace.ɵɵclassMapInterpolate1("app-icon panel-icon ", ctx_r15.iconclass, "");
+        const ctx_r0 = i0__namespace.ɵɵnextContext(2);
+        i0__namespace.ɵɵclassMapInterpolate1("app-icon panel-icon ", ctx_r0.iconclass, "");
     } }
-    const _c17 = function (a0) { return { btn: a0 }; };
     function TableComponent_div_0_div_7_ng_container_1_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelementContainer(0, 29);
     } if (rf & 2) {
-        const btn_r19 = ctx.$implicit;
-        i0__namespace.ɵɵnextContext(3);
-        const _r3 = i0__namespace.ɵɵreference(8);
-        const _r5 = i0__namespace.ɵɵreference(10);
-        i0__namespace.ɵɵproperty("ngTemplateOutlet", btn_r19.widgetType === "button" ? _r3 : _r5)("ngTemplateOutletContext", i0__namespace.ɵɵpureFunction1(2, _c17, btn_r19));
+        const btn_r2 = ctx.$implicit;
+        const index_r3 = ctx.index;
+        const ctx_r0 = i0__namespace.ɵɵnextContext(3);
+        const buttonRef_r4 = i0__namespace.ɵɵreference(8);
+        const anchorRef_r5 = i0__namespace.ɵɵreference(10);
+        i0__namespace.ɵɵproperty("ngTemplateOutlet", btn_r2.widgetType === "button" ? buttonRef_r4 : anchorRef_r5)("ngTemplateOutletContext", i0__namespace.ɵɵpureFunction1(3, _c17, btn_r2))("ngTemplateOutletInjector", ctx_r0.createCustomInjector("actions_header_" + index_r3, i0__namespace.ɵɵpureFunction1(5, _c17, btn_r2)));
     } }
     function TableComponent_div_0_div_7_div_2_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "div", 30);
     } if (rf & 2) {
-        const ctx_r18 = i0__namespace.ɵɵnextContext(3);
-        i0__namespace.ɵɵattributeInterpolate1("name", "", ctx_r18.name, "-export");
+        const ctx_r0 = i0__namespace.ɵɵnextContext(3);
+        i0__namespace.ɵɵattributeInterpolate1("name", "", ctx_r0.name, "-export");
     } }
     function TableComponent_div_0_div_7_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelementStart(0, "div", 26);
-        i0__namespace.ɵɵtemplate(1, TableComponent_div_0_div_7_ng_container_1_Template, 1, 4, "ng-container", 27);
-        i0__namespace.ɵɵtemplate(2, TableComponent_div_0_div_7_div_2_Template, 1, 1, "div", 28);
+        i0__namespace.ɵɵtemplate(1, TableComponent_div_0_div_7_ng_container_1_Template, 1, 7, "ng-container", 27)(2, TableComponent_div_0_div_7_div_2_Template, 1, 2, "div", 28);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const ctx_r16 = i0__namespace.ɵɵnextContext(2);
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵproperty("ngForOf", ctx_r16._actions.header);
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵproperty("ngIf", ctx_r16.exportOptions.length);
+        const ctx_r0 = i0__namespace.ɵɵnextContext(2);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("ngForOf", ctx_r0._actions.header);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("ngIf", ctx_r0.exportOptions.length);
     } }
     function TableComponent_div_0_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelementStart(0, "div", 19)(1, "h3", 20)(2, "div", 21);
@@ -158,50 +159,50 @@
         i0__namespace.ɵɵproperty("ngIf", ctx_r0.iconclass);
         i0__namespace.ɵɵadvance(2);
         i0__namespace.ɵɵproperty("innerHTML", ctx_r0.title, i0__namespace.ɵɵsanitizeHtml);
-        i0__namespace.ɵɵadvance(1);
+        i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵproperty("innerHTML", ctx_r0.subheading, i0__namespace.ɵɵsanitizeHtml);
-        i0__namespace.ɵɵadvance(1);
+        i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵproperty("ngIf", ctx_r0.exportOptions.length || ctx_r0._actions.header.length);
     } }
     function TableComponent_div_6_ng_container_1_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelementContainer(0, 29);
     } if (rf & 2) {
-        const btn_r21 = ctx.$implicit;
-        i0__namespace.ɵɵnextContext(2);
-        const _r3 = i0__namespace.ɵɵreference(8);
-        const _r5 = i0__namespace.ɵɵreference(10);
-        i0__namespace.ɵɵproperty("ngTemplateOutlet", btn_r21.widgetType === "button" ? _r3 : _r5)("ngTemplateOutletContext", i0__namespace.ɵɵpureFunction1(2, _c17, btn_r21));
+        const btn_r6 = ctx.$implicit;
+        const index_r7 = ctx.index;
+        const ctx_r0 = i0__namespace.ɵɵnextContext(2);
+        const buttonRef_r4 = i0__namespace.ɵɵreference(8);
+        const anchorRef_r5 = i0__namespace.ɵɵreference(10);
+        i0__namespace.ɵɵproperty("ngTemplateOutlet", btn_r6.widgetType === "button" ? buttonRef_r4 : anchorRef_r5)("ngTemplateOutletContext", i0__namespace.ɵɵpureFunction1(3, _c17, btn_r6))("ngTemplateOutletInjector", ctx_r0.createCustomInjector("actions_footer_" + index_r7, i0__namespace.ɵɵpureFunction1(5, _c17, btn_r6)));
     } }
     function TableComponent_div_6_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelementStart(0, "div", 31);
-        i0__namespace.ɵɵtemplate(1, TableComponent_div_6_ng_container_1_Template, 1, 4, "ng-container", 27);
+        i0__namespace.ɵɵtemplate(1, TableComponent_div_6_ng_container_1_Template, 1, 7, "ng-container", 27);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const ctx_r2 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵproperty("ngForOf", ctx_r2._actions.footer);
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("ngForOf", ctx_r0._actions.footer);
     } }
-    const _c18 = function (a0, a1) { return { "btn-sm": a0, "disabled-new": a1 }; };
     function TableComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
-        const _r24 = i0__namespace.ɵɵgetCurrentView();
+        const _r8 = i0__namespace.ɵɵgetCurrentView();
         i0__namespace.ɵɵelementStart(0, "button", 32);
-        i0__namespace.ɵɵlistener("click", function TableComponent_ng_template_7_Template_button_click_0_listener($event) { const restoredCtx = i0__namespace.ɵɵrestoreView(_r24); const btn_r22 = restoredCtx.btn; const ctx_r23 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r23.invokeActionEvent($event, btn_r22.action)); });
+        i0__namespace.ɵɵlistener("click", function TableComponent_ng_template_7_Template_button_click_0_listener($event) { const btn_r9 = i0__namespace.ɵɵrestoreView(_r8).btn; const ctx_r0 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r0.invokeActionEvent($event, btn_r9.action)); });
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const btn_r22 = ctx.btn;
-        const ctx_r4 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(2, _c18, ctx_r4.spacing === "condensed", btn_r22.key === "addNewRow" && (ctx_r4.isGridEditMode || ctx_r4.isLoading)));
-        i0__namespace.ɵɵattribute("aria-label", btn_r22.displayName);
+        const btn_r9 = ctx.btn;
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(2, _c18, ctx_r0.spacing === "condensed", btn_r9.key === "addNewRow" && (ctx_r0.isGridEditMode || ctx_r0.isLoading)));
+        i0__namespace.ɵɵattribute("aria-label", btn_r9.displayName);
     } }
     function TableComponent_ng_template_9_Template(rf, ctx) { if (rf & 1) {
-        const _r27 = i0__namespace.ɵɵgetCurrentView();
+        const _r10 = i0__namespace.ɵɵgetCurrentView();
         i0__namespace.ɵɵelementStart(0, "a", 33);
-        i0__namespace.ɵɵlistener("click", function TableComponent_ng_template_9_Template_a_click_0_listener($event) { const restoredCtx = i0__namespace.ɵɵrestoreView(_r27); const btn_r25 = restoredCtx.btn; const ctx_r26 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r26.invokeActionEvent($event, btn_r25.action)); });
+        i0__namespace.ɵɵlistener("click", function TableComponent_ng_template_9_Template_a_click_0_listener($event) { const btn_r11 = i0__namespace.ɵɵrestoreView(_r10).btn; const ctx_r0 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r0.invokeActionEvent($event, btn_r11.action)); });
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const btn_r25 = ctx.btn;
-        const ctx_r6 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(1, _c18, ctx_r6.spacing === "condensed", btn_r25.key === "addNewRow" && (ctx_r6.isGridEditMode || ctx_r6.isLoading)));
+        const btn_r11 = ctx.btn;
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(1, _c18, ctx_r0.spacing === "condensed", btn_r11.key === "addNewRow" && (ctx_r0.isGridEditMode || ctx_r0.isLoading)));
     } }
     const DEFAULT_CLS = 'app-grid app-panel panel';
     const WIDGET_CONFIG$5 = { widgetType: 'wm-table', hostClass: DEFAULT_CLS };
@@ -236,7 +237,7 @@
         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 && lodashEs.isEmpty(newValue)) {
                 return;
             }
             this.variableInflight = false;
@@ -252,7 +253,7 @@
                 [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 = lodashEs.floor(this.actionRowIndex % this.pagesize);
                     this._gridData.splice(this.actionRowIndex, 1, newValue[rowIndex]);
                 }
                 this.setDataGridOption('isLastPage', !!(this.dataNavigator.isDisableNext));
@@ -290,7 +291,7 @@
                     this.setDataGridOption('colDefs', i2.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 && !lodashEs.isEmpty(newValue) && gridOptions.colDefs.length) {
                     this.invokeEventCallback('beforedatarender', { $data: this._gridData, $columns: this.columns, data: this._gridData, columns: this.columns });
                 }
                 this.setDataGridOption('data', i2.getClonedObject(this._gridData));
@@ -303,7 +304,7 @@
             if (this.multiselect) {
                 return i2.getClonedObject(this.items);
             }
-            if (_.isEmpty(this.items)) {
+            if (lodashEs.isEmpty(this.items)) {
                 return {};
             }
             return i2.getClonedObject(this.items[0]);
@@ -318,8 +319,8 @@
                 this.invokeEventCallback('enterkeypress', { $event, $data: this.gridData });
             }
         }
-        constructor(inj, fb, app, dynamicComponentProvider, statePersistence, paginationService, viewport, parentList, binddataset, binddatasource, readonlygrid, ngZone, trustAsPipe) {
-            super(inj, WIDGET_CONFIG$5);
+        constructor(inj, fb, app, dynamicComponentProvider, statePersistence, paginationService, viewport, parentList, binddataset, binddatasource, readonlygrid, ngZone, trustAsPipe, explicitContext) {
+            super(inj, WIDGET_CONFIG$5, explicitContext);
             this.inj = inj;
             this.fb = fb;
             this.app = app;
@@ -369,8 +370,8 @@
             this.fullFieldDefs = [];
             this.variableInflight = true;
             this.applyProps = new Map();
-            this.redraw = _.debounce(this._redraw, 150);
-            this.debouncedHandleLoading = _.debounce(this.handleLoading, 350);
+            this.redraw = lodashEs.debounce(this._redraw, 150);
+            this.debouncedHandleLoading = lodashEs.debounce(this.handleLoading, 350);
             // Filter and Sort Methods
             this.rowFilter = {};
             this._searchSortHandler = noop;
@@ -435,11 +436,11 @@
                 isLastPage: false,
                 // get the current page number
                 getCurrentPage: () => {
-                    return _.get(this.dataNavigator, 'dn.currentPage') || 1;
+                    return lodashEs.get(this.dataNavigator, 'dn.currentPage') || 1;
                 },
                 // set the page number
                 setCurrentPage: (pageNum) => {
-                    _.set(this.dataNavigator, 'dn.currentPage', pageNum || 1);
+                    lodashEs.set(this.dataNavigator, 'dn.currentPage', pageNum || 1);
                 },
                 getDataSource: () => {
                     return this.datasource;
@@ -511,8 +512,8 @@
                         if (this.selectedItems.length && rowData.$index && this.getConfiguredState() !== 'none' && this.dataNavigator && i4.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 (lodashEs.get(widgetState, 'selectedItem') && this.multiselect) {
+                                if (!lodashEs.some(widgetState.selectedItem, obj)) {
                                     widgetState.selectedItem.push(obj);
                                 }
                                 this.statePersistence.setWidgetState(this, { 'selectedItem': widgetState.selectedItem });
@@ -536,7 +537,7 @@
                          */
                         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 (lodashEs.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;
@@ -556,16 +557,16 @@
                 onRowDeselect: (row, e) => {
                     if (this.multiselect) {
                         this.ngZone.run(() => {
-                            this.items = _.pullAllWith(this.items, [row], _.isEqual);
+                            this.items = lodashEs.pullAllWith(this.items, [row], lodashEs.isEqual);
                             this.selectedItems = this.callDataGridMethod('getSelectedRows');
                             this.invokeEventCallback('rowdeselect', { $data: row, $event: e, row });
                             const rowData = this.addRowIndex(row);
                             if (this.getConfiguredState() !== 'none' && i4.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 (lodashEs.get(widgetState, 'selectedItem')) {
+                                    lodashEs.remove(widgetState.selectedItem, function (selectedItem) {
+                                        return lodashEs.isEqual(selectedItem, obj);
                                     });
                                     this.statePersistence.removeWidgetState(this, 'selectedItem');
                                     if (widgetState.selectedItem.length > 0) {
@@ -608,11 +609,16 @@
                 },
                 onRowDelete: (row, cancelRowDeleteCallback, e, callBack, options) => {
                     this.ngZone.run(() => {
-                        this.deleteRecord(_.extend({}, options, { row, 'cancelRowDeleteCallback': cancelRowDeleteCallback, 'evt': e, 'callBack': callBack }));
+                        this.deleteRecord(lodashEs.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(lodashEs.extend({}, options, { row, event: e, 'callBack': callBack }));
                 },
                 beforeRowUpdate: (row, eventName) => {
                     if (this._liveTableParent) {
@@ -621,7 +627,7 @@
                     this.prevData = i2.getClonedObject(row);
                 },
                 afterRowUpdate: (row, e, callBack, options) => {
-                    this.updateRecord(_.extend({}, options, { row, 'prevData': this.prevData, 'event': e, 'callBack': callBack }));
+                    this.updateRecord(lodashEs.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 });
@@ -702,7 +708,7 @@
                         const customExprView = this.customExprViewRef.createEmbeddedView(tmpl, context);
                         const rootNode = customExprView.rootNodes[0];
                         const fieldName = rootNode.getAttribute('data-col-identifier');
-                        _.extend(colDef, this.columns[fieldName]);
+                        lodashEs.extend(colDef, this.columns[fieldName]);
                         if (!summaryRow) {
                             this.customExprCompiledTl[fieldName + index] = rootNode;
                         }
@@ -930,7 +936,7 @@
                     if (this.gridOptions.isNavTypeScrollOrOndemand()) {
                         this.actionRowIndex = parseInt(val);
                         this.setDataGridOption('actionRowIndex', this.actionRowIndex);
-                        if (!_.isNaN(this.actionRowIndex)) {
+                        if (!lodashEs.isNaN(this.actionRowIndex)) {
                             this.actionRowPage = Math.floor(this.actionRowIndex / this.pagesize) + 1;
                             this.setDataGridOption('actionRowPage', this.actionRowPage || this.gridOptions.actionRowPage);
                         }
@@ -972,7 +978,7 @@
                 clearForm: this.clearForm.bind(this),
                 callLoadInlineWidgetData: () => {
                     this.fullFieldDefs.forEach(col => {
-                        if (_.isUndefined(col.isDataSetBound)) {
+                        if (lodashEs.isUndefined(col.isDataSetBound)) {
                             i2.triggerFn(col.loadInlineWidgetData && col.loadInlineWidgetData.bind(col));
                         }
                     });
@@ -1009,12 +1015,12 @@
             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 = lodashEs.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 = i4.extractDataSourceName(this.binddatasource);
                     }
-                    if (_.get(options, 'variable.name') !== dataSourceName) {
+                    if (lodashEs.get(options, 'variable.name') !== dataSourceName) {
                         return;
                     }
                     if (this._pageLoad && this.getConfiguredState() !== 'none') {
@@ -1061,7 +1067,7 @@
         ngAfterContentInit() {
             super.ngAfterContentInit();
             this.headerConfig = this.headerConfig.filter(this.filterEmptyValues.bind(this));
-            _.remove(this.fieldDefs, f => f === undefined);
+            lodashEs.remove(this.fieldDefs, f => f === undefined);
             const runModeInitialProperties = {
                 showrowindex: 'showRowIndex',
                 multiselect: 'multiselect',
@@ -1109,7 +1115,7 @@
             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 (!lodashEs.isEmpty(this.gridData)) {
                 this.gridOptions.data = i2.getClonedObject(this.gridData);
             }
             this.gridOptions.messages = {
@@ -1118,7 +1124,7 @@
             this.datagridElement = $(this._tableElement.nativeElement);
             this.gridElement = this.$element;
             this.$element.css({ 'position': 'relative' });
-            _.forEach(runModeInitialProperties, (value, key) => {
+            lodashEs.forEach(runModeInitialProperties, (value, key) => {
                 if (i2.isDefined(this[key])) {
                     this.gridOptions[value] = (this[key] === 'true' || this[key] === true);
                 }
@@ -1146,17 +1152,17 @@
             return mode && mode.toLowerCase();
         }
         handleStateParams(widgetState, options) {
-            if (_.get(widgetState, 'selectedItem')) {
+            if (lodashEs.get(widgetState, 'selectedItem')) {
                 this._selectedItemsExist = true;
             }
             options.options = options.options || {};
-            if (_.get(widgetState, 'pagination')) {
+            if (lodashEs.get(widgetState, 'pagination')) {
                 options.options.page = widgetState.pagination;
-                if (_.get(widgetState, 'sort')) {
+                if (lodashEs.get(widgetState, 'sort')) {
                     this.sortStateHandler(widgetState);
-                    options.options.orderBy = _.get(widgetState, 'sort.field') + ' ' + _.get(widgetState, 'sort.direction');
+                    options.options.orderBy = lodashEs.get(widgetState, 'sort.field') + ' ' + lodashEs.get(widgetState, 'sort.direction');
                 }
-                if (_.get(widgetState, 'search')) {
+                if (lodashEs.get(widgetState, 'search')) {
                     setTimeout(() => {
                         this.searchStateHandler(widgetState);
                     }, 500);
@@ -1165,15 +1171,15 @@
             }
             else {
                 options.options.page = 1;
-                if (_.get(widgetState, 'search')) {
+                if (lodashEs.get(widgetState, 'search')) {
                     setTimeout(() => {
                         this.searchStateHandler(widgetState);
                     }, 500);
                     options.options.filterFields = this.getFilterFields(widgetState.search);
                 }
-                if (_.get(widgetState, 'sort')) {
+                if (lodashEs.get(widgetState, 'sort')) {
                     this.sortStateHandler(widgetState);
-                    options.options.orderBy = _.get(widgetState, 'sort.field') + ' ' + _.get(widgetState, 'sort.direction');
+                    options.options.orderBy = lodashEs.get(widgetState, 'sort.field') + ' ' + lodashEs.get(widgetState, 'sort.direction');
                 }
             }
             return options;
@@ -1187,17 +1193,17 @@
         }
         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="' + lodashEs.get(widgetState, 'sort.field') + '"] .sort-icon');
+            if (lodashEs.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 (lodashEs.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 (lodashEs.isArray(widgetState.search)) {
+                lodashEs.forEach(widgetState.search, (filterObj) => {
                     if (this.rowFilter[filterObj.field]) {
                         this.rowFilter[filterObj.field].value = filterObj.value;
                         this.rowFilter[filterObj.field].matchMode = filterObj.matchMode;
@@ -1224,11 +1230,11 @@
         }
         // Compares the prevFilterCriteria Rules with the new rules
         compareFilterExpressions(prevFilters, newFilters) {
-            return !!((prevFilters.length === newFilters.length) && (_.isEqual(prevFilters, newFilters)));
+            return !!((prevFilters.length === newFilters.length) && (lodashEs.isEqual(prevFilters, newFilters)));
         }
         // Set the table lastActionPerformed to Filter Criteria and maintain the prevFilterExpression
         setLastActionToFilterCriteria() {
-            this.prevFilterExpression = _.get(this.datasource, 'filterExpressions.rules') ? i2.getClonedObject(this.datasource.filterExpressions.rules) : i2.getClonedObject([].concat(this.datasource.dataBinding));
+            this.prevFilterExpression = lodashEs.get(this.datasource, 'filterExpressions.rules') ? i2.getClonedObject(this.datasource.filterExpressions.rules) : i2.getClonedObject([].concat(this.datasource.dataBinding));
             this.gridOptions.setLastActionPerformed(this.gridOptions.ACTIONS.FILTER_CRITERIA);
             this.gridOptions.setIsSearchTrigerred(true);
         }
@@ -1242,8 +1248,8 @@
         }
         // 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 (!lodashEs.isEmpty(lodashEs.get(this.datasource, 'filterExpressions.rules')) || !lodashEs.isEmpty(lodashEs.get(this.datasource, 'dataBinding'))) {
+                const currentFilterExpr = lodashEs.get(this.datasource, 'filterExpressions.rules') ? this.datasource.filterExpressions.rules : [].concat(this.datasource.dataBinding);
                 const isEqual = this.compareFilterExpressions(this.prevFilterExpression, currentFilterExpr);
                 if (!isEqual) {
                     this.setLastActionToFilterCriteria();
@@ -1257,29 +1263,29 @@
                 this.checkIfVarFiltersApplied();
             }
             // State handling for static variables
-            if (_.get(this.datasource, 'category') === 'wm.Variable' && this._pageLoad && this.getConfiguredState() !== 'none') {
+            if (lodashEs.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 (lodashEs.get(widgetState, 'selectedItem')) {
                     this._selectedItemsExist = true;
                 }
                 else {
                     this.setDataGridOption('selectFirstRow', this.gridfirstrowselect);
                 }
-                if (_.get(widgetState, 'search')) {
+                if (lodashEs.get(widgetState, 'search')) {
                     this.searchStateHandler(widgetState);
                     this.searchSortHandler(widgetState.search, undefined, 'search', true);
                 }
-                if (_.get(widgetState, 'sort')) {
+                if (lodashEs.get(widgetState, 'sort')) {
                     this.searchSortHandler(widgetState.sort, undefined, 'sort', true);
                     this.sortStateHandler(widgetState);
                 }
-                if (_.get(widgetState, 'pagination')) {
+                if (lodashEs.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 && lodashEs.isUndefined(newVal) && this.__fullData) {
                 return;
             }
             // If variable is in loading state, show loading icon
@@ -1313,7 +1319,7 @@
             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 || lodashEs.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*/
@@ -1325,7 +1331,8 @@
             if (!this.isNavigationEnabled() && newVal) {
                 this.checkFiltersApplied(this.getSortExpr());
             }
-            if (!_.isObject(newVal) || newVal === '' || (newVal && newVal.dataValue === '')) {
+            // @ts-ignore
+            if (!lodashEs.isObject(newVal) || newVal === '' || (newVal && newVal.dataValue === '')) {
                 if (!this.variableInflight) {
                     // If variable has finished loading and resultSet is empty, ender empty data
                     this.setGridData([]);
@@ -1348,7 +1355,7 @@
         }
         addRowIndex(row) {
             const rowData = i2.getClonedObject(row);
-            const rowIndex = _.indexOf(this.gridOptions.data, row);
+            const rowIndex = lodashEs.indexOf(this.gridOptions.data, row);
             if (rowIndex < 0) {
                 return row;
             }
@@ -1374,7 +1381,7 @@
         getClonedRowObject(rowData) {
             const row = i2.getClonedObject(rowData);
             row.getProperty = field => {
-                return _.get(row, field);
+                return lodashEs.get(row, field);
             };
             row.$isFirst = row.$index === 1;
             row.$isLast = this.gridData.length === row.$index;
@@ -1390,7 +1397,7 @@
             }
             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 && lodashEs.isEmpty(this.dataset)) {
                     this.callDataGridMethod('setStatus', 'nodata', this.nodatamessage);
                 }
                 else {
@@ -1409,7 +1416,7 @@
         }
         clearForm(newRow) {
             const ctrls = this.ngform.controls;
-            _.keys(this.ngform.controls).forEach(key => {
+            lodashEs.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('');
@@ -1461,7 +1468,7 @@
             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 (lodashEs.get(this.datasource, 'category') === 'wm.Variable' || lodashEs.get(this.datasource, 'category') === undefined) {
                 this.variableInflight = false;
             }
             if (!this.variableInflight) {
@@ -1479,7 +1486,7 @@
                 return;
             }
             const option = {};
-            if (i2.isDefined && (!_.isEqual(newVal, this.gridOptions[optionName]) || forceSet)) {
+            if (i2.isDefined && (!lodashEs.isEqual(newVal, this.gridOptions[optionName]) || forceSet)) {
                 option[optionName] = newVal;
                 this.datagridElement.datatable('option', option);
                 this.gridOptions[optionName] = newVal;
@@ -1503,13 +1510,13 @@
             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 = lodashEs.find(this.fullFieldDefs, { 'field': ROW_OPS_FIELD, type: 'custom' }); // Check if column is fetched from markup
+            lodashEs.remove(this.fieldDefs, { type: 'custom', field: ROW_OPS_FIELD }); // Removing operations column
+            lodashEs.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 ? lodashEs.toNumber(rowActionCol.rowactionsposition) : this.fieldDefs.length;
                     this.fieldDefs.splice(insertPosition, 0, rowActionCol);
                     if (insertPosition === 0) {
                         this.headerConfig.unshift(config);
@@ -1538,15 +1545,15 @@
                     if (i2.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 (lodashEs.isEqual(this.dataset, newVal)) {
                             this.watchVariableDataSet(newVal);
                         }
                         else {
-                            if (_.isArray(newVal)) {
+                            if (lodashEs.isArray(newVal)) {
                                 this.widget.dataset = [].concat(newVal);
                             }
-                            else if (_.isObject(newVal)) {
-                                this.widget.dataset = _.extend({}, newVal);
+                            else if (lodashEs.isObject(newVal)) {
+                                this.widget.dataset = lodashEs.extend({}, newVal);
                             }
                             else {
                                 this.widget.dataset = newVal;
@@ -1626,7 +1633,7 @@
             if (this.getConfiguredState() !== 'none' && this._selectedItemsExist && serviceData.length) {
                 const widgetState = this.statePersistence.getWidgetState(this);
                 let currentPageItems;
-                if (_.get(widgetState, 'selectedItem')) {
+                if (lodashEs.get(widgetState, 'selectedItem')) {
                     currentPageItems = widgetState.selectedItem.filter(val => {
                         return val.page === this.dataNavigator.dn.currentPage;
                     });
@@ -1634,7 +1641,7 @@
                     // 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 (lodashEs.isArray(this.selecteditem)) {
                             currentPageItems.forEach((item) => {
                                 this.selectItem(item.index, undefined);
                             });
@@ -1651,15 +1658,15 @@
             this.fieldDefs = []; // empty the form fields
             // empty the filter field template refs.
             this.filterTmpl._results = [];
-            if (_.isEmpty(columns)) {
+            if (lodashEs.isEmpty(columns)) {
                 return;
             }
             let tmpl = '';
             columns.forEach(col => {
                 let attrsTmpl = '';
                 let customTmpl = '';
-                _.forEach(col, (val, key) => {
-                    if (!_.isUndefined(val) && val !== '') {
+                lodashEs.forEach(col, (val, key) => {
+                    if (!lodashEs.isUndefined(val) && val !== '') {
                         // If custom expression is present, keep it inside table column. Else, keep as attribute
                         if (key === 'customExpression') {
                             customTmpl = val;
@@ -1698,7 +1705,7 @@
             /*call utility function to prepare fieldDefs for grid against given data (A MAX OF 10 COLUMNS ONLY)*/
             defaultFieldDefs = i4.prepareFieldDefs(properties);
             /*append additional properties*/
-            _.forEach(defaultFieldDefs, columnDef => {
+            lodashEs.forEach(defaultFieldDefs, columnDef => {
                 columnDef.binding = columnDef.field;
                 columnDef.caption = columnDef.displayName;
                 columnDef.pcDisplay = true;
@@ -1720,7 +1727,7 @@
             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 => {
+            lodashEs.forEach(this.columns, val => {
                 defaultFieldDefs.push(val);
             });
             this.generateDynamicColumns(defaultFieldDefs);
@@ -1730,11 +1737,11 @@
             /* 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 && !lodashEs.isArray(data)) {
                 data = [data];
             }
             /* if the data is empty, show nodatamessage */
-            if (_.isEmpty(data)) {
+            if (lodashEs.isEmpty(data)) {
                 this.setGridData(data);
                 return;
             }
@@ -1751,7 +1758,7 @@
             let pagingOptions;
             if (this.datasource && this.datasource.execute(i2.DataSource.Operation.IS_PAGEABLE)) {
                 pagingOptions = this.datasource.execute(i2.DataSource.Operation.GET_PAGING_OPTIONS);
-                sortExp = _.isEmpty(pagingOptions) ? '' : i4.getOrderByExpr(pagingOptions.sort);
+                sortExp = lodashEs.isEmpty(pagingOptions) ? '' : i4.getOrderByExpr(pagingOptions.sort);
             }
             return sortExp || '';
         }
@@ -1777,7 +1784,7 @@
                     }
                     // 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 && lodashEs.startsWith(this.binddataset, 'item')) {
                         this.datasource = i2.getDatasourceFromExpr(this.widget.$attrs.get('datasetboundexpr'), this);
                     }
                     if (this.gridOptions.isNavTypeScrollOrOndemand()) {
@@ -1794,7 +1801,7 @@
                     }
                     // 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 (!(lodashEs.get(this.datasource, 'category') === 'wm.Variable' && this._pageLoad && this.getConfiguredState() !== 'none') || (this.parentList && lodashEs.startsWith(this.binddataset, 'item'))) {
                         this.watchVariableDataSet(nv);
                     }
                     break;
@@ -1845,7 +1852,7 @@
                     this.exportOptions = [];
                     if (nv) {
                         // Populate options for export drop down menu
-                        _.forEach(_.split(nv, ','), type => {
+                        lodashEs.forEach(lodashEs.split(nv, ','), type => {
                             this.exportOptions.push({
                                 label: type,
                                 icon: exportIconMapping[type]
@@ -1855,7 +1862,7 @@
                     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 || lodashEs.some(this.actions, act => lodashEs.includes(act.action, 'addNewRow()'));
                     this.callDataGridMethod('option', 'actionsEnabled.new', enableNewRow);
                     break;
                 case 'pagesize':
@@ -1910,11 +1917,11 @@
         populateActions() {
             this._actions.header = [];
             this._actions.footer = [];
-            _.forEach(this.actions, (action) => {
-                if (_.includes(action.position, 'header')) {
+            lodashEs.forEach(this.actions, (action) => {
+                if (lodashEs.includes(action.position, 'header')) {
                     this._actions.header.push(action);
                 }
-                if (_.includes(action.position, 'footer')) {
+                if (lodashEs.includes(action.position, 'footer')) {
                     this._actions.footer.push(action);
                 }
             });
@@ -1983,9 +1990,9 @@
             if (data) {
                 this.serverData = data;
             }
-            if (_.isObject(item)) {
-                item = _.omitBy(item, (value) => {
-                    return _.isArray(value) && _.isEmpty(value);
+            if (lodashEs.isObject(item)) {
+                item = lodashEs.omitBy(item, (value) => {
+                    return lodashEs.isArray(value) && lodashEs.isEmpty(value);
                 });
             }
             this.callDataGridMethod('selectRow', item, true);
@@ -2000,7 +2007,7 @@
             this.checkFiltersApplied(this.getSortExpr());
             if (this._isClientSearch) {
                 data = i2.getClonedObject(this.__fullData);
-                if (_.isObject(data) && !_.isArray(data)) {
+                if (lodashEs.isObject(data) && !lodashEs.isArray(data)) {
                     data = [data];
                 }
                 data = this.getSearchResult(data, this.filterInfo);
@@ -2016,7 +2023,7 @@
         }
         export($item) {
             let filterFields;
-            const sortOptions = _.isEmpty(this.sortInfo) ? '' : this.sortInfo.field + ' ' + this.sortInfo.direction;
+            const sortOptions = lodashEs.isEmpty(this.sortInfo) ? '' : this.sortInfo.field + ' ' + this.sortInfo.direction;
             const columns = {};
             let isValid;
             let requestData;
@@ -2052,7 +2059,7 @@
             if (isValid === false) {
                 return;
             }
-            requestData.fields = _.values(requestData.columns);
+            requestData.fields = lodashEs.values(requestData.columns);
             this.datasource.execute(i2.DataSource.Operation.DOWNLOAD, { data: requestData });
         }
         expandRow(rowId) {
@@ -2113,14 +2120,14 @@
         }
         ngOnDetach() {
             super.ngOnDetach();
-            if (_.get(this.datasource, 'category') === 'wm.Variable' && this.getConfiguredState() !== 'none') {
+            if (lodashEs.get(this.datasource, 'category') === 'wm.Variable' && this.getConfiguredState() !== 'none') {
                 this._pageLoad = false;
             }
             else {
                 this._pageLoad = true;
             }
         }
-        static { this.ɵfac = function TableComponent_Factory(t) { return new (t || TableComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1__namespace.FormBuilder), i0__namespace.ɵɵdirectiveInject(i2__namespace.App), i0__namespace.ɵɵdirectiveInject(i2__namespace.DynamicComponentRefProvider), i0__namespace.ɵɵdirectiveInject(i2__namespace.StatePersistence), i0__namespace.ɵɵdirectiveInject(i2__namespace.PaginationService), i0__namespace.ɵɵdirectiveInject(i2__namespace.Viewport), i0__namespace.ɵɵdirectiveInject(i3__namespace.ListComponent, 8), i0__namespace.ɵɵinjectAttribute('dataset.bind'), i0__namespace.ɵɵinjectAttribute('datasource.bind'), i0__namespace.ɵɵinjectAttribute('readonlygrid'), i0__namespace.ɵɵdirectiveInject(i0__namespace.NgZone), i0__namespace.ɵɵdirectiveInject(i4__namespace.TrustAsPipe)); }; }
+        static { this.ɵfac = function TableComponent_Factory(t) { return new (t || TableComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1__namespace.FormBuilder), i0__namespace.ɵɵdirectiveInject(i2__namespace.App), i0__namespace.ɵɵdirectiveInject(i2__namespace.DynamicComponentRefProvider), i0__namespace.ɵɵdirectiveInject(i2__namespace.StatePersistence), i0__namespace.ɵɵdirectiveInject(i2__namespace.PaginationService), i0__namespace.ɵɵdirectiveInject(i2__namespace.Viewport), i0__namespace.ɵɵdirectiveInject(i3__namespace.ListComponent, 8), i0__namespace.ɵɵinjectAttribute('dataset.bind'), i0__namespace.ɵɵinjectAttribute('datasource.bind'), i0__namespace.ɵɵinjectAttribute('readonlygrid'), i0__namespace.ɵɵdirectiveInject(i0__namespace.NgZone), i0__namespace.ɵɵdirectiveInject(i4__namespace.TrustAsPipe), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: TableComponent, selectors: [["", "wmTable", ""]], contentQueries: function TableComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
                 i0__namespace.ɵɵcontentQuery(dirIndex, _c0$1, 5);
                 i0__namespace.ɵɵcontentQuery(dirIndex, _c1$1, 5);
@@ -2166,37 +2173,36 @@
             } }, features: [i0__namespace.ɵɵProvidersFeature([
                     i4.provideAs(TableComponent, i1.NG_VALUE_ACCESSOR, true),
                     i4.provideAsWidgetRef(TableComponent)
-                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c16, decls: 29, vars: 4, consts: [["class", "panel-heading", 4, "ngIf"], [1, "app-datagrid"], ["datagridElement", ""], [1, "panel-footer", "clearfix", 3, "hidden"], [1, "app-datagrid-paginator", 3, "hidden"], ["wmPagination", "", "show.bind", "shownavigation", "navigationalign.bind", "navigationalign", "navigationsize.bind", "navigationSize", "navigation.bind", "navControls", "showrecordcount.bind", "showrecordcount", "maxsize.bind", "maxsize", "boundarylinks.bind", "boundarylinks", "forceellipses.bind", "forceellipses", "directionlinks.bind", "directionlinks"], ["class", "app-datagrid-actions", 4, "ngIf"], ["buttonRef", ""], ["anchorRef", ""], ["hidden", ""], ["multiColumnFilterView", ""], ["inlineEditView", ""], ["inlineEditNewView", ""], ["rowActionsView", ""], ["rowExpansionActionView", ""], ["customExprView", ""], ["dynamicTable", ""], ["rowDetailView", ""], [1, "dynamic-table-container"], [1, "panel-heading"], [1, "panel-title"], [1, "pull-left"], [3, "class", 4, "ngIf"], [1, "heading", 3, "innerHTML"], [1, "description", 3, "innerHTML"], ["class", "panel-actions app-datagrid-actions", 4, "ngIf"], [1, "panel-actions", "app-datagrid-actions"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngFor", "ngForOf"], ["wmMenu", "", "dropdown", "", "caption.bind", "appLocale.LABEL_EXPORT", "autoclose", "always", "dataset.bind", "exportOptions", "select.event", "export($item)", "menuposition", "down,left", 4, "ngIf"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["wmMenu", "", "dropdown", "", "caption.bind", "appLocale.LABEL_EXPORT", "autoclose", "always", "dataset.bind", "exportOptions", "select.event", "export($item)", "menuposition", "down,left"], [1, "app-datagrid-actions"], ["wmButton", "", "caption.bind", "btn.displayName", "show.bind", "btn.show", "class.bind", "btn.class", "iconclass.bind", "btn.iconclass", "type", "button", "shortcutkey.bind", "btn.shortcutkey", "tabindex.bind", "btn.tabindex", "hint.bind", "btn.title", "disabled.bind", "btn.disabled", "conditionalclass.bind", "btn.conditionalclass", "conditionalstyle.bind", "btn.conditionalstyle", 3, "ngClass", "click"], ["wmAnchor", "", "caption.bind", "btn.displayName", "show.bind", "btn.show", "class.bind", "btn.class", "iconclass.bind", "btn.iconclass", "shortcutkey.bind", "btn.shortcutkey", "tabindex.bind", "btn.tabindex", "hint.bind", "btn.title", "hyperlink.bind", "btn.hyperlink", "target.bind", "btn.target", "conditionalclass.bind", "btn.conditionalclass", "conditionalstyle.bind", "btn.conditionalstyle", 3, "ngClass", "click"]], template: function TableComponent_Template(rf, ctx) { if (rf & 1) {
-                i0__namespace.ɵɵtemplate(0, TableComponent_div_0_Template, 8, 4, "div", 0);
-                i0__namespace.ɵɵelement(1, "div", 1, 2);
-                i0__namespace.ɵɵelementStart(3, "div", 3)(4, "div", 4);
-                i0__namespace.ɵɵelement(5, "nav", 5);
+                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c16, decls: 29, vars: 4, consts: [["datagridElement", ""], ["buttonRef", ""], ["anchorRef", ""], ["multiColumnFilterView", ""], ["inlineEditView", ""], ["inlineEditNewView", ""], ["rowActionsView", ""], ["rowExpansionActionView", ""], ["customExprView", ""], ["dynamicTable", ""], ["rowDetailView", ""], ["class", "panel-heading", 4, "ngIf"], [1, "app-datagrid"], [1, "panel-footer", "clearfix", 3, "hidden"], [1, "app-datagrid-paginator", 3, "hidden"], ["wmPagination", "", "show.bind", "shownavigation", "navigationalign.bind", "navigationalign", "navigationsize.bind", "navigationSize", "navigation.bind", "navControls", "showrecordcount.bind", "showrecordcount", "maxsize.bind", "maxsize", "boundarylinks.bind", "boundarylinks", "forceellipses.bind", "forceellipses", "directionlinks.bind", "directionlinks"], ["class", "app-datagrid-actions", 4, "ngIf"], ["hidden", ""], [1, "dynamic-table-container"], [1, "panel-heading"], [1, "panel-title"], [1, "pull-left"], [3, "class", 4, "ngIf"], [1, "heading", 3, "innerHTML"], [1, "description", 3, "innerHTML"], ["class", "panel-actions app-datagrid-actions", 4, "ngIf"], [1, "panel-actions", "app-datagrid-actions"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", "ngTemplateOutletInjector", 4, "ngFor", "ngForOf"], ["wmMenu", "", "dropdown", "", "caption.bind", "appLocale.LABEL_EXPORT", "autoclose", "always", "dataset.bind", "exportOptions", "select.event", "export($item)", "menuposition", "down,left", 4, "ngIf"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", "ngTemplateOutletInjector"], ["wmMenu", "", "dropdown", "", "caption.bind", "appLocale.LABEL_EXPORT", "autoclose", "always", "dataset.bind", "exportOptions", "select.event", "export($item)", "menuposition", "down,left"], [1, "app-datagrid-actions"], ["wmButton", "", "caption.bind", "btn.displayName", "show.bind", "btn.show", "class.bind", "btn.class", "iconclass.bind", "btn.iconclass", "type", "button", "shortcutkey.bind", "btn.shortcutkey", "tabindex.bind", "btn.tabindex", "hint.bind", "btn.title", "disabled.bind", "btn.disabled", "conditionalclass.bind", "btn.conditionalclass", "conditionalstyle.bind", "btn.conditionalstyle", 3, "click", "ngClass"], ["wmAnchor", "", "caption.bind", "btn.displayName", "show.bind", "btn.show", "class.bind", "btn.class", "iconclass.bind", "btn.iconclass", "shortcutkey.bind", "btn.shortcutkey", "tabindex.bind", "btn.tabindex", "hint.bind", "btn.title", "hyperlink.bind", "btn.hyperlink", "target.bind", "btn.target", "conditionalclass.bind", "btn.conditionalclass", "conditionalstyle.bind", "btn.conditionalstyle", 3, "click", "ngClass"]], template: function TableComponent_Template(rf, ctx) { if (rf & 1) {
+                i0__namespace.ɵɵtemplate(0, TableComponent_div_0_Template, 8, 4, "div", 11);
+                i0__namespace.ɵɵelement(1, "div", 12, 0);
+                i0__namespace.ɵɵelementStart(3, "div", 13)(4, "div", 14);
+                i0__namespace.ɵɵelement(5, "nav", 15);
                 i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵtemplate(6, TableComponent_div_6_Template, 2, 1, "div", 6);
+                i0__namespace.ɵɵtemplate(6, TableComponent_div_6_Template, 2, 1, "div", 16);
                 i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵtemplate(7, TableComponent_ng_template_7_Template, 1, 5, "ng-template", null, 7, i0__namespace.ɵɵtemplateRefExtractor);
-                i0__namespace.ɵɵtemplate(9, TableComponent_ng_template_9_Template, 1, 4, "ng-template", null, 8, i0__namespace.ɵɵtemplateRefExtractor);
-                i0__namespace.ɵɵelementStart(11, "div", 9);
-                i0__namespace.ɵɵelementContainer(12, null, 10)(14, null, 11)(16, null, 12)(18, null, 13)(20, null, 14)(22, null, 15)(24, null, 16)(26, null, 17);
+                i0__namespace.ɵɵtemplate(7, TableComponent_ng_template_7_Template, 1, 5, "ng-template", null, 1, i0__namespace.ɵɵtemplateRefExtractor)(9, TableComponent_ng_template_9_Template, 1, 4, "ng-template", null, 2, i0__namespace.ɵɵtemplateRefExtractor);
+                i0__namespace.ɵɵelementStart(11, "div", 17);
+                i0__namespace.ɵɵelementContainer(12, null, 3)(14, null, 4)(16, null, 5)(18, null, 6)(20, null, 7)(22, null, 8)(24, null, 9)(26, null, 10);
                 i0__namespace.ɵɵelement(28, "div", 18);
                 i0__namespace.ɵɵelementEnd();
             } if (rf & 2) {
                 i0__namespace.ɵɵproperty("ngIf", ctx.title || ctx.subheading || ctx.iconclass || ctx.exportOptions.length || ctx._actions.header.length);
                 i0__namespace.ɵɵadvance(3);
                 i0__namespace.ɵɵproperty("hidden", !ctx._actions.footer.length && (!ctx.shownavigation || ctx.onDemandLoad && ctx.dataNavigator.isDisableNext || (ctx.dataNavigator == null ? null : ctx.dataNavigator.dataSize) <= ctx.pagesize));
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("hidden", !(ctx.dataNavigator == null ? null : ctx.dataNavigator.dataSize) && !(ctx.dataNavigator.datasource == null ? null : ctx.dataNavigator.datasource.pagination == null ? null : ctx.dataNavigator.datasource.pagination.next) || !ctx.shownavigation || ctx.onDemandLoad && ctx.dataNavigator.isDisableNext || (ctx.dataNavigator == null ? null : ctx.dataNavigator.dataSize) <= ctx.pagesize);
                 i0__namespace.ɵɵadvance(2);
                 i0__namespace.ɵɵproperty("ngIf", ctx._actions.footer.length);
             } }, dependencies: [i5__namespace.AnchorComponent, i6__namespace.BsDropdownDirective, i7__namespace.NgClass, i7__namespace.NgForOf, i7__namespace.NgIf, i7__namespace.NgTemplateOutlet, i8__namespace.ButtonComponent, i9__namespace.MenuComponent, i10__namespace.PaginationComponent], encapsulation: 2 }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableComponent, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableComponent, [{
             type: i0.Component,
             args: [{ selector: '[wmTable]', providers: [
                         i4.provideAs(TableComponent, i1.NG_VALUE_ACCESSOR, true),
                         i4.provideAsWidgetRef(TableComponent)
-                    ], template: "<div class=\"panel-heading\" *ngIf=\"title || subheading || iconclass || exportOptions.length || _actions.header.length\">\n    <h3 class=\"panel-title\">\n        <div class=\"pull-left\">\n            <i class=\"app-icon panel-icon {{iconclass}}\" *ngIf=\"iconclass\"></i>\n        </div>\n        <div class=\"pull-left\">\n            <div class=\"heading\" [innerHTML]=\"title\"></div>\n            <div class=\"description\" [innerHTML]=\"subheading\"></div>\n        </div>\n        <div class=\"panel-actions app-datagrid-actions\" *ngIf=\"exportOptions.length || _actions.header.length\">\n            <ng-container *ngFor=\"let btn of _actions.header\"\n                          [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\" [ngTemplateOutletContext]=\"{btn:btn}\">\n            </ng-container>\n            <div wmMenu dropdown caption.bind=\"appLocale.LABEL_EXPORT\" *ngIf=\"exportOptions.length\"  autoclose=\"always\" attr.name=\"{{name}}-export\"\n                dataset.bind=\"exportOptions\" select.event=\"export($item)\" menuposition=\"down,left\"></div>\n        </div>\n    </h3>\n</div>\n<div class=\"app-datagrid\" #datagridElement></div>\n\n<div class=\"panel-footer clearfix\" [hidden]=\"!_actions.footer.length && (!shownavigation || (onDemandLoad && dataNavigator.isDisableNext) || dataNavigator?.dataSize <= pagesize)\">\n    <div class=\"app-datagrid-paginator\" [hidden]=\"(!dataNavigator?.dataSize && !dataNavigator.datasource?.pagination?.next) || !shownavigation || (onDemandLoad && dataNavigator.isDisableNext) || dataNavigator?.dataSize <= pagesize\">\n        <nav wmPagination show.bind=\"shownavigation\" navigationalign.bind=\"navigationalign\"\n             navigationsize.bind=\"navigationSize\"\n             navigation.bind=\"navControls\" showrecordcount.bind=\"showrecordcount\" maxsize.bind=\"maxsize\"\n             boundarylinks.bind=\"boundarylinks\"\n             forceellipses.bind=\"forceellipses\" directionlinks.bind=\"directionlinks\"></nav>\n    </div>\n    <div class=\"app-datagrid-actions\" *ngIf=\"_actions.footer.length\">\n        <ng-container *ngFor=\"let btn of _actions.footer\"\n                      [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\" [ngTemplateOutletContext]=\"{btn:btn}\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #buttonRef let-btn=\"btn\">\n    <button wmButton caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n            [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n            type=\"button\" shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\" [attr.aria-label]=\"btn.displayName\" disabled.bind=\"btn.disabled\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></button>\n</ng-template>\n\n<ng-template #anchorRef let-btn=\"btn\">\n    <a wmAnchor caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n            [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n            shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\"\n            hyperlink.bind=\"btn.hyperlink\" target.bind=\"btn.target\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></a>\n</ng-template>\n\n<div hidden>\n    <ng-container #multiColumnFilterView></ng-container>\n\n    <ng-container #inlineEditView></ng-container>\n\n    <ng-container #inlineEditNewView></ng-container>\n\n    <ng-container #rowActionsView></ng-container>\n\n    <ng-container #rowExpansionActionView></ng-container>\n\n    <ng-container #customExprView></ng-container>\n\n    <ng-container #dynamicTable></ng-container>\n\n    <ng-container #rowDetailView></ng-container>\n\n    <div class=\"dynamic-table-container\"></div>\n</div>\n" }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: i1__namespace.FormBuilder }, { type: i2__namespace.App }, { type: i2__namespace.DynamicComponentRefProvider }, { type: i2__namespace.StatePersistence }, { type: i2__namespace.PaginationService }, { type: i2__namespace.Viewport }, { type: i3__namespace.ListComponent, decorators: [{
+                    ], template: "<div class=\"panel-heading\" *ngIf=\"title || subheading || iconclass || exportOptions.length || _actions.header.length\">\n    <h3 class=\"panel-title\">\n        <div class=\"pull-left\">\n            <i class=\"app-icon panel-icon {{iconclass}}\" *ngIf=\"iconclass\"></i>\n        </div>\n        <div class=\"pull-left\">\n            <div class=\"heading\" [innerHTML]=\"title\"></div>\n            <div class=\"description\" [innerHTML]=\"subheading\"></div>\n        </div>\n        <div class=\"panel-actions app-datagrid-actions\" *ngIf=\"exportOptions.length || _actions.header.length\">\n            <ng-container *ngFor=\"let btn of _actions.header; let index = index;\"\n                          [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n                          [ngTemplateOutletContext]=\"{btn:btn}\"\n                          [ngTemplateOutletInjector]=\"createCustomInjector('actions_header_' + index, {btn:btn})\">\n            </ng-container>\n            <div wmMenu dropdown caption.bind=\"appLocale.LABEL_EXPORT\" *ngIf=\"exportOptions.length\"  autoclose=\"always\" attr.name=\"{{name}}-export\"\n                dataset.bind=\"exportOptions\" select.event=\"export($item)\" menuposition=\"down,left\"></div>\n        </div>\n    </h3>\n</div>\n<div class=\"app-datagrid\" #datagridElement></div>\n\n<div class=\"panel-footer clearfix\" [hidden]=\"!_actions.footer.length && (!shownavigation || (onDemandLoad && dataNavigator.isDisableNext) || dataNavigator?.dataSize <= pagesize)\">\n    <div class=\"app-datagrid-paginator\" [hidden]=\"(!dataNavigator?.dataSize && !dataNavigator.datasource?.pagination?.next) || !shownavigation || (onDemandLoad && dataNavigator.isDisableNext) || dataNavigator?.dataSize <= pagesize\">\n        <nav wmPagination show.bind=\"shownavigation\" navigationalign.bind=\"navigationalign\"\n             navigationsize.bind=\"navigationSize\"\n             navigation.bind=\"navControls\" showrecordcount.bind=\"showrecordcount\" maxsize.bind=\"maxsize\"\n             boundarylinks.bind=\"boundarylinks\"\n             forceellipses.bind=\"forceellipses\" directionlinks.bind=\"directionlinks\"></nav>\n    </div>\n    <div class=\"app-datagrid-actions\" *ngIf=\"_actions.footer.length\">\n        <ng-container *ngFor=\"let btn of _actions.footer; let index = index;\"\n                      [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n                      [ngTemplateOutletContext]=\"{btn:btn}\"\n                      [ngTemplateOutletInjector]=\"createCustomInjector('actions_footer_' + index, {btn:btn})\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #buttonRef let-btn=\"btn\">\n    <button wmButton caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n            [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n            type=\"button\" shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\" [attr.aria-label]=\"btn.displayName\" disabled.bind=\"btn.disabled\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></button>\n</ng-template>\n\n<ng-template #anchorRef let-btn=\"btn\">\n    <a wmAnchor caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n            [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n            shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\"\n            hyperlink.bind=\"btn.hyperlink\" target.bind=\"btn.target\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></a>\n</ng-template>\n\n<div hidden>\n    <ng-container #multiColumnFilterView></ng-container>\n\n    <ng-container #inlineEditView></ng-container>\n\n    <ng-container #inlineEditNewView></ng-container>\n\n    <ng-container #rowActionsView></ng-container>\n\n    <ng-container #rowExpansionActionView></ng-container>\n\n    <ng-container #customExprView></ng-container>\n\n    <ng-container #dynamicTable></ng-container>\n\n    <ng-container #rowDetailView></ng-container>\n\n    <div class=\"dynamic-table-container\"></div>\n</div>\n" }]
+        }], () => [{ type: i0__namespace.Injector }, { type: i1__namespace.FormBuilder }, { type: i2__namespace.App }, { type: i2__namespace.DynamicComponentRefProvider }, { type: i2__namespace.StatePersistence }, { type: i2__namespace.PaginationService }, { type: i2__namespace.Viewport }, { type: i3__namespace.ListComponent, decorators: [{
                     type: i0.Optional
                 }] }, { type: undefined, decorators: [{
                     type: i0.Attribute,
@@ -2207,7 +2213,12 @@
                 }] }, { type: undefined, decorators: [{
                     type: i0.Attribute,
                     args: ['readonlygrid']
-                }] }, { type: i0__namespace.NgZone }, { type: i4__namespace.TrustAsPipe }]; }, { dataNavigator: [{
+                }] }, { type: i0__namespace.NgZone }, { type: i4__namespace.TrustAsPipe }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], { dataNavigator: [{
                 type: i0.ViewChild,
                 args: [i10.PaginationComponent, { static: true }]
             }], _tableElement: [{
@@ -2262,6 +2273,7 @@
                 type: i0.HostListener,
                 args: ['keypress', ['$event']]
             }] }); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(TableComponent, { className: "TableComponent", filePath: "table.component.ts", lineNumber: 122 }); })();
 
     const OPERATION = {
         'NEW': 'new',
@@ -2383,23 +2395,23 @@
         generatePath(binddataset) {
             let path, index;
             let dataBoundExpr = this.table.widget.$attrs.get('datasetboundexpr');
-            if (_.startsWith(binddataset, 'item') && dataBoundExpr) {
-                if (_.startsWith(dataBoundExpr, 'Widgets.')) {
+            if (lodashEs.startsWith(binddataset, 'item') && dataBoundExpr) {
+                if (lodashEs.startsWith(dataBoundExpr, 'Widgets.')) {
                     dataBoundExpr = i2.extractCurrentItemExpr(dataBoundExpr, this.table);
                 }
                 const parentListItems = this.table.$element.parents('.app-list-item');
-                const indexArr = _.map(parentListItems, (item) => _.parseInt($(item).attr('listitemindex')));
+                const indexArr = lodashEs.map(parentListItems, (item) => lodashEs.parseInt($(item).attr('listitemindex')));
                 for (let i = indexArr.length - 1; i >= 0; i--) {
                     dataBoundExpr = dataBoundExpr.replace('$i', indexArr[i]);
                 }
-                index = _.last(indexArr);
+                index = lodashEs.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 = lodashEs.parseInt(binddataset.replace(/^Variables\..*\.dataSet([\[])/g, ''));
                 }
                 path = binddataset.replace(/^Variables\..*\.dataSet([^.])*(\.|$)/g, '');
             }
@@ -2721,17 +2733,17 @@
         static { this.ɵfac = function TableCUDDirective_Factory(t) { return new (t || TableCUDDirective)(i0__namespace.ɵɵdirectiveInject(TableComponent, 2), i0__namespace.ɵɵdirectiveInject(i2__namespace.AbstractDialogService), i0__namespace.ɵɵdirectiveInject(i2__namespace.App)); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: TableCUDDirective, selectors: [["", "wmTableCUD", ""]] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableCUDDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableCUDDirective, [{
             type: i0.Directive,
             args: [{
                     selector: '[wmTableCUD]'
                 }]
-        }], function () { return [{ type: undefined, decorators: [{
+        }], () => [{ type: undefined, decorators: [{
                     type: i0.Self
                 }, {
                     type: i0.Inject,
                     args: [TableComponent]
-                }] }, { type: i2__namespace.AbstractDialogService }, { type: i2__namespace.App }]; }, null); })();
+                }] }, { type: i2__namespace.AbstractDialogService }, { type: i2__namespace.App }], null); })();
 
     const emptyMatchModes = ['null', 'empty', 'nullorempty', 'isnotnull', 'isnotempty'];
     // Get search value based on the time
@@ -2740,12 +2752,12 @@
             return undefined;
         }
         if (i2.isNumberType(type)) {
-            return _.toNumber(value);
+            return lodashEs.toNumber(value);
         }
         if (type === i2.DataType.DATETIME) {
             return moment(value).valueOf();
         }
-        return _.toString(value).toLowerCase();
+        return lodashEs.toString(value).toLowerCase();
     };
     // Filter the data based on the search value and conditions
     const getFilteredData = (data, searchObj, visibleCols = []) => {
@@ -2754,26 +2766,27 @@
         // 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 ((!i2.isDefined(searchVal) && !_.includes(emptyMatchModes, searchObj.matchMode)) || (i2.isNumberType(searchObj.type) && _.isNull(searchObj.value))) {
+        if ((!i2.isDefined(searchVal) && !lodashEs.includes(emptyMatchModes, searchObj.matchMode)) || (i2.isNumberType(searchObj.type) && lodashEs.isNull(searchObj.value))) {
             return data;
         }
         data = data.filter((obj) => {
             let isExists;
             if (searchObj.field) {
-                currentVal = getSearchValue(_.get(obj, searchObj.field), searchObj.type);
+                currentVal = getSearchValue(lodashEs.get(obj, searchObj.field), searchObj.type);
             }
             else {
                 currentVal = [];
-                _.forEach(obj, (val, key) => {
-                    if ((_.includes(visibleCols, key))) {
+                lodashEs.forEach(obj, (val, key) => {
+                    if ((lodashEs.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 = lodashEs.filter(lodashEs.range(visibleCols.length), (i) => visibleCols[i].includes(key));
+                        lodashEs.forEach(colIndex, (index) => {
+                            // @ts-ignore
+                            const value = lodashEs.get(obj, visibleCols[index]);
                             if (currentVal.indexOf(value) < 0) {
                                 currentVal.push(value);
                             }
@@ -2784,31 +2797,31 @@
             }
             switch (searchObj.matchMode) {
                 case 'start':
-                    isExists = _.startsWith(currentVal, searchVal);
+                    isExists = lodashEs.startsWith(currentVal, searchVal);
                     break;
                 case 'end':
-                    isExists = _.endsWith(currentVal, searchVal);
+                    isExists = lodashEs.endsWith(currentVal, searchVal);
                     break;
                 case 'exact':
-                    isExists = _.isEqual(currentVal, searchVal);
+                    isExists = lodashEs.isEqual(currentVal, searchVal);
                     break;
                 case 'notequals':
-                    isExists = !_.isEqual(currentVal, searchVal);
+                    isExists = !lodashEs.isEqual(currentVal, searchVal);
                     break;
                 case 'null':
-                    isExists = _.isNull(currentVal);
+                    isExists = lodashEs.isNull(currentVal);
                     break;
                 case 'isnotnull':
-                    isExists = !_.isNull(currentVal);
+                    isExists = !lodashEs.isNull(currentVal);
                     break;
                 case 'empty':
-                    isExists = _.isEmpty(currentVal);
+                    isExists = lodashEs.isEmpty(currentVal);
                     break;
                 case 'isnotempty':
-                    isExists = !_.isEmpty(currentVal);
+                    isExists = !lodashEs.isEmpty(currentVal);
                     break;
                 case 'nullorempty':
-                    isExists = _.isNull(currentVal) || _.isEmpty(currentVal);
+                    isExists = lodashEs.isNull(currentVal) || lodashEs.isEmpty(currentVal);
                     break;
                 case 'lessthan':
                     isExists = currentVal < searchVal;
@@ -2823,7 +2836,7 @@
                     isExists = currentVal >= searchVal;
                     break;
                 default:
-                    isExists = i2.isNumberType(searchObj.type) ? _.isEqual(currentVal, searchVal) : _.includes(currentVal, searchVal);
+                    isExists = i2.isNumberType(searchObj.type) ? lodashEs.isEqual(currentVal, searchVal) : lodashEs.includes(currentVal, searchVal);
                     break;
             }
             return isExists;
@@ -2908,13 +2921,13 @@
         // 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';
+                lodashEs.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) {
+            lodashEs.forEach(this.table.columns, (val, col) => {
+                if (lodashEs.toLower(lodashEs.toString(val.showinfilter)) === 'true' && col !== 'rowOperations' && val.searchable) {
                     visibleCols.push(col);
                 }
             });
@@ -2925,7 +2938,7 @@
             if (searchObj.field) {
                 setFilterFields(filterFields, searchObj);
             }
-            else if (!_.isEmpty(searchObj)) {
+            else if (!lodashEs.isEmpty(searchObj)) {
                 const visibleCols = this.getTableVisibleCols();
                 setFilterFields(filterFields, searchObj, visibleCols);
             }
@@ -2934,8 +2947,8 @@
         getFilterFields(searchObj) {
             searchObj = searchObj || {};
             const filterFields = {};
-            if (_.isArray(searchObj)) {
-                _.forEach(searchObj, obj => {
+            if (lodashEs.isArray(searchObj)) {
+                lodashEs.forEach(searchObj, obj => {
                     this.invokeSetFilterfieldBasedOnFieldval(obj, filterFields);
                 });
             }
@@ -2956,11 +2969,11 @@
         // Reset the sort based on sort returned by the call
         resetSortStatus(variableSort) {
             let gridSortString;
-            if (!_.isEmpty(this.table.sortInfo) && this.table.datasource) {
+            if (!lodashEs.isEmpty(this.table.sortInfo) && this.table.datasource) {
                 gridSortString = this.table.sortInfo.field + ' ' + this.table.sortInfo.direction;
                 variableSort = this.table.datasource.execute(i2.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 = lodashEs.head(lodashEs.split(variableSort, ','));
                 }
                 if (gridSortString !== variableSort) {
                     this.table.callDataGridMethod('resetSortIcons');
@@ -2998,7 +3011,7 @@
                 return;
             }
             if (this.table.datasource.execute(i2.DataSource.Operation.SUPPORTS_SERVER_FILTER)) {
-                if (_.isEmpty(this.table.datasource.execute(i2.DataSource.Operation.GET_OPTIONS).filterFields)) {
+                if (lodashEs.isEmpty(this.table.datasource.execute(i2.DataSource.Operation.GET_OPTIONS).filterFields)) {
                     this.clearFilter(true);
                 }
                 this.resetSortStatus(variableSort);
@@ -3014,7 +3027,7 @@
             if (!searchObj) {
                 return data;
             }
-            if (_.isArray(searchObj)) {
+            if (lodashEs.isArray(searchObj)) {
                 searchObj.forEach((obj) => {
                     data = getFilteredData(data, obj, visibleCols);
                 });
@@ -3027,7 +3040,7 @@
         // Returns data sorted using sortObj
         getSortResult(data, sortObj) {
             if (sortObj && sortObj.direction) {
-                data = _.orderBy(data, sortObj.field, sortObj.direction);
+                data = lodashEs.orderBy(data, sortObj.field, sortObj.direction);
             }
             return data;
         }
@@ -3042,7 +3055,7 @@
             else {
                 this.table.sortInfo = searchSortObj;
             }
-            if (_.isObject(data) && !_.isArray(data)) {
+            if (lodashEs.isObject(data) && !lodashEs.isArray(data)) {
                 data = [data];
             }
             /*Both the functions return same 'data' if arguments are undefined*/
@@ -3074,9 +3087,9 @@
             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) => {
+            lodashEs.forEach(this.table.gridData, (value, index) => {
                 const $row = $($rows[index]);
-                if (_.find(data, obj => _.isEqual(obj, value))) {
+                if (lodashEs.find(data, obj => lodashEs.isEqual(obj, value))) {
                     $row.show();
                 }
                 else {
@@ -3147,7 +3160,7 @@
         }
         searchHandler(searchSortObj, e, type, statePersistenceTriggered) {
             let obj;
-            if (_.isArray(searchSortObj)) {
+            if (lodashEs.isArray(searchSortObj)) {
                 obj = searchSortObj.filter(function (searchObject) {
                     return (searchObject.matchMode !== undefined && searchObject.value !== undefined) || (searchObject.value !== undefined && searchObject.field === '');
                 });
@@ -3156,7 +3169,7 @@
                 obj = { field: searchSortObj.field, value: searchSortObj.value, type: searchSortObj.type };
             }
             if (this.table.getConfiguredState() !== 'none' && i4.unsupportedStatePersistenceTypes.indexOf(this.table.navigation) < 0) {
-                if ((_.isArray(searchSortObj) && obj.length) || (searchSortObj.value)) {
+                if ((lodashEs.isArray(searchSortObj) && obj.length) || (searchSortObj.value)) {
                     this.table.statePersistence.removeWidgetState(this.table, 'search');
                     this.table.statePersistence.setWidgetState(this.table, { search: obj });
                 }
@@ -3179,7 +3192,7 @@
             let output;
             const userFilters = {};
             // Transform filter fields from array to object having field names as keys
-            if (_.isArray(filterFields)) {
+            if (lodashEs.isArray(filterFields)) {
                 filterFields.forEach(filterField => {
                     transformFilterField(userFilters, filterField);
                 });
@@ -3194,9 +3207,9 @@
             }
             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 (lodashEs.isEmpty(userFilters) && !lodashEs.isEmpty(obj)) {
+                if (lodashEs.isArray(obj)) {
+                    lodashEs.forEach(obj, searchObj => {
                         addToFilterFields(filterFields, searchObj);
                     });
                 }
@@ -3206,13 +3219,9 @@
             }
             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
-                    });
+                lodashEs.forEach(userFilters, (val, key) => {
+                    // @ts-ignore
+                    filterFields.push({ field: key, matchMode: val.matchMode, type: val.type, value: val.value });
                 });
             }
             if (dataSource && dataSource.execute(i2.DataSource.Operation.SUPPORTS_SERVER_FILTER)) {
@@ -3290,7 +3299,7 @@
             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 (lodashEs.includes(this.table.emptyMatchModes, condition)) {
                 this.table.columns[fieldName].resetFilter();
                 this.table.onRowFilterChange();
             }
@@ -3313,10 +3322,10 @@
             }
             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 = lodashEs.filter(formFields, { 'filteronfilter': fieldName });
+            const newVal = lodashEs.get(this.table.rowFilter, [fieldName, 'value']);
             // Loop over the fields for which the current field is filter on field
-            _.forEach(filterOnFields, filterField => {
+            lodashEs.forEach(filterOnFields, filterField => {
                 const filterOn = filterField.filteronfilter;
                 const filterKey = filterField.field;
                 const filterFields = {};
@@ -3341,13 +3350,13 @@
         // 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 = lodashEs.find(this.table.fullFieldDefs, { 'field': fieldName });
             // Convert row filters to a search object and call search handler
-            _.forEach(this.table.rowFilter, (value, key) => {
-                if ((i2.isDefined(value.value) && value.value !== '') || _.includes(this.table.emptyMatchModes, value.matchMode)) {
+            lodashEs.forEach(this.table.rowFilter, (value, key) => {
+                if ((i2.isDefined(value.value) && value.value !== '') || lodashEs.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 || lodashEs.get(this.table.matchModeTypesMap[value.type], 0);
                     }
                     searchObj.push({
                         field: key,
@@ -3382,17 +3391,17 @@
         static { this.ɵfac = function TableFilterSortDirective_Factory(t) { return new (t || TableFilterSortDirective)(i0__namespace.ɵɵdirectiveInject(TableComponent, 2)); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: TableFilterSortDirective, selectors: [["", "wmTableFilterSort", ""]] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableFilterSortDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableFilterSortDirective, [{
             type: i0.Directive,
             args: [{
                     selector: '[wmTableFilterSort]'
                 }]
-        }], function () { return [{ type: undefined, decorators: [{
+        }], () => [{ type: undefined, decorators: [{
                     type: i0.Self
                 }, {
                     type: i0.Inject,
                     args: [TableComponent]
-                }] }]; }, null); })();
+                }] }], null); })();
 
     const registerProps$4 = () => {
         i4.register('wm-table-action', new Map([
@@ -3421,8 +3430,8 @@
     const WIDGET_CONFIG$4 = { widgetType: 'wm-table-action', hostClass: '' };
     class TableActionDirective extends i4.BaseComponent {
         static { this.initializeProps = registerProps$4(); }
-        constructor(inj, table) {
-            super(inj, WIDGET_CONFIG$4);
+        constructor(inj, table, explicitContext) {
+            super(inj, WIDGET_CONFIG$4, explicitContext);
             this.table = table;
         }
         populateAction() {
@@ -3432,7 +3441,7 @@
                 show: this.show,
                 class: this.class || '',
                 iconclass: this.iconclass || '',
-                title: _.isUndefined(this.title) ? (this['display-name'] || '') : this.title,
+                title: lodashEs.isUndefined(this.title) ? (this['display-name'] || '') : this.title,
                 action: this.action,
                 accessroles: this.accessroles,
                 shortcutkey: this.shortcutkey,
@@ -3464,12 +3473,12 @@
                 this.buttonDef[key] = nv;
             }
         }
-        static { this.ɵfac = function TableActionDirective_Factory(t) { return new (t || TableActionDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(TableComponent, 8)); }; }
+        static { this.ɵfac = function TableActionDirective_Factory(t) { return new (t || TableActionDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(TableComponent, 8), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: TableActionDirective, selectors: [["", "wmTableAction", ""]], features: [i0__namespace.ɵɵProvidersFeature([
                     i4.provideAsWidgetRef(TableActionDirective)
                 ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableActionDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableActionDirective, [{
             type: i0.Directive,
             args: [{
                     selector: '[wmTableAction]',
@@ -3477,9 +3486,14 @@
                         i4.provideAsWidgetRef(TableActionDirective)
                     ]
                 }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: TableComponent, decorators: [{
+        }], () => [{ type: i0__namespace.Injector }, { type: TableComponent, decorators: [{
                     type: i0.Optional
-                }] }]; }, null); })();
+                }] }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], null); })();
 
     const registerProps$3 = () => {
         i4.register('wm-table-column', new Map([
@@ -3493,7 +3507,7 @@
             ['collapsible', i4.PROP_BOOLEAN],
             ['col-ng-class', i4.PROP_STRING],
             ['currencypattern', i4.PROP_STRING],
-            ['customExpression', i4.PROP_BOOLEAN],
+            ['customExpression', i4.PROP_BOOLEAN], // Internal property to check if column has custom expression
             ['dataentrymode', { value: 'default', ...i4.PROP_STRING }],
             ['datafield', i4.PROP_STRING],
             ['dataoptions', i4.PROP_ANY],
@@ -3584,8 +3598,8 @@
     const WIDGET_CONFIG$3 = { widgetType: 'wm-table-column-group', hostClass: '' };
     class TableColumnGroupDirective extends i4.BaseComponent {
         static { this.initializeProps = registerProps$2(); }
-        constructor(inj, group, table) {
-            super(inj, WIDGET_CONFIG$3);
+        constructor(inj, group, table, explicitContext) {
+            super(inj, WIDGET_CONFIG$3, explicitContext);
             this.group = group;
             this.table = table;
             this.config = {};
@@ -3620,12 +3634,12 @@
             const fieldName = this.group && this.group.name;
             i4.setHeaderConfigForTable(this.table.headerConfig, this.config, fieldName, fieldName ? colIndex : headerIndex);
         }
-        static { this.ɵfac = function TableColumnGroupDirective_Factory(t) { return new (t || TableColumnGroupDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(TableColumnGroupDirective, 12), i0__namespace.ɵɵdirectiveInject(TableComponent, 8)); }; }
+        static { this.ɵfac = function TableColumnGroupDirective_Factory(t) { return new (t || TableColumnGroupDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(TableColumnGroupDirective, 12), i0__namespace.ɵɵdirectiveInject(TableComponent, 8), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: TableColumnGroupDirective, selectors: [["", "wmTableColumnGroup", ""]], features: [i0__namespace.ɵɵProvidersFeature([
                     i4.provideAsWidgetRef(TableColumnGroupDirective)
                 ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableColumnGroupDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableColumnGroupDirective, [{
             type: i0.Directive,
             args: [{
                     selector: '[wmTableColumnGroup]',
@@ -3633,13 +3647,18 @@
                         i4.provideAsWidgetRef(TableColumnGroupDirective)
                     ]
                 }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: TableColumnGroupDirective, decorators: [{
+        }], () => [{ type: i0__namespace.Injector }, { type: TableColumnGroupDirective, decorators: [{
                     type: i0.SkipSelf
                 }, {
                     type: i0.Optional
                 }] }, { type: TableComponent, decorators: [{
                     type: i0.Optional
-                }] }]; }, null); })();
+                }] }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], null); })();
 
     const _c0 = ["customExprTmpl"];
     const _c1 = ["inlineWidgetTmpl"];
@@ -3672,8 +3691,8 @@
     }
     class TableColumnDirective extends i4.BaseComponent {
         static { this.initializeProps = registerProps$3(); }
-        constructor(inj, appDefaults, table, group, bindfilterdataset, binddataset) {
-            super(inj, WIDGET_CONFIG$2);
+        constructor(inj, appDefaults, table, group, bindfilterdataset, binddataset, explicitContext) {
+            super(inj, WIDGET_CONFIG$2, explicitContext);
             this.appDefaults = appDefaults;
             this.table = table;
             this.group = group;
@@ -3684,22 +3703,22 @@
             this.observeOnFields = [];
             this.aggregate = {
                 sum: () => {
-                    return _.sum(this._getColumnData());
+                    return lodashEs.sum(this._getColumnData());
                 },
                 average: (precision = 2) => {
-                    return _.round(_.mean(this._getColumnData()), precision);
+                    return lodashEs.round(lodashEs.mean(this._getColumnData()), precision);
                 },
                 count: () => {
                     return this._getColumnData().length;
                 },
                 minimum: () => {
-                    return _.min(this._getColumnData());
+                    return lodashEs.min(this._getColumnData());
                 },
                 maximum: () => {
-                    return _.max(this._getColumnData());
+                    return lodashEs.max(this._getColumnData());
                 },
                 percent: (value, precision = 2) => {
-                    return _.round((_.sum(this._getColumnData()) / value) * 100, precision);
+                    return lodashEs.round((lodashEs.sum(this._getColumnData()) / value) * 100, precision);
                 }
             };
             this.notifyForFields = [];
@@ -3956,7 +3975,7 @@
                     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'] = lodashEs.last(lodashEs.split(this.field, '.'));
                     }
                     if (this.filterwidget === i2.FormWidgetType.AUTOCOMPLETE) {
                         this.filterInstance.dataoptions = i4.getDistinctFieldProperties(this.table.datasource, this);
@@ -3983,11 +4002,11 @@
                 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 = lodashEs.split(this.binding, '.');
                     this.showPendingSpinner = true;
                     i4.fetchRelatedFieldData(dataSource, this.widget, {
-                        relatedField: _.head(bindings),
-                        datafield: _.last(bindings),
+                        relatedField: lodashEs.head(bindings),
+                        datafield: lodashEs.last(bindings),
                         widget: 'edit-widget-type'
                     });
                 }
@@ -4016,7 +4035,7 @@
             this.filterInstance.registerReadyStateListener(() => {
                 if (i4.isDataSetWidget(this.filterwidget)) {
                     // if binding is department.deptId then field will be deptId
-                    const field = _.last(this.binding.split('.'));
+                    const field = lodashEs.last(this.binding.split('.'));
                     this.filterInstance.dataset = this._filterDataSet;
                     this.filterInstance.datafield = this.filterdatafield || field;
                     this.filterInstance.displayfield = this.filterdisplayfield || field;
@@ -4033,7 +4052,7 @@
         }
         // Notifies all the dependent validation controls incase of any changes
         notifyChanges(quickEdit) {
-            _.forEach(this.notifyForFields, field => {
+            lodashEs.forEach(this.notifyForFields, field => {
                 if (quickEdit && this._isNewEditableRow) {
                     field.fieldValidations_new.validate();
                 }
@@ -4044,7 +4063,7 @@
         }
         // Watches control for dependent validation changes
         observeOn(fields) {
-            this.observeOnFields = _.cloneDeep(fields);
+            this.observeOnFields = lodashEs.cloneDeep(fields);
         }
         // Sets the default validators inline and quickedit new row using props
         setUpValidators() {
@@ -4055,11 +4074,11 @@
         }
         // Sets the Async validators on the inline and quickedit new row form control
         setAsyncValidators(validators) {
-            this.asyncValidators = _.cloneDeep(validators);
+            this.asyncValidators = lodashEs.cloneDeep(validators);
         }
         // Sets the default/custom validators on the inline and quickedit new row form control
         setValidators(validators) {
-            this.syncValidators = _.cloneDeep(validators);
+            this.syncValidators = lodashEs.cloneDeep(validators);
         }
         boundFn(fn) {
             return fn();
@@ -4074,7 +4093,7 @@
             this._invokeSummaryRowData(newData);
         }
         _invokeSummaryRowData(data) {
-            _.forEach(data, (item, index) => {
+            lodashEs.forEach(data, (item, index) => {
                 const content = item;
                 if (content instanceof Promise) {
                     content.then(res => {
@@ -4092,7 +4111,7 @@
             });
         }
         _getColumnData() {
-            return _.map(this.table.dataset, this.binding);
+            return lodashEs.map(this.table.dataset, this.binding);
         }
         /* Summary Row Logic end */
         // Set the props on the inline edit widget
@@ -4142,7 +4161,7 @@
             this.limit = this.limit ? +this.limit : undefined;
             this.editWidgetType = this['edit-widget-type'] = this['edit-widget-type'] || i4.getEditModeWidget(this);
             this.filterOn = this['filter-on'];
-            this.readonly = i2.isDefined(this.getAttr('readonly')) ? this.getAttr('readonly') === 'true' : (this['related-entity-name'] ? !this['primary-key'] : _.includes(['identity', 'uniqueid', 'sequence'], this.generator));
+            this.readonly = i2.isDefined(this.getAttr('readonly')) ? this.getAttr('readonly') === 'true' : (this['related-entity-name'] ? !this['primary-key'] : lodashEs.includes(['identity', 'uniqueid', 'sequence'], this.generator));
             this.filterwidget = this.filterwidget || i4.getDataTableFilterWidget(this.type || 'string');
             this.isFilterDataSetBound = !!this.bindfilterdataset;
             this.defaultvalue = i4.getDefaultValue(this.defaultvalue, this.type, this.editWidgetType);
@@ -4168,6 +4187,15 @@
                 case 'caption':
                     this.displayName = nv || '';
                     this.setProperty('displayName', this.displayName);
+                    // Fix for [WMS-25934]: update the headerConfig list when there is change in display name
+                    // when column is inside a group then consider the col index and not header index.
+                    const fieldName = this.group && this.group.name;
+                    const index = fieldName ? parseInt(this.getAttr('index'), 10) : parseInt(this.getAttr('headerIndex'), 10);
+                    // Register column with header config to create group structure
+                    i4.setHeaderConfigForTable(this.table.headerConfig, {
+                        field: this.field,
+                        displayName: this.displayName
+                    }, fieldName, index);
                     break;
                 case 'defaultvalue':
                     this.defaultvalue = i4.getDefaultValue(this.defaultvalue, this.type, this.editWidgetType);
@@ -4206,7 +4234,7 @@
                     this.table.redraw(true);
             }
         }
-        static { this.ɵfac = function TableColumnDirective_Factory(t) { return new (t || TableColumnDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i2__namespace.AppDefaults), i0__namespace.ɵɵdirectiveInject(TableComponent, 8), i0__namespace.ɵɵdirectiveInject(TableColumnGroupDirective, 8), i0__namespace.ɵɵinjectAttribute('filterdataset.bind'), i0__namespace.ɵɵinjectAttribute('dataset.bind')); }; }
+        static { this.ɵfac = function TableColumnDirective_Factory(t) { return new (t || TableColumnDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i2__namespace.AppDefaults), i0__namespace.ɵɵdirectiveInject(TableComponent, 8), i0__namespace.ɵɵdirectiveInject(TableColumnGroupDirective, 8), i0__namespace.ɵɵinjectAttribute('filterdataset.bind'), i0__namespace.ɵɵinjectAttribute('dataset.bind'), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: TableColumnDirective, selectors: [["", "wmTableColumn", ""]], contentQueries: function TableColumnDirective_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
                 i0__namespace.ɵɵcontentQuery(dirIndex, _c0, 5);
                 i0__namespace.ɵɵcontentQuery(dirIndex, _c1, 5);
@@ -4226,7 +4254,7 @@
                     i4.provideAsWidgetRef(TableColumnDirective)
                 ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableColumnDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableColumnDirective, [{
             type: i0.Directive,
             args: [{
                     selector: '[wmTableColumn]',
@@ -4234,7 +4262,7 @@
                         i4.provideAsWidgetRef(TableColumnDirective)
                     ]
                 }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: i2__namespace.AppDefaults }, { type: TableComponent, decorators: [{
+        }], () => [{ type: i0__namespace.Injector }, { type: i2__namespace.AppDefaults }, { type: TableComponent, decorators: [{
                     type: i0.Optional
                 }] }, { type: TableColumnGroupDirective, decorators: [{
                     type: i0.Optional
@@ -4244,7 +4272,12 @@
                 }] }, { type: undefined, decorators: [{
                     type: i0.Attribute,
                     args: ['dataset.bind']
-                }] }]; }, { _filterInstances: [{
+                }] }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], { _filterInstances: [{
                 type: i0.ContentChildren,
                 args: ['filterWidget', { descendants: true }]
             }], _inlineInstances: [{
@@ -4280,8 +4313,8 @@
     const WIDGET_CONFIG$1 = { widgetType: 'wm-table-row', hostClass: '' };
     class TableRowDirective extends i4.BaseComponent {
         static { this.initializeProps = registerProps$1(); }
-        constructor(inj, table) {
-            super(inj, WIDGET_CONFIG$1);
+        constructor(inj, table, explicitContext) {
+            super(inj, WIDGET_CONFIG$1, explicitContext);
             this.table = table;
         }
         populateConfig() {
@@ -4305,12 +4338,12 @@
                 this.config.content = this.content;
             }
         }
-        static { this.ɵfac = function TableRowDirective_Factory(t) { return new (t || TableRowDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(TableComponent, 12)); }; }
+        static { this.ɵfac = function TableRowDirective_Factory(t) { return new (t || TableRowDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(TableComponent, 12), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: TableRowDirective, selectors: [["", "wmTableRow", ""]], features: [i0__namespace.ɵɵProvidersFeature([
                     i4.provideAsWidgetRef(TableRowDirective)
                 ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableRowDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableRowDirective, [{
             type: i0.Directive,
             args: [{
                     selector: '[wmTableRow]',
@@ -4318,11 +4351,16 @@
                         i4.provideAsWidgetRef(TableRowDirective)
                     ]
                 }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: TableComponent, decorators: [{
+        }], () => [{ type: i0__namespace.Injector }, { type: TableComponent, decorators: [{
                     type: i0.Optional
                 }, {
                     type: i0.SkipSelf
-                }] }]; }, null); })();
+                }] }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], null); })();
 
     const registerProps = () => {
         i4.register('wm-table-row-action', new Map([
@@ -4346,15 +4384,15 @@
     const WIDGET_CONFIG = { widgetType: 'wm-table-row-action', hostClass: '' };
     class TableRowActionDirective extends i4.BaseComponent {
         static { this.initializeProps = registerProps(); }
-        constructor(inj, table, contexts) {
-            super(inj, WIDGET_CONFIG);
+        constructor(inj, table, contexts, explicitContext) {
+            super(inj, WIDGET_CONFIG, explicitContext);
             this.table = table;
             contexts[0].editRow = (evt) => this.table.editRow(evt);
             contexts[0].deleteRow = (evt) => this.table.deleteRow(evt);
             contexts[0].addNewRow = (evt) => this.table.addNewRow(evt);
         }
         getTitle() {
-            return _.isUndefined(this.title) ? (this['display-name'] || '') : this.title;
+            return lodashEs.isUndefined(this.title) ? (this['display-name'] || '') : this.title;
         }
         populateAction() {
             this.buttonDef = {
@@ -4380,13 +4418,13 @@
             this.populateAction();
             this.table.registerRowActions(this.buttonDef);
         }
-        static { this.ɵfac = function TableRowActionDirective_Factory(t) { return new (t || TableRowActionDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(TableComponent, 8), i0__namespace.ɵɵdirectiveInject(i4.Context, 2)); }; }
+        static { this.ɵfac = function TableRowActionDirective_Factory(t) { return new (t || TableRowActionDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(TableComponent, 8), i0__namespace.ɵɵdirectiveInject(i4.Context, 2), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: TableRowActionDirective, selectors: [["", "wmTableRowAction", ""]], features: [i0__namespace.ɵɵProvidersFeature([
                     i4.provideAsWidgetRef(TableRowActionDirective),
                     { provide: i4.Context, useFactory: () => { return {}; }, multi: true }
                 ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableRowActionDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableRowActionDirective, [{
             type: i0.Directive,
             args: [{
                     selector: '[wmTableRowAction]',
@@ -4395,14 +4433,19 @@
                         { provide: i4.Context, useFactory: () => { return {}; }, multi: true }
                     ]
                 }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: TableComponent, decorators: [{
+        }], () => [{ type: i0__namespace.Injector }, { type: TableComponent, decorators: [{
                     type: i0.Optional
                 }] }, { type: Array, decorators: [{
                     type: i0.Self
                 }, {
                     type: i0.Inject,
                     args: [i4.Context]
-                }] }]; }, null); })();
+                }] }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], null); })();
 
     const components = [
         TableComponent,
@@ -4429,7 +4472,7 @@
                 tooltip.TooltipModule,
                 i4.WmComponentsModule] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableModule, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableModule, [{
             type: i0.NgModule,
             args: [{
                     imports: [