@wavemaker/angular-codegen 11.0.1-next.138729 → 11.0.1-next.138732

angular-codegen/dependencies/transpilation-web.cjs.js

@@ -38622,9 +38622,12 @@ class ASTCompiler {
     cleanup() {
         this.ast = this.cAst = this.stmts = this.cStmts = this.declarations = this.pipes = this.pipeNameVsIsPureMap = undefined;
     }
-    compile() {
+    compile(defOnly) {
         this.extendCtxWithLocals();
         this.addReturnStmt(this.build(this.ast));
+        if (defOnly) {
+            return { fnBody: this.fnBody(), fnArgs: this.fnArgs(), pipes: this.pipes };
+        }
         const fn = new Function(this.fnArgs(), this.fnBody());
         let boundFn;
         if (this.exprType === ExpressionType$1.Binding) {
@@ -38643,13 +38646,27 @@ const nullPipe = () => {
         transform: noop$1$1
     };
 };
+let _cspEnabled;
+const isCSPEnabled = () => {
+    if (typeof _cspEnabled !== 'undefined') {
+        return _cspEnabled;
+    }
+    try {
+        new Function();
+        _cspEnabled = false;
+    }
+    catch (e) {
+        _cspEnabled = true;
+    }
+    return _cspEnabled;
+};
 let pipeProvider;
 var ExpressionType$1;
 (function (ExpressionType$$1) {
     ExpressionType$$1[ExpressionType$$1["Binding"] = 0] = "Binding";
     ExpressionType$$1[ExpressionType$$1["Action"] = 1] = "Action";
 })(ExpressionType$1 || (ExpressionType$1 = {}));
-function $parseExpr(expr) {
+function $parseExpr(expr, defOnly) {
     if (!pipeProvider) {
         console.log('set pipe provider');
         return noop$1$1;
@@ -38668,51 +38685,89 @@ function $parseExpr(expr) {
     if (fn) {
         return fn;
     }
-    const parser = new Parser$1(new Lexer);
-    const ast = parser.parseBinding(expr, '', 0);
     let boundFn;
-    if (ast.errors.length) {
-        fn = noop$1$1;
-        boundFn = fn;
-    }
-    else {
-        const pipeNameVsIsPureMap = pipeProvider.getPipeNameVsIsPureMap();
-        const astCompiler = new ASTCompiler(ast.ast, ExpressionType$1.Binding, pipeNameVsIsPureMap);
-        fn = astCompiler.compile();
-        if (fn.usedPipes.length) {
-            const pipeArgs = [];
-            let hasPurePipe = false;
-            for (const [pipeName] of fn.usedPipes) {
-                const pipeInfo = pipeProvider.meta(pipeName);
-                let pipeInstance;
-                if (!pipeInfo) {
-                    pipeInstance = nullPipe;
+    if (!defOnly) {
+        boundFn = getFnForBindExpr(expr);
+    }
+    // fallback to generate function in runtime. This will break if CSP is enabled
+    if (!boundFn) {
+        // If CSP enabled, function def not found from the generated fn expressions for the page.
+        // Handle bind expressions used internally inside WM components. e.g. wmAnchor used inside nav.comp.html
+        if (isCSPEnabled()) {
+            boundFn = function (ctx, locals) {
+                // handle internal bindings for wm widgets used inside a component
+                let _ctx = Object.assign({}, locals);
+                Object.setPrototypeOf(_ctx, ctx);
+                return _.get(_ctx, expr);
+            };
+        }
+        else {
+            const parser = new Parser$1(new Lexer);
+            const ast = parser.parseBinding(expr, '', 0);
+            if (ast.errors.length) {
+                fn = noop$1$1;
+                boundFn = fn;
+            }
+            else {
+                const pipeNameVsIsPureMap = pipeProvider.getPipeNameVsIsPureMap();
+                const astCompiler = new ASTCompiler(ast.ast, ExpressionType$1.Binding, pipeNameVsIsPureMap);
+                fn = astCompiler.compile(defOnly);
+                if (defOnly) {
+                    return fn;
+                }
+                if (fn.usedPipes.length) {
+                    const pipeArgs = [];
+                    let hasPurePipe = false;
+                    for (const [pipeName] of fn.usedPipes) {
+                        const pipeInfo = pipeProvider.meta(pipeName);
+                        let pipeInstance;
+                        if (!pipeInfo) {
+                            pipeInstance = nullPipe;
+                        }
+                        else {
+                            if (pipeInfo.pure) {
+                                hasPurePipe = true;
+                                pipeInstance = purePipes.get(pipeName);
+                            }
+                            if (!pipeInstance) {
+                                pipeInstance = pipeProvider.getInstance(pipeName);
+                            }
+                            if (pipeInfo.pure) {
+                                purePipes.set(pipeName, pipeInstance);
+                            }
+                        }
+                        pipeArgs.push(pipeInstance);
+                    }
+                    pipeArgs.unshift(hasPurePipe ? new Map() : undefined);
+                    boundFn = fn.bind(undefined, ...pipeArgs);
                 }
                 else {
-                    if (pipeInfo.pure) {
-                        hasPurePipe = true;
-                        pipeInstance = purePipes.get(pipeName);
-                    }
-                    if (!pipeInstance) {
-                        pipeInstance = pipeProvider.getInstance(pipeName);
-                    }
-                    if (pipeInfo.pure) {
-                        purePipes.set(pipeName, pipeInstance);
-                    }
+                    boundFn = fn.bind(undefined, undefined);
                 }
-                pipeArgs.push(pipeInstance);
             }
-            pipeArgs.unshift(hasPurePipe ? new Map() : undefined);
-            boundFn = fn.bind(undefined, ...pipeArgs);
-        }
-        else {
-            boundFn = fn.bind(undefined, undefined);
         }
     }
     exprFnCache.set(expr, boundFn);
     return boundFn;
 }
-function $parseEvent(expr) {
+function simpleFunctionEvaluator(expr, ctx, locals) {
+    let _ctx = Object.assign({}, locals);
+    Object.setPrototypeOf(_ctx, ctx);
+    let parts = expr.split('(');
+    let fnName = parts[0];
+    let computedFn = _.get(ctx, fnName);
+    if (computedFn) {
+        let args = parts[1].replace(')', '');
+        args = args.split(',');
+        let computedArgs = [];
+        args.forEach((arg) => {
+            arg = arg && arg.trim();
+            computedArgs.push(_.get(_ctx, arg));
+        });
+        return computedFn.bind(_ctx)(...computedArgs);
+    }
+}
+function $parseEvent(expr, defOnly) {
     if (!isString$1(expr)) {
         return noop$1$1;
     }
@@ -38724,16 +38779,80 @@ function $parseEvent(expr) {
     if (fn) {
         return fn;
     }
-    const parser = new Parser$1(new Lexer);
-    const ast = parser.parseAction(expr, '', 0);
-    if (ast.errors.length) {
-        return noop$1$1;
+    if (!defOnly) {
+        fn = getFnForEventExpr(expr);
+    }
+    // fallback to generate function in runtime. This will break if CSP is enabled
+    if (!fn) {
+        if (isCSPEnabled()) {
+            fn = simpleFunctionEvaluator.bind(undefined, expr);
+        }
+        else {
+            const parser = new Parser$1(new Lexer);
+            const ast = parser.parseAction(expr, '', 0);
+            if (ast.errors.length) {
+                return noop$1$1;
+            }
+            const astCompiler = new ASTCompiler(ast.ast, ExpressionType$1.Action);
+            fn = astCompiler.compile(defOnly);
+        }
     }
-    const astCompiler = new ASTCompiler(ast.ast, ExpressionType$1.Action);
-    fn = astCompiler.compile();
     eventFnCache.set(expr, fn);
     return fn;
 }
+const fnNameMap = new Map();
+const getFnByExpr = (expr) => fnNameMap.get(expr);
+const fnExecutor = (expr, exprType) => {
+    let fn = getFnByExpr(expr);
+    if (!fn) {
+        return;
+    }
+    const usedPipes = fn.usedPipes || [];
+    if (exprType === ExpressionType$1.Binding) {
+        fn = fn.bind(undefined, plus, minus, isDef, getPurePipeVal);
+    }
+    else {
+        fn = fn.bind(undefined, plus, minus, isDef);
+    }
+    if (usedPipes.length) {
+        const pipeArgs = [];
+        let hasPurePipe = false;
+        for (const [pipeName] of usedPipes) {
+            const pipeInfo = pipeProvider.meta(pipeName);
+            let pipeInstance;
+            if (!pipeInfo) {
+                pipeInstance = nullPipe;
+            }
+            else {
+                if (pipeInfo.pure) {
+                    hasPurePipe = true;
+                    pipeInstance = purePipes.get(pipeName);
+                }
+                if (!pipeInstance) {
+                    pipeInstance = pipeProvider.getInstance(pipeName);
+                }
+                if (pipeInfo.pure) {
+                    purePipes.set(pipeName, pipeInstance);
+                }
+            }
+            pipeArgs.push(pipeInstance);
+        }
+        pipeArgs.unshift(hasPurePipe ? new Map() : undefined);
+        fn = fn.bind(undefined, ...pipeArgs);
+    }
+    else {
+        if (exprType === ExpressionType$1.Binding) {
+            fn = fn.bind(undefined, undefined);
+        }
+    }
+    return fn;
+};
+const getFnForBindExpr = (expr) => {
+    return fnExecutor(expr, ExpressionType$1.Binding);
+};
+const getFnForEventExpr = (expr) => {
+    return fnExecutor(expr, ExpressionType$1.Action);
+};
 
 const registry = new Map();
 const watchIdGenerator = new IDGenerator('watch-id-');
@@ -38840,6 +38959,7 @@ var Operation;
     Operation["SUPPORTS_CRUD"] = "supportsCRUD";
     Operation["SUPPORTS_DISTINCT_API"] = "supportsDistinctAPI";
     Operation["IS_PAGEABLE"] = "isPageable";
+    Operation["IS_SORTABLE"] = "isSortable";
     Operation["GET_OPERATION_TYPE"] = "getOperationType";
     Operation["GET_RELATED_PRIMARY_KEYS"] = "getRelatedTablePrimaryKeys";
     Operation["GET_ENTITY_NAME"] = "getEntityName";
@@ -39573,10 +39693,26 @@ const loadScript = (url, loadViaScriptTag, cacheable = false) => __awaiter$1(voi
         return Promise.resolve();
     }
     if (loadViaScriptTag) {
-        return fetchContent('text', _url, false, text => {
-            const script = document.createElement('script');
-            script.textContent = text;
-            document.head.appendChild(script);
+        return new Promise((resolve, reject) => {
+            let script = document.createElement('script');
+            script.type = 'text/javascript';
+            script.src = _url;
+            script.async = false;
+            if (script.readyState) { //IE
+                script.onreadystatechange = () => {
+                    if (script.readyState === "loaded" || script.readyState === "complete") {
+                        script.onreadystatechange = null;
+                        resolve(true);
+                    }
+                };
+            }
+            else { //Other browsers
+                script.onload = () => {
+                    resolve(true);
+                };
+            }
+            script.onerror = (error) => reject(error);
+            document.getElementsByTagName('head')[0].appendChild(script);
         });
     }
     else if (cacheable) {
@@ -39592,13 +39728,6 @@ const loadScript = (url, loadViaScriptTag, cacheable = false) => __awaiter$1(voi
             .done(response => response)
             .fail(reason => reason);
     }
-    // return fetch(_url)
-    //     .then(response => response.text())
-    //     .then(text => {
-    //         const script = document.createElement('script');
-    //         script.textContent = text;
-    //         document.head.appendChild(script);
-    //     });
 });
 const loadScripts = (urls = [], loadViaScriptTag = true) => __awaiter$1(void 0, void 0, void 0, function* () {
     for (const url of urls) {
@@ -39628,7 +39757,8 @@ const setSessionStorageItem = (key, value) => {
  * @param key string
  */
 const getSessionStorageItem = key => {
-    let item = window.sessionStorage.getItem(_WM_APP_PROJECT.id);
+    // sanity check for this to work with ng-codegen
+    let item = window && window.sessionStorage && window.sessionStorage.getItem(_WM_APP_PROJECT.id);
     if (item) {
         item = JSON.parse(item);
         return item[key];
@@ -39852,6 +39982,7 @@ const processFilterExpBindNode = (context, filterExpressions) => {
     const filter$ = new Subject();
     const bindFilExpObj = (obj, targetNodeKey) => {
         if (stringStartsWith(obj[targetNodeKey], 'bind:')) {
+            // [Todo-CSP]: needs a check, where is this used
             destroyFn($watch(obj[targetNodeKey].replace('bind:', ''), context, {}, (newVal, oldVal) => {
                 if ((newVal === oldVal && _.isUndefined(newVal)) || (_.isUndefined(newVal) && !_.isUndefined(oldVal))) {
                     return;
@@ -40095,6 +40226,7 @@ const triggerItemAction = (scope, item) => {
     const linkTarget = item.target;
     if (itemAction) {
         if (!scope.itemActionFn) {
+            //[Todo-CSP]: This will not work as function will be dynamic
             scope.itemActionFn = $parseEvent(itemAction);
         }
         scope.itemActionFn(scope.userDefinedExecutionContext, Object.create(item));
@@ -41212,7 +41344,7 @@ class PaginationService {
             parent.gridOptions.setDeletedRowIndex(-1);
         }
         // reset fieldDefs if last action performed is search or sort
-        if (parent.widgetType === 'wm-table' && (parent.gridOptions.isNavTypeScrollOrOndemand()) && (parent.gridOptions.lastActionPerformed === parent.gridOptions.ACTIONS.SEARCH_OR_SORT || parent.gridOptions.lastActionPerformed === parent.gridOptions.ACTIONS.FILTER_CRITERIA)) {
+        if (parent.widgetType === 'wm-table' && (parent.gridOptions.isNavTypeScrollOrOndemand()) && (parent.gridOptions.lastActionPerformed === parent.gridOptions.ACTIONS.SEARCH_OR_SORT || parent.gridOptions.lastActionPerformed === parent.gridOptions.ACTIONS.FILTER_CRITERIA || parent.gridOptions.lastActionPerformed === parent.gridOptions.ACTIONS.DATASET_UPDATE)) {
             fieldDefs = [];
             parent.gridOptions.setCurrentPage(1);
         }
@@ -41565,6 +41697,7 @@ const WIDGET_IMPORTS = new Map([
     ['wm-network-info-toaster', BASIC_MODULE],
     ['wm-number', INPUT_MODULE],
     ['wm-page', PAGE_MODULE],
+    ['wm-layout', PAGE_MODULE],
     ['wm-page-content', PAGE_MODULE],
     ['wm-pagedialog', PARTIAL_DIALOG_MODULE],
     ['wm-pagination', PAGINATION_MODULE],
@@ -41810,7 +41943,7 @@ const getRequiredProviders = (nodeDef, providers, nodeAttrs) => {
         }
     });
 };
-const ɵ11 = getRequiredProviders;
+const ɵ11$1 = getRequiredProviders;
 const DIMENSION_PROPS = ['padding', 'borderwidth', 'margin'];
 const SEPARATOR = ' ', UNSET = 'unset';
 const setDimensionProp = (cssObj, key, nv) => {
@@ -41845,7 +41978,7 @@ const setDimensionProp = (cssObj, key, nv) => {
         cssObj[cssKey] = nv;
     }
 };
-const ɵ12 = setDimensionProp;
+const ɵ12$1 = setDimensionProp;
 const processDimensionAttributes = attrMap => {
     const attrKeys = Array.from(attrMap.keys());
     attrKeys.forEach((attrKey) => {
@@ -42093,14 +42226,14 @@ const scopeComponentStyles = (componentName, componentType, styles = '') => {
 
 const carouselTagName = 'carousel';
 const dataSetKey$5 = 'dataset';
-const idGen$q = new IDGenerator('wm_carousel_ref_');
+const idGen$r = new IDGenerator('wm_carousel_ref_');
 const isDynamicCarousel = node => node.attrs.find(attr => attr.name === 'type' && attr.value === 'dynamic');
-const ɵ0$c$1 = isDynamicCarousel;
+const ɵ0$d$1 = isDynamicCarousel;
 register('wm-carousel', () => {
     return {
         pre: (attrs, shared) => {
             // generating unique Id for the carousel
-            const counter = idGen$q.nextUid();
+            const counter = idGen$r.nextUid();
             shared.set('carousel_ref', counter);
             return `<div class="app-carousel carousel"><${carouselTagName} wmCarousel #${counter}="wmCarousel"  ${getAttrMarkup(attrs)} interval="0" [ngClass]="${counter}.navigationClass">`;
         },
@@ -42133,7 +42266,7 @@ var carousel_build = () => { };
 var carousel_build$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     'default': carousel_build,
-    'ɵ0': ɵ0$c$1
+    'ɵ0': ɵ0$d$1
 });
 
 const carouselContentTagName = 'slide';
@@ -42167,11 +42300,11 @@ var carouselTemplate_build$1 = /*#__PURE__*/Object.freeze({
     'default': carouselTemplate_build
 });
 
-const tagName$1B = 'div';
+const tagName$1C = 'div';
 register('wm-login', () => {
     return {
-        pre: attrs => `<${tagName$1B} wmLogin ${getAttrMarkup(attrs)} eventsource.bind="Actions.loginAction">`,
-        post: () => `</${tagName$1B}>`,
+        pre: attrs => `<${tagName$1C} wmLogin ${getAttrMarkup(attrs)} eventsource.bind="Actions.loginAction">`,
+        post: () => `</${tagName$1C}>`,
         provide: () => {
             const provider = new Map();
             provider.set('isLogin', true);
@@ -42186,11 +42319,11 @@ var login_build$1 = /*#__PURE__*/Object.freeze({
     'default': login_build
 });
 
-const tagName$1A = 'marquee';
+const tagName$1B = 'marquee';
 register('wm-marquee', () => {
     return {
-        pre: attrs => `<${tagName$1A} onmouseover="this.stop();" onmouseout="this.start();" wmMarquee role="marquee" aria-live="off" ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$1A}>`
+        pre: attrs => `<${tagName$1B} onmouseover="this.stop();" onmouseout="this.start();" wmMarquee role="marquee" aria-live="off" ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$1B}>`
     };
 });
 var marquee_build = () => { };
@@ -42200,15 +42333,15 @@ var marquee_build$1 = /*#__PURE__*/Object.freeze({
     'default': marquee_build
 });
 
-const tagName$1z = 'a';
-const idGen$p = new IDGenerator('wm_anchor');
+const tagName$1A = 'a';
+const idGen$q = new IDGenerator('wm_anchor');
 register('wm-anchor', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$p.nextUid();
-            return `<${tagName$1z} wmAnchor #${counter}="wmAnchor" role="link" data-identifier="anchor" [attr.aria-label]="${counter}.hint || ${counter}.caption || 'Link'" ${getAttrMarkup(attrs)}>`;
+            const counter = idGen$q.nextUid();
+            return `<${tagName$1A} wmAnchor #${counter}="wmAnchor" role="link" data-identifier="anchor" [attr.aria-label]="${counter}.hint || ${counter}.caption || 'Link'" ${getAttrMarkup(attrs)}>`;
         },
-        post: () => `</${tagName$1z}>`
+        post: () => `</${tagName$1A}>`
     };
 });
 var anchor_build = () => { };
@@ -42218,11 +42351,11 @@ var anchor_build$1 = /*#__PURE__*/Object.freeze({
     'default': anchor_build
 });
 
-const tagName$1y = 'div';
+const tagName$1z = 'div';
 register('wm-audio', () => {
     return {
-        pre: attrs => `<${tagName$1y} wmAudio ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$1y}>`
+        pre: attrs => `<${tagName$1z} wmAudio ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$1z}>`
     };
 });
 var audio_build = () => { };
@@ -42232,15 +42365,15 @@ var audio_build$1 = /*#__PURE__*/Object.freeze({
     'default': audio_build
 });
 
-const tagName$1x = 'div';
-const idGen$o = new IDGenerator('wm_html');
+const tagName$1y = 'div';
+const idGen$p = new IDGenerator('wm_html');
 register('wm-html', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$o.nextUid();
-            return `<${tagName$1x} wmHtml #${counter}="wmHtml" [attr.aria-label]="${counter}.hint || 'HTML content'" ${getAttrMarkup(attrs)}>`;
+            const counter = idGen$p.nextUid();
+            return `<${tagName$1y} wmHtml #${counter}="wmHtml" [attr.aria-label]="${counter}.hint || 'HTML content'" ${getAttrMarkup(attrs)}>`;
         },
-        post: () => `</${tagName$1x}>`
+        post: () => `</${tagName$1y}>`
     };
 });
 var html_build = () => { };
@@ -42250,11 +42383,11 @@ var html_build$1 = /*#__PURE__*/Object.freeze({
     'default': html_build
 });
 
-const tagName$1w = 'span';
+const tagName$1x = 'span';
 register('wm-icon', () => {
     return {
-        pre: attrs => `<${tagName$1w} wmIcon aria-hidden="true" ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$1w}>`
+        pre: attrs => `<${tagName$1x} wmIcon aria-hidden="true" ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$1x}>`
     };
 });
 var icon_build = () => { };
@@ -42264,11 +42397,11 @@ var icon_build$1 = /*#__PURE__*/Object.freeze({
     'default': icon_build
 });
 
-const tagName$1v = 'div';
+const tagName$1w = 'div';
 register('wm-iframe', () => {
     return {
-        pre: attrs => `<${tagName$1v} wmIframe ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$1v}>`
+        pre: attrs => `<${tagName$1w} wmIframe ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$1w}>`
     };
 });
 var iframe_build = () => { };
@@ -42278,15 +42411,15 @@ var iframe_build$1 = /*#__PURE__*/Object.freeze({
     'default': iframe_build
 });
 
-const tagName$1u = 'label';
-const idGen$n = new IDGenerator('wm_label');
+const tagName$1v = 'label';
+const idGen$o = new IDGenerator('wm_label');
 register('wm-label', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$n.nextUid();
-            return `<${tagName$1u} wmLabel #${counter}="wmLabel" [attr.aria-label]="${counter}.hint || 'Label text'" ${getAttrMarkup(attrs)}>`;
+            const counter = idGen$o.nextUid();
+            return `<${tagName$1v} wmLabel #${counter}="wmLabel" [attr.aria-label]="${counter}.hint || 'Label text'" ${getAttrMarkup(attrs)}>`;
         },
-        post: () => `</${tagName$1u}>`
+        post: () => `</${tagName$1v}>`
     };
 });
 var label_build = () => { };
@@ -42296,13 +42429,13 @@ var label_build$1 = /*#__PURE__*/Object.freeze({
     'default': label_build
 });
 
-const tagName$1t = 'img';
-const idGen$m = new IDGenerator('wm_picture');
+const tagName$1u = 'img';
+const idGen$n = new IDGenerator('wm_picture');
 register('wm-picture', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$m.nextUid();
-            return `<${tagName$1t} wmPicture #${counter}="wmPicture" alt="image" wmImageCache="${attrs.get('offline') || 'true'}" [attr.aria-label]="${counter}.hint || 'Image'" ${getAttrMarkup(attrs)}>`;
+            const counter = idGen$n.nextUid();
+            return `<${tagName$1u} wmPicture #${counter}="wmPicture" alt="image" wmImageCache="${attrs.get('offline') || 'true'}" [attr.aria-label]="${counter}.hint || 'Image'" ${getAttrMarkup(attrs)}>`;
         }
     };
 });
@@ -42313,15 +42446,15 @@ var picture_build$1 = /*#__PURE__*/Object.freeze({
     'default': picture_build
 });
 
-const tagName$1s = 'div';
-const idGen$l = new IDGenerator('wm_spinner');
+const tagName$1t = 'div';
+const idGen$m = new IDGenerator('wm_spinner');
 register('wm-spinner', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$l.nextUid();
-            return `<${tagName$1s} wmSpinner #${counter}="wmSpinner" role="alert" [attr.aria-label]="${counter}.hint || 'Loading...'" aria-live="assertive" aria-busy="true" ${getAttrMarkup(attrs)}>`;
+            const counter = idGen$m.nextUid();
+            return `<${tagName$1t} wmSpinner #${counter}="wmSpinner" role="alert" [attr.aria-label]="${counter}.hint || 'Loading...'" aria-live="assertive" aria-busy="true" ${getAttrMarkup(attrs)}>`;
         },
-        post: () => `</${tagName$1s}>`
+        post: () => `</${tagName$1t}>`
     };
 });
 var spinner_build = () => { };
@@ -42331,16 +42464,16 @@ var spinner_build$1 = /*#__PURE__*/Object.freeze({
     'default': spinner_build
 });
 
-const tagName$1r = 'div';
+const tagName$1s = 'div';
 const getAttr = (node, attrName) => node.attrs.find(attr => attr.name === attrName);
-const ɵ0$b$1 = getAttr;
+const ɵ0$c$1 = getAttr;
 const getAttrValue = (node, attrName) => {
     const match = getAttr(node, attrName);
     if (match) {
         return match.value;
     }
 };
-const ɵ1$7 = getAttrValue;
+const ɵ1$8 = getAttrValue;
 const getReplaceRegex = (v) => new RegExp(`bind:(${v}|${v}\\[\\$i])\\.`, 'g');
 const ɵ2$4$1 = getReplaceRegex;
 register('wm-progress-bar', () => {
@@ -42362,8 +42495,8 @@ register('wm-progress-bar', () => {
                 }
             }
         },
-        pre: attrs => `<${tagName$1r} wmProgressBar ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$1r}>`
+        pre: attrs => `<${tagName$1s} wmProgressBar ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$1s}>`
     };
 });
 var progressBar_build = () => { };
@@ -42371,16 +42504,16 @@ var progressBar_build = () => { };
 var progressBar_build$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     'default': progressBar_build,
-    'ɵ0': ɵ0$b$1,
-    'ɵ1': ɵ1$7,
+    'ɵ0': ɵ0$c$1,
+    'ɵ1': ɵ1$8,
     'ɵ2': ɵ2$4$1
 });
 
-const tagName$1q = 'div';
+const tagName$1r = 'div';
 register('wm-progress-circle', () => {
     return {
-        pre: attrs => `<${tagName$1q} wmProgressCircle ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$1q}>`
+        pre: attrs => `<${tagName$1r} wmProgressCircle ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$1r}>`
     };
 });
 var progressCircle_build = () => { };
@@ -42390,15 +42523,15 @@ var progressCircle_build$1 = /*#__PURE__*/Object.freeze({
     'default': progressCircle_build
 });
 
-const tagName$1p = 'div';
-const idGen$k = new IDGenerator('wm_richtexteditor');
+const tagName$1q = 'div';
+const idGen$l = new IDGenerator('wm_richtexteditor');
 register('wm-richtexteditor', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$k.nextUid();
-            return `<${tagName$1p} wmRichTextEditor #${counter}="wmRichTextEditor" role="textbox" [attr.aria-label]="${counter}.hint || 'Richtext editor'" ${getFormMarkupAttr(attrs)}>`;
+            const counter = idGen$l.nextUid();
+            return `<${tagName$1q} wmRichTextEditor #${counter}="wmRichTextEditor" role="textbox" [attr.aria-label]="${counter}.hint || 'Richtext editor'" ${getFormMarkupAttr(attrs)}>`;
         },
-        post: () => `</${tagName$1p}>`
+        post: () => `</${tagName$1q}>`
     };
 });
 var richTextEditor_build = () => { };
@@ -42408,11 +42541,11 @@ var richTextEditor_build$1 = /*#__PURE__*/Object.freeze({
     'default': richTextEditor_build
 });
 
-const tagName$1o = 'div';
+const tagName$1p = 'div';
 register('wm-search', () => {
     return {
-        pre: attrs => `<${tagName$1o} wmSearch ${getFormMarkupAttr(attrs)} ${getNgModelAttr(attrs)}>`,
-        post: () => `</${tagName$1o}>`
+        pre: attrs => `<${tagName$1p} wmSearch ${getFormMarkupAttr(attrs)} ${getNgModelAttr(attrs)}>`,
+        post: () => `</${tagName$1p}>`
     };
 });
 var search_build = () => { };
@@ -42422,11 +42555,11 @@ var search_build$1 = /*#__PURE__*/Object.freeze({
     'default': search_build
 });
 
-const tagName$1n = 'div';
+const tagName$1o = 'div';
 register('wm-tree', () => {
     return {
-        pre: attrs => `<${tagName$1n} wmTree ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$1n}>`
+        pre: attrs => `<${tagName$1o} wmTree ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$1o}>`
     };
 });
 var tree_build = () => { };
@@ -42436,11 +42569,11 @@ var tree_build$1 = /*#__PURE__*/Object.freeze({
     'default': tree_build
 });
 
-const tagName$1m = 'div';
+const tagName$1n = 'div';
 register('wm-card', () => {
     return {
-        pre: attrs => `<${tagName$1m} wmCard ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$1m}>`
+        pre: attrs => `<${tagName$1n} wmCard ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$1n}>`
     };
 });
 var card_build = () => { };
@@ -42450,11 +42583,11 @@ var card_build$1 = /*#__PURE__*/Object.freeze({
     'default': card_build
 });
 
-const tagName$1l = 'div';
+const tagName$1m = 'div';
 register('wm-card-content', () => {
     return {
-        pre: attrs => `<${tagName$1l} wmCardContent partialContainer ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$1l}>`
+        pre: attrs => `<${tagName$1m} wmCardContent partialContainer ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$1m}>`
     };
 });
 var cardContent_build = () => { };
@@ -42464,11 +42597,11 @@ var cardContent_build$1 = /*#__PURE__*/Object.freeze({
     'default': cardContent_build
 });
 
-const tagName$1k = 'div';
+const tagName$1l = 'div';
 register('wm-card-actions', () => {
     return {
-        pre: attrs => `<${tagName$1k} wmCardActions ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$1k}>`
+        pre: attrs => `<${tagName$1l} wmCardActions ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$1l}>`
     };
 });
 var cardActions_build = () => { };
@@ -42478,11 +42611,11 @@ var cardActions_build$1 = /*#__PURE__*/Object.freeze({
     'default': cardActions_build
 });
 
-const tagName$1j = 'div';
+const tagName$1k = 'div';
 register('wm-card-footer', () => {
     return {
-        pre: attrs => `<${tagName$1j} wmCardFooter ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$1j}>`
+        pre: attrs => `<${tagName$1k} wmCardFooter ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$1k}>`
     };
 });
 var cardFooter_build = () => { };
@@ -42492,11 +42625,11 @@ var cardFooter_build$1 = /*#__PURE__*/Object.freeze({
     'default': cardFooter_build
 });
 
-const tagName$1i = 'div';
+const tagName$1j = 'div';
 register('wm-chart', () => {
     return {
-        pre: attrs => `<${tagName$1i} wmChart redrawable aria-label="${attrs.get('type')} Chart" ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$1i}>`
+        pre: attrs => `<${tagName$1j} wmChart redrawable aria-label="${attrs.get('type')} Chart" ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$1j}>`
     };
 });
 var chart_build = () => { };
@@ -42506,20 +42639,20 @@ var chart_build$1 = /*#__PURE__*/Object.freeze({
     'default': chart_build
 });
 
-const tagName$1h = 'div';
+const tagName$1i = 'div';
 const dataSetKey$4 = 'dataset';
-const idGen$j = new IDGenerator('wm_accordion_ref_');
+const idGen$k = new IDGenerator('wm_accordion_ref_');
 const isDynamicAccordion = node => node.attrs.find(attr => attr.name === 'type' && attr.value === 'dynamic');
-const ɵ0$a$1 = isDynamicAccordion;
+const ɵ0$b$1 = isDynamicAccordion;
 register('wm-accordion', () => {
     return {
         pre: (attrs, shared) => {
             // generating unique Id for the accordion
-            const counter = idGen$j.nextUid();
+            const counter = idGen$k.nextUid();
             shared.set('accordion_ref', counter);
-            return `<${tagName$1h} wmAccordion #${counter}="wmAccordion" role="tablist" aria-multiselectable="true" ${getAttrMarkup(attrs)}>`;
+            return `<${tagName$1i} wmAccordion #${counter}="wmAccordion" role="tablist" aria-multiselectable="true" ${getAttrMarkup(attrs)}>`;
         },
-        post: () => `</${tagName$1h}>`,
+        post: () => `</${tagName$1i}>`,
         template: (node, shared) => {
             // check if the accordion is dynamic
             if (isDynamicAccordion(node)) {
@@ -42548,14 +42681,14 @@ var accordion_build = () => { };
 var accordion_build$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     'default': accordion_build,
-    'ɵ0': ɵ0$a$1
+    'ɵ0': ɵ0$b$1
 });
 
-const tagName$1g = 'div';
+const tagName$1h = 'div';
 register('wm-accordionpane', () => {
     return {
-        pre: attrs => `<${tagName$1g} wmAccordionPane partialContainer wm-navigable-element="true" role="tab" ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$1g}>`
+        pre: attrs => `<${tagName$1h} wmAccordionPane partialContainer wm-navigable-element="true" role="tab" ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$1h}>`
     };
 });
 var accordionPane_build = () => { };
@@ -42565,11 +42698,11 @@ var accordionPane_build$1 = /*#__PURE__*/Object.freeze({
     'default': accordionPane_build
 });
 
-const tagName$1f = 'div';
+const tagName$1g = 'div';
 register('wm-container', () => {
     return {
-        pre: attrs => `<${tagName$1f} wmContainer partialContainer wmSmoothscroll="${attrs.get('smoothscroll') || 'false'}" ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$1f}>`
+        pre: attrs => `<${tagName$1g} wmContainer partialContainer wmSmoothscroll="${attrs.get('smoothscroll') || 'false'}" ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$1g}>`
     };
 });
 var container_build = () => { };
@@ -42579,11 +42712,11 @@ var container_build$1 = /*#__PURE__*/Object.freeze({
     'default': container_build
 });
 
-const tagName$1e = 'div';
+const tagName$1f = 'div';
 register('wm-gridcolumn', () => {
     return {
-        pre: attrs => `<${tagName$1e} wmLayoutGridColumn ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$1e}>`
+        pre: attrs => `<${tagName$1f} wmLayoutGridColumn ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$1f}>`
     };
 });
 var layoutGridColumn_build = () => { };
@@ -42593,11 +42726,11 @@ var layoutGridColumn_build$1 = /*#__PURE__*/Object.freeze({
     'default': layoutGridColumn_build
 });
 
-const tagName$1d = 'div';
+const tagName$1e = 'div';
 register('wm-gridrow', () => {
     return {
-        pre: attrs => `<${tagName$1d} wmLayoutGridRow ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$1d}>`
+        pre: attrs => `<${tagName$1e} wmLayoutGridRow ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$1e}>`
     };
 });
 var layoutGridRow_build = () => { };
@@ -42607,11 +42740,11 @@ var layoutGridRow_build$1 = /*#__PURE__*/Object.freeze({
     'default': layoutGridRow_build
 });
 
-const tagName$1c = 'div';
+const tagName$1d = 'div';
 register('wm-layoutgrid', () => {
     return {
-        pre: attrs => `<${tagName$1c} wmLayoutGrid ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$1c}>`
+        pre: attrs => `<${tagName$1d} wmLayoutGrid ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$1d}>`
     };
 });
 var layoutGrid_build = () => { };
@@ -42621,21 +42754,21 @@ var layoutGrid_build$1 = /*#__PURE__*/Object.freeze({
     'default': layoutGrid_build
 });
 
-const tagName$1b = 'div';
-const idGen$i = new IDGenerator('wm_panel');
+const tagName$1c = 'div';
+const idGen$j = new IDGenerator('wm_panel');
 register('wm-panel', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$i.nextUid();
-            return `<${tagName$1b} wmPanel #${counter}="wmPanel" partialContainer [attr.aria-label]="${counter}.hint || 'Panel'" wm-navigable-element="true" ${getAttrMarkup(attrs)}>`;
+            const counter = idGen$j.nextUid();
+            return `<${tagName$1c} wmPanel #${counter}="wmPanel" partialContainer [attr.aria-label]="${counter}.hint || 'Panel'" wm-navigable-element="true" ${getAttrMarkup(attrs)}>`;
         },
-        post: () => `</${tagName$1b}>`
+        post: () => `</${tagName$1c}>`
     };
 });
 register('wm-panel-footer', () => {
     return {
-        pre: attrs => `<${tagName$1b} wmPanelFooter ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$1b}>`
+        pre: attrs => `<${tagName$1c} wmPanelFooter ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$1c}>`
     };
 });
 var panel_build = () => { };
@@ -42645,11 +42778,11 @@ var panel_build$1 = /*#__PURE__*/Object.freeze({
     'default': panel_build
 });
 
-const tagName$1a = 'div';
+const tagName$1b = 'div';
 register('wm-segmented-control', () => {
     return {
-        pre: attrs => `<${tagName$1a} wmSegmentedControl ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$1a}>`
+        pre: attrs => `<${tagName$1b} wmSegmentedControl ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$1b}>`
     };
 });
 var segmentedControl_build = () => { };
@@ -42659,11 +42792,11 @@ var segmentedControl_build$1 = /*#__PURE__*/Object.freeze({
     'default': segmentedControl_build
 });
 
-const tagName$19 = 'li';
+const tagName$1a = 'li';
 register('wm-segment-content', () => {
     return {
-        pre: attrs => `<${tagName$19} wmSegmentContent partialContainer wmSmoothscroll=${attrs.get('smoothscroll') || 'false'} wm-navigable-element="true" ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$19}>`
+        pre: attrs => `<${tagName$1a} wmSegmentContent partialContainer wmSmoothscroll=${attrs.get('smoothscroll') || 'false'} wm-navigable-element="true" ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$1a}>`
     };
 });
 var segmentContent_build = () => { };
@@ -42699,20 +42832,20 @@ var repeatTemplate_build$1 = /*#__PURE__*/Object.freeze({
     'default': repeatTemplate_build
 });
 
-const tagName$18 = 'div';
+const tagName$19 = 'div';
 const dataSetKey$3 = 'dataset';
-const idGen$h = new IDGenerator('wm_tabs_ref_');
+const idGen$i = new IDGenerator('wm_tabs_ref_');
 const isDynamicTabs = node => node.attrs.find(attr => attr.name === 'type' && attr.value === 'dynamic');
-const ɵ0$9$1 = isDynamicTabs;
+const ɵ0$a$1 = isDynamicTabs;
 register('wm-tabs', () => {
     return {
         pre: (attrs, shared) => {
             // generating unique Id for the tabs
-            const counter = idGen$h.nextUid();
+            const counter = idGen$i.nextUid();
             shared.set('tabs_ref', counter);
-            return `<${tagName$18} wmTabs #${counter}="wmTabs" ${getAttrMarkup(attrs)}>`;
+            return `<${tagName$19} wmTabs #${counter}="wmTabs" ${getAttrMarkup(attrs)}>`;
         },
-        post: () => `</${tagName$18}>`,
+        post: () => `</${tagName$19}>`,
         template: (node, shared) => {
             // check if the tab widget is dynamic
             if (isDynamicTabs(node)) {
@@ -42741,14 +42874,14 @@ var tabs_build = () => { };
 var tabs_build$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     'default': tabs_build,
-    'ɵ0': ɵ0$9$1
+    'ɵ0': ɵ0$a$1
 });
 
-const tagName$17 = 'div';
+const tagName$18 = 'div';
 register('wm-tabpane', () => {
     return {
-        pre: attrs => `<${tagName$17} wmTabPane  partialContainer ${getAttrMarkup(attrs)} wm-navigable-element="true" role="tabpanel">`,
-        post: () => `</${tagName$17}>`
+        pre: attrs => `<${tagName$18} wmTabPane  partialContainer ${getAttrMarkup(attrs)} wm-navigable-element="true" role="tabpanel">`,
+        post: () => `</${tagName$18}>`
     };
 });
 var tabPane_build = () => { };
@@ -42758,11 +42891,11 @@ var tabPane_build$1 = /*#__PURE__*/Object.freeze({
     'default': tabPane_build
 });
 
-const tagName$16 = 'div';
+const tagName$17 = 'div';
 register('wm-tile', () => {
     return {
-        pre: attrs => `<${tagName$16} wmTile aria-describedby="Tile" wm-navigable-element="true" ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$16}>`
+        pre: attrs => `<${tagName$17} wmTile aria-describedby="Tile" wm-navigable-element="true" ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$17}>`
     };
 });
 var tile_build = () => { };
@@ -42772,11 +42905,11 @@ var tile_build$1 = /*#__PURE__*/Object.freeze({
     'default': tile_build
 });
 
-const tagName$15 = 'div';
+const tagName$16 = 'div';
 register('wm-wizard', () => {
     return {
-        pre: attrs => `<${tagName$15} wmWizard role="tablist" ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$15}>`
+        pre: attrs => `<${tagName$16} wmWizard role="tablist" ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$16}>`
     };
 });
 var wizard_build = () => { };
@@ -42786,16 +42919,16 @@ var wizard_build$1 = /*#__PURE__*/Object.freeze({
     'default': wizard_build
 });
 
-const tagName$14 = 'form';
-const idGen$g = new IDGenerator('wizard_step_id_');
+const tagName$15 = 'form';
+const idGen$h = new IDGenerator('wizard_step_id_');
 register('wm-wizardstep', () => {
     return {
         pre: attrs => {
-            const counter = idGen$g.nextUid();
-            return `<${tagName$14} wmWizardStep #${counter}="wmWizardStep" ${getAttrMarkup(attrs)}>
+            const counter = idGen$h.nextUid();
+            return `<${tagName$15} wmWizardStep #${counter}="wmWizardStep" ${getAttrMarkup(attrs)}>
                        <ng-template [ngIf]="${counter}.isInitialized">`;
         },
-        post: () => `</ng-template></${tagName$14}>`
+        post: () => `</ng-template></${tagName$15}>`
     };
 });
 var wizardStep_build = () => { };
@@ -42805,15 +42938,15 @@ var wizardStep_build$1 = /*#__PURE__*/Object.freeze({
     'default': wizardStep_build
 });
 
-const tagName$13 = 'button';
-const idGen$f = new IDGenerator('wm_barcodescanner');
+const tagName$14 = 'button';
+const idGen$g = new IDGenerator('wm_barcodescanner');
 register('wm-barcodescanner', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$f.nextUid();
-            return `<${tagName$13} wmBarcodescanner #${counter}="wmBarcodescanner" [attr.aria-label]="${counter}.hint || 'Barcode scanner'"  ${getAttrMarkup(attrs)}>`;
+            const counter = idGen$g.nextUid();
+            return `<${tagName$14} wmBarcodescanner #${counter}="wmBarcodescanner" [attr.aria-label]="${counter}.hint || 'Barcode scanner'"  ${getAttrMarkup(attrs)}>`;
         },
-        post: () => `</${tagName$13}>`
+        post: () => `</${tagName$14}>`
     };
 });
 var barcodeScanner_build = () => { };
@@ -42823,15 +42956,15 @@ var barcodeScanner_build$1 = /*#__PURE__*/Object.freeze({
     'default': barcodeScanner_build
 });
 
-const tagName$12 = 'button';
-const idGen$e = new IDGenerator('wm_camera');
+const tagName$13 = 'button';
+const idGen$f = new IDGenerator('wm_camera');
 register('wm-camera', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$e.nextUid();
-            return `<${tagName$12} type='button' wmCamera #${counter}="wmCamera" [attr.aria-label]="${counter}.hint || 'Camera'"  ${getAttrMarkup(attrs)}>`;
+            const counter = idGen$f.nextUid();
+            return `<${tagName$13} type='button' wmCamera #${counter}="wmCamera" [attr.aria-label]="${counter}.hint || 'Camera'"  ${getAttrMarkup(attrs)}>`;
         },
-        post: () => `</${tagName$12}>`
+        post: () => `</${tagName$13}>`
     };
 });
 var camera_build = () => { };
@@ -42841,11 +42974,11 @@ var camera_build$1 = /*#__PURE__*/Object.freeze({
     'default': camera_build
 });
 
-const tagName$11 = 'div';
+const tagName$12 = 'div';
 register('wm-alertdialog', () => {
     return {
-        pre: attrs => `<${tagName$11} wmAlertDialog role="alertdialog" wm-navigable-element="true" ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$11}>`
+        pre: attrs => `<${tagName$12} wmAlertDialog role="alertdialog" wm-navigable-element="true" ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$12}>`
     };
 });
 var alertDialog_build = () => { };
@@ -42855,11 +42988,11 @@ var alertDialog_build$1 = /*#__PURE__*/Object.freeze({
     'default': alertDialog_build
 });
 
-const tagName$10 = 'div';
+const tagName$11 = 'div';
 register('wm-confirmdialog', () => {
     return {
-        pre: attrs => `<${tagName$10} wmConfirmDialog wm-navigable-element="true" ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$10}>`
+        pre: attrs => `<${tagName$11} wmConfirmDialog wm-navigable-element="true" ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$11}>`
     };
 });
 var confirmDialog_build = () => { };
@@ -42869,11 +43002,11 @@ var confirmDialog_build$1 = /*#__PURE__*/Object.freeze({
     'default': confirmDialog_build
 });
 
-const tagName$$ = 'div';
+const tagName$10 = 'div';
 register('wm-dialogactions', () => {
     return {
-        pre: attrs => `<ng-template #dialogFooter><${tagName$$} wmDialogFooter data-identfier="actions" ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$$}></ng-template>`
+        pre: attrs => `<ng-template #dialogFooter><${tagName$10} wmDialogFooter data-identfier="actions" ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$10}></ng-template>`
     };
 });
 var dialogFooter_build = () => { };
@@ -42883,11 +43016,11 @@ var dialogFooter_build$1 = /*#__PURE__*/Object.freeze({
     'default': dialogFooter_build
 });
 
-const tagName$_ = 'div';
+const tagName$$ = 'div';
 register('wm-dialog', () => {
     return {
-        pre: attrs => `<${tagName$_} wmDialog ${getAttrMarkup(attrs)} aria-modal="true" role="dialog" wm-navigable-element="true"><ng-template #dialogBody>`,
-        post: () => `</ng-template></${tagName$_}>`
+        pre: attrs => `<${tagName$$} wmDialog ${getAttrMarkup(attrs)} aria-modal="true" role="dialog" wm-navigable-element="true"><ng-template #dialogBody>`,
+        post: () => `</ng-template></${tagName$$}>`
     };
 });
 // Todo:vinay remove wm-view in migration
@@ -42904,11 +43037,11 @@ var dialog_build$1 = /*#__PURE__*/Object.freeze({
     'default': dialog_build
 });
 
-const tagName$Z = 'div';
+const tagName$_ = 'div';
 register('wm-iframedialog', () => {
     return {
-        pre: attrs => `<${tagName$Z} wmIframeDialog wm-navigable-element="true" ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$Z}>`
+        pre: attrs => `<${tagName$_} wmIframeDialog wm-navigable-element="true" ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$_}>`
     };
 });
 var iframeDialog_build = () => { };
@@ -42918,11 +43051,11 @@ var iframeDialog_build$1 = /*#__PURE__*/Object.freeze({
     'default': iframeDialog_build
 });
 
-const tagName$Y = 'div';
+const tagName$Z = 'div';
 register('wm-logindialog', () => {
     return {
-        pre: attrs => `<${tagName$Y} wmDialog wmLoginDialog ${getAttrMarkup(attrs)} eventsource.bind="Actions.loginAction" wm-navigable-element="true"><ng-template #dialogBody>`,
-        post: () => `</ng-template></${tagName$Y}>`
+        pre: attrs => `<${tagName$Z} wmDialog wmLoginDialog ${getAttrMarkup(attrs)} eventsource.bind="Actions.loginAction" wm-navigable-element="true"><ng-template #dialogBody>`,
+        post: () => `</ng-template></${tagName$Z}>`
     };
 });
 var loginDialog_build = () => { };
@@ -42932,7 +43065,7 @@ var loginDialog_build$1 = /*#__PURE__*/Object.freeze({
     'default': loginDialog_build
 });
 
-const tagName$X = 'div';
+const tagName$Y = 'div';
 register('wm-pagedialog', () => {
     return {
         pre: (attrs, shared) => {
@@ -42958,14 +43091,14 @@ register('wm-pagedialog', () => {
                 shared.set('hasPartialContent', true);
                 containerMarkup += `<ng-template><div wmContainer #partial partialContainer ${contentMarkup} width="100%" height="100%" ${onLoadEvtMarkup}>`;
             }
-            return `<${tagName$X} wmPartialDialog ${getAttrMarkup(attrs)}>${containerMarkup}`;
+            return `<${tagName$Y} wmPartialDialog ${getAttrMarkup(attrs)}>${containerMarkup}`;
         },
         post: (attrs, shared) => {
             let preContent = '';
             if (shared.get('hasPartialContent')) {
                 preContent = `</div></ng-template>`;
             }
-            return `${preContent}</${tagName$X}>`;
+            return `${preContent}</${tagName$Y}>`;
         }
     };
 });
@@ -43044,8 +43177,8 @@ const getEditModeWidget = colDef => {
     return (fieldTypeWidgetTypeMap[colDef.type] && fieldTypeWidgetTypeMap[colDef.type][0]) || FormWidgetType.TEXT;
 };
 
-const tagName$W = 'div';
-const idGen$d = new IDGenerator('formfield_');
+const tagName$X = 'div';
+const idGen$e = new IDGenerator('formfield_');
 const getEventsTemplate = (attrs) => {
     const eventAttrs = new Map();
     if (!attrs.has('focus.event')) {
@@ -43068,7 +43201,7 @@ const getEventsTemplate = (attrs) => {
     });
     return getFormMarkupAttr(eventAttrs);
 };
-const ɵ0$8$1 = getEventsTemplate;
+const ɵ0$9$1 = getEventsTemplate;
 const DEFAULT_PLACEHOLDERS = new Map([
     [FormWidgetType.SELECT, ['Select Min value', 'Select Max value', 'Select value']],
     [FormWidgetType.DATETIME, ['Select Min date time', 'Select Max date time', 'Select date time']],
@@ -43095,7 +43228,7 @@ const setDefaultPlaceholder = (attrs, widgetType, index) => {
         attrs.set(prop, placeholder);
     }
 };
-const ɵ1$6 = setDefaultPlaceholder;
+const ɵ1$7 = setDefaultPlaceholder;
 const getWidgetTemplate = (attrs, options) => {
     const name = attrs.get('name');
     const fieldName = (attrs.get('key') || name || '').trim();
@@ -43150,7 +43283,7 @@ const registerFormField = (isFormField) => {
     return {
         requires: ['wm-form', 'wm-liveform', 'wm-livefilter', 'wm-list'],
         pre: (attrs, shared, parentForm, parentLiveForm, parentFilter, parentList) => {
-            const counter = idGen$d.nextUid();
+            const counter = idGen$e.nextUid();
             const parent = parentForm || parentLiveForm || parentFilter;
             const pCounter = (parent && parent.get('form_reference')) || 'form';
             const widgetType = attrs.get('widget') || FormWidgetType.TEXT;
@@ -43171,7 +43304,7 @@ const registerFormField = (isFormField) => {
             else {
                 setDefaultPlaceholder(attrs, widgetType, 2);
             }
-            return `<${tagName$W} data-role="${dataRole}" [formGroup]="${pCounter}.ngform" wmFormField captionPosition #${counter}="wmFormField" widgettype="${widgetType}" ${getFormMarkupAttr(attrs)}>
+            return `<${tagName$X} data-role="${dataRole}" [formGroup]="${pCounter}.ngform" wmFormField captionPosition #${counter}="wmFormField" widgettype="${widgetType}" ${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,
@@ -43187,7 +43320,7 @@ const registerFormField = (isFormField) => {
                             </div>
                         </div>`;
         },
-        post: () => `</${tagName$W}>`,
+        post: () => `</${tagName$X}>`,
         provide: (attrs, shared) => {
             const provider = new Map();
             provider.set('form_reference', shared.get('counter'));
@@ -43208,22 +43341,22 @@ var formField_build = () => { };
 var formField_build$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     'default': formField_build,
-    'ɵ0': ɵ0$8$1,
-    'ɵ1': ɵ1$6,
+    'ɵ0': ɵ0$9$1,
+    'ɵ1': ɵ1$7,
     'ɵ2': ɵ2$3$1,
     'ɵ3': ɵ3$2$1,
     'ɵ4': ɵ4$1$1,
     'ɵ5': ɵ5$1$1
 });
 
-const tagName$V = 'div';
+const tagName$W = 'div';
 const registerAction = (tmpl) => {
     return {
-        pre: attrs => `<${tagName$V} wmFormAction name="${attrs.get('name') || attrs.get('key')}" ${getAttrMarkup(attrs)} ${tmpl}>`,
-        post: () => `</${tagName$V}>`
+        pre: attrs => `<${tagName$W} wmFormAction name="${attrs.get('name') || attrs.get('key')}" ${getAttrMarkup(attrs)} ${tmpl}>`,
+        post: () => `</${tagName$W}>`
     };
 };
-const ɵ0$7$1 = registerAction;
+const ɵ0$8$1 = registerAction;
 register('wm-form-action', registerAction.bind(undefined, ''));
 register('wm-filter-action', registerAction.bind(undefined, ` update-mode="true" `));
 var formAction_build = () => { };
@@ -43231,11 +43364,11 @@ var formAction_build = () => { };
 var formAction_build$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     'default': formAction_build,
-    'ɵ0': ɵ0$7$1
+    'ɵ0': ɵ0$8$1
 });
 
-const tagName$U = 'form';
-const idGen$c = new IDGenerator('form_');
+const tagName$V = 'form';
+const idGen$d = new IDGenerator('form_');
 const formWidgets$1 = new Set([
     'wm-text',
     'wm-textarea',
@@ -43284,7 +43417,7 @@ const addFormControlName = (children = []) => {
         addFormControlName(childNode.children);
     });
 };
-const ɵ0$6$1 = addFormControlName;
+const ɵ0$7$1 = addFormControlName;
 const updateFormDataSource = (attrMap) => {
     if (attrMap.get('formdata.bind')) {
         const formDataSource = getDataSource(attrMap.get('formdata.bind'));
@@ -43293,7 +43426,7 @@ const updateFormDataSource = (attrMap) => {
         }
     }
 };
-const ɵ1$5$1 = updateFormDataSource;
+const ɵ1$6 = updateFormDataSource;
 const buildTask = (directiveAttr = '') => {
     return {
         requires: ['wm-livetable', 'wm-login'],
@@ -43305,12 +43438,12 @@ const buildTask = (directiveAttr = '') => {
             let tmpl;
             let dialogId;
             const role = parentLoginWidget && parentLoginWidget.get('isLogin') ? 'app-login' : '';
-            const counter = idGen$c.nextUid();
+            const counter = idGen$d.nextUid();
             const dependsOn = attrs.get('dependson') ? `dependson="${attrs.get('dependson')}"` : '';
             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$U} wmForm data-role="${role}" ${directiveAttr} #${counter} ngNativeValidate [formGroup]="${counter}.ngform" [noValidate]="${counter}.validationtype !== 'html'"
+            const liveFormTmpl = `<${tagName$V} wmForm data-role="${role}" ${directiveAttr} #${counter} ngNativeValidate [formGroup]="${counter}.ngform" [noValidate]="${counter}.validationtype !== 'html'"
                     class="${classProp}" [class]="${counter}.captionAlignClass" [autocomplete]="${counter}.autocomplete ? 'on' : 'off'" captionposition=${attrs.get('captionposition')}`;
             attrs.set('numberOfFields', `${numberOfFields}`);
             shared.set('counter', counter);
@@ -43359,9 +43492,9 @@ const buildTask = (directiveAttr = '') => {
                 return '</form></ng-template></div></div>';
             }
             if (attrs.get('formlayout') === 'page') {
-                return `</div></${tagName$U}>`;
+                return `</div></${tagName$V}>`;
             }
-            return `</${tagName$U}>`;
+            return `</${tagName$V}>`;
         },
         provide: (attrs, shared) => {
             const provider = new Map();
@@ -43379,19 +43512,19 @@ var form_build = () => { };
 var form_build$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     'default': form_build,
-    'ɵ0': ɵ0$6$1,
-    'ɵ1': ɵ1$5$1,
+    'ɵ0': ɵ0$7$1,
+    'ɵ1': ɵ1$6,
     'ɵ2': ɵ2$2$1
 });
 
-const tagName$T = 'div';
+const tagName$U = 'div';
 register('wm-calendar', () => {
     return {
         pre: (attrs) => {
             let viewType = attrs.get('view') ? attrs.get('view') + ' view' : 'month view';
-            return `<${tagName$T} wmCalendar redrawable style="width:100%" aria-label="${viewType}" ${getAttrMarkup(attrs)}>`;
+            return `<${tagName$U} wmCalendar redrawable style="width:100%" aria-label="${viewType}" ${getAttrMarkup(attrs)}>`;
         },
-        post: () => `</${tagName$T}>`
+        post: () => `</${tagName$U}>`
     };
 });
 var calendar_build = () => { };
@@ -43401,11 +43534,11 @@ var calendar_build$1 = /*#__PURE__*/Object.freeze({
     'default': calendar_build
 });
 
-const tagName$S = 'ul';
+const tagName$T = 'ul';
 register('wm-chips', () => {
     return {
-        pre: attrs => `<${tagName$S} wmChips role="listbox" ${getAttrMarkup(attrs)} ${getNgModelAttr(attrs)}>`,
-        post: () => `</${tagName$S}>`
+        pre: attrs => `<${tagName$T} wmChips role="listbox" ${getAttrMarkup(attrs)} ${getNgModelAttr(attrs)}>`,
+        post: () => `</${tagName$T}>`
     };
 });
 var chips_build = () => { };
@@ -43415,11 +43548,11 @@ var chips_build$1 = /*#__PURE__*/Object.freeze({
     'default': chips_build
 });
 
-const tagName$R = 'div';
+const tagName$S = 'div';
 register('wm-colorpicker', () => {
     return {
-        pre: attrs => `<${tagName$R} wmColorPicker ${getAttrMarkup(attrs)} role="input" ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
-        post: () => `</${tagName$R}>`
+        pre: attrs => `<${tagName$S} wmColorPicker ${getAttrMarkup(attrs)} role="input" ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
+        post: () => `</${tagName$S}>`
     };
 });
 var colorPicker_build = () => { };
@@ -43429,11 +43562,11 @@ var colorPicker_build$1 = /*#__PURE__*/Object.freeze({
     'default': colorPicker_build
 });
 
-const tagName$Q = 'div';
+const tagName$R = 'div';
 register('wm-currency', () => {
     return {
-        pre: attrs => `<${tagName$Q} wmCurrency ${getAttrMarkup(attrs)} role="input" ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
-        post: () => `</${tagName$Q}>`
+        pre: attrs => `<${tagName$R} wmCurrency ${getAttrMarkup(attrs)} role="input" ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
+        post: () => `</${tagName$R}>`
     };
 });
 var currency_build = () => { };
@@ -43443,11 +43576,11 @@ var currency_build$1 = /*#__PURE__*/Object.freeze({
     'default': currency_build
 });
 
-const tagName$P = 'div';
+const tagName$Q = 'div';
 register('wm-buttongroup', () => {
     return {
-        pre: attrs => `<${tagName$P} wmButtonGroup role="group" aria-labelledby="button group" ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$P}>`
+        pre: attrs => `<${tagName$Q} wmButtonGroup role="group" aria-labelledby="button group" ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$Q}>`
     };
 });
 var buttonGroup_build = () => { };
@@ -43457,15 +43590,15 @@ var buttonGroup_build$1 = /*#__PURE__*/Object.freeze({
     'default': buttonGroup_build
 });
 
-const tagName$O = 'button';
-const idGen$b = new IDGenerator('wm_button');
+const tagName$P = 'button';
+const idGen$c = new IDGenerator('wm_button');
 register('wm-button', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$b.nextUid();
-            return `<${tagName$O} wmButton #${counter}="wmButton" [attr.aria-label]="${counter}.hint || ${counter}.caption || 'Button'" ${getAttrMarkup(attrs)}>`;
+            const counter = idGen$c.nextUid();
+            return `<${tagName$P} wmButton #${counter}="wmButton" [attr.aria-label]="${counter}.hint || ${counter}.caption || 'Button'" ${getAttrMarkup(attrs)}>`;
         },
-        post: () => `</${tagName$O}>`
+        post: () => `</${tagName$P}>`
     };
 });
 var button_build = () => { };
@@ -43475,11 +43608,11 @@ var button_build$1 = /*#__PURE__*/Object.freeze({
     'default': button_build
 });
 
-const tagName$N = 'div';
+const tagName$O = 'div';
 register('wm-checkbox', () => {
     return {
-        pre: attrs => `<${tagName$N} wmCheckbox ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
-        post: () => `</${tagName$N}>`
+        pre: attrs => `<${tagName$O} wmCheckbox ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
+        post: () => `</${tagName$O}>`
     };
 });
 var checkbox_build = () => { };
@@ -43489,11 +43622,11 @@ var checkbox_build$1 = /*#__PURE__*/Object.freeze({
     'default': checkbox_build
 });
 
-const tagName$M = 'ul';
+const tagName$N = 'ul';
 register('wm-checkboxset', () => {
     return {
-        pre: attrs => `<${tagName$M} wmCheckboxset ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
-        post: () => `</${tagName$M}>`
+        pre: attrs => `<${tagName$N} wmCheckboxset ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
+        post: () => `</${tagName$N}>`
     };
 });
 var checkboxset_build = () => { };
@@ -43503,11 +43636,11 @@ var checkboxset_build$1 = /*#__PURE__*/Object.freeze({
     'default': checkboxset_build
 });
 
-const tagName$L = 'div';
+const tagName$M = 'div';
 register('wm-composite', () => {
     return {
-        pre: attrs => `<${tagName$L} wmComposite captionPosition ${setChildAttrs(attrs)} ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$L}${clearChildAttrs()}>`
+        pre: attrs => `<${tagName$M} wmComposite captionPosition ${setChildAttrs(attrs)} ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$M}${clearChildAttrs()}>`
     };
 });
 var composite_build = () => { };
@@ -43517,11 +43650,11 @@ var composite_build$1 = /*#__PURE__*/Object.freeze({
     'default': composite_build
 });
 
-const tagName$K = 'div';
+const tagName$L = 'div';
 register('wm-number', () => {
     return {
-        pre: attrs => `<${tagName$K} wmNumber ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
-        post: () => `</${tagName$K}>`
+        pre: attrs => `<${tagName$L} wmNumber ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
+        post: () => `</${tagName$L}>`
     };
 });
 var number_build = () => { };
@@ -43531,11 +43664,11 @@ var number_build$1 = /*#__PURE__*/Object.freeze({
     'default': number_build
 });
 
-const tagName$J = 'ul';
+const tagName$K = 'ul';
 register('wm-radioset', () => {
     return {
-        pre: attrs => `<${tagName$J} wmRadioset ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
-        post: () => `</${tagName$J}>`
+        pre: attrs => `<${tagName$K} wmRadioset ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
+        post: () => `</${tagName$K}>`
     };
 });
 var radioset_build = () => { };
@@ -43545,11 +43678,11 @@ var radioset_build$1 = /*#__PURE__*/Object.freeze({
     'default': radioset_build
 });
 
-const tagName$I = 'wm-select';
+const tagName$J = 'wm-select';
 register('wm-select', () => {
     return {
-        pre: attrs => `<${tagName$I} ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)}  ${getNgModelAttr(attrs)}>`,
-        post: () => `</${tagName$I}>`
+        pre: attrs => `<${tagName$J} ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)}  ${getNgModelAttr(attrs)}>`,
+        post: () => `</${tagName$J}>`
     };
 });
 var select_build = () => { };
@@ -43559,15 +43692,15 @@ var select_build$1 = /*#__PURE__*/Object.freeze({
     'default': select_build
 });
 
-const tagName$H = 'div';
-const idGen$a = new IDGenerator('wm_switch');
+const tagName$I = 'div';
+const idGen$b = new IDGenerator('wm_switch');
 register('wm-switch', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$a.nextUid();
-            return `<${tagName$H} wmSwitch #${counter}="wmSwitch" [attr.aria-label]="${counter}.hint || 'Switch button'" ${getFormMarkupAttr(attrs)} ${getNgModelAttr(attrs)}>`;
+            const counter = idGen$b.nextUid();
+            return `<${tagName$I} wmSwitch #${counter}="wmSwitch" [attr.aria-label]="${counter}.hint || 'Switch button'" ${getFormMarkupAttr(attrs)} ${getNgModelAttr(attrs)}>`;
         },
-        post: () => `</${tagName$H}>`
+        post: () => `</${tagName$I}>`
     };
 });
 var switch_build = () => { };
@@ -43577,11 +43710,11 @@ var switch_build$1 = /*#__PURE__*/Object.freeze({
     'default': switch_build
 });
 
-const tagName$G = 'wm-input';
+const tagName$H = 'wm-input';
 register('wm-text', () => {
     return {
-        pre: attrs => `<${tagName$G} ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
-        post: () => `</${tagName$G}>`
+        pre: attrs => `<${tagName$H} ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
+        post: () => `</${tagName$H}>`
     };
 });
 var text_build = () => { };
@@ -43591,11 +43724,11 @@ var text_build$1 = /*#__PURE__*/Object.freeze({
     'default': text_build
 });
 
-const tagName$F = 'wm-textarea';
+const tagName$G = 'wm-textarea';
 register('wm-textarea', () => {
     return {
-        pre: attrs => `<${tagName$F} ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
-        post: () => `</${tagName$F}>`
+        pre: attrs => `<${tagName$G} ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
+        post: () => `</${tagName$G}>`
     };
 });
 var textarea_build = () => { };
@@ -43605,11 +43738,11 @@ var textarea_build$1 = /*#__PURE__*/Object.freeze({
     'default': textarea_build
 });
 
-const tagName$E = 'div';
+const tagName$F = 'div';
 register('wm-datetime', () => {
     return {
-        pre: attrs => `<${tagName$E} wmDateTime ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
-        post: () => `</${tagName$E}>`
+        pre: attrs => `<${tagName$F} wmDateTime ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
+        post: () => `</${tagName$F}>`
     };
 });
 var dateTime_build = () => { };
@@ -43619,11 +43752,11 @@ var dateTime_build$1 = /*#__PURE__*/Object.freeze({
     'default': dateTime_build
 });
 
-const tagName$D = 'div';
+const tagName$E = 'div';
 register('wm-date', () => {
     return {
-        pre: attrs => `<${tagName$D} wmDate ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
-        post: () => `</${tagName$D}>`
+        pre: attrs => `<${tagName$E} wmDate ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
+        post: () => `</${tagName$E}>`
     };
 });
 var date_build = () => { };
@@ -43633,11 +43766,11 @@ var date_build$1 = /*#__PURE__*/Object.freeze({
     'default': date_build
 });
 
-const tagName$C = 'div';
+const tagName$D = 'div';
 register('wm-time', () => {
     return {
-        pre: attrs => `<${tagName$C} wmTime ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
-        post: () => `</${tagName$C}>`
+        pre: attrs => `<${tagName$D} wmTime ${getFormMarkupAttr(attrs)} ${getChildAttrs(attrs)} ${getNgModelAttr(attrs)}>`,
+        post: () => `</${tagName$D}>`
     };
 });
 var time_build = () => { };
@@ -43647,7 +43780,7 @@ var time_build$1 = /*#__PURE__*/Object.freeze({
     'default': time_build
 });
 
-const tagName$B = 'div';
+const tagName$C = 'div';
 register('wm-fileupload', () => {
     return {
         pre: attrs => {
@@ -43655,9 +43788,9 @@ register('wm-fileupload', () => {
                 const onSelectBinding = getDataSource(attrs.get('select.event'));
                 attrs.set('datasource.bind', onSelectBinding);
             }
-            return `<${tagName$B} wmFileUpload ${getAttrMarkup(attrs)} role="input">`;
+            return `<${tagName$C} wmFileUpload ${getAttrMarkup(attrs)} role="input">`;
         },
-        post: () => `</${tagName$B}>`
+        post: () => `</${tagName$C}>`
     };
 });
 var fileUpload_build = () => { };
@@ -43667,11 +43800,11 @@ var fileUpload_build$1 = /*#__PURE__*/Object.freeze({
     'default': fileUpload_build
 });
 
-const tagName$A = 'div';
+const tagName$B = 'div';
 register('wm-rating', () => {
     return {
-        pre: attrs => `<${tagName$A} wmRating ${getFormMarkupAttr(attrs)} ${getNgModelAttr(attrs)}>`,
-        post: () => `</${tagName$A}>`
+        pre: attrs => `<${tagName$B} wmRating ${getFormMarkupAttr(attrs)} ${getNgModelAttr(attrs)}>`,
+        post: () => `</${tagName$B}>`
     };
 });
 var rating_build = () => { };
@@ -43681,11 +43814,11 @@ var rating_build$1 = /*#__PURE__*/Object.freeze({
     'default': rating_build
 });
 
-const tagName$z = 'div';
+const tagName$A = 'div';
 register('wm-slider', () => {
     return {
-        pre: attrs => `<${tagName$z} wmSlider ${getAttrMarkup(attrs)} ${getNgModelAttr(attrs)}>`,
-        post: () => `</${tagName$z}>`
+        pre: attrs => `<${tagName$A} wmSlider ${getAttrMarkup(attrs)} ${getNgModelAttr(attrs)}>`,
+        post: () => `</${tagName$A}>`
     };
 });
 var slider_build = () => { };
@@ -43696,7 +43829,7 @@ var slider_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const wmlistTag = 'wm-list';
-const tagName$y = 'div';
+const tagName$z = 'div';
 const dataSetKey$2 = 'dataset';
 function copyAttribute$1(from, fromAttrName, to, toAttrName) {
     const fromAttr = from.attrs.find(a => a.name === fromAttrName);
@@ -43744,8 +43877,8 @@ register('wm-media-list', () => {
                 copyAttribute$1(template, 'height', node, 'thumbnailheight');
             }
         },
-        pre: attrs => `<${tagName$y} wmMediaList ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$y}>`
+        pre: attrs => `<${tagName$z} wmMediaList ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$z}>`
     };
 });
 var mediaList_build = () => { };
@@ -43755,11 +43888,11 @@ var mediaList_build$1 = /*#__PURE__*/Object.freeze({
     'default': mediaList_build
 });
 
-const tagName$x = 'ng-template';
+const tagName$y = 'ng-template';
 register('wm-media-template', () => {
     return {
-        pre: () => `<${tagName$x} #mediaListTemplate let-item="item" let-index="index">`,
-        post: () => `</${tagName$x}>`
+        pre: () => `<${tagName$y} #mediaListTemplate let-item="item" let-index="index">`,
+        post: () => `</${tagName$y}>`
     };
 });
 var mediaListItem_build = () => { };
@@ -43843,16 +43976,16 @@ var list_build$1 = /*#__PURE__*/Object.freeze({
     'default': list_build
 });
 
-const tagName$w = 'div';
-const idGen$9 = new IDGenerator('liveform_dialog_id_');
+const tagName$x = 'div';
+const idGen$a = new IDGenerator('liveform_dialog_id_');
 register('wm-livetable', () => {
     return {
         pre: (attrs, shared) => {
-            const counter = idGen$9.nextUid();
+            const counter = idGen$a.nextUid();
             shared.set('counter', counter);
-            return `<${tagName$w} wmLiveTable role="table" ${getAttrMarkup(attrs)} dialogid="${counter}">`;
+            return `<${tagName$x} wmLiveTable role="table" ${getAttrMarkup(attrs)} dialogid="${counter}">`;
         },
-        post: () => `</${tagName$w}>`,
+        post: () => `</${tagName$x}>`,
         provide: (attrs, shared) => {
             const provider = new Map();
             provider.set('liveform_dialog_id', shared.get('counter'));
@@ -43867,15 +44000,15 @@ var liveTable_build$1 = /*#__PURE__*/Object.freeze({
     'default': liveTable_build
 });
 
-const tagName$v = 'p';
-const idGen$8 = new IDGenerator('wm_message');
+const tagName$w = 'p';
+const idGen$9 = new IDGenerator('wm_message');
 register('wm-message', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$8.nextUid();
-            return `<${tagName$v} wmMessage tabindex="0" #${counter}="wmMessage" ${getAttrMarkup(attrs)}>`;
+            const counter = idGen$9.nextUid();
+            return `<${tagName$w} wmMessage tabindex="0" #${counter}="wmMessage" ${getAttrMarkup(attrs)}>`;
         },
-        post: () => `</${tagName$v}>`
+        post: () => `</${tagName$w}>`
     };
 });
 var message_build = () => { };
@@ -43885,11 +44018,11 @@ var message_build$1 = /*#__PURE__*/Object.freeze({
     'default': message_build
 });
 
-const tagName$u = 'ol';
+const tagName$v = 'ol';
 register('wm-breadcrumb', () => {
     return {
-        pre: attrs => `<${tagName$u} wmBreadcrumb ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$u}>`
+        pre: attrs => `<${tagName$v} wmBreadcrumb ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$v}>`
     };
 });
 var breadcrumb_build = () => { };
@@ -43899,11 +44032,11 @@ var breadcrumb_build$1 = /*#__PURE__*/Object.freeze({
     'default': breadcrumb_build
 });
 
-const tagName$t = 'div';
+const tagName$u = 'div';
 register('wm-menu', () => {
     return {
-        pre: attrs => `<${tagName$t} wmMenu dropdown ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$t}>`
+        pre: attrs => `<${tagName$u} wmMenu dropdown ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$u}>`
     };
 });
 var menu_build = () => { };
@@ -43913,11 +44046,11 @@ var menu_build$1 = /*#__PURE__*/Object.freeze({
     'default': menu_build
 });
 
-const tagName$s = 'li';
+const tagName$t = 'li';
 register('wm-nav-item', () => {
     return {
-        pre: attrs => `<${tagName$s} wmNavItem role="listitem" ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$s}>`
+        pre: attrs => `<${tagName$t} wmNavItem role="listitem" ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$t}>`
     };
 });
 var navItem_build = () => { };
@@ -43927,11 +44060,11 @@ var navItem_build$1 = /*#__PURE__*/Object.freeze({
     'default': navItem_build
 });
 
-const tagName$r = 'ul';
+const tagName$s = 'ul';
 register('wm-nav', () => {
     return {
-        pre: attrs => `<${tagName$r} wmNav data-element-type="wmNav" data-role="page-header" role="list" ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$r}>`
+        pre: attrs => `<${tagName$s} wmNav data-element-type="wmNav" data-role="page-header" role="list" ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$s}>`
     };
 });
 var nav_build = () => { };
@@ -43941,11 +44074,11 @@ var nav_build$1 = /*#__PURE__*/Object.freeze({
     'default': nav_build
 });
 
-const tagName$q = 'nav';
+const tagName$r = 'nav';
 register('wm-navbar', () => {
     return {
-        pre: attrs => `<${tagName$q} wmNavbar data-element-type="wmNavbar" role="navigation" ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$q}>`
+        pre: attrs => `<${tagName$r} wmNavbar data-element-type="wmNavbar" role="navigation" ${getAttrMarkup(attrs)}>`,
+        post: () => `</${tagName$r}>`
     };
 });
 var navbar_build = () => { };
@@ -43955,7 +44088,7 @@ var navbar_build$1 = /*#__PURE__*/Object.freeze({
     'default': navbar_build
 });
 
-const tagName$p = 'wm-popover';
+const tagName$q = 'wm-popover';
 register('wm-popover', () => {
     return {
         requires: ['wm-table'],
@@ -43975,7 +44108,7 @@ register('wm-popover', () => {
                 popoverTemplate = `<div wmContainer #partial partialContainer ${contentMarkup}>`;
                 shared.set('hasPopoverContent', true);
             }
-            let markup = `<${tagName$p} wmPopover ${getAttrMarkup(attrs)}>`;
+            let markup = `<${tagName$q} wmPopover ${getAttrMarkup(attrs)}>`;
             const contextAttrs = table ? `let-row="row"` : ``;
             markup += `<ng-template ${contextAttrs}><button class="popover-start"></button>`;
             // todo keyboard navigation - tab
@@ -43989,7 +44122,7 @@ register('wm-popover', () => {
             if (shared.get('hasPopoverContent')) {
                 markup += `</div>`;
             }
-            return `${markup}<button class="popover-end"></button></ng-template></${tagName$p}>`;
+            return `${markup}<button class="popover-end"></button></ng-template></${tagName$q}>`;
         }
     };
 });
@@ -44000,21 +44133,21 @@ var popover_build$1 = /*#__PURE__*/Object.freeze({
     'default': popover_build
 });
 
-const tagName$o = 'div';
+const tagName$p = 'div';
 const findChild = (node, childName) => {
     const child = node && node.children.find(e => (e instanceof Element$1$1 && e.name === childName));
     return child;
 };
-const ɵ0$5$1 = findChild;
-const createElement$2 = name => {
-    return new Element$1$1(name, [], [], noSpan$2, noSpan$2, noSpan$2);
+const ɵ0$6$1 = findChild;
+const createElement$3 = name => {
+    return new Element$1$1(name, [], [], noSpan$3, noSpan$3, noSpan$3);
 };
-const ɵ1$4$1 = createElement$2;
-const addAtrribute$2 = (node, name, value) => {
-    const attr = new Attribute(name, value, noSpan$2, noSpan$2, noSpan$2);
+const ɵ1$5$1 = createElement$3;
+const addAtrribute$3 = (node, name, value) => {
+    const attr = new Attribute(name, value, noSpan$3, noSpan$3, noSpan$3);
     node.attrs.push(attr);
 };
-const ɵ2$1$2 = addAtrribute$2;
+const ɵ2$1$2 = addAtrribute$3;
 const getElementNode = (name, node) => {
     let elementNode;
     if (!node) {
@@ -44034,9 +44167,9 @@ const getElementNode = (name, node) => {
     return elementNode;
 };
 const ɵ3$1$2 = getElementNode;
-const noSpan$2 = {};
-const idGen$7 = new IDGenerator('wm_page');
-register('wm-layout', () => {
+const noSpan$3 = {};
+const idGen$8 = new IDGenerator('wm_page');
+register('wm-page', () => {
     return {
         template: (node) => {
             let pageContentNode = findChild(findChild(node, 'wm-content'), 'wm-page-content');
@@ -44044,24 +44177,24 @@ register('wm-layout', () => {
                 pageContentNode = getElementNode('wm-page-content', getElementNode('wm-content', node));
             }
             if (pageContentNode) {
-                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(pageContentNode.children);
                 conditionalNode.children.push(new Text$3('{{onPageContentReady()}}', null));
                 pageContentNode.children = [conditionalNode];
                 if (isMobileApp()) {
-                    const loader = createElement$2('div');
-                    addAtrribute$2(loader, 'wmPageContentLoader', '');
-                    addAtrribute$2(loader, '*ngIf', '!showPageContent');
+                    const loader = createElement$3('div');
+                    addAtrribute$3(loader, 'wmPageContentLoader', '');
+                    addAtrribute$3(loader, '*ngIf', '!showPageContent');
                     pageContentNode.children.push(loader);
                 }
             }
         },
         pre: (attrs) => {
-            const counter = idGen$7.nextUid();
-            return `<${tagName$o} wmPage #${counter}="wmPage" data-role="pageContainer" [attr.aria-label]="${counter}.hint || 'Main page content'" ${getAttrMarkup(attrs)}>`;
+            const counter = idGen$8.nextUid();
+            return `<${tagName$p} wmPage #${counter}="wmPage" data-role="pageContainer" [attr.aria-label]="${counter}.hint || 'Main page content'" ${getAttrMarkup(attrs)}>`;
         },
-        post: () => `</${tagName$o}>`
+        post: () => `</${tagName$p}>`
     };
 });
 var page_build = () => { };
@@ -44069,17 +44202,35 @@ var page_build = () => { };
 var page_build$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     'default': page_build,
-    'ɵ0': ɵ0$5$1,
-    'ɵ1': ɵ1$4$1,
+    'ɵ0': ɵ0$6$1,
+    'ɵ1': ɵ1$5$1,
     'ɵ2': ɵ2$1$2,
     'ɵ3': ɵ3$1$2
 });
 
+const tagName$o = 'div';
+const idGen$7 = new IDGenerator('wm_layout');
+register('wm-layout', () => {
+    return {
+        pre: (attrs) => {
+            const counter = idGen$7.nextUid();
+            return `<${tagName$o} wmLayout #${counter}="wmLayout" data-role="pageContainer" [attr.aria-label]="${counter}.hint || 'Main page content'" ${getAttrMarkup(attrs)}>`;
+        },
+        post: () => `</${tagName$o}>`
+    };
+});
+var layout_build = () => { };
+
+var layout_build$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': layout_build
+});
+
 const tagName$n = 'router-outlet';
 register('wm-router-outlet', () => {
     return {
-        pre: attrs => `<${tagName$n} ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$n}>`
+        pre: attrs => `<div wmRouterOutlet ${getAttrMarkup(attrs)}><${tagName$n}>`,
+        post: () => `</${tagName$n}></div>`
     };
 });
 var routerOutlet_build = () => { };
@@ -44204,9 +44355,31 @@ var rightPanel_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$f = 'div';
+const createElement$2 = name => {
+    return new Element$1$1(name, [], [], noSpan$2, noSpan$2, noSpan$2);
+};
+const ɵ0$5$1 = createElement$2;
+const addAtrribute$2 = (node, name, value) => {
+    const attr = new Attribute(name, value, noSpan$2, noSpan$2, noSpan$2);
+    node.attrs.push(attr);
+};
+const ɵ1$4$1 = addAtrribute$2;
+const noSpan$2 = {};
 register('wm-page-content', () => {
     return {
-        pre: attrs => `<${tagName$f} wmPageContent wmSmoothscroll="${attrs.get('smoothscroll') || 'false'}" ${getAttrMarkup(attrs)}>`,
+        template: (node) => {
+            for (let attr of node.attrs) {
+                if (attr.name === 'spa' && attr.value) {
+                    const conditionalNode = createElement$2('ng-container');
+                    addAtrribute$2(conditionalNode, '*ngIf', 'compilePageContent');
+                    conditionalNode.children = conditionalNode.children.concat(node.children);
+                    conditionalNode.children.push(new Text$3('{{onPageContentReady()}}', null));
+                    node.children = [conditionalNode];
+                    break;
+                }
+            }
+        },
+        pre: attrs => `<${tagName$f} wmPageContent ${attrs.get('spa') && 'wmSpaPage' || ''} wmSmoothscroll="${attrs.get('smoothscroll') || 'false'}" ${getAttrMarkup(attrs)}>`,
         post: () => `</${tagName$f}>`
     };
 });
@@ -44214,7 +44387,9 @@ var pageContent_build = () => { };
 
 var pageContent_build$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    'default': pageContent_build
+    'default': pageContent_build,
+    'ɵ0': ɵ0$5$1,
+    'ɵ1': ɵ1$4$1
 });
 
 const tagName$e = 'div';
@@ -44311,10 +44486,10 @@ var prefab_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const noSpan = {};
-const createElement$3 = name => {
+const createElement$4 = name => {
     return new Element$1$1(name, [], [], noSpan, noSpan, noSpan);
 };
-const ɵ0$3$2 = createElement$3;
+const ɵ0$3$2 = createElement$4;
 const addAtrribute = (node, name, value) => {
     const attr = new Attribute(name, value, noSpan, noSpan, noSpan);
     node.attrs.push(attr);
@@ -44324,7 +44499,7 @@ const tagName$9 = 'div';
 register('wm-prefab-container', () => {
     return {
         template: (node) => {
-            const conditionalNode = createElement$3('ng-container');
+            const conditionalNode = createElement$4('ng-container');
             addAtrribute(conditionalNode, '*ngIf', 'compileContent');
             conditionalNode.children = conditionalNode.children.concat(node.children);
             node.children.length = 0;
@@ -44731,7 +44906,7 @@ const getRowActionTmpl = (attrs) => {
                 ${saveCancelTmpl}
             </ng-template>`;
 };
-const ɵ1$8 = getRowActionTmpl;
+const ɵ1$9 = getRowActionTmpl;
 register('wm-table-row-action', () => {
     return {
         pre: attrs => `<${tagName$4} wmTableRowAction ${getAttrMarkup(attrs)}>
@@ -44745,7 +44920,7 @@ var tableRowAction_build$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     'default': tableRowAction_build,
     'ɵ0': ɵ0$i,
-    'ɵ1': ɵ1$8
+    'ɵ1': ɵ1$9
 });
 
 const tagName$3 = 'div';
@@ -44934,6 +45109,7 @@ exports.iframeBuild = iframe_build$1;
 exports.iframeDlgBuild = iframeDialog_build$1;
 exports.initComponentsBuildTask = initComponentsBuildTask;
 exports.labelBuild = label_build$1;
+exports.layoutBuild = layout_build$1;
 exports.leftPanelBuild = leftPanel_build$1;
 exports.lgBuild = layoutGrid_build$1;
 exports.lgcolBuild = layoutGridColumn_build$1;
@@ -45013,8 +45189,8 @@ exports.transpile = transpile;
 exports.ɵ0 = ɵ0$h;
 exports.ɵ1 = ɵ1$5;
 exports.ɵ10 = ɵ10$1;
-exports.ɵ11 = ɵ11;
-exports.ɵ12 = ɵ12;
+exports.ɵ11 = ɵ11$1;
+exports.ɵ12 = ɵ12$1;
 exports.ɵ13 = ɵ13;
 exports.ɵ14 = ɵ14;
 exports.ɵ2 = ɵ2$4;