@wavemaker/app-ng-runtime 12.0.0-next.45002 → 12.0.0-next.45005

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@wm/transpiler'), require('@wm/core'), require('@angular/compiler')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@wm/transpiler', '@wm/core', '@angular/compiler'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.buildTask = {}), global.wm.transpiler, global.wm.core, global.ng.compiler));
-})(this, (function (exports, transpiler, core, compiler) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@wm/transpiler'), require('@wm/core'), require('@angular/compiler'), require('lodash-es')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@wm/transpiler', '@wm/core', '@angular/compiler', 'lodash-es'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.buildTask = {}), global.wm.transpiler, global.wm.core, global.ng.compiler, global._));
+})(this, (function (exports, transpiler, core, compiler, lodashEs) { 'use strict';
 
     const carouselTagName = 'carousel';
     const dataSetKey$5 = 'dataset';
@@ -63,8 +63,10 @@
             pre: (attrs, shared, parentCarousel) => {
                 const carouselRef = parentCarousel.get('carousel_ref');
                 return `<div *ngIf="!${carouselRef}.fieldDefs">{{${carouselRef}.nodatamessage}}</div>
-                    <${carouselContentTagName} wmCarouselTemplate  ${transpiler.getAttrMarkup(attrs)} *ngFor="let item of ${carouselRef}.fieldDefs; let i = index;">
-                        <ng-container [ngTemplateOutlet]="carouselTempRef${counter$1}" [ngTemplateOutletContext]="{item:item, index:i}"></ng-container>
+                    <${carouselContentTagName} wmCarouselTemplate #carouselTemplateRef="carouselTemplateRef" ${transpiler.getAttrMarkup(attrs)} *ngFor="let item of ${carouselRef}.fieldDefs; let i = index;">
+                        <ng-container [ngTemplateOutlet]="carouselTempRef${counter$1}"
+                            [ngTemplateOutletContext]="{item:item, index:i}"
+                            [ngTemplateOutletInjector]="${carouselRef}.createCustomInjector('carousel_item_' + carouselTemplateRef.trackId, {item:item, index:i})"></ng-container>
                     </${carouselContentTagName}>
                     <ng-template #carouselTempRef${counter$1++} let-item="item" let-index="index">`;
             },
@@ -78,11 +80,11 @@
         default: carouselTemplate_build
     });
 
-    const tagName$1F = 'div';
+    const tagName$1E = 'div';
     transpiler.register('wm-login', () => {
         return {
-            pre: attrs => `<${tagName$1F} wmLogin ${transpiler.getAttrMarkup(attrs)} eventsource.bind="Actions.loginAction">`,
-            post: () => `</${tagName$1F}>`,
+            pre: attrs => `<${tagName$1E} wmLogin ${transpiler.getAttrMarkup(attrs)} eventsource.bind="Actions.loginAction">`,
+            post: () => `</${tagName$1E}>`,
             provide: () => {
                 const provider = new Map();
                 provider.set('isLogin', true);
@@ -97,11 +99,11 @@
         default: login_build
     });
 
-    const tagName$1E = 'marquee';
+    const tagName$1D = 'marquee';
     transpiler.register('wm-marquee', () => {
         return {
-            pre: attrs => `<${tagName$1E} onmouseover="this.stop();" onmouseout="this.start();" wmMarquee role="marquee" aria-live="off" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1E}>`
+            pre: attrs => `<${tagName$1D} onmouseover="this.stop();" onmouseout="this.start();" wmMarquee role="marquee" aria-live="off" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1D}>`
         };
     });
     var marquee_build = () => { };
@@ -111,15 +113,15 @@
         default: marquee_build
     });
 
-    const tagName$1D = 'a';
+    const tagName$1C = 'a';
     const idGen$s = new core.IDGenerator('wm_anchor');
     transpiler.register('wm-anchor', () => {
         return {
             pre: (attrs) => {
                 const counter = idGen$s.nextUid();
-                return `<${tagName$1D} wmAnchor #${counter}="wmAnchor" role="link" data-identifier="anchor" [attr.aria-label]="${counter}.hint || ${counter}.caption" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$1C} wmAnchor #${counter}="wmAnchor" role="link" data-identifier="anchor" [attr.aria-label]="${counter}.hint || ${counter}.caption" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$1D}>`
+            post: () => `</${tagName$1C}>`
         };
     });
     var anchor_build = () => { };
@@ -129,11 +131,11 @@
         default: anchor_build
     });
 
-    const tagName$1C = 'div';
+    const tagName$1B = 'div';
     transpiler.register('wm-audio', () => {
         return {
-            pre: attrs => `<${tagName$1C} wmAudio ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1C}>`
+            pre: attrs => `<${tagName$1B} wmAudio ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1B}>`
         };
     });
     var audio_build = () => { };
@@ -143,15 +145,15 @@
         default: audio_build
     });
 
-    const tagName$1B = 'div';
+    const tagName$1A = 'div';
     const idGen$r = new core.IDGenerator('wm_html');
     transpiler.register('wm-html', () => {
         return {
             pre: (attrs) => {
                 const counter = idGen$r.nextUid();
-                return `<${tagName$1B} wmHtml #${counter}="wmHtml" [attr.aria-label]="${counter}.hint || 'HTML content'" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$1A} wmHtml #${counter}="wmHtml" [attr.aria-label]="${counter}.hint || 'HTML content'" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$1B}>`
+            post: () => `</${tagName$1A}>`
         };
     });
     var html_build = () => { };
@@ -161,11 +163,11 @@
         default: html_build
     });
 
-    const tagName$1A = 'span';
+    const tagName$1z = 'span';
     transpiler.register('wm-icon', () => {
         return {
-            pre: attrs => `<${tagName$1A} wmIcon aria-hidden="true" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1A}>`
+            pre: attrs => `<${tagName$1z} wmIcon aria-hidden="true" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1z}>`
         };
     });
     var icon_build = () => { };
@@ -175,11 +177,11 @@
         default: icon_build
     });
 
-    const tagName$1z = 'div';
+    const tagName$1y = 'div';
     transpiler.register('wm-iframe', () => {
         return {
-            pre: attrs => `<${tagName$1z} wmIframe ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1z}>`
+            pre: attrs => `<${tagName$1y} wmIframe ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1y}>`
         };
     });
     var iframe_build = () => { };
@@ -189,7 +191,7 @@
         default: iframe_build
     });
 
-    let tagName$1y = 'p';
+    let tagName$1x = 'p';
     const idGen$q = new core.IDGenerator('wm_label');
     transpiler.register('wm-label', () => {
         return {
@@ -199,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$1y = attrs.get('type');
+                    tagName$1x = attrs.get('type');
                 }
                 else {
-                    tagName$1y = 'label';
+                    tagName$1x = 'label';
                 }
                 const counter = idGen$q.nextUid();
-                return `<${tagName$1y} wmLabel #${counter}="wmLabel" [attr.aria-label]="${counter}.hint" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$1x} wmLabel #${counter}="wmLabel" [attr.aria-label]="${counter}.hint" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$1y}>`
+            post: () => `</${tagName$1x}>`
         };
     });
     var label_build = () => { };
@@ -217,13 +219,13 @@
         default: label_build
     });
 
-    const tagName$1x = 'img';
+    const tagName$1w = 'img';
     const idGen$p = new core.IDGenerator('wm_picture');
     transpiler.register('wm-picture', () => {
         return {
             pre: (attrs) => {
                 const counter = idGen$p.nextUid();
-                return `<${tagName$1x} wmPicture #${counter}="wmPicture" alt="image" wmImageCache="${attrs.get('offline') || 'true'}" [attr.aria-label]="${counter}.hint || 'Image'" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$1w} wmPicture #${counter}="wmPicture" alt="image" wmImageCache="${attrs.get('offline') || 'true'}" [attr.aria-label]="${counter}.hint || 'Image'" ${transpiler.getAttrMarkup(attrs)}>`;
             }
         };
     });
@@ -234,15 +236,15 @@
         default: picture_build
     });
 
-    const tagName$1w = 'div';
+    const tagName$1v = 'div';
     const idGen$o = new core.IDGenerator('wm_spinner');
     transpiler.register('wm-spinner', () => {
         return {
             pre: (attrs) => {
                 const counter = idGen$o.nextUid();
-                return `<${tagName$1w} wmSpinner #${counter}="wmSpinner" role="alert" [attr.aria-label]="${counter}.hint || 'Loading...'" aria-live="assertive" aria-busy="true" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$1v} wmSpinner #${counter}="wmSpinner" role="alert" [attr.aria-label]="${counter}.hint || 'Loading...'" aria-live="assertive" aria-busy="true" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$1w}>`
+            post: () => `</${tagName$1v}>`
         };
     });
     var spinner_build = () => { };
@@ -252,7 +254,7 @@
         default: spinner_build
     });
 
