intl-number-input - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

dist/index.cjs.js

 /**
- * Intl Number Input 1.2.0
- * (c) 2021 Matthias Stiller
+ * Intl Number Input 1.2.1
+ * (c) 2022 Matthias Stiller
  * @license MIT
@@ -44,2 +44,13 @@ */
 
+const getPrefix = (parts) => parts
+    .slice(0, parts.map((p) => p.type).indexOf('integer'))
+    .map((p) => p.value)
+    .join('');
+const getSuffix = (parts) => {
+    const types = parts.map((p) => p.type);
+    return parts
+        .slice(Math.max(types.lastIndexOf('integer'), types.indexOf('fraction')) + 1)
+        .map((p) => p.value)
+        .join('');
+};
 const DECIMAL_SEPARATORS = [',', '.', '٫'];
@@ -49,4 +60,4 @@ const INTEGER_PATTERN = '(0|[1-9]\\d*)';
     constructor(options) {
-        const { formatStyle: style, currency, currencyDisplay, unit, unitDisplay, locale, precision } = options;
-        const numberFormat = new Intl.NumberFormat(locale, {
+        var _a, _b, _c, _d;
+        const createNumberFormat = (options) => new Intl.NumberFormat(locale, {
             currency,
@@ -57,5 +68,7 @@ currencyDisplay,
             style,
-            minimumFractionDigits: style !== exports.NumberFormatStyle.Currency ? 1 : undefined
+            ...options
         });
-        const ps = numberFormat.format(style === exports.NumberFormatStyle.Percent ? 1234.56 : 123456);
+        const { formatStyle: style, currency, currencyDisplay, unit, unitDisplay, locale, precision } = options;
+        const numberFormat = createNumberFormat({ minimumFractionDigits: style !== exports.NumberFormatStyle.Currency ? 1 : undefined });
+        const formatParts = numberFormat.formatToParts(style === exports.NumberFormatStyle.Percent ? 1234.56 : 123456);
         this.locale = locale;
@@ -68,4 +81,4 @@ this.style = style;
         this.digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => i.toLocaleString(locale));
-        this.decimalSymbol = count(ps, this.digits[0]) ? ps.substr(ps.indexOf(this.digits[6]) + 1, 1) : undefined;
-        this.groupingSymbol = ps.substr(ps.indexOf(this.digits[3]) + 1, 1);
+        this.decimalSymbol = (_a = formatParts.find(({ type }) => type === 'decimal')) === null || _a === void 0 ? void 0 : _a.value;
+        this.groupingSymbol = (_b = formatParts.find(({ type }) => type === 'group')) === null || _b === void 0 ? void 0 : _b.value;
         this.minusSymbol = substringBefore(Number(-1).toLocaleString(locale), this.digits[1]);
@@ -79,4 +92,4 @@ if (this.decimalSymbol === undefined) {
         else if (typeof precision === 'object') {
-            this.minimumFractionDigits = precision.min || 0;
-            this.maximumFractionDigits = precision.max !== undefined ? precision.max : 15;
+            this.minimumFractionDigits = (_c = precision.min) !== null && _c !== void 0 ? _c : 0;
+            this.maximumFractionDigits = (_d = precision.max) !== null && _d !== void 0 ? _d : 15;
         }
@@ -88,5 +101,5 @@ else {
         }
-        this.prefix = substringBefore(ps, this.digits[1]);
-        this.negativePrefix = substringBefore(numberFormat.format(-1), this.digits[1]);
-        this.suffix = ps.substring(ps.lastIndexOf(this.decimalSymbol ? this.digits[0] : this.digits[6]) + 1);
+        this.prefix = getPrefix(numberFormat.formatToParts(1));
+        this.suffix = [getSuffix(createNumberFormat({ minimumFractionDigits: 0 }).formatToParts(1)), getSuffix(numberFormat.formatToParts(2))];
+        this.negativePrefix = getPrefix(numberFormat.formatToParts(-1));
     }
@@ -126,4 +139,10 @@ parse(str) {
         return [
-            this.stripPrefixOrSuffix(this.normalizeDigits(integerNumber.toLocaleString(this.locale, { ...options, useGrouping: true }))),
-            this.stripPrefixOrSuffix(this.normalizeDigits(integerNumber.toLocaleString(this.locale, { ...options, useGrouping: false })))
+            this.stripPrefixOrSuffix(this.normalizeDigits(integerNumber.toLocaleString(this.locale, {
+                ...options,
+                useGrouping: true
+            }))),
+            this.stripPrefixOrSuffix(this.normalizeDigits(integerNumber.toLocaleString(this.locale, {
+                ...options,
+                useGrouping: false
+            })))
         ].includes(formattedNumber);
@@ -156,6 +175,6 @@ }
     insertPrefixOrSuffix(str, negative) {
-        return `${negative ? this.negativePrefix : this.prefix}${str}${this.suffix}`;
+        return `${negative ? this.negativePrefix : this.prefix}${str}${this.suffix[1]}`;
     }
     stripGroupingSeparator(str) {
-        return str.replace(new RegExp(escapeRegExp(this.groupingSymbol), 'g'), '');
+        return this.groupingSymbol !== undefined ? str.replace(new RegExp(escapeRegExp(this.groupingSymbol), 'g'), '') : str;
     }
@@ -166,3 +185,3 @@ stripMinusSymbol(str) {
     stripPrefixOrSuffix(str) {
-        return str.replace(this.negativePrefix, '').replace(this.prefix, '').replace(this.suffix, '');
+        return str.replace(this.negativePrefix, '').replace(this.prefix, '').replace(this.suffix[1], '').replace(this.suffix[0], '');
     }
@@ -404,3 +423,4 @@ normalizeDecimalSeparator(str, from) {
                     .replace(this.numberFormat.prefix, '')
-                    .replace(this.numberFormat.suffix, '');
+                    .replace(this.numberFormat.suffix[1], '')
+                    .replace(this.numberFormat.suffix[0], '');
             }
@@ -450,5 +470,12 @@ this.el.value = formattedValue;
                     }
-                    return this.options.hidePrefixOrSuffixOnFocus
-                        ? newValueLength - caretPositionFromLeft
-                        : Math.max(newValueLength - Math.max(caretPositionFromLeft, suffix.length), prefix.length);
+                    if (this.options.hidePrefixOrSuffixOnFocus) {
+                        return newValueLength - caretPositionFromLeft;
+                    }
+                    else {
+                        const getSuffixLength = (str) => (str.includes(suffix[1]) ? suffix[1] : str.includes(suffix[0]) ? suffix[0] : '').length;
+                        const oldSuffixLength = getSuffixLength(value);
+                        const newSuffixLength = getSuffixLength(this.formattedValue);
+                        const suffixLengthDifference = Math.abs(newSuffixLength - oldSuffixLength);
+                        return Math.max(newValueLength - Math.max(caretPositionFromLeft - suffixLengthDifference, newSuffixLength), prefix.length);
+                    }
                 };
@@ -470,4 +497,5 @@ this.setCaretPosition(getCaretPositionAfterFormat());
                         if (!this.options.hidePrefixOrSuffixOnFocus) {
-                            if (selectionStart >= value.length - suffix.length) {
-                                return this.formattedValue.length - suffix.length;
+                            const suffixLength = suffix[this.numberValue === 1 ? 0 : 1].length;
+                            if (selectionStart >= value.length - suffixLength) {
+                                return this.formattedValue.length - suffixLength;
                             }
@@ -482,3 +510,3 @@ else if (selectionStart < prefix.length) {
                         }
-                        if (this.options.hideGroupingSeparatorOnFocus) {
+                        if (this.options.hideGroupingSeparatorOnFocus && groupingSymbol !== undefined) {
                             result -= count(value.substring(0, selectionStart), groupingSymbol);
@@ -485,0 +513,0 @@ }

dist/index.esm.js

 /**
- * Intl Number Input 1.2.0
- * (c) 2021 Matthias Stiller
+ * Intl Number Input 1.2.1
+ * (c) 2022 Matthias Stiller
  * @license MIT
@@ -40,2 +40,13 @@ */
 
+const getPrefix = (parts) => parts
+    .slice(0, parts.map((p) => p.type).indexOf('integer'))
+    .map((p) => p.value)
+    .join('');
+const getSuffix = (parts) => {
+    const types = parts.map((p) => p.type);
+    return parts
+        .slice(Math.max(types.lastIndexOf('integer'), types.indexOf('fraction')) + 1)
+        .map((p) => p.value)
+        .join('');
+};
 const DECIMAL_SEPARATORS = [',', '.', '٫'];
@@ -45,4 +56,4 @@ const INTEGER_PATTERN = '(0|[1-9]\\d*)';
     constructor(options) {
-        const { formatStyle: style, currency, currencyDisplay, unit, unitDisplay, locale, precision } = options;
-        const numberFormat = new Intl.NumberFormat(locale, {
+        var _a, _b, _c, _d;
+        const createNumberFormat = (options) => new Intl.NumberFormat(locale, {
             currency,
@@ -53,5 +64,7 @@ currencyDisplay,
             style,
-            minimumFractionDigits: style !== NumberFormatStyle.Currency ? 1 : undefined
+            ...options
         });
-        const ps = numberFormat.format(style === NumberFormatStyle.Percent ? 1234.56 : 123456);
+        const { formatStyle: style, currency, currencyDisplay, unit, unitDisplay, locale, precision } = options;
+        const numberFormat = createNumberFormat({ minimumFractionDigits: style !== NumberFormatStyle.Currency ? 1 : undefined });
+        const formatParts = numberFormat.formatToParts(style === NumberFormatStyle.Percent ? 1234.56 : 123456);
         this.locale = locale;
@@ -64,4 +77,4 @@ this.style = style;
         this.digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => i.toLocaleString(locale));
-        this.decimalSymbol = count(ps, this.digits[0]) ? ps.substr(ps.indexOf(this.digits[6]) + 1, 1) : undefined;
-        this.groupingSymbol = ps.substr(ps.indexOf(this.digits[3]) + 1, 1);
+        this.decimalSymbol = (_a = formatParts.find(({ type }) => type === 'decimal')) === null || _a === void 0 ? void 0 : _a.value;
+        this.groupingSymbol = (_b = formatParts.find(({ type }) => type === 'group')) === null || _b === void 0 ? void 0 : _b.value;
         this.minusSymbol = substringBefore(Number(-1).toLocaleString(locale), this.digits[1]);
@@ -75,4 +88,4 @@ if (this.decimalSymbol === undefined) {
         else if (typeof precision === 'object') {
-            this.minimumFractionDigits = precision.min || 0;
-            this.maximumFractionDigits = precision.max !== undefined ? precision.max : 15;
+            this.minimumFractionDigits = (_c = precision.min) !== null && _c !== void 0 ? _c : 0;
+            this.maximumFractionDigits = (_d = precision.max) !== null && _d !== void 0 ? _d : 15;
         }
@@ -84,5 +97,5 @@ else {
         }
-        this.prefix = substringBefore(ps, this.digits[1]);
-        this.negativePrefix = substringBefore(numberFormat.format(-1), this.digits[1]);
-        this.suffix = ps.substring(ps.lastIndexOf(this.decimalSymbol ? this.digits[0] : this.digits[6]) + 1);
+        this.prefix = getPrefix(numberFormat.formatToParts(1));
+        this.suffix = [getSuffix(createNumberFormat({ minimumFractionDigits: 0 }).formatToParts(1)), getSuffix(numberFormat.formatToParts(2))];
+        this.negativePrefix = getPrefix(numberFormat.formatToParts(-1));
     }
@@ -122,4 +135,10 @@ parse(str) {
         return [
-            this.stripPrefixOrSuffix(this.normalizeDigits(integerNumber.toLocaleString(this.locale, { ...options, useGrouping: true }))),
-            this.stripPrefixOrSuffix(this.normalizeDigits(integerNumber.toLocaleString(this.locale, { ...options, useGrouping: false })))
+            this.stripPrefixOrSuffix(this.normalizeDigits(integerNumber.toLocaleString(this.locale, {
+                ...options,
+                useGrouping: true
+            }))),
+            this.stripPrefixOrSuffix(this.normalizeDigits(integerNumber.toLocaleString(this.locale, {
+                ...options,
+                useGrouping: false
+            })))
         ].includes(formattedNumber);
@@ -152,6 +171,6 @@ }
     insertPrefixOrSuffix(str, negative) {
-        return `${negative ? this.negativePrefix : this.prefix}${str}${this.suffix}`;
+        return `${negative ? this.negativePrefix : this.prefix}${str}${this.suffix[1]}`;
     }
     stripGroupingSeparator(str) {
-        return str.replace(new RegExp(escapeRegExp(this.groupingSymbol), 'g'), '');
+        return this.groupingSymbol !== undefined ? str.replace(new RegExp(escapeRegExp(this.groupingSymbol), 'g'), '') : str;
     }
@@ -162,3 +181,3 @@ stripMinusSymbol(str) {
     stripPrefixOrSuffix(str) {
-        return str.replace(this.negativePrefix, '').replace(this.prefix, '').replace(this.suffix, '');
+        return str.replace(this.negativePrefix, '').replace(this.prefix, '').replace(this.suffix[1], '').replace(this.suffix[0], '');
     }
@@ -400,3 +419,4 @@ normalizeDecimalSeparator(str, from) {
                     .replace(this.numberFormat.prefix, '')
-                    .replace(this.numberFormat.suffix, '');
+                    .replace(this.numberFormat.suffix[1], '')
+                    .replace(this.numberFormat.suffix[0], '');
             }
@@ -446,5 +466,12 @@ this.el.value = formattedValue;
                     }
-                    return this.options.hidePrefixOrSuffixOnFocus
-                        ? newValueLength - caretPositionFromLeft
-                        : Math.max(newValueLength - Math.max(caretPositionFromLeft, suffix.length), prefix.length);
+                    if (this.options.hidePrefixOrSuffixOnFocus) {
+                        return newValueLength - caretPositionFromLeft;
+                    }
+                    else {
+                        const getSuffixLength = (str) => (str.includes(suffix[1]) ? suffix[1] : str.includes(suffix[0]) ? suffix[0] : '').length;
+                        const oldSuffixLength = getSuffixLength(value);
+                        const newSuffixLength = getSuffixLength(this.formattedValue);
+                        const suffixLengthDifference = Math.abs(newSuffixLength - oldSuffixLength);
+                        return Math.max(newValueLength - Math.max(caretPositionFromLeft - suffixLengthDifference, newSuffixLength), prefix.length);
+                    }
                 };
@@ -466,4 +493,5 @@ this.setCaretPosition(getCaretPositionAfterFormat());
                         if (!this.options.hidePrefixOrSuffixOnFocus) {
-                            if (selectionStart >= value.length - suffix.length) {
-                                return this.formattedValue.length - suffix.length;
+                            const suffixLength = suffix[this.numberValue === 1 ? 0 : 1].length;
+                            if (selectionStart >= value.length - suffixLength) {
+                                return this.formattedValue.length - suffixLength;
                             }
@@ -478,3 +506,3 @@ else if (selectionStart < prefix.length) {
                         }
-                        if (this.options.hideGroupingSeparatorOnFocus) {
+                        if (this.options.hideGroupingSeparatorOnFocus && groupingSymbol !== undefined) {
                             result -= count(value.substring(0, selectionStart), groupingSymbol);
@@ -481,0 +509,0 @@ }

package.json

 {
   "name": "intl-number-input",
   "description": "Easy input of formatted numbers based on the ECMAScript Internationalization API (ECMA-402).",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "license": "MIT",
@@ -6,0 +6,0 @@ "module": "./dist/index.esm.js",

README.md

@@ -0,1 +1,7 @@
+[![Codecov](https://codecov.io/gh/dm4t2/intl-number-input/branch/master/graph/badge.svg)](https://codecov.io/gh/dm4t2/intl-number-input)
+[![npm Version](https://badgen.net/npm/v/intl-number-input?color=green)](https://www.npmjs.com/package/intl-number-input)
+[![npm Downloads](https://badgen.net/npm/dw/intl-number-input?color=green)](https://www.npmjs.com/package/intl-number-input)
+[![Bundlephobia](https://badgen.net/bundlephobia/minzip/intl-number-input?color=green)](https://bundlephobia.com/result?p=intl-number-input)
+[![License](https://badgen.net/github/license/dm4t2/intl-number-input?color=green)](https://github.com/dm4t2/intl-number-input/blob/master/LICENSE)
+
 # Intl Number Input
@@ -8,7 +14,1 @@
 Please read the [guide](https://dm4t2.github.io/intl-number-input/guide) to get started or check out the [playground](https://dm4t2.github.io/intl-number-input/playground) to see it in action.
-
-## Support me
-
-If you find my work helpful, or you want to support the development, star the repo or buy me a coffee:
-
-[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/D1D6SXEA)

No alert changes

Improved metrics

Total package byte prevSize

55318

increased by6.82%

Lines of code

1109

increased by5.32%

No dependency changes