@wavemaker/app-ng-runtime 11.7.5-rc.5649 → 11.8.0-next.1417111

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

@@ -1,16 +1,17 @@
 import * as i0 from '@angular/core';
-import { Component, HostBinding, Directive, HostListener, Injectable, Inject, ElementRef, Attribute, ViewChild, ContentChildren, NgModule } from '@angular/core';
+import { Component, Inject, Optional, HostBinding, Directive, HostListener, Injectable, ElementRef, Attribute, ViewChild, ContentChildren, Injector, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
-import { getLocaleNumberSymbol, NumberSymbol, CommonModule } from '@angular/common';
+import { NumberSymbol, getLocaleNumberSymbol, CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/forms';
 import { FormControlName, NgModel, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
 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 { PROP_STRING, PROP_ANY, PROP_BOOLEAN, PROP_NUMBER, register, DISPLAY_TYPE, StylableComponent, styler, provideAsWidgetRef, APPLY_STYLES_TYPE, WidgetConfig, registerFormWidget, provideAs, extractDataAsArray, ToDatePipe, ALLFIELDS, convertDataToObject, getOrderedDataset, transformDataWithKeys, transformFormData, getUniqObjsByDataField, groupData, handleHeaderClick, toggleAllHeaders, WidgetRef, INPUTMODE, TrailingZeroDecimalPipe, WmComponentsModule } from '@wm/components/base';
 import * as i1$1 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 { DataSource, FormWidgetType, isDefined, toggleClass, AppDefaults, $appDigest, debounce, noop, isEqualWithFields, toBoolean, setListClass, switchClass, addForIdAttributes, addClass, AbstractI18nService, setAttr, removeAttr, isIos, setCSS } from '@wm/core';
 import { Subject } from 'rxjs';
+import { __param, __metadata, __decorate } from 'tslib';
 
 const registerProps$e = () => {
     register('wm-button', new Map([
@@ -37,39 +38,39 @@ const registerProps$e = () => {
 };
 
 const _c0$c = ["wmButton", ""];
-const _c1$b = function (a0, a1, a2) { return { width: a0, height: a1, margin: a2 }; };
+const _c1$b = [[["", 8, "caret"]]];
+const _c2$5 = [".caret"];
+const _c3$2 = (a0, a1, a2) => ({ width: a0, height: a1, margin: a2 });
+const _c4$2 = (a0, a1, a2, a3) => ({ width: a0, height: a1, margin: a2, fontSize: a3 });
 function ButtonComponent_img_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "img", 5);
     i0.ɵɵpipe(1, "image");
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("src", i0.ɵɵpipeBind1(1, 2, ctx_r0.iconurl), i0.ɵɵsanitizeUrl)("ngStyle", i0.ɵɵpureFunction3(4, _c1$b, ctx_r0.iconwidth, ctx_r0.iconheight, ctx_r0.iconmargin));
+    i0.ɵɵproperty("src", i0.ɵɵpipeBind1(1, 2, ctx_r0.iconurl), i0.ɵɵsanitizeUrl)("ngStyle", i0.ɵɵpureFunction3(4, _c3$2, ctx_r0.iconwidth, ctx_r0.iconheight, ctx_r0.iconmargin));
 } }
-const _c2$5 = function (a0, a1, a2, a3) { return { width: a0, height: a1, margin: a2, fontSize: a3 }; };
 function ButtonComponent_i_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 6);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵclassMapInterpolate1("app-icon ", ctx_r1.iconclass, "");
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction4(4, _c2$5, ctx_r1.iconwidth, ctx_r1.iconheight, ctx_r1.iconmargin, ctx_r1.iconwidth));
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassMapInterpolate1("app-icon ", ctx_r0.iconclass, "");
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction4(4, _c4$2, ctx_r0.iconwidth, ctx_r0.iconheight, ctx_r0.iconmargin, ctx_r0.iconwidth));
 } }
 function ButtonComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 7);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate2("", ctx_r2.caption, " ", ctx_r2.appLocale.LABEL_ICON, "");
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2("", ctx_r0.caption, " ", ctx_r0.appLocale.LABEL_ICON, "");
 } }
 function ButtonComponent_span_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 8);
 } if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("textContent", ctx_r3.badgevalue);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("textContent", ctx_r0.badgevalue);
 } }
-const _c3$2 = [[["", 8, "caret"]]];
-const _c4$2 = [".caret"];
 const DEFAULT_CLS$6 = 'btn app-button';
 const WIDGET_CONFIG$e = {
     widgetType: 'wm-button',
@@ -78,42 +79,45 @@ const WIDGET_CONFIG$e = {
 };
 class ButtonComponent extends StylableComponent {
     static { this.initializeProps = registerProps$e(); }
-    constructor(inj) {
-        super(inj, WIDGET_CONFIG$e);
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG$e, explicitContext);
         styler(this.nativeElement, this);
     }
-    static { this.ɵfac = function ButtonComponent_Factory(t) { return new (t || ButtonComponent)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵfac = function ButtonComponent_Factory(t) { return new (t || ButtonComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ButtonComponent, selectors: [["button", "wmButton", ""]], hostVars: 5, hostBindings: function ButtonComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵhostProperty("type", ctx.type)("tabIndex", ctx.tabindex)("disabled", ctx.disabled);
             i0.ɵɵattribute("accesskey", ctx.shortcutkey)("icon-position", ctx.iconposition);
         } }, exportAs: ["wmButton"], features: [i0.ɵɵProvidersFeature([
                 provideAsWidgetRef(ButtonComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$c, ngContentSelectors: _c4$2, decls: 6, vars: 5, consts: [["data-identifier", "img", "alt", "button image", "class", "button-image-icon", 3, "src", "ngStyle", 4, "ngIf"], ["aria-hidden", "true", 3, "class", "ngStyle", 4, "ngIf"], ["class", "sr-only", 4, "ngIf"], [1, "btn-caption", 3, "innerHTML"], ["class", "badge pull-right", 3, "textContent", 4, "ngIf"], ["data-identifier", "img", "alt", "button image", 1, "button-image-icon", 3, "src", "ngStyle"], ["aria-hidden", "true", 3, "ngStyle"], [1, "sr-only"], [1, "badge", "pull-right", 3, "textContent"]], template: function ButtonComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c3$2);
-            i0.ɵɵtemplate(0, ButtonComponent_img_0_Template, 2, 8, "img", 0);
-            i0.ɵɵtemplate(1, ButtonComponent_i_1_Template, 1, 9, "i", 1);
-            i0.ɵɵtemplate(2, ButtonComponent_span_2_Template, 2, 2, "span", 2);
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$c, ngContentSelectors: _c2$5, decls: 6, vars: 5, consts: [["data-identifier", "img", "alt", "button image", "class", "button-image-icon", 3, "src", "ngStyle", 4, "ngIf"], ["aria-hidden", "true", 3, "class", "ngStyle", 4, "ngIf"], ["class", "sr-only", 4, "ngIf"], [1, "btn-caption", 3, "innerHTML"], ["class", "badge pull-right", 3, "textContent", 4, "ngIf"], ["data-identifier", "img", "alt", "button image", 1, "button-image-icon", 3, "src", "ngStyle"], ["aria-hidden", "true", 3, "ngStyle"], [1, "sr-only"], [1, "badge", "pull-right", 3, "textContent"]], template: function ButtonComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c1$b);
+            i0.ɵɵtemplate(0, ButtonComponent_img_0_Template, 2, 8, "img", 0)(1, ButtonComponent_i_1_Template, 1, 9, "i", 1)(2, ButtonComponent_span_2_Template, 2, 2, "span", 2);
             i0.ɵɵelement(3, "span", 3);
             i0.ɵɵprojection(4);
             i0.ɵɵtemplate(5, ButtonComponent_span_5_Template, 1, 1, "span", 4);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.iconurl);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.iconclass);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.iconclass);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("innerHTML", ctx.caption, i0.ɵɵsanitizeHtml);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.badgevalue);
         } }, dependencies: [i1.NgIf, i1.NgStyle, i2.TextContentDirective, i2.ImagePipe], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ButtonComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ButtonComponent, [{
         type: Component,
         args: [{ selector: 'button[wmButton]', providers: [
                     provideAsWidgetRef(ButtonComponent)
                 ], exportAs: 'wmButton', template: "<img data-identifier=\"img\" alt=\"button image\" class=\"button-image-icon\" [src]=\"iconurl | image\" *ngIf=\"iconurl\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"/>\n<i class=\"app-icon {{iconclass}}\" aria-hidden=\"true\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin, fontSize:iconwidth}\" *ngIf=\"iconclass\"></i>\n<span class=\"sr-only\" *ngIf=\"iconclass\">{{caption}} {{appLocale.LABEL_ICON}}</span>\n<span class=\"btn-caption\" [innerHTML]=\"caption\"></span>\n<ng-content select=\".caret\"></ng-content>\n<span *ngIf=\"badgevalue\" class=\"badge pull-right\" [textContent]=\"badgevalue\"></span>\n" }]
-    }], function () { return [{ type: i0.Injector }]; }, { type: [{
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { type: [{
             type: HostBinding,
             args: ['type']
         }], tabindex: [{
@@ -129,6 +133,7 @@ class ButtonComponent extends StylableComponent {
             type: HostBinding,
             args: ['attr.icon-position']
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ButtonComponent, { className: "ButtonComponent", filePath: "button/button.component.ts", lineNumber: 22 }); })();
 
 const registerProps$d = () => {
     register('wm-buttongroup', new Map([
@@ -151,11 +156,11 @@ class ButtonGroupDirective extends StylableComponent {
         this.$element.find('.app-button').removeClass('selected');
         $target.addClass('selected');
     }
-    constructor(inj) {
-        super(inj, WIDGET_CONFIG$d);
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG$d, explicitContext);
         styler(this.nativeElement, this, APPLY_STYLES_TYPE.CONTAINER);
     }
-    static { this.ɵfac = function ButtonGroupDirective_Factory(t) { return new (t || ButtonGroupDirective)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵfac = function ButtonGroupDirective_Factory(t) { return new (t || ButtonGroupDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ButtonGroupDirective, selectors: [["", "wmButtonGroup", ""]], hostVars: 2, hostBindings: function ButtonGroupDirective_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("click", function ButtonGroupDirective_click_HostBindingHandler($event) { return ctx.handleClick($event); });
         } if (rf & 2) {
@@ -164,7 +169,7 @@ class ButtonGroupDirective extends StylableComponent {
                 provideAsWidgetRef(ButtonGroupDirective)
             ]), i0.ɵɵInheritDefinitionFeature] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ButtonGroupDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ButtonGroupDirective, [{
         type: Directive,
         args: [{
                 selector: '[wmButtonGroup]',
@@ -172,7 +177,12 @@ class ButtonGroupDirective extends StylableComponent {
                     provideAsWidgetRef(ButtonGroupDirective)
                 ]
             }]
-    }], function () { return [{ type: i0.Injector }]; }, { vertical: [{
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { vertical: [{
             type: HostBinding,
             args: ['class.btn-group-vertical']
         }], handleClick: [{
@@ -251,12 +261,12 @@ class BaseFormComponent extends StylableComponent {
     static { this.ɵfac = function BaseFormComponent_Factory(t) { return new (t || BaseFormComponent)(i0.ɵɵinject(i0.Injector), i0.ɵɵinject(WidgetConfig), i0.ɵɵinject(Promise)); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: BaseFormComponent, factory: BaseFormComponent.ɵfac }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseFormComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseFormComponent, [{
         type: Injectable
-    }], function () { return [{ type: i0.Injector }, { type: undefined, decorators: [{
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [WidgetConfig]
-            }] }, { type: Promise }]; }, null); })();
+            }] }, { type: Promise }], null); })();
 
 /*
  * WMS-18269
@@ -336,10 +346,10 @@ class BaseFormCustomComponent extends BaseFormComponent {
     validate(control) {
         return this['show'] ? validateRequiredBind(this['required'])(control) : null;
     }
-    static { this.ɵfac = /*@__PURE__*/ function () { let ɵBaseFormCustomComponent_BaseFactory; return function BaseFormCustomComponent_Factory(t) { return (ɵBaseFormCustomComponent_BaseFactory || (ɵBaseFormCustomComponent_BaseFactory = i0.ɵɵgetInheritedFactory(BaseFormCustomComponent)))(t || BaseFormCustomComponent); }; }(); }
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵBaseFormCustomComponent_BaseFactory; return function BaseFormCustomComponent_Factory(t) { return (ɵBaseFormCustomComponent_BaseFactory || (ɵBaseFormCustomComponent_BaseFactory = i0.ɵɵgetInheritedFactory(BaseFormCustomComponent)))(t || BaseFormCustomComponent); }; })(); }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: BaseFormCustomComponent, factory: BaseFormCustomComponent.ɵfac }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseFormCustomComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseFormCustomComponent, [{
         type: Injectable
     }], null, null); })();
 
