feat(ltr): add fallback styles for ltr + additional support.

src/app/app.component.html

@@ -1,11 +1,8 @@
-<td-layout #layout #root="$implicit" [dir]="direction">
+<td-layout #layout>
   <td-navigation-drawer sidenavTitle="Covalent" logo="assets:teradata">
     <md-nav-list>
       <a *ngFor="let item of routes" md-list-item (click)="layout.close()" [routerLink]="[item.route]"><md-icon>{{item.icon}}</md-icon>{{item.title}}</a>
     </md-nav-list>
   </td-navigation-drawer>
-  <a md-fab color="accent" class="mat-fab-postion-bottom fixed" style="z-index: 999; bottom: 15px; margin: 20px; padding: 10px;" (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl'); changeDir(root);" title="Toggle between RTL and LTR"> 
-     {{root.dir.toUpperCase()}}
-  </a>
   <router-outlet></router-outlet>
 </td-layout>

src/app/app.component.ts

@@ -1,6 +1,6 @@
-import { Component, ElementRef, Inject, Renderer } from '@angular/core';
-import { DomSanitizer, DOCUMENT } from '@angular/platform-browser';
-import { MdIconRegistry, Dir } from '@angular/material';
+import { Component } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { MdIconRegistry } from '@angular/material';
 
 import { TranslateService } from '@ngx-translate/core';
 
@@ -36,13 +36,9 @@ export class DocsAppComponent {
     },
   ];
 
-  direction: string = 'ltr';
-
   constructor(private _iconRegistry: MdIconRegistry,
               private _domSanitizer: DomSanitizer,
-              translateService: TranslateService,
-              private el: ElementRef, private renderer: Renderer,
-              @Inject(DOCUMENT) private document: any) {
+              translateService: TranslateService) {
     // Set fallback language
     translateService.setDefaultLang('en');
     // Supported languages
@@ -67,9 +63,4 @@ export class DocsAppComponent {
     this._iconRegistry.addSvgIconInNamespace('assets', 'querygrid',
       this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/querygrid.svg'));
   }
-
-  changeDir(root: Dir): void {
-    this.direction = root._dir;
-    this.renderer.setElementAttribute(this.document.querySelector('html'), 'dir', this.direction);
-  }
 }

src/app/components/components/components.component.html

@@ -1,4 +1,5 @@
 <td-layout-nav-list #navList
+                    #root="$implicit" dir="ltr"
                     logo="assets:teradata"
                     toolbarTitle="Covalent"
                     [opened]="media.registerQuery('gt-sm') | async"
@@ -48,6 +49,17 @@ <h3 md-line> {{item.title}} </h3>
   <div td-toolbar-content layout="row" layout-align="center center" flex>
     <span>Covalent Components &amp; Addons</span>
     <span flex></span>
+    <button md-icon-button [mdMenuTriggerFor]="settingsMenu">
+      <md-icon>more_vert</md-icon>
+    </button>
+    <md-menu #settingsMenu="mdMenu">
+      <button md-menu-item (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl'); changeDir(root.dir)" title="Toggle between RTL and LTR">
+        <md-icon>swap_horiz</md-icon>
+        <span>{{root.dir.toUpperCase()}}</span>
+      </button>
+    </md-menu>
+  </div>
+  <div>
+    <router-outlet></router-outlet>
   </div>
-  <router-outlet></router-outlet>
 </td-layout-nav-list>

src/app/components/components/components.component.ts

@@ -1,4 +1,5 @@
-import { Component, HostBinding, AfterViewInit } from '@angular/core';
+import { Component, HostBinding, AfterViewInit, ElementRef, Inject, Renderer } from '@angular/core';
+import { DOCUMENT } from '@angular/platform-browser';
 import { TdMediaService } from '@covalent/core';
 
 import { fadeAnimation } from '../../app.animations';
@@ -135,10 +136,16 @@ export class ComponentsComponent implements AfterViewInit {
     title: 'NGX-Translate',
   }];
 
-  constructor(public media: TdMediaService) {}
+  constructor(public media: TdMediaService,
+              private _renderer: Renderer,
+              @Inject(DOCUMENT) private _document: HTMLElement) {}
 
   ngAfterViewInit(): void {
     // broadcast to all listener observables when loading the page
     this.media.broadcast();
   }
+
+  changeDir(dir: string): void {
+    this._renderer.setElementAttribute(this._document.querySelector('html'), 'dir', dir);
+  }
 }

src/platform/core/chips/chips.component.scss

