@wavemaker/app-ng-runtime 11.8.0-next.141670 → 11.8.0-next.141671

package/components/input/default/bundles/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('angular-imask'), require('@wm/components/base'), require('@wm/core'), require('rxjs')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/forms', 'angular-imask', '@wm/components/base', '@wm/core', 'rxjs'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.input = {}), global.ng.core, global.ng.common, global.ng.forms, global.angularIMask, global.wm.components.base, global.wm.core, global.rxjs));
-})(this, (function (exports, i0, i1, i2$1, i3, i2, i1$1, rxjs) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('angular-imask'), require('@wm/components/base'), require('@wm/core'), require('lodash-es'), require('rxjs'), require('tslib')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/forms', 'angular-imask', '@wm/components/base', '@wm/core', 'lodash-es', 'rxjs', 'tslib'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.input = {}), global.ng.core, global.ng.common, global.ng.forms, global.angularIMask, global.wm.components.base, global.wm.core, global._, global.rxjs, global.tslib));
+})(this, (function (exports, i0, i1, i2$1, i3, i2, i1$1, lodashEs, rxjs, tslib) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -53,39 +53,39 @@
   };
 
   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__namespace.ɵɵelement(0, "img", 5);
       i0__namespace.ɵɵpipe(1, "image");
   } if (rf & 2) {
       const ctx_r0 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵproperty("src", i0__namespace.ɵɵpipeBind1(1, 2, ctx_r0.iconurl), i0__namespace.ɵɵsanitizeUrl)("ngStyle", i0__namespace.ɵɵpureFunction3(4, _c1$b, ctx_r0.iconwidth, ctx_r0.iconheight, ctx_r0.iconmargin));
+      i0__namespace.ɵɵproperty("src", i0__namespace.ɵɵpipeBind1(1, 2, ctx_r0.iconurl), i0__namespace.ɵɵsanitizeUrl)("ngStyle", i0__namespace.ɵɵ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__namespace.ɵɵelement(0, "i", 6);
   } if (rf & 2) {
-      const ctx_r1 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵclassMapInterpolate1("app-icon ", ctx_r1.iconclass, "");
-      i0__namespace.ɵɵproperty("ngStyle", i0__namespace.ɵɵpureFunction4(4, _c2$5, ctx_r1.iconwidth, ctx_r1.iconheight, ctx_r1.iconmargin, ctx_r1.iconwidth));
+      const ctx_r0 = i0__namespace.ɵɵnextContext();
+      i0__namespace.ɵɵclassMapInterpolate1("app-icon ", ctx_r0.iconclass, "");
+      i0__namespace.ɵɵproperty("ngStyle", i0__namespace.ɵɵ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__namespace.ɵɵelementStart(0, "span", 7);
       i0__namespace.ɵɵtext(1);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const ctx_r2 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵtextInterpolate2("", ctx_r2.caption, " ", ctx_r2.appLocale.LABEL_ICON, "");
+      const ctx_r0 = i0__namespace.ɵɵnextContext();
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵtextInterpolate2("", ctx_r0.caption, " ", ctx_r0.appLocale.LABEL_ICON, "");
   } }
   function ButtonComponent_span_5_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelement(0, "span", 8);
   } if (rf & 2) {
-      const ctx_r3 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵproperty("textContent", ctx_r3.badgevalue);
+      const ctx_r0 = i0__namespace.ɵɵnextContext();
+      i0__namespace.ɵɵ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',
@@ -94,42 +94,45 @@
   };
   class ButtonComponent extends i2.StylableComponent {
       static { this.initializeProps = registerProps$e(); }
-      constructor(inj) {
-          super(inj, WIDGET_CONFIG$e);
+      constructor(inj, explicitContext) {
+          super(inj, WIDGET_CONFIG$e, explicitContext);
           i2.styler(this.nativeElement, this);
       }
-      static { this.ɵfac = function ButtonComponent_Factory(t) { return new (t || ButtonComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+      static { this.ɵfac = function ButtonComponent_Factory(t) { return new (t || ButtonComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: ButtonComponent, selectors: [["button", "wmButton", ""]], hostVars: 5, hostBindings: function ButtonComponent_HostBindings(rf, ctx) { if (rf & 2) {
               i0__namespace.ɵɵhostProperty("type", ctx.type)("tabIndex", ctx.tabindex)("disabled", ctx.disabled);
               i0__namespace.ɵɵattribute("accesskey", ctx.shortcutkey)("icon-position", ctx.iconposition);
           } }, exportAs: ["wmButton"], features: [i0__namespace.ɵɵProvidersFeature([
                   i2.provideAsWidgetRef(ButtonComponent)
-              ]), i0__namespace.ɵɵ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__namespace.ɵɵprojectionDef(_c3$2);
-              i0__namespace.ɵɵtemplate(0, ButtonComponent_img_0_Template, 2, 8, "img", 0);
-              i0__namespace.ɵɵtemplate(1, ButtonComponent_i_1_Template, 1, 9, "i", 1);
-              i0__namespace.ɵɵtemplate(2, ButtonComponent_span_2_Template, 2, 2, "span", 2);
+              ]), i0__namespace.ɵɵ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__namespace.ɵɵprojectionDef(_c1$b);
+              i0__namespace.ɵɵ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__namespace.ɵɵelement(3, "span", 3);
               i0__namespace.ɵɵprojection(4);
               i0__namespace.ɵɵtemplate(5, ButtonComponent_span_5_Template, 1, 1, "span", 4);
           } if (rf & 2) {
               i0__namespace.ɵɵproperty("ngIf", ctx.iconurl);
-              i0__namespace.ɵɵadvance(1);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("ngIf", ctx.iconclass);
-              i0__namespace.ɵɵadvance(1);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("ngIf", ctx.iconclass);
-              i0__namespace.ɵɵadvance(1);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("innerHTML", ctx.caption, i0__namespace.ɵɵsanitizeHtml);
               i0__namespace.ɵɵadvance(2);
               i0__namespace.ɵɵproperty("ngIf", ctx.badgevalue);
           } }, dependencies: [i1__namespace.NgIf, i1__namespace.NgStyle, i2__namespace.TextContentDirective, i2__namespace.ImagePipe], encapsulation: 2 }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ButtonComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ButtonComponent, [{
           type: i0.Component,
           args: [{ selector: 'button[wmButton]', providers: [
                       i2.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__namespace.Injector }]; }, { type: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { type: [{
               type: i0.HostBinding,
               args: ['type']
           }], tabindex: [{
@@ -145,6 +148,7 @@
               type: i0.HostBinding,
               args: ['attr.icon-position']
           }] }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(ButtonComponent, { className: "ButtonComponent", filePath: "button/button.component.ts", lineNumber: 22 }); })();
 
   const registerProps$d = () => {
       i2.register('wm-buttongroup', new Map([
@@ -167,11 +171,11 @@
           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);
           i2.styler(this.nativeElement, this, i2.APPLY_STYLES_TYPE.CONTAINER);
       }
-      static { this.ɵfac = function ButtonGroupDirective_Factory(t) { return new (t || ButtonGroupDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+      static { this.ɵfac = function ButtonGroupDirective_Factory(t) { return new (t || ButtonGroupDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: ButtonGroupDirective, selectors: [["", "wmButtonGroup", ""]], hostVars: 2, hostBindings: function ButtonGroupDirective_HostBindings(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵlistener("click", function ButtonGroupDirective_click_HostBindingHandler($event) { return ctx.handleClick($event); });
           } if (rf & 2) {
@@ -180,7 +184,7 @@
                   i2.provideAsWidgetRef(ButtonGroupDirective)
               ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ButtonGroupDirective, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ButtonGroupDirective, [{
           type: i0.Directive,
           args: [{
                   selector: '[wmButtonGroup]',
@@ -188,7 +192,12 @@
                       i2.provideAsWidgetRef(ButtonGroupDirective)
                   ]
               }]
-      }], function () { return [{ type: i0__namespace.Injector }]; }, { vertical: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { vertical: [{
               type: i0.HostBinding,
               args: ['class.btn-group-vertical']
           }], handleClick: [{
@@ -197,8 +206,8 @@
           }] }); })();
 
   class BaseFormComponent extends i2.StylableComponent {
-      constructor(inj, config, initPromise) {
-          super(inj, config, initPromise);
+      constructor(inj, config, explicitContext, initPromise) {
+          super(inj, config, explicitContext, initPromise);
           this.inj = inj;
           this.binddatavalue = this.$element.attr('datavalue.bind');
       }
@@ -227,11 +236,11 @@
           }
           binddatavalue = binddatavalue.replace(/\[\$i\]/g, '[0]');
           // In case of list widget context will be the listItem.
-          if (_.has(this.context, binddatavalue.split('.')[0])) {
-              _.set(this.context, binddatavalue, value);
+          if (lodashEs.has(this.context, binddatavalue.split('.')[0])) {
+              lodashEs.set(this.context, binddatavalue, value);
           }
           else {
-              _.set(this.viewParent, binddatavalue, value);
+              lodashEs.set(this.viewParent, binddatavalue, value);
           }
       }
       invokeOnChange(value, $event) {
@@ -264,15 +273,20 @@
               });
           }
       }
-      static { this.ɵfac = function BaseFormComponent_Factory(t) { return new (t || BaseFormComponent)(i0__namespace.ɵɵinject(i0__namespace.Injector), i0__namespace.ɵɵinject(i2.WidgetConfig), i0__namespace.ɵɵinject(Promise)); }; }
+      static { this.ɵfac = function BaseFormComponent_Factory(t) { return new (t || BaseFormComponent)(i0__namespace.ɵɵinject(i0__namespace.Injector), i0__namespace.ɵɵinject(i2.WidgetConfig), i0__namespace.ɵɵinject('EXPLICIT_CONTEXT', 8), i0__namespace.ɵɵinject(Promise)); }; }
       static { this.ɵprov = /*@__PURE__*/ i0__namespace.ɵɵdefineInjectable({ token: BaseFormComponent, factory: BaseFormComponent.ɵfac }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(BaseFormComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(BaseFormComponent, [{
           type: i0.Injectable
-      }], function () { return [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
                   type: i0.Inject,
                   args: [i2.WidgetConfig]
-              }] }, { type: Promise }]; }, null); })();
+              }] }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }, { type: Promise }], null); })();
 
   /*
    * WMS-18269
@@ -352,10 +366,10 @@
       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__namespace.ɵɵgetInheritedFactory(BaseFormCustomComponent)))(t || BaseFormCustomComponent); }; }(); }
+      static { this.ɵfac = /*@__PURE__*/ (() => { let ɵBaseFormCustomComponent_BaseFactory; return function BaseFormCustomComponent_Factory(t) { return (ɵBaseFormCustomComponent_BaseFactory || (ɵBaseFormCustomComponent_BaseFactory = i0__namespace.ɵɵgetInheritedFactory(BaseFormCustomComponent)))(t || BaseFormCustomComponent); }; })(); }
       static { this.ɵprov = /*@__PURE__*/ i0__namespace.ɵɵdefineInjectable({ token: BaseFormCustomComponent, factory: BaseFormCustomComponent.ɵfac }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(BaseFormCustomComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(BaseFormCustomComponent, [{
           type: i0.Injectable
       }], null, null); })();
 
@@ -385,7 +399,7 @@
 
   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',
@@ -423,8 +437,8 @@
           this.proxyModel = (i1$1.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);
@@ -481,7 +495,7 @@
           super.ngAfterViewInit();
           i2.styler(this.nativeElement.querySelector('label'), this);
       }
