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

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('angular-imask'), require('@wm/components/base'), require('@wm/core'), require('rxjs')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/forms', 'angular-imask', '@wm/components/base', '@wm/core', 'rxjs'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.input = {}), global.ng.core, global.ng.common, global.ng.forms, global.angularIMask, global.wm.components.base, global.wm.core, global.rxjs));
-})(this, (function (exports, i0, i1, i2$1, i3, i2, i1$1, rxjs) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('angular-imask'), require('@wm/components/base'), require('@wm/core'), require('rxjs'), require('tslib')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/forms', 'angular-imask', '@wm/components/base', '@wm/core', 'rxjs', 'tslib'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.input = {}), global.ng.core, global.ng.common, global.ng.forms, global.angularIMask, global.wm.components.base, global.wm.core, global.rxjs, global.tslib));
+})(this, (function (exports, i0, i1, i2$1, i3, i2, i1$1, rxjs, tslib) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -53,39 +53,39 @@
   };
 
   const _c0$c = ["wmButton", ""];
-  const _c1$b = function (a0, a1, a2) { return { width: a0, height: a1, margin: a2 }; };
+  const _c1$b = [[["", 8, "caret"]]];
+  const _c2$5 = [".caret"];
+  const _c3$2 = (a0, a1, a2) => ({ width: a0, height: a1, margin: a2 });
+  const _c4$2 = (a0, a1, a2, a3) => ({ width: a0, height: a1, margin: a2, fontSize: a3 });
   function ButtonComponent_img_0_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelement(0, "img", 5);
       i0__namespace.ɵɵpipe(1, "image");
   } if (rf & 2) {
       const ctx_r0 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵproperty("src", i0__namespace.ɵɵpipeBind1(1, 2, ctx_r0.iconurl), i0__namespace.ɵɵsanitizeUrl)("ngStyle", i0__namespace.ɵɵpureFunction3(4, _c1$b, ctx_r0.iconwidth, ctx_r0.iconheight, ctx_r0.iconmargin));
+      i0__namespace.ɵɵproperty("src", i0__namespace.ɵɵpipeBind1(1, 2, ctx_r0.iconurl), i0__namespace.ɵɵsanitizeUrl)("ngStyle", i0__namespace.ɵɵpureFunction3(4, _c3$2, ctx_r0.iconwidth, ctx_r0.iconheight, ctx_r0.iconmargin));
   } }
-  const _c2$5 = function (a0, a1, a2, a3) { return { width: a0, height: a1, margin: a2, fontSize: a3 }; };
   function ButtonComponent_i_1_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelement(0, "i", 6);
   } if (rf & 2) {
-      const ctx_r1 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵclassMapInterpolate1("app-icon ", ctx_r1.iconclass, "");
-      i0__namespace.ɵɵproperty("ngStyle", i0__namespace.ɵɵpureFunction4(4, _c2$5, ctx_r1.iconwidth, ctx_r1.iconheight, ctx_r1.iconmargin, ctx_r1.iconwidth));
+      const ctx_r0 = i0__namespace.ɵɵnextContext();
+      i0__namespace.ɵɵclassMapInterpolate1("app-icon ", ctx_r0.iconclass, "");
+      i0__namespace.ɵɵproperty("ngStyle", i0__namespace.ɵɵpureFunction4(4, _c4$2, ctx_r0.iconwidth, ctx_r0.iconheight, ctx_r0.iconmargin, ctx_r0.iconwidth));
   } }
   function ButtonComponent_span_2_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelementStart(0, "span", 7);
       i0__namespace.ɵɵtext(1);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const ctx_r2 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵtextInterpolate2("", ctx_r2.caption, " ", ctx_r2.appLocale.LABEL_ICON, "");
+      const ctx_r0 = i0__namespace.ɵɵnextContext();
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵtextInterpolate2("", ctx_r0.caption, " ", ctx_r0.appLocale.LABEL_ICON, "");
   } }
   function ButtonComponent_span_5_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelement(0, "span", 8);
   } if (rf & 2) {
-      const ctx_r3 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵproperty("textContent", ctx_r3.badgevalue);
+      const ctx_r0 = i0__namespace.ɵɵnextContext();
+      i0__namespace.ɵɵproperty("textContent", ctx_r0.badgevalue);
   } }
-  const _c3$2 = [[["", 8, "caret"]]];
-  const _c4$2 = [".caret"];
   const DEFAULT_CLS$6 = 'btn app-button';
   const WIDGET_CONFIG$e = {
       widgetType: 'wm-button',
@@ -94,42 +94,45 @@
   };
   class ButtonComponent extends i2.StylableComponent {
       static { this.initializeProps = registerProps$e(); }
-      constructor(inj) {
-          super(inj, WIDGET_CONFIG$e);
+      constructor(inj, explicitContext) {
+          super(inj, WIDGET_CONFIG$e, explicitContext);
           i2.styler(this.nativeElement, this);
       }
-      static { this.ɵfac = function ButtonComponent_Factory(t) { return new (t || ButtonComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+      static { this.ɵfac = function ButtonComponent_Factory(t) { return new (t || ButtonComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: ButtonComponent, selectors: [["button", "wmButton", ""]], hostVars: 5, hostBindings: function ButtonComponent_HostBindings(rf, ctx) { if (rf & 2) {
               i0__namespace.ɵɵhostProperty("type", ctx.type)("tabIndex", ctx.tabindex)("disabled", ctx.disabled);
               i0__namespace.ɵɵattribute("accesskey", ctx.shortcutkey)("icon-position", ctx.iconposition);
           } }, exportAs: ["wmButton"], features: [i0__namespace.ɵɵProvidersFeature([
                   i2.provideAsWidgetRef(ButtonComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$c, ngContentSelectors: _c4$2, decls: 6, vars: 5, consts: [["data-identifier", "img", "alt", "button image", "class", "button-image-icon", 3, "src", "ngStyle", 4, "ngIf"], ["aria-hidden", "true", 3, "class", "ngStyle", 4, "ngIf"], ["class", "sr-only", 4, "ngIf"], [1, "btn-caption", 3, "innerHTML"], ["class", "badge pull-right", 3, "textContent", 4, "ngIf"], ["data-identifier", "img", "alt", "button image", 1, "button-image-icon", 3, "src", "ngStyle"], ["aria-hidden", "true", 3, "ngStyle"], [1, "sr-only"], [1, "badge", "pull-right", 3, "textContent"]], template: function ButtonComponent_Template(rf, ctx) { if (rf & 1) {
-              i0__namespace.ɵɵprojectionDef(_c3$2);
-              i0__namespace.ɵɵtemplate(0, ButtonComponent_img_0_Template, 2, 8, "img", 0);
-              i0__namespace.ɵɵtemplate(1, ButtonComponent_i_1_Template, 1, 9, "i", 1);
-              i0__namespace.ɵɵtemplate(2, ButtonComponent_span_2_Template, 2, 2, "span", 2);
+              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$c, ngContentSelectors: _c2$5, decls: 6, vars: 5, consts: [["data-identifier", "img", "alt", "button image", "class", "button-image-icon", 3, "src", "ngStyle", 4, "ngIf"], ["aria-hidden", "true", 3, "class", "ngStyle", 4, "ngIf"], ["class", "sr-only", 4, "ngIf"], [1, "btn-caption", 3, "innerHTML"], ["class", "badge pull-right", 3, "textContent", 4, "ngIf"], ["data-identifier", "img", "alt", "button image", 1, "button-image-icon", 3, "src", "ngStyle"], ["aria-hidden", "true", 3, "ngStyle"], [1, "sr-only"], [1, "badge", "pull-right", 3, "textContent"]], template: function ButtonComponent_Template(rf, ctx) { if (rf & 1) {
+              i0__namespace.ɵɵprojectionDef(_c1$b);
+              i0__namespace.ɵɵtemplate(0, ButtonComponent_img_0_Template, 2, 8, "img", 0)(1, ButtonComponent_i_1_Template, 1, 9, "i", 1)(2, ButtonComponent_span_2_Template, 2, 2, "span", 2);
               i0__namespace.ɵɵelement(3, "span", 3);
               i0__namespace.ɵɵprojection(4);
               i0__namespace.ɵɵtemplate(5, ButtonComponent_span_5_Template, 1, 1, "span", 4);
           } if (rf & 2) {
               i0__namespace.ɵɵproperty("ngIf", ctx.iconurl);
-              i0__namespace.ɵɵadvance(1);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("ngIf", ctx.iconclass);
-              i0__namespace.ɵɵadvance(1);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("ngIf", ctx.iconclass);
-              i0__namespace.ɵɵadvance(1);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("innerHTML", ctx.caption, i0__namespace.ɵɵsanitizeHtml);
               i0__namespace.ɵɵadvance(2);
               i0__namespace.ɵɵproperty("ngIf", ctx.badgevalue);
           } }, dependencies: [i1__namespace.NgIf, i1__namespace.NgStyle, i2__namespace.TextContentDirective, i2__namespace.ImagePipe], encapsulation: 2 }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ButtonComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ButtonComponent, [{
           type: i0.Component,
           args: [{ selector: 'button[wmButton]', providers: [
                       i2.provideAsWidgetRef(ButtonComponent)
                   ], exportAs: 'wmButton', template: "<img data-identifier=\"img\" alt=\"button image\" class=\"button-image-icon\" [src]=\"iconurl | image\" *ngIf=\"iconurl\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"/>\n<i class=\"app-icon {{iconclass}}\" aria-hidden=\"true\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin, fontSize:iconwidth}\" *ngIf=\"iconclass\"></i>\n<span class=\"sr-only\" *ngIf=\"iconclass\">{{caption}} {{appLocale.LABEL_ICON}}</span>\n<span class=\"btn-caption\" [innerHTML]=\"caption\"></span>\n<ng-content select=\".caret\"></ng-content>\n<span *ngIf=\"badgevalue\" class=\"badge pull-right\" [textContent]=\"badgevalue\"></span>\n" }]
-      }], function () { return [{ type: i0__namespace.Injector }]; }, { type: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { type: [{
               type: i0.HostBinding,
               args: ['type']
           }], tabindex: [{
@@ -145,6 +148,7 @@
               type: i0.HostBinding,
               args: ['attr.icon-position']
           }] }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(ButtonComponent, { className: "ButtonComponent", filePath: "button/button.component.ts", lineNumber: 22 }); })();
 
   const registerProps$d = () => {
       i2.register('wm-buttongroup', new Map([
@@ -167,11 +171,11 @@
           this.$element.find('.app-button').removeClass('selected');
           $target.addClass('selected');
       }
-      constructor(inj) {
-          super(inj, WIDGET_CONFIG$d);
+      constructor(inj, explicitContext) {
+          super(inj, WIDGET_CONFIG$d, explicitContext);
           i2.styler(this.nativeElement, this, i2.APPLY_STYLES_TYPE.CONTAINER);
       }
-      static { this.ɵfac = function ButtonGroupDirective_Factory(t) { return new (t || ButtonGroupDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+      static { this.ɵfac = function ButtonGroupDirective_Factory(t) { return new (t || ButtonGroupDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: ButtonGroupDirective, selectors: [["", "wmButtonGroup", ""]], hostVars: 2, hostBindings: function ButtonGroupDirective_HostBindings(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵlistener("click", function ButtonGroupDirective_click_HostBindingHandler($event) { return ctx.handleClick($event); });
           } if (rf & 2) {
@@ -180,7 +184,7 @@
                   i2.provideAsWidgetRef(ButtonGroupDirective)
               ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ButtonGroupDirective, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ButtonGroupDirective, [{
           type: i0.Directive,
           args: [{
                   selector: '[wmButtonGroup]',
@@ -188,7 +192,12 @@
                       i2.provideAsWidgetRef(ButtonGroupDirective)
                   ]
               }]
-      }], function () { return [{ type: i0__namespace.Injector }]; }, { vertical: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { vertical: [{
               type: i0.HostBinding,
               args: ['class.btn-group-vertical']
           }], handleClick: [{
@@ -267,12 +276,12 @@
       static { this.ɵfac = function BaseFormComponent_Factory(t) { return new (t || BaseFormComponent)(i0__namespace.ɵɵinject(i0__namespace.Injector), i0__namespace.ɵɵinject(i2.WidgetConfig), i0__namespace.ɵɵinject(Promise)); }; }
       static { this.ɵprov = /*@__PURE__*/ i0__namespace.ɵɵdefineInjectable({ token: BaseFormComponent, factory: BaseFormComponent.ɵfac }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(BaseFormComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(BaseFormComponent, [{
           type: i0.Injectable
-      }], function () { return [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
                   type: i0.Inject,
                   args: [i2.WidgetConfig]
-              }] }, { type: Promise }]; }, null); })();
+              }] }, { type: Promise }], null); })();
 
   /*
    * WMS-18269
@@ -352,10 +361,10 @@
       validate(control) {
           return this['show'] ? validateRequiredBind(this['required'])(control) : null;
       }
-      static { this.ɵfac = /*@__PURE__*/ function () { let ɵBaseFormCustomComponent_BaseFactory; return function BaseFormCustomComponent_Factory(t) { return (ɵBaseFormCustomComponent_BaseFactory || (ɵBaseFormCustomComponent_BaseFactory = i0__namespace.ɵɵgetInheritedFactory(BaseFormCustomComponent)))(t || BaseFormCustomComponent); }; }(); }
+      static { this.ɵfac = /*@__PURE__*/ (() => { let ɵBaseFormCustomComponent_BaseFactory; return function BaseFormCustomComponent_Factory(t) { return (ɵBaseFormCustomComponent_BaseFactory || (ɵBaseFormCustomComponent_BaseFactory = i0__namespace.ɵɵgetInheritedFactory(BaseFormCustomComponent)))(t || BaseFormCustomComponent); }; })(); }
       static { this.ɵprov = /*@__PURE__*/ i0__namespace.ɵɵdefineInjectable({ token: BaseFormCustomComponent, factory: BaseFormCustomComponent.ɵfac }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(BaseFormCustomComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(BaseFormCustomComponent, [{
           type: i0.Injectable
       }], null, null); })();
 
@@ -385,7 +394,7 @@
 
   const _c0$b = ["checkbox"];
   const _c1$a = ["wmCheckbox", ""];
-  const _c2$4 = function (a0, a1, a2) { return { "unchecked": a0, "disabled": a1, "required": a2 }; };
+  const _c2$4 = (a0, a1, a2) => ({ "unchecked": a0, "disabled": a1, "required": a2 });
   const DEFAULT_CLS$4 = 'app-checkbox checkbox';
   const WIDGET_CONFIG$c = {
       widgetType: 'wm-checkbox',
@@ -423,8 +432,8 @@
           this.proxyModel = (i1$1.isDefined(v) && v !== '') ? v === this._checkedvalue : undefined;
           this.updatePrevDatavalue(this.datavalue);
       }
-      constructor(inj, checkedVal, uncheckedVal, type) {
-          super(inj, WIDGET_CONFIG$c);
+      constructor(inj, checkedVal, uncheckedVal, type, explicitContext) {
+          super(inj, WIDGET_CONFIG$c, explicitContext);
           this.type = type;
           this._caption = '&nbsp';
           this._checkedvalue = unStringify(checkedVal, true);
@@ -481,7 +490,7 @@
           super.ngAfterViewInit();
           i2.styler(this.nativeElement.querySelector('label'), this);
       }
-      static { this.ɵfac = function CheckboxComponent_Factory(t) { return new (t || CheckboxComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵinjectAttribute('checkedvalue'), i0__namespace.ɵɵinjectAttribute('uncheckedvalue'), i0__namespace.ɵɵinjectAttribute('type')); }; }
+      static { this.ɵfac = function CheckboxComponent_Factory(t) { return new (t || CheckboxComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵinjectAttribute('checkedvalue'), i0__namespace.ɵɵinjectAttribute('uncheckedvalue'), i0__namespace.ɵɵinjectAttribute('type'), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: CheckboxComponent, selectors: [["", "wmCheckbox", ""]], viewQuery: function CheckboxComponent_Query(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵviewQuery(i2$1.NgModel, 5);
               i0__namespace.ɵɵviewQuery(_c0$b, 7, i0.ElementRef);
@@ -495,17 +504,20 @@
                   i2.provideAs(CheckboxComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(CheckboxComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(CheckboxComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$a, decls: 6, vars: 17, consts: [[3, "ngClass"], ["type", "checkbox", "role", "checkbox", "focus-target", "", 3, "ngModel", "readonly", "required", "disabled", "tabindex", "ngModelChange", "blur"], ["checkbox", ""], [1, "caption", 3, "innerHtml"], ["alt", "Checkbox Image", "aria-hidden", "true", "src", "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==", 1, "switch"], ["type", "hidden", "aria-hidden", "true", "tabindex", "-1", 1, "ng-hide", "model-holder", 3, "disabled", "value"]], template: function CheckboxComponent_Template(rf, ctx) { if (rf & 1) {
-              i0__namespace.ɵɵelementStart(0, "label", 0)(1, "input", 1, 2);
-              i0__namespace.ɵɵlistener("ngModelChange", function CheckboxComponent_Template_input_ngModelChange_1_listener($event) { return ctx.proxyModel = $event; })("blur", function CheckboxComponent_Template_input_blur_1_listener($event) { return ctx.invokeOnTouched($event); })("ngModelChange", function CheckboxComponent_Template_input_ngModelChange_1_listener($event) { return ctx.handleChange($event); });
+              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$a, decls: 6, vars: 17, consts: [["checkbox", ""], [3, "ngClass"], ["type", "checkbox", "role", "checkbox", "focus-target", "", 3, "ngModelChange", "blur", "ngModel", "readonly", "required", "disabled", "tabindex"], [1, "caption", 3, "innerHtml"], ["alt", "Checkbox Image", "aria-hidden", "true", "src", "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==", 1, "switch"], ["type", "hidden", "aria-hidden", "true", "tabindex", "-1", 1, "ng-hide", "model-holder", 3, "disabled", "value"]], template: function CheckboxComponent_Template(rf, ctx) { if (rf & 1) {
+              const _r1 = i0__namespace.ɵɵgetCurrentView();
+              i0__namespace.ɵɵelementStart(0, "label", 1)(1, "input", 2, 0);
+              i0__namespace.ɵɵtwoWayListener("ngModelChange", function CheckboxComponent_Template_input_ngModelChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.proxyModel, $event) || (ctx.proxyModel = $event); return i0__namespace.ɵɵresetView($event); });
+              i0__namespace.ɵɵlistener("blur", function CheckboxComponent_Template_input_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.invokeOnTouched($event)); })("ngModelChange", function CheckboxComponent_Template_input_ngModelChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleChange($event)); });
               i0__namespace.ɵɵelementEnd();
               i0__namespace.ɵɵelement(3, "span", 3)(4, "img", 4);
               i0__namespace.ɵɵelementEnd();
               i0__namespace.ɵɵelement(5, "input", 5);
           } if (rf & 2) {
               i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction3(13, _c2$4, !ctx.proxyModel, ctx.disabled || ctx.readonly, ctx.required && ctx._caption));
-              i0__namespace.ɵɵadvance(1);
-              i0__namespace.ɵɵproperty("ngModel", ctx.proxyModel)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled || ctx.readonly)("tabindex", ctx.tabindex);
+              i0__namespace.ɵɵadvance();
+              i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.proxyModel);
+              i0__namespace.ɵɵproperty("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled || ctx.readonly)("tabindex", ctx.tabindex);
               i0__namespace.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("aria-checked", !!ctx.proxyModel)("accesskey", ctx.shortcutkey);
               i0__namespace.ɵɵadvance(2);
               i0__namespace.ɵɵproperty("innerHtml", ctx._caption, i0__namespace.ɵɵsanitizeHtml);
@@ -513,14 +525,14 @@
               i0__namespace.ɵɵproperty("disabled", ctx.disabled)("value", ctx.proxyModel);
           } }, dependencies: [i1__namespace.NgClass, i2$1__namespace.CheckboxControlValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.CheckboxRequiredValidator, i2$1__namespace.NgModel], encapsulation: 2 }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CheckboxComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CheckboxComponent, [{
           type: i0.Component,
           args: [{ selector: '[wmCheckbox]', providers: [
                       i2.provideAs(CheckboxComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(CheckboxComponent, i2$1.NG_VALIDATORS, true),
                       i2.provideAsWidgetRef(CheckboxComponent)
                   ], template: "<label [ngClass]=\"{'unchecked': !proxyModel, 'disabled': (disabled || readonly), 'required': (required && _caption)}\">\n    <input type=\"checkbox\"\n           role=\"checkbox\"\n           #checkbox\n           [attr.name]=\"name\"\n           [attr.aria-label]=\"hint\"\n           [attr.aria-checked]=\"!!proxyModel\"\n           focus-target\n           [(ngModel)]=\"proxyModel\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           [disabled]=\"disabled || readonly\"\n           [attr.accesskey]=\"shortcutkey\"\n           [tabindex]=\"tabindex\"\n           (blur)=\"invokeOnTouched($event)\"\n           (ngModelChange)=\"handleChange($event)\">\n    <span class=\"caption\" [innerHtml]=\"_caption\"></span>\n    <img alt=\"Checkbox Image\" aria-hidden=\"true\" src=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"switch\"/>\n</label>\n<input type=\"hidden\" class=\"ng-hide model-holder\" aria-hidden=\"true\" tabindex=\"-1\" [disabled]=\"disabled\" [value]=\"proxyModel\">\n" }]
-      }], function () { return [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
                   type: i0.Attribute,
                   args: ['checkedvalue']
               }] }, { type: undefined, decorators: [{
@@ -529,7 +541,12 @@
               }] }, { type: undefined, decorators: [{
                   type: i0.Attribute,
                   args: ['type']
-              }] }]; }, { ngModel: [{
+              }] }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { ngModel: [{
               type: i0.ViewChild,
               args: [i2$1.NgModel]
           }], checkboxEl: [{
@@ -539,6 +556,7 @@
               type: i0.HostListener,
               args: ['keydown.enter', ['$event', '"ENTER"']]
           }] }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(CheckboxComponent, { className: "CheckboxComponent", filePath: "checkbox/checkbox.component.ts", lineNumber: 59 }); })();
 
   class DatasetAwareFormComponent extends BaseFormCustomComponent {
       get modelByKey() {
@@ -823,15 +841,15 @@
       static { this.ɵfac = function DatasetAwareFormComponent_Factory(t) { return new (t || DatasetAwareFormComponent)(i0__namespace.ɵɵinject(i0__namespace.Injector), i0__namespace.ɵɵinject(i2.WidgetConfig), i0__namespace.ɵɵinjectAttribute('groupby')); }; }
       static { this.ɵprov = /*@__PURE__*/ i0__namespace.ɵɵdefineInjectable({ token: DatasetAwareFormComponent, factory: DatasetAwareFormComponent.ɵfac }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(DatasetAwareFormComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(DatasetAwareFormComponent, [{
           type: i0.Injectable
-      }], function () { return [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
                   type: i0.Inject,
                   args: [i2.WidgetConfig]
               }] }, { type: undefined, decorators: [{
                   type: i0.Attribute,
                   args: ['groupby']
-              }] }]; }, null); })();
+              }] }], null); })();
 
   const checkboxsetProps = new Map([
       ['class', i2.PROP_STRING],
@@ -867,60 +885,61 @@
   };
 
   const _c0$a = ["wmCheckboxset", ""];
-  const _c1$9 = function (a0) { return { "disabled": a0 }; };
+  const _c1$9 = (a0, a1) => ["checkbox", "app-checkbox", a0, a1];
+  const _c2$3 = a0 => ({ "disabled": a0 });
+  const _c3$1 = a0 => ({ "collapsible-content": a0 });
+  const _c4$1 = (a0, a1) => ["checkbox", "app-checkbox", "group-list-item", a0, a1];
   function CheckboxsetComponent_ng_template_0_li_0_label_1_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelementStart(0, "label", 8);
       i0__namespace.ɵɵelement(1, "input", 9)(2, "span", 10);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const ctx_r9 = i0__namespace.ɵɵnextContext();
-      const item_r5 = ctx_r9.$implicit;
-      const i_r6 = ctx_r9.index;
-      const ctx_r7 = i0__namespace.ɵɵnextContext(2);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(12, _c1$9, ctx_r7.disabled || ctx_r7.readonly))("title", item_r5.label);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("name", "checkboxset_" + ctx_r7.widgetId)("tabindex", ctx_r7.tabindex)("disabled", ctx_r7.disabled || ctx_r7.readonly)("value", item_r5.key)("tabindex", ctx_r7.tabindex)("checked", item_r5.selected);
-      i0__namespace.ɵɵattribute("aria-label", item_r5.key)("aria-checked", item_r5.selected)("data-attr-index", i_r6);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("textContent", item_r5.label);
+      const ctx_r3 = i0__namespace.ɵɵnextContext();
+      const item_r2 = ctx_r3.$implicit;
+      const i_r5 = ctx_r3.index;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(2);
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(12, _c2$3, ctx_r2.disabled || ctx_r2.readonly))("title", item_r2.label);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r2.key)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
+      i0__namespace.ɵɵattribute("aria-label", item_r2.key)("aria-checked", item_r2.selected)("data-attr-index", i_r5);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("textContent", item_r2.label);
   } }
   function CheckboxsetComponent_ng_template_0_li_0_label_2_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelementStart(0, "label", 11);
       i0__namespace.ɵɵelement(1, "input", 9)(2, "span", 12);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const ctx_r10 = i0__namespace.ɵɵnextContext();
-      const item_r5 = ctx_r10.$implicit;
-      const i_r6 = ctx_r10.index;
-      const ctx_r8 = i0__namespace.ɵɵnextContext(2);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(10, _c1$9, ctx_r8.disabled || ctx_r8.readonly));
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("name", "checkboxset_" + ctx_r8.widgetId)("tabindex", ctx_r8.tabindex)("disabled", ctx_r8.disabled || ctx_r8.readonly)("value", item_r5.key)("tabindex", ctx_r8.tabindex)("checked", item_r5.selected);
-      i0__namespace.ɵɵattribute("aria-label", item_r5.key)("aria-checked", item_r5.selected)("data-attr-index", i_r6);
+      const ctx_r3 = i0__namespace.ɵɵnextContext();
+      const item_r2 = ctx_r3.$implicit;
+      const i_r5 = ctx_r3.index;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(2);
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(10, _c2$3, ctx_r2.disabled || ctx_r2.readonly));
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r2.key)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
+      i0__namespace.ɵɵattribute("aria-label", item_r2.key)("aria-checked", item_r2.selected)("data-attr-index", i_r5);
   } }
