feat: add option to override locale

json-derulo · Feb 20, 2023 · 3dd0d32 · 3dd0d32
1 parent bae651a
commit 3dd0d32
Show file tree

Hide file tree

Showing 12 changed files with 83 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## Unreleased
+
+### Added
+
+* Add option to override locale
+
 ## 0.1.0 - 2023-02-19
 
 ### Added

diff --git a/README.md b/README.md
@@ -100,9 +100,11 @@ loading any locale date. This package re-implements some Angular built-in pipes
 
 ## Feature Roadmap
 
+* Number pipe(s): decimal, currency, percentage
+* Performance: Prepare Intl.* object with default options, only construct new object when necessary
 * Country pipe
-* Number pipe(s)
 * Relative time
+* Migration Schematics for usages of Angular pipes
 
 ## Chore Roadmap
 

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
@@ -129,7 +129,22 @@ 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');
     });
   });
+
+  it('should respect locale option', () => {
+    TestBed.configureTestingModule({
+      providers: [
+        IntlDatePipe,
+        {
+          provide: INTL_LOCALES,
+          useValue: 'en-US',
+        },
+      ],
+    });
+    testUnit = TestBed.inject(IntlDatePipe);
+
+    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
@@ -1,8 +1,9 @@
 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<Intl.DateTimeFormatOptions>;
+export type IntlDatePipeOptions = Partial<Intl.DateTimeFormatOptions> & IntlPipeOptions;
 
 @Pipe({
   name: 'intlDate',
@@ -24,8 +25,10 @@ export class IntlDatePipe implements PipeTransform {
       return null;
     }
 
+    const {locale, ...intlOptions} = options ?? {};
+
     try {
-      return new Intl.DateTimeFormat(this.locale ?? undefined, {...this.defaultOptions, ...options}).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 date.toString();

diff --git a/projects/angular-ecmascript-intl/src/lib/intl-pipe-options.ts b/projects/angular-ecmascript-intl/src/lib/intl-pipe-options.ts
@@ -0,0 +1,3 @@
+export interface IntlPipeOptions {
+  locale?: string;
+}
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
@@ -132,4 +132,19 @@ describe('IntlLanguagePipe', () => {
       expect(testUnit.transform('de', {type: 'region'})).toEqual('Deutsch');
     });
   });
+
+  it('should respect locale option', () => {
+    TestBed.configureTestingModule({
+      providers: [
+        IntlLanguagePipe,
+        {
+          provide: INTL_LOCALES,
+          useValue: 'en-US',
+        },
+      ],
+    });
+    testUnit = TestBed.inject(IntlLanguagePipe);
+
+    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
@@ -1,8 +1,9 @@
 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<Intl.DisplayNamesOptions>;
+export type IntlLanguagePipeOptions = Partial<Intl.DisplayNamesOptions> & IntlPipeOptions;
 
 @Pipe({
   name: 'intlLanguage',
@@ -19,10 +20,12 @@ export class IntlLanguagePipe implements PipeTransform {
       return null;
     }
 
+    const {locale, ...intlOptions} = options ?? {};
+
     try {
-      return new Intl.DisplayNames(this.locale ?? undefined, {
-        ...this.defaultOptions, ...options,
-        type: 'language'
+      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);

diff --git a/projects/angular-intl-demo/src/app/date/date.component.html b/projects/angular-intl-demo/src/app/date/date.component.html
@@ -1,8 +1,16 @@
 <div class="fields-container">
+  <mat-form-field>
+    <mat-label>Locale</mat-label>
+    <mat-select [(ngModel)]="locale">
+      <mat-option [value]="undefined">Browser default</mat-option>
+      <mat-option *ngFor="let language of languages" [value]="language">{{language}}</mat-option>
+    </mat-select>
+  </mat-form-field>
+
   <mat-form-field>
     <mat-label>Date style</mat-label>
     <mat-select [(ngModel)]="dateStyle">
-      <mat-option [value]="undefined">-</mat-option>
+      <mat-option [value]="undefined">Browser default</mat-option>
       <mat-option [value]="'short'">short</mat-option>
       <mat-option [value]="'medium'">medium</mat-option>
       <mat-option [value]="'long'">long</mat-option>
@@ -13,7 +21,7 @@
   <mat-form-field>
     <mat-label>Time style</mat-label>
     <mat-select [(ngModel)]="timeStyle">
-      <mat-option [value]="undefined">-</mat-option>
+      <mat-option [value]="undefined">Browser default</mat-option>
       <mat-option [value]="'short'">short</mat-option>
       <mat-option [value]="'medium'">medium</mat-option>
       <mat-option [value]="'long'">long</mat-option>
@@ -26,4 +34,4 @@
   </mat-slide-toggle>
 </div>
 
-<p>{{selectedDate | intlDate: { dateStyle, timeStyle, hour12 } }}</p>
+<p>{{selectedDate | intlDate: {dateStyle, timeStyle, hour12, locale} }}</p>
diff --git a/projects/angular-intl-demo/src/app/date/date.component.ts b/projects/angular-intl-demo/src/app/date/date.component.ts
@@ -1,13 +1,16 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
+import {languages} from '../languages';
 
 @Component({
   selector: 'app-date',
   templateUrl: './date.component.html',
   styleUrls: ['./date.component.scss']
 })
 export class DateComponent {
+  languages = languages;
   selectedDate = new Date();
   dateStyle: Intl.DateTimeFormatOptions['dateStyle'];
   timeStyle: Intl.DateTimeFormatOptions['timeStyle'];
   hour12: Intl.DateTimeFormatOptions['hour12'];
+  locale?: string;
 }
diff --git a/projects/angular-intl-demo/src/app/language/language.component.html b/projects/angular-intl-demo/src/app/language/language.component.html
@@ -1,19 +1,27 @@
 <div class="fields-container">
   <mat-form-field>
-    <mat-label>Language</mat-label>
+    <mat-label>Language to transform</mat-label>
     <mat-select [(ngModel)]="selectedLanguage">
       <mat-option *ngFor="let language of languages" [value]="language">{{language}}</mat-option>
     </mat-select>
   </mat-form-field>
 
+  <mat-form-field>
+    <mat-label>Locale</mat-label>
+    <mat-select [(ngModel)]="locale">
+      <mat-option [value]="undefined">Browser default</mat-option>
+      <mat-option *ngFor="let language of languages" [value]="language">{{language}}</mat-option>
+    </mat-select>
+  </mat-form-field>
+
   <mat-form-field>
     <mat-label>Language display</mat-label>
     <mat-select [(ngModel)]="languageDisplay">
-      <mat-option [value]="undefined">-</mat-option>
+      <mat-option [value]="undefined">Browser default</mat-option>
       <mat-option [value]="'dialect'">dialect</mat-option>
       <mat-option [value]="'standard'">standard</mat-option>
     </mat-select>
   </mat-form-field>
 </div>
 
-<p>{{selectedLanguage | intlLanguage: {languageDisplay} }}</p>
+<p>{{selectedLanguage | intlLanguage: {languageDisplay, locale} }}</p>
diff --git a/projects/angular-intl-demo/src/app/language/language.component.ts b/projects/angular-intl-demo/src/app/language/language.component.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {languages} from "./languages";
+import {languages} from "../languages";
 import {IntlLanguagePipeOptions} from "projects/angular-ecmascript-intl/src/lib/language/intl-language.pipe";
 
 @Component({
@@ -11,4 +11,5 @@ export class LanguageComponent {
   languages = languages;
   selectedLanguage = 'de-DE';
   languageDisplay?: IntlLanguagePipeOptions['languageDisplay'];
+  locale?: string;
 }
diff --git a/...r-intl-demo/src/app/language/languages.ts → ...ts/angular-intl-demo/src/app/languages.ts b/...r-intl-demo/src/app/language/languages.ts → ...ts/angular-intl-demo/src/app/languages.ts