@wavemaker/app-ng-runtime 12.0.0-next.141131 → 12.0.0-next.141138

app-ng-runtime/build-task/bundles/index.umd.js

@@ -80,11 +80,11 @@
         default: carouselTemplate_build
     });
 
-    const tagName$1E = 'div';
+    const tagName$1C = 'div';
     transpiler.register('wm-login', () => {
         return {
-            pre: attrs => `<${tagName$1E} wmLogin ${transpiler.getAttrMarkup(attrs)} eventsource.bind="Actions.loginAction">`,
-            post: () => `</${tagName$1E}>`,
+            pre: attrs => `<${tagName$1C} wmLogin ${transpiler.getAttrMarkup(attrs)} eventsource.bind="Actions.loginAction">`,
+            post: () => `</${tagName$1C}>`,
             provide: () => {
                 const provider = new Map();
                 provider.set('isLogin', true);
@@ -99,11 +99,11 @@
         default: login_build
     });
 
-    const tagName$1D = 'marquee';
+    const tagName$1B = 'marquee';
     transpiler.register('wm-marquee', () => {
         return {
-            pre: attrs => `<${tagName$1D} onmouseover="this.stop();" onmouseout="this.start();" wmMarquee role="marquee" aria-live="off" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1D}>`
+            pre: attrs => `<${tagName$1B} onmouseover="this.stop();" onmouseout="this.start();" wmMarquee role="marquee" aria-live="off" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1B}>`
         };
     });
     var marquee_build = () => { };
@@ -113,15 +113,15 @@
         default: marquee_build
     });
 
-    const tagName$1C = 'a';
+    const tagName$1A = 'a';
     const idGen$s = new core.IDGenerator('wm_anchor');
     transpiler.register('wm-anchor', () => {
         return {
             pre: (attrs) => {
                 const counter = idGen$s.nextUid();
-                return `<${tagName$1C} wmAnchor #${counter}="wmAnchor" role="link" data-identifier="anchor" [attr.aria-label]="${counter}.hint || ${counter}.caption" ${transpiler.getAttrMarkup(attrs)}>`;
+                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" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$1C}>`
+            post: () => `</${tagName$1A}>`
         };
     });
     var anchor_build = () => { };
@@ -131,11 +131,11 @@
         default: anchor_build
     });
 
-    const tagName$1B = 'div';
+    const tagName$1z = 'div';
     transpiler.register('wm-audio', () => {
         return {
-            pre: attrs => `<${tagName$1B} wmAudio ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1B}>`
+            pre: attrs => `<${tagName$1z} wmAudio ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1z}>`
         };
     });
     var audio_build = () => { };
@@ -145,15 +145,15 @@
         default: audio_build
     });
 
-    const tagName$1A = 'div';
+    const tagName$1y = 'div';
     const idGen$r = new core.IDGenerator('wm_html');
     transpiler.register('wm-html', () => {
         return {
             pre: (attrs) => {
                 const counter = idGen$r.nextUid();
-                return `<${tagName$1A} wmHtml #${counter}="wmHtml" [attr.aria-label]="${counter}.hint || 'HTML content'" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$1y} wmHtml #${counter}="wmHtml" role="application" [attr.aria-label]="${counter}.arialabel || 'HTML content'" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$1A}>`
+            post: () => `</${tagName$1y}>`
         };
     });
     var html_build = () => { };
@@ -163,11 +163,11 @@
         default: html_build
     });
 
-    const tagName$1z = 'span';
+    const tagName$1x = 'span';
     transpiler.register('wm-icon', () => {
         return {
-            pre: attrs => `<${tagName$1z} wmIcon aria-hidden="true" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1z}>`
+            pre: attrs => `<${tagName$1x} wmIcon ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1x}>`
         };
     });
     var icon_build = () => { };
@@ -177,11 +177,11 @@
         default: icon_build
     });
 
-    const tagName$1y = 'div';
+    const tagName$1w = 'div';
     transpiler.register('wm-iframe', () => {
         return {
-            pre: attrs => `<${tagName$1y} wmIframe ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1y}>`
+            pre: attrs => `<${tagName$1w} wmIframe ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1w}>`
         };
     });
     var iframe_build = () => { };
@@ -191,7 +191,7 @@
         default: iframe_build
     });
 
-    let tagName$1x = 'p';
+    let tagName$1v = 'p';
     const idGen$q = new core.IDGenerator('wm_label');
     transpiler.register('wm-label', () => {
         return {
@@ -201,15 +201,15 @@
                         const classList = attrs.get('class') ? attrs.get('class').split(' ').filter(element => ["h1", "h2", "h3", "h4", "h5", "h6", "p"].includes(element)) : [];
                         attrs.set('type', classList.length ? classList[0] : "p");
                     }
-                    tagName$1x = attrs.get('type');
+                    tagName$1v = attrs.get('type');
                 }
                 else {
-                    tagName$1x = 'label';
+                    tagName$1v = 'label';
                 }
                 const counter = idGen$q.nextUid();
-                return `<${tagName$1x} wmLabel #${counter}="wmLabel" [attr.aria-label]="${counter}.hint" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$1v} wmLabel #${counter}="wmLabel" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$1x}>`
+            post: () => `</${tagName$1v}>`
         };
     });
     var label_build = () => { };
@@ -219,13 +219,13 @@
         default: label_build
     });
 
-    const tagName$1w = 'img';
+    const tagName$1u = 'img';
     const idGen$p = new core.IDGenerator('wm_picture');
     transpiler.register('wm-picture', () => {
         return {
             pre: (attrs) => {
                 const counter = idGen$p.nextUid();
-                return `<${tagName$1w} wmPicture #${counter}="wmPicture" alt="image" wmImageCache="${attrs.get('offline') || 'true'}" [attr.aria-label]="${counter}.hint || 'Image'" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$1u} wmPicture #${counter}="wmPicture" [alt]="${counter}.alttext" wmImageCache="${attrs.get('offline') || 'true'}" [attr.aria-label]="${counter}.arialabel || 'Image'" ${transpiler.getAttrMarkup(attrs)}>`;
             }
         };
     });
@@ -236,15 +236,15 @@
         default: picture_build
     });
 
-    const tagName$1v = 'div';
+    const tagName$1t = 'div';
     const idGen$o = new core.IDGenerator('wm_spinner');
     transpiler.register('wm-spinner', () => {
         return {
             pre: (attrs) => {
                 const counter = idGen$o.nextUid();
-                return `<${tagName$1v} wmSpinner #${counter}="wmSpinner" role="alert" [attr.aria-label]="${counter}.hint || 'Loading...'" aria-live="assertive" aria-busy="true" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$1t} wmSpinner #${counter}="wmSpinner" role="alert" [attr.aria-label]="${counter}.arialabel || 'Loading...'" aria-live="assertive" aria-busy="true" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$1v}>`
+            post: () => `</${tagName$1t}>`
         };
     });
     var spinner_build = () => { };
@@ -254,7 +254,7 @@
         default: spinner_build
     });
 
-    const tagName$1u = 'div';
+    const tagName$1s = 'div';
     const getAttr = (node, attrName) => node.attrs.find(attr => attr.name === attrName);
     const getAttrValue = (node, attrName) => {
         const match = getAttr(node, attrName);
@@ -282,8 +282,8 @@
                     }
                 }
             },
-            pre: attrs => `<${tagName$1u} wmProgressBar ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1u}>`
+            pre: attrs => `<${tagName$1s} wmProgressBar ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1s}>`
         };
     });
     var progressBar_build = () => { };
@@ -293,11 +293,15 @@
         default: progressBar_build
     });
 
-    const tagName$1t = 'div';
+    const tagName$1r = 'div';
+    const idGen$n = new core.IDGenerator('wm_progress_circle');
     transpiler.register('wm-progress-circle', () => {
         return {
-            pre: attrs => `<${tagName$1t} wmProgressCircle ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1t}>`
+            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" ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$1r}>`
         };
     });
     var progressCircle_build = () => { };
@@ -307,15 +311,15 @@
         default: progressCircle_build
     });
 
-    const tagName$1s = 'div';
-    const idGen$n = new core.IDGenerator('wm_richtexteditor');
+    const tagName$1q = 'div';
+    const idGen$m = new core.IDGenerator('wm_richtexteditor');
     transpiler.register('wm-richtexteditor', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$n.nextUid();
-                return `<${tagName$1s} wmRichTextEditor #${counter}="wmRichTextEditor" role="textbox" [attr.aria-label]="${counter}.hint || 'Richtext editor'" ${transpiler.getFormMarkupAttr(attrs)}>`;
+                const counter = idGen$m.nextUid();
+                return `<${tagName$1q} wmRichTextEditor #${counter}="wmRichTextEditor" role="textbox" [attr.aria-label]="${counter}.arialabel || 'Richtext editor'" ${transpiler.getFormMarkupAttr(attrs)}>`;
             },
-            post: () => `</${tagName$1s}>`
+            post: () => `</${tagName$1q}>`
         };
     });
     var richTextEditor_build = () => { };
@@ -325,11 +329,11 @@
         default: richTextEditor_build
     });
 
-    const tagName$1r = 'div';
+    const tagName$1p = 'div';
     transpiler.register('wm-search', () => {
         return {
-            pre: attrs => `<${tagName$1r} wmSearch ${transpiler.getFormMarkupAttr(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$1r}>`
+            pre: attrs => `<${tagName$1p} wmSearch ${transpiler.getFormMarkupAttr(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$1p}>`
         };
     });
     var search_build = () => { };
@@ -339,11 +343,11 @@
         default: search_build
     });
 
-    const tagName$1q = 'ul';
+    const tagName$1o = 'ul';
     transpiler.register('wm-tree', () => {
         return {
-            pre: attrs => `<${tagName$1q} wmTree class="ztree" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1q}>`
+            pre: attrs => `<${tagName$1o} wmTree class="ztree" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1o}>`
         };
     });
 
@@ -351,11 +355,11 @@
         __proto__: null
     });
 
-    const tagName$1p = 'div';
+    const tagName$1n = 'div';
     transpiler.register('wm-card', () => {
         return {
-            pre: attrs => `<${tagName$1p} wmCard ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1p}>`
+            pre: attrs => `<${tagName$1n} wmCard ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1n}>`
         };
     });
     var card_build = () => { };
