refactor(grid-list): remove circular dependencies (#19953)

Changes some types in order to avoid a circular dependency between the grid list and the tile styler.

Author: crisbeto

goldens/ts-circular-deps.json

@@ -31,9 +31,5 @@
   [
     "src/cdk/testing/private/e2e/actions.ts",
     "src/cdk/testing/private/e2e/query.ts"
-  ],
-  [
-    "src/material/grid-list/grid-list.ts",
-    "src/material/grid-list/tile-styler.ts"
   ]
 ]

src/material/grid-list/grid-list.ts

@@ -20,7 +20,13 @@ import {
 } from '@angular/core';
 import {MatGridTile} from './grid-tile';
 import {TileCoordinator} from './tile-coordinator';
-import {TileStyler, FitTileStyler, RatioTileStyler, FixedTileStyler} from './tile-styler';
+import {
+  TileStyler,
+  FitTileStyler,
+  RatioTileStyler,
+  FixedTileStyler,
+  TileStyleTarget,
+} from './tile-styler';
 import {Directionality} from '@angular/cdk/bidi';
 import {coerceNumberProperty, NumberInput} from '@angular/cdk/coercion';
 import {MAT_GRID_LIST, MatGridListBase} from './grid-list-base';
@@ -50,7 +56,7 @@ const MAT_FIT_MODE = 'fit';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
-export class MatGridList implements MatGridListBase, OnInit, AfterContentChecked {
+export class MatGridList implements MatGridListBase, OnInit, AfterContentChecked, TileStyleTarget {
   /** Number of columns being rendered. */
   private _cols: number;
 

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

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {MatGridList} from './grid-list';
+import {QueryList} from '@angular/core';
 import {MatGridTile} from './grid-tile';
 import {TileCoordinator} from './tile-coordinator';
 
@@ -16,6 +16,12 @@ import {TileCoordinator} from './tile-coordinator';
  */
 const cssCalcAllowedValue = /^-?\d+((\.\d+)?[A-Za-z%$]?)+$/;
 
+/** Object that can be styled by the `TileStyler`. */
+export interface TileStyleTarget {
+  _setListStyle(style: [string, string | null] | null): void;
+  _tiles: QueryList<MatGridTile>;
+}
+
 /**
  * Sets the style properties for an individual tile, given the position calculated by the
  * Tile Coordinator.
@@ -152,7 +158,7 @@ export abstract class TileStyler {
    * @param list Grid list that the styler was attached to.
    * @docs-private
    */
-  abstract reset(list: MatGridList): void;
+  abstract reset(list: TileStyleTarget): void;
 }
 
 
@@ -185,7 +191,7 @@ export class FixedTileStyler extends TileStyler {
     ];
   }
 
-  reset(list: MatGridList) {
+  reset(list: TileStyleTarget) {
     list._setListStyle(['height', null]);
 
     if (list._tiles) {
@@ -232,7 +238,7 @@ export class RatioTileStyler extends TileStyler {
     ];
   }
 
-  reset(list: MatGridList) {
+  reset(list: TileStyleTarget) {
     list._setListStyle(['paddingBottom', null]);
 
     list._tiles.forEach(tile => {
@@ -274,7 +280,7 @@ export class FitTileStyler extends TileStyler {
     tile._setStyle('height', calc(this.getTileSize(baseTileHeight, tile.rowspan)));
   }
 
-  reset(list: MatGridList) {
+  reset(list: TileStyleTarget) {
     if (list._tiles) {
       list._tiles.forEach(tile => {
         tile._setStyle('top', null);

tools/public_api_guard/material/grid-list.d.ts

@@ -3,7 +3,7 @@ export declare class MatGridAvatarCssMatStyler {
     static ɵfac: i0.ɵɵFactoryDef<MatGridAvatarCssMatStyler, never>;
 }
 
-export declare class MatGridList implements MatGridListBase, OnInit, AfterContentChecked {
+export declare class MatGridList implements MatGridListBase, OnInit, AfterContentChecked, TileStyleTarget {
     _tiles: QueryList<MatGridTile>;
     get cols(): number;
     set cols(value: number);