@@ -369,7 +379,7 @@ const registerProps$c = () => {
 
 const _c0$b = ["checkbox"];
 const _c1$a = ["wmCheckbox", ""];
-const _c2$4 = function (a0, a1, a2) { return { "unchecked": a0, "disabled": a1, "required": a2 }; };
+const _c2$4 = (a0, a1, a2) => ({ "unchecked": a0, "disabled": a1, "required": a2 });
 const DEFAULT_CLS$4 = 'app-checkbox checkbox';
 const WIDGET_CONFIG$c = {
     widgetType: 'wm-checkbox',
@@ -407,8 +417,8 @@ class CheckboxComponent extends BaseFormCustomComponent {
         this.proxyModel = (isDefined(v) && v !== '') ? v === this._checkedvalue : undefined;
         this.updatePrevDatavalue(this.datavalue);
     }
-    constructor(inj, checkedVal, uncheckedVal, type) {
-        super(inj, WIDGET_CONFIG$c);
+    constructor(inj, checkedVal, uncheckedVal, type, explicitContext) {
+        super(inj, WIDGET_CONFIG$c, explicitContext);
         this.type = type;
         this._caption = '&nbsp';
         this._checkedvalue = unStringify(checkedVal, true);
@@ -465,7 +475,7 @@ class CheckboxComponent extends BaseFormCustomComponent {
         super.ngAfterViewInit();
         styler(this.nativeElement.querySelector('label'), this);
     }
-    static { this.ɵfac = function CheckboxComponent_Factory(t) { return new (t || CheckboxComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵinjectAttribute('checkedvalue'), i0.ɵɵinjectAttribute('uncheckedvalue'), i0.ɵɵinjectAttribute('type')); }; }
+    static { this.ɵfac = function CheckboxComponent_Factory(t) { return new (t || CheckboxComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵinjectAttribute('checkedvalue'), i0.ɵɵinjectAttribute('uncheckedvalue'), i0.ɵɵinjectAttribute('type'), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CheckboxComponent, selectors: [["", "wmCheckbox", ""]], viewQuery: function CheckboxComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(NgModel, 5);
             i0.ɵɵviewQuery(_c0$b, 7, ElementRef);
@@ -479,17 +489,20 @@ class CheckboxComponent extends BaseFormCustomComponent {
                 provideAs(CheckboxComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(CheckboxComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(CheckboxComponent)
-            ]), i0.ɵɵ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) {
-            i0.ɵɵelementStart(0, "label", 0)(1, "input", 1, 2);
-            i0.ɵɵlistener("ngModelChange", function CheckboxComponent_Template_input_ngModelChange_1_listener($event) { return ctx.proxyModel = $event; })("blur", function CheckboxComponent_Template_input_blur_1_listener($event) { return ctx.invokeOnTouched($event); })("ngModelChange", function CheckboxComponent_Template_input_ngModelChange_1_listener($event) { return ctx.handleChange($event); });
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$a, decls: 6, vars: 17, consts: [["checkbox", ""], [3, "ngClass"], ["type", "checkbox", "role", "checkbox", "focus-target", "", 3, "ngModelChange", "blur", "ngModel", "readonly", "required", "disabled", "tabindex"], [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) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "label", 1)(1, "input", 2, 0);
+            i0.ɵɵtwoWayListener("ngModelChange", function CheckboxComponent_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.proxyModel, $event) || (ctx.proxyModel = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("blur", function CheckboxComponent_Template_input_blur_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.invokeOnTouched($event)); })("ngModelChange", function CheckboxComponent_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleChange($event)); });
             i0.ɵɵelementEnd();
             i0.ɵɵelement(3, "span", 3)(4, "img", 4);
             i0.ɵɵelementEnd();
             i0.ɵɵelement(5, "input", 5);
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(13, _c2$4, !ctx.proxyModel, ctx.disabled || ctx.readonly, ctx.required && ctx._caption));
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngModel", ctx.proxyModel)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled || ctx.readonly)("tabindex", ctx.tabindex);
+            i0.ɵɵadvance();
+            i0.ɵɵtwoWayProperty("ngModel", ctx.proxyModel);
+            i0.ɵɵproperty("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled || ctx.readonly)("tabindex", ctx.tabindex);
             i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("aria-checked", !!ctx.proxyModel)("accesskey", ctx.shortcutkey);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("innerHtml", ctx._caption, i0.ɵɵsanitizeHtml);
@@ -497,14 +510,14 @@ class CheckboxComponent extends BaseFormCustomComponent {
             i0.ɵɵproperty("disabled", ctx.disabled)("value", ctx.proxyModel);
         } }, 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, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckboxComponent, [{
         type: Component,
         args: [{ selector: '[wmCheckbox]', providers: [
                     provideAs(CheckboxComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(CheckboxComponent, NG_VALIDATORS, true),
                     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 () { return [{ type: i0.Injector }, { type: undefined, decorators: [{
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['checkedvalue']
             }] }, { type: undefined, decorators: [{
@@ -513,7 +526,12 @@ class CheckboxComponent extends BaseFormCustomComponent {
             }] }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['type']
-            }] }]; }, { ngModel: [{
+            }] }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { ngModel: [{
             type: ViewChild,
             args: [NgModel]
         }], checkboxEl: [{
@@ -523,6 +541,7 @@ class CheckboxComponent extends BaseFormCustomComponent {
             type: HostListener,
             args: ['keydown.enter', ['$event', '"ENTER"']]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CheckboxComponent, { className: "CheckboxComponent", filePath: "checkbox/checkbox.component.ts", lineNumber: 59 }); })();
 
 class DatasetAwareFormComponent extends BaseFormCustomComponent {
     get modelByKey() {
@@ -807,15 +826,15 @@ class DatasetAwareFormComponent extends BaseFormCustomComponent {
     static { this.ɵfac = function DatasetAwareFormComponent_Factory(t) { return new (t || DatasetAwareFormComponent)(i0.ɵɵinject(i0.Injector), i0.ɵɵinject(WidgetConfig), i0.ɵɵinjectAttribute('groupby')); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: DatasetAwareFormComponent, factory: DatasetAwareFormComponent.ɵfac }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DatasetAwareFormComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DatasetAwareFormComponent, [{
         type: Injectable
-    }], function () { return [{ type: i0.Injector }, { type: undefined, decorators: [{
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [WidgetConfig]
             }] }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['groupby']
-            }] }]; }, null); })();
+            }] }], null); })();
 
 const checkboxsetProps = new Map([
     ['class', PROP_STRING],
@@ -851,60 +870,61 @@ const registerProps$b = () => {
 };
 
 const _c0$a = ["wmCheckboxset", ""];
-const _c1$9 = function (a0) { return { "disabled": a0 }; };
+const _c1$9 = (a0, a1) => ["checkbox", "app-checkbox", a0, a1];
+const _c2$3 = a0 => ({ "disabled": a0 });
+const _c3$1 = a0 => ({ "collapsible-content": a0 });
+const _c4$1 = (a0, a1) => ["checkbox", "app-checkbox", "group-list-item", a0, a1];
 function CheckboxsetComponent_ng_template_0_li_0_label_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "label", 8);
     i0.ɵɵelement(1, "input", 9)(2, "span", 10);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r9 = i0.ɵɵnextContext();
-    const item_r5 = ctx_r9.$implicit;
-    const i_r6 = ctx_r9.index;
-    const ctx_r7 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c1$9, ctx_r7.disabled || ctx_r7.readonly))("title", item_r5.label);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("name", "checkboxset_" + ctx_r7.widgetId)("tabindex", ctx_r7.tabindex)("disabled", ctx_r7.disabled || ctx_r7.readonly)("value", item_r5.key)("tabindex", ctx_r7.tabindex)("checked", item_r5.selected);
-    i0.ɵɵattribute("aria-label", item_r5.key)("aria-checked", item_r5.selected)("data-attr-index", i_r6);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("textContent", item_r5.label);
+    const ctx_r3 = i0.ɵɵnextContext();
+    const item_r2 = ctx_r3.$implicit;
+    const i_r5 = ctx_r3.index;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c2$3, ctx_r2.disabled || ctx_r2.readonly))("title", item_r2.label);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r2.key)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
+    i0.ɵɵattribute("aria-label", item_r2.key)("aria-checked", item_r2.selected)("data-attr-index", i_r5);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("textContent", item_r2.label);
 } }
 function CheckboxsetComponent_ng_template_0_li_0_label_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "label", 11);
     i0.ɵɵelement(1, "input", 9)(2, "span", 12);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r10 = i0.ɵɵnextContext();
