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

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

@@ -117,7 +117,7 @@ const findInvalidElement = ($formEle, ngForm) => {
     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);
         }
@@ -133,10 +133,8 @@ const getActiveElement = (element) => {
     switch (widgetType) {
         case 'select':
             return element.querySelector('select');
-            break;
         case 'textarea':
             return element.querySelector('textarea');
-            break;
         default:
             return element.querySelector('input');
     }
@@ -272,7 +270,7 @@ class FormComponent extends StylableComponent {
         }, 250);
     }
     ngAfterViewInit() {
-        if (this.parentForm && this.parentForm.ngform && this.isParentList) {
+        if (this.parentForm?.ngform && this.isParentList) {
             // setting formArray control on ngform.
             if (!get(this.parentForm.ngform.controls, this.parentList.name)) {
                 this.parentForm.ngform.setControl(this.parentList.name, new FormArray([]));
@@ -288,7 +286,7 @@ class FormComponent extends StylableComponent {
     }
     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;
@@ -446,7 +444,7 @@ class FormComponent extends StylableComponent {
         }
     }
     updateFieldSource() {
-        if (this.formdatasource && this.formdatasource.execute(DataSource.Operation.IS_API_AWARE)) {
+        if (this.formdatasource?.execute(DataSource.Operation.IS_API_AWARE)) {
             return;
         }
         else if (this.formdatasource && !this.formdatasource.twoWayBinding) {
@@ -466,7 +464,7 @@ class FormComponent extends StylableComponent {
         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();
@@ -483,14 +481,14 @@ class FormComponent extends StylableComponent {
                     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();
                     }
                     $appDigest();
                     return true;
                 }
-                else if ($target && $target.length) {
+                else if ($target?.length) {
                     $target.focus();
                 }
                 return true;
@@ -1169,7 +1167,7 @@ class FormComponent extends StylableComponent {
         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
@@ -1188,16 +1186,16 @@ class FormComponent extends StylableComponent {
         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
@@ -1265,12 +1263,12 @@ class FormComponent extends StylableComponent {
         this._debouncedSubmitForm = null;
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FormComponent, deps: [{ token: i0.Injector }, { token: i0.EnvironmentInjector }, { token: i1.FormBuilder }, { token: i1$1.App }, { token: i1$1.AbstractDialogService }, { token: i1$1.DynamicComponentRefProvider }, { token: i0.NgZone }, { token: i3.ListComponent, optional: true }, { token: FormComponent, optional: true, skipSelf: true }, { token: i4.PrefabDirective, optional: true, skipSelf: true }, { token: i5.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.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵ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.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: FormComponent, deps: [{ token: i0.Injector }, { token: i0.EnvironmentInjector }, { token: i1.FormBuilder }, { token: i1$1.App }, { token: i1$1.AbstractDialogService }, { token: i1$1.DynamicComponentRefProvider }, { token: i0.NgZone }, { token: i3.ListComponent, optional: true }, { token: FormComponent, optional: true, skipSelf: true }, { token: i4.PrefabDirective, optional: true, skipSelf: true }, { token: i5.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.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵ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: [
             provideAsWidgetRef(FormComponent)
         ], queries: [{ propertyName: "componentRefs", predicate: WidgetRef, descendants: true }], viewQueries: [{ propertyName: "dynamicFormRef", first: true, predicate: ["dynamicForm"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "messageRef", first: true, predicate: MessageComponent, descendants: true }], usesInheritance: true, ngImport: i0, 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: CommonModule }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AnchorComponent, selector: "a[wmAnchor]", exportAs: ["wmAnchor"] }, { kind: "component", type: ButtonComponent, selector: "button[wmButton]", exportAs: ["wmButton"] }, { kind: "component", type: MessageComponent, selector: "[wmMessage]", exportAs: ["wmMessage"] }, { kind: "component", type: WmAppIconComponent, selector: "wm-app-icon", inputs: ["icon", "iconclass", "iconurl", "defaultIconClass", "defaultClasses", "iconStyle", "alt"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule, FilterPipe, AnchorComponent, ButtonComponent, MessageComponent, WmAppIconComponent], selector: 'form[wmForm]', providers: [
                         provideAsWidgetRef(FormComponent)
@@ -1369,7 +1367,7 @@ class FormWidgetDirective {
         if (!fieldName) {
             return undefined;
         }
-        return this.ngform && this.ngform.controls[fieldName];
+        return this.ngform?.controls[fieldName];
     }
     addControl(fieldName) {
         this.ngform.addControl(fieldName, this.createControl());
@@ -1391,10 +1389,10 @@ class FormWidgetDirective {
         this.parent = null;
         this.componentInstance = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FormWidgetDirective, deps: [{ token: FormComponent, optional: true }, { token: TableComponent, optional: true }, { token: WidgetRef, self: true }, { token: i1.FormBuilder }, { token: 'name', attribute: true }, { token: 'key', attribute: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: FormWidgetDirective, isStandalone: true, selector: "[wmFormWidget]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: FormWidgetDirective, deps: [{ token: FormComponent, optional: true }, { token: TableComponent, optional: true }, { token: WidgetRef, self: true }, { token: i1.FormBuilder }, { token: 'name', attribute: true }, { token: 'key', attribute: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: FormWidgetDirective, isStandalone: true, selector: "[wmFormWidget]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FormWidgetDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: FormWidgetDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -1503,12 +1501,12 @@ class FormActionDirective extends BaseComponent {
         this.buttonDef = null;
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FormActionDirective, deps: [{ token: i0.Injector }, { token: FormComponent, 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: FormActionDirective, isStandalone: true, selector: "[wmFormAction]", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: FormActionDirective, deps: [{ token: i0.Injector }, { token: FormComponent, 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: FormActionDirective, isStandalone: true, selector: "[wmFormAction]", providers: [
             provideAsWidgetRef(FormActionDirective)
         ], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FormActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: FormActionDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -1657,7 +1655,6 @@ class FormFieldDirective extends StylableComponent {
     }
     _onBlurField($evt) {
         $($evt.target).closest('.live-field').removeClass('active');
-        const ele = 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;
@@ -1665,17 +1662,18 @@ class FormFieldDirective extends StylableComponent {
         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 getEvaluatedData(object, {
             field: displayField,
-            expression: displayExpr
+            expression: displayExpr,
+            bindExpression: bindExpr
         }, this.viewParent);
     }
     // Expression to be evaluated in view mode of form field
@@ -1684,16 +1682,17 @@ class FormFieldDirective extends StylableComponent {
         const value = this.value;
         const displayField = this.displayfield || this.displaylabel;
         const displayExpr = this.displayexpression;
+        const bindExpr = this.binddisplayexpression;
         if (isObject(value)) {
             if (isArray(value)) {
                 forEach(value, obj => {
                     if (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 join(caption, ',');
         }
@@ -1726,7 +1725,7 @@ class FormFieldDirective extends StylableComponent {
     }
     // 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 === FormWidgetType.TEXT) {
                 key = 'type';
             }
@@ -1811,7 +1810,7 @@ class FormFieldDirective extends StylableComponent {
         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 !== FormWidgetType.UPLOAD) {
@@ -1825,7 +1824,7 @@ class FormFieldDirective extends StylableComponent {
         this.datavalue = val;
     }
     get maxValue() {
-        return this.formWidgetMax && this.formWidgetMax.datavalue;
+        return this.formWidgetMax?.datavalue;
     }
     set maxValue(val) {
         if (this._maxControl) {
@@ -1840,23 +1839,23 @@ class FormFieldDirective extends StylableComponent {
     }
     // 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() {
@@ -1876,7 +1875,7 @@ class FormFieldDirective extends StylableComponent {
                 this.app.notify('captionPositionAnimate', {
                     displayVal: hasValue,
                     nativeEl: captionEl,
-                    isSelectMultiple: this.formWidget && this.formWidget.multiple,
+                    isSelectMultiple: this.formWidget?.multiple,
                     isFocused: this._activeField
                 });
             }
@@ -1938,7 +1937,7 @@ class FormFieldDirective extends StylableComponent {
     }
     resetDisplayInput() {
         if ((!isDefined(this.value) || this.value === '')) {
-            this.formWidget && this.formWidget.resetDisplayInput && this.formWidget.resetDisplayInput();
+            this.formWidget?.resetDisplayInput?.();
         }
     }
     reset() {
@@ -2022,10 +2021,8 @@ class FormFieldDirective extends StylableComponent {
                     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;
@@ -2094,14 +2091,14 @@ class FormFieldDirective extends StylableComponent {
         // Call parent ngOnDestroy (StylableComponent extends BaseComponent which has cleanup)
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FormFieldDirective, deps: [{ token: i0.Injector }, { token: FormComponent }, { token: i1.FormBuilder }, { token: i1$1.Viewport }, { token: i1$1.App }, { token: i3.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: 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: FormFieldDirective, isStandalone: true, selector: "[wmFormField]", host: { listeners: { "keydown": "onKeydownHandler($event)", "click": "handleClick($event)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: FormFieldDirective, deps: [{ token: i0.Injector }, { token: FormComponent }, { token: i1.FormBuilder }, { token: i1$1.Viewport }, { token: i1$1.App }, { token: i3.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: 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: FormFieldDirective, isStandalone: true, selector: "[wmFormField]", host: { listeners: { "keydown": "onKeydownHandler($event)", "click": "handleClick($event)" } }, providers: [
             provideAsWidgetRef(FormFieldDirective),
             provideAs(FormFieldDirective, NG_VALUE_ACCESSOR, true),
             { provide: 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FormFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: FormFieldDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -2326,10 +2323,10 @@ class LiveActionsDirective {
         this.app = null;
         this.dialogService = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: LiveActionsDirective, deps: [{ token: ListComponent, self: true }, { token: i1$1.App }, { token: i1$1.AbstractDialogService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: LiveActionsDirective, isStandalone: true, selector: "[wmLiveActions]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: LiveActionsDirective, deps: [{ token: ListComponent, self: true }, { token: i1$1.App }, { token: i1$1.AbstractDialogService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: LiveActionsDirective, isStandalone: true, selector: "[wmLiveActions]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: LiveActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: LiveActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -2467,10 +2464,10 @@ class DependsonDirective {
             this.eventSubscription();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: DependsonDirective, deps: [{ token: 'dialogid', attribute: true }, { token: 'dependson', attribute: true }, { token: i1$1.AbstractDialogService }, { token: i1$1.App }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: DependsonDirective, isStandalone: true, selector: "[dependson]", queries: [{ propertyName: "formChildren", predicate: FormComponent, descendants: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: DependsonDirective, deps: [{ token: 'dialogid', attribute: true }, { token: 'dependson', attribute: true }, { token: i1$1.AbstractDialogService }, { token: i1$1.App }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: DependsonDirective, isStandalone: true, selector: "[dependson]", queries: [{ propertyName: "formChildren", predicate: FormComponent, descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: DependsonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: DependsonDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -2654,7 +2651,7 @@ class LiveFilterDirective {
             if (isValid === false) {
                 return;
             }
-            if (isValid && isValid.error) {
+            if (isValid?.error) {
                 this.form.toggleMessage(true, isValid.error, 'error', 'ERROR');
                 return;
             }
@@ -2705,20 +2702,18 @@ class LiveFilterDirective {
                             matchMode = getEmptyMatchMode(this.form.enableemptyfilter);
                             fieldValue = filterField._value;
                         }
-                        else {
-                            if (filterField.type === DataType.BOOLEAN) {
-                                if (isDefined(filterField._value) && filterField._value !== '') {
-                                    fieldValue = JSON.parse(filterField._value);
-                                }
-                            }
-                            else {
-                                fieldValue = filterField._value;
+                        else if (filterField.type === DataType.BOOLEAN) {
+                            if (isDefined(filterField._value) && filterField._value !== '') {
+                                fieldValue = JSON.parse(filterField._value);
                             }
                         }
+                        else {
+                            fieldValue = filterField._value;
+                        }
                         break;
                     case FormWidgetType.CHECKBOXSET:
                     case FormWidgetType.CHIPS:
-                        if (filterField._value && filterField._value.length) {
+                        if (filterField._value?.length) {
                             fieldValue = filterField._value;
                         }
                         break;
@@ -2820,10 +2815,10 @@ class LiveFilterDirective {
         this._options = null;
         this.orderBy = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: LiveFilterDirective, deps: [{ token: FormComponent, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: LiveFilterDirective, isStandalone: true, selector: "[wmLiveFilter]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: LiveFilterDirective, deps: [{ token: FormComponent, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: LiveFilterDirective, isStandalone: true, selector: "[wmLiveFilter]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: LiveFilterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: LiveFilterDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -3084,7 +3079,7 @@ class LiveFormDirective {
     findOperationType() {
         let operation;
         let isPrimary = false;
-        const sourceOperation = this.form.datasource && this.form.datasource.execute(DataSource.Operation.GET_OPERATION_TYPE);
+        const sourceOperation = this.form.datasource?.execute(DataSource.Operation.GET_OPERATION_TYPE);
         if (sourceOperation && sourceOperation !== 'read') {
             return sourceOperation;
         }
@@ -3222,7 +3217,7 @@ class LiveFormDirective {
             if (isValid === false) {
                 return;
             }
-            if (isValid && isValid.error) {
+            if (isValid?.error) {
                 this.form.toggleMessage(true, isValid.error, 'error');
                 return;
             }
@@ -3233,7 +3228,7 @@ class LiveFormDirective {
             }
         }
         // 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 === Live_Operations.UPDATE && this.form.ngform && this.form.ngform.pristine &&
+        if (this.form.operationType === Live_Operations.UPDATE && this.form.ngform?.pristine &&
             (this.form.isSelected && isEqual(data, prevData))) {
             this.form.toggleMessage(true, this.form.appLocale.MESSAGE_NO_CHANGES, 'info', '');
             $appDigest();
@@ -3303,10 +3298,10 @@ class LiveFormDirective {
         // MEMORY LEAK FIX: Clear form reference
         this.form = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: LiveFormDirective, deps: [{ token: FormComponent, self: true }, { token: i1$2.LiveTableComponent, optional: true }, { token: i5.ToDatePipe }, { token: i1$1.AbstractDialogService }, { token: 'formlayout', attribute: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: LiveFormDirective, isStandalone: true, selector: "[wmLiveForm]", host: { listeners: { "keydown": "onKeydownHandler($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: LiveFormDirective, deps: [{ token: FormComponent, self: true }, { token: i1$2.LiveTableComponent, optional: true }, { token: i5.ToDatePipe }, { token: i1$1.AbstractDialogService }, { token: 'formlayout', attribute: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: LiveFormDirective, isStandalone: true, selector: "[wmLiveForm]", host: { listeners: { "keydown": "onKeydownHandler($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: LiveFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: LiveFormDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,