@canutin/svelte-currency-input 0.5.0 → 0.5.2

package/{package/CurrencyInput.svelte → CurrencyInput.svelte}

@@ -1,14 +1,17 @@
-<script>export let value = 0;
-export let locale = 'en-US';
-export let currency = 'USD';
-export let name = 'total';
+<script>const DEFAULT_LOCALE = 'en-US';
+const DEFAULT_CURRENCY = 'USD';
+const DEFAULT_NAME = 'total';
+const DEFAULT_VALUE = 0;
+const DEFAULT_FRACTION_DIGITS = 2;
+export let value = DEFAULT_VALUE;
+export let locale = DEFAULT_LOCALE;
+export let currency = DEFAULT_CURRENCY;
+export let name = DEFAULT_NAME;
 export let required = false;
 export let disabled = false;
+export let placeholder = DEFAULT_VALUE;
 export let isNegativeAllowed = true;
-let formattedValue = '';
-$: isZero = value === 0;
-$: isNegative = value < 0;
-$: value, applyFormatting();
+export let fractionDigits = DEFAULT_FRACTION_DIGITS;
 // Formats value as: e.g. $1,523.00 | -$1,523.00
 const formatCurrency = (value, maximumFractionDigits, minimumFractionDigits) => {
     return new Intl.NumberFormat(locale, {
@@ -18,17 +21,26 @@ const formatCurrency = (value, maximumFractionDigits, minimumFractionDigits) =>
         minimumFractionDigits: minimumFractionDigits || 0
     }).format(value);
 };
-const placeholder = formatCurrency(0, 2, 2); // e.g. '$0.00'
+// Checks if the key pressed is allowed
+const handleKeyDown = (event) => {
+    const isDeletion = event.key === 'Backspace' || event.key === 'Delete';
+    const isModifier = event.metaKey || event.altKey || event.ctrlKey;
+    const isArrowKey = event.key === 'ArrowLeft' || event.key === 'ArrowRight';
+    const isInvalidCharacter = !/^\d|,|\.|-$/g.test(event.key); // Keys that are not a digit, comma, period or minus sign
+    if (!isDeletion && !isModifier && !isArrowKey && isInvalidCharacter)
+        event.preventDefault();
+};
+const currencyDecimal = new Intl.NumberFormat(locale).format(1.1).charAt(1); // '.' or ','
+const isDecimalComma = currencyDecimal === ','; // Remove currency formatting from `formattedValue` so we can assign it to `value`
 const currencySymbol = formatCurrency(0, 0)
     .replace('0', '') // e.g. '$0' > '$'
     .replace(/\u00A0/, ''); // e.g '0 €' > '€'
-const currencyDecimal = new Intl.NumberFormat(locale).format(1.1).charAt(1); // '.' or ','
 // Updates `value` by stripping away the currency formatting
