DO NOT MERGE!! [WF-2017] Allow overriding translations from parent components or app using pro…

apps/golden-sample-app/src/app/app.component.html

@@ -13,40 +13,24 @@
   <nav class="bb-layout__topbar">
     <!-- Skip to content -->
     <button
-      aria-label="skip to content"
-      i18n-aria-label="
-        Move focus to beginning of content - 'skip to content'|This string is
-        used as the aria-label for a button that moves the focus to the
-        beginning of the content. It is presented to the user as an
-        accessibility feature to quickly navigate to the main content section.
-        This aria-label is located in the topbar area of the
-        layout.@@move-focus-to-beginning-of-content"
+      [ariaLabel]="translations['move-focus-to-beginning-of-content']"
       class="bb-layout__skip-to-content"
       (click)="focusMainContainer($event)"
-      i18n="
-        Skip to content - 'Skip to content'|This string is used as the text for
-        a button that moves the focus to the beginning of the content. It is
-        presented to the user as an accessibility feature to quickly navigate to
-        the main content section. This text is located in the topbar area of the
-        layout.@@skip-to-content"
     >
-      Skip to Content
+      {{ translations['skip-to-content'] }}
     </button>
 
     <!-- Hamburger -->
     <button
       class="bb-layout__nav-expand-marker"
-      aria-label="Toggle sidebar"
-      i18n-aria-label="
-        Sidebar Toggler - 'Toggle sidebar'|This string is used as the aria-label
-        for a button that toggles the sidebar state. It is presented to the user
-        as an accessibility feature to indicate the button's function. This
-        aria-label is located in the topbar area of the
-        layout.@@bb-layout.sidebar_toggler"
-      [attr.aria-expanded]="layoutService.navigationExpanded$ | async"
+      [ariaLabel]="translations['bb-layout.sidebar_toggler']"
+      [ariaExpanded]="layoutService.navigationExpanded$ | async"
       (click)="layoutService.toggleNav()"
     >
       <span class="bb-icon"></span>
+      <span class="sr-only">{{
+        translations['bb-layout.sidebar_toggler']
+      }}</span>
     </button>
 
     <!-- Logo -->
@@ -70,22 +54,16 @@
             class="bb-layout__vertical-nav-item-icon"
             name="payments"
           ></bb-icon-ui>
-          <span
-            class="bb-layout__horizontal-nav-item-description"
-            i18n="
-              Make transfer link - 'Make transfer'|This string is used as the
-              text for a link that navigates to the transfer page. It is
-              presented to the user as a navigation item in the horizontal
-              navigation bar. This text is located in the navigation items
-              section of the layout.@@main.transfer.link.text"
-          >
-            Make transfer
+          <span class="bb-layout__horizontal-nav-item-description">
+            {{ translations['main.transfer.link.text'] }}
           </span>
         </a>
       </li>
       <li
         class="bb-layout__horizontal-nav-item"
-        *bbIfEntitlements="'EntPayments.AchPositivePay.create AND EntPayments.ManagePositivePay.create OR EntPayments.AchPositivePay.view'"
+        *bbIfEntitlements="
+          'EntPayments.AchPositivePay.create AND EntPayments.ManagePositivePay.create OR EntPayments.AchPositivePay.view'
+        "
       >
         <a
           class="bb-layout__horizontal-nav-link"
@@ -101,17 +79,16 @@
             name="transactions"
             size="md"
           ></bb-icon-ui>
-          <span
-            class="bb-layout__horizontal-nav-item-description"
-            i18n="transactions list link@@main.transactions.link.text"
-          >
-            Entitlements test - No grouping.
+          <span class="bb-layout__horizontal-nav-item-description">
+            {{ translations['main.entitlements-test-no-grouping.text'] }}
           </span>
         </a>
       </li>
       <li
         class="bb-layout__horizontal-nav-item"
-        *bbIfEntitlements="'EntPayments.AchPositivePay.create AND (EntPayments.ManagePositivePay.create OR EntPayments.AchPositivePay.view)'"
+        *bbIfEntitlements="
+          'EntPayments.AchPositivePay.create AND (EntPayments.ManagePositivePay.create OR EntPayments.AchPositivePay.view)'
+        "
       >
         <a
           class="bb-layout__horizontal-nav-link"
@@ -127,17 +104,16 @@
             name="transactions"
             size="md"
           ></bb-icon-ui>
-          <span
-            class="bb-layout__horizontal-nav-item-description"
-            i18n="transactions list link@@main.transactions.link.text"
-          >
-            Entitlements test - Grouping.
+          <span class="bb-layout__horizontal-nav-item-description">
+            {{ translations['main.entitlements-test-grouping.text'] }}
           </span>
         </a>
       </li>
       <li
         class="bb-layout__horizontal-nav-item"
