@wavemaker/app-ng-runtime 12.0.0-next.140479 → 12.0.0-next.140481

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

@@ -1,16 +1,18 @@
 import * as i0 from '@angular/core';
-import { Component, HostBinding, Directive, HostListener, Injectable, Inject, ElementRef, Attribute, ViewChild, ContentChildren, NgModule } from '@angular/core';
+import { Component, Inject, Optional, HostBinding, Directive, HostListener, Injectable, ElementRef, Attribute, ViewChild, ContentChildren, Injector, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
-import { getLocaleNumberSymbol, NumberSymbol, CommonModule } from '@angular/common';
+import { NumberSymbol, getLocaleNumberSymbol, CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/forms';
 import { FormControlName, NgModel, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
 import * as i3 from 'angular-imask';
 import { IMaskDirective, IMaskModule } from 'angular-imask';
 import * as i2 from '@wm/components/base';
-import { register, PROP_STRING, PROP_ANY, PROP_BOOLEAN, PROP_NUMBER, DISPLAY_TYPE, StylableComponent, styler, provideAsWidgetRef, APPLY_STYLES_TYPE, WidgetConfig, registerFormWidget, provideAs, extractDataAsArray, ToDatePipe, ALLFIELDS, getOrderedDataset, convertDataToObject, transformDataWithKeys, transformFormData, getUniqObjsByDataField, groupData, handleHeaderClick, toggleAllHeaders, WidgetRef, INPUTMODE, WmComponentsModule } from '@wm/components/base';
+import { PROP_STRING, PROP_ANY, PROP_BOOLEAN, PROP_NUMBER, register, DISPLAY_TYPE, StylableComponent, styler, provideAsWidgetRef, APPLY_STYLES_TYPE, WidgetConfig, registerFormWidget, provideAs, extractDataAsArray, ToDatePipe, ALLFIELDS, convertDataToObject, getOrderedDataset, transformDataWithKeys, transformFormData, getUniqObjsByDataField, groupData, handleHeaderClick, toggleAllHeaders, WidgetRef, INPUTMODE, TrailingZeroDecimalPipe, WmComponentsModule } from '@wm/components/base';
 import * as i1$1 from '@wm/core';
-import { DataSource, FormWidgetType, isDefined, toggleClass, AppDefaults, debounce, $appDigest, noop, isEqualWithFields, toBoolean, setListClass, switchClass, addForIdAttributes, addClass, setAttr, removeAttr, isIos, setCSS } from '@wm/core';
+import { DataSource, FormWidgetType, isDefined, toggleClass, AppDefaults, $appDigest, debounce as debounce$1, noop, isEqualWithFields, toBoolean, setListClass, switchClass, addForIdAttributes, addClass, AbstractI18nService, setAttr, removeAttr, setCSS } from '@wm/core';
+import { has, set, isArray, debounce, toString, find, isNull, isObject, isEqual, isEmpty, forEach, includes, isString, get, isUndefined, round, toArray, intersection, findIndex } from 'lodash-es';
 import { Subject } from 'rxjs';
+import { __param, __metadata, __decorate } from 'tslib';
 
 const registerProps$e = () => {
     register('wm-button', new Map([
@@ -37,39 +39,39 @@ const registerProps$e = () => {
 };
 
 const _c0$c = ["wmButton", ""];
-const _c1$b = function (a0, a1, a2) { return { width: a0, height: a1, margin: a2 }; };
+const _c1$b = [[["", 8, "caret"]]];
+const _c2$8 = [".caret"];
+const _c3$3 = (a0, a1, a2) => ({ width: a0, height: a1, margin: a2 });
+const _c4$2 = (a0, a1, a2, a3) => ({ width: a0, height: a1, margin: a2, fontSize: a3 });
 function ButtonComponent_img_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "img", 5);
     i0.ɵɵpipe(1, "image");
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("src", i0.ɵɵpipeBind1(1, 2, ctx_r0.iconurl), i0.ɵɵsanitizeUrl)("ngStyle", i0.ɵɵpureFunction3(4, _c1$b, ctx_r0.iconwidth, ctx_r0.iconheight, ctx_r0.iconmargin));
+    i0.ɵɵproperty("src", i0.ɵɵpipeBind1(1, 2, ctx_r0.iconurl), i0.ɵɵsanitizeUrl)("ngStyle", i0.ɵɵpureFunction3(4, _c3$3, ctx_r0.iconwidth, ctx_r0.iconheight, ctx_r0.iconmargin));
 } }
-const _c2$5 = function (a0, a1, a2, a3) { return { width: a0, height: a1, margin: a2, fontSize: a3 }; };
 function ButtonComponent_i_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 6);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵclassMapInterpolate1("app-icon ", ctx_r1.iconclass, "");
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction4(4, _c2$5, ctx_r1.iconwidth, ctx_r1.iconheight, ctx_r1.iconmargin, ctx_r1.iconwidth));
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassMapInterpolate1("app-icon ", ctx_r0.iconclass, "");
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction4(4, _c4$2, ctx_r0.iconwidth, ctx_r0.iconheight, ctx_r0.iconmargin, ctx_r0.iconwidth));
 } }
 function ButtonComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 7);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate2("", ctx_r2.caption, " ", ctx_r2.appLocale.LABEL_ICON, "");
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2("", ctx_r0.caption, " ", ctx_r0.appLocale.LABEL_ICON, "");
 } }
 function ButtonComponent_span_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 8);
 } if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("textContent", ctx_r3.badgevalue);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("textContent", ctx_r0.badgevalue);
 } }
-const _c3$2 = [[["", 8, "caret"]]];
-const _c4$2 = [".caret"];
 const DEFAULT_CLS$6 = 'btn app-button';
 const WIDGET_CONFIG$e = {
     widgetType: 'wm-button',
@@ -78,42 +80,45 @@ const WIDGET_CONFIG$e = {
 };
 class ButtonComponent extends StylableComponent {
     static { this.initializeProps = registerProps$e(); }
-    constructor(inj) {
-        super(inj, WIDGET_CONFIG$e);
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG$e, explicitContext);
         styler(this.nativeElement, this);
     }
-    static { this.ɵfac = function ButtonComponent_Factory(t) { return new (t || ButtonComponent)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵfac = function ButtonComponent_Factory(t) { return new (t || ButtonComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ButtonComponent, selectors: [["button", "wmButton", ""]], hostVars: 5, hostBindings: function ButtonComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵhostProperty("type", ctx.type)("tabIndex", ctx.tabindex)("disabled", ctx.disabled);
             i0.ɵɵattribute("accesskey", ctx.shortcutkey)("icon-position", ctx.iconposition);
         } }, exportAs: ["wmButton"], features: [i0.ɵɵProvidersFeature([
                 provideAsWidgetRef(ButtonComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$c, ngContentSelectors: _c4$2, decls: 6, vars: 5, consts: [["data-identifier", "img", "alt", "button image", "class", "button-image-icon", 3, "src", "ngStyle", 4, "ngIf"], ["aria-hidden", "true", 3, "class", "ngStyle", 4, "ngIf"], ["class", "sr-only", 4, "ngIf"], [1, "btn-caption", 3, "innerHTML"], ["class", "badge pull-right", 3, "textContent", 4, "ngIf"], ["data-identifier", "img", "alt", "button image", 1, "button-image-icon", 3, "src", "ngStyle"], ["aria-hidden", "true", 3, "ngStyle"], [1, "sr-only"], [1, "badge", "pull-right", 3, "textContent"]], template: function ButtonComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c3$2);
-            i0.ɵɵtemplate(0, ButtonComponent_img_0_Template, 2, 8, "img", 0);
-            i0.ɵɵtemplate(1, ButtonComponent_i_1_Template, 1, 9, "i", 1);
-            i0.ɵɵtemplate(2, ButtonComponent_span_2_Template, 2, 2, "span", 2);
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$c, ngContentSelectors: _c2$8, decls: 6, vars: 5, consts: [["data-identifier", "img", "alt", "button image", "class", "button-image-icon", 3, "src", "ngStyle", 4, "ngIf"], ["aria-hidden", "true", 3, "class", "ngStyle", 4, "ngIf"], ["class", "sr-only", 4, "ngIf"], [1, "btn-caption", 3, "innerHTML"], ["class", "badge pull-right", 3, "textContent", 4, "ngIf"], ["data-identifier", "img", "alt", "button image", 1, "button-image-icon", 3, "src", "ngStyle"], ["aria-hidden", "true", 3, "ngStyle"], [1, "sr-only"], [1, "badge", "pull-right", 3, "textContent"]], template: function ButtonComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c1$b);
+            i0.ɵɵtemplate(0, ButtonComponent_img_0_Template, 2, 8, "img", 0)(1, ButtonComponent_i_1_Template, 1, 9, "i", 1)(2, ButtonComponent_span_2_Template, 2, 2, "span", 2);
             i0.ɵɵelement(3, "span", 3);
             i0.ɵɵprojection(4);
             i0.ɵɵtemplate(5, ButtonComponent_span_5_Template, 1, 1, "span", 4);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.iconurl);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.iconclass);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.iconclass);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("innerHTML", ctx.caption, i0.ɵɵsanitizeHtml);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.badgevalue);
         } }, dependencies: [i1.NgIf, i1.NgStyle, i2.TextContentDirective, i2.ImagePipe], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ButtonComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ButtonComponent, [{
         type: Component,
         args: [{ selector: 'button[wmButton]', providers: [
                     provideAsWidgetRef(ButtonComponent)
                 ], exportAs: 'wmButton', template: "<img data-identifier=\"img\" alt=\"button image\" class=\"button-image-icon\" [src]=\"iconurl | image\" *ngIf=\"iconurl\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"/>\n<i class=\"app-icon {{iconclass}}\" aria-hidden=\"true\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin, fontSize:iconwidth}\" *ngIf=\"iconclass\"></i>\n<span class=\"sr-only\" *ngIf=\"iconclass\">{{caption}} {{appLocale.LABEL_ICON}}</span>\n<span class=\"btn-caption\" [innerHTML]=\"caption\"></span>\n<ng-content select=\".caret\"></ng-content>\n<span *ngIf=\"badgevalue\" class=\"badge pull-right\" [textContent]=\"badgevalue\"></span>\n" }]
-    }], function () { return [{ type: i0.Injector }]; }, { type: [{
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { type: [{
             type: HostBinding,
             args: ['type']
         }], tabindex: [{
@@ -129,6 +134,7 @@ class ButtonComponent extends StylableComponent {
             type: HostBinding,
             args: ['attr.icon-position']
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ButtonComponent, { className: "ButtonComponent", filePath: "button/button.component.ts", lineNumber: 22 }); })();
 
 const registerProps$d = () => {
     register('wm-buttongroup', new Map([
@@ -151,11 +157,11 @@ class ButtonGroupDirective extends StylableComponent {
         this.$element.find('.app-button').removeClass('selected');
         $target.addClass('selected');
     }
-    constructor(inj) {
-        super(inj, WIDGET_CONFIG$d);
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG$d, explicitContext);
         styler(this.nativeElement, this, APPLY_STYLES_TYPE.CONTAINER);
     }
-    static { this.ɵfac = function ButtonGroupDirective_Factory(t) { return new (t || ButtonGroupDirective)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵfac = function ButtonGroupDirective_Factory(t) { return new (t || ButtonGroupDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ButtonGroupDirective, selectors: [["", "wmButtonGroup", ""]], hostVars: 2, hostBindings: function ButtonGroupDirective_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("click", function ButtonGroupDirective_click_HostBindingHandler($event) { return ctx.handleClick($event); });
         } if (rf & 2) {
@@ -164,7 +170,7 @@ class ButtonGroupDirective extends StylableComponent {
                 provideAsWidgetRef(ButtonGroupDirective)
             ]), i0.ɵɵInheritDefinitionFeature] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ButtonGroupDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ButtonGroupDirective, [{
         type: Directive,
         args: [{
                 selector: '[wmButtonGroup]',
@@ -172,7 +178,12 @@ class ButtonGroupDirective extends StylableComponent {
                     provideAsWidgetRef(ButtonGroupDirective)
                 ]
             }]
-    }], function () { return [{ type: i0.Injector }]; }, { vertical: [{
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { vertical: [{
             type: HostBinding,
             args: ['class.btn-group-vertical']
         }], handleClick: [{
@@ -181,8 +192,8 @@ class ButtonGroupDirective extends StylableComponent {
         }] }); })();
 
 class BaseFormComponent extends 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');
     }
@@ -211,11 +222,11 @@ class BaseFormComponent extends StylableComponent {
         }
         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 (has(this.context, binddatavalue.split('.')[0])) {
+            set(this.context, binddatavalue, value);
         }
         else {
-            _.set(this.viewParent, binddatavalue, value);
+            set(this.viewParent, binddatavalue, value);
         }
     }
     invokeOnChange(value, $event) {
@@ -248,15 +259,20 @@ class BaseFormComponent extends StylableComponent {
             });
         }
     }
-    static { this.ɵfac = function BaseFormComponent_Factory(t) { return new (t || BaseFormComponent)(i0.ɵɵinject(i0.Injector), i0.ɵɵinject(WidgetConfig), i0.ɵɵinject(Promise)); }; }
+    static { this.ɵfac = function BaseFormComponent_Factory(t) { return new (t || BaseFormComponent)(i0.ɵɵinject(i0.Injector), i0.ɵɵinject(WidgetConfig), i0.ɵɵinject('EXPLICIT_CONTEXT', 8), i0.ɵɵinject(Promise)); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: BaseFormComponent, factory: BaseFormComponent.ɵfac }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseFormComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseFormComponent, [{
         type: Injectable
-    }], function () { return [{ type: i0.Injector }, { type: undefined, decorators: [{
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [WidgetConfig]
-            }] }, { type: Promise }]; }, null); })();
+            }] }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }, { type: Promise }], null); })();
 
 /*
  * WMS-18269
@@ -336,10 +352,10 @@ class BaseFormCustomComponent extends BaseFormComponent {
     validate(control) {
         return this['show'] ? validateRequiredBind(this['required'])(control) : null;
     }
-    static { this.ɵfac = /*@__PURE__*/ function () { let ɵBaseFormCustomComponent_BaseFactory; return function BaseFormCustomComponent_Factory(t) { return (ɵBaseFormCustomComponent_BaseFactory || (ɵBaseFormCustomComponent_BaseFactory = i0.ɵɵgetInheritedFactory(BaseFormCustomComponent)))(t || BaseFormCustomComponent); }; }(); }
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵBaseFormCustomComponent_BaseFactory; return function BaseFormCustomComponent_Factory(t) { return (ɵBaseFormCustomComponent_BaseFactory || (ɵBaseFormCustomComponent_BaseFactory = i0.ɵɵgetInheritedFactory(BaseFormCustomComponent)))(t || BaseFormCustomComponent); }; })(); }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: BaseFormCustomComponent, factory: BaseFormCustomComponent.ɵfac }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseFormCustomComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseFormCustomComponent, [{
         type: Injectable
     }], null, null); })();
 
