Input: improve inputs of type number (#735)

* * Support native step attribute

* * Support entering decimal numbers via keyboard on number inputs

Author: operramon

CHANGELOG.md

@@ -1,3 +1,11 @@
+# 2.68.1 (2025-02-04)
+
+### Improvements
+
+- **Input**:  
+  - Support input native `step` attribute
+  - Support entering decimal numbers via keyboard when input type is `number`
+  
 # 2.68.0 (2025-01-02)
 
 ### Breaking change

projects/demo/src/app/demo/pages/input-page/input-page.component.html

@@ -128,6 +128,9 @@ <h3>Inputs</h3>
       <dt>min</dt>
       <dd>Set native min attribute on the input</dd>
 
+      <dt>step</dt>
+      <dd>Set native step attribute on the input</dd>
+
       <dt>type</dt>
       <dd>
         Input type:

projects/pastanaga-angular/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@guillotinaweb/pastanaga-angular",
   "description": "Provides Pastanaga UI elements as Angular components",
-  "version": "2.68.0",
+  "version": "2.68.1",
   "license": "MIT",
   "keywords": [
     "angular",

projects/pastanaga-angular/src/lib/controls/textfield/input-formatter.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, forwardRef, HostListener, Input, Provider } from '@angular/core';
+import { booleanAttribute, Directive, ElementRef, forwardRef, HostListener, Input, Provider } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 const FORMATTER_CONTROL_VALUE_ACCESSOR: Provider = {
@@ -14,15 +14,16 @@ const FORMATTER_CONTROL_VALUE_ACCESSOR: Provider = {
 })
 export class InputFormatterDirective implements ControlValueAccessor {
   @Input() paInputFormatter!: (value: any) => any;
-  @Input() paInputFormatterSkip = false;
+  @Input({ transform: booleanAttribute }) paInputFormatterUpdateInput = true;
+  @Input({ transform: booleanAttribute }) paInputFormatterSkip = false;
 
   private _writeToFormControl: (value: any) => void = () => {
     // Will be instantiated by registerOnChange
   };
 
   @HostListener('input') onKeyup() {
     const val = this.formatValue(this.el.nativeElement.value);
-    if (val !== this.el.nativeElement.value) {
+    if (this.paInputFormatterUpdateInput && val !== this.el.nativeElement.value) {
       this.el.nativeElement.value = val;
     }
     this._writeToFormControl(val);

projects/pastanaga-angular/src/lib/controls/textfield/input/input.component.html

@@ -25,8 +25,10 @@
       [attr.autocapitalize]="autocapitalize || undefined"
       [min]="min"
       [max]="max"
+      [step]="step"
       [readonly]="readonly"
       [paInputFormatter]="sanitizeHtmlTags"
+      [paInputFormatterUpdateInput]="type !== 'number'"
       (focus)="onFocus($event)"
       (blur)="onBlur()"
       (keyup)="onKeyUp($event)" />

projects/pastanaga-angular/src/lib/controls/textfield/input/input.component.ts

@@ -42,6 +42,7 @@ export class InputComponent extends NativeTextFieldDirective implements OnChange
   @Input({ transform: trimString }) icon = '';
   @Input({ transform: numberAttribute }) min?: number;
   @Input({ transform: numberAttribute }) max?: number;
+  @Input({ transform: numberAttribute }) step?: number;
   @Input({ transform: booleanAttribute }) iconOnRight = false;
   @Input({ transform: trimString }) autocapitalize = '';