-      static { this.ɵfac = function CheckboxComponent_Factory(t) { return new (t || CheckboxComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵinjectAttribute('checkedvalue'), i0__namespace.ɵɵinjectAttribute('uncheckedvalue'), i0__namespace.ɵɵinjectAttribute('type')); }; }
+      static { this.ɵfac = function CheckboxComponent_Factory(t) { return new (t || CheckboxComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵinjectAttribute('checkedvalue'), i0__namespace.ɵɵinjectAttribute('uncheckedvalue'), i0__namespace.ɵɵinjectAttribute('type'), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: CheckboxComponent, selectors: [["", "wmCheckbox", ""]], viewQuery: function CheckboxComponent_Query(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵviewQuery(i2$1.NgModel, 5);
               i0__namespace.ɵɵviewQuery(_c0$b, 7, i0.ElementRef);
@@ -495,17 +509,20 @@
                   i2.provideAs(CheckboxComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(CheckboxComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(CheckboxComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$a, decls: 6, vars: 17, consts: [[3, "ngClass"], ["type", "checkbox", "role", "checkbox", "focus-target", "", 3, "ngModel", "readonly", "required", "disabled", "tabindex", "ngModelChange", "blur"], ["checkbox", ""], [1, "caption", 3, "innerHtml"], ["alt", "Checkbox Image", "aria-hidden", "true", "src", "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==", 1, "switch"], ["type", "hidden", "aria-hidden", "true", "tabindex", "-1", 1, "ng-hide", "model-holder", 3, "disabled", "value"]], template: function CheckboxComponent_Template(rf, ctx) { if (rf & 1) {
-              i0__namespace.ɵɵelementStart(0, "label", 0)(1, "input", 1, 2);
-              i0__namespace.ɵɵ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__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
+              i0__namespace.ɵɵelementStart(0, "label", 1)(1, "input", 2, 0);
+              i0__namespace.ɵɵtwoWayListener("ngModelChange", function CheckboxComponent_Template_input_ngModelChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.proxyModel, $event) || (ctx.proxyModel = $event); return i0__namespace.ɵɵresetView($event); });
+              i0__namespace.ɵɵlistener("blur", function CheckboxComponent_Template_input_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.invokeOnTouched($event)); })("ngModelChange", function CheckboxComponent_Template_input_ngModelChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleChange($event)); });
               i0__namespace.ɵɵelementEnd();
               i0__namespace.ɵɵelement(3, "span", 3)(4, "img", 4);
               i0__namespace.ɵɵelementEnd();
               i0__namespace.ɵɵelement(5, "input", 5);
           } if (rf & 2) {
               i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction3(13, _c2$4, !ctx.proxyModel, ctx.disabled || ctx.readonly, ctx.required && ctx._caption));
-              i0__namespace.ɵɵadvance(1);
-              i0__namespace.ɵɵproperty("ngModel", ctx.proxyModel)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled || ctx.readonly)("tabindex", ctx.tabindex);
+              i0__namespace.ɵɵadvance();
+              i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.proxyModel);
+              i0__namespace.ɵɵproperty("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled || ctx.readonly)("tabindex", ctx.tabindex);
               i0__namespace.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("aria-checked", !!ctx.proxyModel)("accesskey", ctx.shortcutkey);
               i0__namespace.ɵɵadvance(2);
               i0__namespace.ɵɵproperty("innerHtml", ctx._caption, i0__namespace.ɵɵsanitizeHtml);
@@ -513,14 +530,14 @@
               i0__namespace.ɵɵproperty("disabled", ctx.disabled)("value", ctx.proxyModel);
           } }, dependencies: [i1__namespace.NgClass, i2$1__namespace.CheckboxControlValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.CheckboxRequiredValidator, i2$1__namespace.NgModel], encapsulation: 2 }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CheckboxComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CheckboxComponent, [{
           type: i0.Component,
           args: [{ selector: '[wmCheckbox]', providers: [
                       i2.provideAs(CheckboxComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(CheckboxComponent, i2$1.NG_VALIDATORS, true),
                       i2.provideAsWidgetRef(CheckboxComponent)
                   ], template: "<label [ngClass]=\"{'unchecked': !proxyModel, 'disabled': (disabled || readonly), 'required': (required && _caption)}\">\n    <input type=\"checkbox\"\n           role=\"checkbox\"\n           #checkbox\n           [attr.name]=\"name\"\n           [attr.aria-label]=\"hint\"\n           [attr.aria-checked]=\"!!proxyModel\"\n           focus-target\n           [(ngModel)]=\"proxyModel\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           [disabled]=\"disabled || readonly\"\n           [attr.accesskey]=\"shortcutkey\"\n           [tabindex]=\"tabindex\"\n           (blur)=\"invokeOnTouched($event)\"\n           (ngModelChange)=\"handleChange($event)\">\n    <span class=\"caption\" [innerHtml]=\"_caption\"></span>\n    <img alt=\"Checkbox Image\" aria-hidden=\"true\" src=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"switch\"/>\n</label>\n<input type=\"hidden\" class=\"ng-hide model-holder\" aria-hidden=\"true\" tabindex=\"-1\" [disabled]=\"disabled\" [value]=\"proxyModel\">\n" }]
-      }], function () { return [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
                   type: i0.Attribute,
                   args: ['checkedvalue']
               }] }, { type: undefined, decorators: [{
@@ -529,7 +546,12 @@
               }] }, { type: undefined, decorators: [{
                   type: i0.Attribute,
                   args: ['type']
-              }] }]; }, { ngModel: [{
+              }] }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { ngModel: [{
               type: i0.ViewChild,
               args: [i2$1.NgModel]
           }], checkboxEl: [{
@@ -539,6 +561,7 @@
               type: i0.HostListener,
               args: ['keydown.enter', ['$event', '"ENTER"']]
           }] }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(CheckboxComponent, { className: "CheckboxComponent", filePath: "checkbox/checkbox.component.ts", lineNumber: 59 }); })();
 
   class DatasetAwareFormComponent extends BaseFormCustomComponent {
       get modelByKey() {
@@ -567,17 +590,17 @@
           // invoke on datavalue change.
           this.invokeOnChange(val, undefined, true);
       }
-      constructor(inj, config, groupby) {
-          super(inj, config);
+      constructor(inj, config, explicitContext, groupby) {
+          super(inj, config, explicitContext);
           this.groupby = groupby;
           this.datasetItems = [];
           this.acceptsArray = false; // set to true if proxyModel on widget accepts array type.
           this.dataset$ = new rxjs.Subject();
           this.datavalue$ = new rxjs.Subject();
           this.allowempty = true;
-          this._debounceDatavalueUpdation = _.debounce((values) => {
+          this._debounceDatavalueUpdation = lodashEs.debounce((values) => {
               // if no item is found in datasetItems, wait untill the dataset updates by preserving the datavalue in toBeProcessedDatavalue.
-              if (!i1$1.isDefined(this._modelByKey) || (_.isArray(this._modelByKey) && !this._modelByKey.length)) {
+              if (!i1$1.isDefined(this._modelByKey) || (lodashEs.isArray(this._modelByKey) && !this._modelByKey.length)) {
                   this.toBeProcessedDatavalue = values;
                   this._modelByValue = '';
               }
@@ -585,7 +608,7 @@
                   // obtain the first array value when multiple is set to false.
                   // set the modelByValue only when undefined.
                   if (!i1$1.isDefined(this._modelByValue)) {
-                      this._modelByValue = (!this.multiple && _.isArray(this.toBeProcessedDatavalue)) ? this.toBeProcessedDatavalue[0] : this.toBeProcessedDatavalue;
+                      this._modelByValue = (!this.multiple && lodashEs.isArray(this.toBeProcessedDatavalue)) ? this.toBeProcessedDatavalue[0] : this.toBeProcessedDatavalue;
                   }
                   this.toBeProcessedDatavalue = undefined;
               }
@@ -615,7 +638,7 @@
           if (!this.datasetItems.length) {
               return;
           }
-          if (this.multiple && !_.isArray(keys)) {
+          if (this.multiple && !lodashEs.isArray(keys)) {
               keys = [keys];
           }
           // Set the _modelByKey to the modified keys.
@@ -623,10 +646,10 @@
           if (this.multiple) {
               this._modelByValue = [];
               keys.forEach(key => {
-                  const itemByKey = _.find(this.datasetItems, item => {
+                  const itemByKey = lodashEs.find(this.datasetItems, item => {
                       // not triple equal, as the instance type can be different.
                       // only value comparison should be done.
-                      return _.toString(item.key) === _.toString(key);
+                      return lodashEs.toString(item.key) === lodashEs.toString(key);
                   });
                   if (itemByKey) {
                       itemByKey.selected = true;
@@ -636,10 +659,10 @@
           }
           else {
               this._modelByValue = '';
-              const itemByKey = _.find(this.datasetItems, item => {
+              const itemByKey = lodashEs.find(this.datasetItems, item => {
                   // not triple equal, as the instance type can be different.
                   // only value comparison should be done.
-                  return _.toString(item.key) === _.toString(keys);
+                  return lodashEs.toString(item.key) === lodashEs.toString(keys);
               });
               if (itemByKey) {
                   itemByKey.selected = true;
@@ -658,14 +681,14 @@
       selectByValue(values) {
           this.resetDatasetItems();
           // if datavalue is not defined or empty then set the model as undefined.
-          if (!i1$1.isDefined(values) || values === '' || _.isNull(values) || (values instanceof Array && !values.length)) {
+          if (!i1$1.isDefined(values) || values === '' || lodashEs.isNull(values) || (values instanceof Array && !values.length)) {
               this._modelByKey = undefined;
               // do not return when allowempty is set to true.
               if (!this.allowempty || !i1$1.isDefined(values)) {
                   return;
               }
           }
-          if (this.acceptsArray && !_.isArray(values)) {
+          if (this.acceptsArray && !lodashEs.isArray(values)) {
               values = this.allowempty ? [values] : i2.extractDataAsArray(values);
           }
           // preserve the datavalue if datasetItems are empty.
@@ -674,16 +697,16 @@
               return;
           }
           const filterField = this.datafield === i2.ALLFIELDS ? 'dataObject' : 'key';
-          if (_.isArray(values)) {
+          if (lodashEs.isArray(values)) {
               this._modelByKey = [];
               values.forEach(val => {
-                  const itemByValue = _.find(this.datasetItems, item => {
+                  const itemByValue = lodashEs.find(this.datasetItems, item => {
                       if (filterField === 'dataObject') {
                           if (this.compareby && this.compareby.length) {
                               return i1$1.isEqualWithFields(item[filterField], val, this.compareby);
                           }
                       }
-                      return (_.isObject(item.value) ? _.isEqual(item.value, val) : (_.toString(item.value)).toLowerCase() === (_.toString(val)).toLowerCase());
+                      return (lodashEs.isObject(item.value) ? lodashEs.isEqual(item.value, val) : (lodashEs.toString(item.value)).toLowerCase() === (lodashEs.toString(val)).toLowerCase());
                   });
                   if (itemByValue) {
                       itemByValue.selected = true;
@@ -693,13 +716,13 @@
           }
           else {
               this._modelByKey = undefined;
-              const itemByValue = _.find(this.datasetItems, item => {
+              const itemByValue = lodashEs.find(this.datasetItems, item => {
                   if (filterField === 'dataObject') {
                       if (this.compareby && this.compareby.length) {
                           return i1$1.isEqualWithFields(item[filterField], values, this.compareby);
                       }
                   }
-                  return (_.isObject(item.value) ? _.isEqual(item.value, values) : (_.toString(item.value)).toLowerCase() === (_.toString(values)).toLowerCase());
+                  return (lodashEs.isObject(item.value) ? lodashEs.isEqual(item.value, values) : (lodashEs.toString(item.value)).toLowerCase() === (lodashEs.toString(values)).toLowerCase());
               });
               if (itemByValue) {
                   itemByValue.selected = true;
@@ -722,7 +745,7 @@
       }
       // This function parses the dataset and extracts the displayOptions from parsed dataset.
       initDatasetItems() {
-          if (!this.dataset || _.isEmpty(this.dataset)) {
+          if (!this.dataset || lodashEs.isEmpty(this.dataset)) {
               this.datasetItems = [];
               // notify the dataset listeners
               this.dataset$.next(this.datasetItems);
@@ -750,7 +773,7 @@
       postDatasetItemsInit() {
           if (this.datasetItems.length && !this._defaultQueryInvoked) {
               // use the latest of toBeProcessedDatavalue, datavalue
-              const _datavalue = _.isEmpty(this.toBeProcessedDatavalue) ? this.datavalue : this.toBeProcessedDatavalue;
+              const _datavalue = lodashEs.isEmpty(this.toBeProcessedDatavalue) ? this.datavalue : this.toBeProcessedDatavalue;
               this.selectByValue(_datavalue);
           }
           // notify the dataset listeners
@@ -820,18 +843,23 @@
               this.cancelLocaleChangeSubscription();
           }
       }
-      static { this.ɵfac = function DatasetAwareFormComponent_Factory(t) { return new (t || DatasetAwareFormComponent)(i0__namespace.ɵɵinject(i0__namespace.Injector), i0__namespace.ɵɵinject(i2.WidgetConfig), i0__namespace.ɵɵinjectAttribute('groupby')); }; }
+      static { this.ɵfac = function DatasetAwareFormComponent_Factory(t) { return new (t || DatasetAwareFormComponent)(i0__namespace.ɵɵinject(i0__namespace.Injector), i0__namespace.ɵɵinject(i2.WidgetConfig), i0__namespace.ɵɵinject('EXPLICIT_CONTEXT', 8), i0__namespace.ɵɵinjectAttribute('groupby')); }; }
       static { this.ɵprov = /*@__PURE__*/ i0__namespace.ɵɵdefineInjectable({ token: DatasetAwareFormComponent, factory: DatasetAwareFormComponent.ɵfac }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(DatasetAwareFormComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(DatasetAwareFormComponent, [{
           type: i0.Injectable
-      }], function () { return [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
                   type: i0.Inject,
                   args: [i2.WidgetConfig]
+              }] }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
               }] }, { type: undefined, decorators: [{
                   type: i0.Attribute,
                   args: ['groupby']
-              }] }]; }, null); })();
+              }] }], null); })();
 
   const checkboxsetProps = new Map([
       ['class', i2.PROP_STRING],
@@ -867,60 +895,61 @@
   };
 
   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__namespace.ɵɵelementStart(0, "label", 8);
       i0__namespace.ɵɵelement(1, "input", 9)(2, "span", 10);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const ctx_r9 = i0__namespace.ɵɵnextContext();
-      const item_r5 = ctx_r9.$implicit;
-      const i_r6 = ctx_r9.index;
-      const ctx_r7 = i0__namespace.ɵɵnextContext(2);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(12, _c1$9, ctx_r7.disabled || ctx_r7.readonly))("title", item_r5.label);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵ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__namespace.ɵɵattribute("aria-label", item_r5.key)("aria-checked", item_r5.selected)("data-attr-index", i_r6);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("textContent", item_r5.label);
+      const ctx_r3 = i0__namespace.ɵɵnextContext();
+      const item_r2 = ctx_r3.$implicit;
+      const i_r5 = ctx_r3.index;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(2);
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(12, _c2$3, ctx_r2.disabled || ctx_r2.readonly))("title", item_r2.label);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵ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__namespace.ɵɵattribute("aria-label", item_r2.key)("aria-checked", item_r2.selected)("data-attr-index", i_r5);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("textContent", item_r2.label);
   } }
   function CheckboxsetComponent_ng_template_0_li_0_label_2_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelementStart(0, "label", 11);
       i0__namespace.ɵɵelement(1, "input", 9)(2, "span", 12);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const ctx_r10 = i0__namespace.ɵɵnextContext();
-      const item_r5 = ctx_r10.$implicit;
-      const i_r6 = ctx_r10.index;
-      const ctx_r8 = i0__namespace.ɵɵnextContext(2);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(10, _c1$9, ctx_r8.disabled || ctx_r8.readonly));
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵ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__namespace.ɵɵattribute("aria-label", item_r5.key)("aria-checked", item_r5.selected)("data-attr-index", i_r6);
+      const ctx_r3 = i0__namespace.ɵɵnextContext();
+      const item_r2 = ctx_r3.$implicit;
+      const i_r5 = ctx_r3.index;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(2);
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(10, _c2$3, ctx_r2.disabled || ctx_r2.readonly));
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵ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__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
+      const _r1 = i0__namespace.ɵɵgetCurrentView();
       i0__namespace.ɵɵelementStart(0, "li", 5);
-      i0__namespace.ɵɵlistener("click", function CheckboxsetComponent_ng_template_0_li_0_Template_li_click_0_listener($event) { const restoredCtx = i0__namespace.ɵɵrestoreView(_r12); const item_r5 = restoredCtx.$implicit; const ctx_r11 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r11.onCheckboxLabelClick($event, item_r5.key)); });
-      i0__namespace.ɵɵtemplate(1, CheckboxsetComponent_ng_template_0_li_0_label_1_Template, 3, 14, "label", 6);
-      i0__namespace.ɵɵtemplate(2, CheckboxsetComponent_ng_template_0_li_0_label_2_Template, 3, 12, "label", 7);
+      i0__namespace.ɵɵlistener("click", function CheckboxsetComponent_ng_template_0_li_0_Template_li_click_0_listener($event) { const item_r2 = i0__namespace.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.onCheckboxLabelClick($event, item_r2.key)); });
+      i0__namespace.ɵɵ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__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const item_r5 = ctx.$implicit;
-      const ctx_r4 = i0__namespace.ɵɵnextContext(2);
-      i0__namespace.ɵɵclassProp("active", item_r5.selected);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(7, _c2$3, ctx_r4.itemclass, ctx_r4.itemsPerRowClass))("wmItemTemplate", ctx_r4.content)("userComponentParams", item_r5);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngIf", !ctx_r4.content);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngIf", ctx_r4.content);
+      const item_r2 = ctx.$implicit;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(2);
+      i0__namespace.ɵɵclassProp("active", item_r2.selected);
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(7, _c1$9, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r2);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngIf", !ctx_r2.content);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngIf", ctx_r2.content);
   } }
   function CheckboxsetComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵtemplate(0, CheckboxsetComponent_ng_template_0_li_0_Template, 3, 10, "li", 4);
   } if (rf & 2) {
-      const ctx_r0 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵproperty("ngForOf", ctx_r0.datasetItems);
+      const ctx_r2 = i0__namespace.ɵɵnextContext();
+      i0__namespace.ɵɵproperty("ngForOf", ctx_r2.datasetItems);
   } }
   function CheckboxsetComponent_div_2_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelement(0, "div", 13);
@@ -928,102 +957,98 @@
   function CheckboxsetComponent_ng_template_3_li_0_i_6_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelement(0, "i", 23);
   } if (rf & 2) {
-      const ctx_r15 = i0__namespace.ɵɵnextContext(3);
-      i0__namespace.ɵɵpropertyInterpolate2("title", "", ctx_r15.appLocale.LABEL_COLLAPSE, "/", ctx_r15.appLocale.LABEL_EXPAND, "");
+      const ctx_r2 = i0__namespace.ɵɵnextContext(3);
+      i0__namespace.ɵɵ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__namespace.ɵɵelement(0, "span", 24);
   } if (rf & 2) {
-      const groupObj_r14 = i0__namespace.ɵɵnextContext().$implicit;
-      i0__namespace.ɵɵproperty("textContent", groupObj_r14.data.length);
+      const groupObj_r7 = i0__namespace.ɵɵnextContext().$implicit;
+      i0__namespace.ɵɵproperty("textContent", groupObj_r7.data.length);
   } }
   function CheckboxsetComponent_ng_template_3_li_0_li_8_label_1_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelementStart(0, "label", 8);
       i0__namespace.ɵɵelement(1, "input", 26)(2, "span", 10);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const ctx_r23 = i0__namespace.ɵɵnextContext();
-      const item_r19 = ctx_r23.$implicit;
-      const i_r20 = ctx_r23.index;
-      const ctx_r21 = i0__namespace.ɵɵnextContext(3);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(10, _c1$9, ctx_r21.disabled || ctx_r21.readonly))("title", item_r19.label);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵ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__namespace.ɵɵattribute("data-attr-index", i_r20);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("textContent", item_r19.label);
+      const ctx_r9 = i0__namespace.ɵɵnextContext();
+      const item_r9 = ctx_r9.$implicit;
+      const i_r11 = ctx_r9.index;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(3);
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(10, _c2$3, ctx_r2.disabled || ctx_r2.readonly))("title", item_r9.label);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵ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__namespace.ɵɵattribute("data-attr-index", i_r11);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("textContent", item_r9.label);
   } }
   function CheckboxsetComponent_ng_template_3_li_0_li_8_label_2_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelementStart(0, "label", 11);
       i0__namespace.ɵɵelement(1, "input", 26)(2, "span", 27);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const ctx_r24 = i0__namespace.ɵɵnextContext();
-      const item_r19 = ctx_r24.$implicit;
-      const i_r20 = ctx_r24.index;
-      const ctx_r22 = i0__namespace.ɵɵnextContext(3);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(8, _c1$9, ctx_r22.disabled || ctx_r22.readonly));
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵ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__namespace.ɵɵattribute("data-attr-index", i_r20);
+      const ctx_r9 = i0__namespace.ɵɵnextContext();
+      const item_r9 = ctx_r9.$implicit;
+      const i_r11 = ctx_r9.index;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(3);
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(8, _c2$3, ctx_r2.disabled || ctx_r2.readonly));
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵ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__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
+      const _r8 = i0__namespace.ɵɵgetCurrentView();
       i0__namespace.ɵɵelementStart(0, "li", 25);
