primeng 18.0.0-rc.1 → 18.0.0

package/fesm2022/primeng-inputnumber.mjs

@@ -50,19 +50,19 @@ const theme = ({ dt }) => `
     flex-direction: column;
     position: absolute;
     top: 1px;
-    right: 1px;
+    inset-inline-end: 1px;
     height: calc(100% - 2px);
     z-index: 1;
 }
 
 .p-inputnumber-stacked .p-inputnumber-increment-button {
     padding: 0;
-    border-top-right-radius: calc(${dt('inputnumber.button.border.radius')} - 1px);
+    border-end-start-radius: calc(${dt('inputnumber.button.border.radius')} - 1px);
 }
 
 .p-inputnumber-stacked .p-inputnumber-decrement-button {
     padding: 0;
-    border-bottom-right-radius: calc(${dt('inputnumber.button.border.radius')} - 1px);
+    border-end-end-radius: calc(${dt('inputnumber.button.border.radius')} - 1px);
 }
 
 .p-inputnumber-stacked .p-inputnumber-button {
@@ -84,9 +84,9 @@ const theme = ({ dt }) => `
 
 .p-inputnumber-horizontal .p-inputnumber-increment-button {
     order: 3;
-    border-top-right-radius: ${dt('inputnumber.button.border.radius')};
-    border-bottom-right-radius: ${dt('inputnumber.button.border.radius')};
-    border-left: 0 none;
+    border-start-end-radius: ${dt('inputnumber.button.border.radius')};
+    border-end-end-radius: ${dt('inputnumber.button.border.radius')};
+    border-inline-start: 0 none;
 }
 
 .p-inputnumber-horizontal .p-inputnumber-input {
@@ -96,9 +96,9 @@ const theme = ({ dt }) => `
 
 .p-inputnumber-horizontal .p-inputnumber-decrement-button {
     order: 1;
-    border-top-left-radius: ${dt('inputnumber.button.border.radius')};
-    border-bottom-left-radius: ${dt('inputnumber.button.border.radius')};
-    border-right: 0 none;
+    border-start-start-radius: ${dt('inputnumber.button.border.radius')};
+    border-end-start-radius: ${dt('inputnumber.button.border.radius')};
+    border-inline-end: 0 none;
 }
 
 .p-floatlabel:has(.p-inputnumber-horizontal) label {
@@ -111,7 +111,8 @@ const theme = ({ dt }) => `
 
 .p-inputnumber-vertical .p-inputnumber-button {
     border: 1px solid ${dt('inputnumber.button.border.color')};
-    padding: ${dt('inputnumber.button.vertical.padding')}; 0;
+    padding-block: ${dt('inputnumber.button.vertical.padding')};
+    padding-inline: 0;
 }
 
 .p-inputnumber-vertical .p-inputnumber-button:hover {
@@ -124,10 +125,10 @@ const theme = ({ dt }) => `
 
 .p-inputnumber-vertical .p-inputnumber-increment-button {
     order: 1;
-    border-top-left-radius: ${dt('inputnumber.button.border.radius')};
-    border-top-right-radius: ${dt('inputnumber.button.border.radius')};
+    border-start-start-radius: ${dt('inputnumber.button.border.radius')};
+    border-start-end-radius: ${dt('inputnumber.button.border.radius')};
     width: 100%;
-    border-bottom: 0 none;
+    border-block-end: 0 none;
 }
 
 .p-inputnumber-vertical .p-inputnumber-input {
@@ -138,10 +139,10 @@ const theme = ({ dt }) => `
 
 .p-inputnumber-vertical .p-inputnumber-decrement-button {
     order: 3;
-    border-bottom-left-radius: ${dt('inputnumber.button.border.radius')};
-    border-bottom-right-radius: ${dt('inputnumber.button.border.radius')};
+    border-end-start-radius: ${dt('inputnumber.button.border.radius')};
+    border-end-end-radius: ${dt('inputnumber.button.border.radius')};
     width: 100%;
-    border-top: 0 none;
+    border-block-start: 0 none;
 }
 
 .p-inputnumber-input {
@@ -172,10 +173,17 @@ const theme = ({ dt }) => `
     height: ${dt('form.field.lg.font.size')};
 }
 
-/* For PrimeNG */
 p-inputnumber.ng-invalid.ng-dirty > .p-inputtext {
     border-color: ${dt('inputtext.invalid.border.color')};
-};
+}
+
+p-inputnumber.ng-invalid.ng-dirty > .p-inputtext:enabled:focus {
+    border-color: ${dt('inputtext.focus.border.color')};
+}
+
+p-inputnumber.ng-invalid.ng-dirty > .p-inputtext::placeholder {
+    color: ${dt('inputtext.invalid.placeholder.color')};
+}
 `;
 const classes = {
     root: ({ instance }) => ({
@@ -268,7 +276,7 @@ function InputNumber_ng_container_2_span_2_Template(rf, ctx) { if (rf & 1) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵattribute("data-pc-section", "clearIcon");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.clearIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.clearicon);
 } }
 function InputNumber_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -277,9 +285,9 @@ function InputNumber_ng_container_2_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.clearIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r2.clearicon);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.clearIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r2.clearicon);
 } }
 function InputNumber_span_3_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 13);