-  const _c2$3 = function (a2, a3) { return ["checkbox", "app-checkbox", a2, a3]; };
   function CheckboxsetComponent_ng_template_0_li_0_Template(rf, ctx) { if (rf & 1) {
-      const _r12 = i0__namespace.ɵɵgetCurrentView();
+      const _r1 = i0__namespace.ɵɵgetCurrentView();
       i0__namespace.ɵɵelementStart(0, "li", 5);
-      i0__namespace.ɵɵlistener("click", function CheckboxsetComponent_ng_template_0_li_0_Template_li_click_0_listener($event) { const restoredCtx = i0__namespace.ɵɵrestoreView(_r12); const item_r5 = restoredCtx.$implicit; const ctx_r11 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r11.onCheckboxLabelClick($event, item_r5.key)); });
-      i0__namespace.ɵɵtemplate(1, CheckboxsetComponent_ng_template_0_li_0_label_1_Template, 3, 14, "label", 6);
-      i0__namespace.ɵɵtemplate(2, CheckboxsetComponent_ng_template_0_li_0_label_2_Template, 3, 12, "label", 7);
+      i0__namespace.ɵɵlistener("click", function CheckboxsetComponent_ng_template_0_li_0_Template_li_click_0_listener($event) { const item_r2 = i0__namespace.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.onCheckboxLabelClick($event, item_r2.key)); });
+      i0__namespace.ɵɵtemplate(1, CheckboxsetComponent_ng_template_0_li_0_label_1_Template, 3, 14, "label", 6)(2, CheckboxsetComponent_ng_template_0_li_0_label_2_Template, 3, 12, "label", 7);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const item_r5 = ctx.$implicit;
-      const ctx_r4 = i0__namespace.ɵɵnextContext(2);
-      i0__namespace.ɵɵclassProp("active", item_r5.selected);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(7, _c2$3, ctx_r4.itemclass, ctx_r4.itemsPerRowClass))("wmItemTemplate", ctx_r4.content)("userComponentParams", item_r5);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngIf", !ctx_r4.content);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngIf", ctx_r4.content);
+      const item_r2 = ctx.$implicit;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(2);
+      i0__namespace.ɵɵclassProp("active", item_r2.selected);
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(7, _c1$9, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r2);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngIf", !ctx_r2.content);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngIf", ctx_r2.content);
   } }
   function CheckboxsetComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵtemplate(0, CheckboxsetComponent_ng_template_0_li_0_Template, 3, 10, "li", 4);
   } if (rf & 2) {
-      const ctx_r0 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵproperty("ngForOf", ctx_r0.datasetItems);
+      const ctx_r2 = i0__namespace.ɵɵnextContext();
+      i0__namespace.ɵɵproperty("ngForOf", ctx_r2.datasetItems);
   } }
   function CheckboxsetComponent_div_2_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelement(0, "div", 13);
@@ -928,102 +947,98 @@
   function CheckboxsetComponent_ng_template_3_li_0_i_6_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelement(0, "i", 23);
   } if (rf & 2) {
-      const ctx_r15 = i0__namespace.ɵɵnextContext(3);
-      i0__namespace.ɵɵpropertyInterpolate2("title", "", ctx_r15.appLocale.LABEL_COLLAPSE, "/", ctx_r15.appLocale.LABEL_EXPAND, "");
+      const ctx_r2 = i0__namespace.ɵɵnextContext(3);
+      i0__namespace.ɵɵpropertyInterpolate2("title", "", ctx_r2.appLocale.LABEL_COLLAPSE, "/", ctx_r2.appLocale.LABEL_EXPAND, "");
   } }
   function CheckboxsetComponent_ng_template_3_li_0_span_7_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelement(0, "span", 24);
   } if (rf & 2) {
-      const groupObj_r14 = i0__namespace.ɵɵnextContext().$implicit;
-      i0__namespace.ɵɵproperty("textContent", groupObj_r14.data.length);
+      const groupObj_r7 = i0__namespace.ɵɵnextContext().$implicit;
+      i0__namespace.ɵɵproperty("textContent", groupObj_r7.data.length);
   } }
   function CheckboxsetComponent_ng_template_3_li_0_li_8_label_1_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelementStart(0, "label", 8);
       i0__namespace.ɵɵelement(1, "input", 26)(2, "span", 10);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const ctx_r23 = i0__namespace.ɵɵnextContext();
-      const item_r19 = ctx_r23.$implicit;
-      const i_r20 = ctx_r23.index;
-      const ctx_r21 = i0__namespace.ɵɵnextContext(3);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(10, _c1$9, ctx_r21.disabled || ctx_r21.readonly))("title", item_r19.label);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("name", "checkboxset_" + ctx_r21.widgetId)("tabindex", ctx_r21.tabindex)("disabled", ctx_r21.disabled || ctx_r21.readonly)("value", item_r19.key)("tabindex", ctx_r21.tabindex)("checked", item_r19.selected);
-      i0__namespace.ɵɵattribute("data-attr-index", i_r20);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("textContent", item_r19.label);
+      const ctx_r9 = i0__namespace.ɵɵnextContext();
+      const item_r9 = ctx_r9.$implicit;
+      const i_r11 = ctx_r9.index;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(3);
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(10, _c2$3, ctx_r2.disabled || ctx_r2.readonly))("title", item_r9.label);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r9.key)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
+      i0__namespace.ɵɵattribute("data-attr-index", i_r11);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("textContent", item_r9.label);
   } }
   function CheckboxsetComponent_ng_template_3_li_0_li_8_label_2_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelementStart(0, "label", 11);
       i0__namespace.ɵɵelement(1, "input", 26)(2, "span", 27);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const ctx_r24 = i0__namespace.ɵɵnextContext();
-      const item_r19 = ctx_r24.$implicit;
-      const i_r20 = ctx_r24.index;
-      const ctx_r22 = i0__namespace.ɵɵnextContext(3);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(8, _c1$9, ctx_r22.disabled || ctx_r22.readonly));
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("name", "checkboxset_" + ctx_r22.widgetId)("tabindex", ctx_r22.tabindex)("disabled", ctx_r22.disabled || ctx_r22.readonly)("value", item_r19.key)("tabindex", ctx_r22.tabindex)("checked", item_r19.selected);
-      i0__namespace.ɵɵattribute("data-attr-index", i_r20);
+      const ctx_r9 = i0__namespace.ɵɵnextContext();
+      const item_r9 = ctx_r9.$implicit;
+      const i_r11 = ctx_r9.index;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(3);
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(8, _c2$3, ctx_r2.disabled || ctx_r2.readonly));
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r9.key)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
+      i0__namespace.ɵɵattribute("data-attr-index", i_r11);
   } }
-  const _c3$1 = function (a3, a4) { return ["checkbox", "app-checkbox", "group-list-item", a3, a4]; };
   function CheckboxsetComponent_ng_template_3_li_0_li_8_Template(rf, ctx) { if (rf & 1) {
-      const _r26 = i0__namespace.ɵɵgetCurrentView();
+      const _r8 = i0__namespace.ɵɵgetCurrentView();
       i0__namespace.ɵɵelementStart(0, "li", 25);
-      i0__namespace.ɵɵlistener("click", function CheckboxsetComponent_ng_template_3_li_0_li_8_Template_li_click_0_listener($event) { const restoredCtx = i0__namespace.ɵɵrestoreView(_r26); const item_r19 = restoredCtx.$implicit; const ctx_r25 = i0__namespace.ɵɵnextContext(3); return i0__namespace.ɵɵresetView(ctx_r25.onCheckboxLabelClick($event, item_r19)); });
-      i0__namespace.ɵɵtemplate(1, CheckboxsetComponent_ng_template_3_li_0_li_8_label_1_Template, 3, 12, "label", 6);
-      i0__namespace.ɵɵtemplate(2, CheckboxsetComponent_ng_template_3_li_0_li_8_label_2_Template, 3, 10, "label", 7);
+      i0__namespace.ɵɵlistener("click", function CheckboxsetComponent_ng_template_3_li_0_li_8_Template_li_click_0_listener($event) { const item_r9 = i0__namespace.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0__namespace.ɵɵnextContext(3); return i0__namespace.ɵɵresetView(ctx_r2.onCheckboxLabelClick($event, item_r9)); });
+      i0__namespace.ɵɵtemplate(1, CheckboxsetComponent_ng_template_3_li_0_li_8_label_1_Template, 3, 12, "label", 6)(2, CheckboxsetComponent_ng_template_3_li_0_li_8_label_2_Template, 3, 10, "label", 7);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const item_r19 = ctx.$implicit;
-      const ctx_r17 = i0__namespace.ɵɵnextContext(3);
-      i0__namespace.ɵɵclassProp("active", item_r19.selected);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(7, _c3$1, ctx_r17.itemclass, ctx_r17.itemsPerRowClass))("wmItemTemplate", ctx_r17.content)("userComponentParams", item_r19);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngIf", !ctx_r17.content);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngIf", ctx_r17.content);
+      const item_r9 = ctx.$implicit;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(3);
+      i0__namespace.ɵɵclassProp("active", item_r9.selected);
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(7, _c4$1, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r9);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngIf", !ctx_r2.content);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngIf", ctx_r2.content);
   } }
-  const _c4$1 = function (a0) { return { "collapsible-content": a0 }; };
   function CheckboxsetComponent_ng_template_3_li_0_Template(rf, ctx) { if (rf & 1) {
-      const _r28 = i0__namespace.ɵɵgetCurrentView();
+      const _r6 = i0__namespace.ɵɵgetCurrentView();
       i0__namespace.ɵɵelementStart(0, "li", 15)(1, "ul", 16)(2, "li", 17);
-      i0__namespace.ɵɵlistener("click", function CheckboxsetComponent_ng_template_3_li_0_Template_li_click_2_listener($event) { i0__namespace.ɵɵrestoreView(_r28); const ctx_r27 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r27.handleHeaderClick($event)); });
+      i0__namespace.ɵɵlistener("click", function CheckboxsetComponent_ng_template_3_li_0_Template_li_click_2_listener($event) { i0__namespace.ɵɵrestoreView(_r6); const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.handleHeaderClick($event)); });
       i0__namespace.ɵɵelementStart(3, "h4", 18);
       i0__namespace.ɵɵtext(4);
       i0__namespace.ɵɵelementStart(5, "div", 19);
