[ADF-4543] Language Menu - set layout orientation (#4719)

* language entry interface

* pass language object

* set textOrientation

* tests

* update doc

* add rtl language

demo-shell/src/app.config.json

@@ -96,6 +96,11 @@
     {
       "key": "sv",
       "label": "Swedish"
+    },
+    {
+      "key": "ar",
+      "label": "Arabic",
+      "direction": "rtl"
     }
   ],
   "search": {

docs/core/components/language-menu.component.md

@@ -51,6 +51,17 @@ The component fetches the list of available languages from `app.config.json`:
     ]
 ```
 
+For languages that need RTL orientation, `direction` property must be declared. Default is `ltr`.
+
+
+```json
+    {
+        "key": "...",
+        "label": "...",
+        "direction": "rtl"
+    },
+```
+
 If no `languages` setting is provided, the component shows only the English language.
 
 ### Nested Menu language

lib/core/language-menu/language-menu.component.html

@@ -1,2 +1,2 @@
-<button mat-menu-item *ngFor="let language of languages" (click)="changeLanguage(language.key)">{{language.label}}
+<button mat-menu-item *ngFor="let language of languages" (click)="changeLanguage(language)">{{language.label}}
 </button>

lib/core/language-menu/language-menu.component.spec.ts

@@ -20,12 +20,30 @@ import { AppConfigService } from '../app-config/app-config.service';
 import { LanguageMenuComponent } from './language-menu.component';
 import { setupTestBed } from '../testing/setupTestBed';
 import { CoreTestingModule } from '../testing/core.testing.module';
+import { UserPreferencesService } from '../services/user-preferences.service';
 
 describe('LanguageMenuComponent', () => {
 
     let fixture: ComponentFixture<LanguageMenuComponent>;
     let component: LanguageMenuComponent;
     let appConfig: AppConfigService;
+    let userPreferencesService: UserPreferencesService;
+
+    const languages = <any> [
+        {
+            key: 'fake-key-1',
+            label: 'fake-label-1'
+        },
+        {
+            key: 'fake-key-2',
+            label: 'fake-label-2'
+        },
+        {
+            key: 'fake-key-3',
+            label: 'fake-label-3',
+            direction: 'rtl'
+        }
+    ];
 
     setupTestBed({
         imports: [CoreTestingModule]
@@ -35,6 +53,7 @@ describe('LanguageMenuComponent', () => {
         fixture = TestBed.createComponent(LanguageMenuComponent);
         component = fixture.componentInstance;
         appConfig = TestBed.get(AppConfigService);
+        userPreferencesService = TestBed.get(UserPreferencesService);
     });
 
     afterEach(() => {
@@ -46,27 +65,40 @@ describe('LanguageMenuComponent', () => {
 
         expect(component.languages).toEqual([{ key: 'en', label: 'English' }]);
 
-        appConfig.config.languages = [
+        appConfig.config.languages = languages;
-            {
-                key: 'fake-key-1',
-                label: 'fake-label-1'
-            },
-            {
-                key: 'fake-key-2',
-                label: 'fake-label-2'
-            }
-        ];
 
         component.ngOnInit();
-        expect(component.languages).toEqual([
+        expect(component.languages).toEqual(languages);
-            {
+    });
-                key: 'fake-key-1',
+
-                label: 'fake-label-1'
+    it('should change user preference locale', () => {
-            },
+        appConfig.config.languages = languages;
-            {
+
-                key: 'fake-key-2',
+        userPreferencesService.locale = 'fake-key-2';
-                label: 'fake-label-2'
+
-            }
+        fixture.detectChanges();
-        ]);
+        component.changeLanguage(languages[0]);
+
+        expect(userPreferencesService.locale).toEqual(languages[0].key);
+    });
+
+    it('should set text orientation when laguage direction is declared', () => {
+        appConfig.config.languages = languages;
+        userPreferencesService.locale = 'fake-key-1';
+        const spy = spyOn(userPreferencesService, 'set');
+        fixture.detectChanges();
+
+        component.changeLanguage(languages[2]);
+        expect(spy.calls.mostRecent().args[0]).toBe('textOrientation', 'rtl');
+    });
+
+    it('should change text orientation to default when laguage direction is not declared', () => {
+        appConfig.config.languages = languages;
+        userPreferencesService.locale = 'fake-key-1';
+        const spy = spyOn(userPreferencesService, 'set');
+        fixture.detectChanges();
+
+        component.changeLanguage(languages[1]);
+        expect(spy.calls.mostRecent().args[0]).toBe('textOrientation', 'ltr');
     });
 });

lib/core/language-menu/language-menu.component.ts

@@ -18,6 +18,7 @@
 import { Component, OnInit } from '@angular/core';
 import { AppConfigService, AppConfigValues } from '../app-config/app-config.service';
 import { UserPreferencesService } from '../services/user-preferences.service';
+import { LanguageItem } from './language.interface';
 
 @Component({
     selector: 'adf-language-menu',
@@ -25,7 +26,7 @@ import { UserPreferencesService } from '../services/user-preferences.service';
 })
 export class LanguageMenuComponent implements OnInit {
 
-    languages: Array<any> = [
+    languages: Array<LanguageItem> = [
         { key: 'en', label: 'English'}
     ];
 
@@ -35,14 +36,14 @@ export class LanguageMenuComponent implements OnInit {
     }
 
     ngOnInit() {
-        const languagesConfigApp = this.appConfig.get<Array<any>>(AppConfigValues.APP_CONFIG_LANGUAGES_KEY);
+        const languagesConfigApp = this.appConfig.get<Array<LanguageItem>>(AppConfigValues.APP_CONFIG_LANGUAGES_KEY);
         if (languagesConfigApp) {
             this.languages = languagesConfigApp;
         }
     }
 
-    changeLanguage(lang: string) {
+    changeLanguage(language: LanguageItem) {
-        this.userPreference.locale = lang;
+        this.userPreference.locale = language.key;
+        this.userPreference.set('textOrientation', language.direction || 'ltr');
     }
-
 }

lib/core/language-menu/language.interface.ts

@@ -0,0 +1,24 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Direction } from '@angular/cdk/bidi';
+
+export interface LanguageItem {
+    key: string;
+    label: string;
+    direction?: Direction;
+}

lib/core/language-menu/public-api.ts

@@ -16,5 +16,5 @@
  */
 
 export * from './language-menu.component';
-
+export * from './language.interface';
 export * from './language-menu.module';