@@ -304,9 +312,9 @@ function InputNumber_span_3_ng_container_3_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.incrementButtonIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r2.incrementbuttonicon);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.incrementButtonIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.incrementbuttonicon);
 } }
 function InputNumber_span_3_span_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 13);
@@ -331,9 +339,9 @@ function InputNumber_span_3_ng_container_6_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.decrementButtonIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r2.decrementbuttonicon);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.decrementButtonIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.decrementbuttonicon);
 } }
 function InputNumber_span_3_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
@@ -388,9 +396,9 @@ function InputNumber_button_4_ng_container_2_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.incrementButtonIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r2.incrementbuttonicon);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.incrementButtonIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.incrementbuttonicon);
 } }
 function InputNumber_button_4_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
@@ -431,9 +439,9 @@ function InputNumber_button_5_ng_container_2_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.decrementButtonIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r2.decrementbuttonicon);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.decrementButtonIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.decrementbuttonicon);
 } }
 function InputNumber_button_5_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
@@ -719,17 +727,17 @@ class InputNumber extends BaseComponent {
      * Template of the clear icon.
      * @group Templates
      */
-    clearIconTemplate;
+    clearicon;
     /**
      * Template of the icrement button icon.
      * @group Templates
      */
-    incrementButtonIconTemplate;
+    incrementbuttonicon;
     /**
      * Template of the decrement button icon.
      * @group Templates
      */
-    decrementButtonIconTemplate;
+    decrementbuttonicon;
     input;
     value;
     onModelChange = () => { };
@@ -804,13 +812,13 @@ class InputNumber extends BaseComponent {
         this.templates.forEach((item) => {
             switch (item.getType()) {
                 case 'clearicon':
-                    this.clearIconTemplate = item.template;
+                    this.clearicon = item.template;
                     break;
                 case 'incrementbuttonicon':
-                    this.incrementButtonIconTemplate = item.template;
+                    this.incrementbuttonicon = item.template;
                     break;
                 case 'decrementbuttonicon':
-                    this.decrementButtonIconTemplate = item.template;
+                    this.decrementbuttonicon = item.template;
                     break;
             }
         });
@@ -1224,9 +1232,13 @@ class InputNumber extends BaseComponent {
             char = this._decimalChar;
             code = char.charCodeAt(0);
         }
-        const newValue = this.parseValue(this.input.nativeElement.value + char);
+        const { value, selectionStart, selectionEnd } = this.input.nativeElement;
+        const newValue = this.parseValue(value + char);
         const newValueStr = newValue != null ? newValue.toString() : '';
-        if (this.maxlength && this.getSelectedText()?.length == this.maxlength) {
+        const selectedValue = value.substring(selectionStart, selectionEnd);
+        const selectedValueParsed = this.parseValue(selectedValue);
+        const selectedValueStr = selectedValueParsed != null ? selectedValueParsed.toString() : '';
+        if (selectionStart !== selectionEnd && selectedValueStr.length > 0) {
             this.insert(event, char, { isDecimalSign, isMinusSign });
             return;
         }
@@ -1237,12 +1249,6 @@ class InputNumber extends BaseComponent {
             this.insert(event, char, { isDecimalSign, isMinusSign });
         }
     }
-    getSelectedText() {
-        return (window
-            ?.getSelection()
-            ?.toString()
-            .replaceAll(/[^0-9']/g, '') || '');
-    }
     onPaste(event) {
         if (!this.disabled && !this.readonly) {
             event.preventDefault();
@@ -1652,9 +1658,9 @@ class InputNumber extends BaseComponent {
             i0.ɵɵcontentQuery(dirIndex, _c2, 5);
         } if (rf & 2) {
             let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.clearIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.incrementButtonIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.decrementButtonIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.clearicon = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.incrementbuttonicon = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.decrementbuttonicon = _t.first);
         } }, viewQuery: function InputNumber_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c3, 5);
         } if (rf & 2) {
@@ -1663,7 +1669,7 @@ class InputNumber extends BaseComponent {
         } }, hostVars: 4, hostBindings: function InputNumber_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("data-pc-name", "inputnumber")("data-pc-section", "root");
             i0.ɵɵclassMap(ctx.hostClasses);
-        } }, inputs: { showButtons: [2, "showButtons", "showButtons", booleanAttribute], format: [2, "format", "format", booleanAttribute], buttonLayout: "buttonLayout", inputId: "inputId", styleClass: "styleClass", style: "style", placeholder: "placeholder", size: "size", maxlength: [2, "maxlength", "maxlength", numberAttribute], tabindex: [2, "tabindex", "tabindex", numberAttribute], title: "title", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", ariaRequired: [2, "ariaRequired", "ariaRequired", booleanAttribute], name: "name", required: [2, "required", "required", booleanAttribute], autocomplete: "autocomplete", min: [2, "min", "min", numberAttribute], max: [2, "max", "max", numberAttribute], incrementButtonClass: "incrementButtonClass", decrementButtonClass: "decrementButtonClass", incrementButtonIcon: "incrementButtonIcon", decrementButtonIcon: "decrementButtonIcon", readonly: [2, "readonly", "readonly", booleanAttribute], step: [2, "step", "step", numberAttribute], allowEmpty: [2, "allowEmpty", "allowEmpty", booleanAttribute], locale: "locale", localeMatcher: "localeMatcher", mode: "mode", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: [2, "useGrouping", "useGrouping", booleanAttribute], variant: "variant", minFractionDigits: [2, "minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, null)], maxFractionDigits: [2, "maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, null)], prefix: "prefix", suffix: "suffix", inputStyle: "inputStyle", inputStyleClass: "inputStyleClass", showClear: [2, "showClear", "showClear", booleanAttribute], autofocus: [2, "autofocus", "autofocus", booleanAttribute], disabled: "disabled", fluid: [2, "fluid", "fluid", booleanAttribute] }, outputs: { onInput: "onInput", onFocus: "onFocus", onBlur: "onBlur", onKeyDown: "onKeyDown", onClear: "onClear" }, standalone: true, features: [i0.ɵɵProvidersFeature([INPUTNUMBER_VALUE_ACCESSOR, InputNumberStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature, i0.ɵɵStandaloneFeature], decls: 6, vars: 32, consts: [["input", ""], ["pInputText", "", "role", "spinbutton", "inputmode", "decimal", 3, "input", "keydown", "keypress", "paste", "click", "focus", "blur", "ngClass", "ngStyle", "value", "variant", "disabled", "readonly", "size", "pAutoFocus", "fluid"], [4, "ngIf"], ["class", "p-inputnumber-button-group", 4, "ngIf"], ["type", "button", "tabindex", "-1", 3, "ngClass", "class", "disabled", "mousedown", "mouseup", "mouseleave", "keydown", "keyup", 4, "ngIf"], [3, "ngClass", "click", 4, "ngIf"], ["class", "p-inputnumber-clear-icon", 3, "click", 4, "ngIf"], [3, "click", "ngClass"], [1, "p-inputnumber-clear-icon", 3, "click"], [4, "ngTemplateOutlet"], [1, "p-inputnumber-button-group"], ["type", "button", "tabindex", "-1", 3, "mousedown", "mouseup", "mouseleave", "keydown", "keyup", "ngClass", "disabled"], [3, "ngClass", 4, "ngIf"], [3, "ngClass"]], template: function InputNumber_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { showButtons: [2, "showButtons", "showButtons", booleanAttribute], format: [2, "format", "format", booleanAttribute], buttonLayout: "buttonLayout", inputId: "inputId", styleClass: "styleClass", style: "style", placeholder: "placeholder", size: "size", maxlength: [2, "maxlength", "maxlength", numberAttribute], tabindex: [2, "tabindex", "tabindex", numberAttribute], title: "title", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", ariaRequired: [2, "ariaRequired", "ariaRequired", booleanAttribute], name: "name", required: [2, "required", "required", booleanAttribute], autocomplete: "autocomplete", min: [2, "min", "min", numberAttribute], max: [2, "max", "max", numberAttribute], incrementButtonClass: "incrementButtonClass", decrementButtonClass: "decrementButtonClass", incrementButtonIcon: "incrementButtonIcon", decrementButtonIcon: "decrementButtonIcon", readonly: [2, "readonly", "readonly", booleanAttribute], step: [2, "step", "step", numberAttribute], allowEmpty: [2, "allowEmpty", "allowEmpty", booleanAttribute], locale: "locale", localeMatcher: "localeMatcher", mode: "mode", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: [2, "useGrouping", "useGrouping", booleanAttribute], variant: "variant", minFractionDigits: [2, "minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, null)], maxFractionDigits: [2, "maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, null)], prefix: "prefix", suffix: "suffix", inputStyle: "inputStyle", inputStyleClass: "inputStyleClass", showClear: [2, "showClear", "showClear", booleanAttribute], autofocus: [2, "autofocus", "autofocus", booleanAttribute], disabled: "disabled", fluid: [2, "fluid", "fluid", booleanAttribute] }, outputs: { onInput: "onInput", onFocus: "onFocus", onBlur: "onBlur", onKeyDown: "onKeyDown", onClear: "onClear" }, standalone: true, features: [i0.ɵɵProvidersFeature([INPUTNUMBER_VALUE_ACCESSOR, InputNumberStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature, i0.ɵɵStandaloneFeature], decls: 6, vars: 32, consts: [["input", ""], ["pInputText", "", "role", "spinbutton", "inputmode", "decimal", 3, "input", "keydown", "keypress", "paste", "click", "focus", "blur", "ngClass", "ngStyle", "value", "variant", "disabled", "readonly", "pSize", "pAutoFocus", "fluid"], [4, "ngIf"], ["class", "p-inputnumber-button-group", 4, "ngIf"], ["type", "button", "tabindex", "-1", 3, "ngClass", "class", "disabled", "mousedown", "mouseup", "mouseleave", "keydown", "keyup", 4, "ngIf"], [3, "ngClass", "click", 4, "ngIf"], ["class", "p-inputnumber-clear-icon", 3, "click", 4, "ngIf"], [3, "click", "ngClass"], [1, "p-inputnumber-clear-icon", 3, "click"], [4, "ngTemplateOutlet"], [1, "p-inputnumber-button-group"], ["type", "button", "tabindex", "-1", 3, "mousedown", "mouseup", "mouseleave", "keydown", "keyup", "ngClass", "disabled"], [3, "ngClass", 4, "ngIf"], [3, "ngClass"]], template: function InputNumber_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "input", 1, 0);
             i0.ɵɵlistener("input", function InputNumber_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onUserInput($event)); })("keydown", function InputNumber_Template_input_keydown_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInputKeyDown($event)); })("keypress", function InputNumber_Template_input_keypress_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInputKeyPress($event)); })("paste", function InputNumber_Template_input_paste_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onPaste($event)); })("click", function InputNumber_Template_input_click_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInputClick()); })("focus", function InputNumber_Template_input_focus_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInputFocus($event)); })("blur", function InputNumber_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInputBlur($event)); });