-    const tagName$1v = 'div';
+    const tagName$1u = 'div';
     const getAttr = (node, attrName) => node.attrs.find(attr => attr.name === attrName);
     const getAttrValue = (node, attrName) => {
         const match = getAttr(node, attrName);
@@ -280,8 +282,8 @@
                     }
                 }
             },
-            pre: attrs => `<${tagName$1v} wmProgressBar ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1v}>`
+            pre: attrs => `<${tagName$1u} wmProgressBar ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1u}>`
         };
     });
     var progressBar_build = () => { };
@@ -291,11 +293,11 @@
         default: progressBar_build
     });
 
-    const tagName$1u = 'div';
+    const tagName$1t = 'div';
     transpiler.register('wm-progress-circle', () => {
         return {
-            pre: attrs => `<${tagName$1u} wmProgressCircle ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1u}>`
+            pre: attrs => `<${tagName$1t} wmProgressCircle ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1t}>`
         };
     });
     var progressCircle_build = () => { };
@@ -305,15 +307,15 @@
         default: progressCircle_build
     });
 
-    const tagName$1t = 'div';
+    const tagName$1s = 'div';
     const idGen$n = new core.IDGenerator('wm_richtexteditor');
     transpiler.register('wm-richtexteditor', () => {
         return {
             pre: (attrs) => {
                 const counter = idGen$n.nextUid();
-                return `<${tagName$1t} wmRichTextEditor #${counter}="wmRichTextEditor" role="textbox" [attr.aria-label]="${counter}.hint || 'Richtext editor'" ${transpiler.getFormMarkupAttr(attrs)}>`;
+                return `<${tagName$1s} wmRichTextEditor #${counter}="wmRichTextEditor" role="textbox" [attr.aria-label]="${counter}.hint || 'Richtext editor'" ${transpiler.getFormMarkupAttr(attrs)}>`;
             },
-            post: () => `</${tagName$1t}>`
+            post: () => `</${tagName$1s}>`
         };
     });
     var richTextEditor_build = () => { };
@@ -323,11 +325,11 @@
         default: richTextEditor_build
     });
 
-    const tagName$1s = 'div';
+    const tagName$1r = 'div';
     transpiler.register('wm-search', () => {
         return {
-            pre: attrs => `<${tagName$1s} wmSearch ${transpiler.getFormMarkupAttr(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$1s}>`
+            pre: attrs => `<${tagName$1r} wmSearch ${transpiler.getFormMarkupAttr(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$1r}>`
         };
     });
     var search_build = () => { };
@@ -337,11 +339,11 @@
         default: search_build
     });
 
-    const tagName$1r = 'ul';
+    const tagName$1q = 'ul';
     transpiler.register('wm-tree', () => {
         return {
-            pre: attrs => `<${tagName$1r} wmTree class="ztree" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1r}>`
+            pre: attrs => `<${tagName$1q} wmTree class="ztree" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1q}>`
         };
     });
 
@@ -349,11 +351,11 @@
         __proto__: null
     });
 
-    const tagName$1q = 'div';
+    const tagName$1p = 'div';
     transpiler.register('wm-card', () => {
         return {
-            pre: attrs => `<${tagName$1q} wmCard ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1q}>`
+            pre: attrs => `<${tagName$1p} wmCard ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1p}>`
         };
     });
     var card_build = () => { };
@@ -363,11 +365,11 @@
         default: card_build
     });
 
-    const tagName$1p = 'div';
+    const tagName$1o = 'div';
     transpiler.register('wm-card-content', () => {
         return {
-            pre: attrs => `<${tagName$1p} wmCardContent partialContainer ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1p}>`
+            pre: attrs => `<${tagName$1o} wmCardContent partialContainer ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1o}>`
         };
     });
     var cardContent_build = () => { };
@@ -377,11 +379,11 @@
         default: cardContent_build
     });
 
-    const tagName$1o = 'div';
+    const tagName$1n = 'div';
     transpiler.register('wm-card-actions', () => {
         return {
-            pre: attrs => `<${tagName$1o} wmCardActions ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1o}>`
+            pre: attrs => `<${tagName$1n} wmCardActions ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1n}>`
         };
     });
     var cardActions_build = () => { };
@@ -391,11 +393,11 @@
         default: cardActions_build
     });
 
-    const tagName$1n = 'div';
+    const tagName$1m = 'div';
     transpiler.register('wm-card-footer', () => {
         return {
-            pre: attrs => `<${tagName$1n} wmCardFooter ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1n}>`
+            pre: attrs => `<${tagName$1m} wmCardFooter ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1m}>`
         };
     });
     var cardFooter_build = () => { };
@@ -405,11 +407,11 @@
         default: cardFooter_build
     });
 
-    const tagName$1m = 'div';
+    const tagName$1l = 'div';
     transpiler.register('wm-chart', () => {
         return {
-            pre: attrs => `<${tagName$1m} wmChart redrawable aria-label="${attrs.get('type')} Chart" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1m}>`
+            pre: attrs => `<${tagName$1l} wmChart redrawable aria-label="${attrs.get('type')} Chart" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1l}>`
         };
     });
     var chart_build = () => { };
@@ -419,7 +421,7 @@
         default: chart_build
     });
 
-    const tagName$1l = 'div';
+    const tagName$1k = 'div';
     const dataSetKey$4 = 'dataset';
     const idGen$m = new core.IDGenerator('wm_accordion_ref_');
     const isDynamicAccordion = node => node.attrs.find(attr => attr.name === 'type' && attr.value === 'dynamic');
@@ -429,9 +431,9 @@
                 // generating unique Id for the accordion
                 const counter = idGen$m.nextUid();
                 shared.set('accordion_ref', counter);
-                return `<${tagName$1l} wmAccordion #${counter}="wmAccordion" role="tablist" aria-multiselectable="true" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$1k} wmAccordion #${counter}="wmAccordion" role="tablist" aria-multiselectable="true" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$1l}>`,
+            post: () => `</${tagName$1k}>`,
             template: (node, shared) => {
                 // check if the accordion is dynamic
                 if (isDynamicAccordion(node)) {
@@ -462,15 +464,15 @@
         default: accordion_build
     });
 
-    const tagName$1k = 'div';
+    const tagName$1j = 'div';
     const idGen$l = new core.IDGenerator('wm_accordionpane');
     transpiler.register('wm-accordionpane', () => {
         return {
             pre: (attrs) => {
                 const counter = idGen$l.nextUid();
-                return `<${tagName$1k} #${counter}="wmAccordionPane" [attr.aria-expanded]="${counter}.isActive" wmAccordionPane partialContainer wm-navigable-element="true" role="tab" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$1j} #${counter}="wmAccordionPane" [attr.aria-expanded]="${counter}.isActive" wmAccordionPane partialContainer wm-navigable-element="true" role="tab" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$1k}>`
+            post: () => `</${tagName$1j}>`
         };
     });
     var accordionPane_build = () => { };
@@ -480,11 +482,11 @@
         default: accordionPane_build
     });
 
-    const tagName$1j = 'div';
+    const tagName$1i = 'div';
     transpiler.register('wm-container', () => {
         return {
-            pre: attrs => `<${tagName$1j} wmContainer partialContainer wmSmoothscroll="${attrs.get('smoothscroll') || 'false'}" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1j}>`
+            pre: attrs => `<${tagName$1i} wmContainer partialContainer wmSmoothscroll="${attrs.get('smoothscroll') || 'false'}" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1i}>`
         };
     });
     var container_build = () => { };
@@ -494,11 +496,11 @@
         default: container_build
     });
 
-    const tagName$1i = 'div';
+    const tagName$1h = 'div';
     transpiler.register('wm-gridcolumn', () => {
         return {
-            pre: attrs => `<${tagName$1i} wmLayoutGridColumn ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1i}>`
+            pre: attrs => `<${tagName$1h} wmLayoutGridColumn ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1h}>`
         };
     });
     var layoutGridColumn_build = () => { };
@@ -508,11 +510,11 @@
         default: layoutGridColumn_build
     });
 
-    const tagName$1h = 'div';
+    const tagName$1g = 'div';
     transpiler.register('wm-gridrow', () => {
         return {
-            pre: attrs => `<${tagName$1h} wmLayoutGridRow ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1h}>`
+            pre: attrs => `<${tagName$1g} wmLayoutGridRow ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1g}>`
         };
     });
     var layoutGridRow_build = () => { };
@@ -522,11 +524,11 @@
         default: layoutGridRow_build
     });
 
-    const tagName$1g = 'div';
+    const tagName$1f = 'div';
     transpiler.register('wm-layoutgrid', () => {
         return {
-            pre: attrs => `<${tagName$1g} wmLayoutGrid ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1g}>`
+            pre: attrs => `<${tagName$1f} wmLayoutGrid ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1f}>`
         };
     });
     var layoutGrid_build = () => { };
@@ -536,21 +538,21 @@
         default: layoutGrid_build
     });
 