@@ -365,11 +369,11 @@
         default: card_build
     });
 
-    const tagName$1o = 'div';
+    const tagName$1m = 'div';
     transpiler.register('wm-card-content', () => {
         return {
-            pre: attrs => `<${tagName$1o} wmCardContent partialContainer ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1o}>`
+            pre: attrs => `<${tagName$1m} wmCardContent partialContainer ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1m}>`
         };
     });
     var cardContent_build = () => { };
@@ -379,11 +383,11 @@
         default: cardContent_build
     });
 
-    const tagName$1n = 'div';
+    const tagName$1l = 'div';
     transpiler.register('wm-card-actions', () => {
         return {
-            pre: attrs => `<${tagName$1n} wmCardActions ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1n}>`
+            pre: attrs => `<${tagName$1l} wmCardActions ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1l}>`
         };
     });
     var cardActions_build = () => { };
@@ -393,11 +397,11 @@
         default: cardActions_build
     });
 
-    const tagName$1m = 'div';
+    const tagName$1k = 'div';
     transpiler.register('wm-card-footer', () => {
         return {
-            pre: attrs => `<${tagName$1m} wmCardFooter ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1m}>`
+            pre: attrs => `<${tagName$1k} wmCardFooter ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1k}>`
         };
     });
     var cardFooter_build = () => { };
@@ -407,11 +411,11 @@
         default: cardFooter_build
     });
 
-    const tagName$1l = 'div';
+    const tagName$1j = 'div';
     transpiler.register('wm-chart', () => {
         return {
-            pre: attrs => `<${tagName$1l} wmChart redrawable aria-label="${attrs.get('type')} Chart" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1l}>`
+            pre: attrs => `<${tagName$1j} wmChart redrawable aria-label="${attrs.get('type')} Chart" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1j}>`
         };
     });
     var chart_build = () => { };
@@ -421,19 +425,19 @@
         default: chart_build
     });
 
-    const tagName$1k = 'div';
+    const tagName$1i = 'div';
     const dataSetKey$4 = 'dataset';
-    const idGen$m = new core.IDGenerator('wm_accordion_ref_');
+    const idGen$l = new core.IDGenerator('wm_accordion_ref_');
     const isDynamicAccordion = node => node.attrs.find(attr => attr.name === 'type' && attr.value === 'dynamic');
     transpiler.register('wm-accordion', () => {
         return {
             pre: (attrs, shared) => {
                 // generating unique Id for the accordion
-                const counter = idGen$m.nextUid();
+                const counter = idGen$l.nextUid();
                 shared.set('accordion_ref', counter);
-                return `<${tagName$1k} wmAccordion #${counter}="wmAccordion" role="tablist" aria-multiselectable="true" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$1i} wmAccordion #${counter}="wmAccordion" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$1k}>`,
+            post: () => `</${tagName$1i}>`,
             template: (node, shared) => {
                 // check if the accordion is dynamic
                 if (isDynamicAccordion(node)) {
@@ -464,15 +468,15 @@
         default: accordion_build
     });
 
-    const tagName$1j = 'div';
-    const idGen$l = new core.IDGenerator('wm_accordionpane');
+    const tagName$1h = 'div';
+    const idGen$k = new core.IDGenerator('wm_accordionpane');
     transpiler.register('wm-accordionpane', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$l.nextUid();
-                return `<${tagName$1j} #${counter}="wmAccordionPane" [attr.aria-expanded]="${counter}.isActive" wmAccordionPane partialContainer wm-navigable-element="true" role="tab" ${transpiler.getAttrMarkup(attrs)}>`;
+                const counter = idGen$k.nextUid();
+                return `<${tagName$1h} #${counter}="wmAccordionPane" wmAccordionPane partialContainer wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$1j}>`
+            post: () => `</${tagName$1h}>`
         };
     });
     var accordionPane_build = () => { };
@@ -482,11 +486,11 @@
         default: accordionPane_build
     });
 
-    const tagName$1i = 'div';
+    const tagName$1g = 'div';
     transpiler.register('wm-container', () => {
         return {
-            pre: attrs => `<${tagName$1i} wmContainer partialContainer wmSmoothscroll="${attrs.get('smoothscroll') || 'false'}" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1i}>`
+            pre: attrs => `<${tagName$1g} wmContainer partialContainer wmSmoothscroll="${attrs.get('smoothscroll') || 'false'}" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1g}>`
         };
     });
     var container_build = () => { };
@@ -496,11 +500,11 @@
         default: container_build
     });
 
-    const tagName$1h = 'div';
+    const tagName$1f = 'div';
     transpiler.register('wm-gridcolumn', () => {
         return {
-            pre: attrs => `<${tagName$1h} wmLayoutGridColumn ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1h}>`
+            pre: attrs => `<${tagName$1f} wmLayoutGridColumn ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1f}>`
         };
     });
     var layoutGridColumn_build = () => { };
@@ -510,11 +514,11 @@
         default: layoutGridColumn_build
     });
 
-    const tagName$1g = 'div';
+    const tagName$1e = 'div';
     transpiler.register('wm-gridrow', () => {
         return {
-            pre: attrs => `<${tagName$1g} wmLayoutGridRow ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1g}>`
+            pre: attrs => `<${tagName$1e} wmLayoutGridRow ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1e}>`
         };
     });
     var layoutGridRow_build = () => { };
@@ -524,11 +528,11 @@
         default: layoutGridRow_build
     });
 
-    const tagName$1f = 'div';
+    const tagName$1d = 'div';
     transpiler.register('wm-layoutgrid', () => {
         return {
-            pre: attrs => `<${tagName$1f} wmLayoutGrid ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1f}>`
+            pre: attrs => `<${tagName$1d} wmLayoutGrid ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1d}>`
         };
     });
     var layoutGrid_build = () => { };
@@ -538,21 +542,21 @@
         default: layoutGrid_build
     });
 
-    const tagName$1e = 'div';
-    const idGen$k = new core.IDGenerator('wm_panel');
+    const tagName$1c = 'div';
+    const idGen$j = new core.IDGenerator('wm_panel');
     transpiler.register('wm-panel', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$k.nextUid();
-                return `<${tagName$1e} wmPanel #${counter}="wmPanel" partialContainer wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`;
+                const counter = idGen$j.nextUid();
+                return `<${tagName$1c} wmPanel #${counter}="wmPanel" partialContainer wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$1e}>`
+            post: () => `</${tagName$1c}>`
         };
     });
     transpiler.register('wm-panel-footer', () => {
         return {
-            pre: attrs => `<${tagName$1e} wmPanelFooter ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1e}>`
+            pre: attrs => `<${tagName$1c} wmPanelFooter ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1c}>`
         };
     });
     var panel_build = () => { };
@@ -562,11 +566,11 @@
         default: panel_build
     });
 
-    const tagName$1d = 'div';
+    const tagName$1b = 'div';
     transpiler.register('wm-segmented-control', () => {
         return {
-            pre: attrs => `<${tagName$1d} wmSegmentedControl ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1d}>`
+            pre: attrs => `<${tagName$1b} wmSegmentedControl ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1b}>`
         };
     });
     var segmentedControl_build = () => { };
@@ -576,11 +580,11 @@
         default: segmentedControl_build
     });
 
-    const tagName$1c = 'li';
+    const tagName$1a = 'li';
     transpiler.register('wm-segment-content', () => {
         return {
-            pre: attrs => `<${tagName$1c} wmSegmentContent partialContainer wmSmoothscroll=${attrs.get('smoothscroll') || 'false'} wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1c}>`
+            pre: attrs => `<${tagName$1a} wmSegmentContent partialContainer wmSmoothscroll=${attrs.get('smoothscroll') || 'false'} wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1a}>`
         };
     });
     var segmentContent_build = () => { };
@@ -618,19 +622,19 @@
         default: repeatTemplate_build
     });
 
-    const tagName$1b = 'div';
+    const tagName$19 = 'div';
     const dataSetKey$3 = 'dataset';
-    const idGen$j = new core.IDGenerator('wm_tabs_ref_');
+    const idGen$i = new core.IDGenerator('wm_tabs_ref_');
     const isDynamicTabs = node => node.attrs.find(attr => attr.name === 'type' && attr.value === 'dynamic');
     transpiler.register('wm-tabs', () => {
         return {
             pre: (attrs, shared) => {
                 // generating unique Id for the tabs
-                const counter = idGen$j.nextUid();
+                const counter = idGen$i.nextUid();
                 shared.set('tabs_ref', counter);
-                return `<${tagName$1b} wmTabs #${counter}="wmTabs" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$19} wmTabs #${counter}="wmTabs" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$1b}>`,
+            post: () => `</${tagName$19}>`,
             template: (node, shared) => {
                 // check if the tab widget is dynamic
                 if (isDynamicTabs(node)) {
@@ -661,11 +665,11 @@
         default: tabs_build
     });
 
-    const tagName$1a = 'div';
+    const tagName$18 = 'div';
     transpiler.register('wm-tabpane', () => {
         return {
-            pre: attrs => `<${tagName$1a} wmTabPane  partialContainer ${transpiler.getAttrMarkup(attrs)} wm-navigable-element="true" role="tabpanel">`,
-            post: () => `</${tagName$1a}>`
+            pre: attrs => `<${tagName$18} wmTabPane  partialContainer ${transpiler.getAttrMarkup(attrs)} wm-navigable-element="true" role="tabpanel">`,
+            post: () => `</${tagName$18}>`
         };
     });
     var tabPane_build = () => { };
@@ -675,11 +679,11 @@
         default: tabPane_build
     });
 
-    const tagName$19 = 'div';
+    const tagName$17 = 'div';
     transpiler.register('wm-tile', () => {
         return {
-            pre: attrs => `<${tagName$19} wmTile aria-describedby="Tile" wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$19}>`
+            pre: attrs => `<${tagName$17} wmTile wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$17}>`
         };
     });
     var tile_build = () => { };
@@ -689,11 +693,11 @@
         default: tile_build
     });
 
