fix(grid-list): default to LTR when Directionality value is empty (#10111)

Author: jelbourn

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

@@ -3,6 +3,7 @@ import {Component, DebugElement} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {MatGridList, MatGridListModule} from './index';
 import {MatGridTile, MatGridTileText} from './grid-tile';
+import {Directionality} from '@angular/cdk/bidi';
 
 
 describe('MatGridList', () => {
@@ -29,6 +30,8 @@ describe('MatGridList', () => {
         GridListWithFootersWithoutLines,
         GridListWithFooterContainingTwoLines,
         GridListWithoutMatchingGap,
+        GridListWithEmptyDirectionality,
+        GridListWithRtl,
       ],
     });
 
@@ -297,6 +300,23 @@ describe('MatGridList', () => {
         .toBe(true, 'Expected none of the tiles to have a negative `left`');
   });
 
+  it('should default to LTR if empty directionality is given', () => {
+    const fixture = TestBed.createComponent(GridListWithEmptyDirectionality);
+    const tile: HTMLElement = fixture.debugElement.query(By.css('mat-grid-tile')).nativeElement;
+    fixture.detectChanges();
+
+    expect(tile.style.left).toBe('0px');
+    expect(tile.style.right).toBe('');
+  });
+
+  it('should set `right` styles for RTL', () => {
+    const fixture = TestBed.createComponent(GridListWithRtl);
+    const tile: HTMLElement = fixture.debugElement.query(By.css('mat-grid-tile')).nativeElement;
+    fixture.detectChanges();
+
+    expect(tile.style.left).toBe('');
+    expect(tile.style.right).toBe('0px');
+  });
 });
 
 
@@ -317,7 +337,6 @@ function getComputedLeft(element: DebugElement): number {
 }
 
 
-
 @Component({template: '<mat-grid-list></mat-grid-list>'})
 class GridListWithoutCols { }
 
@@ -478,3 +497,15 @@ class GridListWithFooterContainingTwoLines { }
   </mat-grid-list>
 `})
 class GridListWithoutMatchingGap { }
+
+@Component({
+  template: `<mat-grid-list cols="1"><mat-grid-tile>Hello</mat-grid-tile></mat-grid-list>`,
+  providers: [{provide: Directionality, useValue: {}}]
+})
+class GridListWithEmptyDirectionality { }
+
+@Component({
+  template: `<mat-grid-list cols="1"><mat-grid-tile>Hello</mat-grid-tile></mat-grid-list>`,
+  providers: [{provide: Directionality, useValue: {value: 'rtl'}}]
+})
+class GridListWithRtl { }

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

@@ -106,7 +106,7 @@ export abstract class TileStyler {
 
     // The width and horizontal position of each tile is always calculated the same way, but the
     // height and vertical position depends on the rowMode.
-    let side = this._direction === 'ltr' ? 'left' : 'right';
+    let side = this._direction === 'rtl' ? 'right' : 'left';
     tile._setStyle(side, this.getTilePosition(baseTileWidth, colIndex));
     tile._setStyle('width', calc(this.getTileSize(baseTileWidth, tile.colspan)));
   }