@wavemaker/app-ng-runtime 11.5.2-next.140998 → 11.5.2-next.141004

app-ng-runtime/components/input/default/fesm2020/index.mjs

@@ -2,14 +2,14 @@ import * as i0 from '@angular/core';
 import { Component, HostBinding, Directive, HostListener, Injectable, Inject, ElementRef, Attribute, ViewChild, ContentChildren, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { getLocaleNumberSymbol, NumberSymbol, CommonModule } from '@angular/common';
-import * as i1$1 from '@angular/forms';
+import * as i2$1 from '@angular/forms';
 import { FormControlName, NgModel, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
-import * as i2$1 from 'angular-imask';
+import * as i3 from 'angular-imask';
 import { IMaskDirective, IMaskModule } from 'angular-imask';
 import * as i2 from '@wm/components/base';
 import { register, PROP_STRING, PROP_ANY, PROP_BOOLEAN, PROP_NUMBER, DISPLAY_TYPE, StylableComponent, styler, provideAsWidgetRef, APPLY_STYLES_TYPE, WidgetConfig, registerFormWidget, provideAs, extractDataAsArray, ToDatePipe, ALLFIELDS, getOrderedDataset, convertDataToObject, transformDataWithKeys, transformFormData, getUniqObjsByDataField, groupData, handleHeaderClick, toggleAllHeaders, WidgetRef, INPUTMODE, WmComponentsModule } from '@wm/components/base';
-import * as i1$2 from '@wm/core';
-import { DataSource, FormWidgetType, isDefined, toggleClass, AppDefaults, debounce, $appDigest, noop, isEqualWithFields, toBoolean, setListClass, switchClass, addForIdAttributes, addClass, setAttr, removeAttr, setCSS } from '@wm/core';
+import * as i1$1 from '@wm/core';
+import { DataSource, FormWidgetType, isDefined, toggleClass, AppDefaults, debounce, $appDigest, noop, isEqualWithFields, toBoolean, setListClass, switchClass, addForIdAttributes, addClass, setAttr, removeAttr, isIos, setCSS } from '@wm/core';
 import { Subject } from 'rxjs';
 
 const registerProps$e = () => {
@@ -496,7 +496,7 @@ CheckboxComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CheckboxC
         i0.ɵɵproperty("innerHtml", ctx._caption, i0.ɵɵsanitizeHtml);
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("disabled", ctx.disabled)("value", ctx.proxyModel);
-    } }, dependencies: [i1.NgClass, i1$1.CheckboxControlValueAccessor, i1$1.NgControlStatus, i1$1.CheckboxRequiredValidator, i1$1.NgModel], encapsulation: 2 });
+    } }, dependencies: [i1.NgClass, i2$1.CheckboxControlValueAccessor, i2$1.NgControlStatus, i2$1.CheckboxRequiredValidator, i2$1.NgModel], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckboxComponent, [{
         type: Component,
         args: [{ selector: '[wmCheckbox]', providers: [
@@ -1198,7 +1198,9 @@ const numberProps = new Map([
     ['tabindex', { value: 0, ...PROP_NUMBER }],
     ['trailingzero', { value: false, ...PROP_BOOLEAN }],
     ['updateon', PROP_STRING],
-    ['inputmode', { value: 'natural', ...PROP_STRING }]
+    ['inputmode', { value: 'natural', ...PROP_STRING }],
+    ['conditionalclass', PROP_ANY],
+    ['conditionalstyle', PROP_ANY]
 ]);
 const registerProps$9 = () => {
     register('wm-number', numberProps);
@@ -1732,7 +1734,7 @@ class NumberComponent extends NumberLocale {
     }
 }
 NumberComponent.initializeProps = registerProps$9();
-NumberComponent.ɵfac = function NumberComponent_Factory(t) { return new (t || NumberComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1$2.AbstractI18nService), i0.ɵɵdirectiveInject(i2.TrailingZeroDecimalPipe)); };
+NumberComponent.ɵfac = function NumberComponent_Factory(t) { return new (t || NumberComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1$1.AbstractI18nService), i0.ɵɵdirectiveInject(i2.TrailingZeroDecimalPipe)); };
 NumberComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NumberComponent, selectors: [["", "wmNumber", ""]], viewQuery: function NumberComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0$9, 7);
         i0.ɵɵviewQuery(NgModel, 7);
@@ -1744,22 +1746,22 @@ NumberComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NumberCompo
             provideAs(NumberComponent, NG_VALUE_ACCESSOR, true),
             provideAs(NumberComponent, NG_VALIDATORS, true),
             provideAsWidgetRef(NumberComponent)
-        ]), i0.ɵɵ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) { if (rf & 1) {
+        ]), i0.ɵɵ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.ɵɵelementStart(0, "input", 0, 1);
         i0.ɵɵ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.ɵɵelementEnd();
     } if (rf & 2) {
-        i0.ɵɵproperty("ngModel", ctx.displayValue)("readonly", ctx.readonly)("disabled", ctx.disabled)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngModelOptions", ctx.ngModelOptions)("required", ctx.required);
+        i0.ɵɵ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.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
-    } }, dependencies: [i1$1.DefaultValueAccessor, i1$1.NgControlStatus, i1$1.RequiredValidator, i1$1.PatternValidator, i1$1.NgModel], encapsulation: 2 });
+    } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.PatternValidator, i2$1.NgModel], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NumberComponent, [{
         type: Component,
         args: [{ selector: '[wmNumber]', providers: [
                     provideAs(NumberComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(NumberComponent, NG_VALIDATORS, true),
                     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.Injector }, { type: i1$2.AbstractI18nService }, { type: i2.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.Injector }, { type: i1$1.AbstractI18nService }, { type: i2.TrailingZeroDecimalPipe }]; }, { inputEl: [{
             type: ViewChild,
             args: ['input', { static: true }]
         }], ngModel: [{
@@ -2062,45 +2064,51 @@ const registerProps$7 = () => {
 };
 
 const _c0$7 = ["select"];
+function SelectComponent_option_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "option", 4);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("textContent", ctx_r1.placeholder)("hidden", !ctx_r1.placeholder);
+} }
 function SelectComponent_ng_container_3_optgroup_1_option_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "option", 7);
+    i0.ɵɵelement(0, "option", 8);
 } if (rf & 2) {
-    const item_r6 = ctx.$implicit;
-    i0.ɵɵproperty("value", item_r6.key)("selected", item_r6.selected)("textContent", item_r6.label);
+    const item_r7 = ctx.$implicit;
+    i0.ɵɵproperty("value", item_r7.key)("selected", item_r7.selected)("textContent", item_r7.label);
 } }
 function SelectComponent_ng_container_3_optgroup_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "optgroup", 5);
