@wavemaker/app-ng-runtime 12.0.0-next.44005 → 12.0.0-next.45001

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

@@ -6,13 +6,13 @@
 
     const carouselTagName = 'carousel';
     const dataSetKey$5 = 'dataset';
-    const idGen$s = new core.IDGenerator('wm_carousel_ref_');
+    const idGen$t = new core.IDGenerator('wm_carousel_ref_');
     const isDynamicCarousel = node => node.attrs.find(attr => attr.name === 'type' && attr.value === 'dynamic');
     transpiler.register('wm-carousel', () => {
         return {
             pre: (attrs, shared) => {
                 // generating unique Id for the carousel
-                const counter = idGen$s.nextUid();
+                const counter = idGen$t.nextUid();
                 shared.set('carousel_ref', counter);
                 return `<div class="app-carousel carousel"><${carouselTagName} wmCarousel #${counter}="wmCarousel"  ${transpiler.getAttrMarkup(attrs)} interval="0" [ngClass]="${counter}.navigationClass">`;
             },
@@ -78,11 +78,11 @@
         default: carouselTemplate_build
     });
 
-    const tagName$1C = 'div';
+    const tagName$1F = 'div';
     transpiler.register('wm-login', () => {
         return {
-            pre: attrs => `<${tagName$1C} wmLogin ${transpiler.getAttrMarkup(attrs)} eventsource.bind="Actions.loginAction">`,
-            post: () => `</${tagName$1C}>`,
+            pre: attrs => `<${tagName$1F} wmLogin ${transpiler.getAttrMarkup(attrs)} eventsource.bind="Actions.loginAction">`,
+            post: () => `</${tagName$1F}>`,
             provide: () => {
                 const provider = new Map();
                 provider.set('isLogin', true);
@@ -97,11 +97,11 @@
         default: login_build
     });
 
-    const tagName$1B = 'marquee';
+    const tagName$1E = 'marquee';
     transpiler.register('wm-marquee', () => {
         return {
-            pre: attrs => `<${tagName$1B} onmouseover="this.stop();" onmouseout="this.start();" wmMarquee role="marquee" aria-live="off" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1B}>`
+            pre: attrs => `<${tagName$1E} onmouseover="this.stop();" onmouseout="this.start();" wmMarquee role="marquee" aria-live="off" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1E}>`
         };
     });
     var marquee_build = () => { };
@@ -111,15 +111,15 @@
         default: marquee_build
     });
 
-    const tagName$1A = 'a';
-    const idGen$r = new core.IDGenerator('wm_anchor');
+    const tagName$1D = 'a';
+    const idGen$s = new core.IDGenerator('wm_anchor');
     transpiler.register('wm-anchor', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$r.nextUid();
-                return `<${tagName$1A} wmAnchor #${counter}="wmAnchor" role="link" data-identifier="anchor" [attr.aria-label]="${counter}.hint || ${counter}.caption" ${transpiler.getAttrMarkup(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)}>`;
             },
-            post: () => `</${tagName$1A}>`
+            post: () => `</${tagName$1D}>`
         };
     });
     var anchor_build = () => { };
@@ -129,11 +129,11 @@
         default: anchor_build
     });
 
-    const tagName$1z = 'div';
+    const tagName$1C = 'div';
     transpiler.register('wm-audio', () => {
         return {
-            pre: attrs => `<${tagName$1z} wmAudio ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1z}>`
+            pre: attrs => `<${tagName$1C} wmAudio ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1C}>`
         };
     });
     var audio_build = () => { };
@@ -143,15 +143,15 @@
         default: audio_build
     });
 
-    const tagName$1y = 'div';
-    const idGen$q = new core.IDGenerator('wm_html');
+    const tagName$1B = 'div';
+    const idGen$r = new core.IDGenerator('wm_html');
     transpiler.register('wm-html', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$q.nextUid();
-                return `<${tagName$1y} wmHtml #${counter}="wmHtml" [attr.aria-label]="${counter}.hint || 'HTML content'" ${transpiler.getAttrMarkup(attrs)}>`;
+                const counter = idGen$r.nextUid();
+                return `<${tagName$1B} wmHtml #${counter}="wmHtml" [attr.aria-label]="${counter}.hint || 'HTML content'" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$1y}>`
+            post: () => `</${tagName$1B}>`
         };
     });
     var html_build = () => { };
@@ -161,11 +161,11 @@
         default: html_build
     });
 
-    const tagName$1x = 'span';
+    const tagName$1A = 'span';
     transpiler.register('wm-icon', () => {
         return {
-            pre: attrs => `<${tagName$1x} wmIcon aria-hidden="true" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1x}>`
+            pre: attrs => `<${tagName$1A} wmIcon aria-hidden="true" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1A}>`
         };
     });
     var icon_build = () => { };
@@ -175,11 +175,11 @@
         default: icon_build
     });
 
-    const tagName$1w = 'div';
+    const tagName$1z = 'div';
     transpiler.register('wm-iframe', () => {
         return {
-            pre: attrs => `<${tagName$1w} wmIframe ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1w}>`
+            pre: attrs => `<${tagName$1z} wmIframe ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1z}>`
         };
     });
     var iframe_build = () => { };
@@ -189,8 +189,8 @@
         default: iframe_build
     });
 
-    let tagName$1v = 'p';
-    const idGen$p = new core.IDGenerator('wm_label');
+    let tagName$1y = 'p';
+    const idGen$q = new core.IDGenerator('wm_label');
     transpiler.register('wm-label', () => {
         return {
             pre: (attrs) => {
@@ -199,15 +199,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$1v = attrs.get('type');
+                    tagName$1y = attrs.get('type');
                 }
                 else {
-                    tagName$1v = 'label';
+                    tagName$1y = 'label';
                 }
-                const counter = idGen$p.nextUid();
-                return `<${tagName$1v} wmLabel #${counter}="wmLabel" [attr.aria-label]="${counter}.hint" ${transpiler.getAttrMarkup(attrs)}>`;
+                const counter = idGen$q.nextUid();
+                return `<${tagName$1y} wmLabel #${counter}="wmLabel" [attr.aria-label]="${counter}.hint" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$1v}>`
+            post: () => `</${tagName$1y}>`
         };
     });
     var label_build = () => { };
@@ -217,13 +217,13 @@
         default: label_build
     });
 
-    const tagName$1u = 'img';
-    const idGen$o = new core.IDGenerator('wm_picture');
+    const tagName$1x = 'img';
+    const idGen$p = new core.IDGenerator('wm_picture');
     transpiler.register('wm-picture', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$o.nextUid();
-                return `<${tagName$1u} wmPicture #${counter}="wmPicture" alt="image" wmImageCache="${attrs.get('offline') || 'true'}" [attr.aria-label]="${counter}.hint || 'Image'" ${transpiler.getAttrMarkup(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)}>`;
             }
         };
     });
@@ -234,15 +234,15 @@
         default: picture_build
     });
 
-    const tagName$1t = 'div';
-    const idGen$n = new core.IDGenerator('wm_spinner');
+    const tagName$1w = 'div';
+    const idGen$o = new core.IDGenerator('wm_spinner');
     transpiler.register('wm-spinner', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$n.nextUid();
-                return `<${tagName$1t} wmSpinner #${counter}="wmSpinner" role="alert" [attr.aria-label]="${counter}.hint || 'Loading...'" aria-live="assertive" aria-busy="true" ${transpiler.getAttrMarkup(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)}>`;
             },
-            post: () => `</${tagName$1t}>`
+            post: () => `</${tagName$1w}>`
         };
     });
     var spinner_build = () => { };
@@ -252,7 +252,7 @@
         default: spinner_build
     });
 
-    const tagName$1s = 'div';
+    const tagName$1v = 'div';
     const getAttr = (node, attrName) => node.attrs.find(attr => attr.name === attrName);
     const getAttrValue = (node, attrName) => {
         const match = getAttr(node, attrName);
@@ -280,8 +280,8 @@
                     }
                 }
             },
-            pre: attrs => `<${tagName$1s} wmProgressBar ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1s}>`
+            pre: attrs => `<${tagName$1v} wmProgressBar ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1v}>`
         };
     });
     var progressBar_build = () => { };
@@ -291,11 +291,11 @@
         default: progressBar_build
     });
 
-    const tagName$1r = 'div';
+    const tagName$1u = 'div';
     transpiler.register('wm-progress-circle', () => {
         return {
-            pre: attrs => `<${tagName$1r} wmProgressCircle ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1r}>`
+            pre: attrs => `<${tagName$1u} wmProgressCircle ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1u}>`
         };
     });
     var progressCircle_build = () => { };
@@ -305,15 +305,15 @@
         default: progressCircle_build
     });
 