@@ -1671,7 +1677,7 @@ class InputNumber extends BaseComponent {
             i0.ɵɵtemplate(2, InputNumber_ng_container_2_Template, 3, 2, "ng-container", 2)(3, InputNumber_span_3_Template, 7, 17, "span", 3)(4, InputNumber_button_4_Template, 3, 8, "button", 4)(5, InputNumber_button_5_Template, 3, 8, "button", 4);
         } if (rf & 2) {
             i0.ɵɵclassMap(ctx.inputStyleClass);
-            i0.ɵɵproperty("ngClass", "p-inputnumber-input")("ngStyle", ctx.inputStyle)("value", ctx.formattedValue())("variant", ctx.variant)("disabled", ctx.disabled)("readonly", ctx.readonly)("size", ctx.size)("pAutoFocus", ctx.autofocus)("fluid", ctx.hasFluid);
+            i0.ɵɵproperty("ngClass", "p-inputnumber-input")("ngStyle", ctx.inputStyle)("value", ctx.formattedValue())("variant", ctx.variant)("disabled", ctx.disabled)("readonly", ctx.readonly)("pSize", ctx.size)("pAutoFocus", ctx.autofocus)("fluid", ctx.hasFluid);
             i0.ɵɵattribute("id", ctx.inputId)("aria-valuemin", ctx.min)("aria-valuemax", ctx.max)("aria-valuenow", ctx.value)("placeholder", ctx.placeholder)("aria-label", ctx.ariaLabel)("aria-labelledby", ctx.ariaLabelledBy)("title", ctx.title)("name", ctx.name)("autocomplete", ctx.autocomplete)("maxlength", ctx.maxlength)("tabindex", ctx.tabindex)("aria-required", ctx.ariaRequired)("required", ctx.required)("min", ctx.min)("max", ctx.max)("data-pc-section", "input");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.buttonLayout != "vertical" && ctx.showClear && ctx.value);
