ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(@lion/ui): add _currencyDisplayNodeSlot to LionInputAmount (#1988)

Browse source 
* feat(@lion/ui): add _currencyDisplayNodeSlot to LionInputAmount

* Remove test for feature what is not supported anymore
* Add documentation
* Add test for customizable currency slot
This commit is contained in:
Gyulai Levente 2023-06-01 08:55:42 +02:00 committed by GitHub
parent ac2f2155f2
commit bdc7455610
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 206 additions and 190 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/orange-eels-pay.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
Allow customization of currency label's slot in Input Amount

6
docs/components/input-amount/use-cases.md
View file

@ -20,9 +20,9 @@ export const negativeNumber = () => html`
`; `;
``` ```
## Set currency suffix ## Set currency label
You can optionally set a currency suffix with the `currency` attribute. You can optionally set a currency label with the `currency` attribute, which is visible in the after slot by default.
```js preview-story ```js preview-story
export const currencySuffix = () => html` export const currencySuffix = () => html`
@ -30,6 +30,8 @@ export const currencySuffix = () => html`
`; `;
``` ```
> The slot of the currency label can be overwritten by changing the `_currencyDisplayNodeSlot` protected property, it can be prefix, suffix, before and after.
## Force locale ## Force locale
Locale can be forced for a specific `lion-input-amount`. It will format the amount according to this locale. Locale can be forced for a specific `lion-input-amount`. It will format the amount according to this locale.

327
package-lock.json generated
View file

@ -14,7 +14,7 @@
"devDependencies": { "devDependencies": {
"@babel/core": "^7.10.1", "@babel/core": "^7.10.1",
"@bundled-es-modules/fetch-mock": "^6.5.2", "@bundled-es-modules/fetch-mock": "^6.5.2",
"@changesets/cli": "^2.22.0", "@changesets/cli": "^2.26.1",
"@custom-elements-manifest/analyzer": "^0.5.7", "@custom-elements-manifest/analyzer": "^0.5.7",
"@open-wc/building-rollup": "^1.2.1", "@open-wc/building-rollup": "^1.2.1",
"@open-wc/eslint-config": "^7.0.0", "@open-wc/eslint-config": "^7.0.0",
@ -1990,16 +1990,16 @@
"integrity": "sha512-NGUoPxqsBzDwvRhY3A3L/AhS1hzS9OWappfyDOyCwE7G3W4ua28gau7QwvJz7QzA6ArbAdeb8c1mLjvd1WUFAA==" "integrity": "sha512-NGUoPxqsBzDwvRhY3A3L/AhS1hzS9OWappfyDOyCwE7G3W4ua28gau7QwvJz7QzA6ArbAdeb8c1mLjvd1WUFAA=="
}, },
"node_modules/@changesets/apply-release-plan": { "node_modules/@changesets/apply-release-plan": {
"version": "6.1.2", "version": "6.1.3",
"resolved": "https://registry.npmjs.org/@changesets/apply-release-plan/-/apply-release-plan-6.1.2.tgz", "resolved": "https://registry.npmjs.org/@changesets/apply-release-plan/-/apply-release-plan-6.1.3.tgz",
"integrity": "sha512-H8TV9E/WtJsDfoDVbrDGPXmkZFSv7W2KLqp4xX4MKZXshb0hsQZUNowUa8pnus9qb/5OZrFFRVsUsDCVHNW/AQ==", "integrity": "sha512-ECDNeoc3nfeAe1jqJb5aFQX7CqzQhD2klXRez2JDb/aVpGUbX673HgKrnrgJRuQR/9f2TtLoYIzrGB9qwD77mg==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@babel/runtime": "^7.10.4", "@babel/runtime": "^7.20.1",
"@changesets/config": "^2.2.0", "@changesets/config": "^2.3.0",
"@changesets/get-version-range-type": "^0.3.2", "@changesets/get-version-range-type": "^0.3.2",
"@changesets/git": "^1.5.0", "@changesets/git": "^2.0.0",
"@changesets/types": "^5.2.0", "@changesets/types": "^5.2.1",
"@manypkg/get-packages": "^1.1.3", "@manypkg/get-packages": "^1.1.3",
"detect-indent": "^6.0.0", "detect-indent": "^6.0.0",
"fs-extra": "^7.0.1", "fs-extra": "^7.0.1",
@ -2020,15 +2020,15 @@
} }
}, },
"node_modules/@changesets/assemble-release-plan": { "node_modules/@changesets/assemble-release-plan": {
"version": "5.2.2", "version": "5.2.3",
"resolved": "https://registry.npmjs.org/@changesets/assemble-release-plan/-/assemble-release-plan-5.2.2.tgz", "resolved": "https://registry.npmjs.org/@changesets/assemble-release-plan/-/assemble-release-plan-5.2.3.tgz",
"integrity": "sha512-B1qxErQd85AeZgZFZw2bDKyOfdXHhG+X5S+W3Da2yCem8l/pRy4G/S7iOpEcMwg6lH8q2ZhgbZZwZ817D+aLuQ==", "integrity": "sha512-g7EVZCmnWz3zMBAdrcKhid4hkHT+Ft1n0mLussFMcB1dE2zCuwcvGoy9ec3yOgPGF4hoMtgHaMIk3T3TBdvU9g==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@babel/runtime": "^7.10.4", "@babel/runtime": "^7.20.1",
"@changesets/errors": "^0.1.4", "@changesets/errors": "^0.1.4",
"@changesets/get-dependents-graph": "^1.3.4", "@changesets/get-dependents-graph": "^1.3.5",
"@changesets/types": "^5.2.0", "@changesets/types": "^5.2.1",
"@manypkg/get-packages": "^1.1.3", "@manypkg/get-packages": "^1.1.3",
"semver": "^5.4.1" "semver": "^5.4.1"
} }
@ -2043,34 +2043,34 @@
} }
}, },
"node_modules/@changesets/changelog-git": { "node_modules/@changesets/changelog-git": {
"version": "0.1.13", "version": "0.1.14",
"resolved": "https://registry.npmjs.org/@changesets/changelog-git/-/changelog-git-0.1.13.tgz", "resolved": "https://registry.npmjs.org/@changesets/changelog-git/-/changelog-git-0.1.14.tgz",
"integrity": "sha512-zvJ50Q+EUALzeawAxax6nF2WIcSsC5PwbuLeWkckS8ulWnuPYx8Fn/Sjd3rF46OzeKA8t30loYYV6TIzp4DIdg==", "integrity": "sha512-+vRfnKtXVWsDDxGctOfzJsPhaCdXRYoe+KyWYoq5X/GqoISREiat0l3L8B0a453B2B4dfHGcZaGyowHbp9BSaA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@changesets/types": "^5.2.0" "@changesets/types": "^5.2.1"
} }
}, },
"node_modules/@changesets/cli": { "node_modules/@changesets/cli": {
"version": "2.25.2", "version": "2.26.1",
"resolved": "https://registry.npmjs.org/@changesets/cli/-/cli-2.25.2.tgz", "resolved": "https://registry.npmjs.org/@changesets/cli/-/cli-2.26.1.tgz",
"integrity": "sha512-ACScBJXI3kRyMd2R8n8SzfttDHi4tmKSwVwXBazJOylQItSRSF4cGmej2E4FVf/eNfGy6THkL9GzAahU9ErZrA==", "integrity": "sha512-XnTa+b51vt057fyAudvDKGB0Sh72xutQZNAdXkCqPBKO2zvs2yYZx5hFZj1u9cbtpwM6Sxtcr02/FQJfZOzemQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@babel/runtime": "^7.10.4", "@babel/runtime": "^7.20.1",
"@changesets/apply-release-plan": "^6.1.2", "@changesets/apply-release-plan": "^6.1.3",
"@changesets/assemble-release-plan": "^5.2.2", "@changesets/assemble-release-plan": "^5.2.3",
"@changesets/changelog-git": "^0.1.13", "@changesets/changelog-git": "^0.1.14",
"@changesets/config": "^2.2.0", "@changesets/config": "^2.3.0",
"@changesets/errors": "^0.1.4", "@changesets/errors": "^0.1.4",
"@changesets/get-dependents-graph": "^1.3.4", "@changesets/get-dependents-graph": "^1.3.5",
"@changesets/get-release-plan": "^3.0.15", "@changesets/get-release-plan": "^3.0.16",
"@changesets/git": "^1.5.0", "@changesets/git": "^2.0.0",
"@changesets/logger": "^0.0.5", "@changesets/logger": "^0.0.5",
"@changesets/pre": "^1.0.13", "@changesets/pre": "^1.0.14",
"@changesets/read": "^0.5.8", "@changesets/read": "^0.5.9",
"@changesets/types": "^5.2.0", "@changesets/types": "^5.2.1",
"@changesets/write": "^0.2.2", "@changesets/write": "^0.2.3",
"@manypkg/get-packages": "^1.1.3", "@manypkg/get-packages": "^1.1.3",
"@types/is-ci": "^3.0.0", "@types/is-ci": "^3.0.0",
"@types/semver": "^6.0.0", "@types/semver": "^6.0.0",
@ -2176,15 +2176,15 @@
} }
}, },
"node_modules/@changesets/config": { "node_modules/@changesets/config": {
"version": "2.2.0", "version": "2.3.0",
"resolved": "https://registry.npmjs.org/@changesets/config/-/config-2.2.0.tgz", "resolved": "https://registry.npmjs.org/@changesets/config/-/config-2.3.0.tgz",
"integrity": "sha512-GGaokp3nm5FEDk/Fv2PCRcQCOxGKKPRZ7prcMqxEr7VSsG75MnChQE8plaW1k6V8L2bJE+jZWiRm19LbnproOw==", "integrity": "sha512-EgP/px6mhCx8QeaMAvWtRrgyxW08k/Bx2tpGT+M84jEdX37v3VKfh4Cz1BkwrYKuMV2HZKeHOh8sHvja/HcXfQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@changesets/errors": "^0.1.4", "@changesets/errors": "^0.1.4",
"@changesets/get-dependents-graph": "^1.3.4", "@changesets/get-dependents-graph": "^1.3.5",
"@changesets/logger": "^0.0.5", "@changesets/logger": "^0.0.5",
"@changesets/types": "^5.2.0", "@changesets/types": "^5.2.1",
"@manypkg/get-packages": "^1.1.3", "@manypkg/get-packages": "^1.1.3",
"fs-extra": "^7.0.1", "fs-extra": "^7.0.1",
"micromatch": "^4.0.2" "micromatch": "^4.0.2"
@ -2200,12 +2200,12 @@
} }
}, },
"node_modules/@changesets/get-dependents-graph": { "node_modules/@changesets/get-dependents-graph": {
"version": "1.3.4", "version": "1.3.5",
"resolved": "https://registry.npmjs.org/@changesets/get-dependents-graph/-/get-dependents-graph-1.3.4.tgz", "resolved": "https://registry.npmjs.org/@changesets/get-dependents-graph/-/get-dependents-graph-1.3.5.tgz",
"integrity": "sha512-+C4AOrrFY146ydrgKOo5vTZfj7vetNu1tWshOID+UjPUU9afYGDXI8yLnAeib1ffeBXV3TuGVcyphKpJ3cKe+A==", "integrity": "sha512-w1eEvnWlbVDIY8mWXqWuYE9oKhvIaBhzqzo4ITSJY9hgoqQ3RoBqwlcAzg11qHxv/b8ReDWnMrpjpKrW6m1ZTA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@changesets/types": "^5.2.0", "@changesets/types": "^5.2.1",
"@manypkg/get-packages": "^1.1.3", "@manypkg/get-packages": "^1.1.3",
"chalk": "^2.1.0", "chalk": "^2.1.0",
"fs-extra": "^7.0.1", "fs-extra": "^7.0.1",
@ -2293,17 +2293,17 @@
} }
}, },
"node_modules/@changesets/get-release-plan": { "node_modules/@changesets/get-release-plan": {
"version": "3.0.15", "version": "3.0.16",
"resolved": "https://registry.npmjs.org/@changesets/get-release-plan/-/get-release-plan-3.0.15.tgz", "resolved": "https://registry.npmjs.org/@changesets/get-release-plan/-/get-release-plan-3.0.16.tgz",
"integrity": "sha512-W1tFwxE178/en+zSj/Nqbc3mvz88mcdqUMJhRzN1jDYqN3QI4ifVaRF9mcWUU+KI0gyYEtYR65tour690PqTcA==", "integrity": "sha512-OpP9QILpBp1bY2YNIKFzwigKh7Qe9KizRsZomzLe6pK8IUo8onkAAVUD8+JRKSr8R7d4+JRuQrfSSNlEwKyPYg==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@babel/runtime": "^7.10.4", "@babel/runtime": "^7.20.1",
"@changesets/assemble-release-plan": "^5.2.2", "@changesets/assemble-release-plan": "^5.2.3",
"@changesets/config": "^2.2.0", "@changesets/config": "^2.3.0",
"@changesets/pre": "^1.0.13", "@changesets/pre": "^1.0.14",
"@changesets/read": "^0.5.8", "@changesets/read": "^0.5.9",
"@changesets/types": "^5.2.0", "@changesets/types": "^5.2.1",
"@manypkg/get-packages": "^1.1.3" "@manypkg/get-packages": "^1.1.3"
} }
}, },
@ -2314,16 +2314,17 @@
"dev": true "dev": true
}, },
"node_modules/@changesets/git": { "node_modules/@changesets/git": {
"version": "1.5.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/@changesets/git/-/git-1.5.0.tgz", "resolved": "https://registry.npmjs.org/@changesets/git/-/git-2.0.0.tgz",
"integrity": "sha512-Xo8AT2G7rQJSwV87c8PwMm6BAc98BnufRMsML7m7Iw8Or18WFvFmxqG5aOL5PBvhgq9KrKvaeIBNIymracSuHg==", "integrity": "sha512-enUVEWbiqUTxqSnmesyJGWfzd51PY4H7mH9yUw0hPVpZBJ6tQZFMU3F3mT/t9OJ/GjyiM4770i+sehAn6ymx6A==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@babel/runtime": "^7.10.4", "@babel/runtime": "^7.20.1",
"@changesets/errors": "^0.1.4", "@changesets/errors": "^0.1.4",
"@changesets/types": "^5.2.0", "@changesets/types": "^5.2.1",
"@manypkg/get-packages": "^1.1.3", "@manypkg/get-packages": "^1.1.3",
"is-subdir": "^1.1.1", "is-subdir": "^1.1.1",
"micromatch": "^4.0.2",
"spawndamnit": "^2.0.0" "spawndamnit": "^2.0.0"
} }
}, },
@ -2408,39 +2409,39 @@
} }
}, },
"node_modules/@changesets/parse": { "node_modules/@changesets/parse": {
"version": "0.3.15", "version": "0.3.16",
"resolved": "https://registry.npmjs.org/@changesets/parse/-/parse-0.3.15.tgz", "resolved": "https://registry.npmjs.org/@changesets/parse/-/parse-0.3.16.tgz",
"integrity": "sha512-3eDVqVuBtp63i+BxEWHPFj2P1s3syk0PTrk2d94W9JD30iG+OER0Y6n65TeLlY8T2yB9Fvj6Ev5Gg0+cKe/ZUA==", "integrity": "sha512-127JKNd167ayAuBjUggZBkmDS5fIKsthnr9jr6bdnuUljroiERW7FBTDNnNVyJ4l69PzR57pk6mXQdtJyBCJKg==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@changesets/types": "^5.2.0", "@changesets/types": "^5.2.1",
"js-yaml": "^3.13.1" "js-yaml": "^3.13.1"
} }
}, },
"node_modules/@changesets/pre": { "node_modules/@changesets/pre": {
"version": "1.0.13", "version": "1.0.14",
"resolved": "https://registry.npmjs.org/@changesets/pre/-/pre-1.0.13.tgz", "resolved": "https://registry.npmjs.org/@changesets/pre/-/pre-1.0.14.tgz",
"integrity": "sha512-jrZc766+kGZHDukjKhpBXhBJjVQMied4Fu076y9guY1D3H622NOw8AQaLV3oQsDtKBTrT2AUFjt9Z2Y9Qx+GfA==", "integrity": "sha512-dTsHmxQWEQekHYHbg+M1mDVYFvegDh9j/kySNuDKdylwfMEevTeDouR7IfHNyVodxZXu17sXoJuf2D0vi55FHQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@babel/runtime": "^7.10.4", "@babel/runtime": "^7.20.1",
"@changesets/errors": "^0.1.4", "@changesets/errors": "^0.1.4",
"@changesets/types": "^5.2.0", "@changesets/types": "^5.2.1",
"@manypkg/get-packages": "^1.1.3", "@manypkg/get-packages": "^1.1.3",
"fs-extra": "^7.0.1" "fs-extra": "^7.0.1"
} }
}, },
"node_modules/@changesets/read": { "node_modules/@changesets/read": {
"version": "0.5.8", "version": "0.5.9",
"resolved": "https://registry.npmjs.org/@changesets/read/-/read-0.5.8.tgz", "resolved": "https://registry.npmjs.org/@changesets/read/-/read-0.5.9.tgz",
"integrity": "sha512-eYaNfxemgX7f7ELC58e7yqQICW5FB7V+bd1lKt7g57mxUrTveYME+JPaBPpYx02nP53XI6CQp6YxnR9NfmFPKw==", "integrity": "sha512-T8BJ6JS6j1gfO1HFq50kU3qawYxa4NTbI/ASNVVCBTsKquy2HYwM9r7ZnzkiMe8IEObAJtUVGSrePCOxAK2haQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@babel/runtime": "^7.10.4", "@babel/runtime": "^7.20.1",
"@changesets/git": "^1.5.0", "@changesets/git": "^2.0.0",
"@changesets/logger": "^0.0.5", "@changesets/logger": "^0.0.5",
"@changesets/parse": "^0.3.15", "@changesets/parse": "^0.3.16",
"@changesets/types": "^5.2.0", "@changesets/types": "^5.2.1",
"chalk": "^2.1.0", "chalk": "^2.1.0",
"fs-extra": "^7.0.1", "fs-extra": "^7.0.1",
"p-filter": "^2.1.0" "p-filter": "^2.1.0"
@ -2518,19 +2519,19 @@
} }
}, },
"node_modules/@changesets/types": { "node_modules/@changesets/types": {
"version": "5.2.0", "version": "5.2.1",
"resolved": "https://registry.npmjs.org/@changesets/types/-/types-5.2.0.tgz", "resolved": "https://registry.npmjs.org/@changesets/types/-/types-5.2.1.tgz",
"integrity": "sha512-km/66KOqJC+eicZXsm2oq8A8bVTSpkZJ60iPV/Nl5Z5c7p9kk8xxh6XGRTlnludHldxOOfudhnDN2qPxtHmXzA==", "integrity": "sha512-myLfHbVOqaq9UtUKqR/nZA/OY7xFjQMdfgfqeZIBK4d0hA6pgxArvdv8M+6NUzzBsjWLOtvApv8YHr4qM+Kpfg==",
"dev": true "dev": true
}, },
"node_modules/@changesets/write": { "node_modules/@changesets/write": {
"version": "0.2.2", "version": "0.2.3",
"resolved": "https://registry.npmjs.org/@changesets/write/-/write-0.2.2.tgz", "resolved": "https://registry.npmjs.org/@changesets/write/-/write-0.2.3.tgz",
"integrity": "sha512-kCYNHyF3xaId1Q/QE+DF3UTrHTyg3Cj/f++T8S8/EkC+jh1uK2LFnM9h+EzV+fsmnZDrs7r0J4LLpeI/VWC5Hg==", "integrity": "sha512-Dbamr7AIMvslKnNYsLFafaVORx4H0pvCA2MHqgtNCySMe1blImEyAEOzDmcgKAkgz4+uwoLz7demIrX+JBr/Xw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@babel/runtime": "^7.10.4", "@babel/runtime": "^7.20.1",
"@changesets/types": "^5.2.0", "@changesets/types": "^5.2.1",
"fs-extra": "^7.0.1", "fs-extra": "^7.0.1",
"human-id": "^1.0.2", "human-id": "^1.0.2",
"prettier": "^2.7.1" "prettier": "^2.7.1"
@ -3157,9 +3158,8 @@
"node_modules/@manypkg/get-packages/node_modules/globby": { "node_modules/@manypkg/get-packages/node_modules/globby": {
"version": "11.1.0", "version": "11.1.0",
"resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz", "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
"integrity": "sha1-vUvpi7BC+D15b344EZkfvoKg00s=", "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
"dev": true, "dev": true,
"license": "MIT",
"dependencies": { "dependencies": {
"array-union": "^2.1.0", "array-union": "^2.1.0",
"dir-glob": "^3.0.1", "dir-glob": "^3.0.1",
@ -22361,7 +22361,7 @@
}, },
"packages/ui": { "packages/ui": {
"name": "@lion/ui", "name": "@lion/ui",
"version": "0.2.1", "version": "0.2.2",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@bundled-es-modules/message-format": "^6.0.4", "@bundled-es-modules/message-format": "^6.0.4",
@ -23719,16 +23719,16 @@
"integrity": "sha512-NGUoPxqsBzDwvRhY3A3L/AhS1hzS9OWappfyDOyCwE7G3W4ua28gau7QwvJz7QzA6ArbAdeb8c1mLjvd1WUFAA==" "integrity": "sha512-NGUoPxqsBzDwvRhY3A3L/AhS1hzS9OWappfyDOyCwE7G3W4ua28gau7QwvJz7QzA6ArbAdeb8c1mLjvd1WUFAA=="
}, },
"@changesets/apply-release-plan": { "@changesets/apply-release-plan": {
"version": "6.1.2", "version": "6.1.3",
"resolved": "https://registry.npmjs.org/@changesets/apply-release-plan/-/apply-release-plan-6.1.2.tgz", "resolved": "https://registry.npmjs.org/@changesets/apply-release-plan/-/apply-release-plan-6.1.3.tgz",
"integrity": "sha512-H8TV9E/WtJsDfoDVbrDGPXmkZFSv7W2KLqp4xX4MKZXshb0hsQZUNowUa8pnus9qb/5OZrFFRVsUsDCVHNW/AQ==", "integrity": "sha512-ECDNeoc3nfeAe1jqJb5aFQX7CqzQhD2klXRez2JDb/aVpGUbX673HgKrnrgJRuQR/9f2TtLoYIzrGB9qwD77mg==",
"dev": true, "dev": true,
"requires": { "requires": {
"@babel/runtime": "^7.10.4", "@babel/runtime": "^7.20.1",
"@changesets/config": "^2.2.0", "@changesets/config": "^2.3.0",
"@changesets/get-version-range-type": "^0.3.2", "@changesets/get-version-range-type": "^0.3.2",
"@changesets/git": "^1.5.0", "@changesets/git": "^2.0.0",
"@changesets/types": "^5.2.0", "@changesets/types": "^5.2.1",
"@manypkg/get-packages": "^1.1.3", "@manypkg/get-packages": "^1.1.3",
"detect-indent": "^6.0.0", "detect-indent": "^6.0.0",
"fs-extra": "^7.0.1", "fs-extra": "^7.0.1",
@ -23748,15 +23748,15 @@
} }
}, },
"@changesets/assemble-release-plan": { "@changesets/assemble-release-plan": {
"version": "5.2.2", "version": "5.2.3",
"resolved": "https://registry.npmjs.org/@changesets/assemble-release-plan/-/assemble-release-plan-5.2.2.tgz", "resolved": "https://registry.npmjs.org/@changesets/assemble-release-plan/-/assemble-release-plan-5.2.3.tgz",
"integrity": "sha512-B1qxErQd85AeZgZFZw2bDKyOfdXHhG+X5S+W3Da2yCem8l/pRy4G/S7iOpEcMwg6lH8q2ZhgbZZwZ817D+aLuQ==", "integrity": "sha512-g7EVZCmnWz3zMBAdrcKhid4hkHT+Ft1n0mLussFMcB1dE2zCuwcvGoy9ec3yOgPGF4hoMtgHaMIk3T3TBdvU9g==",
"dev": true, "dev": true,
"requires": { "requires": {
"@babel/runtime": "^7.10.4", "@babel/runtime": "^7.20.1",
"@changesets/errors": "^0.1.4", "@changesets/errors": "^0.1.4",
"@changesets/get-dependents-graph": "^1.3.4", "@changesets/get-dependents-graph": "^1.3.5",
"@changesets/types": "^5.2.0", "@changesets/types": "^5.2.1",
"@manypkg/get-packages": "^1.1.3", "@manypkg/get-packages": "^1.1.3",
"semver": "^5.4.1" "semver": "^5.4.1"
}, },
@ -23770,34 +23770,34 @@
} }
}, },
"@changesets/changelog-git": { "@changesets/changelog-git": {
"version": "0.1.13", "version": "0.1.14",
"resolved": "https://registry.npmjs.org/@changesets/changelog-git/-/changelog-git-0.1.13.tgz", "resolved": "https://registry.npmjs.org/@changesets/changelog-git/-/changelog-git-0.1.14.tgz",
"integrity": "sha512-zvJ50Q+EUALzeawAxax6nF2WIcSsC5PwbuLeWkckS8ulWnuPYx8Fn/Sjd3rF46OzeKA8t30loYYV6TIzp4DIdg==", "integrity": "sha512-+vRfnKtXVWsDDxGctOfzJsPhaCdXRYoe+KyWYoq5X/GqoISREiat0l3L8B0a453B2B4dfHGcZaGyowHbp9BSaA==",
"dev": true, "dev": true,
"requires": { "requires": {
"@changesets/types": "^5.2.0" "@changesets/types": "^5.2.1"
} }
}, },
"@changesets/cli": { "@changesets/cli": {
"version": "2.25.2", "version": "2.26.1",
"resolved": "https://registry.npmjs.org/@changesets/cli/-/cli-2.25.2.tgz", "resolved": "https://registry.npmjs.org/@changesets/cli/-/cli-2.26.1.tgz",
"integrity": "sha512-ACScBJXI3kRyMd2R8n8SzfttDHi4tmKSwVwXBazJOylQItSRSF4cGmej2E4FVf/eNfGy6THkL9GzAahU9ErZrA==", "integrity": "sha512-XnTa+b51vt057fyAudvDKGB0Sh72xutQZNAdXkCqPBKO2zvs2yYZx5hFZj1u9cbtpwM6Sxtcr02/FQJfZOzemQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"@babel/runtime": "^7.10.4", "@babel/runtime": "^7.20.1",
"@changesets/apply-release-plan": "^6.1.2", "@changesets/apply-release-plan": "^6.1.3",
"@changesets/assemble-release-plan": "^5.2.2", "@changesets/assemble-release-plan": "^5.2.3",
"@changesets/changelog-git": "^0.1.13", "@changesets/changelog-git": "^0.1.14",
"@changesets/config": "^2.2.0", "@changesets/config": "^2.3.0",
"@changesets/errors": "^0.1.4", "@changesets/errors": "^0.1.4",
"@changesets/get-dependents-graph": "^1.3.4", "@changesets/get-dependents-graph": "^1.3.5",
"@changesets/get-release-plan": "^3.0.15", "@changesets/get-release-plan": "^3.0.16",
"@changesets/git": "^1.5.0", "@changesets/git": "^2.0.0",
"@changesets/logger": "^0.0.5", "@changesets/logger": "^0.0.5",
"@changesets/pre": "^1.0.13", "@changesets/pre": "^1.0.14",
"@changesets/read": "^0.5.8", "@changesets/read": "^0.5.9",
"@changesets/types": "^5.2.0", "@changesets/types": "^5.2.1",
"@changesets/write": "^0.2.2", "@changesets/write": "^0.2.3",
"@manypkg/get-packages": "^1.1.3", "@manypkg/get-packages": "^1.1.3",
"@types/is-ci": "^3.0.0", "@types/is-ci": "^3.0.0",
"@types/semver": "^6.0.0", "@types/semver": "^6.0.0",
@ -23884,15 +23884,15 @@
} }
}, },
"@changesets/config": { "@changesets/config": {
"version": "2.2.0", "version": "2.3.0",
"resolved": "https://registry.npmjs.org/@changesets/config/-/config-2.2.0.tgz", "resolved": "https://registry.npmjs.org/@changesets/config/-/config-2.3.0.tgz",
"integrity": "sha512-GGaokp3nm5FEDk/Fv2PCRcQCOxGKKPRZ7prcMqxEr7VSsG75MnChQE8plaW1k6V8L2bJE+jZWiRm19LbnproOw==", "integrity": "sha512-EgP/px6mhCx8QeaMAvWtRrgyxW08k/Bx2tpGT+M84jEdX37v3VKfh4Cz1BkwrYKuMV2HZKeHOh8sHvja/HcXfQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"@changesets/errors": "^0.1.4", "@changesets/errors": "^0.1.4",
"@changesets/get-dependents-graph": "^1.3.4", "@changesets/get-dependents-graph": "^1.3.5",
"@changesets/logger": "^0.0.5", "@changesets/logger": "^0.0.5",
"@changesets/types": "^5.2.0", "@changesets/types": "^5.2.1",
"@manypkg/get-packages": "^1.1.3", "@manypkg/get-packages": "^1.1.3",
"fs-extra": "^7.0.1", "fs-extra": "^7.0.1",
"micromatch": "^4.0.2" "micromatch": "^4.0.2"
@ -23908,12 +23908,12 @@
} }
}, },
"@changesets/get-dependents-graph": { "@changesets/get-dependents-graph": {
"version": "1.3.4", "version": "1.3.5",
"resolved": "https://registry.npmjs.org/@changesets/get-dependents-graph/-/get-dependents-graph-1.3.4.tgz", "resolved": "https://registry.npmjs.org/@changesets/get-dependents-graph/-/get-dependents-graph-1.3.5.tgz",
"integrity": "sha512-+C4AOrrFY146ydrgKOo5vTZfj7vetNu1tWshOID+UjPUU9afYGDXI8yLnAeib1ffeBXV3TuGVcyphKpJ3cKe+A==", "integrity": "sha512-w1eEvnWlbVDIY8mWXqWuYE9oKhvIaBhzqzo4ITSJY9hgoqQ3RoBqwlcAzg11qHxv/b8ReDWnMrpjpKrW6m1ZTA==",
"dev": true, "dev": true,
"requires": { "requires": {
"@changesets/types": "^5.2.0", "@changesets/types": "^5.2.1",
"@manypkg/get-packages": "^1.1.3", "@manypkg/get-packages": "^1.1.3",
"chalk": "^2.1.0", "chalk": "^2.1.0",
"fs-extra": "^7.0.1", "fs-extra": "^7.0.1",
@ -23985,17 +23985,17 @@
} }
}, },
"@changesets/get-release-plan": { "@changesets/get-release-plan": {
"version": "3.0.15", "version": "3.0.16",
"resolved": "https://registry.npmjs.org/@changesets/get-release-plan/-/get-release-plan-3.0.15.tgz", "resolved": "https://registry.npmjs.org/@changesets/get-release-plan/-/get-release-plan-3.0.16.tgz",
"integrity": "sha512-W1tFwxE178/en+zSj/Nqbc3mvz88mcdqUMJhRzN1jDYqN3QI4ifVaRF9mcWUU+KI0gyYEtYR65tour690PqTcA==", "integrity": "sha512-OpP9QILpBp1bY2YNIKFzwigKh7Qe9KizRsZomzLe6pK8IUo8onkAAVUD8+JRKSr8R7d4+JRuQrfSSNlEwKyPYg==",
"dev": true, "dev": true,
"requires": { "requires": {
"@babel/runtime": "^7.10.4", "@babel/runtime": "^7.20.1",
"@changesets/assemble-release-plan": "^5.2.2", "@changesets/assemble-release-plan": "^5.2.3",
"@changesets/config": "^2.2.0", "@changesets/config": "^2.3.0",
"@changesets/pre": "^1.0.13", "@changesets/pre": "^1.0.14",
"@changesets/read": "^0.5.8", "@changesets/read": "^0.5.9",
"@changesets/types": "^5.2.0", "@changesets/types": "^5.2.1",
"@manypkg/get-packages": "^1.1.3" "@manypkg/get-packages": "^1.1.3"
} }
}, },
@ -24006,16 +24006,17 @@
"dev": true "dev": true
}, },
"@changesets/git": { "@changesets/git": {
"version": "1.5.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/@changesets/git/-/git-1.5.0.tgz", "resolved": "https://registry.npmjs.org/@changesets/git/-/git-2.0.0.tgz",
"integrity": "sha512-Xo8AT2G7rQJSwV87c8PwMm6BAc98BnufRMsML7m7Iw8Or18WFvFmxqG5aOL5PBvhgq9KrKvaeIBNIymracSuHg==", "integrity": "sha512-enUVEWbiqUTxqSnmesyJGWfzd51PY4H7mH9yUw0hPVpZBJ6tQZFMU3F3mT/t9OJ/GjyiM4770i+sehAn6ymx6A==",
"dev": true, "dev": true,
"requires": { "requires": {
"@babel/runtime": "^7.10.4", "@babel/runtime": "^7.20.1",
"@changesets/errors": "^0.1.4", "@changesets/errors": "^0.1.4",
"@changesets/types": "^5.2.0", "@changesets/types": "^5.2.1",
"@manypkg/get-packages": "^1.1.3", "@manypkg/get-packages": "^1.1.3",
"is-subdir": "^1.1.1", "is-subdir": "^1.1.1",
"micromatch": "^4.0.2",
"spawndamnit": "^2.0.0" "spawndamnit": "^2.0.0"
} }
}, },
@ -24087,39 +24088,39 @@
} }
}, },
"@changesets/parse": { "@changesets/parse": {
"version": "0.3.15", "version": "0.3.16",
"resolved": "https://registry.npmjs.org/@changesets/parse/-/parse-0.3.15.tgz", "resolved": "https://registry.npmjs.org/@changesets/parse/-/parse-0.3.16.tgz",
"integrity": "sha512-3eDVqVuBtp63i+BxEWHPFj2P1s3syk0PTrk2d94W9JD30iG+OER0Y6n65TeLlY8T2yB9Fvj6Ev5Gg0+cKe/ZUA==", "integrity": "sha512-127JKNd167ayAuBjUggZBkmDS5fIKsthnr9jr6bdnuUljroiERW7FBTDNnNVyJ4l69PzR57pk6mXQdtJyBCJKg==",
"dev": true, "dev": true,
"requires": { "requires": {
"@changesets/types": "^5.2.0", "@changesets/types": "^5.2.1",
"js-yaml": "^3.13.1" "js-yaml": "^3.13.1"
} }
}, },
"@changesets/pre": { "@changesets/pre": {
"version": "1.0.13", "version": "1.0.14",
"resolved": "https://registry.npmjs.org/@changesets/pre/-/pre-1.0.13.tgz", "resolved": "https://registry.npmjs.org/@changesets/pre/-/pre-1.0.14.tgz",
"integrity": "sha512-jrZc766+kGZHDukjKhpBXhBJjVQMied4Fu076y9guY1D3H622NOw8AQaLV3oQsDtKBTrT2AUFjt9Z2Y9Qx+GfA==", "integrity": "sha512-dTsHmxQWEQekHYHbg+M1mDVYFvegDh9j/kySNuDKdylwfMEevTeDouR7IfHNyVodxZXu17sXoJuf2D0vi55FHQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"@babel/runtime": "^7.10.4", "@babel/runtime": "^7.20.1",
"@changesets/errors": "^0.1.4", "@changesets/errors": "^0.1.4",
"@changesets/types": "^5.2.0", "@changesets/types": "^5.2.1",
"@manypkg/get-packages": "^1.1.3", "@manypkg/get-packages": "^1.1.3",
"fs-extra": "^7.0.1" "fs-extra": "^7.0.1"
} }
}, },
"@changesets/read": { "@changesets/read": {
"version": "0.5.8", "version": "0.5.9",
"resolved": "https://registry.npmjs.org/@changesets/read/-/read-0.5.8.tgz", "resolved": "https://registry.npmjs.org/@changesets/read/-/read-0.5.9.tgz",
"integrity": "sha512-eYaNfxemgX7f7ELC58e7yqQICW5FB7V+bd1lKt7g57mxUrTveYME+JPaBPpYx02nP53XI6CQp6YxnR9NfmFPKw==", "integrity": "sha512-T8BJ6JS6j1gfO1HFq50kU3qawYxa4NTbI/ASNVVCBTsKquy2HYwM9r7ZnzkiMe8IEObAJtUVGSrePCOxAK2haQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"@babel/runtime": "^7.10.4", "@babel/runtime": "^7.20.1",
"@changesets/git": "^1.5.0", "@changesets/git": "^2.0.0",
"@changesets/logger": "^0.0.5", "@changesets/logger": "^0.0.5",
"@changesets/parse": "^0.3.15", "@changesets/parse": "^0.3.16",
"@changesets/types": "^5.2.0", "@changesets/types": "^5.2.1",
"chalk": "^2.1.0", "chalk": "^2.1.0",
"fs-extra": "^7.0.1", "fs-extra": "^7.0.1",
"p-filter": "^2.1.0" "p-filter": "^2.1.0"
@ -24184,19 +24185,19 @@
} }
}, },
"@changesets/types": { "@changesets/types": {
"version": "5.2.0", "version": "5.2.1",
"resolved": "https://registry.npmjs.org/@changesets/types/-/types-5.2.0.tgz", "resolved": "https://registry.npmjs.org/@changesets/types/-/types-5.2.1.tgz",
"integrity": "sha512-km/66KOqJC+eicZXsm2oq8A8bVTSpkZJ60iPV/Nl5Z5c7p9kk8xxh6XGRTlnludHldxOOfudhnDN2qPxtHmXzA==", "integrity": "sha512-myLfHbVOqaq9UtUKqR/nZA/OY7xFjQMdfgfqeZIBK4d0hA6pgxArvdv8M+6NUzzBsjWLOtvApv8YHr4qM+Kpfg==",
"dev": true "dev": true
}, },
"@changesets/write": { "@changesets/write": {
"version": "0.2.2", "version": "0.2.3",
"resolved": "https://registry.npmjs.org/@changesets/write/-/write-0.2.2.tgz", "resolved": "https://registry.npmjs.org/@changesets/write/-/write-0.2.3.tgz",
"integrity": "sha512-kCYNHyF3xaId1Q/QE+DF3UTrHTyg3Cj/f++T8S8/EkC+jh1uK2LFnM9h+EzV+fsmnZDrs7r0J4LLpeI/VWC5Hg==", "integrity": "sha512-Dbamr7AIMvslKnNYsLFafaVORx4H0pvCA2MHqgtNCySMe1blImEyAEOzDmcgKAkgz4+uwoLz7demIrX+JBr/Xw==",
"dev": true, "dev": true,
"requires": { "requires": {
"@babel/runtime": "^7.10.4", "@babel/runtime": "^7.20.1",
"@changesets/types": "^5.2.0", "@changesets/types": "^5.2.1",
"fs-extra": "^7.0.1", "fs-extra": "^7.0.1",
"human-id": "^1.0.2", "human-id": "^1.0.2",
"prettier": "^2.7.1" "prettier": "^2.7.1"
@ -24759,7 +24760,7 @@
"globby": { "globby": {
"version": "11.1.0", "version": "11.1.0",
"resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz", "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
"integrity": "sha1-vUvpi7BC+D15b344EZkfvoKg00s=", "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
"dev": true, "dev": true,
"requires": { "requires": {
"array-union": "^2.1.0", "array-union": "^2.1.0",

2
package.json
View file

@ -41,7 +41,7 @@
"devDependencies": { "devDependencies": {
"@babel/core": "^7.10.1", "@babel/core": "^7.10.1",
"@bundled-es-modules/fetch-mock": "^6.5.2", "@bundled-es-modules/fetch-mock": "^6.5.2",
"@changesets/cli": "^2.22.0", "@changesets/cli": "^2.26.1",
"@custom-elements-manifest/analyzer": "^0.5.7", "@custom-elements-manifest/analyzer": "^0.5.7",
"@open-wc/building-rollup": "^1.2.1", "@open-wc/building-rollup": "^1.2.1",
"@open-wc/eslint-config": "^7.0.0", "@open-wc/eslint-config": "^7.0.0",

17
packages/ui/components/input-amount/src/LionInputAmount.js
View file

@ -31,6 +31,11 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
* validators. * validators.
*/ */
modelValue: Number, modelValue: Number,
/**
* The slot to put the currency display node in. Can be 'prefix', 'suffix', 'before' and 'after'.
* Default will be 'after'.
*/
_currencyDisplayNodeSlot: { attribute: false },
locale: { attribute: false }, locale: { attribute: false },
}; };
} }
@ -38,7 +43,7 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
get slots() { get slots() {
return { return {
...super.slots, ...super.slots,
after: () => { [this._currencyDisplayNodeSlot]: () => {
const el = document.createElement('span'); const el = document.createElement('span');
// The data-label attribute will make sure that FormControl adds this to // The data-label attribute will make sure that FormControl adds this to
// input[aria-labelledby] // input[aria-labelledby]
@ -70,6 +75,8 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
this.locale = undefined; this.locale = undefined;
this.__currencyDisplayNodeIsConnected = true; this.__currencyDisplayNodeIsConnected = true;
this.defaultValidators.push(new IsNumber()); this.defaultValidators.push(new IsNumber());
/** @protected */
this._currencyDisplayNodeSlot = 'after';
} }
connectedCallback() { connectedCallback() {
@ -103,14 +110,14 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
/** /**
* Upon connecting slot mixin, we should check if * Upon connecting slot mixin, we should check if
* the after slot was created by the slot mixin, * the required slot was created by the slot mixin,
* and if so, we should execute the currency changed flow * and if so, we should execute the currency changed flow
* which evaluates whether the slot node should be * which evaluates whether the slot node should be
* removed for invalid currencies * removed for invalid currencies
*/ */
_connectSlotMixin() { _connectSlotMixin() {
super._connectSlotMixin(); super._connectSlotMixin();
if (this._isPrivateSlot('after')) { if (this._isPrivateSlot(this._currencyDisplayNodeSlot)) {
this._onCurrencyChanged({ currency: this.currency || null }); this._onCurrencyChanged({ currency: this.currency || null });
} }
} }
@ -179,7 +186,9 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
* @private * @private
*/ */
get __currencyDisplayNode() { get __currencyDisplayNode() {
const node = Array.from(this.children).find(child => child.slot === 'after'); const node = Array.from(this.children).find(
child => child.slot === this._currencyDisplayNodeSlot,
);
if (node) { if (node) {
this.__storedCurrencyDisplayNode = node; this.__storedCurrencyDisplayNode = node;
} }

39
packages/ui/components/input-amount/test/lion-input-amount.test.js
View file

@ -3,13 +3,12 @@ import { html } from 'lit';
import { localize } from '@lion/ui/localize.js'; import { localize } from '@lion/ui/localize.js';
import { localizeTearDown } from '@lion/ui/localize-test-helpers.js'; import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
import { getInputMembers } from '@lion/ui/input-test-helpers.js'; import { getInputMembers } from '@lion/ui/input-test-helpers.js';
import { formatAmount, parseAmount } from '@lion/ui/input-amount.js'; import { LionInputAmount, formatAmount, parseAmount } from '@lion/ui/input-amount.js';
import '@lion/ui/define/lion-input-amount.js'; import '@lion/ui/define/lion-input-amount.js';
/** /**
* @typedef {import('../../input/src/LionInput.js').LionInput} LionInput * @typedef {import('../../input/src/LionInput.js').LionInput} LionInput
* @typedef {import('../src/LionInputAmount.js').LionInputAmount} LionInputAmount
*/ */
describe('<lion-input-amount>', () => { describe('<lion-input-amount>', () => {
@ -187,24 +186,6 @@ describe('<lion-input-amount>', () => {
).to.equal('USD'); ).to.equal('USD');
}); });
it('ignores currency if a suffix is already present', async () => {
const el = /** @type {LionInputAmount} */ (
await fixture(
`<lion-input-amount currency="EUR"><span slot="suffix">my-currency</span></lion-input-amount>`,
)
);
expect(
/** @type {HTMLElement[]} */ (Array.from(el.children)).find(child => child.slot === 'suffix')
?.innerText,
).to.equal('my-currency');
el.currency = 'EUR';
await el.updateComplete;
expect(
/** @type {HTMLElement[]} */ (Array.from(el.children)).find(child => child.slot === 'suffix')
?.innerText,
).to.equal('my-currency');
});
it('reformats on locale changes', async () => { it('reformats on locale changes', async () => {
const el = /** @type {LionInputAmount} */ ( const el = /** @type {LionInputAmount} */ (
await fixture( await fixture(
@ -275,6 +256,24 @@ describe('<lion-input-amount>', () => {
expect(currLabel?.innerText).to.equal('EUR'); expect(currLabel?.innerText).to.equal('EUR');
}); });
it('can override the currency label slot', async () => {
customElements.define(
'my-input-amount',
class extends LionInputAmount {
constructor() {
super();
// Put the currency label in the suffix slot
this._currencyDisplayNodeSlot = 'suffix';
}
},
);
const el = await fixture(html`<my-input-amount currency="EUR"></my-input-amount>`);
expect(
/** @type {HTMLElement[]} */ (Array.from(el.children)).find(child => child.slot === 'suffix')
?.innerText,
).to.equal('EUR');
});
describe('Accessibility', () => { describe('Accessibility', () => {
it('is accessible', async () => { it('is accessible', async () => {
const el = await fixture( const el = await fixture(