@wavemaker-ai/app-ng-runtime 1.0.0-rc.647469

package/components/input/text/fesm2022/index.mjs

@@ -0,0 +1,1114 @@
+import * as i0 from '@angular/core';
+import { Inject, Optional, Injectable, Injector, ViewChild, Component } from '@angular/core';
+import { switchClass, $appDigest, addClass, isDefined, AbstractI18nService, FormWidgetType } from '@wm/core';
+import { styler, WidgetConfig, INPUTMODE, TrailingZeroDecimalPipe, PROP_BOOLEAN, PROP_STRING, PROP_ANY, PROP_NUMBER, register, provideAs, provideAsWidgetRef, registerFormWidget } from '@wm/components/base';
+import { BaseFormCustomComponent } from '@wm/components/input/base-form-custom';
+import { isString, get, includes, isUndefined, isNull, round, intersection, toArray } from 'lodash-es';
+import { __decorate, __param, __metadata } from 'tslib';
+import * as i1 from '@angular/common';
+import { getLocaleNumberSymbol, NumberSymbol, CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule, NgModel, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import * as i3 from 'angular-imask';
+import { IMaskModule, IMaskDirective } from 'angular-imask';
+
+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 === 'updateon') {
+            this.ngModelOptions.updateOn = nv === 'default' ? 'change' : 'blur';
+        }
+        if (key === 'class') {
+            if (this.inputEl.nativeElement) {
+                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 && 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 = get(this.imask, 'maskRef.unmaskedValue');
+        val = unMaskedVal ? unMaskedVal : val;
+        this.ngModel.update.next(val);
+        $appDigest();
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        // add the class on the input element
+        if (this.class) {
+            addClass(this.inputEl.nativeElement, this.class);
+        }
+        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.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseInput, deps: [{ token: i0.Injector }, { token: WidgetConfig }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseInput }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseInput, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [WidgetConfig]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: Optional
+                }] }] });
+
+let NumberLocale = class NumberLocale extends BaseInput {
+    constructor(inj, config, i18nService, trailingZeroDecimalPipe, explicitContext) {
+        super(inj, config, explicitContext);
+        this.i18nService = i18nService;
+        this.trailingZeroDecimalPipe = trailingZeroDecimalPipe;
+        this.isDefaultQuery = true;
+        this.decimalValue = '';
+        this.invalidPattern = false;
+        this.selectedLocale = i18nService.getSelectedLocale();
+        this.DECIMAL = getLocaleNumberSymbol(this.localefilter || this.selectedLocale, NumberSymbol.Decimal);
+        this.GROUP = getLocaleNumberSymbol(this.localefilter || this.selectedLocale, 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 (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 = isString(value) && includes(value, this.DECIMAL);
+            const parts = isLocalizedNumber ? value.split(this.DECIMAL) : isString(value) && value.split('.');
+            let decimalPlacesAttrVal = this.getAttr('decimalplaces');
+            const decimalplaces = decimalPlacesAttrVal !== '' && decimalPlacesAttrVal !== undefined ? Number(decimalPlacesAttrVal) : NaN;
+            if (this.inputmode === 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 === 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 === 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 === 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);
+        }
+        if (this.trailingzero) {
+            const regexObj = new RegExp(this.regexPattern);
+            this.invalidPattern = !regexObj.test(this.displayValue);
+        }
+        // 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 === 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 (isDefined(value) && (value !== '' || this.datavalue || this.datavalue == 0)) {
+            if (this.widgetType === "wm-number") {
+                if (this.inputmode == 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 !== 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 === 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 = 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 (isUndefined(proxyModel) || 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 = 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
+                },
+            };
+        }
+        if (this.invalidPattern) {
+            return {
+                pattern: {
+                    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 || 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 === 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 === INPUTMODE.NATURAL && !isNaN(this.decimalplaces)) {
+            if (this.decimalplaces === 0 && this.DECIMAL === $event.key) {
+                return false;
+            }
+            const parts = 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 (includes(inputValue, ',') && inputValue[inputValue.length - 1] === ',' && $event.key === ',') {
+            return false;
+        }
+        // a decimal value can be entered only once in the input.
+        if (includes(inputValue, this.DECIMAL) && $event.key === this.DECIMAL) {
+            return false;
+        }
+        // 'e' can be entered only once in the input.
+        if (intersection(toArray(inputValue), ['e', 'E']).length && includes('eE', $event.key)) {
+            return false;
+        }
+        if ((includes(inputValue, '+') || 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 === INPUTMODE.NATURAL || (this.inputmode === 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 if (key === 'regexp') {
+            this.regexPattern = 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;
+            }
+        }
+    }
+};
+NumberLocale = __decorate([
+    __param(4, Inject('EXPLICIT_CONTEXT')),
+    __param(4, Optional()),
+    __metadata("design:paramtypes", [Injector, Object, AbstractI18nService,
+        TrailingZeroDecimalPipe, Object])
+], NumberLocale);
+
+const inputCalendarTypeProps = new Map([
+    ['autocomplete', { value: true, ...PROP_BOOLEAN }],
+    ['autotrim', { value: true, ...PROP_BOOLEAN }],
+    ['autofocus', PROP_BOOLEAN],
+    ['class', PROP_STRING],
+    ['datasource', PROP_ANY],
+    ['datavalue', PROP_STRING],
+    ['disabled', PROP_BOOLEAN],
+    ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
+    ['maxvalue', PROP_NUMBER],
+    ['minvalue', PROP_NUMBER],
+    ['name', PROP_STRING],
+    ['placeholder', { value: 'Enter text', ...PROP_STRING }],
+    ['readonly', PROP_BOOLEAN],
+    ['required', PROP_BOOLEAN],
+    ['shortcutkey', PROP_STRING],
+    ['show', { value: true, ...PROP_BOOLEAN }],
+    ['step', PROP_NUMBER],
+    ['tabindex', { value: 0, ...PROP_NUMBER }],
+    ['type', PROP_STRING],
+    ['updateon', PROP_STRING],
+    ['conditionalclass', PROP_ANY],
+    ['conditionalstyle', PROP_ANY]
+]);
+const registerProps$4 = () => {
+    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);
+    }
+    ngOnDestroy() {
+        // MEMORY LEAK FIX: Clear ViewChild references
+        this.inputEl = null;
+        this.ngModel = null;
+        // Call parent ngOnDestroy
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputCalendarComponent, deps: [{ token: i0.Injector }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵ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: [
+            provideAs(InputCalendarComponent, NG_VALUE_ACCESSOR, true),
+            provideAs(InputCalendarComponent, NG_VALIDATORS, true),
+            provideAsWidgetRef(InputCalendarComponent)
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "ngModel", first: true, predicate: NgModel, descendants: true }], usesInheritance: true, ngImport: i0, 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: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, FormsModule], selector: 'wm-input[type="date"], wm-input[type="datetime-local"], wm-input[type="month"], wm-input[type="time"], wm-input[type="week"]', providers: [
+                        provideAs(InputCalendarComponent, NG_VALUE_ACCESSOR, true),
+                        provideAs(InputCalendarComponent, NG_VALIDATORS, true),
+                        provideAsWidgetRef(InputCalendarComponent)
+                    ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [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.Injector }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: Optional
+                }] }], propDecorators: { inputEl: [{
+                type: ViewChild,
+                args: ['input', { static: true }]
+            }], ngModel: [{
+                type: ViewChild,
+                args: [NgModel]
+            }] } });
+
+const inputColorTypeProps = new Map([
+    ['autocomplete', { value: true, ...PROP_BOOLEAN }],
+    ['autofocus', PROP_BOOLEAN],
+    ['autotrim', { value: true, ...PROP_BOOLEAN }],
+    ['class', PROP_STRING],
+    ['datavaluesource', PROP_ANY],
+    ['datavalue', PROP_STRING],
+    ['disabled', PROP_BOOLEAN],
+    ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
+    ['name', PROP_STRING],
+    ['placeholder', { value: 'Enter text', ...PROP_STRING }],
+    ['readonly', PROP_BOOLEAN],
+    ['required', PROP_BOOLEAN],
+    ['shortcutkey', PROP_STRING],
+    ['show', { value: true, ...PROP_BOOLEAN }],
+    ['tabindex', { value: 0, ...PROP_NUMBER }],
+    ['type', { value: 'color', ...PROP_STRING }],
+    ['updateon', PROP_STRING],
+    ['conditionalclass', PROP_ANY],
+    ['conditionalstyle', PROP_ANY]
+]);
+const registerProps$3 = () => {
+    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);
+    }
+    ngOnDestroy() {
+        // MEMORY LEAK FIX: Clear ViewChild references
+        this.inputEl = null;
+        this.ngModel = null;
+        // Call parent ngOnDestroy
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputColorComponent, deps: [{ token: i0.Injector }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InputColorComponent, isStandalone: true, selector: "wm-input[type=\"color\"]", providers: [
+            provideAs(InputColorComponent, NG_VALUE_ACCESSOR, true),
+            provideAs(InputColorComponent, NG_VALIDATORS, true),
+            provideAsWidgetRef(InputColorComponent)
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "ngModel", first: true, predicate: NgModel, descendants: true }], usesInheritance: true, ngImport: i0, 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: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputColorComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, FormsModule], selector: 'wm-input[type="color"]', providers: [
+                        provideAs(InputColorComponent, NG_VALUE_ACCESSOR, true),
+                        provideAs(InputColorComponent, NG_VALIDATORS, true),
+                        provideAsWidgetRef(InputColorComponent)
+                    ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       [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.Injector }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: Optional
+                }] }], propDecorators: { inputEl: [{
+                type: ViewChild,
+                args: ['input', { static: true }]
+            }], ngModel: [{
+                type: ViewChild,
+                args: [NgModel]
+            }] } });
+
+const inputEmailTypeProps = new Map([
+    ['autocomplete', { value: true, ...PROP_BOOLEAN }],
+    ['autofocus', PROP_BOOLEAN],
+    ['autotrim', { value: true, ...PROP_BOOLEAN }],
+    ['class', PROP_STRING],
+    ['datavaluesource', PROP_ANY],
+    ['datavalue', PROP_STRING],
+    ['disabled', PROP_BOOLEAN],
+    ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
+    ['maxchars', PROP_NUMBER],
+    ['name', PROP_STRING],
+    ['placeholder', { value: 'Enter text', ...PROP_STRING }],
+    ['readonly', PROP_BOOLEAN],
+    ['regexp', PROP_STRING],
+    ['required', PROP_BOOLEAN],
+    ['shortcutkey', PROP_STRING],
+    ['show', { value: true, ...PROP_BOOLEAN }],
+    ['tabindex', { value: 0, ...PROP_NUMBER }],
+    ['type', { value: 'email', ...PROP_STRING }],
+    ['updateon', PROP_STRING],
+    ['conditionalclass', PROP_ANY],
+    ['conditionalstyle', PROP_ANY]
+]);
+const registerProps$2 = () => {
+    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);
+    }
+    ngOnDestroy() {
+        // MEMORY LEAK FIX: Clear ViewChild references
+        this.inputEl = null;
+        this.ngModel = null;
+        // Call parent ngOnDestroy
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputEmailComponent, deps: [{ token: i0.Injector }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InputEmailComponent, isStandalone: true, selector: "wm-input[type=\"email\"]", providers: [
+            provideAs(InputEmailComponent, NG_VALUE_ACCESSOR, true),
+            provideAs(InputEmailComponent, NG_VALIDATORS, true),
+            provideAsWidgetRef(InputEmailComponent)
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "ngModel", first: true, predicate: NgModel, descendants: true }], usesInheritance: true, ngImport: i0, 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: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputEmailComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, FormsModule], selector: 'wm-input[type="email"]', providers: [
+                        provideAs(InputEmailComponent, NG_VALUE_ACCESSOR, true),
+                        provideAs(InputEmailComponent, NG_VALIDATORS, true),
+                        provideAsWidgetRef(InputEmailComponent)
+                    ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [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.Injector }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: Optional
+                }] }], propDecorators: { inputEl: [{
+                type: ViewChild,
+                args: ['input', { static: true }]
+            }], ngModel: [{
+                type: ViewChild,
+                args: [NgModel]
+            }] } });
+
+const inputNumberTypeProps = new Map([
+    ['autocomplete', { value: true, ...PROP_BOOLEAN }],
+    ['autofocus', PROP_BOOLEAN],
+    ['autotrim', { value: true, ...PROP_BOOLEAN }],
+    ['class', PROP_STRING],
+    ['datavaluesource', PROP_ANY],
+    ['datavalue', PROP_STRING],
+    ['disabled', PROP_BOOLEAN],
+    ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
+    ['maxchars', PROP_NUMBER],
+    ['maxvalue', PROP_NUMBER],
+    ['minvalue', PROP_NUMBER],
+    ['name', PROP_STRING],
+    ['placeholder', { value: 'Enter text', ...PROP_STRING }],
+    ['readonly', PROP_BOOLEAN],
+    ['regexp', PROP_STRING],
+    ['required', PROP_BOOLEAN],
+    ['shortcutkey', PROP_STRING],
+    ['show', { value: true, ...PROP_BOOLEAN }],
+    ['step', PROP_NUMBER],
+    ['tabindex', { value: 0, ...PROP_NUMBER }],
+    ['type', { value: 'number', ...PROP_STRING }],
+    ['updateon', PROP_STRING],
+    ['conditionalclass', PROP_ANY],
+    ['conditionalstyle', PROP_ANY]
+]);
+const registerProps$1 = () => {
+    register('wm-input-number', inputNumberTypeProps);
+};
+
+const inputTextTypeProps = new Map([
+    ['autocomplete', { value: true, ...PROP_BOOLEAN }],
+    ['autofocus', PROP_BOOLEAN],
+    ['autotrim', { value: true, ...PROP_BOOLEAN }],
+    ['class', PROP_STRING],
+    ['datavaluesource', PROP_ANY],
+    ['datavalue', PROP_STRING],
+    ['disabled', PROP_BOOLEAN],
+    ['displayformat', PROP_STRING],
+    ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
+    ['maxchars', PROP_NUMBER],
+    ['name', PROP_STRING],
+    ['placeholder', { value: 'Enter text', ...PROP_STRING }],
+    ['readonly', PROP_BOOLEAN],
+    ['regexp', PROP_STRING],
+    ['required', PROP_BOOLEAN],
+    ['shortcutkey', PROP_STRING],
+    ['show', { value: true, ...PROP_BOOLEAN }],
+    ['showdisplayformaton', { value: 'always', ...PROP_ANY }],
+    ['tabindex', { value: 0, ...PROP_NUMBER }],
+    ['type', { value: 'text', ...PROP_STRING }],
+    ['updateon', PROP_STRING],
+    ['conditionalclass', PROP_ANY],
+    ['conditionalstyle', PROP_ANY],
+    ['trailingiconclass', PROP_STRING],
+    ['leadingiconclass', PROP_STRING]
+]);
+const registerProps = () => {
+    register('wm-input-text', inputTextTypeProps);
+    registerFormWidget(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);
+    registerFormWidget(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 computedClasses() {
+        return { 'with-leading-icon': this.leadingiconclass, 'with-trailing-icon': this.trailingiconclass,
+            ...(typeof this.conditionalclass === 'string' ? { [this.conditionalclass]: true } : this.conditionalclass || {}) };
+    }
+    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;
+    }
+    iconClickEvent($event, type) {
+        this.invokeEventCallback(type, { $event });
+    }
+    ngOnDestroy() {
+        // MEMORY LEAK FIX: Clear all ViewChild references
+        this.inputEl = null;
+        this.ngModel = null;
+        this.imask = null;
+        // Call parent ngOnDestroy (BaseInput → BaseFormCustomComponent → StylableComponent → BaseComponent)
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputTextComponent, deps: [{ token: i0.Injector }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵ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: [
+            provideAs(InputTextComponent, NG_VALUE_ACCESSOR, true),
+            provideAs(InputTextComponent, NG_VALIDATORS, true),
+            provideAsWidgetRef(InputTextComponent)
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "ngModel", first: true, predicate: NgModel, descendants: true }, { propertyName: "imask", first: true, predicate: ["input"], descendants: true, read: IMaskDirective }], usesInheritance: true, ngImport: i0, template: "<button class=\"btn-leading-icon\" type=\"button\" name=\"leadingIcon\" *ngIf=\"leadingiconclass\" (click)=\"iconClickEvent($event, 'leadingiconclick')\">\n       <i aria-hidden=\"true\" [ngClass]=\"leadingiconclass\"></i>\n</button>\n<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]=\"computedClasses\"\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<button class=\"btn-trailing-icon\" type=\"button\" name=\"trailingIcon\" *ngIf=\"trailingiconclass\" (click)=\"iconClickEvent($event, 'trailingiconclick')\">\n       <i aria-hidden=\"true\" [ngClass]=\"trailingiconclass\"></i>\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: IMaskModule }, { kind: "directive", type: i3.IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputTextComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, FormsModule, 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: [
+                        provideAs(InputTextComponent, NG_VALUE_ACCESSOR, true),
+                        provideAs(InputTextComponent, NG_VALIDATORS, true),
+                        provideAsWidgetRef(InputTextComponent)
+                    ], template: "<button class=\"btn-leading-icon\" type=\"button\" name=\"leadingIcon\" *ngIf=\"leadingiconclass\" (click)=\"iconClickEvent($event, 'leadingiconclick')\">\n       <i aria-hidden=\"true\" [ngClass]=\"leadingiconclass\"></i>\n</button>\n<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]=\"computedClasses\"\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<button class=\"btn-trailing-icon\" type=\"button\" name=\"trailingIcon\" *ngIf=\"trailingiconclass\" (click)=\"iconClickEvent($event, 'trailingiconclick')\">\n       <i aria-hidden=\"true\" [ngClass]=\"trailingiconclass\"></i>\n</button>\n" }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: Optional
+                }] }], propDecorators: { inputEl: [{
+                type: ViewChild,
+                args: ['input', { static: true }]
+            }], ngModel: [{
+                type: ViewChild,
+                args: [NgModel]
+            }], imask: [{
+                type: ViewChild,
+                args: ['input', { read: 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;
+        }
+    }
+    ngOnDestroy() {
+        // MEMORY LEAK FIX: Clear ViewChild references
+        this.inputEl = null;
+        this.ngModel = null;
+        // Call parent ngOnDestroy
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputNumberComponent, deps: [{ token: i0.Injector }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InputNumberComponent, isStandalone: true, selector: "wm-input[type=\"number\"]", providers: [
+            provideAs(InputNumberComponent, NG_VALUE_ACCESSOR, true),
+            provideAs(InputNumberComponent, NG_VALIDATORS, true),
+            provideAsWidgetRef(InputNumberComponent)
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "ngModel", first: true, predicate: NgModel, descendants: true }], usesInheritance: true, ngImport: i0, 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: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputNumberComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, FormsModule], selector: 'wm-input[type="number"]', providers: [
+                        provideAs(InputNumberComponent, NG_VALUE_ACCESSOR, true),
+                        provideAs(InputNumberComponent, NG_VALIDATORS, true),
+                        provideAsWidgetRef(InputNumberComponent)
+                    ], template: "<input class=\"form-control app-textbox\"\n       [ngClass]=\"{'step-hidden': step === 0}\"\n       focus-target\n       [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.Injector }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: Optional
+                }] }], propDecorators: { inputEl: [{
+                type: ViewChild,
+                args: ['input', { static: true }]
+            }], ngModel: [{
+                type: ViewChild,
+                args: [NgModel]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BaseInput, InputCalendarComponent, InputColorComponent, InputEmailComponent, InputNumberComponent, InputTextComponent, NumberLocale };
+//# sourceMappingURL=index.mjs.map