text: /**
   * @license
   * Copyright Google LLC All Rights Reserved.
   *
   * Use of this source code is governed by an MIT-style license that can be
   * found in the LICENSE file at https://angular.io/license
   */
  import { ChangeDetectionStrategy, Component, ContentChildren, Directive, ElementRef, Input, NgModule, Optional, ViewEncapsulation } from '@angular/core';
  import { MatCommonModule, MatLine, MatLineModule, MatLineSetter } from '@angular/material/core';
  import { Directionality } from '@angular/cdk/bidi';
  
  /**
   * @fileoverview added by tsickle
   * @suppress {checkTypes} checked by tsc
   */
  
  /**
   * Converts values into strings. Falsy values become empty strings.
   * \@docs-private
   * @param {?} value
   * @return {?}
   */
  function coerceToString(value) {
      return `${value || ''}`;
  }
  /**
   * Converts a value that might be a string into a number.
   * \@docs-private
   * @param {?} value
   * @return {?}
   */
  function coerceToNumber(value) {
      return typeof value === 'string' ? parseInt(value, 10) : value;
  }
  
  /**
   * @fileoverview added by tsickle
   * @suppress {checkTypes} checked by tsc
   */
  
  class MatGridTile {
      /**
       * @param {?} _element
       */
      constructor(_element) {
          this._element = _element;
          this._rowspan = 1;
          this._colspan = 1;
      }
      /**
       * Amount of rows that the grid tile takes up.
       * @return {?}
       */
      get rowspan() { return this._rowspan; }
      /**
       * @param {?} value
       * @return {?}
       */
      set rowspan(value) { this._rowspan = coerceToNumber(value); }
      /**
       * Amount of columns that the grid tile takes up.
       * @return {?}
       */
      get colspan() { return this._colspan; }
      /**
       * @param {?} value
       * @return {?}
       */
      set colspan(value) { this._colspan = coerceToNumber(value); }
      /**
       * Sets the style of the grid-tile element.  Needs to be set manually to avoid
       * "Changed after checked" errors that would occur with HostBinding.
       * @param {?} property
       * @param {?} value
       * @return {?}
       */
      _setStyle(property, value) {
          this._element.nativeElement.style[property] = value;
      }
  }
  MatGridTile.decorators = [
      { type: Component, args: [{selector: 'mat-grid-tile',
                  exportAs: 'matGridTile',
                  host: {
                      'class': 'mat-grid-tile',
                  },
                  template: "<figure class=\"mat-figure\"><ng-content></ng-content></figure>",
                  styles: [".mat-grid-list{display:block;position:relative}.mat-grid-tile{display:block;position:absolute;overflow:hidden}.mat-grid-tile .mat-figure{top:0;left:0;right:0;bottom:0;position:absolute;display:flex;align-items:center;justify-content:center;height:100%;padding:0;margin:0}.mat-grid-tile .mat-grid-tile-footer,.mat-grid-tile .mat-grid-tile-header{display:flex;align-items:center;height:48px;color:#fff;background:rgba(0,0,0,.38);overflow:hidden;padding:0 16px;position:absolute;left:0;right:0}.mat-grid-tile .mat-grid-tile-footer>*,.mat-grid-tile .mat-grid-tile-header>*{margin:0;padding:0;font-weight:400;font-size:inherit}.mat-grid-tile .mat-grid-tile-footer.mat-2-line,.mat-grid-tile .mat-grid-tile-header.mat-2-line{height:68px}.mat-grid-tile .mat-grid-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow:hidden}.mat-grid-tile .mat-grid-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.mat-grid-tile .mat-grid-list-text:empty{display:none}.mat-grid-tile .mat-grid-tile-header{top:0}.mat-grid-tile .mat-grid-tile-footer{bottom:0}.mat-grid-tile .mat-grid-avatar{padding-right:16px}[dir=rtl] .mat-grid-tile .mat-grid-avatar{padding-right:0;padding-left:16px}.mat-grid-tile .mat-grid-avatar:empty{display:none}"],
                  encapsulation: ViewEncapsulation.None,
                  preserveWhitespaces: false,
                  changeDetection: ChangeDetectionStrategy.OnPush,
              },] },
  ];
  /** @nocollapse */
  MatGridTile.ctorParameters = () => [
      { type: ElementRef, },
  ];
  MatGridTile.propDecorators = {
      "rowspan": [{ type: Input },],
      "colspan": [{ type: Input },],
  };
  class MatGridTileText {
      /**
       * @param {?} _element
       */
      constructor(_element) {
          this._element = _element;
      }
      /**
       * @return {?}
       */
      ngAfterContentInit() {
          this._lineSetter = new MatLineSetter(this._lines, this._element);
      }
  }
  MatGridTileText.decorators = [
      { type: Component, args: [{selector: 'mat-grid-tile-header, mat-grid-tile-footer',
                  template: "<ng-content select=\"[mat-grid-avatar], [matGridAvatar]\"></ng-content><div class=\"mat-grid-list-text\"><ng-content select=\"[mat-line], [matLine]\"></ng-content></div><ng-content></ng-content>",
                  changeDetection: ChangeDetectionStrategy.OnPush,
                  encapsulation: ViewEncapsulation.None,
                  preserveWhitespaces: false,
              },] },
  ];
  /** @nocollapse */
  MatGridTileText.ctorParameters = () => [
      { type: ElementRef, },
  ];
  MatGridTileText.propDecorators = {
      "_lines": [{ type: ContentChildren, args: [MatLine,] },],
  };
  /**
   * Directive whose purpose is to add the mat- CSS styling to this selector.
   * \@docs-private
   */
  class MatGridAvatarCssMatStyler {
  }
  MatGridAvatarCssMatStyler.decorators = [
      { type: Directive, args: [{
                  selector: '[mat-grid-avatar], [matGridAvatar]',
                  host: { 'class': 'mat-grid-avatar' }
              },] },
  ];
  /** @nocollapse */
  MatGridAvatarCssMatStyler.ctorParameters = () => [];
  /**
   * Directive whose purpose is to add the mat- CSS styling to this selector.
   * \@docs-private
   */
  class MatGridTileHeaderCssMatStyler {
  }
  MatGridTileHeaderCssMatStyler.decorators = [
      { type: Directive, args: [{
                  selector: 'mat-grid-tile-header',
                  host: { 'class': 'mat-grid-tile-header' }
              },] },
  ];
  /** @nocollapse */
  MatGridTileHeaderCssMatStyler.ctorParameters = () => [];
  /**
   * Directive whose purpose is to add the mat- CSS styling to this selector.
   * \@docs-private
   */
  class MatGridTileFooterCssMatStyler {
  }
  MatGridTileFooterCssMatStyler.decorators = [
      { type: Directive, args: [{
                  selector: 'mat-grid-tile-footer',
                  host: { 'class': 'mat-grid-tile-footer' }
              },] },
  ];
  /** @nocollapse */
  MatGridTileFooterCssMatStyler.ctorParameters = () => [];
  
  /**
   * @fileoverview added by tsickle
   * @suppress {checkTypes} checked by tsc
   */
  
  /**
   * Class for determining, from a list of tiles, the (row, col) position of each of those tiles
   * in the grid. This is necessary (rather than just rendering the tiles in normal document flow)
   * because the tiles can have a rowspan.
   *
   * The positioning algorithm greedily places each tile as soon as it encounters a gap in the grid
   * large enough to accommodate it so that the tiles still render in the same order in which they
   * are given.
   *
   * The basis of the algorithm is the use of an array to track the already placed tiles. Each
   * element of the array corresponds to a column, and the value indicates how many cells in that
   * column are already occupied; zero indicates an empty cell. Moving "down" to the next row
   * decrements each value in the tracking array (indicating that the column is one cell closer to
   * being free).
   *
   * \@docs-private
   */
  class TileCoordinator {
      /**
       * @param {?} numColumns
       * @param {?} tiles
       */
      constructor(numColumns, tiles) {
          /**
           * Index at which the search for the next gap will start.
           */
          this.columnIndex = 0;
          /**
           * The current row index.
           */
          this.rowIndex = 0;
          this.tracker = new Array(numColumns);
          this.tracker.fill(0, 0, this.tracker.length);
          this.positions = tiles.map(tile => this._trackTile(tile));
      }
      /**
       * Gets the total number of rows occupied by tiles
       * @return {?}
       */
      get rowCount() { return this.rowIndex + 1; }
      /**
       * Gets the total span of rows occupied by tiles.
       * Ex: A list with 1 row that contains a tile with rowspan 2 will have a total rowspan of 2.
       * @return {?}
       */
      get rowspan() {
          let /** @type {?} */ lastRowMax = Math.max(...this.tracker);
          // if any of the tiles has a rowspan that pushes it beyond the total row count,
          // add the difference to the rowcount
          return lastRowMax > 1 ? this.rowCount + lastRowMax - 1 : this.rowCount;
      }
      /**
       * Calculates the row and col position of a tile.
       * @param {?} tile
       * @return {?}
       */
      _trackTile(tile) {
          // Find a gap large enough for this tile.
          let /** @type {?} */ gapStartIndex = this._findMatchingGap(tile.colspan);
          // Place tile in the resulting gap.
          this._markTilePosition(gapStartIndex, tile);
          // The next time we look for a gap, the search will start at columnIndex, which should be
          // immediately after the tile that has just been placed.
          this.columnIndex = gapStartIndex + tile.colspan;
          return new TilePosition(this.rowIndex, gapStartIndex);
      }
      /**
       * Finds the next available space large enough to fit the tile.
       * @param {?} tileCols
       * @return {?}
       */
      _findMatchingGap(tileCols) {
          if (tileCols > this.tracker.length) {
              throw Error(`mat-grid-list: tile with colspan ${tileCols} is wider than ` +
                  `grid with cols="${this.tracker.length}".`);
          }
          // Start index is inclusive, end index is exclusive.
          let /** @type {?} */ gapStartIndex = -1;
          let /** @type {?} */ gapEndIndex = -1;
          // Look for a gap large enough to fit the given tile. Empty spaces are marked with a zero.
          do {
              // If we've reached the end of the row, go to the next row.
              if (this.columnIndex + tileCols > this.tracker.length) {
                  this._nextRow();
                  continue;
              }
              gapStartIndex = this.tracker.indexOf(0, this.columnIndex);
              // If there are no more empty spaces in this row at all, move on to the next row.
              if (gapStartIndex == -1) {
                  this._nextRow();
                  continue;
              }
              gapEndIndex = this._findGapEndIndex(gapStartIndex);
              // If a gap large enough isn't found, we want to start looking immediately after the current
              // gap on the next iteration.
              this.columnIndex = gapStartIndex + 1;
              // Continue iterating until we find a gap wide enough for this tile.
          } while (gapEndIndex - gapStartIndex < tileCols);
          // If we still didn't manage to find a gap, ensure that the index is
          // at least zero so the tile doesn't get pulled out of the grid.
          return Math.max(gapStartIndex, 0);
      }
      /**
       * Move "down" to the next row.
       * @return {?}
       */
      _nextRow() {
          this.columnIndex = 0;
          this.rowIndex++;
          // Decrement all spaces by one to reflect moving down one row.
          for (let /** @type {?} */ i = 0; i < this.tracker.length; i++) {
              this.tracker[i] = Math.max(0, this.tracker[i] - 1);
          }
      }
      /**
       * Finds the end index (exclusive) of a gap given the index from which to start looking.
       * The gap ends when a non-zero value is found.
       * @param {?} gapStartIndex
       * @return {?}
       */
      _findGapEndIndex(gapStartIndex) {
          for (let /** @type {?} */ i = gapStartIndex + 1; i < this.tracker.length; i++) {
              if (this.tracker[i] != 0) {
                  return i;
              }
          }
          // The gap ends with the end of the row.
          return this.tracker.length;
      }
      /**
       * Update the tile tracker to account for the given tile in the given space.
       * @param {?} start
       * @param {?} tile
       * @return {?}
       */
      _markTilePosition(start, tile) {
          for (let /** @type {?} */ i = 0; i < tile.colspan; i++) {
              this.tracker[start + i] = tile.rowspan;
          }
      }
  }
  /**
   * Simple data structure for tile position (row, col).
   * \@docs-private
   */
  class TilePosition {
      /**
       * @param {?} row
       * @param {?} col
       */
      constructor(row, col) {
          this.row = row;
          this.col = col;
      }
  }
  
  /**
   * @fileoverview added by tsickle
   * @suppress {checkTypes} checked by tsc
   */
  
  /**
   * Sets the style properties for an individual tile, given the position calculated by the
   * Tile Coordinator.
   * \@docs-private
   * @abstract
   */
  class TileStyler {
      constructor() {
          this._rows = 0;
          this._rowspan = 0;
      }
      /**
       * Adds grid-list layout info once it is available. Cannot be processed in the constructor
       * because these properties haven't been calculated by that point.
       *
       * @param {?} gutterSize Size of the grid's gutter.
       * @param {?} tracker Instance of the TileCoordinator.
       * @param {?} cols Amount of columns in the grid.
       * @param {?} direction Layout direction of the grid.
       * @return {?}
       */
      init(gutterSize, tracker, cols, direction) {
          this._gutterSize = normalizeUnits(gutterSize);
          this._rows = tracker.rowCount;
          this._rowspan = tracker.rowspan;
          this._cols = cols;
          this._direction = direction;
      }
      /**
       * Computes the amount of space a single 1x1 tile would take up (width or height).
       * Used as a basis for other calculations.
       * @param {?} sizePercent Percent of the total grid-list space that one 1x1 tile would take up.
       * @param {?} gutterFraction Fraction of the gutter size taken up by one 1x1 tile.
       * @return {?} The size of a 1x1 tile as an expression that can be evaluated via CSS calc().
       */
      getBaseTileSize(sizePercent, gutterFraction) {
          // Take the base size percent (as would be if evenly dividing the size between cells),
          // and then subtracting the size of one gutter. However, since there are no gutters on the
          // edges, each tile only uses a fraction (gutterShare = numGutters / numCells) of the gutter
          // size. (Imagine having one gutter per tile, and then breaking up the extra gutter on the
          // edge evenly among the cells).
          return `(${sizePercent}% - (${this._gutterSize} * ${gutterFraction}))`;
      }
      /**
       * Gets The horizontal or vertical position of a tile, e.g., the 'top' or 'left' property value.
       * @param {?} baseSize Base size of a 1x1 tile (as computed in getBaseTileSize).
       * @param {?} offset Number of tiles that have already been rendered in the row/column.
       * @return {?} Position of the tile as a CSS calc() expression.
       */
      getTilePosition(baseSize, offset) {
          // The position comes the size of a 1x1 tile plus gutter for each previous tile in the
          // row/column (offset).
          return offset === 0 ? '0' : calc(`(${baseSize} + ${this._gutterSize}) * ${offset}`);
      }
      /**
       * Gets the actual size of a tile, e.g., width or height, taking rowspan or colspan into account.
       * @param {?} baseSize Base size of a 1x1 tile (as computed in getBaseTileSize).
       * @param {?} span The tile's rowspan or colspan.
       * @return {?} Size of the tile as a CSS calc() expression.
       */
      getTileSize(baseSize, span) {
          return `(${baseSize} * ${span}) + (${span - 1} * ${this._gutterSize})`;
      }
      /**
       * Sets the style properties to be applied to a tile for the given row and column index.
       * @param {?} tile Tile to which to apply the styling.
       * @param {?} rowIndex Index of the tile's row.
       * @param {?} colIndex Index of the tile's column.
       * @return {?}
       */
      setStyle(tile, rowIndex, colIndex) {
          // Percent of the available horizontal space that one column takes up.
          let /** @type {?} */ percentWidthPerTile = 100 / this._cols;
          // Fraction of the vertical gutter size that each column takes up.
          // For example, if there are 5 columns, each column uses 4/5 = 0.8 times the gutter width.
          let /** @type {?} */ gutterWidthFractionPerTile = (this._cols - 1) / this._cols;
          this.setColStyles(tile, colIndex, percentWidthPerTile, gutterWidthFractionPerTile);
          this.setRowStyles(tile, rowIndex, percentWidthPerTile, gutterWidthFractionPerTile);
      }
      /**
       * Sets the horizontal placement of the tile in the list.
       * @param {?} tile
       * @param {?} colIndex
       * @param {?} percentWidth
       * @param {?} gutterWidth
       * @return {?}
       */
      setColStyles(tile, colIndex, percentWidth, gutterWidth) {
          // Base horizontal size of a column.
          let /** @type {?} */ baseTileWidth = this.getBaseTileSize(percentWidth, gutterWidth);
          // 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 /** @type {?} */ side = this._direction === 'rtl' ? 'right' : 'left';
          tile._setStyle(side, this.getTilePosition(baseTileWidth, colIndex));
          tile._setStyle('width', calc(this.getTileSize(baseTileWidth, tile.colspan)));
      }
      /**
       * Calculates the total size taken up by gutters across one axis of a list.
       * @return {?}
       */
      getGutterSpan() {
          return `${this._gutterSize} * (${this._rowspan} - 1)`;
      }
      /**
       * Calculates the total size taken up by tiles across one axis of a list.
       * @param {?} tileHeight Height of the tile.
       * @return {?}
       */
      getTileSpan(tileHeight) {
          return `${this._rowspan} * ${this.getTileSize(tileHeight, 1)}`;
      }
      /**
       * Calculates the computed height and returns the correct style property to set.
       * This method can be implemented by each type of TileStyler.
       * \@docs-private
       * @return {?}
       */
      getComputedHeight() { return null; }
  }
  /**
   * This type of styler is instantiated when the user passes in a fixed row height.
   * Example `<mat-grid-list cols="3" rowHeight="100px">`
   * \@docs-private
   */
  class FixedTileStyler extends TileStyler {
      /**
       * @param {?} fixedRowHeight
       */
      constructor(fixedRowHeight) {
          super();
          this.fixedRowHeight = fixedRowHeight;
      }
      /**
       * @param {?} gutterSize
       * @param {?} tracker
       * @param {?} cols
       * @param {?} direction
       * @return {?}
       */
      init(gutterSize, tracker, cols, direction) {
          super.init(gutterSize, tracker, cols, direction);
          this.fixedRowHeight = normalizeUnits(this.fixedRowHeight);
      }
      /**
       * @param {?} tile
       * @param {?} rowIndex
       * @return {?}
       */
      setRowStyles(tile, rowIndex) {
          tile._setStyle('top', this.getTilePosition(this.fixedRowHeight, rowIndex));
          tile._setStyle('height', calc(this.getTileSize(this.fixedRowHeight, tile.rowspan)));
      }
      /**
       * @return {?}
       */
      getComputedHeight() {
          return [
              'height', calc(`${this.getTileSpan(this.fixedRowHeight)} + ${this.getGutterSpan()}`)
          ];
      }
      /**
       * @param {?} list
       * @return {?}
       */
      reset(list) {
          list._setListStyle(['height', null]);
          list._tiles.forEach(tile => {
              tile._setStyle('top', null);
              tile._setStyle('height', null);
          });
      }
  }
  /**
   * This type of styler is instantiated when the user passes in a width:height ratio
   * for the row height.  Example `<mat-grid-list cols="3" rowHeight="3:1">`
   * \@docs-private
   */
  class RatioTileStyler extends TileStyler {
      /**
       * @param {?} value
       */
      constructor(value) {
          super();
          this._parseRatio(value);
      }
      /**
       * @param {?} tile
       * @param {?} rowIndex
       * @param {?} percentWidth
       * @param {?} gutterWidth
       * @return {?}
       */
      setRowStyles(tile, rowIndex, percentWidth, gutterWidth) {
          let /** @type {?} */ percentHeightPerTile = percentWidth / this.rowHeightRatio;
          this.baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterWidth);
          // Use padding-top and margin-top to maintain the given aspect ratio, as
          // a percentage-based value for these properties is applied versus the *width* of the
          // containing block. See http://www.w3.org/TR/CSS2/box.html#margin-properties
          tile._setStyle('marginTop', this.getTilePosition(this.baseTileHeight, rowIndex));
          tile._setStyle('paddingTop', calc(this.getTileSize(this.baseTileHeight, tile.rowspan)));
      }
      /**
       * @return {?}
       */
      getComputedHeight() {
          return [
              'paddingBottom', calc(`${this.getTileSpan(this.baseTileHeight)} + ${this.getGutterSpan()}`)
          ];
      }
      /**
       * @param {?} list
       * @return {?}
       */
      reset(list) {
          list._setListStyle(['paddingBottom', null]);
          list._tiles.forEach(tile => {
              tile._setStyle('marginTop', null);
              tile._setStyle('paddingTop', null);
          });
      }
      /**
       * @param {?} value
       * @return {?}
       */
      _parseRatio(value) {
          const /** @type {?} */ ratioParts = value.split(':');
          if (ratioParts.length !== 2) {
              throw Error(`mat-grid-list: invalid ratio given for row-height: "${value}"`);
          }
          this.rowHeightRatio = parseFloat(ratioParts[0]) / parseFloat(ratioParts[1]);
      }
  }
  /**
   * This type of styler is instantiated when the user selects a "fit" row height mode.
   * In other words, the row height will reflect the total height of the container divided
   * by the number of rows.  Example `<mat-grid-list cols="3" rowHeight="fit">`
   *
   * \@docs-private
   */
  class FitTileStyler extends TileStyler {
      /**
       * @param {?} tile
       * @param {?} rowIndex
       * @return {?}
       */
      setRowStyles(tile, rowIndex) {
          // Percent of the available vertical space that one row takes up.
          let /** @type {?} */ percentHeightPerTile = 100 / this._rowspan;
          // Fraction of the horizontal gutter size that each column takes up.
          let /** @type {?} */ gutterHeightPerTile = (this._rows - 1) / this._rows;
          // Base vertical size of a column.
          let /** @type {?} */ baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterHeightPerTile);
          tile._setStyle('top', this.getTilePosition(baseTileHeight, rowIndex));
          tile._setStyle('height', calc(this.getTileSize(baseTileHeight, tile.rowspan)));
      }
      /**
       * @param {?} list
       * @return {?}
       */
      reset(list) {
          list._tiles.forEach(tile => {
              tile._setStyle('top', null);
              tile._setStyle('height', null);
          });
      }
  }
  /**
   * Wraps a CSS string in a calc function
   * @param {?} exp
   * @return {?}
   */
  function calc(exp) { return `calc(${exp})`; }
  /**
   * Appends pixels to a CSS string if no units are given.
   * @param {?} value
   * @return {?}
   */
  function normalizeUnits(value) {
      return (value.match(/px|em|rem/)) ? value : value + 'px';
  }
  
  /**
   * @fileoverview added by tsickle
   * @suppress {checkTypes} checked by tsc
   */
  
  // TODO(kara): Conditional (responsive) column count / row size.
  // TODO(kara): Re-layout on window resize / media change (debounced).
  // TODO(kara): gridTileHeader and gridTileFooter.
  const MAT_FIT_MODE = 'fit';
  class MatGridList {
      /**
       * @param {?} _element
       * @param {?} _dir
       */
      constructor(_element, _dir) {
          this._element = _element;
          this._dir = _dir;
          /**
           * The amount of space between tiles. This will be something like '5px' or '2em'.
           */
          this._gutter = '1px';
      }
      /**
       * Amount of columns in the grid list.
       * @return {?}
       */
      get cols() { return this._cols; }
      /**
       * @param {?} value
       * @return {?}
       */
      set cols(value) { this._cols = coerceToNumber(value); }
      /**
       * Size of the grid list's gutter in pixels.
       * @return {?}
       */
      get gutterSize() { return this._gutter; }
      /**
       * @param {?} value
       * @return {?}
       */
      set gutterSize(value) { this._gutter = coerceToString(value); }
      /**
       * Set internal representation of row height from the user-provided value.
       * @param {?} value
       * @return {?}
       */
      set rowHeight(value) {
          const /** @type {?} */ newValue = coerceToString(value);
          if (newValue !== this._rowHeight) {
              this._rowHeight = newValue;
              this._setTileStyler(this._rowHeight);
          }
      }
      /**
       * @return {?}
       */
      ngOnInit() {
          this._checkCols();
          this._checkRowHeight();
      }
      /**
       * The layout calculation is fairly cheap if nothing changes, so there's little cost
       * to run it frequently.
       * @return {?}
       */
      ngAfterContentChecked() {
          this._layoutTiles();
      }
      /**
       * Throw a friendly error if cols property is missing
       * @return {?}
       */
      _checkCols() {
          if (!this.cols) {
              throw Error(`mat-grid-list: must pass in number of columns. ` +
                  `Example: <mat-grid-list cols="3">`);
          }
      }
      /**
       * Default to equal width:height if rowHeight property is missing
       * @return {?}
       */
      _checkRowHeight() {
          if (!this._rowHeight) {
              this._setTileStyler('1:1');
          }
      }
      /**
       * Creates correct Tile Styler subtype based on rowHeight passed in by user
       * @param {?} rowHeight
       * @return {?}
       */
      _setTileStyler(rowHeight) {
          if (this._tileStyler) {
              this._tileStyler.reset(this);
          }
          if (rowHeight === MAT_FIT_MODE) {
              this._tileStyler = new FitTileStyler();
          }
          else if (rowHeight && rowHeight.indexOf(':') > -1) {
              this._tileStyler = new RatioTileStyler(rowHeight);
          }
          else {
              this._tileStyler = new FixedTileStyler(rowHeight);
          }
      }
      /**
       * Computes and applies the size and position for all children grid tiles.
       * @return {?}
       */
      _layoutTiles() {
          const /** @type {?} */ tracker = new TileCoordinator(this.cols, this._tiles);
          const /** @type {?} */ direction = this._dir ? this._dir.value : 'ltr';
          this._tileStyler.init(this.gutterSize, tracker, this.cols, direction);
          this._tiles.forEach((tile, index) => {
              const /** @type {?} */ pos = tracker.positions[index];
              this._tileStyler.setStyle(tile, pos.row, pos.col);
          });
          this._setListStyle(this._tileStyler.getComputedHeight());
      }
      /**
       * Sets style on the main grid-list element, given the style name and value.
       * @param {?} style
       * @return {?}
       */
      _setListStyle(style) {
          if (style) {
              this._element.nativeElement.style[style[0]] = style[1];
          }
      }
  }
  MatGridList.decorators = [
      { type: Component, args: [{selector: 'mat-grid-list',
                  exportAs: 'matGridList',
                  template: "<div><ng-content></ng-content></div>",
                  styles: [".mat-grid-list{display:block;position:relative}.mat-grid-tile{display:block;position:absolute;overflow:hidden}.mat-grid-tile .mat-figure{top:0;left:0;right:0;bottom:0;position:absolute;display:flex;align-items:center;justify-content:center;height:100%;padding:0;margin:0}.mat-grid-tile .mat-grid-tile-footer,.mat-grid-tile .mat-grid-tile-header{display:flex;align-items:center;height:48px;color:#fff;background:rgba(0,0,0,.38);overflow:hidden;padding:0 16px;position:absolute;left:0;right:0}.mat-grid-tile .mat-grid-tile-footer>*,.mat-grid-tile .mat-grid-tile-header>*{margin:0;padding:0;font-weight:400;font-size:inherit}.mat-grid-tile .mat-grid-tile-footer.mat-2-line,.mat-grid-tile .mat-grid-tile-header.mat-2-line{height:68px}.mat-grid-tile .mat-grid-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow:hidden}.mat-grid-tile .mat-grid-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.mat-grid-tile .mat-grid-list-text:empty{display:none}.mat-grid-tile .mat-grid-tile-header{top:0}.mat-grid-tile .mat-grid-tile-footer{bottom:0}.mat-grid-tile .mat-grid-avatar{padding-right:16px}[dir=rtl] .mat-grid-tile .mat-grid-avatar{padding-right:0;padding-left:16px}.mat-grid-tile .mat-grid-avatar:empty{display:none}"],
                  host: {
                      'class': 'mat-grid-list',
                  },
                  changeDetection: ChangeDetectionStrategy.OnPush,
                  encapsulation: ViewEncapsulation.None,
                  preserveWhitespaces: false,
              },] },
  ];
  /** @nocollapse */
  MatGridList.ctorParameters = () => [
      { type: ElementRef, },
      { type: Directionality, decorators: [{ type: Optional },] },
  ];
  MatGridList.propDecorators = {
      "_tiles": [{ type: ContentChildren, args: [MatGridTile,] },],
      "cols": [{ type: Input },],
      "gutterSize": [{ type: Input },],
      "rowHeight": [{ type: Input },],
  };
  
  /**
   * @fileoverview added by tsickle
   * @suppress {checkTypes} checked by tsc
   */
  
  class MatGridListModule {
  }
  MatGridListModule.decorators = [
      { type: NgModule, args: [{
                  imports: [MatLineModule, MatCommonModule],
                  exports: [
                      MatGridList,
                      MatGridTile,
                      MatGridTileText,
                      MatLineModule,
                      MatCommonModule,
                      MatGridTileHeaderCssMatStyler,
                      MatGridTileFooterCssMatStyler,
                      MatGridAvatarCssMatStyler
                  ],
                  declarations: [
                      MatGridList,
                      MatGridTile,
                      MatGridTileText,
                      MatGridTileHeaderCssMatStyler,
                      MatGridTileFooterCssMatStyler,
                      MatGridAvatarCssMatStyler
                  ],
              },] },
  ];
  /** @nocollapse */
  MatGridListModule.ctorParameters = () => [];
  
  /**
   * @fileoverview added by tsickle
   * @suppress {checkTypes} checked by tsc
   */
  
  /**
   * @fileoverview added by tsickle
   * @suppress {checkTypes} checked by tsc
   */
  /**
   * Generated bundle index. Do not edit.
   */
  
  export { MatGridListModule, MatGridList, MatGridTile, MatGridTileText, MatGridAvatarCssMatStyler, MatGridTileHeaderCssMatStyler, MatGridTileFooterCssMatStyler };
  //# sourceMappingURL=grid-list.js.map
  