-      i0__namespace.ɵɵtemplate(6, CheckboxsetComponent_ng_template_3_li_0_i_6_Template, 1, 2, "i", 20);
-      i0__namespace.ɵɵtemplate(7, CheckboxsetComponent_ng_template_3_li_0_span_7_Template, 1, 1, "span", 21);
+      i0__namespace.ɵɵtemplate(6, CheckboxsetComponent_ng_template_3_li_0_i_6_Template, 1, 3, "i", 20)(7, CheckboxsetComponent_ng_template_3_li_0_span_7_Template, 1, 1, "span", 21);
       i0__namespace.ɵɵelementEnd()()();
       i0__namespace.ɵɵtemplate(8, CheckboxsetComponent_ng_template_3_li_0_li_8_Template, 3, 10, "li", 22);
       i0__namespace.ɵɵelementEnd()();
   } if (rf & 2) {
-      const groupObj_r14 = ctx.$implicit;
-      const ctx_r13 = i0__namespace.ɵɵnextContext(2);
+      const groupObj_r7 = ctx.$implicit;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(2);
       i0__namespace.ɵɵadvance(2);
-      i0__namespace.ɵɵproperty("title", groupObj_r14.key)("ngClass", i0__namespace.ɵɵpureFunction1(6, _c4$1, ctx_r13.collapsible));
+      i0__namespace.ɵɵproperty("title", groupObj_r7.key)("ngClass", i0__namespace.ɵɵpureFunction1(6, _c3$1, ctx_r2.collapsible));
       i0__namespace.ɵɵadvance(2);
-      i0__namespace.ɵɵtextInterpolate1("", groupObj_r14.key, " ");
+      i0__namespace.ɵɵtextInterpolate1("", groupObj_r7.key, " ");
       i0__namespace.ɵɵadvance(2);
-      i0__namespace.ɵɵproperty("ngIf", ctx_r13.collapsible);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngIf", ctx_r13.showcount);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngForOf", groupObj_r14.data);
+      i0__namespace.ɵɵproperty("ngIf", ctx_r2.collapsible);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngIf", ctx_r2.showcount);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngForOf", groupObj_r7.data);
   } }
   function CheckboxsetComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵtemplate(0, CheckboxsetComponent_ng_template_3_li_0_Template, 9, 8, "li", 14);
   } if (rf & 2) {
-      const ctx_r3 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵproperty("ngForOf", ctx_r3.groupedData);
+      const ctx_r2 = i0__namespace.ɵɵnextContext();
+      i0__namespace.ɵɵproperty("ngForOf", ctx_r2.groupedData);
   } }
   const DEFAULT_CLS$3 = 'app-checkboxset list-group inline';
   const WIDGET_CONFIG$b = { widgetType: 'wm-checkboxset', hostClass: DEFAULT_CLS$3 };
   class CheckboxsetComponent extends DatasetAwareFormComponent {
       static { this.initializeProps = registerProps$b(); }
-      constructor(inj) {
-          super(inj, WIDGET_CONFIG$b);
+      constructor(inj, explicitContext) {
+          super(inj, WIDGET_CONFIG$b, explicitContext);
           this.layout = '';
           i2.styler(this.nativeElement, this);
           this.multiple = true;
@@ -1077,38 +1092,43 @@
               super.onPropertyChange(key, nv, ov);
           }
       }
-      static { this.ɵfac = function CheckboxsetComponent_Factory(t) { return new (t || CheckboxsetComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+      static { this.ɵfac = function CheckboxsetComponent_Factory(t) { return new (t || CheckboxsetComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: CheckboxsetComponent, selectors: [["", "wmCheckboxset", ""]], hostBindings: function CheckboxsetComponent_HostBindings(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵlistener("keydown.enter", function CheckboxsetComponent_keydown_enter_HostBindingHandler($event) { return ctx.onKeyDown($event, "ENTER"); });
           } }, exportAs: ["wmCheckboxset"], features: [i0__namespace.ɵɵProvidersFeature([
                   i2.provideAs(CheckboxsetComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(CheckboxsetComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(CheckboxsetComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$a, decls: 5, vars: 4, consts: [[3, "ngIf", "ngIfElse"], ["hidden", "", 1, "model-holder", 3, "disabled"], ["class", "readonly-wrapper", 4, "ngIf"], ["groupedListTemplate", ""], ["partialContainer", "", "role", "presentation", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], ["partialContainer", "", "role", "presentation", 3, "ngClass", "wmItemTemplate", "userComponentParams", "click"], ["class", "app-checkboxset-label", 3, "ngClass", "title", 4, "ngIf"], ["class", "app-checkboxset-label", 3, "ngClass", 4, "ngIf"], [1, "app-checkboxset-label", 3, "ngClass", "title"], ["type", "checkbox", 3, "name", "tabindex", "disabled", "value", "checked"], [1, "caption", 3, "textContent"], [1, "app-checkboxset-label", 3, "ngClass"], ["partial-container-target", "", 1, "caption", "customTemplate"], [1, "readonly-wrapper"], ["class", "app-list-item-group", "role", "presentation", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "app-list-item-group"], [1, "item-group"], [1, "list-group-header", 3, "title", "ngClass", "click"], [1, "group-title"], [1, "header-action"], ["class", "app-icon wi action wi-chevron-up", 3, "title", 4, "ngIf"], ["class", "label label-default", 3, "textContent", 4, "ngIf"], ["partialContainer", "", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], [1, "app-icon", "wi", "action", "wi-chevron-up", 3, "title"], [1, "label", "label-default", 3, "textContent"], ["partialContainer", "", 3, "ngClass", "wmItemTemplate", "userComponentParams", "click"], ["type", "checkbox", "aria-label", "checkbox group", 3, "name", "tabindex", "disabled", "value", "checked"], ["partial-container-target", "", 1, "caption"]], template: function CheckboxsetComponent_Template(rf, ctx) { if (rf & 1) {
-              i0__namespace.ɵɵtemplate(0, CheckboxsetComponent_ng_template_0_Template, 1, 1, "ng-template", 0);
-              i0__namespace.ɵɵelement(1, "input", 1);
-              i0__namespace.ɵɵtemplate(2, CheckboxsetComponent_div_2_Template, 1, 0, "div", 2);
-              i0__namespace.ɵɵtemplate(3, CheckboxsetComponent_ng_template_3_Template, 1, 1, "ng-template", null, 3, i0__namespace.ɵɵtemplateRefExtractor);
+              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$a, decls: 5, vars: 4, consts: [["groupedListTemplate", ""], [3, "ngIf", "ngIfElse"], ["hidden", "", 1, "model-holder", 3, "disabled"], ["class", "readonly-wrapper", 4, "ngIf"], ["partialContainer", "", "role", "presentation", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], ["partialContainer", "", "role", "presentation", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], ["class", "app-checkboxset-label", 3, "ngClass", "title", 4, "ngIf"], ["class", "app-checkboxset-label", 3, "ngClass", 4, "ngIf"], [1, "app-checkboxset-label", 3, "ngClass", "title"], ["type", "checkbox", 3, "name", "tabindex", "disabled", "value", "checked"], [1, "caption", 3, "textContent"], [1, "app-checkboxset-label", 3, "ngClass"], ["partial-container-target", "", 1, "caption", "customTemplate"], [1, "readonly-wrapper"], ["class", "app-list-item-group", "role", "presentation", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "app-list-item-group"], [1, "item-group"], [1, "list-group-header", 3, "click", "title", "ngClass"], [1, "group-title"], [1, "header-action"], ["class", "app-icon wi action wi-chevron-up", 3, "title", 4, "ngIf"], ["class", "label label-default", 3, "textContent", 4, "ngIf"], ["partialContainer", "", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], [1, "app-icon", "wi", "action", "wi-chevron-up", 3, "title"], [1, "label", "label-default", 3, "textContent"], ["partialContainer", "", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], ["type", "checkbox", "aria-label", "checkbox group", 3, "name", "tabindex", "disabled", "value", "checked"], ["partial-container-target", "", 1, "caption"]], template: function CheckboxsetComponent_Template(rf, ctx) { if (rf & 1) {
+              i0__namespace.ɵɵtemplate(0, CheckboxsetComponent_ng_template_0_Template, 1, 1, "ng-template", 1);
+              i0__namespace.ɵɵelement(1, "input", 2);
+              i0__namespace.ɵɵtemplate(2, CheckboxsetComponent_div_2_Template, 1, 0, "div", 3)(3, CheckboxsetComponent_ng_template_3_Template, 1, 1, "ng-template", null, 0, i0__namespace.ɵɵtemplateRefExtractor);
           } if (rf & 2) {
-              const _r2 = i0__namespace.ɵɵreference(4);
-              i0__namespace.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", _r2);
-              i0__namespace.ɵɵadvance(1);
+              const groupedListTemplate_r12 = i0__namespace.ɵɵreference(4);
+              i0__namespace.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", groupedListTemplate_r12);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("disabled", ctx.disabled || ctx.readonly);
-              i0__namespace.ɵɵadvance(1);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("ngIf", ctx.readonly || ctx.disabled);
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgForOf, i1__namespace.NgIf, i2__namespace.ItemTemplateDirective, i2__namespace.PartialParamHandlerDirective, i2__namespace.PartialContainerDirective, i2__namespace.TextContentDirective], encapsulation: 2 }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CheckboxsetComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CheckboxsetComponent, [{
           type: i0.Component,
           args: [{ selector: '[wmCheckboxset]', exportAs: 'wmCheckboxset', providers: [
                       i2.provideAs(CheckboxsetComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(CheckboxsetComponent, i2$1.NG_VALIDATORS, true),
                       i2.provideAsWidgetRef(CheckboxsetComponent)
                   ], template: "<ng-template [ngIf]=\"!groupby\" [ngIfElse]=\"groupedListTemplate\">\n    <li [ngClass]=\"['checkbox', 'app-checkbox', itemclass, itemsPerRowClass]\"\n        [class.active]=\"item.selected\"\n        *ngFor=\"let item of datasetItems; let i = index\"\n        [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n        (click)=\"onCheckboxLabelClick($event, item.key)\" role=\"presentation\">\n        <!-- Default item template -->\n        <label *ngIf=\"!content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" [title]=\"item.label\">\n            <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\" [attr.aria-label]=\"item.key\"\n                   [tabindex]=\"tabindex\" [attr.aria-checked]=\"item.selected\"\n                   [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                   [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n            <span class=\"caption\" [textContent]=\"item.label\"></span>\n        </label>\n        <!-- Custom partial template -->\n        <label *ngIf=\"content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" >\n            <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\" [attr.aria-label]=\"item.key\"\n                   [tabindex]=\"tabindex\" [attr.aria-checked]=\"item.selected\"\n                   [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                   [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n            <span class=\"caption customTemplate\" partial-container-target></span>\n        </label>\n    </li>\n</ng-template>\n<input [disabled]=\"disabled || readonly\" hidden class=\"model-holder\">\n<div *ngIf=\"readonly || disabled\" class=\"readonly-wrapper\"></div>\n\n<!-- This template will be displayed when groupby is specified. -->\n<ng-template #groupedListTemplate>\n    <li *ngFor=\"let groupObj of groupedData\" class=\"app-list-item-group\" role=\"presentation\">\n        <ul class=\"item-group\">\n            <li class=\"list-group-header\" (click)=\"handleHeaderClick($event)\" [title]=\"groupObj.key\" [ngClass]=\"{'collapsible-content': collapsible}\">\n                <h4 class=\"group-title\">{{groupObj.key}}\n                    <div class=\"header-action\">\n                        <i class=\"app-icon wi action wi-chevron-up\" *ngIf=\"collapsible\" title=\"{{appLocale.LABEL_COLLAPSE}}/{{appLocale.LABEL_EXPAND}}\"></i>\n                        <span *ngIf=\"showcount\" class=\"label label-default\" [textContent]=\"groupObj.data.length\"></span>\n                    </div>\n                </h4>\n            </li>\n            <li *ngFor=\"let item of groupObj.data; let i = index;\"\n                [ngClass]=\"['checkbox', 'app-checkbox', 'group-list-item', itemclass, itemsPerRowClass]\"\n                [class.active]=\"item.selected\"\n                [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n                (click)=\"onCheckboxLabelClick($event, item)\">\n                <!-- Default item template -->\n                <label *ngIf=\"!content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" [title]=\"item.label\">\n                    <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\" aria-label=\"checkbox group\"\n                           [tabindex]=\"tabindex\"\n                           [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                           [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption\" [textContent]=\"item.label\"></span>\n                </label>\n                <!-- Custom partial template -->\n                <label *ngIf=\"content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" >\n                    <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\" aria-label=\"checkbox group\"\n                           [tabindex]=\"tabindex\"\n                           [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                           [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption\" partial-container-target></span>\n                </label>\n            </li>\n        </ul>\n    </li>\n</ng-template>\n" }]
-      }], function () { return [{ type: i0__namespace.Injector }]; }, { onKeyDown: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { onKeyDown: [{
               type: i0.HostListener,
               args: ['keydown.enter', ['$event', '"ENTER"']]
           }] }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(CheckboxsetComponent, { className: "CheckboxsetComponent", filePath: "checkboxset/checkboxset.component.ts", lineNumber: 26 }); })();
 
   const registerProps$a = () => {
       i2.register('wm-form-group', new Map([
@@ -1132,8 +1152,8 @@
   };
   class CompositeDirective extends i2.StylableComponent {
       static { this.initializeProps = registerProps$a(); }
-      constructor(inj) {
-          super(inj, WIDGET_CONFIG$a);
+      constructor(inj, explicitContext) {
+          super(inj, WIDGET_CONFIG$a, explicitContext);
           i2.styler(this.nativeElement, this, i2.APPLY_STYLES_TYPE.CONTAINER);
       }
       /**
@@ -1169,7 +1189,7 @@
           i1$1.addForIdAttributes(this.nativeElement);
           this.assignRequiredToSubComponents();
       }
-      static { this.ɵfac = function CompositeDirective_Factory(t) { return new (t || CompositeDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+      static { this.ɵfac = function CompositeDirective_Factory(t) { return new (t || CompositeDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: CompositeDirective, selectors: [["div", "wmComposite", ""]], contentQueries: function CompositeDirective_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
               i0__namespace.ɵɵcontentQuery(dirIndex, i2.WidgetRef, 5);
           } if (rf & 2) {
@@ -1179,7 +1199,7 @@
                   i2.provideAsWidgetRef(CompositeDirective)
               ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CompositeDirective, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CompositeDirective, [{
           type: i0.Directive,
           args: [{
                   selector: 'div[wmComposite]',
@@ -1187,7 +1207,12 @@
                       i2.provideAsWidgetRef(CompositeDirective)
                   ]
               }]
-      }], function () { return [{ type: i0__namespace.Injector }]; }, { componentRefs: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { componentRefs: [{
               type: i0.ContentChildren,
               args: [i2.WidgetRef, { descendants: true }]
           }] }); })();
@@ -1280,8 +1305,8 @@
           }
           i2.styler(this.inputEl.nativeElement, this);
       }
-      constructor(inj, config) {
-          super(inj, config);
+      constructor(inj, config, explicitContext) {
+          super(inj, config, explicitContext);
           // possible values for ngModelOptions are 'blur' and 'change'
           // default is 'blur'
           this.ngModelOptions = {
@@ -1291,19 +1316,24 @@
           updateOn = updateOn === 'default' ? 'change' : updateOn;
           this.ngModelOptions.updateOn = updateOn;
       }
-      static { this.ɵfac = function BaseInput_Factory(t) { return new (t || BaseInput)(i0__namespace.ɵɵinject(i0__namespace.Injector), i0__namespace.ɵɵinject(i2.WidgetConfig)); }; }
+      static { this.ɵfac = function BaseInput_Factory(t) { return new (t || BaseInput)(i0__namespace.ɵɵinject(i0__namespace.Injector), i0__namespace.ɵɵinject(i2.WidgetConfig), i0__namespace.ɵɵinject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵprov = /*@__PURE__*/ i0__namespace.ɵɵdefineInjectable({ token: BaseInput, factory: BaseInput.ɵfac }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(BaseInput, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(BaseInput, [{
           type: i0.Injectable
-      }], function () { return [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
                   type: i0.Inject,
                   args: [i2.WidgetConfig]
-              }] }]; }, null); })();
+              }] }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], null); })();
 
-  class NumberLocale extends BaseInput {
-      constructor(inj, config, i18nService, trailingZeroDecimalPipe) {
-          super(inj, config);
+  exports.NumberLocale = class NumberLocale extends BaseInput {
+      constructor(inj, config, i18nService, trailingZeroDecimalPipe, explicitContext) {
+          super(inj, config, explicitContext);
           this.i18nService = i18nService;
           this.trailingZeroDecimalPipe = trailingZeroDecimalPipe;
           this.isDefaultQuery = true;
@@ -1736,7 +1766,13 @@
               super.onPropertyChange(key, nv, ov);
           }
       }
-  }
+  };
+  exports.NumberLocale = tslib.__decorate([
+      tslib.__param(4, i0.Inject('EXPLICIT_CONTEXT')),
+      tslib.__param(4, i0.Optional()),
+      tslib.__metadata("design:paramtypes", [i0.Injector, Object, i1$1.AbstractI18nService,
+          i2.TrailingZeroDecimalPipe, Object])
+  ], exports.NumberLocale);
 
   const _c0$9 = ["input"];
   const _c1$8 = ["wmNumber", ""];
@@ -1744,12 +1780,12 @@
       widgetType: 'wm-number',
       hostClass: 'app-input-wrapper'
   };
-  class NumberComponent extends NumberLocale {
+  class NumberComponent extends exports.NumberLocale {
       static { this.initializeProps = registerProps$9(); }
-      constructor(inj, i18nService, trailingZeroDecimalPipe) {
-          super(inj, WIDGET_CONFIG$9, i18nService, trailingZeroDecimalPipe);
+      constructor(inj, i18nService, trailingZeroDecimalPipe, explicitContext) {
+          super(inj, WIDGET_CONFIG$9, i18nService, trailingZeroDecimalPipe, explicitContext);
       }
-      static { this.ɵfac = function NumberComponent_Factory(t) { return new (t || NumberComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.AbstractI18nService), i0__namespace.ɵɵdirectiveInject(i2__namespace.TrailingZeroDecimalPipe)); }; }
+      static { this.ɵfac = function NumberComponent_Factory(t) { return new (t || NumberComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.AbstractI18nService), i0__namespace.ɵɵdirectiveInject(i2__namespace.TrailingZeroDecimalPipe), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: NumberComponent, selectors: [["", "wmNumber", ""]], viewQuery: function NumberComponent_Query(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵviewQuery(_c0$9, 7);
               i0__namespace.ɵɵviewQuery(i2$1.NgModel, 7);
@@ -1761,29 +1797,36 @@
                   i2.provideAs(NumberComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(NumberComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(NumberComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$8, decls: 2, vars: 14, consts: [["inputmode", "decimal", "focus-target", "", "role", "textbox", "type", "text", 1, "form-control", "app-textbox", "app-number-input", 3, "ngModel", "readonly", "disabled", "pattern", "autofocus", "ngClass", "ngStyle", "ngModelOptions", "required", "ngModelChange", "blur", "focus", "input", "keypress", "keydown.backspace", "keydown.enter", "keydown.ArrowUp", "keydown.ArrowDown"], ["input", ""]], template: function NumberComponent_Template(rf, ctx) { if (rf & 1) {
-              i0__namespace.ɵɵelementStart(0, "input", 0, 1);
-              i0__namespace.ɵɵlistener("ngModelChange", function NumberComponent_Template_input_ngModelChange_0_listener($event) { return ctx.onModelChange($event); })("blur", function NumberComponent_Template_input_blur_0_listener($event) { ctx.handleBlur($event); return ctx.checkForTrailingZeros($event); })("focus", function NumberComponent_Template_input_focus_0_listener($event) { return ctx.checkForTrailingZeros($event); })("input", function NumberComponent_Template_input_input_0_listener($event) { return ctx.onInputChange($event.target.value); })("keypress", function NumberComponent_Template_input_keypress_0_listener($event) { return ctx.validateInputEntry($event); })("keydown.backspace", function NumberComponent_Template_input_keydown_backspace_0_listener($event) { return ctx.onBackspace($event); })("keydown.enter", function NumberComponent_Template_input_keydown_enter_0_listener($event) { return ctx.onEnter($event); })("keydown.ArrowUp", function NumberComponent_Template_input_keydown_ArrowUp_0_listener($event) { return ctx.onArrowPress($event, "UP"); })("keydown.ArrowDown", function NumberComponent_Template_input_keydown_ArrowDown_0_listener($event) { return ctx.onArrowPress($event, "DOWN"); });
+              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$8, decls: 2, vars: 14, consts: [["input", ""], ["inputmode", "decimal", "focus-target", "", "role", "textbox", "type", "text", 1, "form-control", "app-textbox", "app-number-input", 3, "ngModelChange", "blur", "focus", "input", "keypress", "keydown.backspace", "keydown.enter", "keydown.ArrowUp", "keydown.ArrowDown", "ngModel", "readonly", "disabled", "pattern", "autofocus", "ngClass", "ngStyle", "ngModelOptions", "required"]], template: function NumberComponent_Template(rf, ctx) { if (rf & 1) {
+              const _r1 = i0__namespace.ɵɵgetCurrentView();
+              i0__namespace.ɵɵelementStart(0, "input", 1, 0);
+              i0__namespace.ɵɵlistener("ngModelChange", function NumberComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onModelChange($event)); })("blur", function NumberComponent_Template_input_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); ctx.handleBlur($event); return i0__namespace.ɵɵresetView(ctx.checkForTrailingZeros($event)); })("focus", function NumberComponent_Template_input_focus_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.checkForTrailingZeros($event)); })("input", function NumberComponent_Template_input_input_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onInputChange($event.target.value)); })("keypress", function NumberComponent_Template_input_keypress_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.validateInputEntry($event)); })("keydown.backspace", function NumberComponent_Template_input_keydown_backspace_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onBackspace($event)); })("keydown.enter", function NumberComponent_Template_input_keydown_enter_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onEnter($event)); })("keydown.ArrowUp", function NumberComponent_Template_input_keydown_ArrowUp_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onArrowPress($event, "UP")); })("keydown.ArrowDown", function NumberComponent_Template_input_keydown_ArrowDown_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onArrowPress($event, "DOWN")); });
               i0__namespace.ɵɵelementEnd();
           } if (rf & 2) {
               i0__namespace.ɵɵproperty("ngModel", ctx.displayValue)("readonly", ctx.readonly)("disabled", ctx.disabled)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("ngModelOptions", ctx.ngModelOptions)("required", ctx.required);
               i0__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.PatternValidator, i2$1__namespace.NgModel], encapsulation: 2 }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(NumberComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(NumberComponent, [{
           type: i0.Component,
           args: [{ selector: '[wmNumber]', providers: [
                       i2.provideAs(NumberComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(NumberComponent, i2$1.NG_VALIDATORS, true),
                       i2.provideAsWidgetRef(NumberComponent)
                   ], template: "<input class=\"form-control app-textbox app-number-input\"\n       inputmode=\"decimal\"\n       focus-target\n       [attr.name]=\"name\"\n       role=\"textbox\"\n       type=\"text\"\n       [ngModel]=\"displayValue\"\n       [readonly]=\"readonly\"\n       [disabled]=\"disabled\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (ngModelChange)=\"onModelChange($event)\"\n       (blur)=\"handleBlur($event); checkForTrailingZeros($event);\"\n       (focus)=\"checkForTrailingZeros($event)\"\n       (input)=\"onInputChange($event.target.value)\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [required]=\"required\"\n       (keypress)=\"validateInputEntry($event)\"\n       (keydown.backspace)=\"onBackspace($event)\"\n       (keydown.enter)=\"onEnter($event)\"\n       (keydown.ArrowUp)=\"onArrowPress($event, 'UP')\"\n       (keydown.ArrowDown)=\"onArrowPress($event, 'DOWN')\"\n       #input>\n" }]
-      }], function () { return [{ type: i0__namespace.Injector }, { type: i1$1__namespace.AbstractI18nService }, { type: i2__namespace.TrailingZeroDecimalPipe }]; }, { inputEl: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: i1$1__namespace.AbstractI18nService }, { type: i2__namespace.TrailingZeroDecimalPipe }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { inputEl: [{
               type: i0.ViewChild,
               args: ['input', { static: true }]
           }], ngModel: [{
               type: i0.ViewChild,
               args: [i2$1.NgModel, { static: true }]
           }] }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(NumberComponent, { className: "NumberComponent", filePath: "number/number.component.ts", lineNumber: 24 }); })();
 
   const radiosetProps = new Map([
       ['class', i2.PROP_STRING],
@@ -1819,60 +1862,61 @@
   };
 
   const _c0$8 = ["wmRadioset", ""];
-  const _c1$7 = function (a0) { return { "disabled": a0 }; };
+  const _c1$7 = (a0, a1) => ["radio", "app-radio", a0, a1];
+  const _c2$2 = a0 => ({ "disabled": a0 });
+  const _c3 = a0 => ({ "collapsible-content": a0 });
+  const _c4 = (a0, a1) => ["radio", "app-radio", "group-list-item", a0, a1];
   function RadiosetComponent_ng_template_0_li_0_label_1_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelementStart(0, "label", 7);
       i0__namespace.ɵɵelement(1, "input", 8)(2, "span", 9);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const ctx_r9 = i0__namespace.ɵɵnextContext();
-      const item_r5 = ctx_r9.$implicit;
-      const i_r6 = ctx_r9.index;
-      const ctx_r7 = i0__namespace.ɵɵnextContext(2);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(10, _c1$7, ctx_r7.disabled || ctx_r7.readonly));
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("name", "radioset_" + ctx_r7.widgetId)("value", item_r5.key)("disabled", ctx_r7.disabled || ctx_r7.readonly)("tabindex", ctx_r7.tabindex)("checked", item_r5.selected);
-      i0__namespace.ɵɵattribute("aria-checked", item_r5.selected)("data-attr-index", i_r6)("aria-label", item_r5.key);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("textContent", item_r5.label);
+      const ctx_r3 = i0__namespace.ɵɵnextContext();
+      const item_r2 = ctx_r3.$implicit;
+      const i_r5 = ctx_r3.index;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(2);
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(10, _c2$2, ctx_r2.disabled || ctx_r2.readonly));
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r2.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
+      i0__namespace.ɵɵattribute("aria-checked", item_r2.selected)("data-attr-index", i_r5)("aria-label", item_r2.key);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("textContent", item_r2.label);
   } }
   function RadiosetComponent_ng_template_0_li_0_label_2_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelementStart(0, "label", 7);
       i0__namespace.ɵɵelement(1, "input", 8)(2, "span", 10);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const ctx_r10 = i0__namespace.ɵɵnextContext();
