@wavemaker/angular-codegen 11.3.0-next.24524 → 11.3.0-next.24525

angular-codegen/angular-app/tsconfig.json

@@ -37,6 +37,9 @@
             "@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,41 +46638,42 @@ const validateDataSourceCtx = (ds, ctx) => {
  * @param name name of the variable
  * @param context scope of the variable
  */
-const processFilterExpBindNode = (context, filterExpressions) => {
+const processFilterExpBindNode = (context, filterExpressions, variable) => {
     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, {}, (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) }));
+            destroyFn($watch(obj[targetNodeKey].replace('bind:', ''), context, {}, variable ? variable.invokeOnFiltertExpressionChange.bind(variable, obj, targetNodeKey) : listener, undefined, false, { arrayType: _.includes(['in', 'notin'], obj.matchMode) }));
         }
     };
     const traverseFilterExpressions = expressions => {

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

@@ -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,41 +42716,42 @@ const validateDataSourceCtx = (ds, ctx) => {
  * @param name name of the variable
  * @param context scope of the variable
  */
-const processFilterExpBindNode = (context, filterExpressions) => {
+const processFilterExpBindNode = (context, filterExpressions, variable) => {
     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, {}, (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) }));
+            destroyFn($watch(obj[targetNodeKey].replace('bind:', ''), context, {}, variable ? variable.invokeOnFiltertExpressionChange.bind(variable, obj, targetNodeKey) : listener, undefined, false, { arrayType: _.includes(['in', 'notin'], obj.matchMode) }));
         }
     };
     const traverseFilterExpressions = expressions => {
@@ -44976,14 +44977,14 @@ const scopeComponentStyles = (componentName, componentType, styles = '') => {
 
 const carouselTagName = 'carousel';
 const dataSetKey$5 = 'dataset';
-const idGen$q = new IDGenerator('wm_carousel_ref_');
+const idGen$s = new IDGenerator('wm_carousel_ref_');
 const isDynamicCarousel = node => node.attrs.find(attr => attr.name === 'type' && attr.value === 'dynamic');
 const ɵ0$d$1 = isDynamicCarousel;
 register('wm-carousel', () => {
     return {
         pre: (attrs, shared) => {
             // generating unique Id for the carousel
-            const counter = idGen$q.nextUid();
+            const counter = idGen$s.nextUid();
             shared.set('carousel_ref', counter);
             return `<div class="app-carousel carousel"><${carouselTagName} wmCarousel #${counter}="wmCarousel"  ${getAttrMarkup(attrs)} interval="0" [ngClass]="${counter}.navigationClass">`;
         },
@@ -45084,12 +45085,12 @@ var marquee_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1A = 'a';
-const idGen$p = new IDGenerator('wm_anchor');
+const idGen$r = new IDGenerator('wm_anchor');
 register('wm-anchor', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$p.nextUid();
-            return `<${tagName$1A} wmAnchor #${counter}="wmAnchor" role="link" data-identifier="anchor" [attr.aria-label]="${counter}.hint || ${counter}.caption || 'Link'" ${getAttrMarkup(attrs)}>`;
+            const counter = idGen$r.nextUid();
+            return `<${tagName$1A} wmAnchor #${counter}="wmAnchor" role="link" data-identifier="anchor" [attr.aria-label]="${counter}.hint || ${counter}.caption" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$1A}>`
     };
@@ -45116,11 +45117,11 @@ var audio_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1y = 'div';
-const idGen$o = new IDGenerator('wm_html');
+const idGen$q = new IDGenerator('wm_html');
 register('wm-html', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$o.nextUid();
+            const counter = idGen$q.nextUid();
             return `<${tagName$1y} wmHtml #${counter}="wmHtml" [attr.aria-label]="${counter}.hint || 'HTML content'" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$1y}>`
@@ -45162,10 +45163,12 @@ var iframe_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1v = 'label';
+const idGen$p = new IDGenerator('wm_label');
 register('wm-label', () => {
     return {
         pre: (attrs) => {
-            return `<${tagName$1v} wmLabel ${getAttrMarkup(attrs)}>`;
+            const counter = idGen$p.nextUid();
+            return `<${tagName$1v} wmLabel #${counter}="wmLabel" [attr.aria-label]="${counter}.hint" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$1v}>`
     };
@@ -45178,11 +45181,11 @@ var label_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1u = 'img';
-const idGen$n = new IDGenerator('wm_picture');
+const idGen$o = new IDGenerator('wm_picture');
 register('wm-picture', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$n.nextUid();
+            const counter = idGen$o.nextUid();
             return `<${tagName$1u} wmPicture #${counter}="wmPicture" alt="image" wmImageCache="${attrs.get('offline') || 'true'}" [attr.aria-label]="${counter}.hint || 'Image'" ${getAttrMarkup(attrs)}>`;
         }
     };
@@ -45195,11 +45198,11 @@ var picture_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1t = 'div';
-const idGen$m = new IDGenerator('wm_spinner');
+const idGen$n = new IDGenerator('wm_spinner');
 register('wm-spinner', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$m.nextUid();
+            const counter = idGen$n.nextUid();
             return `<${tagName$1t} wmSpinner #${counter}="wmSpinner" role="alert" [attr.aria-label]="${counter}.hint || 'Loading...'" aria-live="assertive" aria-busy="true" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$1t}>`
@@ -45272,11 +45275,11 @@ var progressCircle_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1q = 'div';
-const idGen$l = new IDGenerator('wm_richtexteditor');
+const idGen$m = new IDGenerator('wm_richtexteditor');
 register('wm-richtexteditor', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$l.nextUid();
+            const counter = idGen$m.nextUid();
             return `<${tagName$1q} wmRichTextEditor #${counter}="wmRichTextEditor" role="textbox" [attr.aria-label]="${counter}.hint || 'Richtext editor'" ${getFormMarkupAttr(attrs)}>`;
         },
         post: () => `</${tagName$1q}>`
@@ -45389,14 +45392,14 @@ var chart_build$1 = /*#__PURE__*/Object.freeze({
 
 const tagName$1i = 'div';
 const dataSetKey$4 = 'dataset';
-const idGen$k = new IDGenerator('wm_accordion_ref_');
+const idGen$l = new IDGenerator('wm_accordion_ref_');
 const isDynamicAccordion = node => node.attrs.find(attr => attr.name === 'type' && attr.value === 'dynamic');
 const ɵ0$b$1 = isDynamicAccordion;
 register('wm-accordion', () => {
     return {
         pre: (attrs, shared) => {
             // generating unique Id for the accordion
-            const counter = idGen$k.nextUid();
+            const counter = idGen$l.nextUid();
             shared.set('accordion_ref', counter);
             return `<${tagName$1i} wmAccordion #${counter}="wmAccordion" role="tablist" aria-multiselectable="true" ${getAttrMarkup(attrs)}>`;
         },
@@ -45433,9 +45436,13 @@ var accordion_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1h = 'div';
+const idGen$k = new IDGenerator('wm_accordionpane');
 register('wm-accordionpane', () => {
     return {
-        pre: attrs => `<${tagName$1h} wmAccordionPane partialContainer wm-navigable-element="true" role="tab" ${getAttrMarkup(attrs)}>`,
+        pre: (attrs) => {
+            const counter = idGen$k.nextUid();
+            return `<${tagName$1h} #${counter}="wmAccordionPane" [attr.aria-expanded]="${counter}.isActive" wmAccordionPane partialContainer wm-navigable-element="true" role="tab" ${getAttrMarkup(attrs)}>`;
+        },
         post: () => `</${tagName$1h}>`
     };
 });
@@ -46037,7 +46044,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';
@@ -46344,7 +46351,7 @@ register('wm-button', () => {
     return {
         pre: (attrs) => {
             const counter = idGen$c.nextUid();
-            return `<${tagName$P} wmButton #${counter}="wmButton" [attr.aria-label]="${counter}.hint || ${counter}.caption || 'Button'" ${getAttrMarkup(attrs)}>`;
+            return `<${tagName$P} wmButton #${counter}="wmButton" [attr.aria-label]="${counter}.hint || ${counter}.caption" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$P}>`
     };
@@ -46940,7 +46947,7 @@ register('wm-page', () => {
         },
         pre: (attrs) => {
             const counter = idGen$8.nextUid();
-            return `<${tagName$p} wmPage #${counter}="wmPage" data-role="pageContainer" [attr.aria-label]="${counter}.hint || 'Main page content'" ${getAttrMarkup(attrs)}>`;
+            return `<${tagName$p} wmPage #${counter}="wmPage" data-role="pageContainer" [attr.aria-label]="${counter}.hint" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$p}>`
     };
@@ -47592,12 +47599,13 @@ const tagName$5 = 'div';
 const getRowExpansionActionTmpl = (attrs) => {
     const tag = attrs.get('widget-type') === 'anchor' ? 'a' : 'button';
     const directive = attrs.get('widget-type') === 'anchor' ? 'wmAnchor' : 'wmButton';
+    const title = attrs.get('display-name') || attrs.get('title') || 'Collapse/Expand';
     return `<ng-template #rowExpansionActionTmpl let-row="row">
                <${tag} ${directive}
                     ${getRowActionAttrs(attrs)}
                     class="${attrs.get('class')} row-expansion-button"
                     iconclass="${attrs.get('collapseicon')}"
-                    type="button"></${tag}>
+                    type="button" aria-label="${title}"></${tag}>
             </ng-template>`;
 };
 const ɵ0$1$2 = getRowExpansionActionTmpl;

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

@@ -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,41 +42716,42 @@ const validateDataSourceCtx = (ds, ctx) => {
  * @param name name of the variable
  * @param context scope of the variable
  */
-const processFilterExpBindNode = (context, filterExpressions) => {
+const processFilterExpBindNode = (context, filterExpressions, variable) => {
     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, {}, (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) }));
+            destroyFn($watch(obj[targetNodeKey].replace('bind:', ''), context, {}, variable ? variable.invokeOnFiltertExpressionChange.bind(variable, obj, targetNodeKey) : listener, undefined, false, { arrayType: _.includes(['in', 'notin'], obj.matchMode) }));
         }
     };
     const traverseFilterExpressions = expressions => {
@@ -44976,14 +44977,14 @@ const scopeComponentStyles = (componentName, componentType, styles = '') => {
 
 const carouselTagName = 'carousel';
 const dataSetKey$5 = 'dataset';
-const idGen$q = new IDGenerator('wm_carousel_ref_');
+const idGen$s = new IDGenerator('wm_carousel_ref_');
 const isDynamicCarousel = node => node.attrs.find(attr => attr.name === 'type' && attr.value === 'dynamic');
 const ɵ0$d$1 = isDynamicCarousel;
 register('wm-carousel', () => {
     return {
         pre: (attrs, shared) => {
             // generating unique Id for the carousel
-            const counter = idGen$q.nextUid();
+            const counter = idGen$s.nextUid();
             shared.set('carousel_ref', counter);
             return `<div class="app-carousel carousel"><${carouselTagName} wmCarousel #${counter}="wmCarousel"  ${getAttrMarkup(attrs)} interval="0" [ngClass]="${counter}.navigationClass">`;
         },
@@ -45084,12 +45085,12 @@ var marquee_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1A = 'a';
-const idGen$p = new IDGenerator('wm_anchor');
+const idGen$r = new IDGenerator('wm_anchor');
 register('wm-anchor', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$p.nextUid();
-            return `<${tagName$1A} wmAnchor #${counter}="wmAnchor" role="link" data-identifier="anchor" [attr.aria-label]="${counter}.hint || ${counter}.caption || 'Link'" ${getAttrMarkup(attrs)}>`;
+            const counter = idGen$r.nextUid();
+            return `<${tagName$1A} wmAnchor #${counter}="wmAnchor" role="link" data-identifier="anchor" [attr.aria-label]="${counter}.hint || ${counter}.caption" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$1A}>`
     };
@@ -45116,11 +45117,11 @@ var audio_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1y = 'div';
-const idGen$o = new IDGenerator('wm_html');
+const idGen$q = new IDGenerator('wm_html');
 register('wm-html', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$o.nextUid();
+            const counter = idGen$q.nextUid();
             return `<${tagName$1y} wmHtml #${counter}="wmHtml" [attr.aria-label]="${counter}.hint || 'HTML content'" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$1y}>`
@@ -45162,10 +45163,12 @@ var iframe_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1v = 'label';
+const idGen$p = new IDGenerator('wm_label');
 register('wm-label', () => {
     return {
         pre: (attrs) => {
-            return `<${tagName$1v} wmLabel ${getAttrMarkup(attrs)}>`;
+            const counter = idGen$p.nextUid();
+            return `<${tagName$1v} wmLabel #${counter}="wmLabel" [attr.aria-label]="${counter}.hint" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$1v}>`
     };
@@ -45178,11 +45181,11 @@ var label_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1u = 'img';
-const idGen$n = new IDGenerator('wm_picture');
+const idGen$o = new IDGenerator('wm_picture');
 register('wm-picture', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$n.nextUid();
+            const counter = idGen$o.nextUid();
             return `<${tagName$1u} wmPicture #${counter}="wmPicture" alt="image" wmImageCache="${attrs.get('offline') || 'true'}" [attr.aria-label]="${counter}.hint || 'Image'" ${getAttrMarkup(attrs)}>`;
         }
     };
@@ -45195,11 +45198,11 @@ var picture_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1t = 'div';
-const idGen$m = new IDGenerator('wm_spinner');
+const idGen$n = new IDGenerator('wm_spinner');
 register('wm-spinner', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$m.nextUid();
+            const counter = idGen$n.nextUid();
             return `<${tagName$1t} wmSpinner #${counter}="wmSpinner" role="alert" [attr.aria-label]="${counter}.hint || 'Loading...'" aria-live="assertive" aria-busy="true" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$1t}>`
@@ -45272,11 +45275,11 @@ var progressCircle_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1q = 'div';
-const idGen$l = new IDGenerator('wm_richtexteditor');
+const idGen$m = new IDGenerator('wm_richtexteditor');
 register('wm-richtexteditor', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$l.nextUid();
+            const counter = idGen$m.nextUid();
             return `<${tagName$1q} wmRichTextEditor #${counter}="wmRichTextEditor" role="textbox" [attr.aria-label]="${counter}.hint || 'Richtext editor'" ${getFormMarkupAttr(attrs)}>`;
         },
         post: () => `</${tagName$1q}>`
@@ -45389,14 +45392,14 @@ var chart_build$1 = /*#__PURE__*/Object.freeze({
 
 const tagName$1i = 'div';
 const dataSetKey$4 = 'dataset';
-const idGen$k = new IDGenerator('wm_accordion_ref_');
+const idGen$l = new IDGenerator('wm_accordion_ref_');
 const isDynamicAccordion = node => node.attrs.find(attr => attr.name === 'type' && attr.value === 'dynamic');
 const ɵ0$b$1 = isDynamicAccordion;
 register('wm-accordion', () => {
     return {
         pre: (attrs, shared) => {
             // generating unique Id for the accordion
-            const counter = idGen$k.nextUid();
+            const counter = idGen$l.nextUid();
             shared.set('accordion_ref', counter);
             return `<${tagName$1i} wmAccordion #${counter}="wmAccordion" role="tablist" aria-multiselectable="true" ${getAttrMarkup(attrs)}>`;
         },
@@ -45433,9 +45436,13 @@ var accordion_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1h = 'div';
+const idGen$k = new IDGenerator('wm_accordionpane');
 register('wm-accordionpane', () => {
     return {
-        pre: attrs => `<${tagName$1h} wmAccordionPane partialContainer wm-navigable-element="true" role="tab" ${getAttrMarkup(attrs)}>`,
+        pre: (attrs) => {
+            const counter = idGen$k.nextUid();
+            return `<${tagName$1h} #${counter}="wmAccordionPane" [attr.aria-expanded]="${counter}.isActive" wmAccordionPane partialContainer wm-navigable-element="true" role="tab" ${getAttrMarkup(attrs)}>`;
+        },
         post: () => `</${tagName$1h}>`
     };
 });
@@ -46037,7 +46044,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';
@@ -46344,7 +46351,7 @@ register('wm-button', () => {
     return {
         pre: (attrs) => {
             const counter = idGen$c.nextUid();
-            return `<${tagName$P} wmButton #${counter}="wmButton" [attr.aria-label]="${counter}.hint || ${counter}.caption || 'Button'" ${getAttrMarkup(attrs)}>`;
+            return `<${tagName$P} wmButton #${counter}="wmButton" [attr.aria-label]="${counter}.hint || ${counter}.caption" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$P}>`
     };
@@ -46940,7 +46947,7 @@ register('wm-page', () => {
         },
         pre: (attrs) => {
             const counter = idGen$8.nextUid();
-            return `<${tagName$p} wmPage #${counter}="wmPage" data-role="pageContainer" [attr.aria-label]="${counter}.hint || 'Main page content'" ${getAttrMarkup(attrs)}>`;
+            return `<${tagName$p} wmPage #${counter}="wmPage" data-role="pageContainer" [attr.aria-label]="${counter}.hint" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$p}>`
     };
@@ -47592,12 +47599,13 @@ const tagName$5 = 'div';
 const getRowExpansionActionTmpl = (attrs) => {
     const tag = attrs.get('widget-type') === 'anchor' ? 'a' : 'button';
     const directive = attrs.get('widget-type') === 'anchor' ? 'wmAnchor' : 'wmButton';
+    const title = attrs.get('display-name') || attrs.get('title') || 'Collapse/Expand';
     return `<ng-template #rowExpansionActionTmpl let-row="row">
                <${tag} ${directive}
                     ${getRowActionAttrs(attrs)}
                     class="${attrs.get('class')} row-expansion-button"
                     iconclass="${attrs.get('collapseicon')}"
-                    type="button"></${tag}>
+                    type="button" aria-label="${title}"></${tag}>
             </ng-template>`;
 };
 const ɵ0$1$2 = getRowExpansionActionTmpl;

angular-codegen/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wavemaker/angular-codegen",
-    "version": "11.3.0-next.24524",
+    "version": "11.3.0-next.24525",
     "description": "",
     "main": "index.js",
     "scripts": {