-        *bbIfEntitlements="'((EntPayments.ManagePositivePay.create OR EntPayments.AchPositivePay.view) AND EntPayments.AchPositivePay.view) OR EntPayments.ManagePositivePay.create'"
+        *bbIfEntitlements="
+          '((EntPayments.ManagePositivePay.create OR EntPayments.AchPositivePay.view) AND EntPayments.AchPositivePay.view) OR EntPayments.ManagePositivePay.create'
+        "
       >
         <a
           class="bb-layout__horizontal-nav-link"
@@ -153,17 +129,16 @@
             name="transactions"
             size="md"
           ></bb-icon-ui>
-          <span
-            class="bb-layout__horizontal-nav-item-description"
-            i18n="transactions list link@@main.transactions.link.text"
-          >
-            Entitlements test - Nested groups.
+          <span class="bb-layout__horizontal-nav-item-description">
+            {{ translations['main.entitlements-test-nested-groups.text'] }}
           </span>
         </a>
       </li>
       <li
         class="bb-layout__horizontal-nav-item"
-        *bbIfEntitlements="'!((EntPayments.ManagePositivePay.create OR EntPayments.AchPositivePay.view) AND EntPayments.AchPositivePay.view) OR EntPayments.ManagePositivePay.create'"
+        *bbIfEntitlements="
+          '!((EntPayments.ManagePositivePay.create OR EntPayments.AchPositivePay.view) AND EntPayments.AchPositivePay.view) OR EntPayments.ManagePositivePay.create'
+        "
       >
         <a
           class="bb-layout__horizontal-nav-link"
@@ -179,17 +154,20 @@
             name="transactions"
             size="md"
           ></bb-icon-ui>
-          <span
-            class="bb-layout__horizontal-nav-item-description"
-            i18n="transactions list link@@main.transactions.link.text"
-          >
-            Entitlements test - Using NOT operators on groups.
+          <span class="bb-layout__horizontal-nav-item-description">
+            {{
+              translations[
+                'main.entitlements-test-using-not-operators-on-groups.text'
+              ]
+            }}
           </span>
         </a>
       </li>
       <li
         class="bb-layout__horizontal-nav-item"
-        *bbIfEntitlements="'!(!(EntPayments.ManagePositivePay.create OR EntPayments.AchPositivePay.view) AND EntPayments.AchPositivePay.view) OR !EntPayments.ManagePositivePay.create'"
+        *bbIfEntitlements="
+          '!(!(EntPayments.ManagePositivePay.create OR EntPayments.AchPositivePay.view) AND EntPayments.AchPositivePay.view) OR !EntPayments.ManagePositivePay.create'
+        "
       >
         <a
           class="bb-layout__horizontal-nav-link"
@@ -205,11 +183,12 @@
             name="transactions"
             size="md"
           ></bb-icon-ui>
-          <span
-            class="bb-layout__horizontal-nav-item-description"
-            i18n="transactions list link@@main.transactions.link.text"
-          >
-            Entitlements test - Using multiple NOT operators on groups.
+          <span class="bb-layout__horizontal-nav-item-description">
+            {{
+              translations[
+                'main.entitlements-test-using-multiple-not-operators-on-groups.text'
+              ]
+            }}
           </span>
         </a>
       </li>
@@ -231,16 +210,8 @@
             name="transactions"
             size="md"
           ></bb-icon-ui>
-          <span
-            class="bb-layout__horizontal-nav-item-description"
-            i18n="
-              Transactions list link - 'Transactions List'|This string is used
-              as the text for a link that navigates to the transactions list
-              page. It is presented to the user as a navigation item in the
-              horizontal navigation bar. This text is located in the navigation
-              items section of the layout.@@main.transactions.link.text"
-          >
-            Transactions List
+          <span class="bb-layout__horizontal-nav-item-description">
+            {{ translations['main.transactions.link.text'] }}
           </span>
         </a>
       </li>
@@ -261,16 +232,8 @@
             class="bb-layout__vertical-nav-item-icon"
             name="note"
           ></bb-icon-ui>
-          <span
-            class="bb-layout__horizontal-nav-item-description"
-            i18n="
-              Positive pay link - 'Positive Pay'|This string is used as the text
-              for a link that navigates to the Positive Pay page. It is
-              presented to the user as a navigation item in the horizontal
-              navigation bar. This text is located in the navigation items
-              section of the layout.@@main.positive-pay.link.text"
-          >
-            Positive Pay
+          <span class="bb-layout__horizontal-nav-item-description">
+            {{ translations['main.positive-pay.link.text'] }}
           </span>
         </a>
       </li>
@@ -292,16 +255,8 @@
             name="verified-user"
           ></bb-icon-ui>
 
-          <span
-            class="bb-layout__horizontal-nav-item-description"
-            i18n="
-              Ach Positive pay link - 'ACH Positive Pay'|This string is used as
-              the text for a link that navigates to the ACH Positive Pay page.
-              It is presented to the user as a navigation item in the horizontal
-              navigation bar. This text is located in the navigation items
-              section of the layout.@@main.ach-positive-pay.link.text"
-          >
-            ACH Positive Pay
+          <span class="bb-layout__horizontal-nav-item-description">
+            {{ translations['main.ach-positive-pay.link.text'] }}
           </span>
         </a>
       </li>