-      const item_r5 = ctx_r10.$implicit;
-      const i_r6 = ctx_r10.index;
-      const ctx_r8 = i0__namespace.ɵɵnextContext(2);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(9, _c1$7, ctx_r8.disabled || ctx_r8.readonly));
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("name", "radioset_" + ctx_r8.widgetId)("value", item_r5.key)("disabled", ctx_r8.disabled || ctx_r8.readonly)("tabindex", ctx_r8.tabindex)("checked", item_r5.selected);
-      i0__namespace.ɵɵattribute("aria-checked", item_r5.selected)("data-attr-index", i_r6)("aria-label", item_r5.key);
+      const ctx_r3 = i0__namespace.ɵɵnextContext();
+      const item_r2 = ctx_r3.$implicit;
+      const i_r5 = ctx_r3.index;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(2);
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(9, _c2$2, ctx_r2.disabled || ctx_r2.readonly));
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r2.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
+      i0__namespace.ɵɵattribute("aria-checked", item_r2.selected)("data-attr-index", i_r5)("aria-label", item_r2.key);
   } }
-  const _c2$2 = function (a2, a3) { return ["radio", "app-radio", a2, a3]; };
   function RadiosetComponent_ng_template_0_li_0_Template(rf, ctx) { if (rf & 1) {
-      const _r12 = i0__namespace.ɵɵgetCurrentView();
+      const _r1 = i0__namespace.ɵɵgetCurrentView();
       i0__namespace.ɵɵelementStart(0, "li", 5);
-      i0__namespace.ɵɵlistener("click", function RadiosetComponent_ng_template_0_li_0_Template_li_click_0_listener($event) { const restoredCtx = i0__namespace.ɵɵrestoreView(_r12); const item_r5 = restoredCtx.$implicit; const ctx_r11 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r11.onRadioLabelClick($event, item_r5.key)); });
-      i0__namespace.ɵɵtemplate(1, RadiosetComponent_ng_template_0_li_0_label_1_Template, 3, 12, "label", 6);
-      i0__namespace.ɵɵtemplate(2, RadiosetComponent_ng_template_0_li_0_label_2_Template, 3, 11, "label", 6);
+      i0__namespace.ɵɵlistener("click", function RadiosetComponent_ng_template_0_li_0_Template_li_click_0_listener($event) { const item_r2 = i0__namespace.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.onRadioLabelClick($event, item_r2.key)); });
+      i0__namespace.ɵɵtemplate(1, RadiosetComponent_ng_template_0_li_0_label_1_Template, 3, 12, "label", 6)(2, RadiosetComponent_ng_template_0_li_0_label_2_Template, 3, 11, "label", 6);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const item_r5 = ctx.$implicit;
-      const ctx_r4 = i0__namespace.ɵɵnextContext(2);
-      i0__namespace.ɵɵclassProp("active", item_r5.selected);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(7, _c2$2, ctx_r4.itemclass, ctx_r4.itemsPerRowClass))("wmItemTemplate", ctx_r4.content)("userComponentParams", item_r5);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngIf", !ctx_r4.content);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngIf", ctx_r4.content);
+      const item_r2 = ctx.$implicit;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(2);
+      i0__namespace.ɵɵclassProp("active", item_r2.selected);
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(7, _c1$7, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r2);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngIf", !ctx_r2.content);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngIf", ctx_r2.content);
   } }
   function RadiosetComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵtemplate(0, RadiosetComponent_ng_template_0_li_0_Template, 3, 10, "li", 4);
   } if (rf & 2) {
-      const ctx_r0 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵproperty("ngForOf", ctx_r0.datasetItems);
+      const ctx_r2 = i0__namespace.ɵɵnextContext();
+      i0__namespace.ɵɵproperty("ngForOf", ctx_r2.datasetItems);
   } }
   function RadiosetComponent_div_2_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelement(0, "div", 11);
@@ -1880,102 +1924,98 @@
   function RadiosetComponent_ng_template_3_li_0_i_6_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelement(0, "i", 21);
   } if (rf & 2) {
-      const ctx_r15 = i0__namespace.ɵɵnextContext(3);
-      i0__namespace.ɵɵpropertyInterpolate2("title", "", ctx_r15.appLocale.LABEL_COLLAPSE, "/", ctx_r15.appLocale.LABEL_EXPAND, "");
+      const ctx_r2 = i0__namespace.ɵɵnextContext(3);
+      i0__namespace.ɵɵpropertyInterpolate2("title", "", ctx_r2.appLocale.LABEL_COLLAPSE, "/", ctx_r2.appLocale.LABEL_EXPAND, "");
   } }
   function RadiosetComponent_ng_template_3_li_0_span_7_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelement(0, "span", 22);
   } if (rf & 2) {
-      const groupObj_r14 = i0__namespace.ɵɵnextContext().$implicit;
-      i0__namespace.ɵɵproperty("textContent", groupObj_r14.data.length);
+      const groupObj_r7 = i0__namespace.ɵɵnextContext().$implicit;
+      i0__namespace.ɵɵproperty("textContent", groupObj_r7.data.length);
   } }
   function RadiosetComponent_ng_template_3_li_0_li_8_label_1_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelementStart(0, "label", 7);
       i0__namespace.ɵɵelement(1, "input", 8)(2, "span", 9);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const ctx_r23 = i0__namespace.ɵɵnextContext();
-      const item_r19 = ctx_r23.$implicit;
-      const i_r20 = ctx_r23.index;
-      const ctx_r21 = i0__namespace.ɵɵnextContext(3);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(9, _c1$7, ctx_r21.disabled || ctx_r21.readonly));
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("name", "radioset_" + ctx_r21.widgetId)("value", item_r19.key)("disabled", ctx_r21.disabled || ctx_r21.readonly)("tabindex", ctx_r21.tabindex)("checked", item_r19.selected);
-      i0__namespace.ɵɵattribute("aria-checked", item_r19.selected)("data-attr-index", i_r20);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("textContent", item_r19.label);
+      const ctx_r9 = i0__namespace.ɵɵnextContext();
+      const item_r9 = ctx_r9.$implicit;
+      const i_r11 = ctx_r9.index;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(3);
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(9, _c2$2, ctx_r2.disabled || ctx_r2.readonly));
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r9.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
+      i0__namespace.ɵɵattribute("aria-checked", item_r9.selected)("data-attr-index", i_r11);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("textContent", item_r9.label);
   } }
   function RadiosetComponent_ng_template_3_li_0_li_8_label_2_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelementStart(0, "label", 7);
       i0__namespace.ɵɵelement(1, "input", 8)(2, "span", 10);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const ctx_r24 = i0__namespace.ɵɵnextContext();
-      const item_r19 = ctx_r24.$implicit;
-      const i_r20 = ctx_r24.index;
-      const ctx_r22 = i0__namespace.ɵɵnextContext(3);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(8, _c1$7, ctx_r22.disabled || ctx_r22.readonly));
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("name", "radioset_" + ctx_r22.widgetId)("value", item_r19.key)("disabled", ctx_r22.disabled || ctx_r22.readonly)("tabindex", ctx_r22.tabindex)("checked", item_r19.selected);
-      i0__namespace.ɵɵattribute("aria-checked", item_r19.selected)("data-attr-index", i_r20);
+      const ctx_r9 = i0__namespace.ɵɵnextContext();
+      const item_r9 = ctx_r9.$implicit;
+      const i_r11 = ctx_r9.index;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(3);
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(8, _c2$2, ctx_r2.disabled || ctx_r2.readonly));
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r9.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
+      i0__namespace.ɵɵattribute("aria-checked", item_r9.selected)("data-attr-index", i_r11);
   } }
-  const _c3 = function (a3, a4) { return ["radio", "app-radio", "group-list-item", a3, a4]; };
   function RadiosetComponent_ng_template_3_li_0_li_8_Template(rf, ctx) { if (rf & 1) {
-      const _r26 = i0__namespace.ɵɵgetCurrentView();
+      const _r8 = i0__namespace.ɵɵgetCurrentView();
       i0__namespace.ɵɵelementStart(0, "li", 23);
-      i0__namespace.ɵɵlistener("click", function RadiosetComponent_ng_template_3_li_0_li_8_Template_li_click_0_listener($event) { const restoredCtx = i0__namespace.ɵɵrestoreView(_r26); const item_r19 = restoredCtx.$implicit; const ctx_r25 = i0__namespace.ɵɵnextContext(3); return i0__namespace.ɵɵresetView(ctx_r25.onRadioLabelClick($event, item_r19)); });
-      i0__namespace.ɵɵtemplate(1, RadiosetComponent_ng_template_3_li_0_li_8_label_1_Template, 3, 11, "label", 6);
-      i0__namespace.ɵɵtemplate(2, RadiosetComponent_ng_template_3_li_0_li_8_label_2_Template, 3, 10, "label", 6);
+      i0__namespace.ɵɵlistener("click", function RadiosetComponent_ng_template_3_li_0_li_8_Template_li_click_0_listener($event) { const item_r9 = i0__namespace.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0__namespace.ɵɵnextContext(3); return i0__namespace.ɵɵresetView(ctx_r2.onRadioLabelClick($event, item_r9)); });
+      i0__namespace.ɵɵtemplate(1, RadiosetComponent_ng_template_3_li_0_li_8_label_1_Template, 3, 11, "label", 6)(2, RadiosetComponent_ng_template_3_li_0_li_8_label_2_Template, 3, 10, "label", 6);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const item_r19 = ctx.$implicit;
-      const ctx_r17 = i0__namespace.ɵɵnextContext(3);
-      i0__namespace.ɵɵclassProp("active", item_r19.selected);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(7, _c3, ctx_r17.itemclass, ctx_r17.itemsPerRowClass))("wmItemTemplate", ctx_r17.content)("userComponentParams", item_r19);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngIf", !ctx_r17.content);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngIf", ctx_r17.content);
+      const item_r9 = ctx.$implicit;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(3);
+      i0__namespace.ɵɵclassProp("active", item_r9.selected);
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(7, _c4, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r9);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngIf", !ctx_r2.content);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngIf", ctx_r2.content);
   } }
