feat(navbar): permite traduzir literais usando serviço i18n

Author: jhosefmarks

projects/ui/src/lib/components/po-navbar/po-navbar-base.component.spec.ts

@@ -3,6 +3,7 @@ import { Directive } from '@angular/core';
 import { expectPropertiesValues } from '../../util-test/util-expect.spec';
 
 import * as utilsFunctions from '../../utils/util';
+import { PoLanguageService } from '../../services/po-language/po-language.service';
 
 import { PoNavbarBaseComponent, poNavbarLiteralsDefault } from './po-navbar-base.component';
 
@@ -12,7 +13,8 @@ export class PoNavbarComponent extends PoNavbarBaseComponent {
 }
 
 describe('PoNavbarBaseComponent:', () => {
-  const component = new PoNavbarComponent();
+  const languageService = new PoLanguageService();
+  const component = new PoNavbarComponent(languageService);
 
   it('should be created', () => {
     expect(component instanceof PoNavbarBaseComponent).toBeTruthy();
@@ -44,47 +46,47 @@ describe('PoNavbarBaseComponent:', () => {
     });
 
     it('literals: should be in portuguese if browser is setted with an unsupported language', () => {
-      spyOn(utilsFunctions, <any>'browserLanguage').and.returnValue('zw');
+      component['language'] = 'zw';
 
       component.literals = {};
 
       expect(component.literals).toEqual(poNavbarLiteralsDefault[utilsFunctions.poLocaleDefault]);
     });
 
     it('literals: should be in portuguese if browser is setted with `pt`', () => {
-      spyOn(utilsFunctions, <any>'browserLanguage').and.returnValue('pt');
+      component['language'] = 'pt';
 
       component.literals = {};
 
       expect(component.literals).toEqual(poNavbarLiteralsDefault.pt);
     });
 
     it('literals: should be in english if browser is setted with `en`', () => {
-      spyOn(utilsFunctions, <any>'browserLanguage').and.returnValue('en');
+      component['language'] = 'en';
 
       component.literals = {};
 
       expect(component.literals).toEqual(poNavbarLiteralsDefault.en);
     });
 
     it('literals: should be in spanish if browser is setted with `es`', () => {
-      spyOn(utilsFunctions, <any>'browserLanguage').and.returnValue('es');
+      component['language'] = 'es';
 
       component.literals = {};
 
       expect(component.literals).toEqual(poNavbarLiteralsDefault.es);
     });
 
     it('literals: should be in russian if browser is setted with `ru`', () => {
-      spyOn(utilsFunctions, <any>'browserLanguage').and.returnValue('ru');
+      component['language'] = 'ru';
 
       component.literals = {};
 
       expect(component.literals).toEqual(poNavbarLiteralsDefault.ru);
     });
 
     it('literals: should accept custom literals', () => {
-      spyOn(utilsFunctions, <any>'browserLanguage').and.returnValue(utilsFunctions.poLocaleDefault);
+      component['language'] = utilsFunctions.poLocaleDefault;
 
       const customLiterals = Object.assign({}, poNavbarLiteralsDefault[utilsFunctions.poLocaleDefault]);
 
@@ -99,7 +101,7 @@ describe('PoNavbarBaseComponent:', () => {
     it('literals: should update property with default literals if is setted with invalid values', () => {
       const invalidValues = [null, undefined, false, true, '', 'literals', 0, 10, [], [1, 2], () => {}];
 
-      spyOn(utilsFunctions, <any>'browserLanguage').and.returnValue(utilsFunctions.poLocaleDefault);
+      component['language'] = utilsFunctions.poLocaleDefault;
 
       expectPropertiesValues(
         component,

projects/ui/src/lib/components/po-navbar/po-navbar-base.component.ts

@@ -1,8 +1,9 @@
 import { Input, Directive } from '@angular/core';
 
-import { browserLanguage, convertToBoolean, poLocaleDefault } from '../../utils/util';
-
+import { convertToBoolean, poLocaleDefault } from '../../utils/util';
+import { PoLanguageService } from '../../services/po-language/po-language.service';
 import { PoMenuComponent } from '../po-menu';
+
 import { PoNavbarIconAction } from './interfaces/po-navbar-icon-action.interface';
 import { PoNavbarItem } from './interfaces/po-navbar-item.interface';
 import { PoNavbarLiterals } from './interfaces/po-navbar-literals.interface';
@@ -35,6 +36,7 @@ export abstract class PoNavbarBaseComponent {
   private _literals: PoNavbarLiterals;
   private _logo: string;
   private _shadow: boolean = false;
+  private language: string = poLocaleDefault;
 
   /**
    * @optional
@@ -89,21 +91,22 @@ export abstract class PoNavbarBaseComponent {
    * </po-navbar>
    * ```
    *
-   *  > O objeto padrão de literais será traduzido de acordo com o idioma do *browser* (pt, en, es).
+   * > O objeto padrão de literais será traduzido de acordo com o idioma do
+   * [`PoI18nService`](/documentation/po-i18n) ou do browser.
    */
   @Input('p-literals') set literals(value: PoNavbarLiterals) {
     if (value instanceof Object && !(value instanceof Array)) {
       this._literals = {
         ...poNavbarLiteralsDefault[poLocaleDefault],
-        ...poNavbarLiteralsDefault[browserLanguage()],
+        ...poNavbarLiteralsDefault[this.language],
         ...value
       };
     } else {
-      this._literals = poNavbarLiteralsDefault[browserLanguage()];
+      this._literals = poNavbarLiteralsDefault[this.language];
     }
   }
   get literals() {
-    return this._literals || poNavbarLiteralsDefault[browserLanguage()];
+    return this._literals || poNavbarLiteralsDefault[this.language];
   }
 
   /**
@@ -168,5 +171,9 @@ export abstract class PoNavbarBaseComponent {
     return this._shadow;
   }
 
+  constructor(languageService: PoLanguageService) {
+    this.language = languageService.getShortLanguage();
+  }
+
   protected abstract validateMenuLogo(): void;
 }

projects/ui/src/lib/components/po-navbar/po-navbar.component.ts

@@ -9,7 +9,9 @@ import {
 } from '@angular/core';
 import { animate, AnimationBuilder, AnimationFactory, AnimationPlayer, keyframes, style } from '@angular/animations';
 
+import { PoLanguageService } from '../../services/po-language/po-language.service';
 import { PoMenuItem } from '../po-menu';
+
 import { PoNavbarBaseComponent } from './po-navbar-base.component';
 import { PoNavbarItem } from './interfaces/po-navbar-item.interface';
 import { PoNavbarItemsComponent } from './po-navbar-items/po-navbar-items.component';
@@ -50,11 +52,12 @@ export class PoNavbarComponent extends PoNavbarBaseComponent implements AfterVie
   @ViewChild(PoNavbarItemsComponent, { static: true }) navbarItems: PoNavbarItemsComponent;
 
   constructor(
+    poLanguageService: PoLanguageService,
     private renderer: Renderer2,
     private builder: AnimationBuilder,
     private changeDetector: ChangeDetectorRef
   ) {
-    super();
+    super(poLanguageService);
     this.windowResizeListener = this.renderer.listen(window, 'resize', this.displayItemsNavigation.bind(this));
   }