jb-input - npm Package Compare versions

Comparing version 2.6.2 to 2.7.0

dist/JBInput.js

@@ -98,2 +98,85 @@ /*! *****************************************************************************
 
+function enToFaDigits(input) {
+    if (typeof input !== "string" && isNaN(input)){
+        return '';
+    }
+    const regex = /[0-9]/g;
+    let result = input.toString().replace(regex, function (w) {
+        return String.fromCharCode(w.charCodeAt(0) + 1728);
+    }
+    );
+    return result;
+}
+
+function standardValueForNumberInput(inputValueString, numberFieldParameters) {
+    if (inputValueString == '-' && numberFieldParameters.acceptNegative == true) {
+        //if user type - and we accept negative number we let user to continue typing
+        return {
+            displayValue: inputValueString,
+            value: inputValueString
+        };
+    }
+    let valueString = inputValueString;
+    //if  comma separator is used we need to remove it
+    if (numberFieldParameters && numberFieldParameters.useThousandSeparator) {
+        valueString = valueString.replace(new RegExp(`${numberFieldParameters.thousandSeparator}`, 'g'), '');
+    }
+    //if our input type is number and user want to set it to new value we do nececcery logic here
+    let value = Number(valueString);
+    if (isNaN(value)) {
+        //replace arabic and persian number
+        valueString = valueString.replace(/\u06F0/g, '0').replace(/\u06F1/g, '1').replace(/\u06F2/g, '2').replace(/\u06F3/g, '3').replace(/\u06F4/g, '4').replace(/\u06F5/g, '5').replace(/\u06F6/g, '6').replace(/\u06F7/g, '7').replace(/\u06F8/g, '8').replace(/\u06F9/g, '9');
+        value = parseFloat(valueString);
+        //if invalidity is not for persian number
+        if (isNaN(value)) {
+            //we change nothing
+            valueString = numberFieldParameters.invalidNumberReplacement;
+        }
+    }
+    //add max and min checker to prevent bigger value assignment
+    if (numberFieldParameters.maxValue && value > numberFieldParameters.maxValue) {
+        value = numberFieldParameters.maxValue;
+        valueString = `${numberFieldParameters.maxValue}`;
+    }
+    if (numberFieldParameters.minValue && value < numberFieldParameters.minValue) {
+        value = numberFieldParameters.minValue;
+        valueString = `${numberFieldParameters.minValue}`;
+    }
+    const [integerNums, decimalNums] = valueString.split('.');
+    const decimalPrecisionCount = decimalNums ? decimalNums.length : 0;
+    if (numberFieldParameters && !(numberFieldParameters.decimalPrecision === null || numberFieldParameters.decimalPrecision == undefined) && decimalPrecisionCount && decimalPrecisionCount > numberFieldParameters.decimalPrecision) {
+        // truncate extra decimal
+        const checkRegex = new RegExp(`^-?\\d+(?:\\.\\d{0,${numberFieldParameters.decimalPrecision}})?`);
+        const match = valueString.match(checkRegex);
+        if (match && match[0]) {
+            valueString = match[0];
+        }
+    }
+    //remove start zero when number is more than one digit 065 => 65
+    if (integerNums.startsWith('0') && integerNums.length > 1) {
+        valueString = valueString.substring(1);
+    }
+    if (integerNums.startsWith('-') && integerNums.charAt(1) == '0' && integerNums.length > 2) {
+        valueString = '-' + valueString.substring(2);
+    }
+    // check for negative value
+    if (numberFieldParameters && numberFieldParameters.acceptNegative == false && integerNums.startsWith('-')) {
+        valueString = numberFieldParameters.invalidNumberReplacement;
+        console.error('negative number is not allowed change numberFieldParameters.acceptNegative to true to allow negative numbers');
+    }
+    const standardValueObject = {
+        displayValue: valueString,
+        value: valueString,
+    };
+    // add thousand separator comma
+    if (numberFieldParameters && numberFieldParameters.useThousandSeparator) {
+        standardValueObject.displayValue = valueString.replace(/\B(?=(\d{3})+(?!\d))/g, numberFieldParameters.thousandSeparator);
+    }
+    //convert en number to persian number
+    if (numberFieldParameters && numberFieldParameters.showPersianNumber) {
+        standardValueObject.displayValue = enToFaDigits(standardValueObject.displayValue);
+    }
+    return standardValueObject;
+}
+
 var _JBInputWebComponent_value, _JBInputWebComponent_validationList, _JBInputWebComponent_disabled;
@@ -120,2 +203,4 @@ class JBInputWebComponent extends HTMLElement {
             showButtons: true,
+            //will show persian number even if user type en number but value will be passed as en number
+            showPersianNumber: false,
         };
@@ -209,72 +294,4 @@ if (typeof this.attachInternals == "function") {
     }
-    /**
-     *
-     * @param {String} inputValueString
-     * @return {String} standard value
-     */
     standardValueForNumberInput(inputValueString) {
-        if (inputValueString == '-' && this.numberFieldParameters.acceptNegative == true) {
-            //if user type - and we accept negative number we let user to continue typing
-            return {
-                displayValue: inputValueString,
-                value: inputValueString
-            };
-        }
-        let valueString = inputValueString;
-        //if  comma separator is used we need to remove it
-        if (this.numberFieldParameters && this.numberFieldParameters.useThousandSeparator) {
-            valueString = valueString.replace(new RegExp(`${this.numberFieldParameters.thousandSeparator}`, 'g'), '');
-        }
-        //if our input type is number and user want to set it to new value we do nececcery logic here
-        let value = Number(valueString);
-        if (isNaN(value)) {
-            //replace arabic and persian number
-            valueString = valueString.replace(/\u06F0/g, '0').replace(/\u06F1/g, '1').replace(/\u06F2/g, '2').replace(/\u06F3/g, '3').replace(/\u06F4/g, '4').replace(/\u06F5/g, '5').replace(/\u06F6/g, '6').replace(/\u06F7/g, '7').replace(/\u06F8/g, '8').replace(/\u06F9/g, '9');
-            value = parseFloat(valueString);
-            //if invalidity is not for persian number
-            if (isNaN(value)) {
-                //we change nothing
-                valueString = this.numberFieldParameters.invalidNumberReplacement;
-            }
-        }
-        //add max and min checker to prevent bigger value assignment
-        if (this.numberFieldParameters.maxValue && value > this.numberFieldParameters.maxValue) {
-            value = this.numberFieldParameters.maxValue;
-            valueString = `${this.numberFieldParameters.maxValue}`;
-        }
-        if (this.numberFieldParameters.minValue && value < this.numberFieldParameters.minValue) {
-            value = this.numberFieldParameters.minValue;
-            valueString = `${this.numberFieldParameters.minValue}`;
-        }
-        const [integerNums, decimalNums] = valueString.split('.');
-        const decimalPrecisionCount = decimalNums ? decimalNums.length : 0;
-        if (this.numberFieldParameters && !(this.numberFieldParameters.decimalPrecision === null || this.numberFieldParameters.decimalPrecision == undefined) && decimalPrecisionCount && decimalPrecisionCount > this.numberFieldParameters.decimalPrecision) {
-            // truncate extra decimal
-            const checkRegex = new RegExp(`^-?\\d+(?:\\.\\d{0,${this.numberFieldParameters.decimalPrecision}})?`);
-            const match = valueString.match(checkRegex);
-            if (match && match[0]) {
-                valueString = match[0];
-            }
-        }
-        //remove start zero when number is more than one digit 065 => 65
-        if (integerNums.startsWith('0') && integerNums.length > 1) {
-            valueString = valueString.substring(1);
-        }
-        if (integerNums.startsWith('-') && integerNums.charAt(1) == '0' && integerNums.length > 2) {
-            valueString = '-' + valueString.substring(2);
-        }
-        // check for negative value
-        if (this.numberFieldParameters && this.numberFieldParameters.acceptNegative == false && integerNums.startsWith('-')) {
-            valueString = this.numberFieldParameters.invalidNumberReplacement;
-            console.error('negative number is not allowed change numberFieldParameters.acceptNegative to true to allow negative numbers');
-        }
-        const standardValueObject = {
-            displayValue: valueString,
-            value: valueString,
-        };
-        // add thousand separator comma
-        if (this.numberFieldParameters && this.numberFieldParameters.useThousandSeparator) {
-            standardValueObject.displayValue = valueString.replace(/\B(?=(\d{3})+(?!\d))/g, this.numberFieldParameters.thousandSeparator);
-        }
-        return standardValueObject;
+        return standardValueForNumberInput(inputValueString, this.numberFieldParameters);
     }