-  const _c4 = function (a0) { return { "collapsible-content": a0 }; };
   function RadiosetComponent_ng_template_3_li_0_Template(rf, ctx) { if (rf & 1) {
-      const _r28 = i0__namespace.ɵɵgetCurrentView();
+      const _r6 = i0__namespace.ɵɵgetCurrentView();
       i0__namespace.ɵɵelementStart(0, "li", 13)(1, "ul", 14)(2, "li", 15);
-      i0__namespace.ɵɵlistener("click", function RadiosetComponent_ng_template_3_li_0_Template_li_click_2_listener($event) { i0__namespace.ɵɵrestoreView(_r28); const ctx_r27 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r27.handleHeaderClick($event)); });
+      i0__namespace.ɵɵlistener("click", function RadiosetComponent_ng_template_3_li_0_Template_li_click_2_listener($event) { i0__namespace.ɵɵrestoreView(_r6); const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.handleHeaderClick($event)); });
       i0__namespace.ɵɵelementStart(3, "h4", 16);
       i0__namespace.ɵɵtext(4);
       i0__namespace.ɵɵelementStart(5, "div", 17);
-      i0__namespace.ɵɵtemplate(6, RadiosetComponent_ng_template_3_li_0_i_6_Template, 1, 2, "i", 18);
-      i0__namespace.ɵɵtemplate(7, RadiosetComponent_ng_template_3_li_0_span_7_Template, 1, 1, "span", 19);
+      i0__namespace.ɵɵtemplate(6, RadiosetComponent_ng_template_3_li_0_i_6_Template, 1, 3, "i", 18)(7, RadiosetComponent_ng_template_3_li_0_span_7_Template, 1, 1, "span", 19);
       i0__namespace.ɵɵelementEnd()()();
       i0__namespace.ɵɵtemplate(8, RadiosetComponent_ng_template_3_li_0_li_8_Template, 3, 10, "li", 20);
       i0__namespace.ɵɵelementEnd()();
   } if (rf & 2) {
-      const groupObj_r14 = ctx.$implicit;
-      const ctx_r13 = i0__namespace.ɵɵnextContext(2);
+      const groupObj_r7 = ctx.$implicit;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(2);
       i0__namespace.ɵɵadvance(2);
-      i0__namespace.ɵɵproperty("title", groupObj_r14.key)("ngClass", i0__namespace.ɵɵpureFunction1(6, _c4, ctx_r13.collapsible));
+      i0__namespace.ɵɵproperty("title", groupObj_r7.key)("ngClass", i0__namespace.ɵɵpureFunction1(6, _c3, ctx_r2.collapsible));
       i0__namespace.ɵɵadvance(2);
-      i0__namespace.ɵɵtextInterpolate1("", groupObj_r14.key, " ");
+      i0__namespace.ɵɵtextInterpolate1("", groupObj_r7.key, " ");
       i0__namespace.ɵɵadvance(2);
-      i0__namespace.ɵɵproperty("ngIf", ctx_r13.collapsible);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngIf", ctx_r13.showcount);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngForOf", groupObj_r14.data);
+      i0__namespace.ɵɵproperty("ngIf", ctx_r2.collapsible);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngIf", ctx_r2.showcount);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngForOf", groupObj_r7.data);
   } }
   function RadiosetComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵtemplate(0, RadiosetComponent_ng_template_3_li_0_Template, 9, 8, "li", 12);
   } if (rf & 2) {
-      const ctx_r3 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵproperty("ngForOf", ctx_r3.groupedData);
+      const ctx_r2 = i0__namespace.ɵɵnextContext();
+      i0__namespace.ɵɵproperty("ngForOf", ctx_r2.groupedData);
   } }
   const DEFAULT_CLS$1 = 'app-radioset list-group inline';
   const WIDGET_CONFIG$8 = { widgetType: 'wm-radioset', hostClass: DEFAULT_CLS$1 };
   class RadiosetComponent extends DatasetAwareFormComponent {
       static { this.initializeProps = registerProps$8(); }
-      constructor(inj) {
-          super(inj, WIDGET_CONFIG$8);
+      constructor(inj, explicitContext) {
+          super(inj, WIDGET_CONFIG$8, explicitContext);
           this.layout = '';
           i2.styler(this.nativeElement, this);
           this.multiple = false;
@@ -2018,33 +2058,38 @@
               super.onPropertyChange(key, nv, ov);
           }
       }
-      static { this.ɵfac = function RadiosetComponent_Factory(t) { return new (t || RadiosetComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+      static { this.ɵfac = function RadiosetComponent_Factory(t) { return new (t || RadiosetComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: RadiosetComponent, selectors: [["", "wmRadioset", ""]], exportAs: ["wmRadioset"], features: [i0__namespace.ɵɵProvidersFeature([
                   i2.provideAs(RadiosetComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(RadiosetComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(RadiosetComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$8, decls: 5, vars: 4, consts: [[3, "ngIf", "ngIfElse"], ["hidden", "", 1, "model-holder", 3, "disabled"], ["aria-readonly", "true", "class", "readonly-wrapper", 4, "ngIf"], ["groupedListTemplate", ""], ["partialContainer", "", "role", "presentation", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], ["partialContainer", "", "role", "presentation", 3, "ngClass", "wmItemTemplate", "userComponentParams", "click"], ["class", "app-radioset-label", 3, "ngClass", 4, "ngIf"], [1, "app-radioset-label", 3, "ngClass"], ["type", "radio", 3, "name", "value", "disabled", "tabindex", "checked"], [1, "caption", 3, "textContent"], ["partial-container-target", "", 1, "caption", "customTemplate"], ["aria-readonly", "true", 1, "readonly-wrapper"], ["class", "app-list-item-group", 4, "ngFor", "ngForOf"], [1, "app-list-item-group"], [1, "item-group"], [1, "list-group-header", 3, "title", "ngClass", "click"], [1, "group-title"], [1, "header-action"], ["class", "app-icon wi action wi-chevron-up", 3, "title", 4, "ngIf"], ["class", "label label-default", 3, "textContent", 4, "ngIf"], ["partialContainer", "", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], [1, "app-icon", "wi", "action", "wi-chevron-up", 3, "title"], [1, "label", "label-default", 3, "textContent"], ["partialContainer", "", 3, "ngClass", "wmItemTemplate", "userComponentParams", "click"]], template: function RadiosetComponent_Template(rf, ctx) { if (rf & 1) {
-              i0__namespace.ɵɵtemplate(0, RadiosetComponent_ng_template_0_Template, 1, 1, "ng-template", 0);
-              i0__namespace.ɵɵelement(1, "input", 1);
-              i0__namespace.ɵɵtemplate(2, RadiosetComponent_div_2_Template, 1, 0, "div", 2);
-              i0__namespace.ɵɵtemplate(3, RadiosetComponent_ng_template_3_Template, 1, 1, "ng-template", null, 3, i0__namespace.ɵɵtemplateRefExtractor);
+              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$8, decls: 5, vars: 4, consts: [["groupedListTemplate", ""], [3, "ngIf", "ngIfElse"], ["hidden", "", 1, "model-holder", 3, "disabled"], ["aria-readonly", "true", "class", "readonly-wrapper", 4, "ngIf"], ["partialContainer", "", "role", "presentation", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], ["partialContainer", "", "role", "presentation", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], ["class", "app-radioset-label", 3, "ngClass", 4, "ngIf"], [1, "app-radioset-label", 3, "ngClass"], ["type", "radio", 3, "name", "value", "disabled", "tabindex", "checked"], [1, "caption", 3, "textContent"], ["partial-container-target", "", 1, "caption", "customTemplate"], ["aria-readonly", "true", 1, "readonly-wrapper"], ["class", "app-list-item-group", 4, "ngFor", "ngForOf"], [1, "app-list-item-group"], [1, "item-group"], [1, "list-group-header", 3, "click", "title", "ngClass"], [1, "group-title"], [1, "header-action"], ["class", "app-icon wi action wi-chevron-up", 3, "title", 4, "ngIf"], ["class", "label label-default", 3, "textContent", 4, "ngIf"], ["partialContainer", "", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], [1, "app-icon", "wi", "action", "wi-chevron-up", 3, "title"], [1, "label", "label-default", 3, "textContent"], ["partialContainer", "", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"]], template: function RadiosetComponent_Template(rf, ctx) { if (rf & 1) {
+              i0__namespace.ɵɵtemplate(0, RadiosetComponent_ng_template_0_Template, 1, 1, "ng-template", 1);
+              i0__namespace.ɵɵelement(1, "input", 2);
+              i0__namespace.ɵɵtemplate(2, RadiosetComponent_div_2_Template, 1, 0, "div", 3)(3, RadiosetComponent_ng_template_3_Template, 1, 1, "ng-template", null, 0, i0__namespace.ɵɵtemplateRefExtractor);
           } if (rf & 2) {
-              const _r2 = i0__namespace.ɵɵreference(4);
-              i0__namespace.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", _r2);
-              i0__namespace.ɵɵadvance(1);
+              const groupedListTemplate_r12 = i0__namespace.ɵɵreference(4);
+              i0__namespace.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", groupedListTemplate_r12);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("disabled", ctx.disabled || ctx.readonly);
-              i0__namespace.ɵɵadvance(1);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("ngIf", ctx.readonly || ctx.disabled);
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgForOf, i1__namespace.NgIf, i2__namespace.ItemTemplateDirective, i2__namespace.PartialParamHandlerDirective, i2__namespace.PartialContainerDirective, i2__namespace.TextContentDirective], encapsulation: 2 }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(RadiosetComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(RadiosetComponent, [{
           type: i0.Component,
           args: [{ selector: '[wmRadioset]', exportAs: 'wmRadioset', providers: [
                       i2.provideAs(RadiosetComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(RadiosetComponent, i2$1.NG_VALIDATORS, true),
                       i2.provideAsWidgetRef(RadiosetComponent)
                   ], template: "<ng-template [ngIf]=\"!groupby\" [ngIfElse]=\"groupedListTemplate\">\n    <li [ngClass]=\"['radio', 'app-radio', itemclass, itemsPerRowClass]\"\n        [class.active]=\"item.selected\"\n        *ngFor=\"let item of datasetItems;let i = index\"\n        [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n        (click)=\"onRadioLabelClick($event, item.key)\" role=\"presentation\">\n        <!-- Default item template -->\n        <label *ngIf=\"!content\" class=\"app-radioset-label\"\n               [ngClass]=\"{'disabled':disabled || readonly}\">\n            <input [name]=\"'radioset_' + widgetId\" type=\"radio\" [attr.aria-checked]=\"item.selected\" [attr.data-attr-index]=\"i\"\n                   [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"\n                   [attr.aria-label]=\"item.key\"/>\n            <span class=\"caption\" [textContent]=\"item.label\"></span>\n        </label>\n        <!-- Custom partial template -->\n        <label *ngIf=\"content\" class=\"app-radioset-label\"\n               [ngClass]=\"{'disabled':disabled || readonly}\">\n            <input [name]=\"'radioset_' + widgetId\" type=\"radio\" [attr.aria-checked]=\"item.selected\" [attr.data-attr-index]=\"i\"\n                   [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"\n                   [attr.aria-label]=\"item.key\"/>\n            <span class=\"caption customTemplate\" partial-container-target></span>\n        </label>\n    </li>\n</ng-template>\n\n<input [disabled]=\"disabled || readonly\" hidden class=\"model-holder\">\n<div *ngIf=\"readonly || disabled\" aria-readonly=\"true\" class=\"readonly-wrapper\"></div>\n\n<!-- This template will be displayed when groupby is specified. -->\n<ng-template #groupedListTemplate>\n    <li *ngFor=\"let groupObj of groupedData\" class=\"app-list-item-group\">\n        <ul class=\"item-group\">\n            <li class=\"list-group-header\" (click)=\"handleHeaderClick($event)\" [title]=\"groupObj.key\" [ngClass]=\"{'collapsible-content': collapsible}\">\n                <h4 class=\"group-title\">{{groupObj.key}}\n                    <div class=\"header-action\">\n                        <i class=\"app-icon wi action wi-chevron-up\" *ngIf=\"collapsible\" title=\"{{appLocale.LABEL_COLLAPSE}}/{{appLocale.LABEL_EXPAND}}\"></i>\n                        <span *ngIf=\"showcount\" class=\"label label-default\" [textContent]=\"groupObj.data.length\"></span>\n                    </div>\n                </h4>\n            </li>\n            <li *ngFor=\"let item of groupObj.data; let i = index;\"\n                [ngClass]=\"['radio', 'app-radio', 'group-list-item', itemclass, itemsPerRowClass]\"\n                [class.active]=\"item.selected\"\n                [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n                (click)=\"onRadioLabelClick($event, item)\">\n                <!-- Default item template -->\n                <label *ngIf=\"!content\" class=\"app-radioset-label\"\n                       [ngClass]=\"{'disabled':disabled || readonly}\">\n                    <input [name]=\"'radioset_' + widgetId\" type=\"radio\" [attr.aria-checked]=\"item.selected\" [attr.data-attr-index]=\"i\"\n                           [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption\" [textContent]=\"item.label\"></span>\n                </label>\n                <!-- Custom partial template -->\n                <label *ngIf=\"content\" class=\"app-radioset-label\"\n                       [ngClass]=\"{'disabled':disabled || readonly}\">\n                    <input [name]=\"'radioset_' + widgetId\" type=\"radio\" [attr.aria-checked]=\"item.selected\" [attr.data-attr-index]=\"i\"\n                           [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption customTemplate\" partial-container-target></span>\n                </label>\n            </li>\n        </ul>\n    </li>\n</ng-template>\n" }]
-      }], function () { return [{ type: i0__namespace.Injector }]; }, null); })();
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], null); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(RadiosetComponent, { className: "RadiosetComponent", filePath: "radioset/radioset.component.ts", lineNumber: 25 }); })();
 
   const selectProps = new Map([
       ['autofocus', i2.PROP_BOOLEAN],
@@ -2080,47 +2125,53 @@
   };
 
   const _c0$7 = ["select"];
+  const _c1$6 = a0 => ["app-select form-control", a0];
+  function SelectComponent_option_2_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelement(0, "option", 4);
+  } if (rf & 2) {
+      const ctx_r1 = i0__namespace.ɵɵnextContext();
+      i0__namespace.ɵɵproperty("textContent", ctx_r1.placeholder)("hidden", !ctx_r1.placeholder);
+  } }
   function SelectComponent_ng_container_3_optgroup_1_option_1_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelement(0, "option", 7);
+      i0__namespace.ɵɵelement(0, "option", 8);
   } if (rf & 2) {
-      const item_r6 = ctx.$implicit;
-      i0__namespace.ɵɵproperty("value", item_r6.key)("selected", item_r6.selected)("textContent", item_r6.label);
+      const item_r3 = ctx.$implicit;
+      i0__namespace.ɵɵproperty("value", item_r3.key)("selected", item_r3.selected)("textContent", item_r3.label);
   } }
   function SelectComponent_ng_container_3_optgroup_1_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelementStart(0, "optgroup", 5);
-      i0__namespace.ɵɵtemplate(1, SelectComponent_ng_container_3_optgroup_1_option_1_Template, 1, 3, "option", 6);
+      i0__namespace.ɵɵelementStart(0, "optgroup", 6);
+      i0__namespace.ɵɵtemplate(1, SelectComponent_ng_container_3_optgroup_1_option_1_Template, 1, 3, "option", 7);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
       const groupObj_r4 = ctx.$implicit;
       i0__namespace.ɵɵproperty("label", groupObj_r4.key);
-      i0__namespace.ɵɵadvance(1);
+      i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵproperty("ngForOf", groupObj_r4.data);
   } }
   function SelectComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelementContainerStart(0);
-      i0__namespace.ɵɵtemplate(1, SelectComponent_ng_container_3_optgroup_1_Template, 2, 2, "optgroup", 4);
+      i0__namespace.ɵɵtemplate(1, SelectComponent_ng_container_3_optgroup_1_Template, 2, 2, "optgroup", 5);
       i0__namespace.ɵɵelementContainerEnd();
   } if (rf & 2) {
       const ctx_r1 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵadvance(1);
+      i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵproperty("ngForOf", ctx_r1.groupedData);
   } }
   function SelectComponent_ng_container_4_option_1_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelement(0, "option", 7);
+      i0__namespace.ɵɵelement(0, "option", 8);
   } if (rf & 2) {
-      const item_r8 = ctx.$implicit;
-      i0__namespace.ɵɵproperty("value", item_r8.key)("selected", item_r8.selected)("textContent", item_r8.label);
+      const item_r5 = ctx.$implicit;
+      i0__namespace.ɵɵproperty("value", item_r5.key)("selected", item_r5.selected)("textContent", item_r5.label);
   } }
   function SelectComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelementContainerStart(0);
-      i0__namespace.ɵɵtemplate(1, SelectComponent_ng_container_4_option_1_Template, 1, 3, "option", 6);
+      i0__namespace.ɵɵtemplate(1, SelectComponent_ng_container_4_option_1_Template, 1, 3, "option", 7);
       i0__namespace.ɵɵelementContainerEnd();
   } if (rf & 2) {
-      const ctx_r2 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngForOf", ctx_r2.datasetItems);
+      const ctx_r1 = i0__namespace.ɵɵnextContext();
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngForOf", ctx_r1.datasetItems);
   } }
-  const _c1$6 = function (a1) { return ["app-select form-control", a1]; };
   const WIDGET_CONFIG$7 = { widgetType: 'wm-select', hostClass: 'app-select-wrapper' };
   class SelectComponent extends DatasetAwareFormComponent {
       static { this.initializeProps = registerProps$7(); }
@@ -2129,14 +2180,17 @@
               this.datavalue = ds.execute(i1$1.DataSource.Operation.GET_DEFAULT_LOCALE);
           }
       }