-    const tagName$1f = 'div';
+    const tagName$1e = 'div';
     const idGen$k = new core.IDGenerator('wm_panel');
     transpiler.register('wm-panel', () => {
         return {
             pre: (attrs) => {
                 const counter = idGen$k.nextUid();
-                return `<${tagName$1f} wmPanel #${counter}="wmPanel" partialContainer wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$1e} wmPanel #${counter}="wmPanel" partialContainer wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$1f}>`
+            post: () => `</${tagName$1e}>`
         };
     });
     transpiler.register('wm-panel-footer', () => {
         return {
-            pre: attrs => `<${tagName$1f} wmPanelFooter ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1f}>`
+            pre: attrs => `<${tagName$1e} wmPanelFooter ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1e}>`
         };
     });
     var panel_build = () => { };
@@ -560,11 +562,11 @@
         default: panel_build
     });
 
-    const tagName$1e = 'div';
+    const tagName$1d = 'div';
     transpiler.register('wm-segmented-control', () => {
         return {
-            pre: attrs => `<${tagName$1e} wmSegmentedControl ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1e}>`
+            pre: attrs => `<${tagName$1d} wmSegmentedControl ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1d}>`
         };
     });
     var segmentedControl_build = () => { };
@@ -574,11 +576,11 @@
         default: segmentedControl_build
     });
 
-    const tagName$1d = 'li';
+    const tagName$1c = 'li';
     transpiler.register('wm-segment-content', () => {
         return {
-            pre: attrs => `<${tagName$1d} wmSegmentContent partialContainer wmSmoothscroll=${attrs.get('smoothscroll') || 'false'} wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1d}>`
+            pre: attrs => `<${tagName$1c} wmSegmentContent partialContainer wmSmoothscroll=${attrs.get('smoothscroll') || 'false'} wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1c}>`
         };
     });
     var segmentContent_build = () => { };
@@ -598,8 +600,10 @@
                 const widgetRef = (parentAccordion && parentAccordion.get('accordion_ref')) || (parentTab && parentTab.get('tabs_ref'));
                 if (widgetRef) {
                     return `<div *ngIf="${widgetRef}.fieldDefs && !${widgetRef}.fieldDefs.length">{{${widgetRef}.nodatamessage}}</div>
-                    <${dynamicTemplateTagName} wmRepeatTemplate  ${transpiler.getAttrMarkup(attrs)} *ngFor="let item of ${widgetRef}.fieldDefs; let i = index;">
-                        <ng-container [ngTemplateOutlet]="widgetRef${counter}" [ngTemplateOutletContext]="{item:item, index:i}"></ng-container>
+                    <${dynamicTemplateTagName} wmRepeatTemplate #repeatItemRef="repeatItemRef" ${transpiler.getAttrMarkup(attrs)} *ngFor="let item of ${widgetRef}.fieldDefs; let i = index;">
+                        <ng-container [ngTemplateOutlet]="widgetRef${counter}"
+                            [ngTemplateOutletContext]="{item:item, index:i}"
+                            [ngTemplateOutletInjector]="${widgetRef}.createCustomInjector('dynamic_pane_' + repeatItemRef.trackId, {item:item, index:i})"></ng-container>
                     </${dynamicTemplateTagName}>
                     <ng-template #widgetRef${counter++} let-item="item" let-index="index">`;
                 }
@@ -614,7 +618,7 @@
         default: repeatTemplate_build
     });
 
-    const tagName$1c = 'div';
+    const tagName$1b = 'div';
     const dataSetKey$3 = 'dataset';
     const idGen$j = new core.IDGenerator('wm_tabs_ref_');
     const isDynamicTabs = node => node.attrs.find(attr => attr.name === 'type' && attr.value === 'dynamic');
@@ -624,9 +628,9 @@
                 // generating unique Id for the tabs
                 const counter = idGen$j.nextUid();
                 shared.set('tabs_ref', counter);
-                return `<${tagName$1c} wmTabs #${counter}="wmTabs" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$1b} wmTabs #${counter}="wmTabs" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$1c}>`,
+            post: () => `</${tagName$1b}>`,
             template: (node, shared) => {
                 // check if the tab widget is dynamic
                 if (isDynamicTabs(node)) {
@@ -657,11 +661,11 @@
         default: tabs_build
     });
 
-    const tagName$1b = 'div';
+    const tagName$1a = 'div';
     transpiler.register('wm-tabpane', () => {
         return {
-            pre: attrs => `<${tagName$1b} wmTabPane  partialContainer ${transpiler.getAttrMarkup(attrs)} wm-navigable-element="true" role="tabpanel">`,
-            post: () => `</${tagName$1b}>`
+            pre: attrs => `<${tagName$1a} wmTabPane  partialContainer ${transpiler.getAttrMarkup(attrs)} wm-navigable-element="true" role="tabpanel">`,
+            post: () => `</${tagName$1a}>`
         };
     });
     var tabPane_build = () => { };
@@ -671,11 +675,11 @@
         default: tabPane_build
     });
 
-    const tagName$1a = 'div';
+    const tagName$19 = 'div';
     transpiler.register('wm-tile', () => {
         return {
-            pre: attrs => `<${tagName$1a} wmTile aria-describedby="Tile" wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1a}>`
+            pre: attrs => `<${tagName$19} wmTile aria-describedby="Tile" wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$19}>`
         };
     });
     var tile_build = () => { };
@@ -685,11 +689,11 @@
         default: tile_build
     });
 
-    const tagName$19 = 'div';
+    const tagName$18 = 'div';
     transpiler.register('wm-wizard', () => {
         return {
-            pre: attrs => `<${tagName$19} wmWizard role="tablist" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$19}>`
+            pre: attrs => `<${tagName$18} wmWizard role="tablist" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$18}>`
         };
     });
     var wizard_build = () => { };
@@ -699,16 +703,16 @@
         default: wizard_build
     });
 
-    const tagName$18 = 'form';
+    const tagName$17 = 'form';
     const idGen$i = new core.IDGenerator('wizard_step_id_');
     transpiler.register('wm-wizardstep', () => {
         return {
             pre: attrs => {
                 const counter = idGen$i.nextUid();
-                return `<${tagName$18} wmWizardStep #${counter}="wmWizardStep" ${transpiler.getAttrMarkup(attrs)}>
+                return `<${tagName$17} wmWizardStep #${counter}="wmWizardStep" ${transpiler.getAttrMarkup(attrs)}>
                        <ng-template [ngIf]="${counter}.isInitialized">`;
             },
-            post: () => `</ng-template></${tagName$18}>`
+            post: () => `</ng-template></${tagName$17}>`
         };
     });
     var wizardStep_build = () => { };
@@ -718,15 +722,15 @@
         default: wizardStep_build
     });
 
-    const tagName$17 = 'button';
+    const tagName$16 = 'button';
     const idGen$h = new core.IDGenerator('wm_barcodescanner');
     transpiler.register('wm-barcodescanner', () => {
         return {
             pre: (attrs) => {
                 const counter = idGen$h.nextUid();
-                return `<${tagName$17} wmBarcodescanner #${counter}="wmBarcodescanner" [attr.aria-label]="${counter}.hint || 'Barcode scanner'"  ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$16} wmBarcodescanner #${counter}="wmBarcodescanner" [attr.aria-label]="${counter}.hint || 'Barcode scanner'"  ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$17}>`
+            post: () => `</${tagName$16}>`
         };
     });
     var barcodeScanner_build = () => { };
@@ -736,15 +740,15 @@
         default: barcodeScanner_build
     });
 
-    const tagName$16 = 'button';
+    const tagName$15 = 'button';
     const idGen$g = new core.IDGenerator('wm_camera');
     transpiler.register('wm-camera', () => {
         return {
             pre: (attrs) => {
                 const counter = idGen$g.nextUid();
-                return `<${tagName$16} type='button' wmCamera #${counter}="wmCamera" [attr.aria-label]="${counter}.hint || 'Camera'"  ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$15} type='button' wmCamera #${counter}="wmCamera" [attr.aria-label]="${counter}.hint || 'Camera'"  ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$16}>`
+            post: () => `</${tagName$15}>`
         };
     });
     var camera_build = () => { };
@@ -754,11 +758,11 @@
         default: camera_build
     });
 
-    const tagName$15 = 'div';
+    const tagName$14 = 'div';
     transpiler.register('wm-alertdialog', () => {
         return {
-            pre: attrs => `<${tagName$15} wmAlertDialog role="alertdialog" wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$15}>`
+            pre: attrs => `<${tagName$14} wmAlertDialog role="alertdialog" wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$14}>`
         };
     });
     var alertDialog_build = () => { };
@@ -768,11 +772,11 @@
         default: alertDialog_build
     });
 
-    const tagName$14 = 'div';
+    const tagName$13 = 'div';
     transpiler.register('wm-confirmdialog', () => {
         return {
-            pre: attrs => `<${tagName$14} wmConfirmDialog wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$14}>`
+            pre: attrs => `<${tagName$13} wmConfirmDialog wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$13}>`
         };
     });
     var confirmDialog_build = () => { };