-      i0__namespace.ɵɵlistener("click", function CheckboxsetComponent_ng_template_3_li_0_li_8_Template_li_click_0_listener($event) { const restoredCtx = i0__namespace.ɵɵrestoreView(_r26); const item_r19 = restoredCtx.$implicit; const ctx_r25 = i0__namespace.ɵɵnextContext(3); return i0__namespace.ɵɵresetView(ctx_r25.onCheckboxLabelClick($event, item_r19)); });
-      i0__namespace.ɵɵtemplate(1, CheckboxsetComponent_ng_template_3_li_0_li_8_label_1_Template, 3, 12, "label", 6);
-      i0__namespace.ɵɵtemplate(2, CheckboxsetComponent_ng_template_3_li_0_li_8_label_2_Template, 3, 10, "label", 7);
+      i0__namespace.ɵɵlistener("click", function CheckboxsetComponent_ng_template_3_li_0_li_8_Template_li_click_0_listener($event) { const item_r9 = i0__namespace.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0__namespace.ɵɵnextContext(3); return i0__namespace.ɵɵresetView(ctx_r2.onCheckboxLabelClick($event, item_r9)); });
+      i0__namespace.ɵɵ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__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const item_r19 = ctx.$implicit;
-      const ctx_r17 = i0__namespace.ɵɵnextContext(3);
-      i0__namespace.ɵɵclassProp("active", item_r19.selected);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(7, _c3$1, ctx_r17.itemclass, ctx_r17.itemsPerRowClass))("wmItemTemplate", ctx_r17.content)("userComponentParams", item_r19);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngIf", !ctx_r17.content);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngIf", ctx_r17.content);
+      const item_r9 = ctx.$implicit;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(3);
+      i0__namespace.ɵɵclassProp("active", item_r9.selected);
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(7, _c4$1, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r9);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngIf", !ctx_r2.content);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
+      const _r6 = i0__namespace.ɵɵgetCurrentView();
       i0__namespace.ɵɵelementStart(0, "li", 15)(1, "ul", 16)(2, "li", 17);
-      i0__namespace.ɵɵlistener("click", function CheckboxsetComponent_ng_template_3_li_0_Template_li_click_2_listener($event) { i0__namespace.ɵɵrestoreView(_r28); const ctx_r27 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r27.handleHeaderClick($event)); });
+      i0__namespace.ɵɵlistener("click", function CheckboxsetComponent_ng_template_3_li_0_Template_li_click_2_listener($event) { i0__namespace.ɵɵrestoreView(_r6); const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.handleHeaderClick($event)); });
       i0__namespace.ɵɵelementStart(3, "h4", 18);
       i0__namespace.ɵɵtext(4);
       i0__namespace.ɵɵelementStart(5, "div", 19);
-      i0__namespace.ɵɵtemplate(6, CheckboxsetComponent_ng_template_3_li_0_i_6_Template, 1, 2, "i", 20);
-      i0__namespace.ɵɵtemplate(7, CheckboxsetComponent_ng_template_3_li_0_span_7_Template, 1, 1, "span", 21);
+      i0__namespace.ɵɵ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__namespace.ɵɵelementEnd()()();
       i0__namespace.ɵɵtemplate(8, CheckboxsetComponent_ng_template_3_li_0_li_8_Template, 3, 10, "li", 22);
       i0__namespace.ɵɵelementEnd()();
   } if (rf & 2) {
-      const groupObj_r14 = ctx.$implicit;
-      const ctx_r13 = i0__namespace.ɵɵnextContext(2);
+      const groupObj_r7 = ctx.$implicit;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(2);
       i0__namespace.ɵɵadvance(2);
-      i0__namespace.ɵɵproperty("title", groupObj_r14.key)("ngClass", i0__namespace.ɵɵpureFunction1(6, _c4$1, ctx_r13.collapsible));
+      i0__namespace.ɵɵproperty("title", groupObj_r7.key)("ngClass", i0__namespace.ɵɵpureFunction1(6, _c3$1, ctx_r2.collapsible));
       i0__namespace.ɵɵadvance(2);
-      i0__namespace.ɵɵtextInterpolate1("", groupObj_r14.key, " ");
+      i0__namespace.ɵɵtextInterpolate1("", groupObj_r7.key, " ");
       i0__namespace.ɵɵadvance(2);
-      i0__namespace.ɵɵproperty("ngIf", ctx_r13.collapsible);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngIf", ctx_r13.showcount);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngForOf", groupObj_r14.data);
+      i0__namespace.ɵɵproperty("ngIf", ctx_r2.collapsible);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngIf", ctx_r2.showcount);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngForOf", groupObj_r7.data);
   } }
   function CheckboxsetComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵtemplate(0, CheckboxsetComponent_ng_template_3_li_0_Template, 9, 8, "li", 14);
   } if (rf & 2) {
-      const ctx_r3 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵproperty("ngForOf", ctx_r3.groupedData);
+      const ctx_r2 = i0__namespace.ɵɵnextContext();
+      i0__namespace.ɵɵ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 = '';
           i2.styler(this.nativeElement, this);
           this.multiple = true;
@@ -1035,7 +1060,8 @@
           // construct the _model from the checked elements.
           const inputElements = this.nativeElement.querySelectorAll('input:checked');
           const keys = [];
-          _.forEach(inputElements, ($el) => {
+          lodashEs.forEach(inputElements, ($el) => {
+              // @ts-ignore
               keys.push($el.value);
           });
           this.modelByKey = keys;
@@ -1054,7 +1080,7 @@
                   return callback();
               });
           }
-          else if (!_.includes(['change'], eventName)) {
+          else if (!lodashEs.includes(['change'], eventName)) {
               super.handleEvent(node, eventName, callback, locals);
           }
       }
@@ -1077,38 +1103,43 @@
               super.onPropertyChange(key, nv, ov);
           }
       }