@@ -369,7 +385,8 @@ const registerProps$c = () => {
 
 const _c0$b = ["checkbox"];
 const _c1$a = ["wmCheckbox", ""];
-const _c2$4 = function (a0, a1, a2) { return { "unchecked": a0, "disabled": a1, "required": a2 }; };
+const _c2$7 = (a0, a1, a2) => ({ "unchecked": a0, "disabled": a1, "required": a2 });
+const _c3$2 = () => ({ standalone: true });
 const DEFAULT_CLS$4 = 'app-checkbox checkbox';
 const WIDGET_CONFIG$c = {
     widgetType: 'wm-checkbox',
@@ -407,8 +424,8 @@ class CheckboxComponent extends BaseFormCustomComponent {
         this.proxyModel = (isDefined(v) && v !== '') ? v === this._checkedvalue : undefined;
         this.updatePrevDatavalue(this.datavalue);
     }
-    constructor(inj, checkedVal, uncheckedVal, type) {
-        super(inj, WIDGET_CONFIG$c);
+    constructor(inj, checkedVal, uncheckedVal, type, explicitContext) {
+        super(inj, WIDGET_CONFIG$c, explicitContext);
         this.type = type;
         this._caption = '&nbsp';
         this._checkedvalue = unStringify(checkedVal, true);
@@ -465,7 +482,7 @@ class CheckboxComponent extends BaseFormCustomComponent {
         super.ngAfterViewInit();
         styler(this.nativeElement.querySelector('label'), this);
     }
-    static { this.ɵfac = function CheckboxComponent_Factory(t) { return new (t || CheckboxComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵinjectAttribute('checkedvalue'), i0.ɵɵinjectAttribute('uncheckedvalue'), i0.ɵɵinjectAttribute('type')); }; }
+    static { this.ɵfac = function CheckboxComponent_Factory(t) { return new (t || CheckboxComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵinjectAttribute('checkedvalue'), i0.ɵɵinjectAttribute('uncheckedvalue'), i0.ɵɵinjectAttribute('type'), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CheckboxComponent, selectors: [["", "wmCheckbox", ""]], viewQuery: function CheckboxComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(NgModel, 5);
             i0.ɵɵviewQuery(_c0$b, 7, ElementRef);
@@ -479,17 +496,20 @@ class CheckboxComponent extends BaseFormCustomComponent {
                 provideAs(CheckboxComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(CheckboxComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(CheckboxComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$a, decls: 6, vars: 17, consts: [[3, "ngClass"], ["type", "checkbox", "role", "checkbox", "focus-target", "", 3, "ngModel", "readonly", "required", "disabled", "tabindex", "ngModelChange", "blur"], ["checkbox", ""], [1, "caption", 3, "innerHtml"], ["alt", "Checkbox Image", "aria-hidden", "true", "src", "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==", 1, "switch"], ["type", "hidden", "aria-hidden", "true", "tabindex", "-1", 1, "ng-hide", "model-holder", 3, "disabled", "value"]], template: function CheckboxComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "label", 0)(1, "input", 1, 2);
-            i0.ɵɵlistener("ngModelChange", function CheckboxComponent_Template_input_ngModelChange_1_listener($event) { return ctx.proxyModel = $event; })("blur", function CheckboxComponent_Template_input_blur_1_listener($event) { return ctx.invokeOnTouched($event); })("ngModelChange", function CheckboxComponent_Template_input_ngModelChange_1_listener($event) { return ctx.handleChange($event); });
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$a, decls: 6, vars: 19, consts: [["checkbox", ""], [3, "ngClass"], ["type", "checkbox", "role", "checkbox", "focus-target", "", 3, "ngModelChange", "blur", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "tabindex"], [1, "caption", 3, "innerHtml"], ["alt", "Checkbox Image", "aria-hidden", "true", "src", "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==", 1, "switch"], ["type", "hidden", "aria-hidden", "true", "tabindex", "-1", 1, "ng-hide", "model-holder", 3, "disabled", "value"]], template: function CheckboxComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "label", 1)(1, "input", 2, 0);
+            i0.ɵɵtwoWayListener("ngModelChange", function CheckboxComponent_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.proxyModel, $event) || (ctx.proxyModel = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("blur", function CheckboxComponent_Template_input_blur_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.invokeOnTouched($event)); })("ngModelChange", function CheckboxComponent_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleChange($event)); });
             i0.ɵɵelementEnd();
             i0.ɵɵelement(3, "span", 3)(4, "img", 4);
             i0.ɵɵelementEnd();
             i0.ɵɵelement(5, "input", 5);
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(13, _c2$4, !ctx.proxyModel, ctx.disabled || ctx.readonly, ctx.required && ctx._caption));
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngModel", ctx.proxyModel)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled || ctx.readonly)("tabindex", ctx.tabindex);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(14, _c2$7, !ctx.proxyModel, ctx.disabled || ctx.readonly, ctx.required && ctx._caption));
+            i0.ɵɵadvance();
+            i0.ɵɵtwoWayProperty("ngModel", ctx.proxyModel);
+            i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(18, _c3$2))("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled || ctx.readonly)("tabindex", ctx.tabindex);
             i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("aria-checked", !!ctx.proxyModel)("accesskey", ctx.shortcutkey);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("innerHtml", ctx._caption, i0.ɵɵsanitizeHtml);
@@ -497,14 +517,14 @@ class CheckboxComponent extends BaseFormCustomComponent {
             i0.ɵɵproperty("disabled", ctx.disabled)("value", ctx.proxyModel);
         } }, dependencies: [i1.NgClass, i2$1.CheckboxControlValueAccessor, i2$1.NgControlStatus, i2$1.CheckboxRequiredValidator, i2$1.NgModel], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckboxComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckboxComponent, [{
         type: Component,
         args: [{ selector: '[wmCheckbox]', providers: [
                     provideAs(CheckboxComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(CheckboxComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(CheckboxComponent)
-                ], template: "<label [ngClass]=\"{'unchecked': !proxyModel, 'disabled': (disabled || readonly), 'required': (required && _caption)}\">\n    <input type=\"checkbox\"\n           role=\"checkbox\"\n           #checkbox\n           [attr.name]=\"name\"\n           [attr.aria-label]=\"hint\"\n           [attr.aria-checked]=\"!!proxyModel\"\n           focus-target\n           [(ngModel)]=\"proxyModel\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           [disabled]=\"disabled || readonly\"\n           [attr.accesskey]=\"shortcutkey\"\n           [tabindex]=\"tabindex\"\n           (blur)=\"invokeOnTouched($event)\"\n           (ngModelChange)=\"handleChange($event)\">\n    <span class=\"caption\" [innerHtml]=\"_caption\"></span>\n    <img alt=\"Checkbox Image\" aria-hidden=\"true\" src=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"switch\"/>\n</label>\n<input type=\"hidden\" class=\"ng-hide model-holder\" aria-hidden=\"true\" tabindex=\"-1\" [disabled]=\"disabled\" [value]=\"proxyModel\">\n" }]
-    }], function () { return [{ type: i0.Injector }, { type: undefined, decorators: [{
+                ], 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           [ngModelOptions]=\"{standalone: true}\"\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" }]
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['checkedvalue']
             }] }, { type: undefined, decorators: [{
@@ -513,7 +533,12 @@ class CheckboxComponent extends BaseFormCustomComponent {
             }] }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['type']
-            }] }]; }, { ngModel: [{
+            }] }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { ngModel: [{
             type: ViewChild,
             args: [NgModel]
         }], checkboxEl: [{
@@ -523,6 +548,7 @@ class CheckboxComponent extends BaseFormCustomComponent {
             type: HostListener,
             args: ['keydown.enter', ['$event', '"ENTER"']]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CheckboxComponent, { className: "CheckboxComponent", filePath: "checkbox/checkbox.component.ts", lineNumber: 59 }); })();
 
 class DatasetAwareFormComponent extends BaseFormCustomComponent {
     get modelByKey() {
@@ -551,17 +577,17 @@ class DatasetAwareFormComponent extends BaseFormCustomComponent {
         // 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 Subject();
         this.datavalue$ = new Subject();
         this.allowempty = true;
-        this._debounceDatavalueUpdation = _.debounce((values) => {
+        this._debounceDatavalueUpdation = debounce((values) => {
             // if no item is found in datasetItems, wait untill the dataset updates by preserving the datavalue in toBeProcessedDatavalue.
-            if (!isDefined(this._modelByKey) || (_.isArray(this._modelByKey) && !this._modelByKey.length)) {
+            if (!isDefined(this._modelByKey) || (isArray(this._modelByKey) && !this._modelByKey.length)) {
                 this.toBeProcessedDatavalue = values;
                 this._modelByValue = '';
             }
@@ -569,7 +595,7 @@ class DatasetAwareFormComponent extends BaseFormCustomComponent {
                 // obtain the first array value when multiple is set to false.
                 // set the modelByValue only when undefined.
                 if (!isDefined(this._modelByValue)) {
-                    this._modelByValue = (!this.multiple && _.isArray(this.toBeProcessedDatavalue)) ? this.toBeProcessedDatavalue[0] : this.toBeProcessedDatavalue;
+                    this._modelByValue = (!this.multiple && isArray(this.toBeProcessedDatavalue)) ? this.toBeProcessedDatavalue[0] : this.toBeProcessedDatavalue;
                 }
                 this.toBeProcessedDatavalue = undefined;
             }
@@ -580,7 +606,7 @@ class DatasetAwareFormComponent extends BaseFormCustomComponent {
         this.binddisplayexpression = this.nativeElement.getAttribute('displayexpression.bind');
         this.binddisplayimagesrc = this.nativeElement.getAttribute('displayimagesrc.bind');
         this.binddisplaylabel = this.nativeElement.getAttribute('displaylabel.bind');
-        this._debouncedInitDatasetItems = debounce(() => {
+        this._debouncedInitDatasetItems = debounce$1(() => {
             this.initDatasetItems();
             $appDigest();
         }, 150);
@@ -599,7 +625,7 @@ class DatasetAwareFormComponent extends BaseFormCustomComponent {
         if (!this.datasetItems.length) {
             return;
         }
-        if (this.multiple && !_.isArray(keys)) {
+        if (this.multiple && !isArray(keys)) {
             keys = [keys];
         }
         // Set the _modelByKey to the modified keys.
@@ -607,10 +633,10 @@ class DatasetAwareFormComponent extends BaseFormCustomComponent {
         if (this.multiple) {
             this._modelByValue = [];
             keys.forEach(key => {
-                const itemByKey = _.find(this.datasetItems, item => {
+                const itemByKey = 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 toString(item.key) === toString(key);
                 });
                 if (itemByKey) {
                     itemByKey.selected = true;
@@ -620,10 +646,10 @@ class DatasetAwareFormComponent extends BaseFormCustomComponent {
         }
         else {
             this._modelByValue = '';
-            const itemByKey = _.find(this.datasetItems, item => {
+            const itemByKey = 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 toString(item.key) === toString(keys);
             });
             if (itemByKey) {
                 itemByKey.selected = true;
@@ -642,14 +668,14 @@ class DatasetAwareFormComponent extends BaseFormCustomComponent {
     selectByValue(values) {
         this.resetDatasetItems();
         // if datavalue is not defined or empty then set the model as undefined.
-        if (!isDefined(values) || values === '' || _.isNull(values) || (values instanceof Array && !values.length)) {
+        if (!isDefined(values) || values === '' || isNull(values) || (values instanceof Array && !values.length)) {
             this._modelByKey = undefined;
             // do not return when allowempty is set to true.
             if (!this.allowempty || !isDefined(values)) {
                 return;
             }
         }
-        if (this.acceptsArray && !_.isArray(values)) {
+        if (this.acceptsArray && !isArray(values)) {
             values = this.allowempty ? [values] : extractDataAsArray(values);
         }
         // preserve the datavalue if datasetItems are empty.
@@ -658,16 +684,16 @@ class DatasetAwareFormComponent extends BaseFormCustomComponent {
             return;
         }
         const filterField = this.datafield === ALLFIELDS ? 'dataObject' : 'key';
-        if (_.isArray(values)) {
+        if (isArray(values)) {
             this._modelByKey = [];
             values.forEach(val => {
-                const itemByValue = _.find(this.datasetItems, item => {
+                const itemByValue = find(this.datasetItems, item => {
                     if (filterField === 'dataObject') {
                         if (this.compareby && this.compareby.length) {
                             return isEqualWithFields(item[filterField], val, this.compareby);
                         }
                     }
-                    return (_.isObject(item.value) ? _.isEqual(item.value, val) : (_.toString(item.value)).toLowerCase() === (_.toString(val)).toLowerCase());
+                    return (isObject(item.value) ? isEqual(item.value, val) : (toString(item.value)).toLowerCase() === (toString(val)).toLowerCase());
                 });
                 if (itemByValue) {
                     itemByValue.selected = true;
@@ -677,13 +703,13 @@ class DatasetAwareFormComponent extends BaseFormCustomComponent {
         }
         else {
             this._modelByKey = undefined;
-            const itemByValue = _.find(this.datasetItems, item => {
+            const itemByValue = find(this.datasetItems, item => {
                 if (filterField === 'dataObject') {
                     if (this.compareby && this.compareby.length) {
                         return isEqualWithFields(item[filterField], values, this.compareby);
                     }
                 }
-                return (_.isObject(item.value) ? _.isEqual(item.value, values) : (_.toString(item.value)).toLowerCase() === (_.toString(values)).toLowerCase());
+                return (isObject(item.value) ? isEqual(item.value, values) : (toString(item.value)).toLowerCase() === (toString(values)).toLowerCase());
             });
             if (itemByValue) {
                 itemByValue.selected = true;
@@ -706,7 +732,7 @@ class DatasetAwareFormComponent extends BaseFormCustomComponent {
     }
     // This function parses the dataset and extracts the displayOptions from parsed dataset.
     initDatasetItems() {
-        if (!this.dataset || _.isEmpty(this.dataset)) {
+        if (!this.dataset || isEmpty(this.dataset)) {
             this.datasetItems = [];
             // notify the dataset listeners
             this.dataset$.next(this.datasetItems);
@@ -734,7 +760,7 @@ class DatasetAwareFormComponent extends BaseFormCustomComponent {
     postDatasetItemsInit() {
         if (this.datasetItems.length && !this._defaultQueryInvoked) {
             // use the latest of toBeProcessedDatavalue, datavalue
-            const _datavalue = _.isEmpty(this.toBeProcessedDatavalue) ? this.datavalue : this.toBeProcessedDatavalue;
+            const _datavalue = isEmpty(this.toBeProcessedDatavalue) ? this.datavalue : this.toBeProcessedDatavalue;
             this.selectByValue(_datavalue);
         }
         // notify the dataset listeners
@@ -804,18 +830,23 @@ class DatasetAwareFormComponent extends BaseFormCustomComponent {
             this.cancelLocaleChangeSubscription();
         }
     }
-    static { this.ɵfac = function DatasetAwareFormComponent_Factory(t) { return new (t || DatasetAwareFormComponent)(i0.ɵɵinject(i0.Injector), i0.ɵɵinject(WidgetConfig), i0.ɵɵinjectAttribute('groupby')); }; }
+    static { this.ɵfac = function DatasetAwareFormComponent_Factory(t) { return new (t || DatasetAwareFormComponent)(i0.ɵɵinject(i0.Injector), i0.ɵɵinject(WidgetConfig), i0.ɵɵinject('EXPLICIT_CONTEXT', 8), i0.ɵɵinjectAttribute('groupby')); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: DatasetAwareFormComponent, factory: DatasetAwareFormComponent.ɵfac }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DatasetAwareFormComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DatasetAwareFormComponent, [{
         type: Injectable
-    }], function () { return [{ type: i0.Injector }, { type: undefined, decorators: [{
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [WidgetConfig]
+            }] }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
             }] }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['groupby']
-            }] }]; }, null); })();
+            }] }], null); })();
 
 const checkboxsetProps = new Map([
     ['class', PROP_STRING],
@@ -851,60 +882,61 @@ const registerProps$b = () => {
 };
 
 const _c0$a = ["wmCheckboxset", ""];
-const _c1$9 = function (a0) { return { "disabled": a0 }; };
+const _c1$9 = (a0, a1) => ["checkbox", "app-checkbox", a0, a1];
+const _c2$6 = a0 => ({ "disabled": a0 });
+const _c3$1 = a0 => ({ "collapsible-content": a0 });
+const _c4$1 = (a0, a1) => ["checkbox", "app-checkbox", "group-list-item", a0, a1];
 function CheckboxsetComponent_ng_template_0_li_0_label_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "label", 8);
     i0.ɵɵelement(1, "input", 9)(2, "span", 10);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r9 = i0.ɵɵnextContext();
-    const item_r5 = ctx_r9.$implicit;
-    const i_r6 = ctx_r9.index;
-    const ctx_r7 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c1$9, ctx_r7.disabled || ctx_r7.readonly))("title", item_r5.label);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("name", "checkboxset_" + ctx_r7.widgetId)("tabindex", ctx_r7.tabindex)("disabled", ctx_r7.disabled || ctx_r7.readonly)("value", item_r5.key)("tabindex", ctx_r7.tabindex)("checked", item_r5.selected);
-    i0.ɵɵattribute("aria-label", item_r5.key)("aria-checked", item_r5.selected)("data-attr-index", i_r6);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("textContent", item_r5.label);
+    const ctx_r3 = i0.ɵɵnextContext();
+    const item_r2 = ctx_r3.$implicit;
+    const i_r5 = ctx_r3.index;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c2$6, ctx_r2.disabled || ctx_r2.readonly))("title", item_r2.label);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r2.key)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
+    i0.ɵɵattribute("aria-label", item_r2.key)("aria-checked", item_r2.selected)("data-attr-index", i_r5);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("textContent", item_r2.label);
 } }
 function CheckboxsetComponent_ng_template_0_li_0_label_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "label", 11);
     i0.ɵɵelement(1, "input", 9)(2, "span", 12);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r10 = i0.ɵɵnextContext();
-    const item_r5 = ctx_r10.$implicit;
-    const i_r6 = ctx_r10.index;
-    const ctx_r8 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c1$9, ctx_r8.disabled || ctx_r8.readonly));
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("name", "checkboxset_" + ctx_r8.widgetId)("tabindex", ctx_r8.tabindex)("disabled", ctx_r8.disabled || ctx_r8.readonly)("value", item_r5.key)("tabindex", ctx_r8.tabindex)("checked", item_r5.selected);
-    i0.ɵɵattribute("aria-label", item_r5.key)("aria-checked", item_r5.selected)("data-attr-index", i_r6);
+    const ctx_r3 = i0.ɵɵnextContext();
+    const item_r2 = ctx_r3.$implicit;
+    const i_r5 = ctx_r3.index;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c2$6, ctx_r2.disabled || ctx_r2.readonly));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r2.key)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
+    i0.ɵɵattribute("aria-label", item_r2.key)("aria-checked", item_r2.selected)("data-attr-index", i_r5);
 } }
-const _c2$3 = function (a2, a3) { return ["checkbox", "app-checkbox", a2, a3]; };
 function CheckboxsetComponent_ng_template_0_li_0_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
+    const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li", 5);
-    i0.ɵɵlistener("click", function CheckboxsetComponent_ng_template_0_li_0_Template_li_click_0_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r12); const item_r5 = restoredCtx.$implicit; const ctx_r11 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r11.onCheckboxLabelClick($event, item_r5.key)); });
-    i0.ɵɵtemplate(1, CheckboxsetComponent_ng_template_0_li_0_label_1_Template, 3, 14, "label", 6);
-    i0.ɵɵtemplate(2, CheckboxsetComponent_ng_template_0_li_0_label_2_Template, 3, 12, "label", 7);
+    i0.ɵɵlistener("click", function CheckboxsetComponent_ng_template_0_li_0_Template_li_click_0_listener($event) { const item_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCheckboxLabelClick($event, item_r2.key)); });
+    i0.ɵɵtemplate(1, CheckboxsetComponent_ng_template_0_li_0_label_1_Template, 3, 14, "label", 6)(2, CheckboxsetComponent_ng_template_0_li_0_label_2_Template, 3, 12, "label", 7);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r5 = ctx.$implicit;
-    const ctx_r4 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("active", item_r5.selected);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c2$3, ctx_r4.itemclass, ctx_r4.itemsPerRowClass))("wmItemTemplate", ctx_r4.content)("userComponentParams", item_r5);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", !ctx_r4.content);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r4.content);
+    const item_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("active", item_r2.selected);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c1$9, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r2.content);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.content);
 } }
 function CheckboxsetComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, CheckboxsetComponent_ng_template_0_li_0_Template, 3, 10, "li", 4);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngForOf", ctx_r0.datasetItems);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngForOf", ctx_r2.datasetItems);
 } }
 function CheckboxsetComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 13);
