@wavemaker/angular-codegen 11.2.0-next.141451 → 11.2.0-next.141561

angular-codegen/angular-app/package-lock.json

@@ -5959,26 +5959,6 @@
         "yarn": "^1.22.19"
       }
     },
-    "@wavemaker/variables": {
-      "version": "11.2.0-next.141451",
-      "resolved": "https://registry.npmjs.org/@wavemaker/variables/-/variables-11.2.0-next.141451.tgz",
-      "integrity": "sha512-jt41DfG6xG0QZyLyJvHbLEJ21vJu91+j0dck4dbrbb43jPuveGKfscMuP7zlRH3lf5P0mEs83ryCGAMjU2Emwg==",
-      "requires": {
-        "@metrichor/jmespath": "^0.3.1",
-        "lodash": "^4.17.21",
-        "x2js": "^3.4.3"
-      },
-      "dependencies": {
-        "x2js": {
-          "version": "3.4.4",
-          "resolved": "https://registry.npmjs.org/x2js/-/x2js-3.4.4.tgz",
-          "integrity": "sha512-yG/ThaBCgnsa3aoMPAe7QwDpcyU4D70hjXC4Y1lZSfD/Tgd0MpE19FnZZRAjekryw0c8cffpOt9zsPEiqktO6Q==",
-          "requires": {
-            "@xmldom/xmldom": "^0.8.3"
-          }
-        }
-      }
-    },
     "@webassemblyjs/ast": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
@@ -6179,11 +6159,6 @@
         "@xtuc/long": "4.2.2"
       }
     },
-    "@xmldom/xmldom": {
-      "version": "0.8.6",
-      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.6.tgz",
-      "integrity": "sha512-uRjjusqpoqfmRkTaNuLJ2VohVr67Q5YwDATW3VU7PfzTj6IRaihGrYI7zckGZjxQPBIp63nfvJbM+Yu5ICh0Bg=="
-    },
     "@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",

angular-codegen/angular-app/package.json

@@ -47,7 +47,6 @@
         "@metrichor/jmespath": "^0.3.1",
         "@wavemaker.com/nvd3": "1.0.0",
         "@wavemaker/focus-trap": "^1.0.0",
-        "@wavemaker/variables": "11.2.0-next.141451",
         "angular-imask": "6.0.4",
         "angular2-websocket": "0.9.7",
         "core-js": "2.5.4",
@@ -71,7 +70,7 @@
         "tslib": "^2.0.0",
         "x2js": "3.2.6",
         "zone.js": "~0.11.4",
