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

.npmrc

@@ -1 +1 @@
-@backbase:registry=https://repo.backbase.com/api/npm/npm-backbase/
+@backbase:registry=https://repo.backbase.com/api/npm/npm-backbase/

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,16 +54,8 @@
             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>
@@ -103,11 +79,8 @@
             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>
@@ -131,11 +104,8 @@
             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>
@@ -159,11 +129,8 @@
             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>
@@ -187,11 +154,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 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>
@@ -215,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>
@@ -241,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>
@@ -271,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>
@@ -302,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>
@@ -330,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>

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,21 +7,31 @@ import {
   Tracker,
 } from '@backbase/foundation-ang/observability';
 import { environment } from '../environments/environment';
+import {
+  APP_TRANSLATIONS,
+  AppTranslations,
+  appTranslations as defaultTranslations,
+} from './translations-catalog';
+import { TranslationsBase } from '@backbase-gsa/shared-translations';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  standalone: false,
 })
-export class AppComponent {
+export class AppComponent extends TranslationsBase<AppTranslations> {
   triplets = triplets;
   isAuthenticated = false;
 
   constructor(
-    private oAuthService: OAuthService,
+    private readonly oAuthService: OAuthService,
     public layoutService: LayoutService,
+    @Inject(APP_TRANSLATIONS)
+    private readonly _translations: Partial<AppTranslations>,
     @Optional() private readonly tracker?: Tracker
   ) {
+    super(defaultTranslations, _translations);
     this.isAuthenticated =
       environment.mockEnabled ?? oAuthService.hasValidAccessToken();
   }

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 {}

apps/golden-sample-app/src/app/auth/activity-monitor/container/activity-monitor.component.ts

@@ -11,6 +11,7 @@ import { filter, map, share, take } from 'rxjs';
   selector: 'app-activity-monitor',
   templateUrl: './activity-monitor.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class ActivityMonitorComponent implements OnInit {
   private readonly events$ = this.activityMonitorService.events.pipe(share());

apps/golden-sample-app/src/app/auth/activity-monitor/layout/activity-monitor-layout.component.ts

@@ -5,6 +5,7 @@ import { NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';
   selector: 'app-activity-monitor-layout',
   templateUrl: './activity-monitor-layout.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class ActivityMonitorLayoutComponent {
   @Input() isOpen = false;

apps/golden-sample-app/src/app/components/view-wrapper/view-wrapper.component.ts

@@ -4,10 +4,11 @@ import { ActivatedRoute } from '@angular/router';
 @Component({
   templateUrl: './view-wrapper.component.html',
   styles: [],
+  standalone: false,
 })
 export class ViewWrapperComponent {
   @Input()
   title = this.route.snapshot.data['title'];
 
-  constructor(private route: ActivatedRoute) {}
+  constructor(private readonly route: ActivatedRoute) {}
 }

apps/golden-sample-app/src/app/custom-payment/components/initiator/initiator.component.ts

@@ -42,6 +42,7 @@ import { InitiatorService } from './initiator.service';
     </div>
   `,
   providers: [InitiatorService],
+  standalone: false,
 })
 
 // The custom component MUST implement PaymentFormField or ActivatableFormField and it should be an Angular form control.
@@ -55,7 +56,7 @@ export class InitiatorComponent implements OnInit, PaymentFormField {
   requiredMessage!: string;
 
   // Form controls based on InitiatorDetails
-  private initiatorFormControls: InitiatorFields[] = [
+  private readonly initiatorFormControls: InitiatorFields[] = [
     InitiatorFields.id,
     InitiatorFields.name,
     InitiatorFields.accountNumber,