@@ -912,102 +944,98 @@ function CheckboxsetComponent_div_2_Template(rf, ctx) { if (rf & 1) {
 function CheckboxsetComponent_ng_template_3_li_0_i_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 23);
 } if (rf & 2) {
-    const ctx_r15 = i0.ɵɵnextContext(3);
-    i0.ɵɵpropertyInterpolate2("title", "", ctx_r15.appLocale.LABEL_COLLAPSE, "/", ctx_r15.appLocale.LABEL_EXPAND, "");
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵpropertyInterpolate2("title", "", ctx_r2.appLocale.LABEL_COLLAPSE, "/", ctx_r2.appLocale.LABEL_EXPAND, "");
 } }
 function CheckboxsetComponent_ng_template_3_li_0_span_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 24);
 } if (rf & 2) {
-    const groupObj_r14 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("textContent", groupObj_r14.data.length);
+    const groupObj_r7 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("textContent", groupObj_r7.data.length);
 } }
 function CheckboxsetComponent_ng_template_3_li_0_li_8_label_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "label", 8);
     i0.ɵɵelement(1, "input", 26)(2, "span", 10);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r23 = i0.ɵɵnextContext();
-    const item_r19 = ctx_r23.$implicit;
-    const i_r20 = ctx_r23.index;
-    const ctx_r21 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c1$9, ctx_r21.disabled || ctx_r21.readonly))("title", item_r19.label);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("name", "checkboxset_" + ctx_r21.widgetId)("tabindex", ctx_r21.tabindex)("disabled", ctx_r21.disabled || ctx_r21.readonly)("value", item_r19.key)("tabindex", ctx_r21.tabindex)("checked", item_r19.selected);
-    i0.ɵɵattribute("data-attr-index", i_r20);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("textContent", item_r19.label);
+    const ctx_r9 = i0.ɵɵnextContext();
+    const item_r9 = ctx_r9.$implicit;
+    const i_r11 = ctx_r9.index;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c2$6, ctx_r2.disabled || ctx_r2.readonly))("title", item_r9.label);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r9.key)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
+    i0.ɵɵattribute("data-attr-index", i_r11);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("textContent", item_r9.label);
 } }
 function CheckboxsetComponent_ng_template_3_li_0_li_8_label_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "label", 11);
     i0.ɵɵelement(1, "input", 26)(2, "span", 27);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r24 = i0.ɵɵnextContext();
-    const item_r19 = ctx_r24.$implicit;
-    const i_r20 = ctx_r24.index;
-    const ctx_r22 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c1$9, ctx_r22.disabled || ctx_r22.readonly));
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("name", "checkboxset_" + ctx_r22.widgetId)("tabindex", ctx_r22.tabindex)("disabled", ctx_r22.disabled || ctx_r22.readonly)("value", item_r19.key)("tabindex", ctx_r22.tabindex)("checked", item_r19.selected);
-    i0.ɵɵattribute("data-attr-index", i_r20);
+    const ctx_r9 = i0.ɵɵnextContext();
+    const item_r9 = ctx_r9.$implicit;
+    const i_r11 = ctx_r9.index;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c2$6, ctx_r2.disabled || ctx_r2.readonly));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r9.key)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
+    i0.ɵɵattribute("data-attr-index", i_r11);
 } }
-const _c3$1 = function (a3, a4) { return ["checkbox", "app-checkbox", "group-list-item", a3, a4]; };
 function CheckboxsetComponent_ng_template_3_li_0_li_8_Template(rf, ctx) { if (rf & 1) {
-    const _r26 = i0.ɵɵgetCurrentView();
+    const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li", 25);
-    i0.ɵɵlistener("click", function CheckboxsetComponent_ng_template_3_li_0_li_8_Template_li_click_0_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r26); const item_r19 = restoredCtx.$implicit; const ctx_r25 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r25.onCheckboxLabelClick($event, item_r19)); });
-    i0.ɵɵtemplate(1, CheckboxsetComponent_ng_template_3_li_0_li_8_label_1_Template, 3, 12, "label", 6);
-    i0.ɵɵtemplate(2, CheckboxsetComponent_ng_template_3_li_0_li_8_label_2_Template, 3, 10, "label", 7);
+    i0.ɵɵlistener("click", function CheckboxsetComponent_ng_template_3_li_0_li_8_Template_li_click_0_listener($event) { const item_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onCheckboxLabelClick($event, item_r9)); });
+    i0.ɵɵtemplate(1, CheckboxsetComponent_ng_template_3_li_0_li_8_label_1_Template, 3, 12, "label", 6)(2, CheckboxsetComponent_ng_template_3_li_0_li_8_label_2_Template, 3, 10, "label", 7);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r19 = ctx.$implicit;
-    const ctx_r17 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("active", item_r19.selected);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c3$1, ctx_r17.itemclass, ctx_r17.itemsPerRowClass))("wmItemTemplate", ctx_r17.content)("userComponentParams", item_r19);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", !ctx_r17.content);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r17.content);
+    const item_r9 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("active", item_r9.selected);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c4$1, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r9);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r2.content);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.content);
 } }
-const _c4$1 = function (a0) { return { "collapsible-content": a0 }; };
 function CheckboxsetComponent_ng_template_3_li_0_Template(rf, ctx) { if (rf & 1) {
-    const _r28 = i0.ɵɵgetCurrentView();
+    const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li", 15)(1, "ul", 16)(2, "li", 17);
-    i0.ɵɵlistener("click", function CheckboxsetComponent_ng_template_3_li_0_Template_li_click_2_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r27 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r27.handleHeaderClick($event)); });
+    i0.ɵɵlistener("click", function CheckboxsetComponent_ng_template_3_li_0_Template_li_click_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.handleHeaderClick($event)); });
     i0.ɵɵelementStart(3, "h4", 18);
     i0.ɵɵtext(4);
     i0.ɵɵelementStart(5, "div", 19);
-    i0.ɵɵtemplate(6, CheckboxsetComponent_ng_template_3_li_0_i_6_Template, 1, 2, "i", 20);
-    i0.ɵɵtemplate(7, CheckboxsetComponent_ng_template_3_li_0_span_7_Template, 1, 1, "span", 21);
+    i0.ɵɵtemplate(6, CheckboxsetComponent_ng_template_3_li_0_i_6_Template, 1, 3, "i", 20)(7, CheckboxsetComponent_ng_template_3_li_0_span_7_Template, 1, 1, "span", 21);
     i0.ɵɵelementEnd()()();
     i0.ɵɵtemplate(8, CheckboxsetComponent_ng_template_3_li_0_li_8_Template, 3, 10, "li", 22);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const groupObj_r14 = ctx.$implicit;
