rtl configuraation (#4482)

demo-shell/src/app/app.component.html

@@ -1,2 +1,4 @@
-<router-outlet></router-outlet>
+<div [dir]="textOrientation" class="adf-demo-app-container" >
-<router-outlet name="overlay"></router-outlet>
+    <router-outlet></router-outlet>
+    <router-outlet name="overlay"></router-outlet>
+</div>

demo-shell/src/app/app.component.scss

@@ -7,6 +7,11 @@ router-outlet[name='overlay'] + * {
     right: 0;
 }
 
+.adf-demo-app-container {
+    height: 100%;
+    width: 100%;
+}
+
 @media (max-width: 425px) {
     adf-content-node-selector {
         .adf-content-node-selector-content-list {

demo-shell/src/app/app.component.ts

@@ -16,7 +16,12 @@
  */
 
 import { Component, ViewEncapsulation, OnInit } from '@angular/core';
-import { AuthenticationService, AlfrescoApiService, PageTitleService } from '@alfresco/adf-core';
+import {
+    UserPreferencesService,
+    AuthenticationService,
+    AlfrescoApiService,
+    PageTitleService
+} from '@alfresco/adf-core';
 import { Router } from '@angular/router';
 import { MatDialog } from '@angular/material';
 
@@ -28,14 +33,24 @@ import { MatDialog } from '@angular/material';
 })
 export class AppComponent implements OnInit {
 
+    textOrientation: string = 'ltr';
+
     constructor(private pageTitleService: PageTitleService,
                 private alfrescoApiService: AlfrescoApiService,
                 private authenticationService: AuthenticationService,
+                private userPreferencesService: UserPreferencesService,
                 private router: Router,
                 private dialogRef: MatDialog) {
+
+        this.userPreferencesService.set('textOrientation', this.textOrientation);
+
     }
 
     ngOnInit() {
+        this.userPreferencesService.select('textOrientation').subscribe((textOrientation) => {
+            this.textOrientation = textOrientation;
+        });
+
         this.pageTitleService.setTitle('title');
 
         this.alfrescoApiService.getInstance().on('error', (error) => {

demo-shell/src/app/components/config-editor/config-editor.component.html

@@ -76,6 +76,13 @@
                 <mat-icon>info</mat-icon>
             </button>
         </mat-list-item>
+
+        <mat-list-item (click)="textOrientationClick()">
+            <a matLine id="adf-page-orientation-conf">Page Orientation</a>
+            <button mat-icon-button>
+                <mat-icon>info</mat-icon>
+            </button>
+        </mat-list-item>
     </mat-nav-list>
 
     <div>

demo-shell/src/app/components/config-editor/config-editor.component.ts

@@ -85,6 +85,19 @@ export class ConfigEditorComponent {
         this.indentCode();
     }
 
+    textOrientationClick() {
+        this.isUserPreference = true;
+        this.userPreferenceProperty = 'textOrientation';
+
+        this.userPreferencesService.select( this.userPreferenceProperty).subscribe((textOrientation: number) => {
+            this.code = JSON.stringify(textOrientation);
+            this.field = 'textOrientation';
+            this.indentCode();
+        });
+
+        this.indentCode();
+    }
+
     searchConfClick() {
         this.isUserPreference = false;
         this.code = JSON.stringify(this.appConfig.config['search']);