primeng 20.0.0-rc.1 → 20.0.0-rc.3

package/fesm2022/primeng-inputnumber.mjs

@@ -9,30 +9,29 @@ import { AutoFocus } from 'primeng/autofocus';
 import { BaseInput } from 'primeng/baseinput';
 import { TimesIcon, AngleUpIcon, AngleDownIcon } from 'primeng/icons';
 import { InputText } from 'primeng/inputtext';
-import { css, dt } from '@primeuix/styled';
 import { style } from '@primeuix/styles/inputnumber';
 import { BaseStyle } from 'primeng/base';
 
-const theme = css `
+const theme = /*css*/ `
     ${style}
 
     /* For PrimeNG */
     p-inputNumber.ng-invalid.ng-dirty > .p-inputtext,
     p-input-number.ng-invalid.ng-dirty > .p-inputtext,
     p-inputnumber.ng-invalid.ng-dirty > .p-inputtext {
-        border-color: ${dt('inputtext.invalid.border.color')};
+        border-color: dt('inputtext.invalid.border.color');
     }
 
     p-inputNumber.ng-invalid.ng-dirty > .p-inputtext:enabled:focus,
     p-input-number.ng-invalid.ng-dirty > .p-inputtext:enabled:focus,
     p-inputnumber.ng-invalid.ng-dirty > .p-inputtext:enabled:focus {
-        border-color: ${dt('inputtext.focus.border.color')};
+        border-color: dt('inputtext.focus.border.color');
     }
 
     p-inputNumber.ng-invalid.ng-dirty > .p-inputtext::placeholder,
     p-input-number.ng-invalid.ng-dirty > .p-inputtext::placeholder,
     p-inputnumber.ng-invalid.ng-dirty > .p-inputtext::placeholder {
-        color: ${dt('inputtext.invalid.placeholder.color')};
+        color: dt('inputtext.invalid.placeholder.color');
     }
 `;
 const classes = {
@@ -338,8 +337,6 @@ class InputNumber extends BaseInput {
     _incrementButtonIconTemplate;
     _decrementButtonIconTemplate;
     value;
-    onModelChange = () => { };
-    onModelTouched = () => { };
     focused;
     initialized;
     groupChar = '';
@@ -565,19 +562,19 @@ class InputNumber extends BaseInput {
             this.clearTimer();
             return;
         }
-        if (!this.disabled()) {
+        if (!this.$disabled()) {
             this.input?.nativeElement.focus();
             this.repeat(event, null, 1);
             event.preventDefault();
         }
     }
     onUpButtonMouseUp() {
-        if (!this.disabled()) {
+        if (!this.$disabled()) {
             this.clearTimer();
         }
     }
     onUpButtonMouseLeave() {
-        if (!this.disabled()) {
+        if (!this.$disabled()) {
             this.clearTimer();
         }
     }
@@ -587,7 +584,7 @@ class InputNumber extends BaseInput {
         }
     }
     onUpButtonKeyUp() {
-        if (!this.disabled()) {
+        if (!this.$disabled()) {
             this.clearTimer();
         }
     }
@@ -596,24 +593,24 @@ class InputNumber extends BaseInput {
             this.clearTimer();
             return;
         }
-        if (!this.disabled()) {
+        if (!this.$disabled()) {
             this.input?.nativeElement.focus();
             this.repeat(event, null, -1);
             event.preventDefault();
         }
     }
     onDownButtonMouseUp() {
-        if (!this.disabled()) {
+        if (!this.$disabled()) {
             this.clearTimer();
         }
     }
     onDownButtonMouseLeave() {
-        if (!this.disabled()) {
+        if (!this.$disabled()) {
             this.clearTimer();
         }
     }
     onDownButtonKeyUp() {
-        if (!this.disabled()) {
+        if (!this.$disabled()) {
             this.clearTimer();
         }
     }
@@ -819,7 +816,7 @@ class InputNumber extends BaseInput {
         }
     }
     onPaste(event) {
-        if (!this.disabled() && !this.readonly) {
+        if (!this.$disabled() && !this.readonly) {
             event.preventDefault();
             let data = (event.clipboardData || this.document.defaultView['clipboardData']).getData('Text');
             if (data) {
@@ -1183,7 +1180,7 @@ class InputNumber extends BaseInput {
         this.onBlur.emit(event);
     }
     formattedValue() {
-        const val = !this.modelValue() && !this.allowEmpty ? 0 : this.modelValue();
+        const val = !this.value && !this.allowEmpty ? 0 : this.value;
         return this.formatValue(val);
     }
     updateModel(event, value) {
@@ -1198,17 +1195,17 @@ class InputNumber extends BaseInput {
             this.onModelChange(value);
         }
     }
-    writeValue(value) {
+    /**
+     * @override
+     *
+     * @see {@link BaseEditableHolder.writeControlValue}
+     * Writes the value to the control.
+     */
+    writeControlValue(value, setModelValue) {
         this.value = value ? Number(value) : value;
-        this.writeModelValue(value);
+        setModelValue(value);
         this.cd.markForCheck();
     }
-    registerOnChange(fn) {
-        this.onModelChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onModelTouched = fn;
-    }
     clearTimer() {
         if (this.timer) {
             clearInterval(this.timer);
@@ -1222,8 +1219,8 @@ class InputNumber extends BaseInput {
             [attr.id]="inputId"
             role="spinbutton"
             [class]="cn(cx('pcInputText'), inputStyleClass)"
-            [ngStyle]="inputStyle"
             [value]="formattedValue()"
+            [ngStyle]="inputStyle"
             [variant]="$variant()"
             [invalid]="invalid()"
             [attr.aria-valuemin]="min()"
@@ -1247,7 +1244,7 @@ class InputNumber extends BaseInput {
             [attr.step]="step() ?? 1"
             [attr.required]="required() ? '' : undefined"
             [attr.readonly]="readonly ? '' : undefined"
-            [attr.disabled]="disabled() ? '' : undefined"
+            [attr.disabled]="$disabled() ? '' : undefined"
             inputmode="decimal"
             (input)="onUserInput($event)"
             (keydown)="onInputKeyDown($event)"
@@ -1261,7 +1258,7 @@ class InputNumber extends BaseInput {
             [fluid]="hasFluid"
         />
         <ng-container *ngIf="buttonLayout != 'vertical' && showClear && value">
-            <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear()" [attr.data-pc-section]="'clearIcon'" />
+            <svg data-p-icon="times" *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear()" [attr.data-pc-section]="'clearIcon'" />
             <span *ngIf="clearIconTemplate || _clearIconTemplate" (click)="clear()" [class]="cx('clearIcon')" [attr.data-pc-section]="'clearIcon'">
                 <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
             </span>
@@ -1270,7 +1267,7 @@ class InputNumber extends BaseInput {
             <button
                 type="button"
                 [class]="cn(cx('incrementButton'), incrementButtonClass)"
-                [attr.disabled]="disabled() ? '' : undefined"
+                [attr.disabled]="$disabled() ? '' : undefined"
                 tabindex="-1"
                 (mousedown)="onUpButtonMouseDown($event)"
                 (mouseup)="onUpButtonMouseUp()"
@@ -1282,7 +1279,7 @@ class InputNumber extends BaseInput {
             >
                 <span *ngIf="incrementButtonIcon" [ngClass]="incrementButtonIcon" [attr.data-pc-section]="'incrementbuttonicon'"></span>
                 <ng-container *ngIf="!incrementButtonIcon">
-                    <AngleUpIcon *ngIf="!incrementButtonIconTemplate && !_incrementButtonIconTemplate" [attr.data-pc-section]="'incrementbuttonicon'" />
+                    <svg data-p-icon="angle-up" *ngIf="!incrementButtonIconTemplate && !_incrementButtonIconTemplate" [attr.data-pc-section]="'incrementbuttonicon'" />
                     <ng-template *ngTemplateOutlet="incrementButtonIconTemplate || _incrementButtonIconTemplate"></ng-template>
                 </ng-container>
             </button>
@@ -1290,7 +1287,7 @@ class InputNumber extends BaseInput {
             <button
                 type="button"
                 [class]="cn(cx('decrementButton'), decrementButtonClass)"
-                [attr.disabled]="disabled() ? '' : undefined"
+                [attr.disabled]="$disabled() ? '' : undefined"
                 tabindex="-1"
                 [attr.aria-hidden]="true"
                 (mousedown)="onDownButtonMouseDown($event)"
@@ -1302,7 +1299,7 @@ class InputNumber extends BaseInput {
             >
                 <span *ngIf="decrementButtonIcon" [ngClass]="decrementButtonIcon" [attr.data-pc-section]="'decrementbuttonicon'"></span>
                 <ng-container *ngIf="!decrementButtonIcon">
-                    <AngleDownIcon *ngIf="!decrementButtonIconTemplate && !_decrementButtonIconTemplate" [attr.data-pc-section]="'decrementbuttonicon'" />
+                    <svg data-p-icon="angle-down" *ngIf="!decrementButtonIconTemplate && !_decrementButtonIconTemplate" [attr.data-pc-section]="'decrementbuttonicon'" />
                     <ng-template *ngTemplateOutlet="decrementButtonIconTemplate || _decrementButtonIconTemplate"></ng-template>
                 </ng-container>
             </button>
@@ -1311,7 +1308,7 @@ class InputNumber extends BaseInput {
             *ngIf="showButtons && buttonLayout !== 'stacked'"
             type="button"
             [class]="cx('incrementButton')"
-            [attr.disabled]="disabled() ? '' : undefined"
+            [attr.disabled]="$disabled() ? '' : undefined"
             tabindex="-1"
             [attr.aria-hidden]="true"
             (mousedown)="onUpButtonMouseDown($event)"
@@ -1323,7 +1320,7 @@ class InputNumber extends BaseInput {
         >
             <span *ngIf="incrementButtonIcon" [ngClass]="incrementButtonIcon" [attr.data-pc-section]="'incrementbuttonicon'"></span>
             <ng-container *ngIf="!incrementButtonIcon">
-                <AngleUpIcon *ngIf="!incrementButtonIconTemplate && !_incrementButtonIconTemplate" [attr.data-pc-section]="'incrementbuttonicon'" />
+                <svg data-p-icon="angle-up" *ngIf="!incrementButtonIconTemplate && !_incrementButtonIconTemplate" [attr.data-pc-section]="'incrementbuttonicon'" />
                 <ng-template *ngTemplateOutlet="incrementButtonIconTemplate || _incrementButtonIconTemplate"></ng-template>
             </ng-container>
         </button>
@@ -1331,7 +1328,7 @@ class InputNumber extends BaseInput {
             *ngIf="showButtons && buttonLayout !== 'stacked'"
             type="button"
             [class]="cx('decrementButton')"
-            [attr.disabled]="disabled() ? '' : undefined"
+            [attr.disabled]="$disabled() ? '' : undefined"
             tabindex="-1"
             [attr.aria-hidden]="true"
             (mousedown)="onDownButtonMouseDown($event)"
@@ -1343,11 +1340,11 @@ class InputNumber extends BaseInput {
         >
             <span *ngIf="decrementButtonIcon" [ngClass]="decrementButtonIcon" [attr.data-pc-section]="'decrementbuttonicon'"></span>
             <ng-container *ngIf="!decrementButtonIcon">
-                <AngleDownIcon *ngIf="!decrementButtonIconTemplate && !_decrementButtonIconTemplate" [attr.data-pc-section]="'decrementbuttonicon'" />
+                <svg data-p-icon="angle-down" *ngIf="!decrementButtonIconTemplate && !_decrementButtonIconTemplate" [attr.data-pc-section]="'decrementbuttonicon'" />
                 <ng-template *ngTemplateOutlet="decrementButtonIconTemplate || _decrementButtonIconTemplate"></ng-template>
             </ng-container>
         </button>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "component", type: AngleUpIcon, selector: "AngleUpIcon" }, { kind: "component", type: AngleDownIcon, selector: "AngleDownIcon" }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: TimesIcon, selector: "[data-p-icon=\"times\"]" }, { kind: "component", type: AngleUpIcon, selector: "[data-p-icon=\"angle-up\"]" }, { kind: "component", type: AngleDownIcon, selector: "[data-p-icon=\"angle-down\"]" }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: InputNumber, decorators: [{
             type: Component,
@@ -1362,8 +1359,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
             [attr.id]="inputId"
             role="spinbutton"
             [class]="cn(cx('pcInputText'), inputStyleClass)"
-            [ngStyle]="inputStyle"
             [value]="formattedValue()"
+            [ngStyle]="inputStyle"
             [variant]="$variant()"
             [invalid]="invalid()"
             [attr.aria-valuemin]="min()"
@@ -1387,7 +1384,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
             [attr.step]="step() ?? 1"
             [attr.required]="required() ? '' : undefined"
             [attr.readonly]="readonly ? '' : undefined"
-            [attr.disabled]="disabled() ? '' : undefined"
+            [attr.disabled]="$disabled() ? '' : undefined"
             inputmode="decimal"
             (input)="onUserInput($event)"
             (keydown)="onInputKeyDown($event)"
@@ -1401,7 +1398,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
             [fluid]="hasFluid"
         />
         <ng-container *ngIf="buttonLayout != 'vertical' && showClear && value">
-            <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear()" [attr.data-pc-section]="'clearIcon'" />
+            <svg data-p-icon="times" *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear()" [attr.data-pc-section]="'clearIcon'" />
             <span *ngIf="clearIconTemplate || _clearIconTemplate" (click)="clear()" [class]="cx('clearIcon')" [attr.data-pc-section]="'clearIcon'">
                 <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
             </span>
@@ -1410,7 +1407,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
             <button
                 type="button"
                 [class]="cn(cx('incrementButton'), incrementButtonClass)"
-                [attr.disabled]="disabled() ? '' : undefined"
+                [attr.disabled]="$disabled() ? '' : undefined"
                 tabindex="-1"
                 (mousedown)="onUpButtonMouseDown($event)"
                 (mouseup)="onUpButtonMouseUp()"
@@ -1422,7 +1419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
             >
                 <span *ngIf="incrementButtonIcon" [ngClass]="incrementButtonIcon" [attr.data-pc-section]="'incrementbuttonicon'"></span>
                 <ng-container *ngIf="!incrementButtonIcon">
-                    <AngleUpIcon *ngIf="!incrementButtonIconTemplate && !_incrementButtonIconTemplate" [attr.data-pc-section]="'incrementbuttonicon'" />
+                    <svg data-p-icon="angle-up" *ngIf="!incrementButtonIconTemplate && !_incrementButtonIconTemplate" [attr.data-pc-section]="'incrementbuttonicon'" />
                     <ng-template *ngTemplateOutlet="incrementButtonIconTemplate || _incrementButtonIconTemplate"></ng-template>
                 </ng-container>
             </button>
@@ -1430,7 +1427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
             <button
                 type="button"
                 [class]="cn(cx('decrementButton'), decrementButtonClass)"
-                [attr.disabled]="disabled() ? '' : undefined"
+                [attr.disabled]="$disabled() ? '' : undefined"
                 tabindex="-1"
                 [attr.aria-hidden]="true"
                 (mousedown)="onDownButtonMouseDown($event)"
@@ -1442,7 +1439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
             >
                 <span *ngIf="decrementButtonIcon" [ngClass]="decrementButtonIcon" [attr.data-pc-section]="'decrementbuttonicon'"></span>
                 <ng-container *ngIf="!decrementButtonIcon">
-                    <AngleDownIcon *ngIf="!decrementButtonIconTemplate && !_decrementButtonIconTemplate" [attr.data-pc-section]="'decrementbuttonicon'" />
+                    <svg data-p-icon="angle-down" *ngIf="!decrementButtonIconTemplate && !_decrementButtonIconTemplate" [attr.data-pc-section]="'decrementbuttonicon'" />
                     <ng-template *ngTemplateOutlet="decrementButtonIconTemplate || _decrementButtonIconTemplate"></ng-template>
                 </ng-container>
             </button>
@@ -1451,7 +1448,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
             *ngIf="showButtons && buttonLayout !== 'stacked'"
             type="button"
             [class]="cx('incrementButton')"
-            [attr.disabled]="disabled() ? '' : undefined"
+            [attr.disabled]="$disabled() ? '' : undefined"
             tabindex="-1"
             [attr.aria-hidden]="true"
             (mousedown)="onUpButtonMouseDown($event)"
@@ -1463,7 +1460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
         >
             <span *ngIf="incrementButtonIcon" [ngClass]="incrementButtonIcon" [attr.data-pc-section]="'incrementbuttonicon'"></span>
             <ng-container *ngIf="!incrementButtonIcon">
-                <AngleUpIcon *ngIf="!incrementButtonIconTemplate && !_incrementButtonIconTemplate" [attr.data-pc-section]="'incrementbuttonicon'" />
+                <svg data-p-icon="angle-up" *ngIf="!incrementButtonIconTemplate && !_incrementButtonIconTemplate" [attr.data-pc-section]="'incrementbuttonicon'" />
                 <ng-template *ngTemplateOutlet="incrementButtonIconTemplate || _incrementButtonIconTemplate"></ng-template>
             </ng-container>
         </button>
@@ -1471,7 +1468,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
             *ngIf="showButtons && buttonLayout !== 'stacked'"
             type="button"
             [class]="cx('decrementButton')"
-            [attr.disabled]="disabled() ? '' : undefined"
+            [attr.disabled]="$disabled() ? '' : undefined"
             tabindex="-1"
             [attr.aria-hidden]="true"
             (mousedown)="onDownButtonMouseDown($event)"
@@ -1483,7 +1480,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
         >
             <span *ngIf="decrementButtonIcon" [ngClass]="decrementButtonIcon" [attr.data-pc-section]="'decrementbuttonicon'"></span>
             <ng-container *ngIf="!decrementButtonIcon">
-                <AngleDownIcon *ngIf="!decrementButtonIconTemplate && !_decrementButtonIconTemplate" [attr.data-pc-section]="'decrementbuttonicon'" />
+                <svg data-p-icon="angle-down" *ngIf="!decrementButtonIconTemplate && !_decrementButtonIconTemplate" [attr.data-pc-section]="'decrementbuttonicon'" />
                 <ng-template *ngTemplateOutlet="decrementButtonIconTemplate || _decrementButtonIconTemplate"></ng-template>
             </ng-container>
         </button>