@@ -403,2 +420,5 @@ registerEventListener() {
         }
+        if (numberFieldParameters && typeof numberFieldParameters.showPersianNumber == "boolean") {
+            this.numberFieldParameters.showPersianNumber = numberFieldParameters.showPersianNumber;
+        }
         this.value = `${this.value}`;
@@ -405,0 +425,0 @@ }

dist/JBInput.umd.js

@@ -104,2 +104,85 @@ (function (global, factory) {
 
+    function enToFaDigits(input) {
+        if (typeof input !== "string" && isNaN(input)){
+            return '';
+        }
+        const regex = /[0-9]/g;
+        let result = input.toString().replace(regex, function (w) {
+            return String.fromCharCode(w.charCodeAt(0) + 1728);
+        }
+        );
+        return result;
+    }
+
+    function standardValueForNumberInput(inputValueString, numberFieldParameters) {
+        if (inputValueString == '-' && numberFieldParameters.acceptNegative == true) {
+            //if user type - and we accept negative number we let user to continue typing
+            return {
+                displayValue: inputValueString,
+                value: inputValueString
+            };
+        }
+        let valueString = inputValueString;
+        //if  comma separator is used we need to remove it
+        if (numberFieldParameters && numberFieldParameters.useThousandSeparator) {
+            valueString = valueString.replace(new RegExp(`${numberFieldParameters.thousandSeparator}`, 'g'), '');
+        }
+        //if our input type is number and user want to set it to new value we do nececcery logic here
+        let value = Number(valueString);
+        if (isNaN(value)) {
+            //replace arabic and persian number
+            valueString = valueString.replace(/\u06F0/g, '0').replace(/\u06F1/g, '1').replace(/\u06F2/g, '2').replace(/\u06F3/g, '3').replace(/\u06F4/g, '4').replace(/\u06F5/g, '5').replace(/\u06F6/g, '6').replace(/\u06F7/g, '7').replace(/\u06F8/g, '8').replace(/\u06F9/g, '9');
+            value = parseFloat(valueString);
+            //if invalidity is not for persian number
+            if (isNaN(value)) {
+                //we change nothing
+                valueString = numberFieldParameters.invalidNumberReplacement;
+            }
+        }
+        //add max and min checker to prevent bigger value assignment
+        if (numberFieldParameters.maxValue && value > numberFieldParameters.maxValue) {
+            value = numberFieldParameters.maxValue;
+            valueString = `${numberFieldParameters.maxValue}`;
+        }
+        if (numberFieldParameters.minValue && value < numberFieldParameters.minValue) {
+            value = numberFieldParameters.minValue;
+            valueString = `${numberFieldParameters.minValue}`;
+        }
+        const [integerNums, decimalNums] = valueString.split('.');
+        const decimalPrecisionCount = decimalNums ? decimalNums.length : 0;
+        if (numberFieldParameters && !(numberFieldParameters.decimalPrecision === null || numberFieldParameters.decimalPrecision == undefined) && decimalPrecisionCount && decimalPrecisionCount > numberFieldParameters.decimalPrecision) {
+            // truncate extra decimal
+            const checkRegex = new RegExp(`^-?\\d+(?:\\.\\d{0,${numberFieldParameters.decimalPrecision}})?`);
+            const match = valueString.match(checkRegex);
+            if (match && match[0]) {
+                valueString = match[0];
+            }
+        }
+        //remove start zero when number is more than one digit 065 => 65
+        if (integerNums.startsWith('0') && integerNums.length > 1) {
+            valueString = valueString.substring(1);
+        }
+        if (integerNums.startsWith('-') && integerNums.charAt(1) == '0' && integerNums.length > 2) {
+            valueString = '-' + valueString.substring(2);
+        }
+        // check for negative value
+        if (numberFieldParameters && numberFieldParameters.acceptNegative == false && integerNums.startsWith('-')) {
+            valueString = numberFieldParameters.invalidNumberReplacement;
+            console.error('negative number is not allowed change numberFieldParameters.acceptNegative to true to allow negative numbers');
+        }
+        const standardValueObject = {
+            displayValue: valueString,
+            value: valueString,
+        };
+        // add thousand separator comma
+        if (numberFieldParameters && numberFieldParameters.useThousandSeparator) {
+            standardValueObject.displayValue = valueString.replace(/\B(?=(\d{3})+(?!\d))/g, numberFieldParameters.thousandSeparator);
+        }
+        //convert en number to persian number
+        if (numberFieldParameters && numberFieldParameters.showPersianNumber) {
+            standardValueObject.displayValue = enToFaDigits(standardValueObject.displayValue);
+        }
+        return standardValueObject;
+    }
+
     var _JBInputWebComponent_value, _JBInputWebComponent_validationList, _JBInputWebComponent_disabled;
@@ -126,2 +209,4 @@ class JBInputWebComponent extends HTMLElement {
                 showButtons: true,
+                //will show persian number even if user type en number but value will be passed as en number
+                showPersianNumber: false,
             };
@@ -215,72 +300,4 @@ if (typeof this.attachInternals == "function") {
         }
-        /**
-         *
-         * @param {String} inputValueString
-         * @return {String} standard value
-         */
         standardValueForNumberInput(inputValueString) {
-            if (inputValueString == '-' && this.numberFieldParameters.acceptNegative == true) {
-                //if user type - and we accept negative number we let user to continue typing
-                return {
-                    displayValue: inputValueString,
-                    value: inputValueString
-                };
-            }
-            let valueString = inputValueString;
-            //if  comma separator is used we need to remove it
-            if (this.numberFieldParameters && this.numberFieldParameters.useThousandSeparator) {
-                valueString = valueString.replace(new RegExp(`${this.numberFieldParameters.thousandSeparator}`, 'g'), '');
-            }
-            //if our input type is number and user want to set it to new value we do nececcery logic here
-            let value = Number(valueString);
-            if (isNaN(value)) {
-                //replace arabic and persian number
-                valueString = valueString.replace(/\u06F0/g, '0').replace(/\u06F1/g, '1').replace(/\u06F2/g, '2').replace(/\u06F3/g, '3').replace(/\u06F4/g, '4').replace(/\u06F5/g, '5').replace(/\u06F6/g, '6').replace(/\u06F7/g, '7').replace(/\u06F8/g, '8').replace(/\u06F9/g, '9');
-                value = parseFloat(valueString);
-                //if invalidity is not for persian number
-                if (isNaN(value)) {
-                    //we change nothing
-                    valueString = this.numberFieldParameters.invalidNumberReplacement;
-                }
-            }
-            //add max and min checker to prevent bigger value assignment
-            if (this.numberFieldParameters.maxValue && value > this.numberFieldParameters.maxValue) {
-                value = this.numberFieldParameters.maxValue;
-                valueString = `${this.numberFieldParameters.maxValue}`;
-            }
-            if (this.numberFieldParameters.minValue && value < this.numberFieldParameters.minValue) {
-                value = this.numberFieldParameters.minValue;
-                valueString = `${this.numberFieldParameters.minValue}`;
-            }
-            const [integerNums, decimalNums] = valueString.split('.');
-            const decimalPrecisionCount = decimalNums ? decimalNums.length : 0;
-            if (this.numberFieldParameters && !(this.numberFieldParameters.decimalPrecision === null || this.numberFieldParameters.decimalPrecision == undefined) && decimalPrecisionCount && decimalPrecisionCount > this.numberFieldParameters.decimalPrecision) {
-                // truncate extra decimal
-                const checkRegex = new RegExp(`^-?\\d+(?:\\.\\d{0,${this.numberFieldParameters.decimalPrecision}})?`);
-                const match = valueString.match(checkRegex);
-                if (match && match[0]) {
-                    valueString = match[0];
-                }
-            }
-            //remove start zero when number is more than one digit 065 => 65
-            if (integerNums.startsWith('0') && integerNums.length > 1) {
-                valueString = valueString.substring(1);
-            }
-            if (integerNums.startsWith('-') && integerNums.charAt(1) == '0' && integerNums.length > 2) {
-                valueString = '-' + valueString.substring(2);
-            }
-            // check for negative value
-            if (this.numberFieldParameters && this.numberFieldParameters.acceptNegative == false && integerNums.startsWith('-')) {
-                valueString = this.numberFieldParameters.invalidNumberReplacement;
-                console.error('negative number is not allowed change numberFieldParameters.acceptNegative to true to allow negative numbers');
-            }
-            const standardValueObject = {
-                displayValue: valueString,
-                value: valueString,
-            };
-            // add thousand separator comma
-            if (this.numberFieldParameters && this.numberFieldParameters.useThousandSeparator) {
-                standardValueObject.displayValue = valueString.replace(/\B(?=(\d{3})+(?!\d))/g, this.numberFieldParameters.thousandSeparator);
-            }
-            return standardValueObject;
+            return standardValueForNumberInput(inputValueString, this.numberFieldParameters);
         }
@@ -409,2 +426,5 @@ registerEventListener() {
             }
+            if (numberFieldParameters && typeof numberFieldParameters.showPersianNumber == "boolean") {
+                this.numberFieldParameters.showPersianNumber = numberFieldParameters.showPersianNumber;
+            }
             this.value = `${this.value}`;
@@ -411,0 +431,0 @@ }

lib/JBInput.ts

@@ -6,2 +6,3 @@ import HTML from './JBInput.html';
 import { ElementsObject, JBInputStandardValueObject, JBInputValidationItem, NumberFieldParameter, NumberFieldParameterInput, ValidationResult, ValidationResultItem, ValidationResultSummary } from './Types';
+import { standardValueForNumberInput } from './utils';
 export class JBInputWebComponent extends HTMLElement {
@@ -28,2 +29,4 @@ static get formAssociated() { return true; }
         showButtons:true,
+        //will show persian number even if user type en number but value will be passed as en number
+        showPersianNumber:false,
     };
@@ -122,73 +125,4 @@ validation?: ValidationResultSummary;
     }
