fix(overlay): default to global directionality (#9994)

Currently overlays default to the `ltr` direction, which means that consumers, whose apps are in RTL, have to pass in the direction explicitly for every overlay. These changes switch to taking the default direction from the global `Directionality` which is based on the `body` and `html` elements.

Fixes #9817.

Author: crisbeto

src/cdk-experimental/dialog/dialog-config.ts

@@ -79,7 +79,7 @@ export class DialogConfig<D = any> {
   data?: D | null = null;
 
   /** The layout direction for the dialog content. */
-  direction?: Direction = 'ltr';
+  direction?: Direction;
 
   /** ID of the element that describes the dialog. */
   ariaDescribedBy?: string | null = null;

src/cdk/overlay/overlay-config.ts

@@ -48,7 +48,7 @@ export class OverlayConfig {
   maxHeight?: number | string;
 
   /** The direction of the text in the overlay panel. */
-  direction?: Direction = 'ltr';
+  direction?: Direction;
 
   constructor(config?: OverlayConfig) {
     if (config) {

src/cdk/overlay/overlay.spec.ts

@@ -1,5 +1,6 @@
 import {async, fakeAsync, tick, ComponentFixture, inject, TestBed} from '@angular/core/testing';
 import {Component, NgModule, ViewChild, ViewContainerRef} from '@angular/core';
+import {Direction, Directionality} from '@angular/cdk/bidi';
 import {
   ComponentPortal,
   PortalModule,
@@ -24,10 +25,20 @@ describe('Overlay', () => {
   let overlayContainerElement: HTMLElement;
   let overlayContainer: OverlayContainer;
   let viewContainerFixture: ComponentFixture<TestComponentWithTemplatePortals>;
+  let dir: Direction;
 
   beforeEach(async(() => {
+    dir = 'ltr';
     TestBed.configureTestingModule({
-      imports: [OverlayModule, PortalModule, OverlayTestModule]
+      imports: [OverlayModule, PortalModule, OverlayTestModule],
+      providers: [{
+        provide: Directionality,
+        useFactory: () => {
+          const fakeDirectionality = {};
+          Object.defineProperty(fakeDirectionality, 'value', {get: () => dir});
+          return fakeDirectionality;
+        }
+      }],
     }).compileComponents();
   }));
 
@@ -132,13 +143,21 @@ describe('Overlay', () => {
         .toBeFalsy('Expected cake to still be on top.');
   }));
 
+  it('should take the default direction from the global Directionality', () => {
+    dir = 'rtl';
+    overlay.create().attach(componentPortal);
+
+    const pane = overlayContainerElement.children[0] as HTMLElement;
+    expect(pane.getAttribute('dir')).toBe('rtl');
+  });
+
   it('should set the direction', () => {
     const config = new OverlayConfig({direction: 'rtl'});
 
     overlay.create(config).attach(componentPortal);
 
     const pane = overlayContainerElement.children[0] as HTMLElement;
-    expect(pane.getAttribute('dir')).toEqual('rtl');
+    expect(pane.getAttribute('dir')).toBe('rtl');
   });
 
   it('should emit when an overlay is attached', () => {

src/cdk/overlay/overlay.ts

@@ -22,6 +22,7 @@ import {OverlayKeyboardDispatcher} from './keyboard/overlay-keyboard-dispatcher'
 import {OverlayContainer} from './overlay-container';
 import {ScrollStrategyOptions} from './scroll/index';
 import {DOCUMENT} from '@angular/common';
+import {Directionality} from '@angular/cdk/bidi';
 
 
 /** Next overlay unique ID. */
@@ -47,7 +48,8 @@ export class Overlay {
               private _appRef: ApplicationRef,
               private _injector: Injector,
               private _ngZone: NgZone,
-              @Inject(DOCUMENT) private _document: any) { }
+              @Inject(DOCUMENT) private _document: any,
+              private _directionality: Directionality) { }
 
   /**
    * Creates an overlay.
@@ -57,11 +59,14 @@ export class Overlay {
   create(config?: OverlayConfig): OverlayRef {
     const pane = this._createPaneElement();
     const portalOutlet = this._createPortalOutlet(pane);
+    const overlayConfig = new OverlayConfig(config);
+
+    overlayConfig.direction = overlayConfig.direction || this._directionality.value;
 
     return new OverlayRef(
       portalOutlet,
       pane,
-      new OverlayConfig(config),
+      overlayConfig,
       this._ngZone,
       this._keyboardDispatcher,
       this._document

src/lib/bottom-sheet/bottom-sheet-config.ts

@@ -23,7 +23,7 @@ export class MatBottomSheetConfig<D = any> {
   panelClass?: string | string[];
 
   /** Text layout direction for the bottom sheet. */
-  direction?: Direction = 'ltr';
+  direction?: Direction;
 
   /** Data being injected into the child component. */
   data?: D | null = null;

src/lib/dialog/dialog-config.ts

@@ -84,7 +84,7 @@ export class MatDialogConfig<D = any> {
   data?: D | null = null;
 
   /** Layout direction for the dialog's content. */
-  direction?: Direction = 'ltr';
+  direction?: Direction;
 
   /** ID of the element that describes the dialog. */
   ariaDescribedBy?: string | null = null;

src/lib/snack-bar/snack-bar-config.ts

@@ -46,7 +46,7 @@ export class MatSnackBarConfig<D = any> {
   extraClasses?: string | string[];
 
   /** Text layout direction for the snack bar. */
-  direction?: Direction = 'ltr';
+  direction?: Direction;
 
   /** Data being injected into the child component. */
   data?: D | null = null;