@@ -320,16 +275,8 @@
             name="verified-user"
           ></bb-icon-ui>
 
-          <span
-            class="bb-layout__horizontal-nav-item-description"
-            i18n="
-              Make a Payment Link - 'Make internal payment'|This string is used
-              as the text for a link that navigates to the internal payment
-              page. It is presented to the user as a navigation item in the
-              horizontal navigation bar. This text is located in the navigation
-              items section of the layout.@@main.make-a-payment.link.text"
-          >
-            Make internal payment
+          <span class="bb-layout__horizontal-nav-item-description">
+            {{ translations['main.make-a-payment.link.text'] }}
           </span>
         </a>
       </li>
@@ -350,7 +297,12 @@
           ></bb-icon-ui>
         </a>
 
-        <a href="#" (click)="logout()" data-role="logout-btn" aria-label="Logout">
+        <a
+          href="#"
+          (click)="logout()"
+          data-role="logout-btn"
+          aria-label="Logout"
+        >
           <bb-icon-ui
             color="secondary"
             data-role="notifications-icon"

apps/golden-sample-app/src/app/app.component.scss

@@ -1,3 +1,14 @@
 .main-content {
   padding: 20px;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
 }

apps/golden-sample-app/src/app/app.component.spec.ts

@@ -6,6 +6,7 @@ import { OAuthService } from 'angular-oauth2-oidc';
 import { of } from 'rxjs';
 import { AppComponent } from './app.component';
 import { environment } from '../environments/environment';
+import { APP_TRANSLATIONS } from './translations-catalog';
 
 describe('AppComponent', () => {
   let fixture: ComponentFixture<AppComponent>;
@@ -27,6 +28,7 @@ describe('AppComponent', () => {
       providers: [
         { provide: LayoutService, useValue: mockLayoutService },
         { provide: OAuthService, useValue: mockOAuthService },
+        { provide: APP_TRANSLATIONS, useValue: {} },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();

apps/golden-sample-app/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, Optional } from '@angular/core';
+import { Component, Inject, Optional } from '@angular/core';
 import { LayoutService } from '@backbase/ui-ang/layout';
 import { triplets } from './services/entitlementsTriplets';
 import { OAuthService } from 'angular-oauth2-oidc';
@@ -7,23 +7,45 @@ import {
   Tracker,
 } from '@backbase/foundation-ang/observability';
 import { environment } from '../environments/environment';
+import {
+  APP_TRANSLATIONS,
+  AppTranslations,
+  appTranslations,
+} from './translations-catalog';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  standalone: false,
 })
 export class AppComponent {
   triplets = triplets;
   isAuthenticated = false;
+  private readonly defaultTranslations: AppTranslations = appTranslations;
+  public readonly translations: AppTranslations;
 
   constructor(
-    private oAuthService: OAuthService,
+    private readonly oAuthService: OAuthService,
     public layoutService: LayoutService,
+    @Inject(APP_TRANSLATIONS)
+    private readonly overridingTranslations: Partial<AppTranslations>,
     @Optional() private readonly tracker?: Tracker
   ) {
     this.isAuthenticated =
       environment.mockEnabled ?? oAuthService.hasValidAccessToken();
+    // If APP_TRANSLATIONS is not provided, set the default value as an empty object
+    this.overridingTranslations = this.overridingTranslations || {};
+
+    this.translations = {
+      ...this.defaultTranslations,
+      ...Object.fromEntries(
+        Object.entries(this.overridingTranslations).map(([key, value]) => [
+          key,
+          value ?? this.defaultTranslations[key],
+        ])
+      ),
+    };
   }
 
   logout(): void {

apps/golden-sample-app/src/app/app.module.ts

@@ -54,6 +54,7 @@ import { ApiSandboxInterceptor } from '../environments/api-sandbox-interceptor';
 import packageInfo from 'package-json';
 import { ThemeSwitcherModule } from './theme-switcher/theme-switcher.component.module';
 import { ThemeManagerService } from './theme-switcher/theme-service';
+import { APP_TRANSLATIONS } from './translations-catalog';
 
 @NgModule({
   declarations: [AppComponent],
@@ -94,7 +95,7 @@ import { ThemeManagerService } from './theme-switcher/theme-service';
     ActivityMonitorModule,
   ],
   providers: [
-    ...(environment.mockProviders || []),
+    ...(environment.mockProviders ?? []),
     { provide: AuthConfig, useValue: authConfig },
     {
       provide: HTTP_INTERCEPTORS,
@@ -184,6 +185,10 @@ import { ThemeManagerService } from './theme-switcher/theme-service';
     },
     ThemeManagerService,
     provideHttpClient(withInterceptorsFromDi()),
+    {
+      provide: APP_TRANSLATIONS,
+      useValue: {},
+    },
   ],
 })
 export class AppModule {}