-    const tagName$18 = 'div';
+    const tagName$16 = 'div';
     transpiler.register('wm-wizard', () => {
         return {
-            pre: attrs => `<${tagName$18} wmWizard role="tablist" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$18}>`
+            pre: attrs => `<${tagName$16} wmWizard ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$16}>`
         };
     });
     var wizard_build = () => { };
@@ -703,16 +707,16 @@
         default: wizard_build
     });
 
-    const tagName$17 = 'form';
-    const idGen$i = new core.IDGenerator('wizard_step_id_');
+    const tagName$15 = 'form';
+    const idGen$h = new core.IDGenerator('wizard_step_id_');
     transpiler.register('wm-wizardstep', () => {
         return {
             pre: attrs => {
-                const counter = idGen$i.nextUid();
-                return `<${tagName$17} wmWizardStep #${counter}="wmWizardStep" ${transpiler.getAttrMarkup(attrs)}>
+                const counter = idGen$h.nextUid();
+                return `<${tagName$15} wmWizardStep #${counter}="wmWizardStep" ${transpiler.getAttrMarkup(attrs)}>
                        <ng-template [ngIf]="${counter}.isInitialized">`;
             },
-            post: () => `</ng-template></${tagName$17}>`
+            post: () => `</ng-template></${tagName$15}>`
         };
     });
     var wizardStep_build = () => { };
@@ -722,15 +726,15 @@
         default: wizardStep_build
     });
 
-    const tagName$16 = 'button';
-    const idGen$h = new core.IDGenerator('wm_barcodescanner');
+    const tagName$14 = 'button';
+    const idGen$g = new core.IDGenerator('wm_barcodescanner');
     transpiler.register('wm-barcodescanner', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$h.nextUid();
-                return `<${tagName$16} wmBarcodescanner #${counter}="wmBarcodescanner" [attr.aria-label]="${counter}.hint || 'Barcode scanner'"  ${transpiler.getAttrMarkup(attrs)}>`;
+                const counter = idGen$g.nextUid();
+                return `<${tagName$14} wmBarcodescanner #${counter}="wmBarcodescanner" [attr.aria-label]="${counter}.arialabel || 'Barcode scanner'"  ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$16}>`
+            post: () => `</${tagName$14}>`
         };
     });
     var barcodeScanner_build = () => { };
@@ -740,15 +744,15 @@
         default: barcodeScanner_build
     });
 
-    const tagName$15 = 'button';
-    const idGen$g = new core.IDGenerator('wm_camera');
+    const tagName$13 = 'button';
+    const idGen$f = new core.IDGenerator('wm_camera');
     transpiler.register('wm-camera', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$g.nextUid();
-                return `<${tagName$15} type='button' wmCamera #${counter}="wmCamera" [attr.aria-label]="${counter}.hint || 'Camera'"  ${transpiler.getAttrMarkup(attrs)}>`;
+                const counter = idGen$f.nextUid();
+                return `<${tagName$13} type='button' wmCamera #${counter}="wmCamera" [attr.aria-label]="${counter}.arialabel || 'Camera'"  ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$15}>`
+            post: () => `</${tagName$13}>`
         };
     });
     var camera_build = () => { };
@@ -758,11 +762,11 @@
         default: camera_build
     });
 
-    const tagName$14 = 'div';
+    const tagName$12 = 'div';
     transpiler.register('wm-alertdialog', () => {
         return {
-            pre: attrs => `<${tagName$14} wmAlertDialog role="alertdialog" wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$14}>`
+            pre: attrs => `<${tagName$12} wmAlertDialog wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$12}>`
         };
     });
     var alertDialog_build = () => { };
@@ -772,11 +776,11 @@
         default: alertDialog_build
     });
 
-    const tagName$13 = 'div';
+    const tagName$11 = 'div';
     transpiler.register('wm-confirmdialog', () => {
         return {
-            pre: attrs => `<${tagName$13} wmConfirmDialog wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$13}>`
+            pre: attrs => `<${tagName$11} wmConfirmDialog wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$11}>`
         };
     });
     var confirmDialog_build = () => { };
@@ -786,11 +790,11 @@
         default: confirmDialog_build
     });
 
-    const tagName$12 = 'div';
+    const tagName$10 = 'div';
     transpiler.register('wm-dialogactions', () => {
         return {
-            pre: attrs => `<ng-template #dialogFooter><${tagName$12} wmDialogFooter data-identfier="actions" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$12}></ng-template>`
+            pre: attrs => `<ng-template #dialogFooter><${tagName$10} wmDialogFooter data-identfier="actions" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$10}></ng-template>`
         };
     });
     var dialogFooter_build = () => { };
@@ -800,11 +804,11 @@
         default: dialogFooter_build
     });
 
-    const tagName$11 = 'div';
+    const tagName$$ = 'div';
     transpiler.register('wm-dialog', () => {
         return {
-            pre: attrs => `<${tagName$11} wmDialog ${transpiler.getAttrMarkup(attrs)} aria-modal="true" role="dialog" wm-navigable-element="true"><ng-template #dialogBody>`,
-            post: () => `</ng-template></${tagName$11}>`
+            pre: attrs => `<${tagName$$} wmDialog ${transpiler.getAttrMarkup(attrs)} aria-modal="true" role="dialog" wm-navigable-element="true"><ng-template #dialogBody>`,
+            post: () => `</ng-template></${tagName$$}>`
         };
     });
     // Todo:vinay remove wm-view in migration
@@ -821,11 +825,11 @@
         default: dialog_build
     });
 
-    const tagName$10 = 'div';
+    const tagName$_ = 'div';
     transpiler.register('wm-iframedialog', () => {
         return {
-            pre: attrs => `<${tagName$10} wmIframeDialog wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$10}>`
+            pre: attrs => `<${tagName$_} wmIframeDialog wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$_}>`
         };
     });
     var iframeDialog_build = () => { };
@@ -835,11 +839,11 @@
         default: iframeDialog_build
     });
 
-    const tagName$$ = 'div';
+    const tagName$Z = 'div';
     transpiler.register('wm-logindialog', () => {
         return {
-            pre: attrs => `<${tagName$$} wmDialog wmLoginDialog ${transpiler.getAttrMarkup(attrs)} eventsource.bind="Actions.loginAction" wm-navigable-element="true"><ng-template #dialogBody>`,
-            post: () => `</ng-template></${tagName$$}>`
+            pre: attrs => `<${tagName$Z} wmDialog wmLoginDialog ${transpiler.getAttrMarkup(attrs)} eventsource.bind="Actions.loginAction" wm-navigable-element="true"><ng-template #dialogBody>`,
+            post: () => `</ng-template></${tagName$Z}>`
         };
     });
     var loginDialog_build = () => { };
@@ -849,7 +853,7 @@
         default: loginDialog_build
     });
 
-    const tagName$_ = 'div';
+    const tagName$Y = 'div';
     transpiler.register('wm-pagedialog', () => {
         return {
             pre: (attrs, shared) => {
@@ -875,14 +879,14 @@
                     shared.set('hasPartialContent', true);
                     containerMarkup += `<ng-template><div wmContainer #partial partialContainer ${contentMarkup} width="100%" height="100%" ${onLoadEvtMarkup}>`;
                 }
-                return `<${tagName$_} wmPartialDialog ${transpiler.getAttrMarkup(attrs)}>${containerMarkup}`;
+                return `<${tagName$Y} wmPartialDialog ${transpiler.getAttrMarkup(attrs)}>${containerMarkup}`;
             },
             post: (attrs, shared) => {
                 let preContent = '';
                 if (shared.get('hasPartialContent')) {
                     preContent = `</div></ng-template>`;
                 }
-                return `${preContent}</${tagName$_}>`;
+                return `${preContent}</${tagName$Y}>`;
             }
         };
     });
@@ -961,8 +965,8 @@
         return (fieldTypeWidgetTypeMap[colDef.type] && fieldTypeWidgetTypeMap[colDef.type][0]) || core.FormWidgetType.TEXT;
     };
 