-      static { this.ɵfac = function CheckboxsetComponent_Factory(t) { return new (t || CheckboxsetComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+      static { this.ɵfac = function CheckboxsetComponent_Factory(t) { return new (t || CheckboxsetComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: CheckboxsetComponent, selectors: [["", "wmCheckboxset", ""]], hostBindings: function CheckboxsetComponent_HostBindings(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵlistener("keydown.enter", function CheckboxsetComponent_keydown_enter_HostBindingHandler($event) { return ctx.onKeyDown($event, "ENTER"); });
           } }, exportAs: ["wmCheckboxset"], features: [i0__namespace.ɵɵProvidersFeature([
                   i2.provideAs(CheckboxsetComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(CheckboxsetComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(CheckboxsetComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$a, decls: 5, vars: 4, consts: [[3, "ngIf", "ngIfElse"], ["hidden", "", 1, "model-holder", 3, "disabled"], ["class", "readonly-wrapper", 4, "ngIf"], ["groupedListTemplate", ""], ["partialContainer", "", "role", "presentation", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], ["partialContainer", "", "role", "presentation", 3, "ngClass", "wmItemTemplate", "userComponentParams", "click"], ["class", "app-checkboxset-label", 3, "ngClass", "title", 4, "ngIf"], ["class", "app-checkboxset-label", 3, "ngClass", 4, "ngIf"], [1, "app-checkboxset-label", 3, "ngClass", "title"], ["type", "checkbox", 3, "name", "tabindex", "disabled", "value", "checked"], [1, "caption", 3, "textContent"], [1, "app-checkboxset-label", 3, "ngClass"], ["partial-container-target", "", 1, "caption", "customTemplate"], [1, "readonly-wrapper"], ["class", "app-list-item-group", "role", "presentation", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "app-list-item-group"], [1, "item-group"], [1, "list-group-header", 3, "title", "ngClass", "click"], [1, "group-title"], [1, "header-action"], ["class", "app-icon wi action wi-chevron-up", 3, "title", 4, "ngIf"], ["class", "label label-default", 3, "textContent", 4, "ngIf"], ["partialContainer", "", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], [1, "app-icon", "wi", "action", "wi-chevron-up", 3, "title"], [1, "label", "label-default", 3, "textContent"], ["partialContainer", "", 3, "ngClass", "wmItemTemplate", "userComponentParams", "click"], ["type", "checkbox", "aria-label", "checkbox group", 3, "name", "tabindex", "disabled", "value", "checked"], ["partial-container-target", "", 1, "caption"]], template: function CheckboxsetComponent_Template(rf, ctx) { if (rf & 1) {
-              i0__namespace.ɵɵtemplate(0, CheckboxsetComponent_ng_template_0_Template, 1, 1, "ng-template", 0);
-              i0__namespace.ɵɵelement(1, "input", 1);
-              i0__namespace.ɵɵtemplate(2, CheckboxsetComponent_div_2_Template, 1, 0, "div", 2);
-              i0__namespace.ɵɵtemplate(3, CheckboxsetComponent_ng_template_3_Template, 1, 1, "ng-template", null, 3, i0__namespace.ɵɵtemplateRefExtractor);
+              ]), i0__namespace.ɵɵ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__namespace.ɵɵtemplate(0, CheckboxsetComponent_ng_template_0_Template, 1, 1, "ng-template", 1);
+              i0__namespace.ɵɵelement(1, "input", 2);
+              i0__namespace.ɵɵtemplate(2, CheckboxsetComponent_div_2_Template, 1, 0, "div", 3)(3, CheckboxsetComponent_ng_template_3_Template, 1, 1, "ng-template", null, 0, i0__namespace.ɵɵtemplateRefExtractor);
           } if (rf & 2) {
-              const _r2 = i0__namespace.ɵɵreference(4);
-              i0__namespace.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", _r2);
-              i0__namespace.ɵɵadvance(1);
+              const groupedListTemplate_r12 = i0__namespace.ɵɵreference(4);
+              i0__namespace.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", groupedListTemplate_r12);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("disabled", ctx.disabled || ctx.readonly);
-              i0__namespace.ɵɵadvance(1);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("ngIf", ctx.readonly || ctx.disabled);
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgForOf, i1__namespace.NgIf, i2__namespace.ItemTemplateDirective, i2__namespace.PartialParamHandlerDirective, i2__namespace.PartialContainerDirective, i2__namespace.TextContentDirective], encapsulation: 2 }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CheckboxsetComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CheckboxsetComponent, [{
           type: i0.Component,
           args: [{ selector: '[wmCheckboxset]', exportAs: 'wmCheckboxset', providers: [
                       i2.provideAs(CheckboxsetComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(CheckboxsetComponent, i2$1.NG_VALIDATORS, true),
                       i2.provideAsWidgetRef(CheckboxsetComponent)
                   ], template: "<ng-template [ngIf]=\"!groupby\" [ngIfElse]=\"groupedListTemplate\">\n    <li [ngClass]=\"['checkbox', 'app-checkbox', itemclass, itemsPerRowClass]\"\n        [class.active]=\"item.selected\"\n        *ngFor=\"let item of datasetItems; let i = index\"\n        [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n        (click)=\"onCheckboxLabelClick($event, item.key)\" role=\"presentation\">\n        <!-- Default item template -->\n        <label *ngIf=\"!content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" [title]=\"item.label\">\n            <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\" [attr.aria-label]=\"item.key\"\n                   [tabindex]=\"tabindex\" [attr.aria-checked]=\"item.selected\"\n                   [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                   [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n            <span class=\"caption\" [textContent]=\"item.label\"></span>\n        </label>\n        <!-- Custom partial template -->\n        <label *ngIf=\"content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" >\n            <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\" [attr.aria-label]=\"item.key\"\n                   [tabindex]=\"tabindex\" [attr.aria-checked]=\"item.selected\"\n                   [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                   [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n            <span class=\"caption customTemplate\" partial-container-target></span>\n        </label>\n    </li>\n</ng-template>\n<input [disabled]=\"disabled || readonly\" hidden class=\"model-holder\">\n<div *ngIf=\"readonly || disabled\" class=\"readonly-wrapper\"></div>\n\n<!-- This template will be displayed when groupby is specified. -->\n<ng-template #groupedListTemplate>\n    <li *ngFor=\"let groupObj of groupedData\" class=\"app-list-item-group\" role=\"presentation\">\n        <ul class=\"item-group\">\n            <li class=\"list-group-header\" (click)=\"handleHeaderClick($event)\" [title]=\"groupObj.key\" [ngClass]=\"{'collapsible-content': collapsible}\">\n                <h4 class=\"group-title\">{{groupObj.key}}\n                    <div class=\"header-action\">\n                        <i class=\"app-icon wi action wi-chevron-up\" *ngIf=\"collapsible\" title=\"{{appLocale.LABEL_COLLAPSE}}/{{appLocale.LABEL_EXPAND}}\"></i>\n                        <span *ngIf=\"showcount\" class=\"label label-default\" [textContent]=\"groupObj.data.length\"></span>\n                    </div>\n                </h4>\n            </li>\n            <li *ngFor=\"let item of groupObj.data; let i = index;\"\n                [ngClass]=\"['checkbox', 'app-checkbox', 'group-list-item', itemclass, itemsPerRowClass]\"\n                [class.active]=\"item.selected\"\n                [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n                (click)=\"onCheckboxLabelClick($event, item)\">\n                <!-- Default item template -->\n                <label *ngIf=\"!content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" [title]=\"item.label\">\n                    <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\" aria-label=\"checkbox group\"\n                           [tabindex]=\"tabindex\"\n                           [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                           [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption\" [textContent]=\"item.label\"></span>\n                </label>\n                <!-- Custom partial template -->\n                <label *ngIf=\"content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" >\n                    <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\" aria-label=\"checkbox group\"\n                           [tabindex]=\"tabindex\"\n                           [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                           [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption\" partial-container-target></span>\n                </label>\n            </li>\n        </ul>\n    </li>\n</ng-template>\n" }]
-      }], function () { return [{ type: i0__namespace.Injector }]; }, { onKeyDown: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { onKeyDown: [{
               type: i0.HostListener,
               args: ['keydown.enter', ['$event', '"ENTER"']]
           }] }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(CheckboxsetComponent, { className: "CheckboxsetComponent", filePath: "checkboxset/checkboxset.component.ts", lineNumber: 27 }); })();
 
   const registerProps$a = () => {
       i2.register('wm-form-group', new Map([
@@ -1132,8 +1163,8 @@
   };
   class CompositeDirective extends i2.StylableComponent {
       static { this.initializeProps = registerProps$a(); }
-      constructor(inj) {
-          super(inj, WIDGET_CONFIG$a);
+      constructor(inj, explicitContext) {
+          super(inj, WIDGET_CONFIG$a, explicitContext);
           i2.styler(this.nativeElement, this, i2.APPLY_STYLES_TYPE.CONTAINER);
       }
       /**
@@ -1169,7 +1200,7 @@
           i1$1.addForIdAttributes(this.nativeElement);
           this.assignRequiredToSubComponents();
       }
-      static { this.ɵfac = function CompositeDirective_Factory(t) { return new (t || CompositeDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+      static { this.ɵfac = function CompositeDirective_Factory(t) { return new (t || CompositeDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: CompositeDirective, selectors: [["div", "wmComposite", ""]], contentQueries: function CompositeDirective_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
               i0__namespace.ɵɵcontentQuery(dirIndex, i2.WidgetRef, 5);
           } if (rf & 2) {
@@ -1179,7 +1210,7 @@
                   i2.provideAsWidgetRef(CompositeDirective)
               ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CompositeDirective, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CompositeDirective, [{
           type: i0.Directive,
           args: [{
                   selector: 'div[wmComposite]',
@@ -1187,7 +1218,12 @@
                       i2.provideAsWidgetRef(CompositeDirective)
                   ]
               }]
-      }], function () { return [{ type: i0__namespace.Injector }]; }, { componentRefs: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { componentRefs: [{
               type: i0.ContentChildren,
               args: [i2.WidgetRef, { descendants: true }]
           }] }); })();
@@ -1249,7 +1285,7 @@
       }
       // invoke the change callback
       handleChange(newValue) {
-          if (this.autotrim && this.datavalue && _.isString(this.datavalue)) {
+          if (this.autotrim && this.datavalue && lodashEs.isString(this.datavalue)) {
               this.datavalue = this.datavalue.trim();
           }
           this.invokeOnChange(this.datavalue, { type: 'change' }, this.ngModel.valid);
@@ -1267,7 +1303,7 @@
       // Update the model on enter key press
       flushViewChanges(val) {
           // when val contains masked value, update the model with unmasked value
-          const unMaskedVal = _.get(this.imask, 'maskRef.unmaskedValue');
+          const unMaskedVal = lodashEs.get(this.imask, 'maskRef.unmaskedValue');
           val = unMaskedVal ? unMaskedVal : val;
           this.ngModel.update.next(val);
           i1$1.$appDigest();
@@ -1280,8 +1316,8 @@
           }
           i2.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 = {
@@ -1291,19 +1327,24 @@
           updateOn = updateOn === 'default' ? 'change' : updateOn;
           this.ngModelOptions.updateOn = updateOn;
       }
-      static { this.ɵfac = function BaseInput_Factory(t) { return new (t || BaseInput)(i0__namespace.ɵɵinject(i0__namespace.Injector), i0__namespace.ɵɵinject(i2.WidgetConfig)); }; }
+      static { this.ɵfac = function BaseInput_Factory(t) { return new (t || BaseInput)(i0__namespace.ɵɵinject(i0__namespace.Injector), i0__namespace.ɵɵinject(i2.WidgetConfig), i0__namespace.ɵɵinject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵprov = /*@__PURE__*/ i0__namespace.ɵɵdefineInjectable({ token: BaseInput, factory: BaseInput.ɵfac }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(BaseInput, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(BaseInput, [{
           type: i0.Injectable
-      }], function () { return [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
                   type: i0.Inject,
                   args: [i2.WidgetConfig]
-              }] }]; }, null); })();
+              }] }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], null); })();
 
-  class NumberLocale extends BaseInput {
-      constructor(inj, config, i18nService, trailingZeroDecimalPipe) {
-          super(inj, config);
+  exports.NumberLocale = class NumberLocale extends BaseInput {
+      constructor(inj, config, i18nService, trailingZeroDecimalPipe, explicitContext) {
+          super(inj, config, explicitContext);
           this.i18nService = i18nService;
           this.trailingZeroDecimalPipe = trailingZeroDecimalPipe;
           this.isDefaultQuery = true;
@@ -1319,7 +1360,8 @@
       set datavalue(value) {
           this.lastValIsDecimal = false;
           // set text value to null if data value is empty.
-          if (_.includes([null, undefined, ''], value)) {
+          // @ts-ignore
+          if (lodashEs.includes([null, undefined, ''], value)) {
               const input = this.inputEl.nativeElement;
               const prevDataValue = this.prevDatavalue;
               this.displayValue = input.value = this.proxyModel = null;
@@ -1332,8 +1374,8 @@
           }
           // if the widget has default value and if we change the locale, the value should be in selected locale format.
           if (this.isDefaultQuery) {
-              const isLocalizedNumber = _.isString(value) && _.includes(value, this.DECIMAL);
-              const parts = isLocalizedNumber ? value.split(this.DECIMAL) : _.isString(value) && value.split('.');
+              const isLocalizedNumber = lodashEs.isString(value) && lodashEs.includes(value, this.DECIMAL);
+              const parts = isLocalizedNumber ? value.split(this.DECIMAL) : lodashEs.isString(value) && value.split('.');
               this.decimalValue = parts[1] || '';
               value = isLocalizedNumber ? value : this.transformNumber(value);
           }
@@ -1348,7 +1390,7 @@
               model = NaN;
           }
           // On keypress, if the user types a decimal and is still active on the input do not throw error.
-          if (_.isNaN(model) && strVal[strVal.length - 1] === this.DECIMAL && this.ngModelOptions.updateOn === 'change' && this.$element.find('input:focus').length) {
+          if (isNaN(model) && strVal[strVal.length - 1] === this.DECIMAL && this.ngModelOptions.updateOn === 'change' && this.$element.find('input:focus').length) {
               this.lastValIsDecimal = true;
           }
           // get a valid number form the text.
@@ -1384,7 +1426,7 @@
        */
       isValid(val) {
           // id number is infinite then consider it as invalid value
-          if (_.isNaN(val) || !_.isFinite(val) || (!Number.isInteger(this.step) &&
+          if (isNaN(val) || !isFinite(val) || (!Number.isInteger(this.step) &&
               this.countDecimals(val) > this.countDecimals(this.step))) {
               this.isInvalidNumber = true;
               return false;
@@ -1402,11 +1444,11 @@
        * @returns {number}
        */
       getValueInRange(value) {
-          if (!_.isNaN(this.minvalue) && value < this.minvalue) {
+          if (!isNaN(this.minvalue) && value < this.minvalue) {
               this.validateType = 'minvalue';
               return this.minvalue;
           }
-          if (!_.isNaN(this.maxvalue) && value > this.maxvalue) {
+          if (!isNaN(this.maxvalue) && value > this.maxvalue) {
               this.validateType = 'maxvalue';
               return this.maxvalue;
           }
@@ -1535,7 +1577,7 @@
               const valInWholeNum = parseInt(value.toString().replace(/\D/g, ''));
               financialVal = valInWholeNum * this.step;
           }
-          if (!_.isNaN(financialVal)) {
+          if (!isNaN(financialVal)) {
               // When update on key is set keypress, update the datavalue else update only the display value
               if (this.ngModelOptions.updateOn === 'change') {
                   this.datavalue = parseFloat(financialVal.toFixed(stepVal));
@@ -1595,7 +1637,7 @@
           const targetVal = $event.target.value.replace(/,/g, '');
           // proxyModel to be updated from $event.target.value if present to support arrow keys when input changes else pick up from this.proxymodel
           let proxyModel;
-          if (targetVal && !_.isNaN(parseFloat(targetVal))) {
+          if (targetVal && !isNaN(parseFloat(targetVal))) {
               proxyModel = parseFloat(targetVal);
           }
           else {
@@ -1606,14 +1648,14 @@
           if (this.numberNotInRange) {
               const inputValue = this.parseNumber(this.inputEl.nativeElement.value);
               // take the textbox value as current model if the value is valid.
-              if (!_.isNaN(inputValue)) {
+              if (!isNaN(inputValue)) {
                   value = this.getValueInRange(inputValue);
                   proxyModel = inputValue;
                   this.resetValidations();
               }
           }
           else {
-              if (_.isUndefined(proxyModel) || _.isNull(proxyModel)) {
+              if (lodashEs.isUndefined(proxyModel) || lodashEs.isNull(proxyModel)) {
                   proxyModel = value = this.getValueInRange((this.minvalue || 0));
                   this.resetValidations();
               }
@@ -1624,7 +1666,7 @@
           if ((key === 'UP' && proxyModel <= value) || (key === 'DOWN' && proxyModel >= value)) {
               const decimalRoundValue = Math.max(this.countDecimals(proxyModel), this.countDecimals(this.step));
               // update the modelProxy.
-              this.proxyModel = _.round(value, decimalRoundValue);
+              this.proxyModel = lodashEs.round(value, decimalRoundValue);
               this.updateDisplayText();
               this.handleChange(this.proxyModel);
           }
@@ -1659,7 +1701,7 @@
       validateInputEntry($event) {
           this.isDefaultQuery = false;
           // allow actions if control key is pressed or if backspace is pressed. (for Mozilla).
-          if ($event.ctrlKey || _.includes(['Backspace', 'ArrowRight', 'ArrowLeft', 'Tab', 'Enter', 'Delete'], $event.key)) {
+          if ($event.ctrlKey || lodashEs.includes(['Backspace', 'ArrowRight', 'ArrowLeft', 'Tab', 'Enter', 'Delete'], $event.key)) {
               return;
           }
           const validity = new RegExp(`^[\\d\\s-,.e+${this.GROUP}${this.DECIMAL}]$`, 'i');
@@ -1690,18 +1732,18 @@
               return false;
           }
           // comma cannot be entered consecutively
-          if (_.includes(inputValue, ',') && inputValue[inputValue.length - 1] === ',' && $event.key === ',') {
+          if (lodashEs.includes(inputValue, ',') && inputValue[inputValue.length - 1] === ',' && $event.key === ',') {
               return false;
           }
           // a decimal value can be entered only once in the input.
-          if (_.includes(inputValue, this.DECIMAL) && $event.key === this.DECIMAL) {
+          if (lodashEs.includes(inputValue, this.DECIMAL) && $event.key === this.DECIMAL) {
               return false;
           }
           // 'e' can be entered only once in the input.
-          if (_.intersection(_.toArray(inputValue), ['e', 'E']).length && _.includes('eE', $event.key)) {
+          if (lodashEs.intersection(lodashEs.toArray(inputValue), ['e', 'E']).length && lodashEs.includes('eE', $event.key)) {
               return false;
           }
-          if ((_.includes(inputValue, '+') || _.includes(inputValue, '-')) && ($event.key === '+' || $event.key === '-')) {
+          if ((lodashEs.includes(inputValue, '+') || lodashEs.includes(inputValue, '-')) && ($event.key === '+' || $event.key === '-')) {
               return false;
           }
           // Do not allow user to enter only space without any input value
@@ -1736,7 +1778,13 @@
               super.onPropertyChange(key, nv, ov);
           }
       }
-  }
+  };
+  exports.NumberLocale = tslib.__decorate([
+      tslib.__param(4, i0.Inject('EXPLICIT_CONTEXT')),
+      tslib.__param(4, i0.Optional()),
+      tslib.__metadata("design:paramtypes", [i0.Injector, Object, i1$1.AbstractI18nService,
+          i2.TrailingZeroDecimalPipe, Object])
+  ], exports.NumberLocale);
 
   const _c0$9 = ["input"];
   const _c1$8 = ["wmNumber", ""];
@@ -1744,12 +1792,12 @@
       widgetType: 'wm-number',
       hostClass: 'app-input-wrapper'
   };
-  class NumberComponent extends NumberLocale {
+  class NumberComponent extends exports.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__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.AbstractI18nService), i0__namespace.ɵɵdirectiveInject(i2__namespace.TrailingZeroDecimalPipe)); }; }
+      static { this.ɵfac = function NumberComponent_Factory(t) { return new (t || NumberComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.AbstractI18nService), i0__namespace.ɵɵdirectiveInject(i2__namespace.TrailingZeroDecimalPipe), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: NumberComponent, selectors: [["", "wmNumber", ""]], viewQuery: function NumberComponent_Query(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵviewQuery(_c0$9, 7);
               i0__namespace.ɵɵviewQuery(i2$1.NgModel, 7);
@@ -1761,29 +1809,36 @@
                   i2.provideAs(NumberComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(NumberComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(NumberComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$8, decls: 2, vars: 14, consts: [["inputmode", "decimal", "focus-target", "", "role", "textbox", "type", "text", 1, "form-control", "app-textbox", "app-number-input", 3, "ngModel", "readonly", "disabled", "pattern", "autofocus", "ngClass", "ngStyle", "ngModelOptions", "required", "ngModelChange", "blur", "focus", "input", "keypress", "keydown.backspace", "keydown.enter", "keydown.ArrowUp", "keydown.ArrowDown"], ["input", ""]], template: function NumberComponent_Template(rf, ctx) { if (rf & 1) {
-              i0__namespace.ɵɵelementStart(0, "input", 0, 1);
-              i0__namespace.ɵɵlistener("ngModelChange", function NumberComponent_Template_input_ngModelChange_0_listener($event) { return ctx.onModelChange($event); })("blur", function NumberComponent_Template_input_blur_0_listener($event) { ctx.handleBlur($event); return ctx.checkForTrailingZeros($event); })("focus", function NumberComponent_Template_input_focus_0_listener($event) { return ctx.checkForTrailingZeros($event); })("input", function NumberComponent_Template_input_input_0_listener($event) { return ctx.onInputChange($event.target.value); })("keypress", function NumberComponent_Template_input_keypress_0_listener($event) { return ctx.validateInputEntry($event); })("keydown.backspace", function NumberComponent_Template_input_keydown_backspace_0_listener($event) { return ctx.onBackspace($event); })("keydown.enter", function NumberComponent_Template_input_keydown_enter_0_listener($event) { return ctx.onEnter($event); })("keydown.ArrowUp", function NumberComponent_Template_input_keydown_ArrowUp_0_listener($event) { return ctx.onArrowPress($event, "UP"); })("keydown.ArrowDown", function NumberComponent_Template_input_keydown_ArrowDown_0_listener($event) { return ctx.onArrowPress($event, "DOWN"); });
+              ]), i0__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
+              i0__namespace.ɵɵelementStart(0, "input", 1, 0);
+              i0__namespace.ɵɵlistener("ngModelChange", function NumberComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onModelChange($event)); })("blur", function NumberComponent_Template_input_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); ctx.handleBlur($event); return i0__namespace.ɵɵresetView(ctx.checkForTrailingZeros($event)); })("focus", function NumberComponent_Template_input_focus_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.checkForTrailingZeros($event)); })("input", function NumberComponent_Template_input_input_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onInputChange($event.target.value)); })("keypress", function NumberComponent_Template_input_keypress_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.validateInputEntry($event)); })("keydown.backspace", function NumberComponent_Template_input_keydown_backspace_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onBackspace($event)); })("keydown.enter", function NumberComponent_Template_input_keydown_enter_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onEnter($event)); })("keydown.ArrowUp", function NumberComponent_Template_input_keydown_ArrowUp_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onArrowPress($event, "UP")); })("keydown.ArrowDown", function NumberComponent_Template_input_keydown_ArrowDown_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onArrowPress($event, "DOWN")); });
               i0__namespace.ɵɵelementEnd();
           } if (rf & 2) {
               i0__namespace.ɵɵproperty("ngModel", ctx.displayValue)("readonly", ctx.readonly)("disabled", ctx.disabled)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("ngModelOptions", ctx.ngModelOptions)("required", ctx.required);
               i0__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.PatternValidator, i2$1__namespace.NgModel], encapsulation: 2 }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(NumberComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(NumberComponent, [{
           type: i0.Component,
           args: [{ selector: '[wmNumber]', providers: [
                       i2.provideAs(NumberComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(NumberComponent, i2$1.NG_VALIDATORS, true),
                       i2.provideAsWidgetRef(NumberComponent)
                   ], template: "<input class=\"form-control app-textbox app-number-input\"\n       inputmode=\"decimal\"\n       focus-target\n       [attr.name]=\"name\"\n       role=\"textbox\"\n       type=\"text\"\n       [ngModel]=\"displayValue\"\n       [readonly]=\"readonly\"\n       [disabled]=\"disabled\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (ngModelChange)=\"onModelChange($event)\"\n       (blur)=\"handleBlur($event); checkForTrailingZeros($event);\"\n       (focus)=\"checkForTrailingZeros($event)\"\n       (input)=\"onInputChange($event.target.value)\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [required]=\"required\"\n       (keypress)=\"validateInputEntry($event)\"\n       (keydown.backspace)=\"onBackspace($event)\"\n       (keydown.enter)=\"onEnter($event)\"\n       (keydown.ArrowUp)=\"onArrowPress($event, 'UP')\"\n       (keydown.ArrowDown)=\"onArrowPress($event, 'DOWN')\"\n       #input>\n" }]
-      }], function () { return [{ type: i0__namespace.Injector }, { type: i1$1__namespace.AbstractI18nService }, { type: i2__namespace.TrailingZeroDecimalPipe }]; }, { inputEl: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: i1$1__namespace.AbstractI18nService }, { type: i2__namespace.TrailingZeroDecimalPipe }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { inputEl: [{
               type: i0.ViewChild,
               args: ['input', { static: true }]
           }], ngModel: [{
               type: i0.ViewChild,
               args: [i2$1.NgModel, { static: true }]
           }] }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(NumberComponent, { className: "NumberComponent", filePath: "number/number.component.ts", lineNumber: 24 }); })();
 
   const radiosetProps = new Map([
       ['class', i2.PROP_STRING],
@@ -1819,60 +1874,61 @@
   };
 
   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__namespace.ɵɵelementStart(0, "label", 7);
       i0__namespace.ɵɵelement(1, "input", 8)(2, "span", 9);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const ctx_r9 = i0__namespace.ɵɵnextContext();
-      const item_r5 = ctx_r9.$implicit;
-      const i_r6 = ctx_r9.index;
-      const ctx_r7 = i0__namespace.ɵɵnextContext(2);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(10, _c1$7, ctx_r7.disabled || ctx_r7.readonly));
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵ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__namespace.ɵɵattribute("aria-checked", item_r5.selected)("data-attr-index", i_r6)("aria-label", item_r5.key);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("textContent", item_r5.label);
+      const ctx_r3 = i0__namespace.ɵɵnextContext();
+      const item_r2 = ctx_r3.$implicit;
+      const i_r5 = ctx_r3.index;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(2);
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(10, _c2$2, ctx_r2.disabled || ctx_r2.readonly));
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵ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__namespace.ɵɵattribute("aria-checked", item_r2.selected)("data-attr-index", i_r5)("aria-label", item_r2.key);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("textContent", item_r2.label);
   } }
   function RadiosetComponent_ng_template_0_li_0_label_2_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelementStart(0, "label", 7);
       i0__namespace.ɵɵelement(1, "input", 8)(2, "span", 10);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const ctx_r10 = i0__namespace.ɵɵnextContext();
-      const item_r5 = ctx_r10.$implicit;
-      const i_r6 = ctx_r10.index;
-      const ctx_r8 = i0__namespace.ɵɵnextContext(2);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(9, _c1$7, ctx_r8.disabled || ctx_r8.readonly));
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵ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__namespace.ɵɵattribute("aria-checked", item_r5.selected)("data-attr-index", i_r6)("aria-label", item_r5.key);
+      const ctx_r3 = i0__namespace.ɵɵnextContext();
+      const item_r2 = ctx_r3.$implicit;
+      const i_r5 = ctx_r3.index;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(2);
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(9, _c2$2, ctx_r2.disabled || ctx_r2.readonly));
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵ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__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
+      const _r1 = i0__namespace.ɵɵgetCurrentView();
       i0__namespace.ɵɵelementStart(0, "li", 5);
-      i0__namespace.ɵɵlistener("click", function RadiosetComponent_ng_template_0_li_0_Template_li_click_0_listener($event) { const restoredCtx = i0__namespace.ɵɵrestoreView(_r12); const item_r5 = restoredCtx.$implicit; const ctx_r11 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r11.onRadioLabelClick($event, item_r5.key)); });
-      i0__namespace.ɵɵtemplate(1, RadiosetComponent_ng_template_0_li_0_label_1_Template, 3, 12, "label", 6);
-      i0__namespace.ɵɵtemplate(2, RadiosetComponent_ng_template_0_li_0_label_2_Template, 3, 11, "label", 6);
+      i0__namespace.ɵɵlistener("click", function RadiosetComponent_ng_template_0_li_0_Template_li_click_0_listener($event) { const item_r2 = i0__namespace.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.onRadioLabelClick($event, item_r2.key)); });
+      i0__namespace.ɵɵ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__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const item_r5 = ctx.$implicit;
-      const ctx_r4 = i0__namespace.ɵɵnextContext(2);
-      i0__namespace.ɵɵclassProp("active", item_r5.selected);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(7, _c2$2, ctx_r4.itemclass, ctx_r4.itemsPerRowClass))("wmItemTemplate", ctx_r4.content)("userComponentParams", item_r5);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngIf", !ctx_r4.content);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngIf", ctx_r4.content);
+      const item_r2 = ctx.$implicit;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(2);
+      i0__namespace.ɵɵclassProp("active", item_r2.selected);
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(7, _c1$7, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r2);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngIf", !ctx_r2.content);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngIf", ctx_r2.content);
   } }
   function RadiosetComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵtemplate(0, RadiosetComponent_ng_template_0_li_0_Template, 3, 10, "li", 4);
   } if (rf & 2) {
-      const ctx_r0 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵproperty("ngForOf", ctx_r0.datasetItems);
+      const ctx_r2 = i0__namespace.ɵɵnextContext();
+      i0__namespace.ɵɵproperty("ngForOf", ctx_r2.datasetItems);
   } }
   function RadiosetComponent_div_2_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelement(0, "div", 11);
