@wavemaker-ai/app-ng-runtime 12.0.0-rc.335 → 12.0.1-rc.338

package/components/data/table/fesm2022/index.mjs

@@ -149,7 +149,7 @@ class TableComponent extends StylableComponent {
             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)) {
+            else if ((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);
             }
@@ -272,7 +272,7 @@ class TableComponent extends StylableComponent {
         // Filter and Sort Methods
         this.rowFilter = {};
         this._searchSortHandler = noop;
-        this.searchSortHandler = (...args) => { this._searchSortHandler.apply(this, args); };
+        this.searchSortHandler = (...args) => { this._searchSortHandler(...args); };
         this.onRowFilterChange = noop;
         this.onFilterConditionSelect = noop;
         this.showClearIcon = noop;
@@ -514,7 +514,7 @@ class TableComponent extends StylableComponent {
                 // 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')) {
+                    if (e?.hasOwnProperty('originalEvent')) {
                         const rowData = this.addRowIndex(row);
                         this.invokeEventCallback('rowclick', { $data: rowData, $event: e, row: rowData });
                     }
@@ -587,7 +587,7 @@ class TableComponent extends StylableComponent {
             },
             afterRowUpdate: (row, e, callBack, options) => {
                 muteWatchers();
-                const v = get(this.datasource, 'category') === 'wm.Variable' && options && options.rowindex != null;
+                const v = get(this.datasource, 'category') === 'wm.Variable' && options?.rowindex != null;
                 this.updateRecord(extend({}, options, { row, prevData: v ? options.rowindex : this.prevData, event: e, callBack }));
                 setTimeout(() => {
                     unMuteWatchers();
@@ -798,10 +798,10 @@ class TableComponent extends StylableComponent {
                                 return this.ngform.controls[fieldName + '_new'] || {};
                             },
                             getValidationMessage: () => {
-                                return this.columns[fieldName] && this.columns[fieldName].validationmessage;
+                                return this.columns[fieldName]?.validationmessage;
                             },
                             getPendingSpinnerStatusNew: () => {
-                                return this.columns[fieldName] && this.columns[fieldName].showPendingSpinnerNew;
+                                return this.columns[fieldName]?.showPendingSpinnerNew;
                             }
                         };
                         const rootNode = this.inlineEditNewViewRef.createEmbeddedView(tmpl, context).rootNodes[0];
@@ -824,10 +824,10 @@ class TableComponent extends StylableComponent {
                             return this.ngform.controls[fieldName] || {};
                         },
                         getValidationMessage: () => {
-                            return this.columns[fieldName] && this.columns[fieldName].validationmessage;
+                            return this.columns[fieldName]?.validationmessage;
                         },
                         getPendingSpinnerStatus: () => {
-                            return this.columns[fieldName] && this.columns[fieldName].showPendingSpinner;
+                            return this.columns[fieldName]?.showPendingSpinner;
                         }
                     };
                     const rootNode = this.inlineEditViewRef.createEmbeddedView(tmpl, context).rootNodes[0];
@@ -844,14 +844,14 @@ class TableComponent extends StylableComponent {
                 return this.inlineCompliedTl[fieldName];
             },
             setFieldValue: (fieldName, value) => {
-                const control = this.ngform.controls && this.ngform.controls[fieldName];
+                const control = this.ngform.controls?.[fieldName];
                 if (control) {
                     control.setValue(value);
                 }
             },
             getFieldValue: fieldName => {
-                const control = this.ngform.controls && this.ngform.controls[fieldName];
-                return control && control.value;
+                const control = this.ngform.controls?.[fieldName];
+                return control?.value;
             },
             // function to add load more button to table
             addLoadMoreBtn: () => {
@@ -870,7 +870,7 @@ class TableComponent extends StylableComponent {
             },
             // function to bind scroll event
             bindScrollEvt: () => {
-                if (this._gridData && this._gridData.length && this.infScroll) {
+                if (this._gridData?.length && this.infScroll) {
                     // smoothscroll events will be binded.
                     // Added timeout as the table html is rendered at runtime
                     setTimeout(() => {
@@ -887,7 +887,7 @@ class TableComponent extends StylableComponent {
                     const context = {
                         changeFn: this.onRowFilterChange.bind(this),
                         isDisabled: (fieldName) => {
-                            return this.emptyMatchModes.indexOf(this.rowFilter[fieldName] && this.rowFilter[fieldName].matchMode) > -1;
+                            return this.emptyMatchModes.indexOf(this.rowFilter[fieldName]?.matchMode) > -1;
                         }
                     };
                     const rootNode = this.filterViewRef.createEmbeddedView(tmpl, context).rootNodes[0];
@@ -933,9 +933,9 @@ class TableComponent extends StylableComponent {
             // Function to redraw the widgets on resize of columns
             redrawWidgets: () => {
                 this.fieldDefs.forEach(col => {
-                    triggerFn(col.inlineInstance && col.inlineInstance.redraw);
-                    triggerFn(col.inlineInstanceNew && col.inlineInstanceNew.redraw);
-                    triggerFn(col.filterInstance && col.filterInstance.redraw);
+                    triggerFn(col.inlineInstance?.redraw);
+                    triggerFn(col.inlineInstanceNew?.redraw);
+                    triggerFn(col.filterInstance?.redraw);
                 });
             },
             searchHandler: this.searchSortHandler.bind(this),
@@ -959,17 +959,17 @@ class TableComponent extends StylableComponent {
             callLoadInlineWidgetData: () => {
                 this.fullFieldDefs.forEach(col => {
                     if (isUndefined(col.isDataSetBound)) {
-                        triggerFn(col.loadInlineWidgetData && col.loadInlineWidgetData.bind(col));
+                        triggerFn(col.loadInlineWidgetData?.bind(col));
                     }
                 });
             },
             // Function to apply validators to Inline form controls
             applyValidations: (col, alwaysNewRow) => {
                 if (alwaysNewRow) {
-                    triggerFn(col.applyNewRowValidations && col.applyNewRowValidations.bind(col));
+                    triggerFn(col.applyNewRowValidations?.bind(col));
                 }
                 else {
-                    triggerFn(col.applyValidations && col.applyValidations.bind(col));
+                    triggerFn(col.applyValidations?.bind(col));
                 }
             },
             // Function to remove validators and set form state to untouched for inline form control
@@ -977,10 +977,10 @@ class TableComponent extends StylableComponent {
                 this.fullFieldDefs.forEach(col => {
                     if (!col.readonly && col.binding !== 'rowOperations') {
                         if (alwaysNewRow) {
-                            triggerFn(col.removeNewRowValidations && col.removeNewRowValidations.bind(col));
+                            triggerFn(col.removeNewRowValidations?.bind(col));
                         }
                         else {
-                            triggerFn(col.removeValidations && col.removeValidations.bind(col));
+                            triggerFn(col.removeValidations?.bind(col));
                         }
                     }
                 });
@@ -1007,7 +1007,7 @@ class TableComponent extends StylableComponent {
                     this._pageLoad = false;
                     const widgetState = this.statePersistence.getWidgetState(this);
                     if (widgetState) {
-                        options = this.handleStateParams(widgetState, options);
+                        this.handleStateParams(widgetState, options);
                     }
                     else {
                         this.setDataGridOption('selectFirstRow', this.gridfirstrowselect);
@@ -1016,7 +1016,7 @@ class TableComponent extends StylableComponent {
             }),
             // Show loading status based on the variable life cycle
             this.app.subscribe('toggle-variable-state', options => {
-                if (this.datasource && this.datasource.execute(DataSource.Operation.IS_API_AWARE) && isDataSourceEqual(options.variable, this.datasource)) {
+                if (this.datasource?.execute(DataSource.Operation.IS_API_AWARE) && isDataSourceEqual(options.variable, this.datasource)) {
                     if (this._pageLoad && this.getConfiguredState() !== 'none') {
                         this._pageLoad = false;
                         const widgetState = this.statePersistence.getWidgetState(this);
@@ -1072,13 +1072,11 @@ class TableComponent extends StylableComponent {
             if (this.readonlygrid === 'true') {
                 this.editmode = '';
             }
+            else if (this.isPartOfLiveGrid) {
+                this.editmode = this.isPartOfLiveGrid.formlayout === 'inline' ? EDIT_MODE.FORM : EDIT_MODE.DIALOG;
+            }
             else {
-                if (this.isPartOfLiveGrid) {
-                    this.editmode = this.isPartOfLiveGrid.formlayout === 'inline' ? EDIT_MODE.FORM : EDIT_MODE.DIALOG;
-                }
-                else {
-                    this.editmode = this.readonlygrid ? EDIT_MODE.INLINE : '';
-                }
+                this.editmode = this.readonlygrid ? EDIT_MODE.INLINE : '';
             }
         }
         this.gridOptions.colDefs = this.fullFieldDefs;
@@ -1144,7 +1142,7 @@ class TableComponent extends StylableComponent {
     }
     getConfiguredState() {
         const mode = this.statePersistence.computeMode(this.statehandler);
-        return mode && mode.toLowerCase();
+        return mode?.toLowerCase();
     }
     handleStateParams(widgetState, options) {
         if (get(widgetState, 'selectedItem')) {
@@ -1204,7 +1202,7 @@ class TableComponent extends StylableComponent {
                     this.rowFilter[filterObj.field].matchMode = filterObj.matchMode;
                     this.rowFilter[filterObj.field].type = filterObj.type;
                     if ($(this.rowFilterCompliedTl[filterObj.field]).length) {
-                        const val = filterObj.type === 'integer' ? parseInt(filterObj.value) : filterObj.value;
+                        //const val = filterObj.type === 'integer' ? parseInt(filterObj.value) : filterObj.value;
                         $(this.rowFilterCompliedTl[filterObj.field]).find('input').val(filterObj.value);
                     }
                 }
@@ -1287,10 +1285,8 @@ class TableComponent extends StylableComponent {
                     this.dataNavigator.pageChanged({ page: widgetState.pagination || 1, pagesize: widgetState.pagesize }, true);
                 }
             }
-            else {
-                if (get(widgetState, 'pagination')) {
-                    this.dataNavigator.pageChanged({ page: widgetState.pagination }, true);
-                }
+            else if (get(widgetState, 'pagination')) {
+                this.dataNavigator.pageChanged({ page: widgetState.pagination }, true);
             }
         }
         // After the setting the watch on navigator, dataset is triggered with undefined. In this case, return here.
@@ -1442,7 +1438,7 @@ class TableComponent extends StylableComponent {
         this.fullFieldDefs = [];
         this.__fullData = null;
         // MEMORY LEAK FIX: Destroy jQuery datatable widget before clearing gridOptions
-        if (this.datagridElement && this.datagridElement.datatable) {
+        if (this.datagridElement?.datatable) {
             try {
                 this.datagridElement.datatable('destroy');
             }
@@ -1542,14 +1538,13 @@ class TableComponent extends StylableComponent {
         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 && isEmpty(this.dataset)) {
+            this.callDataGridMethod('setStatus', 'nodata', this.nodatamessage);
+        }
         else {
-            // If grid is in edit mode or grid has data, dont show the no data message
-            if (!this.isGridEditMode && isEmpty(this.dataset)) {
-                this.callDataGridMethod('setStatus', 'nodata', this.nodatamessage);
-            }
-            else {
-                this.callDataGridMethod('setStatus', 'ready');
-            }
+            this.callDataGridMethod('setStatus', 'ready');
         }
     }
     setDisabledOnField(operation, colDef, widgetType) {
@@ -1606,7 +1601,7 @@ class TableComponent extends StylableComponent {
     removeEmptyRecords(serviceData) {
         const allRecords = serviceData;
         let filteredData = [];
-        if (allRecords && allRecords.length) {
+        if (allRecords?.length) {
             /*Comparing and pushing the non-empty data columns*/
             filteredData = allRecords.filter(record => {
                 return record && !this.isEmptyRecord(record);
@@ -1632,7 +1627,7 @@ class TableComponent extends StylableComponent {
         this.gridData = data;
     }
     setDataGridOption(optionName, newVal, forceSet = false) {
-        if (!this.datagridElement || !this.datagridElement.datatable || !this.datagridElement.datatable('instance')) {
+        if (!this.datagridElement?.datatable?.('instance')) {
             // Bound properties can update before the jQuery widget is initialized.
             // Keep gridOptions in sync so the initial datatable() call sees the latest value.
             this.gridOptions[optionName] = newVal;
@@ -1646,11 +1641,11 @@ class TableComponent extends StylableComponent {
         }
     }
     callDataGridMethod(...args) {
-        if (!this.datagridElement || !this.datagridElement.datatable('instance')) {
+        if (!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);
+        return this.datagridElement.datatable(...args);
     }
     renderOperationColumns() {
         let rowActionCol, insertPosition;
@@ -1712,16 +1707,14 @@ class TableComponent extends StylableComponent {
                     if (isEqual(this.dataset, newVal)) {
                         this.watchVariableDataSet(newVal);
                     }
+                    else if (isArray(newVal)) {
+                        this.widget.dataset = [].concat(newVal);
+                    }
+                    else if (isObject(newVal)) {
+                        this.widget.dataset = extend({}, newVal);
+                    }
                     else {
-                        if (isArray(newVal)) {
-                            this.widget.dataset = [].concat(newVal);
-                        }
-                        else if (isObject(newVal)) {
-                            this.widget.dataset = extend({}, newVal);
-                        }
-                        else {
-                            this.widget.dataset = newVal;
-                        }
+                        this.widget.dataset = newVal;
                     }
                 }
                 else {
@@ -1759,7 +1752,7 @@ class TableComponent extends StylableComponent {
         if (dataset.error) {
             error = dataset.error;
         }
-        if (dataset.data && dataset.data.error) {
+        if (dataset.data?.error) {
             if (dataset.data.errorMessage) {
                 error = dataset.data.errorMessage;
             }
@@ -1989,7 +1982,7 @@ class TableComponent extends StylableComponent {
     getSortExpr() {
         let sortExp;
         let pagingOptions;
-        if (this.datasource && this.datasource.execute(DataSource.Operation.IS_PAGEABLE)) {
+        if (this.datasource?.execute(DataSource.Operation.IS_PAGEABLE)) {
             pagingOptions = this.datasource.execute(DataSource.Operation.GET_PAGING_OPTIONS);
             sortExp = isEmpty(pagingOptions) ? '' : getOrderByExpr(pagingOptions.sort);
         }
@@ -2280,7 +2273,7 @@ class TableComponent extends StylableComponent {
     }
     onDataSourceChange() {
         this.fieldDefs.forEach(col => {
-            triggerFn(col.onDataSourceChange && col.onDataSourceChange.bind(col));
+            triggerFn(col.onDataSourceChange?.bind(col));
         });
     }
     refreshRowFilterDataFromDataset() {
@@ -2288,7 +2281,7 @@ class TableComponent extends StylableComponent {
             return;
         }
         this.fieldDefs.forEach(col => {
-            triggerFn(col.loadFilterData && col.loadFilterData.bind(col));
+            triggerFn(col.loadFilterData?.bind(col));
         });
     }
     clearActionRowVars() {
@@ -2338,10 +2331,8 @@ class TableComponent extends StylableComponent {
                 return;
             }
         }
-        else {
-            if (!tableColumn.pcDisplay) {
-                return;
-            }
+        else if (!tableColumn.pcDisplay) {
+            return;
         }
         if (tableColumn['primary-key']) {
             this.primaryKey.push(tableColumn.field);
@@ -2526,13 +2517,13 @@ class TableComponent extends StylableComponent {
             this._pageLoad = true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TableComponent, deps: [{ token: i0.Injector }, { token: i0.EnvironmentInjector }, { token: i1.FormBuilder }, { token: i2.App }, { token: i2.DynamicComponentRefProvider }, { token: i2.StatePersistence }, { token: i2.PaginationService }, { token: i2.Viewport }, { token: i3.ListComponent, optional: true }, { token: 'dataset.bind', attribute: true }, { token: 'datasource.bind', attribute: true }, { token: 'readonlygrid', attribute: true }, { token: i0.NgZone }, { token: i4.TrustAsPipe }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: TableComponent, isStandalone: true, selector: "[wmTable]", host: { listeners: { "keypress": "onKeyPress($event)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: TableComponent, deps: [{ token: i0.Injector }, { token: i0.EnvironmentInjector }, { token: i1.FormBuilder }, { token: i2.App }, { token: i2.DynamicComponentRefProvider }, { token: i2.StatePersistence }, { token: i2.PaginationService }, { token: i2.Viewport }, { token: i3.ListComponent, optional: true }, { token: 'dataset.bind', attribute: true }, { token: 'datasource.bind', attribute: true }, { token: 'readonlygrid', attribute: true }, { token: i0.NgZone }, { token: i4.TrustAsPipe }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: TableComponent, isStandalone: true, selector: "[wmTable]", host: { listeners: { "keypress": "onKeyPress($event)" } }, providers: [
             provideAs(TableComponent, NG_VALUE_ACCESSOR, true),
             provideAsWidgetRef(TableComponent)
         ], queries: [{ propertyName: "rowExpansionTmpl", first: true, predicate: ["rowExpansionTmpl"], descendants: true }, { propertyName: "rowActionTmpl", predicate: ["rowActionTmpl"], descendants: true }, { propertyName: "filterTmpl", predicate: ["filterTmpl"], descendants: true }, { propertyName: "inlineWidgetTmpl", predicate: ["inlineWidgetTmpl"], descendants: true }, { propertyName: "inlineWidgetNewTmpl", predicate: ["inlineWidgetTmplNew"], descendants: true }, { propertyName: "customExprTmpl", predicate: ["customExprTmpl"], descendants: true }, { propertyName: "rowExpansionActionTmpl", predicate: ["rowExpansionActionTmpl"], descendants: true }], viewQueries: [{ propertyName: "dataNavigator", first: true, predicate: PaginationComponent, descendants: true, static: true }, { propertyName: "_tableElement", first: true, predicate: ["datagridElement"], descendants: true, static: true }, { propertyName: "rowActionsViewRef", first: true, predicate: ["rowActionsView"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "filterViewRef", first: true, predicate: ["multiColumnFilterView"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "inlineEditViewRef", first: true, predicate: ["inlineEditView"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "inlineEditNewViewRef", first: true, predicate: ["inlineEditNewView"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "customExprViewRef", first: true, predicate: ["customExprView"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "rowDetailViewRef", first: true, predicate: ["rowDetailView"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "rowExpansionActionViewRef", first: true, predicate: ["rowExpansionActionView"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "dynamicTableRef", first: true, predicate: ["dynamicTable"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (title || subheading || iconclass || iconurl || exportOptions.length || _actions.header.length) {\n  <div class=\"panel-heading\">\n    <h3 class=\"panel-title\">\n      <div class=\"pull-left\">\n        @if (iconclass || iconurl) {\n          <wm-app-icon [iconclass]=\"iconclass\" [iconurl]=\"iconurl\" [iconClasses]=\"iconurl ? 'panel-image-icon' : 'panel-icon'\" alt=\"Table icon\"></wm-app-icon>\n        }\n      </div>\n      <div class=\"pull-left\">\n        <div class=\"heading\" [innerHTML]=\"title\"></div>\n        <div class=\"description\" [innerHTML]=\"subheading\"></div>\n      </div>\n      @if (exportOptions.length || _actions.header.length) {\n        <div class=\"panel-actions app-datagrid-actions\">\n          @for (btn of _actions.header; track btn; let index = $index) {\n            <ng-container\n              [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n              [ngTemplateOutletContext]=\"{btn:btn}\"\n              [ngTemplateOutletInjector]=\"createCustomInjector('actions_header_' + index, {btn:btn})\">\n            </ng-container>\n          }\n          @if (exportOptions.length) {\n            <div wmMenu dropdown caption.bind=\"appLocale.LABEL_EXPORT\"  autoclose=\"always\" attr.name=\"{{name}}-export\"\n            dataset.bind=\"exportOptions\" select.event=\"export($item)\" menuposition=\"down,left\"></div>\n          }\n        </div>\n      }\n    </h3>\n  </div>\n}\n<div class=\"app-datagrid\" #datagridElement></div>\n\n<div class=\"panel-footer clearfix\" [hidden]=\"!_actions.footer.length && (!shownavigation || (onDemandLoad && dataNavigator.isDisableNext)) \">\n  <div class=\"app-datagrid-paginator\" [hidden]=\"(!dataNavigator?.dataSize && !dataNavigator.datasource?.pagination?.next) || !shownavigation || (onDemandLoad && dataNavigator.isDisableNext)\">\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  @if (_actions.footer.length) {\n    <div class=\"app-datagrid-actions\">\n      @for (btn of _actions.footer; track btn; let index = $index) {\n        <ng-container\n          [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n          [ngTemplateOutletContext]=\"{btn:btn}\"\n          [ngTemplateOutletInjector]=\"createCustomInjector('actions_footer_' + index, {btn:btn})\">\n        </ng-container>\n      }\n    </div>\n  }\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", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AnchorComponent, selector: "a[wmAnchor]", exportAs: ["wmAnchor"] }, { kind: "component", type: PaginationComponent, selector: "[wmPagination]", outputs: ["resultEmitter", "maxResultsEmitter"] }, { kind: "component", type: ButtonComponent, selector: "button[wmButton]", exportAs: ["wmButton"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i6.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: MenuComponent, selector: "[wmMenu]" }, { kind: "component", type: WmAppIconComponent, selector: "wm-app-icon", inputs: ["icon", "iconclass", "iconurl", "defaultIconClass", "defaultClasses", "iconStyle", "alt"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule, AnchorComponent, PaginationComponent, ButtonComponent, BsDropdownModule, MenuComponent, WmAppIconComponent], selector: '[wmTable]', providers: [
                         provideAs(TableComponent, NG_VALUE_ACCESSOR, true),
@@ -2684,7 +2675,7 @@ class TableCUDDirective {
         dataSource.execute(DataSource.Operation.FETCH_DISTINCT_VALUES);
         if (!this.table.isNavigationEnabled()) {
             const sortInfo = this.table.sortInfo;
-            const sortOptions = sortInfo && sortInfo.direction ? (sortInfo.field + ' ' + sortInfo.direction) : '';
+            const sortOptions = sortInfo?.direction ? (sortInfo.field + ' ' + sortInfo.direction) : '';
             refreshDataSource(dataSource, {
                 page: 1,
                 filterFields: this.table.getFilterFields(this.table.filterInfo),
@@ -2886,7 +2877,7 @@ class TableCUDDirective {
     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 (response?.error) {
             if (!this.table.onError) {
                 this.table.toggleMessage(true, 'error', this.table.errormessage || response.error);
             }
@@ -3000,24 +2991,23 @@ class TableCUDDirective {
             this.triggerWMEvent('update');
             return;
         }
-        if (evt && evt.target) {
+        if (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 {
-            // 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' });
-                    }
-                });
-            }
+            // 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
@@ -3044,7 +3034,7 @@ class TableCUDDirective {
     }
     deleteRow(evt) {
         let row;
-        if (evt && evt.target) {
+        if (evt?.target) {
             this.table.callDataGridMethod('deleteRowAndUpdateSelectAll', evt);
         }
         else {
@@ -3082,10 +3072,10 @@ class TableCUDDirective {
         this.dialogService = null;
         this.app = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TableCUDDirective, deps: [{ token: TableComponent, self: true }, { token: i2.AbstractDialogService }, { token: i2.App }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: TableCUDDirective, isStandalone: true, selector: "[wmTableCUD]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: TableCUDDirective, deps: [{ token: TableComponent, self: true }, { token: i2.AbstractDialogService }, { token: i2.App }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: TableCUDDirective, isStandalone: true, selector: "[wmTableCUD]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TableCUDDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: TableCUDDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -3212,7 +3202,7 @@ const setAllFilterFields = function (filterFields, searchObj, visibleCols) {
 };
 // Set the filter fields as required by datasource
 const setFilterFields = (filterFields, searchObj, visibleCols = []) => {
-    const field = searchObj && searchObj.field;
+    const field = searchObj?.field;
     /*Set the filter options when a field/column has been selected.*/
     if (field) {
         filterFields[field] = {
@@ -3413,11 +3403,10 @@ class TableFilterSortDirective {
             const parts = dateString?.split(/[-/\s]+/)?.map(Number) || [];
             return new Date(parts[2], parts[1] - 1, parts[0]).getTime();
         }
-        return NaN;
     }
     // Returns data sorted using sortObj
     getSortResult(data, sortObj) {
-        if (sortObj && sortObj.direction) {
+        if (sortObj?.direction) {
             const sampleItem = find(data, (item) => {
                 const v = get(item, sortObj.field);
                 return typeof v === 'string' && !!v.trim();
@@ -3514,7 +3503,7 @@ class TableFilterSortDirective {
                 $row.hide();
             }
         });
-        if (data && data.length) {
+        if (data?.length) {
             this.table.callDataGridMethod('setStatus', 'ready');
             // Select the first row after the search for single select
             if (this.table.gridfirstrowselect && !this.table.multiselect) {
@@ -3534,7 +3523,7 @@ class TableFilterSortDirective {
             return;
         }
         const sortInfo = this.table.sortInfo;
-        const sortOptions = sortInfo && sortInfo.direction ? (sortInfo.field + ' ' + sortInfo.direction) : '';
+        const sortOptions = sortInfo?.direction ? (sortInfo.field + ' ' + sortInfo.direction) : '';
         const filterFields = this.getFilterFields(searchObj);
         const logicalOp = this.getLogicalOperator(filterFields);
         refreshDataSource(this.table.datasource, {
@@ -3554,7 +3543,7 @@ class TableFilterSortDirective {
         this.table.gridOptions.sortInfo.field = sortObj.field;
         this.table.gridOptions.sortInfo.direction = sortObj.direction;
         this.table.sortInfo = getClonedObject(sortObj);
-        const sortOptions = sortObj && sortObj.direction ? (sortObj.field + ' ' + sortObj.direction) : '';
+        const sortOptions = sortObj?.direction ? (sortObj.field + ' ' + sortObj.direction) : '';
         const filterFields = this.getFilterFields(this.table.filterInfo);
         const condition = this.getLogicalOperator(filterFields);
         if (!statePersistenceTriggered && this.table.getConfiguredState() !== 'none') {
@@ -3567,7 +3556,7 @@ class TableFilterSortDirective {
             condition: condition
         }).then((response) => {
             $appDigest();
-            const data = (response && response.data) ? response.data : response;
+            const data = (response?.data) ? response.data : response;
             this.table.invokeEventCallback('sort', { $event: e, $data: {
                     data,
                     sortDirection: sortObj.direction,
@@ -3642,11 +3631,11 @@ class TableFilterSortDirective {
                 filterFields.push({ field: key, matchMode: val.matchMode, type: val.type, value: val.value });
             });
         }
-        if (dataSource && dataSource.execute(DataSource.Operation.SUPPORTS_SERVER_FILTER)) {
+        if (dataSource?.execute(DataSource.Operation.SUPPORTS_SERVER_FILTER)) {
             this.handleServerSideSearch(filterFields);
             return;
         }
-        if (dataSource && dataSource.execute(DataSource.Operation.IS_API_AWARE) && dataSource.execute(DataSource.Operation.IS_PAGEABLE)) {
+        if (dataSource?.execute(DataSource.Operation.IS_API_AWARE) && dataSource.execute(DataSource.Operation.IS_PAGEABLE)) {
             this.handleSinglePageSearch(filterFields);
         }
         else {
@@ -3672,7 +3661,7 @@ class TableFilterSortDirective {
             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(DataSource.Operation.IS_SORTABLE)) {
+        if (dataSource?.execute(DataSource.Operation.IS_SORTABLE)) {
             this.handleSeverSideSort(searchSortObj, e, statePersistenceTriggered);
         }
         else {
@@ -3702,12 +3691,12 @@ class TableFilterSortDirective {
     }
     // Method to show/hide clear icon in multi column filter
     showClearIcon(fieldName) {
-        const value = this.table.rowFilter[fieldName] && this.table.rowFilter[fieldName].value;
+        const value = this.table.rowFilter[fieldName]?.value;
         return isDefined(value) && value !== '' && value !== null;
     }
     // Method clear the filter value in multi column filter
     clearRowFilter(fieldName) {
-        if (this.table.rowFilter && this.table.rowFilter[fieldName]) {
+        if (this.table.rowFilter?.[fieldName]) {
             this.table.columns[fieldName].resetFilter();
             this.onRowFilterChange(fieldName);
         }
@@ -3721,21 +3710,20 @@ class TableFilterSortDirective {
             this.table.columns[fieldName].resetFilter();
             this.table.onRowFilterChange();
         }
+        else 
+        // If value is present, call the filter. Else, focus on the field
+        if (isDefined(this.table.rowFilter[fieldName].value) && this.table.rowFilter[fieldName].value !== '') {
+            this.table.onRowFilterChange();
+        }
         else {
-            // If value is present, call the filter. Else, focus on the field
-            if (isDefined(this.table.rowFilter[fieldName].value) && this.table.rowFilter[fieldName].value !== '') {
-                this.table.onRowFilterChange();
-            }
-            else {
-                setTimeout(() => {
-                    this.table.columns[fieldName].filterInstance.focus();
-                });
-            }
+            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(DataSource.Operation.SUPPORTS_DISTINCT_API)) {
+        if (!this.table.datasource?.execute(DataSource.Operation.SUPPORTS_DISTINCT_API)) {
             return;
         }
         const fieldName = filterDef.field;
@@ -3796,7 +3784,7 @@ class TableFilterSortDirective {
         }
         const page = isSamePage ? this.table.dataNavigator.dn.currentPage : 1;
         const sortInfo = this.table.sortInfo;
-        const sortOptions = sortInfo && sortInfo.direction ? (sortInfo.field + ' ' + sortInfo.direction) : '';
+        const sortOptions = sortInfo?.direction ? (sortInfo.field + ' ' + sortInfo.direction) : '';
         const filterFields = this.getFilterFields(this.table.filterInfo);
         const logicalOp = this.getLogicalOperator(filterFields);
         refreshDataSource(this.table.datasource, {
@@ -3810,10 +3798,10 @@ class TableFilterSortDirective {
         // MEMORY LEAK FIX: Clear table reference
         this.table = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TableFilterSortDirective, deps: [{ token: TableComponent, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: TableFilterSortDirective, isStandalone: true, selector: "[wmTableFilterSort]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: TableFilterSortDirective, deps: [{ token: TableComponent, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: TableFilterSortDirective, isStandalone: true, selector: "[wmTableFilterSort]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TableFilterSortDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: TableFilterSortDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -3903,12 +3891,12 @@ class TableActionDirective extends BaseComponent {
         // Call parent ngOnDestroy (BaseComponent has cleanup)
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TableActionDirective, deps: [{ token: i0.Injector }, { token: TableComponent, optional: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: TableActionDirective, isStandalone: true, selector: "[wmTableAction]", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: TableActionDirective, deps: [{ token: i0.Injector }, { token: TableComponent, optional: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: TableActionDirective, isStandalone: true, selector: "[wmTableAction]", providers: [
             provideAsWidgetRef(TableActionDirective)
         ], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TableActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: TableActionDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -4075,12 +4063,12 @@ class TableColumnGroupDirective extends BaseComponent {
         // Call parent ngOnDestroy (BaseComponent has cleanup)
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TableColumnGroupDirective, deps: [{ token: i0.Injector }, { token: TableColumnGroupDirective, optional: true, skipSelf: true }, { token: TableComponent, optional: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: TableColumnGroupDirective, isStandalone: true, selector: "[wmTableColumnGroup]", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: TableColumnGroupDirective, deps: [{ token: i0.Injector }, { token: TableColumnGroupDirective, optional: true, skipSelf: true }, { token: TableComponent, optional: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: TableColumnGroupDirective, isStandalone: true, selector: "[wmTableColumnGroup]", providers: [
             provideAsWidgetRef(TableColumnGroupDirective)
         ], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TableColumnGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: TableColumnGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -4178,7 +4166,7 @@ class TableColumnDirective extends BaseComponent {
         // 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;
+        const fieldName = this.group?.name;
         // Register column with header config to create group structure
         setHeaderConfigForTable(this.table.headerConfig, {
             field: this.field,
@@ -4213,7 +4201,7 @@ class TableColumnDirective extends BaseComponent {
         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.filterInstance = val.first?.widget;
                 this.setUpFilterWidget();
             });
             this.registerDestroyListener(() => s1.unsubscribe());
@@ -4221,7 +4209,7 @@ class TableColumnDirective extends BaseComponent {
         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.inlineInstance = val.first?.widget;
                 this.fieldValidations.formwidget = val.first;
                 this.table.registerFormField(this.binding, new FieldDef(this.inlineInstance));
                 this.setUpInlineWidget('inlineInstance');
@@ -4230,7 +4218,7 @@ class TableColumnDirective extends BaseComponent {
             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.inlineInstanceNew = val.first?.widget;
                     this.fieldValidations_new.formwidget = val.first;
                     this.setUpInlineWidget('inlineInstanceNew');
                 });
@@ -4270,7 +4258,7 @@ class TableColumnDirective extends BaseComponent {
     // Remove validators for the inline widget and set form to untouched
     removeValidations() {
         // Guard against component destruction or table/ngform being null
-        if (this.isDestroyed || !this.table || !this.table.ngform) {
+        if (this.isDestroyed || !this.table?.ngform) {
             return;
         }
         this.table.ngform.markAsUntouched();
@@ -4285,7 +4273,7 @@ class TableColumnDirective extends BaseComponent {
     // Apply default|sync|async|prop validators for QuickEdit new row form control
     applyNewRowValidations() {
         // Guard against component destruction or table/ngform being null
-        if (this.isDestroyed || !this.table || !this.table.ngform) {
+        if (this.isDestroyed || !this.table?.ngform) {
             return;
         }
         if (!this._checkNewEditableRowControl()) {
@@ -4305,7 +4293,7 @@ class TableColumnDirective extends BaseComponent {
     // Remove validators for the QuickEdit new row widget and set form to untouched
     removeNewRowValidations() {
         // Guard against component destruction or table/ngform being null
-        if (this.isDestroyed || !this.table || !this.table.ngform) {
+        if (this.isDestroyed || !this.table?.ngform) {
             return;
         }
         this.table.ngform.markAsUntouched();
@@ -4322,7 +4310,7 @@ class TableColumnDirective extends BaseComponent {
     }
     addFormControl(suffix) {
         // Guard against component destruction or table/ngform being null
-        if (this.isDestroyed || !this.table || !this.table.ngform) {
+        if (this.isDestroyed || !this.table?.ngform) {
             return;
         }
         const ctrlName = suffix ? (this.binding + suffix) : this.binding;
@@ -4330,7 +4318,7 @@ class TableColumnDirective extends BaseComponent {
     }
     getFormControl(suffix) {
         // Guard against component destruction or table/ngform being null
-        if (this.isDestroyed || !this.table || !this.table.ngform) {
+        if (this.isDestroyed || !this.table?.ngform) {
             return null;
         }
         const ctrlName = suffix ? (this.binding + suffix) : this.binding;
@@ -4389,7 +4377,7 @@ class TableColumnDirective extends BaseComponent {
         // When a row-filter widget value changes (multi-column filter),
         // apply cascading filter so dependent filter widgets update their datasets.
         // Example: filtering City should narrow down Street filter options.
-        if (this.isDestroyed || !this.table || !this.table.datasource) {
+        if (this.isDestroyed || !this.table?.datasource) {
             return;
         }
         // Don't cascade on null/undefined; clearing a filter should reset dependent datasets via their own refresh.
@@ -4401,7 +4389,7 @@ class TableColumnDirective extends BaseComponent {
     }
     // Get of the active from control
     get datavalue() {
-        return this[this.activeControlType] && this[this.activeControlType].datavalue;
+        return this[this.activeControlType]?.datavalue;
     }
     set datavalue(val) {
         const control = this.getFormControl(this.activeControlType === 'inlineInstanceNew' ? '_new' : undefined);
@@ -4429,7 +4417,7 @@ class TableColumnDirective extends BaseComponent {
                 widget: 'edit-widget-type'
             });
         }
-        if (this.table.ngform && this.table.ngform.touched) {
+        if (this.table.ngform?.touched) {
             this.activeControlType = widget;
             if (widget === 'inlineInstance') {
                 this.notifyChanges();
@@ -4634,7 +4622,7 @@ class TableColumnDirective extends BaseComponent {
         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.showinfilter = (this.nativeElement.hasAttribute('showinfilter') && !(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'] || getEditModeWidget(this);
         this.filterOn = this['filter-on'];
@@ -4668,7 +4656,7 @@ class TableColumnDirective extends BaseComponent {
                 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 fieldName = 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
                 if (!this.table.headerConfig.some(value => this.field == value.field)) {
@@ -4804,12 +4792,12 @@ class TableColumnDirective extends BaseComponent {
         // Call parent ngOnDestroy
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TableColumnDirective, deps: [{ token: i0.Injector }, { token: i2.AppDefaults }, { token: TableComponent, optional: true }, { token: TableColumnGroupDirective, optional: true }, { token: 'filterdataset.bind', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: TableColumnDirective, isStandalone: true, selector: "[wmTableColumn]", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: TableColumnDirective, deps: [{ token: i0.Injector }, { token: i2.AppDefaults }, { token: TableComponent, optional: true }, { token: TableColumnGroupDirective, optional: true }, { token: 'filterdataset.bind', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: TableColumnDirective, isStandalone: true, selector: "[wmTableColumn]", providers: [
             provideAsWidgetRef(TableColumnDirective)
         ], queries: [{ propertyName: "customExprTmpl", first: true, predicate: ["customExprTmpl"], descendants: true }, { propertyName: "inlineWidthTempRef", first: true, predicate: ["inlineWidgetTmpl"], descendants: true }, { propertyName: "filterTemplateRef", first: true, predicate: ["filterTmpl"], descendants: true }, { propertyName: "_filterInstances", predicate: ["filterWidget"], descendants: true }, { propertyName: "_inlineInstances", predicate: ["inlineWidget"], descendants: true }, { propertyName: "_inlineInstancesNew", predicate: ["inlineWidgetNew"], descendants: true }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TableColumnDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: TableColumnDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -4905,12 +4893,12 @@ class TableRowDirective extends BaseComponent {
         // Call parent ngOnDestroy (BaseComponent has cleanup)
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TableRowDirective, deps: [{ token: i0.Injector }, { token: TableComponent, optional: true, skipSelf: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: TableRowDirective, isStandalone: true, selector: "[wmTableRow]", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: TableRowDirective, deps: [{ token: i0.Injector }, { token: TableComponent, optional: true, skipSelf: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: TableRowDirective, isStandalone: true, selector: "[wmTableRow]", providers: [
             provideAsWidgetRef(TableRowDirective)
         ], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TableRowDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: TableRowDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -4993,13 +4981,13 @@ class TableRowActionDirective extends BaseComponent {
         // Call parent ngOnDestroy (BaseComponent has cleanup)
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TableRowActionDirective, deps: [{ token: i0.Injector }, { token: TableComponent, optional: true }, { token: Context, self: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: TableRowActionDirective, isStandalone: true, selector: "[wmTableRowAction]", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: TableRowActionDirective, deps: [{ token: i0.Injector }, { token: TableComponent, optional: true }, { token: Context, self: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: TableRowActionDirective, isStandalone: true, selector: "[wmTableRowAction]", providers: [
             provideAsWidgetRef(TableRowActionDirective),
             { provide: Context, useFactory: () => { return {}; }, multi: true }
         ], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TableRowActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: TableRowActionDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,