@wavemaker/app-ng-runtime 11.8.0-rc.5666 → 11.8.0-rc.5668

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

@@ -0,0 +1,3416 @@
+(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('lodash-es'), require('rxjs'), require('tslib')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/forms', 'angular-imask', '@wm/components/base', '@wm/core', 'lodash-es', 'rxjs', 'tslib'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.input = {}), global.ng.core, global.ng.common, global.ng.forms, global.angularIMask, global.wm.components.base, global.wm.core, global._, global.rxjs, global.tslib));
+})(this, (function (exports, i0, i1, i2$1, i3, i2, i1$1, lodashEs, rxjs, tslib) { 'use strict';
+
+  function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+      Object.keys(e).forEach(function (k) {
+        if (k !== 'default') {
+          var d = Object.getOwnPropertyDescriptor(e, k);
+          Object.defineProperty(n, k, d.get ? d : {
+            enumerable: true,
+            get: function () { return e[k]; }
+          });
+        }
+      });
+    }
+    n.default = e;
+    return Object.freeze(n);
+  }
+
+  var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
+  var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
+  var i2$1__namespace = /*#__PURE__*/_interopNamespaceDefault(i2$1);
+  var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
+  var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
+  var i1$1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1$1);
+
+  const registerProps$e = () => {
+      i2.register('wm-button', new Map([
+          ['animation', i2.PROP_STRING],
+          ['badgevalue', i2.PROP_STRING],
+          ['caption', i2.PROP_STRING],
+          ['class', i2.PROP_STRING],
+          ['conditionalclass', i2.PROP_ANY],
+          ['conditionalstyle', i2.PROP_ANY],
+          ['disabled', i2.PROP_BOOLEAN],
+          ['hint', i2.PROP_STRING],
+          ['iconclass', i2.PROP_STRING],
+          ['iconheight', i2.PROP_STRING],
+          ['iconmargin', i2.PROP_STRING],
+          ['iconposition', i2.PROP_STRING],
+          ['iconurl', i2.PROP_STRING],
+          ['iconwidth', i2.PROP_STRING],
+          ['name', i2.PROP_STRING],
+          ['shortcutkey', i2.PROP_STRING],
+          ['show', { value: true, ...i2.PROP_BOOLEAN }],
+          ['tabindex', { value: 0, ...i2.PROP_NUMBER }],
+          ['type', i2.PROP_STRING]
+      ]));
+  };
+
+  const _c0$c = ["wmButton", ""];
+  const _c1$b = [[["", 8, "caret"]]];
+  const _c2$8 = [".caret"];
+  const _c3$3 = (a0, a1, a2) => ({ width: a0, height: a1, margin: a2 });
+  const _c4$2 = (a0, a1, a2, a3) => ({ width: a0, height: a1, margin: a2, fontSize: a3 });
+  function ButtonComponent_img_0_Template(rf, ctx) { if (rf & 1) {
+      i0__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, _c3$3, ctx_r0.iconwidth, ctx_r0.iconheight, ctx_r0.iconmargin));
+  } }
+  function ButtonComponent_i_1_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelement(0, "i", 6);
+  } if (rf & 2) {
+      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_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_r0 = i0__namespace.ɵɵnextContext();
+      i0__namespace.ɵɵproperty("textContent", ctx_r0.badgevalue);
+  } }
+  const DEFAULT_CLS$6 = 'btn app-button';
+  const WIDGET_CONFIG$e = {
+      widgetType: 'wm-button',
+      hostClass: DEFAULT_CLS$6,
+      displayType: i2.DISPLAY_TYPE.INLINE_BLOCK
+  };
+  class ButtonComponent extends i2.StylableComponent {
+      static { this.initializeProps = registerProps$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), 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: _c2$8, decls: 6, vars: 5, consts: [["data-identifier", "img", "alt", "button image", "class", "button-image-icon", 3, "src", "ngStyle", 4, "ngIf"], ["aria-hidden", "true", 3, "class", "ngStyle", 4, "ngIf"], ["class", "sr-only", 4, "ngIf"], [1, "btn-caption", 3, "innerHTML"], ["class", "badge pull-right", 3, "textContent", 4, "ngIf"], ["data-identifier", "img", "alt", "button image", 1, "button-image-icon", 3, "src", "ngStyle"], ["aria-hidden", "true", 3, "ngStyle"], [1, "sr-only"], [1, "badge", "pull-right", 3, "textContent"]], template: function ButtonComponent_Template(rf, ctx) { if (rf & 1) {
+              i0__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();
+              i0__namespace.ɵɵproperty("ngIf", ctx.iconclass);
+              i0__namespace.ɵɵadvance();
+              i0__namespace.ɵɵproperty("ngIf", ctx.iconclass);
+              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 }); }
+  }
+  (() => { (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" }]
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { type: [{
+              type: i0.HostBinding,
+              args: ['type']
+          }], tabindex: [{
+              type: i0.HostBinding,
+              args: ['tabIndex']
+          }], disabled: [{
+              type: i0.HostBinding,
+              args: ['disabled']
+          }], shortcutkey: [{
+              type: i0.HostBinding,
+              args: ['attr.accesskey']
+          }], iconposition: [{
+              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([
+          ['class', i2.PROP_STRING],
+          ['name', i2.PROP_STRING],
+          ['show', { value: true, ...i2.PROP_BOOLEAN }],
+          ['vertical', i2.PROP_BOOLEAN]
+      ]));
+  };
+
+  const DEFAULT_CLS$5 = 'btn-group app-button-group';
+  const WIDGET_CONFIG$d = {
+      widgetType: 'wm-buttongroup',
+      hostClass: DEFAULT_CLS$5
+  };
+  class ButtonGroupDirective extends i2.StylableComponent {
+      static { this.initializeProps = registerProps$d(); }
+      handleClick(event) {
+          const $target = $(event.target).closest('.app-button');
+          this.$element.find('.app-button').removeClass('selected');
+          $target.addClass('selected');
+      }
+      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), 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) {
+              i0__namespace.ɵɵclassProp("btn-group-vertical", ctx.vertical);
+          } }, features: [i0__namespace.ɵɵProvidersFeature([
+                  i2.provideAsWidgetRef(ButtonGroupDirective)
+              ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
+  }
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ButtonGroupDirective, [{
+          type: i0.Directive,
+          args: [{
+                  selector: '[wmButtonGroup]',
+                  providers: [
+                      i2.provideAsWidgetRef(ButtonGroupDirective)
+                  ]
+              }]
+      }], () => [{ 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: [{
+              type: i0.HostListener,
+              args: ['click', ['$event']]
+          }] }); })();
+
+  class BaseFormComponent extends i2.StylableComponent {
+      constructor(inj, config, explicitContext, initPromise) {
+          super(inj, config, explicitContext, initPromise);
+          this.inj = inj;
+          this.binddatavalue = this.$element.attr('datavalue.bind');
+      }
+      set datavalue(datavalue) {
+          this.dataval = datavalue;
+      }
+      get datavalue() {
+          return this.dataval;
+      }
+      /**
+       * Responsible for updating the variable bound to the widget's datavalue property.
+       * @param value
+       */
+      updateBoundVariable(value) {
+          let binddatavalue = this.binddatavalue;
+          // return if the variable bound is not static.
+          if (this.datavaluesource && this.datavaluesource.execute(i1$1.DataSource.Operation.IS_API_AWARE)) {
+              return;
+          }
+          else if (this.datavaluesource && !this.datavaluesource.twoWayBinding) {
+              return;
+          }
+          // return if widget is bound.
+          if (!binddatavalue || binddatavalue.startsWith('Widgets.') || binddatavalue.startsWith('itemRef.currentItemWidgets')) {
+              return;
+          }
+          binddatavalue = binddatavalue.replace(/\[\$i\]/g, '[0]');
+          // In case of list widget context will be the listItem.
+          if (lodashEs.has(this.context, binddatavalue.split('.')[0])) {
+              lodashEs.set(this.context, binddatavalue, value);
+          }
+          else {
+              lodashEs.set(this.viewParent, binddatavalue, value);
+          }
+      }
+      invokeOnChange(value, $event) {
+          // invoke the event callback
+          if ($event) {
+              if (this.datavalue !== this.prevDatavalue) {
+                  this.updateBoundVariable(value);
+                  this.invokeEventCallback('change', {
+                      $event,
+                      newVal: value,
+                      oldVal: this.prevDatavalue
+                  });
+              }
+          }
+          // update the previous value
+          this.prevDatavalue = value;
+      }
+      updatePrevDatavalue(val) {
+          this.prevDatavalue = val;
+      }
+      ngAfterViewInit() {
+          super.ngAfterViewInit();
+          // [WMS-18892]- stopping event propagation [for ArrowLeft, ArrowUp, ArrowRight, ArrowDown actions]  when form widgets or form is inside list widget
+          let parentElemList = $(this.nativeElement).parents();
+          if (parentElemList.closest('[wmList]').length) {
+              this.$element.keydown(function ($event) {
+                  if ($event.keyCode === 37 || $event.keyCode === 38 || $event.keyCode === 39 || $event.keyCode === 40) {
+                      $event.stopPropagation();
+                  }
+              });
+          }
+      }
+      static { this.ɵfac = function BaseFormComponent_Factory(t) { return new (t || BaseFormComponent)(i0__namespace.ɵɵinject(i0__namespace.Injector), i0__namespace.ɵɵinject(i2.WidgetConfig), i0__namespace.ɵɵinject('EXPLICIT_CONTEXT', 8), i0__namespace.ɵɵinject(Promise)); }; }
+      static { this.ɵprov = /*@__PURE__*/ i0__namespace.ɵɵdefineInjectable({ token: BaseFormComponent, factory: BaseFormComponent.ɵfac }); }
+  }
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(BaseFormComponent, [{
+          type: i0.Injectable
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: [i2.WidgetConfig]
+              }] }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }, { type: Promise }], null); })();
+
+  /*
+   * WMS-18269
+   * custom 'required' validator for components,
+   * as the bound values are resolved at runtime
+   * Called on 'required' property change
+   *
+   * Note: Component needs NG_VALIDATOR provider for this to work
+   */
+  function isValidValue(val) {
+      switch (typeof val) {
+          case 'object': return (!!val && (!!val.length || !!Object.keys(val).length));
+          case 'number': return (!!val || val === 0);
+          default: return !(val === undefined || val === null || val === '');
+      }
+  }
+  function validateRequiredBind(required) {
+      return (control) => required
+          ? (isValidValue(control.value)
+              ? null
+              : { required: true })
+          : null;
+  }
+  class BaseFormCustomComponent extends BaseFormComponent {
+      constructor() {
+          super(...arguments);
+          this._onChange = () => { };
+          this._onTouched = () => { };
+      }
+      ngOnInit() {
+          super.ngOnInit();
+          this._formControl = this.inj.get(i2$1.FormControlName, null);
+      }
+      registerOnChange(fn) {
+          this._onChange = fn;
+      }
+      registerOnTouched(fn) {
+          this._onTouched = fn;
+      }
+      writeValue(value) {
+          if (this.isDestroyed) {
+              return;
+          }
+          if (this._formControl) {
+              this.datavalue = value;
+              this.onPropertyChange('datavalue', value);
+              this.updatePrevDatavalue(value);
+          }
+          /*
+           * WMS:18246
+           * Call onChange on default value, so that the Component Model is updated
+           * Do only When the Model Value is different from datavalue
+           */
+          (value !== this.datavalue) && this._onChange(this.datavalue);
+      }
+      invokeOnChange(value, $event, valid) {
+          // let the angular know about the change
+          this._onChange(value);
+          if ($event) {
+              super.invokeOnChange(value, $event);
+          }
+          else if (valid) {
+              // Fix for [WMS-24869]: updating PrevDatavalue when there is a default value for the widget.
+              this.updatePrevDatavalue(value);
+          }
+      }
+      invokeOnTouched($event) {
+          this._onTouched();
+          if ($event) {
+              this.invokeEventCallback('blur', { $event });
+          }
+      }
+      invokeOnFocus($event) {
+          this.invokeEventCallback('focus', { $event });
+      }
+      /* WMS-18269 */
+      validate(control) {
+          return this['show'] ? validateRequiredBind(this['required'])(control) : null;
+      }
+      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 }); }
+  }
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(BaseFormCustomComponent, [{
+          type: i0.Injectable
+      }], null, null); })();
+
+  const checkboxProps = new Map([
+      ['caption', i2.PROP_STRING],
+      ['class', i2.PROP_STRING],
+      ['conditionalclass', i2.PROP_ANY],
+      ['conditionalstyle', i2.PROP_ANY],
+      ['checkedvalue', { value: true, ...i2.PROP_STRING }],
+      ['datavaluesource', i2.PROP_ANY],
+      ['datavalue', i2.PROP_STRING],
+      ['disabled', i2.PROP_BOOLEAN],
+      ['hint', i2.PROP_STRING],
+      ['name', i2.PROP_STRING],
+      ['readonly', i2.PROP_BOOLEAN],
+      ['required', i2.PROP_BOOLEAN],
+      ['shortcutkey', i2.PROP_STRING],
+      ['show', { value: true, ...i2.PROP_BOOLEAN }],
+      ['tabindex', { value: 0, ...i2.PROP_NUMBER }],
+      ['uncheckedvalue', { value: false, ...i2.PROP_STRING }]
+  ]);
+  const registerProps$c = () => {
+      i2.register('wm-checkbox', checkboxProps);
+      i2.registerFormWidget(i1$1.FormWidgetType.CHECKBOX, checkboxProps);
+      i2.registerFormWidget(i1$1.FormWidgetType.TOGGLE, checkboxProps);
+  };
+
+  const _c0$b = ["checkbox"];
+  const _c1$a = ["wmCheckbox", ""];
+  const _c2$7 = (a0, a1, a2) => ({ "unchecked": a0, "disabled": a1, "required": a2 });
+  const _c3$2 = () => ({ standalone: true });
+  const DEFAULT_CLS$4 = 'app-checkbox checkbox';
+  const WIDGET_CONFIG$c = {
+      widgetType: 'wm-checkbox',
+      hostClass: DEFAULT_CLS$4
+  };
+  /*
+   * try to convert the chekedvalue and unchecked values to boolean/number
+   */
+  const unStringify = (val, defaultVal) => {
+      if (val === null) {
+          return defaultVal;
+      }
+      if (val === true || val === 'true') {
+          return true;
+      }
+      if (val === false || val === 'false') {
+          return false;
+      }
+      const number = parseInt(val, 10);
+      if (!isNaN(number)) {
+          return number;
+      }
+      return val;
+  };
+  class CheckboxComponent extends BaseFormCustomComponent {
+      static { this.initializeProps = registerProps$c(); }
+      // if the checkbox is checked, return checkedvalue else return uncheckedvalue
+      // @ts-ignore
+      get datavalue() {
+          return i1$1.isDefined(this.proxyModel) ? (this.proxyModel ? this._checkedvalue : this._uncheckedvalue) : undefined;
+      }
+      // when the datavalue is set, update the checked state
+      // @ts-ignore
+      set datavalue(v) {
+          this.proxyModel = (i1$1.isDefined(v) && v !== '') ? v === this._checkedvalue : undefined;
+          this.updatePrevDatavalue(this.datavalue);
+      }
+      constructor(inj, checkedVal, uncheckedVal, type, explicitContext) {
+          super(inj, WIDGET_CONFIG$c, explicitContext);
+          this.type = type;
+          this._caption = '&nbsp';
+          this._checkedvalue = unStringify(checkedVal, true);
+          this._uncheckedvalue = unStringify(uncheckedVal, false);
+          // if the type of the checkbox is toggle update the related classes on the host node
+          i1$1.toggleClass(this.nativeElement, 'app-toggle', type === 'toggle');
+      }
+      onPropertyChange(key, nv, ov) {
+          if (key === 'tabindex') {
+              return;
+          }
+          if (key === 'required') {
+              this._onChange(this.datavalue);
+              return;
+          }
+          if (key === 'caption') {
+              if (!i1$1.isDefined(nv) || nv === '') {
+                  this._caption = '&nbsp;';
+              }
+              else {
+                  this._caption = nv;
+              }
+          }
+          else if (key === 'checkedvalue') {
+              this._checkedvalue = unStringify(nv, true);
+          }
+          else if (key === 'uncheckedvalue') {
+              this._uncheckedvalue = unStringify(nv, false);
+          }
+          else if (key === 'datavalue') {
+              this.datavalue = unStringify(nv);
+              this._onChange(this.datavalue);
+          }
+          else {
+              super.onPropertyChange(key, nv, ov);
+          }
+      }
+      // change and blur events are handled from template
+      handleEvent(node, eventName, callback, locals) {
+          if (eventName !== 'change' && eventName !== 'blur') {
+              // applying tap (Hammer event) on the label as the event handler is not getting triggered on the input.
+              const $el = eventName === 'tap' ? this.nativeElement.querySelector('label') : this.checkboxEl.nativeElement;
+              super.handleEvent($el, eventName, callback, locals);
+          }
+      }
+      handleChange(newVal) {
+          this.invokeOnChange(this.datavalue, { type: 'change' }, this.ngModel.valid);
+      }
+      onKeyDown($event) {
+          $event.preventDefault();
+          this.checkboxEl.nativeElement.click();
+      }
+      ngAfterViewInit() {
+          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'), 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);
+          } if (rf & 2) {
+              let _t;
+              i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.ngModel = _t.first);
+              i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.checkboxEl = _t.first);
+          } }, hostBindings: function CheckboxComponent_HostBindings(rf, ctx) { if (rf & 1) {
+              i0__namespace.ɵɵlistener("keydown.enter", function CheckboxComponent_keydown_enter_HostBindingHandler($event) { return ctx.onKeyDown($event, "ENTER"); });
+          } }, features: [i0__namespace.ɵɵProvidersFeature([
+                  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: 19, consts: [["checkbox", ""], [3, "ngClass"], ["type", "checkbox", "role", "checkbox", "focus-target", "", 3, "ngModelChange", "blur", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "tabindex"], [1, "caption", 3, "innerHtml"], ["alt", "Checkbox Image", "aria-hidden", "true", "src", "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==", 1, "switch"], ["type", "hidden", "aria-hidden", "true", "tabindex", "-1", 1, "ng-hide", "model-holder", 3, "disabled", "value"]], template: function CheckboxComponent_Template(rf, ctx) { if (rf & 1) {
+              const _r1 = i0__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(14, _c2$7, !ctx.proxyModel, ctx.disabled || ctx.readonly, ctx.required && ctx._caption));
+              i0__namespace.ɵɵadvance();
+              i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.proxyModel);
+              i0__namespace.ɵɵproperty("ngModelOptions", i0__namespace.ɵɵpureFunction0(18, _c3$2))("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);
+              i0__namespace.ɵɵadvance(2);
+              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 }); }
+  }
+  (() => { (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           [ngModelOptions]=\"{standalone: true}\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           [disabled]=\"disabled || readonly\"\n           [attr.accesskey]=\"shortcutkey\"\n           [tabindex]=\"tabindex\"\n           (blur)=\"invokeOnTouched($event)\"\n           (ngModelChange)=\"handleChange($event)\">\n    <span class=\"caption\" [innerHtml]=\"_caption\"></span>\n    <img alt=\"Checkbox Image\" aria-hidden=\"true\" src=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"switch\"/>\n</label>\n<input type=\"hidden\" class=\"ng-hide model-holder\" aria-hidden=\"true\" tabindex=\"-1\" [disabled]=\"disabled\" [value]=\"proxyModel\">\n" }]
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Attribute,
+                  args: ['checkedvalue']
+              }] }, { type: undefined, decorators: [{
+                  type: i0.Attribute,
+                  args: ['uncheckedvalue']
+              }] }, { type: undefined, decorators: [{
+                  type: i0.Attribute,
+                  args: ['type']
+              }] }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { ngModel: [{
+              type: i0.ViewChild,
+              args: [i2$1.NgModel]
+          }], checkboxEl: [{
+              type: i0.ViewChild,
+              args: ['checkbox', { static: true, read: i0.ElementRef }]
+          }], onKeyDown: [{
+              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() {
+          return this._modelByKey;
+      }
+      // triggers on ngModel change. This function extracts the datavalue value.
+      set modelByKey(val) {
+          this.selectByKey(val);
+          // invoke on datavalue change.
+          this.invokeOnChange(this._modelByValue);
+      }
+      // @ts-ignore
+      get datavalue() {
+          return this._modelByValue;
+      }
+      // triggers on setting the datavalue. This function extracts the model value.
+      // @ts-ignore
+      set datavalue(val) {
+          if (this.multiple) {
+              val = i2.extractDataAsArray(val);
+          }
+          this._modelByValue = val;
+          this.selectByValue(val);
+          // changes on the datavalue can be subscribed using listenToDatavalue
+          this.datavalue$.next(val);
+          // invoke on datavalue change.
+          this.invokeOnChange(val, undefined, true);
+      }
+      constructor(inj, config, explicitContext, groupby) {
+          super(inj, config, explicitContext);
+          this.groupby = groupby;
+          this.datasetItems = [];
+          this.acceptsArray = false; // set to true if proxyModel on widget accepts array type.
+          this.dataset$ = new rxjs.Subject();
+          this.datavalue$ = new rxjs.Subject();
+          this.allowempty = true;
+          this._debounceDatavalueUpdation = lodashEs.debounce((values) => {
+              // if no item is found in datasetItems, wait untill the dataset updates by preserving the datavalue in toBeProcessedDatavalue.
+              if (!i1$1.isDefined(this._modelByKey) || (lodashEs.isArray(this._modelByKey) && !this._modelByKey.length)) {
+                  this.toBeProcessedDatavalue = values;
+                  this._modelByValue = '';
+              }
+              else if (i1$1.isDefined(this.toBeProcessedDatavalue)) {
+                  // obtain the first array value when multiple is set to false.
+                  // set the modelByValue only when undefined.
+                  if (!i1$1.isDefined(this._modelByValue)) {
+                      this._modelByValue = (!this.multiple && lodashEs.isArray(this.toBeProcessedDatavalue)) ? this.toBeProcessedDatavalue[0] : this.toBeProcessedDatavalue;
+                  }
+                  this.toBeProcessedDatavalue = undefined;
+              }
+              this.initDisplayValues();
+          }, 150);
+          this.datePipe = this.inj.get(i2.ToDatePipe);
+          this.appDefaults = this.inj.get(i1$1.AppDefaults);
+          this.binddisplayexpression = this.nativeElement.getAttribute('displayexpression.bind');
+          this.binddisplayimagesrc = this.nativeElement.getAttribute('displayimagesrc.bind');
+          this.binddisplaylabel = this.nativeElement.getAttribute('displaylabel.bind');
+          this._debouncedInitDatasetItems = i1$1.debounce(() => {
+              this.initDatasetItems();
+              i1$1.$appDigest();
+          }, 150);
+          this.handleHeaderClick = i1$1.noop;
+          this.cancelLocaleChangeSubscription = this.getAppInstance().subscribe("locale-changed", () => {
+              this._debouncedInitDatasetItems();
+          });
+      }
+      /**
+       * This function sets the _datavalue value from the model and sets the selected flag when item is found.
+       * Here model is the value obtained from ngModel.
+       * @param keys represent the model.
+       */
+      selectByKey(keys) {
+          this.resetDatasetItems();
+          if (!this.datasetItems.length) {
+              return;
+          }
+          if (this.multiple && !lodashEs.isArray(keys)) {
+              keys = [keys];
+          }
+          // Set the _modelByKey to the modified keys.
+          this._modelByKey = keys;
+          if (this.multiple) {
+              this._modelByValue = [];
+              keys.forEach(key => {
+                  const itemByKey = lodashEs.find(this.datasetItems, item => {
+                      // not triple equal, as the instance type can be different.
+                      // only value comparison should be done.
+                      return lodashEs.toString(item.key) === lodashEs.toString(key);
+                  });
+                  if (itemByKey) {
+                      itemByKey.selected = true;
+                      this._modelByValue = [...this._modelByValue, itemByKey.value];
+                  }
+              });
+          }
+          else {
+              this._modelByValue = '';
+              const itemByKey = lodashEs.find(this.datasetItems, item => {
+                  // not triple equal, as the instance type can be different.
+                  // only value comparison should be done.
+                  return lodashEs.toString(item.key) === lodashEs.toString(keys);
+              });
+              if (itemByKey) {
+                  itemByKey.selected = true;
+                  this._modelByValue = itemByKey.value;
+              }
+          }
+          this.initDisplayValues();
+      }
+      /**
+       * This function sets the _model value from the datavalue (selectedvalues) and sets the selected flag when item is found.
+       * datavalue is the default value or a value representing the displayField (for suppose: object in case of ALLFIELDS).
+       * If acceptsArray is true, the model always accepts an array.
+       * For example, select always accepts model as array whether multiple select is true or false.
+       * @param values represent the datavalue.
+       */
+      selectByValue(values) {
+          this.resetDatasetItems();
+          // if datavalue is not defined or empty then set the model as undefined.
+          if (!i1$1.isDefined(values) || values === '' || lodashEs.isNull(values) || (values instanceof Array && !values.length)) {
+              this._modelByKey = undefined;
+              // do not return when allowempty is set to true.
+              if (!this.allowempty || !i1$1.isDefined(values)) {
+                  return;
+              }
+          }
+          if (this.acceptsArray && !lodashEs.isArray(values)) {
+              values = this.allowempty ? [values] : i2.extractDataAsArray(values);
+          }
+          // preserve the datavalue if datasetItems are empty.
+          if (!this.datasetItems.length && i1$1.isDefined(values)) {
+              this.toBeProcessedDatavalue = values;
+              return;
+          }
+          const filterField = this.datafield === i2.ALLFIELDS ? 'dataObject' : 'key';
+          if (lodashEs.isArray(values)) {
+              this._modelByKey = [];
+              values.forEach(val => {
+                  const itemByValue = lodashEs.find(this.datasetItems, item => {
+                      if (filterField === 'dataObject') {
+                          if (this.compareby && this.compareby.length) {
+                              return i1$1.isEqualWithFields(item[filterField], val, this.compareby);
+                          }
+                      }
+                      return (lodashEs.isObject(item.value) ? lodashEs.isEqual(item.value, val) : (lodashEs.toString(item.value)).toLowerCase() === (lodashEs.toString(val)).toLowerCase());
+                  });
+                  if (itemByValue) {
+                      itemByValue.selected = true;
+                      this._modelByKey.push(itemByValue.key);
+                  }
+              });
+          }
+          else {
+              this._modelByKey = undefined;
+              const itemByValue = lodashEs.find(this.datasetItems, item => {
+                  if (filterField === 'dataObject') {
+                      if (this.compareby && this.compareby.length) {
+                          return i1$1.isEqualWithFields(item[filterField], values, this.compareby);
+                      }
+                  }
+                  return (lodashEs.isObject(item.value) ? lodashEs.isEqual(item.value, values) : (lodashEs.toString(item.value)).toLowerCase() === (lodashEs.toString(values)).toLowerCase());
+              });
+              if (itemByValue) {
+                  itemByValue.selected = true;
+                  this._modelByKey = itemByValue.key;
+              }
+          }
+          // delaying the datavalue update as the widgets in liveform are having datavalue as undefined and not the default provided value
+          // because datavalue is updated later when new dataset is available.
+          this._debounceDatavalueUpdation(values);
+      }
+      // Updates the displayValue property.
+      initDisplayValues() {
+          const displayValues = [];
+          this.datasetItems.forEach(item => {
+              if (item.selected) {
+                  displayValues.push(item.label);
+              }
+          });
+          this.displayValue = this.multiple ? displayValues : displayValues[0] || '';
+      }
+      // This function parses the dataset and extracts the displayOptions from parsed dataset.
+      initDatasetItems() {
+          if (!this.dataset || lodashEs.isEmpty(this.dataset)) {
+              this.datasetItems = [];
+              // notify the dataset listeners
+              this.dataset$.next(this.datasetItems);
+              return;
+          }
+          // convert any dataset to the object format.
+          const orderedDataset = i2.getOrderedDataset(i2.convertDataToObject(this.dataset), this.orderby);
+          if (this.usekeys) {
+              this.datasetItems = i2.transformDataWithKeys(orderedDataset);
+          }
+          else {
+              const displayOptions = i2.transformFormData(this.viewParent, orderedDataset, this.datafield, {
+                  displayField: this.displayfield || this.displaylabel,
+                  displayExpr: this.displayexpression,
+                  bindDisplayExpr: this.binddisplayexpression || this.binddisplaylabel,
+                  bindDisplayImgSrc: this.binddisplayimagesrc,
+                  displayImgSrc: this.displayimagesrc
+              });
+              // get the unique objects out of the extracted data. Notify change in datasetItems using [...datasetItems] notation
+              this.datasetItems = [...i2.getUniqObjsByDataField(displayOptions, this.datafield, this.displayfield || this.displaylabel, i1$1.toBoolean(this.allowempty))];
+          }
+          this.postDatasetItemsInit();
+      }
+      // Once the datasetItems are ready, set the proxyModel by using datavalue.
+      postDatasetItemsInit() {
+          if (this.datasetItems.length && !this._defaultQueryInvoked) {
+              // use the latest of toBeProcessedDatavalue, datavalue
+              const _datavalue = lodashEs.isEmpty(this.toBeProcessedDatavalue) ? this.datavalue : this.toBeProcessedDatavalue;
+              this.selectByValue(_datavalue);
+          }
+          // notify the dataset listeners
+          this.dataset$.next(this.datasetItems);
+      }
+      // Reset the selected flag on datasetItems to false.
+      resetDatasetItems() {
+          this.datasetItems.forEach(item => item.selected = false);
+      }
+      setTemplate(partialName) {
+          this.content = partialName;
+          if (this.viewParent && this.viewParent.prefabName) {
+              this['prefabName'] = this.viewParent.prefabName;
+          }
+      }
+      getGroupedData() {
+          return this.datasetItems.length ? i2.groupData(this, i2.convertDataToObject(this.datasetItems), this.groupby, this.match, this.orderby, this.dateformat, this.datePipe, 'dataObject', this.appDefaults) : [];
+      }
+      datasetSubscription() {
+          const datasetSubscription = this.dataset$.subscribe(() => {
+              this.groupedData = this.getGroupedData();
+          });
+          this.registerDestroyListener(() => datasetSubscription.unsubscribe());
+      }
+      setGroupData() {
+          this.datasetSubscription();
+          // If groupby is set, get the groupedData from the datasetItems.
+          this.groupedData = this.getGroupedData();
+      }
+      onPropertyChange(key, nv, ov) {
+          super.onPropertyChange(key, nv, ov);
+          switch (key) {
+              case 'dataset':
+              case 'datafield':
+              case 'displayfield':
+              case 'displaylabel':
+              case 'displayexpression':
+              case 'orderby':
+              case 'usekeys':
+                  this._debouncedInitDatasetItems();
+                  break;
+              case 'required':
+              case 'datavalue':
+                  this._onChange(this.datavalue);
+                  break;
+              case 'groupby':
+              case 'match':
+                  if (this.widgetType !== 'wm-search' && this.widgetType !== 'wm-chips') {
+                      this.setGroupData();
+                  }
+                  break;
+          }
+      }
+      ngOnInit() {
+          super.ngOnInit();
+          if (this.groupby && (this.widgetType !== 'wm-search' && this.widgetType !== 'wm-chips')) {
+              this.setGroupData();
+          }
+          // adding the handler for header click and toggle headers.
+          if (this.groupby && this.collapsible) {
+              this.handleHeaderClick = i2.handleHeaderClick;
+              this.toggleAllHeaders = i2.toggleAllHeaders.bind(undefined, this);
+          }
+      }
+      ngOnDestroy() {
+          if (this.cancelLocaleChangeSubscription) {
+              this.cancelLocaleChangeSubscription();
+          }
+      }
+      static { this.ɵfac = function DatasetAwareFormComponent_Factory(t) { return new (t || DatasetAwareFormComponent)(i0__namespace.ɵɵinject(i0__namespace.Injector), i0__namespace.ɵɵinject(i2.WidgetConfig), i0__namespace.ɵɵinject('EXPLICIT_CONTEXT', 8), i0__namespace.ɵɵinjectAttribute('groupby')); }; }
+      static { this.ɵprov = /*@__PURE__*/ i0__namespace.ɵɵdefineInjectable({ token: DatasetAwareFormComponent, factory: DatasetAwareFormComponent.ɵfac }); }
+  }
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(DatasetAwareFormComponent, [{
+          type: i0.Injectable
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: [i2.WidgetConfig]
+              }] }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }, { type: undefined, decorators: [{
+                  type: i0.Attribute,
+                  args: ['groupby']
+              }] }], null); })();
+
+  const checkboxsetProps = new Map([
+      ['class', i2.PROP_STRING],
+      ['collapsible', i2.PROP_BOOLEAN],
+      ['compareby', i2.PROP_STRING],
+      ['datafield', i2.PROP_STRING],
+      ['dataset', { value: 'Option 1, Option 2, Option 3', ...i2.PROP_ANY }],
+      ['datavaluesource', i2.PROP_ANY],
+      ['datavalue', i2.PROP_STRING],
+      ['dateformat', i2.PROP_STRING],
+      ['disabled', i2.PROP_BOOLEAN],
+      ['displayexpression', i2.PROP_STRING],
+      ['displayfield', i2.PROP_STRING],
+      ['displayValue', i2.PROP_STRING],
+      ['groupby', i2.PROP_STRING],
+      ['itemclass', { value: '', ...i2.PROP_STRING }],
+      ['itemsperrow', { value: 'xs-1 sm-1 md-1 lg-1', ...i2.PROP_STRING }],
+      ['listclass', { value: '', ...i2.PROP_STRING }],
+      ['match', i2.PROP_STRING],
+      ['name', i2.PROP_STRING],
+      ['orderby', i2.PROP_STRING],
+      ['readonly', i2.PROP_BOOLEAN],
+      ['required', i2.PROP_BOOLEAN],
+      ['show', { value: true, ...i2.PROP_BOOLEAN }],
+      ['showcount', i2.PROP_BOOLEAN],
+      ['showindevice', { displayType: 'inline-block', value: 'all', ...i2.PROP_STRING }],
+      ['tabindex', { value: 0, ...i2.PROP_NUMBER }],
+      ['usekeys', i2.PROP_BOOLEAN]
+  ]);
+  const registerProps$b = () => {
+      i2.register('wm-checkboxset', checkboxsetProps);
+      i2.registerFormWidget(i1$1.FormWidgetType.CHECKBOXSET, new Map(checkboxsetProps));
+  };
+
+  const _c0$a = ["wmCheckboxset", ""];
+  const _c1$9 = (a0, a1) => ["checkbox", "app-checkbox", a0, a1];
+  const _c2$6 = a0 => ({ "disabled": a0 });
+  const _c3$1 = a0 => ({ "collapsible-content": a0 });
+  const _c4$1 = (a0, a1) => ["checkbox", "app-checkbox", "group-list-item", a0, a1];
+  function CheckboxsetComponent_ng_template_0_li_0_label_1_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelementStart(0, "label", 8);
+      i0__namespace.ɵɵelement(1, "input", 9)(2, "span", 10);
+      i0__namespace.ɵɵelementEnd();
+  } if (rf & 2) {
+      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$6, 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_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$6, 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);
+  } }
+  function CheckboxsetComponent_ng_template_0_li_0_Template(rf, ctx) { if (rf & 1) {
+      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 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_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_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);
+  } }
+  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_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_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_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$6, 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_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$6, 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);
+  } }
+  function CheckboxsetComponent_ng_template_3_li_0_li_8_Template(rf, ctx) { if (rf & 1) {
+      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 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_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);
+  } }
+  function CheckboxsetComponent_ng_template_3_li_0_Template(rf, ctx) { if (rf & 1) {
+      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(_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, 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_r7 = ctx.$implicit;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(2);
+      i0__namespace.ɵɵadvance(2);
+      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_r7.key, " ");
+      i0__namespace.ɵɵadvance(2);
+      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_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, explicitContext) {
+          super(inj, WIDGET_CONFIG$b, explicitContext);
+          this.layout = '';
+          i2.styler(this.nativeElement, this);
+          this.multiple = true;
+      }
+      onCheckboxLabelClick($event, key) {
+          if (!$($event.target).is('input')) {
+              return;
+          }
+          // construct the _model from the checked elements.
+          const inputElements = this.nativeElement.querySelectorAll('input:checked');
+          const keys = [];
+          lodashEs.forEach(inputElements, ($el) => {
+              // @ts-ignore
+              keys.push($el.value);
+          });
+          this.modelByKey = keys;
+          this.invokeOnTouched();
+          // invoke on datavalue change.
+          this.invokeOnChange(this.datavalue, $event || {}, true);
+      }
+      // change and blur events are added from the template
+      handleEvent(node, eventName, callback, locals) {
+          if (eventName === 'click') {
+              this.eventManager.addEventListener(node, eventName, e => {
+                  if (!$(e.target).is('input')) {
+                      return;
+                  }
+                  locals.$event = e;
+                  return callback();
+              });
+          }
+          else if (!lodashEs.includes(['change'], eventName)) {
+              super.handleEvent(node, eventName, callback, locals);
+          }
+      }
+      onKeyDown($event) {
+          $event.preventDefault();
+          $event.target.click();
+      }
+      onPropertyChange(key, nv, ov) {
+          if (key === 'tabindex') {
+              return;
+          }
+          if (key === 'required') {
+              this._onChange(this.datavalue);
+              return;
+          }
+          if (key === 'itemsperrow') {
+              i1$1.setListClass(this);
+          }
+          else {
+              super.onPropertyChange(key, nv, ov);
+          }
+      }
+      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: [["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 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();
+              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 }); }
+  }
+  (() => { (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" }]
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { onKeyDown: [{
+              type: i0.HostListener,
+              args: ['keydown.enter', ['$event', '"ENTER"']]
+          }] }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(CheckboxsetComponent, { className: "CheckboxsetComponent", filePath: "checkboxset/checkboxset.component.ts", lineNumber: 27 }); })();
+
+  const registerProps$a = () => {
+      i2.register('wm-form-group', new Map([
+          ['captionposition', i2.PROP_STRING],
+          ['name', i2.PROP_STRING],
+          ['required', i2.PROP_BOOLEAN],
+          ['show', { value: true, ...i2.PROP_BOOLEAN }]
+      ]));
+  };
+
+  const DEFAULT_CLS$2 = 'form-group app-composite-widget clearfix';
+  const WIDGET_CONFIG$a = {
+      widgetType: 'wm-form-group',
+      hostClass: DEFAULT_CLS$2
+  };
+  const CAPTION_POSITION = {
+      left: 'caption-left',
+      right: 'caption-right',
+      top: 'caption-top',
+      floating: 'caption-floating'
+  };
+  class CompositeDirective extends i2.StylableComponent {
+      static { this.initializeProps = registerProps$a(); }
+      constructor(inj, explicitContext) {
+          super(inj, WIDGET_CONFIG$a, explicitContext);
+          i2.styler(this.nativeElement, this, i2.APPLY_STYLES_TYPE.CONTAINER);
+      }
+      /**
+       * this is onPropertyChange handler for the form-group component
+       * @param key
+       * @param nv
+       * @param ov
+       */
+      onPropertyChange(key, nv, ov) {
+          if (key === 'captionposition') {
+              i1$1.switchClass(this.nativeElement, CAPTION_POSITION[nv], CAPTION_POSITION[ov]);
+          }
+          else if (key === 'required') {
+              this.required = nv;
+              this.assignRequiredToSubComponents();
+          }
+          else {
+              super.onPropertyChange(key, nv, ov);
+          }
+      }
+      /**
+       * this method assigns the required on the component/directive based on the required attribute of the form-group
+       */
+      assignRequiredToSubComponents() {
+          if (this.required && this.componentRefs) {
+              setTimeout(() => {
+                  this.componentRefs.forEach(componentRef => componentRef.widget.required = true);
+              }, 50);
+          }
+      }
+      ngAfterViewInit() {
+          super.ngAfterViewInit();
+          i1$1.addForIdAttributes(this.nativeElement);
+          this.assignRequiredToSubComponents();
+      }
+      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) {
+              let _t;
+              i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.componentRefs = _t);
+          } }, features: [i0__namespace.ɵɵProvidersFeature([
+                  i2.provideAsWidgetRef(CompositeDirective)
+              ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
+  }
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CompositeDirective, [{
+          type: i0.Directive,
+          args: [{
+                  selector: 'div[wmComposite]',
+                  providers: [
+                      i2.provideAsWidgetRef(CompositeDirective)
+                  ]
+              }]
+      }], () => [{ 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 }]
+          }] }); })();
+
+  const numberProps = new Map([
+      ['autofocus', i2.PROP_BOOLEAN],
+      ['class', i2.PROP_STRING],
+      ['datavaluesource', i2.PROP_ANY],
+      ['datavalue', i2.PROP_STRING],
+      ['disabled', i2.PROP_BOOLEAN],
+      ['hint', i2.PROP_STRING],
+      ['localefilter', i2.PROP_STRING],
+      ['minvalue', i2.PROP_NUMBER],
+      ['maxvalue', i2.PROP_NUMBER],
+      ['name', i2.PROP_STRING],
+      ['numberfilter', i2.PROP_STRING],
+      ['placeholder', { value: 'Enter number', ...i2.PROP_STRING }],
+      ['readonly', i2.PROP_BOOLEAN],
+      ['regexp', i2.PROP_STRING],
+      ['required', i2.PROP_BOOLEAN],
+      ['shortcutkey', i2.PROP_STRING],
+      ['show', { value: true, ...i2.PROP_BOOLEAN }],
+      ['step', { value: 1, ...i2.PROP_NUMBER }],
+      ['tabindex', { value: 0, ...i2.PROP_NUMBER }],
+      ['trailingzero', { value: false, ...i2.PROP_BOOLEAN }],
+      ['updateon', i2.PROP_STRING],
+      ['inputmode', { value: 'natural', ...i2.PROP_STRING }],
+      ['conditionalclass', i2.PROP_ANY],
+      ['conditionalstyle', i2.PROP_ANY]
+  ]);
+  const registerProps$9 = () => {
+      i2.register('wm-number', numberProps);
+      i2.registerFormWidget(i1$1.FormWidgetType.NUMBER, new Map(numberProps));
+  };
+
+  class BaseInput extends BaseFormCustomComponent {
+      onPropertyChange(key, nv, ov) {
+          // set the class on the input element
+          if (key === 'tabindex') {
+              return;
+          }
+          if (key === 'required') {
+              /* WMS-18269 | Update Angular about the required attr value change */
+              this._onChange(this.datavalue);
+          }
+          if (key === 'class') {
+              if (this.inputEl.nativeElement) {
+                  i1$1.switchClass(this.inputEl.nativeElement, nv, ov);
+              }
+          }
+          else if (key === 'datavalue') {
+              // update the oldDataValue when the datavalue is modified programmatically
+              this.updatePrevDatavalue(nv);
+              this._onChange(this.datavalue);
+          }
+          else {
+              super.onPropertyChange(key, nv, ov);
+          }
+      }
+      // invoke the change callback
+      handleChange(newValue) {
+          if (this.autotrim && this.datavalue && lodashEs.isString(this.datavalue)) {
+              this.datavalue = this.datavalue.trim();
+          }
+          this.invokeOnChange(this.datavalue, { type: 'change' }, this.ngModel.valid);
+      }
+      // Change event is registered from the template, Prevent the framework from registering one more event
+      handleEvent(node, eventName, eventCallback, locals) {
+          if (eventName !== 'change' && eventName !== 'blur') {
+              super.handleEvent(this.inputEl.nativeElement, eventName, eventCallback, locals);
+          }
+      }
+      // invoke the blur callback
+      handleBlur($event) {
+          this.invokeOnTouched($event);
+      }
+      // Update the model on enter key press
+      flushViewChanges(val) {
+          // when val contains masked value, update the model with unmasked value
+          const unMaskedVal = lodashEs.get(this.imask, 'maskRef.unmaskedValue');
+          val = unMaskedVal ? unMaskedVal : val;
+          this.ngModel.update.next(val);
+          i1$1.$appDigest();
+      }
+      ngAfterViewInit() {
+          super.ngAfterViewInit();
+          // add the class on the input element
+          if (this.class) {
+              i1$1.addClass(this.inputEl.nativeElement, this.class);
+          }
+          i2.styler(this.inputEl.nativeElement, this);
+      }
+      constructor(inj, config, explicitContext) {
+          super(inj, config, explicitContext);
+          // possible values for ngModelOptions are 'blur' and 'change'
+          // default is 'blur'
+          this.ngModelOptions = {
+              updateOn: '',
+              standalone: true
+          };
+          let updateOn = this.nativeElement.getAttribute('updateon') || 'blur';
+          updateOn = updateOn === 'default' ? 'change' : updateOn;
+          this.ngModelOptions.updateOn = updateOn;
+      }
+      static { this.ɵfac = function BaseInput_Factory(t) { return new (t || BaseInput)(i0__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 }); }
+  }
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(BaseInput, [{
+          type: i0.Injectable
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: [i2.WidgetConfig]
+              }] }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], null); })();
+
+  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;
+          this.decimalValue = '';
+          this.selectedLocale = i18nService.getSelectedLocale();
+          this.DECIMAL = i1.getLocaleNumberSymbol(this.localefilter || this.selectedLocale, i1.NumberSymbol.Decimal);
+          this.GROUP = i1.getLocaleNumberSymbol(this.localefilter || this.selectedLocale, i1.NumberSymbol.Group);
+          this.numberfilter = '1.0-16';
+          this.resetValidations();
+      }
+      // Setter for the datavalue.
+      // @ts-ignore
+      set datavalue(value) {
+          this.lastValIsDecimal = false;
+          // set text value to null if data value is empty.
+          // @ts-ignore
+          if (lodashEs.includes([null, undefined, ''], value)) {
+              const input = this.inputEl.nativeElement;
+              const prevDataValue = this.prevDatavalue;
+              this.displayValue = input.value = this.proxyModel = null;
+              this.resetValidations();
+              if (prevDataValue && !this.isDefaultQuery) {
+                  this.handleChange(value);
+                  this._onChange();
+              }
+              return;
+          }
+          // if the widget has default value and if we change the locale, the value should be in selected locale format.
+          if (this.isDefaultQuery) {
+              const isLocalizedNumber = lodashEs.isString(value) && lodashEs.includes(value, this.DECIMAL);
+              const parts = isLocalizedNumber ? value.split(this.DECIMAL) : lodashEs.isString(value) && value.split('.');
+              this.decimalValue = parts[1] || '';
+              value = isLocalizedNumber ? value : this.transformNumber(value);
+          }
+          const numberReg = /\d/;
+          const strVal = value.toString();
+          let model;
+          // When the input value only contains seperator, do not convert the sepertaor into 0
+          if (numberReg.test(strVal)) {
+              model = this.parseNumber(strVal);
+          }
+          else {
+              model = NaN;
+          }
+          // On keypress, if the user types a decimal and is still active on the input do not throw error.
+          if (isNaN(model) && strVal[strVal.length - 1] === this.DECIMAL && this.ngModelOptions.updateOn === 'change' && this.$element.find('input:focus').length) {
+              this.lastValIsDecimal = true;
+          }
+          // get a valid number form the text.
+          // if the number is valid or if number is not in range update the model value.
+          if (!this.lastValIsDecimal && this.isValid(model)) {
+              this.proxyModel = model;
+              // update the display value in the text box.
+              this.updateDisplayText();
+              // Do not trigger onchange event for default value
+              if (!this.isDefaultQuery) {
+                  this.handleChange(model);
+              }
+          }
+          else {
+              this.displayValue = value.toString();
+              this.proxyModel = null;
+              this.handleChange(null);
+          }
+      }
+      // returns the actual model value of the widget.
+      get datavalue() {
+          return this.proxyModel;
+      }
+      // resets all the flags related to the widget's validation.
+      resetValidations() {
+          this.isInvalidNumber = false;
+          this.numberNotInRange = false;
+      }
+      /**
+       * Adds validations for the number before updating the widget model. like validating min and max value for the widget.
+       * @param {number} val number to be validated
+       * @returns {number}
+       */
+      isValid(val) {
+          // id number is infinite then consider it as invalid value
+          if (isNaN(val) || !isFinite(val) || (!Number.isInteger(this.step) &&
+              this.countDecimals(val) > this.countDecimals(this.step))) {
+              this.isInvalidNumber = true;
+              return false;
+          }
+          if (val !== this.getValueInRange(val)) {
+              this.numberNotInRange = true;
+              return true;
+          }
+          this.resetValidations();
+          return true;
+      }
+      /**
+       * returns a valid number by validating the minimum and maximum values.
+       * @param {number} value
+       * @returns {number}
+       */
+      getValueInRange(value) {
+          if (!isNaN(this.minvalue) && value < this.minvalue) {
+              this.validateType = 'minvalue';
+              return this.minvalue;
+          }
+          if (!isNaN(this.maxvalue) && value > this.maxvalue) {
+              this.validateType = 'maxvalue';
+              return this.maxvalue;
+          }
+          return value;
+      }
+      /**
+       * convert number to localized number using angular decimal pipe. eg 10,00,000 or 1,000,000
+       * @param number
+       * @returns {string}
+       */
+      transformNumber(number, numberfilter) {
+          const filterVal = numberfilter ? numberfilter : this.numberfilter;
+          return this.trailingZeroDecimalPipe.transform(number, this.selectedLocale, filterVal, this.localefilter, this.trailingzero, this.decimalValue, !!numberfilter, this.i18nService?.getwidgetLocale());
+      }
+      /**
+       * resets the cursor position in the text box.
+       * @param {number} value cursor position index form left to right.
+       */
+      resetCursorPosition(value) {
+          const input = this.inputEl.nativeElement;
+          // position of the cursor should be given form right to left.
+          let position = input.value.length - value;
+          position = position < 0 ? 0 : position;
+          // set the cursor position in the text box.
+          input.setSelectionRange(position, position);
+      }
+      /**
+       * Method parses the Localized number(string) to a valid number.
+       * if the string dose not result to a valid number then returns NaN.
+       * @param {string} val Localized number.
+       * @returns {number}
+       */
+      parseNumber(val) {
+          // WMS-22179: split number based on the decimal separator in the val
+          // splits string into two parts. decimal and number.
+          const parts = val.split(this.inputmode === i2.INPUTMODE.FINANCIAL ? (val.indexOf(this.DECIMAL) > -1 ? this.DECIMAL : '.') : this.DECIMAL);
+          if (!parts.length) {
+              return null;
+          }
+          if (parts.length > 2) {
+              return NaN;
+          }
+          // If number have decimal point and not have a decimal value then return.
+          if (parts[1] === '') {
+              return NaN;
+          }
+          // replaces all group separators form the number.
+          const number = Number(parts[0].split(this.GROUP).join(''));
+          const decimal = Number(`0.${parts[1] || 0}`);
+          if (Number.isNaN(number) || Number.isNaN(decimal)) {
+              return NaN;
+          }
+          const sum = parts.length > 1 ? parseFloat((number + decimal).toFixed(parts[1].length)) : number + decimal;
+          // if the number is negative then calculate the number as number - decimal
+          // Ex: number = -123 and decimal = 0.45 then number - decimal = -123-045 = -123.45
+          // If entered number is -0.1 to -0.9 then the number is -0 and decimal is 0.1 to 0.9. Now calaculate the number as number-decimal
+          // Ex: number = -0 and decimal = 0.1 then number-decimal = -0-0.1 = -0.1
+          if (number === 0) {
+              return Object.is(0, number) ? sum : number - decimal;
+          }
+          return number > 0 ? sum : number - decimal;
+      }
+      // updates the widgets text value.
+      updateDisplayText() {
+          const input = this.inputEl.nativeElement;
+          const position = input.selectionStart;
+          const preValue = input.value;
+          if (!this.isDefaultQuery) {
+              const parts = preValue.split(this.DECIMAL);
+              this.decimalValue = parts[1] || '';
+          }
+          const stepVal = this.stepLength();
+          if (this.inputmode === i2.INPUTMODE.FINANCIAL && stepVal) {
+              this.displayValue = input.value = this.transformNumber(this.proxyModel, `1.${stepVal}-${stepVal}`);
+              this.decimalValue = this.decimalValue.replace(/\D/g, '');
+          }
+          else {
+              this.displayValue = input.value = this.transformNumber(this.proxyModel);
+          }
+          // in safari browser, setSelectionRange will focus the input by default, which may invoke the focus event on widget.
+          // Hence preventing the setSelectionRange when default value is set i.e. widget is not focused.
+          if (this.updateon === 'default' && !this.isDefaultQuery) {
+              this.resetCursorPosition(preValue.length - position);
+          }
+      }
+      // This function returns the step length set in the studio
+      stepLength() {
+          const stepLen = this.step.toString().split('.');
+          if (stepLen.length === 1) {
+              return;
+          }
+          else {
+              return stepLen[1].length;
+          }
+      }
+      // This function checks if the currency widget has input mode as natural and trailing zero is defined or not
+      isNaturalCurrency() {
+          return this.inputmode === i2.INPUTMODE.NATURAL && this.widgetType === 'wm-currency' && !!this.trailingzero;
+      }
+      /**
+    * @param value contains the value entered in the input box
+    * This function modifies the user input value, into financial mode.
+    * Number starts from highest precesion decimal, on typing number shifts to the left
+    */
+      onInputChange(value) {
+          const stepVal = this.stepLength();
+          // WMS-22355, Trigger change cb if value exists or value is empty but datavalue exists (when value is selected and deleted).
+          if (i1$1.isDefined(value) && (value !== '' || this.datavalue)) {
+              this.handleChange(value);
+          }
+          else {
+              return;
+          }
+          if (!stepVal || this.inputmode !== i2.INPUTMODE.FINANCIAL) {
+              return;
+          }
+          let financialVal;
+          /**
+           * If the value is entered by the user, format the input
+           * If the value is provided as default value, skip formatting
+           */
+          if (this.isDefaultQuery) {
+              financialVal = parseFloat(value);
+          }
+          else {
+              const valInWholeNum = parseInt(value.toString().replace(/\D/g, ''));
+              financialVal = valInWholeNum * this.step;
+          }
+          if (!isNaN(financialVal)) {
+              // When update on key is set keypress, update the datavalue else update only the display value
+              if (this.ngModelOptions.updateOn === 'change') {
+                  this.datavalue = parseFloat(financialVal.toFixed(stepVal));
+                  this.handleChange(this.datavalue);
+              }
+              else {
+                  this.displayValue = financialVal.toFixed(stepVal);
+              }
+          }
+          else if (this.ngModelOptions.updateOn !== 'blur') {
+              this.datavalue = undefined;
+              this.handleChange(null);
+          }
+      }
+      // Input mode is financial and trailing zero is set to false, On focus set display val to fixed point notation and On blur strip trailing zeros
+      // In currency, inputmode is natural and trailing zero and step are defined, on blur display val to fixed point notation and on focus strip the zeros
+      checkForTrailingZeros($event) {
+          const stepVal = this.stepLength();
+          const financialMode = !this.trailingzero && this.inputmode === i2.INPUTMODE.FINANCIAL;
+          // If the user's last input is a decimal and not active on input field, throw error
+          if (this.lastValIsDecimal) {
+              this.onModelChange(this.displayValue);
+          }
+          if (!financialMode && !this.isNaturalCurrency()) {
+              return;
+          }
+          if (stepVal && this.datavalue) {
+              let numberfilter;
+              if ((financialMode && $event.type === 'focus') || (this.isNaturalCurrency() && $event.type === 'blur')) {
+                  numberfilter = `1.${stepVal}-${stepVal}`;
+              }
+              this.displayValue = this.transformNumber(this.datavalue, numberfilter);
+          }
+      }
+      /**
+       * returns the number of decimal places a number have.
+       * @param value: number
+       * @returns {number}
+       */
+      countDecimals(value) {
+          if ((value % 1) !== 0) {
+              const decimalValue = value.toString().split('.')[1];
+              return decimalValue && decimalValue.length;
+          }
+          return 0;
+      }
+      /**
+       * handles the arrow press event. Increases or decreases the number. triggered fom the template
+       * @param $event keyboard event.
+       * @param key identifier to increase or decrease the number.
+       */
+      onArrowPress($event, key) {
+          $event.preventDefault();
+          if (this.readonly || this.step === 0) {
+              return;
+          }
+          const targetVal = $event.target.value.replace(/,/g, '');
+          // proxyModel to be updated from $event.target.value if present to support arrow keys when input changes else pick up from this.proxymodel
+          let proxyModel;
+          if (targetVal && !isNaN(parseFloat(targetVal))) {
+              proxyModel = parseFloat(targetVal);
+          }
+          else {
+              proxyModel = this.proxyModel;
+          }
+          let value;
+          // if the number is not in range and when arrow buttons are pressed need to get appropriate number value.
+          if (this.numberNotInRange) {
+              const inputValue = this.parseNumber(this.inputEl.nativeElement.value);
+              // take the textbox value as current model if the value is valid.
+              if (!isNaN(inputValue)) {
+                  value = this.getValueInRange(inputValue);
+                  proxyModel = inputValue;
+                  this.resetValidations();
+              }
+          }
+          else {
+              if (lodashEs.isUndefined(proxyModel) || lodashEs.isNull(proxyModel)) {
+                  proxyModel = value = this.getValueInRange((this.minvalue || 0));
+                  this.resetValidations();
+              }
+              else {
+                  value = this.getValueInRange(proxyModel + (key === 'UP' ? this.step : -this.step));
+              }
+          }
+          if ((key === 'UP' && proxyModel <= value) || (key === 'DOWN' && proxyModel >= value)) {
+              const decimalRoundValue = Math.max(this.countDecimals(proxyModel), this.countDecimals(this.step));
+              // update the modelProxy.
+              this.proxyModel = lodashEs.round(value, decimalRoundValue);
+              this.updateDisplayText();
+              this.handleChange(this.proxyModel);
+          }
+      }
+      /**
+       * method is called from the from widget. to check whether the value entered is valid or not.
+       * @returns {object}
+       */
+      validate(c) {
+          if (this.isInvalidNumber) {
+              this.validateType = '';
+              return {
+                  invalidNumber: {
+                      valid: false
+                  },
+              };
+          }
+          if (this.numberNotInRange) {
+              return {
+                  numberNotInRange: {
+                      valid: false
+                  },
+              };
+          }
+          this.validateType = '';
+          /* WMS-18269 | Extending the existing validation for 'required' */
+          if (this['show'] && this['required']) {
+              return (!!c.value || c.value === 0) ? null : { required: true };
+          }
+          return null;
+      }
+      validateInputEntry($event) {
+          this.isDefaultQuery = false;
+          // allow actions if control key is pressed or if backspace is pressed. (for Mozilla).
+          if ($event.ctrlKey || lodashEs.includes(['Backspace', 'ArrowRight', 'ArrowLeft', 'Tab', 'Enter', 'Delete'], $event.key)) {
+              return;
+          }
+          const validity = new RegExp(`^[\\d\\s-,.e+${this.GROUP}${this.DECIMAL}]$`, 'i');
+          const inputValue = $event.target.value;
+          // when input mode is financial, do not restrict user on entering the value when step value limit is reached.
+          const skipStepValidation = this.inputmode === i2.INPUTMODE.FINANCIAL;
+          // Validates if user eneters more than 16 digits
+          if (inputValue) {
+              const parsedVal = parseInt(inputValue.toString().replace(/\D/g, ''));
+              if (parsedVal.toString().length > 15) {
+                  // WMS-22321: If the number is greater than MAX_SAFE_INTEGER (more than 15 numbers).
+                  // user selects a range of digits and presses a key.
+                  // Do not throw validation of exceeded number as selected range value will be deleted.
+                  const selectedVal = window.getSelection();
+                  if (selectedVal && selectedVal.toString() && selectedVal.focusNode === this.nativeElement) {
+                      return true;
+                  }
+                  return false;
+              }
+          }
+          // validates entering of decimal values only when user provides decimal limit(i.e step contains decimal values).
+          // Restrict user from entering only if the decimal limit is reached and the new digit is entered in decimal place
+          if (!skipStepValidation && inputValue && this.countDecimals(this.step) && (this.countDecimals(inputValue) >= this.countDecimals(this.step)) && $event.target.selectionStart >= inputValue.length - 1) {
+              return false;
+          }
+          // validates if user entered an invalid character.
+          if (!validity.test($event.key)) {
+              return false;
+          }
+          // comma cannot be entered consecutively
+          if (lodashEs.includes(inputValue, ',') && inputValue[inputValue.length - 1] === ',' && $event.key === ',') {
+              return false;
+          }
+          // a decimal value can be entered only once in the input.
+          if (lodashEs.includes(inputValue, this.DECIMAL) && $event.key === this.DECIMAL) {
+              return false;
+          }
+          // 'e' can be entered only once in the input.
+          if (lodashEs.intersection(lodashEs.toArray(inputValue), ['e', 'E']).length && lodashEs.includes('eE', $event.key)) {
+              return false;
+          }
+          if ((lodashEs.includes(inputValue, '+') || lodashEs.includes(inputValue, '-')) && ($event.key === '+' || $event.key === '-')) {
+              return false;
+          }
+          // Do not allow user to enter only space without any input value
+          if (!inputValue && $event.code === 'Space') {
+              return false;
+          }
+      }
+      onBackspace($event) {
+          this.isDefaultQuery = false;
+      }
+      onEnter($event) {
+          this.datavalue = $event.target.value;
+      }
+      onModelChange($event) {
+          if (this.inputmode === i2.INPUTMODE.NATURAL || (this.inputmode === i2.INPUTMODE.FINANCIAL && this.ngModelOptions.updateOn === 'blur')) {
+              this.datavalue = $event;
+          }
+      }
+      onPropertyChange(key, nv, ov) {
+          if (key === 'minvalue' || key === 'maxvalue') {
+              this.isValid(nv);
+          }
+          else if (key === 'datavalue' && !ov) {
+              if (this.isNaturalCurrency()) {
+                  this.checkForTrailingZeros({ type: 'blur' });
+              }
+              else {
+                  this.onInputChange(nv);
+              }
+          }
+          else {
+              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", ""];
+  const WIDGET_CONFIG$9 = {
+      widgetType: 'wm-number',
+      hostClass: 'app-input-wrapper'
+  };
+  class NumberComponent extends exports.NumberLocale {
+      static { this.initializeProps = registerProps$9(); }
+      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), 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);
+          } if (rf & 2) {
+              let _t;
+              i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
+              i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.ngModel = _t.first);
+          } }, features: [i0__namespace.ɵɵProvidersFeature([
+                  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: [["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 }); }
+  }
+  (() => { (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" }]
+      }], () => [{ 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],
+      ['collapsible', i2.PROP_BOOLEAN],
+      ['compareby', i2.PROP_STRING],
+      ['datafield', i2.PROP_STRING],
+      ['dataset', { value: 'Option 1, Option 2, Option 3', ...i2.PROP_ANY }],
+      ['datavaluesource', i2.PROP_ANY],
+      ['datavalue', i2.PROP_ANY],
+      ['dateformat', i2.PROP_STRING],
+      ['disabled', i2.PROP_BOOLEAN],
+      ['displayexpression', i2.PROP_STRING],
+      ['displayfield', i2.PROP_STRING],
+      ['displayValue', i2.PROP_STRING],
+      ['groupby', i2.PROP_STRING],
+      ['itemclass', { value: '', ...i2.PROP_STRING }],
+      ['itemsperrow', { value: 'xs-1 sm-1 md-1 lg-1', ...i2.PROP_STRING }],
+      ['listclass', { value: '', ...i2.PROP_STRING }],
+      ['match', i2.PROP_STRING],
+      ['name', i2.PROP_STRING],
+      ['orderby', i2.PROP_STRING],
+      ['readonly', i2.PROP_BOOLEAN],
+      ['required', i2.PROP_BOOLEAN],
+      ['show', { value: true, ...i2.PROP_BOOLEAN }],
+      ['showcount', i2.PROP_BOOLEAN],
+      ['showindevice', { displayType: 'inline-block', value: 'all', ...i2.PROP_STRING }],
+      ['tabindex', { value: 0, ...i2.PROP_NUMBER }],
+      ['usekeys', i2.PROP_BOOLEAN]
+  ]);
+  const registerProps$8 = () => {
+      i2.register('wm-radioset', radiosetProps);
+      i2.registerFormWidget(i1$1.FormWidgetType.RADIOSET, new Map(radiosetProps));
+  };
+
+  const _c0$8 = ["wmRadioset", ""];
+  const _c1$7 = (a0, a1) => ["radio", "app-radio", a0, a1];
+  const _c2$5 = a0 => ({ "disabled": a0 });
+  const _c3 = a0 => ({ "collapsible-content": a0 });
+  const _c4 = (a0, a1) => ["radio", "app-radio", "group-list-item", a0, a1];
+  function RadiosetComponent_ng_template_0_li_0_label_1_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelementStart(0, "label", 7);
+      i0__namespace.ɵɵelement(1, "input", 8)(2, "span", 9);
+      i0__namespace.ɵɵelementEnd();
+  } if (rf & 2) {
+      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$5, 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_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$5, 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);
+  } }
+  function RadiosetComponent_ng_template_0_li_0_Template(rf, ctx) { if (rf & 1) {
+      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 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_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_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);
+  } }
+  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_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_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_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$5, 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_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$5, 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);
+  } }
+  function RadiosetComponent_ng_template_3_li_0_li_8_Template(rf, ctx) { if (rf & 1) {
+      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 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_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);
+  } }
+  function RadiosetComponent_ng_template_3_li_0_Template(rf, ctx) { if (rf & 1) {
+      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(_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, 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_r7 = ctx.$implicit;
+      const ctx_r2 = i0__namespace.ɵɵnextContext(2);
+      i0__namespace.ɵɵadvance(2);
+      i0__namespace.ɵɵproperty("title", groupObj_r7.key)("ngClass", i0__namespace.ɵɵpureFunction1(6, _c3, ctx_r2.collapsible));
+      i0__namespace.ɵɵadvance(2);
+      i0__namespace.ɵɵtextInterpolate1("", groupObj_r7.key, " ");
+      i0__namespace.ɵɵadvance(2);
+      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_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, explicitContext) {
+          super(inj, WIDGET_CONFIG$8, explicitContext);
+          this.layout = '';
+          i2.styler(this.nativeElement, this);
+          this.multiple = false;
+      }
+      /**
+       * On click of the option, update the datavalue
+       */
+      onRadioLabelClick($event, key) {
+          if (!$($event.target).is('input')) {
+              return;
+          }
+          this.modelByKey = key;
+          this.invokeOnTouched();
+          // invoke on datavalue change.
+          this.invokeOnChange(this.datavalue, $event || {}, true);
+      }
+      // change and blur events are added from the template
+      handleEvent(node, eventName, callback, locals) {
+          if (eventName === 'click') {
+              this.eventManager.addEventListener(node, eventName, e => {
+                  if (!$(e.target).is('input')) {
+                      return;
+                  }
+                  locals.$event = e;
+                  return callback();
+              });
+          }
+          else if (!lodashEs.includes(['change'], eventName)) {
+              super.handleEvent(node, eventName, callback, locals);
+          }
+      }
+      onPropertyChange(key, nv, ov) {
+          if (key === 'tabindex') {
+              return;
+          }
+          if (key === 'itemsperrow') {
+              i1$1.setListClass(this);
+          }
+          else {
+              super.onPropertyChange(key, nv, ov);
+          }
+      }
+      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: [["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 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();
+              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 }); }
+  }
+  (() => { (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" }]
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], null); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(RadiosetComponent, { className: "RadiosetComponent", filePath: "radioset/radioset.component.ts", lineNumber: 26 }); })();
+
+  const selectProps = new Map([
+      ['autofocus', i2.PROP_BOOLEAN],
+      ['class', { value: '', ...i2.PROP_STRING }],
+      ['compareby', i2.PROP_STRING],
+      ['datafield', i2.PROP_STRING],
+      ['dataset', i2.PROP_ANY],
+      ['datavaluesource', i2.PROP_ANY],
+      ['datavalue', i2.PROP_STRING],
+      ['dateformat', i2.PROP_STRING],
+      ['disabled', i2.PROP_BOOLEAN],
+      ['displayexpression', i2.PROP_STRING],
+      ['displayfield', i2.PROP_STRING],
+      ['displayValue', i2.PROP_STRING],
+      ['groupby', i2.PROP_STRING],
+      ['hint', i2.PROP_STRING],
+      ['match', i2.PROP_STRING],
+      ['multiple', { value: false, ...i2.PROP_BOOLEAN }],
+      ['name', i2.PROP_STRING],
+      ['orderby', i2.PROP_STRING],
+      ['placeholder', i2.PROP_STRING],
+      ['readonly', i2.PROP_BOOLEAN],
+      ['required', i2.PROP_BOOLEAN],
+      ['shortcutkey', i2.PROP_STRING],
+      ['show', { value: true, ...i2.PROP_BOOLEAN }],
+      ['tabindex', { value: 0, ...i2.PROP_NUMBER }],
+      ['usekeys', i2.PROP_BOOLEAN]
+  ]);
+  const registerProps$7 = () => {
+      i2.register('wm-select', selectProps);
+      i2.registerFormWidget(i1$1.FormWidgetType.SELECT, new Map(selectProps));
+      i2.registerFormWidget(i1$1.FormWidgetType.TYPEAHEAD, new Map(selectProps));
+  };
+
+  const _c0$7 = ["select"];
+  const _c1$6 = a0 => ["app-select form-control", a0];
+  const _c2$4 = () => ({ standalone: true });
+  function SelectComponent_ng_container_3_optgroup_1_option_1_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelement(0, "option", 7);
+  } if (rf & 2) {
+      const item_r2 = ctx.$implicit;
+      i0__namespace.ɵɵproperty("value", item_r2.key)("selected", item_r2.selected)("textContent", item_r2.label);
+  } }
+  function SelectComponent_ng_container_3_optgroup_1_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelementStart(0, "optgroup", 5);
+      i0__namespace.ɵɵtemplate(1, SelectComponent_ng_container_3_optgroup_1_option_1_Template, 1, 3, "option", 6);
+      i0__namespace.ɵɵelementEnd();
+  } if (rf & 2) {
+      const groupObj_r3 = ctx.$implicit;
+      i0__namespace.ɵɵproperty("label", groupObj_r3.key);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngForOf", groupObj_r3.data);
+  } }
+  function SelectComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelementContainerStart(0);
+      i0__namespace.ɵɵtemplate(1, SelectComponent_ng_container_3_optgroup_1_Template, 2, 2, "optgroup", 4);
+      i0__namespace.ɵɵelementContainerEnd();
+  } if (rf & 2) {
+      const ctx_r3 = i0__namespace.ɵɵnextContext();
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngForOf", ctx_r3.groupedData);
+  } }
+  function SelectComponent_ng_container_4_option_1_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelement(0, "option", 7);
+  } if (rf & 2) {
+      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.ɵɵelementContainerEnd();
+  } if (rf & 2) {
+      const ctx_r3 = i0__namespace.ɵɵnextContext();
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngForOf", ctx_r3.datasetItems);
+  } }
+  const WIDGET_CONFIG$7 = { widgetType: 'wm-select', hostClass: 'app-select-wrapper' };
+  class SelectComponent extends DatasetAwareFormComponent {
+      static { this.initializeProps = registerProps$7(); }
+      set datasource(ds) {
+          if (ds && ds.execute && ds.execute(i1$1.DataSource.Operation.IS_BOUND_TO_LOCALE)) {
+              this.datavalue = ds.execute(i1$1.DataSource.Operation.GET_DEFAULT_LOCALE);
+          }
+      }
+      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);
+      }
+      // Change event is registered from the template, Prevent the framework from registering one more event
+      handleEvent(node, eventName, eventCallback, locals) {
+          if (!lodashEs.includes(['blur', 'change'], eventName)) {
+              super.handleEvent(this.selectEl.nativeElement, eventName, eventCallback, locals);
+          }
+      }
+      onSelectValueChange($event) {
+          if (this.readonly) {
+              if (this.placeholder) {
+                  this.selectEl.nativeElement.value = this.placeholder;
+              }
+              else {
+                  this.selectEl.nativeElement.value = '';
+              }
+              this.datavalue = this.prevDatavalue;
+              return;
+          }
+          this.invokeOnTouched();
+          // invoke on datavalue change.
+          this.invokeOnChange(this.datavalue, $event || {}, true);
+      }
+      onPropertyChange(key, nv, ov) {
+          if (key === 'required') {
+              this._onChange(this.datavalue);
+              return;
+          }
+          if (key === 'class' || key === 'tabindex') {
+              if (key === 'class') {
+                  // After NG15 upgrade ng-invalid class is added even the field is valid, so we are removing the ng-invalid manually
+                  const isNgUntouchedValid = this.selectEl.nativeElement.classList.contains('ng-untouched') && this.selectEl.nativeElement.classList.contains('ng-valid');
+                  if (isNgUntouchedValid && nv.includes('ng-untouched') && nv.includes('ng-invalid')) {
+                      setTimeout(() => {
+                          if (this.selectEl.nativeElement.classList.contains('ng-untouched') && this.selectEl.nativeElement.classList.contains('ng-valid') && this.selectEl.nativeElement.classList.contains('ng-invalid')) {
+                              this.selectEl.nativeElement.classList.remove('ng-invalid');
+                          }
+                      });
+                  }
+              }
+              return;
+          }
+          else if (key === 'readonly') {
+              (nv === true) ? i1$1.setAttr(this.selectEl.nativeElement, 'readonly', 'readonly') : i1$1.removeAttr(this.selectEl.nativeElement, 'readonly');
+          }
+          super.onPropertyChange(key, nv, ov);
+      }
+      /**
+       * 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
+       * On blur, remove the placeholder and do not animate the label
+       * @param $event event received will be either a blur or focus event
+       */
+      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();
+                  }
+                  else {
+                      $(this.selectEl.nativeElement).find('option:first').text(this.placeholder);
+                  }
+              }
+              else if (!this.datavalue) {
+                  $(this.selectEl.nativeElement).find('option:selected').text('');
+                  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), 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) {
+              let _t;
+              i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.selectEl = _t.first);
+          } }, features: [i0__namespace.ɵɵProvidersFeature([
+                  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: 18, consts: [["select", ""], ["role", "listbox", "aria-haspopup", "true", "aria-expanded", "false", "focus-target", "", 3, "ngModelChange", "change", "focus", "blur", "ngClass", "disabled", "required", "tabindex", "ngModel", "ngModelOptions", "multiple", "autofocus"], ["selected", "", "value", "undefined", "id", "placeholderOption", 3, "textContent", "hidden"], [4, "ngIf"], [3, "label", 4, "ngFor", "ngForOf"], [3, "label"], ["role", "option", 3, "value", "selected", "textContent", 4, "ngFor", "ngForOf"], ["role", "option", 3, "value", "selected", "textContent"]], template: function SelectComponent_Template(rf, ctx) { if (rf & 1) {
+              const _r1 = i0__namespace.ɵɵgetCurrentView();
+              i0__namespace.ɵɵelementStart(0, "select", 1, 0);
+              i0__namespace.ɵɵtwoWayListener("ngModelChange", function SelectComponent_Template_select_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.modelByKey, $event) || (ctx.modelByKey = $event); return i0__namespace.ɵɵresetView($event); });
+              i0__namespace.ɵɵlistener("change", function SelectComponent_Template_select_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onSelectValueChange($event)); })("focus", function SelectComponent_Template_select_focus_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.checkForFloatingLabel($event)); })("blur", function SelectComponent_Template_select_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); ctx.invokeOnTouched($event); return i0__namespace.ɵɵresetView(ctx.checkForFloatingLabel($event)); });
+              i0__namespace.ɵɵelement(2, "option", 2);
+              i0__namespace.ɵɵtemplate(3, SelectComponent_ng_container_3_Template, 2, 1, "ng-container", 3)(4, SelectComponent_ng_container_4_Template, 2, 1, "ng-container", 3);
+              i0__namespace.ɵɵelementEnd();
+          } if (rf & 2) {
+              i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(15, _c1$6, ctx.class))("disabled", ctx.disabled)("required", ctx.required)("tabindex", ctx.tabindex);
+              i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.modelByKey);
+              i0__namespace.ɵɵproperty("ngModelOptions", i0__namespace.ɵɵpureFunction0(17, _c2$4))("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();
+              i0__namespace.ɵɵproperty("ngIf", ctx.groupby);
+              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 }); }
+  }
+  (() => { (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        [ngModelOptions]=\"{standalone: true}\"\n        [multiple]=\"multiple\"\n        (change)=\"onSelectValueChange($event)\"\n        (focus)=\"checkForFloatingLabel($event)\"\n        (blur)=\"invokeOnTouched($event); checkForFloatingLabel($event)\"\n        [attr.name]=\"name\"\n        [attr.aria-label]=\"hint\"\n        [attr.aria-multiselectable]=\"multiple\"\n        [autofocus]=\"autofocus\">\n\n        <option selected\n                value=\"undefined\"\n                [textContent]=\"placeholder\"\n                id=\"placeholderOption\"\n                [hidden]=\"!placeholder\"></option>\n\n    <ng-container *ngIf=\"groupby\">\n        <optgroup *ngFor=\"let groupObj of groupedData\"\n            [label]=\"groupObj.key\">\n            <option *ngFor=\"let item of groupObj.data;\"\n                [value]=\"item.key\"\n                [selected]=\"item.selected\"\n                [textContent]=\"item.label\"\n                role=\"option\"></option>\n        </optgroup>\n    </ng-container>\n\n    <ng-container *ngIf=\"!groupby\">\n        <option *ngFor=\"let item of datasetItems\"\n            [value]=\"item.key\"\n            [selected]=\"item.selected\"\n            [textContent]=\"item.label\"\n            role=\"option\"></option>\n    </ng-container>\n</select>\n" }]
+      }], () => [{ type: i0__namespace.Injector }, { type: i1$1__namespace.App }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], { selectEl: [{
+              type: i0.ViewChild,
+              args: ['select', { static: true, read: i0.ElementRef }]
+          }] }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(SelectComponent, { className: "SelectComponent", filePath: "select/select.component.ts", lineNumber: 22 }); })();
+
+  const switchProps = new Map([
+      ['class', i2.PROP_STRING],
+      ['compareby', i2.PROP_STRING],
+      ['datafield', i2.PROP_STRING],
+      ['dataset', { value: 'yes, no, maybe', ...i2.PROP_ANY }],
+      ['datavaluesource', i2.PROP_ANY],
+      ['datavalue', i2.PROP_STRING],
+      ['disabled', i2.PROP_BOOLEAN],
+      ['displayexpression', i2.PROP_STRING],
+      ['displayfield', i2.PROP_STRING],
+      ['hint', i2.PROP_STRING],
+      ['iconclass', i2.PROP_STRING],
+      ['name', i2.PROP_STRING],
+      ['orderby', i2.PROP_STRING],
+      ['required', i2.PROP_BOOLEAN],
+      ['show', { value: true, ...i2.PROP_BOOLEAN }],
+      ['tabindex', { value: 0, ...i2.PROP_NUMBER }]
+  ]);
+  const registerProps$6 = () => {
+      i2.register('wm-switch', switchProps);
+      i2.registerFormWidget(i1$1.FormWidgetType.SWITCH, new Map(switchProps));
+      i2.registerFormWidget(i1$1.FormWidgetType.TOGGLE, new Map(switchProps));
+  };
+
+  const _c0$6 = ["wmSwitch", ""];
+  const _c1$5 = (a0, a1) => ({ "selected": a0, "disabled": a1 });
+  const _c2$3 = a0 => ["app-icon", a0];
+  function SwitchComponent_a_1_i_1_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelement(0, "i", 8);
+  } if (rf & 2) {
+      const opt_r3 = i0__namespace.ɵɵnextContext().$implicit;
+      const ctx_r4 = i0__namespace.ɵɵnextContext();
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(1, _c2$3, opt_r3.dataObject[ctx_r4.iconclass] || opt_r3["icon"]));
+  } }
+  function SwitchComponent_a_1_Template(rf, ctx) { if (rf & 1) {
+      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 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_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_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, explicitContext) {
+          super(inj, WIDGET_CONFIG$6, explicitContext);
+          this.options = [];
+          this._debounceSetSelectedValue = i1$1.debounce((val) => {
+              this.setSelectedValue();
+              this.updateHighlighter(val);
+              // only for default value trigger app digest to apply the selectedItem
+              if (val) {
+                  i1$1.$appDigest();
+              }
+          }, 200);
+          const datasetSubscription = this.dataset$.subscribe(() => this.updateSwitchOptions());
+          this.registerDestroyListener(() => datasetSubscription.unsubscribe());
+          const datavalueSubscription = this.datavalue$.subscribe(() => {
+              this._debounceSetSelectedValue(true);
+          });
+          this.registerDestroyListener(() => datavalueSubscription.unsubscribe());
+      }
+      ngAfterViewInit() {
+          super.ngAfterViewInit();
+          i2.styler(this.nativeElement, this);
+      }
+      onStyleChange(key, nv, ov) {
+          if (key === 'height') {
+              i1$1.setCSS(this.nativeElement, 'overflow', nv ? 'auto' : '');
+          }
+          else {
+              super.onStyleChange(key, nv, ov);
+          }
+      }
+      // This function sets the selectedItem by either using compareby fields or selected flag on datasetItems.
+      setSelectedValue() {
+          if (i1$1.isDefined(this.datavalue) || i1$1.isDefined(this.toBeProcessedDatavalue)) {
+              this.selectedItem = lodashEs.find(this.datasetItems, { selected: true });
+              return;
+          }
+          // If no value is provided, set first value as default if options are available else set -1 ie no selection
+          this.selectOptAtIndex(0);
+      }
+      // set the css for switch overlay element.
+      // set the selected index from the datasetItems and highlight the datavalue on switch.
+      updateSwitchOptions() {
+          if (this.datasetItems.length) {
+              this.btnwidth = (100 / this.datasetItems.length);
+              i1$1.setCSS(this.nativeElement.querySelector('.app-switch-overlay'), 'width', this.btnwidth + '%');
+          }
+          this._debounceSetSelectedValue(true);
+      }
+      // This function animates the highlighted span on to the selected value.
+      updateHighlighter(skipAnimation) {
+          const handler = $(this.nativeElement).find('span.app-switch-overlay');
+          this.setSelectedValue();
+          let left, index = this.selectedItem ? lodashEs.findIndex(this.datasetItems, { key: this.selectedItem.key }) : -1;
+          if (index === undefined || index === null) {
+              index = -1;
+          }
+          left = index * this.btnwidth;
+          if (skipAnimation) {
+              handler.css('left', left + '%');
+          }
+          else {
+              handler.animate({
+                  left: left + '%'
+              }, 300);
+          }
+      }
+      selectOptAtIndex($index) {
+          if (!this.datasetItems.length) {
+              return;
+          }
+          const opt = this.datasetItems[$index];
+          this._modelByValue = opt.value;
+      }
+      // Triggered on selected the option from the switch.
+      // set the index and highlight the default value. Invoke onchange event handler.
+      selectOpt($event, $index, option) {
+          $event.preventDefault();
+          if (this.disabled) {
+              return;
+          }
+          this.modelByKey = option.key;
+          this.invokeOnTouched();
+          if (this.selectedItem && $index === lodashEs.findIndex(this.datasetItems, { key: this.selectedItem.key })) {
+              if (this.datasetItems.length === 2) {
+                  $index = $index === 1 ? 0 : 1;
+              }
+              else {
+                  return;
+              }
+          }
+          this.selectedItem = this.datasetItems[$index];
+          this.updateHighlighter();
+          // invoke on datavalue change.
+          this.invokeOnChange(this.datavalue, $event || {}, true);
+          i1$1.$appDigest();
+      }
+      onPropertyChange(key, nv, ov) {
+          if (key === 'disabled' && !i1$1.toBoolean(nv)) {
+              this.nativeElement.removeAttribute(key);
+          }
+          else {
+              super.onPropertyChange(key, nv, ov);
+          }
+      }
+      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, "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();
+              i0__namespace.ɵɵelementStart(2, "span", 2);
+              i0__namespace.ɵɵtemplate(3, SwitchComponent_i_3_Template, 1, 3, "i", 3);
+              i0__namespace.ɵɵtext(4);
+              i0__namespace.ɵɵelementEnd();
+              i0__namespace.ɵɵelement(5, "input", 4);
+          } if (rf & 2) {
+              i0__namespace.ɵɵadvance();
+              i0__namespace.ɵɵproperty("ngForOf", ctx.datasetItems);
+              i0__namespace.ɵɵadvance();
+              i0__namespace.ɵɵproperty("title", ctx.selectedItem ? ctx.selectedItem.label : ctx.modelByKey);
+              i0__namespace.ɵɵadvance();
+              i0__namespace.ɵɵproperty("ngIf", ctx.iconclass);
+              i0__namespace.ɵɵadvance();
+              i0__namespace.ɵɵtextInterpolate1(" ", ctx.selectedItem ? ctx.selectedItem.label : ctx.modelByKey, "\n");
+              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 }); }
+  }
+  (() => { (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" }]
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                  type: i0.Inject,
+                  args: ['EXPLICIT_CONTEXT']
+              }, {
+                  type: i0.Optional
+              }] }], null); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(SwitchComponent, { className: "SwitchComponent", filePath: "switch/switch.component.ts", lineNumber: 25 }); })();
+
+  const inputCalendarTypeProps = new Map([
+      ['autocomplete', { value: true, ...i2.PROP_BOOLEAN }],
+      ['autotrim', { value: true, ...i2.PROP_BOOLEAN }],
+      ['autofocus', i2.PROP_BOOLEAN],
+      ['class', i2.PROP_STRING],
+      ['datasource', i2.PROP_ANY],
+      ['datavalue', i2.PROP_STRING],
+      ['disabled', i2.PROP_BOOLEAN],
+      ['hint', i2.PROP_STRING],
+      ['maxvalue', i2.PROP_NUMBER],
+      ['minvalue', i2.PROP_NUMBER],
+      ['name', i2.PROP_STRING],
+      ['placeholder', { value: 'Enter text', ...i2.PROP_STRING }],
+      ['readonly', i2.PROP_BOOLEAN],
+      ['required', i2.PROP_BOOLEAN],
+      ['shortcutkey', i2.PROP_STRING],
+      ['show', { value: true, ...i2.PROP_BOOLEAN }],
+      ['step', i2.PROP_NUMBER],
+      ['tabindex', { value: 0, ...i2.PROP_NUMBER }],
+      ['type', i2.PROP_STRING],
+      ['updateon', i2.PROP_STRING],
+      ['conditionalclass', i2.PROP_ANY],
+      ['conditionalstyle', i2.PROP_ANY]
+  ]);
+  const registerProps$5 = () => {
+      i2.register('wm-input-calendar', inputCalendarTypeProps);
+  };
+
+  const _c0$5 = ["input"];
+  const _c1$4 = ["type", "date"];
+  const _c2$2 = () => ({ standalone: true });
+  const WIDGET_CONFIG$5 = {
+      widgetType: 'wm-input-calendar',
+      hostClass: 'app-input-wrapper'
+  };
+  class InputCalendarComponent extends BaseInput {
+      static { this.initializeProps = registerProps$5(); }
+      constructor(inj, explicitContext) {
+          super(inj, WIDGET_CONFIG$5, explicitContext);
+      }
+      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);
+          } if (rf & 2) {
+              let _t;
+              i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
+              i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.ngModel = _t.first);
+          } }, features: [i0__namespace.ɵɵProvidersFeature([
+                  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: 19, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "min", "max", "step", "autofocus", "autocomplete", "ngClass", "ngStyle"]], template: function InputCalendarComponent_Template(rf, ctx) { if (rf & 1) {
+              const _r1 = i0__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);
+              i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
+              i0__namespace.ɵɵproperty("ngModelOptions", i0__namespace.ɵɵpureFunction0(18, _c2$2))("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("min", ctx.minvalue)("max", ctx.maxvalue)("step", ctx.step)("autofocus", ctx.autofocus)("autocomplete", ctx.autocomplete ? "on" : "off")("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
+              i0__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 }); }
+  }
+  (() => { (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       [ngModelOptions]=\"{standalone: true}\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [min]=\"minvalue\"\n       [max]=\"maxvalue\"\n       [step]=\"step\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint || type + ' field'\"\n       [autofocus]=\"autofocus\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       #input>\n" }]
+      }], () => [{ type: i0__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 }],
+      ['autofocus', i2.PROP_BOOLEAN],
+      ['autotrim', { value: true, ...i2.PROP_BOOLEAN }],
+      ['class', i2.PROP_STRING],
+      ['datavaluesource', i2.PROP_ANY],
+      ['datavalue', i2.PROP_STRING],
+      ['disabled', i2.PROP_BOOLEAN],
+      ['hint', i2.PROP_STRING],
+      ['name', i2.PROP_STRING],
+      ['placeholder', { value: 'Enter text', ...i2.PROP_STRING }],
+      ['readonly', i2.PROP_BOOLEAN],
+      ['required', i2.PROP_BOOLEAN],
+      ['shortcutkey', i2.PROP_STRING],
+      ['show', { value: true, ...i2.PROP_BOOLEAN }],
+      ['tabindex', { value: 0, ...i2.PROP_NUMBER }],
+      ['type', { value: 'color', ...i2.PROP_STRING }],
+      ['updateon', i2.PROP_STRING],
+      ['conditionalclass', i2.PROP_ANY],
+      ['conditionalstyle', i2.PROP_ANY]
+  ]);
+  const registerProps$4 = () => {
+      i2.register('wm-input-color', inputColorTypeProps);
+  };
+
+  const _c0$4 = ["input"];
+  const _c1$3 = ["type", "color"];
+  const _c2$1 = () => ({ standalone: true });
+  const WIDGET_CONFIG$4 = {
+      widgetType: 'wm-input-color',
+      hostClass: 'app-input-wrapper'
+  };
+  class InputColorComponent extends BaseInput {
+      static { this.initializeProps = registerProps$4(); }
+      constructor(inj, explicitContext) {
+          super(inj, WIDGET_CONFIG$4, explicitContext);
+      }
+      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);
+          } if (rf & 2) {
+              let _t;
+              i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
+              i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.ngModel = _t.first);
+          } }, features: [i0__namespace.ɵɵProvidersFeature([
+                  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: 16, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle"]], template: function InputColorComponent_Template(rf, ctx) { if (rf & 1) {
+              const _r1 = i0__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);
+              i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
+              i0__namespace.ɵɵproperty("ngModelOptions", i0__namespace.ɵɵpureFunction0(15, _c2$1))("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
+              i0__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 }); }
+  }
+  (() => { (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       [ngModelOptions]=\"{standalone: true}\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       #input>\n" }]
+      }], () => [{ type: i0__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 }],
+      ['autofocus', i2.PROP_BOOLEAN],
+      ['autotrim', { value: true, ...i2.PROP_BOOLEAN }],
+      ['class', i2.PROP_STRING],
+      ['datavaluesource', i2.PROP_ANY],
+      ['datavalue', i2.PROP_STRING],
+      ['disabled', i2.PROP_BOOLEAN],
+      ['hint', i2.PROP_STRING],
+      ['maxchars', i2.PROP_NUMBER],
+      ['name', i2.PROP_STRING],
+      ['placeholder', { value: 'Enter text', ...i2.PROP_STRING }],
+      ['readonly', i2.PROP_BOOLEAN],
+      ['regexp', i2.PROP_STRING],
+      ['required', i2.PROP_BOOLEAN],
+      ['shortcutkey', i2.PROP_STRING],
+      ['show', { value: true, ...i2.PROP_BOOLEAN }],
+      ['tabindex', { value: 0, ...i2.PROP_NUMBER }],
+      ['type', { value: 'email', ...i2.PROP_STRING }],
+      ['updateon', i2.PROP_STRING],
+      ['conditionalclass', i2.PROP_ANY],
+      ['conditionalstyle', i2.PROP_ANY]
+  ]);
+  const registerProps$3 = () => {
+      i2.register('wm-input-email', inputEmailTypeProps);
+  };
+
+  const _c0$3 = ["input"];
+  const _c1$2 = ["type", "email"];
+  const WIDGET_CONFIG$3 = {
+      widgetType: 'wm-input-email',
+      hostClass: 'app-input-wrapper'
+  };
+  class InputEmailComponent extends BaseInput {
+      static { this.initializeProps = registerProps$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), 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);
+          } if (rf & 2) {
+              let _t;
+              i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
+              i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.ngModel = _t.first);
+          } }, features: [i0__namespace.ɵɵProvidersFeature([
+                  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: [["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", 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);
+              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 }); }
+  }
+  (() => { (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" }]
+      }], () => [{ 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 }],
+      ['autofocus', i2.PROP_BOOLEAN],
+      ['autotrim', { value: true, ...i2.PROP_BOOLEAN }],
+      ['class', i2.PROP_STRING],
+      ['datavaluesource', i2.PROP_ANY],
+      ['datavalue', i2.PROP_STRING],
+      ['disabled', i2.PROP_BOOLEAN],
+      ['hint', i2.PROP_STRING],
+      ['maxchars', i2.PROP_NUMBER],
+      ['maxvalue', i2.PROP_NUMBER],
+      ['minvalue', i2.PROP_NUMBER],
+      ['name', i2.PROP_STRING],
+      ['placeholder', { value: 'Enter text', ...i2.PROP_STRING }],
+      ['readonly', i2.PROP_BOOLEAN],
+      ['regexp', i2.PROP_STRING],
+      ['required', i2.PROP_BOOLEAN],
+      ['shortcutkey', i2.PROP_STRING],
+      ['show', { value: true, ...i2.PROP_BOOLEAN }],
+      ['step', i2.PROP_NUMBER],
+      ['tabindex', { value: 0, ...i2.PROP_NUMBER }],
+      ['type', { value: 'number', ...i2.PROP_STRING }],
+      ['updateon', i2.PROP_STRING],
+      ['conditionalclass', i2.PROP_ANY],
+      ['conditionalstyle', i2.PROP_ANY]
+  ]);
+  const registerProps$2 = () => {
+      i2.register('wm-input-number', inputNumberTypeProps);
+  };
+
+  const _c0$2 = ["input"];
+  const _c1$1 = ["type", "number"];
+  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, explicitContext) {
+          super(inj, WIDGET_CONFIG$2, explicitContext);
+      }
+      onArrowPress($event) {
+          if (this.step === 0) {
+              $event.preventDefault();
+          }
+      }
+      validateInputEntry($event) {
+          if ($event.key === 'e' && $event.target.value.indexOf($event.key) !== -1) {
+              return false;
+          }
+      }
+      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);
+          } if (rf & 2) {
+              let _t;
+              i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
+              i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.ngModel = _t.first);
+          } }, features: [i0__namespace.ɵɵProvidersFeature([
+                  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: [["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", 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);
+              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 }); }
+  }
+  (() => { (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" }]
+      }], () => [{ 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 }],
+      ['autofocus', i2.PROP_BOOLEAN],
+      ['autotrim', { value: true, ...i2.PROP_BOOLEAN }],
+      ['class', i2.PROP_STRING],
+      ['datavaluesource', i2.PROP_ANY],
+      ['datavalue', i2.PROP_STRING],
+      ['disabled', i2.PROP_BOOLEAN],
+      ['displayformat', i2.PROP_STRING],
+      ['hint', i2.PROP_STRING],
+      ['maxchars', i2.PROP_NUMBER],
+      ['name', i2.PROP_STRING],
+      ['placeholder', { value: 'Enter text', ...i2.PROP_STRING }],
+      ['readonly', i2.PROP_BOOLEAN],
+      ['regexp', i2.PROP_STRING],
+      ['required', i2.PROP_BOOLEAN],
+      ['shortcutkey', i2.PROP_STRING],
+      ['show', { value: true, ...i2.PROP_BOOLEAN }],
+      ['showdisplayformaton', { value: 'always', ...i2.PROP_ANY }],
+      ['tabindex', { value: 0, ...i2.PROP_NUMBER }],
+      ['type', { value: 'text', ...i2.PROP_STRING }],
+      ['updateon', i2.PROP_STRING],
+      ['conditionalclass', i2.PROP_ANY],
+      ['conditionalstyle', i2.PROP_ANY]
+  ]);
+  const registerProps$1 = () => {
+      i2.register('wm-input-text', inputTextTypeProps);
+      i2.registerFormWidget(i1$1.FormWidgetType.PASSWORD, new Map(inputTextTypeProps));
+      const formTextProps = new Map(inputTextTypeProps);
+      const mergeTextProps = (typeProps) => {
+          typeProps.forEach((v, k) => formTextProps.set(k, v));
+      };
+      mergeTextProps(inputCalendarTypeProps);
+      mergeTextProps(inputColorTypeProps);
+      mergeTextProps(inputEmailTypeProps);
+      mergeTextProps(inputNumberTypeProps);
+      i2.registerFormWidget(i1$1.FormWidgetType.TEXT, new Map(formTextProps));
+  };
+
+  const _c0$1 = ["input"];
+  const _c1 = ["type", "text"];
+  const WIDGET_CONFIG$1 = {
+      widgetType: 'wm-input-text',
+      hostClass: 'app-input-wrapper'
+  };
+  class InputTextComponent extends BaseInput {
+      static { this.initializeProps = registerProps$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 */
+      onPropertyChange(key, nv, ov) {
+          /*Monitoring changes for styles or properties and accordingly handling respective changes.*/
+          switch (key) {
+              case 'displayformat':
+                  this.maskVal = this.displayformat;
+                  this.checkForDisplayFormat();
+                  break;
+              case 'showdisplayformaton':
+                  this.lazy = nv === 'keypress' ? true : false;
+                  break;
+              default:
+                  super.onPropertyChange(key, nv, ov);
+          }
+      }
+      get mask() {
+          if (this.displayformat && (!this.placeholder || (this.placeholder && this.isFocused))) {
+              return {
+                  mask: this.maskVal,
+                  lazy: this.lazy,
+                  definitions: {
+                      '9': /\d/,
+                      'A': /[a-zA-Z]/,
+                      'a': /[a-z]/,
+                      '*': /\w/
+                  }
+              };
+          }
+          else {
+              return false;
+          }
+      }
+      // show display format on focus or when it has a data value present. Else show the placeholder
+      checkForDisplayFormat($event) {
+          if (this.displayformat) {
+              this.isFocused = (($event && $event.type === 'focus') || this.datavalue) ? true : false;
+              // Do not show format placeholder when no value is present on blur
+              if (!this.isFocused && this.imask && this.imask.maskRef) {
+                  this.imask.maskRef.updateOptions({ lazy: true });
+                  // on blur, when no value is present assign maskref to null, as in some cases (where format palceholder starts with pranthesis) the format placeholder is still shown. WMS-20124
+                  if (!this.datavalue && this.imask.maskRef.value) {
+                      this.imask.maskRef.value = this.datavalue;
+                  }
+              }
+              else {
+                  // when display format is dynamically populated, cursor position is at the end of the format, readjusting the cursor position based on masked input value
+                  // Adding timeout, as the below code should be on hold until imask model is generated
+                  setTimeout(() => {
+                      if (this.imask && this.imask.maskRef && this.imask.maskRef.value) {
+                          const maskValIndex = this.imask.maskRef.value.indexOf('_');
+                          const enteredMaskVal = maskValIndex >= 0 ? this.imask.maskRef.value.slice(0, maskValIndex).length : this.imask.maskRef.value.length;
+                          if (enteredMaskVal !== this.imask.maskRef.cursorPos) {
+                              this.imask.maskRef.updateCursor(enteredMaskVal);
+                          }
+                      }
+                  }, 50);
+              }
+          }
+          else if (this.imask && this.imask.maskRef) { // When display format is bound via condition, remove the placeholder when the format is not applicable
+              this.imask.maskRef.updateOptions({ lazy: true });
+              // when display format is removed assign input value to the datavalue attr. WMS-20124
+              this.inputEl.nativeElement.value = this.datavalue;
+          }
+      }
+      ngOnInit() {
+          super.ngOnInit();
+          this.isFocused = !!this.datavalue;
+      }
+      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);
+              i0__namespace.ɵɵviewQuery(_c0$1, 5, i3.IMaskDirective);
+          } if (rf & 2) {
+              let _t;
+              i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
+              i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.ngModel = _t.first);
+              i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.imask = _t.first);
+          } }, features: [i0__namespace.ɵɵProvidersFeature([
+                  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: [["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", 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);
+              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 }); }
+  }
+  (() => { (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" }]
+      }], () => [{ 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]
+          }], imask: [{
+              type: i0.ViewChild,
+              args: ['input', { read: i3.IMaskDirective }]
+          }] }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(InputTextComponent, { className: "InputTextComponent", filePath: "text/text/input-text.component.ts", lineNumber: 23 }); })();
+
+  const textareaProps = new Map([
+      ['autofocus', i2.PROP_BOOLEAN],
+      ['autotrim', { value: true, ...i2.PROP_BOOLEAN }],
+      ['class', i2.PROP_STRING],
+      ['datavaluesource', i2.PROP_ANY],
+      ['datavalue', i2.PROP_STRING],
+      ['disabled', i2.PROP_BOOLEAN],
+      ['hint', i2.PROP_STRING],
+      ['maxchars', i2.PROP_NUMBER],
+      ['name', i2.PROP_STRING],
+      ['placeholder', { value: 'Place your text', ...i2.PROP_STRING }],
+      ['readonly', i2.PROP_BOOLEAN],
+      ['required', i2.PROP_BOOLEAN],
+      ['shortcutkey', i2.PROP_STRING],
+      ['show', { value: true, ...i2.PROP_BOOLEAN }],
+      ['tabindex', { value: 0, ...i2.PROP_NUMBER }],
+      ['updateon', i2.PROP_STRING],
+      ['limitdisplaytext', i2.PROP_STRING],
+      ['charlength', i2.PROP_NUMBER],
+      ['conditionalclass', i2.PROP_ANY],
+      ['conditionalstyle', i2.PROP_ANY]
+  ]);
+  const registerProps = () => {
+      i2.register('wm-textarea', textareaProps);
+      i2.registerFormWidget(i1$1.FormWidgetType.TEXTAREA, new Map(textareaProps));
+  };
+
+  const _c0 = ["textarea"];
+  function TextareaComponent_div_2_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelementStart(0, "div", 3);
+      i0__namespace.ɵɵtext(1);
+      i0__namespace.ɵɵelementEnd();
+  } if (rf & 2) {
+      const ctx_r1 = i0__namespace.ɵɵnextContext();
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵtextInterpolate(ctx_r1.limitdisplaytext);
+  } }
+  const WIDGET_CONFIG = {
+      widgetType: 'wm-textarea',
+      hostClass: 'app-input-wrapper'
+  };
+  class TextareaComponent extends BaseInput {
+      static { this.initializeProps = registerProps(); }
+      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), 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);
+          } if (rf & 2) {
+              let _t;
+              i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
+              i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.ngModel = _t.first);
+          } }, features: [i0__namespace.ɵɵProvidersFeature([
+                  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: [["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.ɵɵ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 }); }
+  }
+  (() => { (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" }]
+      }], () => [{ 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) {
+          // skip floating caption for the below form fields
+          this.skipFloatPositionWidgets = ['radioset', 'checkboxset', 'richtext', 'switch', 'chips', 'checkbox', 'slider', 'rating', 'toggle', 'upload'];
+          this.elementRef = inj.get(i0.ElementRef);
+          this.nativeEl = this.elementRef.nativeElement;
+          this.app = app;
+      }
+      onBlurCb() {
+          let mobileInputVal;
+          // In case of mobile date / time picker check for input element's value which has 'mobile-input' class
+          if (this.inputEl.length > 1 && this.inputEl.hasClass('mobile-input')) {
+              lodashEs.forEach(this.inputEl, (el) => {
+                  if ($(el).hasClass('mobile-input') && el.value) {
+                      mobileInputVal = el.value;
+                  }
+              });
+          }
+          if (!this.inputEl.val() && !mobileInputVal) {
+              this.compositeEle.classList.remove('float-active');
+              this.inputEl.removeAttr('placeholder');
+          }
+      }
+      onFocusCb() {
+          this.compositeEle.classList.add('float-active');
+          this.inputEl.attr('placeholder', this.placeholder);
+      }
+      // For select widget, display placeholder only on focus else remove the text of the option selected.
+      checkForSelectPlaceholder() {
+          if ($(this.nativeEl).find('select option:selected').text() && !$(this.nativeEl).find('select').is(':focus') &&
+              !$(this.inputEl.closest('[widget-id]')).attr('datavalue')) {
+              $(this.nativeEl).find('select option:selected').text('');
+          }
+      }
+      setDefaultValueAnimation() {
+          // remove placeholder when the input el has placeholder and the placeholder is not bound to any variable
+          if (!this._isPlaceholderBound && this.inputEl.attr('placeholder')) {
+              this.placeholder = this.inputEl.attr('placeholder');
+              this.inputEl.removeAttr('placeholder');
+          }
+          // Do not show placeholder as selected by default
+          this.checkForSelectPlaceholder();
+          // check for datavalue attribute in composite element and defaultvalue attribute in form field element
+          // check for datavalue.bind attribute to see whether default value is binded via expression or a variable
+          // check for displayformat attribute, as in form fields user can set display format to the field
+          // check for formdata/bindformdata attribute to see if any default value is binded to the form
+          // check for select tag with multiple attribute enabled
+          if ((this.inputEl.val() && !this.inputEl.is('select')) || $(this.inputEl.closest('[widget-id]')).attr('datavalue') || $(this.inputEl.parent('[widget-id]')).attr('datavalue.bind') || this.nativeEl.getAttribute('defaultvalue')
+              || this.nativeEl.getAttribute('displayformat') || $(this.nativeEl).find('select option:selected').text() || $(this.nativeEl).find('select').attr('multiple')) {
+              this.compositeEle.classList.add('float-active');
+          }
+      }
+      /**
+       * Observing placeholder attribute change on DOM instead of having a propChangeHandler fn
+       * For composite widgets propertychangehandler function is invoked at independent widgets where as the directive is at composite level
+       */
+      observeForPlaceholderAttrChange() {
+          this._attrObserver = new MutationObserver(mutations => {
+              mutations.forEach((mutation) => {
+                  if (mutation.attributeName === 'placeholder' && this.inputEl.attr('placeholder') && !this.compositeEle.classList.contains('float-active')) {
+                      this.placeholder = this.inputEl.attr('placeholder');
+                      this.inputEl.removeAttr('placeholder');
+                  }
+              });
+          });
+          const config = { attributes: true, childList: false, characterData: false };
+          this._attrObserver.observe(this.inputEl[0], config);
+      }
+      // when a form is right aligned and have input-group-btn's like date picker, time picker etc. adjust the css to not overlap the label on the icon
+      checkForRightAlignedForm() {
+          const $compositeEle = $(this.compositeEle);
+          if ($compositeEle.closest('.align-right').length && $compositeEle.find('.input-group-btn').length) {
+              const $label = $compositeEle.find('label');
+              if ($compositeEle.find('[wmdatetime]').length) { // for datetime picker, as there will be 2 icons css is different
+                  $label.addClass('input-grp-dt-icon');
+              }
+              else {
+                  $label.addClass('input-grp-icon');
+              }
+          }
+      }
+      ngAfterViewInit() {
+          this.compositeEle = this.nativeEl;
+          const widget = this.nativeEl.widget;
+          let captionPosition = widget.$attrs.get('captionposition');
+          if (widget.form) {
+              captionPosition = widget.form.$attrs.get('captionposition');
+              this.compositeEle = this.nativeEl.querySelector('.app-composite-widget');
+              this._isPlaceholderBound = this.nativeEl.getAttribute('placeholder.bind');
+          }
+          if (captionPosition === 'floating') {
+              if (widget.form) { // for form-fields remove caption-floating and replace it with caption-float or caption-top
+                  const widgetType = this.nativeEl.getAttribute('widgettype'); // fetches the form field type
+                  if (this.skipFloatPositionWidgets.indexOf(widgetType) > -1) {
+                      this.compositeEle.classList.remove('caption-floating');
+                      this.compositeEle.classList.add('caption-top');
+                  }
+                  this.checkForRightAlignedForm();
+              }
+              this.inputEl = $(this.nativeEl).find('input, select, textarea');
+              if (!this._isPlaceholderBound) {
+                  this._isPlaceholderBound = this.inputEl.closest('[widget-id]').attr('placeholder.bind');
+              }
+              // call the below function to apply float-active class when there are default values to the fields
+              setTimeout(this.setDefaultValueAnimation.bind(this), 0);
+              this.inputEl.focus(this.onFocusCb.bind(this));
+              this.inputEl.blur(this.onBlurCb.bind(this));
+              // observe for placeholder attribute change when placeholder is bound via db variable or an expression
+              if (this._isPlaceholderBound) {
+                  this.observeForPlaceholderAttrChange();
+              }
+          }
+      }
+      // captionPositionAnimate is only notified for date-time, time and search widgets as input el is not updated with value on selection of dropdown/popups
+      ngOnInit() {
+          this.labelAnimationSubscription = this.app.subscribe('captionPositionAnimate', (data) => {
+              // displayVal is true when there is a value entered in the input field
+              // In case of form fields, when the field is in focus, isFocused will be set as true
+              // 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) {
+                  data.nativeEl.addClass('float-active');
+                  if (!data.displayVal && isInputElFocused) {
+                      this.inputEl.attr('placeholder', this.placeholder);
+                  }
+              }
+              else {
+                  data.nativeEl.removeClass('float-active');
+                  // Remove placeholder on removing float-active, if not the label and placeholder are collided
+                  // before placeholder is removed assign it to the placeholder variable
+                  // check for placeholder in inputel and selectel
+                  if (this.inputEl) {
+                      const selectEl = this.inputEl.find('option:first');
+                      if (this.inputEl.attr('placeholder') || selectEl.text()) {
+                          if (selectEl.length) {
+                              selectEl.text('');
+                          }
+                          else {
+                              this.placeholder = this.inputEl.attr('placeholder');
+                              this.inputEl.removeAttr('placeholder');
+                          }
+                      }
+                  }
+              }
+          });
+      }
+      ngOnDestroy() {
+          if (this.labelAnimationSubscription) {
+              this.labelAnimationSubscription();
+          }
+          if (this._attrObserver) {
+              this._attrObserver.disconnect();
+          }
+      }
+      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", ""]] }); }
+  }
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CaptionPositionDirective, [{
+          type: i0.Directive,
+          args: [{
+                  selector: '[wmCaptionPosition]'
+              }]
+      }], () => [{ type: i0__namespace.Injector }, { type: i1$1__namespace.App }], null); })();
+
+  const components = [
+      ButtonComponent,
+      ButtonGroupDirective,
+      CaptionPositionDirective,
+      CheckboxComponent,
+      CheckboxsetComponent,
+      CompositeDirective,
+      NumberComponent,
+      RadiosetComponent,
+      SelectComponent,
+      SwitchComponent,
+      InputCalendarComponent,
+      InputColorComponent,
+      InputEmailComponent,
+      InputNumberComponent,
+      InputTextComponent,
+      TextareaComponent
+  ];
+  class InputModule {
+      static { this.ɵfac = function InputModule_Factory(t) { return new (t || InputModule)(); }; }
+      static { this.ɵmod = /*@__PURE__*/ i0__namespace.ɵɵdefineNgModule({ type: InputModule }); }
+      static { this.ɵinj = /*@__PURE__*/ i0__namespace.ɵɵdefineInjector({ imports: [i1.CommonModule,
+              i2$1.FormsModule,
+              i2.WmComponentsModule,
+              i3.IMaskModule] }); }
+  }
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputModule, [{
+          type: i0.NgModule,
+          args: [{
+                  imports: [
+                      i1.CommonModule,
+                      i2$1.FormsModule,
+                      i2.WmComponentsModule,
+                      i3.IMaskModule
+                  ],
+                  declarations: [...components],
+                  exports: [...components]
+              }]
+      }], null, null); })();
+  (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0__namespace.ɵɵsetNgModuleScope(InputModule, { declarations: [ButtonComponent,
+          ButtonGroupDirective,
+          CaptionPositionDirective,
+          CheckboxComponent,
+          CheckboxsetComponent,
+          CompositeDirective,
+          NumberComponent,
+          RadiosetComponent,
+          SelectComponent,
+          SwitchComponent,
+          InputCalendarComponent,
+          InputColorComponent,
+          InputEmailComponent,
+          InputNumberComponent,
+          InputTextComponent,
+          TextareaComponent], imports: [i1.CommonModule,
+          i2$1.FormsModule,
+          i2.WmComponentsModule,
+          i3.IMaskModule], exports: [ButtonComponent,
+          ButtonGroupDirective,
+          CaptionPositionDirective,
+          CheckboxComponent,
+          CheckboxsetComponent,
+          CompositeDirective,
+          NumberComponent,
+          RadiosetComponent,
+          SelectComponent,
+          SwitchComponent,
+          InputCalendarComponent,
+          InputColorComponent,
+          InputEmailComponent,
+          InputNumberComponent,
+          InputTextComponent,
+          TextareaComponent] }); })();
+
+  exports.BaseFormComponent = BaseFormComponent;
+  exports.BaseFormCustomComponent = BaseFormCustomComponent;
+  exports.ButtonComponent = ButtonComponent;
+  exports.ButtonGroupDirective = ButtonGroupDirective;
+  exports.CaptionPositionDirective = CaptionPositionDirective;
+  exports.CheckboxComponent = CheckboxComponent;
+  exports.CheckboxsetComponent = CheckboxsetComponent;
+  exports.CompositeDirective = CompositeDirective;
+  exports.DatasetAwareFormComponent = DatasetAwareFormComponent;
+  exports.InputCalendarComponent = InputCalendarComponent;
+  exports.InputColorComponent = InputColorComponent;
+  exports.InputEmailComponent = InputEmailComponent;
+  exports.InputModule = InputModule;
+  exports.InputNumberComponent = InputNumberComponent;
+  exports.InputTextComponent = InputTextComponent;
+  exports.NumberComponent = NumberComponent;
+  exports.RadiosetComponent = RadiosetComponent;
+  exports.SelectComponent = SelectComponent;
+  exports.SwitchComponent = SwitchComponent;
+  exports.TextareaComponent = TextareaComponent;
+  exports.unStringify = unStringify;
+
+}));