@progressive-development/pd-forms 0.1.40 → 0.1.42

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent pd-forms following open-wc recommendations",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.1.40",
+  "version": "0.1.42",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/src/PdInput.js

@@ -9,6 +9,7 @@ import '@progressive-development/pd-icon/pd-icon.js';
 import { INPUT_TYPE_TEXT } from './PdBaseUiInput.js';
 import { PdBaseInputElement } from './PdBaseInputElement.js';
 
+const onlyContainsNumbers = (str) => /^\d+$/.test(str);
 
 // https://github.com/Victor-Bernabe/lit-input
 // https://levelup.gitconnected.com/build-a-material-like-input-web-component-using-litelement-20e9e0d203b6
@@ -69,7 +70,8 @@ export class PdInput extends PdBaseInputElement {
       icon: { type: String },
       secret: { type: Boolean }, // True for type password
       minlength: { type: String },
-      maxlength: { type: String }, // max length for field
+      maxlength: { type: String }, // max length for field,
+      onlyNumbers: { type: Boolean }, // if only numbers allowed
     };
   }
 
@@ -104,6 +106,14 @@ export class PdInput extends PdBaseInputElement {
     `;
   }
 
+  _onKeyUp() {
+    if (this.onlyNumbers && !onlyContainsNumbers(this._input.value)) {
+      this._input.value = this._input.value.replace(/\D/g, '')
+    } else {
+      super._onKeyUp();
+    }    
+  }
+
 }
 
 

package/stories/input.stories.js

@@ -66,6 +66,13 @@ function Template({
       placeHolder="Placeholder Text"      
     ></pd-input>
 
+    <h3>Default Input only Numbers</h3>
+    <pd-input
+      id="test2Id"
+      onlyNumbers
+      placeHolder="Placeholder Text"      
+    ></pd-input>
+
     <h3>Default Input with value</h3>
     <pd-input
       id="test3Id"