@@ -782,11 +786,11 @@
         default: confirmDialog_build
     });
 
-    const tagName$13 = 'div';
+    const tagName$12 = 'div';
     transpiler.register('wm-dialogactions', () => {
         return {
-            pre: attrs => `<ng-template #dialogFooter><${tagName$13} wmDialogFooter data-identfier="actions" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$13}></ng-template>`
+            pre: attrs => `<ng-template #dialogFooter><${tagName$12} wmDialogFooter data-identfier="actions" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$12}></ng-template>`
         };
     });
     var dialogFooter_build = () => { };
@@ -796,11 +800,11 @@
         default: dialogFooter_build
     });
 
-    const tagName$12 = 'div';
+    const tagName$11 = 'div';
     transpiler.register('wm-dialog', () => {
         return {
-            pre: attrs => `<${tagName$12} wmDialog ${transpiler.getAttrMarkup(attrs)} aria-modal="true" role="dialog" wm-navigable-element="true"><ng-template #dialogBody>`,
-            post: () => `</ng-template></${tagName$12}>`
+            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}>`
         };
     });
     // Todo:vinay remove wm-view in migration
@@ -817,11 +821,11 @@
         default: dialog_build
     });
 
-    const tagName$11 = 'div';
+    const tagName$10 = 'div';
     transpiler.register('wm-iframedialog', () => {
         return {
-            pre: attrs => `<${tagName$11} wmIframeDialog wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$11}>`
+            pre: attrs => `<${tagName$10} wmIframeDialog wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$10}>`
         };
     });
     var iframeDialog_build = () => { };
@@ -831,11 +835,11 @@
         default: iframeDialog_build
     });
 
-    const tagName$10 = 'div';
+    const tagName$$ = 'div';
     transpiler.register('wm-logindialog', () => {
         return {
-            pre: attrs => `<${tagName$10} wmDialog wmLoginDialog ${transpiler.getAttrMarkup(attrs)} eventsource.bind="Actions.loginAction" wm-navigable-element="true"><ng-template #dialogBody>`,
-            post: () => `</ng-template></${tagName$10}>`
+            pre: attrs => `<${tagName$$} wmDialog wmLoginDialog ${transpiler.getAttrMarkup(attrs)} eventsource.bind="Actions.loginAction" wm-navigable-element="true"><ng-template #dialogBody>`,
+            post: () => `</ng-template></${tagName$$}>`
         };
     });
     var loginDialog_build = () => { };
@@ -845,7 +849,7 @@
         default: loginDialog_build
     });
 
-    const tagName$$ = 'div';
+    const tagName$_ = 'div';
     transpiler.register('wm-pagedialog', () => {
         return {
             pre: (attrs, shared) => {
@@ -871,14 +875,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$_} wmPartialDialog ${transpiler.getAttrMarkup(attrs)}>${containerMarkup}`;
             },
             post: (attrs, shared) => {
                 let preContent = '';
                 if (shared.get('hasPartialContent')) {
                     preContent = `</div></ng-template>`;
                 }
-                return `${preContent}</${tagName$$}>`;
+                return `${preContent}</${tagName$_}>`;
             }
         };
     });
@@ -957,7 +961,7 @@
         return (fieldTypeWidgetTypeMap[colDef.type] && fieldTypeWidgetTypeMap[colDef.type][0]) || core.FormWidgetType.TEXT;
     };
 
-    const tagName$_ = 'div';
+    const tagName$Z = 'div';
     const idGen$f = new core.IDGenerator('formfield_');
     const getEventsTemplate = (attrs) => {
         const eventAttrs = new Map();
@@ -1082,7 +1086,7 @@
                 else {
                     setDefaultPlaceholder(attrs, widgetType, 2);
                 }
-                return `<${tagName$_} data-role="${dataRole}" [formGroup]="${pCounter}.ngform" wmFormField wmCaptionPosition #${counter}="wmFormField" widgettype="${widgetType}" ${transpiler.getFormMarkupAttr(attrs)}>
+                return `<${tagName$Z} 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,
@@ -1098,7 +1102,7 @@
                             </div>
                         </div>`;
             },
-            post: () => `</${tagName$_}>`,
+            post: () => `</${tagName$Z}>`,
             provide: (attrs, shared) => {
                 const provider = new Map();
                 provider.set('form_reference', shared.get('counter'));
@@ -1120,11 +1124,11 @@
         default: formField_build
     });
 
-    const tagName$Z = 'div';
+    const tagName$Y = 'div';
     const registerAction = (tmpl) => {
         return {
-            pre: attrs => `<${tagName$Z} wmFormAction name="${attrs.get('name') || attrs.get('key')}" ${transpiler.getAttrMarkup(attrs)} ${tmpl}>`,
-            post: () => `</${tagName$Z}>`
+            pre: attrs => `<${tagName$Y} wmFormAction name="${attrs.get('name') || attrs.get('key')}" ${transpiler.getAttrMarkup(attrs)} ${tmpl}>`,
+            post: () => `</${tagName$Y}>`
         };
     };
     transpiler.register('wm-form-action', registerAction.bind(undefined, ''));
@@ -1136,7 +1140,7 @@
         default: formAction_build
     });
 
-    const tagName$Y = 'form';
+    const tagName$X = 'form';
     const idGen$e = new core.IDGenerator('form_');
     const formWidgets$1 = new Set([
         'wm-text',
@@ -1213,7 +1217,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$Y} wmForm data-role="${role}" ${directiveAttr} #${counter} ngNativeValidate [formGroup]="${counter}.ngform" [noValidate]="${counter}.validationtype !== 'html'"
+                const liveFormTmpl = `<${tagName$X} 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);
@@ -1248,7 +1252,10 @@
                                                      tabindex.bind="btn.tabindex" [class.hidden]="btn.updateMode ? !${counter}.isUpdateMode : ${counter}.isUpdateMode"></button>
                                         </ng-template>`;
                     mobileFormContentTmpl = `<header wmMobileNavbar name="${name}" ${transpiler.getAttrMarkup(navbarAttrsMap)}>
-                                            <ng-container *ngFor="let btn of ${counter}.buttonArray" [ngTemplateOutlet]="buttonRef" [ngTemplateOutletContext]="{btn:btn}">
+                                            <ng-container *ngFor="let btn of ${counter}.buttonArray; let i = index"
+                                                [ngTemplateOutlet]="buttonRef"
+                                                [ngTemplateOutletContext]="{btn:btn}"
+                                                [ngTemplateOutletInjector]="${counter}.createCustomInjector('mobile_' + i, {item:item, index:i})">
                                             </ng-container>
                                         </header>
                                         <div class="form-elements panel-body" >`;
@@ -1263,12 +1270,12 @@
                     return '</form></ng-template></div></div>';
                 }
                 if (attrs.get('formlayout') === 'page') {
-                    return `</div></${tagName$Y}>`;
+                    return `</div></${tagName$X}>`;
                 }
                 if (attrs.get('dependsontable')) {
-                    return `</${tagName$Y}></div>`;
+                    return `</${tagName$X}></div>`;
                 }
-                return `</${tagName$Y}>`;
+                return `</${tagName$X}>`;
             },
             provide: (attrs, shared) => {
                 const provider = new Map();
@@ -1287,14 +1294,14 @@
         default: form_build
     });
 
-    const tagName$X = 'div';
+    const tagName$W = 'div';
     transpiler.register('wm-calendar', () => {
         return {
             pre: (attrs) => {
                 let viewType = attrs.get('view') ? attrs.get('view') + ' view' : 'month view';
-                return `<${tagName$X} wmCalendar redrawable style="width:100%" aria-label="${viewType}" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$W} wmCalendar redrawable style="width:100%" aria-label="${viewType}" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$X}>`
+            post: () => `</${tagName$W}>`
         };
     });
     var calendar_build = () => { };
@@ -1304,11 +1311,11 @@
         default: calendar_build
     });
 
-    const tagName$W = 'ul';
+    const tagName$V = 'ul';
     transpiler.register('wm-chips', () => {
         return {
-            pre: attrs => `<${tagName$W} wmChips role="listbox" ${transpiler.getAttrMarkup(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$W}>`
+            pre: attrs => `<${tagName$V} wmChips role="listbox" ${transpiler.getAttrMarkup(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$V}>`
         };
     });
     var chips_build = () => { };
@@ -1318,11 +1325,11 @@
         default: chips_build
     });
 
-    const tagName$V = 'div';
+    const tagName$U = 'div';
     transpiler.register('wm-colorpicker', () => {
         return {
-            pre: attrs => `<${tagName$V} wmColorPicker ${transpiler.getAttrMarkup(attrs)} role="input" ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$V}>`
+            pre: attrs => `<${tagName$U} wmColorPicker ${transpiler.getAttrMarkup(attrs)} role="input" ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$U}>`
         };
     });
     var colorPicker_build = () => { };