-    const item_r5 = ctx_r10.$implicit;
-    const i_r6 = ctx_r10.index;
-    const ctx_r8 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c1$9, ctx_r8.disabled || ctx_r8.readonly));
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("name", "checkboxset_" + ctx_r8.widgetId)("tabindex", ctx_r8.tabindex)("disabled", ctx_r8.disabled || ctx_r8.readonly)("value", item_r5.key)("tabindex", ctx_r8.tabindex)("checked", item_r5.selected);
-    i0.ɵɵattribute("aria-label", item_r5.key)("aria-checked", item_r5.selected)("data-attr-index", i_r6);
+    const ctx_r3 = i0.ɵɵnextContext();
+    const item_r2 = ctx_r3.$implicit;
+    const i_r5 = ctx_r3.index;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c2$3, ctx_r2.disabled || ctx_r2.readonly));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r2.key)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
+    i0.ɵɵattribute("aria-label", item_r2.key)("aria-checked", item_r2.selected)("data-attr-index", i_r5);
 } }
-const _c2$3 = function (a2, a3) { return ["checkbox", "app-checkbox", a2, a3]; };
 function CheckboxsetComponent_ng_template_0_li_0_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
+    const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li", 5);
-    i0.ɵɵlistener("click", function CheckboxsetComponent_ng_template_0_li_0_Template_li_click_0_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r12); const item_r5 = restoredCtx.$implicit; const ctx_r11 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r11.onCheckboxLabelClick($event, item_r5.key)); });
-    i0.ɵɵtemplate(1, CheckboxsetComponent_ng_template_0_li_0_label_1_Template, 3, 14, "label", 6);
-    i0.ɵɵtemplate(2, CheckboxsetComponent_ng_template_0_li_0_label_2_Template, 3, 12, "label", 7);
+    i0.ɵɵlistener("click", function CheckboxsetComponent_ng_template_0_li_0_Template_li_click_0_listener($event) { const item_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCheckboxLabelClick($event, item_r2.key)); });
+    i0.ɵɵtemplate(1, CheckboxsetComponent_ng_template_0_li_0_label_1_Template, 3, 14, "label", 6)(2, CheckboxsetComponent_ng_template_0_li_0_label_2_Template, 3, 12, "label", 7);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r5 = ctx.$implicit;
-    const ctx_r4 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("active", item_r5.selected);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c2$3, ctx_r4.itemclass, ctx_r4.itemsPerRowClass))("wmItemTemplate", ctx_r4.content)("userComponentParams", item_r5);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", !ctx_r4.content);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r4.content);
+    const item_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("active", item_r2.selected);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c1$9, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r2.content);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.content);
 } }
 function CheckboxsetComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, CheckboxsetComponent_ng_template_0_li_0_Template, 3, 10, "li", 4);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngForOf", ctx_r0.datasetItems);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngForOf", ctx_r2.datasetItems);
 } }
 function CheckboxsetComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 13);
@@ -912,102 +932,98 @@ function CheckboxsetComponent_div_2_Template(rf, ctx) { if (rf & 1) {
 function CheckboxsetComponent_ng_template_3_li_0_i_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 23);
 } if (rf & 2) {
-    const ctx_r15 = i0.ɵɵnextContext(3);
-    i0.ɵɵpropertyInterpolate2("title", "", ctx_r15.appLocale.LABEL_COLLAPSE, "/", ctx_r15.appLocale.LABEL_EXPAND, "");
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵpropertyInterpolate2("title", "", ctx_r2.appLocale.LABEL_COLLAPSE, "/", ctx_r2.appLocale.LABEL_EXPAND, "");
 } }
 function CheckboxsetComponent_ng_template_3_li_0_span_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 24);
 } if (rf & 2) {
-    const groupObj_r14 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("textContent", groupObj_r14.data.length);
+    const groupObj_r7 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("textContent", groupObj_r7.data.length);
 } }
 function CheckboxsetComponent_ng_template_3_li_0_li_8_label_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "label", 8);
     i0.ɵɵelement(1, "input", 26)(2, "span", 10);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r23 = i0.ɵɵnextContext();
-    const item_r19 = ctx_r23.$implicit;
-    const i_r20 = ctx_r23.index;
-    const ctx_r21 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c1$9, ctx_r21.disabled || ctx_r21.readonly))("title", item_r19.label);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("name", "checkboxset_" + ctx_r21.widgetId)("tabindex", ctx_r21.tabindex)("disabled", ctx_r21.disabled || ctx_r21.readonly)("value", item_r19.key)("tabindex", ctx_r21.tabindex)("checked", item_r19.selected);
-    i0.ɵɵattribute("data-attr-index", i_r20);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("textContent", item_r19.label);
+    const ctx_r9 = i0.ɵɵnextContext();
+    const item_r9 = ctx_r9.$implicit;
+    const i_r11 = ctx_r9.index;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c2$3, ctx_r2.disabled || ctx_r2.readonly))("title", item_r9.label);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r9.key)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
+    i0.ɵɵattribute("data-attr-index", i_r11);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("textContent", item_r9.label);
 } }
 function CheckboxsetComponent_ng_template_3_li_0_li_8_label_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "label", 11);
     i0.ɵɵelement(1, "input", 26)(2, "span", 27);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r24 = i0.ɵɵnextContext();
-    const item_r19 = ctx_r24.$implicit;
-    const i_r20 = ctx_r24.index;
-    const ctx_r22 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c1$9, ctx_r22.disabled || ctx_r22.readonly));
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("name", "checkboxset_" + ctx_r22.widgetId)("tabindex", ctx_r22.tabindex)("disabled", ctx_r22.disabled || ctx_r22.readonly)("value", item_r19.key)("tabindex", ctx_r22.tabindex)("checked", item_r19.selected);
-    i0.ɵɵattribute("data-attr-index", i_r20);
+    const ctx_r9 = i0.ɵɵnextContext();
+    const item_r9 = ctx_r9.$implicit;
+    const i_r11 = ctx_r9.index;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c2$3, ctx_r2.disabled || ctx_r2.readonly));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r9.key)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
+    i0.ɵɵattribute("data-attr-index", i_r11);
 } }
-const _c3$1 = function (a3, a4) { return ["checkbox", "app-checkbox", "group-list-item", a3, a4]; };
 function CheckboxsetComponent_ng_template_3_li_0_li_8_Template(rf, ctx) { if (rf & 1) {
-    const _r26 = i0.ɵɵgetCurrentView();
+    const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li", 25);
-    i0.ɵɵlistener("click", function CheckboxsetComponent_ng_template_3_li_0_li_8_Template_li_click_0_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r26); const item_r19 = restoredCtx.$implicit; const ctx_r25 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r25.onCheckboxLabelClick($event, item_r19)); });
-    i0.ɵɵtemplate(1, CheckboxsetComponent_ng_template_3_li_0_li_8_label_1_Template, 3, 12, "label", 6);
-    i0.ɵɵtemplate(2, CheckboxsetComponent_ng_template_3_li_0_li_8_label_2_Template, 3, 10, "label", 7);
+    i0.ɵɵlistener("click", function CheckboxsetComponent_ng_template_3_li_0_li_8_Template_li_click_0_listener($event) { const item_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onCheckboxLabelClick($event, item_r9)); });
+    i0.ɵɵtemplate(1, CheckboxsetComponent_ng_template_3_li_0_li_8_label_1_Template, 3, 12, "label", 6)(2, CheckboxsetComponent_ng_template_3_li_0_li_8_label_2_Template, 3, 10, "label", 7);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r19 = ctx.$implicit;
-    const ctx_r17 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("active", item_r19.selected);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c3$1, ctx_r17.itemclass, ctx_r17.itemsPerRowClass))("wmItemTemplate", ctx_r17.content)("userComponentParams", item_r19);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", !ctx_r17.content);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r17.content);
+    const item_r9 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("active", item_r9.selected);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c4$1, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r9);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r2.content);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.content);
 } }
-const _c4$1 = function (a0) { return { "collapsible-content": a0 }; };
 function CheckboxsetComponent_ng_template_3_li_0_Template(rf, ctx) { if (rf & 1) {
-    const _r28 = i0.ɵɵgetCurrentView();
+    const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li", 15)(1, "ul", 16)(2, "li", 17);
-    i0.ɵɵlistener("click", function CheckboxsetComponent_ng_template_3_li_0_Template_li_click_2_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r27 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r27.handleHeaderClick($event)); });
+    i0.ɵɵlistener("click", function CheckboxsetComponent_ng_template_3_li_0_Template_li_click_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.handleHeaderClick($event)); });
     i0.ɵɵelementStart(3, "h4", 18);
     i0.ɵɵtext(4);
     i0.ɵɵelementStart(5, "div", 19);
-    i0.ɵɵtemplate(6, CheckboxsetComponent_ng_template_3_li_0_i_6_Template, 1, 2, "i", 20);
-    i0.ɵɵtemplate(7, CheckboxsetComponent_ng_template_3_li_0_span_7_Template, 1, 1, "span", 21);
+    i0.ɵɵtemplate(6, CheckboxsetComponent_ng_template_3_li_0_i_6_Template, 1, 3, "i", 20)(7, CheckboxsetComponent_ng_template_3_li_0_span_7_Template, 1, 1, "span", 21);
     i0.ɵɵelementEnd()()();
     i0.ɵɵtemplate(8, CheckboxsetComponent_ng_template_3_li_0_li_8_Template, 3, 10, "li", 22);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const groupObj_r14 = ctx.$implicit;
