intl-number-input - npm Package Compare versions

Comparing version 1.2.1 to 1.3.0

CHANGELOG.md

+# Changelog
+
+## [1.3.0](https://www.github.com/dm4t2/intl-number-input/compare/v1.2.1...v1.3.0) (2022-04-01)
+
+
+### Features
+
+* add API docs ([108f843](https://www.github.com/dm4t2/intl-number-input/commit/108f8435dd9ddcb8fcf87362d9cea329d6037bdb))
+
+### [1.2.1](https://www.github.com/dm4t2/intl-number-input/compare/v1.2.0...v1.2.1) (2022-03-16)
+
+
+### Bug Fixes
+
+* fix pluralization when using full currency/unit names ([fab0e93](https://www.github.com/dm4t2/intl-number-input/commit/fab0e93495ab741f37396f5d4aae6bb709d02b07))
+* improve detection of decimal/grouping separator ([291d841](https://www.github.com/dm4t2/intl-number-input/commit/291d841a09394924368e160b39cca167db2c1182))
+
+## [1.2.0](https://www.github.com/dm4t2/intl-number-input/compare/v1.1.1...v1.2.0) (2021-11-08)
+
+
+### Features
+
+* **formatStyle:** use decimal as default ([b87cd94](https://www.github.com/dm4t2/intl-number-input/commit/b87cd947f18edd5d08105e3dcbaaae918de285c4))
+* support precision range ([#5](https://www.github.com/dm4t2/intl-number-input/issues/5)) ([3bdc5c4](https://www.github.com/dm4t2/intl-number-input/commit/3bdc5c41fd6d610c859019c8a75f62bbbd729720))
+
+### [1.1.1](https://www.github.com/dm4t2/intl-number-input/compare/v1.1.0...v1.1.1) (2021-11-04)
+
+
+### Bug Fixes
+
+* **autoDecimalDigits:** use the maximumFractionDigits of the number format ([18cfb28](https://www.github.com/dm4t2/intl-number-input/commit/18cfb28da6152b815c8c6b2a4820c5175c1042c8))
+* **percent formatStyle:** parsing causes accuracy issues with higher precisions ([2b2f8c3](https://www.github.com/dm4t2/intl-number-input/commit/2b2f8c3bde1316d2b20d9a287bd0c1d7b9465af6))
+
+## [1.1.0](https://www.github.com/dm4t2/intl-number-input/compare/v1.0.0...v1.1.0) (2021-10-30)
+
+
+### Features
+
+* add new options `currencyDisplay` and `unitDisplay` ([ce38d4e](https://www.github.com/dm4t2/intl-number-input/commit/ce38d4ec12a302258c6347f143d85e43477f62bf))
+
+
+### Bug Fixes
+
+* decimal/grouping separator not detected in percent format style ([bb81ba0](https://www.github.com/dm4t2/intl-number-input/commit/bb81ba03130a1ed4fee733cd181483ac110bdf7e))
+* prevent caret position from jumping to the end ([73904c2](https://www.github.com/dm4t2/intl-number-input/commit/73904c208db8e1ca982a209e29d5d175cb4aeeed))
+* prevent input of too large numbers ([9283033](https://www.github.com/dm4t2/intl-number-input/commit/928303320af0b670a731b6fd753e48904c1aac69))
+* set correct caret position on focus when using `autoDecimalDigits` ([549fa48](https://www.github.com/dm4t2/intl-number-input/commit/549fa484d59866429573e9cca0f757c3745b41b8))
+
+## 1.0.0 (2021-10-16)
+
+
+### Features
+
+* add percent format style ([#1](https://www.github.com/dm4t2/intl-number-input/issues/1)) ([3035d1e](https://www.github.com/dm4t2/intl-number-input/commit/3035d1ea8b6f0ee303dd843b098c7b661a37052b))

dist/tsdoc-metadata.json

+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.19.5"
+    }
+  ]
+}

dist/index.cjs.js

 /**
- * Intl Number Input 1.2.1
+ * Intl Number Input 1.3.0
  * (c) 2022 Matthias Stiller
@@ -23,20 +23,68 @@ * @license MIT
 
+/**
+ * Available format styles.
+ *
+ * @public
+ */
 exports.NumberFormatStyle = void 0;
 (function (NumberFormatStyle) {
+    /**
+     * Use currency formatting.
+     */
+    NumberFormatStyle["Currency"] = "currency";
+    /**
+     * Use plain number formatting (default).
+     */
     NumberFormatStyle["Decimal"] = "decimal";
-    NumberFormatStyle["Currency"] = "currency";
+    /**
+     * Use percent formatting
+     */
+    NumberFormatStyle["Percent"] = "percent";
+    /**
+     * Use unit formatting.
+     */
     NumberFormatStyle["Unit"] = "unit";
-    NumberFormatStyle["Percent"] = "percent";
 })(exports.NumberFormatStyle || (exports.NumberFormatStyle = {}));
+/**
+ * Available currency display options when using  {@link NumberFormatStyle.Currency}.
+ *
+ * @public
+ */
 exports.CurrencyDisplay = void 0;
 (function (CurrencyDisplay) {
+    /**
+     * Use a localized currency symbol such as "€" (default).
+     */
     CurrencyDisplay["Symbol"] = "symbol";
+    /**
+     * Use a narrow format symbol ("$100" rather than "US$100").
+     */
     CurrencyDisplay["NarrowSymbol"] = "narrowSymbol";
+    /**
+     * Use the ISO currency code.
+     */
     CurrencyDisplay["Code"] = "code";
+    /**
+     * Use a localized currency name such as "dollar".
+     */
     CurrencyDisplay["Name"] = "name";
 })(exports.CurrencyDisplay || (exports.CurrencyDisplay = {}));
+/**
+ * Available unit display options when using {@link NumberFormatStyle.Unit}.
+ *
+ * @public
+ */
 exports.UnitDisplay = void 0;
 (function (UnitDisplay) {
+    /**
+     * Use a short formatting, for example "1024B" (default).
+     */
     UnitDisplay["Short"] = "short";
+    /**
+     * Use a narrow formatting, for example "1024 byte".
+     */
     UnitDisplay["Narrow"] = "narrow";
+    /**
+     * Use a long formatting, for example "1024 bytes".
+     */
     UnitDisplay["Long"] = "long";
@@ -268,2 +316,7 @@ })(exports.UnitDisplay || (exports.UnitDisplay = {}));
 
+/**
+ * The `NumberInput` class turns a `HTMLInputElement` into a number input field.
+ *
+ * @public
+ */
 class NumberInput {
@@ -279,2 +332,7 @@ constructor(args) {
     }
+    /**
+     * Updates the options.
+     *
+     * @param options - The new options.
+     */
     setOptions(options) {
@@ -284,2 +342,5 @@ this.init(options);
     }
+    /**
+     * Gets the current value.
+     */
     getValue() {
@@ -289,2 +350,7 @@ const numberValue = this.options.exportValueAsInteger && this.numberValue != null ? this.toInteger(this.numberValue) : this.numberValue;
     }
+    /**
+     * Sets a value programmatically.
+     *
+     * @param value - The new value.
+     */
     setValue(value) {
@@ -296,2 +362,5 @@ const newValue = this.options.exportValueAsInteger && value != null ? this.toFloat(value) : value;
     }
+    /**
+     * Increments the value by the configured {@link NumberInputOptions.step|step}.
+     */
     increment() {
@@ -301,2 +370,5 @@ var _a;
     }
+    /**
+     * Decrements the value by the configured {@link NumberInputOptions.step|step}.
+     */
     decrement() {
@@ -303,0 +375,0 @@ var _a;

dist/index.d.ts

@@ -1,52 +0,55 @@
-interface NumberInputConstructorArgs {
-    el: HTMLInputElement;
-    options: NumberInputOptions;
-    onInput?(value: NumberInputValue): void;
-    onChange?(value: NumberInputValue): void;
-}
-interface NumberInputValue {
-    number: number | null;
-    formatted: string | null;
-}
-interface NumberRange {
-    min?: number;
-    max?: number;
-}
-declare enum NumberFormatStyle {
-    Decimal = "decimal",
-    Currency = "currency",
-    Unit = "unit",
-    Percent = "percent"
-}
-declare enum CurrencyDisplay {
+/**
+ * Available currency display options when using  {@link NumberFormatStyle.Currency}.
+ *
+ * @public
+ */
+export declare enum CurrencyDisplay {
+    /**
+     * Use a localized currency symbol such as "€" (default).
+     */
     Symbol = "symbol",
+    /**
+     * Use a narrow format symbol ("$100" rather than "US$100").
+     */
     NarrowSymbol = "narrowSymbol",
+    /**
+     * Use the ISO currency code.
+     */
     Code = "code",
+    /**
+     * Use a localized currency name such as "dollar".
+     */
     Name = "name"
 }
-declare enum UnitDisplay {
-    Short = "short",
-    Narrow = "narrow",
-    Long = "long"
+
+/**
+ * Available format styles.
+ *
+ * @public
+ */
+export declare enum NumberFormatStyle {
+    /**
+     * Use currency formatting.
+     */
+    Currency = "currency",
+    /**
+     * Use plain number formatting (default).
+     */
+    Decimal = "decimal",
+    /**
+     * Use percent formatting
+     */
+    Percent = "percent",
+    /**
+     * Use unit formatting.
+     */
+    Unit = "unit"
 }
-interface NumberInputOptions {
-    locale?: string;
-    formatStyle?: NumberFormatStyle;
-    currency?: string;
-    currencyDisplay?: CurrencyDisplay;
-    unit?: string;
-    unitDisplay?: UnitDisplay;
-    exportValueAsInteger?: boolean;
-    hidePrefixOrSuffixOnFocus?: boolean;
-    hideGroupingSeparatorOnFocus?: boolean;
-    hideNegligibleDecimalDigitsOnFocus?: boolean;
-    precision?: number | NumberRange;
-    autoDecimalDigits?: boolean;
-    autoSign?: boolean;
-    valueRange?: NumberRange;
-    step?: number;
-    useGrouping?: boolean;
-}
 
-declare class NumberInput {
+/**
+ * The `NumberInput` class turns a `HTMLInputElement` into a number input field.
+ *
+ * @public
+ */
+export declare class NumberInput {
     private readonly el;
@@ -66,6 +69,25 @@ private options;
     constructor(args: NumberInputConstructorArgs);
+    /**
+     * Updates the options.
+     *
+     * @param options - The new options.
+     */
     setOptions(options: NumberInputOptions): void;
+    /**
+     * Gets the current value.
+     */
     getValue(): NumberInputValue;
+    /**
+     * Sets a value programmatically.
+     *
+     * @param value - The new value.
+     */
     setValue(value: number | null): void;
+    /**
+     * Increments the value by the configured {@link NumberInputOptions.step|step}.
+     */
     increment(): void;
+    /**
+     * Decrements the value by the configured {@link NumberInputOptions.step|step}.
+     */
     decrement(): void;
@@ -86,2 +108,175 @@ private init;
 
-export { CurrencyDisplay, NumberFormatStyle, NumberInput, NumberInputConstructorArgs, NumberInputOptions, NumberInputValue, NumberRange, UnitDisplay };
+/**
+ * The {@link NumberInput} constructor arguments.
+ *
+ * @public
+ */
+export declare interface NumberInputConstructorArgs {
+    /**
+     * The HTML input element to be used.
+     */
+    el: HTMLInputElement;
+    /**
+     * The options of the number input.
+     */
+    options: NumberInputOptions;
+    /**
+     * Callback function invoked on input.
+     *
+     * @param value - The current value.
+     */
+    onInput?(value: NumberInputValue): void;
+    /**
+     * Callback function invoked each time the value is changed.
+     *
+     * @param value - The current value.
+     */
+    onChange?(value: NumberInputValue): void;
+}
+
+/**
+ * The number input options.
+ *
+ * @public
+ */
+export declare interface NumberInputOptions {
+    /**
+     * A {@link https://tools.ietf.org/html/bcp47|BCP 47} language tag.
+     * Default value is `undefined` (use the default locale of the Browser)
+     *
+     * @example `"en"` or `"de-DE"`
+     */
+    locale?: string;
+    /**
+     * The format style to use.
+     * Default value is `"decimal"`.
+     */
+    formatStyle?: NumberFormatStyle;
+    /**
+     * A {@link https://en.wikipedia.org/wiki/ISO_4217|ISO 4217} currency code, which is required when using {@link NumberFormatStyle.Currency}.
+     *
+     * @example `"EUR"`
+     */
+    currency?: string;
+    /**
+     * How to display the currency when using {@link NumberFormatStyle.Currency}.
+     */
+    currencyDisplay?: CurrencyDisplay;
+    /**
+     * A {@link https://tc39.es/proposal-unified-intl-numberformat/section6/locales-currencies-tz_proposed_out.html#sec-issanctionedsimpleunitidentifier|unit identifier}, which is required when using {@link NumberFormatStyle.Unit}.
+     * Pairs of simple units can be concatenated with "-per-" to make a compound unit.
+     *
+     * @example `"byte"` (simple unit) or `"byte-per-second"` (compound unit).
+     */
+    unit?: string;
+    /**
+     * How to display the unit when using {@link NumberFormatStyle.Currency}.
+     */
+    unitDisplay?: UnitDisplay;
+    /**
+     * Whether the number value should be exported as integer instead of float value.
+     * Default value is `false`.
+     */
+    exportValueAsInteger?: boolean;
+    /**
+     * Whether to hide the prefix or suffix on focus.
+     * Default value is `true`.
+     */
+    hidePrefixOrSuffixOnFocus?: boolean;
+    /**
+     * Whether to hide the grouping separator on focus.
+     * Default value is `true`.
+     */
+    hideGroupingSeparatorOnFocus?: boolean;
+    /**
+     * Whether to hide negligible decimal digits on focus.
+     * Default value is `true`.
+     */
+    hideNegligibleDecimalDigitsOnFocus?: boolean;
+    /**
+     * The number of displayed decimal digits.
+     * Default value is `undefined` (use the default of the {@link NumberFormatStyle}, decimal digits will be hidden for integer numbers).
+     * Must be between 0 and 15.
+     */
+    precision?: number | NumberRange;
+    /**
+     * Whether the decimal symbol is inserted automatically, using the last inputted digits as decimal digits.
+     * Default is `false` (the decimal symbol needs to be inserted manually).
+     */
+    autoDecimalDigits?: boolean;
+    /**
+     * Whether the minus symbol is automatically inserted or prevented to be inputted depending on the configured `valueRange`.
+     * Default is `true`.
+     */
+    autoSign?: boolean;
+    /**
+     * The range of accepted values.
+     * Default is `undefined` (no value range).
+     * The validation is triggered on blur and automatically sets the respective threshold if out of range.
+     */
+    valueRange?: NumberRange;
+    /**
+     * Step size which is used to {@link NumberInput.increment|increment} or {@link NumberInput.decrement|decrement} the value.
+     * Default is `1`.
+     */
+    step?: number;
+    /**
+     * Whether to use grouping separators such as thousands/lakh/crore separators.
+     * Default is `true`.
+     */
+    useGrouping?: boolean;
+}
+
+/**
+ * Value model.
+ *
+ * @public
+ */
+export declare interface NumberInputValue {
+    /**
+     * The number value.
+     */
+    number: number | null;
+    /**
+     * The formatted value.
+     */
+    formatted: string | null;
+}
+
+/**
+ * Number Range.
+ *
+ * @public
+ */
+export declare interface NumberRange {
+    /**
+     * Minimum value.
+     */
+    min?: number;
+    /**
+     * Maximum value.
+     */
+    max?: number;
+}
+
+/**
+ * Available unit display options when using {@link NumberFormatStyle.Unit}.
+ *
+ * @public
+ */
+export declare enum UnitDisplay {
+    /**
+     * Use a short formatting, for example "1024B" (default).
+     */
+    Short = "short",
+    /**
+     * Use a narrow formatting, for example "1024 byte".
+     */
+    Narrow = "narrow",
+    /**
+     * Use a long formatting, for example "1024 bytes".
+     */
+    Long = "long"
+}
+
+export { }

dist/index.esm.js

 /**
- * Intl Number Input 1.2.1
+ * Intl Number Input 1.3.0
  * (c) 2022 Matthias Stiller
@@ -19,20 +19,68 @@ * @license MIT
 
+/**
+ * Available format styles.
+ *
+ * @public
+ */
 var NumberFormatStyle;
 (function (NumberFormatStyle) {
+    /**
+     * Use currency formatting.
+     */
+    NumberFormatStyle["Currency"] = "currency";
+    /**
+     * Use plain number formatting (default).
+     */
     NumberFormatStyle["Decimal"] = "decimal";
-    NumberFormatStyle["Currency"] = "currency";
+    /**
+     * Use percent formatting
+     */
+    NumberFormatStyle["Percent"] = "percent";
+    /**
+     * Use unit formatting.
+     */
     NumberFormatStyle["Unit"] = "unit";
-    NumberFormatStyle["Percent"] = "percent";
 })(NumberFormatStyle || (NumberFormatStyle = {}));
+/**
+ * Available currency display options when using  {@link NumberFormatStyle.Currency}.
+ *
+ * @public
+ */
 var CurrencyDisplay;
 (function (CurrencyDisplay) {
+    /**
+     * Use a localized currency symbol such as "€" (default).
+     */
     CurrencyDisplay["Symbol"] = "symbol";
+    /**
+     * Use a narrow format symbol ("$100" rather than "US$100").
+     */
     CurrencyDisplay["NarrowSymbol"] = "narrowSymbol";
+    /**
+     * Use the ISO currency code.
+     */
     CurrencyDisplay["Code"] = "code";
+    /**
+     * Use a localized currency name such as "dollar".
+     */
     CurrencyDisplay["Name"] = "name";
 })(CurrencyDisplay || (CurrencyDisplay = {}));
+/**
+ * Available unit display options when using {@link NumberFormatStyle.Unit}.
+ *
+ * @public
+ */
 var UnitDisplay;
 (function (UnitDisplay) {
+    /**
+     * Use a short formatting, for example "1024B" (default).
+     */
     UnitDisplay["Short"] = "short";
+    /**
+     * Use a narrow formatting, for example "1024 byte".
+     */
     UnitDisplay["Narrow"] = "narrow";
+    /**
+     * Use a long formatting, for example "1024 bytes".
+     */
     UnitDisplay["Long"] = "long";
@@ -264,2 +312,7 @@ })(UnitDisplay || (UnitDisplay = {}));
 
+/**
+ * The `NumberInput` class turns a `HTMLInputElement` into a number input field.
+ *
+ * @public
+ */
 class NumberInput {
@@ -275,2 +328,7 @@ constructor(args) {
     }
+    /**
+     * Updates the options.
+     *
+     * @param options - The new options.
+     */
     setOptions(options) {
@@ -280,2 +338,5 @@ this.init(options);
     }
+    /**
+     * Gets the current value.
+     */
     getValue() {
@@ -285,2 +346,7 @@ const numberValue = this.options.exportValueAsInteger && this.numberValue != null ? this.toInteger(this.numberValue) : this.numberValue;
     }
+    /**
+     * Sets a value programmatically.
+     *
+     * @param value - The new value.
+     */
     setValue(value) {
@@ -292,2 +358,5 @@ const newValue = this.options.exportValueAsInteger && value != null ? this.toFloat(value) : value;
     }
+    /**
+     * Increments the value by the configured {@link NumberInputOptions.step|step}.
+     */
     increment() {
@@ -297,2 +366,5 @@ var _a;
     }
+    /**
+     * Decrements the value by the configured {@link NumberInputOptions.step|step}.
+     */
     decrement() {
@@ -299,0 +371,0 @@ var _a;

package.json

 {
   "name": "intl-number-input",
   "description": "Easy input of formatted numbers based on the ECMAScript Internationalization API (ECMA-402).",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "license": "MIT",
@@ -10,4 +10,3 @@ "module": "./dist/index.esm.js",
   "files": [
-    "dist/*.js",
-    "dist/index.d.ts"
+    "dist"
   ],
@@ -17,3 +16,4 @@ "exports": {
       "import": "./dist/index.esm.js",
-      "require": "./dist/index.cjs.js"
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/index.d.ts"
     }
@@ -36,9 +36,17 @@ },
     "lint": "eslint --no-fix --max-warnings 0 {**/*,*}.{js,ts} && prettier --check {**/*,*}.{js,ts}",
-    "prebuild": "rimraf dist",
-    "build": "tsc --emitDeclarationOnly --declaration --outDir dist/types && rollup -c rollup.config.js",
+    "api:extract": "tsc --emitDeclarationOnly --declaration --outDir temp/types && api-extractor run --local",
+    "api:docs": "node scripts/api-docs.js",
+    "build:api": "run-s api:extract api:docs",
+    "build:bundle": "rollup -c rollup.config.js",
+    "build:docs": "vitepress build docs",
     "dev": "vitepress dev docs",
-    "docs": "vitepress build docs"
+    "docs": "run-s build:api build:docs",
+    "prerelease": "rimraf dist",
+    "release": "run-s build:api build:bundle build:docs"
   },
   "devDependencies": {
+    "@microsoft/api-documenter": "^7.13.67",
+    "@microsoft/api-extractor": "^7.18.18",
     "@types/jest": "^26.0.23",
+    "@types/stringify-object": "^3.3.1",
     "@typescript-eslint/eslint-plugin": "^4.26.1",
@@ -48,10 +56,11 @@ "@typescript-eslint/parser": "^4.26.1",
     "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-tsdoc": "^0.2.14",
     "jest": "^26.6.3",
     "jest-environment-jsdom-fifteen": "^1.0.2",
+    "npm-run-all": "^4.1.5",
     "prettier": "^2.3.1",
     "rimraf": "^3.0.2",
     "rollup": "^2.58.0",
-    "rollup-plugin-dts": "^4.0.0",
     "rollup-plugin-typescript2": "^0.30.0",
-    "sass": "^1.37.5",
+    "sass": "^1.32.0",
     "stringify-object": "^3.3.0",
@@ -58,0 +67,0 @@ "ts-jest": "^26.5.6",

README.md

 [![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)
+![npm](https://img.shields.io/npm/v/intl-number-input)
+![npm bundle size](https://img.shields.io/bundlephobia/minzip/intl-number-input)
+![NPM](https://img.shields.io/npm/l/intl-number-input)
 
@@ -14,1 +13,7 @@ # Intl Number Input
 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

67010

21.14%

Number of package files

8

33.33%

Lines of code

1453

31.02%

Number of lines in readme file

19

35.71%

Worsened metrics

Dev dependency count

25

19.05%

No dependency changes