primeng 18.0.0-beta.1 → 18.0.0-beta.3

package/fesm2022/primeng-inputnumber.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, forwardRef, EventEmitter, inject, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, ContentChildren, NgModule } from '@angular/core';
+import { Injectable, forwardRef, EventEmitter, inject, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, ContentChildren, HostBinding, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { PrimeTemplate, SharedModule } from 'primeng/api';
 import * as i3 from 'primeng/autofocus';
@@ -56,6 +56,7 @@ const theme = ({ dt }) => `
     top: 1px;
     right: 1px;
     height: calc(100% - 2px);
+    z-index: 1;
 }
 
 .p-inputnumber-stacked .p-inputnumber-increment-button {
@@ -104,6 +105,10 @@ const theme = ({ dt }) => `
     border-right: 0 none;
 }
 
+.p-floatlabel:has(.p-inputnumber-horizontal) label {
+    margin-inline-start: ${dt('inputnumber.button.width')};
+}
+
 .p-inputnumber-vertical {
     flex-direction: column;
 }
@@ -195,6 +200,38 @@ class InputNumberStyle extends BaseStyle {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: InputNumberStyle, decorators: [{
             type: Injectable
         }] });
+/**
+ *
+ * InputNumber is an input component to provide numerical input.
+ *
+ * [Live Demo](https://www.primeng.org/inputnumber/)
+ *
+ * @module inputnumberstyle
+ *
+ */
+var InputNumberClasses;
+(function (InputNumberClasses) {
+    /**
+     * Class name of the root element
+     */
+    InputNumberClasses["root"] = "p-inputnumber";
+    /**
+     * Class name of the input element
+     */
+    InputNumberClasses["pcInput"] = "p-inputnumber-input";
+    /**
+     * Class name of the button group element
+     */
+    InputNumberClasses["buttonGroup"] = "p-inputnumber-button-group";
+    /**
+     * Class name of the increment button element
+     */
+    InputNumberClasses["incrementButton"] = "p-inputnumber-increment-button";
+    /**
+     * Class name of the decrement button element
+     */
+    InputNumberClasses["decrementButton"] = "p-inputnumber-decrement-button";
+})(InputNumberClasses || (InputNumberClasses = {}));
 
 const INPUTNUMBER_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -546,6 +583,20 @@ class InputNumber extends BaseComponent {
         this.constructParser();
         this.initialized = true;
     }
