@wavemaker/app-ng-runtime 11.10.5-rc.6100 → 11.11.0-rc.209

package/build-task/fesm2022/index.mjs

@@ -1,18 +1,18 @@
 import { register, getAttrMarkup, getBoundToExpr, getFormMarkupAttr, getDataSource, getChildAttrs, setChildAttrs, clearChildAttrs } from '@wm/transpiler';
 export * from '@wm/transpiler';
-import { IDGenerator, updateTemplateAttrs, getNgModelAttr, FormWidgetType, DataType, getFormWidgetTemplate, isMobileApp, generateGUId, getRequiredFormWidget, isDateTimeType, checkIsCustomPipeExpression, getRowActionAttrs } from '@wm/core';
+import { IDGenerator, updateTemplateAttrs, getNgModelAttr, FormWidgetType, DataType, getFormWidgetTemplate, generateGUId, getRequiredFormWidget, isDateTimeType, checkIsCustomPipeExpression, getRowActionAttrs } from '@wm/core';
 import { Attribute, Element, Text } from '@angular/compiler';
 import { forEach } from 'lodash-es';
 
 const carouselTagName = 'carousel';
-const dataSetKey$5 = 'dataset';
-const idGen$u = new IDGenerator('wm_carousel_ref_');
+const dataSetKey$6 = 'dataset';
+const idGen$v = new IDGenerator('wm_carousel_ref_');
 const isDynamicCarousel = node => node.attrs.find(attr => attr.name === 'type' && attr.value === 'dynamic');
 register('wm-carousel', () => {
     return {
         pre: (attrs, shared) => {
             // generating unique Id for the carousel
-            const counter = idGen$u.nextUid();
+            const counter = idGen$v.nextUid();
             let style;
             if (attrs?.get('height')?.endsWith('%')) {
                 style = `height:${parseInt(attrs.get('height'), 10)}vh`;
@@ -25,7 +25,7 @@ register('wm-carousel', () => {
         template: (node) => {
             // check if the carousel is dynamic
             if (isDynamicCarousel(node)) {
-                const datasetAttr = node.attrs.find(attr => attr.name === dataSetKey$5);
+                const datasetAttr = node.attrs.find(attr => attr.name === dataSetKey$6);
                 const widgetNameAttr = node.attrs.find(attr => attr.name === 'name');
                 if (!datasetAttr) {
                     return;
@@ -67,14 +67,14 @@ register('wm-carousel-template', () => {
         requires: ['wm-carousel'],
         pre: (attrs, shared, parentCarousel) => {
             const carouselRef = parentCarousel.get('carousel_ref');
-            return `<div *ngIf="!${carouselRef}.fieldDefs">{{${carouselRef}.nodatamessage}}</div>
-                     <ng-container *ngFor="let item of ${carouselRef}.fieldDefs; let i = index;">
-                    <${carouselContentTagName} wmCarouselTemplate #carouselTemplateRef="carouselTemplateRef" ${getAttrMarkup(attrs)}>
+            return `@if(!${carouselRef}.fieldDefs){<div >{{${carouselRef}.nodatamessage}}</div>}
+                    @for (item of ${carouselRef}.fieldDefs; track item; let i = $index) {
+                        <${carouselContentTagName} wmCarouselTemplate #carouselTemplateRef="carouselTemplateRef" ${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-container>
+                        [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>`
@@ -121,11 +121,11 @@ var marquee_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1D = 'a';
-const idGen$t = new IDGenerator('wm_anchor');
+const idGen$u = new IDGenerator('wm_anchor');
 register('wm-anchor', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$t.nextUid();
+            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" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$1D}>`
@@ -153,11 +153,11 @@ var audio_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1B = 'div';
-const idGen$s = new IDGenerator('wm_html');
+const idGen$t = new IDGenerator('wm_html');
 register('wm-html', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$s.nextUid();
+            const counter = idGen$t.nextUid();
             return `<${tagName$1B} wmHtml #${counter}="wmHtml" role="application" [attr.aria-label]="${counter}.arialabel || 'HTML content'" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$1B}>`
@@ -199,7 +199,7 @@ var iframe_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 let tagName$1y = 'p';
-const idGen$r = new IDGenerator('wm_label');
+const idGen$s = new IDGenerator('wm_label');
 register('wm-label', () => {
     return {
         pre: (attrs) => {
@@ -213,7 +213,7 @@ register('wm-label', () => {
             else {
                 tagName$1y = 'label';
             }
-            const counter = idGen$r.nextUid();
+            const counter = idGen$s.nextUid();
             return `<${tagName$1y} wmLabel #${counter}="wmLabel" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$1y}>`
@@ -227,11 +227,11 @@ var label_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1x = 'img';
-const idGen$q = new IDGenerator('wm_picture');
+const idGen$r = new IDGenerator('wm_picture');
 register('wm-picture', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$q.nextUid();
+            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'" ${getAttrMarkup(attrs)}>`;
         }
     };
@@ -244,11 +244,11 @@ var picture_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1w = 'div';
-const idGen$p = new IDGenerator('wm_spinner');
+const idGen$q = new IDGenerator('wm_spinner');
 register('wm-spinner', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$p.nextUid();
+            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" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$1w}>`
@@ -301,11 +301,11 @@ var progressBar_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1u = 'div';
-const idGen$o = new IDGenerator('wm_progress_circle');
+const idGen$p = new IDGenerator('wm_progress_circle');
 register('wm-progress-circle', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$o.nextUid();
+            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" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$1u}>`
@@ -319,11 +319,11 @@ var progressCircle_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1t = 'div';
-const idGen$n = new IDGenerator('wm_richtexteditor');
+const idGen$o = new IDGenerator('wm_richtexteditor');
 register('wm-richtexteditor', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$n.nextUid();
+            const counter = idGen$o.nextUid();
             return `<${tagName$1t} wmRichTextEditor #${counter}="wmRichTextEditor" role="textbox" [attr.aria-label]="${counter}.arialabel || 'Richtext editor'" ${getFormMarkupAttr(attrs)}>`;
         },
         post: () => `</${tagName$1t}>`
@@ -433,14 +433,14 @@ var chart_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1l = 'div';
-const dataSetKey$4 = 'dataset';
-const idGen$m = new IDGenerator('wm_accordion_ref_');
+const dataSetKey$5 = 'dataset';
+const idGen$n = new IDGenerator('wm_accordion_ref_');
 const isDynamicAccordion = node => node.attrs.find(attr => attr.name === 'type' && attr.value === 'dynamic');
 register('wm-accordion', () => {
     return {
         pre: (attrs, shared) => {
             // generating unique Id for the accordion
-            const counter = idGen$m.nextUid();
+            const counter = idGen$n.nextUid();
             shared.set('accordion_ref', counter);
             return `<${tagName$1l} wmAccordion #${counter}="wmAccordion" ${getAttrMarkup(attrs)}>`;
         },
@@ -448,7 +448,7 @@ register('wm-accordion', () => {
         template: (node, shared) => {
             // check if the accordion is dynamic
             if (isDynamicAccordion(node)) {
-                const datasetAttr = node.attrs.find(attr => attr.name === dataSetKey$4);
+                const datasetAttr = node.attrs.find(attr => attr.name === dataSetKey$5);
                 const widgetNameAttr = node.attrs.find(attr => attr.name === 'name');
                 if (!datasetAttr) {
                     return;
@@ -476,11 +476,11 @@ var accordion_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1k = 'div';
-const idGen$l = new IDGenerator('wm_accordionpane');
+const idGen$m = new IDGenerator('wm_accordionpane');
 register('wm-accordionpane', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$l.nextUid();
+            const counter = idGen$m.nextUid();
             return `<${tagName$1k} #${counter}="wmAccordionPane" wmAccordionPane partialContainer wm-navigable-element="true" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$1k}>`
@@ -550,11 +550,11 @@ var layoutGrid_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1f = 'div';
-const idGen$k = new IDGenerator('wm_panel');
+const idGen$l = new IDGenerator('wm_panel');
 register('wm-panel', () => {
     return {
         pre: (attrs) => {
-            const counter = idGen$k.nextUid();
+            const counter = idGen$l.nextUid();
             return `<${tagName$1f} wmPanel #${counter}="wmPanel" partialContainer wm-navigable-element="true" ${getAttrMarkup(attrs)}>`;
         },
         post: () => `</${tagName$1f}>`
@@ -606,11 +606,11 @@ let counter = 1;
 // For dynamic accordion panes/tab panes
 register('wm-repeat-template', () => {
     return {
-        requires: ['wm-accordion', 'wm-tabs'],
-        pre: (attrs, shared, parentAccordion, parentTab) => {
-            const widgetRef = (parentAccordion && parentAccordion.get('accordion_ref')) || (parentTab && parentTab.get('tabs_ref'));
+        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 `<div *ngIf="${widgetRef}.fieldDefs && !${widgetRef}.fieldDefs.length">{{${widgetRef}.nodatamessage}}</div>
+                return `@if(${widgetRef}.fieldDefs && !${widgetRef}.fieldDefs.length){<div>{{${widgetRef}.nodatamessage}}</div>}
                     <${dynamicTemplateTagName} wmRepeatTemplate #repeatItemRef="repeatItemRef" ${getAttrMarkup(attrs)} *ngFor="let item of ${widgetRef}.fieldDefs; let i = index;">
                         <ng-container [ngTemplateOutlet]="widgetRef${counter}"
                             [ngTemplateOutletContext]="{item:item, index:i}"
@@ -630,14 +630,14 @@ var repeatTemplate_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$1c = 'div';
-const dataSetKey$3 = 'dataset';
-const idGen$j = new IDGenerator('wm_tabs_ref_');
+const dataSetKey$4 = 'dataset';
+const idGen$k = new IDGenerator('wm_tabs_ref_');
 const isDynamicTabs = node => node.attrs.find(attr => attr.name === 'type' && attr.value === 'dynamic');
 register('wm-tabs', () => {
     return {
         pre: (attrs, shared) => {
             // generating unique Id for the tabs
-            const counter = idGen$j.nextUid();
+            const counter = idGen$k.nextUid();
             shared.set('tabs_ref', counter);
             return `<${tagName$1c} wmTabs #${counter}="wmTabs" ${getAttrMarkup(attrs)}>`;
         },
@@ -645,7 +645,7 @@ register('wm-tabs', () => {
         template: (node, shared) => {
             // check if the tab widget is dynamic
             if (isDynamicTabs(node)) {
-                const datasetAttr = node.attrs.find(attr => attr.name === dataSetKey$3);
+                const datasetAttr = node.attrs.find(attr => attr.name === dataSetKey$4);
                 const widgetNameAttr = node.attrs.find(attr => attr.name === 'name');
                 if (!datasetAttr) {
                     return;
@@ -701,10 +701,38 @@ var tile_build$1 = /*#__PURE__*/Object.freeze({
 });
 
 const tagName$19 = 'div';
+const dataSetKey$3 = 'dataset';
+const idGen$j = new IDGenerator('wm_wizard_ref_');
+const isDynamicWizard = node => node.attrs.find(attr => attr.name === 'type' && attr.value === 'dynamic');
 register('wm-wizard', () => {
     return {
-        pre: attrs => `<${tagName$19} wmWizard ${getAttrMarkup(attrs)}>`,
-        post: () => `</${tagName$19}>`
+        pre: (attrs, shared) => {
+            const counter = idGen$j.nextUid();
+            shared.set('wizard_ref', counter);
+            return `<${tagName$19} wmWizard #${counter}="wmWizard" ${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 = getBoundToExpr(datasetAttr.value);
+                if (!boundExpr) {
+                    return;
+                }
+                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 = () => { };
@@ -720,7 +748,7 @@ register('wm-wizardstep', () => {
     return {
         pre: attrs => {
             const counter = idGen$i.nextUid();
-            return `<${tagName$18} wmWizardStep #${counter}="wmWizardStep" ${getAttrMarkup(attrs)}>
+            return `<${tagName$18} wmWizardStep partialContainer #${counter}="wmWizardStep" ${getAttrMarkup(attrs)}>
                        <ng-template [ngIf]="${counter}.isInitialized">`;
         },
         post: () => `</ng-template></${tagName$18}>`
@@ -1059,7 +1087,7 @@ const getTemplate = (attrs, widgetType, eventsTmpl, counter, pCounter, isInList)
     if (!isRange) {
         return getWidgetTemplate(attrs, { widgetType, eventsTmpl, counter, pCounter, isInList });
     }
-    const layoutClass = isMobileApp() ? 'col-xs-6' : 'col-sm-6';
+    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>`;
 };
@@ -1101,11 +1129,12 @@ const registerFormField = (isFormField) => {
             const widgetType = attrs.get('widget') || FormWidgetType.TEXT;
             const dataRole = isFormField ? 'form-field' : 'filter-field';
             const formFieldErrorMsgId = 'wmform-field-error-' + generateGUId();
-            const validationMsg = `<p *ngIf="${counter}._control?.invalid && ${counter}._control?.touched && ${pCounter}.isUpdateMode"
-                                   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 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 === FormWidgetType.UPLOAD ? '' : getEventsTemplate(attrs);
-            const controlLayout = isMobileApp() ? 'col-xs-12' : 'col-sm-12';
+            const controlLayout = 'col-sm-12';
             const isInList = pCounter === (parentList && parentList.get('parent_form_reference'));
             attrs.set('__validationId', formFieldErrorMsgId);
             attrs.set('__widgetType', widgetType);
@@ -1127,9 +1156,8 @@ const registerFormField = (isFormField) => {
                                  <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)}
-                                <span aria-hidden="true" *ngIf="${counter}.showPendingSpinner" class="form-field-spinner fa fa-circle-o-notch fa-spin form-control-feedback"></span>
-                                <p *ngIf="!(${counter}._control?.invalid && ${counter}._control?.touched) && ${pCounter}.isUpdateMode"
-                                   class="help-block" aria-hidden="true" role="alert" aria-live="polite" [textContent]="${counter}.hint"></p>
+                                @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>`;
@@ -2008,12 +2036,6 @@ register('wm-page', () => {
                 conditionalNode.children = conditionalNode.children.concat(pageContentNode.children);
                 conditionalNode.children.push(new Text('{{onPageContentReady()}}', null, undefined, undefined));
                 pageContentNode.children = [conditionalNode];
-                if (isMobileApp()) {
-                    const loader = createElement$4('div');
-                    addAtrribute$4(loader, 'wmPageContentLoader', '');
-                    addAtrribute$4(loader, '*ngIf', '!showPageContent');
-                    pageContentNode.children.push(loader);
-                }
             }
         },
         pre: (attrs) => {
@@ -2418,18 +2440,21 @@ const getFilterTemplate = (attrs, pCounter) => {
     return `<ng-template #filterTmpl let-changeFn="changeFn" let-isDisabled="isDisabled">
     <div class="input-group ${widget}" data-col-identifier="${fieldName}">
         ${widgetTmpl}
-        <span class="input-group-addon filter-clear-icon" *ngIf="${pCounter}.showClearIcon('${fieldName}')">
+        @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>
-                   <li *ngFor="let matchMode of ${pCounter}.matchModeTypesMap['${type}']"
-                        [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>
+                    @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>`;
@@ -2488,12 +2513,14 @@ const getInlineEditWidgetTmpl = (attrs, isNewRow, errorstyle, pCounter) => {
     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 = '<span class="sr-only" *ngIf="getValidationMessage()">{{getValidationMessage()}}</span>';
+    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}
-                     <div class="overlay" *ngIf="${pendingSpinnerStatus}()"><span aria-hidden="true" class="form-field-spinner fa fa-circle-o-notch fa-spin form-control-feedback"></span></div>
+                    @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>`;
@@ -2502,13 +2529,12 @@ const getValiationErrorTemplate = (errorTmplType) => {
     let validationErrorTmpl = '';
     switch (errorTmplType) {
         case 'bottom':
-            validationErrorTmpl = `<span class="help-block text-danger" *ngIf="getValidationMessage() && getControl() && getControl().invalid && getControl().touched">{{getValidationMessage()}}</span>`;
+            validationErrorTmpl = `@if(getValidationMessage() && getControl() && getControl().invalid && getControl().touched){<span class="help-block text-danger" >{{getValidationMessage()}}</span>}`;
             break;
         case 'hover':
         default:
-            validationErrorTmpl = `<span placement="top" container="body" tooltip="{{getValidationMessage()}}" class="text-danger wi wi-error"
-                                        *ngIf="getValidationMessage() && getControl() && getControl().invalid && getControl().touched">
-                                    </span>`;
+            validationErrorTmpl = `@if(getValidationMessage() && getControl() && getControl().invalid && getControl().touched){<span placement="top" container="body" tooltip="{{getValidationMessage()}}" class="text-danger wi wi-error">
+                                    </span>}`;
     }
     return validationErrorTmpl;
 };