@@ -1332,11 +1339,11 @@
         default: colorPicker_build
     });
 
-    const tagName$U = 'div';
+    const tagName$T = 'div';
     transpiler.register('wm-currency', () => {
         return {
-            pre: attrs => `<${tagName$U} wmCurrency ${transpiler.getAttrMarkup(attrs)} role="input" ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$U}>`
+            pre: attrs => `<${tagName$T} wmCurrency ${transpiler.getAttrMarkup(attrs)} role="input" ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$T}>`
         };
     });
     var currency_build = () => { };
@@ -1346,11 +1353,11 @@
         default: currency_build
     });
 
-    const tagName$T = 'div';
+    const tagName$S = 'div';
     transpiler.register('wm-buttongroup', () => {
         return {
-            pre: attrs => `<${tagName$T} wmButtonGroup role="group" aria-labelledby="button group" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$T}>`
+            pre: attrs => `<${tagName$S} wmButtonGroup role="group" aria-labelledby="button group" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$S}>`
         };
     });
     var buttonGroup_build = () => { };
@@ -1360,15 +1367,15 @@
         default: buttonGroup_build
     });
 
-    const tagName$S = 'button';
+    const tagName$R = 'button';
     const idGen$d = new core.IDGenerator('wm_button');
     transpiler.register('wm-button', () => {
         return {
             pre: (attrs) => {
                 const counter = idGen$d.nextUid();
-                return `<${tagName$S} wmButton #${counter}="wmButton" [attr.aria-label]="${counter}.hint || ${counter}.caption || null" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$R} wmButton #${counter}="wmButton" [attr.aria-label]="${counter}.hint || ${counter}.caption || null" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$S}>`
+            post: () => `</${tagName$R}>`
         };
     });
     var button_build = () => { };
@@ -1378,11 +1385,11 @@
         default: button_build
     });
 
-    const tagName$R = 'div';
+    const tagName$Q = 'div';
     transpiler.register('wm-checkbox', () => {
         return {
-            pre: attrs => `<${tagName$R} wmCheckbox ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$R}>`
+            pre: attrs => `<${tagName$Q} wmCheckbox ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$Q}>`
         };
     });
     var checkbox_build = () => { };
@@ -1392,11 +1399,11 @@
         default: checkbox_build
     });
 
-    const tagName$Q = 'ul';
+    const tagName$P = 'ul';
     transpiler.register('wm-checkboxset', () => {
         return {
-            pre: attrs => `<${tagName$Q} role="group" wmCheckboxset ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$Q}>`
+            pre: attrs => `<${tagName$P} role="group" wmCheckboxset ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$P}>`
         };
     });
     var checkboxset_build = () => { };
@@ -1406,11 +1413,11 @@
         default: checkboxset_build
     });
 
-    const tagName$P = 'div';
+    const tagName$O = 'div';
     transpiler.register('wm-composite', () => {
         return {
-            pre: attrs => `<${tagName$P} wmComposite wmCaptionPosition ${transpiler.setChildAttrs(attrs)} ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$P}${transpiler.clearChildAttrs()}>`
+            pre: attrs => `<${tagName$O} wmComposite wmCaptionPosition ${transpiler.setChildAttrs(attrs)} ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$O}${transpiler.clearChildAttrs()}>`
         };
     });
     var composite_build = () => { };
@@ -1420,11 +1427,11 @@
         default: composite_build
     });
 
-    const tagName$O = 'div';
+    const tagName$N = 'div';
     transpiler.register('wm-number', () => {
         return {
-            pre: attrs => `<${tagName$O} wmNumber ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$O}>`
+            pre: attrs => `<${tagName$N} wmNumber ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$N}>`
         };
     });
     var number_build = () => { };
@@ -1434,11 +1441,11 @@
         default: number_build
     });
 
-    const tagName$N = 'ul';
+    const tagName$M = 'ul';
     transpiler.register('wm-radioset', () => {
         return {
-            pre: attrs => `<${tagName$N} role="radiogroup" wmRadioset ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$N}>`
+            pre: attrs => `<${tagName$M} role="radiogroup" wmRadioset ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$M}>`
         };
     });
     var radioset_build = () => { };
@@ -1448,11 +1455,11 @@
         default: radioset_build
     });
 
-    const tagName$M = 'wm-select';
+    const tagName$L = 'wm-select';
     transpiler.register('wm-select', () => {
         return {
-            pre: attrs => `<${tagName$M} ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)}  ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$M}>`
+            pre: attrs => `<${tagName$L} ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)}  ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$L}>`
         };
     });
     var select_build = () => { };
@@ -1462,15 +1469,15 @@
         default: select_build
     });
 
-    const tagName$L = 'div';
+    const tagName$K = 'div';
     const idGen$c = new core.IDGenerator('wm_switch');
     transpiler.register('wm-switch', () => {
         return {
             pre: (attrs) => {
                 const counter = idGen$c.nextUid();
-                return `<${tagName$L} wmSwitch #${counter}="wmSwitch" [attr.aria-label]="${counter}.hint || 'Switch button'" ${transpiler.getFormMarkupAttr(attrs)} ${core.getNgModelAttr(attrs)}>`;
+                return `<${tagName$K} wmSwitch #${counter}="wmSwitch" [attr.aria-label]="${counter}.hint || 'Switch button'" ${transpiler.getFormMarkupAttr(attrs)} ${core.getNgModelAttr(attrs)}>`;
             },
-            post: () => `</${tagName$L}>`
+            post: () => `</${tagName$K}>`
         };
     });
     var switch_build = () => { };
@@ -1480,11 +1487,11 @@
         default: switch_build
     });
 
-    const tagName$K = 'wm-input';
+    const tagName$J = 'wm-input';
     transpiler.register('wm-text', () => {
         return {
-            pre: attrs => `<${tagName$K} ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$K}>`
+            pre: attrs => `<${tagName$J} ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$J}>`
         };
     });
     var text_build = () => { };
@@ -1494,11 +1501,11 @@
         default: text_build
     });
 
-    const tagName$J = 'wm-textarea';
+    const tagName$I = 'wm-textarea';
     transpiler.register('wm-textarea', () => {
         return {
-            pre: attrs => `<${tagName$J} ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$J}>`
+            pre: attrs => `<${tagName$I} ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$I}>`
         };
     });
     var textarea_build = () => { };
@@ -1508,11 +1515,11 @@
         default: textarea_build
     });
 
-    const tagName$I = 'div';
+    const tagName$H = 'div';
     transpiler.register('wm-datetime', () => {
         return {
-            pre: attrs => `<${tagName$I} wmDateTime ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$I}>`
+            pre: attrs => `<${tagName$H} wmDateTime ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$H}>`
         };
     });
     var dateTime_build = () => { };
@@ -1522,11 +1529,11 @@
         default: dateTime_build
     });
 
-    const tagName$H = 'div';
+    const tagName$G = 'div';
     transpiler.register('wm-date', () => {
         return {
-            pre: attrs => `<${tagName$H} wmDate ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$H}>`
+            pre: attrs => `<${tagName$G} wmDate ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$G}>`
         };
     });
     var date_build = () => { };
@@ -1536,11 +1543,11 @@
         default: date_build
     });
 
-    const tagName$G = 'div';
+    const tagName$F = 'div';
     transpiler.register('wm-time', () => {
         return {
-            pre: attrs => `<${tagName$G} wmTime ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$G}>`
+            pre: attrs => `<${tagName$F} wmTime ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$F}>`
         };
     });
     var time_build = () => { };
@@ -1550,7 +1557,7 @@
         default: time_build
     });
 
-    const tagName$F = 'div';
+    const tagName$E = 'div';
     transpiler.register('wm-fileupload', () => {
         return {
             pre: attrs => {
@@ -1558,9 +1565,9 @@
                     const onSelectBinding = transpiler.getDataSource(attrs.get('select.event'));
                     attrs.set('datasource.bind', onSelectBinding);
                 }
-                return `<${tagName$F} wmFileUpload ${transpiler.getAttrMarkup(attrs)} role="input">`;
+                return `<${tagName$E} wmFileUpload ${transpiler.getAttrMarkup(attrs)} role="input">`;
             },
-            post: () => `</${tagName$F}>`
+            post: () => `</${tagName$E}>`
         };
     });
     var fileUpload_build = () => { };
@@ -1570,11 +1577,11 @@
         default: fileUpload_build
     });
 
-    const tagName$E = 'div';
+    const tagName$D = 'div';
     transpiler.register('wm-rating', () => {
         return {
-            pre: attrs => `<${tagName$E} wmRating ${transpiler.getFormMarkupAttr(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$E}>`
+            pre: attrs => `<${tagName$D} wmRating ${transpiler.getFormMarkupAttr(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$D}>`
         };
     });
     var rating_build = () => { };
@@ -1584,11 +1591,11 @@
         default: rating_build
     });
 
