Add format property to NumberRange component

[jeanaurent]

Problem:
Large numbers in NumberRange are hard to read without formatting (e.g., "1000000").

Solution:
Implement a Svelte action to apply a specific formatting to the value of the min and max fields of NumberRange.

Description of the proposal:

1. The backend must specify the format as a regex expression
2. Add format property to NumberRange Class

class NumberRange {
  ...
  public Format: string | null = null; 
}

and to the controller

export class Controller extends InputController<NumberRange> {
  ...
  public format: string | null = null;
}

3. Implement a Svelte action that would accept a regex expression as a parameter to format a value (e.g., "regex:\\B(?=(\\d{3})+(?!\\d))")

• By default (or if format is null), there is no formatting.
• Display is formatted on blur, raw on focus.
• Can be used as a normal svelte action <input bind:value={controller.minValue} use:formatInput={{ format: format }}/>

4. No serialization changes in the NumberRange component

[codingawayy]

Good idea, but couple of comments below.

Naming

Let's call it use:format instead of use:formatInput.

Regex isn't the right approach

Regex is problematic: cryptic to write/maintain, locale-ignorant, one-way only (no parsing), and couples backend to JS implementation details.

Suggested approach: Use Intl.NumberFormat

// Plain number with thousand separators
new Intl.NumberFormat('en-US').format(1000000)  // "1,000,000"

// Currency
new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(1234.5)  // "$1,234.50"

// Percentage
new Intl.NumberFormat('en-US', { style: 'percent' }).format(0.45)  // "45%"

// Units
new Intl.NumberFormat('en-US', { style: 'unit', unit: 'kilometer' }).format(12)  // "12 km"

Create a NumberFormatAttribute with properties matching Intl.NumberFormat options (locale is determined client-side):

public class NumberFormatAttribute : Attribute
{
    public string Style { get; set; } = "decimal";  // "decimal", "currency", "percent", "unit"
    public string? Currency { get; set; }           // ISO 4217 code, e.g., "USD", "EUR"
    public bool UseGrouping { get; set; } = true;   // thousand separators
    public int? MinFractionDigits { get; set; }
    public int? MaxFractionDigits { get; set; }
}

[NumberFormat(UseGrouping = true)]
public NumberRange Quantity { get; set; }

[NumberFormat(Style = "currency", Currency = "USD")]
public NumberRange Price { get; set; }

<input bind:value={controller.minValue} use:format={controller.metadata.Component.Configuration}/>