@syncfusion/ej2-inputs 31.1.17 → 31.1.20

package/dist/ts/numerictextbox/numerictextbox.ts

@@ -1,1672 +0,0 @@
-import { Component, EventHandler, Property, Event, Browser, L10n, EmitType, getUniqueID } from '@syncfusion/ej2-base';
-import { NotifyPropertyChanges, INotifyPropertyChanged, BaseEventArgs } from '@syncfusion/ej2-base';
-import { attributes, addClass, removeClass, detach, closest } from '@syncfusion/ej2-base';
-import { isNullOrUndefined, getValue, formatUnit, setValue, merge } from '@syncfusion/ej2-base';
-import { Internationalization, NumberFormatOptions, getNumericObject } from '@syncfusion/ej2-base';
-import { NumericTextBoxModel } from './numerictextbox-model';
-import { Input, InputObject, FloatLabelType } from '../input/input';
-
-
-const ROOT: string = 'e-control-wrapper e-numeric';
-const SPINICON: string = 'e-input-group-icon';
-const SPINUP: string = 'e-spin-up';
-const SPINDOWN: string = 'e-spin-down';
-const ERROR: string = 'e-error';
-const INCREMENT: string = 'increment';
-const DECREMENT: string = 'decrement';
-const INTREGEXP: RegExp = new RegExp('^(-)?(\\d*)$');
-const DECIMALSEPARATOR: string = '.';
-const COMPONENT: string = 'e-numerictextbox';
-const CONTROL: string = 'e-control';
-const NUMERIC_FOCUS: string = 'e-input-focus';
-const HIDDENELEMENT: string = 'e-numeric-hidden';
-const wrapperAttributes: string[] = ['title', 'style', 'class'];
-let selectionTimeOut: number = 0;
-
-/**
- * Represents the NumericTextBox component that allows the user to enter only numeric values.
- * ```html
- * <input type='text' id="numeric"/>
- * ```
- * ```typescript
- * <script>
- *   var numericObj = new NumericTextBox({ value: 10 });
- *   numericObj.appendTo("#numeric");
- * </script>
- * ```
- */
-
-@NotifyPropertyChanges
-export class NumericTextBox extends Component<HTMLInputElement> implements INotifyPropertyChanged {
-
-    /* Internal variables */
-    private container: HTMLElement;
-    private inputWrapper: InputObject;
-    private cloneElement: HTMLElement;
-    private hiddenInput: HTMLInputElement;
-    private spinUp: HTMLElement;
-    private spinDown: HTMLElement;
-    private formEle: HTMLElement;
-    private inputEleValue: number;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    private timeOut: any;
-    private prevValue: number;
-    private isValidState: boolean;
-    private isFocused: boolean;
-    private isPrevFocused: boolean;
-    private instance: Internationalization;
-    private cultureInfo: NumberFormatOptions;
-    private inputStyle: string;
-    private inputName: string;
-    private decimalSeparator: string;
-    private angularTagName: string;
-    private intRegExp: RegExp;
-    private l10n: L10n;
-    private isCalled: boolean;
-    private prevVal: string;
-    private nextEle: string;
-    private cursorPosChanged: boolean;
-    private changeEventArgs: ChangeEventArgs;
-    private focusEventArgs: NumericFocusEventArgs;
-    private blurEventArgs: NumericBlurEventArgs;
-    private numericOptions: NumericTextBoxModel;
-    private isInteract: boolean;
-    private serverDecimalSeparator: string;
-    private preventChange: boolean = false;
-    private elementPrevValue: string;
-    private isDynamicChange: boolean = false;
-    private inputValue: number;
-    private clearButton: HTMLElement;
-
-    /*NumericTextBox Options */
-
-    /**
-     * Gets or Sets the CSS classes to root element of the NumericTextBox which helps to customize the
-     * complete UI styles for the NumericTextBox component.
-     *
-     * @default null
-     */
-    @Property('')
-    public cssClass: string;
-
-    /**
-     * Sets the value of the NumericTextBox.
-     *
-     * @default null
-     * @aspType object
-     * @isGenericType true
-     */
-    @Property(null)
-    public value: number;
-
-    /**
-     * Specifies a minimum value that is allowed a user can enter.
-     * For more information on min, refer to
-     * [min](../../numerictextbox/getting-started/#range-validation).
-     *
-     * @default null
-     * @aspType object
-     * @isGenericType true
-     * @deprecated
-     */
-    @Property(-(Number.MAX_VALUE))
-    public min: number;
-
-    /**
-     * Specifies a maximum value that is allowed a user can enter.
-     * For more information on max, refer to
-     * [max](../../numerictextbox/getting-started/#range-validation).
-     *
-     * @default null
-     * @aspType object
-     * @isGenericType true
-     * @deprecated
-     */
-    @Property(Number.MAX_VALUE)
-    public max: number;
-
-    /**
-     * Specifies the incremental or decremental step size for the NumericTextBox.
-     * For more information on step, refer to
-     * [step](../../numerictextbox/getting-started/#range-validation).
-     *
-     * @default 1
-     * @isGenericType true
-     */
-    @Property(1)
-    public step: number;
-
-    /**
-     * Specifies the width of the NumericTextBox.
-     *
-     * @default null
-     */
-    @Property(null)
-    public width: number | string;
-
-    /**
-     * Gets or sets the string shown as a hint/placeholder when the NumericTextBox is empty.
-     * It acts as a label and floats above the NumericTextBox based on the
-     * <b><a href="#floatlabeltype" target="_blank">floatLabelType.</a></b>
-     *
-     * @default null
-     */
-    @Property(null)
-    public placeholder: string;
-
-    /**
-     * You can add the additional html attributes such as disabled, value etc., to the element.
-     * If you configured both property and equivalent html attribute then the component considers the property value.
-     * {% codeBlock src='numerictextbox/htmlAttributes/index.md' %}{% endcodeBlock %}
-     *
-     * @default {}
-     */
-    @Property({})
-    public htmlAttributes: { [key: string]: string };
-
-    /**
-     * Specifies whether the up and down spin buttons should be displayed in NumericTextBox.
-     *
-     * @default true
-     */
-    @Property(true)
-    public showSpinButton: boolean;
-
-    /**
-     * Sets a value that enables or disables the readonly state on the NumericTextBox. If it is true,
-     * NumericTextBox will not allow your input.
-     *
-     * @default false
-     */
-    @Property(false)
-    public readonly: boolean;
-
-    /**
-     * Sets a value that enables or disables the NumericTextBox control.
-     *
-     * @default true
-     */
-    @Property(true)
-    public enabled: boolean;
-
-    /**
-     * Specifies whether to show or hide the clear icon.
-     *
-     * @default false
-     */
-    @Property(false)
-    public showClearButton: boolean;
-
-    /**
-     * Enable or disable persisting NumericTextBox state between page reloads. If enabled, the `value` state will be persisted.
-     *
-     * @default false
-     */
-    @Property(false)
-    public enablePersistence: boolean;
-
-    /**
-     * Specifies the number format that indicates the display format for the value of the NumericTextBox.
-     * For more information on formats, refer to
-     * [formats](../../numerictextbox/formats/#standard-formats).
-     *
-     * @default 'n2'
-     */
-    @Property('n2')
-    public format: string;
-
-    /**
-     * Specifies the number precision applied to the textbox value when the NumericTextBox is focused.
-     * For more information on decimals, refer to
-     * [decimals](../../numerictextbox/formats/#precision-of-numbers).
-     *
-     * @default null
-     */
-    @Property(null)
-    public decimals: number;
-
-    /**
-     * Specifies the currency code to use in currency formatting.
-     * Possible values are the ISO 4217 currency codes, such as 'USD' for the US dollar,'EUR' for the euro.
-     *
-     * @default null
-     */
-    @Property(null)
-    public currency: string;
-
-    /**
-     * Specifies the currency code to use in currency formatting.
-     * Possible values are the ISO 4217 currency codes, such as 'USD' for the US dollar,'EUR' for the euro.
-     *
-     * @default null
-     * @private
-     */
-    @Property(null)
-    private currencyCode: string;
-
-    /**
-     * Specifies a value that indicates whether the NumericTextBox control allows the value for the specified range.
-     * If it is true, the input value will be restricted between the min and max range.
-     * The typed value gets modified to fit the range on focused out state.
-     * Else, it allows any value even out of range value,
-     * At that time of wrong value entered, the error class will be added to the component to highlight the error.
-     * {% codeBlock src='numerictextbox/strictMode/index.md' %}{% endcodeBlock %}
-     *
-     * @default true
-     */
-    @Property(true)
-    public strictMode: boolean;
-
-    /**
-     * Specifies whether the decimals length should be restricted during typing.
-     *
-     * @default false
-     */
-    @Property(false)
-    public validateDecimalOnType: boolean;
-
-    /**
-     * The <b><a href="#placeholder" target="_blank">placeholder</a></b> acts as a label
-     * and floats above the NumericTextBox based on the below values.
-     * Possible values are:
-     * * `Never` - Never floats the label in the NumericTextBox when the placeholder is available.
-     * * `Always` - The floating label always floats above the NumericTextBox.
-     * * `Auto` - The floating label floats above the NumericTextBox after focusing it or when enters the value in it.
-     *
-     * @default Never
-     */
-    @Property('Never')
-    public floatLabelType: FloatLabelType;
-
-    /**
-     * Triggers when the NumericTextBox component is created.
-     *
-     * @event created
-     */
-    @Event()
-    public created: EmitType<Object>;
-
-    /**
-     * Triggers when the NumericTextBox component is destroyed.
-     *
-     * @event destroyed
-     */
-    @Event()
-    public destroyed: EmitType<Object>;
-
-    /**
-     * Triggers when the value of the NumericTextBox changes.
-     * The change event of the NumericTextBox component will be triggered in the following scenarios:
-     * * Changing the previous value using keyboard interaction and then focusing out of the component.
-     * * Focusing on the component and scrolling within the input.
-     * * Changing the value using the spin buttons.
-     * * Programmatically changing the value using the value property.
-     *
-     * @event change
-     */
-    @Event()
-    public change: EmitType<ChangeEventArgs>;
-
-    /**
-     * Triggers when the NumericTextBox got focus in.
-     *
-     * @event focus
-     */
-    @Event()
-    public focus: EmitType<NumericFocusEventArgs>;
-
-    /**
-     * Triggers when the NumericTextBox got focus out.
-     *
-     * @event blur
-     */
-    @Event()
-    public blur: EmitType<NumericBlurEventArgs>;
-
-    /**
-     *
-     * @param {NumericTextBoxModel} options - Specifies the NumericTextBox model.
-     * @param {string | HTMLInputElement} element - Specifies the element to render as component.
-     * @private
-     */
-    public constructor(options?: NumericTextBoxModel, element?: string | HTMLInputElement) {
-        super(options, <HTMLInputElement | string>element);
-        this.numericOptions = options;
-    }
-
-    protected preRender(): void {
-        this.isPrevFocused = false;
-        this.decimalSeparator = '.';
-        // eslint-disable-next-line no-useless-escape
-        this.intRegExp = new RegExp('/^(-)?(\d*)$/');
-        this.isCalled = false;
-        const ejInstance: Object = getValue('ej2_instances', this.element);
-        this.cloneElement = <HTMLElement>this.element.cloneNode(true);
-        removeClass([this.cloneElement], [CONTROL, COMPONENT, 'e-lib']);
-        this.angularTagName = null;
-        this.formEle = <HTMLFormElement>closest(this.element, 'form');
-        if (this.element.tagName === 'EJS-NUMERICTEXTBOX') {
-            this.angularTagName = this.element.tagName;
-            const input: HTMLElement = this.createElement('input');
-            let index: number = 0;
-            for (index; index < this.element.attributes.length; index++) {
-                const attributeName: string = this.element.attributes[index as number].nodeName;
-                if (attributeName !== 'id' && attributeName !== 'class') {
-                    input.setAttribute(this.element.attributes[index as number].nodeName,
-                                       this.element.attributes[index as number].nodeValue);
-                    input.innerHTML = this.element.innerHTML;
-                }
-                else if (attributeName === 'class') {
-                    input.setAttribute(attributeName, this.element.className.split(' ').filter((item: string) => item.indexOf('ng-') !== 0).join(' '));
-                }
-            }
-            if (this.element.hasAttribute('name')) {
-                this.element.removeAttribute('name');
-            }
-            this.element.classList.remove('e-control', 'e-numerictextbox');
-            this.element.appendChild(input);
-            this.element = <HTMLInputElement>input;
-            setValue('ej2_instances', ejInstance, this.element);
-
-        }
-        attributes(this.element, { 'role': 'spinbutton', 'tabindex': '0', 'autocomplete': 'off'});
-        const localeText: object = {
-            incrementTitle: 'Increment value', decrementTitle: 'Decrement value', placeholder: this.placeholder
-        };
-        this.l10n = new L10n('numerictextbox', localeText, this.locale);
-        if (this.l10n.getConstant('placeholder') !== '') {
-            this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);
-        }
-        if (!this.element.hasAttribute('id')) {
-            this.element.setAttribute('id', getUniqueID('numerictextbox'));
-        }
-        this.isValidState = true;
-        this.inputStyle = null;
-        this.inputName = null;
-        this.cultureInfo = {};
-        this.initCultureInfo();
-        this.initCultureFunc();
-        this.prevValue = this.value;
-        this.updateHTMLAttrToElement();
-        this.checkAttributes(false);
-        if (this.formEle) {
-            this.inputEleValue = this.value;
-        }
-        this.validateMinMax();
-        this.validateStep();
-        if (this.placeholder === null) {
-            this.updatePlaceholder();
-        }
-    }
-
-    /**
-     * To Initialize the control rendering
-     *
-     * @returns {void}
-     * @private
-     */
-    public render(): void {
-        if (this.element.tagName.toLowerCase() === 'input') {
-            this.createWrapper();
-            if (this.showSpinButton) {
-                this.spinBtnCreation();
-            }
-            this.setElementWidth(this.width);
-            if (!this.container.classList.contains('e-input-group')) {
-                this.container.classList.add('e-input-group');
-            }
-            this.changeValue(this.value === null || isNaN(this.value) ?
-                null : this.strictMode ? this.trimValue(this.value) : this.value);
-            this.wireEvents();
-            if (this.value !== null && !isNaN(this.value)) {
-                if (this.decimals) {
-                    this.setProperties({ value: this.roundNumber(this.value, this.decimals) }, true);
-                }
-            }
-            if (this.element.getAttribute('value') || this.value) {
-                this.element.setAttribute('value', this.element.value);
-                this.hiddenInput.setAttribute('value', this.hiddenInput.value);
-            }
-            this.elementPrevValue = this.element.value;
-            if (this.element.hasAttribute('data-val')) {
-                this.element.setAttribute('data-val', 'false');
-            }
-            if (!this.element.hasAttribute('aria-labelledby') && !this.element.hasAttribute('placeholder') && !this.element.hasAttribute('aria-label')) {
-                this.element.setAttribute('aria-label', 'numerictextbox');
-            }
-            if (!isNullOrUndefined(closest(this.element, 'fieldset') as HTMLFieldSetElement) && (closest(this.element, 'fieldset') as HTMLFieldSetElement).disabled) {
-                this.enabled = false;
-            }
-            this.renderComplete();
-        }
-    }
-
-    private checkAttributes(isDynamic: boolean): void {
-        const attributes: string[] = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :
-            ['value', 'min', 'max', 'step', 'disabled', 'readonly', 'style', 'name', 'placeholder'];
-        for (const prop of attributes) {
-            if (!isNullOrUndefined(this.element.getAttribute(prop))) {
-                switch (prop) {
-                case 'disabled':
-                    if (( isNullOrUndefined(this.numericOptions) || (this.numericOptions['enabled'] === undefined)) || isDynamic) {
-                        const enabled: boolean = this.element.getAttribute(prop) === 'disabled' || this.element.getAttribute(prop) === ''
-                                || this.element.getAttribute(prop) === 'true' ? false : true;
-                        this.setProperties({ enabled: enabled }, !isDynamic);
-                    }
-                    break;
-                case 'readonly':
-                    if (( isNullOrUndefined(this.numericOptions) || (this.numericOptions['readonly'] === undefined)) || isDynamic) {
-                        const readonly: boolean = this.element.getAttribute(prop) === 'readonly' || this.element.getAttribute(prop) === ''
-                                || this.element.getAttribute(prop) === 'true' ? true : false;
-                        this.setProperties({ readonly: readonly }, !isDynamic);
-                    }
-                    break;
-                case 'placeholder':
-                    if (( isNullOrUndefined(this.numericOptions) || (this.numericOptions['placeholder'] === undefined)) || isDynamic) {
-                        this.setProperties({placeholder: this.element.placeholder}, !isDynamic);
-                    }
-                    break;
-                case 'value':
-                    if (( isNullOrUndefined(this.numericOptions) || (this.numericOptions['value'] === undefined)) || isDynamic){
-                        const setNumber: number = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));
-                        this.setProperties(setValue(prop, setNumber, {}), !isDynamic);
-                    }
-                    break;
-                case 'min':
-                    if (( isNullOrUndefined(this.numericOptions) || (this.numericOptions['min'] === undefined)) || isDynamic) {
-                        const minValue: number = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));
-                        if (minValue !== null && !isNaN(minValue)) {
-                            this.setProperties(setValue(prop, minValue, {}), !isDynamic);
-                        }
-                    }
-                    break;
-                case 'max':
-                    if (( isNullOrUndefined(this.numericOptions) || (this.numericOptions['max'] === undefined)) || isDynamic) {
-                        const maxValue: number = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));
-                        if (maxValue !== null && !isNaN(maxValue)) {
-                            this.setProperties(setValue(prop, maxValue, {}), !isDynamic);
-                        }
-                    }
-                    break;
-                case 'step':
-                    if (( isNullOrUndefined(this.numericOptions) || (this.numericOptions['step'] === undefined)) || isDynamic) {
-                        const stepValue: number = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));
-                        if (stepValue !== null && !isNaN(stepValue)) {
-                            this.setProperties(setValue(prop, stepValue, {}), !isDynamic);
-                        }
-                    }
-                    break;
-                case 'style':
-                    this.inputStyle = this.element.getAttribute(prop);
-                    break;
-                case 'name':
-                    this.inputName = this.element.getAttribute(prop);
-                    break;
-                default: {
-                    const value: number = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));
-                    if ((value !== null && !isNaN(value)) || (prop === 'value')) {
-                        this.setProperties(setValue(prop, value, {}), true);
-                    }
-                }
-                    break;
-                }
-            }
-        }
-    }
-
-    private updatePlaceholder(): void {
-        this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);
-    }
-
-    private initCultureFunc(): void {
-        this.instance = new Internationalization(this.locale);
-    }
-
-    private initCultureInfo(): void {
-        this.cultureInfo.format = this.format;
-        if (getValue('currency', this) !== null) {
-            setValue('currency', this.currency, this.cultureInfo);
-            this.setProperties({ currencyCode: this.currency }, true);
-        }
-    }
-
-    /* Wrapper creation */
-    private createWrapper(): void {
-        let updatedCssClassValue: string = this.cssClass;
-        if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
-            updatedCssClassValue = this.getNumericValidClassList(this.cssClass);
-        }
-        const inputObj: InputObject = Input.createInput(
-            {
-                element: this.element,
-                floatLabelType: this.floatLabelType,
-                properties: {
-                    readonly: this.readonly,
-                    placeholder: this.placeholder,
-                    cssClass: updatedCssClassValue,
-                    enableRtl: this.enableRtl,
-                    showClearButton: this.showClearButton,
-                    enabled: this.enabled
-                }
-            },
-            this.createElement
-        );
-        this.inputWrapper = inputObj;
-        this.container = inputObj.container;
-        this.container.setAttribute('class', ROOT + ' ' + this.container.getAttribute('class'));
-        this.updateHTMLAttrToWrapper();
-        if (this.readonly) {
-            attributes(this.element, { 'aria-readonly': 'true' });
-        }
-        this.hiddenInput = <HTMLInputElement>(this.createElement('input', { attrs: { type: 'text',
-            'data-validateHidden': 'true', 'aria-label': 'hidden', 'class': HIDDENELEMENT } }));
-        this.inputName = this.inputName !== null ? this.inputName : this.element.id;
-        this.element.removeAttribute('name');
-        if (this.isAngular && this.angularTagName === 'EJS-NUMERICTEXTBOX' && this.cloneElement.id.length > 0) {
-            attributes(this.hiddenInput, { 'name': this.cloneElement.id });
-        } else {
-            attributes(this.hiddenInput, { 'name': this.inputName });
-        }
-        this.container.insertBefore(this.hiddenInput, this.container.childNodes[1]);
-        this.updateDataAttribute(false);
-        if (this.inputStyle !== null) {
-            attributes(this.container, { 'style': this.inputStyle });
-        }
-    }
-    private updateDataAttribute(isDynamic: boolean) : void {
-        let attr: { [key: string]: string } = {};
-        if (!isDynamic) {
-            for (let a: number = 0; a < this.element.attributes.length; a++) {
-                attr[this.element.attributes[a as number].name] = this.element.getAttribute(this.element.attributes[a as number].name);
-            }
-        } else {
-            attr = this.htmlAttributes;
-        }
-        for (const key of Object.keys(attr)) {
-            if (key.indexOf('data') === 0 ) {
-                this.hiddenInput.setAttribute(key, attr[`${key}`]);
-            }
-        }
-    }
-    private updateHTMLAttrToElement(): void {
-        if ( !isNullOrUndefined(this.htmlAttributes)) {
-            for (const pro of Object.keys(this.htmlAttributes)) {
-                if (wrapperAttributes.indexOf(pro) < 0 ) {
-                    this.element.setAttribute(pro, this.htmlAttributes[`${pro}`]);
-                }
-            }
-        }
-    }
-    private updateCssClass(newClass : string, oldClass : string) : void {
-        Input.setCssClass(this.getNumericValidClassList(newClass), [this.container], this.getNumericValidClassList(oldClass));
-    }
-    private getNumericValidClassList(numericClassName: string): string {
-        let result: string = numericClassName;
-        if (!isNullOrUndefined(numericClassName) && numericClassName !== '') {
-            result = (numericClassName.replace(/\s+/g, ' ')).trim();
-        }
-        return result;
-    }
-    private updateHTMLAttrToWrapper(): void {
-        if ( !isNullOrUndefined(this.htmlAttributes)) {
-            for (const pro of Object.keys(this.htmlAttributes)) {
-                if (wrapperAttributes.indexOf(pro) > -1 ) {
-                    if (pro === 'class') {
-                        const updatedClassValue : string = this.getNumericValidClassList(this.htmlAttributes[`${pro}`]);
-                        if (updatedClassValue !== '') {
-                            addClass([this.container], updatedClassValue.split(' '));
-                        }
-                    } else if (pro === 'style') {
-                        let numericStyle: string = this.container.getAttribute(pro);
-                        numericStyle = !isNullOrUndefined(numericStyle) ? (numericStyle + this.htmlAttributes[`${pro}`]) :
-                            this.htmlAttributes[`${pro}`];
-                        this.container.setAttribute(pro, numericStyle);
-                    } else {
-                        this.container.setAttribute(pro, this.htmlAttributes[`${pro}`]);
-                    }
-                }
-            }
-        }
-    }
-
-    private setElementWidth(width: number | string): void {
-        if (!isNullOrUndefined(width)) {
-            if (typeof width === 'number') {
-                this.container.style.width = formatUnit(width);
-            } else if (typeof width === 'string') {
-                this.container.style.width = (width.match(/px|%|em/)) ? <string>(width) : <string>(formatUnit(width));
-            }
-        }
-    }
-
-    /* Spinner creation */
-    private spinBtnCreation(): void {
-        this.spinDown = Input.appendSpan(SPINICON + ' ' + SPINDOWN, this.container, this.createElement);
-        attributes(this.spinDown, {
-            'title': this.l10n.getConstant('decrementTitle')
-        });
-        this.spinUp = Input.appendSpan(SPINICON + ' ' + SPINUP, this.container, this.createElement);
-        attributes(this.spinUp, {
-            'title': this.l10n.getConstant('incrementTitle')
-        });
-        this.wireSpinBtnEvents();
-    }
-
-    private validateMinMax(): void {
-        if (!(typeof (this.min) === 'number' && !isNaN(this.min))) {
-            this.setProperties({ min: -(Number.MAX_VALUE) }, true);
-        }
-        if (!(typeof (this.max) === 'number' && !isNaN(this.max))) {
-            this.setProperties({ max: Number.MAX_VALUE }, true);
-        }
-        if (this.decimals !== null) {
-            if (this.min !== -(Number.MAX_VALUE)) {
-                this.setProperties(
-                    { min: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.min)) }, true);
-            }
-            if (this.max !== (Number.MAX_VALUE)) {
-                this.setProperties(
-                    { max: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.max)) }, true);
-            }
-        }
-        this.setProperties({ min: this.min > this.max ? this.max : this.min }, true);
-        if (this.min !== -(Number.MAX_VALUE)){
-            attributes(this.element, { 'aria-valuemin': this.min.toString()});
-        }
-        if (this.max !== (Number.MAX_VALUE)) {
-            attributes(this.element, { 'aria-valuemax': this.max.toString() });
-        }
-    }
-
-    private formattedValue(decimals: number, value: number): string {
-        return this.instance.getNumberFormat({
-            maximumFractionDigits: decimals,
-            minimumFractionDigits: decimals, useGrouping: false
-        })(value);
-    }
-
-    private validateStep(): void {
-        if (this.decimals !== null) {
-            this.setProperties({ step: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.step)) }, true);
-        }
-    }
-
-    private action(operation: string, event: Event): void {
-        this.isInteract = true;
-        const value: number = this.isFocused ? this.instance.getNumberParser({ format: 'n' })(this.element.value) : this.value;
-        this.changeValue(this.performAction(value, this.step, operation));
-        this.raiseChangeEvent(event);
-    }
-
-    private checkErrorClass(): void {
-        if (this.isValidState) {
-            removeClass([this.container], ERROR);
-        } else {
-            addClass([this.container], ERROR);
-        }
-        attributes(this.element, { 'aria-invalid': this.isValidState ? 'false' : 'true' });
-    }
-
-    private bindClearEvent(): void {
-        if (this.showClearButton) {
-            EventHandler.add(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler, this);
-        }
-    }
-    protected resetHandler(e?: MouseEvent): void {
-        e.preventDefault();
-        if (!(this.inputWrapper.clearButton.classList.contains('e-clear-icon-hide')) || this.inputWrapper.container.classList.contains('e-static-clear')) {
-            this.clear(e);
-        }
-        this.isInteract = true;
-        this.raiseChangeEvent(e);
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    private clear(event: MouseEvent): void {
-        this.setProperties({ value: null }, true);
-        this.setElementValue('');
-        this.hiddenInput.value = '';
-        const formElement: Element = closest(this.element, 'form');
-        if (formElement) {
-            const element: Element = this.element.nextElementSibling;
-            const keyupEvent: KeyboardEvent = document.createEvent('KeyboardEvent');
-            keyupEvent.initEvent('keyup', false, true);
-            element.dispatchEvent(keyupEvent);
-        }
-    }
-
-    protected resetFormHandler(): void {
-        if (this.element.tagName === 'EJS-NUMERICTEXTBOX') {
-            this.updateValue(null);
-        } else {
-            this.updateValue(this.inputEleValue);
-        }
-    }
-
-    private setSpinButton(): void {
-        if (!isNullOrUndefined(this.spinDown)) {
-            attributes(this.spinDown, {
-                'title': this.l10n.getConstant('decrementTitle'),
-                'aria-label': this.l10n.getConstant('decrementTitle')
-            });
-        }
-        if (!isNullOrUndefined(this.spinUp)) {
-            attributes(this.spinUp, {
-                'title': this.l10n.getConstant('incrementTitle'),
-                'aria-label': this.l10n.getConstant('incrementTitle')
-            });
-        }
-    }
-
-    private wireEvents(): void {
-        EventHandler.add(this.element, 'focus', this.focusHandler, this);
-        EventHandler.add(this.element, 'blur', this.focusOutHandler, this);
-        EventHandler.add(this.element, 'keydown', this.keyDownHandler, this);
-        EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);
-        EventHandler.add(this.element, 'input', this.inputHandler, this);
-        EventHandler.add(this.element, 'keypress', this.keyPressHandler, this);
-        EventHandler.add(this.element, 'change', this.changeHandler, this);
-        EventHandler.add(this.element, 'paste', this.pasteHandler, this);
-        if (this.enabled) {
-            this.bindClearEvent();
-            if (this.formEle) {
-                EventHandler.add(this.formEle, 'reset', this.resetFormHandler, this);
-            }
-        }
-    }
-
-    private wireSpinBtnEvents(): void {
-        /* bind spin button events */
-        EventHandler.add(this.spinUp, Browser.touchStartEvent, this.mouseDownOnSpinner, this);
-        EventHandler.add(this.spinDown, Browser.touchStartEvent, this.mouseDownOnSpinner, this);
-        EventHandler.add(this.spinUp, Browser.touchEndEvent, this.mouseUpOnSpinner, this);
-        EventHandler.add(this.spinDown, Browser.touchEndEvent, this.mouseUpOnSpinner, this);
-        EventHandler.add(this.spinUp, Browser.touchMoveEvent, this.touchMoveOnSpinner, this);
-        EventHandler.add(this.spinDown, Browser.touchMoveEvent, this.touchMoveOnSpinner, this);
-    }
-
-    private unwireEvents(): void {
-        EventHandler.remove(this.element, 'focus', this.focusHandler);
-        EventHandler.remove(this.element, 'blur', this.focusOutHandler);
-        EventHandler.remove(this.element, 'keyup', this.keyUpHandler);
-        EventHandler.remove(this.element, 'input', this.inputHandler);
-        EventHandler.remove(this.element, 'keydown', this.keyDownHandler);
-        EventHandler.remove(this.element, 'keypress', this.keyPressHandler);
-        EventHandler.remove(this.element, 'change', this.changeHandler);
-        EventHandler.remove(this.element, 'paste', this.pasteHandler);
-        if (this.formEle) {
-            EventHandler.remove(this.formEle, 'reset', this.resetFormHandler);
-        }
-    }
-
-    private unwireSpinBtnEvents(): void {
-        /* unbind spin button events */
-        EventHandler.remove(this.spinUp, Browser.touchStartEvent, this.mouseDownOnSpinner);
-        EventHandler.remove(this.spinDown, Browser.touchStartEvent, this.mouseDownOnSpinner);
-        EventHandler.remove(this.spinUp, Browser.touchEndEvent, this.mouseUpOnSpinner);
-        EventHandler.remove(this.spinDown, Browser.touchEndEvent, this.mouseUpOnSpinner);
-        EventHandler.remove(this.spinUp, Browser.touchMoveEvent, this.touchMoveOnSpinner);
-        EventHandler.remove(this.spinDown, Browser.touchMoveEvent, this.touchMoveOnSpinner);
-    }
-
-    private changeHandler(event: Event): void {
-        event.stopPropagation();
-        if (!this.element.value.length) {
-            this.setProperties({ value: null }, true);
-        }
-        const parsedInput: number = this.instance.getNumberParser({ format: 'n' })(this.element.value);
-        this.updateValue(parsedInput, event);
-    }
-
-    private raiseChangeEvent(event?: Event): void {
-        this.inputValue = (isNullOrUndefined(this.inputValue) || isNaN(this.inputValue)) ? null : this.inputValue;
-        if (this.prevValue !== this.value || this.prevValue !== this.inputValue) {
-            const eventArgs: Object = {};
-            this.changeEventArgs = { value: this.value, previousValue: this.prevValue, isInteracted: this.isInteract,
-                isInteraction: this.isInteract, event: event };
-            if (event) {
-                this.changeEventArgs.event = event;
-            }
-            if (this.changeEventArgs.event === undefined) {
-                this.changeEventArgs.isInteracted = false;
-                this.changeEventArgs.isInteraction = false;
-            }
-            merge(eventArgs, this.changeEventArgs);
-            this.prevValue = this.value;
-            this.isInteract = false;
-            this.elementPrevValue = this.element.value;
-            this.preventChange = false;
-            this.trigger('change', eventArgs);
-        }
-    }
-
-    private pasteHandler(): void {
-        if (!this.enabled || this.readonly) {
-            return;
-        }
-        const beforeUpdate: string = this.element.value;
-        setTimeout(() => {
-            if (!this.numericRegex().test(this.element.value)) {
-                this.setElementValue(beforeUpdate);
-            }
-        });
-    }
-
-    private preventHandler(): void {
-        const iOS: boolean = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
-        setTimeout(() => {
-            if (this.element.selectionStart > 0) {
-                const currentPos: number = this.element.selectionStart;
-                const prevPos: number = this.element.selectionStart - 1;
-                const start: number = 0;
-                const valArray: string[] = this.element.value.split('');
-                const numericObject: Object = getNumericObject(this.locale);
-                const decimalSeparator: string = getValue('decimal', numericObject);
-                const ignoreKeyCode: number = decimalSeparator.charCodeAt(0);
-                if (this.element.value[prevPos as number] === ' ' && this.element.selectionStart > 0 && !iOS) {
-                    if (isNullOrUndefined(this.prevVal)) {
-                        this.element.value = this.element.value.trim();
-                    } else if (prevPos !== 0) {
-                        this.element.value = this.prevVal;
-                    } else if (prevPos === 0) {
-                        this.element.value = this.element.value.trim();
-                    }
-                    this.element.setSelectionRange(prevPos, prevPos);
-                } else if (isNaN(parseFloat(this.element.value[this.element.selectionStart - 1])) &&
-                        this.element.value[this.element.selectionStart - 1].charCodeAt(0) !== 45) {
-                    if ((valArray.indexOf(this.element.value[this.element.selectionStart - 1]) !==
-                            valArray.lastIndexOf(this.element.value[this.element.selectionStart - 1]) &&
-                            this.element.value[this.element.selectionStart - 1].charCodeAt(0) === ignoreKeyCode) ||
-                            this.element.value[this.element.selectionStart - 1].charCodeAt(0) !== ignoreKeyCode) {
-                        this.element.value = this.element.value.substring(0, prevPos) +
-                            this.element.value.substring(currentPos, this.element.value.length);
-                        this.element.setSelectionRange(prevPos, prevPos);
-                        if (isNaN(parseFloat(this.element.value[this.element.selectionStart - 1])) && this.element.selectionStart > 0
-                                && this.element.value.length) {
-                            this.preventHandler();
-                        }
-                    }
-                } else if (isNaN(parseFloat(this.element.value[this.element.selectionStart - 2])) && this.element.selectionStart > 1 &&
-                        this.element.value[this.element.selectionStart - 2].charCodeAt(0) !== 45) {
-                    if ((valArray.indexOf(this.element.value[this.element.selectionStart - 2]) !==
-                            valArray.lastIndexOf(this.element.value[this.element.selectionStart - 2]) &&
-                            this.element.value[this.element.selectionStart - 2].charCodeAt(0) === ignoreKeyCode) ||
-                            this.element.value[this.element.selectionStart - 2].charCodeAt(0) !== ignoreKeyCode) {
-                        this.element.setSelectionRange(prevPos, prevPos);
-                        this.nextEle = this.element.value[this.element.selectionStart];
-                        this.cursorPosChanged = true;
-                        this.preventHandler();
-                    }
-                }
-                if (this.cursorPosChanged === true && this.element.value[this.element.selectionStart] === this.nextEle &&
-                        isNaN(parseFloat(this.element.value[this.element.selectionStart - 1]))) {
-                    this.element.setSelectionRange(this.element.selectionStart + 1, this.element.selectionStart + 1);
-                    this.cursorPosChanged = false;
-                    this.nextEle = null;
-                }
-                if (this.element.value.trim() === '') {
-                    this.element.setSelectionRange(start, start);
-                }
-                if (this.element.selectionStart > 0) {
-                    if ((this.element.value[this.element.selectionStart - 1].charCodeAt(0) === 45) && this.element.selectionStart > 1) {
-                        if (!isNullOrUndefined(this.prevVal)) {
-                            this.element.value = this.prevVal;
-                        }
-                        this.element.setSelectionRange(this.element.selectionStart, this.element.selectionStart);
-                    }
-                    if (this.element.value[this.element.selectionStart - 1] === decimalSeparator &&
-                        this.decimals === 0 &&
-                        this.validateDecimalOnType) {
-                        this.element.value = this.element.value.substring(0, prevPos) +
-                            this.element.value.substring(currentPos, this.element.value.length);
-                    }
-                }
-                this.prevVal = this.element.value;
-            }
-        });
-    }
-    private keyUpHandler(): void {
-        if (!this.enabled || this.readonly) {
-            return;
-        }
-        const iOS: boolean = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
-        if (!iOS && Browser.isDevice) {
-            this.preventHandler();
-        }
-        let parseValue: number = this.instance.getNumberParser({ format: 'n' })(this.element.value);
-        parseValue = parseValue === null || isNaN(parseValue) ? null : parseValue;
-        this.hiddenInput.value = parseValue || parseValue === 0 ? parseValue.toString() : null;
-        const formElement: Element = closest(this.element, 'form');
-        if (formElement) {
-            const element: Element = this.element.nextElementSibling;
-            const keyupEvent: KeyboardEvent = document.createEvent('KeyboardEvent');
-            keyupEvent.initEvent('keyup', false, true);
-            element.dispatchEvent(keyupEvent);
-        }
-    }
-    private inputHandler(event: KeyboardEvent): void {
-        const numerictextboxObj: any = null || this;
-        if (!this.enabled || this.readonly) {
-            return;
-        }
-        const iOS: boolean = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
-        const fireFox: boolean = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-        if ((fireFox || iOS) && Browser.isDevice) {
-            this.preventHandler();
-        }
-        /* istanbul ignore next */
-        if ( this.isAngular
-            && this.element.value !== getValue('decimal', getNumericObject(this.locale))
-            && this.element.value !== getValue('minusSign', getNumericObject(this.locale))
-            && this.numericRegex().test(this.element.value)) {
-            let parsedValue: number = this.instance.getNumberParser({ format: 'n' })(this.element.value);
-            parsedValue = isNaN(parsedValue) ? null : parsedValue;
-            numerictextboxObj.localChange({value: parsedValue});
-            this.preventChange = true;
-        }
-        if (this.isVue) {
-            let current: number = this.instance.getNumberParser({ format: 'n' })(this.element.value);
-            const previous: number = this.instance.getNumberParser({ format: 'n' })(this.elementPrevValue);
-            //EJ2-54963-if type "." or ".0" or "-.0" it converts to "0" automatically when binding v-model
-            const nonZeroRegex: RegExp = new RegExp('[^0-9]+$');
-            if (nonZeroRegex.test(this.element.value) ||
-            ((this.elementPrevValue.indexOf('.') !== -1 || this.elementPrevValue.indexOf('-') !== -1) &&
-              this.element.value[this.element.value.length - 1] === '0')) {
-                current = this.value;
-            }
-            const eventArgs: object = {
-                event: event,
-                value: (current === null || isNaN(current) ? null : current),
-                previousValue: (previous === null || isNaN(previous) ? null : previous)
-            };
-            this.preventChange = true;
-            this.elementPrevValue = this.element.value;
-            this.trigger('input', eventArgs);
-        }
-    }
-
-    private keyDownHandler(event: KeyboardEvent): void {
-        if (!this.readonly) {
-            switch (event.keyCode) {
-            case 38:
-                event.preventDefault();
-                this.action(INCREMENT, event);
-                break;
-            case 40:
-                event.preventDefault();
-                this.action(DECREMENT, event);
-                break;
-            default: break;
-            }
-        }
-    }
-
-    private performAction(value: number, step: number, operation: string): number {
-        if (value === null || isNaN(value)) {
-            value = 0;
-        }
-        let updatedValue: number = operation === INCREMENT ? value + step : value - step;
-        updatedValue = this.correctRounding(value, step, updatedValue);
-        return this.strictMode ? this.trimValue(updatedValue) : updatedValue;
-    }
-
-    private correctRounding(value: number, step: number, result: number): number {
-        const floatExp: RegExp = new RegExp('[,.](.*)');
-        const floatValue: boolean = floatExp.test(value.toString());
-        const floatStep: boolean = floatExp.test(step.toString());
-        if (floatValue || floatStep) {
-            const valueCount: number = floatValue ? floatExp.exec(value.toString())[0].length : 0;
-            const stepCount: number = floatStep ? floatExp.exec(step.toString())[0].length : 0;
-            const max: number = Math.max(valueCount, stepCount);
-            return value = this.roundValue(result, max);
-        }
-        return result;
-    }
-
-    private roundValue(result: number, precision: number): number {
-        precision = precision || 0;
-        const divide: number = Math.pow(10, precision);
-        return result *= divide, result = Math.round(result) / divide;
-    }
-
-    private updateValue(value: number, event?: Event): void {
-        if (event) {
-            this.isInteract = true;
-        }
-        if (value !== null && !isNaN(value)) {
-            if (this.decimals) {
-                value = this.roundNumber(value, this.decimals);
-            }
-        }
-        this.inputValue = value;
-        if (!(this.isVue && this.element && this.element.hasAttribute('modelvalue') && this.isDynamicChange)) {
-            this.changeValue(value === null || isNaN(value) ? null : this.strictMode ? this.trimValue(value) : value);
-        }
-        /* istanbul ignore next */
-        if (!this.isDynamicChange) {
-            this.raiseChangeEvent(event);
-        }
-    }
-
-    private updateCurrency(prop: string, propVal: string): void {
-        setValue(prop, propVal, this.cultureInfo);
-        this.updateValue(this.value);
-    }
-
-    private changeValue(value: number): void {
-        if (!(value || value === 0)) {
-            value = null;
-            this.setProperties({ value: value }, true);
-        } else {
-            const numberOfDecimals: number = this.getNumberOfDecimals(value);
-            this.setProperties({ value: this.roundNumber(value, numberOfDecimals) }, true);
-        }
-        this.modifyText();
-        if (!this.strictMode) {
-            this.validateState();
-        }
-    }
-
-    private modifyText(): void {
-        if (this.value || this.value === 0) {
-            const value: string = this.formatNumber();
-            const elementValue: string = this.isFocused ? value : this.instance.getNumberFormat(this.cultureInfo)(this.value);
-            this.setElementValue(elementValue);
-            attributes(this.element, { 'aria-valuenow': value });
-            if (!isNullOrUndefined(this.hiddenInput)) {
-                this.hiddenInput.value = this.value.toString();
-                if (this.value !== null && this.serverDecimalSeparator) {
-                    this.hiddenInput.value = this.hiddenInput.value.replace('.', this.serverDecimalSeparator);
-                }
-            }
-        } else {
-            this.setElementValue('');
-            this.element.removeAttribute('aria-valuenow');
-            this.hiddenInput.value = null;
-        }
-    }
-    private setElementValue(val: string, element ? : HTMLInputElement): void {
-        Input.setValue(val, (element ? element : this.element), this.floatLabelType, this.showClearButton);
-    }
-
-    private validateState(): void {
-        this.isValidState = true;
-        if (this.value || this.value === 0) {
-            this.isValidState = !(this.value > this.max || this.value < this.min);
-        }
-        this.checkErrorClass();
-    }
-
-    private getNumberOfDecimals(value: number): number {
-        let numberOfDecimals: number;
-        // eslint-disable-next-line no-useless-escape
-        const EXPREGEXP: RegExp = new RegExp('[eE][\-+]?([0-9]+)');
-        let valueString: string = value.toString();
-        if (EXPREGEXP.test(valueString)) {
-            const result: RegExpExecArray = EXPREGEXP.exec(valueString);
-            if (!isNullOrUndefined(result)) {
-                valueString = value.toFixed(Math.min(parseInt(result[1], 10), 20));
-            }
-        }
-        const decimalPart: string = valueString.split('.')[1];
-        numberOfDecimals = !decimalPart || !decimalPart.length ? 0 : decimalPart.length;
-        if (this.decimals !== null) {
-            numberOfDecimals = numberOfDecimals < this.decimals ? numberOfDecimals : this.decimals;
-        }
-        return numberOfDecimals;
-    }
-
-    private formatNumber(): string {
-        const numberOfDecimals: number = this.getNumberOfDecimals(this.value);
-        return this.instance.getNumberFormat({
-            maximumFractionDigits: numberOfDecimals,
-            minimumFractionDigits: numberOfDecimals, useGrouping: false
-        })(this.value);
-    }
-
-    private trimValue(value: number): number {
-        if (value > this.max) {
-            return this.max;
-        }
-        if (value < this.min) {
-            return this.min;
-        }
-        return value;
-    }
-    private roundNumber(value: number, precision: number): number {
-        let result: number = value;
-        const decimals: number = precision || 0;
-        const result1: string[] = result.toString().split('e');
-        result = Math.round(Number(result1[0] + 'e' + (result1[1] ? (Number(result1[1]) + decimals) : decimals)));
-        const result2: string[] = result.toString().split('e');
-        result = Number(result2[0] + 'e' + (result2[1] ? (Number(result2[1]) - decimals) : -decimals));
-        return Number(result.toFixed(decimals));
-    }
-    private cancelEvent(event: Event): boolean {
-        event.preventDefault();
-        return false;
-    }
-
-    private keyPressHandler(event: KeyboardEvent): boolean {
-        if (!this.enabled || this.readonly) {
-            return true;
-        }
-        if (!Browser.isDevice && Browser.info.version === '11.0'  && event.keyCode === 13) {
-            const parsedInput: number = this.instance.getNumberParser({ format: 'n' })(this.element.value);
-            this.updateValue(parsedInput, event);
-            return true;
-        }
-        if (event.which === 0 || event.metaKey || event.ctrlKey || event.keyCode === 8 || event.keyCode === 13) {
-            return true;
-        }
-        let currentChar: string = String.fromCharCode(event.which);
-        const decimalSeparator: string = getValue('decimal', getNumericObject(this.locale));
-        const isAlterNumPadDecimalChar: boolean = event.code === 'NumpadDecimal' && currentChar !== decimalSeparator;
-        //EJ2-59813-replace the culture decimal separator value with numberpad decimal separator value when culture decimal separator and numberpad decimal separator are different
-        if (isAlterNumPadDecimalChar) {
-            currentChar = decimalSeparator;
-        }
-        let text: string = this.element.value;
-        text = text.substring(0, this.element.selectionStart) + currentChar + text.substring(this.element.selectionEnd);
-        if (!this.numericRegex().test(text)) {
-            event.preventDefault();
-            event.stopPropagation();
-            return false;
-        } else {
-            //EJ2-59813-update the numberpad decimal separator and update the cursor position
-            if (isAlterNumPadDecimalChar) {
-                const start : number = this.element.selectionStart + 1;
-                this.element.value = text;
-                this.element.setSelectionRange(start, start);
-                event.preventDefault();
-                event.stopPropagation();
-            }
-            return true;
-        }
-    }
-
-    private numericRegex(): RegExp {
-        const numericObject: Object = getNumericObject(this.locale);
-        let decimalSeparator: string = getValue('decimal', numericObject);
-        let fractionRule: string = '*';
-        if (decimalSeparator === DECIMALSEPARATOR) {
-            decimalSeparator = '\\' + decimalSeparator;
-        }
-        if (this.decimals === 0  && this.validateDecimalOnType ) {
-            return INTREGEXP;
-        }
-        if (this.decimals && this.validateDecimalOnType) {
-            fractionRule = '{0,' + this.decimals + '}';
-        }
-        /* eslint-disable-next-line security/detect-non-literal-regexp */
-        return new RegExp('^\\s*(-)?(((\\d+(' + decimalSeparator + '\\d' + fractionRule +
-            ')?)|(' + decimalSeparator + '\\d' + fractionRule + ')))?$');
-    }
-
-    private mouseWheel(event: MouseWheelEvent): void {
-        event.preventDefault();
-        let delta: number;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const rawEvent: any = event;
-        if (rawEvent.wheelDelta) {
-            delta = rawEvent.wheelDelta / 120;
-        } else if (rawEvent.detail) {
-            delta = -rawEvent.detail / 3;
-        }
-        if (delta > 0) {
-            this.action(INCREMENT, event);
-        } else if (delta < 0) {
-            this.action(DECREMENT, event);
-        }
-        this.cancelEvent(event);
-    }
-
-    private focusHandler(event: MouseEvent | FocusEvent | TouchEvent | KeyboardEvent): void {
-        clearTimeout(selectionTimeOut);
-        this.focusEventArgs = {event: event, value: this.value, container: this.container };
-        this.trigger('focus', this.focusEventArgs);
-        if (!this.enabled || this.readonly) {
-            return;
-        }
-        this.isFocused = true;
-        this.prevValue = this.value;
-        if ((this.value || this.value === 0)) {
-            const formatValue: string = this.formatNumber();
-            this.setElementValue(formatValue);
-            if (!this.isPrevFocused) {
-                if (!Browser.isDevice && Browser.info.version === '11.0') {
-                    this.element.setSelectionRange(0, formatValue.length);
-                } else {
-                    const delay: number = (Browser.isDevice && Browser.isIos) ? 600 : 0;
-                    selectionTimeOut = setTimeout(
-                        () => {
-                            this.element.setSelectionRange(0, formatValue.length);
-                        },
-                        delay);
-                }
-            }
-        }
-        if (!Browser.isDevice) {
-            EventHandler.add(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel, this);
-        }
-    }
-
-    private focusOutHandler(event: MouseEvent | FocusEvent | TouchEvent | KeyboardEvent): void {
-        this.blurEventArgs = {event: event, value: this.value, container: this.container };
-        this.trigger('blur', this.blurEventArgs);
-        if (!this.enabled || this.readonly) {
-            return;
-        }
-        if (this.isPrevFocused) {
-            event.preventDefault();
-            if (Browser.isDevice) {
-                const value: string = this.element.value;
-                this.element.focus();
-                this.isPrevFocused = false;
-                const ele: HTMLInputElement = this.element;
-                setTimeout(
-                    () => {
-                        this.setElementValue(value, ele);
-                    },
-                    200);
-            }
-        } else {
-            this.isFocused = false;
-            if (!this.element.value.length) {
-                this.setProperties({ value: null }, true);
-            }
-            const parsedInput: number = this.instance.getNumberParser({ format: 'n' })(this.element.value);
-            this.updateValue(parsedInput);
-            if (!Browser.isDevice) {
-                EventHandler.remove(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel);
-            }
-        }
-        const formElement: Element = closest(this.element, 'form');
-        if (formElement) {
-            const element: Element = this.element.nextElementSibling;
-            const focusEvent: FocusEvent = document.createEvent('FocusEvent');
-            focusEvent.initEvent('focusout', false, true);
-            element.dispatchEvent(focusEvent);
-        }
-    }
-
-    private mouseDownOnSpinner(event: MouseEvent): void {
-        if (this.isFocused) {
-            this.isPrevFocused = true;
-            event.preventDefault();
-        }
-        if (!this.getElementData(event)) {
-            return;
-        }
-        this.getElementData(event);
-        const target: HTMLElement = <HTMLElement>event.currentTarget;
-        const action: string = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT;
-        EventHandler.add(target, 'mouseleave', this.mouseUpClick, this);
-        this.timeOut = setInterval(() => {
-            this.isCalled = true; this.action(action, event);
-        }, 150);
-        EventHandler.add(document, 'mouseup', this.mouseUpClick, this);
-    }
-
-    private touchMoveOnSpinner(event: MouseEvent | TouchEvent): void {
-        let target: Element;
-        if (event.type === 'touchmove') {
-            const touchEvent: TouchList = (event as TouchEvent).touches;
-            target = touchEvent.length && document.elementFromPoint(touchEvent[0].pageX, touchEvent[0].pageY);
-        } else {
-            target = document.elementFromPoint((event as MouseEvent).clientX, (event as MouseEvent).clientY);
-        }
-        if (!(target.classList.contains(SPINICON))) {
-            clearInterval(this.timeOut);
-        }
-    }
-
-    private mouseUpOnSpinner(event: MouseEvent): void {
-        this.prevValue = this.value;
-        if (this.isPrevFocused) {
-            this.element.focus();
-            if (!Browser.isDevice) {
-                this.isPrevFocused = false;
-            }
-        }
-        if (!Browser.isDevice) {
-            event.preventDefault();
-        }
-        if (!this.getElementData(event)) {
-            return;
-        }
-        const target: HTMLElement = <HTMLElement>event.currentTarget;
-        const action: string = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT;
-        EventHandler.remove(target, 'mouseleave', this.mouseUpClick);
-        if (!this.isCalled) {
-            this.action(action, event);
-        }
-        this.isCalled = false;
-        EventHandler.remove(document, 'mouseup', this.mouseUpClick);
-        const formElement: Element = closest(this.element, 'form');
-        if (formElement) {
-            const element: Element = this.element.nextElementSibling;
-            const keyupEvent: KeyboardEvent = document.createEvent('KeyboardEvent');
-            keyupEvent.initEvent('keyup', false, true);
-            element.dispatchEvent(keyupEvent);
-        }
-    }
-
-    private getElementData(event: MouseEvent): boolean {
-        if ((event.which && event.which === 3) || (event.button && event.button === 2)
-            || !this.enabled || this.readonly) {
-            return false;
-        }
-        clearInterval(this.timeOut);
-        return true;
-    }
-
-    private floatLabelTypeUpdate(): void {
-        Input.removeFloating(this.inputWrapper);
-        const hiddenInput : HTMLElement = this.hiddenInput;
-        this.hiddenInput.remove();
-        Input.addFloating(this.element, this.floatLabelType, this.placeholder, this.createElement);
-        this.container.insertBefore(hiddenInput, this.container.childNodes[1]);
-    }
-
-    private mouseUpClick(event: MouseEvent): void {
-        event.stopPropagation();
-        clearInterval(this.timeOut);
-        this.isCalled = false;
-        if (this.spinUp) {
-            EventHandler.remove(this.spinUp, 'mouseleave', this.mouseUpClick);
-        }
-        if (this.spinDown) {
-            EventHandler.remove(this.spinDown, 'mouseleave', this.mouseUpClick);
-        }
-    }
-
-    /**
-     * Increments the NumericTextBox value with the specified step value.
-     *
-     * @param {number} step - Specifies the value used to increment the NumericTextBox value.
-     * if its not given then numeric value will be incremented based on the step property value.
-     * @returns {void}
-     */
-    public increment(step: number = this.step): void {
-        this.isInteract = false;
-        this.changeValue(this.performAction(this.value, step, INCREMENT));
-        this.raiseChangeEvent();
-    }
-    /**
-     * Decrements the NumericTextBox value with specified step value.
-     *
-     * @param {number} step - Specifies the value used to decrement the NumericTextBox value.
-     * if its not given then numeric value will be decremented based on the step property value.
-     * @returns {void}
-     */
-    public decrement(step: number = this.step): void {
-        this.isInteract = false;
-        this.changeValue(this.performAction(this.value, step, DECREMENT));
-        this.raiseChangeEvent();
-    }
-
-    /**
-     * Removes the component from the DOM and detaches all its related event handlers.
-     * Also it maintains the initial input element from the DOM.
-     *
-     * @method destroy
-     * @returns {void}
-     */
-    public destroy(): void {
-        this.unwireEvents();
-        if (this.showClearButton) {
-            this.clearButton = document.getElementsByClassName('e-clear-icon')[0] as HTMLElement;
-        }
-        detach(this.hiddenInput);
-        if (this.showSpinButton) {
-            this.unwireSpinBtnEvents();
-            detach(this.spinUp);
-            detach(this.spinDown);
-        }
-        const attrArray: string[] = ['aria-labelledby', 'role', 'autocomplete', 'aria-readonly',
-            'aria-disabled', 'autocapitalize', 'spellcheck', 'aria-autocomplete', 'tabindex',
-            'aria-valuemin', 'aria-valuemax', 'aria-valuenow', 'aria-invalid'];
-        for (let i: number = 0; i < attrArray.length; i++) {
-            this.element.removeAttribute(attrArray[i as number]);
-        }
-        this.element.classList.remove('e-input');
-        this.container.insertAdjacentElement('afterend', this.element);
-        detach(this.container);
-        this.spinUp = null;
-        this.spinDown = null;
-        this.container = null;
-        this.hiddenInput = null;
-        this.changeEventArgs = null;
-        this.blurEventArgs = null;
-        this.focusEventArgs = null;
-        this.inputWrapper = null;
-        Input.destroy({
-            element: this.element,
-            floatLabelType: this.floatLabelType,
-            properties: this.properties
-        }, this.clearButton);
-        super.destroy();
-    }
-
-    /**
-     * Returns the value of NumericTextBox with the format applied to the NumericTextBox.
-     *
-     * @returns {string} - Returns the formatted value of the NumericTextBox.
-     */
-    public getText(): string {
-        return this.element.value;
-    }
-
-    /**
-     * Sets the focus to widget for interaction.
-     *
-     * @returns {void}
-     */
-    public focusIn(): void {
-        if (document.activeElement !== this.element && this.enabled) {
-            this.element.focus();
-            addClass([this.container], [NUMERIC_FOCUS]);
-        }
-    }
-
-    /**
-     * Remove the focus from widget, if the widget is in focus state.
-     *
-     * @returns {void}
-     */
-    public focusOut(): void {
-        if (document.activeElement === this.element && this.enabled) {
-            this.element.blur();
-            removeClass([this.container], [NUMERIC_FOCUS]);
-        }
-    }
-
-    /**
-     * Gets the properties to be maintained in the persisted state.
-     *
-     * @returns {string} - Returns the persisted data.
-     */
-    public getPersistData(): string {
-        const keyEntity: string[] = ['value'];
-        return this.addOnPersist(keyEntity);
-    }
-
-    /**
-     * Calls internally if any of the property value is changed.
-     *
-     * @param {NumericTextBoxModel} newProp - Returns the dynamic property value of the component.
-     * @param {NumericTextBoxModel} oldProp - Returns the previous property value of the component.
-     * @returns {void}
-     * @private
-     */
-    public onPropertyChanged(newProp: NumericTextBoxModel, oldProp: NumericTextBoxModel): void {
-        for (const prop of Object.keys(newProp)) {
-            switch (prop) {
-            case 'width':
-                this.setElementWidth(newProp.width);
-                Input.calculateWidth(this.element, this.container);
-                break;
-            case 'cssClass':
-                this.updateCssClass(newProp.cssClass, oldProp.cssClass);
-                break;
-            case 'enabled':
-                Input.setEnabled(newProp.enabled, this.element);
-                this.bindClearEvent();
-                break;
-            case 'enableRtl':
-                Input.setEnableRtl(newProp.enableRtl, [this.container]);
-                break;
-            case 'readonly':
-                Input.setReadonly(newProp.readonly, this.element);
-                if (this.readonly) {
-                    attributes(this.element, { 'aria-readonly': 'true' });
-                } else {
-                    this.element.removeAttribute('aria-readonly');
-                }
-                break;
-            case 'htmlAttributes':
-                this.updateHTMLAttrToElement();
-                this.updateHTMLAttrToWrapper();
-                this.updateDataAttribute(true);
-                this.checkAttributes(true);
-                Input.validateInputType(this.container, this.element);
-                break;
-            case 'placeholder':
-                Input.setPlaceholder(newProp.placeholder, this.element);
-                Input.calculateWidth(this.element, this.container);
-                break;
-            case 'step':
-                this.step = newProp.step;
-                this.validateStep();
-                break;
-            case 'showSpinButton':
-                this.updateSpinButton(newProp);
-                break;
-            case 'showClearButton':
-                this.updateClearButton(newProp);
-                break;
-            case 'floatLabelType':
-                this.floatLabelType = newProp.floatLabelType;
-                this.floatLabelTypeUpdate();
-                break;
-            case 'value':
-                this.isDynamicChange = (this.isAngular || this.isVue) && this.preventChange;
-                this.updateValue(newProp.value);
-                if (this.isDynamicChange) {
-                    this.preventChange = false;
-                    this.isDynamicChange = false;
-                }
-                break;
-            case 'min':
-            case 'max':
-                setValue(prop, getValue(prop, newProp), this);
-                this.validateMinMax();
-                this.updateValue(this.value);
-                break;
-            case 'strictMode':
-                this.strictMode = newProp.strictMode;
-                this.updateValue(this.value);
-                this.validateState();
-                break;
-            case 'locale':
-                this.initCultureFunc();
-                this.l10n.setLocale(this.locale);
-                this.setSpinButton();
-                this.updatePlaceholder();
-                Input.setPlaceholder(this.placeholder, this.element);
-                this.updateValue(this.value);
-                break;
-            case 'currency': {
-                const propVal: string = getValue(prop, newProp);
-                this.setProperties({ currencyCode: propVal }, true);
-                this.updateCurrency(prop, propVal);
-            }
-                break;
-            case 'currencyCode': {
-                const propValue: string = getValue(prop, newProp);
-                this.setProperties({ currency: propValue }, true);
-                this.updateCurrency('currency', propValue);
-            }
-                break;
-            case 'format':
-                setValue(prop, getValue(prop, newProp), this);
-                this.initCultureInfo();
-                this.updateValue(this.value);
-                break;
-            case 'decimals':
-                this.decimals = newProp.decimals;
-                this.updateValue(this.value);
-            }
-        }
-    }
-
-    private updateClearButton(newProp: NumericTextBoxModel): void {
-        Input.setClearButton(newProp.showClearButton, this.element, this.inputWrapper, undefined, this.createElement);
-        this.bindClearEvent();
-    }
-
-    private updateSpinButton(newProp: NumericTextBoxModel): void {
-        if (newProp.showSpinButton) {
-            this.spinBtnCreation();
-        } else {
-            detach(this.spinUp);
-            detach(this.spinDown);
-        }
-    }
-
-    /**
-     * Gets the component name
-     *
-     * @returns {string} Returns the component name.
-     * @private
-     */
-    public getModuleName(): string {
-        return 'numerictextbox';
-    }
-}
-
-export interface ChangeEventArgs extends BaseEventArgs {
-    /** Returns the entered value of the NumericTextBox.
-     *
-     * @isGenericType true
-     */
-    value?: number
-    /** Returns the previously entered value of the NumericTextBox.
-     *
-     * @isGenericType true
-     */
-    previousValue?: number
-    /** Returns the event parameters from NumericTextBox. */
-    event?: Event
-    /** Returns true when the value of NumericTextBox is changed by user interaction. Otherwise, it returns false
-     *
-     * @private
-     */
-    isInteraction?: boolean
-    /** Returns true when the value of NumericTextBox is changed by user interaction. Otherwise, it returns false */
-    isInteracted?: boolean
-}
-
-export interface NumericFocusEventArgs extends BaseEventArgs {
-    /** Returns the original event arguments. */
-    event?: MouseEvent | FocusEvent | TouchEvent | KeyboardEvent
-    /** Returns the value of the NumericTextBox.
-     *
-     * @isGenericType true
-     */
-    value: number
-    /** Returns the NumericTextBox container element */
-    container?: HTMLElement
-}
-
-export interface NumericBlurEventArgs extends BaseEventArgs {
-    /** Returns the original event arguments. */
-    event?: MouseEvent | FocusEvent | TouchEvent | KeyboardEvent
-    /** Returns the value of the NumericTextBox.
-     *
-     * @isGenericType true
-     */
-    value: number
-    /** Returns the NumericTextBox container element */
-    container?: HTMLElement
-}