@wavemaker/app-ng-runtime 11.13.0-rc.6255 → 11.14.0-rc.6276

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

@@ -0,0 +1,1070 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@wm/core'), require('@wm/components/base'), require('@wm/components/input/base-form-custom'), require('lodash-es'), require('tslib'), require('@angular/common'), require('@angular/forms'), require('angular-imask')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@wm/core', '@wm/components/base', '@wm/components/input/base-form-custom', 'lodash-es', 'tslib', '@angular/common', '@angular/forms', 'angular-imask'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.input = global.wm.components.input || {}, global.wm.components.input.text = {}), global.ng.core, global.wm.core, global.wm.components.base, global.wm.components.input.baseFormCustom, global._, global.tslib, global.ng.common, global.ng.forms, global.angularIMask));
+})(this, (function (exports, i0, core, base, baseFormCustom, lodashEs, tslib, i1, i2, i3) { '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__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
+  var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
+
+  class BaseInput extends baseFormCustom.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 === 'updateon') {
+              this.ngModelOptions.updateOn = nv === 'default' ? 'change' : 'blur';
+          }
+          if (key === 'class') {
+              if (this.inputEl.nativeElement) {
+                  core.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);
+          core.$appDigest();
+      }
+      ngAfterViewInit() {
+          super.ngAfterViewInit();
+          // add the class on the input element
+          if (this.class) {
+              core.addClass(this.inputEl.nativeElement, this.class);
+          }
+          base.styler(this.inputEl.nativeElement, this);
+      }
+      constructor(inj, config, explicitContext) {
+          super(inj, config, explicitContext);
+          // possible values for ngModelOptions are 'blur' and 'change'
+          // default is 'blur'
+          this.ngModelOptions = {
+              updateOn: '',
+              standalone: true
+          };
+          let updateOn = this.nativeElement.getAttribute('updateon') || 'blur';
+          updateOn = updateOn === 'default' ? 'change' : updateOn;
+          this.ngModelOptions.updateOn = updateOn;
+      }
+      static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: BaseInput, deps: [{ token: i0__namespace.Injector }, { token: base.WidgetConfig }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Injectable }); }
+      static { this.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: BaseInput }); }
+  }
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: BaseInput, decorators: [{
+              type: i0.Injectable
+          }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                      type: i0.Inject,
+                      args: [base.WidgetConfig]
+                  }] }, { type: undefined, decorators: [{
+                      type: i0.Inject,
+                      args: ['EXPLICIT_CONTEXT']
+                  }, {
+                      type: i0.Optional
+                  }] }] });
+
+  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();
+              // Fix for [WMS-27648]: When a decimal value is entered (e.g., "3."), datavalue and prevDatavalue become null as it is an invalid number.
+              // handleChange() should be called when the invalid datavalue (e.g., "3.") is removed, and the value becomes an empty string ("").
+              if ((prevDataValue || prevDataValue == 0 || prevDataValue == null) && !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('.');
+              let decimalPlacesAttrVal = this.getAttr('decimalplaces');
+              const decimalplaces = decimalPlacesAttrVal !== '' && decimalPlacesAttrVal !== undefined ? Number(decimalPlacesAttrVal) : NaN;
+              if (this.inputmode === base.INPUTMODE.NATURAL && !isNaN(decimalplaces)) {
+                  if (decimalplaces === 0) {
+                      this.decimalValue = '';
+                      value = isLocalizedNumber ? parts[0] : this.transformNumber(parts[0]);
+                  }
+                  if (decimalplaces > 0) {
+                      this.decimalValue = parts[1] && parts[1].substring(0, decimalplaces) || '';
+                      if (isLocalizedNumber) {
+                          value = this.decimalValue.length ? `${parts[0]}${this.DECIMAL}${this.decimalValue}` : parts[0];
+                      }
+                      else {
+                          value = Number.parseFloat(String(value)).toFixed(decimalplaces);
+                      }
+                  }
+              }
+              else {
+                  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
+          let invalidDecimalPlaces = false;
+          if (this.inputmode === base.INPUTMODE.NATURAL && !isNaN(this.decimalplaces) && this.decimalplaces >= 0) {
+              invalidDecimalPlaces = this.countDecimals(val) > this.decimalplaces;
+          }
+          else if (!Number.isInteger(this.step) && this.countDecimals(val) > this.countDecimals(this.step)) {
+              invalidDecimalPlaces = true;
+          }
+          if (isNaN(val) || !isFinite(val) || invalidDecimalPlaces) {
+              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 === base.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 === base.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() {
+          if (this.inputmode === 'INPUTMODE.NATURAL' && !isNaN(this.decimalplaces) && this.decimalplaces >= 0) {
+              return this.decimalplaces;
+          }
+          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 === base.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();
+          const prevDataValue = this.getPrevDataValue();
+          // WMS-22355, Trigger change cb if value exists or value is empty but datavalue exists (when value is selected and deleted).
+          // Fix for [WMS-27041]: Ensure the change callback for the number widget triggers only on focus out (when updateon is set to blur),
+          // not during initial input when the previous value is undefined and the current value is null.
+          if (core.isDefined(value) && (value !== '' || this.datavalue || this.datavalue == 0)) {
+              if (this.widgetType === "wm-number") {
+                  if (this.inputmode == base.INPUTMODE.FINANCIAL) {
+                      // Case 1: when there is no default value, prevDataValue is undefined && this.datavalue is null
+                      // Case 2: when there default value, prevDataValue is equal to this.datavalue
+                      if (!((prevDataValue == undefined && this.datavalue == null) || (prevDataValue == this.datavalue))) {
+                          this.handleChange(value);
+                      }
+                  }
+                  else {
+                      if (!(prevDataValue == undefined && this.datavalue == null)) {
+                          this.handleChange(value);
+                      }
+                  }
+              }
+              else { // currency widget
+                  this.handleChange(value);
+              }
+          }
+          else {
+              return;
+          }
+          if (!stepVal || this.inputmode !== base.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 === base.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) {
+          const num = Number(value);
+          if (num === 0) {
+              return 0;
+          }
+          // Convert to number and handle scientific notation
+          if (Number.isNaN(num))
+              return 0;
+          // Get the exponential form to handle scientific notation properly
+          const exponentialStr = num.toExponential();
+          const match = exponentialStr.match(/^-?\d*\.?(\d+)?e([+-]\d+)$/);
+          if (match) {
+              const decimals = match[1] ? match[1].length : 0;
+              const exponent = parseInt(match[2]);
+              return Math.max(0, decimals - exponent);
+          }
+          // Fallback to regular decimal counting
+          const decimalStr = num.toString();
+          const isLocalizedNumber = lodashEs.includes(decimalStr, this.DECIMAL);
+          const parts = isLocalizedNumber ? decimalStr.split(this.DECIMAL) : decimalStr.split('.');
+          return parts[1] ? parts[1].length : 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.
+          this.inputmode === base.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;
+          }
+          if (this.inputmode === base.INPUTMODE.NATURAL && !isNaN(this.decimalplaces)) {
+              if (this.decimalplaces === 0 && this.DECIMAL === $event.key) {
+                  return false;
+              }
+              const parts = lodashEs.includes(inputValue, this.DECIMAL) ? inputValue.split(this.DECIMAL) : inputValue.split('.');
+              const isCursorPositionAtDecimalPlace = $event.target.selectionStart > parts[0].length;
+              if (this.decimalplaces > 0 && this.countDecimals(inputValue) >= this.decimalplaces && isCursorPositionAtDecimalPlace) {
+                  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;
+      }
+      onDelete($event) {
+          this.isDefaultQuery = false;
+      }
+      onEnter($event) {
+          this.datavalue = $event.target.value;
+      }
+      onModelChange($event) {
+          if (this.inputmode === base.INPUTMODE.NATURAL || (this.inputmode === base.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);
+          }
+      }
+      onPaste($event) {
+          const pastedData = $event.clipboardData.getData('text');
+          for (const char of pastedData) {
+              const mockEvent = new KeyboardEvent('keypress', { key: char });
+              if (this.validateInputEntry(mockEvent) === false) {
+                  $event.preventDefault();
+                  return;
+              }
+          }
+      }
+  };
+  exports.NumberLocale = tslib.__decorate([
+      tslib.__param(4, i0.Inject('EXPLICIT_CONTEXT')),
+      tslib.__param(4, i0.Optional()),
+      tslib.__metadata("design:paramtypes", [i0.Injector, Object, core.AbstractI18nService,
+          base.TrailingZeroDecimalPipe, Object])
+  ], exports.NumberLocale);
+
+  const inputCalendarTypeProps = new Map([
+      ['autocomplete', { value: true, ...base.PROP_BOOLEAN }],
+      ['autotrim', { value: true, ...base.PROP_BOOLEAN }],
+      ['autofocus', base.PROP_BOOLEAN],
+      ['class', base.PROP_STRING],
+      ['datasource', base.PROP_ANY],
+      ['datavalue', base.PROP_STRING],
+      ['disabled', base.PROP_BOOLEAN],
+      ['hint', base.PROP_STRING],
+      ['arialabel', base.PROP_STRING],
+      ['maxvalue', base.PROP_NUMBER],
+      ['minvalue', base.PROP_NUMBER],
+      ['name', base.PROP_STRING],
+      ['placeholder', { value: 'Enter text', ...base.PROP_STRING }],
+      ['readonly', base.PROP_BOOLEAN],
+      ['required', base.PROP_BOOLEAN],
+      ['shortcutkey', base.PROP_STRING],
+      ['show', { value: true, ...base.PROP_BOOLEAN }],
+      ['step', base.PROP_NUMBER],
+      ['tabindex', { value: 0, ...base.PROP_NUMBER }],
+      ['type', base.PROP_STRING],
+      ['updateon', base.PROP_STRING],
+      ['conditionalclass', base.PROP_ANY],
+      ['conditionalstyle', base.PROP_ANY]
+  ]);
+  const registerProps$4 = () => {
+      base.register('wm-input-calendar', inputCalendarTypeProps);
+  };
+
+  const WIDGET_CONFIG$4 = {
+      widgetType: 'wm-input-calendar',
+      hostClass: 'app-input-wrapper'
+  };
+  class InputCalendarComponent extends BaseInput {
+      static { this.initializeProps = registerProps$4(); }
+      constructor(inj, explicitContext) {
+          super(inj, WIDGET_CONFIG$4, explicitContext);
+      }
+      static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: InputCalendarComponent, deps: [{ token: i0__namespace.Injector }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+      static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InputCalendarComponent, isStandalone: true, selector: "wm-input[type=\"date\"], wm-input[type=\"datetime-local\"], wm-input[type=\"month\"], wm-input[type=\"time\"], wm-input[type=\"week\"]", providers: [
+              base.provideAs(InputCalendarComponent, i2.NG_VALUE_ACCESSOR, true),
+              base.provideAs(InputCalendarComponent, i2.NG_VALIDATORS, true),
+              base.provideAsWidgetRef(InputCalendarComponent)
+          ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "ngModel", first: true, predicate: i2.NgModel, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"{standalone: true}\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [min]=\"minvalue\"\n       [max]=\"maxvalue\"\n       [step]=\"step\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"arialabel || 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", dependencies: [{ kind: "ngmodule", type: i1.CommonModule }, { kind: "directive", type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: i2.FormsModule }, { kind: "directive", type: i2__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+  }
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: InputCalendarComponent, decorators: [{
+              type: i0.Component,
+              args: [{ standalone: true, imports: [i1.CommonModule, i2.FormsModule], selector: 'wm-input[type="date"], wm-input[type="datetime-local"], wm-input[type="month"], wm-input[type="time"], wm-input[type="week"]', providers: [
+                          base.provideAs(InputCalendarComponent, i2.NG_VALUE_ACCESSOR, true),
+                          base.provideAs(InputCalendarComponent, i2.NG_VALIDATORS, true),
+                          base.provideAsWidgetRef(InputCalendarComponent)
+                      ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"{standalone: true}\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [min]=\"minvalue\"\n       [max]=\"maxvalue\"\n       [step]=\"step\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"arialabel || 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" }]
+          }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                      type: i0.Inject,
+                      args: ['EXPLICIT_CONTEXT']
+                  }, {
+                      type: i0.Optional
+                  }] }], propDecorators: { inputEl: [{
+                  type: i0.ViewChild,
+                  args: ['input', { static: true }]
+              }], ngModel: [{
+                  type: i0.ViewChild,
+                  args: [i2.NgModel]
+              }] } });
+
+  const inputColorTypeProps = new Map([
+      ['autocomplete', { value: true, ...base.PROP_BOOLEAN }],
+      ['autofocus', base.PROP_BOOLEAN],
+      ['autotrim', { value: true, ...base.PROP_BOOLEAN }],
+      ['class', base.PROP_STRING],
+      ['datavaluesource', base.PROP_ANY],
+      ['datavalue', base.PROP_STRING],
+      ['disabled', base.PROP_BOOLEAN],
+      ['hint', base.PROP_STRING],
+      ['arialabel', base.PROP_STRING],
+      ['name', base.PROP_STRING],
+      ['placeholder', { value: 'Enter text', ...base.PROP_STRING }],
+      ['readonly', base.PROP_BOOLEAN],
+      ['required', base.PROP_BOOLEAN],
+      ['shortcutkey', base.PROP_STRING],
+      ['show', { value: true, ...base.PROP_BOOLEAN }],
+      ['tabindex', { value: 0, ...base.PROP_NUMBER }],
+      ['type', { value: 'color', ...base.PROP_STRING }],
+      ['updateon', base.PROP_STRING],
+      ['conditionalclass', base.PROP_ANY],
+      ['conditionalstyle', base.PROP_ANY]
+  ]);
+  const registerProps$3 = () => {
+      base.register('wm-input-color', inputColorTypeProps);
+  };
+
+  const WIDGET_CONFIG$3 = {
+      widgetType: 'wm-input-color',
+      hostClass: 'app-input-wrapper'
+  };
+  class InputColorComponent extends BaseInput {
+      static { this.initializeProps = registerProps$3(); }
+      constructor(inj, explicitContext) {
+          super(inj, WIDGET_CONFIG$3, explicitContext);
+      }
+      static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: InputColorComponent, deps: [{ token: i0__namespace.Injector }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+      static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InputColorComponent, isStandalone: true, selector: "wm-input[type=\"color\"]", providers: [
+              base.provideAs(InputColorComponent, i2.NG_VALUE_ACCESSOR, true),
+              base.provideAs(InputColorComponent, i2.NG_VALIDATORS, true),
+              base.provideAsWidgetRef(InputColorComponent)
+          ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "ngModel", first: true, predicate: i2.NgModel, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"{standalone: true}\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"arialabel\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       #input>\n", dependencies: [{ kind: "ngmodule", type: i1.CommonModule }, { kind: "directive", type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: i2.FormsModule }, { kind: "directive", type: i2__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2__namespace.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+  }
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: InputColorComponent, decorators: [{
+              type: i0.Component,
+              args: [{ standalone: true, imports: [i1.CommonModule, i2.FormsModule], selector: 'wm-input[type="color"]', providers: [
+                          base.provideAs(InputColorComponent, i2.NG_VALUE_ACCESSOR, true),
+                          base.provideAs(InputColorComponent, i2.NG_VALIDATORS, true),
+                          base.provideAsWidgetRef(InputColorComponent)
+                      ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"{standalone: true}\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"arialabel\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       #input>\n" }]
+          }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                      type: i0.Inject,
+                      args: ['EXPLICIT_CONTEXT']
+                  }, {
+                      type: i0.Optional
+                  }] }], propDecorators: { inputEl: [{
+                  type: i0.ViewChild,
+                  args: ['input', { static: true }]
+              }], ngModel: [{
+                  type: i0.ViewChild,
+                  args: [i2.NgModel]
+              }] } });
+
+  const inputEmailTypeProps = new Map([
+      ['autocomplete', { value: true, ...base.PROP_BOOLEAN }],
+      ['autofocus', base.PROP_BOOLEAN],
+      ['autotrim', { value: true, ...base.PROP_BOOLEAN }],
+      ['class', base.PROP_STRING],
+      ['datavaluesource', base.PROP_ANY],
+      ['datavalue', base.PROP_STRING],
+      ['disabled', base.PROP_BOOLEAN],
+      ['hint', base.PROP_STRING],
+      ['arialabel', base.PROP_STRING],
+      ['maxchars', base.PROP_NUMBER],
+      ['name', base.PROP_STRING],
+      ['placeholder', { value: 'Enter text', ...base.PROP_STRING }],
+      ['readonly', base.PROP_BOOLEAN],
+      ['regexp', base.PROP_STRING],
+      ['required', base.PROP_BOOLEAN],
+      ['shortcutkey', base.PROP_STRING],
+      ['show', { value: true, ...base.PROP_BOOLEAN }],
+      ['tabindex', { value: 0, ...base.PROP_NUMBER }],
+      ['type', { value: 'email', ...base.PROP_STRING }],
+      ['updateon', base.PROP_STRING],
+      ['conditionalclass', base.PROP_ANY],
+      ['conditionalstyle', base.PROP_ANY]
+  ]);
+  const registerProps$2 = () => {
+      base.register('wm-input-email', inputEmailTypeProps);
+  };
+
+  const WIDGET_CONFIG$2 = {
+      widgetType: 'wm-input-email',
+      hostClass: 'app-input-wrapper'
+  };
+  class InputEmailComponent extends BaseInput {
+      static { this.initializeProps = registerProps$2(); }
+      constructor(inj, explicitContext) {
+          super(inj, WIDGET_CONFIG$2, explicitContext);
+      }
+      static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: InputEmailComponent, deps: [{ token: i0__namespace.Injector }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+      static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InputEmailComponent, isStandalone: true, selector: "wm-input[type=\"email\"]", providers: [
+              base.provideAs(InputEmailComponent, i2.NG_VALUE_ACCESSOR, true),
+              base.provideAs(InputEmailComponent, i2.NG_VALIDATORS, true),
+              base.provideAsWidgetRef(InputEmailComponent)
+          ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "ngModel", first: true, predicate: i2.NgModel, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<input class=\"form-control app-textbox\"\n       focus-target\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]=\"arialabel\"\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", dependencies: [{ kind: "ngmodule", type: i1.CommonModule }, { kind: "directive", type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: i2.FormsModule }, { kind: "directive", type: i2__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2__namespace.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2__namespace.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2__namespace.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i2__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+  }
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: InputEmailComponent, decorators: [{
+              type: i0.Component,
+              args: [{ standalone: true, imports: [i1.CommonModule, i2.FormsModule], selector: 'wm-input[type="email"]', providers: [
+                          base.provideAs(InputEmailComponent, i2.NG_VALUE_ACCESSOR, true),
+                          base.provideAs(InputEmailComponent, i2.NG_VALIDATORS, true),
+                          base.provideAsWidgetRef(InputEmailComponent)
+                      ], template: "<input class=\"form-control app-textbox\"\n       focus-target\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]=\"arialabel\"\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" }]
+          }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                      type: i0.Inject,
+                      args: ['EXPLICIT_CONTEXT']
+                  }, {
+                      type: i0.Optional
+                  }] }], propDecorators: { inputEl: [{
+                  type: i0.ViewChild,
+                  args: ['input', { static: true }]
+              }], ngModel: [{
+                  type: i0.ViewChild,
+                  args: [i2.NgModel]
+              }] } });
+
+  const inputNumberTypeProps = new Map([
+      ['autocomplete', { value: true, ...base.PROP_BOOLEAN }],
+      ['autofocus', base.PROP_BOOLEAN],
+      ['autotrim', { value: true, ...base.PROP_BOOLEAN }],
+      ['class', base.PROP_STRING],
+      ['datavaluesource', base.PROP_ANY],
+      ['datavalue', base.PROP_STRING],
+      ['disabled', base.PROP_BOOLEAN],
+      ['hint', base.PROP_STRING],
+      ['arialabel', base.PROP_STRING],
+      ['maxchars', base.PROP_NUMBER],
+      ['maxvalue', base.PROP_NUMBER],
+      ['minvalue', base.PROP_NUMBER],
+      ['name', base.PROP_STRING],
+      ['placeholder', { value: 'Enter text', ...base.PROP_STRING }],
+      ['readonly', base.PROP_BOOLEAN],
+      ['regexp', base.PROP_STRING],
+      ['required', base.PROP_BOOLEAN],
+      ['shortcutkey', base.PROP_STRING],
+      ['show', { value: true, ...base.PROP_BOOLEAN }],
+      ['step', base.PROP_NUMBER],
+      ['tabindex', { value: 0, ...base.PROP_NUMBER }],
+      ['type', { value: 'number', ...base.PROP_STRING }],
+      ['updateon', base.PROP_STRING],
+      ['conditionalclass', base.PROP_ANY],
+      ['conditionalstyle', base.PROP_ANY]
+  ]);
+  const registerProps$1 = () => {
+      base.register('wm-input-number', inputNumberTypeProps);
+  };
+
+  const inputTextTypeProps = new Map([
+      ['autocomplete', { value: true, ...base.PROP_BOOLEAN }],
+      ['autofocus', base.PROP_BOOLEAN],
+      ['autotrim', { value: true, ...base.PROP_BOOLEAN }],
+      ['class', base.PROP_STRING],
+      ['datavaluesource', base.PROP_ANY],
+      ['datavalue', base.PROP_STRING],
+      ['disabled', base.PROP_BOOLEAN],
+      ['displayformat', base.PROP_STRING],
+      ['hint', base.PROP_STRING],
+      ['arialabel', base.PROP_STRING],
+      ['maxchars', base.PROP_NUMBER],
+      ['name', base.PROP_STRING],
+      ['placeholder', { value: 'Enter text', ...base.PROP_STRING }],
+      ['readonly', base.PROP_BOOLEAN],
+      ['regexp', base.PROP_STRING],
+      ['required', base.PROP_BOOLEAN],
+      ['shortcutkey', base.PROP_STRING],
+      ['show', { value: true, ...base.PROP_BOOLEAN }],
+      ['showdisplayformaton', { value: 'always', ...base.PROP_ANY }],
+      ['tabindex', { value: 0, ...base.PROP_NUMBER }],
+      ['type', { value: 'text', ...base.PROP_STRING }],
+      ['updateon', base.PROP_STRING],
+      ['conditionalclass', base.PROP_ANY],
+      ['conditionalstyle', base.PROP_ANY]
+  ]);
+  const registerProps = () => {
+      base.register('wm-input-text', inputTextTypeProps);
+      base.registerFormWidget(core.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);
+      base.registerFormWidget(core.FormWidgetType.TEXT, new Map(formTextProps));
+  };
+
+  const WIDGET_CONFIG$1 = {
+      widgetType: 'wm-input-text',
+      hostClass: 'app-input-wrapper'
+  };
+  class InputTextComponent extends BaseInput {
+      static { this.initializeProps = registerProps(); }
+      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 = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: InputTextComponent, deps: [{ token: i0__namespace.Injector }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+      static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InputTextComponent, isStandalone: true, 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: [
+              base.provideAs(InputTextComponent, i2.NG_VALUE_ACCESSOR, true),
+              base.provideAs(InputTextComponent, i2.NG_VALIDATORS, true),
+              base.provideAsWidgetRef(InputTextComponent)
+          ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "ngModel", first: true, predicate: i2.NgModel, descendants: true }, { propertyName: "imask", first: true, predicate: ["input"], descendants: true, read: i3.IMaskDirective }], usesInheritance: true, ngImport: i0__namespace, template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [attr.aria-label]=\"arialabel\"\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", dependencies: [{ kind: "ngmodule", type: i1.CommonModule }, { kind: "directive", type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: i2.FormsModule }, { kind: "directive", type: i2__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2__namespace.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2__namespace.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: i3.IMaskModule }, { kind: "directive", type: i3__namespace.IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }] }); }
+  }
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: InputTextComponent, decorators: [{
+              type: i0.Component,
+              args: [{ standalone: true, imports: [i1.CommonModule, i2.FormsModule, i3.IMaskModule], 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: [
+                          base.provideAs(InputTextComponent, i2.NG_VALUE_ACCESSOR, true),
+                          base.provideAs(InputTextComponent, i2.NG_VALIDATORS, true),
+                          base.provideAsWidgetRef(InputTextComponent)
+                      ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [attr.aria-label]=\"arialabel\"\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" }]
+          }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                      type: i0.Inject,
+                      args: ['EXPLICIT_CONTEXT']
+                  }, {
+                      type: i0.Optional
+                  }] }], propDecorators: { inputEl: [{
+                  type: i0.ViewChild,
+                  args: ['input', { static: true }]
+              }], ngModel: [{
+                  type: i0.ViewChild,
+                  args: [i2.NgModel]
+              }], imask: [{
+                  type: i0.ViewChild,
+                  args: ['input', { read: i3.IMaskDirective }]
+              }] } });
+
+  const WIDGET_CONFIG = {
+      widgetType: 'wm-input-number',
+      hostClass: 'app-input-wrapper'
+  };
+  class InputNumberComponent extends BaseInput {
+      static { this.initializeProps = registerProps$1(); }
+      constructor(inj, explicitContext) {
+          super(inj, WIDGET_CONFIG, 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 = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: InputNumberComponent, deps: [{ token: i0__namespace.Injector }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+      static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InputNumberComponent, isStandalone: true, selector: "wm-input[type=\"number\"]", providers: [
+              base.provideAs(InputNumberComponent, i2.NG_VALUE_ACCESSOR, true),
+              base.provideAs(InputNumberComponent, i2.NG_VALIDATORS, true),
+              base.provideAsWidgetRef(InputNumberComponent)
+          ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "ngModel", first: true, predicate: i2.NgModel, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<input class=\"form-control app-textbox\"\n       [ngClass]=\"{'step-hidden': step === 0}\"\n       focus-target\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]=\"arialabel\"\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", dependencies: [{ kind: "ngmodule", type: i1.CommonModule }, { kind: "directive", type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: i2.FormsModule }, { kind: "directive", type: i2__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2__namespace.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+  }
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: InputNumberComponent, decorators: [{
+              type: i0.Component,
+              args: [{ standalone: true, imports: [i1.CommonModule, i2.FormsModule], selector: 'wm-input[type="number"]', providers: [
+                          base.provideAs(InputNumberComponent, i2.NG_VALUE_ACCESSOR, true),
+                          base.provideAs(InputNumberComponent, i2.NG_VALIDATORS, true),
+                          base.provideAsWidgetRef(InputNumberComponent)
+                      ], template: "<input class=\"form-control app-textbox\"\n       [ngClass]=\"{'step-hidden': step === 0}\"\n       focus-target\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]=\"arialabel\"\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" }]
+          }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                      type: i0.Inject,
+                      args: ['EXPLICIT_CONTEXT']
+                  }, {
+                      type: i0.Optional
+                  }] }], propDecorators: { inputEl: [{
+                  type: i0.ViewChild,
+                  args: ['input', { static: true }]
+              }], ngModel: [{
+                  type: i0.ViewChild,
+                  args: [i2.NgModel]
+              }] } });
+
+  exports.BaseInput = BaseInput;
+  exports.InputCalendarComponent = InputCalendarComponent;
+  exports.InputColorComponent = InputColorComponent;
+  exports.InputEmailComponent = InputEmailComponent;
+  exports.InputNumberComponent = InputNumberComponent;
+  exports.InputTextComponent = InputTextComponent;
+
+}));