-    const tagName$Z = 'div';
-    const idGen$f = new core.IDGenerator('formfield_');
+    const tagName$X = 'div';
+    const idGen$e = new core.IDGenerator('formfield_');
     const getEventsTemplate = (attrs) => {
         const eventAttrs = new Map();
         if (!attrs.has('focus.event')) {
@@ -1013,13 +1017,12 @@
     };
     const getWidgetTemplate = (attrs, options) => {
         const name = attrs.get('name');
-        const customWidgetName = attrs.get('widgetname');
         const fieldName = (attrs.get('key') || name || '').trim();
         const formControl = options.isMaxWidget ? `formControlName="${fieldName}_max"` : (options.isInList ? `[formControlName]="${options.counter}._fieldName"` : `formControlName="${fieldName}"`);
         const tmplRef = options.isMaxWidget ? `#formWidgetMax` : `#formWidget`;
         const widgetName = name ? (options.isMaxWidget ? `name="${name}_formWidgetMax"` : `name="${name}_formWidget"`) : '';
         const conditionalClass = `[ngClass]="${attrs.get('ngclass')}"`;
-        const defaultTmpl = `[class.hidden]="!${options.pCounter}.isUpdateMode && ${options.counter}.viewmodewidget !== 'default'" ${formControl} ${options.eventsTmpl} ${conditionalClass} ${tmplRef} ${widgetName} ${customWidgetName ? `widgetname=${customWidgetName}` : ''}`;
+        const defaultTmpl = `[class.hidden]="!${options.pCounter}.isUpdateMode && ${options.counter}.viewmodewidget !== 'default'" ${formControl} ${options.eventsTmpl} ${conditionalClass} ${tmplRef} ${widgetName}`;
         return core.getFormWidgetTemplate(options.widgetType, defaultTmpl, attrs, { counter: options.counter, pCounter: options.pCounter });
     };
     const getTemplate = (attrs, widgetType, eventsTmpl, counter, pCounter, isInList) => {
@@ -1063,14 +1066,14 @@
         return {
             requires: ['wm-form', 'wm-liveform', 'wm-livefilter', 'wm-list'],
             pre: (attrs, shared, parentForm, parentLiveForm, parentFilter, parentList) => {
-                const counter = idGen$f.nextUid();
+                const counter = idGen$e.nextUid();
                 const parent = parentForm || parentLiveForm || parentFilter;
                 const pCounter = (parent && parent.get('form_reference')) || 'form';
                 const widgetType = attrs.get('widget') || core.FormWidgetType.TEXT;
                 const dataRole = isFormField ? 'form-field' : 'filter-field';
                 const formFieldErrorMsgId = 'wmform-field-error-' + core.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 === core.FormWidgetType.UPLOAD ? '' : getEventsTemplate(attrs);
                 const controlLayout = core.isMobileApp() ? 'col-xs-12' : 'col-sm-12';
@@ -1086,7 +1089,7 @@
                 else {
                     setDefaultPlaceholder(attrs, widgetType, 2);
                 }
-                return `<${tagName$Z} data-role="${dataRole}" [formGroup]="${pCounter}.ngform" wmFormField wmCaptionPosition #${counter}="wmFormField" widgettype="${widgetType}" ${transpiler.getFormMarkupAttr(attrs)}>
+                return `<${tagName$X} data-role="${dataRole}" [formGroup]="${pCounter}.ngform" wmFormField wmCaptionPosition #${counter}="wmFormField" widgettype="${widgetType}" ${transpiler.getFormMarkupAttr(attrs)}>
                         <div class="live-field form-group app-composite-widget clearfix caption-{{${pCounter}.captionposition}}" widget="${widgetType}">
                             <label [hidden]="!${counter}.displayname" class="app-label control-label formfield-label {{${pCounter}._captionClass}}"
                                         [ngStyle]="{width: ${pCounter}.captionsize}" [ngClass]="{'text-danger': ${counter}._control?.invalid && ${counter}._control?.touched && ${pCounter}.isUpdateMode,
@@ -1102,7 +1105,7 @@
                             </div>
                         </div>`;
             },
-            post: () => `</${tagName$Z}>`,
+            post: () => `</${tagName$X}>`,
             provide: (attrs, shared) => {
                 const provider = new Map();
                 provider.set('form_reference', shared.get('counter'));
@@ -1124,11 +1127,11 @@
         default: formField_build
     });
 
-    const tagName$Y = 'div';
+    const tagName$W = 'div';
     const registerAction = (tmpl) => {
         return {
-            pre: attrs => `<${tagName$Y} wmFormAction name="${attrs.get('name') || attrs.get('key')}" ${transpiler.getAttrMarkup(attrs)} ${tmpl}>`,
-            post: () => `</${tagName$Y}>`
+            pre: attrs => `<${tagName$W} wmFormAction name="${attrs.get('name') || attrs.get('key')}" ${transpiler.getAttrMarkup(attrs)} ${tmpl}>`,
+            post: () => `</${tagName$W}>`
         };
     };
     transpiler.register('wm-form-action', registerAction.bind(undefined, ''));
@@ -1140,8 +1143,8 @@
         default: formAction_build
     });
 
-    const tagName$X = 'form';
-    const idGen$e = new core.IDGenerator('form_');
+    const tagName$V = 'form';
+    const idGen$d = new core.IDGenerator('form_');
     const formWidgets$1 = new Set([
         'wm-text',
         'wm-textarea',
@@ -1209,7 +1212,7 @@
                 let tmpl;
                 let dialogId;
                 const role = parentLoginWidget && parentLoginWidget.get('isLogin') ? 'app-login' : '';
-                const counter = idGen$e.nextUid();
+                const counter = idGen$d.nextUid();
                 const dependsOn = attrs.get('dependson') ? `dependson="${attrs.get('dependson')}"` : '';
                 if (dependsOn) {
                     attrs.set('dependsontable', attrs.get('dependson'));
@@ -1217,7 +1220,7 @@
                 const classProp = attrs.get('formlayout') === 'page' ? 'app-device-liveform panel liveform-inline' : '';
                 const dialogAttributes = ['title', 'title.bind', 'iconclass', 'iconclass.bind', 'width'];
                 attrs.delete('dependson');
-                const liveFormTmpl = `<${tagName$X} wmForm data-role="${role}" ${directiveAttr} #${counter} ngNativeValidate [formGroup]="${counter}.ngform" [noValidate]="${counter}.validationtype !== 'html'"
+                const liveFormTmpl = `<${tagName$V} wmForm data-role="${role}" ${directiveAttr} #${counter} ngNativeValidate [formGroup]="${counter}.ngform" [noValidate]="${counter}.validationtype !== 'html'"
                     class="${classProp}" [class]="${counter}.captionAlignClass" [autocomplete]="${counter}.autocomplete ? 'on' : 'off'" captionposition=${attrs.get('captionposition')}`;
                 attrs.set('numberOfFields', `${numberOfFields}`);
                 shared.set('counter', counter);
@@ -1270,12 +1273,12 @@
                     return '</form></ng-template></div></div>';
                 }
                 if (attrs.get('formlayout') === 'page') {
-                    return `</div></${tagName$X}>`;
+                    return `</div></${tagName$V}>`;
                 }
                 if (attrs.get('dependsontable')) {
-                    return `</${tagName$X}></div>`;
+                    return `</${tagName$V}></div>`;
                 }
-                return `</${tagName$X}>`;
+                return `</${tagName$V}>`;
             },
             provide: (attrs, shared) => {
                 const provider = new Map();
@@ -1294,14 +1297,14 @@
         default: form_build
     });
 
-    const tagName$W = 'div';
+    const tagName$U = 'div';
     transpiler.register('wm-calendar', () => {
         return {
             pre: (attrs) => {
                 let viewType = attrs.get('view') ? attrs.get('view') + ' view' : 'month view';
-                return `<${tagName$W} wmCalendar redrawable style="width:100%" aria-label="${viewType}" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$U} wmCalendar redrawable style="width:100%" role="region" aria-label="${viewType}" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$W}>`
+            post: () => `</${tagName$U}>`
         };
     });
     var calendar_build = () => { };
@@ -1311,11 +1314,11 @@
         default: calendar_build
     });
 
-    const tagName$V = 'ul';
+    const tagName$T = 'ul';
     transpiler.register('wm-chips', () => {
         return {
-            pre: attrs => `<${tagName$V} wmChips role="listbox" ${transpiler.getAttrMarkup(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$V}>`
+            pre: attrs => `<${tagName$T} wmChips ${transpiler.getAttrMarkup(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$T}>`
         };
     });
     var chips_build = () => { };
@@ -1325,11 +1328,11 @@
         default: chips_build
     });
 
-    const tagName$U = 'div';
+    const tagName$S = 'div';
     transpiler.register('wm-colorpicker', () => {
         return {
-            pre: attrs => `<${tagName$U} wmColorPicker ${transpiler.getAttrMarkup(attrs)} role="input" ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$U}>`
+            pre: attrs => `<${tagName$S} wmColorPicker ${transpiler.getAttrMarkup(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$S}>`
         };
     });
     var colorPicker_build = () => { };
@@ -1339,11 +1342,11 @@
         default: colorPicker_build
     });
 
-    const tagName$T = 'div';
+    const tagName$R = 'div';
     transpiler.register('wm-currency', () => {
         return {
-            pre: attrs => `<${tagName$T} wmCurrency ${transpiler.getAttrMarkup(attrs)} role="input" ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$T}>`
+            pre: attrs => `<${tagName$R} wmCurrency ${transpiler.getAttrMarkup(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$R}>`
         };
     });
     var currency_build = () => { };
@@ -1353,11 +1356,11 @@
         default: currency_build
     });
 
-    const tagName$S = 'div';
+    const tagName$Q = 'div';
     transpiler.register('wm-buttongroup', () => {
         return {
-            pre: attrs => `<${tagName$S} wmButtonGroup role="group" aria-labelledby="button group" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$S}>`
+            pre: attrs => `<${tagName$Q} wmButtonGroup role="group" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$Q}>`
         };
     });
     var buttonGroup_build = () => { };
@@ -1367,15 +1370,15 @@
         default: buttonGroup_build
     });
 
-    const tagName$R = 'button';
-    const idGen$d = new core.IDGenerator('wm_button');
+    const tagName$P = 'button';
+    const idGen$c = new core.IDGenerator('wm_button');
     transpiler.register('wm-button', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$d.nextUid();
-                return `<${tagName$R} wmButton #${counter}="wmButton" [attr.aria-label]="${counter}.hint || ${counter}.caption || null" ${transpiler.getAttrMarkup(attrs)}>`;
+                const counter = idGen$c.nextUid();
+                return `<${tagName$P} wmButton #${counter}="wmButton" [attr.aria-label]="${counter}.arialabel || (${counter}.badgevalue ? ${counter}.caption + ' ' + ${counter}.badgevalue : ${counter}.caption) || null" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$R}>`
+            post: () => `</${tagName$P}>`
         };
     });
     var button_build = () => { };
@@ -1385,11 +1388,11 @@
         default: button_build
     });
 
-    const tagName$Q = 'div';
+    const tagName$O = 'div';
     transpiler.register('wm-checkbox', () => {
         return {
-            pre: attrs => `<${tagName$Q} wmCheckbox ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$Q}>`
+            pre: attrs => `<${tagName$O} wmCheckbox ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$O}>`
         };
     });
     var checkbox_build = () => { };
@@ -1399,11 +1402,11 @@
         default: checkbox_build
     });
 
-    const tagName$P = 'ul';
+    const tagName$N = 'ul';
     transpiler.register('wm-checkboxset', () => {
         return {
-            pre: attrs => `<${tagName$P} role="group" wmCheckboxset ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$P}>`
+            pre: attrs => `<${tagName$N} role="group" wmCheckboxset ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$N}>`
         };
     });
     var checkboxset_build = () => { };
@@ -1413,11 +1416,11 @@
         default: checkboxset_build
     });
 
-    const tagName$O = 'div';
+    const tagName$M = 'div';
     transpiler.register('wm-composite', () => {
         return {
-            pre: attrs => `<${tagName$O} wmComposite wmCaptionPosition ${transpiler.setChildAttrs(attrs)} ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$O}${transpiler.clearChildAttrs()}>`
+            pre: attrs => `<${tagName$M} wmComposite wmCaptionPosition ${transpiler.setChildAttrs(attrs)} ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$M}${transpiler.clearChildAttrs()}>`
         };
     });
     var composite_build = () => { };