-      constructor(inj, app) {
-          super(inj, WIDGET_CONFIG$7);
+      constructor(inj, app, explicitContext) {
+          super(inj, WIDGET_CONFIG$7, explicitContext);
           this.app = app;
           this.acceptsArray = true;
       }
       ngAfterViewInit() {
           super.ngAfterViewInit();
           i2.styler(this.selectEl.nativeElement, this);
+          setTimeout(() => {
+              this.checkForFloatingLabel(null);
+          }, 10);
       }
       // Change event is registered from the template, Prevent the framework from registering one more event
       handleEvent(node, eventName, eventCallback, locals) {
@@ -2183,6 +2237,16 @@
           }
           super.onPropertyChange(key, nv, ov);
       }
+      isSafariBrowser() {
+          var reg = {
+              MAC: /Mac/i,
+              MACINTEL: /MacIntel/i
+          };
+          return reg.MAC.test(window.navigator.platform) || reg.MACINTEL.test(window.navigator.platform);
+      }
+      isIosPlatform() {
+          return i1$1.isIos() || this.isSafariBrowser();
+      }
       /**
        * When caption floating is enabled and placeholder is given, do not show placeholder until user focuses on the field
        * When focused add the placeholder to the option which is selected
@@ -2192,35 +2256,25 @@
       checkForFloatingLabel($event) {
           const captionEl = $(this.selectEl.nativeElement).closest('.app-composite-widget.caption-floating');
           if (captionEl.length > 0) {
-              if ($event.type === 'focus' && (!this.datavalue || (this.datavalue && $(this.selectEl).find('select option:selected').text() === '' && this.placeholder))) {
-                  if (!(this.datavalue || this.placeholder)) {
-                      this.removePlaceholderOption();
+              if ((!$event || $event.type === 'focus') && (($(this.selectEl).find('select option:selected').text() === '' && (this.placeholder || (this.datavalue || this.binddatavalue) || this.isIosPlatform())))) {
+                  if (!$event && (this.placeholder || this.datavalue || this.binddatavalue || this.isIosPlatform())) {
+                      this.app.notify('captionPositionAnimate', { isSelect: true, nativeEl: captionEl });
                   }
-                  else {
+                  if (this.placeholder) {
                       $(this.selectEl.nativeElement).find('option:first').text(this.placeholder);
                   }
               }
               else if (!this.datavalue) {
-                  $(this.selectEl.nativeElement).find('option:selected').text('');
-                  captionEl.removeClass('float-active');
+                  if (!this.placeholder) {
+                      //  $(this.selectEl.nativeElement).find('option:first').text('');
+                      if (!this.isIosPlatform()) {
+                          captionEl.removeClass('float-active');
+                      }
+                  }
               }
           }
-          else if (!(this.datavalue || this.placeholder)) {
-              this.removePlaceholderOption();
-          }
-      }
-      /*
-      * Removing the placeholder option if no placeholder is provided.
-      * In html we are hiding the placeholder option using css but in apple devices and safari option is showing.
-      * */
-      removePlaceholderOption() {
-          const hiddenEle = $(this.selectEl.nativeElement).find('#placeholderOption');
-          if (hiddenEle.length) {
-              hiddenEle.remove();
-              this.selectEl.nativeElement.value = '';
-          }
       }
-      static { this.ɵfac = function SelectComponent_Factory(t) { return new (t || SelectComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.App)); }; }
+      static { this.ɵfac = function SelectComponent_Factory(t) { return new (t || SelectComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.App), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: SelectComponent, selectors: [["wm-select"]], viewQuery: function SelectComponent_Query(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵviewQuery(_c0$7, 7, i0.ElementRef);
           } if (rf & 2) {
@@ -2230,35 +2284,43 @@
                   i2.provideAs(SelectComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(SelectComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(SelectComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], decls: 5, vars: 16, consts: [["role", "listbox", "aria-haspopup", "true", "aria-expanded", "false", "focus-target", "", 3, "ngClass", "disabled", "required", "tabindex", "ngModel", "multiple", "autofocus", "ngModelChange", "change", "focus", "blur"], ["select", ""], ["selected", "", "value", "undefined", "id", "placeholderOption", 3, "textContent", "hidden"], [4, "ngIf"], [3, "label", 4, "ngFor", "ngForOf"], [3, "label"], ["role", "option", 3, "value", "selected", "textContent", 4, "ngFor", "ngForOf"], ["role", "option", 3, "value", "selected", "textContent"]], template: function SelectComponent_Template(rf, ctx) { if (rf & 1) {
-              i0__namespace.ɵɵelementStart(0, "select", 0, 1);
-              i0__namespace.ɵɵlistener("ngModelChange", function SelectComponent_Template_select_ngModelChange_0_listener($event) { return ctx.modelByKey = $event; })("change", function SelectComponent_Template_select_change_0_listener($event) { return ctx.onSelectValueChange($event); })("focus", function SelectComponent_Template_select_focus_0_listener($event) { return ctx.checkForFloatingLabel($event); })("blur", function SelectComponent_Template_select_blur_0_listener($event) { ctx.invokeOnTouched($event); return ctx.checkForFloatingLabel($event); });
-              i0__namespace.ɵɵelement(2, "option", 2);
-              i0__namespace.ɵɵtemplate(3, SelectComponent_ng_container_3_Template, 2, 1, "ng-container", 3);
-              i0__namespace.ɵɵtemplate(4, SelectComponent_ng_container_4_Template, 2, 1, "ng-container", 3);
+              ]), i0__namespace.ɵɵInheritDefinitionFeature], decls: 5, vars: 15, consts: [["select", ""], ["role", "listbox", "aria-haspopup", "true", "aria-expanded", "false", "focus-target", "", 3, "ngModelChange", "change", "focus", "blur", "ngClass", "disabled", "required", "tabindex", "ngModel", "multiple", "autofocus"], ["value", "undefined", 3, "textContent", "hidden", 4, "ngIf"], [4, "ngIf"], ["value", "undefined", 3, "textContent", "hidden"], [3, "label", 4, "ngFor", "ngForOf"], [3, "label"], ["role", "option", 3, "value", "selected", "textContent", 4, "ngFor", "ngForOf"], ["role", "option", 3, "value", "selected", "textContent"]], template: function SelectComponent_Template(rf, ctx) { if (rf & 1) {
+              const _r1 = i0__namespace.ɵɵgetCurrentView();
+              i0__namespace.ɵɵelementStart(0, "select", 1, 0);
+              i0__namespace.ɵɵtwoWayListener("ngModelChange", function SelectComponent_Template_select_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.modelByKey, $event) || (ctx.modelByKey = $event); return i0__namespace.ɵɵresetView($event); });
+              i0__namespace.ɵɵlistener("change", function SelectComponent_Template_select_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onSelectValueChange($event)); })("focus", function SelectComponent_Template_select_focus_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.checkForFloatingLabel($event)); })("blur", function SelectComponent_Template_select_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); ctx.invokeOnTouched($event); return i0__namespace.ɵɵresetView(ctx.checkForFloatingLabel($event)); });
+              i0__namespace.ɵɵtemplate(2, SelectComponent_option_2_Template, 1, 2, "option", 2)(3, SelectComponent_ng_container_3_Template, 2, 1, "ng-container", 3)(4, SelectComponent_ng_container_4_Template, 2, 1, "ng-container", 3);
               i0__namespace.ɵɵelementEnd();
           } if (rf & 2) {
-              i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(14, _c1$6, ctx.class))("disabled", ctx.disabled)("required", ctx.required)("tabindex", ctx.tabindex)("ngModel", ctx.modelByKey)("multiple", ctx.multiple)("autofocus", ctx.autofocus);
+              i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(13, _c1$6, ctx.class))("disabled", ctx.disabled)("required", ctx.required)("tabindex", ctx.tabindex);
+              i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.modelByKey);
+              i0__namespace.ɵɵproperty("multiple", ctx.multiple)("autofocus", ctx.autofocus);
               i0__namespace.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("aria-multiselectable", ctx.multiple);
               i0__namespace.ɵɵadvance(2);
-              i0__namespace.ɵɵproperty("textContent", ctx.placeholder)("hidden", !ctx.placeholder);
-              i0__namespace.ɵɵadvance(1);
+              i0__namespace.ɵɵproperty("ngIf", !ctx.isIosPlatform() || !!ctx.placeholder);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("ngIf", ctx.groupby);
-              i0__namespace.ɵɵadvance(1);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("ngIf", !ctx.groupby);
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgForOf, i1__namespace.NgIf, i2$1__namespace.NgSelectOption, i2$1__namespace.ɵNgSelectMultipleOption, i2$1__namespace.SelectMultipleControlValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.NgModel, i2__namespace.TextContentDirective], encapsulation: 2 }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SelectComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SelectComponent, [{
           type: i0.Component,
           args: [{ selector: 'wm-select', providers: [
                       i2.provideAs(SelectComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(SelectComponent, i2$1.NG_VALIDATORS, true),
                       i2.provideAsWidgetRef(SelectComponent)
-                  ], template: "<select role=\"listbox\" aria-haspopup=\"true\" aria-expanded=\"false\" #select\n        focus-target\n        [ngClass]=\"['app-select form-control', class]\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        [(ngModel)]=\"modelByKey\"\n        [multiple]=\"multiple\"\n        (change)=\"onSelectValueChange($event)\"\n        (focus)=\"checkForFloatingLabel($event)\"\n        (blur)=\"invokeOnTouched($event); checkForFloatingLabel($event)\"\n        [attr.name]=\"name\"\n        [attr.aria-label]=\"hint\"\n        [attr.aria-multiselectable]=\"multiple\"\n        [autofocus]=\"autofocus\">\n\n        <option selected\n                value=\"undefined\"\n                [textContent]=\"placeholder\"\n                id=\"placeholderOption\"\n                [hidden]=\"!placeholder\"></option>\n\n    <ng-container *ngIf=\"groupby\">\n        <optgroup *ngFor=\"let groupObj of groupedData\"\n            [label]=\"groupObj.key\">\n            <option *ngFor=\"let item of groupObj.data;\"\n                [value]=\"item.key\"\n                [selected]=\"item.selected\"\n                [textContent]=\"item.label\"\n                role=\"option\"></option>\n        </optgroup>\n    </ng-container>\n\n    <ng-container *ngIf=\"!groupby\">\n        <option *ngFor=\"let item of datasetItems\"\n            [value]=\"item.key\"\n            [selected]=\"item.selected\"\n            [textContent]=\"item.label\"\n            role=\"option\"></option>\n    </ng-container>\n</select>\n" }]
-      }], function () { return [{ type: i0__namespace.Injector }, { type: i1$1__namespace.App }]; }, { selectEl: [{
+                  ], template: "<select role=\"listbox\" aria-haspopup=\"true\" aria-expanded=\"false\" #select\n        focus-target\n        [ngClass]=\"['app-select form-control', class]\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        [(ngModel)]=\"modelByKey\"\n        [multiple]=\"multiple\"\n        (change)=\"onSelectValueChange($event)\"\n        (focus)=\"checkForFloatingLabel($event)\"\n        (blur)=\"invokeOnTouched($event); checkForFloatingLabel($event)\"\n        [attr.name]=\"name\"\n        [attr.aria-label]=\"hint\"\n        [attr.aria-multiselectable]=\"multiple\"\n        [autofocus]=\"autofocus\"\n>\n    <option\n    value=\"undefined\"\n    [textContent]=\"placeholder\"\n    *ngIf=\"!isIosPlatform() || !!placeholder\"\n    [hidden]=\"!placeholder\"></option>\n\n    <ng-container *ngIf=\"groupby\">\n        <optgroup *ngFor=\"let groupObj of groupedData\"\n            [label]=\"groupObj.key\">\n            <option *ngFor=\"let item of groupObj.data;\"\n                [value]=\"item.key\"\n                [selected]=\"item.selected\"\n                [textContent]=\"item.label\"\n                role=\"option\"></option>\n        </optgroup>\n    </ng-container>\n\n    <ng-container *ngIf=\"!groupby\">\n        <option *ngFor=\"let item of datasetItems\"\n            [value]=\"item.key\"\n            [selected]=\"item.selected\"\n            [textContent]=\"item.label\"\n            role=\"option\"></option>\n    </ng-container>\n</select>\n" }]
+      }], () => [{ type: i0__namespace.Injector }, { type: i1$1__namespace.App }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { selectEl: [{
               type: i0.ViewChild,
               args: ['select', { static: true, read: i0.ElementRef }]
           }] }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(SelectComponent, { className: "SelectComponent", filePath: "select/select.component.ts", lineNumber: 23 }); })();
 
   const switchProps = new Map([
       ['class', i2.PROP_STRING],
@@ -2285,43 +2347,43 @@
   };
 
   const _c0$6 = ["wmSwitch", ""];
-  const _c1$5 = function (a1) { return ["app-icon", a1]; };
+  const _c1$5 = (a0, a1) => ({ "selected": a0, "disabled": a1 });
+  const _c2$1 = a0 => ["app-icon", a0];
   function SwitchComponent_a_1_i_1_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelement(0, "i", 8);
   } if (rf & 2) {
-      const opt_r2 = i0__namespace.ɵɵnextContext().$implicit;
+      const opt_r3 = i0__namespace.ɵɵnextContext().$implicit;
       const ctx_r4 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(1, _c1$5, opt_r2.dataObject[ctx_r4.iconclass] || opt_r2["icon"]));
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(1, _c2$1, opt_r3.dataObject[ctx_r4.iconclass] || opt_r3["icon"]));
   } }
-  const _c2$1 = function (a0, a1) { return { "selected": a0, "disabled": a1 }; };
   function SwitchComponent_a_1_Template(rf, ctx) { if (rf & 1) {
-      const _r7 = i0__namespace.ɵɵgetCurrentView();
+      const _r1 = i0__namespace.ɵɵgetCurrentView();
       i0__namespace.ɵɵelementStart(0, "a", 5);
-      i0__namespace.ɵɵlistener("click", function SwitchComponent_a_1_Template_a_click_0_listener($event) { const restoredCtx = i0__namespace.ɵɵrestoreView(_r7); const $index_r3 = restoredCtx.index; const opt_r2 = restoredCtx.$implicit; const ctx_r6 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r6.selectOpt($event, $index_r3, opt_r2)); });
+      i0__namespace.ɵɵlistener("click", function SwitchComponent_a_1_Template_a_click_0_listener($event) { const ctx_r1 = i0__namespace.ɵɵrestoreView(_r1); const opt_r3 = ctx_r1.$implicit; const $index_r4 = ctx_r1.index; const ctx_r4 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r4.selectOpt($event, $index_r4, opt_r3)); });
       i0__namespace.ɵɵtemplate(1, SwitchComponent_a_1_i_1_Template, 1, 3, "i", 6);
       i0__namespace.ɵɵelement(2, "span", 7);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
