feat(directionality): a provider to get the overall directionality

- Looks at the `html` and `body` elements for `dir` attribute and sets the Directionality service value to it
- Whenever someone would try to inject Directionality - if there's a Dir directive up the dom tree it would be provided

fixes #3600

Author: EladBezalel

src/lib/autocomplete/autocomplete-trigger.ts

@@ -17,7 +17,7 @@ import {ConnectedPositionStrategy} from '../core/overlay/position/connected-posi
 import {Observable} from 'rxjs/Observable';
 import {MdOptionSelectionChange, MdOption} from '../core/option/option';
 import {ENTER, UP_ARROW, DOWN_ARROW} from '../core/keyboard/keycodes';
-import {Dir} from '../core/rtl/dir';
+import {Directionality} from '../core/bidi/index';
 import {Subscription} from 'rxjs/Subscription';
 import {Subject} from 'rxjs/Subject';
 import 'rxjs/add/observable/merge';
@@ -101,7 +101,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
 
   constructor(private _element: ElementRef, private _overlay: Overlay,
               private _viewContainerRef: ViewContainerRef,
-              @Optional() private _dir: Dir, private _zone: NgZone,
+              @Optional() private _dir: Directionality, private _zone: NgZone,
               @Optional() @Host() private _inputContainer: MdInputContainer) {}
 
   ngOnDestroy() {

src/lib/autocomplete/autocomplete.spec.ts

@@ -5,7 +5,7 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MdAutocompleteModule, MdAutocompleteTrigger} from './index';
 import {OverlayContainer} from '../core/overlay/overlay-container';
 import {MdInputModule} from '../input/index';
-import {Dir, LayoutDirection} from '../core/rtl/dir';
+import {Directionality, Direction} from '../core/bidi/index';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {Subscription} from 'rxjs/Subscription';
 import {ENTER, DOWN_ARROW, SPACE, UP_ARROW} from '../core/keyboard/keycodes';