-    const ctx_r13 = i0.ɵɵnextContext(2);
+    const groupObj_r7 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("title", groupObj_r14.key)("ngClass", i0.ɵɵpureFunction1(6, _c4$1, ctx_r13.collapsible));
+    i0.ɵɵproperty("title", groupObj_r7.key)("ngClass", i0.ɵɵpureFunction1(6, _c3$1, ctx_r2.collapsible));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", groupObj_r14.key, " ");
+    i0.ɵɵtextInterpolate1("", groupObj_r7.key, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r13.collapsible);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r13.showcount);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", groupObj_r14.data);
+    i0.ɵɵproperty("ngIf", ctx_r2.collapsible);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.showcount);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", groupObj_r7.data);
 } }
 function CheckboxsetComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, CheckboxsetComponent_ng_template_3_li_0_Template, 9, 8, "li", 14);
 } if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngForOf", ctx_r3.groupedData);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngForOf", ctx_r2.groupedData);
 } }
 const DEFAULT_CLS$3 = 'app-checkboxset list-group inline';
 const WIDGET_CONFIG$b = { widgetType: 'wm-checkboxset', hostClass: DEFAULT_CLS$3 };
 class CheckboxsetComponent extends DatasetAwareFormComponent {
     static { this.initializeProps = registerProps$b(); }
-    constructor(inj) {
-        super(inj, WIDGET_CONFIG$b);
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG$b, explicitContext);
         this.layout = '';
         styler(this.nativeElement, this);
         this.multiple = true;
@@ -1061,38 +1077,43 @@ class CheckboxsetComponent extends DatasetAwareFormComponent {
             super.onPropertyChange(key, nv, ov);
         }
     }