-    const tagName$1q = 'div';
-    const idGen$m = new core.IDGenerator('wm_richtexteditor');
+    const tagName$1t = 'div';
+    const idGen$n = new core.IDGenerator('wm_richtexteditor');
     transpiler.register('wm-richtexteditor', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$m.nextUid();
-                return `<${tagName$1q} wmRichTextEditor #${counter}="wmRichTextEditor" role="textbox" [attr.aria-label]="${counter}.hint || 'Richtext editor'" ${transpiler.getFormMarkupAttr(attrs)}>`;
+                const counter = idGen$n.nextUid();
+                return `<${tagName$1t} wmRichTextEditor #${counter}="wmRichTextEditor" role="textbox" [attr.aria-label]="${counter}.hint || 'Richtext editor'" ${transpiler.getFormMarkupAttr(attrs)}>`;
             },
-            post: () => `</${tagName$1q}>`
+            post: () => `</${tagName$1t}>`
         };
     });
     var richTextEditor_build = () => { };
@@ -323,11 +323,11 @@
         default: richTextEditor_build
     });
 
-    const tagName$1p = 'div';
+    const tagName$1s = 'div';
     transpiler.register('wm-search', () => {
         return {
-            pre: attrs => `<${tagName$1p} wmSearch ${transpiler.getFormMarkupAttr(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$1p}>`
+            pre: attrs => `<${tagName$1s} wmSearch ${transpiler.getFormMarkupAttr(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$1s}>`
         };
     });
     var search_build = () => { };
@@ -337,11 +337,11 @@
         default: search_build
     });
 
-    const tagName$1o = 'ul';
+    const tagName$1r = 'ul';
     transpiler.register('wm-tree', () => {
         return {
-            pre: attrs => `<${tagName$1o} wmTree class="ztree" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1o}>`
+            pre: attrs => `<${tagName$1r} wmTree class="ztree" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1r}>`
         };
     });
 
@@ -349,11 +349,11 @@
         __proto__: null
     });
 
-    const tagName$1n = 'div';
+    const tagName$1q = 'div';
     transpiler.register('wm-card', () => {
         return {
-            pre: attrs => `<${tagName$1n} wmCard ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1n}>`
+            pre: attrs => `<${tagName$1q} wmCard ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1q}>`
         };
     });
     var card_build = () => { };
@@ -363,11 +363,11 @@
         default: card_build
     });
 
-    const tagName$1m = 'div';
+    const tagName$1p = 'div';
     transpiler.register('wm-card-content', () => {
         return {
-            pre: attrs => `<${tagName$1m} wmCardContent partialContainer ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1m}>`
+            pre: attrs => `<${tagName$1p} wmCardContent partialContainer ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1p}>`
         };
     });
     var cardContent_build = () => { };
@@ -377,11 +377,11 @@
         default: cardContent_build
     });
 
-    const tagName$1l = 'div';
+    const tagName$1o = 'div';
     transpiler.register('wm-card-actions', () => {
         return {
-            pre: attrs => `<${tagName$1l} wmCardActions ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1l}>`
+            pre: attrs => `<${tagName$1o} wmCardActions ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1o}>`
         };
     });
     var cardActions_build = () => { };
@@ -391,11 +391,11 @@
         default: cardActions_build
     });
 
-    const tagName$1k = 'div';
+    const tagName$1n = 'div';
     transpiler.register('wm-card-footer', () => {
         return {
-            pre: attrs => `<${tagName$1k} wmCardFooter ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1k}>`
+            pre: attrs => `<${tagName$1n} wmCardFooter ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1n}>`
         };
     });
     var cardFooter_build = () => { };
@@ -405,11 +405,11 @@
         default: cardFooter_build
     });
 
-    const tagName$1j = 'div';
+    const tagName$1m = 'div';
     transpiler.register('wm-chart', () => {
         return {
-            pre: attrs => `<${tagName$1j} wmChart redrawable aria-label="${attrs.get('type')} Chart" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1j}>`
+            pre: attrs => `<${tagName$1m} wmChart redrawable aria-label="${attrs.get('type')} Chart" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1m}>`
         };
     });
     var chart_build = () => { };
@@ -419,19 +419,19 @@
         default: chart_build
     });
 
-    const tagName$1i = 'div';
+    const tagName$1l = 'div';
     const dataSetKey$4 = 'dataset';
-    const idGen$l = new core.IDGenerator('wm_accordion_ref_');
+    const idGen$m = 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$l.nextUid();
+                const counter = idGen$m.nextUid();
                 shared.set('accordion_ref', counter);
-                return `<${tagName$1i} wmAccordion #${counter}="wmAccordion" role="tablist" aria-multiselectable="true" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$1l} wmAccordion #${counter}="wmAccordion" role="tablist" aria-multiselectable="true" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$1i}>`,
+            post: () => `</${tagName$1l}>`,
             template: (node, shared) => {
                 // check if the accordion is dynamic
                 if (isDynamicAccordion(node)) {
@@ -462,15 +462,15 @@
         default: accordion_build
     });
 
-    const tagName$1h = 'div';
-    const idGen$k = new core.IDGenerator('wm_accordionpane');
+    const tagName$1k = 'div';
+    const idGen$l = new core.IDGenerator('wm_accordionpane');
     transpiler.register('wm-accordionpane', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$k.nextUid();
-                return `<${tagName$1h} #${counter}="wmAccordionPane" [attr.aria-expanded]="${counter}.isActive" wmAccordionPane partialContainer wm-navigable-element="true" role="tab" ${transpiler.getAttrMarkup(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)}>`;
             },
-            post: () => `</${tagName$1h}>`
+            post: () => `</${tagName$1k}>`
         };
     });
     var accordionPane_build = () => { };
@@ -480,11 +480,11 @@
         default: accordionPane_build
     });
 
-    const tagName$1g = 'div';
+    const tagName$1j = 'div';
     transpiler.register('wm-container', () => {
         return {
-            pre: attrs => `<${tagName$1g} wmContainer partialContainer wmSmoothscroll="${attrs.get('smoothscroll') || 'false'}" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1g}>`
+            pre: attrs => `<${tagName$1j} wmContainer partialContainer wmSmoothscroll="${attrs.get('smoothscroll') || 'false'}" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1j}>`
         };
     });
     var container_build = () => { };
@@ -494,11 +494,11 @@
         default: container_build
     });
 
-    const tagName$1f = 'div';
+    const tagName$1i = 'div';
     transpiler.register('wm-gridcolumn', () => {
         return {
-            pre: attrs => `<${tagName$1f} wmLayoutGridColumn ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1f}>`
+            pre: attrs => `<${tagName$1i} wmLayoutGridColumn ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1i}>`
         };
     });
     var layoutGridColumn_build = () => { };
@@ -508,11 +508,11 @@
         default: layoutGridColumn_build
     });
 
-    const tagName$1e = 'div';
+    const tagName$1h = 'div';
     transpiler.register('wm-gridrow', () => {
         return {
-            pre: attrs => `<${tagName$1e} wmLayoutGridRow ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1e}>`
+            pre: attrs => `<${tagName$1h} wmLayoutGridRow ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1h}>`
         };
     });
     var layoutGridRow_build = () => { };
@@ -522,11 +522,11 @@
         default: layoutGridRow_build
     });
 
-    const tagName$1d = 'div';
+    const tagName$1g = 'div';
     transpiler.register('wm-layoutgrid', () => {
         return {
-            pre: attrs => `<${tagName$1d} wmLayoutGrid ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1d}>`
+            pre: attrs => `<${tagName$1g} wmLayoutGrid ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1g}>`
         };
     });
     var layoutGrid_build = () => { };
@@ -536,21 +536,21 @@
         default: layoutGrid_build
     });
 
-    const tagName$1c = 'div';
-    const idGen$j = new core.IDGenerator('wm_panel');
+    const tagName$1f = 'div';
+    const idGen$k = new core.IDGenerator('wm_panel');
     transpiler.register('wm-panel', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$j.nextUid();
-                return `<${tagName$1c} wmPanel #${counter}="wmPanel" partialContainer wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`;
+                const counter = idGen$k.nextUid();
+                return `<${tagName$1f} wmPanel #${counter}="wmPanel" partialContainer wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$1c}>`
+            post: () => `</${tagName$1f}>`
         };
     });
     transpiler.register('wm-panel-footer', () => {
         return {
-            pre: attrs => `<${tagName$1c} wmPanelFooter ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1c}>`
+            pre: attrs => `<${tagName$1f} wmPanelFooter ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1f}>`
         };
     });
     var panel_build = () => { };
@@ -560,11 +560,11 @@
         default: panel_build
     });
 
-    const tagName$1b = 'div';
+    const tagName$1e = 'div';
     transpiler.register('wm-segmented-control', () => {
         return {
-            pre: attrs => `<${tagName$1b} wmSegmentedControl ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1b}>`
+            pre: attrs => `<${tagName$1e} wmSegmentedControl ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1e}>`
         };
     });
     var segmentedControl_build = () => { };
@@ -574,11 +574,11 @@
         default: segmentedControl_build
     });
 
-    const tagName$1a = 'li';
+    const tagName$1d = 'li';
     transpiler.register('wm-segment-content', () => {
         return {
-            pre: attrs => `<${tagName$1a} wmSegmentContent partialContainer wmSmoothscroll=${attrs.get('smoothscroll') || 'false'} wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$1a}>`
+            pre: attrs => `<${tagName$1d} wmSegmentContent partialContainer wmSmoothscroll=${attrs.get('smoothscroll') || 'false'} wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1d}>`
         };
     });
     var segmentContent_build = () => { };