@@ -1880,102 +1936,98 @@
   function RadiosetComponent_ng_template_3_li_0_i_6_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelement(0, "i", 21);
   } if (rf & 2) {
-      const ctx_r15 = i0__namespace.ɵɵnextContext(3);
-      i0__namespace.ɵɵpropertyInterpolate2("title", "", ctx_r15.appLocale.LABEL_COLLAPSE, "/", ctx_r15.appLocale.LABEL_EXPAND, "");
+      const ctx_r2 = i0__namespace.ɵɵnextContext(3);
+      i0__namespace.ɵɵ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__namespace.ɵɵelement(0, "span", 22);
   } if (rf & 2) {
-      const groupObj_r14 = i0__namespace.ɵɵnextContext().$implicit;
-      i0__namespace.ɵɵproperty("textContent", groupObj_r14.data.length);
+      const groupObj_r7 = i0__namespace.ɵɵnextContext().$implicit;
+      i0__namespace.ɵɵproperty("textContent", groupObj_r7.data.length);
   } }
   function RadiosetComponent_ng_template_3_li_0_li_8_label_1_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelementStart(0, "label", 7);
       i0__namespace.ɵɵelement(1, "input", 8)(2, "span", 9);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const ctx_r23 = i0__namespace.ɵɵnextContext();
-      const item_r19 = ctx_r23.$implicit;
-      const i_r20 = ctx_r23.index;
-      const ctx_r21 = i0__namespace.ɵɵnextContext(3);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(9, _c1$7, ctx_r21.disabled || ctx_r21.readonly));
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵ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__namespace.ɵɵattribute("aria-checked", item_r19.selected)("data-attr-index", i_r20);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("textContent", item_r19.label);
+      const ctx_r9 = i0__namespace.ɵɵnextContext();
+      const item_r9 = ctx_r9.$implicit;
+      const i_r11 = ctx_r9.index;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(3);
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(9, _c2$2, ctx_r2.disabled || ctx_r2.readonly));
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵ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__namespace.ɵɵattribute("aria-checked", item_r9.selected)("data-attr-index", i_r11);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("textContent", item_r9.label);
   } }
   function RadiosetComponent_ng_template_3_li_0_li_8_label_2_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelementStart(0, "label", 7);
       i0__namespace.ɵɵelement(1, "input", 8)(2, "span", 10);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const ctx_r24 = i0__namespace.ɵɵnextContext();
-      const item_r19 = ctx_r24.$implicit;
-      const i_r20 = ctx_r24.index;
-      const ctx_r22 = i0__namespace.ɵɵnextContext(3);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(8, _c1$7, ctx_r22.disabled || ctx_r22.readonly));
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵ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__namespace.ɵɵattribute("aria-checked", item_r19.selected)("data-attr-index", i_r20);
+      const ctx_r9 = i0__namespace.ɵɵnextContext();
+      const item_r9 = ctx_r9.$implicit;
+      const i_r11 = ctx_r9.index;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(3);
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(8, _c2$2, ctx_r2.disabled || ctx_r2.readonly));
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵ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__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
+      const _r8 = i0__namespace.ɵɵgetCurrentView();
       i0__namespace.ɵɵelementStart(0, "li", 23);
-      i0__namespace.ɵɵlistener("click", function RadiosetComponent_ng_template_3_li_0_li_8_Template_li_click_0_listener($event) { const restoredCtx = i0__namespace.ɵɵrestoreView(_r26); const item_r19 = restoredCtx.$implicit; const ctx_r25 = i0__namespace.ɵɵnextContext(3); return i0__namespace.ɵɵresetView(ctx_r25.onRadioLabelClick($event, item_r19)); });
-      i0__namespace.ɵɵtemplate(1, RadiosetComponent_ng_template_3_li_0_li_8_label_1_Template, 3, 11, "label", 6);
-      i0__namespace.ɵɵtemplate(2, RadiosetComponent_ng_template_3_li_0_li_8_label_2_Template, 3, 10, "label", 6);
+      i0__namespace.ɵɵlistener("click", function RadiosetComponent_ng_template_3_li_0_li_8_Template_li_click_0_listener($event) { const item_r9 = i0__namespace.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0__namespace.ɵɵnextContext(3); return i0__namespace.ɵɵresetView(ctx_r2.onRadioLabelClick($event, item_r9)); });
+      i0__namespace.ɵɵ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__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const item_r19 = ctx.$implicit;
-      const ctx_r17 = i0__namespace.ɵɵnextContext(3);
-      i0__namespace.ɵɵclassProp("active", item_r19.selected);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(7, _c3, ctx_r17.itemclass, ctx_r17.itemsPerRowClass))("wmItemTemplate", ctx_r17.content)("userComponentParams", item_r19);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngIf", !ctx_r17.content);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngIf", ctx_r17.content);
+      const item_r9 = ctx.$implicit;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(3);
+      i0__namespace.ɵɵclassProp("active", item_r9.selected);
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(7, _c4, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r9);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngIf", !ctx_r2.content);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
+      const _r6 = i0__namespace.ɵɵgetCurrentView();
       i0__namespace.ɵɵelementStart(0, "li", 13)(1, "ul", 14)(2, "li", 15);
-      i0__namespace.ɵɵlistener("click", function RadiosetComponent_ng_template_3_li_0_Template_li_click_2_listener($event) { i0__namespace.ɵɵrestoreView(_r28); const ctx_r27 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r27.handleHeaderClick($event)); });
+      i0__namespace.ɵɵlistener("click", function RadiosetComponent_ng_template_3_li_0_Template_li_click_2_listener($event) { i0__namespace.ɵɵrestoreView(_r6); const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.handleHeaderClick($event)); });
       i0__namespace.ɵɵelementStart(3, "h4", 16);
       i0__namespace.ɵɵtext(4);
       i0__namespace.ɵɵelementStart(5, "div", 17);
-      i0__namespace.ɵɵtemplate(6, RadiosetComponent_ng_template_3_li_0_i_6_Template, 1, 2, "i", 18);
-      i0__namespace.ɵɵtemplate(7, RadiosetComponent_ng_template_3_li_0_span_7_Template, 1, 1, "span", 19);
+      i0__namespace.ɵɵ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__namespace.ɵɵelementEnd()()();
       i0__namespace.ɵɵtemplate(8, RadiosetComponent_ng_template_3_li_0_li_8_Template, 3, 10, "li", 20);
       i0__namespace.ɵɵelementEnd()();
   } if (rf & 2) {
-      const groupObj_r14 = ctx.$implicit;
-      const ctx_r13 = i0__namespace.ɵɵnextContext(2);
+      const groupObj_r7 = ctx.$implicit;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(2);
       i0__namespace.ɵɵadvance(2);
-      i0__namespace.ɵɵproperty("title", groupObj_r14.key)("ngClass", i0__namespace.ɵɵpureFunction1(6, _c4, ctx_r13.collapsible));
+      i0__namespace.ɵɵproperty("title", groupObj_r7.key)("ngClass", i0__namespace.ɵɵpureFunction1(6, _c3, ctx_r2.collapsible));
       i0__namespace.ɵɵadvance(2);
-      i0__namespace.ɵɵtextInterpolate1("", groupObj_r14.key, " ");
+      i0__namespace.ɵɵtextInterpolate1("", groupObj_r7.key, " ");
       i0__namespace.ɵɵadvance(2);
-      i0__namespace.ɵɵproperty("ngIf", ctx_r13.collapsible);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngIf", ctx_r13.showcount);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngForOf", groupObj_r14.data);
+      i0__namespace.ɵɵproperty("ngIf", ctx_r2.collapsible);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngIf", ctx_r2.showcount);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngForOf", groupObj_r7.data);
   } }
   function RadiosetComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵtemplate(0, RadiosetComponent_ng_template_3_li_0_Template, 9, 8, "li", 12);
   } if (rf & 2) {
-      const ctx_r3 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵproperty("ngForOf", ctx_r3.groupedData);
+      const ctx_r2 = i0__namespace.ɵɵnextContext();
+      i0__namespace.ɵɵ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 = '';
           i2.styler(this.nativeElement, this);
           this.multiple = false;
@@ -2003,7 +2055,7 @@
                   return callback();
               });
           }
-          else if (!_.includes(['change'], eventName)) {
+          else if (!lodashEs.includes(['change'], eventName)) {
               super.handleEvent(node, eventName, callback, locals);
           }
       }
@@ -2018,33 +2070,38 @@
               super.onPropertyChange(key, nv, ov);
           }
       }
