[editor] Add and configure `TranslationService`

* Add specific translation file for editor in assets/i18n
* Add first translations for toolbar

projects/editor/src/app/app.component.ts

 import { Component } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'editor-aspect',
@@ -14,4 +15,8 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'verona-editor-aspect';
+  constructor(private translateService: TranslateService) {
+    translateService.addLangs(['de']);
+    translateService.setDefaultLang('de');
+  }
 }

projects/editor/src/app/app.module.ts

@@ -7,6 +7,7 @@ import { createCustomElement } from '@angular/elements';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { AppComponent } from './app.component';
 import { ToolbarComponent } from './components/toolbar/toolbar.component';
 import { UiElementToolboxComponent } from './components/unit-view/page-view/ui-element-toolbox/ui-element-toolbox.component';
@@ -20,6 +21,7 @@ import { CanvasSectionToolbarComponent } from './components/unit-view/page-view/
 import { CanvasDragOverlayComponent } from './components/unit-view/page-view/canvas/canvas-drag-overlay.component';
 import { SharedModule } from '../../../common/app.module';
 import { ConfirmationDialog, MultilineTextEditDialog, TextEditDialog } from './dialog.service';
+import { EditorTranslateLoader } from './editor-translate-loader';
 
 @NgModule({
   declarations: [
@@ -44,7 +46,13 @@ import { ConfirmationDialog, MultilineTextEditDialog, TextEditDialog } from './d
     CommonModule,
     SharedModule,
     MatDialogModule,
-    MatButtonToggleModule
+    MatButtonToggleModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useClass: EditorTranslateLoader
+      }
+    })
   ],
   providers: []
 })

projects/editor/src/app/components/toolbar/toolbar.component.html

 <mat-toolbar>
   <button mat-raised-button (click)="load()">
-    Unit laden
+    {{'loadUnit' | translate}}
     <mat-icon>file_upload</mat-icon>
   </button>
   <button mat-raised-button (click)="save()">
-    Unit speichern
+    {{'saveUnit' | translate}}
     <mat-icon>file_download</mat-icon>
   </button>
 </mat-toolbar>

projects/editor/src/app/editor-translate-loader.ts

+import { TranslateLoader } from '@ngx-translate/core';
+import { from, merge, Observable } from 'rxjs';
+import { reduce } from 'rxjs/operators';
+
+export class EditorTranslateLoader implements TranslateLoader {
+  getTranslation = (lang: string): Observable<Record<string, string>> => merge(
+    from(import(`../assets/i18n/${lang}.json`)),
+    from(import(`../../../common/assets/i18n/${lang}.json`))
+  ).pipe(
+    reduce((
+      merged: Record<string, string>,
+      file: Record<string, string>
+    ): Record<string, string> => ({ ...merged, ...file }), {})
+  );
+}

projects/editor/src/assets/i18n/de.json

+{
+  "loadUnit": "Unit laden",
+  "saveUnit": "Unit speichern"
+}

projects/player/src/app/classes/player-translate-loader.ts

@@ -7,6 +7,9 @@ export class PlayerTranslateLoader implements TranslateLoader {
     from(import(`../../assets/i18n/${lang}.json`)),
     from(import(`../../../../common/assets/i18n/${lang}.json`))
   ).pipe(
-    reduce((merged, entity) => ({ ...merged, ...entity }), {})
+    reduce((
+      merged: Record<string, string>,
+      file: Record<string, string>
+    ): Record<string, string> => ({ ...merged, ...file }), {})
   );
 }