From e902339952bed14bb26c4df222c14eced082d1cf Mon Sep 17 00:00:00 2001 From: "Bajohr, Rayk" Date: Mon, 22 Jun 2026 18:21:09 +0200 Subject: [PATCH] chore(deps): update dependency @ngx-translate/core to v18 --- package-lock.json | 49 ++++++++++--------- package.json | 2 +- .../dashboards-demo/src/app/app.component.ts | 2 +- .../si-language-switcher.component.spec.ts | 8 +-- .../localization/si-locale.service.spec.ts | 2 +- .../localization/si-locale.service.ts | 5 +- .../si-phone-number-input.component.ts | 6 +-- .../si-translate-ngxt.service.ts | 12 +++-- .../ngx-translate/si-translate-ngxt.spec.ts | 12 ++--- .../si-translate-ngxt.test-module.mock.ts | 15 +++--- projects/element-translate-ng/package.json | 2 +- .../translate/si-no-translate.service.ts | 8 +-- .../translate/si-translate.pipe.spec.ts | 7 +-- .../translate/si-translate.service.ts | 2 +- .../live-preview/assets/angular/package.json | 2 +- .../si-navbar-primary-select-settings.ts | 3 +- 16 files changed, 70 insertions(+), 67 deletions(-) diff --git a/package-lock.json b/package-lock.json index 966cece0b1..cce4f35138 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,7 +36,7 @@ "@module-federation/runtime": "2.5.1", "@ngx-formly/bootstrap": "6.3.12", "@ngx-formly/core": "6.3.12", - "@ngx-translate/core": "16.0.4", + "@ngx-translate/core": "18.0.0", "@siemens/element-icons": "1.2.0", "@siemens/ngx-datatable": "26.2.0", "@softarc/native-federation-node": "^3.3.4", @@ -8904,16 +8904,17 @@ } }, "node_modules/@ngx-translate/core": { - "version": "16.0.4", - "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-16.0.4.tgz", - "integrity": "sha512-s8llTL2SJvROhqttxvEs7Cg+6qSf4kvZPFYO+cTOY1d8DWTjlutRkWAleZcPPoeX927Dm7ALfL07G7oYDJ7z6w==", + "version": "18.0.0", + "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-18.0.0.tgz", + "integrity": "sha512-Z9u9AXaeuyeHHimivvJQvhal/LJNB+5tlH+FimSU4QQ61FrtRDqgyn6nfFbc6Cb+59NDZdsh4QeTJyPCldFUwA==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { - "@angular/common": ">=16", - "@angular/core": ">=16" + "@angular/common": ">=18", + "@angular/core": ">=18", + "rxjs": ">=7" } }, "node_modules/@nodable/entities": { @@ -30487,8 +30488,8 @@ "version": "49.11.0", "license": "MIT", "peerDependencies": { - "@angular/common": "21", - "@angular/core": "21", + "@angular/common": "21 - 22", + "@angular/core": "21 - 22", "echarts": "^6.0.0" } }, @@ -30510,8 +30511,8 @@ "peerDependencies": { "@angular-architects/module-federation": "^20.0.0 || ^21.0.0", "@angular-architects/native-federation": "^21.1.0", - "@angular/common": "21", - "@angular/core": "21", + "@angular/common": "21 - 22", + "@angular/core": "21 - 22", "@module-federation/enhanced": "^2.0.0", "@module-federation/runtime": "^2.0.0", "@siemens/element-ng": "49.11.0", @@ -30535,11 +30536,11 @@ "version": "49.11.0", "license": "MIT", "peerDependencies": { - "@angular/cdk": "21", - "@angular/common": "21", - "@angular/core": "21", - "@angular/forms": "21", - "@angular/router": "21", + "@angular/cdk": "21 - 22", + "@angular/common": "21 - 22", + "@angular/core": "21 - 22", + "@angular/forms": "21 - 22", + "@angular/router": "21 - 22", "@ngx-formly/bootstrap": "^6.2.2", "@ngx-formly/core": "^6.2.2", "@siemens/element-icons": "1", @@ -30596,9 +30597,9 @@ "version": "49.11.0", "license": "MIT", "peerDependencies": { - "@angular/common": "21", - "@angular/core": "21", - "@ngx-translate/core": "16 - 17" + "@angular/common": "21 - 22", + "@angular/core": "21 - 22", + "@ngx-translate/core": "17 - 18" }, "peerDependenciesMeta": { "@ngx-translate/core": { @@ -30629,8 +30630,8 @@ "@types/react-dom": "19.2.3" }, "peerDependencies": { - "@angular/common": "21", - "@angular/core": "21", + "@angular/common": "21 - 22", + "@angular/core": "21 - 22", "@babel/standalone": "7.29.7", "react": "18 || 19", "react-dom": "18 || 19", @@ -30660,8 +30661,8 @@ "version": "49.11.0", "license": "MIT", "peerDependencies": { - "@angular/common": "21", - "@angular/core": "21", + "@angular/common": "21 - 22", + "@angular/core": "21 - 22", "@siemens/element-theme": "49.11.0", "@siemens/element-translate-ng": "49.11.0", "ol": "~10.6.0 || ~10.7.0 || ~10.8.0 || ~10.9.0", @@ -30674,8 +30675,8 @@ "version": "49.11.0", "license": "MIT", "peerDependencies": { - "@angular/common": "21", - "@angular/core": "21", + "@angular/common": "21 - 22", + "@angular/core": "21 - 22", "@siemens/element-theme": "49.11.0" } } diff --git a/package.json b/package.json index 30f8a6eb6b..e5b4fa824e 100644 --- a/package.json +++ b/package.json @@ -104,7 +104,7 @@ "@module-federation/runtime": "2.5.1", "@ngx-formly/bootstrap": "6.3.12", "@ngx-formly/core": "6.3.12", - "@ngx-translate/core": "16.0.4", + "@ngx-translate/core": "18.0.0", "@siemens/element-icons": "1.2.0", "@siemens/ngx-datatable": "26.2.0", "@softarc/native-federation-node": "^3.3.4", diff --git a/projects/dashboards-demo/src/app/app.component.ts b/projects/dashboards-demo/src/app/app.component.ts index e750e9566c..7c45e9e8d0 100644 --- a/projects/dashboards-demo/src/app/app.component.ts +++ b/projects/dashboards-demo/src/app/app.component.ts @@ -60,7 +60,7 @@ export class AppComponent implements OnInit { } ngOnInit(): void { - this.translate.setDefaultLang('en'); + this.translate.setFallbackLang('en'); this.translate.use(this.translate.getBrowserLang() ?? 'en'); } diff --git a/projects/element-ng/language-switcher/si-language-switcher.component.spec.ts b/projects/element-ng/language-switcher/si-language-switcher.component.spec.ts index cc6a0fe0db..aae1db3eaa 100644 --- a/projects/element-ng/language-switcher/si-language-switcher.component.spec.ts +++ b/projects/element-ng/language-switcher/si-language-switcher.component.spec.ts @@ -76,13 +76,13 @@ describe('SiLanguageSwitcherComponent', () => { it('changes the language when selecting an option', () => { fixture.detectChanges(); - expect(ngxTranslate.currentLang).toBe('en'); + expect(ngxTranslate.currentLang()).toBe('en'); const select = fixture.nativeElement.querySelector('select'); select.options[1].selected = true; select.dispatchEvent(new Event('change')); - expect(ngxTranslate.currentLang).toBe('de'); + expect(ngxTranslate.currentLang()).toBe('de'); }); it('uses the provided available languages', () => { @@ -122,13 +122,13 @@ describe('SiLanguageSwitcherComponent', () => { it('does not trigger translation on language change', () => { fixture.detectChanges(); - expect(ngxTranslate.currentLang).toBe('en'); + expect(ngxTranslate.currentLang()).toBe('en'); const select = fixture.nativeElement.querySelector('select'); select.options[1].selected = true; select.dispatchEvent(new Event('change')); - expect(ngxTranslate.currentLang).toBe('en'); + expect(ngxTranslate.currentLang()).toBe('en'); }); }); }); diff --git a/projects/element-ng/localization/si-locale.service.spec.ts b/projects/element-ng/localization/si-locale.service.spec.ts index 88af260e18..a1bebd5bc2 100644 --- a/projects/element-ng/localization/si-locale.service.spec.ts +++ b/projects/element-ng/localization/si-locale.service.spec.ts @@ -135,7 +135,7 @@ describe('SiLocaleService', () => { }); service = TestBed.inject(SiLocaleService); const translate = TestBed.inject(TranslateService); - expect(translate.getDefaultLang()).toBe('fr'); + expect(translate.getFallbackLang()).toBe('fr'); }); it('should use browser language, when part of available languages and no language is stored', () => { diff --git a/projects/element-ng/localization/si-locale.service.ts b/projects/element-ng/localization/si-locale.service.ts index 33d42a95b9..48e767c623 100644 --- a/projects/element-ng/localization/si-locale.service.ts +++ b/projects/element-ng/localization/si-locale.service.ts @@ -115,10 +115,11 @@ export class SiLocaleService { let initialLocale; const browserCultureLang = getBrowserCultureLanguage(); const browserLang = getBrowserLanguage(); + const currentLanguage = this.translate.currentLanguage; if (this.hasLocale(savedLocale)) { initialLocale = savedLocale!; - } else if (this.translate.currentLanguage) { - initialLocale = this.translate.currentLanguage; + } else if (currentLanguage) { + initialLocale = currentLanguage; } else if (this.hasLocale(browserCultureLang)) { initialLocale = browserCultureLang!; } else if (this.hasLocale(browserLang)) { diff --git a/projects/element-ng/phone-number/si-phone-number-input.component.ts b/projects/element-ng/phone-number/si-phone-number-input.component.ts index 9efc527d3c..1968d801c3 100644 --- a/projects/element-ng/phone-number/si-phone-number-input.component.ts +++ b/projects/element-ng/phone-number/si-phone-number-input.component.ts @@ -364,9 +364,9 @@ export class SiPhoneNumberInputComponent private getCountryName(countryCode: string): string { // This auto translates the given country name to the selected locale language return ( - new Intl.DisplayNames([this.translate.currentLanguage ?? this.locale], { type: 'region' }).of( - countryCode.toUpperCase() - ) ?? '' + new Intl.DisplayNames([this.translate.currentLanguage ?? this.locale], { + type: 'region' + }).of(countryCode.toUpperCase()) ?? '' ); } diff --git a/projects/element-translate-ng/ngx-translate/si-translate-ngxt.service.ts b/projects/element-translate-ng/ngx-translate/si-translate-ngxt.service.ts index 0ef97a9891..7c986b4b95 100644 --- a/projects/element-translate-ng/ngx-translate/si-translate-ngxt.service.ts +++ b/projects/element-translate-ng/ngx-translate/si-translate-ngxt.service.ts @@ -2,7 +2,7 @@ * Copyright (c) Siemens 2016 - 2026 * SPDX-License-Identifier: MIT */ -import { isDevMode } from '@angular/core'; +import { isDevMode, isSignal } from '@angular/core'; import { MissingTranslationHandler, TranslateService } from '@ngx-translate/core'; import { SiTranslateService, TranslationResult } from '@siemens/element-translate-ng/translate'; import { merge, Observable, of } from 'rxjs'; @@ -39,8 +39,10 @@ export class SiTranslateNgxTService extends SiTranslateService { ).pipe(map(() => {})); } - override get currentLanguage(): string | undefined { - return this.ngxTranslateService.currentLang; + override get currentLanguage(): string | null { + return isSignal(this.ngxTranslateService.currentLang) + ? this.ngxTranslateService.currentLang() + : this.ngxTranslateService.currentLang; } override get availableLanguages(): readonly string[] { @@ -57,12 +59,12 @@ export class SiTranslateNgxTService extends SiTranslateService { } override getDefaultLanguage(): string | null { - return this.ngxTranslateService.getDefaultLang(); + return this.ngxTranslateService.getFallbackLang(); } override setDefaultLanguage(lang: string): void { this.setDocumentLanguage(lang); - this.ngxTranslateService.setDefaultLang(lang); + this.ngxTranslateService.setFallbackLang(lang); } override translate( diff --git a/projects/element-translate-ng/ngx-translate/si-translate-ngxt.spec.ts b/projects/element-translate-ng/ngx-translate/si-translate-ngxt.spec.ts index b354d00a59..90182a6d60 100644 --- a/projects/element-translate-ng/ngx-translate/si-translate-ngxt.spec.ts +++ b/projects/element-translate-ng/ngx-translate/si-translate-ngxt.spec.ts @@ -62,8 +62,7 @@ describe('SiTranslateNgxT', () => { imports: [SiTranslateNgxTModule, HostComponent], providers: [ provideTranslateService({ - defaultLanguage: 'test', - useDefaultLang: true, + fallbackLang: 'test', missingTranslationHandler: provideMissingTranslationHandlerForElement(), loader: { provide: TranslateLoader, @@ -111,8 +110,7 @@ describe('SiTranslateNgxT', () => { imports: [SiTranslateNgxTModule], providers: [ provideTranslateService({ - defaultLanguage: 'test', - useDefaultLang: true, + fallbackLang: 'test', missingTranslationHandler: provideMissingTranslationHandlerForElement(), loader: { provide: TranslateLoader, @@ -251,8 +249,7 @@ describe('SiTranslateNgxT', () => { imports: [SiTranslateNgxTModule], providers: [ provideTranslateService({ - defaultLanguage: 'test', - useDefaultLang: true, + fallbackLang: 'test', loader: { provide: TranslateLoader, useValue: { @@ -279,8 +276,7 @@ describe('SiTranslateNgxT', () => { providers: [ provideNgxTranslateForElement(), provideTranslateService({ - defaultLanguage: 'test', - useDefaultLang: true, + fallbackLang: 'test', missingTranslationHandler: provideMissingTranslationHandlerForElement({ provide: MissingTranslationHandler, useClass: MissingTranslation diff --git a/projects/element-translate-ng/ngx-translate/si-translate-ngxt.test-module.mock.ts b/projects/element-translate-ng/ngx-translate/si-translate-ngxt.test-module.mock.ts index daf5ddb47a..f3f1d08d9e 100644 --- a/projects/element-translate-ng/ngx-translate/si-translate-ngxt.test-module.mock.ts +++ b/projects/element-translate-ng/ngx-translate/si-translate-ngxt.test-module.mock.ts @@ -5,7 +5,7 @@ import { ChangeDetectionStrategy, Component, NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; // eslint-disable-next-line no-restricted-imports -import { TranslateLoader, TranslateModule, TranslatePipe } from '@ngx-translate/core'; +import { provideChildTranslateService, TranslateLoader, TranslatePipe } from '@ngx-translate/core'; import { of } from 'rxjs'; @Component({ @@ -16,16 +16,15 @@ import { of } from 'rxjs'; class TestComponent {} @NgModule({ - imports: [ - TranslateModule.forChild({ - defaultLanguage: 'test', - useDefaultLang: true, + providers: [ + provideChildTranslateService({ loader: { provide: TranslateLoader, useValue: { getTranslation: () => of({ 'KEY-1': 'VALUE-MODIFIED' }) } as TranslateLoader - }, - isolate: true - }), + } + }) + ], + imports: [ RouterModule.forChild([{ path: '', component: TestComponent, pathMatch: 'full' }]), TestComponent ] diff --git a/projects/element-translate-ng/package.json b/projects/element-translate-ng/package.json index 725ee7390e..a8e688201f 100644 --- a/projects/element-translate-ng/package.json +++ b/projects/element-translate-ng/package.json @@ -23,7 +23,7 @@ "peerDependencies": { "@angular/common": "21 - 22", "@angular/core": "21 - 22", - "@ngx-translate/core": "16 - 17" + "@ngx-translate/core": "17 - 18" }, "peerDependenciesMeta": { "@ngx-translate/core": { diff --git a/projects/element-translate-ng/translate/si-no-translate.service.ts b/projects/element-translate-ng/translate/si-no-translate.service.ts index 47b7cdc145..f5346354e9 100644 --- a/projects/element-translate-ng/translate/si-no-translate.service.ts +++ b/projects/element-translate-ng/translate/si-no-translate.service.ts @@ -29,12 +29,14 @@ const replacePlaceholders = (str: string, params: Record): stri */ @Injectable({ providedIn: 'root' }) export class SiNoTranslateService extends SiTranslateService { + private readonly lang = 'en'; + override get currentLanguage(): string { - return 'en'; + return this.lang; } override get availableLanguages(): string[] { - return ['en']; + return [this.lang]; } override set availableLanguages(lang: string[]) {} @@ -44,7 +46,7 @@ export class SiNoTranslateService extends SiTranslateService { } override getDefaultLanguage(): string { - return 'en'; + return this.lang; } override setDefaultLanguage(lang: string): void {} diff --git a/projects/element-translate-ng/translate/si-translate.pipe.spec.ts b/projects/element-translate-ng/translate/si-translate.pipe.spec.ts index 078f92208c..ca61591ff3 100644 --- a/projects/element-translate-ng/translate/si-translate.pipe.spec.ts +++ b/projects/element-translate-ng/translate/si-translate.pipe.spec.ts @@ -31,14 +31,15 @@ class TestComponent { @Injectable({ providedIn: 'root' }) class SiAsyncTranslateService extends SiTranslateService { + private readonly lang = 'en'; translationPrefixer = new BehaviorSubject>('translated'); override get currentLanguage(): string { - return 'en'; + return this.lang; } override get availableLanguages(): string[] { - return ['en']; + return [this.lang]; } override setCurrentLanguage(lang: string): Observable { @@ -46,7 +47,7 @@ class SiAsyncTranslateService extends SiTranslateService { } override getDefaultLanguage(): string { - return 'en'; + return this.lang; } override setDefaultLanguage(lang: string): void {} diff --git a/projects/element-translate-ng/translate/si-translate.service.ts b/projects/element-translate-ng/translate/si-translate.service.ts index 4f82ca3198..307fe4599b 100644 --- a/projects/element-translate-ng/translate/si-translate.service.ts +++ b/projects/element-translate-ng/translate/si-translate.service.ts @@ -37,7 +37,7 @@ export abstract class SiTranslateService { /** * The currently used language. */ - abstract get currentLanguage(): string | undefined; + abstract currentLanguage: string | null; /** * Sets a new language to be used. If needed, loads the language file. diff --git a/projects/live-preview/assets/angular/package.json b/projects/live-preview/assets/angular/package.json index 9855a03cd0..764f0a107c 100644 --- a/projects/live-preview/assets/angular/package.json +++ b/projects/live-preview/assets/angular/package.json @@ -16,7 +16,7 @@ "@angular/router": "21.0.8", "@ngx-formly/bootstrap": "6.3.12", "@ngx-formly/core": "6.3.12", - "@ngx-translate/core": "17.0.0", + "@ngx-translate/core": "18.0.0", "@siemens/charts-ng": "49.10.0", "@siemens/dashboards-ng": "49.10.0", "@siemens/element-ng": "49.10.0", diff --git a/src/app/examples/si-navbar/si-navbar-primary-select-settings.ts b/src/app/examples/si-navbar/si-navbar-primary-select-settings.ts index 1543472084..0696fa4d75 100644 --- a/src/app/examples/si-navbar/si-navbar-primary-select-settings.ts +++ b/src/app/examples/si-navbar/si-navbar-primary-select-settings.ts @@ -42,7 +42,8 @@ export class SampleComponent { private translate = inject(TranslateService); private themeService = inject(SiThemeService); private currentTheme = this.themeService.resolvedColorScheme; - private currentLanguage = (this.translate.currentLang || this.translate.getBrowserLang()) ?? 'en'; + private currentLanguage = + (this.translate.currentLang() || this.translate.getBrowserLang()) ?? 'en'; accountItems: MenuItem[] = [ { title: 'APP.NAV.LANGUAGE', icon: 'element-language', items: this.languageItems },