-    const tagName$D = 'div';
+    const tagName$C = 'div';
     transpiler.register('wm-slider', () => {
         return {
-            pre: attrs => `<${tagName$D} wmSlider ${transpiler.getAttrMarkup(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$D}>`
+            pre: attrs => `<${tagName$C} wmSlider ${transpiler.getAttrMarkup(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$C}>`
         };
     });
     var slider_build = () => { };
@@ -1599,7 +1606,7 @@
     });
 
     const wmlistTag = 'wm-list';
-    const tagName$C = 'div';
+    const tagName$B = 'div';
     const dataSetKey$2 = 'dataset';
     function copyAttribute$1(from, fromAttrName, to, toAttrName) {
         const fromAttr = from.attrs.find(a => a.name === fromAttrName);
@@ -1647,8 +1654,8 @@
                     copyAttribute$1(template, 'height', node, 'thumbnailheight');
                 }
             },
-            pre: attrs => `<${tagName$C} wmMediaList ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$C}>`
+            pre: attrs => `<${tagName$B} wmMediaList ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$B}>`
         };
     });
     var mediaList_build = () => { };
@@ -1658,11 +1665,11 @@
         default: mediaList_build
     });
 
-    const tagName$B = 'ng-template';
+    const tagName$A = 'ng-template';
     transpiler.register('wm-media-template', () => {
         return {
-            pre: () => `<${tagName$B} #mediaListTemplate let-item="item" let-index="index">`,
-            post: () => `</${tagName$B}>`
+            pre: () => `<${tagName$A} #mediaListTemplate let-item="item" let-index="index">`,
+            post: () => `</${tagName$A}>`
         };
     });
     var mediaListItem_build = () => { };
@@ -1746,16 +1753,16 @@
         default: list_build
     });
 
-    const tagName$A = 'div';
+    const tagName$z = 'div';
     const idGen$b = new core.IDGenerator('liveform_dialog_id_');
     transpiler.register('wm-livetable', () => {
         return {
             pre: (attrs, shared) => {
                 const counter = idGen$b.nextUid();
                 shared.set('counter', counter);
-                return `<${tagName$A} wmLiveTable ${transpiler.getAttrMarkup(attrs)} dialogid="${counter}">`;
+                return `<${tagName$z} wmLiveTable ${transpiler.getAttrMarkup(attrs)} dialogid="${counter}">`;
             },
-            post: () => `</${tagName$A}>`,
+            post: () => `</${tagName$z}>`,
             provide: (attrs, shared) => {
                 const provider = new Map();
                 provider.set('liveform_dialog_id', shared.get('counter'));
@@ -1770,15 +1777,15 @@
         default: liveTable_build
     });
 
-    const tagName$z = 'p';
+    const tagName$y = 'p';
     const idGen$a = new core.IDGenerator('wm_message');
     transpiler.register('wm-message', () => {
         return {
             pre: (attrs) => {
                 const counter = idGen$a.nextUid();
-                return `<${tagName$z} wmMessage tabindex="0" #${counter}="wmMessage" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$y} wmMessage tabindex="0" #${counter}="wmMessage" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$z}>`
+            post: () => `</${tagName$y}>`
         };
     });
     var message_build = () => { };
@@ -1788,11 +1795,11 @@
         default: message_build
     });
 
-    const tagName$y = 'ol';
+    const tagName$x = 'ol';
     transpiler.register('wm-breadcrumb', () => {
         return {
-            pre: attrs => `<${tagName$y} wmBreadcrumb ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$y}>`
+            pre: attrs => `<${tagName$x} wmBreadcrumb ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$x}>`
         };
     });
     var breadcrumb_build = () => { };
@@ -1802,23 +1809,28 @@
         default: breadcrumb_build
     });
 
-    const tagName$x = 'div';
+    const tagName$w = 'div';
     transpiler.register('wm-menu', () => {
         return {
             pre: attrs => {
                 const menuWidth = attrs.get("width");
                 let styleBinding = '';
                 if (menuWidth) {
-                    if (menuWidth.indexOf('%') > -1 || menuWidth.indexOf('px') > -1) {
+                    const units = ['%', 'px'];
+                    const hasUnit = units.some(unit => menuWidth.includes(unit));
+                    if (hasUnit) {
                         styleBinding = `[ngStyle]="{'width': '${menuWidth}'}"`;
-                        return `<${tagName$x} wmMenu dropdown ${transpiler.getAttrMarkup(attrs)} ${styleBinding}>`;
                     }
+                    else {
+                        styleBinding = `[ngStyle]="{'width': '${menuWidth}px'}"`;
+                    }
+                    return `<${tagName$w} wmMenu dropdown ${transpiler.getAttrMarkup(attrs)} ${styleBinding}>`;
                 }
                 else {
-                    return `<${tagName$x} wmMenu dropdown ${transpiler.getAttrMarkup(attrs)}>`;
+                    return `<${tagName$w} wmMenu dropdown ${transpiler.getAttrMarkup(attrs)}>`;
                 }
             },
-            post: () => `</${tagName$x}>`
+            post: () => `</${tagName$w}>`
         };
     });
     var menu_build = () => { };
@@ -1828,11 +1840,11 @@
         default: menu_build
     });
 
-    const tagName$w = 'li';
+    const tagName$v = 'li';
     transpiler.register('wm-nav-item', () => {
         return {
-            pre: attrs => `<${tagName$w} wmNavItem role="listitem" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$w}>`
+            pre: attrs => `<${tagName$v} wmNavItem role="listitem" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$v}>`
         };
     });
     var navItem_build = () => { };
@@ -1842,11 +1854,11 @@
         default: navItem_build
     });
 
-    const tagName$v = 'ul';
+    const tagName$u = 'ul';
     transpiler.register('wm-nav', () => {
         return {
-            pre: attrs => `<${tagName$v} wmNav data-element-type="wmNav" data-role="page-header" role="list" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$v}>`
+            pre: attrs => `<${tagName$u} wmNav data-element-type="wmNav" data-role="page-header" role="list" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$u}>`
         };
     });
     var nav_build = () => { };
@@ -1856,11 +1868,11 @@
         default: nav_build
     });
 
-    const tagName$u = 'nav';
+    const tagName$t = 'nav';
     transpiler.register('wm-navbar', () => {
         return {
-            pre: attrs => `<${tagName$u} wmNavbar data-element-type="wmNavbar" role="navigation" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$u}>`
+            pre: attrs => `<${tagName$t} wmNavbar data-element-type="wmNavbar" role="navigation" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$t}>`
         };
     });
     var navbar_build = () => { };
@@ -1870,7 +1882,7 @@
         default: navbar_build
     });
 
-    const tagName$t = 'wm-popover';
+    const tagName$s = 'wm-popover';
     transpiler.register('wm-popover', () => {
         return {
             requires: ['wm-table'],
@@ -1890,7 +1902,7 @@
                     popoverTemplate = `<div wmContainer #partial partialContainer ${contentMarkup}>`;
                     shared.set('hasPopoverContent', true);
                 }
-                let markup = `<${tagName$t} wmPopover ${transpiler.getAttrMarkup(attrs)}>`;
+                let markup = `<${tagName$s} 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
@@ -1904,7 +1916,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$t}>`;
+                return `${markup}<div tabindex="0" class="popover-end sr-only" aria-label="">popover content ended</div></ng-template></${tagName$s}>`;
             }
         };
     });
@@ -1915,7 +1927,7 @@
         default: popover_build
     });
 
-    const tagName$s = 'div';
+    const tagName$r = 'div';
     const findChild = (node, childName) => {
         const child = node && node.children.find(e => (e instanceof compiler.Element && e.name === childName));
         return child;
@@ -1932,7 +1944,7 @@
         if (!node) {
             return;
         }
-        _.forEach(node.children, (child) => {
+        lodashEs.forEach(node.children, (child) => {
             if (child instanceof compiler.Element) {
                 if (child.name === name) {
                     elementNode = child;
@@ -1970,9 +1982,9 @@
             },
             pre: (attrs) => {
                 const counter = idGen$9.nextUid();
-                return `<${tagName$s} wmPage #${counter}="wmPage" data-role="pageContainer" [attr.aria-label]="${counter}.hint" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$r} wmPage #${counter}="wmPage" data-role="pageContainer" [attr.aria-label]="${counter}.hint" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$s}>`
+            post: () => `</${tagName$r}>`
         };
     });
     var page_build = () => { };
@@ -1982,15 +1994,15 @@
         default: page_build
     });
 
-    const tagName$r = 'div';
+    const tagName$q = 'div';
     const idGen$8 = new core.IDGenerator('wm_layout');
     transpiler.register('wm-layout', () => {
         return {
             pre: (attrs) => {
                 const counter = idGen$8.nextUid();
-                return `<${tagName$r} wmLayout #${counter}="wmLayout" data-role="pageContainer" [attr.aria-label]="${counter}.hint || 'Main page content'" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$q} wmLayout #${counter}="wmLayout" data-role="pageContainer" [attr.aria-label]="${counter}.hint || 'Main page content'" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$r}>`
+            post: () => `</${tagName$q}>`
         };
     });
     var layout_build = () => { };
@@ -2000,11 +2012,11 @@
         default: layout_build
     });
 
-    const tagName$q = 'router-outlet';
+    const tagName$p = 'router-outlet';
     transpiler.register('wm-router-outlet', () => {
         return {
-            pre: attrs => `<div wmRouterOutlet name="wmRouterOutlet" ${transpiler.getAttrMarkup(attrs)}><${tagName$q} (activate)="onActivate($event)">`,
-            post: () => `</${tagName$q}></div>`
+            pre: attrs => `<div wmRouterOutlet name="wmRouterOutlet" ${transpiler.getAttrMarkup(attrs)}><${tagName$p} (activate)="onActivate($event)">`,
+            post: () => `</${tagName$p}></div>`
         };
     });
     var routerOutlet_build = () => { };
@@ -2014,11 +2026,11 @@
         default: routerOutlet_build
     });
 