@@ -1427,11 +1430,11 @@
         default: composite_build
     });
 
-    const tagName$N = 'div';
+    const tagName$L = 'div';
     transpiler.register('wm-number', () => {
         return {
-            pre: attrs => `<${tagName$N} wmNumber ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$N}>`
+            pre: attrs => `<${tagName$L} wmNumber ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$L}>`
         };
     });
     var number_build = () => { };
@@ -1441,11 +1444,11 @@
         default: number_build
     });
 
-    const tagName$M = 'ul';
+    const tagName$K = 'ul';
     transpiler.register('wm-radioset', () => {
         return {
-            pre: attrs => `<${tagName$M} role="radiogroup" wmRadioset ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$M}>`
+            pre: attrs => `<${tagName$K} role="radiogroup" wmRadioset ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$K}>`
         };
     });
     var radioset_build = () => { };
@@ -1455,11 +1458,11 @@
         default: radioset_build
     });
 
-    const tagName$L = 'wm-select';
+    const tagName$J = 'wm-select';
     transpiler.register('wm-select', () => {
         return {
-            pre: attrs => `<${tagName$L} ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)}  ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$L}>`
+            pre: attrs => `<${tagName$J} ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)}  ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$J}>`
         };
     });
     var select_build = () => { };
@@ -1469,15 +1472,15 @@
         default: select_build
     });
 
-    const tagName$K = 'div';
-    const idGen$c = new core.IDGenerator('wm_switch');
+    const tagName$I = 'div';
+    const idGen$b = new core.IDGenerator('wm_switch');
     transpiler.register('wm-switch', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$c.nextUid();
-                return `<${tagName$K} wmSwitch #${counter}="wmSwitch" [attr.aria-label]="${counter}.hint || 'Switch button'" ${transpiler.getFormMarkupAttr(attrs)} ${core.getNgModelAttr(attrs)}>`;
+                const counter = idGen$b.nextUid();
+                return `<${tagName$I} wmSwitch #${counter}="wmSwitch" role="group" [attr.aria-label]="${counter}.arialabel || 'Switch choose options'" ${transpiler.getFormMarkupAttr(attrs)} ${core.getNgModelAttr(attrs)}>`;
             },
-            post: () => `</${tagName$K}>`
+            post: () => `</${tagName$I}>`
         };
     });
     var switch_build = () => { };
@@ -1487,11 +1490,11 @@
         default: switch_build
     });
 
-    const tagName$J = 'wm-input';
+    const tagName$H = 'wm-input';
     transpiler.register('wm-text', () => {
         return {
-            pre: attrs => `<${tagName$J} ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$J}>`
+            pre: attrs => `<${tagName$H} ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$H}>`
         };
     });
     var text_build = () => { };
@@ -1501,11 +1504,11 @@
         default: text_build
     });
 
-    const tagName$I = 'wm-textarea';
+    const tagName$G = 'wm-textarea';
     transpiler.register('wm-textarea', () => {
         return {
-            pre: attrs => `<${tagName$I} ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$I}>`
+            pre: attrs => `<${tagName$G} ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$G}>`
         };
     });
     var textarea_build = () => { };
@@ -1515,11 +1518,11 @@
         default: textarea_build
     });
 
-    const tagName$H = 'div';
+    const tagName$F = 'div';
     transpiler.register('wm-datetime', () => {
         return {
-            pre: attrs => `<${tagName$H} wmDateTime ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$H}>`
+            pre: attrs => `<${tagName$F} wmDateTime ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$F}>`
         };
     });
     var dateTime_build = () => { };
@@ -1529,11 +1532,11 @@
         default: dateTime_build
     });
 
-    const tagName$G = 'div';
+    const tagName$E = 'div';
     transpiler.register('wm-date', () => {
         return {
-            pre: attrs => `<${tagName$G} wmDate ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$G}>`
+            pre: attrs => `<${tagName$E} wmDate ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$E}>`
         };
     });
     var date_build = () => { };
@@ -1543,11 +1546,11 @@
         default: date_build
     });
 
-    const tagName$F = 'div';
+    const tagName$D = 'div';
     transpiler.register('wm-time', () => {
         return {
-            pre: attrs => `<${tagName$F} wmTime ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$F}>`
+            pre: attrs => `<${tagName$D} wmTime ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$D}>`
         };
     });
     var time_build = () => { };
@@ -1557,7 +1560,7 @@
         default: time_build
     });
 
-    const tagName$E = 'div';
+    const tagName$C = 'div';
     transpiler.register('wm-fileupload', () => {
         return {
             pre: attrs => {
@@ -1565,9 +1568,13 @@
                     const onSelectBinding = transpiler.getDataSource(attrs.get('select.event'));
                     attrs.set('datasource.bind', onSelectBinding);
                 }
-                return `<${tagName$E} wmFileUpload ${transpiler.getAttrMarkup(attrs)} role="input">`;
+                if (attrs.get('delete.event')) {
+                    const onDeleteBinding = transpiler.getDataSource(attrs.get('delete.event'));
+                    attrs.set('deletedatasource.bind', onDeleteBinding);
+                }
+                return `<${tagName$C} wmFileUpload ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$E}>`
+            post: () => `</${tagName$C}>`
         };
     });
     var fileUpload_build = () => { };
@@ -1577,11 +1584,11 @@
         default: fileUpload_build
     });
 
-    const tagName$D = 'div';
+    const tagName$B = 'div';
     transpiler.register('wm-rating', () => {
         return {
-            pre: attrs => `<${tagName$D} wmRating ${transpiler.getFormMarkupAttr(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$D}>`
+            pre: attrs => `<${tagName$B} wmRating ${transpiler.getFormMarkupAttr(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$B}>`
         };
     });
     var rating_build = () => { };
@@ -1591,11 +1598,11 @@
         default: rating_build
     });
 
-    const tagName$C = 'div';
+    const tagName$A = 'div';
     transpiler.register('wm-slider', () => {
         return {
-            pre: attrs => `<${tagName$C} wmSlider ${transpiler.getAttrMarkup(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$C}>`
+            pre: attrs => `<${tagName$A} wmSlider ${transpiler.getAttrMarkup(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$A}>`
         };
     });
     var slider_build = () => { };
@@ -1606,7 +1613,7 @@
     });
 
     const wmlistTag = 'wm-list';
-    const tagName$B = 'div';
+    const tagName$z = 'div';
     const dataSetKey$2 = 'dataset';
     function copyAttribute$1(from, fromAttrName, to, toAttrName) {
         const fromAttr = from.attrs.find(a => a.name === fromAttrName);
@@ -1654,8 +1661,8 @@
                     copyAttribute$1(template, 'height', node, 'thumbnailheight');
                 }
             },
-            pre: attrs => `<${tagName$B} wmMediaList ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$B}>`
+            pre: attrs => `<${tagName$z} wmMediaList ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$z}>`
         };
     });
     var mediaList_build = () => { };
@@ -1665,11 +1672,11 @@
         default: mediaList_build
     });
 
-    const tagName$A = 'ng-template';
+    const tagName$y = 'ng-template';
     transpiler.register('wm-media-template', () => {
         return {
-            pre: () => `<${tagName$A} #mediaListTemplate let-item="item" let-index="index">`,
-            post: () => `</${tagName$A}>`
+            pre: () => `<${tagName$y} #mediaListTemplate let-item="item" let-index="index">`,
+            post: () => `</${tagName$y}>`
         };
     });
     var mediaListItem_build = () => { };
@@ -1753,16 +1760,16 @@
         default: list_build
     });
 
-    const tagName$z = 'div';
-    const idGen$b = new core.IDGenerator('liveform_dialog_id_');
+    const tagName$x = 'div';
+    const idGen$a = new core.IDGenerator('liveform_dialog_id_');
     transpiler.register('wm-livetable', () => {
         return {
             pre: (attrs, shared) => {
-                const counter = idGen$b.nextUid();
+                const counter = idGen$a.nextUid();
                 shared.set('counter', counter);
-                return `<${tagName$z} wmLiveTable ${transpiler.getAttrMarkup(attrs)} dialogid="${counter}">`;
+                return `<${tagName$x} wmLiveTable ${transpiler.getAttrMarkup(attrs)} dialogid="${counter}">`;
             },
-            post: () => `</${tagName$z}>`,
+            post: () => `</${tagName$x}>`,
             provide: (attrs, shared) => {
                 const provider = new Map();
                 provider.set('liveform_dialog_id', shared.get('counter'));
@@ -1777,15 +1784,15 @@
         default: liveTable_build
     });
 
-    const tagName$y = 'p';
-    const idGen$a = new core.IDGenerator('wm_message');
+    const tagName$w = 'p';
+    const idGen$9 = new core.IDGenerator('wm_message');
     transpiler.register('wm-message', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$a.nextUid();
-                return `<${tagName$y} wmMessage tabindex="0" #${counter}="wmMessage" ${transpiler.getAttrMarkup(attrs)}>`;
+                const counter = idGen$9.nextUid();
+                return `<${tagName$w} wmMessage tabindex="0" #${counter}="wmMessage" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$y}>`
+            post: () => `</${tagName$w}>`
         };
     });
     var message_build = () => { };
@@ -1795,11 +1802,11 @@
         default: message_build
     });
 
-    const tagName$x = 'ol';
+    const tagName$v = 'ol';
     transpiler.register('wm-breadcrumb', () => {
         return {
-            pre: attrs => `<${tagName$x} wmBreadcrumb ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$x}>`
+            pre: attrs => `<${tagName$v} wmBreadcrumb ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$v}>`
         };
     });
     var breadcrumb_build = () => { };
@@ -1809,7 +1816,7 @@
         default: breadcrumb_build
     });
 
-    const tagName$w = 'div';
+    const tagName$u = 'div';
     transpiler.register('wm-menu', () => {
         return {
             pre: attrs => {
@@ -1824,13 +1831,13 @@
                     else {
                         styleBinding = `[ngStyle]="{'width': '${menuWidth}px'}"`;
                     }
-                    return `<${tagName$w} wmMenu dropdown ${transpiler.getAttrMarkup(attrs)} ${styleBinding}>`;
+                    return `<${tagName$u} wmMenu dropdown ${transpiler.getAttrMarkup(attrs)} ${styleBinding}>`;
                 }
                 else {
-                    return `<${tagName$w} wmMenu dropdown ${transpiler.getAttrMarkup(attrs)}>`;
+                    return `<${tagName$u} wmMenu dropdown ${transpiler.getAttrMarkup(attrs)}>`;
                 }
             },
-            post: () => `</${tagName$w}>`
+            post: () => `</${tagName$u}>`
         };
     });
     var menu_build = () => { };