-      const opt_r2 = ctx.$implicit;
-      const ctx_r0 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵproperty("name", "wm-switch-" + opt_r2.key)("ngClass", i0__namespace.ɵɵpureFunction2(4, _c2$1, opt_r2.selected, ctx_r0.disabled));
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("ngIf", opt_r2.dataObject && opt_r2.dataObject[ctx_r0.iconclass]);
-      i0__namespace.ɵɵadvance(1);
-      i0__namespace.ɵɵproperty("textContent", opt_r2[ctx_r0.displayfield] || opt_r2.label);
+      const opt_r3 = ctx.$implicit;
+      const ctx_r4 = i0__namespace.ɵɵnextContext();
+      i0__namespace.ɵɵproperty("name", "wm-switch-" + opt_r3.key)("ngClass", i0__namespace.ɵɵpureFunction2(4, _c1$5, opt_r3.selected, ctx_r4.disabled));
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngIf", opt_r3.dataObject && opt_r3.dataObject[ctx_r4.iconclass]);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("textContent", opt_r3[ctx_r4.displayfield] || opt_r3.label);
   } }
   function SwitchComponent_i_3_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelement(0, "i");
   } if (rf & 2) {
-      const ctx_r1 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵclassMapInterpolate1("app-icon ", ctx_r1.selectedItem && ctx_r1.selectedItem.dataObject && ctx_r1.selectedItem.dataObject[ctx_r1.iconclass], "");
+      const ctx_r4 = i0__namespace.ɵɵnextContext();
+      i0__namespace.ɵɵclassMapInterpolate1("app-icon ", ctx_r4.selectedItem && ctx_r4.selectedItem.dataObject && ctx_r4.selectedItem.dataObject[ctx_r4.iconclass], "");
   } }
   const DEFAULT_CLS = 'app-switch';
   const WIDGET_CONFIG$6 = { widgetType: 'wm-switch', hostClass: DEFAULT_CLS };
   class SwitchComponent extends DatasetAwareFormComponent {
       static { this.initializeProps = registerProps$6(); }
-      constructor(inj) {
-          super(inj, WIDGET_CONFIG$6);
+      constructor(inj, explicitContext) {
+          super(inj, WIDGET_CONFIG$6, explicitContext);
           this.options = [];
           this._debounceSetSelectedValue = i1$1.debounce((val) => {
               this.setSelectedValue();
@@ -2424,11 +2486,11 @@
               super.onPropertyChange(key, nv, ov);
           }
       }
-      static { this.ɵfac = function SwitchComponent_Factory(t) { return new (t || SwitchComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+      static { this.ɵfac = function SwitchComponent_Factory(t) { return new (t || SwitchComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: SwitchComponent, selectors: [["", "wmSwitch", ""]], exportAs: ["wmSwitch"], features: [i0__namespace.ɵɵProvidersFeature([
                   i2.provideAs(SwitchComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAsWidgetRef(SwitchComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$6, decls: 6, vars: 8, consts: [["role", "group", 1, "btn-group", "btn-group-justified"], ["focus-target", "", "href", "javascript:void(0);", "class", "btn btn-default", 3, "name", "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "btn", "btn-primary", "app-switch-overlay", "switch-handle", 3, "title"], [3, "class", 4, "ngIf"], ["aria-hidden", "true", 1, "model-holder", "ng-hide", 3, "name", "disabled", "value", "required"], ["focus-target", "", "href", "javascript:void(0);", 1, "btn", "btn-default", 3, "name", "ngClass", "click"], ["aria-hidden", "true", 3, "ngClass", 4, "ngIf"], [1, "caption", 3, "textContent"], ["aria-hidden", "true", 3, "ngClass"]], template: function SwitchComponent_Template(rf, ctx) { if (rf & 1) {
+              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$6, decls: 6, vars: 8, consts: [["role", "group", 1, "btn-group", "btn-group-justified"], ["focus-target", "", "href", "javascript:void(0);", "class", "btn btn-default", 3, "name", "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "btn", "btn-primary", "app-switch-overlay", "switch-handle", 3, "title"], [3, "class", 4, "ngIf"], ["aria-hidden", "true", 1, "model-holder", "ng-hide", 3, "name", "disabled", "value", "required"], ["focus-target", "", "href", "javascript:void(0);", 1, "btn", "btn-default", 3, "click", "name", "ngClass"], ["aria-hidden", "true", 3, "ngClass", 4, "ngIf"], [1, "caption", 3, "textContent"], ["aria-hidden", "true", 3, "ngClass"]], template: function SwitchComponent_Template(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵelementStart(0, "div", 0);
               i0__namespace.ɵɵtemplate(1, SwitchComponent_a_1_Template, 3, 7, "a", 1);
               i0__namespace.ɵɵelementEnd();
@@ -2438,25 +2500,31 @@
               i0__namespace.ɵɵelementEnd();
               i0__namespace.ɵɵelement(5, "input", 4);
           } if (rf & 2) {
-              i0__namespace.ɵɵadvance(1);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("ngForOf", ctx.datasetItems);
-              i0__namespace.ɵɵadvance(1);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("title", ctx.selectedItem ? ctx.selectedItem.label : ctx.modelByKey);
-              i0__namespace.ɵɵadvance(1);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("ngIf", ctx.iconclass);
-              i0__namespace.ɵɵadvance(1);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵtextInterpolate1(" ", ctx.selectedItem ? ctx.selectedItem.label : ctx.modelByKey, "\n");
-              i0__namespace.ɵɵadvance(1);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("name", ctx.name)("disabled", ctx.disabled)("value", ctx.modelByKey)("required", ctx.required);
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgForOf, i1__namespace.NgIf, i2__namespace.TextContentDirective], encapsulation: 2 }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SwitchComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SwitchComponent, [{
           type: i0.Component,
           args: [{ selector: '[wmSwitch]', providers: [
                       i2.provideAs(SwitchComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAsWidgetRef(SwitchComponent)
                   ], exportAs: 'wmSwitch', template: "<div role=\"group\" class=\"btn-group btn-group-justified\">\n    <a *ngFor=\"let opt of datasetItems; let $index = index;\"\n       focus-target\n       href=\"javascript:void(0);\"\n       class=\"btn btn-default\"\n       [name]=\"'wm-switch-' + opt.key\"\n       [ngClass]=\"{'selected': opt.selected, 'disabled': disabled}\"\n       (click)=\"selectOpt($event, $index, opt)\"\n    >\n        <i *ngIf=\"opt.dataObject && opt.dataObject[iconclass]\" aria-hidden=\"true\" [ngClass]=\"['app-icon', opt.dataObject[iconclass] || opt['icon']]\"></i>\n        <span class=\"caption\" [textContent]=\"opt[displayfield] || opt.label\"></span>\n    </a>\n</div>\n<span [title]=\"selectedItem ? selectedItem.label : modelByKey\"\n      class=\"btn btn-primary app-switch-overlay switch-handle\">\n    <i *ngIf=\"iconclass\"\n       class=\"app-icon {{(selectedItem && selectedItem.dataObject) && selectedItem.dataObject[iconclass]}}\"></i>\n    {{selectedItem ? selectedItem.label : modelByKey}}\n</span>\n<input [name]=\"name\" class=\"model-holder ng-hide\" [disabled]=\"disabled\" [value]=\"modelByKey\" [required]=\"required\" aria-hidden=\"true\">\n" }]
-      }], function () { return [{ type: i0__namespace.Injector }]; }, null); })();
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], null); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(SwitchComponent, { className: "SwitchComponent", filePath: "switch/switch.component.ts", lineNumber: 24 }); })();
 
   const inputCalendarTypeProps = new Map([
       ['autocomplete', { value: true, ...i2.PROP_BOOLEAN }],
@@ -2494,10 +2562,10 @@
   };
   class InputCalendarComponent extends BaseInput {
       static { this.initializeProps = registerProps$5(); }
-      constructor(inj) {
-          super(inj, WIDGET_CONFIG$5);
+      constructor(inj, explicitContext) {
+          super(inj, WIDGET_CONFIG$5, explicitContext);
       }
-      static { this.ɵfac = function InputCalendarComponent_Factory(t) { return new (t || InputCalendarComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+      static { this.ɵfac = function InputCalendarComponent_Factory(t) { return new (t || InputCalendarComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: InputCalendarComponent, selectors: [["wm-input", "type", "date"], ["wm-input", "type", "datetime-local"], ["wm-input", "type", "month"], ["wm-input", "type", "time"], ["wm-input", "type", "week"]], viewQuery: function InputCalendarComponent_Query(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵviewQuery(_c0$5, 7);
               i0__namespace.ɵɵviewQuery(i2$1.NgModel, 5);
@@ -2509,29 +2577,39 @@
                   i2.provideAs(InputCalendarComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(InputCalendarComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(InputCalendarComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$4, decls: 2, vars: 17, consts: [["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "type", "ngModel", "readonly", "required", "disabled", "min", "max", "step", "autofocus", "autocomplete", "ngClass", "ngStyle", "ngModelChange", "blur"], ["input", ""]], template: function InputCalendarComponent_Template(rf, ctx) { if (rf & 1) {
-              i0__namespace.ɵɵelementStart(0, "input", 0, 1);
-              i0__namespace.ɵɵlistener("ngModelChange", function InputCalendarComponent_Template_input_ngModelChange_0_listener($event) { return ctx.datavalue = $event; })("blur", function InputCalendarComponent_Template_input_blur_0_listener($event) { return ctx.handleBlur($event); })("ngModelChange", function InputCalendarComponent_Template_input_ngModelChange_0_listener($event) { return ctx.handleChange($event); });
+              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$4, decls: 2, vars: 17, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "type", "ngModel", "readonly", "required", "disabled", "min", "max", "step", "autofocus", "autocomplete", "ngClass", "ngStyle"]], template: function InputCalendarComponent_Template(rf, ctx) { if (rf & 1) {
+              const _r1 = i0__namespace.ɵɵgetCurrentView();
+              i0__namespace.ɵɵelementStart(0, "input", 1, 0);
+              i0__namespace.ɵɵtwoWayListener("ngModelChange", function InputCalendarComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0__namespace.ɵɵresetView($event); });
+              i0__namespace.ɵɵlistener("blur", function InputCalendarComponent_Template_input_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleBlur($event)); })("ngModelChange", function InputCalendarComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleChange($event)); });
               i0__namespace.ɵɵelementEnd();
           } if (rf & 2) {
-              i0__namespace.ɵɵproperty("type", ctx.type)("ngModel", ctx.datavalue)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("min", ctx.minvalue)("max", ctx.maxvalue)("step", ctx.step)("autofocus", ctx.autofocus)("autocomplete", ctx.autocomplete ? "on" : "off")("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
+              i0__namespace.ɵɵproperty("type", ctx.type);
+              i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
+              i0__namespace.ɵɵproperty("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("min", ctx.minvalue)("max", ctx.maxvalue)("step", ctx.step)("autofocus", ctx.autofocus)("autocomplete", ctx.autocomplete ? "on" : "off")("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
               i0__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint || ctx.type + " field");
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.NgModel], encapsulation: 2 }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputCalendarComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputCalendarComponent, [{
           type: i0.Component,
           args: [{ selector: 'wm-input[type="date"], wm-input[type="datetime-local"], wm-input[type="month"], wm-input[type="time"], wm-input[type="week"]', providers: [
                       i2.provideAs(InputCalendarComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(InputCalendarComponent, i2$1.NG_VALIDATORS, true),
                       i2.provideAsWidgetRef(InputCalendarComponent)
                   ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [min]=\"minvalue\"\n       [max]=\"maxvalue\"\n       [step]=\"step\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint || type + ' field'\"\n       [autofocus]=\"autofocus\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       #input>\n" }]
-      }], function () { return [{ type: i0__namespace.Injector }]; }, { inputEl: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { inputEl: [{
               type: i0.ViewChild,
               args: ['input', { static: true }]
           }], ngModel: [{
               type: i0.ViewChild,
               args: [i2$1.NgModel]
           }] }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(InputCalendarComponent, { className: "InputCalendarComponent", filePath: "text/calendar/input-calendar.component.ts", lineNumber: 22 }); })();
 
   const inputColorTypeProps = new Map([
       ['autocomplete', { value: true, ...i2.PROP_BOOLEAN }],
@@ -2566,10 +2644,10 @@
   };
   class InputColorComponent extends BaseInput {
       static { this.initializeProps = registerProps$4(); }
-      constructor(inj) {
-          super(inj, WIDGET_CONFIG$4);
+      constructor(inj, explicitContext) {
+          super(inj, WIDGET_CONFIG$4, explicitContext);
       }
-      static { this.ɵfac = function InputColorComponent_Factory(t) { return new (t || InputColorComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+      static { this.ɵfac = function InputColorComponent_Factory(t) { return new (t || InputColorComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: InputColorComponent, selectors: [["wm-input", "type", "color"]], viewQuery: function InputColorComponent_Query(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵviewQuery(_c0$4, 7);
               i0__namespace.ɵɵviewQuery(i2$1.NgModel, 5);
@@ -2581,29 +2659,39 @@
                   i2.provideAs(InputColorComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(InputColorComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(InputColorComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$3, decls: 2, vars: 14, consts: [["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "type", "ngModel", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle", "ngModelChange", "blur"], ["input", ""]], template: function InputColorComponent_Template(rf, ctx) { if (rf & 1) {
-              i0__namespace.ɵɵelementStart(0, "input", 0, 1);
-              i0__namespace.ɵɵlistener("ngModelChange", function InputColorComponent_Template_input_ngModelChange_0_listener($event) { return ctx.datavalue = $event; })("blur", function InputColorComponent_Template_input_blur_0_listener($event) { return ctx.handleBlur($event); })("ngModelChange", function InputColorComponent_Template_input_ngModelChange_0_listener($event) { return ctx.handleChange($event); });
+              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$3, decls: 2, vars: 14, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "type", "ngModel", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle"]], template: function InputColorComponent_Template(rf, ctx) { if (rf & 1) {
+              const _r1 = i0__namespace.ɵɵgetCurrentView();
+              i0__namespace.ɵɵelementStart(0, "input", 1, 0);
+              i0__namespace.ɵɵtwoWayListener("ngModelChange", function InputColorComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0__namespace.ɵɵresetView($event); });
+              i0__namespace.ɵɵlistener("blur", function InputColorComponent_Template_input_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleBlur($event)); })("ngModelChange", function InputColorComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleChange($event)); });
               i0__namespace.ɵɵelementEnd();
           } if (rf & 2) {
-              i0__namespace.ɵɵproperty("type", ctx.type)("ngModel", ctx.datavalue)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
+              i0__namespace.ɵɵproperty("type", ctx.type);
+              i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
+              i0__namespace.ɵɵproperty("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
               i0__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.MaxLengthValidator, i2$1__namespace.NgModel], encapsulation: 2 }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputColorComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputColorComponent, [{
           type: i0.Component,
           args: [{ selector: 'wm-input[type="color"]', providers: [
                       i2.provideAs(InputColorComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(InputColorComponent, i2$1.NG_VALIDATORS, true),
                       i2.provideAsWidgetRef(InputColorComponent)
                   ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       role=\"textbox\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       #input>\n" }]
-      }], function () { return [{ type: i0__namespace.Injector }]; }, { inputEl: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { inputEl: [{
               type: i0.ViewChild,
               args: ['input', { static: true }]
           }], ngModel: [{
               type: i0.ViewChild,
               args: [i2$1.NgModel]
           }] }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(InputColorComponent, { className: "InputColorComponent", filePath: "text/color/input-color.component.ts", lineNumber: 23 }); })();
 
   const inputEmailTypeProps = new Map([
       ['autocomplete', { value: true, ...i2.PROP_BOOLEAN }],
@@ -2640,10 +2728,10 @@
   };
   class InputEmailComponent extends BaseInput {
       static { this.initializeProps = registerProps$3(); }
-      constructor(inj) {
-          super(inj, WIDGET_CONFIG$3);
+      constructor(inj, explicitContext) {
+          super(inj, WIDGET_CONFIG$3, explicitContext);
       }
-      static { this.ɵfac = function InputEmailComponent_Factory(t) { return new (t || InputEmailComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+      static { this.ɵfac = function InputEmailComponent_Factory(t) { return new (t || InputEmailComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: InputEmailComponent, selectors: [["wm-input", "type", "email"]], viewQuery: function InputEmailComponent_Query(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵviewQuery(_c0$3, 7);
               i0__namespace.ɵɵviewQuery(i2$1.NgModel, 5);
@@ -2655,30 +2743,39 @@
                   i2.provideAs(InputEmailComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(InputEmailComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(InputEmailComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$2, decls: 2, vars: 17, consts: [["focus-target", "", "role", "textbox", "email", "", 1, "form-control", "app-textbox", 3, "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "pattern", "autofocus", "ngClass", "ngStyle", "autocomplete", "ngModelChange", "blur", "keyup.enter"], ["input", ""]], template: function InputEmailComponent_Template(rf, ctx) { if (rf & 1) {
+              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$2, decls: 2, vars: 17, consts: [["input", ""], ["focus-target", "", "role", "textbox", "email", "", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "keyup.enter", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "pattern", "autofocus", "ngClass", "ngStyle", "autocomplete"]], template: function InputEmailComponent_Template(rf, ctx) { if (rf & 1) {
               const _r1 = i0__namespace.ɵɵgetCurrentView();
-              i0__namespace.ɵɵelementStart(0, "input", 0, 1);
-              i0__namespace.ɵɵlistener("ngModelChange", function InputEmailComponent_Template_input_ngModelChange_0_listener($event) { return ctx.datavalue = $event; })("blur", function InputEmailComponent_Template_input_blur_0_listener($event) { return ctx.handleBlur($event); })("ngModelChange", function InputEmailComponent_Template_input_ngModelChange_0_listener($event) { return ctx.handleChange($event); })("keyup.enter", function InputEmailComponent_Template_input_keyup_enter_0_listener() { i0__namespace.ɵɵrestoreView(_r1); const _r0 = i0__namespace.ɵɵreference(1); return i0__namespace.ɵɵresetView(ctx.flushViewChanges(_r0.value)); });
+              i0__namespace.ɵɵelementStart(0, "input", 1, 0);
+              i0__namespace.ɵɵtwoWayListener("ngModelChange", function InputEmailComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0__namespace.ɵɵresetView($event); });
+              i0__namespace.ɵɵlistener("blur", function InputEmailComponent_Template_input_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleBlur($event)); })("ngModelChange", function InputEmailComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleChange($event)); })("keyup.enter", function InputEmailComponent_Template_input_keyup_enter_0_listener() { i0__namespace.ɵɵrestoreView(_r1); const input_r2 = i0__namespace.ɵɵreference(1); return i0__namespace.ɵɵresetView(ctx.flushViewChanges(input_r2.value)); });
               i0__namespace.ɵɵelementEnd();
           } if (rf & 2) {
-              i0__namespace.ɵɵproperty("type", ctx.type)("ngModel", ctx.datavalue)("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
+              i0__namespace.ɵɵproperty("type", ctx.type);
+              i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
+              i0__namespace.ɵɵproperty("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
               i0__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.MaxLengthValidator, i2$1__namespace.PatternValidator, i2$1__namespace.EmailValidator, i2$1__namespace.NgModel], encapsulation: 2 }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputEmailComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputEmailComponent, [{
           type: i0.Component,
           args: [{ selector: 'wm-input[type="email"]', providers: [
                       i2.provideAs(InputEmailComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(InputEmailComponent, i2$1.NG_VALIDATORS, true),
                       i2.provideAsWidgetRef(InputEmailComponent)
                   ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       email\n       #input>\n" }]
-      }], function () { return [{ type: i0__namespace.Injector }]; }, { inputEl: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { inputEl: [{
               type: i0.ViewChild,
               args: ['input', { static: true }]
           }], ngModel: [{
               type: i0.ViewChild,
               args: [i2$1.NgModel]
           }] }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(InputEmailComponent, { className: "InputEmailComponent", filePath: "text/email/input-email.component.ts", lineNumber: 23 }); })();
 
   const inputNumberTypeProps = new Map([
       ['autocomplete', { value: true, ...i2.PROP_BOOLEAN }],
@@ -2712,15 +2809,15 @@
 
   const _c0$2 = ["input"];
   const _c1$1 = ["type", "number"];
-  const _c2 = function (a0) { return { "step-hidden": a0 }; };
+  const _c2 = a0 => ({ "step-hidden": a0 });
   const WIDGET_CONFIG$2 = {
       widgetType: 'wm-input-number',
       hostClass: 'app-input-wrapper'
   };
   class InputNumberComponent extends BaseInput {
       static { this.initializeProps = registerProps$2(); }
-      constructor(inj) {
-          super(inj, WIDGET_CONFIG$2);
+      constructor(inj, explicitContext) {
+          super(inj, WIDGET_CONFIG$2, explicitContext);
       }
       onArrowPress($event) {
           if (this.step === 0) {
@@ -2732,7 +2829,7 @@
               return false;
           }
       }
-      static { this.ɵfac = function InputNumberComponent_Factory(t) { return new (t || InputNumberComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+      static { this.ɵfac = function InputNumberComponent_Factory(t) { return new (t || InputNumberComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: InputNumberComponent, selectors: [["wm-input", "type", "number"]], viewQuery: function InputNumberComponent_Query(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵviewQuery(_c0$2, 7);
               i0__namespace.ɵɵviewQuery(i2$1.NgModel, 5);
@@ -2744,30 +2841,39 @@
                   i2.provideAs(InputNumberComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(InputNumberComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(InputNumberComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$1, decls: 2, vars: 22, consts: [["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngClass", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "min", "max", "step", "autofocus", "ngStyle", "autocomplete", "ngModelChange", "blur", "keyup.enter", "keydown.ArrowUp", "keydown.ArrowDown", "keypress"], ["input", ""]], template: function InputNumberComponent_Template(rf, ctx) { if (rf & 1) {
+              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$1, decls: 2, vars: 22, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "keyup.enter", "keydown.ArrowUp", "keydown.ArrowDown", "keypress", "ngClass", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "min", "max", "step", "autofocus", "ngStyle", "autocomplete"]], template: function InputNumberComponent_Template(rf, ctx) { if (rf & 1) {
               const _r1 = i0__namespace.ɵɵgetCurrentView();
-              i0__namespace.ɵɵelementStart(0, "input", 0, 1);
-              i0__namespace.ɵɵlistener("ngModelChange", function InputNumberComponent_Template_input_ngModelChange_0_listener($event) { return ctx.datavalue = $event; })("blur", function InputNumberComponent_Template_input_blur_0_listener($event) { return ctx.handleBlur($event); })("ngModelChange", function InputNumberComponent_Template_input_ngModelChange_0_listener($event) { return ctx.handleChange($event); })("keyup.enter", function InputNumberComponent_Template_input_keyup_enter_0_listener() { i0__namespace.ɵɵrestoreView(_r1); const _r0 = i0__namespace.ɵɵreference(1); return i0__namespace.ɵɵresetView(ctx.flushViewChanges(_r0.value)); })("keydown.ArrowUp", function InputNumberComponent_Template_input_keydown_ArrowUp_0_listener($event) { return ctx.onArrowPress($event); })("keydown.ArrowDown", function InputNumberComponent_Template_input_keydown_ArrowDown_0_listener($event) { return ctx.onArrowPress($event); })("keypress", function InputNumberComponent_Template_input_keypress_0_listener($event) { return ctx.validateInputEntry($event); });
+              i0__namespace.ɵɵelementStart(0, "input", 1, 0);
+              i0__namespace.ɵɵtwoWayListener("ngModelChange", function InputNumberComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0__namespace.ɵɵresetView($event); });
+              i0__namespace.ɵɵlistener("blur", function InputNumberComponent_Template_input_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleBlur($event)); })("ngModelChange", function InputNumberComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleChange($event)); })("keyup.enter", function InputNumberComponent_Template_input_keyup_enter_0_listener() { i0__namespace.ɵɵrestoreView(_r1); const input_r2 = i0__namespace.ɵɵreference(1); return i0__namespace.ɵɵresetView(ctx.flushViewChanges(input_r2.value)); })("keydown.ArrowUp", function InputNumberComponent_Template_input_keydown_ArrowUp_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onArrowPress($event)); })("keydown.ArrowDown", function InputNumberComponent_Template_input_keydown_ArrowDown_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onArrowPress($event)); })("keypress", function InputNumberComponent_Template_input_keypress_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.validateInputEntry($event)); });
               i0__namespace.ɵɵelementEnd();
           } if (rf & 2) {
-              i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(20, _c2, ctx.step === 0))("type", ctx.type)("ngModel", ctx.datavalue)("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("min", ctx.minvalue)("max", ctx.maxvalue)("step", ctx.step)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
+              i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(20, _c2, ctx.step === 0))("type", ctx.type);
+              i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
+              i0__namespace.ɵɵproperty("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("min", ctx.minvalue)("max", ctx.maxvalue)("step", ctx.step)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
               i0__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.MaxLengthValidator, i2$1__namespace.NgModel], encapsulation: 2 }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputNumberComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputNumberComponent, [{
           type: i0.Component,
           args: [{ selector: 'wm-input[type="number"]', providers: [
                       i2.provideAs(InputNumberComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(InputNumberComponent, i2$1.NG_VALIDATORS, true),
                       i2.provideAsWidgetRef(InputNumberComponent)
                   ], template: "<input class=\"form-control app-textbox\"\n       [ngClass]=\"{'step-hidden': step === 0}\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [min]=\"minvalue\"\n       [max]=\"maxvalue\"\n       [step]=\"step\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       (keydown.ArrowUp)=\"onArrowPress($event)\"\n       (keydown.ArrowDown)=\"onArrowPress($event)\"\n       (keypress)=\"validateInputEntry($event)\"\n       #input>\n" }]
-      }], function () { return [{ type: i0__namespace.Injector }]; }, { inputEl: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { inputEl: [{
               type: i0.ViewChild,
               args: ['input', { static: true }]
           }], ngModel: [{
               type: i0.ViewChild,
               args: [i2$1.NgModel]
           }] }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(InputNumberComponent, { className: "InputNumberComponent", filePath: "text/number/input-number.component.ts", lineNumber: 22 }); })();
 
   const inputTextTypeProps = new Map([
       ['autocomplete', { value: true, ...i2.PROP_BOOLEAN }],
@@ -2816,8 +2922,8 @@
   };
   class InputTextComponent extends BaseInput {
       static { this.initializeProps = registerProps$1(); }
-      constructor(inj) {
-          super(inj, WIDGET_CONFIG$1);
+      constructor(inj, explicitContext) {
+          super(inj, WIDGET_CONFIG$1, explicitContext);
           this.lazy = false;
       }
       /* Define the property change handler. This function will be triggered when there is a change in the widget property */
@@ -2888,7 +2994,7 @@
           super.ngOnInit();
           this.isFocused = !!this.datavalue;
       }
-      static { this.ɵfac = function InputTextComponent_Factory(t) { return new (t || InputTextComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+      static { this.ɵfac = function InputTextComponent_Factory(t) { return new (t || InputTextComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: InputTextComponent, selectors: [["wm-input", "type", "text"], ["wm-input", 3, "type", ""], ["wm-input", "type", "password"], ["wm-input", "type", "search"], ["wm-input", "type", "tel"], ["wm-input", "type", "url"]], viewQuery: function InputTextComponent_Query(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵviewQuery(_c0$1, 7);
               i0__namespace.ɵɵviewQuery(i2$1.NgModel, 5);
@@ -2902,24 +3008,32 @@
                   i2.provideAs(InputTextComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(InputTextComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(InputTextComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1, decls: 2, vars: 19, consts: [["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "type", "ngModel", "imask", "unmask", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "pattern", "autofocus", "ngClass", "ngStyle", "autocomplete", "ngModelChange", "blur", "focus", "keyup.enter"], ["input", ""]], template: function InputTextComponent_Template(rf, ctx) { if (rf & 1) {
+              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1, decls: 2, vars: 19, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "focus", "keyup.enter", "type", "ngModel", "imask", "unmask", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "pattern", "autofocus", "ngClass", "ngStyle", "autocomplete"]], template: function InputTextComponent_Template(rf, ctx) { if (rf & 1) {
               const _r1 = i0__namespace.ɵɵgetCurrentView();
-              i0__namespace.ɵɵelementStart(0, "input", 0, 1);
-              i0__namespace.ɵɵlistener("ngModelChange", function InputTextComponent_Template_input_ngModelChange_0_listener($event) { return ctx.datavalue = $event; })("ngModelChange", function InputTextComponent_Template_input_ngModelChange_0_listener($event) { return ctx.handleChange($event); })("blur", function InputTextComponent_Template_input_blur_0_listener($event) { ctx.handleBlur($event); return ctx.checkForDisplayFormat($event); })("focus", function InputTextComponent_Template_input_focus_0_listener($event) { return ctx.checkForDisplayFormat($event); })("keyup.enter", function InputTextComponent_Template_input_keyup_enter_0_listener() { i0__namespace.ɵɵrestoreView(_r1); const _r0 = i0__namespace.ɵɵreference(1); return i0__namespace.ɵɵresetView(ctx.flushViewChanges(_r0.value)); });
+              i0__namespace.ɵɵelementStart(0, "input", 1, 0);
+              i0__namespace.ɵɵtwoWayListener("ngModelChange", function InputTextComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0__namespace.ɵɵresetView($event); });
+              i0__namespace.ɵɵlistener("ngModelChange", function InputTextComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleChange($event)); })("blur", function InputTextComponent_Template_input_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); ctx.handleBlur($event); return i0__namespace.ɵɵresetView(ctx.checkForDisplayFormat($event)); })("focus", function InputTextComponent_Template_input_focus_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.checkForDisplayFormat($event)); })("keyup.enter", function InputTextComponent_Template_input_keyup_enter_0_listener() { i0__namespace.ɵɵrestoreView(_r1); const input_r2 = i0__namespace.ɵɵreference(1); return i0__namespace.ɵɵresetView(ctx.flushViewChanges(input_r2.value)); });
               i0__namespace.ɵɵelementEnd();
           } if (rf & 2) {
-              i0__namespace.ɵɵproperty("type", ctx.type)("ngModel", ctx.datavalue)("imask", ctx.mask)("unmask", true)("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
+              i0__namespace.ɵɵproperty("type", ctx.type);
+              i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
+              i0__namespace.ɵɵproperty("imask", ctx.mask)("unmask", true)("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
               i0__namespace.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey);
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.MaxLengthValidator, i2$1__namespace.PatternValidator, i2$1__namespace.NgModel, i3__namespace.IMaskDirective], encapsulation: 2 }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputTextComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputTextComponent, [{
           type: i0.Component,
           args: [{ selector: 'wm-input[type="text"], wm-input:not([type]), wm-input[type="password"], wm-input[type="search"], wm-input[type="tel"], wm-input[type="url"]', providers: [
                       i2.provideAs(InputTextComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(InputTextComponent, i2$1.NG_VALIDATORS, true),
                       i2.provideAsWidgetRef(InputTextComponent)
                   ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [attr.aria-label]=\"hint\"\n       [(ngModel)]=\"datavalue\"\n       [imask]=\"mask\"\n       [unmask]=\"true\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (ngModelChange)=\"handleChange($event)\"\n       (blur)=\"handleBlur($event); checkForDisplayFormat($event)\"\n       (focus)=\"checkForDisplayFormat($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       #input>\n" }]
-      }], function () { return [{ type: i0__namespace.Injector }]; }, { inputEl: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { inputEl: [{
               type: i0.ViewChild,
               args: ['input', { static: true }]
           }], ngModel: [{
@@ -2929,6 +3043,7 @@
               type: i0.ViewChild,
               args: ['input', { read: i3.IMaskDirective }]
           }] }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(InputTextComponent, { className: "InputTextComponent", filePath: "text/text/input-text.component.ts", lineNumber: 25 }); })();
 
   const textareaProps = new Map([
       ['autofocus', i2.PROP_BOOLEAN],
@@ -2964,7 +3079,7 @@
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
       const ctx_r1 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵadvance(1);
+      i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵtextInterpolate(ctx_r1.limitdisplaytext);
   } }
   const WIDGET_CONFIG = {
@@ -2973,14 +3088,14 @@
   };
   class TextareaComponent extends BaseInput {
       static { this.initializeProps = registerProps(); }
-      constructor(inj) {
-          super(inj, WIDGET_CONFIG);
+      constructor(inj, explicitContext) {
+          super(inj, WIDGET_CONFIG, explicitContext);
           this.charlength = 0;
       }
       onInputChange() {
           this.charlength = this.inputEl.nativeElement.value.length;
       }
-      static { this.ɵfac = function TextareaComponent_Factory(t) { return new (t || TextareaComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+      static { this.ɵfac = function TextareaComponent_Factory(t) { return new (t || TextareaComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: TextareaComponent, selectors: [["wm-textarea"]], viewQuery: function TextareaComponent_Query(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵviewQuery(_c0, 7);
               i0__namespace.ɵɵviewQuery(i2$1.NgModel, 5);
@@ -2992,32 +3107,41 @@
                   i2.provideAs(TextareaComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(TextareaComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(TextareaComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], decls: 3, vars: 15, consts: [["focus-target", "", "role", "textbox", "aria-multiline", "true", 1, "form-control", "app-textarea", 3, "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle", "ngModelChange", "blur", "input"], ["textarea", ""], ["class", "textarea-count", 4, "ngIf"], [1, "textarea-count"]], template: function TextareaComponent_Template(rf, ctx) { if (rf & 1) {
-              i0__namespace.ɵɵelementStart(0, "textarea", 0, 1);
-              i0__namespace.ɵɵlistener("ngModelChange", function TextareaComponent_Template_textarea_ngModelChange_0_listener($event) { return ctx.datavalue = $event; })("blur", function TextareaComponent_Template_textarea_blur_0_listener($event) { return ctx.handleBlur($event); })("input", function TextareaComponent_Template_textarea_input_0_listener() { return ctx.onInputChange(); })("ngModelChange", function TextareaComponent_Template_textarea_ngModelChange_0_listener($event) { ctx.handleChange($event); return ctx.onInputChange(); });
+              ]), i0__namespace.ɵɵInheritDefinitionFeature], decls: 3, vars: 15, consts: [["textarea", ""], ["focus-target", "", "role", "textbox", "aria-multiline", "true", 1, "form-control", "app-textarea", 3, "ngModelChange", "blur", "input", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle"], ["class", "textarea-count", 4, "ngIf"], [1, "textarea-count"]], template: function TextareaComponent_Template(rf, ctx) { if (rf & 1) {
+              const _r1 = i0__namespace.ɵɵgetCurrentView();
+              i0__namespace.ɵɵelementStart(0, "textarea", 1, 0);
+              i0__namespace.ɵɵtwoWayListener("ngModelChange", function TextareaComponent_Template_textarea_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0__namespace.ɵɵresetView($event); });
+              i0__namespace.ɵɵlistener("blur", function TextareaComponent_Template_textarea_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleBlur($event)); })("input", function TextareaComponent_Template_textarea_input_0_listener() { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onInputChange()); })("ngModelChange", function TextareaComponent_Template_textarea_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); ctx.handleChange($event); return i0__namespace.ɵɵresetView(ctx.onInputChange()); });
               i0__namespace.ɵɵelementEnd();
               i0__namespace.ɵɵtemplate(2, TextareaComponent_div_2_Template, 2, 1, "div", 2);
           } if (rf & 2) {
-              i0__namespace.ɵɵproperty("ngModel", ctx.datavalue)("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
+              i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
+              i0__namespace.ɵɵproperty("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
               i0__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
               i0__namespace.ɵɵadvance(2);
               i0__namespace.ɵɵproperty("ngIf", ctx.maxchars);
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgIf, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.MaxLengthValidator, i2$1__namespace.NgModel], encapsulation: 2 }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TextareaComponent, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TextareaComponent, [{
           type: i0.Component,
           args: [{ selector: 'wm-textarea', providers: [
                       i2.provideAs(TextareaComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(TextareaComponent, i2$1.NG_VALIDATORS, true),
                       i2.provideAsWidgetRef(TextareaComponent)
                   ], template: "<textarea class=\"form-control app-textarea\"\n          focus-target\n          role=\"textbox\"\n          [attr.name]=\"name\"\n          [(ngModel)]=\"datavalue\"\n          [ngModelOptions]=\"ngModelOptions\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          [disabled]=\"disabled\"\n          [maxlength]=\"maxchars\"\n          [attr.tabindex]=\"tabindex\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.accesskey]=\"shortcutkey\"\n          [attr.aria-label]=\"hint\"\n          aria-multiline=\"true\"\n          [autofocus]=\"autofocus\"\n          [ngClass]=\"conditionalclass\"\n          [ngStyle]=\"conditionalstyle\"\n          (blur)=\"handleBlur($event)\"\n          (input)=\"onInputChange()\"\n          (ngModelChange)=\"handleChange($event); onInputChange();\"\n          #textarea\n></textarea>\n\n<div *ngIf=\"maxchars\" class=\"textarea-count\"  >{{limitdisplaytext}}</div>\n" }]
-      }], function () { return [{ type: i0__namespace.Injector }]; }, { inputEl: [{
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { inputEl: [{
               type: i0.ViewChild,
               args: ['textarea', { static: true }]
           }], ngModel: [{
               type: i0.ViewChild,
               args: [i2$1.NgModel]
           }] }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(TextareaComponent, { className: "TextareaComponent", filePath: "textarea/textarea.component.ts", lineNumber: 22 }); })();
 
   class CaptionPositionDirective {
       constructor(inj, app) {
@@ -3140,7 +3264,8 @@
               // isSelectMultiple is set to true when for select widget, multiple option is enabled
               // Checking inputEl focus - when form is represented as dialog and the first field is automatically in focus
               const isInputElFocused = this.inputEl && this.inputEl.is(':focus');
-              if (data.displayVal || data.isFocused || data.isSelectMultiple || isInputElFocused) {
+              const localName = this.inputEl && this.inputEl.length && this.inputEl[0].localName;
+              if ((data.isSelect && localName == 'select') || data.displayVal || data.isFocused || data.isSelectMultiple || isInputElFocused) {
                   data.nativeEl.addClass('float-active');
                   if (!data.displayVal && isInputElFocused) {
                       this.inputEl.attr('placeholder', this.placeholder);
@@ -3177,12 +3302,12 @@
       static { this.ɵfac = function CaptionPositionDirective_Factory(t) { return new (t || CaptionPositionDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.App)); }; }
       static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: CaptionPositionDirective, selectors: [["", "wmCaptionPosition", ""]] }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CaptionPositionDirective, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CaptionPositionDirective, [{
           type: i0.Directive,
           args: [{
                   selector: '[wmCaptionPosition]'
               }]
-      }], function () { return [{ type: i0__namespace.Injector }, { type: i1$1__namespace.App }]; }, null); })();
+      }], () => [{ type: i0__namespace.Injector }, { type: i1$1__namespace.App }], null); })();
 
   const components = [
       ButtonComponent,
@@ -3210,7 +3335,7 @@
               i2.WmComponentsModule,
               i3.IMaskModule] }); }
   }
-  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputModule, [{
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputModule, [{
           type: i0.NgModule,
           args: [{
                   imports: [
@@ -3274,7 +3399,6 @@
   exports.InputNumberComponent = InputNumberComponent;
   exports.InputTextComponent = InputTextComponent;
   exports.NumberComponent = NumberComponent;
-  exports.NumberLocale = NumberLocale;
   exports.RadiosetComponent = RadiosetComponent;
   exports.SelectComponent = SelectComponent;
   exports.SwitchComponent = SwitchComponent;