-    const ctx_r13 = i0.ɵɵnextContext(2);
+    const groupObj_r7 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("title", groupObj_r14.key)("ngClass", i0.ɵɵpureFunction1(6, _c4$1, ctx_r13.collapsible));
+    i0.ɵɵproperty("title", groupObj_r7.key)("ngClass", i0.ɵɵpureFunction1(6, _c3$1, ctx_r2.collapsible));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", groupObj_r14.key, " ");
+    i0.ɵɵtextInterpolate1("", groupObj_r7.key, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r13.collapsible);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r13.showcount);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", groupObj_r14.data);
+    i0.ɵɵproperty("ngIf", ctx_r2.collapsible);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.showcount);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", groupObj_r7.data);
 } }
 function CheckboxsetComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, CheckboxsetComponent_ng_template_3_li_0_Template, 9, 8, "li", 14);
 } if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngForOf", ctx_r3.groupedData);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngForOf", ctx_r2.groupedData);
 } }
 const DEFAULT_CLS$3 = 'app-checkboxset list-group inline';
 const WIDGET_CONFIG$b = { widgetType: 'wm-checkboxset', hostClass: DEFAULT_CLS$3 };
 class CheckboxsetComponent extends DatasetAwareFormComponent {
     static { this.initializeProps = registerProps$b(); }
-    constructor(inj) {
-        super(inj, WIDGET_CONFIG$b);
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG$b, explicitContext);
         this.layout = '';
         styler(this.nativeElement, this);
         this.multiple = true;
@@ -1019,7 +1047,8 @@ class CheckboxsetComponent extends DatasetAwareFormComponent {
         // construct the _model from the checked elements.
         const inputElements = this.nativeElement.querySelectorAll('input:checked');
         const keys = [];
-        _.forEach(inputElements, ($el) => {
+        forEach(inputElements, ($el) => {
+            // @ts-ignore
             keys.push($el.value);
         });
         this.modelByKey = keys;
@@ -1038,7 +1067,7 @@ class CheckboxsetComponent extends DatasetAwareFormComponent {
                 return callback();
             });
         }
-        else if (!_.includes(['change'], eventName)) {
+        else if (!includes(['change'], eventName)) {
             super.handleEvent(node, eventName, callback, locals);
         }
     }
@@ -1061,38 +1090,43 @@ class CheckboxsetComponent extends DatasetAwareFormComponent {
             super.onPropertyChange(key, nv, ov);
         }
     }
-    static { this.ɵfac = function CheckboxsetComponent_Factory(t) { return new (t || CheckboxsetComponent)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵfac = function CheckboxsetComponent_Factory(t) { return new (t || CheckboxsetComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CheckboxsetComponent, selectors: [["", "wmCheckboxset", ""]], hostBindings: function CheckboxsetComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown.enter", function CheckboxsetComponent_keydown_enter_HostBindingHandler($event) { return ctx.onKeyDown($event, "ENTER"); });
         } }, exportAs: ["wmCheckboxset"], features: [i0.ɵɵProvidersFeature([
                 provideAs(CheckboxsetComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(CheckboxsetComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(CheckboxsetComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$a, decls: 5, vars: 4, consts: [[3, "ngIf", "ngIfElse"], ["hidden", "", 1, "model-holder", 3, "disabled"], ["class", "readonly-wrapper", 4, "ngIf"], ["groupedListTemplate", ""], ["partialContainer", "", "role", "presentation", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], ["partialContainer", "", "role", "presentation", 3, "ngClass", "wmItemTemplate", "userComponentParams", "click"], ["class", "app-checkboxset-label", 3, "ngClass", "title", 4, "ngIf"], ["class", "app-checkboxset-label", 3, "ngClass", 4, "ngIf"], [1, "app-checkboxset-label", 3, "ngClass", "title"], ["type", "checkbox", 3, "name", "tabindex", "disabled", "value", "checked"], [1, "caption", 3, "textContent"], [1, "app-checkboxset-label", 3, "ngClass"], ["partial-container-target", "", 1, "caption", "customTemplate"], [1, "readonly-wrapper"], ["class", "app-list-item-group", "role", "presentation", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "app-list-item-group"], [1, "item-group"], [1, "list-group-header", 3, "title", "ngClass", "click"], [1, "group-title"], [1, "header-action"], ["class", "app-icon wi action wi-chevron-up", 3, "title", 4, "ngIf"], ["class", "label label-default", 3, "textContent", 4, "ngIf"], ["partialContainer", "", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], [1, "app-icon", "wi", "action", "wi-chevron-up", 3, "title"], [1, "label", "label-default", 3, "textContent"], ["partialContainer", "", 3, "ngClass", "wmItemTemplate", "userComponentParams", "click"], ["type", "checkbox", "aria-label", "checkbox group", 3, "name", "tabindex", "disabled", "value", "checked"], ["partial-container-target", "", 1, "caption"]], template: function CheckboxsetComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, CheckboxsetComponent_ng_template_0_Template, 1, 1, "ng-template", 0);
-            i0.ɵɵelement(1, "input", 1);
-            i0.ɵɵtemplate(2, CheckboxsetComponent_div_2_Template, 1, 0, "div", 2);
-            i0.ɵɵtemplate(3, CheckboxsetComponent_ng_template_3_Template, 1, 1, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$a, decls: 5, vars: 4, consts: [["groupedListTemplate", ""], [3, "ngIf", "ngIfElse"], ["hidden", "", 1, "model-holder", 3, "disabled"], ["class", "readonly-wrapper", 4, "ngIf"], ["partialContainer", "", "role", "presentation", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], ["partialContainer", "", "role", "presentation", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], ["class", "app-checkboxset-label", 3, "ngClass", "title", 4, "ngIf"], ["class", "app-checkboxset-label", 3, "ngClass", 4, "ngIf"], [1, "app-checkboxset-label", 3, "ngClass", "title"], ["type", "checkbox", 3, "name", "tabindex", "disabled", "value", "checked"], [1, "caption", 3, "textContent"], [1, "app-checkboxset-label", 3, "ngClass"], ["partial-container-target", "", 1, "caption", "customTemplate"], [1, "readonly-wrapper"], ["class", "app-list-item-group", "role", "presentation", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "app-list-item-group"], [1, "item-group"], [1, "list-group-header", 3, "click", "title", "ngClass"], [1, "group-title"], [1, "header-action"], ["class", "app-icon wi action wi-chevron-up", 3, "title", 4, "ngIf"], ["class", "label label-default", 3, "textContent", 4, "ngIf"], ["partialContainer", "", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], [1, "app-icon", "wi", "action", "wi-chevron-up", 3, "title"], [1, "label", "label-default", 3, "textContent"], ["partialContainer", "", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], ["type", "checkbox", "aria-label", "checkbox group", 3, "name", "tabindex", "disabled", "value", "checked"], ["partial-container-target", "", 1, "caption"]], template: function CheckboxsetComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, CheckboxsetComponent_ng_template_0_Template, 1, 1, "ng-template", 1);
+            i0.ɵɵelement(1, "input", 2);
+            i0.ɵɵtemplate(2, CheckboxsetComponent_div_2_Template, 1, 0, "div", 3)(3, CheckboxsetComponent_ng_template_3_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
-            const _r2 = i0.ɵɵreference(4);
-            i0.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", _r2);
-            i0.ɵɵadvance(1);
+            const groupedListTemplate_r12 = i0.ɵɵreference(4);
+            i0.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", groupedListTemplate_r12);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("disabled", ctx.disabled || ctx.readonly);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.readonly || ctx.disabled);
         } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.ItemTemplateDirective, i2.PartialParamHandlerDirective, i2.PartialContainerDirective, i2.TextContentDirective], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckboxsetComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckboxsetComponent, [{
         type: Component,
         args: [{ selector: '[wmCheckboxset]', exportAs: 'wmCheckboxset', providers: [
                     provideAs(CheckboxsetComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(CheckboxsetComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(CheckboxsetComponent)
                 ], template: "<ng-template [ngIf]=\"!groupby\" [ngIfElse]=\"groupedListTemplate\">\n    <li [ngClass]=\"['checkbox', 'app-checkbox', itemclass, itemsPerRowClass]\"\n        [class.active]=\"item.selected\"\n        *ngFor=\"let item of datasetItems; let i = index\"\n        [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n        (click)=\"onCheckboxLabelClick($event, item.key)\" role=\"presentation\">\n        <!-- Default item template -->\n        <label *ngIf=\"!content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" [title]=\"item.label\">\n            <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\" [attr.aria-label]=\"item.key\"\n                   [tabindex]=\"tabindex\" [attr.aria-checked]=\"item.selected\"\n                   [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                   [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n            <span class=\"caption\" [textContent]=\"item.label\"></span>\n        </label>\n        <!-- Custom partial template -->\n        <label *ngIf=\"content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" >\n            <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\" [attr.aria-label]=\"item.key\"\n                   [tabindex]=\"tabindex\" [attr.aria-checked]=\"item.selected\"\n                   [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                   [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n            <span class=\"caption customTemplate\" partial-container-target></span>\n        </label>\n    </li>\n</ng-template>\n<input [disabled]=\"disabled || readonly\" hidden class=\"model-holder\">\n<div *ngIf=\"readonly || disabled\" class=\"readonly-wrapper\"></div>\n\n<!-- This template will be displayed when groupby is specified. -->\n<ng-template #groupedListTemplate>\n    <li *ngFor=\"let groupObj of groupedData\" class=\"app-list-item-group\" role=\"presentation\">\n        <ul class=\"item-group\">\n            <li class=\"list-group-header\" (click)=\"handleHeaderClick($event)\" [title]=\"groupObj.key\" [ngClass]=\"{'collapsible-content': collapsible}\">\n                <h4 class=\"group-title\">{{groupObj.key}}\n                    <div class=\"header-action\">\n                        <i class=\"app-icon wi action wi-chevron-up\" *ngIf=\"collapsible\" title=\"{{appLocale.LABEL_COLLAPSE}}/{{appLocale.LABEL_EXPAND}}\"></i>\n                        <span *ngIf=\"showcount\" class=\"label label-default\" [textContent]=\"groupObj.data.length\"></span>\n                    </div>\n                </h4>\n            </li>\n            <li *ngFor=\"let item of groupObj.data; let i = index;\"\n                [ngClass]=\"['checkbox', 'app-checkbox', 'group-list-item', itemclass, itemsPerRowClass]\"\n                [class.active]=\"item.selected\"\n                [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n                (click)=\"onCheckboxLabelClick($event, item)\">\n                <!-- Default item template -->\n                <label *ngIf=\"!content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" [title]=\"item.label\">\n                    <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\" aria-label=\"checkbox group\"\n                           [tabindex]=\"tabindex\"\n                           [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                           [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption\" [textContent]=\"item.label\"></span>\n                </label>\n                <!-- Custom partial template -->\n                <label *ngIf=\"content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" >\n                    <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\" aria-label=\"checkbox group\"\n                           [tabindex]=\"tabindex\"\n                           [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                           [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption\" partial-container-target></span>\n                </label>\n            </li>\n        </ul>\n    </li>\n</ng-template>\n" }]
-    }], function () { return [{ type: i0.Injector }]; }, { onKeyDown: [{
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { onKeyDown: [{
             type: HostListener,
             args: ['keydown.enter', ['$event', '"ENTER"']]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CheckboxsetComponent, { className: "CheckboxsetComponent", filePath: "checkboxset/checkboxset.component.ts", lineNumber: 27 }); })();
 
 const registerProps$a = () => {
     register('wm-form-group', new Map([
@@ -1116,8 +1150,8 @@ const CAPTION_POSITION = {
 };
 class CompositeDirective extends StylableComponent {
     static { this.initializeProps = registerProps$a(); }
-    constructor(inj) {
-        super(inj, WIDGET_CONFIG$a);
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG$a, explicitContext);
         styler(this.nativeElement, this, APPLY_STYLES_TYPE.CONTAINER);
     }
     /**
@@ -1153,7 +1187,7 @@ class CompositeDirective extends StylableComponent {
         addForIdAttributes(this.nativeElement);
         this.assignRequiredToSubComponents();
     }
-    static { this.ɵfac = function CompositeDirective_Factory(t) { return new (t || CompositeDirective)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵfac = function CompositeDirective_Factory(t) { return new (t || CompositeDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: CompositeDirective, selectors: [["div", "wmComposite", ""]], contentQueries: function CompositeDirective_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuery(dirIndex, WidgetRef, 5);
         } if (rf & 2) {
@@ -1163,7 +1197,7 @@ class CompositeDirective extends StylableComponent {
                 provideAsWidgetRef(CompositeDirective)
             ]), i0.ɵɵInheritDefinitionFeature] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CompositeDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CompositeDirective, [{
         type: Directive,
         args: [{
                 selector: 'div[wmComposite]',
@@ -1171,7 +1205,12 @@ class CompositeDirective extends StylableComponent {
                     provideAsWidgetRef(CompositeDirective)
                 ]
             }]
-    }], function () { return [{ type: i0.Injector }]; }, { componentRefs: [{
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { componentRefs: [{
             type: ContentChildren,
             args: [WidgetRef, { descendants: true }]
         }] }); })();
@@ -1233,7 +1272,7 @@ class BaseInput extends BaseFormCustomComponent {
     }
     // invoke the change callback
     handleChange(newValue) {
-        if (this.autotrim && this.datavalue && _.isString(this.datavalue)) {
+        if (this.autotrim && this.datavalue && isString(this.datavalue)) {
             this.datavalue = this.datavalue.trim();
         }
         this.invokeOnChange(this.datavalue, { type: 'change' }, this.ngModel.valid);
@@ -1251,7 +1290,7 @@ class BaseInput extends BaseFormCustomComponent {
     // 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 = get(this.imask, 'maskRef.unmaskedValue');
         val = unMaskedVal ? unMaskedVal : val;
         this.ngModel.update.next(val);
         $appDigest();
@@ -1264,30 +1303,36 @@ class BaseInput extends BaseFormCustomComponent {
         }
         styler(this.inputEl.nativeElement, this);
     }
-    constructor(inj, config) {
-        super(inj, config);
+    constructor(inj, config, explicitContext) {
+        super(inj, config, explicitContext);
         // possible values for ngModelOptions are 'blur' and 'change'
         // default is 'blur'
         this.ngModelOptions = {
-            updateOn: ''
+            updateOn: '',
+            standalone: true
         };
         let updateOn = this.nativeElement.getAttribute('updateon') || 'blur';
         updateOn = updateOn === 'default' ? 'change' : updateOn;
         this.ngModelOptions.updateOn = updateOn;
     }
-    static { this.ɵfac = function BaseInput_Factory(t) { return new (t || BaseInput)(i0.ɵɵinject(i0.Injector), i0.ɵɵinject(WidgetConfig)); }; }
+    static { this.ɵfac = function BaseInput_Factory(t) { return new (t || BaseInput)(i0.ɵɵinject(i0.Injector), i0.ɵɵinject(WidgetConfig), i0.ɵɵinject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: BaseInput, factory: BaseInput.ɵfac }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseInput, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseInput, [{
         type: Injectable
-    }], function () { return [{ type: i0.Injector }, { type: undefined, decorators: [{
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [WidgetConfig]
-            }] }]; }, null); })();
+            }] }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], null); })();
 
-class NumberLocale extends BaseInput {
-    constructor(inj, config, i18nService, trailingZeroDecimalPipe) {
-        super(inj, config);
+let NumberLocale = class NumberLocale extends BaseInput {
+    constructor(inj, config, i18nService, trailingZeroDecimalPipe, explicitContext) {
+        super(inj, config, explicitContext);
         this.i18nService = i18nService;
         this.trailingZeroDecimalPipe = trailingZeroDecimalPipe;
         this.isDefaultQuery = true;
@@ -1303,7 +1348,8 @@ class NumberLocale extends BaseInput {
     set datavalue(value) {
         this.lastValIsDecimal = false;
         // set text value to null if data value is empty.
-        if (_.includes([null, undefined, ''], value)) {
+        // @ts-ignore
+        if (includes([null, undefined, ''], value)) {
             const input = this.inputEl.nativeElement;
             const prevDataValue = this.prevDatavalue;
             this.displayValue = input.value = this.proxyModel = null;
@@ -1316,8 +1362,8 @@ class NumberLocale extends BaseInput {
         }
         // 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 = isString(value) && includes(value, this.DECIMAL);
+            const parts = isLocalizedNumber ? value.split(this.DECIMAL) : isString(value) && value.split('.');
             this.decimalValue = parts[1] || '';
             value = isLocalizedNumber ? value : this.transformNumber(value);
         }
@@ -1332,7 +1378,7 @@ class NumberLocale extends BaseInput {
             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.
@@ -1368,7 +1414,7 @@ class NumberLocale extends BaseInput {
      */
     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;
@@ -1386,11 +1432,11 @@ class NumberLocale extends BaseInput {
      * @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;
         }
@@ -1519,7 +1565,7 @@ class NumberLocale extends BaseInput {
             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));
@@ -1579,7 +1625,7 @@ class NumberLocale extends BaseInput {
         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 {
@@ -1590,14 +1636,14 @@ class NumberLocale extends BaseInput {
         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 (isUndefined(proxyModel) || isNull(proxyModel)) {
                 proxyModel = value = this.getValueInRange((this.minvalue || 0));
                 this.resetValidations();
             }
@@ -1608,7 +1654,7 @@ class NumberLocale extends BaseInput {
         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 = round(value, decimalRoundValue);
             this.updateDisplayText();
             this.handleChange(this.proxyModel);
         }
@@ -1643,7 +1689,7 @@ class NumberLocale extends BaseInput {
     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 || includes(['Backspace', 'ArrowRight', 'ArrowLeft', 'Tab', 'Enter', 'Delete'], $event.key)) {
             return;
         }
         const validity = new RegExp(`^[\\d\\s-,.e+${this.GROUP}${this.DECIMAL}]$`, 'i');
@@ -1674,18 +1720,18 @@ class NumberLocale extends BaseInput {
             return false;
         }
         // comma cannot be entered consecutively
-        if (_.includes(inputValue, ',') && inputValue[inputValue.length - 1] === ',' && $event.key === ',') {
+        if (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 (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 (intersection(toArray(inputValue), ['e', 'E']).length && includes('eE', $event.key)) {
             return false;
         }
-        if ((_.includes(inputValue, '+') || _.includes(inputValue, '-')) && ($event.key === '+' || $event.key === '-')) {
+        if ((includes(inputValue, '+') || includes(inputValue, '-')) && ($event.key === '+' || $event.key === '-')) {
             return false;
         }
         // Do not allow user to enter only space without any input value
@@ -1720,7 +1766,13 @@ class NumberLocale extends BaseInput {
             super.onPropertyChange(key, nv, ov);
         }
     }
-}
+};
+NumberLocale = __decorate([
+    __param(4, Inject('EXPLICIT_CONTEXT')),
+    __param(4, Optional()),
+    __metadata("design:paramtypes", [Injector, Object, AbstractI18nService,
+        TrailingZeroDecimalPipe, Object])
+], NumberLocale);
 
 const _c0$9 = ["input"];
 const _c1$8 = ["wmNumber", ""];
@@ -1730,10 +1782,10 @@ const WIDGET_CONFIG$9 = {
 };
 class NumberComponent extends NumberLocale {
     static { this.initializeProps = registerProps$9(); }
-    constructor(inj, i18nService, trailingZeroDecimalPipe) {
-        super(inj, WIDGET_CONFIG$9, i18nService, trailingZeroDecimalPipe);
+    constructor(inj, i18nService, trailingZeroDecimalPipe, explicitContext) {
+        super(inj, WIDGET_CONFIG$9, i18nService, trailingZeroDecimalPipe, explicitContext);
     }
-    static { this.ɵfac = function NumberComponent_Factory(t) { return new (t || NumberComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1$1.AbstractI18nService), i0.ɵɵdirectiveInject(i2.TrailingZeroDecimalPipe)); }; }
+    static { this.ɵfac = function NumberComponent_Factory(t) { return new (t || NumberComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1$1.AbstractI18nService), i0.ɵɵdirectiveInject(i2.TrailingZeroDecimalPipe), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NumberComponent, selectors: [["", "wmNumber", ""]], viewQuery: function NumberComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$9, 7);
             i0.ɵɵviewQuery(NgModel, 7);
@@ -1745,29 +1797,36 @@ class NumberComponent extends NumberLocale {
                 provideAs(NumberComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(NumberComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(NumberComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$8, decls: 2, vars: 14, consts: [["inputmode", "decimal", "focus-target", "", "role", "textbox", "type", "text", 1, "form-control", "app-textbox", "app-number-input", 3, "ngModel", "readonly", "disabled", "pattern", "autofocus", "ngClass", "ngStyle", "ngModelOptions", "required", "ngModelChange", "blur", "focus", "input", "keypress", "keydown.backspace", "keydown.enter", "keydown.ArrowUp", "keydown.ArrowDown"], ["input", ""]], template: function NumberComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "input", 0, 1);
-            i0.ɵɵlistener("ngModelChange", function NumberComponent_Template_input_ngModelChange_0_listener($event) { return ctx.onModelChange($event); })("blur", function NumberComponent_Template_input_blur_0_listener($event) { ctx.handleBlur($event); return ctx.checkForTrailingZeros($event); })("focus", function NumberComponent_Template_input_focus_0_listener($event) { return ctx.checkForTrailingZeros($event); })("input", function NumberComponent_Template_input_input_0_listener($event) { return ctx.onInputChange($event.target.value); })("keypress", function NumberComponent_Template_input_keypress_0_listener($event) { return ctx.validateInputEntry($event); })("keydown.backspace", function NumberComponent_Template_input_keydown_backspace_0_listener($event) { return ctx.onBackspace($event); })("keydown.enter", function NumberComponent_Template_input_keydown_enter_0_listener($event) { return ctx.onEnter($event); })("keydown.ArrowUp", function NumberComponent_Template_input_keydown_ArrowUp_0_listener($event) { return ctx.onArrowPress($event, "UP"); })("keydown.ArrowDown", function NumberComponent_Template_input_keydown_ArrowDown_0_listener($event) { return ctx.onArrowPress($event, "DOWN"); });
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$8, decls: 2, vars: 14, consts: [["input", ""], ["inputmode", "decimal", "focus-target", "", "role", "textbox", "type", "text", 1, "form-control", "app-textbox", "app-number-input", 3, "ngModelChange", "blur", "focus", "input", "keypress", "keydown.backspace", "keydown.enter", "keydown.ArrowUp", "keydown.ArrowDown", "ngModel", "readonly", "disabled", "pattern", "autofocus", "ngClass", "ngStyle", "ngModelOptions", "required"]], template: function NumberComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "input", 1, 0);
+            i0.ɵɵlistener("ngModelChange", function NumberComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onModelChange($event)); })("blur", function NumberComponent_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); ctx.handleBlur($event); return i0.ɵɵresetView(ctx.checkForTrailingZeros($event)); })("focus", function NumberComponent_Template_input_focus_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.checkForTrailingZeros($event)); })("input", function NumberComponent_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInputChange($event.target.value)); })("keypress", function NumberComponent_Template_input_keypress_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.validateInputEntry($event)); })("keydown.backspace", function NumberComponent_Template_input_keydown_backspace_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBackspace($event)); })("keydown.enter", function NumberComponent_Template_input_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onEnter($event)); })("keydown.ArrowUp", function NumberComponent_Template_input_keydown_ArrowUp_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onArrowPress($event, "UP")); })("keydown.ArrowDown", function NumberComponent_Template_input_keydown_ArrowDown_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onArrowPress($event, "DOWN")); });
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵproperty("ngModel", ctx.displayValue)("readonly", ctx.readonly)("disabled", ctx.disabled)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("ngModelOptions", ctx.ngModelOptions)("required", ctx.required);
             i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
         } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.PatternValidator, i2$1.NgModel], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NumberComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NumberComponent, [{
         type: Component,
         args: [{ selector: '[wmNumber]', providers: [
                     provideAs(NumberComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(NumberComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(NumberComponent)
                 ], template: "<input class=\"form-control app-textbox app-number-input\"\n       inputmode=\"decimal\"\n       focus-target\n       [attr.name]=\"name\"\n       role=\"textbox\"\n       type=\"text\"\n       [ngModel]=\"displayValue\"\n       [readonly]=\"readonly\"\n       [disabled]=\"disabled\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (ngModelChange)=\"onModelChange($event)\"\n       (blur)=\"handleBlur($event); checkForTrailingZeros($event);\"\n       (focus)=\"checkForTrailingZeros($event)\"\n       (input)=\"onInputChange($event.target.value)\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [required]=\"required\"\n       (keypress)=\"validateInputEntry($event)\"\n       (keydown.backspace)=\"onBackspace($event)\"\n       (keydown.enter)=\"onEnter($event)\"\n       (keydown.ArrowUp)=\"onArrowPress($event, 'UP')\"\n       (keydown.ArrowDown)=\"onArrowPress($event, 'DOWN')\"\n       #input>\n" }]
-    }], function () { return [{ type: i0.Injector }, { type: i1$1.AbstractI18nService }, { type: i2.TrailingZeroDecimalPipe }]; }, { inputEl: [{
+    }], () => [{ type: i0.Injector }, { type: i1$1.AbstractI18nService }, { type: i2.TrailingZeroDecimalPipe }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { inputEl: [{
             type: ViewChild,
             args: ['input', { static: true }]
         }], ngModel: [{
             type: ViewChild,
             args: [NgModel, { static: true }]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NumberComponent, { className: "NumberComponent", filePath: "number/number.component.ts", lineNumber: 24 }); })();
 
 const radiosetProps = new Map([
     ['class', PROP_STRING],
@@ -1803,60 +1862,61 @@ const registerProps$8 = () => {
 };
 
 const _c0$8 = ["wmRadioset", ""];
-const _c1$7 = function (a0) { return { "disabled": a0 }; };
+const _c1$7 = (a0, a1) => ["radio", "app-radio", a0, a1];
+const _c2$5 = a0 => ({ "disabled": a0 });
+const _c3 = a0 => ({ "collapsible-content": a0 });
+const _c4 = (a0, a1) => ["radio", "app-radio", "group-list-item", a0, a1];
 function RadiosetComponent_ng_template_0_li_0_label_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "label", 7);
     i0.ɵɵelement(1, "input", 8)(2, "span", 9);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r9 = i0.ɵɵnextContext();
-    const item_r5 = ctx_r9.$implicit;
-    const i_r6 = ctx_r9.index;
-    const ctx_r7 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c1$7, ctx_r7.disabled || ctx_r7.readonly));
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("name", "radioset_" + ctx_r7.widgetId)("value", item_r5.key)("disabled", ctx_r7.disabled || ctx_r7.readonly)("tabindex", ctx_r7.tabindex)("checked", item_r5.selected);
-    i0.ɵɵattribute("aria-checked", item_r5.selected)("data-attr-index", i_r6)("aria-label", item_r5.key);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("textContent", item_r5.label);
+    const ctx_r3 = i0.ɵɵnextContext();
+    const item_r2 = ctx_r3.$implicit;
+    const i_r5 = ctx_r3.index;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r2.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
+    i0.ɵɵattribute("aria-checked", item_r2.selected)("data-attr-index", i_r5)("aria-label", item_r2.key);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("textContent", item_r2.label);
 } }
 function RadiosetComponent_ng_template_0_li_0_label_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "label", 7);
     i0.ɵɵelement(1, "input", 8)(2, "span", 10);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r10 = i0.ɵɵnextContext();
-    const item_r5 = ctx_r10.$implicit;
-    const i_r6 = ctx_r10.index;
-    const ctx_r8 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c1$7, ctx_r8.disabled || ctx_r8.readonly));
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("name", "radioset_" + ctx_r8.widgetId)("value", item_r5.key)("disabled", ctx_r8.disabled || ctx_r8.readonly)("tabindex", ctx_r8.tabindex)("checked", item_r5.selected);
-    i0.ɵɵattribute("aria-checked", item_r5.selected)("data-attr-index", i_r6)("aria-label", item_r5.key);
+    const ctx_r3 = i0.ɵɵnextContext();
+    const item_r2 = ctx_r3.$implicit;
+    const i_r5 = ctx_r3.index;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r2.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
+    i0.ɵɵattribute("aria-checked", item_r2.selected)("data-attr-index", i_r5)("aria-label", item_r2.key);
 } }
