@wavemaker/app-ng-runtime 12.0.0-next.45752 → 12.0.0-next.46502

app-ng-runtime/build-task/fesm2022/index.mjs

@@ -6,13 +6,13 @@ import { forEach } from 'lodash-es';
 
 const carouselTagName = 'carousel';
 const dataSetKey$5 = 'dataset';
-const idGen$s = new IDGenerator('wm_carousel_ref_');
+const idGen$t = new IDGenerator('wm_carousel_ref_');
 const isDynamicCarousel = node => node.attrs.find(attr => attr.name === 'type' && attr.value === 'dynamic');
 register('wm-carousel', () => {
     return {
         pre: (attrs, shared) => {
             // generating unique Id for the carousel
-            const counter = idGen$s.nextUid();
+            const counter = idGen$t.nextUid();
             shared.set('carousel_ref', counter);
             return `<div class="app-carousel carousel"><${carouselTagName} wmCarousel #${counter}="wmCarousel"  ${getAttrMarkup(attrs)} interval="0" [ngClass]="${counter}.navigationClass">`;
         },
@@ -114,12 +114,12 @@ var marquee_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1A = 'a';
-const idGen$r = new IDGenerator('wm_anchor');
+const idGen$s = new IDGenerator('wm_anchor');
 register('wm-anchor', () => {
     return {
         pre: (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)}>`;
+            const counter = idGen$s.nextUid();
+            return `<${tagName$1A} wmAnchor #${counter}="wmAnchor" role="link" data-identifier="anchor" [attr.aria-label]="${counter}.arialabel || (${counter}.badgevalue ? ${counter}.caption + ' ' + ${counter}.badgevalue : ${counter}.caption) || null" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$1A}>`
     };
@@ -146,12 +146,12 @@ var audio_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1y = 'div';
-const idGen$q = new IDGenerator('wm_html');
+const idGen$r = new IDGenerator('wm_html');
 register('wm-html', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$q.nextUid();
-            return `<${tagName$1y} wmHtml #${counter}="wmHtml" [attr.aria-label]="${counter}.hint || 'HTML content'" ${getAttrMarkup(attrs)}>`;
+            const counter = idGen$r.nextUid();
+            return `<${tagName$1y} wmHtml #${counter}="wmHtml" role="application" [attr.aria-label]="${counter}.arialabel || 'HTML content'" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$1y}>`
     };
@@ -166,7 +166,7 @@ var html_build$1 = /*#__PURE__*/Object.freeze({
 const tagName$1x = 'span';
 register('wm-icon', () => {
     return {
-        pre: attrs => `<${tagName$1x} wmIcon aria-hidden="true" ${getAttrMarkup(attrs)}>`,
+        pre: attrs => `<${tagName$1x} wmIcon ${getAttrMarkup(attrs)}>`,
         post: () => `</${tagName$1x}>`
     };
 });
@@ -192,7 +192,7 @@ var iframe_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 let tagName$1v = 'p';
-const idGen$p = new IDGenerator('wm_label');
+const idGen$q = new IDGenerator('wm_label');
 register('wm-label', () => {
     return {
         pre: (attrs) => {
@@ -206,8 +206,8 @@ register('wm-label', () => {
             else {
                 tagName$1v = 'label';
             }
-            const counter = idGen$p.nextUid();
-            return `<${tagName$1v} wmLabel #${counter}="wmLabel" [attr.aria-label]="${counter}.hint" ${getAttrMarkup(attrs)}>`;
+            const counter = idGen$q.nextUid();
+            return `<${tagName$1v} wmLabel #${counter}="wmLabel" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$1v}>`
     };
@@ -220,12 +220,12 @@ var label_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1u = 'img';
-const idGen$o = new IDGenerator('wm_picture');
+const idGen$p = new IDGenerator('wm_picture');
 register('wm-picture', () => {
     return {
         pre: (attrs) => {
-            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)}>`;
+            const counter = idGen$p.nextUid();
+            return `<${tagName$1u} wmPicture #${counter}="wmPicture" [alt]="${counter}.alttext" wmImageCache="${attrs.get('offline') || 'true'}" [attr.aria-label]="${counter}.arialabel || 'Image'" ${getAttrMarkup(attrs)}>`;
         }
     };
 });
@@ -237,12 +237,12 @@ var picture_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1t = 'div';
-const idGen$n = new IDGenerator('wm_spinner');
+const idGen$o = new IDGenerator('wm_spinner');
 register('wm-spinner', () => {
     return {
         pre: (attrs) => {
-            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)}>`;
+            const counter = idGen$o.nextUid();
+            return `<${tagName$1t} wmSpinner #${counter}="wmSpinner" role="alert" [attr.aria-label]="${counter}.arialabel || 'Loading...'" aria-live="assertive" aria-busy="true" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$1t}>`
     };
@@ -294,9 +294,13 @@ var progressBar_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1r = 'div';
+const idGen$n = new IDGenerator('wm_progress_circle');
 register('wm-progress-circle', () => {
     return {
-        pre: attrs => `<${tagName$1r} wmProgressCircle ${getAttrMarkup(attrs)}>`,
+        pre: (attrs) => {
+            const counter = idGen$n.nextUid();
+            return `<${tagName$1r} wmProgressCircle #${counter}="wmProgressCircle" role="progressbar" [attr.aria-label]="${counter}.arialabel || 'circle-progress'" [attr.hint]="${counter}.hint" [attr.aria-valuetext]="${counter}.displayValue" [attr.aria-valuemin]="${counter}.minvalue" [attr.aria-valuemax]="${counter}.maxvalue" ${getAttrMarkup(attrs)}>`;
+        },
         post: () => `</${tagName$1r}>`
     };
 });
@@ -313,7 +317,7 @@ register('wm-richtexteditor', () => {
     return {
         pre: (attrs) => {
             const counter = idGen$m.nextUid();
-            return `<${tagName$1q} wmRichTextEditor #${counter}="wmRichTextEditor" role="textbox" [attr.aria-label]="${counter}.hint || 'Richtext editor'" ${getFormMarkupAttr(attrs)}>`;
+            return `<${tagName$1q} wmRichTextEditor #${counter}="wmRichTextEditor" role="textbox" [attr.aria-label]="${counter}.arialabel || 'Richtext editor'" ${getFormMarkupAttr(attrs)}>`;
         },
         post: () => `</${tagName$1q}>`
     };
@@ -431,7 +435,7 @@ register('wm-accordion', () => {
             // generating unique Id for the accordion
             const counter = idGen$l.nextUid();
             shared.set('accordion_ref', counter);
-            return `<${tagName$1i} wmAccordion #${counter}="wmAccordion" role="tablist" aria-multiselectable="true" ${getAttrMarkup(attrs)}>`;
+            return `<${tagName$1i} wmAccordion #${counter}="wmAccordion" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$1i}>`,
         template: (node, shared) => {
@@ -470,7 +474,7 @@ register('wm-accordionpane', () => {
     return {
         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)}>`;
+            return `<${tagName$1h} #${counter}="wmAccordionPane" wmAccordionPane partialContainer wm-navigable-element="true" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$1h}>`
     };
@@ -678,7 +682,7 @@ var tabPane_build$1 = /*#__PURE__*/Object.freeze({
 const tagName$17 = 'div';
 register('wm-tile', () => {
     return {
-        pre: attrs => `<${tagName$17} wmTile aria-describedby="Tile" wm-navigable-element="true" ${getAttrMarkup(attrs)}>`,
+        pre: attrs => `<${tagName$17} wmTile wm-navigable-element="true" ${getAttrMarkup(attrs)}>`,
         post: () => `</${tagName$17}>`
     };
 });
@@ -692,7 +696,7 @@ var tile_build$1 = /*#__PURE__*/Object.freeze({
 const tagName$16 = 'div';
 register('wm-wizard', () => {
     return {
-        pre: attrs => `<${tagName$16} wmWizard role="tablist" ${getAttrMarkup(attrs)}>`,
+        pre: attrs => `<${tagName$16} wmWizard ${getAttrMarkup(attrs)}>`,
         post: () => `</${tagName$16}>`
     };
 });
@@ -728,7 +732,7 @@ register('wm-barcodescanner', () => {
     return {
         pre: (attrs) => {
             const counter = idGen$g.nextUid();
-            return `<${tagName$14} wmBarcodescanner #${counter}="wmBarcodescanner" [attr.aria-label]="${counter}.hint || 'Barcode scanner'"  ${getAttrMarkup(attrs)}>`;
+            return `<${tagName$14} wmBarcodescanner #${counter}="wmBarcodescanner" [attr.aria-label]="${counter}.arialabel || 'Barcode scanner'"  ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$14}>`
     };
@@ -746,7 +750,7 @@ register('wm-camera', () => {
     return {
         pre: (attrs) => {
             const counter = idGen$f.nextUid();
-            return `<${tagName$13} type='button' wmCamera #${counter}="wmCamera" [attr.aria-label]="${counter}.hint || 'Camera'"  ${getAttrMarkup(attrs)}>`;
+            return `<${tagName$13} type='button' wmCamera #${counter}="wmCamera" [attr.aria-label]="${counter}.arialabel || 'Camera'"  ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$13}>`
     };
@@ -761,7 +765,7 @@ var camera_build$1 = /*#__PURE__*/Object.freeze({
 const tagName$12 = 'div';
 register('wm-alertdialog', () => {
     return {
-        pre: attrs => `<${tagName$12} wmAlertDialog role="alertdialog" wm-navigable-element="true" ${getAttrMarkup(attrs)}>`,
+        pre: attrs => `<${tagName$12} wmAlertDialog wm-navigable-element="true" ${getAttrMarkup(attrs)}>`,
         post: () => `</${tagName$12}>`
     };
 });
@@ -1069,7 +1073,7 @@ const registerFormField = (isFormField) => {
             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"
+                                   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';
@@ -1091,8 +1095,8 @@ 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"
-                                       [hidden]="${pCounter}.isUpdateMode || ${counter}.viewmodewidget === 'default' || ${counter}.widgettype === 'upload'" [innerHTML]="${getCaptionByWidget(attrs, widgetType, counter)}"></label>
+                                 <span class="form-control-static app-label"
+                                       [hidden]="${pCounter}.isUpdateMode || ${counter}.viewmodewidget === 'default' || ${counter}.widgettype === 'upload'" [innerHTML]="${getCaptionByWidget(attrs, widgetType, counter)}"></span>
                                 ${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>
                                 <p *ngIf="!(${counter}._control?.invalid && ${counter}._control?.touched) && ${pCounter}.isUpdateMode"
@@ -1298,7 +1302,7 @@ register('wm-calendar', () => {
     return {
         pre: (attrs) => {
             let viewType = attrs.get('view') ? attrs.get('view') + ' view' : 'month view';
-            return `<${tagName$U} wmCalendar redrawable style="width:100%" aria-label="${viewType}" ${getAttrMarkup(attrs)}>`;
+            return `<${tagName$U} wmCalendar redrawable style="width:100%" role="region" aria-label="${viewType}" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$U}>`
     };
@@ -1313,7 +1317,7 @@ var calendar_build$1 = /*#__PURE__*/Object.freeze({
 const tagName$T = 'ul';
 register('wm-chips', () => {
     return {
-        pre: attrs => `<${tagName$T} wmChips role="listbox" ${getAttrMarkup(attrs)} ${getNgModelAttr(attrs)}>`,
+        pre: attrs => `<${tagName$T} wmChips ${getAttrMarkup(attrs)} ${getNgModelAttr(attrs)}>`,
         post: () => `</${tagName$T}>`
     };
 });
@@ -1327,7 +1331,7 @@ var chips_build$1 = /*#__PURE__*/Object.freeze({
 const tagName$S = 'div';
 register('wm-colorpicker', () => {
     return {
-        pre: attrs => `<${tagName$S} wmColorPicker ${getAttrMarkup(attrs)} role="input" ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
+        pre: attrs => `<${tagName$S} wmColorPicker ${getAttrMarkup(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
         post: () => `</${tagName$S}>`
     };
 });
@@ -1341,7 +1345,7 @@ var colorPicker_build$1 = /*#__PURE__*/Object.freeze({
 const tagName$R = 'div';
 register('wm-currency', () => {
     return {
-        pre: attrs => `<${tagName$R} wmCurrency ${getAttrMarkup(attrs)} role="input" ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
+        pre: attrs => `<${tagName$R} wmCurrency ${getAttrMarkup(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
         post: () => `</${tagName$R}>`
     };
 });
@@ -1355,7 +1359,7 @@ var currency_build$1 = /*#__PURE__*/Object.freeze({
 const tagName$Q = 'div';
 register('wm-buttongroup', () => {
     return {
-        pre: attrs => `<${tagName$Q} wmButtonGroup role="group" aria-labelledby="button group" ${getAttrMarkup(attrs)}>`,
+        pre: attrs => `<${tagName$Q} wmButtonGroup role="group" ${getAttrMarkup(attrs)}>`,
         post: () => `</${tagName$Q}>`
     };
 });
@@ -1372,7 +1376,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 || null" ${getAttrMarkup(attrs)}>`;
+            return `<${tagName$P} wmButton #${counter}="wmButton" [attr.aria-label]="${counter}.arialabel || (${counter}.badgevalue ? ${counter}.caption + ' ' + ${counter}.badgevalue : ${counter}.caption) || null" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$P}>`
     };
@@ -1474,7 +1478,7 @@ register('wm-switch', () => {
     return {
         pre: (attrs) => {
             const counter = idGen$b.nextUid();
-            return `<${tagName$I} wmSwitch #${counter}="wmSwitch" [attr.aria-label]="${counter}.hint || 'Switch button'" ${getFormMarkupAttr(attrs)} ${getNgModelAttr(attrs)}>`;
+            return `<${tagName$I} wmSwitch #${counter}="wmSwitch" role="group" [attr.aria-label]="${counter}.arialabel || 'Switch choose options'" ${getFormMarkupAttr(attrs)} ${getNgModelAttr(attrs)}>`;
         },
         post: () => `</${tagName$I}>`
     };
@@ -1564,7 +1568,11 @@ register('wm-fileupload', () => {
                 const onSelectBinding = getDataSource(attrs.get('select.event'));
                 attrs.set('datasource.bind', onSelectBinding);
             }
-            return `<${tagName$C} wmFileUpload ${getAttrMarkup(attrs)} role="input">`;
+            if (attrs.get('delete.event')) {
+                const onDeleteBinding = getDataSource(attrs.get('delete.event'));
+                attrs.set('deletedatasource.bind', onDeleteBinding);
+            }
+            return `<${tagName$C} wmFileUpload ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$C}>`
     };
@@ -1981,7 +1989,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" ${getAttrMarkup(attrs)}>`;
+            return `<${tagName$p} wmPage #${counter}="wmPage" data-role="pageContainer" [attr.aria-label]="${counter}.arialabel" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$p}>`
     };
@@ -1999,7 +2007,7 @@ register('wm-layout', () => {
     return {
         pre: (attrs) => {
             const counter = idGen$7.nextUid();
-            return `<${tagName$o} wmLayout #${counter}="wmLayout" data-role="pageContainer" [attr.aria-label]="${counter}.hint || 'Main page content'" ${getAttrMarkup(attrs)}>`;
+            return `<${tagName$o} wmLayout #${counter}="wmLayout" data-role="pageContainer" [attr.aria-label]="${counter}.arialabel" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$o}>`
     };
@@ -2059,7 +2067,7 @@ register('wm-footer', () => {
     return {
         pre: (attrs) => {
             const counter = idGen$6.nextUid();
-            return `<${tagName$k} wmFooter #${counter}="wmFooter" partialContainer data-role="page-footer" role="contentinfo" [attr.aria-label]="${counter}.hint || 'Page footer'" ${getAttrMarkup(attrs)}>`;
+            return `<${tagName$k} wmFooter #${counter}="wmFooter" partialContainer data-role="page-footer" role="contentinfo" [attr.aria-label]="${counter}.arialabel || 'Page footer'" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$k}>`
     };
@@ -2077,7 +2085,7 @@ register('wm-header', () => {
     return {
         pre: (attrs) => {
             const counter = idGen$5.nextUid();
-            return `<${tagName$j} wmHeader #${counter}="wmHeader" partialContainer data-role="page-header" role="banner" [attr.aria-label]="${counter}.hint || 'Page header'" ${getAttrMarkup(attrs)}>`;
+            return `<${tagName$j} wmHeader #${counter}="wmHeader" partialContainer data-role="page-header" role="banner" [attr.aria-label]="${counter}.arialabel || 'Page header'" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$j}>`
     };
@@ -2095,7 +2103,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" [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}.arialabel || 'Left navigation panel'" wmSmoothscroll="${attrs.get('smoothscroll') || 'false'}" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$i}>`
     };
@@ -2127,7 +2135,7 @@ register('wm-right-panel', () => {
     return {
         pre: (attrs) => {
             const counter = idGen$3.nextUid();
-            return `<${tagName$g} wmRightPanel #${counter}="wmRightPanel" partialContainer data-role="page-right-panel" role="complementary" [attr.aria-label]="${counter}.hint || 'Right navigation panel'" ${getAttrMarkup(attrs)}>`;
+            return `<${tagName$g} wmRightPanel #${counter}="wmRightPanel" partialContainer data-role="page-right-panel" role="complementary" [attr.aria-label]="${counter}.arialabel || 'Right navigation panel'" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$g}>`
     };
@@ -2193,7 +2201,7 @@ register('wm-top-nav', () => {
     return {
         pre: (attrs) => {
             const counter = idGen$2.nextUid();
-            return `<${tagName$d} wmTopNav #${counter}="wmTopNav" partialContainer data-role="page-topnav" role="navigation" [attr.aria-label]="${counter}.hint || 'Second level navigation'" ${getAttrMarkup(attrs)}>`;
+            return `<${tagName$d} wmTopNav #${counter}="wmTopNav" partialContainer data-role="page-topnav" role="navigation" [attr.aria-label]="${counter}.arialabel || 'Second level navigation'" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$d}>`
     };