@wavemaker/app-ng-runtime 11.5.2-rc.5436 → 11.5.3-next.26259

app-ng-runtime/components/input/default/bundles/index.umd.js

@@ -2,7 +2,7 @@
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('angular-imask'), require('@wm/components/base'), require('@wm/core'), require('rxjs')) :
   typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/forms', 'angular-imask', '@wm/components/base', '@wm/core', 'rxjs'], factory) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.input = {}), global.ng.core, global.ng.common, global.ng.forms, global.angularIMask, global.wm.components.base, global.wm.core, global.rxjs));
-})(this, (function (exports, i0, i1, i1$1, i2$1, i2, i1$2, rxjs) { 'use strict';
+})(this, (function (exports, i0, i1, i2$1, i3, i2, i1$1, rxjs) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -23,10 +23,10 @@
 
   var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
   var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
-  var i1$1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1$1);
   var i2$1__namespace = /*#__PURE__*/_interopNamespaceDefault(i2$1);
+  var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
   var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
-  var i1$2__namespace = /*#__PURE__*/_interopNamespaceDefault(i1$2);
+  var i1$1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1$1);
 
   const registerProps$e = () => {
       i2.register('wm-button', new Map([
@@ -239,7 +239,7 @@
       updateBoundVariable(value) {
           let binddatavalue = this.binddatavalue;
           // return if the variable bound is not static.
-          if (this.datavaluesource && this.datavaluesource.execute(i1$2.DataSource.Operation.IS_API_AWARE)) {
+          if (this.datavaluesource && this.datavaluesource.execute(i1$1.DataSource.Operation.IS_API_AWARE)) {
               return;
           }
           else if (this.datavaluesource && !this.datavaluesource.twoWayBinding) {
@@ -332,7 +332,7 @@
       }
       ngOnInit() {
           super.ngOnInit();
-          this._formControl = this.inj.get(i1$1.FormControlName, null);
+          this._formControl = this.inj.get(i2$1.FormControlName, null);
       }
       registerOnChange(fn) {
           this._onChange = fn;
@@ -409,8 +409,8 @@
   ]);
   const registerProps$c = () => {
       i2.register('wm-checkbox', checkboxProps);
-      i2.registerFormWidget(i1$2.FormWidgetType.CHECKBOX, checkboxProps);
-      i2.registerFormWidget(i1$2.FormWidgetType.TOGGLE, checkboxProps);
+      i2.registerFormWidget(i1$1.FormWidgetType.CHECKBOX, checkboxProps);
+      i2.registerFormWidget(i1$1.FormWidgetType.TOGGLE, checkboxProps);
   };
 
   const _c0$b = ["checkbox"];
@@ -444,12 +444,12 @@
       // if the checkbox is checked, return checkedvalue else return uncheckedvalue
       // @ts-ignore
       get datavalue() {
-          return i1$2.isDefined(this.proxyModel) ? (this.proxyModel ? this._checkedvalue : this._uncheckedvalue) : undefined;
+          return i1$1.isDefined(this.proxyModel) ? (this.proxyModel ? this._checkedvalue : this._uncheckedvalue) : undefined;
       }
       // when the datavalue is set, update the checked state
       // @ts-ignore
       set datavalue(v) {
-          this.proxyModel = (i1$2.isDefined(v) && v !== '') ? v === this._checkedvalue : undefined;
+          this.proxyModel = (i1$1.isDefined(v) && v !== '') ? v === this._checkedvalue : undefined;
           this.updatePrevDatavalue(this.datavalue);
       }
       constructor(inj, checkedVal, uncheckedVal, type) {
@@ -459,7 +459,7 @@
           this._checkedvalue = unStringify(checkedVal, true);
           this._uncheckedvalue = unStringify(uncheckedVal, false);
           // if the type of the checkbox is toggle update the related classes on the host node
-          i1$2.toggleClass(this.nativeElement, 'app-toggle', type === 'toggle');
+          i1$1.toggleClass(this.nativeElement, 'app-toggle', type === 'toggle');
       }
       onPropertyChange(key, nv, ov) {
           if (key === 'tabindex') {
@@ -470,7 +470,7 @@
               return;
           }
           if (key === 'caption') {
-              if (!i1$2.isDefined(nv) || nv === '') {
+              if (!i1$1.isDefined(nv) || nv === '') {
                   this._caption = ' ';
               }
               else {
@@ -515,7 +515,7 @@
   CheckboxComponent.ɵfac = function CheckboxComponent_Factory(t) { return new (t || CheckboxComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵinjectAttribute('checkedvalue'), i0__namespace.ɵɵinjectAttribute('uncheckedvalue'), i0__namespace.ɵɵinjectAttribute('type')); };
   CheckboxComponent.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: CheckboxComponent, selectors: [["", "wmCheckbox", ""]], viewQuery: function CheckboxComponent_Query(rf, ctx) {
           if (rf & 1) {
-              i0__namespace.ɵɵviewQuery(i1$1.NgModel, 5);
+              i0__namespace.ɵɵviewQuery(i2$1.NgModel, 5);
               i0__namespace.ɵɵviewQuery(_c0$b, 7, i0.ElementRef);
           }
           if (rf & 2) {
@@ -528,8 +528,8 @@
               i0__namespace.ɵɵlistener("keydown.enter", function CheckboxComponent_keydown_enter_HostBindingHandler($event) { return ctx.onKeyDown($event, "ENTER"); });
           }
       }, features: [i0__namespace.ɵɵProvidersFeature([
-              i2.provideAs(CheckboxComponent, i1$1.NG_VALUE_ACCESSOR, true),
-              i2.provideAs(CheckboxComponent, i1$1.NG_VALIDATORS, true),
+              i2.provideAs(CheckboxComponent, i2$1.NG_VALUE_ACCESSOR, true),
+              i2.provideAs(CheckboxComponent, i2$1.NG_VALIDATORS, true),
               i2.provideAsWidgetRef(CheckboxComponent)
           ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$a, decls: 6, vars: 17, consts: [[3, "ngClass"], ["type", "checkbox", "role", "checkbox", "focus-target", "", 3, "ngModel", "readonly", "required", "disabled", "tabindex", "ngModelChange", "blur"], ["checkbox", ""], [1, "caption", 3, "innerHtml"], ["alt", "Checkbox Image", "aria-hidden", "true", "src", "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==", 1, "switch"], ["type", "hidden", "aria-hidden", "true", "tabindex", "-1", 1, "ng-hide", "model-holder", 3, "disabled", "value"]], template: function CheckboxComponent_Template(rf, ctx) {
           if (rf & 1) {
@@ -550,13 +550,13 @@
               i0__namespace.ɵɵadvance(2);
               i0__namespace.ɵɵproperty("disabled", ctx.disabled)("value", ctx.proxyModel);
           }
-      }, dependencies: [i1__namespace.NgClass, i1$1__namespace.CheckboxControlValueAccessor, i1$1__namespace.NgControlStatus, i1$1__namespace.CheckboxRequiredValidator, i1$1__namespace.NgModel], encapsulation: 2 });
+      }, dependencies: [i1__namespace.NgClass, i2$1__namespace.CheckboxControlValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.CheckboxRequiredValidator, i2$1__namespace.NgModel], encapsulation: 2 });
   (function () {
       (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CheckboxComponent, [{
               type: i0.Component,
               args: [{ selector: '[wmCheckbox]', providers: [
-                          i2.provideAs(CheckboxComponent, i1$1.NG_VALUE_ACCESSOR, true),
-                          i2.provideAs(CheckboxComponent, i1$1.NG_VALIDATORS, true),
+                          i2.provideAs(CheckboxComponent, i2$1.NG_VALUE_ACCESSOR, true),
+                          i2.provideAs(CheckboxComponent, i2$1.NG_VALIDATORS, true),
                           i2.provideAsWidgetRef(CheckboxComponent)
                       ], template: "<label [ngClass]=\"{'unchecked': !proxyModel, 'disabled': (disabled || readonly), 'required': (required && _caption)}\">\n    <input type=\"checkbox\"\n           role=\"checkbox\"\n           #checkbox\n           [attr.name]=\"name\"\n           [attr.aria-label]=\"hint\"\n           [attr.aria-checked]=\"!!proxyModel\"\n           focus-target\n           [(ngModel)]=\"proxyModel\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           [disabled]=\"disabled || readonly\"\n           [attr.accesskey]=\"shortcutkey\"\n           [tabindex]=\"tabindex\"\n           (blur)=\"invokeOnTouched($event)\"\n           (ngModelChange)=\"handleChange($event)\">\n    <span class=\"caption\" [innerHtml]=\"_caption\"></span>\n    <img alt=\"Checkbox Image\" aria-hidden=\"true\" src=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"switch\"/>\n</label>\n<input type=\"hidden\" class=\"ng-hide model-holder\" aria-hidden=\"true\" tabindex=\"-1\" [disabled]=\"disabled\" [value]=\"proxyModel\">\n" }]
           }], function () {
@@ -572,7 +572,7 @@
                       }] }];
       }, { ngModel: [{
                   type: i0.ViewChild,
-                  args: [i1$1.NgModel]
+                  args: [i2$1.NgModel]
               }], checkboxEl: [{
                   type: i0.ViewChild,
                   args: ['checkbox', { static: true, read: i0.ElementRef }]
@@ -619,14 +619,14 @@
           this.allowempty = true;
           this._debounceDatavalueUpdation = _.debounce((values) => {
               // if no item is found in datasetItems, wait untill the dataset updates by preserving the datavalue in toBeProcessedDatavalue.
-              if (!i1$2.isDefined(this._modelByKey) || (_.isArray(this._modelByKey) && !this._modelByKey.length)) {
+              if (!i1$1.isDefined(this._modelByKey) || (_.isArray(this._modelByKey) && !this._modelByKey.length)) {
                   this.toBeProcessedDatavalue = values;
                   this._modelByValue = '';
               }
-              else if (i1$2.isDefined(this.toBeProcessedDatavalue)) {
+              else if (i1$1.isDefined(this.toBeProcessedDatavalue)) {
                   // obtain the first array value when multiple is set to false.
                   // set the modelByValue only when undefined.
-                  if (!i1$2.isDefined(this._modelByValue)) {
+                  if (!i1$1.isDefined(this._modelByValue)) {
                       this._modelByValue = (!this.multiple && _.isArray(this.toBeProcessedDatavalue)) ? this.toBeProcessedDatavalue[0] : this.toBeProcessedDatavalue;
                   }
                   this.toBeProcessedDatavalue = undefined;
@@ -634,15 +634,15 @@
               this.initDisplayValues();
           }, 150);
           this.datePipe = this.inj.get(i2.ToDatePipe);
-          this.appDefaults = this.inj.get(i1$2.AppDefaults);
+          this.appDefaults = this.inj.get(i1$1.AppDefaults);
           this.binddisplayexpression = this.nativeElement.getAttribute('displayexpression.bind');
           this.binddisplayimagesrc = this.nativeElement.getAttribute('displayimagesrc.bind');
           this.binddisplaylabel = this.nativeElement.getAttribute('displaylabel.bind');
-          this._debouncedInitDatasetItems = i1$2.debounce(() => {
+          this._debouncedInitDatasetItems = i1$1.debounce(() => {
               this.initDatasetItems();
-              i1$2.$appDigest();
+              i1$1.$appDigest();
           }, 150);
-          this.handleHeaderClick = i1$2.noop;
+          this.handleHeaderClick = i1$1.noop;
           this.cancelLocaleChangeSubscription = this.getAppInstance().subscribe("locale-changed", () => {
               this._debouncedInitDatasetItems();
           });
@@ -700,10 +700,10 @@
       selectByValue(values) {
           this.resetDatasetItems();
           // if datavalue is not defined or empty then set the model as undefined.
-          if (!i1$2.isDefined(values) || values === '' || _.isNull(values) || (values instanceof Array && !values.length)) {
+          if (!i1$1.isDefined(values) || values === '' || _.isNull(values) || (values instanceof Array && !values.length)) {
               this._modelByKey = undefined;
               // do not return when allowempty is set to true.
-              if (!this.allowempty || !i1$2.isDefined(values)) {
+              if (!this.allowempty || !i1$1.isDefined(values)) {
                   return;
               }
           }
@@ -711,7 +711,7 @@
               values = this.allowempty ? [values] : i2.extractDataAsArray(values);
           }
           // preserve the datavalue if datasetItems are empty.
-          if (!this.datasetItems.length && i1$2.isDefined(values)) {
+          if (!this.datasetItems.length && i1$1.isDefined(values)) {
               this.toBeProcessedDatavalue = values;
               return;
           }
@@ -722,7 +722,7 @@
                   const itemByValue = _.find(this.datasetItems, item => {
                       if (filterField === 'dataObject') {
                           if (this.compareby && this.compareby.length) {
-                              return i1$2.isEqualWithFields(item[filterField], val, this.compareby);
+                              return i1$1.isEqualWithFields(item[filterField], val, this.compareby);
                           }
                       }
                       return (_.isObject(item.value) ? _.isEqual(item.value, val) : (_.toString(item.value)).toLowerCase() === (_.toString(val)).toLowerCase());
@@ -738,7 +738,7 @@
               const itemByValue = _.find(this.datasetItems, item => {
                   if (filterField === 'dataObject') {
                       if (this.compareby && this.compareby.length) {
-                          return i1$2.isEqualWithFields(item[filterField], values, this.compareby);
+                          return i1$1.isEqualWithFields(item[filterField], values, this.compareby);
                       }
                   }
                   return (_.isObject(item.value) ? _.isEqual(item.value, values) : (_.toString(item.value)).toLowerCase() === (_.toString(values)).toLowerCase());
@@ -784,7 +784,7 @@
                   displayImgSrc: this.displayimagesrc
               });
               // get the unique objects out of the extracted data. Notify change in datasetItems using [...datasetItems] notation
-              this.datasetItems = [...i2.getUniqObjsByDataField(displayOptions, this.datafield, this.displayfield || this.displaylabel, i1$2.toBoolean(this.allowempty))];
+              this.datasetItems = [...i2.getUniqObjsByDataField(displayOptions, this.datafield, this.displayfield || this.displaylabel, i1$1.toBoolean(this.allowempty))];
           }
           this.postDatasetItemsInit();
       }
@@ -909,7 +909,7 @@
   ]);
   const registerProps$b = () => {
       i2.register('wm-checkboxset', checkboxsetProps);
-      i2.registerFormWidget(i1$2.FormWidgetType.CHECKBOXSET, new Map(checkboxsetProps));
+      i2.registerFormWidget(i1$1.FormWidgetType.CHECKBOXSET, new Map(checkboxsetProps));
   };
 
   const _c0$a = ["wmCheckboxset", ""];
@@ -1151,7 +1151,7 @@
               return;
           }
           if (key === 'itemsperrow') {
-              i1$2.setListClass(this);
+              i1$1.setListClass(this);
           }
           else {
               super.onPropertyChange(key, nv, ov);
@@ -1165,8 +1165,8 @@
               i0__namespace.ɵɵlistener("keydown.enter", function CheckboxsetComponent_keydown_enter_HostBindingHandler($event) { return ctx.onKeyDown($event, "ENTER"); });
           }
       }, exportAs: ["wmCheckboxset"], features: [i0__namespace.ɵɵProvidersFeature([
-              i2.provideAs(CheckboxsetComponent, i1$1.NG_VALUE_ACCESSOR, true),
-              i2.provideAs(CheckboxsetComponent, i1$1.NG_VALIDATORS, true),
+              i2.provideAs(CheckboxsetComponent, i2$1.NG_VALUE_ACCESSOR, true),
+              i2.provideAs(CheckboxsetComponent, i2$1.NG_VALIDATORS, true),
               i2.provideAsWidgetRef(CheckboxsetComponent)
           ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$a, decls: 5, vars: 4, consts: [[3, "ngIf", "ngIfElse"], ["hidden", "", 1, "model-holder", 3, "disabled"], ["class", "readonly-wrapper", 4, "ngIf"], ["groupedListTemplate", ""], ["partialContainer", "", "role", "presentation", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], ["partialContainer", "", "role", "presentation", 3, "ngClass", "wmItemTemplate", "userComponentParams", "click"], ["class", "app-checkboxset-label", 3, "ngClass", "title", 4, "ngIf"], ["class", "app-checkboxset-label", 3, "ngClass", 4, "ngIf"], [1, "app-checkboxset-label", 3, "ngClass", "title"], ["type", "checkbox", 3, "name", "tabindex", "disabled", "value", "checked"], [1, "caption", 3, "textContent"], [1, "app-checkboxset-label", 3, "ngClass"], ["partial-container-target", "", 1, "caption", "customTemplate"], [1, "readonly-wrapper"], ["class", "app-list-item-group", "role", "presentation", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "app-list-item-group"], [1, "item-group"], [1, "list-group-header", 3, "title", "ngClass", "click"], [1, "group-title"], [1, "header-action"], ["class", "app-icon wi action wi-chevron-up", 3, "title", 4, "ngIf"], ["class", "label label-default", 3, "textContent", 4, "ngIf"], ["partialContainer", "", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], [1, "app-icon", "wi", "action", "wi-chevron-up", 3, "title"], [1, "label", "label-default", 3, "textContent"], ["partialContainer", "", 3, "ngClass", "wmItemTemplate", "userComponentParams", "click"], ["type", "checkbox", "aria-label", "checkbox group", 3, "name", "tabindex", "disabled", "value", "checked"], ["partial-container-target", "", 1, "caption"]], template: function CheckboxsetComponent_Template(rf, ctx) {
           if (rf & 1) {
@@ -1188,8 +1188,8 @@
       (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CheckboxsetComponent, [{
               type: i0.Component,
               args: [{ selector: '[wmCheckboxset]', exportAs: 'wmCheckboxset', providers: [
-                          i2.provideAs(CheckboxsetComponent, i1$1.NG_VALUE_ACCESSOR, true),
-                          i2.provideAs(CheckboxsetComponent, i1$1.NG_VALIDATORS, true),
+                          i2.provideAs(CheckboxsetComponent, i2$1.NG_VALUE_ACCESSOR, true),
+                          i2.provideAs(CheckboxsetComponent, i2$1.NG_VALIDATORS, true),
                           i2.provideAsWidgetRef(CheckboxsetComponent)
                       ], template: "<ng-template [ngIf]=\"!groupby\" [ngIfElse]=\"groupedListTemplate\">\n    <li [ngClass]=\"['checkbox', 'app-checkbox', itemclass, itemsPerRowClass]\"\n        [class.active]=\"item.selected\"\n        *ngFor=\"let item of datasetItems; let i = index\"\n        [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n        (click)=\"onCheckboxLabelClick($event, item.key)\" role=\"presentation\">\n        <!-- Default item template -->\n        <label *ngIf=\"!content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" [title]=\"item.label\">\n            <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\" [attr.aria-label]=\"item.key\"\n                   [tabindex]=\"tabindex\" [attr.aria-checked]=\"item.selected\"\n                   [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                   [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n            <span class=\"caption\" [textContent]=\"item.label\"></span>\n        </label>\n        <!-- Custom partial template -->\n        <label *ngIf=\"content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" >\n            <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\" [attr.aria-label]=\"item.key\"\n                   [tabindex]=\"tabindex\" [attr.aria-checked]=\"item.selected\"\n                   [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                   [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n            <span class=\"caption customTemplate\" partial-container-target></span>\n        </label>\n    </li>\n</ng-template>\n<input [disabled]=\"disabled || readonly\" hidden class=\"model-holder\">\n<div *ngIf=\"readonly || disabled\" class=\"readonly-wrapper\"></div>\n\n<!-- This template will be displayed when groupby is specified. -->\n<ng-template #groupedListTemplate>\n    <li *ngFor=\"let groupObj of groupedData\" class=\"app-list-item-group\" role=\"presentation\">\n        <ul class=\"item-group\">\n            <li class=\"list-group-header\" (click)=\"handleHeaderClick($event)\" [title]=\"groupObj.key\" [ngClass]=\"{'collapsible-content': collapsible}\">\n                <h4 class=\"group-title\">{{groupObj.key}}\n                    <div class=\"header-action\">\n                        <i class=\"app-icon wi action wi-chevron-up\" *ngIf=\"collapsible\" title=\"{{appLocale.LABEL_COLLAPSE}}/{{appLocale.LABEL_EXPAND}}\"></i>\n                        <span *ngIf=\"showcount\" class=\"label label-default\" [textContent]=\"groupObj.data.length\"></span>\n                    </div>\n                </h4>\n            </li>\n            <li *ngFor=\"let item of groupObj.data; let i = index;\"\n                [ngClass]=\"['checkbox', 'app-checkbox', 'group-list-item', itemclass, itemsPerRowClass]\"\n                [class.active]=\"item.selected\"\n                [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n                (click)=\"onCheckboxLabelClick($event, item)\">\n                <!-- Default item template -->\n                <label *ngIf=\"!content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" [title]=\"item.label\">\n                    <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\" aria-label=\"checkbox group\"\n                           [tabindex]=\"tabindex\"\n                           [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                           [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption\" [textContent]=\"item.label\"></span>\n                </label>\n                <!-- Custom partial template -->\n                <label *ngIf=\"content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" >\n                    <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\" aria-label=\"checkbox group\"\n                           [tabindex]=\"tabindex\"\n                           [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                           [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption\" partial-container-target></span>\n                </label>\n            </li>\n        </ul>\n    </li>\n</ng-template>\n" }]
           }], function () { return [{ type: i0__namespace.Injector }]; }, { onKeyDown: [{
@@ -1231,7 +1231,7 @@
        */
       onPropertyChange(key, nv, ov) {
           if (key === 'captionposition') {
-              i1$2.switchClass(this.nativeElement, CAPTION_POSITION[nv], CAPTION_POSITION[ov]);
+              i1$1.switchClass(this.nativeElement, CAPTION_POSITION[nv], CAPTION_POSITION[ov]);
           }
           else if (key === 'required') {
               this.required = nv;
@@ -1253,7 +1253,7 @@
       }
       ngAfterViewInit() {
           super.ngAfterViewInit();
-          i1$2.addForIdAttributes(this.nativeElement);
+          i1$1.addForIdAttributes(this.nativeElement);
           this.assignRequiredToSubComponents();
       }
   }
@@ -1307,11 +1307,13 @@
       ['tabindex', Object.assign({ value: 0 }, i2.PROP_NUMBER)],
       ['trailingzero', Object.assign({ value: false }, i2.PROP_BOOLEAN)],
       ['updateon', i2.PROP_STRING],
-      ['inputmode', Object.assign({ value: 'natural' }, i2.PROP_STRING)]
+      ['inputmode', Object.assign({ value: 'natural' }, i2.PROP_STRING)],
+      ['conditionalclass', i2.PROP_ANY],
+      ['conditionalstyle', i2.PROP_ANY]
   ]);
   const registerProps$9 = () => {
       i2.register('wm-number', numberProps);
-      i2.registerFormWidget(i1$2.FormWidgetType.NUMBER, new Map(numberProps));
+      i2.registerFormWidget(i1$1.FormWidgetType.NUMBER, new Map(numberProps));
   };
 
   class BaseInput extends BaseFormCustomComponent {
@@ -1326,7 +1328,7 @@
           }
           if (key === 'class') {
               if (this.inputEl.nativeElement) {
-                  i1$2.switchClass(this.inputEl.nativeElement, nv, ov);
+                  i1$1.switchClass(this.inputEl.nativeElement, nv, ov);
               }
           }
           else if (key === 'datavalue') {
@@ -1361,13 +1363,13 @@
           const unMaskedVal = _.get(this.imask, 'maskRef.unmaskedValue');
           val = unMaskedVal ? unMaskedVal : val;
           this.ngModel.update.next(val);
-          i1$2.$appDigest();
+          i1$1.$appDigest();
       }
       ngAfterViewInit() {
           super.ngAfterViewInit();
           // add the class on the input element
           if (this.class) {
-              i1$2.addClass(this.inputEl.nativeElement, this.class);
+              i1$1.addClass(this.inputEl.nativeElement, this.class);
           }
           i2.styler(this.inputEl.nativeElement, this);
       }
@@ -1610,7 +1612,7 @@
       onInputChange(value) {
           const stepVal = this.stepLength();
           // WMS-22355, Trigger change cb if value exists or value is empty but datavalue exists (when value is selected and deleted).
-          if (i1$2.isDefined(value) && (value !== '' || this.datavalue)) {
+          if (i1$1.isDefined(value) && (value !== '' || this.datavalue)) {
               this.handleChange(value);
           }
           else {
@@ -1846,11 +1848,11 @@
       }
   }
   NumberComponent.initializeProps = registerProps$9();
-  NumberComponent.ɵfac = function NumberComponent_Factory(t) { return new (t || NumberComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1$2__namespace.AbstractI18nService), i0__namespace.ɵɵdirectiveInject(i2__namespace.TrailingZeroDecimalPipe)); };
+  NumberComponent.ɵfac = function NumberComponent_Factory(t) { return new (t || NumberComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.AbstractI18nService), i0__namespace.ɵɵdirectiveInject(i2__namespace.TrailingZeroDecimalPipe)); };
   NumberComponent.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: NumberComponent, selectors: [["", "wmNumber", ""]], viewQuery: function NumberComponent_Query(rf, ctx) {
           if (rf & 1) {
               i0__namespace.ɵɵviewQuery(_c0$9, 7);
-              i0__namespace.ɵɵviewQuery(i1$1.NgModel, 7);
+              i0__namespace.ɵɵviewQuery(i2$1.NgModel, 7);
           }
           if (rf & 2) {
               let _t;
@@ -1858,34 +1860,34 @@
               i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.ngModel = _t.first);
           }
       }, features: [i0__namespace.ɵɵProvidersFeature([
-              i2.provideAs(NumberComponent, i1$1.NG_VALUE_ACCESSOR, true),
-              i2.provideAs(NumberComponent, i1$1.NG_VALIDATORS, true),
+              i2.provideAs(NumberComponent, i2$1.NG_VALUE_ACCESSOR, true),
+              i2.provideAs(NumberComponent, i2$1.NG_VALIDATORS, true),
               i2.provideAsWidgetRef(NumberComponent)
-          ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$8, decls: 2, vars: 12, consts: [["inputmode", "decimal", "focus-target", "", "role", "textbox", "type", "text", 1, "form-control", "app-textbox", "app-number-input", 3, "ngModel", "readonly", "disabled", "pattern", "autofocus", "ngModelOptions", "required", "ngModelChange", "blur", "focus", "input", "keypress", "keydown.backspace", "keydown.enter", "keydown.ArrowUp", "keydown.ArrowDown"], ["input", ""]], template: function NumberComponent_Template(rf, ctx) {
+          ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$8, decls: 2, vars: 14, consts: [["inputmode", "decimal", "focus-target", "", "role", "textbox", "type", "text", 1, "form-control", "app-textbox", "app-number-input", 3, "ngModel", "readonly", "disabled", "pattern", "autofocus", "ngClass", "ngStyle", "ngModelOptions", "required", "ngModelChange", "blur", "focus", "input", "keypress", "keydown.backspace", "keydown.enter", "keydown.ArrowUp", "keydown.ArrowDown"], ["input", ""]], template: function NumberComponent_Template(rf, ctx) {
           if (rf & 1) {
               i0__namespace.ɵɵelementStart(0, "input", 0, 1);
               i0__namespace.ɵɵlistener("ngModelChange", function NumberComponent_Template_input_ngModelChange_0_listener($event) { return ctx.onModelChange($event); })("blur", function NumberComponent_Template_input_blur_0_listener($event) { ctx.handleBlur($event); return ctx.checkForTrailingZeros($event); })("focus", function NumberComponent_Template_input_focus_0_listener($event) { return ctx.checkForTrailingZeros($event); })("input", function NumberComponent_Template_input_input_0_listener($event) { return ctx.onInputChange($event.target.value); })("keypress", function NumberComponent_Template_input_keypress_0_listener($event) { return ctx.validateInputEntry($event); })("keydown.backspace", function NumberComponent_Template_input_keydown_backspace_0_listener($event) { return ctx.onBackspace($event); })("keydown.enter", function NumberComponent_Template_input_keydown_enter_0_listener($event) { return ctx.onEnter($event); })("keydown.ArrowUp", function NumberComponent_Template_input_keydown_ArrowUp_0_listener($event) { return ctx.onArrowPress($event, "UP"); })("keydown.ArrowDown", function NumberComponent_Template_input_keydown_ArrowDown_0_listener($event) { return ctx.onArrowPress($event, "DOWN"); });
               i0__namespace.ɵɵelementEnd();
           }
           if (rf & 2) {
-              i0__namespace.ɵɵproperty("ngModel", ctx.displayValue)("readonly", ctx.readonly)("disabled", ctx.disabled)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngModelOptions", ctx.ngModelOptions)("required", ctx.required);
+              i0__namespace.ɵɵproperty("ngModel", ctx.displayValue)("readonly", ctx.readonly)("disabled", ctx.disabled)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("ngModelOptions", ctx.ngModelOptions)("required", ctx.required);
               i0__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
           }
-      }, dependencies: [i1$1__namespace.DefaultValueAccessor, i1$1__namespace.NgControlStatus, i1$1__namespace.RequiredValidator, i1$1__namespace.PatternValidator, i1$1__namespace.NgModel], encapsulation: 2 });
+      }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.PatternValidator, i2$1__namespace.NgModel], encapsulation: 2 });
   (function () {
       (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(NumberComponent, [{
               type: i0.Component,
               args: [{ selector: '[wmNumber]', providers: [
-                          i2.provideAs(NumberComponent, i1$1.NG_VALUE_ACCESSOR, true),
-                          i2.provideAs(NumberComponent, i1$1.NG_VALIDATORS, true),
+                          i2.provideAs(NumberComponent, i2$1.NG_VALUE_ACCESSOR, true),
+                          i2.provideAs(NumberComponent, i2$1.NG_VALIDATORS, true),
                           i2.provideAsWidgetRef(NumberComponent)
-                      ], template: "<input class=\"form-control app-textbox app-number-input\"\n       inputmode=\"decimal\"\n       focus-target\n       [attr.name]=\"name\"\n       role=\"textbox\"\n       type=\"text\"\n       [ngModel]=\"displayValue\"\n       [readonly]=\"readonly\"\n       [disabled]=\"disabled\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       (ngModelChange)=\"onModelChange($event)\"\n       (blur)=\"handleBlur($event); checkForTrailingZeros($event);\"\n       (focus)=\"checkForTrailingZeros($event)\"\n       (input)=\"onInputChange($event.target.value)\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [required]=\"required\"\n       (keypress)=\"validateInputEntry($event)\"\n       (keydown.backspace)=\"onBackspace($event)\"\n       (keydown.enter)=\"onEnter($event)\"\n       (keydown.ArrowUp)=\"onArrowPress($event, 'UP')\"\n       (keydown.ArrowDown)=\"onArrowPress($event, 'DOWN')\"\n       #input>\n" }]
-          }], function () { return [{ type: i0__namespace.Injector }, { type: i1$2__namespace.AbstractI18nService }, { type: i2__namespace.TrailingZeroDecimalPipe }]; }, { inputEl: [{
+                      ], template: "<input class=\"form-control app-textbox app-number-input\"\n       inputmode=\"decimal\"\n       focus-target\n       [attr.name]=\"name\"\n       role=\"textbox\"\n       type=\"text\"\n       [ngModel]=\"displayValue\"\n       [readonly]=\"readonly\"\n       [disabled]=\"disabled\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (ngModelChange)=\"onModelChange($event)\"\n       (blur)=\"handleBlur($event); checkForTrailingZeros($event);\"\n       (focus)=\"checkForTrailingZeros($event)\"\n       (input)=\"onInputChange($event.target.value)\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [required]=\"required\"\n       (keypress)=\"validateInputEntry($event)\"\n       (keydown.backspace)=\"onBackspace($event)\"\n       (keydown.enter)=\"onEnter($event)\"\n       (keydown.ArrowUp)=\"onArrowPress($event, 'UP')\"\n       (keydown.ArrowDown)=\"onArrowPress($event, 'DOWN')\"\n       #input>\n" }]
+          }], function () { return [{ type: i0__namespace.Injector }, { type: i1$1__namespace.AbstractI18nService }, { type: i2__namespace.TrailingZeroDecimalPipe }]; }, { inputEl: [{
                   type: i0.ViewChild,
                   args: ['input', { static: true }]
               }], ngModel: [{
                   type: i0.ViewChild,
-                  args: [i1$1.NgModel, { static: true }]
+                  args: [i2$1.NgModel, { static: true }]
               }] });
   })();
 
@@ -1919,7 +1921,7 @@
   ]);
   const registerProps$8 = () => {
       i2.register('wm-radioset', radiosetProps);
-      i2.registerFormWidget(i1$2.FormWidgetType.RADIOSET, new Map(radiosetProps));
+      i2.registerFormWidget(i1$1.FormWidgetType.RADIOSET, new Map(radiosetProps));
   };
 
   const _c0$8 = ["wmRadioset", ""];
@@ -2150,7 +2152,7 @@
               return;
           }
           if (key === 'itemsperrow') {
-              i1$2.setListClass(this);
+              i1$1.setListClass(this);
           }
           else {
               super.onPropertyChange(key, nv, ov);
@@ -2160,8 +2162,8 @@
   RadiosetComponent.initializeProps = registerProps$8();
   RadiosetComponent.ɵfac = function RadiosetComponent_Factory(t) { return new (t || RadiosetComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); };
   RadiosetComponent.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: RadiosetComponent, selectors: [["", "wmRadioset", ""]], exportAs: ["wmRadioset"], features: [i0__namespace.ɵɵProvidersFeature([
-              i2.provideAs(RadiosetComponent, i1$1.NG_VALUE_ACCESSOR, true),
-              i2.provideAs(RadiosetComponent, i1$1.NG_VALIDATORS, true),
+              i2.provideAs(RadiosetComponent, i2$1.NG_VALUE_ACCESSOR, true),
+              i2.provideAs(RadiosetComponent, i2$1.NG_VALIDATORS, true),
               i2.provideAsWidgetRef(RadiosetComponent)
           ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$8, decls: 5, vars: 4, consts: [[3, "ngIf", "ngIfElse"], ["hidden", "", 1, "model-holder", 3, "disabled"], ["aria-readonly", "true", "class", "readonly-wrapper", 4, "ngIf"], ["groupedListTemplate", ""], ["partialContainer", "", "role", "presentation", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], ["partialContainer", "", "role", "presentation", 3, "ngClass", "wmItemTemplate", "userComponentParams", "click"], ["class", "app-radioset-label", 3, "ngClass", 4, "ngIf"], [1, "app-radioset-label", 3, "ngClass"], ["type", "radio", 3, "name", "value", "disabled", "tabindex", "checked"], [1, "caption", 3, "textContent"], ["partial-container-target", "", 1, "caption", "customTemplate"], ["aria-readonly", "true", 1, "readonly-wrapper"], ["class", "app-list-item-group", 4, "ngFor", "ngForOf"], [1, "app-list-item-group"], [1, "item-group"], [1, "list-group-header", 3, "title", "ngClass", "click"], [1, "group-title"], [1, "header-action"], ["class", "app-icon wi action wi-chevron-up", 3, "title", 4, "ngIf"], ["class", "label label-default", 3, "textContent", 4, "ngIf"], ["partialContainer", "", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], [1, "app-icon", "wi", "action", "wi-chevron-up", 3, "title"], [1, "label", "label-default", 3, "textContent"], ["partialContainer", "", 3, "ngClass", "wmItemTemplate", "userComponentParams", "click"]], template: function RadiosetComponent_Template(rf, ctx) {
           if (rf & 1) {
@@ -2183,8 +2185,8 @@
       (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(RadiosetComponent, [{
               type: i0.Component,
               args: [{ selector: '[wmRadioset]', exportAs: 'wmRadioset', providers: [
-                          i2.provideAs(RadiosetComponent, i1$1.NG_VALUE_ACCESSOR, true),
-                          i2.provideAs(RadiosetComponent, i1$1.NG_VALIDATORS, true),
+                          i2.provideAs(RadiosetComponent, i2$1.NG_VALUE_ACCESSOR, true),
+                          i2.provideAs(RadiosetComponent, i2$1.NG_VALIDATORS, true),
                           i2.provideAsWidgetRef(RadiosetComponent)
                       ], template: "<ng-template [ngIf]=\"!groupby\" [ngIfElse]=\"groupedListTemplate\">\n    <li [ngClass]=\"['radio', 'app-radio', itemclass, itemsPerRowClass]\"\n        [class.active]=\"item.selected\"\n        *ngFor=\"let item of datasetItems;let i = index\"\n        [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n        (click)=\"onRadioLabelClick($event, item.key)\" role=\"presentation\">\n        <!-- Default item template -->\n        <label *ngIf=\"!content\" class=\"app-radioset-label\"\n               [ngClass]=\"{'disabled':disabled || readonly}\">\n            <input [name]=\"'radioset_' + widgetId\" type=\"radio\" [attr.aria-checked]=\"item.selected\" [attr.data-attr-index]=\"i\"\n                   [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"\n                   [attr.aria-label]=\"item.key\"/>\n            <span class=\"caption\" [textContent]=\"item.label\"></span>\n        </label>\n        <!-- Custom partial template -->\n        <label *ngIf=\"content\" class=\"app-radioset-label\"\n               [ngClass]=\"{'disabled':disabled || readonly}\">\n            <input [name]=\"'radioset_' + widgetId\" type=\"radio\" [attr.aria-checked]=\"item.selected\" [attr.data-attr-index]=\"i\"\n                   [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"\n                   [attr.aria-label]=\"item.key\"/>\n            <span class=\"caption customTemplate\" partial-container-target></span>\n        </label>\n    </li>\n</ng-template>\n\n<input [disabled]=\"disabled || readonly\" hidden class=\"model-holder\">\n<div *ngIf=\"readonly || disabled\" aria-readonly=\"true\" class=\"readonly-wrapper\"></div>\n\n<!-- This template will be displayed when groupby is specified. -->\n<ng-template #groupedListTemplate>\n    <li *ngFor=\"let groupObj of groupedData\" class=\"app-list-item-group\">\n        <ul class=\"item-group\">\n            <li class=\"list-group-header\" (click)=\"handleHeaderClick($event)\" [title]=\"groupObj.key\" [ngClass]=\"{'collapsible-content': collapsible}\">\n                <h4 class=\"group-title\">{{groupObj.key}}\n                    <div class=\"header-action\">\n                        <i class=\"app-icon wi action wi-chevron-up\" *ngIf=\"collapsible\" title=\"{{appLocale.LABEL_COLLAPSE}}/{{appLocale.LABEL_EXPAND}}\"></i>\n                        <span *ngIf=\"showcount\" class=\"label label-default\" [textContent]=\"groupObj.data.length\"></span>\n                    </div>\n                </h4>\n            </li>\n            <li *ngFor=\"let item of groupObj.data; let i = index;\"\n                [ngClass]=\"['radio', 'app-radio', 'group-list-item', itemclass, itemsPerRowClass]\"\n                [class.active]=\"item.selected\"\n                [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n                (click)=\"onRadioLabelClick($event, item)\">\n                <!-- Default item template -->\n                <label *ngIf=\"!content\" class=\"app-radioset-label\"\n                       [ngClass]=\"{'disabled':disabled || readonly}\">\n                    <input [name]=\"'radioset_' + widgetId\" type=\"radio\" [attr.aria-checked]=\"item.selected\" [attr.data-attr-index]=\"i\"\n                           [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption\" [textContent]=\"item.label\"></span>\n                </label>\n                <!-- Custom partial template -->\n                <label *ngIf=\"content\" class=\"app-radioset-label\"\n                       [ngClass]=\"{'disabled':disabled || readonly}\">\n                    <input [name]=\"'radioset_' + widgetId\" type=\"radio\" [attr.aria-checked]=\"item.selected\" [attr.data-attr-index]=\"i\"\n                           [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption customTemplate\" partial-container-target></span>\n                </label>\n            </li>\n        </ul>\n    </li>\n</ng-template>\n" }]
           }], function () { return [{ type: i0__namespace.Injector }]; }, null);
@@ -2219,8 +2221,8 @@
   ]);
   const registerProps$7 = () => {
       i2.register('wm-select', selectProps);
-      i2.registerFormWidget(i1$2.FormWidgetType.SELECT, new Map(selectProps));
-      i2.registerFormWidget(i1$2.FormWidgetType.TYPEAHEAD, new Map(selectProps));
+      i2.registerFormWidget(i1$1.FormWidgetType.SELECT, new Map(selectProps));
+      i2.registerFormWidget(i1$1.FormWidgetType.TYPEAHEAD, new Map(selectProps));
   };
 
   const _c0$7 = ["select"];
@@ -2283,8 +2285,8 @@
   const WIDGET_CONFIG$7 = { widgetType: 'wm-select', hostClass: 'app-select-wrapper' };
   class SelectComponent extends DatasetAwareFormComponent {
       set datasource(ds) {
-          if (ds && ds.execute && ds.execute(i1$2.DataSource.Operation.IS_BOUND_TO_LOCALE)) {
-              this.datavalue = ds.execute(i1$2.DataSource.Operation.GET_DEFAULT_LOCALE);
+          if (ds && ds.execute && ds.execute(i1$1.DataSource.Operation.IS_BOUND_TO_LOCALE)) {
+              this.datavalue = ds.execute(i1$1.DataSource.Operation.GET_DEFAULT_LOCALE);
           }
       }
       constructor(inj) {
@@ -2336,7 +2338,7 @@
               return;
           }
           else if (key === 'readonly') {
-              (nv === true) ? i1$2.setAttr(this.selectEl.nativeElement, 'readonly', 'readonly') : i1$2.removeAttr(this.selectEl.nativeElement, 'readonly');
+              (nv === true) ? i1$1.setAttr(this.selectEl.nativeElement, 'readonly', 'readonly') : i1$1.removeAttr(this.selectEl.nativeElement, 'readonly');
           }
           super.onPropertyChange(key, nv, ov);
       }
@@ -2370,8 +2372,8 @@
               i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.selectEl = _t.first);
           }
       }, features: [i0__namespace.ɵɵProvidersFeature([
-              i2.provideAs(SelectComponent, i1$1.NG_VALUE_ACCESSOR, true),
-              i2.provideAs(SelectComponent, i1$1.NG_VALIDATORS, true),
+              i2.provideAs(SelectComponent, i2$1.NG_VALUE_ACCESSOR, true),
+              i2.provideAs(SelectComponent, i2$1.NG_VALIDATORS, true),
               i2.provideAsWidgetRef(SelectComponent)
           ]), i0__namespace.ɵɵInheritDefinitionFeature], decls: 5, vars: 16, consts: [["role", "listbox", "aria-haspopup", "true", "aria-expanded", "false", "focus-target", "", 3, "ngClass", "disabled", "required", "tabindex", "ngModel", "multiple", "autofocus", "ngModelChange", "change", "focus", "blur"], ["select", ""], ["selected", "", "value", "undefined", 3, "textContent", "hidden"], [4, "ngIf"], [3, "label", 4, "ngFor", "ngForOf"], [3, "label"], ["role", "option", 3, "value", "selected", "textContent", 4, "ngFor", "ngForOf"], ["role", "option", 3, "value", "selected", "textContent"]], template: function SelectComponent_Template(rf, ctx) {
           if (rf & 1) {
@@ -2392,13 +2394,13 @@
               i0__namespace.ɵɵadvance(1);
               i0__namespace.ɵɵproperty("ngIf", !ctx.groupby);
           }
-      }, dependencies: [i1__namespace.NgClass, i1__namespace.NgForOf, i1__namespace.NgIf, i1$1__namespace.NgSelectOption, i1$1__namespace.ɵNgSelectMultipleOption, i1$1__namespace.SelectMultipleControlValueAccessor, i1$1__namespace.NgControlStatus, i1$1__namespace.RequiredValidator, i1$1__namespace.NgModel, i2__namespace.TextContentDirective], encapsulation: 2 });
+      }, dependencies: [i1__namespace.NgClass, i1__namespace.NgForOf, i1__namespace.NgIf, i2$1__namespace.NgSelectOption, i2$1__namespace.ɵNgSelectMultipleOption, i2$1__namespace.SelectMultipleControlValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.NgModel, i2__namespace.TextContentDirective], encapsulation: 2 });
   (function () {
       (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SelectComponent, [{
               type: i0.Component,
               args: [{ selector: 'wm-select', providers: [
-                          i2.provideAs(SelectComponent, i1$1.NG_VALUE_ACCESSOR, true),
-                          i2.provideAs(SelectComponent, i1$1.NG_VALIDATORS, true),
+                          i2.provideAs(SelectComponent, i2$1.NG_VALUE_ACCESSOR, true),
+                          i2.provideAs(SelectComponent, i2$1.NG_VALIDATORS, true),
                           i2.provideAsWidgetRef(SelectComponent)
                       ], template: "<select role=\"listbox\" aria-haspopup=\"true\" aria-expanded=\"false\" #select\n        focus-target\n        [ngClass]=\"['app-select form-control', class]\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        [(ngModel)]=\"modelByKey\"\n        [multiple]=\"multiple\"\n        (change)=\"onSelectValueChange($event)\"\n        (focus)=\"checkForFloatingLabel($event)\"\n        (blur)=\"invokeOnTouched($event); checkForFloatingLabel($event)\"\n        [attr.name]=\"name\"\n        [attr.aria-label]=\"hint\"\n        [attr.aria-multiselectable]=\"multiple\"\n        [autofocus]=\"autofocus\"\n>\n    <option selected\n    value=\"undefined\"\n    [textContent]=\"placeholder\"\n    [hidden]=\"!placeholder\"></option>\n\n    <ng-container *ngIf=\"groupby\">\n        <optgroup *ngFor=\"let groupObj of groupedData\"\n            [label]=\"groupObj.key\">\n            <option *ngFor=\"let item of groupObj.data;\"\n                [value]=\"item.key\"\n                [selected]=\"item.selected\"\n                [textContent]=\"item.label\"\n                role=\"option\"></option>\n        </optgroup>\n    </ng-container>\n\n    <ng-container *ngIf=\"!groupby\">\n        <option *ngFor=\"let item of datasetItems\"\n            [value]=\"item.key\"\n            [selected]=\"item.selected\"\n            [textContent]=\"item.label\"\n            role=\"option\"></option>\n    </ng-container>\n</select>\n" }]
           }], function () { return [{ type: i0__namespace.Injector }]; }, { selectEl: [{
@@ -2427,8 +2429,8 @@
   ]);
   const registerProps$6 = () => {
       i2.register('wm-switch', switchProps);
-      i2.registerFormWidget(i1$2.FormWidgetType.SWITCH, new Map(switchProps));
-      i2.registerFormWidget(i1$2.FormWidgetType.TOGGLE, new Map(switchProps));
+      i2.registerFormWidget(i1$1.FormWidgetType.SWITCH, new Map(switchProps));
+      i2.registerFormWidget(i1$1.FormWidgetType.TOGGLE, new Map(switchProps));
   };
 
   const _c0$6 = ["wmSwitch", ""];
@@ -2478,12 +2480,12 @@
       constructor(inj) {
           super(inj, WIDGET_CONFIG$6);
           this.options = [];
-          this._debounceSetSelectedValue = i1$2.debounce((val) => {
+          this._debounceSetSelectedValue = i1$1.debounce((val) => {
               this.setSelectedValue();
               this.updateHighlighter(val);
               // only for default value trigger app digest to apply the selectedItem
               if (val) {
-                  i1$2.$appDigest();
+                  i1$1.$appDigest();
               }
           }, 200);
           const datasetSubscription = this.dataset$.subscribe(() => this.updateSwitchOptions());
@@ -2499,7 +2501,7 @@
       }
       onStyleChange(key, nv, ov) {
           if (key === 'height') {
-              i1$2.setCSS(this.nativeElement, 'overflow', nv ? 'auto' : '');
+              i1$1.setCSS(this.nativeElement, 'overflow', nv ? 'auto' : '');
           }
           else {
               super.onStyleChange(key, nv, ov);
@@ -2507,7 +2509,7 @@
       }
       // This function sets the selectedItem by either using compareby fields or selected flag on datasetItems.
       setSelectedValue() {
-          if (i1$2.isDefined(this.datavalue) || i1$2.isDefined(this.toBeProcessedDatavalue)) {
+          if (i1$1.isDefined(this.datavalue) || i1$1.isDefined(this.toBeProcessedDatavalue)) {
               this.selectedItem = _.find(this.datasetItems, { selected: true });
               return;
           }
@@ -2519,7 +2521,7 @@
       updateSwitchOptions() {
           if (this.datasetItems.length) {
               this.btnwidth = (100 / this.datasetItems.length);
-              i1$2.setCSS(this.nativeElement.querySelector('.app-switch-overlay'), 'width', this.btnwidth + '%');
+              i1$1.setCSS(this.nativeElement.querySelector('.app-switch-overlay'), 'width', this.btnwidth + '%');
           }
           this._debounceSetSelectedValue(true);
       }
@@ -2569,10 +2571,10 @@
           this.updateHighlighter();
           // invoke on datavalue change.
           this.invokeOnChange(this.datavalue, $event || {}, true);
-          i1$2.$appDigest();
+          i1$1.$appDigest();
       }
       onPropertyChange(key, nv, ov) {
-          if (key === 'disabled' && !i1$2.toBoolean(nv)) {
+          if (key === 'disabled' && !i1$1.toBoolean(nv)) {
               this.nativeElement.removeAttribute(key);
           }
           else {
@@ -2583,7 +2585,7 @@
   SwitchComponent.initializeProps = registerProps$6();
   SwitchComponent.ɵfac = function SwitchComponent_Factory(t) { return new (t || SwitchComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); };
   SwitchComponent.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: SwitchComponent, selectors: [["", "wmSwitch", ""]], exportAs: ["wmSwitch"], features: [i0__namespace.ɵɵProvidersFeature([
-              i2.provideAs(SwitchComponent, i1$1.NG_VALUE_ACCESSOR, true),
+              i2.provideAs(SwitchComponent, i2$1.NG_VALUE_ACCESSOR, true),
               i2.provideAsWidgetRef(SwitchComponent)
           ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$6, decls: 6, vars: 8, consts: [["role", "group", 1, "btn-group", "btn-group-justified"], ["focus-target", "", "href", "javascript:void(0);", "class", "btn btn-default", 3, "name", "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "btn", "btn-primary", "app-switch-overlay", "switch-handle", 3, "title"], [3, "class", 4, "ngIf"], ["aria-hidden", "true", 1, "model-holder", "ng-hide", 3, "name", "disabled", "value", "required"], ["focus-target", "", "href", "javascript:void(0);", 1, "btn", "btn-default", 3, "name", "ngClass", "click"], ["aria-hidden", "true", 3, "ngClass", 4, "ngIf"], [1, "caption", 3, "textContent"], ["aria-hidden", "true", 3, "ngClass"]], template: function SwitchComponent_Template(rf, ctx) {
           if (rf & 1) {
@@ -2613,7 +2615,7 @@
       (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SwitchComponent, [{
               type: i0.Component,
               args: [{ selector: '[wmSwitch]', providers: [
-                          i2.provideAs(SwitchComponent, i1$1.NG_VALUE_ACCESSOR, true),
+                          i2.provideAs(SwitchComponent, i2$1.NG_VALUE_ACCESSOR, true),
                           i2.provideAsWidgetRef(SwitchComponent)
                       ], exportAs: 'wmSwitch', template: "<div role=\"group\" class=\"btn-group btn-group-justified\">\n    <a *ngFor=\"let opt of datasetItems; let $index = index;\"\n       focus-target\n       href=\"javascript:void(0);\"\n       class=\"btn btn-default\"\n       [name]=\"'wm-switch-' + opt.key\"\n       [ngClass]=\"{'selected': opt.selected, 'disabled': disabled}\"\n       (click)=\"selectOpt($event, $index, opt)\"\n    >\n        <i *ngIf=\"opt.dataObject && opt.dataObject[iconclass]\" aria-hidden=\"true\" [ngClass]=\"['app-icon', opt.dataObject[iconclass] || opt['icon']]\"></i>\n        <span class=\"caption\" [textContent]=\"opt[displayfield] || opt.label\"></span>\n    </a>\n</div>\n<span [title]=\"selectedItem ? selectedItem.label : modelByKey\"\n      class=\"btn btn-primary app-switch-overlay switch-handle\">\n    <i *ngIf=\"iconclass\"\n       class=\"app-icon {{(selectedItem && selectedItem.dataObject) && selectedItem.dataObject[iconclass]}}\"></i>\n    {{selectedItem ? selectedItem.label : modelByKey}}\n</span>\n<input [name]=\"name\" class=\"model-holder ng-hide\" [disabled]=\"disabled\" [value]=\"modelByKey\" [required]=\"required\" aria-hidden=\"true\">\n" }]
           }], function () { return [{ type: i0__namespace.Injector }]; }, null);
@@ -2639,7 +2641,9 @@
       ['step', i2.PROP_NUMBER],
       ['tabindex', Object.assign({ value: 0 }, i2.PROP_NUMBER)],
       ['type', i2.PROP_STRING],
-      ['updateon', i2.PROP_STRING]
+      ['updateon', i2.PROP_STRING],
+      ['conditionalclass', i2.PROP_ANY],
+      ['conditionalstyle', i2.PROP_ANY]
   ]);
   const registerProps$5 = () => {
       i2.register('wm-input-calendar', inputCalendarTypeProps);
@@ -2661,7 +2665,7 @@
   InputCalendarComponent.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: InputCalendarComponent, selectors: [["wm-input", "type", "date"], ["wm-input", "type", "datetime-local"], ["wm-input", "type", "month"], ["wm-input", "type", "time"], ["wm-input", "type", "week"]], viewQuery: function InputCalendarComponent_Query(rf, ctx) {
           if (rf & 1) {
               i0__namespace.ɵɵviewQuery(_c0$5, 7);
-              i0__namespace.ɵɵviewQuery(i1$1.NgModel, 5);
+              i0__namespace.ɵɵviewQuery(i2$1.NgModel, 5);
           }
           if (rf & 2) {
               let _t;
@@ -2669,34 +2673,34 @@
               i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.ngModel = _t.first);
           }
       }, features: [i0__namespace.ɵɵProvidersFeature([
-              i2.provideAs(InputCalendarComponent, i1$1.NG_VALUE_ACCESSOR, true),
-              i2.provideAs(InputCalendarComponent, i1$1.NG_VALIDATORS, true),
+              i2.provideAs(InputCalendarComponent, i2$1.NG_VALUE_ACCESSOR, true),
+              i2.provideAs(InputCalendarComponent, i2$1.NG_VALIDATORS, true),
               i2.provideAsWidgetRef(InputCalendarComponent)
-          ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$4, decls: 2, vars: 15, consts: [["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "type", "ngModel", "readonly", "required", "disabled", "min", "max", "step", "autofocus", "autocomplete", "ngModelChange", "blur"], ["input", ""]], template: function InputCalendarComponent_Template(rf, ctx) {
+          ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$4, decls: 2, vars: 17, consts: [["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "type", "ngModel", "readonly", "required", "disabled", "min", "max", "step", "autofocus", "autocomplete", "ngClass", "ngStyle", "ngModelChange", "blur"], ["input", ""]], template: function InputCalendarComponent_Template(rf, ctx) {
           if (rf & 1) {
               i0__namespace.ɵɵelementStart(0, "input", 0, 1);
               i0__namespace.ɵɵlistener("ngModelChange", function InputCalendarComponent_Template_input_ngModelChange_0_listener($event) { return ctx.datavalue = $event; })("blur", function InputCalendarComponent_Template_input_blur_0_listener($event) { return ctx.handleBlur($event); })("ngModelChange", function InputCalendarComponent_Template_input_ngModelChange_0_listener($event) { return ctx.handleChange($event); });
               i0__namespace.ɵɵelementEnd();
           }
           if (rf & 2) {
-              i0__namespace.ɵɵproperty("type", ctx.type)("ngModel", ctx.datavalue)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("min", ctx.minvalue)("max", ctx.maxvalue)("step", ctx.step)("autofocus", ctx.autofocus)("autocomplete", ctx.autocomplete ? "on" : "off");
+              i0__namespace.ɵɵproperty("type", ctx.type)("ngModel", ctx.datavalue)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("min", ctx.minvalue)("max", ctx.maxvalue)("step", ctx.step)("autofocus", ctx.autofocus)("autocomplete", ctx.autocomplete ? "on" : "off")("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
               i0__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint || ctx.type + " field");
           }
-      }, dependencies: [i1$1__namespace.DefaultValueAccessor, i1$1__namespace.NgControlStatus, i1$1__namespace.RequiredValidator, i1$1__namespace.NgModel], encapsulation: 2 });
+      }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.NgModel], encapsulation: 2 });
   (function () {
       (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputCalendarComponent, [{
               type: i0.Component,
               args: [{ selector: 'wm-input[type="date"], wm-input[type="datetime-local"], wm-input[type="month"], wm-input[type="time"], wm-input[type="week"]', providers: [
-                          i2.provideAs(InputCalendarComponent, i1$1.NG_VALUE_ACCESSOR, true),
-                          i2.provideAs(InputCalendarComponent, i1$1.NG_VALIDATORS, true),
+                          i2.provideAs(InputCalendarComponent, i2$1.NG_VALUE_ACCESSOR, true),
+                          i2.provideAs(InputCalendarComponent, i2$1.NG_VALIDATORS, true),
                           i2.provideAsWidgetRef(InputCalendarComponent)
-                      ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [min]=\"minvalue\"\n       [max]=\"maxvalue\"\n       [step]=\"step\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint || type + ' field'\"\n       [autofocus]=\"autofocus\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       #input>\n" }]
+                      ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [min]=\"minvalue\"\n       [max]=\"maxvalue\"\n       [step]=\"step\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint || type + ' field'\"\n       [autofocus]=\"autofocus\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       #input>\n" }]
           }], function () { return [{ type: i0__namespace.Injector }]; }, { inputEl: [{
                   type: i0.ViewChild,
                   args: ['input', { static: true }]
               }], ngModel: [{
                   type: i0.ViewChild,
-                  args: [i1$1.NgModel]
+                  args: [i2$1.NgModel]
               }] });
   })();
 
@@ -2717,7 +2721,9 @@
       ['show', Object.assign({ value: true }, i2.PROP_BOOLEAN)],
       ['tabindex', Object.assign({ value: 0 }, i2.PROP_NUMBER)],
       ['type', Object.assign({ value: 'color' }, i2.PROP_STRING)],
-      ['updateon', i2.PROP_STRING]
+      ['updateon', i2.PROP_STRING],
+      ['conditionalclass', i2.PROP_ANY],
+      ['conditionalstyle', i2.PROP_ANY]
   ]);
   const registerProps$4 = () => {
       i2.register('wm-input-color', inputColorTypeProps);
@@ -2739,7 +2745,7 @@
   InputColorComponent.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: InputColorComponent, selectors: [["wm-input", "type", "color"]], viewQuery: function InputColorComponent_Query(rf, ctx) {
           if (rf & 1) {
               i0__namespace.ɵɵviewQuery(_c0$4, 7);
-              i0__namespace.ɵɵviewQuery(i1$1.NgModel, 5);
+              i0__namespace.ɵɵviewQuery(i2$1.NgModel, 5);
           }
           if (rf & 2) {
               let _t;
@@ -2747,34 +2753,34 @@
               i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.ngModel = _t.first);
           }
       }, features: [i0__namespace.ɵɵProvidersFeature([
-              i2.provideAs(InputColorComponent, i1$1.NG_VALUE_ACCESSOR, true),
-              i2.provideAs(InputColorComponent, i1$1.NG_VALIDATORS, true),
+              i2.provideAs(InputColorComponent, i2$1.NG_VALUE_ACCESSOR, true),
+              i2.provideAs(InputColorComponent, i2$1.NG_VALIDATORS, true),
               i2.provideAsWidgetRef(InputColorComponent)
-          ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$3, decls: 2, vars: 12, consts: [["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "type", "ngModel", "readonly", "required", "disabled", "maxlength", "autofocus", "ngModelChange", "blur"], ["input", ""]], template: function InputColorComponent_Template(rf, ctx) {
+          ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$3, decls: 2, vars: 14, consts: [["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "type", "ngModel", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle", "ngModelChange", "blur"], ["input", ""]], template: function InputColorComponent_Template(rf, ctx) {
           if (rf & 1) {
               i0__namespace.ɵɵelementStart(0, "input", 0, 1);
               i0__namespace.ɵɵlistener("ngModelChange", function InputColorComponent_Template_input_ngModelChange_0_listener($event) { return ctx.datavalue = $event; })("blur", function InputColorComponent_Template_input_blur_0_listener($event) { return ctx.handleBlur($event); })("ngModelChange", function InputColorComponent_Template_input_ngModelChange_0_listener($event) { return ctx.handleChange($event); });
               i0__namespace.ɵɵelementEnd();
           }
           if (rf & 2) {
-              i0__namespace.ɵɵproperty("type", ctx.type)("ngModel", ctx.datavalue)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus);
+              i0__namespace.ɵɵproperty("type", ctx.type)("ngModel", ctx.datavalue)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
               i0__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
           }
-      }, dependencies: [i1$1__namespace.DefaultValueAccessor, i1$1__namespace.NgControlStatus, i1$1__namespace.RequiredValidator, i1$1__namespace.MaxLengthValidator, i1$1__namespace.NgModel], encapsulation: 2 });
+      }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.MaxLengthValidator, i2$1__namespace.NgModel], encapsulation: 2 });
   (function () {
       (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputColorComponent, [{
               type: i0.Component,
               args: [{ selector: 'wm-input[type="color"]', providers: [
-                          i2.provideAs(InputColorComponent, i1$1.NG_VALUE_ACCESSOR, true),
-                          i2.provideAs(InputColorComponent, i1$1.NG_VALIDATORS, true),
+                          i2.provideAs(InputColorComponent, i2$1.NG_VALUE_ACCESSOR, true),
+                          i2.provideAs(InputColorComponent, i2$1.NG_VALIDATORS, true),
                           i2.provideAsWidgetRef(InputColorComponent)
-                      ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       role=\"textbox\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       #input>\n" }]
+                      ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       role=\"textbox\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       #input>\n" }]
           }], function () { return [{ type: i0__namespace.Injector }]; }, { inputEl: [{
                   type: i0.ViewChild,
                   args: ['input', { static: true }]
               }], ngModel: [{
                   type: i0.ViewChild,
-                  args: [i1$1.NgModel]
+                  args: [i2$1.NgModel]
               }] });
   })();
 
@@ -2797,7 +2803,9 @@
       ['show', Object.assign({ value: true }, i2.PROP_BOOLEAN)],
       ['tabindex', Object.assign({ value: 0 }, i2.PROP_NUMBER)],
       ['type', Object.assign({ value: 'email' }, i2.PROP_STRING)],
-      ['updateon', i2.PROP_STRING]
+      ['updateon', i2.PROP_STRING],
+      ['conditionalclass', i2.PROP_ANY],
+      ['conditionalstyle', i2.PROP_ANY]
   ]);
   const registerProps$3 = () => {
       i2.register('wm-input-email', inputEmailTypeProps);
@@ -2819,7 +2827,7 @@
   InputEmailComponent.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: InputEmailComponent, selectors: [["wm-input", "type", "email"]], viewQuery: function InputEmailComponent_Query(rf, ctx) {
           if (rf & 1) {
               i0__namespace.ɵɵviewQuery(_c0$3, 7);
-              i0__namespace.ɵɵviewQuery(i1$1.NgModel, 5);
+              i0__namespace.ɵɵviewQuery(i2$1.NgModel, 5);
           }
           if (rf & 2) {
               let _t;
@@ -2827,10 +2835,10 @@
               i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.ngModel = _t.first);
           }
       }, features: [i0__namespace.ɵɵProvidersFeature([
-              i2.provideAs(InputEmailComponent, i1$1.NG_VALUE_ACCESSOR, true),
-              i2.provideAs(InputEmailComponent, i1$1.NG_VALIDATORS, true),
+              i2.provideAs(InputEmailComponent, i2$1.NG_VALUE_ACCESSOR, true),
+              i2.provideAs(InputEmailComponent, i2$1.NG_VALIDATORS, true),
               i2.provideAsWidgetRef(InputEmailComponent)
-          ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$2, decls: 2, vars: 15, consts: [["focus-target", "", "role", "textbox", "email", "", 1, "form-control", "app-textbox", 3, "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "pattern", "autofocus", "autocomplete", "ngModelChange", "blur", "keyup.enter"], ["input", ""]], template: function InputEmailComponent_Template(rf, ctx) {
+          ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$2, decls: 2, vars: 17, consts: [["focus-target", "", "role", "textbox", "email", "", 1, "form-control", "app-textbox", 3, "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "pattern", "autofocus", "ngClass", "ngStyle", "autocomplete", "ngModelChange", "blur", "keyup.enter"], ["input", ""]], template: function InputEmailComponent_Template(rf, ctx) {
           if (rf & 1) {
               const _r1 = i0__namespace.ɵɵgetCurrentView();
               i0__namespace.ɵɵelementStart(0, "input", 0, 1);
@@ -2838,24 +2846,24 @@
               i0__namespace.ɵɵelementEnd();
           }
           if (rf & 2) {
-              i0__namespace.ɵɵproperty("type", ctx.type)("ngModel", ctx.datavalue)("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("autocomplete", ctx.autocomplete ? "on" : "off");
+              i0__namespace.ɵɵproperty("type", ctx.type)("ngModel", ctx.datavalue)("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
               i0__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
           }
-      }, dependencies: [i1$1__namespace.DefaultValueAccessor, i1$1__namespace.NgControlStatus, i1$1__namespace.RequiredValidator, i1$1__namespace.MaxLengthValidator, i1$1__namespace.PatternValidator, i1$1__namespace.EmailValidator, i1$1__namespace.NgModel], encapsulation: 2 });
+      }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.MaxLengthValidator, i2$1__namespace.PatternValidator, i2$1__namespace.EmailValidator, i2$1__namespace.NgModel], encapsulation: 2 });
   (function () {
       (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputEmailComponent, [{
               type: i0.Component,
               args: [{ selector: 'wm-input[type="email"]', providers: [
-                          i2.provideAs(InputEmailComponent, i1$1.NG_VALUE_ACCESSOR, true),
-                          i2.provideAs(InputEmailComponent, i1$1.NG_VALIDATORS, true),
+                          i2.provideAs(InputEmailComponent, i2$1.NG_VALUE_ACCESSOR, true),
+                          i2.provideAs(InputEmailComponent, i2$1.NG_VALIDATORS, true),
                           i2.provideAsWidgetRef(InputEmailComponent)
-                      ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       email\n       #input>\n" }]
+                      ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       email\n       #input>\n" }]
           }], function () { return [{ type: i0__namespace.Injector }]; }, { inputEl: [{
                   type: i0.ViewChild,
                   args: ['input', { static: true }]
               }], ngModel: [{
                   type: i0.ViewChild,
-                  args: [i1$1.NgModel]
+                  args: [i2$1.NgModel]
               }] });
   })();
 
@@ -2881,7 +2889,9 @@
       ['step', i2.PROP_NUMBER],
       ['tabindex', Object.assign({ value: 0 }, i2.PROP_NUMBER)],
       ['type', Object.assign({ value: 'number' }, i2.PROP_STRING)],
-      ['updateon', i2.PROP_STRING]
+      ['updateon', i2.PROP_STRING],
+      ['conditionalclass', i2.PROP_ANY],
+      ['conditionalstyle', i2.PROP_ANY]
   ]);
   const registerProps$2 = () => {
       i2.register('wm-input-number', inputNumberTypeProps);
@@ -2914,7 +2924,7 @@
   InputNumberComponent.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: InputNumberComponent, selectors: [["wm-input", "type", "number"]], viewQuery: function InputNumberComponent_Query(rf, ctx) {
           if (rf & 1) {
               i0__namespace.ɵɵviewQuery(_c0$2, 7);
-              i0__namespace.ɵɵviewQuery(i1$1.NgModel, 5);
+              i0__namespace.ɵɵviewQuery(i2$1.NgModel, 5);
           }
           if (rf & 2) {
               let _t;
@@ -2922,10 +2932,10 @@
               i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.ngModel = _t.first);
           }
       }, features: [i0__namespace.ɵɵProvidersFeature([
-              i2.provideAs(InputNumberComponent, i1$1.NG_VALUE_ACCESSOR, true),
-              i2.provideAs(InputNumberComponent, i1$1.NG_VALIDATORS, true),
+              i2.provideAs(InputNumberComponent, i2$1.NG_VALUE_ACCESSOR, true),
+              i2.provideAs(InputNumberComponent, i2$1.NG_VALIDATORS, true),
               i2.provideAsWidgetRef(InputNumberComponent)
-          ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$1, decls: 2, vars: 20, consts: [["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngClass", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "min", "max", "step", "autofocus", "autocomplete", "ngModelChange", "blur", "keyup.enter", "keydown.ArrowUp", "keydown.ArrowDown", "keypress"], ["input", ""]], template: function InputNumberComponent_Template(rf, ctx) {
+          ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$1, decls: 2, vars: 22, consts: [["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngClass", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "min", "max", "step", "autofocus", "ngStyle", "autocomplete", "ngModelChange", "blur", "keyup.enter", "keydown.ArrowUp", "keydown.ArrowDown", "keypress"], ["input", ""]], template: function InputNumberComponent_Template(rf, ctx) {
           if (rf & 1) {
               const _r1 = i0__namespace.ɵɵgetCurrentView();
               i0__namespace.ɵɵelementStart(0, "input", 0, 1);
@@ -2933,24 +2943,24 @@
               i0__namespace.ɵɵelementEnd();
           }
           if (rf & 2) {
-              i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(18, _c2, ctx.step === 0))("type", ctx.type)("ngModel", ctx.datavalue)("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("min", ctx.minvalue)("max", ctx.maxvalue)("step", ctx.step)("autofocus", ctx.autofocus)("autocomplete", ctx.autocomplete ? "on" : "off");
+              i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(20, _c2, ctx.step === 0))("type", ctx.type)("ngModel", ctx.datavalue)("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("min", ctx.minvalue)("max", ctx.maxvalue)("step", ctx.step)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
               i0__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
           }
-      }, dependencies: [i1__namespace.NgClass, i1$1__namespace.DefaultValueAccessor, i1$1__namespace.NgControlStatus, i1$1__namespace.RequiredValidator, i1$1__namespace.MaxLengthValidator, i1$1__namespace.NgModel], encapsulation: 2 });
+      }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.MaxLengthValidator, i2$1__namespace.NgModel], encapsulation: 2 });
   (function () {
       (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputNumberComponent, [{
               type: i0.Component,
               args: [{ selector: 'wm-input[type="number"]', providers: [
-                          i2.provideAs(InputNumberComponent, i1$1.NG_VALUE_ACCESSOR, true),
-                          i2.provideAs(InputNumberComponent, i1$1.NG_VALIDATORS, true),
+                          i2.provideAs(InputNumberComponent, i2$1.NG_VALUE_ACCESSOR, true),
+                          i2.provideAs(InputNumberComponent, i2$1.NG_VALIDATORS, true),
                           i2.provideAsWidgetRef(InputNumberComponent)
-                      ], template: "<input class=\"form-control app-textbox\"\n       [ngClass]=\"{'step-hidden': step === 0}\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [min]=\"minvalue\"\n       [max]=\"maxvalue\"\n       [step]=\"step\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       (keydown.ArrowUp)=\"onArrowPress($event)\"\n       (keydown.ArrowDown)=\"onArrowPress($event)\"\n       (keypress)=\"validateInputEntry($event)\"\n       #input>\n" }]
+                      ], template: "<input class=\"form-control app-textbox\"\n       [ngClass]=\"{'step-hidden': step === 0}\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [min]=\"minvalue\"\n       [max]=\"maxvalue\"\n       [step]=\"step\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       (keydown.ArrowUp)=\"onArrowPress($event)\"\n       (keydown.ArrowDown)=\"onArrowPress($event)\"\n       (keypress)=\"validateInputEntry($event)\"\n       #input>\n" }]
           }], function () { return [{ type: i0__namespace.Injector }]; }, { inputEl: [{
                   type: i0.ViewChild,
                   args: ['input', { static: true }]
               }], ngModel: [{
                   type: i0.ViewChild,
-                  args: [i1$1.NgModel]
+                  args: [i2$1.NgModel]
               }] });
   })();
 
@@ -2975,11 +2985,13 @@
       ['showdisplayformaton', Object.assign({ value: 'always' }, i2.PROP_ANY)],
       ['tabindex', Object.assign({ value: 0 }, i2.PROP_NUMBER)],
       ['type', Object.assign({ value: 'text' }, i2.PROP_STRING)],
-      ['updateon', i2.PROP_STRING]
+      ['updateon', i2.PROP_STRING],
+      ['conditionalclass', i2.PROP_ANY],
+      ['conditionalstyle', i2.PROP_ANY]
   ]);
   const registerProps$1 = () => {
       i2.register('wm-input-text', inputTextTypeProps);
-      i2.registerFormWidget(i1$2.FormWidgetType.PASSWORD, new Map(inputTextTypeProps));
+      i2.registerFormWidget(i1$1.FormWidgetType.PASSWORD, new Map(inputTextTypeProps));
       const formTextProps = new Map(inputTextTypeProps);
       const mergeTextProps = (typeProps) => {
           typeProps.forEach((v, k) => formTextProps.set(k, v));
@@ -2988,7 +3000,7 @@
       mergeTextProps(inputColorTypeProps);
       mergeTextProps(inputEmailTypeProps);
       mergeTextProps(inputNumberTypeProps);
-      i2.registerFormWidget(i1$2.FormWidgetType.TEXT, new Map(formTextProps));
+      i2.registerFormWidget(i1$1.FormWidgetType.TEXT, new Map(formTextProps));
   };
 
   const _c0$1 = ["input"];
@@ -3076,8 +3088,8 @@
   InputTextComponent.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: InputTextComponent, selectors: [["wm-input", "type", "text"], ["wm-input", 3, "type", ""], ["wm-input", "type", "password"], ["wm-input", "type", "search"], ["wm-input", "type", "tel"], ["wm-input", "type", "url"]], viewQuery: function InputTextComponent_Query(rf, ctx) {
           if (rf & 1) {
               i0__namespace.ɵɵviewQuery(_c0$1, 7);
-              i0__namespace.ɵɵviewQuery(i1$1.NgModel, 5);
-              i0__namespace.ɵɵviewQuery(_c0$1, 5, i2$1.IMaskDirective);
+              i0__namespace.ɵɵviewQuery(i2$1.NgModel, 5);
+              i0__namespace.ɵɵviewQuery(_c0$1, 5, i3.IMaskDirective);
           }
           if (rf & 2) {
               let _t;
@@ -3086,10 +3098,10 @@
               i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.imask = _t.first);
           }
       }, features: [i0__namespace.ɵɵProvidersFeature([
-              i2.provideAs(InputTextComponent, i1$1.NG_VALUE_ACCESSOR, true),
-              i2.provideAs(InputTextComponent, i1$1.NG_VALIDATORS, true),
+              i2.provideAs(InputTextComponent, i2$1.NG_VALUE_ACCESSOR, true),
+              i2.provideAs(InputTextComponent, i2$1.NG_VALIDATORS, true),
               i2.provideAsWidgetRef(InputTextComponent)
-          ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1, decls: 2, vars: 17, consts: [["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "type", "ngModel", "imask", "unmask", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "pattern", "autofocus", "autocomplete", "ngModelChange", "blur", "focus", "keyup.enter"], ["input", ""]], template: function InputTextComponent_Template(rf, ctx) {
+          ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1, decls: 2, vars: 19, consts: [["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "type", "ngModel", "imask", "unmask", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "pattern", "autofocus", "ngClass", "ngStyle", "autocomplete", "ngModelChange", "blur", "focus", "keyup.enter"], ["input", ""]], template: function InputTextComponent_Template(rf, ctx) {
           if (rf & 1) {
               const _r1 = i0__namespace.ɵɵgetCurrentView();
               i0__namespace.ɵɵelementStart(0, "input", 0, 1);
@@ -3097,27 +3109,27 @@
               i0__namespace.ɵɵelementEnd();
           }
           if (rf & 2) {
-              i0__namespace.ɵɵproperty("type", ctx.type)("ngModel", ctx.datavalue)("imask", ctx.mask)("unmask", true)("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("autocomplete", ctx.autocomplete ? "on" : "off");
+              i0__namespace.ɵɵproperty("type", ctx.type)("ngModel", ctx.datavalue)("imask", ctx.mask)("unmask", true)("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
               i0__namespace.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey);
           }
-      }, dependencies: [i1$1__namespace.DefaultValueAccessor, i1$1__namespace.NgControlStatus, i1$1__namespace.RequiredValidator, i1$1__namespace.MaxLengthValidator, i1$1__namespace.PatternValidator, i1$1__namespace.NgModel, i2$1__namespace.IMaskDirective], encapsulation: 2 });
+      }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.MaxLengthValidator, i2$1__namespace.PatternValidator, i2$1__namespace.NgModel, i3__namespace.IMaskDirective], encapsulation: 2 });
   (function () {
       (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputTextComponent, [{
               type: i0.Component,
               args: [{ selector: 'wm-input[type="text"], wm-input:not([type]), wm-input[type="password"], wm-input[type="search"], wm-input[type="tel"], wm-input[type="url"]', providers: [
-                          i2.provideAs(InputTextComponent, i1$1.NG_VALUE_ACCESSOR, true),
-                          i2.provideAs(InputTextComponent, i1$1.NG_VALIDATORS, true),
+                          i2.provideAs(InputTextComponent, i2$1.NG_VALUE_ACCESSOR, true),
+                          i2.provideAs(InputTextComponent, i2$1.NG_VALIDATORS, true),
                           i2.provideAsWidgetRef(InputTextComponent)
-                      ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [attr.aria-label]=\"hint\"\n       [(ngModel)]=\"datavalue\"\n       [imask]=\"mask\"\n       [unmask]=\"true\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [autofocus]=\"autofocus\"\n       (ngModelChange)=\"handleChange($event)\"\n       (blur)=\"handleBlur($event); checkForDisplayFormat($event)\"\n       (focus)=\"checkForDisplayFormat($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       #input>\n" }]
+                      ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [attr.aria-label]=\"hint\"\n       [(ngModel)]=\"datavalue\"\n       [imask]=\"mask\"\n       [unmask]=\"true\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (ngModelChange)=\"handleChange($event)\"\n       (blur)=\"handleBlur($event); checkForDisplayFormat($event)\"\n       (focus)=\"checkForDisplayFormat($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       #input>\n" }]
           }], function () { return [{ type: i0__namespace.Injector }]; }, { inputEl: [{
                   type: i0.ViewChild,
                   args: ['input', { static: true }]
               }], ngModel: [{
                   type: i0.ViewChild,
-                  args: [i1$1.NgModel]
+                  args: [i2$1.NgModel]
               }], imask: [{
                   type: i0.ViewChild,
-                  args: ['input', { read: i2$1.IMaskDirective }]
+                  args: ['input', { read: i3.IMaskDirective }]
               }] });
   })();
 
@@ -3140,10 +3152,12 @@
       ['updateon', i2.PROP_STRING],
       ['limitdisplaytext', i2.PROP_STRING],
       ['charlength', i2.PROP_NUMBER],
+      ['conditionalclass', i2.PROP_ANY],
+      ['conditionalstyle', i2.PROP_ANY]
   ]);
   const registerProps = () => {
       i2.register('wm-textarea', textareaProps);
-      i2.registerFormWidget(i1$2.FormWidgetType.TEXTAREA, new Map(textareaProps));
+      i2.registerFormWidget(i1$1.FormWidgetType.TEXTAREA, new Map(textareaProps));
   };
 
   const _c0 = ["textarea"];
@@ -3177,7 +3191,7 @@
   TextareaComponent.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: TextareaComponent, selectors: [["wm-textarea"]], viewQuery: function TextareaComponent_Query(rf, ctx) {
           if (rf & 1) {
               i0__namespace.ɵɵviewQuery(_c0, 7);
-              i0__namespace.ɵɵviewQuery(i1$1.NgModel, 5);
+              i0__namespace.ɵɵviewQuery(i2$1.NgModel, 5);
           }
           if (rf & 2) {
               let _t;
@@ -3185,10 +3199,10 @@
               i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.ngModel = _t.first);
           }
       }, features: [i0__namespace.ɵɵProvidersFeature([
-              i2.provideAs(TextareaComponent, i1$1.NG_VALUE_ACCESSOR, true),
-              i2.provideAs(TextareaComponent, i1$1.NG_VALIDATORS, true),
+              i2.provideAs(TextareaComponent, i2$1.NG_VALUE_ACCESSOR, true),
+              i2.provideAs(TextareaComponent, i2$1.NG_VALIDATORS, true),
               i2.provideAsWidgetRef(TextareaComponent)
-          ]), i0__namespace.ɵɵInheritDefinitionFeature], decls: 3, vars: 13, consts: [["focus-target", "", "role", "textbox", "aria-multiline", "true", 1, "form-control", "app-textarea", 3, "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "autofocus", "ngModelChange", "blur", "input"], ["textarea", ""], ["class", "textarea-count", 4, "ngIf"], [1, "textarea-count"]], template: function TextareaComponent_Template(rf, ctx) {
+          ]), i0__namespace.ɵɵInheritDefinitionFeature], decls: 3, vars: 15, consts: [["focus-target", "", "role", "textbox", "aria-multiline", "true", 1, "form-control", "app-textarea", 3, "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle", "ngModelChange", "blur", "input"], ["textarea", ""], ["class", "textarea-count", 4, "ngIf"], [1, "textarea-count"]], template: function TextareaComponent_Template(rf, ctx) {
           if (rf & 1) {
               i0__namespace.ɵɵelementStart(0, "textarea", 0, 1);
               i0__namespace.ɵɵlistener("ngModelChange", function TextareaComponent_Template_textarea_ngModelChange_0_listener($event) { return ctx.datavalue = $event; })("blur", function TextareaComponent_Template_textarea_blur_0_listener($event) { return ctx.handleBlur($event); })("input", function TextareaComponent_Template_textarea_input_0_listener() { return ctx.onInputChange(); })("ngModelChange", function TextareaComponent_Template_textarea_ngModelChange_0_listener($event) { ctx.handleChange($event); return ctx.onInputChange(); });
@@ -3196,26 +3210,26 @@
               i0__namespace.ɵɵtemplate(2, TextareaComponent_div_2_Template, 2, 1, "div", 2);
           }
           if (rf & 2) {
-              i0__namespace.ɵɵproperty("ngModel", ctx.datavalue)("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus);
+              i0__namespace.ɵɵproperty("ngModel", ctx.datavalue)("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
               i0__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
               i0__namespace.ɵɵadvance(2);
               i0__namespace.ɵɵproperty("ngIf", ctx.maxchars);
           }
-      }, dependencies: [i1__namespace.NgIf, i1$1__namespace.DefaultValueAccessor, i1$1__namespace.NgControlStatus, i1$1__namespace.RequiredValidator, i1$1__namespace.MaxLengthValidator, i1$1__namespace.NgModel], encapsulation: 2 });
+      }, dependencies: [i1__namespace.NgClass, i1__namespace.NgIf, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.MaxLengthValidator, i2$1__namespace.NgModel], encapsulation: 2 });
   (function () {
       (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TextareaComponent, [{
               type: i0.Component,
               args: [{ selector: 'wm-textarea', providers: [
-                          i2.provideAs(TextareaComponent, i1$1.NG_VALUE_ACCESSOR, true),
-                          i2.provideAs(TextareaComponent, i1$1.NG_VALIDATORS, true),
+                          i2.provideAs(TextareaComponent, i2$1.NG_VALUE_ACCESSOR, true),
+                          i2.provideAs(TextareaComponent, i2$1.NG_VALIDATORS, true),
                           i2.provideAsWidgetRef(TextareaComponent)
-                      ], template: "<textarea class=\"form-control app-textarea\"\n          focus-target\n          role=\"textbox\"\n          [attr.name]=\"name\"\n          [(ngModel)]=\"datavalue\"\n          [ngModelOptions]=\"ngModelOptions\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          [disabled]=\"disabled\"\n          [maxlength]=\"maxchars\"\n          [attr.tabindex]=\"tabindex\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.accesskey]=\"shortcutkey\"\n          [attr.aria-label]=\"hint\"\n          aria-multiline=\"true\"\n          [autofocus]=\"autofocus\"\n          (blur)=\"handleBlur($event)\"\n          (input)=\"onInputChange()\"\n          (ngModelChange)=\"handleChange($event); onInputChange();\"\n          #textarea\n></textarea>\n\n<div *ngIf=\"maxchars\" class=\"textarea-count\"  >{{limitdisplaytext}}</div>\n" }]
+                      ], template: "<textarea class=\"form-control app-textarea\"\n          focus-target\n          role=\"textbox\"\n          [attr.name]=\"name\"\n          [(ngModel)]=\"datavalue\"\n          [ngModelOptions]=\"ngModelOptions\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          [disabled]=\"disabled\"\n          [maxlength]=\"maxchars\"\n          [attr.tabindex]=\"tabindex\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.accesskey]=\"shortcutkey\"\n          [attr.aria-label]=\"hint\"\n          aria-multiline=\"true\"\n          [autofocus]=\"autofocus\"\n          [ngClass]=\"conditionalclass\"\n          [ngStyle]=\"conditionalstyle\"\n          (blur)=\"handleBlur($event)\"\n          (input)=\"onInputChange()\"\n          (ngModelChange)=\"handleChange($event); onInputChange();\"\n          #textarea\n></textarea>\n\n<div *ngIf=\"maxchars\" class=\"textarea-count\"  >{{limitdisplaytext}}</div>\n" }]
           }], function () { return [{ type: i0__namespace.Injector }]; }, { inputEl: [{
                   type: i0.ViewChild,
                   args: ['textarea', { static: true }]
               }], ngModel: [{
                   type: i0.ViewChild,
-                  args: [i1$1.NgModel]
+                  args: [i2$1.NgModel]
               }] });
   })();
 
@@ -3375,7 +3389,7 @@
           }
       }
   }
-  CaptionPositionDirective.ɵfac = function CaptionPositionDirective_Factory(t) { return new (t || CaptionPositionDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1$2__namespace.App)); };
+  CaptionPositionDirective.ɵfac = function CaptionPositionDirective_Factory(t) { return new (t || CaptionPositionDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.App)); };
   CaptionPositionDirective.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: CaptionPositionDirective, selectors: [["", "wmCaptionPosition", ""]] });
   (function () {
       (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CaptionPositionDirective, [{
@@ -3383,7 +3397,7 @@
               args: [{
                       selector: '[wmCaptionPosition]'
                   }]
-          }], function () { return [{ type: i0__namespace.Injector }, { type: i1$2__namespace.App }]; }, null);
+          }], function () { return [{ type: i0__namespace.Injector }, { type: i1$1__namespace.App }]; }, null);
   })();
 
   const components = [
@@ -3409,18 +3423,18 @@
   InputModule.ɵfac = function InputModule_Factory(t) { return new (t || InputModule)(); };
   InputModule.ɵmod = /*@__PURE__*/ i0__namespace.ɵɵdefineNgModule({ type: InputModule });
   InputModule.ɵinj = /*@__PURE__*/ i0__namespace.ɵɵdefineInjector({ imports: [i1.CommonModule,
-          i1$1.FormsModule,
+          i2$1.FormsModule,
           i2.WmComponentsModule,
-          i2$1.IMaskModule] });
+          i3.IMaskModule] });
   (function () {
       (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputModule, [{
               type: i0.NgModule,
               args: [{
                       imports: [
                           i1.CommonModule,
-                          i1$1.FormsModule,
+                          i2$1.FormsModule,
                           i2.WmComponentsModule,
-                          i2$1.IMaskModule
+                          i3.IMaskModule
                       ],
                       declarations: [...components],
                       exports: [...components]
@@ -3444,9 +3458,9 @@
               InputNumberComponent,
               InputTextComponent,
               TextareaComponent], imports: [i1.CommonModule,
-              i1$1.FormsModule,
+              i2$1.FormsModule,
               i2.WmComponentsModule,
-              i2$1.IMaskModule], exports: [ButtonComponent,
+              i3.IMaskModule], exports: [ButtonComponent,
               ButtonGroupDirective,
               CaptionPositionDirective,
               CheckboxComponent,