-    i0.ɵɵtemplate(1, SelectComponent_ng_container_3_optgroup_1_option_1_Template, 1, 3, "option", 6);
+    i0.ɵɵelementStart(0, "optgroup", 6);
+    i0.ɵɵtemplate(1, SelectComponent_ng_container_3_optgroup_1_option_1_Template, 1, 3, "option", 7);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const groupObj_r4 = ctx.$implicit;
-    i0.ɵɵproperty("label", groupObj_r4.key);
+    const groupObj_r5 = ctx.$implicit;
+    i0.ɵɵproperty("label", groupObj_r5.key);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", groupObj_r4.data);
+    i0.ɵɵproperty("ngForOf", groupObj_r5.data);
 } }
 function SelectComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, SelectComponent_ng_container_3_optgroup_1_Template, 2, 2, "optgroup", 4);
+    i0.ɵɵtemplate(1, SelectComponent_ng_container_3_optgroup_1_Template, 2, 2, "optgroup", 5);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", ctx_r1.groupedData);
+    i0.ɵɵproperty("ngForOf", ctx_r2.groupedData);
 } }
 function SelectComponent_ng_container_4_option_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "option", 7);
+    i0.ɵɵelement(0, "option", 8);
 } if (rf & 2) {
-    const item_r8 = ctx.$implicit;
-    i0.ɵɵproperty("value", item_r8.key)("selected", item_r8.selected)("textContent", item_r8.label);
+    const item_r9 = ctx.$implicit;
+    i0.ɵɵproperty("value", item_r9.key)("selected", item_r9.selected)("textContent", item_r9.label);
 } }
 function SelectComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, SelectComponent_ng_container_4_option_1_Template, 1, 3, "option", 6);