@@ -1840,11 +1847,11 @@
         default: menu_build
     });
 
-    const tagName$v = 'li';
+    const tagName$t = 'li';
     transpiler.register('wm-nav-item', () => {
         return {
-            pre: attrs => `<${tagName$v} wmNavItem role="listitem" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$v}>`
+            pre: attrs => `<${tagName$t} wmNavItem role="listitem" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$t}>`
         };
     });
     var navItem_build = () => { };
@@ -1854,11 +1861,11 @@
         default: navItem_build
     });
 
-    const tagName$u = 'ul';
+    const tagName$s = 'ul';
     transpiler.register('wm-nav', () => {
         return {
-            pre: attrs => `<${tagName$u} wmNav data-element-type="wmNav" data-role="page-header" role="list" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$u}>`
+            pre: attrs => `<${tagName$s} wmNav data-element-type="wmNav" data-role="page-header" role="list" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$s}>`
         };
     });
     var nav_build = () => { };
@@ -1868,11 +1875,11 @@
         default: nav_build
     });
 
-    const tagName$t = 'nav';
+    const tagName$r = 'nav';
     transpiler.register('wm-navbar', () => {
         return {
-            pre: attrs => `<${tagName$t} wmNavbar data-element-type="wmNavbar" role="navigation" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$t}>`
+            pre: attrs => `<${tagName$r} wmNavbar data-element-type="wmNavbar" role="navigation" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$r}>`
         };
     });
     var navbar_build = () => { };
@@ -1882,7 +1889,7 @@
         default: navbar_build
     });
 
-    const tagName$s = 'wm-popover';
+    const tagName$q = 'wm-popover';
     transpiler.register('wm-popover', () => {
         return {
             requires: ['wm-table'],
@@ -1902,7 +1909,7 @@
                     popoverTemplate = `<div wmContainer #partial partialContainer ${contentMarkup}>`;
                     shared.set('hasPopoverContent', true);
                 }
-                let markup = `<${tagName$s} wmPopover ${transpiler.getAttrMarkup(attrs)}>`;
+                let markup = `<${tagName$q} wmPopover ${transpiler.getAttrMarkup(attrs)}>`;
                 const contextAttrs = table ? `let-row="row"` : ``;
                 markup += `<ng-template ${contextAttrs}><div tabindex="0" class="popover-start sr-only" aria-label="">popover content start</div>`;
                 // todo keyboard navigation - tab
@@ -1916,7 +1923,7 @@
                 if (shared.get('hasPopoverContent')) {
                     markup += `</div>`;
                 }
-                return `${markup}<div tabindex="0" class="popover-end sr-only" aria-label="">popover content ended</div></ng-template></${tagName$s}>`;
+                return `${markup}<div tabindex="0" class="popover-end sr-only" aria-label="">popover content ended</div></ng-template></${tagName$q}>`;
             }
         };
     });
@@ -1927,16 +1934,16 @@
         default: popover_build
     });
 
-    const tagName$r = 'div';
+    const tagName$p = 'div';
     const findChild = (node, childName) => {
         const child = node && node.children.find(e => (e instanceof compiler.Element && e.name === childName));
         return child;
     };
-    const createElement$4 = name => {
-        return new compiler.Element(name, [], [], noSpan$4, noSpan$4, noSpan$4);
+    const createElement$3 = name => {
+        return new compiler.Element(name, [], [], noSpan$3, noSpan$3, noSpan$3);
     };
-    const addAtrribute$4 = (node, name, value) => {
-        const attr = new compiler.Attribute(name, value, noSpan$4, noSpan$4, noSpan$4, undefined, undefined);
+    const addAtrribute$3 = (node, name, value) => {
+        const attr = new compiler.Attribute(name, value, noSpan$3, noSpan$3, noSpan$3, undefined, undefined);
         node.attrs.push(attr);
     };
     const getElementNode = (name, node) => {
@@ -1957,8 +1964,8 @@
         });
         return elementNode;
     };
-    const noSpan$4 = {};
-    const idGen$9 = new core.IDGenerator('wm_page');
+    const noSpan$3 = {};
+    const idGen$8 = new core.IDGenerator('wm_page');
     transpiler.register('wm-page', () => {
         return {
             template: (node) => {
@@ -1967,24 +1974,24 @@
                     pageContentNode = getElementNode('wm-page-content', getElementNode('wm-content', node));
                 }
                 if (pageContentNode) {
-                    const conditionalNode = createElement$4('ng-container');
-                    addAtrribute$4(conditionalNode, '*ngIf', 'compilePageContent');
+                    const conditionalNode = createElement$3('ng-container');
+                    addAtrribute$3(conditionalNode, '*ngIf', 'compilePageContent');
                     conditionalNode.children = conditionalNode.children.concat(pageContentNode.children);
                     conditionalNode.children.push(new compiler.Text('{{onPageContentReady()}}', null, undefined, undefined));
                     pageContentNode.children = [conditionalNode];
                     if (core.isMobileApp()) {
-                        const loader = createElement$4('div');
-                        addAtrribute$4(loader, 'wmPageContentLoader', '');
-                        addAtrribute$4(loader, '*ngIf', '!showPageContent');
+                        const loader = createElement$3('div');
+                        addAtrribute$3(loader, 'wmPageContentLoader', '');
+                        addAtrribute$3(loader, '*ngIf', '!showPageContent');
                         pageContentNode.children.push(loader);
                     }
                 }
             },
             pre: (attrs) => {
-                const counter = idGen$9.nextUid();
-                return `<${tagName$r} wmPage #${counter}="wmPage" data-role="pageContainer" [attr.aria-label]="${counter}.hint" ${transpiler.getAttrMarkup(attrs)}>`;
+                const counter = idGen$8.nextUid();
+                return `<${tagName$p} wmPage #${counter}="wmPage" data-role="pageContainer" [attr.aria-label]="${counter}.arialabel" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$r}>`
+            post: () => `</${tagName$p}>`
         };
     });
     var page_build = () => { };
@@ -1994,15 +2001,15 @@
         default: page_build
     });
 
-    const tagName$q = 'div';
-    const idGen$8 = new core.IDGenerator('wm_layout');
+    const tagName$o = 'div';
+    const idGen$7 = new core.IDGenerator('wm_layout');
     transpiler.register('wm-layout', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$8.nextUid();
-                return `<${tagName$q} wmLayout #${counter}="wmLayout" data-role="pageContainer" [attr.aria-label]="${counter}.hint || 'Main page content'" ${transpiler.getAttrMarkup(attrs)}>`;
+                const counter = idGen$7.nextUid();
+                return `<${tagName$o} wmLayout #${counter}="wmLayout" data-role="pageContainer" [attr.aria-label]="${counter}.arialabel" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$q}>`
+            post: () => `</${tagName$o}>`
         };
     });
     var layout_build = () => { };
@@ -2012,11 +2019,11 @@
         default: layout_build
     });
 
-    const tagName$p = 'router-outlet';
+    const tagName$n = 'router-outlet';
     transpiler.register('wm-router-outlet', () => {
         return {
-            pre: attrs => `<div wmRouterOutlet name="wmRouterOutlet" ${transpiler.getAttrMarkup(attrs)}><${tagName$p} (activate)="onActivate($event)">`,
-            post: () => `</${tagName$p}></div>`
+            pre: attrs => `<div wmRouterOutlet name="wmRouterOutlet" ${transpiler.getAttrMarkup(attrs)}><${tagName$n} (activate)="onActivate($event)">`,
+            post: () => `</${tagName$n}></div>`
         };
     });
     var routerOutlet_build = () => { };
@@ -2026,11 +2033,11 @@
         default: routerOutlet_build
     });
 
-    const tagName$o = 'nav';
+    const tagName$m = 'nav';
     transpiler.register('wm-pagination', () => {
         return {
-            pre: attrs => `<${tagName$o} wmPagination data-identifier="pagination" aria-label="Page navigation" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$o}>`
+            pre: attrs => `<${tagName$m} wmPagination data-identifier="pagination" aria-label="Page navigation" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$m}>`
         };
     });
     var pagination_build = () => { };
@@ -2040,11 +2047,11 @@
         default: pagination_build
     });
 
-    const tagName$n = 'main';
+    const tagName$l = 'main';
     transpiler.register('wm-content', () => {
         return {
-            pre: attrs => `<${tagName$n} wmContent data-role="page-content" role="main" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$n}>`
+            pre: attrs => `<${tagName$l} wmContent data-role="page-content" role="main" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$l}>`
         };
     });
     var content_build = () => { };
@@ -2054,15 +2061,15 @@
         default: content_build
     });
 
-    const tagName$m = 'footer';
-    const idGen$7 = new core.IDGenerator('wm_footer');
+    const tagName$k = 'footer';
+    const idGen$6 = new core.IDGenerator('wm_footer');
     transpiler.register('wm-footer', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$7.nextUid();
-                return `<${tagName$m} wmFooter #${counter}="wmFooter" partialContainer data-role="page-footer" role="contentinfo" [attr.aria-label]="${counter}.hint || 'Page footer'" ${transpiler.getAttrMarkup(attrs)}>`;
+                const counter = idGen$6.nextUid();
+                return `<${tagName$k} wmFooter #${counter}="wmFooter" partialContainer data-role="page-footer" role="contentinfo" [attr.aria-label]="${counter}.arialabel || 'Page footer'" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$m}>`
+            post: () => `</${tagName$k}>`
         };
     });
     var footer_build = () => { };
@@ -2072,15 +2079,15 @@
         default: footer_build
     });
 