@@ -614,19 +614,19 @@
         default: repeatTemplate_build
     });
 
-    const tagName$19 = 'div';
+    const tagName$1c = 'div';
     const dataSetKey$3 = 'dataset';
-    const idGen$i = new core.IDGenerator('wm_tabs_ref_');
+    const idGen$j = 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$i.nextUid();
+                const counter = idGen$j.nextUid();
                 shared.set('tabs_ref', counter);
-                return `<${tagName$19} wmTabs #${counter}="wmTabs" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$1c} wmTabs #${counter}="wmTabs" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$19}>`,
+            post: () => `</${tagName$1c}>`,
             template: (node, shared) => {
                 // check if the tab widget is dynamic
                 if (isDynamicTabs(node)) {
@@ -657,11 +657,11 @@
         default: tabs_build
     });
 
-    const tagName$18 = 'div';
+    const tagName$1b = 'div';
     transpiler.register('wm-tabpane', () => {
         return {
-            pre: attrs => `<${tagName$18} wmTabPane  partialContainer ${transpiler.getAttrMarkup(attrs)} wm-navigable-element="true" role="tabpanel">`,
-            post: () => `</${tagName$18}>`
+            pre: attrs => `<${tagName$1b} wmTabPane  partialContainer ${transpiler.getAttrMarkup(attrs)} wm-navigable-element="true" role="tabpanel">`,
+            post: () => `</${tagName$1b}>`
         };
     });
     var tabPane_build = () => { };
@@ -671,11 +671,11 @@
         default: tabPane_build
     });
 
-    const tagName$17 = 'div';
+    const tagName$1a = 'div';
     transpiler.register('wm-tile', () => {
         return {
-            pre: attrs => `<${tagName$17} wmTile aria-describedby="Tile" wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$17}>`
+            pre: attrs => `<${tagName$1a} wmTile aria-describedby="Tile" wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1a}>`
         };
     });
     var tile_build = () => { };
@@ -685,11 +685,11 @@
         default: tile_build
     });
 
-    const tagName$16 = 'div';
+    const tagName$19 = 'div';
     transpiler.register('wm-wizard', () => {
         return {
-            pre: attrs => `<${tagName$16} wmWizard role="tablist" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$16}>`
+            pre: attrs => `<${tagName$19} wmWizard role="tablist" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$19}>`
         };
     });
     var wizard_build = () => { };
@@ -699,16 +699,16 @@
         default: wizard_build
     });
 
-    const tagName$15 = 'form';
-    const idGen$h = new core.IDGenerator('wizard_step_id_');
+    const tagName$18 = 'form';
+    const idGen$i = new core.IDGenerator('wizard_step_id_');
     transpiler.register('wm-wizardstep', () => {
         return {
             pre: attrs => {
-                const counter = idGen$h.nextUid();
-                return `<${tagName$15} wmWizardStep #${counter}="wmWizardStep" ${transpiler.getAttrMarkup(attrs)}>
+                const counter = idGen$i.nextUid();
+                return `<${tagName$18} wmWizardStep #${counter}="wmWizardStep" ${transpiler.getAttrMarkup(attrs)}>
                        <ng-template [ngIf]="${counter}.isInitialized">`;
             },
-            post: () => `</ng-template></${tagName$15}>`
+            post: () => `</ng-template></${tagName$18}>`
         };
     });
     var wizardStep_build = () => { };
@@ -718,15 +718,15 @@
         default: wizardStep_build
     });
 
-    const tagName$14 = 'button';
-    const idGen$g = new core.IDGenerator('wm_barcodescanner');
+    const tagName$17 = 'button';
+    const idGen$h = new core.IDGenerator('wm_barcodescanner');
     transpiler.register('wm-barcodescanner', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$g.nextUid();
-                return `<${tagName$14} wmBarcodescanner #${counter}="wmBarcodescanner" [attr.aria-label]="${counter}.hint || 'Barcode scanner'"  ${transpiler.getAttrMarkup(attrs)}>`;
+                const counter = idGen$h.nextUid();
+                return `<${tagName$17} wmBarcodescanner #${counter}="wmBarcodescanner" [attr.aria-label]="${counter}.hint || 'Barcode scanner'"  ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$14}>`
+            post: () => `</${tagName$17}>`
         };
     });
     var barcodeScanner_build = () => { };
@@ -736,15 +736,15 @@
         default: barcodeScanner_build
     });
 
-    const tagName$13 = 'button';
-    const idGen$f = new core.IDGenerator('wm_camera');
+    const tagName$16 = 'button';
+    const idGen$g = new core.IDGenerator('wm_camera');
     transpiler.register('wm-camera', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$f.nextUid();
-                return `<${tagName$13} type='button' wmCamera #${counter}="wmCamera" [attr.aria-label]="${counter}.hint || 'Camera'"  ${transpiler.getAttrMarkup(attrs)}>`;
+                const counter = idGen$g.nextUid();
+                return `<${tagName$16} type='button' wmCamera #${counter}="wmCamera" [attr.aria-label]="${counter}.hint || 'Camera'"  ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$13}>`
+            post: () => `</${tagName$16}>`
         };
     });
     var camera_build = () => { };
@@ -754,11 +754,11 @@
         default: camera_build
     });
 
-    const tagName$12 = 'div';
+    const tagName$15 = 'div';
     transpiler.register('wm-alertdialog', () => {
         return {
-            pre: attrs => `<${tagName$12} wmAlertDialog role="alertdialog" wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$12}>`
+            pre: attrs => `<${tagName$15} wmAlertDialog role="alertdialog" wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$15}>`
         };
     });
     var alertDialog_build = () => { };
@@ -768,11 +768,11 @@
         default: alertDialog_build
     });
 
-    const tagName$11 = 'div';
+    const tagName$14 = 'div';
     transpiler.register('wm-confirmdialog', () => {
         return {
-            pre: attrs => `<${tagName$11} wmConfirmDialog wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$11}>`
+            pre: attrs => `<${tagName$14} wmConfirmDialog wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$14}>`
         };
     });
     var confirmDialog_build = () => { };
@@ -782,11 +782,11 @@
         default: confirmDialog_build
     });
 
-    const tagName$10 = 'div';
+    const tagName$13 = 'div';
     transpiler.register('wm-dialogactions', () => {
         return {
-            pre: attrs => `<ng-template #dialogFooter><${tagName$10} wmDialogFooter data-identfier="actions" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$10}></ng-template>`
+            pre: attrs => `<ng-template #dialogFooter><${tagName$13} wmDialogFooter data-identfier="actions" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$13}></ng-template>`
         };
     });
     var dialogFooter_build = () => { };
@@ -796,11 +796,11 @@
         default: dialogFooter_build
     });
 
-    const tagName$$ = 'div';
+    const tagName$12 = 'div';
     transpiler.register('wm-dialog', () => {
         return {
-            pre: attrs => `<${tagName$$} wmDialog ${transpiler.getAttrMarkup(attrs)} aria-modal="true" role="dialog" wm-navigable-element="true"><ng-template #dialogBody>`,
-            post: () => `</ng-template></${tagName$$}>`
+            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}>`
         };
     });
     // Todo:vinay remove wm-view in migration
@@ -817,11 +817,11 @@
         default: dialog_build
     });
 
-    const tagName$_ = 'div';
+    const tagName$11 = 'div';
     transpiler.register('wm-iframedialog', () => {
         return {
-            pre: attrs => `<${tagName$_} wmIframeDialog wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$_}>`
+            pre: attrs => `<${tagName$11} wmIframeDialog wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$11}>`
         };
     });
     var iframeDialog_build = () => { };
@@ -831,11 +831,11 @@
         default: iframeDialog_build
     });
 
-    const tagName$Z = 'div';
+    const tagName$10 = 'div';
     transpiler.register('wm-logindialog', () => {
         return {
-            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}>`
+            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}>`
         };
     });
     var loginDialog_build = () => { };
@@ -845,7 +845,7 @@
         default: loginDialog_build
     });
 
-    const tagName$Y = 'div';
+    const tagName$$ = 'div';
     transpiler.register('wm-pagedialog', () => {
         return {
             pre: (attrs, shared) => {
@@ -871,14 +871,14 @@
                     shared.set('hasPartialContent', true);
                     containerMarkup += `<ng-template><div wmContainer #partial partialContainer ${contentMarkup} width="100%" height="100%" ${onLoadEvtMarkup}>`;
                 }
-                return `<${tagName$Y} 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$Y}>`;
+                return `${preContent}</${tagName$$}>`;
             }
         };
     });
@@ -957,8 +957,8 @@
         return (fieldTypeWidgetTypeMap[colDef.type] && fieldTypeWidgetTypeMap[colDef.type][0]) || core.FormWidgetType.TEXT;
     };
 