@@ -22,7 +22,7 @@ import 'rxjs/add/operator/map';
 
 describe('MdAutocomplete', () => {
   let overlayContainerElement: HTMLElement;
-  let dir: LayoutDirection;
+  let dir: Direction;
 
   beforeEach(async(() => {
     dir = 'ltr';
@@ -51,7 +51,7 @@ describe('MdAutocomplete', () => {
 
           return {getContainerElement: () => overlayContainerElement};
         }},
-        {provide: Dir, useFactory: () => {
+        {provide: Directionality, useFactory: () => {
           return {value: dir};
         }},
         {provide: ViewportRuler, useClass: FakeViewportRuler}

src/lib/core/bidi/dir.ts

@@ -0,0 +1,49 @@
+import {
+  Directive,
+  HostBinding,
+  Output,
+  Input,
+  EventEmitter
+} from '@angular/core';
+
+import {Direction, Directionality} from './directionality';
+
+/**
+ * Directive to listen for changes of direction of part of the DOM.
+ *
+ * Would provide itself in case a component looks for the Directionality service
+ */
+@Directive({
+  selector: '[dir]',
+  // TODO(hansl): maybe `$implicit` isn't the best option here, but for now that's the best we got.
+  exportAs: '$implicit',
+  providers: [
+    {provide: Directionality, useExisting: Dir}
+  ]
+})
+export class Dir implements Directionality {
+  /** Layout direction of the element. */
+  @Input('dir') _dir: Direction = 'ltr';
+
+  /** Event emitted when the direction changes. */
+  @Output() change = new EventEmitter<void>();
+
+  /** @docs-private */
+  @HostBinding('attr.dir')
+  get dir(): Direction {
+    return this._dir;
+  }
+
+  set dir(v: Direction) {
+    let old = this._dir;
+    this._dir = v;
+    if (old != this._dir) {
+      this.change.emit();
+    }
+  }
+
+  /** Current layout direction of the element. */
+  get value(): Direction { return this.dir; }
+  set value(v: Direction) { this.dir = v; }
+}
+

src/lib/core/bidi/directionality.ts

@@ -0,0 +1 @@
+import {  EventEmitter,  Injectable,  ModuleWithProviders,  NgModule,  Optional,  SkipSelf} from '@angular/core';import {Dir} from './dir';export type Direction = 'ltr' | 'rtl';/** * The directionality (LTR / RTL) context for the application (or a subtree of it). * Exposes the current direction and a stream of direction changes. */@Injectable()export class Directionality {  value: Direction = 'ltr';  change: EventEmitter<void> = new EventEmitter<void>();  constructor() {    if (document) {    // TODO: handle auto value -    // We still need to account for dir="auto".    // It looks like HTMLElemenet.dir is also "auto" when that's set to the attribute,    // but getComputedStyle return either "ltr" or "rtl". avoiding getComputedStyle for now    // though, we're already calling it for the theming check.    this.value =      (document.body.getAttribute('dir') ||      document.documentElement.getAttribute('dir') ||      'ltr') as Direction;    }  }}@NgModule({  exports: [Dir],  declarations: [Dir],  providers: [Directionality]})export class BidiModule {  /** @deprecated */  static forRoot(): ModuleWithProviders {    return {      ngModule: BidiModule,      providers: [DIRECTIONALITY_PROVIDER]    };  }}export const DIRECTIONALITY_PROVIDER = {  // If there is already a Directionality available, use that. Otherwise, provide a new one.  provide: Directionality,  deps: [[new Optional(), new SkipSelf(), Directionality]],  useFactory: function (parentDirectionality) {    return parentDirectionality || new Directionality();  }};

src/lib/core/bidi/index.ts

@@ -0,0 +1,7 @@
+export {
+  Directionality,
+  BidiModule,
+  DIRECTIONALITY_PROVIDER,
+  Direction
+} from './directionality';
+export {Dir} from './dir';

src/lib/core/core.ts

@@ -1,6 +1,6 @@
 import {NgModule, ModuleWithProviders} from '@angular/core';
 import {MdLineModule} from './line/line';
-import {RtlModule} from './rtl/dir';
+import {BidiModule} from './bidi/index';
 import {ObserveContentModule} from './observe-content/observe-content';
 import {MdOptionModule} from './option/option';
 import {PortalModule} from './portal/portal-directives';
@@ -11,7 +11,7 @@ import {MdRippleModule} from './ripple/index';
 
 
 // RTL
-export {Dir, LayoutDirection, RtlModule} from './rtl/dir';
+export {Dir, Direction, Directionality, BidiModule} from './bidi/index';
 
 // Mutation Observer
 export {ObserveContentModule, ObserveContent} from './observe-content/observe-content';
@@ -117,7 +117,7 @@ export {CompatibilityModule, NoConflictStyleCompatibilityMode} from './compatibi
 @NgModule({
   imports: [
     MdLineModule,
-    RtlModule,
+    BidiModule,
     MdRippleModule,
     ObserveContentModule,
     PortalModule,
@@ -128,7 +128,7 @@ export {CompatibilityModule, NoConflictStyleCompatibilityMode} from './compatibi
   ],
   exports: [
     MdLineModule,
-    RtlModule,
+    BidiModule,
     MdRippleModule,
     ObserveContentModule,
     PortalModule,

src/lib/core/overlay/overlay-directives.spec.ts

@@ -5,7 +5,7 @@ import {ConnectedOverlayDirective, OverlayModule} from './overlay-directives';
 import {OverlayContainer} from './overlay-container';
 import {ConnectedPositionStrategy} from './position/connected-position-strategy';
 import {ConnectedOverlayPositionChange} from './position/connected-position';
-import {Dir} from '../rtl/dir';
+import {Directionality} from '../bidi/index';
 
 
 describe('Overlay directives', () => {
@@ -22,7 +22,7 @@ describe('Overlay directives', () => {
           overlayContainerElement = document.createElement('div');
           return {getContainerElement: () => overlayContainerElement};
         }},
-        {provide: Dir, useFactory: () => {
+        {provide: Directionality, useFactory: () => {
           return dir = { value: 'ltr' };
         }}
       ],

src/lib/core/overlay/overlay-directives.ts

@@ -22,7 +22,7 @@ import {
 import {PortalModule} from '../portal/portal-directives';
 import {ConnectedPositionStrategy} from './position/connected-position-strategy';
 import {Subscription} from 'rxjs/Subscription';
-import {Dir, LayoutDirection} from '../rtl/dir';
+import {Directionality, Direction} from '../bidi/index';
 import {Scrollable} from './scroll/scrollable';
 import {coerceBooleanProperty} from '../coercion/boolean-property';
 
@@ -154,7 +154,7 @@ export class ConnectedOverlayDirective implements OnDestroy {
       private _overlay: Overlay,
       templateRef: TemplateRef<any>,
       viewContainerRef: ViewContainerRef,
-      @Optional() private _dir: Dir) {
+      @Optional() private _dir: Directionality) {
     this._templatePortal = new TemplatePortal(templateRef, viewContainerRef);
   }
 
@@ -164,7 +164,7 @@ export class ConnectedOverlayDirective implements OnDestroy {
   }
 
   /** The element's layout direction. */
-  get dir(): LayoutDirection {
+  get dir(): Direction {
     return this._dir ? this._dir.value : 'ltr';
   }
 

src/lib/core/overlay/overlay-state.ts

@@ -1,5 +1,5 @@
 import {PositionStrategy} from './position/position-strategy';
-import {LayoutDirection} from '../rtl/dir';
+import {Direction} from '../bidi/index';
 
 
 /**
@@ -29,7 +29,7 @@ export class OverlayState {
   minHeight: number | string;
 
   /** The direction of the text in the overlay panel. */
-  direction: LayoutDirection = 'ltr';
+  direction: Direction = 'ltr';
 
   // TODO(jelbourn): configuration still to add
   // - focus trap

src/lib/core/rtl/dir.ts

@@ -14,7 +14,7 @@ import {MdGridTile} from './grid-tile';
 import {TileCoordinator} from './tile-coordinator';
 import {TileStyler, FitTileStyler, RatioTileStyler, FixedTileStyler} from './tile-styler';
 import {MdGridListColsError} from './grid-list-errors';
-import {Dir} from '../core';
+import {Directionality} from '../core';
 import {
   coerceToString,
   coerceToNumber,
@@ -62,7 +62,7 @@ export class MdGridList implements OnInit, AfterContentChecked {
   constructor(
       private _renderer: Renderer,
       private _element: ElementRef,
-      @Optional() private _dir: Dir) {}
+      @Optional() private _dir: Directionality) {}
 
   /** Amount of columns in the grid list. */
   @Input()

src/lib/grid-list/grid-list.ts

@@ -14,8 +14,8 @@ import {MdMenuPanel} from './menu-panel';
 import {MdMenuMissingError} from './menu-errors';
 import {
     isFakeMousedownFromScreenReader,
-    Dir,
-    LayoutDirection,
+    Directionality,
+    Direction,
     Overlay,
     OverlayState,
     OverlayRef,
@@ -80,7 +80,7 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
 
   constructor(private _overlay: Overlay, private _element: ElementRef,
               private _viewContainerRef: ViewContainerRef, private _renderer: Renderer,
-              @Optional() private _dir: Dir) {}
+              @Optional() private _dir: Directionality) {}
 
   ngAfterViewInit() {
     this._checkMenu();
@@ -132,7 +132,7 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
   }
 
   /** The text direction of the containing app. */
-  get dir(): LayoutDirection {
+  get dir(): Direction {
     return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
   }
 

src/lib/menu/menu-trigger.ts

@@ -19,12 +19,12 @@ import {
 } from './index';
 import {OverlayContainer} from '../core/overlay/overlay-container';
 import {ViewportRuler} from '../core/overlay/position/viewport-ruler';
-import {Dir, LayoutDirection} from '../core/rtl/dir';
+import {Directionality, Direction} from '../core/bidi/index';
 import {extendObject} from '../core/util/object-extend';
 
 describe('MdMenu', () => {
   let overlayContainerElement: HTMLElement;
-  let dir: LayoutDirection;
+  let dir: Direction;
 
   beforeEach(async(() => {
     dir = 'ltr';
@@ -44,7 +44,7 @@ describe('MdMenu', () => {
           document.body.style.margin = '0';
           return {getContainerElement: () => overlayContainerElement};
         }},
-        {provide: Dir, useFactory: () => {
+        {provide: Directionality, useFactory: () => {
           return {value: dir};
         }},
         {provide: ViewportRuler, useClass: FakeViewportRuler}

src/lib/menu/menu.spec.ts

@@ -2,7 +2,7 @@ import {NgModule, ModuleWithProviders} from '@angular/core';
 
 import {
   MdRippleModule,
-  RtlModule,
+  BidiModule,
   ObserveContentModule,
   PortalModule,
   OverlayModule,
@@ -63,7 +63,7 @@ const MATERIAL_MODULES = [
   MdTooltipModule,
   OverlayModule,
   PortalModule,
-  RtlModule,
+  BidiModule,
   StyleModule,
   A11yModule,
   PlatformModule,
@@ -90,7 +90,7 @@ const MATERIAL_MODULES = [
     MdTabsModule.forRoot(),
     MdToolbarModule.forRoot(),
     PortalModule.forRoot(),
-    RtlModule.forRoot(),
+    BidiModule.forRoot(),
     ObserveContentModule.forRoot(),
 
     // These modules include providers.

src/lib/module.ts

@@ -15,7 +15,7 @@ import {OverlayContainer} from '../core/overlay/overlay-container';
 import {MdSelect, MdSelectFloatPlaceholderType} from './select';
 import {MdSelectDynamicMultipleError, MdSelectNonArrayValueError} from './select-errors';
 import {MdOption} from '../core/option/option';
-import {Dir} from '../core/rtl/dir';
+import {Directionality} from '../core/bidi/index';
 import {
   ControlValueAccessor, FormControl, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule
 } from '@angular/forms';
@@ -64,7 +64,7 @@ describe('MdSelect', () => {
 
           return {getContainerElement: () => overlayContainerElement};
         }},
-        {provide: Dir, useFactory: () => {
+        {provide: Directionality, useFactory: () => {
           return dir = { value: 'ltr' };
         }},
         {provide: ViewportRuler, useClass: FakeViewportRuler}

src/lib/select/select.spec.ts

@@ -20,7 +20,7 @@ import {
 import {MdOption, MdOptionSelectionChange} from '../core/option/option';
 import {ENTER, SPACE} from '../core/keyboard/keycodes';
 import {FocusKeyManager} from '../core/a11y/focus-key-manager';
-import {Dir} from '../core/rtl/dir';
+import {Directionality} from '../core/bidi/index';
 import {Observable} from 'rxjs/Observable';
 import {Subscription} from 'rxjs/Subscription';
 import {transformPlaceholder, transformPanel, fadeInContent} from './select-animations';
@@ -303,7 +303,8 @@ export class MdSelect implements AfterContentInit, OnDestroy, OnInit, ControlVal
 
   constructor(private _element: ElementRef, private _renderer: Renderer,
               private _viewportRuler: ViewportRuler, private _changeDetectorRef: ChangeDetectorRef,
-              @Optional() private _dir: Dir, @Self() @Optional() public _control: NgControl,
+              @Optional() private _dir: Directionality,
+              @Self() @Optional() public _control: NgControl,
               @Attribute('tabindex') tabIndex: string) {
     if (this._control) {
       this._control.valueAccessor = this;