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

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

@@ -1,3411 +0,0 @@
-(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$5 = [".caret"];
-  const _c3$2 = (a0, a1, a2) => ({ width: a0, height: a1, margin: a2 });
-  const _c4$2 = (a0, a1, a2, a3) => ({ width: a0, height: a1, margin: a2, fontSize: a3 });
-  function ButtonComponent_img_0_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelement(0, "img", 5);
-      i0__namespace.ɵɵpipe(1, "image");
-  } if (rf & 2) {
-      const ctx_r0 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵproperty("src", i0__namespace.ɵɵpipeBind1(1, 2, ctx_r0.iconurl), i0__namespace.ɵɵsanitizeUrl)("ngStyle", i0__namespace.ɵɵpureFunction3(4, _c3$2, 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$5, decls: 6, vars: 5, consts: [["data-identifier", "img", "alt", "button image", "class", "button-image-icon", 3, "src", "ngStyle", 4, "ngIf"], ["aria-hidden", "true", 3, "class", "ngStyle", 4, "ngIf"], ["class", "sr-only", 4, "ngIf"], [1, "btn-caption", 3, "innerHTML"], ["class", "badge pull-right", 3, "textContent", 4, "ngIf"], ["data-identifier", "img", "alt", "button image", 1, "button-image-icon", 3, "src", "ngStyle"], ["aria-hidden", "true", 3, "ngStyle"], [1, "sr-only"], [1, "badge", "pull-right", 3, "textContent"]], template: function ButtonComponent_Template(rf, ctx) { if (rf & 1) {
-              i0__namespace.ɵɵprojectionDef(_c1$b);
-              i0__namespace.ɵɵtemplate(0, ButtonComponent_img_0_Template, 2, 8, "img", 0)(1, ButtonComponent_i_1_Template, 1, 9, "i", 1)(2, ButtonComponent_span_2_Template, 2, 2, "span", 2);
-              i0__namespace.ɵɵelement(3, "span", 3);
-              i0__namespace.ɵɵprojection(4);
-              i0__namespace.ɵɵtemplate(5, ButtonComponent_span_5_Template, 1, 1, "span", 4);
-          } if (rf & 2) {
-              i0__namespace.ɵɵproperty("ngIf", ctx.iconurl);
-              i0__namespace.ɵɵadvance();
-              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$4 = (a0, a1, a2) => ({ "unchecked": a0, "disabled": a1, "required": a2 });
-  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: 17, consts: [["checkbox", ""], [3, "ngClass"], ["type", "checkbox", "role", "checkbox", "focus-target", "", 3, "ngModelChange", "blur", "ngModel", "readonly", "required", "disabled", "tabindex"], [1, "caption", 3, "innerHtml"], ["alt", "Checkbox Image", "aria-hidden", "true", "src", "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==", 1, "switch"], ["type", "hidden", "aria-hidden", "true", "tabindex", "-1", 1, "ng-hide", "model-holder", 3, "disabled", "value"]], template: function CheckboxComponent_Template(rf, ctx) { if (rf & 1) {
-              const _r1 = i0__namespace.ɵɵgetCurrentView();
-              i0__namespace.ɵɵelementStart(0, "label", 1)(1, "input", 2, 0);
-              i0__namespace.ɵɵtwoWayListener("ngModelChange", function CheckboxComponent_Template_input_ngModelChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.proxyModel, $event) || (ctx.proxyModel = $event); return i0__namespace.ɵɵresetView($event); });
-              i0__namespace.ɵɵlistener("blur", function CheckboxComponent_Template_input_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.invokeOnTouched($event)); })("ngModelChange", function CheckboxComponent_Template_input_ngModelChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleChange($event)); });
-              i0__namespace.ɵɵelementEnd();
-              i0__namespace.ɵɵelement(3, "span", 3)(4, "img", 4);
-              i0__namespace.ɵɵelementEnd();
-              i0__namespace.ɵɵelement(5, "input", 5);
-          } if (rf & 2) {
-              i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction3(13, _c2$4, !ctx.proxyModel, ctx.disabled || ctx.readonly, ctx.required && ctx._caption));
-              i0__namespace.ɵɵadvance();
-              i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.proxyModel);
-              i0__namespace.ɵɵproperty("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled || ctx.readonly)("tabindex", ctx.tabindex);
-              i0__namespace.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("aria-checked", !!ctx.proxyModel)("accesskey", ctx.shortcutkey);
-              i0__namespace.ɵɵadvance(2);
-              i0__namespace.ɵɵproperty("innerHtml", ctx._caption, i0__namespace.ɵɵsanitizeHtml);
-              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           [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$3 = a0 => ({ "disabled": a0 });
-  const _c3$1 = a0 => ({ "collapsible-content": a0 });
-  const _c4$1 = (a0, a1) => ["checkbox", "app-checkbox", "group-list-item", a0, a1];
-  function CheckboxsetComponent_ng_template_0_li_0_label_1_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelementStart(0, "label", 8);
-      i0__namespace.ɵɵelement(1, "input", 9)(2, "span", 10);
-      i0__namespace.ɵɵelementEnd();
-  } if (rf & 2) {
-      const ctx_r3 = i0__namespace.ɵɵnextContext();
-      const item_r2 = ctx_r3.$implicit;
-      const i_r5 = ctx_r3.index;
-      const ctx_r2 = i0__namespace.ɵɵnextContext(2);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(12, _c2$3, ctx_r2.disabled || ctx_r2.readonly))("title", item_r2.label);
-      i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r2.key)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
-      i0__namespace.ɵɵattribute("aria-label", item_r2.key)("aria-checked", item_r2.selected)("data-attr-index", i_r5);
-      i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵproperty("textContent", item_r2.label);
-  } }
-  function CheckboxsetComponent_ng_template_0_li_0_label_2_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelementStart(0, "label", 11);
-      i0__namespace.ɵɵelement(1, "input", 9)(2, "span", 12);
-      i0__namespace.ɵɵelementEnd();
-  } if (rf & 2) {
-      const ctx_r3 = i0__namespace.ɵɵnextContext();
-      const item_r2 = ctx_r3.$implicit;
-      const i_r5 = ctx_r3.index;
-      const ctx_r2 = i0__namespace.ɵɵnextContext(2);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(10, _c2$3, ctx_r2.disabled || ctx_r2.readonly));
-      i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r2.key)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
-      i0__namespace.ɵɵattribute("aria-label", item_r2.key)("aria-checked", item_r2.selected)("data-attr-index", i_r5);
-  } }
-  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$3, ctx_r2.disabled || ctx_r2.readonly))("title", item_r9.label);
-      i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r9.key)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
-      i0__namespace.ɵɵattribute("data-attr-index", i_r11);
-      i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵproperty("textContent", item_r9.label);
-  } }
-  function CheckboxsetComponent_ng_template_3_li_0_li_8_label_2_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelementStart(0, "label", 11);
-      i0__namespace.ɵɵelement(1, "input", 26)(2, "span", 27);
-      i0__namespace.ɵɵelementEnd();
-  } if (rf & 2) {
-      const ctx_r9 = i0__namespace.ɵɵnextContext();
-      const item_r9 = ctx_r9.$implicit;
-      const i_r11 = ctx_r9.index;
-      const ctx_r2 = i0__namespace.ɵɵnextContext(3);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(8, _c2$3, ctx_r2.disabled || ctx_r2.readonly));
-      i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r9.key)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
-      i0__namespace.ɵɵattribute("data-attr-index", i_r11);
-  } }
-  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: ''
-          };
-          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$2 = a0 => ({ "disabled": a0 });
-  const _c3 = a0 => ({ "collapsible-content": a0 });
-  const _c4 = (a0, a1) => ["radio", "app-radio", "group-list-item", a0, a1];
-  function RadiosetComponent_ng_template_0_li_0_label_1_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelementStart(0, "label", 7);
-      i0__namespace.ɵɵelement(1, "input", 8)(2, "span", 9);
-      i0__namespace.ɵɵelementEnd();
-  } if (rf & 2) {
-      const ctx_r3 = i0__namespace.ɵɵnextContext();
-      const item_r2 = ctx_r3.$implicit;
-      const i_r5 = ctx_r3.index;
-      const ctx_r2 = i0__namespace.ɵɵnextContext(2);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(10, _c2$2, ctx_r2.disabled || ctx_r2.readonly));
-      i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r2.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
-      i0__namespace.ɵɵattribute("aria-checked", item_r2.selected)("data-attr-index", i_r5)("aria-label", item_r2.key);
-      i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵproperty("textContent", item_r2.label);
-  } }
-  function RadiosetComponent_ng_template_0_li_0_label_2_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelementStart(0, "label", 7);
-      i0__namespace.ɵɵelement(1, "input", 8)(2, "span", 10);
-      i0__namespace.ɵɵelementEnd();
-  } if (rf & 2) {
-      const ctx_r3 = i0__namespace.ɵɵnextContext();
-      const item_r2 = ctx_r3.$implicit;
-      const i_r5 = ctx_r3.index;
-      const ctx_r2 = i0__namespace.ɵɵnextContext(2);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(9, _c2$2, ctx_r2.disabled || ctx_r2.readonly));
-      i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r2.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
-      i0__namespace.ɵɵattribute("aria-checked", item_r2.selected)("data-attr-index", i_r5)("aria-label", item_r2.key);
-  } }
-  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$2, ctx_r2.disabled || ctx_r2.readonly));
-      i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r9.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
-      i0__namespace.ɵɵattribute("aria-checked", item_r9.selected)("data-attr-index", i_r11);
-      i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵproperty("textContent", item_r9.label);
-  } }
-  function RadiosetComponent_ng_template_3_li_0_li_8_label_2_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelementStart(0, "label", 7);
-      i0__namespace.ɵɵelement(1, "input", 8)(2, "span", 10);
-      i0__namespace.ɵɵelementEnd();
-  } if (rf & 2) {
-      const ctx_r9 = i0__namespace.ɵɵnextContext();
-      const item_r9 = ctx_r9.$implicit;
-      const i_r11 = ctx_r9.index;
-      const ctx_r2 = i0__namespace.ɵɵnextContext(3);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(8, _c2$2, ctx_r2.disabled || ctx_r2.readonly));
-      i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r9.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
-      i0__namespace.ɵɵattribute("aria-checked", item_r9.selected)("data-attr-index", i_r11);
-  } }
-  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];
-  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: 16, consts: [["select", ""], ["role", "listbox", "aria-haspopup", "true", "aria-expanded", "false", "focus-target", "", 3, "ngModelChange", "change", "focus", "blur", "ngClass", "disabled", "required", "tabindex", "ngModel", "multiple", "autofocus"], ["selected", "", "value", "undefined", "id", "placeholderOption", 3, "textContent", "hidden"], [4, "ngIf"], [3, "label", 4, "ngFor", "ngForOf"], [3, "label"], ["role", "option", 3, "value", "selected", "textContent", 4, "ngFor", "ngForOf"], ["role", "option", 3, "value", "selected", "textContent"]], template: function SelectComponent_Template(rf, ctx) { if (rf & 1) {
-              const _r1 = i0__namespace.ɵɵgetCurrentView();
-              i0__namespace.ɵɵelementStart(0, "select", 1, 0);
-              i0__namespace.ɵɵtwoWayListener("ngModelChange", function SelectComponent_Template_select_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.modelByKey, $event) || (ctx.modelByKey = $event); return i0__namespace.ɵɵresetView($event); });
-              i0__namespace.ɵɵlistener("change", function SelectComponent_Template_select_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onSelectValueChange($event)); })("focus", function SelectComponent_Template_select_focus_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.checkForFloatingLabel($event)); })("blur", function SelectComponent_Template_select_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); ctx.invokeOnTouched($event); return i0__namespace.ɵɵresetView(ctx.checkForFloatingLabel($event)); });
-              i0__namespace.ɵɵelement(2, "option", 2);
-              i0__namespace.ɵɵtemplate(3, SelectComponent_ng_container_3_Template, 2, 1, "ng-container", 3)(4, SelectComponent_ng_container_4_Template, 2, 1, "ng-container", 3);
-              i0__namespace.ɵɵelementEnd();
-          } if (rf & 2) {
-              i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(14, _c1$6, ctx.class))("disabled", ctx.disabled)("required", ctx.required)("tabindex", ctx.tabindex);
-              i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.modelByKey);
-              i0__namespace.ɵɵproperty("multiple", ctx.multiple)("autofocus", ctx.autofocus);
-              i0__namespace.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("aria-multiselectable", ctx.multiple);
-              i0__namespace.ɵɵadvance(2);
-              i0__namespace.ɵɵproperty("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        [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$1 = a0 => ["app-icon", a0];
-  function SwitchComponent_a_1_i_1_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelement(0, "i", 8);
-  } if (rf & 2) {
-      const opt_r3 = i0__namespace.ɵɵnextContext().$implicit;
-      const ctx_r4 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(1, _c2$1, 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 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: 17, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "type", "ngModel", "readonly", "required", "disabled", "min", "max", "step", "autofocus", "autocomplete", "ngClass", "ngStyle"]], template: function InputCalendarComponent_Template(rf, ctx) { if (rf & 1) {
-              const _r1 = i0__namespace.ɵɵgetCurrentView();
-              i0__namespace.ɵɵelementStart(0, "input", 1, 0);
-              i0__namespace.ɵɵtwoWayListener("ngModelChange", function InputCalendarComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0__namespace.ɵɵresetView($event); });
-              i0__namespace.ɵɵlistener("blur", function InputCalendarComponent_Template_input_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleBlur($event)); })("ngModelChange", function InputCalendarComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleChange($event)); });
-              i0__namespace.ɵɵelementEnd();
-          } if (rf & 2) {
-              i0__namespace.ɵɵproperty("type", ctx.type);
-              i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
-              i0__namespace.ɵɵproperty("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("min", ctx.minvalue)("max", ctx.maxvalue)("step", ctx.step)("autofocus", ctx.autofocus)("autocomplete", ctx.autocomplete ? "on" : "off")("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
-              i0__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint || ctx.type + " field");
-          } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.NgModel], encapsulation: 2 }); }
-  }
-  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputCalendarComponent, [{
-          type: i0.Component,
-          args: [{ selector: 'wm-input[type="date"], wm-input[type="datetime-local"], wm-input[type="month"], wm-input[type="time"], wm-input[type="week"]', providers: [
-                      i2.provideAs(InputCalendarComponent, i2$1.NG_VALUE_ACCESSOR, true),
-                      i2.provideAs(InputCalendarComponent, i2$1.NG_VALIDATORS, true),
-                      i2.provideAsWidgetRef(InputCalendarComponent)
-                  ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [min]=\"minvalue\"\n       [max]=\"maxvalue\"\n       [step]=\"step\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint || type + ' field'\"\n       [autofocus]=\"autofocus\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       #input>\n" }]
-      }], () => [{ 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 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: 14, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "type", "ngModel", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle"]], template: function InputColorComponent_Template(rf, ctx) { if (rf & 1) {
-              const _r1 = i0__namespace.ɵɵgetCurrentView();
-              i0__namespace.ɵɵelementStart(0, "input", 1, 0);
-              i0__namespace.ɵɵtwoWayListener("ngModelChange", function InputColorComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0__namespace.ɵɵresetView($event); });
-              i0__namespace.ɵɵlistener("blur", function InputColorComponent_Template_input_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleBlur($event)); })("ngModelChange", function InputColorComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleChange($event)); });
-              i0__namespace.ɵɵelementEnd();
-          } if (rf & 2) {
-              i0__namespace.ɵɵproperty("type", ctx.type);
-              i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
-              i0__namespace.ɵɵproperty("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
-              i0__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
-          } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.MaxLengthValidator, i2$1__namespace.NgModel], encapsulation: 2 }); }
-  }
-  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputColorComponent, [{
-          type: i0.Component,
-          args: [{ selector: 'wm-input[type="color"]', providers: [
-                      i2.provideAs(InputColorComponent, i2$1.NG_VALUE_ACCESSOR, true),
-                      i2.provideAs(InputColorComponent, i2$1.NG_VALIDATORS, true),
-                      i2.provideAsWidgetRef(InputColorComponent)
-                  ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       role=\"textbox\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       #input>\n" }]
-      }], () => [{ 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;
-
-}));