-      static { this.ɵfac = function RadiosetComponent_Factory(t) { return new (t || RadiosetComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+      static { this.ɵfac = function RadiosetComponent_Factory(t) { return new (t || RadiosetComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: RadiosetComponent, selectors: [["", "wmRadioset", ""]], exportAs: ["wmRadioset"], features: [i0__namespace.ɵɵProvidersFeature([
                   i2.provideAs(RadiosetComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(RadiosetComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(RadiosetComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$8, decls: 5, vars: 4, consts: [[3, "ngIf", "ngIfElse"], ["hidden", "", 1, "model-holder", 3, "disabled"], ["aria-readonly", "true", "class", "readonly-wrapper", 4, "ngIf"], ["groupedListTemplate", ""], ["partialContainer", "", "role", "presentation", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], ["partialContainer", "", "role", "presentation", 3, "ngClass", "wmItemTemplate", "userComponentParams", "click"], ["class", "app-radioset-label", 3, "ngClass", 4, "ngIf"], [1, "app-radioset-label", 3, "ngClass"], ["type", "radio", 3, "name", "value", "disabled", "tabindex", "checked"], [1, "caption", 3, "textContent"], ["partial-container-target", "", 1, "caption", "customTemplate"], ["aria-readonly", "true", 1, "readonly-wrapper"], ["class", "app-list-item-group", 4, "ngFor", "ngForOf"], [1, "app-list-item-group"], [1, "item-group"], [1, "list-group-header", 3, "title", "ngClass", "click"], [1, "group-title"], [1, "header-action"], ["class", "app-icon wi action wi-chevron-up", 3, "title", 4, "ngIf"], ["class", "label label-default", 3, "textContent", 4, "ngIf"], ["partialContainer", "", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], [1, "app-icon", "wi", "action", "wi-chevron-up", 3, "title"], [1, "label", "label-default", 3, "textContent"], ["partialContainer", "", 3, "ngClass", "wmItemTemplate", "userComponentParams", "click"]], template: function RadiosetComponent_Template(rf, ctx) { if (rf & 1) {
-              i0__namespace.ɵɵtemplate(0, RadiosetComponent_ng_template_0_Template, 1, 1, "ng-template", 0);
-              i0__namespace.ɵɵelement(1, "input", 1);
-              i0__namespace.ɵɵtemplate(2, RadiosetComponent_div_2_Template, 1, 0, "div", 2);
-              i0__namespace.ɵɵtemplate(3, RadiosetComponent_ng_template_3_Template, 1, 1, "ng-template", null, 3, i0__namespace.ɵɵtemplateRefExtractor);
+              ]), i0__namespace.ɵɵ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__namespace.ɵɵtemplate(0, RadiosetComponent_ng_template_0_Template, 1, 1, "ng-template", 1);
+              i0__namespace.ɵɵelement(1, "input", 2);
+              i0__namespace.ɵɵtemplate(2, RadiosetComponent_div_2_Template, 1, 0, "div", 3)(3, RadiosetComponent_ng_template_3_Template, 1, 1, "ng-template", null, 0, i0__namespace.ɵɵtemplateRefExtractor);
           } if (rf & 2) {
-              const _r2 = i0__namespace.ɵɵreference(4);
-              i0__namespace.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", _r2);
-              i0__namespace.ɵɵadvance(1);
+              const groupedListTemplate_r12 = i0__namespace.ɵɵreference(4);
+              i0__namespace.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", groupedListTemplate_r12);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("disabled", ctx.disabled || ctx.readonly);
-              i0__namespace.ɵɵadvance(1);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("ngIf", ctx.readonly || ctx.disabled);
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgForOf, i1__namespace.NgIf, i2__namespace.ItemTemplateDirective, i2__namespace.PartialParamHandlerDirective, i2__namespace.PartialContainerDirective, i2__namespace.TextContentDirective], encapsulation: 2 }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(RadiosetComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(RadiosetComponent, [{
           type: i0.Component,
           args: [{ selector: '[wmRadioset]', exportAs: 'wmRadioset', providers: [
                       i2.provideAs(RadiosetComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(RadiosetComponent, i2$1.NG_VALIDATORS, true),
                       i2.provideAsWidgetRef(RadiosetComponent)
                   ], template: "<ng-template [ngIf]=\"!groupby\" [ngIfElse]=\"groupedListTemplate\">\n    <li [ngClass]=\"['radio', 'app-radio', itemclass, itemsPerRowClass]\"\n        [class.active]=\"item.selected\"\n        *ngFor=\"let item of datasetItems;let i = index\"\n        [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n        (click)=\"onRadioLabelClick($event, item.key)\" role=\"presentation\">\n        <!-- Default item template -->\n        <label *ngIf=\"!content\" class=\"app-radioset-label\"\n               [ngClass]=\"{'disabled':disabled || readonly}\">\n            <input [name]=\"'radioset_' + widgetId\" type=\"radio\" [attr.aria-checked]=\"item.selected\" [attr.data-attr-index]=\"i\"\n                   [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"\n                   [attr.aria-label]=\"item.key\"/>\n            <span class=\"caption\" [textContent]=\"item.label\"></span>\n        </label>\n        <!-- Custom partial template -->\n        <label *ngIf=\"content\" class=\"app-radioset-label\"\n               [ngClass]=\"{'disabled':disabled || readonly}\">\n            <input [name]=\"'radioset_' + widgetId\" type=\"radio\" [attr.aria-checked]=\"item.selected\" [attr.data-attr-index]=\"i\"\n                   [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"\n                   [attr.aria-label]=\"item.key\"/>\n            <span class=\"caption customTemplate\" partial-container-target></span>\n        </label>\n    </li>\n</ng-template>\n\n<input [disabled]=\"disabled || readonly\" hidden class=\"model-holder\">\n<div *ngIf=\"readonly || disabled\" aria-readonly=\"true\" class=\"readonly-wrapper\"></div>\n\n<!-- This template will be displayed when groupby is specified. -->\n<ng-template #groupedListTemplate>\n    <li *ngFor=\"let groupObj of groupedData\" class=\"app-list-item-group\">\n        <ul class=\"item-group\">\n            <li class=\"list-group-header\" (click)=\"handleHeaderClick($event)\" [title]=\"groupObj.key\" [ngClass]=\"{'collapsible-content': collapsible}\">\n                <h4 class=\"group-title\">{{groupObj.key}}\n                    <div class=\"header-action\">\n                        <i class=\"app-icon wi action wi-chevron-up\" *ngIf=\"collapsible\" title=\"{{appLocale.LABEL_COLLAPSE}}/{{appLocale.LABEL_EXPAND}}\"></i>\n                        <span *ngIf=\"showcount\" class=\"label label-default\" [textContent]=\"groupObj.data.length\"></span>\n                    </div>\n                </h4>\n            </li>\n            <li *ngFor=\"let item of groupObj.data; let i = index;\"\n                [ngClass]=\"['radio', 'app-radio', 'group-list-item', itemclass, itemsPerRowClass]\"\n                [class.active]=\"item.selected\"\n                [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n                (click)=\"onRadioLabelClick($event, item)\">\n                <!-- Default item template -->\n                <label *ngIf=\"!content\" class=\"app-radioset-label\"\n                       [ngClass]=\"{'disabled':disabled || readonly}\">\n                    <input [name]=\"'radioset_' + widgetId\" type=\"radio\" [attr.aria-checked]=\"item.selected\" [attr.data-attr-index]=\"i\"\n                           [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption\" [textContent]=\"item.label\"></span>\n                </label>\n                <!-- Custom partial template -->\n                <label *ngIf=\"content\" class=\"app-radioset-label\"\n                       [ngClass]=\"{'disabled':disabled || readonly}\">\n                    <input [name]=\"'radioset_' + widgetId\" type=\"radio\" [attr.aria-checked]=\"item.selected\" [attr.data-attr-index]=\"i\"\n                           [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption customTemplate\" partial-container-target></span>\n                </label>\n            </li>\n        </ul>\n    </li>\n</ng-template>\n" }]
-      }], function () { return [{ type: i0__namespace.Injector }]; }, null); })();
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], null); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(RadiosetComponent, { className: "RadiosetComponent", filePath: "radioset/radioset.component.ts", lineNumber: 26 }); })();
 
   const selectProps = new Map([
       ['autofocus', i2.PROP_BOOLEAN],
@@ -2080,53 +2137,47 @@
   };
 
   const _c0$7 = ["select"];
-  function SelectComponent_option_2_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelement(0, "option", 4);
-  } if (rf & 2) {
-      const ctx_r1 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵproperty("textContent", ctx_r1.placeholder)("hidden", !ctx_r1.placeholder);
-  } }
+  const _c1$6 = a0 => ["app-select form-control", a0];
   function SelectComponent_ng_container_3_optgroup_1_option_1_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelement(0, "option", 8);
+      i0__namespace.ɵɵelement(0, "option", 7);
   } if (rf & 2) {
-      const item_r7 = ctx.$implicit;
-      i0__namespace.ɵɵproperty("value", item_r7.key)("selected", item_r7.selected)("textContent", item_r7.label);
+      const item_r2 = ctx.$implicit;
+      i0__namespace.ɵɵproperty("value", item_r2.key)("selected", item_r2.selected)("textContent", item_r2.label);
   } }
   function SelectComponent_ng_container_3_optgroup_1_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelementStart(0, "optgroup", 6);
-      i0__namespace.ɵɵtemplate(1, SelectComponent_ng_container_3_optgroup_1_option_1_Template, 1, 3, "option", 7);
+      i0__namespace.ɵɵelementStart(0, "optgroup", 5);
+      i0__namespace.ɵɵtemplate(1, SelectComponent_ng_container_3_optgroup_1_option_1_Template, 1, 3, "option", 6);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const groupObj_r5 = ctx.$implicit;
-      i0__namespace.ɵɵproperty("label", groupObj_r5.key);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngForOf", groupObj_r5.data);
+      const groupObj_r3 = ctx.$implicit;
+      i0__namespace.ɵɵproperty("label", groupObj_r3.key);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngForOf", groupObj_r3.data);
   } }
   function SelectComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelementContainerStart(0);
-      i0__namespace.ɵɵtemplate(1, SelectComponent_ng_container_3_optgroup_1_Template, 2, 2, "optgroup", 5);
+      i0__namespace.ɵɵtemplate(1, SelectComponent_ng_container_3_optgroup_1_Template, 2, 2, "optgroup", 4);
       i0__namespace.ɵɵelementContainerEnd();
   } if (rf & 2) {
-      const ctx_r2 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngForOf", ctx_r2.groupedData);
+      const ctx_r3 = i0__namespace.ɵɵnextContext();
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngForOf", ctx_r3.groupedData);
   } }
   function SelectComponent_ng_container_4_option_1_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelement(0, "option", 8);
+      i0__namespace.ɵɵelement(0, "option", 7);
   } if (rf & 2) {
-      const item_r9 = ctx.$implicit;
-      i0__namespace.ɵɵproperty("value", item_r9.key)("selected", item_r9.selected)("textContent", item_r9.label);
+      const item_r5 = ctx.$implicit;
+      i0__namespace.ɵɵ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__namespace.ɵɵelementContainerStart(0);
-      i0__namespace.ɵɵtemplate(1, SelectComponent_ng_container_4_option_1_Template, 1, 3, "option", 7);
+      i0__namespace.ɵɵtemplate(1, SelectComponent_ng_container_4_option_1_Template, 1, 3, "option", 6);
       i0__namespace.ɵɵelementContainerEnd();
   } if (rf & 2) {
       const ctx_r3 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵadvance(1);
+      i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵproperty("ngForOf", ctx_r3.datasetItems);
   } }
-  const _c1$6 = function (a1) { return ["app-select form-control", a1]; };
   const WIDGET_CONFIG$7 = { widgetType: 'wm-select', hostClass: 'app-select-wrapper' };
   class SelectComponent extends DatasetAwareFormComponent {
       static { this.initializeProps = registerProps$7(); }
@@ -2135,21 +2186,18 @@
               this.datavalue = ds.execute(i1$1.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();
           i2.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) {
-          if (!_.includes(['blur', 'change'], eventName)) {
+          if (!lodashEs.includes(['blur', 'change'], eventName)) {
               super.handleEvent(this.selectEl.nativeElement, eventName, eventCallback, locals);
           }
       }
@@ -2192,16 +2240,6 @@
           }
           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 i1$1.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
@@ -2211,25 +2249,35 @@
       checkForFloatingLabel($event) {
           const captionEl = $(this.selectEl.nativeElement).closest('.app-composite-widget.caption-floating');
           if (captionEl.length > 0) {
-              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 });
+              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 (this.placeholder) {
+                  else {
                       $(this.selectEl.nativeElement).find('option:first').text(this.placeholder);
                   }
               }
               else if (!this.datavalue) {
-                  if (!this.placeholder) {
-                      //  $(this.selectEl.nativeElement).find('option:first').text('');
-                      if (!this.isIosPlatform()) {
-                          captionEl.removeClass('float-active');
-                      }
-                  }
+                  $(this.selectEl.nativeElement).find('option:selected').text('');
+                  captionEl.removeClass('float-active');
               }
           }
+          else if (!(this.datavalue || this.placeholder)) {
+              this.removePlaceholderOption();
+          }
       }
