[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>{}
+    );
+  }
 }

src/app/components/sidenav/sidenav.component.scss

@@ -103,12 +103,10 @@
   }
 }
 
-.app-sidenav-rtl {
-  .action-button .action-button__label {
-    margin-right: 8px !important;
-  }
-
-  .mat-expansion-panel-header {
-    padding: 0 0 0 8px !important;
-  }
+[dir='rtl'] .action-button .action-button__label {
+  margin-right: 8px !important;
+}
+
+[dir='rtl'] .mat-expansion-panel-header {
+  padding: 0 0 0 8px !important;
 }

src/app/components/sidenav/sidenav.component.spec.ts

@@ -74,22 +74,4 @@ describe('SidenavComponent', () => {
       }
     ]);
   }));
-
-  it('should add RTL class when direction is set to `rtl`', () => {
-    component.direction = 'rtl';
-    fixture.detectChanges();
-
-    expect(
-      fixture.debugElement.nativeElement.classList.contains('app-sidenav-rtl')
-    ).toBe(true);
-  });
-
-  it('should not add RTL class when direction is set to `ltr`', () => {
-    component.direction = 'ltr';
-    fixture.detectChanges();
-
-    expect(
-      fixture.debugElement.nativeElement.classList.contains('app-sidenav-rtl')
-    ).toBe(false);
-  });
 });

src/app/components/sidenav/sidenav.component.ts

@@ -30,8 +30,7 @@ import {
   TemplateRef,
   OnInit,
   ViewEncapsulation,
-  OnDestroy,
-  HostBinding
+  OnDestroy
 } from '@angular/core';
 import { CollapsedTemplateDirective } from './directives/collapsed-template.directive';
 import { ExpandedTemplateDirective } from './directives/expanded-template.directive';
@@ -51,7 +50,6 @@ import { takeUntil, distinctUntilChanged, debounceTime } from 'rxjs/operators';
 })
 export class SidenavComponent implements OnInit, OnDestroy {
   @Input() mode: 'collapsed' | 'expanded' = 'expanded';
-  @Input() direction: 'ltr' | 'rtl' = 'ltr';
 
   @ContentChild(ExpandedTemplateDirective, { read: TemplateRef })
   expandedTemplate;
@@ -62,10 +60,6 @@ export class SidenavComponent implements OnInit, OnDestroy {
   groups: Array<NavBarGroupRef> = [];
   private onDestroy$: Subject<boolean> = new Subject<boolean>();
 
-  @HostBinding('class.app-sidenav-rtl') get isRtlDirection(): boolean {
-    return this.direction === 'rtl';
-  }
-
   constructor(
     private store: Store<AppStore>,
     private extensions: AppExtensionService