-    const tagName$l = 'header';
-    const idGen$6 = new core.IDGenerator('wm_header');
+    const tagName$j = 'header';
+    const idGen$5 = new core.IDGenerator('wm_header');
     transpiler.register('wm-header', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$6.nextUid();
-                return `<${tagName$l} wmHeader #${counter}="wmHeader" partialContainer data-role="page-header" role="banner" [attr.aria-label]="${counter}.hint || 'Page header'" ${transpiler.getAttrMarkup(attrs)}>`;
+                const counter = idGen$5.nextUid();
+                return `<${tagName$j} wmHeader #${counter}="wmHeader" partialContainer data-role="page-header" role="banner" [attr.aria-label]="${counter}.arialabel || 'Page header'" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$l}>`
+            post: () => `</${tagName$j}>`
         };
     });
     var header_build = () => { };
@@ -2090,15 +2097,15 @@
         default: header_build
     });
 
-    const tagName$k = 'aside';
-    const idGen$5 = new core.IDGenerator('wm_left_panel');
+    const tagName$i = 'aside';
+    const idGen$4 = new core.IDGenerator('wm_left_panel');
     transpiler.register('wm-left-panel', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$5.nextUid();
-                return `<${tagName$k} wmLeftPanel #${counter}="wmLeftPanel" partialContainer data-role="page-left-panel" [attr.aria-label]="${counter}.hint || 'Left navigation panel'" wmSmoothscroll="${attrs.get('smoothscroll') || 'false'}" ${transpiler.getAttrMarkup(attrs)}>`;
+                const counter = idGen$4.nextUid();
+                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'}" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$k}>`
+            post: () => `</${tagName$i}>`
         };
     });
     var leftPanel_build = () => { };
@@ -2108,11 +2115,11 @@
         default: leftPanel_build
     });
 
-    const tagName$j = 'header';
+    const tagName$h = 'header';
     transpiler.register('wm-mobile-navbar', () => {
         return {
-            pre: attrs => `<${tagName$j} wmMobileNavbar ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$j}>`
+            pre: attrs => `<${tagName$h} wmMobileNavbar ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$h}>`
         };
     });
     var mobileNavbar_build = () => { };
@@ -2122,15 +2129,15 @@
         default: mobileNavbar_build
     });
 
-    const tagName$i = 'aside';
-    const idGen$4 = new core.IDGenerator('wm_right_panel');
+    const tagName$g = 'aside';
+    const idGen$3 = new core.IDGenerator('wm_right_panel');
     transpiler.register('wm-right-panel', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$4.nextUid();
-                return `<${tagName$i} wmRightPanel #${counter}="wmRightPanel" partialContainer data-role="page-right-panel" role="complementary" [attr.aria-label]="${counter}.hint || 'Right navigation panel'" ${transpiler.getAttrMarkup(attrs)}>`;
+                const counter = idGen$3.nextUid();
+                return `<${tagName$g} wmRightPanel #${counter}="wmRightPanel" partialContainer data-role="page-right-panel" role="complementary" [attr.aria-label]="${counter}.arialabel || 'Right navigation panel'" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$i}>`
+            post: () => `</${tagName$g}>`
         };
     });
     var rightPanel_build = () => { };
@@ -2140,22 +2147,22 @@
         default: rightPanel_build
     });
 
-    const tagName$h = 'div';
-    const createElement$3 = name => {
-        return new compiler.Element(name, [], [], noSpan$3, noSpan$3, noSpan$3);
+    const tagName$f = 'div';
+    const createElement$2 = name => {
+        return new compiler.Element(name, [], [], noSpan$2, noSpan$2, noSpan$2);
     };
-    const addAtrribute$3 = (node, name, value) => {
-        const attr = new compiler.Attribute(name, value, noSpan$3, noSpan$3, noSpan$3, undefined, undefined);
+    const addAtrribute$2 = (node, name, value) => {
+        const attr = new compiler.Attribute(name, value, noSpan$2, noSpan$2, noSpan$2, undefined, undefined);
         node.attrs.push(attr);
     };
-    const noSpan$3 = {};
+    const noSpan$2 = {};
     transpiler.register('wm-page-content', () => {
         return {
             template: (node) => {
                 for (let attr of node.attrs) {
                     if (attr.name === 'spa' && attr.value === 'true') {
-                        const conditionalNode = createElement$3('ng-container');
-                        addAtrribute$3(conditionalNode, '*ngIf', 'compilePageContent');
+                        const conditionalNode = createElement$2('ng-container');
+                        addAtrribute$2(conditionalNode, '*ngIf', 'compilePageContent');
                         conditionalNode.children = conditionalNode.children.concat(node.children);
                         conditionalNode.children.push(new compiler.Text('{{onPageContentReady()}}', null, undefined, undefined));
                         node.children = [conditionalNode];
@@ -2163,8 +2170,8 @@
                     }
                 }
             },
-            pre: attrs => `<${tagName$h} wmPageContent ${attrs.get('spa') && 'wmSpaPage' || ''} wmSmoothscroll="${attrs.get('smoothscroll') || 'false'}" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$h}>`
+            pre: attrs => `<${tagName$f} wmPageContent ${attrs.get('spa') && 'wmSpaPage' || ''} wmSmoothscroll="${attrs.get('smoothscroll') || 'false'}" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$f}>`
         };
     });
     var pageContent_build = () => { };
@@ -2174,11 +2181,11 @@
         default: pageContent_build
     });
 
-    const tagName$g = 'div';
+    const tagName$e = 'div';
     transpiler.register('wm-mobile-tabbar', () => {
         return {
-            pre: attrs => `<${tagName$g} wmMobileTabbar ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$g}>`
+            pre: attrs => `<${tagName$e} wmMobileTabbar ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$e}>`
         };
     });
     var tabBar_build = () => { };
@@ -2188,15 +2195,15 @@
         default: tabBar_build
     });
 
-    const tagName$f = 'section';
-    const idGen$3 = new core.IDGenerator('wm_top_nav');
+    const tagName$d = 'section';
+    const idGen$2 = new core.IDGenerator('wm_top_nav');
     transpiler.register('wm-top-nav', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$3.nextUid();
-                return `<${tagName$f} wmTopNav #${counter}="wmTopNav" partialContainer data-role="page-topnav" role="navigation" [attr.aria-label]="${counter}.hint || 'Second level navigation'" ${transpiler.getAttrMarkup(attrs)}>`;
+                const counter = idGen$2.nextUid();
+                return `<${tagName$d} wmTopNav #${counter}="wmTopNav" partialContainer data-role="page-topnav" role="navigation" [attr.aria-label]="${counter}.arialabel || 'Second level navigation'" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$f}>`
+            post: () => `</${tagName$d}>`
         };
     });
     var topNav_build = () => { };
@@ -2206,26 +2213,26 @@
         default: topNav_build
     });
 
-    const tagName$e = 'section';
-    const noSpan$2 = {};
-    const createElement$2 = name => {
-        return new compiler.Element(name, [], [], noSpan$2, noSpan$2, noSpan$2);
+    const tagName$c = 'section';
+    const noSpan$1 = {};
+    const createElement$1 = name => {
+        return new compiler.Element(name, [], [], noSpan$1, noSpan$1, noSpan$1);
     };
-    const addAtrribute$2 = (node, name, value) => {
-        const attr = new compiler.Attribute(name, value, noSpan$2, noSpan$2, noSpan$2, undefined, undefined);
+    const addAtrribute$1 = (node, name, value) => {
+        const attr = new compiler.Attribute(name, value, noSpan$1, noSpan$1, noSpan$1, undefined, undefined);
         node.attrs.push(attr);
     };
     transpiler.register('wm-partial', () => {
         return {
             template: (node) => {
-                const conditionalNode = createElement$2('ng-container');
-                addAtrribute$2(conditionalNode, '*ngIf', 'compileContent');
+                const conditionalNode = createElement$1('ng-container');
+                addAtrribute$1(conditionalNode, '*ngIf', 'compileContent');
                 conditionalNode.children = conditionalNode.children.concat(node.children);
                 node.children.length = 0;
                 node.children.push(conditionalNode);
             },
-            pre: attrs => `<${tagName$e} wmPartial data-role="partial" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$e}>`
+            pre: attrs => `<${tagName$c} wmPartial data-role="partial" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$c}>`
         };
     });
     var partial_build = () => { };
@@ -2235,11 +2242,11 @@
         default: partial_build
     });
 
-    const tagName$d = 'div';
+    const tagName$b = 'div';
     transpiler.register('wm-param', () => {
         return {
-            pre: attrs => `<${tagName$d} wmParam hidden ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$d}>`
+            pre: attrs => `<${tagName$b} wmParam hidden ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$b}>`
         };
     });
     var partialParam_build = () => { };
@@ -2249,11 +2256,11 @@
         default: partialParam_build
     });
 
-    const tagName$c = 'section';
+    const tagName$a = 'section';
     transpiler.register('wm-prefab', () => {
         return {
-            pre: attrs => `<${tagName$c} wmPrefab redrawable data-role="prefab" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$c}>`
+            pre: attrs => `<${tagName$a} wmPrefab redrawable data-role="prefab" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$a}>`
         };
     });
     var prefab_build = () => { };
@@ -2263,26 +2270,26 @@
         default: prefab_build
     });
 
-    const noSpan$1 = {};
-    const createElement$1 = name => {
-        return new compiler.Element(name, [], [], noSpan$1, noSpan$1, noSpan$1);
+    const noSpan = {};
+    const createElement = name => {
+        return new compiler.Element(name, [], [], noSpan, noSpan, noSpan);
     };
-    const addAtrribute$1 = (node, name, value) => {
-        const attr = new compiler.Attribute(name, value, noSpan$1, noSpan$1, noSpan$1, undefined, undefined);
+    const addAtrribute = (node, name, value) => {
+        const attr = new compiler.Attribute(name, value, noSpan, noSpan, noSpan, undefined, undefined);
         node.attrs.push(attr);
     };
-    const tagName$b = 'div';
+    const tagName$9 = 'div';
     transpiler.register('wm-prefab-container', () => {
         return {
             template: (node) => {
-                const conditionalNode = createElement$1('ng-container');
-                addAtrribute$1(conditionalNode, '*ngIf', 'compileContent');
+                const conditionalNode = createElement('ng-container');
+                addAtrribute(conditionalNode, '*ngIf', 'compileContent');
                 conditionalNode.children = conditionalNode.children.concat(node.children);
                 node.children.length = 0;
                 node.children.push(conditionalNode);
             },
-            pre: attrs => `<${tagName$b} wmPrefabContainer ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$b}>`
+            pre: attrs => `<${tagName$9} wmPrefabContainer ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$9}>`
         };
     });
     var prefabContainer_build = () => { };
@@ -2292,11 +2299,11 @@
         default: prefabContainer_build
     });
 
