diff --git a/.eslintrc.json b/.eslintrc.json index c258a854..9079088e 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -21,19 +21,13 @@ "no-unused-vars": "off", "@typescript-eslint/no-unused-vars": "error", "@typescript-eslint/prefer-literal-enum-member": "off", - "comma-dangle": [ - "error", - "always-multiline" - ] + "comma-dangle": ["error", "always-multiline"] } }, { "files": "*.html", - "extends": [ - "plugin:@angular-eslint/template/recommended" - ], - "rules": { - } + "extends": ["plugin:@angular-eslint/template/recommended"], + "rules": {} } ] } diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index 7de1ae4f..ea1e45de 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -1,10 +1,9 @@ --- name: Bug report about: Create a report to help us improve -title: '' +title: "" labels: bug assignees: json-derulo - --- **Describe the bug** @@ -12,6 +11,7 @@ A clear and concise description of what the bug is. **To Reproduce** Steps to reproduce the behavior: + 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' @@ -21,9 +21,10 @@ Steps to reproduce the behavior: A clear and concise description of what you expected to happen. **Versions** - - OS: [e.g. iOS] - - Browser [e.g. chrome, safari] - - Version [e.g. 1.0.0] + +- OS: [e.g. iOS] +- Browser [e.g. chrome, safari] +- Version [e.g. 1.0.0] **Additional context** Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index 8b6716d3..fd77d42a 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -1,10 +1,9 @@ --- name: Feature request about: Suggest an idea for this project -title: '' -labels: '' -assignees: '' - +title: "" +labels: "" +assignees: "" --- **Description** diff --git a/.github/workflows/verify-build.yml b/.github/workflows/verify-build.yml index 9c212683..46df21f5 100644 --- a/.github/workflows/verify-build.yml +++ b/.github/workflows/verify-build.yml @@ -2,7 +2,7 @@ name: Verify build on: pull_request_target: - types: [ opened, synchronize, reopened ] + types: [opened, synchronize, reopened] jobs: build: @@ -46,3 +46,17 @@ jobs: - name: test run: npm run test -- --watch=false --browsers=ChromeHeadless + + prettier: + runs-on: ubuntu-20.04 + steps: + - name: Checkout + uses: actions/checkout@v3 + with: + ref: ${{ github.event.pull_request.head.sha }} + + - name: install + run: npm ci + + - name: prettier + run: npx prettier . --check diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 0409dbe3..77b37457 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,6 +1,4 @@ { // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 - "recommendations": [ - "angular.ng-template" - ] + "recommendations": ["angular.ng-template"] } diff --git a/README.md b/README.md index 9045a3ce..1dd04cc5 100644 --- a/README.md +++ b/README.md @@ -13,35 +13,31 @@ npm install angular-ecmascript-intl --save Import the `IntlModule`: ```typescript -import {NgModule} from '@angular/core'; -import {IntlModule} from 'angular-ecmascript-intl'; +import { NgModule } from "@angular/core"; +import { IntlModule } from "angular-ecmascript-intl"; @NgModule({ - imports: [ - IntlModule, - ], + imports: [IntlModule], }) -export class MyModule { -} +export class MyModule {} ``` By default, the pipe will use the browser default locale. If you want to override it, you can provide the `INTL_LOCALES` injection token: ```typescript -import {NgModule} from '@angular/core'; -import {INTL_LOCALES} from 'angular-ecmascript-intl'; +import { NgModule } from "@angular/core"; +import { INTL_LOCALES } from "angular-ecmascript-intl"; @NgModule({ providers: [ { provide: INTL_LOCALES, - useValue: 'de-DE', + useValue: "de-DE", }, ], }) -export class MyModule { -} +export class MyModule {} ``` Also, every pipe accepts the `locale` option. @@ -60,17 +56,17 @@ Use the date pipe like the following: The input date can be one of the following: -* `Date` object -* number (UNIX timestamp) -* string (will be parsed by `new Date()` constructor) -* null -* undefined +- `Date` object +- number (UNIX timestamp) +- string (will be parsed by `new Date()` constructor) +- null +- undefined The following options are supported: -* [`dateStyle`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#datestyle) -* [`timeStyle`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#timestyle) -* [`hour12`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#hour12) +- [`dateStyle`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#datestyle) +- [`timeStyle`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#timestyle) +- [`hour12`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#hour12) With the `INTL_DATE_PIPE_DEFAULT_OPTIONS` injection token you can specify default options. @@ -84,20 +80,20 @@ Use the decimal pipe like the following: The input can be one of the following: -* number -* string (must be parseable as number) -* null -* undefined +- number +- string (must be parseable as number) +- null +- undefined The following options are supported: -* [`notation`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#notation) -* [`signDisplay`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#signdisplay) -* [`minimumIntegerDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumintegerdigits) -* [`minimumFractionDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumfractiondigits) -* [`maximumFractionDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumfractiondigits) -* [`minimumSignificantDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumsignificantdigits) -* [`maximumSignificantDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumsignificantdigits) +- [`notation`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#notation) +- [`signDisplay`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#signdisplay) +- [`minimumIntegerDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumintegerdigits) +- [`minimumFractionDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumfractiondigits) +- [`maximumFractionDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumfractiondigits) +- [`minimumSignificantDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumsignificantdigits) +- [`maximumSignificantDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumsignificantdigits) With the `INTL_DECIMAL_PIPE_DEFAULT_OPTIONS` injection token you can specify default options. @@ -111,20 +107,20 @@ Use the percent pipe like the following: The input can be one of the following: -* number -* string (must be parseable as number) -* null -* undefined +- number +- string (must be parseable as number) +- null +- undefined The following options are supported: -* [`notation`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#notation) -* [`signDisplay`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#signdisplay) -* [`minimumIntegerDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumintegerdigits) -* [`minimumFractionDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumfractiondigits) -* [`maximumFractionDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumfractiondigits) -* [`minimumSignificantDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumsignificantdigits) -* [`maximumSignificantDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumsignificantdigits) +- [`notation`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#notation) +- [`signDisplay`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#signdisplay) +- [`minimumIntegerDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumintegerdigits) +- [`minimumFractionDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumfractiondigits) +- [`maximumFractionDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumfractiondigits) +- [`minimumSignificantDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumsignificantdigits) +- [`maximumSignificantDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumsignificantdigits) With the `INTL_PERCENT_PIPE_DEFAULT_OPTIONS` injection token you can specify default options. @@ -138,25 +134,25 @@ Use the currency pipe like the following: The input can be one of the following: -* number -* string (must be parseable as number) -* null -* undefined +- number +- string (must be parseable as number) +- null +- undefined The currency code parameter is required and must be a valid ISO 4217 currency code. If you want to transform a decimal number instead, use the `intlDecimal` pipe. The following additional options are supported: -* [`currencyDisplay`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currencydisplay) -* [`currencySign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currencysign) -* [`notation`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#notation) -* [`signDisplay`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#signdisplay) -* [`minimumIntegerDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumintegerdigits) -* [`minimumFractionDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumfractiondigits) -* [`maximumFractionDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumfractiondigits) -* [`minimumSignificantDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumsignificantdigits) -* [`maximumSignificantDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumsignificantdigits) +- [`currencyDisplay`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currencydisplay) +- [`currencySign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currencysign) +- [`notation`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#notation) +- [`signDisplay`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#signdisplay) +- [`minimumIntegerDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumintegerdigits) +- [`minimumFractionDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumfractiondigits) +- [`maximumFractionDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumfractiondigits) +- [`minimumSignificantDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumsignificantdigits) +- [`maximumSignificantDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumsignificantdigits) With the `INTL_CURRENCY_PIPE_DEFAULT_OPTIONS` injection token you can specify default options. @@ -170,13 +166,13 @@ Use the language pipe like the following: The input can be one of the following: -* string (must be a BCP 47 IETF language tag) -* null -* undefined +- string (must be a BCP 47 IETF language tag) +- null +- undefined The following option is supported: -* [`languageDisplay`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames#languagedisplay) +- [`languageDisplay`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames#languagedisplay) With the `INTL_LANGUAGE_PIPE_DEFAULT_OPTIONS` injection token you can specify default options. @@ -190,9 +186,9 @@ Use the country pipe like the following: The input can be one of the following: -* string (must be two-letter ISO 639-1 language code or a three-letter ISO 639-2 language code) -* null -* undefined +- string (must be two-letter ISO 639-1 language code or a three-letter ISO 639-2 language code) +- null +- undefined ### Unit pipe @@ -204,10 +200,10 @@ Use the unit pipe like the following: The input can be one of the following: -* number -* string (must be parseable as number) -* null -* undefined +- number +- string (must be parseable as number) +- null +- undefined The unit parameter is required, see the [specification](https://tc39.es/proposal-unified-intl-numberformat/section6/locales-currencies-tz_proposed_out.html#sec-issanctionedsimpleunitidentifier) @@ -215,14 +211,14 @@ for a full list of possible values. If you want to transform a decimal number in The following additional options are supported: -* [`unitDisplay`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#unitdisplay) -* [`notation`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#notation) -* [`signDisplay`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#signdisplay) -* [`minimumIntegerDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumintegerdigits) -* [`minimumFractionDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumfractiondigits) -* [`maximumFractionDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumfractiondigits) -* [`minimumSignificantDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumsignificantdigits) -* [`maximumSignificantDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumsignificantdigits) +- [`unitDisplay`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#unitdisplay) +- [`notation`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#notation) +- [`signDisplay`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#signdisplay) +- [`minimumIntegerDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumintegerdigits) +- [`minimumFractionDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumfractiondigits) +- [`maximumFractionDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumfractiondigits) +- [`minimumSignificantDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumsignificantdigits) +- [`maximumSignificantDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumsignificantdigits) With the `INTL_UNIT_PIPE_DEFAULT_OPTIONS` injection token you can specify default options. @@ -236,14 +232,14 @@ Use the list pipe like the following: The input can be one of the following: -* Iterable of strings -* null -* undefined +- Iterable of strings +- null +- undefined The following options are supported: -* [`type`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat#type) -* [`style`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat#style) +- [`type`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat#type) +- [`style`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat#style) With the `INTL_LIST_PIPE_DEFAULT_OPTIONS` injection token you can specify default options. @@ -260,23 +256,23 @@ Use the relative time pipe like the following: The input date can be one of the following: -* `Date` object -* number (UNIX timestamp) -* string (will be parsed by `new Date()` constructor) -* null -* undefined +- `Date` object +- number (UNIX timestamp) +- string (will be parsed by `new Date()` constructor) +- null +- undefined The following options are supported: -* [`numeric`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat#numeric) -* [`style`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat#style) +- [`numeric`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat#numeric) +- [`style`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat#style) With the `INTL_RELATIVE_TIME_PIPE_DEFAULT_OPTIONS` injection token you can specify default options. ## Angular compatibility table | Angular | angular-ecmascript-intl | -|---------|-------------------------| +| ------- | ----------------------- | | 16 | 2.x | | 15 | 1.x | diff --git a/angular.json b/angular.json index e46a84f8..0f611820 100644 --- a/angular.json +++ b/angular.json @@ -28,10 +28,7 @@ "builder": "@angular-devkit/build-angular:karma", "options": { "tsConfig": "projects/angular-ecmascript-intl/tsconfig.spec.json", - "polyfills": [ - "zone.js", - "zone.js/testing" - ] + "polyfills": ["zone.js", "zone.js/testing"] } } } @@ -53,9 +50,7 @@ "outputPath": "dist/angular-intl-demo", "index": "projects/angular-intl-demo/src/index.html", "main": "projects/angular-intl-demo/src/main.ts", - "polyfills": [ - "zone.js" - ], + "polyfills": ["zone.js"], "tsConfig": "projects/angular-intl-demo/tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [ diff --git a/package-lock.json b/package-lock.json index 4d027a85..8151ad28 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,16 +8,16 @@ "name": "angular-ecmascript-intl-monorepo", "version": "0.0.0", "dependencies": { - "@angular/animations": "^16.1.5", + "@angular/animations": "~16.1.0", "@angular/cdk": "~16.1.0", - "@angular/common": "^16.1.5", - "@angular/compiler": "^16.1.5", - "@angular/core": "^16.1.5", - "@angular/forms": "^16.1.5", + "@angular/common": "~16.1.0", + "@angular/compiler": "~16.1.0", + "@angular/core": "~16.1.0", + "@angular/forms": "~16.1.0", "@angular/material": "~16.1.0", - "@angular/platform-browser": "^16.1.5", - "@angular/platform-browser-dynamic": "^16.1.5", - "@angular/router": "^16.1.5", + "@angular/platform-browser": "~16.1.0", + "@angular/platform-browser-dynamic": "~16.1.0", + "@angular/router": "~16.1.0", "marked": "^4.2.12", "ngx-markdown": "^16.0.0", "prismjs": "^1.29.0", @@ -33,7 +33,7 @@ "@angular-eslint/schematics": "^16.0.1", "@angular-eslint/template-parser": "^16.0.1", "@angular/cli": "~16.1.0", - "@angular/compiler-cli": "^16.1.5", + "@angular/compiler-cli": "~16.1.0", "@types/jasmine": "~4.3.0", "@types/marked": "^4.0.8", "@typescript-eslint/eslint-plugin": "^5.59.2", @@ -48,6 +48,7 @@ "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", "ng-packagr": "~16.1.0", + "prettier": "~3.0.0", "typescript": "~5.1.0" } }, @@ -13480,6 +13481,21 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.0.tgz", + "integrity": "sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==", + "dev": true, + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", diff --git a/package.json b/package.json index 8386ab5e..50ff38a3 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,8 @@ "watch": "ng build --watch --configuration development", "test": "ng test --code-coverage=true", "lint": "eslint --ignore-path=.gitignore .", - "release": "release-it" + "release": "release-it", + "prettier": "prettier . --write" }, "private": true, "dependencies": { @@ -54,6 +55,7 @@ "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", "ng-packagr": "~16.1.0", + "prettier": "~3.0.0", "typescript": "~5.1.0" } } diff --git a/projects/angular-ecmascript-intl/src/lib/country/intl-country-pipe-default-options.ts b/projects/angular-ecmascript-intl/src/lib/country/intl-country-pipe-default-options.ts index bc127e70..e4ff372d 100644 --- a/projects/angular-ecmascript-intl/src/lib/country/intl-country-pipe-default-options.ts +++ b/projects/angular-ecmascript-intl/src/lib/country/intl-country-pipe-default-options.ts @@ -1,4 +1,6 @@ -import {InjectionToken} from "@angular/core"; -import {IntlCountryPipeOptions} from "./intl-country.pipe"; +import { InjectionToken } from '@angular/core'; +import { IntlCountryPipeOptions } from './intl-country.pipe'; -export const INTL_COUNTRY_PIPE_DEFAULT_OPTIONS = new InjectionToken>('IntlCountryPipeDefaultOptions'); +export const INTL_COUNTRY_PIPE_DEFAULT_OPTIONS = new InjectionToken< + Omit +>('IntlCountryPipeDefaultOptions'); diff --git a/projects/angular-ecmascript-intl/src/lib/country/intl-country.pipe.spec.ts b/projects/angular-ecmascript-intl/src/lib/country/intl-country.pipe.spec.ts index 1190fda2..4be3ea14 100644 --- a/projects/angular-ecmascript-intl/src/lib/country/intl-country.pipe.spec.ts +++ b/projects/angular-ecmascript-intl/src/lib/country/intl-country.pipe.spec.ts @@ -1,7 +1,7 @@ -import {IntlCountryPipe} from './intl-country.pipe'; -import {TestBed} from "@angular/core/testing"; -import {INTL_LOCALES} from "../locale"; -import {INTL_COUNTRY_PIPE_DEFAULT_OPTIONS} from "./intl-country-pipe-default-options"; +import { IntlCountryPipe } from './intl-country.pipe'; +import { TestBed } from '@angular/core/testing'; +import { INTL_LOCALES } from '../locale'; +import { INTL_COUNTRY_PIPE_DEFAULT_OPTIONS } from './intl-country-pipe-default-options'; describe('IntlCountryPipe', () => { let testUnit: IntlCountryPipe; @@ -58,7 +58,7 @@ describe('IntlCountryPipe', () => { }); it('should fall back to the browser default locale', () => { - TestBed.configureTestingModule({providers: [IntlCountryPipe]}); + TestBed.configureTestingModule({ providers: [IntlCountryPipe] }); const result1 = TestBed.inject(IntlCountryPipe).transform('US'); const result2 = new IntlCountryPipe(navigator.language).transform('US'); @@ -86,7 +86,9 @@ describe('IntlCountryPipe', () => { }); testUnit = TestBed.inject(IntlCountryPipe); - expect(testUnit.transform('DE', {type: 'language'})).toEqual('Deutschland'); + expect(testUnit.transform('DE', { type: 'language' })).toEqual( + 'Deutschland', + ); }); }); @@ -102,6 +104,8 @@ describe('IntlCountryPipe', () => { }); testUnit = TestBed.inject(IntlCountryPipe); - expect(testUnit.transform('US', {locale: 'de-DE'})).toEqual('Vereinigte Staaten'); + expect(testUnit.transform('US', { locale: 'de-DE' })).toEqual( + 'Vereinigte Staaten', + ); }); }); diff --git a/projects/angular-ecmascript-intl/src/lib/country/intl-country.pipe.ts b/projects/angular-ecmascript-intl/src/lib/country/intl-country.pipe.ts index 2c2edb4b..c332ea29 100644 --- a/projects/angular-ecmascript-intl/src/lib/country/intl-country.pipe.ts +++ b/projects/angular-ecmascript-intl/src/lib/country/intl-country.pipe.ts @@ -1,36 +1,49 @@ -import {Inject, Optional, Pipe, PipeTransform} from '@angular/core'; -import {INTL_LOCALES} from "../locale"; -import {INTL_COUNTRY_PIPE_DEFAULT_OPTIONS} from "./intl-country-pipe-default-options"; -import {IntlPipeOptions} from "../intl-pipe-options"; +import { Inject, Optional, Pipe, PipeTransform } from '@angular/core'; +import { INTL_LOCALES } from '../locale'; +import { INTL_COUNTRY_PIPE_DEFAULT_OPTIONS } from './intl-country-pipe-default-options'; +import { IntlPipeOptions } from '../intl-pipe-options'; -export type IntlCountryPipeOptions = Omit, 'languageDisplay'> & IntlPipeOptions; +export type IntlCountryPipeOptions = Omit< + Partial, + 'languageDisplay' +> & + IntlPipeOptions; @Pipe({ name: 'intlCountry', standalone: true, }) export class IntlCountryPipe implements PipeTransform { + constructor( + @Optional() + @Inject(INTL_LOCALES) + readonly locale?: string | string[] | null, + @Optional() + @Inject(INTL_COUNTRY_PIPE_DEFAULT_OPTIONS) + readonly defaultOptions?: Omit | null, + ) {} - constructor(@Optional() @Inject(INTL_LOCALES) readonly locale?: string | string[] | null, - @Optional() @Inject(INTL_COUNTRY_PIPE_DEFAULT_OPTIONS) readonly defaultOptions?: Omit | null) { - } - - transform(value: string | null | undefined, options?: IntlCountryPipeOptions): string | null { + transform( + value: string | null | undefined, + options?: IntlCountryPipeOptions, + ): string | null { if (!value) { return null; } - const {locale, ...intlOptions} = options ?? {}; + const { locale, ...intlOptions } = options ?? {}; try { - return new Intl.DisplayNames(locale ?? this.locale ?? undefined, { - ...this.defaultOptions, ...intlOptions, - type: 'region', - }).of(value) ?? null; + return ( + new Intl.DisplayNames(locale ?? this.locale ?? undefined, { + ...this.defaultOptions, + ...intlOptions, + type: 'region', + }).of(value) ?? null + ); } catch (e) { console.error('Error while transforming the country', e); return null; } } - } diff --git a/projects/angular-ecmascript-intl/src/lib/currency/intl-currency-pipe-default-options.ts b/projects/angular-ecmascript-intl/src/lib/currency/intl-currency-pipe-default-options.ts index 23bbfc9c..a5297d3d 100644 --- a/projects/angular-ecmascript-intl/src/lib/currency/intl-currency-pipe-default-options.ts +++ b/projects/angular-ecmascript-intl/src/lib/currency/intl-currency-pipe-default-options.ts @@ -1,4 +1,6 @@ -import {InjectionToken} from "@angular/core"; -import {IntlCurrencyPipeOptions} from "./intl-currency.pipe"; +import { InjectionToken } from '@angular/core'; +import { IntlCurrencyPipeOptions } from './intl-currency.pipe'; -export const INTL_CURRENCY_PIPE_DEFAULT_OPTIONS = new InjectionToken>('IntlCurrencyPipeDefaultOptions'); +export const INTL_CURRENCY_PIPE_DEFAULT_OPTIONS = new InjectionToken< + Omit +>('IntlCurrencyPipeDefaultOptions'); diff --git a/projects/angular-ecmascript-intl/src/lib/currency/intl-currency.pipe.spec.ts b/projects/angular-ecmascript-intl/src/lib/currency/intl-currency.pipe.spec.ts index 0b5ef1d5..31e2d8d1 100644 --- a/projects/angular-ecmascript-intl/src/lib/currency/intl-currency.pipe.spec.ts +++ b/projects/angular-ecmascript-intl/src/lib/currency/intl-currency.pipe.spec.ts @@ -1,7 +1,7 @@ -import {IntlCurrencyPipe} from './intl-currency.pipe'; -import {TestBed} from "@angular/core/testing"; -import {INTL_LOCALES} from "../locale"; -import {INTL_CURRENCY_PIPE_DEFAULT_OPTIONS} from "./intl-currency-pipe-default-options"; +import { IntlCurrencyPipe } from './intl-currency.pipe'; +import { TestBed } from '@angular/core/testing'; +import { INTL_LOCALES } from '../locale'; +import { INTL_CURRENCY_PIPE_DEFAULT_OPTIONS } from './intl-currency-pipe-default-options'; describe('IntlCurrencyPipe', () => { let testUnit: IntlCurrencyPipe; @@ -66,10 +66,16 @@ describe('IntlCurrencyPipe', () => { }); it('should fall back to the browser default locale', () => { - TestBed.configureTestingModule({providers: [IntlCurrencyPipe]}); + TestBed.configureTestingModule({ providers: [IntlCurrencyPipe] }); - const result1 = TestBed.inject(IntlCurrencyPipe).transform(1024.2249, 'EUR'); - const result2 = new IntlCurrencyPipe(navigator.language).transform(1024.2249, 'EUR'); + const result1 = TestBed.inject(IntlCurrencyPipe).transform( + 1024.2249, + 'EUR', + ); + const result2 = new IntlCurrencyPipe(navigator.language).transform( + 1024.2249, + 'EUR', + ); expect(result1).toEqual(result2); }); @@ -95,7 +101,6 @@ describe('IntlCurrencyPipe', () => { testUnit = TestBed.inject(IntlCurrencyPipe); expect(testUnit.transform(1, 'USD')).toEqual('+$1.00'); - }); it('should give the user options a higher priority', () => { @@ -116,7 +121,9 @@ describe('IntlCurrencyPipe', () => { }); testUnit = TestBed.inject(IntlCurrencyPipe); - expect(testUnit.transform(1, 'USD', {signDisplay: 'never'})).toEqual('$1.00'); + expect(testUnit.transform(1, 'USD', { signDisplay: 'never' })).toEqual( + '$1.00', + ); }); }); @@ -132,7 +139,9 @@ describe('IntlCurrencyPipe', () => { }); testUnit = TestBed.inject(IntlCurrencyPipe); - expect(testUnit.transform(1024, 'USD', {locale: 'de-DE'})).toEqual('1.024,00\xa0$'); + expect(testUnit.transform(1024, 'USD', { locale: 'de-DE' })).toEqual( + '1.024,00\xa0$', + ); }); it('should not override the style option', () => { @@ -153,6 +162,6 @@ describe('IntlCurrencyPipe', () => { }); testUnit = TestBed.inject(IntlCurrencyPipe); - expect(testUnit.transform(1, 'USD', {style: 'percent'})).toEqual('$1.00'); + expect(testUnit.transform(1, 'USD', { style: 'percent' })).toEqual('$1.00'); }); }); diff --git a/projects/angular-ecmascript-intl/src/lib/currency/intl-currency.pipe.ts b/projects/angular-ecmascript-intl/src/lib/currency/intl-currency.pipe.ts index 38d4e0f9..0d20e1d6 100644 --- a/projects/angular-ecmascript-intl/src/lib/currency/intl-currency.pipe.ts +++ b/projects/angular-ecmascript-intl/src/lib/currency/intl-currency.pipe.ts @@ -1,40 +1,53 @@ -import {Inject, Optional, Pipe, PipeTransform} from '@angular/core'; -import {IntlPipeOptions} from "../intl-pipe-options"; -import {INTL_LOCALES} from "../locale"; -import {INTL_CURRENCY_PIPE_DEFAULT_OPTIONS} from "./intl-currency-pipe-default-options"; -import {getNumericValue} from "../utils/number-utils"; +import { Inject, Optional, Pipe, PipeTransform } from '@angular/core'; +import { IntlPipeOptions } from '../intl-pipe-options'; +import { INTL_LOCALES } from '../locale'; +import { INTL_CURRENCY_PIPE_DEFAULT_OPTIONS } from './intl-currency-pipe-default-options'; +import { getNumericValue } from '../utils/number-utils'; type OmitOptions = 'unit' | 'unitDisplay' | 'currency'; -export type IntlCurrencyPipeOptions = Omit, OmitOptions> & IntlPipeOptions; +export type IntlCurrencyPipeOptions = Omit< + Partial, + OmitOptions +> & + IntlPipeOptions; @Pipe({ name: 'intlCurrency', standalone: true, }) export class IntlCurrencyPipe implements PipeTransform { - - constructor(@Optional() @Inject(INTL_LOCALES) readonly locale?: string | string[] | null, - @Optional() @Inject(INTL_CURRENCY_PIPE_DEFAULT_OPTIONS) readonly defaultOptions?: Omit | null) { - } - - transform(value: number | string | null | undefined, currency: string, options?: IntlCurrencyPipeOptions): string | null { + constructor( + @Optional() + @Inject(INTL_LOCALES) + readonly locale?: string | string[] | null, + @Optional() + @Inject(INTL_CURRENCY_PIPE_DEFAULT_OPTIONS) + readonly defaultOptions?: Omit | null, + ) {} + + transform( + value: number | string | null | undefined, + currency: string, + options?: IntlCurrencyPipeOptions, + ): string | null { if (typeof value !== 'number' && !value) { return null; } const numericValue = getNumericValue(value); - const {locale, ...intlOptions} = options ?? {}; + const { locale, ...intlOptions } = options ?? {}; try { - return new Intl.NumberFormat( - locale ?? this.locale ?? undefined, - {...this.defaultOptions, ...intlOptions, currency, style: 'currency'}, - ).format(numericValue); + return new Intl.NumberFormat(locale ?? this.locale ?? undefined, { + ...this.defaultOptions, + ...intlOptions, + currency, + style: 'currency', + }).format(numericValue); } catch (e) { console.error('Error while transforming the currency', e); return null; } } - } diff --git a/projects/angular-ecmascript-intl/src/lib/date/intl-date-pipe-default-options.ts b/projects/angular-ecmascript-intl/src/lib/date/intl-date-pipe-default-options.ts index 49d6340d..d3fdc281 100644 --- a/projects/angular-ecmascript-intl/src/lib/date/intl-date-pipe-default-options.ts +++ b/projects/angular-ecmascript-intl/src/lib/date/intl-date-pipe-default-options.ts @@ -1,4 +1,6 @@ -import {InjectionToken} from "@angular/core"; -import {IntlDatePipeOptions} from "./intl-date.pipe"; +import { InjectionToken } from '@angular/core'; +import { IntlDatePipeOptions } from './intl-date.pipe'; -export const INTL_DATE_PIPE_DEFAULT_OPTIONS = new InjectionToken>('IntlDatePipeDefaultOptions'); +export const INTL_DATE_PIPE_DEFAULT_OPTIONS = new InjectionToken< + Omit +>('IntlDatePipeDefaultOptions'); diff --git a/projects/angular-ecmascript-intl/src/lib/date/intl-date.pipe.spec.ts b/projects/angular-ecmascript-intl/src/lib/date/intl-date.pipe.spec.ts index e078c7bc..41e7e810 100644 --- a/projects/angular-ecmascript-intl/src/lib/date/intl-date.pipe.spec.ts +++ b/projects/angular-ecmascript-intl/src/lib/date/intl-date.pipe.spec.ts @@ -1,7 +1,7 @@ -import {IntlDatePipe} from './intl-date.pipe'; -import {TestBed} from "@angular/core/testing"; -import {INTL_LOCALES} from "../locale"; -import {INTL_DATE_PIPE_DEFAULT_OPTIONS} from "./intl-date-pipe-default-options"; +import { IntlDatePipe } from './intl-date.pipe'; +import { TestBed } from '@angular/core/testing'; +import { INTL_LOCALES } from '../locale'; +import { INTL_DATE_PIPE_DEFAULT_OPTIONS } from './intl-date-pipe-default-options'; describe('DatePipe', () => { let testUnit: IntlDatePipe; @@ -32,11 +32,15 @@ describe('DatePipe', () => { }); it('should transform UTC strings', () => { - expect(testUnit.transform('Sun, 19 Feb 2023 11:13:52 GMT')).toEqual('2/19/2023'); + expect(testUnit.transform('Sun, 19 Feb 2023 11:13:52 GMT')).toEqual( + '2/19/2023', + ); }); it('should transform ISO strings', () => { - expect(testUnit.transform('2023-02-19T11:13:52.682Z')).toEqual('2/19/2023'); + expect(testUnit.transform('2023-02-19T11:13:52.682Z')).toEqual( + '2/19/2023', + ); }); it('should support Date objects', () => { @@ -81,7 +85,9 @@ describe('DatePipe', () => { TestBed.configureTestingModule({ providers: [IntlDatePipe] }); const result1 = TestBed.inject(IntlDatePipe).transform('2023-02-19'); - const result2 = new IntlDatePipe(navigator.language).transform('2023-02-19'); + const result2 = new IntlDatePipe(navigator.language).transform( + '2023-02-19', + ); expect(result1).toEqual(result2); }); @@ -107,7 +113,6 @@ describe('DatePipe', () => { testUnit = TestBed.inject(IntlDatePipe); expect(testUnit.transform('2023-02-19')).toEqual('Feb 19, 2023'); - }); it('should give the user options a higher priority', () => { @@ -128,7 +133,9 @@ describe('DatePipe', () => { }); testUnit = TestBed.inject(IntlDatePipe); - expect(testUnit.transform('2023-02-19', {dateStyle: 'medium'})).toEqual('Feb 19, 2023'); + expect(testUnit.transform('2023-02-19', { dateStyle: 'medium' })).toEqual( + 'Feb 19, 2023', + ); }); }); @@ -144,6 +151,8 @@ describe('DatePipe', () => { }); testUnit = TestBed.inject(IntlDatePipe); - expect(testUnit.transform('2023-02-19', {locale: 'de-DE'})).toEqual('19.2.2023'); + expect(testUnit.transform('2023-02-19', { locale: 'de-DE' })).toEqual( + '19.2.2023', + ); }); }); diff --git a/projects/angular-ecmascript-intl/src/lib/date/intl-date.pipe.ts b/projects/angular-ecmascript-intl/src/lib/date/intl-date.pipe.ts index e9fdabcb..af18bf50 100644 --- a/projects/angular-ecmascript-intl/src/lib/date/intl-date.pipe.ts +++ b/projects/angular-ecmascript-intl/src/lib/date/intl-date.pipe.ts @@ -1,21 +1,29 @@ -import {Inject, Optional, Pipe, PipeTransform} from '@angular/core'; -import {INTL_LOCALES} from "../locale"; -import {INTL_DATE_PIPE_DEFAULT_OPTIONS} from "./intl-date-pipe-default-options"; -import {IntlPipeOptions} from "../intl-pipe-options"; +import { Inject, Optional, Pipe, PipeTransform } from '@angular/core'; +import { INTL_LOCALES } from '../locale'; +import { INTL_DATE_PIPE_DEFAULT_OPTIONS } from './intl-date-pipe-default-options'; +import { IntlPipeOptions } from '../intl-pipe-options'; -export type IntlDatePipeOptions = Partial & IntlPipeOptions; +export type IntlDatePipeOptions = Partial & + IntlPipeOptions; @Pipe({ name: 'intlDate', standalone: true, }) export class IntlDatePipe implements PipeTransform { - - constructor(@Optional() @Inject(INTL_LOCALES) readonly locale?: string | string[] | null, - @Optional() @Inject(INTL_DATE_PIPE_DEFAULT_OPTIONS) readonly defaultOptions?: Omit | null) { - } - - transform(value: string | number | Date | null | undefined, options?: IntlDatePipeOptions): string | null { + constructor( + @Optional() + @Inject(INTL_LOCALES) + readonly locale?: string | string[] | null, + @Optional() + @Inject(INTL_DATE_PIPE_DEFAULT_OPTIONS) + readonly defaultOptions?: Omit | null, + ) {} + + transform( + value: string | number | Date | null | undefined, + options?: IntlDatePipeOptions, + ): string | null { if (typeof value !== 'number' && !value) { return null; } @@ -25,14 +33,16 @@ export class IntlDatePipe implements PipeTransform { return null; } - const {locale, ...intlOptions} = options ?? {}; + const { locale, ...intlOptions } = options ?? {}; try { - return new Intl.DateTimeFormat(locale ?? this.locale ?? undefined, {...this.defaultOptions, ...intlOptions}).format(date); + return new Intl.DateTimeFormat(locale ?? this.locale ?? undefined, { + ...this.defaultOptions, + ...intlOptions, + }).format(date); } catch (e) { console.error('Error while transforming the date', e); return null; } } - } diff --git a/projects/angular-ecmascript-intl/src/lib/decimal/intl-decimal-pipe-default-options.ts b/projects/angular-ecmascript-intl/src/lib/decimal/intl-decimal-pipe-default-options.ts index fbff54f8..e8421e08 100644 --- a/projects/angular-ecmascript-intl/src/lib/decimal/intl-decimal-pipe-default-options.ts +++ b/projects/angular-ecmascript-intl/src/lib/decimal/intl-decimal-pipe-default-options.ts @@ -1,4 +1,6 @@ -import {InjectionToken} from "@angular/core"; -import {IntlDecimalPipeOptions} from "./intl-decimal.pipe"; +import { InjectionToken } from '@angular/core'; +import { IntlDecimalPipeOptions } from './intl-decimal.pipe'; -export const INTL_DECIMAL_PIPE_DEFAULT_OPTIONS = new InjectionToken>('IntlDecimalPipeDefaultOptions'); +export const INTL_DECIMAL_PIPE_DEFAULT_OPTIONS = new InjectionToken< + Omit +>('IntlDecimalPipeDefaultOptions'); diff --git a/projects/angular-ecmascript-intl/src/lib/decimal/intl-decimal.pipe.spec.ts b/projects/angular-ecmascript-intl/src/lib/decimal/intl-decimal.pipe.spec.ts index f0695311..992b3505 100644 --- a/projects/angular-ecmascript-intl/src/lib/decimal/intl-decimal.pipe.spec.ts +++ b/projects/angular-ecmascript-intl/src/lib/decimal/intl-decimal.pipe.spec.ts @@ -1,7 +1,7 @@ -import {IntlDecimalPipe} from './intl-decimal.pipe'; -import {TestBed} from "@angular/core/testing"; -import {INTL_LOCALES} from "../locale"; -import {INTL_DECIMAL_PIPE_DEFAULT_OPTIONS} from "./intl-decimal-pipe-default-options"; +import { IntlDecimalPipe } from './intl-decimal.pipe'; +import { TestBed } from '@angular/core/testing'; +import { INTL_LOCALES } from '../locale'; +import { INTL_DECIMAL_PIPE_DEFAULT_OPTIONS } from './intl-decimal-pipe-default-options'; describe('IntlDecimalPipe', () => { let testUnit: IntlDecimalPipe; @@ -66,10 +66,12 @@ describe('IntlDecimalPipe', () => { }); it('should fall back to the browser default locale', () => { - TestBed.configureTestingModule({providers: [IntlDecimalPipe]}); + TestBed.configureTestingModule({ providers: [IntlDecimalPipe] }); const result1 = TestBed.inject(IntlDecimalPipe).transform(1024.2249); - const result2 = new IntlDecimalPipe(navigator.language).transform(1024.2249); + const result2 = new IntlDecimalPipe(navigator.language).transform( + 1024.2249, + ); expect(result1).toEqual(result2); }); @@ -95,7 +97,6 @@ describe('IntlDecimalPipe', () => { testUnit = TestBed.inject(IntlDecimalPipe); expect(testUnit.transform(1)).toEqual('+1'); - }); it('should give the user options a higher priority', () => { @@ -116,7 +117,7 @@ describe('IntlDecimalPipe', () => { }); testUnit = TestBed.inject(IntlDecimalPipe); - expect(testUnit.transform(1, {signDisplay: 'never'})).toEqual('1'); + expect(testUnit.transform(1, { signDisplay: 'never' })).toEqual('1'); }); }); @@ -132,7 +133,7 @@ describe('IntlDecimalPipe', () => { }); testUnit = TestBed.inject(IntlDecimalPipe); - expect(testUnit.transform(1024, {locale: 'de-DE'})).toEqual('1.024'); + expect(testUnit.transform(1024, { locale: 'de-DE' })).toEqual('1.024'); }); it('should not override the style option', () => { @@ -153,6 +154,6 @@ describe('IntlDecimalPipe', () => { }); testUnit = TestBed.inject(IntlDecimalPipe); - expect(testUnit.transform(1, {style: 'percent'})).toEqual('1'); + expect(testUnit.transform(1, { style: 'percent' })).toEqual('1'); }); }); diff --git a/projects/angular-ecmascript-intl/src/lib/decimal/intl-decimal.pipe.ts b/projects/angular-ecmascript-intl/src/lib/decimal/intl-decimal.pipe.ts index 84731b11..58748d4b 100644 --- a/projects/angular-ecmascript-intl/src/lib/decimal/intl-decimal.pipe.ts +++ b/projects/angular-ecmascript-intl/src/lib/decimal/intl-decimal.pipe.ts @@ -1,40 +1,56 @@ -import {Inject, Optional, Pipe, PipeTransform} from '@angular/core'; -import {IntlPipeOptions} from "../intl-pipe-options"; -import {INTL_LOCALES} from "../locale"; -import {INTL_DECIMAL_PIPE_DEFAULT_OPTIONS} from "./intl-decimal-pipe-default-options"; -import {getNumericValue} from "../utils/number-utils"; - -type OmitOptions = 'unit' | 'unitDisplay' | 'currency' | 'currencyDisplay' | 'currencySign'; -export type IntlDecimalPipeOptions = Omit, OmitOptions> & IntlPipeOptions; +import { Inject, Optional, Pipe, PipeTransform } from '@angular/core'; +import { IntlPipeOptions } from '../intl-pipe-options'; +import { INTL_LOCALES } from '../locale'; +import { INTL_DECIMAL_PIPE_DEFAULT_OPTIONS } from './intl-decimal-pipe-default-options'; +import { getNumericValue } from '../utils/number-utils'; + +type OmitOptions = + | 'unit' + | 'unitDisplay' + | 'currency' + | 'currencyDisplay' + | 'currencySign'; +export type IntlDecimalPipeOptions = Omit< + Partial, + OmitOptions +> & + IntlPipeOptions; @Pipe({ name: 'intlDecimal', standalone: true, }) export class IntlDecimalPipe implements PipeTransform { - - constructor(@Optional() @Inject(INTL_LOCALES) readonly locale?: string | string[] | null, - @Optional() @Inject(INTL_DECIMAL_PIPE_DEFAULT_OPTIONS) readonly defaultOptions?: Omit | null) { - } - - transform(value: number | string | null | undefined, options?: IntlDecimalPipeOptions): string | null { + constructor( + @Optional() + @Inject(INTL_LOCALES) + readonly locale?: string | string[] | null, + @Optional() + @Inject(INTL_DECIMAL_PIPE_DEFAULT_OPTIONS) + readonly defaultOptions?: Omit | null, + ) {} + + transform( + value: number | string | null | undefined, + options?: IntlDecimalPipeOptions, + ): string | null { if (typeof value !== 'number' && !value) { return null; } const numericValue = getNumericValue(value); - const {locale, ...intlOptions} = options ?? {}; + const { locale, ...intlOptions } = options ?? {}; try { - return new Intl.NumberFormat( - locale ?? this.locale ?? undefined, - {...this.defaultOptions, ...intlOptions, style: 'decimal'}, - ).format(numericValue); + return new Intl.NumberFormat(locale ?? this.locale ?? undefined, { + ...this.defaultOptions, + ...intlOptions, + style: 'decimal', + }).format(numericValue); } catch (e) { console.error('Error while transforming the decimal number', e); return null; } } - } diff --git a/projects/angular-ecmascript-intl/src/lib/intl.module.ts b/projects/angular-ecmascript-intl/src/lib/intl.module.ts index 237223e1..d8c9e546 100644 --- a/projects/angular-ecmascript-intl/src/lib/intl.module.ts +++ b/projects/angular-ecmascript-intl/src/lib/intl.module.ts @@ -1,13 +1,13 @@ -import {NgModule} from '@angular/core'; -import {IntlDatePipe} from "./date/intl-date.pipe"; -import {IntlLanguagePipe} from './language/intl-language.pipe'; -import {IntlDecimalPipe} from "./decimal/intl-decimal.pipe"; -import {IntlPercentPipe} from "./percent/intl-percent.pipe"; -import {IntlCurrencyPipe} from "./currency/intl-currency.pipe"; -import {IntlCountryPipe} from "./country/intl-country.pipe"; -import {IntlUnitPipe} from "./unit/intl-unit.pipe"; -import {IntlListPipe} from "./list/intl-list.pipe"; -import {IntlRelativeTimePipe} from "./relative-time/relative-time.pipe"; +import { NgModule } from '@angular/core'; +import { IntlDatePipe } from './date/intl-date.pipe'; +import { IntlLanguagePipe } from './language/intl-language.pipe'; +import { IntlDecimalPipe } from './decimal/intl-decimal.pipe'; +import { IntlPercentPipe } from './percent/intl-percent.pipe'; +import { IntlCurrencyPipe } from './currency/intl-currency.pipe'; +import { IntlCountryPipe } from './country/intl-country.pipe'; +import { IntlUnitPipe } from './unit/intl-unit.pipe'; +import { IntlListPipe } from './list/intl-list.pipe'; +import { IntlRelativeTimePipe } from './relative-time/relative-time.pipe'; @NgModule({ imports: [ @@ -33,5 +33,4 @@ import {IntlRelativeTimePipe} from "./relative-time/relative-time.pipe"; IntlRelativeTimePipe, ], }) -export class IntlModule { -} +export class IntlModule {} diff --git a/projects/angular-ecmascript-intl/src/lib/language/intl-language-pipe-default-options.ts b/projects/angular-ecmascript-intl/src/lib/language/intl-language-pipe-default-options.ts index f2d99030..dec3adab 100644 --- a/projects/angular-ecmascript-intl/src/lib/language/intl-language-pipe-default-options.ts +++ b/projects/angular-ecmascript-intl/src/lib/language/intl-language-pipe-default-options.ts @@ -1,4 +1,6 @@ -import {InjectionToken} from "@angular/core"; -import {IntlLanguagePipeOptions} from "./intl-language.pipe"; +import { InjectionToken } from '@angular/core'; +import { IntlLanguagePipeOptions } from './intl-language.pipe'; -export const INTL_LANGUAGE_PIPE_DEFAULT_OPTIONS = new InjectionToken>('IntlLanguagePipeDefaultOptions'); +export const INTL_LANGUAGE_PIPE_DEFAULT_OPTIONS = new InjectionToken< + Omit +>('IntlLanguagePipeDefaultOptions'); diff --git a/projects/angular-ecmascript-intl/src/lib/language/intl-language.pipe.spec.ts b/projects/angular-ecmascript-intl/src/lib/language/intl-language.pipe.spec.ts index 6c8e925e..29980fdb 100644 --- a/projects/angular-ecmascript-intl/src/lib/language/intl-language.pipe.spec.ts +++ b/projects/angular-ecmascript-intl/src/lib/language/intl-language.pipe.spec.ts @@ -1,7 +1,7 @@ -import {IntlLanguagePipe} from './intl-language.pipe'; -import {TestBed} from "@angular/core/testing"; -import {INTL_LOCALES} from "../locale"; -import {INTL_LANGUAGE_PIPE_DEFAULT_OPTIONS} from "./intl-language-pipe-default-options"; +import { IntlLanguagePipe } from './intl-language.pipe'; +import { TestBed } from '@angular/core/testing'; +import { INTL_LOCALES } from '../locale'; +import { INTL_LANGUAGE_PIPE_DEFAULT_OPTIONS } from './intl-language-pipe-default-options'; describe('IntlLanguagePipe', () => { let testUnit: IntlLanguagePipe; @@ -58,10 +58,12 @@ describe('IntlLanguagePipe', () => { }); it('should fall back to the browser default locale', () => { - TestBed.configureTestingModule({providers: [IntlLanguagePipe]}); + TestBed.configureTestingModule({ providers: [IntlLanguagePipe] }); const result1 = TestBed.inject(IntlLanguagePipe).transform('en-US'); - const result2 = new IntlLanguagePipe(navigator.language).transform('en-US'); + const result2 = new IntlLanguagePipe(navigator.language).transform( + 'en-US', + ); expect(result1).toEqual(result2); }); @@ -87,7 +89,6 @@ describe('IntlLanguagePipe', () => { testUnit = TestBed.inject(IntlLanguagePipe); expect(testUnit.transform('de-AT')).toEqual('Deutsch (Österreich)'); - }); it('should give the user options a higher priority', () => { @@ -108,7 +109,9 @@ describe('IntlLanguagePipe', () => { }); testUnit = TestBed.inject(IntlLanguagePipe); - expect(testUnit.transform('de-AT', {languageDisplay: 'standard'})).toEqual('Deutsch (Österreich)'); + expect( + testUnit.transform('de-AT', { languageDisplay: 'standard' }), + ).toEqual('Deutsch (Österreich)'); }); it('should not override the type option', () => { @@ -129,7 +132,7 @@ describe('IntlLanguagePipe', () => { }); testUnit = TestBed.inject(IntlLanguagePipe); - expect(testUnit.transform('de', {type: 'region'})).toEqual('Deutsch'); + expect(testUnit.transform('de', { type: 'region' })).toEqual('Deutsch'); }); }); @@ -145,6 +148,8 @@ describe('IntlLanguagePipe', () => { }); testUnit = TestBed.inject(IntlLanguagePipe); - expect(testUnit.transform('en-US', {locale: 'de-DE'})).toEqual('Englisch (Vereinigte Staaten)'); + expect(testUnit.transform('en-US', { locale: 'de-DE' })).toEqual( + 'Englisch (Vereinigte Staaten)', + ); }); }); diff --git a/projects/angular-ecmascript-intl/src/lib/language/intl-language.pipe.ts b/projects/angular-ecmascript-intl/src/lib/language/intl-language.pipe.ts index e2fdf9b0..3ad88f8e 100644 --- a/projects/angular-ecmascript-intl/src/lib/language/intl-language.pipe.ts +++ b/projects/angular-ecmascript-intl/src/lib/language/intl-language.pipe.ts @@ -1,36 +1,46 @@ -import {Inject, Optional, Pipe, PipeTransform} from '@angular/core'; -import {INTL_LOCALES} from "../locale"; -import {INTL_LANGUAGE_PIPE_DEFAULT_OPTIONS} from "./intl-language-pipe-default-options"; -import {IntlPipeOptions} from "../intl-pipe-options"; +import { Inject, Optional, Pipe, PipeTransform } from '@angular/core'; +import { INTL_LOCALES } from '../locale'; +import { INTL_LANGUAGE_PIPE_DEFAULT_OPTIONS } from './intl-language-pipe-default-options'; +import { IntlPipeOptions } from '../intl-pipe-options'; -export type IntlLanguagePipeOptions = Partial & IntlPipeOptions; +export type IntlLanguagePipeOptions = Partial & + IntlPipeOptions; @Pipe({ name: 'intlLanguage', standalone: true, }) export class IntlLanguagePipe implements PipeTransform { + constructor( + @Optional() + @Inject(INTL_LOCALES) + readonly locale?: string | string[] | null, + @Optional() + @Inject(INTL_LANGUAGE_PIPE_DEFAULT_OPTIONS) + readonly defaultOptions?: Omit | null, + ) {} - constructor(@Optional() @Inject(INTL_LOCALES) readonly locale?: string | string[] | null, - @Optional() @Inject(INTL_LANGUAGE_PIPE_DEFAULT_OPTIONS) readonly defaultOptions?: Omit | null) { - } - - transform(value: string | null | undefined, options?: IntlLanguagePipeOptions): string | null { + transform( + value: string | null | undefined, + options?: IntlLanguagePipeOptions, + ): string | null { if (!value) { return null; } - const {locale, ...intlOptions} = options ?? {}; + const { locale, ...intlOptions } = options ?? {}; try { - return new Intl.DisplayNames(locale ?? this.locale ?? undefined, { - ...this.defaultOptions, ...intlOptions, - type: 'language', - }).of(value) ?? null; + return ( + new Intl.DisplayNames(locale ?? this.locale ?? undefined, { + ...this.defaultOptions, + ...intlOptions, + type: 'language', + }).of(value) ?? null + ); } catch (e) { console.error('Error while transforming the language', e); return null; } } - } diff --git a/projects/angular-ecmascript-intl/src/lib/list/intl-list-pipe-default-options.ts b/projects/angular-ecmascript-intl/src/lib/list/intl-list-pipe-default-options.ts index f6b7ad58..0223d2df 100644 --- a/projects/angular-ecmascript-intl/src/lib/list/intl-list-pipe-default-options.ts +++ b/projects/angular-ecmascript-intl/src/lib/list/intl-list-pipe-default-options.ts @@ -1,4 +1,6 @@ -import {InjectionToken} from "@angular/core"; -import {IntlListPipeOptions} from "./intl-list.pipe"; +import { InjectionToken } from '@angular/core'; +import { IntlListPipeOptions } from './intl-list.pipe'; -export const INTL_LIST_PIPE_DEFAULT_OPTIONS = new InjectionToken>('IntlListPipeDefaultOptions'); +export const INTL_LIST_PIPE_DEFAULT_OPTIONS = new InjectionToken< + Omit +>('IntlListPipeDefaultOptions'); diff --git a/projects/angular-ecmascript-intl/src/lib/list/intl-list.pipe.spec.ts b/projects/angular-ecmascript-intl/src/lib/list/intl-list.pipe.spec.ts index 3c904da8..f9c0a46c 100644 --- a/projects/angular-ecmascript-intl/src/lib/list/intl-list.pipe.spec.ts +++ b/projects/angular-ecmascript-intl/src/lib/list/intl-list.pipe.spec.ts @@ -1,6 +1,6 @@ -import {IntlListPipe} from './intl-list.pipe'; -import {TestBed} from "@angular/core/testing"; -import {INTL_LOCALES} from "../locale"; +import { IntlListPipe } from './intl-list.pipe'; +import { TestBed } from '@angular/core/testing'; +import { INTL_LOCALES } from '../locale'; describe('IntlListPipe', () => { let testUnit: IntlListPipe; @@ -53,14 +53,19 @@ describe('IntlListPipe', () => { }); testUnit = TestBed.inject(IntlListPipe); - expect(testUnit.transform(['Äpfel', 'Birnen'])).toEqual('Äpfel und Birnen'); + expect(testUnit.transform(['Äpfel', 'Birnen'])).toEqual( + 'Äpfel und Birnen', + ); }); it('should fall back to the browser default locale', () => { - TestBed.configureTestingModule({providers: [IntlListPipe]}); + TestBed.configureTestingModule({ providers: [IntlListPipe] }); const result1 = TestBed.inject(IntlListPipe).transform(['some', 'val']); - const result2 = new IntlListPipe(navigator.language).transform(['some', 'val']); + const result2 = new IntlListPipe(navigator.language).transform([ + 'some', + 'val', + ]); expect(result1).toEqual(result2); }); @@ -78,6 +83,8 @@ describe('IntlListPipe', () => { }); testUnit = TestBed.inject(IntlListPipe); - expect(testUnit.transform(['Äpfel', 'Birnen'], {locale: 'de-DE'})).toEqual('Äpfel und Birnen'); + expect( + testUnit.transform(['Äpfel', 'Birnen'], { locale: 'de-DE' }), + ).toEqual('Äpfel und Birnen'); }); }); diff --git a/projects/angular-ecmascript-intl/src/lib/list/intl-list.pipe.ts b/projects/angular-ecmascript-intl/src/lib/list/intl-list.pipe.ts index 83ed957a..57476969 100644 --- a/projects/angular-ecmascript-intl/src/lib/list/intl-list.pipe.ts +++ b/projects/angular-ecmascript-intl/src/lib/list/intl-list.pipe.ts @@ -1,35 +1,43 @@ -import {Inject, Optional, Pipe, PipeTransform} from '@angular/core'; -import {INTL_LOCALES} from "../locale"; -import {INTL_LIST_PIPE_DEFAULT_OPTIONS} from "./intl-list-pipe-default-options"; -import {IntlPipeOptions} from "../intl-pipe-options"; +import { Inject, Optional, Pipe, PipeTransform } from '@angular/core'; +import { INTL_LOCALES } from '../locale'; +import { INTL_LIST_PIPE_DEFAULT_OPTIONS } from './intl-list-pipe-default-options'; +import { IntlPipeOptions } from '../intl-pipe-options'; -export type IntlListPipeOptions = Partial & IntlPipeOptions; +export type IntlListPipeOptions = Partial & + IntlPipeOptions; @Pipe({ name: 'intlList', standalone: true, }) export class IntlListPipe implements PipeTransform { + constructor( + @Optional() + @Inject(INTL_LOCALES) + readonly locale?: string | string[] | null, + @Optional() + @Inject(INTL_LIST_PIPE_DEFAULT_OPTIONS) + readonly defaultOptions?: Omit | null, + ) {} - constructor(@Optional() @Inject(INTL_LOCALES) readonly locale?: string | string[] | null, - @Optional() @Inject(INTL_LIST_PIPE_DEFAULT_OPTIONS) readonly defaultOptions?: Omit | null) { - } - - transform(value: Iterable | null | undefined, options?: IntlListPipeOptions): string | null { + transform( + value: Iterable | null | undefined, + options?: IntlListPipeOptions, + ): string | null { if (!value) { return null; } - const {locale, ...intlOptions} = options ?? {}; + const { locale, ...intlOptions } = options ?? {}; try { return new Intl.ListFormat(locale ?? this.locale ?? undefined, { - ...this.defaultOptions, ...intlOptions, + ...this.defaultOptions, + ...intlOptions, }).format(value); } catch (e) { console.error('Error while transforming the list', e); return null; } } - } diff --git a/projects/angular-ecmascript-intl/src/lib/locale.ts b/projects/angular-ecmascript-intl/src/lib/locale.ts index c172ad09..9970a50c 100644 --- a/projects/angular-ecmascript-intl/src/lib/locale.ts +++ b/projects/angular-ecmascript-intl/src/lib/locale.ts @@ -1,7 +1,9 @@ -import {InjectionToken} from "@angular/core"; +import { InjectionToken } from '@angular/core'; /** * Set the locale(s) for all Intl Pipes. If not specified, the user language specified in the browser will be used. If * specified, it needs to be a string with a BCP 47 language tag, or an array of such strings. */ -export const INTL_LOCALES = new InjectionToken('IntlLocales'); +export const INTL_LOCALES = new InjectionToken( + 'IntlLocales', +); diff --git a/projects/angular-ecmascript-intl/src/lib/percent/intl-percent-pipe-default-options.ts b/projects/angular-ecmascript-intl/src/lib/percent/intl-percent-pipe-default-options.ts index 34333acf..1ebc0f1c 100644 --- a/projects/angular-ecmascript-intl/src/lib/percent/intl-percent-pipe-default-options.ts +++ b/projects/angular-ecmascript-intl/src/lib/percent/intl-percent-pipe-default-options.ts @@ -1,4 +1,6 @@ -import {InjectionToken} from "@angular/core"; -import {IntlPercentPipeOptions} from "./intl-percent.pipe"; +import { InjectionToken } from '@angular/core'; +import { IntlPercentPipeOptions } from './intl-percent.pipe'; -export const INTL_PERCENT_PIPE_DEFAULT_OPTIONS = new InjectionToken>('IntlPercentPipeDefaultOptions'); +export const INTL_PERCENT_PIPE_DEFAULT_OPTIONS = new InjectionToken< + Omit +>('IntlPercentPipeDefaultOptions'); diff --git a/projects/angular-ecmascript-intl/src/lib/percent/intl-percent.pipe.spec.ts b/projects/angular-ecmascript-intl/src/lib/percent/intl-percent.pipe.spec.ts index e150851a..51bc6707 100644 --- a/projects/angular-ecmascript-intl/src/lib/percent/intl-percent.pipe.spec.ts +++ b/projects/angular-ecmascript-intl/src/lib/percent/intl-percent.pipe.spec.ts @@ -1,7 +1,7 @@ -import {IntlPercentPipe} from './intl-percent.pipe'; -import {TestBed} from "@angular/core/testing"; -import {INTL_LOCALES} from "../locale"; -import {INTL_PERCENT_PIPE_DEFAULT_OPTIONS} from "./intl-percent-pipe-default-options"; +import { IntlPercentPipe } from './intl-percent.pipe'; +import { TestBed } from '@angular/core/testing'; +import { INTL_LOCALES } from '../locale'; +import { INTL_PERCENT_PIPE_DEFAULT_OPTIONS } from './intl-percent-pipe-default-options'; describe('IntlPercentPipe', () => { let testUnit: IntlPercentPipe; @@ -66,7 +66,7 @@ describe('IntlPercentPipe', () => { }); it('should fall back to the browser default locale', () => { - TestBed.configureTestingModule({providers: [IntlPercentPipe]}); + TestBed.configureTestingModule({ providers: [IntlPercentPipe] }); const result1 = TestBed.inject(IntlPercentPipe).transform(0.1); const result2 = new IntlPercentPipe(navigator.language).transform(0.1); @@ -95,7 +95,6 @@ describe('IntlPercentPipe', () => { testUnit = TestBed.inject(IntlPercentPipe); expect(testUnit.transform(1)).toEqual('+100%'); - }); it('should give the user options a higher priority', () => { @@ -116,7 +115,7 @@ describe('IntlPercentPipe', () => { }); testUnit = TestBed.inject(IntlPercentPipe); - expect(testUnit.transform(1, {signDisplay: 'never'})).toEqual('100%'); + expect(testUnit.transform(1, { signDisplay: 'never' })).toEqual('100%'); }); }); @@ -132,7 +131,7 @@ describe('IntlPercentPipe', () => { }); testUnit = TestBed.inject(IntlPercentPipe); - expect(testUnit.transform(1, {locale: 'de-DE'})).toEqual('100\xa0%'); + expect(testUnit.transform(1, { locale: 'de-DE' })).toEqual('100\xa0%'); }); it('should not override the style option', () => { @@ -153,6 +152,6 @@ describe('IntlPercentPipe', () => { }); testUnit = TestBed.inject(IntlPercentPipe); - expect(testUnit.transform(1, {style: 'decimal'})).toEqual('100%'); + expect(testUnit.transform(1, { style: 'decimal' })).toEqual('100%'); }); }); diff --git a/projects/angular-ecmascript-intl/src/lib/percent/intl-percent.pipe.ts b/projects/angular-ecmascript-intl/src/lib/percent/intl-percent.pipe.ts index f27de62b..fb669e30 100644 --- a/projects/angular-ecmascript-intl/src/lib/percent/intl-percent.pipe.ts +++ b/projects/angular-ecmascript-intl/src/lib/percent/intl-percent.pipe.ts @@ -1,40 +1,56 @@ -import {Inject, Optional, Pipe, PipeTransform} from '@angular/core'; -import {IntlPipeOptions} from "../intl-pipe-options"; -import {INTL_LOCALES} from "../locale"; -import {getNumericValue} from "../utils/number-utils"; -import {INTL_PERCENT_PIPE_DEFAULT_OPTIONS} from "./intl-percent-pipe-default-options"; - -type OmitOptions = 'unit' | 'unitDisplay' | 'currency' | 'currencyDisplay' | 'currencySign'; -export type IntlPercentPipeOptions = Omit, OmitOptions> & IntlPipeOptions; +import { Inject, Optional, Pipe, PipeTransform } from '@angular/core'; +import { IntlPipeOptions } from '../intl-pipe-options'; +import { INTL_LOCALES } from '../locale'; +import { getNumericValue } from '../utils/number-utils'; +import { INTL_PERCENT_PIPE_DEFAULT_OPTIONS } from './intl-percent-pipe-default-options'; + +type OmitOptions = + | 'unit' + | 'unitDisplay' + | 'currency' + | 'currencyDisplay' + | 'currencySign'; +export type IntlPercentPipeOptions = Omit< + Partial, + OmitOptions +> & + IntlPipeOptions; @Pipe({ name: 'intlPercent', standalone: true, }) export class IntlPercentPipe implements PipeTransform { - - constructor(@Optional() @Inject(INTL_LOCALES) readonly locale?: string | string[] | null, - @Optional() @Inject(INTL_PERCENT_PIPE_DEFAULT_OPTIONS) readonly defaultOptions?: Omit | null) { - } - - transform(value: number | string | null | undefined, options?: IntlPercentPipeOptions): string | null { + constructor( + @Optional() + @Inject(INTL_LOCALES) + readonly locale?: string | string[] | null, + @Optional() + @Inject(INTL_PERCENT_PIPE_DEFAULT_OPTIONS) + readonly defaultOptions?: Omit | null, + ) {} + + transform( + value: number | string | null | undefined, + options?: IntlPercentPipeOptions, + ): string | null { if (typeof value !== 'number' && !value) { return null; } const numericValue = getNumericValue(value); - const {locale, ...intlOptions} = options ?? {}; + const { locale, ...intlOptions } = options ?? {}; try { - return new Intl.NumberFormat( - locale ?? this.locale ?? undefined, - {...this.defaultOptions, ...intlOptions, style: 'percent'}, - ).format(numericValue); + return new Intl.NumberFormat(locale ?? this.locale ?? undefined, { + ...this.defaultOptions, + ...intlOptions, + style: 'percent', + }).format(numericValue); } catch (e) { console.error('Error while transforming the percent value', e); return null; } } - } diff --git a/projects/angular-ecmascript-intl/src/lib/relative-time/relative-time-pipe-default-options.ts b/projects/angular-ecmascript-intl/src/lib/relative-time/relative-time-pipe-default-options.ts index f38e55de..f7d43654 100644 --- a/projects/angular-ecmascript-intl/src/lib/relative-time/relative-time-pipe-default-options.ts +++ b/projects/angular-ecmascript-intl/src/lib/relative-time/relative-time-pipe-default-options.ts @@ -1,4 +1,6 @@ -import {InjectionToken} from "@angular/core"; -import {IntlRelativeTimePipeOptions} from "./relative-time.pipe"; +import { InjectionToken } from '@angular/core'; +import { IntlRelativeTimePipeOptions } from './relative-time.pipe'; -export const INTL_RELATIVE_TIME_PIPE_DEFAULT_OPTIONS = new InjectionToken>('IntlRelativeTimePipeDefaultOptions'); +export const INTL_RELATIVE_TIME_PIPE_DEFAULT_OPTIONS = new InjectionToken< + Omit +>('IntlRelativeTimePipeDefaultOptions'); diff --git a/projects/angular-ecmascript-intl/src/lib/relative-time/relative-time.pipe.spec.ts b/projects/angular-ecmascript-intl/src/lib/relative-time/relative-time.pipe.spec.ts index 9582a598..fcb979a2 100644 --- a/projects/angular-ecmascript-intl/src/lib/relative-time/relative-time.pipe.spec.ts +++ b/projects/angular-ecmascript-intl/src/lib/relative-time/relative-time.pipe.spec.ts @@ -1,9 +1,9 @@ -import {IntlRelativeTimePipe} from './relative-time.pipe'; -import * as dayjs from 'dayjs' -import {fakeAsync, TestBed, tick} from "@angular/core/testing"; -import {INTL_RELATIVE_TIME_PIPE_DEFAULT_OPTIONS} from "./relative-time-pipe-default-options"; -import {INTL_LOCALES} from "../locale"; -import {ChangeDetectorRef} from "@angular/core"; +import { IntlRelativeTimePipe } from './relative-time.pipe'; +import * as dayjs from 'dayjs'; +import { fakeAsync, TestBed, tick } from '@angular/core/testing'; +import { INTL_RELATIVE_TIME_PIPE_DEFAULT_OPTIONS } from './relative-time-pipe-default-options'; +import { INTL_LOCALES } from '../locale'; +import { ChangeDetectorRef } from '@angular/core'; describe('RelativeTimePipe', () => { let testUnit: IntlRelativeTimePipe; @@ -31,15 +31,21 @@ describe('RelativeTimePipe', () => { }); it('should throw an error when an invalid string is passed', () => { - expect(() => testUnit.transform('someInvalidDate')).toThrowError('someInvalidDate is not a valid date'); + expect(() => testUnit.transform('someInvalidDate')).toThrowError( + 'someInvalidDate is not a valid date', + ); }); it('should throw an error when an invalid date is passed', () => { - expect(() => testUnit.transform(new Date('invalid'))).toThrowError('Invalid Date is not a valid date'); + expect(() => testUnit.transform(new Date('invalid'))).toThrowError( + 'Invalid Date is not a valid date', + ); }); it('should support string value', () => { - expect(testUnit.transform(new Date().toISOString())).toEqual('in 0 minutes'); + expect(testUnit.transform(new Date().toISOString())).toEqual( + 'in 0 minutes', + ); }); it('should support number value', () => { @@ -58,7 +64,10 @@ describe('RelativeTimePipe', () => { }); it('should transform a date almost 3 years in future', () => { - const date = dayjs().add(365 * 3, 'days').subtract(1, 'second').toDate(); + const date = dayjs() + .add(365 * 3, 'days') + .subtract(1, 'second') + .toDate(); expect(testUnit.transform(date)).toEqual('in 2 years'); }); @@ -72,7 +81,10 @@ describe('RelativeTimePipe', () => { }); it('should transform a date almost 12 months in past', () => { - const date = dayjs().subtract(30 * 12, 'days').add(1, 'second').toDate(); + const date = dayjs() + .subtract(30 * 12, 'days') + .add(1, 'second') + .toDate(); expect(testUnit.transform(date)).toEqual('11 months ago'); }); @@ -148,7 +160,7 @@ describe('RelativeTimePipe', () => { IntlRelativeTimePipe, { provide: INTL_RELATIVE_TIME_PIPE_DEFAULT_OPTIONS, - useValue: {numeric: 'auto', style: 'short'}, + useValue: { numeric: 'auto', style: 'short' }, }, { provide: INTL_LOCALES, @@ -160,32 +172,40 @@ describe('RelativeTimePipe', () => { }); it('should respect the default options', () => { - expect(testUnit.transform(new Date())).toEqual('this minute') + expect(testUnit.transform(new Date())).toEqual('this minute'); }); it('should give the passed options a higher priority', () => { - expect(testUnit.transform(new Date(), {numeric: 'always'})).toEqual('in 0 min.'); + expect(testUnit.transform(new Date(), { numeric: 'always' })).toEqual( + 'in 0 min.', + ); }); it('should apply the locale from the passed options', () => { - expect(testUnit.transform(new Date(), {locale: 'de-DE'})).toEqual('in dieser Minute'); + expect(testUnit.transform(new Date(), { locale: 'de-DE' })).toEqual( + 'in dieser Minute', + ); }); }); it('should fall back to the default locale', () => { - TestBed.configureTestingModule({providers: [IntlRelativeTimePipe]}); + TestBed.configureTestingModule({ providers: [IntlRelativeTimePipe] }); const result1 = TestBed.inject(IntlRelativeTimePipe).transform(new Date()); - const result2 = new IntlRelativeTimePipe(navigator.language).transform(new Date()); + const result2 = new IntlRelativeTimePipe(navigator.language).transform( + new Date(), + ); expect(result1).toEqual(result2); }); describe('timer', () => { - const cdrMock = {markForCheck: jasmine.createSpy()} as unknown as ChangeDetectorRef; + const cdrMock = { + markForCheck: jasmine.createSpy(), + } as unknown as ChangeDetectorRef; beforeEach(() => { - testUnit = new IntlRelativeTimePipe(null, null, cdrMock) + testUnit = new IntlRelativeTimePipe(null, null, cdrMock); }); it('should mark for check once after 1 minute', fakeAsync(() => { diff --git a/projects/angular-ecmascript-intl/src/lib/relative-time/relative-time.pipe.ts b/projects/angular-ecmascript-intl/src/lib/relative-time/relative-time.pipe.ts index a925d920..5ee53cac 100644 --- a/projects/angular-ecmascript-intl/src/lib/relative-time/relative-time.pipe.ts +++ b/projects/angular-ecmascript-intl/src/lib/relative-time/relative-time.pipe.ts @@ -1,10 +1,18 @@ -import {ChangeDetectorRef, Inject, OnDestroy, Optional, Pipe, PipeTransform} from '@angular/core'; -import {INTL_LOCALES} from "../locale"; -import {IntlPipeOptions} from "../intl-pipe-options"; -import {INTL_RELATIVE_TIME_PIPE_DEFAULT_OPTIONS} from "./relative-time-pipe-default-options"; -import {interval, Subject, takeUntil} from "rxjs"; +import { + ChangeDetectorRef, + Inject, + OnDestroy, + Optional, + Pipe, + PipeTransform, +} from '@angular/core'; +import { INTL_LOCALES } from '../locale'; +import { IntlPipeOptions } from '../intl-pipe-options'; +import { INTL_RELATIVE_TIME_PIPE_DEFAULT_OPTIONS } from './relative-time-pipe-default-options'; +import { interval, Subject, takeUntil } from 'rxjs'; -export type IntlRelativeTimePipeOptions = Partial & IntlPipeOptions; +export type IntlRelativeTimePipeOptions = + Partial & IntlPipeOptions; enum Time { oneSecond = 1000, @@ -22,15 +30,25 @@ enum Time { pure: false, }) export class IntlRelativeTimePipe implements PipeTransform, OnDestroy { - #destroy$?: Subject; - constructor(@Optional() @Inject(INTL_LOCALES) readonly locales?: string | string[] | null, - @Optional() @Inject(INTL_RELATIVE_TIME_PIPE_DEFAULT_OPTIONS) readonly defaultOptions?: Omit | null, - @Optional() readonly cdr?: ChangeDetectorRef) { - } + constructor( + @Optional() + @Inject(INTL_LOCALES) + readonly locales?: string | string[] | null, + @Optional() + @Inject(INTL_RELATIVE_TIME_PIPE_DEFAULT_OPTIONS) + readonly defaultOptions?: Omit< + IntlRelativeTimePipeOptions, + 'locale' + > | null, + @Optional() readonly cdr?: ChangeDetectorRef, + ) {} - transform(value: string | number | Date | null | undefined, options?: IntlRelativeTimePipeOptions): string | null { + transform( + value: string | number | Date | null | undefined, + options?: IntlRelativeTimePipeOptions, + ): string | null { if (typeof value !== 'number' && !value) { return null; } @@ -48,24 +66,42 @@ export class IntlRelativeTimePipe implements PipeTransform, OnDestroy { const relativeTimeFormat = new Intl.RelativeTimeFormat( options?.locale ?? this.locales ?? undefined, - {...this.defaultOptions, ...options}, + { ...this.defaultOptions, ...options }, ); const currentTime = new Date().getTime(); const factor = time < currentTime ? -1 : 1; const diff = Math.abs(time - currentTime); if (diff > (Time.oneYear as number)) { - return relativeTimeFormat.format(factor * Math.floor(diff / Time.oneYear), 'year'); + return relativeTimeFormat.format( + factor * Math.floor(diff / Time.oneYear), + 'year', + ); } else if (diff > (Time.oneMonth as number)) { - return relativeTimeFormat.format(factor * Math.floor(diff / Time.oneMonth), 'month'); + return relativeTimeFormat.format( + factor * Math.floor(diff / Time.oneMonth), + 'month', + ); } else if (diff > (Time.oneWeek as number)) { - return relativeTimeFormat.format(factor * Math.floor(diff / Time.oneWeek), 'week'); + return relativeTimeFormat.format( + factor * Math.floor(diff / Time.oneWeek), + 'week', + ); } else if (diff > (Time.oneDay as number)) { - return relativeTimeFormat.format(factor * Math.floor(diff / Time.oneDay), 'day'); + return relativeTimeFormat.format( + factor * Math.floor(diff / Time.oneDay), + 'day', + ); } else if (diff > (Time.oneHour as number)) { - return relativeTimeFormat.format(factor * Math.floor(diff / Time.oneHour), 'hour'); + return relativeTimeFormat.format( + factor * Math.floor(diff / Time.oneHour), + 'hour', + ); } else if (diff > (Time.oneMinute as number)) { - return relativeTimeFormat.format(factor * Math.floor(diff / Time.oneMinute), 'minute'); + return relativeTimeFormat.format( + factor * Math.floor(diff / Time.oneMinute), + 'minute', + ); } else { return relativeTimeFormat.format(0, 'minute'); } diff --git a/projects/angular-ecmascript-intl/src/lib/unit/intl-unit-pipe-default-options.ts b/projects/angular-ecmascript-intl/src/lib/unit/intl-unit-pipe-default-options.ts index e3dafefa..ee0d34eb 100644 --- a/projects/angular-ecmascript-intl/src/lib/unit/intl-unit-pipe-default-options.ts +++ b/projects/angular-ecmascript-intl/src/lib/unit/intl-unit-pipe-default-options.ts @@ -1,4 +1,6 @@ -import {InjectionToken} from "@angular/core"; -import {IntlUnitPipeOptions} from "./intl-unit.pipe"; +import { InjectionToken } from '@angular/core'; +import { IntlUnitPipeOptions } from './intl-unit.pipe'; -export const INTL_UNIT_PIPE_DEFAULT_OPTIONS = new InjectionToken>('IntlUnitPipeDefaultOptions'); +export const INTL_UNIT_PIPE_DEFAULT_OPTIONS = new InjectionToken< + Omit +>('IntlUnitPipeDefaultOptions'); diff --git a/projects/angular-ecmascript-intl/src/lib/unit/intl-unit.pipe.spec.ts b/projects/angular-ecmascript-intl/src/lib/unit/intl-unit.pipe.spec.ts index a45cffa0..0c06992f 100644 --- a/projects/angular-ecmascript-intl/src/lib/unit/intl-unit.pipe.spec.ts +++ b/projects/angular-ecmascript-intl/src/lib/unit/intl-unit.pipe.spec.ts @@ -1,7 +1,7 @@ -import {IntlUnitPipe} from './intl-unit.pipe'; -import {TestBed} from "@angular/core/testing"; -import {INTL_LOCALES} from "../locale"; -import {INTL_UNIT_PIPE_DEFAULT_OPTIONS} from "./intl-unit-pipe-default-options"; +import { IntlUnitPipe } from './intl-unit.pipe'; +import { TestBed } from '@angular/core/testing'; +import { INTL_LOCALES } from '../locale'; +import { INTL_UNIT_PIPE_DEFAULT_OPTIONS } from './intl-unit-pipe-default-options'; describe('IntlUnitPipe', () => { let testUnit: IntlUnitPipe; @@ -66,7 +66,7 @@ describe('IntlUnitPipe', () => { }); it('should fall back to the browser default locale', () => { - TestBed.configureTestingModule({providers: [IntlUnitPipe]}); + TestBed.configureTestingModule({ providers: [IntlUnitPipe] }); const result1 = TestBed.inject(IntlUnitPipe).transform(1, 'hour'); const result2 = new IntlUnitPipe(navigator.language).transform(1, 'hour'); @@ -95,7 +95,6 @@ describe('IntlUnitPipe', () => { testUnit = TestBed.inject(IntlUnitPipe); expect(testUnit.transform(1, 'liter')).toEqual('1L'); - }); it('should give the user options a higher priority', () => { @@ -116,7 +115,9 @@ describe('IntlUnitPipe', () => { }); testUnit = TestBed.inject(IntlUnitPipe); - expect(testUnit.transform(1, 'liter', {unitDisplay: 'narrow'})).toEqual('1L'); + expect(testUnit.transform(1, 'liter', { unitDisplay: 'narrow' })).toEqual( + '1L', + ); }); }); @@ -132,7 +133,9 @@ describe('IntlUnitPipe', () => { }); testUnit = TestBed.inject(IntlUnitPipe); - expect(testUnit.transform(1, 'hour', {locale: 'de-DE'})).toEqual('1 Std.'); + expect(testUnit.transform(1, 'hour', { locale: 'de-DE' })).toEqual( + '1 Std.', + ); }); it('should not override the style option', () => { @@ -153,6 +156,6 @@ describe('IntlUnitPipe', () => { }); testUnit = TestBed.inject(IntlUnitPipe); - expect(testUnit.transform(1, 'hour', {style: 'decimal'})).toEqual('1 hr'); + expect(testUnit.transform(1, 'hour', { style: 'decimal' })).toEqual('1 hr'); }); }); diff --git a/projects/angular-ecmascript-intl/src/lib/unit/intl-unit.pipe.ts b/projects/angular-ecmascript-intl/src/lib/unit/intl-unit.pipe.ts index bf93dab1..17a6338e 100644 --- a/projects/angular-ecmascript-intl/src/lib/unit/intl-unit.pipe.ts +++ b/projects/angular-ecmascript-intl/src/lib/unit/intl-unit.pipe.ts @@ -1,40 +1,53 @@ -import {Inject, Optional, Pipe, PipeTransform} from '@angular/core'; -import {IntlPipeOptions} from "../intl-pipe-options"; -import {INTL_LOCALES} from "../locale"; -import {getNumericValue} from "../utils/number-utils"; -import {INTL_UNIT_PIPE_DEFAULT_OPTIONS} from "./intl-unit-pipe-default-options"; +import { Inject, Optional, Pipe, PipeTransform } from '@angular/core'; +import { IntlPipeOptions } from '../intl-pipe-options'; +import { INTL_LOCALES } from '../locale'; +import { getNumericValue } from '../utils/number-utils'; +import { INTL_UNIT_PIPE_DEFAULT_OPTIONS } from './intl-unit-pipe-default-options'; type OmitOptions = 'unit' | 'currency' | 'currencyDisplay' | 'currencySign'; -export type IntlUnitPipeOptions = Omit, OmitOptions> & IntlPipeOptions; +export type IntlUnitPipeOptions = Omit< + Partial, + OmitOptions +> & + IntlPipeOptions; @Pipe({ name: 'intlUnit', standalone: true, }) export class IntlUnitPipe implements PipeTransform { - - constructor(@Optional() @Inject(INTL_LOCALES) readonly locale?: string | string[] | null, - @Optional() @Inject(INTL_UNIT_PIPE_DEFAULT_OPTIONS) readonly defaultOptions?: Omit | null) { - } - - transform(value: number | string | null | undefined, unit: string | undefined, options?: IntlUnitPipeOptions): string | null { + constructor( + @Optional() + @Inject(INTL_LOCALES) + readonly locale?: string | string[] | null, + @Optional() + @Inject(INTL_UNIT_PIPE_DEFAULT_OPTIONS) + readonly defaultOptions?: Omit | null, + ) {} + + transform( + value: number | string | null | undefined, + unit: string | undefined, + options?: IntlUnitPipeOptions, + ): string | null { if (typeof value !== 'number' && !value) { return null; } const numericValue = getNumericValue(value); - const {locale, ...intlOptions} = options ?? {}; + const { locale, ...intlOptions } = options ?? {}; try { - return new Intl.NumberFormat( - locale ?? this.locale ?? undefined, - {...this.defaultOptions, ...intlOptions, unit, style: 'unit'}, - ).format(numericValue); + return new Intl.NumberFormat(locale ?? this.locale ?? undefined, { + ...this.defaultOptions, + ...intlOptions, + unit, + style: 'unit', + }).format(numericValue); } catch (e) { console.error('Error while transforming the unit value', e); return null; } } - } diff --git a/projects/angular-ecmascript-intl/src/lib/utils/number-utils.ts b/projects/angular-ecmascript-intl/src/lib/utils/number-utils.ts index 5a35223b..dfe9e09a 100644 --- a/projects/angular-ecmascript-intl/src/lib/utils/number-utils.ts +++ b/projects/angular-ecmascript-intl/src/lib/utils/number-utils.ts @@ -8,4 +8,4 @@ export const getNumericValue = (value: string | number): number => { } return Number(value); -} +}; diff --git a/projects/angular-ecmascript-intl/tsconfig.lib.json b/projects/angular-ecmascript-intl/tsconfig.lib.json index 543fd474..e8e54452 100644 --- a/projects/angular-ecmascript-intl/tsconfig.lib.json +++ b/projects/angular-ecmascript-intl/tsconfig.lib.json @@ -8,7 +8,5 @@ "inlineSources": true, "types": [] }, - "exclude": [ - "**/*.spec.ts" - ] + "exclude": ["**/*.spec.ts"] } diff --git a/projects/angular-ecmascript-intl/tsconfig.spec.json b/projects/angular-ecmascript-intl/tsconfig.spec.json index ce7048bc..4b02ff17 100644 --- a/projects/angular-ecmascript-intl/tsconfig.spec.json +++ b/projects/angular-ecmascript-intl/tsconfig.spec.json @@ -3,12 +3,7 @@ "extends": "../../tsconfig.json", "compilerOptions": { "outDir": "../../out-tsc/spec", - "types": [ - "jasmine" - ] + "types": ["jasmine"] }, - "include": [ - "**/*.spec.ts", - "**/*.d.ts" - ] + "include": ["**/*.spec.ts", "**/*.d.ts"] } diff --git a/projects/angular-intl-demo/src/app/app-routing.module.ts b/projects/angular-intl-demo/src/app/app-routing.module.ts index c1eda701..0b765a8c 100644 --- a/projects/angular-intl-demo/src/app/app-routing.module.ts +++ b/projects/angular-intl-demo/src/app/app-routing.module.ts @@ -1,6 +1,6 @@ -import {NgModule} from '@angular/core'; -import {RouterModule, Routes} from '@angular/router'; -import {GettingStartedComponent} from "./getting-started/getting-started.component"; +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { GettingStartedComponent } from './getting-started/getting-started.component'; const routes: Routes = [ { @@ -9,7 +9,8 @@ const routes: Routes = [ }, { path: 'pipes', - loadChildren: () => import('./pipes/pipes.module').then(mod => mod.PipesModule), + loadChildren: () => + import('./pipes/pipes.module').then((mod) => mod.PipesModule), }, { path: '**', @@ -18,8 +19,7 @@ const routes: Routes = [ ]; @NgModule({ - imports: [RouterModule.forRoot(routes, {useHash: true})], + imports: [RouterModule.forRoot(routes, { useHash: true })], exports: [RouterModule], }) -export class AppRoutingModule { -} +export class AppRoutingModule {} diff --git a/projects/angular-intl-demo/src/app/app.component.html b/projects/angular-intl-demo/src/app/app.component.html index 0853d3dd..19d9d091 100644 --- a/projects/angular-intl-demo/src/app/app.component.html +++ b/projects/angular-intl-demo/src/app/app.component.html @@ -3,10 +3,19 @@ - - + + GitHub - + diff --git a/projects/angular-intl-demo/src/app/app.component.ts b/projects/angular-intl-demo/src/app/app.component.ts index 6155d992..ba8e2e0e 100644 --- a/projects/angular-intl-demo/src/app/app.component.ts +++ b/projects/angular-intl-demo/src/app/app.component.ts @@ -1,9 +1,8 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) -export class AppComponent { -} +export class AppComponent {} diff --git a/projects/angular-intl-demo/src/app/app.module.ts b/projects/angular-intl-demo/src/app/app.module.ts index 57102955..3f72e9cd 100644 --- a/projects/angular-intl-demo/src/app/app.module.ts +++ b/projects/angular-intl-demo/src/app/app.module.ts @@ -1,21 +1,18 @@ -import {NgModule} from '@angular/core'; -import {BrowserModule} from '@angular/platform-browser'; +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; -import {AppRoutingModule} from './app-routing.module'; -import {AppComponent} from './app.component'; -import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; -import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from "@angular/material/form-field"; -import {MarkdownModule} from "ngx-markdown"; -import {HttpClientModule} from "@angular/common/http"; -import {MatToolbarModule} from "@angular/material/toolbar"; -import {MatButtonModule} from "@angular/material/button"; -import {GettingStartedComponent} from './getting-started/getting-started.component'; +import { AppRoutingModule } from './app-routing.module'; +import { AppComponent } from './app.component'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field'; +import { MarkdownModule } from 'ngx-markdown'; +import { HttpClientModule } from '@angular/common/http'; +import { MatToolbarModule } from '@angular/material/toolbar'; +import { MatButtonModule } from '@angular/material/button'; +import { GettingStartedComponent } from './getting-started/getting-started.component'; @NgModule({ - declarations: [ - AppComponent, - GettingStartedComponent, - ], + declarations: [AppComponent, GettingStartedComponent], imports: [ BrowserModule, AppRoutingModule, @@ -35,5 +32,4 @@ import {GettingStartedComponent} from './getting-started/getting-started.compone ], bootstrap: [AppComponent], }) -export class AppModule { -} +export class AppModule {} diff --git a/projects/angular-intl-demo/src/app/getting-started/getting-started.component.html b/projects/angular-intl-demo/src/app/getting-started/getting-started.component.html index 56345c11..5b14fdf0 100644 --- a/projects/angular-intl-demo/src/app/getting-started/getting-started.component.html +++ b/projects/angular-intl-demo/src/app/getting-started/getting-started.component.html @@ -1 +1 @@ - + diff --git a/projects/angular-intl-demo/src/app/getting-started/getting-started.component.ts b/projects/angular-intl-demo/src/app/getting-started/getting-started.component.ts index bedff6a6..ad5d94a3 100644 --- a/projects/angular-intl-demo/src/app/getting-started/getting-started.component.ts +++ b/projects/angular-intl-demo/src/app/getting-started/getting-started.component.ts @@ -1,10 +1,8 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'app-getting-started', templateUrl: './getting-started.component.html', styleUrls: ['./getting-started.component.scss'], }) -export class GettingStartedComponent { - -} +export class GettingStartedComponent {} diff --git a/projects/angular-intl-demo/src/app/pipes/country/countries.ts b/projects/angular-intl-demo/src/app/pipes/country/countries.ts index 3fda4c3b..ec4f0e1d 100644 --- a/projects/angular-intl-demo/src/app/pipes/country/countries.ts +++ b/projects/angular-intl-demo/src/app/pipes/country/countries.ts @@ -1,11 +1 @@ -export const countries = [ - 'AT', - 'CA', - 'CH', - 'DE', - 'GB', - 'KR', - 'SE', - 'UA', - 'US', -]; +export const countries = ['AT', 'CA', 'CH', 'DE', 'GB', 'KR', 'SE', 'UA', 'US']; diff --git a/projects/angular-intl-demo/src/app/pipes/country/country.component.html b/projects/angular-intl-demo/src/app/pipes/country/country.component.html index 88790e93..b47c3352 100644 --- a/projects/angular-intl-demo/src/app/pipes/country/country.component.html +++ b/projects/angular-intl-demo/src/app/pipes/country/country.component.html @@ -2,7 +2,9 @@ Country to transform - {{country}} + {{ + country + }} @@ -10,9 +12,11 @@ Locale Browser default - {{language}} + {{ + language + }} -

{{selectedCountry | intlCountry: {locale} }}

+

{{ selectedCountry | intlCountry: { locale } }}

diff --git a/projects/angular-intl-demo/src/app/pipes/country/country.component.ts b/projects/angular-intl-demo/src/app/pipes/country/country.component.ts index 8ff3f846..f5b3f146 100644 --- a/projects/angular-intl-demo/src/app/pipes/country/country.component.ts +++ b/projects/angular-intl-demo/src/app/pipes/country/country.component.ts @@ -1,6 +1,6 @@ -import {Component} from '@angular/core'; -import {languages} from "../../languages"; -import {countries} from "./countries"; +import { Component } from '@angular/core'; +import { languages } from '../../languages'; +import { countries } from './countries'; @Component({ selector: 'app-country', diff --git a/projects/angular-intl-demo/src/app/pipes/currency/currencies.ts b/projects/angular-intl-demo/src/app/pipes/currency/currencies.ts index d088d066..7504008b 100644 --- a/projects/angular-intl-demo/src/app/pipes/currency/currencies.ts +++ b/projects/angular-intl-demo/src/app/pipes/currency/currencies.ts @@ -1 +1,182 @@ -export const currencies = ["USD", "EUR", "GBP", "CAD", "JPY", "AED", "AFN", "ALL", "AMD", "ANG", "AOA", "ARS", "AUD", "AWG", "AZN", "BAM", "BBD", "BDT", "BGN", "BHD", "BIF", "BMD", "BND", "BOB", "BOV", "BRL", "BSD", "BTN", "BWP", "BYN", "BZD", "CDF", "CHE", "CHF", "CHW", "CLF", "CLP", "CNY", "COP", "COU", "CRC", "CUC", "CUP", "CVE", "CZK", "DJF", "DKK", "DOP", "DZD", "EGP", "ERN", "ETB", "FJD", "FKP", "GEL", "GHS", "GIP", "GMD", "GNF", "GTQ", "GYD", "HKD", "HNL", "HTG", "HUF", "IDR", "ILS", "INR", "IQD", "IRR", "ISK", "JMD", "JOD", "KES", "KGS", "KHR", "KMF", "KPW", "KRW", "KWD", "KYD", "KZT", "LAK", "LBP", "LKR", "LRD", "LSL", "LYD", "MAD", "MDL", "MGA", "MKD", "MMK", "MNT", "MOP", "MRU", "MUR", "MVR", "MWK", "MXN", "MXV", "MYR", "MZN", "NAD", "NGN", "NIO", "NOK", "NPR", "NZD", "OMR", "PAB", "PEN", "PGK", "PHP", "PKR", "PLN", "PYG", "QAR", "RON", "RSD", "RUB", "RWF", "SAR", "SBD", "SCR", "SDG", "SEK", "SGD", "SHP", "SLE", "SLL", "SOS", "SRD", "SSP", "STN", "SVC", "SYP", "SZL", "THB", "TJS", "TMT", "TND", "TOP", "TRY", "TTD", "TWD", "TZS", "UAH", "UGX", "USN", "UYI", "UYU", "UYW", "UZS", "VED", "VES", "VND", "VUV", "WST", "XAF", "XAG", "XAU", "XBA", "XBB", "XBC", "XBD", "XCD", "XDR", "XOF", "XPD", "XPF", "XPT", "XSU", "XTS", "XUA", "XXX", "YER", "ZAR", "ZMW", "ZWL"]; +export const currencies = [ + 'USD', + 'EUR', + 'GBP', + 'CAD', + 'JPY', + 'AED', + 'AFN', + 'ALL', + 'AMD', + 'ANG', + 'AOA', + 'ARS', + 'AUD', + 'AWG', + 'AZN', + 'BAM', + 'BBD', + 'BDT', + 'BGN', + 'BHD', + 'BIF', + 'BMD', + 'BND', + 'BOB', + 'BOV', + 'BRL', + 'BSD', + 'BTN', + 'BWP', + 'BYN', + 'BZD', + 'CDF', + 'CHE', + 'CHF', + 'CHW', + 'CLF', + 'CLP', + 'CNY', + 'COP', + 'COU', + 'CRC', + 'CUC', + 'CUP', + 'CVE', + 'CZK', + 'DJF', + 'DKK', + 'DOP', + 'DZD', + 'EGP', + 'ERN', + 'ETB', + 'FJD', + 'FKP', + 'GEL', + 'GHS', + 'GIP', + 'GMD', + 'GNF', + 'GTQ', + 'GYD', + 'HKD', + 'HNL', + 'HTG', + 'HUF', + 'IDR', + 'ILS', + 'INR', + 'IQD', + 'IRR', + 'ISK', + 'JMD', + 'JOD', + 'KES', + 'KGS', + 'KHR', + 'KMF', + 'KPW', + 'KRW', + 'KWD', + 'KYD', + 'KZT', + 'LAK', + 'LBP', + 'LKR', + 'LRD', + 'LSL', + 'LYD', + 'MAD', + 'MDL', + 'MGA', + 'MKD', + 'MMK', + 'MNT', + 'MOP', + 'MRU', + 'MUR', + 'MVR', + 'MWK', + 'MXN', + 'MXV', + 'MYR', + 'MZN', + 'NAD', + 'NGN', + 'NIO', + 'NOK', + 'NPR', + 'NZD', + 'OMR', + 'PAB', + 'PEN', + 'PGK', + 'PHP', + 'PKR', + 'PLN', + 'PYG', + 'QAR', + 'RON', + 'RSD', + 'RUB', + 'RWF', + 'SAR', + 'SBD', + 'SCR', + 'SDG', + 'SEK', + 'SGD', + 'SHP', + 'SLE', + 'SLL', + 'SOS', + 'SRD', + 'SSP', + 'STN', + 'SVC', + 'SYP', + 'SZL', + 'THB', + 'TJS', + 'TMT', + 'TND', + 'TOP', + 'TRY', + 'TTD', + 'TWD', + 'TZS', + 'UAH', + 'UGX', + 'USN', + 'UYI', + 'UYU', + 'UYW', + 'UZS', + 'VED', + 'VES', + 'VND', + 'VUV', + 'WST', + 'XAF', + 'XAG', + 'XAU', + 'XBA', + 'XBB', + 'XBC', + 'XBD', + 'XCD', + 'XDR', + 'XOF', + 'XPD', + 'XPF', + 'XPT', + 'XSU', + 'XTS', + 'XUA', + 'XXX', + 'YER', + 'ZAR', + 'ZMW', + 'ZWL', +]; diff --git a/projects/angular-intl-demo/src/app/pipes/currency/currency.component.html b/projects/angular-intl-demo/src/app/pipes/currency/currency.component.html index 04eb5c34..520ab8cc 100644 --- a/projects/angular-intl-demo/src/app/pipes/currency/currency.component.html +++ b/projects/angular-intl-demo/src/app/pipes/currency/currency.component.html @@ -1,13 +1,15 @@
Number - + Currency - {{currency}} + {{ + currency + }} @@ -15,7 +17,9 @@ Locale Browser default - {{language}} + {{ + language + }} @@ -64,40 +68,81 @@ Minimum integer digits - + Please enter a number from 1 to 21 Minimum fraction digits - + Please enter a number from 0 to 20 Maximum fraction digits - + Please enter a number from 0 to 20 Minimum significant digits - + Please enter a number from 1 to 21 Maximum significant digits - + Please enter a number from 1 to 21
-

{{enteredNumber | intlCurrency: currency: { - locale, currencyDisplay, currencySign, notation, signDisplay, - minimumIntegerDigits: minimumIntegerDigits ?? undefined, - minimumFractionDigits: minimumFractionDigits ?? undefined, - maximumFractionDigits: maximumFractionDigits ?? undefined, - minimumSignificantDigits: minimumSignificantDigits ?? undefined, - maximumSignificantDigits: maximumSignificantDigits ?? undefined -} }}

+

+ {{ + enteredNumber + | intlCurrency + : currency + : { + locale, + currencyDisplay, + currencySign, + notation, + signDisplay, + minimumIntegerDigits: minimumIntegerDigits ?? undefined, + minimumFractionDigits: minimumFractionDigits ?? undefined, + maximumFractionDigits: maximumFractionDigits ?? undefined, + minimumSignificantDigits: minimumSignificantDigits ?? undefined, + maximumSignificantDigits: maximumSignificantDigits ?? undefined + } + }} +

diff --git a/projects/angular-intl-demo/src/app/pipes/currency/currency.component.ts b/projects/angular-intl-demo/src/app/pipes/currency/currency.component.ts index ed6b5791..444c516c 100644 --- a/projects/angular-intl-demo/src/app/pipes/currency/currency.component.ts +++ b/projects/angular-intl-demo/src/app/pipes/currency/currency.component.ts @@ -1,6 +1,6 @@ -import {Component} from '@angular/core'; -import {languages} from '../../languages'; -import {currencies} from "./currencies"; +import { Component } from '@angular/core'; +import { languages } from '../../languages'; +import { currencies } from './currencies'; @Component({ selector: 'app-currency', @@ -17,9 +17,19 @@ export class CurrencyComponent { signDisplay?: Intl.NumberFormatOptions['signDisplay']; currencyDisplay?: Intl.NumberFormatOptions['currencyDisplay']; currencySign?: Intl.NumberFormatOptions['currencySign']; - minimumIntegerDigits?: Intl.NumberFormatOptions['minimumIntegerDigits'] | null; - minimumFractionDigits?: Intl.NumberFormatOptions['minimumFractionDigits'] | null; - maximumFractionDigits?: Intl.NumberFormatOptions['maximumFractionDigits'] | null; - minimumSignificantDigits?: Intl.NumberFormatOptions['minimumSignificantDigits'] | null; - maximumSignificantDigits?: Intl.NumberFormatOptions['maximumSignificantDigits'] | null; + minimumIntegerDigits?: + | Intl.NumberFormatOptions['minimumIntegerDigits'] + | null; + minimumFractionDigits?: + | Intl.NumberFormatOptions['minimumFractionDigits'] + | null; + maximumFractionDigits?: + | Intl.NumberFormatOptions['maximumFractionDigits'] + | null; + minimumSignificantDigits?: + | Intl.NumberFormatOptions['minimumSignificantDigits'] + | null; + maximumSignificantDigits?: + | Intl.NumberFormatOptions['maximumSignificantDigits'] + | null; } diff --git a/projects/angular-intl-demo/src/app/pipes/date-utils.ts b/projects/angular-intl-demo/src/app/pipes/date-utils.ts index d8dbe46b..dd4651ec 100644 --- a/projects/angular-intl-demo/src/app/pipes/date-utils.ts +++ b/projects/angular-intl-demo/src/app/pipes/date-utils.ts @@ -1,4 +1,7 @@ export const getDateString = (date?: Date): string => { const newDate = date ? new Date(date) : new Date(); - return new Date(newDate.getTime() - newDate.getTimezoneOffset() * 60000).toISOString().slice(0, -1).split('.')[0]; + return new Date(newDate.getTime() - newDate.getTimezoneOffset() * 60000) + .toISOString() + .slice(0, -1) + .split('.')[0]; }; diff --git a/projects/angular-intl-demo/src/app/pipes/date/date.component.html b/projects/angular-intl-demo/src/app/pipes/date/date.component.html index 120e3ead..dfa082a8 100644 --- a/projects/angular-intl-demo/src/app/pipes/date/date.component.html +++ b/projects/angular-intl-demo/src/app/pipes/date/date.component.html @@ -1,7 +1,13 @@
Date - + @@ -11,7 +17,9 @@ Locale Browser default - {{language}} + {{ + language + }} @@ -47,4 +55,4 @@
-

{{selectedDate | intlDate: {dateStyle, timeStyle, hour12, locale} }}

+

{{ selectedDate | intlDate: { dateStyle, timeStyle, hour12, locale } }}

diff --git a/projects/angular-intl-demo/src/app/pipes/date/date.component.ts b/projects/angular-intl-demo/src/app/pipes/date/date.component.ts index 93116132..0681bf19 100644 --- a/projects/angular-intl-demo/src/app/pipes/date/date.component.ts +++ b/projects/angular-intl-demo/src/app/pipes/date/date.component.ts @@ -1,6 +1,6 @@ -import {Component} from '@angular/core'; -import {languages} from '../../languages'; -import {getDateString} from "../date-utils"; +import { Component } from '@angular/core'; +import { languages } from '../../languages'; +import { getDateString } from '../date-utils'; @Component({ selector: 'app-date', diff --git a/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.html b/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.html index d4f79e60..b6943238 100644 --- a/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.html +++ b/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.html @@ -1,14 +1,16 @@
Number - + Locale Browser default - {{language}} + {{ + language + }} @@ -37,40 +39,78 @@ Minimum integer digits - + Please enter a number from 1 to 21 Minimum fraction digits - + Please enter a number from 0 to 20 Maximum fraction digits - + Please enter a number from 0 to 20 Minimum significant digits - + Please enter a number from 1 to 21 Maximum significant digits - + Please enter a number from 1 to 21
-

{{enteredNumber | intlDecimal: { - locale, notation, signDisplay, - minimumIntegerDigits: minimumIntegerDigits ?? undefined, - minimumFractionDigits: minimumFractionDigits ?? undefined, - maximumFractionDigits: maximumFractionDigits ?? undefined, - minimumSignificantDigits: minimumSignificantDigits ?? undefined, - maximumSignificantDigits: maximumSignificantDigits ?? undefined -} }}

+

+ {{ + enteredNumber + | intlDecimal + : { + locale, + notation, + signDisplay, + minimumIntegerDigits: minimumIntegerDigits ?? undefined, + minimumFractionDigits: minimumFractionDigits ?? undefined, + maximumFractionDigits: maximumFractionDigits ?? undefined, + minimumSignificantDigits: minimumSignificantDigits ?? undefined, + maximumSignificantDigits: maximumSignificantDigits ?? undefined + } + }} +

diff --git a/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.ts b/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.ts index 3e41112a..24a15142 100644 --- a/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.ts +++ b/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.ts @@ -1,5 +1,5 @@ -import {Component} from '@angular/core'; -import {languages} from '../../languages'; +import { Component } from '@angular/core'; +import { languages } from '../../languages'; @Component({ selector: 'app-decimal', @@ -12,9 +12,19 @@ export class DecimalComponent { locale?: string; notation?: Intl.NumberFormatOptions['notation']; signDisplay?: Intl.NumberFormatOptions['signDisplay']; - minimumIntegerDigits?: Intl.NumberFormatOptions['minimumIntegerDigits'] | null; - minimumFractionDigits?: Intl.NumberFormatOptions['minimumFractionDigits'] | null; - maximumFractionDigits?: Intl.NumberFormatOptions['maximumFractionDigits'] | null; - minimumSignificantDigits?: Intl.NumberFormatOptions['minimumSignificantDigits'] | null; - maximumSignificantDigits?: Intl.NumberFormatOptions['maximumSignificantDigits'] | null; + minimumIntegerDigits?: + | Intl.NumberFormatOptions['minimumIntegerDigits'] + | null; + minimumFractionDigits?: + | Intl.NumberFormatOptions['minimumFractionDigits'] + | null; + maximumFractionDigits?: + | Intl.NumberFormatOptions['maximumFractionDigits'] + | null; + minimumSignificantDigits?: + | Intl.NumberFormatOptions['minimumSignificantDigits'] + | null; + maximumSignificantDigits?: + | Intl.NumberFormatOptions['maximumSignificantDigits'] + | null; } diff --git a/projects/angular-intl-demo/src/app/pipes/language/language.component.html b/projects/angular-intl-demo/src/app/pipes/language/language.component.html index f8800296..1548943a 100644 --- a/projects/angular-intl-demo/src/app/pipes/language/language.component.html +++ b/projects/angular-intl-demo/src/app/pipes/language/language.component.html @@ -2,7 +2,9 @@ Language to transform - {{language}} + {{ + language + }} @@ -10,7 +12,9 @@ Locale Browser default - {{language}} + {{ + language + }} @@ -24,4 +28,4 @@ -

{{selectedLanguage | intlLanguage: {languageDisplay, locale} }}

+

{{ selectedLanguage | intlLanguage: { languageDisplay, locale } }}

diff --git a/projects/angular-intl-demo/src/app/pipes/language/language.component.ts b/projects/angular-intl-demo/src/app/pipes/language/language.component.ts index 6467080a..527ee309 100644 --- a/projects/angular-intl-demo/src/app/pipes/language/language.component.ts +++ b/projects/angular-intl-demo/src/app/pipes/language/language.component.ts @@ -1,6 +1,6 @@ -import {Component} from '@angular/core'; -import {languages} from "../../languages"; -import {IntlLanguagePipeOptions} from "../../../../../angular-ecmascript-intl/src/lib/language/intl-language.pipe"; +import { Component } from '@angular/core'; +import { languages } from '../../languages'; +import { IntlLanguagePipeOptions } from '../../../../../angular-ecmascript-intl/src/lib/language/intl-language.pipe'; @Component({ selector: 'app-language', diff --git a/projects/angular-intl-demo/src/app/pipes/list/list.component.html b/projects/angular-intl-demo/src/app/pipes/list/list.component.html index 7e7532e8..662d96e4 100644 --- a/projects/angular-intl-demo/src/app/pipes/list/list.component.html +++ b/projects/angular-intl-demo/src/app/pipes/list/list.component.html @@ -2,7 +2,9 @@ List items - {{item}} + {{ + item + }} @@ -10,7 +12,9 @@ Locale Browser default - {{language}} + {{ + language + }} @@ -35,4 +39,4 @@ -

{{selectedItems | intlList: {locale, type, style} }}

+

{{ selectedItems | intlList: { locale, type, style } }}

diff --git a/projects/angular-intl-demo/src/app/pipes/list/list.component.ts b/projects/angular-intl-demo/src/app/pipes/list/list.component.ts index ea7dfe17..e9a24eff 100644 --- a/projects/angular-intl-demo/src/app/pipes/list/list.component.ts +++ b/projects/angular-intl-demo/src/app/pipes/list/list.component.ts @@ -1,7 +1,7 @@ -import {Component} from '@angular/core'; -import {languages} from "../../languages"; -import {list} from "./list"; -import {IntlListPipeOptions} from "projects/angular-ecmascript-intl/src/lib/list/intl-list.pipe"; +import { Component } from '@angular/core'; +import { languages } from '../../languages'; +import { list } from './list'; +import { IntlListPipeOptions } from 'projects/angular-ecmascript-intl/src/lib/list/intl-list.pipe'; @Component({ selector: 'app-list', diff --git a/projects/angular-intl-demo/src/app/pipes/list/list.ts b/projects/angular-intl-demo/src/app/pipes/list/list.ts index 013c5971..ec5fcdc7 100644 --- a/projects/angular-intl-demo/src/app/pipes/list/list.ts +++ b/projects/angular-intl-demo/src/app/pipes/list/list.ts @@ -1,7 +1 @@ -export const list = [ - 'Pizza', - 'Lasagne', - 'Gnocchi', - 'Spaghetti', - 'Pesto', -]; +export const list = ['Pizza', 'Lasagne', 'Gnocchi', 'Spaghetti', 'Pesto']; diff --git a/projects/angular-intl-demo/src/app/pipes/percent/percent.component.html b/projects/angular-intl-demo/src/app/pipes/percent/percent.component.html index 9efd166f..8c199ec4 100644 --- a/projects/angular-intl-demo/src/app/pipes/percent/percent.component.html +++ b/projects/angular-intl-demo/src/app/pipes/percent/percent.component.html @@ -1,14 +1,16 @@
Number - + Locale Browser default - {{language}} + {{ + language + }} @@ -37,40 +39,78 @@ Minimum integer digits - + Please enter a number from 1 to 21 Minimum fraction digits - + Please enter a number from 0 to 20 Maximum fraction digits - + Please enter a number from 0 to 20 Minimum significant digits - + Please enter a number from 1 to 21 Maximum significant digits - + Please enter a number from 1 to 21
-

{{enteredNumber | intlPercent: { - locale, notation, signDisplay, - minimumIntegerDigits: minimumIntegerDigits ?? undefined, - minimumFractionDigits: minimumFractionDigits ?? undefined, - maximumFractionDigits: maximumFractionDigits ?? undefined, - minimumSignificantDigits: minimumSignificantDigits ?? undefined, - maximumSignificantDigits: maximumSignificantDigits ?? undefined -} }}

+

+ {{ + enteredNumber + | intlPercent + : { + locale, + notation, + signDisplay, + minimumIntegerDigits: minimumIntegerDigits ?? undefined, + minimumFractionDigits: minimumFractionDigits ?? undefined, + maximumFractionDigits: maximumFractionDigits ?? undefined, + minimumSignificantDigits: minimumSignificantDigits ?? undefined, + maximumSignificantDigits: maximumSignificantDigits ?? undefined + } + }} +

diff --git a/projects/angular-intl-demo/src/app/pipes/percent/percent.component.ts b/projects/angular-intl-demo/src/app/pipes/percent/percent.component.ts index 23dcfbf4..1e081b01 100644 --- a/projects/angular-intl-demo/src/app/pipes/percent/percent.component.ts +++ b/projects/angular-intl-demo/src/app/pipes/percent/percent.component.ts @@ -1,5 +1,5 @@ -import {Component} from '@angular/core'; -import {languages} from '../../languages'; +import { Component } from '@angular/core'; +import { languages } from '../../languages'; @Component({ selector: 'app-percent', @@ -12,9 +12,19 @@ export class PercentComponent { locale?: string; notation?: Intl.NumberFormatOptions['notation']; signDisplay?: Intl.NumberFormatOptions['signDisplay']; - minimumIntegerDigits?: Intl.NumberFormatOptions['minimumIntegerDigits'] | null; - minimumFractionDigits?: Intl.NumberFormatOptions['minimumFractionDigits'] | null; - maximumFractionDigits?: Intl.NumberFormatOptions['maximumFractionDigits'] | null; - minimumSignificantDigits?: Intl.NumberFormatOptions['minimumSignificantDigits'] | null; - maximumSignificantDigits?: Intl.NumberFormatOptions['maximumSignificantDigits'] | null; + minimumIntegerDigits?: + | Intl.NumberFormatOptions['minimumIntegerDigits'] + | null; + minimumFractionDigits?: + | Intl.NumberFormatOptions['minimumFractionDigits'] + | null; + maximumFractionDigits?: + | Intl.NumberFormatOptions['maximumFractionDigits'] + | null; + minimumSignificantDigits?: + | Intl.NumberFormatOptions['minimumSignificantDigits'] + | null; + maximumSignificantDigits?: + | Intl.NumberFormatOptions['maximumSignificantDigits'] + | null; } diff --git a/projects/angular-intl-demo/src/app/pipes/pipes-routing.module.ts b/projects/angular-intl-demo/src/app/pipes/pipes-routing.module.ts index 247259fd..7c3aee0f 100644 --- a/projects/angular-intl-demo/src/app/pipes/pipes-routing.module.ts +++ b/projects/angular-intl-demo/src/app/pipes/pipes-routing.module.ts @@ -1,15 +1,15 @@ -import {RouterModule, Routes} from "@angular/router"; -import {PipesComponent} from "./pipes.component"; -import {NgModule} from "@angular/core"; -import {DateComponent} from "./date/date.component"; -import {DecimalComponent} from "./decimal/decimal.component"; -import {PercentComponent} from "./percent/percent.component"; -import {CurrencyComponent} from "./currency/currency.component"; -import {LanguageComponent} from "./language/language.component"; -import {CountryComponent} from "./country/country.component"; -import {UnitComponent} from "./unit/unit.component"; -import {ListComponent} from "./list/list.component"; -import {RelativeTimeComponent} from "./relative-time/relative-time.component"; +import { RouterModule, Routes } from '@angular/router'; +import { PipesComponent } from './pipes.component'; +import { NgModule } from '@angular/core'; +import { DateComponent } from './date/date.component'; +import { DecimalComponent } from './decimal/decimal.component'; +import { PercentComponent } from './percent/percent.component'; +import { CurrencyComponent } from './currency/currency.component'; +import { LanguageComponent } from './language/language.component'; +import { CountryComponent } from './country/country.component'; +import { UnitComponent } from './unit/unit.component'; +import { ListComponent } from './list/list.component'; +import { RelativeTimeComponent } from './relative-time/relative-time.component'; const routes: Routes = [ { @@ -65,5 +65,4 @@ const routes: Routes = [ imports: [RouterModule.forChild(routes)], exports: [RouterModule], }) -export class PipesRoutingModule { -} +export class PipesRoutingModule {} diff --git a/projects/angular-intl-demo/src/app/pipes/pipes.component.html b/projects/angular-intl-demo/src/app/pipes/pipes.component.html index ca54033c..e4ae04cd 100644 --- a/projects/angular-intl-demo/src/app/pipes/pipes.component.html +++ b/projects/angular-intl-demo/src/app/pipes/pipes.component.html @@ -1,26 +1,79 @@
- +
diff --git a/projects/angular-intl-demo/src/app/pipes/pipes.component.ts b/projects/angular-intl-demo/src/app/pipes/pipes.component.ts index e3227cea..093a4648 100644 --- a/projects/angular-intl-demo/src/app/pipes/pipes.component.ts +++ b/projects/angular-intl-demo/src/app/pipes/pipes.component.ts @@ -1,5 +1,5 @@ -import {Component} from '@angular/core'; -import {ActivatedRoute} from "@angular/router"; +import { Component } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-pipes', @@ -7,6 +7,5 @@ import {ActivatedRoute} from "@angular/router"; styleUrls: ['./pipes.component.scss'], }) export class PipesComponent { - constructor(readonly route: ActivatedRoute) { - } + constructor(readonly route: ActivatedRoute) {} } diff --git a/projects/angular-intl-demo/src/app/pipes/pipes.module.ts b/projects/angular-intl-demo/src/app/pipes/pipes.module.ts index c7b35ad1..849f0803 100644 --- a/projects/angular-intl-demo/src/app/pipes/pipes.module.ts +++ b/projects/angular-intl-demo/src/app/pipes/pipes.module.ts @@ -1,23 +1,23 @@ -import {NgModule} from '@angular/core'; -import {CommonModule} from '@angular/common'; -import {DateComponent} from "./date/date.component"; -import {LanguageComponent} from "./language/language.component"; -import {DecimalComponent} from "./decimal/decimal.component"; -import {PercentComponent} from "./percent/percent.component"; -import {CurrencyComponent} from "./currency/currency.component"; -import {PipesComponent} from './pipes.component'; -import {MatTabsModule} from "@angular/material/tabs"; -import {IntlModule} from "projects/angular-ecmascript-intl/src/lib/intl.module"; -import {MatSelectModule} from "@angular/material/select"; -import {FormsModule} from "@angular/forms"; -import {MatInputModule} from "@angular/material/input"; -import {PipesRoutingModule} from "./pipes-routing.module"; -import {CountryComponent} from "./country/country.component"; -import {UnitComponent} from "./unit/unit.component"; -import {ListComponent} from "./list/list.component"; -import {RelativeTimeComponent} from './relative-time/relative-time.component'; -import {MatButtonModule} from '@angular/material/button'; -import {MatIconModule} from '@angular/material/icon'; +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { DateComponent } from './date/date.component'; +import { LanguageComponent } from './language/language.component'; +import { DecimalComponent } from './decimal/decimal.component'; +import { PercentComponent } from './percent/percent.component'; +import { CurrencyComponent } from './currency/currency.component'; +import { PipesComponent } from './pipes.component'; +import { MatTabsModule } from '@angular/material/tabs'; +import { IntlModule } from 'projects/angular-ecmascript-intl/src/lib/intl.module'; +import { MatSelectModule } from '@angular/material/select'; +import { FormsModule } from '@angular/forms'; +import { MatInputModule } from '@angular/material/input'; +import { PipesRoutingModule } from './pipes-routing.module'; +import { CountryComponent } from './country/country.component'; +import { UnitComponent } from './unit/unit.component'; +import { ListComponent } from './list/list.component'; +import { RelativeTimeComponent } from './relative-time/relative-time.component'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; @NgModule({ declarations: [ @@ -44,5 +44,4 @@ import {MatIconModule} from '@angular/material/icon'; MatIconModule, ], }) -export class PipesModule { -} +export class PipesModule {} diff --git a/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.html b/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.html index d29ec1f6..1c2d651d 100644 --- a/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.html +++ b/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.html @@ -1,7 +1,13 @@
Date - + @@ -11,7 +17,9 @@ Locale Browser default - {{language}} + {{ + language + }} @@ -35,4 +43,4 @@
-

{{selectedDate | intlRelativeTime: {locale, numeric, style} }}

+

{{ selectedDate | intlRelativeTime: { locale, numeric, style } }}

diff --git a/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.ts b/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.ts index 8bb4d6ae..d955f291 100644 --- a/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.ts +++ b/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.ts @@ -1,7 +1,7 @@ -import {Component} from '@angular/core'; -import {IntlRelativeTimePipeOptions} from "projects/angular-ecmascript-intl/src/lib/relative-time/relative-time.pipe"; -import {languages} from "../../languages"; -import {getDateString} from "../date-utils"; +import { Component } from '@angular/core'; +import { IntlRelativeTimePipeOptions } from 'projects/angular-ecmascript-intl/src/lib/relative-time/relative-time.pipe'; +import { languages } from '../../languages'; +import { getDateString } from '../date-utils'; @Component({ selector: 'app-relative-time', diff --git a/projects/angular-intl-demo/src/app/pipes/unit/unit.component.html b/projects/angular-intl-demo/src/app/pipes/unit/unit.component.html index 7078cec4..1783a306 100644 --- a/projects/angular-intl-demo/src/app/pipes/unit/unit.component.html +++ b/projects/angular-intl-demo/src/app/pipes/unit/unit.component.html @@ -1,13 +1,15 @@
Number - + Unit - {{unit}} + {{ + unit + }} @@ -15,7 +17,9 @@ Locale Browser default - {{language}} + {{ + language + }} @@ -54,40 +58,80 @@ Minimum integer digits - + Please enter a number from 1 to 21 Minimum fraction digits - + Please enter a number from 0 to 20 Maximum fraction digits - + Please enter a number from 0 to 20 Minimum significant digits - + Please enter a number from 1 to 21 Maximum significant digits - + Please enter a number from 1 to 21
-

{{enteredNumber | intlUnit: selectedUnit: { - locale, unitDisplay: unitDisplay, notation, signDisplay, - minimumIntegerDigits: minimumIntegerDigits ?? undefined, - minimumFractionDigits: minimumFractionDigits ?? undefined, - maximumFractionDigits: maximumFractionDigits ?? undefined, - minimumSignificantDigits: minimumSignificantDigits ?? undefined, - maximumSignificantDigits: maximumSignificantDigits ?? undefined -} }}

+

+ {{ + enteredNumber + | intlUnit + : selectedUnit + : { + locale, + unitDisplay: unitDisplay, + notation, + signDisplay, + minimumIntegerDigits: minimumIntegerDigits ?? undefined, + minimumFractionDigits: minimumFractionDigits ?? undefined, + maximumFractionDigits: maximumFractionDigits ?? undefined, + minimumSignificantDigits: minimumSignificantDigits ?? undefined, + maximumSignificantDigits: maximumSignificantDigits ?? undefined + } + }} +

diff --git a/projects/angular-intl-demo/src/app/pipes/unit/unit.component.ts b/projects/angular-intl-demo/src/app/pipes/unit/unit.component.ts index 4e6dcc83..0a5b497b 100644 --- a/projects/angular-intl-demo/src/app/pipes/unit/unit.component.ts +++ b/projects/angular-intl-demo/src/app/pipes/unit/unit.component.ts @@ -1,6 +1,6 @@ -import {Component} from '@angular/core'; -import {languages} from '../../languages'; -import {units} from "./units"; +import { Component } from '@angular/core'; +import { languages } from '../../languages'; +import { units } from './units'; @Component({ selector: 'app-unit', @@ -16,9 +16,19 @@ export class UnitComponent { notation?: Intl.NumberFormatOptions['notation']; signDisplay?: Intl.NumberFormatOptions['signDisplay']; unitDisplay?: Intl.NumberFormatOptions['unitDisplay']; - minimumIntegerDigits?: Intl.NumberFormatOptions['minimumIntegerDigits'] | null; - minimumFractionDigits?: Intl.NumberFormatOptions['minimumFractionDigits'] | null; - maximumFractionDigits?: Intl.NumberFormatOptions['maximumFractionDigits'] | null; - minimumSignificantDigits?: Intl.NumberFormatOptions['minimumSignificantDigits'] | null; - maximumSignificantDigits?: Intl.NumberFormatOptions['maximumSignificantDigits'] | null; + minimumIntegerDigits?: + | Intl.NumberFormatOptions['minimumIntegerDigits'] + | null; + minimumFractionDigits?: + | Intl.NumberFormatOptions['minimumFractionDigits'] + | null; + maximumFractionDigits?: + | Intl.NumberFormatOptions['maximumFractionDigits'] + | null; + minimumSignificantDigits?: + | Intl.NumberFormatOptions['minimumSignificantDigits'] + | null; + maximumSignificantDigits?: + | Intl.NumberFormatOptions['maximumSignificantDigits'] + | null; } diff --git a/projects/angular-intl-demo/src/index.html b/projects/angular-intl-demo/src/index.html index aaf172a9..88ec3e6d 100644 --- a/projects/angular-intl-demo/src/index.html +++ b/projects/angular-intl-demo/src/index.html @@ -1,16 +1,22 @@ - - - Angular Intl - - - - - - - - - - + + + Angular Intl + + + + + + + + + + diff --git a/projects/angular-intl-demo/src/main.ts b/projects/angular-intl-demo/src/main.ts index c58dc05c..17a5cd4e 100644 --- a/projects/angular-intl-demo/src/main.ts +++ b/projects/angular-intl-demo/src/main.ts @@ -2,6 +2,6 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; - -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/projects/angular-intl-demo/src/styles.scss b/projects/angular-intl-demo/src/styles.scss index 2eed352a..40fc9ca3 100644 --- a/projects/angular-intl-demo/src/styles.scss +++ b/projects/angular-intl-demo/src/styles.scss @@ -2,21 +2,25 @@ @include mat.core(); -$light-theme: mat.define-light-theme(( - color: ( - primary: mat.define-palette(mat.$deep-purple-palette), - accent: mat.define-palette(mat.$deep-orange-palette), - ), - typography: mat.define-typography-config(), - density: 0, -)); +$light-theme: mat.define-light-theme( + ( + color: ( + primary: mat.define-palette(mat.$deep-purple-palette), + accent: mat.define-palette(mat.$deep-orange-palette), + ), + typography: mat.define-typography-config(), + density: 0, + ) +); -$dark-theme: mat.define-dark-theme(( - color: ( - primary: mat.define-palette(mat.$purple-palette), - accent: mat.define-palette(mat.$deep-orange-palette), - ), -)); +$dark-theme: mat.define-dark-theme( + ( + color: ( + primary: mat.define-palette(mat.$purple-palette), + accent: mat.define-palette(mat.$deep-orange-palette), + ), + ) +); @include mat.core-theme($light-theme); @include mat.button-theme($light-theme); @@ -36,7 +40,8 @@ $dark-theme: mat.define-dark-theme(( @include mat.form-field-color($dark-theme); } -html, body { +html, +body { height: 100%; } diff --git a/projects/angular-intl-demo/tsconfig.app.json b/projects/angular-intl-demo/tsconfig.app.json index e4e0762d..74119609 100644 --- a/projects/angular-intl-demo/tsconfig.app.json +++ b/projects/angular-intl-demo/tsconfig.app.json @@ -5,10 +5,6 @@ "outDir": "../../out-tsc/app", "types": [] }, - "files": [ - "src/main.ts" - ], - "include": [ - "src/**/*.d.ts" - ] + "files": ["src/main.ts"], + "include": ["src/**/*.d.ts"] } diff --git a/renovate.json b/renovate.json index e206031d..3ab105d2 100644 --- a/renovate.json +++ b/renovate.json @@ -6,28 +6,16 @@ ], "lockFileMaintenance": { "enabled": true, - "schedule": [ - "on wednesday" - ] + "schedule": ["on wednesday"] }, "packageRules": [ { - "matchUpdateTypes": [ - "patch", - "pin", - "digest", - "lockFileMaintenance" - ], + "matchUpdateTypes": ["patch", "pin", "digest", "lockFileMaintenance"], "automerge": true }, { - "matchPackagePrefixes": [ - "@angular/", - "@angular-devkit/" - ], - "matchPackageNames": [ - "ng-packagr" - ], + "matchPackagePrefixes": ["@angular/", "@angular-devkit/"], + "matchPackageNames": ["ng-packagr"], "groupName": "angular" } ] diff --git a/tsconfig.json b/tsconfig.json index 674ecdf0..c0ccac72 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,9 +3,7 @@ "compileOnSave": false, "compilerOptions": { "paths": { - "angular-ecmascript-intl": [ - "dist/angular-ecmascript-intl" - ] + "angular-ecmascript-intl": ["dist/angular-ecmascript-intl"] }, "baseUrl": "./", "outDir": "./dist/out-tsc", @@ -24,10 +22,7 @@ "target": "ES2022", "module": "ES2022", "useDefineForClassFields": false, - "lib": [ - "ES2022", - "dom" - ] + "lib": ["ES2022", "dom"] }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false,