[ADF-3512] SidenavLayoutComponent option to show the sidebar on the right (#3768)

* add sidebar end start property

* add demo and test

* fix test

* fix failing test

demo-shell/src/app/components/header-data/header-data.component.html

@@ -13,34 +13,46 @@
                 <option value="warn">Warn</option>
             </select>
             OR
-            <input type="text" name="color" (keyup.enter)="changeColor($event.target.value)" placeholder="hex color code">
+            <input type="text" name="color" (keyup.enter)="changeColor($event.target.value)"
+                   placeholder="hex color code">
             <p>*Choose only one value at a time: either hex code or theme color.</p>
             <p>*press enter for submitting new hex color</p>
         </div>
 
         <div>
             <label>Change title</label>
-            <input type="text" name="title" (keyup.enter)="submitTitle($event.target.value)" placeholder ="{{ 'APP_LAYOUT.APP_NAME' | translate}}">
+            <input type="text" name="title" (keyup.enter)="submitTitle($event.target.value)"
+                   placeholder="{{ 'APP_LAYOUT.APP_NAME' | translate}}">
             <p>*press enter for submitting new title</p>
         </div>
 
         <div>
             <label>Change logo</label>
-            <input type="text" placeholder="URL path" (keyup.enter)="submitLogo($event.target.value)" >
+            <input type="text" placeholder="URL path" (keyup.enter)="submitLogo($event.target.value)">
             <p>*press enter for submitting new logo</p>
         </div>
 
         <div>
             <label>Change logo link</label>
-            <input type="url" placeholder="Redirect URL" (keyup.enter)="submitRedirectUrl($event.target.value)" >
+            <input type="url" placeholder="Redirect URL" (keyup.enter)="submitRedirectUrl($event.target.value)">
             <p>*Input JSON friendly array or explicit string. E.g. ["/test", 33, "user", 11] or "/test"</p>
             <p>*press enter for submitting new link on logo</p>
         </div>
 
         <div>
             <label>Change logo tooltip</label>
-            <input type="text" placeholder="Tooltip text" (keyup.enter)="submitTooltip($event.target.value)" >
+            <input type="text" placeholder="Tooltip text" (keyup.enter)="submitTooltip($event.target.value)">
             <p>*press enter for submitting new tooltip</p>
         </div>
+
+        <div>
+            <label>Sidebar Position </label>
+
+            <mat-radio-group [(ngModel)]="position" (change)="changePosition()">
+                <mat-radio-button value="start">Start</mat-radio-button>
+                <mat-radio-button value="end">End</mat-radio-button>
+            </mat-radio-group>
+        </div>
+
     </mat-card>
 </div>

demo-shell/src/app/components/header-data/header-data.component.ts

@@ -24,8 +24,10 @@ import { HeaderDataService } from './header-data.service';
 })
 export class HeaderDataComponent {
     checkbox = true;
+    position = 'start';
 
-    constructor(private headerService: HeaderDataService) {}
+    constructor(private headerService: HeaderDataService) {
+    }
 
     hideButton() {
         this.headerService.hideMenuButton();
@@ -59,4 +61,8 @@ export class HeaderDataComponent {
             this.headerService.changeTooltip(tooltip);
         }
     }
+
+    changePosition() {
+        this.headerService.changePosition(this.position);
+    }
 }

demo-shell/src/app/components/header-data/header-data.service.ts

@@ -20,38 +20,43 @@ import { Injectable, Output, EventEmitter } from '@angular/core';
 @Injectable()
 export class HeaderDataService {
 
-  show = true;
+    show = true;
 
-  @Output() hideMenu: EventEmitter<boolean> = new EventEmitter();
-  @Output() color: EventEmitter<string> = new EventEmitter();
-  @Output() title: EventEmitter<string> = new EventEmitter();
-  @Output() logo: EventEmitter<string> = new EventEmitter();
-  @Output() redirectUrl: EventEmitter<string|any[]> = new EventEmitter();
-  @Output() tooltip: EventEmitter<string> = new EventEmitter();
+    @Output() hideMenu: EventEmitter<boolean> = new EventEmitter();
+    @Output() color: EventEmitter<string> = new EventEmitter();
+    @Output() title: EventEmitter<string> = new EventEmitter();
+    @Output() logo: EventEmitter<string> = new EventEmitter();
+    @Output() redirectUrl: EventEmitter<string | any[]> = new EventEmitter();
+    @Output() tooltip: EventEmitter<string> = new EventEmitter();
+    @Output() position: EventEmitter<string> = new EventEmitter();
 
-  hideMenuButton() {
-    this.show = !this.show;
-    this.hideMenu.emit(this.show);
-  }
+    hideMenuButton() {
+        this.show = !this.show;
+        this.hideMenu.emit(this.show);
+    }
 
-  changeColor(color: string) {
-    this.color.emit(color);
-  }
+    changeColor(color: string) {
+        this.color.emit(color);
+    }
 
-  changeTitle(title: string) {
-    this.title.emit(title);
+    changeTitle(title: string) {
+        this.title.emit(title);
 
-  }
+    }
 
-  changeLogo(logoPath: string) {
-    this.logo.emit(logoPath);
-  }
+    changeLogo(logoPath: string) {
+        this.logo.emit(logoPath);
+    }
 
-  changeRedirectUrl(redirectUrl: string | any[]) {
-    this.redirectUrl.emit(redirectUrl);
-  }
+    changeRedirectUrl(redirectUrl: string | any[]) {
+        this.redirectUrl.emit(redirectUrl);
+    }
 
-  changeTooltip(tooltip: string) {
-    this.tooltip.emit(tooltip);
-  }
+    changeTooltip(tooltip: string) {
+        this.tooltip.emit(tooltip);
+    }
+
+    changePosition(position) {
+        this.position.emit(position);
+    }
 }