+    get hostClasses() {
+        if (typeof this._rootClass === 'string') {
+            return this._rootClass;
+        }
+        if (Array.isArray(this._rootClass)) {
+            return this._rootClass.join(' ');
+        }
+        if (typeof this._rootClass === 'object') {
+            return Object.keys(this._rootClass)
+                .filter((key) => this._rootClass[key])
+                .join(' ');
+        }
+        return '';
+    }
     getOptions() {
         return {
             localeMatcher: this.localeMatcher,
@@ -1392,126 +1443,72 @@ class InputNumber extends BaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: InputNumber, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.2", type: InputNumber, selector: "p-inputNumber", inputs: { showButtons: ["showButtons", "showButtons", booleanAttribute], format: ["format", "format", booleanAttribute], buttonLayout: "buttonLayout", inputId: "inputId", styleClass: "styleClass", style: "style", placeholder: "placeholder", size: ["size", "size", numberAttribute], maxlength: ["maxlength", "maxlength", numberAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], title: "title", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", ariaRequired: ["ariaRequired", "ariaRequired", booleanAttribute], name: "name", required: ["required", "required", booleanAttribute], autocomplete: "autocomplete", min: ["min", "min", numberAttribute], max: ["max", "max", numberAttribute], incrementButtonClass: "incrementButtonClass", decrementButtonClass: "decrementButtonClass", incrementButtonIcon: "incrementButtonIcon", decrementButtonIcon: "decrementButtonIcon", readonly: ["readonly", "readonly", booleanAttribute], step: ["step", "step", numberAttribute], allowEmpty: ["allowEmpty", "allowEmpty", booleanAttribute], locale: "locale", localeMatcher: "localeMatcher", mode: "mode", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: ["useGrouping", "useGrouping", booleanAttribute], variant: "variant", minFractionDigits: ["minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, null)], maxFractionDigits: ["maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, null)], prefix: "prefix", suffix: "suffix", inputStyle: "inputStyle", inputStyleClass: "inputStyleClass", showClear: ["showClear", "showClear", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], disabled: "disabled", fluid: ["fluid", "fluid", booleanAttribute] }, outputs: { onInput: "onInput", onFocus: "onFocus", onBlur: "onBlur", onKeyDown: "onKeyDown", onClear: "onClear" }, providers: [INPUTNUMBER_VALUE_ACCESSOR, InputNumberStyle], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-        <span
-            [ngClass]="_rootClass"
-            [ngStyle]="style"
-            [class]="styleClass"
-            [attr.data-pc-name]="'inputnumber'"
-            [attr.data-pc-section]="'root'"
-        >
-            <input
-                pInputText
-                #input
-                [attr.id]="inputId"
-                role="spinbutton"
-                [ngClass]="'p-inputnumber-input'"
-                [ngStyle]="inputStyle"
-                [class]="inputStyleClass"
-                [value]="formattedValue()"
-                [attr.variant]="variant"
-                [attr.aria-valuemin]="min"
-                [attr.aria-valuemax]="max"
-                [attr.aria-valuenow]="value"
-                [disabled]="disabled"
-                [readonly]="readonly"
-                [attr.placeholder]="placeholder"
-                [attr.aria-label]="ariaLabel"
-                [attr.aria-labelledby]="ariaLabelledBy"
-                [attr.title]="title"
-                [attr.size]="size"
-                [attr.name]="name"
-                [attr.autocomplete]="autocomplete"
-                [attr.maxlength]="maxlength"
-                [attr.tabindex]="tabindex"
-                [attr.aria-required]="ariaRequired"
-                [attr.required]="required"
-                [attr.min]="min"
-                [attr.max]="max"
-                inputmode="decimal"
-                (input)="onUserInput($event)"
-                (keydown)="onInputKeyDown($event)"
-                (keypress)="onInputKeyPress($event)"
-                (paste)="onPaste($event)"
-                (click)="onInputClick()"
-                (focus)="onInputFocus($event)"
-                (blur)="onInputBlur($event)"
-                [attr.data-pc-section]="'input'"
-                pAutoFocus
-                [autofocus]="autofocus"
-                [fluid]="hasFluid"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.2", type: InputNumber, selector: "p-inputNumber, p-inputnumber", inputs: { showButtons: ["showButtons", "showButtons", booleanAttribute], format: ["format", "format", booleanAttribute], buttonLayout: "buttonLayout", inputId: "inputId", styleClass: "styleClass", style: "style", placeholder: "placeholder", size: ["size", "size", numberAttribute], maxlength: ["maxlength", "maxlength", numberAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], title: "title", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", ariaRequired: ["ariaRequired", "ariaRequired", booleanAttribute], name: "name", required: ["required", "required", booleanAttribute], autocomplete: "autocomplete", min: ["min", "min", numberAttribute], max: ["max", "max", numberAttribute], incrementButtonClass: "incrementButtonClass", decrementButtonClass: "decrementButtonClass", incrementButtonIcon: "incrementButtonIcon", decrementButtonIcon: "decrementButtonIcon", readonly: ["readonly", "readonly", booleanAttribute], step: ["step", "step", numberAttribute], allowEmpty: ["allowEmpty", "allowEmpty", booleanAttribute], locale: "locale", localeMatcher: "localeMatcher", mode: "mode", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: ["useGrouping", "useGrouping", booleanAttribute], variant: "variant", minFractionDigits: ["minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, null)], maxFractionDigits: ["maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, null)], prefix: "prefix", suffix: "suffix", inputStyle: "inputStyle", inputStyleClass: "inputStyleClass", showClear: ["showClear", "showClear", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], disabled: "disabled", fluid: ["fluid", "fluid", booleanAttribute] }, outputs: { onInput: "onInput", onFocus: "onFocus", onBlur: "onBlur", onKeyDown: "onKeyDown", onClear: "onClear" }, host: { properties: { "attr.data-pc-name": "'inputnumber'", "attr.data-pc-section": "'root'", "class": "this.hostClasses" }, styleAttribute: "style" }, providers: [INPUTNUMBER_VALUE_ACCESSOR, InputNumberStyle], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        <input
+            pInputText
+            #input
+            [attr.id]="inputId"
+            role="spinbutton"
+            [ngClass]="'p-inputnumber-input'"
+            [ngStyle]="inputStyle"
+            [class]="inputStyleClass"
+            [value]="formattedValue()"
+            [variant]="variant"
+            [attr.aria-valuemin]="min"
+            [attr.aria-valuemax]="max"
+            [attr.aria-valuenow]="value"
+            [disabled]="disabled"
+            [readonly]="readonly"
+            [attr.placeholder]="placeholder"
+            [attr.aria-label]="ariaLabel"
+            [attr.aria-labelledby]="ariaLabelledBy"
+            [attr.title]="title"
+            [attr.size]="size"
+            [attr.name]="name"
+            [attr.autocomplete]="autocomplete"
+            [attr.maxlength]="maxlength"
+            [attr.tabindex]="tabindex"
+            [attr.aria-required]="ariaRequired"
+            [attr.required]="required"
+            [attr.min]="min"
+            [attr.max]="max"
+            inputmode="decimal"
+            (input)="onUserInput($event)"
+            (keydown)="onInputKeyDown($event)"
+            (keypress)="onInputKeyPress($event)"
+            (paste)="onPaste($event)"
+            (click)="onInputClick()"
+            (focus)="onInputFocus($event)"
+            (blur)="onInputBlur($event)"
+            [attr.data-pc-section]="'input'"
+            pAutoFocus
+            [autofocus]="autofocus"
+            [fluid]="hasFluid"
+        />
+        <ng-container *ngIf="buttonLayout != 'vertical' && showClear && value">
+            <TimesIcon
+                *ngIf="!clearIconTemplate"
+                [ngClass]="'p-inputnumber-clear-icon'"
+                (click)="clear()"
+                [attr.data-pc-section]="'clearIcon'"
             />
