source: trip-planner-front/node_modules/@angular/material/fesm2015/grid-list.js@ 8d391a1

Last change on this file since 8d391a1 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 29.2 KB
Line 
1import { InjectionToken, Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, Optional, Inject, Input, ContentChildren, Directive, NgModule } from '@angular/core';
2import { setLines, MatLine, MatLineModule, MatCommonModule } from '@angular/material/core';
3import { coerceNumberProperty } from '@angular/cdk/coercion';
4import { Directionality } from '@angular/cdk/bidi';
5
6/**
7 * @license
8 * Copyright Google LLC All Rights Reserved.
9 *
10 * Use of this source code is governed by an MIT-style license that can be
11 * found in the LICENSE file at https://angular.io/license
12 */
13/**
14 * Class for determining, from a list of tiles, the (row, col) position of each of those tiles
15 * in the grid. This is necessary (rather than just rendering the tiles in normal document flow)
16 * because the tiles can have a rowspan.
17 *
18 * The positioning algorithm greedily places each tile as soon as it encounters a gap in the grid
19 * large enough to accommodate it so that the tiles still render in the same order in which they
20 * are given.
21 *
22 * The basis of the algorithm is the use of an array to track the already placed tiles. Each
23 * element of the array corresponds to a column, and the value indicates how many cells in that
24 * column are already occupied; zero indicates an empty cell. Moving "down" to the next row
25 * decrements each value in the tracking array (indicating that the column is one cell closer to
26 * being free).
27 *
28 * @docs-private
29 */
30class TileCoordinator {
31 constructor() {
32 /** Index at which the search for the next gap will start. */
33 this.columnIndex = 0;
34 /** The current row index. */
35 this.rowIndex = 0;
36 }
37 /** Gets the total number of rows occupied by tiles */
38 get rowCount() { return this.rowIndex + 1; }
39 /**
40 * Gets the total span of rows occupied by tiles.
41 * Ex: A list with 1 row that contains a tile with rowspan 2 will have a total rowspan of 2.
42 */
43 get rowspan() {
44 const lastRowMax = Math.max(...this.tracker);
45 // if any of the tiles has a rowspan that pushes it beyond the total row count,
46 // add the difference to the rowcount
47 return lastRowMax > 1 ? this.rowCount + lastRowMax - 1 : this.rowCount;
48 }
49 /**
50 * Updates the tile positions.
51 * @param numColumns Amount of columns in the grid.
52 * @param tiles Tiles to be positioned.
53 */
54 update(numColumns, tiles) {
55 this.columnIndex = 0;
56 this.rowIndex = 0;
57 this.tracker = new Array(numColumns);
58 this.tracker.fill(0, 0, this.tracker.length);
59 this.positions = tiles.map(tile => this._trackTile(tile));
60 }
61 /** Calculates the row and col position of a tile. */
62 _trackTile(tile) {
63 // Find a gap large enough for this tile.
64 const gapStartIndex = this._findMatchingGap(tile.colspan);
65 // Place tile in the resulting gap.
66 this._markTilePosition(gapStartIndex, tile);
67 // The next time we look for a gap, the search will start at columnIndex, which should be
68 // immediately after the tile that has just been placed.
69 this.columnIndex = gapStartIndex + tile.colspan;
70 return new TilePosition(this.rowIndex, gapStartIndex);
71 }
72 /** Finds the next available space large enough to fit the tile. */
73 _findMatchingGap(tileCols) {
74 if (tileCols > this.tracker.length && (typeof ngDevMode === 'undefined' || ngDevMode)) {
75 throw Error(`mat-grid-list: tile with colspan ${tileCols} is wider than ` +
76 `grid with cols="${this.tracker.length}".`);
77 }
78 // Start index is inclusive, end index is exclusive.
79 let gapStartIndex = -1;
80 let gapEndIndex = -1;
81 // Look for a gap large enough to fit the given tile. Empty spaces are marked with a zero.
82 do {
83 // If we've reached the end of the row, go to the next row.
84 if (this.columnIndex + tileCols > this.tracker.length) {
85 this._nextRow();
86 gapStartIndex = this.tracker.indexOf(0, this.columnIndex);
87 gapEndIndex = this._findGapEndIndex(gapStartIndex);
88 continue;
89 }
90 gapStartIndex = this.tracker.indexOf(0, this.columnIndex);
91 // If there are no more empty spaces in this row at all, move on to the next row.
92 if (gapStartIndex == -1) {
93 this._nextRow();
94 gapStartIndex = this.tracker.indexOf(0, this.columnIndex);
95 gapEndIndex = this._findGapEndIndex(gapStartIndex);
96 continue;
97 }
98 gapEndIndex = this._findGapEndIndex(gapStartIndex);
99 // If a gap large enough isn't found, we want to start looking immediately after the current
100 // gap on the next iteration.
101 this.columnIndex = gapStartIndex + 1;
102 // Continue iterating until we find a gap wide enough for this tile. Since gapEndIndex is
103 // exclusive, gapEndIndex is 0 means we didn't find a gap and should continue.
104 } while ((gapEndIndex - gapStartIndex < tileCols) || (gapEndIndex == 0));
105 // If we still didn't manage to find a gap, ensure that the index is
106 // at least zero so the tile doesn't get pulled out of the grid.
107 return Math.max(gapStartIndex, 0);
108 }
109 /** Move "down" to the next row. */
110 _nextRow() {
111 this.columnIndex = 0;
112 this.rowIndex++;
113 // Decrement all spaces by one to reflect moving down one row.
114 for (let i = 0; i < this.tracker.length; i++) {
115 this.tracker[i] = Math.max(0, this.tracker[i] - 1);
116 }
117 }
118 /**
119 * Finds the end index (exclusive) of a gap given the index from which to start looking.
120 * The gap ends when a non-zero value is found.
121 */
122 _findGapEndIndex(gapStartIndex) {
123 for (let i = gapStartIndex + 1; i < this.tracker.length; i++) {
124 if (this.tracker[i] != 0) {
125 return i;
126 }
127 }
128 // The gap ends with the end of the row.
129 return this.tracker.length;
130 }
131 /** Update the tile tracker to account for the given tile in the given space. */
132 _markTilePosition(start, tile) {
133 for (let i = 0; i < tile.colspan; i++) {
134 this.tracker[start + i] = tile.rowspan;
135 }
136 }
137}
138/**
139 * Simple data structure for tile position (row, col).
140 * @docs-private
141 */
142class TilePosition {
143 constructor(row, col) {
144 this.row = row;
145 this.col = col;
146 }
147}
148
149/**
150 * @license
151 * Copyright Google LLC All Rights Reserved.
152 *
153 * Use of this source code is governed by an MIT-style license that can be
154 * found in the LICENSE file at https://angular.io/license
155 */
156/**
157 * Injection token used to provide a grid list to a tile and to avoid circular imports.
158 * @docs-private
159 */
160const MAT_GRID_LIST = new InjectionToken('MAT_GRID_LIST');
161
162/**
163 * @license
164 * Copyright Google LLC All Rights Reserved.
165 *
166 * Use of this source code is governed by an MIT-style license that can be
167 * found in the LICENSE file at https://angular.io/license
168 */
169class MatGridTile {
170 constructor(_element, _gridList) {
171 this._element = _element;
172 this._gridList = _gridList;
173 this._rowspan = 1;
174 this._colspan = 1;
175 }
176 /** Amount of rows that the grid tile takes up. */
177 get rowspan() { return this._rowspan; }
178 set rowspan(value) { this._rowspan = Math.round(coerceNumberProperty(value)); }
179 /** Amount of columns that the grid tile takes up. */
180 get colspan() { return this._colspan; }
181 set colspan(value) { this._colspan = Math.round(coerceNumberProperty(value)); }
182 /**
183 * Sets the style of the grid-tile element. Needs to be set manually to avoid
184 * "Changed after checked" errors that would occur with HostBinding.
185 */
186 _setStyle(property, value) {
187 this._element.nativeElement.style[property] = value;
188 }
189}
190MatGridTile.decorators = [
191 { type: Component, args: [{
192 selector: 'mat-grid-tile',
193 exportAs: 'matGridTile',
194 host: {
195 'class': 'mat-grid-tile',
196 // Ensures that the "rowspan" and "colspan" input value is reflected in
197 // the DOM. This is needed for the grid-tile harness.
198 '[attr.rowspan]': 'rowspan',
199 '[attr.colspan]': 'colspan'
200 },
201 template: "<div class=\"mat-grid-tile-content\">\n <ng-content></ng-content>\n</div>\n",
202 encapsulation: ViewEncapsulation.None,
203 changeDetection: ChangeDetectionStrategy.OnPush,
204 styles: [".mat-grid-list{display:block;position:relative}.mat-grid-tile{display:block;position:absolute;overflow:hidden}.mat-grid-tile .mat-grid-tile-header,.mat-grid-tile .mat-grid-tile-footer{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-header>*,.mat-grid-tile .mat-grid-tile-footer>*{margin:0;padding:0;font-weight:normal;font-size:inherit}.mat-grid-tile .mat-grid-tile-header.mat-2-line,.mat-grid-tile .mat-grid-tile-footer.mat-2-line{height:68px}.mat-grid-tile .mat-grid-list-text{display:flex;flex-direction:column;flex:auto;box-sizing:border-box;overflow:hidden}.mat-grid-tile .mat-grid-list-text>*{margin:0;padding:0;font-weight:normal;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}.mat-grid-tile-content{top:0;left:0;right:0;bottom:0;position:absolute;display:flex;align-items:center;justify-content:center;height:100%;padding:0;margin:0}\n"]
205 },] }
206];
207MatGridTile.ctorParameters = () => [
208 { type: ElementRef },
209 { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_GRID_LIST,] }] }
210];
211MatGridTile.propDecorators = {
212 rowspan: [{ type: Input }],
213 colspan: [{ type: Input }]
214};
215class MatGridTileText {
216 constructor(_element) {
217 this._element = _element;
218 }
219 ngAfterContentInit() {
220 setLines(this._lines, this._element);
221 }
222}
223MatGridTileText.decorators = [
224 { type: Component, args: [{
225 selector: 'mat-grid-tile-header, mat-grid-tile-footer',
226 template: "<ng-content select=\"[mat-grid-avatar], [matGridAvatar]\"></ng-content>\n<div class=\"mat-grid-list-text\"><ng-content select=\"[mat-line], [matLine]\"></ng-content></div>\n<ng-content></ng-content>\n",
227 changeDetection: ChangeDetectionStrategy.OnPush,
228 encapsulation: ViewEncapsulation.None
229 },] }
230];
231MatGridTileText.ctorParameters = () => [
232 { type: ElementRef }
233];
234MatGridTileText.propDecorators = {
235 _lines: [{ type: ContentChildren, args: [MatLine, { descendants: true },] }]
236};
237/**
238 * Directive whose purpose is to add the mat- CSS styling to this selector.
239 * @docs-private
240 */
241class MatGridAvatarCssMatStyler {
242}
243MatGridAvatarCssMatStyler.decorators = [
244 { type: Directive, args: [{
245 selector: '[mat-grid-avatar], [matGridAvatar]',
246 host: { 'class': 'mat-grid-avatar' }
247 },] }
248];
249/**
250 * Directive whose purpose is to add the mat- CSS styling to this selector.
251 * @docs-private
252 */
253class MatGridTileHeaderCssMatStyler {
254}
255MatGridTileHeaderCssMatStyler.decorators = [
256 { type: Directive, args: [{
257 selector: 'mat-grid-tile-header',
258 host: { 'class': 'mat-grid-tile-header' }
259 },] }
260];
261/**
262 * Directive whose purpose is to add the mat- CSS styling to this selector.
263 * @docs-private
264 */
265class MatGridTileFooterCssMatStyler {
266}
267MatGridTileFooterCssMatStyler.decorators = [
268 { type: Directive, args: [{
269 selector: 'mat-grid-tile-footer',
270 host: { 'class': 'mat-grid-tile-footer' }
271 },] }
272];
273
274/**
275 * @license
276 * Copyright Google LLC All Rights Reserved.
277 *
278 * Use of this source code is governed by an MIT-style license that can be
279 * found in the LICENSE file at https://angular.io/license
280 */
281/**
282 * RegExp that can be used to check whether a value will
283 * be allowed inside a CSS `calc()` expression.
284 */
285const cssCalcAllowedValue = /^-?\d+((\.\d+)?[A-Za-z%$]?)+$/;
286/**
287 * Sets the style properties for an individual tile, given the position calculated by the
288 * Tile Coordinator.
289 * @docs-private
290 */
291class TileStyler {
292 constructor() {
293 this._rows = 0;
294 this._rowspan = 0;
295 }
296 /**
297 * Adds grid-list layout info once it is available. Cannot be processed in the constructor
298 * because these properties haven't been calculated by that point.
299 *
300 * @param gutterSize Size of the grid's gutter.
301 * @param tracker Instance of the TileCoordinator.
302 * @param cols Amount of columns in the grid.
303 * @param direction Layout direction of the grid.
304 */
305 init(gutterSize, tracker, cols, direction) {
306 this._gutterSize = normalizeUnits(gutterSize);
307 this._rows = tracker.rowCount;
308 this._rowspan = tracker.rowspan;
309 this._cols = cols;
310 this._direction = direction;
311 }
312 /**
313 * Computes the amount of space a single 1x1 tile would take up (width or height).
314 * Used as a basis for other calculations.
315 * @param sizePercent Percent of the total grid-list space that one 1x1 tile would take up.
316 * @param gutterFraction Fraction of the gutter size taken up by one 1x1 tile.
317 * @return The size of a 1x1 tile as an expression that can be evaluated via CSS calc().
318 */
319 getBaseTileSize(sizePercent, gutterFraction) {
320 // Take the base size percent (as would be if evenly dividing the size between cells),
321 // and then subtracting the size of one gutter. However, since there are no gutters on the
322 // edges, each tile only uses a fraction (gutterShare = numGutters / numCells) of the gutter
323 // size. (Imagine having one gutter per tile, and then breaking up the extra gutter on the
324 // edge evenly among the cells).
325 return `(${sizePercent}% - (${this._gutterSize} * ${gutterFraction}))`;
326 }
327 /**
328 * Gets The horizontal or vertical position of a tile, e.g., the 'top' or 'left' property value.
329 * @param offset Number of tiles that have already been rendered in the row/column.
330 * @param baseSize Base size of a 1x1 tile (as computed in getBaseTileSize).
331 * @return Position of the tile as a CSS calc() expression.
332 */
333 getTilePosition(baseSize, offset) {
334 // The position comes the size of a 1x1 tile plus gutter for each previous tile in the
335 // row/column (offset).
336 return offset === 0 ? '0' : calc(`(${baseSize} + ${this._gutterSize}) * ${offset}`);
337 }
338 /**
339 * Gets the actual size of a tile, e.g., width or height, taking rowspan or colspan into account.
340 * @param baseSize Base size of a 1x1 tile (as computed in getBaseTileSize).
341 * @param span The tile's rowspan or colspan.
342 * @return Size of the tile as a CSS calc() expression.
343 */
344 getTileSize(baseSize, span) {
345 return `(${baseSize} * ${span}) + (${span - 1} * ${this._gutterSize})`;
346 }
347 /**
348 * Sets the style properties to be applied to a tile for the given row and column index.
349 * @param tile Tile to which to apply the styling.
350 * @param rowIndex Index of the tile's row.
351 * @param colIndex Index of the tile's column.
352 */
353 setStyle(tile, rowIndex, colIndex) {
354 // Percent of the available horizontal space that one column takes up.
355 let percentWidthPerTile = 100 / this._cols;
356 // Fraction of the vertical gutter size that each column takes up.
357 // For example, if there are 5 columns, each column uses 4/5 = 0.8 times the gutter width.
358 let gutterWidthFractionPerTile = (this._cols - 1) / this._cols;
359 this.setColStyles(tile, colIndex, percentWidthPerTile, gutterWidthFractionPerTile);
360 this.setRowStyles(tile, rowIndex, percentWidthPerTile, gutterWidthFractionPerTile);
361 }
362 /** Sets the horizontal placement of the tile in the list. */
363 setColStyles(tile, colIndex, percentWidth, gutterWidth) {
364 // Base horizontal size of a column.
365 let baseTileWidth = this.getBaseTileSize(percentWidth, gutterWidth);
366 // The width and horizontal position of each tile is always calculated the same way, but the
367 // height and vertical position depends on the rowMode.
368 let side = this._direction === 'rtl' ? 'right' : 'left';
369 tile._setStyle(side, this.getTilePosition(baseTileWidth, colIndex));
370 tile._setStyle('width', calc(this.getTileSize(baseTileWidth, tile.colspan)));
371 }
372 /**
373 * Calculates the total size taken up by gutters across one axis of a list.
374 */
375 getGutterSpan() {
376 return `${this._gutterSize} * (${this._rowspan} - 1)`;
377 }
378 /**
379 * Calculates the total size taken up by tiles across one axis of a list.
380 * @param tileHeight Height of the tile.
381 */
382 getTileSpan(tileHeight) {
383 return `${this._rowspan} * ${this.getTileSize(tileHeight, 1)}`;
384 }
385 /**
386 * Calculates the computed height and returns the correct style property to set.
387 * This method can be implemented by each type of TileStyler.
388 * @docs-private
389 */
390 getComputedHeight() { return null; }
391}
392/**
393 * This type of styler is instantiated when the user passes in a fixed row height.
394 * Example `<mat-grid-list cols="3" rowHeight="100px">`
395 * @docs-private
396 */
397class FixedTileStyler extends TileStyler {
398 constructor(fixedRowHeight) {
399 super();
400 this.fixedRowHeight = fixedRowHeight;
401 }
402 init(gutterSize, tracker, cols, direction) {
403 super.init(gutterSize, tracker, cols, direction);
404 this.fixedRowHeight = normalizeUnits(this.fixedRowHeight);
405 if (!cssCalcAllowedValue.test(this.fixedRowHeight) &&
406 (typeof ngDevMode === 'undefined' || ngDevMode)) {
407 throw Error(`Invalid value "${this.fixedRowHeight}" set as rowHeight.`);
408 }
409 }
410 setRowStyles(tile, rowIndex) {
411 tile._setStyle('top', this.getTilePosition(this.fixedRowHeight, rowIndex));
412 tile._setStyle('height', calc(this.getTileSize(this.fixedRowHeight, tile.rowspan)));
413 }
414 getComputedHeight() {
415 return [
416 'height', calc(`${this.getTileSpan(this.fixedRowHeight)} + ${this.getGutterSpan()}`)
417 ];
418 }
419 reset(list) {
420 list._setListStyle(['height', null]);
421 if (list._tiles) {
422 list._tiles.forEach(tile => {
423 tile._setStyle('top', null);
424 tile._setStyle('height', null);
425 });
426 }
427 }
428}
429/**
430 * This type of styler is instantiated when the user passes in a width:height ratio
431 * for the row height. Example `<mat-grid-list cols="3" rowHeight="3:1">`
432 * @docs-private
433 */
434class RatioTileStyler extends TileStyler {
435 constructor(value) {
436 super();
437 this._parseRatio(value);
438 }
439 setRowStyles(tile, rowIndex, percentWidth, gutterWidth) {
440 let percentHeightPerTile = percentWidth / this.rowHeightRatio;
441 this.baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterWidth);
442 // Use padding-top and margin-top to maintain the given aspect ratio, as
443 // a percentage-based value for these properties is applied versus the *width* of the
444 // containing block. See http://www.w3.org/TR/CSS2/box.html#margin-properties
445 tile._setStyle('marginTop', this.getTilePosition(this.baseTileHeight, rowIndex));
446 tile._setStyle('paddingTop', calc(this.getTileSize(this.baseTileHeight, tile.rowspan)));
447 }
448 getComputedHeight() {
449 return [
450 'paddingBottom', calc(`${this.getTileSpan(this.baseTileHeight)} + ${this.getGutterSpan()}`)
451 ];
452 }
453 reset(list) {
454 list._setListStyle(['paddingBottom', null]);
455 list._tiles.forEach(tile => {
456 tile._setStyle('marginTop', null);
457 tile._setStyle('paddingTop', null);
458 });
459 }
460 _parseRatio(value) {
461 const ratioParts = value.split(':');
462 if (ratioParts.length !== 2 && (typeof ngDevMode === 'undefined' || ngDevMode)) {
463 throw Error(`mat-grid-list: invalid ratio given for row-height: "${value}"`);
464 }
465 this.rowHeightRatio = parseFloat(ratioParts[0]) / parseFloat(ratioParts[1]);
466 }
467}
468/**
469 * This type of styler is instantiated when the user selects a "fit" row height mode.
470 * In other words, the row height will reflect the total height of the container divided
471 * by the number of rows. Example `<mat-grid-list cols="3" rowHeight="fit">`
472 *
473 * @docs-private
474 */
475class FitTileStyler extends TileStyler {
476 setRowStyles(tile, rowIndex) {
477 // Percent of the available vertical space that one row takes up.
478 let percentHeightPerTile = 100 / this._rowspan;
479 // Fraction of the horizontal gutter size that each column takes up.
480 let gutterHeightPerTile = (this._rows - 1) / this._rows;
481 // Base vertical size of a column.
482 let baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterHeightPerTile);
483 tile._setStyle('top', this.getTilePosition(baseTileHeight, rowIndex));
484 tile._setStyle('height', calc(this.getTileSize(baseTileHeight, tile.rowspan)));
485 }
486 reset(list) {
487 if (list._tiles) {
488 list._tiles.forEach(tile => {
489 tile._setStyle('top', null);
490 tile._setStyle('height', null);
491 });
492 }
493 }
494}
495/** Wraps a CSS string in a calc function */
496function calc(exp) {
497 return `calc(${exp})`;
498}
499/** Appends pixels to a CSS string if no units are given. */
500function normalizeUnits(value) {
501 return value.match(/([A-Za-z%]+)$/) ? value : `${value}px`;
502}
503
504/**
505 * @license
506 * Copyright Google LLC All Rights Reserved.
507 *
508 * Use of this source code is governed by an MIT-style license that can be
509 * found in the LICENSE file at https://angular.io/license
510 */
511// TODO(kara): Conditional (responsive) column count / row size.
512// TODO(kara): Re-layout on window resize / media change (debounced).
513// TODO(kara): gridTileHeader and gridTileFooter.
514const MAT_FIT_MODE = 'fit';
515class MatGridList {
516 constructor(_element, _dir) {
517 this._element = _element;
518 this._dir = _dir;
519 /** The amount of space between tiles. This will be something like '5px' or '2em'. */
520 this._gutter = '1px';
521 }
522 /** Amount of columns in the grid list. */
523 get cols() { return this._cols; }
524 set cols(value) {
525 this._cols = Math.max(1, Math.round(coerceNumberProperty(value)));
526 }
527 /** Size of the grid list's gutter in pixels. */
528 get gutterSize() { return this._gutter; }
529 set gutterSize(value) { this._gutter = `${value == null ? '' : value}`; }
530 /** Set internal representation of row height from the user-provided value. */
531 get rowHeight() { return this._rowHeight; }
532 set rowHeight(value) {
533 const newValue = `${value == null ? '' : value}`;
534 if (newValue !== this._rowHeight) {
535 this._rowHeight = newValue;
536 this._setTileStyler(this._rowHeight);
537 }
538 }
539 ngOnInit() {
540 this._checkCols();
541 this._checkRowHeight();
542 }
543 /**
544 * The layout calculation is fairly cheap if nothing changes, so there's little cost
545 * to run it frequently.
546 */
547 ngAfterContentChecked() {
548 this._layoutTiles();
549 }
550 /** Throw a friendly error if cols property is missing */
551 _checkCols() {
552 if (!this.cols && (typeof ngDevMode === 'undefined' || ngDevMode)) {
553 throw Error(`mat-grid-list: must pass in number of columns. ` +
554 `Example: <mat-grid-list cols="3">`);
555 }
556 }
557 /** Default to equal width:height if rowHeight property is missing */
558 _checkRowHeight() {
559 if (!this._rowHeight) {
560 this._setTileStyler('1:1');
561 }
562 }
563 /** Creates correct Tile Styler subtype based on rowHeight passed in by user */
564 _setTileStyler(rowHeight) {
565 if (this._tileStyler) {
566 this._tileStyler.reset(this);
567 }
568 if (rowHeight === MAT_FIT_MODE) {
569 this._tileStyler = new FitTileStyler();
570 }
571 else if (rowHeight && rowHeight.indexOf(':') > -1) {
572 this._tileStyler = new RatioTileStyler(rowHeight);
573 }
574 else {
575 this._tileStyler = new FixedTileStyler(rowHeight);
576 }
577 }
578 /** Computes and applies the size and position for all children grid tiles. */
579 _layoutTiles() {
580 if (!this._tileCoordinator) {
581 this._tileCoordinator = new TileCoordinator();
582 }
583 const tracker = this._tileCoordinator;
584 const tiles = this._tiles.filter(tile => !tile._gridList || tile._gridList === this);
585 const direction = this._dir ? this._dir.value : 'ltr';
586 this._tileCoordinator.update(this.cols, tiles);
587 this._tileStyler.init(this.gutterSize, tracker, this.cols, direction);
588 tiles.forEach((tile, index) => {
589 const pos = tracker.positions[index];
590 this._tileStyler.setStyle(tile, pos.row, pos.col);
591 });
592 this._setListStyle(this._tileStyler.getComputedHeight());
593 }
594 /** Sets style on the main grid-list element, given the style name and value. */
595 _setListStyle(style) {
596 if (style) {
597 this._element.nativeElement.style[style[0]] = style[1];
598 }
599 }
600}
601MatGridList.decorators = [
602 { type: Component, args: [{
603 selector: 'mat-grid-list',
604 exportAs: 'matGridList',
605 template: "<div>\n <ng-content></ng-content>\n</div>",
606 host: {
607 'class': 'mat-grid-list',
608 // Ensures that the "cols" input value is reflected in the DOM. This is
609 // needed for the grid-list harness.
610 '[attr.cols]': 'cols',
611 },
612 providers: [{
613 provide: MAT_GRID_LIST,
614 useExisting: MatGridList
615 }],
616 changeDetection: ChangeDetectionStrategy.OnPush,
617 encapsulation: ViewEncapsulation.None,
618 styles: [".mat-grid-list{display:block;position:relative}.mat-grid-tile{display:block;position:absolute;overflow:hidden}.mat-grid-tile .mat-grid-tile-header,.mat-grid-tile .mat-grid-tile-footer{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-header>*,.mat-grid-tile .mat-grid-tile-footer>*{margin:0;padding:0;font-weight:normal;font-size:inherit}.mat-grid-tile .mat-grid-tile-header.mat-2-line,.mat-grid-tile .mat-grid-tile-footer.mat-2-line{height:68px}.mat-grid-tile .mat-grid-list-text{display:flex;flex-direction:column;flex:auto;box-sizing:border-box;overflow:hidden}.mat-grid-tile .mat-grid-list-text>*{margin:0;padding:0;font-weight:normal;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}.mat-grid-tile-content{top:0;left:0;right:0;bottom:0;position:absolute;display:flex;align-items:center;justify-content:center;height:100%;padding:0;margin:0}\n"]
619 },] }
620];
621MatGridList.ctorParameters = () => [
622 { type: ElementRef },
623 { type: Directionality, decorators: [{ type: Optional }] }
624];
625MatGridList.propDecorators = {
626 _tiles: [{ type: ContentChildren, args: [MatGridTile, { descendants: true },] }],
627 cols: [{ type: Input }],
628 gutterSize: [{ type: Input }],
629 rowHeight: [{ type: Input }]
630};
631
632/**
633 * @license
634 * Copyright Google LLC All Rights Reserved.
635 *
636 * Use of this source code is governed by an MIT-style license that can be
637 * found in the LICENSE file at https://angular.io/license
638 */
639class MatGridListModule {
640}
641MatGridListModule.decorators = [
642 { type: NgModule, args: [{
643 imports: [MatLineModule, MatCommonModule],
644 exports: [
645 MatGridList,
646 MatGridTile,
647 MatGridTileText,
648 MatLineModule,
649 MatCommonModule,
650 MatGridTileHeaderCssMatStyler,
651 MatGridTileFooterCssMatStyler,
652 MatGridAvatarCssMatStyler
653 ],
654 declarations: [
655 MatGridList,
656 MatGridTile,
657 MatGridTileText,
658 MatGridTileHeaderCssMatStyler,
659 MatGridTileFooterCssMatStyler,
660 MatGridAvatarCssMatStyler
661 ],
662 },] }
663];
664
665/**
666 * @license
667 * Copyright Google LLC All Rights Reserved.
668 *
669 * Use of this source code is governed by an MIT-style license that can be
670 * found in the LICENSE file at https://angular.io/license
671 */
672// Privately exported for the grid-list harness.
673const ɵTileCoordinator = TileCoordinator;
674
675/**
676 * Generated bundle index. Do not edit.
677 */
678
679export { MatGridAvatarCssMatStyler, MatGridList, MatGridListModule, MatGridTile, MatGridTileFooterCssMatStyler, MatGridTileHeaderCssMatStyler, MatGridTileText, ɵTileCoordinator, MAT_GRID_LIST as ɵangular_material_src_material_grid_list_grid_list_a };
680//# sourceMappingURL=grid-list.js.map
Note: See TracBrowser for help on using the repository browser.