@wavemaker-ai/app-ng-runtime 1.0.0-rc.647469

package/build-task/bundles/index.umd.js

@@ -0,0 +1,3106 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@wm/transpiler'), require('@wm/core'), require('@angular/compiler'), require('lodash-es')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@wm/transpiler', '@wm/core', '@angular/compiler', 'lodash-es'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.buildTask = {}), global.wm.transpiler, global.wm.core, global.ng.compiler, global._));
+})(this, (function (exports, transpiler, core, compiler, lodashEs) { 'use strict';
+
+    const carouselTagName = 'carousel';
+    const dataSetKey$6 = 'dataset';
+    const idGen$v = 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$v.nextUid();
+                let style;
+                if (attrs?.get('height')?.endsWith('%')) {
+                    style = `height:${parseInt(attrs.get('height'), 10)}vh`;
+                    attrs.set('height', '100%');
+                }
+                shared.set('carousel_ref', counter);
+                return `<div class="app-carousel carousel" style="${style}"><${carouselTagName} wmCarousel #${counter}="wmCarousel"  ${transpiler.getAttrMarkup(attrs)} interval="0" [ngClass]="${counter}.navigationClass">`;
+            },
+            post: () => `</${carouselTagName}></div>`,
+            template: (node) => {
+                // check if the carousel is dynamic
+                if (isDynamicCarousel(node)) {
+                    const datasetAttr = node.attrs.find(attr => attr.name === dataSetKey$6);
+                    const widgetNameAttr = node.attrs.find(attr => attr.name === 'name');
+                    if (!datasetAttr) {
+                        return;
+                    }
+                    const boundExpr = transpiler.getBoundToExpr(datasetAttr.value);
+                    if (!boundExpr) {
+                        return;
+                    }
+                    core.updateTemplateAttrs(node, boundExpr, widgetNameAttr.value);
+                }
+            },
+            // To provide parent carousel reference for children
+            provide: (attrs, shared) => {
+                const provider = new Map();
+                provider.set('carousel_ref', shared.get('carousel_ref'));
+                return provider;
+            }
+        };
+    });
+    var carousel_build = () => { };
+
+    var carousel_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: carousel_build
+    });
+
+    const carouselContentTagName = 'slide';
+    let counter$1 = 1;
+    // For static carousel
+    transpiler.register('wm-carousel-content', () => {
+        return {
+            pre: attrs => `<${carouselContentTagName} wmCarouselTemplate  ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${carouselContentTagName}>`
+        };
+    });
+    // For dynamic carousel
+    transpiler.register('wm-carousel-template', () => {
+        return {
+            requires: ['wm-carousel'],
+            pre: (attrs, shared, parentCarousel) => {
+                const carouselRef = parentCarousel.get('carousel_ref');
+                return `@if(!${carouselRef}.fieldDefs){<div >{{${carouselRef}.nodatamessage}}</div>}
+                    @for (item of ${carouselRef}.fieldDefs; track item; let i = $index) {
+                        <${carouselContentTagName} wmCarouselTemplate #carouselTemplateRef="carouselTemplateRef" ${transpiler.getAttrMarkup(attrs)}>
+                        <ng-container [ngTemplateOutlet]="carouselTempRef${counter$1}"
+                        [ngTemplateOutletContext]="{item:item, index:i}"
+                        [ngTemplateOutletInjector]="${carouselRef}.createCustomInjector('carousel_item_' + carouselTemplateRef.trackId, {item:item, index:i})"></ng-container>
+                        </${carouselContentTagName}>
+                       }
+                    <ng-template #carouselTempRef${counter$1++} let-item="item" let-index="index">`;
+            },
+            post: () => `</ng-template>`
+        };
+    });
+    var carouselTemplate_build = () => { };
+
+    var carouselTemplate_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: carouselTemplate_build
+    });
+
+    const tagName$1F = 'div';
+    transpiler.register('wm-login', () => {
+        return {
+            pre: attrs => `<${tagName$1F} wmLogin ${transpiler.getAttrMarkup(attrs)} eventsource.bind="Actions.loginAction">`,
+            post: () => `</${tagName$1F}>`,
+            provide: () => {
+                const provider = new Map();
+                provider.set('isLogin', true);
+                return provider;
+            }
+        };
+    });
+    var login_build = () => { };
+
+    var login_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: login_build
+    });
+
+    const tagName$1E = 'marquee';
+    transpiler.register('wm-marquee', () => {
+        return {
+            pre: attrs => `<${tagName$1E} onmouseover="this.stop();" onmouseout="this.start();" wmMarquee role="marquee" aria-live="off" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1E}>`
+        };
+    });
+    var marquee_build = () => { };
+
+    var marquee_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: marquee_build
+    });
+
+    const tagName$1D = 'a';
+    const idGen$u = new core.IDGenerator('wm_anchor');
+    transpiler.register('wm-anchor', () => {
+        return {
+            pre: (attrs) => {
+                const counter = idGen$u.nextUid();
+                return `<${tagName$1D} wmAnchor #${counter}="wmAnchor" role="link" data-identifier="anchor" [attr.aria-label]="${counter}.arialabel || (${counter}.badgevalue ? ${counter}.caption + ' ' + ${counter}.badgevalue : ${counter}.caption) || null" ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$1D}>`
+        };
+    });
+    var anchor_build = () => { };
+
+    var anchor_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: anchor_build
+    });
+
+    const tagName$1C = 'div';
+    transpiler.register('wm-audio', () => {
+        return {
+            pre: attrs => `<${tagName$1C} wmAudio ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1C}>`
+        };
+    });
+    var audio_build = () => { };
+
+    var audio_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: audio_build
+    });
+
+    const tagName$1B = 'div';
+    const idGen$t = new core.IDGenerator('wm_html');
+    transpiler.register('wm-html', () => {
+        return {
+            pre: (attrs) => {
+                const counter = idGen$t.nextUid();
+                return `<${tagName$1B} wmHtml #${counter}="wmHtml" role="application" [attr.aria-label]="${counter}.arialabel || 'HTML content'" ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$1B}>`
+        };
+    });
+    var html_build = () => { };
+
+    var html_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: html_build
+    });
+
+    const tagName$1A = 'span';
+    transpiler.register('wm-icon', () => {
+        return {
+            pre: attrs => `<${tagName$1A} wmIcon ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1A}>`
+        };
+    });
+    var icon_build = () => { };
+
+    var icon_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: icon_build
+    });
+
+    const tagName$1z = 'div';
+    transpiler.register('wm-iframe', () => {
+        return {
+            pre: attrs => `<${tagName$1z} wmIframe ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1z}>`
+        };
+    });
+    var iframe_build = () => { };
+
+    var iframe_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: iframe_build
+    });
+
+    let tagName$1y = 'p';
+    const idGen$s = new core.IDGenerator('wm_label');
+    transpiler.register('wm-label', () => {
+        return {
+            pre: (attrs) => {
+                if (!attrs.get("notag")) {
+                    if (!attrs.get('type')) {
+                        const classList = attrs.get('class') ? attrs.get('class').split(' ').filter(element => ["h1", "h2", "h3", "h4", "h5", "h6", "p"].includes(element)) : [];
+                        attrs.set('type', classList.length ? classList[0] : "p");
+                    }
+                    tagName$1y = attrs.get('type');
+                }
+                else {
+                    tagName$1y = 'label';
+                }
+                const counter = idGen$s.nextUid();
+                return `<${tagName$1y} wmLabel #${counter}="wmLabel" ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$1y}>`
+        };
+    });
+    var label_build = () => { };
+
+    var label_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: label_build
+    });
+
+    const tagName$1x = 'img';
+    const idGen$r = new core.IDGenerator('wm_picture');
+    transpiler.register('wm-picture', () => {
+        return {
+            pre: (attrs) => {
+                const counter = idGen$r.nextUid();
+                return `<${tagName$1x} wmPicture #${counter}="wmPicture" [alt]="${counter}.alttext" wmImageCache="${attrs.get('offline') || 'true'}" [attr.aria-label]="${counter}.arialabel || 'Image'" ${transpiler.getAttrMarkup(attrs)}>`;
+            }
+        };
+    });
+    var picture_build = () => { };
+
+    var picture_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: picture_build
+    });
+
+    const tagName$1w = 'div';
+    const idGen$q = new core.IDGenerator('wm_spinner');
+    transpiler.register('wm-spinner', () => {
+        return {
+            pre: (attrs) => {
+                const counter = idGen$q.nextUid();
+                return `<${tagName$1w} wmSpinner #${counter}="wmSpinner" role="alert" [attr.aria-label]="${counter}.arialabel || 'Loading...'" aria-live="assertive" aria-busy="true" ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$1w}>`
+        };
+    });
+    var spinner_build = () => { };
+
+    var spinner_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: spinner_build
+    });
+
+    const tagName$1v = 'div';
+    const getAttr = (node, attrName) => node.attrs.find(attr => attr.name === attrName);
+    const getAttrValue = (node, attrName) => {
+        const match = getAttr(node, attrName);
+        if (match) {
+            return match.value;
+        }
+    };
+    const getReplaceRegex = (v) => new RegExp(`bind:(${v}|${v}\\[\\$i])\\.`, 'g');
+    transpiler.register('wm-progress-bar', () => {
+        return {
+            template: (node) => {
+                const dataset = getAttrValue(node, 'dataset');
+                const boundExpr = transpiler.getBoundToExpr(dataset);
+                if (boundExpr) {
+                    let type = getAttrValue(node, 'type');
+                    let datavalue = getAttrValue(node, 'datavalue');
+                    const replaceRegex = getReplaceRegex(boundExpr);
+                    if (type && type.includes(boundExpr)) {
+                        type = type.replace(replaceRegex, '');
+                        getAttr(node, 'type').value = type;
+                    }
+                    if (datavalue && datavalue.includes(boundExpr)) {
+                        datavalue = datavalue.replace(replaceRegex, '');
+                        getAttr(node, 'datavalue').value = datavalue;
+                    }
+                }
+            },
+            pre: attrs => `<${tagName$1v} wmProgressBar ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1v}>`
+        };
+    });
+    var progressBar_build = () => { };
+
+    var progressBar_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: progressBar_build
+    });
+
+    const tagName$1u = 'div';
+    const idGen$p = new core.IDGenerator('wm_progress_circle');
+    transpiler.register('wm-progress-circle', () => {
+        return {
+            pre: (attrs) => {
+                const counter = idGen$p.nextUid();
+                return `<${tagName$1u} wmProgressCircle #${counter}="wmProgressCircle" role="progressbar" [attr.aria-label]="${counter}.arialabel || 'circle-progress'" [attr.hint]="${counter}.hint" [attr.aria-valuetext]="${counter}.displayValue" [attr.aria-valuemin]="${counter}.minvalue" [attr.aria-valuemax]="${counter}.maxvalue" ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$1u}>`
+        };
+    });
+    var progressCircle_build = () => { };
+
+    var progressCircle_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: progressCircle_build
+    });
+
+    const tagName$1t = 'div';
+    const idGen$o = new core.IDGenerator('wm_richtexteditor');
+    transpiler.register('wm-richtexteditor', () => {
+        return {
+            pre: (attrs) => {
+                const counter = idGen$o.nextUid();
+                return `<${tagName$1t} wmRichTextEditor #${counter}="wmRichTextEditor" role="textbox" [attr.aria-label]="${counter}.arialabel || 'Richtext editor'" ${transpiler.getFormMarkupAttr(attrs)}>`;
+            },
+            post: () => `</${tagName$1t}>`
+        };
+    });
+    var richTextEditor_build = () => { };
+
+    var richTextEditor_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: richTextEditor_build
+    });
+
+    const tagName$1s = 'div';
+    transpiler.register('wm-search', () => {
+        return {
+            pre: attrs => `<${tagName$1s} wmSearch ${transpiler.getFormMarkupAttr(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$1s}>`
+        };
+    });
+    var search_build = () => { };
+
+    var search_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: search_build
+    });
+
+    const tagName$1r = 'ul';
+    transpiler.register('wm-tree', () => {
+        return {
+            pre: attrs => `<${tagName$1r} wmTree class="ztree" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1r}>`
+        };
+    });
+
+    var tree_build = /*#__PURE__*/Object.freeze({
+        __proto__: null
+    });
+
+    const tagName$1q = 'div';
+    transpiler.register('wm-card', () => {
+        return {
+            pre: attrs => `<${tagName$1q} wmCard ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1q}>`
+        };
+    });
+    var card_build = () => { };
+
+    var card_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: card_build
+    });
+
+    const tagName$1p = 'div';
+    transpiler.register('wm-card-content', () => {
+        return {
+            pre: attrs => `<${tagName$1p} wmCardContent partialContainer ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1p}>`
+        };
+    });
+    var cardContent_build = () => { };
+
+    var cardContent_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: cardContent_build
+    });
+
+    const tagName$1o = 'div';
+    transpiler.register('wm-card-actions', () => {
+        return {
+            pre: attrs => `<${tagName$1o} wmCardActions ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1o}>`
+        };
+    });
+    var cardActions_build = () => { };
+
+    var cardActions_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: cardActions_build
+    });
+
+    const tagName$1n = 'div';
+    transpiler.register('wm-card-footer', () => {
+        return {
+            pre: attrs => `<${tagName$1n} wmCardFooter ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1n}>`
+        };
+    });
+    var cardFooter_build = () => { };
+
+    var cardFooter_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: cardFooter_build
+    });
+
+    const tagName$1m = 'div';
+    transpiler.register('wm-chart', () => {
+        return {
+            pre: attrs => `<${tagName$1m} wmChart redrawable aria-label="${attrs.get('type')} Chart" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1m}>`
+        };
+    });
+    var chart_build = () => { };
+
+    var chart_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: chart_build
+    });
+
+    const tagName$1l = 'div';
+    const dataSetKey$5 = 'dataset';
+    const idGen$n = 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$n.nextUid();
+                shared.set('accordion_ref', counter);
+                return `<${tagName$1l} wmAccordion #${counter}="wmAccordion" ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$1l}>`,
+            template: (node, shared) => {
+                // check if the accordion is dynamic
+                if (isDynamicAccordion(node)) {
+                    const datasetAttr = node.attrs.find(attr => attr.name === dataSetKey$5);
+                    const widgetNameAttr = node.attrs.find(attr => attr.name === 'name');
+                    if (!datasetAttr) {
+                        return;
+                    }
+                    const boundExpr = transpiler.getBoundToExpr(datasetAttr.value);
+                    if (!boundExpr) {
+                        return;
+                    }
+                    core.updateTemplateAttrs(node, boundExpr, widgetNameAttr.value);
+                }
+            },
+            // To provide parent accordion reference for children
+            provide: (attrs, shared) => {
+                const provider = new Map();
+                provider.set('accordion_ref', shared.get('accordion_ref'));
+                return provider;
+            }
+        };
+    });
+    var accordion_build = () => { };
+
+    var accordion_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: accordion_build
+    });
+
+    const tagName$1k = 'div';
+    const idGen$m = new core.IDGenerator('wm_accordionpane');
+    transpiler.register('wm-accordionpane', () => {
+        return {
+            pre: (attrs) => {
+                const counter = idGen$m.nextUid();
+                return `<${tagName$1k} #${counter}="wmAccordionPane" wmAccordionPane partialContainer wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$1k}>`
+        };
+    });
+    var accordionPane_build = () => { };
+
+    var accordionPane_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: accordionPane_build
+    });
+
+    const tagName$1j = 'div';
+    transpiler.register('wm-container', () => {
+        return {
+            pre: attrs => `<${tagName$1j} wmContainer partialContainer wmSmoothscroll="${attrs.get('smoothscroll') || 'false'}" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1j}>`
+        };
+    });
+    var container_build = () => { };
+
+    var container_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: container_build
+    });
+
+    const tagName$1i = 'div';
+    transpiler.register('wm-gridcolumn', () => {
+        return {
+            pre: attrs => `<${tagName$1i} wmLayoutGridColumn ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1i}>`
+        };
+    });
+    var layoutGridColumn_build = () => { };
+
+    var layoutGridColumn_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: layoutGridColumn_build
+    });
+
+    const tagName$1h = 'div';
+    transpiler.register('wm-gridrow', () => {
+        return {
+            pre: attrs => `<${tagName$1h} wmLayoutGridRow ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1h}>`
+        };
+    });
+    var layoutGridRow_build = () => { };
+
+    var layoutGridRow_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: layoutGridRow_build
+    });
+
+    const tagName$1g = 'div';
+    transpiler.register('wm-layoutgrid', () => {
+        return {
+            pre: attrs => `<${tagName$1g} wmLayoutGrid ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1g}>`
+        };
+    });
+    var layoutGrid_build = () => { };
+
+    var layoutGrid_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: layoutGrid_build
+    });
+
+    const tagName$1f = 'div';
+    const idGen$l = new core.IDGenerator('wm_panel');
+    transpiler.register('wm-panel', () => {
+        return {
+            pre: (attrs) => {
+                const counter = idGen$l.nextUid();
+                return `<${tagName$1f} wmPanel #${counter}="wmPanel" partialContainer wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$1f}>`
+        };
+    });
+    transpiler.register('wm-panel-footer', () => {
+        return {
+            pre: attrs => `<${tagName$1f} wmPanelFooter ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1f}>`
+        };
+    });
+    var panel_build = () => { };
+
+    var panel_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: panel_build
+    });
+
+    const tagName$1e = 'div';
+    transpiler.register('wm-segmented-control', () => {
+        return {
+            pre: attrs => `<${tagName$1e} wmSegmentedControl ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1e}>`
+        };
+    });
+    var segmentedControl_build = () => { };
+
+    var segmentedControl_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: segmentedControl_build
+    });
+
+    const tagName$1d = 'li';
+    transpiler.register('wm-segment-content', () => {
+        return {
+            pre: attrs => `<${tagName$1d} wmSegmentContent partialContainer wmSmoothscroll=${attrs.get('smoothscroll') || 'false'} wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1d}>`
+        };
+    });
+    var segmentContent_build = () => { };
+
+    var segmentContent_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: segmentContent_build
+    });
+
+    const dynamicTemplateTagName = 'div';
+    let counter = 1;
+    // For dynamic accordion panes/tab panes
+    transpiler.register('wm-repeat-template', () => {
+        return {
+            requires: ['wm-accordion', 'wm-tabs', 'wm-wizard'],
+            pre: (attrs, shared, parentAccordion, parentTab, parentWizard) => {
+                const widgetRef = (parentAccordion && parentAccordion.get('accordion_ref')) || (parentTab && parentTab.get('tabs_ref')) || (parentWizard && parentWizard.get('wizard_ref'));
+                if (widgetRef) {
+                    return `@if(${widgetRef}.fieldDefs && !${widgetRef}.fieldDefs.length){<div>{{${widgetRef}.nodatamessage}}</div>}
+                @for (item of ${widgetRef}.fieldDefs; track item; let i = $index) {
+                    <${dynamicTemplateTagName} wmRepeatTemplate #repeatItemRef="repeatItemRef" ${transpiler.getAttrMarkup(attrs)}>
+                        <ng-container [ngTemplateOutlet]="widgetRef${counter}"
+                            [ngTemplateOutletContext]="{item:item, index:i}"
+                            [ngTemplateOutletInjector]="${widgetRef}.createCustomInjector('dynamic_pane_' + repeatItemRef.trackId, {item:item, index:i})"></ng-container>
+                    </${dynamicTemplateTagName}>
+                }
+                    <ng-template #widgetRef${counter++} let-item="item" let-index="index">`;
+                }
+            },
+            post: () => `</ng-template>`
+        };
+    });
+    var repeatTemplate_build = () => { };
+
+    var repeatTemplate_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: repeatTemplate_build
+    });
+
+    const tagName$1c = 'div';
+    const dataSetKey$4 = 'dataset';
+    const idGen$k = 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$k.nextUid();
+                shared.set('tabs_ref', counter);
+                return `<${tagName$1c} wmTabs #${counter}="wmTabs" ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$1c}>`,
+            template: (node, shared) => {
+                // check if the tab widget is dynamic
+                if (isDynamicTabs(node)) {
+                    const datasetAttr = node.attrs.find(attr => attr.name === dataSetKey$4);
+                    const widgetNameAttr = node.attrs.find(attr => attr.name === 'name');
+                    if (!datasetAttr) {
+                        return;
+                    }
+                    const boundExpr = transpiler.getBoundToExpr(datasetAttr.value);
+                    if (!boundExpr) {
+                        return;
+                    }
+                    core.updateTemplateAttrs(node, boundExpr, widgetNameAttr.value);
+                }
+            },
+            // To provide parent tab reference for children
+            provide: (attrs, shared) => {
+                const provider = new Map();
+                provider.set('tabs_ref', shared.get('tabs_ref'));
+                return provider;
+            }
+        };
+    });
+    var tabs_build = () => { };
+
+    var tabs_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: tabs_build
+    });
+
+    const tagName$1b = 'div';
+    transpiler.register('wm-tabpane', () => {
+        return {
+            pre: attrs => `<${tagName$1b} wmTabPane  partialContainer ${transpiler.getAttrMarkup(attrs)} wm-navigable-element="true" role="tabpanel">`,
+            post: () => `</${tagName$1b}>`
+        };
+    });
+    var tabPane_build = () => { };
+
+    var tabPane_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: tabPane_build
+    });
+
+    const tagName$1a = 'div';
+    transpiler.register('wm-tile', () => {
+        return {
+            pre: attrs => `<${tagName$1a} wmTile wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$1a}>`
+        };
+    });
+    var tile_build = () => { };
+
+    var tile_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: tile_build
+    });
+
+    const tagName$19 = 'div';
+    const dataSetKey$3 = 'dataset';
+    const idGen$j = new core.IDGenerator('wm_wizard_ref_');
+    const isDynamicWizard = node => node.attrs.find(attr => attr.name === 'type' && attr.value === 'dynamic');
+    transpiler.register('wm-wizard', () => {
+        return {
+            pre: (attrs, shared) => {
+                const counter = idGen$j.nextUid();
+                shared.set('wizard_ref', counter);
+                return `<${tagName$19} wmWizard #${counter}="wmWizard" ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$19}>`,
+            template: (node, shared) => {
+                // check if the tab widget is dynamic
+                if (isDynamicWizard(node)) {
+                    const datasetAttr = node.attrs.find(attr => attr.name === dataSetKey$3);
+                    const widgetNameAttr = node.attrs.find(attr => attr.name === 'name');
+                    if (!datasetAttr) {
+                        return;
+                    }
+                    const boundExpr = transpiler.getBoundToExpr(datasetAttr.value);
+                    if (!boundExpr) {
+                        return;
+                    }
+                    core.updateTemplateAttrs(node, boundExpr, widgetNameAttr.value);
+                }
+            },
+            // To provide parent tab reference for children
+            provide: (attrs, shared) => {
+                const provider = new Map();
+                provider.set('wizard_ref', shared.get('wizard_ref'));
+                return provider;
+            }
+        };
+    });
+    var wizard_build = () => { };
+
+    var wizard_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: wizard_build
+    });
+
+    const tagName$18 = 'form';
+    const idGen$i = new core.IDGenerator('wizard_step_id_');
+    transpiler.register('wm-wizardstep', () => {
+        return {
+            pre: attrs => {
+                const counter = idGen$i.nextUid();
+                return `<${tagName$18} wmWizardStep partialContainer #${counter}="wmWizardStep" ${transpiler.getAttrMarkup(attrs)}>
+                       <ng-template [ngIf]="${counter}.isInitialized">`;
+            },
+            post: () => `</ng-template></${tagName$18}>`
+        };
+    });
+    var wizardStep_build = () => { };
+
+    var wizardStep_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: wizardStep_build
+    });
+
+    const tagName$17 = 'div';
+    transpiler.register('wm-wizardaction', () => {
+        return {
+            pre: attrs => `<ng-template #wizardAction><${tagName$17} wmWizardAction ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$17}></ng-template>`
+        };
+    });
+    var wizardAction_build = () => { };
+
+    var wizardAction_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: wizardAction_build
+    });
+
+    const tagName$16 = 'button';
+    const idGen$h = new core.IDGenerator('wm_barcodescanner');
+    transpiler.register('wm-barcodescanner', () => {
+        return {
+            pre: (attrs) => {
+                const counter = idGen$h.nextUid();
+                return `<${tagName$16} wmBarcodescanner #${counter}="wmBarcodescanner" [attr.aria-label]="${counter}.arialabel || 'Barcode scanner'"  ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$16}>`
+        };
+    });
+    var barcodeScanner_build = () => { };
+
+    var barcodeScanner_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: barcodeScanner_build
+    });
+
+    const tagName$15 = 'button';
+    const idGen$g = new core.IDGenerator('wm_camera');
+    transpiler.register('wm-camera', () => {
+        return {
+            pre: (attrs) => {
+                const counter = idGen$g.nextUid();
+                return `<${tagName$15} type='button' wmCamera #${counter}="wmCamera" [attr.aria-label]="${counter}.arialabel || 'Camera'"  ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$15}>`
+        };
+    });
+    var camera_build = () => { };
+
+    var camera_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: camera_build
+    });
+
+    const tagName$14 = 'div';
+    transpiler.register('wm-alertdialog', () => {
+        return {
+            pre: attrs => `<${tagName$14} wmAlertDialog wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$14}>`
+        };
+    });
+    var alertDialog_build = () => { };
+
+    var alertDialog_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: alertDialog_build
+    });
+
+    const tagName$13 = 'div';
+    transpiler.register('wm-confirmdialog', () => {
+        return {
+            pre: attrs => `<${tagName$13} wmConfirmDialog wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$13}>`
+        };
+    });
+    var confirmDialog_build = () => { };
+
+    var confirmDialog_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: confirmDialog_build
+    });
+
+    const tagName$12 = 'div';
+    transpiler.register('wm-dialogactions', () => {
+        return {
+            pre: attrs => `<ng-template #dialogFooter><${tagName$12} wmDialogFooter data-identfier="actions" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$12}></ng-template>`
+        };
+    });
+    var dialogFooter_build = () => { };
+
+    var dialogFooter_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: dialogFooter_build
+    });
+
+    const tagName$11 = 'div';
+    transpiler.register('wm-dialog', () => {
+        return {
+            pre: attrs => `<${tagName$11} wmDialog ${transpiler.getAttrMarkup(attrs)} aria-modal="true" role="dialog" wm-navigable-element="true"><ng-template #dialogBody>`,
+            post: () => `</ng-template></${tagName$11}>`
+        };
+    });
+    // Todo:vinay remove wm-view in migration
+    transpiler.register('wm-view', () => {
+        return {
+            pre: attrs => '',
+            post: () => ''
+        };
+    });
+    var dialog_build = () => { };
+
+    var dialog_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: dialog_build
+    });
+
+    const tagName$10 = 'div';
+    transpiler.register('wm-iframedialog', () => {
+        return {
+            pre: attrs => `<${tagName$10} wmIframeDialog wm-navigable-element="true" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$10}>`
+        };
+    });
+    var iframeDialog_build = () => { };
+
+    var iframeDialog_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: iframeDialog_build
+    });
+
+    const tagName$$ = 'div';
+    transpiler.register('wm-logindialog', () => {
+        return {
+            pre: attrs => `<${tagName$$} wmDialog wmLoginDialog ${transpiler.getAttrMarkup(attrs)} eventsource.bind="Actions.loginAction" wm-navigable-element="true"><ng-template #dialogBody>`,
+            post: () => `</ng-template></${tagName$$}>`
+        };
+    });
+    var loginDialog_build = () => { };
+
+    var loginDialog_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: loginDialog_build
+    });
+
+    const tagName$_ = 'div';
+    transpiler.register('wm-pagedialog', () => {
+        return {
+            pre: (attrs, shared) => {
+                const content = attrs.get('content');
+                attrs.delete('content');
+                const boundContent = attrs.get('content.bind');
+                attrs.delete('content.bind');
+                const onLoad = attrs.get('load.event');
+                attrs.delete('load.event');
+                let onLoadEvtMarkup = '';
+                let contentMarkup = '';
+                if (onLoad) {
+                    onLoadEvtMarkup = `load.event="${onLoad}"`;
+                }
+                if (boundContent) {
+                    contentMarkup = `content.bind="${boundContent}"`;
+                }
+                else if (content) {
+                    contentMarkup = `content="${content}"`;
+                }
+                let containerMarkup = '';
+                if (contentMarkup) {
+                    shared.set('hasPartialContent', true);
+                    containerMarkup += `<ng-template><div wmContainer #partial partialContainer ${contentMarkup} width="100%" height="100%" ${onLoadEvtMarkup}>`;
+                }
+                return `<${tagName$_} wmPartialDialog ${transpiler.getAttrMarkup(attrs)}>${containerMarkup}`;
+            },
+            post: (attrs, shared) => {
+                let preContent = '';
+                if (shared.get('hasPartialContent')) {
+                    preContent = `</div></ng-template>`;
+                }
+                return `${preContent}</${tagName$_}>`;
+            }
+        };
+    });
+    var partialDialog_build = () => { };
+
+    var partialDialog_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: partialDialog_build
+    });
+
+    const ALLFIELDS = 'All Fields';
+    const EDIT_MODE = {
+        QUICK_EDIT: 'quickedit',
+        FORM: 'form',
+        DIALOG: 'dialog'
+    };
+    const fieldTypeWidgetTypeMap = {
+        'integer': ['number', 'text', 'select', 'checkboxset', 'radioset', 'rating', 'slider', 'currency', 'autocomplete', 'chips'],
+        'big_integer': ['number', 'text', 'select', 'checkboxset', 'radioset', 'rating', 'slider', 'currency', 'autocomplete', 'chips'],
+        'short': ['number', 'text', 'select', 'checkboxset', 'radioset', 'slider', 'currency', 'autocomplete', 'chips'],
+        'float': ['number', 'text', 'select', 'checkboxset', 'radioset', 'slider', 'currency', 'autocomplete', 'chips'],
+        'big_decimal': ['number', 'text', 'select', 'checkboxset', 'radioset', 'slider', 'currency', 'autocomplete', 'chips'],
+        'number': ['number', 'text', 'select', 'checkboxset', 'radioset', 'slider', 'currency', 'autocomplete', 'chips'],
+        'double': ['number', 'text', 'select', 'checkboxset', 'radioset', 'slider', 'currency', 'autocomplete', 'chips'],
+        'long': ['number', 'text', 'select', 'checkboxset', 'radioset', 'rating', 'slider', 'currency', 'autocomplete', 'chips'],
+        'byte': ['number', 'text', 'select', 'checkboxset', 'radioset', 'slider', 'currency', 'autocomplete', 'chips'],
+        'string': ['text', 'number', 'textarea', 'password', 'richtext', 'select', 'checkboxset', 'radioset', 'date', 'time', 'timestamp', 'switch', 'currency', 'autocomplete', 'chips', 'colorpicker'],
+        'character': ['text', 'number', 'textarea', 'password', 'richtext', 'select', 'checkboxset', 'radioset', 'switch', 'currency', 'autocomplete', 'chips'],
+        'text': ['text', 'number', 'textarea', 'password', 'richtext', 'select', 'checkboxset', 'radioset', 'date', 'time', 'timestamp', 'switch', 'currency', 'autocomplete', 'chips', 'colorpicker'],
+        'date': ['date', 'text', 'number', 'select', 'checkboxset', 'radioset', 'autocomplete', 'chips'],
+        'time': ['time', 'text', 'number', 'select', 'checkboxset', 'radioset', 'autocomplete', 'chips'],
+        'timestamp': ['timestamp', 'text', 'number', 'select', 'checkboxset', 'radioset', 'autocomplete', 'chips'],
+        'datetime': ['datetime', 'text', 'select', 'checkboxset', 'radioset', 'autocomplete', 'chips'],
+        'boolean': ['checkbox', 'radioset', 'toggle', 'select'],
+        'list': ['select', 'radioset', 'checkboxset', 'switch', 'autocomplete', 'chips'],
+        'clob': ['text', 'textarea', 'richtext'],
+        'blob': ['upload'],
+        'file': ['upload'],
+        'custom': ['text', 'number', 'textarea', 'password', 'checkbox', 'toggle', 'slider', 'richtext', 'currency', 'switch',
+            'select', 'checkboxset', 'radioset', 'date', 'time', 'timestamp', 'rating', 'datetime', 'autocomplete', 'chips', 'colorpicker']
+    };
+    const DATASET_WIDGETS = new Set([core.FormWidgetType.SELECT, core.FormWidgetType.CHECKBOXSET, core.FormWidgetType.RADIOSET,
+        core.FormWidgetType.SWITCH, core.FormWidgetType.AUTOCOMPLETE, core.FormWidgetType.CHIPS, core.FormWidgetType.TYPEAHEAD, core.FormWidgetType.RATING]);
+    const isDataSetWidget = widget => {
+        return DATASET_WIDGETS.has(widget);
+    };
+    // Get filter widget applicable to the given type
+    const getDataTableFilterWidget = type => {
+        let widget = fieldTypeWidgetTypeMap[type] && fieldTypeWidgetTypeMap[type][0];
+        if (type === core.DataType.BOOLEAN) {
+            widget = core.FormWidgetType.SELECT;
+        }
+        const filterWidgets = [core.FormWidgetType.TEXT, core.FormWidgetType.NUMBER, core.FormWidgetType.SELECT, core.FormWidgetType.AUTOCOMPLETE,
+            core.FormWidgetType.DATE, core.FormWidgetType.TIME, core.FormWidgetType.DATETIME];
+        if (filterWidgets.includes(widget)) {
+            return widget;
+        }
+        return core.FormWidgetType.TEXT;
+    };
+    /**
+     * @ngdoc function
+     * @name wm.widgets.live.getEditModeWidget
+     * @methodOf wm.widgets.live.LiveWidgetUtils
+     * @function
+     *
+     * @description
+     * This function returns the default widget for grid
+     *
+     * @param {object} colDef field definition
+     */
+    const getEditModeWidget = colDef => {
+        if (colDef['related-entity-name'] && colDef['primary-key']) {
+            return core.FormWidgetType.SELECT;
+        }
+        return (fieldTypeWidgetTypeMap[colDef.type] && fieldTypeWidgetTypeMap[colDef.type][0]) || core.FormWidgetType.TEXT;
+    };
+
+    const tagName$Z = 'div';
+    const idGen$f = new core.IDGenerator('formfield_');
+    const getEventsTemplate = (attrs) => {
+        const eventAttrs = new Map();
+        if (!attrs.has('focus.event')) {
+            attrs.set('focus.event', '');
+        }
+        if (!attrs.has('blur.event')) {
+            attrs.set('blur.event', '');
+        }
+        attrs.forEach((value, key) => {
+            if (key.endsWith('.event')) {
+                if (key === 'focus.event') {
+                    value = `_onFocusField($event);${value}`;
+                }
+                else if (key === 'blur.event') {
+                    value = `_onBlurField($event);${value}`;
+                }
+                eventAttrs.set(key, value);
+                attrs.delete(key);
+            }
+        });
+        return transpiler.getFormMarkupAttr(eventAttrs);
+    };
+    const DEFAULT_PLACEHOLDERS = new Map([
+        [core.FormWidgetType.SELECT, ['Select Min value', 'Select Max value', 'Select value']],
+        [core.FormWidgetType.DATETIME, ['Select Min date time', 'Select Max date time', 'Select date time']],
+        [core.FormWidgetType.TIME, ['Select Min time', 'Select Max time', 'Select time']],
+        [core.FormWidgetType.DATE, ['Select Min date', 'Select Max date', 'Select date']],
+        [core.FormWidgetType.TEXTAREA, ['', '', 'Enter value']],
+        [core.FormWidgetType.RICHTEXT, ['', '', 'Enter value']],
+        [core.FormWidgetType.COLORPICKER, ['Select Color', 'Select Color', 'Select Color']],
+        [core.FormWidgetType.CHIPS, ['', '', 'Type here...']],
+        [core.FormWidgetType.PASSWORD, ['Enter Min value', 'Enter Max value', 'Enter value']],
+        [core.FormWidgetType.NUMBER, ['Enter Min value', 'Enter Max value', 'Enter value']],
+        [core.FormWidgetType.TEXT, ['Enter Min value', 'Enter Max value', 'Enter value']],
+        [core.FormWidgetType.CURRENCY, ['Enter Min value', 'Enter Max value', 'Enter value']],
+        [core.FormWidgetType.AUTOCOMPLETE, ['', '', 'Search']],
+    ]);
+    const setDefaultPlaceholder = (attrs, widgetType, index) => {
+        const prop = index === 1 ? 'maxplaceholder' : 'placeholder';
+        let placeholder = attrs.get(prop);
+        if (placeholder || placeholder === '') {
+            return;
+        }
+        placeholder = DEFAULT_PLACEHOLDERS.get(widgetType) && DEFAULT_PLACEHOLDERS.get(widgetType)[index];
+        if (placeholder) {
+            attrs.set(prop, placeholder);
+        }
+    };
+    const getWidgetTemplate = (attrs, options) => {
+        let customAttrs = ``;
+        if (options.widgetType === "custom-widget") {
+            for (let [key, value] of attrs) {
+                if (key.startsWith('prop-'))
+                    customAttrs += key + '="' + value + '" ';
+            }
+        }
+        const name = attrs.get('name');
+        const customWidgetName = attrs.get('widgetname');
+        const fieldName = (attrs.get('key') || name || '').trim();
+        const formControl = options.isMaxWidget ? `formControlName="${fieldName}_max"` : (options.isInList ? `[formControlName]="${options.counter}._fieldName"` : `formControlName="${fieldName}"`);
+        const tmplRef = options.isMaxWidget ? `#formWidgetMax` : `#formWidget`;
+        const widgetName = name ? (options.isMaxWidget ? `name="${name}_formWidgetMax"` : `name="${name}_formWidget"`) : '';
+        const conditionalClass = `[ngClass]="${attrs.get('ngclass')}"`;
+        const defaultTmpl = `[class.hidden]="!${options.pCounter}.isUpdateMode && ${options.counter}.viewmodewidget !== 'default'" ${formControl} ${options.eventsTmpl} ${conditionalClass} ${tmplRef} ${widgetName} ${customWidgetName ? `widgetname=${customWidgetName} ${customAttrs}` : ''}`;
+        return core.getFormWidgetTemplate(options.widgetType, defaultTmpl, attrs, { counter: options.counter, pCounter: options.pCounter });
+    };
+    const getTemplate = (attrs, widgetType, eventsTmpl, counter, pCounter, isInList) => {
+        const isRange = attrs.get('is-range') === 'true';
+        if (!isRange) {
+            return getWidgetTemplate(attrs, { widgetType, eventsTmpl, counter, pCounter, isInList });
+        }
+        const layoutClass = 'col-sm-6';
+        return `<div class="${layoutClass}">${getWidgetTemplate(attrs, { widgetType, eventsTmpl, counter, pCounter })}</div>
+                <div class="${layoutClass}">${getWidgetTemplate(attrs, { widgetType, eventsTmpl, counter, pCounter, isMaxWidget: true })}</div>`;
+    };
+    const getCaptionByWidget = (attrs, widgetType, counter) => {
+        if (attrs.get('is-related') === 'true') {
+            return `${counter}.getDisplayExpr()`;
+        }
+        if (widgetType === core.FormWidgetType.PASSWORD) {
+            return '\'********\'';
+        }
+        let caption = `${counter}.value`;
+        if (widgetType === core.FormWidgetType.DATETIME || widgetType === core.FormWidgetType.TIMESTAMP) {
+            caption += ` | toDate:${counter}.formWidget.datepattern || 'yyyy-MM-dd hh:mm:ss a'`;
+            return caption;
+        }
+        if (widgetType === core.FormWidgetType.TIME) {
+            caption += ` | toDate:${counter}.formWidget.timepattern || 'hh:mm a'`;
+            return caption;
+        }
+        if (widgetType === core.FormWidgetType.DATE) {
+            caption += ` | toDate:${counter}.formWidget.datepattern ||  'yyyy-MMM-dd'`;
+            return caption;
+        }
+        if (widgetType === core.FormWidgetType.RATING || widgetType === core.FormWidgetType.UPLOAD) {
+            return '';
+        }
+        if (isDataSetWidget(widgetType) && attrs.get('datafield') === ALLFIELDS) {
+            return `${counter}.getDisplayExpr()`;
+        }
+        return `${counter}.getCaption()`;
+    };
+    const registerFormField = (isFormField) => {
+        return {
+            requires: ['wm-form', 'wm-liveform', 'wm-livefilter', 'wm-list'],
+            pre: (attrs, shared, parentForm, parentLiveForm, parentFilter, parentList) => {
+                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;
+                const dataRole = isFormField ? 'form-field' : 'filter-field';
+                const formFieldErrorMsgId = 'wmform-field-error-' + core.generateGUId();
+                const validationMsg = `@if (${counter}._control?.invalid && ${counter}._control?.touched && ${pCounter}.isUpdateMode) {
+                                                  <p class="help-block text-danger" aria-hidden="false" role="alert" aria-live="assertive" [attr.aria-label]="${counter}.validationmessage" id="${formFieldErrorMsgId}">
+                                                    <span aria-hidden="true" [textContent]="${counter}.validationmessage"></span>
+                                                  </p>}`;
+                const eventsTmpl = widgetType === core.FormWidgetType.UPLOAD ? '' : getEventsTemplate(attrs);
+                const controlLayout = 'col-sm-12';
+                const isInList = pCounter === (parentList && parentList.get('parent_form_reference'));
+                attrs.set('__validationId', formFieldErrorMsgId);
+                attrs.set('__widgetType', widgetType);
+                attrs.delete('widget');
+                shared.set('counter', counter);
+                if (attrs.get('is-range') === 'true') {
+                    setDefaultPlaceholder(attrs, widgetType, 0);
+                    setDefaultPlaceholder(attrs, widgetType, 1);
+                }
+                else {
+                    setDefaultPlaceholder(attrs, widgetType, 2);
+                }
+                return `<${tagName$Z} data-role="${dataRole}" [formGroup]="${pCounter}.ngform" wmFormField wmCaptionPosition #${counter}="wmFormField" widgettype="${widgetType}" ${transpiler.getFormMarkupAttr(attrs)}>
+                        <div class="live-field form-group app-composite-widget clearfix caption-{{${pCounter}.captionposition}}" widget="${widgetType}">
+                            <label [hidden]="!${counter}.displayname" class="app-label control-label formfield-label {{${pCounter}._captionClass}}"
+                                        [ngStyle]="{width: ${pCounter}.captionsize}" [ngClass]="{'text-danger': ${counter}._control?.invalid && ${counter}._control?.touched && ${pCounter}.isUpdateMode,
+                                         required: ${pCounter}.isUpdateMode && ${counter}.required}" [textContent]="${counter}.displayname"> </label>
+                            <div [ngClass]="${counter}.displayname ? ${pCounter}._widgetClass : '${controlLayout}'">
+                                 <span class="form-control-static app-label"
+                                       [hidden]="${pCounter}.isUpdateMode || ${counter}.viewmodewidget === 'default' || ${counter}.widgettype === 'upload'" [innerHTML]="${getCaptionByWidget(attrs, widgetType, counter)}"></span>
+                                ${getTemplate(attrs, widgetType, eventsTmpl, counter, pCounter, isInList)}
+                                @if(${counter}.showPendingSpinner){ <span aria-hidden="true" class="form-field-spinner fa fa-circle-o-notch fa-spin form-control-feedback"></span>}
+                                @if(!(${counter}._control?.invalid && ${counter}._control?.touched) && ${pCounter}.isUpdateMode){ <p class="help-block" aria-hidden="true" role="alert" aria-live="polite" [textContent]="${counter}.hint"></p> }
+                                ${validationMsg}
+                            </div>
+                        </div>`;
+            },
+            post: () => `</${tagName$Z}>`,
+            provide: (attrs, shared) => {
+                const provider = new Map();
+                provider.set('form_reference', shared.get('counter'));
+                return provider;
+            },
+            imports: (attrs) => {
+                const widgetType = attrs.get('__widgetType') || attrs.get('type');
+                const requiredWidget = core.getRequiredFormWidget(widgetType);
+                attrs.delete('__widgetType');
+                let pipeImports = [];
+                if (widgetType && [core.FormWidgetType.DATE, core.FormWidgetType.DATETIME, core.FormWidgetType.TIME, core.FormWidgetType.TIMESTAMP].includes(widgetType)) {
+                    pipeImports.push('toDate');
+                }
+                return [requiredWidget, 'wm-form', ...pipeImports];
+            }
+        };
+    };
+    transpiler.register('wm-form-field', registerFormField.bind(undefined, true));
+    transpiler.register('wm-filter-field', registerFormField.bind(undefined, false));
+    var formField_build = () => { };
+
+    var formField_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: formField_build
+    });
+
+    const tagName$Y = 'div';
+    const registerAction = (tmpl) => {
+        return {
+            pre: attrs => `<${tagName$Y} wmFormAction name="${attrs.get('name') || attrs.get('key')}" ${transpiler.getAttrMarkup(attrs)} ${tmpl}>`,
+            post: () => `</${tagName$Y}>`
+        };
+    };
+    transpiler.register('wm-form-action', registerAction.bind(undefined, ''));
+    transpiler.register('wm-filter-action', registerAction.bind(undefined, ` update-mode="true" `));
+    var formAction_build = () => { };
+
+    var formAction_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: formAction_build
+    });
+
+    const tagName$X = 'form';
+    const idGen$e = new core.IDGenerator('form_');
+    const formWidgets$1 = new Set([
+        'wm-text',
+        'wm-textarea',
+        'wm-checkbox',
+        'wm-slider',
+        'wm-richtexteditor',
+        'wm-currency',
+        'wm-switch',
+        'wm-select',
+        'wm-checkboxset',
+        'wm-radioset',
+        'wm-date',
+        'wm-time',
+        'wm-timestamp',
+        'wm-upload',
+        'wm-rating',
+        'wm-datetime',
+        'wm-search',
+        'wm-chips',
+        'wm-colorpicker',
+        'wm-table'
+    ]);
+    let numberOfFields;
+    const addFormControlName = (children = []) => {
+        children.forEach(childNode => {
+            if (childNode.name === 'wm-form-field') {
+                numberOfFields++;
+            }
+            if (formWidgets$1.has(childNode.name)) {
+                let key = childNode.attrs.find((attr) => attr.name === 'key' || attr.name === 'name');
+                key = key && key.value;
+                if (!key) {
+                    // for checkbox inside table inside form, key and name attrs are not available. Using datavalue to construct formControlName instead.
+                    let dataValue = childNode.attrs.find((attr) => attr.name === 'datavalue');
+                    if (dataValue && dataValue.value) {
+                        const regex = /\((.*)\)/;
+                        dataValue = dataValue.value.match(regex);
+                        if (dataValue && dataValue.length > 1) {
+                            key = dataValue[1].replace(/["']/g, '');
+                        }
+                    }
+                }
+                childNode.attrs.push(new compiler.Attribute('formControlName', key, 1, 1, 1, undefined, undefined));
+                childNode.attrs.push(new compiler.Attribute('wmFormWidget', '', 1, 1, 1, undefined, undefined));
+            }
+            addFormControlName(childNode.children);
+        });
+    };
+    const updateFormDataSource = (attrMap) => {
+        if (attrMap.get('formdata.bind')) {
+            const formDataSource = transpiler.getDataSource(attrMap.get('formdata.bind'));
+            if (formDataSource) {
+                attrMap.set('formdatasource.bind', formDataSource);
+            }
+        }
+    };
+    const buildTask = (directiveAttr = '') => {
+        return {
+            requires: ['wm-livetable', 'wm-login'],
+            template: (node) => {
+                numberOfFields = 0;
+                addFormControlName(node.children);
+            },
+            pre: (attrs, shared, parentLiveTable, parentLoginWidget) => {
+                let tmpl;
+                let dialogId;
+                const role = parentLoginWidget && parentLoginWidget.get('isLogin') ? 'app-login' : '';
+                const counter = idGen$e.nextUid();
+                const dependsOn = attrs.get('dependson') ? `dependson="${attrs.get('dependson')}"` : '';
+                if (dependsOn) {
+                    attrs.set('dependsontable', 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$X} wmForm data-role="${role}" ${directiveAttr} #${counter} ngNativeValidate [formGroup]="${counter}.ngform" [noValidate]="${counter}.validationtype !== 'html'"
+                    class="${classProp}" [class]="${counter}.captionAlignClass" [autocomplete]="${counter}.autocomplete ? 'on' : 'off'" captionposition=${attrs.get('captionposition')}`;
+                attrs.set('numberOfFields', `${numberOfFields}`);
+                shared.set('counter', counter);
+                updateFormDataSource(attrs);
+                if (attrs.get('formlayout') === 'dialog') {
+                    dialogId = parentLiveTable ? parentLiveTable.get('liveform_dialog_id') : `liveform_dialog_id_${counter}`;
+                    attrs.set('dialogId', dialogId);
+                    const dialogAttrsMap = new Map();
+                    dialogAttributes.forEach((attr) => {
+                        if (attrs.get(attr)) {
+                            dialogAttrsMap.set(attr, attrs.get(attr));
+                        }
+                    });
+                    attrs.set('width', '100%');
+                    tmpl = transpiler.getAttrMarkup(attrs);
+                    return `<div data-identifier="liveform" init-widget class="app-liveform liveform-dialog" ${dependsOn} dialogid="${dialogId}">
+                            <div wmDialog class="app-liveform-dialog" name="${dialogId}" role="form" ${transpiler.getAttrMarkup(dialogAttrsMap)} modal="true">
+                            <ng-template #dialogBody>
+                            ${liveFormTmpl} ${tmpl}>`;
+                }
+                let mobileFormContentTmpl = '';
+                let buttonTemplate = '';
+                // Include mobile-navbar above the form when formlayout is set to page
+                if (attrs.get('formlayout') === 'page') {
+                    const name = `device_liveform_header_${counter}`;
+                    const navbarAttrsMap = new Map();
+                    navbarAttrsMap.set('title', attrs.get('title'));
+                    navbarAttrsMap.set('backbtnclick.event', attrs.get('backbtnclick.event'));
+                    buttonTemplate = `<ng-template #buttonRef let-btn="btn">
+                                            <button  wmButton name="{{btn.key}}" class="navbar-btn btn-primary btn-transparent" iconclass.bind="btn.iconclass" show.bind="btn.show"
+                                                     (click)="${counter}.invokeActionEvent($event, btn.action)" type.bind="btn.type" hint.bind="btn.title" shortcutkey.bind="btn.shortcutkey" disabled.bind="btn.disabled"
+                                                     tabindex.bind="btn.tabindex" [class.hidden]="btn.updateMode ? !${counter}.isUpdateMode : ${counter}.isUpdateMode"></button>
+                                        </ng-template>`;
+                    mobileFormContentTmpl = `<header wmMobileNavbar name="${name}" ${transpiler.getAttrMarkup(navbarAttrsMap)}>
+                                @for (btn of ${counter}.buttonArray; track btn; let i = $index) {
+                                            <ng-container
+                                                [ngTemplateOutlet]="buttonRef"
+                                                [ngTemplateOutletContext]="{btn:btn}"
+                                                [ngTemplateOutletInjector]="${counter}.createCustomInjector('mobile_' + i, {item:item, index:i})">
+                                            </ng-container>
+                                    }
+                                        </header>
+                                        <div class="form-elements panel-body" >`;
+                }
+                tmpl = transpiler.getAttrMarkup(attrs);
+                const dependsOnTmpl = dependsOn ? `<div ${dependsOn}>` : '';
+                return `${dependsOnTmpl}${liveFormTmpl} ${tmpl}>
+                       ${buttonTemplate} ${mobileFormContentTmpl}`;
+            },
+            post: (attrs) => {
+                if (attrs.get('formlayout') === 'dialog') {
+                    return '</form></ng-template></div></div>';
+                }
+                if (attrs.get('formlayout') === 'page') {
+                    return `</div></${tagName$X}>`;
+                }
+                if (attrs.get('dependsontable')) {
+                    return `</${tagName$X}></div>`;
+                }
+                return `</${tagName$X}>`;
+            },
+            provide: (attrs, shared) => {
+                const provider = new Map();
+                provider.set('form_reference', shared.get('counter'));
+                return provider;
+            },
+            imports: (attrs) => {
+                const formlayout = attrs.get('formlayout');
+                if (formlayout === 'dialog') {
+                    return ['wm-dialog'];
+                }
+                return [];
+            }
+        };
+    };
+    transpiler.register('wm-form', buildTask);
+    transpiler.register('wm-liveform', () => buildTask('wmLiveForm'));
+    transpiler.register('wm-livefilter', () => buildTask('wmLiveFilter'));
+    var form_build = () => { };
+
+    var form_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: form_build
+    });
+
+    const tagName$W = 'div';
+    transpiler.register('wm-calendar', () => {
+        return {
+            pre: (attrs) => {
+                let viewType = attrs.get('view') ? attrs.get('view') + ' view' : 'month view';
+                return `<${tagName$W} wmCalendar redrawable style="width:100%" role="region" aria-label="${viewType}" ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$W}>`
+        };
+    });
+    var calendar_build = () => { };
+
+    var calendar_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: calendar_build
+    });
+
+    const tagName$V = 'ul';
+    transpiler.register('wm-chips', () => {
+        return {
+            pre: attrs => `<${tagName$V} wmChips ${transpiler.getAttrMarkup(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$V}>`
+        };
+    });
+    var chips_build = () => { };
+
+    var chips_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: chips_build
+    });
+
+    const tagName$U = 'div';
+    transpiler.register('wm-colorpicker', () => {
+        return {
+            pre: attrs => `<${tagName$U} wmColorPicker ${transpiler.getAttrMarkup(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$U}>`
+        };
+    });
+    var colorPicker_build = () => { };
+
+    var colorPicker_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: colorPicker_build
+    });
+
+    const tagName$T = 'div';
+    transpiler.register('wm-currency', () => {
+        return {
+            pre: attrs => `<${tagName$T} wmCurrency ${transpiler.getAttrMarkup(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$T}>`
+        };
+    });
+    var currency_build = () => { };
+
+    var currency_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: currency_build
+    });
+
+    const tagName$S = 'div';
+    transpiler.register('wm-buttongroup', () => {
+        return {
+            pre: attrs => `<${tagName$S} wmButtonGroup role="group" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$S}>`
+        };
+    });
+    var buttonGroup_build = () => { };
+
+    var buttonGroup_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: buttonGroup_build
+    });
+
+    const tagName$R = 'button';
+    const idGen$d = new core.IDGenerator('wm_button');
+    transpiler.register('wm-button', () => {
+        return {
+            pre: (attrs) => {
+                const counter = idGen$d.nextUid();
+                return `<${tagName$R} wmButton #${counter}="wmButton" [attr.aria-label]="${counter}.arialabel || (${counter}.badgevalue ? ${counter}.caption + ' ' + ${counter}.badgevalue : ${counter}.caption) || null" ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$R}>`
+        };
+    });
+    var button_build = () => { };
+
+    var button_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: button_build
+    });
+
+    const tagName$Q = 'div';
+    transpiler.register('wm-checkbox', () => {
+        return {
+            pre: attrs => {
+                if (attrs.get('type') === 'button') {
+                    return `<${tagName$Q} wmCheckbox ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`;
+                }
+                else {
+                    return `<${tagName$Q} wmCheckbox ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)} style="height:100%">`;
+                }
+            },
+            post: () => `</${tagName$Q}>`
+        };
+    });
+    var checkbox_build = () => { };
+
+    var checkbox_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: checkbox_build
+    });
+
+    const tagName$P = 'ul';
+    transpiler.register('wm-checkboxset', () => {
+        return {
+            pre: attrs => `<${tagName$P} role="group" wmCheckboxset ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$P}>`
+        };
+    });
+    var checkboxset_build = () => { };
+
+    var checkboxset_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: checkboxset_build
+    });
+
+    const tagName$O = 'div';
+    transpiler.register('wm-composite', () => {
+        return {
+            pre: attrs => `<${tagName$O} wmComposite wmCaptionPosition ${transpiler.setChildAttrs(attrs)} ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$O}${transpiler.clearChildAttrs()}>`
+        };
+    });
+    var composite_build = () => { };
+
+    var composite_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: composite_build
+    });
+
+    const tagName$N = 'div';
+    transpiler.register('wm-number', () => {
+        return {
+            pre: attrs => `<${tagName$N} wmNumber ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$N}>`
+        };
+    });
+    var number_build = () => { };
+
+    var number_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: number_build
+    });
+
+    const tagName$M = 'ul';
+    transpiler.register('wm-radioset', () => {
+        return {
+            pre: (attrs) => {
+                const hintAttr = attrs.get("hint") ? ` title="${attrs.get("hint")}" ` : '';
+                return `<${tagName$M} role="radiogroup" wmRadioset ${hintAttr}  ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)}
+               ${core.getNgModelAttr(attrs)}>`;
+            },
+            post: () => `</${tagName$M}>`
+        };
+    });
+    var radioset_build = () => { };
+
+    var radioset_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: radioset_build
+    });
+
+    const tagName$L = 'wm-select';
+    transpiler.register('wm-select', () => {
+        return {
+            pre: attrs => `<${tagName$L} ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)}  ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$L}>`
+        };
+    });
+    var select_build = () => { };
+
+    var select_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: select_build
+    });
+
+    const tagName$K = 'div';
+    const idGen$c = new core.IDGenerator('wm_switch');
+    transpiler.register('wm-switch', () => {
+        return {
+            pre: (attrs) => {
+                const counter = idGen$c.nextUid();
+                return `<${tagName$K} wmSwitch #${counter}="wmSwitch" role="group" [attr.aria-label]="${counter}.arialabel || 'Switch choose options'" ${transpiler.getFormMarkupAttr(attrs)} ${core.getNgModelAttr(attrs)}>`;
+            },
+            post: () => `</${tagName$K}>`
+        };
+    });
+    var switch_build = () => { };
+
+    var switch_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: switch_build
+    });
+
+    const tagName$J = 'wm-input';
+    transpiler.register('wm-text', () => {
+        return {
+            pre: attrs => `<${tagName$J} ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$J}>`
+        };
+    });
+    var text_build = () => { };
+
+    var text_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: text_build
+    });
+
+    const tagName$I = 'wm-textarea';
+    transpiler.register('wm-textarea', () => {
+        return {
+            pre: attrs => `<${tagName$I} ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$I}>`
+        };
+    });
+    var textarea_build = () => { };
+
+    var textarea_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: textarea_build
+    });
+
+    const tagName$H = 'div';
+    transpiler.register('wm-datetime', () => {
+        return {
+            pre: attrs => `<${tagName$H} wmDateTime ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$H}>`
+        };
+    });
+    var dateTime_build = () => { };
+
+    var dateTime_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: dateTime_build
+    });
+
+    const tagName$G = 'div';
+    transpiler.register('wm-date', () => {
+        return {
+            pre: attrs => `<${tagName$G} wmDate ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$G}>`
+        };
+    });
+    var date_build = () => { };
+
+    var date_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: date_build
+    });
+
+    const tagName$F = 'div';
+    transpiler.register('wm-time', () => {
+        return {
+            pre: attrs => `<${tagName$F} wmTime ${transpiler.getFormMarkupAttr(attrs)} ${transpiler.getChildAttrs(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$F}>`
+        };
+    });
+    var time_build = () => { };
+
+    var time_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: time_build
+    });
+
+    const tagName$E = 'div';
+    transpiler.register('wm-fileupload', () => {
+        return {
+            pre: attrs => {
+                if (attrs.get('select.event')) {
+                    const onSelectBinding = transpiler.getDataSource(attrs.get('select.event'));
+                    attrs.set('datasource.bind', onSelectBinding);
+                }
+                if (attrs.get('delete.event')) {
+                    const onDeleteBinding = transpiler.getDataSource(attrs.get('delete.event'));
+                    attrs.set('deletedatasource.bind', onDeleteBinding);
+                }
+                return `<${tagName$E} wmFileUpload ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$E}>`
+        };
+    });
+    var fileUpload_build = () => { };
+
+    var fileUpload_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: fileUpload_build
+    });
+
+    const tagName$D = 'div';
+    transpiler.register('wm-rating', () => {
+        return {
+            pre: attrs => `<${tagName$D} wmRating ${transpiler.getFormMarkupAttr(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$D}>`
+        };
+    });
+    var rating_build = () => { };
+
+    var rating_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: rating_build
+    });
+
+    const tagName$C = 'div';
+    transpiler.register('wm-slider', () => {
+        return {
+            pre: attrs => `<${tagName$C} wmSlider ${transpiler.getAttrMarkup(attrs)} ${core.getNgModelAttr(attrs)}>`,
+            post: () => `</${tagName$C}>`
+        };
+    });
+    var slider_build = () => { };
+
+    var slider_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: slider_build
+    });
+
+    const wmlistTag = 'wm-list';
+    const tagName$B = 'div';
+    const dataSetKey$2 = 'dataset';
+    function copyAttribute$1(from, fromAttrName, to, toAttrName) {
+        const fromAttr = from.attrs.find(a => a.name === fromAttrName);
+        if (fromAttr) {
+            to.attrs.push(new compiler.Attribute(toAttrName, fromAttr.value, fromAttr.sourceSpan, fromAttr.keySpan, fromAttr.valueSpan, undefined, undefined));
+        }
+    }
+    transpiler.register('wm-media-list', () => {
+        return {
+            template: (node) => {
+                let bindDataset;
+                const attrObj = node.attrs.find(attr => attr.name === dataSetKey$2), 
+                /**
+                 *  Replacing binded property value with item
+                 * @param children
+                 */
+                replaceBind = (children = []) => {
+                    children.forEach(childNode => {
+                        if (childNode.name) {
+                            // return if the child Element is of wm-list .
+                            if (childNode.name !== wmlistTag) {
+                                childNode.attrs.forEach((attr) => {
+                                    if (attr.value.startsWith(`bind:${bindDataset}.data[$i]`)) {
+                                        attr.value = attr.value.replace(`${bindDataset}.data[$i]`, 'item');
+                                    }
+                                    else if (attr.value.startsWith(`bind:${bindDataset}`)) {
+                                        attr.value = attr.value.replace(bindDataset, 'item');
+                                    }
+                                });
+                                replaceBind(childNode.children);
+                            }
+                        }
+                    });
+                };
+                if (attrObj && attrObj.value.startsWith('bind:')) {
+                    bindDataset = attrObj.value.replace('bind:', '');
+                }
+                if (bindDataset) {
+                    replaceBind(node.children);
+                }
+                const template = node.children
+                    .find(e => e instanceof compiler.Element && e.name === 'wm-media-template');
+                if (template != null) {
+                    copyAttribute$1(template, 'width', node, 'thumbnailwidth');
+                    copyAttribute$1(template, 'height', node, 'thumbnailheight');
+                }
+            },
+            pre: attrs => `<${tagName$B} wmMediaList ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$B}>`
+        };
+    });
+    var mediaList_build = () => { };
+
+    var mediaList_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: mediaList_build
+    });
+
+    const tagName$A = 'ng-template';
+    transpiler.register('wm-media-template', () => {
+        return {
+            pre: () => `<${tagName$A} #mediaListTemplate let-item="item" let-index="index">`,
+            post: () => `</${tagName$A}>`
+        };
+    });
+    var mediaListItem_build = () => { };
+
+    var mediaListItem_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: mediaListItem_build
+    });
+
+    const wmListTag = 'wm-list';
+    const listTagName = 'div';
+    const dataSetKey$1 = 'dataset';
+    transpiler.register(wmListTag, () => {
+        return {
+            requires: ['wm-form', 'wm-liveform'],
+            template: (node, shared) => {
+                const datasetAttr = node.attrs.find(attr => attr.name === dataSetKey$1);
+                const widgetNameAttr = node.attrs.find(attr => attr.name === 'name');
+                if (!datasetAttr) {
+                    return;
+                }
+                const boundExpr = transpiler.getBoundToExpr(datasetAttr.value);
+                if (!boundExpr) {
+                    return;
+                }
+                core.updateTemplateAttrs(node, boundExpr, widgetNameAttr.value, 'itemRef.');
+                const listTemplateNode = (node.children || []).find((c) => c instanceof compiler.Element && c?.name === 'wm-listtemplate');
+                if (listTemplateNode) {
+                    const meta = {};
+                    (listTemplateNode.attrs || []).forEach(a => {
+                        meta[a.name] = a.value;
+                    });
+                    shared.set('listTemplateAttrs', JSON.stringify(meta));
+                }
+                else {
+                    shared.set('listTemplateAttrs', null);
+                }
+            },
+            pre: (attrs, shared, parentForm, parentLiveForm) => {
+                const parent = parentForm || parentLiveForm;
+                shared.set('form_reference', parent && parent.get('form_reference'));
+                const listTemplateAttrsJson = shared.get('listTemplateAttrs');
+                if (listTemplateAttrsJson) {
+                    // Escape double quotes so they can sit safely inside an HTML attribute
+                    const escapedJson = listTemplateAttrsJson.replace(/"/g, '&quot;');
+                    attrs.set('itemattrs', escapedJson);
+                }
+                return `<${listTagName} wmList wmLiveActions ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${listTagName}>`,
+            provide: (attrs, shared) => {
+                const provider = new Map();
+                provider.set('parent_form_reference', shared.get('form_reference'));
+                return provider;
+            }
+        };
+    });
+    transpiler.register('wm-listtemplate', () => {
+        return {
+            pre: () => `<ng-template #listTemplate let-item="item" let-$index="$index" let-itemRef="itemRef" let-$first="$first" let-$last="$last"  let-currentItemWidgets="currentItemWidgets" >`,
+            post: () => `</ng-template>`
+        };
+    });
+    function copyAttribute(from, fromAttrName, to, toAttrName) {
+        const fromAttr = from.attrs.find(a => a.name === fromAttrName);
+        if (fromAttr) {
+            to.attrs.push(new compiler.Attribute(toAttrName, fromAttr.value, fromAttr.sourceSpan, fromAttr.keySpan, fromAttr.valueSpan, undefined, undefined));
+        }
+    }
+    transpiler.register('wm-list-action-template', () => {
+        return {
+            template: (node) => {
+                node.attrs.find(attr => attr.name === 'position').value;
+                const btns = node.children
+                    .filter(e => e instanceof compiler.Element && e.name === 'wm-button');
+                // add swipe-position on button nodes to identify whether buttons are from left or right action templates
+                btns.forEach((btnNode) => {
+                    copyAttribute(node, 'position', btnNode, 'swipe-position');
+                });
+            },
+            pre: (attrs, el) => {
+                if (attrs.get('position') === 'left') {
+                    return `<ng-template #listLeftActionTemplate>
+                            <li class="app-list-item-action-panel app-list-item-left-action-panel actionMenu" ${transpiler.getAttrMarkup(attrs)}>`;
+                }
+                if (attrs.get('position') === 'right') {
+                    return `<ng-template #listRightActionTemplate>
+                            <li class="app-list-item-action-panel app-list-item-right-action-panel actionMenu" ${transpiler.getAttrMarkup(attrs)}>`;
+                }
+            },
+            post: () => `</li></ng-template>`
+        };
+    });
+    var list_build = () => { };
+
+    var list_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: list_build
+    });
+
+    const tagName$z = 'div';
+    const idGen$b = new core.IDGenerator('liveform_dialog_id_');
+    transpiler.register('wm-livetable', () => {
+        return {
+            pre: (attrs, shared) => {
+                const counter = idGen$b.nextUid();
+                shared.set('counter', counter);
+                return `<${tagName$z} wmLiveTable ${transpiler.getAttrMarkup(attrs)} dialogid="${counter}">`;
+            },
+            post: () => `</${tagName$z}>`,
+            provide: (attrs, shared) => {
+                const provider = new Map();
+                provider.set('liveform_dialog_id', shared.get('counter'));
+                return provider;
+            }
+        };
+    });
+    var liveTable_build = () => { };
+
+    var liveTable_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: liveTable_build
+    });
+
+    const tagName$y = 'p';
+    const idGen$a = new core.IDGenerator('wm_message');
+    transpiler.register('wm-message', () => {
+        return {
+            pre: (attrs) => {
+                const counter = idGen$a.nextUid();
+                return `<${tagName$y} wmMessage tabindex="0" #${counter}="wmMessage" ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$y}>`
+        };
+    });
+    var message_build = () => { };
+
+    var message_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: message_build
+    });
+
+    const tagName$x = 'ol';
+    transpiler.register('wm-breadcrumb', () => {
+        return {
+            pre: attrs => `<${tagName$x} wmBreadcrumb ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$x}>`
+        };
+    });
+    var breadcrumb_build = () => { };
+
+    var breadcrumb_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: breadcrumb_build
+    });
+
+    const tagName$w = 'div';
+    transpiler.register('wm-menu', () => {
+        return {
+            pre: attrs => {
+                const menuWidth = attrs.get("width");
+                let styleBinding = '';
+                if (menuWidth) {
+                    const units = ['%', 'px'];
+                    const hasUnit = units.some(unit => menuWidth.includes(unit));
+                    if (hasUnit) {
+                        styleBinding = `[ngStyle]="{'width': '${menuWidth}'}"`;
+                    }
+                    else {
+                        styleBinding = `[ngStyle]="{'width': '${menuWidth}px'}"`;
+                    }
+                    return `<${tagName$w} wmMenu dropdown ${transpiler.getAttrMarkup(attrs)} ${styleBinding}>`;
+                }
+                else {
+                    return `<${tagName$w} wmMenu dropdown ${transpiler.getAttrMarkup(attrs)}>`;
+                }
+            },
+            post: () => `</${tagName$w}>`
+        };
+    });
+    var menu_build = () => { };
+
+    var menu_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: menu_build
+    });
+
+    const tagName$v = 'li';
+    transpiler.register('wm-nav-item', () => {
+        return {
+            pre: attrs => `<${tagName$v} wmNavItem role="listitem" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$v}>`
+        };
+    });
+    var navItem_build = () => { };
+
+    var navItem_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: navItem_build
+    });
+
+    const tagName$u = 'ul';
+    transpiler.register('wm-nav', () => {
+        return {
+            pre: attrs => `<${tagName$u} wmNav data-element-type="wmNav" data-role="page-header" role="list" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$u}>`
+        };
+    });
+    var nav_build = () => { };
+
+    var nav_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: nav_build
+    });
+
+    const tagName$t = 'nav';
+    transpiler.register('wm-navbar', () => {
+        return {
+            pre: attrs => `<${tagName$t} wmNavbar data-element-type="wmNavbar" role="navigation" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$t}>`
+        };
+    });
+    var navbar_build = () => { };
+
+    var navbar_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: navbar_build
+    });
+
+    const tagName$s = 'wm-popover';
+    transpiler.register('wm-popover', () => {
+        return {
+            requires: ['wm-table'],
+            pre: (attrs, shared, table) => {
+                const contentSource = attrs.get('contentsource');
+                let popoverTemplate;
+                if (contentSource !== 'inline') {
+                    const content = attrs.get('content');
+                    const bindContent = attrs.get('content.bind');
+                    let contentMarkup = '';
+                    if (content) {
+                        contentMarkup = `content="${content}"`;
+                    }
+                    else if (bindContent) {
+                        contentMarkup = `content.bind="${bindContent}"`;
+                    }
+                    popoverTemplate = `<div wmContainer #partial partialContainer ${contentMarkup}>`;
+                    shared.set('hasPopoverContent', true);
+                }
+                let markup = `<${tagName$s} wmPopover ${transpiler.getAttrMarkup(attrs)}>`;
+                const contextAttrs = table ? `let-row="row"` : ``;
+                markup += `<ng-template ${contextAttrs}><div tabindex="0" class="popover-start sr-only" aria-label="">popover content start</div>`;
+                // todo keyboard navigation - tab
+                if (popoverTemplate) {
+                    markup += `${popoverTemplate ? popoverTemplate : ''}`;
+                }
+                return markup;
+            },
+            post: (attrs, shared) => {
+                let markup = '';
+                if (shared.get('hasPopoverContent')) {
+                    markup += `</div>`;
+                }
+                return `${markup}<div tabindex="0" class="popover-end sr-only" aria-label="">popover content ended</div></ng-template></${tagName$s}>`;
+            }
+        };
+    });
+    var popover_build = () => { };
+
+    var popover_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: popover_build
+    });
+
+    const tagName$r = 'div';
+    const findChild = (node, childName) => {
+        const child = node && node.children.find(e => (e instanceof compiler.Element && e.name === childName));
+        return child;
+    };
+    const createElement$4 = name => {
+        return new compiler.Element(name, [], [], noSpan$4, noSpan$4, noSpan$4);
+    };
+    const getElementNode = (name, node) => {
+        let elementNode;
+        if (!node) {
+            return;
+        }
+        lodashEs.forEach(node.children, (child) => {
+            if (child instanceof compiler.Element) {
+                if (child.name === name) {
+                    elementNode = child;
+                }
+                else if (child.children) {
+                    elementNode = getElementNode(name, child);
+                }
+            }
+            return !elementNode;
+        });
+        return elementNode;
+    };
+    const noSpan$4 = {};
+    const idGen$9 = new core.IDGenerator('wm_page');
+    transpiler.register('wm-page', () => {
+        return {
+            template: (node) => {
+                let pageContentNode = findChild(findChild(node, 'wm-content'), 'wm-page-content');
+                if (!pageContentNode) {
+                    pageContentNode = getElementNode('wm-page-content', getElementNode('wm-content', node));
+                }
+                if (pageContentNode) {
+                    const conditionalNode = createElement$4('ng-container');
+                    const ifOpenText = new compiler.Text('@if (compilePageContent) {', null, undefined, undefined);
+                    conditionalNode.children.push(ifOpenText);
+                    conditionalNode.children = conditionalNode.children.concat(pageContentNode.children);
+                    conditionalNode.children.push(new compiler.Text('{{onPageContentReady()}}', null, undefined, undefined));
+                    const ifCloseText = new compiler.Text('}', null, undefined, undefined);
+                    conditionalNode.children.push(ifCloseText);
+                    pageContentNode.children = [conditionalNode];
+                }
+            },
+            pre: (attrs) => {
+                const counter = idGen$9.nextUid();
+                return `<${tagName$r} wmPage #${counter}="wmPage" data-role="pageContainer" [attr.aria-label]="${counter}.arialabel" ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$r}>`
+        };
+    });
+    var page_build = () => { };
+
+    var page_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: page_build
+    });
+
+    const tagName$q = 'div';
+    const idGen$8 = new core.IDGenerator('wm_layout');
+    transpiler.register('wm-layout', () => {
+        return {
+            pre: (attrs) => {
+                const counter = idGen$8.nextUid();
+                return `<${tagName$q} wmLayout #${counter}="wmLayout" data-role="pageContainer" [attr.aria-label]="${counter}.arialabel" ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$q}>`
+        };
+    });
+    var layout_build = () => { };
+
+    var layout_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: layout_build
+    });
+
+    const tagName$p = 'router-outlet';
+    transpiler.register('wm-router-outlet', () => {
+        return {
+            pre: attrs => `<div wmRouterOutlet name="wmRouterOutlet" ${transpiler.getAttrMarkup(attrs)}><${tagName$p} (activate)="onActivate($event)">`,
+            post: () => `</${tagName$p}></div>`
+        };
+    });
+    var routerOutlet_build = () => { };
+
+    var routerOutlet_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: routerOutlet_build
+    });
+
+    const tagName$o = 'nav';
+    transpiler.register('wm-pagination', () => {
+        return {
+            pre: attrs => `<${tagName$o} wmPagination data-identifier="pagination" aria-label="Page navigation" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$o}>`
+        };
+    });
+    var pagination_build = () => { };
+
+    var pagination_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: pagination_build
+    });
+
+    const tagName$n = 'main';
+    transpiler.register('wm-content', () => {
+        return {
+            pre: attrs => `<${tagName$n} wmContent data-role="page-content" role="main" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$n}>`
+        };
+    });
+    var content_build = () => { };
+
+    var content_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: content_build
+    });
+
+    const tagName$m = 'footer';
+    const idGen$7 = new core.IDGenerator('wm_footer');
+    transpiler.register('wm-footer', () => {
+        return {
+            pre: (attrs) => {
+                const counter = idGen$7.nextUid();
+                return `<${tagName$m} wmFooter #${counter}="wmFooter" partialContainer data-role="page-footer" role="contentinfo" [attr.aria-label]="${counter}.arialabel || 'Page footer'" ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$m}>`
+        };
+    });
+    var footer_build = () => { };
+
+    var footer_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: footer_build
+    });
+
+    const tagName$l = 'header';
+    const idGen$6 = new core.IDGenerator('wm_header');
+    transpiler.register('wm-header', () => {
+        return {
+            pre: (attrs) => {
+                const counter = idGen$6.nextUid();
+                return `<${tagName$l} wmHeader #${counter}="wmHeader" partialContainer data-role="page-header" role="banner" [attr.aria-label]="${counter}.arialabel || 'Page header'" ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$l}>`
+        };
+    });
+    var header_build = () => { };
+
+    var header_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: header_build
+    });
+
+    const tagName$k = 'aside';
+    const idGen$5 = new core.IDGenerator('wm_left_panel');
+    transpiler.register('wm-left-panel', () => {
+        return {
+            pre: (attrs) => {
+                const counter = idGen$5.nextUid();
+                return `<${tagName$k} wmLeftPanel #${counter}="wmLeftPanel" partialContainer data-role="page-left-panel" [attr.aria-label]="${counter}.arialabel || 'Left navigation panel'" wmSmoothscroll="${attrs.get('smoothscroll') || 'false'}" ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$k}>`
+        };
+    });
+    var leftPanel_build = () => { };
+
+    var leftPanel_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: leftPanel_build
+    });
+
+    const tagName$j = 'header';
+    transpiler.register('wm-mobile-navbar', () => {
+        return {
+            pre: attrs => `<${tagName$j} wmMobileNavbar ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$j}>`
+        };
+    });
+    var mobileNavbar_build = () => { };
+
+    var mobileNavbar_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: mobileNavbar_build
+    });
+
+    const tagName$i = 'aside';
+    const idGen$4 = new core.IDGenerator('wm_right_panel');
+    transpiler.register('wm-right-panel', () => {
+        return {
+            pre: (attrs) => {
+                const counter = idGen$4.nextUid();
+                return `<${tagName$i} wmRightPanel #${counter}="wmRightPanel" partialContainer data-role="page-right-panel" role="complementary" [attr.aria-label]="${counter}.arialabel || 'Right navigation panel'" ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$i}>`
+        };
+    });
+    var rightPanel_build = () => { };
+
+    var rightPanel_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: rightPanel_build
+    });
+
+    const tagName$h = 'div';
+    const createElement$3 = name => {
+        return new compiler.Element(name, [], [], noSpan$3, noSpan$3, noSpan$3);
+    };
+    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$3('ng-container');
+                        const ifOpenText = new compiler.Text('@if (compilePageContent) {', null, undefined, undefined);
+                        conditionalNode.children.push(ifOpenText);
+                        conditionalNode.children = conditionalNode.children.concat(node.children);
+                        conditionalNode.children.push(new compiler.Text('{{onPageContentReady()}}', null, undefined, undefined));
+                        const ifCloseText = new compiler.Text('}', null, undefined, undefined);
+                        conditionalNode.children.push(ifCloseText);
+                        node.children = [conditionalNode];
+                        break;
+                    }
+                }
+            },
+            pre: attrs => `<${tagName$h} wmPageContent ${attrs.get('spa') && 'wmSpaPage' || ''} wmSmoothscroll="${attrs.get('smoothscroll') || 'false'}" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$h}>`,
+            imports: (attrs) => {
+                if (attrs.get('spa')) {
+                    return ['spa-page-content'];
+                }
+                return [];
+            }
+        };
+    });
+    var pageContent_build = () => { };
+
+    var pageContent_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: pageContent_build
+    });
+
+    const tagName$g = 'div';
+    transpiler.register('wm-mobile-tabbar', () => {
+        return {
+            pre: attrs => `<${tagName$g} wmMobileTabbar ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$g}>`
+        };
+    });
+    var tabBar_build = () => { };
+
+    var tabBar_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: tabBar_build
+    });
+
+    const tagName$f = 'section';
+    const idGen$3 = new core.IDGenerator('wm_top_nav');
+    transpiler.register('wm-top-nav', () => {
+        return {
+            pre: (attrs) => {
+                const counter = idGen$3.nextUid();
+                return `<${tagName$f} wmTopNav #${counter}="wmTopNav" partialContainer data-role="page-topnav" role="navigation" [attr.aria-label]="${counter}.arialabel || 'Second level navigation'" ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$f}>`
+        };
+    });
+    var topNav_build = () => { };
+
+    var topNav_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: topNav_build
+    });
+
+    const tagName$e = 'section';
+    const noSpan$2 = {};
+    const createElement$2 = name => {
+        return new compiler.Element(name, [], [], noSpan$2, noSpan$2, noSpan$2);
+    };
+    transpiler.register('wm-partial', () => {
+        return {
+            template: (node) => {
+                const conditionalNode = createElement$2('ng-container');
+                const ifOpenText = new compiler.Text('@if (compileContent) {', null, undefined, undefined);
+                conditionalNode.children.push(ifOpenText);
+                conditionalNode.children = conditionalNode.children.concat(node.children);
+                const ifCloseText = new compiler.Text('}', null, undefined, undefined);
+                conditionalNode.children.push(ifCloseText);
+                node.children.length = 0;
+                node.children.push(conditionalNode);
+            },
+            pre: attrs => `<${tagName$e} wmPartial data-role="partial" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$e}>`
+        };
+    });
+    var partial_build = () => { };
+
+    var partial_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: partial_build
+    });
+
+    const tagName$d = 'div';
+    transpiler.register('wm-param', () => {
+        return {
+            pre: attrs => `<${tagName$d} wmParam hidden ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$d}>`
+        };
+    });
+    var partialParam_build = () => { };
+
+    var partialParam_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: partialParam_build
+    });
+
+    const tagName$c = 'section';
+    transpiler.register('wm-prefab', () => {
+        return {
+            pre: attrs => `<${tagName$c} wmPrefab redrawable data-role="prefab" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$c}>`
+        };
+    });
+    var prefab_build = () => { };
+
+    var prefab_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: prefab_build
+    });
+
+    const noSpan$1 = {};
+    const createElement$1 = name => {
+        return new compiler.Element(name, [], [], noSpan$1, noSpan$1, noSpan$1);
+    };
+    const tagName$b = 'div';
+    transpiler.register('wm-prefab-container', () => {
+        return {
+            template: (node) => {
+                const conditionalNode = createElement$1('ng-container');
+                const ifOpenText = new compiler.Text('@if (compileContent) {', null, undefined, undefined);
+                conditionalNode.children.push(ifOpenText);
+                conditionalNode.children = conditionalNode.children.concat(node.children);
+                const ifCloseText = new compiler.Text('}', null, undefined, undefined);
+                conditionalNode.children.push(ifCloseText);
+                node.children.length = 0;
+                node.children.push(conditionalNode);
+            },
+            pre: attrs => `<${tagName$b} wmPrefabContainer ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$b}>`
+        };
+    });
+    var prefabContainer_build = () => { };
+
+    var prefabContainer_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: prefabContainer_build
+    });
+
+    const tagName$a = 'div';
+    transpiler.register('wm-table-action', () => {
+        return {
+            pre: attrs => `<${tagName$a} name="${attrs.get('name') || attrs.get('key')}" wmTableAction ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$a}>`
+        };
+    });
+    var tableAction_build = () => { };
+
+    var tableAction_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: tableAction_build
+    });
+
+    const tagName$9 = 'div';
+    transpiler.register('wm-table-column-group', () => {
+        return {
+            pre: attrs => `<${tagName$9} wmTableColumnGroup ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$9}>`
+        };
+    });
+    var tableColumnGroup_build = () => { };
+
+    var tableColumnGroup_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: tableColumnGroup_build
+    });
+
+    const tagName$8 = 'div';
+    const idGen$2 = new core.IDGenerator('data_table_form_');
+    const formWidgets = new Set([
+        'wm-text',
+        'wm-textarea',
+        'wm-checkbox',
+        'wm-slider',
+        'wm-currency',
+        'wm-switch',
+        'wm-select',
+        'wm-checkboxset',
+        'wm-radioset',
+        'wm-date',
+        'wm-time',
+        'wm-timestamp',
+        'wm-rating',
+        'wm-datetime',
+        'wm-search',
+        'wm-chips',
+        'wm-colorpicker'
+    ]);
+    // Add ngModelOptions standalone true as inner custom form widgets will be not part of table ngform
+    const addNgModelStandalone = (children = []) => {
+        let formControlAttr = [];
+        children.forEach(childNode => {
+            if (formWidgets.has(childNode.name)) {
+                // angular build is failing when formControlName is undefined for checkbox and mgModelOptions attr is present
+                if (childNode.name === 'wm-checkbox') {
+                    formControlAttr = childNode.attrs.filter(function (attr) {
+                        return attr.name === 'formControlName';
+                    });
+                    if (formControlAttr.length) {
+                        return;
+                    }
+                }
+                childNode.attrs.push(new compiler.Attribute('[ngModelOptions]', '{standalone: true}', 1, 1, 1, undefined, undefined));
+            }
+            addNgModelStandalone(childNode.children);
+        });
+    };
+    // get the filter template (widget and filter menu) to be displayed in filter row
+    const getFilterTemplate = (attrs, pCounter) => {
+        const widget = attrs.get('filterwidget') || getDataTableFilterWidget(attrs.get('type') || core.DataType.STRING);
+        const fieldName = attrs.get('binding');
+        const type = attrs.get('type') || 'string';
+        let datasourceBinding, submitEventBinding;
+        const datasetAttr = attrs.get('filterdataset.bind');
+        // when multicolumn is selected and filterwidget as autocomplete is assigned to dataset.
+        if (attrs.get('filterwidget') === 'autocomplete') {
+            if (datasetAttr) {
+                const binddatasource = transpiler.getDataSource(datasetAttr);
+                datasourceBinding = `dataset.bind="${datasetAttr}" datasource.bind="${binddatasource}"`;
+            }
+            submitEventBinding = `submit.event="changeFn('${fieldName}')"`;
+        }
+        const innerTmpl = `#filterWidget formControlName="${fieldName + '_filter'}" ${datasourceBinding} ${submitEventBinding} change.event="changeFn('${fieldName}')"
+                        disabled.bind="isDisabled('${fieldName}')"`;
+        const options = { inputType: 'filterinputtype' };
+        const widgetTmpl = `${core.getFormWidgetTemplate(widget, innerTmpl, attrs, options)}`;
+        return `<ng-template #filterTmpl let-changeFn="changeFn" let-isDisabled="isDisabled">
+    <div class="input-group ${widget}" data-col-identifier="${fieldName}">
+        ${widgetTmpl}
+        @if(${pCounter}.showClearIcon('${fieldName}')){
+        <span class="input-group-addon filter-clear-icon" >
+            <button class="btn-transparent btn app-button" aria-label="Clear button" type="button" (click)="${pCounter}.clearRowFilter('${fieldName}')">
+                <i class="app-icon wi wi-clear" aria-hidden="true"></i>
+            </button>
+         </span>
+         }
+        <span class="input-group-addon" dropdown container="body" (onShown)="${pCounter}.adjustContainer('${fieldName}');">
+            <button class="btn-transparent btn app-button" type="button" dropdownToggle><i class="app-icon wi wi-filter-list"></i></button>
+            <ul class="matchmode-dropdown dropdown-menu" *dropdownMenu>
+                    @for (matchMode of ${pCounter}.matchModeTypesMap['${type}']; track matchMode) {
+                    <li [ngClass]="{active: matchMode === (${pCounter}.rowFilter['${fieldName}'].matchMode || ${pCounter}.matchModeTypesMap['${type}'][0])}">
+                    <a href="javascript:void(0);" (click)="${pCounter}.onFilterConditionSelect('${fieldName}', matchMode)" [innerText]="${pCounter}.matchModeMsgs[matchMode]"></a>
+                    </li>
+                    }
+             </ul>
+        </span>
+    </div></ng-template>`;
+    };
+    const getEventsTmpl = attrs => {
+        let tmpl = '';
+        attrs.forEach((val, key) => {
+            if (key.endsWith('.event')) {
+                tmpl += `${key}="${val}" `;
+            }
+        });
+        return tmpl;
+    };
+    // Generate inline edit properties template. Properties requiring row instance are generated here.
+    const getInlineEditRowPropsTmpl = attrs => {
+        const propAttrs = new Map();
+        const props = ['disabled', 'disabled.bind'];
+        props.forEach(prop => {
+            if (attrs.get(prop)) {
+                propAttrs.set(prop, attrs.get(prop));
+                attrs.delete(prop);
+            }
+        });
+        return transpiler.getAttrMarkup(propAttrs);
+    };
+    // get the inline widget template
+    const getInlineEditWidgetTmpl = (attrs, isNewRow, errorstyle, pCounter) => {
+        const options = {};
+        const fieldName = attrs.get('binding');
+        const widget = attrs.get('edit-widget-type') || getEditModeWidget({
+            'type': attrs.get('type'),
+            'related-entity-name': attrs.get('related-entity-name'),
+            'primary-key': attrs.get('primary-key')
+        });
+        let widgetRef = '';
+        let formControl = '';
+        let wmFormWidget = '';
+        if (widget === core.FormWidgetType.UPLOAD) {
+            options.uploadProps = {
+                formName: idGen$2.nextUid(),
+                name: fieldName
+            };
+            options.counter = pCounter;
+        }
+        else {
+            widgetRef = isNewRow ? '#inlineWidgetNew' : '#inlineWidget';
+            formControl = isNewRow ? `formControlName="${fieldName}_new"` : `formControlName="${fieldName}"`;
+            wmFormWidget = 'wmFormWidget';
+        }
+        options.inputType = 'editinputtype';
+        const tmplRef = isNewRow ? '#inlineWidgetTmplNew' : '#inlineWidgetTmpl';
+        const eventsTmpl = widget === core.FormWidgetType.UPLOAD ? '' : getEventsTmpl(attrs);
+        const rowPropsTl = getInlineEditRowPropsTmpl(attrs);
+        const innerTmpl = `${widgetRef} ${wmFormWidget} key="${fieldName}" data-field-name="${fieldName}" ${formControl} ${eventsTmpl} ${rowPropsTl}`;
+        const widgetTmpl = core.getFormWidgetTemplate(widget, innerTmpl, attrs, options);
+        const pendingSpinnerStatus = isNewRow ? 'getPendingSpinnerStatusNew' : 'getPendingSpinnerStatus';
+        const validationErrorTmpl = getValiationErrorTemplate(errorstyle);
+        /* This element with error message is used to run Automation checks if any error message is present */
+        const errorMsgElementForAutomation = '@if(getValidationMessage()){<span class="sr-only" >{{getValidationMessage()}}</span>}';
+        return `<ng-template ${tmplRef} let-row="row" let-getControl="getControl" let-getValidationMessage="getValidationMessage" let-${pendingSpinnerStatus}="${pendingSpinnerStatus}">
+                <div data-col-identifier="${fieldName}" >
+                     ${widgetTmpl}
+                     ${validationErrorTmpl}
+                    @if(${pendingSpinnerStatus}()){
+                        <div class="overlay"><span aria-hidden="true" class="form-field-spinner fa fa-circle-o-notch fa-spin form-control-feedback"></span></div>
+                     }
+                     ${errorMsgElementForAutomation}
+                 </div>
+            </ng-template>`;
+    };
+    const getValiationErrorTemplate = (errorTmplType) => {
+        let validationErrorTmpl = '';
+        switch (errorTmplType) {
+            case 'bottom':
+                validationErrorTmpl = `@if(getValidationMessage() && getControl() && getControl().invalid && getControl().touched){<span class="help-block text-danger" >{{getValidationMessage()}}</span>}`;
+                break;
+            case 'hover':
+            default:
+                // added app-label class as in foundation.css the default class(app-label) has been written for label tag
+                validationErrorTmpl = `@if(getValidationMessage() && getControl() && getControl().invalid && getControl().touched){<span placement="top" container="body" tooltip="{{getValidationMessage()}}" class="app-label text-danger wi wi-error">
+                                    </span>}`;
+        }
+        return validationErrorTmpl;
+    };
+    const getFormatExpression = (attrs) => {
+        const columnValue = `row.getProperty('${attrs.get('binding')}')`;
+        let formatPattern = attrs.get('custompipeformat') || attrs.get('formatpattern');
+        let colExpression = '';
+        // For date time data types, if format pattern is not applied, Apply default toDate format
+        if (core.isDateTimeType(attrs.get('type')) && (!formatPattern || formatPattern === 'None')) {
+            attrs.set('formatpattern', 'toDate');
+            attrs.delete('datepattern');
+            formatPattern = 'toDate';
+        }
+        switch (formatPattern) {
+            case 'toDate':
+                colExpression = `{{${columnValue} | toDate: colDef.datepattern}}`;
+                break;
+            case 'toCurrency':
+                if (attrs.get('currencypattern')) {
+                    colExpression = `{{${columnValue} | toCurrency: '${attrs.get('currencypattern')}`;
+                    if (attrs.get('fractionsize')) {
+                        colExpression += `': ${attrs.get('fractionsize')}}}`;
+                    }
+                    else {
+                        colExpression += `'}}`;
+                    }
+                }
+                break;
+            case 'numberToString':
+                if (attrs.get('fractionsize')) {
+                    colExpression = `{{${columnValue} | numberToString: '${attrs.get('fractionsize')}'}}`;
+                }
+                break;
+            case 'stringToNumber':
+                colExpression = `{{${columnValue} | stringToNumber}}`;
+                break;
+            case 'timeFromNow':
+                colExpression = `{{${columnValue} | timeFromNow}}`;
+                break;
+            case 'prefix':
+                if (attrs.get('prefix')) {
+                    colExpression = `{{${columnValue} | prefix: '${attrs.get('prefix')}'}}`;
+                }
+                break;
+            case 'suffix':
+                if (attrs.get('suffix')) {
+                    colExpression = `{{${columnValue} | suffix: '${attrs.get('suffix')}'}}`;
+                }
+                break;
+            default:
+                if (core.checkIsCustomPipeExpression(formatPattern)) {
+                    colExpression = `{{${columnValue} |  ${formatPattern} : ${`row`}}}`;
+                }
+                break;
+        }
+        return colExpression;
+    };
+    transpiler.register('wm-table-column', () => {
+        return {
+            requires: ['wm-table'],
+            template: (node, shared) => {
+                if (node.children.length) {
+                    // If node has children, but an empty text node dont generate custom expression
+                    if (node.children.length === 1 && node.children[0] instanceof compiler.Text && node.children[0].value.trim().length === 0) {
+                        return;
+                    }
+                    shared.set('customExpression', true);
+                    addNgModelStandalone(node.children);
+                }
+            },
+            pre: (attrs, shared, parentTable) => {
+                let rowFilterTmpl = '';
+                let inlineEditTmpl = '';
+                let inlineNewEditTmpl = '';
+                let parentForm = '';
+                if (parentTable) {
+                    const pCounter = parentTable.get('table_reference');
+                    rowFilterTmpl = (parentTable.get('filtermode') === 'multicolumn' && attrs.get('searchable') !== 'false') ? getFilterTemplate(attrs, pCounter) : '';
+                    const editMode = parentTable.get('editmode');
+                    const isInlineEdit = (editMode !== EDIT_MODE.DIALOG && editMode !== EDIT_MODE.FORM && attrs.get('readonly') !== 'true');
+                    inlineEditTmpl = isInlineEdit ? getInlineEditWidgetTmpl(attrs, false, parentTable.get('errorstyle'), pCounter) : '';
+                    inlineNewEditTmpl = isInlineEdit && editMode === EDIT_MODE.QUICK_EDIT && parentTable.get('shownewrow') !== 'false' ? getInlineEditWidgetTmpl(attrs, true, attrs.get('errorstyle')) : '';
+                    parentForm = ` [formGroup]="${pCounter}.ngform" `;
+                }
+                const formatPattern = attrs.get('formatpattern');
+                const customExpr = `<ng-template #customExprTmpl let-row="row" let-colDef="colDef" let-editRow="editRow" let-deleteRow="deleteRow" let-addNewRow="addNewRow">`;
+                let customExprTmpl = '';
+                let formatExprTmpl = '';
+                if (shared.get('customExpression')) {
+                    attrs.set('customExpression', 'true');
+                    customExprTmpl = `${customExpr}<div data-col-identifier="${attrs.get('binding')}">`;
+                }
+                else if ((formatPattern && formatPattern !== 'None') || core.isDateTimeType(attrs.get('type'))) {
+                    formatExprTmpl = getFormatExpression(attrs);
+                    if (formatExprTmpl) {
+                        shared.set('customExpression', true);
+                        attrs.set('customExpression', 'true');
+                        customExprTmpl = `${customExpr}<div data-col-identifier="${attrs.get('binding')}" title="${formatExprTmpl}">${formatExprTmpl}`;
+                    }
+                }
+                return `<${tagName$8} wmTableColumn ${transpiler.getAttrMarkup(attrs)} ${parentForm}>
+                    ${rowFilterTmpl}
+                    ${inlineEditTmpl}
+                    ${inlineNewEditTmpl}
+                    ${customExprTmpl}`;
+            },
+            post: (attrs, shared) => {
+                let customExprTmpl = '';
+                if (shared.get('customExpression')) {
+                    customExprTmpl = `</div></ng-template>`;
+                }
+                return `${customExprTmpl}</${tagName$8}>`;
+            },
+            imports: (attrs) => {
+                const editWidgetType = attrs.get('edit-widget-type');
+                const filterWidgetType = attrs.get('filterwidget') || getDataTableFilterWidget(attrs.get('type') || core.DataType.STRING);
+                const formatpattern = attrs.get('custompipeformat') || attrs.get('formatpattern');
+                let pipeImports = [];
+                if (!!formatpattern) {
+                    if (core.checkIsCustomPipeExpression(formatpattern)) {
+                        pipeImports.push('custom');
+                    }
+                    else {
+                        pipeImports.push(formatpattern);
+                    }
+                }
+                return [core.getRequiredFormWidget(editWidgetType), core.getRequiredFormWidget(filterWidgetType), 'wm-table', ...pipeImports];
+            }
+        };
+    });
+    var tableColumn_build = () => { };
+
+    var tableColumn_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: tableColumn_build
+    });
+
+    const tagName$7 = 'div';
+    const getRowExpansionActionTmpl = (attrs) => {
+        const tag = attrs.get('widget-type') === 'anchor' ? 'a' : 'button';
+        const directive = attrs.get('widget-type') === 'anchor' ? 'wmAnchor' : 'wmButton';
+        const title = attrs.get('expandtitle') || attrs.get('display-name') || 'Collapse/Expand';
+        return `<ng-template #rowExpansionActionTmpl let-row="row">
+               <${tag} ${directive}
+                    title="${title}"
+                    ${core.getRowActionAttrs(attrs)}
+                    class="${attrs.get('class')} row-expansion-button"
+                    iconclass="${attrs.get('collapseicon')}"
+                    type="button" aria-label="${title}"></${tag}>
+            </ng-template>`;
+    };
+    transpiler.register('wm-table-row', () => {
+        return {
+            pre: (attrs) => {
+                return `<${tagName$7} wmTableRow ${transpiler.getAttrMarkup(attrs)}>
+                    ${getRowExpansionActionTmpl(attrs)}
+                    <ng-template #rowExpansionTmpl let-row="row" let-rowDef="rowDef" let-containerLoad="containerLoad">
+                        <div wmContainer partialContainer content.bind="rowDef.content" load.event="containerLoad(widget)"
+                            [ngStyle]="{'height': rowDef.height, 'overflow-y': 'auto'}">
+                        @for (param of rowDef.partialParams | keyvalue; track param) {
+                         <div wmParam hidden
+                            [name]="param.key" [value]="param.value"></div>
+                        }`;
+            },
+            post: () => `</div></ng-template></${tagName$7}>`
+        };
+    });
+    var tableRow_build = () => { };
+
+    var tableRow_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: tableRow_build
+    });
+
+    const tagName$6 = 'div';
+    const getSaveCancelTemplate = () => {
+        return `<button type="button" aria-label="Save edit icon" class="save row-action-button btn app-button btn-transparent save-edit-row-button hidden" title="{{appLocale?.LABEL_SAVE || 'Save'}}">
+                <i class="wi wi-done" aria-hidden="true"></i>
+            </button>
+            <button type="button" aria-label="Cancel edit icon" class="cancel row-action-button btn app-button btn-transparent cancel-edit-row-button hidden" title="{{appLocale?.LABEL_CANCEL || 'Cancel'}}">
+                <i class="wi wi-cancel" aria-hidden="true"></i>
+            </button>`;
+    };
+    // get the inline widget template
+    const getRowActionTmpl = (attrs) => {
+        const action = attrs.get('action');
+        const actionTmpl = action ? ` click.event.delayed="${action}" ` : '';
+        const saveCancelTmpl = action && action.includes('editRow(') ? getSaveCancelTemplate() : '';
+        const btnClass = action ? (action.includes('editRow(') ? 'edit edit-row-button' :
+            (action.includes('deleteRow(') ? 'delete delete-row-button' : '')) : '';
+        const tabIndex = attrs.get('tabindex') ? `tabindex="${attrs.get('tabindex')}"` : '';
+        const tag = attrs.get('widget-type') === 'anchor' ? 'a' : 'button';
+        const directive = attrs.get('widget-type') === 'anchor' ? 'wmAnchor' : 'wmButton';
+        return `<ng-template #rowActionTmpl let-row="row">
+               <${tag} ${directive} data-action-key="${attrs.get('key')}"
+                    ${core.getRowActionAttrs(attrs)}
+                    class="row-action row-action-button ${attrs.get('class')} ${btnClass}"
+                    iconclass="${attrs.get('iconclass')}"
+                    ${actionTmpl}
+                    ${tabIndex}
+                    type="button"></${tag}>
+                ${saveCancelTmpl}
+            </ng-template>`;
+    };
+    transpiler.register('wm-table-row-action', () => {
+        return {
+            pre: attrs => `<${tagName$6} wmTableRowAction ${transpiler.getAttrMarkup(attrs)}>
+                        ${getRowActionTmpl(attrs)}`,
+            post: () => `</${tagName$6}>`
+        };
+    });
+    var tableRowAction_build = () => { };
+
+    var tableRowAction_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: tableRowAction_build
+    });
+
+    const tagName$5 = 'div';
+    const dataSetKey = 'dataset';
+    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
+     * as specified in the configuration.
+     * Scenario: ordering the columns when accessrole is specified on column.
+     *
+     * headerIndex:    ID  |      Name        |   Street  |  ==> top level header (ID has index 0, Name 1, Street 2)
+     * index:         ---- |  fname | lname    |   ---    |  ==> sub level header ( ID 0, fname 1, lname 2, Street 3)
+     * fname will have headerIndex as 1 and colIndex as 1. lname will have headerIndex as 1 and columnIndex as 2.
+     * If suppose we have a group in the sub-level-header, then col index will be treated as the header index.
+     *
+     */
+    function assignColumnIndex(node, parentIndex) {
+        let headerIndex = 0;
+        node.forEach((childNode) => {
+            const nodeName = childNode.name;
+            const newheaderIndex = parentIndex !== undefined ? parentIndex : headerIndex;
+            if (nodeName === 'wm-table-column' || nodeName === 'wm-table-column-group') {
+                childNode.attrs.push(new compiler.Attribute('index', '' + columnIndex, 1, 1, 1, undefined, undefined));
+                childNode.attrs.push(new compiler.Attribute('headerIndex', '' + newheaderIndex, 1, 1, 1, undefined, undefined));
+                if (nodeName === 'wm-table-column-group') {
+                    assignColumnIndex(childNode.children, headerIndex);
+                }
+                columnIndex++;
+                headerIndex++;
+            }
+        });
+    }
+    transpiler.register('wm-table', () => {
+        return {
+            template: (node, shared) => {
+                // If table does not have child columns, set isdynamictable to true
+                if (node.children.length) {
+                    const isColumnsPresent = node.children.some(childNode => {
+                        return childNode.name === 'wm-table-column' || childNode.name === 'wm-table-column-group';
+                    });
+                    assignColumnIndex(node.children);
+                    shared.set('isdynamictable', isColumnsPresent ? 'false' : 'true');
+                    // If table have row expansion enabled, set isrowexpansionenabled to true
+                    const isRowsPresent = node.children.some(childNode => {
+                        return childNode.name === 'wm-table-row';
+                    });
+                    shared.set('isrowexpansionenabled', isRowsPresent ? 'true' : 'false');
+                }
+                else {
+                    shared.set('isdynamictable', 'true');
+                }
+                const datasetAttr = node.attrs.find(attr => attr.name === dataSetKey);
+                const widgetNameAttr = node.attrs.find(attr => attr.name === 'name');
+                if (!datasetAttr) {
+                    return;
+                }
+                const boundExpr = transpiler.getBoundToExpr(datasetAttr.value);
+                if (!boundExpr) {
+                    return;
+                }
+                core.updateTemplateAttrs(node, boundExpr, widgetNameAttr.value, '', 'row');
+            },
+            pre: (attrs, shared) => {
+                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$5} wmTable="${counter}" wmTableFilterSort wmTableCUD #${counter} data-identifier="table" ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$5}>`,
+            provide: (attrs, shared) => {
+                const provider = new Map();
+                provider.set('table_reference', shared.get('counter'));
+                provider.set('filtermode', attrs.get('filtermode'));
+                provider.set('errorstyle', attrs.get('errorstyle'));
+                provider.set('editmode', attrs.get('editmode'));
+                provider.set('shownewrow', attrs.get('shownewrow'));
+                return provider;
+            }
+        };
+    });
+    var table_build = () => { };
+
+    var table_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: table_build
+    });
+
+    const tagName$4 = 'div';
+    transpiler.register('wm-video', () => {
+        return {
+            pre: attrs => `<${tagName$4} wmVideo ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$4}>`
+        };
+    });
+    var video_build = () => { };
+
+    var video_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: video_build
+    });
+
+    const tagName$3 = 'div';
+    const SPACING_KEY = 'parentLinearLayout.spacing';
+    transpiler.register('wm-linearlayout', () => {
+        return {
+            requires: ['wm-linearlayout'],
+            pre: (attrs, shared, provider) => {
+                let spacing = attrs.get('spacing');
+                attrs.set('spacing', (!spacing || spacing === '0') && provider ? provider.get(SPACING_KEY) : spacing);
+                return `<${tagName$3} wmLinearLayout ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$3}>`,
+            provide: (attrs, shared) => {
+                const provider = new Map();
+                provider.set(SPACING_KEY, attrs.get('spacing'));
+                return provider;
+            }
+        };
+    });
+    var linearLayout_build = () => { };
+
+    var linearLayout_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: linearLayout_build
+    });
+
+    const tagName$2 = 'div';
+    transpiler.register('wm-linearlayoutitem', () => {
+        return {
+            pre: attrs => `<${tagName$2} wmLinearLayoutItem ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName$2}>`
+        };
+    });
+    var linearLayoutItem_build = () => { };
+
+    var linearLayoutItem_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: linearLayoutItem_build
+    });
+
+    const tagName$1 = 'div';
+    const idGen = new core.IDGenerator('wm_custom_widget');
+    transpiler.register('wm-custom-widget', () => {
+        return {
+            pre: (attrs) => {
+                const counter = idGen.nextUid();
+                return `<${tagName$1} wmWidgetContainer customWidgetContainer #${counter}="wmWidgetContainer" ${transpiler.getAttrMarkup(attrs)}>`;
+            },
+            post: () => `</${tagName$1}>`
+        };
+    });
+    var customWidgetContainer_build = () => { };
+
+    var customWidgetContainer_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: customWidgetContainer_build
+    });
+
+    const tagName = 'section';
+    const noSpan = {};
+    const createElement = name => {
+        return new compiler.Element(name, [], [], noSpan, noSpan, noSpan);
+    };
+    transpiler.register('wm-custom-widget-container', () => {
+        return {
+            template: (node) => {
+                const conditionalNode = createElement('ng-container');
+                // addAtrribute(conditionalNode, '*ngIf', 'compileContent');
+                conditionalNode.children = conditionalNode.children.concat(node.children);
+                node.children.length = 0;
+                node.children.push(conditionalNode);
+            },
+            pre: attrs => `<${tagName} wmCustomWidget data-role="widget" ${transpiler.getAttrMarkup(attrs)}>`,
+            post: () => `</${tagName}>`
+        };
+    });
+    var customWidgetWrapper_build = () => { };
+
+    var customWidgetWrapper_build$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: customWidgetWrapper_build
+    });
+
+    const initComponentsBuildTask = () => { };
+
+    exports.accordionBuild = accordion_build$1;
+    exports.accordionPaneBuild = accordionPane_build$1;
+    exports.alertDlgBuild = alertDialog_build$1;
+    exports.anchorBuild = anchor_build$1;
+    exports.audioBuild = audio_build$1;
+    exports.barcodeScannerBuild = barcodeScanner_build$1;
+    exports.breadcrumbBuild = breadcrumb_build$1;
+    exports.buttonBuild = button_build$1;
+    exports.buttonGroupBuild = buttonGroup_build$1;
+    exports.calendarBuild = calendar_build$1;
+    exports.cameraBuild = camera_build$1;
+    exports.cardActionsBuild = cardActions_build$1;
+    exports.cardBuild = card_build$1;
+    exports.cardContentBuild = cardContent_build$1;
+    exports.cardFooterBuild = cardFooter_build$1;
+    exports.carouselBuild = carousel_build$1;
+    exports.carouselTemplateBuild = carouselTemplate_build$1;
+    exports.chartBuild = chart_build$1;
+    exports.checkboxBuild = checkbox_build$1;
+    exports.checkboxSetBuild = checkboxset_build$1;
+    exports.chipsBuild = chips_build$1;
+    exports.colorPickerBuild = colorPicker_build$1;
+    exports.compositeBuild = composite_build$1;
+    exports.confirmDlgBuild = confirmDialog_build$1;
+    exports.containerBuild = container_build$1;
+    exports.contentBuild = content_build$1;
+    exports.currencyBuild = currency_build$1;
+    exports.customWidgetBuild = customWidgetContainer_build$1;
+    exports.customWidgetWrapperBuild = customWidgetWrapper_build$1;
+    exports.dateBuild = date_build$1;
+    exports.dateTimeBuild = dateTime_build$1;
+    exports.dlgBuild = dialog_build$1;
+    exports.dlgFooterBuild = dialogFooter_build$1;
+    exports.fileUploadBuild = fileUpload_build$1;
+    exports.footerBuild = footer_build$1;
+    exports.formActionBuild = formAction_build$1;
+    exports.formBuild = form_build$1;
+    exports.formFieldBuild = formField_build$1;
+    exports.headerBuild = header_build$1;
+    exports.htmlBuild = html_build$1;
+    exports.iconBuild = icon_build$1;
+    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;
+    exports.lgrowBuild = layoutGridRow_build$1;
+    exports.linearLayoutBuild = linearLayout_build$1;
+    exports.linearLayoutItemBuild = linearLayoutItem_build$1;
+    exports.listBuild = list_build$1;
+    exports.liveTableBuild = liveTable_build$1;
+    exports.loginBuild = login_build$1;
+    exports.loginDlgBuild = loginDialog_build$1;
+    exports.marqueeBuild = marquee_build$1;
+    exports.mediaListBuild = mediaList_build$1;
+    exports.mediaListItemBuild = mediaListItem_build$1;
+    exports.menuBuild = menu_build$1;
+    exports.messageBuild = message_build$1;
+    exports.mobileNavbarBuild = mobileNavbar_build$1;
+    exports.navBuild = nav_build$1;
+    exports.navItemBuild = navItem_build$1;
+    exports.navbarBuild = navbar_build$1;
+    exports.numberBuild = number_build$1;
+    exports.pageBuild = page_build$1;
+    exports.pageContentBuild = pageContent_build$1;
+    exports.paginationBuild = pagination_build$1;
+    exports.panelBuild = panel_build$1;
+    exports.partialBuild = partial_build$1;
+    exports.partialDlgBuild = partialDialog_build$1;
+    exports.partialParamBuild = partialParam_build$1;
+    exports.pictureBuild = picture_build$1;
+    exports.popoverBuild = popover_build$1;
+    exports.prefabBuild = prefab_build$1;
+    exports.prefabContainerBuild = prefabContainer_build$1;
+    exports.progressBarBuild = progressBar_build$1;
+    exports.progressCircleBuild = progressCircle_build$1;
+    exports.radiosetBuild = radioset_build$1;
+    exports.ratingBuild = rating_build$1;
+    exports.repeatTemplateBuild = repeatTemplate_build$1;
+    exports.rightPanelBuild = rightPanel_build$1;
+    exports.routerOutletBuild = routerOutlet_build$1;
+    exports.rteBuild = richTextEditor_build$1;
+    exports.searchBuild = search_build$1;
+    exports.segContentBuild = segmentContent_build$1;
+    exports.segControlBuild = segmentedControl_build$1;
+    exports.selectBuild = select_build$1;
+    exports.sliderBuild = slider_build$1;
+    exports.spinnerBuild = spinner_build$1;
+    exports.switchBuild = switch_build$1;
+    exports.tabBarBuild = tabBar_build$1;
+    exports.tabPaneBuild = tabPane_build$1;
+    exports.tableActionBuild = tableAction_build$1;
+    exports.tableBuild = table_build$1;
+    exports.tableColumnBuild = tableColumn_build$1;
+    exports.tableColumnGroupBuild = tableColumnGroup_build$1;
+    exports.tableRowActionBuild = tableRowAction_build$1;
+    exports.tableRowBuild = tableRow_build$1;
+    exports.tabsBuild = tabs_build$1;
+    exports.textAreaBuild = textarea_build$1;
+    exports.textBuild = text_build$1;
+    exports.tileBuild = tile_build$1;
+    exports.timeBuild = time_build$1;
+    exports.topNavBuild = topNav_build$1;
+    exports.treeBuild = tree_build;
+    exports.videoBuild = video_build$1;
+    exports.wizardActionBuild = wizardAction_build$1;
+    exports.wizardBuild = wizard_build$1;
+    exports.wizardStepBuild = wizardStep_build$1;
+    Object.keys(transpiler).forEach(function (k) {
+        if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+            enumerable: true,
+            get: function () { return transpiler[k]; }
+        });
+    });
+
+}));