@wavemaker/angular-codegen 11.3.0-next.24702 → 11.3.0-next.25002

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

@@ -46782,6 +46782,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;
@@ -42860,6 +42860,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 +45522,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}>`
     };
@@ -46043,12 +46050,14 @@ const registerFormField = (isFormField) => {
             const pCounter = (parent && parent.get('form_reference')) || 'form';
             const widgetType = attrs.get('widget') || FormWidgetType.TEXT;
             const dataRole = isFormField ? 'form-field' : 'filter-field';
+            const formFieldErrorMsgId = 'wmform-field-error-' + generateGUId();
             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"
-                                   aria-live="assertive" [textContent]="${counter}.validationmessage"></p>` : '';
+                                   class="help-block text-danger" aria-hidden="false" role="alert"
+                                   aria-live="assertive" [attr.aria-label]="${counter}.validationmessage" id="${formFieldErrorMsgId}"><span aria-hidden="true" [textContent]="${counter}.validationmessage"></span></p>` : '';
             const eventsTmpl = widgetType === FormWidgetType.UPLOAD ? '' : getEventsTemplate(attrs);
             const controlLayout = isMobileApp() ? 'col-xs-12' : 'col-sm-12';
             const isInList = pCounter === (parentList && parentList.get('parent_form_reference'));
+            attrs.set('__errormsg', formFieldErrorMsgId);
             attrs.set('__widgetType', widgetType);
             attrs.delete('widget');
             shared.set('counter', counter);
@@ -46065,7 +46074,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 +46389,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 +46431,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}>`
     };
 });
@@ -46947,7 +46956,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}>`
     };
@@ -47065,7 +47074,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}>`
     };
@@ -47599,12 +47608,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

@@ -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;
@@ -42860,6 +42860,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 +45522,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}>`
     };
@@ -46043,12 +46050,14 @@ const registerFormField = (isFormField) => {
             const pCounter = (parent && parent.get('form_reference')) || 'form';
             const widgetType = attrs.get('widget') || FormWidgetType.TEXT;
             const dataRole = isFormField ? 'form-field' : 'filter-field';
+            const formFieldErrorMsgId = 'wmform-field-error-' + generateGUId();
             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"
-                                   aria-live="assertive" [textContent]="${counter}.validationmessage"></p>` : '';
+                                   class="help-block text-danger" aria-hidden="false" role="alert"
+                                   aria-live="assertive" [attr.aria-label]="${counter}.validationmessage" id="${formFieldErrorMsgId}"><span aria-hidden="true" [textContent]="${counter}.validationmessage"></span></p>` : '';
             const eventsTmpl = widgetType === FormWidgetType.UPLOAD ? '' : getEventsTemplate(attrs);
             const controlLayout = isMobileApp() ? 'col-xs-12' : 'col-sm-12';
             const isInList = pCounter === (parentList && parentList.get('parent_form_reference'));
+            attrs.set('__errormsg', formFieldErrorMsgId);
             attrs.set('__widgetType', widgetType);
             attrs.delete('widget');
             shared.set('counter', counter);
@@ -46065,7 +46074,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 +46389,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 +46431,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}>`
     };
 });
@@ -46947,7 +46956,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}>`
     };
@@ -47065,7 +47074,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}>`
     };
@@ -47599,12 +47608,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.24702",
+    "version": "11.3.0-next.25002",
     "description": "",
     "main": "index.js",
     "scripts": {