-    static { this.ɵfac = function CheckboxsetComponent_Factory(t) { return new (t || CheckboxsetComponent)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵfac = function CheckboxsetComponent_Factory(t) { return new (t || CheckboxsetComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CheckboxsetComponent, selectors: [["", "wmCheckboxset", ""]], hostBindings: function CheckboxsetComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown.enter", function CheckboxsetComponent_keydown_enter_HostBindingHandler($event) { return ctx.onKeyDown($event, "ENTER"); });
         } }, exportAs: ["wmCheckboxset"], features: [i0.ɵɵProvidersFeature([
                 provideAs(CheckboxsetComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(CheckboxsetComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(CheckboxsetComponent)
-            ]), i0.ɵɵ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) {
-            i0.ɵɵtemplate(0, CheckboxsetComponent_ng_template_0_Template, 1, 1, "ng-template", 0);
-            i0.ɵɵelement(1, "input", 1);
-            i0.ɵɵtemplate(2, CheckboxsetComponent_div_2_Template, 1, 0, "div", 2);
-            i0.ɵɵtemplate(3, CheckboxsetComponent_ng_template_3_Template, 1, 1, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$a, decls: 5, vars: 4, consts: [["groupedListTemplate", ""], [3, "ngIf", "ngIfElse"], ["hidden", "", 1, "model-holder", 3, "disabled"], ["class", "readonly-wrapper", 4, "ngIf"], ["partialContainer", "", "role", "presentation", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], ["partialContainer", "", "role", "presentation", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], ["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, "click", "title", "ngClass"], [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, "click", "ngClass", "wmItemTemplate", "userComponentParams"], ["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) {
+            i0.ɵɵtemplate(0, CheckboxsetComponent_ng_template_0_Template, 1, 1, "ng-template", 1);
+            i0.ɵɵelement(1, "input", 2);
+            i0.ɵɵtemplate(2, CheckboxsetComponent_div_2_Template, 1, 0, "div", 3)(3, CheckboxsetComponent_ng_template_3_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
-            const _r2 = i0.ɵɵreference(4);
-            i0.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", _r2);
-            i0.ɵɵadvance(1);
+            const groupedListTemplate_r12 = i0.ɵɵreference(4);
+            i0.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", groupedListTemplate_r12);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("disabled", ctx.disabled || ctx.readonly);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.readonly || ctx.disabled);
         } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.ItemTemplateDirective, i2.PartialParamHandlerDirective, i2.PartialContainerDirective, i2.TextContentDirective], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckboxsetComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckboxsetComponent, [{
         type: Component,
         args: [{ selector: '[wmCheckboxset]', exportAs: 'wmCheckboxset', providers: [
                     provideAs(CheckboxsetComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(CheckboxsetComponent, NG_VALIDATORS, true),
                     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.Injector }]; }, { onKeyDown: [{
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { onKeyDown: [{
             type: HostListener,
             args: ['keydown.enter', ['$event', '"ENTER"']]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CheckboxsetComponent, { className: "CheckboxsetComponent", filePath: "checkboxset/checkboxset.component.ts", lineNumber: 26 }); })();
 
 const registerProps$a = () => {
     register('wm-form-group', new Map([
@@ -1116,8 +1137,8 @@ const CAPTION_POSITION = {
 };
 class CompositeDirective extends StylableComponent {
     static { this.initializeProps = registerProps$a(); }
-    constructor(inj) {
-        super(inj, WIDGET_CONFIG$a);
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG$a, explicitContext);
         styler(this.nativeElement, this, APPLY_STYLES_TYPE.CONTAINER);
     }
     /**
@@ -1153,7 +1174,7 @@ class CompositeDirective extends StylableComponent {
         addForIdAttributes(this.nativeElement);
         this.assignRequiredToSubComponents();
     }
-    static { this.ɵfac = function CompositeDirective_Factory(t) { return new (t || CompositeDirective)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵfac = function CompositeDirective_Factory(t) { return new (t || CompositeDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: CompositeDirective, selectors: [["div", "wmComposite", ""]], contentQueries: function CompositeDirective_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuery(dirIndex, WidgetRef, 5);
         } if (rf & 2) {
@@ -1163,7 +1184,7 @@ class CompositeDirective extends StylableComponent {
                 provideAsWidgetRef(CompositeDirective)
             ]), i0.ɵɵInheritDefinitionFeature] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CompositeDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CompositeDirective, [{
         type: Directive,
         args: [{
                 selector: 'div[wmComposite]',
@@ -1171,7 +1192,12 @@ class CompositeDirective extends StylableComponent {
                     provideAsWidgetRef(CompositeDirective)
                 ]
             }]
-    }], function () { return [{ type: i0.Injector }]; }, { componentRefs: [{
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { componentRefs: [{
             type: ContentChildren,
             args: [WidgetRef, { descendants: true }]
         }] }); })();
@@ -1264,8 +1290,8 @@ class BaseInput extends BaseFormCustomComponent {
         }
         styler(this.inputEl.nativeElement, this);
     }
-    constructor(inj, config) {
-        super(inj, config);
+    constructor(inj, config, explicitContext) {
+        super(inj, config, explicitContext);
         // possible values for ngModelOptions are 'blur' and 'change'
         // default is 'blur'
         this.ngModelOptions = {
@@ -1275,19 +1301,24 @@ class BaseInput extends BaseFormCustomComponent {
         updateOn = updateOn === 'default' ? 'change' : updateOn;
         this.ngModelOptions.updateOn = updateOn;
     }
-    static { this.ɵfac = function BaseInput_Factory(t) { return new (t || BaseInput)(i0.ɵɵinject(i0.Injector), i0.ɵɵinject(WidgetConfig)); }; }
+    static { this.ɵfac = function BaseInput_Factory(t) { return new (t || BaseInput)(i0.ɵɵinject(i0.Injector), i0.ɵɵinject(WidgetConfig), i0.ɵɵinject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: BaseInput, factory: BaseInput.ɵfac }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseInput, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseInput, [{
         type: Injectable
-    }], function () { return [{ type: i0.Injector }, { type: undefined, decorators: [{
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [WidgetConfig]
-            }] }]; }, null); })();
+            }] }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], null); })();
 
-class NumberLocale extends BaseInput {
-    constructor(inj, config, i18nService, trailingZeroDecimalPipe) {
-        super(inj, config);
+let NumberLocale = class NumberLocale extends BaseInput {
+    constructor(inj, config, i18nService, trailingZeroDecimalPipe, explicitContext) {
+        super(inj, config, explicitContext);
         this.i18nService = i18nService;
         this.trailingZeroDecimalPipe = trailingZeroDecimalPipe;
         this.isDefaultQuery = true;
@@ -1720,7 +1751,13 @@ class NumberLocale extends BaseInput {
             super.onPropertyChange(key, nv, ov);
         }
     }
-}
+};
+NumberLocale = __decorate([
+    __param(4, Inject('EXPLICIT_CONTEXT')),
+    __param(4, Optional()),
+    __metadata("design:paramtypes", [Injector, Object, AbstractI18nService,
+        TrailingZeroDecimalPipe, Object])
+], NumberLocale);
 
 const _c0$9 = ["input"];
 const _c1$8 = ["wmNumber", ""];
@@ -1730,10 +1767,10 @@ const WIDGET_CONFIG$9 = {
 };
 class NumberComponent extends NumberLocale {
     static { this.initializeProps = registerProps$9(); }
-    constructor(inj, i18nService, trailingZeroDecimalPipe) {
-        super(inj, WIDGET_CONFIG$9, i18nService, trailingZeroDecimalPipe);
+    constructor(inj, i18nService, trailingZeroDecimalPipe, explicitContext) {
+        super(inj, WIDGET_CONFIG$9, i18nService, trailingZeroDecimalPipe, explicitContext);
     }
-    static { this.ɵfac = function NumberComponent_Factory(t) { return new (t || NumberComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1$1.AbstractI18nService), i0.ɵɵdirectiveInject(i2.TrailingZeroDecimalPipe)); }; }
+    static { this.ɵfac = function NumberComponent_Factory(t) { return new (t || NumberComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1$1.AbstractI18nService), i0.ɵɵdirectiveInject(i2.TrailingZeroDecimalPipe), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵ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);
@@ -1745,29 +1782,36 @@ class NumberComponent extends NumberLocale {
                 provideAs(NumberComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(NumberComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(NumberComponent)
-            ]), 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.ɵɵInheritDefinitionFeature], attrs: _c1$8, decls: 2, vars: 14, consts: [["input", ""], ["inputmode", "decimal", "focus-target", "", "role", "textbox", "type", "text", 1, "form-control", "app-textbox", "app-number-input", 3, "ngModelChange", "blur", "focus", "input", "keypress", "keydown.backspace", "keydown.enter", "keydown.ArrowUp", "keydown.ArrowDown", "ngModel", "readonly", "disabled", "pattern", "autofocus", "ngClass", "ngStyle", "ngModelOptions", "required"]], template: function NumberComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "input", 1, 0);
+            i0.ɵɵlistener("ngModelChange", function NumberComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onModelChange($event)); })("blur", function NumberComponent_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); ctx.handleBlur($event); return i0.ɵɵresetView(ctx.checkForTrailingZeros($event)); })("focus", function NumberComponent_Template_input_focus_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.checkForTrailingZeros($event)); })("input", function NumberComponent_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInputChange($event.target.value)); })("keypress", function NumberComponent_Template_input_keypress_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.validateInputEntry($event)); })("keydown.backspace", function NumberComponent_Template_input_keydown_backspace_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBackspace($event)); })("keydown.enter", function NumberComponent_Template_input_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onEnter($event)); })("keydown.ArrowUp", function NumberComponent_Template_input_keydown_ArrowUp_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onArrowPress($event, "UP")); })("keydown.ArrowDown", function NumberComponent_Template_input_keydown_ArrowDown_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(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)("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.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, [{
+(() => { (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       [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: i0.Injector }, { type: i1$1.AbstractI18nService }, { type: i2.TrailingZeroDecimalPipe }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { inputEl: [{
             type: ViewChild,
             args: ['input', { static: true }]
         }], ngModel: [{
             type: ViewChild,
             args: [NgModel, { static: true }]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NumberComponent, { className: "NumberComponent", filePath: "number/number.component.ts", lineNumber: 24 }); })();
 
 const radiosetProps = new Map([
     ['class', PROP_STRING],
@@ -1803,60 +1847,61 @@ const registerProps$8 = () => {
 };
 
 const _c0$8 = ["wmRadioset", ""];
-const _c1$7 = function (a0) { return { "disabled": a0 }; };
+const _c1$7 = (a0, a1) => ["radio", "app-radio", a0, a1];
+const _c2$2 = a0 => ({ "disabled": a0 });
+const _c3 = a0 => ({ "collapsible-content": a0 });
+const _c4 = (a0, a1) => ["radio", "app-radio", "group-list-item", a0, a1];
 function RadiosetComponent_ng_template_0_li_0_label_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "label", 7);
     i0.ɵɵelement(1, "input", 8)(2, "span", 9);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r9 = i0.ɵɵnextContext();
-    const item_r5 = ctx_r9.$implicit;
-    const i_r6 = ctx_r9.index;
-    const ctx_r7 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c1$7, ctx_r7.disabled || ctx_r7.readonly));
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("name", "radioset_" + ctx_r7.widgetId)("value", item_r5.key)("disabled", ctx_r7.disabled || ctx_r7.readonly)("tabindex", ctx_r7.tabindex)("checked", item_r5.selected);
-    i0.ɵɵattribute("aria-checked", item_r5.selected)("data-attr-index", i_r6)("aria-label", item_r5.key);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("textContent", item_r5.label);
+    const ctx_r3 = i0.ɵɵnextContext();
+    const item_r2 = ctx_r3.$implicit;
+    const i_r5 = ctx_r3.index;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c2$2, ctx_r2.disabled || ctx_r2.readonly));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r2.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
+    i0.ɵɵattribute("aria-checked", item_r2.selected)("data-attr-index", i_r5)("aria-label", item_r2.key);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("textContent", item_r2.label);
 } }
 function RadiosetComponent_ng_template_0_li_0_label_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "label", 7);
     i0.ɵɵelement(1, "input", 8)(2, "span", 10);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r10 = i0.ɵɵnextContext();
-    const item_r5 = ctx_r10.$implicit;
-    const i_r6 = ctx_r10.index;
-    const ctx_r8 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c1$7, ctx_r8.disabled || ctx_r8.readonly));
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("name", "radioset_" + ctx_r8.widgetId)("value", item_r5.key)("disabled", ctx_r8.disabled || ctx_r8.readonly)("tabindex", ctx_r8.tabindex)("checked", item_r5.selected);
-    i0.ɵɵattribute("aria-checked", item_r5.selected)("data-attr-index", i_r6)("aria-label", item_r5.key);
+    const ctx_r3 = i0.ɵɵnextContext();
+    const item_r2 = ctx_r3.$implicit;
+    const i_r5 = ctx_r3.index;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c2$2, ctx_r2.disabled || ctx_r2.readonly));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r2.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
+    i0.ɵɵattribute("aria-checked", item_r2.selected)("data-attr-index", i_r5)("aria-label", item_r2.key);
 } }
-const _c2$2 = function (a2, a3) { return ["radio", "app-radio", a2, a3]; };
 function RadiosetComponent_ng_template_0_li_0_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
+    const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li", 5);
-    i0.ɵɵlistener("click", function RadiosetComponent_ng_template_0_li_0_Template_li_click_0_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r12); const item_r5 = restoredCtx.$implicit; const ctx_r11 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r11.onRadioLabelClick($event, item_r5.key)); });
-    i0.ɵɵtemplate(1, RadiosetComponent_ng_template_0_li_0_label_1_Template, 3, 12, "label", 6);
-    i0.ɵɵtemplate(2, RadiosetComponent_ng_template_0_li_0_label_2_Template, 3, 11, "label", 6);
+    i0.ɵɵlistener("click", function RadiosetComponent_ng_template_0_li_0_Template_li_click_0_listener($event) { const item_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onRadioLabelClick($event, item_r2.key)); });
+    i0.ɵɵtemplate(1, RadiosetComponent_ng_template_0_li_0_label_1_Template, 3, 12, "label", 6)(2, RadiosetComponent_ng_template_0_li_0_label_2_Template, 3, 11, "label", 6);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r5 = ctx.$implicit;
-    const ctx_r4 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("active", item_r5.selected);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c2$2, ctx_r4.itemclass, ctx_r4.itemsPerRowClass))("wmItemTemplate", ctx_r4.content)("userComponentParams", item_r5);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", !ctx_r4.content);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r4.content);
+    const item_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("active", item_r2.selected);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c1$7, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r2.content);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.content);
 } }
 function RadiosetComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, RadiosetComponent_ng_template_0_li_0_Template, 3, 10, "li", 4);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngForOf", ctx_r0.datasetItems);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngForOf", ctx_r2.datasetItems);
 } }
 function RadiosetComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 11);
@@ -1864,102 +1909,98 @@ function RadiosetComponent_div_2_Template(rf, ctx) { if (rf & 1) {
 function RadiosetComponent_ng_template_3_li_0_i_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 21);
 } if (rf & 2) {
-    const ctx_r15 = i0.ɵɵnextContext(3);
-    i0.ɵɵpropertyInterpolate2("title", "", ctx_r15.appLocale.LABEL_COLLAPSE, "/", ctx_r15.appLocale.LABEL_EXPAND, "");
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵpropertyInterpolate2("title", "", ctx_r2.appLocale.LABEL_COLLAPSE, "/", ctx_r2.appLocale.LABEL_EXPAND, "");
 } }
 function RadiosetComponent_ng_template_3_li_0_span_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 22);
 } if (rf & 2) {
-    const groupObj_r14 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("textContent", groupObj_r14.data.length);
+    const groupObj_r7 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("textContent", groupObj_r7.data.length);
 } }
 function RadiosetComponent_ng_template_3_li_0_li_8_label_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "label", 7);
     i0.ɵɵelement(1, "input", 8)(2, "span", 9);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r23 = i0.ɵɵnextContext();
-    const item_r19 = ctx_r23.$implicit;
-    const i_r20 = ctx_r23.index;
-    const ctx_r21 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c1$7, ctx_r21.disabled || ctx_r21.readonly));
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("name", "radioset_" + ctx_r21.widgetId)("value", item_r19.key)("disabled", ctx_r21.disabled || ctx_r21.readonly)("tabindex", ctx_r21.tabindex)("checked", item_r19.selected);
-    i0.ɵɵattribute("aria-checked", item_r19.selected)("data-attr-index", i_r20);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("textContent", item_r19.label);
+    const ctx_r9 = i0.ɵɵnextContext();
+    const item_r9 = ctx_r9.$implicit;
+    const i_r11 = ctx_r9.index;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c2$2, ctx_r2.disabled || ctx_r2.readonly));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r9.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
+    i0.ɵɵattribute("aria-checked", item_r9.selected)("data-attr-index", i_r11);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("textContent", item_r9.label);
 } }
 function RadiosetComponent_ng_template_3_li_0_li_8_label_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "label", 7);
     i0.ɵɵelement(1, "input", 8)(2, "span", 10);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r24 = i0.ɵɵnextContext();
-    const item_r19 = ctx_r24.$implicit;
-    const i_r20 = ctx_r24.index;
-    const ctx_r22 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c1$7, ctx_r22.disabled || ctx_r22.readonly));
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("name", "radioset_" + ctx_r22.widgetId)("value", item_r19.key)("disabled", ctx_r22.disabled || ctx_r22.readonly)("tabindex", ctx_r22.tabindex)("checked", item_r19.selected);
-    i0.ɵɵattribute("aria-checked", item_r19.selected)("data-attr-index", i_r20);
+    const ctx_r9 = i0.ɵɵnextContext();
+    const item_r9 = ctx_r9.$implicit;
+    const i_r11 = ctx_r9.index;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c2$2, ctx_r2.disabled || ctx_r2.readonly));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r9.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
+    i0.ɵɵattribute("aria-checked", item_r9.selected)("data-attr-index", i_r11);
 } }
-const _c3 = function (a3, a4) { return ["radio", "app-radio", "group-list-item", a3, a4]; };
 function RadiosetComponent_ng_template_3_li_0_li_8_Template(rf, ctx) { if (rf & 1) {
-    const _r26 = i0.ɵɵgetCurrentView();
+    const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li", 23);
-    i0.ɵɵlistener("click", function RadiosetComponent_ng_template_3_li_0_li_8_Template_li_click_0_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r26); const item_r19 = restoredCtx.$implicit; const ctx_r25 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r25.onRadioLabelClick($event, item_r19)); });
-    i0.ɵɵtemplate(1, RadiosetComponent_ng_template_3_li_0_li_8_label_1_Template, 3, 11, "label", 6);
-    i0.ɵɵtemplate(2, RadiosetComponent_ng_template_3_li_0_li_8_label_2_Template, 3, 10, "label", 6);
+    i0.ɵɵlistener("click", function RadiosetComponent_ng_template_3_li_0_li_8_Template_li_click_0_listener($event) { const item_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onRadioLabelClick($event, item_r9)); });
+    i0.ɵɵtemplate(1, RadiosetComponent_ng_template_3_li_0_li_8_label_1_Template, 3, 11, "label", 6)(2, RadiosetComponent_ng_template_3_li_0_li_8_label_2_Template, 3, 10, "label", 6);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r19 = ctx.$implicit;
-    const ctx_r17 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("active", item_r19.selected);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c3, ctx_r17.itemclass, ctx_r17.itemsPerRowClass))("wmItemTemplate", ctx_r17.content)("userComponentParams", item_r19);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", !ctx_r17.content);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r17.content);
+    const item_r9 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("active", item_r9.selected);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c4, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r9);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r2.content);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.content);
 } }
-const _c4 = function (a0) { return { "collapsible-content": a0 }; };
 function RadiosetComponent_ng_template_3_li_0_Template(rf, ctx) { if (rf & 1) {
-    const _r28 = i0.ɵɵgetCurrentView();
+    const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li", 13)(1, "ul", 14)(2, "li", 15);
-    i0.ɵɵlistener("click", function RadiosetComponent_ng_template_3_li_0_Template_li_click_2_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r27 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r27.handleHeaderClick($event)); });
+    i0.ɵɵlistener("click", function RadiosetComponent_ng_template_3_li_0_Template_li_click_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.handleHeaderClick($event)); });
     i0.ɵɵelementStart(3, "h4", 16);
     i0.ɵɵtext(4);
     i0.ɵɵelementStart(5, "div", 17);
-    i0.ɵɵtemplate(6, RadiosetComponent_ng_template_3_li_0_i_6_Template, 1, 2, "i", 18);
-    i0.ɵɵtemplate(7, RadiosetComponent_ng_template_3_li_0_span_7_Template, 1, 1, "span", 19);
+    i0.ɵɵtemplate(6, RadiosetComponent_ng_template_3_li_0_i_6_Template, 1, 3, "i", 18)(7, RadiosetComponent_ng_template_3_li_0_span_7_Template, 1, 1, "span", 19);
     i0.ɵɵelementEnd()()();
     i0.ɵɵtemplate(8, RadiosetComponent_ng_template_3_li_0_li_8_Template, 3, 10, "li", 20);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const groupObj_r14 = ctx.$implicit;
-    const ctx_r13 = i0.ɵɵnextContext(2);
+    const groupObj_r7 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("title", groupObj_r14.key)("ngClass", i0.ɵɵpureFunction1(6, _c4, ctx_r13.collapsible));
+    i0.ɵɵproperty("title", groupObj_r7.key)("ngClass", i0.ɵɵpureFunction1(6, _c3, ctx_r2.collapsible));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", groupObj_r14.key, " ");
+    i0.ɵɵtextInterpolate1("", groupObj_r7.key, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r13.collapsible);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r13.showcount);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", groupObj_r14.data);
+    i0.ɵɵproperty("ngIf", ctx_r2.collapsible);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.showcount);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", groupObj_r7.data);
 } }
 function RadiosetComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, RadiosetComponent_ng_template_3_li_0_Template, 9, 8, "li", 12);
 } if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngForOf", ctx_r3.groupedData);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngForOf", ctx_r2.groupedData);
 } }
 const DEFAULT_CLS$1 = 'app-radioset list-group inline';
 const WIDGET_CONFIG$8 = { widgetType: 'wm-radioset', hostClass: DEFAULT_CLS$1 };
 class RadiosetComponent extends DatasetAwareFormComponent {
     static { this.initializeProps = registerProps$8(); }
-    constructor(inj) {
-        super(inj, WIDGET_CONFIG$8);
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG$8, explicitContext);
         this.layout = '';
         styler(this.nativeElement, this);
         this.multiple = false;
@@ -2002,33 +2043,38 @@ class RadiosetComponent extends DatasetAwareFormComponent {
             super.onPropertyChange(key, nv, ov);
         }
     }
-    static { this.ɵfac = function RadiosetComponent_Factory(t) { return new (t || RadiosetComponent)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵfac = function RadiosetComponent_Factory(t) { return new (t || RadiosetComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RadiosetComponent, selectors: [["", "wmRadioset", ""]], exportAs: ["wmRadioset"], features: [i0.ɵɵProvidersFeature([
                 provideAs(RadiosetComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(RadiosetComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(RadiosetComponent)
-            ]), i0.ɵɵ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) {
-            i0.ɵɵtemplate(0, RadiosetComponent_ng_template_0_Template, 1, 1, "ng-template", 0);
-            i0.ɵɵelement(1, "input", 1);
-            i0.ɵɵtemplate(2, RadiosetComponent_div_2_Template, 1, 0, "div", 2);
-            i0.ɵɵtemplate(3, RadiosetComponent_ng_template_3_Template, 1, 1, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$8, decls: 5, vars: 4, consts: [["groupedListTemplate", ""], [3, "ngIf", "ngIfElse"], ["hidden", "", 1, "model-holder", 3, "disabled"], ["aria-readonly", "true", "class", "readonly-wrapper", 4, "ngIf"], ["partialContainer", "", "role", "presentation", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], ["partialContainer", "", "role", "presentation", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], ["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, "click", "title", "ngClass"], [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, "click", "ngClass", "wmItemTemplate", "userComponentParams"]], template: function RadiosetComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, RadiosetComponent_ng_template_0_Template, 1, 1, "ng-template", 1);
+            i0.ɵɵelement(1, "input", 2);
+            i0.ɵɵtemplate(2, RadiosetComponent_div_2_Template, 1, 0, "div", 3)(3, RadiosetComponent_ng_template_3_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
-            const _r2 = i0.ɵɵreference(4);
-            i0.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", _r2);
-            i0.ɵɵadvance(1);
+            const groupedListTemplate_r12 = i0.ɵɵreference(4);
+            i0.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", groupedListTemplate_r12);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("disabled", ctx.disabled || ctx.readonly);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.readonly || ctx.disabled);
         } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.ItemTemplateDirective, i2.PartialParamHandlerDirective, i2.PartialContainerDirective, i2.TextContentDirective], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RadiosetComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RadiosetComponent, [{
         type: Component,
         args: [{ selector: '[wmRadioset]', exportAs: 'wmRadioset', providers: [
                     provideAs(RadiosetComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(RadiosetComponent, NG_VALIDATORS, true),
                     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.Injector }]; }, null); })();
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RadiosetComponent, { className: "RadiosetComponent", filePath: "radioset/radioset.component.ts", lineNumber: 25 }); })();
 
 const selectProps = new Map([
     ['autofocus', PROP_BOOLEAN],
@@ -2064,47 +2110,53 @@ const registerProps$7 = () => {
 };
 
 const _c0$7 = ["select"];
+const _c1$6 = a0 => ["app-select form-control", a0];
+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_r3 = ctx.$implicit;
+    i0.ɵɵproperty("value", item_r3.key)("selected", item_r3.selected)("textContent", item_r3.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);
-    i0.ɵɵadvance(1);
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngForOf", groupObj_r4.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();
-    i0.ɵɵadvance(1);
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngForOf", ctx_r1.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_r5 = ctx.$implicit;
+    i0.ɵɵproperty("value", item_r5.key)("selected", item_r5.selected)("textContent", item_r5.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();
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", ctx_r2.datasetItems);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r1.datasetItems);
 } }
-const _c1$6 = function (a1) { return ["app-select form-control", a1]; };
 const WIDGET_CONFIG$7 = { widgetType: 'wm-select', hostClass: 'app-select-wrapper' };
 class SelectComponent extends DatasetAwareFormComponent {
     static { this.initializeProps = registerProps$7(); }
@@ -2113,14 +2165,17 @@ class SelectComponent extends DatasetAwareFormComponent {
             this.datavalue = ds.execute(DataSource.Operation.GET_DEFAULT_LOCALE);
         }
     }
-    constructor(inj, app) {
-        super(inj, WIDGET_CONFIG$7);
+    constructor(inj, app, explicitContext) {
+        super(inj, WIDGET_CONFIG$7, explicitContext);
         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) {
@@ -2167,6 +2222,16 @@ class SelectComponent extends DatasetAwareFormComponent {
         }
         super.onPropertyChange(key, nv, ov);
     }
+    isSafariBrowser() {
+        var reg = {
+            MAC: /Mac/i,
+            MACINTEL: /MacIntel/i
+        };
+        return reg.MAC.test(window.navigator.platform) || reg.MACINTEL.test(window.navigator.platform);
+    }
+    isIosPlatform() {
+        return isIos() || this.isSafariBrowser();
+    }
     /**
      * 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
@@ -2176,35 +2241,25 @@ 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))) {
-                if (!(this.datavalue || this.placeholder)) {
-                    this.removePlaceholderOption();
+            if ((!$event || $event.type === 'focus') && (($(this.selectEl).find('select option:selected').text() === '' && (this.placeholder || (this.datavalue || this.binddatavalue) || this.isIosPlatform())))) {
+                if (!$event && (this.placeholder || this.datavalue || this.binddatavalue || this.isIosPlatform())) {
+                    this.app.notify('captionPositionAnimate', { isSelect: true, nativeEl: captionEl });
                 }
-                else {
+                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');
+                    }
+                }
             }
         }
-        else if (!(this.datavalue || this.placeholder)) {
-            this.removePlaceholderOption();
-        }
-    }
-    /*
-    * Removing the placeholder option if no placeholder is provided.
-    * In html we are hiding the placeholder option using css but in apple devices and safari option is showing.
-    * */
-    removePlaceholderOption() {
-        const hiddenEle = $(this.selectEl.nativeElement).find('#placeholderOption');
-        if (hiddenEle.length) {
-            hiddenEle.remove();
-            this.selectEl.nativeElement.value = '';
-        }
     }
-    static { this.ɵfac = function SelectComponent_Factory(t) { return new (t || SelectComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1$1.App)); }; }
+    static { this.ɵfac = function SelectComponent_Factory(t) { return new (t || SelectComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1$1.App), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵ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) {
@@ -2214,35 +2269,43 @@ class SelectComponent extends DatasetAwareFormComponent {
                 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", "id", "placeholderOption", 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.ɵɵ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(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.ɵɵInheritDefinitionFeature], decls: 5, vars: 15, consts: [["select", ""], ["role", "listbox", "aria-haspopup", "true", "aria-expanded", "false", "focus-target", "", 3, "ngModelChange", "change", "focus", "blur", "ngClass", "disabled", "required", "tabindex", "ngModel", "multiple", "autofocus"], ["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) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "select", 1, 0);
+            i0.ɵɵtwoWayListener("ngModelChange", function SelectComponent_Template_select_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.modelByKey, $event) || (ctx.modelByKey = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("change", function SelectComponent_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSelectValueChange($event)); })("focus", function SelectComponent_Template_select_focus_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.checkForFloatingLabel($event)); })("blur", function SelectComponent_Template_select_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); ctx.invokeOnTouched($event); return i0.ɵɵresetView(ctx.checkForFloatingLabel($event)); });
+            i0.ɵɵtemplate(2, SelectComponent_option_2_Template, 1, 2, "option", 2)(3, SelectComponent_ng_container_3_Template, 2, 1, "ng-container", 3)(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);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.modelByKey);
+            i0.ɵɵproperty("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.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", !ctx.isIosPlatform() || !!ctx.placeholder);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.groupby);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", !ctx.groupby);
         } }, 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, [{
+(() => { (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                id=\"placeholderOption\"\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: [{
+                ], 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" }]
+    }], () => [{ type: i0.Injector }, { type: i1$1.App }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { selectEl: [{
             type: ViewChild,
             args: ['select', { static: true, read: ElementRef }]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SelectComponent, { className: "SelectComponent", filePath: "select/select.component.ts", lineNumber: 23 }); })();
 
 const switchProps = new Map([
     ['class', PROP_STRING],
@@ -2269,43 +2332,43 @@ const registerProps$6 = () => {
 };
 
 const _c0$6 = ["wmSwitch", ""];
-const _c1$5 = function (a1) { return ["app-icon", a1]; };
+const _c1$5 = (a0, a1) => ({ "selected": a0, "disabled": a1 });
+const _c2$1 = a0 => ["app-icon", a0];
 function SwitchComponent_a_1_i_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 8);
 } if (rf & 2) {
-    const opt_r2 = i0.ɵɵnextContext().$implicit;
+    const opt_r3 = i0.ɵɵnextContext().$implicit;
     const ctx_r4 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1, _c1$5, opt_r2.dataObject[ctx_r4.iconclass] || opt_r2["icon"]));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1, _c2$1, opt_r3.dataObject[ctx_r4.iconclass] || opt_r3["icon"]));
 } }
-const _c2$1 = function (a0, a1) { return { "selected": a0, "disabled": a1 }; };
 function SwitchComponent_a_1_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
+    const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "a", 5);
-    i0.ɵɵlistener("click", function SwitchComponent_a_1_Template_a_click_0_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r7); const $index_r3 = restoredCtx.index; const opt_r2 = restoredCtx.$implicit; const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.selectOpt($event, $index_r3, opt_r2)); });
+    i0.ɵɵlistener("click", function SwitchComponent_a_1_Template_a_click_0_listener($event) { const ctx_r1 = i0.ɵɵrestoreView(_r1); const opt_r3 = ctx_r1.$implicit; const $index_r4 = ctx_r1.index; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.selectOpt($event, $index_r4, opt_r3)); });
     i0.ɵɵtemplate(1, SwitchComponent_a_1_i_1_Template, 1, 3, "i", 6);
     i0.ɵɵelement(2, "span", 7);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const opt_r2 = ctx.$implicit;
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("name", "wm-switch-" + opt_r2.key)("ngClass", i0.ɵɵpureFunction2(4, _c2$1, opt_r2.selected, ctx_r0.disabled));
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", opt_r2.dataObject && opt_r2.dataObject[ctx_r0.iconclass]);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("textContent", opt_r2[ctx_r0.displayfield] || opt_r2.label);
+    const opt_r3 = ctx.$implicit;
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("name", "wm-switch-" + opt_r3.key)("ngClass", i0.ɵɵpureFunction2(4, _c1$5, opt_r3.selected, ctx_r4.disabled));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", opt_r3.dataObject && opt_r3.dataObject[ctx_r4.iconclass]);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("textContent", opt_r3[ctx_r4.displayfield] || opt_r3.label);
 } }
 function SwitchComponent_i_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i");
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵclassMapInterpolate1("app-icon ", ctx_r1.selectedItem && ctx_r1.selectedItem.dataObject && ctx_r1.selectedItem.dataObject[ctx_r1.iconclass], "");
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵclassMapInterpolate1("app-icon ", ctx_r4.selectedItem && ctx_r4.selectedItem.dataObject && ctx_r4.selectedItem.dataObject[ctx_r4.iconclass], "");
 } }
 const DEFAULT_CLS = 'app-switch';
 const WIDGET_CONFIG$6 = { widgetType: 'wm-switch', hostClass: DEFAULT_CLS };
 class SwitchComponent extends DatasetAwareFormComponent {
     static { this.initializeProps = registerProps$6(); }
-    constructor(inj) {
-        super(inj, WIDGET_CONFIG$6);
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG$6, explicitContext);
         this.options = [];
         this._debounceSetSelectedValue = debounce((val) => {
             this.setSelectedValue();
@@ -2408,11 +2471,11 @@ class SwitchComponent extends DatasetAwareFormComponent {
             super.onPropertyChange(key, nv, ov);
         }
     }
-    static { this.ɵfac = function SwitchComponent_Factory(t) { return new (t || SwitchComponent)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵfac = function SwitchComponent_Factory(t) { return new (t || SwitchComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SwitchComponent, selectors: [["", "wmSwitch", ""]], exportAs: ["wmSwitch"], features: [i0.ɵɵProvidersFeature([
                 provideAs(SwitchComponent, NG_VALUE_ACCESSOR, true),
                 provideAsWidgetRef(SwitchComponent)
-            ]), i0.ɵɵ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) {
+            ]), i0.ɵɵ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, "click", "name", "ngClass"], ["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) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵtemplate(1, SwitchComponent_a_1_Template, 3, 7, "a", 1);
             i0.ɵɵelementEnd();
@@ -2422,25 +2485,31 @@ class SwitchComponent extends DatasetAwareFormComponent {
             i0.ɵɵelementEnd();
             i0.ɵɵelement(5, "input", 4);
         } if (rf & 2) {
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngForOf", ctx.datasetItems);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("title", ctx.selectedItem ? ctx.selectedItem.label : ctx.modelByKey);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.iconclass);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.selectedItem ? ctx.selectedItem.label : ctx.modelByKey, "\n");
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("name", ctx.name)("disabled", ctx.disabled)("value", ctx.modelByKey)("required", ctx.required);
         } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.TextContentDirective], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SwitchComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SwitchComponent, [{
         type: Component,
         args: [{ selector: '[wmSwitch]', providers: [
                     provideAs(SwitchComponent, NG_VALUE_ACCESSOR, true),
                     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.Injector }]; }, null); })();
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SwitchComponent, { className: "SwitchComponent", filePath: "switch/switch.component.ts", lineNumber: 24 }); })();
 
 const inputCalendarTypeProps = new Map([
     ['autocomplete', { value: true, ...PROP_BOOLEAN }],
@@ -2478,10 +2547,10 @@ const WIDGET_CONFIG$5 = {
 };
 class InputCalendarComponent extends BaseInput {
     static { this.initializeProps = registerProps$5(); }
-    constructor(inj) {
-        super(inj, WIDGET_CONFIG$5);
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG$5, explicitContext);
     }
-    static { this.ɵfac = function InputCalendarComponent_Factory(t) { return new (t || InputCalendarComponent)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵfac = function InputCalendarComponent_Factory(t) { return new (t || InputCalendarComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵ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.ɵɵviewQuery(_c0$5, 7);
             i0.ɵɵviewQuery(NgModel, 5);
@@ -2493,29 +2562,39 @@ class InputCalendarComponent extends BaseInput {
                 provideAs(InputCalendarComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(InputCalendarComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(InputCalendarComponent)
-            ]), 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.ɵɵInheritDefinitionFeature], attrs: _c1$4, decls: 2, vars: 17, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "type", "ngModel", "readonly", "required", "disabled", "min", "max", "step", "autofocus", "autocomplete", "ngClass", "ngStyle"]], template: function InputCalendarComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "input", 1, 0);
+            i0.ɵɵtwoWayListener("ngModelChange", function InputCalendarComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("blur", function InputCalendarComponent_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleBlur($event)); })("ngModelChange", function InputCalendarComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(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")("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
+            i0.ɵɵproperty("type", ctx.type);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
+            i0.ɵɵproperty("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.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, [{
+(() => { (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       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       #input>\n" }]
-    }], function () { return [{ type: i0.Injector }]; }, { inputEl: [{
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { inputEl: [{
             type: ViewChild,
             args: ['input', { static: true }]
         }], ngModel: [{
             type: ViewChild,
             args: [NgModel]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InputCalendarComponent, { className: "InputCalendarComponent", filePath: "text/calendar/input-calendar.component.ts", lineNumber: 22 }); })();
 
 const inputColorTypeProps = new Map([
     ['autocomplete', { value: true, ...PROP_BOOLEAN }],
@@ -2550,10 +2629,10 @@ const WIDGET_CONFIG$4 = {
 };
 class InputColorComponent extends BaseInput {
     static { this.initializeProps = registerProps$4(); }
-    constructor(inj) {
-        super(inj, WIDGET_CONFIG$4);
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG$4, explicitContext);
     }
-    static { this.ɵfac = function InputColorComponent_Factory(t) { return new (t || InputColorComponent)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵfac = function InputColorComponent_Factory(t) { return new (t || InputColorComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputColorComponent, selectors: [["wm-input", "type", "color"]], viewQuery: function InputColorComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$4, 7);
             i0.ɵɵviewQuery(NgModel, 5);
@@ -2565,29 +2644,39 @@ class InputColorComponent extends BaseInput {
                 provideAs(InputColorComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(InputColorComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(InputColorComponent)
-            ]), 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.ɵɵInheritDefinitionFeature], attrs: _c1$3, decls: 2, vars: 14, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "type", "ngModel", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle"]], template: function InputColorComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "input", 1, 0);
+            i0.ɵɵtwoWayListener("ngModelChange", function InputColorComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("blur", function InputColorComponent_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleBlur($event)); })("ngModelChange", function InputColorComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(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)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
+            i0.ɵɵproperty("type", ctx.type);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
+            i0.ɵɵproperty("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.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, [{
+(() => { (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       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       #input>\n" }]
-    }], function () { return [{ type: i0.Injector }]; }, { inputEl: [{
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { inputEl: [{
             type: ViewChild,
             args: ['input', { static: true }]
         }], ngModel: [{
             type: ViewChild,
             args: [NgModel]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InputColorComponent, { className: "InputColorComponent", filePath: "text/color/input-color.component.ts", lineNumber: 23 }); })();
 
 const inputEmailTypeProps = new Map([
     ['autocomplete', { value: true, ...PROP_BOOLEAN }],
@@ -2624,10 +2713,10 @@ const WIDGET_CONFIG$3 = {
 };
 class InputEmailComponent extends BaseInput {
     static { this.initializeProps = registerProps$3(); }
-    constructor(inj) {
-        super(inj, WIDGET_CONFIG$3);
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG$3, explicitContext);
     }
-    static { this.ɵfac = function InputEmailComponent_Factory(t) { return new (t || InputEmailComponent)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵfac = function InputEmailComponent_Factory(t) { return new (t || InputEmailComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputEmailComponent, selectors: [["wm-input", "type", "email"]], viewQuery: function InputEmailComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$3, 7);
             i0.ɵɵviewQuery(NgModel, 5);
@@ -2639,30 +2728,39 @@ class InputEmailComponent extends BaseInput {
                 provideAs(InputEmailComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(InputEmailComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(InputEmailComponent)
-            ]), 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) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$2, decls: 2, vars: 17, consts: [["input", ""], ["focus-target", "", "role", "textbox", "email", "", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "keyup.enter", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "pattern", "autofocus", "ngClass", "ngStyle", "autocomplete"]], 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.ɵɵelementStart(0, "input", 1, 0);
+            i0.ɵɵtwoWayListener("ngModelChange", function InputEmailComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("blur", function InputEmailComponent_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleBlur($event)); })("ngModelChange", function InputEmailComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleChange($event)); })("keyup.enter", function InputEmailComponent_Template_input_keyup_enter_0_listener() { i0.ɵɵrestoreView(_r1); const input_r2 = i0.ɵɵreference(1); return i0.ɵɵresetView(ctx.flushViewChanges(input_r2.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)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
+            i0.ɵɵproperty("type", ctx.type);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
+            i0.ɵɵproperty("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.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, [{
+(() => { (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       [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: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { inputEl: [{
             type: ViewChild,
             args: ['input', { static: true }]
         }], ngModel: [{
             type: ViewChild,
             args: [NgModel]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InputEmailComponent, { className: "InputEmailComponent", filePath: "text/email/input-email.component.ts", lineNumber: 23 }); })();
 
 const inputNumberTypeProps = new Map([
     ['autocomplete', { value: true, ...PROP_BOOLEAN }],
@@ -2696,15 +2794,15 @@ const registerProps$2 = () => {
 
 const _c0$2 = ["input"];
 const _c1$1 = ["type", "number"];
-const _c2 = function (a0) { return { "step-hidden": a0 }; };
+const _c2 = a0 => ({ "step-hidden": a0 });
 const WIDGET_CONFIG$2 = {
     widgetType: 'wm-input-number',
     hostClass: 'app-input-wrapper'
 };
 class InputNumberComponent extends BaseInput {
     static { this.initializeProps = registerProps$2(); }
-    constructor(inj) {
-        super(inj, WIDGET_CONFIG$2);
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG$2, explicitContext);
     }
     onArrowPress($event) {
         if (this.step === 0) {
@@ -2716,7 +2814,7 @@ class InputNumberComponent extends BaseInput {
             return false;
         }
     }
-    static { this.ɵfac = function InputNumberComponent_Factory(t) { return new (t || InputNumberComponent)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵfac = function InputNumberComponent_Factory(t) { return new (t || InputNumberComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputNumberComponent, selectors: [["wm-input", "type", "number"]], viewQuery: function InputNumberComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$2, 7);
             i0.ɵɵviewQuery(NgModel, 5);
@@ -2728,30 +2826,39 @@ class InputNumberComponent extends BaseInput {
                 provideAs(InputNumberComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(InputNumberComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(InputNumberComponent)
-            ]), 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) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$1, decls: 2, vars: 22, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "keyup.enter", "keydown.ArrowUp", "keydown.ArrowDown", "keypress", "ngClass", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "min", "max", "step", "autofocus", "ngStyle", "autocomplete"]], 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.ɵɵelementStart(0, "input", 1, 0);
+            i0.ɵɵtwoWayListener("ngModelChange", function InputNumberComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("blur", function InputNumberComponent_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleBlur($event)); })("ngModelChange", function InputNumberComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleChange($event)); })("keyup.enter", function InputNumberComponent_Template_input_keyup_enter_0_listener() { i0.ɵɵrestoreView(_r1); const input_r2 = i0.ɵɵreference(1); return i0.ɵɵresetView(ctx.flushViewChanges(input_r2.value)); })("keydown.ArrowUp", function InputNumberComponent_Template_input_keydown_ArrowUp_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onArrowPress($event)); })("keydown.ArrowDown", function InputNumberComponent_Template_input_keydown_ArrowDown_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onArrowPress($event)); })("keypress", function InputNumberComponent_Template_input_keypress_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.validateInputEntry($event)); });
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            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.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(20, _c2, ctx.step === 0))("type", ctx.type);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
+            i0.ɵɵproperty("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.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, [{
+(() => { (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       [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: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { inputEl: [{
             type: ViewChild,
             args: ['input', { static: true }]
         }], ngModel: [{
             type: ViewChild,
             args: [NgModel]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InputNumberComponent, { className: "InputNumberComponent", filePath: "text/number/input-number.component.ts", lineNumber: 22 }); })();
 
 const inputTextTypeProps = new Map([
     ['autocomplete', { value: true, ...PROP_BOOLEAN }],
@@ -2800,8 +2907,8 @@ const WIDGET_CONFIG$1 = {
 };
 class InputTextComponent extends BaseInput {
     static { this.initializeProps = registerProps$1(); }
-    constructor(inj) {
-        super(inj, WIDGET_CONFIG$1);
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG$1, explicitContext);
         this.lazy = false;
     }
     /* Define the property change handler. This function will be triggered when there is a change in the widget property */
@@ -2872,7 +2979,7 @@ class InputTextComponent extends BaseInput {
         super.ngOnInit();
         this.isFocused = !!this.datavalue;
     }
-    static { this.ɵfac = function InputTextComponent_Factory(t) { return new (t || InputTextComponent)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵfac = function InputTextComponent_Factory(t) { return new (t || InputTextComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵ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.ɵɵviewQuery(_c0$1, 7);
             i0.ɵɵviewQuery(NgModel, 5);
@@ -2886,24 +2993,32 @@ class InputTextComponent extends BaseInput {
                 provideAs(InputTextComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(InputTextComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(InputTextComponent)
-            ]), 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) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1, decls: 2, vars: 19, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "focus", "keyup.enter", "type", "ngModel", "imask", "unmask", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "pattern", "autofocus", "ngClass", "ngStyle", "autocomplete"]], 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.ɵɵelementStart(0, "input", 1, 0);
+            i0.ɵɵtwoWayListener("ngModelChange", function InputTextComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("ngModelChange", function InputTextComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleChange($event)); })("blur", function InputTextComponent_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); ctx.handleBlur($event); return i0.ɵɵresetView(ctx.checkForDisplayFormat($event)); })("focus", function InputTextComponent_Template_input_focus_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.checkForDisplayFormat($event)); })("keyup.enter", function InputTextComponent_Template_input_keyup_enter_0_listener() { i0.ɵɵrestoreView(_r1); const input_r2 = i0.ɵɵreference(1); return i0.ɵɵresetView(ctx.flushViewChanges(input_r2.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)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
+            i0.ɵɵproperty("type", ctx.type);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
+            i0.ɵɵproperty("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.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, [{
+(() => { (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       [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: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { inputEl: [{
             type: ViewChild,
             args: ['input', { static: true }]
         }], ngModel: [{
@@ -2913,6 +3028,7 @@ class InputTextComponent extends BaseInput {
             type: ViewChild,
             args: ['input', { read: IMaskDirective }]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InputTextComponent, { className: "InputTextComponent", filePath: "text/text/input-text.component.ts", lineNumber: 25 }); })();
 
 const textareaProps = new Map([
     ['autofocus', PROP_BOOLEAN],
@@ -2948,7 +3064,7 @@ function TextareaComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
+    i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.limitdisplaytext);
 } }
 const WIDGET_CONFIG = {
@@ -2957,14 +3073,14 @@ const WIDGET_CONFIG = {
 };
 class TextareaComponent extends BaseInput {
     static { this.initializeProps = registerProps(); }
-    constructor(inj) {
-        super(inj, WIDGET_CONFIG);
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG, explicitContext);
         this.charlength = 0;
     }
     onInputChange() {
         this.charlength = this.inputEl.nativeElement.value.length;
     }
-    static { this.ɵfac = function TextareaComponent_Factory(t) { return new (t || TextareaComponent)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵfac = function TextareaComponent_Factory(t) { return new (t || TextareaComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TextareaComponent, selectors: [["wm-textarea"]], viewQuery: function TextareaComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 7);
             i0.ɵɵviewQuery(NgModel, 5);
@@ -2976,32 +3092,41 @@ class TextareaComponent extends BaseInput {
                 provideAs(TextareaComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(TextareaComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(TextareaComponent)
-            ]), 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.ɵɵInheritDefinitionFeature], decls: 3, vars: 15, consts: [["textarea", ""], ["focus-target", "", "role", "textbox", "aria-multiline", "true", 1, "form-control", "app-textarea", 3, "ngModelChange", "blur", "input", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle"], ["class", "textarea-count", 4, "ngIf"], [1, "textarea-count"]], template: function TextareaComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "textarea", 1, 0);
+            i0.ɵɵtwoWayListener("ngModelChange", function TextareaComponent_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("blur", function TextareaComponent_Template_textarea_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleBlur($event)); })("input", function TextareaComponent_Template_textarea_input_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInputChange()); })("ngModelChange", function TextareaComponent_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); ctx.handleChange($event); return i0.ɵɵresetView(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)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
+            i0.ɵɵproperty("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.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, [{
+(() => { (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          [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: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { inputEl: [{
             type: ViewChild,
             args: ['textarea', { static: true }]
         }], ngModel: [{
             type: ViewChild,
             args: [NgModel]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TextareaComponent, { className: "TextareaComponent", filePath: "textarea/textarea.component.ts", lineNumber: 22 }); })();
 
 class CaptionPositionDirective {
     constructor(inj, app) {
@@ -3124,7 +3249,8 @@ 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) {
+            const localName = this.inputEl && this.inputEl.length && this.inputEl[0].localName;
+            if ((data.isSelect && localName == 'select') || data.displayVal || data.isFocused || data.isSelectMultiple || isInputElFocused) {
                 data.nativeEl.addClass('float-active');
                 if (!data.displayVal && isInputElFocused) {
                     this.inputEl.attr('placeholder', this.placeholder);
@@ -3161,12 +3287,12 @@ class CaptionPositionDirective {
     static { this.ɵfac = function CaptionPositionDirective_Factory(t) { return new (t || CaptionPositionDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1$1.App)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: CaptionPositionDirective, selectors: [["", "wmCaptionPosition", ""]] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaptionPositionDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaptionPositionDirective, [{
         type: Directive,
         args: [{
                 selector: '[wmCaptionPosition]'
             }]
-    }], function () { return [{ type: i0.Injector }, { type: i1$1.App }]; }, null); })();
+    }], () => [{ type: i0.Injector }, { type: i1$1.App }], null); })();
 
 const components = [
     ButtonComponent,
@@ -3194,7 +3320,7 @@ class InputModule {
             WmComponentsModule,
             IMaskModule] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputModule, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputModule, [{
         type: NgModule,
         args: [{
                 imports: [