-    const tagName$p = 'nav';
+    const tagName$o = 'nav';
     transpiler.register('wm-pagination', () => {
         return {
-            pre: attrs => `<${tagName$p} wmPagination data-identifier="pagination" aria-label="Page navigation" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$p}>`
+            pre: attrs => `<${tagName$o} wmPagination data-identifier="pagination" aria-label="Page navigation" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$o}>`
         };
     });
     var pagination_build = () => { };
@@ -2028,11 +2040,11 @@
         default: pagination_build
     });
 
-    const tagName$o = 'main';
+    const tagName$n = 'main';
     transpiler.register('wm-content', () => {
         return {
-            pre: attrs => `<${tagName$o} wmContent data-role="page-content" role="main" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$o}>`
+            pre: attrs => `<${tagName$n} wmContent data-role="page-content" role="main" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$n}>`
         };
     });
     var content_build = () => { };
@@ -2042,15 +2054,15 @@
         default: content_build
     });
 
-    const tagName$n = 'footer';
+    const tagName$m = 'footer';
     const idGen$7 = new core.IDGenerator('wm_footer');
     transpiler.register('wm-footer', () => {
         return {
             pre: (attrs) => {
                 const counter = idGen$7.nextUid();
-                return `<${tagName$n} wmFooter #${counter}="wmFooter" partialContainer data-role="page-footer" role="contentinfo" [attr.aria-label]="${counter}.hint || 'Page footer'" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$m} wmFooter #${counter}="wmFooter" partialContainer data-role="page-footer" role="contentinfo" [attr.aria-label]="${counter}.hint || 'Page footer'" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$n}>`
+            post: () => `</${tagName$m}>`
         };
     });
     var footer_build = () => { };
@@ -2060,15 +2072,15 @@
         default: footer_build
     });
 
-    const tagName$m = 'header';
+    const tagName$l = 'header';
     const idGen$6 = new core.IDGenerator('wm_header');
     transpiler.register('wm-header', () => {
         return {
             pre: (attrs) => {
                 const counter = idGen$6.nextUid();
-                return `<${tagName$m} wmHeader #${counter}="wmHeader" partialContainer data-role="page-header" role="banner" [attr.aria-label]="${counter}.hint || 'Page header'" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$l} wmHeader #${counter}="wmHeader" partialContainer data-role="page-header" role="banner" [attr.aria-label]="${counter}.hint || 'Page header'" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$m}>`
+            post: () => `</${tagName$l}>`
         };
     });
     var header_build = () => { };
@@ -2078,15 +2090,15 @@
         default: header_build
     });
 
-    const tagName$l = 'aside';
+    const tagName$k = 'aside';
     const idGen$5 = new core.IDGenerator('wm_left_panel');
     transpiler.register('wm-left-panel', () => {
         return {
             pre: (attrs) => {
                 const counter = idGen$5.nextUid();
-                return `<${tagName$l} 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)}>`;
+                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)}>`;
             },
-            post: () => `</${tagName$l}>`
+            post: () => `</${tagName$k}>`
         };
     });
     var leftPanel_build = () => { };
@@ -2096,11 +2108,11 @@
         default: leftPanel_build
     });
 
-    const tagName$k = 'header';
+    const tagName$j = 'header';
     transpiler.register('wm-mobile-navbar', () => {
         return {
-            pre: attrs => `<${tagName$k} wmMobileNavbar ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$k}>`
+            pre: attrs => `<${tagName$j} wmMobileNavbar ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$j}>`
         };
     });
     var mobileNavbar_build = () => { };
@@ -2110,15 +2122,15 @@
         default: mobileNavbar_build
     });
 
-    const tagName$j = 'aside';
+    const tagName$i = 'aside';
     const idGen$4 = new core.IDGenerator('wm_right_panel');
     transpiler.register('wm-right-panel', () => {
         return {
             pre: (attrs) => {
                 const counter = idGen$4.nextUid();
-                return `<${tagName$j} wmRightPanel #${counter}="wmRightPanel" partialContainer data-role="page-right-panel" role="complementary" [attr.aria-label]="${counter}.hint || 'Right navigation panel'" ${transpiler.getAttrMarkup(attrs)}>`;
+                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)}>`;
             },
-            post: () => `</${tagName$j}>`
+            post: () => `</${tagName$i}>`
         };
     });
     var rightPanel_build = () => { };
@@ -2128,7 +2140,7 @@
         default: rightPanel_build
     });
 
-    const tagName$i = 'div';
+    const tagName$h = 'div';
     const createElement$3 = name => {
         return new compiler.Element(name, [], [], noSpan$3, noSpan$3, noSpan$3);
     };
@@ -2151,8 +2163,8 @@
                     }
                 }
             },
-            pre: attrs => `<${tagName$i} wmPageContent ${attrs.get('spa') && 'wmSpaPage' || ''} wmSmoothscroll="${attrs.get('smoothscroll') || 'false'}" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$i}>`
+            pre: attrs => `<${tagName$h} wmPageContent ${attrs.get('spa') && 'wmSpaPage' || ''} wmSmoothscroll="${attrs.get('smoothscroll') || 'false'}" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$h}>`
         };
     });
     var pageContent_build = () => { };
@@ -2162,11 +2174,11 @@
         default: pageContent_build
     });
 
-    const tagName$h = 'div';
+    const tagName$g = 'div';
     transpiler.register('wm-mobile-tabbar', () => {
         return {
-            pre: attrs => `<${tagName$h} wmMobileTabbar ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$h}>`
+            pre: attrs => `<${tagName$g} wmMobileTabbar ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$g}>`
         };
     });
     var tabBar_build = () => { };
@@ -2176,15 +2188,15 @@
         default: tabBar_build
     });
 
-    const tagName$g = 'section';
+    const tagName$f = 'section';
     const idGen$3 = new core.IDGenerator('wm_top_nav');
     transpiler.register('wm-top-nav', () => {
         return {
             pre: (attrs) => {
                 const counter = idGen$3.nextUid();
-                return `<${tagName$g} wmTopNav #${counter}="wmTopNav" partialContainer data-role="page-topnav" role="navigation" [attr.aria-label]="${counter}.hint || 'Second level navigation'" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$f} wmTopNav #${counter}="wmTopNav" partialContainer data-role="page-topnav" role="navigation" [attr.aria-label]="${counter}.hint || 'Second level navigation'" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$g}>`
+            post: () => `</${tagName$f}>`
         };
     });
     var topNav_build = () => { };
@@ -2194,7 +2206,7 @@
         default: topNav_build
     });
 
-    const tagName$f = 'section';
+    const tagName$e = 'section';
     const noSpan$2 = {};
     const createElement$2 = name => {
         return new compiler.Element(name, [], [], noSpan$2, noSpan$2, noSpan$2);
@@ -2212,8 +2224,8 @@
                 node.children.length = 0;
                 node.children.push(conditionalNode);
             },
-            pre: attrs => `<${tagName$f} wmPartial data-role="partial" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$f}>`
+            pre: attrs => `<${tagName$e} wmPartial data-role="partial" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$e}>`
         };
     });
     var partial_build = () => { };
@@ -2223,11 +2235,11 @@
         default: partial_build
     });
 
-    const tagName$e = 'div';
+    const tagName$d = 'div';
     transpiler.register('wm-param', () => {
         return {
-            pre: attrs => `<${tagName$e} wmParam hidden ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$e}>`
+            pre: attrs => `<${tagName$d} wmParam hidden ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$d}>`
         };
     });
     var partialParam_build = () => { };
@@ -2237,11 +2249,11 @@
         default: partialParam_build
     });
 
-    const tagName$d = 'section';
+    const tagName$c = 'section';
     transpiler.register('wm-prefab', () => {
         return {
-            pre: attrs => `<${tagName$d} wmPrefab redrawable data-role="prefab" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$d}>`
+            pre: attrs => `<${tagName$c} wmPrefab redrawable data-role="prefab" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$c}>`
         };
     });
     var prefab_build = () => { };