-const _c2$2 = function (a2, a3) { return ["radio", "app-radio", a2, a3]; };
 function RadiosetComponent_ng_template_0_li_0_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
+    const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li", 5);
-    i0.ɵɵlistener("click", function RadiosetComponent_ng_template_0_li_0_Template_li_click_0_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r12); const item_r5 = restoredCtx.$implicit; const ctx_r11 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r11.onRadioLabelClick($event, item_r5.key)); });
-    i0.ɵɵtemplate(1, RadiosetComponent_ng_template_0_li_0_label_1_Template, 3, 12, "label", 6);
-    i0.ɵɵtemplate(2, RadiosetComponent_ng_template_0_li_0_label_2_Template, 3, 11, "label", 6);
+    i0.ɵɵlistener("click", function RadiosetComponent_ng_template_0_li_0_Template_li_click_0_listener($event) { const item_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onRadioLabelClick($event, item_r2.key)); });
+    i0.ɵɵtemplate(1, RadiosetComponent_ng_template_0_li_0_label_1_Template, 3, 12, "label", 6)(2, RadiosetComponent_ng_template_0_li_0_label_2_Template, 3, 11, "label", 6);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r5 = ctx.$implicit;
-    const ctx_r4 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("active", item_r5.selected);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c2$2, ctx_r4.itemclass, ctx_r4.itemsPerRowClass))("wmItemTemplate", ctx_r4.content)("userComponentParams", item_r5);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", !ctx_r4.content);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r4.content);
+    const item_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("active", item_r2.selected);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c1$7, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r2.content);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.content);
 } }
 function RadiosetComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, RadiosetComponent_ng_template_0_li_0_Template, 3, 10, "li", 4);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngForOf", ctx_r0.datasetItems);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngForOf", ctx_r2.datasetItems);
 } }
 function RadiosetComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 11);
@@ -1864,102 +1924,98 @@ function RadiosetComponent_div_2_Template(rf, ctx) { if (rf & 1) {
 function RadiosetComponent_ng_template_3_li_0_i_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 21);
 } if (rf & 2) {
-    const ctx_r15 = i0.ɵɵnextContext(3);
-    i0.ɵɵpropertyInterpolate2("title", "", ctx_r15.appLocale.LABEL_COLLAPSE, "/", ctx_r15.appLocale.LABEL_EXPAND, "");
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵpropertyInterpolate2("title", "", ctx_r2.appLocale.LABEL_COLLAPSE, "/", ctx_r2.appLocale.LABEL_EXPAND, "");
 } }
 function RadiosetComponent_ng_template_3_li_0_span_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 22);
 } if (rf & 2) {
-    const groupObj_r14 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("textContent", groupObj_r14.data.length);
+    const groupObj_r7 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("textContent", groupObj_r7.data.length);
 } }
 function RadiosetComponent_ng_template_3_li_0_li_8_label_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "label", 7);
     i0.ɵɵelement(1, "input", 8)(2, "span", 9);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r23 = i0.ɵɵnextContext();
-    const item_r19 = ctx_r23.$implicit;
-    const i_r20 = ctx_r23.index;
-    const ctx_r21 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c1$7, ctx_r21.disabled || ctx_r21.readonly));
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("name", "radioset_" + ctx_r21.widgetId)("value", item_r19.key)("disabled", ctx_r21.disabled || ctx_r21.readonly)("tabindex", ctx_r21.tabindex)("checked", item_r19.selected);
-    i0.ɵɵattribute("aria-checked", item_r19.selected)("data-attr-index", i_r20);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("textContent", item_r19.label);
+    const ctx_r9 = i0.ɵɵnextContext();
+    const item_r9 = ctx_r9.$implicit;
+    const i_r11 = ctx_r9.index;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r9.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
+    i0.ɵɵattribute("aria-checked", item_r9.selected)("data-attr-index", i_r11);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("textContent", item_r9.label);
 } }
 function RadiosetComponent_ng_template_3_li_0_li_8_label_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "label", 7);
     i0.ɵɵelement(1, "input", 8)(2, "span", 10);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r24 = i0.ɵɵnextContext();
-    const item_r19 = ctx_r24.$implicit;
-    const i_r20 = ctx_r24.index;
-    const ctx_r22 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c1$7, ctx_r22.disabled || ctx_r22.readonly));
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("name", "radioset_" + ctx_r22.widgetId)("value", item_r19.key)("disabled", ctx_r22.disabled || ctx_r22.readonly)("tabindex", ctx_r22.tabindex)("checked", item_r19.selected);
-    i0.ɵɵattribute("aria-checked", item_r19.selected)("data-attr-index", i_r20);
+    const ctx_r9 = i0.ɵɵnextContext();
+    const item_r9 = ctx_r9.$implicit;
+    const i_r11 = ctx_r9.index;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r9.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
+    i0.ɵɵattribute("aria-checked", item_r9.selected)("data-attr-index", i_r11);
 } }
-const _c3 = function (a3, a4) { return ["radio", "app-radio", "group-list-item", a3, a4]; };
 function RadiosetComponent_ng_template_3_li_0_li_8_Template(rf, ctx) { if (rf & 1) {
-    const _r26 = i0.ɵɵgetCurrentView();
+    const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li", 23);
-    i0.ɵɵlistener("click", function RadiosetComponent_ng_template_3_li_0_li_8_Template_li_click_0_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r26); const item_r19 = restoredCtx.$implicit; const ctx_r25 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r25.onRadioLabelClick($event, item_r19)); });
-    i0.ɵɵtemplate(1, RadiosetComponent_ng_template_3_li_0_li_8_label_1_Template, 3, 11, "label", 6);
-    i0.ɵɵtemplate(2, RadiosetComponent_ng_template_3_li_0_li_8_label_2_Template, 3, 10, "label", 6);
+    i0.ɵɵlistener("click", function RadiosetComponent_ng_template_3_li_0_li_8_Template_li_click_0_listener($event) { const item_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onRadioLabelClick($event, item_r9)); });
+    i0.ɵɵtemplate(1, RadiosetComponent_ng_template_3_li_0_li_8_label_1_Template, 3, 11, "label", 6)(2, RadiosetComponent_ng_template_3_li_0_li_8_label_2_Template, 3, 10, "label", 6);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r19 = ctx.$implicit;
-    const ctx_r17 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("active", item_r19.selected);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c3, ctx_r17.itemclass, ctx_r17.itemsPerRowClass))("wmItemTemplate", ctx_r17.content)("userComponentParams", item_r19);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", !ctx_r17.content);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r17.content);
+    const item_r9 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("active", item_r9.selected);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c4, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r9);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r2.content);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.content);
 } }
-const _c4 = function (a0) { return { "collapsible-content": a0 }; };
 function RadiosetComponent_ng_template_3_li_0_Template(rf, ctx) { if (rf & 1) {
-    const _r28 = i0.ɵɵgetCurrentView();
+    const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li", 13)(1, "ul", 14)(2, "li", 15);
-    i0.ɵɵlistener("click", function RadiosetComponent_ng_template_3_li_0_Template_li_click_2_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r27 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r27.handleHeaderClick($event)); });
+    i0.ɵɵlistener("click", function RadiosetComponent_ng_template_3_li_0_Template_li_click_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.handleHeaderClick($event)); });
     i0.ɵɵelementStart(3, "h4", 16);
     i0.ɵɵtext(4);
     i0.ɵɵelementStart(5, "div", 17);
-    i0.ɵɵtemplate(6, RadiosetComponent_ng_template_3_li_0_i_6_Template, 1, 2, "i", 18);
-    i0.ɵɵtemplate(7, RadiosetComponent_ng_template_3_li_0_span_7_Template, 1, 1, "span", 19);
+    i0.ɵɵtemplate(6, RadiosetComponent_ng_template_3_li_0_i_6_Template, 1, 3, "i", 18)(7, RadiosetComponent_ng_template_3_li_0_span_7_Template, 1, 1, "span", 19);
     i0.ɵɵelementEnd()()();
     i0.ɵɵtemplate(8, RadiosetComponent_ng_template_3_li_0_li_8_Template, 3, 10, "li", 20);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const groupObj_r14 = ctx.$implicit;
-    const ctx_r13 = i0.ɵɵnextContext(2);
+    const groupObj_r7 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("title", groupObj_r14.key)("ngClass", i0.ɵɵpureFunction1(6, _c4, ctx_r13.collapsible));
+    i0.ɵɵproperty("title", groupObj_r7.key)("ngClass", i0.ɵɵpureFunction1(6, _c3, ctx_r2.collapsible));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", groupObj_r14.key, " ");
+    i0.ɵɵtextInterpolate1("", groupObj_r7.key, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r13.collapsible);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r13.showcount);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", groupObj_r14.data);
+    i0.ɵɵproperty("ngIf", ctx_r2.collapsible);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.showcount);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", groupObj_r7.data);
 } }
 function RadiosetComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, RadiosetComponent_ng_template_3_li_0_Template, 9, 8, "li", 12);
 } if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngForOf", ctx_r3.groupedData);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngForOf", ctx_r2.groupedData);
 } }
 const DEFAULT_CLS$1 = 'app-radioset list-group inline';
 const WIDGET_CONFIG$8 = { widgetType: 'wm-radioset', hostClass: DEFAULT_CLS$1 };
 class RadiosetComponent extends DatasetAwareFormComponent {
     static { this.initializeProps = registerProps$8(); }
-    constructor(inj) {
-        super(inj, WIDGET_CONFIG$8);
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG$8, explicitContext);
         this.layout = '';
         styler(this.nativeElement, this);
         this.multiple = false;
@@ -1987,7 +2043,7 @@ class RadiosetComponent extends DatasetAwareFormComponent {
                 return callback();
             });
         }
-        else if (!_.includes(['change'], eventName)) {
+        else if (!includes(['change'], eventName)) {
             super.handleEvent(node, eventName, callback, locals);
         }
     }
@@ -2002,33 +2058,38 @@ class RadiosetComponent extends DatasetAwareFormComponent {
             super.onPropertyChange(key, nv, ov);
         }
     }
-    static { this.ɵfac = function RadiosetComponent_Factory(t) { return new (t || RadiosetComponent)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵfac = function RadiosetComponent_Factory(t) { return new (t || RadiosetComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RadiosetComponent, selectors: [["", "wmRadioset", ""]], exportAs: ["wmRadioset"], features: [i0.ɵɵProvidersFeature([
                 provideAs(RadiosetComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(RadiosetComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(RadiosetComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$8, decls: 5, vars: 4, consts: [[3, "ngIf", "ngIfElse"], ["hidden", "", 1, "model-holder", 3, "disabled"], ["aria-readonly", "true", "class", "readonly-wrapper", 4, "ngIf"], ["groupedListTemplate", ""], ["partialContainer", "", "role", "presentation", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], ["partialContainer", "", "role", "presentation", 3, "ngClass", "wmItemTemplate", "userComponentParams", "click"], ["class", "app-radioset-label", 3, "ngClass", 4, "ngIf"], [1, "app-radioset-label", 3, "ngClass"], ["type", "radio", 3, "name", "value", "disabled", "tabindex", "checked"], [1, "caption", 3, "textContent"], ["partial-container-target", "", 1, "caption", "customTemplate"], ["aria-readonly", "true", 1, "readonly-wrapper"], ["class", "app-list-item-group", 4, "ngFor", "ngForOf"], [1, "app-list-item-group"], [1, "item-group"], [1, "list-group-header", 3, "title", "ngClass", "click"], [1, "group-title"], [1, "header-action"], ["class", "app-icon wi action wi-chevron-up", 3, "title", 4, "ngIf"], ["class", "label label-default", 3, "textContent", 4, "ngIf"], ["partialContainer", "", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], [1, "app-icon", "wi", "action", "wi-chevron-up", 3, "title"], [1, "label", "label-default", 3, "textContent"], ["partialContainer", "", 3, "ngClass", "wmItemTemplate", "userComponentParams", "click"]], template: function RadiosetComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, RadiosetComponent_ng_template_0_Template, 1, 1, "ng-template", 0);
-            i0.ɵɵelement(1, "input", 1);
-            i0.ɵɵtemplate(2, RadiosetComponent_div_2_Template, 1, 0, "div", 2);
-            i0.ɵɵtemplate(3, RadiosetComponent_ng_template_3_Template, 1, 1, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$8, decls: 5, vars: 4, consts: [["groupedListTemplate", ""], [3, "ngIf", "ngIfElse"], ["hidden", "", 1, "model-holder", 3, "disabled"], ["aria-readonly", "true", "class", "readonly-wrapper", 4, "ngIf"], ["partialContainer", "", "role", "presentation", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], ["partialContainer", "", "role", "presentation", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], ["class", "app-radioset-label", 3, "ngClass", 4, "ngIf"], [1, "app-radioset-label", 3, "ngClass"], ["type", "radio", 3, "name", "value", "disabled", "tabindex", "checked"], [1, "caption", 3, "textContent"], ["partial-container-target", "", 1, "caption", "customTemplate"], ["aria-readonly", "true", 1, "readonly-wrapper"], ["class", "app-list-item-group", 4, "ngFor", "ngForOf"], [1, "app-list-item-group"], [1, "item-group"], [1, "list-group-header", 3, "click", "title", "ngClass"], [1, "group-title"], [1, "header-action"], ["class", "app-icon wi action wi-chevron-up", 3, "title", 4, "ngIf"], ["class", "label label-default", 3, "textContent", 4, "ngIf"], ["partialContainer", "", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], [1, "app-icon", "wi", "action", "wi-chevron-up", 3, "title"], [1, "label", "label-default", 3, "textContent"], ["partialContainer", "", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"]], template: function RadiosetComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, RadiosetComponent_ng_template_0_Template, 1, 1, "ng-template", 1);
+            i0.ɵɵelement(1, "input", 2);
+            i0.ɵɵtemplate(2, RadiosetComponent_div_2_Template, 1, 0, "div", 3)(3, RadiosetComponent_ng_template_3_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
-            const _r2 = i0.ɵɵreference(4);
-            i0.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", _r2);
-            i0.ɵɵadvance(1);
+            const groupedListTemplate_r12 = i0.ɵɵreference(4);
+            i0.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", groupedListTemplate_r12);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("disabled", ctx.disabled || ctx.readonly);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.readonly || ctx.disabled);
         } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.ItemTemplateDirective, i2.PartialParamHandlerDirective, i2.PartialContainerDirective, i2.TextContentDirective], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RadiosetComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RadiosetComponent, [{
         type: Component,
         args: [{ selector: '[wmRadioset]', exportAs: 'wmRadioset', providers: [
                     provideAs(RadiosetComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(RadiosetComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(RadiosetComponent)
                 ], template: "<ng-template [ngIf]=\"!groupby\" [ngIfElse]=\"groupedListTemplate\">\n    <li [ngClass]=\"['radio', 'app-radio', itemclass, itemsPerRowClass]\"\n        [class.active]=\"item.selected\"\n        *ngFor=\"let item of datasetItems;let i = index\"\n        [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n        (click)=\"onRadioLabelClick($event, item.key)\" role=\"presentation\">\n        <!-- Default item template -->\n        <label *ngIf=\"!content\" class=\"app-radioset-label\"\n               [ngClass]=\"{'disabled':disabled || readonly}\">\n            <input [name]=\"'radioset_' + widgetId\" type=\"radio\" [attr.aria-checked]=\"item.selected\" [attr.data-attr-index]=\"i\"\n                   [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"\n                   [attr.aria-label]=\"item.key\"/>\n            <span class=\"caption\" [textContent]=\"item.label\"></span>\n        </label>\n        <!-- Custom partial template -->\n        <label *ngIf=\"content\" class=\"app-radioset-label\"\n               [ngClass]=\"{'disabled':disabled || readonly}\">\n            <input [name]=\"'radioset_' + widgetId\" type=\"radio\" [attr.aria-checked]=\"item.selected\" [attr.data-attr-index]=\"i\"\n                   [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"\n                   [attr.aria-label]=\"item.key\"/>\n            <span class=\"caption customTemplate\" partial-container-target></span>\n        </label>\n    </li>\n</ng-template>\n\n<input [disabled]=\"disabled || readonly\" hidden class=\"model-holder\">\n<div *ngIf=\"readonly || disabled\" aria-readonly=\"true\" class=\"readonly-wrapper\"></div>\n\n<!-- This template will be displayed when groupby is specified. -->\n<ng-template #groupedListTemplate>\n    <li *ngFor=\"let groupObj of groupedData\" class=\"app-list-item-group\">\n        <ul class=\"item-group\">\n            <li class=\"list-group-header\" (click)=\"handleHeaderClick($event)\" [title]=\"groupObj.key\" [ngClass]=\"{'collapsible-content': collapsible}\">\n                <h4 class=\"group-title\">{{groupObj.key}}\n                    <div class=\"header-action\">\n                        <i class=\"app-icon wi action wi-chevron-up\" *ngIf=\"collapsible\" title=\"{{appLocale.LABEL_COLLAPSE}}/{{appLocale.LABEL_EXPAND}}\"></i>\n                        <span *ngIf=\"showcount\" class=\"label label-default\" [textContent]=\"groupObj.data.length\"></span>\n                    </div>\n                </h4>\n            </li>\n            <li *ngFor=\"let item of groupObj.data; let i = index;\"\n                [ngClass]=\"['radio', 'app-radio', 'group-list-item', itemclass, itemsPerRowClass]\"\n                [class.active]=\"item.selected\"\n                [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n                (click)=\"onRadioLabelClick($event, item)\">\n                <!-- Default item template -->\n                <label *ngIf=\"!content\" class=\"app-radioset-label\"\n                       [ngClass]=\"{'disabled':disabled || readonly}\">\n                    <input [name]=\"'radioset_' + widgetId\" type=\"radio\" [attr.aria-checked]=\"item.selected\" [attr.data-attr-index]=\"i\"\n                           [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption\" [textContent]=\"item.label\"></span>\n                </label>\n                <!-- Custom partial template -->\n                <label *ngIf=\"content\" class=\"app-radioset-label\"\n                       [ngClass]=\"{'disabled':disabled || readonly}\">\n                    <input [name]=\"'radioset_' + widgetId\" type=\"radio\" [attr.aria-checked]=\"item.selected\" [attr.data-attr-index]=\"i\"\n                           [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption customTemplate\" partial-container-target></span>\n                </label>\n            </li>\n        </ul>\n    </li>\n</ng-template>\n" }]
-    }], function () { return [{ type: i0.Injector }]; }, null); })();
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RadiosetComponent, { className: "RadiosetComponent", filePath: "radioset/radioset.component.ts", lineNumber: 26 }); })();
 
 const selectProps = new Map([
     ['autofocus', PROP_BOOLEAN],
@@ -2064,53 +2125,48 @@ const registerProps$7 = () => {
 };
 
 const _c0$7 = ["select"];
-function SelectComponent_option_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "option", 4);
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("textContent", ctx_r1.placeholder)("hidden", !ctx_r1.placeholder);
-} }
+const _c1$6 = a0 => ["app-select form-control", a0];
+const _c2$4 = () => ({ standalone: true });
 function SelectComponent_ng_container_3_optgroup_1_option_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "option", 8);
+    i0.ɵɵelement(0, "option", 7);
 } if (rf & 2) {
-    const item_r7 = ctx.$implicit;
-    i0.ɵɵproperty("value", item_r7.key)("selected", item_r7.selected)("textContent", item_r7.label);
+    const item_r2 = ctx.$implicit;
+    i0.ɵɵ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.ɵɵelementStart(0, "optgroup", 6);
-    i0.ɵɵtemplate(1, SelectComponent_ng_container_3_optgroup_1_option_1_Template, 1, 3, "option", 7);
+    i0.ɵɵelementStart(0, "optgroup", 5);
+    i0.ɵɵtemplate(1, SelectComponent_ng_container_3_optgroup_1_option_1_Template, 1, 3, "option", 6);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const groupObj_r5 = ctx.$implicit;
-    i0.ɵɵproperty("label", groupObj_r5.key);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", groupObj_r5.data);
+    const groupObj_r3 = ctx.$implicit;
+    i0.ɵɵproperty("label", groupObj_r3.key);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", groupObj_r3.data);
 } }
 function SelectComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, SelectComponent_ng_container_3_optgroup_1_Template, 2, 2, "optgroup", 5);
+    i0.ɵɵtemplate(1, SelectComponent_ng_container_3_optgroup_1_Template, 2, 2, "optgroup", 4);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", ctx_r2.groupedData);
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r3.groupedData);
 } }
 function SelectComponent_ng_container_4_option_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "option", 8);
