{"_id":"@adityarizqi/svelte-currency-format-input","_rev":"4-a7f96b93e3a3687c455be4839226ca5e","name":"@adityarizqi/svelte-currency-format-input","dist-tags":{"latest":"1.1.3"},"versions":{"1.0.0":{"name":"@adityarizqi/svelte-currency-format-input","version":"1.0.0","scripts":{"dev":"vite dev","build":"vite build","preview":"vite preview","package":"svelte-kit sync && svelte-package && publint","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 --plugin-search-dir . --check . && eslint .","format":"prettier --plugin-search-dir . --write ."},"exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"devDependencies":{"@playwright/test":"^1.39.0","@sveltejs/adapter-auto":"^2.0.0","@sveltejs/adapter-cloudflare":"^2.3.3","@sveltejs/kit":"^1.26.0","@sveltejs/package":"^2.2.2","@types/node":"^20.8.7","@typescript-eslint/eslint-plugin":"^6.0.0","@typescript-eslint/parser":"^6.0.0","date-fns":"^2.30.0","eslint":"^8.28.0","eslint-config-prettier":"^8.5.0","eslint-plugin-svelte":"^2.30.0","prettier":"^2.8.0","prettier-plugin-svelte":"^2.10.1","publint":"^0.2.5","sass":"^1.69.0","semantic-release":"^19.0.5","svelte-check":"^3.4.3","tslib":"^2.4.1","typescript":"^5.0.0","vite":"^4.4.2"},"svelte":"./dist/index.js","types":"./dist/index.d.ts","type":"module","description":"An interactive form input that instantly transforms numerical entries into localized currency formats while you type","keywords":["svelte","currency","money","input","i18n","positive","negative"],"repository":{"type":"git","url":"git+https://github.com/Adityarizqi7/svelte-currency-format-input.git"},"author":{"name":"Aditya Rizqi Ardhana"},"license":"MIT","bugs":{"url":"https://github.com/Adityarizqi7/svelte-currency-format-input/issues"},"homepage":"https://svelte-currency-format-input.netlify.app","main":"svelte.config.js","directories":{"test":"tests"},"gitHead":"6916796d0d2f0353b6c6791dfdc9ceda1efd09ec","_id":"@adityarizqi/svelte-currency-format-input@1.0.0","_nodeVersion":"18.17.1","_npmVersion":"9.4.2","dist":{"integrity":"sha512-l25K4X+1dUDZId6opAn9ZAF2OazUuzY3mf/A5uJ24Ja9r3+rfuFNZoCBIc8y2VMhQ0qVQMk//QywTPDgKXhOeg==","shasum":"be43e1e71baba8323c91c6c5ae2cf6bd270ad8fa","tarball":"https://registry.npmjs.org/@adityarizqi/svelte-currency-format-input/-/svelte-currency-format-input-1.0.0.tgz","fileCount":4,"unpackedSize":11394,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrUSFKN9pH5qHbxZPcr1xZI5y3A4ShT0Pd+oploCXWrQIga2pAtLssE4oTJOn8FIg3SnEuJ1IQgbkBrazLvIMHDZQ="}]},"_npmUser":{"name":"adityarizqi","email":"adityarizqiardhana@gmail.com"},"maintainers":[{"name":"adityarizqi","email":"adityarizqiardhana@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-currency-format-input_1.0.0_1705206695378_0.08776205269228599"},"_hasShrinkwrap":false},"1.1.0":{"name":"@adityarizqi/svelte-currency-format-input","version":"1.1.0","scripts":{"dev":"vite dev","build":"vite build","preview":"vite preview","package":"svelte-kit sync && svelte-package && publint","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 --plugin-search-dir . --check . && eslint .","format":"prettier --plugin-search-dir . --write ."},"exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"devDependencies":{"@playwright/test":"^1.39.0","@sveltejs/adapter-netlify":"^1.0.0-next.88","@sveltejs/kit":"^1.26.0","@sveltejs/package":"^2.2.2","@types/node":"^20.8.7","@typescript-eslint/eslint-plugin":"^6.0.0","@typescript-eslint/parser":"^6.0.0","date-fns":"^2.30.0","eslint":"^8.28.0","eslint-config-prettier":"^8.5.0","eslint-plugin-svelte":"^2.30.0","prettier":"^2.8.0","prettier-plugin-svelte":"^2.10.1","publint":"^0.2.5","sass":"^1.69.0","semantic-release":"^19.0.5","svelte-check":"^3.4.3","tslib":"^2.4.1","typescript":"^5.0.0","vite":"^4.4.2"},"svelte":"./dist/index.js","types":"./dist/index.d.ts","type":"module","description":"An interactive form input that instantly transforms numerical entries into localized currency formats while you type","keywords":["svelte","currency","money","input","i18n","positive","negative"],"repository":{"type":"git","url":"git+https://github.com/Adityarizqi7/svelte-currency-format-input.git"},"author":{"name":"Aditya Rizqi Ardhana"},"license":"MIT","bugs":{"url":"https://github.com/Adityarizqi7/svelte-currency-format-input/issues"},"homepage":"https://svelte-currency-format-input.netlify.app","main":"svelte.config.js","directories":{"test":"tests"},"dependencies":{"or":"^0.2.0"},"gitHead":"921070277e15b77aeae6cdfaf73bd4d300c098c3","_id":"@adityarizqi/svelte-currency-format-input@1.1.0","_nodeVersion":"18.17.1","_npmVersion":"9.4.2","dist":{"integrity":"sha512-EqJKSlm9ItvGPThZbx6NuwXVeY74tZ1TwIb0M5GSg9odpdPZosTrqy9rdfJ5hxIG4fsf8/ZfWefSuha+EYKF7w==","shasum":"4c0db17bd98cc7ccf1a372b45d79fb3262726de8","tarball":"https://registry.npmjs.org/@adityarizqi/svelte-currency-format-input/-/svelte-currency-format-input-1.1.0.tgz","fileCount":4,"unpackedSize":11546,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZdHKLNJ/Hy1a7WPTVsT/YIH61U+UIVnC0S0h7zXaOVAIgH2rpJjpF0v3M6wPgUv83cdhN5j8Yj6w0rz2MgkO28OY="}]},"_npmUser":{"name":"adityarizqi","email":"adityarizqiardhana@gmail.com"},"maintainers":[{"name":"adityarizqi","email":"adityarizqiardhana@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-currency-format-input_1.1.0_1705234593412_0.39601467813871305"},"_hasShrinkwrap":false},"1.1.1":{"name":"@adityarizqi/svelte-currency-format-input","version":"1.1.1","scripts":{"dev":"vite dev","build":"vite build","preview":"vite preview","package":"svelte-kit sync && svelte-package && publint","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 --plugin-search-dir . --check . && eslint .","format":"prettier --plugin-search-dir . --write ."},"exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"devDependencies":{"@playwright/test":"^1.39.0","@sveltejs/adapter-netlify":"^1.0.0-next.88","@sveltejs/kit":"^1.26.0","@sveltejs/package":"^2.2.2","@types/node":"^20.8.7","@typescript-eslint/eslint-plugin":"^6.0.0","@typescript-eslint/parser":"^6.0.0","date-fns":"^2.30.0","eslint":"^8.28.0","eslint-config-prettier":"^8.5.0","eslint-plugin-svelte":"^2.30.0","prettier":"^2.8.0","prettier-plugin-svelte":"^2.10.1","publint":"^0.2.5","sass":"^1.69.0","semantic-release":"^19.0.5","svelte-check":"^3.4.3","tslib":"^2.4.1","typescript":"^5.0.0","vite":"^4.4.2"},"svelte":"./dist/index.js","types":"./dist/index.d.ts","type":"module","description":"An interactive form input that instantly transforms numerical entries into localized currency formats while you type","keywords":["svelte","currency","money","input","i18n","positive","negative"],"repository":{"type":"git","url":"git+https://github.com/Adityarizqi7/svelte-currency-format-input.git"},"author":{"name":"Aditya Rizqi Ardhana"},"license":"MIT","bugs":{"url":"https://github.com/Adityarizqi7/svelte-currency-format-input/issues"},"homepage":"https://svelte-currency-format-input.netlify.app","main":"svelte.config.js","directories":{"test":"tests"},"dependencies":{"or":"^0.2.0"},"gitHead":"3f6909741e27ce90776bed059930c5175728be57","_id":"@adityarizqi/svelte-currency-format-input@1.1.1","_nodeVersion":"18.17.1","_npmVersion":"9.4.2","dist":{"integrity":"sha512-MH/2OPto6mTLUp3/TWZujpYYBa64A4sYbOMvMdtktK6m4NDLZr6l6QUG4/sY/Fvq6pCPQrKur+JHigF11LMf/w==","shasum":"a497eb84bd8a1add06f804c0f3f50626b97d4b5b","tarball":"https://registry.npmjs.org/@adityarizqi/svelte-currency-format-input/-/svelte-currency-format-input-1.1.1.tgz","fileCount":4,"unpackedSize":11564,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDGBdcaIvvgcBGe0Q3m7Q8BOSIV/HkPGzcKG/EukXInYAiBOUQf6wZkSIWci2mHNDKSg6C7hduHTDtLwIUKVoET/wg=="}]},"_npmUser":{"name":"adityarizqi","email":"adityarizqiardhana@gmail.com"},"maintainers":[{"name":"adityarizqi","email":"adityarizqiardhana@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-currency-format-input_1.1.1_1705242606333_0.9578754541617747"},"_hasShrinkwrap":false},"1.1.2":{"name":"@adityarizqi/svelte-currency-format-input","version":"1.1.2","scripts":{"dev":"vite dev","build":"vite build","preview":"vite preview","package":"svelte-kit sync && svelte-package && publint","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 --plugin-search-dir . --check . && eslint .","format":"prettier --plugin-search-dir . --write ."},"exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"devDependencies":{"@playwright/test":"^1.39.0","@sveltejs/adapter-netlify":"^1.0.0-next.88","@sveltejs/kit":"^1.26.0","@sveltejs/package":"^2.2.2","@types/node":"^20.8.7","@typescript-eslint/eslint-plugin":"^6.0.0","@typescript-eslint/parser":"^6.0.0","date-fns":"^2.30.0","eslint":"^8.28.0","eslint-config-prettier":"^8.5.0","eslint-plugin-svelte":"^2.30.0","prettier":"^2.8.0","prettier-plugin-svelte":"^2.10.1","publint":"^0.2.5","sass":"^1.69.0","semantic-release":"^19.0.5","svelte":"^4.2.8","svelte-check":"^3.4.3","tslib":"^2.4.1","typescript":"^5.0.0","vite":"^4.4.2"},"svelte":"./dist/index.js","types":"./dist/index.d.ts","type":"module","description":"An interactive form input that instantly transforms numerical entries into localized currency formats while you type","keywords":["svelte","currency","money","input","i18n","positive","negative"],"repository":{"type":"git","url":"git+https://github.com/Adityarizqi7/svelte-currency-format-input.git"},"author":{"name":"Aditya Rizqi Ardhana"},"license":"MIT","bugs":{"url":"https://github.com/Adityarizqi7/svelte-currency-format-input/issues"},"homepage":"https://svelte-currency-format-input.netlify.app","main":"svelte.config.js","directories":{"test":"tests"},"dependencies":{"or":"^0.2.0"},"gitHead":"3f6909741e27ce90776bed059930c5175728be57","_id":"@adityarizqi/svelte-currency-format-input@1.1.2","_nodeVersion":"18.17.1","_npmVersion":"9.4.2","dist":{"integrity":"sha512-y0EMpRfb4p7FTRcPRHgl6R1ua6Xw4XcdCPOtF8d5APFb9Iif5gJ0fqNwNSecm+B1k0zxa9F/QCvC/yy+IglwUg==","shasum":"d21982366d9a43c3a909abed063ebf9ff0041d83","tarball":"https://registry.npmjs.org/@adityarizqi/svelte-currency-format-input/-/svelte-currency-format-input-1.1.2.tgz","fileCount":8,"unpackedSize":19755,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9E5Xy0AVO2ArnwfoMjlnzLHJfmkomsy5F/Wh4/S88xQIgL+6tsP0amBPIc3xLN02WTIfRJuC0MpgIoeLyLdxqgdQ="}]},"_npmUser":{"name":"adityarizqi","email":"adityarizqiardhana@gmail.com"},"maintainers":[{"name":"adityarizqi","email":"adityarizqiardhana@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-currency-format-input_1.1.2_1705244522229_0.6299877976183526"},"_hasShrinkwrap":false},"1.1.3":{"name":"@adityarizqi/svelte-currency-format-input","version":"1.1.3","scripts":{"dev":"vite dev","build":"vite build","preview":"vite preview","package":"svelte-kit sync && svelte-package && publint","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 --plugin-search-dir . --check . && eslint .","format":"prettier --plugin-search-dir . --write ."},"exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"devDependencies":{"@playwright/test":"^1.39.0","@sveltejs/adapter-netlify":"^1.0.0-next.88","@sveltejs/kit":"^1.26.0","@sveltejs/package":"^2.2.2","@types/node":"^20.8.7","@typescript-eslint/eslint-plugin":"^6.0.0","@typescript-eslint/parser":"^6.0.0","date-fns":"^2.30.0","eslint":"^8.28.0","eslint-config-prettier":"^8.5.0","eslint-plugin-svelte":"^2.30.0","prettier":"^2.8.0","prettier-plugin-svelte":"^2.10.1","publint":"^0.2.5","sass":"^1.69.0","semantic-release":"^19.0.5","svelte":"^4.2.8","svelte-check":"^3.4.3","tslib":"^2.4.1","typescript":"^5.0.0","vite":"^4.4.2"},"svelte":"./dist/index.js","types":"./dist/index.d.ts","type":"module","description":"An interactive form input that instantly transforms numerical entries into localized currency formats while you type","keywords":["svelte","currency","money","input","i18n","positive","negative"],"repository":{"type":"git","url":"git+https://github.com/Adityarizqi7/svelte-currency-format-input.git"},"author":{"name":"Aditya Rizqi Ardhana"},"license":"MIT","bugs":{"url":"https://github.com/Adityarizqi7/svelte-currency-format-input/issues"},"homepage":"https://svelte-currency-format-input.netlify.app","main":"svelte.config.js","directories":{"test":"tests"},"dependencies":{"or":"^0.2.0"},"gitHead":"64f2cddd2591aa88c845ab0bc7c27fe608c11c5a","_id":"@adityarizqi/svelte-currency-format-input@1.1.3","_nodeVersion":"18.17.1","_npmVersion":"9.4.2","dist":{"integrity":"sha512-PJnnDs5XpJyXf2XVa5GM1ZQVK8OwPhhkSKfv8QpAwaRsLzRLztLOVUS/S1FJJ83JzeldXcJeQPCHUYmVqkKzWw==","shasum":"2c2d55cffc161771ae9619a8c800687c80d80d38","tarball":"https://registry.npmjs.org/@adityarizqi/svelte-currency-format-input/-/svelte-currency-format-input-1.1.3.tgz","fileCount":8,"unpackedSize":19766,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNweCsBt5izjpq3FeJTkrhrI3o5fLVomCex0qxC1swVQIgPsdwgct/Z1naG7+NHJdPRJDe70ydwIppky57hUZXkX0="}]},"_npmUser":{"name":"adityarizqi","email":"adityarizqiardhana@gmail.com"},"maintainers":[{"name":"adityarizqi","email":"adityarizqiardhana@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-currency-format-input_1.1.3_1705309276199_0.9554616488533192"},"_hasShrinkwrap":false}},"time":{"created":"2024-01-14T04:31:35.280Z","1.0.0":"2024-01-14T04:31:35.534Z","modified":"2024-01-15T09:01:16.502Z","1.1.0":"2024-01-14T12:16:33.578Z","1.1.1":"2024-01-14T14:30:06.482Z","1.1.2":"2024-01-14T15:02:02.392Z","1.1.3":"2024-01-15T09:01:16.339Z"},"maintainers":[{"name":"adityarizqi","email":"adityarizqiardhana@gmail.com"}],"description":"An interactive form input that instantly transforms numerical entries into localized currency formats while you type","homepage":"https://svelte-currency-format-input.netlify.app","keywords":["svelte","currency","money","input","i18n","positive","negative"],"repository":{"type":"git","url":"git+https://github.com/Adityarizqi7/svelte-currency-format-input.git"},"author":{"name":"Aditya Rizqi Ardhana"},"bugs":{"url":"https://github.com/Adityarizqi7/svelte-currency-format-input/issues"},"license":"MIT","readme":"# svelte-currency-format-input\r\n\r\nAn interactive form input that instantly transforms numerical entries into localized currency formats while you type\r\n\r\n---\r\n\r\n## Features\r\n\r\n- Utilizes [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) to incorporate **localization** for currency denominations and implements input masking.\r\n- Formats values can be **positive** and **negative**.\r\n- Basic default styling, simple to [customize](#styling).\r\n- Simple [PROPS](#props).\r\n\r\n## Usage\r\n\r\n```bash\r\nnpm install @adityarizqi/svelte-currency-format-input --save\r\n\r\nor if you are using yarn\r\n\r\nyarn add @adityarizqi/svelte-currency-format-input\r\n```\r\n\r\nThen you need to import this library into your application.\r\n\r\n\r\n```html\r\n<script lang=\"ts\">\r\n  import CurrencyFormatInput from '@adityarizqi7/svelte-currency-format-input';\r\n</script>\r\n\r\n<CurrencyFormatInput name=\"total\" placeholder='Your Placeholder' value={666} locale=\"id-ID\" currency=\"IDR\" />\r\n```\r\n\r\n## How it works\r\n\r\nUpon form submission, you obtain either unformatted or formatted values from two `<input />` elements. This is essentially the underlying structure of `<CurrencyFormatInput />`:\r\n\r\n```html\r\n<div class=\"currencyInput\">\r\n  <!-- Unformatted value -->\r\n  <input\r\n    class=\"currencyInput__unformatted\"\r\n    type=\"hidden\"\r\n    name=\"total\"\r\n    value=\"-322.76\"\r\n  />\r\n\r\n  <!-- Formatted value -->\r\n  <input\r\n    class=\"currencyInput__formatted\"\r\n    type=\"text\"\r\n    name=\"formatted-total\"\r\n    value=\"€ -322,76\"\r\n  />\r\n</div>\r\n```\r\n\r\n## PROPS\r\n\r\nOption            | Type            | Default     | Description |\r\n----------------- | --------------- | ----------- | ----------- |\r\nvalue             | `number`        | `undefined` | Initial value. If left `undefined` a formatted value of `0` is visible as a placeholder |\r\nlocale            | `string`        | `en-US`     | Overrides default locale. [Examples](https://gist.github.com/ncreated/9934896) |\r\ncurrency          | `string`        | `USD`       | Overrides default currency. [Examples](https://www.xe.com/symbols/) |\r\nname              | `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 |\r\nfractionDigits    | `number`        | `2`         | Sets `maximumFractionDigits` in [`Intl.NumberFormat()` constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumfractiondigits) used for formatting the currency. Supported digits: `0` to `20` |\r\nplaceholder       | `string` `number` `null` | `0`         | A `string` will override the default placeholder. A `number` will override  it by formatting it to the set currency. Setting it to `null` will not show a placeholder   |\r\ninputClasses      | `object`        | [See below](#Styling)         | Selectively overrides any class names passed |\r\nrequired          | `boolean`       | `false`     | Marks the inputs as required |\r\ndisabled          | `boolean`       | `false`     | Marks the inputs as disabled |\r\nisZeroNullish | `boolean`       | `false`      | If `true` and when the value is `0`, it will override the default placeholder and render the formatted value in the field like any other value.\r\nautocomplete      | `string`        | `undefined` | Sets the autocomplete attribute. Accepts any valid HTML [autocomplete attribute values](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values) |\r\nisNegativeInput | `boolean`       | `true`      | If `false`, forces formatting only to positive values and ignores `--positive` and `--negative` styling modifiers                                   |\r\nonValueChange     | `Callback`      | `undefined` | Runs a callback function after the value changes |\r\n\r\n## Styling Component\r\n\r\nThere are two methods for customizing the styling of the input:\r\n1. Providing your own CSS classes\r\n2. Modifying the styles by overriding the existing class names\r\n\r\nYou have the ability to **override any of the class names** by passing an object to `inputClasses` that includes **one or more** of these properties:\r\n\r\n```typescript\r\ninterface InputClasses {\r\n  wrapper?: string; // The <div> encapsulates the two <input> elements.\r\n  unformatted?: string; // The <input type=\"hidden\"> element encapsulates the unformatted value.\r\n  formatted?: string; // The <input type=\"text\"> element encapsulates the formatted value.\r\n  formattedPositive?: string; // Class applied when the formatted input represents a positive value.\r\n  formattedNegative?: string; // Class applied when the formatted input represents a negative value.\r\n  formattedZero?: string; // Class applied when the formatted input represents a zero value.\r\n}\r\n```\r\n\r\nYou can usage (with [Tailwind CSS](https://tailwindcss.com/) as an example):\r\n\r\n```html\r\n<CurrencyFormatInput name=\"total\" value=\"{322.76}\" inputClasses={\r\n  { \r\n    wrapper: \"py-1 text-sm text-gray-800 border border-gray-300 rounded-md\",\r\n    formatted: 'text-gray-800 border-0 bg-white max-w-full',\r\n    formattedPositive: 'text-green-700',\r\n    formattedNegative: 'text-red-700'\r\n  }\r\n} />\r\n```\r\n\r\nAlternatively you can **write your own CSS** by overriding the [default styles](https://github.com/Adityarizqi7/svelte-currency-format-input/blob/main/src/lib/CurrencyFormatInput.svelte) which use [BEM naming conventions](https://getbem.com/naming/). To do so apply your styles as shown below:\r\n\r\n```html\r\n<div class=\"my-currency-input\">\r\n  <CurrencyFormatInput name=\"total\" value=\"{420.69}\" />\r\n</div>\r\n\r\n<style>\r\n  /* Container */\r\n  div.my-currency-input :global(div.currencyInput) { /* ... */ }\r\n\r\n  /* Formatted input */\r\n  div.my-currency-input :global(input.currencyInput__formatted) { /* ... */ }\r\n\r\n  /* Formatted input when the it's disabled */\r\n  div.my-currency-input :global(input.currencyInput__formatted:disabled) { /* ... */ }\r\n\r\n  /* Formatted input when the value is zero */\r\n  div.my-currency-input :global(input.currencyInput__formatted--zero) { /* ... */ }\r\n\r\n  /* Formatted input when the value is positive */\r\n  div.my-currency-input :global(input.currencyInput__formatted--positive) { /* ... */ }\r\n\r\n  /* Formatted input when the value is negative */\r\n  div.my-currency-input :global(input.currencyInput__formatted--negative) { /* ... */ }\r\n</style>\r\n```\r\n\r\n## Contributing\r\n\r\nHere are ways you can contribute:\r\n\r\n- Discovered a bug? Create a [new issue](https://github.com/Adityarizqi7/svelte-currency-format-input/issues/new)\r\n- Provide comments or upvote  [existing issues](https://github.com/Adityarizqi7/svelte-currency-format-input/issues)\r\n- Submit a [pull request](https://github.com/Adityarizqi7/svelte-currency-format-input/pulls)\r\n\r\n## Developing\r\n\r\nThis package was generated with [SvelteKit](https://kit.svelte.dev/). Install dependencies with `npm install`, then start a development server:\r\n\r\n```bash\r\nnpm run dev\r\n\r\n# or start the server and open the app in a new browser tab\r\nnpm run dev -- --open\r\n```\r\n\r\n#### Integration tests\r\n\r\nThe component is tested using [Playwright](https://playwright.dev/).\r\nYou can find the tests in [`tests/svelte-currency-format-input.test.ts`](https://github.com/Adityarizqi7/svelte-currency-format-input/blob/main/tests/svelte-currency-format-input.test.ts)\r\n\r\nTo run all tests on **Chromium**, **Firefox** and **Webkit**:\r\n```bash\r\nnpm run test\r\n```\r\n\r\nTo run all tests on a specific browser (e.g. **Webkit**):\r\n```bash\r\nnpx playwright test --project=webkit\r\n```\r\n\r\nAdditional debug commands can be found on [Playwright's documentation](https://playwright.dev/docs/test-cli).\r\n","readmeFilename":"README.md"}