-    const tagName$X = 'div';
-    const idGen$e = new core.IDGenerator('formfield_');
+    const tagName$_ = 'div';
+    const idGen$f = new core.IDGenerator('formfield_');
     const getEventsTemplate = (attrs) => {
         const eventAttrs = new Map();
         if (!attrs.has('focus.event')) {
@@ -1009,12 +1009,13 @@
     };
     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}`;
+        const defaultTmpl = `[class.hidden]="!${options.pCounter}.isUpdateMode && ${options.counter}.viewmodewidget !== 'default'" ${formControl} ${options.eventsTmpl} ${conditionalClass} ${tmplRef} ${widgetName} ${customWidgetName ? `widgetname=${customWidgetName}` : ''}`;
         return core.getFormWidgetTemplate(options.widgetType, defaultTmpl, attrs, { counter: options.counter, pCounter: options.pCounter });
     };
     const getTemplate = (attrs, widgetType, eventsTmpl, counter, pCounter, isInList) => {
@@ -1058,7 +1059,7 @@
         return {
             requires: ['wm-form', 'wm-liveform', 'wm-livefilter', 'wm-list'],
             pre: (attrs, shared, parentForm, parentLiveForm, parentFilter, parentList) => {
-                const counter = idGen$e.nextUid();
+                const counter = idGen$f.nextUid();
                 const parent = parentForm || parentLiveForm || parentFilter;
                 const pCounter = (parent && parent.get('form_reference')) || 'form';
                 const widgetType = attrs.get('widget') || core.FormWidgetType.TEXT;
@@ -1081,7 +1082,7 @@
                 else {
                     setDefaultPlaceholder(attrs, widgetType, 2);
                 }
-                return `<${tagName$X} data-role="${dataRole}" [formGroup]="${pCounter}.ngform" wmFormField wmCaptionPosition #${counter}="wmFormField" widgettype="${widgetType}" ${transpiler.getFormMarkupAttr(attrs)}>
+                return `<${tagName$_} 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,
@@ -1097,7 +1098,7 @@
                             </div>
                         </div>`;
             },
-            post: () => `</${tagName$X}>`,
+            post: () => `</${tagName$_}>`,
             provide: (attrs, shared) => {
                 const provider = new Map();
                 provider.set('form_reference', shared.get('counter'));
@@ -1119,11 +1120,11 @@
         default: formField_build
     });
 
-    const tagName$W = 'div';
+    const tagName$Z = 'div';
     const registerAction = (tmpl) => {
         return {
-            pre: attrs => `<${tagName$W} wmFormAction name="${attrs.get('name') || attrs.get('key')}" ${transpiler.getAttrMarkup(attrs)} ${tmpl}>`,
-            post: () => `</${tagName$W}>`
+            pre: attrs => `<${tagName$Z} wmFormAction name="${attrs.get('name') || attrs.get('key')}" ${transpiler.getAttrMarkup(attrs)} ${tmpl}>`,
+            post: () => `</${tagName$Z}>`
         };
     };
     transpiler.register('wm-form-action', registerAction.bind(undefined, ''));
@@ -1135,8 +1136,8 @@
         default: formAction_build
     });
 
-    const tagName$V = 'form';
-    const idGen$d = new core.IDGenerator('form_');
+    const tagName$Y = 'form';
+    const idGen$e = new core.IDGenerator('form_');
     const formWidgets$1 = new Set([
         'wm-text',
         'wm-textarea',
@@ -1204,7 +1205,7 @@
                 let tmpl;
                 let dialogId;
                 const role = parentLoginWidget && parentLoginWidget.get('isLogin') ? 'app-login' : '';
-                const counter = idGen$d.nextUid();
+                const counter = idGen$e.nextUid();
                 const dependsOn = attrs.get('dependson') ? `dependson="${attrs.get('dependson')}"` : '';
                 if (dependsOn) {
                     attrs.set('dependsontable', attrs.get('dependson'));
@@ -1212,7 +1213,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$V} wmForm data-role="${role}" ${directiveAttr} #${counter} ngNativeValidate [formGroup]="${counter}.ngform" [noValidate]="${counter}.validationtype !== 'html'"
+                const liveFormTmpl = `<${tagName$Y} 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);
@@ -1262,12 +1263,12 @@
                     return '</form></ng-template></div></div>';
                 }
                 if (attrs.get('formlayout') === 'page') {
-                    return `</div></${tagName$V}>`;
+                    return `</div></${tagName$Y}>`;
                 }
                 if (attrs.get('dependsontable')) {
-                    return `</${tagName$V}></div>`;
+                    return `</${tagName$Y}></div>`;
                 }
-                return `</${tagName$V}>`;
+                return `</${tagName$Y}>`;
             },
             provide: (attrs, shared) => {
                 const provider = new Map();
@@ -1286,14 +1287,14 @@
         default: form_build
     });
 
-    const tagName$U = 'div';
+    const tagName$X = 'div';
     transpiler.register('wm-calendar', () => {
         return {
             pre: (attrs) => {
                 let viewType = attrs.get('view') ? attrs.get('view') + ' view' : 'month view';
-                return `<${tagName$U} wmCalendar redrawable style="width:100%" aria-label="${viewType}" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$X} wmCalendar redrawable style="width:100%" aria-label="${viewType}" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$U}>`
+            post: () => `</${tagName$X}>`
         };
     });
     var calendar_build = () => { };
@@ -1303,11 +1304,11 @@
         default: calendar_build
     });
 
-    const tagName$T = 'ul';
+    const tagName$W = 'ul';
     transpiler.register('wm-chips', () => {
         return {
-            pre: attrs => `<${tagName$T} wmChips role="listbox" ${transpiler.getAttrMarkup(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$T}>`
+            pre: attrs => `<${tagName$W} wmChips role="listbox" ${transpiler.getAttrMarkup(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$W}>`
         };
     });
     var chips_build = () => { };
@@ -1317,11 +1318,11 @@
         default: chips_build
     });
 
-    const tagName$S = 'div';
+    const tagName$V = 'div';
     transpiler.register('wm-colorpicker', () => {
         return {
-            pre: attrs => `<${tagName$S} wmColorPicker ${transpiler.getAttrMarkup(attrs)} role="input" ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$S}>`
+            pre: attrs => `<${tagName$V} wmColorPicker ${transpiler.getAttrMarkup(attrs)} role="input" ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$V}>`
         };
     });
     var colorPicker_build = () => { };
@@ -1331,11 +1332,11 @@
         default: colorPicker_build
     });
 
-    const tagName$R = 'div';
+    const tagName$U = 'div';
     transpiler.register('wm-currency', () => {
         return {
-            pre: attrs => `<${tagName$R} wmCurrency ${transpiler.getAttrMarkup(attrs)} role="input" ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$R}>`
+            pre: attrs => `<${tagName$U} wmCurrency ${transpiler.getAttrMarkup(attrs)} role="input" ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$U}>`
         };
     });
     var currency_build = () => { };
@@ -1345,11 +1346,11 @@
         default: currency_build
     });
 
-    const tagName$Q = 'div';
+    const tagName$T = 'div';
     transpiler.register('wm-buttongroup', () => {
         return {
-            pre: attrs => `<${tagName$Q} wmButtonGroup role="group" aria-labelledby="button group" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$Q}>`
+            pre: attrs => `<${tagName$T} wmButtonGroup role="group" aria-labelledby="button group" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$T}>`
         };
     });
     var buttonGroup_build = () => { };
@@ -1359,15 +1360,15 @@
         default: buttonGroup_build
     });
 
-    const tagName$P = 'button';
-    const idGen$c = new core.IDGenerator('wm_button');
+    const tagName$S = 'button';
+    const idGen$d = new core.IDGenerator('wm_button');
     transpiler.register('wm-button', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$c.nextUid();
-                return `<${tagName$P} wmButton #${counter}="wmButton" [attr.aria-label]="${counter}.hint || ${counter}.caption || null" ${transpiler.getAttrMarkup(attrs)}>`;
+                const counter = idGen$d.nextUid();
+                return `<${tagName$S} wmButton #${counter}="wmButton" [attr.aria-label]="${counter}.hint || ${counter}.caption || null" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$P}>`
+            post: () => `</${tagName$S}>`
         };
     });
     var button_build = () => { };
@@ -1377,11 +1378,11 @@
         default: button_build
     });
 
-    const tagName$O = 'div';
+    const tagName$R = 'div';
     transpiler.register('wm-checkbox', () => {
         return {
-            pre: attrs => `<${tagName$O} wmCheckbox ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$O}>`
+            pre: attrs => `<${tagName$R} wmCheckbox ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$R}>`
         };
     });
     var checkbox_build = () => { };
@@ -1391,11 +1392,11 @@
         default: checkbox_build
     });
 
-    const tagName$N = 'ul';
+    const tagName$Q = 'ul';
     transpiler.register('wm-checkboxset', () => {
         return {
-            pre: attrs => `<${tagName$N} role="group" wmCheckboxset ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$N}>`
+            pre: attrs => `<${tagName$Q} role="group" wmCheckboxset ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$Q}>`
         };
     });
     var checkboxset_build = () => { };
@@ -1405,11 +1406,11 @@
         default: checkboxset_build
     });
 
