Bring number-column formatting options to nimble-number-field

fredvisser commented 6 months ago

😯 Problem to Solve

Clients like DFF require locale-specific, decimal number formatting in the nimble-number-field.

💁 Proposed Solution

Adopt the decimal formatting options from the nimble-table-column-number-text component.

Support for the format property including the default and decimal options
Support for the decimal-digits and decimal-maximum-digits properties

~~Adopt the automatically locale specific number formatting from the nimble-table-column-number-text component.~~ ~~- E.g. Should render 1,002.9 as 1.002,9 for German locales.~~

Support browser APIs for locale aware number inputs. E.g. German locales will enter and render numbers as 1002,9.

📋 Tasks

[ ] update nimble-number-field custom element
[ ] update nimble-number-field unit tests
[ ] update nimble-number-field Storybook tests
[ ] update nimble-number-field Storybook docs
[ ] update nimble-number-field Angular wrapper
[ ] update nimble-number-field Blazor wrapper
[ ] Add to Angular example app
[ ] Add to Blazor example app

rajsite commented 6 months ago

@fredvisser is this for number inputs or number rendering as text? Number input support is likely to be challenging.

jattasNI commented 3 months ago

Some of the challenges if we want to support formatting inputs:

localization. Right now we always use . for decimal separator and , for thousands separator, but some locales use the opposite or other characters like space. If the user types one of those characters, how do we interpret it? If we decide to allow inputting only in en-us, will it be weird to switch the format to a different locale after the user commits the value?
if a number is being formatted with a limited number of digits but the user inputs a higher precision number, what happens to the extra digits? Are they discarded completely? Or are they persisted in the value but truncated from the display?

ChrisDecombe commented 1 month ago

Answer to point 1: The input format should be depending on the language set on the UI (Browser). YOu should save always in the same format independent to the display format.

Answer to point 2: If the field is configured with 2 digits after the comma. If you try to enter a third digit this digit should not be displayed in the input field and it shouldn't be saved.

rajsite commented 5 days ago

Ran into the maskito library which looks potentially promising for building up some forms of formatted text input: https://maskito.dev/getting-started/what-is-maskito

ni / nimble