-            <ng-container *ngIf="buttonLayout != 'vertical' && showClear && value">
-                <TimesIcon
-                    *ngIf="!clearIconTemplate"
-                    [ngClass]="'p-inputnumber-clear-icon'"
-                    (click)="clear()"
-                    [attr.data-pc-section]="'clearIcon'"
-                />
-                <span *ngIf="clearIconTemplate" (click)="clear()" class="p-inputnumber-clear-icon" [attr.data-pc-section]="'clearIcon'">
-                    <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
-                </span>
-            </ng-container>
-            <span
-                class="p-inputnumber-button-group"
-                *ngIf="showButtons && buttonLayout === 'stacked'"
-                [attr.data-pc-section]="'buttonGroup'"
-            >
-                <button
-                    type="button"
-                    [ngClass]="_incrementButtonClass"
-                    [class]="incrementButtonClass"
-                    [disabled]="disabled"
-                    tabindex="-1"
-                    (mousedown)="onUpButtonMouseDown($event)"
-                    (mouseup)="onUpButtonMouseUp()"
-                    (mouseleave)="onUpButtonMouseLeave()"
-                    (keydown)="onUpButtonKeyDown($event)"
-                    (keyup)="onUpButtonKeyUp()"
-                    [attr.aria-hidden]="true"
-                    [attr.data-pc-section]="'incrementbutton'"
-                >
-                    <span *ngIf="incrementButtonIcon" [ngClass]="incrementButtonIcon" [attr.data-pc-section]="'incrementbuttonicon'"></span>
-                    <ng-container *ngIf="!incrementButtonIcon">
-                        <AngleUpIcon *ngIf="!incrementButtonIconTemplate" [attr.data-pc-section]="'incrementbuttonicon'" />
-                        <ng-template *ngTemplateOutlet="incrementButtonIconTemplate"></ng-template>
-                    </ng-container>
-                </button>
-
-                <button
-                    type="button"
-                    [ngClass]="_decrementButtonClass"
-                    [class]="decrementButtonClass"
-                    [disabled]="disabled"
-                    tabindex="-1"
-                    [attr.aria-hidden]="true"
-                    (mousedown)="onDownButtonMouseDown($event)"
-                    (mouseup)="onDownButtonMouseUp()"
-                    (mouseleave)="onDownButtonMouseLeave()"
-                    (keydown)="onDownButtonKeyDown($event)"
-                    (keyup)="onDownButtonKeyUp()"
-                    [attr.data-pc-section]="decrementbutton"
-                >
-                    <span *ngIf="decrementButtonIcon" [ngClass]="decrementButtonIcon" [attr.data-pc-section]="'decrementbuttonicon'"></span>
-                    <ng-container *ngIf="!decrementButtonIcon">
-                        <AngleDownIcon *ngIf="!decrementButtonIconTemplate" [attr.data-pc-section]="'decrementbuttonicon'" />
-                        <ng-template *ngTemplateOutlet="decrementButtonIconTemplate"></ng-template>
-                    </ng-container>
-                </button>
+            <span *ngIf="clearIconTemplate" (click)="clear()" class="p-inputnumber-clear-icon" [attr.data-pc-section]="'clearIcon'">
+                <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
             </span>
