fix(bottom-sheet): inject correct directionality in child components (#…

…9996)

Currently the `MatBottomSheetConfig.direction` property will add the `dir` attribute to the overlay, however that doesn't mean that child components that inject the `Directionality` will be able to pick it up (e.g. sliders, menus etc.). These changes add an extra injection token that'll expose the direction to child components.

src/lib/bottom-sheet/BUILD.bazel

@@ -13,6 +13,7 @@ ng_module(
   deps = [
     "//src/lib/core",
     "//src/cdk/a11y",
+    "//src/cdk/bidi",
     "//src/cdk/overlay",
     "//src/cdk/portal",
     "//src/cdk/layout",

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

@@ -208,7 +208,7 @@ describe('MatBottomSheet', () => {
   }));
 
   it('should allow setting the layout direction', () => {
-    bottomSheet.open(PizzaMsg, { direction: 'rtl' });
+    bottomSheet.open(PizzaMsg, {direction: 'rtl'});
 
     viewContainerFixture.detectChanges();
 
@@ -217,6 +217,14 @@ describe('MatBottomSheet', () => {
     expect(overlayPane.getAttribute('dir')).toBe('rtl');
   });
 
+  it('should inject the correct direction in the instantiated component', () => {
+    const bottomSheetRef = bottomSheet.open(PizzaMsg, {direction: 'rtl'});
+
+    viewContainerFixture.detectChanges();
+
+    expect(bottomSheetRef.instance.directionality.value).toBe('rtl');
+  });
+
   it('should be able to set a custom panel class', () => {
     bottomSheet.open(PizzaMsg, {
       panelClass: 'custom-panel-class',

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

@@ -12,6 +12,8 @@ import {ComponentRef, TemplateRef, Injectable, Injector, Optional, SkipSelf} fro
 import {MatBottomSheetConfig, MAT_BOTTOM_SHEET_DATA} from './bottom-sheet-config';
 import {MatBottomSheetRef} from './bottom-sheet-ref';
 import {MatBottomSheetContainer} from './bottom-sheet-container';
+import {of as observableOf} from 'rxjs/observable/of';
+import {Directionality} from '@angular/cdk/bidi';
 
 /**
  * Service to trigger Material Design bottom sheets.
@@ -144,6 +146,13 @@ export class MatBottomSheet {
     injectionTokens.set(MatBottomSheetRef, bottomSheetRef);
     injectionTokens.set(MAT_BOTTOM_SHEET_DATA, config.data);
 
+    if (!userInjector || !userInjector.get(Directionality, null)) {
+      injectionTokens.set(Directionality, {
+        value: config.direction,
+        change: observableOf()
+      });
+    }
+
     return new PortalInjector(userInjector || this._injector, injectionTokens);
   }
 }