-    const tagName$M = 'div';
+    const tagName$P = 'div';
     transpiler.register('wm-composite', () => {
         return {
-            pre: attrs => `<${tagName$M} wmComposite wmCaptionPosition ${transpiler.setChildAttrs(attrs)} ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$M}${transpiler.clearChildAttrs()}>`
+            pre: attrs => `<${tagName$P} wmComposite wmCaptionPosition ${transpiler.setChildAttrs(attrs)} ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$P}${transpiler.clearChildAttrs()}>`
         };
     });
     var composite_build = () => { };
@@ -1419,11 +1420,11 @@
         default: composite_build
     });
 
-    const tagName$L = 'div';
+    const tagName$O = 'div';
     transpiler.register('wm-number', () => {
         return {
-            pre: attrs => `<${tagName$L} wmNumber ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$L}>`
+            pre: attrs => `<${tagName$O} wmNumber ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$O}>`
         };
     });
     var number_build = () => { };
@@ -1433,11 +1434,11 @@
         default: number_build
     });
 
-    const tagName$K = 'ul';
+    const tagName$N = 'ul';
     transpiler.register('wm-radioset', () => {
         return {
-            pre: attrs => `<${tagName$K} role="radiogroup" wmRadioset ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$K}>`
+            pre: attrs => `<${tagName$N} role="radiogroup" wmRadioset ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$N}>`
         };
     });
     var radioset_build = () => { };
@@ -1447,11 +1448,11 @@
         default: radioset_build
     });
 
-    const tagName$J = 'wm-select';
+    const tagName$M = 'wm-select';
     transpiler.register('wm-select', () => {
         return {
-            pre: attrs => `<${tagName$J} ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)}  ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$J}>`
+            pre: attrs => `<${tagName$M} ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)}  ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$M}>`
         };
     });
     var select_build = () => { };
@@ -1461,15 +1462,15 @@
         default: select_build
     });
 
-    const tagName$I = 'div';
-    const idGen$b = new core.IDGenerator('wm_switch');
+    const tagName$L = 'div';
+    const idGen$c = new core.IDGenerator('wm_switch');
     transpiler.register('wm-switch', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$b.nextUid();
-                return `<${tagName$I} wmSwitch #${counter}="wmSwitch" [attr.aria-label]="${counter}.hint || 'Switch button'" ${transpiler.getFormMarkupAttr(attrs)} ${core.getNgModelAttr(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)}>`;
             },
-            post: () => `</${tagName$I}>`
+            post: () => `</${tagName$L}>`
         };
     });
     var switch_build = () => { };
@@ -1479,11 +1480,11 @@
         default: switch_build
     });
 
-    const tagName$H = 'wm-input';
+    const tagName$K = 'wm-input';
     transpiler.register('wm-text', () => {
         return {
-            pre: attrs => `<${tagName$H} ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$H}>`
+            pre: attrs => `<${tagName$K} ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$K}>`
         };
     });
     var text_build = () => { };
@@ -1493,11 +1494,11 @@
         default: text_build
     });
 
-    const tagName$G = 'wm-textarea';
+    const tagName$J = 'wm-textarea';
     transpiler.register('wm-textarea', () => {
         return {
-            pre: attrs => `<${tagName$G} ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$G}>`
+            pre: attrs => `<${tagName$J} ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$J}>`
         };
     });
     var textarea_build = () => { };
@@ -1507,11 +1508,11 @@
         default: textarea_build
     });
 
-    const tagName$F = 'div';
+    const tagName$I = 'div';
     transpiler.register('wm-datetime', () => {
         return {
-            pre: attrs => `<${tagName$F} wmDateTime ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$F}>`
+            pre: attrs => `<${tagName$I} wmDateTime ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$I}>`
         };
     });
     var dateTime_build = () => { };
@@ -1521,11 +1522,11 @@
         default: dateTime_build
     });
 
-    const tagName$E = 'div';
+    const tagName$H = 'div';
     transpiler.register('wm-date', () => {
         return {
-            pre: attrs => `<${tagName$E} wmDate ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$E}>`
+            pre: attrs => `<${tagName$H} wmDate ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$H}>`
         };
     });
     var date_build = () => { };
@@ -1535,11 +1536,11 @@
         default: date_build
     });
 
-    const tagName$D = 'div';
+    const tagName$G = 'div';
     transpiler.register('wm-time', () => {
         return {
-            pre: attrs => `<${tagName$D} wmTime ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$D}>`
+            pre: attrs => `<${tagName$G} wmTime ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$G}>`
         };
     });
     var time_build = () => { };
@@ -1549,7 +1550,7 @@
         default: time_build
     });
 
-    const tagName$C = 'div';
+    const tagName$F = 'div';
     transpiler.register('wm-fileupload', () => {
         return {
             pre: attrs => {
@@ -1557,9 +1558,9 @@
                     const onSelectBinding = transpiler.getDataSource(attrs.get('select.event'));
                     attrs.set('datasource.bind', onSelectBinding);
                 }
-                return `<${tagName$C} wmFileUpload ${transpiler.getAttrMarkup(attrs)} role="input">`;
+                return `<${tagName$F} wmFileUpload ${transpiler.getAttrMarkup(attrs)} role="input">`;
             },
-            post: () => `</${tagName$C}>`
+            post: () => `</${tagName$F}>`
         };
     });
     var fileUpload_build = () => { };
@@ -1569,11 +1570,11 @@
         default: fileUpload_build
     });
 
-    const tagName$B = 'div';
+    const tagName$E = 'div';
     transpiler.register('wm-rating', () => {
         return {
-            pre: attrs => `<${tagName$B} wmRating ${transpiler.getFormMarkupAttr(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$B}>`
+            pre: attrs => `<${tagName$E} wmRating ${transpiler.getFormMarkupAttr(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$E}>`
         };
     });
     var rating_build = () => { };
@@ -1583,11 +1584,11 @@
         default: rating_build
     });
 
-    const tagName$A = 'div';
+    const tagName$D = 'div';
     transpiler.register('wm-slider', () => {
         return {
-            pre: attrs => `<${tagName$A} wmSlider ${transpiler.getAttrMarkup(attrs)} ${core.getNgModelAttr(attrs)}>`,
-            post: () => `</${tagName$A}>`
+            pre: attrs => `<${tagName$D} wmSlider ${transpiler.getAttrMarkup(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$D}>`
         };
     });
     var slider_build = () => { };
@@ -1598,7 +1599,7 @@
     });
 
     const wmlistTag = 'wm-list';
-    const tagName$z = 'div';
+    const tagName$C = 'div';
     const dataSetKey$2 = 'dataset';
     function copyAttribute$1(from, fromAttrName, to, toAttrName) {
         const fromAttr = from.attrs.find(a => a.name === fromAttrName);
@@ -1646,8 +1647,8 @@
                     copyAttribute$1(template, 'height', node, 'thumbnailheight');
                 }
             },
-            pre: attrs => `<${tagName$z} wmMediaList ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$z}>`
+            pre: attrs => `<${tagName$C} wmMediaList ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$C}>`
         };
     });
     var mediaList_build = () => { };
@@ -1657,11 +1658,11 @@
         default: mediaList_build
     });
 
-    const tagName$y = 'ng-template';
+    const tagName$B = 'ng-template';
     transpiler.register('wm-media-template', () => {
         return {
-            pre: () => `<${tagName$y} #mediaListTemplate let-item="item" let-index="index">`,
-            post: () => `</${tagName$y}>`
+            pre: () => `<${tagName$B} #mediaListTemplate let-item="item" let-index="index">`,
+            post: () => `</${tagName$B}>`
         };
     });
     var mediaListItem_build = () => { };
@@ -1745,16 +1746,16 @@
         default: list_build
     });
 
-    const tagName$x = 'div';
-    const idGen$a = new core.IDGenerator('liveform_dialog_id_');
+    const tagName$A = 'div';
+    const idGen$b = new core.IDGenerator('liveform_dialog_id_');
     transpiler.register('wm-livetable', () => {
         return {
             pre: (attrs, shared) => {
-                const counter = idGen$a.nextUid();
+                const counter = idGen$b.nextUid();
                 shared.set('counter', counter);
-                return `<${tagName$x} wmLiveTable ${transpiler.getAttrMarkup(attrs)} dialogid="${counter}">`;
+                return `<${tagName$A} wmLiveTable ${transpiler.getAttrMarkup(attrs)} dialogid="${counter}">`;
             },
-            post: () => `</${tagName$x}>`,
+            post: () => `</${tagName$A}>`,
             provide: (attrs, shared) => {
                 const provider = new Map();
                 provider.set('liveform_dialog_id', shared.get('counter'));
@@ -1769,15 +1770,15 @@
         default: liveTable_build
     });
 
-    const tagName$w = 'p';
-    const idGen$9 = new core.IDGenerator('wm_message');
+    const tagName$z = 'p';
+    const idGen$a = new core.IDGenerator('wm_message');
     transpiler.register('wm-message', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$9.nextUid();
-                return `<${tagName$w} wmMessage tabindex="0" #${counter}="wmMessage" ${transpiler.getAttrMarkup(attrs)}>`;
+                const counter = idGen$a.nextUid();
+                return `<${tagName$z} wmMessage tabindex="0" #${counter}="wmMessage" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$w}>`
+            post: () => `</${tagName$z}>`
         };
     });
     var message_build = () => { };