+        </ng-container>
+        <span class="p-inputnumber-button-group" *ngIf="showButtons && buttonLayout === 'stacked'" [attr.data-pc-section]="'buttonGroup'">
             <button
-                *ngIf="showButtons && buttonLayout !== 'stacked'"
                 type="button"
                 [ngClass]="_incrementButtonClass"
                 [class]="incrementButtonClass"
                 [disabled]="disabled"
                 tabindex="-1"
-                [attr.aria-hidden]="true"
                 (mousedown)="onUpButtonMouseDown($event)"
                 (mouseup)="onUpButtonMouseUp()"
                 (mouseleave)="onUpButtonMouseLeave()"
                 (keydown)="onUpButtonKeyDown($event)"
                 (keyup)="onUpButtonKeyUp()"
+                [attr.aria-hidden]="true"
                 [attr.data-pc-section]="'incrementbutton'"
             >
                 <span *ngIf="incrementButtonIcon" [ngClass]="incrementButtonIcon" [attr.data-pc-section]="'incrementbuttonicon'"></span>
@@ -1520,8 +1517,8 @@ class InputNumber extends BaseComponent {
                     <ng-template *ngTemplateOutlet="incrementButtonIconTemplate"></ng-template>
                 </ng-container>
             </button>
+
             <button
-                *ngIf="showButtons && buttonLayout !== 'stacked'"
                 type="button"
                 [ngClass]="_decrementButtonClass"
                 [class]="decrementButtonClass"
@@ -1533,7 +1530,7 @@ class InputNumber extends BaseComponent {
                 (mouseleave)="onDownButtonMouseLeave()"
                 (keydown)="onDownButtonKeyDown($event)"
                 (keyup)="onDownButtonKeyUp()"
-                [attr.data-pc-section]="'decrementbutton'"
+                [attr.data-pc-section]="decrementbutton"
             >
                 <span *ngIf="decrementButtonIcon" [ngClass]="decrementButtonIcon" [attr.data-pc-section]="'decrementbuttonicon'"></span>
                 <ng-container *ngIf="!decrementButtonIcon">
@@ -1542,132 +1539,120 @@ class InputNumber extends BaseComponent {
                 </ng-container>
             </button>
         </span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i2.InputText), selector: "[pInputText]", inputs: ["variant", "fluid"] }, { kind: "directive", type: i0.forwardRef(() => i3.AutoFocus), selector: "[pAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: i0.forwardRef(() => TimesIcon), selector: "TimesIcon" }, { kind: "component", type: i0.forwardRef(() => AngleUpIcon), selector: "AngleUpIcon" }, { kind: "component", type: i0.forwardRef(() => AngleDownIcon), selector: "AngleDownIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        <button
+            *ngIf="showButtons && buttonLayout !== 'stacked'"
+            type="button"
+            [ngClass]="_incrementButtonClass"
+            [class]="incrementButtonClass"
+            [disabled]="disabled"
+            tabindex="-1"
+            [attr.aria-hidden]="true"
+            (mousedown)="onUpButtonMouseDown($event)"
+            (mouseup)="onUpButtonMouseUp()"
+            (mouseleave)="onUpButtonMouseLeave()"
+            (keydown)="onUpButtonKeyDown($event)"
+            (keyup)="onUpButtonKeyUp()"
+            [attr.data-pc-section]="'incrementbutton'"
+        >
+            <span *ngIf="incrementButtonIcon" [ngClass]="incrementButtonIcon" [attr.data-pc-section]="'incrementbuttonicon'"></span>
+            <ng-container *ngIf="!incrementButtonIcon">
+                <AngleUpIcon *ngIf="!incrementButtonIconTemplate" [attr.data-pc-section]="'incrementbuttonicon'" />
+                <ng-template *ngTemplateOutlet="incrementButtonIconTemplate"></ng-template>
+            </ng-container>
+        </button>
+        <button
+            *ngIf="showButtons && buttonLayout !== 'stacked'"
+            type="button"
+            [ngClass]="_decrementButtonClass"
+            [class]="decrementButtonClass"
+            [disabled]="disabled"
+            tabindex="-1"
+            [attr.aria-hidden]="true"
+            (mousedown)="onDownButtonMouseDown($event)"
+            (mouseup)="onDownButtonMouseUp()"
+            (mouseleave)="onDownButtonMouseLeave()"
+            (keydown)="onDownButtonKeyDown($event)"
+            (keyup)="onDownButtonKeyUp()"
+            [attr.data-pc-section]="'decrementbutton'"
+        >
+            <span *ngIf="decrementButtonIcon" [ngClass]="decrementButtonIcon" [attr.data-pc-section]="'decrementbuttonicon'"></span>
+            <ng-container *ngIf="!decrementButtonIcon">
+                <AngleDownIcon *ngIf="!decrementButtonIconTemplate" [attr.data-pc-section]="'decrementbuttonicon'" />
+                <ng-template *ngTemplateOutlet="decrementButtonIconTemplate"></ng-template>
+            </ng-container>
+        </button>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i2.InputText), selector: "[pInputText]", inputs: ["variant", "fluid", "size"] }, { kind: "directive", type: i0.forwardRef(() => i3.AutoFocus), selector: "[pAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: i0.forwardRef(() => TimesIcon), selector: "TimesIcon" }, { kind: "component", type: i0.forwardRef(() => AngleUpIcon), selector: "AngleUpIcon" }, { kind: "component", type: i0.forwardRef(() => AngleDownIcon), selector: "AngleDownIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: InputNumber, decorators: [{
             type: Component,
             args: [{
-                    selector: 'p-inputNumber',
+                    selector: 'p-inputNumber, p-inputnumber',
                     template: `
-        <span
-            [ngClass]="_rootClass"
-            [ngStyle]="style"
-            [class]="styleClass"
-            [attr.data-pc-name]="'inputnumber'"
-            [attr.data-pc-section]="'root'"
-        >
-            <input
-                pInputText
-                #input
-                [attr.id]="inputId"
-                role="spinbutton"
-                [ngClass]="'p-inputnumber-input'"
-                [ngStyle]="inputStyle"
-                [class]="inputStyleClass"
-                [value]="formattedValue()"
-                [attr.variant]="variant"
-                [attr.aria-valuemin]="min"
-                [attr.aria-valuemax]="max"
-                [attr.aria-valuenow]="value"
-                [disabled]="disabled"
-                [readonly]="readonly"
-                [attr.placeholder]="placeholder"
-                [attr.aria-label]="ariaLabel"
-                [attr.aria-labelledby]="ariaLabelledBy"
-                [attr.title]="title"
-                [attr.size]="size"
-                [attr.name]="name"
-                [attr.autocomplete]="autocomplete"
-                [attr.maxlength]="maxlength"
-                [attr.tabindex]="tabindex"
-                [attr.aria-required]="ariaRequired"
-                [attr.required]="required"
-                [attr.min]="min"
-                [attr.max]="max"
-                inputmode="decimal"
-                (input)="onUserInput($event)"
-                (keydown)="onInputKeyDown($event)"
-                (keypress)="onInputKeyPress($event)"
-                (paste)="onPaste($event)"
-                (click)="onInputClick()"
-                (focus)="onInputFocus($event)"
-                (blur)="onInputBlur($event)"
-                [attr.data-pc-section]="'input'"
-                pAutoFocus
-                [autofocus]="autofocus"
-                [fluid]="hasFluid"
+        <input
+            pInputText
+            #input
+            [attr.id]="inputId"
+            role="spinbutton"
+            [ngClass]="'p-inputnumber-input'"
+            [ngStyle]="inputStyle"
+            [class]="inputStyleClass"
+            [value]="formattedValue()"
+            [variant]="variant"
+            [attr.aria-valuemin]="min"
+            [attr.aria-valuemax]="max"
+            [attr.aria-valuenow]="value"
+            [disabled]="disabled"
+            [readonly]="readonly"
+            [attr.placeholder]="placeholder"
+            [attr.aria-label]="ariaLabel"
+            [attr.aria-labelledby]="ariaLabelledBy"
+            [attr.title]="title"
+            [attr.size]="size"
+            [attr.name]="name"
+            [attr.autocomplete]="autocomplete"
+            [attr.maxlength]="maxlength"
+            [attr.tabindex]="tabindex"
+            [attr.aria-required]="ariaRequired"
+            [attr.required]="required"
+            [attr.min]="min"
+            [attr.max]="max"
+            inputmode="decimal"
+            (input)="onUserInput($event)"
+            (keydown)="onInputKeyDown($event)"
+            (keypress)="onInputKeyPress($event)"
+            (paste)="onPaste($event)"
+            (click)="onInputClick()"
+            (focus)="onInputFocus($event)"
+            (blur)="onInputBlur($event)"
+            [attr.data-pc-section]="'input'"
+            pAutoFocus
+            [autofocus]="autofocus"
+            [fluid]="hasFluid"
+        />
+        <ng-container *ngIf="buttonLayout != 'vertical' && showClear && value">
+            <TimesIcon
+                *ngIf="!clearIconTemplate"
+                [ngClass]="'p-inputnumber-clear-icon'"
+                (click)="clear()"
+                [attr.data-pc-section]="'clearIcon'"
             />
-            <ng-container *ngIf="buttonLayout != 'vertical' && showClear && value">
-                <TimesIcon
-                    *ngIf="!clearIconTemplate"
-                    [ngClass]="'p-inputnumber-clear-icon'"
-                    (click)="clear()"
-                    [attr.data-pc-section]="'clearIcon'"
-                />
-                <span *ngIf="clearIconTemplate" (click)="clear()" class="p-inputnumber-clear-icon" [attr.data-pc-section]="'clearIcon'">
-                    <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
-                </span>
-            </ng-container>
-            <span
-                class="p-inputnumber-button-group"
-                *ngIf="showButtons && buttonLayout === 'stacked'"
-                [attr.data-pc-section]="'buttonGroup'"
-            >
-                <button
-                    type="button"
-                    [ngClass]="_incrementButtonClass"
-                    [class]="incrementButtonClass"
-                    [disabled]="disabled"
-                    tabindex="-1"
-                    (mousedown)="onUpButtonMouseDown($event)"
-                    (mouseup)="onUpButtonMouseUp()"
-                    (mouseleave)="onUpButtonMouseLeave()"
-                    (keydown)="onUpButtonKeyDown($event)"
-                    (keyup)="onUpButtonKeyUp()"
-                    [attr.aria-hidden]="true"
-                    [attr.data-pc-section]="'incrementbutton'"
-                >
-                    <span *ngIf="incrementButtonIcon" [ngClass]="incrementButtonIcon" [attr.data-pc-section]="'incrementbuttonicon'"></span>
-                    <ng-container *ngIf="!incrementButtonIcon">
-                        <AngleUpIcon *ngIf="!incrementButtonIconTemplate" [attr.data-pc-section]="'incrementbuttonicon'" />
-                        <ng-template *ngTemplateOutlet="incrementButtonIconTemplate"></ng-template>
-                    </ng-container>
-                </button>
-
-                <button
-                    type="button"
-                    [ngClass]="_decrementButtonClass"
-                    [class]="decrementButtonClass"
-                    [disabled]="disabled"
-                    tabindex="-1"
-                    [attr.aria-hidden]="true"
-                    (mousedown)="onDownButtonMouseDown($event)"
-                    (mouseup)="onDownButtonMouseUp()"
-                    (mouseleave)="onDownButtonMouseLeave()"
-                    (keydown)="onDownButtonKeyDown($event)"
-                    (keyup)="onDownButtonKeyUp()"
-                    [attr.data-pc-section]="decrementbutton"
-                >
-                    <span *ngIf="decrementButtonIcon" [ngClass]="decrementButtonIcon" [attr.data-pc-section]="'decrementbuttonicon'"></span>
-                    <ng-container *ngIf="!decrementButtonIcon">
-                        <AngleDownIcon *ngIf="!decrementButtonIconTemplate" [attr.data-pc-section]="'decrementbuttonicon'" />
-                        <ng-template *ngTemplateOutlet="decrementButtonIconTemplate"></ng-template>
-                    </ng-container>
-                </button>
+            <span *ngIf="clearIconTemplate" (click)="clear()" class="p-inputnumber-clear-icon" [attr.data-pc-section]="'clearIcon'">
+                <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
             </span>
+        </ng-container>
+        <span class="p-inputnumber-button-group" *ngIf="showButtons && buttonLayout === 'stacked'" [attr.data-pc-section]="'buttonGroup'">
             <button
-                *ngIf="showButtons && buttonLayout !== 'stacked'"
                 type="button"
                 [ngClass]="_incrementButtonClass"
                 [class]="incrementButtonClass"
                 [disabled]="disabled"
                 tabindex="-1"
-                [attr.aria-hidden]="true"
                 (mousedown)="onUpButtonMouseDown($event)"
                 (mouseup)="onUpButtonMouseUp()"
                 (mouseleave)="onUpButtonMouseLeave()"
                 (keydown)="onUpButtonKeyDown($event)"
                 (keyup)="onUpButtonKeyUp()"
+                [attr.aria-hidden]="true"
                 [attr.data-pc-section]="'incrementbutton'"
             >
                 <span *ngIf="incrementButtonIcon" [ngClass]="incrementButtonIcon" [attr.data-pc-section]="'incrementbuttonicon'"></span>
@@ -1676,8 +1661,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     <ng-template *ngTemplateOutlet="incrementButtonIconTemplate"></ng-template>
                 </ng-container>
             </button>
+
             <button
-                *ngIf="showButtons && buttonLayout !== 'stacked'"
                 type="button"
                 [ngClass]="_decrementButtonClass"
                 [class]="decrementButtonClass"
@@ -1689,7 +1674,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                 (mouseleave)="onDownButtonMouseLeave()"
                 (keydown)="onDownButtonKeyDown($event)"
                 (keyup)="onDownButtonKeyUp()"
-                [attr.data-pc-section]="'decrementbutton'"
+                [attr.data-pc-section]="decrementbutton"
             >
                 <span *ngIf="decrementButtonIcon" [ngClass]="decrementButtonIcon" [attr.data-pc-section]="'decrementbuttonicon'"></span>
                 <ng-container *ngIf="!decrementButtonIcon">
@@ -1698,10 +1683,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                 </ng-container>
             </button>
         </span>
+        <button
+            *ngIf="showButtons && buttonLayout !== 'stacked'"
+            type="button"
+            [ngClass]="_incrementButtonClass"
+            [class]="incrementButtonClass"
+            [disabled]="disabled"
+            tabindex="-1"
+            [attr.aria-hidden]="true"
+            (mousedown)="onUpButtonMouseDown($event)"
+            (mouseup)="onUpButtonMouseUp()"
+            (mouseleave)="onUpButtonMouseLeave()"
+            (keydown)="onUpButtonKeyDown($event)"
+            (keyup)="onUpButtonKeyUp()"
+            [attr.data-pc-section]="'incrementbutton'"
+        >
+            <span *ngIf="incrementButtonIcon" [ngClass]="incrementButtonIcon" [attr.data-pc-section]="'incrementbuttonicon'"></span>
+            <ng-container *ngIf="!incrementButtonIcon">
+                <AngleUpIcon *ngIf="!incrementButtonIconTemplate" [attr.data-pc-section]="'incrementbuttonicon'" />
+                <ng-template *ngTemplateOutlet="incrementButtonIconTemplate"></ng-template>
+            </ng-container>
+        </button>
+        <button
+            *ngIf="showButtons && buttonLayout !== 'stacked'"
+            type="button"
+            [ngClass]="_decrementButtonClass"
+            [class]="decrementButtonClass"
+            [disabled]="disabled"
+            tabindex="-1"
+            [attr.aria-hidden]="true"
+            (mousedown)="onDownButtonMouseDown($event)"
+            (mouseup)="onDownButtonMouseUp()"
+            (mouseleave)="onDownButtonMouseLeave()"
+            (keydown)="onDownButtonKeyDown($event)"
+            (keyup)="onDownButtonKeyUp()"
+            [attr.data-pc-section]="'decrementbutton'"
+        >
+            <span *ngIf="decrementButtonIcon" [ngClass]="decrementButtonIcon" [attr.data-pc-section]="'decrementbuttonicon'"></span>
+            <ng-container *ngIf="!decrementButtonIcon">
+                <AngleDownIcon *ngIf="!decrementButtonIconTemplate" [attr.data-pc-section]="'decrementbuttonicon'" />
+                <ng-template *ngTemplateOutlet="decrementButtonIconTemplate"></ng-template>
+            </ng-container>
+        </button>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [INPUTNUMBER_VALUE_ACCESSOR, InputNumberStyle],
                     encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[attr.data-pc-name]': "'inputnumber'",
+                        '[attr.data-pc-section]': "'root'",
+                        style: 'style',
+                    },
                 }]
         }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { showButtons: [{
                 type: Input,
@@ -1823,6 +1855,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             }], templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 class InputNumberModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: InputNumberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1842,5 +1877,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { INPUTNUMBER_VALUE_ACCESSOR, InputNumber, InputNumberModule };
+export { INPUTNUMBER_VALUE_ACCESSOR, InputNumber, InputNumberClasses, InputNumberModule, InputNumberStyle };
 //# sourceMappingURL=primeng-inputnumber.mjs.map