@@ -1,3 +1,5 @@
+@import '../common/styles/mixins';
+
 :host {
   display: block;
   padding: 0px 5px 0px 5px;
@@ -6,25 +8,16 @@
     cursor: default;
     border-radius: 16px;
     line-height: 32px;    
-    [dir='ltr'] & { 
-      margin: 8px 8px 0 0;
-    }
-    [dir='rtl'] & { 
-      margin: 8px 0 0 8px;
-    }
+    @include rtl(margin, 8px 8px 0 0, 8px 0 0 8px);
     padding: 0 12px;
     box-sizing: border-box;
     max-width: 100%;
     position: relative;
     md-icon {
       position: relative;
       top: 5px;
-      [dir='ltr'] & { 
-        left: 5px;
-      }
-      [dir='rtl'] & { 
-        right: 5px;
-      }
+      @include rtl(left, 5px, auto);
+      @include rtl(right, auto, 5px);
       height: 18px;
       width: 18px;
       font-size: 19px;

src/platform/core/common/styles/_structure.scss

@@ -109,8 +109,11 @@ input {
   pointer-events: none;
   position: absolute;
   overflow: hidden;  
-  [dir='ltr'] & {left: 0;}
-  [dir='rtl'] & {right:0;}
+  left: 0;
+  [dir='rtl'] & {
+    right:0;
+    left: auto;
+  }
   top: 0;
   width: 100%;
   height: 100%;
@@ -124,8 +127,11 @@ input {
   pointer-events: none;
   position: absolute;
   overflow: hidden;
-  [dir='ltr'] & {left: 0;}
-  [dir='rtl'] & {right:0;}
+  left: 0;
+  [dir='rtl'] & {
+    right:0;
+    left: auto;
+  }
   top: 0;
   width: 100%;
   height: 100%;
@@ -174,8 +180,11 @@ input {
     display: block;
     position: absolute;
     background-color: #fafafa;    
-    [dir='ltr'] & {right: 0;}
-    [dir='rtl'] & {left:0;}
+    right: 0;
+    [dir='rtl'] & {
+      left:0;
+      right: auto;
+    }
     top: 0;
     bottom: 0;
     z-index: $z-index-scroll-mask;

src/platform/core/common/styles/_toolbar.scss

@@ -2,18 +2,26 @@ md-toolbar {
     [md-button] {
         &:first-of-type:not(:last-child) {
 
-            [dir='ltr'] & {margin-left: -6px;}
-            [dir='rtl'] & {margin-right: -6px;}
+            margin-left: -6px;
+            [dir='rtl'] & {
+                margin-right: -6px;
+                margin-left: 0;
+            }
         }
         &:last-of-type:not(:first-child) {
-            [dir='ltr'] & {margin-right: -6px;}
-            [dir='rtl'] & {margin-left: -6px;}
+            margin-right: -6px;
+            [dir='rtl'] & {
+                margin-left: -6px;
+                margin-right: 0;
+            }
         }
     }
     .md-icon-logo {
         margin-right: 10px;
-        [dir='ltr'] & {margin-right: 10px;}
-        [dir='rtl'] & {margin-left: 10px;}
+        [dir='rtl'] & {
+            margin-left: 10px;
+            margin-right: 0;
+        }
     }
     [md-icon-button] {
         margin: 0 6px;

src/platform/core/common/styles/utilities/_pad.scss

@@ -1,7 +1,7 @@
 //
 // Pad (padding)
 // --------------------------------------------------
-
+body {
 	.pad {
 		padding: 20px;
 	}
@@ -53,46 +53,38 @@
 	}
 
 	.pad-right {
-      	[dir='ltr'] & { padding-right: 20px;}
-      	[dir='rtl'] & { padding-left: 20px;}
+    padding-right: 20px;
 	}
 
 
 
 
 	.pad-right-xxl {
-      	[dir='ltr'] & { padding-right: 60px;}
-      	[dir='rtl'] & { padding-left: 60px;}
+    padding-right: 60px;
 	}
 
 	.pad-right-xl {
-      	[dir='ltr'] & { padding-right: 50px;}
-      	[dir='rtl'] & { padding-left: 50px;}
+    padding-right: 50px;
 	}
 
 	.pad-right-lg {
-      	[dir='ltr'] & { padding-right: 40px;}
-      	[dir='rtl'] & { padding-left: 40px;}
+    padding-right: 40px;
 	}
 
 	.pad-right-md {
-      	[dir='ltr'] & { padding-right: 30px;}
-      	[dir='rtl'] & { padding-left: 30px;}
+    padding-right: 30px;
 	}
 
 	.pad-right-sm {
-      	[dir='ltr'] & { padding-right: 10px;}
-      	[dir='rtl'] & { padding-left: 10px;}
+    padding-right: 10px;
 	}
 
 	.pad-right-xs {
-      	[dir='ltr'] & { padding-right: 5px;}
-      	[dir='rtl'] & { padding-left: 5px;}
+    padding-right: 5px;
 	}
 
 	.pad-right-none {
-      	[dir='ltr'] & { padding-right: 0px;}
-      	[dir='rtl'] & { padding-left: 0px;}
+    padding-right: 0px;
 	}
 
 	.pad-bottom {
@@ -124,42 +116,34 @@
 	}
 
 	.pad-left {
-      	[dir='ltr'] & { padding-left: 20px;}
-      	[dir='rtl'] & { padding-right: 20px;}
+    padding-left: 20px;
 	}
 
 	.pad-left-xxl {
-      	[dir='ltr'] & { padding-left: 60px;}
-      	[dir='rtl'] & { padding-right: 60px;}
+    padding-left: 60px;
 	}
 
 	.pad-left-xl {
-      	[dir='ltr'] & { padding-left: 50px;}
-      	[dir='rtl'] & { padding-right: 50px;}
+    padding-left: 50px;
 	}
 
 	.pad-left-lg {
-      	[dir='ltr'] & { padding-left: 40px;}
-      	[dir='rtl'] & { padding-right: 40px;}
+    padding-left: 40px;
 	}
 
 	.pad-left-md {
-      	[dir='ltr'] & { padding-left: 30px;}
-      	[dir='rtl'] & { padding-right: 30px;}
+    padding-left: 30px;
 	}
 
 	.pad-left-sm {
-      	[dir='ltr'] & { padding-left: 10px;}
-      	[dir='rtl'] & { padding-right: 10px;}
+    padding-left: 10px;
 	}
 
 	.pad-left-xs {
-      	[dir='ltr'] & { padding-left: 5px;}
-      	[dir='rtl'] & { padding-right: 5px;}
+    padding-left: 5px;
 	}
 
 	.pad-left-none {
-      	[dir='ltr'] & { padding-left: 0px;}
-      	[dir='rtl'] & { padding-right: 0px;}
+    padding-left: 0px;
 	}
-
+}

src/platform/core/data-table/data-table-cell/data-table-cell.component.scss

@@ -6,12 +6,12 @@
   padding: 0 28px 0 28px;
 
   &:first-child {
-        [dir='ltr'] & { padding-left: 24px;}
-        [dir='rtl'] & { padding-right: 24px;}
+    @include rtl(padding-left, 24px, initial);
+    @include rtl(padding-right, initial, 24px);
   }
   &:last-child {
-        [dir='ltr'] & { padding-right: 24px;}
-        [dir='rtl'] & { padding-left: 24px;}
+    @include rtl(padding-left, initial, 24px);
+    @include rtl(padding-right, 24px, initial);
   }
 
   > * {

src/platform/core/data-table/data-table-column/data-table-column.component.scss

@@ -8,12 +8,12 @@
   position: relative;
 
   &:first-child {
-        [dir='ltr'] & { padding-left: 24px;}
-        [dir='rtl'] & { padding-right: 24px;}
+    @include rtl(padding-left, 24px, initial);
+    @include rtl(padding-right, initial, 24px);
   }
   &:last-child {
-        [dir='ltr'] & { padding-right: 24px;}
-        [dir='rtl'] & { padding-left: 24px;}
+    @include rtl(padding-left, initial, 24px);
+    @include rtl(padding-right, 24px, initial);
   }
 
   md-icon {
@@ -62,14 +62,14 @@
   &.mat-numeric {
   @include rtl(text-align, right, left);
     md-icon.td-data-table-sort-icon {
-        [dir='ltr'] & { margin-left: -22px;}
-        [dir='rtl'] & { margin-right: -22px;}
+        @include rtl(margin-left, -22px, initial);
+        @include rtl(margin-right, initial, -22px);
     }
   }
   &:not(.mat-numeric) {
     md-icon.td-data-table-sort-icon {
-        [dir='ltr'] & { margin-left: 6px;}
-        [dir='rtl'] & { margin-right: 6px;}
+        @include rtl(margin-left, 6px, initial);
+        @include rtl(margin-right, initial, 6px);
     }
   }
-}
+}