From 6cb1ad410159efe29f5cc45c821edbd019284f86 Mon Sep 17 00:00:00 2001
From: Cilibiu Bogdan <pionnegru@users.noreply.github.com>
Date: Tue, 7 May 2019 09:33:09 +0300
Subject: [PATCH] [ACA-2374] Sidenav - RTL support (#1098)

* add rtl HostBinding

* sidenav direction input

* remove unused style

* rtl style changes

* test
---
 .../app-layout/app-layout.component.html       |  1 +
 .../components/sidenav/sidenav.component.scss  | 10 ++++++++++
 .../sidenav/sidenav.component.spec.ts          | 18 ++++++++++++++++++
 .../sidenav/sidenav.component.theme.scss       |  4 ----
 .../components/sidenav/sidenav.component.ts    |  8 +++++++-
 5 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/app/components/layout/app-layout/app-layout.component.html b/src/app/components/layout/app-layout/app-layout.component.html
index b114dc453..e9d3761e2 100644
--- a/src/app/components/layout/app-layout/app-layout.component.html
+++ b/src/app/components/layout/app-layout/app-layout.component.html
@@ -23,6 +23,7 @@
     <adf-sidenav-layout-navigation>
       <ng-template let-isMenuMinimized="isMenuMinimized">
         <app-sidenav
+          [direction]="direction"
           [mode]="isMenuMinimized() ? 'collapsed' : 'expanded'"
           [attr.data-automation-id]="
             isMenuMinimized() ? 'collapsed' : 'expanded'
diff --git a/src/app/components/sidenav/sidenav.component.scss b/src/app/components/sidenav/sidenav.component.scss
index 9f8f19998..a90cde3e7 100644
--- a/src/app/components/sidenav/sidenav.component.scss
+++ b/src/app/components/sidenav/sidenav.component.scss
@@ -102,3 +102,13 @@
     align-items: center;
   }
 }
+
+.app-sidenav-rtl {
+  .action-button .action-button__label {
+    margin-right: 8px !important;
+  }
+
+  .mat-expansion-panel-header {
+    padding: 0 0 0 8px !important;
+  }
+}
diff --git a/src/app/components/sidenav/sidenav.component.spec.ts b/src/app/components/sidenav/sidenav.component.spec.ts
index ea5f1601f..969c72aaf 100644
--- a/src/app/components/sidenav/sidenav.component.spec.ts
+++ b/src/app/components/sidenav/sidenav.component.spec.ts
@@ -74,4 +74,22 @@ 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);
+  });
 });
diff --git a/src/app/components/sidenav/sidenav.component.theme.scss b/src/app/components/sidenav/sidenav.component.theme.scss
index 04c83e59f..afbd133d3 100644
--- a/src/app/components/sidenav/sidenav.component.theme.scss
+++ b/src/app/components/sidenav/sidenav.component.theme.scss
@@ -45,10 +45,6 @@
       font-size: 14px !important;
     }
 
-    .mat-expansion-panel-header-title > span {
-      margin-left: 0 !important;
-    }
-
     .action-button--active {
       color: mat-color($accent) !important;
     }
diff --git a/src/app/components/sidenav/sidenav.component.ts b/src/app/components/sidenav/sidenav.component.ts
index 83179b534..0c00cc729 100755
--- a/src/app/components/sidenav/sidenav.component.ts
+++ b/src/app/components/sidenav/sidenav.component.ts
@@ -30,7 +30,8 @@ import {
   TemplateRef,
   OnInit,
   ViewEncapsulation,
-  OnDestroy
+  OnDestroy,
+  HostBinding
 } from '@angular/core';
 import { CollapsedTemplateDirective } from './directives/collapsed-template.directive';
 import { ExpandedTemplateDirective } from './directives/expanded-template.directive';
@@ -50,6 +51,7 @@ 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;
@@ -60,6 +62,10 @@ 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