-    const tagName$a = 'div';
+    const tagName$8 = 'div';
     transpiler.register('wm-table-action', () => {
         return {
-            pre: attrs => `<${tagName$a} name="${attrs.get('name') || attrs.get('key')}" wmTableAction ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$a}>`
+            pre: attrs => `<${tagName$8} name="${attrs.get('name') || attrs.get('key')}" wmTableAction ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$8}>`
         };
     });
     var tableAction_build = () => { };
@@ -2306,11 +2313,11 @@
         default: tableAction_build
     });
 
-    const tagName$9 = 'div';
+    const tagName$7 = 'div';
     transpiler.register('wm-table-column-group', () => {
         return {
-            pre: attrs => `<${tagName$9} wmTableColumnGroup ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$9}>`
+            pre: attrs => `<${tagName$7} wmTableColumnGroup ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$7}>`
         };
     });
     var tableColumnGroup_build = () => { };
@@ -2320,8 +2327,8 @@
         default: tableColumnGroup_build
     });
 
-    const tagName$8 = 'div';
-    const idGen$2 = new core.IDGenerator('data_table_form_');
+    const tagName$6 = 'div';
+    const idGen$1 = new core.IDGenerator('data_table_form_');
     const formWidgets = new Set([
         'wm-text',
         'wm-textarea',
@@ -2433,7 +2440,7 @@
         let wmFormWidget = '';
         if (widget === core.FormWidgetType.UPLOAD) {
             options.uploadProps = {
-                formName: idGen$2.nextUid(),
+                formName: idGen$1.nextUid(),
                 name: fieldName
             };
             options.counter = pCounter;
@@ -2573,7 +2580,7 @@
                         customExprTmpl = `${customExpr}<div data-col-identifier="${attrs.get('binding')}" title="${formatExprTmpl}">${formatExprTmpl}`;
                     }
                 }
-                return `<${tagName$8} wmTableColumn ${transpiler.getAttrMarkup(attrs)} ${parentForm}>
+                return `<${tagName$6} wmTableColumn ${transpiler.getAttrMarkup(attrs)} ${parentForm}>
                     ${rowFilterTmpl}
                     ${inlineEditTmpl}
                     ${inlineNewEditTmpl}
@@ -2584,7 +2591,7 @@
                 if (shared.get('customExpression')) {
                     customExprTmpl = `</div></ng-template>`;
                 }
-                return `${customExprTmpl}</${tagName$8}>`;
+                return `${customExprTmpl}</${tagName$6}>`;
             },
             imports: (attrs) => {
                 const editWidgetType = attrs.get('edit-widget-type');
@@ -2600,7 +2607,7 @@
         default: tableColumn_build
     });
 
-    const tagName$7 = 'div';
+    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';
@@ -2616,7 +2623,7 @@
     transpiler.register('wm-table-row', () => {
         return {
             pre: (attrs) => {
-                return `<${tagName$7} wmTableRow ${transpiler.getAttrMarkup(attrs)}>
+                return `<${tagName$5} wmTableRow ${transpiler.getAttrMarkup(attrs)}>
                     ${getRowExpansionActionTmpl(attrs)}
                     <ng-template #rowExpansionTmpl let-row="row" let-rowDef="rowDef" let-containerLoad="containerLoad">
                         <div wmContainer partialContainer content.bind="rowDef.content" load.event="containerLoad(widget)"
@@ -2624,7 +2631,7 @@
                          <div *ngFor="let param of rowDef.partialParams | keyvalue" wmParam hidden
                             [name]="param.key" [value]="param.value"></div>`;
             },
-            post: () => `</div></ng-template></${tagName$7}>`
+            post: () => `</div></ng-template></${tagName$5}>`
         };
     });
     var tableRow_build = () => { };
@@ -2634,7 +2641,7 @@
         default: tableRow_build
     });
 
-    const tagName$6 = 'div';
+    const tagName$4 = 'div';
     const getSaveCancelTemplate = () => {
         return `<button type="button" aria-label="Save edit icon" class="save row-action-button btn app-button btn-transparent save-edit-row-button hidden" title="Save">
                 <i class="wi wi-done" aria-hidden="true"></i>
@@ -2666,9 +2673,9 @@
     };
     transpiler.register('wm-table-row-action', () => {
         return {
-            pre: attrs => `<${tagName$6} wmTableRowAction ${transpiler.getAttrMarkup(attrs)}>
+            pre: attrs => `<${tagName$4} wmTableRowAction ${transpiler.getAttrMarkup(attrs)}>
                         ${getRowActionTmpl(attrs)}`,
-            post: () => `</${tagName$6}>`
+            post: () => `</${tagName$4}>`
         };
     });
     var tableRowAction_build = () => { };
@@ -2678,9 +2685,9 @@
         default: tableRowAction_build
     });
 
-    const tagName$5 = 'div';
+    const tagName$3 = 'div';
     const dataSetKey = 'dataset';
-    const idGen$1 = new core.IDGenerator('table_');
+    const idGen = new core.IDGenerator('table_');
     let columnIndex = 0;
     /**
      * This method assigns index to the table-column and column-groups in order to the maintain the columns in the same order
@@ -2740,14 +2747,14 @@
                 core.updateTemplateAttrs(node, boundExpr, widgetNameAttr.value, '', 'row');
             },
             pre: (attrs, shared) => {
-                const counter = idGen$1.nextUid();
+                const counter = idGen.nextUid();
                 shared.set('counter', counter);
                 attrs.set('isdynamictable', shared.get('isdynamictable'));
                 attrs.set('isrowexpansionenabled', shared.get('isrowexpansionenabled'));
                 attrs.set('table_reference', counter);
-                return `<${tagName$5} wmTable="${counter}" wmTableFilterSort wmTableCUD #${counter} data-identifier="table" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$3} wmTable="${counter}" wmTableFilterSort wmTableCUD #${counter} data-identifier="table" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$5}>`,
+            post: () => `</${tagName$3}>`,
             provide: (attrs, shared) => {
                 const provider = new Map();
                 provider.set('table_reference', shared.get('counter'));
@@ -2766,11 +2773,11 @@
         default: table_build
     });
 
-    const tagName$4 = 'div';
+    const tagName$2 = 'div';
     transpiler.register('wm-video', () => {
         return {
-            pre: attrs => `<${tagName$4} wmVideo ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$4}>`
+            pre: attrs => `<${tagName$2} wmVideo ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$2}>`
         };
     });
     var video_build = () => { };
@@ -2780,7 +2787,7 @@
         default: video_build
     });
 
-    const tagName$3 = 'div';
+    const tagName$1 = 'div';
     const SPACING_KEY = 'parentLinearLayout.spacing';
     transpiler.register('wm-linearlayout', () => {
         return {
@@ -2788,9 +2795,9 @@
             pre: (attrs, shared, provider) => {
                 let spacing = attrs.get('spacing');
                 attrs.set('spacing', (!spacing || spacing === '0') && provider ? provider.get(SPACING_KEY) : spacing);
-                return `<${tagName$3} wmLinearLayout ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$1} wmLinearLayout ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$3}>`,
+            post: () => `</${tagName$1}>`,
             provide: (attrs, shared) => {
                 const provider = new Map();
                 provider.set(SPACING_KEY, attrs.get('spacing'));
@@ -2805,11 +2812,11 @@
         default: linearLayout_build
     });
 
-    const tagName$2 = 'div';
+    const tagName = 'div';
     transpiler.register('wm-linearlayoutitem', () => {
         return {
-            pre: attrs => `<${tagName$2} wmLinearLayoutItem ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$2}>`
+            pre: attrs => `<${tagName} wmLinearLayoutItem ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName}>`
         };
     });
     var linearLayoutItem_build = () => { };
@@ -2819,49 +2826,6 @@
         default: linearLayoutItem_build
     });
 
-    const tagName$1 = 'div';
-    const idGen = new core.IDGenerator('wm_custom_widget');
-    transpiler.register('wm-custom-widget', () => {
-        return {
-            pre: (attrs) => {
-                const counter = idGen.nextUid();
-                return `<${tagName$1} wmWidgetContainer customWidgetContainer #${counter}="wmWidgetContainer" ${transpiler.getAttrMarkup(attrs)}>`;
-            },
-            post: () => `</${tagName$1}>`
-        };
-    });
-    var customWidgetContainer_build = () => { };
-
-    var customWidgetContainer_build$1 = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        default: customWidgetContainer_build
-    });
-
-    const tagName = 'section';
-    const noSpan = {};
-    const createElement = name => {
-        return new compiler.Element(name, [], [], noSpan, noSpan, noSpan);
-    };
-    transpiler.register('wm-custom-widget-container', () => {
-        return {
-            template: (node) => {
-                const conditionalNode = createElement('ng-container');
-                // addAtrribute(conditionalNode, '*ngIf', 'compileContent');
-                conditionalNode.children = conditionalNode.children.concat(node.children);
-                node.children.length = 0;
-                node.children.push(conditionalNode);
-            },
-            pre: attrs => `<${tagName} wmCustomWidget data-role="widget" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName}>`
-        };
-    });
-    var customWidgetWrapper_build = () => { };
-
-    var customWidgetWrapper_build$1 = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        default: customWidgetWrapper_build
-    });
-
     const initComponentsBuildTask = () => { };
 
     exports.accordionBuild = accordion_build$1;
@@ -2891,8 +2855,6 @@
     exports.containerBuild = container_build$1;
     exports.contentBuild = content_build$1;
     exports.currencyBuild = currency_build$1;
-    exports.customWidgetBuild = customWidgetContainer_build$1;
-    exports.customWidgetWrapperBuild = customWidgetWrapper_build$1;
     exports.dateBuild = date_build$1;
     exports.dateTimeBuild = dateTime_build$1;
     exports.dlgBuild = dialog_build$1;