Localization: add support for german

apps/cookbook/src/app/localization/locale-provider/de-locale-provider.component.ts

@@ -0,0 +1,10 @@
+import { Component, LOCALE_ID } from '@angular/core';
+import { TranslationService } from '@kirbydesign/designsystem/shared';
+
+@Component({
+  selector: 'cookbook-de-locale-provider',
+  template: '<ng-content></ng-content>',
+  standalone: true,
+  providers: [{ provide: LOCALE_ID, useValue: 'de' }, TranslationService],
+})
+export class DeLocaleProviderComponent {}

apps/cookbook/src/app/localization/localization.component.html

@@ -5,11 +5,13 @@ <h1>Localization</h1>
     <code>kirby-calendar</code>
     and
     <code>input type="date"</code>
-    to automatically format values according to locale. Support has been added for three locales out
+    to automatically format values according to locale. Support has been added for four locales out
     of the box: American English (
     <code>en-US</code>
     ), British English (
     <code>en-GB</code>
+    ), German (
+    <code>de</code>
     ) and Danish (
     <code>da</code>
     ).
@@ -62,6 +64,17 @@ <h1>Localization</h1>
             altText="English locale"
           ></kirby-avatar>
         </cookbook-en-locale-provider>
+        <cookbook-de-locale-provider>
+          <kirby-card>
+            <kirby-calendar [selectedDate]="selectedDate"></kirby-calendar>
+          </kirby-card>
+          <kirby-avatar
+            class="locale-avatar"
+            size="sm"
+            imageSrc="assets/images/de.svg"
+            altText="German locale"
+          ></kirby-avatar>
+        </cookbook-de-locale-provider>
       </div>
     </div>
   </cookbook-example-viewer>

apps/cookbook/src/app/localization/localization.component.ts

@@ -9,6 +9,7 @@ import { CodeViewerComponent } from '../shared/code-viewer/code-viewer.component
 import { ExampleViewerComponent } from '../shared/example-viewer/example-viewer.component';
 import { DaLocaleProviderComponent } from './locale-provider/da-locale-provider.component';
 import { EnLocaleProviderComponent } from './locale-provider/en-locale-provider.component';