-const setValue = (event) => {
-    // Don't format if the user is typing a currencyDecimal point
-    if (event?.key === currencyDecimal)
+const setUnformattedValue = (event) => {
+    // Don't format if the user is typing a `currencyDecimal` point
+    if (event.key === currencyDecimal)
         return;
-    // If `formattedValue` is ['$', '-$', "-"] we don't need to continue
+    // Don't format if `formattedValue` is ['$', '-$', "-"]
     const ignoreSymbols = [currencySymbol, `-${currencySymbol}`, '-'];
     const strippedUnformattedValue = formattedValue.replace(' ', '');
     if (ignoreSymbols.includes(strippedUnformattedValue))
@@ -38,7 +50,7 @@ const setValue = (event) => {
         ? formattedValue.replace(/[^0-9,.-]/g, '')
         : formattedValue.replace(/[^0-9,.]/g, '');
     // Reverse the value when minus is pressed
-    if (isNegativeAllowed && event?.key === '-')
+    if (isNegativeAllowed && event.key === '-')
         value = value * -1;
     // Finally set the value
     if (Number.isNaN(parseFloat(unformattedValue))) {
@@ -46,16 +58,20 @@ const setValue = (event) => {
     }
     else {
         // The order of the following operations is *critical*
-        const isDecimalComma = currencyDecimal === ','; // Remove currency formatting from `formattedValue` so we can assign it to `value`
         unformattedValue = unformattedValue.replace(isDecimalComma ? /\./g : /\,/g, ''); // Remove all group symbols
         if (isDecimalComma)
             unformattedValue = unformattedValue.replace(',', '.'); // If the decimal point is a comma, replace it with a period
         value = parseFloat(unformattedValue);
     }
 };
-const applyFormatting = () => {
-    formattedValue = isZero ? '' : formatCurrency(value, 2, 0);
+const setFormattedValue = () => {
+    formattedValue = isZero ? '' : formatCurrency(value, fractionDigits, 0);
 };
+let formattedValue = '';
+let formattedPlaceholder = placeholder !== null ? formatCurrency(placeholder, fractionDigits, fractionDigits) : '';
+$: isZero = value === 0;
+$: isNegative = value < 0;
+$: value, setFormattedValue();
 </script>
 
 <div class="currencyInput">
@@ -71,10 +87,11 @@ const applyFormatting = () => {
 		inputmode="numeric"
 		name={`formatted-${name}`}
 		required={required && !isZero}
-		{placeholder}
+		placeholder={formattedPlaceholder}
 		{disabled}
 		bind:value={formattedValue}
-		on:keyup={setValue}
+		on:keydown={handleKeyDown}
+		on:keyup={setUnformattedValue}
 	/>
 </div>
 

package/{package/CurrencyInput.svelte.d.ts → CurrencyInput.svelte.d.ts}

@@ -7,7 +7,9 @@ declare const __propDef: {
         name?: string | undefined;
         required?: boolean | undefined;
         disabled?: boolean | undefined;
+        placeholder?: number | null | undefined;
         isNegativeAllowed?: boolean | undefined;
+        fractionDigits?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,57 +1,51 @@
 {
-	"name": "@canutin/svelte-currency-input",
-	"version": "0.5.0",
-	"exports": {
-		".": "./index.js"
-	},
-	"scripts": {
-		"dev": "vite dev",
-		"build": "svelte-kit sync && svelte-package",
-		"test": "playwright test",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --check . && eslint .",
-		"format": "prettier --write ."
-	},
-	"devDependencies": {
-		"@playwright/test": "^1.25.0",
-		"@sveltejs/adapter-auto": "next",
-		"@sveltejs/kit": "next",
-		"@sveltejs/package": "next",
-		"@typescript-eslint/eslint-plugin": "^5.27.0",
-		"@typescript-eslint/parser": "^5.27.0",
-		"eslint": "^8.16.0",
-		"eslint-config-prettier": "^8.3.0",
-		"eslint-plugin-svelte3": "^4.0.0",
-		"prettier": "^2.6.2",
-		"prettier-plugin-svelte": "^2.7.0",
-		"semantic-release": "^19.0.5",
-		"svelte": "^3.44.0",
-		"svelte-check": "^2.7.1",
-		"svelte-preprocess": "^4.10.6",
-		"tslib": "^2.3.1",
-		"typescript": "^4.7.4",
-		"vite": "^3.1.0"
-	},
-	"type": "module",
-	"description": "A form input that converts numbers to currencies as you type in localized formats",
-	"keywords": [
-		"svelte",
-		"currency",
-		"money",
-		"input",
-		"i18n",
-		"positive",
-		"negative"
-	],
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/canutin/svelte-currency-input.git"
-	},
-	"author": "Fernando Maclen <hello@fernando.is>",
-	"license": "MIT",
-	"bugs": {
-		"url": "https://github.com/canutin/svelte-currency-input/issues"
-	},
-	"homepage": "https://github.com/canutin/svelte-currency-input#readme"
+  "name": "@canutin/svelte-currency-input",
+  "version": "0.5.2",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": "./index.js",
+    "./CurrencyInput.svelte": "./CurrencyInput.svelte"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.25.0",
+    "@sveltejs/adapter-auto": "next",
+    "@sveltejs/kit": "next",
+    "@sveltejs/package": "next",
+    "@typescript-eslint/eslint-plugin": "^5.27.0",
+    "@typescript-eslint/parser": "^5.27.0",
+    "eslint": "^8.16.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "prettier": "^2.6.2",
+    "prettier-plugin-svelte": "^2.7.0",
+    "semantic-release": "^19.0.5",
+    "svelte": "^3.44.0",
+    "svelte-check": "^2.7.1",
+    "svelte-preprocess": "^4.10.6",
+    "tslib": "^2.3.1",
+    "typescript": "^4.7.4",
+    "vite": "^3.1.0"
+  },
+  "type": "module",
+  "description": "A form input that converts numbers to currencies as you type in localized formats",
+  "keywords": [
+    "svelte",
+    "currency",
+    "money",
+    "input",
+    "i18n",
+    "positive",
+    "negative"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/canutin/svelte-currency-input.git"
+  },
+  "author": "Fernando Maclen <hello@fernando.is>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/canutin/svelte-currency-input/issues"
+  },
+  "homepage": "https://github.com/canutin/svelte-currency-input#readme",
+  "svelte": "./index.js"
 }

package/.eslintignore

@@ -1,13 +0,0 @@
-.DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-
-# Ignore files for PNPM, NPM and YARN
-pnpm-lock.yaml
-package-lock.json
-yarn.lock

package/.eslintrc.cjs

@@ -1,20 +0,0 @@
-module.exports = {
-	root: true,
-	parser: '@typescript-eslint/parser',
-	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
-	plugins: ['svelte3', '@typescript-eslint'],
-	ignorePatterns: ['*.cjs'],
-	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
-	settings: {
-		'svelte3/typescript': () => require('typescript')
-	},
-	parserOptions: {
-		sourceType: 'module',
-		ecmaVersion: 2020
-	},
-	env: {
-		browser: true,
-		es2017: true,
-		node: true
-	}
-};

package/.gitattributes

@@ -1,2 +0,0 @@
-# Auto detect text files and perform LF normalization
-* text=auto

package/.github/workflows/release.yml

@@ -1,28 +0,0 @@
-name: Test, build & release
-
-on:
-  push:
-    branches: [main, master]
-
-jobs:
-  Publish:
-    name: Release
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '16.x'
-      - name: Install dependencies
-        run: npm ci
-      - name: Install Playwright Browsers
-        run: npx playwright install --with-deps
-      - name: Run Playwright tests
-        run: npm test
-        env:
-          NODE_ENV: CI
-      - name: Run semantic release
-        run: npx semantic-release --branches main
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/tests.yml

@@ -1,23 +0,0 @@
-name: Integration tests
-
-on:
-  pull_request:
-    branches: [main, master]
-
-jobs:
-  Playwright:
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '16.x'
-      - name: Install dependencies
-        run: npm ci
-      - name: Install Playwright Browsers
-        run: npx playwright install --with-deps
-      - name: Run Playwright tests
-        run: npm test
-        env:
-          NODE_ENV: CI

package/.prettierignore

@@ -1,14 +0,0 @@
-.DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-README.md
-
-# Ignore files for PNPM, NPM and YARN
-pnpm-lock.yaml
-package-lock.json
-yarn.lock

package/.prettierrc

@@ -1,8 +0,0 @@
-{
-	"useTabs": true,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100,
-	"pluginSearchDirs": ["."],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
-}

package/package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2022 Canutin
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/package/README.md

@@ -1,118 +0,0 @@
-# svelte-currency-input
-
-A form input that converts numbers to localized currency formats as you type
-
-[<img width="1059" alt="image" src="https://user-images.githubusercontent.com/1434675/190315136-c1d310ab-0ef1-441d-a80c-2b3727d74f59.png">](https://svelte.dev/repl/d8f7d22e5b384555b430f62b157ac503?version=3.50.1)
-
-<p align="center">
-  👩‍💻 Play with it on <a href="https://svelte.dev/repl/d8f7d22e5b384555b430f62b157ac503?version=3.50.1" target="_blank">REPL</a>  &nbsp;—&nbsp; 💵 See it in a <a href="https://github.com/Canutin/desktop/blob/master/sveltekit/src/lib/components/FormCurrency.svelte" target="_blank">real project</a>!
-</p>
-
----
-
-## Features
-
-- Formats **positive** and **negative** values
-- Leverages [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) for **localizing** currency denominations and masking the input
-- Simple [API](#api)
-- Minimal [default styling](https://github.com/canutin/svelte-currency-input/blob/main/src/lib/CurrencyInput.svelte#L88-L118), easy to [customize](#styling)
-
-## Usage
-
-```bash
-npm install svelte-currency-input --save
-```
-
-```html
-<script lang="ts">
-  import CurrencyInput from '@canutin/svelte-currency-input';
-</script>
-
-<CurrencyInput name="total" value={-420.69} locale="nl-NL" currency="EUR" />
-```
-
-## How it works
-
-When the form is submitted you get _unformatted_ or _formatted_ values from two `<input />`'s.
-This is more or less what `<CurrencyInput />` looks like under the hood:
-
-```html
-<div class="currencyInput">
-  <!-- Unformatted value -->
-  <input
-    class="currencyInput__unformatted"
-    type="hidden"
-    name="total"
-    value="-420.69"
-  />
-
-  <!-- Formatted value -->
-  <input
-    class="currencyInput__formatted"
-    type="text"
-    name="formatted-total"
-    value="€ -420,69"
-  />
-</div>
-```
-
-## API
-
-| Option            | Type      | Default     | Description                                                                                                                                         |
-| ----------------- | --------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| value             | `number`  | `undefined` | Initial value. If left `undefined` a formatted value of `0` is visible as a placeholder                                                             |
-| locale            | `string`  | `en-US`     | Overrides default locale. [Examples](https://gist.github.com/ncreated/9934896)                                                                      |
-| currency          | `string`  | `USD`       | Overrides default currency. [Examples](https://github.com/datasets/currency-codes/blob/master/data/codes-all.csv)                                   |
-| name              | `string`  | `total`     | Applies the name to the [input fields](#how-it-works) for _unformatted_ (e.g `[name=total]`) and _formatted_ (e.g. `[name=formatted-total]`) values |
-| required          | `boolean` | `false`     | Marks the inputs as required                                                                                                                        |
-| disabled          | `boolean` | `false`     | Marks the inputs as disabled                                                                                                                        |
-| isNegativeAllowed | `boolean` | `true`      | If `false`, forces formatting only to positive values and ignores `--positive` and `--negative` styling modifiers                                   |
-
-## Styling
-
-The [default styles](https://github.com/canutin/svelte-currency-input/blob/main/src/lib/CurrencyInput.svelte#L88-L118) use [BEM naming conventions](https://getbem.com/naming/). To override the default styles apply your styles as shown below:
-
-```html
-<div class="my-currency-input">
-  <CurrencyInput name="total" value="{420.69}" />
-</div>
-
-<style>
-  /* Container */
-  div.my-currency-input :global(div.currencyInput) { /* ... */ }
-
-  /* Formatted input */
-  div.my-currency-input :global(input.currencyInput__formatted) { /* ... */ }
-
-  /* Formatted input when the it's disabled */
-  div.my-currency-input :global(input.currencyInput__formatted:disabled) { /* ... */ }
-
-  /* Formatted input when the value is zero */
-  div.my-currency-input :global(input.currencyInput__formatted--zero) { /* ... */ }
-
-  /* Formatted input when the value is positive */
-  div.my-currency-input :global(input.currencyInput__formatted--positive) { /* ... */ }
-
-  /* Formatted input when the value is negative */
-  div.my-currency-input :global(input.currencyInput__formatted--negative) { /* ... */ }
-</style>
-```
-
-## Contributing
-
-Here's ways in which you can contribute:
-
-- Found a bug? Open a [new issue](https://github.com/canutin/svelte-currency-input/issues/new)
-- Browse our [existing issues](https://github.com/canutin/svelte-currency-input/issues)
-- Submit a [pull request](https://github.com/canutin/svelte-currency-input/pulls)
-
-## Developing
-
-This package was generated with [SvelteKit](https://kit.svelte.dev/). Install dependencies with `npm install`, then start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```

package/package/package.json

@@ -1,51 +0,0 @@
-{
-  "name": "@canutin/svelte-currency-input",
-  "version": "0.0.0-development",
-  "exports": {
-    "./package.json": "./package.json",
-    ".": "./index.js",
-    "./CurrencyInput.svelte": "./CurrencyInput.svelte"
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.25.0",
-    "@sveltejs/adapter-auto": "next",
-    "@sveltejs/kit": "next",
-    "@sveltejs/package": "next",
-    "@typescript-eslint/eslint-plugin": "^5.27.0",
-    "@typescript-eslint/parser": "^5.27.0",
-    "eslint": "^8.16.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-svelte3": "^4.0.0",
-    "prettier": "^2.6.2",
-    "prettier-plugin-svelte": "^2.7.0",
-    "semantic-release": "^19.0.5",
-    "svelte": "^3.44.0",
-    "svelte-check": "^2.7.1",
-    "svelte-preprocess": "^4.10.6",
-    "tslib": "^2.3.1",
-    "typescript": "^4.7.4",
-    "vite": "^3.1.0"
-  },
-  "type": "module",
-  "description": "A form input that converts numbers to currencies as you type in localized formats",
-  "keywords": [
-    "svelte",
-    "currency",
-    "money",
-    "input",
-    "i18n",
-    "positive",
-    "negative"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/canutin/svelte-currency-input.git"
-  },
-  "author": "Fernando Maclen <hello@fernando.is>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/canutin/svelte-currency-input/issues"
-  },
-  "homepage": "https://github.com/canutin/svelte-currency-input#readme",
-  "svelte": "./index.js"
-}

package/playwright.config.ts

@@ -1,33 +0,0 @@
-import { type PlaywrightTestConfig, devices } from '@playwright/test';
-
-const isEnvCI = process.env.NODE_ENV === 'CI';
-
-const enableMultipleBrowsers = [
-	{
-		name: 'chromium',
-		use: { ...devices['Desktop Chrome'] }
-	},
-	{
-		name: 'firefox',
-		use: { ...devices['Desktop Firefox'] }
-	},
-	{
-		name: 'webkit',
-		use: { ...devices['Desktop Safari'] }
-	}
-];
-
-const config: PlaywrightTestConfig = {
-	webServer: {
-		command: 'npm run dev',
-		port: 5173
-	},
-	retries: isEnvCI ? 3 : 0,
-	use: {
-		trace: isEnvCI ? 'off' : 'retain-on-failure',
-		screenshot: isEnvCI ? 'off' : 'only-on-failure'
-	},
-	projects: isEnvCI ? enableMultipleBrowsers : undefined
-};
-
-export default config;

package/src/app.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="@sveltejs/kit" />
-
-// See https://kit.svelte.dev/docs/types#app
-// for information about these interfaces
-// and what to do when importing types
-declare namespace App {
-	// interface Locals {}
-	// interface PageData {}
-	// interface PageError {}
-	// interface Platform {}
-}

package/src/app.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body>
-		<div>%sveltekit.body%</div>
-	</body>
-</html>

package/src/lib/CurrencyInput.svelte

@@ -1,135 +0,0 @@
-<script lang="ts">
-	const DEFAULT_LOCALE = 'en-US';
-	const DEFAULT_CURRENCY = 'USD';
-	const DEFAULT_NAME = 'total';
-	const DEFAULT_VALUE = 0;
-	const DEFAULT_FRACTION_DIGITS = 2;
-
-	export let value: number = DEFAULT_VALUE;
-	export let locale: string = DEFAULT_LOCALE;
-	export let currency: string = DEFAULT_CURRENCY;
-	export let name: string = DEFAULT_NAME;
-	export let required: boolean = false;
-	export let disabled: boolean = false;
-	export let placeholder: number | null = DEFAULT_VALUE;
-	export let isNegativeAllowed: boolean = true;
-	export let fractionDigits: number = DEFAULT_FRACTION_DIGITS;
-
-	// Formats value as: e.g. $1,523.00 | -$1,523.00
-	const formatCurrency = (
-		value: number,
-		maximumFractionDigits?: number,
-		minimumFractionDigits?: number
-	) => {
-		return new Intl.NumberFormat(locale, {
-			currency: currency,
-			style: 'currency',
-			maximumFractionDigits: maximumFractionDigits || 0,
-			minimumFractionDigits: minimumFractionDigits || 0
-		}).format(value);
-	};
-
-	// Checks if the key pressed is allowed
-	const handleKeyDown = (event: KeyboardEvent) => {
-		const isDeletion = event.key === 'Backspace' || event.key === 'Delete';
-		const isModifier = event.metaKey || event.altKey || event.ctrlKey;
-		const isArrowKey = event.key === 'ArrowLeft' || event.key === 'ArrowRight';
-		const isInvalidCharacter = !/^\d|,|\.|-$/g.test(event.key); // Keys that are not a digit, comma, period or minus sign
-
-		if (!isDeletion && !isModifier && !isArrowKey && isInvalidCharacter) event.preventDefault();
-	};
-
-	const currencyDecimal = new Intl.NumberFormat(locale).format(1.1).charAt(1); // '.' or ','
-	const isDecimalComma = currencyDecimal === ','; // Remove currency formatting from `formattedValue` so we can assign it to `value`
-	const currencySymbol = formatCurrency(0, 0)
-		.replace('0', '') // e.g. '$0' > '$'
-		.replace(/\u00A0/, ''); // e.g '0 €' > '€'
-
-	// Updates `value` by stripping away the currency formatting
-	const setUnformattedValue = (event: KeyboardEvent) => {
-		// Don't format if the user is typing a `currencyDecimal` point
-		if (event.key === currencyDecimal) return;
-
-		// Don't format if `formattedValue` is ['$', '-$', "-"]
-		const ignoreSymbols = [currencySymbol, `-${currencySymbol}`, '-'];
-		const strippedUnformattedValue = formattedValue.replace(' ', '');
-		if (ignoreSymbols.includes(strippedUnformattedValue)) return;
-
-		// Remove all characters that arent: numbers, commas, periods (or minus signs if `isNegativeAllowed`)
-		let unformattedValue = isNegativeAllowed
-			? formattedValue.replace(/[^0-9,.-]/g, '')
-			: formattedValue.replace(/[^0-9,.]/g, '');
-
-		// Reverse the value when minus is pressed
-		if (isNegativeAllowed && event.key === '-') value = value * -1;
-
-		// Finally set the value
-		if (Number.isNaN(parseFloat(unformattedValue))) {
-			value = 0;
-		} else {
-			// The order of the following operations is *critical*
-			unformattedValue = unformattedValue.replace(isDecimalComma ? /\./g : /\,/g, ''); // Remove all group symbols
-			if (isDecimalComma) unformattedValue = unformattedValue.replace(',', '.'); // If the decimal point is a comma, replace it with a period
-			value = parseFloat(unformattedValue);
-		}
-	};
-
-	const setFormattedValue = () => {
-		formattedValue = isZero ? '' : formatCurrency(value, fractionDigits, 0);
-	};
-
-	let formattedValue = '';
-	let formattedPlaceholder =
-		placeholder !== null ? formatCurrency(placeholder, fractionDigits, fractionDigits) : '';
-	$: isZero = value === 0;
-	$: isNegative = value < 0;
-	$: value, setFormattedValue();
-</script>
-
-<div class="currencyInput">
-	<input class="currencyInput__unformatted" type="hidden" {name} {disabled} bind:value />
-	<input
-		class="
-			currencyInput__formatted
-			{isNegativeAllowed && !isZero && !isNegative && 'currencyInput__formatted--positive'}
-			{isZero && 'currencyInput__formatted--zero'}
-			{isNegativeAllowed && isNegative && 'currencyInput__formatted--negative'}
-		"
-		type="text"
-		inputmode="numeric"
-		name={`formatted-${name}`}
-		required={required && !isZero}
-		placeholder={formattedPlaceholder}
-		{disabled}
-		bind:value={formattedValue}
-		on:keydown={handleKeyDown}
-		on:keyup={setUnformattedValue}
-	/>
-</div>
-
-<style>
-	input.currencyInput__formatted {
-		border: 1px solid #e2e2e2;
-		padding: 10px;
-		box-sizing: border-box;
-	}
-
-	input.currencyInput__formatted--zero {
-		color: #333;
-	}
-
-	input.currencyInput__formatted--positive {
-		color: #00a36f;
-	}
-
-	input.currencyInput__formatted--negative {
-		color: #e75258;
-	}
-
-	input.currencyInput__formatted:disabled {
-		color: #999;
-		background-color: #e2e2e2;
-		pointer-events: none;
-		cursor: default;
-	}
-</style>

package/src/lib/index.ts

@@ -1,2 +0,0 @@
-import CurrencyInput from './CurrencyInput.svelte';
-export default CurrencyInput;

package/src/routes/+page.svelte

@@ -1,161 +0,0 @@
-<script lang="ts">
-	import CurrencyInput from '$lib/CurrencyInput.svelte';
-
-	const locale = 'nl-NL';
-	const currency = 'EUR';
-
-	let output: string;
-	const handleSubmit = (event: Event) => {
-		event.preventDefault();
-		// Get the form data
-		const data = new FormData(event.target as HTMLFormElement);
-		// Pretty-print the data as JSON
-		output = JSON.stringify(Object.fromEntries(data.entries()), null, 2);
-	};
-</script>
-
-<form class="demoForm" on:submit={handleSubmit}>
-	<div class="demoForm__container">
-		<CurrencyInput name="total" value={-42069.69} />
-		<CurrencyInput name="rent" />
-		<CurrencyInput name="balance" value={1234.56} isNegativeAllowed={false} placeholder={null} />
-		<CurrencyInput name="btc" value={0.87654321} fractionDigits={8} />
-
-		<CurrencyInput name="amount" value={5678.9} {locale} {currency} />
-		<CurrencyInput name="loss" value={97532.95} disabled={true} {locale} {currency} />
-		<CurrencyInput name="cost" value={-42069.69} {locale} {currency} />
-		<CurrencyInput
-			name="deficit"
-			placeholder={1234.56}
-			isNegativeAllowed={false}
-			{locale}
-			{currency}
-		/>
-	</div>
-
-	<nav class="demoForm__output">
-		<button type="submit" class="demoForm__submit">Submit form</button>
-
-		<pre class="demoForm__pre {!output && 'demoForm__pre--placeholder'}">{output
-				? output
-				: 'Submit form to see a JSON output of the values'}</pre>
-	</nav>
-
-	<nav class="demoForm__nav">
-		<a class="demoForm__a" href="https://github.com/canutin/svelte-currency-input" target="_blank"
-			>GitHub repository</a
-		>
-		<a
-			class="demoForm__a"
-			href="https://github.com/canutin/svelte-currency-input/issues"
-			target="_blank">Known issues</a
-		>
-		<a
-			class="demoForm__a"
-			href="https://github.com/canutin/svelte-currency-input#contributing"
-			target="_blank">Contribute</a
-		>
-		<a
-			class="demoForm__a"
-			href="https://www.npmjs.com/package/@canutin/svelte-currency-input"
-			target="_blank">NPM</a
-		>
-	</nav>
-</form>
-
-<style>
-	/* Overriding the styles of the <CurrencyInput /> component */
-	form.demoForm :global(input.currencyInput__formatted) {
-		width: 100%;
-		font-family: monospace;
-		font-size: 13px;
-	}
-
-	/* Styles for demo presentation (you can ignore these) */
-	:global(body) {
-		--gap: 64px;
-
-		font-family: sans-serif;
-		box-sizing: border-box;
-		height: 100vh;
-		margin: 0;
-		background-color: #eaeaea;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		place-items: center;
-		padding: var(--gap);
-	}
-
-	form.demoForm {
-		display: flex;
-		flex-direction: column;
-		row-gap: var(--gap);
-	}
-
-	div.demoForm__container {
-		display: grid;
-		grid-template-columns: repeat(4, 1fr);
-		align-items: center;
-		justify-content: center;
-		gap: calc(var(--gap) / 2);
-		height: max-content;
-	}
-
-	nav.demoForm__nav {
-		font-size: 13px;
-		display: flex;
-		column-gap: 16px;
-		justify-content: center;
-	}
-
-	a.demoForm__a {
-		color: #333;
-		text-decoration: none;
-		border-bottom-width: 1px;
-		border-bottom-color: #ccc;
-		border-bottom-style: solid;
-	}
-
-	a.demoForm__a:visited {
-		color: #666;
-	}
-
-	a.demoForm__a:hover {
-		color: #000;
-		border-bottom-color: transparent;
-	}
-
-	nav.demoForm__output {
-		display: grid;
-		grid-template-columns: max-content auto;
-		column-gap: calc(var(--gap) / 2);
-	}
-
-	pre.demoForm__pre {
-		background-color: #f4f4f4;
-		padding: 10px;
-		margin: 0;
-		color: #666;
-		box-sizing: border-box;
-	}
-
-	pre.demoForm__pre--placeholder {
-		font-family: sans-serif;
-		font-size: 13px;
-	}
-
-	button.demoForm__submit {
-		border: none;
-		background-color: #333;
-		color: #fff;
-		padding: 10px;
-		font-size: 13px;
-		cursor: pointer;
-		height: max-content;
-	}
-
-	button.demoForm__submit:hover {
-		background-color: #000;
-	}
-</style>

package/svelte.config.js

@@ -1,15 +0,0 @@
-import adapter from '@sveltejs/adapter-auto';
-import preprocess from 'svelte-preprocess';
-
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
-	// Consult https://github.com/sveltejs/svelte-preprocess
-	// for more information about preprocessors
-	preprocess: preprocess(),
-
-	kit: {
-		adapter: adapter()
-	}
-};
-
-export default config;

package/tests/svelte-currency-input.test.ts

@@ -1,231 +0,0 @@
-import { expect, test, type Page } from '@playwright/test';
-
-const isMacOs = process.platform === 'darwin';
-const selectAll = async (page: Page) => {
-	isMacOs ? await page.keyboard.press('Meta+A') : await page.keyboard.press('Control+A');
-};
-
-test.describe('CurrencyInput', () => {
-	test('Default behavior is correct', async ({ page }) => {
-		await page.goto('/');
-
-		// Test field with "zero" value
-		const rentUnformattedInput = page.locator('.currencyInput__unformatted[name=rent]');
-		const rentFormattedInput = page.locator('.currencyInput__formatted[name="formatted-rent"]');
-		await expect(rentUnformattedInput).not.toBeDisabled();
-		await expect(rentUnformattedInput).toHaveAttribute('type', 'hidden');
-		await expect(rentUnformattedInput).toHaveValue('0');
-		await expect(rentFormattedInput).not.toBeDisabled();
-		await expect(rentFormattedInput).toHaveValue('');
-		await expect(rentFormattedInput).toHaveAttribute('type', 'text');
-		await expect(rentFormattedInput).toHaveAttribute('placeholder', '$0.00');
-		await expect(rentFormattedInput).not.toHaveClass(/currencyInput__formatted--positive/);
-		await expect(rentFormattedInput).not.toHaveClass(/currencyInput__formatted--negative/);
-		await expect(rentFormattedInput).toHaveClass(/currencyInput__formatted--zero/);
-
-		// Test field with "positive" value
-		const amountUnformattedInput = page.locator('.currencyInput__unformatted[name=amount]');
-		const amountFormattedInput = page.locator('.currencyInput__formatted[name="formatted-amount"]');
-		await expect(amountUnformattedInput).not.toBeDisabled();
-		await expect(amountUnformattedInput).toHaveAttribute('type', 'hidden');
-		await expect(amountUnformattedInput).toHaveValue('5678.9');
-		await expect(amountFormattedInput).not.toBeDisabled();
-		await expect(amountFormattedInput).toHaveValue('€ 5.678,9');
-		await expect(amountFormattedInput).toHaveAttribute('type', 'text');
-		await expect(amountFormattedInput).toHaveAttribute('placeholder', '€ 0,00');
-		await expect(amountFormattedInput).toHaveClass(/currencyInput__formatted--positive/);
-		await expect(amountFormattedInput).not.toHaveClass(/currencyInput__formatted--negative/);
-		await expect(amountFormattedInput).not.toHaveClass(/currencyInput__formatted--zero/);
-
-		// Test field with "negative" value
-		const totalUnformattedInput = page.locator('.currencyInput__unformatted[name=total]');
-		const totalFormattedInput = page.locator('.currencyInput__formatted[name="formatted-total"]');
-		await expect(amountUnformattedInput).not.toBeDisabled();
-		await expect(totalUnformattedInput).toHaveAttribute('type', 'hidden');
-		await expect(totalUnformattedInput).toHaveValue('-42069.69');
-		await expect(totalFormattedInput).not.toBeDisabled();
-		await expect(totalFormattedInput).toHaveValue('-$42,069.69');
-		await expect(totalFormattedInput).toHaveAttribute('type', 'text');
-		await expect(totalFormattedInput).toHaveAttribute('placeholder', '$0.00');
-		await expect(totalFormattedInput).not.toHaveClass(/currencyInput__formatted--positive/);
-		await expect(totalFormattedInput).toHaveClass(/currencyInput__formatted--negative/);
-		await expect(totalFormattedInput).not.toHaveClass(/currencyInput__formatted--zero/);
-
-		// Test field that is "disabled"
-		const lossUnformattedInput = page.locator('.currencyInput__unformatted[name=loss]');
-		const lossFormattedInput = page.locator('.currencyInput__formatted[name="formatted-loss"]');
-		await expect(lossUnformattedInput).toBeDisabled();
-		await expect(lossUnformattedInput).toHaveAttribute('type', 'hidden');
-		await expect(lossUnformattedInput).toHaveValue('97532.95');
-		await expect(lossFormattedInput).toHaveValue('€ 97.532,95');
-		await expect(lossFormattedInput).toBeDisabled();
-		await expect(lossFormattedInput).toHaveAttribute('type', 'text');
-		await expect(lossFormattedInput).toHaveAttribute('placeholder', '€ 0,00');
-		await expect(lossFormattedInput).toHaveClass(/currencyInput__formatted--positive/);
-		await expect(lossFormattedInput).not.toHaveClass(/currencyInput__formatted--negative/);
-		await expect(lossFormattedInput).not.toHaveClass(/currencyInput__formatted--zero/);
-
-		// Submitting a form returns the correct values
-		const demoSubmitForm = page.locator('button.demoForm__submit');
-		const demoOutput = page.locator('pre.demoForm__pre');
-		await demoSubmitForm.click();
-		expect(await demoOutput.textContent()).toMatch(
-			JSON.stringify(
-				{
-					total: '-42069.69',
-					'formatted-total': '-$42,069.69',
-					rent: '0',
-					'formatted-rent': '',
-					balance: '1234.56',
-					'formatted-balance': '$1,234.56',
-					btc: '0.87654321',
-					'formatted-btc': '$0.87654321',
-					amount: '5678.9',
-					'formatted-amount': '€ 5.678,9',
-					cost: '-42069.69',
-					'formatted-cost': '€ -42.069,69',
-					deficit: '0',
-					'formatted-deficit': ''
-				},
-				null,
-				2
-			)
-		);
-	});
-
-	test('Updating an input has the correct behavior', async ({ page }) => {
-		await page.goto('/');
-
-		const rentUnformattedInput = page.locator('.currencyInput__unformatted[name=rent]');
-		const rentFormattedInput = page.locator('.currencyInput__formatted[name="formatted-rent"]');
-
-		// Check the there is no value in the input
-		await expect(rentUnformattedInput).toHaveValue('0');
-		await expect(rentFormattedInput).toHaveValue('');
-
-		await rentFormattedInput.focus();
-		await page.keyboard.type('420.69');
-		await expect(rentFormattedInput).toHaveValue('$420.69');
-		await expect(rentUnformattedInput).toHaveValue('420.69');
-		await expect(rentFormattedInput).toHaveClass(/currencyInput__formatted--positive/);
-		await expect(rentFormattedInput).not.toHaveClass(/currencyInput__formatted--negative/);
-		await expect(rentFormattedInput).not.toHaveClass(/currencyInput__formatted--zero/);
-
-		// Use arrow keys to go back to the first character
-		for (let i = 0; i < '$420.69'.length; i++) await page.keyboard.press('ArrowLeft');
-		await page.keyboard.type('-');
-		await expect(rentFormattedInput).toHaveValue('-$420.69');
-		await expect(rentUnformattedInput).toHaveValue('-420.69');
-		await expect(rentFormattedInput).not.toHaveClass(/currencyInput__formatted--positive/);
-		await expect(rentFormattedInput).toHaveClass(/currencyInput__formatted--negative/);
-		await expect(rentFormattedInput).not.toHaveClass(/currencyInput__formatted--zero/);
-
-		// Use right arrow keys to position cusror at the end of the input
-		for (let i = 0; i < '$420.69'.length; i++) await page.keyboard.press('ArrowRight');
-		// Delete the number but keep the currency symbol and sign
-		for (let i = 1; i < '420.69'.length; i++) await page.keyboard.press('Backspace');
-		await expect(rentFormattedInput).toHaveValue('-$');
-		// FIXME: at this point the hidden value should be set to 0 but without formatting `rentFormattedInput`
-		await expect(rentUnformattedInput).toHaveValue('-4');
-
-		await page.keyboard.press('Backspace');
-		await expect(rentFormattedInput).toHaveValue('-');
-		// FIXME: at this point the hidden value should be set to 0 but without formatting `rentFormattedInput
-		await expect(rentUnformattedInput).toHaveValue('-4');
-
-		await page.keyboard.type('69.42');
-		await expect(rentFormattedInput).toHaveValue('-$69.42');
-		await expect(rentUnformattedInput).toHaveValue('-69.42');
-
-		for (let i = 0; i < '-$69.42'.length; i++) await page.keyboard.press('Backspace');
-		await expect(rentUnformattedInput).toHaveValue('0');
-	});
-
-	test("Incorrect characters can't be entered", async ({ page }) => {
-		await page.goto('/');
-
-		const rentUnformattedInput = page.locator('.currencyInput__unformatted[name=rent]');
-		const rentFormattedInput = page.locator('.currencyInput__formatted[name="formatted-rent"]');
-
-		// Check the there is no value in the input
-		await expect(rentUnformattedInput).toHaveValue('0');
-		await expect(rentFormattedInput).toHaveValue('');
-
-		// Check typing letters doesn't do anything
-		await rentFormattedInput.focus();
-		await page.keyboard.type('abc');
-		await expect(rentUnformattedInput).toHaveValue('0');
-		await expect(rentFormattedInput).toHaveValue('');
-
-		// Check keyboard combinations don't do anything
-		await page.keyboard.press('Shift+A');
-		await expect(rentFormattedInput).toHaveValue('');
-
-		// Check keyboard shortcuts are allowed
-		await page.keyboard.type('420.69');
-		await expect(rentFormattedInput).toHaveValue('$420.69');
-		await expect(rentUnformattedInput).toHaveValue('420.69');
-
-		// Check "Backspace" works
-		await selectAll(page);
-		await page.keyboard.press('Backspace');
-		await expect(rentUnformattedInput).toHaveValue('0');
-		await expect(rentFormattedInput).toHaveValue('');
-
-		// Add data to the field again
-		await page.keyboard.type('-420.69');
-		await expect(rentFormattedInput).toHaveValue('-$420.69');
-		await expect(rentUnformattedInput).toHaveValue('-420.69');
-
-		// Check "Delete" also works
-		await selectAll(page);
-		await page.keyboard.press('Delete');
-		await expect(rentUnformattedInput).toHaveValue('0');
-		await expect(rentFormattedInput).toHaveValue('');
-	});
-
-	test('Placeholders can be overriden', async ({ page }) => {
-		await page.goto('/');
-
-		// Default placeholder
-		const rentFormattedInput = page.locator('.currencyInput__formatted[name="formatted-rent"]');
-		await expect(rentFormattedInput).toHaveAttribute('placeholder', '$0.00');
-
-		// Null placeholder
-		const balanceFormattedInput = page.locator(
-			'.currencyInput__formatted[name="formatted-balance"]'
-		);
-		await expect(balanceFormattedInput).toHaveAttribute('placeholder', '');
-
-		// Overriden placeholder
-		const deficitFormattedInput = page.locator(
-			'.currencyInput__formatted[name="formatted-deficit"]'
-		);
-		await expect(deficitFormattedInput).toHaveAttribute('placeholder', '€ 1.234,56'); // The space is `%A0`, not `%20`
-	});
-
-	test('Fraction digits can be overriden', async ({ page }) => {
-		await page.goto('/');
-
-		const btcUnformattedInput = page.locator('.currencyInput__unformatted[name=btc]');
-		const btcFormattedInput = page.locator('.currencyInput__formatted[name="formatted-btc"]');
-
-		await expect(btcUnformattedInput).toHaveValue('0.87654321');
-		await expect(btcFormattedInput).toHaveValue('$0.87654321');
-		await expect(btcFormattedInput).toHaveAttribute('placeholder', '$0.00000000');
-
-		await btcFormattedInput.focus();
-		await selectAll(page);
-		await page.keyboard.press('Backspace');
-		await expect(btcUnformattedInput).toHaveValue('0');
-		await expect(btcFormattedInput).toHaveValue('');
-
-		await page.keyboard.type('-0.987654321');
-		await expect(btcUnformattedInput).toHaveValue('-0.987654321');
-		await expect(btcFormattedInput).toHaveValue('-$0.98765432');
-	});
-
-	test.skip('Updating chained inputs have the correct behavior', async () => {
-		// TODO
-	});
-});

package/tsconfig.json

@@ -1,17 +0,0 @@
-{
-	"extends": "./.svelte-kit/tsconfig.json",
-	"compilerOptions": {
-		"allowJs": true,
-		"checkJs": true,
-		"esModuleInterop": true,
-		"forceConsistentCasingInFileNames": true,
-		"resolveJsonModule": true,
-		"skipLibCheck": true,
-		"sourceMap": true,
-		"strict": true
-	}
-	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
-	//
-	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-	// from the referenced tsconfig.json - TypeScript does not merge them in
-}

package/vite.config.ts

@@ -1,8 +0,0 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import type { UserConfig } from 'vite';
-
-const config: UserConfig = {
-	plugins: [sveltekit()]
-};
-
-export default config;