-      static { this.ɵfac = function SelectComponent_Factory(t) { return new (t || SelectComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.App)); }; }
+      /*
+      * 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__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.App), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: SelectComponent, selectors: [["wm-select"]], viewQuery: function SelectComponent_Query(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵviewQuery(_c0$7, 7, i0.ElementRef);
           } if (rf & 2) {
@@ -2239,35 +2287,44 @@
                   i2.provideAs(SelectComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(SelectComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(SelectComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], decls: 5, vars: 15, consts: [["role", "listbox", "aria-haspopup", "true", "aria-expanded", "false", "focus-target", "", 3, "ngClass", "disabled", "required", "tabindex", "ngModel", "multiple", "autofocus", "ngModelChange", "change", "focus", "blur"], ["select", ""], ["value", "undefined", 3, "textContent", "hidden", 4, "ngIf"], [4, "ngIf"], ["value", "undefined", 3, "textContent", "hidden"], [3, "label", 4, "ngFor", "ngForOf"], [3, "label"], ["role", "option", 3, "value", "selected", "textContent", 4, "ngFor", "ngForOf"], ["role", "option", 3, "value", "selected", "textContent"]], template: function SelectComponent_Template(rf, ctx) { if (rf & 1) {
-              i0__namespace.ɵɵelementStart(0, "select", 0, 1);
-              i0__namespace.ɵɵ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__namespace.ɵɵtemplate(2, SelectComponent_option_2_Template, 1, 2, "option", 2);
-              i0__namespace.ɵɵtemplate(3, SelectComponent_ng_container_3_Template, 2, 1, "ng-container", 3);
-              i0__namespace.ɵɵtemplate(4, SelectComponent_ng_container_4_Template, 2, 1, "ng-container", 3);
+              ]), i0__namespace.ɵɵInheritDefinitionFeature], decls: 5, vars: 16, consts: [["select", ""], ["role", "listbox", "aria-haspopup", "true", "aria-expanded", "false", "focus-target", "", 3, "ngModelChange", "change", "focus", "blur", "ngClass", "disabled", "required", "tabindex", "ngModel", "multiple", "autofocus"], ["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) {
+              const _r1 = i0__namespace.ɵɵgetCurrentView();
+              i0__namespace.ɵɵelementStart(0, "select", 1, 0);
+              i0__namespace.ɵɵtwoWayListener("ngModelChange", function SelectComponent_Template_select_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.modelByKey, $event) || (ctx.modelByKey = $event); return i0__namespace.ɵɵresetView($event); });
+              i0__namespace.ɵɵlistener("change", function SelectComponent_Template_select_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onSelectValueChange($event)); })("focus", function SelectComponent_Template_select_focus_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.checkForFloatingLabel($event)); })("blur", function SelectComponent_Template_select_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); ctx.invokeOnTouched($event); return i0__namespace.ɵɵresetView(ctx.checkForFloatingLabel($event)); });
+              i0__namespace.ɵɵelement(2, "option", 2);
+              i0__namespace.ɵɵtemplate(3, SelectComponent_ng_container_3_Template, 2, 1, "ng-container", 3)(4, SelectComponent_ng_container_4_Template, 2, 1, "ng-container", 3);
               i0__namespace.ɵɵelementEnd();
           } if (rf & 2) {
-              i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(13, _c1$6, ctx.class))("disabled", ctx.disabled)("required", ctx.required)("tabindex", ctx.tabindex)("ngModel", ctx.modelByKey)("multiple", ctx.multiple)("autofocus", ctx.autofocus);
+              i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(14, _c1$6, ctx.class))("disabled", ctx.disabled)("required", ctx.required)("tabindex", ctx.tabindex);
+              i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.modelByKey);
+              i0__namespace.ɵɵproperty("multiple", ctx.multiple)("autofocus", ctx.autofocus);
               i0__namespace.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("aria-multiselectable", ctx.multiple);
               i0__namespace.ɵɵadvance(2);
-              i0__namespace.ɵɵproperty("ngIf", !ctx.isIosPlatform() || !!ctx.placeholder);
-              i0__namespace.ɵɵadvance(1);
+              i0__namespace.ɵɵproperty("textContent", ctx.placeholder)("hidden", !ctx.placeholder);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("ngIf", ctx.groupby);
-              i0__namespace.ɵɵadvance(1);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("ngIf", !ctx.groupby);
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgForOf, i1__namespace.NgIf, i2$1__namespace.NgSelectOption, i2$1__namespace.ɵNgSelectMultipleOption, i2$1__namespace.SelectMultipleControlValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.NgModel, i2__namespace.TextContentDirective], encapsulation: 2 }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SelectComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SelectComponent, [{
           type: i0.Component,
           args: [{ selector: 'wm-select', providers: [
                       i2.provideAs(SelectComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(SelectComponent, i2$1.NG_VALIDATORS, true),
                       i2.provideAsWidgetRef(SelectComponent)
-                  ], template: "<select role=\"listbox\" aria-haspopup=\"true\" aria-expanded=\"false\" #select\n        focus-target\n        [ngClass]=\"['app-select form-control', class]\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        [(ngModel)]=\"modelByKey\"\n        [multiple]=\"multiple\"\n        (change)=\"onSelectValueChange($event)\"\n        (focus)=\"checkForFloatingLabel($event)\"\n        (blur)=\"invokeOnTouched($event); checkForFloatingLabel($event)\"\n        [attr.name]=\"name\"\n        [attr.aria-label]=\"hint\"\n        [attr.aria-multiselectable]=\"multiple\"\n        [autofocus]=\"autofocus\"\n>\n    <option\n    value=\"undefined\"\n    [textContent]=\"placeholder\"\n    *ngIf=\"!isIosPlatform() || !!placeholder\"\n    [hidden]=\"!placeholder\"></option>\n\n    <ng-container *ngIf=\"groupby\">\n        <optgroup *ngFor=\"let groupObj of groupedData\"\n            [label]=\"groupObj.key\">\n            <option *ngFor=\"let item of groupObj.data;\"\n                [value]=\"item.key\"\n                [selected]=\"item.selected\"\n                [textContent]=\"item.label\"\n                role=\"option\"></option>\n        </optgroup>\n    </ng-container>\n\n    <ng-container *ngIf=\"!groupby\">\n        <option *ngFor=\"let item of datasetItems\"\n            [value]=\"item.key\"\n            [selected]=\"item.selected\"\n            [textContent]=\"item.label\"\n            role=\"option\"></option>\n    </ng-container>\n</select>\n" }]
-      }], function () { return [{ type: i0__namespace.Injector }, { type: i1$1__namespace.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 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" }]
+      }], () => [{ type: i0__namespace.Injector }, { type: i1$1__namespace.App }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { selectEl: [{
               type: i0.ViewChild,
               args: ['select', { static: true, read: i0.ElementRef }]
           }] }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(SelectComponent, { className: "SelectComponent", filePath: "select/select.component.ts", lineNumber: 22 }); })();
 
   const switchProps = new Map([
       ['class', i2.PROP_STRING],
@@ -2294,43 +2351,43 @@
   };
 
   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__namespace.ɵɵelement(0, "i", 8);
   } if (rf & 2) {
-      const opt_r2 = i0__namespace.ɵɵnextContext().$implicit;
+      const opt_r3 = i0__namespace.ɵɵnextContext().$implicit;
       const ctx_r4 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(1, _c1$5, opt_r2.dataObject[ctx_r4.iconclass] || opt_r2["icon"]));
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
+      const _r1 = i0__namespace.ɵɵgetCurrentView();
       i0__namespace.ɵɵelementStart(0, "a", 5);
-      i0__namespace.ɵɵlistener("click", function SwitchComponent_a_1_Template_a_click_0_listener($event) { const restoredCtx = i0__namespace.ɵɵrestoreView(_r7); const $index_r3 = restoredCtx.index; const opt_r2 = restoredCtx.$implicit; const ctx_r6 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r6.selectOpt($event, $index_r3, opt_r2)); });
+      i0__namespace.ɵɵlistener("click", function SwitchComponent_a_1_Template_a_click_0_listener($event) { const ctx_r1 = i0__namespace.ɵɵrestoreView(_r1); const opt_r3 = ctx_r1.$implicit; const $index_r4 = ctx_r1.index; const ctx_r4 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r4.selectOpt($event, $index_r4, opt_r3)); });
       i0__namespace.ɵɵtemplate(1, SwitchComponent_a_1_i_1_Template, 1, 3, "i", 6);
       i0__namespace.ɵɵelement(2, "span", 7);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const opt_r2 = ctx.$implicit;
-      const ctx_r0 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵproperty("name", "wm-switch-" + opt_r2.key)("ngClass", i0__namespace.ɵɵpureFunction2(4, _c2$1, opt_r2.selected, ctx_r0.disabled));
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngIf", opt_r2.dataObject && opt_r2.dataObject[ctx_r0.iconclass]);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("textContent", opt_r2[ctx_r0.displayfield] || opt_r2.label);
+      const opt_r3 = ctx.$implicit;
+      const ctx_r4 = i0__namespace.ɵɵnextContext();
+      i0__namespace.ɵɵproperty("name", "wm-switch-" + opt_r3.key)("ngClass", i0__namespace.ɵɵpureFunction2(4, _c1$5, opt_r3.selected, ctx_r4.disabled));
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngIf", opt_r3.dataObject && opt_r3.dataObject[ctx_r4.iconclass]);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("textContent", opt_r3[ctx_r4.displayfield] || opt_r3.label);
   } }
   function SwitchComponent_i_3_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelement(0, "i");
   } if (rf & 2) {
-      const ctx_r1 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵclassMapInterpolate1("app-icon ", ctx_r1.selectedItem && ctx_r1.selectedItem.dataObject && ctx_r1.selectedItem.dataObject[ctx_r1.iconclass], "");
+      const ctx_r4 = i0__namespace.ɵɵnextContext();
+      i0__namespace.ɵɵ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 = i1$1.debounce((val) => {
               this.setSelectedValue();
@@ -2362,7 +2419,7 @@
       // This function sets the selectedItem by either using compareby fields or selected flag on datasetItems.
       setSelectedValue() {
           if (i1$1.isDefined(this.datavalue) || i1$1.isDefined(this.toBeProcessedDatavalue)) {
-              this.selectedItem = _.find(this.datasetItems, { selected: true });
+              this.selectedItem = lodashEs.find(this.datasetItems, { selected: true });
               return;
           }
           // If no value is provided, set first value as default if options are available else set -1 ie no selection
@@ -2381,7 +2438,7 @@
       updateHighlighter(skipAnimation) {
           const handler = $(this.nativeElement).find('span.app-switch-overlay');
           this.setSelectedValue();
-          let left, index = this.selectedItem ? _.findIndex(this.datasetItems, { key: this.selectedItem.key }) : -1;
+          let left, index = this.selectedItem ? lodashEs.findIndex(this.datasetItems, { key: this.selectedItem.key }) : -1;
           if (index === undefined || index === null) {
               index = -1;
           }
@@ -2411,7 +2468,7 @@
           }
           this.modelByKey = option.key;
           this.invokeOnTouched();
-          if (this.selectedItem && $index === _.findIndex(this.datasetItems, { key: this.selectedItem.key })) {
+          if (this.selectedItem && $index === lodashEs.findIndex(this.datasetItems, { key: this.selectedItem.key })) {
               if (this.datasetItems.length === 2) {
                   $index = $index === 1 ? 0 : 1;
               }
@@ -2433,11 +2490,11 @@
               super.onPropertyChange(key, nv, ov);
           }
       }
-      static { this.ɵfac = function SwitchComponent_Factory(t) { return new (t || SwitchComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+      static { this.ɵfac = function SwitchComponent_Factory(t) { return new (t || SwitchComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: SwitchComponent, selectors: [["", "wmSwitch", ""]], exportAs: ["wmSwitch"], features: [i0__namespace.ɵɵProvidersFeature([
                   i2.provideAs(SwitchComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAsWidgetRef(SwitchComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$6, decls: 6, vars: 8, consts: [["role", "group", 1, "btn-group", "btn-group-justified"], ["focus-target", "", "href", "javascript:void(0);", "class", "btn btn-default", 3, "name", "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "btn", "btn-primary", "app-switch-overlay", "switch-handle", 3, "title"], [3, "class", 4, "ngIf"], ["aria-hidden", "true", 1, "model-holder", "ng-hide", 3, "name", "disabled", "value", "required"], ["focus-target", "", "href", "javascript:void(0);", 1, "btn", "btn-default", 3, "name", "ngClass", "click"], ["aria-hidden", "true", 3, "ngClass", 4, "ngIf"], [1, "caption", 3, "textContent"], ["aria-hidden", "true", 3, "ngClass"]], template: function SwitchComponent_Template(rf, ctx) { if (rf & 1) {
+              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$6, decls: 6, vars: 8, consts: [["role", "group", 1, "btn-group", "btn-group-justified"], ["focus-target", "", "href", "javascript:void(0);", "class", "btn btn-default", 3, "name", "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "btn", "btn-primary", "app-switch-overlay", "switch-handle", 3, "title"], [3, "class", 4, "ngIf"], ["aria-hidden", "true", 1, "model-holder", "ng-hide", 3, "name", "disabled", "value", "required"], ["focus-target", "", "href", "javascript:void(0);", 1, "btn", "btn-default", 3, "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__namespace.ɵɵelementStart(0, "div", 0);
               i0__namespace.ɵɵtemplate(1, SwitchComponent_a_1_Template, 3, 7, "a", 1);
               i0__namespace.ɵɵelementEnd();
@@ -2447,25 +2504,31 @@
               i0__namespace.ɵɵelementEnd();
               i0__namespace.ɵɵelement(5, "input", 4);
           } if (rf & 2) {
-              i0__namespace.ɵɵadvance(1);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("ngForOf", ctx.datasetItems);
-              i0__namespace.ɵɵadvance(1);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("title", ctx.selectedItem ? ctx.selectedItem.label : ctx.modelByKey);
-              i0__namespace.ɵɵadvance(1);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("ngIf", ctx.iconclass);
-              i0__namespace.ɵɵadvance(1);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵtextInterpolate1(" ", ctx.selectedItem ? ctx.selectedItem.label : ctx.modelByKey, "\n");
-              i0__namespace.ɵɵadvance(1);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("name", ctx.name)("disabled", ctx.disabled)("value", ctx.modelByKey)("required", ctx.required);
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgForOf, i1__namespace.NgIf, i2__namespace.TextContentDirective], encapsulation: 2 }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SwitchComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SwitchComponent, [{
           type: i0.Component,
           args: [{ selector: '[wmSwitch]', providers: [
                       i2.provideAs(SwitchComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAsWidgetRef(SwitchComponent)
                   ], exportAs: 'wmSwitch', template: "<div role=\"group\" class=\"btn-group btn-group-justified\">\n    <a *ngFor=\"let opt of datasetItems; let $index = index;\"\n       focus-target\n       href=\"javascript:void(0);\"\n       class=\"btn btn-default\"\n       [name]=\"'wm-switch-' + opt.key\"\n       [ngClass]=\"{'selected': opt.selected, 'disabled': disabled}\"\n       (click)=\"selectOpt($event, $index, opt)\"\n    >\n        <i *ngIf=\"opt.dataObject && opt.dataObject[iconclass]\" aria-hidden=\"true\" [ngClass]=\"['app-icon', opt.dataObject[iconclass] || opt['icon']]\"></i>\n        <span class=\"caption\" [textContent]=\"opt[displayfield] || opt.label\"></span>\n    </a>\n</div>\n<span [title]=\"selectedItem ? selectedItem.label : modelByKey\"\n      class=\"btn btn-primary app-switch-overlay switch-handle\">\n    <i *ngIf=\"iconclass\"\n       class=\"app-icon {{(selectedItem && selectedItem.dataObject) && selectedItem.dataObject[iconclass]}}\"></i>\n    {{selectedItem ? selectedItem.label : modelByKey}}\n</span>\n<input [name]=\"name\" class=\"model-holder ng-hide\" [disabled]=\"disabled\" [value]=\"modelByKey\" [required]=\"required\" aria-hidden=\"true\">\n" }]
-      }], function () { return [{ type: i0__namespace.Injector }]; }, null); })();
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], null); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(SwitchComponent, { className: "SwitchComponent", filePath: "switch/switch.component.ts", lineNumber: 25 }); })();
 
   const inputCalendarTypeProps = new Map([
       ['autocomplete', { value: true, ...i2.PROP_BOOLEAN }],
@@ -2503,10 +2566,10 @@
   };
   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__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+      static { this.ɵfac = function InputCalendarComponent_Factory(t) { return new (t || InputCalendarComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: InputCalendarComponent, selectors: [["wm-input", "type", "date"], ["wm-input", "type", "datetime-local"], ["wm-input", "type", "month"], ["wm-input", "type", "time"], ["wm-input", "type", "week"]], viewQuery: function InputCalendarComponent_Query(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵviewQuery(_c0$5, 7);
               i0__namespace.ɵɵviewQuery(i2$1.NgModel, 5);
@@ -2518,29 +2581,39 @@
                   i2.provideAs(InputCalendarComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(InputCalendarComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(InputCalendarComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$4, decls: 2, vars: 17, consts: [["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "type", "ngModel", "readonly", "required", "disabled", "min", "max", "step", "autofocus", "autocomplete", "ngClass", "ngStyle", "ngModelChange", "blur"], ["input", ""]], template: function InputCalendarComponent_Template(rf, ctx) { if (rf & 1) {
-              i0__namespace.ɵɵelementStart(0, "input", 0, 1);
-              i0__namespace.ɵɵlistener("ngModelChange", function InputCalendarComponent_Template_input_ngModelChange_0_listener($event) { return ctx.datavalue = $event; })("blur", function InputCalendarComponent_Template_input_blur_0_listener($event) { return ctx.handleBlur($event); })("ngModelChange", function InputCalendarComponent_Template_input_ngModelChange_0_listener($event) { return ctx.handleChange($event); });
+              ]), i0__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
+              i0__namespace.ɵɵelementStart(0, "input", 1, 0);
+              i0__namespace.ɵɵtwoWayListener("ngModelChange", function InputCalendarComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0__namespace.ɵɵresetView($event); });
+              i0__namespace.ɵɵlistener("blur", function InputCalendarComponent_Template_input_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleBlur($event)); })("ngModelChange", function InputCalendarComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleChange($event)); });
               i0__namespace.ɵɵelementEnd();
           } if (rf & 2) {
-              i0__namespace.ɵɵproperty("type", ctx.type)("ngModel", ctx.datavalue)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("min", ctx.minvalue)("max", ctx.maxvalue)("step", ctx.step)("autofocus", ctx.autofocus)("autocomplete", ctx.autocomplete ? "on" : "off")("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
+              i0__namespace.ɵɵproperty("type", ctx.type);
+              i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
+              i0__namespace.ɵɵ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__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint || ctx.type + " field");
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.NgModel], encapsulation: 2 }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputCalendarComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputCalendarComponent, [{
           type: i0.Component,
           args: [{ selector: 'wm-input[type="date"], wm-input[type="datetime-local"], wm-input[type="month"], wm-input[type="time"], wm-input[type="week"]', providers: [
                       i2.provideAs(InputCalendarComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(InputCalendarComponent, i2$1.NG_VALIDATORS, true),
                       i2.provideAsWidgetRef(InputCalendarComponent)
                   ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [min]=\"minvalue\"\n       [max]=\"maxvalue\"\n       [step]=\"step\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint || type + ' field'\"\n       [autofocus]=\"autofocus\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       #input>\n" }]
-      }], function () { return [{ type: i0__namespace.Injector }]; }, { inputEl: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { inputEl: [{
               type: i0.ViewChild,
               args: ['input', { static: true }]
           }], ngModel: [{
               type: i0.ViewChild,
               args: [i2$1.NgModel]
           }] }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(InputCalendarComponent, { className: "InputCalendarComponent", filePath: "text/calendar/input-calendar.component.ts", lineNumber: 22 }); })();
 
   const inputColorTypeProps = new Map([
       ['autocomplete', { value: true, ...i2.PROP_BOOLEAN }],
@@ -2575,10 +2648,10 @@
   };
   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__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+      static { this.ɵfac = function InputColorComponent_Factory(t) { return new (t || InputColorComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: InputColorComponent, selectors: [["wm-input", "type", "color"]], viewQuery: function InputColorComponent_Query(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵviewQuery(_c0$4, 7);
               i0__namespace.ɵɵviewQuery(i2$1.NgModel, 5);
@@ -2590,29 +2663,39 @@
                   i2.provideAs(InputColorComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(InputColorComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(InputColorComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$3, decls: 2, vars: 14, consts: [["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "type", "ngModel", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle", "ngModelChange", "blur"], ["input", ""]], template: function InputColorComponent_Template(rf, ctx) { if (rf & 1) {
-              i0__namespace.ɵɵelementStart(0, "input", 0, 1);
-              i0__namespace.ɵɵlistener("ngModelChange", function InputColorComponent_Template_input_ngModelChange_0_listener($event) { return ctx.datavalue = $event; })("blur", function InputColorComponent_Template_input_blur_0_listener($event) { return ctx.handleBlur($event); })("ngModelChange", function InputColorComponent_Template_input_ngModelChange_0_listener($event) { return ctx.handleChange($event); });
+              ]), i0__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
+              i0__namespace.ɵɵelementStart(0, "input", 1, 0);
+              i0__namespace.ɵɵtwoWayListener("ngModelChange", function InputColorComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0__namespace.ɵɵresetView($event); });
+              i0__namespace.ɵɵlistener("blur", function InputColorComponent_Template_input_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleBlur($event)); })("ngModelChange", function InputColorComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleChange($event)); });
               i0__namespace.ɵɵelementEnd();
           } if (rf & 2) {
-              i0__namespace.ɵɵproperty("type", ctx.type)("ngModel", ctx.datavalue)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
+              i0__namespace.ɵɵproperty("type", ctx.type);
+              i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
+              i0__namespace.ɵɵproperty("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
               i0__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.MaxLengthValidator, i2$1__namespace.NgModel], encapsulation: 2 }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputColorComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputColorComponent, [{
           type: i0.Component,
           args: [{ selector: 'wm-input[type="color"]', providers: [
                       i2.provideAs(InputColorComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(InputColorComponent, i2$1.NG_VALIDATORS, true),
                       i2.provideAsWidgetRef(InputColorComponent)
                   ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       role=\"textbox\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       #input>\n" }]
-      }], function () { return [{ type: i0__namespace.Injector }]; }, { inputEl: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { inputEl: [{
               type: i0.ViewChild,
               args: ['input', { static: true }]
           }], ngModel: [{
               type: i0.ViewChild,
               args: [i2$1.NgModel]
           }] }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(InputColorComponent, { className: "InputColorComponent", filePath: "text/color/input-color.component.ts", lineNumber: 23 }); })();
 
   const inputEmailTypeProps = new Map([
       ['autocomplete', { value: true, ...i2.PROP_BOOLEAN }],
@@ -2649,10 +2732,10 @@
   };
   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__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+      static { this.ɵfac = function InputEmailComponent_Factory(t) { return new (t || InputEmailComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: InputEmailComponent, selectors: [["wm-input", "type", "email"]], viewQuery: function InputEmailComponent_Query(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵviewQuery(_c0$3, 7);
               i0__namespace.ɵɵviewQuery(i2$1.NgModel, 5);
@@ -2664,30 +2747,39 @@
                   i2.provideAs(InputEmailComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(InputEmailComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(InputEmailComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$2, decls: 2, vars: 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__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
-              i0__namespace.ɵɵelementStart(0, "input", 0, 1);
-              i0__namespace.ɵɵ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__namespace.ɵɵrestoreView(_r1); const _r0 = i0__namespace.ɵɵreference(1); return i0__namespace.ɵɵresetView(ctx.flushViewChanges(_r0.value)); });
+              i0__namespace.ɵɵelementStart(0, "input", 1, 0);
+              i0__namespace.ɵɵtwoWayListener("ngModelChange", function InputEmailComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0__namespace.ɵɵresetView($event); });
+              i0__namespace.ɵɵlistener("blur", function InputEmailComponent_Template_input_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleBlur($event)); })("ngModelChange", function InputEmailComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleChange($event)); })("keyup.enter", function InputEmailComponent_Template_input_keyup_enter_0_listener() { i0__namespace.ɵɵrestoreView(_r1); const input_r2 = i0__namespace.ɵɵreference(1); return i0__namespace.ɵɵresetView(ctx.flushViewChanges(input_r2.value)); });
               i0__namespace.ɵɵelementEnd();
           } if (rf & 2) {
-              i0__namespace.ɵɵproperty("type", ctx.type)("ngModel", ctx.datavalue)("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
+              i0__namespace.ɵɵproperty("type", ctx.type);
+              i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
+              i0__namespace.ɵɵ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__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.MaxLengthValidator, i2$1__namespace.PatternValidator, i2$1__namespace.EmailValidator, i2$1__namespace.NgModel], encapsulation: 2 }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputEmailComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputEmailComponent, [{
           type: i0.Component,
           args: [{ selector: 'wm-input[type="email"]', providers: [
                       i2.provideAs(InputEmailComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(InputEmailComponent, i2$1.NG_VALIDATORS, true),
                       i2.provideAsWidgetRef(InputEmailComponent)
                   ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       email\n       #input>\n" }]
-      }], function () { return [{ type: i0__namespace.Injector }]; }, { inputEl: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { inputEl: [{
               type: i0.ViewChild,
               args: ['input', { static: true }]
           }], ngModel: [{
               type: i0.ViewChild,
               args: [i2$1.NgModel]
           }] }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(InputEmailComponent, { className: "InputEmailComponent", filePath: "text/email/input-email.component.ts", lineNumber: 23 }); })();
 
   const inputNumberTypeProps = new Map([
       ['autocomplete', { value: true, ...i2.PROP_BOOLEAN }],
@@ -2721,15 +2813,15 @@
 
   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) {
@@ -2741,7 +2833,7 @@
               return false;
           }
       }
-      static { this.ɵfac = function InputNumberComponent_Factory(t) { return new (t || InputNumberComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+      static { this.ɵfac = function InputNumberComponent_Factory(t) { return new (t || InputNumberComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: InputNumberComponent, selectors: [["wm-input", "type", "number"]], viewQuery: function InputNumberComponent_Query(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵviewQuery(_c0$2, 7);
               i0__namespace.ɵɵviewQuery(i2$1.NgModel, 5);
@@ -2753,30 +2845,39 @@
                   i2.provideAs(InputNumberComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(InputNumberComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(InputNumberComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$1, decls: 2, vars: 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__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
-              i0__namespace.ɵɵelementStart(0, "input", 0, 1);
-              i0__namespace.ɵɵ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__namespace.ɵɵrestoreView(_r1); const _r0 = i0__namespace.ɵɵreference(1); return i0__namespace.ɵɵ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__namespace.ɵɵelementStart(0, "input", 1, 0);
+              i0__namespace.ɵɵtwoWayListener("ngModelChange", function InputNumberComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0__namespace.ɵɵresetView($event); });
+              i0__namespace.ɵɵlistener("blur", function InputNumberComponent_Template_input_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleBlur($event)); })("ngModelChange", function InputNumberComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleChange($event)); })("keyup.enter", function InputNumberComponent_Template_input_keyup_enter_0_listener() { i0__namespace.ɵɵrestoreView(_r1); const input_r2 = i0__namespace.ɵɵreference(1); return i0__namespace.ɵɵresetView(ctx.flushViewChanges(input_r2.value)); })("keydown.ArrowUp", function InputNumberComponent_Template_input_keydown_ArrowUp_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onArrowPress($event)); })("keydown.ArrowDown", function InputNumberComponent_Template_input_keydown_ArrowDown_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onArrowPress($event)); })("keypress", function InputNumberComponent_Template_input_keypress_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.validateInputEntry($event)); });
               i0__namespace.ɵɵelementEnd();
           } if (rf & 2) {
-              i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(20, _c2, ctx.step === 0))("type", ctx.type)("ngModel", ctx.datavalue)("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("min", ctx.minvalue)("max", ctx.maxvalue)("step", ctx.step)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
+              i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(20, _c2, ctx.step === 0))("type", ctx.type);
+              i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
+              i0__namespace.ɵɵ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__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.MaxLengthValidator, i2$1__namespace.NgModel], encapsulation: 2 }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputNumberComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputNumberComponent, [{
           type: i0.Component,
           args: [{ selector: 'wm-input[type="number"]', providers: [
                       i2.provideAs(InputNumberComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(InputNumberComponent, i2$1.NG_VALIDATORS, true),
                       i2.provideAsWidgetRef(InputNumberComponent)
                   ], template: "<input class=\"form-control app-textbox\"\n       [ngClass]=\"{'step-hidden': step === 0}\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [min]=\"minvalue\"\n       [max]=\"maxvalue\"\n       [step]=\"step\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       (keydown.ArrowUp)=\"onArrowPress($event)\"\n       (keydown.ArrowDown)=\"onArrowPress($event)\"\n       (keypress)=\"validateInputEntry($event)\"\n       #input>\n" }]
-      }], function () { return [{ type: i0__namespace.Injector }]; }, { inputEl: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { inputEl: [{
               type: i0.ViewChild,
               args: ['input', { static: true }]
           }], ngModel: [{
               type: i0.ViewChild,
               args: [i2$1.NgModel]
           }] }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(InputNumberComponent, { className: "InputNumberComponent", filePath: "text/number/input-number.component.ts", lineNumber: 22 }); })();
 
   const inputTextTypeProps = new Map([
       ['autocomplete', { value: true, ...i2.PROP_BOOLEAN }],
@@ -2825,8 +2926,8 @@
   };
   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 */
