[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

package-lock.json

@@ -5,33 +5,33 @@
   "requires": true,
   "dependencies": {
     "@alfresco/adf-content-services": {
-      "version": "3.2.0",
+      "version": "3.3.0-4a363c731be09d8213e25cd149bee302ebcbeb82",
-      "resolved": "https://registry.npmjs.org/@alfresco/adf-content-services/-/adf-content-services-3.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/@alfresco/adf-content-services/-/adf-content-services-3.3.0-4a363c731be09d8213e25cd149bee302ebcbeb82.tgz",
-      "integrity": "sha512-G8+vSL3GTGm2rAtvNgFpCctcX7WwRBoAkvkvwnIWETrl5zYb4ftzvCpSkrj8FKxueE8Ys59oTMOv1o22ev2+AA==",
+      "integrity": "sha512-G4zvUwzVDm5YAK4/eo/U8tMA7osIU5axBhc1JGxRyWR3jcd1E6tVeHDQP+i4X9cQWdYF6fvSOYNS4qqapk8JAg==",
       "requires": {
         "tslib": "^1.9.0"
       }
     },
     "@alfresco/adf-core": {
-      "version": "3.2.0",
+      "version": "3.3.0-4a363c731be09d8213e25cd149bee302ebcbeb82",
-      "resolved": "https://registry.npmjs.org/@alfresco/adf-core/-/adf-core-3.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/@alfresco/adf-core/-/adf-core-3.3.0-4a363c731be09d8213e25cd149bee302ebcbeb82.tgz",
-      "integrity": "sha512-mgDNroAiKjDSOVS3nfc0vYrgGtWt2dUNLfLReU89jvMAiXLVCghA/Gufhjx0t64TOneWofD9hNGV0KuIXx0wFQ==",
+      "integrity": "sha512-7SEJLDr23/JgZDZaw4aD6FDgvnOIfQ5SIh/qJUdhxyD1eC852qpm/OlNRg4zqJ+6so8pvvOqEEqrDgFJvr1OWg==",
       "requires": {
         "tslib": "^1.9.0"
       }
     },
     "@alfresco/adf-extensions": {
-      "version": "3.2.0",
+      "version": "3.3.0-4a363c731be09d8213e25cd149bee302ebcbeb82",
-      "resolved": "https://registry.npmjs.org/@alfresco/adf-extensions/-/adf-extensions-3.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/@alfresco/adf-extensions/-/adf-extensions-3.3.0-4a363c731be09d8213e25cd149bee302ebcbeb82.tgz",
-      "integrity": "sha512-nw7rzgG7WznekyzNQF+unsWITuBfQva2wvTiqRPtimpA1hZWIcxKUWhKf5nkw8nCb8qlgkVIimylZjNZFlsr7A==",
+      "integrity": "sha512-l8VIc3Zg0Nr1mJUGbeC+9oPUdBAtqg5f4NUNedb8vSMumYAyK/p8DvZdEERHPXxRCfrxxGuYvDwxu1IlcZkCZg==",
       "requires": {
         "tslib": "^1.9.0"
       }
     },
     "@alfresco/js-api": {
-      "version": "3.2.0",
+      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-3.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-3.2.1.tgz",
-      "integrity": "sha512-HgB/8M4mSi1mVx7ZDbgrNLP5xZiPUamkNzQI198DkWwQRxXh9V0khEavm82Rr9M5nrLw4VdPUARFLmxsNQwmng==",
+      "integrity": "sha512-qaXftaHqFonWRKRmYxhB2/bEpUh5fvUj6cN+xuKUXIGgt9XxF76NpWkXnEEQLZ0BWg5upd19Q3N1x4E7DiNGUg==",
       "requires": {
         "event-emitter": "0.3.4",
         "superagent": "3.8.2"
@@ -4961,8 +4961,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4983,14 +4982,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5005,20 +5002,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5135,8 +5129,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5148,7 +5141,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5163,7 +5155,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5171,14 +5162,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -5197,7 +5186,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5278,8 +5266,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5291,7 +5278,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5377,8 +5363,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5414,7 +5399,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5434,7 +5418,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5478,14 +5461,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         }
       }
     },

package.json

@@ -37,10 +37,10 @@
   },
   "private": true,
   "dependencies": {
-    "@alfresco/adf-content-services": "3.2.0",
+    "@alfresco/adf-content-services": "3.3.0-4a363c731be09d8213e25cd149bee302ebcbeb82",
-    "@alfresco/adf-core": "3.2.0",
+    "@alfresco/adf-core": "3.3.0-4a363c731be09d8213e25cd149bee302ebcbeb82",
-    "@alfresco/adf-extensions": "3.2.0",
+    "@alfresco/adf-extensions": "3.3.0-4a363c731be09d8213e25cd149bee302ebcbeb82",
-    "@alfresco/js-api": "3.2.0",
+    "@alfresco/js-api": "3.2.1",
     "@angular/animations": "7.2.14",
     "@angular/cdk": "^7.3.7",
     "@angular/common": "7.2.14",

src/app.config.json

@@ -104,6 +104,11 @@
     {
       "key": "sv",
       "label": "Svenska"
+    },
+    {
+      "key": "ar",
+      "label": "Arabic",
+      "direction": "rtl"
     }
   ],
   "content-metadata": {

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 = {
+      appConfig.config.sideNav = {
-        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 = {
+      appConfig.config.sideNav = {
-        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 = {
+      appConfig.config.sidenav = {
-        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 {
+[dir='rtl'] .action-button .action-button__label {
-  .action-button .action-button__label {
   margin-right: 8px !important;
 }
 
-  .mat-expansion-panel-header {
+[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,
+  OnDestroy
-  HostBinding
 } 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