Merge pull request #27 from StavM/new/rtl

Added RTL support to the project. (rtlLayout configuration key)

README.md

@@ -153,6 +153,7 @@ Using ```configuration```, You can customise the appearance of the list.
 * ```interfaceWithRoute: boolean``` => *[required]* only if you want to use Angular Routing with this menu.
 * ```highlightOnSelect: boolean``` => *[optional]* If you want to highlight the clicked item in the list, then you can do that by making it ```true```. The default value will be ```false```.
 * ```collapseOnSelect: boolean;``` => *[optional]* You have the option to collapse another parent when clicked on the current parent. The default value will be ```false```. 
+* ```rtlLayout: boolean;``` => *[optional]* whether display is Right To Left. The default value will be ```false```. 
 * ```classname: string;``` => *[optional]* You can give your own custom class name in order to modify the list appearance. 
 * ```listBackgroundColor: string;``` => *[optional]* You can apply custom color to the background of the list.
 * ```fontColor: string;``` => *[optional]* Changes the color of Text and icons inside the list.
@@ -170,7 +171,8 @@ config = {
     backgroundColor: `rgb(208, 241, 239)`,
     selectedListFontColor: `red`,
     highlightOnSelect: true,
-    collapseOnSelect: true
+    collapseOnSelect: true,
+    rtlLayout: false
 };
 ```
 
@@ -182,6 +184,6 @@ config = {
 
 I welcome you to fork and add more features into it. If you have any bugs or feature request, please create an issue at [github repository](https://github.com/ShankyTiwari/ng-material-multilevel-menu/issues).
 
-## Leicense
+## License
 
-MIT
+MIT

projects/ng-material-multilevel-menu/src/lib/app.model.ts

@@ -21,6 +21,7 @@ export interface Configuration {
     interfaceWithRoute?: boolean;
     collapseOnSelect?: boolean;
     highlightOnSelect?: boolean;
+    rtlLayout?: boolean;
 }
 
 export interface BackgroundStyle {

projects/ng-material-multilevel-menu/src/lib/list-item/list-item.component.css

@@ -12,18 +12,28 @@
   height: 48px;
 }
 
-.amml-icon {
-  line-height: 48px;
-  margin-right: 15px;
-}
-
 .amml-icon-fa {
   font-size: 20px;
 }
 
 .label{
   line-height: 48px;
 }
-.amml-submenu {
+
+.amml-icon {
+  line-height: 48px;
+}
+
+div[dir="ltr"] .amml-icon {
+  margin-right: 15px;
+}
+div[dir="ltr"] .amml-submenu {
   margin-left: 16px;
 }
+
+div[dir="rtl"] .amml-icon {
+  margin-left: 15px;
+}
+div[dir="rtl"] .amml-submenu {
+  margin-right: 16px;
+}

projects/ng-material-multilevel-menu/src/lib/list-item/list-item.component.html

@@ -1,6 +1,6 @@
 <mat-list-item matRipple [ngClass]="selectedListClasses" *ngIf="!node.hidden" (click)="expand(node)" title="{{node.label}}"
   [ngStyle]="getListStyle()">
-  <div class="anml-data">
+  <div class="anml-data" [dir]="isRtlLayout() ? 'rtl' : 'ltr'">
     <span *ngIf="node.faIcon" class="amml-icon amml-icon-fa">
       <i [ngClass]="node.faIcon"></i>
     </span>
@@ -9,17 +9,22 @@
     </mat-icon>
     <span class="label">{{node.label}}</span>
   </div>
-  <mat-icon *ngIf='hasItems()' [@isExpanded]="hasItems() && expanded ? 'yes' : 'no'">
-    keyboard_arrow_down
-  </mat-icon>
+  <ng-container *ngIf='hasItems()'>
+    <mat-icon *ngIf='!isRtlLayout()' [@isExpandedLTR]="hasItems() && expanded ? 'yes' : 'no'">
+      keyboard_arrow_down
+    </mat-icon>
+    <mat-icon *ngIf='isRtlLayout()'  [@isExpandedRTL]="hasItems() && expanded ? 'yes' : 'no'">
+      keyboard_arrow_down
+    </mat-icon>
+  </ng-container>
 </mat-list-item>
 
 <mat-divider></mat-divider>
 
-<div *ngIf="hasItems() && expanded" [@slideInOut] [ngClass]="classes">
-  <ng-list-item *ngFor="let singleNode of nodeChildren" 
-    [nodeConfiguration]='nodeConfiguration' 
-    [node]='singleNode' 
+<div *ngIf="hasItems() && expanded" [@slideInOut] [ngClass]="classes" [dir]="isRtlLayout() ? 'rtl' : 'ltr'">
+  <ng-list-item *ngFor="let singleNode of nodeChildren"
+    [nodeConfiguration]='nodeConfiguration'
+    [node]='singleNode'
     [level]="level + 1"
     [selectedNode]='selectedNode'
     (selectedItem)="selectedListItem($event)">

projects/ng-material-multilevel-menu/src/lib/list-item/list-item.component.ts

@@ -29,10 +29,21 @@ import { CONSTANT } from './../constants';
         ])
       ])
     ]),
-    trigger('isExpanded', [
+    trigger('isExpandedLTR', [
       state('no', style({ transform: 'rotate(-90deg)' })),
       state('yes', style({ transform: 'rotate(0deg)', })),
 
+      transition('no => yes',
+        animate(300)
+      ),
+      transition('yes => no',
+        animate(300)
+      )
+    ]),
+    trigger('isExpandedRTL', [
+      state('no', style({ transform: 'rotate(90deg)' })),
+      state('yes', style({ transform: 'rotate(0deg)', })),
+
       transition('no => yes',
         animate(300)
       ),
@@ -106,6 +117,9 @@ export class ListItemComponent implements OnChanges {
   hasItems(): boolean {
     return this.nodeChildren.length > 0 ? true : false;
   }
+  isRtlLayout(): boolean {
+    return this.nodeConfiguration.rtlLayout;
+  }
   setClasses(): void {
     this.classes = {
       ['level-' + this.level]: true,

projects/ng-material-multilevel-menu/src/lib/ng-material-multilevel-menu.component.css

@@ -12,19 +12,30 @@
   justify-content: start;
 }
 
+.amml-icon-fa {
+  font-size: 20px;
+}
+
 .amml-icon {
   line-height: 48px;
-  margin-right: 15px;
 }
 
-.amml-icon-fa {
-  font-size: 20px;
+.active {
+  color: #1976d2;
 }
 
-.amml-submenu {
+div[dir="ltr"] .amml-icon {
+  margin-right: 15px;
+}
+div[dir="ltr"] .amml-submenu {
   margin-left: 16px;
 }
 
-.active {
-  color: #1976d2;
-}
+div[dir="rtl"] .amml-icon {
+  margin-left: 15px;
+}
+div[dir="rtl"] .amml-submenu {
+  margin-right: 16px;
+}
+
+

projects/ng-material-multilevel-menu/src/lib/ng-material-multilevel-menu.component.html

@@ -1,10 +1,10 @@
-<div [ngClass]="getClassName()" [ngStyle]="getGlobalStyle()" *ngIf='items.length !== 0'>
+<div [ngClass]="getClassName()" [ngStyle]="getGlobalStyle()" *ngIf='items.length !== 0' [dir]="isRtlLayout() ? 'rtl' : 'ltr'">
   <mat-list>
-    <ng-list-item 
-      *ngFor="let node of items" 
-      [nodeConfiguration]='nodeConfig' 
-      [node]='node' 
-      [selectedNode]='currentNode' 
+    <ng-list-item
+      *ngFor="let node of items"
+      [nodeConfiguration]='nodeConfig'
+      [node]='node'
+      [selectedNode]='currentNode'
       (selectedItem)="selectedListItem($event)
     ">
     </ng-list-item>

projects/ng-material-multilevel-menu/src/lib/ng-material-multilevel-menu.component.ts

@@ -23,7 +23,8 @@ export class NgMaterialMultilevelMenuComponent implements OnInit, OnChanges {
     selectedListFontColor: null,
     interfaceWithRoute: null,
     collapseOnSelect: null,
-    highlightOnSelect: false
+    highlightOnSelect: false,
+    rtlLayout: false,
   };
   isInvalidConfig = true;
   constructor(
@@ -106,6 +107,11 @@ export class NgMaterialMultilevelMenuComponent implements OnInit, OnChanges {
         typeof config.highlightOnSelect === 'boolean') {
         this.nodeConfig.highlightOnSelect = config.highlightOnSelect;
       }
+      if (config.rtlLayout !== null &&
+        config.rtlLayout !== undefined &&
+        typeof config.rtlLayout === 'boolean') {
+        this.nodeConfig.rtlLayout = config.rtlLayout;
+      }
     }
   }
   getClassName(): string {
@@ -132,6 +138,9 @@ export class NgMaterialMultilevelMenuComponent implements OnInit, OnChanges {
       return styles;
     }
   }
+  isRtlLayout(): boolean {
+    return this.nodeConfig.rtlLayout;
+  }
   selectedListItem(event: MultilevelNodes): void {
     this.currentNode = event;
     if (event.items === undefined && !event.onSelected) {

src/app/constants.ts

@@ -76,7 +76,8 @@ export const constant = {
         paddingAtStart: true,
         interfaceWithRoute: true,
         collapseOnSelect: true,
-        highlightOnSelect: false
+        highlightOnSelect: false,
+        rtlLayout: false
     },
     appItems: [
         {