-    /**
-     * 
-     * @param {String} inputValueString 
-     * @return {String} standard value
-     */
     standardValueForNumberInput(inputValueString: string): JBInputStandardValueObject {
-        if(inputValueString == '-' && this.numberFieldParameters!.acceptNegative == true){
-            //if user type - and we accept negative number we let user to continue typing
-            return {
-                displayValue:inputValueString,
-                value:inputValueString
-            };
-        }
-        let valueString = inputValueString;
-        //if  comma separator is used we need to remove it
-        if(this.numberFieldParameters && this.numberFieldParameters.useThousandSeparator){
-            valueString = valueString.replace(new RegExp(`${this.numberFieldParameters.thousandSeparator}`,'g'), '');
-        }
-        //if our input type is number and user want to set it to new value we do nececcery logic here
-        let value = Number(valueString);
-        if (isNaN(value)) {
-            //replace arabic and persian number
-            valueString = valueString.replace(/\u06F0/g, '0').replace(/\u06F1/g, '1').replace(/\u06F2/g, '2').replace(/\u06F3/g, '3').replace(/\u06F4/g, '4').replace(/\u06F5/g, '5').replace(/\u06F6/g, '6').replace(/\u06F7/g, '7').replace(/\u06F8/g, '8').replace(/\u06F9/g, '9');
-            value = parseFloat(valueString);
-            //if invalidity is not for persian number
-            if(isNaN(value)){
-                //we change nothing
-                valueString = this.numberFieldParameters!.invalidNumberReplacement;
-            }
-        }
-        //add max and min checker to prevent bigger value assignment
-        if(this.numberFieldParameters.maxValue && value> this.numberFieldParameters.maxValue){
-            value = this.numberFieldParameters.maxValue;
-            valueString = `${this.numberFieldParameters.maxValue}`;
-        }
-        if(this.numberFieldParameters.minValue && value< this.numberFieldParameters.minValue){
-            value = this.numberFieldParameters.minValue;
-            valueString = `${this.numberFieldParameters.minValue}`;
-        }
-        const[integerNums, decimalNums] = valueString.split('.');
-        
-        const decimalPrecisionCount = decimalNums ? decimalNums.length : 0;
-        if (this.numberFieldParameters && !(this.numberFieldParameters.decimalPrecision === null || this.numberFieldParameters.decimalPrecision == undefined) && decimalPrecisionCount && decimalPrecisionCount > this.numberFieldParameters.decimalPrecision) {
-            // truncate extra decimal
-            const checkRegex = new RegExp(`^-?\\d+(?:\\.\\d{0,${this.numberFieldParameters!.decimalPrecision}})?`);
-            const match = valueString.match(checkRegex);
-            if (match && match[0]) {
-                valueString = match[0];
-            }
-        }
-        //remove start zero when number is more than one digit 065 => 65
-        if(integerNums.startsWith('0') && integerNums.length > 1){
-            valueString = valueString.substring(1);
-        }
-        if( integerNums.startsWith('-') && integerNums.charAt(1) == '0' && integerNums.length > 2){
-            valueString = '-'+valueString.substring(2);
-        }
-        // check for negative value
-        if(this.numberFieldParameters && this.numberFieldParameters.acceptNegative == false && integerNums.startsWith('-')){
-            valueString = this.numberFieldParameters!.invalidNumberReplacement;
-            console.error('negative number is not allowed change numberFieldParameters.acceptNegative to true to allow negative numbers');
-        }
-        const standardValueObject: JBInputStandardValueObject = {
-            displayValue: valueString,
-            value: valueString,
-        };
-        // add thousand separator comma
-        if(this.numberFieldParameters && this.numberFieldParameters.useThousandSeparator){
-            standardValueObject.displayValue = valueString.replace(/\B(?=(\d{3})+(?!\d))/g, this.numberFieldParameters.thousandSeparator);
-        }
-        return standardValueObject;
+        return standardValueForNumberInput(inputValueString,this.numberFieldParameters);
     }
