primeng 14.1.1 → 14.2.0

package/fesm2015/primeng-inputnumber.mjs

@@ -1,12 +1,13 @@
-import * as i0 from '@angular/core';
-import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ViewChild, Output, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from 'primeng/inputtext';
-import { InputTextModule } from 'primeng/inputtext';
+import * as i0 from '@angular/core';
+import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ViewChild, Output, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i3 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { DomHandler } from 'primeng/dom';
+import * as i2 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
 
 const INPUTNUMBER_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -19,13 +20,13 @@ class InputNumber {
         this.cd = cd;
         this.showButtons = false;
         this.format = true;
-        this.buttonLayout = "stacked";
+        this.buttonLayout = 'stacked';
         this.incrementButtonIcon = 'pi pi-angle-up';
         this.decrementButtonIcon = 'pi pi-angle-down';
         this.readonly = false;
         this.step = 1;
         this.allowEmpty = true;
-        this.mode = "decimal";
+        this.mode = 'decimal';
         this.useGrouping = true;
         this.showClear = false;
         this.onInput = new EventEmitter();
@@ -51,7 +52,7 @@ class InputNumber {
     }
     ngOnChanges(simpleChange) {
         const props = ['locale', 'localeMatcher', 'mode', 'currency', 'currencyDisplay', 'useGrouping', 'minFractionDigits', 'maxFractionDigits', 'prefix', 'suffix'];
-        if (props.some(p => !!simpleChange[p])) {
+        if (props.some((p) => !!simpleChange[p])) {
             this.updateConstructParser();
         }
     }
@@ -81,7 +82,7 @@ class InputNumber {
         this._decimal = this.getDecimalExpression();
         this._suffix = this.getSuffixExpression();
         this._prefix = this.getPrefixExpression();
-        this._index = d => index.get(d);
+        this._index = (d) => index.get(d);
     }
     updateConstructParser() {
         if (this.initialized) {
@@ -106,8 +107,7 @@ class InputNumber {
     }
     getCurrencyExpression() {
         if (this.currency) {
-            const formatter = new Intl.NumberFormat(this.locale, { style: 'currency', currency: this.currency, currencyDisplay: this.currencyDisplay,
-                minimumFractionDigits: 0, maximumFractionDigits: 0 });
+            const formatter = new Intl.NumberFormat(this.locale, { style: 'currency', currency: this.currency, currencyDisplay: this.currencyDisplay, minimumFractionDigits: 0, maximumFractionDigits: 0 });
             return new RegExp(`[${formatter.format(1).replace(/\s/g, '').replace(this._numeral, '').replace(this._group, '')}]`, 'g');
         }
         return new RegExp(`[]`, 'g');
@@ -127,15 +127,15 @@ class InputNumber {
             this.suffixChar = this.suffix;
         }
         else {
-            const formatter = new Intl.NumberFormat(this.locale, { style: this.mode, currency: this.currency, currencyDisplay: this.currencyDisplay,
-                minimumFractionDigits: 0, maximumFractionDigits: 0 });
+            const formatter = new Intl.NumberFormat(this.locale, { style: this.mode, currency: this.currency, currencyDisplay: this.currencyDisplay, minimumFractionDigits: 0, maximumFractionDigits: 0 });
             this.suffixChar = formatter.format(1).split('1')[1];
         }
         return new RegExp(`${this.escapeRegExp(this.suffixChar || '')}`, 'g');
     }
     formatValue(value) {
         if (value != null) {
-            if (value === '-') { // Minus sign
+            if (value === '-') {
+                // Minus sign
                 return value;
             }
             if (this.format) {
@@ -165,7 +165,8 @@ class InputNumber {
             .replace(this._decimal, '.')
             .replace(this._numeral, this._index);
         if (filteredText) {
-            if (filteredText === '-') // Minus sign
+            if (filteredText === '-')
+                // Minus sign
                 return filteredText;
             let parsedValue = +filteredText;
             return isNaN(parsedValue) ? null : parsedValue;
@@ -481,8 +482,8 @@ class InputNumber {
             const maxFractionDigits = this.numberFormat.resolvedOptions().maximumFractionDigits;
             const operation = selectionStart !== selectionEnd ? 'range-insert' : 'insert';
             if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
-                if ((selectionStart + text.length - (decimalCharIndex + 1)) <= maxFractionDigits) {
-                    const charIndex = currencyCharIndex >= selectionStart ? currencyCharIndex - 1 : (suffixCharIndex >= selectionStart ? suffixCharIndex : inputValue.length);
+                if (selectionStart + text.length - (decimalCharIndex + 1) <= maxFractionDigits) {
+                    const charIndex = currencyCharIndex >= selectionStart ? currencyCharIndex - 1 : suffixCharIndex >= selectionStart ? suffixCharIndex : inputValue.length;
                     newValueStr = inputValue.slice(0, selectionStart) + text + inputValue.slice(selectionStart + text.length, charIndex) + inputValue.slice(charIndex);
                     this.updateValue(event, newValueStr, text, operation);
                 }
@@ -498,9 +499,9 @@ class InputNumber {
         if (textSplit.length === 2) {
             const decimalCharIndex = value.slice(start, end).search(this._decimal);
             this._decimal.lastIndex = 0;
-            return (decimalCharIndex > 0) ? value.slice(0, start) + this.formatValue(text) + value.slice(end) : (value || this.formatValue(text));
+            return decimalCharIndex > 0 ? value.slice(0, start) + this.formatValue(text) + value.slice(end) : value || this.formatValue(text);
         }
-        else if ((end - start) === value.length) {
+        else if (end - start === value.length) {
             return this.formatValue(text);
         }
         else if (start === 0) {
@@ -515,7 +516,7 @@ class InputNumber {
     }
     deleteRange(value, start, end) {
         let newValueStr;
-        if ((end - start) === value.length)
+        if (end - start === value.length)
             newValueStr = '';
         else if (start === 0)
             newValueStr = value.slice(end);
@@ -572,7 +573,8 @@ class InputNumber {
         return index || 0;
     }
     onInputClick() {
-        if (!this.readonly) {
+        const currentValue = this.input.nativeElement.value;
+        if (!this.readonly && currentValue !== DomHandler.getSelection()) {
             this.initCursor();
         }
     }
@@ -601,7 +603,7 @@ class InputNumber {
     }
     handleOnInput(event, currentValue, newValue) {
         if (this.isValueChanged(currentValue, newValue)) {
-            this.onInput.emit({ originalEvent: event, value: newValue });
+            this.onInput.emit({ originalEvent: event, value: newValue, formattedValue: currentValue });
         }
     }
     isValueChanged(currentValue, newValue) {
@@ -609,7 +611,7 @@ class InputNumber {
             return true;
         }
         if (newValue != null) {
-            let parsedCurrentValue = (typeof currentValue === 'string') ? this.parseValue(currentValue) : currentValue;
+            let parsedCurrentValue = typeof currentValue === 'string' ? this.parseValue(currentValue) : currentValue;
             return newValue !== parsedCurrentValue;
         }
         return false;
@@ -678,7 +680,7 @@ class InputNumber {
                     selectionEnd += 1;
                 }
                 else if (!isGroupChar && this.isNumeralChar(prevChar)) {
-                    selectionEnd += (-1 * diff) + 1;
+                    selectionEnd += -1 * diff + 1;
                 }
                 this._group.lastIndex = 0;
                 this.input.nativeElement.setSelectionRange(selectionEnd, selectionEnd);
@@ -700,7 +702,12 @@ class InputNumber {
         if (val1 && val2) {
             let decimalCharIndex = val2.search(this._decimal);
             this._decimal.lastIndex = 0;
-            return decimalCharIndex !== -1 ? (val1.split(this._decimal)[0] + val2.slice(decimalCharIndex)) : val1;
+            if (this.suffixChar) {
+                return val1.replace(this.suffixChar, '').split(this._decimal)[0] + val2.replace(this.suffixChar, '').slice(decimalCharIndex) + this.suffixChar;
+            }
+            else {
+                return decimalCharIndex !== -1 ? val1.split(this._decimal)[0] + val2.slice(decimalCharIndex) : val1;
+            }
         }
         return val1;
     }
@@ -708,10 +715,7 @@ class InputNumber {
         if (value) {
             const valueSplit = value.split(this._decimal);
             if (valueSplit.length === 2) {
-                return valueSplit[1].replace(this._suffix, '')
-                    .trim()
-                    .replace(/\s/g, '')
-                    .replace(this._currency, '').length;
+                return valueSplit[1].replace(this._suffix, '').trim().replace(/\s/g, '').replace(this._currency, '').length;
             }
         }
         return 0;
@@ -754,7 +758,7 @@ class InputNumber {
         this.cd.markForCheck();
     }
     get filled() {
-        return (this.value != null && this.value.toString().length > 0);
+        return this.value != null && this.value.toString().length > 0;
     }
     clearTimer() {
         if (this.timer) {
@@ -767,52 +771,210 @@ class InputNumber {
 }
 InputNumber.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: InputNumber, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 InputNumber.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: InputNumber, selector: "p-inputNumber", inputs: { showButtons: "showButtons", format: "format", buttonLayout: "buttonLayout", inputId: "inputId", styleClass: "styleClass", style: "style", placeholder: "placeholder", size: "size", maxlength: "maxlength", tabindex: "tabindex", title: "title", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", name: "name", required: "required", autocomplete: "autocomplete", min: "min", max: "max", incrementButtonClass: "incrementButtonClass", decrementButtonClass: "decrementButtonClass", incrementButtonIcon: "incrementButtonIcon", decrementButtonIcon: "decrementButtonIcon", readonly: "readonly", step: "step", allowEmpty: "allowEmpty", locale: "locale", localeMatcher: "localeMatcher", mode: "mode", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: "useGrouping", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits", prefix: "prefix", suffix: "suffix", inputStyle: "inputStyle", inputStyleClass: "inputStyleClass", showClear: "showClear", disabled: "disabled" }, outputs: { onInput: "onInput", onFocus: "onFocus", onBlur: "onBlur", onKeyDown: "onKeyDown", onClear: "onClear" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focused", "class.p-inputnumber-clearable": "showClear && buttonLayout != \"vertical\"" }, classAttribute: "p-element p-inputwrapper" }, providers: [INPUTNUMBER_VALUE_ACCESSOR], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-        <span [ngClass]="{'p-inputnumber p-component': true,'p-inputnumber-buttons-stacked': this.showButtons && this.buttonLayout === 'stacked',
-                'p-inputnumber-buttons-horizontal': this.showButtons && this.buttonLayout === 'horizontal', 'p-inputnumber-buttons-vertical': this.showButtons && this.buttonLayout === 'vertical'}"
-                [ngStyle]="style" [class]="styleClass">
-            <input #input [ngClass]="'p-inputnumber-input'" [ngStyle]="inputStyle" [class]="inputStyleClass" pInputText [value]="formattedValue()" [attr.placeholder]="placeholder" [attr.title]="title" [attr.id]="inputId"
-                [attr.size]="size" [attr.name]="name" [attr.autocomplete]="autocomplete" [attr.maxlength]="maxlength" [attr.tabindex]="tabindex" [attr.aria-label]="ariaLabel"
-                [attr.aria-required]="ariaRequired" [disabled]="disabled" [attr.required]="required" [attr.min]="min" [attr.max]="max" [readonly]="readonly" inputmode="decimal"
-                (input)="onUserInput($event)" (keydown)="onInputKeyDown($event)" (keypress)="onInputKeyPress($event)" (paste)="onPaste($event)" (click)="onInputClick()"
-                (focus)="onInputFocus($event)" (blur)="onInputBlur($event)">
+        <span
+            [ngClass]="{
+                'p-inputnumber p-component': true,
+                'p-inputnumber-buttons-stacked': this.showButtons && this.buttonLayout === 'stacked',
+                'p-inputnumber-buttons-horizontal': this.showButtons && this.buttonLayout === 'horizontal',
+                'p-inputnumber-buttons-vertical': this.showButtons && this.buttonLayout === 'vertical'
+            }"
+            [ngStyle]="style"
+            [class]="styleClass"
+        >
+            <input
+                #input
+                [ngClass]="'p-inputnumber-input'"
+                [ngStyle]="inputStyle"
+                [class]="inputStyleClass"
+                pInputText
+                [value]="formattedValue()"
+                [attr.placeholder]="placeholder"
+                [attr.title]="title"
+                [attr.id]="inputId"
+                [attr.size]="size"
+                [attr.name]="name"
+                [attr.autocomplete]="autocomplete"
+                [attr.maxlength]="maxlength"
+                [attr.tabindex]="tabindex"
+                [attr.aria-label]="ariaLabel"
+                [attr.aria-required]="ariaRequired"
+                [disabled]="disabled"
+                [attr.required]="required"
+                [attr.min]="min"
+                [attr.max]="max"
+                [readonly]="readonly"
+                inputmode="decimal"
+                (input)="onUserInput($event)"
+                (keydown)="onInputKeyDown($event)"
+                (keypress)="onInputKeyPress($event)"
+                (paste)="onPaste($event)"
+                (click)="onInputClick()"
+                (focus)="onInputFocus($event)"
+                (blur)="onInputBlur($event)"
+            />
             <i *ngIf="buttonLayout != 'vertical' && showClear && value" class="p-inputnumber-clear-icon pi pi-times" (click)="clear()"></i>
             <span class="p-inputnumber-button-group" *ngIf="showButtons && buttonLayout === 'stacked'">
-                <button type="button" pButton [ngClass]="{'p-inputnumber-button p-inputnumber-button-up': true}" [class]="incrementButtonClass" [icon]="incrementButtonIcon" [disabled]="disabled"
-                    (mousedown)="this.onUpButtonMouseDown($event)" (mouseup)="onUpButtonMouseUp()" (mouseleave)="onUpButtonMouseLeave()" (keydown)="onUpButtonKeyDown($event)" (keyup)="onUpButtonKeyUp()"></button>
-                <button type="button" pButton [ngClass]="{'p-inputnumber-button p-inputnumber-button-down': true}" [class]="decrementButtonClass" [icon]="decrementButtonIcon" [disabled]="disabled"
-                    (mousedown)="this.onDownButtonMouseDown($event)" (mouseup)="onDownButtonMouseUp()" (mouseleave)="onDownButtonMouseLeave()" (keydown)="onDownButtonKeyDown($event)" (keyup)="onDownButtonKeyUp()"></button>
+                <button
+                    type="button"
+                    pButton
+                    [ngClass]="{ 'p-inputnumber-button p-inputnumber-button-up': true }"
+                    [class]="incrementButtonClass"
+                    [icon]="incrementButtonIcon"
+                    [disabled]="disabled"
+                    (mousedown)="this.onUpButtonMouseDown($event)"
+                    (mouseup)="onUpButtonMouseUp()"
+                    (mouseleave)="onUpButtonMouseLeave()"
+                    (keydown)="onUpButtonKeyDown($event)"
+                    (keyup)="onUpButtonKeyUp()"
+                ></button>
+                <button
+                    type="button"
+                    pButton
+                    [ngClass]="{ 'p-inputnumber-button p-inputnumber-button-down': true }"
+                    [class]="decrementButtonClass"
+                    [icon]="decrementButtonIcon"
+                    [disabled]="disabled"
+                    (mousedown)="this.onDownButtonMouseDown($event)"
+                    (mouseup)="onDownButtonMouseUp()"
+                    (mouseleave)="onDownButtonMouseLeave()"
+                    (keydown)="onDownButtonKeyDown($event)"
+                    (keyup)="onDownButtonKeyUp()"
+                ></button>
             </span>
-            <button type="button" pButton [ngClass]="{'p-inputnumber-button p-inputnumber-button-up': true}" [class]="incrementButtonClass" [icon]="incrementButtonIcon" *ngIf="showButtons && buttonLayout !== 'stacked'" [disabled]="disabled"
-                (mousedown)="this.onUpButtonMouseDown($event)" (mouseup)="onUpButtonMouseUp()" (mouseleave)="onUpButtonMouseLeave()" (keydown)="onUpButtonKeyDown($event)" (keyup)="onUpButtonKeyUp()"></button>
-            <button type="button" pButton [ngClass]="{'p-inputnumber-button p-inputnumber-button-down': true}" [class]="decrementButtonClass" [icon]="decrementButtonIcon" *ngIf="showButtons && buttonLayout !== 'stacked'" [disabled]="disabled"
-                (mousedown)="this.onDownButtonMouseDown($event)" (mouseup)="onDownButtonMouseUp()" (mouseleave)="onDownButtonMouseLeave()" (keydown)="onDownButtonKeyDown($event)" (keyup)="onDownButtonKeyUp()"></button>
+            <button
+                type="button"
+                pButton
+                [ngClass]="{ 'p-inputnumber-button p-inputnumber-button-up': true }"
+                [class]="incrementButtonClass"
+                [icon]="incrementButtonIcon"
+                *ngIf="showButtons && buttonLayout !== 'stacked'"
+                [disabled]="disabled"
+                (mousedown)="this.onUpButtonMouseDown($event)"
+                (mouseup)="onUpButtonMouseUp()"
+                (mouseleave)="onUpButtonMouseLeave()"
+                (keydown)="onUpButtonKeyDown($event)"
+                (keyup)="onUpButtonKeyUp()"
+            ></button>
+            <button
+                type="button"
+                pButton
+                [ngClass]="{ 'p-inputnumber-button p-inputnumber-button-down': true }"
+                [class]="decrementButtonClass"
+                [icon]="decrementButtonIcon"
+                *ngIf="showButtons && buttonLayout !== 'stacked'"
+                [disabled]="disabled"
+                (mousedown)="this.onDownButtonMouseDown($event)"
+                (mouseup)="onDownButtonMouseUp()"
+                (mouseleave)="onDownButtonMouseLeave()"
+                (keydown)="onDownButtonKeyDown($event)"
+                (keyup)="onDownButtonKeyUp()"
+            ></button>
         </span>
     `, isInline: true, styles: ["p-inputnumber,.p-inputnumber{display:inline-flex}.p-inputnumber-button{display:flex;align-items:center;justify-content:center;flex:0 0 auto}.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label,.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label{display:none}.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up{border-top-left-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;padding:0}.p-inputnumber-buttons-stacked .p-inputnumber-input{border-top-right-radius:0;border-bottom-right-radius:0}.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;padding:0}.p-inputnumber-buttons-stacked .p-inputnumber-button-group{display:flex;flex-direction:column}.p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button{flex:1 1 auto}.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up{order:3;border-top-left-radius:0;border-bottom-left-radius:0}.p-inputnumber-buttons-horizontal .p-inputnumber-input{order:2;border-radius:0}.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down{order:1;border-top-right-radius:0;border-bottom-right-radius:0}.p-inputnumber-buttons-vertical{flex-direction:column}.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up{order:1;border-bottom-left-radius:0;border-bottom-right-radius:0;width:100%}.p-inputnumber-buttons-vertical .p-inputnumber-input{order:2;border-radius:0;text-align:center}.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down{order:3;border-top-left-radius:0;border-top-right-radius:0;width:100%}.p-inputnumber-input{flex:1 1 auto}.p-fluid p-inputnumber,.p-fluid .p-inputnumber{width:100%}.p-fluid .p-inputnumber .p-inputnumber-input{width:1%}.p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input{width:100%}.p-inputnumber-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.p-inputnumber-clearable{position:relative}\n"], dependencies: [{ 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: "directive", type: i2.InputText, selector: "[pInputText]" }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: InputNumber, decorators: [{
             type: Component,
             args: [{ selector: 'p-inputNumber', template: `
-        <span [ngClass]="{'p-inputnumber p-component': true,'p-inputnumber-buttons-stacked': this.showButtons && this.buttonLayout === 'stacked',
-                'p-inputnumber-buttons-horizontal': this.showButtons && this.buttonLayout === 'horizontal', 'p-inputnumber-buttons-vertical': this.showButtons && this.buttonLayout === 'vertical'}"
-                [ngStyle]="style" [class]="styleClass">
-            <input #input [ngClass]="'p-inputnumber-input'" [ngStyle]="inputStyle" [class]="inputStyleClass" pInputText [value]="formattedValue()" [attr.placeholder]="placeholder" [attr.title]="title" [attr.id]="inputId"
-                [attr.size]="size" [attr.name]="name" [attr.autocomplete]="autocomplete" [attr.maxlength]="maxlength" [attr.tabindex]="tabindex" [attr.aria-label]="ariaLabel"
-                [attr.aria-required]="ariaRequired" [disabled]="disabled" [attr.required]="required" [attr.min]="min" [attr.max]="max" [readonly]="readonly" inputmode="decimal"
-                (input)="onUserInput($event)" (keydown)="onInputKeyDown($event)" (keypress)="onInputKeyPress($event)" (paste)="onPaste($event)" (click)="onInputClick()"
-                (focus)="onInputFocus($event)" (blur)="onInputBlur($event)">
+        <span
+            [ngClass]="{
+                'p-inputnumber p-component': true,
+                'p-inputnumber-buttons-stacked': this.showButtons && this.buttonLayout === 'stacked',
+                'p-inputnumber-buttons-horizontal': this.showButtons && this.buttonLayout === 'horizontal',
+                'p-inputnumber-buttons-vertical': this.showButtons && this.buttonLayout === 'vertical'
+            }"
+            [ngStyle]="style"
+            [class]="styleClass"
+        >
+            <input
+                #input
+                [ngClass]="'p-inputnumber-input'"
+                [ngStyle]="inputStyle"
+                [class]="inputStyleClass"
+                pInputText
+                [value]="formattedValue()"
+                [attr.placeholder]="placeholder"
+                [attr.title]="title"
+                [attr.id]="inputId"
+                [attr.size]="size"
+                [attr.name]="name"
+                [attr.autocomplete]="autocomplete"
+                [attr.maxlength]="maxlength"
+                [attr.tabindex]="tabindex"
+                [attr.aria-label]="ariaLabel"
+                [attr.aria-required]="ariaRequired"
+                [disabled]="disabled"
+                [attr.required]="required"
+                [attr.min]="min"
+                [attr.max]="max"
+                [readonly]="readonly"
+                inputmode="decimal"
+                (input)="onUserInput($event)"
+                (keydown)="onInputKeyDown($event)"
+                (keypress)="onInputKeyPress($event)"
+                (paste)="onPaste($event)"
+                (click)="onInputClick()"
+                (focus)="onInputFocus($event)"
+                (blur)="onInputBlur($event)"
+            />
             <i *ngIf="buttonLayout != 'vertical' && showClear && value" class="p-inputnumber-clear-icon pi pi-times" (click)="clear()"></i>
             <span class="p-inputnumber-button-group" *ngIf="showButtons && buttonLayout === 'stacked'">
-                <button type="button" pButton [ngClass]="{'p-inputnumber-button p-inputnumber-button-up': true}" [class]="incrementButtonClass" [icon]="incrementButtonIcon" [disabled]="disabled"
-                    (mousedown)="this.onUpButtonMouseDown($event)" (mouseup)="onUpButtonMouseUp()" (mouseleave)="onUpButtonMouseLeave()" (keydown)="onUpButtonKeyDown($event)" (keyup)="onUpButtonKeyUp()"></button>
-                <button type="button" pButton [ngClass]="{'p-inputnumber-button p-inputnumber-button-down': true}" [class]="decrementButtonClass" [icon]="decrementButtonIcon" [disabled]="disabled"
-                    (mousedown)="this.onDownButtonMouseDown($event)" (mouseup)="onDownButtonMouseUp()" (mouseleave)="onDownButtonMouseLeave()" (keydown)="onDownButtonKeyDown($event)" (keyup)="onDownButtonKeyUp()"></button>
+                <button
+                    type="button"
+                    pButton
+                    [ngClass]="{ 'p-inputnumber-button p-inputnumber-button-up': true }"
+                    [class]="incrementButtonClass"
+                    [icon]="incrementButtonIcon"
+                    [disabled]="disabled"
+                    (mousedown)="this.onUpButtonMouseDown($event)"
+                    (mouseup)="onUpButtonMouseUp()"
+                    (mouseleave)="onUpButtonMouseLeave()"
+                    (keydown)="onUpButtonKeyDown($event)"
+                    (keyup)="onUpButtonKeyUp()"
+                ></button>
+                <button
+                    type="button"
+                    pButton
+                    [ngClass]="{ 'p-inputnumber-button p-inputnumber-button-down': true }"
+                    [class]="decrementButtonClass"
+                    [icon]="decrementButtonIcon"
+                    [disabled]="disabled"
+                    (mousedown)="this.onDownButtonMouseDown($event)"
+                    (mouseup)="onDownButtonMouseUp()"
+                    (mouseleave)="onDownButtonMouseLeave()"
+                    (keydown)="onDownButtonKeyDown($event)"
+                    (keyup)="onDownButtonKeyUp()"
+                ></button>
             </span>
-            <button type="button" pButton [ngClass]="{'p-inputnumber-button p-inputnumber-button-up': true}" [class]="incrementButtonClass" [icon]="incrementButtonIcon" *ngIf="showButtons && buttonLayout !== 'stacked'" [disabled]="disabled"
-                (mousedown)="this.onUpButtonMouseDown($event)" (mouseup)="onUpButtonMouseUp()" (mouseleave)="onUpButtonMouseLeave()" (keydown)="onUpButtonKeyDown($event)" (keyup)="onUpButtonKeyUp()"></button>
-            <button type="button" pButton [ngClass]="{'p-inputnumber-button p-inputnumber-button-down': true}" [class]="decrementButtonClass" [icon]="decrementButtonIcon" *ngIf="showButtons && buttonLayout !== 'stacked'" [disabled]="disabled"
-                (mousedown)="this.onDownButtonMouseDown($event)" (mouseup)="onDownButtonMouseUp()" (mouseleave)="onDownButtonMouseLeave()" (keydown)="onDownButtonKeyDown($event)" (keyup)="onDownButtonKeyUp()"></button>
+            <button
+                type="button"
+                pButton
+                [ngClass]="{ 'p-inputnumber-button p-inputnumber-button-up': true }"
+                [class]="incrementButtonClass"
+                [icon]="incrementButtonIcon"
+                *ngIf="showButtons && buttonLayout !== 'stacked'"
+                [disabled]="disabled"
+                (mousedown)="this.onUpButtonMouseDown($event)"
+                (mouseup)="onUpButtonMouseUp()"
+                (mouseleave)="onUpButtonMouseLeave()"
+                (keydown)="onUpButtonKeyDown($event)"
+                (keyup)="onUpButtonKeyUp()"
+            ></button>
+            <button
+                type="button"
+                pButton
+                [ngClass]="{ 'p-inputnumber-button p-inputnumber-button-down': true }"
+                [class]="decrementButtonClass"
+                [icon]="decrementButtonIcon"
+                *ngIf="showButtons && buttonLayout !== 'stacked'"
+                [disabled]="disabled"
+                (mousedown)="this.onDownButtonMouseDown($event)"
+                (mouseup)="onDownButtonMouseUp()"
+                (mouseleave)="onDownButtonMouseLeave()"
+                (keydown)="onDownButtonKeyDown($event)"
+                (keyup)="onDownButtonKeyUp()"
+            ></button>
         </span>
     `, changeDetection: ChangeDetectionStrategy.OnPush, providers: [INPUTNUMBER_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, host: {
-                        'class': 'p-element p-inputwrapper',
+                        class: 'p-element p-inputwrapper',
                         '[class.p-inputwrapper-filled]': 'filled',
                         '[class.p-inputwrapper-focus]': 'focused',
                         '[class.p-inputnumber-clearable]': 'showClear && buttonLayout != "vertical"'