File

projects/isy-angular-widgets/src/lib/i18n/widgets-config.service.ts

Description

A service to translate labels in widgets library.

Index

Properties
Methods

Methods

getTranslation
getTranslation(path: string, params: TranslationParams)
Parameters :
Name Type Optional Default value
path string No
params TranslationParams No {}
Returns : string
getTranslation$
getTranslation$(path: string, params: TranslationParams)
Parameters :
Name Type Optional Default value
path string No
params TranslationParams No {}
Returns : Observable<string>
getTranslations
getTranslations()
Returns : WidgetsTranslation
setTranslation
setTranslation(value: WidgetsTranslation)
Parameters :
Name Type Optional
value WidgetsTranslation No
Returns : void

Properties

Readonly translation$
Type : Observable<WidgetsTranslation>
Default value : this.translationSource.asObservable()
import {Injectable} from '@angular/core';
import {BehaviorSubject, Observable} from 'rxjs';
import {distinctUntilChanged, map} from 'rxjs/operators';
import {WidgetsTranslation} from './widgets-translation';

type TranslationParams = Record<string, string | number>;

/**
 * A service to translate labels in widgets library.
 */
@Injectable({
  providedIn: 'root'
})
export class WidgetsConfigService {
  private translation: WidgetsTranslation = {
    wizard: {
      back: 'Zurück',
      next: 'Weiter',
      save: 'Speichern',
      close: 'Schließen'
    },
    inputChar: {
      title: 'Sonderzeichenpicker',
      headerBaseChars: 'Basis',
      headerGroups: 'Gruppen',
      headerAllCharacters: 'Alle',
      insert: 'Einfügen',
      preview: {
        letters: 'Zeichenvorschau',
        information: 'Zeicheninformationen'
      },
      aria: {
        togglePicker: 'Sonderzeichenpicker öffnen',
        closePicker: 'Sonderzeichenpicker schließen',
        characterGrid: 'Sonderzeichenauswahl',
        filterAllCharacters: 'Alle Zeichen wählen',
        filterBaseChars: 'Basis-Zeichen wählen',
        filterGroups: 'Zeichengruppen wählen'
      }
    },
    hauptfenster: {
      altLogoAwl: 'Logo der Anwendungslandschaft',
      altLogoAnbieterAwl: 'Logo des Anbieters der Anwendungslandschaft',
      logout: 'Abmelden',
      browserWarning: {
        currentBrowserFallback: 'Ihr aktuell verwendeter Browser',
        message:
          '{{browser}} wird von dieser Anwendung nicht unterstützt. Bitte verwenden Sie eine unterstützte Browser-Version: {{supportedBrowsers}}.',
        supportedBrowser: '{{browser}} ab Version {{version}}'
      }
    },
    formWrapper: {
      required: 'Pflichtfeld',
      invalid: 'Ungültige Eingabe'
    },
    seitentoolbar: {
      back: 'Zurück zur Übersicht'
    }
  };

  private readonly translationSource = new BehaviorSubject(this.translation);

  readonly translation$: Observable<WidgetsTranslation> = this.translationSource.asObservable();

  getTranslation(path: string, params: TranslationParams = {}): string {
    const value = path.split('.').reduce<unknown>((current, key) => {
      if (!current || typeof current !== 'object') {
        return undefined;
      }

      return (current as Record<string, unknown>)[key];
    }, this.translation);

    return typeof value === 'string' ? this.interpolate(value, params) : '';
  }

  getTranslation$(path: string, params: TranslationParams = {}): Observable<string> {
    return this.translation$.pipe(
      map(() => this.getTranslation(path, params)),
      distinctUntilChanged()
    );
  }

  setTranslation(value: WidgetsTranslation): void {
    this.translation = {
      ...this.translation,
      wizard: {
        ...this.translation.wizard,
        ...value.wizard
      },
      inputChar: {
        ...this.translation.inputChar,
        ...value.inputChar,
        preview: {
          ...this.translation.inputChar?.preview,
          ...value.inputChar?.preview
        },
        aria: {
          ...this.translation.inputChar?.aria,
          ...value.inputChar?.aria
        }
      },
      hauptfenster: {
        ...this.translation.hauptfenster,
        ...value.hauptfenster,
        browserWarning: {
          ...this.translation.hauptfenster?.browserWarning,
          ...value.hauptfenster?.browserWarning
        }
      },
      formWrapper: {
        ...this.translation.formWrapper,
        ...value.formWrapper
      },
      seitentoolbar: {
        ...this.translation.seitentoolbar,
        ...value.seitentoolbar
      }
    };

    this.translationSource.next(this.translation);
  }

  getTranslations(): WidgetsTranslation {
    return this.translation;
  }

  private interpolate(value: string, params: TranslationParams): string {
    return Object.entries(params).reduce(
      (result, [key, replacement]) => result.replaceAll(`{{${key}}}`, String(replacement)),
      value
    );
  }
}

results matching ""

    No results matching ""