@@ -1709,7 +1715,7 @@ class InputNumber extends BaseComponent {
             [attr.aria-label]="ariaLabel"
             [attr.aria-labelledby]="ariaLabelledBy"
             [attr.title]="title"
-            [size]="size"
+            [pSize]="size"
             [attr.name]="name"
             [attr.autocomplete]="autocomplete"
             [attr.maxlength]="maxlength"
@@ -1731,9 +1737,9 @@ class InputNumber extends BaseComponent {
             [fluid]="hasFluid"
         />
         <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>
+            <TimesIcon *ngIf="!clearicon" [ngClass]="'p-inputnumber-clear-icon'" (click)="clear()" [attr.data-pc-section]="'clearIcon'" />
+            <span *ngIf="clearicon" (click)="clear()" class="p-inputnumber-clear-icon" [attr.data-pc-section]="'clearIcon'">
+                <ng-template *ngTemplateOutlet="clearicon"></ng-template>
             </span>
         </ng-container>
         <span class="p-inputnumber-button-group" *ngIf="showButtons && buttonLayout === 'stacked'" [attr.data-pc-section]="'buttonGroup'">
@@ -1753,8 +1759,8 @@ class InputNumber extends BaseComponent {
             >
                 <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>
+                    <AngleUpIcon *ngIf="!incrementbuttonicon" [attr.data-pc-section]="'incrementbuttonicon'" />
+                    <ng-template *ngTemplateOutlet="incrementbuttonicon"></ng-template>
                 </ng-container>
             </button>
 
@@ -1774,8 +1780,8 @@ class InputNumber extends BaseComponent {
             >
                 <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>
+                    <AngleDownIcon *ngIf="!decrementbuttonicon" [attr.data-pc-section]="'decrementbuttonicon'" />
+                    <ng-template *ngTemplateOutlet="decrementbuttonicon"></ng-template>
                 </ng-container>
             </button>
         </span>
@@ -1796,8 +1802,8 @@ class InputNumber extends BaseComponent {
         >
             <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>
+                <AngleUpIcon *ngIf="!incrementbuttonicon" [attr.data-pc-section]="'incrementbuttonicon'" />
+                <ng-template *ngTemplateOutlet="incrementbuttonicon"></ng-template>
             </ng-container>
         </button>
         <button
@@ -1817,8 +1823,8 @@ class InputNumber extends BaseComponent {
         >
             <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>
+                <AngleDownIcon *ngIf="!decrementbuttonicon" [attr.data-pc-section]="'decrementbuttonicon'" />
+                <ng-template *ngTemplateOutlet="decrementbuttonicon"></ng-template>
             </ng-container>
         </button>
     `,
@@ -1944,13 +1950,13 @@ class InputNumber extends BaseComponent {
             type: Output
         }], onClear: [{
             type: Output
-        }], clearIconTemplate: [{
+        }], clearicon: [{
             type: ContentChild,
             args: ['clearicon']
-        }], incrementButtonIconTemplate: [{
+        }], incrementbuttonicon: [{
             type: ContentChild,
             args: ['icrementbuttonicon']
-        }], decrementButtonIconTemplate: [{
+        }], decrementbuttonicon: [{
             type: ContentChild,
             args: ['decrementbuttonicon']
         }], input: [{