@@ -1787,11 +1788,11 @@
         default: message_build
     });
 
-    const tagName$v = 'ol';
+    const tagName$y = 'ol';
     transpiler.register('wm-breadcrumb', () => {
         return {
-            pre: attrs => `<${tagName$v} wmBreadcrumb ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$v}>`
+            pre: attrs => `<${tagName$y} wmBreadcrumb ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$y}>`
         };
     });
     var breadcrumb_build = () => { };
@@ -1801,11 +1802,23 @@
         default: breadcrumb_build
     });
 
-    const tagName$u = 'div';
+    const tagName$x = 'div';
     transpiler.register('wm-menu', () => {
         return {
-            pre: attrs => `<${tagName$u} wmMenu dropdown ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$u}>`
+            pre: attrs => {
+                const menuWidth = attrs.get("width");
+                let styleBinding = '';
+                if (menuWidth) {
+                    if (menuWidth.indexOf('%') > -1 || menuWidth.indexOf('px') > -1) {
+                        styleBinding = `[ngStyle]="{'width': '${menuWidth}'}"`;
+                        return `<${tagName$x} wmMenu dropdown ${transpiler.getAttrMarkup(attrs)} ${styleBinding}>`;
+                    }
+                }
+                else {
+                    return `<${tagName$x} wmMenu dropdown ${transpiler.getAttrMarkup(attrs)}>`;
+                }
+            },
+            post: () => `</${tagName$x}>`
         };
     });
     var menu_build = () => { };
@@ -1815,11 +1828,11 @@
         default: menu_build
     });
 
-    const tagName$t = 'li';
+    const tagName$w = 'li';
     transpiler.register('wm-nav-item', () => {
         return {
-            pre: attrs => `<${tagName$t} wmNavItem role="listitem" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$t}>`
+            pre: attrs => `<${tagName$w} wmNavItem role="listitem" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$w}>`
         };
     });
     var navItem_build = () => { };
@@ -1829,11 +1842,11 @@
         default: navItem_build
     });
 
-    const tagName$s = 'ul';
+    const tagName$v = 'ul';
     transpiler.register('wm-nav', () => {
         return {
-            pre: attrs => `<${tagName$s} wmNav data-element-type="wmNav" data-role="page-header" role="list" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$s}>`
+            pre: attrs => `<${tagName$v} wmNav data-element-type="wmNav" data-role="page-header" role="list" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$v}>`
         };
     });
     var nav_build = () => { };
@@ -1843,11 +1856,11 @@
         default: nav_build
     });
 
-    const tagName$r = 'nav';
+    const tagName$u = 'nav';
     transpiler.register('wm-navbar', () => {
         return {
-            pre: attrs => `<${tagName$r} wmNavbar data-element-type="wmNavbar" role="navigation" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$r}>`
+            pre: attrs => `<${tagName$u} wmNavbar data-element-type="wmNavbar" role="navigation" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$u}>`
         };
     });
     var navbar_build = () => { };
@@ -1857,7 +1870,7 @@
         default: navbar_build
     });
 
-    const tagName$q = 'wm-popover';
+    const tagName$t = 'wm-popover';
     transpiler.register('wm-popover', () => {
         return {
             requires: ['wm-table'],
@@ -1877,7 +1890,7 @@
                     popoverTemplate = `<div wmContainer #partial partialContainer ${contentMarkup}>`;
                     shared.set('hasPopoverContent', true);
                 }
-                let markup = `<${tagName$q} wmPopover ${transpiler.getAttrMarkup(attrs)}>`;
+                let markup = `<${tagName$t} 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
@@ -1891,7 +1904,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$q}>`;
+                return `${markup}<div tabindex="0" class="popover-end sr-only" aria-label="">popover content ended</div></ng-template></${tagName$t}>`;
             }
         };
     });
@@ -1902,16 +1915,16 @@
         default: popover_build
     });
 
-    const tagName$p = 'div';
+    const tagName$s = 'div';
     const findChild = (node, childName) => {
         const child = node && node.children.find(e => (e instanceof compiler.Element && e.name === childName));
         return child;
     };
-    const createElement$3 = name => {
-        return new compiler.Element(name, [], [], noSpan$3, noSpan$3, noSpan$3);
+    const createElement$4 = name => {
+        return new compiler.Element(name, [], [], noSpan$4, noSpan$4, noSpan$4);
     };
-    const addAtrribute$3 = (node, name, value) => {
-        const attr = new compiler.Attribute(name, value, noSpan$3, noSpan$3, noSpan$3, undefined, undefined);
+    const addAtrribute$4 = (node, name, value) => {
+        const attr = new compiler.Attribute(name, value, noSpan$4, noSpan$4, noSpan$4, undefined, undefined);
         node.attrs.push(attr);
     };
     const getElementNode = (name, node) => {
@@ -1932,8 +1945,8 @@
         });
         return elementNode;
     };
-    const noSpan$3 = {};
-    const idGen$8 = new core.IDGenerator('wm_page');
+    const noSpan$4 = {};
+    const idGen$9 = new core.IDGenerator('wm_page');
     transpiler.register('wm-page', () => {
         return {
             template: (node) => {
@@ -1942,24 +1955,24 @@
                     pageContentNode = getElementNode('wm-page-content', getElementNode('wm-content', node));
                 }
                 if (pageContentNode) {
-                    const conditionalNode = createElement$3('ng-container');
-                    addAtrribute$3(conditionalNode, '*ngIf', 'compilePageContent');
+                    const conditionalNode = createElement$4('ng-container');
+                    addAtrribute$4(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$3('div');
-                        addAtrribute$3(loader, 'wmPageContentLoader', '');
-                        addAtrribute$3(loader, '*ngIf', '!showPageContent');
+                        const loader = createElement$4('div');
+                        addAtrribute$4(loader, 'wmPageContentLoader', '');
+                        addAtrribute$4(loader, '*ngIf', '!showPageContent');
                         pageContentNode.children.push(loader);
                     }
                 }
             },
             pre: (attrs) => {
-                const counter = idGen$8.nextUid();
-                return `<${tagName$p} wmPage #${counter}="wmPage" data-role="pageContainer" [attr.aria-label]="${counter}.hint" ${transpiler.getAttrMarkup(attrs)}>`;
+                const counter = idGen$9.nextUid();
+                return `<${tagName$s} wmPage #${counter}="wmPage" data-role="pageContainer" [attr.aria-label]="${counter}.hint" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$p}>`
+            post: () => `</${tagName$s}>`
         };
     });
     var page_build = () => { };
@@ -1969,15 +1982,15 @@
         default: page_build
     });
 
-    const tagName$o = 'div';
-    const idGen$7 = new core.IDGenerator('wm_layout');
+    const tagName$r = 'div';
+    const idGen$8 = new core.IDGenerator('wm_layout');
     transpiler.register('wm-layout', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$7.nextUid();
-                return `<${tagName$o} wmLayout #${counter}="wmLayout" data-role="pageContainer" [attr.aria-label]="${counter}.hint || 'Main page content'" ${transpiler.getAttrMarkup(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)}>`;
             },
-            post: () => `</${tagName$o}>`
+            post: () => `</${tagName$r}>`
         };
     });
     var layout_build = () => { };
@@ -1987,11 +2000,11 @@
         default: layout_build
     });
 
-    const tagName$n = 'router-outlet';
+    const tagName$q = 'router-outlet';
     transpiler.register('wm-router-outlet', () => {
         return {
-            pre: attrs => `<div wmRouterOutlet name="wmRouterOutlet" ${transpiler.getAttrMarkup(attrs)}><${tagName$n} (activate)="onActivate($event)">`,
-            post: () => `</${tagName$n}></div>`
+            pre: attrs => `<div wmRouterOutlet name="wmRouterOutlet" ${transpiler.getAttrMarkup(attrs)}><${tagName$q} (activate)="onActivate($event)">`,
+            post: () => `</${tagName$q}></div>`
         };
     });
     var routerOutlet_build = () => { };
@@ -2001,11 +2014,11 @@
         default: routerOutlet_build
     });
 
-    const tagName$m = 'nav';
+    const tagName$p = 'nav';
     transpiler.register('wm-pagination', () => {
         return {
-            pre: attrs => `<${tagName$m} wmPagination data-identifier="pagination" aria-label="Page navigation" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$m}>`
+            pre: attrs => `<${tagName$p} wmPagination data-identifier="pagination" aria-label="Page navigation" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$p}>`
         };
     });
     var pagination_build = () => { };
@@ -2015,11 +2028,11 @@
         default: pagination_build
     });
 
-    const tagName$l = 'main';
+    const tagName$o = 'main';
     transpiler.register('wm-content', () => {
         return {
-            pre: attrs => `<${tagName$l} wmContent data-role="page-content" role="main" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$l}>`
+            pre: attrs => `<${tagName$o} wmContent data-role="page-content" role="main" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$o}>`
         };
     });
     var content_build = () => { };