+    i0.ɵɵtemplate(1, SelectComponent_ng_container_4_option_1_Template, 1, 3, "option", 7);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
+    const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", ctx_r2.datasetItems);
+    i0.ɵɵproperty("ngForOf", ctx_r3.datasetItems);
 } }
 const _c1$6 = function (a1) { return ["app-select form-control", a1]; };
 const WIDGET_CONFIG$7 = { widgetType: 'wm-select', hostClass: 'app-select-wrapper' };
@@ -2110,13 +2118,17 @@ class SelectComponent extends DatasetAwareFormComponent {
             this.datavalue = ds.execute(DataSource.Operation.GET_DEFAULT_LOCALE);
         }
     }
-    constructor(inj) {
+    constructor(inj, app) {
         super(inj, WIDGET_CONFIG$7);
+        this.app = app;
         this.acceptsArray = true;
     }
     ngAfterViewInit() {
         super.ngAfterViewInit();
         styler(this.selectEl.nativeElement, this);
+        setTimeout(() => {
+            this.checkForFloatingLabel(null);
+        }, 10);
     }
     // Change event is registered from the template, Prevent the framework from registering one more event
     handleEvent(node, eventName, eventCallback, locals) {
@@ -2163,6 +2175,9 @@ class SelectComponent extends DatasetAwareFormComponent {
         }
         super.onPropertyChange(key, nv, ov);
     }
+    isIosPlatform() {
+        return isIos();
+    }
     /**
      * When caption floating is enabled and placeholder is given, do not show placeholder until user focuses on the field
      * When focused add the placeholder to the option which is selected
@@ -2172,18 +2187,27 @@ class SelectComponent extends DatasetAwareFormComponent {
     checkForFloatingLabel($event) {
         const captionEl = $(this.selectEl.nativeElement).closest('.app-composite-widget.caption-floating');
         if (captionEl.length > 0) {
-            if ($event.type === 'focus' && (!this.datavalue || (this.datavalue && $(this.selectEl).find('select option:selected').text() === '' && this.placeholder))) {
-                $(this.selectEl.nativeElement).find('option:first').text(this.placeholder);
+            if ((!$event || $event.type === 'focus') && (($(this.selectEl).find('select option:selected').text() === '' && (this.placeholder || this.datavalue || this.isIosPlatform())))) {
+                if (!$event && (this.placeholder || this.datavalue || this.isIosPlatform())) {
+                    this.app.notify('captionPositionAnimate', { isSelect: true, nativeEl: captionEl });
+                }
+                if (this.placeholder) {
+                    $(this.selectEl.nativeElement).find('option:first').text(this.placeholder);
+                }
             }
             else if (!this.datavalue) {
-                $(this.selectEl.nativeElement).find('option:selected').text('');
-                captionEl.removeClass('float-active');
+                if (!this.placeholder) {
+                    //  $(this.selectEl.nativeElement).find('option:first').text('');
+                    if (!this.isIosPlatform()) {
+                        captionEl.removeClass('float-active');
+                    }
+                }
             }
         }
     }
 }
 SelectComponent.initializeProps = registerProps$7();
-SelectComponent.ɵfac = function SelectComponent_Factory(t) { return new (t || SelectComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
+SelectComponent.ɵfac = function SelectComponent_Factory(t) { return new (t || SelectComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1$1.App)); };
 SelectComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SelectComponent, selectors: [["wm-select"]], viewQuery: function SelectComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0$7, 7, ElementRef);
     } if (rf & 2) {
@@ -2193,31 +2217,31 @@ SelectComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SelectCompo
             provideAs(SelectComponent, NG_VALUE_ACCESSOR, true),
             provideAs(SelectComponent, NG_VALIDATORS, true),
             provideAsWidgetRef(SelectComponent)
-        ]), i0.ɵɵ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) {
+        ]), i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 15, consts: [["role", "listbox", "aria-haspopup", "true", "aria-expanded", "false", "focus-target", "", 3, "ngClass", "disabled", "required", "tabindex", "ngModel", "multiple", "autofocus", "ngModelChange", "change", "focus", "blur"], ["select", ""], ["value", "undefined", 3, "textContent", "hidden", 4, "ngIf"], [4, "ngIf"], ["value", "undefined", 3, "textContent", "hidden"], [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) {
         i0.ɵɵelementStart(0, "select", 0, 1);
         i0.ɵɵlistener("ngModelChange", function SelectComponent_Template_select_ngModelChange_0_listener($event) { return ctx.modelByKey = $event; })("change", function SelectComponent_Template_select_change_0_listener($event) { return ctx.onSelectValueChange($event); })("focus", function SelectComponent_Template_select_focus_0_listener($event) { return ctx.checkForFloatingLabel($event); })("blur", function SelectComponent_Template_select_blur_0_listener($event) { ctx.invokeOnTouched($event); return ctx.checkForFloatingLabel($event); });
-        i0.ɵɵelement(2, "option", 2);
+        i0.ɵɵtemplate(2, SelectComponent_option_2_Template, 1, 2, "option", 2);
         i0.ɵɵtemplate(3, SelectComponent_ng_container_3_Template, 2, 1, "ng-container", 3);
         i0.ɵɵtemplate(4, SelectComponent_ng_container_4_Template, 2, 1, "ng-container", 3);
         i0.ɵɵelementEnd();
     } if (rf & 2) {
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(14, _c1$6, ctx.class))("disabled", ctx.disabled)("required", ctx.required)("tabindex", ctx.tabindex)("ngModel", ctx.modelByKey)("multiple", ctx.multiple)("autofocus", ctx.autofocus);
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(13, _c1$6, ctx.class))("disabled", ctx.disabled)("required", ctx.required)("tabindex", ctx.tabindex)("ngModel", ctx.modelByKey)("multiple", ctx.multiple)("autofocus", ctx.autofocus);
         i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("aria-multiselectable", ctx.multiple);
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("textContent", ctx.placeholder)("hidden", !ctx.placeholder);
+        i0.ɵɵproperty("ngIf", !ctx.isIosPlatform() || !!ctx.placeholder);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx.groupby);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", !ctx.groupby);
-    } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1$1.NgSelectOption, i1$1.ɵNgSelectMultipleOption, i1$1.SelectMultipleControlValueAccessor, i1$1.NgControlStatus, i1$1.RequiredValidator, i1$1.NgModel, i2.TextContentDirective], encapsulation: 2 });
+    } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2$1.NgSelectOption, i2$1.ɵNgSelectMultipleOption, i2$1.SelectMultipleControlValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.NgModel, i2.TextContentDirective], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectComponent, [{
         type: Component,
         args: [{ selector: 'wm-select', providers: [
                     provideAs(SelectComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(SelectComponent, NG_VALIDATORS, true),
                     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.Injector }]; }, { selectEl: [{
+                ], 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\n    value=\"undefined\"\n    [textContent]=\"placeholder\"\n            *ngIf=\"!isIosPlatform() || !!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.Injector }, { type: i1$1.App }]; }, { selectEl: [{
             type: ViewChild,
             args: ['select', { static: true, read: ElementRef }]
         }] }); })();
@@ -2440,7 +2464,9 @@ const inputCalendarTypeProps = new Map([
     ['step', PROP_NUMBER],
     ['tabindex', { value: 0, ...PROP_NUMBER }],
     ['type', PROP_STRING],
-    ['updateon', PROP_STRING]
+    ['updateon', PROP_STRING],
+    ['conditionalclass', PROP_ANY],
+    ['conditionalstyle', PROP_ANY]
 ]);
 const registerProps$5 = () => {
     register('wm-input-calendar', inputCalendarTypeProps);
@@ -2470,21 +2496,21 @@ InputCalendarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Inpu
             provideAs(InputCalendarComponent, NG_VALUE_ACCESSOR, true),
             provideAs(InputCalendarComponent, NG_VALIDATORS, true),
             provideAsWidgetRef(InputCalendarComponent)
-        ]), i0.ɵɵ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) { if (rf & 1) {
+        ]), i0.ɵɵ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.ɵɵelementStart(0, "input", 0, 1);
         i0.ɵɵ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.ɵɵelementEnd();
     } if (rf & 2) {
-        i0.ɵɵ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.ɵɵ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.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint || ctx.type + " field");
-    } }, dependencies: [i1$1.DefaultValueAccessor, i1$1.NgControlStatus, i1$1.RequiredValidator, i1$1.NgModel], encapsulation: 2 });
+    } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.NgModel], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputCalendarComponent, [{
         type: 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: [
                     provideAs(InputCalendarComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(InputCalendarComponent, NG_VALIDATORS, true),
                     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.Injector }]; }, { inputEl: [{
             type: ViewChild,
             args: ['input', { static: true }]
@@ -2510,7 +2536,9 @@ const inputColorTypeProps = new Map([
     ['show', { value: true, ...PROP_BOOLEAN }],
     ['tabindex', { value: 0, ...PROP_NUMBER }],
     ['type', { value: 'color', ...PROP_STRING }],
-    ['updateon', PROP_STRING]
+    ['updateon', PROP_STRING],
+    ['conditionalclass', PROP_ANY],
+    ['conditionalstyle', PROP_ANY]
 ]);
 const registerProps$4 = () => {
     register('wm-input-color', inputColorTypeProps);
@@ -2540,21 +2568,21 @@ InputColorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputCo
             provideAs(InputColorComponent, NG_VALUE_ACCESSOR, true),
             provideAs(InputColorComponent, NG_VALIDATORS, true),
             provideAsWidgetRef(InputColorComponent)
-        ]), i0.ɵɵ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) { if (rf & 1) {
+        ]), i0.ɵɵ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.ɵɵelementStart(0, "input", 0, 1);
         i0.ɵɵ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.ɵɵelementEnd();
     } if (rf & 2) {
-        i0.ɵɵproperty("type", ctx.type)("ngModel", ctx.datavalue)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus);
+        i0.ɵɵ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.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
-    } }, dependencies: [i1$1.DefaultValueAccessor, i1$1.NgControlStatus, i1$1.RequiredValidator, i1$1.MaxLengthValidator, i1$1.NgModel], encapsulation: 2 });
+    } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.NgModel], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputColorComponent, [{
         type: Component,
         args: [{ selector: 'wm-input[type="color"]', providers: [
                     provideAs(InputColorComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(InputColorComponent, NG_VALIDATORS, true),
                     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.Injector }]; }, { inputEl: [{
             type: ViewChild,
             args: ['input', { static: true }]
@@ -2582,7 +2610,9 @@ const inputEmailTypeProps = new Map([
     ['show', { value: true, ...PROP_BOOLEAN }],
     ['tabindex', { value: 0, ...PROP_NUMBER }],
     ['type', { value: 'email', ...PROP_STRING }],
-    ['updateon', PROP_STRING]
+    ['updateon', PROP_STRING],
+    ['conditionalclass', PROP_ANY],
+    ['conditionalstyle', PROP_ANY]
 ]);
 const registerProps$3 = () => {
     register('wm-input-email', inputEmailTypeProps);
@@ -2612,22 +2642,22 @@ InputEmailComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputEm
             provideAs(InputEmailComponent, NG_VALUE_ACCESSOR, true),
             provideAs(InputEmailComponent, NG_VALIDATORS, true),
             provideAsWidgetRef(InputEmailComponent)
-        ]), i0.ɵɵ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) { if (rf & 1) {
+        ]), i0.ɵɵ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.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "input", 0, 1);
         i0.ɵɵlistener("ngModelChange", function InputEmailComponent_Template_input_ngModelChange_0_listener($event) { return ctx.datavalue = $event; })("blur", function InputEmailComponent_Template_input_blur_0_listener($event) { return ctx.handleBlur($event); })("ngModelChange", function InputEmailComponent_Template_input_ngModelChange_0_listener($event) { return ctx.handleChange($event); })("keyup.enter", function InputEmailComponent_Template_input_keyup_enter_0_listener() { i0.ɵɵrestoreView(_r1); const _r0 = i0.ɵɵreference(1); return i0.ɵɵresetView(ctx.flushViewChanges(_r0.value)); });
         i0.ɵɵelementEnd();
     } if (rf & 2) {
-        i0.ɵɵ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.ɵɵ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.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
-    } }, dependencies: [i1$1.DefaultValueAccessor, i1$1.NgControlStatus, i1$1.RequiredValidator, i1$1.MaxLengthValidator, i1$1.PatternValidator, i1$1.EmailValidator, i1$1.NgModel], encapsulation: 2 });
+    } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.PatternValidator, i2$1.EmailValidator, i2$1.NgModel], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputEmailComponent, [{
         type: Component,
         args: [{ selector: 'wm-input[type="email"]', providers: [
                     provideAs(InputEmailComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(InputEmailComponent, NG_VALIDATORS, true),
                     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.Injector }]; }, { inputEl: [{
             type: ViewChild,
             args: ['input', { static: true }]
@@ -2658,7 +2688,9 @@ const inputNumberTypeProps = new Map([
     ['step', PROP_NUMBER],
     ['tabindex', { value: 0, ...PROP_NUMBER }],
     ['type', { value: 'number', ...PROP_STRING }],
-    ['updateon', PROP_STRING]
+    ['updateon', PROP_STRING],
+    ['conditionalclass', PROP_ANY],
+    ['conditionalstyle', PROP_ANY]
 ]);
 const registerProps$2 = () => {
     register('wm-input-number', inputNumberTypeProps);
@@ -2699,22 +2731,22 @@ InputNumberComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputN
             provideAs(InputNumberComponent, NG_VALUE_ACCESSOR, true),
             provideAs(InputNumberComponent, NG_VALIDATORS, true),
             provideAsWidgetRef(InputNumberComponent)
-        ]), i0.ɵɵ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) { if (rf & 1) {
+        ]), i0.ɵɵ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.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "input", 0, 1);
         i0.ɵɵlistener("ngModelChange", function InputNumberComponent_Template_input_ngModelChange_0_listener($event) { return ctx.datavalue = $event; })("blur", function InputNumberComponent_Template_input_blur_0_listener($event) { return ctx.handleBlur($event); })("ngModelChange", function InputNumberComponent_Template_input_ngModelChange_0_listener($event) { return ctx.handleChange($event); })("keyup.enter", function InputNumberComponent_Template_input_keyup_enter_0_listener() { i0.ɵɵrestoreView(_r1); const _r0 = i0.ɵɵreference(1); return i0.ɵɵresetView(ctx.flushViewChanges(_r0.value)); })("keydown.ArrowUp", function InputNumberComponent_Template_input_keydown_ArrowUp_0_listener($event) { return ctx.onArrowPress($event); })("keydown.ArrowDown", function InputNumberComponent_Template_input_keydown_ArrowDown_0_listener($event) { return ctx.onArrowPress($event); })("keypress", function InputNumberComponent_Template_input_keypress_0_listener($event) { return ctx.validateInputEntry($event); });
         i0.ɵɵelementEnd();
     } if (rf & 2) {
-        i0.ɵɵproperty("ngClass", i0.ɵɵ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.ɵɵproperty("ngClass", i0.ɵɵ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.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
-    } }, dependencies: [i1.NgClass, i1$1.DefaultValueAccessor, i1$1.NgControlStatus, i1$1.RequiredValidator, i1$1.MaxLengthValidator, i1$1.NgModel], encapsulation: 2 });
+    } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.NgModel], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputNumberComponent, [{
         type: Component,
         args: [{ selector: 'wm-input[type="number"]', providers: [
                     provideAs(InputNumberComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(InputNumberComponent, NG_VALIDATORS, true),
                     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.Injector }]; }, { inputEl: [{
             type: ViewChild,
             args: ['input', { static: true }]
@@ -2744,7 +2776,9 @@ const inputTextTypeProps = new Map([
     ['showdisplayformaton', { value: 'always', ...PROP_ANY }],
     ['tabindex', { value: 0, ...PROP_NUMBER }],
     ['type', { value: 'text', ...PROP_STRING }],
-    ['updateon', PROP_STRING]
+    ['updateon', PROP_STRING],
+    ['conditionalclass', PROP_ANY],
+    ['conditionalstyle', PROP_ANY]
 ]);
 const registerProps$1 = () => {
     register('wm-input-text', inputTextTypeProps);
@@ -2855,22 +2889,22 @@ InputTextComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputTex
             provideAs(InputTextComponent, NG_VALUE_ACCESSOR, true),
             provideAs(InputTextComponent, NG_VALIDATORS, true),
             provideAsWidgetRef(InputTextComponent)
-        ]), i0.ɵɵ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) { if (rf & 1) {
+        ]), i0.ɵɵ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.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "input", 0, 1);
         i0.ɵɵlistener("ngModelChange", function InputTextComponent_Template_input_ngModelChange_0_listener($event) { return ctx.datavalue = $event; })("ngModelChange", function InputTextComponent_Template_input_ngModelChange_0_listener($event) { return ctx.handleChange($event); })("blur", function InputTextComponent_Template_input_blur_0_listener($event) { ctx.handleBlur($event); return ctx.checkForDisplayFormat($event); })("focus", function InputTextComponent_Template_input_focus_0_listener($event) { return ctx.checkForDisplayFormat($event); })("keyup.enter", function InputTextComponent_Template_input_keyup_enter_0_listener() { i0.ɵɵrestoreView(_r1); const _r0 = i0.ɵɵreference(1); return i0.ɵɵresetView(ctx.flushViewChanges(_r0.value)); });
         i0.ɵɵelementEnd();
     } if (rf & 2) {
-        i0.ɵɵ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.ɵɵ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.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey);
-    } }, dependencies: [i1$1.DefaultValueAccessor, i1$1.NgControlStatus, i1$1.RequiredValidator, i1$1.MaxLengthValidator, i1$1.PatternValidator, i1$1.NgModel, i2$1.IMaskDirective], encapsulation: 2 });
+    } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.PatternValidator, i2$1.NgModel, i3.IMaskDirective], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputTextComponent, [{
         type: 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: [
                     provideAs(InputTextComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(InputTextComponent, NG_VALIDATORS, true),
                     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.Injector }]; }, { inputEl: [{
             type: ViewChild,
             args: ['input', { static: true }]
@@ -2901,6 +2935,8 @@ const textareaProps = new Map([
     ['updateon', PROP_STRING],
     ['limitdisplaytext', PROP_STRING],
     ['charlength', PROP_NUMBER],
+    ['conditionalclass', PROP_ANY],
+    ['conditionalstyle', PROP_ANY]
 ]);
 const registerProps = () => {
     register('wm-textarea', textareaProps);
@@ -2943,24 +2979,24 @@ TextareaComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TextareaC
             provideAs(TextareaComponent, NG_VALUE_ACCESSOR, true),
             provideAs(TextareaComponent, NG_VALIDATORS, true),
             provideAsWidgetRef(TextareaComponent)
-        ]), i0.ɵɵ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) { if (rf & 1) {
+        ]), i0.ɵɵ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.ɵɵelementStart(0, "textarea", 0, 1);
         i0.ɵɵ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(); });
         i0.ɵɵelementEnd();
         i0.ɵɵtemplate(2, TextareaComponent_div_2_Template, 2, 1, "div", 2);
     } if (rf & 2) {
-        i0.ɵɵproperty("ngModel", ctx.datavalue)("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus);
+        i0.ɵɵ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.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", ctx.maxchars);
-    } }, dependencies: [i1.NgIf, i1$1.DefaultValueAccessor, i1$1.NgControlStatus, i1$1.RequiredValidator, i1$1.MaxLengthValidator, i1$1.NgModel], encapsulation: 2 });
+    } }, dependencies: [i1.NgClass, i1.NgIf, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.NgModel], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TextareaComponent, [{
         type: Component,
         args: [{ selector: 'wm-textarea', providers: [
                     provideAs(TextareaComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(TextareaComponent, NG_VALIDATORS, true),
                     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.Injector }]; }, { inputEl: [{
             type: ViewChild,
             args: ['textarea', { static: true }]
@@ -3090,7 +3126,7 @@ class CaptionPositionDirective {
             // isSelectMultiple is set to true when for select widget, multiple option is enabled
             // Checking inputEl focus - when form is represented as dialog and the first field is automatically in focus
             const isInputElFocused = this.inputEl && this.inputEl.is(':focus');
-            if (data.displayVal || data.isFocused || data.isSelectMultiple || isInputElFocused) {
+            if (data.isSelect || data.displayVal || data.isFocused || data.isSelectMultiple || isInputElFocused) {
                 data.nativeEl.addClass('float-active');
                 if (!data.displayVal && isInputElFocused) {
                     this.inputEl.attr('placeholder', this.placeholder);
@@ -3125,14 +3161,14 @@ class CaptionPositionDirective {
         }
     }
 }
-CaptionPositionDirective.ɵfac = function CaptionPositionDirective_Factory(t) { return new (t || CaptionPositionDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1$2.App)); };
+CaptionPositionDirective.ɵfac = function CaptionPositionDirective_Factory(t) { return new (t || CaptionPositionDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1$1.App)); };
 CaptionPositionDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: CaptionPositionDirective, selectors: [["", "wmCaptionPosition", ""]] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaptionPositionDirective, [{
         type: Directive,
         args: [{
                 selector: '[wmCaptionPosition]'
             }]
-    }], function () { return [{ type: i0.Injector }, { type: i1$2.App }]; }, null); })();
+    }], function () { return [{ type: i0.Injector }, { type: i1$1.App }]; }, null); })();
 
 const components = [
     ButtonComponent,