+    i0.ɵɵelement(0, "option", 7);
 } if (rf & 2) {
-    const item_r9 = ctx.$implicit;
-    i0.ɵɵproperty("value", item_r9.key)("selected", item_r9.selected)("textContent", item_r9.label);
+    const item_r5 = ctx.$implicit;
+    i0.ɵɵproperty("value", item_r5.key)("selected", item_r5.selected)("textContent", item_r5.label);
 } }
 function SelectComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, SelectComponent_ng_container_4_option_1_Template, 1, 3, "option", 7);
+    i0.ɵɵtemplate(1, SelectComponent_ng_container_4_option_1_Template, 1, 3, "option", 6);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngForOf", ctx_r3.datasetItems);
 } }
-const _c1$6 = function (a1) { return ["app-select form-control", a1]; };
 const WIDGET_CONFIG$7 = { widgetType: 'wm-select', hostClass: 'app-select-wrapper' };
 class SelectComponent extends DatasetAwareFormComponent {
     static { this.initializeProps = registerProps$7(); }
@@ -2119,21 +2175,32 @@ class SelectComponent extends DatasetAwareFormComponent {
             this.datavalue = ds.execute(DataSource.Operation.GET_DEFAULT_LOCALE);
         }
     }
-    constructor(inj, app) {
-        super(inj, WIDGET_CONFIG$7);
-        this.app = app;
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG$7, explicitContext);
         this.acceptsArray = true;
+        /*
+        * When the dataset for a select element is updated and no longer includes the previously selected value:
+        * The select element becomes empty, and the ngModel value is updated to reflect this change.
+        * However, the change event is not triggered, preventing the form control from recognizing the update and applying necessary validations.
+        * As this widget implements ControlValueAccessor, manually updating the ngModel (or modelByKey) is necessary to ensure correct form behavior.
+        * */
+        const datasetSubscription = this.dataset$.subscribe(() => {
+            if (this.datavalue !== undefined) {
+                const selectedItem = this.datasetItems.find(item => item.selected);
+                if (!selectedItem) {
+                    this.modelByKey = undefined;
+                }
+            }
+        });
+        this.registerDestroyListener(() => datasetSubscription.unsubscribe());
     }
     ngAfterViewInit() {
         super.ngAfterViewInit();
         styler(this.selectEl.nativeElement, this);
-        setTimeout(() => {
-            this.checkForFloatingLabel(null);
-        }, 10);
     }
     // Change event is registered from the template, Prevent the framework from registering one more event
     handleEvent(node, eventName, eventCallback, locals) {
-        if (!_.includes(['blur', 'change'], eventName)) {
+        if (!['blur', 'change'].includes(eventName)) {
             super.handleEvent(this.selectEl.nativeElement, eventName, eventCallback, locals);
         }
     }
@@ -2176,16 +2243,6 @@ class SelectComponent extends DatasetAwareFormComponent {
         }
         super.onPropertyChange(key, nv, ov);
     }
-    isSafariBrowser() {
-        var reg = {
-            MAC: /Mac/i,
-            MACINTEL: /MacIntel/i
-        };
-        return reg.MAC.test(window.navigator.platform) || reg.MACINTEL.test(window.navigator.platform);
-    }
-    isIosPlatform() {
-        return isIos() || this.isSafariBrowser();
-    }
     /**
      * When caption floating is enabled and placeholder is given, do not show placeholder until user focuses on the field
      * When focused add the placeholder to the option which is selected
@@ -2194,26 +2251,40 @@ class SelectComponent extends DatasetAwareFormComponent {
      */
     checkForFloatingLabel($event) {
         const captionEl = $(this.selectEl.nativeElement).closest('.app-composite-widget.caption-floating');
+        if (!this.placeholder) {
+            this.removePlaceholderOption();
+        }
         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 });
-                }
+            const placeholderOption = this.selectEl.nativeElement.querySelector('#placeholderOption');
+            if ($event.type === 'mousedown' && (!this.datavalue || (this.datavalue && $(this.selectEl).find('select option:selected').text() === '' && this.placeholder))) {
                 if (this.placeholder) {
-                    $(this.selectEl.nativeElement).find('option:first').text(this.placeholder);
+                    placeholderOption.textContent = this.placeholder;
                 }
             }
             else if (!this.datavalue) {
-                if (!this.placeholder) {
-                    //  $(this.selectEl.nativeElement).find('option:first').text('');
-                    if (!this.isIosPlatform()) {
-                        captionEl.removeClass('float-active');
-                    }
+                if (this.placeholder) {
+                    placeholderOption.textContent = '';
                 }
+                captionEl.removeClass('float-active');
+            }
+        }
+    }
+    /*
+    * 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.
+    * Styles are not allowed on option tag in ios safari
+    * After removing the option, if no datavalue is present and native select element sets value to the first option by default, so we are setting it to empty
+    * */
+    removePlaceholderOption() {
+        const hiddenEle = $(this.selectEl.nativeElement).find('#placeholderOption');
+        if (hiddenEle.length) {
+            hiddenEle.remove();
+            if (!this.datavalue) {
+                this.selectEl.nativeElement.value = '';
             }
         }
     }
-    static { this.ɵfac = function SelectComponent_Factory(t) { return new (t || SelectComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1$1.App)); }; }
+    static { this.ɵfac = function SelectComponent_Factory(t) { return new (t || SelectComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SelectComponent, selectors: [["wm-select"]], viewQuery: function SelectComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$7, 7, ElementRef);
         } if (rf & 2) {
@@ -2223,35 +2294,44 @@ class SelectComponent extends DatasetAwareFormComponent {
                 provideAs(SelectComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(SelectComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(SelectComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 15, consts: [["role", "listbox", "aria-haspopup", "true", "aria-expanded", "false", "focus-target", "", 3, "ngClass", "disabled", "required", "tabindex", "ngModel", "multiple", "autofocus", "ngModelChange", "change", "focus", "blur"], ["select", ""], ["value", "undefined", 3, "textContent", "hidden", 4, "ngIf"], [4, "ngIf"], ["value", "undefined", 3, "textContent", "hidden"], [3, "label", 4, "ngFor", "ngForOf"], [3, "label"], ["role", "option", 3, "value", "selected", "textContent", 4, "ngFor", "ngForOf"], ["role", "option", 3, "value", "selected", "textContent"]], template: function SelectComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "select", 0, 1);
-            i0.ɵɵlistener("ngModelChange", function SelectComponent_Template_select_ngModelChange_0_listener($event) { return ctx.modelByKey = $event; })("change", function SelectComponent_Template_select_change_0_listener($event) { return ctx.onSelectValueChange($event); })("focus", function SelectComponent_Template_select_focus_0_listener($event) { return ctx.checkForFloatingLabel($event); })("blur", function SelectComponent_Template_select_blur_0_listener($event) { ctx.invokeOnTouched($event); return ctx.checkForFloatingLabel($event); });
-            i0.ɵɵtemplate(2, SelectComponent_option_2_Template, 1, 2, "option", 2);
-            i0.ɵɵtemplate(3, SelectComponent_ng_container_3_Template, 2, 1, "ng-container", 3);
-            i0.ɵɵtemplate(4, SelectComponent_ng_container_4_Template, 2, 1, "ng-container", 3);
+            ]), i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 18, consts: [["select", ""], ["role", "listbox", "aria-haspopup", "true", "aria-expanded", "false", "focus-target", "", 3, "ngModelChange", "change", "mousedown", "blur", "ngClass", "disabled", "required", "tabindex", "ngModel", "ngModelOptions", "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.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "select", 1, 0);
+            i0.ɵɵtwoWayListener("ngModelChange", function SelectComponent_Template_select_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.modelByKey, $event) || (ctx.modelByKey = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("change", function SelectComponent_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSelectValueChange($event)); })("mousedown", function SelectComponent_Template_select_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.checkForFloatingLabel($event)); })("blur", function SelectComponent_Template_select_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); ctx.invokeOnTouched($event); return i0.ɵɵresetView(ctx.checkForFloatingLabel($event)); });
+            i0.ɵɵelement(2, "option", 2);
+            i0.ɵɵtemplate(3, SelectComponent_ng_container_3_Template, 2, 1, "ng-container", 3)(4, SelectComponent_ng_container_4_Template, 2, 1, "ng-container", 3);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(13, _c1$6, ctx.class))("disabled", ctx.disabled)("required", ctx.required)("tabindex", ctx.tabindex)("ngModel", ctx.modelByKey)("multiple", ctx.multiple)("autofocus", ctx.autofocus);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(15, _c1$6, ctx.class))("disabled", ctx.disabled)("required", ctx.required)("tabindex", ctx.tabindex);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.modelByKey);
+            i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(17, _c2$4))("multiple", ctx.multiple)("autofocus", ctx.autofocus);
             i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("aria-multiselectable", ctx.multiple);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", !ctx.isIosPlatform() || !!ctx.placeholder);
-            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("textContent", ctx.placeholder)("hidden", !ctx.placeholder);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.groupby);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", !ctx.groupby);
         } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2$1.NgSelectOption, i2$1.ɵNgSelectMultipleOption, i2$1.SelectMultipleControlValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.NgModel, i2.TextContentDirective], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectComponent, [{
         type: Component,
         args: [{ selector: 'wm-select', providers: [
                     provideAs(SelectComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(SelectComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(SelectComponent)
-                ], template: "<select role=\"listbox\" aria-haspopup=\"true\" aria-expanded=\"false\" #select\n        focus-target\n        [ngClass]=\"['app-select form-control', class]\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        [(ngModel)]=\"modelByKey\"\n        [multiple]=\"multiple\"\n        (change)=\"onSelectValueChange($event)\"\n        (focus)=\"checkForFloatingLabel($event)\"\n        (blur)=\"invokeOnTouched($event); checkForFloatingLabel($event)\"\n        [attr.name]=\"name\"\n        [attr.aria-label]=\"hint\"\n        [attr.aria-multiselectable]=\"multiple\"\n        [autofocus]=\"autofocus\"\n>\n    <option\n    value=\"undefined\"\n    [textContent]=\"placeholder\"\n    *ngIf=\"!isIosPlatform() || !!placeholder\"\n    [hidden]=\"!placeholder\"></option>\n\n    <ng-container *ngIf=\"groupby\">\n        <optgroup *ngFor=\"let groupObj of groupedData\"\n            [label]=\"groupObj.key\">\n            <option *ngFor=\"let item of groupObj.data;\"\n                [value]=\"item.key\"\n                [selected]=\"item.selected\"\n                [textContent]=\"item.label\"\n                role=\"option\"></option>\n        </optgroup>\n    </ng-container>\n\n    <ng-container *ngIf=\"!groupby\">\n        <option *ngFor=\"let item of datasetItems\"\n            [value]=\"item.key\"\n            [selected]=\"item.selected\"\n            [textContent]=\"item.label\"\n            role=\"option\"></option>\n    </ng-container>\n</select>\n" }]
-    }], function () { return [{ type: i0.Injector }, { type: i1$1.App }]; }, { selectEl: [{
+                ], template: "<!--Updated focus with mousedown event. IOS devices not allow update of option value after opening dropdown-->\n<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        [ngModelOptions]=\"{standalone: true}\"\n        [multiple]=\"multiple\"\n        (change)=\"onSelectValueChange($event)\"\n        (mousedown)=\"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.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { selectEl: [{
             type: ViewChild,
             args: ['select', { static: true, read: ElementRef }]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SelectComponent, { className: "SelectComponent", filePath: "select/select.component.ts", lineNumber: 21 }); })();
 
 const switchProps = new Map([
     ['class', PROP_STRING],
@@ -2278,45 +2358,45 @@ const registerProps$6 = () => {
 };
 
 const _c0$6 = ["wmSwitch", ""];
-const _c1$5 = function (a1) { return ["app-icon", a1]; };
+const _c1$5 = (a0, a1) => ({ "selected": a0, "disabled": a1 });
+const _c2$3 = a0 => ["app-icon", a0];
 function SwitchComponent_a_1_i_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 8);
 } if (rf & 2) {
-    const opt_r2 = i0.ɵɵnextContext().$implicit;
+    const opt_r3 = i0.ɵɵnextContext().$implicit;
     const ctx_r4 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1, _c1$5, opt_r2.dataObject[ctx_r4.iconclass] || opt_r2["icon"]));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1, _c2$3, opt_r3.dataObject[ctx_r4.iconclass] || opt_r3["icon"]));
 } }
-const _c2$1 = function (a0, a1) { return { "selected": a0, "disabled": a1 }; };
 function SwitchComponent_a_1_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
