fix(dialog,bottom-sheet): don't provide directionality if no direction is set (#11285)

* Currently the dialog and bottom sheet always provide the `Directionality` in order to allow for any components placed inside of them to pick up their direction. This is problematic if the consumer didn't set a direction, because the `value` of the provided `Directionality` will be set to `undefined`. These changes switch to only providing the direction if it is defined in the config, otherwise the components will fall back to the global `Directionality`.
* Flips around some logic in the drawer so an undefined direction is consider `ltr`, rather than `rtl`.

Fixes #11262.

Author: crisbeto

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

@@ -522,6 +522,14 @@ describe('Dialog', () => {
     expect(dialogRef.componentInstance.directionality.value).toBe('rtl');
   });
 
+  it('should fall back to injecting the global direction if none is passed by the config', () => {
+    const dialogRef = dialog.openFromComponent(PizzaMsg, {});
+
+    viewContainerFixture.detectChanges();
+
+    expect(dialogRef.componentInstance.directionality.value).toBe('ltr');
+  });
+
   it('should close all of the dialogs', fakeAsync(() => {
     dialog.openFromComponent(PizzaMsg);
     dialog.openFromComponent(PizzaMsg);

src/cdk-experimental/dialog/dialog.ts

@@ -269,7 +269,8 @@ export class Dialog {
       [DIALOG_DATA, config.data]
     ]);
 
-    if (!userInjector || !userInjector.get(Directionality, null)) {
+    if (config.direction &&
+        (!userInjector || !userInjector.get<Directionality | null>(Directionality, null))) {
       injectionTokens.set(Directionality, {
         value: config.direction,
         change: observableOf()

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

@@ -224,6 +224,14 @@ describe('MatBottomSheet', () => {
     expect(bottomSheetRef.instance.directionality.value).toBe('rtl');
   });
 
+  it('should fall back to injecting the global direction if none is passed by the config', () => {
+    const bottomSheetRef = bottomSheet.open(PizzaMsg, {});
+
+    viewContainerFixture.detectChanges();
+
+    expect(bottomSheetRef.instance.directionality.value).toBe('ltr');
+  });
+
   it('should be able to set a custom panel class', () => {
     bottomSheet.open(PizzaMsg, {
       panelClass: 'custom-panel-class',

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

@@ -152,7 +152,8 @@ export class MatBottomSheet {
       [MAT_BOTTOM_SHEET_DATA, config.data]
     ]);
 
-    if (!userInjector || !userInjector.get(Directionality, null)) {
+    if (config.direction &&
+        (!userInjector || !userInjector.get<Directionality | null>(Directionality, null))) {
       injectionTokens.set(Directionality, {
         value: config.direction,
         change: observableOf()

src/lib/dialog/dialog.spec.ts

@@ -530,6 +530,14 @@ describe('MatDialog', () => {
     expect(dialogRef.componentInstance.directionality.value).toBe('rtl');
   });
 
+  it('should fall back to injecting the global direction if none is passed by the config', () => {
+    const dialogRef = dialog.open(PizzaMsg, {});
+
+    viewContainerFixture.detectChanges();
+
+    expect(dialogRef.componentInstance.directionality.value).toBe('ltr');
+  });
+
   it('should close all of the dialogs', fakeAsync(() => {
     dialog.open(PizzaMsg);
     dialog.open(PizzaMsg);

src/lib/dialog/dialog.ts

@@ -292,7 +292,8 @@ export class MatDialog {
       [MatDialogRef, dialogRef]
     ]);
 
-    if (!userInjector || !userInjector.get(Directionality, null)) {
+    if (config.direction &&
+        (!userInjector || !userInjector.get<Directionality | null>(Directionality, null))) {
       injectionTokens.set(Directionality, {
         value: config.direction,
         change: observableOf()

src/lib/sidenav/drawer.ts

@@ -625,12 +625,12 @@ export class MatDrawerContainer implements AfterContentInit, OnDestroy {
     this._right = this._left = null;
 
     // Detect if we're LTR or RTL.
-    if (!this._dir || this._dir.value == 'ltr') {
-      this._left = this._start;
-      this._right = this._end;
-    } else {
+    if (this._dir && this._dir.value === 'rtl') {
       this._left = this._end;
       this._right = this._start;
+    } else {
+      this._left = this._start;
+      this._right = this._end;
     }
   }