-        "@wavemaker/app-ng-runtime": "11.2.0-next.141451"
+        "@wavemaker/app-ng-runtime": "11.2.0-next.141561"
     },
     "devDependencies": {
         "@ampproject/rollup-plugin-closure-compiler": "0.8.5",

angular-codegen/angular-app/tsconfig.json

@@ -37,9 +37,6 @@
             "@wm/core": [
                 "node_modules/@wavemaker/app-ng-runtime/core"
             ],
-            "@wavemaker/variables": [
-                "node_modules/@wavemaker/variables/"
-            ],
             "@wm/components/base": [
                 "node_modules/@wavemaker/app-ng-runtime/components/base"
             ],

angular-codegen/dependencies/pipe-provider.cjs.js

@@ -46638,42 +46638,41 @@ const validateDataSourceCtx = (ds, ctx) => {
  * @param name name of the variable
  * @param context scope of the variable
  */
-const processFilterExpBindNode = (context, filterExpressions, variable) => {
+const processFilterExpBindNode = (context, filterExpressions) => {
     const destroyFn = context.registerDestroyListener ? context.registerDestroyListener.bind(context) : _.noop;
     const filter$ = new Subject();
     const bindFilExpObj = (obj, targetNodeKey) => {
-        const listener = (newVal, oldVal) => {
-            if ((newVal === oldVal && _.isUndefined(newVal)) || (_.isUndefined(newVal) && !_.isUndefined(oldVal))) {
-                return;
-            }
-            // Skip cloning for blob column
-            if (!_.includes(['blob', 'file'], obj.type)) {
-                newVal = getClonedObject(newVal);
-            }
-            // backward compatibility: where we are allowing the user to bind complete object
-            if (obj.target === 'dataBinding') {
-                // remove the existing databinding element
-                filterExpressions.rules = [];
-                // now add all the returned values
-                _.forEach(newVal, function (value, target) {
-                    filterExpressions.rules.push({
-                        'target': target,
-                        'value': value,
-                        'matchMode': obj.matchMode || 'startignorecase',
-                        'required': false,
-                        'type': ''
-                    });
-                });
-            }
-            else {
-                // setting value to the root node
-                obj[targetNodeKey] = newVal;
-            }
-            filter$.next({ filterExpressions, newVal });
-        };
         if (stringStartsWith(obj[targetNodeKey], 'bind:')) {
             // [Todo-CSP]: needs a check, where is this used
-            destroyFn($watch(obj[targetNodeKey].replace('bind:', ''), context, {}, variable ? variable.invokeOnFiltertExpressionChange.bind(variable, obj, targetNodeKey) : listener, undefined, false, { arrayType: _.includes(['in', 'notin'], obj.matchMode) }));
+            destroyFn($watch(obj[targetNodeKey].replace('bind:', ''), context, {}, (newVal, oldVal) => {
+                if ((newVal === oldVal && _.isUndefined(newVal)) || (_.isUndefined(newVal) && !_.isUndefined(oldVal))) {
+                    return;
+                }
+                // Skip cloning for blob column
+                if (!_.includes(['blob', 'file'], obj.type)) {
+                    newVal = getClonedObject(newVal);
+                }
+                // backward compatibility: where we are allowing the user to bind complete object
+                if (obj.target === 'dataBinding') {
+                    // remove the existing databinding element
+                    filterExpressions.rules = [];
+                    // now add all the returned values
+                    _.forEach(newVal, function (value, target) {
+                        filterExpressions.rules.push({
+                            'target': target,
+                            'value': value,
+                            'matchMode': obj.matchMode || 'startignorecase',
+                            'required': false,
+                            'type': ''
+                        });
+                    });
+                }
+                else {
+                    // setting value to the root node
+                    obj[targetNodeKey] = newVal;
+                }
+                filter$.next({ filterExpressions, newVal });
+            }, undefined, false, { arrayType: _.includes(['in', 'notin'], obj.matchMode) }));
         }
     };
     const traverseFilterExpressions = expressions => {
@@ -46782,6 +46781,13 @@ const addForIdAttributes = (element) => {
             setAttr(labelEl[0], 'for', widgetId);
         }
     }
+    /*Adding aria-labelledby to radioset, checkboxset widgets*/
+    const ulEl = element.querySelectorAll('ul');
+    if (labelEl.length && ulEl.length && (ulEl[0].getAttribute('role') === 'radiogroup' || ulEl[0].getAttribute('role') === 'group')) {
+        const widgetId = 'wm-group-label-' + generateGUId();
+        setAttr(ulEl[0], 'aria-labelledby', widgetId);
+        setAttr(labelEl[0], 'id', widgetId);
+    }
 };
 /**
  * This method is used to adjust the container position

angular-codegen/dependencies/transpilation-mobile.cjs.js

@@ -40714,7 +40714,7 @@ const getFormWidgetTemplate = (widgetType, innerTmpl, attrs, options = {}) => {
             tmpl = `<div wmCheckbox ${innerTmpl} ${attrs.get('required') === 'true' ? 'required=true' : ''}></div>`;
             break;
         case FormWidgetType.CHECKBOXSET:
-            tmpl = `<ul wmCheckboxset ${innerTmpl} ${attrs.get('required') === 'true' ? 'required=true' : ''}></ul>`;
+            tmpl = `<ul role="group" wmCheckboxset ${innerTmpl} ${attrs.get('required') === 'true' ? 'required=true' : ''}></ul>`;
             break;
         case FormWidgetType.CHIPS:
             tmpl = `<ul wmChips role="input" debouncetime="${attrs.get('debouncetime')}" ${innerTmpl}></ul>`;
@@ -40738,7 +40738,7 @@ const getFormWidgetTemplate = (widgetType, innerTmpl, attrs, options = {}) => {
             tmpl = `<wm-input ${innerTmpl} ${attrs.get('required') === 'true' ? 'required=true' : ''} type="password" aria-label="Enter password" ${updateOnTmpl}></wm-input>`;
             break;
         case FormWidgetType.RADIOSET:
-            tmpl = `<ul wmRadioset ${innerTmpl}></ul>`;
+            tmpl = `<ul role="radiogroup" wmRadioset ${innerTmpl}></ul>`;
             break;
         case FormWidgetType.RATING:
             tmpl = `<div wmRating ${innerTmpl}></div>`;
@@ -40760,10 +40760,10 @@ const getFormWidgetTemplate = (widgetType, innerTmpl, attrs, options = {}) => {
             break;
         case FormWidgetType.TEXT:
             const inputType = options.inputType || 'inputtype';
-            tmpl = `<wm-input ${innerTmpl}  ${attrs.get('required') === 'true' ? 'required=true' : ''} type="${attrs.get(inputType) || 'text'}" aria-describedby="Enter text" ${updateOnTmpl}></wm-input>`;
+            tmpl = `<wm-input ${innerTmpl}  ${attrs.get('required') === 'true' ? 'required=true' : ''} type="${attrs.get(inputType) || 'text'}" ${updateOnTmpl}></wm-input>`;
             break;
         case FormWidgetType.TEXTAREA:
-            tmpl = `<wm-textarea ${innerTmpl} ${attrs.get('required') === 'true' ? 'required=true' : ''} role="textbox" aria-describedby="Place your text" ${updateOnTmpl}></wm-textarea>`;
+            tmpl = `<wm-textarea ${innerTmpl} ${attrs.get('required') === 'true' ? 'required=true' : ''} role="textbox" ${updateOnTmpl}></wm-textarea>`;
             break;
         case FormWidgetType.TIME:
             tmpl = `<div wmTime ${attrs.get('required') === 'true' ? 'required=true' : ''} dataentrymode="${attrs.get('dataentrymode')}" ${innerTmpl}></div>`;
@@ -40792,7 +40792,7 @@ const getFormWidgetTemplate = (widgetType, innerTmpl, attrs, options = {}) => {
             }
             break;
         default:
-            tmpl = `<wm-input ${innerTmpl} ${attrs.get('required') === 'true' ? 'required=true' : ''} aria-describedby="Enter text" type="text" ${updateOnTmpl}></wm-input>`;
+            tmpl = `<wm-input ${innerTmpl} ${attrs.get('required') === 'true' ? 'required=true' : ''} type="text" ${updateOnTmpl}></wm-input>`;
             break;
     }
     return tmpl;
@@ -42716,42 +42716,41 @@ const validateDataSourceCtx = (ds, ctx) => {
  * @param name name of the variable
  * @param context scope of the variable
  */
-const processFilterExpBindNode = (context, filterExpressions, variable) => {
+const processFilterExpBindNode = (context, filterExpressions) => {
     const destroyFn = context.registerDestroyListener ? context.registerDestroyListener.bind(context) : _.noop;
     const filter$ = new Subject();
     const bindFilExpObj = (obj, targetNodeKey) => {
-        const listener = (newVal, oldVal) => {
-            if ((newVal === oldVal && _.isUndefined(newVal)) || (_.isUndefined(newVal) && !_.isUndefined(oldVal))) {
-                return;
-            }
-            // Skip cloning for blob column
-            if (!_.includes(['blob', 'file'], obj.type)) {
-                newVal = getClonedObject(newVal);
-            }
-            // backward compatibility: where we are allowing the user to bind complete object
-            if (obj.target === 'dataBinding') {
-                // remove the existing databinding element
-                filterExpressions.rules = [];
-                // now add all the returned values
-                _.forEach(newVal, function (value, target) {
-                    filterExpressions.rules.push({
-                        'target': target,
-                        'value': value,
-                        'matchMode': obj.matchMode || 'startignorecase',
-                        'required': false,
-                        'type': ''
-                    });
-                });
-            }
-            else {
-                // setting value to the root node
-                obj[targetNodeKey] = newVal;
-            }
-            filter$.next({ filterExpressions, newVal });
-        };
         if (stringStartsWith(obj[targetNodeKey], 'bind:')) {
             // [Todo-CSP]: needs a check, where is this used
-            destroyFn($watch(obj[targetNodeKey].replace('bind:', ''), context, {}, variable ? variable.invokeOnFiltertExpressionChange.bind(variable, obj, targetNodeKey) : listener, undefined, false, { arrayType: _.includes(['in', 'notin'], obj.matchMode) }));
+            destroyFn($watch(obj[targetNodeKey].replace('bind:', ''), context, {}, (newVal, oldVal) => {
+                if ((newVal === oldVal && _.isUndefined(newVal)) || (_.isUndefined(newVal) && !_.isUndefined(oldVal))) {
+                    return;
+                }
+                // Skip cloning for blob column
+                if (!_.includes(['blob', 'file'], obj.type)) {
+                    newVal = getClonedObject(newVal);
+                }
+                // backward compatibility: where we are allowing the user to bind complete object
+                if (obj.target === 'dataBinding') {
+                    // remove the existing databinding element
+                    filterExpressions.rules = [];
+                    // now add all the returned values
+                    _.forEach(newVal, function (value, target) {
+                        filterExpressions.rules.push({
+                            'target': target,
+                            'value': value,
+                            'matchMode': obj.matchMode || 'startignorecase',
+                            'required': false,
+                            'type': ''
+                        });
+                    });
+                }
+                else {
+                    // setting value to the root node
+                    obj[targetNodeKey] = newVal;
+                }
+                filter$.next({ filterExpressions, newVal });
+            }, undefined, false, { arrayType: _.includes(['in', 'notin'], obj.matchMode) }));
         }
     };
     const traverseFilterExpressions = expressions => {
@@ -42860,6 +42859,13 @@ const addForIdAttributes = (element) => {
             setAttr(labelEl[0], 'for', widgetId);
         }
     }
+    /*Adding aria-labelledby to radioset, checkboxset widgets*/
+    const ulEl = element.querySelectorAll('ul');
+    if (labelEl.length && ulEl.length && (ulEl[0].getAttribute('role') === 'radiogroup' || ulEl[0].getAttribute('role') === 'group')) {
+        const widgetId = 'wm-group-label-' + generateGUId();
+        setAttr(ulEl[0], 'aria-labelledby', widgetId);
+        setAttr(labelEl[0], 'id', widgetId);
+    }
 };
 /**
  * This method is used to adjust the container position
@@ -45515,7 +45521,7 @@ register('wm-panel', () => {
     return {
         pre: (attrs) => {
             const counter = idGen$j.nextUid();
-            return `<${tagName$1c} wmPanel #${counter}="wmPanel" partialContainer [attr.aria-label]="${counter}.hint || 'Panel'" wm-navigable-element="true" ${getAttrMarkup(attrs)}>`;
+            return `<${tagName$1c} wmPanel #${counter}="wmPanel" partialContainer wm-navigable-element="true" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$1c}>`
     };
@@ -46044,7 +46050,7 @@ const registerFormField = (isFormField) => {
             const widgetType = attrs.get('widget') || FormWidgetType.TEXT;
             const dataRole = isFormField ? 'form-field' : 'filter-field';
             const validationMsg = isFormField ? `<p *ngIf="${counter}._control?.invalid && ${counter}._control?.touched && ${pCounter}.isUpdateMode"
-                                   class="help-block text-danger" aria-hidden="false" [attr.aria-label]="${counter}.validationmessage" role="alert"
+                                   class="help-block text-danger" aria-hidden="false" role="alert"
                                    aria-live="assertive" [textContent]="${counter}.validationmessage"></p>` : '';
             const eventsTmpl = widgetType === FormWidgetType.UPLOAD ? '' : getEventsTemplate(attrs);
             const controlLayout = isMobileApp() ? 'col-xs-12' : 'col-sm-12';
@@ -46065,7 +46071,7 @@ const registerFormField = (isFormField) => {
                                         [ngStyle]="{width: ${pCounter}.captionsize}" [ngClass]="{'text-danger': ${counter}._control?.invalid && ${counter}._control?.touched && ${pCounter}.isUpdateMode,
                                          required: ${pCounter}.isUpdateMode && ${counter}.required}" [textContent]="${counter}.displayname"> </label>
                             <div [ngClass]="${counter}.displayname ? ${pCounter}._widgetClass : '${controlLayout}'">
-                                 <label class="form-control-static app-label"
+                                 <label class="form-control-static app-label" *ngIf="!(${pCounter}.isUpdateMode || ${counter}.viewmodewidget === 'default' || ${counter}.widgettype === 'upload')"
                                        [hidden]="${pCounter}.isUpdateMode || ${counter}.viewmodewidget === 'default' || ${counter}.widgettype === 'upload'" [innerHTML]="${getCaptionByWidget(attrs, widgetType, counter)}"></label>
                                 ${getTemplate(attrs, widgetType, eventsTmpl, counter, pCounter, isInList)}
                                 <span aria-hidden="true" *ngIf="${counter}.showPendingSpinner" class="form-field-spinner fa fa-circle-o-notch fa-spin form-control-feedback"></span>
@@ -46380,7 +46386,7 @@ var checkbox_build$1 = /*#__PURE__*/Object.freeze({
 const tagName$N = 'ul';
 register('wm-checkboxset', () => {
     return {
-        pre: attrs => `<${tagName$N} wmCheckboxset ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
+        pre: attrs => `<${tagName$N} role="group" wmCheckboxset ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
         post: () => `</${tagName$N}>`
     };
 });
@@ -46422,7 +46428,7 @@ var number_build$1 = /*#__PURE__*/Object.freeze({
 const tagName$K = 'ul';
 register('wm-radioset', () => {
     return {
-        pre: attrs => `<${tagName$K} wmRadioset ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
+        pre: attrs => `<${tagName$K} role="radiogroup" wmRadioset ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
         post: () => `</${tagName$K}>`
     };
 });
@@ -46865,7 +46871,7 @@ register('wm-popover', () => {
             }
             let markup = `<${tagName$q} wmPopover ${getAttrMarkup(attrs)}>`;
             const contextAttrs = table ? `let-row="row"` : ``;
-            markup += `<ng-template ${contextAttrs}><button aria-label="popover start" class="popover-start"></button>`;
+            markup += `<ng-template ${contextAttrs}><button class="popover-start"></button>`;
             // todo keyboard navigation - tab
             if (popoverTemplate) {
                 markup += `${popoverTemplate ? popoverTemplate : ''}`;
@@ -46877,7 +46883,7 @@ register('wm-popover', () => {
             if (shared.get('hasPopoverContent')) {
                 markup += `</div>`;
             }
-            return `${markup}<button aria-label="popover end" class="popover-end"></button></ng-template></${tagName$q}>`;
+            return `${markup}<button class="popover-end"></button></ng-template></${tagName$q}>`;
         }
     };
 });
@@ -47065,7 +47071,7 @@ register('wm-left-panel', () => {
     return {
         pre: (attrs) => {
             const counter = idGen$4.nextUid();
-            return `<${tagName$i} wmLeftPanel #${counter}="wmLeftPanel" partialContainer data-role="page-left-panel" role="navigation" [attr.aria-label]="${counter}.hint || 'Left navigation panel'" wmSmoothscroll="${attrs.get('smoothscroll') || 'false'}" ${getAttrMarkup(attrs)}>`;
+            return `<${tagName$i} wmLeftPanel #${counter}="wmLeftPanel" partialContainer data-role="page-left-panel" [attr.aria-label]="${counter}.hint || 'Left navigation panel'" wmSmoothscroll="${attrs.get('smoothscroll') || 'false'}" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$i}>`
     };

angular-codegen/dependencies/transpilation-web.cjs.js

@@ -40714,7 +40714,7 @@ const getFormWidgetTemplate = (widgetType, innerTmpl, attrs, options = {}) => {
             tmpl = `<div wmCheckbox ${innerTmpl} ${attrs.get('required') === 'true' ? 'required=true' : ''}></div>`;
             break;
         case FormWidgetType.CHECKBOXSET:
-            tmpl = `<ul wmCheckboxset ${innerTmpl} ${attrs.get('required') === 'true' ? 'required=true' : ''}></ul>`;
+            tmpl = `<ul role="group" wmCheckboxset ${innerTmpl} ${attrs.get('required') === 'true' ? 'required=true' : ''}></ul>`;
             break;
         case FormWidgetType.CHIPS:
             tmpl = `<ul wmChips role="input" debouncetime="${attrs.get('debouncetime')}" ${innerTmpl}></ul>`;
@@ -40738,7 +40738,7 @@ const getFormWidgetTemplate = (widgetType, innerTmpl, attrs, options = {}) => {
             tmpl = `<wm-input ${innerTmpl} ${attrs.get('required') === 'true' ? 'required=true' : ''} type="password" aria-label="Enter password" ${updateOnTmpl}></wm-input>`;
             break;
         case FormWidgetType.RADIOSET:
-            tmpl = `<ul wmRadioset ${innerTmpl}></ul>`;
+            tmpl = `<ul role="radiogroup" wmRadioset ${innerTmpl}></ul>`;
             break;
         case FormWidgetType.RATING:
             tmpl = `<div wmRating ${innerTmpl}></div>`;
@@ -40760,10 +40760,10 @@ const getFormWidgetTemplate = (widgetType, innerTmpl, attrs, options = {}) => {
             break;
         case FormWidgetType.TEXT:
             const inputType = options.inputType || 'inputtype';
-            tmpl = `<wm-input ${innerTmpl}  ${attrs.get('required') === 'true' ? 'required=true' : ''} type="${attrs.get(inputType) || 'text'}" aria-describedby="Enter text" ${updateOnTmpl}></wm-input>`;
+            tmpl = `<wm-input ${innerTmpl}  ${attrs.get('required') === 'true' ? 'required=true' : ''} type="${attrs.get(inputType) || 'text'}" ${updateOnTmpl}></wm-input>`;
             break;
         case FormWidgetType.TEXTAREA:
-            tmpl = `<wm-textarea ${innerTmpl} ${attrs.get('required') === 'true' ? 'required=true' : ''} role="textbox" aria-describedby="Place your text" ${updateOnTmpl}></wm-textarea>`;
+            tmpl = `<wm-textarea ${innerTmpl} ${attrs.get('required') === 'true' ? 'required=true' : ''} role="textbox" ${updateOnTmpl}></wm-textarea>`;
             break;
         case FormWidgetType.TIME:
             tmpl = `<div wmTime ${attrs.get('required') === 'true' ? 'required=true' : ''} dataentrymode="${attrs.get('dataentrymode')}" ${innerTmpl}></div>`;
@@ -40792,7 +40792,7 @@ const getFormWidgetTemplate = (widgetType, innerTmpl, attrs, options = {}) => {
             }
             break;
         default:
-            tmpl = `<wm-input ${innerTmpl} ${attrs.get('required') === 'true' ? 'required=true' : ''} aria-describedby="Enter text" type="text" ${updateOnTmpl}></wm-input>`;
+            tmpl = `<wm-input ${innerTmpl} ${attrs.get('required') === 'true' ? 'required=true' : ''} type="text" ${updateOnTmpl}></wm-input>`;
             break;
     }
     return tmpl;
@@ -42716,42 +42716,41 @@ const validateDataSourceCtx = (ds, ctx) => {
  * @param name name of the variable
  * @param context scope of the variable
  */
-const processFilterExpBindNode = (context, filterExpressions, variable) => {
+const processFilterExpBindNode = (context, filterExpressions) => {
     const destroyFn = context.registerDestroyListener ? context.registerDestroyListener.bind(context) : _.noop;
     const filter$ = new Subject();
     const bindFilExpObj = (obj, targetNodeKey) => {
-        const listener = (newVal, oldVal) => {
-            if ((newVal === oldVal && _.isUndefined(newVal)) || (_.isUndefined(newVal) && !_.isUndefined(oldVal))) {
-                return;
-            }
-            // Skip cloning for blob column
-            if (!_.includes(['blob', 'file'], obj.type)) {
-                newVal = getClonedObject(newVal);
-            }
-            // backward compatibility: where we are allowing the user to bind complete object
-            if (obj.target === 'dataBinding') {
-                // remove the existing databinding element
-                filterExpressions.rules = [];
-                // now add all the returned values
-                _.forEach(newVal, function (value, target) {
-                    filterExpressions.rules.push({
-                        'target': target,
-                        'value': value,
-                        'matchMode': obj.matchMode || 'startignorecase',
-                        'required': false,
-                        'type': ''
-                    });
-                });
-            }
-            else {
-                // setting value to the root node
-                obj[targetNodeKey] = newVal;
-            }
-            filter$.next({ filterExpressions, newVal });
-        };
         if (stringStartsWith(obj[targetNodeKey], 'bind:')) {
             // [Todo-CSP]: needs a check, where is this used
-            destroyFn($watch(obj[targetNodeKey].replace('bind:', ''), context, {}, variable ? variable.invokeOnFiltertExpressionChange.bind(variable, obj, targetNodeKey) : listener, undefined, false, { arrayType: _.includes(['in', 'notin'], obj.matchMode) }));
+            destroyFn($watch(obj[targetNodeKey].replace('bind:', ''), context, {}, (newVal, oldVal) => {
+                if ((newVal === oldVal && _.isUndefined(newVal)) || (_.isUndefined(newVal) && !_.isUndefined(oldVal))) {
+                    return;
+                }
+                // Skip cloning for blob column
+                if (!_.includes(['blob', 'file'], obj.type)) {
+                    newVal = getClonedObject(newVal);
+                }
+                // backward compatibility: where we are allowing the user to bind complete object
+                if (obj.target === 'dataBinding') {
+                    // remove the existing databinding element
+                    filterExpressions.rules = [];
+                    // now add all the returned values
+                    _.forEach(newVal, function (value, target) {
+                        filterExpressions.rules.push({
+                            'target': target,
+                            'value': value,
+                            'matchMode': obj.matchMode || 'startignorecase',
+                            'required': false,
+                            'type': ''
+                        });
+                    });
+                }
+                else {
+                    // setting value to the root node
+                    obj[targetNodeKey] = newVal;
+                }
+                filter$.next({ filterExpressions, newVal });
+            }, undefined, false, { arrayType: _.includes(['in', 'notin'], obj.matchMode) }));
         }
     };
     const traverseFilterExpressions = expressions => {
@@ -42860,6 +42859,13 @@ const addForIdAttributes = (element) => {
             setAttr(labelEl[0], 'for', widgetId);
         }
     }
+    /*Adding aria-labelledby to radioset, checkboxset widgets*/
+    const ulEl = element.querySelectorAll('ul');
+    if (labelEl.length && ulEl.length && (ulEl[0].getAttribute('role') === 'radiogroup' || ulEl[0].getAttribute('role') === 'group')) {
+        const widgetId = 'wm-group-label-' + generateGUId();
+        setAttr(ulEl[0], 'aria-labelledby', widgetId);
+        setAttr(labelEl[0], 'id', widgetId);
+    }
 };
 /**
  * This method is used to adjust the container position
@@ -45515,7 +45521,7 @@ register('wm-panel', () => {
     return {
         pre: (attrs) => {
             const counter = idGen$j.nextUid();
-            return `<${tagName$1c} wmPanel #${counter}="wmPanel" partialContainer [attr.aria-label]="${counter}.hint || 'Panel'" wm-navigable-element="true" ${getAttrMarkup(attrs)}>`;
+            return `<${tagName$1c} wmPanel #${counter}="wmPanel" partialContainer wm-navigable-element="true" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$1c}>`
     };
@@ -46044,7 +46050,7 @@ const registerFormField = (isFormField) => {
             const widgetType = attrs.get('widget') || FormWidgetType.TEXT;
             const dataRole = isFormField ? 'form-field' : 'filter-field';
             const validationMsg = isFormField ? `<p *ngIf="${counter}._control?.invalid && ${counter}._control?.touched && ${pCounter}.isUpdateMode"
-                                   class="help-block text-danger" aria-hidden="false" [attr.aria-label]="${counter}.validationmessage" role="alert"
+                                   class="help-block text-danger" aria-hidden="false" role="alert"
                                    aria-live="assertive" [textContent]="${counter}.validationmessage"></p>` : '';
             const eventsTmpl = widgetType === FormWidgetType.UPLOAD ? '' : getEventsTemplate(attrs);
             const controlLayout = isMobileApp() ? 'col-xs-12' : 'col-sm-12';
@@ -46065,7 +46071,7 @@ const registerFormField = (isFormField) => {
                                         [ngStyle]="{width: ${pCounter}.captionsize}" [ngClass]="{'text-danger': ${counter}._control?.invalid && ${counter}._control?.touched && ${pCounter}.isUpdateMode,
                                          required: ${pCounter}.isUpdateMode && ${counter}.required}" [textContent]="${counter}.displayname"> </label>
                             <div [ngClass]="${counter}.displayname ? ${pCounter}._widgetClass : '${controlLayout}'">
-                                 <label class="form-control-static app-label"
+                                 <label class="form-control-static app-label" *ngIf="!(${pCounter}.isUpdateMode || ${counter}.viewmodewidget === 'default' || ${counter}.widgettype === 'upload')"
                                        [hidden]="${pCounter}.isUpdateMode || ${counter}.viewmodewidget === 'default' || ${counter}.widgettype === 'upload'" [innerHTML]="${getCaptionByWidget(attrs, widgetType, counter)}"></label>
                                 ${getTemplate(attrs, widgetType, eventsTmpl, counter, pCounter, isInList)}
                                 <span aria-hidden="true" *ngIf="${counter}.showPendingSpinner" class="form-field-spinner fa fa-circle-o-notch fa-spin form-control-feedback"></span>
@@ -46380,7 +46386,7 @@ var checkbox_build$1 = /*#__PURE__*/Object.freeze({
 const tagName$N = 'ul';
 register('wm-checkboxset', () => {
     return {
-        pre: attrs => `<${tagName$N} wmCheckboxset ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
+        pre: attrs => `<${tagName$N} role="group" wmCheckboxset ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
         post: () => `</${tagName$N}>`
     };
 });
@@ -46422,7 +46428,7 @@ var number_build$1 = /*#__PURE__*/Object.freeze({
 const tagName$K = 'ul';
 register('wm-radioset', () => {
     return {
-        pre: attrs => `<${tagName$K} wmRadioset ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
+        pre: attrs => `<${tagName$K} role="radiogroup" wmRadioset ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
         post: () => `</${tagName$K}>`
     };
 });
@@ -46865,7 +46871,7 @@ register('wm-popover', () => {
             }
             let markup = `<${tagName$q} wmPopover ${getAttrMarkup(attrs)}>`;
             const contextAttrs = table ? `let-row="row"` : ``;
-            markup += `<ng-template ${contextAttrs}><button aria-label="popover start" class="popover-start"></button>`;
+            markup += `<ng-template ${contextAttrs}><button class="popover-start"></button>`;
             // todo keyboard navigation - tab
             if (popoverTemplate) {
                 markup += `${popoverTemplate ? popoverTemplate : ''}`;
@@ -46877,7 +46883,7 @@ register('wm-popover', () => {
             if (shared.get('hasPopoverContent')) {
                 markup += `</div>`;
             }
-            return `${markup}<button aria-label="popover end" class="popover-end"></button></ng-template></${tagName$q}>`;
+            return `${markup}<button class="popover-end"></button></ng-template></${tagName$q}>`;
         }
     };
 });
@@ -47065,7 +47071,7 @@ register('wm-left-panel', () => {
     return {
         pre: (attrs) => {
             const counter = idGen$4.nextUid();
-            return `<${tagName$i} wmLeftPanel #${counter}="wmLeftPanel" partialContainer data-role="page-left-panel" role="navigation" [attr.aria-label]="${counter}.hint || 'Left navigation panel'" wmSmoothscroll="${attrs.get('smoothscroll') || 'false'}" ${getAttrMarkup(attrs)}>`;
+            return `<${tagName$i} wmLeftPanel #${counter}="wmLeftPanel" partialContainer data-role="page-left-panel" [attr.aria-label]="${counter}.hint || 'Left navigation panel'" wmSmoothscroll="${attrs.get('smoothscroll') || 'false'}" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$i}>`
     };

angular-codegen/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wavemaker/angular-codegen",
-    "version": "11.2.0-next.141451",
+    "version": "11.2.0-next.141561",
     "description": "",
     "main": "index.js",
     "scripts": {