+    const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "a", 5);
-    i0.ɵɵlistener("click", function SwitchComponent_a_1_Template_a_click_0_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r7); const $index_r3 = restoredCtx.index; const opt_r2 = restoredCtx.$implicit; const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.selectOpt($event, $index_r3, opt_r2)); });
+    i0.ɵɵlistener("click", function SwitchComponent_a_1_Template_a_click_0_listener($event) { const ctx_r1 = i0.ɵɵrestoreView(_r1); const opt_r3 = ctx_r1.$implicit; const $index_r4 = ctx_r1.index; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.selectOpt($event, $index_r4, opt_r3)); });
     i0.ɵɵtemplate(1, SwitchComponent_a_1_i_1_Template, 1, 3, "i", 6);
     i0.ɵɵelement(2, "span", 7);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const opt_r2 = ctx.$implicit;
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("name", "wm-switch-" + opt_r2.key)("ngClass", i0.ɵɵpureFunction2(4, _c2$1, opt_r2.selected, ctx_r0.disabled));
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", opt_r2.dataObject && opt_r2.dataObject[ctx_r0.iconclass]);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("textContent", opt_r2[ctx_r0.displayfield] || opt_r2.label);
+    const opt_r3 = ctx.$implicit;
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("name", "wm-switch-" + opt_r3.key)("ngClass", i0.ɵɵpureFunction2(4, _c1$5, opt_r3.selected, ctx_r4.disabled));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", opt_r3.dataObject && opt_r3.dataObject[ctx_r4.iconclass]);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("textContent", opt_r3[ctx_r4.displayfield] || opt_r3.label);
 } }
 function SwitchComponent_i_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i");
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵclassMapInterpolate1("app-icon ", ctx_r1.selectedItem && ctx_r1.selectedItem.dataObject && ctx_r1.selectedItem.dataObject[ctx_r1.iconclass], "");
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵclassMapInterpolate1("app-icon ", ctx_r4.selectedItem && ctx_r4.selectedItem.dataObject && ctx_r4.selectedItem.dataObject[ctx_r4.iconclass], "");
 } }
 const DEFAULT_CLS = 'app-switch';
 const WIDGET_CONFIG$6 = { widgetType: 'wm-switch', hostClass: DEFAULT_CLS };
 class SwitchComponent extends DatasetAwareFormComponent {
     static { this.initializeProps = registerProps$6(); }
-    constructor(inj) {
-        super(inj, WIDGET_CONFIG$6);
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG$6, explicitContext);
         this.options = [];
-        this._debounceSetSelectedValue = debounce((val) => {
+        this._debounceSetSelectedValue = debounce$1((val) => {
             this.setSelectedValue();
             this.updateHighlighter(val);
             // only for default value trigger app digest to apply the selectedItem
@@ -2346,7 +2426,7 @@ class SwitchComponent extends DatasetAwareFormComponent {
     // This function sets the selectedItem by either using compareby fields or selected flag on datasetItems.
     setSelectedValue() {
         if (isDefined(this.datavalue) || isDefined(this.toBeProcessedDatavalue)) {
-            this.selectedItem = _.find(this.datasetItems, { selected: true });
+            this.selectedItem = 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
@@ -2365,7 +2445,7 @@ class SwitchComponent extends DatasetAwareFormComponent {
     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 ? findIndex(this.datasetItems, { key: this.selectedItem.key }) : -1;
         if (index === undefined || index === null) {
             index = -1;
         }
@@ -2395,7 +2475,7 @@ class SwitchComponent extends DatasetAwareFormComponent {
         }
         this.modelByKey = option.key;
         this.invokeOnTouched();
-        if (this.selectedItem && $index === _.findIndex(this.datasetItems, { key: this.selectedItem.key })) {
+        if (this.selectedItem && $index === findIndex(this.datasetItems, { key: this.selectedItem.key })) {
             if (this.datasetItems.length === 2) {
                 $index = $index === 1 ? 0 : 1;
             }
@@ -2417,11 +2497,11 @@ class SwitchComponent extends DatasetAwareFormComponent {
             super.onPropertyChange(key, nv, ov);
         }
     }
-    static { this.ɵfac = function SwitchComponent_Factory(t) { return new (t || SwitchComponent)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵfac = function SwitchComponent_Factory(t) { return new (t || SwitchComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SwitchComponent, selectors: [["", "wmSwitch", ""]], exportAs: ["wmSwitch"], features: [i0.ɵɵProvidersFeature([
                 provideAs(SwitchComponent, NG_VALUE_ACCESSOR, true),
                 provideAsWidgetRef(SwitchComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$6, decls: 6, vars: 8, consts: [["role", "group", 1, "btn-group", "btn-group-justified"], ["focus-target", "", "href", "javascript:void(0);", "class", "btn btn-default", 3, "name", "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "btn", "btn-primary", "app-switch-overlay", "switch-handle", 3, "title"], [3, "class", 4, "ngIf"], ["aria-hidden", "true", 1, "model-holder", "ng-hide", 3, "name", "disabled", "value", "required"], ["focus-target", "", "href", "javascript:void(0);", 1, "btn", "btn-default", 3, "name", "ngClass", "click"], ["aria-hidden", "true", 3, "ngClass", 4, "ngIf"], [1, "caption", 3, "textContent"], ["aria-hidden", "true", 3, "ngClass"]], template: function SwitchComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$6, decls: 6, vars: 8, consts: [["role", "group", 1, "btn-group", "btn-group-justified"], ["focus-target", "", "href", "javascript:void(0);", "class", "btn btn-default", 3, "name", "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "btn", "btn-primary", "app-switch-overlay", "switch-handle", 3, "title"], [3, "class", 4, "ngIf"], ["aria-hidden", "true", 1, "model-holder", "ng-hide", 3, "name", "disabled", "value", "required"], ["focus-target", "", "href", "javascript:void(0);", 1, "btn", "btn-default", 3, "click", "name", "ngClass"], ["aria-hidden", "true", 3, "ngClass", 4, "ngIf"], [1, "caption", 3, "textContent"], ["aria-hidden", "true", 3, "ngClass"]], template: function SwitchComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵtemplate(1, SwitchComponent_a_1_Template, 3, 7, "a", 1);
             i0.ɵɵelementEnd();
@@ -2431,25 +2511,31 @@ class SwitchComponent extends DatasetAwareFormComponent {
             i0.ɵɵelementEnd();
             i0.ɵɵelement(5, "input", 4);
         } if (rf & 2) {
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngForOf", ctx.datasetItems);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("title", ctx.selectedItem ? ctx.selectedItem.label : ctx.modelByKey);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.iconclass);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.selectedItem ? ctx.selectedItem.label : ctx.modelByKey, "\n");
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("name", ctx.name)("disabled", ctx.disabled)("value", ctx.modelByKey)("required", ctx.required);
         } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.TextContentDirective], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SwitchComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SwitchComponent, [{
         type: Component,
         args: [{ selector: '[wmSwitch]', providers: [
                     provideAs(SwitchComponent, NG_VALUE_ACCESSOR, true),
                     provideAsWidgetRef(SwitchComponent)
                 ], exportAs: 'wmSwitch', template: "<div role=\"group\" class=\"btn-group btn-group-justified\">\n    <a *ngFor=\"let opt of datasetItems; let $index = index;\"\n       focus-target\n       href=\"javascript:void(0);\"\n       class=\"btn btn-default\"\n       [name]=\"'wm-switch-' + opt.key\"\n       [ngClass]=\"{'selected': opt.selected, 'disabled': disabled}\"\n       (click)=\"selectOpt($event, $index, opt)\"\n    >\n        <i *ngIf=\"opt.dataObject && opt.dataObject[iconclass]\" aria-hidden=\"true\" [ngClass]=\"['app-icon', opt.dataObject[iconclass] || opt['icon']]\"></i>\n        <span class=\"caption\" [textContent]=\"opt[displayfield] || opt.label\"></span>\n    </a>\n</div>\n<span [title]=\"selectedItem ? selectedItem.label : modelByKey\"\n      class=\"btn btn-primary app-switch-overlay switch-handle\">\n    <i *ngIf=\"iconclass\"\n       class=\"app-icon {{(selectedItem && selectedItem.dataObject) && selectedItem.dataObject[iconclass]}}\"></i>\n    {{selectedItem ? selectedItem.label : modelByKey}}\n</span>\n<input [name]=\"name\" class=\"model-holder ng-hide\" [disabled]=\"disabled\" [value]=\"modelByKey\" [required]=\"required\" aria-hidden=\"true\">\n" }]
-    }], function () { return [{ type: i0.Injector }]; }, null); })();
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SwitchComponent, { className: "SwitchComponent", filePath: "switch/switch.component.ts", lineNumber: 25 }); })();
 
 const inputCalendarTypeProps = new Map([
     ['autocomplete', { value: true, ...PROP_BOOLEAN }],
@@ -2481,16 +2567,17 @@ const registerProps$5 = () => {
 
 const _c0$5 = ["input"];
 const _c1$4 = ["type", "date"];
+const _c2$2 = () => ({ standalone: true });
 const WIDGET_CONFIG$5 = {
     widgetType: 'wm-input-calendar',
     hostClass: 'app-input-wrapper'
 };
 class InputCalendarComponent extends BaseInput {
     static { this.initializeProps = registerProps$5(); }
-    constructor(inj) {
-        super(inj, WIDGET_CONFIG$5);
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG$5, explicitContext);
     }
-    static { this.ɵfac = function InputCalendarComponent_Factory(t) { return new (t || InputCalendarComponent)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵfac = function InputCalendarComponent_Factory(t) { return new (t || InputCalendarComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputCalendarComponent, selectors: [["wm-input", "type", "date"], ["wm-input", "type", "datetime-local"], ["wm-input", "type", "month"], ["wm-input", "type", "time"], ["wm-input", "type", "week"]], viewQuery: function InputCalendarComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$5, 7);
             i0.ɵɵviewQuery(NgModel, 5);
@@ -2502,29 +2589,39 @@ class InputCalendarComponent extends BaseInput {
                 provideAs(InputCalendarComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(InputCalendarComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(InputCalendarComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$4, decls: 2, vars: 17, consts: [["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "type", "ngModel", "readonly", "required", "disabled", "min", "max", "step", "autofocus", "autocomplete", "ngClass", "ngStyle", "ngModelChange", "blur"], ["input", ""]], template: function InputCalendarComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "input", 0, 1);
-            i0.ɵɵlistener("ngModelChange", function InputCalendarComponent_Template_input_ngModelChange_0_listener($event) { return ctx.datavalue = $event; })("blur", function InputCalendarComponent_Template_input_blur_0_listener($event) { return ctx.handleBlur($event); })("ngModelChange", function InputCalendarComponent_Template_input_ngModelChange_0_listener($event) { return ctx.handleChange($event); });
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$4, decls: 2, vars: 19, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "min", "max", "step", "autofocus", "autocomplete", "ngClass", "ngStyle"]], template: function InputCalendarComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "input", 1, 0);
+            i0.ɵɵtwoWayListener("ngModelChange", function InputCalendarComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("blur", function InputCalendarComponent_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleBlur($event)); })("ngModelChange", function InputCalendarComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleChange($event)); });
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("type", ctx.type)("ngModel", ctx.datavalue)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("min", ctx.minvalue)("max", ctx.maxvalue)("step", ctx.step)("autofocus", ctx.autofocus)("autocomplete", ctx.autocomplete ? "on" : "off")("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
+            i0.ɵɵproperty("type", ctx.type);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
+            i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(18, _c2$2))("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("min", ctx.minvalue)("max", ctx.maxvalue)("step", ctx.step)("autofocus", ctx.autofocus)("autocomplete", ctx.autocomplete ? "on" : "off")("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
             i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint || ctx.type + " field");
         } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.NgModel], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputCalendarComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputCalendarComponent, [{
         type: Component,
         args: [{ selector: 'wm-input[type="date"], wm-input[type="datetime-local"], wm-input[type="month"], wm-input[type="time"], wm-input[type="week"]', providers: [
                     provideAs(InputCalendarComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(InputCalendarComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(InputCalendarComponent)
-                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [min]=\"minvalue\"\n       [max]=\"maxvalue\"\n       [step]=\"step\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint || type + ' field'\"\n       [autofocus]=\"autofocus\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       #input>\n" }]
-    }], function () { return [{ type: i0.Injector }]; }, { inputEl: [{
+                ], 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]=\"{standalone: true}\"\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" }]
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { inputEl: [{
             type: ViewChild,
             args: ['input', { static: true }]
         }], ngModel: [{
             type: ViewChild,
             args: [NgModel]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InputCalendarComponent, { className: "InputCalendarComponent", filePath: "text/calendar/input-calendar.component.ts", lineNumber: 22 }); })();
 
 const inputColorTypeProps = new Map([
     ['autocomplete', { value: true, ...PROP_BOOLEAN }],
@@ -2553,16 +2650,17 @@ const registerProps$4 = () => {
 
 const _c0$4 = ["input"];
 const _c1$3 = ["type", "color"];
+const _c2$1 = () => ({ standalone: true });
 const WIDGET_CONFIG$4 = {
     widgetType: 'wm-input-color',
     hostClass: 'app-input-wrapper'
 };
 class InputColorComponent extends BaseInput {
     static { this.initializeProps = registerProps$4(); }
-    constructor(inj) {
-        super(inj, WIDGET_CONFIG$4);
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG$4, explicitContext);
     }
-    static { this.ɵfac = function InputColorComponent_Factory(t) { return new (t || InputColorComponent)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵfac = function InputColorComponent_Factory(t) { return new (t || InputColorComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputColorComponent, selectors: [["wm-input", "type", "color"]], viewQuery: function InputColorComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$4, 7);
             i0.ɵɵviewQuery(NgModel, 5);
@@ -2574,29 +2672,39 @@ class InputColorComponent extends BaseInput {
                 provideAs(InputColorComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(InputColorComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(InputColorComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$3, decls: 2, vars: 14, consts: [["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "type", "ngModel", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle", "ngModelChange", "blur"], ["input", ""]], template: function InputColorComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "input", 0, 1);
-            i0.ɵɵlistener("ngModelChange", function InputColorComponent_Template_input_ngModelChange_0_listener($event) { return ctx.datavalue = $event; })("blur", function InputColorComponent_Template_input_blur_0_listener($event) { return ctx.handleBlur($event); })("ngModelChange", function InputColorComponent_Template_input_ngModelChange_0_listener($event) { return ctx.handleChange($event); });
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$3, decls: 2, vars: 16, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle"]], template: function InputColorComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "input", 1, 0);
+            i0.ɵɵtwoWayListener("ngModelChange", function InputColorComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("blur", function InputColorComponent_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleBlur($event)); })("ngModelChange", function InputColorComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleChange($event)); });
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("type", ctx.type)("ngModel", ctx.datavalue)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
+            i0.ɵɵproperty("type", ctx.type);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
+            i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(15, _c2$1))("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
             i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
         } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.NgModel], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputColorComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputColorComponent, [{
         type: Component,
         args: [{ selector: 'wm-input[type="color"]', providers: [
                     provideAs(InputColorComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(InputColorComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(InputColorComponent)
-                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       role=\"textbox\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       #input>\n" }]
-    }], function () { return [{ type: i0.Injector }]; }, { inputEl: [{
+                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       role=\"textbox\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"{standalone: true}\"\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" }]
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { inputEl: [{
             type: ViewChild,
             args: ['input', { static: true }]
         }], ngModel: [{
             type: ViewChild,
             args: [NgModel]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InputColorComponent, { className: "InputColorComponent", filePath: "text/color/input-color.component.ts", lineNumber: 23 }); })();
 
 const inputEmailTypeProps = new Map([
     ['autocomplete', { value: true, ...PROP_BOOLEAN }],
@@ -2633,10 +2741,10 @@ const WIDGET_CONFIG$3 = {
 };
 class InputEmailComponent extends BaseInput {
     static { this.initializeProps = registerProps$3(); }
-    constructor(inj) {
-        super(inj, WIDGET_CONFIG$3);
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG$3, explicitContext);
     }
-    static { this.ɵfac = function InputEmailComponent_Factory(t) { return new (t || InputEmailComponent)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵfac = function InputEmailComponent_Factory(t) { return new (t || InputEmailComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputEmailComponent, selectors: [["wm-input", "type", "email"]], viewQuery: function InputEmailComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$3, 7);
             i0.ɵɵviewQuery(NgModel, 5);
@@ -2648,30 +2756,39 @@ class InputEmailComponent extends BaseInput {
                 provideAs(InputEmailComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(InputEmailComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(InputEmailComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$2, decls: 2, vars: 17, consts: [["focus-target", "", "role", "textbox", "email", "", 1, "form-control", "app-textbox", 3, "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "pattern", "autofocus", "ngClass", "ngStyle", "autocomplete", "ngModelChange", "blur", "keyup.enter"], ["input", ""]], template: function InputEmailComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$2, decls: 2, vars: 17, consts: [["input", ""], ["focus-target", "", "role", "textbox", "email", "", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "keyup.enter", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "pattern", "autofocus", "ngClass", "ngStyle", "autocomplete"]], template: function InputEmailComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "input", 0, 1);
-            i0.ɵɵlistener("ngModelChange", function InputEmailComponent_Template_input_ngModelChange_0_listener($event) { return ctx.datavalue = $event; })("blur", function InputEmailComponent_Template_input_blur_0_listener($event) { return ctx.handleBlur($event); })("ngModelChange", function InputEmailComponent_Template_input_ngModelChange_0_listener($event) { return ctx.handleChange($event); })("keyup.enter", function InputEmailComponent_Template_input_keyup_enter_0_listener() { i0.ɵɵrestoreView(_r1); const _r0 = i0.ɵɵreference(1); return i0.ɵɵresetView(ctx.flushViewChanges(_r0.value)); });
+            i0.ɵɵelementStart(0, "input", 1, 0);
+            i0.ɵɵtwoWayListener("ngModelChange", function InputEmailComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("blur", function InputEmailComponent_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleBlur($event)); })("ngModelChange", function InputEmailComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleChange($event)); })("keyup.enter", function InputEmailComponent_Template_input_keyup_enter_0_listener() { i0.ɵɵrestoreView(_r1); const input_r2 = i0.ɵɵreference(1); return i0.ɵɵresetView(ctx.flushViewChanges(input_r2.value)); });
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("type", ctx.type)("ngModel", ctx.datavalue)("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
+            i0.ɵɵproperty("type", ctx.type);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
+            i0.ɵɵproperty("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
             i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
         } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.PatternValidator, i2$1.EmailValidator, i2$1.NgModel], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputEmailComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputEmailComponent, [{
         type: Component,
         args: [{ selector: 'wm-input[type="email"]', providers: [
                     provideAs(InputEmailComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(InputEmailComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(InputEmailComponent)
                 ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       email\n       #input>\n" }]
-    }], function () { return [{ type: i0.Injector }]; }, { inputEl: [{
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { inputEl: [{
             type: ViewChild,
             args: ['input', { static: true }]
         }], ngModel: [{
             type: ViewChild,
             args: [NgModel]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InputEmailComponent, { className: "InputEmailComponent", filePath: "text/email/input-email.component.ts", lineNumber: 23 }); })();
 
 const inputNumberTypeProps = new Map([
     ['autocomplete', { value: true, ...PROP_BOOLEAN }],
@@ -2705,15 +2822,15 @@ const registerProps$2 = () => {
 
 const _c0$2 = ["input"];
 const _c1$1 = ["type", "number"];
-const _c2 = function (a0) { return { "step-hidden": a0 }; };
+const _c2 = a0 => ({ "step-hidden": a0 });
 const WIDGET_CONFIG$2 = {
     widgetType: 'wm-input-number',
     hostClass: 'app-input-wrapper'
 };
 class InputNumberComponent extends BaseInput {
     static { this.initializeProps = registerProps$2(); }
-    constructor(inj) {
-        super(inj, WIDGET_CONFIG$2);
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG$2, explicitContext);
     }
     onArrowPress($event) {
         if (this.step === 0) {
@@ -2725,7 +2842,7 @@ class InputNumberComponent extends BaseInput {
             return false;
         }
     }
-    static { this.ɵfac = function InputNumberComponent_Factory(t) { return new (t || InputNumberComponent)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵfac = function InputNumberComponent_Factory(t) { return new (t || InputNumberComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputNumberComponent, selectors: [["wm-input", "type", "number"]], viewQuery: function InputNumberComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$2, 7);
             i0.ɵɵviewQuery(NgModel, 5);
@@ -2737,30 +2854,39 @@ class InputNumberComponent extends BaseInput {
                 provideAs(InputNumberComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(InputNumberComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(InputNumberComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$1, decls: 2, vars: 22, consts: [["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngClass", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "min", "max", "step", "autofocus", "ngStyle", "autocomplete", "ngModelChange", "blur", "keyup.enter", "keydown.ArrowUp", "keydown.ArrowDown", "keypress"], ["input", ""]], template: function InputNumberComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$1, decls: 2, vars: 22, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "keyup.enter", "keydown.ArrowUp", "keydown.ArrowDown", "keypress", "ngClass", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "min", "max", "step", "autofocus", "ngStyle", "autocomplete"]], template: function InputNumberComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "input", 0, 1);
-            i0.ɵɵlistener("ngModelChange", function InputNumberComponent_Template_input_ngModelChange_0_listener($event) { return ctx.datavalue = $event; })("blur", function InputNumberComponent_Template_input_blur_0_listener($event) { return ctx.handleBlur($event); })("ngModelChange", function InputNumberComponent_Template_input_ngModelChange_0_listener($event) { return ctx.handleChange($event); })("keyup.enter", function InputNumberComponent_Template_input_keyup_enter_0_listener() { i0.ɵɵrestoreView(_r1); const _r0 = i0.ɵɵreference(1); return i0.ɵɵresetView(ctx.flushViewChanges(_r0.value)); })("keydown.ArrowUp", function InputNumberComponent_Template_input_keydown_ArrowUp_0_listener($event) { return ctx.onArrowPress($event); })("keydown.ArrowDown", function InputNumberComponent_Template_input_keydown_ArrowDown_0_listener($event) { return ctx.onArrowPress($event); })("keypress", function InputNumberComponent_Template_input_keypress_0_listener($event) { return ctx.validateInputEntry($event); });
+            i0.ɵɵelementStart(0, "input", 1, 0);
+            i0.ɵɵtwoWayListener("ngModelChange", function InputNumberComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("blur", function InputNumberComponent_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleBlur($event)); })("ngModelChange", function InputNumberComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleChange($event)); })("keyup.enter", function InputNumberComponent_Template_input_keyup_enter_0_listener() { i0.ɵɵrestoreView(_r1); const input_r2 = i0.ɵɵreference(1); return i0.ɵɵresetView(ctx.flushViewChanges(input_r2.value)); })("keydown.ArrowUp", function InputNumberComponent_Template_input_keydown_ArrowUp_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onArrowPress($event)); })("keydown.ArrowDown", function InputNumberComponent_Template_input_keydown_ArrowDown_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onArrowPress($event)); })("keypress", function InputNumberComponent_Template_input_keypress_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.validateInputEntry($event)); });
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(20, _c2, ctx.step === 0))("type", ctx.type)("ngModel", ctx.datavalue)("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("min", ctx.minvalue)("max", ctx.maxvalue)("step", ctx.step)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(20, _c2, ctx.step === 0))("type", ctx.type);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
+            i0.ɵɵproperty("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("min", ctx.minvalue)("max", ctx.maxvalue)("step", ctx.step)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
             i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
         } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.NgModel], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputNumberComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputNumberComponent, [{
         type: Component,
         args: [{ selector: 'wm-input[type="number"]', providers: [
                     provideAs(InputNumberComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(InputNumberComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(InputNumberComponent)
                 ], template: "<input class=\"form-control app-textbox\"\n       [ngClass]=\"{'step-hidden': step === 0}\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [min]=\"minvalue\"\n       [max]=\"maxvalue\"\n       [step]=\"step\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       (keydown.ArrowUp)=\"onArrowPress($event)\"\n       (keydown.ArrowDown)=\"onArrowPress($event)\"\n       (keypress)=\"validateInputEntry($event)\"\n       #input>\n" }]
-    }], function () { return [{ type: i0.Injector }]; }, { inputEl: [{
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { inputEl: [{
             type: ViewChild,
             args: ['input', { static: true }]
         }], ngModel: [{
             type: ViewChild,
             args: [NgModel]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InputNumberComponent, { className: "InputNumberComponent", filePath: "text/number/input-number.component.ts", lineNumber: 22 }); })();
 
 const inputTextTypeProps = new Map([
     ['autocomplete', { value: true, ...PROP_BOOLEAN }],
@@ -2809,8 +2935,8 @@ const WIDGET_CONFIG$1 = {
 };
 class InputTextComponent extends BaseInput {
     static { this.initializeProps = registerProps$1(); }
-    constructor(inj) {
-        super(inj, WIDGET_CONFIG$1);
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG$1, explicitContext);
         this.lazy = false;
     }
     /* Define the property change handler. This function will be triggered when there is a change in the widget property */
@@ -2881,7 +3007,7 @@ class InputTextComponent extends BaseInput {
         super.ngOnInit();
         this.isFocused = !!this.datavalue;
     }
-    static { this.ɵfac = function InputTextComponent_Factory(t) { return new (t || InputTextComponent)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵfac = function InputTextComponent_Factory(t) { return new (t || InputTextComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputTextComponent, selectors: [["wm-input", "type", "text"], ["wm-input", 3, "type", ""], ["wm-input", "type", "password"], ["wm-input", "type", "search"], ["wm-input", "type", "tel"], ["wm-input", "type", "url"]], viewQuery: function InputTextComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$1, 7);
             i0.ɵɵviewQuery(NgModel, 5);
@@ -2895,24 +3021,32 @@ class InputTextComponent extends BaseInput {
                 provideAs(InputTextComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(InputTextComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(InputTextComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1, decls: 2, vars: 19, consts: [["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "type", "ngModel", "imask", "unmask", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "pattern", "autofocus", "ngClass", "ngStyle", "autocomplete", "ngModelChange", "blur", "focus", "keyup.enter"], ["input", ""]], template: function InputTextComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1, decls: 2, vars: 19, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "focus", "keyup.enter", "type", "ngModel", "imask", "unmask", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "pattern", "autofocus", "ngClass", "ngStyle", "autocomplete"]], template: function InputTextComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "input", 0, 1);
-            i0.ɵɵlistener("ngModelChange", function InputTextComponent_Template_input_ngModelChange_0_listener($event) { return ctx.datavalue = $event; })("ngModelChange", function InputTextComponent_Template_input_ngModelChange_0_listener($event) { return ctx.handleChange($event); })("blur", function InputTextComponent_Template_input_blur_0_listener($event) { ctx.handleBlur($event); return ctx.checkForDisplayFormat($event); })("focus", function InputTextComponent_Template_input_focus_0_listener($event) { return ctx.checkForDisplayFormat($event); })("keyup.enter", function InputTextComponent_Template_input_keyup_enter_0_listener() { i0.ɵɵrestoreView(_r1); const _r0 = i0.ɵɵreference(1); return i0.ɵɵresetView(ctx.flushViewChanges(_r0.value)); });
+            i0.ɵɵelementStart(0, "input", 1, 0);
+            i0.ɵɵtwoWayListener("ngModelChange", function InputTextComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("ngModelChange", function InputTextComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleChange($event)); })("blur", function InputTextComponent_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); ctx.handleBlur($event); return i0.ɵɵresetView(ctx.checkForDisplayFormat($event)); })("focus", function InputTextComponent_Template_input_focus_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.checkForDisplayFormat($event)); })("keyup.enter", function InputTextComponent_Template_input_keyup_enter_0_listener() { i0.ɵɵrestoreView(_r1); const input_r2 = i0.ɵɵreference(1); return i0.ɵɵresetView(ctx.flushViewChanges(input_r2.value)); });
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("type", ctx.type)("ngModel", ctx.datavalue)("imask", ctx.mask)("unmask", true)("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
+            i0.ɵɵproperty("type", ctx.type);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
+            i0.ɵɵproperty("imask", ctx.mask)("unmask", true)("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
             i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey);
         } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.PatternValidator, i2$1.NgModel, i3.IMaskDirective], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputTextComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputTextComponent, [{
         type: Component,
         args: [{ selector: 'wm-input[type="text"], wm-input:not([type]), wm-input[type="password"], wm-input[type="search"], wm-input[type="tel"], wm-input[type="url"]', providers: [
                     provideAs(InputTextComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(InputTextComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(InputTextComponent)
                 ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [attr.aria-label]=\"hint\"\n       [(ngModel)]=\"datavalue\"\n       [imask]=\"mask\"\n       [unmask]=\"true\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (ngModelChange)=\"handleChange($event)\"\n       (blur)=\"handleBlur($event); checkForDisplayFormat($event)\"\n       (focus)=\"checkForDisplayFormat($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       #input>\n" }]
-    }], function () { return [{ type: i0.Injector }]; }, { inputEl: [{
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { inputEl: [{
             type: ViewChild,
             args: ['input', { static: true }]
         }], ngModel: [{
@@ -2922,6 +3056,7 @@ class InputTextComponent extends BaseInput {
             type: ViewChild,
             args: ['input', { read: IMaskDirective }]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InputTextComponent, { className: "InputTextComponent", filePath: "text/text/input-text.component.ts", lineNumber: 23 }); })();
 
 const textareaProps = new Map([
     ['autofocus', PROP_BOOLEAN],
@@ -2957,7 +3092,7 @@ function TextareaComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
+    i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.limitdisplaytext);
 } }
 const WIDGET_CONFIG = {
@@ -2966,14 +3101,14 @@ const WIDGET_CONFIG = {
 };
 class TextareaComponent extends BaseInput {
     static { this.initializeProps = registerProps(); }
-    constructor(inj) {
-        super(inj, WIDGET_CONFIG);
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG, explicitContext);
         this.charlength = 0;
     }
     onInputChange() {
         this.charlength = this.inputEl.nativeElement.value.length;
     }
-    static { this.ɵfac = function TextareaComponent_Factory(t) { return new (t || TextareaComponent)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵfac = function TextareaComponent_Factory(t) { return new (t || TextareaComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TextareaComponent, selectors: [["wm-textarea"]], viewQuery: function TextareaComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 7);
             i0.ɵɵviewQuery(NgModel, 5);
@@ -2985,32 +3120,41 @@ class TextareaComponent extends BaseInput {
                 provideAs(TextareaComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(TextareaComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(TextareaComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 15, consts: [["focus-target", "", "role", "textbox", "aria-multiline", "true", 1, "form-control", "app-textarea", 3, "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle", "ngModelChange", "blur", "input"], ["textarea", ""], ["class", "textarea-count", 4, "ngIf"], [1, "textarea-count"]], template: function TextareaComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "textarea", 0, 1);
-            i0.ɵɵlistener("ngModelChange", function TextareaComponent_Template_textarea_ngModelChange_0_listener($event) { return ctx.datavalue = $event; })("blur", function TextareaComponent_Template_textarea_blur_0_listener($event) { return ctx.handleBlur($event); })("input", function TextareaComponent_Template_textarea_input_0_listener() { return ctx.onInputChange(); })("ngModelChange", function TextareaComponent_Template_textarea_ngModelChange_0_listener($event) { ctx.handleChange($event); return ctx.onInputChange(); });
+            ]), i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 15, consts: [["textarea", ""], ["focus-target", "", "role", "textbox", "aria-multiline", "true", 1, "form-control", "app-textarea", 3, "ngModelChange", "blur", "input", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle"], ["class", "textarea-count", 4, "ngIf"], [1, "textarea-count"]], template: function TextareaComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "textarea", 1, 0);
+            i0.ɵɵtwoWayListener("ngModelChange", function TextareaComponent_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("blur", function TextareaComponent_Template_textarea_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleBlur($event)); })("input", function TextareaComponent_Template_textarea_input_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInputChange()); })("ngModelChange", function TextareaComponent_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); ctx.handleChange($event); return i0.ɵɵresetView(ctx.onInputChange()); });
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(2, TextareaComponent_div_2_Template, 2, 1, "div", 2);
         } if (rf & 2) {
-            i0.ɵɵproperty("ngModel", ctx.datavalue)("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
+            i0.ɵɵproperty("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
             i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.maxchars);
         } }, dependencies: [i1.NgClass, i1.NgIf, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.NgModel], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TextareaComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TextareaComponent, [{
         type: Component,
         args: [{ selector: 'wm-textarea', providers: [
                     provideAs(TextareaComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(TextareaComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(TextareaComponent)
                 ], template: "<textarea class=\"form-control app-textarea\"\n          focus-target\n          role=\"textbox\"\n          [attr.name]=\"name\"\n          [(ngModel)]=\"datavalue\"\n          [ngModelOptions]=\"ngModelOptions\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          [disabled]=\"disabled\"\n          [maxlength]=\"maxchars\"\n          [attr.tabindex]=\"tabindex\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.accesskey]=\"shortcutkey\"\n          [attr.aria-label]=\"hint\"\n          aria-multiline=\"true\"\n          [autofocus]=\"autofocus\"\n          [ngClass]=\"conditionalclass\"\n          [ngStyle]=\"conditionalstyle\"\n          (blur)=\"handleBlur($event)\"\n          (input)=\"onInputChange()\"\n          (ngModelChange)=\"handleChange($event); onInputChange();\"\n          #textarea\n></textarea>\n\n<div *ngIf=\"maxchars\" class=\"textarea-count\"  >{{limitdisplaytext}}</div>\n" }]
-    }], function () { return [{ type: i0.Injector }]; }, { inputEl: [{
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { inputEl: [{
             type: ViewChild,
             args: ['textarea', { static: true }]
         }], ngModel: [{
             type: ViewChild,
             args: [NgModel]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TextareaComponent, { className: "TextareaComponent", filePath: "textarea/textarea.component.ts", lineNumber: 22 }); })();
 
 class CaptionPositionDirective {
     constructor(inj, app) {
@@ -3024,7 +3168,7 @@ class CaptionPositionDirective {
         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) => {
+            forEach(this.inputEl, (el) => {
                 if ($(el).hasClass('mobile-input') && el.value) {
                     mobileInputVal = el.value;
                 }
@@ -3133,8 +3277,7 @@ class CaptionPositionDirective {
             // isSelectMultiple is set to true when for select widget, multiple option is enabled
             // Checking inputEl focus - when form is represented as dialog and the first field is automatically in focus
             const isInputElFocused = this.inputEl && this.inputEl.is(':focus');
-            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);
@@ -3171,12 +3314,12 @@ class CaptionPositionDirective {
     static { this.ɵfac = function CaptionPositionDirective_Factory(t) { return new (t || CaptionPositionDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1$1.App)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: CaptionPositionDirective, selectors: [["", "wmCaptionPosition", ""]] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaptionPositionDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaptionPositionDirective, [{
         type: Directive,
         args: [{
                 selector: '[wmCaptionPosition]'
             }]
-    }], function () { return [{ type: i0.Injector }, { type: i1$1.App }]; }, null); })();
+    }], () => [{ type: i0.Injector }, { type: i1$1.App }], null); })();
 
 const components = [
     ButtonComponent,
@@ -3204,7 +3347,7 @@ class InputModule {
             WmComponentsModule,
             IMaskModule] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputModule, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputModule, [{
         type: NgModule,
         args: [{
                 imports: [
@@ -3256,5 +3399,5 @@ class InputModule {
  * Generated bundle index. Do not edit.
  */
 
-export { BaseFormComponent, BaseFormCustomComponent, ButtonComponent, ButtonGroupDirective, CaptionPositionDirective, CheckboxComponent, CheckboxsetComponent, CompositeDirective, DatasetAwareFormComponent, InputCalendarComponent, InputColorComponent, InputEmailComponent, InputModule, InputNumberComponent, InputTextComponent, NumberComponent, NumberLocale, RadiosetComponent, SelectComponent, SwitchComponent, TextareaComponent };
+export { BaseFormComponent, BaseFormCustomComponent, ButtonComponent, ButtonGroupDirective, CaptionPositionDirective, CheckboxComponent, CheckboxsetComponent, CompositeDirective, DatasetAwareFormComponent, InputCalendarComponent, InputColorComponent, InputEmailComponent, InputModule, InputNumberComponent, InputTextComponent, NumberComponent, NumberLocale, RadiosetComponent, SelectComponent, SwitchComponent, TextareaComponent, unStringify };
 //# sourceMappingURL=index.mjs.map