@@ -2029,15 +2042,15 @@
         default: content_build
     });
 
-    const tagName$k = 'footer';
-    const idGen$6 = new core.IDGenerator('wm_footer');
+    const tagName$n = 'footer';
+    const idGen$7 = new core.IDGenerator('wm_footer');
     transpiler.register('wm-footer', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$6.nextUid();
-                return `<${tagName$k} wmFooter #${counter}="wmFooter" partialContainer data-role="page-footer" role="contentinfo" [attr.aria-label]="${counter}.hint || 'Page footer'" ${transpiler.getAttrMarkup(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)}>`;
             },
-            post: () => `</${tagName$k}>`
+            post: () => `</${tagName$n}>`
         };
     });
     var footer_build = () => { };
@@ -2047,15 +2060,15 @@
         default: footer_build
     });
 
-    const tagName$j = 'header';
-    const idGen$5 = new core.IDGenerator('wm_header');
+    const tagName$m = 'header';
+    const idGen$6 = new core.IDGenerator('wm_header');
     transpiler.register('wm-header', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$5.nextUid();
-                return `<${tagName$j} wmHeader #${counter}="wmHeader" partialContainer data-role="page-header" role="banner" [attr.aria-label]="${counter}.hint || 'Page header'" ${transpiler.getAttrMarkup(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)}>`;
             },
-            post: () => `</${tagName$j}>`
+            post: () => `</${tagName$m}>`
         };
     });
     var header_build = () => { };
@@ -2065,15 +2078,15 @@
         default: header_build
     });
 
-    const tagName$i = 'aside';
-    const idGen$4 = new core.IDGenerator('wm_left_panel');
+    const tagName$l = 'aside';
+    const idGen$5 = new core.IDGenerator('wm_left_panel');
     transpiler.register('wm-left-panel', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$4.nextUid();
-                return `<${tagName$i} wmLeftPanel #${counter}="wmLeftPanel" partialContainer data-role="page-left-panel" [attr.aria-label]="${counter}.hint || 'Left navigation panel'" wmSmoothscroll="${attrs.get('smoothscroll') || 'false'}" ${transpiler.getAttrMarkup(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)}>`;
             },
-            post: () => `</${tagName$i}>`
+            post: () => `</${tagName$l}>`
         };
     });
     var leftPanel_build = () => { };
@@ -2083,11 +2096,11 @@
         default: leftPanel_build
     });
 
-    const tagName$h = 'header';
+    const tagName$k = 'header';
     transpiler.register('wm-mobile-navbar', () => {
         return {
-            pre: attrs => `<${tagName$h} wmMobileNavbar ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$h}>`
+            pre: attrs => `<${tagName$k} wmMobileNavbar ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$k}>`
         };
     });
     var mobileNavbar_build = () => { };
@@ -2097,15 +2110,15 @@
         default: mobileNavbar_build
     });
 
-    const tagName$g = 'aside';
-    const idGen$3 = new core.IDGenerator('wm_right_panel');
+    const tagName$j = 'aside';
+    const idGen$4 = new core.IDGenerator('wm_right_panel');
     transpiler.register('wm-right-panel', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$3.nextUid();
-                return `<${tagName$g} wmRightPanel #${counter}="wmRightPanel" partialContainer data-role="page-right-panel" role="complementary" [attr.aria-label]="${counter}.hint || 'Right navigation panel'" ${transpiler.getAttrMarkup(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)}>`;
             },
-            post: () => `</${tagName$g}>`
+            post: () => `</${tagName$j}>`
         };
     });
     var rightPanel_build = () => { };
@@ -2115,22 +2128,22 @@
         default: rightPanel_build
     });
 
-    const tagName$f = 'div';
-    const createElement$2 = name => {
-        return new compiler.Element(name, [], [], noSpan$2, noSpan$2, noSpan$2);
+    const tagName$i = 'div';
+    const createElement$3 = name => {
+        return new compiler.Element(name, [], [], noSpan$3, noSpan$3, noSpan$3);
     };
-    const addAtrribute$2 = (node, name, value) => {
-        const attr = new compiler.Attribute(name, value, noSpan$2, noSpan$2, noSpan$2, 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 noSpan$2 = {};
+    const noSpan$3 = {};
     transpiler.register('wm-page-content', () => {
         return {
             template: (node) => {
                 for (let attr of node.attrs) {
                     if (attr.name === 'spa' && attr.value === 'true') {
-                        const conditionalNode = createElement$2('ng-container');
-                        addAtrribute$2(conditionalNode, '*ngIf', 'compilePageContent');
+                        const conditionalNode = createElement$3('ng-container');
+                        addAtrribute$3(conditionalNode, '*ngIf', 'compilePageContent');
                         conditionalNode.children = conditionalNode.children.concat(node.children);
                         conditionalNode.children.push(new compiler.Text('{{onPageContentReady()}}', null, undefined, undefined));
                         node.children = [conditionalNode];
@@ -2138,8 +2151,8 @@
                     }
                 }
             },
-            pre: attrs => `<${tagName$f} wmPageContent ${attrs.get('spa') && 'wmSpaPage' || ''} wmSmoothscroll="${attrs.get('smoothscroll') || 'false'}" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$f}>`
+            pre: attrs => `<${tagName$i} wmPageContent ${attrs.get('spa') && 'wmSpaPage' || ''} wmSmoothscroll="${attrs.get('smoothscroll') || 'false'}" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$i}>`
         };
     });
     var pageContent_build = () => { };
@@ -2149,11 +2162,11 @@
         default: pageContent_build
     });
 
-    const tagName$e = 'div';
+    const tagName$h = 'div';
     transpiler.register('wm-mobile-tabbar', () => {
         return {
-            pre: attrs => `<${tagName$e} wmMobileTabbar ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$e}>`
+            pre: attrs => `<${tagName$h} wmMobileTabbar ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$h}>`
         };
     });
     var tabBar_build = () => { };
@@ -2163,15 +2176,15 @@
         default: tabBar_build
     });
 
-    const tagName$d = 'section';
-    const idGen$2 = new core.IDGenerator('wm_top_nav');
+    const tagName$g = 'section';
+    const idGen$3 = new core.IDGenerator('wm_top_nav');
     transpiler.register('wm-top-nav', () => {
         return {
             pre: (attrs) => {
-                const counter = idGen$2.nextUid();
-                return `<${tagName$d} wmTopNav #${counter}="wmTopNav" partialContainer data-role="page-topnav" role="navigation" [attr.aria-label]="${counter}.hint || 'Second level navigation'" ${transpiler.getAttrMarkup(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)}>`;
             },
-            post: () => `</${tagName$d}>`
+            post: () => `</${tagName$g}>`
         };
     });
     var topNav_build = () => { };
@@ -2181,26 +2194,26 @@
         default: topNav_build
     });
 
-    const tagName$c = 'section';
-    const noSpan$1 = {};
-    const createElement$1 = name => {
-        return new compiler.Element(name, [], [], noSpan$1, noSpan$1, noSpan$1);
+    const tagName$f = 'section';
+    const noSpan$2 = {};
+    const createElement$2 = name => {
+        return new compiler.Element(name, [], [], noSpan$2, noSpan$2, noSpan$2);
     };
-    const addAtrribute$1 = (node, name, value) => {
-        const attr = new compiler.Attribute(name, value, noSpan$1, noSpan$1, noSpan$1, 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);
     };
     transpiler.register('wm-partial', () => {
         return {
             template: (node) => {
-                const conditionalNode = createElement$1('ng-container');
-                addAtrribute$1(conditionalNode, '*ngIf', 'compileContent');
+                const conditionalNode = createElement$2('ng-container');
+                addAtrribute$2(conditionalNode, '*ngIf', 'compileContent');
                 conditionalNode.children = conditionalNode.children.concat(node.children);
                 node.children.length = 0;
                 node.children.push(conditionalNode);
             },
-            pre: attrs => `<${tagName$c} wmPartial data-role="partial" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$c}>`
+            pre: attrs => `<${tagName$f} wmPartial data-role="partial" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$f}>`
         };
     });
     var partial_build = () => { };
@@ -2210,11 +2223,11 @@
         default: partial_build
     });
 
-    const tagName$b = 'div';
+    const tagName$e = 'div';
     transpiler.register('wm-param', () => {
         return {
-            pre: attrs => `<${tagName$b} wmParam hidden ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$b}>`
+            pre: attrs => `<${tagName$e} wmParam hidden ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$e}>`
         };
     });
     var partialParam_build = () => { };
@@ -2224,11 +2237,11 @@
         default: partialParam_build
     });
 
-    const tagName$a = 'section';
+    const tagName$d = 'section';
     transpiler.register('wm-prefab', () => {
         return {
-            pre: attrs => `<${tagName$a} wmPrefab redrawable data-role="prefab" ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$a}>`
+            pre: attrs => `<${tagName$d} wmPrefab redrawable data-role="prefab" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$d}>`
         };
     });
     var prefab_build = () => { };
