@wavemaker/app-ng-runtime 11.8.0-rc.5666 → 11.8.0-rc.5668

app-ng-runtime/components/data/table/bundles/index.umd.js

@@ -0,0 +1,4530 @@
+(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'), 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);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n.default = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
+    var i7__namespace = /*#__PURE__*/_interopNamespaceDefault(i7);
+    var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
+    var i6__namespace = /*#__PURE__*/_interopNamespaceDefault(i6);
+    var i4__namespace = /*#__PURE__*/_interopNamespaceDefault(i4);
+    var i5__namespace = /*#__PURE__*/_interopNamespaceDefault(i5);
+    var i8__namespace = /*#__PURE__*/_interopNamespaceDefault(i8);
+    var i9__namespace = /*#__PURE__*/_interopNamespaceDefault(i9);
+    var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
+    var i10__namespace = /*#__PURE__*/_interopNamespaceDefault(i10);
+    var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
+
+    const registerProps$5 = () => {
+        i4.register('wm-table', new Map([
+            ['boundarylinks', { value: false, ...i4.PROP_BOOLEAN }],
+            ['class', i4.PROP_STRING],
+            ['confirmdelete', { value: 'Are you sure you want to delete this?', ...i4.PROP_STRING }],
+            ['datasource', i4.PROP_STRING],
+            ['dataset', i4.PROP_ANY],
+            ['deletecanceltext', i4.PROP_STRING],
+            ['deleteoktext', i4.PROP_STRING],
+            ['deletemessage', { value: 'Record deleted successfully', ...i4.PROP_STRING }],
+            ['directionlinks', { value: true, ...i4.PROP_BOOLEAN }],
+            ['editmode', i4.PROP_STRING],
+            ['errorstyle', { value: 'hover', ...i4.PROP_STRING }],
+            ['enablecolumnselection', { value: false, ...i4.PROP_BOOLEAN }],
+            ['enablesort', { value: true, ...i4.PROP_BOOLEAN }],
+            ['errormessage', i4.PROP_STRING],
+            ['exportformat', i4.PROP_STRING],
+            ['exportdatasize', { value: 100, ...i4.PROP_NUMBER }],
+            ['filtermode', i4.PROP_STRING],
+            ['filteronkeypress', { value: false, ...i4.PROP_BOOLEAN }],
+            ['filternullrecords', { value: true, ...i4.PROP_BOOLEAN }],
+            ['forceellipses', { value: true, ...i4.PROP_BOOLEAN }],
+            ['formposition', i4.PROP_STRING],
+            ['gridclass', { value: 'table-hover', ...i4.PROP_STRING }],
+            ['gridfirstrowselect', i4.PROP_BOOLEAN],
+            ['iconclass', i4.PROP_STRING],
+            ['insertmessage', { value: 'Record added successfully', ...i4.PROP_STRING }],
+            ['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 }],
+            ['maxsize', { value: 5, ...i4.PROP_NUMBER }],
+            ['multiselect', i4.PROP_BOOLEAN],
+            ['name', i4.PROP_STRING],
+            ['navigation', { value: 'Basic', ...i4.PROP_STRING }],
+            ['navigationalign', { value: 'left', ...i4.PROP_STRING }],
+            ['nodatamessage', { value: 'No data found.', ...i4.PROP_STRING }],
+            ['ondemandmessage', { value: 'Load More', ...i4.PROP_STRING }],
+            ['showviewlessbutton', { value: false, ...i4.PROP_BOOLEAN }],
+            ['viewlessmessage', { value: 'View Less', ...i4.PROP_STRING }],
+            ['pagesize', i4.PROP_NUMBER],
+            ['radioselect', i4.PROP_BOOLEAN],
+            ['rowclass', i4.PROP_STRING],
+            ['rowngclass', i4.PROP_STRING],
+            ['searchlabel', { value: 'Search', ...i4.PROP_STRING }],
+            ['show', { value: true, ...i4.PROP_BOOLEAN }],
+            ['showheader', { value: true, ...i4.PROP_BOOLEAN }],
+            ['shownewrow', { value: true, ...i4.PROP_BOOLEAN }],
+            ['showrecordcount', i4.PROP_BOOLEAN],
+            ['showrowindex', i4.PROP_BOOLEAN],
+            ['spacing', { value: 'normal', ...i4.PROP_STRING }],
+            ['statehandler', { value: 'none', ...i4.PROP_STRING }],
+            ['subheading', i4.PROP_STRING],
+            ['tabindex', { value: 0, ...i4.PROP_NUMBER }],
+            ['title', i4.PROP_STRING],
+            ['updatemessage', { value: 'Record updated successfully', ...i4.PROP_STRING }]
+        ]));
+    };
+
+    const _c0$1 = ["rowExpansionTmpl"];
+    const _c1$1 = ["rowActionTmpl"];
+    const _c2$1 = ["filterTmpl"];
+    const _c3$1 = ["inlineWidgetTmpl"];
+    const _c4$1 = ["inlineWidgetTmplNew"];
+    const _c5$1 = ["customExprTmpl"];
+    const _c6 = ["rowExpansionActionTmpl"];
+    const _c7 = ["datagridElement"];
+    const _c8 = ["rowActionsView"];
+    const _c9 = ["multiColumnFilterView"];
+    const _c10 = ["inlineEditView"];
+    const _c11 = ["inlineEditNewView"];
+    const _c12 = ["customExprView"];
+    const _c13 = ["rowDetailView"];
+    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_r0 = i0__namespace.ɵɵnextContext(2);
+        i0__namespace.ɵɵclassMapInterpolate1("app-icon panel-icon ", ctx_r0.iconclass, "");
+    } }
+    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_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_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, 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_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);
+        i0__namespace.ɵɵtemplate(3, TableComponent_div_0_i_3_Template, 1, 3, "i", 22);
+        i0__namespace.ɵɵelementEnd();
+        i0__namespace.ɵɵelementStart(4, "div", 21);
+        i0__namespace.ɵɵelement(5, "div", 23)(6, "div", 24);
+        i0__namespace.ɵɵelementEnd();
+        i0__namespace.ɵɵtemplate(7, TableComponent_div_0_div_7_Template, 3, 2, "div", 25);
+        i0__namespace.ɵɵelementEnd()();
+    } if (rf & 2) {
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵadvance(3);
+        i0__namespace.ɵɵproperty("ngIf", ctx_r0.iconclass);
+        i0__namespace.ɵɵadvance(2);
+        i0__namespace.ɵɵproperty("innerHTML", ctx_r0.title, i0__namespace.ɵɵsanitizeHtml);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("innerHTML", ctx_r0.subheading, i0__namespace.ɵɵsanitizeHtml);
+        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_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, 7, "ng-container", 27);
+        i0__namespace.ɵɵelementEnd();
+    } if (rf & 2) {
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("ngForOf", ctx_r0._actions.footer);
+    } }
+    function TableComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
+        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 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_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 _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 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_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 };
+    const exportIconMapping = {
+        EXCEL: 'fa fa-file-excel-o',
+        CSV: 'fa fa-file-text-o'
+    };
+    const ROW_OPS_FIELD = 'rowOperations';
+    const noop = () => { };
+    const isInputBodyWrapper = target => {
+        const classes = ['.dropdown-menu', '.uib-typeahead-match', '.modal-dialog', '.toast'];
+        let isInput = false;
+        classes.forEach(cls => {
+            if (target.closest(cls).length) {
+                isInput = true;
+                return false;
+            }
+        });
+        const attrs = ['bsdatepickerdaydecorator'];
+        if (!isInput) {
+            attrs.forEach(attr => {
+                if (target[0].hasAttribute(attr)) {
+                    isInput = true;
+                    return false;
+                }
+            });
+        }
+        return isInput;
+    };
+    class TableComponent extends i4.StylableComponent {
+        static { this.initializeProps = registerProps$5(); }
+        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 && lodashEs.isEmpty(newValue)) {
+                return;
+            }
+            this.variableInflight = false;
+            // Fix for [WMS-24108]: Change the status to ready or nodata found when variableInflight is false(after getting the data)
+            if (newValue && (newValue.length) === 0) {
+                this.callDataGridMethod('setStatus', 'nodata', this.nodatamessage);
+            }
+            else {
+                this.callDataGridMethod('setStatus', 'ready');
+            }
+            if (this.gridOptions.isNavTypeScrollOrOndemand()) {
+                // update the _gridData field with the next set of items and modify the current page
+                [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 = lodashEs.floor(this.actionRowIndex % this.pagesize);
+                    this._gridData.splice(this.actionRowIndex, 1, newValue[rowIndex]);
+                }
+                this.setDataGridOption('isLastPage', !!(this.dataNavigator.isDisableNext));
+                // In case of on demand pagination, create the load more button only once and show the button until next page is not disabled
+                if (!this.$element.find('.on-demand-datagrid').length && !this.dataNavigator.isDisableNext && this.onDemandLoad) {
+                    this.gridOptions.addLoadMoreBtn();
+                }
+                else if ((this._gridData && this._gridData.length) && (this.dataNavigator.isDisableNext || !this.isDataLoading)) {
+                    // when the next page is disabled or when the data is not loading remove the loading/load more button accordingly
+                    this.callDataGridMethod('hideLoadingIndicator', this.dataNavigator.isDisableNext, this.infScroll);
+                }
+            }
+            else {
+                this._gridData = newValue;
+            }
+            let startRowIndex = 0;
+            let gridOptions;
+            this._onChange(this._gridData);
+            this._onTouched();
+            if (i2.isDefined(newValue)) {
+                this.gridOptions.bindScrollEvt();
+                /*Setting the serial no's only when show navigation is enabled and data navigator is compiled
+                 and its current page is set properly*/
+                if (this.isNavigationEnabled() && this.dataNavigator.dn.currentPage) {
+                    startRowIndex = ((this.dataNavigator.dn.currentPage - 1) * (this.dataNavigator.maxResults || 1)) + 1;
+                    this.setDataGridOption('startRowIndex', startRowIndex);
+                }
+                /* If colDefs are available, but not already set on the datagrid, then set them.
+                 * This will happen while switching from markup to design tab. */
+                gridOptions = this.callDataGridMethod('getOptions');
+                if (!gridOptions) {
+                    return;
+                }
+                if (!gridOptions.colDefs.length && this.fieldDefs.length) {
+                    this.setDataGridOption('colDefs', i2.getClonedObject(this.fieldDefs));
+                }
+                // If data and colDefs are present, call on before data render event
+                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));
+            }
+        }
+        get gridData() {
+            return this._gridData || [];
+        }
+        get selecteditem() {
+            if (this.multiselect) {
+                return i2.getClonedObject(this.items);
+            }
+            if (lodashEs.isEmpty(this.items)) {
+                return {};
+            }
+            return i2.getClonedObject(this.items[0]);
+        }
+        set selecteditem(val) {
+            // Select the rows in the table based on the new selected items passed
+            this.items.length = 0;
+            this.callDataGridMethod('selectRows', val);
+        }
+        onKeyPress($event) {
+            if ($event.which === 13) {
+                this.invokeEventCallback('enterkeypress', { $event, $data: this.gridData });
+            }
+        }
+        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;
+            this.dynamicComponentProvider = dynamicComponentProvider;
+            this.statePersistence = statePersistence;
+            this.paginationService = paginationService;
+            this.viewport = viewport;
+            this.parentList = parentList;
+            this.binddataset = binddataset;
+            this.binddatasource = binddatasource;
+            this.readonlygrid = readonlygrid;
+            this.ngZone = ngZone;
+            this.trustAsPipe = trustAsPipe;
+            this.rowActionsCompiledTl = {};
+            this.rowFilterCompliedTl = {};
+            this.inlineCompliedTl = {};
+            this.inlineNewCompliedTl = {};
+            this.customExprCompiledTl = {};
+            this.customExprCompiledSummaryTl = {};
+            this.rowDefInstances = {};
+            this.rowDefMap = {};
+            this.rowExpansionActionTl = {};
+            this.columns = {};
+            this.formfields = {};
+            this.enablesort = true;
+            this.showviewlessbutton = false;
+            this.primaryKey = [];
+            this.selectedItems = [];
+            this.selectedItemChange = new rxjs.Subject();
+            this.selectedItemChange$ = this.selectedItemChange.asObservable();
+            this.actions = [];
+            this._actions = {
+                'header': [],
+                'footer': []
+            };
+            this.exportOptions = [];
+            this.headerConfig = [];
+            this.items = [];
+            this.rowActions = [];
+            this.shownavigation = false;
+            this.showFirstRow = false;
+            this.documentClickBind = noop;
+            this.prevFilterExpression = [];
+            this.fieldDefs = [];
+            this.rowDef = {};
+            this.rowInstance = {};
+            this.fullFieldDefs = [];
+            this.variableInflight = true;
+            this.applyProps = new Map();
+            this.redraw = lodashEs.debounce(this._redraw, 150);
+            this.debouncedHandleLoading = lodashEs.debounce(this.handleLoading, 350);
+            // Filter and Sort Methods
+            this.rowFilter = {};
+            this._searchSortHandler = noop;
+            this.searchSortHandler = (...args) => { this._searchSortHandler.apply(this, args); };
+            this.onRowFilterChange = noop;
+            this.onFilterConditionSelect = noop;
+            this.showClearIcon = noop;
+            this.clearRowFilter = noop;
+            this.adjustContainer = noop;
+            this._pageLoad = true;
+            this.gridOptions = {
+                data: [],
+                colDefs: [],
+                startRowIndex: 1,
+                mode: '',
+                sortInfo: {
+                    field: '',
+                    direction: ''
+                },
+                filtermode: '',
+                filteronkeypress: false,
+                searchLabel: '',
+                rowActions: [],
+                headerConfig: [],
+                rowClass: '',
+                editmode: '',
+                formPosition: '',
+                isMobile: false,
+                rowExpansionEnabled: false,
+                rowDef: {
+                    position: '0'
+                },
+                name: '',
+                messages: {
+                    selectField: 'Select Field'
+                },
+                securityUtils: {
+                    pipeTransform: {}
+                },
+                navigation: '',
+                isdynamictable: '',
+                deletedRowIndex: -1,
+                lastActionPerformed: 'scroll',
+                isSearchTrigerred: false,
+                isDatasetUpdated: false,
+                isDataUpdatedByUser: false,
+                showviewlessbutton: false,
+                ondemandmessage: '',
+                viewlessmessage: '',
+                loadingdatamsg: '',
+                isNextPageData: undefined,
+                ACTIONS: {
+                    'DELETE': 'delete',
+                    'EDIT': 'edit',
+                    'SEARCH_OR_SORT': 'search_or_sort',
+                    'DEFAULT': 'scroll',
+                    'FILTER_CRITERIA': 'filter',
+                    'DATASET_UPDATE': 'dataset_update'
+                },
+                actionRowIndex: undefined,
+                actionRowPage: undefined,
+                isLastPage: false,
+                // get the current page number
+                getCurrentPage: () => {
+                    return lodashEs.get(this.dataNavigator, 'dn.currentPage') || 1;
+                },
+                // set the page number
+                setCurrentPage: (pageNum) => {
+                    lodashEs.set(this.dataNavigator, 'dn.currentPage', pageNum || 1);
+                },
+                getDataSource: () => {
+                    return this.datasource;
+                },
+                // get the page limit
+                getPageSize: () => {
+                    return this.pagesize;
+                },
+                getPageCount: () => {
+                    return this.dataNavigator.pageCount;
+                },
+                enableNavigation: () => {
+                    this.dataNavigator.widget.isDisableNext = false;
+                    this.dataNavigator.widget.isDisableLast = false;
+                    this.gridOptions.mode = 'viewless';
+                },
+                // set the deleted row index
+                setDeletedRowIndex: (id) => {
+                    this.setDataGridOption('deletedRowIndex', id);
+                },
+                // sets the last action performed like edit, delete etc.
+                setLastActionPerformed: (action) => {
+                    this.setDataGridOption('lastActionPerformed', action || this.gridOptions.lastActionPerformed);
+                },
+                isNavTypeScrollOrOndemand: () => {
+                    return this.gridOptions.navigation === 'Scroll' || this.gridOptions.navigation === 'On-Demand';
+                },
+                setIsSearchTrigerred: (value) => {
+                    this.setDataGridOption('isSearchTrigerred', value);
+                },
+                setIsDatasetUpdated: (value) => {
+                    this.setDataGridOption('isDatasetUpdated', value);
+                },
+                //  Fix for [WMS-23263]: 'isNextPageData' flag is set to true -> if user fetching the next page data by clicking onLoad more or scroll
+                setIsNextPageData: (value) => {
+                    this.setDataGridOption('isNextPageData', value);
+                },
+                //  Fix for [WMS-23263]: 'isDataUpdatedByUser' flag is set to true -> if user changes the dataset from script
+                setIsDataUpdatedByUser: (value) => {
+                    this.setDataGridOption('isDataUpdatedByUser', value);
+                },
+                onDataRender: () => {
+                    this.ngZone.run(() => {
+                        if (this.gridData.length) {
+                            this.invokeEventCallback('datarender', { $data: this.gridData, data: this.gridData });
+                        }
+                        // select rows selected in previous pages. (Not finding intersection of data and selecteditems as it will be heavy)
+                        if (!this.multiselect) {
+                            this.items.length = 0;
+                        }
+                        this.selectedItems = this.callDataGridMethod('getSelectedRows');
+                        if (this.selectedItems.length) {
+                            this.selectedItemChange.next(this.selectedItems);
+                        }
+                        // On render, apply the filters set for query service variable
+                        if (this._isPageSearch && this.filterInfo) {
+                            this.searchSortHandler(this.filterInfo, undefined, 'search');
+                        }
+                    });
+                },
+                onRowSelect: (row, e) => {
+                    this.ngZone.run(() => {
+                        this.selectedItems = this.callDataGridMethod('getSelectedRows');
+                        if (this.selectedItems.length) {
+                            this.selectedItemChange.next(this.selectedItems);
+                        }
+                        const rowData = this.addRowIndex(row);
+                        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 (lodashEs.get(widgetState, 'selectedItem') && this.multiselect) {
+                                if (!lodashEs.some(widgetState.selectedItem, obj)) {
+                                    widgetState.selectedItem.push(obj);
+                                }
+                                this.statePersistence.setWidgetState(this, { 'selectedItem': widgetState.selectedItem });
+                            }
+                            else {
+                                this.statePersistence.setWidgetState(this, { 'selectedItem': [obj] });
+                            }
+                        }
+                        else {
+                            console.warn('Retain State handling on Widget ' + this.name + ' is not supported for current pagination type.');
+                        }
+                        this.invokeEventCallback('rowselect', { $data: rowData, $event: e, row: rowData });
+                    });
+                },
+                // assigns the items on capture phase of the click handler.
+                assignSelectedItems: (row, e, rowInfo) => {
+                    this.ngZone.run(() => {
+                        /*
+                         * in case of single select, update the items with out changing the reference.
+                         * for multi select, keep old selected items in tact
+                         */
+                        if (this.multiselect) {
+                            //Fix for [WMS-25110]: Add row to items list only if the row is selected
+                            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;
+                                }
+                            }
+                        }
+                        else {
+                            this.items.length = 0;
+                            this.items.push(row);
+                        }
+                    });
+                },
+                onRowDblClick: (row, e) => {
+                    const rowData = this.addRowIndex(row);
+                    this.invokeEventCallback('rowdblclick', { $data: rowData, $event: e, row: rowData });
+                },
+                onRowDeselect: (row, e) => {
+                    if (this.multiselect) {
+                        this.ngZone.run(() => {
+                            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 (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) {
+                                        this.statePersistence.setWidgetState(this, { 'selectedItem': widgetState.selectedItem });
+                                    }
+                                }
+                            }
+                            else {
+                                console.warn('Retain State handling on Widget ' + this.name + ' is not supported for current pagination type.');
+                            }
+                        });
+                    }
+                },
+                callOnRowDeselectEvent: (row, e) => {
+                    this.items = this.selectedItems = this.callDataGridMethod('getSelectedRows');
+                    this.invokeEventCallback('rowdeselect', { $data: row, $event: e, row });
+                },
+                callOnRowClickEvent: (row, e) => {
+                    // WMS-18774: If we invoke navigation action variable on rowclick callback, the navigation is triggering outside angular zone so adding ngZone.run
+                    this.ngZone.run(() => {
+                        // Call row click only if click is triggered by user
+                        if (e && e.hasOwnProperty('originalEvent')) {
+                            const rowData = this.addRowIndex(row);
+                            this.invokeEventCallback('rowclick', { $data: rowData, $event: e, row: rowData });
+                        }
+                    });
+                },
+                closePopover: i2.closePopover,
+                onColumnSelect: (col, e) => {
+                    this.selectedColumns = this.callDataGridMethod('getSelectedColumns');
+                    this.invokeEventCallback('columnselect', { $data: col, $event: e });
+                },
+                onColumnDeselect: (col, e) => {
+                    this.selectedColumns = this.callDataGridMethod('getSelectedColumns');
+                    this.invokeEventCallback('columndeselect', { $data: col, $event: e });
+                },
+                onHeaderClick: (col, e) => {
+                    // if onSort function is registered invoke it when the column header is clicked
+                    this.invokeEventCallback('headerclick', { $event: e, $data: col, column: col });
+                },
+                onRowDelete: (row, cancelRowDeleteCallback, e, callBack, options) => {
+                    this.ngZone.run(() => {
+                        this.deleteRecord(lodashEs.extend({}, options, {
+                            row,
+                            'cancelRowDeleteCallback': cancelRowDeleteCallback,
+                            'evt': e,
+                            'callBack': callBack
+                        }));
+                    });
+                },
+                onRowInsert: (row, e, callBack, options) => {
+                    this.insertRecord(lodashEs.extend({}, options, { row, event: e, 'callBack': callBack }));
+                },
+                beforeRowUpdate: (row, eventName) => {
+                    if (this._liveTableParent) {
+                        this._liveTableParent.updateRow(row, eventName);
+                    }
+                    this.prevData = i2.getClonedObject(row);
+                },
+                afterRowUpdate: (row, e, callBack, options) => {
+                    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 });
+                },
+                onBeforeRowInsert: (row, e, options) => {
+                    return this.invokeEventCallback('beforerowinsert', { $event: e, $data: row, row, options: options });
+                },
+                onBeforeRowDelete: (row, e, options) => {
+                    const rowData = this.addRowIndex(row);
+                    return this.invokeEventCallback('beforerowdelete', { $event: e, row: rowData, options: options });
+                },
+                onFormRender: ($row, e, operation, alwaysNewRow) => {
+                    const widget = alwaysNewRow ? 'inlineInstanceNew' : 'inlineInstance';
+                    setTimeout(() => {
+                        this.formWidgets = {};
+                        this.fieldDefs.forEach(col => {
+                            if (col[widget]) {
+                                this.formWidgets[col.field] = col[widget];
+                                // Adding formwidgets to the context for inlineinstance widget when fieldDefs were ready
+                                if (col[widget].context) {
+                                    col[widget].context.formWidgets = this.formWidgets;
+                                }
+                                this.setDisabledOnField(operation, col, widget);
+                            }
+                        });
+                        this.invokeEventCallback('formrender', { $event: e, formWidgets: this.formWidgets, $operation: operation });
+                    }, 250);
+                },
+                onBeforeFormRender: (row, e, operation) => {
+                    return this.invokeEventCallback('beforeformrender', { $event: e, row, $operation: operation });
+                },
+                registerRowNgClassWatcher: (rowData, index) => {
+                    if (!this.rowngclass) {
+                        return;
+                    }
+                    const row = this.getClonedRowObject(rowData);
+                    const watchName = `${this.widgetId}_rowNgClass_${index}`;
+                    i2.$unwatch(watchName);
+                    //[Todo-CSP]: generate watcher expr in page if rowngclass attr is present for table
+                    this.registerDestroyListener(i2.$watch(this.rowngclass, this.viewParent, { row }, (nv, ov) => {
+                        this.callDataGridMethod('applyRowNgClass', i4.getConditionalClasses(nv, ov), index);
+                    }, watchName));
+                },
+                registerColNgClassWatcher: (rowData, colDef, rowIndex, colIndex) => {
+                    if (!colDef['col-ng-class']) {
+                        return;
+                    }
+                    const row = this.getClonedRowObject(rowData);
+                    const watchName = `${this.widgetId}_colNgClass_${rowIndex}_${colIndex}`;
+                    i2.$unwatch(watchName);
+                    //[Todo-CSP]: generate watcher expr in page if col-ng-class attr is present for table
+                    this.registerDestroyListener(i2.$watch(colDef['col-ng-class'], this.viewParent, { row }, (nv, ov) => {
+                        this.callDataGridMethod('applyColNgClass', i4.getConditionalClasses(nv, ov), rowIndex, colIndex);
+                    }, watchName));
+                },
+                clearCustomExpression: () => {
+                    this.customExprViewRef.clear();
+                    this.customExprCompiledTl = {};
+                    this.customExprCompiledSummaryTl = {};
+                },
+                clearRowDetailExpression: () => {
+                    this.rowDetailViewRef.clear();
+                    this.rowDefMap = {};
+                    this.rowDefInstances = {};
+                },
+                generateCustomExpressions: (rowData, index, summaryRow) => {
+                    const row = this.getClonedRowObject(rowData);
+                    const compileTemplate = (tmpl) => {
+                        if (!tmpl) {
+                            return;
+                        }
+                        const colDef = {};
+                        const context = {
+                            row,
+                            colDef
+                        };
+                        this.addEventsToContext(context);
+                        const customExprView = this.customExprViewRef.createEmbeddedView(tmpl, context);
+                        const rootNode = customExprView.rootNodes[0];
+                        const fieldName = rootNode.getAttribute('data-col-identifier');
+                        lodashEs.extend(colDef, this.columns[fieldName]);
+                        if (!summaryRow) {
+                            this.customExprCompiledTl[fieldName + index] = rootNode;
+                        }
+                        else {
+                            this.customExprCompiledSummaryTl[fieldName + index] = rootNode;
+                        }
+                    };
+                    if (this.isdynamictable) {
+                        this.fieldDefs.forEach(col => {
+                            compileTemplate(col.customExprTmpl);
+                        });
+                        return;
+                    }
+                    // For all the columns inside the table, generate the custom expression
+                    this.customExprTmpl.forEach(compileTemplate.bind(this));
+                },
+                generateRowExpansionCell: (rowData, index) => {
+                    const row = this.getClonedRowObject(rowData);
+                    // For all the columns inside the table, generate the inline widget
+                    this.rowExpansionActionTmpl.forEach((tmpl) => {
+                        this.rowExpansionActionTl[index] = this.rowExpansionActionViewRef.createEmbeddedView(tmpl, { row }).rootNodes;
+                    });
+                },
+                getRowExpansionAction: (index) => {
+                    return this.rowExpansionActionTl[index];
+                },
+                generateRowDetailView: ($event, rowData, rowId, $target, $overlay, callback) => {
+                    const row = this.getClonedRowObject(rowData);
+                    const rowDef = i2.getClonedObject(this.rowDef);
+                    if (this.rowInstance.invokeEventCallback('beforerowexpand', { $event, $data: rowDef, row }) === false) {
+                        return;
+                    }
+                    if (!rowDef.content) {
+                        return;
+                    }
+                    // Expand the row detail
+                    callback();
+                    // Row is already rendered. Return here
+                    if (this.rowDefMap[rowId] && this.rowDefMap[rowId].content === rowDef.content) {
+                        this.rowInstance.invokeEventCallback('rowexpand', { $event, row, $data: this.rowDefInstances[rowId] });
+                        return;
+                    }
+                    this.rowDefMap[rowId] = rowDef;
+                    $target.empty();
+                    $target.hide();
+                    $overlay.show();
+                    const context = {
+                        row,
+                        rowDef,
+                        containerLoad: (widget) => {
+                            setTimeout(() => {
+                                $overlay.hide();
+                                $target.show();
+                                this.rowDefInstances[rowId] = widget;
+                                this.rowInstance.invokeEventCallback('rowexpand', { $event, row, $data: widget });
+                            }, 500);
+                        }
+                    };
+                    const rootNode = this.rowDetailViewRef.createEmbeddedView(this.rowExpansionTmpl, context).rootNodes[0];
+                    $target[0].appendChild(rootNode);
+                    i2.$appDigest();
+                },
+                onBeforeRowCollapse: ($event, row, rowId) => {
+                    return this.rowInstance.invokeEventCallback('beforerowcollapse', { $event, row, $data: this.rowDefInstances[rowId] });
+                },
+                onRowCollapse: ($event, row) => {
+                    this.rowInstance.invokeEventCallback('rowcollapse', { $event, row });
+                },
+                getCustomExpression: (fieldName, index, summaryRow) => {
+                    let customExpression;
+                    if (!summaryRow) {
+                        customExpression = this.customExprCompiledTl[fieldName + index];
+                    }
+                    else {
+                        customExpression = this.customExprCompiledSummaryTl[fieldName + index];
+                    }
+                    return customExpression || '';
+                },
+                clearRowActions: () => {
+                    this.rowActionsViewRef.clear();
+                    this.rowActionsCompiledTl = {};
+                    this.rowExpansionActionViewRef.clear();
+                    this.rowExpansionActionTl = {};
+                },
+                generateRowActions: (rowData, index) => {
+                    const row = this.getClonedRowObject(rowData);
+                    this.rowActionsCompiledTl[index] = [];
+                    // For all the columns inside the table, generate the inline widget
+                    this.rowActionTmpl.forEach((tmpl) => {
+                        this.rowActionsCompiledTl[index].push(...this.rowActionsViewRef.createEmbeddedView(tmpl, { row }).rootNodes);
+                    });
+                },
+                getRowAction: (index) => {
+                    return this.rowActionsCompiledTl[index];
+                },
+                generateInlineEditRow: (rowData, alwaysNewRow) => {
+                    const row = this.getClonedRowObject(rowData);
+                    if (alwaysNewRow) {
+                        // Clear the view container ref
+                        this.inlineEditNewViewRef.clear();
+                        this.inlineNewCompliedTl = {};
+                        // For all the columns inside the table, generate the inline widget
+                        this.inlineWidgetNewTmpl.forEach(tmpl => {
+                            let fieldName;
+                            const context = {
+                                row,
+                                getControl: () => {
+                                    return this.ngform.controls[fieldName + '_new'] || {};
+                                },
+                                getValidationMessage: () => {
+                                    return this.columns[fieldName] && this.columns[fieldName].validationmessage;
+                                },
+                                getPendingSpinnerStatusNew: () => {
+                                    return this.columns[fieldName] && this.columns[fieldName].showPendingSpinnerNew;
+                                }
+                            };
+                            const rootNode = this.inlineEditNewViewRef.createEmbeddedView(tmpl, context).rootNodes[0];
+                            fieldName = rootNode.getAttribute('data-col-identifier');
+                            this.inlineNewCompliedTl[fieldName] = rootNode;
+                        });
+                        this.clearForm(true);
+                        return;
+                    }
+                    // Clear the view container ref
+                    this.inlineEditViewRef.clear();
+                    this.inlineCompliedTl = {};
+                    this.clearForm();
+                    // For all the columns inside the table, generate the inline widget
+                    this.inlineWidgetTmpl.forEach(tmpl => {
+                        let fieldName;
+                        const context = {
+                            row,
+                            getControl: () => {
+                                return this.ngform.controls[fieldName] || {};
+                            },
+                            getValidationMessage: () => {
+                                return this.columns[fieldName] && this.columns[fieldName].validationmessage;
+                            },
+                            getPendingSpinnerStatus: () => {
+                                return this.columns[fieldName] && this.columns[fieldName].showPendingSpinner;
+                            }
+                        };
+                        const rootNode = this.inlineEditViewRef.createEmbeddedView(tmpl, context).rootNodes[0];
+                        fieldName = rootNode.getAttribute('data-col-identifier');
+                        this.inlineCompliedTl[fieldName] = rootNode;
+                    });
+                },
+                getInlineEditWidget: (fieldName, value, alwaysNewRow) => {
+                    if (alwaysNewRow) {
+                        this.gridOptions.setFieldValue(fieldName + '_new', value);
+                        return this.inlineNewCompliedTl[fieldName];
+                    }
+                    this.gridOptions.setFieldValue(fieldName, value);
+                    return this.inlineCompliedTl[fieldName];
+                },
+                setFieldValue: (fieldName, value) => {
+                    const control = this.ngform.controls && this.ngform.controls[fieldName];
+                    if (control) {
+                        control.setValue(value);
+                    }
+                },
+                getFieldValue: fieldName => {
+                    const control = this.ngform.controls && this.ngform.controls[fieldName];
+                    return control && control.value;
+                },
+                // function to add load more button to table
+                addLoadMoreBtn: () => {
+                    this.callDataGridMethod('addLoadMoreBtn', this.ondemandmessage, this.loadingdatamsg, ($event) => {
+                        this.gridOptions.setIsNextPageData(true);
+                        this.gridOptions.setIsDataUpdatedByUser(false);
+                        if (this.gridOptions.mode === 'viewless') {
+                            this.dataNavigator.navigatePage('first', $event, true);
+                            this.gridOptions.mode = '';
+                        }
+                        else {
+                            this.dataNavigator.navigatePage('next', $event);
+                            this.isDataLoading = true;
+                        }
+                    }, this.infScroll);
+                },
+                // function to bind scroll event
+                bindScrollEvt: () => {
+                    if (this._gridData && this._gridData.length && this.infScroll) {
+                        // smoothscroll events will be binded.
+                        // Added timeout as the table html is rendered at runtime
+                        setTimeout(() => {
+                            this.paginationService.bindScrollEvt(this, 'tbody', i4.DEBOUNCE_TIMES.PAGINATION_DEBOUNCE_TIME);
+                        }, 0);
+                    }
+                },
+                generateFilterRow: () => {
+                    // Clear the view container ref
+                    this.filterViewRef.clear();
+                    this.rowFilterCompliedTl = {};
+                    // For all the columns inside the table, generate the compiled filter template
+                    this.filterTmpl.forEach((tmpl) => {
+                        const rootNode = this.filterViewRef.createEmbeddedView(tmpl, {
+                            changeFn: this.onRowFilterChange.bind(this),
+                            isDisabled: (fieldName) => {
+                                return this.emptyMatchModes.indexOf(this.rowFilter[fieldName] && this.rowFilter[fieldName].matchMode) > -1;
+                            }
+                        }).rootNodes[0];
+                        this.rowFilterCompliedTl[rootNode.getAttribute('data-col-identifier')] = rootNode;
+                    });
+                },
+                getFilterWidget: (fieldName) => {
+                    // Move the generated filter template to the filter row
+                    return this.rowFilterCompliedTl[fieldName];
+                },
+                setGridEditMode: (val) => {
+                    this.ngZone.run(() => {
+                        this.isGridEditMode = val;
+                        i2.$appDigest();
+                    });
+                },
+                setGridState: (val) => {
+                    this.isLoading = val === 'loading';
+                },
+                /*
+                    set actionRowIndex and actionRowPage values
+                    actionRowIndex will have the row index in the dataset on which edit/delete operation is being performed
+                    actionRowPage will have page number in which the action row index is present
+                 */
+                setActionRowIndex: (val) => {
+                    if (this.gridOptions.isNavTypeScrollOrOndemand()) {
+                        this.actionRowIndex = parseInt(val);
+                        this.setDataGridOption('actionRowIndex', this.actionRowIndex);
+                        if (!lodashEs.isNaN(this.actionRowIndex)) {
+                            this.actionRowPage = Math.floor(this.actionRowIndex / this.pagesize) + 1;
+                            this.setDataGridOption('actionRowPage', this.actionRowPage || this.gridOptions.actionRowPage);
+                        }
+                    }
+                },
+                clearActionRowIndex: () => {
+                    if (!this.isRowDeleted && (this.infScroll || this.onDemandLoad)) {
+                        this.clearActionRowVars();
+                    }
+                },
+                noChangesDetected: () => {
+                    this.toggleMessage(true, 'info', 'No Changes Detected', '');
+                },
+                // Function to redraw the widgets on resize of columns
+                redrawWidgets: () => {
+                    this.fieldDefs.forEach(col => {
+                        i2.triggerFn(col.inlineInstance && col.inlineInstance.redraw);
+                        i2.triggerFn(col.inlineInstanceNew && col.inlineInstanceNew.redraw);
+                        i2.triggerFn(col.filterInstance && col.filterInstance.redraw);
+                    });
+                },
+                searchHandler: this.searchSortHandler.bind(this),
+                sortHandler: this.searchSortHandler.bind(this),
+                timeoutCall: (fn, delay) => {
+                    setTimeout(fn, delay);
+                },
+                runInNgZone: fn => {
+                    this.ngZone.run(fn);
+                },
+                safeApply: () => {
+                    i2.$appDigest();
+                },
+                setTouched: (name) => {
+                    const ctrl = this.ngform.controls[name];
+                    if (ctrl) {
+                        ctrl.markAsTouched();
+                    }
+                },
+                clearForm: this.clearForm.bind(this),
+                callLoadInlineWidgetData: () => {
+                    this.fullFieldDefs.forEach(col => {
+                        if (lodashEs.isUndefined(col.isDataSetBound)) {
+                            i2.triggerFn(col.loadInlineWidgetData && col.loadInlineWidgetData.bind(col));
+                        }
+                    });
+                },
+                // Function to apply validators to Inline form controls
+                applyValidations: (col, alwaysNewRow) => {
+                    if (alwaysNewRow) {
+                        i2.triggerFn(col.applyNewRowValidations && col.applyNewRowValidations.bind(col));
+                    }
+                    else {
+                        i2.triggerFn(col.applyValidations && col.applyValidations.bind(col));
+                    }
+                },
+                // Function to remove validators and set form state to untouched for inline form control
+                removeValidations: (alwaysNewRow) => {
+                    this.fullFieldDefs.forEach(col => {
+                        if (!col.readonly && col.binding !== 'rowOperations') {
+                            if (alwaysNewRow) {
+                                i2.triggerFn(col.removeNewRowValidations && col.removeNewRowValidations.bind(col));
+                            }
+                            else {
+                                i2.triggerFn(col.removeValidations && col.removeValidations.bind(col));
+                            }
+                        }
+                    });
+                }
+            };
+            this._selectedItemsExist = false;
+            this._onChange = () => { };
+            this._onTouched = () => { };
+            i4.styler(this.nativeElement, this);
+            this.ngform = fb.group({});
+            this.addEventsToContext(this.context);
+            const listenersToRemove = [
+                // Updates pagination, filter, sort etc options for service and crud variables
+                this.app.subscribe('check-state-persistence-options', options => {
+                    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 (lodashEs.get(options, 'variable.name') !== dataSourceName) {
+                        return;
+                    }
+                    if (this._pageLoad && this.getConfiguredState() !== 'none') {
+                        this._pageLoad = false;
+                        const widgetState = this.statePersistence.getWidgetState(this);
+                        if (widgetState) {
+                            options = this.handleStateParams(widgetState, options);
+                        }
+                        else {
+                            this.setDataGridOption('selectFirstRow', this.gridfirstrowselect);
+                        }
+                    }
+                }),
+                // Show loading status based on the variable life cycle
+                this.app.subscribe('toggle-variable-state', options => {
+                    if (this.datasource && this.datasource.execute(i2.DataSource.Operation.IS_API_AWARE) && i2.isDataSourceEqual(options.variable, this.datasource)) {
+                        if (this._pageLoad && this.getConfiguredState() !== 'none') {
+                            this._pageLoad = false;
+                            const widgetState = this.statePersistence.getWidgetState(this);
+                            if (widgetState) {
+                                options = this.handleStateParams(widgetState, options);
+                            }
+                            else {
+                                this.setDataGridOption('selectFirstRow', this.gridfirstrowselect);
+                            }
+                        }
+                        i2.isDefined(this.variableInflight) ? this.debouncedHandleLoading(options) : this.handleLoading(options);
+                    }
+                }),
+                this.app.subscribe('setup-cud-listener', param => {
+                    if (this.name !== param) {
+                        return;
+                    }
+                    this._isDependent = true;
+                    this.selectedItemChange$
+                        .pipe(operators.debounceTime(250))
+                        .subscribe(this.triggerWMEvent.bind(this));
+                })
+            ];
+            listenersToRemove.forEach(l => this.registerDestroyListener(l));
+            this.deleteoktext = this.appLocale.LABEL_OK;
+            this.deletecanceltext = this.appLocale.LABEL_CANCEL;
+        }
+        ngAfterContentInit() {
+            super.ngAfterContentInit();
+            this.headerConfig = this.headerConfig.filter(this.filterEmptyValues.bind(this));
+            lodashEs.remove(this.fieldDefs, f => f === undefined);
+            const runModeInitialProperties = {
+                showrowindex: 'showRowIndex',
+                multiselect: 'multiselect',
+                radioselect: 'showRadioColumn',
+                filternullrecords: 'filterNullRecords',
+                enablesort: 'enableSort',
+                showheader: 'showHeader',
+                enablecolumnselection: 'enableColumnSelection',
+                shownewrow: 'showNewRow',
+                gridfirstrowselect: 'selectFirstRow'
+            };
+            if (this._liveTableParent) {
+                this.isPartOfLiveGrid = true;
+            }
+            if (this.readonlygrid || !this.editmode) {
+                if (this.readonlygrid === 'true') {
+                    this.editmode = '';
+                }
+                else {
+                    if (this.isPartOfLiveGrid) {
+                        this.editmode = this.isPartOfLiveGrid.formlayout === 'inline' ? i4.EDIT_MODE.FORM : i4.EDIT_MODE.DIALOG;
+                    }
+                    else {
+                        this.editmode = this.readonlygrid ? i4.EDIT_MODE.INLINE : '';
+                    }
+                }
+            }
+            this.gridOptions.colDefs = this.fullFieldDefs;
+            this.gridOptions.rowActions = this.rowActions;
+            this.gridOptions.headerConfig = this.headerConfig;
+            this.gridOptions.rowClass = this.rowclass;
+            this.gridOptions.editmode = this.editmode;
+            this.gridOptions.formPosition = this.formposition;
+            this.gridOptions.filtermode = this.filtermode;
+            this.gridOptions.filteronkeypress = this.filteronkeypress;
+            this.gridOptions.searchLabel = this.searchlabel;
+            this.gridOptions.isMobile = i2.isMobile();
+            this.gridOptions.name = this.name;
+            this.gridOptions.securityUtils.pipeTransform = this.trustAsPipe;
+            this.gridOptions.navigation = this.navigation;
+            this.gridOptions.isdynamictable = this.isdynamictable;
+            this.gridOptions.showviewlessbutton = this.showviewlessbutton;
+            this.gridOptions.ondemandmessage = this.ondemandmessage;
+            this.gridOptions.viewlessmessage = this.viewlessmessage;
+            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 (!lodashEs.isEmpty(this.gridData)) {
+                this.gridOptions.data = i2.getClonedObject(this.gridData);
+            }
+            this.gridOptions.messages = {
+                'selectField': this.appLocale.MESSAGE_SELECT_FIELD
+            };
+            this.datagridElement = $(this._tableElement.nativeElement);
+            this.gridElement = this.$element;
+            this.$element.css({ 'position': 'relative' });
+            lodashEs.forEach(runModeInitialProperties, (value, key) => {
+                if (i2.isDefined(this[key])) {
+                    this.gridOptions[value] = (this[key] === 'true' || this[key] === true);
+                }
+            });
+            if (this.statehandler !== 'none') {
+                this.gridOptions['selectFirstRow'] = false;
+            }
+            this.renderOperationColumns();
+            this.gridOptions.colDefs = this.fieldDefs;
+            this.datagridElement.datatable(this.gridOptions);
+            this.callDataGridMethod('setStatus', 'loading', this.loadingdatamsg);
+            // if(this.gridOptions.data.length || this.variableInflight) {
+            //     this.callDataGridMethod('setStatus', 'loading', this.loadingdatamsg);
+            // } else {
+            //     this.callDataGridMethod('setStatus', 'nodata', this.nodatamessage);
+            // }
+            this.applyProps.forEach(args => this.callDataGridMethod(...args));
+            if (this.editmode === i4.EDIT_MODE.QUICK_EDIT) {
+                this.documentClickBind = this._documentClickBind.bind(this);
+                document.addEventListener('click', this.documentClickBind);
+            }
+        }
+        getConfiguredState() {
+            const mode = this.statePersistence.computeMode(this.statehandler);
+            return mode && mode.toLowerCase();
+        }
+        handleStateParams(widgetState, options) {
+            if (lodashEs.get(widgetState, 'selectedItem')) {
+                this._selectedItemsExist = true;
+            }
+            options.options = options.options || {};
+            if (lodashEs.get(widgetState, 'pagination')) {
+                options.options.page = widgetState.pagination;
+                if (lodashEs.get(widgetState, 'sort')) {
+                    this.sortStateHandler(widgetState);
+                    options.options.orderBy = lodashEs.get(widgetState, 'sort.field') + ' ' + lodashEs.get(widgetState, 'sort.direction');
+                }
+                if (lodashEs.get(widgetState, 'search')) {
+                    setTimeout(() => {
+                        this.searchStateHandler(widgetState);
+                    }, 500);
+                    options.options.filterFields = this.getFilterFields(widgetState.search);
+                }
+            }
+            else {
+                options.options.page = 1;
+                if (lodashEs.get(widgetState, 'search')) {
+                    setTimeout(() => {
+                        this.searchStateHandler(widgetState);
+                    }, 500);
+                    options.options.filterFields = this.getFilterFields(widgetState.search);
+                }
+                if (lodashEs.get(widgetState, 'sort')) {
+                    this.sortStateHandler(widgetState);
+                    options.options.orderBy = lodashEs.get(widgetState, 'sort.field') + ' ' + lodashEs.get(widgetState, 'sort.direction');
+                }
+            }
+            return options;
+        }
+        triggerWMEvent(newVal) {
+            if (this.editmode === 'dialog') {
+                return;
+            }
+            i2.$invokeWatchers(true);
+            this.app.notify('wm-event', { eventName: 'selectedItemChange', widgetName: this.name, row: newVal, table: this });
+        }
+        sortStateHandler(widgetState) {
+            const $gridElement = this.datagridElement;
+            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 (lodashEs.get(widgetState, 'sort.direction') === 'desc' && $sortIcon.length) {
+                $sortIcon.addClass('desc wi wi-long-arrow-down');
+            }
+        }
+        searchStateHandler(widgetState) {
+            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;
+                        this.rowFilter[filterObj.field].type = filterObj.type;
+                        if ($(this.rowFilterCompliedTl[filterObj.field]).length) {
+                            filterObj.type === 'integer' ? parseInt(filterObj.value) : filterObj.value;
+                            $(this.rowFilterCompliedTl[filterObj.field]).find('input').val(filterObj.value);
+                        }
+                    }
+                });
+            }
+            else {
+                const $gridElement = this.datagridElement;
+                $gridElement.find('[data-element="dgSearchText"]').val(widgetState.search.value);
+                $gridElement.find('[data-element="dgFilterValue"]').val(widgetState.search.field);
+            }
+        }
+        // removes empty values in headerConfig array.
+        filterEmptyValues(item) {
+            if (item.columns) {
+                item.columns = item.columns.filter(this.filterEmptyValues.bind(this));
+            }
+            return item !== undefined;
+        }
+        // Compares the prevFilterCriteria Rules with the new rules
+        compareFilterExpressions(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 = 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);
+        }
+        // Set the table lastActionPerformed to Dataset update and set isDatasetUpdated to true
+        // Fix for [WMS-22323]-this method is called when dataset is being updated
+        setLastActionToDatasetUpdate() {
+            this.gridOptions.setLastActionPerformed(this.gridOptions.ACTIONS.DATASET_UPDATE);
+            //  Fix for [WMS-23263]: reset currentPage to 1 as dataset is being changed
+            this.gridOptions.setCurrentPage(1);
+            this.gridOptions.setIsDatasetUpdated(true);
+        }
+        // Update the lastActionPerformed to Filter_Criteria, when there is change in the Variable filter criteria rules
+        checkIfVarFiltersApplied() {
+            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();
+                }
+            }
+        }
+        watchVariableDataSet(newVal) {
+            let result;
+            // Check for Variable filters if applied
+            if (this.gridOptions.isNavTypeScrollOrOndemand()) {
+                this.checkIfVarFiltersApplied();
+            }
+            // State handling for static variables
+            if (lodashEs.get(this.datasource, 'category') === 'wm.Variable' && this._pageLoad && this.getConfiguredState() !== 'none') {
+                const widgetState = this.statePersistence.getWidgetState(this);
+                this._pageLoad = false;
+                if (lodashEs.get(widgetState, 'selectedItem')) {
+                    this._selectedItemsExist = true;
+                }
+                else {
+                    this.setDataGridOption('selectFirstRow', this.gridfirstrowselect);
+                }
+                if (lodashEs.get(widgetState, 'search')) {
+                    this.searchStateHandler(widgetState);
+                    this.searchSortHandler(widgetState.search, undefined, 'search', true);
+                }
+                if (lodashEs.get(widgetState, 'sort')) {
+                    this.searchSortHandler(widgetState.sort, undefined, 'sort', true);
+                    this.sortStateHandler(widgetState);
+                }
+                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 && lodashEs.isUndefined(newVal) && this.__fullData) {
+                return;
+            }
+            // If variable is in loading state, show loading icon
+            if (this.variableInflight && !this.infScroll) {
+                this.callDataGridMethod('setStatus', 'loading', this.loadingdatamsg);
+            }
+            result = i2.getValidJSON(newVal);
+            // Converting newval to object if it is an Object that comes as a string "{"data" : 1}"
+            if (result) {
+                newVal = result;
+            }
+            const sortExp = this.getSortExpr();
+            const sortExpArr = sortExp.split(' ');
+            if (sortExp && sortExpArr.length) {
+                this.sortInfo = {
+                    direction: sortExpArr[1],
+                    field: sortExpArr[0]
+                };
+            }
+            /*Return if data is invalid.*/
+            if (!this.isDataValid()) {
+                return;
+            }
+            // If value is empty or in studio mode, dont enable the navigation
+            if (newVal) {
+                if (this.shownavigation && !this.dataNavigatorWatched) {
+                    this.enablePageNavigation();
+                    return;
+                }
+            }
+            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 || 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*/
+                if (!this.variableInflight) {
+                    this.callDataGridMethod('setStatus', 'nodata', this.nodatamessage);
+                }
+                this.setDataGridOption('selectFirstRow', this.gridfirstrowselect);
+            }
+            if (!this.isNavigationEnabled() && newVal) {
+                this.checkFiltersApplied(this.getSortExpr());
+            }
+            // @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([]);
+                }
+                return;
+            }
+            if (newVal) {
+                this.populateGridData(newVal);
+            }
+        }
+        ngOnDestroy() {
+            document.removeEventListener('click', this.documentClickBind);
+            if (this.navigatorResultWatch) {
+                this.navigatorResultWatch.unsubscribe();
+            }
+            if (this.navigatorMaxResultWatch) {
+                this.navigatorMaxResultWatch.unsubscribe();
+            }
+            super.ngOnDestroy();
+        }
+        addRowIndex(row) {
+            const rowData = i2.getClonedObject(row);
+            const rowIndex = lodashEs.indexOf(this.gridOptions.data, row);
+            if (rowIndex < 0) {
+                return row;
+            }
+            rowData.$index = rowIndex + 1;
+            rowData.$isFirst = rowData.$index === 1;
+            rowData.$isLast = this.gridData.length === rowData.$index;
+            return rowData;
+        }
+        addEventsToContext(context) {
+            context.addNewRow = () => this.addNewRow();
+            context.deleteRow = () => this.deleteRow();
+            context.editRow = () => this.editRow();
+        }
+        execute(operation, options) {
+            if ([i2.DataSource.Operation.IS_API_AWARE, i2.DataSource.Operation.IS_PAGEABLE, i2.DataSource.Operation.SUPPORTS_SERVER_FILTER].includes(operation)) {
+                return false;
+            }
+            return this.datasource ? this.datasource.execute(operation, options) : {};
+        }
+        isNavigationEnabled() {
+            return this.shownavigation && this.dataNavigator && this.dataNavigatorWatched;
+        }
+        getClonedRowObject(rowData) {
+            const row = i2.getClonedObject(rowData);
+            row.getProperty = field => {
+                return lodashEs.get(row, field);
+            };
+            row.$isFirst = row.$index === 1;
+            row.$isLast = this.gridData.length === row.$index;
+            delete row.$$index;
+            delete row.$$pk;
+            return row;
+        }
+        handleLoading(data) {
+            this.variableInflight = data.active;
+            // based on the active state and response toggling the 'loading data...' and 'no data found' messages.
+            if (data.active) {
+                this.callDataGridMethod('setStatus', 'loading', this.loadingdatamsg);
+            }
+            else {
+                // If grid is in edit mode or grid has data, dont show the no data message
+                if (!this.isGridEditMode && lodashEs.isEmpty(this.dataset)) {
+                    this.callDataGridMethod('setStatus', 'nodata', this.nodatamessage);
+                }
+                else {
+                    this.callDataGridMethod('setStatus', 'ready');
+                }
+            }
+        }
+        setDisabledOnField(operation, colDef, widgetType) {
+            if (operation !== 'new' && colDef['primary-key'] && colDef.generator === 'assigned' && !colDef['related-entity-name'] && !colDef.period) {
+                colDef[widgetType].disabled = true;
+            }
+        }
+        resetFormControl(ctrl) {
+            ctrl.markAsUntouched();
+            ctrl.markAsPristine();
+        }
+        clearForm(newRow) {
+            const ctrls = this.ngform.controls;
+            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('');
+                    this.resetFormControl(ctrls[key]);
+                }
+            });
+        }
+        showFieldBasedOnScreenType(field) {
+            let showField;
+            if (i2.isMobile() && this.viewport.isMobileType) {
+                showField = field.mobileDisplay;
+            }
+            else if (this.viewport.isTabletType) {
+                showField = field.tabletDisplay;
+            }
+            else {
+                showField = field.pcDisplay;
+            }
+            return showField;
+        }
+        /* Check whether it is non-empty row. */
+        isEmptyRecord(record) {
+            const properties = Object.keys(record);
+            let data, isDisplayed;
+            return properties.every((prop, index) => {
+                data = record[prop];
+                /* If fieldDefs are missing, show all columns in data. */
+                isDisplayed = (this.fieldDefs.length && i2.isDefined(this.fieldDefs[index]) && this.showFieldBasedOnScreenType(this.fieldDefs[index])) || true;
+                /*Validating only the displayed fields*/
+                if (isDisplayed) {
+                    return (data === null || data === undefined || data === '');
+                }
+                return true;
+            });
+        }
+        /* Function to remove the empty data. */
+        removeEmptyRecords(serviceData) {
+            const allRecords = serviceData;
+            let filteredData = [];
+            if (allRecords && allRecords.length) {
+                /*Comparing and pushing the non-empty data columns*/
+                filteredData = allRecords.filter(record => {
+                    return record && !this.isEmptyRecord(record);
+                });
+            }
+            return filteredData;
+        }
+        setGridData(serverData) {
+            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 (lodashEs.get(this.datasource, 'category') === 'wm.Variable' || lodashEs.get(this.datasource, 'category') === undefined) {
+                this.variableInflight = false;
+            }
+            if (!this.variableInflight) {
+                if (data && (data.length) === 0) {
+                    this.callDataGridMethod('setStatus', 'nodata', this.nodatamessage);
+                }
+                else {
+                    this.callDataGridMethod('setStatus', 'ready');
+                }
+            }
+            this.gridData = data;
+        }
+        setDataGridOption(optionName, newVal, forceSet = false) {
+            if (!this.datagridElement || !this.datagridElement.datatable || !this.datagridElement.datatable('instance')) {
+                return;
+            }
+            const option = {};
+            if (i2.isDefined && (!lodashEs.isEqual(newVal, this.gridOptions[optionName]) || forceSet)) {
+                option[optionName] = newVal;
+                this.datagridElement.datatable('option', option);
+                this.gridOptions[optionName] = newVal;
+            }
+        }
+        callDataGridMethod(...args) {
+            if (!this.datagridElement || !this.datagridElement.datatable('instance')) {
+                this.applyProps.set(args[1], args);
+                return; // If datagrid is not initiliazed or destroyed, return here
+            }
+            return this.datagridElement.datatable.apply(this.datagridElement, args);
+        }
+        renderOperationColumns() {
+            let rowActionCol, insertPosition;
+            const rowOperationsColumn = i4.getRowOperationsColumn(), config = {
+                'name': rowOperationsColumn.field,
+                'field': rowOperationsColumn.field,
+                'isPredefined': true
+            };
+            // Return if no fieldDefs are present
+            if (!this.fieldDefs.length) {
+                return;
+            }
+            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 ? lodashEs.toNumber(rowActionCol.rowactionsposition) : this.fieldDefs.length;
+                    this.fieldDefs.splice(insertPosition, 0, rowActionCol);
+                    if (insertPosition === 0) {
+                        this.headerConfig.unshift(config);
+                    }
+                    else {
+                        this.headerConfig.push(config);
+                    }
+                }
+                else {
+                    this.fieldDefs.push(rowOperationsColumn);
+                    this.headerConfig.push(config);
+                }
+            }
+            this.setDataGridOption('headerConfig', this.headerConfig);
+        }
+        enablePageNavigation() {
+            if (this.dataset && this.binddataset && this.dataNavigator) {
+                /*Check for sanity*/
+                this.dataNavigatorWatched = true;
+                if (this.navigatorResultWatch) {
+                    this.navigatorResultWatch.unsubscribe();
+                }
+                /*Register a watch on the "result" property of the "dataNavigator" so that the paginated data is displayed in the live-list.*/
+                this.navigatorResultWatch = this.dataNavigator.resultEmitter.subscribe((newVal) => {
+                    /* Check for sanity. */
+                    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 (lodashEs.isEqual(this.dataset, newVal)) {
+                            this.watchVariableDataSet(newVal);
+                        }
+                        else {
+                            if (lodashEs.isArray(newVal)) {
+                                this.widget.dataset = [].concat(newVal);
+                            }
+                            else if (lodashEs.isObject(newVal)) {
+                                this.widget.dataset = lodashEs.extend({}, newVal);
+                            }
+                            else {
+                                this.widget.dataset = newVal;
+                            }
+                        }
+                    }
+                    else {
+                        this.widget.dataset = undefined;
+                    }
+                }, true);
+                /*De-register the watch if it is exists */
+                if (this.navigatorMaxResultWatch) {
+                    this.navigatorMaxResultWatch.unsubscribe();
+                }
+                /*Register a watch on the "maxResults" property of the "dataNavigator" so that the "pageSize" is displayed in the live-list.*/
+                this.navigatorMaxResultWatch = this.dataNavigator.maxResultsEmitter.subscribe((newVal) => {
+                    this.pagesize = newVal;
+                });
+                // If dataset is a pageable object, data is present inside the content property
+                this.__fullData = this.dataset;
+                this.dataNavigator.widget.maxResults = this.pagesize || 5;
+                this.dataNavigator.options = {
+                    maxResults: this.pagesize || 5
+                };
+                this.removePropertyBinding('dataset');
+                this.dataNavigator.setBindDataSet(this.binddataset, this.viewParent, this.datasource, this.dataset, this.binddatasource, undefined, this.statehandler);
+            }
+        }
+        resetPageNavigation() {
+            /*Check for sanity*/
+            if (this.dataNavigator) {
+                this.dataNavigator.resetPageNavigation();
+            }
+        }
+        isDataValid() {
+            let error;
+            const dataset = this.dataset || {};
+            /*In case "data" contains "error" & "errorMessage", then display the error message in the grid.*/
+            if (dataset.error) {
+                error = dataset.error;
+            }
+            if (dataset.data && dataset.data.error) {
+                if (dataset.data.errorMessage) {
+                    error = dataset.data.errorMessage;
+                }
+            }
+            if (error) {
+                this.setGridData([]);
+                this.callDataGridMethod('setStatus', 'error', error);
+                return false;
+            }
+            return true;
+        }
+        // Function to populate the grid with data.
+        populateGridData(serviceData) {
+            let data;
+            serviceData = i4.transformData(serviceData, this.name);
+            // Apply filter and sort, if data is refreshed through Refresh data method
+            if (!this.isNavigationEnabled() && this._isClientSearch) {
+                data = i2.getClonedObject(serviceData);
+                data = this.getSearchResult(data, this.filterInfo);
+                data = this.getSortResult(data, this.sortInfo);
+                this.serverData = data;
+            }
+            else {
+                this.serverData = serviceData;
+            }
+            // If fielddefs are not present, generate fielddefs from data
+            // Removing fielddefs check because When loadondemand property is enabled(deferload="true"), the dataset propertychangehanlder is triggered first before the dom is getting rendered.
+            // So at that time fielddefs length is zero, due to this the columns are created dynamically.
+            if (this.isdynamictable) {
+                this.createGridColumns(this.serverData);
+            }
+            else {
+                this.setGridData(this.serverData);
+            }
+            if (this.getConfiguredState() !== 'none' && this._selectedItemsExist && serviceData.length) {
+                const widgetState = this.statePersistence.getWidgetState(this);
+                let currentPageItems;
+                if (lodashEs.get(widgetState, 'selectedItem')) {
+                    currentPageItems = widgetState.selectedItem.filter(val => {
+                        return val.page === this.dataNavigator.dn.currentPage;
+                    });
+                    this._selectedItemsExist = false;
+                    // 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 (lodashEs.isArray(this.selecteditem)) {
+                            currentPageItems.forEach((item) => {
+                                this.selectItem(item.index, undefined);
+                            });
+                        }
+                        else {
+                            this.selecteditem = currentPageItems.map(function (val) { return val.index; });
+                        }
+                    }
+                }
+            }
+        }
+        // Function to generate and compile the form fields from the metadata
+        async generateDynamicColumns(columns) {
+            this.fieldDefs = []; // empty the form fields
+            // empty the filter field template refs.
+            this.filterTmpl._results = [];
+            if (lodashEs.isEmpty(columns)) {
+                return;
+            }
+            let tmpl = '';
+            columns.forEach(col => {
+                let attrsTmpl = '';
+                let customTmpl = '';
+                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;
+                        }
+                        else {
+                            attrsTmpl += ` ${key}="${val}"`;
+                        }
+                    }
+                });
+                tmpl += `<wm-table-column ${attrsTmpl} tableName="${this.name}${this.$attrs.get('table_reference')}">${customTmpl}</wm-table-column>`;
+            });
+            this.dynamicTableRef.clear();
+            if (!this._dynamicContext) {
+                this._dynamicContext = Object.create(this.viewParent);
+                this._dynamicContext[this.getAttr('wmTable')] = this;
+            }
+            this.noOfColumns = columns.length;
+            const componentFactoryRef = await this.dynamicComponentProvider.getComponentFactoryRef('app-table-dynamic-' + this.widgetId, tmpl, {
+                noCache: true,
+                transpile: true
+            });
+            const component = this.dynamicTableRef.createComponent(componentFactoryRef, 0, this.inj);
+            i2.extendProto(component.instance, this._dynamicContext);
+            this.$element.find('.dynamic-table-container')[0].appendChild(component.location.nativeElement);
+        }
+        prepareColDefs(data) {
+            let defaultFieldDefs;
+            let properties;
+            let columnIndex = 0;
+            let headerIndex = 0;
+            this.fieldDefs = [];
+            this.headerConfig = [];
+            this.columns = {};
+            /* if properties map is existed then fetch the column configuration for all nested levels using util function */
+            properties = data;
+            /*call utility function to prepare fieldDefs for grid against given data (A MAX OF 10 COLUMNS ONLY)*/
+            defaultFieldDefs = i4.prepareFieldDefs(properties);
+            /*append additional properties*/
+            lodashEs.forEach(defaultFieldDefs, columnDef => {
+                columnDef.binding = columnDef.field;
+                columnDef.caption = columnDef.displayName;
+                columnDef.pcDisplay = true;
+                columnDef.mobileDisplay = true;
+                columnDef.tabletDisplay = true;
+                columnDef.searchable = true;
+                columnDef.showinfilter = true;
+                columnDef.type = 'string';
+                // Fix for [WMS-19668] and [WMS-19669]- Adding index and headerIndex for Dynamic DB columns.
+                // Note: we don't have column groups for Dynamic DB
+                columnDef.index = columnIndex;
+                columnDef.headerIndex = headerIndex;
+                columnIndex++;
+                headerIndex++;
+            });
+            defaultFieldDefs.forEach(col => {
+                this.columns[col.field] = col;
+            });
+            this.invokeEventCallback('beforedatarender', { $data: data, $columns: this.columns, data: data, columns: this.columns });
+            defaultFieldDefs = [];
+            // Apply the changes made by the user
+            lodashEs.forEach(this.columns, val => {
+                defaultFieldDefs.push(val);
+            });
+            this.generateDynamicColumns(defaultFieldDefs);
+        }
+        createGridColumns(data) {
+            /* this call back function receives the data from the variable */
+            /* 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 && !lodashEs.isArray(data)) {
+                data = [data];
+            }
+            /* if the data is empty, show nodatamessage */
+            if (lodashEs.isEmpty(data)) {
+                this.setGridData(data);
+                return;
+            }
+            if (!dataValid) {
+                return;
+            }
+            /* if new columns to be rendered, prepare default fieldDefs for the data provided*/
+            this.prepareColDefs(data);
+            this.serverData = data;
+            this.setGridData(this.serverData);
+        }
+        getSortExpr() {
+            let sortExp;
+            let pagingOptions;
+            if (this.datasource && this.datasource.execute(i2.DataSource.Operation.IS_PAGEABLE)) {
+                pagingOptions = this.datasource.execute(i2.DataSource.Operation.GET_PAGING_OPTIONS);
+                sortExp = lodashEs.isEmpty(pagingOptions) ? '' : i4.getOrderByExpr(pagingOptions.sort);
+            }
+            return sortExp || '';
+        }
+        onPropertyChange(key, nv, ov) {
+            let enableNewRow;
+            switch (key) {
+                case 'datasource':
+                    // Fix for [WMS-23653] when startUpdate is false (request on page load property is unchecked),
+                    // then set status msg as "No data found"
+                    if (nv.startUpdate === false) {
+                        this.variableInflight = false;
+                        this.callDataGridMethod('setStatus', 'nodata', this.nodatamessage);
+                    }
+                    this.watchVariableDataSet(this.dataset);
+                    this.onDataSourceChange();
+                    break;
+                case 'dataset':
+                    if (this.gridOptions.isNavTypeScrollOrOndemand() && this.gridOptions.getCurrentPage() === 1) {
+                        this.gridOptions.setIsNextPageData(false);
+                    }
+                    if (this.binddatasource && !this.datasource) {
+                        return;
+                    }
+                    // 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 && lodashEs.startsWith(this.binddataset, 'item')) {
+                        this.datasource = i2.getDatasourceFromExpr(this.widget.$attrs.get('datasetboundexpr'), this);
+                    }
+                    if (this.gridOptions.isNavTypeScrollOrOndemand()) {
+                        if (this.gridOptions.isNextPageData) {
+                            // when fetching next page data
+                            this.gridOptions.setIsDataUpdatedByUser(false);
+                        }
+                        else {
+                            // when dataset is updated from script
+                            this.gridOptions.setIsDataUpdatedByUser(true);
+                            this.setLastActionToDatasetUpdate();
+                            this.gridOptions.setIsNextPageData(false);
+                        }
+                    }
+                    // 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 (!(lodashEs.get(this.datasource, 'category') === 'wm.Variable' && this._pageLoad && this.getConfiguredState() !== 'none') || (this.parentList && lodashEs.startsWith(this.binddataset, 'item'))) {
+                        this.watchVariableDataSet(nv);
+                    }
+                    break;
+                case 'filtermode':
+                    this.setDataGridOption('filtermode', nv);
+                    break;
+                case 'searchlabel':
+                    this.setDataGridOption('searchLabel', nv);
+                    break;
+                case 'navigation':
+                    if (nv === 'Advanced') { // Support for older projects where navigation type was advanced instead of clasic
+                        this.navigation = 'Classic';
+                        return;
+                    }
+                    if (nv !== 'None') {
+                        this.shownavigation = true;
+                    }
+                    this.setDataGridOption('navigation', this.navigation);
+                    this.onDemandLoad = nv === i4.NAVIGATION_TYPE.ONDEMAND ? true : false;
+                    this.infScroll = nv === i4.NAVIGATION_TYPE.SCROLL ? true : false;
+                    this.navControls = nv;
+                    break;
+                case 'gridfirstrowselect':
+                    this.setDataGridOption('selectFirstRow', nv);
+                    break;
+                case 'gridclass':
+                    this.callDataGridMethod('option', 'cssClassNames.grid', nv);
+                    break;
+                case 'nodatamessage':
+                    this.callDataGridMethod('option', 'dataStates.nodata', nv);
+                    break;
+                case 'loadingdatamsg':
+                    this.callDataGridMethod('option', 'dataStates.loading', nv);
+                    break;
+                case 'loadingicon':
+                    this.callDataGridMethod('option', 'loadingicon', nv);
+                    break;
+                case 'spacing':
+                    this.callDataGridMethod('option', 'spacing', nv);
+                    if (nv === 'condensed') {
+                        this.navigationSize = 'small';
+                    }
+                    else {
+                        this.navigationSize = '';
+                    }
+                    break;
+                case 'exportformat':
+                    this.exportOptions = [];
+                    if (nv) {
+                        // Populate options for export drop down menu
+                        lodashEs.forEach(lodashEs.split(nv, ','), type => {
+                            this.exportOptions.push({
+                                label: type,
+                                icon: exportIconMapping[type]
+                            });
+                        });
+                    }
+                    break;
+                case 'shownewrow':
+                    // Enable new row if shownew is true or addNewRow buton is present
+                    enableNewRow = nv || lodashEs.some(this.actions, act => lodashEs.includes(act.action, 'addNewRow()'));
+                    this.callDataGridMethod('option', 'actionsEnabled.new', enableNewRow);
+                    break;
+                case 'pagesize':
+                    this.dataNavigator.options = {
+                        maxResults: nv
+                    };
+                    this.dataNavigator.widget.maxResults = nv;
+                    this.dataNavigator.maxResults = nv;
+                    break;
+                case 'ondemandmessage':
+                    if (nv) {
+                        this.$element.find('.on-demand-datagrid > a').text(nv);
+                    }
+                    this.gridOptions.ondemandmessage = nv;
+                    break;
+                case 'viewlessmessage':
+                    this.gridOptions.viewlessmessage = nv;
+                    break;
+                case 'show':
+                    if (nv) {
+                        this.invokeEventCallback('show');
+                    }
+                    else {
+                        this.invokeEventCallback('hide');
+                    }
+                default:
+                    super.onPropertyChange(key, nv, ov);
+            }
+        }
+        onDataSourceChange() {
+            this.fieldDefs.forEach(col => {
+                i2.triggerFn(col.onDataSourceChange && col.onDataSourceChange.bind(col));
+            });
+        }
+        clearActionRowVars() {
+            this.actionRowIndex = undefined;
+            this.actionRowPage = undefined;
+            this.setDataGridOption('actionRowIndex', undefined);
+            this.setDataGridOption('actionRowPage', undefined);
+        }
+        onStyleChange(key, nv, ov) {
+            switch (key) {
+                case 'width':
+                    this.callDataGridMethod('setGridDimensions', 'width', nv);
+                    break;
+                case 'height':
+                    this.callDataGridMethod('setGridDimensions', 'height', nv);
+                    break;
+            }
+            super.onStyleChange(key, nv, ov);
+        }
+        populateActions() {
+            this._actions.header = [];
+            this._actions.footer = [];
+            lodashEs.forEach(this.actions, (action) => {
+                if (lodashEs.includes(action.position, 'header')) {
+                    this._actions.header.push(action);
+                }
+                if (lodashEs.includes(action.position, 'footer')) {
+                    this._actions.footer.push(action);
+                }
+            });
+        }
+        // this method will render the filter row.
+        renderDynamicFilterColumn(filteTemRef) {
+            // For dynamic table manually pushing the filtertemplateRef as templateRef will not be available prior.
+            if (this.isdynamictable) {
+                this.filterTmpl._results.push(filteTemRef);
+            }
+        }
+        registerColumns(tableColumn, colIndex) {
+            if (i2.isMobile() && this.viewport.isMobileType) {
+                if (!tableColumn.mobileDisplay) {
+                    return;
+                }
+            }
+            else if (this.viewport.isTabletType) {
+                if (!tableColumn.tabletDisplay) {
+                    return;
+                }
+            }
+            else {
+                if (!tableColumn.pcDisplay) {
+                    return;
+                }
+            }
+            if (tableColumn['primary-key']) {
+                this.primaryKey.push(tableColumn.field);
+            }
+            this.fieldDefs[colIndex] = tableColumn;
+            const colCount = this.fieldDefs.length;
+            this.fullFieldDefs.push(tableColumn);
+            this.rowFilter[tableColumn.field] = {
+                value: undefined
+            };
+            this.fieldDefs.forEach(col => {
+                this.columns[col.field] = col;
+            });
+            // If dynamic datatable and last column, pass the columns to jquery datatable
+            if (this.isdynamictable && colCount === this.noOfColumns) {
+                this.renderOperationColumns();
+                this.setDataGridOption('colDefs', this.fieldDefs);
+            }
+        }
+        registerFormField(name, formField) {
+            this.formfields[name] = formField;
+        }
+        registerActions(tableAction) {
+            this.actions.push(tableAction);
+            this.populateActions();
+        }
+        registerRow(tableRow, rowInstance) {
+            this.rowDef = tableRow;
+            this.rowInstance = rowInstance;
+            this.callDataGridMethod('option', 'cssClassNames.rowExpandIcon', this.rowDef.expandicon);
+            this.callDataGridMethod('option', 'cssClassNames.rowCollapseIcon', this.rowDef.collapseicon);
+            this.gridOptions.rowExpansionEnabled = true;
+            this.gridOptions.rowDef = this.rowDef;
+        }
+        registerRowActions(tableRowAction) {
+            this.rowActions.push(tableRowAction);
+        }
+        selectItem(item, data) {
+            /* server is not updating immediately, so set the server data to success callback data */
+            if (data) {
+                this.serverData = data;
+            }
+            if (lodashEs.isObject(item)) {
+                item = lodashEs.omitBy(item, (value) => {
+                    return lodashEs.isArray(value) && lodashEs.isEmpty(value);
+                });
+            }
+            this.callDataGridMethod('selectRow', item, true);
+        }
+        /* deselect the given item*/
+        deselectItem(item) {
+            this.callDataGridMethod('deselectRow', item);
+        }
+        onDataNavigatorDataSetChange(nv) {
+            let data;
+            this.__fullData = nv;
+            this.checkFiltersApplied(this.getSortExpr());
+            if (this._isClientSearch) {
+                data = i2.getClonedObject(this.__fullData);
+                if (lodashEs.isObject(data) && !lodashEs.isArray(data)) {
+                    data = [data];
+                }
+                data = this.getSearchResult(data, this.filterInfo);
+                data = this.getSortResult(data, this.sortInfo);
+                return data;
+            }
+            return nv;
+        }
+        toggleMessage(show, type, msg, header) {
+            if (show && msg) {
+                this.app.notifyApp(msg, type, header);
+            }
+        }
+        export($item) {
+            let filterFields;
+            const sortOptions = lodashEs.isEmpty(this.sortInfo) ? '' : this.sortInfo.field + ' ' + this.sortInfo.direction;
+            const columns = {};
+            let isValid;
+            let requestData;
+            this.fieldDefs.forEach(fieldDef => {
+                // Do not add the row operation actions column to the exported file.
+                if (fieldDef.field === ROW_OPS_FIELD || !fieldDef.show) {
+                    return;
+                }
+                const option = {
+                    'header': fieldDef.displayName
+                };
+                // If column has exportexpression, then send form the expression as required by backend.
+                // otherwise send the field name.
+                if (fieldDef.exportexpression) {
+                    option.expression = fieldDef.exportexpression;
+                }
+                else {
+                    option.field = fieldDef.field;
+                }
+                columns[fieldDef.field] = option;
+            });
+            filterFields = this.getFilterFields(this.filterInfo);
+            requestData = {
+                matchMode: 'anywhereignorecase',
+                filterFields: filterFields,
+                orderBy: sortOptions,
+                exportType: $item.label,
+                logicalOp: 'AND',
+                exportSize: this.exportdatasize,
+                columns: columns
+            };
+            isValid = this.invokeEventCallback('beforeexport', { $data: requestData });
+            if (isValid === false) {
+                return;
+            }
+            requestData.fields = lodashEs.values(requestData.columns);
+            this.datasource.execute(i2.DataSource.Operation.DOWNLOAD, { data: requestData });
+        }
+        expandRow(rowId) {
+            this.callDataGridMethod('expandRow', rowId);
+        }
+        collapseRow(rowId) {
+            this.callDataGridMethod('collapseRow', rowId);
+        }
+        _documentClickBind(event) {
+            const $target = event.target;
+            // If click triggered from same grid or a dialog, do not save the row
+            if (this.$element[0].contains($target) || event.target.doctype || isInputBodyWrapper($($target))) {
+                return;
+            }
+            this.callDataGridMethod('saveRow');
+        }
+        _redraw(forceRender) {
+            if (forceRender) {
+                this.datagridElement.datatable(this.gridOptions);
+            }
+            else {
+                setTimeout(() => {
+                    this.callDataGridMethod('setColGroupWidths');
+                    this.callDataGridMethod('addOrRemoveScroll');
+                });
+            }
+        }
+        invokeActionEvent($event, expression) {
+            const fn = i2.$parseEvent(expression);
+            fn(this.viewParent, Object.assign(this.context, { $event }));
+        }
+        // change and blur events are added from the template
+        handleEvent(node, eventName, callback, locals) {
+            if (eventName !== 'select') {
+                super.handleEvent(this.nativeElement, eventName, callback, locals);
+            }
+        }
+        triggerUploadEvent($event, eventName, fieldName, row) {
+            const params = { $event, row };
+            if (!this.columns[fieldName]) {
+                return;
+            }
+            if (eventName === 'change') {
+                params.newVal = $event.target.files;
+                params.oldVal = this.columns[fieldName]._oldUploadVal;
+                this.columns[fieldName]._oldUploadVal = params.newVal;
+            }
+            this.columns[fieldName].invokeEventCallback(eventName, params);
+        }
+        registerFormWidget() { }
+        // Form control accessor methods. This will be used for table inside form
+        writeValue() { }
+        registerOnChange(fn) {
+            this._onChange = fn;
+        }
+        registerOnTouched(fn) {
+            this._onTouched = fn;
+        }
+        ngOnDetach() {
+            super.ngOnDetach();
+            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), 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);
+                i0__namespace.ɵɵcontentQuery(dirIndex, _c2$1, 5);
+                i0__namespace.ɵɵcontentQuery(dirIndex, _c3$1, 5);
+                i0__namespace.ɵɵcontentQuery(dirIndex, _c4$1, 5);
+                i0__namespace.ɵɵcontentQuery(dirIndex, _c5$1, 5);
+                i0__namespace.ɵɵcontentQuery(dirIndex, _c6, 5);
+            } if (rf & 2) {
+                let _t;
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.rowExpansionTmpl = _t.first);
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.rowActionTmpl = _t);
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.filterTmpl = _t);
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.inlineWidgetTmpl = _t);
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.inlineWidgetNewTmpl = _t);
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.customExprTmpl = _t);
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.rowExpansionActionTmpl = _t);
+            } }, viewQuery: function TableComponent_Query(rf, ctx) { if (rf & 1) {
+                i0__namespace.ɵɵviewQuery(i10.PaginationComponent, 7);
+                i0__namespace.ɵɵviewQuery(_c7, 7);
+                i0__namespace.ɵɵviewQuery(_c8, 7, i0.ViewContainerRef);
+                i0__namespace.ɵɵviewQuery(_c9, 7, i0.ViewContainerRef);
+                i0__namespace.ɵɵviewQuery(_c10, 7, i0.ViewContainerRef);
+                i0__namespace.ɵɵviewQuery(_c11, 7, i0.ViewContainerRef);
+                i0__namespace.ɵɵviewQuery(_c12, 7, i0.ViewContainerRef);
+                i0__namespace.ɵɵviewQuery(_c13, 7, i0.ViewContainerRef);
+                i0__namespace.ɵɵviewQuery(_c14, 7, i0.ViewContainerRef);
+                i0__namespace.ɵɵviewQuery(_c15, 7, i0.ViewContainerRef);
+            } if (rf & 2) {
+                let _t;
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.dataNavigator = _t.first);
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx._tableElement = _t.first);
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.rowActionsViewRef = _t.first);
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.filterViewRef = _t.first);
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.inlineEditViewRef = _t.first);
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.inlineEditNewViewRef = _t.first);
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.customExprViewRef = _t.first);
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.rowDetailViewRef = _t.first);
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.rowExpansionActionViewRef = _t.first);
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.dynamicTableRef = _t.first);
+            } }, hostBindings: function TableComponent_HostBindings(rf, ctx) { if (rf & 1) {
+                i0__namespace.ɵɵlistener("keypress", function TableComponent_keypress_HostBindingHandler($event) { return ctx.onKeyPress($event); });
+            } }, 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: [["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", 16);
+                i0__namespace.ɵɵelementEnd();
+                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();
+                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 }); }
+    }
+    (() => { (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; 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,
+                    args: ['dataset.bind']
+                }] }, { type: undefined, decorators: [{
+                    type: i0.Attribute,
+                    args: ['datasource.bind']
+                }] }, { type: undefined, decorators: [{
+                    type: i0.Attribute,
+                    args: ['readonlygrid']
+                }] }, { 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: [{
+                type: i0.ViewChild,
+                args: ['datagridElement', { static: true }]
+            }], rowActionTmpl: [{
+                type: i0.ContentChildren,
+                args: ['rowActionTmpl', { descendants: true }]
+            }], rowActionsViewRef: [{
+                type: i0.ViewChild,
+                args: ['rowActionsView', { static: true, read: i0.ViewContainerRef }]
+            }], filterTmpl: [{
+                type: i0.ContentChildren,
+                args: ['filterTmpl', { descendants: true }]
+            }], filterViewRef: [{
+                type: i0.ViewChild,
+                args: ['multiColumnFilterView', { static: true, read: i0.ViewContainerRef }]
+            }], inlineWidgetTmpl: [{
+                type: i0.ContentChildren,
+                args: ['inlineWidgetTmpl', { descendants: true }]
+            }], inlineEditViewRef: [{
+                type: i0.ViewChild,
+                args: ['inlineEditView', { static: true, read: i0.ViewContainerRef }]
+            }], inlineWidgetNewTmpl: [{
+                type: i0.ContentChildren,
+                args: ['inlineWidgetTmplNew', { descendants: true }]
+            }], inlineEditNewViewRef: [{
+                type: i0.ViewChild,
+                args: ['inlineEditNewView', { static: true, read: i0.ViewContainerRef }]
+            }], customExprTmpl: [{
+                type: i0.ContentChildren,
+                args: ['customExprTmpl', { descendants: true }]
+            }], customExprViewRef: [{
+                type: i0.ViewChild,
+                args: ['customExprView', { static: true, read: i0.ViewContainerRef }]
+            }], rowExpansionActionTmpl: [{
+                type: i0.ContentChildren,
+                args: ['rowExpansionActionTmpl', { descendants: true }]
+            }], rowExpansionTmpl: [{
+                type: i0.ContentChild,
+                args: ['rowExpansionTmpl']
+            }], rowDetailViewRef: [{
+                type: i0.ViewChild,
+                args: ['rowDetailView', { static: true, read: i0.ViewContainerRef }]
+            }], rowExpansionActionViewRef: [{
+                type: i0.ViewChild,
+                args: ['rowExpansionActionView', { static: true, read: i0.ViewContainerRef }]
+            }], dynamicTableRef: [{
+                type: i0.ViewChild,
+                args: ['dynamicTable', { static: true, read: i0.ViewContainerRef }]
+            }], onKeyPress: [{
+                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',
+        'EDIT': 'edit',
+        'DELETE': 'delete'
+    };
+    class TableCUDDirective {
+        constructor(table, dialogService, app) {
+            this.table = table;
+            this.dialogService = dialogService;
+            this.app = app;
+            table.initiateSelectItem = this.initiateSelectItem.bind(this);
+            table.updateVariable = this.updateVariable.bind(this);
+            table.updateRecord = this.updateRecord.bind(this);
+            table.deleteRecord = this.deleteRecord.bind(this);
+            table.insertRecord = this.insertRecord.bind(this);
+            table.editRow = this.editRow.bind(this);
+            table.addNewRow = this.addNewRow.bind(this);
+            table.addRow = this.addNewRow.bind(this);
+            table.deleteRow = this.deleteRow.bind(this);
+            table.onRecordDelete = this.onRecordDelete.bind(this);
+            table.hideEditRow = this.hideEditRow.bind(this);
+            table.saveRow = this.saveRow.bind(this);
+            table.cancelRow = this.cancelRow.bind(this);
+        }
+        selectItemOnSuccess(row, skipSelectItem, callBack) {
+            /*$timeout is used so that by then $is.dataset has the updated value.
+             * Selection of the item is done in the callback of page navigation so that the item that needs to be selected actually exists in the grid.*/
+            /*Do not select the item if skip selection item is specified*/
+            setTimeout(() => {
+                if (!skipSelectItem) {
+                    this.table.selectItem(row, this.table.dataset);
+                }
+                i2.triggerFn(callBack);
+            }, 250);
+        }
+        initiateSelectItem(index, row, skipSelectItem, isStaticVariable, callBack) {
+            // In case of on demand and Infinite Scroll pagination, when new row is inserted show it in the last page and continue with current flow instead of navigating user to the last page
+            if ((this.table.gridOptions.isNavTypeScrollOrOndemand()) && !this.table.dataNavigator.isDisableNext && this.table.isNewRowInserted) {
+                this.table.isNewRowInserted = false;
+                return;
+            }
+            /*index === "last" indicates that an insert operation has been successfully performed and navigation to the last page is required.
+             * Hence increment the "dataSize" by 1.*/
+            if (index === 'last') {
+                if (!isStaticVariable) {
+                    this.table.dataNavigator.dataSize += 1;
+                }
+                /*Update the data in the current page in the grid after insert/update operations.*/
+                if (!this.table.isNavigationEnabled()) {
+                    index = 'current';
+                }
+            }
+            /*Re-calculate the paging values like pageCount etc that could change due to change in the dataSize.*/
+            this.table.dataNavigator.calculatePagingValues();
+            /* updating pagination fulldata*/
+            this.table.dataNavigator.__fullData = this.table.__fullData;
+            this.table.dataNavigator.navigatePage(index, null, true, () => {
+                if (this.table.isNavigationEnabled() || isStaticVariable) {
+                    this.selectItemOnSuccess(row, skipSelectItem, callBack);
+                }
+                if (this.table.editmode === 'quickedit' && !skipSelectItem) {
+                    // In case of quickeditmode, manually set active row to attach event handlers and focus the row
+                    this.table.callDataGridMethod('setActiveRow', row);
+                }
+            });
+        }
+        updateVariable(row, callBack) {
+            const dataSource = this.table.datasource;
+            if (!dataSource) {
+                return;
+            }
+            dataSource.execute(i2.DataSource.Operation.FETCH_DISTINCT_VALUES);
+            if (!this.table.isNavigationEnabled()) {
+                const sortInfo = this.table.sortInfo;
+                const sortOptions = sortInfo && sortInfo.direction ? (sortInfo.field + ' ' + sortInfo.direction) : '';
+                i4.refreshDataSource(dataSource, {
+                    page: 1,
+                    filterFields: this.table.getFilterFields(this.table.filterInfo),
+                    orderBy: sortOptions,
+                    matchMode: 'anywhereignorecase'
+                }).then(() => {
+                    i2.$appDigest();
+                    this.selectItemOnSuccess(row, true, callBack);
+                });
+            }
+        }
+        insertSuccessHandler(response, options) {
+            /*Display appropriate error message in case of error.*/
+            if (response.error) {
+                this.table.invokeEventCallback('error', { $event: options.event, $operation: OPERATION.NEW, $data: response.error });
+                if (!this.table.onError) {
+                    this.table.toggleMessage(true, 'error', this.table.errormessage || response.error);
+                }
+                i2.triggerFn(options.error, response);
+            }
+            else {
+                if (this.table.gridOptions.isNavTypeScrollOrOndemand()) {
+                    this.table.isNewRowInserted = true;
+                }
+                if (options.event) {
+                    const row = $(options.event.target).closest('tr');
+                    this.table.callDataGridMethod('hideRowEditMode', row);
+                }
+                if (!this.table.onRowinsert) {
+                    this.table.toggleMessage(true, 'success', this.table.insertmessage);
+                }
+                if (this.table.datasource.execute(i2.DataSource.Operation.SUPPORTS_CRUD)) {
+                    this.table.initiateSelectItem(this.table.getNavigationTargetBySortInfo(), response, undefined, false, options.callBack);
+                    this.updateVariable(response, options.callBack);
+                }
+                else if (!this.table.datasource.execute(i2.DataSource.Operation.IS_API_AWARE)) {
+                    this.table.initiateSelectItem(this.table.getNavigationTargetBySortInfo(), response, undefined, false, options.callBack);
+                }
+                i2.triggerFn(options.success, response);
+                this.table.invokeEventCallback('rowinsert', { $event: options.event, $data: response, row: response });
+            }
+        }
+        generatePath(binddataset) {
+            let path, index;
+            let dataBoundExpr = this.table.widget.$attrs.get('datasetboundexpr');
+            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 = 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 = 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 = lodashEs.parseInt(binddataset.replace(/^Variables\..*\.dataSet([\[])/g, ''));
+                }
+                path = binddataset.replace(/^Variables\..*\.dataSet([^.])*(\.|$)/g, '');
+            }
+            return { path, index };
+        }
+        insertRecord(options) {
+            const dataSource = this.table.datasource;
+            if (!dataSource) {
+                return;
+            }
+            const currentPageNum = dataSource.pagination && dataSource.pagination.number + 1;
+            const dataObject = {
+                row: options.row,
+                skipNotification: true,
+                period: options.period
+            };
+            if (dataSource.execute(i2.DataSource.Operation.SUPPORTS_CRUD) || !dataSource.execute(i2.DataSource.Operation.IS_API_AWARE) || dataSource.category === 'wm.CrudVariable') {
+                if (!dataSource.execute(i2.DataSource.Operation.IS_API_AWARE)) {
+                    const extraOptions = this.generatePath(this.table.binddataset);
+                    dataSource.execute(i2.DataSource.Operation.ADD_ITEM, { item: options.row, path: extraOptions.path, parentIndex: extraOptions.index });
+                    this.insertSuccessHandler(options.row, options);
+                    return;
+                }
+                dataSource.execute(i2.DataSource.Operation.INSERT_RECORD, dataObject).then(response => {
+                    this.insertSuccessHandler(response, options);
+                    if (dataSource.category === 'wm.CrudVariable') {
+                        dataSource.execute(i2.DataSource.Operation.LIST_RECORDS, {
+                            'skipToggleState': true,
+                            'operation': 'list',
+                            'page': currentPageNum
+                        });
+                    }
+                }, error => {
+                    this.table.invokeEventCallback('error', { $event: options.event, $operation: OPERATION.NEW, $data: error });
+                    if (!this.table.onError) {
+                        this.table.toggleMessage(true, 'error', this.table.errormessage || error);
+                    }
+                    i2.triggerFn(options.error, error);
+                    i2.triggerFn(options.callBack, undefined, true);
+                });
+            }
+            else {
+                this.table.invokeEventCallback('rowinsert', { $event: options.event, row: options.row });
+            }
+        }
+        updateSuccessHandler(response, options) {
+            /*Display appropriate error message in case of error.*/
+            if (response.error) {
+                this.table.invokeEventCallback('error', { $event: options.event, $operation: OPERATION.EDIT, $data: response.error });
+                /*disable readonly and show the appropriate error*/
+                if (!this.table.onError) {
+                    this.table.toggleMessage(true, 'error', this.table.errormessage || response.error);
+                }
+                i2.triggerFn(options.error, response);
+            }
+            else {
+                if (options.event) {
+                    const row = $(options.event.target).closest('tr');
+                    this.table.callDataGridMethod('hideRowEditMode', row);
+                }
+                if (!this.table.onRowupdate) {
+                    this.table.toggleMessage(true, 'success', this.table.updatemessage);
+                }
+                if (this.table.datasource.execute(i2.DataSource.Operation.SUPPORTS_CRUD)) {
+                    this.table.initiateSelectItem('current', response, undefined, false, options.callBack);
+                    this.updateVariable(response, options.callBack);
+                }
+                else if (!this.table.datasource.execute(i2.DataSource.Operation.IS_API_AWARE)) {
+                    this.table.initiateSelectItem('current', response, undefined, false, options.callBack);
+                }
+                i2.triggerFn(options.success, response);
+                this.table.invokeEventCallback('rowupdate', { $event: options.event, $data: response, row: response });
+            }
+        }
+        updateRecord(options) {
+            const dataSource = this.table.datasource;
+            if (!dataSource) {
+                return;
+            }
+            const currentPageNum = dataSource.pagination && dataSource.pagination.number + 1;
+            const dataObject = {
+                row: options.row,
+                prevData: options.prevData,
+                skipNotification: true,
+                period: options.period
+            };
+            if (dataSource.execute(i2.DataSource.Operation.SUPPORTS_CRUD) || !dataSource.execute(i2.DataSource.Operation.IS_API_AWARE) || dataSource.category === 'wm.CrudVariable') {
+                if (!dataSource.execute(i2.DataSource.Operation.IS_API_AWARE)) {
+                    const extraOptions = this.generatePath(this.table.binddataset);
+                    dataSource.execute(i2.DataSource.Operation.SET_ITEM, { prevItem: options.prevData, item: options.row, path: extraOptions.path, parentIndex: extraOptions.index });
+                    this.updateSuccessHandler(options.row, options);
+                    return;
+                }
+                dataSource.execute(i2.DataSource.Operation.UPDATE_RECORD, dataObject).then(response => {
+                    this.updateSuccessHandler(response, options);
+                    if (dataSource.category === 'wm.CrudVariable') {
+                        dataSource.execute(i2.DataSource.Operation.LIST_RECORDS, {
+                            'skipToggleState': true,
+                            'operation': 'list',
+                            'page': currentPageNum
+                        });
+                    }
+                }, error => {
+                    this.table.invokeEventCallback('error', { $event: options.event, $operation: OPERATION.EDIT, $data: error });
+                    if (!this.table.onError) {
+                        this.table.toggleMessage(true, 'error', this.table.errormessage || error);
+                    }
+                    i2.triggerFn(options.error, error);
+                    i2.triggerFn(options.callBack, undefined, true);
+                });
+            }
+            else {
+                this.table.invokeEventCallback('rowupdate', { $event: options.event, row: options.row });
+            }
+        }
+        onRecordDelete(callBack) {
+            let index;
+            /*Check for sanity*/
+            if (this.table.dataNavigator) {
+                this.table.dataNavigator.dataSize -= 1;
+                this.table.dataNavigator.calculatePagingValues();
+                /*If the current page does not contain any records due to deletion, then navigate to the previous page.*/
+                index = this.table.dataNavigator.pageCount < this.table.dataNavigator.dn.currentPage ? 'prev' : undefined;
+                /* updating pagination fulldata*/
+                this.table.dataNavigator.__fullData = this.table.__fullData;
+                this.table.dataNavigator.navigatePage(index, null, true, () => {
+                    setTimeout(() => {
+                        i2.triggerFn(callBack);
+                    }, undefined, false);
+                });
+            }
+        }
+        deleteSuccessHandler(row, response, evt, callBack) {
+            /* check the response whether the data successfully deleted or not , if any error occurred show the
+             * corresponding error , other wise remove the row from grid */
+            if (response && response.error) {
+                if (!this.table.onError) {
+                    this.table.toggleMessage(true, 'error', this.table.errormessage || response.error);
+                }
+                return;
+            }
+            this.onRecordDelete(callBack);
+            if (this.table.datasource.execute(i2.DataSource.Operation.SUPPORTS_CRUD)) {
+                this.updateVariable(row, callBack);
+            }
+            if (!this.table.onRowdelete) {
+                this.table.toggleMessage(true, 'success', this.table.deletemessage);
+            }
+            // custom EventHandler for row deleted event
+            this.table.invokeEventCallback('rowdelete', { $event: evt, $data: row, row });
+            this.table.invokeEventCallback('rowdeleted', { $event: evt, $data: row, row });
+        }
+        deleteFn(options) {
+            const dataSource = this.table.datasource;
+            let isLastPageElement, currentPageNum;
+            if (!dataSource) {
+                return;
+            }
+            // when delete operation is executed, turn on isRowDeleted flag to perform the next operations in table component
+            if (this.table.onDemandLoad || this.table.infScroll) {
+                this.table.isRowDeleted = true;
+            }
+            if (dataSource.category === 'wm.CrudVariable') {
+                this.triggerWMEvent('resetEditMode');
+                if (dataSource.pagination) {
+                    isLastPageElement = dataSource.pagination.last && dataSource.pagination.numberOfElements === 1;
+                    currentPageNum = isLastPageElement ? dataSource.pagination.number : dataSource.pagination.number + 1;
+                }
+            }
+            if (dataSource.execute(i2.DataSource.Operation.SUPPORTS_CRUD) || !dataSource.execute(i2.DataSource.Operation.IS_API_AWARE) || this.table._isDependent || dataSource.category === 'wm.CrudVariable') {
+                if (!dataSource.execute(i2.DataSource.Operation.IS_API_AWARE)) {
+                    const extraOptions = this.generatePath(this.table.binddataset);
+                    dataSource.execute(i2.DataSource.Operation.REMOVE_ITEM, { item: options.row, path: extraOptions.path, parentIndex: extraOptions.index });
+                    this.deleteSuccessHandler(options.row, undefined, options.evt, options.callBack);
+                    return;
+                }
+                dataSource.execute(i2.DataSource.Operation.DELETE_RECORD, {
+                    row: options.row,
+                    skipNotification: true,
+                    period: options.period
+                }).then(response => {
+                    this.deleteSuccessHandler(response, options.row, options.evt, options.callBack);
+                    if (dataSource.category === 'wm.CrudVariable') {
+                        //this.triggerWMEvent('rerender', dataSource);
+                        dataSource.execute(i2.DataSource.Operation.LIST_RECORDS, {
+                            'skipToggleState': true,
+                            'operation': 'list',
+                            'page': currentPageNum
+                        });
+                    }
+                }, error => {
+                    // In case of deletion failure, turn isRowDeleted flag off to prevent executing code in table comp
+                    if (this.table.isRowDeleted) {
+                        this.table.isRowDeleted = false;
+                    }
+                    i2.triggerFn(options.callBack, undefined, true);
+                    this.table.invokeEventCallback('error', { $event: options.evt, $operation: OPERATION.DELETE, $data: error });
+                    if (!this.table.onError) {
+                        this.table.toggleMessage(true, 'error', this.table.errormessage || error);
+                    }
+                });
+            }
+            else {
+                this.table.invokeEventCallback('rowdelete', { $event: options.evt, row: options.row });
+            }
+            i2.triggerFn(options.cancelRowDeleteCallback);
+        }
+        deleteRecord(options) {
+            if (!this.table.confirmdelete) {
+                this.deleteFn(options);
+                i2.triggerFn(options.cancelRowDeleteCallback);
+                return;
+            }
+            this.dialogService.showAppConfirmDialog({
+                title: this.app.appLocale.MESSAGE_DELETE_RECORD || 'Delete Record',
+                iconclass: 'wi wi-delete fa-lg',
+                message: this.table.confirmdelete,
+                oktext: this.table.deleteoktext,
+                canceltext: this.table.deletecanceltext,
+                onOk: () => {
+                    this.deleteFn(options);
+                    this.dialogService.closeAppConfirmDialog();
+                },
+                onCancel: () => {
+                    i2.triggerFn(options.cancelRowDeleteCallback);
+                    this.dialogService.closeAppConfirmDialog();
+                },
+                onOpen: () => {
+                    // Focus the cancel button on open
+                    $('.cancel-action').focus();
+                },
+                onEscape: () => {
+                    i2.triggerFn(options.cancelRowDeleteCallback);
+                }
+            });
+        }
+        editRow(evt) {
+            let row;
+            if (this.table._isDependent) {
+                this.triggerWMEvent('update');
+                return;
+            }
+            if (evt && evt.target) {
+                this.table.callDataGridMethod('toggleEditRow', evt, { 'selectRow': true, action: 'edit' });
+            }
+            else {
+                // For live form, call the update function with selected item
+                if (this.table.editmode === 'form' || this.table.editmode === 'dialog') {
+                    row = evt || this.table.selectedItems[0];
+                    this.table.gridOptions.beforeRowUpdate(row);
+                }
+                else {
+                    // Wait for the selected item to get updated
+                    setTimeout(() => {
+                        row = this.table.datagridElement.find('tr.active');
+                        if (row.length) {
+                            this.table.callDataGridMethod('toggleEditRow', undefined, { $row: row, action: 'edit' });
+                        }
+                    });
+                }
+            }
+            this.table._triggeredByUser = true;
+            //  Fix for [WMS-23263]: set 'isDataUpdatedByUser' flag to false since dataset is not being updated from script
+            this.table.gridOptions.setIsDataUpdatedByUser(false);
+        }
+        addNewRow() {
+            if (!this.table.isGridEditMode) { // If grid is already in edit mode, do not add new row
+                this.table._triggeredByUser = true;
+                //  Fix for [WMS-23263]: set 'isDataUpdatedByUser' flag to false since dataset is not being updated from script
+                this.table.gridOptions.setIsDataUpdatedByUser(false);
+                this.table.callDataGridMethod('addNewRow');
+                if (this.table._liveTableParent) {
+                    this.table._liveTableParent.addNewRow();
+                }
+                else if (this.table._isDependent) {
+                    this.triggerWMEvent('insert');
+                    //this.table.callDataGridMethod('addNewRow');
+                }
+            }
+        }
+        triggerWMEvent(eventName, dataSource) {
+            i2.$invokeWatchers(true);
+            this.app.notify('wm-event', { eventName, widgetName: this.table.name, row: this.table.selecteditem, dataSource: dataSource });
+        }
+        deleteRow(evt) {
+            let row;
+            if (evt && evt.target) {
+                this.table.callDataGridMethod('deleteRowAndUpdateSelectAll', evt);
+            }
+            else {
+                // Wait for the selected item to get updated
+                setTimeout(() => {
+                    row = evt || this.table.selectedItems[0];
+                    this.deleteRecord({ row });
+                });
+            }
+            this.table._triggeredByUser = true;
+            //  Fix for [WMS-23263]: set 'isDataUpdatedByUser' flag to false since dataset is not being updated from script
+            this.table.gridOptions.setIsDataUpdatedByUser(false);
+        }
+        // Function to hide the edited row
+        hideEditRow() {
+            const $row = this.table.datagridElement.find('tr.row-editing');
+            if ($row.length) {
+                this.table.callDataGridMethod('hideRowEditMode', $row);
+            }
+        }
+        // Function to save the row
+        saveRow() {
+            this.table.callDataGridMethod('saveRow');
+        }
+        // Function to cancel the edit
+        cancelRow() {
+            const $row = this.table.datagridElement.find('tr.row-editing');
+            if ($row.length) {
+                this.table.callDataGridMethod('cancelEdit', $row);
+            }
+        }
+        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", ""]] }); }
+    }
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableCUDDirective, [{
+            type: i0.Directive,
+            args: [{
+                    selector: '[wmTableCUD]'
+                }]
+        }], () => [{ type: undefined, decorators: [{
+                    type: i0.Self
+                }, {
+                    type: i0.Inject,
+                    args: [TableComponent]
+                }] }, { type: i2__namespace.AbstractDialogService }, { type: i2__namespace.App }], null); })();
+
+    const emptyMatchModes = ['null', 'empty', 'nullorempty', 'isnotnull', 'isnotempty'];
+    // Get search value based on the time
+    const getSearchValue = (value, type) => {
+        if (!i2.isDefined(value) || value === '') {
+            return undefined;
+        }
+        if (i2.isNumberType(type)) {
+            return lodashEs.toNumber(value);
+        }
+        if (type === i2.DataType.DATETIME) {
+            return moment(value).valueOf();
+        }
+        return lodashEs.toString(value).toLowerCase();
+    };
+    // Filter the data based on the search value and conditions
+    const getFilteredData = (data, searchObj, visibleCols = []) => {
+        const searchVal = getSearchValue(searchObj.value, searchObj.type);
+        let currentVal;
+        // 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) && !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(lodashEs.get(obj, searchObj.field), searchObj.type);
+            }
+            else {
+                currentVal = [];
+                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 = 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);
+                            }
+                        });
+                    }
+                });
+                currentVal = currentVal.join(' ').toLowerCase(); // If field is not there, search on all the columns
+            }
+            switch (searchObj.matchMode) {
+                case 'start':
+                    isExists = lodashEs.startsWith(currentVal, searchVal);
+                    break;
+                case 'end':
+                    isExists = lodashEs.endsWith(currentVal, searchVal);
+                    break;
+                case 'exact':
+                    isExists = lodashEs.isEqual(currentVal, searchVal);
+                    break;
+                case 'notequals':
+                    isExists = !lodashEs.isEqual(currentVal, searchVal);
+                    break;
+                case 'null':
+                    isExists = lodashEs.isNull(currentVal);
+                    break;
+                case 'isnotnull':
+                    isExists = !lodashEs.isNull(currentVal);
+                    break;
+                case 'empty':
+                    isExists = lodashEs.isEmpty(currentVal);
+                    break;
+                case 'isnotempty':
+                    isExists = !lodashEs.isEmpty(currentVal);
+                    break;
+                case 'nullorempty':
+                    isExists = lodashEs.isNull(currentVal) || lodashEs.isEmpty(currentVal);
+                    break;
+                case 'lessthan':
+                    isExists = currentVal < searchVal;
+                    break;
+                case 'lessthanequal':
+                    isExists = currentVal <= searchVal;
+                    break;
+                case 'greaterthan':
+                    isExists = currentVal > searchVal;
+                    break;
+                case 'greaterthanequal':
+                    isExists = currentVal >= searchVal;
+                    break;
+                default:
+                    isExists = i2.isNumberType(searchObj.type) ? lodashEs.isEqual(currentVal, searchVal) : lodashEs.includes(currentVal, searchVal);
+                    break;
+            }
+            return isExists;
+        });
+        return data;
+    };
+    // Set the filter fields when the search value is specified and field is not selected
+    const setAllFilterFields = function (filterFields, searchObj, visibleCols) {
+        visibleCols.forEach(function (field) {
+            filterFields[field] = {
+                'value': searchObj.value,
+                'type': searchObj.value.type,
+                'logicalOp': 'OR'
+            };
+            if (searchObj.matchMode) {
+                filterFields[field].matchMode = searchObj.matchMode;
+            }
+        });
+    };
+    // Set the filter fields as required by datasource
+    const setFilterFields = (filterFields, searchObj, visibleCols = []) => {
+        const field = searchObj && searchObj.field;
+        /*Set the filter options when a field/column has been selected.*/
+        if (field) {
+            filterFields[field] = {
+                'value': searchObj.value,
+                'logicalOp': 'AND'
+            };
+            if (searchObj.matchMode) {
+                filterFields[field].matchMode = searchObj.matchMode;
+            }
+        }
+        else {
+            /*Set the filter options when a field/column hasn't been selected.*/
+            setAllFilterFields(filterFields, searchObj, visibleCols);
+        }
+    };
+    // Transform filter fields from array to object having field names as keys
+    const transformFilterField = (userFilters, filterField) => {
+        if (filterField.field) {
+            userFilters[filterField.field] = {
+                value: filterField.value,
+                matchMode: filterField.matchMode,
+                type: filterField.type
+            };
+        }
+    };
+    // Build a filter Fields object
+    const addToFilterFields = (filterFields, searchObj) => {
+        filterFields.push({
+            field: (searchObj.key) ? searchObj.key : '',
+            matchMode: searchObj.matchMode,
+            type: searchObj.type,
+            value: searchObj.value
+        });
+    };
+    class TableFilterSortDirective {
+        constructor(table) {
+            this.table = table;
+            table._searchSortHandler = this.searchSortHandler.bind(this);
+            table.getSearchResult = this.getSearchResult.bind(this);
+            table.getSortResult = this.getSortResult.bind(this);
+            table.checkFiltersApplied = this.checkFiltersApplied.bind(this);
+            table.getFilterFields = this.getFilterFields.bind(this);
+            table.onRowFilterChange = this.onRowFilterChange.bind(this);
+            table.onFilterConditionSelect = this.onFilterConditionSelect.bind(this);
+            table.showClearIcon = this.showClearIcon.bind(this);
+            table.clearRowFilter = this.clearRowFilter.bind(this);
+            table.matchModeTypesMap = i4.getMatchModeTypesMap();
+            table.matchModeMsgs = i4.getMatchModeMsgs(table.appLocale);
+            table.emptyMatchModes = emptyMatchModes;
+            table.getNavigationTargetBySortInfo = this.getNavigationTargetBySortInfo.bind(this);
+            table.refreshData = this.refreshData.bind(this);
+            table.clearFilter = this.clearFilter.bind(this);
+            table.adjustContainer = this.adjustContainer.bind(this);
+        }
+        adjustContainer(fieldName) {
+            setTimeout(() => {
+                i2.adjustContainerRightEdges($('bs-dropdown-container'), this.table.rowFilterCompliedTl[fieldName], this.table, $('bs-dropdown-container .dropdown-menu'));
+            });
+        }
+        // Get first or last page based on sort info of primary key
+        getNavigationTargetBySortInfo() {
+            return this.table.sortInfo && this.table.sortInfo.direction === 'desc' &&
+                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 = [];
+            lodashEs.forEach(this.table.columns, (val, col) => {
+                if (lodashEs.toLower(lodashEs.toString(val.showinfilter)) === 'true' && col !== 'rowOperations' && val.searchable) {
+                    visibleCols.push(col);
+                }
+            });
+            return visibleCols;
+        }
+        // call the set filter fields function based on the field selected or not
+        invokeSetFilterfieldBasedOnFieldval(searchObj, filterFields) {
+            if (searchObj.field) {
+                setFilterFields(filterFields, searchObj);
+            }
+            else if (!lodashEs.isEmpty(searchObj)) {
+                const visibleCols = this.getTableVisibleCols();
+                setFilterFields(filterFields, searchObj, visibleCols);
+            }
+        }
+        // Get the filter fields as required by datasource
+        getFilterFields(searchObj) {
+            searchObj = searchObj || {};
+            const filterFields = {};
+            if (lodashEs.isArray(searchObj)) {
+                lodashEs.forEach(searchObj, obj => {
+                    this.invokeSetFilterfieldBasedOnFieldval(obj, filterFields);
+                });
+            }
+            else {
+                this.invokeSetFilterfieldBasedOnFieldval(searchObj, filterFields);
+            }
+            return filterFields;
+        }
+        // Get the logical operator for the search filter
+        getLogicalOperator(filterFields) {
+            let operator = '';
+            for (const field in filterFields) {
+                operator = filterFields[field]['logicalOp'] || '';
+                break;
+            }
+            return operator;
+        }
+        // Reset the sort based on sort returned by the call
+        resetSortStatus(variableSort) {
+            let gridSortString;
+            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 = lodashEs.head(lodashEs.split(variableSort, ','));
+                }
+                if (gridSortString !== variableSort) {
+                    this.table.callDataGridMethod('resetSortIcons');
+                    this.table.sortInfo = {};
+                    this.table.setDataGridOption('sortInfo', {});
+                }
+            }
+        }
+        // Clear the all the filters applied
+        clearFilter(skipFilter) {
+            let $gridElement;
+            this.table.filterInfo = {};
+            if (this.table.filtermode === 'multicolumn') {
+                this.table.fieldDefs.forEach(col => {
+                    if (col.resetFilter) {
+                        col.resetFilter();
+                    }
+                });
+                if (!skipFilter) {
+                    this.table.onRowFilterChange();
+                }
+            }
+            else if (this.table.filtermode === 'search') {
+                $gridElement = this.table.datagridElement;
+                $gridElement.find('[data-element="dgSearchText"]').val('');
+                $gridElement.find('[data-element="dgFilterValue"]').val('');
+                if (!skipFilter) {
+                    $gridElement.find('.app-search-button').trigger('click');
+                }
+            }
+        }
+        // Check the filters applied and remove if dat does not contain any filters
+        checkFiltersApplied(variableSort) {
+            if (!this.table.datasource) {
+                return;
+            }
+            if (this.table.datasource.execute(i2.DataSource.Operation.SUPPORTS_SERVER_FILTER)) {
+                if (lodashEs.isEmpty(this.table.datasource.execute(i2.DataSource.Operation.GET_OPTIONS).filterFields)) {
+                    this.clearFilter(true);
+                }
+                this.resetSortStatus(variableSort);
+                return;
+            }
+            if (this.table.datasource.execute(i2.DataSource.Operation.IS_PAGEABLE)) {
+                this.resetSortStatus(variableSort);
+            }
+        }
+        // Returns data filtered using searchObj
+        getSearchResult(data, searchObj) {
+            const visibleCols = this.getTableVisibleCols();
+            if (!searchObj) {
+                return data;
+            }
+            if (lodashEs.isArray(searchObj)) {
+                searchObj.forEach((obj) => {
+                    data = getFilteredData(data, obj, visibleCols);
+                });
+            }
+            else {
+                data = getFilteredData(data, searchObj, visibleCols);
+            }
+            return data;
+        }
+        // Returns data sorted using sortObj
+        getSortResult(data, sortObj) {
+            if (sortObj && sortObj.direction) {
+                data = lodashEs.orderBy(data, sortObj.field, sortObj.direction);
+            }
+            return data;
+        }
+        // This method handles the client side sort and search
+        handleClientSideSortSearch(searchSortObj, e, type) {
+            this.table._isClientSearch = true;
+            let data;
+            data = this.table.isNavigationEnabled() ? i2.getClonedObject(this.table.__fullData) : i2.getClonedObject(this.table.dataset);
+            if (type === 'search') {
+                this.table.filterInfo = searchSortObj;
+            }
+            else {
+                this.table.sortInfo = searchSortObj;
+            }
+            if (lodashEs.isObject(data) && !lodashEs.isArray(data)) {
+                data = [data];
+            }
+            /*Both the functions return same 'data' if arguments are undefined*/
+            data = this.getSearchResult(data, this.table.filterInfo);
+            data = this.getSortResult(data, this.table.sortInfo);
+            this.table.serverData = data;
+            if (type === 'sort') {
+                // Calling 'onSort' event
+                this.table.invokeEventCallback('sort', { $event: e, $data: {
+                        data: this.table.serverData,
+                        sortDirection: this.table.sortInfo.direction,
+                        colDef: this.table.columns[this.table.sortInfo.field]
+                    } });
+            }
+            if (this.table.isNavigationEnabled()) {
+                // Reset the page number to 1
+                this.table.dataNavigator.dn.currentPage = 1;
+                this.table.dataNavigator.setPagingValues(data);
+            }
+            else {
+                this.table.setGridData(this.table.serverData);
+            }
+        }
+        // This method handles the search for pageable datasource
+        handleSinglePageSearch(searchObj) {
+            this.table._isPageSearch = true;
+            let data = i2.getClonedObject(this.table.gridData);
+            const $rows = this.table.datagridElement.find('tbody tr.app-datagrid-row');
+            this.table.filterInfo = searchObj;
+            data = this.getSearchResult(data, searchObj);
+            // Compared the filtered data and original data, to show or hide the rows
+            lodashEs.forEach(this.table.gridData, (value, index) => {
+                const $row = $($rows[index]);
+                if (lodashEs.find(data, obj => lodashEs.isEqual(obj, value))) {
+                    $row.show();
+                }
+                else {
+                    $row.hide();
+                }
+            });
+            if (data && data.length) {
+                this.table.callDataGridMethod('setStatus', 'ready');
+                // Select the first row after the search for single select
+                if (this.table.gridfirstrowselect && !this.table.multiselect) {
+                    this.table.callDataGridMethod('selectFirstRow', true, true);
+                }
+            }
+            else {
+                this.table.callDataGridMethod('setStatus', 'nodata', this.table.nodatamessage);
+                this.table.selecteditem = undefined;
+            }
+            this.table.callDataGridMethod('updateSelectAllCheckboxState');
+        }
+        // This method handles the search for server side variables
+        handleServerSideSearch(searchObj) {
+            this.table.filterInfo = searchObj;
+            if (!this.table.datasource) {
+                return;
+            }
+            const sortInfo = this.table.sortInfo;
+            const sortOptions = sortInfo && sortInfo.direction ? (sortInfo.field + ' ' + sortInfo.direction) : '';
+            const filterFields = this.getFilterFields(searchObj);
+            const logicalOp = this.getLogicalOperator(filterFields);
+            i4.refreshDataSource(this.table.datasource, {
+                page: 1,
+                filterFields: filterFields,
+                orderBy: sortOptions,
+                condition: logicalOp
+            }).then(() => {
+                i2.$appDigest();
+            }, () => {
+                this.table.toggleMessage(true, 'error', this.table.nodatamessage);
+            });
+        }
+        // This method handles the sort for server side variables
+        handleSeverSideSort(sortObj, e, statePersistenceTriggered) {
+            // Update the sort info for passing to datagrid
+            this.table.gridOptions.sortInfo.field = sortObj.field;
+            this.table.gridOptions.sortInfo.direction = sortObj.direction;
+            this.table.sortInfo = i2.getClonedObject(sortObj);
+            const sortOptions = sortObj && sortObj.direction ? (sortObj.field + ' ' + sortObj.direction) : '';
+            const filterFields = this.getFilterFields(this.table.filterInfo);
+            const condition = this.getLogicalOperator(filterFields);
+            if (!statePersistenceTriggered && this.table.getConfiguredState() !== 'none') {
+                this.table.statePersistence.removeWidgetState(this.table, 'pagination');
+            }
+            i4.refreshDataSource(this.table.datasource, {
+                page: 1,
+                filterFields: filterFields,
+                orderBy: sortOptions,
+                condition: condition
+            }).then((response) => {
+                i2.$appDigest();
+                const data = (response && response.data) ? response.data : response;
+                this.table.invokeEventCallback('sort', { $event: e, $data: {
+                        data,
+                        sortDirection: sortObj.direction,
+                        colDef: this.table.columns[sortObj.field]
+                    }
+                });
+            });
+        }
+        searchHandler(searchSortObj, e, type, statePersistenceTriggered) {
+            let obj;
+            if (lodashEs.isArray(searchSortObj)) {
+                obj = searchSortObj.filter(function (searchObject) {
+                    return (searchObject.matchMode !== undefined && searchObject.value !== undefined) || (searchObject.value !== undefined && searchObject.field === '');
+                });
+            }
+            else {
+                obj = { field: searchSortObj.field, value: searchSortObj.value, type: searchSortObj.type };
+            }
+            if (this.table.getConfiguredState() !== 'none' && i4.unsupportedStatePersistenceTypes.indexOf(this.table.navigation) < 0) {
+                if ((lodashEs.isArray(searchSortObj) && obj.length) || (searchSortObj.value)) {
+                    this.table.statePersistence.removeWidgetState(this.table, 'search');
+                    this.table.statePersistence.setWidgetState(this.table, { search: obj });
+                }
+                else {
+                    this.table.statePersistence.removeWidgetState(this.table, 'search');
+                }
+                if (!statePersistenceTriggered) {
+                    this.table.statePersistence.removeWidgetState(this.table, 'pagination');
+                    this.table.statePersistence.removeWidgetState(this.table, 'selectedItem');
+                }
+            }
+            else {
+                console.warn('Retain State handling on Widget ' + this.table.name + ' is not supported for current pagination type.');
+            }
+            let filterFields = i2.getClonedObject(searchSortObj);
+            const dataSource = this.table.datasource;
+            if (!dataSource && !this.table.dataset) {
+                return;
+            }
+            let output;
+            const userFilters = {};
+            // Transform filter fields from array to object having field names as keys
+            if (lodashEs.isArray(filterFields)) {
+                filterFields.forEach(filterField => {
+                    transformFilterField(userFilters, filterField);
+                });
+            }
+            else {
+                transformFilterField(userFilters, filterFields);
+            }
+            output = this.table.invokeEventCallback('beforefilter', { $event: e, $data: userFilters, columns: userFilters });
+            // If callback returns false, don't trigger the filter call
+            if (output === false) {
+                return;
+            }
+            filterFields = [];
+            // if the field is not selected in search filter dropdown, building the filter fields object
+            if (lodashEs.isEmpty(userFilters) && !lodashEs.isEmpty(obj)) {
+                if (lodashEs.isArray(obj)) {
+                    lodashEs.forEach(obj, searchObj => {
+                        addToFilterFields(filterFields, searchObj);
+                    });
+                }
+                else {
+                    addToFilterFields(filterFields, obj);
+                }
+            }
+            else {
+                // Transform back the filter fields from object to array
+                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)) {
+                this.handleServerSideSearch(filterFields);
+                return;
+            }
+            if (dataSource && dataSource.execute(i2.DataSource.Operation.IS_API_AWARE) && dataSource.execute(i2.DataSource.Operation.IS_PAGEABLE)) {
+                this.handleSinglePageSearch(filterFields);
+            }
+            else {
+                this.handleClientSideSortSearch(filterFields, e, type);
+            }
+        }
+        sortHandler(searchSortObj, e, type, statePersistenceTriggered) {
+            const dataSource = this.table.datasource;
+            if (!dataSource && !this.table.dataset) {
+                return;
+            }
+            if (!statePersistenceTriggered && this.table.getConfiguredState() !== 'none' && i4.unsupportedStatePersistenceTypes.indexOf(this.table.navigation) < 0) {
+                const obj = { direction: searchSortObj.direction, field: searchSortObj.field };
+                if (searchSortObj.direction) {
+                    this.table.statePersistence.setWidgetState(this.table, { sort: obj });
+                }
+                else {
+                    this.table.statePersistence.removeWidgetState(this.table, 'sort');
+                }
+                this.table.statePersistence.removeWidgetState(this.table, 'selectedItem');
+            }
+            else {
+                console.warn('Retain State handling on Widget ' + this.table.name + ' is not supported for current pagination type.');
+            }
+            // WMS-22387: For server side pagination, execute client side sorting
+            if (dataSource && dataSource.execute(i2.DataSource.Operation.IS_SORTABLE)) {
+                this.handleSeverSideSort(searchSortObj, e, statePersistenceTriggered);
+            }
+            else {
+                this.handleClientSideSortSearch(searchSortObj, e, type);
+            }
+        }
+        // set the 'lastAction' performed on the table to 'search_or_sort'
+        setLastActionPerformedToSearchSort() {
+            this.table.gridOptions.setLastActionPerformed(this.table.gridOptions.ACTIONS.SEARCH_OR_SORT);
+            this.table.gridOptions.setIsSearchTrigerred(true);
+        }
+        // This method is triggered by jquery table
+        searchSortHandler(searchSortObj, e, type, statePersistenceTriggered) {
+            const event_type = e ? e.type : '';
+            if (event_type === 'change' && this.table.filtermode !== 'multicolumn') {
+                e.stopPropagation();
+            }
+            else {
+                this.setLastActionPerformedToSearchSort();
+                if (type === 'search') {
+                    this.searchHandler(searchSortObj, e, type, statePersistenceTriggered);
+                }
+                else {
+                    this.sortHandler(searchSortObj, e, type, statePersistenceTriggered);
+                }
+            }
+        }
+        // Method to show/hide clear icon in multi column filter
+        showClearIcon(fieldName) {
+            const value = this.table.rowFilter[fieldName] && this.table.rowFilter[fieldName].value;
+            return i2.isDefined(value) && value !== '' && value !== null;
+        }
+        // Method clear the filter value in multi column filter
+        clearRowFilter(fieldName) {
+            if (this.table.rowFilter && this.table.rowFilter[fieldName]) {
+                this.table.columns[fieldName].resetFilter();
+                this.onRowFilterChange(fieldName);
+            }
+        }
+        // This method is triggered on select of condition in multi column filter
+        onFilterConditionSelect(fieldName, condition) {
+            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 (lodashEs.includes(this.table.emptyMatchModes, condition)) {
+                this.table.columns[fieldName].resetFilter();
+                this.table.onRowFilterChange();
+            }
+            else {
+                // If value is present, call the filter. Else, focus on the field
+                if (i2.isDefined(this.table.rowFilter[fieldName].value) && this.table.rowFilter[fieldName].value !== '') {
+                    this.table.onRowFilterChange();
+                }
+                else {
+                    setTimeout(() => {
+                        this.table.columns[fieldName].filterInstance.focus();
+                    });
+                }
+            }
+        }
+        // Method to get the updated values when filter on field is changed for multicolumn filter
+        getFilterOnFieldValues(filterDef) {
+            if (!this.table.datasource || !this.table.datasource.execute(i2.DataSource.Operation.SUPPORTS_DISTINCT_API)) {
+                return;
+            }
+            const fieldName = filterDef.field;
+            const formFields = this.table.fullFieldDefs;
+            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
+            lodashEs.forEach(filterOnFields, filterField => {
+                const filterOn = filterField.filteronfilter;
+                const filterKey = filterField.field;
+                const filterFields = {};
+                const filterWidget = filterField.filterwidget;
+                if (!i4.isDataSetWidget(filterWidget) || filterOn === filterKey || filterField.isFilterDataSetBound) {
+                    return;
+                }
+                filterFields[filterOn] = (i2.isDefined(newVal) && newVal !== '' && newVal !== null) ? { 'value': newVal } : {};
+                if (filterWidget === i2.FormWidgetType.AUTOCOMPLETE && filterField.filterInstance.dataoptions) {
+                    filterField.filterInstance.dataoptions.filterFields = filterFields;
+                }
+                else {
+                    this.table.datasource.execute(i2.DataSource.Operation.GET_DISTINCT_DATA_BY_FIELDS, {
+                        'fields': filterKey,
+                        'filterFields': filterFields
+                    }).then(data => {
+                        filterField.filterdataset = data.data;
+                    });
+                }
+            });
+        }
+        // This method is triggered on value change in multi column filter
+        onRowFilterChange(fieldName) {
+            const searchObj = [];
+            const field = lodashEs.find(this.table.fullFieldDefs, { 'field': fieldName });
+            // Convert row filters to a search object and call search handler
+            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 || lodashEs.get(this.table.matchModeTypesMap[value.type], 0);
+                    }
+                    searchObj.push({
+                        field: key,
+                        value: value.value,
+                        matchMode: value.matchMode,
+                        type: value.type
+                    });
+                }
+            });
+            this.table.gridOptions.searchHandler(searchObj, undefined, 'search');
+            // If field is passed, update any filter on field values if present
+            if (field) {
+                this.getFilterOnFieldValues(field);
+            }
+        }
+        refreshData(isSamePage) {
+            if (!this.table.datasource) {
+                return;
+            }
+            const page = isSamePage ? this.table.dataNavigator.dn.currentPage : 1;
+            const sortInfo = this.table.sortInfo;
+            const sortOptions = sortInfo && sortInfo.direction ? (sortInfo.field + ' ' + sortInfo.direction) : '';
+            const filterFields = this.getFilterFields(this.table.filterInfo);
+            const logicalOp = this.getLogicalOperator(filterFields);
+            i4.refreshDataSource(this.table.datasource, {
+                page: page,
+                filterFields: filterFields,
+                orderBy: sortOptions,
+                condition: logicalOp
+            });
+        }
+        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", ""]] }); }
+    }
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableFilterSortDirective, [{
+            type: i0.Directive,
+            args: [{
+                    selector: '[wmTableFilterSort]'
+                }]
+        }], () => [{ type: undefined, decorators: [{
+                    type: i0.Self
+                }, {
+                    type: i0.Inject,
+                    args: [TableComponent]
+                }] }], null); })();
+
+    const registerProps$4 = () => {
+        i4.register('wm-table-action', new Map([
+            ['accessroles', i4.PROP_STRING],
+            ['action', i4.PROP_STRING],
+            ['caption', i4.PROP_STRING],
+            ['class', i4.PROP_STRING],
+            ['conditionalclass', i4.PROP_ANY],
+            ['conditionalstyle', i4.PROP_ANY],
+            ['disabled', { value: false, ...i4.PROP_BOOLEAN }],
+            ['display-name', i4.PROP_STRING],
+            ['hyperlink', i4.PROP_STRING],
+            ['icon', i4.PROP_STRING],
+            ['iconclass', i4.PROP_STRING],
+            ['key', i4.PROP_STRING],
+            ['position', { value: 'footer', ...i4.PROP_STRING }],
+            ['shortcutkey', i4.PROP_STRING],
+            ['show', { value: true, ...i4.PROP_BOOLEAN }],
+            ['tabindex', { value: 0, ...i4.PROP_NUMBER }],
+            ['title', i4.PROP_STRING],
+            ['target', i4.PROP_STRING],
+            ['widget-type', { value: 'button', ...i4.PROP_STRING }]
+        ]));
+    };
+
+    const WIDGET_CONFIG$4 = { widgetType: 'wm-table-action', hostClass: '' };
+    class TableActionDirective extends i4.BaseComponent {
+        static { this.initializeProps = registerProps$4(); }
+        constructor(inj, table, explicitContext) {
+            super(inj, WIDGET_CONFIG$4, explicitContext);
+            this.table = table;
+        }
+        populateAction() {
+            this.buttonDef = {
+                key: this.key,
+                displayName: this['display-name'] || this.caption || '',
+                show: this.show,
+                class: this.class || '',
+                iconclass: this.iconclass || '',
+                title: lodashEs.isUndefined(this.title) ? (this['display-name'] || '') : this.title,
+                action: this.action,
+                accessroles: this.accessroles,
+                shortcutkey: this.shortcutkey,
+                disabled: this.disabled,
+                tabindex: this.tabindex,
+                icon: this.icon,
+                position: this.position,
+                widgetType: this['widget-type'],
+                hyperlink: this.hyperlink,
+                target: this.target || '',
+                conditionalclass: this.conditionalclass || '',
+                conditionalstyle: this.conditionalstyle || {}
+            };
+            this._propsInitialized = true;
+        }
+        ngOnInit() {
+            super.ngOnInit();
+            this.populateAction();
+            this.table.registerActions(this.buttonDef);
+        }
+        onPropertyChange(key, nv) {
+            if (!this._propsInitialized) {
+                return;
+            }
+            if (key === 'display-name') {
+                this.buttonDef.displayName = nv;
+            }
+            else {
+                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), 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] }); }
+    }
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableActionDirective, [{
+            type: i0.Directive,
+            args: [{
+                    selector: '[wmTableAction]',
+                    providers: [
+                        i4.provideAsWidgetRef(TableActionDirective)
+                    ]
+                }]
+        }], () => [{ type: i0__namespace.Injector }, { type: TableComponent, decorators: [{
+                    type: i0.Optional
+                }] }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], null); })();
+
+    const registerProps$3 = () => {
+        i4.register('wm-table-column', new Map([
+            ['accessroles', i4.PROP_STRING],
+            ['autoclose', { value: 'outsideClick', ...i4.PROP_STRING }],
+            ['backgroundcolor', i4.PROP_STRING],
+            ['binding', i4.PROP_STRING],
+            ['caption', i4.PROP_STRING],
+            ['checkedvalue', i4.PROP_STRING],
+            ['col-class', i4.PROP_STRING],
+            ['collapsible', i4.PROP_BOOLEAN],
+            ['col-ng-class', i4.PROP_STRING],
+            ['currencypattern', i4.PROP_STRING],
+            ['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],
+            ['dataset', i4.PROP_ANY],
+            ['datasource', i4.PROP_STRING],
+            ['dateformat', i4.PROP_STRING],
+            ['datepattern', i4.PROP_STRING],
+            ['debouncetime', { value: 250, ...i4.PROP_NUMBER }],
+            ['defaultvalue', i4.PROP_STRING],
+            ['disabled', i4.PROP_BOOLEAN],
+            ['displayfield', i4.PROP_STRING],
+            ['displaylabel', i4.PROP_STRING],
+            ['editdatepattern', i4.PROP_STRING],
+            ['outputformat', i4.PROP_STRING],
+            ['edit-widget-type', i4.PROP_STRING],
+            ['showineditmode', i4.PROP_BOOLEAN],
+            ['editinputtype', i4.PROP_STRING],
+            ['exportexpression', i4.PROP_STRING],
+            ['filterdataset', i4.PROP_STRING],
+            ['filterdatafield', i4.PROP_STRING],
+            ['filterdisplayfield', i4.PROP_STRING],
+            ['filterdisplaylabel', i4.PROP_STRING],
+            ['filterexpressions', { value: '{}', ...i4.PROP_STRING }],
+            ['filtersearchkey', i4.PROP_STRING],
+            ['filter-on', i4.PROP_STRING],
+            ['filteronfilter', i4.PROP_STRING],
+            ['filterplaceholder', i4.PROP_STRING],
+            ['filterwidget', i4.PROP_STRING],
+            ['filterinputtype', i4.PROP_STRING],
+            ['formatpattern', i4.PROP_STRING],
+            ['custompipeformat', i4.PROP_STRING],
+            ['fractionsize', i4.PROP_STRING],
+            ['generator', i4.PROP_STRING],
+            ['groupby', i4.PROP_STRING],
+            ['limit', i4.PROP_NUMBER],
+            ['match', i4.PROP_STRING],
+            ['matchmode', i4.PROP_STRING],
+            ['maxchars', i4.PROP_NUMBER],
+            ['maxvalue', i4.PROP_NUMBER],
+            ['step', i4.PROP_NUMBER],
+            ['mobiledisplay', { value: true, ...i4.PROP_BOOLEAN }],
+            ['minvalue', i4.PROP_NUMBER],
+            ['maxdate', i4.PROP_STRING],
+            ['mindate', i4.PROP_STRING],
+            ['excludedays', i4.PROP_STRING],
+            ['excludedates', i4.PROP_STRING],
+            ['maxtime', i4.PROP_STRING],
+            ['mintime', i4.PROP_STRING],
+            ['pcdisplay', { value: true, ...i4.PROP_BOOLEAN }],
+            ['period', i4.PROP_BOOLEAN],
+            ['placeholder', i4.PROP_STRING],
+            ['prefix', i4.PROP_STRING],
+            ['primary-key', i4.PROP_BOOLEAN],
+            ['readonly', i4.PROP_BOOLEAN],
+            ['regexp', i4.PROP_ANY],
+            ['related-entity-name', i4.PROP_STRING],
+            ['required', i4.PROP_BOOLEAN],
+            ['rowactionsposition', i4.PROP_STRING],
+            ['searchkey', i4.PROP_STRING],
+            ['searchable', { value: true, ...i4.PROP_BOOLEAN }],
+            ['showinfilter', { value: false, ...i4.PROP_BOOLEAN }],
+            ['suffix', i4.PROP_STRING],
+            ['show', { value: true, ...i4.PROP_BOOLEAN }],
+            ['showcount', i4.PROP_BOOLEAN],
+            ['showdropdownon', { value: 'default', ...i4.PROP_STRING }],
+            ['sortable', { value: true, ...i4.PROP_BOOLEAN }],
+            ['tabletdisplay', { value: true, ...i4.PROP_BOOLEAN }],
+            ['textalignment', { value: 'left', ...i4.PROP_STRING }],
+            ['textcolor', i4.PROP_STRING],
+            ['type', { value: 'string', ...i4.PROP_STRING }],
+            ['uncheckedvalue', i4.PROP_STRING],
+            ['validationmessage', i4.PROP_STRING],
+            ['widget-type', i4.PROP_STRING],
+            ['width', i4.PROP_STRING],
+        ]));
+    };
+
+    const registerProps$2 = () => {
+        i4.register('wm-table-column-group', new Map([
+            ['backgroundcolor', i4.PROP_STRING],
+            ['caption', i4.PROP_STRING],
+            ['col-class', i4.PROP_STRING],
+            ['name', i4.PROP_STRING],
+            ['textalignment', { value: 'center', ...i4.PROP_STRING }]
+        ]));
+    };
+
+    const WIDGET_CONFIG$3 = { widgetType: 'wm-table-column-group', hostClass: '' };
+    class TableColumnGroupDirective extends i4.BaseComponent {
+        static { this.initializeProps = registerProps$2(); }
+        constructor(inj, group, table, explicitContext) {
+            super(inj, WIDGET_CONFIG$3, explicitContext);
+            this.group = group;
+            this.table = table;
+            this.config = {};
+        }
+        populateConfig() {
+            this.config = {
+                field: this.name,
+                displayName: this.caption || '',
+                columns: [],
+                isGroup: true,
+                accessroles: this.accessroles,
+                textAlignment: this.textalignment || 'center',
+                backgroundColor: this.backgroundcolor,
+                class: this['col-class']
+            };
+        }
+        onPropertyChange(key, nv, ov) {
+            if (key === 'caption') {
+                this.config.displayName = nv || '';
+                this.table.callDataGridMethod('setColumnProp', this.config.field, 'displayName', nv, true);
+            }
+            else {
+                super.onPropertyChange(key, nv, ov);
+            }
+        }
+        ngOnInit() {
+            super.ngOnInit();
+            this.populateConfig();
+            // when group is inside another group (i.e. sub-level column-group) then consider the col index and not header index.
+            const headerIndex = parseInt(this.getAttr('headerIndex'), 10);
+            const colIndex = parseInt(this.getAttr('index'), 10);
+            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), 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] }); }
+    }
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableColumnGroupDirective, [{
+            type: i0.Directive,
+            args: [{
+                    selector: '[wmTableColumnGroup]',
+                    providers: [
+                        i4.provideAsWidgetRef(TableColumnGroupDirective)
+                    ]
+                }]
+        }], () => [{ type: i0__namespace.Injector }, { type: TableColumnGroupDirective, decorators: [{
+                    type: i0.SkipSelf
+                }, {
+                    type: i0.Optional
+                }] }, { type: TableComponent, decorators: [{
+                    type: i0.Optional
+                }] }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], null); })();
+
+    const _c0 = ["customExprTmpl"];
+    const _c1 = ["inlineWidgetTmpl"];
+    const _c2 = ["filterTmpl"];
+    const _c3 = ["filterWidget"];
+    const _c4 = ["inlineWidget"];
+    const _c5 = ["inlineWidgetNew"];
+    const WIDGET_CONFIG$2 = { widgetType: 'wm-table-column', hostClass: '' };
+    let inlineWidgetProps = ['datafield', 'displayfield', 'placeholder', 'searchkey', 'matchmode', 'displaylabel', 'groupby', 'match', 'dateformat', 'showcount', 'collapsible',
+        'checkedvalue', 'uncheckedvalue', 'showdropdownon', 'dataentrymode', 'autoclose', 'dataset', 'outputformat'];
+    const validationProps = ['maxchars', 'regexp', 'minvalue', 'maxvalue', 'step', 'required', 'mindate', 'maxdate',
+        'excludedates', 'excludedays', 'mintime', 'maxtime'];
+    inlineWidgetProps = [...inlineWidgetProps, ...validationProps];
+    class FieldDef {
+        constructor(widget) {
+            this.widget = widget;
+        }
+        focus() {
+            this.widget.focus();
+        }
+        setProperty(prop, newval) {
+            // Get the scope of the current editable widget and set the value
+            prop = prop === 'value' ? 'datavalue' : prop;
+            this.widget[prop] = newval;
+        }
+        getProperty(prop) {
+            prop = prop === 'value' ? 'datavalue' : prop;
+            return this.widget[prop];
+        }
+    }
+    class TableColumnDirective extends i4.BaseComponent {
+        static { this.initializeProps = registerProps$3(); }
+        constructor(inj, appDefaults, table, group, bindfilterdataset, binddataset, explicitContext) {
+            super(inj, WIDGET_CONFIG$2, explicitContext);
+            this.appDefaults = appDefaults;
+            this.table = table;
+            this.group = group;
+            this.bindfilterdataset = bindfilterdataset;
+            this.binddataset = binddataset;
+            this.syncValidators = [];
+            this.asyncValidators = [];
+            this.observeOnFields = [];
+            this.aggregate = {
+                sum: () => {
+                    return lodashEs.sum(this._getColumnData());
+                },
+                average: (precision = 2) => {
+                    return lodashEs.round(lodashEs.mean(this._getColumnData()), precision);
+                },
+                count: () => {
+                    return this._getColumnData().length;
+                },
+                minimum: () => {
+                    return lodashEs.min(this._getColumnData());
+                },
+                maximum: () => {
+                    return lodashEs.max(this._getColumnData());
+                },
+                percent: (value, precision = 2) => {
+                    return lodashEs.round((lodashEs.sum(this._getColumnData()) / value) * 100, precision);
+                }
+            };
+            this.notifyForFields = [];
+        }
+        get dataoptions() {
+            return this._dataoptions;
+        }
+        set dataoptions(options) {
+            this._dataoptions = options;
+        }
+        get datasource() {
+            return this._datasource;
+        }
+        set datasource(ds) {
+            this._datasource = ds;
+        }
+        ngOnInit() {
+            super.ngOnInit();
+            // Set the default values and register with table
+            this.populateFieldDef();
+            // when column is inside a group then consider the col index and not header index.
+            const colIndex = parseInt(this.getAttr('index'), 10);
+            const headerIndex = parseInt(this.getAttr('headerIndex'), 10);
+            const fieldName = this.group && this.group.name;
+            // Register column with header config to create group structure
+            i4.setHeaderConfigForTable(this.table.headerConfig, {
+                field: this.field,
+                displayName: this.displayName
+            }, fieldName, fieldName ? colIndex : headerIndex);
+            this.table.registerColumns(this.widget, colIndex);
+            this._isRowFilter = this.table.filtermode === 'multicolumn' && this.searchable;
+            this._isInlineEditable = !this.readonly && (this.table.editmode !== i4.EDIT_MODE.DIALOG && this.table.editmode !== i4.EDIT_MODE.FORM);
+            this._isNewEditableRow = this._isInlineEditable && this.table.editmode === i4.EDIT_MODE.QUICK_EDIT && this.table.shownewrow;
+            this.setUpControls();
+            this._propsInitialized = true;
+            // Inline control status change subscriber
+            if (this.getFormControl()) {
+                const onStatusChangeSubscription = this.getFormControl().statusChanges
+                    .pipe(operators.debounceTime(100))
+                    .subscribe(status => this.onStatusChange(status, 'inlineInstance'));
+                this.registerDestroyListener(() => onStatusChangeSubscription.unsubscribe());
+                // Instantiate custom validators class for inline edit form control
+                this.fieldValidations = new i4.BaseFieldValidations(this, this['inlineInstance'], this.editWidgetType, this.getFormControl(), this.table, 'inlineInstance');
+            }
+            // Quick edit new row control status change subscriber
+            if (this._checkNewEditableRowControl()) {
+                const onStatusChangeSubscription_new = this.getFormControl('_new').statusChanges
+                    .pipe(operators.debounceTime(100))
+                    .subscribe(status => this.onStatusChange(status, 'inlineInstanceNew'));
+                this.registerDestroyListener(() => onStatusChangeSubscription_new.unsubscribe());
+                // Instantiate custom validators class for Quick edit newrow form control
+                this.fieldValidations_new = new i4.BaseFieldValidations(this, this['inlineInstanceNew'], this.editWidgetType, this.getFormControl('_new'), this.table, 'inlineInstanceNew');
+            }
+        }
+        ngAfterContentInit() {
+            if (this._isRowFilter) {
+                // Listen on the inner row filter widget and setup the widget
+                const s1 = this._filterInstances.changes.subscribe((val) => {
+                    this.filterInstance = val.first && val.first.widget;
+                    this.setUpFilterWidget();
+                });
+                this.registerDestroyListener(() => s1.unsubscribe());
+            }
+            if (this._isInlineEditable) {
+                const s2 = this._inlineInstances.changes.subscribe((val) => {
+                    // Listen on the inner inline widget and setup the widget
+                    this.inlineInstance = val.first && val.first.widget;
+                    this.fieldValidations.formwidget = val.first;
+                    this.table.registerFormField(this.binding, new FieldDef(this.inlineInstance));
+                    this.setUpInlineWidget('inlineInstance');
+                });
+                this.registerDestroyListener(() => s2.unsubscribe());
+                if (this._isNewEditableRow) {
+                    const s3 = this._inlineInstancesNew.changes.subscribe((val) => {
+                        // Listen on the inner inline widget and setup the widget
+                        this.inlineInstanceNew = val.first && val.first.widget;
+                        this.fieldValidations_new.formwidget = val.first;
+                        this.setUpInlineWidget('inlineInstanceNew');
+                    });
+                    this.registerDestroyListener(() => s3.unsubscribe());
+                }
+            }
+            this.registerReadyStateListener(() => {
+                this.key = this.field || this.binding;
+            });
+            super.ngAfterContentInit();
+            if (this.table.isdynamictable) {
+                this.table.inlineWidgetTmpl._results.push(this.inlineWidthTempRef);
+            }
+        }
+        ngAfterViewInit() {
+            // manually listing the table column templateRef as templateRef will not be available prior.
+            if (this.filterTemplateRef) {
+                this.table.renderDynamicFilterColumn(this.filterTemplateRef);
+            }
+        }
+        // Apply default|sync|async|prop validators for inline form control
+        applyValidations() {
+            if (!this.getFormControl()) {
+                return;
+            }
+            if (this.syncValidators.length > 0) {
+                this.fieldValidations.setValidators(this.syncValidators);
+            }
+            this.fieldValidations.setUpValidators();
+            if (this.asyncValidators.length > 0) {
+                this.fieldValidations.setAsyncValidators(this.asyncValidators);
+            }
+            if (this.observeOnFields.length > 0) {
+                this.fieldValidations.observeOn(this.observeOnFields, 'columns');
+            }
+        }
+        // Remove validators for the inline widget and set form to untouched
+        removeValidations() {
+            this.table.ngform.markAsUntouched();
+            const control = this.getFormControl();
+            if (!control) {
+                return;
+            }
+            control.clearValidators();
+            control.clearAsyncValidators();
+            control.updateValueAndValidity();
+        }
+        // Apply default|sync|async|prop validators for QuickEdit new row form control
+        applyNewRowValidations() {
+            if (!this._checkNewEditableRowControl()) {
+                return;
+            }
+            if (this.syncValidators.length > 0) {
+                this.fieldValidations_new.setValidators(this.syncValidators);
+            }
+            this.fieldValidations_new.setUpValidators();
+            if (this.asyncValidators.length > 0) {
+                this.fieldValidations_new.setAsyncValidators(this.asyncValidators);
+            }
+            if (this.observeOnFields.length > 0) {
+                this.fieldValidations_new.observeOn(this.observeOnFields, 'columns');
+            }
+        }
+        // Remove validators for the QuickEdit new row widget and set form to untouched
+        removeNewRowValidations() {
+            this.table.ngform.markAsUntouched();
+            if (!this._checkNewEditableRowControl()) {
+                return;
+            }
+            const control = this.getFormControl('_new');
+            control.clearValidators();
+            control.clearAsyncValidators();
+            control.updateValueAndValidity();
+        }
+        addFormControl(suffix) {
+            const ctrlName = suffix ? (this.binding + suffix) : this.binding;
+            this.table.ngform.addControl(ctrlName, this.table.fb.control(''));
+        }
+        getFormControl(suffix) {
+            const ctrlName = suffix ? (this.binding + suffix) : this.binding;
+            return this.table.ngform.controls[ctrlName];
+        }
+        _checkNewEditableRowControl() {
+            return this._isNewEditableRow && this.getFormControl('_new');
+        }
+        // Setup the inline edit and filter widget
+        setUpControls() {
+            if (this._isInlineEditable) {
+                if (this.editWidgetType === i2.FormWidgetType.UPLOAD) {
+                    return;
+                }
+                this.addFormControl();
+                const control = this.getFormControl();
+                if (control) {
+                    const onValueChangeSubscription = control.valueChanges
+                        .pipe(operators.debounceTime(200))
+                        .subscribe(value => this.onValueChange(value, 'inlineInstance'));
+                    this.registerDestroyListener(() => onValueChangeSubscription.unsubscribe());
+                }
+                if (this._isNewEditableRow) {
+                    this.addFormControl('_new');
+                    const newControl = this.getFormControl('_new');
+                    if (newControl) {
+                        const onNewValueChangeSubscription = newControl.valueChanges
+                            .pipe(operators.debounceTime(200))
+                            .subscribe(value => this.onValueChange(value, 'inlineInstanceNew'));
+                        this.registerDestroyListener(() => onNewValueChangeSubscription.unsubscribe());
+                    }
+                }
+            }
+            if (this._isRowFilter) {
+                this.addFormControl('_filter');
+                this.filterControl = this.getFormControl('_filter');
+                if (this.filterControl) {
+                    const onFilterValueSubscription = this.filterControl.valueChanges.subscribe(this.onFilterValueChange.bind(this));
+                    this.registerDestroyListener(() => onFilterValueSubscription.unsubscribe());
+                }
+            }
+        }
+        // Reset the row filter value
+        resetFilter() {
+            if (this.filterControl) {
+                this.filterControl.setValue('');
+            }
+            if (this.filterwidget === i2.FormWidgetType.AUTOCOMPLETE) {
+                this.filterInstance.query = '';
+                this.filterInstance.queryModel = '';
+            }
+        }
+        // On field value change, propagate event to parent form
+        onFilterValueChange(val) {
+            this.table.rowFilter[this.field].value = val;
+        }
+        // Get of the active from control
+        get datavalue() {
+            return this[this.activeControlType] && this[this.activeControlType].datavalue;
+        }
+        set datavalue(val) {
+            const control = this.getFormControl(this.activeControlType === 'inlineInstanceNew' ? '_new' : undefined);
+            if (!control) {
+                return;
+            }
+            if (control && this.editWidgetType !== i2.FormWidgetType.UPLOAD) {
+                control.setValue(val);
+            }
+        }
+        get value() {
+            return this.datavalue;
+        }
+        set value(val) {
+            this.datavalue = val;
+        }
+        // On field value change, apply cascading filter and set validation message
+        onValueChange(val, widget) {
+            if (val !== null) {
+                i4.applyFilterOnField(this.table.datasource, this.widget, this.table.fieldDefs, val, {
+                    widget: 'edit-widget-type'
+                });
+            }
+            if (this.table.ngform.touched) {
+                this.activeControlType = widget;
+                if (widget === 'inlineInstance') {
+                    this.notifyChanges();
+                    this.fieldValidations.setCustomValidationMessage();
+                }
+                else if (this._isNewEditableRow) {
+                    this.notifyChanges('_new');
+                    this.fieldValidations_new.setCustomValidationMessage();
+                }
+            }
+        }
+        loadFilterData() {
+            // If filterdataset is not bound, get the data implicitly
+            if (this._isRowFilter && i4.isDataSetWidget(this.filterwidget) && !this.bindfilterdataset) {
+                // For live variable, get the data using distinct API
+                if (this.table.datasource.execute(i2.DataSource.Operation.SUPPORTS_DISTINCT_API)) {
+                    // check for related entity columns
+                    if (this.relatedEntityName) {
+                        this.widget['is-related'] = true;
+                        this.widget['lookup-type'] = this.relatedEntityName;
+                        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);
+                        this.filterInstance.datasource = this.table.datasource;
+                    }
+                    else {
+                        i4.getDistinctValues(this.table.datasource, this.widget, 'filterwidget').then((res) => {
+                            this._filterDataSet = res.data;
+                            this.setFilterWidgetDataSet();
+                        });
+                    }
+                }
+                else {
+                    // For other datasources, get the data from datasource bound to table
+                    //[Todo-CSP]: watch fn should already be generated from table dataset.bind expr
+                    this.registerDestroyListener(i2.$watch(this.table.binddataset, this.viewParent, {}, nv => this.widget.filterdataset = nv, i4.getWatchIdentifier(this.widgetId, 'filterdataset')));
+                }
+            }
+        }
+        loadInlineWidgetData() {
+            // If dataset is not bound, get the data implicitly
+            if (i4.isDataSetWidget(this['edit-widget-type']) && !this.binddataset && !this.readonly) {
+                const dataSource = this.table.datasource;
+                if (this['related-entity-name'] && this['primary-key']) {
+                    // Fetch the data for the related fields
+                    this.isDataSetBound = true;
+                    const bindings = lodashEs.split(this.binding, '.');
+                    this.showPendingSpinner = true;
+                    i4.fetchRelatedFieldData(dataSource, this.widget, {
+                        relatedField: lodashEs.head(bindings),
+                        datafield: lodashEs.last(bindings),
+                        widget: 'edit-widget-type'
+                    });
+                }
+                else if (dataSource.execute(i2.DataSource.Operation.SUPPORTS_DISTINCT_API)) {
+                    i4.getDistinctValuesForField(dataSource, this.widget, {
+                        widget: 'edit-widget-type'
+                    });
+                }
+            }
+        }
+        // On table datasource change, get the data for row filters
+        onDataSourceChange() {
+            this.loadFilterData();
+            if (this.table.editmode === i4.EDIT_MODE.QUICK_EDIT) {
+                this.loadInlineWidgetData();
+            }
+        }
+        // Set the data on the row filter widget
+        setFilterWidgetDataSet() {
+            if (this.filterInstance) {
+                this.filterInstance.dataset = this._filterDataSet;
+            }
+        }
+        // Set the props on the row filter widget
+        setUpFilterWidget() {
+            this.filterInstance.registerReadyStateListener(() => {
+                if (i4.isDataSetWidget(this.filterwidget)) {
+                    // if binding is department.deptId then field will be deptId
+                    const field = lodashEs.last(this.binding.split('.'));
+                    this.filterInstance.dataset = this._filterDataSet;
+                    this.filterInstance.datafield = this.filterdatafield || field;
+                    this.filterInstance.displayfield = this.filterdisplayfield || field;
+                    if (this.filterwidget === i2.FormWidgetType.AUTOCOMPLETE) {
+                        this.filterInstance.displaylabel = this.filterdisplaylabel || field;
+                        this.filterInstance.searchkey = this.filtersearchkey || field;
+                    }
+                }
+                if (this.filterwidget === i2.FormWidgetType.TIME) {
+                    this.filterInstance.timepattern = this.appDefaults.timeFormat || 'hh:mm:ss a';
+                }
+                this.filterInstance.placeholder = this.filterplaceholder || '';
+            });
+        }
+        // Notifies all the dependent validation controls incase of any changes
+        notifyChanges(quickEdit) {
+            lodashEs.forEach(this.notifyForFields, field => {
+                if (quickEdit && this._isNewEditableRow) {
+                    field.fieldValidations_new.validate();
+                }
+                else {
+                    field.fieldValidations.validate();
+                }
+            });
+        }
+        // Watches control for dependent validation changes
+        observeOn(fields) {
+            this.observeOnFields = lodashEs.cloneDeep(fields);
+        }
+        // Sets the default validators inline and quickedit new row using props
+        setUpValidators() {
+            this.fieldValidations.setUpValidators();
+            if (this._checkNewEditableRowControl()) {
+                this.fieldValidations_new.setUpValidators();
+            }
+        }
+        // Sets the Async validators on the inline and quickedit new row form control
+        setAsyncValidators(validators) {
+            this.asyncValidators = lodashEs.cloneDeep(validators);
+        }
+        // Sets the default/custom validators on the inline and quickedit new row form control
+        setValidators(validators) {
+            this.syncValidators = lodashEs.cloneDeep(validators);
+        }
+        boundFn(fn) {
+            return fn();
+        }
+        // Shows spinner for async validators based on status
+        onStatusChange(status, type) {
+            this['showPendingSpinner' + (type === 'inlineInstance' ? '' : 'New')] = (status === 'PENDING');
+        }
+        /* Summary Row Logic start */
+        setSummaryRowData(data) {
+            const newData = (data instanceof Array) ? data : [data];
+            this._invokeSummaryRowData(newData);
+        }
+        _invokeSummaryRowData(data) {
+            lodashEs.forEach(data, (item, index) => {
+                const content = item;
+                if (content instanceof Promise) {
+                    content.then(res => {
+                        this.table.callDataGridMethod('setSummaryRowDef', this.key, res, index, true);
+                    });
+                }
+                else if (content.value && content.value instanceof Promise) {
+                    const contentData = content;
+                    content.value.then(res => {
+                        contentData.value = res;
+                        this.table.callDataGridMethod('setSummaryRowDef', this.key, contentData, index, true);
+                    });
+                }
+                this.table.callDataGridMethod('setSummaryRowDef', this.key, content, index);
+            });
+        }
+        _getColumnData() {
+            return lodashEs.map(this.table.dataset, this.binding);
+        }
+        /* Summary Row Logic end */
+        // Set the props on the inline edit widget
+        setInlineWidgetProp(widget, prop, nv) {
+            if (prop === 'datepattern' && this.editWidgetType === i2.FormWidgetType.TIME) {
+                prop = 'timepattern';
+            }
+            if (this[widget] && i2.isDefined(nv)) {
+                this[widget][prop] = nv;
+            }
+        }
+        // Initialize the inline edit widget
+        setUpInlineWidget(widget) {
+            this[widget].registerReadyStateListener(() => {
+                if (i4.isDataSetWidget(this['edit-widget-type'])) {
+                    this[widget].dataset = this.dataset;
+                }
+                inlineWidgetProps.forEach(key => {
+                    this.setInlineWidgetProp(widget, key, this[key]);
+                });
+                this[widget].datasource = this._datasource;
+                this[widget].dataoptions = this._dataoptions;
+                this.setInlineWidgetProp(widget, 'datepattern', this.editdatepattern);
+            });
+        }
+        getStyleDef() {
+            return `width: ${this.width || ''}; background-color: ${this.backgroundcolor || ''}; color: ${this.textcolor || ''};`;
+        }
+        populateFieldDef() {
+            this.width = this.width === 'px' ? '' : (this.width || '');
+            this.field = this.binding;
+            this.displayName = this.caption || '';
+            this.pcDisplay = this.pcdisplay;
+            this.mobileDisplay = this.mobiledisplay;
+            this.tabletDisplay = this.tabletdisplay;
+            this.textAlignment = this.textalignment;
+            this.backgroundColor = this.backgroundcolor;
+            this.textColor = this.textcolor;
+            this.primaryKey = this['primary-key'];
+            this.relatedEntityName = this['related-entity-name'];
+            this.style = this.getStyleDef();
+            this.class = this['col-class'];
+            this.ngclass = this['col-ng-class'];
+            this.formatpattern = this.formatpattern === 'toNumber' ? 'numberToString' : this.formatpattern;
+            this.searchable = (this.type === 'blob' || this.type === 'clob') ? false : this.searchable;
+            this.showinfilter = (this.nativeElement.hasAttribute('showinfilter') && !(this.table && this.table.isdynamictable)) ? this.nativeElement.getAttribute('showinfilter') : (this.show);
+            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'] : 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);
+            // For date time data types, if date pattern is not specified, set the app format or default format
+            if (i2.isDateTimeType(this.type) && this.formatpattern === 'toDate' && !this.datepattern) {
+                const defaultFormat = i2.getDisplayDateTimeFormat(this.type);
+                if (this.type === i2.DataType.DATE) {
+                    this.datepattern = this.appDefaults.dateFormat || defaultFormat;
+                }
+                else if (this.type === i2.DataType.TIME) {
+                    this.datepattern = this.appDefaults.timeFormat || defaultFormat;
+                }
+                else if (this.type === i2.DataType.TIMESTAMP || this.type === i2.DataType.DATETIME) {
+                    this.datepattern = this.appDefaults.dateTimeFormat || defaultFormat;
+                }
+            }
+        }
+        onPropertyChange(key, nv, ov) {
+            if (!this._propsInitialized) {
+                return;
+            }
+            switch (key) {
+                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);
+                    break;
+                case 'show':
+                    this.table.redraw(true);
+                    this.showinfilter = this.nativeElement.hasAttribute('showinfilter') ? this.nativeElement.getAttribute('showinfilter') : nv;
+                    break;
+                case 'filterdataset':
+                    this._filterDataSet = nv;
+                    this.setFilterWidgetDataSet();
+                    break;
+                case 'editdatepattern':
+                    this.setInlineWidgetProp('inlineInstance', 'datepattern', nv);
+                    this.setInlineWidgetProp('inlineInstanceNew', 'datepattern', nv);
+                    break;
+                case 'showinfilter':
+                    this.showinfilter = nv;
+                    break;
+                default:
+                    if (inlineWidgetProps.includes(key)) {
+                        this.setInlineWidgetProp('inlineInstance', key, nv);
+                        this.setInlineWidgetProp('inlineInstanceNew', key, nv);
+                    }
+                    break;
+            }
+            super.onPropertyChange(key, nv, ov);
+        }
+        setProperty(property, nv) {
+            this[property] = nv;
+            switch (property) {
+                case 'displayName':
+                    this.table.callDataGridMethod('setColumnProp', this.field, property, nv);
+                    break;
+                default:
+                    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'), 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);
+                i0__namespace.ɵɵcontentQuery(dirIndex, _c2, 5);
+                i0__namespace.ɵɵcontentQuery(dirIndex, _c3, 5);
+                i0__namespace.ɵɵcontentQuery(dirIndex, _c4, 5);
+                i0__namespace.ɵɵcontentQuery(dirIndex, _c5, 5);
+            } if (rf & 2) {
+                let _t;
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.customExprTmpl = _t.first);
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.inlineWidthTempRef = _t.first);
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.filterTemplateRef = _t.first);
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx._filterInstances = _t);
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx._inlineInstances = _t);
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx._inlineInstancesNew = _t);
+            } }, features: [i0__namespace.ɵɵProvidersFeature([
+                    i4.provideAsWidgetRef(TableColumnDirective)
+                ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
+    }
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableColumnDirective, [{
+            type: i0.Directive,
+            args: [{
+                    selector: '[wmTableColumn]',
+                    providers: [
+                        i4.provideAsWidgetRef(TableColumnDirective)
+                    ]
+                }]
+        }], () => [{ type: i0__namespace.Injector }, { type: i2__namespace.AppDefaults }, { type: TableComponent, decorators: [{
+                    type: i0.Optional
+                }] }, { type: TableColumnGroupDirective, decorators: [{
+                    type: i0.Optional
+                }] }, { type: undefined, decorators: [{
+                    type: i0.Attribute,
+                    args: ['filterdataset.bind']
+                }] }, { type: undefined, decorators: [{
+                    type: i0.Attribute,
+                    args: ['dataset.bind']
+                }] }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], { _filterInstances: [{
+                type: i0.ContentChildren,
+                args: ['filterWidget', { descendants: true }]
+            }], _inlineInstances: [{
+                type: i0.ContentChildren,
+                args: ['inlineWidget', { descendants: true }]
+            }], _inlineInstancesNew: [{
+                type: i0.ContentChildren,
+                args: ['inlineWidgetNew', { descendants: true }]
+            }], customExprTmpl: [{
+                type: i0.ContentChild,
+                args: ['customExprTmpl']
+            }], inlineWidthTempRef: [{
+                type: i0.ContentChild,
+                args: ['inlineWidgetTmpl']
+            }], filterTemplateRef: [{
+                type: i0.ContentChild,
+                args: ['filterTmpl']
+            }] }); })();
+
+    const registerProps$1 = () => {
+        i4.register('wm-table-row', new Map([
+            ['class', i4.PROP_STRING],
+            ['closeothers', { value: true, ...i4.PROP_BOOLEAN }],
+            ['content', i4.PROP_STRING],
+            ['columnwidth', { value: '30px', ...i4.PROP_STRING }],
+            ['collapseicon', i4.PROP_STRING],
+            ['expandicon', i4.PROP_STRING],
+            ['height', i4.PROP_STRING],
+            ['position', { value: '0', ...i4.PROP_STRING }]
+        ]));
+    };
+
+    const WIDGET_CONFIG$1 = { widgetType: 'wm-table-row', hostClass: '' };
+    class TableRowDirective extends i4.BaseComponent {
+        static { this.initializeProps = registerProps$1(); }
+        constructor(inj, table, explicitContext) {
+            super(inj, WIDGET_CONFIG$1, explicitContext);
+            this.table = table;
+        }
+        populateConfig() {
+            this.config = {
+                closeothers: this.closeothers,
+                content: this.content,
+                columnwidth: this.columnwidth,
+                expandicon: this.expandicon,
+                collapseicon: this.collapseicon,
+                height: this.height,
+                position: this.position
+            };
+        }
+        ngOnInit() {
+            super.ngOnInit();
+            this.populateConfig();
+            this.table.registerRow(this.config, this);
+        }
+        onPropertyChange(key, nv) {
+            if (key === 'content' && this.config) {
+                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), 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] }); }
+    }
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableRowDirective, [{
+            type: i0.Directive,
+            args: [{
+                    selector: '[wmTableRow]',
+                    providers: [
+                        i4.provideAsWidgetRef(TableRowDirective)
+                    ]
+                }]
+        }], () => [{ type: i0__namespace.Injector }, { type: TableComponent, decorators: [{
+                    type: i0.Optional
+                }, {
+                    type: i0.SkipSelf
+                }] }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], null); })();
+
+    const registerProps = () => {
+        i4.register('wm-table-row-action', new Map([
+            ['accessroles', i4.PROP_STRING],
+            ['action', i4.PROP_STRING],
+            ['caption', i4.PROP_STRING],
+            ['class ', { value: 'btn-secondary', ...i4.PROP_STRING }],
+            ['disabled', { value: false, ...i4.PROP_BOOLEAN }],
+            ['display-name', i4.PROP_STRING],
+            ['hyperlink', i4.PROP_STRING],
+            ['iconclass', i4.PROP_STRING],
+            ['key', i4.PROP_STRING],
+            ['show', { value: true, ...i4.PROP_BOOLEAN }],
+            ['tabindex', { value: 0, ...i4.PROP_NUMBER }],
+            ['target', i4.PROP_STRING],
+            ['title', i4.PROP_STRING],
+            ['widget-type', { value: 'button', ...i4.PROP_STRING }]
+        ]));
+    };
+
+    const WIDGET_CONFIG = { widgetType: 'wm-table-row-action', hostClass: '' };
+    class TableRowActionDirective extends i4.BaseComponent {
+        static { this.initializeProps = registerProps(); }
+        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 lodashEs.isUndefined(this.title) ? (this['display-name'] || '') : this.title;
+        }
+        populateAction() {
+            this.buttonDef = {
+                key: this.key,
+                displayName: this['display-name'] || this.caption || '',
+                show: this.show,
+                class: this.class || '',
+                iconclass: this.iconclass || '',
+                title: this.getTitle(),
+                action: this.action,
+                accessroles: this.accessroles,
+                disabled: this.disabled,
+                tabindex: this.tabindex ? +this.tabindex : undefined,
+                widgetType: this['widget-type'] || 'button',
+                hyperlink: this.hyperlink,
+                target: this.target || '',
+                conditionalclass: this.conditionalclass || '',
+                conditionalstyle: this.conditionalstyle || {}
+            };
+        }
+        ngOnInit() {
+            super.ngOnInit();
+            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), 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] }); }
+    }
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableRowActionDirective, [{
+            type: i0.Directive,
+            args: [{
+                    selector: '[wmTableRowAction]',
+                    providers: [
+                        i4.provideAsWidgetRef(TableRowActionDirective),
+                        { provide: i4.Context, useFactory: () => { return {}; }, multi: true }
+                    ]
+                }]
+        }], () => [{ type: i0__namespace.Injector }, { type: TableComponent, decorators: [{
+                    type: i0.Optional
+                }] }, { type: Array, decorators: [{
+                    type: i0.Self
+                }, {
+                    type: i0.Inject,
+                    args: [i4.Context]
+                }] }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], null); })();
+
+    const components = [
+        TableComponent,
+        TableCUDDirective,
+        TableFilterSortDirective,
+        TableActionDirective,
+        TableColumnDirective,
+        TableColumnGroupDirective,
+        TableRowDirective,
+        TableRowActionDirective
+    ];
+    class TableModule {
+        static { this.ɵfac = function TableModule_Factory(t) { return new (t || TableModule)(); }; }
+        static { this.ɵmod = /*@__PURE__*/ i0__namespace.ɵɵdefineNgModule({ type: TableModule }); }
+        static { this.ɵinj = /*@__PURE__*/ i0__namespace.ɵɵdefineInjector({ imports: [i5.BasicModule,
+                i6.BsDropdownModule,
+                i7.CommonModule,
+                i1.FormsModule,
+                i1.ReactiveFormsModule,
+                i8.InputModule,
+                i3.ListModule,
+                i9.MenuModule,
+                i10.PaginationModule,
+                tooltip.TooltipModule,
+                i4.WmComponentsModule] }); }
+    }
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TableModule, [{
+            type: i0.NgModule,
+            args: [{
+                    imports: [
+                        i5.BasicModule,
+                        i6.BsDropdownModule,
+                        i7.CommonModule,
+                        i1.FormsModule,
+                        i1.ReactiveFormsModule,
+                        i8.InputModule,
+                        i3.ListModule,
+                        i9.MenuModule,
+                        i10.PaginationModule,
+                        tooltip.TooltipModule,
+                        i4.WmComponentsModule
+                    ],
+                    declarations: [...components],
+                    exports: [...components]
+                }]
+        }], null, null); })();
+    (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0__namespace.ɵɵsetNgModuleScope(TableModule, { declarations: [TableComponent,
+            TableCUDDirective,
+            TableFilterSortDirective,
+            TableActionDirective,
+            TableColumnDirective,
+            TableColumnGroupDirective,
+            TableRowDirective,
+            TableRowActionDirective], imports: [i5.BasicModule,
+            i6.BsDropdownModule,
+            i7.CommonModule,
+            i1.FormsModule,
+            i1.ReactiveFormsModule,
+            i8.InputModule,
+            i3.ListModule,
+            i9.MenuModule,
+            i10.PaginationModule,
+            tooltip.TooltipModule,
+            i4.WmComponentsModule], exports: [TableComponent,
+            TableCUDDirective,
+            TableFilterSortDirective,
+            TableActionDirective,
+            TableColumnDirective,
+            TableColumnGroupDirective,
+            TableRowDirective,
+            TableRowActionDirective] }); })();
+
+    exports.TableActionDirective = TableActionDirective;
+    exports.TableCUDDirective = TableCUDDirective;
+    exports.TableColumnDirective = TableColumnDirective;
+    exports.TableColumnGroupDirective = TableColumnGroupDirective;
+    exports.TableComponent = TableComponent;
+    exports.TableFilterSortDirective = TableFilterSortDirective;
+    exports.TableModule = TableModule;
+    exports.TableRowActionDirective = TableRowActionDirective;
+    exports.TableRowDirective = TableRowDirective;
+
+}));