+import { DeLocaleProviderComponent } from './locale-provider/de-locale-provider.component';
 
 @Component({
   selector: 'cookbook-localization',
@@ -19,6 +20,7 @@ import { EnLocaleProviderComponent } from './locale-provider/en-locale-provider.
     CodeViewerComponent,
     DaLocaleProviderComponent,
     EnLocaleProviderComponent,
+    DeLocaleProviderComponent,
     CalendarComponent,
     CardModule,
     AvatarComponent,

apps/cookbook/src/app/showcase/calendar-showcase/calendar-showcase.component.html

@@ -138,6 +138,8 @@ <h2>Specifying locale</h2>
   . The calendar currently supports LOCALE_IDs
   <code>da</code>
   ,
+  <code>de</code>
+  ,
   <code>en-GB</code>
   and
   <code>en-US</code>

apps/cookbook/src/app/showcase/calendar-showcase/calendar-showcase.component.ts

@@ -146,14 +146,14 @@ export class CalendarShowcaseComponent {
     {
       name: 'locales',
       description:
-        '(Optional) Danish and English locales are built in, but if additional existing locales are needed (fx. Spanish), they can be specified here.',
+        '(Optional) Danish, German and English locales are built in, but if additional existing locales are needed (fx. Spanish), they can be specified here.',
       defaultValue: '{}',
       type: ['{ [key: string]: Locale }'],
     },
     {
       name: 'customLocales',
       description:
-        '(Optional) Danish and English locales are built in, but if custom locales are needed, they can be specified here.',
+        '(Optional) Danish, German and English locales are built in, but if custom locales are needed, they can be specified here.',
       defaultValue: '{}',
       type: ['{ [key: string]: Locale }'],
     },

libs/designsystem/calendar/src/calendar.component.spec.ts

@@ -476,57 +476,76 @@ describe('CalendarComponent', () => {
     it('should have English as the default locale', () => {
       spectator = createHostWithLocale();
 
-      spectator.setInput('selectedDate', localMidnightDate('2022-07-01'));
+      spectator.setInput('selectedDate', localMidnightDate('2022-05-01'));
 
       const headerTexts = trimmedTexts('th :not(.visually-hidden)');
       expect(headerTexts).toEqual(['M', 'T', 'W', 'T', 'F', 'S', 'S']);
-      expect(spectator.component.activeMonthName).toBe('July');
+      expect(spectator.component.activeMonthName).toBe('May');
     });
 
     it('should be possible to change the locale to Danish', () => {
       spectator = createHostWithLocale('da');
 
-      spectator.setInput('selectedDate', localMidnightDate('2022-07-01'));
+      spectator.setInput('selectedDate', localMidnightDate('2022-05-01'));
 
       const headerTexts = trimmedTexts('th :not(.visually-hidden)');
       expect(headerTexts).toEqual(['M', 'T', 'O', 'T', 'F', 'L', 'S']);
-      expect(spectator.component.activeMonthName).toBe('Juli');
+      expect(spectator.component.activeMonthName).toBe('Maj');
+    });
+
+    it('should be possible to change the locale to German', () => {
+      spectator = createHostWithLocale('de');
+
+      spectator.setInput('selectedDate', localMidnightDate('2022-05-01'));
+
+      const headerTexts = trimmedTexts('th :not(.visually-hidden)');
+      expect(headerTexts).toEqual(['M', 'D', 'M', 'D', 'F', 'S', 'S']);
+      expect(spectator.component.activeMonthName).toBe('Mai');
     });
 
     it('should have correct aria-label for locale "en"', () => {
       spectator = createHostWithLocale('en');
 
-      spectator.setInput('selectedDate', localMidnightDate('2022-07-01'));
+      spectator.setInput('selectedDate', localMidnightDate('2022-05-01'));
 
       const day = spectator.query('.day.current-month');
-      expect(day.getAttribute('aria-label')).toBe('1 July');
+      expect(day.getAttribute('aria-label')).toBe('1 May');
     });
 
     it('should have correct aria-label for locale "enGB"', () => {
       spectator = createHostWithLocale('enGB');
 
-      spectator.setInput('selectedDate', localMidnightDate('2022-07-01'));
+      spectator.setInput('selectedDate', localMidnightDate('2022-05-01'));
 
       const day = spectator.query('.day.current-month');
-      expect(day.getAttribute('aria-label')).toBe('1 July');
+      expect(day.getAttribute('aria-label')).toBe('1 May');
     });
 
     it('should have correct aria-label for locale "enUS"', () => {
       spectator = createHostWithLocale('enUS');
 
-      spectator.setInput('selectedDate', localMidnightDate('2022-07-01'));
+      spectator.setInput('selectedDate', localMidnightDate('2022-05-01'));
 
       const day = spectator.query('.day.current-month');
-      expect(day.getAttribute('aria-label')).toBe('July 1');
+      expect(day.getAttribute('aria-label')).toBe('May 1');
     });
 
     it('should have correct aria-label for locale "da"', () => {
       spectator = createHostWithLocale('da');
 
-      spectator.setInput('selectedDate', localMidnightDate('2022-07-01'));
+      spectator.setInput('selectedDate', localMidnightDate('2022-05-01'));
+
+      const day = spectator.query('.day.current-month');
+      expect(day.getAttribute('aria-label')).toBe('1. maj');
+    });
+
+    it('should have correct aria-label for locale "de"', () => {
+      spectator = createHostWithLocale('de');
+
+      spectator.setInput('selectedDate', localMidnightDate('2022-05-01'));
 
       const day = spectator.query('.day.current-month');
-      expect(day.getAttribute('aria-label')).toBe('1. juli');
+      expect(day.getAttribute('aria-label')).toBe('1. Mai');
     });
   });
 

libs/designsystem/calendar/src/calendar.component.ts

@@ -32,7 +32,7 @@ import {
   startOfWeek,
 } from 'date-fns';
 import { fromZonedTime, toZonedTime } from 'date-fns-tz';
-import { da, enGB, enUS } from 'date-fns/locale';
+import { da, de, enGB, enUS } from 'date-fns/locale';
 
 import { capitalizeFirstLetter } from '@kirbydesign/core';
 import { ButtonComponent } from '@kirbydesign/designsystem/button';
@@ -120,7 +120,7 @@ export class CalendarComponent implements OnInit, OnChanges {
   private focussedDate: Date;
   private locale: Locale;
   private timeZoneName: string;
-  private includedLocales = { da, enGB, enUS };
+  private includedLocales = { da, de, enGB, enUS };
 
   get selectedDate(): Date {
     return this._selectedDate;
@@ -248,6 +248,7 @@ export class CalendarComponent implements OnInit, OnChanges {
   private formatDateLabel(): string {
     const localeDateFormats = {
       da: 'd. MMMM',
+      de: 'd. MMMM',
       'en-GB': 'd MMMM',
       'en-US': 'MMMM d',
     };

libs/designsystem/shared/src/translation/translation.service.spec.ts

@@ -3,6 +3,7 @@ import { LOCALE_ID } from '@angular/core';
 import { TranslationService } from './translation.service';
 import { en } from './translations/en';
 import { da } from './translations/da';
+import { de } from './translations/de';
 import { Translation } from './translation.interface';
 
 describe('TranslationService', () => {
@@ -44,4 +45,12 @@ describe('TranslationService', () => {
       expect(spectator.service.get(key)).toBe(en[key]);
     });
   });
+
+  it('should return all translations correctly for de key', () => {
+    spectator = createService({ providers: [{ provide: LOCALE_ID, useValue: 'de' }] });
+
+    Object.keys(de).forEach((key: keyof Translation) => {
+      expect(spectator.service.get(key)).toBe(de[key]);
+    });
+  });
 });

libs/designsystem/shared/src/translation/translation.service.ts

@@ -2,14 +2,15 @@ import { Injectable } from '@angular/core';
 import { Inject, LOCALE_ID } from '@angular/core';
 import { da } from './translations/da';
 import { en } from './translations/en';
+import { de } from './translations/de';
 import { Translation } from './translation.interface';
 
 @Injectable({
   providedIn: 'root',
 })
 export class TranslationService {
   private activeTranslation: Translation = en;
-  private translations: { [key: string]: Translation } = { da, en };
+  private translations: { [key: string]: Translation } = { da, en, de };
 
   constructor(@Inject(LOCALE_ID) private localeId: string) {
     this.setActiveTranslation(localeId);

libs/designsystem/shared/src/translation/translations/de.ts

@@ -0,0 +1,12 @@
+import { Translation } from '../translation.interface';
+
+export const de: Translation = {
+  $code: 'de',
+  back: 'Zurück',
+  close: 'Schließen',
+  nextMonth: 'Nächsten Monat',
+  nextSlide: 'Zur nächsten Folie',
+  previousMonth: 'Letzten Monat',
+  previousSlide: 'Zur vorherigen Folie',
+  selectYear: 'Jahr auswählen',
+};