@@ -2897,7 +2998,7 @@
           super.ngOnInit();
           this.isFocused = !!this.datavalue;
       }
-      static { this.ɵfac = function InputTextComponent_Factory(t) { return new (t || InputTextComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+      static { this.ɵfac = function InputTextComponent_Factory(t) { return new (t || InputTextComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: InputTextComponent, selectors: [["wm-input", "type", "text"], ["wm-input", 3, "type", ""], ["wm-input", "type", "password"], ["wm-input", "type", "search"], ["wm-input", "type", "tel"], ["wm-input", "type", "url"]], viewQuery: function InputTextComponent_Query(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵviewQuery(_c0$1, 7);
               i0__namespace.ɵɵviewQuery(i2$1.NgModel, 5);
@@ -2911,24 +3012,32 @@
                   i2.provideAs(InputTextComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(InputTextComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(InputTextComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1, decls: 2, vars: 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__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
-              i0__namespace.ɵɵelementStart(0, "input", 0, 1);
-              i0__namespace.ɵɵ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__namespace.ɵɵrestoreView(_r1); const _r0 = i0__namespace.ɵɵreference(1); return i0__namespace.ɵɵresetView(ctx.flushViewChanges(_r0.value)); });
+              i0__namespace.ɵɵelementStart(0, "input", 1, 0);
+              i0__namespace.ɵɵtwoWayListener("ngModelChange", function InputTextComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0__namespace.ɵɵresetView($event); });
+              i0__namespace.ɵɵlistener("ngModelChange", function InputTextComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleChange($event)); })("blur", function InputTextComponent_Template_input_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); ctx.handleBlur($event); return i0__namespace.ɵɵresetView(ctx.checkForDisplayFormat($event)); })("focus", function InputTextComponent_Template_input_focus_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.checkForDisplayFormat($event)); })("keyup.enter", function InputTextComponent_Template_input_keyup_enter_0_listener() { i0__namespace.ɵɵrestoreView(_r1); const input_r2 = i0__namespace.ɵɵreference(1); return i0__namespace.ɵɵresetView(ctx.flushViewChanges(input_r2.value)); });
               i0__namespace.ɵɵelementEnd();
           } if (rf & 2) {
-              i0__namespace.ɵɵproperty("type", ctx.type)("ngModel", ctx.datavalue)("imask", ctx.mask)("unmask", true)("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
+              i0__namespace.ɵɵproperty("type", ctx.type);
+              i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
+              i0__namespace.ɵɵ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__namespace.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey);
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.MaxLengthValidator, i2$1__namespace.PatternValidator, i2$1__namespace.NgModel, i3__namespace.IMaskDirective], encapsulation: 2 }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputTextComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputTextComponent, [{
           type: i0.Component,
           args: [{ selector: 'wm-input[type="text"], wm-input:not([type]), wm-input[type="password"], wm-input[type="search"], wm-input[type="tel"], wm-input[type="url"]', providers: [
                       i2.provideAs(InputTextComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(InputTextComponent, i2$1.NG_VALIDATORS, true),
                       i2.provideAsWidgetRef(InputTextComponent)
                   ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [attr.aria-label]=\"hint\"\n       [(ngModel)]=\"datavalue\"\n       [imask]=\"mask\"\n       [unmask]=\"true\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (ngModelChange)=\"handleChange($event)\"\n       (blur)=\"handleBlur($event); checkForDisplayFormat($event)\"\n       (focus)=\"checkForDisplayFormat($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       #input>\n" }]
-      }], function () { return [{ type: i0__namespace.Injector }]; }, { inputEl: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { inputEl: [{
               type: i0.ViewChild,
               args: ['input', { static: true }]
           }], ngModel: [{
@@ -2938,6 +3047,7 @@
               type: i0.ViewChild,
               args: ['input', { read: i3.IMaskDirective }]
           }] }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(InputTextComponent, { className: "InputTextComponent", filePath: "text/text/input-text.component.ts", lineNumber: 23 }); })();
 
   const textareaProps = new Map([
       ['autofocus', i2.PROP_BOOLEAN],
@@ -2973,7 +3083,7 @@
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
       const ctx_r1 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵadvance(1);
+      i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵtextInterpolate(ctx_r1.limitdisplaytext);
   } }
   const WIDGET_CONFIG = {
@@ -2982,14 +3092,14 @@
   };
   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__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+      static { this.ɵfac = function TextareaComponent_Factory(t) { return new (t || TextareaComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: TextareaComponent, selectors: [["wm-textarea"]], viewQuery: function TextareaComponent_Query(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵviewQuery(_c0, 7);
               i0__namespace.ɵɵviewQuery(i2$1.NgModel, 5);
@@ -3001,32 +3111,41 @@
                   i2.provideAs(TextareaComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(TextareaComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(TextareaComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], decls: 3, vars: 15, consts: [["focus-target", "", "role", "textbox", "aria-multiline", "true", 1, "form-control", "app-textarea", 3, "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle", "ngModelChange", "blur", "input"], ["textarea", ""], ["class", "textarea-count", 4, "ngIf"], [1, "textarea-count"]], template: function TextareaComponent_Template(rf, ctx) { if (rf & 1) {
-              i0__namespace.ɵɵelementStart(0, "textarea", 0, 1);
-              i0__namespace.ɵɵlistener("ngModelChange", function TextareaComponent_Template_textarea_ngModelChange_0_listener($event) { return ctx.datavalue = $event; })("blur", function TextareaComponent_Template_textarea_blur_0_listener($event) { return ctx.handleBlur($event); })("input", function TextareaComponent_Template_textarea_input_0_listener() { return ctx.onInputChange(); })("ngModelChange", function TextareaComponent_Template_textarea_ngModelChange_0_listener($event) { ctx.handleChange($event); return ctx.onInputChange(); });
+              ]), i0__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
+              i0__namespace.ɵɵelementStart(0, "textarea", 1, 0);
+              i0__namespace.ɵɵtwoWayListener("ngModelChange", function TextareaComponent_Template_textarea_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0__namespace.ɵɵresetView($event); });
+              i0__namespace.ɵɵlistener("blur", function TextareaComponent_Template_textarea_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleBlur($event)); })("input", function TextareaComponent_Template_textarea_input_0_listener() { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onInputChange()); })("ngModelChange", function TextareaComponent_Template_textarea_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); ctx.handleChange($event); return i0__namespace.ɵɵresetView(ctx.onInputChange()); });
               i0__namespace.ɵɵelementEnd();
               i0__namespace.ɵɵtemplate(2, TextareaComponent_div_2_Template, 2, 1, "div", 2);
           } if (rf & 2) {
-              i0__namespace.ɵɵproperty("ngModel", ctx.datavalue)("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
+              i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
+              i0__namespace.ɵɵ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__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
               i0__namespace.ɵɵadvance(2);
               i0__namespace.ɵɵproperty("ngIf", ctx.maxchars);
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgIf, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.MaxLengthValidator, i2$1__namespace.NgModel], encapsulation: 2 }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TextareaComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TextareaComponent, [{
           type: i0.Component,
           args: [{ selector: 'wm-textarea', providers: [
                       i2.provideAs(TextareaComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(TextareaComponent, i2$1.NG_VALIDATORS, true),
                       i2.provideAsWidgetRef(TextareaComponent)
                   ], template: "<textarea class=\"form-control app-textarea\"\n          focus-target\n          role=\"textbox\"\n          [attr.name]=\"name\"\n          [(ngModel)]=\"datavalue\"\n          [ngModelOptions]=\"ngModelOptions\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          [disabled]=\"disabled\"\n          [maxlength]=\"maxchars\"\n          [attr.tabindex]=\"tabindex\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.accesskey]=\"shortcutkey\"\n          [attr.aria-label]=\"hint\"\n          aria-multiline=\"true\"\n          [autofocus]=\"autofocus\"\n          [ngClass]=\"conditionalclass\"\n          [ngStyle]=\"conditionalstyle\"\n          (blur)=\"handleBlur($event)\"\n          (input)=\"onInputChange()\"\n          (ngModelChange)=\"handleChange($event); onInputChange();\"\n          #textarea\n></textarea>\n\n<div *ngIf=\"maxchars\" class=\"textarea-count\"  >{{limitdisplaytext}}</div>\n" }]
-      }], function () { return [{ type: i0__namespace.Injector }]; }, { inputEl: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { inputEl: [{
               type: i0.ViewChild,
               args: ['textarea', { static: true }]
           }], ngModel: [{
               type: i0.ViewChild,
               args: [i2$1.NgModel]
           }] }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(TextareaComponent, { className: "TextareaComponent", filePath: "textarea/textarea.component.ts", lineNumber: 22 }); })();
 
   class CaptionPositionDirective {
       constructor(inj, app) {
@@ -3040,7 +3159,7 @@
           let mobileInputVal;
           // In case of mobile date / time picker check for input element's value which has 'mobile-input' class
           if (this.inputEl.length > 1 && this.inputEl.hasClass('mobile-input')) {
-              _.forEach(this.inputEl, (el) => {
+              lodashEs.forEach(this.inputEl, (el) => {
                   if ($(el).hasClass('mobile-input') && el.value) {
                       mobileInputVal = el.value;
                   }
@@ -3149,8 +3268,7 @@
               // 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');
-              const localName = this.inputEl && this.inputEl.length && this.inputEl[0].localName;
-              if ((data.isSelect && localName == 'select') || data.displayVal || data.isFocused || data.isSelectMultiple || isInputElFocused) {
+              if (data.displayVal || data.isFocused || data.isSelectMultiple || isInputElFocused) {
                   data.nativeEl.addClass('float-active');
                   if (!data.displayVal && isInputElFocused) {
                       this.inputEl.attr('placeholder', this.placeholder);
@@ -3187,12 +3305,12 @@
       static { this.ɵfac = function CaptionPositionDirective_Factory(t) { return new (t || CaptionPositionDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.App)); }; }
       static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: CaptionPositionDirective, selectors: [["", "wmCaptionPosition", ""]] }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CaptionPositionDirective, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CaptionPositionDirective, [{
           type: i0.Directive,
           args: [{
                   selector: '[wmCaptionPosition]'
               }]
-      }], function () { return [{ type: i0__namespace.Injector }, { type: i1$1__namespace.App }]; }, null); })();
+      }], () => [{ type: i0__namespace.Injector }, { type: i1$1__namespace.App }], null); })();
 
   const components = [
       ButtonComponent,
@@ -3220,7 +3338,7 @@
               i2.WmComponentsModule,
               i3.IMaskModule] }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputModule, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputModule, [{
           type: i0.NgModule,
           args: [{
                   imports: [
@@ -3284,10 +3402,10 @@
   exports.InputNumberComponent = InputNumberComponent;
   exports.InputTextComponent = InputTextComponent;
   exports.NumberComponent = NumberComponent;
-  exports.NumberLocale = NumberLocale;
   exports.RadiosetComponent = RadiosetComponent;
   exports.SelectComponent = SelectComponent;
   exports.SwitchComponent = SwitchComponent;
   exports.TextareaComponent = TextareaComponent;
+  exports.unStringify = unStringify;
 
 }));