@@ -2259,7 +2271,7 @@
         const attr = new compiler.Attribute(name, value, noSpan$1, noSpan$1, noSpan$1, undefined, undefined);
         node.attrs.push(attr);
     };
-    const tagName$c = 'div';
+    const tagName$b = 'div';
     transpiler.register('wm-prefab-container', () => {
         return {
             template: (node) => {
@@ -2269,8 +2281,8 @@
                 node.children.length = 0;
                 node.children.push(conditionalNode);
             },
-            pre: attrs => `<${tagName$c} wmPrefabContainer ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$c}>`
+            pre: attrs => `<${tagName$b} wmPrefabContainer ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$b}>`
         };
     });
     var prefabContainer_build = () => { };
@@ -2280,11 +2292,11 @@
         default: prefabContainer_build
     });
 
-    const tagName$b = 'div';
+    const tagName$a = 'div';
     transpiler.register('wm-table-action', () => {
         return {
-            pre: attrs => `<${tagName$b} name="${attrs.get('name') || attrs.get('key')}" wmTableAction ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$b}>`
+            pre: attrs => `<${tagName$a} name="${attrs.get('name') || attrs.get('key')}" wmTableAction ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$a}>`
         };
     });
     var tableAction_build = () => { };
@@ -2294,11 +2306,11 @@
         default: tableAction_build
     });
 
-    const tagName$a = 'div';
+    const tagName$9 = 'div';
     transpiler.register('wm-table-column-group', () => {
         return {
-            pre: attrs => `<${tagName$a} wmTableColumnGroup ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$a}>`
+            pre: attrs => `<${tagName$9} wmTableColumnGroup ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$9}>`
         };
     });
     var tableColumnGroup_build = () => { };
@@ -2308,7 +2320,7 @@
         default: tableColumnGroup_build
     });
 
-    const tagName$9 = 'div';
+    const tagName$8 = 'div';
     const idGen$2 = new core.IDGenerator('data_table_form_');
     const formWidgets = new Set([
         'wm-text',
@@ -2561,7 +2573,7 @@
                         customExprTmpl = `${customExpr}<div data-col-identifier="${attrs.get('binding')}" title="${formatExprTmpl}">${formatExprTmpl}`;
                     }
                 }
-                return `<${tagName$9} wmTableColumn ${transpiler.getAttrMarkup(attrs)} ${parentForm}>
+                return `<${tagName$8} wmTableColumn ${transpiler.getAttrMarkup(attrs)} ${parentForm}>
                     ${rowFilterTmpl}
                     ${inlineEditTmpl}
                     ${inlineNewEditTmpl}
@@ -2572,7 +2584,7 @@
                 if (shared.get('customExpression')) {
                     customExprTmpl = `</div></ng-template>`;
                 }
-                return `${customExprTmpl}</${tagName$9}>`;
+                return `${customExprTmpl}</${tagName$8}>`;
             },
             imports: (attrs) => {
                 const editWidgetType = attrs.get('edit-widget-type');
@@ -2588,7 +2600,7 @@
         default: tableColumn_build
     });
 
-    const tagName$8 = 'div';
+    const tagName$7 = 'div';
     const getRowExpansionActionTmpl = (attrs) => {
         const tag = attrs.get('widget-type') === 'anchor' ? 'a' : 'button';
         const directive = attrs.get('widget-type') === 'anchor' ? 'wmAnchor' : 'wmButton';
@@ -2604,7 +2616,7 @@
     transpiler.register('wm-table-row', () => {
         return {
             pre: (attrs) => {
-                return `<${tagName$8} wmTableRow ${transpiler.getAttrMarkup(attrs)}>
+                return `<${tagName$7} 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)"
@@ -2612,7 +2624,7 @@
                          <div *ngFor="let param of rowDef.partialParams | keyvalue" wmParam hidden
                             [name]="param.key" [value]="param.value"></div>`;
             },
-            post: () => `</div></ng-template></${tagName$8}>`
+            post: () => `</div></ng-template></${tagName$7}>`
         };
     });
     var tableRow_build = () => { };
@@ -2622,7 +2634,7 @@
         default: tableRow_build
     });
 
-    const tagName$7 = 'div';
+    const tagName$6 = '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>
@@ -2654,9 +2666,9 @@
     };
     transpiler.register('wm-table-row-action', () => {
         return {
-            pre: attrs => `<${tagName$7} wmTableRowAction ${transpiler.getAttrMarkup(attrs)}>
+            pre: attrs => `<${tagName$6} wmTableRowAction ${transpiler.getAttrMarkup(attrs)}>
                         ${getRowActionTmpl(attrs)}`,
-            post: () => `</${tagName$7}>`
+            post: () => `</${tagName$6}>`
         };
     });
     var tableRowAction_build = () => { };
@@ -2666,7 +2678,7 @@
         default: tableRowAction_build
     });
 
-    const tagName$6 = 'div';
+    const tagName$5 = 'div';
     const dataSetKey = 'dataset';
     const idGen$1 = new core.IDGenerator('table_');
     let columnIndex = 0;
@@ -2733,9 +2745,9 @@
                 attrs.set('isdynamictable', shared.get('isdynamictable'));
                 attrs.set('isrowexpansionenabled', shared.get('isrowexpansionenabled'));
                 attrs.set('table_reference', counter);
-                return `<${tagName$6} wmTable="${counter}" wmTableFilterSort wmTableCUD #${counter} data-identifier="table" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$5} wmTable="${counter}" wmTableFilterSort wmTableCUD #${counter} data-identifier="table" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$6}>`,
+            post: () => `</${tagName$5}>`,
             provide: (attrs, shared) => {
                 const provider = new Map();
                 provider.set('table_reference', shared.get('counter'));
@@ -2754,11 +2766,11 @@
         default: table_build
     });
 
-    const tagName$5 = 'div';
+    const tagName$4 = 'div';
     transpiler.register('wm-video', () => {
         return {
-            pre: attrs => `<${tagName$5} wmVideo ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$5}>`
+            pre: attrs => `<${tagName$4} wmVideo ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$4}>`
         };
     });
     var video_build = () => { };
@@ -2768,7 +2780,7 @@
         default: video_build
     });
 
-    const tagName$4 = 'div';
+    const tagName$3 = 'div';
     const SPACING_KEY = 'parentLinearLayout.spacing';
     transpiler.register('wm-linearlayout', () => {
         return {
@@ -2776,9 +2788,9 @@
             pre: (attrs, shared, provider) => {
                 let spacing = attrs.get('spacing');
                 attrs.set('spacing', (!spacing || spacing === '0') && provider ? provider.get(SPACING_KEY) : spacing);
-                return `<${tagName$4} wmLinearLayout ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$3} wmLinearLayout ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$4}>`,
+            post: () => `</${tagName$3}>`,
             provide: (attrs, shared) => {
                 const provider = new Map();
                 provider.set(SPACING_KEY, attrs.get('spacing'));
@@ -2793,11 +2805,11 @@
         default: linearLayout_build
     });
 
-    const tagName$3 = 'div';
+    const tagName$2 = 'div';
     transpiler.register('wm-linearlayoutitem', () => {
         return {
-            pre: attrs => `<${tagName$3} wmLinearLayoutItem ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$3}>`
+            pre: attrs => `<${tagName$2} wmLinearLayoutItem ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$2}>`
         };
     });
     var linearLayoutItem_build = () => { };
@@ -2807,15 +2819,15 @@
         default: linearLayoutItem_build
     });
 
-    const tagName$2 = 'div';
+    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$2} wmWidgetContainer customWidgetContainer #${counter}="wmWidgetContainer" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$1} wmWidgetContainer customWidgetContainer #${counter}="wmWidgetContainer" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$2}>`
+            post: () => `</${tagName$1}>`
         };
     });
     var customWidgetContainer_build = () => { };
@@ -2825,20 +2837,6 @@
         default: customWidgetContainer_build
     });
 
-    const tagName$1 = 'div';
-    transpiler.register('wm-prop', () => {
-        return {
-            pre: attrs => `<${tagName$1} wmProp hidden ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1}>`
-        };
-    });
-    var customWidgetProp_build = () => { };
-
-    var customWidgetProp_build$1 = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        default: customWidgetProp_build
-    });
-
     const tagName = 'section';
     const noSpan = {};
     const createElement = name => {
@@ -2894,7 +2892,6 @@
     exports.contentBuild = content_build$1;
     exports.currencyBuild = currency_build$1;
     exports.customWidgetBuild = customWidgetContainer_build$1;
-    exports.customWidgetPropBuild = customWidgetProp_build$1;
     exports.customWidgetWrapperBuild = customWidgetWrapper_build$1;
     exports.dateBuild = date_build$1;
     exports.dateTimeBuild = dateTime_build$1;