@@ -317,2 +251,5 @@ registerEventListener(): void {
         }
+        if(numberFieldParameters && typeof numberFieldParameters.showPersianNumber == "boolean"){
+            this.numberFieldParameters.showPersianNumber = numberFieldParameters.showPersianNumber;
+        }
         this.value = `${this.value}`;
@@ -319,0 +256,0 @@ }

lib/Types.ts

@@ -20,2 +20,3 @@ export type ElementsObject = {
     showButtons:boolean;
+    showPersianNumber:boolean;
 }
@@ -22,0 +23,0 @@ type Paritial<T> = {

package.json

@@ -17,3 +17,3 @@ {
   ],
-  "version": "2.6.2",
+  "version": "2.7.0",
   "bugs": "https://github.com/javadbat/jb-input/issues",
@@ -20,0 +20,0 @@ "license": "MIT",

README.md

@@ -129,2 +129,5 @@ # jb-input
         showButtons:true,
+        // will show persian number instead of english number in output but orginal input value remain in english
+        //if true and user type 123 and see ۱۲۳ but inpudDom.value will be 123
+        showPersianNumber:false,
     })
@@ -131,0 +134,0 @@ ```

No alert changes

Improved metrics

Total package byte prevSize

300275

increased by3.78%

Number of package files

25

increased by25%

Lines of code

2621

increased by7.99%

Number of lines in readme file

211

increased by1.44%

No dependency changes