@@ -2238,26 +2251,26 @@
         default: prefab_build
     });
 
-    const noSpan = {};
-    const createElement = name => {
-        return new compiler.Element(name, [], [], noSpan, noSpan, noSpan);
+    const noSpan$1 = {};
+    const createElement$1 = name => {
+        return new compiler.Element(name, [], [], noSpan$1, noSpan$1, noSpan$1);
     };
-    const addAtrribute = (node, name, value) => {
-        const attr = new compiler.Attribute(name, value, noSpan, noSpan, noSpan, 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);
     };
-    const tagName$9 = 'div';
+    const tagName$c = 'div';
     transpiler.register('wm-prefab-container', () => {
         return {
             template: (node) => {
-                const conditionalNode = createElement('ng-container');
-                addAtrribute(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$9} wmPrefabContainer ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$9}>`
+            pre: attrs => `<${tagName$c} wmPrefabContainer ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$c}>`
         };
     });
     var prefabContainer_build = () => { };
@@ -2267,11 +2280,11 @@
         default: prefabContainer_build
     });
 
-    const tagName$8 = 'div';
+    const tagName$b = 'div';
     transpiler.register('wm-table-action', () => {
         return {
-            pre: attrs => `<${tagName$8} name="${attrs.get('name') || attrs.get('key')}" wmTableAction ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$8}>`
+            pre: attrs => `<${tagName$b} name="${attrs.get('name') || attrs.get('key')}" wmTableAction ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$b}>`
         };
     });
     var tableAction_build = () => { };
@@ -2281,11 +2294,11 @@
         default: tableAction_build
     });
 
-    const tagName$7 = 'div';
+    const tagName$a = 'div';
     transpiler.register('wm-table-column-group', () => {
         return {
-            pre: attrs => `<${tagName$7} wmTableColumnGroup ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$7}>`
+            pre: attrs => `<${tagName$a} wmTableColumnGroup ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$a}>`
         };
     });
     var tableColumnGroup_build = () => { };
@@ -2295,8 +2308,8 @@
         default: tableColumnGroup_build
     });
 
-    const tagName$6 = 'div';
-    const idGen$1 = new core.IDGenerator('data_table_form_');
+    const tagName$9 = 'div';
+    const idGen$2 = new core.IDGenerator('data_table_form_');
     const formWidgets = new Set([
         'wm-text',
         'wm-textarea',
@@ -2408,7 +2421,7 @@
         let wmFormWidget = '';
         if (widget === core.FormWidgetType.UPLOAD) {
             options.uploadProps = {
-                formName: idGen$1.nextUid(),
+                formName: idGen$2.nextUid(),
                 name: fieldName
             };
             options.counter = pCounter;
@@ -2548,7 +2561,7 @@
                         customExprTmpl = `${customExpr}<div data-col-identifier="${attrs.get('binding')}" title="${formatExprTmpl}">${formatExprTmpl}`;
                     }
                 }
-                return `<${tagName$6} wmTableColumn ${transpiler.getAttrMarkup(attrs)} ${parentForm}>
+                return `<${tagName$9} wmTableColumn ${transpiler.getAttrMarkup(attrs)} ${parentForm}>
                     ${rowFilterTmpl}
                     ${inlineEditTmpl}
                     ${inlineNewEditTmpl}
@@ -2559,7 +2572,7 @@
                 if (shared.get('customExpression')) {
                     customExprTmpl = `</div></ng-template>`;
                 }
-                return `${customExprTmpl}</${tagName$6}>`;
+                return `${customExprTmpl}</${tagName$9}>`;
             },
             imports: (attrs) => {
                 const editWidgetType = attrs.get('edit-widget-type');
@@ -2575,7 +2588,7 @@
         default: tableColumn_build
     });
 
-    const tagName$5 = 'div';
+    const tagName$8 = 'div';
     const getRowExpansionActionTmpl = (attrs) => {
         const tag = attrs.get('widget-type') === 'anchor' ? 'a' : 'button';
         const directive = attrs.get('widget-type') === 'anchor' ? 'wmAnchor' : 'wmButton';
@@ -2591,7 +2604,7 @@
     transpiler.register('wm-table-row', () => {
         return {
             pre: (attrs) => {
-                return `<${tagName$5} wmTableRow ${transpiler.getAttrMarkup(attrs)}>
+                return `<${tagName$8} 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)"
@@ -2599,7 +2612,7 @@
                          <div *ngFor="let param of rowDef.partialParams | keyvalue" wmParam hidden
                             [name]="param.key" [value]="param.value"></div>`;
             },
-            post: () => `</div></ng-template></${tagName$5}>`
+            post: () => `</div></ng-template></${tagName$8}>`
         };
     });
     var tableRow_build = () => { };
@@ -2609,7 +2622,7 @@
         default: tableRow_build
     });
 
-    const tagName$4 = 'div';
+    const tagName$7 = '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>
@@ -2641,9 +2654,9 @@
     };
     transpiler.register('wm-table-row-action', () => {
         return {
-            pre: attrs => `<${tagName$4} wmTableRowAction ${transpiler.getAttrMarkup(attrs)}>
+            pre: attrs => `<${tagName$7} wmTableRowAction ${transpiler.getAttrMarkup(attrs)}>
                         ${getRowActionTmpl(attrs)}`,
-            post: () => `</${tagName$4}>`
+            post: () => `</${tagName$7}>`
         };
     });
     var tableRowAction_build = () => { };
@@ -2653,9 +2666,9 @@
         default: tableRowAction_build
     });
 
-    const tagName$3 = 'div';
+    const tagName$6 = 'div';
     const dataSetKey = 'dataset';
-    const idGen = new core.IDGenerator('table_');
+    const idGen$1 = 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
@@ -2715,14 +2728,14 @@
                 core.updateTemplateAttrs(node, boundExpr, widgetNameAttr.value, '', 'row');
             },
             pre: (attrs, shared) => {
-                const counter = idGen.nextUid();
+                const counter = idGen$1.nextUid();
                 shared.set('counter', counter);
                 attrs.set('isdynamictable', shared.get('isdynamictable'));
                 attrs.set('isrowexpansionenabled', shared.get('isrowexpansionenabled'));
                 attrs.set('table_reference', counter);
-                return `<${tagName$3} wmTable="${counter}" wmTableFilterSort wmTableCUD #${counter} data-identifier="table" ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$6} wmTable="${counter}" wmTableFilterSort wmTableCUD #${counter} data-identifier="table" ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$3}>`,
+            post: () => `</${tagName$6}>`,
             provide: (attrs, shared) => {
                 const provider = new Map();
                 provider.set('table_reference', shared.get('counter'));
@@ -2741,11 +2754,11 @@
         default: table_build
     });
 
-    const tagName$2 = 'div';
+    const tagName$5 = 'div';
     transpiler.register('wm-video', () => {
         return {
-            pre: attrs => `<${tagName$2} wmVideo ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName$2}>`
+            pre: attrs => `<${tagName$5} wmVideo ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$5}>`
         };
     });
     var video_build = () => { };
@@ -2755,7 +2768,7 @@
         default: video_build
     });
 
-    const tagName$1 = 'div';
+    const tagName$4 = 'div';
     const SPACING_KEY = 'parentLinearLayout.spacing';
     transpiler.register('wm-linearlayout', () => {
         return {
@@ -2763,9 +2776,9 @@
             pre: (attrs, shared, provider) => {
                 let spacing = attrs.get('spacing');
                 attrs.set('spacing', (!spacing || spacing === '0') && provider ? provider.get(SPACING_KEY) : spacing);
-                return `<${tagName$1} wmLinearLayout ${transpiler.getAttrMarkup(attrs)}>`;
+                return `<${tagName$4} wmLinearLayout ${transpiler.getAttrMarkup(attrs)}>`;
             },
-            post: () => `</${tagName$1}>`,
+            post: () => `</${tagName$4}>`,
             provide: (attrs, shared) => {
                 const provider = new Map();
                 provider.set(SPACING_KEY, attrs.get('spacing'));
@@ -2780,11 +2793,11 @@
         default: linearLayout_build
     });
 
-    const tagName = 'div';
+    const tagName$3 = 'div';
     transpiler.register('wm-linearlayoutitem', () => {
         return {
-            pre: attrs => `<${tagName} wmLinearLayoutItem ${transpiler.getAttrMarkup(attrs)}>`,
-            post: () => `</${tagName}>`
+            pre: attrs => `<${tagName$3} wmLinearLayoutItem ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$3}>`
         };
     });
     var linearLayoutItem_build = () => { };
@@ -2794,6 +2807,63 @@
         default: linearLayoutItem_build
     });
 
+    const tagName$2 = '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)}>`;
+            },
+            post: () => `</${tagName$2}>`
+        };
+    });
+    var customWidgetContainer_build = () => { };
+
+    var customWidgetContainer_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        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 => {
+        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;
@@ -2823,6 +2893,9 @@
     exports.containerBuild = container_build$1;
     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;
     exports.dlgBuild = dialog_build$1;