[ACA] 3.3.0 alpha update (#1108)

* update to 3.3.0 alpha

* add arabic language

* layout orientation support

* take direction from parent

* set direction based on language locale on initialization

* test

src/app/components/layout/app-layout/app-layout.component.html

@@ -7,6 +7,7 @@
     [hideSidenav]="hideSidenav"
     [expandedSidenav]="expandedSidenav"
     (expanded)="onExpanded($event)"
+    [direction]="direction"
   >
     <adf-sidenav-layout-header>
       <ng-template>
@@ -23,7 +24,6 @@
     <adf-sidenav-layout-navigation>
       <ng-template let-isMenuMinimized="isMenuMinimized">
         <app-sidenav
-          [direction]="direction"
           [mode]="isMenuMinimized() ? 'collapsed' : 'expanded'"
           [attr.data-automation-id]="
             isMenuMinimized() ? 'collapsed' : 'expanded'

src/app/components/layout/app-layout/app-layout.component.spec.ts

@@ -79,13 +79,16 @@ describe('AppLayoutComponent', () => {
     userPreference = TestBed.get(UserPreferencesService);
   });
 
+  beforeEach(() => {
+    appConfig.config.languages = [];
+    appConfig.config.locale = 'en';
+  });
+
   describe('sidenav state', () => {
     it('should get state from configuration', () => {
-      appConfig.config = {
-        sideNav: {
-          expandedSidenav: false,
-          preserveState: false
-        }
+      appConfig.config.sideNav = {
+        expandedSidenav: false,
+        preserveState: false
       };
 
       fixture.detectChanges();
@@ -94,7 +97,7 @@ describe('AppLayoutComponent', () => {
     });
 
     it('should resolve state to true is no configuration', () => {
-      appConfig.config = {};
+      appConfig.config.sidenav = {};
 
       fixture.detectChanges();
 
@@ -102,11 +105,9 @@ describe('AppLayoutComponent', () => {
     });
 
     it('should get state from user settings as true', () => {
-      appConfig.config = {
-        sideNav: {
-          expandedSidenav: false,
-          preserveState: true
-        }
+      appConfig.config.sideNav = {
+        expandedSidenav: false,
+        preserveState: true
       };
 
       spyOn(userPreference, 'get').and.callFake(key => {
@@ -121,11 +122,9 @@ describe('AppLayoutComponent', () => {
     });
 
     it('should get state from user settings as false', () => {
-      appConfig.config = {
-        sideNav: {
-          expandedSidenav: false,
-          preserveState: true
-        }
+      appConfig.config.sidenav = {
+        expandedSidenav: false,
+        preserveState: true
       };
 
       spyOn(userPreference, 'get').and.callFake(key => {
@@ -196,4 +195,43 @@ describe('AppLayoutComponent', () => {
 
     expect(component.layout.container.toggleMenu).toHaveBeenCalled();
   });
+
+  it('should set direction `ltr` if no direction declared', () => {
+    appConfig.config.languages = [
+      {
+        key: 'en'
+      }
+    ];
+
+    spyOn(userPreference, 'get').and.callFake(key => {
+      if (key === 'locale') {
+        return 'en';
+      }
+    });
+
+    const spy = spyOn(userPreference, 'set');
+    fixture.detectChanges();
+
+    expect(spy.calls.mostRecent().args).toEqual(['textOrientation', 'ltr']);
+  });
+
+  it('should set direction `rtl` based on locale language direction', () => {
+    appConfig.config.languages = [
+      {
+        key: 'en',
+        direction: 'rtl'
+      }
+    ];
+
+    spyOn(userPreference, 'get').and.callFake(key => {
+      if (key === 'locale') {
+        return 'en';
+      }
+    });
+
+    const spy = spyOn(userPreference, 'set');
+    fixture.detectChanges();
+
+    expect(spy.calls.mostRecent().args).toEqual(['textOrientation', 'rtl']);
+  });
 });

src/app/components/layout/app-layout/app-layout.component.ts

@@ -26,7 +26,9 @@
 import {
   AppConfigService,
   SidenavLayoutComponent,
-  UserPreferencesService
+  UserPreferencesService,
+  LanguageItem,
+  AppConfigValues
 } from '@alfresco/adf-core';
 import {
   Component,
@@ -46,6 +48,7 @@ import {
   SetSelectedNodesAction,
   getCurrentFolder
 } from '@alfresco/aca-shared/store';
+import { Directionality } from '@angular/cdk/bidi';
 
 @Component({
   selector: 'app-layout',
@@ -66,6 +69,7 @@ export class AppLayoutComponent implements OnInit, OnDestroy {
 
   minimizeSidenav = false;
   hideSidenav = false;
+  direction: Directionality;
 
   private minimizeConditions: string[] = ['search'];
   private hideConditions: string[] = ['preview'];
@@ -147,6 +151,18 @@ export class AppLayoutComponent implements OnInit, OnDestroy {
         takeUntil(this.onDestroy$)
       )
       .subscribe(() => this.store.dispatch(new SetSelectedNodesAction([])));
+
+    this.userPreferenceService
+      .select('textOrientation')
+      .subscribe((textOrientation: Directionality) => {
+        this.direction = textOrientation;
+      });
+
+    this.userPreferenceService.set(
+      'textOrientation',
+      this.getCurrentLanguage(this.userPreferenceService.get('locale'))
+        .direction || 'ltr'
+    );
   }
 
   ngOnDestroy() {
@@ -205,4 +221,12 @@ export class AppLayoutComponent implements OnInit, OnDestroy {
 
     return expand;
   }
+
+  private getCurrentLanguage(key: string): LanguageItem {
+    return (
+      this.appConfigService
+        .get<Array<LanguageItem>>(AppConfigValues.APP_CONFIG_LANGUAGES_KEY)
+        .find(language => language.key === key) || <LanguageItem>{}
+    );
+  }
 }