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

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

@@ -129,7 +129,7 @@
         let formObj = ngForm;
         // If element is form, find out the first invalid element in this form
         if ($ele.is('form')) {
-            formObj = ngForm && ngForm.controls[$ele.attr('formControlName') || $ele.attr('name')];
+            formObj = ngForm?.controls[$ele.attr('formControlName') || $ele.attr('name')];
             if (formObj) {
                 return findInvalidElement($ele, formObj);
             }
@@ -282,7 +282,7 @@
             }, 250);
         }
         ngAfterViewInit() {
-            if (this.parentForm && this.parentForm.ngform && this.isParentList) {
+            if (this.parentForm?.ngform && this.isParentList) {
                 // setting formArray control on ngform.
                 if (!lodashEs.get(this.parentForm.ngform.controls, this.parentList.name)) {
                     this.parentForm.ngform.setControl(this.parentList.name, new i1.FormArray([]));
@@ -298,7 +298,7 @@
         }
         findOperationType() { }
         addInnerNgFormToForm(binding) {
-            if (this.parentForm && this.parentForm.ngform) {
+            if (this.parentForm?.ngform) {
                 // handling as formArray when parent is list. Hence returning here from adding to parentForm again.
                 if (this.isParentList) {
                     return;
@@ -455,7 +455,7 @@
             }
         }
         updateFieldSource() {
-            if (this.formdatasource && this.formdatasource.execute(i1$1.DataSource.Operation.IS_API_AWARE)) {
+            if (this.formdatasource?.execute(i1$1.DataSource.Operation.IS_API_AWARE)) {
                 return;
             }
             else if (this.formdatasource && !this.formdatasource.twoWayBinding) {
@@ -475,7 +475,7 @@
             this.setValidationMsgs();
             // Disable the form submit if form is in invalid state. For delete operation, do not check the validation.
             if (this.operationType !== 'delete' && (this.validationtype === 'html' || this.validationtype === 'default')
-                && this.ngform && this.ngform.invalid) {
+                && this.ngform?.invalid) {
                 if (this.ngform.invalid) {
                     if (this.validationtype === 'default') {
                         this.highlightInvalidFields();
@@ -492,14 +492,14 @@
                         if (!$invalidEle.hasClass('app-search-input')) {
                             $invalidEle.focus();
                         }
-                        const ngEle = $invalidForm && $invalidForm.controls[$invalidEle.attr('formControlName') || $invalidEle.attr('name')];
-                        if (ngEle && ngEle.markAsTouched) {
+                        const ngEle = $invalidForm?.controls[$invalidEle.attr('formControlName') || $invalidEle.attr('name')];
+                        if (ngEle?.markAsTouched) {
                             ngEle.markAsTouched();
                         }
                         i1$1.$appDigest();
                         return true;
                     }
-                    else if ($target && $target.length) {
+                    else if ($target?.length) {
                         $target.focus();
                     }
                     return true;
@@ -1178,7 +1178,7 @@
             return this.operationType || this.findOperationType();
         }
         get dirty() {
-            return this.ngform && this.ngform.dirty;
+            return this.ngform?.dirty;
         }
         /**
          * This method sets the form state to pristine by internally calling angular markAsPristine method on the form
@@ -1197,16 +1197,16 @@
             this.ngform.markAsDirty({ onlySelf: value });
         }
         get invalid() {
-            return this.ngform && this.ngform.invalid;
+            return this.ngform?.invalid;
         }
         get touched() {
-            return this.ngform && this.ngform.touched;
+            return this.ngform?.touched;
         }
         get valid() {
-            return this.ngform && this.ngform.valid;
+            return this.ngform?.valid;
         }
         get pristine() {
-            return this.ngform && this.ngform.pristine;
+            return this.ngform?.pristine;
         }
         /**
          * This method sets the form state to touched by internally calling angular markAsTouched method on the form
@@ -1274,12 +1274,12 @@
             this._debouncedSubmitForm = null;
             super.ngOnDestroy();
         }
-        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0__namespace, type: FormComponent, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.EnvironmentInjector }, { token: i1__namespace.FormBuilder }, { token: i1$1__namespace.App }, { token: i1$1__namespace.AbstractDialogService }, { token: i1$1__namespace.DynamicComponentRefProvider }, { token: i0__namespace.NgZone }, { token: i3__namespace.ListComponent, optional: true }, { token: FormComponent, optional: true, skipSelf: true }, { token: i4__namespace.PrefabDirective, optional: true, skipSelf: true }, { token: i5__namespace.PartialDirective, optional: true, skipSelf: true }, { token: 'beforesubmit.event', attribute: true }, { token: 'submit.event', attribute: true }, { token: 'beforerender.event', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'formdata.bind', attribute: true }, { token: 'wmLiveForm', attribute: true }, { token: 'wmLiveFilter', attribute: true }, { token: 'data-role', attribute: true }, { token: 'key', attribute: true }, { token: 'name', attribute: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
-        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: FormComponent, isStandalone: true, selector: "form[wmForm]", host: { listeners: { "submit": "submit($event)", "reset": "onReset()", "keydown": "onKeydownHandler($event)" }, properties: { "action": "this.action" } }, providers: [
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0__namespace, type: FormComponent, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.EnvironmentInjector }, { token: i1__namespace.FormBuilder }, { token: i1$1__namespace.App }, { token: i1$1__namespace.AbstractDialogService }, { token: i1$1__namespace.DynamicComponentRefProvider }, { token: i0__namespace.NgZone }, { token: i3__namespace.ListComponent, optional: true }, { token: FormComponent, optional: true, skipSelf: true }, { token: i4__namespace.PrefabDirective, optional: true, skipSelf: true }, { token: i5__namespace.PartialDirective, optional: true, skipSelf: true }, { token: 'beforesubmit.event', attribute: true }, { token: 'submit.event', attribute: true }, { token: 'beforerender.event', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'formdata.bind', attribute: true }, { token: 'wmLiveForm', attribute: true }, { token: 'wmLiveFilter', attribute: true }, { token: 'data-role', attribute: true }, { token: 'key', attribute: true }, { token: 'name', attribute: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: FormComponent, isStandalone: true, selector: "form[wmForm]", host: { listeners: { "submit": "submit($event)", "reset": "onReset()", "keydown": "onKeydownHandler($event)" }, properties: { "action": "this.action" } }, providers: [
                 i5.provideAsWidgetRef(FormComponent)
             ], queries: [{ propertyName: "componentRefs", predicate: i5.WidgetRef, descendants: true }], viewQueries: [{ propertyName: "dynamicFormRef", first: true, predicate: ["dynamicForm"], descendants: true, read: i0.ViewContainerRef, static: true }, { propertyName: "messageRef", first: true, predicate: i5.MessageComponent, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #content><ng-content></ng-content></ng-template>\n\n@if (formlayout === 'page') {\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n  @if (!isLayoutDialog && (title || subheading || iconclass || iconurl || showButtons('header'))) {\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=\"Form 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        <div class=\"form-action panel-actions basic-btn-grp\">\n          @for (btn of buttonArray | filter : 'position' : 'header'; track btn; let index = $index) {\n            <ng-container\n              [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n              [ngTemplateOutletContext]=\"{btn:btn}\"\n              [ngTemplateOutletInjector]=\"createCustomInjector('action_header_' + index, {btn:btn})\">\n            </ng-container>\n          }\n          @if (collapsible) {\n            <button type=\"button\" class=\"app-icon wi panel-action\" [title]=\"expanded? (appLocale?.LABEL_COLLAPSE||'Collapse'):(appLocale?.LABEL_EXPAND||'Expand')\"\n            [ngClass]=\"expanded ? 'wi-minus': 'wi-plus'\" (click)=\"expandCollapsePanel();\"></button>\n          }\n        </div>\n      </h3>\n    </div>\n  }\n  <div class=\"panel-body\" [ngClass]=\"{'form-elements': isLayoutDialog, 'form-body': !isLayoutDialog}\" [class.hidden]=\"!expanded\">\n    @if (!!statusMessage.caption) {\n      <p wmMessage [attr.aria-hidden]=\"!statusMessage.caption\" [attr.aria-label]=\"statusMessage.caption\" caption.bind=\"statusMessage.caption\" type.bind=\"statusMessage.type\"></p>\n    }\n    <div [ngClass]=\"{'form-elements': !isLayoutDialog, 'form-content': isLayoutDialog}\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <div class=\"basic-btn-grp form-action panel-footer clearfix\" [ngClass]=\"{'modal-footer': isLayoutDialog}\" [class.hidden]=\"!expanded || !showButtons('footer')\">\n      @for (btn of buttonArray | filter : 'position' : 'footer'; track btn; let index = $index) {\n        <ng-container\n          [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n          [ngTemplateOutletContext]=\"{btn:btn}\"\n          [ngTemplateOutletInjector]=\"createCustomInjector('action_footer_' + index, {btn:btn})\">\n        </ng-container>\n      }\n    </div>\n  </div>\n}\n\n\n\n<ng-template #buttonRef let-btn=\"btn\">\n  <button  wmButton name=\"{{btn.key}}\" caption.bind=\"btn.displayName\" class.bind=\"btn.class\" iconclass.bind=\"btn.iconclass\" show.bind=\"btn.show\"\n    (click)=\"invokeActionEvent($event, btn.action)\" type.bind=\"btn.type\" hint.bind=\"btn.title\" shortcutkey.bind=\"btn.shortcutkey\" disabled.bind=\"ngform.status === 'PENDING' || btn.disabled\"\n  tabindex.bind=\"btn.tabindex\" [attr.aria-label]=\"btn.displayName\" [class.hidden]=\"btn.updateMode ? !isUpdateMode : isUpdateMode\"></button>\n</ng-template>\n\n<ng-template #anchorRef let-btn=\"btn\">\n  <a wmAnchor name=\"{{btn.key}}\" caption.bind=\"btn.displayName\" class.bind=\"btn.class\" iconclass.bind=\"btn.iconclass\" show.bind=\"btn.show\"\n    (click)=\"invokeActionEvent($event, btn.action)\" hint.bind=\"btn.title\" shortcutkey.bind=\"btn.shortcutkey\"\n    hyperlink.bind=\"btn.hyperlink\" target.bind=\"btn.target\"\n  tabindex.bind=\"btn.tabindex\" [class.hidden]=\"btn.updateMode ? !isUpdateMode : isUpdateMode\"></a>\n</ng-template>\n\n<ng-container #dynamicForm></ng-container>\n", dependencies: [{ kind: "ngmodule", type: i6.CommonModule }, { kind: "directive", type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: anchor.AnchorComponent, selector: "a[wmAnchor]", exportAs: ["wmAnchor"] }, { kind: "component", type: button.ButtonComponent, selector: "button[wmButton]", exportAs: ["wmButton"] }, { kind: "component", type: i5.MessageComponent, selector: "[wmMessage]", exportAs: ["wmMessage"] }, { kind: "component", type: i5.WmAppIconComponent, selector: "wm-app-icon", inputs: ["icon", "iconclass", "iconurl", "defaultIconClass", "defaultClasses", "iconStyle", "alt"] }, { kind: "pipe", type: i5.FilterPipe, name: "filter" }] }); }
     }
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0__namespace, type: FormComponent, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0__namespace, type: FormComponent, decorators: [{
                 type: i0.Component,
                 args: [{ standalone: true, imports: [i6.CommonModule, i5.FilterPipe, anchor.AnchorComponent, button.ButtonComponent, i5.MessageComponent, i5.WmAppIconComponent], selector: 'form[wmForm]', providers: [
                             i5.provideAsWidgetRef(FormComponent)
@@ -1378,7 +1378,7 @@
             if (!fieldName) {
                 return undefined;
             }
-            return this.ngform && this.ngform.controls[fieldName];
+            return this.ngform?.controls[fieldName];
         }
         addControl(fieldName) {
             this.ngform.addControl(fieldName, this.createControl());
@@ -1400,10 +1400,10 @@
             this.parent = null;
             this.componentInstance = null;
         }
-        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0__namespace, type: FormWidgetDirective, deps: [{ token: FormComponent, optional: true }, { token: table.TableComponent, optional: true }, { token: i5.WidgetRef, self: true }, { token: i1__namespace.FormBuilder }, { token: 'name', attribute: true }, { token: 'key', attribute: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
-        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: FormWidgetDirective, isStandalone: true, selector: "[wmFormWidget]", ngImport: i0__namespace }); }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0__namespace, type: FormWidgetDirective, deps: [{ token: FormComponent, optional: true }, { token: table.TableComponent, optional: true }, { token: i5.WidgetRef, self: true }, { token: i1__namespace.FormBuilder }, { token: 'name', attribute: true }, { token: 'key', attribute: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: FormWidgetDirective, isStandalone: true, selector: "[wmFormWidget]", ngImport: i0__namespace }); }
     }
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0__namespace, type: FormWidgetDirective, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0__namespace, type: FormWidgetDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         standalone: true,
@@ -1512,12 +1512,12 @@
             this.buttonDef = null;
             super.ngOnDestroy();
         }
-        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0__namespace, type: FormActionDirective, deps: [{ token: i0__namespace.Injector }, { token: FormComponent, optional: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
-        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: FormActionDirective, isStandalone: true, selector: "[wmFormAction]", providers: [
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0__namespace, type: FormActionDirective, deps: [{ token: i0__namespace.Injector }, { token: FormComponent, optional: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: FormActionDirective, isStandalone: true, selector: "[wmFormAction]", providers: [
                 i5.provideAsWidgetRef(FormActionDirective)
             ], usesInheritance: true, ngImport: i0__namespace }); }
     }
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0__namespace, type: FormActionDirective, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0__namespace, type: FormActionDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         standalone: true,
@@ -1666,7 +1666,6 @@
         }
         _onBlurField($evt) {
             $($evt.target).closest('.live-field').removeClass('active');
-            this.nativeElement.querySelector('p.text-danger');
             // Fix for [WMS-23959]: ADA issue - adding aria-describedby, aria-invalid, __errormsg attributes only when the form field is invalid , else removing the attributes
             this.setAriaAttributes();
             this._activeField = false;
@@ -1674,17 +1673,18 @@
             this._clicktriggeredByUser = false;
         }
         // Expression to be evaluated in view mode of form field
-        evaluateExpr(object, displayField, displayExpr) {
-            if (!displayExpr || !displayField) {
+        evaluateExpr(object, displayField, displayExpr, bindExpr) {
+            // If dataset is not ready, object will be empty; nothing to evaluate yet
+            if (!object || !Object.keys(object).length) {
+                return;
+            }
+            if (!displayExpr && !displayField && !bindExpr) { // update the display Field to first key of the object if displayField, displayExpr and bindExpr are not provided
                 displayField = Object.keys(object)[0];
-                // If dataset is not ready, display expression will not be defined
-                if (!displayField) {
-                    return;
-                }
             }
             return i5.getEvaluatedData(object, {
                 field: displayField,
-                expression: displayExpr
+                expression: displayExpr,
+                bindExpression: bindExpr
             }, this.viewParent);
         }
         // Expression to be evaluated in view mode of form field
@@ -1693,16 +1693,17 @@
             const value = this.value;
             const displayField = this.displayfield || this.displaylabel;
             const displayExpr = this.displayexpression;
+            const bindExpr = this.binddisplayexpression;
             if (lodashEs.isObject(value)) {
                 if (lodashEs.isArray(value)) {
                     lodashEs.forEach(value, obj => {
                         if (lodashEs.isObject(obj)) {
-                            caption.push(this.evaluateExpr(obj, displayField, displayExpr));
+                            caption.push(this.evaluateExpr(obj, displayField, displayExpr, bindExpr));
                         }
                     });
                 }
                 else {
-                    caption.push(this.evaluateExpr(value, displayField, displayExpr));
+                    caption.push(this.evaluateExpr(value, displayField, displayExpr, bindExpr));
                 }
                 return lodashEs.join(caption, ',');
             }
@@ -1735,7 +1736,7 @@
         }
         // Method to set the properties on inner form widget
         setFormWidget(key, val) {
-            if (this.formWidget && this.formWidget.widget) {
+            if (this.formWidget?.widget) {
                 if (key === 'inputtype' && this.widgettype === i1$1.FormWidgetType.TEXT) {
                     key = 'type';
                 }
@@ -1820,7 +1821,7 @@
             super.onStyleChange(key, nv, ov);
         }
         get datavalue() {
-            return this.formWidget && this.formWidget.datavalue;
+            return this.formWidget?.datavalue;
         }
         set datavalue(val) {
             if (this._control && this.widgettype !== i1$1.FormWidgetType.UPLOAD) {
@@ -1834,7 +1835,7 @@
             this.datavalue = val;
         }
         get maxValue() {
-            return this.formWidgetMax && this.formWidgetMax.datavalue;
+            return this.formWidgetMax?.datavalue;
         }
         set maxValue(val) {
             if (this._maxControl) {
@@ -1849,23 +1850,23 @@
         }
         // Get the reactive form control
         get _control() {
-            return this.ngform && this.ngform.controls[this._fieldName];
+            return this.ngform?.controls[this._fieldName];
         }
         // Get the reactive max form control
         get _maxControl() {
-            return this.ngform && this.ngform.controls[this._fieldName + '_max'];
+            return this.ngform?.controls[this._fieldName + '_max'];
         }
         // Get the displayValue
         get displayValue() {
-            return this.formWidget && this.formWidget.displayValue;
+            return this.formWidget?.displayValue;
         }
         //Get the timestamp
         get timestamp() {
-            return this.formWidget && this.formWidget.timestamp;
+            return this.formWidget?.timestamp;
         }
         //Get the charlength
         get charlength() {
-            return this.formWidget && this.formWidget.charlength;
+            return this.formWidget?.charlength;
         }
         // Create the reactive form control
         createControl() {
@@ -1885,7 +1886,7 @@
                     this.app.notify('captionPositionAnimate', {
                         displayVal: hasValue,
                         nativeEl: captionEl,
-                        isSelectMultiple: this.formWidget && this.formWidget.multiple,
+                        isSelectMultiple: this.formWidget?.multiple,
                         isFocused: this._activeField
                     });
                 }
@@ -1947,7 +1948,7 @@
         }
         resetDisplayInput() {
             if ((!i1$1.isDefined(this.value) || this.value === '')) {
-                this.formWidget && this.formWidget.resetDisplayInput && this.formWidget.resetDisplayInput();
+                this.formWidget?.resetDisplayInput?.();
             }
         }
         reset() {
@@ -2031,10 +2032,8 @@
                         this.widget.show = false;
                     }
                 }
-                else {
-                    if (!this['pc-display']) {
-                        this.widget.show = false;
-                    }
+                else if (!this['pc-display']) {
+                    this.widget.show = false;
                 }
                 this.fieldDefConfig.displaname = this.displayname;
                 this.fieldDefConfig.show = this.show;
@@ -2103,14 +2102,14 @@
             // Call parent ngOnDestroy (StylableComponent extends BaseComponent which has cleanup)
             super.ngOnDestroy();
         }
-        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0__namespace, type: FormFieldDirective, deps: [{ token: i0__namespace.Injector }, { token: FormComponent }, { token: i1__namespace.FormBuilder }, { token: i1$1__namespace.Viewport }, { token: i1$1__namespace.App }, { token: i3__namespace.ListComponent, optional: true }, { token: 'chipclass.bind', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'displayexpression.bind', attribute: true }, { token: 'displaylabel.bind', attribute: true }, { token: 'widgettype', attribute: true }, { token: 'name', attribute: true }, { token: 'displayimagesrc.bind', attribute: true }, { token: 'key', attribute: true }, { token: 'is-range', attribute: true }, { token: 'pc-display', attribute: true }, { token: 'mobile-display', attribute: true }, { token: 'tablet-display', attribute: true }, { token: i5.Context, self: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
-        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: FormFieldDirective, isStandalone: true, selector: "[wmFormField]", host: { listeners: { "keydown": "onKeydownHandler($event)", "click": "handleClick($event)" } }, providers: [
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0__namespace, type: FormFieldDirective, deps: [{ token: i0__namespace.Injector }, { token: FormComponent }, { token: i1__namespace.FormBuilder }, { token: i1$1__namespace.Viewport }, { token: i1$1__namespace.App }, { token: i3__namespace.ListComponent, optional: true }, { token: 'chipclass.bind', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'displayexpression.bind', attribute: true }, { token: 'displaylabel.bind', attribute: true }, { token: 'widgettype', attribute: true }, { token: 'name', attribute: true }, { token: 'displayimagesrc.bind', attribute: true }, { token: 'key', attribute: true }, { token: 'is-range', attribute: true }, { token: 'pc-display', attribute: true }, { token: 'mobile-display', attribute: true }, { token: 'tablet-display', attribute: true }, { token: i5.Context, self: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: FormFieldDirective, isStandalone: true, selector: "[wmFormField]", host: { listeners: { "keydown": "onKeydownHandler($event)", "click": "handleClick($event)" } }, providers: [
                 i5.provideAsWidgetRef(FormFieldDirective),
                 i5.provideAs(FormFieldDirective, i1.NG_VALUE_ACCESSOR, true),
                 { provide: i5.Context, useFactory: () => { return {}; }, multi: true }
             ], queries: [{ propertyName: "formWidget", first: true, predicate: ["formWidget"], descendants: true, static: true }, { propertyName: "formWidgetMax", first: true, predicate: ["formWidgetMax"], descendants: true }], exportAs: ["wmFormField"], usesInheritance: true, ngImport: i0__namespace }); }
     }
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0__namespace, type: FormFieldDirective, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0__namespace, type: FormFieldDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         standalone: true,
@@ -2335,10 +2334,10 @@
             this.app = null;
             this.dialogService = null;
         }
-        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0__namespace, type: LiveActionsDirective, deps: [{ token: i3.ListComponent, self: true }, { token: i1$1__namespace.App }, { token: i1$1__namespace.AbstractDialogService }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
-        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: LiveActionsDirective, isStandalone: true, selector: "[wmLiveActions]", ngImport: i0__namespace }); }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0__namespace, type: LiveActionsDirective, deps: [{ token: i3.ListComponent, self: true }, { token: i1$1__namespace.App }, { token: i1$1__namespace.AbstractDialogService }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: LiveActionsDirective, isStandalone: true, selector: "[wmLiveActions]", ngImport: i0__namespace }); }
     }
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0__namespace, type: LiveActionsDirective, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0__namespace, type: LiveActionsDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         standalone: true,
@@ -2476,10 +2475,10 @@
                 this.eventSubscription();
             }
         }
-        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0__namespace, type: DependsonDirective, deps: [{ token: 'dialogid', attribute: true }, { token: 'dependson', attribute: true }, { token: i1$1__namespace.AbstractDialogService }, { token: i1$1__namespace.App }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
-        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: DependsonDirective, isStandalone: true, selector: "[dependson]", queries: [{ propertyName: "formChildren", predicate: FormComponent, descendants: true }], ngImport: i0__namespace }); }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0__namespace, type: DependsonDirective, deps: [{ token: 'dialogid', attribute: true }, { token: 'dependson', attribute: true }, { token: i1$1__namespace.AbstractDialogService }, { token: i1$1__namespace.App }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: DependsonDirective, isStandalone: true, selector: "[dependson]", queries: [{ propertyName: "formChildren", predicate: FormComponent, descendants: true }], ngImport: i0__namespace }); }
     }
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0__namespace, type: DependsonDirective, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0__namespace, type: DependsonDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         standalone: true,
@@ -2662,7 +2661,7 @@
                 if (isValid === false) {
                     return;
                 }
-                if (isValid && isValid.error) {
+                if (isValid?.error) {
                     this.form.toggleMessage(true, isValid.error, 'error', 'ERROR');
                     return;
                 }
@@ -2713,20 +2712,18 @@
                                 matchMode = i5.getEmptyMatchMode(this.form.enableemptyfilter);
                                 fieldValue = filterField._value;
                             }
-                            else {
-                                if (filterField.type === i1$1.DataType.BOOLEAN) {
-                                    if (i1$1.isDefined(filterField._value) && filterField._value !== '') {
-                                        fieldValue = JSON.parse(filterField._value);
-                                    }
-                                }
-                                else {
-                                    fieldValue = filterField._value;
+                            else if (filterField.type === i1$1.DataType.BOOLEAN) {
+                                if (i1$1.isDefined(filterField._value) && filterField._value !== '') {
+                                    fieldValue = JSON.parse(filterField._value);
                                 }
                             }
+                            else {
+                                fieldValue = filterField._value;
+                            }
                             break;
                         case i1$1.FormWidgetType.CHECKBOXSET:
                         case i1$1.FormWidgetType.CHIPS:
-                            if (filterField._value && filterField._value.length) {
+                            if (filterField._value?.length) {
                                 fieldValue = filterField._value;
                             }
                             break;
@@ -2828,10 +2825,10 @@
             this._options = null;
             this.orderBy = null;
         }
-        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0__namespace, type: LiveFilterDirective, deps: [{ token: FormComponent, self: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
-        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: LiveFilterDirective, isStandalone: true, selector: "[wmLiveFilter]", ngImport: i0__namespace }); }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0__namespace, type: LiveFilterDirective, deps: [{ token: FormComponent, self: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: LiveFilterDirective, isStandalone: true, selector: "[wmLiveFilter]", ngImport: i0__namespace }); }
     }
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0__namespace, type: LiveFilterDirective, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0__namespace, type: LiveFilterDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         standalone: true,
@@ -3092,7 +3089,7 @@
         findOperationType() {
             let operation;
             let isPrimary = false;
-            const sourceOperation = this.form.datasource && this.form.datasource.execute(i1$1.DataSource.Operation.GET_OPERATION_TYPE);
+            const sourceOperation = this.form.datasource?.execute(i1$1.DataSource.Operation.GET_OPERATION_TYPE);
             if (sourceOperation && sourceOperation !== 'read') {
                 return sourceOperation;
             }
@@ -3230,7 +3227,7 @@
                 if (isValid === false) {
                     return;
                 }
-                if (isValid && isValid.error) {
+                if (isValid?.error) {
                     this.form.toggleMessage(true, isValid.error, 'error');
                     return;
                 }
@@ -3241,7 +3238,7 @@
                 }
             }
             // If operation is update, form is not touched and current data and previous data is same, Show no changes detected message
-            if (this.form.operationType === i5.Live_Operations.UPDATE && this.form.ngform && this.form.ngform.pristine &&
+            if (this.form.operationType === i5.Live_Operations.UPDATE && this.form.ngform?.pristine &&
                 (this.form.isSelected && lodashEs.isEqual(data, prevData))) {
                 this.form.toggleMessage(true, this.form.appLocale.MESSAGE_NO_CHANGES, 'info', '');
                 i1$1.$appDigest();
@@ -3311,10 +3308,10 @@
             // MEMORY LEAK FIX: Clear form reference
             this.form = null;
         }
-        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0__namespace, type: LiveFormDirective, deps: [{ token: FormComponent, self: true }, { token: i1$2__namespace.LiveTableComponent, optional: true }, { token: i5__namespace.ToDatePipe }, { token: i1$1__namespace.AbstractDialogService }, { token: 'formlayout', attribute: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
-        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: LiveFormDirective, isStandalone: true, selector: "[wmLiveForm]", host: { listeners: { "keydown": "onKeydownHandler($event)" } }, ngImport: i0__namespace }); }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0__namespace, type: LiveFormDirective, deps: [{ token: FormComponent, self: true }, { token: i1$2__namespace.LiveTableComponent, optional: true }, { token: i5__namespace.ToDatePipe }, { token: i1$1__namespace.AbstractDialogService }, { token: 'formlayout', attribute: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: LiveFormDirective, isStandalone: true, selector: "[wmLiveForm]", host: { listeners: { "keydown": "onKeydownHandler($event)" } }, ngImport: i0__namespace }); }
     }
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0__namespace, type: LiveFormDirective, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0__namespace, type: LiveFormDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         standalone: true,